/* *****************************************************
ORDER JOURNEY
***************************************************** */
.orderJourney {
	font-size: 13px;
	border: 1px solid #f0f0f0;
	border-radius: 8px;
	line-height: normal;
}
/* *****************************************************
BUTTONS
***************************************************** */
.buttonAlignment{
	display: flex; 
	justify-content: center; 
	align-items: center; 
}

/* Icon-only .buttonClimb/.buttonClimbSolid buttons (no text label) render
   shorter than their text+icon siblings — the icon glyph alone doesn't
   establish the same line-height as the accompanying text does. Force a
   matching height via flex-centering instead of relying on line-height. */
.iconOnlyBtn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 34px;
}

.buttonClimb {
	display: inline-block;
	padding: 5px 12.5px;
	border: 2px solid gray;
	margin: 0 1px 1px 0;
	border-radius: 4px;
	box-sizing: border-box;
	text-decoration: none;
	font-family: var(--app-font);
	font-weight: 300;
	color: gray;
	text-align: center;
	transition: all 0.2s;
	background: transparent;
	font-size: 13px;
}

	.buttonClimbSolid {
	display: inline-block;
	padding: 5px 12.5px !important;
	margin: 0 1px 1px 0;
	border-radius: 4px;
	box-sizing: border-box;
	text-decoration: none;
	font-family: var(--app-font);
	font-weight: 300;
	text-align: center;
	transition: all 0.2s;
	color: white !important;
	font-size: 13px;
	background-image: linear-gradient(to right, #434343, #808080, #a9a9a9, #808080, #434343);
	font-family: var(--app-font) !important;
	border: 2px solid transparent;
}

.buttonClimbShip {
	display: inline-block;
	padding: 4px 5px 0px 5px;
	border: 2px solid gray;
	margin: -6px 0px;
	border-radius: 4px;
	box-sizing: border-box;
	text-decoration: none;
	font-family: var(--app-font);
	font-weight: 300;
	color: gray;
	text-align: center;
	transition: all 0.2s;
	background: transparent;
	font-size: 10px;
}

.ButtonClimbText {
    font-family: var(--app-font);
    font-size: 13px;
}

.buttonClimb:hover, .btnClimb:focus, .buttonClimbShip:hover {
    color: white;
	background-image: linear-gradient(to right, #434343, #808080, #a9a9a9, #808080, #434343);
	border: 2px solid gray;
}

.buttonClimbSolid:hover {
    color: gray !important;
    background: transparent;
	border: 2px solid gray;
	
}

/* buttonClimbSmall is used almost exclusively as a single icon-only glyph
   (table row actions, modal action icons, settings edit/deactivate buttons,
   etc.) — display:inline-flex + fixed width/height centers the icon in a
   stable, generous hit-box instead of relying on the old 1px 5px padding.
   That padding left almost no vertical room around the icon glyph — Font
   Awesome icons commonly render taller than their nominal font-size due to
   the font's own line-height metrics, so the icon could visually overflow
   past the 1px-padded box. Right at that edge the cursor was technically
   outside the <a>'s hoverable box while still visually over icon pixels, so
   tiny mouse movement flipped hover on/off rapidly (flicker). Transition is
   scoped to just background-color/color instead of "all" — animating
   background-image on the old gradient-based hover was a separate,
   unrelated flicker cause (browsers can't reliably interpolate gradients). */
.buttonClimbSmall {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	margin: 0 1px 1px 0;
	border-radius: 4px;
	box-sizing: border-box;
	text-decoration: none;
	font-family: var(--app-font);
	font-weight: 300;
	color: gray;
	text-align: center;
	transition: background-color 0.15s, color 0.15s;
	background: transparent;
	font-size: 13px;
}

.buttonClimbSmall:hover, .btnClimb:focus {
    color: white;
	background-image: none;
	background-color: rgba(255, 255, 255, 0.15);
	font-family: var(--app-font) !important;
	border: 0px solid transparent;
}

/* Reusable count pill — app-wide component for showing a small number next to a
   label/title/tab (e.g. "Available Label Parameters 32", a tab item count, a queue count).
   Soft filled tint, not a bold outline — a thick border reads like an alert/notification
   badge; a quiet tint reads as calm metadata, which is what a count-next-to-a-title should
   be. Deliberately hardcoded colors + !important throughout rather than Tabler's theme-
   variable badge utilities: bg-secondary/-lt, text-bg-secondary, and bg-blue all rendered
   as invisible plain text in this app's dark theme regardless of color choice.
   Root cause (found via devtools): nav.css has
     [data-bs-theme="dark"] #page-wrapper .card label, [data-bs-theme="dark"] #page-wrapper .card span
   forcing background-color:transparent!important on every span inside a card in dark mode —
   higher specificity (#id .class tag) than a plain .countPillBadge class, so it always won
   the background-color tie-break even though this class's own !important border/color still
   applied fine. Selectors below are written to match/exceed that specificity so this badge's
   background isn't stripped, instead of touching the shared nav.css rule.
   Usage: <span class="countPillBadge">32</span> for a neutral count, or add one modifier —
   countPillBadge-primary / -success / -danger / -warning — for a semantically-colored one
   (e.g. a failed-jobs count). Font matches this app's h5 heading exactly (var(--app-font),
   0.75rem, weight 600) so it reads consistently sitting next to any heading-level label. */
#page-wrapper .card span.countPillBadge {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	min-width: 1.75rem !important;
	height: 1.375rem !important;
	padding: 0 0.55rem !important;
	border-radius: 50rem !important;
	font-family: var(--app-font) !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: normal !important;
	white-space: nowrap !important;
	border: none !important;
	background-color: rgba(119, 110, 110, 0.14) !important;
	color: #776e6e !important;
}

[data-bs-theme="dark"] #page-wrapper .card span.countPillBadge {
	background-color: rgba(255, 255, 255, 0.14) !important;
	color: #e6e6e6 !important;
}

/* Semantic variants — same shape/sizing, colored tint+text in both themes (unlike the
   neutral default, these keep their meaning rather than turning white/grey in dark mode). */
#page-wrapper .card span.countPillBadge-primary {
	background-color: rgba(6, 111, 209, 0.14) !important;
	color: #066fd1 !important;
}
[data-bs-theme="dark"] #page-wrapper .card span.countPillBadge-primary {
	background-color: rgba(90, 169, 242, 0.18) !important;
	color: #5aa9f2 !important;
}

#page-wrapper .card span.countPillBadge-success {
	background-color: rgba(47, 179, 68, 0.14) !important;
	color: #2fb344 !important;
}
[data-bs-theme="dark"] #page-wrapper .card span.countPillBadge-success {
	background-color: rgba(111, 217, 127, 0.18) !important;
	color: #6fd97f !important;
}

#page-wrapper .card span.countPillBadge-danger {
	background-color: rgba(214, 57, 57, 0.14) !important;
	color: #d63939 !important;
}
[data-bs-theme="dark"] #page-wrapper .card span.countPillBadge-danger {
	background-color: rgba(240, 129, 129, 0.18) !important;
	color: #f08181 !important;
}

#page-wrapper .card span.countPillBadge-warning {
	background-color: rgba(247, 103, 7, 0.14) !important;
	color: #f76707 !important;
}
[data-bs-theme="dark"] #page-wrapper .card span.countPillBadge-warning {
	background-color: rgba(255, 179, 102, 0.18) !important;
	color: #ffb366 !important;
}

.btn {
	color: white;
}

.butInline {
	display: inline-block !important;
}

.closeBtn {
	position: relative;
	z-index: 1;
}

/* *****************************************************
CLIMB COLORS
***************************************************** */
.aTag, .aTagTH {
	color: #337ab7 !important;
}

.xeroColor {
	color: #19aed0 !important;
}

.climbColor {
	color: gray !important;
}
.purBackColor {
	background-color: #41b6e6 !important;
}

.purColor {
	color: #41b6e6 !important;
}

.pur-border-color {
	border-color: #41b6e6 !important;
}

.proBackColor {
	background-color: #dd9cdf !important;
}

.proColor {
	color: #dd9cdf !important;
}

.pro-border-color {
	border-color: #dd9cdf !important;
}

.logsBackColor {
	background-color: #e9937c !important;
}

.logsColor {
	color: #e9937c !important;
}

.logs-border-color {
	border-color: #e9937c !important;
}

.invBackColor {
	background-color: #ffb639 !important;
}

.invColor {
	color: #ffb639 !important;
}

.intBackColor {
	background-color: #81E2EF !important;
}

.intColor {
	color: #81E2EF !important;
}

.whiteColor {
	color: rgb(255, 255, 255) !important;
}

.salesBackColor {
	background-color: #deb85f !important;
}

.salesColor {
	color: #deb85f !important;
}

.sales-border-color {
	border-color: #deb85f !important;
}

.crmBackColor {
	background-color: #EADA24 !important;
}

.crmColor {
	color: #EADA24 !important;
}

.accBackColor {
	background-color: #00a494 !important;
}

.accColor {
	color: #00a494 !important;
	--module-color: #00a494;
}

/* "+ Add" hint links (Product Category, Ingredients, Allergens, etc.) —
   white reads on the dark theme's dark card background, blue on light */
[data-bs-theme="dark"] .addLinkColor {
	color: #fff !important;
}

html:not([data-bs-theme="dark"]) .addLinkColor {
	color: #0d6efd !important;
}

.hrBackColor {
	background-color: #E56DB1 !important;
}

.hrColor {
	color: #E56DB1 !important;
}

.reportBackColor {
	background-color: #475dd4 !important;
}

.reportColor {
	color: #475dd4 !important;
}

.qaBackColor {
	background-color: #ADDD2A !important;
}

.qaColor,.qaColor>th {
	color: #ADDD2A !important;
}

.designBackColor {
	background-color: #776e6e !Important;
}

.designColor {
	color: #776e6e !Important;
}

.design-border-color {
	border-color: #776e6e !important;
}

.onlineBackColor {
	background-color: #7121D8 !important;
}

.onlineColor {
	color: #7121D8 !important;
}

.posBackColor {
	background-color: #BC3F2E !important;
}

.posColor {
	color: #BC3F2E !important;
}

.supportBackColor {
	background-color: #87189d !important;
}

.supportColor {
	color: #87189d !important;
}

.climbGrad {
	background-image: linear-gradient(to right, #434343, #808080, #a9a9a9, #808080, #434343);
}
.climbGradBackColor {
	color: gray;
    background: -webkit-linear-gradient(#434343, #808080, #a9a9a9, #808080, #434343);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.climbGradColor {
	color: linear-gradient(to right, #434343, #808080, #a9a9a9, #808080, #434343) !important;
}

.whiteBackColor {
	background-color: white !important;
}

.lightGreen {
	color: #6ef146 !important
}
/* *****************************************************
INPUT BOXES
***************************************************** */
/* INPUT FOR ORDERING */
.input_box_po {
	border-bottom: 1px solid #41b6e6!important;
	border: 1px solid #ccc;
	display: block;
    border-radius: 4px;
    height: 25px;
    width: 100%;
    background-color: #fff;
    padding: 0 10px;
    font-size: 10px;
}

.input_box_po_com {
	border-bottom: 1px solid #41b6e6!important;
    border: 1px solid #ccc;
	/* border-width: 0px; */
	display: block;
    border-radius: 4px;
    height: 25px;
    width: 100%;
    background-color: #fff;
    padding: 0 10px;
    font-size: 10px;
    line-height: 1.42857143;
    color: #555;
    background-image: none;
}   

.addressPo1 {
	border-bottom: 1px solid #41b6e6!important;
	border-width: 0px;
    width: 58%;
    height: 25px;
    padding: 5px;
    font-size: 10px;
    color: #555;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
} 

.addressPo2 {
	border-bottom: 1px solid #41b6e6!important;
	border-width: 0px;
    width: 40%;
    height: 25px;
    padding: 5px;
    font-size: 10px;
    color: #555;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.input_box_co {
	border-bottom: 1px solid #deb85f !important;
	border-width: 0px;
	display: block;
	width: 100%;
	height: 25px;
	padding: 6px 12px;
	font-size: 10px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.input_box_crm {
	border-bottom: 1px solid #EADA24 !important;
	border-width: 0px;
	display: block;
	width: 100%;
	height: 25px;
	padding: 6px 12px;
	font-size: 10px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
}

/* .input_box_design {
	border-bottom: 1px solid #776e6e !important;
	border-width: 0px;
	display: block;
	width: 100%;
	height: 25px;
	padding: 6px 12px;
	font-size: 10px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
} */

.input_box_co_ship {
	border-bottom: 1px solid #deb85f !important;
	border-width: 0px;
	height: 25px;
	padding: 6px 12px;
	font-size: 10px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
}

/* INPUT BOX FOR COLORING */
.input_box {
	border-bottom: 1px solid #deb85f !important;
	border-width: 0px;
}

.input_crm {
	border-bottom: 1px solid #EADA24 !important;
	border-width: 0px;
}

.input_box_hr {
	border-bottom: 1px solid #E56DB1 !important;
	border-width: 0px;
}

.input_box_pro {
	border-bottom: 1px solid #DD9CDF !important;
	border-width: 0px;
}

.input_box_support {
	border-bottom: 1px solid #87189d !important;
	border-width: 0px;
}

/* INPUT DISABLED FOR EDITING */
.input_box_po_edit {
	border-bottom: 1px solid #41b6e6!important;
	border: 1px solid #ccc;
    border-radius: 4px;
    height: 25px;
    width: 100%;
    background-color: white;
    padding: 0 10px;
	line-height: 25px;
}

.input_box_co_edit {
	border-bottom: 1px solid #deb85f!important;
	border: 1px solid #ccc;
    border-radius: 4px;
    height: 25px;
    width: 100%;
    padding: 0px 5px 0 5px;
}

.input_box_design {
	border-bottom: 1px solid #776e6e !important;
	border: 1px solid #ccc;
    border-radius: 4px;
    height: 25px;
    width: 100%;
    padding: 0px 5px 0 5px;
}

.input_box_qa {
	border-bottom: 1px solid #ADDD2A!important;
	border: 1px solid #ccc;
    border-radius: 4px;
    height: 30px;
    width: 100%;
    background-color: white;
    font-family: var(--app-font) !important;
}

.input_box_int {
	border-bottom: 1px solid #81E2EF !important;
	border: 1px solid #ccc;
    border-radius: 4px;
    height: 25px;
    width: 100%;
    padding: 0px 5px 0 10px;
}

.input_box_quote {
	border-bottom: 1px solid #deb85f!important;
	border: 1px solid #ccc;
    border-radius: 4px;
    height: 25px;
    width: 100%;
    padding: 0px 5px 0 10px;
}

.input_box_proLog {
	border-bottom: 1px solid #DD9CDF!important;
	border: 1px solid #ccc;
    border-radius: 4px;
    height: 25px;
    width: 100%;
    padding: 0px 5px 0 10px;
}

.input_box_log_100 {
	border-bottom: 1px solid #E8927C!important;
	border: 1px solid #ccc;
    border-radius: 4px;
    height: 25px;
    width: 100%;
    line-height: 25px;
    padding: 0 10px;
}

.input_box_log_10 {
	border-bottom: 1px solid #E8927C!important;
	border: 1px solid #ccc;
    border-radius: 4px;
    height: 25px;
    width: 10%;
    line-height: 25px;
}

.crm-form-control {
    border-bottom: 1px solid #EADA24 !important;
}

.crm-form-control:focus {
    box-shadow: none !important;
    outline: none !important;
    border-bottom: 2px solid #EADA24 !important;
}

.sales-form-control {
    border-bottom: 1px solid #deb85f !important;
}

/*Textbox and dropdown height*/
.form-control {
	font-size: 13px !important;
}

.form-control:not(textarea) {
  height: 40px !important;
}

/* Single select */
.select2-container .select2-selection--single {
    height: 40px !important;
    font-size: 13px !important;
    line-height: 40px !important; /* Vertically center text */
}

/* Rendered text inside dropdown */
.select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 40px !important;
    font-size: 13px !important;
}

/* Dropdown arrow alignment */
.select2-container .select2-selection--single .select2-selection__arrow {
    height: 38px !important;
}

/* Search box inside Select2 dropdown */
.select2-container--default 
.select2-search--dropdown 
.select2-search__field {
    height: 40px !important;
    font-size: 13px !important;
}

/* Style dropdown options */
.select2-container--default .select2-results__option {
    font-size: 13px !important;
    padding: 10px 12px;   /* controls height */
    line-height: 1.4;
}

.sales-form-control:focus {
    box-shadow: none !important;
    outline: none !important;
    border-bottom: 2px solid #deb85f !important;
}

.purchase-form-control {
    border-bottom: 1px solid #41b6e6 !important;
}

.purchase-form-control:focus {
    box-shadow: none !important;
    outline: none !important;
    border-bottom: 2px solid #41b6e6 !important;
}

/* Purchasing data-entry form (Place Order) uses the blue purchasing accent,
   not the sales gold default. nav.css paints a gold focus ring on every
   `#page-wrapper .card .form-control/.form-select:focus`. Scoping to the
   form id (#purchaseOrderForm = two IDs) outranks that rule and re-points
   EVERY field — header fields AND the Product Lines / Additional Charges
   table inputs (which are bare .form-control) — to purchasing blue. */
[data-bs-theme="dark"] #page-wrapper #purchaseOrderForm .form-control:focus,
[data-bs-theme="dark"] #page-wrapper #purchaseOrderForm .form-select:focus,
[data-bs-theme="dark"] #page-wrapper #purchaseOrderForm textarea.form-control:focus,
html:not([data-bs-theme="dark"]) #page-wrapper #purchaseOrderForm .form-control:focus,
html:not([data-bs-theme="dark"]) #page-wrapper #purchaseOrderForm .form-select:focus,
html:not([data-bs-theme="dark"]) #page-wrapper #purchaseOrderForm textarea.form-control:focus,
[data-bs-theme="dark"] #page-wrapper #editPurchaseOrderInline .form-control:focus,
[data-bs-theme="dark"] #page-wrapper #editPurchaseOrderInline .form-select:focus,
[data-bs-theme="dark"] #page-wrapper #editPurchaseOrderInline textarea.form-control:focus,
html:not([data-bs-theme="dark"]) #page-wrapper #editPurchaseOrderInline .form-control:focus,
html:not([data-bs-theme="dark"]) #page-wrapper #editPurchaseOrderInline .form-select:focus,
html:not([data-bs-theme="dark"]) #page-wrapper #editPurchaseOrderInline textarea.form-control:focus,
[data-bs-theme="dark"] #page-wrapper .co-module-pur .form-control:focus,
[data-bs-theme="dark"] #page-wrapper .co-module-pur .form-select:focus,
[data-bs-theme="dark"] #page-wrapper .co-module-pur textarea.form-control:focus,
html:not([data-bs-theme="dark"]) #page-wrapper .co-module-pur .form-control:focus,
html:not([data-bs-theme="dark"]) #page-wrapper .co-module-pur .form-select:focus,
html:not([data-bs-theme="dark"]) #page-wrapper .co-module-pur textarea.form-control:focus {
    border-color: #41b6e6 !important;
    box-shadow: 0 0 0 0.15rem rgba(65, 182, 230, 0.18) !important;
}

/* Product autocomplete (select2) dropdown is appended to <body>, outside the
   form, so the #purchaseOrderForm scope above can't reach it. initProductSelect
   tags the purchasing dropdown with .co-module-pur; re-point its search field
   focus from nav.css gold to purchasing blue. */
[data-bs-theme="dark"] .select2-dropdown.co-module-pur .select2-search__field:focus,
html:not([data-bs-theme="dark"]) .select2-dropdown.co-module-pur .select2-search__field:focus {
    border-color: #41b6e6 !important;
    box-shadow: 0 0 0 0.15rem rgba(65, 182, 230, 0.18) !important;
}

/* Purchasing product dropdown: highlighted/selected result options in blue, not
   Sales gold (dropdown is body-appended and tagged .co-module-pur by initProductSelect). */
[data-bs-theme="dark"] .select2-dropdown.co-module-pur .select2-results__option--highlighted,
[data-bs-theme="dark"] .select2-dropdown.co-module-pur .select2-results__option--highlighted[aria-selected] {
    background-color: rgba(65, 182, 230, 0.15) !important;
    color: #41b6e6 !important;
}
[data-bs-theme="dark"] .select2-dropdown.co-module-pur .select2-results__option[aria-selected=true] {
    background-color: rgba(65, 182, 230, 0.08) !important;
    color: #41b6e6 !important;
}

/* containerCssClass 'co-module-pur' puts the class ON the .select2-container
   element itself. Override open-border using self-selector (not descendant). */
[data-bs-theme="dark"] #page-wrapper .select2-container--default.co-module-pur.select2-container--open .select2-selection--single,
html:not([data-bs-theme="dark"]) #page-wrapper .select2-container--default.co-module-pur.select2-container--open .select2-selection--single {
    border-color: #41b6e6 !important;
    box-shadow: 0 0 0 0.15rem rgba(65, 182, 230, 0.18) !important;
}

/* CRM product dropdown (createLead / editLead): same treatment in CRM yellow.
   initProductSelect tags the dropdown + container with .co-module-crm. */
[data-bs-theme="dark"] .select2-dropdown.co-module-crm .select2-search__field:focus,
html:not([data-bs-theme="dark"]) .select2-dropdown.co-module-crm .select2-search__field:focus {
    border-color: #EADA24 !important;
    box-shadow: 0 0 0 0.15rem rgba(234, 218, 36, 0.18) !important;
}
[data-bs-theme="dark"] .select2-dropdown.co-module-crm .select2-results__option--highlighted,
[data-bs-theme="dark"] .select2-dropdown.co-module-crm .select2-results__option--highlighted[aria-selected] {
    background-color: rgba(234, 218, 36, 0.15) !important;
    color: #EADA24 !important;
}
[data-bs-theme="dark"] .select2-dropdown.co-module-crm .select2-results__option[aria-selected=true] {
    background-color: rgba(234, 218, 36, 0.08) !important;
    color: #EADA24 !important;
}
[data-bs-theme="dark"] #page-wrapper .select2-container--default.co-module-crm.select2-container--open .select2-selection--single,
html:not([data-bs-theme="dark"]) #page-wrapper .select2-container--default.co-module-crm.select2-container--open .select2-selection--single {
    border-color: #EADA24 !important;
    box-shadow: 0 0 0 0.15rem rgba(234, 218, 36, 0.18) !important;
}

.proLogs-form-control {
    border-bottom: 1px solid #DD9CDF !important;
}

.proLogs-form-control:focus {
    box-shadow: none !important;
    outline: none !important;
    border-bottom: 2px solid #DD9CDF !important;
}

.logs-form-control {
    border-bottom: 1px solid #e9937c !important;
}

.logs-form-control:focus {
    box-shadow: none !important;
    outline: none !important;
    border-bottom: 2px solid #e9937c !important;
}


/* TOTAL AMOUNTS */

.totalAmount span {
	margin-left: 11em;
    font-size: 15px;
    font-weight: bold;
    padding: 9px 5px;
}

.amtEditPuOr {
	border-bottom: 3px solid #41b6e6!important;
	margin-left: 4em;
	/* margin-right: 1.7em; */
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 3px 20px;
	text-align: right;
	width: 140px;
	font-size: 12px;
	height: 30px;
}

.amtEditCuOr {
	border-bottom: 3px solid #deb85f !important;
	margin-left: 4em;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 3px 10px;
	color: black;
	font-weight: 600;
	width: 140px;
	font-size: 12px;
	text-align: right !important;
	height: 30px;
}

.amtIntCuOr {
	border-bottom: 3px solid #81E2EF!important;
	margin-left: 4em;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 3px 10px;
	color: black;
	font-weight: 600;
	width: 140px;
	font-size: 12px;
	text-align: right;
	height: 30px;
}

.amtAcc {
	border-bottom: 3px solid #00a494 !important;
	margin-left: 4em;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 3px 10px;
	color: black;
	font-weight: 600;
	width: 140px;
	font-size: 12px;
	text-align: right;
	height: 30px;
}

.amountInputDesign {
	border-bottom: 3px solid #776e6e !important;
	margin-left: 4em;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 3px 10px;
	color: black;
	font-weight: 600;
	width: 140px;
	font-size: 12px;
	text-align: right;
	height: 30px;
}

.amtEditCrmOr {
	border-bottom: 3px solid #EADA24!important;
	margin-left: 4em;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 3px 10px;
	color: black;
	font-weight: 600;
	width: 140px;
	font-size: 12px;
	text-align: right;
	height: 30px;
}

/* SHIPPING MODAL */
.shipModalSales {
	border-bottom: 3px solid #deb85f !important;
	margin-left: 4em;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 3px 10px;
	color: black;
	font-weight: 600;
	width: 60%x;
	font-size: 12px;
	text-align: right;
	height: 30px;
}

.shipModalDesign {
	border-bottom: 3px solid #776e6e !important;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 3px 20px;
	color: black;
	font-weight: 600;
	width: 60%x;
	font-size: 12px;
	text-align: right;
	height: 30px;
}


/* *****************************************************
STAIR LOGOS
***************************************************** */
.stairs {
	width: 17px !important;
}

.stairsSmall {
	width: 11px !important;
}

/* *****************************************************
DELIVERED/UNDELIVERED
***************************************************** */
.undelivered {
	background-color: #D8D8D8;
}

/* PICKED/ APPROVED/ MONTH PRICE */
.delivered, .monthPrice {
	background-color: #99FF33 !important;
}

/* TOOLTIP */
.commentColor + .tooltip > .tooltip-inner {
  font-size: 9px;
}
/* WARNING COLOR */
.warningWriting {
	color: red;
}

/* ON-HOLD */
.onHold {
	background-color: gray;
	color: white;
	line-height: 50px;
    vertical-align: middle;
    text-align: center;
    margin-bottom: 5px;
    font-size: 13px;
}

.completeOrder {
	background-color: green;
	color: white;
	line-height: 50px;
    vertical-align: middle;
    text-align: center;
    margin-bottom: 5px;
}

.onHoldLine {
	background-color: gray;
	color: white;
}

/* DEACTIVATED */
.deactivatedProduct {
	background-color: #f18484;
}

/* CREDIT */
.creditBackColor {
	background-color: #dc8cbc;
}

/* *****************************************************
MARGINS
***************************************************** */
.marTop65 {
	margin-top: 65px !important;		
}

.marTop50 {
	margin-top: 50px !important;		
}

.marTop40Hide1200 {
	margin-top: 40px;	
}

.marTop40 {
	margin-top: 40px;
}

.marTop35 {
	margin-top: 35px !important;		
}

.marTop30 {
	margin-top: 30px;
}

.marTop25 {
	margin-top: 25px;
}

.marTop20 {
	margin-top: 20px;
}

.marTop-15 {
	margin-top: -15px;
}

.marTop-5 {
	margin-top: -5px !important;
}

.climbLogoMarTop {
	margin-top: 20px;
}

.marTop15 {
	margin-top: 15px;
}
.marTop5 {
	margin-top: 5px;
}

.marTop10 {
	margin-top: 10px;
}

.pageTitleMarTop {
	margin-top: 1rem;
}

.marTop10Hide1200 {
	margin-top: 10px;
}

.marTop-10 {
	margin-top: -10px;
}

.marLeft0 {
	margin-left: 0px;
}

.marLeft5 {
	margin-left: 5px;
}

.marLeft10 {
	margin-left: 10px !important;
}

.marLeft17 {
	margin-left: 17px !important;
}

.marLeft20 {
	margin-left: 20px;
}

.marLeft25 {
	margin-left: 25px;
}

.marLeft75 {
	margin-left: 75px;
}

.marRight5 {
	margin-right: 5px !important;
}

.marBot150 {
	margin-bottom: 150px;
}

.marBot30 {
	margin-bottom: 30px;
}

.marBot20 {
	margin-bottom: 20px;
}
.marBot15 {
	margin-bottom: 15px !important;
}

.marBot10 {
	margin-bottom: 10px;
}

.marBot5 {
	margin-bottom: 5px;
}
.marBot6 {
	margin-bottom: 6px;
}
.marBot0 {
	margin-bottom: 0px;
}

.footerMarBottom {
	/* 415 media */
}

.borBot0 {
	border-bottom: 0px;
}

/* *****************************************************
PADDINGS
***************************************************** */
.padLeft50 {
	padding-left: 50px;
}

.padLeft30 {
	padding-left: 30px;
}

.padLeft20 {
	padding-left: 20px !important;
}

.padLeft-20 {
	padding-left: -20px;
}

.padLeft10 {
	padding-left: 10px !important;
}

.padLeft8 {
	padding-left: 8px !important;
}

.padLeft5 {
	padding-left: 5px !important;
}

.padLeft18px{
	padding-left: 18px !important;
}

.padRight230 {
	padding-right: 230px !important;
}

.padRight166 {
	padding-right: 166px !important;
}

.padRight88 {
	padding-right: 88px !important;
}

.padRight50 {
	padding-right: 50px !important;
}

.padRight20 {
	padding-right: 20px !important;
}

.padRight10 {
	padding-right: 10px !important;
}

.padRight5 {
	padding-right: 5px !important;
}

.padRight3 {
	padding-right: 3px !important;
}

.padTop10 {
	padding-top: 10px !important;
}
.padTop15 {
	padding-top: 15px;
}

.padTop20Hide1200 {
	padding-top: 20px;
}

.padTop5 {
	padding-top: 5px;
}
.padTop3 {
	padding-top: 3px;
}

.padBot15 {
	padding-bottom: 15px;
}

.padBot10 {
	padding-bottom: 10px;
}

.padBot5 {
	padding-bottom: 5px;
}

.pad0px {
	padding: 0px !important;
}

.pad2px {
	padding: 2px !important;
}

.pad10px {
	padding: 10px !important;
}

/* *****************************************************
FLOATS
***************************************************** */
.floatRight {
	float: right;
}

/* *****************************************************
HEIGHTS
***************************************************** */
.height5 {
	height: 5px !important;
}
.height10 {
	height: 10px !important;
}
.height15 {
	height: 15px !important;
}
.height20 {
	height: 20px !important;
}
.height25 {
	height: 25px !important;
}
.height60 {
	height: 60px !important;
}

/* *****************************************************
BORDERS
***************************************************** */
.statusCompleteBorder {
  border: 2px solid green !important;
  border-radius: 12px;
  padding: 5px;
}

.statusInProgressBorder {
  border: 2px solid #ffb639 !important;
  border-radius: 12px;
  padding: 5px;
}

.statusErrorBorder {
  border: 2px solid red !important;
  border-radius: 12px;
  padding: 5px;
}

.statusNotStartedBorder {
  border: 2px solid white !important;
  border-radius: 12px;
  padding: 5px;
}

.verAlign {
	vertical-align: middle !important;
}

.noPadding {
	padding: 0px !important;
}
/* *****************************************************
WIDTHS
***************************************************** */
.width100 {
	width: 100%;
}

.width70 {
	width: 70px !important;
}

.width50 {
	width: 50px !important;
}

.width55 {
	width: 55px !important;
}

.width40 {
	width: 40px !important;
	text-align: center;
}

.width35 {
	width: 35px !important;
}

.width45 {
	width: 45px !important;
	text-align: center;
}

.width31 {
	width: 31px;
}

.width15 {
	width: 15px;
}

.width10 {
	width: 10px !important;
}

.width5 {
	width: 5px !important;
}
/* *****************************************************
FONTS
***************************************************** */
.font20 {
	font-size: 20px;
}

.font18_900_13px {
	font-size: 18px;
}

.font17 {
	font-size: 17px !important;
}

.font16 {
	font-size: 16px !important;
}

.font15 {
	font-size: 15px !important;
}

.font14 {
	font-size: 14px !important;
}

.font13, .font13 input, .font13 select {
	font-size: 13px;
}	

.font12 {
	font-size: 12px;
}

.font11 {
	font-size: 11px;
}
.font11_1200_7px {
	font-size: 11px;
}
.registerFont11 input, .registerFont11 select, .registerFont11 label {
	font-size: 11px;
}

.font10_5, .font10_5 td, .font10_5 td input, .font10_5 td select {
	font-size: 10.5px !important;
}

.font10, .font10 td, .font10 td input, .font10 td select, .font10 tr td {
	font-size: 10px !important;
}

.font9, .font9 td, .font9 td input, .font9 td select, .font9 tr td {
	font-size: 9px;
}

.font8, .font8 td, .font8 td input, .font8 td select, .font8 tr td {
	font-size: 8px !important;
}

.table12{
	font-size: 12px;
}

.whiteFont, .whiteFont th {
	color: white !important;
}

.blackFont, .blackFont th {
	color: black !important;
}

.blueFont {
	font-weight: 600;
	color: #337ab7;
}

.bold {
	font-weight: bold;
}

.boldOther {
	font-weight: 600;
	font-family: var(--app-font) !important;
}

.unbold {
	font-weight: 300;
}

.cusComInfo {
	color: green;
	font-size: 8.5px;
	/* font-size: 8px; 321 Media
	maxlength="40" */
}

.font1-5em{
	font-size: 1.5em !important;
}

.modal-body {
	font-size: 0.875rem !important;
}
/* Modal header: center title, pin close button to right */
.modal-header {
	position: relative;
	justify-content: center;
}
.modal-header .btn-close {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
}
/* Modal footer: transparent so it inherits modal-content background, no blue tint */
.modal-footer {
	background-color: transparent !important;
}
/* *****************************************************
LABELS AND INPUTS
***************************************************** */
.labelBoxFont {
	font-size: 13px;
}
.totalLabel {
	font-size: 12px;
	font-family: var(--app-font) !important;
}

/* tableLabel header now handled by Tabler-style rules in nav.css */
.tableLabel li {
	font-family: var(--app-font) !important;
}

.tableBorder {
	border: 2px solid white;
}

.searchLabel, .searchLabel th {
	text-align: center;
	color: black !important;
	font-family: var(--app-font) !important;
	font-weight: bold;
	font-size: 13px;
}

.searchInput {
	text-align: center;
}

.infoLabel, .infoLabel th {
	color: black !important;
	font-weight: 500;
	font-size: 0.875rem;
}

/* Tabler's default backdrop is both too light (opacity 0.24) AND the wrong
   colour for this app — --tblr-backdrop-bg is a bluish navy-gray (#1f2937),
   while this app's actual dark theme body is a neutral near-black (#1e1e1e).
   That mismatch is what reads as "not matching the dark theme": a blue-tinted
   haze bleeding through instead of a proper dark dim. Repoint both. */
.modal-backdrop {
	--tblr-backdrop-bg: #101010 !important;
	--tblr-backdrop-opacity: 0.75 !important;
}

/* Generic modal fixes — every Bootstrap modal in the app is placed as a
   sibling AFTER #page-wrapper closes (not nested inside it), so none of the
   existing "#page-wrapper .card ..." rules (input styling, focus rings,
   .infoLabel handling) ever reach inside a modal. Rather than repeat an
   ID-scoped patch per modal (as first done for #teamAddModal/#teamEditModal),
   these rules key off .modal-content itself so EVERY modal gets the same
   fix automatically, with no markup changes required. */

/* Bigger, uppercase modal titles (e.g. "ADD TEAM") across every modal. */
.modal-content .modal-title {
	font-size: 1.1rem !important;
	text-transform: uppercase !important;
	font-weight: 700 !important;
}

/* Recessed dark textbox look used everywhere else in the app. */
[data-bs-theme="dark"] .modal-content .form-control,
[data-bs-theme="dark"] .modal-content .form-select {
	background-color: #1c1c1c !important;
	border: 1px solid #424242 !important;
	border-radius: 0.45rem !important;
	color: #e3e6ec !important;
}

/* Same gap as nav.css's #page-wrapper .card select rule: darkening the
   closed select doesn't reach the native open-dropdown popup — that needs
   <option> styled directly.
   !important: sb-admin.css has a blanket "option { background-color: white
   !important; }" (legacy, pre-dates dark theme) that otherwise wins outright
   regardless of specificity. */
[data-bs-theme="dark"] .modal-content .form-select option {
	background-color: #1c1c1c !important;
	color: #e3e6ec !important;
}

/* Generic fallback so EVERY native <select> gets a dark closed box + dark
   open-dropdown popup, even ones outside a .card or .modal-content (search
   bars, filter rows, standalone forms). More specific rules above (card /
   modal) still win on specificity where they apply their own exact shade. */
[data-bs-theme="dark"] select {
	background-color: #1e1e1e !important;
	border-color: #3a3a3a !important;
	color: #e3e6ec !important;
}
[data-bs-theme="dark"] select option {
	background-color: #1e1e1e !important;
	color: #e3e6ec !important;
}

/* Default focus ring — neutral, NOT tied to any business module. Modals pop
   up across every module (Teams/Production, Records/QA, Bin Setup/Inventory,
   etc.) and mostly carry no .co-module-XXX wrapper, so defaulting to the
   page-level base rule's gold (that's literally .salesColor, #deb85f/#ffd166)
   would bleed Sales branding into unrelated modules by default. Use
   designColor (#776e6e) instead — the same neutral, non-module colour this
   app already uses for generic UI like the "Confirmation" modal title. */
[data-bs-theme="dark"] .modal-content .form-control:focus,
[data-bs-theme="dark"] .modal-content .form-select:focus {
	border-color: #776e6e !important;
	box-shadow: 0 0 0 0.15rem rgba(119, 110, 110, 0.25) !important;
}
html:not([data-bs-theme="dark"]) .modal-content .form-control:focus,
html:not([data-bs-theme="dark"]) .modal-content .form-select:focus {
	border-color: #776e6e !important;
	box-shadow: 0 0 0 0.15rem rgba(119, 110, 110, 0.20) !important;
}

/* Module-coloured focus ring — if a modal's content is wrapped with one of
   the app's existing .co-module-XXX classes (same convention used on regular
   pages), re-point the neutral ring above to that module's colour. This
   drops the "#page-wrapper" requirement from the equivalent page-level rules
   so the same classes work inside modals too — no new classes invented. */
[data-bs-theme="dark"] .modal-content .co-module-pur .form-control:focus,
[data-bs-theme="dark"] .modal-content .co-module-pur .form-select:focus {
	border-color: #41b6e6 !important;
	box-shadow: 0 0 0 0.15rem rgba(65, 182, 230, 0.18) !important;
}
[data-bs-theme="dark"] .modal-content .co-module-pro .form-control:focus,
[data-bs-theme="dark"] .modal-content .co-module-pro .form-select:focus {
	border-color: #dd9cdf !important;
	box-shadow: 0 0 0 0.15rem rgba(221, 156, 223, 0.18) !important;
}
[data-bs-theme="dark"] .modal-content .co-module-crm .form-control:focus,
[data-bs-theme="dark"] .modal-content .co-module-crm .form-select:focus {
	border-color: #EADA24 !important;
	box-shadow: 0 0 0 0.15rem rgba(234, 218, 36, 0.18) !important;
}

/* .infoLabel used inside a modal gets the same crisp white .form-label
   already gets there (via theme.css's broad dark-theme rule on
   .modal-content), instead of nav.css's muted gray (#8e96a8) meant for
   .infoLabel on regular in-page cards. Scoping to .modal-content avoids
   touching .infoLabel anywhere outside a modal. */
[data-bs-theme="dark"] .modal-content .infoLabel {
	color: #ffffff !important;
}

#dueAmtDIV {
	display: flex !important;
	align-items: center;
	gap: 12px !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	padding: 12px 16px !important;
	background-color: #f8f9fa;
	border-radius: 8px;
	border: 1px solid #dee2e6;
}

#dueAmtDIV .badge {
	padding: 8px 16px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	background-color: #0d6efd !important;
	min-width: 60px;
	text-align: center;
}

.infoInput {
	line-height: 25px;
	font-size: 12px;
	color: black !important;
}

.tableInput {
	line-height: 50px !important;
}

.tablePadding td, .tablePadding th {
	padding: 0px 6px !important;
}

.tablePadding td .form-control,
.tablePadding td input,
.tablePadding td select,
.tablePadding th .form-control {
	padding-left: 0.75rem !important;
	padding-right: 0.75rem !important;
}

.tableRowPadding td, .tableRowPadding th {
    padding: 0px 10px 0px 0px !important;
}

/* Footer TOTAL row alignment for the Product Lines / Additional Charges tables.
   Body number cells = 6px cell padding + 0.75rem input padding, so a body
   value sits ~18px from the column's right edge. The footer totals are plain
   labels in non-tablePadding cells, so without this they drift out of line.
   Match the cell padding and add the input's inner padding to the labels so
   the digits line up directly under their columns. */
#orderTable tfoot td,
#addChargesServicesTable tfoot td {
    padding-left: 6px !important;
    padding-right: 6px !important;
    vertical-align: middle !important;
}
#orderTable tfoot td.text-right > label,
#addChargesServicesTable tfoot td.text-right > label {
    display: block;
    width: 100%;
    text-align: right !important;   /* override "#page-wrapper .card * {text-align:left}" */
    padding-right: 0.75rem;
    margin-bottom: 0;
}
.sumLabel, .sumLabel th {
	color: black !important;
	text-align: center;	
	font-size: 13px;
}

.sumInput, .sumInput td {
	text-align: center;	
	color: black !important;
	font-size: 13px;
}

/* COMMENT COLOR */
.commentColor {
	color: green !important;
}

/* *****************************************************
STATUS INDICATOR COLORS — dedicated, purpose-built classes for anything
representing a queued/in-progress/success/failure state (e.g. the Print
Queue status flags). Use these instead of the brand-color classes above
(commentColor/salesColor/logsColor/designColor) for status semantics —
those are overridden by unrelated compound-selector rules elsewhere
(e.g. nav.css's ".co-action-icon.commentColor" turning green into gold),
which makes them unreliable outside the specific context each was
originally written for. These are theme-agnostic on purpose, so they
render the same regardless of what other classes sit alongside them.
***************************************************** */
.success-status {
	color: #2fb344 !important;
}

.in-progress-status {
	color: #deb85f !important;
}

.error-status {
	color: #d63939 !important;
}

/* *****************************************************
SEARCH FONTS
***************************************************** */
.searchLabel3, .searchInput3 {
	font-size: 11px;
}

.dateSearch3 {
	font-size: 11px;
	text-align: center;
}

.searchFont5, .labelSearch5 {
	font-size: 11px;
	text-align: center;
}

.searchLabel7 {
	font-size: 9px;
	text-align: center;
}

.labelSearch7 {
	font-size: 11px;
}

.wasteInput {
	width: 50px;
	height: 30px;
	padding: 6px 5px !important;
	/* font-size: 14px; */
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow
		ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out
		.15s;
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
}

.batchCode100px {
	width: 100%;
	width: 100px;
	text-align: center;
	display: inline !important;
}

/* *****************************************************
DUE AMOUNT
***************************************************** */
.dueAmt {
	font-size: 11px;
	font-weight: bold;
}

.row-highlight {
    border: 2px solid #ffe066 !important; /* Light yellow border */
    box-shadow: 0 2px 8px 0 rgba(255, 224, 102, 0.25); /* Soft yellow shadow */
    transition: box-shadow 0.2s, border 0.2s;
}

/* *****************************************************
ERROR PAGE
***************************************************** */

.error-box {
    background-color: #fff3f3;
    border-left: 5px solid #e74c3c;
    padding: 30px;
    margin-top: 60px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.error-title {
    font-size: 26px;
    font-weight: bold;
    color: #e74c3c;
}
.error-details {
    font-size: 16px;
    color: #555;
    margin-top: 15px;
}
.go-back {
    margin-top: 20px;
}

.input-error {
    border: 1px solid red !important;
    background-color: #ffe6e6;
}

.restored-field {
    background-color: #fff8c4 !important;
    transition: background-color 1s ease;
}

.autosaved-flash {
        outline: 2px solid #56CCF2;
        transition: outline 1s ease-out;
}

/* Toggle container */
.toggle-onoff label {
    display: block;
    width: 70px;
    height: 34px;
    background-color: #ccc;
    border-radius: 34px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s;
}

/* Slider circle */
.toggle-onoff label:before {
    content: "OFF";
    position: absolute;
    width: 34px;
    height: 34px;
    left: 0;
    top: 0;
    background-color: white;
    border-radius: 50%;
    line-height: 34px;
    text-align: center;
    font-weight: bold;
    color: #555;
    transition: transform 0.3s, content 0.3s;
}

/* Checked state */
.toggle-onoff input:checked + label {
    background-color: #5cb85c;
    
}

.toggle-onoff input:checked + label:before {
    transform: translateX(36px);
    content: "ON";
    color: #555;
}

/* 
-----------------------------------------------------------------------------------------------
Notification Dropdown Styling
-----------------------------------------------------------------------------------------------

Notification item hover */
.notification-item {
  /*border-bottom: 1px solid #eee;
  padding: 8px 10px;*/
  transition: background 0.2s ease;
}
/*.notification-item:hover {
  background: #f7f7f7;
}*/

/* Add subtle left accent for unread */
.notification-item.unread {
  border-left: 3px solid #337ab7; /* Bootstrap primary color */
  background: #f9f9ff;
}

/* Timestamp styling */
.notification-time {
  flex-shrink: 0;
  font-size: 11px;
  text-align: right;
  /*color: #999;*/
  display: flex;
  align-items: center;
  gap: 3px;
}
.notification-time .glyphicon {
  font-size: 10px;
  /*color: #bbb;*/
}

/* Overall calendar box */
.daterangepicker {
    font-size: 13px;     /* slightly bigger text */
    padding: 4px !important;  /* more breathing room */
    transform: scale(0.85);   
    transform-origin: top left;
}

/* Day cells */
.daterangepicker td,
.daterangepicker th {
    width: 28px !important;   /* slightly larger cell */
    height: 28px !important;
    line-height: 28px !important;
    font-size: 13px !important;  /* bump font */
    padding: 2px !important;     /* add little spacing */
}

/* Month header */
.daterangepicker .calendar-table th.month {
    font-size: 14px !important;  /* clearer month text */
    padding: 4px 0 !important;
}

/* Button bar */
.daterangepicker .drp-buttons {
    padding: 4px 6px !important;  /* extra spacing */
}

.daterangepicker .drp-buttons .btn {
    font-size: 12px !important;
    padding: 4px 8px !important;  /* slightly larger buttons */
}

.tlDateRangePicker {
	height: 40px;
	width: 100% !important;
	text-align: center;
}

.msg {
	font-size: 13px;
}

.gantt {
  position: relative;
  overflow-x: auto;
  border: 1px solid #ccc;
  background: #fff;
  font-family: var(--app-font);
  width: 100%;
}

.gantt__header {
  display: flex;
  border-bottom: 1px solid #ddd;
  background: #f9f9f9;
  position: sticky;
  top: 0;
  z-index: 10;
}

.gantt__header-day {
  flex: 0 0 40px;
  height: 32px;
  text-align: center;
  font-size: 11px;
  line-height: 14px;
  border-right: 1px solid #eee;
  padding-top: 2px;
  white-space: pre-line;
}

.gantt__row-bars {
  position: relative;
  height: 42px;
  border-bottom: 1px solid #f0f0f0;
  overflow: hidden;
}

.gantt__row-bar {
  position: absolute;
  height: 26px;
  top: 8px;
  line-height: 26px;
  color: #fff;
  font-size: 11px;
  text-align: center;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 2;
}

.weekend1 {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  background: #f5f5f5;
  z-index: 1;
  pointer-events: none;
}

.gantt__header-day {
  flex: 0 0 auto;       /* auto width based on content */
  min-width: 60px;      /* minimum width to fit date + day */
  height: 50px;         /* taller to fit two lines */
  text-align: center;
  font-size: 12px;
  border-right: 1px solid #444;
  padding: 4px 2px;
  color: #ccc;          /* dark-theme text */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
}

/* Space between date and day */
.gantt__header-day .date {
  font-weight: bold;
  margin-bottom: 2px;  /* space between date and day */
  line-height: 1.2;
}

.gantt__header-day .day {
  font-size: 11px;
  line-height: 1.2;
  color: #aaa;          /* lighter for day text */
}

.gantt__row-bars {
  position: relative;
  height: 42px;
  border-bottom: 1px solid #333;
  overflow: hidden;
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive::-webkit-scrollbar {
  height: 6px;
}
.table-responsive::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

/* Tablet view (≤ 992px) */
@media (max-width: 992px) {
  .searchbox .btn {
    padding-top: 5px !important;
  }
}

/* Mobile view (≤ 576px) */
@media (max-width: 576px) {
  .searchbox .btn {
    padding-top: 5px !important;
  }
}

/* To resolve column collapse issue*/
.table.table-hover.table-striped th {
    white-space: nowrap;     /* prevents wrapping */
}

/*Pruchase Order Hide and Show*/ 
/* Default → show .comments, hide tc */

#purchaseOrderTable td.showHideClassForComment,
#purchaseOrderTable th.showHideClassForComment {
    display: table-cell !important;
}
#purchaseOrderTable td.tc,
#purchaseOrderTable th.tc {
    display: none !important;
}

 /*When tc mode is ON */
#purchaseOrderTable.show-comments td.tc,
#purchaseOrderTable.show-comments th.tc {
    display: table-cell !important;
}

#purchaseOrderTable.show-comments td.showHideClassForComment,
#purchaseOrderTable.show-comments th.showHideClassForComment {
    display: none !important;
}

.input-with-icon {
    display: inline-flex;
    align-items: center;
}

.input-with-icon span {
    margin-left: 6px;
}

/* Sidebar */
/* ================================================================
   RIGHT SLIDE SIDEBAR — Notifications & Messages
   ================================================================ */

/* Panel */
.right-sidebar {
  position: fixed;
  top: 3.5rem;
  right: -350px;
  width: 350px;
  max-width: calc(100vw - 20px);
  height: calc(100% - 3.5rem);
  overflow-y: auto;
  background: #ffffff;
  color: #222;
  z-index: 1050;
  transition: right 0.3s ease-in-out;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.18);
}

.right-sidebar.open { right: 0; }

[data-bs-theme="dark"] .right-sidebar {
  background: #1f1f1f;
  color: #e0e0e0;
}

/* Lock scroll when open */
body.sidebar-open { overflow: hidden; }

/* ── Header ── */
.sidebar-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: inherit;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
  transition: box-shadow 0.2s ease;
}

#sidebarTitle {
  font-size: 0.9rem !important;   /* override .font16 */
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  color: inherit;
}

.sidebar-header.scrolled { box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12); }

[data-bs-theme="dark"] .sidebar-header {
  border-bottom-color: rgba(255, 255, 255, 0.10);
}

[data-bs-theme="dark"] .sidebar-header.scrolled {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.55);
}

/* ── Close button ── */
.close-btn {
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 4px;
  color: #888;
  transition: background 0.15s, color 0.15s;
}

.close-btn:hover { background: rgba(0, 0, 0, 0.07); color: #333; }

[data-bs-theme="dark"] .close-btn { color: #aaa; }
[data-bs-theme="dark"] .close-btn:hover { background: rgba(255,255,255,0.09); color: #eee; }

/* ── Content list ── */
.sidebar-content {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-content > li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

[data-bs-theme="dark"] .sidebar-content > li {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* ── Shared text elements ── */
.sidebar-content .notification-title {
  font-size: 0.83rem;
  font-weight: 500;
  line-height: 1.45;
  word-break: break-word;
  margin-bottom: 3px;
  color: inherit;
}

.sidebar-content .notification-body {
  font-size: 0.78rem;
  line-height: 1.4;
  word-break: break-word;
  opacity: 0.72;
  margin-bottom: 4px;
}

.sidebar-content .notification-time {
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  opacity: 0.55;
}

/* Unread = semi-bold; read = muted */
.sidebar-content .font-weight-bold .notification-title { font-weight: 600; }
.sidebar-content .text-muted .notification-title       { opacity: 0.55; font-weight: 400; }

/* Dark mode — improve contrast for all notification text */
[data-bs-theme="dark"] .sidebar-content .notification-title {
  color: #e0e0e0 !important;
}
[data-bs-theme="dark"] .sidebar-content .notification-body {
  color: #c0c0c0 !important;
  opacity: 1;
}
[data-bs-theme="dark"] .sidebar-content .notification-time {
  color: #999 !important;
  opacity: 1;
}
[data-bs-theme="dark"] .sidebar-content .font-weight-bold .notification-title {
  color: #f0f0f0 !important;
  font-weight: 600;
}
[data-bs-theme="dark"] .sidebar-content .text-muted .notification-title {
  color: #aaa !important;
  opacity: 1;
  font-weight: 400;
}

/* ── Notification items  (<a class="dropdown-item notification-item">) ──
   Two-column layout: fixed icon column (module identity, hover for name)
   separated by a light divider from the message column. */
.sidebar-content .notification-item {
  display: flex !important;
  align-items: stretch !important;
  white-space: normal !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: inherit !important;
  text-decoration: none !important;
  background: transparent !important;
}

.sidebar-content .notification-icon-col {
  flex: 0 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px 0;
  font-size: 17px;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}

[data-bs-theme="dark"] .sidebar-content .notification-icon-col {
  border-right-color: rgba(255, 255, 255, 0.08);
}

.sidebar-content .notification-item .notification-content {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 16px 11px 12px;
}

.sidebar-content .notification-item:hover,
.sidebar-content > li:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}

[data-bs-theme="dark"] .sidebar-content .notification-item:hover,
[data-bs-theme="dark"] .sidebar-content > li:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* ── Message items  (<a class="notification-subject">) ── */
.sidebar-content .notification-subject {
  display: block !important;
  white-space: normal !important;
  padding: 11px 16px !important;
  text-decoration: none !important;
  border-radius: 0 !important;
  color: inherit !important;
  background: transparent !important;
}

.sidebar-content .notification-subject:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  text-decoration: none !important;
}

[data-bs-theme="dark"] .sidebar-content .notification-subject:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* ── Prevent any border-radius on sidebar links/items ── */
.sidebar-content a,
.sidebar-content li {
  border-radius: 0 !important;
}

/* ── Footer links (Load More / View All Messages) ── */
.sidebar-footer-link {
  display: block;
  text-align: center;
  padding: 10px 16px;
  font-size: 0.78rem;
  font-weight: 500;
  text-decoration: none !important;
  white-space: normal !important;
  color: #666 !important;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  background: transparent !important;
  border-radius: 0 !important;
}
.sidebar-footer-link:hover {
  color: #444 !important;
  background: rgba(0, 0, 0, 0.03) !important;
  text-decoration: none !important;
}
[data-bs-theme="dark"] .sidebar-footer-link {
  border-top-color: rgba(255, 255, 255, 0.08);
  color: #999 !important;
}
[data-bs-theme="dark"] .sidebar-footer-link:hover {
  color: #bbb !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

/* ── Overlay ── */
#sidebarOverlay {
  position: fixed;
  top: 3.5rem;
  left: 0;
  width: 100%;
  height: calc(100% - 3.5rem);
  background: rgba(0, 0, 0, 0.45);
  display: none;
  z-index: 1040;
  cursor: pointer;
}

[data-bs-theme="dark"] #sidebarOverlay { background: rgba(0, 0, 0, 0.70); }

#sidebarOverlay.show { display: block; }

.d-flex {
    display: flex !important;
}

.align-items-center {
    align-items: center !important;
}

.drawdown-content, .parent-drawdown-content {
    display: none;
}


.button-row {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* start of row */
    gap: 20px; /* space between buttons */
}

.dd-ulDrop {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    background: #ccc;
    left: 0;
    top: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
	transform-origin: top;
    transition: 0.5s;
    transform: translateY(10px);
    z-index: 9999;
}

.dd-ulDrop.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.dd-ulDrop li {
    list-style: none;
}

.dd-ulDrop li a {
    display: block;
    padding: 10px;
    text-align: left;
    text-decoration: none;
    background: white;
    color: #333;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    transition: background 0.2s ease;
}

.dd-ulDrop li a:hover {
    background: #444444 !important;
}

.child-order {
    display: none;
}

.order-table {
    width: 100%;
}

/* Fixed column widths are specific to the coLanding expandable table
   (the only table with parent/child .parent-order rows). Scoping them here
   stops the widths leaking onto other .order-table pages whose column
   layouts differ — which previously forced narrow columns (e.g. a plain
   "NO" column) to 180px and overflowed the table. */
.order-table:has(.parent-order) {
    table-layout: fixed;
}

.order-table:has(.parent-order) th:nth-child(1),
.order-table:has(.parent-order) td:nth-child(1) { width: 180px; }

.order-table:has(.parent-order) th:nth-child(2),
.order-table:has(.parent-order) td:nth-child(2) { width: 260px; }

.order-table:has(.parent-order) th:nth-child(7),
.order-table:has(.parent-order) td:nth-child(7) { width: 120px; }

/* DISPATCH (col 6, always rendered) and ACTIONS (col 8, only on the CO tab —
   on other tabs col 8 is NOTES, which is d-none on mobile so an unused width
   here is harmless) had no explicit width at all. With table-layout:fixed,
   an unwidthed column gets nothing once the widthed ones above already
   exceed the container, so both collapsed to 0 and rendered on top of each
   other instead of being visible. */
.order-table:has(.parent-order) th:nth-child(6),
.order-table:has(.parent-order) td:nth-child(6) { width: 90px; }

.order-table:has(.parent-order) th:nth-child(8),
.order-table:has(.parent-order) td:nth-child(8) { width: 150px; }

/* Customer Invoices search bar: keep the warehouse validation hint out of
   the flex flow so its label stays aligned with the other search labels */
.co-search-panel .searchboxValidation,
.co-search-panel .searchboxValidation1 { position: relative; }

/* Gap between search fields and button — works for both row and d-flex layouts */
.co-search-panel .searchbox {
    --bs-gutter-x: 1.5rem;
    gap: 1.5rem !important;
}
.co-search-panel .searchboxValidation > .form-text,
.co-search-panel .searchboxValidation1 > .form-text {
    display: none;
}
.co-search-panel .searchboxValidation.has-error > .form-text,
.co-search-panel .searchboxValidation1.has-error > .form-text {
    display: block;
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 2px;
    white-space: nowrap;
}

/* Plain landing tables (everything except the coLanding expandable table)
   have no hidden child rows, so their rows alternate odd/even. Bootstrap 5.3
   paints the stripe with an inset box-shadow (not background-color), which
   shows as a blue band. We clear both the box-shadow and the row background so
   every row shows the uniform container background behind it (theme-safe: no
   light/dark colour is hard-coded). :not(:hover) keeps the row hover highlight
   working. coLanding (:has(.parent-order)) keeps its striping intentionally. */
.order-table:not(:has(.parent-order)).table-striped > tbody > tr:not(:hover) > td,
.order-table:not(:has(.parent-order)).table-striped > tbody > tr:not(:hover) > th {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Free-text note/comment columns in non-fixed landing tables would otherwise
   inherit the table's text-nowrap and overflow their narrow cell off-screen.
   Allow them to wrap so they stay inside the table width. */
.order-table:not(:has(.parent-order)) td.comHiPendPoMain,
.order-table:not(:has(.parent-order)) td.hide550,
.order-table:not(:has(.parent-order)) td.hide500,
.order-table:not(:has(.parent-order)) td.hide700,
.order-table:not(:has(.parent-order)) td.co-note-cell {
    white-space: normal;
}

/* Manual Journal Config — column widths (was inline style="width:...") */
#journalConfigTable .col-scenario { width: 32%; }
#journalConfigTable .col-debit    { width: 34%; }
#journalConfigTable .col-credit   { width: 34%; }

/* First/last column touched the card edge since the card-body strips all
   padding (p-0) so the table can run edge-to-edge. Applies to the header
   cell and every body row's cell in that column, not just the header.
   Paired with #page-wrapper: nav.css has
   "#page-wrapper .card .card-body.p-0 .table > thead/tbody > tr > th/td:first-child"
   at 0.25rem !important, whose 5 classes + 3 types still loses to 1 ID vs 1 ID
   here — pairing two IDs together outranks their single ID regardless. */
#page-wrapper #journalConfigTable th:first-child,
#page-wrapper #journalConfigTable td:first-child {
    padding-left: 1.25rem !important;
}
#page-wrapper #journalConfigTable th:last-child,
#page-wrapper #journalConfigTable td:last-child {
    padding-right: 1.25rem !important;
}

/* Journal Scenarios card-header title — same cards.css conflict as above,
   applied directly to the header (the title isn't part of the table). */
#journalScenariosHeader {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
}

/* Notification Settings — same page pattern replicated (see feedback memory
   "settings + config table page design"). Column widths (was inline
   style="width:...") and the same nav.css first-column padding trap. */
#notificationSettingsTable .col-notification { width: 60%; }
#notificationSettingsTable .col-type          { width: 40%; }

#page-wrapper #notificationSettingsTable th:first-child,
#page-wrapper #notificationSettingsTable td:first-child {
    padding-left: 1.25rem !important;
}
#page-wrapper #notificationSettingsTable th:last-child,
#page-wrapper #notificationSettingsTable td:last-child {
    padding-right: 1.25rem !important;
}

#notificationSettingsHeader {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
}

/* Reusable heading style for a card-header title that needs to read as a
   heading, not body text — card-header <h5> renders smaller than the table's
   own row text under Tabler's defaults. */
.card-heading {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

/* ============================================================
   PURCHASE ORDER "Product Lines" entry table (#purchaseOrderTable)
   Its cells carry Bootstrap grid col-lg-* classes, which inject a
   ~0.75rem gutter on BOTH sides of every cell. Across ~11 columns
   that, plus the default .form-control padding (and inputs that
   refuse to shrink), pushes the table wider than its card so the
   right-hand columns (SELL PRICE onward) get clipped/scrolled off.

   Neutralise the grid gutter, tighten cell + input padding, and
   let the inputs shrink (min-width:0) so every column fits inside
   the card. Scoped to this table only. The .table-responsive
   wrapper still provides horizontal scroll as a safety net.
   ============================================================ */
#purchaseOrderTable {
    width: 100%;
}
#purchaseOrderTable > thead > tr > th,
#purchaseOrderTable > tbody > tr > td {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
    vertical-align: middle;
}
#purchaseOrderTable .form-control,
#purchaseOrderTable .form-select {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    min-width: 0;
    width: 100%;
}

/* ============================================================
   ORDER / ADD CHARGES / BACKORDERS TABLE — fixed layout so th
   widths are strictly respected. !important needed because
   .tablePadding rules already use !important and would win.
   ============================================================ */
#prepackedOrderForm #orderTable,
#prepackedOrderForm #addChargesServicesTable,
#checkoutOrderSubmit #orderTable,
#purchaseOrderForm #orderTable,
#purchaseOrderForm #addChargesServicesTable,
#editPurchaseOrderInline #orderTable,
#editPurchaseOrderInline #addChargesServicesTable,
#editCustOrderInline #orderTable,
#editCustOrderInline #addChargesServicesTable,
#createLeadForm #orderTable,
#createLeadForm #addChargesServicesTable,
#leadForm #orderTable,
#leadForm #addChargesServicesTable,
#purchaseOrderTable,
#addChargesServicesPOTable {
    table-layout: fixed !important;
    width: 100% !important;
    max-width: 100% !important;
}
/* #backOrderTable never contains <input>/<select> cells (it's a plain
   read-only list), unlike the other tables in the rule above whose fixed
   layout exists to stop input-driven columns reflowing. Fixed layout with no
   column-width hints just forced its 5 columns to equal widths regardless of
   content, so "Sales Description" sat far from short values like "1.00" —
   auto layout lets each column size to its own content instead. */
#backOrderTable {
    width: 100% !important;
    max-width: 100% !important;
}
#prepackedOrderForm #orderTable.columns-expanded,
#prepackedOrderForm #addChargesServicesTable.columns-expanded {
    width: 1400px !important;
    max-width: none !important;
}
/* Add padding before sequence numbers in order tables */
#prepackedOrderForm #orderTable > tbody > tr > td:first-child,
#prepackedOrderForm #addChargesServicesTable > tbody > tr > td:first-child,
#checkoutOrderSubmit #orderTable > tbody > tr > td:first-child,
#purchaseOrderForm #orderTable > tbody > tr > td:first-child,
#purchaseOrderForm #addChargesServicesTable > tbody > tr > td:first-child,
#editPurchaseOrderInline #orderTable > tbody > tr > td:first-child,
#editPurchaseOrderInline #addChargesServicesTable > tbody > tr > td:first-child,
#editCustOrderInline #orderTable > tbody > tr > td:first-child,
#editCustOrderInline #addChargesServicesTable > tbody > tr > td:first-child,
#createLeadForm #orderTable > tbody > tr > td:first-child,
#createLeadForm #addChargesServicesTable > tbody > tr > td:first-child,
#leadForm #orderTable > tbody > tr > td:first-child,
#leadForm #addChargesServicesTable > tbody > tr > td:first-child {
    padding-left: 0.75rem !important;
}
#checkoutOrderSubmit #orderTable > thead > tr > th:first-child,
#checkoutOrderSubmit #orderTable > tbody > tr > td:first-child {
    padding-left: 1.25rem !important;
}

/* #showAddWholesaler sits outside any .card, so it never picks up the
   card-scoped ".form-label" transparent-background fix above (nav.css) —
   the giant dark-theme selector list (theme.css) still wins on its bare
   <label> elements, painting a #333 box behind every label. */
[data-bs-theme="dark"] #showAddWholesaler .form-label {
    background-color: transparent !important;
    box-shadow: none !important;
    color: #cdd3df;
}

/* "Pack Product N" / "Build Product N" headers (addPackRecipe.js, addBuildRecipe.js)
   are rendered as bare <h4> tags, which the giant dark-theme selector list above
   (theme.css) matches, painting a #333 box behind the text. */
[data-bs-theme="dark"] #addLayerDiv h4 {
    background-color: transparent !important;
    box-shadow: none !important;
}
#prepackedOrderForm #orderTable > thead > tr > th,
#prepackedOrderForm #orderTable > tbody > tr > td,
#prepackedOrderForm #orderTable > tfoot > tr > td,
#prepackedOrderForm #addChargesServicesTable > thead > tr > th,
#prepackedOrderForm #addChargesServicesTable > tbody > tr > td,
#prepackedOrderForm #addChargesServicesTable > tfoot > tr > td,
#checkoutOrderSubmit #orderTable > thead > tr > th,
#checkoutOrderSubmit #orderTable > tbody > tr > td,
#checkoutOrderSubmit #orderTable > tfoot > tr > td,
#purchaseOrderForm #orderTable > thead > tr > th,
#purchaseOrderForm #orderTable > tbody > tr > td,
#purchaseOrderForm #orderTable > tfoot > tr > td,
#purchaseOrderForm #addChargesServicesTable > thead > tr > th,
#purchaseOrderForm #addChargesServicesTable > tbody > tr > td,
#purchaseOrderForm #addChargesServicesTable > tfoot > tr > td,
#editPurchaseOrderInline #orderTable > thead > tr > th,
#editPurchaseOrderInline #orderTable > tbody > tr > td,
#editPurchaseOrderInline #orderTable > tfoot > tr > td,
#editPurchaseOrderInline #addChargesServicesTable > thead > tr > th,
#editPurchaseOrderInline #addChargesServicesTable > tbody > tr > td,
#editPurchaseOrderInline #addChargesServicesTable > tfoot > tr > td,
#editCustOrderInline #orderTable > thead > tr > th,
#editCustOrderInline #orderTable > tbody > tr > td,
#editCustOrderInline #orderTable > tfoot > tr > td,
#editCustOrderInline #addChargesServicesTable > thead > tr > th,
#editCustOrderInline #addChargesServicesTable > tbody > tr > td,
#editCustOrderInline #addChargesServicesTable > tfoot > tr > td,
#createLeadForm #orderTable > thead > tr > th,
#createLeadForm #orderTable > tbody > tr > td,
#createLeadForm #orderTable > tfoot > tr > td,
#createLeadForm #addChargesServicesTable > thead > tr > th,
#createLeadForm #addChargesServicesTable > tbody > tr > td,
#createLeadForm #addChargesServicesTable > tfoot > tr > td,
#leadForm #orderTable > thead > tr > th,
#leadForm #orderTable > tbody > tr > td,
#leadForm #orderTable > tfoot > tr > td,
#leadForm #addChargesServicesTable > thead > tr > th,
#leadForm #addChargesServicesTable > tbody > tr > td,
#leadForm #addChargesServicesTable > tfoot > tr > td,
#backOrderTable > thead > tr > th,
#backOrderTable > tbody > tr > td,
#purchaseOrderTable > thead > tr > th,
#purchaseOrderTable > tbody > tr > td,
#purchaseOrderTable > tfoot > tr > td,
#addChargesServicesPOTable > thead > tr > th,
#addChargesServicesPOTable > tbody > tr > td,
#addChargesServicesPOTable > tfoot > tr > td {
    padding: 0.5rem 0.2rem !important;
    vertical-align: middle;
    overflow: hidden;
}
#prepackedOrderForm #orderTable > thead > tr > th,
#prepackedOrderForm #addChargesServicesTable > thead > tr > th,
#checkoutOrderSubmit #orderTable > thead > tr > th,
#purchaseOrderForm #orderTable > thead > tr > th,
#purchaseOrderForm #addChargesServicesTable > thead > tr > th,
#editPurchaseOrderInline #orderTable > thead > tr > th,
#editPurchaseOrderInline #addChargesServicesTable > thead > tr > th,
#editCustOrderInline #orderTable > thead > tr > th,
#editCustOrderInline #addChargesServicesTable > thead > tr > th,
#createLeadForm #orderTable > thead > tr > th,
#createLeadForm #addChargesServicesTable > thead > tr > th,
#leadForm #orderTable > thead > tr > th,
#leadForm #addChargesServicesTable > thead > tr > th,
#backOrderTable > thead > tr > th,
#purchaseOrderTable > thead > tr > th,
#addChargesServicesPOTable > thead > tr > th {
    white-space: nowrap !important;
    letter-spacing: 0 !important;
    padding: 0.55rem 0.3rem !important;
    line-height: 1.25 !important;
    font-size: 0.8125rem !important;   /* 13px — same as the row inputs */
}
#prepackedOrderForm #orderTable .form-control,
#prepackedOrderForm #orderTable .form-select,
#prepackedOrderForm #addChargesServicesTable .form-control,
#prepackedOrderForm #addChargesServicesTable .form-select,
#checkoutOrderSubmit #orderTable .form-control,
#checkoutOrderSubmit #orderTable .form-select,
#purchaseOrderForm #orderTable .form-control,
#purchaseOrderForm #orderTable .form-select,
#purchaseOrderForm #addChargesServicesTable .form-control,
#purchaseOrderForm #addChargesServicesTable .form-select,
#editPurchaseOrderInline #orderTable .form-control,
#editPurchaseOrderInline #orderTable .form-select,
#editPurchaseOrderInline #addChargesServicesTable .form-control,
#editPurchaseOrderInline #addChargesServicesTable .form-select,
#editCustOrderInline #orderTable .form-control,
#editCustOrderInline #orderTable .form-select,
#editCustOrderInline #addChargesServicesTable .form-control,
#editCustOrderInline #addChargesServicesTable .form-select,
#createLeadForm #orderTable .form-control,
#createLeadForm #orderTable .form-select,
#createLeadForm #addChargesServicesTable .form-control,
#createLeadForm #addChargesServicesTable .form-select,
#leadForm #orderTable .form-control,
#leadForm #orderTable .form-select,
#leadForm #addChargesServicesTable .form-control,
#leadForm #addChargesServicesTable .form-select,
#backOrderTable .form-control,
#backOrderTable .form-select,
#purchaseOrderTable .form-control,
#purchaseOrderTable .form-select,
#addChargesServicesPOTable .form-control,
#addChargesServicesPOTable .form-select {
    padding-left: 0.3rem !important;
    padding-right: 0.3rem !important;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Logistics picking slip table — tighter form-control padding and column widths */
#pickSlipTable {
    table-layout: auto !important;
}

#pickSlipTable > thead > tr > th {
    padding: 0.5rem 0.25rem !important;
    line-height: 1.4 !important;
}

#pickSlipTable > tbody > tr > td {
    padding: 0.25rem !important;
}

#pickSlipTable .form-control {
    padding-left: 0.2rem !important;
    padding-right: 0.2rem !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Add left padding for text columns in pickSlipTable */
#pickSlipTable .supplierBatch,
#pickSlipTable .warehouseComment .form-control,
#pickSlipTable .commentColor {
    padding-left: 0.4rem !important;
}

/* Reduce column widths to minimize gaps */
#pickSlipTable > thead > tr > th:nth-child(3),
#pickSlipTable > tbody > tr > td:nth-child(3) {
    width: 50px !important;
}

#pickSlipTable > thead > tr > th:nth-child(5),
#pickSlipTable > tbody > tr > td:nth-child(5) {
    width: 55px !important;
}

#pickSlipTable > thead > tr > th:nth-child(6),
#pickSlipTable > tbody > tr > td:nth-child(6) {
    width: 55px !important;
}

#pickSlipTable > thead > tr > th:nth-child(7),
#pickSlipTable > tbody > tr > td:nth-child(7) {
    width: 75px !important;
}

#pickSlipTable > thead > tr > th:nth-child(10),
#pickSlipTable > tbody > tr > td:nth-child(10) {
    width: 90px !important;
}

#pickSlipTable > thead > tr > th:nth-child(11),
#pickSlipTable > tbody > tr > td:nth-child(11) {
    width: 90px !important;
}

/* Production Log table — tighter form-control padding */
#proLogTable {
    table-layout: auto !important;
}

#proLogTable > thead > tr > th {
    padding: 0.5rem 0.25rem !important;
    line-height: 1.4 !important;
}

#proLogTable > tbody > tr > td {
    padding: 0.25rem !important;
}

#proLogTable .form-control {
    padding-left: 0.2rem !important;
    padding-right: 0.3rem !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Add left padding for text columns in proLogTable */
#proLogTable .productName .form-control,
#proLogTable input[placeholder="Batch Code"],
#proLogTable .binPickSalesComment .form-control {
    padding-left: 0.4rem !important;
}

.discountPurTextBox {
    height: 40px !important;
    line-height: 40px !important;
    display: block !important;
}

/* long descriptions truncate with … until the field is focused */
#prepackedOrderForm #orderTable .valSalesDesc:not(:focus),
#prepackedOrderForm #addChargesServicesTable .valSalesDesc:not(:focus) {
    text-overflow: ellipsis;
}

/* Pricing-view cells (COST/MARGIN/ORDERED/STOCK/GST/SALES ACCOUNT) are
   read-only info — render as plain muted text, not boxed inputs. Double-ID
   selector out-ranks nav.css "#page-wrapper .card .form-control" theming. */
#page-wrapper #orderTable td.pricing .form-control,
#page-wrapper #addChargesServicesTable td.pricing .form-control {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    opacity: 0.75;
}

/* ============================================================
   MODULE ACCENT SYSTEM (co-module-*)
   The shared co-* landing controls (search button, active tab,
   active pagination, go-to/focus) default to the Sales gold that
   is hardcoded in nav.css. Adding a `co-module-X` class to a
   landing container re-points those controls to that module's
   accent via the --co-accent custom properties below.

   Usage: put `co-module-X` on .co-search-panel, .nav-tabs and
   .co-pagination-toolbar (or any common ancestor). Sales pages
   need no class — gold is the default.
   ============================================================ */
.co-module-sales   { --co-accent:#deb85f; --co-accent-hover:#c9982f; --co-accent-contrast:#ffffff; }
.co-module-pur     { --co-accent:#41b6e6; --co-accent-hover:#2f9bcb; --co-accent-contrast:#ffffff; }
.co-module-pro     { --co-accent:#dd9cdf; --co-accent-hover:#c97fcb; --co-accent-contrast:#ffffff; }
.co-module-inv     { --co-accent:#ffb639; --co-accent-hover:#e69d1f; --co-accent-contrast:#ffffff; }
.co-module-crm     { --co-accent:#EADA24; --co-accent-hover:#c9ba0f; --co-accent-contrast:#ffffff; }
.co-module-acc     { --co-accent:#00a494; --co-accent-hover:#00c2ad; --co-accent-contrast:#ffffff; }
.co-module-hr      { --co-accent:#E56DB1; --co-accent-hover:#ed8cc4; --co-accent-contrast:#ffffff; }
.co-module-qa      { --co-accent:#ADDD2A; --co-accent-hover:#91c00f; --co-accent-contrast:#ffffff; }
.co-module-logs    { --co-accent:#e9937c; --co-accent-hover:#d67659; --co-accent-contrast:#ffffff; }
.co-module-online  { --co-accent:#7121D8; --co-accent-hover:#8f42e8; --co-accent-contrast:#ffffff; }
.co-module-pos     { --co-accent:#BC3F2E; --co-accent-hover:#d65a48; --co-accent-contrast:#ffffff; }
.co-module-support { --co-accent:#87189d; --co-accent-hover:#a52bbd; --co-accent-contrast:#ffffff; }
.co-module-design  { --co-accent:#776e6e; --co-accent-hover:#918888; --co-accent-contrast:#ffffff; }

/* Search button */
[class*="co-module-"] .co-search-btn,
html[data-bs-theme="dark"] [class*="co-module-"] .co-search-btn {
    background-color: var(--co-accent) !important;
    border-color: var(--co-accent) !important;
    color: var(--co-accent-contrast) !important;
}
[class*="co-module-"] .co-search-btn:hover,
html[data-bs-theme="dark"] [class*="co-module-"] .co-search-btn:hover {
    background-color: var(--co-accent-hover) !important;
    border-color: var(--co-accent-hover) !important;
    color: var(--co-accent-contrast) !important;
}

/* When the search panel fields stack (below lg), let the Search button
   fill its row so it doesn't sit tiny beside a full-width field. */
@media (max-width: 991.98px) {
    .co-search-panel .co-search-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Primary "solid" action buttons (Submit, Save, Update, etc.) — recolour from
   the generic gray gradient to the page's own module accent AND match the
   flat "pill" look of .co-search-btn (same module-accent colour elsewhere on
   the same page), instead of buttonClimbSolid's own lighter-weight, more
   rounded default shape. Scoped to .buttonClimbSolid only; outline
   .buttonClimb (Close/Cancel/secondary actions) stays neutral gray on
   purpose. */
[class*="co-module-"] .buttonClimbSolid {
    background-image: none !important;
    background-color: var(--co-accent) !important;
    border-color: var(--co-accent) !important;
    color: var(--co-accent-contrast) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
[class*="co-module-"] .buttonClimbSolid:hover {
    background-color: var(--co-accent-hover) !important;
    border-color: var(--co-accent-hover) !important;
    color: var(--co-accent-contrast) !important;
    box-shadow: none !important;
}

/* Go-to button hover + control focus */
[class*="co-module-"] .co-goto-btn:hover {
    border-color: var(--co-accent) !important;
    color: var(--co-accent) !important;
}
[class*="co-module-"] .co-ctrl:focus {
    border-color: var(--co-accent) !important;
}

/* Active tab — module accent instead of Sales gold (class is on .nav-tabs) */
.nav-tabs[class*="co-module-"] > li.active > a,
.nav-tabs[class*="co-module-"] > li.tab.active > a,
.nav-tabs[class*="co-module-"] > .nav-item > .nav-link.active,
.nav-tabs[class*="co-module-"] > .nav-item.active > .nav-link,
.nav-tabs[class*="co-module-"] .nav-link.active,
html[data-bs-theme="dark"] .nav-tabs[class*="co-module-"] > li.active > a,
html[data-bs-theme="dark"] .nav-tabs[class*="co-module-"] > li.tab.active > a,
html[data-bs-theme="dark"] .nav-tabs[class*="co-module-"] > .nav-item > .nav-link.active,
html[data-bs-theme="dark"] .nav-tabs[class*="co-module-"] > .nav-item.active > .nav-link,
html[data-bs-theme="dark"] .nav-tabs[class*="co-module-"] .nav-link.active {
    color: var(--co-accent) !important;
    border-top: 2px solid var(--co-accent) !important;
}

/* ============================================================
   Quick Links tiles (climbHome) — responsive card grid, each
   tile picks up its module accent from a .co-module-* class.
   ============================================================ */
.co-quick-heading {
    margin-top: 1.5rem;
    margin-bottom: 0;
}
.co-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: 1.5rem;
}
@media (max-width: 991.98px) { .co-quick-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px)  { .co-quick-grid { grid-template-columns: 1fr; } }

.co-quick-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.85rem;
    padding: 1.75rem 1rem;
    border-radius: 14px;
    border: 1px solid rgba(128, 128, 128, 0.18);
    background: rgba(255, 255, 255, 0.02);
    text-decoration: none !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
html:not([data-bs-theme="dark"]) .co-quick-tile { background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); }

.co-quick-tile:hover {
    transform: translateY(-4px);
    border-color: var(--co-accent, #deb85f);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
    text-decoration: none !important;
}

.co-quick-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    font-size: 26px;
    color: var(--co-accent, #deb85f);
    background: color-mix(in srgb, var(--co-accent, #deb85f) 16%, transparent);
    transition: background 0.18s ease, color 0.18s ease;
}
.co-quick-tile:hover .co-quick-icon {
    color: var(--co-accent-contrast, #1a1a1a);
    background: var(--co-accent, #deb85f);
}

.co-quick-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--co-accent, #deb85f);
}

/* ============================================================
   Combobox dropdown panel — expand to fit option text, never clip.
   Bootstrap's w-100 class forces width:100%!important, so we need
   !important here to override it and allow max-content growth.
   ============================================================ */
.climb-combobox-menu {
    width: max-content !important;
    min-width: 100%;
    white-space: nowrap;
}

/* ============================================================
   Combobox match highlight — show matched letters as bold accent
   text only (no background box, which looked like an inserted gap).
   Placed here with !important so it beats any cached nav.css copy.
   ============================================================ */
.climb-combobox-menu .dropdown-item mark,
.climb-combobox-menu .dropdown-item .combo-hl {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    color: inherit !important;
    font-weight: 700 !important;
}
[data-bs-theme="dark"] .climb-combobox-menu .dropdown-item mark,
[data-bs-theme="dark"] .climb-combobox-menu .dropdown-item .combo-hl {
    color: #ffd24a !important;
}

/* ============================================================
   Contextual "Batch Actions" selection toolbar on landing pages.
   Hidden until a row checkbox is selected, then shows a single
   horizontal bar: "N selected" + action buttons + Clear Selection.
   ============================================================ */
.co-batch-wrap { margin: 0.25rem 0 0.75rem; }

.co-selection-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    width: 100%;
    padding: 0.55rem 1rem;
    border: 1px solid #e6e8ec;
    border-radius: 0.55rem;
    background-color: #f5f6f8;
}

.co-selection-count {
    font-family: var(--app-font);
    font-size: 0.875rem;
    font-weight: 600;
    color: #495057;
    white-space: nowrap;
    margin-right: 0.25rem;
}

.co-selection-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.co-selection-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid #ced4da;
    background-color: #ffffff;
    color: #1f2937;
    font-family: var(--app-font);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
    padding: 0.35rem 0.85rem;
    border-radius: 0.4rem;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.co-selection-btn-icon {
    font-size: 0.8125rem;
    line-height: 1;
    opacity: 0.85;
}
.co-selection-btn:hover { background-color: #eef0f3; border-color: #adb5bd; }
.co-selection-btn-danger { color: #d63939; border-color: #e6b3b3; }
.co-selection-btn-danger:hover { background-color: rgba(214, 57, 57, 0.08); border-color: #d63939; }

.co-selection-clear {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    border: 1px solid #ced4da;
    background-color: transparent;
    color: #495057;
    font-family: var(--app-font);
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.35rem 0.85rem;
    border-radius: 0.4rem;
    cursor: pointer;
}
.co-selection-clear:hover { background-color: #eef0f3; }

/* Dark mode */
[data-bs-theme="dark"] .co-selection-bar {
    background-color: #2b2b2b;
    border-color: #3a3a3a;
}
[data-bs-theme="dark"] .co-selection-count { color: #cdd3df; }
[data-bs-theme="dark"] .co-selection-btn {
    background-color: #1f1f1f;
    border-color: #424242;
    color: #e3e6ec;
}
[data-bs-theme="dark"] .co-selection-btn:hover { background-color: #333333; border-color: #5a5a5a; }
[data-bs-theme="dark"] .co-selection-btn-danger { color: #ff6b6b; border-color: #6b3a3a; }
[data-bs-theme="dark"] .co-selection-btn-danger:hover { background-color: rgba(255, 107, 107, 0.12); border-color: #ff6b6b; }
[data-bs-theme="dark"] .co-selection-clear { border-color: #424242; color: #cdd3df; }
[data-bs-theme="dark"] .co-selection-clear:hover { background-color: #333333; }

/* ============================================================
   Order totals summary panel (right-aligned compact card)
   ============================================================ */
.co-order-summary {
    width: 100%;
    max-width: 380px;
    margin-top: 0.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid #e6e8ec;
    border-radius: 0.65rem;
    background-color: #fafbfc;
}

.co-summary-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 0.35rem 0;
    font-family: var(--app-font);
}

.co-summary-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #6b7280;
    text-align: left;
}

.co-summary-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    text-align: right;
}

#discountIncludeSpan {
    font-size: 0.72rem;
    font-weight: 400;
    color: #9aa1ab;
}

.co-summary-divider {
    border-top: 1px solid #e6e8ec;
    margin: 0.5rem 0;
}

.co-summary-total .co-summary-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
}

.co-summary-total .co-summary-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--co-accent, #deb85f);
}

/* Shipping row keeps its select + amount inline on the right */
.co-summary-row-shipping {
    align-items: center;
}
.co-summary-shipping {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.co-summary-shipping-select { width: 130px; }
.co-summary-shipping-amt    { width: 90px; text-align: right; }

/* Dark mode */
[data-bs-theme="dark"] .co-order-summary {
    border: 1px solid #3a3a3a;
    background-color: #2b2b2b;
}
/* theme.css paints spans #333 in dark mode; keep summary text on the panel surface */
[data-bs-theme="dark"] .co-order-summary span {
    background-color: transparent !important;
}
[data-bs-theme="dark"] .co-summary-label { color: #cdd3df; }
[data-bs-theme="dark"] .co-summary-value { color: #e3e6ec; }
[data-bs-theme="dark"] .co-summary-divider { border-top-color: #3a3a3a; }
[data-bs-theme="dark"] .co-summary-total .co-summary-label { color: #cdd3df; }
[data-bs-theme="dark"] #discountIncludeSpan { color: #7a818c; }

.zero-remaining {
	background-color: #3b1f1f !important;   /* deep maroon */
	color: #f1a3a3 !important;
}

.zero-remaining-textbox {
    border: 2px solid #dc3545 !important; /* bootstrap danger red */
    box-shadow: 0 0 3px rgba(220, 53, 69, 0.6);
}

/* header alignment */
.th-sort{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:6px;
}

/* arrow container */
.sort-icons{
    display:flex;
    flex-direction:column;
    justify-content:center;
    line-height:9px;
}

/* arrows */
.sort-arrow{
    font-size:10px;
    color:#b5b5b5;
    cursor:pointer;
    user-select:none;
    height:10px;
}

/* hover */
.sort-arrow:hover{
    color:#0d6efd;
}

/* active arrow */
.sort-arrow.active{
    color:#000;
    font-weight:700;
    pointer-events:none;
    cursor:default;
}

.table-ellipsis {
    max-width: 200px;      /* adjust as per design */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Read-only info grid */
/* Generic info grid */
.info-grid {
    background: #f9f9f9;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
    margin-bottom: 10px;
}

.info-item {
    display: flex;
    flex-direction: column;
}

/* .info-grid is a rigid 2-column grid, but its items are a mix of always-shown
   and conditional (c:if) fields — so the total count varies (e.g. poPickingSlip's
   claimModal renders 2, 3, or 4 items depending on FEFO/showBarcode settings).
   When an odd number of items render, the last one is left alone in the final
   row with an empty, unbalanced-looking cell beside it. Span it across both
   columns instead — this only applies when it's genuinely the odd one out. */
.info-grid > .info-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.info-key {
    font-size: 11px;
    color: #999;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.info-val {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

[data-bs-theme="dark"] /* Dark theme */
 .info-grid {
    background: #2a2a2a;
    border-color: #444;
}
[data-bs-theme="dark"] .info-val {
    color: #f0f0f0;
}
[data-bs-theme="dark"] .info-key {
    color: #888;
}

/* Section labels */
.section-label {
    font-size: 13px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 10px;
}

/* Divider */
.section-divider {
    border-top: 1px solid #ebebeb;
    margin: 16px 0;
}
[data-bs-theme="dark"] .section-divider {
    border-color: #3a3a3a;
}

/* Narrow input */
.form-narrow .form-control {
    max-width: 50%;
}

/* Helper text */
.field-hint {
    display: block;
    font-size: 11px;
    color: #aaa;
    margin-top: 4px;
}

.readOnlyECO, .readOnlyView {
    pointer-events: auto;   /* ✅ allow hover */
    cursor: not-allowed !important;
    background-color: #eee !important;
    opacity: 1 !important;
}

/* Selects with readOnlyECO: block interaction and hide dropdown arrow so they look like text inputs */
select.readOnlyECO {
    pointer-events: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

/* Text inputs / textareas with readOnlyECO are view-only until "Edit" removes the
   class (the Edit handler only strips .readOnlyECO, it doesn't set the readonly
   attribute). Block typing/focus so they aren't editable and don't show a focus
   ring in view mode. */
input.readOnlyECO,
textarea.readOnlyECO {
    pointer-events: none !important;
}

/* Action buttons (Add Product / Add Item / Add to Order) are disabled in view
   mode and only become clickable after "Edit Order" removes readOnlyECO. */
a.buttonClimb.readOnlyECO,
a.buttonClimbSmall.readOnlyECO,
.addToProductBtn.readOnlyECO,
.addToBackorderBtn.readOnlyECO {
    pointer-events: none !important;
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* =============================================================================
   BACKORDERS TABLE (#backOrderTable) — alignment for input values.
   Table sizing itself is handled by the unified fixed-layout rules above.
============================================================================= */
#backOrderTable td.text-right input,
#backOrderTable td.text-right .form-control {
    text-align: right !important;
}

#backOrderTable td.text-center {
    text-align: center !important;
    vertical-align: middle !important;
}

/* Action icon should look like an icon, not a greyed-out box. */
#backOrderTable td.text-center .fa,
#backOrderTable td.text-center span.readOnlyECO,
#backOrderTable td.text-center a {
    background-color: transparent !important;
}


/* =============================================================================
   climb-dropdown.css
   Generic action button dropdown — dark theme, 3D flip animation
   Prefix: climb- to avoid conflicts with existing ulDrop / main-menu styles
   ============================================================================= */

/* ── Wrapper — gives positioning context to each dropdown ───────────────────── */
.climb-dd-wrapper {
    position: relative;
    display: inline-block;
}

/* ── Toggle button — inherits your buttonClimb styles ───────────────────────── */
.climb-dd-toggle {
    cursor: pointer;
    user-select: none;
}

/* ── Dropdown menu ───────────────────────────────────────────────────────────── */
.climb-dd-menu {
    display: block;                          /* kept block — animation uses rotateX */
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999;
    margin: 0;
    padding: 0;
    min-width: 160px;
    background: #2b2b2b;
    border: 1px solid #444;
    border-radius: 0 0 4px 4px;
    list-style: none;
    white-space: nowrap;
    overflow: hidden;

    /* 3D flip — closed state (matches your existing rotateX approach) */
    transform-origin: top;
    transform: perspective(600px) rotateX(-90deg);
    transition: transform 0.35s ease;
    pointer-events: none;                    /* not clickable when closed */
}

/* ── Open state ─────────────────────────────────────────────────────────────── */
.climb-dd-menu.climb-dd-open {
    transform: perspective(600px) rotateX(0deg);
    pointer-events: auto;
}

/* ── Menu items ─────────────────────────────────────────────────────────────── */
.climb-dd-menu li {
    list-style: none;
    display: block;
}

.climb-dd-menu li a {
    display: block;
    padding: 9px 14px;
    color: #c8a951;                          /* salesColor gold */
    text-decoration: none;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    transition: background 0.2s ease, color 0.2s ease;
    font-size: 13px;
}

/* No border on last item */
.climb-dd-menu li:last-child a {
    border-bottom: none;
}

/* Hover — subtle background lift */
.climb-dd-menu li a:hover {
    background: #383838;
    color: #dbbe6e;
}

/* Active/pressed */
.climb-dd-menu li a:active {
    background: #444;
    color: #e8d080;
}

/* Show sequence numbers by default on larger screens */
@media (min-width: 501px) {
    .valSeq {
        display: inline !important;
    }
}

/* Show sequence numbers when table is expanded (overrides hide500 for all screens) */
.columns-expanded .valSeq {
    display: inline !important;
}

/* .hide415 in sb-admin.css has a stray "}{" a few rules above it that closes
   its "@media (max-width: 415px)" early, so .hide415 leaks out and applies
   display:none at EVERY screen width instead of only ≤415px (same class of
   bug as .hide500 above). Restore the intended responsive behaviour — this
   is what hides the PRODUCT LINES sequence numbers on createLead/editLead,
   and the CATEGORY column on binTransfer/cycleCount etc.
   Use "revert" (not "inline") — .hide415 is applied to a mix of <span>
   (inline is correct) AND <td>/<th> table cells (inline breaks table layout,
   causing cells to overlap/collapse). "revert" restores each element's own
   normal default display (table-cell for td/th, inline for span). */
@media (min-width: 416px) {
    .hide415 {
        display: revert !important;
    }
}

/* Every .hideNNN class in sb-admin.css has some form of this same stray "}{"
   corruption, but it manifests as one of two opposite, empirically-verified
   failure modes depending on exactly where the malformed block lands
   relative to the class's own rule (tested directly against sb-admin.css
   alone, isolated from every other stylesheet, at both a wide and a narrow
   viewport):

   "NEVER APPLIES" — display:none silently never takes effect at any width
   (confirmed for .hide1000, .hide630 — both already fixed above the .hide415
   block; and .hide376, .hide600, .hide700, .hide845, .hide1100, .hide1250,
   .hide1450 below). Fix: simply re-declare the rule, correctly scoped, after
   sb-admin.css in the cascade.

   "LEAKS ALWAYS" — display:none leaks out and applies at EVERY width instead
   of only inside its intended range (confirmed for .hide415 above, plus
   .hide500, .hide800, .hide1200 below). Fix: force each element back to its
   own normal display ("revert", not "inline" — these classes land on a mix
   of <span> and <td>/<th>, and "inline" breaks table layout) once ABOVE the
   intended breakpoint, mirroring the .hide415 fix above.

   .hide1300 was also tested and found NOT to have either failure mode — its
   rule already works correctly, so it's deliberately left alone here.

   NEVER APPLIES — same fix shape as .hide1000/.hide630 above: */
@media (max-width: 376px) {
    .hide376 {
        display: none !important;
    }
}

@media (max-width: 600px) {
    .hide600 {
        display: none !important;
    }
}

@media (max-width: 700px) {
    .hide700 {
        display: none !important;
    }
}

@media (max-width: 845px) {
    .hide845 {
        display: none !important;
    }
}

@media (max-width: 1100px) {
    .hide1100 {
        display: none !important;
    }
}

@media (max-width: 1250px) {
    .hide1250 {
        display: none !important;
    }
}

@media (max-width: 1450px) {
    .hide1450 {
        display: none !important;
    }
}

/* LEAKS ALWAYS — same fix shape as .hide415 above. (.hide500 was previously
   given a "never applies"-style fix here by mistake; it actually leaks
   always like .hide415, so that fix didn't address the real problem —
   replaced with the correct pattern.) */
@media (min-width: 501px) {
    .hide500 {
        display: revert !important;
    }
}

@media (min-width: 801px) {
    .hide800 {
        display: revert !important;
    }
}

@media (min-width: 1201px) {
    .hide1200 {
        display: revert !important;
    }
}

/* .hide1000 in sb-admin.css has the same stray "}{" bug as .hide415 above,
   but here it breaks the OTHER direction: the "}{" sits right after
   .hide1000's own rule closes correctly, so .hide1000 itself is still inside
   its "@media (max-width: 1000px)" block on paper — yet browsers stop
   recognizing the rule once the malformed block follows it, so
   display:none never actually applies at any width. On coLanding's orders
   table (WAREHOUSE column, class="hide1000") this leaves a 0-width but
   still-rendered <th>, which collapses onto the next header and shows as
   overlapping/garbled text instead of being hidden. Re-declare it scoped
   and correct here, after sb-admin.css in the cascade. */
@media (max-width: 1000px) {
    .hide1000 {
        display: none !important;
    }
}

/* Same "}{" corruption in sb-admin.css as .hide1000 above — breaks .hide630
   the same way. Used on poPickingSlipMain's WAREHOUSE/PRODUCTS/ORDER DATE
   columns. */
@media (max-width: 630px) {
    .hide630 {
        display: none !important;
    }
}

/* Same "}{" corruption as above, for .hide550 (supplierCreditNotes). */
@media (max-width: 550px) {
    .hide550 {
        display: none !important;
    }
}

/* Remove extra space after ACTION column in poPickingSlip */
#purchaseOrderTable {
    width: 100% !important;
}

/* Stock Movements Filter and Sort Styling */
.stock-filter.form-control,
.stock-filter.form-select {
    box-sizing: border-box !important;
    height: 31px !important;
    min-height: 31px !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    line-height: 1.5 !important;
    border-radius: 0.25rem !important;
}

.stock-movements-table thead th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
}

.stock-movements-table thead th.sortable:hover {
    background-color: #f0f0f0;
}

.sort-icon {
    margin-left: 4px;
    opacity: 0.5;
    font-size: 0.85em;
}

.sort-icon.fa-sort-up,
.sort-icon.fa-sort-down {
    opacity: 1;
    color: #0d6efd;
}
/* checkoutOrder.jsp PRODUCT LINES table — CODE input was rendering visually
   centered despite the input's own inline text-align:left. Force it here
   with a highly-specific selector as a guaranteed backup. */
#orderTable input.productCodeInput {
    text-align: left !important;
}

/* Product Update — Label tab card heights, matched per row (row 1 = 450px,
   rows 2 & 3 = 310px) so the 3 cards side by side in each row line up evenly.
   overflow-y: auto guards two cards with data-driven row counts (Nutrition
   Information Panel, Attributes) — a product with more rows than usual
   scrolls inside the card instead of silently clipping.
   The fixed height only makes sense with cards side by side (col-lg-4); below
   that breakpoint columns stack to full width and a desktop-tuned height
   would either strand empty space or clip content, so it's relaxed to auto. */
.height-450px {
    height: 450px !important;
    overflow-y: auto;
}

.height-310px {
    height: 310px !important;
    overflow-y: auto;
}

@media (max-width: 991.98px) {
    .height-450px,
    .height-310px {
        height: auto !important;
        overflow-y: visible;
    }
}

/* Product Add/Edit pages (addProduct.jsp form #productForm, productUpdate.jsp
   form #productUpdateForm). Scoped by form id rather than the shared
   #page-wrapper.co-module-acc wrapper class, which ~10 other unrelated pages
   (customers, suppliers, invoices, ...) also use. */

/* .noteBox (sb-admin.css) is a shared "customer comment" textarea style with
   color:green !important — wrong for the plain free-text fields these two
   pages use it on (Ingredients/Allergens/Certification Details, Health
   Benefits, How To Use, Storage Instruction, Tags). */
#productForm .noteBox,
#productUpdateForm .noteBox {
    color: inherit !important;
}

/* .imgDim (custSelfOrder.css) sizes the shopping-cart thumbnail at 160x150 —
   too tall for productUpdate.jsp's Product Image column to sit level with
   the Product Details/dimensions columns beside it. addProduct.jsp has no
   #productImg (no existing image to preview before the product is saved). */
#productUpdateForm #productImg {
    width: 130px;
    height: 110px;
    object-fit: cover;
}

#productForm #dropArea,
#productUpdateForm #dropArea {
    padding: 14px;
}

/* Generic card-header "+ Add" button, reusable across modules — pair with
   a module color utility (.accColor for Product) that also sets
   --module-color; this button reads that variable for its border/hover
   fill instead of hardcoding a color per module. Originally replaced the
   .more-bt animated icon button on the Product Label tab (Ingredients,
   Allergens, Nutrition Information Panel, Certification, Attributes),
   whose accent color didn't follow the module's theme.
   To use this button in another module, add --module-color to that
   module's existing color utility (.hrColor, .reportColor, .qaColor,
   .designColor, ...) the same way .accColor does above. */
.add-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 12px;
    border: 1px solid var(--module-color, currentColor);
    border-radius: 4px;
    font-size: 12px;
    background: transparent;
    text-decoration: none;
    transition: all 0.2s;
}

.add-btn:hover {
    color: #fff !important;
    background: var(--module-color, currentColor);
}

/* Generic instruction/notice banner, reusable across modules — same
   --module-color pattern as .add-btn above: pair with a module color
   utility (.accColor for Product) and this box picks up that color for
   its left border and icon, no per-module CSS needed. Background stays
   transparent (not a tinted fill) so it holds up in both themes without
   a hardcoded color. */
.instruction-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--module-color, currentColor);
    border-left-width: 4px;
    border-radius: 4px;
    background: transparent;
    font-size: 12px;
}

.instruction-box i,
.instruction-box .instruction-icon {
    color: var(--module-color, currentColor);
    flex-shrink: 0;
}

/* editCustomerInvoice.jsp header action row (Xero/Driver Schedule/Email/Print
   buttons) sits in a Bootstrap .col-auto, which sizes to fit its content
   rather than the row's available width. Giving the inner .d-flex
   flex-wrap alone doesn't help — a child's width:100% can't force an
   auto-width ancestor to expand, so .col-auto (the actual flex item in
   .row) still shrinks to its unwrapped content and pushes the page wide.
   Force the .col-auto itself to take the full row on phones so its
   buttons have room to wrap instead of overflowing. */
@media (max-width: 767px) {
    .ci-header-col {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* iOS Safari centers a date input's visible value inside its own
   ::-webkit-date-and-time-value pseudo-element regardless of the input's
   text-align — this is a WebKit UA-stylesheet default, not something this
   app's own CSS set, which is why it only shows up on iOS. Every other
   .form-control on the same form is a plain text input and left-aligns
   normally, so the date field alone looks off. Applies app-wide since
   every type="date" field has the same WebKit default. */
input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
}