/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body {
	margin:0px;
	font-size:12px;
	font-family: 'Montserrat', sans-serif;
	top: 0px;
    box-sizing: border-box;
    left: 0px;
	background-color: rgba(12, 77, 139, 0.02);
}

input.login {
	padding:15px 20px 15px 20px;
	font-size:16px;
	margin-bottom:20px;
	margin-left:auto;
	margin-right:auto;
	position:relative;
	font-family: 'Montserrat', sans-serif;
}

input, select, button, textarea, a.recent_ord {
	padding:5px 8px 5px 8px;
	border:1px solid #CCC;
	font-size:14px;
	margin-bottom:0px;
	margin-left:auto;
	margin-right:auto;
	position:relative;
	font-weight:normal;
	font-family: 'Montserrat', sans-serif;
}

div#page_title {
	flex: 1;
    text-align: left;
	display: flex;
    align-items: center;
}
div.page_title_text {
	margin-left:8px;
}

#pac-container {
	width: 160px;
}
div#pac-container input {
	border:none;
	background:transparent;
	padding:0px;
}
gmp-place-autocomplete div.autocomplete-icon, gmp-place-autocomplete div.clear-button {
	display:none !important;
}
gmp-place-autocomplete {
	background-color:transparent;
	border:none;
}
gmp-place-autocomplete::part(autocomplete-icon) {
    display: none;
  }

gmp-place-autocomplete::part(clear-button) {
	display: none;
}
google-maps-place-autocomplete, gmp-place-autocomplete {
    --gmp-icon-display: none;
    --gmp-clear-button-display: none;
}
.autocomplete-dropdown, .cus-dropdown {
  	list-style: none;
    padding: 0px;
    margin: 0px;
    border: 1px solid rgb(204, 204, 204);
    position: absolute;
    z-index: 5;
    width: 350px;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px;
    display: block;
    border-radius: 10px;
	text-align:left;
	background: rgba(255, 255, 255, 1);
}
div.jBox-content .autocomplete-dropdown {
	max-width:100%;
}
div.jBox-content .autocomplete-dropdown i {
	max-width:unset;
	margin: 0;
}
.autocomplete-dropdown li, .cus-dropdown li {
  	padding: 8px;
  	cursor: pointer;
	display:flex;
	align-items: center;
	border-bottom: 1px solid light-dark(rgb(217, 217, 217), rgb(68, 71, 70));
}
.autocomplete-dropdown li:hover,
.autocomplete-dropdown li.highlighted,
.cus-dropdown li:hover,
.cus-dropdown li.highlighted {
  background: #f0f0f0;
}
.autocomplete-dropdown div.mainText,
.cus-dropdown div.mainText {
	font-size: 13px;
	font-weight:500;
	color: #111;
}
.autocomplete-dropdown div.subText,
.cus-dropdown div.subText {
	font-size: 12px;
	color: #666;
}
.autocomplete-dropdown div.icon,
.cus-dropdown div.icon {
	width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111;
    font-size: .7rem;
    font-weight: bold;
    margin-right: 10px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.autocomplete-dropdown li:hover div.icon, .autocomplete-dropdown li.highlighted div.icon, .cus-dropdown li:hover div.icon, .cus-dropdown li.highlighted div.icon {
	background:#d8d8d8;
}
.cus-dropdown li.inactive div.icon {
	background:white;
	color:#a3a3a3;
	border:1px solid #e5e5e5;
}
/* Hide any custom icons or clear buttons */
.autocomplete-icon, .clear-button {
  display: none !important;
}

/* Job/site contact typeahead — a clean per-customer contact picker. Inherits the
   container chrome (bg/border/radius/shadow) from .autocomplete-dropdown; this
   refines the rows: drops the per-row hairline, splits name / phone, and floats
   inset hover + keyboard-active pills. Dark overrides live in css/theme.css. */
ul.autocomplete-dropdown.jobcontact-drop {
	padding: 4px;
	max-height: 264px;
}
ul.autocomplete-dropdown.jobcontact-drop li {
	border-bottom: 0;
	border-radius: 7px;
	padding: 7px 10px;
	gap: 14px;
	justify-content: space-between;
	line-height: 1.3;
}
ul.autocomplete-dropdown.jobcontact-drop li:hover,
ul.autocomplete-dropdown.jobcontact-drop li.active {
	background: #eef2f7;
}
ul.autocomplete-dropdown.jobcontact-drop .jc-name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 13px;
	font-weight: 500;
	color: #1b2530;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
ul.autocomplete-dropdown.jobcontact-drop .jc-phone {
	flex: 0 0 auto;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	color: #6b7683;
	white-space: nowrap;
}
ul.autocomplete-dropdown.jobcontact-drop .jc-del {
	flex: 0 0 auto;
	width: 18px;
	margin: -2px -2px -2px 2px;
	text-align: center;
	font-size: 15px;
	line-height: 20px;
	color: #b7bfc9;
	border-radius: 5px;
	cursor: pointer;
}
ul.autocomplete-dropdown.jobcontact-drop .jc-del:hover {
	color: #fff;
	background: #e0564e;
}

.align-middle {
	vertical-align: middle;
}

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

div.empty-state-content div.search-icon i {
	font-size: 2.7rem;
    color: #0c4d8b;
}

.filter-title {
	font-size: 16px;
	font-weight: 600;
	color: #374151;
	margin-bottom: 16px;
}

.active-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
	margin-top: 15px;
}

.filter-pill {
	display: inline-flex;
	align-items: center;
	background: rgba(46, 77, 134, 0.1);
	color: rgb(46, 77, 134);
	border: 1px solid rgba(46, 77, 134, 0.2);
	border-radius: 20px;
	padding: 6px 12px;
	font-size: 14px;
	font-weight: 500;
	gap: 8px;
	animation: pillSlideIn 0.2s ease-out;
}

@keyframes pillSlideIn {
	from {
		/*opacity: 0;*/
		transform: scale(0.95) translateX(1px);
	}
	to {
		/*opacity: 1;*/
		transform: scale(1) translateX(0);
	}
}

.pill-remove {
	background: none;
	border: none;
	color: rgb(46, 77, 134);
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	padding: 0;
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background-color 0.2s;
}

.pill-remove:hover {
	background: rgba(46, 77, 134, 0.2);
}

.filter-dropdowns {
	display: flex;
	flex-wrap:wrap;
	gap: 6px;
}

.filter-dropdown {
	position: relative;
	flex: .5;
    min-width: calc(50% - 3px);
}

.filter-button {
	width: 100%;
	padding: 10px 16px;
	background: white;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	text-align: left;
	cursor: pointer;
	font-size: 14px;
	color: #374151;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: all 0.2s;
}

.dropdown-content.bigger {
	min-width:200px;
}

.filter-button:hover {
	border-color: rgb(46, 77, 134);
	box-shadow: 0 0 0 3px rgba(46, 77, 134, 0.1);
}

.filter-button.active {
	border-color: rgb(46, 77, 134);
	background: rgba(46, 77, 134, 0.05);
}

.dropdown-arrow {
	transition: transform 0.2s;
	font-size: 12px;
}

.filter-button.active .dropdown-arrow {
	transform: rotate(180deg);
}

.dropdown-content {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: white;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	z-index: 1000;
	max-height: 200px;
	overflow-y: auto;
	display: none;
	margin-top: 4px;
}

.dropdown-content.show {
	display: block;
	animation: dropdownSlide 0.2s ease-out;
}

@keyframes dropdownSlide {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.dropdown-item {
	padding: 10px 16px;
	cursor: pointer;
	font-size: 14px;
	color: #374151;
	border-bottom: 1px solid #f3f4f6;
	transition: background-color 0.2s;
}

.dropdown-item:last-child {
	border-bottom: none;
}

.dropdown-item:hover {
	background: #f8fafc;
	color: rgb(46, 77, 134);
}

.dropdown-item.selected {
	background: rgba(46, 77, 134, 0.1);
	color: rgb(46, 77, 134);
	font-weight: 500;
}
button.filter-button span.title {
	display:flex;
	align-items: center;
	gap:7px;
	line-height: 18px;
}

.filter-close-btn {
    position: absolute;
    top: -5px;
    right: -10px;
    background: white;
    color: #666;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.filter-close-btn:hover {
    background: #f5f5f5;
    color: #333;
}

.btn {
	padding: 8px 16px;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	transition: all 0.3s ease;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.btn-primary {
	background: transparent;
	text-transform: none;
    letter-spacing: unset;
	border: 1px solid #CCC;
	display: flex;
    align-items: center;
    gap: 6px;
}

.btn-primary:hover {
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.2);
    background-color: rgb(222 229 236 / 18%) !important;
    border-color: #0c4d8b !important;
    transform: translateY(-1px) scale(1.01);
    color: #2e4d86;
}

.btn-sm {
	font-size:12px;
}

.btn-danger {
	border:1px solid #ee5a52;
	background:transparent;
	color: #ee5a52;
}

.btn-danger:hover {
	transform: translateY(-1px) scale(1.03);
	box-shadow: 0 4px 12px rgba(255, 107, 107, 0.05);
	background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
	color:white;
}

.btn:disabled, .btn:hover:disabled {
	cursor:auto !important;
	color: #bbb !important;
    border-color: #bbb !important;
	background:transparent !important;
}

.btn-secondary {
	background: #6c757d;
	color: white;
}

.btn-secondary:hover {
	background: #5a6268;
	transform: translateY(-2px);
}

.report-long-modal {
	text-align: center;
	padding: 6px 4px;
}

.report-long-modal__actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 14px;
}

.report-long-modal__btn {
	height: 34px;
	padding: 0 14px;
	border-radius: 10px;
	border: 1px solid #e2e8f0;
	background: #fff;
	color: #0c4d8b;
	font-size: 12px;
	font-weight: 800;
	cursor: pointer;
	transition: all 0.15s ease;
}

.report-long-modal__btn:hover {
	border-color: #cbd5e1;
	box-shadow: 0 1px 6px rgba(15, 23, 42, 0.06);
}

.report-long-modal__btn--danger {
	border-color: #fecaca;
	background: #fff5f5;
	color: #b91c1c;
}

.report-long-modal__btn--danger:hover {
	border-color: #fca5a5;
	box-shadow: 0 6px 18px rgba(185, 28, 28, 0.08);
}

.clear-filters-btn {
    background: transparent;
    color: #666;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
	margin:0px;
}
div.filter-controls {
	flex:1;
	min-width:100%;
	margin-top: 10px;
	display: flex;
	justify-content: center;
    align-items: center;
    gap: 10px;
}

.clear-filters-btn:hover {
    background: #f5f5f5;
    color: #333;
}

.form {
	font-family: 'Montserrat', sans-serif;
	font-size:12px;
	border: 1px solid #CCC;
	background-color:#F0F0F0;
	padding:10px;
	border-radius:4px;
	box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;
}

input, select, textarea {
	border: 1px solid #CCC;
}

button, textarea {
	font-weight:normal;
}

#menu {
	position:fixed;
	left: 0px;
	z-index:100;
	width:165px;
    background-color: rgb(194,211,226, 0.98);
	margin-top:0px;
	top:0px;
	border-bottom: .5px solid #FFF;
	border-right: 1px solid #e2e8f0;
	font-size:12px;
	text-align:left;
	font-family: 'Montserrat', sans-serif;
	padding-bottom:5px;
	/* Match modern header elevation */
	/* Right-only shadow so it won't overlap header */
	box-shadow: 2px 0 6px -4px rgba(0, 0, 0, 0.22);
	height: 100%;
}
.relative_time {
	font-size: 12px;
	color: #666;
	margin-top: 4px;
	display:block;
}
.pad {
	padding:4px;
	margin:0px;
	margin-bottom:3px;
}

#menu a {
	position:relative;
	color:#333;
	display:block;
	font-size:14px;
	padding: 11px 10px 11px 12px;
    margin-top: 2px;
	text-transform:uppercase;
	border:.5px solid transparent;
    border-left: 5px solid transparent;
	-webkit-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}

#menu a:hover:not(.selected) {
	padding-left:17px;	
}

div#menu a i {
	margin-right:8px;
	width:16px;
}

div#menu_logo {
	margin-bottom: 4px;
    background-color: #0c4d8b;
    padding: 8px 0px;
    color: #FFF;
	font-size:10px;
	text-align: center;
	border-bottom: .5px solid #FFFF;
}
div#menu_logo span {
	font-size:20px;
	font-weight:bold;
	letter-spacing: -1px;
	transform:scale(1.15,1);
}

#menu a:hover {
	text-decoration:none;
}

#menu a:hover:not(.selected), #menu .selected {
	background-color: #0c4d8b;
    border: .5px solid rgba(12, 77, 139, 0.58);
	border-left:5px solid transparent;
    color: #FFF;
    font-weight: bold;
}

#menu .selected {
	border-left: 5px solid #0674dd;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15), 0 1px 3px 0 rgba(0, 0, 0, 0.15);
}

#menu_toggle {
	display:none;
}

a {
	text-decoration:none;
}

p {
	margin:0px;
}

a:hover {
	color:#1191CE;
	text-decoration:none;
}

tr.d0 td, tr.d1 td, tr.cd0 td, tr.cd1 td, tr.selected td, tr.main td, tr.line td {
	padding-top:10px;
	padding-bottom:10px;
	padding-left:7px;
	font-size:11px;
	cursor:pointer;
}

tr.line td.trash {
	padding-left:2px;
}

table#dt_table tr.d0 td, table#dt_table tr.d1 td, table#dt_table tr.cd0 td, table#dt_table tr.cd1 td, table#dt_table tr.selected td, table#dt_table tr.main td, table#dt_table tr.line td {
	padding-top:5px;
	padding-bottom:5px;
	padding-left:7px;
	font-size:11px;
	cursor:pointer;
}
table#dt_table tr.cd0 td.dt_inv, table#dt_table tr.cd1 td.dt_inv, table#dt_table tr.cd0.moh td, table#dt_table tr.cd1.moh td {
	background: rgb(24 144 255 / 10%);
}
select.dt_qty, div.item_bo select, div.item_ret select, div.item_ret select, select.nbo_qty {
	border: 0px solid #CCC;
    background: rgba(255,255,255,0.75);
    font-weight: bold;
    border-radius: 5px;
	color: #0c4d8b;
}
select.nbo_qty {
	vertical-align: middle;
}
div.item_bo select {
	margin-right:5px;	
}
div.item_ret select {
	font-weight:normal;
}
div.item_bo, div.item_ret {
	padding: 4px 0px;
}
/* Modern Reports Table Header */
table#report_list thead tr.main td, 
table#report_list thead tr.main_top td {
	border-bottom: 1px solid #e2e8f0 !important;
	padding: 12px 0px 12px 0px !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	color: #64748b !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	cursor: default;
}

table#report_list thead tr.main td div,
table#report_list thead tr.main_top td div {
	/* display: flex; */
	align-items: center;
	gap: 6px;
}

/* Style the cl_sort divs inside header cells */
table#report_list thead tr.main td div.cl_sort,
table#report_list thead tr.main_top td div.cl_sort {
	color: #64748b !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
}

/* Style regular divs (non-cl_sort) in header cells */
table#report_list thead tr.main td > div:not(.cl_sort),
table#report_list thead tr.main_top td > div:not(.cl_sort) {
	color: #64748b !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
}

table#report_list thead tr.main td.padded,
table#report_list thead tr.main_top td.padded {
	padding-left: 7px !important;
    padding-right: 0px;
	font-weight: 600 !important;
}

/* Modern Reports Table Body - Alternating Row Colors */
table#report_list tbody tr.d0 td,
table#report_list tbody tr.cd0 td {
	background-color: #ffffff;
}

table#report_list tbody tr.d1 td,
table#report_list tbody tr.cd1 td {
	background-color: #fafbfc;
}

table#report_list tbody tr:hover td {
	background-color: rgba(12, 77, 139, 0.04);
}

/* Modern empty / info state messaging inside results tables */
table#report_list tbody tr.results_state_row td {
	padding: 12px 10px !important;
	background: transparent !important;
	cursor: default !important;
}

.quick-summary {
	background: #ffffff;
	border-radius: 12px;
	padding: 12px 14px;
}

.quick-summary__title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 800;
	color: #0f172a;
	margin-bottom: 10px;
}

.quick-summary__title i {
	color: #0c4d8b;
	font-size: 14px;
}

.quick-summary__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.quick-summary__cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.quick-summary__colTitle {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #334155;
	margin-bottom: 8px;
}

.quick-summary__colTitle i {
	color: #0c4d8b;
	font-size: 13px;
}

.quick-summary__stack {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.quick-summary__metric {
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	background: #fafbfc;
	padding: 10px 12px;
	min-width: 0;
}

.quick-summary__metric--money .quick-summary__value {
	color: #0c4d8b;
}

.quick-summary__label {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #64748b;
}

.quick-summary__value {
	margin-top: 4px;
	font-size: 18px;
	font-weight: 900;
	color: #0f172a;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

table#quick_list.quick-summary {
	width: min(760px, calc(100% - 32px)) !important;
	border-collapse: separate;
	border-spacing: 0;	
	box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
	margin:auto;
}

table#quick_list.quick-summary td {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
}

@media (max-width: 560px) {
	.quick-summary__grid {
		grid-template-columns: 1fr;
	}

	.quick-summary__cols {
		grid-template-columns: 1fr;
	}
}

.results-state {
	display: flex;
	align-items: center;
    justify-content: center;
	gap: 1px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 14px 16px;
	max-width: 760px;
	margin: 15px auto;
	box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
	color: #334155;
}

.results-state__icon {
	font-size: 16px;
	line-height: 1;
	color: #0c4d8b;
	margin-top: 2px;
	flex: 0 0 auto;
}

.results-state__title {
	font-size: 14px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.2;
}

.results-state__text {
	margin-top: 3px;
	font-size: 13px;
	line-height: 1.35;
	color: #475569;
}

.results-state__body {
	flex:.98;
}

.results-state--muted .results-state__icon {
	color: #94a3b8;
}

.results-state--error {
	border-color: #fecaca;
	background: #fff5f5;
}

.results-state--error .results-state__icon {
	color: #ef4444;
}

/* Keep old styles for tbody main rows */
table#report_list tbody tr.main td, 
table#report_list tbody tr.main_top td {
	padding-top:10px;
	padding-bottom:10px;
	padding-left:0;
	font-size:11px;
	cursor:default;
	font-weight: bold;
}

table#report_list tbody tr.main td.padded,
table#report_list tbody tr.main_top td.padded {
	padding-left:4px;
    padding-right:0px;
	font-weight:bold;
}
table#report_list tr td {
	padding-top:3px;
	padding-bottom:3px;
	padding-left:0;
	font-size:11px;
	cursor:default;
	box-sizing: border-box;
}
table#report_list tr.inv td {
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 12px;
}
table#report_list tbody > tr:not(.ord_head, .tax_info, .tax_totals, .inv_details, .main, .main_top):nth-of-type(even) td {
	background-color: #fafbfc;
}
table#report_list tbody > tr:not(.ord_head, .tax_info, .tax_totals, .inv_details, .main, .main_top):nth-of-type(odd) td {
	background-color: #ffffff;
}
table#eod_table tr:nth-child(even), table#reco_preview tr:nth-child(even) {
	background: rgba(99,99,99,0.1);
}
table#order_list tbody tr:not(#tr_pdrw):not(.buffer):nth-child(even) {
	background-color: rgba(180,190,199,0.23);
}
table#order_list tbody tr:not(#tr_pdrw):not(.buffer):not(#grp_delivery):hover {
	background-color: rgba(12, 77, 139, 0.18);
}
#edit_line {
	margin-top:4px;
	padding-bottom:10px;
	padding-left:0px;
	font-size:11px;
	position:relative;
	background: #F0F0F0 url(../galleria/themes/azur/bg.png);
	border: 1px solid #CCC;
	-webkit-box-shadow: 0 8px 8px -6px gray;
    -moz-box-shadow: 0 8px 8px -6px gray;
    box-shadow: 0 8px 8px -6px gray;
	border-radius: 8px;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
#edit_line {
	cursor:default;
}
tr.d0 td, tr.cd0 td {
	background-color: transparent;
	font-weight:600;
}
tr.d1, tr.cd1 {
	background: rgba(101, 108, 45, 0.05);
	font-weight:600;
}

/* Modern Order List Styling */
table#ao_table {
	overflow: hidden;
}

/* Modern Orders Table Header */
table#ao_table thead tr.main td {
	background-color: #f8fafc;
	border-bottom: 1px solid #e2e8f0;
	padding: 12px 0px 12px 7px;
	font-size: 11px;
	font-weight: 600;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

table#ao_table thead tr.main td div {
	display: flex;
	align-items: center;
	gap: 6px;
}

table#ao_table tbody tr {
	border-bottom: 1px solid #f1f5f9;
	transition: all 0.15s ease;
}

/* Modern alternating row colors */
table#ao_table tbody tr.d0 td,
table#ao_table tbody tr.cd0 td {
	background-color: #ffffff;
}

table#ao_table tbody tr.d1 td,
table#ao_table tbody tr.cd1 td {
	background-color: #fafbfc;
}

table#ao_table tbody tr:hover td {
	background-color: rgba(12, 77, 139, 0.04);
}

table#ao_table tbody tr:last-child {
	border-bottom: none;
}

table#ao_table tbody tr:last-child td {
	border-bottom: none;
}
/* sch-grid width set dynamically by dispatch.js (100% for day, fixed px for week) */
div#flip_me {
	width: 100%;
}
div#prod_today {
	width: 100%;
}
tr.main td {
	border-bottom:1px solid #CCC;
	padding-top:4px;
	padding-bottom:4px;
	font-size:12px;
	cursor:default;
}
tr.main td.rec_qty, tr.main_top td.rec_qty {
    background-color:rgba(37,255,0,0.36);
}
tr.main td.obs_qty, tr.main_top td.obs_qty {
    background-color:rgba(0,239,255,0.36);
}
tr.main td.adj_qty, tr.main_top td.adj_qty {
    background-color:rgba(253,255,0,0.36);
}
tr.selected td {
	background-color: rgba(255, 255, 204, 0.74) !important;
	-webkit-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}
tr.inv_details.selected td, tr.inv_history.selected td {
	background-color: rgb(188, 227, 255);
	-webkit-transition: all 0s ease-in-out;
    transition: all 0s ease-in-out;
}
table.history_table tbody tr.h_row td {
	background-color: transparent;
	padding:20px;
}
table#report_list tr.inv_details.selected td, table#report_list tr.inv_details.selected td select {
	font-weight:bold;
	font-size:12px;
}
tr.inv_details.selected td select {
	font-weight:bold;
}
tr.inv_history i {
	margin-left: 10px;
}
table.history_table {
	margin-bottom:5px;
}
.open_order {
	cursor:pointer;
}
tr.header td div {
	text-decoration:underline;
}
tr.data td div {
	font-size:11px;
	font-weight:600;
	margin-top:-2px;
}
table.login tr td {
	padding-top:2px;
	padding-bottom:2px;
}
table.login tr.fail td, .login_container div.fail {
	padding:10px;
	margin-bottom:20px;
	background-color:#EAEAEA;
	color:#C00;
	font-family: 'Montserrat', sans-serif;
}
.editing {
	display:block;
	position:relative;
	font-family: 'Montserrat', sans-serif;
}
.edit_elem, .edit_elemc, .numbers {
	border:1px solid transparent;
	background-color:transparent;
	padding:3px;
	position:relative;
	font-family: 'Montserrat', sans-serif;
	top:2px;
	padding-bottom:2px;
}
#email_to .contact-list div.row .contact-info .edit_elemc {
	top:0px;
	padding:1px;
}
.numbers {
	padding: 3px 0px 3px 3px;
}
.edit_elemc {
	left:0px;
	cursor:pointer;
}
.edit_elemc:hover {
	background-color:#DEF1F1;
	border:1px solid #ABCDD4;
}
.edit_input, .editc_input, .editc_contact, .editc_qb {
	position:relative;
	top:0px;
	left:0px;
	margin-top:0px;
	margin-bottom:-4px;
	padding-left:3px;
	font-size:11px;
	font-family: 'Montserrat', sans-serif;
}
.editc_contact {
	margin-top:-2px;
}
.editc_qb {
	font-size: 12px;
    font-weight: bold;
}
.editc_input, .editc_contact {
	font-weight:normal;
	font-size:11px;
}
.edit_date {
	position:relative;
	top:0px;
	left:3px;
	margin-bottom:3px;
	border:2px solid #666;
}
.page-break {
	display:none;
}
#v_all {
	margin-top:7px;
}
.close, .close_cus_x {
	position:absolute;
	cursor:pointer;
	line-height:18px;
	font-weight:600;
	width:20px;
	top:6px;
	right:1px;
	z-index:100;
	color:#000;
}
.close {
	font-size:16px;
	font-weight:normal;
	top:17px;
	right:-10px;
}
.close_cus_x {
	position:absolute;
	top:-14px;
	right:8px;
	font-size:18px;
}
a.close:hover, a.close_cus_x:hover {
	color:#F00;
	text-decoration:none;
}
#d_pick {
	margin-top:10px;
}
.img_button {
	cursor:pointer;
	border:0;
	vertical-align:top;
}
.login_button {
	margin-top:8px;padding:10px 20px 10px 20px;font-family: 'Montserrat', sans-serif;font-size:12px;background-color:#3a7798;color:#FFF;cursor:pointer;border:0px;
}
.login_button:hover {
	background-color:#224659;text-decoration:underline;
}
.login_container {
	margin:0px auto;width:320px;font-family: 'Montserrat', sans-serif;text-align:center;
}
.faded {
	color:#A6A6A6;
	border:1px #D5D5D5 solid;
}
.complete {
	color:#3a7798;
	border:1px #3a7798 solid;
}
div.pass, div.user {
	position:relative;
}
.super_name {
	font-size:11px;
	position:absolute;
	top:-13px;
	left:8px;
}
span.report_icons {
	text-indent:-9999px;
	overflow:hidden;
	background:url(images/icons.png);
	display:block;
	width:21px;
	height:21px;
}
span.delete_new, div.delete_new, span.search_em {
	color:#333;
}
div.delete_new {
	position:absolute;
	right:-10px;
	cursor:pointer;
	top:9px;
	font-size:14px;
}
span.delete_new:hover, div.delete_new:hover {
	color:#DC0509;
}
button#cancel_emp:hover {
	background:#a60003;
}
span.search_em:hover {
	color:#00424D;
}
span.srch_cus {
	display: flex;
	align-items: center;
	padding: 8px 10px;
	cursor: pointer;
	border: 1px solid #e2e8f0;
	background-color: #fff;
	box-sizing: border-box;
	position: relative;
	border-radius: 6px;
	font-size: 12px;
	color: #334155;
	transition: all 0.15s ease;
	overflow: hidden;
}
span.srch_info {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-width: 0;
	flex: 1;
	line-height: 1.3;
}
span.srch_info b {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
span.srch_cat {
	font-size: 10px;
	color: #94a3b8;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-top: 1px;
}
span.srch_pr {
	text-align: left;
}
div.srch_actions {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 8px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
\#ops span.srch_pr span.srch_info {
	padding-right: 110px;
}
div.qoh {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 10px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 10px;
	background-color: #f0fdf4;
	border: 1px solid #bbf7d0;
	color: #16a34a;
	line-height: 1.4;
	white-space: nowrap;
}
div.qoh i.qoh_icon {
	font-size: 9px;
}
div.qoh.qoh_zero {
	background-color: #fafafa;
	border-color: #e5e5e5;
	color: #a3a3a3;
}
div.qoh.qoh_low {
	background-color: #fffbeb;
	border-color: #fde68a;
	color: #b45309;
}
div.srch_edit_pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 10px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 10px;
	background-color: #f8fafc;
	border: 1px solid #e2e8f0;
	color: #64748b;
	line-height: 1.4;
	cursor: pointer;
	transition: all 0.15s ease;
	white-space: nowrap;
}
div.srch_edit_pill:hover {
	background-color: #f1f5f9;
	border-color: #94a3b8;
	color: #334155;
}
div.srch_edit_pill i {
	font-size: 9px;
}
\#ops span.srch_grp {
	padding: 8px 10px;
}
span.srch_gr {
	box-sizing: border-box;
	padding: 8px 10px;
}
div.grp_find span.srch_gr {
	padding-right: 4%;
}
div.prd_res span.srch_gr {
	box-sizing: border-box;
	padding: 8px 12px;
	text-align: left;
	min-width: inherit;
}
span.srch_cus:hover {
	background-color: #f8fafc;
	border-color: #94a3b8;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
i.srch_icon {
	margin-right: 6px;
	flex-shrink: 0;
	font-size: 13px;
}
div.srch_plant {
	display: inline-block;
	margin-right: 6px;
	flex-shrink: 0;
	font-size: 16px;
	vertical-align: middle;
}
div.srch_plant div.loc_let {
	font-size: 10px;
	top: 1.5px;
}
span.srch_cus i.fa-plus-circle {
	color: #4a9eff;
}
span.srch_cus i.fa-check-circle {
	color: #22c55e;
}
span.srch_cus i.fa-object-group {
	color: #8b5cf6;
}
span.cus_adds span {
	display:inline-block;
	cursor:pointer;
	background:rgba(37, 136, 173, 0.38);
	padding: 5px 8px 5px 8px;
    cursor: pointer;
    margin: 3px;
}
span.cus_adds span:hover {
	background:rgba(29,99,126,0.53);
}
span.open_order {
	background-position:0px 0px;
}
span.open_order:hover {
	background-position:0px -21px;
}
div.page_numbers, div.report_type {
	display:none;
}
#logo_print {
	display:none;
}
.cus_title {
	padding-top:3px;
	position:relative;
	display:block;
}
div.low {
	display:inline-block;
	margin-top:3px;
}
div.email-list div.low {
	display:inline-block;
	margin-top:0px;
}
div.new_contact {
	margin-top:4px;
	display:block;
}
div.hidden {
	display:none;
}
.add_contact {
	font-weight:normal;
}
div.form-group button.add_contact {
	padding: 8px 12px;
    font-size: 12px !important;
    border-radius: 6px;
}
.contact-list {
	line-height:19px;
}
/* Generic-account quote panel (Task 7): read-only note replacing the
   editable contact list / Add Recipient controls. */
.contact-list-note {
	padding: 14px 6px;
	color: #888;
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
}
.cus_row {
	position:relative;
}
div.con_row {
	padding-bottom:4px;position:relative;
}
.row {
	padding-bottom:6px;position:relative;box-sizing: border-box;
	-webkit-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}
.row_select {
	background-color:rgb(141, 176, 210);
	-webkit-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}
.row_error {
	background-color:rgba(204,208,40,0.68);
	-webkit-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}
div.contact-list div.new_contact {
	margin-top:3px;
	margin-bottom:5px;
}
div.contact-list div.new_contact input.add_contact, div.contact-list div.new_contact button.add_contact, div.editing input.add_contact, div.editing button.add_contact, div.email-list div.new_contact input.add_contact, div.email-list div.new_contact button.add_contact, div.form-group button.add_contact {
	cursor:pointer;
	font-size:11px;
}
div.editing input.add_contact, div.editing button.add_contact, button.recent_ord, a.recent_ord {
	background-color:#D0E5EC;
	border:1px solid #8AC8D8;
}
div.form-group button.add_contact {
	background-color:transparent;
	border:1px solid #8AC8D8;
}
div.contact-list div.new_contact input.add_contact:hover, div.contact-list div.new_contact button.add_contact:hover, div.editing input.add_contact:hover, div.editing button.add_contact:hover, a.round:hover, input.round:hover, button.round:enabled:hover, button.recent_ord:hover, div.email-list div.new_contact input.add_contact:hover, div.email-list div.new_contact button.add_contact:hover {
	background-color: rgba(155, 195, 232, 0.51);
    border: 1px solid rgba(12, 77, 139, 0.33);
	cursor:pointer;
}
div.form-group button.add_contact:hover {
	background-color: #2e4d862b;
    border: 1px solid rgba(12, 77, 139, 0.33);
	cursor:pointer;
}
div.form-group.orders .order_link {
	display: flex;
    flex-direction: row;
	text-decoration: none;
	align-items: center;
}
div.form-group.orders div.order_link {
	font-weight: bold;
    padding: 7px 4px;
    background: #fafafa;
}
div.form-group.orders a.order_link {	
    border-top: 1px solid lightgray;
}
div.form-group.orders a.order_link:hover {
	text-decoration: none;
	background-color:#c8dbff1a;
}
a.order_link span:not(.order_status) {
	text-align:left;
	color:black;
}
a.order_link span {
	padding: 8px 4px;
}
.order_link span svg {
	width:14px;
}
.order_link span.order_status {
	text-align:right;
	flex:.05;
}
.order_link span.order_name {
	flex:.5;
}
.order_link span.order_date {
	flex:.2;
}
.order_link span.order_total {
	flex:.25;
}
button.round:disabled, button.round:disabled:hover {
	cursor:default;
}
.light-blue {
	background-color:#CBE1E8;
	border:1px solid #5EA8BB;
}
input.round, button.round, a.round {
	border-radius:3px;
	cursor:pointer;
	-webkit-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}
input.round.bold, button.round.bold, a.round.bold {
	font-size:13px;
	text-transform:uppercase;
	font-weight:600;
	border-radius:8px;
	margin: 8px 3px;
}

/* Old gen_report styles removed - using global button.gen_report instead */
tr.d0 td div.editing span:hover, tr.d1 td div.editing span:hover, tr.selected td div.editing span:hover, .edit_elem:hover, span.edit_elem:hover {
	border-color:rgb(153,153,153);
	background-color:rgb(228,228,228);
	-webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
tr.top {
	background-color:#0c4d8b;
	border-top:1px solid #0c4d8b;
	border-left:1px solid #0c4d8b;
	border-right:1px solid #0c4d8b;
	color:#FFF;
	padding:1%;
	font-size:14px;
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	text-indent:4px;
	border-top-left-radius:4px;
	border-top-right-radius:4px;
	box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;
}
.notes {
	display:block;width:130px;text-align:center;background:lightblue;border:1px solid #999;
}
.notes:hover {
	background-color:#BCE9FE;
}
.title_bar {
	position:relative;padding:35px 10px 10px 10px;background:#F0F0F0 url(../galleria/themes/azur/bg.png);-webkit-box-shadow: 0 8px 8px -6px gray;-moz-box-shadow: 0 8px 8px -6px gray;box-shadow:0 8px 8px -6px gray;
}
div.editing span.edit_elem {
	display:inline-block;
	top:-1px;
	cursor:pointer;
}
i.print_hover,i.delete_hover,i.dup_hover,i.plant_ind,i.link_hover, i.recode_hover {
	font-size:18px;
	color:#333;
	cursor:pointer;
}
i.recode_hover {
	margin-left:5px;
}
div.prd_loc {
	display:inline-block;
	margin-left:5px;
}
table#prod_setup div.prd_loc {
	margin-left:0px;
}
i.plant_ind {
	cursor:auto;
	color: #0c4d8b;
}
i.plant_ind.wr_plant {
	color:brown;
}
div.prd_loc {
	position:relative;
	text-align: center;
}
div.loc_let {
	position: absolute;
    font-weight: bold;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    color: #FFF;
    cursor: auto;
    text-align: center;
    width: auto;
	font-size: 10px;
    line-height: 1;
}

/* Search-result plant pill — used by srch_prd's result rendering and by
   the orders-page top search. The map-marker icon is no longer in the
   markup; this rule turns the .prd_loc.srch_plant container into a
   clean 3-letter-abbreviation badge (SPO, YAK, LEW, GEN) matching the
   catalog page's convention. The legacy `div.loc_let` rule above still
   absolute-positions itself for the line-item display in grp_table; we
   reset it to static for this badge. */
div.prd_loc.srch_plant {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 22px;
	padding: 0 6px;
	border-radius: 6px;
	background: #0c4d8b;
	color: #ffffff;
	margin: 0;
	flex-shrink: 0;
	line-height: 1;
}
div.prd_loc.srch_plant > .loc_let {
	position: static;
	transform: none;
	top: auto;
	left: auto;
	width: auto;
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
}
tr.rb i.delete_hover {
	font-size:14px;
}
i.dup_hover {
	font-size:18px;
}
.print_hover:hover {
	color:#000;
}
.delete_hover:hover {
	color:#CC0003;
}
.recode_hover:hover {
	color:#00A9CC;
}
.dup_hover:hover {
	color:#000000;
}
.link_hover:hover {
	color:#000A5E;
}
.x_close, .x_email, .cus_close, .x_delete, .x_key, .lpb_close, .lpb_delete, .lpb_save, .x_qb, .x_history {
	position:relative;display:inline-block;padding:9px 12px 8px 4px;text-align:center;font-size:16px;cursor:pointer;top:0px;right:0px;
}
#edit_line input:not([readonly]), #edit_line select, #edit_line textarea, table#grp_table #edit_line input:not([readonly]), table#grp_table #edit_line select, table#grp_table #edit_line textarea {
	border-radius: 8px;
	background: #ffffffcc;
    backdrop-filter: blur(3px);
	padding: 5px 8px 5px 8px;
	font-weight: normal;	
    font-size: 12px;
}
table#grp_table td.trash {
	min-width:80px;
}
.cus_close, .x_delete, .x_key, .x_qb {
	padding:8px 12px;
	top:0px;
	right:0px;
}
.lpb_close, .lpb_save, .lpb_delete {
	padding: 16px;
}
.cus_close {
	padding-left: 11px;
}
.x_email, .x_delete, .lpb_delete, .x_key, .x_qb, .x_history {
	border-top-right-radius:0px;
	right:auto;
}
.x_close:hover, .cus_close:hover, .lpb_close:hover {
	background-color:#ED0003;
}
.lpb_save:hover {
	background-color:#139747;
}
.x_delete, .x_key, .x_qb, .x_history, .cus_close {
	right:auto;
	padding:16px;
}

.lpb_delete {
	right:auto;
}
.x_delete:hover, .lpb_delete:hover {
	background-color:#AB0002;
}
.x_email:hover {
	background-color:#5F8294;
}
.x_key:hover {
	background-color:#069B1C;
}
.x_qb:hover {
	background-color:#2ca01c;
}
.x_history:hover {
	background-color:#4a9eff;
	color:#fff;
}
.title_date {
	margin-right:80px;
}
.title_date_no_buttons {
	margin-right:3px;
	display:inline-block;
	float:right;
}
#p_all {
	margin-bottom:20px;
	position:relative;
	display:block;
}
tr.d0:hover, tr.d1:hover {
	background-color:#B0D2D7;
}
div.cog_load {
	display:none;font-size:20px;color:#333;position:relative;top:0px;left:0px;
}
.cus_data {
	min-width:175px;
	border: 1px solid lightgray;
    border-radius: 12px;
    background: rgba(255, 255, 255, 1.00);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
	overflow:hidden;
}
#cus_panel_srch {
	width:300px;
	display:flex;
	min-width: 300px;
	transition: width 0.5s ease;
}
#cus_cont {
	width:100%;
    padding: 0px 15px;
    min-width: 350px;
	max-width: 950px;
	flex-grow: 1;
	opacity: 0;
	visibility: hidden;
	/*transform: translateX(20px);*/
	transition: all 0.5s ease;
  	transition-behavior: allow-discrete;
	box-sizing: border-box;
	z-index:1;
	position:relative;
	/*display:none;*/
}
#cus_flex.active #cus_cont {
	opacity: 1;
  	visibility: visible;
	display:block;
}
@starting-style {
  #cus_flex.active #cus_cont, #cus_flex #cus_cont {
    opacity: 0;
  	transform: translateX(0px);
  }
}
.cus_body {
	padding: 15px 20px 20px;
	display:flex;
	flex-wrap:wrap;
	box-sizing:border-box;
	gap:10px;
}
.sales_contact_title {
	margin-top:10px;
	color: #2c3e50;
}
.form-group, .button-group {
	margin-bottom: 20px;
	position: relative;
	text-align: left;
}
.button-group {
	margin-bottom:10px;
}
.cus_row .form-group {
	margin-bottom:0px;
}
.cus_row {
	padding: 4px 5px 7px;
    margin-bottom: 5px;
    border-radius: 5px;
}
.cus_row .form-group input {
	font-size:13px;
}
.cus_row .form-group.name {
	flex:.7;
}
.cus_row .form-group.email {
	flex:1.3;
}
.form-group input, .form-group select, .form-group textarea {
	width: 100%;
	padding: 2px 0px;
	border: none;
	border-bottom: 1px solid #e8e8e8;
	border-radius: 0;
	font-size: 14px;
	transition: all 0.3s ease;
	background: transparent;
	position: relative;
}

.form-group input:not(:read-only):focus, .form-group select:not(:read-only):focus, .form-group textarea:not(:read-only):focus {
	outline: none;
	border-bottom-color: #667eea;
	transform: translateY(-1px);
}

.form-group input.phone {
	min-width: 110px;
}

.form-group input:read-only {
  	border: 0; /* No border for read-only inputs */
}

.form-group input:not(:read-only):focus::after, .form-group select:not(:read-only):focus::after, .form-group textarea:not(:read-only):focus::after {
	transform: scaleX(1);
}

.form-group::after {
	content: '';
	position: absolute;
	bottom: -3px;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(135deg, #2e4d86 0%, #c8d4e1 100%);
	transform: scaleX(0);
	transition: transform 0.3s ease;
	transform-origin: left;
}

.fade-out-bottom {
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.fade-out-top-bottom {
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.form-group :input:focus-within::after {
	transform: scaleX(1);
}

.form-group label {
	display: block;
	margin-bottom: 2px;
	font-weight: 500;
	color: #555;
	font-size: 12px;
}
div#cus_flex {
	transition: all 0.5s ease;
}
div.cd0, div.cd1 {
	position:relative;margin:3px 0px;padding:10px 28px 10px 12px;font-weight:600;display:inline-block;width:100%;vertical-align:top;border-radius:12px;background-color: rgb(255 255 255 / 46%);border: 1px solid #bababa;box-sizing:border-box;cursor:pointer;transition: all 0.25s ease;color: #434343;
}
div.cus_sel {
	border-color: #2e4d86;
    background: #2e4d860d;
    color: #0c4d8b;
    font-size: 14px;
    transform: scale(1.05);
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.10);
}
div.cus_sel:hover {
	background-color:#c8dbff1a;
}
div.cus_init div.acct_logo svg path {
	fill:#111 !important;
}
div.hub_cus:not(.cus_sel):hover div.cus_init div.acct_logo svg path {
	fill:#111 !important;
}
div.cus_sel div.cus_init div.acct_logo svg path {
	fill:#fff !important;
}
.avatar i {
	font-size:.7rem;
}
.avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #f2f2f2;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #111;
	font-size: .7rem;
	font-weight: bold;
	margin-right: 10px;
	position: relative;
	overflow: hidden;
	flex-shrink: 0;
	transition: all 0.3s ease;
}
div.cus_sel .avatar {
	background: #0c4d8b;
	color:white;
}
div.hub_cus:not(.cus_sel):hover .avatar {
	background: #e1e1e1;	
}
.avatar::after {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: conic-gradient(transparent, rgba(255,255,255,0.3), transparent);
	animation: rotate 3s linear infinite;
	opacity: 0;
	transition: opacity 0.3s;
}

.hub_cus:hover .avatar::after {
	opacity: 1;
}
div.live_inv {
	gap:10px;
	margin-bottom: 20px;
}
div.live_inv_field {
	font-size:14px;
}
div.live_inv div.status-card {
	background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 12px;
    padding: 15px 10px 10px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid #e8e8e8;
    position: relative;
    overflow: hidden;
	width: 100px;
    box-sizing: border-box;
	width: 31%;
}
div.live_inv div.status-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;	
    flex-wrap: wrap;
}
div.live_inv div.status-value {
    font-size: 20px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 8px;
}
div.live_inv div.status-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #666;
	min-width: 150px;
}
div.live_inv div.status-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    transition: all 0.3s ease;
}
div.live_inv div.status-icon {
    width: 32px;
    height: 32px;
	min-width:32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.status-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
/*.status-customer-ready::before {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}
.status-moh::before {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.status-repair::before {
    background: linear-gradient(135deg, #fd7e14 0%, #e91e63 100%);
}
.status-second::before {
    background: linear-gradient(135deg, #ffc107 0%, #ff8f00 100%);
}
.status-available::before {
    background: linear-gradient(135deg, #17a2b8 0%, #007bff 100%);
}
.status-quoted::before {
    background: linear-gradient(135deg, #6f42c1 0%, #e83e8c 100%);
}*/
.status-customer-ready .status-icon {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
}
.status-moh .status-icon {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
}
.status-repair .status-icon {
    background: rgba(253, 126, 20, 0.1);
    color: #fd7e14;
}
.status-second .status-icon {
    background: rgba(255, 193, 7, 0.1);
    color: #ffc107;
}
.status-available .status-icon {
    background: rgba(23, 162, 184, 0.1);
    color: #17a2b8;
}
.status-quoted .status-icon {
    background: rgba(111, 66, 193, 0.1);
    color: #6f42c1;
}
div.live_inv div.status-customer-ready:hover {
	border-color: #28a745;
}
div.live_inv div.status-moh:hover {
	border-color: #667eea;
}
div.live_inv div.status-repair:hover {
	border-color: #fd7e14;
}
div.live_inv div.status-second:hover {
	border-color: #ffc107;
}
div.live_inv div.status-available:hover {
	border-color: #17a2b8;
}
div.live_inv div.status-quoted:hover {
    border-color: #6f42c1;
}
div.action-header {
	display:flex;
}
span.action-icon {
	font-size: 14px;
    padding: 2px;
    color: #2c3e50;
    cursor: pointer;
	transition: all 0.3s ease;
}
span.action-icon:hover {
	transform:scale(1.02);
}

@keyframes rotate {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
/* Empty State Design */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	text-align: center;
	padding: 48px;
	color: #64748b;
	position: relative;
}

.empty-state-content {
	position: relative;
	max-width: 420px;
	margin-bottom: 80px;
}

.search-icon {
	width: 120px;
	height: 120px;
	margin: 0 auto 32px;
	background: #ffffff;
	border: 2px solid #e2e8f0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: float 6s ease-in-out infinite;
	box-shadow: 0 4px 20px rgba(148, 163, 184, 0.1);
}

@keyframes float {
            0%, 100% { transform: translateY(0px) scale(1); }
            50% { transform: translateY(-3px) scale(1.02); }
        }

        @keyframes orb1 {
            0%, 100% { transform: translate(0px, 0px); opacity: 0.4; }
            25% { transform: translate(15px, -10px); opacity: 0.6; }
            50% { transform: translate(-8px, -20px); opacity: 0.3; }
            75% { transform: translate(-12px, 5px); opacity: 0.5; }
        }

        @keyframes orb2 {
            0%, 100% { transform: translate(0px, 0px); opacity: 0.3; }
            25% { transform: translate(-18px, 8px); opacity: 0.5; }
            50% { transform: translate(10px, 15px); opacity: 0.4; }
            75% { transform: translate(20px, -5px); opacity: 0.6; }
        }

        @keyframes orb3 {
            0%, 100% { transform: translate(0px, 0px); opacity: 0.2; }
            33% { transform: translate(12px, 18px); opacity: 0.4; }
            66% { transform: translate(-15px, 10px); opacity: 0.5; }
        }

        .floating-orbs {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            overflow: hidden;
        }

        .orb {
            position: absolute;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(46, 77, 134, 0.06) 0%, rgba(46, 77, 134, 0.02) 100%);
            border: 1px solid rgba(46, 77, 134, 0.08);
            backdrop-filter: blur(20px);
            box-shadow: 
                0 8px 32px rgba(46, 77, 134, 0.04),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
        }

        .orb:nth-child(1) {
            width: 120px;
            height: 120px;
            top: 15%;
            left: 10%;
            animation: orb1 16s ease-in-out infinite;
        }

        .orb:nth-child(2) {
            width: 80px;
            height: 80px;
            top: 55%;
            right: 15%;
            animation: orb2 20s ease-in-out infinite reverse;
        }

        .orb:nth-child(3) {
            width: 160px;
            height: 160px;
            bottom: 20%;
            left: 20%;
            animation: orb3 24s ease-in-out infinite;
        }

        .orb:nth-child(4) {
            width: 100px;
            height: 100px;
            top: 35%;
            right: 25%;
            animation: orb1 18s ease-in-out infinite reverse;
            animation-delay: -6s;
        }

        .orb:nth-child(5) {
            width: 60px;
            height: 60px;
            bottom: 35%;
            right: 8%;
            animation: orb2 22s ease-in-out infinite;
            animation-delay: -10s;
        }

.search-icon svg {
	width: 60px;
	height: 60px;
	fill: #0c4d8b;
}

.empty-state h3 {
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 16px;
	color: #1e293b;
}

.empty-state p {
	font-size: 14px;
	color: #64748b;
	line-height: 1.6;
	margin-bottom: 32px;
}

.quick-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

.action-button {
	padding: 12px 16px;
	background: #ffffff;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	color: #374151;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	transition: all 0.3s ease;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	flex: 1;
    box-sizing: border-box;
    min-width: calc(50% - 12px);
}

.action-button:hover {
	background: #0c4d8b;
	color: white;
	border-color: #0c4d8b;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(46, 77, 134, 0.15);
}

.stats-preview {
	position: relative;
	display: flex;
	justify-content: space-around;
	border-radius: 12px;
	padding: 20px;
    width: 90%;
    max-width: 300px;
}

.stat-item {
	text-align: center;
}

.stat-number {
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 4px;
	color: #1e293b;
}

.stat-label {
	font-size: 12px;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
div#cus_cont_empty {
	position: absolute;
    width: 100%;
	box-sizing: border-box;
	max-width:900px;
}
div.cus_panel_fixed {
    width: 370px;
	transition: width 0.5s ease;
	text-align:left;
	display:flex;
	flex-wrap:wrap;
}
div.cus_boxes {
	min-width: 250px;
    width: 55%;
    text-align: left;
	display:block;
}
/* When the Active/Hold/Require PO checkboxes are rendered as .sch-pill toggles,
   keep them on a single row inside the (flex, centered) blue edit header instead
   of letting them wrap. Overrides the block/width above via higher specificity. */
.cus_top div.cus_boxes.sch-pills {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 6px;
	width: auto;
	flex: 1 1 auto;
	min-width: 0;
	padding-top: 0;
}
.cus_top div.cus_boxes.sch-pills .sch-pill { flex: 0 0 auto; }
/* The default .sch-pill checked state is brand-blue, which would blend into the
   blue .cus_top header. Re-skin for this header so BOTH states read clearly and
   differ from the header colour:
     • inactive → translucent "ghost" white pill
     • active   → solid white pill, blue label + blue check disc            */
.cus_top .sch-pill {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.45);
	color: #fff;
}
.cus_top .sch-pill::before { border-color: rgba(255, 255, 255, 0.65); }
.cus_top .sch-pill:hover {
	background: rgba(255, 255, 255, 0.26);
	border-color: rgba(255, 255, 255, 0.8);
	color: #fff;
}
.cus_top .sch-pill:hover::before { border-color: #fff; }
.cus_top .sch-pill:has(input:checked) {
	background: #fff;
	border-color: #fff;
	color: #0c4d8b;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.20);
}
.cus_top .sch-pill:has(input:checked):hover {
	background: #eaf1f9;
	border-color: #eaf1f9;
	color: #0c4d8b;
}
.cus_top .sch-pill:has(input:checked)::before {
	background: #0c4d8b;
	border-color: #0c4d8b;
	color: #fff;
}
[data-theme="dark"] .cus_top .sch-pill:has(input:checked) { background: #e2e8f0; color: #0c4d8b; border-color: #e2e8f0; }
[data-theme="dark"] .cus_top .sch-pill:has(input:checked)::before { background: #0c4d8b; border-color: #0c4d8b; color: #fff; }
div.cus_boxes input {
	accent-color: #FFF;
}
.cus_top {
	display:flex;
	vertical-align:middle;
	align-items: center;
	position:relative;
	top:0px;
	left:0px;
	width:100%;
	background-color:#0c4d8b;
	padding:0px;
	color:#FFF;
	overflow: hidden;
}
.cd0:not(.no_hover):not(.cus_sel):hover, .cd1:not(.cus_sel):not(.no_hover):hover, .cd0.draft:hover, .cd1.draft:hover, .cd0.final:hover, .cd1.final:hover {
	background-color: rgba(12, 77, 139, 0.18);
    border-color: #0c4d8b;
}
div.hub_cus:not(.cus_sel):hover {
	background-color: rgb(222 229 236 / 18%) !important;
    border-color: #0c4d8b !important;
	transform:translateY(-1px) scale(1.01);
	color: #2e4d86;
}
div.add_space {
	margin-bottom:6px;
}
div#search-box-icon, div#search-box-filter-icon {
	display: block;
	width: 0px;
	position: absolute;
	color: #CCC;
	font-size: 20px;
	transition: all 0.3s ease;
}
div#search-box-filter-icon {
	cursor:pointer;	
}
div#search_filters {
	text-align: center;
    width: 98%;
	margin-top:3px;
    position: absolute;
    box-sizing: border-box;
    padding: 0px 10px 10px;
	background: rgba(255, 255, 255, 0.5); /* Semi-transparent white for glass effect */
    backdrop-filter: blur(12px); /* Frosted glass blur */
    -webkit-backdrop-filter: blur(12px); /* Safari support */
    border-radius: 12px; /* Rounded corners */
    border: 1px solid rgba(0, 0, 0, 0.1); /* Subtle border */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	opacity: 0;
	visibility: hidden; /* Hide element without breaking animations */
    pointer-events: none; /* Prevent interaction when hidden */
	transform: translateX(90px) translateY(-85px) scale(.35);
	transition: all 0.3s ease;
}
div#search_filters.active {
	transform:translateY(0px) scale(1);
	visibility: visible; /* Show element */
    pointer-events: auto; /* Allow interaction when visible */
	opacity: 1;
	display:block;
}

.cus-section {
	background: white;
	border-radius: 12px;
	padding: 15px 18px 2px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	box-sizing:border-box;
	text-align: left;
	border: 1px solid lightgray;
	flex: 1 1 calc(50% - 5px);
}

.cus-section:hover {
	/*transform: translateY(-4px);*/
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
	border-color:#0c4d8b;
}

.cus-section-title {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 10px;
	color: #2c3e50;
	padding-bottom: 8px;
	margin-top:0px;
	flex: 1;
}
.form-row, .cus_row {
	display:flex;
	gap:0 15px;
	flex-wrap:wrap;
	position:relative;
	min-width: 250px;
}
div.cus_row div.contact_num {
	position: absolute;
    left: -13px;
    font-size: 9px;
    font-weight: bold;
    padding: 1px 4.5px;
    border-radius: 9px;
    border: 1px solid #0c4d8b;
    color: #0c4d8b;
	margin-top: 3px;
}
div.form-group .cus_row:hover {
	background-color:#c8dbff1a;
}
.cus_row:nth-child(odd) { background: rgba(99,99,99,0.03); }

/* light pole base submittal styles for grouped items */
table#grp_table div#edit_line {
	div.j_pat {
		left:55%;
	}
	div.pvc_op {
		left:58%;
		top:105px;
	}
	div.pvc-cam-arrow {
		left: -104px;
		width: 100px;
	}
	select[name=jbolts] {
		top:0px;
		left:3px;
	}
	select[name=con_dist] {
		top:159px;
		left:278px;
	}
	select[name=b_ring] {
		top: 60px;
		left: 3px;
		max-width: 115px;
	}
	div.ext-rebar-div {
		top: 98px;
    	left: 3px;
	}
	div.ext-rebar-arrow {
		top: -24px;
    	left: 152px;
		width:80px;
		height:45px;
	}
	div.ext-rebar {
		top: -40px;
    	left: 156px;
		height:35px;
		width:108px;
	}
	div[name=rebar] {
		top:142px;
		left:5px;
	}
	div[name=conduit] {
		top:244px;
		left:5px;
	}
	div#ground-wire {
		left:24px;
	}
	div.lpb_width {
		top:563px;
		left:189px;
	}
	div.lpb_height {
		top:403px;
		left:292px;
	}
	div#lpb_side {
		height:615px;
	}
}
/* light pole base submittal styles for standard line items */
div#edit_line {
	div.j_pat {
		left:207px;
		top:0px;
	}
	div.pvc_op {
		left:207px;
		top:120px;
	}
	select[name=jbolts] {
		top:5px;
		left:8px;
	}
	select[name=con_dist] {
		top:159px;
		left:315px;
	}
	select[name=b_ring] {
		top: 70px;
		left: 8px;
		max-width: unset;
	}
	div.ext-rebar-div {
		top: 112px;
    	left: 8px;
	}
	div[name=rebar] {
		top:159px;
		left:8px;
	}
	div[name=conduit] {
		top:265px;
		left:8px;
	}
	div#ground-wire {
		width:360px;
		height:370px;
		left:45px;
		top:-370px;
	}
	div.lpb_width {
		top:614px;
		left:210px;
	}
	div.lpb_height {
		top:423px;
		left:328px;
	}
	textarea[name=ord_notes] {
		max-width: 100%;
    	box-sizing: border-box;
	}
	div#lpb_side {
		height:670px;
	}
}

i.grp_srt {
	display:none;
	position: absolute;
    top: 1px;
    right: 3px;
    font-size: 14px;
    cursor: move;
}
table#grp_table tbody tr:hover i.grp_srt {
	display:block;
}

.expand {
	padding:4px;
}
span.ord {
	position:absolute;right:6px;cursor:pointer;top:5px;font-size:18px;
}
#email_to .contact-list div.row span.ord {
	position:relative;
	top:auto;
	right:auto;
}
button.recent_ord, a.recent_ord {
	font-size:11px;display:block;margin:3px 0px;border-radius:0px;font-weight:600;
}
a.recent_ord {
	display:inline-block;
	color:#000;
}
a.recent_ord:hover {
	text-decoration:none;
}
tr.top td div a {
	color:#FFF;
}
i.mod {
	font-size:18px;display:inline-block;color:#333;cursor:pointer;margin-left:5px;
}
i.edit:hover {
	color:#04131B;
}
i.add:hover {
	color:#1A6305;
}
i.kill:hover {
	color:#BB0003;
}
div.top_left, div.top_right {
	width:50%;
	vertical-align:top;
	text-align:left;
	display:inline-block;
}
div.top_left {
	/*background-color: #c1dce0;*/
    padding: 2%;
    width: 42%;
	margin-right:4%;
    border: 1px dotted #999;
    box-sizing: border-box;
	background: rgba(187, 176, 157, 0.38) url(../galleria/themes/azur/bg.png);
}
div#edit_line span.title {
	font-size:16px;
	font-weight:600;
	display:block;
}
.buf_right {
	margin-right:8px;
}
span.weight_e, span.weight_t {
	font-size:14px;
}
div.line, div#lpb_side {
	display:block;
	margin-top:5px;
	margin-bottom:5px;
}
div.wzone {
	vertical-align: top !important;
}
div.top_right div.line select, div.top_right div.line input, div#bottom_left select, div#bottom_left input, div#lpb_side select, div#lpb_side input {
	font-size:12px;
	margin-bottom:2px;
}
div#lpb_side {
	background-size:98%;height:670px;background-repeat:no-repeat;background-position:right 20px;position:relative;
}
div.edit_bar {
	background-color: #0c4d8b;
    color: #FFF;
    padding: 0;
    font-size: 14px;
    position: relative;
    top: 0px;
    width: 100%;
	box-sizing: border-box;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
	text-align:center;
	display:flex;	
	overflow: hidden;
}
div.edit_bar_title {	
	width:32%;
	text-align:left;
	font-weight:bold;
	padding:15px;
}
table#order_list, table#report_list {
	border:0px;
	background-color:transparent;
	margin-top:10px;
}
table#order_list {
	margin-top:0px;
	padding-top:0px;
}
table#report_list {
	margin-top:0px;
	padding-top:0px;
}
div.rep_content {
	width:100%;text-align:center;max-height:75%;margin-top:20px;
}
table#order_list td, tr#delivery {
    padding-top: 4px;
    padding-bottom: 4px;
}
table#order_list tbody td {
	text-align:left;
}
tr#delivery {
	background-color: #f8fafc;
	padding: 0px;
	margin: 0px;
}
div.delivery_head {
	position:absolute;
	display:block;
	padding:10px;
	font-weight:600;
	font-size:11px;
	top: -37px;
}
/* ── Delivery rates card ── */
div.dlv_order {
	position: relative;
	display: flex;
	flex-direction: column;
	font-weight: 500;
	font-size: 12px;
	margin-top: 0;
}
div.dlv-rates-card {
	background-color: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 10px 14px;
}
div.dlv-rate-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 3px 0;
	font-size: 12px;
	color: #64748b;
}
span.dlv-rate-label {
	font-weight: 500;
}
span.dlv-rate-val {
	display: inline-flex;
	align-items: baseline;
	font-weight: 600;
	color: #334155;
	font-variant-numeric: tabular-nums;
	min-width: 80px;
	justify-content: flex-end;
}
div.dlv-rate-row.dlv-rate-sur {
	padding: 4px 0 3px;
}
/* Surcharge pill — compact clickable chip */
label.dlv-sur-pill {
	display: inline-flex;
	align-items: center;
	gap: 0;
	padding: 3px 10px;
	border-radius: 100px;
	border: 1px solid #e2e8f0;
	background-color: #f1f5f9;
	cursor: pointer;
	user-select: none;
	transition: all 0.15s ease;
	opacity: 0.6;
}
label.dlv-sur-pill input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}
.dlv-sur-check {
	font-size: 8px;
	margin-right: 4px;
	color: #94a3b8;
	opacity: 0;
	transform: scale(0.5);
	transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease;
}
label.dlv-sur-pill.active .dlv-sur-check {
	opacity: 1;
	transform: scale(1);
	color: #0c4d8b;
}
.dlv-sur-pill-label {
	font-size: 11px;
	font-weight: 600;
	color: #94a3b8;
	letter-spacing: 0.01em;
}
/* Active pill state */
label.dlv-sur-pill.active {
	background-color: rgba(12, 77, 139, 0.08);
	border-color: rgba(12, 77, 139, 0.2);
	opacity: 1;
}
label.dlv-sur-pill.active .dlv-sur-pill-label {
	color: #0c4d8b;
}
label.dlv-sur-pill:hover {
	border-color: #cbd5e1;
	opacity: 1;
}
/* Dollar sign prefix */
.dlv-dollar {
	color: #94a3b8;
	font-weight: 500;
	font-size: 12px;
	margin-right: 1px;
}
div.dlv-rate-row.dlv-rate-total .dlv-dollar {
	font-size: 14px;
	color: #64748b;
}
/* Legacy checkbox fallback — hide if toggle is present */
div.dlv-rate-row.dlv-rate-sur label:not(.dlv-toggle) {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	font-weight: 500;
	color: #64748b;
	margin: 0;
}
div.dlv-rate-row.dlv-rate-sur input[type="checkbox"]:not(.dlv-toggle-track input) {
	accent-color: #0c4d8b;
	width: 14px;
	height: 14px;
	cursor: pointer;
	margin: 0;
}
div.dlv-rate-divider {
	height: 1px;
	background-color: #e2e8f0;
	margin: 4px 0;
}
div.dlv-rate-row.dlv-rate-total span.dlv-rate-label {
	color: #334155;
	font-weight: 600;
	font-size: 13px;
}
div.dlv-rate-row.dlv-rate-total span.dlv-rate-val {
	font-size: 15px;
	color: #0f172a;
	font-weight: 700;
}
div.dlv-rate-row.dlv-rate-total span.dlv-rate-val input.no_style {
	font-size: 15px;
	font-weight: 700;
	color: #0f172a;
	width: 70px;
	text-align: right;
	padding: 4px 6px;
	border: 1px solid transparent;
	border-radius: 5px;
	background-color: transparent;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
div.dlv-rates-card input.no_style {
	font-size: 12px;
	font-weight: 600;
	color: #334155;
	border: 1px solid transparent;
	border-radius: 5px;
	background-color: transparent;
	padding: 4px 6px;
	width: 60px;
	text-align: right;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
div.dlv-rates-card input.no_style:hover {
	background-color: #f8fafc;
	border-color: #e2e8f0;
}
div.dlv-rates-card input.no_style:focus {
	outline: none;
	background-color: #fff;
	border-color: #6ba3d6;
	box-shadow: 0 0 0 3px rgba(12, 77, 139, 0.08);
}
div.dlv_order button {
	padding: 8px 16px;
	font-size: 12px;
	font-weight: 600;
	background-color: #0c4d8b;
	color: #fff;
	border: 1px solid #0a3d6e;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.15s ease;
	white-space: nowrap;
}
div.dlv_order button:hover {
	background-color: #0a3d6e;
	box-shadow: 0 2px 4px rgba(12,77,139,0.2);
}
div#bottom_left {
	background-size:57%;height:241px;background-repeat:no-repeat;background-position:left 20px;position:absolute;width:45%;top:465px;margin:2%;left:20px;
}
input.ro, div.lpb_width input, div.lpb_height input {
	background-color:transparent;
	border:0px;
}
input.ro {
	padding:4px 2px;
}
#d_base {
	background-size:100%;text-align:center;width:50%;height:110px;background-repeat:no-repeat;background-position:center 0px;float:right;
}
div.top_left div.line {
	margin-top:3px;
	margin-bottom:3px;
}
div.top_left div.top {
	margin-top:10px;
}
div.edit_single {
	height:42px;background: rgba(148, 139, 123, 0.38) url(../galleria/themes/azur/bg.png);margin-bottom:15px;padding-top:10px;position:relative;top:-1px;text-align:center;
}
table#ao_table tr td.draft {
	padding-left:5px;
}
table#ao_table tr td.lost {
	padding-left:4px;
}
table#ao_table tr td.sales_order {
	padding-left:4px;
}
td.draft i, td.submitted i, td.approved i, td.lost i, td.in_prod i, td.delivered i, td.idle i {
	font-size: 16px;
    box-sizing: border-box;
    padding: 0px 4px;
	opacity:0.7;
    color: rgba(107, 55, 0, 0.83);
}
.order_link span.draft i, .order_link span.submitted i, .order_link span.approved i, .order_link span.lost i, .order_link span.in_prod i, .order_link span.idle i, .order_link span.delivered i {
	opacity:0.7;
    color: rgba(107, 55, 0, 0.83);	
}
td.draft, td.submitted, td.approved, td.lost, td.in_prod, td.idle {
	text-align:left;
}
td.sales_order img, td.sales_order svg {
	width: 17px;
    padding: 0px 5px 0px 1px;
}
td.sales_order svg path.qb_logo, .order_link span.sales_order svg path.qb_logo {
	fill:rgb(44, 160, 28);
}
td.sales_order svg path.sage_logo, .order_link span.sales_order svg path.sage_logo {
	fill:#52AF38;
}
td.sales_order.pending svg path, .order_link span.sales_order.pending svg path {
	fill:rgb(100, 105, 100);
}
.order_link span.idle i {
	color: rgb(152 97 7);
	opacity:1.0;
}
.order_link span.lost i {
	color: rgba(91, 107, 0, 0.96);
	opacity:1.0;
}
.order_link span.approved i {
	color: rgba(38, 148, 68, 0.88);
}
.order_link span.in_prod i {
	color: rgba(0, 0, 0, 0.95);
}
.order_link span.delivered i {
	color: #0c4d8b;
}
tr.cd1.draft {
	background: rgba(167, 93, 15, 0.25);
}
tr.cd0.draft {
	background: rgba(167, 93, 15, 0.17);
}
td.submitted i {
    padding: 0px 5px 0px 1px;
    color: rgb(7, 107, 128);
}
td.delivered i {
    padding: 0px 7px 0px 0px;
    color: #0c4d8b;
}
td.lost i {
	color: rgba(91, 107, 0, 0.96);
	opacity:1.0;
}
td.idle i {
	color: rgb(152 97 7);
	opacity:1.0;
	padding-left:2px;
}
tr.cd1.approved {
	background: rgba(138, 241, 166, 0.28);
}
tr.cd0.approved {
	background: rgba(138, 241, 166, 0.15);
}
td.approved i {
    padding: 0px 5px 0px 1px;
    color: rgba(38, 148, 68, 0.88);
}
td.in_prod i {
    padding: 0px 4px 0px 2px;
    color: rgba(0, 0, 0, 0.95);
    font-size: 16px;
}
div.approved, div.account_flags {
	background-color: rgba(38, 148, 68, 0.88);
	padding: 10px;
    color: #FFF;
	border-radius: 20px;
}
/* Account flags — modernized chip block (replaces the legacy red banner).
   Soft amber surface so it reads as "heads-up" not "error", with each flag
   as its own pill. Used by salespeople inside an order to surface customer
   notes (tax exemption status, hold flags, special handling). Hidden for
   portal users via the ua > 0 guard in main_.js's goto_(). */
div.account_flags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	padding: 8px 12px;
	margin: 0;
	background: linear-gradient(180deg, #fffaf0 0%, #fff5e0 100%);
	border: 1px solid #f0c87a;
	border-left: 3px solid #d97706;
	border-radius: 8px;
	color: #92400e;
	font-weight: 500;
	font-size: 12px;
	box-shadow: 0 1px 2px rgba(217, 119, 6, 0.04);
}
div.account_flags .account-flags-label {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #92400e;
	flex-shrink: 0;
}
div.account_flags .account-flags-label i {
	font-size: 13px;
	color: #d97706;
}
div.account_flags .account-flags-chips {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
	flex: 1 1 auto;
}
div.account_flags .account-flag-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	background: #fff;
	border: 1px solid #f0c87a;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 500;
	color: #78350f;
	white-space: nowrap;
	transition: background 0.15s ease, border-color 0.15s ease;
}
div.account_flags .account-flag-chip:hover {
	background: #fef3c7;
	border-color: #d97706;
}
div.account_flags .account-flag-chip i {
	font-size: 10px;
	color: #d97706;
}
/* legacy tr#approved rules removed — see .approved-banner in index.php */
.ord_title {
	background-color: #0c4d8b;
    color: #FFF;
    padding:9px;
	font-weight: bold;
    font-size: 14px;
    position: absolute;
    width: 100%;
    left:0px;
	top:-1px;
	margin:0px;
	box-sizing:border-box;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
input.no_style, select.no_style {
	font-size:11px;
	font-weight:600;
	border:0px;
	background:transparent;
	padding:0px;
}
div.jBox-content select.no_style {
	font-size:12px;
	font-weight:600;
	border:0px;
	background:transparent;
	margin:2px 0px;
	border-bottom:1px solid #999;
}
table#dt_table select.no_style {
	color: #000;
    font-size: 14px;
}
select.no_style_bigger {
	font-size:12px;
	font-weight:500;
	border:0px;
	background:transparent;
	padding:0px;
	border-bottom:1px solid #999;
	margin-top: 4px;
}
#table1 div.indiv, #table2 div.indiv, div.log_in, #app_table div.indiv {
	width:auto;
	position:relative;
	display:inline-block;
	top:1px;
}
#table1 div.indiv {
	width:100%;
}
div.price_e, div.price_t {
	font-weight:600;
	letter-spacing:0px;
}
div.price_t {
	position:relative;
	top: 1px;
}
/* Accounting-style price alignment — now in css/order-items.css */
#order_list div.pr_name {
	width:100%;
}
div.price_e input, div.weight_t input {
	width:89%;
}
div.pr_name input, div.pr_qty input {
	width:98%;
}
div.log_in {
	margin-bottom:8px;
}
#table1 input, #table1 select, #table2 input, #table2 select, input.editc_qb, div#pr_setup select, div.add_space select, \#ops input, div.s_date input, div.s_time input, div.s_terms select, #app_table input {
	border:0px;
	border-bottom:1px solid #999;
	background:transparent;
	padding:14px 0px 2px 0px;
	margin:2px 0px 3px 2px;
}
div.s_time input {
	font-size:14px;
	padding-top:7px;
}
div#pr_setup select {
	padding:2px 0px;
	font-weight:600;
}
\#ops div#spr input {
	font-size:20px;
}
div.add_space input[type="text"] {
	border:0px;
	border-bottom:1px solid #999;
	background:transparent;
	padding:8px 0px 2px 0px;
	margin:2px 0px 3px 2px;
	font-size:12px;
	font-weight:600;
}
div.low_line {
	display:inline-block;
	top:0px;
}
div.drop_cc input.editc_qb, div.drop_cc select.editc_qb {
	border-bottom:1px solid #f00;
}
span.cc_res {
	margin-top: 10px;
    position: relative;
    display: block;
	font-weight: bold;
}
span.comp {
	color:#00420F;
}
div.drop_cc input.complete, div.drop_cc select.complete {
	border-bottom:1px solid #007513;
	color:#007513;
}
span.span_so select {
	display:inline-block;
}
select#bases, select#pr_cats, select#pr_plants, input.srch_prd, #order_list [id^=qty], table#details select, table#details input.mail_2, span.span_so input, span.span_so select, .login_container input.login, #tr_pdrw select, div.drag_title input, div.jBox-content input, div.rep_content input {
	border:0px;
	border-bottom:1px solid #999;
	background:transparent;
	padding:4px 0px 2px 0px;
	margin:2px 0px 3px 2px;
}
table#details input.mail_2 {
	margin:3px 0px 3px 2px !important;
}
div.rep_content input, div.rep_content select {
	padding:0px;
	font-size:11px;
	margin:0px;
	background-color:transparent;
}
div.rep_content select {
	border:0px;
}
div.rep_content tr.rb select[name=area] {
	max-width:110px;
}
div.jBox-content input, div.jBox-content div.nc_content select, div.jBox-content div.qbc_content select {
	font-size:12px;
	font-weight:bold;
}
div.jBox-content input[name=prod_hours], div.jBox-content input[name=act_hrs] {
	text-align:center;
}
#order_list [id^=qty] {
	border:0px;
	padding: 0px;
    line-height: 12px;
    margin: 0px;
}
div.pr_qty input {
	font-weight:600;
	font-size:12px;
	text-align:center;
}
div.pr_qty input {
	max-width:70px;
}
div.weight_t input, div.price_e input {
	max-width:90px;
}
div.pr_name input {
	min-width:325px;
}
#tr_pdrw div.weight_t input {
	border-bottom:1px solid rgba(80, 175, 87, 0.85);
}
#tr_pdrw div.prdi_items div.like_prd input {
	border: 0;
	border-radius: 0;
	background-color: transparent;
	padding: 0;
	margin: 0;
	box-shadow: none;
	text-align: left;
	width: auto;
	max-width: none;
}
table#grp_table select {
	border:0px;
}
div.grp_find {
	margin-bottom: 10px;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	overflow: hidden;
	background-color: #fff;
}
div.grp_find_header {
	display: flex;
	align-items: center;
	padding: 8px 12px;
	background-color: #f8fafc;
	border-bottom: 1px solid #e2e8f0;
	gap: 10px;
}
span.grp_find_label {
	font-size: 11px;
	font-weight: 600;
	color: #475569;
	white-space: nowrap;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
div.grp_prd {
	display: flex;
	align-items: center;
	position: relative;
	flex: 0 1 220px;
}
i.grp_find_icon {
	position: absolute;
	left: 9px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 12px;
	color: #94a3b8;
	pointer-events: none;
	z-index: 1;
}
input.grp_find_input {
	border: 1px solid #d1d5db;
	border-radius: 5px;
	padding: 5px 10px 5px 28px;
	font-size: 13px;
	color: #334155;
	outline: none;
	width: 100%;
}
input.grp_find_input:focus {
	border-color: #94a3b8;
	box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.15);
}
div.grp_find div.psrch_res {
	padding: 6px;
	border-top: 1px solid #e2e8f0;
}
div.grp_find div.grp {
	padding: 6px;
	margin-top: 0;
	max-height: 300px;
    overflow-y: auto;
}
div.pr_qty {
	padding:6px 0px;
}
.login_container input.login {
	padding: 12px 8px 5px 8px;
	margin:2px 0px 3px 0px;
}
div.pr_notes {
	display:none;
}
div.pr_notes textarea {
	width: 98%;
	margin-bottom: 10px;
	background-color: #fff;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	font-size: 12px;
	padding: 8px 10px;
	color: #334155;
	font-family: inherit;
	resize: vertical;
	transition: border-color 0.15s ease;
}
div.pr_notes textarea:focus {
	border-color: #94a3b8;
	box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.15);
}
div.pr_notes textarea:focus, div.s_notes textarea:focus, div.s_terms select:focus, button.round:focus, textarea:focus, div.pr_qty input:focus, tr#act_buttons button:focus, table#prod_setup input[type=text]:focus, select, input, textarea, div.jBox-content button:focus, div.jBox-content input:focus, button:focus { outline:none; }

input.no_style:focus, #table1 input:focus, #table1 select:focus, #table2 input:focus, #table2 select:focus, #order_list select:focus, table#details select:focus, table#details input.mail_2:focus, span.span_so input, span.span_so select, .login_container input.login, input.srch_prd, div.cus_data select:focus, div.cus_data input:focus, input.editc_qb:focus, div.add_space select:focus, div.add_space input:focus, \#ops input:focus, tr#delivery select:focus, div.drag_title input:focus { outline:none; }

/* BOTTOM BARS ================================= */
.bar    { position:relative; display:block; width:100%; }
div.price_e span.bar, div.weight_t span.bar, table#grp_table td span.bar, div.pr_qty span.bar, div.pr_name span.bar, div.like_prd span.bar, div.grp_prd span.bar, div.qb_int.so span.bar, table#prod_setup span.bar, tr#new_emp span.bar, tr#new_area span.bar, div.drag_title span.bar, div.jBox-content span.bar {
	top:1px;
	border-bottom:1px solid #999;
	box-sizing: border-box;
}
div.jBox-content span.bar {
	top:-1px;
}
table#prod_setup span.bar, div.pr_field span.bar {
	top:-1px;
}
div.qb_int.so span.bar {
	top:-4px;
}
div.pr_qty span.bar {
	top:0px;
}
div.drag_title span.bar {
	top:0px;
}
div.pr_name span.bar, div.pr_qty span.bar, table#prod_setup span.bar, div.pr_field span.bar { width:100%; }
table#grp_table td span.bar { width:100%; }
table#grp_table td div.grp_save span.bar { width:100%; }
table#grp_table input.weight_grpt ~ span.bar, table#grp_table input.grp_prce ~ span.bar { width:95%; }
.bar:before, .bar:after {
  content:'';
  height:1px;
  bottom:-1px;
  width:0%;
  position:absolute;
  background:#0c4d8b;
  transition:0.2s ease all;
  -moz-transition:0.2s ease all;
  -webkit-transition:0.2s ease all;
}
#table1 .bar:after, #table2 .bar:after {
	height:2px;
  	bottom:2px;
}
table#grp_table input.grp_prce ~ span.bar {
	top:0px;
}
table#grp_table input.grp_prce ~ span.bar:after {
	top:0px;
	height:1px;
}
span.span_so .bar:after {
	height:2px;
  	bottom:2px;
}
.login_container span.bar {
	top:-4px;
	left:0px;
}
.login_container .bar:after {
	height:2px;
}
div.prdi_items .bar {
	bottom:1px;
}
div.s_date .bar, div.s_time .bar {
	top:-4px;
}
div.s_terms .bar {
	top:-4px;
}
.bar:before {
  left:0%;
}
.bar:after {
  left:0%;
}
div.pr_qty .bar:before {
  left:50%;
}
div.pr_qty .bar:after {
  	left:auto;
	right:50%;
}
\#ops div.psrch_res .bar:after {
	bottom:0px;
}

/* active state */
input.no_style:focus ~ .bar:after, input.srch_prd:focus ~ .bar:after, #table1 input:focus ~ .bar:after, #table2 input:focus ~ .bar:after, span.span_so input:focus ~ .bar:after, div.login_container input.login:focus ~ .bar:after, div.qb_int.so input:focus ~ .bar:after, div.qb_int.so select:focus ~ .bar:after, table#prod_setup input:focus ~ .bar:after, div.drag_title input:focus ~ .bar:after, div.jBox-content input:focus ~ .bar:after, div.pr_field input:focus ~ .bar:after {
  width:100%;
}
div.pr_qty input:focus ~ .bar:before, div.pr_qty input:focus ~ .bar:after {
	width:50%;
}
div.pr_name input.no_style:focus ~bar:after {
	width:80%;
}
td.left {
	text-align:left;
}

/* LABEL ======================================= */
#table1 label, #prod_setup label, #table2 label, span.span_so label, div.login_container label, #details label, div#spr label, div.qb_int.so label, div.s_date label, div.s_time label, div.s_terms label, div.s_notes label, tr#new_emp label, tr#new_area label, div.drag_title label, #app_table label, div.adj_item label, div.qty_div label, div.nc_content label, div.qbc_content label, div.aic_content label, div.pr_field label, div.dc_content label {
  color:#999;
  font-size:14px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:2px;
  top:15px;
  transition:0.2s ease all;
  -moz-transition:0.2s ease all;
  -webkit-transition:0.2s ease all;
}

div.nc_content label, div.qbc_content label, div.aic_content label {
	top:0px;
}
div.aic_content label {
	top: 5px;
    left: 11px;
}
div.dc_content label {
	top: 7px;
}

div.drag_title label {
	top:5px;
	left:0px;
	font-weight: bold;
    text-transform: uppercase;
	font-size:12px;
}

#prod_setup label {
	top:-4px;
}
tr#new_emp label, tr#new_area label {
	top:0px;
}
tr#new_emp select ~ label, tr#new_area select ~ label {
	top:3px;
}

#table1 input[name=job_addenda] ~ label {
	top:17px;
}

div.qb_int.so label {
	top:8px;
}

div.qb_int.so select ~ label {
	top:16px;
}

div#spr label {
	top:19px;
	font-weight:bold;
}

div.login_container label {
	left:8px;
}

div#spr {
	display:inline-block;
	position:relative;
	margin-top:10px;
}

div.psrch_res {
	margin-top: 10px;
	max-height: 300px;
	overflow-y: auto;
	text-align: left;
	padding: 4px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
}

div.prdi_items div.psrch_res {
	line-height: 16px;
	max-height: 200px;
	grid-template-columns: 1fr;
}

div.prdi_items div.psrch_res span.srch_cus {
	min-width: 90%;
}

div#spr .bar {
	top:-4px;
	left:2px;
}

#details label {
	top:8px;
}

span.span_so label {
  top:6px;
}

span.group.dates {
	margin: 0 8px;
}

div#report_buttons {
	max-width:1200px;
	margin:0px auto;
	padding: 8px 16px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 12px;
}

div#report_buttons span.span_so {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 0;
}

div#report_buttons span.span_so label {
  	top:4px;
	font-size:11px;
	text-transform: uppercase;
	color: #64748b;
	letter-spacing: 0.03em;
}

div#report_buttons span.span_so span.group.dates input ~ label {
  	font-size:11px;
	text-transform: uppercase;
	color: #64748b;
	letter-spacing: 0.03em;
}

div#report_buttons span.span_so input ~ label {
  	top:4px;
}

div#report_buttons span.span_so span.group.dates input {
  	font-size:14px;
	padding: 6px 8px;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

div#report_buttons span.span_so span.group.dates input:focus {
	border-color: #0c4d8b;
	box-shadow: 0 0 0 3px rgba(12, 77, 139, 0.1);
	outline: none;
}

/* Hide unnecessary line breaks in report filters */
div#report_buttons span.span_so br,
div#report_buttons span.span_so div.clear {
	display: none;
}

/* Hide bar underline in report filters for cleaner look */
div#report_buttons span.span_so span.bar {
	display: none;
}

span.group {
	display: inline-flex;
	flex-direction: column;
	vertical-align: text-bottom;
	position: relative;
}

/* Modern filter group styling for reports */
div#report_buttons span.group {
	margin: 0 4px;
	min-width: 0;
}

div#report_buttons span.group input,
div#report_buttons span.group select {
	min-width: 100px;
}

div#report_buttons span.span_so input[type="text"] {
	padding: 6px 10px;
	font-size: 13px;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

div#report_buttons span.span_so input[type="text"]:focus {
	border-color: #0c4d8b;
	box-shadow: 0 0 0 3px rgba(12, 77, 139, 0.1);
	outline: none;
}

div#report_buttons span.span_so input[type="text"]:hover {
	border-color: #cbd5e1;
}

div#report_buttons span.span_so input::placeholder {
	color: #94a3b8;
	font-size: 12px;
}

/* Keyword search always visible */
div#report_buttons span#search_keyword {
	display: inline-flex !important;
}

/* Index page search filters - Modern styling (matching reports) */
div.s_fields {
	/* max-width: 1200px; */
	margin: 0 auto;
	padding: 12px 16px 11px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 8px 12px;
	background: #fafbfc;
	border-bottom: 1px solid #e2e8f0;
	box-sizing: border-box;
}

div.s_fields span.span_so {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 8px 12px;
	margin: 0;
}

/* Filter-group support within s_fields (inventory page) */
div.s_fields .filter-group {
	display: flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	padding: 0 10px;
	height: 32px;
	transition: all 0.15s ease;
}

div.s_fields .filter-group:focus-within {
	border-color: #0c4d8b;
	box-shadow: 0 0 0 2px rgba(12, 77, 139, 0.1);
}

div.s_fields .filter-group i {
	color: #94a3b8;
	font-size: 12px;
	flex-shrink: 0;
}

div.s_fields .filter-group input {
	border: none;
	background: transparent;
	font-size: 13px;
	font-family: inherit;
	color: #1e293b;
	width: 100px;
	padding: 0;
	outline: none;
}

div.s_fields .filter-group input::placeholder {
	color: #94a3b8;
	font-size: 13px;
}

div.s_fields .filter-group select {
	border: none;
	background: transparent;
	font-size: 13px;
	font-family: inherit;
	color: #1e293b;
	/* small left inset so dropdown/value text isn't flush */
	padding: 0 0 0 6px;
	padding-right: 16px;
	outline: none;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path fill="%2394a3b8" d="M5 6L0 0h10z"/></svg>');
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 8px;
	min-width: 80px;
	height: auto;
}

div.s_fields .filter-group select:focus,
div.s_fields .filter-group input:focus {
	outline: none;
	box-shadow: none;
	border-color: transparent;
}

div.s_fields .filter-group select option {
	color: #1e293b;
	background: #fff;
	padding: 8px 12px;
}

/* Select placeholder styling for s_fields */
div.s_fields .filter-group select option:first-child:disabled,
div.s_fields .filter-group select option[value=""] {
	color: #94a3b8;
}

div.s_fields .filter-group select.placeholder-shown {
	color: #94a3b8;
}

/* Select2 styling for inventory/s_fields */
div.s_fields .select2-container--default .select2-selection--single,
div.s_fields .select2-container--default .select2-selection--multiple {
	border: none;
	background: transparent;
	font-size: 13px;
	font-family: inherit;
	color: #1e293b;
	padding: 0;
	outline: none;
	cursor: pointer;
	height: auto;
	line-height: 1;
	min-height: 0;
}

div.s_fields .select2-container--default .select2-selection--single .select2-selection__rendered,
div.s_fields .select2-container--default .select2-selection--multiple .select2-selection__rendered {
	padding: 0;
	margin: 0;
	line-height: 1;
	font-size: 13px;
	font-family: inherit;
	color: #1e293b;
}

div.s_fields .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: #94a3b8;
	font-size: 13px;
}

div.s_fields .select2-container--default .select2-selection--multiple .select2-selection__choice {
	background: #f1f5f9;
	border: none;
	border-radius: 4px;
	color: #0c4d8b;
	padding: 2px 6px;
	margin: 2px 2px 2px 0;
	font-size: 11px;
	line-height: 1.2;
}

div.s_fields .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
	color: #64748b;
	margin-right: 4px;
}

/* Native multiple select styling for inventory */
div.s_fields .filter-group select[multiple] {
	height: auto;
	min-height: 32px;
	padding: 4px 16px 4px 0;
	background: transparent;
	border: none;
	font-size: 13px;
	font-family: inherit;
	color: #1e293b;
	outline: none;
	cursor: pointer;
	line-height: 1.2;
	border-radius: 6px;
	transition: all 0.2s ease;
}

div.s_fields .filter-group select[multiple]:hover {
	background: rgba(15, 23, 42, 0.02);
}

div.s_fields .filter-group select[multiple] option {
	padding: 10px 12px;
	background: #ffffff;
	color: #1e293b;
	border: none;
	font-size: 13px;
	line-height: 1.5;
	cursor: pointer;
}

div.s_fields .filter-group select[multiple] option:checked {
	background: #0c4d8b;
	color: #ffffff;
	font-weight: 500;
}

div.s_fields .filter-group select[multiple]:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(12, 77, 139, 0.1);
}

/* ----------------------------------------------------------------------
   Office Contact — multi-select with summary
   --------------------------------------------------------------------
   Same pattern as the orders/reports/inventory filter dropdowns: a
   native <select multiple size="1"> overlays a summary <span> that
   shows "Office Contact" / "John Smith" / "2 contacts". The select is
   transparent so the click area still opens the native dropdown.

   Keeps the .indiv tile single-line so the form layout doesn't shift,
   while letting users pick multiple contacts that all sync down to the
   email recipient list. */
/* Office Contact — multi-select with "N contacts" summary
   --------------------------------------------------------------------
   The order info section now uses card-style .indiv tiles (border +
   border-radius + floating label above), defined in index.php:4296+.
   Strategy: leave the .indiv card and the <select> alone — they
   inherit the same box as Delivery Contact / Operations Contact next
   to them. We just:
     1) hide the select's rendered options text (color: transparent),
        keeping option text readable when the dropdown is open
     2) overlay a <span> centered in the card to show the summary text
     3) draw a custom chevron caret (native multi-selects don't render
        a chevron in Chrome). */
table#table1 select.ofc-contact-multi {
	color: transparent !important;
	text-shadow: none;
}
table#table1 select.ofc-contact-multi option {
	color: #1e293b;
}
[data-theme="dark"] table#table1 select.ofc-contact-multi option {
	color: #e2e8f0;
}
table#table1 td div.indiv > select.ofc-contact-multi + .multi-select-summary {
	position: absolute;
	top: 4px;                  /* matches .indiv padding-top */
	bottom: 4px;               /* matches .indiv padding-bottom */
	left: 8px;                 /* matches .indiv padding-left */
	right: 22px;               /* indiv pad-right + caret room */
	margin: 0;
	padding: 6px 0 2px 0;      /* matches the select's own padding so text
	                              renders at the same y as a native select's text */
	box-sizing: border-box;
	background: transparent;
	font-family: inherit;
	font-size: 12px;           /* native <select> renders ~12px in the order info cards */
	line-height: 1.2;
	color: #1e293b;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
	z-index: 1;
}
/* When nothing is picked, hide the summary so the floating "OFFICE
   CONTACT" label is the only thing the user sees in the card. */
table#table1 td div.indiv > select.ofc-contact-multi.placeholder-shown + .multi-select-summary {
	visibility: hidden;
}
[data-theme="dark"] table#table1 td div.indiv > select.ofc-contact-multi + .multi-select-summary {
	color: #e2e8f0;
}
/* Custom chevron caret — native multi-select doesn't draw one. Matches
   the style of the chevron the browser renders on neighbor single
   selects. */
table#table1 td div.indiv:has(> select.ofc-contact-multi)::after {
	content: "";
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 10px;
	height: 6px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6" fill="none" stroke="%231e293b" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 1 5 5 9 1"/></svg>');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	pointer-events: none;
	z-index: 0;
}

div.s_fields span.span_so span.group {
	margin: 0 4px;
	min-width: 0;
}

div.s_fields span.span_so span.group input,
div.s_fields span.span_so span.group select {
	padding: 6px 10px;
	font-size: 13px;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	background: #fff;
	color: #334155;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	min-width: 100px;
	height: 32px;
	box-sizing: border-box;
}

div.s_fields span.span_so span.group input:focus,
div.s_fields span.span_so span.group select:focus {
	border-color: #0c4d8b;
	box-shadow: 0 0 0 3px rgba(12, 77, 139, 0.1);
	outline: none;
}

div.s_fields span.span_so span.group input:hover,
div.s_fields span.span_so span.group select:hover {
	border-color: #cbd5e1;
}

div.s_fields span.span_so span.group input::placeholder {
	color: #94a3b8;
	font-size: 12px;
}

div.s_fields span.span_so span.group.dates input {
	width: 100px;
}

/* Pagination inline wrapper for search bar */
.pagination-inline-wrapper {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin-left: auto;
	padding-left: 1rem;
	border-left: 1px solid rgba(148, 163, 184, 0.2);
	flex-shrink: 0;
}

.pagination-inline-wrapper #orders_pagination {
	display: flex;
	align-items: center;
}

.pagination-inline-wrapper .pagination-per-page {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.75rem;
	color: #64748b;
	margin: 0;
}

.pagination-inline-wrapper .pagination-select {
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	padding: 0.4rem 0.5rem;
	font-size: 0.75rem;
	color: #0c4d8b;
	cursor: pointer;
	transition: all 0.15s ease;
	outline: none;
	font-weight: 500;
	min-width: 48px;
}

.pagination-inline-wrapper .pagination-select:hover {
	background: #fff;
	border-color: #1a6fc9;
}

.pagination-inline-wrapper .pagination-select:focus {
	border-color: #1a6fc9;
	box-shadow: 0 0 0 2px rgba(12, 77, 139, 0.08);
}

.pagination-inline-wrapper .pagination-controls {
	display: flex;
	align-items: center;
	gap: 0.125rem;
}

.pagination-inline-wrapper .pagination-btn {
	background: transparent;
	border: none;
	padding: 0.35rem 0.5rem;
	cursor: pointer;
	transition: all 0.15s ease;
	font-size: 0.8rem;
	color: #94a3b8;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pagination-inline-wrapper .pagination-btn:hover:not(:disabled) {
	color: #0c4d8b;
	background: rgba(12, 77, 139, 0.08);
}

.pagination-inline-wrapper .pagination-btn:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.pagination-inline-wrapper .pagination-pages {
	display: flex;
	gap: 0.125rem;
	align-items: center;
}

.pagination-inline-wrapper .pagination-page {
	background: transparent;
	border: none;
	padding: 0.35rem 0.55rem;
	cursor: pointer;
	transition: all 0.15s ease;
	font-size: 0.75rem;
	color: #64748b;
	min-width: auto;
	border-radius: 6px;
	font-weight: 500;
}

.pagination-inline-wrapper .pagination-page:hover {
	color: #0c4d8b;
	background: rgba(12, 77, 139, 0.08);
}

.pagination-inline-wrapper .pagination-page.active {
	color: #fff;
	background: linear-gradient(135deg, #0c4d8b 0%, #1a6fc9 100%);
	font-weight: 600;
	box-shadow: 0 1px 3px rgba(12, 77, 139, 0.25);
}

.pagination-inline-wrapper .pagination-page.ellipsis {
	cursor: default;
	padding: 0.35rem 0.2rem;
	color: #94a3b8;
}

.pagination-inline-wrapper .pagination-page.ellipsis:hover {
	color: #94a3b8;
	background: transparent;
}

div.nc_content input, div.nc_content select, div.qbc_content input, div.qbc_content select {
	padding: 1px 0px;
	border:0px;
}
span.dollar {
	left: -7px;
    top: 3px;
    position: absolute;
	display:inline-block;
}

/* active state */
#table1 input:focus ~ label, #table1 select:focus ~ label, #prod_setup input:focus ~ label, #prod_setup input.not_empty ~ label, #table2 input:focus ~ label, #table2 select:focus ~ label, span.span_so input:focus ~ label, span.span_so select:focus ~ label, div#report_buttons span.span_so select:focus ~ label, div#report_buttons span.span_so input:focus ~ label, #table1 input:not(:empty) ~ label, #table1 input.not_empty ~ label, #table1 select.not_empty ~ label, #table2 input:not(:empty) ~ label, #table2 input.not_empty ~ label, #table2 select.not_empty ~ label, span.span_so input.not_empty ~ label, span.span_so span.group.dates input.not_empty ~ label, span.span_so select.not_empty ~ label, div#report_buttons span.span_so select.not_empty ~ label, div#report_buttons span.span_so input.not_empty ~ label, div#report_buttons span.span_so span.group.dates input.not_empty ~ label, table#table1 select.min:focus ~ label, table#table1 select.min.not_empty ~ label, table#table1 input.min.not_empty ~ label, table#table1 input.min:focus ~ label, table#table2 select.min:focus ~ label, table#table2 select.min.not_empty ~ label, table#table2 input.min.not_empty ~ label, table#table2 input.min:focus ~ label, div.login_container input.login.not_empty ~ label, div.login_container input.login:focus ~ label, div.login_container input.login:valid ~ label, table#details input.mail_2:focus ~ label, table#details input.mail_2.not_empty ~ label, div#spr input.srch_prd:focus ~ label, div#spr input.not_empty ~ label, div.qb_int.so input:focus ~ label, div.qb_int.so input.not_empty ~ label, div.qb_int.so select:focus ~ label, div.qb_int.so select.not_empty ~ label, #table1 textarea ~ label, #table2 textarea ~ label, div.s_date input ~ label, div.s_time input ~ label, div.s_terms select ~ label, div.s_notes textarea ~ label, tr#new_emp input:focus ~ label, tr#new_emp input.not_empty ~ label, tr#new_emp select:focus ~ label, tr#new_emp select.not_empty ~ label, tr#new_emp textarea:focus ~ label, tr#new_emp textarea.not_empty ~ label, tr#new_area input:focus ~ label, tr#new_area input.not_empty ~ label, tr#new_area select:focus ~ label, tr#new_area select.not_empty ~ label, tr#new_area textarea:focus ~ label, tr#new_area textarea.not_empty ~ label, div.drag_title input:focus ~ label, div.drag_title input.not_empty ~ label, #app_table input:focus ~ label, #app_table input.not_empty ~ label, div.adj_item label, div.qty_div label, div.nc_content input.not_empty ~ label, div.nc_content input:focus ~ label, div.nc_content select.not_empty ~ label, div.nc_content select:focus ~ label, div.qbc_content input.not_empty ~ label, div.qbc_content input:focus ~ label, div.qbc_content select.not_empty ~ label, div.qbc_content select:focus ~ label, div.aic_content input.not_empty ~ label, div.aic_content input:focus ~ label, div.aic_content select.not_empty ~ label, div.aic_content select:focus ~ label, div.pr_field label, div.dc_content input:focus ~ label, div.dc_content input.not_empty ~ label {
  left:2px;
  top:-1px;
  font-size:10px;
  color:#0c4d8b;
  font-weight:600;
  text-transform:uppercase;
}
div.nc_content input.not_empty ~ label, div.nc_content input:focus ~ label, div.nc_content select.not_empty ~ label, div.nc_content select:focus ~ label, div.qbc_content input.not_empty ~ label, div.qbc_content input:focus ~ label, div.qbc_content select.not_empty ~ label, div.qbc_content select:focus ~ label, div.dc_content input:focus ~ label {
	top:-13px;
	left:0px;
}
div.aic_content input.not_empty ~ label, div.aic_content input:focus ~ label, div.aic_content select.not_empty ~ label, div.aic_content select:focus ~ label {
	top:-10px;
	left:0px;
}
div.dc_content input:focus ~ label, div.dc_content input.not_empty ~ label {
	top:-8px;
	left:0px;
}
div.qty_div label {
	position: absolute;
    left: 0;
    right: 0;
    top: -9px;
}
div.adj_item label {
	top:-8px;
	left:0px;
}
div.drag_title input:focus ~ label, div.drag_title input.not_empty ~ label {
	top:-9px;
	left:0px;
}
div.qb_int.so input:focus ~ label, div.qb_int.so input.not_empty ~ label {
	top:-6px;
}
#prod_setup input:focus ~ label, #prod_setup input.not_empty ~ label {
	top:-14px;
	left:0px;
}
tr#new_emp input:focus ~ label, tr#new_emp input.not_empty ~ label, tr#new_emp select:focus ~ label, tr#new_emp select.not_empty ~ label, tr#new_emp textarea:focus ~ label, tr#new_emp textarea.not_empty ~ label, tr#new_area input:focus ~ label, tr#new_area input.not_empty ~ label, tr#new_area select:focus ~ label, tr#new_area select.not_empty ~ label, tr#new_area textarea:focus ~ label, tr#new_area textarea.not_empty ~ label {
	top:-12px;
	left:0px;
}
div.qb_int.so select.not_empty ~ label, div.qb_int.so select:focus ~ label {
	top:2px;
}
div.login_container input.login.not_empty ~ label, div.login_container input.login:focus ~ label, div.login_container input.login:valid ~ label, table#details input.mail_2:focus ~ label, table#details input.mail_2.not_empty ~ label {
	top:-5px;
}
span.span_so input.not_empty ~ label, span.span_so select.not_empty ~ label, span.span_so input:focus ~ label, span.span_so select:focus ~ label {
	top:-9px;
}
div#report_buttons span.span_so input.not_empty ~ label, div#report_buttons span.span_so span.group.dates input.not_empty ~ label, div#report_buttons span.span_so select.not_empty ~ label, div#report_buttons span.span_so input:focus ~ label, div#report_buttons span.span_so span.group.dates input:focus ~ label, div#report_buttons span.span_so select:focus ~ label {
	top:-14px;
	font-size: 9px;
	color: #0c4d8b;
	font-weight: 600;
}
div#spr input.srch_prd:focus ~ label, div#spr input.not_empty ~ label {
	top:0px;
}
table#table1 input.min, table#table1 select.min, table#table1 input.min ~ label, table#table1 select.min ~ label, table#table2 input.min, table#table2 select.min, table#table2 input.min ~ label, table#table2 select.min ~ label, table#details input.mail_2, table#details input.mail_2 ~ label {
	font-size:12px;
}
span.span_so select {
	padding-left:5px;
	padding-right:5px;
	font-size:13px;
}
div#report_buttons span.span_so select {
	padding: 6px 10px;
	font-size: 13px;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	cursor: pointer;
	text-transform: none;
}

div#report_buttons span.span_so select:focus {
	border-color: #0c4d8b;
	box-shadow: 0 0 0 3px rgba(12, 77, 139, 0.1);
	outline: none;
	text-transform: none;
}

div#report_buttons span.span_so select:hover {
	border-color: #cbd5e1;
	text-transform: none;
	text-transform: uppercase;
}

div.s_notes textarea ~ label {
	left:9px;
}
span.span_so {
	display:block;
	font-family:'Montserrat', sans-serif;
}
span.checkers {
	vertical-align:middle;margin-right:15px;
}
span.checkers input[type="checkbox"] {
	top: 2px;
}
div.email-list input[type="checkbox"] {
	margin-left:4px;margin-right:2px;width:14px;height:14px;vertical-align: text-bottom;top: 1px;
}
div.contact-list input[type="checkbox"] {
	margin-left:4px;margin-right:2px;width:14px;height:14px;vertical-align: text-bottom;
}
div.gen_login, div.qb_int {
	margin-top:35px;
	text-align:center;
	margin-bottom: -15px;
    padding-bottom: 15px;
    width: 100%;
    border-bottom: 1px dotted #666;
}
table.gen_login th {
	min-width: 60px;
}
div.gen_login form {
	display:flex;
	justify-content: center;
}
div.qb_int.so {
	border-bottom:0px;
	border-top:1px dotted #666;
	padding-top:20px;
}
div.gen_login select, div.gen_login input, div.qb_int select, div.qb_int input {
	font-size:12px;
	margin:5px;
}
div.gen_login table th {
	font-weight:normal;
}
div.gen_login select, div.gen_login input {
	padding: 5px 0px 2px;
	border: 0px;
    border-bottom: 1px solid #CCC;
    margin-bottom: 7px;
    font-size: 13px;
}
div.gen_login button, div.qb_int button {
	font-size:12px;
}
span.log_title, span.qb_title {
	font-weight:600;
	text-align:center;
	display:block;
	width:100%;
}
span.log_error {
	display: block;
    padding: 8px;
    margin-top: 15px;
    font-weight: bold;
}
div.exist_error {
	font-size:11px;
	display:none;
	color:#9A0002;
	max-width: 70%;
	margin-left: 5px;
}
span.log_res, span.qb_res {
	margin-left:8px;
}
span.qb_res {
	display:block;
}
table#details textarea {
	font-size:12px;
}
div.email-list div.row {
	padding: 1px 0px;
}
/* Pill-style overrides for email recipient rows live in index.php
   under the `#email_to .email-list ...` block — those higher-
   specificity ID selectors win the cascade, so per-row tightening +
   the circular checkbox marker treatment are kept there in one
   place rather than duplicated here. */
div.srch_res {
	margin-top:4px;
}
.prbar, .pbar {
    height: 4px;
    background: green;
}
div.progress, div#progress, div.pdf_prog {
	margin:10px auto 10px auto;width:80%;display:block;position:relative;
}
div.pdf_prog {
	width:23px;
	display:none;
	vertical-align: middle;
	top: -1px;
	margin: 0px;
    margin-left: 8px;
}
div.draw_div, div.pd_item {
	padding: 6px 10px 5px 10px;
	border-radius: 5px;
    cursor: pointer;
	margin:5px;
	display:inline-block;
	font-family: 'Montserrat', sans-serif;
	background-color: #fff;
    border: 1px solid #e2e8f0;
	position:relative;
	text-align: center;
	vertical-align: top;
}
div.pd_item {
	border-radius:5px;
}
div.draw_div:hover, div.pd_item:hover {
	background-color: #f8fafc;
	border: 1px solid #94a3b8;
}
span.draw_ops {
	top:2px;
	position:relative;
	display:block;
}
div#draw_list {
	display:inline-block;
	margin:0px auto 0px auto;
	vertical-align:middle;
}
i.srt {
	display:none;
	position:absolute;
	top: 0px;
    right:9px;
	font-size:14px;
	cursor:move;
}
#dropzone, div#fu_drop, tr#delivery div.deldiv, #delivery div.deldiv, tr#grp_delivery div.deldiv, div.revision, div#add_call, div#add_note {
    background: #ade6b9;
    width: 290px;
    height: 50px;
	padding:5px;
    line-height: 50px;
    text-align: center;
    font-weight: bold;
	display:inline-block;
	border-radius: 5px;
    border: 1px solid #5ebb61;
	margin: 5px;
	font-size:11px;
}
#dropzone, div#fu_drop, tr#delivery div.deldiv, #delivery div.deldiv, tr#grp_delivery div.deldiv, div.revision, div#add_call, div#add_note {
	min-width:75px;
	width:auto;
	height:auto;
	line-height:25px;
	vertical-align: middle;
	cursor:pointer;
}
div.revision {
	vertical-align:top;
}
/* ── Modernized structure/group action buttons ── */
.prd_details, .prd_group, .prdi_items, .wzone {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 95px;
	padding: 12px 8px 10px;
	margin: 4px;
	border-radius: 8px;
	border: 1px solid #c7dbed;
	background-color: #f0f6ff;
	cursor: pointer;
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	color: #1e3a5f;
	line-height: 1.3;
	vertical-align: top;
	transition: all 0.15s ease;
	box-sizing: border-box;
}
.prd_details i, .prd_group i, .prdi_items i, .wzone i {
	font-size: 22px !important;
	color: #3b7cbf !important;
	display: block !important;
	margin: 0 auto 6px !important;
}
.prd_details span, .prd_group span, .wzone span, .prdi_items span {
	line-height: 1.3 !important;
	font-size: 11px;
}

/* ── Inputs & selects inside action buttons ── */
.prd_details input,
.prd_details select,
.prdi_items input,
.prdi_items select {
	display: block;
	width: 100%;
	max-width: 72px;
	margin: 4px auto 0;
	padding: 3px 4px;
	font-size: 11px;
	font-weight: 600;
	color: #1e3a5f;
	text-align: center;
	border: 1px solid #b8d4ed;
	border-radius: 4px;
	background-color: #fff;
	outline: none;
	transition: border-color 0.15s ease;
	box-sizing: border-box;
}
.prd_details input:focus,
.prd_details select:focus,
.prdi_items input:focus,
.prdi_items select:focus {
	border-color: #3b7cbf;
	box-shadow: 0 0 0 2px rgba(59,124,191,0.15);
}
.prd_details select,
.prdi_items select {
	padding: 2px 2px;
	cursor: pointer;
	text-align: left;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%233b7cbf' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") right 3px center/10px no-repeat;
	padding-right: 14px;
}
/* Override bare-underline rules from #tr_pdrw selectors */
#tr_pdrw .prd_details input,
#tr_pdrw .prd_details select,
#tr_pdrw .prdi_items input,
#tr_pdrw .prdi_items select {
	border: 1px solid #c1dfc6;
	border-radius: 4px;
	background-color: #fff;
	padding: 3px 4px;
	margin: 4px auto 0;
}
#tr_pdrw .prd_details select,
#tr_pdrw .prdi_items select {
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%233b7cbf' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") right 3px center/10px no-repeat;
	padding-right: 14px;
}
div.prdi_items {
	min-width:75px;
}
tr#delivery div.deldiv, #delivery div.deldiv, tr#grp_delivery div.deldiv {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: auto;
	min-width: 0;
	height: auto;
	padding: 0;
	margin: 0;
	background: transparent;
	border: none;
	border-radius: 0;
	cursor: default;
	font-size: 12px;
	font-weight: normal;
	line-height: normal;
	text-align: left;
	vertical-align: middle;
}
tr#delivery div.deldiv select, #delivery div.deldiv select, tr#grp_delivery div.deldiv select {
	font-size: 12px;
	font-weight: 600;
	border: 1px solid #e2e8f0;
	border-radius: 5px;
	background-color: #f8fafc;
	padding: 4px 6px;
	margin: 2px 0 3px 2px;
	color: #334155;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
tr#delivery div.deldiv select:focus, #delivery div.deldiv select:focus, tr#grp_delivery div.deldiv select:focus {
	border-color: #0c4d8b;
	box-shadow: 0 0 0 2px rgba(12, 77, 139, 0.1);
	outline: none;
}
#tr_pdrw select {
	font-size: 12px;
	font-weight: bold;
}
/* Delivery field icons */
tr#delivery div.deldiv i.dlv-icon,
#delivery div.deldiv i.dlv-icon,
tr#grp_delivery div.deldiv i.dlv-icon {
	font-size: 13px;
	color: #94a3b8;
	width: 14px;
	text-align: center;
}
tr#delivery div.deldiv.mileage i.dlv-icon,
#delivery div.deldiv.mileage i.dlv-icon,
tr#grp_delivery div.deldiv.mileage i.dlv-icon {
	color: #0c4d8b;
}
/* Delivery field labels */
span.dlv-label {
	font-size: 10px;
	color: #0c4d8b;
	font-weight: 600;
	text-transform: uppercase;
}
/* Miles value styling */
tr#delivery span.delivery_title,
#delivery span.delivery_title,
tr#grp_delivery span.delivery_title {
	font-size: 14px;
	font-weight: 700;
	color: #334155;
	font-variant-numeric: tabular-nums;
}
/* Delivery separator pipe */
span.dlv-sep {
	color: #e2e8f0;
	font-size: 16px;
	font-weight: 300;
	margin: 0 4px;
	user-select: none;
}
div#fu_drop {
	vertical-align: top;
}
/* Dropzone button — matches .prd_details style */
#tr_pdrw #dropzone {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 95px;
	height: auto;
	padding: 12px 8px 10px;
	margin: 4px;
	border-radius: 8px;
	border: 1px solid #c7dbed;
	background-color: #f0f6ff;
	line-height: 1.3;
	font-size: 11px;
	font-weight: 600;
	color: #1e3a5f;
	cursor: pointer;
	vertical-align: top;
	transition: all 0.15s ease;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
}
#tr_pdrw #dropzone i {
	font-size: 22px !important;
	color: #3b7cbf !important;
	display: block !important;
	margin: 0 auto 6px !important;
}
#tr_pdrw #dropzone span {
	line-height: 1.3 !important;
	font-size: 11px;
}
#tr_pdrw #dropzone:hover {
	background-color: #e0edfa;
	border-color: #5a9fd4;
	color: #143052;
}
#tr_pdrw #dropzone:hover i {
	color: #0c4d8b !important;
}
/* Upload progress bar — thin stripe at bottom of button */
#tr_pdrw #dropzone div.progress {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	margin: 0;
	width: 100%;
	border-radius: 0 0 8px 8px;
	overflow: hidden;
	background: rgba(0,0,0,0.06);
}
#tr_pdrw #dropzone div.progress .prbar {
	height: 100%;
	background: #22c55e;
	transition: width 0.2s ease;
}
/* Drag-hover state (file being dragged over) */
#dropzone.hover {
	background-color: #dcfce7 !important;
	border-color: #22c55e !important;
	color: #166534 !important;
	box-shadow: 0 0 0 3px rgba(34,197,94,0.15);
}
#dropzone.hover i {
	color: #166534 !important;
}
/* Split pill inside dropzone button — pill chrome now comes from
   `.sch-pill` (see style.css:23076). Only the in-dropzone spacing
   tweak (small top margin to separate it from the upload icon)
   stays here; size + font + border now come from sch-pill. */
#tr_pdrw #dropzone label.draw_split_pill {
	margin-top: 5px;
}
.wdisabled {
	background-color: #f1f5f9 !important;
	border: 1px solid #e2e8f0 !important;
	cursor: not-allowed;
	opacity: 0.55;
	filter: grayscale(0.5);
}
.wdisabled i {
	color: #94a3b8 !important;
}
.wdisabled span {
	color: #94a3b8 !important;
}
div.wdisabled:hover {
	background-color: #f1f5f9 !important;
	border: 1px solid #e2e8f0 !important;
	box-shadow: none !important;
}
#dropzone:hover, #fu_drop:hover, div.revision:hover, div#add_call:hover, div#add_note:hover {
	background-color:#95d4a2;
	border: 1px solid #49984c;
}
.prd_details:hover, .prd_group:hover, .prdi_items:hover, .wzone:hover {
	background-color: #e0edfa;
	border-color: #5a9fd4;
	color: #143052;
}
.prd_details:hover i, .prd_group:hover i, .prdi_items:hover i, .wzone:hover i {
	color: #0c4d8b !important;
}
/*
tr#delivery div.deldiv:hover {
	border: 1px solid rgba(80, 175, 143, 0.45);
}
*/
#dropzone.in, div#fu_drop.in {
    width:220px;
    height:150px;
    line-height:100px;
}
input#fileupload.hover {
    background: #37ea5c;
	font-size: larger;
}
div#fu_drop.hover {
	background: #009E20;
}
div#fu_drop.fade {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    opacity: 1;
}
div.revision {
	width:80%;
    line-height: 16px;
	position:relative;
	text-align:left;
}
div#add_call, div#add_note {
	min-width:80px;
	width: 30%;
    line-height: 16px;
	position:relative;
	vertical-align: top;
}
div#add_call textarea, div#add_note textarea {
	margin-top:2px;
    border: 0px;
    border-left: 1px solid #999;
    border-bottom: 1px solid #999;
	background-color: rgba(255, 255, 255, 0.25);
    text-align: left;
}
div.rev_num {
	font-size:12px;
	font-weight:600;
	position:absolute;
	top:0px;
	right:0px;
	background-color:rgba(7,7,7,0.25);
	border-top-right-radius: 5px;
	padding: 1px 2px;
}
div.rev_num i {
	font-weight: bold;
	font-size: 12px;
	position:relative;
	top:1px;
}
div.revision div.rev_email {
	display:none;
	margin-top: 5px;
	text-align: left;
    background-color: rgba(255, 255, 255, 0.5);
    padding:8px;
	clear: both;
}
div.revision div.rev_icons {
	font-size: 30px;color: rgba(0, 0, 0, 0.5);display: inline-block;position:relative;text-align:left;float: left;
}
div.revision div.rev_icons i {
	margin:2px 5px;font-size: 30px;color: rgba(0, 0, 0, 0.5);display:inline-block;position:relative;
}
div.rev_main {
	display: inline-block;
    padding-left: 2%;
}
div.rev_rec {
	display: inline-block;
    padding-left: 2%;
    position: relative;
}
div.rev_rec span {
	display:inline-block;
	padding:2px 4px;
	margin-right:4px;
	border:1px solid #999;
	background:rgba(0,0,0,.1);
	margin-top: 3px;
}
div#revs_drop {
	display:none;
}
div.prd_draw {
	display:inline-block;
	text-align:left;
	vertical-align: top;
}
table#order_list tbody tr.buffer, tr.buffer, #tr_pdrw {
	background-color: #f8faf9;
}
tr.buf_prd, #tr_pdrw.buf_prd {
	background-color: rgba(228, 203, 117, 0.18);
}
#tr_pdrw td {
	text-align:left;
	padding: 10px;
	line-height: normal;
}
tr#delivery td {
	text-align: left;
	position: relative;
	padding: 12px 14px;
	vertical-align: middle;
}
tr#delivery div.delivery_ops, #delivery div.delivery_ops, tr#grp_delivery div.delivery_ops {
	display: flex;
	gap: 14px;
	align-items: center;
	flex-wrap: wrap;
	padding: 4px 0;
}
#tr_pdrw hr {
	width: 1px;
    height: 40px;
    background: #e2e8f0;
    border: 0;
    margin: 0 6px;
    align-self: center;
    flex-shrink: 0;
}
i.sort_ar {
	margin-right:8px;font-size:15px;top:-1px;position:relative;
}
span.qb_fields {
	display:block;
}
span.qb_fields.ib {
	display: inline-block;
    min-width: 33%;
    text-align: left;
}
div.cus_qb {
    position: relative;
    line-height: 14px;
}
span.cc_line {
	display:block;
	margin:2px auto;
}
div.drop_cc {
	border: 1px dotted #666;
    margin: 10px;
    padding: 10px;
    background-color: rgba(255, 226, 125, 0.58);
}
span.so_title {
	font-size:12px;
	font-weight:600;
}

/* Modern ord_form styling */
div#ord_sales, div#ord_form {
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	border: 1px solid #f1f5f9;
	overflow: visible;
}
div#cus_err, div#qb_err, div#fn_err {
	display:none;
	font-weight:600;
	font-size:16px;
	max-width: 175px;
    vertical-align: top;
    border: 1px solid #999;
    padding: 25px 10px;
    border-radius: 8px;
    margin: 15px;
	color: #323232;
}
div.cus_init {
	display:flex;
	align-items: center;
}
div#ord_sales {
	width:900px;
}
div#so_proc {
	display:none;
	vertical-align: top;
}
.success {
	background-color: rgba(33, 255, 33, 0.23);
}
.fail {
	background-color: rgb(255, 201, 201);
}
div.qb_int.so div.add_space div {
	text-align: left;
	position:relative;
}
div.qb_int.so div.add_space {
	display:inline-block;
	vertical-align: top;
}
div.qb_int.so input, div.qb_int.so select {
	border:0px;
}
div.qb_int.so select {
	margin-left: 0px;
    padding-top: 6px;
    margin-top: 12px;
}
div.qb_int.so div.drop_cc input, div.qb_int.so div.drop_cc select {
	border-bottom:1px solid #999;
}
div.qb_int.so div.drop_cc select {
	padding-top: 8px;
}
div.qb_data span input[type=checkbox] {
	width: 14px;
    height: 14px;
    vertical-align: text-bottom;
    margin: 0px;
    margin-right: 5px;
    top: -1px;
}
div.qb_data span.ib input[type=checkbox]:checked ~ input[type=text] {
	background: rgba(149, 255, 162, 0.63);
}
div.qb_data span.ib input[type=text] {
	border-bottom: 1px solid #CCC;
    background: rgba(255, 237, 149, 0.63);
	padding: 4px 3px 2px 3px;
}
#tax td {
	padding: 12px 0px 8px 7px;
	font-size:11px;
}
#tax td select {
	background: rgba(197, 209, 196, 0.37);
    padding: 4px;
}
tr#total td, tr#ord_payments td, tr#ord_fees td {
	padding: 5px 7px 0px;
	font-size:12px;
}
tr#ord_payments td, tr#ord_fees td {
	font-size: 11px;
    font-weight: 500;
}
/* Order Financial Summary Card */
div.ord-summary {
    margin-left: auto;
    margin-right: 17px;
    max-width: 270px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 12px;
    margin-top: 2px;
    margin-bottom: 2px;
}
div.ord-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}
span.ord-summary-label {
    color: #64748b;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}
i.ord-summary-icon {
    font-size: 10px;
    color: #94a3b8;
    width: 14px;
    text-align: center;
}
/* Accounting-style amount: $ left, number right */
span.ord-summary-amt {
    display: inline-flex;
    align-items: baseline;
    font-weight: 600;
    color: #334155;
    font-variant-numeric: tabular-nums;
    min-width: 100px;
}
span.ord-summary-sign {
    flex: 0 0 auto;
    margin-right: auto;
}
span.ord-summary-num {
    flex: 0 0 auto;
    text-align: right;
    letter-spacing: -0.3px;
}
span.ord-summary-amt.ord-summary-neg {
    color: #dc2626;
}
span.ord-summary-amt.ord-summary-fee {
    color: #b45309;
}
div.ord-summary-divider {
    height: 1px;
    background-color: #e2e8f0;
    margin: 4px 0;
}
/* Total row — clickable to expand/collapse details */
div.ord-summary-row.ord-summary-total {
    cursor: pointer;
}
div.ord-summary-row.ord-summary-total span.ord-summary-label {
    color: #334155;
    font-weight: 600;
    font-size: 13px;
    margin-right: 16px;
}
div.ord-summary-row.ord-summary-total span.ord-summary-amt {
    font-size: 14px;
    color: #0f172a;
    font-weight: 700;
}
div.ord-summary-row.ord-summary-total .ord-summary-info {
    color: #94a3b8;
    font-size: 12px;
    cursor: pointer;
    margin-left: 4px;
    transition: color 0.15s;
}
div.ord-summary-row.ord-summary-total .ord-summary-info:hover {
    color: #0c4d8b;
}
/* Expand/collapse toggle — sits inside the label, left of text */
i.ord-summary-toggle {
    font-size: 10px;
    color: #94a3b8;
    cursor: pointer;
    margin-right: 6px;
    transition: transform 0.2s, color 0.15s;
}
i.ord-summary-toggle:hover {
    color: #334155;
}
div.ord-summary-open i.ord-summary-toggle {
    transform: rotate(180deg);
}
/* Collapsible details */
div.ord-summary-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}
div.ord-summary-open div.ord-summary-details {
    max-height: 200px;
}
/* Balance due row */
div.ord-summary-row.ord-summary-balance {
    padding-top: 6px;
}
div.ord-summary-row.ord-summary-balance span.ord-summary-label {
    color: #334155;
    font-weight: 600;
    font-size: 13px;
}
div.ord-summary-row.ord-summary-balance span.ord-summary-amt {
    font-size: 14px;
    color: #0f172a;
}
span.ord-summary-amt.ord-summary-paid {
    color: #16a34a !important;
}
div.grp_items {
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	overflow: visible;
	margin: 10px 0;
}
table#grp_table {
	margin: 0;
	width: 100%;
}
table#grp_table td {
	line-height:16px;
	padding: 4px 8px;
}
tr#grp_delivery td {
	line-height: normal;
	padding: 12px 10px;
	vertical-align: middle;
}
table#grp_table thead td {
	line-height:16px;
	padding: 8px 8px;
}
td.grp_table_head {
	font-weight: 600;
	text-align: center;
	background-color: #f1f5f9;
	position: relative;
	padding: 6px 10px;
	vertical-align: middle;
	border-bottom: 2px solid #e2e8f0;
	color: #475569;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
td.grp_table_head span.grp_items {
	font-weight: 600;
}
table#grp_table thead td i.fa-save, table#grp_table thead td i.fa-check, table#grp_table thead td i.fa-dollar-sign, table#grp_table thead td i.fa-tag, table#grp_table thead td i.fa-exchange {
	position:relative;right:0px;color:#64748b;font-size:18px;top:0px;padding: 7px 10px;float:right;
}
table#grp_table thead td i.fa-check {
	padding: 7px 9px;
}
table#grp_table thead td i.fa-tag {
	padding: 8px 9px;
	font-size:16px;
}
table#grp_table thead td i.fa-exchange {
	padding: 8px 9px;
	font-size:16px;
}
table#grp_table thead td i.fa-save:hover, table#grp_table thead td i.fa-dollar-sign:hover, table#grp_table thead td i.fa-tag:hover, table#grp_table thead td i.fa-exchange:hover {
	background-color: rgba(148, 163, 184, 0.2);
	color: #334155;
	border-radius: 4px;
	cursor:pointer;
}
table#grp_table thead td i.fa-check:hover {
	background-color: rgba(34, 197, 94, 0.15);
	color: #16a34a;
	border-radius: 4px;
	cursor:pointer;
}
table#grp_table tbody td {
	cursor:move;
}
table#grp_table tr:nth-child(even) { background-color: #f8fafc; }
div.dc_item {
	display:block;margin-bottom:3px;font-size:14px;position:relative;
}
input[name=dc_item] {
	margin-right:5px;
}
div.dc_item select {
	margin: 0px 8px 1px 0px;
    border: 0px;
    border-bottom: 1px solid #CCC;
    padding-left: 5px;
}
table#dt_table {
	border-spacing:0px;
	padding:5px;
	width:99%;
}
table#dt_table tr td {
	cursor:auto;
}
table#dt_table tr.grp {
	background-color:rgba(191, 237, 187, 0.75);
}
table#dt_table tr.grp.cd1 {
	background-color:rgba(191, 237, 187, 0.50);
}
table#dt_table tr.grp_head {
	background-color:rgba(173, 228, 168, 0.9);
}
table#dt_table tfoot tr td {
	padding-top:10px;
	padding-bottom:10px;
	font-size:14px;
	font-weight:bold;
	border-top: 2px solid #e2e8f0;
	background-color: #fafbfc;
}
table#dt_table tfoot tr td.qty_total {
	padding-left: 10px;
}
table#dt_table div.dt_num {
	font-size:14px;
}
div.dt_old {
	margin-top:20px;
	width: 68%;
}
.dt_old_label {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #64748b;
}
div.dt_old div.past_ticket {
	display: flex;
	align-items: center;
	padding: 10px 14px;
	margin: 0 0 8px 0;
	border: 1px solid #e2e8f0;
	border-left: 3px solid #10b981;
	border-radius: 6px;
	background-color: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
	cursor: pointer;
	position: relative;
	transition: box-shadow 0.15s, transform 0.15s;
}
div.dt_old div.past_ticket .t_icon {
	flex: 0 0 auto;
	white-space: nowrap;
	min-width: 100px;
	text-align: left;
}
div.dt_old div.past_ticket .t_icon i {
	width: 13px;
}
div.dt_old div.past_ticket .t_user,
div.dt_old div.past_ticket .t_date {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: #475569;
	white-space: nowrap;
}
div.dt_old div.past_ticket .t_user {
	flex: 0 1 auto;
	min-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-right: 16px;
}
div.dt_old div.past_ticket .t_date {
	flex: 0 0 auto;
}
div.dt_old div.past_ticket .t_user i,
div.dt_old div.past_ticket .t_date i {
	font-size: 11px;
	color: #94a3b8;
	flex-shrink: 0;
}
div.dt_old div.past_ticket .t_actions {
	margin-left: auto;
	flex-shrink: 0;
	text-align: right;
	opacity: 0.45;
	transition: opacity 0.15s;
}
div.dt_old div.past_ticket:hover .t_actions {
	opacity: 1;
}
div.dt_old div.past_ticket.ret_pending {
	border-left-color: #f59e0b;
}
div.dt_old div.past_ticket.closed {
	border-left-color: #94a3b8;
}
div.dt_old div.past_ticket.pending {
	border-left-color: #3b82f6;
}
div.dt_old div.past_ticket:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,0.10);
	transform: translateY(-1px);
}
div.dt_old div.past_ticket.ret_pending:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,0.10);
	transform: translateY(-1px);
}
div.s_date, div.s_notes, div.s_terms, div.s_ops, div.s_time {
	display:inline-block;text-align:center;margin:10px;position:relative;vertical-align: middle;float:left;
}
div.s_date {
	margin:10px 10px 0px 10px;
}
div.s_time {
	margin:14px 0px 8px 0px;
	text-align:left;
	margin-top:9px;
}
div.s_time div.dw {
	display: inline-block;
}
div.s_terms {
	margin:2px 10px;
}
div.s_ops {
	margin:2px 10px 10px 10px;
	text-align: left;
    line-height: 20px;
}
tr.dt_draw {
	display:none;
}
table#prod_setup tr.dt_draw {
	display:table-row;
}
tr.dt_draw:not(.grp) td {
	padding-top: 0px;
}
tr.dt_draw.grp td {
	padding-bottom: 0px;
}
tr.dt_draw td div, div.dt_draw {
	position:relative;
	display:inline-block;
    margin-right: 7px;
	cursor:pointer;
}
tr.it_dets div.dt_draw {
	position:relative;
	display:inline-block;
    margin-right: 4px;
	margin-top:2px;
	cursor:pointer;
}
tr.it_dets a {
	color:initial;
}
table#prod_setup tr.it_dets.grp td {
	padding-top:5px;
}
tr.dt_draw td img, div.dt_draw img {
	display: inline-block;
    border: 1px solid #CCC;
	margin:0px;
}
table#prod_setup tr.dt_draw td img, div.dt_draw img {
	max-width: 60px;
}
tr.dt_draw td img:hover, div.dt_draw img:hover {
    border: 1px solid rgba(9, 131, 57, 0.71);
}
tr.dt_draw td img ~ div.check, tr.dt_draw td div a, div.dt_draw img ~ div.check, div.dt_draw a {
	display:none;
}
tr.dt_draw td img.dt_draw_sel, div.dt_draw img.dt_draw_sel, div.auto_draw_sel {
	border:1px solid rgba(9, 131, 57, 0.71);
	margin:0px;
}
tr.dt_draw td img.dt_draw_sel ~ div.check, div.auto_draw_sel div.check, div.dt_draw img.dt_draw_sel ~ div.check {
	display:flex;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	opacity:1;
	height: 100%;
    width: 100%;
    text-align: center;
    vertical-align: middle;
    background-color: rgba(26, 169, 41, 0.29);
	overflow: hidden;
	line-height: 100%;
    padding: 5%;
    box-sizing: border-box;
	justify-content: center;
    align-items: center;
}
div.auto_draw_sel {
	display: inline-block;
    padding: 3px;
    padding-top: 8px;
	position: relative;
    border-radius: 4px;
}

div.dt_draw img.dt_draw_sel.dt_error ~ div.check {
	background-color: rgba(230, 25, 25, 0.29);
}
tr.dt_draw td div div:hover a, div.dt_draw:hover a {
	display:block;
}
div.jBox-content div.dt_draw a {
	display:block;
}
div.check i {
	font-size: 2rem;
    color: rgba(38, 38, 38, 0.86);
}
i.o_draw {
	font-size: 16px;
    color: rgba(38, 38, 38, 0.86);
    padding: 2px 4px 3px 4px;
    border-bottom-left-radius: 5px;
    position: absolute;
    right: 1px;
    top: 1px;
    background-color: rgba(255, 255, 255, 0.59);
}
i.o_draw:hover {
	background-color: rgba(255, 255, 255, 1.0);
}
div.em_res {
	max-height: 180px;
    overflow-y: auto;
    margin-bottom: 5px;
}
div#spr > i {
	color: rgba(0, 0, 0, 0.35);
	font-size: 14px;
}
table#report_list tr.err td {
	padding: 20px;
}
table#report_list tr.highlight td {
	background:rgba(55, 223, 104, 0.34);
}
table#prod_setup tr.highlight td {
	background:rgba(252, 255, 77, 0.48);
}
/* Report status pills — unified across desktop table cells + mobile cards */
.report-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 8px;
	border-radius: 999px;
	background: #f1f5f9;
	color: #0c4d8b;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}
.report-pill--ok   { background: #dcfce7; color: #166534; }
.report-pill--warn { background: #fef3c7; color: #92400e; }
.report-pill--bad  { background: #fee2e2; color: #991b1b; }
.report-pill--info { background: #e0f2fe; color: #075985; }
[data-theme="dark"] .report-pill       { background: rgba(148,163,184,0.16); color: #cbd5e1; }
[data-theme="dark"] .report-pill--ok   { background: rgba(21,128,61,0.22);  color: #86efac; }
[data-theme="dark"] .report-pill--warn { background: rgba(180,83,9,0.24);   color: #fcd34d; }
[data-theme="dark"] .report-pill--bad  { background: rgba(185,28,28,0.22);  color: #fca5a5; }
[data-theme="dark"] .report-pill--info { background: rgba(3,105,161,0.22);  color: #93c5fd; }
table#report_list td.brown {
    background: rgba(163, 135, 95, 0.4);
	background: -webkit-linear-gradient(left,rgba(163, 135, 95, 0.4), rgba(163, 135, 95, 0) 75%);
    background: -o-linear-gradient(right,rgba(163, 135, 95, 0.4),rgba(163, 135, 95, 0) 75%);
    background: -moz-linear-gradient(right,rgba(163, 135, 95, 0.4),rgba(163, 135, 95, 0) 75%);
    background: linear-gradient(to right,rgba(163, 135, 95, 0.4), rgba(163, 135, 95, 0) 75%);
}
table#report_list td.brown_st {
    background: rgba(163, 135, 95, 0.4) !important;
}
table#report_list td.green {
	background:rgba(165, 173, 122, 0.7);
	background: -webkit-linear-gradient(left,rgba(165, 173, 122, 0.7), rgba(165, 173, 122, 0) 75%);
    background: -o-linear-gradient(right,rgba(165, 173, 122, 0.7),rgba(165, 173, 122, 0) 75%);
    background: -moz-linear-gradient(right,rgba(165, 173, 122, 0.7),rgba(165, 173, 122, 0) 75%);
    background: linear-gradient(to right,rgba(165, 173, 122, 0.7), rgba(165, 173, 122, 0) 75%);
}
table#report_list td.green_st {
	background:rgba(165, 173, 122, 0.7) !important;
}
table#report_list td.tan {
	background:rgba(232, 218, 207, 0.65);
	background: -webkit-linear-gradient(left,rgba(232, 218, 207, 0.65), rgba(232, 218, 207, 0) 75%);
    background: -o-linear-gradient(right,rgba(232, 218, 207, 0.65),rgba(232, 218, 207, 0) 75%);
    background: -moz-linear-gradient(right,rgba(232, 218, 207, 0.65),rgba(232, 218, 207, 0) 75%);
    background: linear-gradient(to right,rgba(232, 218, 207, 0.65), rgba(232, 218, 207, 0) 75%);
}
table#report_list td.tan_st {
	background:rgba(232, 218, 207, 0.65) !important;
}
table#report_list td.orange {
	background:rgba(233, 185, 119, 0.58);
	background: -webkit-linear-gradient(left, rgba(233, 185, 119, 0.58), rgba(233, 185, 119, 0) 75%);
    background: -o-linear-gradient(right,rgba(233, 185, 119, 0.58),rgba(233, 185, 119, 0) 75%);
    background: -moz-linear-gradient(right,rgba(233, 185, 119, 0.58),rgba(233, 185, 119, 0) 75%);
    background: linear-gradient(to right,rgba(233, 185, 119, 0.58), rgba(233, 185, 119, 0) 75%);
}
table#report_list td.orange_st {
	background:rgba(233, 185, 119, 0.58) !important;
}
table#report_list td.turq {
	background:rgba(182, 205, 185, 0.55);
	background: -webkit-linear-gradient(left,rgba(182, 205, 185, 0.55), rgba(182, 205, 185, 0) 75%);
    background: -o-linear-gradient(right,rgba(182, 205, 185, 0.55),rgba(182, 205, 185, 0) 75%);
    background: -moz-linear-gradient(right,rgba(182, 205, 185, 0.55),rgba(182, 205, 185, 0) 75%);
    background: linear-gradient(to right,rgba(182, 205, 185, 0.55), rgba(182, 205, 185, 0) 75%);
}
table#report_list td.turq_st {
	background:rgba(182, 205, 185, 0.55) !important;
}
table#report_list td.blue {
	background:rgba(134, 208, 209, 0.4);
	background: -webkit-linear-gradient(left,rgba(134, 208, 209, 0.4), rgba(134, 208, 209, 0) 75%);
    background: -o-linear-gradient(right,rgba(134, 208, 209, 0.4),rgba(134, 208, 209, 0) 75%);
    background: -moz-linear-gradient(right,rgba(134, 208, 209, 0.4),rgba(134, 208, 209, 0) 75%);
    background: linear-gradient(to right,rgba(134, 208, 209, 0.4), rgba(134, 208, 209, 0) 75%);
}
table#report_list td.blue_st {
	background:rgba(134, 208, 209, 0.4) !important;
}
table#report_list thead tr.main,
table#report_list thead tr.main_top {
	background-color: #fafcfd !important;
}
span.sig_name {
	font-size:12px;
}
div.sig_preview {
	font-size:10px;
}
div.section_title {
	position:absolute;
	font-weight:600;
	font-size:40px;
    transform: rotate(270deg);
	transform-origin: top left;
	left: -75px;
    top: 135px;
    background-color: rgba(49, 97, 122, 0.11);
    padding: 5px 15px 5px 15px;
    color: #0c4d8b;
}
div#prefs {
	top:335px;
}
/* Modern inline button loading state */
#run_report_btn.loading,
#run_inventory_btn.loading {
	background: linear-gradient(135deg, #64748b 0%, #475569 100%) !important;
	cursor: not-allowed !important;
}

#run_report_btn.loading i,
#run_inventory_btn.loading i {
	animation: fa-spin 1s infinite linear;
}

/* Legacy modal loading - removed in favor of inline button loading states */
/*
div#process {
	display:none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9999;
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 24px 32px;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	text-align: center;
	min-width: 200px;
	backdrop-filter: blur(8px);
}

div#process i.fa-spin {
	color: #0c4d8b;
	font-size: 24px;
	margin-bottom: 12px;
	opacity: 0.8;
}

div#process .progress-text {
	color: #334155;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.025em;
	margin: 0;
}
*/
div#order_buttons {
	display: flex;
	align-items: center;
	flex-wrap:wrap;
}
div#notify, div#send_inv, div#send_stmt, div#notify_bg, div#search, div#mess, div#go_dash_map, div#new_product, div#new_quote, div#new_cus, div#new_so, div#new_stock, div#load_all, div#m_open, div#print_draw, div#print_rep, div#bt_down, div#imp_sched, div.head_button, tr#act_buttons button, table#prod_setup button, div#dt_proc button, button.r_button, div.jBox-content button {
	position:relative;
	margin-right:5px;
	top:5px;
	color:#0c4d8b;
	border-radius: 80px;
	display:inline-block;
	text-align:center;
	-webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
div#notify {
	overflow: visible;
}
div.head_button {
	top:0px !important;
	min-width: 40px;
}
div.head_icon:hover i {
	padding-left:10px !important;
}
div#send_stmt {
	padding:0px 2px;
}
button.r_button:disabled, button.r_button:disabled:hover {
	color:gray;
	border:1px solid gray;
	background: transparent;
	cursor:auto;
}
div#notify, div#send_inv, div#send_stmt, div#search, div#mess, div#go_dash_map, div#new_quote, div#new_cus, div#new_so, div#new_stock, div#load_all, div#m_open, div#print_rep, div#bt_down {
	border-radius: 0px;
}
div#search, div#mess, div#go_dash_map, div#new_product, div#new_quote, div#new_cus, div#new_so, div#new_stock, div#load_all, div#m_open, div#print_draw, div#print_rep, div#bt_down, div#imp_sched, div.head_button, tr#act_buttons button, table#prod_setup button, div#dt_proc button, button.r_button {
	overflow:hidden;
}
tr#act_buttons button, table#prod_setup button, div#dt_proc button, button.r_button, div.jBox-content button {
	float:none;
	background-color:transparent;
	padding: 0px 16px 0px 8px;
	border:0px;
	margin-right:0px;
	margin-top:3px;
	text-transform: uppercase;
    font-weight: 600;
    font-size: 12px;
}
div.jBox-content div.emp_info button {
	margin-top:0px;
	top:0px;
}
button.r_button i {
	vertical-align: middle;
}
button.r_button span {
	vertical-align: middle;
}
div#notify span, div#send_inv span, div#send_stmt span, div#search span, div#mess span, div#go_dash_map span, div#new_product span, div#new_quote span, div#new_so span, div#new_stock span, div#load_all span, div#m_open span {
	display:inline-block;
	left:100px;
	margin-left:-2px;
	position:relative;
	vertical-align: middle;
	font-weight: 600;
	margin-right: 10px;
	top:0px;
}
div#notify i, div#send_inv i, div#send_stmt i, div#search i, div#mess i, div#go_dash_map i, div#new_product i, div#new_quote i, div#new_cus i, div#new_stock i, div#new_so svg, div#load_all i, div#m_open i, div#print_draw i, div#print_rep i, div#bt_down i, div#imp_sched i, div.head_button i, button.r_button i, tr#act_buttons button i, tr#act_buttons button svg, table#prod_setup button i, div#dt_proc button i, div.jBox-content div.adj_schedule i, div.jBox-content div.adj_item i, div.jBox-content div.pr_sched i {
	font-size:20px;
	padding:10px;
	height: 20px;
	top:0px;
}
div#print_draw:hover i, div#imp_sched:hover i, div.head_button:hover i {
	padding-left:15px;
}
div.head_button.inv_button i, div.head_button.inv_button:hover i {
	padding-left:11px;
}
tr#act_buttons button i, tr#act_buttons button svg, div#order_buttons svg, table#prod_setup button i, div#dt_proc button i, div.jBox-content button i {
	padding:10px 5px 10px 10px;
	top: 0px;
    position: relative;
	vertical-align: middle;
}
tr#act_buttons button i, div#dt_proc button i {
	padding: 2px;
	margin: 3px;
}
div#order_buttons svg {
	vertical-align: top;
	padding:10px;
}
div.jBox-content button i {
	padding: 7px 3px 6px 3px;
}
div.jBox-content button#submit_nc i {
	padding: 0px;
	margin:0px;
	max-width:unset;
}
button#submit_nc {
	display: flex;
    align-items: center;
    margin: 0px auto;
    gap: 5px;
    line-height: 32px;
	padding-left:13px;
}
button#submit_nc span {
	margin-left: 3px;
}
tr#act_buttons button svg {
	height:22px;
}
tr#act_buttons button svg path, div#order_buttons div svg path {
	fill:#0c4d8b;
}
div.prd_details svg path, div.prd_dets svg path, div.prdi_items svg path, div.prd_group svg path {
	fill: #3b7cbf;
}
div.prd_details svg, div.prd_dets svg, div.prdi_items svg, div.prd_group svg {
	height: 22px;
	width: 22px;
    text-align: center;
    display: block;
	margin: 0 auto 6px;
}
div.prd_details:hover svg path, div.prdi_items:hover svg path, div.prd_group:hover svg path {
	fill: #0c4d8b;
}
div.acct_logo svg {
	height: 14px;
}
div.acct_logo {
	display:inline-block;
}
div.cus_init div.acct_logo {
	display:flex;
}
span.cus_main_line {
	font-size: 13px;
}
span.cus_sub_line {
	font-weight: 400;
    font-size: 11px;
	color:#646464;
}
div.cus_sel span.cus_sub_line {
	color: #2e4d86;
}
div.x_qb svg {
	height: 16px;
}
div.x_qb svg path {
	fill: white;
}
tr#act_buttons button:hover svg path, div#order_buttons div:hover svg path {
	fill:#FFF;
	transition:0.3s ease all;
	-moz-transition:0.3s ease all;
	-webkit-transition:0.3s ease all;
}
div#notify:hover, div#send_inv:hover, div#send_stmt:hover, div#search:hover, div#mess:hover, div#go_dash_map:hover, div#new_product:hover, div#new_quote:hover, div#new_cus:hover, div#new_stock:hover, div#new_so:hover, div#print_draw:hover, div#imp_sched:hover, div.head_button:hover, button.r_button:hover, div#load_all:hover, div#m_open:hover, tr#act_buttons button:hover, table#prod_setup button:hover, div#dt_proc button:hover, div.jBox-content button:hover, div#print_rep:hover, div#bt_down:hover {
    background: #0c4d8b;
	color:#FFF;
	cursor:pointer;
}
div#notify:hover, div#send_inv:hover, div#send_stmt:hover, div#search:hover, div#mess:hover, div#go_dash_map:hover, div#new_quote:hover, div#new_cus:hover, div#new_so:hover, div#new_stock:hover, div#load_all:hover, div#m_open:hover, div#print_rep:hover, div#bt_down:hover {
	border-radius:19px;
}
div#new_product:after, div#print_draw:after, div#imp_sched:after, div.head_button:after, button.r_button:after, tr#act_buttons button:after, table#prod_setup button:after, div#dt_proc button:after {
	bottom:3px;
	left:75px;
	position:relative;
	display:inline-block;
	color:#FFF;
	margin-right: 0px;
	font-weight: 600;
	max-width:0px;
	transition:0.3s ease all;
	-moz-transition:0.3s ease all;
	-webkit-transition:0.3s ease all;
}
div#new_so {
	max-height:40px;
}
div#new_product:after {
	content:'ADD PRODUCT';
}
div#print_draw:after {
	content:'PRINT';
}
div#imp_sched:after {
	content:'IMPORT SCHEDULE';
}
div#new_employee:after {
	content:'NEW EMPLOYEE';
}
div#new_driver:after {
	content:'NEW DRIVER';
}
div#import_hrs:after {
	content:'IMPORT HOURS';
}
div#new_area:after {
	content:'NEW CATEGORY';
}
div#new_truck:after {
	content:'NEW EQUIPMENT';
}
div#sort_areas:after {
	content:'EDIT CATEGORIES';
}
div#sort_trucks:after {
	content:'EDIT EQUIPMENT';
}
div#qc_tools:after {
	content:'IMPORT BATCH';
}
div#prod_reps:after {
	content:'REPORTS';
}

tr#act_buttons button[name=qb_so_mod] img, tr#act_buttons button[name=qb_so_close] img {
	vertical-align: middle;
}
div#search:hover:after, div#mess:hover:after, div#go_dash_map:hover:after, div#new_product:hover:after, div#new_quote:hover:after, div#new_so:hover:after, div#new_stock:hover:after, div#load_all:hover:after, div#m_open:hover:after, div#print_draw:hover:after, div#imp_sched:hover:after, div.head_button:hover:after, button.r_button:hover:after, tr#act_buttons button:hover:after, table#prod_setup button:hover:after, div#dt_proc button:hover:after {
	left:0px;
	position:relative;
	max-width:200px;
	margin-right: 15px;
	transition:0.3s ease all;
	-moz-transition:0.3s ease all;
	-webkit-transition:0.3s ease all;
}
div#search:hover, div#mess:hover {
    background: #2282df;
}
div#new_product:hover {
    background: rgb(58, 186, 145);
}
div#new_quote:hover, div#new_cus:hover, div#go_dash_map:hover {
    background: rgb(58, 186, 145);
}
div#new_cus i {
	position:relative;
	top:1px;
	font-size:17px;
}
div#load_all:hover, div#new_stock:hover {
    background: rgb(130, 102, 23);
}
div#print_draw:hover, div#m_open:hover, div#print_rep:hover {
	background: #7a5331;
}
div#imp_sched:hover, div#new_employee:hover, div#new_driver:hover, div#import_hrs:hover, div#new_area:hover, div#new_truck:hover, div#bt_down:hover {
	background: rgb(58, 186, 145);
}
div#qc_tools:hover {
	background: #0e684b;
}
tr#act_buttons button:hover, table#prod_setup button:hover, div#dt_proc button:hover, div.head_button:hover {
    background: #0c4d8b;
}
tr#act_buttons button[name=approve]:hover, tr#act_buttons button[name=submit]:hover, button.r_button[name=t_gen]:hover {
    background: rgb(3, 99, 69);
}
tr#act_buttons button[name=unapprove]:hover, button.r_button[name=t_cancel]:hover, button#cne_no_notify:hover {
    background: rgb(150, 8, 8);
}
tr#act_buttons button[name=lost]:hover, button#del_prd:hover, button#cancel_bol:hover {
    background: rgb(150, 8, 8);
}
tr#act_buttons button[name=print]:hover, button#sort_areas:hover, div.jBox-content button.split:hover, button#move_prd:hover {
    background: #7a5331;
}
tr#act_buttons button[name=qb_so]:not(:disabled):hover, tr#act_buttons button[name=qb_so_mod]:hover, tr#act_buttons button[name=qb_so_close]:hover, div#new_so:hover {
    background: rgb(44, 160, 28);
}
tr#act_buttons button[name=qb_so].progress {
	border: 1px solid;
}
tr#act_buttons button[name=production]:hover {
    background: rgb(86, 79, 62);
}
div#dt_proc button[name=dt_gen]:hover {
	background: rgb(3, 99, 69);
}
div#dt_proc button[name=dt_save]:hover, table#prod_setup button[name=pc_save]:hover, div.jBox-content button.combine:hover {
	background: rgb(58, 186, 145);
}
div#dt_proc button[name=dt_none]:hover, table#prod_setup button[name=pc_none]:hover {
	background: #7a5331;
}
table#prod_setup button[name=pc_all]:hover, table#prod_setup button[name=pc_gen]:hover {
	background: rgb(3, 99, 69);
}
table#prod_setup tbody.grp button.sm_button:hover {
	background: rgb(9, 87, 9);
}
tr#act_buttons button[name=qb_so]:disabled {
	background:transparent;
	color: #0c4d8b;
	cursor:default;
}
div#notify_content {
	position: fixed;
	display: none;          /* default; .is-open switches to flex column */
	flex-direction: column;
	width: 460px;
	max-width: calc(100vw - 32px);
	max-height: min(78vh, 720px);
	top: 64px;          /* sits below header with a clear 8-15px gap */
	right: 24px;
	left: auto;
	margin: 0;
	padding: 0;
	background: var(--nx-bg, #ffffff);
	color: var(--nx-text, #0f172a);
	border: 1px solid var(--nx-border, #e2e8f0);
	border-radius: 16px;
	overflow: hidden;
	box-shadow:
		0 24px 60px -16px rgba(15,23,42,0.28),
		0 1px 4px rgba(15,23,42,0.06);
	z-index: 1100;
	opacity: 0;
	transform: translateY(-6px) scale(0.99);
	transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
div#notify_content.is-open {
	display: flex;
	opacity: 1;
	transform: translateY(0) scale(1);
}
[data-theme="dark"] div#notify_content {
	background: #0f172a;
	border-color: rgba(148,163,184,0.18);
	box-shadow:
		0 24px 60px -16px rgba(0,0,0,0.6),
		0 1px 4px rgba(0,0,0,0.4);
}
/* Legacy .n_item / .n_header rules superseded by the .nx-* component
   block below. The legacy classes are still present on the new markup
   so any external code expecting them keeps working — the styles
   are just overridden in place. */
div#notify_content div.n_item {
	padding: 0;
	border-bottom: 0;
	position: relative;
	box-sizing: border-box;
	line-height: inherit;
}
div#notify_content div.n_item:hover { background: transparent; }
div#notify_content div.n_header {
	padding: 10px 15px 0px;
	background: transparent;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	position: static;
	box-sizing: border-box;
}

/* ─────────────────────────────────────────────────────────────────
   Notifications panel — modern redesign.
   Lives inside #notify_content (legacy id kept). Three regions:
     .nx-header   — title row + count + clear-all + close
     .nx-controls — search + filter chips
     .nx-list     — scrollable bucketed cards
   Each card uses tone classes (info | success | warn | danger) on the
   left rail to communicate priority at a glance.
   ───────────────────────────────────────────────────────────────── */
:root {
	--nx-bg:        #ffffff;
	--nx-bg-soft:   #f8fafc;
	--nx-bg-rail:   #f1f5f9;
	--nx-border:    #e2e8f0;
	--nx-border-2:  #cbd5e1;
	--nx-text:      #0f172a;
	--nx-text-2:    #475569;
	--nx-text-mute: #94a3b8;
	--nx-brand:     #0c4d8b;
	--nx-brand-2:   #093863;
	--nx-info:      #0369a1;
	--nx-success:   #15803d;
	--nx-warn:      #b45309;
	--nx-danger:    #b91c1c;
}
[data-theme="dark"] {
	--nx-bg:        #0f172a;
	--nx-bg-soft:   #131c2e;
	--nx-bg-rail:   #1a2538;
	--nx-border:    rgba(148,163,184,0.16);
	--nx-border-2:  rgba(148,163,184,0.28);
	--nx-text:      #e2e8f0;
	--nx-text-2:    #94a3b8;
	--nx-text-mute: #64748b;
}

/* ── Header ──────────────────────────────────────────────────────
   Generous top padding (20px) so the title clears the panel's 16px
   rounded corner with breathing room. Title row sits anchored, not
   pinned. Side padding 20px gives the bell + count badge room from
   the corner curvature too. */
/* Header — editorial-masthead treatment.
   The previous version still read as "icon + title + chunky count + actions"
   — too many separate widgets. This version composes the whole left side as
   ONE typographic line: "Notifications — 129 unread" set with an em dash,
   like a magazine masthead. The bell is gone (the panel context already
   says "notifications"); a single unread-pulse sits to the right of the
   headline as the only chrome. Right side gets a dotted divider so the
   primary action and close button feel paired, not orphaned. */
#notify_content .nx-header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 19px 18px 17px 22px;
	background:
		linear-gradient(180deg, rgba(12, 77, 139, 0.04) 0, rgba(12, 77, 139, 0) 70%),
		var(--nx-bg);
	flex: 0 0 auto;
	gap: 18px;
}
#notify_content .nx-header::before {
	/* Slim vertical brand bookmark — anchors the panel identity */
	content: '';
	position: absolute;
	top: 16px;
	bottom: 16px;
	left: 0;
	width: 3px;
	background: var(--nx-brand);
	border-radius: 0 3px 3px 0;
}
#notify_content .nx-header::after {
	/* Gradient hairline bottom — brand-tipped, fades to neutral */
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(
		to right,
		var(--nx-brand) 0,
		var(--nx-brand) 22px,
		var(--nx-border) 22px,
		var(--nx-border) 100%
	);
	opacity: 0.6;
}
#notify_content .nx-header-left {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	flex: 1 1 auto;
}
/* The masthead — one continuous line: title — count unread */
#notify_content .nx-header-headline {
	margin: 0;
	padding: 0;
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.012em;
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0;
	min-width: 0;
}
#notify_content .nx-header-title {
	font-weight: 700;
	font-size: 16.5px;
	color: var(--nx-text);
	letter-spacing: -0.022em;
}
#notify_content .nx-header-em {
	color: var(--nx-text-mute);
	font-weight: 400;
	font-size: 16px;
	margin: 0 0.42em;
	opacity: 0.75;
	letter-spacing: 0;
}
#notify_content .nx-header-status {
	font-size: 13.5px;
	font-weight: 500;
	color: var(--nx-text-2);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.005em;
	white-space: nowrap;
}
#notify_content .nx-header-status-num {
	color: var(--nx-brand);
	font-weight: 700;
}
#notify_content .nx-header-status--zero {
	font-style: italic;
	color: #16a34a;
	font-weight: 500;
}
/* Standalone pulse dot — sits next to the masthead, not on top of an icon */
#notify_content .nx-header-pulse {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #ef4444;
	flex-shrink: 0;
	margin-bottom: 6px;
	box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55);
	animation: nx-pulse 2s ease-out infinite;
}
@keyframes nx-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
	70%  { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
	100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
#notify_content .nx-header-right {
	display: flex;
	align-items: center;
	gap: 0;
	flex-shrink: 0;
}
#notify_content .nx-clear-all {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 0;
	background: transparent;
	color: var(--nx-text-2);
	border-radius: 6px;
	padding: 7px 10px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.005em;
	cursor: pointer;
	transition: background 0.14s ease, color 0.14s ease;
}
#notify_content .nx-clear-all:hover {
	background: rgba(12, 77, 139, 0.10);
	color: var(--nx-brand);
}
#notify_content .nx-clear-all i {
	font-size: 10px;
	margin: 0;
	opacity: 0.85;
	transition: opacity 0.14s ease;
}
#notify_content .nx-clear-all:hover i { opacity: 1; }
#notify_content .nx-clear-all span { line-height: 1; }
/* Slim dotted divider between Mark all read and Close — pairs the actions */
#notify_content .nx-header-divider {
	display: inline-block;
	width: 1px;
	height: 18px;
	background: var(--nx-border);
	margin: 0 6px;
	opacity: 0.6;
}
#notify_content .nx-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 0;
	background: transparent;
	color: var(--nx-text-mute);
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.14s ease, color 0.14s ease, transform 0.22s ease;
	padding: 0;
}
#notify_content .nx-close svg { display: block; }
#notify_content .nx-close:hover {
	background: rgba(239, 68, 68, 0.10);
	color: #dc2626;
	transform: rotate(90deg);
}

/* ── Controls (search + filter chips) ────────────────────────────
   Padded 14px top / 14px bottom so search + chips have room to
   breathe between the header and the list. Search input uses 9px
   vertical padding for a comfortable click target. */
#notify_content .nx-controls {
	padding: 14px 16px 14px;
	border-bottom: 1px solid var(--nx-border);
	background: var(--nx-bg);
	flex: 0 0 auto;
}
#notify_content .nx-search {
	width: 100%;
	border: 1px solid var(--nx-border);
	background: var(--nx-bg-soft);
	color: var(--nx-text);
	border-radius: 9px;
	padding: 9px 13px;
	font-size: 12.5px;
	font-family: inherit;
	outline: none;
	transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
#notify_content .nx-search::placeholder { color: var(--nx-text-mute); }
#notify_content .nx-search:focus {
	border-color: var(--nx-brand);
	background: var(--nx-bg);
	box-shadow: 0 0 0 3px rgba(12,77,139,0.10);
}
/* Chip strip: single-line horizontal scroll, snap-to. Avoids the
   3-4 line wrap chaos when many kinds are present. The right-edge
   fade hint makes "more →" obvious without explicit chrome. */
#notify_content .nx-chips {
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
	margin-top: 12px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 2px;
	scrollbar-width: none;
}
#notify_content .nx-chips::-webkit-scrollbar { display: none; }
#notify_content .nx-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: 100px;
	border: 1px solid var(--nx-border);
	background: var(--nx-bg);
	color: var(--nx-text-2);
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
	font-family: inherit;
	white-space: nowrap;
	flex: 0 0 auto;
	scroll-snap-align: start;
	line-height: 1.4;
}
#notify_content .nx-chip:hover {
	background: var(--nx-bg-soft);
	border-color: var(--nx-border-2);
	color: var(--nx-text);
}
#notify_content .nx-chip.is-active {
	background: var(--nx-brand);
	border-color: var(--nx-brand-2);
	color: #fff;
}
#notify_content .nx-chip-count {
	font-size: 10px;
	font-weight: 700;
	background: rgba(15,23,42,0.07);
	color: var(--nx-text-2);
	padding: 0 6px;
	border-radius: 100px;
	font-variant-numeric: tabular-nums;
	min-width: 16px;
	text-align: center;
}
#notify_content .nx-chip.is-active .nx-chip-count {
	background: rgba(255,255,255,0.22);
	color: #fff;
}

/* ── List + bucket headers ───────────────────────────────────────
   Inset 12px from the controls divider so cards don't crowd it.
   Bucket labels (TODAY / EARLIER) sit with 12px of pre-space when
   they're the first label, more between sections. */
#notify_content .nx-list {
	flex: 1 1 auto;
	overflow-y: auto;
	overflow-x: hidden;          /* clip the dismiss slide-out so it never spawns a horizontal scrollbar */
	overscroll-behavior: contain;
	padding: 6px 10px 14px;
	background: var(--nx-bg);
}
#notify_content .nx-list::-webkit-scrollbar { width: 6px; }
#notify_content .nx-list::-webkit-scrollbar-track { background: transparent; }
#notify_content .nx-list::-webkit-scrollbar-thumb {
	background: var(--nx-border-2);
	border-radius: 3px;
}
#notify_content .nx-bucket-label {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nx-text-mute);
	padding: 16px 4px 8px;
}
#notify_content .nx-bucket-label:first-child { padding-top: 12px; }

/* ── Card ─────────────────────────────────────────────────────── */
#notify_content .nx-card {
	position: relative;        /* anchors the full-height ::before color rail */
	display: flex;
	align-items: stretch;
	gap: 0;                    /* rail + body each carry their own padding */
	margin: 0 0 6px;
	padding: 0;                /* no vertical padding — rail/body fill flush */
	background: var(--nx-bg);
	border: 1px solid var(--nx-border);
	border-radius: 10px;
	overflow: hidden;
	transition: border-color 0.14s ease, box-shadow 0.14s ease, opacity 0.22s ease, transform 0.22s ease;
	font-family: inherit;
	line-height: 1.45;
	color: var(--nx-text);
}
#notify_content .nx-card.is-removing {
	opacity: 0;
	transform: translateX(20px);
}
#notify_content .nx-card:hover {
	border-color: var(--nx-border-2);
	box-shadow: 0 4px 16px -8px rgba(15,23,42,0.18);
}
#notify_content .nx-rail {
	display: flex;
	align-items: center;          /* center pip vertically in the rail */
	justify-content: center;
	width: 48px;
	flex: 0 0 48px;
	padding: 14px 0;              /* matches body vertical padding for symmetry */
	background: var(--nx-bg-rail);
	align-self: stretch;          /* pin top + bottom of card */
}
#notify_content .nx-rail-pip {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--nx-bg);
	border: 1.5px solid var(--nx-border-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12.5px;
	color: var(--nx-text-2);
	line-height: 1;
	text-align: center;           /* belt-and-suspenders for inline glyph centering */
}
/* FontAwesome glyphs aren't perfectly centered inside their character box,
   which makes the icon visually drift left in a circular pip. Force the
   <i>/<svg> to fill the pip width and center the glyph itself, so the icon
   sits dead-center regardless of which FA glyph is rendered. */
#notify_content .nx-rail-pip i,
#notify_content .nx-rail-pip svg {
	display: inline-block;
	width: 100%;
	line-height: 1;
	text-align: center;
}

/* Tone variants — color the pip background only. The left rail strip was
   removed (the user found it visually redundant with the rail container's
   own background tint). Pip backgrounds use very-light tints in light
   mode; dark mode swaps to low-alpha rgba so the icon still pops. */
#notify_content .nx-card[data-tone="info"]    .nx-rail-pip { color: var(--nx-info);    border-color: rgba(3,105,161,0.35); background: #eff6ff; }
#notify_content .nx-card[data-tone="success"] .nx-rail-pip { color: var(--nx-success); border-color: rgba(21,128,61,0.35); background: #f0fdf4; }
#notify_content .nx-card[data-tone="warn"]    .nx-rail-pip { color: var(--nx-warn);    border-color: rgba(180,83,9,0.35);  background: #fffbeb; }
#notify_content .nx-card[data-tone="danger"]  .nx-rail-pip { color: var(--nx-danger);  border-color: rgba(185,28,28,0.35); background: #fef2f2; }
[data-theme="dark"] #notify_content .nx-card[data-tone="info"]    .nx-rail-pip { background: rgba(3,105,161,0.18);  color: #93c5fd; }
[data-theme="dark"] #notify_content .nx-card[data-tone="success"] .nx-rail-pip { background: rgba(21,128,61,0.18);  color: #86efac; }
[data-theme="dark"] #notify_content .nx-card[data-tone="warn"]    .nx-rail-pip { background: rgba(180,83,9,0.20);   color: #fcd34d; }
[data-theme="dark"] #notify_content .nx-card[data-tone="danger"]  .nx-rail-pip { background: rgba(185,28,28,0.18);  color: #fca5a5; }

#notify_content .nx-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 9px 13px;      /* vertical padding lives here (card has none) */
}
#notify_content .nx-headrow {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
}
/* Right cluster of the head row: timestamp + corner dismiss. */
#notify_content .nx-headrow-right {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 1px;          /* sit with the title's first line */
}
/* Corner dismiss is chrome — smaller than the in-row icon buttons. */
#notify_content .nx-headrow .nx-act-dismiss {
	width: 20px;
	height: 20px;
}
#notify_content .nx-headrow .nx-act-dismiss i { font-size: 11px; }
#notify_content .nx-title {
	font-weight: 700;
	font-size: 13.5px;
	color: var(--nx-text);
	line-height: 1.35;
	min-width: 0;
	flex: 1 1 auto;
	word-break: break-word;
	letter-spacing: -0.005em;
}
#notify_content .nx-time {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 500;
	color: var(--nx-text-mute);
	letter-spacing: 0.01em;
	white-space: nowrap;
	line-height: 1;
}
/* pre-line preserves the original \n line breaks from the source
   notification (delivery summaries, multi-line driver reports, etc.)
   while still collapsing extra whitespace runs. */
#notify_content .nx-summary {
	font-size: 12.5px;
	color: var(--nx-text-2);
	line-height: 1.5;
	word-break: break-word;
	white-space: pre-line;
}

/* ── Per-card actions ──────────────────────────────────────────── */
#notify_content .nx-acts {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: 4px;
	position: static;
}
#notify_content .nx-acts-primary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
	flex: 0 1 auto;
	min-width: 0;
}
#notify_content .nx-acts-secondary {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
	margin-left: auto;     /* push to right edge */
	padding-left: 6px;
}
#notify_content .nx-act-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 1px solid var(--nx-border);
	background: var(--nx-bg);
	color: var(--nx-text-2);
	border-radius: 7px;
	font-size: 11.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
	font-family: inherit;
	line-height: 1;
}
#notify_content .nx-act-btn i { font-size: 11.5px; margin: 0; padding: 0; line-height: 1; }
#notify_content .nx-act-btn:hover {
	background: var(--nx-bg-soft);
	border-color: var(--nx-border-2);
	color: var(--nx-text);
}
#notify_content .nx-act-btn:active { transform: translateY(1px); }
#notify_content .nx-act-labeled {
	padding: 5px 9px;
}
#notify_content .nx-act-labeled span {
	font-size: 11.5px;
	line-height: 1;
}
/* Icon-only utility buttons (chevron expand, dismiss). Borderless
   round discs that melt into the card surface and only "light up" on
   hover with a soft tint — no border flash. Smaller than the labeled
   buttons because they're chrome, not a primary action. */
#notify_content .nx-act-icon {
	width: 26px;
	height: 26px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--nx-text-mute);
}
#notify_content .nx-act-icon { transition: background 0.15s ease, color 0.15s ease; }
#notify_content .nx-act-icon:hover {
	background: var(--nx-bg-soft);
	color: var(--nx-text);
	border: none;
}
#notify_content .nx-act-icon i { font-size: 11px; line-height: 1; }

/* Labeled (primary) action hover tints — colored hover for the kind-
   appropriate intent. Border still flashes on these since they're the
   real CTAs of the card. */
#notify_content .nx-act-quote:hover    { background: #eff6ff; color: var(--nx-info);    border-color: rgba(3,105,161,0.45); }
#notify_content .nx-act-comm:hover     { background: #ecfeff; color: #0e7490;           border-color: rgba(14,116,144,0.45); }
#notify_content .nx-act-approve:hover  { background: #f0fdf4; color: var(--nx-success); border-color: rgba(21,128,61,0.45); }
#notify_content .nx-act-snooze:hover   { background: #fffbeb; color: var(--nx-warn);    border-color: rgba(180,83,9,0.45);  }
#notify_content .nx-act-lost:hover     { background: #fef2f2; color: var(--nx-danger);  border-color: rgba(185,28,28,0.45); }

/* Dismiss tints red on hover (overrides the neutral icon hover). The
   chevron stays neutral so it doesn't compete with content actions. */
#notify_content .nx-act-dismiss:hover {
	background: rgba(220,38,38,0.10);
	color: var(--nx-danger);
}
[data-theme="dark"] #notify_content .nx-act-icon:hover { background: rgba(148,163,184,0.12); }
[data-theme="dark"] #notify_content .nx-act-dismiss:hover {
	background: rgba(220,38,38,0.18);
	color: #fca5a5;
}
#notify_content .nx-act-detail i { transition: transform 0.22s ease; }
#notify_content .nx-card.is-expanded .nx-act-detail i { transform: rotate(180deg); }

/* ──────────────────────────────────────────────────────────────────
   Structured detail content (.nx-d-*). Replaces the legacy "dump the
   email-template HTML inside a CSS reset" approach with curated mark-
   up that the formatters produce per kind. Items always render as
   list rows with optional context lines beneath; driver/recipient
   rows render as a clean photo + label + value group.
   ──────────────────────────────────────────────────────────────── */
#notify_content .nx-d-block {
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 12.5px;
	color: var(--nx-text);
	line-height: 1.5;
}
#notify_content .nx-d-driver {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	background: var(--nx-bg);
	border: 1px solid var(--nx-border);
	border-radius: 8px;
}
#notify_content .nx-d-photo {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
	border: 1px solid var(--nx-border);
	background: var(--nx-bg-rail);
}
#notify_content .nx-d-photo-placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--nx-text-mute);
	font-size: 16px;
}
#notify_content .nx-d-driver-info { min-width: 0; }
#notify_content .nx-d-driver-label {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--nx-text-mute);
	margin-bottom: 2px;
}
#notify_content .nx-d-driver-name {
	font-size: 14px;
	font-weight: 700;
	color: var(--nx-text);
	letter-spacing: -0.005em;
}
#notify_content .nx-d-row {
	display: flex;
	gap: 12px;
	padding: 8px 0;
	border-top: 1px solid var(--nx-border);
}
#notify_content .nx-d-row:first-child { border-top: 0; padding-top: 0; }
#notify_content .nx-d-row-label {
	flex: 0 0 100px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--nx-text-mute);
	padding-top: 1px;
}
#notify_content .nx-d-row-val {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--nx-text);
}
#notify_content .nx-d-section-label {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--nx-text-mute);
	margin-bottom: -2px;
}
#notify_content .nx-d-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
#notify_content .nx-d-list > li {
	position: relative;
	padding: 8px 12px 8px 26px;
	background: var(--nx-bg);
	border: 1px solid var(--nx-border);
	border-radius: 7px;
	font-size: 12.5px;
	color: var(--nx-text);
	line-height: 1.45;
	word-break: break-word;
}
#notify_content .nx-d-list > li::before {
	content: "";
	position: absolute;
	left: 12px;
	top: 14px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--nx-text-mute);
}
#notify_content .nx-d-list-rich > li {
	padding-left: 12px;
}
#notify_content .nx-d-list-rich > li::before { display: none; }
#notify_content .nx-d-li-main {
	font-weight: 700;
	color: var(--nx-text);
	font-size: 12.5px;
	margin-bottom: 2px;
}
#notify_content .nx-d-li-meta {
	font-size: 11.5px;
	color: var(--nx-text-2);
	line-height: 1.45;
}
#notify_content .nx-d-pre {
	margin: 0;
	padding: 10px 12px;
	background: var(--nx-bg);
	border: 1px solid var(--nx-border);
	border-radius: 7px;
	font: inherit;
	font-size: 12.5px;
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-word;
	color: var(--nx-text-2);
}

/* ── Detail expander ───────────────────────────────────────────── */
#notify_content .nx-detail {
	margin: 8px -8px -8px;
	padding: 10px 12px 12px;
	background: var(--nx-bg-soft);
	border-top: 1px dashed var(--nx-border);
	border-radius: 0 0 8px 8px;
	font-size: 12px;
	color: var(--nx-text-2);
	max-height: 360px;
	overflow-y: auto;
	overscroll-behavior: contain;
}
/* Detail-inner now hosts curated .nx-d-* markup built per-kind by the
   formatters, not raw email HTML. We just keep it as a thin scope:
   reasonable spacing for any inline links and a defensive img cap so
   any stray legacy detail still degrades gracefully. */
#notify_content .nx-detail-inner img {
	max-width: 100%;
	height: auto;
}
#notify_content .nx-detail-inner a { color: var(--nx-brand); }
#notify_content .nx-detail-inner a:hover { color: var(--nx-brand-2); }

/* ── Empty state ───────────────────────────────────────────────── */
#notify_content .nx-empty {
	padding: 48px 20px;
	text-align: center;
	color: var(--nx-text-mute);
}
#notify_content .nx-empty-glyph {
	width: 56px;
	height: 56px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: var(--nx-bg-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--nx-text-mute);
	font-size: 22px;
	border: 1px solid var(--nx-border);
}
#notify_content .nx-empty-msg {
	font-size: 14px;
	font-weight: 700;
	color: var(--nx-text);
	margin-bottom: 4px;
}
#notify_content .nx-empty-sub {
	font-size: 12.5px;
	color: var(--nx-text-2);
}

/* ── Bell pulse when there are unread items ─────────────────────
   Brief 5-pulse burst on the badge so the bell feels alive without
   strobing. FINITE on purpose (do not restore `infinite`): an infinite
   animation forces Chrome to composite every frame forever — ~½ core
   per open tab even while idle, on headless AND real users' browsers.
   It pulses, then the page goes truly idle (0% CPU). */
div.notify_num {
	animation: nx-badge-pulse 2.4s ease-in-out 5;
}
@keyframes nx-badge-pulse {
	0%, 70%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220,38,38,0); }
	35%           { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(220,38,38,0); }
}

/* ── Responsive: tablet & narrow desktops ──────────────────────── */
@media (max-width: 720px) {
	div#notify_content {
		left: 8px;
		right: 8px;
		top: 56px;
		width: auto;
		max-width: none;
	}
	/* Tight header: drop the "Mark all read" text, keep icon + tooltip.
	   Card title row gets a touch more breathing room since touch
	   targets need to be a bit larger. */
	#notify_content .nx-clear-all span { display: none; }
	#notify_content .nx-clear-all { padding: 7px 9px; }
	/* Keep the card flush (padding:0) so the gray rail fills top-to-bottom —
	   the body carries the spacing. A card padding here leaves the rail short. */
	#notify_content .nx-card { padding: 0; }
	#notify_content .nx-rail { width: 40px; flex: 0 0 40px; }
	#notify_content .nx-rail-pip { width: 26px; height: 26px; }
}
div.notify-title {
	flex:1;
}
div#notify_content i {
	font-size: 13px;
}
div#notify_content i.fa-cog {
	margin-left: 8px;
    font-size: 20px;
    vertical-align: text-top;
    top: -2px;
    position: relative;
}
div#notify_content div.not_action i {
	margin-right: 10px;
    font-size: 15px;
    vertical-align: text-bottom;
	padding: 10px;
	margin:0px;
}
/* Fallback if messaging.css not loaded; header pills use .header-btn > .notify_num there */
div.notify_num {
	font-weight: bold;
	padding: 0 4px;
	border-radius: 8px;
	background: #ef4444;
	position: absolute;
	color: #FFF;
	min-width: 16px;
	height: 16px;
	line-height: 1;
	top: 0 !important;
	right: -2px !important;
	left: auto !important;
	display: none;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 10px;
	font-weight: 600;
}
div.notify_num.is-on {
	display: flex !important;
}
div.not_action {
	font-weight: bold;
    position: absolute;
    top: 0px;
    right: 0px;
}
div.not_action i {
	cursor:pointer;
}
div.not_info {
	margin-top: 5px;
	width:100%;
}
div.not_info input.no_style, div.not_info select.no_style {
	border-bottom:1px solid #666;
	font-size:12px;
}
div#notify_content div.not_action i.com_hover:hover {
	background-color: #00a8cc;
	color:#FFF;
}
div#notify_content div.not_action i.quo_hover:hover {
	background-color: #0e606d;
	color:#FFF;
}
div#notify_content div.not_action i.app_hover:hover {
	background-color: rgba(38, 148, 68, 0.88);
	color:#FFF;
}
div#notify_content div.not_action i.snooze_hover:hover {
	background-color: rgba(204, 121, 0, 0.69);
	color:#FFF;
}
div#notify_content div.not_action i.lost_hover:hover {
	background-color: #CC0003;
	color:#FFF;
}
div.notify_em {
	width:100%;
	margin-top:5px;
	display:none;
}
div.notify_em textarea {
	margin-bottom:5px;
}
span.pad_right {
	padding-right: 170px;
    width: 100%;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
	text-align: left;
}
span.em_select {
	padding: 2px 5px;
    border-radius: 3px;
    border: 1px solid #999;
	margin: 2px;
	background-color: rgba(0,0,0,0.05);
	display: inline-block;
	cursor:pointer;
	color:#666;
}
span.em_select:hover {
    border: 1px solid #777;
	background-color: rgba(35, 174, 241, 0.6);
	color:#000;
}
div#notify_content span.em_select i {
	display:none;
	margin-right:5px;
	vertical-align: text-bottom;
    font-size: 12px;
    top: -1px;
    position: relative;
}
span.em_select.sd {
	background-color:rgba(35, 174, 241, 0.4);
	font-weight:600;
	color:#000;
}
div#notify_content span.em_select.sd i {
	display:inline-block;
}
div.em_sub {
	margin:5px 0px;
}
div.mark_lost {
	margin: 8px auto 3px auto;
}
div.mark_lost input.no_style {
	border-bottom: 1px solid #CCC;
	font-size:12px;
}
div#prod_proc {
	margin-top:10px;
}
/* Hide the AI assistant bar in the production panel for now.
   Remove this rule (or set display: block) to bring it back. */
div.prod-ai-bar { display: none !important; }
table#prod_setup, table#sort_str {
	width:95%;
}
table#prod_setup tbody, table#sort_str tbody {
	font-weight:600;
}
table#prod_setup tr:nth-child(even), table#sort_str tr:nth-child(even) {
	background: rgba(99,99,99,0.05);
}
table#prod_setup input[type=checkbox] {
	margin-right:5px;
	vertical-align:middle;
	height:16px;
	width:16px;
    top: -2px;
}
table#prod_setup input[type=text], table#prod_setup select, table#sort_str input, table#sort_str select {
    background-color: transparent;
    border: 0px;
	padding: 0px 1px;
	font-weight: 600;
    font-size: 12px;
}
table#prod_setup tr td, table#prod_setup tr.it_head.grp td, table#prod_setup tr.it_dets.grp td, table#prod_setup tr.it_dets td, table#sort_str tr td {
	padding-left:7px;
	padding-top: 7px;
    padding-bottom: 6px;
	text-align:left;
	position:relative;
}
table#prod_setup tr.it_head td {
	padding-left:7px;
	padding-top: 12px;
    padding-bottom: 11px;
	text-align:left;
}
table#prod_setup tr td:last-child {
	padding-right:7px;
}
table#prod_setup tr.prod_grp {
    text-transform: uppercase;
    color: #000;
	border-bottom: 1px solid rgba(24, 80, 19, 0.75);
}
table#prod_setup tr.prod_grp div {
	padding:5px 8px;
	color:#FFF;
	background:rgb(9, 87, 9);
	display:inline-block;
}
table#prod_setup tr.prod_grp td {
	padding-top: 10px;
    padding-bottom: 0px;
    padding-left: 0px;
	text-align: left;
}
table#prod_setup tr.prod_chk {
	background: rgba(191, 237, 187, 0.75);
}
table#prod_setup tr.prod_chk:nth-child(even) {
	background: rgba(191, 237, 187, 0.50);
}
form[name=vform], form[name=dt_form], form[name=prod_form], div.ord_prod {
	opacity: 0.999;
}
table#prod_setup tr td.select_head {
	font-size:18px;
	color:#0c4d8b;
	padding-bottom:12px;
	text-transform: uppercase;
    font-weight: 600;
	text-align:center;
}
table#prod_setup tr input.prod_date {
	text-align:center;
}
table#prod_setup tr label {
	top: 7px;
    font-size: 11px;
    left: 7px;
	width:100%;
	padding-right: 7px;
    box-sizing: border-box;
}
table#prod_setup tr.add_more_q label {
	top: -1px;
    left: 0px;
	padding-right: 0px;
}
table#prod_setup tr input:focus ~ label, table#prod_setup tr input.not_empty ~ label, table#prod_setup tr select:focus ~ label, table#prod_setup tr select.not_empty ~ label {
	display:none;
}
table#prod_setup tr[id^=prod_draw] button {
	display:none;
	margin-top:0px;
	top:0px;
	vertical-align: middle;
}
table#prod_setup tr[id^=prod_draw]:hover button {
	display:inline-block;
}
/*
table#prod_setup tr.grp {
	background-color:rgba(191, 237, 187, 0.75);
}
table#prod_setup tr.grp:nth-child(even) {
	background-color:rgba(191, 237, 187, 0.50);
}*/
input[name=total] {
	font-size:12px;
}
div.lm_container {
	width:115px;color:#FFF;background-color:#038309;font-size:12px;border-bottom-right-radius:8px;border-bottom-left-radius:8px;padding:6px 5px 7px 5px;margin: 0px auto;text-align: center;font-weight: 500;display:none;cursor:pointer;position:absolute;left:165px;right:0;
}
span.labeled {
    font-size: 10px;
    color: #0c4d8b;
    font-weight: 600;
    text-transform: uppercase;
	display:block;
	margin-bottom:5px;
}
div#quote_text {
	padding:10px;
	box-sizing:border-box;
}
div#quote_text div.text_div {
	display:inline-block;
	padding-right:10px;
	padding-left:10px;
	margin-top:10px;
	text-align:left;
	width:100%;
	box-sizing:border-box;
}
/* ── Delivery form — modern filter-group inputs ────────────────────── */
div.dt_form {
	display: flex;
	gap: 10px;
	max-width: 96%;
	margin-top: 16px;
	align-items: stretch;
}
/* Filter-group fields (bordered card inputs) */
div.dt_form .dt_field {
	display: flex;
	align-items: center;
	gap: 4px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	position: relative;
	transition: all 0.15s ease;
	min-width: 0;
}
div.dt_form .dt_field:focus-within {
	border-color: #0c4d8b;
	box-shadow: 0 0 0 2px rgba(12,77,139,0.10);
}
div.dt_form .dt_field[data-label]::before {
	content: attr(data-label);
	position: absolute;
	top: -7px;
	left: 8px;
	padding: 0 4px;
	background: #fff;
	color: #64748b;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	pointer-events: none;
	z-index: 1;
	white-space: nowrap;
}
div.dt_form .dt_field input,
div.dt_form .dt_field select {
	border: none;
	border-bottom: none;
	background: transparent;
	font-size: 13px;
	font-family: inherit;
	color: #1e293b;
	padding: 6px 10px;
	margin: 0;
	outline: none;
	width: 100%;
	min-width: 0;
}
div.dt_form .dt_field select {
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 24px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path fill="%2394a3b8" d="M5 6L0 0h10z"/></svg>');
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 8px;
}
/* Textarea field */
div.dt_form .dt_field_ta {
	align-items: flex-start;
	padding: 8px 10px;
}
div.dt_form .dt_field_ta textarea {
	border: none;
	background: transparent;
	font-size: 13px;
	font-family: inherit;
	color: #1e293b;
	padding: 0;
	outline: none;
	width: 100%;
	resize: vertical;
	min-height: 100px;
}
div.dt_form .dt_field_ta textarea::placeholder {
	color: #94a3b8;
}
/* Copy-from-order link inside delivery notes */
.dt_copy_notes {
	position: absolute;
	top: -7px;
	right: 8px;
	padding: 0 4px;
	background: #fff;
	font-size: 10px;
	font-weight: 500;
	color: #0c4d8b;
	cursor: pointer;
	z-index: 1;
	letter-spacing: .02em;
}
.dt_copy_notes:hover {
	color: #093a6a;
	text-decoration: underline;
}
.dt_copy_notes i {
	font-size: 9px;
	margin-right: 1px;
}
div.dt_form .dt_field input:focus,
div.dt_form .dt_field select:focus,
div.dt_form .dt_field_ta textarea:focus {
	outline: none;
	box-shadow: none;
}
/* Delivery window separator */
span.dt_sep {
	color: #94a3b8;
	font-weight: 600;
	flex-shrink: 0;
	padding: 0 2px;
}
/* Left column: notes textarea */
div.dt_form .s_notes {
	flex: 0 0 36%;
	min-width: 260px;
	align-self: flex-start;   /* don't stretch the box to the taller field column — its height is the textarea */
}
/* Right column: fields stacked */
div.dt_form .dt_fields_right {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}
div.dt_form .dt_fields_row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
div.dt_form .dt_fields_row .dt_field {
	flex: 1;
	min-width: 110px;
}
/* Toggle pill controls */
.dt_toggles {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	padding-top: 2px;
}
.dt_toggle_group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
}
.dt_toggle_label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #94a3b8;
	margin-left: 8px;
	margin-right: 2px;
}
/* Delivery options + print pills — same circular-checkmark pattern as
   .sch-pill (orders page) but compressed to dt_pill's compact height
   so the toolbar density stays put. The ::before pseudo-element is the
   check slot: empty when off, fills with white + a HUB-blue (or green
   for print) checkmark when on. */
label.dt_pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 22px;
	padding: 0 11px 0 5px;
	border-radius: 999px;
	border: 1px solid #cbd5e1;
	background-color: #fff;
	color: #475569;
	font-size: 11px;
	font-weight: 600;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 0.01em;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .08s ease;
	user-select: none;
	box-sizing: border-box;
	position: relative;
}
label.dt_pill::before {
	content: "";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 12px;
	height: 12px;
	border: 1.5px solid #cbd5e1;
	border-radius: 50%;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
	font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
	font-weight: 900;
	font-size: 7px;
	color: transparent;
	box-sizing: border-box;
	flex: 0 0 auto;
}
label.dt_pill:hover {
	border-color: #94a3b8;
	background-color: #f8fafc;
	color: #0c4d8b;
}
label.dt_pill:hover::before {
	border-color: #0c4d8b;
}
label.dt_pill:active {
	transform: scale(0.97);
}
label.dt_pill:has(input:checked) {
	background-color: #0c4d8b;
	border-color: #0c4d8b;
	color: #fff;
	box-shadow: 0 1px 2px rgba(12, 77, 139, 0.18),
	            inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
label.dt_pill:has(input:checked):hover {
	background-color: #0a3f73;
	border-color: #0a3f73;
	color: #fff;
}
label.dt_pill:has(input:checked)::before {
	content: "\f00c"; /* fa-check */
	background: #fff;
	border-color: #fff;
	color: #0c4d8b;
}
label.dt_pill.dt_pill_print:has(input:checked) {
	background-color: #059669;
	border-color: #059669;
	color: #fff;
	box-shadow: 0 1px 2px rgba(5, 150, 105, 0.20),
	            inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
label.dt_pill.dt_pill_print:has(input:checked):hover {
	background-color: #047857;
	border-color: #047857;
}
label.dt_pill.dt_pill_print:has(input:checked)::before {
	color: #0c4d8b;
}
label.dt_pill input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}
label.dt_pill:has(input:focus-visible) {
	box-shadow: 0 0 0 3px rgba(12, 77, 139, 0.20);
}
span.rs_fee {
	display: inline-flex;
	align-items: center;
}
/* Restocking-fee amount — a pill-shaped field that matches the dt_pill toggles
   (replaces the old underlined "$___" input). */
.rs_fee_input {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	height: 22px;
	margin-left: 6px;
	padding: 0 10px;
	border: 1px solid #cbd5e1;
	border-radius: 999px;
	background-color: #fff;
	box-sizing: border-box;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.rs_fee_input:focus-within {
	border-color: #0c4d8b;
	box-shadow: 0 0 0 3px rgba(12, 77, 139, 0.16);
}
.rs_fee_cur {
	color: #94a3b8;
	font-size: 11px;
	font-weight: 700;
	font-family: 'Montserrat', sans-serif;
}
.rs_fee_input input {
	border: none !important;
	outline: none;
	background: transparent;
	box-shadow: none !important;
	width: 52px;
	height: 18px;
	min-height: 0;
	padding: 0 !important;
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	font-family: 'Montserrat', sans-serif;
	color: #0c4d8b;
	letter-spacing: 0.01em;
}
[data-theme="dark"] .rs_fee_input { background: #0f1623; border-color: #2d3a52; }
[data-theme="dark"] .rs_fee_input input { color: #93c5fd; }
[data-theme="dark"] .rs_fee_cur { color: #64748b; }
/* Two-row toggle layout: a simple flex row per group (no column grid). A
   fixed-width leading label keeps both rows' pills starting at the same left
   edge; every pill is one fixed width (so all pills match) and the row is
   left-packed, trailing off before the panel edge. Going flex (vs a 6-col grid
   that had to divide the panel) lets the pills be a touch wider than the grid
   could allow. */
.dt_toggles > .dt_toggle_group {
	display: flex;
	align-items: center;
	gap: 6px;
}
.dt_toggles .dt_toggle_group > .dt_toggle_label { flex: 0 0 54px; }
.dt_toggles .dt_toggle_group > .dt_pill { justify-content: center; flex: 0 0 133px; width: 133px; min-width: 0; }
.dt_toggles .dt_toggle_group > .rs_fee { flex: 0 0 133px; min-width: 0; }
/* The restock toggle is nested in span.rs_fee — fill the wrapper + center like
   the direct-child pills so it's the same width and its icon/text are centered. */
.dt_toggles .dt_toggle_group > .rs_fee > .dt_pill { flex: 1 1 auto; width: 100%; min-width: 0; justify-content: center; }
/* Restock $ amount is compact — content-width, sitting right after the toggle. */
.dt_toggles .dt_toggle_group > .rs_fee_input { flex: 0 0 auto; align-self: center; margin-left: 0; }
/* Leading icon per pill — replaces the old empty indicator circle. Inherits the
   pill's text color (slate → white/blue when selected), so no green is involved
   and the OPTIONS(navy) / PRINT(light-blue) selected languages are untouched. */
.dt_toggles label.dt_pill::before { display: none; }
.dt_toggles label.dt_pill .dt_pill_ic {
	font-size: 11px;
	width: 13px;
	text-align: center;
	flex: 0 0 auto;
	opacity: 0.92;
}
/* Delivery loading spinner */
div.loading_dlv {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 60px 0 40px;
}
div.loading_dlv span {
	font-size: 13px;
	font-weight: 500;
	color: #94a3b8;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
div.loading_dlv_spinner {
	width: 36px;
	height: 36px;
	border: 3px solid #e2e8f0;
	border-top-color: #4a9eff;
	border-radius: 50%;
	animation: dlv_spin 0.7s linear infinite;
}
@keyframes dlv_spin {
	to { transform: rotate(360deg); }
}
/* Modern delivery ticket buttons */
div#dt_buttons {
	margin-top: 14px;
	padding: 14px 16px;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	background: #f8fafc;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	justify-content: center;
}
div#dt_buttons button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 14px !important;
	border-radius: 8px !important;
	font-size: 12px !important;
	font-weight: 500;
	border: 1px solid #e2e8f0 !important;
	background: #ffffff !important;
	color: #475569 !important;
	cursor: pointer;
	transition: all 0.2s ease;
	margin: 0 !important;
	top: 0 !important;
	overflow: visible !important;
	text-transform: none !important;
}
div#dt_buttons button:hover {
	background: #f1f5f9 !important;
	border-color: #cbd5e1 !important;
	color: #1e293b !important;
	transform: translateY(-1px);
}
div#dt_buttons button i {
	font-size: 14px !important;
	padding: 0 !important;
	margin: 0 !important;
	height: auto !important;
}
div#dt_buttons button span {
	display: inline !important;
}
div#dt_buttons button:after {
	display: none !important;
}
/* Generate Ticket — primary green */
div#dt_buttons button[name=dt_gen] {
	background: #059669 !important;
	color: #fff !important;
	border-color: #059669 !important;
	font-weight: 600;
}
div#dt_buttons button[name=dt_gen]:hover {
	background: #047857 !important;
	border-color: #047857 !important;
	color: #fff !important;
}
/* Save — teal */
div#dt_buttons button[name=dt_save] {
	background: #0d9488 !important;
	color: #fff !important;
	border-color: #0d9488 !important;
	font-weight: 600;
}
div#dt_buttons button[name=dt_save]:hover {
	background: #0f766e !important;
	border-color: #0f766e !important;
	color: #fff !important;
}
/* Generated tickets header + search + pagination */
div.dt_old_header {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}
.dt_old_controls {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}
select.dt_tpp,
select.dt_type_filter,
select.dt_status_filter {
	font-size: 12px;
	padding: 4px 8px;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	background: #fff;
	color: #475569;
	cursor: pointer;
	outline: none;
	box-sizing: border-box;
}
.dt_search_wrap {
	position: relative;
	display: flex;
	align-items: center;
}
.dt_search_wrap i {
	position: absolute;
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 11px;
	color: #94a3b8;
	pointer-events: none;
	z-index: 1;
}
input.dt_tick_filter {
	font-size: 12px;
	padding: 4px 10px 4px 26px;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	background: #fff;
	color: #334155;
	width: 100px;
	outline: none;
	transition: border-color 0.15s;
	box-sizing: border-box;
}
input.dt_tick_filter:focus {
	border-color: #4a9eff;
}
/* Pagination */
div.dt_pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 6px 0;
}
span.dt_pg_btn {
	cursor: pointer;
	color: #0c4d8b;
	font-size: 12px;
	padding: 4px 8px;
	border-radius: 4px;
	transition: background 0.15s;
}
span.dt_pg_btn:hover {
	background: rgba(12,77,139,0.08);
}
span.dt_pg_info {
	font-size: 11px;
	color: #64748b;
	font-weight: 600;
}
div.past_ticket.dt_filtered {
	display: none !important;
}
tr.it_list, tr.it_dets {
	display:none;
	position:relative;
}
tr.it_list {
	cursor:pointer;
}
table#prod_setup tr.it_list:hover, table#prod_setup tr.it_list:nth-child(even):hover {
	background-color:rgba(103, 184, 158, 0.65);
}
table#prod_setup tbody.grp tr.it_list:hover, table#prod_setup tbody.grp tr.it_list:nth-child(even):hover {
	background-color:rgba(89, 158, 101, 0.7);
}
tbody.body_item tr.it_head {
	cursor:pointer;
}
table#prod_setup {
	border-collapse: collapse;
}
table#prod_setup tr.it_dets.grp.it0, table#prod_setup tr.it_dets.grp.it1 {
	border-left: 1px solid rgba(24, 80, 19, 0.75);
	border-right: 1px solid rgba(24, 80, 19, 0.75);
}
table#prod_setup tr.it_dets.grp.it0, table#prod_setup tr.it_dets.grp.it1, table#prod_setup tr.it_dets.it0, table#prod_setup tr.it_dets.it1 {
	font-size:11px;
}
table#prod_setup tr.it_head.grp td:first-child, table#prod_setup tbody.grp tr.it_list td:first-child {
	border-left: 1px solid rgba(24, 80, 19, 0.75);
}
table#prod_setup tr.it_head.grp td:last-child, table#prod_setup tbody.grp tr.it_list td:last-child {
	border-right: 1px solid rgba(24, 80, 19, 0.75);
}
table#prod_setup tr.it_head.grp.grp_last td, table#prod_setup tbody.grp_last tr:last-child td, table#prod_setup tbody.grp_last tr:not(.it_sel):first-child td {
	border-bottom: 1px solid rgba(24, 80, 19, 0.75);
}
table#prod_setup tbody.grp_last::after, table#prod_setup tbody.body_item.grp_last:nth-child(even)::after {
	content: '';
	display: block;
	position:relative;
	height: 0px;
	padding-bottom:10px;
	background-color:#F0F0F0;
	width:100%;
	left:-4px;
	padding-right: 5px;
}
/*
table#prod_setup tr.it_head.grp.it0, table#prod_setup tr.it_dets.grp.it0 {
	background-color:rgba(191, 237, 187, 0.75);
}
table#prod_setup tr.it_head.grp.it1, table#prod_setup tr.it_dets.grp.it1 {
	background-color:rgba(191, 237, 187, 0.50);
}
*/
table#prod_setup tr.it_head.it0, table#prod_setup tr.it_dets.it0 {
	/*background-color:rgba(149, 224, 200, 0.4);
	border-right: 1px solid rgba(149, 224, 200, 0.4);*/
}
table#prod_setup tr.it_head.it1, table#prod_setup tr.it_dets.it1 {
	/*background-color:rgba(149, 224, 200, 0.65);
	border-right: 1px solid rgba(149, 224, 200, 0.65);*/
}
table#prod_setup tr.grp.it_head:hover {
	background:rgba(89, 158, 101, 0.7);
	border-right: 1px solid rgba(89, 158, 101, 0.7);
}
table#prod_setup tr.it_head:hover {
	background:rgba(103, 184, 158, 0.65);
	border-right: 1px solid rgba(103, 184, 158, 0.65);
}
table#prod_setup tr.it_head.it0.it_sel, table#prod_setup tr.it_head.it1.it_sel, table#prod_setup tr.it_dets.it0, table#prod_setup tr.it_dets.it1 {
	background:rgba(103, 184, 158, 0.65);
	border-right: 1px solid rgba(103, 184, 158, 0.65);
}
table#prod_setup tr.it_head.grp.it0.it_sel, table#prod_setup tr.it_head.grp.it1.it_sel, table#prod_setup tr.it_dets.grp.it0, table#prod_setup tr.it_dets.grp.it1 {
	background:rgba(89, 158, 101, 0.7);
}
table#prod_setup tbody.grp.it_sel, table#prod_setup tbody.body_item.grp.it_sel:nth-child(even) {
	background-color:rgba(142, 243, 142, 0.37);
	border-left: 4px solid rgb(9, 87, 9);
}
table#prod_setup tbody.it_sel, table#prod_setup tbody.body_item.it_sel:nth-child(even) {
	background-color: rgba(128, 223, 193, 0.38);
	border-left: 4px solid rgb(21, 80, 62);
}
table#prod_setup tbody.it_sel tr.it_sel div.prod_prog {
	border: 1px solid rgba(80, 77, 77, 0.55);
}
div.prod_prog {
	width: 140px;
    text-align: right;
    height: 7px;
    border: 1px solid rgba(153, 153, 153, 0.57);
	border-radius: 3px;
	display:inline-block;
}
div.pp_bar {
	background-color:#006E13;
	text-align:left;
	height:100%;
	border-radius: 2px;
	width:0%;
}
table#prod_setup tr#prod_draws {
	border-right: 1px solid rgba(24, 80, 19, 0.75);
	border-bottom: 1px solid rgba(24, 80, 19, 0.22);
	background:rgba(122, 183, 131, 0.31);
}
table#prod_setup tr.pd_sel:nth-child(even), table#prod_setup tr.pd_sel {
	border-top: 1px solid rgba(24, 80, 19, 0.22);
	background:rgba(122, 183, 131, 0.31);
}
table#prod_setup button.sm_button {
	margin-top:0px;
	top:0px;
	margin-left:10px;
	font-size:11px;
	padding: 4px 10px 2px 8px;
	position: relative;
    right: 0px;
    top: 0px;
	color:#000;
}
table#prod_setup tbody.grp button.sm_button {
	padding: 1px 12px 1px 3px;
	top: 2px;
}
table#prod_setup button.sm_button:hover {
	color:#FFF;
}
table#prod_setup tbody.body_item:nth-child(even) {
	background:rgba(99,99,99,0.05);
}
tr.it_list i.fa-trash-alt {
	position: absolute;
    right: -30px;
    font-size: 20px;
    top: 0px;
    color: #000;
    display: none;
    padding-left: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-right: 8px;
}
tr.it_list:hover i {
    display: block;
}
tr.it_list i.fa-trash-alt:hover {
	background:#CC0003;
	color:#FFF;
}
table#prod_setup tr.it_head button.sm_button i {
	font-size:13px;
	padding:0px;
	top:3px;
}
table#prod_setup tr.add_more_q select {
	margin-right: 5px;
    min-width: 35px;
}
table#prod_setup tr.add_more_q i {
	font-size: 20px;
    margin-right: 10px;
    margin-left: 5px;
    top: 3px;
    position: relative;
	color: #000;
	cursor:pointer;
}
table#prod_setup tr.add_more_q i:hover {
	color:rgb(9, 87, 9);
}
table#prod_setup tr.aq_draw, table#prod_setup tr.add_more_q.aq_sel {
	background: rgba(26, 169, 41, 0.15);
}
table#prod_setup tr.aq_draw {
	border-bottom: 1px solid rgba(24, 80, 19, 0.75);
	border-right: 1px solid rgba(24, 80, 19, 0.75);
	border-left: 1px solid rgba(24, 80, 19, 0.75);
}
table#prod_setup tr.add_more_q.aq_sel {
	border-top: 1px solid rgba(24, 80, 19, 0.75);
	border-right: 1px solid rgba(24, 80, 19, 0.75);
	border-left: 1px solid rgba(24, 80, 19, 0.75);
}
table#prod_setup tr.add_more_q div {
	position:relative;
	margin-left:7px;
	top: 4px;
}

/* ── Production loading spinner ── */
div.loading_prod {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 60px 0 40px;
}
div.loading_prod span {
	font-size: 13px;
	font-weight: 500;
	color: #94a3b8;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
div.loading_prod_spinner {
	width: 36px;
	height: 36px;
	border: 3px solid #e2e8f0;
	border-top-color: #006E13;
	border-radius: 50%;
	animation: prod_spin 0.7s linear infinite;
}
@keyframes prod_spin {
	to { transform: rotate(360deg); }
}

/* ── Production card container ── */
div.prod-container {
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 8px;
}
div.prod-title-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	flex-wrap: wrap;
	gap: 8px;
}
div.prod-title-bar .prod-title-text {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	color: #475569;
	letter-spacing: 0.04em;
}
div.prod-buttons {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
div.prod-buttons button {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 14px;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	background-color: #fff;
	font-size: 12px;
	font-weight: 500;
	color: #334155;
	cursor: pointer;
	transition: all 0.15s ease;
	white-space: nowrap;
}
div.prod-buttons button:hover {
	background-color: #f1f5f9;
	border-color: #cbd5e1;
	color: #0f172a;
}
div.prod-buttons button i {
	font-size: 13px;
	color: #64748b;
}
div.prod-buttons button:hover i {
	color: #334155;
}

/* ── Production action bar ──
   Single compact row replacing the legacy title + buttons + contact
   strip. Buttons left, production-contact picker right (or wraps
   underneath at narrow widths). The picker is intentionally sized to
   match the buttons so the row reads as one cohesive control strip
   instead of competing layers. */
div.prod-action-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}
div.prod-action-bar .prod-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	flex: 1 1 auto;
}
div.prod-contact-inline {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0 4px 0 10px;
	height: 30px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	flex: 0 0 auto;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
div.prod-contact-inline:hover {
	border-color: #cbd5e1;
}
div.prod-contact-inline:focus-within {
	border-color: #0c4d8b;
	box-shadow: 0 0 0 2px rgba(12,77,139,0.1);
}
div.prod-contact-inline > i {
	color: #64748b;
	font-size: 12px;
	flex: 0 0 auto;
}
div.prod-contact-inline .prod-contact-select {
	border: 0 !important;
	background: transparent !important;
	padding: 0 6px !important;
	margin: 0 !important;
	height: 28px;
	font-size: 12px !important;
	font-weight: 500 !important;
	color: #334155;
	cursor: pointer;
	max-width: 180px;
	min-width: 120px;
	outline: none;
}
[data-theme="dark"] div.prod-contact-inline {
	background: #1f293c;
	border-color: #344058;
}
[data-theme="dark"] div.prod-contact-inline:hover { border-color: #4a5b7a; }
[data-theme="dark"] div.prod-contact-inline > i { color: #94a3b8; }
[data-theme="dark"] div.prod-contact-inline .prod-contact-select { color: #e2e8f0; }

/* ── Production cards ── */
div.prod-cards {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
div.prod-card {
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	background-color: #fff;
	overflow: hidden;
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
div.prod-card:hover {
	box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
div.prod-card.prod-card-expanded {
	border-color: #93c5fd;
	box-shadow: 0 2px 8px rgba(12,77,139,0.08);
}
div.prod-card.prod-card-grp {
	border-left: 3px solid #006E13;
}
div.prod-grp-item {
	border-bottom: 1px solid #f1f5f9;
}
div.prod-grp-item:last-of-type {
	border-bottom: none;
}

/* ── Card header ── */
div.prod-card-header {
	display: flex;
	align-items: center;
	padding: 10px 14px;
	cursor: pointer;
	gap: 12px;
	user-select: none;
	transition: background-color 0.12s ease;
}
div.prod-card-header:hover {
	background-color: #f8fafc;
}
div.prod-card-expanded .prod-card-header {
	background-color: #f0fdf4;
	border-bottom: 1px solid #e2e8f0;
}
div.prod-card-grp.prod-card-expanded .prod-card-header {
	background-color: #ecfdf5;
}
div.prod-card-header .prod-card-name {
	flex: 1;
	font-size: 13px;
	font-weight: 600;
	color: #1e293b;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: left;
}
div.prod-card-header .prod-card-sort {
	font-size: 13px;
	color: #94a3b8;
	cursor: pointer;
	padding: 4px 6px;
	border-radius: 4px;
	transition: all 0.15s ease;
	flex-shrink: 0;
}
div.prod-card-header .prod-card-sort:hover {
	color: #006E13;
	background-color: rgba(0,110,19,0.06);
}
div.prod-card-header .prod-card-qty-badge {
	font-size: 11px;
	font-weight: 600;
	color: #006E13;
	background-color: rgba(0,110,19,0.08);
	padding: 2px 8px;
	border-radius: 10px;
	white-space: nowrap;
}
div.prod-card-header .prod-card-progress {
	width: 100px;
	height: 6px;
	background-color: #e2e8f0;
	border-radius: 3px;
	overflow: hidden;
	flex-shrink: 0;
}
div.prod-card-header .prod-card-progress-bar {
	height: 100%;
	background-color: #006E13;
	border-radius: 3px;
	transition: width 1.2s cubic-bezier(0.16,1,0.3,1);
}
div.prod-card-header .prod-card-stats {
	font-size: 11px;
	color: #64748b;
	white-space: nowrap;
}
div.prod-card-header .prod-card-chevron {
	font-size: 14px;
	color: #94a3b8;
	transition: transform 0.2s ease;
	flex-shrink: 0;
}
div.prod-card-expanded .prod-card-header .prod-card-chevron {
	transform: rotate(180deg);
}

/* ── Card body (collapsible) ── */
div.prod-card-body {
	display: none;
}
div.prod-card-expanded .prod-card-body {
	display: block;
}

/* ── Drawing row inside card ── */
div.prod-card-draws {
	padding: 10px 14px;
	border-bottom: 1px solid #f1f5f9;
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* ── Drawings toolbar ── */
div.prod-draws-toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding-bottom: 8px;
	border-bottom: 1px solid #f1f5f9;
	margin-bottom: 8px;
	flex-wrap: wrap;
}
input.prod-draws-search {
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	padding: 5px 10px 5px 28px;
	font-size: 12px;
	outline: none;
	width: 180px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") 8px center/14px no-repeat;
}
input.prod-draws-search:focus {
	border-color: #94a3b8;
	box-shadow: 0 0 0 2px rgba(148,163,184,0.15);
}
span.prod-draws-count {
	font-size: 11px;
	color: #94a3b8;
	white-space: nowrap;
}
div.prod-draws-actions {
	display: flex;
	gap: 6px;
	margin-left: auto;
}

/* ── Modernized draw action buttons ── */
button.prod-draws-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 12px;
	border: 1px solid #e2e8f0;
	border-radius: 7px;
	background-color: #fff;
	font-size: 11px;
	font-weight: 500;
	color: #475569;
	cursor: pointer;
	transition: all 0.15s ease;
	white-space: nowrap;
}
button.prod-draws-btn:hover {
	background-color: #f1f5f9;
	border-color: #cbd5e1;
	color: #0f172a;
}
button.prod-draws-btn i {
	font-size: 12px;
	color: #64748b;
}
button.prod-draws-btn:hover i {
	color: #334155;
}

/* ── Drawing grid ── */
div.prod-draws-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
	gap: 8px;
	width: 100%;
}

/* ── Individual drawing card ── */
div.prod-draw-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 6px;
	border-radius: 6px;
	border: 1px solid transparent;
	transition: all 0.12s ease;
	position: relative;
}
div.prod-draw-card:hover {
	background-color: #f8fafc;
	border-color: #e2e8f0;
}
div.prod-draw-card .dt_draw {
	display: block;
	margin-right: 0;
}
div.prod-draw-card .dt_draw img {
	max-width: 80px;
	width: 100%;
	border-radius: 4px;
	border: 1px solid #e2e8f0;
}
div.prod-draw-card .dt_draw img:hover {
	border-color: rgba(12, 77, 139, 0.4);
}

/* ── Selected drawing — UNIFIED LOOK ──
   The legacy `.dt_draw img.dt_draw_sel` rule at the top of this
   file paints a green border + green check overlay. That green
   reads as "ready / OK" in other contexts but in the production
   panel the user expects the SAME blue selection treatment they
   see in the "Add to Production" candidates panel. Override here
   (scoped to .prod-card-draws + .prod-draw-card) so live and setup
   panels share one visual language. */
div.prod-card-draws .dt_draw img.dt_draw_sel,
div.prod-draw-card .dt_draw img.dt_draw_sel,
div.prod-item-draws .dt_draw img.dt_draw_sel {
	border: 2px solid #0c4d8b !important;
	margin: -1px !important;
}
div.prod-card-draws .dt_draw img.dt_draw_sel ~ div.check,
div.prod-card-draws .dt_draw img.dt_draw_sel + div.check,
div.prod-draw-card .dt_draw img.dt_draw_sel ~ div.check,
div.prod-draw-card .dt_draw img.dt_draw_sel + div.check,
div.prod-item-draws .dt_draw img.dt_draw_sel ~ div.check,
div.prod-item-draws .dt_draw img.dt_draw_sel + div.check {
	background-color: rgba(12, 77, 139, 0.20) !important;
}
div.prod-card-draws .dt_draw img.dt_draw_sel ~ div.check i,
div.prod-card-draws .dt_draw img.dt_draw_sel + div.check i,
div.prod-draw-card .dt_draw img.dt_draw_sel ~ div.check i,
div.prod-draw-card .dt_draw img.dt_draw_sel + div.check i,
div.prod-item-draws .dt_draw img.dt_draw_sel ~ div.check i,
div.prod-item-draws .dt_draw img.dt_draw_sel + div.check i {
	color: #0c4d8b;
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}
span.prod-draw-label {
	display: block;
	font-size: 10px;
	color: #64748b;
	text-align: center;
	margin-top: 4px;
	line-height: 1.2;
	max-width: 85px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
a.prod-draw-link {
	position: absolute;
	top: 4px;
	right: 4px;
	font-size: 11px;
	color: #94a3b8;
	opacity: 0;
	transition: opacity 0.12s;
	text-decoration: none;
}
div.prod-draw-card:hover a.prod-draw-link {
	opacity: 1;
}
a.prod-draw-link:hover {
	color: #0c4d8b;
}

/* ── Draws pagination ── */
div.prod-draws-pag {
	display: flex;
	align-items: center;
	gap: 6px;
	padding-top: 8px;
	border-top: 1px solid #f1f5f9;
	margin-top: 8px;
	font-size: 11px;
}
div.prod-draws-pag button {
	border: 1px solid #e2e8f0;
	border-radius: 4px;
	background-color: #fff;
	color: #64748b;
	padding: 3px 8px;
	cursor: pointer;
	font-size: 11px;
	transition: all 0.12s ease;
}
div.prod-draws-pag button:hover:not(:disabled) {
	background-color: #f1f5f9;
	color: #0f172a;
}
div.prod-draws-pag button:disabled {
	opacity: 0.4;
	cursor: default;
}
div.prod-draws-pag span {
	color: #64748b;
}

/* ── Item row (replaces tr.it_list) ── */
div.prod-item {
	display: flex;
	align-items: center;
	padding: 7px 14px;
	gap: 8px;
	border-bottom: 1px solid #f1f5f9;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.1s ease;
}
div.prod-item:last-child {
	border-bottom: none;
}
div.prod-item:hover {
	/* Match the order line-item hover (#fafbfc) — the green tint here read as
	   "too dark" / out of family with the rest of the app's row hovers. */
	background-color: #fafbfc;
}
div.prod-item.pd_sel {
	background-color: rgba(122,183,131,0.18);
}
div.prod-card-grp .prod-item:hover {
	background-color: #fafbfc;
}
/* Auto-Attach flash — a piece that just received drawings tints briefly, then the
   class is removed (~2.5s) and the transition fades it out. Cards had no .highlight
   styling before, so the action gave no visual feedback. */
div.prod-item.highlight {
	background-color: rgba(252, 255, 77, 0.40);
	transition: background-color 0.5s ease;
}
div.prod-item .prod-field {
	position: relative;
}
/* Shared column widths for item rows AND header row */
div.prod-item .prod-field-qty,
div.prod-item-header .prod-field-qty {
	width: 36px;
	flex-shrink: 0;
	text-align: center;
}
div.prod-item .prod-field-name,
div.prod-item-header .prod-field-name {
	flex: 1;
	min-width: 0;
	text-align: left;
}
div.prod-item .prod-field-name input {
	text-align: left;
}
div.prod-item .prod-field-hrs,
div.prod-item-header .prod-field-hrs {
	width: 42px;
	flex-shrink: 0;
	text-align: center;
}
div.prod-item .prod-field-date,
div.prod-item-header .prod-field-date {
	width: 82px;
	flex-shrink: 0;
	text-align: center;
}
div.prod-item .prod-field-status,
div.prod-item-header .prod-field-status {
	width: 58px;
	flex-shrink: 0;
	text-align: center;
}
div.prod-item .prod-field-status {
	font-size: 11px;
	color: #64748b;
}
/* Stock-pull coring state pill (shown in the Poured slot for stock-pulled bases:
   amber while in Coring & Channeling, green once cored & channeled). */
.coring-pill {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 1px 6px;
	font-size: 9.5px;
	font-weight: 700;
	line-height: 1.45;
	border-radius: 999px;
	white-space: nowrap;
	background: #fff7ed;
	color: #b45309;
	border: 1px solid #fed7aa;
}
.coring-pill i { font-size: 8.5px; }
.coring-pill--done {
	background: #ecfdf5;
	color: #047857;
	border-color: #a7f3d0;
}
div.prod-item .prod-field-plant,
div.prod-item-header .prod-field-plant {
	width: 28px;
	flex-shrink: 0;
}
div.prod-item .prod-field-area,
div.prod-item-header .prod-field-area {
	width: 88px;
	flex-shrink: 0;
}
div.prod-item .prod-field-notes,
div.prod-item-header .prod-field-notes {
	width: 132px;
	flex-shrink: 0;
}
div.prod-item .prod-field-actions,
div.prod-item-header .prod-field-actions {
	width: 60px;
	flex-shrink: 0;
	text-align: right;
}
div.prod-item input[type=text], div.prod-item select {
	background-color: transparent;
	border: 0;
	padding: 2px 4px;
	font-weight: 600;
	font-size: 12px;
	width: 100%;
	box-sizing: border-box;
}
div.prod-item input[type=text]:focus, div.prod-item select:focus {
	outline: none;
	background-color: rgba(255,255,255,0.7);
	border-radius: 4px;
	box-shadow: 0 0 0 1.5px #93c5fd;
}
div.prod-item .warning {
	display: inline-block;
	margin-left: 2px;
}
div.prod-item i.fa-trash-alt {
	font-size: 12px;
	color: #94a3b8;
	cursor: pointer;
	transition: color 0.15s ease;
	padding: 4px;
}
div.prod-item i.fa-trash-alt:hover {
	color: #CC0003;
}
div.prod-item span.bar {
	display: block;
	width: 100%;
	top: -1px;
	position: relative;
}

/* Item column headers inside card body */
div.prod-item-header {
	display: flex;
	align-items: center;
	padding: 6px 14px;
	gap: 8px;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	color: #94a3b8;
	letter-spacing: 0.04em;
	border-bottom: 1px solid #e2e8f0;
	background-color: #fafbfc;
	user-select: none;
}
div.prod-item-header > span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Header spans inherit .prod-field from production.css which paints
   a 1px border + 8px radius + white background — that "bubble" treatment
   is meant for editable inputs, not column labels. Strip it here so the
   header row reads as plain uppercase text.
   Padding kept at 0 to MATCH the row's now-zeroed .prod-field padding
   — both sit flush with their column edge so centered labels line up
   with centered inputs / read-only dates below. */
div.prod-item-header > span.prod-field {
	background: transparent;
	border: 0;
	padding: 0;
	border-radius: 0;
	box-shadow: none;
	font-weight: 600;
}

/* ── Item row fields — match the "Add to Production" candidates input
   sizing (26px tall, 6px radius, 12px text, light grey border) so the
   two surfaces read as the same component family. The base .prod-field
   from production.css gives every cell a bubble; here we tighten its
   metrics for the prod-item row context AND strip the bubble entirely
   from the read-only / decorative cells (status dates, plant marker,
   action icons) where it just looks like an empty input.
   Horizontal padding is ZERO so the input inside fills the cell edge-
   to-edge (within its 1px border) — that's what makes the bubble
   width visually equal to the column width above. The input's own
   small horizontal padding gives the text breathing room from the
   border. */
div.prod-item > .prod-field {
	min-height: 26px;
	padding: 0;
	border-radius: 6px;
	/* Hover-reveal like the order line items: seamless text at rest, the field
	   frame (border + bg) only appears on hover/focus. border-color stays a 1px
	   transparent border (width unchanged) so revealing it causes no layout shift. */
	border-color: transparent;
	background: transparent;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}
div.prod-item > .prod-field-name,
div.prod-item > .prod-field-notes,
div.prod-item > .prod-field-area {
	justify-content: flex-start;
}
div.prod-item > .prod-field:hover {
	background: #fff;
	border-color: #e2e8f0;
}
div.prod-item > .prod-field:focus-within {
	background: #fff;
	border-color: #0c4d8b;
	box-shadow: 0 0 0 2px rgba(12,77,139,0.10);
}
div.prod-item > .prod-field input[type=text],
div.prod-item > .prod-field select {
	height: 22px;
	padding: 0 6px;
	font-size: 12px;
	font-weight: 600;
	flex: 1 1 auto;
	min-width: 0;
}
/* Legacy `<span class="bar">` sibling next to each input — was used
   as a Material-style underline before the .prod-field bubble was
   added. Now redundant: the bubble IS the visual frame, and the bar
   was eating ~50% of the flex row's width (block + width:100%),
   which is why the inputs looked half-sized. Hide it. */
div.prod-item > .prod-field span.bar {
	display: none;
}
div.prod-item > .prod-field input[type=text]:focus,
div.prod-item > .prod-field select:focus {
	background-color: transparent;
	box-shadow: none; /* the wrapper provides the focus ring */
}
/* Read-only status cells (Sched / Poured / Delivered) — these are
   plain text, NOT inputs, so the bubble reads as an empty field and
   confuses the eye. Render them as inline text instead. */
div.prod-item > .prod-field-status,
div.prod-item > .prod-field-plant,
div.prod-item > .prod-field-actions {
	background: transparent;
	border: 0;
	padding: 0;
	border-radius: 0;
	box-shadow: none;
	min-height: 0;
}
/* Center / right alignment of those bubble-less cells — flex's
   default flex-start was pinning the date text to the left edge of
   centered columns and breaking the SCHED / POURED / DELIVERED
   alignment with the header labels. */
div.prod-item > .prod-field-status {
	justify-content: center;
}
div.prod-item > .prod-field-plant {
	justify-content: center;
}
div.prod-item > .prod-field-actions {
	justify-content: flex-end;
	gap: 6px;
}
div.prod-item > .prod-field-status:focus-within,
div.prod-item > .prod-field-plant:focus-within,
div.prod-item > .prod-field-actions:focus-within {
	box-shadow: none;
	border-color: transparent;
}

/* ── Drawings count badge (right-side action area) ──
   Small paperclip chip showing how many drawings are attached to
   the line item. Sits next to the components icon + trash so the
   user can see attachment state at a glance without expanding the
   structure's drawings strip. */
.prod-draw-count-icon {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	height: 22px;
	padding: 0 7px;
	font-size: 10px;
	font-weight: 700;
	color: #0c4d8b;
	background: #eef4fb;
	border: 1px solid #bcd2ea;
	border-radius: 999px;
	cursor: default;
	user-select: none;
	font-style: normal;
}
.prod-draw-count-icon > i {
	font-size: 10px;
	margin: 0;
	flex-shrink: 0;
}
.prod-draw-count-icon .prod-draw-count-num {
	line-height: 1;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10px;
	letter-spacing: 0.02em;
}
.prod-draw-count-icon.is-empty {
	color: #94a3b8;
	background: #f8fafc;
	border-color: #e2e8f0;
}

/* ── 3-dot overflow menu trigger on each line item ──
   Replaces the inline Components + Delete icons on the right edge
   of a .prod-item row. Compact pill, hovers to slate, click toggles
   the .prod-item-menu popup (rendered on <body>, position: fixed). */
button.prod-item-menu-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 22px;
	padding: 0;
	border: 1px solid transparent;
	background: transparent;
	border-radius: 6px;
	color: #64748b;
	cursor: pointer;
	transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
button.prod-item-menu-btn:hover,
button.prod-item-menu-btn:focus {
	background: #f1f5f9;
	border-color: #cbd5e1;
	color: #0f172a;
	outline: none;
}
button.prod-item-menu-btn > i { font-size: 12px; line-height: 1; }

/* ── The popup itself (mounted on <body>) ──
   Compact dropdown with subtle elevation. Items stack vertically,
   each is a full-width clickable row with an icon + label. */
.prod-item-menu {
	min-width: 168px;
	padding: 4px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	box-shadow:
		0 12px 28px -6px rgba(15, 23, 42, 0.18),
		0 2px 6px rgba(15, 23, 42, 0.06);
	z-index: 9999;
	animation: prod-item-menu-in 0.12s ease-out;
	font-family: inherit;
}
@keyframes prod-item-menu-in {
	from { opacity: 0; transform: translateY(-4px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
button.prod-item-menu-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 7px 10px;
	border: 0;
	background: transparent;
	color: #1e293b;
	font-size: 12px;
	font-weight: 600;
	border-radius: 5px;
	cursor: pointer;
	text-align: left;
	transition: background 0.10s ease, color 0.10s ease;
	font-family: inherit;
}
button.prod-item-menu-item > i {
	width: 14px;
	font-size: 12px;
	color: #64748b;
	text-align: center;
	flex-shrink: 0;
}
button.prod-item-menu-item:hover {
	background: #f1f5f9;
	color: #0f172a;
}
button.prod-item-menu-item:hover > i { color: #0c4d8b; }
button.prod-item-menu-item.prod-item-menu-danger { color: #b91c1c; }
button.prod-item-menu-item.prod-item-menu-danger > i { color: #b91c1c; }
button.prod-item-menu-item.prod-item-menu-danger:hover {
	background: #fef2f2;
	color: #991b1b;
}
button.prod-item-menu-item.prod-item-menu-danger:hover > i { color: #991b1b; }

/* Mix-override flyout submenu inside the production 3-dot menu */
.prod-item-menu-item.prod-item-menu-hassub {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 7px 10px;
	color: #1e293b;
	font-size: 12px;
	font-weight: 600;
	border-radius: 5px;
	cursor: pointer;
	position: relative;
	transition: background 0.10s ease, color 0.10s ease;
}
.prod-item-menu-item.prod-item-menu-hassub > i:first-child {
	width: 14px;
	font-size: 12px;
	color: #64748b;
	text-align: center;
	flex-shrink: 0;
}
.prod-item-menu-item.prod-item-menu-hassub:hover,
.prod-item-menu-item.prod-item-menu-hassub.open { background: #f1f5f9; color: #0f172a; }
.prod-item-menu-item.prod-item-menu-hassub:hover > i:first-child,
.prod-item-menu-item.prod-item-menu-hassub.open > i:first-child { color: #0c4d8b; }
.prod-item-menu-caret {
	margin-left: auto;
	font-size: 10px !important;
	color: #94a3b8 !important;
	width: auto !important;
	transition: transform 0.12s ease;
}
.prod-item-menu-hassub.open .prod-item-menu-caret { transform: rotate(-90deg); }
.prod-item-submenu {
	display: none;
	position: absolute;
	right: 100%;
	top: -5px;
	margin-right: 4px;
	min-width: 172px;
	max-height: 264px;
	overflow-y: auto;
	padding: 4px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	box-shadow:
		0 12px 28px -6px rgba(15, 23, 42, 0.18),
		0 2px 6px rgba(15, 23, 42, 0.06);
	z-index: 1;
}
.prod-item-menu-hassub.open > .prod-item-submenu { display: block; }
button.prod-item-submenu-opt {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 6px 9px;
	border: 0;
	background: transparent;
	color: #1e293b;
	font-size: 12px;
	font-weight: 500;
	border-radius: 5px;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	white-space: nowrap;
}
button.prod-item-submenu-opt .prod-submenu-check {
	width: 12px;
	font-size: 11px;
	color: #0c4d8b;
	flex-shrink: 0;
}
button.prod-item-submenu-opt:not(.is-current) .prod-submenu-check { visibility: hidden; }
button.prod-item-submenu-opt.is-current { font-weight: 700; }
button.prod-item-submenu-opt:hover { background: #f1f5f9; color: #0f172a; }

/* ── Structure sort mode ──
   When the user clicks the bars icon on a structure card header,
   the card enters sort mode: the body's .prod-item rows become
   draggable via a per-row grip handle on the left, the header
   gets a green "Done Sorting" button, and the body is amber-
   tinted to make the mode obvious at a glance. */
div.prod-card.is-sorting > .prod-card-body {
	background: linear-gradient(180deg, #fffbeb 0%, #fffefa 100%);
	border-top: 1px dashed #fbd38d;
}
div.prod-card.is-sorting .prod-item {
	cursor: default;
	border-bottom-color: rgba(245, 158, 11, 0.18);
}
div.prod-card.is-sorting .prod-item:hover {
	background-color: rgba(245, 158, 11, 0.06);
}
i.prod-item-sort-handle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 22px;
	margin-right: 4px;
	color: #b45309;
	font-size: 13px;
	cursor: grab;
	flex-shrink: 0;
	user-select: none;
	transition: color 0.12s, transform 0.12s;
}
i.prod-item-sort-handle:hover {
	color: #92400e;
	transform: scale(1.15);
}
i.prod-item-sort-handle:active {
	cursor: grabbing;
}
/* The row being dragged — bumped shadow + opacity. jQuery UI puts
   a `ui-sortable-helper` class on the dragging clone. */
.ui-sortable-helper.prod-item {
	box-shadow:
		0 8px 22px -6px rgba(15, 23, 42, 0.20),
		0 2px 6px rgba(15, 23, 42, 0.10);
	background: #ffffff !important;
	border-radius: 6px;
}
/* Placeholder slot left behind during a drag — dashed amber rail
   so the user sees where the row will land. */
.prod-item-sort-placeholder {
	visibility: visible !important;
	height: 32px !important;
	margin: 4px 0;
	border: 1px dashed #f59e0b;
	background: rgba(245, 158, 11, 0.06);
	border-radius: 6px;
	box-sizing: border-box;
}

/* Done Sorting button on the card header — green primary action.
   Tucked next to the chevron, click-stops propagation so it doesn't
   collapse the card. */
button.prod-card-sort-done {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 26px;
	padding: 0 12px;
	margin-left: 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: #fff;
	background: #047857;
	border: 1px solid #065f46;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.12s ease;
}
button.prod-card-sort-done:hover {
	background: #065f46;
	transform: translateY(-1px);
}
button.prod-card-sort-done > i { font-size: 10px; }

/* Drawings row expanded under an item */
div.prod-item-draws {
	padding: 10px 14px 10px 50px;
	border-bottom: 1px solid #f1f5f9;
	display: flex;
	flex-direction: column;
	gap: 0;
	background-color: rgba(122,183,131,0.08);
}
div.prod-item-draws .prod-draws-grid {
	grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}
div.prod-item-draws .prod-draw-card .dt_draw img {
	max-width: 60px;
}
div.prod-item-draws button.round {
	margin-top: 0;
}

/* ── Per-card item pagination ── */
div.prod-card-pagination {
	display: flex !important;
	align-items: center;
	justify-content: flex-start !important;
	gap: 6px;
	padding: 8px 14px;
	border-top: 1px solid #f1f5f9;
	font-size: 11px;
	width: 100%;
	text-align: left;
	box-sizing: border-box;
}
div.prod-card-pagination button {
	background: transparent;
	border: 1px solid #e2e8f0;
	border-radius: 5px;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 500;
	color: #64748b;
	cursor: pointer;
	transition: all 0.12s ease;
}
div.prod-card-pagination button:hover:not(:disabled) {
	background-color: #f1f5f9;
	border-color: #cbd5e1;
	color: #334155;
}
div.prod-card-pagination button:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}
div.prod-card-pagination .prod-card-page-info {
	color: #94a3b8;
	font-weight: 500;
	text-align: left;
}

/* ── Add to Production: candidate cards ──
   Pinned section above .prod-cards when "Add from SO" is clicked.
   The wrapper itself is purely structural — chrome (dashed amber
   border, gradient bg) was dropped so the colhead anchors flush
   under the drawer chip strip and the cards sit on the panel scroll
   surface, giving back the vertical space the visual frame ate.
   The amber-mode signal lives in the chip strip (mode pill +
   .is-prod-aq-mode tint), which is plenty without a second frame. */
div.prod-candidates {
	margin: 0 0 14px;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	/* `overflow: clip` clips children like `hidden` does WITHOUT
	   creating a scroll container — that scroll container is what
	   was killing the sticky colhead + group banner inside. Older
	   browsers fall back to `overflow: hidden` (sticky won't work
	   there but the visual clip is preserved). */
	overflow: hidden;
	overflow: clip;
}
div.prod-candidates-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 14px;
	border-bottom: 1px solid rgba(245, 158, 11, 0.25);
	background: rgba(245, 158, 11, 0.06);
}
div.prod-candidates-title {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #b45309;
}
div.prod-candidates-title i {
	font-size: 13px;
}
div.prod-candidates-actions {
	display: inline-flex;
	gap: 8px;
}
button.prod-candidates-link {
	background: transparent;
	border: 0;
	padding: 2px 6px;
	font-size: 11px;
	font-weight: 600;
	color: #92400e;
	cursor: pointer;
	border-radius: 4px;
	transition: background 0.12s ease;
}
button.prod-candidates-link:hover {
	background: rgba(245, 158, 11, 0.12);
}
/* Close (X) — header-level escape hatch out of "add to production" mode. */
button.prod-candidates-x {
	background: transparent;
	border: 0;
	padding: 4px 8px;
	margin-left: 4px;
	border-radius: 6px;
	color: #92400e;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.12s ease, color 0.12s ease, transform 0.18s ease;
}
button.prod-candidates-x:hover {
	background: rgba(245, 158, 11, 0.18);
	color: #b45309;
	transform: rotate(90deg);
}
div.prod-candidates-cards {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 8px 10px;
}

/* ── Component-link layer (SVG overlay) ──
   Lives inside .prod-candidates-cards. The SVG itself ignores
   pointer events so the cards underneath stay fully interactive;
   per-path pointer-events are re-enabled on the wider hit-target
   path so the user can dblclick a link to remove it. */
svg.prod-candidate-links {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 2;
	overflow: visible;
}
/* Visible link path — stroke color is set per-element via the inline
   `stroke` attribute (a userSpace gradient flowing from amber at the
   child end to emerald at the parent end). Don't declare `stroke`
   here or CSS specificity would beat the inline gradient reference. */
svg.prod-candidate-links path.pcl-link {
	fill: none;
	stroke-width: 2.25px;
	stroke-linecap: round;
	opacity: 0.85;
	transition: stroke-width 0.12s ease, opacity 0.12s ease;
}
/* Fat invisible hit target sitting under each visible stroke so the
   dblclick has plenty of catchment area without forcing us to draw
   a beefy line. */
svg.prod-candidate-links path.pcl-link.pcl-link-hit {
	stroke: transparent;
	stroke-width: 14px;
	opacity: 1;
	pointer-events: stroke;
	cursor: pointer;
}
/* While a link is being dragged, suppress hit-target pointer events
   so an in-flight drop never lands on an existing link's stroke
   instead of the card underneath it. */
body.is-aq-link-dragging svg.prod-candidate-links path.pcl-link.pcl-link-hit {
	pointer-events: none;
}
/* Per pair (hit, visible) inserted into g.pcl-links, the visible
   path is the immediate next sibling of its hit-target — so `+` is
   enough to bump the visual weight when the hit catches hover. We
   only adjust width/opacity here so the per-link gradient stays. */
svg.prod-candidate-links path.pcl-link.pcl-link-hit:hover + path.pcl-link {
	stroke-width: 3.5px;
	opacity: 1;
}
svg.prod-candidate-links path.pcl-rubber-band {
	fill: none;
	stroke: #0c4d8b;
	stroke-width: 2px;
	stroke-dasharray: 5 4;
	stroke-linecap: round;
	opacity: 0.7;
	pointer-events: none;
}

/* Components button — same icon as before, but during drag-mode it
   reads as the link source. Subtle "grab" cursor on hover hints the
   drag affordance without needing a separate dot. */
button.prod-candidate-extra-att {
	cursor: grab;
}
body.is-aq-link-dragging button.prod-candidate-extra-att,
body.is-aq-link-dragging * {
	cursor: grabbing !important;
}
/* Source / target highlights during an in-flight drag gesture. */
.prod-candidate.is-aq-link-source button.prod-candidate-extra-att {
	background: #0c4d8b;
	border-color: #0c4d8b;
	color: #fff;
}
.prod-candidate.is-aq-link-source button.prod-candidate-extra-att i {
	color: #fff;
}
.prod-candidate.is-aq-link-target {
	box-shadow: 0 0 0 2px #0c4d8b, 0 0 0 6px rgba(12, 77, 139, 0.18);
	border-radius: 8px;
}
/* Persistent role decoration — applied by prod_aq_link_redraw based
   on the current set of links. An item can be both (it's a component
   of X AND it has its own components rolled up into it), so both
   classes can coexist on the same button. The combined state uses a
   diagonal split so neither role is hidden. */
button.prod-candidate-extra-att.is-aq-link-child {
	background: #fef3c7;
	border-color: #f59e0b;
	color: #b45309;
}
button.prod-candidate-extra-att.is-aq-link-child i {
	color: #b45309;
}
button.prod-candidate-extra-att.is-aq-link-parent {
	background: #d1fae5;
	border-color: #10b981;
	color: #047857;
}
button.prod-candidate-extra-att.is-aq-link-parent i {
	color: #047857;
}
button.prod-candidate-extra-att.is-aq-link-child.is-aq-link-parent {
	background: linear-gradient(135deg,
		#fef3c7 0%,  #fef3c7 50%,
		#d1fae5 50%, #d1fae5 100%);
	border-color: #f59e0b;
	color: #047857;
}
/* ── Bulk-edit toolbar (Need-by / Hrs / Category → Apply) ── */
div.prod-candidates-bulk {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	padding: 8px 12px;
	background: #f8fafc;
	border-bottom: 1px solid #e2e8f0;
}
span.prod-candidates-bulk-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #64748b;
	margin-right: 4px;
}
div.prod-candidates-bulk input,
div.prod-candidates-bulk select {
	height: 26px;
	padding: 3px 8px;
	font-size: 12px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	background: #fff;
	color: #1e293b;
}
div.prod-candidates-bulk input.prod-candidates-bulk-date { width: 110px; }
div.prod-candidates-bulk input.prod-candidates-bulk-hrs  { width: 56px; text-align: center; }
div.prod-candidates-bulk select.prod-candidates-bulk-cat { min-width: 120px; }
button.prod-candidates-bulk-apply {
	height: 26px;
	padding: 0 12px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #fff;
	background: #0c4d8b;
	border: 1px solid #0a3f73;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.12s ease;
}
button.prod-candidates-bulk-apply:hover { background: #0a3f73; }
button.prod-candidates-bulk-apply.is-flash {
	background: #15803d;
	border-color: #15803d;
}

/* ── Sticky column-header row ──
   One row of labels above all candidates so per-row labels can go
   away. Sticky to the top of .prod-candidates-cards' scroll context.

   Alignment: the body's grid starts at x = head-width(130) +
   body-padding-left(10) = 140px. We push the colhead grid by the
   same amount via padding-left so its first cell (Qty) lines up
   with the body's first input column. No head-spacer cell needed. */
div.prod-candidates-colhead {
	position: sticky;
	top: 0;
	z-index: 4;
	display: grid;
	grid-template-columns:
		48px               /* Qty */
		minmax(120px,2fr)  /* Name */
		48px               /* Hrs */
		80px               /* Need by */
		80px               /* Tentative */
		minmax(90px,1.2fr)  /* Comments */
		30px               /* Pours */
		minmax(110px,1.4fr) /* Category */
		auto;              /* Extras */
	gap: 6px 8px;
	align-items: center;
	/* Padding-left = cards' padding-left (10) + row head width (110) +
	   body's padding-left (10) = 130 so the colhead's first column
	   lands directly above the row's first input column.
	   Padding-right = cards' padding-right (10) + body's padding-right
	   (10) = 20 so the colhead's right edge matches the body's right
	   edge — without this the available widths differ by 10px and the
	   flex (minmax) columns get redistributed wider in the colhead,
	   misaligning columns rightward. */
	padding: 6px 20px 6px 130px;
	background: #f1f5f9;
	border-bottom: 1px solid #e2e8f0;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #475569;
}
span.pcch-cell { padding: 0 2px; }
span.pcch-cell-extras { text-align: center; }
/* Group wrappers stack with their children flush inside; gap above
   only separates groups + standalone items from each other. */
div.prod-candidate-group.is-filter-hidden { display: none; }
/* Filter hides — driven by prod_apply_candidate_filters via the
   shared production toolbar. */
div.prod-candidate.is-filter-hidden,
div.prod-candidate-grphead.is-filter-hidden { display: none; }
div.prod-candidates-empty {
	padding: 18px 14px;
	text-align: center;
	color: #94a3b8;
	font-size: 12px;
	font-style: italic;
}
/* Single-line candidate row: head + body sit side-by-side. The
   body is always visible (no chevron / expand toggle) so all
   editable fields are reachable in one glance. */
div.prod-candidate {
	display: flex;
	align-items: stretch;
	border: 1px solid #e2e8f0;
	background: #fff;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
/* Standalone items (no group wrapper around them) get rounded
   corners and a quiet neutral surface. Selection is signaled
   downstream via an amber gradient + inset left stripe — NOT by
   swapping a heavy frame around the whole card, which competed
   visually with the group wrapper's blue framing. */
div.prod-candidate:not(.is-grouped):not(.prod-candidate-grphead) {
	border-radius: 8px;
	border: 1px solid #e2e8f0;
	transition:
		border-color 0.18s ease,
		box-shadow 0.22s ease,
		background 0.22s ease,
		opacity 0.18s ease,
		transform 0.18s ease;
}
/* Hover (unselected only) — brighten the dim state slightly and
   darken the border so the user knows the card is interactive
   before they commit to a click. */
div.prod-candidate:not(.is-grouped):not(.prod-candidate-grphead):not(.is-selected):hover {
	opacity: 0.78;
	border-color: #cbd5e1;
}
/* Dim only un-selected ITEM cards. Group header cards
   (.prod-candidate-grphead) aren't selectable themselves — they're
   pure structure anchors — so they always read at full brightness. */
div.prod-candidate:not(.is-selected):not(.prod-candidate-grphead) {
	opacity: 0.55;
}
/* Selected — STANDALONE variant.
   Stays clean white (no warning-amber tint that read as "this row
   has a problem"). The cue is a slim primary-blue stripe along the
   left edge — matched to the checkbox's selected color so the two
   reinforce each other — plus a soft neutral elevation shadow and
   a barely-shifted border. The amber theme stays at the panel /
   mode-bar level; per-row selection now reads as just "picked",
   not "flagged". */
div.prod-candidate:not(.is-grouped):not(.prod-candidate-grphead).is-selected {
	background: #ffffff;
	border-color: #cbd5e1;
	box-shadow:
		inset 3px 0 0 0 #0c4d8b,
		0 1px 2px rgba(15, 23, 42, 0.06),
		0 4px 10px -4px rgba(15, 23, 42, 0.08);
}
/* GROUPED selected items — keep the existing amber border swap +
   subtle shadow. They sit inside .prod-candidate-group whose blue
   wrapper already frames them, so a per-row border change is the
   right scope. (Original behavior preserved.) */
div.prod-candidate.is-grouped.is-selected {
	border-color: #f59e0b;
	box-shadow: 0 1px 3px rgba(245,158,11,0.10);
}
/* Legacy expand class still applied by the JS — keep as no-op so the
   selection logic that adds/removes it doesn't break. */
div.prod-candidate.is-expanded {
	border-color: #f59e0b;
}
div.prod-candidate-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	/* 110px chosen to fit cb (22) + gap (8) + plant slot (24) + drawings
	   badge (~46) + L+R padding (20) with a touch of slack. The old
	   130px sized in the apply-to-group icon that now lives in the
	   drawings strip — recovering the 20px gives the input grid a
	   little extra breathing room without touching column widths. */
	flex: 0 0 110px;
	width: 110px;
	box-sizing: border-box;
	cursor: default;
	user-select: none;
	border-right: 1px solid #f1f5f9;
}
/* Drop the divider on standalone (ungrouped) items — there's no
   group framing on either side, so the seam between cb/plant area
   and inputs adds visual noise without communicating structure. */
div.prod-candidate:not(.is-grouped) > div.prod-candidate-head {
	border-right: 0;
}
/* Drawings badge in the head — paperclip + count chip and an
   optional apply-to-group icon next to it. Replaces the old
   full-width toggle bar. */
div.prod-candidate-head-draws {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
}
button.prod-candidate-draws-badge {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	height: 22px;
	padding: 0 7px;
	font-size: 10px;
	font-weight: 700;
	color: #0c4d8b;
	background: #eef4fb;
	border: 1px solid #bcd2ea;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.12s ease, color 0.12s ease;
}
button.prod-candidate-draws-badge:hover:not(:disabled) {
	background: #0c4d8b;
	color: #fff;
}
button.prod-candidate-draws-badge i { font-size: 10px; }
span.pcdb-count { line-height: 1; }
/* Auto-submittal — line item has exactly one drawing and it's
   auto-attached. Green-tinted badge with magic-wand glyph so the
   user reads it as "system did this for you" instead of a manual
   selection they need to act on. */
button.prod-candidate-draws-badge.is-auto {
	background: #ecfdf5;
	border-color: #6ee7b7;
	color: #047857;
}
button.prod-candidate-draws-badge.is-auto:hover:not(:disabled) {
	background: #047857;
	color: #fff;
}
/* "Apply to group" — lives at the right edge of the drawings strip
   (renders inside .prod-candidate-draws as a sibling to
   .prod-candidate-draws-list). Labeled pill styled to read as a
   primary-ish action so users see it without hunting for a head icon.
   Class name kept as `applygrp-icon` so existing disable/click
   selectors continue to apply unchanged. */
button.prod-candidate-applygrp-icon {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	align-self: flex-start;
	height: 28px;
	padding: 0 12px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #0c4d8b;
	background: #eef4fb;
	border: 1px solid #bcd2ea;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
button.prod-candidate-applygrp-icon:hover:not(:disabled) {
	background: #0c4d8b;
	border-color: #0c4d8b;
	color: #fff;
}
button.prod-candidate-applygrp-icon i { font-size: 11px; }
/* Disabled head-badges (drawings + apply-to-group) — match the
   greyed treatment of the Cost / Components icons next to them. */
button.prod-candidate-draws-badge:disabled,
button.prod-candidate-applygrp-icon:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	background: #f8fafc;
	border-color: #e2e8f0;
	color: #cbd5e1;
}
/* Drawing thumbnails inside unselected rows are click-locked too —
   no native disabled on a div, so we use pointer-events + dim. */
.prod-candidate:not(.is-selected) div.prod-candidate-draws {
	opacity: 0.5;
	pointer-events: none;
}
div.prod-candidate-head:hover {
	background: transparent;
}
/* Name container is the QTY + PLANT slot. Fixed-width grid columns
   so the plant icon ALWAYS lands in the same x-position regardless
   of qty digit count (1, 12, 100). Without this the head would jitter
   row-to-row. */
/* Head's name slot now holds just the plant indicator (qty pill is
   gone since the qty input on the right already shows it). Single
   fixed column keeps the plant in a stable x-position row-to-row. */
div.prod-candidate-head .prod-candidate-name {
	/* Fixed 24px slot anchored to the LEFT of the head — plant marker
	   always lands at the same x position whether the row has badges
	   on the right or not. flex: 0 0 24px stops the slot from
	   stretching to fill empty head space. */
	flex: 0 0 24px;
	display: grid;
	grid-template-columns: 24px;
	justify-content: start;
	align-items: center;
	min-width: 0;
	overflow: visible;
}
div.prod-candidate-head span.prod-candidate-text {
	display: none;
}
div.prod-candidate-head div.prd_loc {
	margin-left: 0 !important;
	justify-self: start;
}
/* Single-line layout already shows the indent + blue left border for
   children; the >> mark inside the head adds noise and competes for
   the fixed slots. Hide it. */
div.prod-candidate-head i.prod-candidate-child-mark {
	display: none;
}
/* Pill-circle checkbox — mirrors the orders-page .sch-pill::before
   indicator (blue fill + fa-check when selected). The native input
   is hidden but still receives clicks via the label wrap and
   serializes on submit. */
label.prod-candidate-cb-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border: 1.5px solid #cbd5e1;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	flex-shrink: 0;
	box-sizing: border-box;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
	position: relative;
}
label.prod-candidate-cb-wrap:hover {
	border-color: #0c4d8b;
}
label.prod-candidate-cb-wrap::before {
	content: "";
	font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
	font-weight: 900;
	font-size: 11px;
	color: transparent;
	line-height: 1;
	transition: color 0.15s ease;
}
input.prod-candidate-cb {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
	margin: 0;
}
.prod-candidate.is-selected label.prod-candidate-cb-wrap {
	background: #0c4d8b;
	border-color: #0c4d8b;
	box-shadow: 0 1px 2px rgba(12,77,139,0.20);
}
.prod-candidate.is-selected label.prod-candidate-cb-wrap::before {
	content: "\f00c";   /* fa-check */
	color: #fff;
}
.prod-candidate label.prod-candidate-cb-wrap:has(input:focus-visible) {
	box-shadow: 0 0 0 3px rgba(12,77,139,0.20);
}
div.prod-candidate-name {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
span.prod-candidate-qty {
	font-size: 11px;
	font-weight: 700;
	color: #92400e;
	background: rgba(245,158,11,0.10);
	padding: 2px 8px;
	border-radius: 10px;
	flex-shrink: 0;
}
span.prod-candidate-text {
	font-size: 13px;
	font-weight: 600;
	color: #1e293b;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Single-line layout removes the expand toggle — chevron hidden. */
i.prod-candidate-chev {
	display: none !important;
}
/* Header-level "apply drawings selection to group" — only rendered
   for cards that share a parent group's drawings palette. Sits next
   to the chevron so the body can be tighter. */
button.prod-candidate-apply-grp-head {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #0c4d8b;
	background: #eef4fb;
	border: 1px solid #bcd2ea;
	border-radius: 999px;
	cursor: pointer;
	transition: all 0.12s ease;
	flex-shrink: 0;
	white-space: nowrap;
}
button.prod-candidate-apply-grp-head:hover {
	background: #0c4d8b;
	color: #fff;
	border-color: #0c4d8b;
}
button.prod-candidate-apply-grp-head i {
	font-size: 11px;
}
/* Body is always visible in single-line mode and sits to the right
   of the head as a flex row of [drawings] [grid]. The legacy
   expand/collapse rules are dropped. */
/* Body stacks drawings (top, full-width) above the input grid. The
   drawings strip is collapsible via the toggle bar inside it; the
   grid below is always visible. */
div.prod-candidate-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	align-items: stretch;
	gap: 6px;
	padding: 6px 10px;
	border-top: 0;
	background: transparent;
}
/* Drawings strip — toggle bar + chevron are gone (paperclip badge
   in the head replaces them). Wrapper just hosts the thumbnail list. */
div.prod-candidate-draws {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 0;
	flex: 0 0 auto;
	max-width: none;
	padding: 4px 0 2px;
}
.prod-candidate.is-draws-collapsed div.prod-candidate-draws {
	display: none;
}
/* Drawing thumbnails — slightly larger now that they have a full row
   to themselves; still cap to keep the row reasonable on dense items.
   Takes the leftover width inside .prod-candidate-draws so the
   "Apply to group" button can hug the right edge. */
div.prod-candidate-draws-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	flex: 1 1 auto;
	min-width: 0;
}
div.prod-candidate-draws-list .dt_draw_div {
	max-width: 64px;
	padding: 2px;
}
div.prod-candidate-draws-list .dt_draw_div img {
	width: 56px;
}
div.prod-candidate-draws-list .dt_draw_div span.sp_draw_name {
	display: none !important;
}
/* Auto-submittal tile — compact column variant for the candidate
   drawings strip. The live (production-cards) version uses a
   horizontal pill with a 56×56 gridded thumbnail; in the strip we
   strip the thumbnail backdrop, drop sparkles, shrink the icon to
   ~18px, and stack icon-over-text so the icon's left edge sits on
   the same x as the eyebrow/title text below it. */
div.prod-candidate-draws-list .auto-draw-wrap {
	max-width: 160px;
	min-width: 0;
	margin: 0;
	flex: 0 1 auto;
}
div.prod-candidate-draws-list .auto-draw-card {
	flex-direction: column;
	align-items: flex-start;
	padding: 8px 10px;
	gap: 4px;
}
div.prod-candidate-draws-list .auto-draw-thumb {
	width: 22px;
	height: 22px;
	background: transparent;
	border: 0;
	border-radius: 0;
}
/* Drop the blueprint grid and the decorative sparkles in this
   compact context — they need real estate to read, and we've
   shrunk the thumb to icon-only size. */
div.prod-candidate-draws-list .auto-draw-grid,
div.prod-candidate-draws-list .auto-draw-spark { display: none; }
div.prod-candidate-draws-list .auto-draw-icon {
	font-size: 18px;
	/* Re-anchor at the thumb's TOP-LEFT instead of dead-center so
	   the visible glyph aligns with the left edge of the text below.
	   With a 22px thumb and an 18px font, top:50% left:50%
	   transform:translate-50,-50 still works AND keeps the glyph
	   visually flush left because there's almost no slack. */
}
div.prod-candidate-draws-list .auto-draw-body {
	width: 100%;
}
div.prod-candidate-draws-list .auto-draw-eyebrow { font-size: 8.5px; }
div.prod-candidate-draws-list .auto-draw-title {
	font-size: 12px;
	line-height: 1.2;
}
div.prod-candidate-flabel {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #64748b;
	margin-bottom: 4px;
}
div.prod-candidate-draws-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
button.prod-candidate-apply-grp {
	margin-top: 6px;
	padding: 4px 10px;
	font-size: 11px;
	font-weight: 600;
	color: #334155;
	background: #fff;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	cursor: pointer;
}
button.prod-candidate-apply-grp:hover {
	background: #f8fafc;
}
/* Single-row grid — fixed widths for narrow numeric/date fields,
   flex 1fr for the longer text fields. The extras column at the
   end is auto-width so the icon-only buttons stay compact. */
div.prod-candidate-grid {
	display: grid;
	grid-template-columns:
		48px              /* Qty */
		minmax(120px,2fr) /* Name */
		48px              /* Hrs */
		80px              /* Need by */
		80px              /* Tentative */
		minmax(90px,1.2fr) /* Comments */
		30px              /* Pours */
		minmax(110px,1.4fr) /* Category */
		auto;             /* Extras */
	gap: 6px 8px;
	align-items: end;
	flex: 1 1 auto;
	min-width: 0;
}
div.prod-candidate-field {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
/* Legacy modifier kept as a no-op for back-compat; the new fixed
   grid template handles widths without per-cell overrides. */
div.prod-candidate-field-wide { }
/* Per-row labels are hidden — the sticky column-header row above
   the candidates labels every column once. */
div.prod-candidate-field label { display: none; }
div.prod-candidate-field input[type=text],
div.prod-candidate-field select {
	width: 100%;
	box-sizing: border-box;
	height: 26px;
	padding: 3px 7px;
	font-size: 12px;
	font-family: inherit;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	background: #fff;
	color: #1e293b;
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
div.prod-candidate-field input[type=text]:focus,
div.prod-candidate-field select:focus {
	outline: none;
	border-color: #d97706;
	box-shadow: 0 0 0 2px rgba(245,158,11,0.15);
}
div.prod-candidate-field input[disabled],
div.prod-candidate-field select[disabled] {
	background: #f8fafc;
	color: #94a3b8;
	cursor: not-allowed;
}
/* Compact icon-only chips — icon + small label below for mobile,
   icon-only for the inline grid column. The OUTER element is a
   <button> wrapper; the inner <i> carries the data-* attrs that
   add_item_cost / prod_att_config consume (the wrapper's onClick
   passes the inner <i> directly). */
div.prod-candidate-extras {
	display: flex;
	gap: 6px;
	align-items: stretch;
	flex-wrap: nowrap;
}
/* Icon-only chips — no label text in the row, hover title on the
   <button> surfaces "Add Cost" / "Components". Disabled state
   greys + drops hover/cursor to mirror the input fields next to
   them when the row isn't selected. */
button.prod-candidate-extra-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	color: #94a3b8;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.12s ease;
	line-height: 1;
}
button.prod-candidate-extra-btn > i {
	font-size: 13px;
	color: inherit;
	line-height: 1;
	margin: 0;
	pointer-events: none;
}
button.prod-candidate-extra-btn:hover:not(:disabled) {
	background: #f1f5f9;
	border-color: #cbd5e1;
	color: #0c4d8b;
}
button.prod-candidate-extra-btn.is-set {
	background: #eef4fb;
	border-color: #bcd2ea;
	color: #0c4d8b;
}
button.prod-candidate-extra-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	background: #f8fafc;
	border-color: #e2e8f0;
	color: #cbd5e1;
}
button.prod-candidate-extra-btn:disabled:hover {
	background: #f8fafc;
	border-color: #e2e8f0;
	color: #cbd5e1;
}

/* ── Group header card ──
   Primary-blue treatment — stripe across the row with a strong fill
   so the children read as clearly tied to the parent structure. */
/* ── Group wrapper ──
   Each structure gets its own wrapper that encapsulates the header
   banner + every child row inside one outer border + radius. The
   wrapper's `overflow: hidden` clips the children's square corners
   so the group reads as a single unified block. */
div.prod-candidate-group {
	display: flex;
	flex-direction: column;
	/* Right + bottom + 4px left in primary blue. The TOP "border"
	   is the gradient banner itself — dropping border-top here lets
	   the banner fill the rounded top corners flush with the left
	   stripe, eliminating the seam where a 1px top border met the
	   4px left and the gradient banner inside. */
	border: 1px solid #0c4d8b;
	border-top: 0;
	border-left-width: 4px;
	border-radius: 8px;
	/* See .prod-candidates above — `overflow: clip` preserves the
	   rounded-corner clipping without creating a scroll container,
	   which keeps the sticky group banner inside working. */
	overflow: hidden;
	overflow: clip;
	background: #fff;
	box-shadow: 0 1px 2px rgba(12,77,139,0.06);
}
/* Banner fills the top edge of the wrapper; overflow:hidden + the
   wrapper's border-radius round its top corners. Solid base color
   in addition to the gradient so the rounded corner anti-aliasing
   doesn't show a lighter sliver where the gradient starts. */
div.prod-candidate-group > .prod-candidate-grphead {
	background: #0c4d8b;
}

/* Group header banner — full-width primary-blue stripe across the
   top of the wrapper. The wrapper handles the outer border, so the
   banner itself drops its own border + radius. */
div.prod-candidate-grphead {
	border: 0;
	background: transparent;
	padding: 0;
	margin: 0;
	box-shadow: none;
	opacity: 1;
	display: block;
	/* Sticky lives on the GRPHEAD (not the inner banner-name) so its
	   parent is the full group wrapper — that gives sticky enough
	   vertical room to actually engage. The banner-name inside moves
	   with it. Sits just below the colhead row. */
	position: sticky;
	top: 25px;   /* matches colhead height (6 pad + 12 text + 6 pad + 1 border) — nudged up 1px to sit flush */
	z-index: 3;
}
div.prod-candidate-grphead-name {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
	background: linear-gradient(90deg, #0c4d8b 0%, #156aab 100%);
	/* Only the top-right is rounded on the structure title line; all
	   other corners are square. */
	border-radius: 0 8px 0 0;
}
div.prod-candidate-grphead-name i {
	font-size: 13px;
	color: rgba(255,255,255,0.9);
	flex-shrink: 0;
}
span.prod-candidate-grphead-title {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
span.prod-candidate-grphead-qty {
	color: rgba(255,255,255,0.78);
	font-weight: 600;
	background: rgba(255,255,255,0.15);
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11px;
	flex-shrink: 0;
}

/* ── Child rows inside a group wrapper ──
   Drop their individual outer border + radius (the wrapper owns
   that) and stack flush with thin dividers between siblings. The
   blue left stripe stays on the WRAPPER, not on each child. */
div.prod-candidate-group div.prod-candidate.is-grouped {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	margin: 0;
}
div.prod-candidate-group div.prod-candidate.is-grouped + div.prod-candidate.is-grouped {
	border-top: 1px solid #f1f5f9;
}
/* Zebra stripe inside the group — :nth-of-type targets the in-group
   index of children. Even rows get a subtle blue tint so adjacent
   structure items read as distinct without losing the unified frame.
   Selection state is conveyed by the orange border + filled pill so
   we let the zebra show through on selected rows too. */
div.prod-candidate-group div.prod-candidate.is-grouped:nth-of-type(even) {
	background: #fafcfe;
}
i.prod-candidate-child-mark {
	color: #0c4d8b;
	font-size: 12px;
	margin-right: 2px;
	flex-shrink: 0;
}

/* ── Drawings inside a candidate card ──
   The legacy markup ships the filename in an absolute-positioned
   <span class="sp_draw_name"> with a green background — designed for
   a hover-only label in the legacy table. Inside our cards we want
   the label visible permanently, in the normal flow, in muted ink.
   The paperclip overlay icon (.check) is hidden by default and
   shown when the drawing is selected, with a primary-blue tint. */
div.prod-candidate-draws-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	width: 100%;
}
div.prod-candidate-draws-list .dt_draw_div {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 4px;
	border-radius: 6px;
	border: 1px solid transparent;
	transition: background 0.12s ease, border-color 0.12s ease;
	cursor: pointer;
	/* Lock tile to image-width + padding (72 + 4 + 4 = 80). max-width: 84
	   left 4px of slack that, with align-items: center, drifted the image
	   off-center vs the absolute-positioned .check overlay (top/left/right/
	   bottom: 4/4/4/20) — the overlay was wider than the image, so the
	   blue tint visibly extended past the image's right edge on selection. */
	width: 80px;
}
div.prod-candidate-draws-list .dt_draw_div:hover {
	background: #f8fafc;
	border-color: #e2e8f0;
}
div.prod-candidate-draws-list .dt_draw_div img {
	display: block;
	width: 72px;
	height: auto;
	border: 1px solid #e2e8f0;
	border-radius: 4px;
	margin: 0;
}
div.prod-candidate-draws-list .dt_draw_div img.dt_draw_sel {
	border: 2px solid #0c4d8b;
	/* Full -2px so the 2px border (4px outer growth) is fully reclaimed
	   from layout. -1px only reclaimed 2 of the 4 added px, so selected
	   tiles drifted 2px wider than unselected, shifting neighbors. */
	margin: -2px;
}
/* Hide the always-visible check icon overlay; show it only when
   the drawing is selected. */
div.prod-candidate-draws-list .dt_draw_div div.check {
	display: none !important;
}
div.prod-candidate-draws-list .dt_draw_div img.dt_draw_sel ~ div.check,
div.prod-candidate-draws-list .dt_draw_div img.dt_draw_sel + div.check {
	display: flex !important;
	position: absolute;
	/* Cover the IMAGE area — not the whole tile — for any aspect
	   ratio (tall portrait submittals, landscape thumbnails, etc.).
	   The image sits at top:4 (matches the .dt_draw_div padding) and
	   the .sp_draw_name label below takes a consistent ~20px
	   (4px margin-top + ~12px font line + 4px bottom padding), so
	   reserving that bottom slack puts the overlay flush with the
	   image's bottom edge regardless of image height. */
	top: 4px;
	bottom: 20px;
	height: auto;
	width: auto;
	aspect-ratio: auto;
	background: rgba(12, 77, 139, 0.20);
	border-radius: 4px;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	width: 100%;
}
div.prod-candidate-draws-list .dt_draw_div div.check i {
	color: #0c4d8b;
	font-size: 16px;
	text-shadow: 0 1px 2px rgba(255,255,255,0.6);
}
/* Override the legacy absolute green label — render it as static
   muted text under the thumbnail instead. */
div.prod-candidate-draws-list .dt_draw_div span.sp_draw_name {
	position: static !important;
	display: block !important;
	background: transparent !important;
	color: #475569 !important;
	font-size: 10px !important;
	font-weight: 500;
	margin-top: 4px !important;
	padding: 0 !important;
	min-width: 0 !important;
	max-width: 72px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
	z-index: auto !important;
}
/* Clean up the embedded <a> wrapper so the link stretches over the
   thumbnail without the legacy positioning. */
div.prod-candidate-draws-list .dt_draw_div a.draw_link {
	display: block;
	color: inherit;
	text-decoration: none;
	width: 100%;
}
div.prod-candidate-draws-list .dt_draw_div a {
	display: block;
}
/* Hide the "open PDF" external-link overlay icon to keep the tile
   visually quiet; the tooltip on hover already shows the PDF preview. */
div.prod-candidate-draws-list .dt_draw_div i.o_draw {
	display: none;
}
/* In-section footer + Cancel/Commit buttons retired — Cancel lives on
   the chip strip's mode-bar X, and the commit action is the
   transformed [name=prod_aq] trigger button (.is-aq-commit, styled in
   dt-drawer.css). */

@media (max-width: 720px) {
	div.prod-candidate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	div.prod-candidate-field-wide { grid-column: span 2; }
	/* The sticky 8-column header is sized for the desktop horizontal row
	   (~650px); against the 2-column card grid it can't line up and ran
	   off the right edge. Hide it on mobile and instead reveal each
	   field's own label (hidden on desktop because the colhead labels
	   every column once) so every input is self-describing. */
	div.prod-candidates-colhead { display: none; }
	div.prod-candidate-field[data-label]::before {
		content: attr(data-label);
		display: block;
		margin: 0 0 1px 1px;
		font-size: 9px;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: #64748b;
		line-height: 1.2;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	[data-theme="dark"] div.prod-candidate-field[data-label]::before { color: #94a3b8; }
}

/* Dark mode tints */
[data-theme="dark"] div.prod-candidates {
	background: linear-gradient(180deg, rgba(245, 158, 11, 0.08) 0%, #1f2937 38%);
	border-color: rgba(245, 158, 11, 0.45);
}
[data-theme="dark"] div.prod-candidates-head {
	background: rgba(245, 158, 11, 0.10);
	border-bottom-color: rgba(245, 158, 11, 0.30);
}
[data-theme="dark"] div.prod-candidate {
	background: #1f293c;
	border-color: #344058;
}
[data-theme="dark"] div.prod-candidate-head:hover { background: #2a364c; }
[data-theme="dark"] span.prod-candidate-text { color: #e2e8f0; }
[data-theme="dark"] div.prod-candidate-body {
	background: #1a2333;
	border-top-color: #344058;
}
[data-theme="dark"] div.prod-candidate-field input[type=text],
[data-theme="dark"] div.prod-candidate-field select {
	background: #1f293c;
	border-color: #344058;
	color: #e2e8f0;
}
[data-theme="dark"] button.prod-candidate-extra-btn {
	background: #1f293c;
	border-color: #344058;
	color: #cbd5e1;
}
/* New column/row candidate layout — dark surfaces the older overrides
   above didn't reach: the sticky column header (#f1f5f9), the selected
   STANDALONE card (whose #fff selected bg out-specifics the base dark
   .prod-candidate rule), and the unselected hover border. */
[data-theme="dark"] div.prod-candidates-colhead {
	background: #1a2333;
	border-bottom-color: #344058;
	color: #94a3b8;
}
[data-theme="dark"] div.prod-candidate:not(.is-grouped):not(.prod-candidate-grphead):not(.is-selected):hover {
	border-color: #475569;
}
[data-theme="dark"] div.prod-candidate:not(.is-grouped):not(.prod-candidate-grphead).is-selected {
	background: #1f293c;
	border-color: #475569;
	box-shadow:
		inset 3px 0 0 0 #4a9eff,
		0 1px 2px rgba(0, 0, 0, 0.3),
		0 4px 10px -4px rgba(0, 0, 0, 0.4);
}
/* Grouped candidate layout — the group wrapper (#fff), the even-row zebra
   (#fafcfe, which out-specifics the base dark .prod-candidate rule), the
   child dividers + head border-right (#f1f5f9), and the drawings /
   apply-to-group badge pills (light blue #eef4fb, disabled #f8fafc) are
   all light in the base styles. Recolor for dark. */
[data-theme="dark"] div.prod-candidate-group {
	background: #15203a;
}
[data-theme="dark"] div.prod-candidate-group div.prod-candidate.is-grouped:nth-of-type(even) {
	background: #1b2538;
}
[data-theme="dark"] div.prod-candidate-group div.prod-candidate.is-grouped + div.prod-candidate.is-grouped {
	border-top-color: #2a3a52;
}
[data-theme="dark"] div.prod-candidate-head { border-right-color: #2a3a52; }
[data-theme="dark"] button.prod-candidate-draws-badge,
[data-theme="dark"] button.prod-candidate-applygrp-icon {
	background: #16243d;
	border-color: #2c4a6e;
	color: #4a9eff;
}
[data-theme="dark"] button.prod-candidate-draws-badge.is-auto {
	background: #0f2a1f;
	border-color: #1f6b4a;
	color: #4ade80;
}
[data-theme="dark"] button.prod-candidate-draws-badge:disabled,
[data-theme="dark"] button.prod-candidate-applygrp-icon:disabled {
	background: #1a2333;
	border-color: #2a3a52;
	color: #475569;
}

/* ── Search + Filter Toolbar ── */
div.prod-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	padding: 10px 14px;
	background-color: #fafbfc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	margin-bottom: 12px;
}
div.prod-toolbar .filter-group {
	display: flex;
	align-items: center;
	gap: 6px;
	background-color: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	padding: 0 10px;
	height: 32px;
	transition: all 0.15s ease;
	position: relative;
}
div.prod-toolbar .filter-group:focus-within {
	border-color: #0c4d8b;
	box-shadow: 0 0 0 2px rgba(12, 77, 139, 0.1);
}
div.prod-toolbar .filter-group[data-label] {
	position: relative;
}
div.prod-toolbar .filter-group[data-label]::before {
	content: attr(data-label);
	position: absolute;
	top: -7px;
	left: 4px;
	padding: 0 6px;
	background-color: #fafbfc;
	color: #64748b;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	pointer-events: none;
}
div.prod-toolbar .filter-group i {
	color: #94a3b8;
	font-size: 12px;
	flex-shrink: 0;
}
div.prod-toolbar .filter-group input {
	border: none;
	background-color: transparent;
	font-size: 13px;
	font-family: inherit;
	color: #1e293b;
	padding: 0;
	outline: none;
	cursor: text;
}
div.prod-toolbar .filter-group input::placeholder {
	color: #94a3b8;
	font-size: 13px;
}
div.prod-toolbar .filter-group select {
	border: none;
	background-color: transparent;
	font-size: 13px;
	font-family: inherit;
	color: #1e293b;
	padding: 0 0 0 2px;
	padding-right: 16px;
	outline: none;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path fill="%2394a3b8" d="M5 6L0 0h10z"/></svg>');
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 8px;
	min-width: 60px;
	height: auto;
}
div.prod-toolbar .filter-group select:focus,
div.prod-toolbar .filter-group input:focus {
	outline: none;
	box-shadow: none;
	border-color: transparent;
}
div.prod-toolbar .filter-group select option {
	color: #1e293b;
	background-color: #fff;
}
div.prod-toolbar .prod-fg-search {
	flex: 1;
	min-width: 160px;
}
div.prod-toolbar .prod-fg-search input {
	width: 100%;
}
button.prod-filter-clear {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	font-size: 12px;
	color: #94a3b8;
	background-color: #fff;
	cursor: pointer;
	padding: 0;
	transition: all 0.15s ease;
}
button.prod-filter-clear:hover {
	background-color: #fee2e2;
	border-color: #fca5a5;
	color: #dc2626;
}
div.prod-no-results {
	text-align: center;
	padding: 40px 20px;
	color: #94a3b8;
	font-size: 14px;
}
div.prod-no-results i {
	margin-right: 6px;
}

/* ── Pagination ── */
div.prod-pagination {
	display: flex !important;
	align-items: center;
	justify-content: flex-start !important;
	gap: 8px;
	padding: 14px 0 6px;
	width: 100%;
	text-align: left;
	box-sizing: border-box;
}
/* `.prod-pagination` ships with `display: flex !important;` which
   beats jQuery's .hide() inline `display: none`. While candidates
   mode is active, force it (and the live cards / filter toolbar)
   off so the panel only shows the candidates section. */
div.prod-container.is-prod-aq-mode div.prod-pagination,
div.prod-container.is-prod-aq-mode div.prod-toolbar,
div.prod-container.is-prod-aq-mode div.prod-cards {
	display: none !important;
}

/* ── Unlinked Production band ─────────────────────────────────────
   prod_items still attached to the order whose grp_items parent has
   been removed. Amber-tinted to read as "needs attention" without
   being alarming. Header is clickable to collapse. */
div.prod-unlinked-band {
	margin: 8px 0 12px;
	border: 1px solid #f59e0b;
	border-radius: 8px;
	background: #fffbeb;
	overflow: hidden;
}
div.prod-unlinked-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	cursor: pointer;
	user-select: none;
	background: #fef3c7;
	border-bottom: 1px solid #f59e0b;
}
div.prod-unlinked-head i.fa-unlink { color: #b45309; font-size: 14px; }
div.prod-unlinked-title { font-weight: 600; font-size: 13px; color: #78350f; }
div.prod-unlinked-sub { font-size: 12px; color: #92400e; opacity: .85; flex: 1; }
i.prod-unlinked-toggle { color: #92400e; transition: transform .15s ease; }
i.prod-unlinked-toggle.open { transform: rotate(180deg); }
div.prod-unlinked-body { background: #fff; }
div.prod-unlinked-row {
	display: grid;
	grid-template-columns: 60px 1fr 90px 90px 90px 80px 50px;
	gap: 10px;
	align-items: center;
	padding: 8px 14px;
	font-size: 12px;
	border-bottom: 1px solid #fde68a;
}
div.prod-unlinked-row:last-child { border-bottom: 0; }
div.prod-unlinked-row.prod-unlinked-header {
	background: #fef9e6;
	font-weight: 600;
	color: #78350f;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .03em;
}
div.prod-unlinked-row .puf-qty { text-align: center; font-weight: 600; }
div.prod-unlinked-row .puf-name {
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
div.prod-unlinked-row .puf-status { text-align: center; color: #475569; }
div.prod-unlinked-row .puf-plant { text-align: center; color: #475569; }
div.prod-unlinked-row .puf-action { text-align: right; }
div.prod-unlinked-row .puf-action i {
	cursor: pointer;
	color: #b91c1c;
	font-size: 14px;
	padding: 4px;
}
div.prod-unlinked-row .puf-action i.fa-archive { color: #92400e; }
div.prod-unlinked-row .puf-action i:hover { opacity: .7; }

/* Dark mode */
[data-theme="dark"] div.prod-unlinked-band {
	background: #2a1f0a;
	border-color: #b45309;
}
[data-theme="dark"] div.prod-unlinked-head {
	background: #3a2a0d;
	border-color: #b45309;
}
[data-theme="dark"] div.prod-unlinked-title { color: #fde68a; }
[data-theme="dark"] div.prod-unlinked-sub { color: #fcd34d; }
[data-theme="dark"] div.prod-unlinked-body { background: #1f1a14; }
[data-theme="dark"] div.prod-unlinked-row { border-bottom-color: #3a2a0d; color: #e8d9b8; }
[data-theme="dark"] div.prod-unlinked-row.prod-unlinked-header {
	background: #2a1f0a; color: #fde68a;
}
[data-theme="dark"] div.prod-unlinked-row .puf-status,
[data-theme="dark"] div.prod-unlinked-row .puf-plant { color: #cbb893; }

div.prod-pagination button {
	background: transparent;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	padding: 5px 12px;
	font-size: 12px;
	font-weight: 500;
	color: #64748b;
	cursor: pointer;
	transition: all 0.15s ease;
}
div.prod-pagination button:hover:not(:disabled) {
	background-color: #f1f5f9;
	border-color: #cbd5e1;
	color: #334155;
}
div.prod-pagination button:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}
div.prod-pagination .prod-page-info {
	font-size: 12px;
	color: #64748b;
	text-align: left;
}
div.prod-pagination select {
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	padding: 4px 8px;
	font-size: 12px;
	font-weight: 500;
	color: #475569;
	background-color: #fff;
	cursor: pointer;
	outline: none;
}
/* Per-page picker → right side of the footer; nav controls (prev / page
   info / next) stay left-aligned with their existing flex order. */
div.prod-pagination select.prod-per-page {
	margin-left: auto;
}
div.prod-pagination select:hover {
	border-color: #cbd5e1;
}

/* ── AI Production Assistant bar ── */
div.prod-ai-bar {
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	margin-bottom: 12px;
	background-color: #fafbfc;
}
div.prod-ai-header {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	padding: 10px 14px;
	font-weight: 600;
	font-size: 13px;
	color: #334155;
	user-select: none;
}
div.prod-ai-header i {
	color: #94a3b8;
	transition: transform 0.2s ease;
	font-size: 13px;
}
div.prod-ai-header i.prod-ai-chevron {
	margin-left: auto;
}
div.prod-ai-bar.prod-ai-expanded .prod-ai-header i.prod-ai-chevron {
	transform: rotate(180deg);
}
div.prod-ai-body {
	padding: 0 14px 14px;
	display: none;
}
div.prod-ai-bar.prod-ai-expanded .prod-ai-body {
	display: block;
}
div.prod-ai-input-row {
	display: flex;
	gap: 8px;
	align-items: center;
}
input.prod-ai-input {
	flex: 1;
	height: 32px;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	padding: 0 10px;
	font-size: 13px;
	color: #1e293b;
	background-color: #fff;
	outline: none;
	transition: border-color 0.15s;
}
input.prod-ai-input:focus {
	border-color: #0c4d8b;
	box-shadow: 0 0 0 2px rgba(12,77,139,0.1);
}
input.prod-ai-input::placeholder {
	color: #94a3b8;
}
button.prod-ai-send {
	height: 32px;
	padding: 0 14px;
	border: none;
	border-radius: 6px;
	background-color: #0c4d8b;
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 5px;
	transition: background-color 0.15s;
}
button.prod-ai-send:hover {
	background-color: #0a3f73;
}
button.prod-ai-btn-outline {
	height: 32px;
	padding: 0 12px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	background-color: #fff;
	color: #475569;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 5px;
	transition: all 0.15s;
	white-space: nowrap;
}
button.prod-ai-btn-outline:hover {
	background-color: #f1f5f9;
	border-color: #94a3b8;
	color: #334155;
}
div.prod-ai-response {
	margin-top: 12px;
}
div.prod-ai-status {
	text-align: center;
	color: #94a3b8;
	font-size: 13px;
	padding: 12px 0;
}
div.prod-ai-status i {
	margin-right: 6px;
}
div.prod-ai-insights-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 10px;
}
div.prod-ai-insight {
	border-radius: 6px;
	padding: 10px 12px;
	border-left: 3px solid #3b82f6;
	background-color: #eff6ff;
}
div.prod-ai-insight.prod-ai-type-warning {
	border-left-color: #f59e0b;
	background-color: #fffbeb;
}
div.prod-ai-insight.prod-ai-type-info {
	border-left-color: #3b82f6;
	background-color: #eff6ff;
}
div.prod-ai-insight.prod-ai-type-success {
	border-left-color: #22c55e;
	background-color: #f0fdf4;
}
div.prod-ai-insight-title {
	font-weight: 600;
	font-size: 13px;
	color: #1e293b;
	margin-bottom: 4px;
}
div.prod-ai-insight-detail {
	font-size: 12px;
	color: #475569;
	line-height: 1.4;
}
div.prod-ai-preview {
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	overflow: hidden;
	margin-top: 10px;
}
div.prod-ai-preview-header {
	display: flex;
	gap: 8px;
	padding: 8px 12px;
	background-color: #f8fafc;
	border-bottom: 1px solid #e2e8f0;
	font-weight: 600;
	font-size: 12px;
	color: #64748b;
}
div.prod-ai-preview-row {
	display: flex;
	gap: 8px;
	padding: 7px 12px;
	font-size: 12px;
	color: #334155;
	border-bottom: 1px solid #f1f5f9;
	align-items: center;
}
div.prod-ai-preview-row:last-child {
	border-bottom: none;
}
div.prod-ai-preview-row span {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
div.prod-ai-preview-row span.prod-ai-arrow {
	flex: 0 0 24px;
	text-align: center;
	color: #94a3b8;
}
div.prod-ai-preview-desc {
	padding: 8px 12px;
	font-size: 12px;
	color: #475569;
	background-color: #f8fafc;
	border-bottom: 1px solid #e2e8f0;
}
div.prod-ai-actions {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}
button.prod-ai-apply {
	height: 30px;
	padding: 0 14px;
	border: none;
	border-radius: 6px;
	background-color: #22c55e;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s;
}
button.prod-ai-apply:hover {
	background-color: #16a34a;
}
button.prod-ai-cancel {
	height: 30px;
	padding: 0 14px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	background-color: #fff;
	color: #64748b;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.15s;
}
button.prod-ai-cancel:hover {
	background-color: #f1f5f9;
	color: #334155;
}
div.prod-ai-match-table {
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	overflow: hidden;
	margin-top: 10px;
}
div.prod-ai-match-row {
	display: flex;
	gap: 8px;
	padding: 7px 12px;
	font-size: 12px;
	color: #334155;
	border-bottom: 1px solid #f1f5f9;
	align-items: center;
}
div.prod-ai-match-row:last-child {
	border-bottom: none;
}
div.prod-ai-match-row label {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 1;
	min-width: 0;
	cursor: pointer;
	font-size: 12px;
}
div.prod-ai-match-row .prod-ai-confidence {
	flex: 0 0 50px;
	text-align: right;
	font-size: 11px;
	color: #94a3b8;
}

/* ── Responsive production cards ── */
@media (max-width: 900px) {
	div.prod-item {
		flex-wrap: wrap;
		gap: 4px 8px;
	}
	div.prod-item .prod-field-notes {
		width: 100%;
		order: 99;
	}
	div.prod-item .prod-field-area {
		width: 100%;
		order: 98;
	}
	div.prod-item-header {
		display: none;
	}
	div.prod-card-header .prod-card-progress {
		width: 60px;
	}
}

div.in_contain {
	display:inline-block;
	position:relative;
	margin: 12px auto;
    font-size: 14px;
}
tr#new_emp select, tr#new_area select {
	min-width:90px;
	font-weight:normal;
}
tr#new_emp input, tr#new_emp select, tr#new_area input, tr#new_area select {
	font-size:14px;
}
tr#new_emp textarea, tr#new_area textarea {
	background:transparent;
	border:0px solid;
	border-left:1px solid #999;
	border-bottom:1px solid #999;
}
div.new_employee, div.new_area, div.new_driver {
	background-color: rgb(247, 247, 247);
    padding: 10px 15px 5px;
    border: 1px solid #CCC;
	display:inline-block;
    border-radius: 5px;
    margin-bottom: 10px;
}
div#prod_today button.r_button {
	margin-bottom: 10px;
}
/* Old trucking table cell styles removed — now in css/dispatch.css (.sch-*) */
div.drag, div.proj, div.dragged, div.emp_drag, div.emp_dragged {
	height:35px;
	width:86.08px;
	border-radius: 15px;
	padding: 2.5px 2px 2.5px;
	overflow: hidden;
	color: #FFF;
    background-color: rgba(49, 97, 122, 0.95);
	cursor:move;
	display: inline-flex;
  	justify-content: center;
  	align-items: center;
	font-size:11px;
	white-space: normal;
	position:relative;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
}
div.drag.pointer, div.proj.pointer {
	cursor:pointer;
}
div.dragged, div.emp_dragged {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 2px 10px 0 rgba(0, 0, 0, 0.19);
	z-index:1000;
}
div.drag.active, div.proj.active, div.emp_drag.active {
	-webkit-transition: all .05s ease-in-out;
    transition: all .05s ease-in-out;
}
div.drag_cont div.drag, div.drag_cont div.proj, div.drag_cont div.dragged, div#emps div.emp_drag, div#emps div.emp_dragged {
	margin-right: 5px;
	text-align:center;
	display:inline-flex;
}
/* Old trucking table border rules removed — now in css/dispatch.css */
div#prod_today select {
	border:0px solid;
	padding:1px 1px 1px 0px;
	max-width: 100%;
}
div#prod_today tr#new_emp select, div#prod_today tr#new_area select {
	border:0px solid;
}
div#prod_today select[name=plant] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	text-transform: uppercase;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-align-last: center;
	color: #1e293b;
	background-color: #f1f5f9;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' fill='none'%3E%3Cpath d='M1 1.5l3 3 3-3' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 8px 5px;
	border: 1px solid #e2e8f0;
	border-radius: 20px;
	padding: 7px 26px 7px 6px;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
	line-height: 1;
}
div#prod_today select[name=plant] option {
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	padding: 6px 10px;
	background: #fff;
	color: #1e293b;
}
div#prod_today select[name=plant]:hover {
	background-color: #e2e8f0;
	border-color: #cbd5e1;
	color: #0c4d8b;
	box-shadow: 0 2px 8px rgba(12,77,139,0.12);
}
div#prod_today select[name=plant]:focus {
	outline: none;
	background-color: #e2e8f0;
	border-color: #0c4d8b;
	color: #0c4d8b;
	box-shadow: 0 0 0 2px rgba(12,77,139,0.15), 0 2px 8px rgba(12,77,139,0.1);
}
[data-theme="dark"] div#prod_today select[name=plant] {
	color: #e2e8f0;
	background-color: rgba(255,255,255,0.06);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' fill='none'%3E%3Cpath d='M1 1.5l3 3 3-3' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	border-color: rgba(255,255,255,0.1);
	box-shadow: 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04);
}
[data-theme="dark"] div#prod_today select[name=plant]:hover {
	background-color: rgba(74,158,255,0.15);
	border-color: rgba(74,158,255,0.3);
	color: #fff;
	box-shadow: 0 2px 10px rgba(74,158,255,0.15);
}
[data-theme="dark"] div#prod_today select[name=plant]:focus {
	background-color: rgba(74,158,255,0.15);
	border-color: #4a9eff;
	color: #fff;
	box-shadow: 0 0 0 2px rgba(74,158,255,0.15), 0 2px 10px rgba(74,158,255,0.15);
}
div.drag_cont div {
	margin-bottom:5px;
}
div.drag_cont {
	width:100%;
	display:inline-block;
	overflow:hidden;
	margin-top: 8px;
}
div#dr {
	display: none;
}
div.drag_title input, div.jBox-content input {
	border:0px;
	padding: 2px 0px 0px 0px;
    margin: 2px 0px 0px 0px;
}
div.drag_title {
	font-weight:bold;
	font-size:18px;
	position:relative;
	padding:0px 0px 7px;
	z-index:100;
	text-align:left;
	display:inline-block;
	width:47%;
	margin-left:0px;
	margin-right:2px;
}
div.drag:hover, div.proj:hover, div.emp_drag:hover {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.19);
}
div.drag:not(.ui-draggable-dragging):not(.ui-resizable-resizing):not(.ui-selected):not(.urgent):not(.soon):not(.poured):not(.missed):hover {
	background-color: rgba(29, 70, 91, 0.95);
}
div.proj, div.proj.drag.missed {
	background-color: rgb(53, 3, 62);
}
div.proj:hover, div.proj.drag.missed:hover {
	background-color: rgb(37, 0, 43);
}
div.drag.missed:hover {
	background-color: rgb(37, 0, 43);
}
div.drag.poured:hover {
	background-color: rgb(125, 241, 188);
}
div#q div.drag.tent {
	border: 3px solid springgreen !important;
}
div.drag.ui-draggable-dragging, div.drag.ui-resizable-resizing, div.dragged, div.drag.urgent.ui-draggable-dragging, div.drag.urgent.ui-resizable-resizing, div.drag.soon.ui-draggable-dragging, div.drag.soon.ui-resizable-resizing {
	background-color: rgba(172, 152, 55, 0.95);
}
div.emp_drag.ui-draggable-dragging, div.emp_drag.ui-resizable-resizing, div.emp_dragged, div.emp_drag.urgent.ui-draggable-dragging, div.emp_drag.urgent.ui-resizable-resizing, div.emp_drag.soon.ui-draggable-dragging, div.emp_drag.soon.ui-resizable-resizing {
	background-color: rgba(54, 98, 54, .95);
}
div.drag.urgent {
	background-color:#8B0609;
}
div.drag.urgent:not(.ui-draggable-dragging):not(.ui-resizable-resizing):not(.ui-selected):not(.soon):not(.poured):not(.missed):hover {
	background-color:#630608;
}
div.drag.soon {
	background-color:#42740b;
}
div.drag.soon:not(.ui-draggable-dragging):not(.ui-resizable-resizing):not(.ui-selected):not(.urgent):not(.poured):not(.missed):hover {
	background-color:#345b09;
}
div.drag.task, div.proj.task {
	background-color:rgba(122, 83, 49, 0.95);
}
div.drag.task:not(.ui-draggable-dragging):not(.ui-resizable-resizing):not(.ui-selected):not(.urgent):not(.soon):not(.poured):not(.missed):hover {
	background-color:rgba(97, 64, 36, 0.95);
}
div.drag.ui-selected, div.drag.ui-selected:hover {
	background-color:rgba(229, 230, 160, 0.95);
	color:#333;
	font-weight:bold;
}
div.emp_drag.ui-selected, div.emp_drag.ui-selected:hover {
	background-color:rgba(160, 230, 185, 0.95);
	color:#333;
	font-weight:bold;
}
div#prod_today input#date, input#testdiv, div#prod_today input.other_dates {
	font-size:28px;
	font-weight:400;
	color:#0c4d8b;
	margin-bottom: 4px;
	text-align: center;
}
div#prod_today input.other_dates {
	padding:0px 10px;
	border:0px;
	margin-bottom: 0px;
	background:transparent;
}
div.date_cont, div.day_scroll {
	vertical-align: middle;
	font-size:28px;
	font-weight:400;
	color:#0c4d8b;
	float:left;
	margin-bottom: 14px;
}
div.date_cont i, div.day_scroll i {
	font-size:18px;
	vertical-align: middle;
	padding:3px 10px 4px 9px;
}
div.date_cont i.fa-angle-right, div.day_scroll i.fa-angle-right {
	padding:3px 9px 4px 10px;
}
div.date_cont i.arrow:hover, div.day_scroll i.arrow:hover {
	border-radius:40px;
	background:#0A4E09;
	color:#FFF;
	cursor:pointer;
}
table#calendar thead div.date_cont i.arrow:hover {
	border-radius:40px;
	background:#0c4d8b;
	color:#FFF;
	cursor:pointer;
}
div.date_cont input, div.day_scroll input {
	vertical-align: middle;
}
div.date_cont i.fa-cog, div.day_scroll i.fa-cog {
	display:none;
	font-size: 24px;
    padding: 0px;
    margin-top: -2px;
}
div.day_scroll i.fa-cog {
    margin-top: 4px;
    margin-left: 10px;
    position: absolute;
}
div#testdiv, div#stock {
	display:none;
}
div#testdiv {
	font-size:28px;
	font-weight:200;
	color:#0A4E09;
	margin-bottom: 4px;
}
div.jBox-content button i {
	position:relative;
	vertical-align: middle;
	font-size:18px;
	margin-right: 5px;
}
div.jBox-content button span {
	position:relative;
	vertical-align: middle;
}
div.jBox-content button#bank_now span.but_proc, div.jBox-content button#verify_bnk span.but_proc {
	padding-left:2px;
}
div.jBox-content button#bank_now, div.jBox-content button#verify_bnk {
	padding-right:8px;
}
div.jBox-content button#bank_now:disabled:not(.success) span.but_proc, div.jBox-content button#bank_now:disabled:not(.success) i, div.jBox-content button#verify_bnk:disabled:not(.success) span.but_proc, div.jBox-content button#verify_bnk:disabled:not(.success) i {
	color: rgb(12 77 139 / 41%);
}
div.jBox-content button#bank_now.processing:disabled, div.jBox-content button#bank_now.success:disabled, div.jBox-content button#bank_now.processing:disabled:hover, div.jBox-content button#bank_now.success:disabled:hover, div.jBox-content button#verify_bnk.processing:disabled, div.jBox-content button#verify_bnk.success:disabled, div.jBox-content button#verify_bnk.processing:disabled:hover, div.jBox-content button#verify_bnk.success:disabled:hover {
	color: #0c4d8b;
}
div.jBox-content button#bank_now:disabled:hover, div.jBox-content button#verify_bnk:disabled:hover {
	cursor:default;
	background-color: transparent;
}
div.jBox-content button#bank_now.success span.but_proc, div.jBox-content button#bank_now.processing span.but_proc, div.jBox-content button#verify_bnk.success span.but_proc, div.jBox-content button#verify_bnk.processing span.but_proc {
	padding-left:2px;
}
div.jBox-content button#bank_now:enabled:hover, div.jBox-content button#verify_bnk:enabled:hover {
	background-color:green;
}
div.jBox-content button.remove:hover {
	background-color:rgba(166,0,2,1.00);
}
div.sch_grp {
	background-color:rgba(22,117,158,1.00);
}
tr.emp_brown {
    background: rgba(163, 135, 95, 0.4);
	background: -webkit-linear-gradient(left, rgba(163, 135, 95, 0),rgba(163, 135, 95, 0.4) 15%);
    background: -o-linear-gradient(right,rgba(163, 135, 95, 0),rgba(163, 135, 95, 0.4) 15%);
    background: -moz-linear-gradient(right,rgba(163, 135, 95, 0),rgba(163, 135, 95, 0.4) 15%);
    background: linear-gradient(to right, rgba(163, 135, 95, 0),rgba(163, 135, 95, 0.4) 15%);
}
tr.emp_brown.manhours {
    background: rgba(163, 135, 95, 0.5);
	background: -webkit-linear-gradient(left, rgba(163, 135, 95, 0),rgba(163, 135, 95, 0.5) 15%);
    background: -o-linear-gradient(right,rgba(163, 135, 95, 0),rgba(163, 135, 95, 0.5) 15%);
    background: -moz-linear-gradient(right,rgba(163, 135, 95, 0),rgba(163, 135, 95, 0.5) 15%);
    background: linear-gradient(to right, rgba(163, 135, 95, 0),rgba(163, 135, 95, 0.5) 15%);
}
tr.emp_green {
	background:rgba(165, 173, 122, 0.5);
	background: -webkit-linear-gradient(left, rgba(165, 173, 122, 0),rgba(165, 173, 122, 0.5) 15%);
    background: -o-linear-gradient(right,rgba(165, 173, 122, 0),rgba(165, 173, 122, 0.5) 15%);
    background: -moz-linear-gradient(right,rgba(165, 173, 122, 0),rgba(165, 173, 122, 0.5) 15%);
    background: linear-gradient(to right, rgba(165, 173, 122, 0),rgba(165, 173, 122, 0.5) 15%);
}
tr.emp_green.manhours {
	background:rgba(165, 173, 122, 0.65);
	background: -webkit-linear-gradient(left, rgba(165, 173, 122, 0),rgba(165, 173, 122, 0.65) 15%);
    background: -o-linear-gradient(right,rgba(165, 173, 122, 0),rgba(165, 173, 122, 0.65) 15%);
    background: -moz-linear-gradient(right,rgba(165, 173, 122, 0),rgba(165, 173, 122, 0.65) 15%);
    background: linear-gradient(to right, rgba(165, 173, 122, 0),rgba(165, 173, 122, 0.65) 15%);
}
tr.emp_tan {
	background:rgba(232, 218, 207, 0.65);
	background: -webkit-linear-gradient(left, rgba(232, 218, 207, 0),rgba(232, 218, 207, 0.65) 15%);
    background: -o-linear-gradient(right,rgba(232, 218, 207, 0),rgba(232, 218, 207, 0.65) 15%);
    background: -moz-linear-gradient(right,rgba(232, 218, 207, 0),rgba(232, 218, 207, 0.65) 15%);
    background: linear-gradient(to right, rgba(232, 218, 207, 0),rgba(232, 218, 207, 0.65) 15%);
}
tr.emp_tan.manhours {
	background:rgba(232, 218, 207, 0.95);
	background: -webkit-linear-gradient(left, rgba(232, 218, 207, 0),rgba(232, 218, 207, 0.95) 15%);
    background: -o-linear-gradient(right,rgba(232, 218, 207, 0),rgba(232, 218, 207, 0.95) 15%);
    background: -moz-linear-gradient(right,rgba(232, 218, 207, 0),rgba(232, 218, 207, 0.95) 15%);
    background: linear-gradient(to right, rgba(232, 218, 207, 0),rgba(232, 218, 207, 0.95) 15%);
}
tr.emp_orange {
	background:rgba(233, 185, 119, 0.58);
	background: -webkit-linear-gradient(left, rgba(233, 185, 119, 0),rgba(233, 185, 119, 0.58) 15%);
    background: -o-linear-gradient(right,rgba(233, 185, 119, 0),rgba(233, 185, 119, 0.58) 15%);
    background: -moz-linear-gradient(right,rgba(233, 185, 119, 0),rgba(233, 185, 119, 0.58) 15%);
    background: linear-gradient(to right, rgba(233, 185, 119, 0),rgba(233, 185, 119, 0.58) 15%);
}
tr.emp_orange.manhours {
	background:rgba(233, 185, 119, 0.68);
	background: -webkit-linear-gradient(left, rgba(233, 185, 119, 0),rgba(233, 185, 119, 0.68) 15%);
    background: -o-linear-gradient(right,rgba(233, 185, 119, 0),rgba(233, 185, 119, 0.68) 15%);
    background: -moz-linear-gradient(right,rgba(233, 185, 119, 0),rgba(233, 185, 119, 0.68) 15%);
    background: linear-gradient(to right, rgba(233, 185, 119, 0),rgba(233, 185, 119, 0.68) 15%);
}
tr.emp_turq {
	background:rgba(182, 205, 185, 0.55);
	background: -webkit-linear-gradient(left, rgba(182, 205, 185, 0),rgba(182, 205, 185, 0.55) 15%);
    background: -o-linear-gradient(right,rgba(182, 205, 185, 0),rgba(182, 205, 185, 0.55) 15%);
    background: -moz-linear-gradient(right,rgba(182, 205, 185, 0),rgba(182, 205, 185, 0.55) 15%);
    background: linear-gradient(to right, rgba(182, 205, 185, 0),rgba(182, 205, 185, 0.55) 15%);
}
tr.emp_turq.manhours {
	background:rgba(182, 205, 185, 0.75);
	background: -webkit-linear-gradient(left, rgba(182, 205, 185, 0),rgba(182, 205, 185, 0.75) 15%);
    background: -o-linear-gradient(right,rgba(182, 205, 185, 0),rgba(182, 205, 185, 0.75) 15%);
    background: -moz-linear-gradient(right,rgba(182, 205, 185, 0),rgba(182, 205, 185, 0.75) 15%);
    background: linear-gradient(to right, rgba(182, 205, 185, 0),rgba(182, 205, 185, 0.75) 15%);
}
tr.emp_blue {
	background:rgba(134, 208, 209, 0.4);
	background: -webkit-linear-gradient(left, rgba(134, 208, 209, 0),rgba(134, 208, 209, 0.4) 15%);
    background: -o-linear-gradient(right,rgba(134, 208, 209, 0),rgba(134, 208, 209, 0.4) 15%);
    background: -moz-linear-gradient(right,rgba(134, 208, 209, 0),rgba(134, 208, 209, 0.4) 15%);
    background: linear-gradient(to right, rgba(134, 208, 209, 0),rgba(134, 208, 209, 0.4) 15%);
}
tr.emp_blue.manhours {
	background:rgba(134, 208, 209, 0.5);
	background: -webkit-linear-gradient(left, rgba(134, 208, 209, 0),rgba(134, 208, 209, 0.6) 15%);
    background: -o-linear-gradient(right,rgba(134, 208, 209, 0),rgba(134, 208, 209, 0.6) 15%);
    background: -moz-linear-gradient(right,rgba(134, 208, 209, 0),rgba(134, 208, 209, 0.6) 15%);
    background: linear-gradient(to right, rgba(134, 208, 209, 0),rgba(134, 208, 209, 0.6) 15%);
}
tr.emp_brown_week {
    background: rgba(163, 135, 95, 0.4);
	background: -webkit-linear-gradient(left, rgba(163, 135, 95, 0),rgba(163, 135, 95, 0.4) 2%);
    background: -o-linear-gradient(right,rgba(163, 135, 95, 0),rgba(163, 135, 95, 0.4) 2%);
    background: -moz-linear-gradient(right,rgba(163, 135, 95, 0),rgba(163, 135, 95, 0.4) 2%);
    background: linear-gradient(to right, rgba(163, 135, 95, 0),rgba(163, 135, 95, 0.4) 2%);
}
tr.emp_green_week {
	background:rgba(165, 173, 122, 0.5);
	background: -webkit-linear-gradient(left, rgba(165, 173, 122, 0),rgba(165, 173, 122, 0.5) 2%);
    background: -o-linear-gradient(right,rgba(165, 173, 122, 0),rgba(165, 173, 122, 0.5) 2%);
    background: -moz-linear-gradient(right,rgba(165, 173, 122, 0),rgba(165, 173, 122, 0.5) 2%);
    background: linear-gradient(to right, rgba(165, 173, 122, 0),rgba(165, 173, 122, 0.5) 2%);
}
tr.emp_tan_week {
	background:rgba(232, 218, 207, 0.65);
	background: -webkit-linear-gradient(left, rgba(232, 218, 207, 0),rgba(232, 218, 207, 0.65) 2%);
    background: -o-linear-gradient(right,rgba(232, 218, 207, 0),rgba(232, 218, 207, 0.65) 2%);
    background: -moz-linear-gradient(right,rgba(232, 218, 207, 0),rgba(232, 218, 207, 0.65) 2%);
    background: linear-gradient(to right, rgba(232, 218, 207, 0),rgba(232, 218, 207, 0.65) 2%);
}
tr.emp_orange_week {
	background:rgba(233, 185, 119, 0.58);
	background: -webkit-linear-gradient(left, rgba(233, 185, 119, 0),rgba(233, 185, 119, 0.58) 2%);
    background: -o-linear-gradient(right,rgba(233, 185, 119, 0),rgba(233, 185, 119, 0.58) 2%);
    background: -moz-linear-gradient(right,rgba(233, 185, 119, 0),rgba(233, 185, 119, 0.58) 2%);
    background: linear-gradient(to right, rgba(233, 185, 119, 0),rgba(233, 185, 119, 0.58) 2%);
}
tr.emp_turq_week {
	background:rgba(182, 205, 185, 0.55);
	background: -webkit-linear-gradient(left, rgba(182, 205, 185, 0),rgba(182, 205, 185, 0.55) 2%);
    background: -o-linear-gradient(right,rgba(182, 205, 185, 0),rgba(182, 205, 185, 0.55) 2%);
    background: -moz-linear-gradient(right,rgba(182, 205, 185, 0),rgba(182, 205, 185, 0.55) 2%);
    background: linear-gradient(to right, rgba(182, 205, 185, 0),rgba(182, 205, 185, 0.55) 2%);
}
tr.emp_blue_week {
	background:rgba(134, 208, 209, 0.4);
	background: -webkit-linear-gradient(left, rgba(134, 208, 209, 0),rgba(134, 208, 209, 0.4) 2%);
    background: -o-linear-gradient(right,rgba(134, 208, 209, 0),rgba(134, 208, 209, 0.4) 2%);
    background: -moz-linear-gradient(right,rgba(134, 208, 209, 0),rgba(134, 208, 209, 0.4) 2%);
    background: linear-gradient(to right, rgba(134, 208, 209, 0),rgba(134, 208, 209, 0.4) 2%);
}
/* Old trucking td.emp_name / tr.first rules removed — now .sch-truck-name in css/dispatch.css */
div#emp_res, div#area_res {
	color: #074a12;
}
span.emp_sub {
	display:block;
	font-size:11px;
	padding:0px 8px;
	font-weight:normal;
}
div.s_area {
	display:inline-block;
	padding:8px 15px;
	width: 15%;
    background-color: #0c4d8b;
	border-radius:15px;
    margin: 2px;
	cursor:move;
	color:#FFF;
	font-weight:bold;
	position:relative;
}
div.s_area:hover {
	background-color: #0c4d8b;
}
div.s_area:hover i:not(.fa-truck) {
	display:block;
}
div.s_area i.fa-truck {
	margin-right:5px;
}
span.p_hrs, span.m_hrs, span.y_area {
	font-size:11px;
	font-weight:normal;
	margin-right:0px;
	display:block;
}
span.y_area {
	margin-top: 5px;
}
span.m_hrs {
	padding-left:8px;
}
tr.pr_hrs span.p_hrs, tr.manhours span.m_hrs, tr.pr_hrs span.y_area {
	display:block;
	margin-right:0px;
}
tr.manhours span.m_hrs {
	margin-top:4px;
}
div.tot_hrs {
	display:inline-block;
    margin-top: 8px;
}
div.counter {
	padding:6px;
	margin-left:3px;
	margin-right:3px;
	display: inline-block;
}
div.counter i {
	margin-right:5px;
	font-size:14px;
}
div.prd_name input {
	font-size:14px;
}
div.prd_name {
	margin-bottom:2px;
}
span.sm_title {
	font-size:10px;
}
div.jBox-content i {
	margin-right:5px;
	max-width:15px;
}
div.jBox-content .jt-panel i,
div.jBox-content .jt-actions i {
	margin-right: 0;
	max-width: none;
}
div.drag_task {
	position:absolute;
	bottom:-50px;
}
#s-rectBox {
	position: absolute;
	z-index: 1090;
	border: 2px solid #0c4d8b;
	background-color: rgba(12, 77, 139, 0.08);
	border-radius: 3px;
}
div#multi_ops {
	display:inline-block;
}
div.drag.ui-selected:before {
    content: " ";
    position: absolute;
    z-index: 2;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    border: 2px dashed rgb(69, 69, 69);
    border-radius: 15px;
}
div.task.ui-droppable-hover {
	background-color:rgba(209,211,120,0.95);
	color:#333;
}
div.task.ui-droppable-hover:before {
	content: " ";
    position: absolute;
    z-index: 2;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    border: 2px dashed rgb(69, 69, 69);
    border-radius: 15px;
}
div.drag:before, div.proj:before {
    content: " ";
    position: absolute;
    z-index: 5;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    border: 0px solid yellow;
    border-radius: 15px;
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
div.drag.sock_highlight:before {
    content: " ";
    position: absolute;
    z-index: 5;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    border: 2px solid yellow;
    border-radius: 15px;
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
div.sock_user {
	position: absolute;
    top: -17px;
    left: 15px;
    background: rgba(0,120,55,1.00);
    color: #FFF;
    width: auto;
    min-width: 100px;
    font-size: 11px;
    padding: 2px 3px;
	white-space: nowrap;
}
div.inp_div {
	display:inline-block;
}
div.inp_div input {
	font-size:16px;
	text-align:center;
}
div.adj_schedule, div.adj_draw {
	text-align:center;
}
div.adj_schedule select, div.adj_draw select {
	border:0px;
}
div.adj_schedule input[type=checkbox], div.pr_sched input[type=checkbox] {
	margin: 10px 5px 0px 0px;
    width: 16px;
    height: 16px;
    vertical-align: text-bottom;
}
div.prd_info, div.prd_draw {
	display:inline-block;
}
div.prd_draw {
	float:right;
	margin-left: 5px;
    padding-left: 5px;
}
#tr_pdrw div.prd_draw {
	float:none;
	margin-left:0px;
	padding-left:0px;
}

/* Thumbnail size cap on the line-item detail panel drawings —
   max 100×100, preserving aspect via object-fit:contain so tall
   or wide source thumbnails don't blow up the drawing card.
   Scoped to #tr_pdrw so the QC pour-rep panel (which has its
   own scoped rules in style.css ~11342) stays untouched. */
#tr_pdrw div.prd_draw div.pd_item img,
#tr_pdrw div.prd_draw img {
	max-width: 100px;
	max-height: 100px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	margin: 0 auto;
}
div.search_filter select {
	background:transparent;
	font-size:12px;
	margin-bottom:5px;
}
div.jBox-content button.split i, div.jBox-content button.combine i {
	margin-right:7px;
}
div.jBox-content button.split, div.jBox-content button.combine {
	margin-right:5px;
}

/* ═══════════════════════════════════════════════════
   jBox Tooltip Redesign (.jt-) — matches sp-modal
   ═══════════════════════════════════════════════════ */
/* Override jBox container for tooltips containing .jt-panel */
.jBox-Tooltip .jBox-container:has(.jt-panel),
.jBox-Tooltip.jt-tooltip .jBox-container {
	border-radius: 10px;
	box-shadow: 0 8px 30px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.05);
	border: 1px solid #e2e8f0;
	overflow: hidden;
}
.jBox-Tooltip .jBox-content:has(.jt-panel),
.jBox-Tooltip.jt-tooltip .jBox-content {
	padding: 0;
}
/* Panel */
.jt-panel {
	width: 320px;
	padding: 10px 14px 10px;
	font-size: 12px;
	color: #1e293b;
	line-height: 1.4;
}
.jt-panel.emp_info { width: 180px; }
.jt-panel.emp_info .jt-field input { font-size: 13px; padding: 7px 6px; }

/* ── Header ── */
.jt-header {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 8px;
	height: 28px;
}
.jt-qty {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 22px;
	padding: 0 7px;
	border-radius: 5px;
	background: #0c4d8b;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	flex-shrink: 0;
	line-height: 1;
	box-sizing: border-box;
}
.jt-name { flex: 1; min-width: 0; }
.jt-name input[name=name] {
	width: 100%;
	height: 24px;
	border: 1px solid transparent;
	border-radius: 5px;
	background-color: transparent;
	font-size: 13px;
	font-weight: 600;
	color: #1e293b;
	padding: 0 6px;
	margin: 0;
	outline: none;
	box-sizing: border-box;
	text-overflow: ellipsis;
	transition: border-color 0.15s ease, box-shadow 0.2s ease, background-color 0.15s ease;
}
.jt-name input[name=name]:hover { background-color: #f8fafc; border-color: #e2e8f0; }
.jt-name input[name=name]:focus { background-color: #fff; border-color: #6ba3d6; box-shadow: none; }
.jt-weight {
	font-size: 10px;
	font-weight: 500;
	color: #94a3b8;
	white-space: nowrap;
	flex-shrink: 0;
	height: 28px;
	line-height: 28px;
}
.jt-header:has(.jt-stock-name) { height: auto; flex-wrap: wrap; gap: 1px; }
.jt-stock-name { width: 100%; font-size: 13px; font-weight: 700; color: #1e293b; line-height: 1.3; }
.jt-desc { width: 100%; font-size: 11px; color: #64748b; font-weight: 500; }

/* ── Date Banners ── */
.jt-date-banner {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 4px 8px;
	border-radius: 5px;
	background: #f0f7ff;
	border: 1px solid #bfdbfe;
	font-size: 11px;
	font-weight: 600;
	color: #1e293b;
	margin-bottom: 8px;
}
.jt-date-banner i { font-size: 10px; color: #0c4d8b; opacity: 0.7; flex-shrink: 0; }
.jt-date-val { margin-left: auto; font-weight: 400; color: #64748b; font-size: 10px; }
.jt-date-banner.jt-urgent { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.jt-date-banner.jt-urgent i { color: #dc2626; }
.jt-date-banner.jt-soon { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.jt-date-banner.jt-soon i { color: #d97706; }
.jt-date-banner.jt-tent { background: #f8fafc; border-color: #e2e8f0; }
.jt-date-banner.jt-tent i { color: #64748b; }

/* ── Field Grid ── */
.jt-fields { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.jt-row { display: flex; gap: 5px; flex-wrap: wrap; }
.jt-field {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
	border: 1px solid #e2e8f0;
	border-radius: 5px;
	background: #fff;
	min-width: 0;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.jt-field:focus-within {
	border-color: #0c4d8b;
	box-shadow: 0 0 0 2px rgba(12,77,139,0.06);
}
.jt-field[data-label]::before {
	content: attr(data-label);
	position: absolute;
	top: -6px;
	left: 5px;
	padding: 0 2px;
	background: #fff;
	font-size: 8px;
	font-weight: 600;
	color: #94a3b8;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1;
	pointer-events: none;
	z-index: 1;
}
.jt-field input,
.jt-field select {
	width: 100%;
	border: none;
	background: transparent;
	font-size: 12px;
	color: #1e293b;
	padding: 5px 6px;
	outline: none;
	min-width: 0;
	box-sizing: border-box;
}
.jt-field input { text-align: center; }
.jt-field select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
	padding-right: 18px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%2394a3b8'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 5px center;
}
.jt-field select.no_style,
div.jBox-content .jt-field select.no_style {
	border: none;
	border-bottom: none;
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%2394a3b8'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 5px center;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 18px;
}
.jt-field input:disabled,
.jt-field select:disabled { opacity: 0.45; }
.jt-field-wide { flex: 1.8; }
.jt-field-num { flex: 1; min-width: 42px; }
.jt-field-muted { background: #f8fafc; }
.jt-field-muted[data-label]::before { background: #f8fafc; }

/* ── Job / Customer Info ── */
.jt-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 6px 8px;
	margin-bottom: 8px;
	border-radius: 5px;
	background: #f8fafc;
	border: 1px solid #f1f5f9;
}
.jt-info-row {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: #334155;
	line-height: 1.5;
}
.jt-info-row i {
	font-size: 10px;
	color: #0c4d8b;
	opacity: 0.65;
	width: 12px;
	text-align: center;
	flex-shrink: 0;
}
.jt-info-row span { font-weight: 500; }
.jt-info-row em { font-style: normal; color: #94a3b8; font-weight: 400; }
.jt-type-badge span { color: #64748b; font-weight: 600; text-transform: uppercase; font-size: 9px; letter-spacing: 0.05em; }
.jt-type-badge i { color: #94a3b8; }
.jt-missed-badge { background: #fef2f2; border-radius: 3px; padding: 1px 5px; }
.jt-missed-badge i { color: #dc2626 !important; }
.jt-missed-badge span { color: #991b1b !important; font-weight: 600; }

/* ── Inline note (queue/stock) ── */
.jt-inline-note {
	display: flex;
	align-items: flex-start;
	gap: 5px;
	padding: 5px 8px;
	border-radius: 5px;
	background: #fffbeb;
	border: 1px solid #fde68a;
	font-size: 11px;
	font-weight: 500;
	color: #92400e;
	margin-bottom: 8px;
}
.jt-inline-note i { margin-top: 1px; font-size: 10px; flex-shrink: 0; }

/* ── Attachments display ── */
.jt-att {
	padding: 6px 8px;
	border-radius: 5px;
	background: #f8fafc;
	border: 1px solid #f1f5f9;
	margin-bottom: 8px;
}
.jt-att-head {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 9px;
	font-weight: 600;
	color: #94a3b8;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 2px;
}
.jt-att-head i { font-size: 9px; color: #0c4d8b; }
.jt-att-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 14px;
	height: 14px;
	padding: 0 3px;
	border-radius: 7px;
	background: #e0efff;
	color: #0c4d8b;
	font-size: 9px;
	font-weight: 700;
}
.jt-att-item {
	font-size: 11px;
	color: #334155;
	padding: 1px 0 1px 14px;
	position: relative;
}
.jt-att-tag {
	display: inline-block;
	font-size: 8px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 1px 4px;
	border-radius: 3px;
	background: #e0e7ff;
	color: #3730a3;
	vertical-align: middle;
	margin-left: 4px;
}
.jt-att-item::before {
	content: '';
	position: absolute;
	left: 5px;
	top: 7px;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #cbd5e1;
}

/* ── Drawings thumbnails ── */
.jt-draws {
	display: flex;
	gap: 5px;
	overflow-x: auto;
	margin-bottom: 8px;
	padding: 2px 0;
}
.jt-draws.prd_draw { float: none; margin-left: 0; padding-left: 0; display: flex; }
.jt-draws .dt_draw img {
	height: 78px;
	width: auto;
	max-width: 132px;
	object-fit: contain;
	background: #f1f5f9;
	border-radius: 3px;
	display: block;
}

/* PDF preview modal — strip jBox's chrome padding so the embedded PDF
   actually fills the modal it was sized to. preview_pdf() computes the
   <object> width/height from the drawing's true PNG dims, so any padding
   here just adds white margin around an already-sized PDF viewer.
   The `!important` mirrors `production.css:3022` which sets a global
   `.jBox-Modal .jBox-content` padding with !important — that needs to be
   beaten with !important, not just specificity. */
.jBox-Modal.pdf-preview-jbox .jBox-content {
	padding: 0 !important;
	line-height: 0;
}
.jBox-Modal.pdf-preview-jbox .jBox-container {
	background: transparent;
	box-shadow: 0 12px 36px rgba(15,23,42,0.35), 0 0 0 1px rgba(15,23,42,0.06);
}
.jBox-Modal.pdf-preview-jbox .pdf_prev > object {
	display: block;
	margin: 0 auto;
}
/* Auto-generated submittal drawing card styling lives in
   css/production.css (canonical "generative reference" design). */

/* ── Notes textarea ── */
.jt-notes-wrap { margin-bottom: 8px; }
.jt-notes-wrap textarea {
	width: 100%;
	min-height: 36px;
	border: 1px solid #e2e8f0;
	border-radius: 5px;
	background: #fff;
	font-size: 11px;
	color: #1e293b;
	padding: 6px 8px;
	resize: vertical;
	outline: none;
	box-sizing: border-box;
	font-family: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.jt-notes-wrap textarea:focus {
	border-color: #0c4d8b;
	box-shadow: 0 0 0 2px rgba(12,77,139,0.06);
}
.jt-notes-wrap textarea::placeholder { color: #cbd5e1; }

/* ── Action Bar ── */
.jt-actions {
	display: flex;
	align-items: center;
	gap: 2px;
	padding-top: 8px;
	border-top: 1px solid #f1f5f9;
}
.jt-act {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 7px 10px;
	border-radius: 4px;
	color: #64748b;
	font-size: 11px;
	font-weight: 500;
	cursor: pointer;
	transition: color 0.12s ease, background 0.12s ease;
	white-space: nowrap;
	line-height: 1;
	text-decoration: none;
}
.jt-act:hover { color: #0c4d8b; background: #f0f7ff; }
.jt-act i { font-size: 10px; line-height: 1; }
.jt-act-spacer { flex: 1; }
.jt-act-rm {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 5px;
	color: #cbd5e1;
	cursor: pointer;
	transition: color 0.12s ease, background 0.12s ease;
	text-decoration: none;
	flex-shrink: 0;
}
.jt-act-rm:hover { color: #dc2626; background: #fef2f2; }
.jt-act-rm i { font-size: 12px; }
/* ═══ End jBox Tooltip Redesign ═══ */

/* ===== Trucking Mobile layout resets ===== */
/* The half-built `.mob-trucks` card view was removed 2026-04-15 in favor of
   using the same horizontal-scrolling schedule grid that production.php uses
   on mobile. The grid and its drag-and-drop come from css/dispatch.css's
   @media (max-width: 768px) block and js/dispatch.js's SchPointer module. */
@media (max-width: 768px) {
	/* ══════════════════════════════════════════════════════
	   Mobile layout: lock the viewport, make #prod_today the
	   sole scroll container filling the area below the two
	   fixed bars (46px trucking header + 53px mob-date-nav).
	   This makes `position: sticky` inside #prod_today work
	   properly for both the time header (sticky top) and the
	   truck-name column (sticky left) — they stick relative
	   to #prod_today's own scroll offset, not the body's.
	   ══════════════════════════════════════════════════════ */
	/* Scoped via :has() so only schedule pages (trucking + production,
	   which both have #prod_today) get a locked viewport — other mobile
	   pages without #prod_today keep normal body scroll. */
	html:has(#prod_today), body:has(#prod_today) {
		height: 100%;
		overflow: hidden;
	}
	body:has(#prod_today) div#flip_me { width: 100% !important; margin: 0 !important; height: 100%; }
	body:has(#prod_today) div#flip_me > form { height: 100%; margin: 0; padding: 0; }
	/* --mob-header-h is set via JS on each page's init (measures the
	   actual #butt_container height — 46px on trucking, 58px on
	   production). 52px is the mob-date-nav's own rendered height
	   (38px controls + 7+7 padding = 52px). */
	div#prod_today {
		position: fixed !important;
		top: calc(var(--mob-header-h, 46px) + 52px) !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: auto !important;
		-webkit-overflow-scrolling: touch;
	}
	.sch-header-clone { display: none !important; }
	/* The above-grid bar holds the desktop date_cont + plant_scroll which
	   are both hidden on mobile. The wrapper itself renders as an empty
	   14px-tall strip between the date nav and the schedule grid — hide
	   it so the time header sits flush under the fixed date nav. */
	.sch-above-grid { display: none !important; }
	div.left_ws { display: none !important; }
	/* #multi_ops is the multi-select toast (Adjust / Remove). It needs to be
	   hidden until the user enters multi-select mode, then shown via the
	   .sch-action-toast.visible rule in dispatch.css's mobile block. The base
	   .sch-action-toast rule already starts at display:none, so no override
	   here — let .visible take effect. */
	/* div#dr is now a bottom-sheet on mobile — see dispatch.css mobile block.
	   div.drag_task lives inside #dr/.dr-foot, so it should remain visible. */
	#new_driver, #new_truck, #sort_trucks, #print_draw { display: none !important; }
	.mob-overflow-btn, .mob-overflow-menu, .mob-drawer-toggle { display: none !important; }
	.sch-bar-btn { display: none !important; }

	/* The old dedicated plant row is gone on mobile — the plant selector
	   is JS-moved into .mob-date-nav on init (see trucking.php $(function)). */
	div.plant_scroll { display: none !important; }
	div.date_cont { display: none !important; }

	/* Raise the fixed trucking header above all grid content so the time
	   header row can't paint over it when the body scrolls. */
	#butt_container { z-index: 40 !important; }

	/* ══════════════════════════════════════════════════════
	   Mobile date nav — fixed below the trucking header, stays
	   in place while the grid scrolls horizontally. Layout:
	   [← arrow] [Date pill] [→ arrow] [Plant pill]
	   All four elements share the same height (38px), the same
	   pill radius, background, and color — visually a single row
	   of equal-weight controls.
	   z-index:30 keeps it above the sch-header-cell (z:25) so when
	   the time bar scrolls up through this region, the date nav
	   stays on top.
	   ══════════════════════════════════════════════════════ */
	.mob-date-nav {
		display: flex !important;
		align-items: center;
		justify-content: flex-start;
		gap: 6px;
		position: fixed;
		top: var(--mob-header-h, 46px);  /* set dynamically per page's #butt_container height */
		left: 0;
		right: 0;
		z-index: 30;
		padding: 7px 12px;
		background: #fafcfd;
		border-bottom: 1px solid #e2e8f0;
	}
	[data-theme="dark"] .mob-date-nav {
		background: #0f1624;
		border-bottom-color: #1f2937;
	}

	/* Shared pill look for label, arrows, and plant select.
	   #prod_today prefix on the plant-select selector is required to beat
	   production.php's inline `div#prod_today select[name=plant]` rules
	   (specificity 1,1,2) and trucking's `div#flip_me select[name=plant]`
	   rules — without it my rule would lose the cascade and the plant
	   would render at 30px with a desktop-style border. */
	.mob-date-label,
	.mob-date-arrow,
	#prod_today .mob-date-nav select[name=plant] {
		height: 38px !important;
		min-height: 38px !important;
		border-radius: 10px !important;
		background: #f1f5f9;
		color: #0c4d8b;
		border: none !important;
		box-shadow: none !important;
		font-weight: 600;
		-webkit-tap-highlight-color: transparent;
		transition: background-color 0.15s;
		box-sizing: border-box;
		flex-shrink: 0;
		line-height: 38px;
	}
	[data-theme="dark"] .mob-date-label,
	[data-theme="dark"] .mob-date-arrow,
	[data-theme="dark"] #prod_today .mob-date-nav select[name=plant] {
		background: #1f293c;
		color: #4a9eff;
	}

	.mob-date-arrow {
		width: 38px;
		padding: 0;
		font-size: 16px;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.mob-date-arrow:active { background: #e2e8f0; }
	[data-theme="dark"] .mob-date-arrow:active { background: #263048; }

	/* Action icons (Manage Employees, End of Day, Tentative Mode) get
	   JS-moved inline into .mob-date-nav after the next-arrow. Style
	   them as peers of .mob-date-arrow so the row reads as a single
	   strip of equal-weight controls. */
	.mob-date-nav .prod-bar-btn,
	.mob-date-nav .tent-mode-toggle {
		width: 38px !important;
		height: 38px !important;
		min-height: 38px !important;
		padding: 0 !important;
		margin: 0 !important;
		border: none !important;
		border-radius: 10px !important;
		background: #f1f5f9 !important;
		color: #0c4d8b !important;
		font-size: 16px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		flex-shrink: 0;
		box-shadow: none !important;
		-webkit-tap-highlight-color: transparent;
		transition: background-color 0.15s;
	}
	.mob-date-nav .prod-bar-btn i,
	.mob-date-nav .tent-mode-toggle .tent-mode-icon {
		font-size: 16px !important;
		color: inherit;
	}
	.mob-date-nav .prod-bar-btn:active,
	.mob-date-nav .tent-mode-toggle:active { background: #e2e8f0 !important; }
	/* Active tent-mode keeps its amber fill so the on-state still reads. */
	.mob-date-nav .tent-mode-toggle.active {
		background: linear-gradient(180deg, #f59e0b, #d97706) !important;
		color: #fff !important;
		box-shadow: 0 1px 4px rgba(217, 119, 6, 0.30) !important;
	}
	.mob-date-nav .tent-mode-toggle.active .tent-mode-icon { color: #fff; }
	[data-theme="dark"] .mob-date-nav .prod-bar-btn,
	[data-theme="dark"] .mob-date-nav .tent-mode-toggle {
		background: #1f293c !important;
		color: #4a9eff !important;
	}
	[data-theme="dark"] .mob-date-nav .prod-bar-btn:active,
	[data-theme="dark"] .mob-date-nav .tent-mode-toggle:active { background: #263048 !important; }

	.mob-date-label {
		flex: 1 1 auto;
		min-width: 0;
		padding: 0 14px;
		line-height: 38px;
		font-size: 15px;
		cursor: pointer;
		user-select: none;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.mob-date-label:active { background: #e2e8f0; }
	[data-theme="dark"] .mob-date-label:active { background: #263048; }

	#prod_today .mob-date-nav select[name=plant] {
		-webkit-appearance: none !important;
		-moz-appearance: none !important;
		appearance: none !important;
		width: auto !important;
		max-width: 120px !important;
		margin: 0 !important;
		padding: 0 26px 0 14px !important;
		font-size: 15px !important;
		font-weight: 600 !important;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230c4d8b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
		background-repeat: no-repeat !important;
		background-position: right 10px center !important;
		background-size: 10px 6px !important;
		background-color: #f1f5f9 !important;
		text-transform: none !important;
		letter-spacing: normal !important;
		text-align-last: left !important;
		color: #0c4d8b !important;
		line-height: 38px !important;
		cursor: pointer;
	}
	[data-theme="dark"] #prod_today .mob-date-nav select[name=plant] {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%234a9eff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
		background-color: #1f293c !important;
	}

	/* Spinner is inline-hidden but FA's own CSS reshows it as display:block.
	   Force hide until explicitly toggled, and neutralize the hidden mob_date
	   input so it doesn't steal flex width. */
	.mob-date-nav > .mob-date-spinner { display: none !important; }
	.mob-date-nav > input#mob_date { position: absolute !important; width: 0 !important; height: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; }

	/* Sort / new emp / new area forms (now modals — see dispatch.css) */
	tr#new_emp, tr#new_area, tr#sort_area, tr#hrs_head { display: none !important; }

	/* Prevent accidental horizontal page scroll — the grid itself scrolls
	   inside #prod_today (see css/dispatch.css 768px block). */
	body { overflow-x: hidden; }
	div#flip_me form { text-align: left !important; }
}

/* Desktop: hide the mobile date nav (still used on mobile, see trucking.php) */
@media (min-width: 769px) {
	.mob-date-nav { display: none !important; }
}

.fa-rotate-45 {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
div.dt_draw.lpb {
	height:106px;
	width:77px;
	box-sizing: border-box;
    border: 1px solid #CCC;
    padding: 5px;
	text-align:center;
	color:#333;
	border-radius: 5px;
	background: rgba(221, 221, 221, 0.54);
}
div.dt_draw.lpb a {
	color:#333;
	text-decoration:none;
	font-size: 11px;
	font-weight:bold;
}
div.dt_draw.lpb i {
	margin:0px auto 4px auto;
	font-size: 50px;
	color: rgba(0, 0, 0, 0.5);
	display:block;
	max-width:none;
}
div.dt_draw.lpb:hover {
	background: #ade6b9;
	border: 1px solid #5ebb61;
	text-decoration:none;
}
div.dt_draw.lpb i:hover, div.dt_draw.lpb a:hover {
	text-decoration:none;
}
div.s_area i:not(.fa-truck) {
	position:relative;
	right: -5px;
    font-size: 14px;
	cursor:pointer;
	float:right;
}
div.qc_tools {
	margin-bottom:15px;
	border-bottom: 1px solid #999;
    padding-bottom: 10px;
}
div.qc_pour {
	display: inline-block;
    padding: 10px;
    border: 1px solid #999;
    border-radius: 5px;
	margin-right: 5px;
}
div.qc_pour:hover {
	border: 1px solid rgba(49, 97, 122, 1);
	background-color: rgba(0, 173, 255, 0.06);
	cursor:pointer;
}
div.qc_pour.sel {
	border: 1px solid #666;
	background-color: rgba(49, 97, 122, 0.28);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
div.qc_pour i {
	margin-right:5px;
}
span.area_name {
	display:block;
	font-weight:bold;
	font-size:14px;
}
span.area_prod {
	display:block;
}
div.qc_pour_rep {
	margin-top: 10px;
}
div.qc_tools div.area {
	display:inline-block;
	margin-right:15px;
	vertical-align:top;
}
div.qc_pour_rep div.prd_draw {
	float:none;
	display:inline-block;
	margin-left: 0px;
    padding-left: 0px;
}
div.qc_pour_rep div.pd_item {
	float:none;
	display:inline-block;
	padding:0px;
	border-radius:0px;
	background-color:transparent;
	margin:0px;
	margin-top:2px;
	margin-right: 5px;
}
div.qc_pour_rep div.pd_item span.draw_ops {
	display:none;
	position: absolute;
    top: 28px;
    text-align: center;
    width: 100%;
    font-size: 12px;
	background-color: rgba(204, 204, 204, 0.42);
    padding: 3px 0px;
}
div.qc_pour_rep div.pd_item span.draw_ops i.delete_hover {
	font-size: 16px;
}
div.qc_pour_rep div.pd_item:hover span.draw_ops {
	display:block;
}
div.qc_pour_rep div.prd_draw img {
	max-height:50px;
}
div.qc_docs {
	display:block;
	margin-bottom: 10px;
}
table#grp_table thead td i.fa-dollar-sign.group-pricing {
	background-color:#062A55;
	color:#FFF;
}
/* Auto group-pricing toggle, in-flight: the icon is swapped to a spinning
   1/3 spinner while the server recomputes. The background is a perfect circle
   (equal dims + 50% radius) so that, even though fa-spin rotates the whole
   element, the fill reads as a static disc — only the glyph appears to spin. */
table#grp_table thead td i.gp_toggle_loading {
	position:relative; right:0px; top:0px; float:right;
	width:32px; height:32px; padding:0;
	display:inline-flex; align-items:center; justify-content:center;
	font-size:15px;
	color:#062A55;
	background-color: rgba(6, 42, 85, 0.12);
	border-radius:50%;
	cursor: default;
}
span.grp_items {
	padding: 8px 10px;
    display: inline-block;
}
div.draw_add {
	min-width:60px;
	height:80px;
	border:1px solid #CCC;
	background: #ade6b9;
    width: auto;
    height: auto;
    padding: 5px;
    line-height: 25px;
    text-align: center;
    font-weight: bold;
    display: inline-block;
    border-radius: 5px;
    border: 1px solid #5ebb61;
    margin: 5px;
    font-size: 11px;
	cursor:pointer;
}
div.jBox-content div.draw_add i {
	max-width:none;
}
div.jBox-content div.adj_schedule div#dropzone i, div.jBox-content div.adj_draw div#dropzone i {
	padding:inherit;
	height:auto;
	max-width:none;
}
div.q_qty {
	position: absolute;
	right: 3px;
    top: -1px;
    border-radius: 2px;
    background-color: #033d46;
    color: #FFF;
    padding: 2px;
    font-size: 8px;
    font-weight: bold;
    min-width: 9px;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1), 0 1px 1px 0 rgba(0, 0, 0, 0.12);
}
button.sm_button span, button.round span {
	vertical-align: middle;
}
td.surplus {
	background-color:rgba(97, 90, 8, 0.15) !important;
}
td.error {
	background-color:rgba(255, 0, 0, 0.05) !important;
}
td.sched_date {
	color: #4a3e00;
    background-color: rgba(184, 184, 21, 0.13) !important;
}
td.tent_date {
	color: #401515;
    background-color: rgba(117, 39, 4, 0.23) !important;
}
td.pour_date {
	color: #153c40;
    background-color: rgba(4, 117, 116, 0.19) !important;
}
td.cust_ready {
	color: #15401f;
    background-color: rgba(4, 117, 22, 0.19) !important;
}
/* Old jQuery UI droppable/undroppable styles removed — SchPointer uses .sch-drop-target */
/* Legacy icon pill styles removed — now styled by .sch-bar-btn in dispatch.css */
div#emps {
	display:none;
}
div.emp_drag {
	background: #498249;
}
div.emp_drag:hover {
	background: #366236;
}
div.emp_t div.zone.rotated {
	color: rgba(0,0,0,0.9);
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
div.emp_t div.zone, span.t_type, span.t_caps {
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
div.emp_t:hover span.t_type {
	text-decoration:none;
}
a#nc.new {
	position: absolute;
    right: -26px;
    top: 14px;
    font-size: 14.5px;
	cursor:pointer;
	color:#000;
	border-radius:25px;
}
a#nc.new i {
	padding:3.5px 5px 3px 4.5px;
}
a#nc.new:hover {
	color:rgb(44, 160, 28);
}
div#dt_buttons button span, tr#act_buttons button span {
	vertical-align: middle;
}
span.sp_draw_name {
	position: absolute;
    display: block;
    background: rgba(9, 131, 57, 0.99);
    z-index: 15;
    padding: 5px;
    color: #FFF;
	min-width:100px;
	width:auto;
	font-size: 11px;
}
tr.missed, tr.del_missed, table#report_list tr.missed:nth-child(even) {
    color: rgb(255, 0, 0);
    font-weight: bold;
}
tr.added, table#report_list tr.added:nth-child(even) {
    color: rgba(0,142,16,1.00);
    font-weight: bold;
}
table#report_list tr.del_missed td, table#report_list tr.del_return td {
	padding:8px 0px;
}
tr.rb_missed, table#report_list tr.rb_missed:nth-child(even) {
    background-color:rgba(255,0,0,0.32);
	color: rgb(255, 0, 0);
    font-weight: bold;
}
i.srt_str {
	margin-left: 15px;
    float: right;
    padding: 1.6px;
	cursor:pointer;
}
table#sort_str tr.it_list {
	cursor:move;
}
table#sort_str tr.ui-sortable-helper {
	background-color:antiquewhite;
}
div.pdf_pre div.spinner {
	font-size: 100px;
    color: rgba(148, 148, 148, 0.46);
    position: absolute;
    right: 0;
    left: 0;
    top: 100px;
    bottom: 0;
    display: block;
    width: 100px;
    height: 100px;
    padding: 0px;
    margin: 0px auto;
    text-align: center;
    vertical-align: middle;
}
div.pdf_pre div.spinner i {
    display: block;
    position: relative;
    padding: 0px;
    text-align: center;
	z-index:5;
	margin: 0px;
    max-width: none;
}
iframe {
	border:0px;
}
div.infoshow div.jBox-container {
	background: rgba(108, 108, 108, 0.92);
}
table#report_list:not(.inventory) tbody tr:not(.stype_head):not(.tax_info):hover td, table.bol_details tbody tr:hover td {
	background-color: rgba(12, 77, 139, 0.04);
}
table#report_list:not(.inventory) tbody tr:not(.stype_head):not(.tax_info):hover, table.bol_details tbody tr:hover {
	background-color: rgba(12, 77, 139, 0.04);
}
table#report_list.inventory tbody tr:hover, table#report_list.inventory tbody tr:hover td {
	cursor:pointer;
}
table#report_list.inventory tr.tr_open {
	font-weight:bold;
	background-color:#B4E8B4;
}
table#report_list.inventory tr.inv_details {
	background-color:#E4FFE4;
}
table#report_list.inventory tr.inv_details:nth-child(even) {
	background-color:#e4ffe4cf;
}
table#report_list.inventory tr.tr_open td {
	padding-top:5px;
	padding-bottom:5px;
	font-size:12px;
}

/* ============================================
   Modern Inventory Table Styling (Desktop)
   Card-like rows matching orders section aesthetic
   ============================================ */

/* Table structure: separated rows with spacing */
table#report_list.inventory {
	border-collapse: separate;
	border-spacing: 0 6px;
	background: transparent;
}

/* Base row styling: card-like appearance.
   Shadow lives on the TR via filter: drop-shadow so it follows the rounded
   TD corners (a TR's own background + box-shadow paint a hard rectangle and
   bleed past the first/last TD radius). TR background is transparent; each
   TD paints its own white so the rounded ends actually read as rounded. */
table#report_list.inventory tbody tr.inv,
table#report_list.inventory tbody tr.inv_highlight {
	background: transparent;
	box-shadow: none;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.04));
	transition: filter 0.2s ease, transform 0.15s ease;
}

table#report_list.inventory tbody tr.inv td,
table#report_list.inventory tbody tr.inv_highlight td {
	background: #ffffff;
	transition: background-color 0.15s ease;
}

/* Zebra striping — barely-there tint on every other product row so the
   eye has something to track across wide rows. Selecting tr.inv-only via
   :nth-of-type stays correct even when an inv_details_container is
   interleaved during expand (only tr.inv counts toward this index). */
table#report_list.inventory tbody tr.inv:nth-of-type(even) td,
table#report_list.inventory tbody tr.inv_highlight:nth-of-type(even) td {
	background-color: #fcfdfe;
}

/* Hover effect: subtle lift + a tint clearly above the zebra alt */
table#report_list.inventory tbody tr.inv:hover,
table#report_list.inventory tbody tr.inv_highlight:hover {
	filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.08)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.04));
	transform: translateY(-1px);
}
table#report_list.inventory tbody tr.inv:hover td,
table#report_list.inventory tbody tr.inv_highlight:hover td {
	background-color: #eef3f8;
}

/* Rounded corners on first/last cells */
table#report_list.inventory tbody tr.inv td:first-child,
table#report_list.inventory tbody tr.inv_highlight td:first-child {
	border-radius: 10px 0 0 10px;
}

table#report_list.inventory tbody tr.inv td:last-child,
table#report_list.inventory tbody tr.inv_highlight td:last-child {
	border-radius: 0 10px 10px 0;
}

/* Cell padding refinement */
table#report_list.inventory tbody tr.inv td,
table#report_list.inventory tbody tr.inv_highlight td {
	padding: 12px 10px;
	vertical-align: middle;
}

/* Highlighted row (inventory item) styling — accent stripe lives on the
   first TD only so it picks up the rounded radius. Painting it on the TR
   too produces a square sliver outside the rounded corner. */
table#report_list.inventory tbody tr.inv_highlight td:first-child {
	border-left: 3px solid #0c4d8b;
	border-radius: 10px 0 0 10px;
}

/* Modern thead styling */
table#report_list.inventory thead tr.main td {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #64748b;
	padding: 10px 10px 8px;
	background: transparent;
	border-bottom: none;
}

table#report_list.inventory thead tr.main td div {
	font-size: 10px;
	font-weight: 700;
}

table#report_list.inventory thead tr.main td i {
	font-size: 11px;
	opacity: 0.7;
}

/* Quantity cells: pill-like styling */
table#report_list.inventory tbody td.qty div,
table#report_list.inventory tbody td.available div,
table#report_list.inventory tbody td.quoted div {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	padding: 4px 10px;
	border-radius: 6px;
	font-weight: 600;
	font-size: 12px;
	transition: all 0.15s ease;
}

/* CR (Customer Ready) column */
table#report_list.inventory tbody td.qty:first-child div {
	background: rgba(16, 185, 129, 0.10);
	color: #059669;
}

/* Available column - interactive */
table#report_list.inventory tbody td.available div {
	background: rgba(12, 77, 139, 0.08);
	color: #0c4d8b;
	cursor: pointer;
}

table#report_list.inventory tbody td.available div:hover {
	background: rgba(12, 77, 139, 0.15);
}

/* Quoted column - interactive */
table#report_list.inventory tbody td.quoted div {
	background: rgba(245, 158, 11, 0.10);
	color: #d97706;
	cursor: pointer;
}

table#report_list.inventory tbody td.quoted div:hover {
	background: rgba(245, 158, 11, 0.18);
}

/* Other quantity cells */
table#report_list.inventory tbody td.qty div {
	background: #f8fafc;
	color: #475569;
}

/* Highlight zero values differently */
table#report_list.inventory tbody td.qty div:empty,
table#report_list.inventory tbody td.qty div:contains('0') {
	opacity: 0.5;
}

/* Details rows keep existing green theme but modernized */
table#report_list.inventory tr.inv_details {
	background-color: #f0fdf4;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04);
}

table#report_list.inventory tr.inv_details:nth-child(even) {
	background-color: #ecfdf5;
}

table#report_list.inventory tr.inv_details td {
	padding: 10px 10px;
	font-size: 12px;
}

/* Open row: top half of a single connected card. Drop the heavy ring +
   raise; instead, square off the bottom corners, paint a soft tint, and
   add a 3px accent stripe that continues down through the details panel.
   The panel below uses a negative margin to close the border-spacing gap
   so the two trs read as one card with one outline. */
table#report_list.inventory tbody tr.inv.tr_open,
table#report_list.inventory tbody tr.inv_highlight.tr_open {
	font-weight: 600;
	/* Soft upward/side shadow so the active card visibly lifts off the list;
	   the panel below carries the matching downward shadow. */
	filter: drop-shadow(0 -2px 5px rgba(12, 77, 139, 0.10));
	transform: none;
	position: relative;
	z-index: 1;
}
table#report_list.inventory tbody tr.inv.tr_open td,
table#report_list.inventory tbody tr.inv_highlight.tr_open td {
	background-color: #e7f1fc;
	border-top: 1px solid #aecdec;
	border-bottom: 1px solid #aecdec;
}
table#report_list.inventory tbody tr.inv.tr_open td:first-child,
table#report_list.inventory tbody tr.inv_highlight.tr_open td:first-child {
	border-radius: 10px 0 0 0;
	border-left: 4px solid #0c4d8b;
}
table#report_list.inventory tbody tr.inv.tr_open td:last-child,
table#report_list.inventory tbody tr.inv_highlight.tr_open td:last-child {
	border-radius: 0 10px 0 0;
	border-right: 1px solid #aecdec;
}

table#report_list.inventory tbody tr.inv.tr_open:hover td,
table#report_list.inventory tbody tr.inv_highlight.tr_open:hover td {
	background-color: #ddebfa;
}

/* ============================================
   Modern Inventory Detail Panel
   Bottom half of the expanded card — visually joined to its parent row
   ============================================ */

table#report_list.inventory tr.inv_details_container {
	background: transparent !important;
	box-shadow: none !important;
	filter: none;
}

table#report_list.inventory tr.inv_details_container:hover {
	transform: none !important;
	box-shadow: none !important;
	background: transparent !important;
	filter: none !important;
}

/* Direct-child selector so this doesn't cascade into the nested
   table.inv-rows-table TDs (which need their own zebra striping). */
table#report_list.inventory tr.inv_details_container > td {
	border-radius: 0 !important;
	background: transparent !important;
	padding: 0 !important;
}

/* Pull the panel up over the 6px border-spacing gap so it kisses the row
   above; that, plus matching the row's tint along the seam, makes the two
   trs read as a single rounded card. */
.inv-details-panel {
	background: #fff;
	margin-top: -6px;
	margin-left: 0;
	margin-right: 0;
	border: 1px solid #aecdec;
	border-top: none;
	border-left: 4px solid #0c4d8b;
	border-radius: 0 0 10px 10px;
	padding: 16px 20px 20px;
	animation: invDetailSlideIn 0.25s ease-out;
	box-shadow: 0 10px 22px -8px rgba(12, 77, 139, 0.28), 0 2px 6px rgba(12, 77, 139, 0.10);
	position: relative;
}

/* A 1px seam at the very top blends the panel's white into the row's tint
   so there's no visible hairline where the two trs meet. */
.inv-details-panel::before {
	content: "";
	position: absolute;
	left: -4px;
	right: -1px;
	top: -1px;
	height: 1px;
	background: #e7f1fc;
	pointer-events: none;
}

@keyframes invDetailSlideIn {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Loading variant — same connected-card shell, swap contents for the
   shared inv-spinner so it matches every other modal/panel loader. */
.inv-details-panel--loading {
	padding: 22px 20px 24px;
}
.inv-details-panel--loading .inv-loader {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 48px;
	color: #475569;
	font-size: 12.5px;
	letter-spacing: 0.01em;
}
.inv-details-panel--loading .inv-loader__spinner {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid rgba(12, 77, 139, 0.18);
	border-top-color: #0c4d8b;
	animation: invSpinnerSpin 0.7s linear infinite;
	will-change: transform;
}
.inv-details-panel--loading .inv-loader__text {
	font-weight: 500;
}

/* Panel header */
.inv-details-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid #e2e8f0;
}

.inv-details-title {
	font-size: 13px;
	font-weight: 700;
	color: #334155;
	display: flex;
	align-items: center;
	gap: 8px;
}

.inv-details-title i {
	color: #0c4d8b;
	font-size: 14px;
}

/* Pagination controls */
.inv-details-pagination {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* Per-page selector */
.inv-perpage-wrap {
	display: flex;
	align-items: center;
	gap: 6px;
}

.inv-perpage-label {
	font-size: 11px;
	font-weight: 600;
	color: #64748b;
}

.inv-perpage-select {
	height: 26px;
	padding: 0 28px 0 10px;
	border: 1px solid #e2e8f0;
	border-radius: 4px;
	background: #fff;
	font-size: 11px;
	font-weight: 600;
	font-family: inherit;
	color: #334155;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="5" viewBox="0 0 8 5"><path fill="%2394a3b8" d="M4 5L0 0h8z"/></svg>');
	background-repeat: no-repeat;
	background-position: right 10px center;
	transition: all 0.15s ease;
}

.inv-perpage-select:hover {
	border-color: #cbd5e1;
}

.inv-perpage-select:focus {
	outline: none;
	border-color: #0c4d8b;
}

/* The global `div.rep_content select { padding: 0 }` rule (higher specificity
   than the bare .inv-perpage-select class) was zeroing the padding, collapsing
   the box so the value and the dropdown caret overlapped. Re-assert the gutter
   with a padding/width-only rule that out-specifies it — colours/borders stay
   owned by the light/dark .inv-perpage-select rules so dark mode is untouched. */
div.rep_content select.inv-perpage-select {
	padding: 0 30px 0 12px;
	min-width: 58px;
}

/* Page navigation */
.inv-page-nav {
	display: flex;
	align-items: center;
	gap: 8px;
	transition: opacity 0.2s ease;
}

.inv-page-nav.is-hidden {
	opacity: 0.3;
	pointer-events: none;
}

.inv-page-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1px solid #e2e8f0;
	background: #fff;
	border-radius: 6px;
	cursor: pointer;
	color: #64748b;
	transition: all 0.15s ease;
	padding: 0;
}

.inv-page-btn:hover:not(:disabled) {
	background: #f1f5f9;
	color: #0c4d8b;
	border-color: #cbd5e1;
}

.inv-page-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.inv-page-btn i {
	font-size: 11px;
	max-width: none;
	margin: 0;
}

.inv-page-info {
	font-size: 12px;
	font-weight: 600;
	color: #64748b;
	min-width: 50px;
	text-align: center;
}

/* ID in card header with copy button */
.inv-item-id-wrap {
	display: flex;
	align-items: center;
	gap: 6px;
}

.inv-item-id-wrap .inv-item-id {
	font-size: 11px;
	font-weight: 700;
	color: #64748b;
	background: #e2e8f0;
	padding: 3px 8px;
	border-radius: 4px;
}

/* Copy button in header */
.inv-item-id-wrap .inv-copy-btn {
	width: 22px;
	height: 22px;
	border: 1px solid transparent;
	background: transparent;
	color: #94a3b8;
}

.inv-item-id-wrap .inv-copy-btn:hover {
	background: #e2e8f0;
	color: #0c4d8b;
}

.inv-copy-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 1px solid #e2e8f0;
	background: #fff;
	border-radius: 4px;
	cursor: pointer;
	color: #94a3b8;
	transition: all 0.15s ease;
	padding: 0;
}

.inv-copy-btn:hover {
	background: #0c4d8b;
	border-color: #0c4d8b;
	color: #fff;
}

.inv-copy-btn i {
	font-size: 10px;
	max-width: none;
	margin: 0;
}

/* Loading state for history button */
.inv-action-btn.is-loading {
	pointer-events: none;
	opacity: 0.7;
}

.inv-action-btn.is-loading i {
	color: #0c4d8b;
}

/* Cards grid */
.inv-details-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 12px;
}

/* Individual item card */
.inv-item-card {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	overflow: hidden;
	transition: all 0.2s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.inv-item-card:hover {
	border-color: #cbd5e1;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Card header */
.inv-item-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	background: #fafbfc;
	border-bottom: 1px solid #f1f5f9;
}

.inv-item-id {
	font-size: 11px;
	font-weight: 700;
	color: #64748b;
	background: #e2e8f0;
	padding: 3px 8px;
	border-radius: 4px;
}

/* Action buttons */
.inv-item-actions {
	display: flex;
	gap: 4px;
}

.inv-action-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: none;
	background: transparent;
	border-radius: 6px;
	cursor: pointer;
	color: #94a3b8;
	transition: all 0.15s ease;
	padding: 0;
}

.inv-action-btn:hover {
	background: #f1f5f9;
	color: #0c4d8b;
}

.inv-action-btn.has-note {
	color: #0c4d8b;
}

.inv-action-btn i {
	font-size: 12px;
	max-width: none;
	margin: 0;
	padding: 0;
	height: auto;
}

/* Card body */
.inv-item-body {
	padding: 14px;
}

.inv-item-name {
	font-size: 13px;
	font-weight: 600;
	color: #1e293b;
	margin-bottom: 12px;
	line-height: 1.4;
}

/* Details grid inside card */
.inv-item-details {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.inv-detail-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.inv-detail-label {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #94a3b8;
}

.inv-detail-value {
	font-size: 12px;
	font-weight: 500;
	color: #334155;
}

/* Card footer with status */
.inv-item-footer {
	padding: 12px 14px;
	background: #fafbfc;
	border-top: 1px solid #f1f5f9;
}

.inv-status-wrapper {
	display: flex;
	align-items: center;
	gap: 10px;
}

.inv-status-label {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #64748b;
}

/* Status select styling */
select.inv-detail-status {
	flex: 1;
	height: 32px;
	padding: 0 28px 0 12px !important;
	margin-left: 8px;
	border: 1px solid #e2e8f0 !important;
	border-radius: 6px;
	background: #fff;
	font-size: 12px !important;
	font-weight: 500;
	font-family: inherit;
	color: #334155;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path fill="%2394a3b8" d="M5 6L0 0h10z"/></svg>');
	background-repeat: no-repeat;
	background-position: right 10px center;
	transition: all 0.15s ease;
}

select.inv-detail-status:hover {
	border-color: #cbd5e1;
}

select.inv-detail-status:focus {
	outline: none;
	border-color: #0c4d8b;
	box-shadow: 0 0 0 2px rgba(12, 77, 139, 0.1);
}

/* Status color variants */
select.inv-detail-status.status-customer_ready {
	border-color: rgba(16, 185, 129, 0.4);
	background-color: rgba(16, 185, 129, 0.05);
}

select.inv-detail-status.status-moh {
	border-color: rgba(12, 77, 139, 0.4);
	background-color: rgba(12, 77, 139, 0.05);
}

select.inv-detail-status.status-repair {
	border-color: rgba(239, 68, 68, 0.4);
	background-color: rgba(239, 68, 68, 0.05);
}

select.inv-detail-status.status-wip {
	border-color: rgba(245, 158, 11, 0.4);
	background-color: rgba(245, 158, 11, 0.05);
}

select.inv-detail-status.status-truck {
	border-color: rgba(99, 102, 241, 0.4);
	background-color: rgba(99, 102, 241, 0.05);
}

select.inv-detail-status.status-delivered {
	border-color: rgba(16, 185, 129, 0.4);
	background-color: rgba(16, 185, 129, 0.05);
}

select.inv-detail-status.status-second {
	border-color: rgba(245, 158, 11, 0.4);
	background-color: rgba(245, 158, 11, 0.05);
}

select.inv-detail-status.status-waste {
	border-color: rgba(107, 114, 128, 0.4);
	background-color: rgba(107, 114, 128, 0.05);
}

select.inv-detail-status.status-deleted {
	border-color: rgba(239, 68, 68, 0.4);
	background-color: rgba(239, 68, 68, 0.05);
	color: #dc2626;
}

select.inv-detail-status.status-inactive {
	border-color: rgba(107, 114, 128, 0.4);
	background-color: rgba(107, 114, 128, 0.05);
	color: #6b7280;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.inv-details-panel {
		padding: 12px;
	}
	
	.inv-details-grid {
		grid-template-columns: 1fr;
	}
	
	.inv-item-details {
		grid-template-columns: 1fr 1fr;
	}
}

/* History modal styling */
.inv-history-modal {
	padding: 10px;
}

.inv-history-modal .inv-history-header {
	font-size: 14px;
	font-weight: 600;
	color: #334155;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid #e2e8f0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.inv-history-modal .inv-history-header i {
	color: #0c4d8b;
}

.inv-history-modal table.history_table {
	width: 100%;
	border-collapse: collapse;
}

.inv-history-modal table.history_table tr.h_row {
	border-bottom: 1px solid #f1f5f9;
}

.inv-history-modal table.history_table tr.h_row:last-child {
	border-bottom: none;
}

.inv-history-modal table.history_table td {
	padding: 10px 8px;
	font-size: 12px;
	color: #334155;
	vertical-align: top;
}

.inv-history-modal table.history_table td:first-child {
	width: 30px;
	color: #94a3b8;
}

.inv-history-modal table.history_table td:first-child i {
	font-size: 12px;
}

/* Ordered/Quoted modal styling — renders inside WPModal .wpmodal-body.
   The modal card uses `--fit` so it sizes to the table's natural width
   (capped at viewport); no horizontal scroll on the body or the table. */
.wpmodal-body.inv-ordered-body { padding: 0; }
.inv-ordered-modal {
	overflow: visible;
}

.inv-ordered-modal table.inv-ordered-table {
	border-collapse: collapse;
	width: max-content;
	min-width: 100%;
}

.inv-ordered-modal tr.inv-ordered-head td {
	font-weight: 600;
	font-size: 11px;
	text-transform: uppercase;
	color: #fff;
	background-color: #0c4d8b;
	padding: 10px 12px;
	white-space: nowrap;
	position: sticky;
	top: 0;
	z-index: 1;
}

.inv-ordered-modal tr.inv-ordered-row {
	cursor: pointer;
	border-bottom: 1px solid #f1f5f9;
}

.inv-ordered-modal tr.inv-ordered-row:hover {
	background-color: rgba(12, 77, 139, 0.06);
}

.inv-ordered-modal tr.inv-ordered-row td {
	padding: 6px 12px;
	font-size: 12.5px;
	color: #334155;
	vertical-align: middle;
	white-space: nowrap;
	line-height: 1.35;
}
.inv-ordered-modal tr.inv-ordered-row + tr.inv-ordered-row td {
	border-top: 1px solid #f1f5f9;
}
.inv-ordered-modal tr.inv-ordered-row:nth-child(odd) td {
	background-color: #fafbfc;
}

.inv-ordered-modal tr.inv-ordered-row td:first-child {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: center;
	color: #0c4d8b;
}

/* Job name can wrap but stays tight; truncate to one line and reveal full
   text on hover via the title attribute (set in JS if/when desired). */
.inv-ordered-modal tr td.inv-ord-jobname {
	max-width: 280px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ============================================
   Stock Transfer Mode Styles
   ============================================ */

.transfer-mode-container {
	max-width: 1200px;
	margin: 0 auto 20px;
	padding: 20px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.transfer-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 20px;
	border-bottom: 1px solid #e2e8f0;
	margin-bottom: 20px;
	flex-wrap: wrap;
	gap: 15px;
}

.transfer-plant-selectors {
	display: flex;
	align-items: flex-end;
	gap: 15px;
	flex-wrap: wrap;
}

.transfer-plant-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.transfer-plant-group label {
	font-size: 11px;
	font-weight: 600;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.transfer-plant-group label i {
	color: #0c4d8b;
	font-size: 12px;
}

.transfer-select {
	padding: 12px 40px 12px 16px !important;
	font-size: 15px !important;
	font-weight: 600;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	background: linear-gradient(to bottom, #ffffff 0%, #f8fafc 100%) !important;
	color: #1e293b;
	min-width: 160px;
	cursor: pointer;
	transition: all 0.2s ease;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%2364748b" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 14px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
}

.transfer-select:hover {
	border-color: #cbd5e1;
	background: linear-gradient(to bottom, #ffffff 0%, #f1f5f9 100%);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
}

.transfer-select:focus {
	outline: none;
	border-color: #0c4d8b;
	box-shadow: 0 0 0 3px rgba(12, 77, 139, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
	background: #fff;
}

.transfer-select option {
	font-weight: 500;
	padding: 10px;
	background: #fff;
	color: #1e293b;
}

.transfer-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: linear-gradient(135deg, #0c4d8b 0%, #1e6bb8 100%);
	border-radius: 50%;
	color: #fff;
	font-size: 14px;
	box-shadow: 0 2px 8px rgba(12, 77, 139, 0.25);
	flex-shrink: 0;
	margin-bottom: 4px;
}

.transfer-actions {
	display: flex;
	gap: 10px;
}

.btn-transfer-ticket {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	background: #0c4d8b;
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s, transform 0.1s;
}

.btn-transfer-ticket:hover {
	background: #0a3d6e;
}

.btn-transfer-ticket:active {
	transform: scale(0.98);
}

.btn-transfer-ticket i {
	font-size: 16px;
}

.transfer-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.transfer-section {
	background: #fafbfc;
	border-radius: 10px;
	padding: 20px;
	border: 1px solid #e2e8f0;
}

.transfer-section h3 {
	margin: 0 0 15px 0;
	font-size: 16px;
	font-weight: 600;
	color: #1e293b;
	display: flex;
	align-items: center;
	gap: 8px;
}
.transfer-section-full h3 { margin-bottom: 0; }
#transfer_history_container { margin-top: 15px; }

.transfer-section h3 i {
	color: #0c4d8b;
}

.transfer-search {
	position: relative;
	margin-bottom: 15px;
}

.transfer-search::before {
	content: "\f002";
	font-family: "Font Awesome 5 Pro";
	font-weight: 400;
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: #94a3b8;
	font-size: 14px;
	z-index: 1;
	pointer-events: none;
	transition: color 0.2s ease;
}

.transfer-search:focus-within::before {
	color: #0c4d8b;
}

.transfer-search input {
	width: 100%;
	padding: 14px 16px 14px 42px !important;
	font-size: 14px !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 10px;
	background: linear-gradient(to bottom, #ffffff 0%, #f8fafc 100%) !important;
	box-sizing: border-box;
	transition: all 0.2s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
	color: #1e293b;
	font-family: inherit;
}

.transfer-search input::placeholder {
	color: #94a3b8;
	font-weight: 400;
}

.transfer-search input:hover {
	border-color: #cbd5e1;
	background: linear-gradient(to bottom, #ffffff 0%, #f1f5f9 100%);
}

.transfer-search input:focus {
	outline: none;
	border-color: #0c4d8b;
	box-shadow: 0 0 0 3px rgba(12, 77, 139, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
	background: #fff;
}

.transfer-search-results {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
	max-height: 320px;
	overflow-y: auto;
	z-index: 100;
	display: none;
	scrollbar-width: thin;
	scrollbar-color: #cbd5e1 transparent;
}

.transfer-search-results::-webkit-scrollbar {
	width: 6px;
}

.transfer-search-results::-webkit-scrollbar-track {
	background: transparent;
}

.transfer-search-results::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 3px;
}

.transfer-search-results.active {
	display: block;
	animation: searchResultsSlideIn 0.15s ease-out;
}

@keyframes searchResultsSlideIn {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.transfer-search-result {
	padding: 12px 16px;
	cursor: pointer;
	border-bottom: 1px solid #f1f5f9;
	transition: all 0.15s ease;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	text-align: left;
}

.transfer-search-result:first-child {
	border-radius: 11px 11px 0 0;
}

.transfer-search-result:last-child {
	border-bottom: none;
	border-radius: 0 0 11px 11px;
}

.transfer-search-result:only-child {
	border-radius: 11px;
}

.transfer-search-result:hover {
	background: linear-gradient(to right, #f0f7ff, #f8fafc);
}

.transfer-search-result:active {
	background: #e8f4ff;
}

.transfer-search-result .product-info {
	flex: 1;
	min-width: 0;
	text-align: left;
}

.transfer-search-result .product-name {
	font-weight: 600;
	color: #1e293b;
	font-size: 14px;
	line-height: 1.4;
	text-align: left;
}

.transfer-search-result .product-desc {
	font-size: 12px;
	color: #64748b;
	margin-top: 2px;
	line-height: 1.4;
	text-align: left;
}

.transfer-search-result .product-stock {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	color: #0c4d8b;
	font-weight: 600;
	background: rgba(12, 77, 139, 0.08);
	padding: 6px 12px;
	border-radius: 20px;
	white-space: nowrap;
	flex-shrink: 0;
}

.transfer-search-result .product-stock::before {
	content: "\f49e";
	font-family: "Font Awesome 5 Pro";
	font-weight: 400;
	font-size: 11px;
}

/* Inventory search results section divider */
.transfer-search-divider {
	padding: 6px 12px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #94a3b8;
	background: #f8fafc;
	border-bottom: 1px solid #e2e8f0;
}

/* Inventory result row — product primary, customer · job secondary */
.transfer-inv-result .product-info { flex: 1; }
.transfer-inv-result .inv-product-name {
	font-weight: 600;
	color: #1e293b;
	font-size: 13px;
}
.transfer-inv-result .inv-order-name {
	font-size: 11px;
	font-weight: 500;
	color: #64748b;
	margin-top: 1px;
}
.transfer-inv-result .inv-order-id {
	color: #94a3b8;
	font-weight: 600;
}
.transfer-inv-result .inv-status {
	display: inline-block;
	font-size: 10px;
	padding: 1px 6px;
	border-radius: 4px;
	margin-left: 6px;
	text-transform: capitalize;
}
.transfer-inv-result .inv-status-ready { background: #dcfce7; color: #166534; }
.transfer-inv-result .inv-status-other { background: #e0e7ff; color: #3730a3; }
.transfer-inv-result .inv-status-prod { background: #fef3c7; color: #92400e; }
.transfer-inv-result .inv-sched-date {
	font-size: 11px;
	font-weight: 600;
	color: #b45309;
	margin-top: 2px;
}
.transfer-inv-result .inv-sched-date i {
	margin-right: 4px;
}
.transfer-inv-result .inv-qty {
	font-weight: 700;
	color: #0c4d8b;
	font-size: 13px;
	min-width: 30px;
	text-align: right;
	flex-shrink: 0;
}

.transfer-items-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: 400px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #cbd5e1 transparent;
}

.transfer-items-list::-webkit-scrollbar {
	width: 6px;
}

.transfer-items-list::-webkit-scrollbar-track {
	background: transparent;
}

.transfer-items-list::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 3px;
}

.transfer-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
	color: #94a3b8;
	text-align: center;
	gap: 8px;
}

.transfer-empty-state i {
	font-size: 32px;
	color: #cbd5e1;
	margin-bottom: 4px;
}

.transfer-empty-state span {
	font-size: 14px;
	font-weight: 600;
	color: #64748b;
}

.transfer-empty-state small {
	font-size: 12px;
	color: #94a3b8;
}

.transfer-item-card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 14px;
	transition: all 0.2s ease;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.transfer-item-card:hover {
	border-color: #cbd5e1;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.transfer-item-header {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.transfer-item-qty {
	flex-shrink: 0;
}

.transfer-item-qty .qty-select {
	width: 64px;
	padding: 8px 10px;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 700;
	color: #0c4d8b;
	background: linear-gradient(to bottom, #ffffff, #f8fafc);
	cursor: pointer;
	transition: all 0.15s ease;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="%2364748b" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 10px;
	padding-right: 24px;
}

.transfer-item-qty .qty-select:hover {
	border-color: #0c4d8b;
}

.transfer-item-qty .qty-select:focus {
	outline: none;
	border-color: #0c4d8b;
	box-shadow: 0 0 0 3px rgba(12, 77, 139, 0.1);
}

.transfer-item-info {
	flex: 1;
	min-width: 0;
}

.transfer-item-name {
	font-size: 14px;
	font-weight: 700;
	color: #1e293b;
	line-height: 1.3;
	margin-bottom: 4px;
	text-align: left;
	cursor: pointer;
}
.transfer-item-name:hover .transfer-item-rename-icon {
	opacity: 1;
}
.transfer-item-rename-icon {
	font-size: 11px;
	color: #94a3b8;
	opacity: 0;
	margin-left: 4px;
	transition: opacity 0.15s;
}
.transfer-item-name .rename-input {
	font-size: 14px;
	font-weight: 700;
	color: #1e293b;
	border: 1px solid #4a9eff;
	border-radius: 4px;
	padding: 1px 6px;
	outline: none;
	width: 100%;
	box-sizing: border-box;
}

.transfer-item-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 12px;
	color: #64748b;
}

.transfer-item-meta span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.transfer-item-meta i {
	font-size: 11px;
	color: #94a3b8;
}

.transfer-item-delete {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	color: #94a3b8;
	cursor: pointer;
	transition: all 0.15s ease;
}

.transfer-item-delete:hover {
	background: #fef2f2;
	color: #ef4444;
}

.transfer-item-notes {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px dashed #e2e8f0;
}

.transfer-item-notes .notes-input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	font-size: 13px;
	color: #334155;
	background: #f8fafc;
	transition: all 0.15s ease;
	box-sizing: border-box;
}

.transfer-item-notes .notes-input::placeholder {
	color: #94a3b8;
}

.transfer-item-notes .notes-input:hover {
	border-color: #cbd5e1;
	background: #fff;
}

.transfer-item-notes .notes-input:focus {
	outline: none;
	border-color: #0c4d8b;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(12, 77, 139, 0.08);
}

.transfer-tickets-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.transfer-tickets-list .no-tickets {
	text-align: center;
	color: #94a3b8;
	font-style: italic;
	padding: 30px;
}

.transfer-ticket-card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: box-shadow 0.2s;
}

.transfer-ticket-card:hover {
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.transfer-ticket-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
	min-width: 0;
}

.transfer-ticket-route {
	font-weight: 600;
	color: #1e293b;
	font-size: 15px;
	text-align:left;
}

.transfer-ticket-route i {
	color: #0c4d8b;
	margin: 0 8px;
}

.transfer-ticket-meta {
	font-size: 12px;
	color: #64748b;
	text-align: left;
}

.transfer-ticket-meta span {
	margin-right: 15px;
}

.transfer-ticket-meta i {
	margin-right: 4px;
}

.transfer-ticket-status {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	width: 110px;
	flex-shrink: 0;
	text-align: center;
	white-space: nowrap;
	margin-right: 15px;
}

.transfer-ticket-status.pending {
	background: #fef3c7;
	color: #92400e;
}

.transfer-ticket-status.loaded {
	background: #dbeafe;
	color: #1e40af;
}

.transfer-ticket-status.in_transit,
.transfer-ticket-status.in-transit {
	background: #e0e7ff;
	color: #3730a3;
}

.transfer-ticket-status.delivered {
	background: #d1fae5;
	color: #065f46;
}

.transfer-ticket-status.complete {
	background: #dcfce7;
	color: #166534;
}

.transfer-ticket-status.short {
	background: #fee2e2;
	color: #991b1b;
}

.transfer-ticket-actions {
	display: flex;
	gap: 8px;
	width: 80px;
	flex-shrink: 0;
	justify-content: flex-end;
}

.transfer-ticket-actions button,
.transfer-ticket-actions a.btn-forklift {
	padding: 8px 12px;
	border: none;
	border-radius: 6px;
	font-size: 13px;
	cursor: pointer;
	transition: background 0.2s;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.transfer-ticket-actions .btn-view {
	background: #f1f5f9;
	color: #475569;
}

.transfer-ticket-actions .btn-view:hover {
	background: #e2e8f0;
}

.transfer-ticket-actions .btn-print {
	background: #eef5fd;
	color: #0c4d8b;
}

.transfer-ticket-actions .btn-print:hover {
	background: #dbeafe;
}

.transfer-ticket-actions .btn-forklift {
	background: #eef5fd;
	color: #0c4d8b;
}
.transfer-ticket-actions .btn-forklift:hover {
	background: #dbeafe;
	color: #0a3d6e;
}

.transfer-ticket-actions .btn-delete {
	background: #fee2e2;
	color: #dc2626;
}

.transfer-ticket-actions .btn-delete:hover {
	background: #fecaca;
}

/* ── Stock-transfer office controls & pair-scoped board ─────────────────────
   Office Reopen/Complete buttons, the round-trip group wrapper, off-route
   dimming, and the locked (already-transferred) row badge. Light theme; dark
   variants live in css/theme.css. The complete/short status pills already
   exist above (and in theme.css) — not repeated here. */

/* A loaded card can now show up to four actions (print · reopen · complete ·
   view). The base `.transfer-ticket-head .transfer-ticket-actions` rule pins
   flex-shrink:0, which forces the box to its full single-row width and can
   overflow a narrow card. A 3-class override wins that (regardless of source
   order) so the box may shrink and its buttons wrap to a second row on a tight
   card; the buttons themselves don't shrink (stay tappable). */
.transfer-ticket-card .transfer-ticket-head .transfer-ticket-actions {
	width: auto;
	min-width: 0;
	flex-shrink: 1;
	flex-wrap: wrap;
	row-gap: 6px;
}
.transfer-ticket-actions button,
.transfer-ticket-actions a.btn-forklift { flex-shrink: 0; }
.transfer-ticket-actions .btn-reopen        { background: #fef3c7; color: #b45309; }
.transfer-ticket-actions .btn-reopen:hover   { background: #fde68a; }
/* Green (not blue) so Complete reads distinctly from the blue Print button and
   echoes the green "Complete" status pill. */
.transfer-ticket-actions .btn-complete       { background: #dcfce7; color: #15803d; }
.transfer-ticket-actions .btn-complete:hover { background: #bbf7d0; }

/* One-way → round trip: same size/shape as print/forklift; tooltip has the label */
.transfer-ticket-actions .btn-make-rt {
	background: #eef5fd;
	color: #0c4d8b;
}
.transfer-ticket-actions .btn-make-rt:hover {
	background: #dbeafe;
}
.transfer-ticket-actions .btn-make-rt.is-busy {
	opacity: .65;
	cursor: wait;
}

/* Minimized loaded/complete/short ticket — a compact two-row bar (no item list):
   row 1 = route + status, row 2 = date · creator + actions. (Only pending /
   reopened tickets list + drag their items.) */
/* Single info line: route-block · date · creator ...... status · actions. The
   meta is the flex-grower so it fills the middle and pushes the status pill +
   actions to the right on one line (no wrap); it shrinks/ellipsizes first if the
   panel is dragged narrow. */
.transfer-ticket-head.transfer-ticket-min-head { border-bottom: none; padding: 10px 12px; align-items: center; flex-wrap: nowrap; gap: 14px; }
/* Route on top, TRF number left-aligned directly beneath it. */
/* Fixed ~15% plants column so the date/creator column starts at a consistent
   position (spaced to the right of the plants) on every card. */
.xfer-min-route-block { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex: 0 0 15%; min-width: 92px; }
.xfer-min-route-block .transfer-ticket-route { flex: 0 0 auto; }
/* Plain text (no badge) so the TRF number's left edge lines up exactly under the
   route text instead of being inset by the badge's padding. Linked to forklift. */
.xfer-min-route-block .transfer-ticket-id {
	align-self: flex-start; margin: 0; padding: 0; background: none; border-radius: 0;
	color: #94a3b8; font-weight: 700; letter-spacing: .3px;
	text-decoration: none; cursor: pointer;
}
.xfer-min-route-block a.transfer-ticket-id:hover {
	color: #0c4d8b; text-decoration: underline;
}
/* Date (full "Fri, Jul 9, 2026", a touch larger) with the creator stacked beneath,
   both left-aligned in the column (align-items:flex-start + text-align:left so the
   date and creator share the same left edge). */
.xfer-min-meta { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; flex: 1 1 0; min-width: 0; overflow: hidden; text-align: left; }
.xfer-min-date { font-size: 13px; font-weight: 600; color: #475569; white-space: nowrap; text-align: left; }
.xfer-min-user { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-size: 12px; color: #64748b; }
.xfer-min-user i { color: #94a3b8; font-size: 11px; flex: 0 0 auto; }
.xfer-min-uname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Open ticket: the date slot is an editable input styled as the date text — plain
   until hovered, when a light highlight box appears (matches the order-page line-
   item inputs: transparent border that fills on hover, white + blue ring on focus). */
.xfer-min-date.xfer-tk-date { height: auto; padding: 0; }
/* 3-class selector so the font matches the minimized date span (13px/600) and
   beats the leftover `.transfer-mode-container .xfer-tk-date-input {14px/700}`. */
.transfer-ticket-min-head .xfer-min-date .xfer-tk-date-input {
	width: auto; min-width: 132px; max-width: 100%;
	background-color: transparent;
	border: 1px solid transparent;
	border-radius: 5px;
	padding: 2px 6px;
	margin: -2px -6px;                 /* box grows into the padding; text stays put */
	font-size: 13px; font-weight: 600; color: #475569; font-family: inherit;
	cursor: pointer; box-sizing: border-box; outline: none;
	transition: background-color .15s ease, border-color .15s ease, box-shadow .2s ease;
}
.transfer-ticket-min-head .xfer-min-date .xfer-tk-date-input:hover { background-color: #f8fafc; border-color: #e2e8f0; }
.transfer-ticket-min-head .xfer-min-date .xfer-tk-date-input:focus { background-color: #fff; border-color: #6ba3d6; box-shadow: 0 0 0 3px rgba(12, 77, 139, 0.08); }
.transfer-ticket-min-head .xfer-active-flag { flex-shrink: 0; }
/* Status pill: pinned far right (after the actions) at a FIXED width so it reads
   the same regardless of the status word — which also keeps print in a constant
   column (print is anchored just left of the fixed status). 3-class selector so
   the fixed width beats the later `.transfer-ticket-head .transfer-ticket-status
   {width:auto}` base. Actions never shrink. */
.transfer-ticket-min-head .transfer-ticket-actions { flex-shrink: 0; order: 1; }
.transfer-ticket-head.transfer-ticket-min-head .transfer-ticket-status {
	margin-left: 0; order: 2;
	flex: 0 0 auto; width: 132px; box-sizing: border-box;
	justify-content: center; overflow: hidden; white-space: nowrap;
}

/* View button: clipboard glyph with the item count as a circular badge over it
   (no text). Sits with the other icon actions. */
.transfer-ticket-actions .btn-view-items { position: relative; width: auto; overflow: visible; background: #eef5fd; color: #0c4d8b; }
.transfer-ticket-actions .btn-view-items:hover { background: #dbeafe; }
.xfer-item-badge {
	position: absolute; top: -1px; right: -1px;
	min-width: 15px; height: 15px; padding: 0 4px; box-sizing: border-box;
	border-radius: 999px; background: #0c4d8b; color: #fff;
	font-size: 9px; font-weight: 700; line-height: 1;
	display: inline-flex; align-items: center; justify-content: center;
	box-shadow: 0 0 0 2px #fff;
	pointer-events: none;   /* don't block the clipboard icon's hover popover */
}

/* Round-trip: one combined trip card; Going/Returning tabs switch which leg's
   items are shown. Nested leg cards drop their outer margin so they read as
   one ticket. */
.xfer-trip { margin-bottom: 10px; }
.xfer-trip.xfer-trip-roundtrip .transfer-ticket-card.xfer-trip-combined {
	margin-bottom: 0;
	padding: 0;
	overflow: hidden;
}
.xfer-trip-combined > .xfer-trip-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px 8px;
	border-bottom: none; /* no heavy rule above the Going/Returning tabs */
}
/* "Round trip" + TRF-### / TRF-### on one line, left-aligned (not stacked). */
.xfer-trip-combined > .xfer-trip-head .xfer-min-route-block {
	flex: 1 1 auto;
	min-width: 0;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
	gap: 8px;
}
.xfer-trip-combined > .xfer-trip-head .transfer-ticket-route {
	flex: 0 0 auto;
}
.xfer-trip-combined > .xfer-trip-head .transfer-ticket-id {
	align-self: center;
	margin: 0;
	padding: 0;
	background: none;
	border-radius: 0;
	color: #94a3b8;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .2px;
	white-space: nowrap;
	text-align: left;
}
.xfer-trip-combined .xfer-trip-tabs,
.xfer-trip-combined .xfer-leg-tabs {
	/* Edge-to-edge segmented tabs under the trip head */
	margin: 0;
	border-radius: 0;
	padding: 0;
	gap: 0;
	width: 100%;
	background: #eef2f7;
	border: none;
	border-bottom: 1px solid #dbe3ee;
	box-shadow: none;
}
/* Nested leg: route + TRF number side-by-side, left-aligned under the tabs */
.xfer-trip-combined .xfer-nested-leg .xfer-min-route-block {
	flex: 0 1 auto;
	min-width: 0;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.xfer-trip-combined .xfer-nested-leg .xfer-min-route-block .transfer-ticket-id {
	align-self: center;
}
.xfer-trip-combined .xfer-nested-leg > .transfer-ticket-head {
	/* Drop the second gray bar that sat under the tabs */
	background: transparent !important;
	border: none;
	border-bottom: none !important;
	box-shadow: none;
	/* Equal air under Going/Returning tabs and above the items list */
	padding-top: 8px;
	padding-bottom: 8px;
}
/* Item list under a round-trip leg: no top rounding / no heavy top edge */
.xfer-trip-combined .xfer-nested-leg .transfer-ticket-items {
	border-radius: 0 0 8px 8px;
	border-top: 1px solid #eef2f7;
	margin-top: 0;
}
.xfer-leg-trf {
	font-size: 10px;
	font-weight: 700;
	color: #94a3b8;
	margin-left: 4px;
	white-space: nowrap;
}
.xfer-trip-combined .xfer-leg-tab {
	/* Real half-width tabs — flush, square, fill their half of the bar */
	flex: 1 1 50%;
	min-width: 0;
	justify-content: center;
	text-align: center;
	border-radius: 0;
	border: none;
	border-right: 1px solid #dbe3ee;
	padding: 9px 10px;
	background: transparent;
}
.xfer-trip-combined .xfer-leg-tab:last-child { border-right: none; }
.xfer-trip-combined .xfer-leg-tab:hover { background: #e4ebf5; }
.xfer-trip-combined .xfer-leg-tab.is-active {
	background: #fff;
	box-shadow: inset 0 -2px 0 0 #0c4d8b;
}
.xfer-trip-combined .xfer-nested-leg {
	border: none;
	box-shadow: none;
	margin: 0;
	border-radius: 0;
	background: transparent;
}
.xfer-trip-combined .xfer-nested-leg.xfer-offroute {
	/* Active tab already selected the leg — never dim the nested body. */
	opacity: 1 !important;
	filter: none !important;
}

/* Customer · job subline on queue / ticket / forklift transfer lines */
.xfer-item-source,
.fork-xfer-source {
	display: block;
	font-size: 11px;
	font-weight: 500;
	color: #64748b;
	line-height: 1.25;
	margin-top: 1px;
}
.xfer-item-source .xfer-src-oid,
.fork-xfer-source .xfer-src-oid {
	color: #94a3b8;
	font-weight: 600;
}
.transfer-item-name .xfer-item-source,
.transfer-ticket-item-name .xfer-item-source {
	font-size: 10.5px;
}

/* Compact return-leg slot — a slim strip attached + indented under its outbound
   (with an elbow connector) so building the return reads as part of this trip,
   not a whole new panel. Just a label + drop zone; date defaults to today. */
.transfer-ticket-card.xfer-return-slot {
	margin: 2px 0 0 22px;
	border: 1px dashed #cbd5e1;
	background: #f8fafc;
	border-radius: 8px;
	position: relative;
	overflow: visible;
}
.transfer-ticket-card.xfer-return-slot::before {
	content: '';
	position: absolute; left: -13px; top: -3px; height: 24px; width: 11px;
	border-left: 2px solid #cbd5e1;
	border-bottom: 2px solid #cbd5e1;
	border-bottom-left-radius: 7px;
}
.transfer-ticket-card.xfer-return-slot.is-active-ticket { border-color: #6ba3d6; box-shadow: 0 0 0 3px rgba(12, 77, 139, .08); }
.xfer-return-slot-head { display: flex; align-items: center; gap: 9px; padding: 7px 10px 5px; }
.xfer-return-slot-label { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #64748b; }
.xfer-return-slot-label i { color: #94a3b8; font-size: 11px; }
.xfer-return-slot-route { font-size: 13px; font-weight: 700; color: #1e293b; }
.xfer-return-slot-route i { color: #0c4d8b; font-size: 11px; }
.xfer-return-slot-x { margin-left: auto; background: none; border: none; color: #94a3b8; cursor: pointer; padding: 3px 6px; border-radius: 5px; line-height: 1; }
.xfer-return-slot-x:hover { background: #fee2e2; color: #dc2626; }
.xfer-return-drop { margin: 0 10px 10px; min-height: 42px; }
.xfer-trip.xfer-trip-roundtrip .transfer-ticket-card:last-child { margin-bottom: 0; }

/* Off-route leg (the inactive leg of a round trip): visible but clearly not the
   active drop target, and non-interactive. Scoped under #transfer_tickets_list so
   the dim wins over `.transfer-ticket-card.is-locked { opacity: .96 }` (equal class
   specificity, defined later) — otherwise a loaded/complete off-route leg, the
   common case, would never dim. */
#transfer_tickets_list .transfer-ticket-card.xfer-offroute { opacity: .5; filter: grayscale(.35); }
#transfer_tickets_list .transfer-ticket-card.xfer-offroute .transfer-ticket-items,
#transfer_tickets_list .transfer-ticket-card.xfer-offroute .transfer-ticket-locked-foot { pointer-events: none; }

/* Completed leg: a green left accent (inset shadow = no layout shift). */
.transfer-ticket-card[data-status="complete"] { box-shadow: inset 3px 0 0 0 #22c55e; }

/* Already-transferred (locked) row on a reopened short ticket. */
.transfer-ticket-item.xfer-item-transferred { opacity: .65; }
.transfer-ticket-item.xfer-item-transferred .transfer-ticket-item-name::after {
	content: "transferred";
	margin-left: 8px;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-weight: 700;
	color: #16a34a;
}

/* Transfer ticket modal */
.transfer-ticket-modal {
	padding: 20px;
}

.transfer-ticket-modal *,
.transfer-ticket-modal *::before,
.transfer-ticket-modal *::after {
	box-sizing: border-box;
}

.transfer-ticket-modal h3 {
	font-size: 18px;
	font-weight: 700;
	color: #1e293b;
}

.transfer-ticket-modal label {
	font-size: 13px;
	color: #475569;
}

.transfer-ticket-modal input[type="text"],
.transfer-ticket-modal textarea {
	font-family: inherit;
	font-size: 14px;
	color: #1e293b;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.transfer-ticket-modal input[type="text"]:focus,
.transfer-ticket-modal textarea:focus {
	outline: none;
	border-color: #0c4d8b !important;
	box-shadow: 0 0 0 3px rgba(12, 77, 139, 0.1);
}

/* History section — full width below the 2-column grid */
.transfer-section-full { grid-column: 1 / -1; }

/* H3 label — grows to push right-side elements to the edge, stays left */
.transfer-h3-label { flex: 1; text-align: left; }

/* History toggle button — far right */
.transfer-history-toggle {
	background: none; border: none; cursor: pointer;
	color: #94a3b8; transition: color 0.2s;
	padding: 4px 8px; font-size: 14px; flex-shrink: 0;
}
.transfer-history-toggle:hover { color: #475569; }

/* History search — matches filter-group pattern */
.transfer-history-filter {
	display: flex; align-items: center; gap: 6px;
	background: #fff; border: 1px solid #e2e8f0;
	border-radius: 6px; padding: 0 10px; height: 32px;
	flex-shrink: 0; transition: all 0.15s ease;
}
.transfer-history-filter:focus-within {
	border-color: #0c4d8b;
	box-shadow: 0 0 0 2px rgba(12, 77, 139, 0.1);
}
.transfer-history-filter i {
	color: #94a3b8; font-size: 12px; flex-shrink: 0;
}
.transfer-history-filter input {
	border: none !important; background: transparent !important;
	box-shadow: none !important;
	font-size: 13px; font-family: inherit; font-weight: 400;
	color: #1e293b; width: 140px; padding: 0; outline: none;
	margin: 0;
}
.transfer-history-filter input::placeholder { color: #94a3b8; font-size: 13px; }

/* History cards grid — 2 per row */
#transfer_history_list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	text-align: left;
}

/* Empty / loading state — spans both columns */
.transfer-history-empty {
	grid-column: 1 / -1;
	text-align: center; padding: 20px; color: #94a3b8;
}

/* History card — expandable */
.transfer-history-card {
	background: #fff; border: 1px solid #e2e8f0;
	border-radius: 8px; text-align: left;
	transition: border-color 0.2s;
}
.transfer-history-card.expanded { border-color: #93c5fd; }

.transfer-history-header {
	display: flex; align-items: center; padding: 10px 12px;
	cursor: pointer; gap: 8px; user-select: none;
	transition: background-color 0.12s; border-radius: 8px;
	flex-wrap: wrap;
}
.transfer-history-header:hover { background-color: #f8fafc; }
.transfer-history-card.expanded .transfer-history-header {
	background-color: #f0f7ff; border-bottom: 1px solid #e2e8f0;
	border-radius: 8px 8px 0 0;
}

.transfer-history-chevron {
	color: #94a3b8; transition: transform 0.2s; flex-shrink: 0;
	font-size: 12px;
}
.transfer-history-card.expanded .transfer-history-chevron {
	transform: rotate(90deg);
}

.transfer-history-route {
	font-weight: 700; color: #1e293b; white-space: nowrap;
	font-size: 13px;
}
.transfer-history-date {
	font-size: 12px; color: #64748b; white-space: nowrap;
}
.transfer-history-status {
	font-size: 11px; font-weight: 600; text-transform: capitalize;
	padding: 2px 8px; border-radius: 10px;
	background: #dcfce7; color: #166534; white-space: nowrap;
	line-height: 1.4;
}
.transfer-history-status.delivered {
	background: #dbeafe; color: #1e40af;
}
.transfer-history-user {
	font-size: 12px; color: #94a3b8; margin-left: auto; white-space: nowrap;
}

.transfer-history-body { display: none; padding: 10px 12px; text-align: left; }
.transfer-history-card.expanded .transfer-history-body { display: block; }

/* Items table inside history body — left-aligned */
.transfer-history-items { width: 100%; border-collapse: collapse; }
.transfer-history-items td { padding: 5px 8px; border-bottom: 1px solid #f1f5f9; font-size: 12px; text-align: left; }
.transfer-history-items .item-qty { font-weight: 700; color: #0c4d8b; width: 50px; }
.transfer-history-items .item-name { color: #334155; }
.transfer-history-items .item-text-badge {
	display: inline-block; font-size: 10px; background: #e0e7ff;
	color: #3730a3; padding: 1px 6px; border-radius: 4px; margin-left: 6px;
}

/* History pagination */
#transfer_history_pagination {
	display: flex; justify-content: center; align-items: center;
	gap: 4px; padding: 12px 0; flex-wrap: wrap;
}
#transfer_history_pagination button {
	min-width: 32px; height: 32px; border: 1px solid #e2e8f0;
	border-radius: 6px; background: #fff; cursor: pointer;
	font-size: 13px; color: #475569; transition: all 0.15s;
}
#transfer_history_pagination button:hover { background: #f1f5f9; }
#transfer_history_pagination button.active {
	background: #0c4d8b; color: #fff; border-color: #0c4d8b;
}
.transfer-history-page-dots {
	color: #94a3b8; font-size: 14px; padding: 0 4px; user-select: none;
}

/* Custom item button — inside section h3, far right */
.btn-transfer-custom {
	flex-shrink: 0;
	padding: 5px 10px; font-size: 11px; font-weight: 600;
	background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0;
	border-radius: 6px; cursor: pointer; transition: all 0.2s;
}
.btn-transfer-custom:hover { background: #e2e8f0; }
.btn-transfer-custom i { color: #475569; }

/* Text item badge in pending items list */
.transfer-item-text-badge {
	display: inline-block; font-size: 10px; background: #e0e7ff;
	color: #3730a3; padding: 1px 6px; border-radius: 4px;
}

/* Form item badge — distinct from "custom" so the difference reads at a glance */
.transfer-item-form-badge {
	display: inline-block; font-size: 10px; background: #ecfeff;
	color: #155e75; padding: 1px 6px; border-radius: 4px;
	border: 1px solid #a5f3fc;
}

/* Static qty (forms / locked rows): same box + blue as the selectable qty,
   just with no dropdown arrow and not interactive. */
.transfer-item-qty .qty-static {
	display: flex; align-items: center; justify-content: center;
	width: 64px; height: 32px;
	border: 1px solid #e2e8f0; border-radius: 8px;
	background: linear-gradient(to bottom, #ffffff, #f8fafc);
	color: #0c4d8b; font-size: 15px; font-weight: 700;
	box-sizing: border-box;
}

/* ════════════════════════════════════════════════════════════════════
   STOCK TRANSFER BOARD — drag & drop queue ⇄ tickets
   (These rules come after the originals above so they win on equal
   specificity. Inline rows use flex + align-items:center per the
   project inline-alignment rule.)
   ════════════════════════════════════════════════════════════════════ */

/* Layout: board (2 columns) stacked above the full-width history */
.transfer-content { display: block; }
.transfer-board {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 20px;
	align-items: start;
	margin-bottom: 20px;
}

/* Column split (the active layout is flex, from css/inventory.css). Both columns'
   grow factors come from CSS vars so the draggable splitter can retune them live;
   tickets is wider than the queue by default. 2-class selectors beat the base
   `.transfer-queue-col{flex:1.08}` / `.transfer-col{flex:1 1 0}` in inventory.css. */
.transfer-board .transfer-queue-col   { flex: var(--xfer-qg, 1) 1 0; }
.transfer-board .transfer-tickets-col { flex: var(--xfer-tg, 1.3) 1 0; }

/* The divider itself — a thin bar with a grip; grabbable, full column height. */
.transfer-splitter {
	flex: 0 0 10px;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: col-resize;
	touch-action: none;                 /* let the drag own touch, not the scroller */
	border-radius: 6px;
}
.transfer-splitter-grip {
	width: 4px;
	height: 46px;
	max-height: 60%;
	border-radius: 4px;
	background: #d5deea;
	transition: background .15s ease;
}
.transfer-splitter:hover .transfer-splitter-grip,
body.xfer-splitting .transfer-splitter-grip { background: #0c4d8b; }
body.xfer-splitting { cursor: col-resize; user-select: none; }
.transfer-queue-col, .transfer-tickets-col { min-width: 0; }
.transfer-section-full { margin-top: 0; }

/* ── Unified search + queue filter: match the orders filter-bar look
   (pill, leading icon, floating uppercase data-label, blue focus ring,
   the .fb-clear ✕ shown on .has-text). Values mirror div.s_fields
   .filter-group. The inline Products|Forms tabs sit to the right. ── */
.transfer-search-bar {
	display: flex;
	align-items: center;     /* vertical centers of pill + tabs coincide */
	flex-wrap: wrap;         /* tabs drop below only if the row is too tight */
	gap: 10px;
	margin-bottom: 14px;
}

/* The pill — shared by the search and the queue filter */
.transfer-queue-col .transfer-search,
.transfer-queue-col .transfer-queue-filter {
	position: relative;
	display: flex;
	align-items: center;     /* icon · input · ✕ centers coincide */
	gap: 6px;
	height: 32px;
	padding: 0 10px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	transition: all .15s ease;
	margin-bottom: 0;
}
.transfer-search-bar .transfer-search { flex: 1; min-width: 0; }
.transfer-queue-col .transfer-queue-filter { margin-bottom: 14px; }

.transfer-queue-col .transfer-search:focus-within,
.transfer-queue-col .transfer-queue-filter:focus-within {
	border-color: #0c4d8b;
	box-shadow: 0 0 0 2px rgba(12, 77, 139, 0.1);
}

/* leading icon inside the pill (kill the old ::before magnifier) */
.transfer-search::before { content: none !important; }
.transfer-queue-col .transfer-search > i.fa-search,
.transfer-queue-col .transfer-queue-filter > i.fa-filter {
	color: #94a3b8;
	font-size: 12px;
	flex-shrink: 0;
}

/* transparent inputs, exactly like the orders filter-group.
   border-radius:0 — the pill container keeps the rounded corners; a
   borderless input with radius clips the caret and looks cut off. */
.transfer-queue-col .transfer-search input,
.transfer-queue-col .transfer-queue-filter input {
	flex: 1;
	min-width: 0;
	width: auto !important;
	border: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	font-size: 13px !important;
	font-family: inherit;
	color: #1e293b;
	padding: 0 !important;
	outline: none;
	box-shadow: none !important;
	box-sizing: border-box;
}
.transfer-queue-col .transfer-search input::placeholder,
.transfer-queue-col .transfer-queue-filter input::placeholder {
	color: #94a3b8;
	font-size: 13px;
}

/* floating uppercase label — on ::after (the search's ::before is the killed
   magnifier). notch bg matches the #fafbfc card behind. position:absolute
   removes it from the pill's flex flow. */
.transfer-queue-col .transfer-search[data-label]::after,
.transfer-queue-col .transfer-queue-filter[data-label]::after {
	content: attr(data-label);
	position: absolute;
	top: -7px;
	left: 4px;
	padding: 0 6px;
	background: #fafbfc;
	color: #64748b;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	pointer-events: none;
	z-index: 1;
}

/* clear-X — orders .fb-clear (shown only when the field has a value) */
.transfer-queue-col .fb-clear {
	display: none;
	background: none;
	border: 0;
	padding: 0 0 0 6px;
	margin: 0;
	color: #cbd5e1;
	cursor: pointer;
	font: inherit;
	line-height: 1;
	transition: color 0.15s;
	flex-shrink: 0;
}
.transfer-queue-col .has-text .fb-clear { display: inline-flex; align-items: center; }
.transfer-queue-col .fb-clear i { font-size: 13px; }
.transfer-queue-col .fb-clear:hover { color: #dc2626; }

/* Products|Forms tabs (inline, right of the search) */
.transfer-search-tabs {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	flex-shrink: 0;
	background: #eef2f7;
	border-radius: 8px;
}
.xfer-tab {
	appearance: none;
	border: none;
	background: transparent;
	padding: 6px 14px;
	font-size: 12.5px;
	font-weight: 600;
	color: #64748b;
	border-radius: 6px;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, box-shadow .15s ease;
	line-height: 1.1;
}
.xfer-tab:hover { color: #334155; }
.xfer-tab.is-active {
	background: #fff;
	color: #0c4d8b;
	box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 0 0 1px rgba(12,77,139,.06);
}

.xfer-filter-empty {
	padding: 18px 10px;
	text-align: center;
	color: #94a3b8;
	font-size: 12.5px;
	font-style: italic;
}

/* ── Queue list + compact, expandable item cards ── */
/* Scroll on the wrapper; the Sortable list stays overflow:visible so items can
   be dragged OUT (an overflow:auto Sortable list traps items to reorder-only). */
.transfer-queue-scroll {
	max-height: 56vh;
	min-height: 90px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #cbd5e1 transparent;
}
.transfer-queue-scroll::-webkit-scrollbar { width: 6px; }
.transfer-queue-scroll::-webkit-scrollbar-track { background: transparent; }
.transfer-queue-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
#transfer_items_list.transfer-queue-list {
	max-height: none;
	min-height: 0;
	overflow: visible;
}

.transfer-item-card {
	padding: 0;                 /* row supplies the padding now */
	overflow: hidden;
}
.transfer-item-card.xfer-chosen { border-color: #0c4d8b; }

.transfer-item-row {
	display: flex;
	align-items: center;        /* vertical centers coincide */
	gap: 10px;
	padding: 8px 10px;
	cursor: pointer;
}
.transfer-item-card .transfer-item-qty .qty-select { height: 32px; padding-top: 0; padding-bottom: 0; }
.transfer-item-card .qty-static { height: 32px; }

/* Drag handle — the only grab point, so name-clicks rename and rows toggle */
.xfer-drag-handle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 32px;
	flex-shrink: 0;
	color: #cbd5e1;
	cursor: grab;
	border-radius: 6px;
	transition: color .15s ease, background .15s ease;
	touch-action: none;        /* let SortableJS own the gesture on touch */
}
.xfer-drag-handle:hover { color: #0c4d8b; background: #eef4fb; }
.xfer-drag-handle:active { cursor: grabbing; }
.xfer-handle-locked { color: #cbd5e1; cursor: default; }
.xfer-handle-locked:hover { color: #cbd5e1; background: none; }

.transfer-item-row .transfer-item-name {
	flex: 1;
	min-width: 0;
	margin-bottom: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	font-size: 13.5px;
}
.transfer-item-row .transfer-item-name-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

.xfer-expand-btn {
	appearance: none;
	border: none;
	background: transparent;
	width: 26px;
	height: 32px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #94a3b8;
	cursor: pointer;
	border-radius: 6px;
}
.xfer-expand-btn:hover { background: #f1f5f9; color: #0c4d8b; }
.xfer-expand-btn i { transition: transform .18s ease; font-size: 13px; }
.transfer-item-card.is-expanded .xfer-expand-btn i { transform: rotate(180deg); }

.transfer-item-row .transfer-item-delete { width: 30px; height: 30px; }

.transfer-item-detail {
	padding: 4px 12px 12px 44px;   /* indent to align under the name column */
	border-top: 1px dashed #eef2f7;
}
.transfer-item-detail .transfer-item-meta { margin: 8px 0; }
.transfer-item-detail .transfer-item-notes { margin-top: 0; padding-top: 0; border-top: none; }
.transfer-item-detail .notes-input { padding: 8px 10px; }

/* ── Tickets column ── */
.transfer-tickets-list { max-height: 60vh; overflow-y: auto; padding-right: 2px; }
.transfer-tickets-list .no-tickets {
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	font-style: normal; color: #94a3b8; padding: 34px 16px;
	border: 1.5px dashed #e2e8f0; border-radius: 10px;
}
.transfer-tickets-list .no-tickets i { font-size: 26px; color: #cbd5e1; }
.transfer-tickets-list .no-tickets span { font-size: 13.5px; font-weight: 600; color: #64748b; }
.transfer-tickets-list .no-tickets small { font-size: 12px; }

/* Ticket card becomes a vertical container (head + meta + droppable items) */
.transfer-ticket-card {
	display: block;
	padding: 0;
	border-radius: 10px;
	overflow: hidden;
}
.transfer-ticket-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 12px;
	background: #f8fafc;
	border-bottom: 1px solid #eef2f7;
}
.transfer-ticket-route {
	display: flex; align-items: center; gap: 7px;
	flex: 1; min-width: 0;
	font-weight: 700; color: #1e293b; font-size: 14px;
}
.transfer-ticket-route i { color: #0c4d8b; margin: 0; font-size: 12px; }
.transfer-ticket-id {
	font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
	color: #94a3b8; background: #eef2f7; padding: 1px 6px; border-radius: 5px;
}
a.transfer-ticket-id {
	text-decoration: none; cursor: pointer;
	transition: color .12s ease, background .12s ease;
}
a.transfer-ticket-id:hover {
	color: #0c4d8b; background: #dbeafe;
}
.transfer-ticket-head .transfer-ticket-status {
	/* margin-left:auto pins the status + actions group to the far right even if
	   the route is short or the head wraps. */
	width: auto; min-width: 0; margin: 0 0 0 auto; padding: 4px 10px;
	font-size: 10.5px; letter-spacing: .4px;
	flex-shrink: 0;
}
.transfer-ticket-head .transfer-ticket-actions { margin: 0; gap: 4px; flex-shrink: 0; }

.transfer-ticket-submeta {
	display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
	padding: 8px 12px;
	font-size: 12px; color: #64748b;
}
.transfer-ticket-submeta span { display: inline-flex; align-items: center; gap: 5px; }
.transfer-ticket-submeta i { color: #94a3b8; font-size: 11px; }
.transfer-ticket-count { font-weight: 600; color: #475569; }

/* Droppable item list — square top corners so it meets the ticket head cleanly
   (no “rounded box” lip under the header / Going·Returning tabs). */
.transfer-ticket-items {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px;
	min-height: 46px;
	margin: 0 8px 10px;
	border: 1.5px dashed #e7edf4;
	border-top: 1px solid #eef2f7;
	border-radius: 0 0 9px 9px;
	background: #fcfdfe;
	transition: border-color .15s ease, background .15s ease;
}
.transfer-ticket-item {
	display: flex;
	align-items: center;          /* centers coincide */
	gap: 9px;
	padding: 6px 8px;
	background: #fff;
	border: 1px solid #eef2f7;
	border-radius: 7px;
}
.transfer-ticket-item .transfer-item-qty .qty-select { height: 28px; width: 54px; font-size: 13px; padding-top: 0; padding-bottom: 0; }
.transfer-ticket-item .transfer-item-qty .qty-static { width: 54px; height: 28px; font-size: 13px; }
.transfer-ticket-item-name {
	flex: 1; min-width: 0;
	display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
	font-size: 13px; font-weight: 600; color: #1e293b; text-align: left;
	overflow: hidden; text-overflow: ellipsis;
}
.transfer-ticket-item .xfer-drag-handle { height: 28px; }

.xfer-drop-hint {
	display: flex; align-items: center; justify-content: center; gap: 7px;
	padding: 10px; color: #94a3b8; font-size: 12.5px; font-weight: 500;
	text-align: center;
}
.xfer-drop-hint-locked { color: #cbd5e1; }

/* Highlight valid drop targets while a drag is in flight */
body.xfer-is-dragging .transfer-ticket-card[data-status="pending"] .transfer-ticket-items,
body.xfer-is-dragging .transfer-ticket-placeholder .transfer-ticket-items,
body.xfer-is-dragging #transfer_items_list {
	border-color: #93c5fd;
	background: #f0f7ff;
}
.transfer-ticket-items.xfer-ghost-over { border-color: #0c4d8b; background: #eaf3fd; }

/* Locked tickets read as inert */
.transfer-ticket-card.is-locked { opacity: .96; }
.transfer-ticket-card.is-locked .transfer-ticket-items { border-style: solid; border-color: #eef2f7; background: #f8fafc; }
.transfer-ticket-card.is-locked .transfer-ticket-head { background: #f1f5f9; }
.xfer-lock { font-size: 10px; opacity: .8; }

/* New-ticket placeholder (client-only until first drop) */
.transfer-ticket-placeholder { border-style: dashed; border-color: #bcd4ee; background: #fbfdff; }
.transfer-ticket-placeholder.is-materializing { opacity: .6; pointer-events: none; }
.transfer-ticket-placeholder .transfer-ticket-head { background: #f3f8fe; }
.xfer-new-badge {
	font-size: 9.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
	color: #0c4d8b; background: #dbeafe; padding: 1px 6px; border-radius: 5px;
}
/* Placeholder + editable-ticket date/notes fields — styled like the orders
   filter-group pills (the LABEL is the pill; the input is transparent). */
.transfer-ph-meta { gap: 8px; flex-wrap: wrap; }
.xfer-ph-field {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 10px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	font-size: 13px;
	color: #1e293b;
	box-sizing: border-box;
	transition: all .15s ease;
}
.xfer-ph-field:focus-within { border-color: #0c4d8b; box-shadow: 0 0 0 2px rgba(12,77,139,.1); }
.xfer-ph-field i { color: #94a3b8; font-size: 12px; flex-shrink: 0; }
.xfer-ph-field input {
	border: none !important;   /* beat the global div.rep_content input border-bottom */
	background: transparent;
	outline: none;
	font-size: 13px;
	color: #1e293b;
	padding: 0;
	box-sizing: border-box;
}
.xfer-ph-field input::placeholder { color: #94a3b8; }
.xfer-ph-date { width: 76px; cursor: pointer; }
.xfer-ph-notes-field { flex: 1; min-width: 120px; }
.xfer-ph-notes-field input { width: 100%; }
/* Editable date on a created (pending) ticket — same pill, sits in the submeta */
.xfer-tk-date { height: 28px; padding: 0 8px; }
.xfer-tk-date-input { width: 72px; cursor: pointer; }

/* Locked-ticket compact footer — opens the read-only preview */
.transfer-ticket-locked-foot {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin: 0 8px 10px;
	padding: 9px;
	font-size: 12.5px;
	font-weight: 600;
	color: #64748b;
	background: #f8fafc;
	border: 1px solid #eef2f7;
	border-radius: 9px;
	cursor: pointer;
	transition: all .15s ease;
}
.transfer-ticket-locked-foot:hover { color: #0c4d8b; background: #f0f7ff; border-color: #d6e6f7; }
.transfer-ticket-locked-foot i { font-size: 12px; }

/* Ticket preview (WPModal body) */
.xfer-pv { display: flex; flex-direction: column; gap: 14px; }
.xfer-pv-route { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; color: #1e293b; }
.xfer-pv-route i.fa-arrow-right { color: #0c4d8b; font-size: 14px; }
.xfer-pv-route .transfer-ticket-status { margin-left: auto; width: auto; margin-right: 0; }
.xfer-pv-meta {
	display: flex; flex-wrap: wrap; gap: 14px;
	font-size: 13px; color: #64748b;
	padding-bottom: 12px; border-bottom: 1px solid #eef2f7;
}
.xfer-pv-meta span { display: inline-flex; align-items: center; gap: 6px; }
.xfer-pv-meta i { color: #94a3b8; }
.xfer-pv-list { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; }
.xfer-pv-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 8px; }
.xfer-pv-qty {
	flex-shrink: 0; min-width: 30px; height: 26px;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0 8px; background: #0c4d8b; color: #fff; border-radius: 6px;
	font-size: 13px; font-weight: 700;
}
.xfer-pv-name { font-size: 14px; font-weight: 600; color: #1e293b; text-align: left; }
.xfer-pv-empty { padding: 24px; text-align: center; color: #94a3b8; font-size: 13px; }
.xfer-pv-empty i { margin-right: 6px; }
.xfer-pv-notes { font-size: 13px; color: #64748b; padding: 10px 12px; background: #f8fafc; border-radius: 8px; }
.xfer-pv-notes i { color: #94a3b8; margin-right: 6px; }

/* SortableJS drag states */
.xfer-ghost { opacity: .45; }
.transfer-item-card.xfer-ghost, .transfer-ticket-item.xfer-ghost {
	background: #eaf3fd; border: 1px dashed #93c5fd;
}
.xfer-dragging {
	box-shadow: 0 8px 24px rgba(12,77,139,.22) !important;
	cursor: grabbing;
}
.transfer-ticket-item.xfer-dragging, .transfer-item-card.xfer-dragging { border-color: #0c4d8b; }

/* Board responsive: stack the two columns */
@media (max-width: 900px) {
	.transfer-board { grid-template-columns: 1fr; gap: 14px; }
	.transfer-queue-scroll { max-height: 44vh; }
	.transfer-tickets-list { max-height: none; }
}

@media (max-width: 900px) {
	#transfer_history_list { grid-template-columns: 1fr; }
	.transfer-history-filter input { width: 100px; }
}

/* Mobile responsive */
@media (max-width: 900px) {
	.transfer-content {
		grid-template-columns: 1fr;
	}
	
	.transfer-header {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.transfer-plant-selectors {
		width: 100%;
	}
}

@media (max-width: 600px) {
	.transfer-mode-container {
		padding: 15px;
		margin: 0 10px 20px;
	}
	
	.transfer-plant-selectors {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}
	
	.transfer-plant-group {
		width: 100%;
	}
	
	.transfer-arrow {
		align-self: center;
		transform: rotate(90deg);
		margin: 4px 0;
	}
	
	.transfer-select {
		width: 100%;
	}
	
	.transfer-item-meta {
		flex-direction: column;
		gap: 4px;
	}
}

/* ============================================
   Inventory Summary Stats Bar
   Dashboard-style KPI strip
   ============================================ */

.inv-summary-bar {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	padding: 14px 24px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	margin: 0 auto 20px;
	box-sizing: border-box;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.inv-summary-stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 16px;
	background: #fafbfc;
	border-radius: 8px;
	border: 1px solid #f1f5f9;
	min-width: 100px;
}

.inv-summary-stat .stat-label {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #64748b;
}

.inv-summary-stat .stat-value {
	font-size: 20px;
	font-weight: 800;
	color: #0f172a;
}

.inv-summary-stat .stat-value.stat-success {
	color: #059669;
}

.inv-summary-stat .stat-value.stat-warning {
	color: #d97706;
}

.inv-summary-stat .stat-value.stat-primary {
	color: #0c4d8b;
}

.inv-summary-stat .stat-value.stat-muted {
	color: #64748b;
}

/* Responsive: stack on smaller screens */
@media (max-width: 768px) {
	.inv-summary-bar {
		display: flex;
		padding: 12px;
		gap: 8px;
		width: calc(100% - 24px);
		max-width: calc(100% - 24px);
		margin: 0 auto 12px;
	}
	
	.inv-summary-stat {
		flex: 1 1 calc(50% - 4px);
		min-width: 0;
		padding: 10px 12px;
	}
	
	.inv-summary-stat .stat-value {
		font-size: 18px;
	}
}

/* Row fade-in animation for polished feel */
@keyframes invRowSlideIn {
	from { 
		opacity: 0; 
		transform: translateY(4px); 
	}
	to { 
		opacity: 1; 
		transform: translateY(0); 
	}
}

table#report_list.inventory tbody tr.inv,
table#report_list.inventory tbody tr.inv_highlight {
	animation: invRowSlideIn 0.25s ease-out;
	animation-fill-mode: both;
}

/* Stagger animation for first rows */
table#report_list.inventory tbody tr.inv:nth-child(1),
table#report_list.inventory tbody tr.inv_highlight:nth-child(1) { animation-delay: 0.02s; }
table#report_list.inventory tbody tr.inv:nth-child(2),
table#report_list.inventory tbody tr.inv_highlight:nth-child(2) { animation-delay: 0.04s; }
table#report_list.inventory tbody tr.inv:nth-child(3),
table#report_list.inventory tbody tr.inv_highlight:nth-child(3) { animation-delay: 0.06s; }
table#report_list.inventory tbody tr.inv:nth-child(4),
table#report_list.inventory tbody tr.inv_highlight:nth-child(4) { animation-delay: 0.08s; }
table#report_list.inventory tbody tr.inv:nth-child(5),
table#report_list.inventory tbody tr.inv_highlight:nth-child(5) { animation-delay: 0.10s; }
table#report_list.inventory tbody tr.inv:nth-child(6),
table#report_list.inventory tbody tr.inv_highlight:nth-child(6) { animation-delay: 0.12s; }
table#report_list.inventory tbody tr.inv:nth-child(7),
table#report_list.inventory tbody tr.inv_highlight:nth-child(7) { animation-delay: 0.14s; }
table#report_list.inventory tbody tr.inv:nth-child(8),
table#report_list.inventory tbody tr.inv_highlight:nth-child(8) { animation-delay: 0.16s; }

/* Inventory: mobile card list (phones) */
.inv-cards {
	display: none;
}

@media (max-width: 767px) {
	/* Hide wide table on phones, show cards instead */
	body.inv-cards-mode #inv_cards.inv-cards {
		display: flex !important;
		flex-direction: column;
		gap: 10px;
		padding: 0 12px;
		margin-top: 10px;
	}

	body.inv-cards-mode table#report_list.inventory { display: none !important; }

	.inv-cards .results-state {
		margin: 0;
		max-width: none;
	}

	.inv-card {
		background: #fff;
		border: 1px solid #e2e8f0;
		border-radius: 12px;
		box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
		padding: 12px 12px;
	}

	.inv-card.inv-card--highlight {
		border-color: rgba(12, 77, 139, 0.28);
		background: rgba(12, 77, 139, 0.03);
	}

	.inv-card__top {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 10px;
		margin-bottom: 10px;
	}

	.inv-card__right {
		display: inline-flex;
		align-items: center;
		gap: 8px;
	}

	.inv-card__chev {
		color: #94a3b8;
		font-size: 14px;
		line-height: 1;
		transition: transform 0.18s ease;
		margin-top: 2px;
	}

	.inv-card.is-open .inv-card__chev {
		transform: rotate(180deg);
	}

	.inv-card__title {
		font-size: 14px;
		font-weight: 800;
		color: #0f172a;
		line-height: 1.25;
		text-align:left;
	}

	.inv-card__sub {
		margin-top: 2px;
		font-size: 12px;
		color: #64748b;
		line-height: 1.2;
	}

	.inv-pill {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 4px 8px;
		border-radius: 999px;
		background: #f1f5f9;
		color: #0c4d8b;
		font-size: 11px;
		font-weight: 700;
		white-space: nowrap;
	}

	.inv-stats {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
	}

	.inv-stat {
		border: 1px solid #e2e8f0;
		border-radius: 10px;
		padding: 8px 10px;
		background: #fafbfc;
	}

	.inv-stat__label {
		font-size: 10px;
		font-weight: 800;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: #64748b;
	}

	.inv-stat__val {
		margin-top: 2px;
		font-size: 14px;
		font-weight: 800;
		color: #0f172a;
	}

	.inv-card__details {
		margin-top: 10px;
		padding-top: 10px;
		border-top: 1px solid #e2e8f0;
		display: none;
	}

	.inv-card.is-open .inv-card__details {
		display: block;
	}

	.inv-details-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}

	.inv-details-pager {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		margin-bottom: 10px;
	}

	.inv-details-count {
		font-size: 12px;
		font-weight: 800;
		color: #64748b;
	}

	.inv-details-btn {
		height: 34px;
		padding: 0 12px;
		border-radius: 10px;
		border: 1px solid #e2e8f0;
		background: #fff;
		color: #0c4d8b;
		font-size: 12px;
		font-weight: 800;
		cursor: pointer;
	}

	.inv-details-btn:disabled {
		opacity: 0.5;
		cursor: not-allowed;
		color: #64748b;
	}

	.inv-detail {
		border: 1px solid #e2e8f0;
		border-radius: 10px;
		padding: 8px 10px;
		background: #fff;
	}

	.inv-detail__label {
		font-size: 10px;
		font-weight: 800;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: #64748b;
	}

	.inv-detail__val {
		margin-top: 2px;
		font-size: 12px;
		font-weight: 700;
		color: #0f172a;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.inv-id-val {
		overflow: visible;
		text-overflow: clip;
		white-space: normal;
	}

	.inv-id-row {
		display: flex;
		align-items: center;
		gap: 8px;
		min-width: 0;
	}

	.inv-id-text {
		flex: 1;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.inv-copy-btn {
		flex-shrink: 0;
		height: 28px;
		padding: 0 10px;
		border-radius: 10px;
		border: 1px solid #e2e8f0;
		background: #fff;
		color: #0c4d8b;
		font-size: 12px;
		font-weight: 800;
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		gap: 6px;
	}

	.inv-copy-btn.is-copied {
		border-color: rgba(16, 185, 129, 0.35);
		background: rgba(16, 185, 129, 0.10);
		color: #0f766e;
	}

	.inv-card__loading {
		color: #64748b;
		font-size: 13px;
		font-weight: 600;
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.inv-card__loading i {
		color: #0c4d8b;
	}

	.inv-note {
		grid-column: 1 / -1;
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}

	.inv-drawings {
		grid-column: 1 / -1;
		display: flex;
		gap: 8px;
		overflow-x: auto;
		padding-bottom: 4px;
	}

	.inv-drawings a img {
		width: 96px;
		height: 72px;
		object-fit: cover;
		border-radius: 10px;
		border: 1px solid #e2e8f0;
		display: block;
	}
}
table#report_list tbody tr.inv_history:not(.selected):hover, table#report_list tbody tr.inv_details:not(.selected):hover, table#report_list tbody tr.inv:not(.tr_open):hover {
	background-color: rgba(255, 255, 204, 0.74);
	background: rgba(255, 255, 204, 0.74);
}
tr.inv_history.selected td {
	line-height:20px;
}
div.jBox-content button i.print_spin, button#submit_sch_preview i {
	margin-right: 2px;
    padding: 7px;
    max-width: none;
    height: auto;
    width: auto;
}
div.miss_title {
	font-weight:bold;
	font-size:14px;
}
div.drag.missed {
	background-color: rgb(53, 3, 62);
    color: #FFF;
	font-weight:500;
}
div.drag.poured {
	background-color: rgb(181, 255, 221);
	color:#000;
	font-weight:500;
}
table.dash_table {
	width:100%;
}
div.dash_div {
	width:40%;
	margin-right:5%;
	margin-left:5%;
	float:left;
	position: relative;
}
table#quotes tbody tr, table#production tbody tr {
	cursor:pointer;
}
table.dash_table.double {
	width:90%;
	margin-right:5%;
	margin-left:5%;
	float:left;
}
table.dash_table td {
	padding: 8px 3px;
}
span.thin_title {
	font-size:28px;font-weight:200;color:#0c4d8b;
}
table#quotes tr:nth-child(even), table#production tr:nth-child(even) {
	background: rgba(99,99,99,0.05);
}
span.dash_tit {
	display:block;
	font-size:14px;
	font-weight:500;
}
div.dash_job {
	margin-right:1%;
	margin-bottom:1%;
	display:inline-block;
	padding:0px;
	border:1px solid #ececec;
	width:49%;
	border-radius: 3px;
    box-sizing: border-box;
	-webkit-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}
div.dj_content {
	padding:3px 5px 5px 5px;
}
div.dash_job:hover {
	border:1px solid #0c4d8b;
}
div.dash_job div.prod_prog {
	width:100%;
	height:4px;
	border:0px;
}
table#production div.prod_prog {
	width:80%;
	display:inline-block;
	float: left;
    top: 2px;
    position: relative;
}
div.dash_job div.prod_prog div.pp_bar {
	border-radius:1px;
}
div.prod_num {
	font-size:10px;
}
table.dash_table input, div#external-events input {
	border:0px;
	padding:0px 0px 2px 2px;
}
table.dash_table thead span.bar, div#external-events span.group span.bar {
	border-bottom:1px solid #0c4d8b;
}
table.dash_table thead i, div#external-events span.group i {
	color:#0c4d8b;
	font-size: 14px;
}
table#calendar thead i, table#calendar thead input, div#external-events input {
	color:#0c4d8b;
	font-size: 20px;
}
div#external-events input {
	font-size:16px;
	background:transparent;
}
table#calendar thead input {
	font-size:24px;
}
table#quotes tbody tr:hover, table#production tbody tr:hover {
	background:#0c4d8b;
	color:#FFF;
}
table#quotes tbody tr:hover td i, table#production tbody tr:hover td i {
	color:#FFF;
}
table#production tbody tr:hover td div.pp_bar {
	background-color:#42e5ec;
}
table#production tbody tr:hover td div.prod_prog {
	border-color:rgba(63, 146, 171, 0.8);
}
table#production span.prod_qty {
	font-size:11px;
}
td.dash_jn {
	font-weight:500;
}
div.dash_div div.lm_container {
	left:0px;
}
table.dash_table tbody {
	display:block;
	max-height:400px;
	overflow-y:auto;
}
table.dash_table tbody tr, table.dash_table thead tr {
	display:table;
	width:100%;
	table-layout:fixed;
}
div#calendar_container {
	width: 77%;
    margin: 0px auto;
    margin-top: 30px;
    padding-right: 13%;
	position: relative;
	z-index:0;
}
div#external-events {
	background: linear-gradient(180deg, rgb(204 204 204 / 34%), transparent);
    width: 13%;
    height: 100%;
    position: absolute;
    top: 0px;
    right: 0px;
	z-index:0;
}
div#external-events div.events {
	padding: 10px;
    margin-top: 40px;
    padding-top: 0px;
    box-sizing: border-box;
    overflow-y: scroll;
    height: 100%;
	z-index:0;
}
div.fc-event.queue {
	margin-bottom:2px;
	position:relative;
	z-index: auto;
	cursor:move;
	background-color: #357fc6;
    border: 1px solid #4587c7;
	line-height: 14px;
	padding: 3px;
}
div.fc-event.queue span.dets {
	margin-top:3px;
	line-height: 13px;
	font-size:10px;
	display:block;
}
div.fc-event.queue:hover {
	background-color: #0c4d8b;
    border: 1px solid #0c4d8b;
}
div.fc-event.queue.q_drag {
	width:11%;
	display:block;
	text-align:left;
}
div#calendar_container div.fc-header-toolbar div.fc-center h2 {
	font-size: 28px;
    font-weight: 200;
    color: #0c4d8b;
}
div.day_hrs {
	padding:2px;
}
div.day_hrs i {
	display:none;
}
a.fc-day-number {
	font-weight:600;
}
tr.inv_highlight, table.bol_details tbody tr.inv_highlight {
	background-color: rgba(11, 189, 74, 0.2);
}
table#report_list tr.inv_highlight:nth-child(even), table.bol_details tbody tr.inv_highlight:nth-child(even) {
	background-color: rgba(11, 189, 74, 0.3);
}
input[name=inventory] {
	width: 14px;
    height: 14px;
}
button#notify_bg {
	height:30px;
	width:30px;
	border-radius:20px;
	cursor:pointer;
	/* color:#FFF !important; */
	font-weight:600;
}
button#notify_bg.complete {
	background-color: #0da519 !important;
    border: 0px;
}
button#notify_bg.complete i {
	margin-top: 1px;
    font-size: 18px;
}
button#notify_bg.missing {
	color:#FF191D !important;
}
button#notify_bg div.missing_num {
	font-size: 14px;
}
tr.rep_foot, table#report_list tr.rep_foot td, tr#rep_foot, table#report_list tr#rep_foot td {
	padding-top:5px;padding-bottom:5px;font-weight:bold;
}
tr.rep_foot, tr#rep_foot {
	text-align:left;
}
tr#rep_foot, table#report_list tr#rep_foot td {
	border-top:2px solid black;
}
div.qc_ops {
	display:none;
}
div.qc_add select, div.qc_add input, div.inv_add select, div.inv_add input {
	margin-bottom:0px;
	width:100%;
}
div.qc_add select, div.inv_add select {
	border:0px;
	border-bottom:1px solid #999;
}
div.qc_add label, div.inv_add label {
  color:#666;
  font-size:14px;
  font-weight: bold;
  position:absolute;
  text-transform: uppercase;
  pointer-events:none;
  left:10px;
  top:9px;
  transition:0.2s ease all;
  -moz-transition:0.2s ease all;
  -webkit-transition:0.2s ease all;
}
div.qc_add input[name=prd_name] ~ label, div.inv_add input[name=prd_name] ~ label {
	top:13px;
}
div.qc_add select:focus ~ label, div.qc_add input:focus ~ label, div.qc_add .not_empty ~ label, div.qc_add input[name=prd_name].not_empty ~ label, div.inv_add select:focus ~ label, div.inv_add input:focus ~ label, div.inv_add .not_empty ~ label, div.inv_add input[name=prd_name].not_empty ~ label {
  left:2px;
  top:-15px;
  font-size:10px;
  color:#0c4d8b;
  font-weight:600;
  text-transform:uppercase;
}
div#price_list div.margin {
	position:absolute;
	left: 9px;
    font-size: 11px;
}
table#report_list tr.ord_head td {
	font-weight:bold;
	padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    padding-right: 8px;
}
table#report_list tr.ord_head, table#report_list tr.ord_head td {
	background-color: #0c4d8b !important;
    color: #FFF;
}
tr.inv_ordered {
	background-color: rgba(49, 97, 122, 0.32);
}
table.ordered {
	margin: 10px auto;
	border: 1px solid #0c4d8b;
}
table#report_list table.ordered td {
	padding-left: 8px;
    padding-right: 8px;
}
table#report_list table.ordered td:first-child {
	    font-weight: bold;
}
table#report_list tr.ord_table {
	background-color: rgba(224, 224, 224, 0.17);
}
div.qc_add select, div.qc_add input {
	margin-bottom:15px;
	padding: .6rem 1.0rem;
	width:100%;
}
div.qc_add span.srch_cus select, div.inv_add span.srch_cus select {
	margin-bottom:0px;
	padding: 0rem 1.2rem;
	width:auto;
	min-width:60px;
	vertical-align: middle;
	top: 1px;
}
div.qc_add span.srch_cus select[name=qty], div.inv_add span.srch_cus select[name=qty] {
	position: absolute;
    right: 1px;
    border: 0px;
    top: -2px;
    height: 100%;
    border-left: 1px solid #CCC;
    font-size: 1.2rem;
    background-color: rgba(255, 255, 255, 0.46);
    border-radius: 0px;
    padding: 0rem .8rem;
}
div.qc_add span.srch_cus select[name=category], div.inv_add span.srch_cus select[name=category] {
	font-size: .8rem;
    font-weight: bold;
	background:transparent;
	margin-top:5px;
	padding: 0rem .1rem;
}
div.qc_add span.srch_gr, div.inv_add span.srch_gr {
    box-sizing: border-box;
    margin: .5%;
    padding: 8px 10px;
    display: block;
    text-align: left;
}
div.qc_add span.srch_fork, div.inv_add span.srch_fork {
    padding-right: 100px;
}
table.transfer_table, table.transfer-go {
	display: block;
    width: 100%;
    margin-bottom: 12px;
    font-size: 12px;
    position: relative;
    border: 1px solid #0c4d8b;
    box-sizing: border-box;
}
div.transfer_title {
	font-weight: bold;
    text-transform: uppercase;
    background: #0c4d8b;
    width: 100%;
    padding: 6px;
    position: relative;
    display: block;
    color: #FFF;
    box-sizing: border-box;
}
tr.transfer_item td {
	font-weight:bold;
	padding: 4px 8px;
}
table.transfer_table select, table.transfer-go select {
	padding: 1px;
    margin: 0px;
    font-weight: bold;
	background:transparent;
}
table.transfer_table tbody tr:nth-child(even) {
	background: rgba(99,99,99,0.1);
}
table.transfer_table thead td, table.transfer-go thead td, table.transfer-return thead td {
	text-transform:uppercase;
	padding:6px 8px 2px;
	text-decoration:underline;
	font-weight:bold;
}
table.transfer_table thead tr, table.transfer-go thead tr, table.transfer-return thead tr {
	background: rgba(49, 97, 122, 0.5);
}
button.admin_act {
	font-weight:bold;
	padding: 10px 20px;
	font-size: 16px;
}
button.admin_act:hover {
	background-color: lightblue;
    border: 1px solid #5EA8BB;
    cursor: pointer;
}
form[name=code_form] div.char {
	font-size:14px;
}
div.warning {
	position: absolute;
    top: 7px;
    left: 1px;
    font-size: 12px;
    color: #6a0000;
}
div.warning i:hover {
	background:transparent;
	color:#CC0003;
}
table.back_orders {
	border:1px solid #CCC;
	padding:10px;
}
table.back_orders td {
	padding:12px;
}
div#inv_table {
    position: relative;
    width: 900px;
	z-index:0;
}

/* Invoices pagination/loading state */
body.inv-page-loading {
	cursor: progress;
}

div#inv_table .inv-loading-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	display: none;
	z-index: 5;
	overflow: hidden;
	border-radius: 8px 8px 0 0;
}

div#inv_table .inv-loading-bar {
	width: 40%;
	height: 100%;
	background: linear-gradient(90deg, #4a9eff, #0c4d8b, #4a9eff);
	background-size: 200% 100%;
	border-radius: 3px;
	animation: inv-loading-slide 1.2s ease-in-out infinite;
}

@keyframes inv-loading-slide {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(350%); }
}

div#inv_table.inv-loading .inv-loading-overlay {
	display: block;
}

div#inv_table.inv-loading div.tbody {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

div#invoices_pagination_container.inv-paging-loading {
	opacity: 0.5;
	pointer-events: none;
}
div#inv_table div.td, div#inv_table div.thead div.td {
	display:inline-block;
}
div#inv_table div.thead, div#inv_table div.tbody {
	width:100%;
	display:block;
}
div#inv_table div.thead {
	position: fixed;
    width: inherit;
	z-index: 1;
}
/* Modern Invoices Table Header */
div#inv_table div.thead div.td {
	color: #64748b;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 12px 0px 12px 5px;
}

div#inv_table div.tbody div.tr {
	border: 1px solid #cccccc7a;
    margin: 5px 0px;
    border-radius: 5px;
	background-color: #FFF;
    box-shadow: 0 0px 4px 0 rgba(0, 0, 0, 0.02), 0 0px 4px 0 rgba(0, 0, 0, 0.02);
	overflow: hidden;
}

div#inv_table div.thead div.tr {
	/* border: 1px solid transparent; */
	/* border-bottom: 1px solid #e2e8f0; */
	width:100%;
	background-color: #fafcfd;
	box-sizing: border-box;
}
div#inv_table div.td {
	padding:12px 3px;
	vertical-align: middle;
}
div#inv_table div.thead div.td i {
	position:relative;
	display:inline-block;
	top: -2px;
    margin-left: 3px;
}
div#inv_table div.thead div.td i.clear_all {
	top:4px;
	margin-bottom:5px;
	padding-top:0px;
}
div#inv_table.send_inv div.thead div.td i.clear_all, div#inv_table.send_stmt div.thead div.td i.clear_all {
	top:4px;
	margin-bottom:8px;
	padding-top:8px;
}
div#inv_table div.td.inv_num {
	padding-left:12px;
}
div.inv_num {
	width:9%;
}
div.inv_ops {
	display: inline-block;
    margin-top: 0px;
    position: relative;
}
div#inv_table.send_inv div.inv_ops, div#inv_table.send_stmt div.inv_ops {
	margin-top: -9px;
}
div.s_fields {
	top:9px;
}
div.s_fields.send_inv, div.s_fields.send_stmt {
	display:flex;
	align-items: center;
	justify-content: left;
}
div.s_fields.send_inv span.span_so, div.s_fields.send_stmt span.span_so {
	display:inline-block;
	margin-top:0px;
	margin-bottom:0px;
	position:relative;
	top:6px;
	margin-left:10px;
}
div#all_orders.invoices div.inv_cn {
	width:22%;
	flex-wrap:wrap;
}
div#all_orders.invoices div#inv_table.send_inv div.inv_cn, div#all_orders.invoices div#inv_table.send_stmt div.inv_cn {
	width:29%;
}
div#all_orders div.inv_cn {
	width:22%;
}
span.sub_email {
	font-size: 10px;
    color: lightslategray;
}
div.inv_created {
	width:9%;
}
div.inv_dd {
	width:7%;
}
div.inv_total {
	width:7.7%;
}
div.inv_act {
	font-weight:bold;
}
div.cl_sort {
	cursor:pointer;
}
div.cl_sort:hover {
	text-decoration:underline;
}
div#inv_table div.tbody div.tr.selected {
	border: 1px solid #0c4d8b;
	background: rgb(12 77 139 / 7%);
}

div.td.paid {
	color:#006602;
}
div.td.pending {
	color:#6b6a67;
}
button.pay, button.inv_view.email {
	border-radius:15px;
	padding: 7px 11px 6px 11px;
	color:#0c4d8b;
	background-color: rgba(0, 51, 102, 0.22);
	border:0px;
	font-size:12px;
	font-weight:bold;
	cursor:pointer;
	width:72px;
	text-align: center;
    display: inline-block;
	box-sizing: border-box;
	margin-left:5px;
}
div#pay_all button.pay {
	width: auto;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 13px 6px 12px;
	background-color: transparent;
    border: 1px solid #7aacdc;
}
div#pay_all button.pay:hover {
	background: #dff0ff;
    border: 1px solid #7aacdc;
    color: #0c4d8b;
}
div#inv_table div#pay_all button.pay i {
	top:0px;
	margin-left:0px;
}
div#inv_table.send_inv div#pay_all, div#inv_table.send_stmt div#pay_all {
	top:9px;
}
div#pay_all {
	top:1px;
}
button.pay:disabled, button.pay:disabled:hover {
	background-color: rgb(90 97 105 / 22%);
	color: #6d8093;
	cursor:not-allowed;
}
span.paid, span.pending {
	border-radius:15px;
	padding: 7px 11px 6px 11px;
	color:#006602;
	border:1px solid rgba(0, 102, 2, 0.22);
	font-size:12px;
	font-weight:bold;
	width:70px;
	text-align: center;
    display: inline-block;
	box-sizing: border-box;
	margin-left:5px;
}
span.pending {
	color:#6b6a67;
	border:0px;
	width:auto;
	margin-left:0px;
	padding: 7px 0px 7px 3px;
}
div.tr.pending {
	border-color:rgb(107, 106, 103, 0.4) !important;
}
span.paid.credit {
	border-color: rgb(128 128 128 / 38%);
    color: rgb(90 90 90 / 89%);
	padding: 6px 11px 5px 11px;
}
div.td span.paid.credit span {
	padding-left: 0px;
}
span.paid_confirm {
	border-radius:15px;
	color:#006602;
	border:1px solid rgba(0, 102, 2, 0.22);
	font-weight:bold;
	text-align: center;
    display: inline-block;
	box-sizing: border-box;
	font-size: 24px;
    width: auto;
    padding: 24px 18px;
    border: 0px;
}
button.pay:hover {
	color:#0c4d8b;
	background-color: rgba(0, 51, 102, 0.42);
}
button.view, button.portal-photos, button.inv_view.print {
	border-radius: 15px;
    padding: 7px 11px 6px 11px;
    color: #006602;
    background-color: rgba(0, 102, 2, 0.22);
    border: 0px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
	width: 69px;
}
button.view:hover {
	color:#006602;
	background-color: rgba(0, 102, 2, 0.42);
}
button.portal-photos {
	width: 32px;
	background-color:transparent;
}
button.portal-photos:hover {
	color:#006602;	
}
button.upload, button.snd_inv, button.snd_receipt, button.print_rcpt, button.snd_history, button.tic_photos, button.update_inv, button.del_inv, button.del_payment {
	padding: 0px;
    color: rgba(143, 13, 6, 0.8);
    background-color: transparent;
    border: 0px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin-left: 8px;
	vertical-align: middle;
}
button.snd_inv, button.update_inv, button.snd_history, button.tic_photos, button.del_inv {
	margin:2px;
}
button.tic_photos, button.inv_view {
	margin-right: 5px;
}
span.span_send_inv button.inv_view.settings {
    padding: 0px;
    color: gray;
    border: 0px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    box-sizing: border-box;
    margin-left: 3px;
}
span.span_send_inv button.inv_view, span.span_send_stmt button.inv_view {
	width:auto;
	background:transparent;
	border: 1px solid #e0e0e0;
    color: gray;
}
button.inv_view.print, button.inv_view.email {
	padding:6px 11px;
}
span.span_send_inv {
	display:flex;
}
button.inv_view.print.selected {
	border:1px solid #70a558;
	background: rgb(234 254 234);
	color: #006602;
}
button.inv_view.print:hover {
	border:1px solid #70a558;
	color: #006602;
}
button.inv_view.email.selected {
	background: #dff0ff;
    border: 1px solid #7aacdc;
    color: #0c4d8b;
}
button.inv_view.email:hover {
    border: 1px solid #7aacdc;
    color: #0c4d8b;
}
button.rm_att {
	position:relative;
}
button.upload:hover {
	color:rgba(143, 13, 6, 1.0);
}
button.snd_history, button.tic_photos, button.update_inv, button.snd_inv, button.snd_receipt, button.print_rcpt, button.del_inv, button.del_payment {
	color:rgb(0 51 102 / 76%);
}
button.snd_history:hover, button.update_inv:hover, button.tic_photos:hover {
	color:rgb(0 51 102);
}
button.snd_inv:hover, button.snd_receipt:hover {
	color:rgb(4 95 4);
}
button.del_inv:hover, button.del_payment:hover {
	color:darkred;
}
/* pay_rpt forces its own icon color via !important — restate the hover so the
   delete button actually turns red on hover like the other destructive buttons. */
button.pay_rpt.del_payment:hover i {
	color: darkred !important;
}
/* Admin tax-override button — green accent when an override is active on the
   invoice (the %%% icon). Signals "this invoice's tax code is locked". */
button.tax_override.is-override {
	color: #16a34a;
}
button.tax_override:hover {
	color: #0c4d8b;
}
button.tax_override.is-override:hover {
	color: #15803d;
}
/* Invoice row — kebab "More actions" trigger + panel.
   Sized to visually pair with the pill-shaped Print/Pay buttons next to it
   (28×28 circle, same vertical alignment), so the row reads as one tidy
   action group rather than mixed sizes. */
.ic-row-actions {
	display: inline-flex;
	align-items: center;
	position: relative;
	margin-left: 6px;
	vertical-align: middle;
}
.ic-row-actions > button.ic-actions-trigger {
	width: 28px;
	height: 28px;
	padding: 0;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 50%;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.ic-row-actions > button.ic-actions-trigger:hover,
.ic-row-actions.is-open > button.ic-actions-trigger {
	background: rgba(12, 77, 139, 0.08);
	border-color: rgba(12, 77, 139, 0.18);
}
.ic-row-actions.is-open > button.ic-actions-trigger {
	transform: scale(0.96);
}
/* Vertical-dots glyph drawn with pseudo-elements + box-shadow — crisper than
   a Font Awesome icon at this size and immune to icon-font loading races. */
.ic-row-actions > button.ic-actions-trigger > .ic-actions-trigger__dots {
	position: relative;
	display: inline-block;
	width: 4px;
	height: 4px;
	background: #0c4d8b;
	border-radius: 50%;
	box-shadow:
		0 -7px 0 #0c4d8b,
		0  7px 0 #0c4d8b;
	transition: opacity 0.15s ease;
	opacity: 0.78;
}
.ic-row-actions > button.ic-actions-trigger:hover > .ic-actions-trigger__dots,
.ic-row-actions.is-open > button.ic-actions-trigger > .ic-actions-trigger__dots {
	opacity: 1;
}

/* Popup panel — items go edge-to-edge in every direction. Zero panel padding
   plus overflow:hidden + the panel's border-radius means hover backgrounds
   span the full width AND tuck cleanly into the rounded corners at top/bottom. */
.ic-row-actions > .ic-row-actions-menu {
	display: none;
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	min-width: 220px;
	background: #fff;
	border: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: 10px;
	box-shadow:
		0 14px 32px rgba(12, 77, 139, 0.14),
		0 2px 8px rgba(15, 23, 42, 0.06);
	padding: 0;
	overflow: hidden;
	z-index: 9999;
	text-align: left;
	transform-origin: top right;
}
.ic-row-actions.is-open > .ic-row-actions-menu {
	display: block;
	animation: ic-row-actions-pop 0.14s ease-out;
}
.ic-row-actions.is-open.is-open-up > .ic-row-actions-menu {
	animation: ic-row-actions-pop-up 0.14s ease-out;
}
/* Suppresses the open animation during the brief measurement frame so we
   don't get a transient state. JS removes the class on next animation frame. */
.ic-row-actions.is-open.ic-no-anim > .ic-row-actions-menu {
	animation: none !important;
	opacity: 1;
}
@keyframes ic-row-actions-pop {
	from { opacity: 0; transform: translateY(-4px) scale(0.97); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ic-row-actions-pop-up {
	from { opacity: 0; transform: translateY(4px) scale(0.97); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Reset any inherited button styles from the global rules so dropdown items
   don't pick up the navy color/font-size from the snd_history / del_inv etc.
   classes they share. The dropdown is its own visual context. */
.ic-row-actions > .ic-row-actions-menu > button.ic-row-actions-item {
	display: flex !important;
	align-items: center;
	gap: 10px;
	width: 100% !important;
	padding: 11px 16px !important;
	margin: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-family: 'Montserrat', sans-serif !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #1e293b !important;
	cursor: pointer;
	text-align: left;
	white-space: nowrap;
	transition: background 0.12s ease, color 0.12s ease;
	box-sizing: border-box;
	line-height: 1.3 !important;
	vertical-align: top !important;
}
.ic-row-actions > .ic-row-actions-menu > button.ic-row-actions-item:hover {
	background: #f1f5f9 !important;
}
.ic-row-actions > .ic-row-actions-menu > button.ic-row-actions-item > i {
	width: 16px;
	font-size: 14px;
	color: #64748b !important;
	flex-shrink: 0;
	text-align: center;
	padding: 0 !important;
}
.ic-row-actions > .ic-row-actions-menu > button.ic-row-actions-item:hover > i {
	color: #0c4d8b !important;
}
.ic-row-actions > .ic-row-actions-menu > button.ic-row-actions-item > span {
	flex: 1 1 auto;
}
/* Destructive items highlight red on hover */
.ic-row-actions > .ic-row-actions-menu > button.ic-row-actions-item.del_inv:hover,
.ic-row-actions > .ic-row-actions-menu > button.ic-row-actions-item.rm_att:hover {
	color: #b91c1c !important;
}
.ic-row-actions > .ic-row-actions-menu > button.ic-row-actions-item.del_inv:hover > i,
.ic-row-actions > .ic-row-actions-menu > button.ic-row-actions-item.rm_att:hover > i {
	color: #b91c1c !important;
}
/* Override-active cue inside the dropdown */
.ic-row-actions > .ic-row-actions-menu > button.ic-row-actions-item.tax_override.is-override > i {
	color: #16a34a !important;
}
/* Send invoice — gentle accent so it reads as the "common" action in the menu */
.ic-row-actions > .ic-row-actions-menu > button.ic-row-actions-item.snd_inv > i {
	color: #0c4d8b !important;
}
/* Tax-override modal — Select2 tuned to match the rest of the panel. */
.ic-tax-override-modal .jBox-content { padding: 0 !important; }
.ic-tax-override-modal .ic-tax-override-body .select2-container { width: 100% !important; }
.ic-tax-override-modal .ic-tax-override-body .select2-container--default .select2-selection--single {
	height: 38px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	background: #fff;
}
.ic-tax-override-modal .ic-tax-override-body .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 38px;
	padding: 0 30px 0 12px;
	color: #1e293b;
	font-size: 14px;
}
.ic-tax-override-modal .ic-tax-override-body .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 36px;
}
.ic-tax-override-modal .ic-tax-override-body .select2-container--open .select2-selection--single {
	border-color: #0c4d8b;
	box-shadow: 0 0 0 2px rgba(12,77,139,0.12);
}

/* Dropdown popup — scoped to the modal wrapper (where it now mounts) so we
   can size, color, and hover it without leaking onto other Select2 fields. */
.ic-tax-override-modal .select2-dropdown {
	border: 1px solid #0c4d8b !important;
	border-radius: 6px !important;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
	overflow: hidden;
}
.ic-tax-override-modal .select2-search--dropdown {
	padding: 8px 10px;
	background: #f8fafc;
	border-bottom: 1px solid #e2e8f0;
}
.ic-tax-override-modal .select2-search--dropdown .select2-search__field {
	height: 32px;
	padding: 0 10px;
	border: 1px solid #cbd5e1;
	border-radius: 4px;
	font-size: 13px;
	outline: none;
}
.ic-tax-override-modal .select2-search--dropdown .select2-search__field:focus {
	border-color: #0c4d8b;
}
.ic-tax-override-modal .select2-results { max-height: 280px; }
.ic-tax-override-modal .select2-results__options { padding: 4px 0; }
.ic-tax-override-modal .select2-results__option {
	padding: 8px 14px;
	font-size: 13px;
	color: #1e293b;
	border-bottom: 1px solid #f1f5f9;
	transition: background-color 0.08s ease, color 0.08s ease;
}
.ic-tax-override-modal .select2-results__option:last-child { border-bottom: 0; }
/* Soft slate hover, dark text — readable and matches the rest of the panel. */
.ic-tax-override-modal .select2-results__option--highlighted[aria-selected],
.ic-tax-override-modal .select2-results__option--highlighted {
	background: #e0f2fe !important;
	color: #0c4d8b !important;
}
/* The persisted selected row — heavier weight, faint tint. */
.ic-tax-override-modal .select2-results__option[aria-selected="true"] {
	background: #f1f5f9;
	color: #0c4d8b;
	font-weight: 600;
}
.ic-tax-override-modal .select2-results__option[aria-selected="true"].select2-results__option--highlighted {
	background: #bae6fd !important;
}

/* Dark mode parity */
[data-theme="dark"] .ic-tax-override-modal .select2-dropdown {
	background: #1f293c;
	border-color: #4a9eff !important;
}
[data-theme="dark"] .ic-tax-override-modal .select2-search--dropdown {
	background: #263048;
	border-bottom-color: #344058;
}
[data-theme="dark"] .ic-tax-override-modal .select2-search--dropdown .select2-search__field {
	background: #1f293c;
	color: #e2e8f0;
	border-color: #344058;
}
[data-theme="dark"] .ic-tax-override-modal .select2-results__option {
	color: #e2e8f0;
	border-bottom-color: #2c3a52;
}
[data-theme="dark"] .ic-tax-override-modal .select2-results__option--highlighted[aria-selected],
[data-theme="dark"] .ic-tax-override-modal .select2-results__option--highlighted {
	background: rgba(74, 158, 255, 0.18) !important;
	color: #93c5fd !important;
}
[data-theme="dark"] .ic-tax-override-modal .select2-results__option[aria-selected="true"] {
	background: #263048;
	color: #93c5fd;
}
[data-theme="dark"] .ic-tax-override-modal .select2-results__option[aria-selected="true"].select2-results__option--highlighted {
	background: rgba(74, 158, 255, 0.30) !important;
}
div.j_form {
	padding:15px 20px;
}
button.upload i, button.rm_att i, button.snd_inv i, button.snd_receipt i, button.snd_history i, button.del_inv i, button.tic_photos i {
	padding:1px 1px 2px;
}
div.td button.view i, div.td button.pay i, div.td span.paid i, div.td span.pending i {
	margin:0px;
	padding:0px;
}
div.td button.view span, div.td button.pay span, div.td span.paid span, div.td span.pending span, button.inv_view span {
	margin:0px;
	padding-left:5px;
}
div#butt_container {
	background: #fff;
    padding: 0;
    margin-bottom: 10px;
	/* Downward-only shadow so it won't overlap sidebar */
	box-shadow: 0 2px 6px -4px rgba(0, 0, 0, 0.22);
	border-bottom: 1px solid #e2e8f0;
	position: fixed;
    right: 0;
    left: 0;
	/* z-index needs to clear .floating-actions-panel (1000) so any
	   dropdown anchored inside the header (theme picker, header-more
	   menu, notifications popover) escapes the header's stacking
	   context and renders above the floating right-side rail.
	   The header itself doesn't visually overlap the rail at rest —
	   the rail sits ~50% down the viewport — so bumping this is
	   purely about freeing descendants to stack above content rather
	   than letting them get trapped at the header's old z=4. */
	z-index: 1050;
}

/* Modern Page Headers (Reports & Orders) */
div#butt_container.reports-header,
div#butt_container.orders-header {
	padding: 0;
}

div#butt_container.reports-header .header-row,
div#butt_container.orders-header .header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 16px;
	border-bottom: 1px solid #f1f5f9;
}

div#butt_container.reports-header .header-left,
div#butt_container.orders-header .header-left {
	display: flex;
	align-items: center;
	gap: 12px;
}

div#butt_container.reports-header .header-left #m_open,
div#butt_container.orders-header .header-left #m_open {
	display: none;
	padding: 6px;
	border-radius: 6px;
	cursor: pointer;
	color: #64748b;
	transition: all 0.15s ease;
}

div#butt_container.reports-header .header-left #m_open:hover,
div#butt_container.orders-header .header-left #m_open:hover {
	background: #f1f5f9;
	color: #0c4d8b;
}

div#butt_container.reports-header .header-left #m_open i,
div#butt_container.orders-header .header-left #m_open i {
	font-size: 16px;
	padding: 0;
	height:auto;
}

div#butt_container.reports-header .page-title,
div#butt_container.orders-header .page-title {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #0c4d8b;
	font-size: 16px;
	font-weight: 600;
}

div#butt_container.reports-header .page-title i,
div#butt_container.orders-header .page-title i {
	font-size: 14px;
	opacity: 0.8;
}

/* Portal: minimal "Exit send mode" control */
div#butt_container.reports-header .portal-exit-mode {
	height: 28px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 10px;
	border-radius: 999px;
	border: 1px solid rgba(12, 77, 139, 0.18);
	background: linear-gradient(135deg, rgba(12, 77, 139, 0.10) 0%, rgba(12, 77, 139, 0.04) 100%);
	color: #0c4d8b;
	font-size: 12px;
	font-weight: 800;
	cursor: pointer;
}

div#butt_container.reports-header .portal-exit-mode:hover {
	border-color: rgba(12, 77, 139, 0.28);
	background: linear-gradient(135deg, rgba(12, 77, 139, 0.14) 0%, rgba(12, 77, 139, 0.06) 100%);
}

div#butt_container.reports-header .portal-exit-mode i {
	font-size: 12px;
	opacity: 0.9;
}

/* Active header-btn visual state when in mode */
div#butt_container.reports-header .header-btn.is-active {
	background: rgba(12, 77, 139, 0.10);
	color: #0c4d8b;
}

div#butt_container.reports-header .header-right,
div#butt_container.orders-header .header-right {
	display: flex;
	align-items: center;
	gap: 4px;
}

div#butt_container.reports-header .header-btn,
div#butt_container.orders-header .header-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	border-radius: 6px;
	cursor: pointer;
	color: #64748b;
	transition: all 0.15s ease;
	position: relative;
}

div#butt_container.reports-header .header-btn:hover,
div#butt_container.orders-header .header-btn:hover {
	background: #f1f5f9;
	color: #0c4d8b;
}

div#butt_container.reports-header .header-btn i,
div#butt_container.orders-header .header-btn i {
	font-size: 14px;
}

div#butt_container .header-btn svg {
	width: 16px;
	height: 16px;
}

/* ── Unified "history" group: undo · history-caret · redo (+ Recently deleted) ──
   Visually fences the reversible-action controls off from the other header
   icons with a divider, so they read as one distinct unit. Used on every page
   that has undo/redo — customers / vault / orders / trucking / production all
   wrap the trio in .hx-history-group at the start of #butt_container .header-right.
   (Trucking & production keep their .sch-bar-btn / .prod-bar-btn divs inside the
   wrapper — those are ~identical to .header-btn, so the trio reads native and each
   page's history JS keeps working unchanged.) */
.hx-history-group {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-right: 8px;
	padding-right: 10px;
	border-right: 1px solid #e2e8f0;
}
/* Edge-divider helpers — a pseudo-element line (icon stays centered, no box
   distortion) for any future dense-bar case that can't use the wrapper.
   Currently unused: every page now wraps the trio in .hx-history-group. */
.hx-hist-fence-start { position: relative; margin-left: 9px; }
.hx-hist-fence-end   { position: relative; margin-right: 9px; }
.hx-hist-fence-start::before,
.hx-hist-fence-end::after {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 18px;
	background: #e2e8f0;
	pointer-events: none;
}
.hx-hist-fence-start::before { left: -5px; }
.hx-hist-fence-end::after { right: -5px; }

[data-theme="dark"] .hx-history-group { border-right-color: #334155; }
[data-theme="dark"] .hx-hist-fence-start::before,
[data-theme="dark"] .hx-hist-fence-end::after { background: #334155; }

/* Orders brings its split-button undo into the header group — strip the
   action-bar chrome so undo+caret read as two flat header icons (the
   .undo-split-btn wrapper is kept only as the dropdown's positioning anchor). */
.hx-history-group .undo-split-btn { display: inline-flex; align-items: center; gap: 2px; background: none; border: none; box-shadow: none; padding: 0; margin: 0; }
.hx-history-group .undo-btn span, .hx-history-group .redo-btn span { display: none; }

/* Bell pill look/position shared via messaging.css (.header-btn > .notify_num).
   Kept empty rules here only so older caches don't reintroduce right:2px. */
div#butt_container.reports-header .header-btn .notify_num:empty,
div#butt_container.orders-header .header-btn .notify_num:empty {
	display: none;
}

/* ═══════════════════════════════════════════════════════════════
   Header overflow "More" button + dropdown. Applied via JS
   (HeaderOverflow in main_.js) to any `.header-right` that has
   more icon buttons than the container can fit. The menu shares
   .theme-dropdown so dark-mode colors inherit from theme.css.
   ═══════════════════════════════════════════════════════════════ */
.header-more-wrap { position: relative; display: none; }
.header-more-wrap.has-overflow { display: inline-flex; }
.header-more-btn {
	display: flex; align-items: center; justify-content: center;
	width: 34px; height: 34px;
	border: none; background: transparent; border-radius: 6px;
	cursor: pointer; color: #64748b; padding: 0;
	transition: all 0.15s ease;
}
.header-more-btn:hover,
.header-more-btn.is-open { background: #f1f5f9; color: #0c4d8b; }
.header-more-btn i { font-size: 14px; pointer-events: none; }
.header-more-menu {
	display: none;
	position: fixed !important;
	top: 48px !important;
	right: 8px !important;
	width: 220px;
	max-width: calc(100vw - 16px);
	padding: 4px !important;
	border-radius: 8px !important;
	z-index: 10000;
	max-height: 70vh;
	overflow-y: auto;
	overflow-x: hidden;
	box-sizing: border-box;
}
.header-more-menu * { box-sizing: border-box; }
.header-more-menu.open { display: block !important; }
.header-more-menu .hmm-item {
	display: flex; align-items: center; gap: 10px;
	width: 100%; max-width: 100%;
	padding: 8px 10px;
	border: none; background: transparent; border-radius: 5px;
	cursor: pointer; color: #1e293b;
	font-size: 13px; font-family: inherit;
	text-align: left; text-decoration: none;
	position: relative;
	overflow: hidden; min-width: 0;
}
.header-more-menu .hmm-item:hover { background: #f1f5f9; color: #0c4d8b; }
.header-more-menu .hmm-item .hmm-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 24px; font-size: 14px; color: #64748b; flex: 0 0 24px;
}
/* Inlined SVG monograms (the Sage / QuickBooks "New Sales Order" logos) carry
   no intrinsic width/height — only a viewBox — so without this they fill the
   24px icon slot and tower over the 14px Font Awesome glyphs beside them. Pin
   them to glyph size so every menu row's icon reads at one weight. */
.header-more-menu .hmm-item .hmm-icon svg {
	width: 15px; height: 15px;
}
.header-more-menu .hmm-item:hover .hmm-icon { color: #0c4d8b; }
.header-more-menu .hmm-item .hmm-label {
	flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.header-more-menu .hmm-item .hmm-badge {
	min-width: 16px; height: 16px;
	background: #ef4444; color: #fff;
	font-size: 10px; font-weight: 600;
	border-radius: 8px;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0 4px;
}
.header-more-menu .hmm-item .hmm-badge:empty { display: none; }
html[data-theme="dark"] .header-more-menu .hmm-item .hmm-badge {
	box-shadow: 0 0 0 1.5px #1f293c;
}
html[data-theme="dark"] .header-more-menu .hmm-item:hover .hmm-icon {
	color: #4a9eff;
}

/* Folded undo / redo rows mirror their source button's disabled state
   (e.g. "Nothing to undo") so the menu reads honestly. */
.header-more-menu .hmm-item.is-disabled,
.header-more-menu .hmm-item.is-disabled .hmm-icon { color: #cbd5e1; cursor: default; }
.header-more-menu .hmm-item.is-disabled:hover { background: transparent; color: #cbd5e1; }
.header-more-menu .hmm-item.is-disabled:hover .hmm-icon { color: #cbd5e1; }
html[data-theme="dark"] .header-more-menu .hmm-item.is-disabled,
html[data-theme="dark"] .header-more-menu .hmm-item.is-disabled .hmm-icon { color: #475569; }
html[data-theme="dark"] .header-more-menu .hmm-item.is-disabled:hover { background: transparent; color: #475569; }

/* Mobile: hide page-title icon, show page name text (overrides any
   per-page rule that previously did the opposite — e.g., production). */
@media (max-width: 768px) {
	/* `:not(.page-crumb-bar)` so this legacy "drop the plain page-title's lone
	   icon on mobile" rule doesn't also nuke the breadcrumb bar's back-arrow,
	   chevron separator and current-page icon — the breadcrumb reuses the
	   .page-title class for header layout. Breadcrumb bars are styled entirely
	   by css/breadcrumb.css (and coring still simplifies its own crumb via
	   coring-schedule.css's !important rules). */
	div#butt_container .page-title:not(.page-crumb-bar) i { display: none !important; }
	div#butt_container .page-title:not(.page-crumb-bar) span { display: inline !important; font-size: 15px; }
}
/* Filters Row */
div#butt_container.reports-header .filters-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 12px 16px 11px;
	background: #fafbfc;
	width: 100%;
	box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════════════════════
   Universal Export (#report_export) — same look on every report.
   Uses high specificity + !important so global `button { padding/border/… }`
   (style.css top) never wins. IFTA/StdDev used to inject these rules only
   when those reports opened — now they're always available.
   ══════════════════════════════════════════════════════════════════════════ */
div#butt_container.reports-header .filters-row .sdr-export-wrap,
div#butt_container.reports-header .filters-row #report_export,
div#butt_container.reports-header .filters-row #ub_export {
	display: block !important;
	margin-left: auto !important;
	margin-right: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	flex: 0 0 auto !important;
	position: relative !important;
	align-self: center !important;
	z-index: 40;
}

/* Trigger — blue pill matching IFTA / StdDev */
div#butt_container.reports-header .filters-row #report_export .sdr-export-trigger,
div#butt_container.reports-header .filters-row .sdr-export-wrap .sdr-export-trigger,
#report_export_btn.sdr-export-trigger,
button.sdr-export-trigger {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 7px !important;
	height: 32px !important;
	min-height: 32px !important;
	max-height: 32px !important;
	padding: 0 16px !important;
	margin: 0 !important;
	background: #0c4d8b !important;
	background-color: #0c4d8b !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 6px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	font-family: 'Montserrat', system-ui, sans-serif !important;
	line-height: 1 !important;
	cursor: pointer !important;
	box-shadow: 0 2px 4px rgba(12, 77, 139, 0.3) !important;
	white-space: nowrap !important;
	position: relative !important;
	top: 0 !important;
	left: auto !important;
	right: auto !important;
	width: auto !important;
	min-width: 0 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	transition: background 0.15s ease !important;
	box-sizing: border-box !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}
div#butt_container.reports-header .filters-row #report_export .sdr-export-trigger:hover,
div#butt_container.reports-header .filters-row .sdr-export-wrap .sdr-export-trigger:hover,
#report_export_btn.sdr-export-trigger:hover,
button.sdr-export-trigger:hover {
	background: #0a3d6e !important;
	background-color: #0a3d6e !important;
	color: #ffffff !important;
}
div#butt_container.reports-header .filters-row #report_export .sdr-export-trigger i,
#report_export_btn.sdr-export-trigger i,
button.sdr-export-trigger i {
	color: #ffffff !important;
	font-size: 13px !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1 !important;
}
.sdr-export-chev {
	font-size: 11px !important;
	transition: transform 0.15s ease !important;
	color: #ffffff !important;
}
#report_export.is-open .sdr-export-chev,
.sdr-export-wrap.is-open .sdr-export-chev {
	transform: rotate(180deg) !important;
}

/* Dropdown panel */
div#butt_container.reports-header .filters-row #report_export .sdr-export-menu,
div#butt_container.reports-header .filters-row .sdr-export-wrap .sdr-export-menu,
#report_export .sdr-export-menu,
.sdr-export-menu {
	position: absolute !important;
	top: calc(100% + 6px) !important;
	right: 0 !important;
	left: auto !important;
	min-width: 184px !important;
	width: max-content !important;
	background: #ffffff !important;
	background-color: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 8px !important;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16) !important;
	padding: 6px !important;
	margin: 0 !important;
	z-index: 10050 !important;
	display: none !important;
	box-sizing: border-box !important;
}
#report_export.is-open .sdr-export-menu,
.sdr-export-wrap.is-open .sdr-export-menu,
div#butt_container.reports-header .filters-row #report_export.is-open .sdr-export-menu {
	display: block !important;
}

/* Menu items — kill global button border/padding/margin:auto */
div#butt_container.reports-header .filters-row #report_export .sdr-export-item,
div#butt_container.reports-header .filters-row .sdr-export-wrap .sdr-export-item,
#report_export .sdr-export-item,
button.sdr-export-item {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 10px !important;
	width: 100% !important;
	min-width: 0 !important;
	height: 36px !important;
	min-height: 36px !important;
	padding: 0 12px !important;
	margin: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	font-family: 'Montserrat', system-ui, sans-serif !important;
	line-height: 1 !important;
	color: #1f2937 !important;
	text-align: left !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	position: relative !important;
	top: 0 !important;
	box-sizing: border-box !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	white-space: nowrap !important;
}
div#butt_container.reports-header .filters-row #report_export .sdr-export-item:hover,
div#butt_container.reports-header .filters-row .sdr-export-wrap .sdr-export-item:hover,
#report_export .sdr-export-item:hover,
button.sdr-export-item:hover {
	background: #eef4fb !important;
	background-color: #eef4fb !important;
	color: #1f2937 !important;
}
div#butt_container.reports-header .filters-row #report_export .sdr-export-item i,
#report_export .sdr-export-item i,
button.sdr-export-item i {
	font-size: 14px !important;
	width: 16px !important;
	min-width: 16px !important;
	text-align: center !important;
	color: #0c4d8b !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1 !important;
	flex: 0 0 auto !important;
}

/* Dark mode */
[data-theme="dark"] #report_export .sdr-export-menu,
[data-theme="dark"] .sdr-export-menu {
	background: #16263b !important;
	background-color: #16263b !important;
	border-color: #2b4660 !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}
[data-theme="dark"] #report_export .sdr-export-item,
[data-theme="dark"] button.sdr-export-item {
	color: #e2e8f0 !important;
	background: transparent !important;
}
[data-theme="dark"] #report_export .sdr-export-item i,
[data-theme="dark"] button.sdr-export-item i {
	color: #7db4e8 !important;
}
[data-theme="dark"] #report_export .sdr-export-item:hover,
[data-theme="dark"] button.sdr-export-item:hover {
	background: #22344c !important;
	background-color: #22344c !important;
	color: #e2e8f0 !important;
}
[data-theme="dark"] #report_export .sdr-export-trigger,
[data-theme="dark"] button.sdr-export-trigger {
	background: #0c4d8b !important;
	color: #ffffff !important;
}

/* Invoices: queue action buttons within header */
div#butt_container.reports-header .filters-row .span_send_inv {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-right: 6px;
}

div#butt_container.reports-header .filters-row .span_send_inv .inv_view {
	height: 32px;
	padding: 0 10px;
	border-radius: 6px;
	border: 1px solid #e2e8f0;
	background: #fff;
	color: #0c4d8b;
	font-size: 12px;
	font-weight: 800;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: all 0.15s ease;
}

div#butt_container.reports-header .filters-row .span_send_inv .inv_view:hover {
	border-color: #cbd5e1;
	box-shadow: 0 1px 6px rgba(15, 23, 42, 0.06);
}

div#butt_container.reports-header .filters-row .span_send_inv .inv_view i {
	color: #94a3b8;
	font-size: 14px;
}

/* Override legacy inv_view span padding inside modern header */
div#butt_container.reports-header .filters-row .span_send_inv .inv_view span {
	padding-left: 0 !important;
	margin: 0;
}

/* Clean "selected" state (replaces old green/blue pill styles) */
div#butt_container.reports-header .filters-row .span_send_inv .inv_view.selected {
	border-color: rgba(12, 77, 139, 0.55) !important;
	background: rgba(12, 77, 139, 0.10) !important;
	color: #0c4d8b !important;
	box-shadow: none !important;
}

div#butt_container.reports-header .filters-row .span_send_inv .inv_view.selected i {
	color: #0c4d8b !important;
}

div#butt_container.reports-header .filters-row .span_send_inv .inv_view.settings {
	width: 32px;
	padding: 0;
	justify-content: center;
}

div#butt_container.reports-header .filters-row .span_send_inv .inv_view.settings span {
	display: none;
}

div#butt_container.reports-header .filter-group {
	display: flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	padding: 0 10px;
	height: 32px;
	transition: all 0.15s ease;
}

/* Filter labels (subtle, modern) */
div#butt_container.reports-header .filter-group[data-label],
div#butt_container.orders-header .filter-group[data-label],
div.s_fields .filter-group[data-label] {
	position: relative;
}

div#butt_container.reports-header .filter-group[data-label]::before,
div#butt_container.orders-header .filter-group[data-label]::before,
div.s_fields .filter-group[data-label]::before {
	content: attr(data-label);
	position: absolute;
	top: -7px;
	left: 4px;
	padding: 0 6px;
	background: #fafbfc;
	color: #64748b;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	pointer-events: none;
}

/* Multi-select summary display (replaces native "2 selected" text) */
div#butt_container.reports-header .filter-group.multi-summary,
div#butt_container.orders-header .filter-group.multi-summary,
div.s_fields .filter-group.multi-summary {
	position: relative;
	padding-right: 26px;
}

div#butt_container.reports-header .filter-group.multi-summary select[multiple],
div#butt_container.orders-header .filter-group.multi-summary select[multiple],
div.s_fields .filter-group.multi-summary select[multiple] {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
}

div#butt_container.reports-header .filter-group.multi-summary .multi-select-summary,
div#butt_container.orders-header .filter-group.multi-summary .multi-select-summary,
div.s_fields .filter-group.multi-summary .multi-select-summary {
	flex: 1;
	font-size: 13px;
	font-family: inherit;
	color: #1e293b;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-left: 6px;
	line-height: 1.4;
	transition: color 0.2s ease;
}

div#butt_container.reports-header .filter-group.multi-summary select.placeholder-shown + .multi-select-summary,
div#butt_container.orders-header .filter-group.multi-summary select.placeholder-shown + .multi-select-summary,
div.s_fields .filter-group.multi-summary select.placeholder-shown + .multi-select-summary {
	color: #94a3b8;
}

div#butt_container.reports-header .filter-group.multi-summary::after,
div#butt_container.orders-header .filter-group.multi-summary::after,
div.s_fields .filter-group.multi-summary::after {
	content: "";
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 12px;
	height: 7px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="7" viewBox="0 0 12 7"><path fill="%2364748b" d="M6 7L0 0h12z"/></svg>');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 10px;
	pointer-events: none;
	transition: transform 0.2s ease, opacity 0.2s ease;
	opacity: 0.7;
	z-index: 1;
}

div#butt_container.reports-header .filter-group.multi-summary:hover::after,
div#butt_container.orders-header .filter-group.multi-summary:hover::after,
div.s_fields .filter-group.multi-summary:hover::after {
	opacity: 1;
}

div#butt_container.reports-header .filter-group.multi-summary:focus-within::after,
div#butt_container.orders-header .filter-group.multi-summary:focus-within::after,
div.s_fields .filter-group.multi-summary:focus-within::after {
	opacity: 1;
	transform: translateY(-50%) rotate(180deg);
}

div#butt_container.reports-header .filter-group:focus-within {
	border-color: #0c4d8b;
	box-shadow: 0 0 0 2px rgba(12, 77, 139, 0.1);
}

div#butt_container.reports-header .filter-group i {
	color: #94a3b8;
	font-size: 12px;
	flex-shrink: 0;
}

div#butt_container.reports-header .filter-group input {
	border: none;
	background: transparent;
	font-size: 13px;
	font-family: inherit;
	color: #1e293b;
	width: 100px;
	padding: 0;
	outline: none;
}

div#butt_container.reports-header .filter-group input::placeholder {
	color: #94a3b8;
	font-size: 13px;
}

div#butt_container.reports-header .filter-group input#start_date,
div#butt_container.reports-header .filter-group input#end_date {
	width: 85px;
}

/* Filter-group select styling - matches input styling */
div#butt_container.reports-header .filter-group select,
div#butt_container.orders-header .filter-group select {
	border: none;
	background: transparent;
	font-size: 13px;
	font-family: inherit;
	color: #1e293b;
	/* small left inset so dropdown/value text isn't flush */
	padding: 0 0 0 6px;
	padding-right: 16px;
	outline: none;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path fill="%2394a3b8" d="M5 6L0 0h10z"/></svg>');
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 8px;
	min-width: 80px;
	height: auto;
}

div#butt_container.reports-header .filter-group select:focus,
div#butt_container.orders-header .filter-group select:focus,
div#butt_container.reports-header .filter-group input:focus,
div#butt_container.orders-header .filter-group input:focus {
	outline: none;
	box-shadow: none;
	border-color: transparent;
}

div#butt_container.reports-header .filter-group select option,
div#butt_container.orders-header .filter-group select option {
	color: #1e293b;
	background: #fff;
	padding: 8px 12px;
}

/* Select placeholder styling - first option as placeholder */
div#butt_container.reports-header .filter-group select option:first-child:disabled,
div#butt_container.reports-header .filter-group select option[value=""],
div#butt_container.orders-header .filter-group select option:first-child:disabled,
div#butt_container.orders-header .filter-group select option[value=""] {
	color: #94a3b8;
}

/* Style select when showing placeholder value (empty value selected) */
div#butt_container.reports-header .filter-group select.placeholder-shown,
div#butt_container.orders-header .filter-group select.placeholder-shown {
	color: #94a3b8;
}

/* Inventory page filters - left align */
div#butt_container.orders-header .s_fields.inventory-filters {
	justify-content: flex-start;
}

div#butt_container.orders-header .s_fields.inventory-filters span.span_so {
	justify-content: flex-start;
}

/* Filter-group styles for orders-header (inventory, etc.) */
div#butt_container.orders-header .filter-group {
	display: flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	padding: 0 10px;
	height: 32px;
	transition: all 0.15s ease;
}

div#butt_container.orders-header .filter-group:focus-within {
	border-color: #0c4d8b;
	box-shadow: 0 0 0 2px rgba(12, 77, 139, 0.1);
}

div#butt_container.orders-header .filter-group i {
	color: #94a3b8;
	font-size: 12px;
	flex-shrink: 0;
}

div#butt_container.orders-header .filter-group input {
	border: none;
	background: transparent;
	font-size: 13px;
	font-family: inherit;
	color: #1e293b;
	width: 100px;
	padding: 0;
	outline: none;
}

div#butt_container.orders-header .filter-group input::placeholder {
	color: #94a3b8;
	font-size: 13px;
}

/* Multi-select styling */
div#butt_container.reports-header .filters-row select[multiple] {
	height: auto;
	min-height: 32px;
	padding: 4px 8px;
	background-image: none;
}

/* Select2 Modern Styling for Reports */
div#butt_container.reports-header .select2-container {
	min-width: 120px;
	max-width: 200px;
}

div#butt_container.reports-header .select2-container--default .select2-selection--single,
div#butt_container.reports-header .select2-container--default .select2-selection--multiple {
	border: none;
	background: transparent;
	font-size: 13px;
	font-family: inherit;
	color: #1e293b;
	padding: 0;
	outline: none;
	cursor: pointer;
	height: auto;
	line-height: 1;
	min-height: 0;
}

div#butt_container.reports-header .select2-container--default .select2-selection--single .select2-selection__rendered,
div#butt_container.reports-header .select2-container--default .select2-selection--multiple .select2-selection__rendered {
	padding: 0;
	margin: 0;
	line-height: 1;
	font-size: 13px;
	font-family: inherit;
	color: #1e293b;
}

div#butt_container.reports-header .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: #94a3b8;
	font-size: 13px;
}

div#butt_container.reports-header .select2-container--default .select2-selection--multiple .select2-selection__choice {
	background: #f1f5f9;
	border: none;
	border-radius: 4px;
	color: #0c4d8b;
	padding: 2px 6px;
	margin: 2px 2px 2px 0;
	font-size: 11px;
	line-height: 1.2;
}

div#butt_container.reports-header .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
	color: #64748b;
	margin-right: 4px;
}

/* Native multiple select styling for categories */
div#butt_container.reports-header .filter-group select[multiple] {
	height: auto;
	min-height: 32px;
	padding: 4px 16px 4px 0;
	background: transparent;
	border: none;
	font-size: 13px;
	font-family: inherit;
	color: #1e293b;
	outline: none;
	cursor: pointer;
	line-height: 1.2;
}

div#butt_container.reports-header .filter-group select[multiple] option {
	padding: 2px 4px;
	background: #fff;
	color: #1e293b;
}

div#butt_container.reports-header .filter-group select[multiple] option:checked {
	background: #f1f5f9;
	font-weight: 500;
}

div#butt_container.reports-header .filter-group select[multiple]:focus {
	outline: none;
}

div#butt_container.reports-header .select2-container--default .select2-selection--multiple {
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	background: #fff;
	min-height: 32px;
	padding: 2px 4px;
	transition: all 0.15s ease;
}

div#butt_container.reports-header .select2-container--default.select2-container--focus .select2-selection--multiple,
div#butt_container.reports-header .select2-container--default.select2-container--open .select2-selection--multiple {
	border-color: #0c4d8b;
	box-shadow: 0 0 0 2px rgba(12, 77, 139, 0.1);
}

div#butt_container.reports-header .select2-container--default .select2-selection--multiple:hover {
	border-color: #cbd5e1;
}

div#butt_container.reports-header .select2-container--default .select2-selection--multiple .select2-selection__choice {
	background: #e8f0f8;
	border: none;
	border-radius: 4px;
	color: #0c4d8b;
	font-size: 11px;
	padding: 2px 6px;
	margin: 2px;
}

div#butt_container.reports-header .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
	color: #64748b;
	margin-right: 4px;
}

div#butt_container.reports-header .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
	color: #ef4444;
}

div#butt_container.reports-header .select2-container--default .select2-search--inline .select2-search__field {
	font-size: 13px;
	font-family: inherit;
	margin-top: 3px;
}

div#butt_container.reports-header .select2-container--default .select2-search--inline .select2-search__field::placeholder {
	color: #94a3b8;
}

/* Select2 Dropdown Global Styling */
.select2-container--default .select2-dropdown {
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.select2-container--default .select2-results__option {
	font-size: 13px;
	padding: 8px 12px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: #0c4d8b;
}

.select2-container--default .select2-results__option[aria-selected=true] {
	background: #e8f0f8;
	color: #0c4d8b;
}

/* Dynamic filter spans in new design */
div#butt_container.reports-header .filters-row span.group {
	display: none;
	margin: 0;
}

div#butt_container.reports-header .filters-row span.group select,
div#butt_container.reports-header .filters-row > select {
	height: 32px;
	padding: 0 28px 0 10px;
	font-size: 13px;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 8px center no-repeat;
	color: #1e293b;
	cursor: pointer;
	transition: all 0.15s ease;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	text-transform: none;
	font-family: inherit;
}

div#butt_container.reports-header .filters-row span.group select:hover,
div#butt_container.reports-header .filters-row > select:hover {
	border-color: #cbd5e1;
}

div#butt_container.reports-header .filters-row span.group select:focus,
div#butt_container.reports-header .filters-row > select:focus {
	border-color: #0c4d8b;
	box-shadow: 0 0 0 2px rgba(12, 77, 139, 0.1);
	outline: none;
}

div#butt_container.production-header #multi_ops {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 50%;
	margin-top: -15px;
	z-index: 100;
}

/* Generate/Run Button - Modern Attractive Style */
#run_report_btn,
button.gen_report {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	height: 32px !important;
	padding: 0 18px !important;
	background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 6px !important;
	font-size: 13px !important;
	font-family: inherit !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	white-space: nowrap !important;
	box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3) !important;
	text-transform: none !important;
	margin: 0 !important;
	top: 0 !important;
	position: relative !important;
}

#run_report_btn:hover,
button.gen_report:hover {
	background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
	box-shadow: 0 4px 8px rgba(16, 185, 129, 0.4) !important;
	transform: translateY(-1px) !important;
}

#run_report_btn:active,
button.gen_report:active {
	transform: translateY(0) !important;
	box-shadow: 0 1px 2px rgba(16, 185, 129, 0.25) !important;
}

#run_report_btn i,
button.gen_report i {
	font-size: 11px !important;
	padding: 0 !important;
	margin: 0 !important;
	color: #fff !important;
}

/* Disabled button styling */
#run_report_btn:disabled,
#run_inventory_btn:disabled,
button.gen_report:disabled {
	opacity: 0.6 !important;
	cursor: not-allowed !important;
	background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%) !important;
	box-shadow: none !important;
	transform: none !important;
}

/* Hide old elements when using new design */
div#butt_container.reports-header > #order_buttons,
div#butt_container.reports-header > #report_buttons,
div#butt_container.reports-header > #print_rep,
div#butt_container.orders-header > #order_buttons {
	display: none !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
	div#butt_container.reports-header .header-row,
	div#butt_container.orders-header .header-row {
		padding: 6px 10px;
	}
	div#butt_container.reports-header .header-left,
	div#butt_container.orders-header .header-left {
		gap: 6px;
	}
	div#butt_container.reports-header .header-left #m_open,
	div#butt_container.orders-header .header-left #m_open {
		display: flex;
		width: 32px;
		height: 32px;
		align-items: center;
		justify-content: center;
		padding: 0;
	}
	div#butt_container.reports-header .header-left #m_open i,
	div#butt_container.orders-header .header-left #m_open i {
		font-size: 18px;
	}
	div#butt_container.reports-header .header-btn,
	div#butt_container.orders-header .header-btn {
		width: 32px;
		height: 32px;
		border-radius: 8px;
	}
	div#butt_container.reports-header .header-btn i,
	div#butt_container.orders-header .header-btn i {
		font-size: 16px;
	}
	div#butt_container .header-btn svg {
		width: 18px;
		height: 18px;
	}
	div#butt_container.reports-header .header-right,
	div#butt_container.orders-header .header-right {
		gap: 2px;
	}

	/* Mobile-optimized filter groups - uniform, organized, clean */
	div#butt_container.reports-header .filters-row {
		padding: 12px 16px;
		gap: 10px;
		flex-wrap: wrap;
		align-items: flex-start;
	}
	
	div#butt_container.reports-header .filter-group,
	div#butt_container.orders-header .filter-group,
	div.s_fields .filter-group {
		flex: 1 1 0 !important;
		min-width: calc(45% - 5px) !important;
		max-width: none !important;
		width: auto !important;
		padding: 0 12px;
		margin-top: 0;
		margin-bottom: 10px;
		height: 40px;
		min-height: 40px;
		border-radius: 8px;
		box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
		border: 1px solid #e2e8f0;
		transition: all 0.15s ease;
		box-sizing: border-box;
	}
	
	/* Ensure multi-summary filters have same width behavior - plant filter fix */
	div#butt_container.reports-header .filter-group.multi-summary,
	div#butt_container.orders-header .filter-group.multi-summary,
	div.s_fields .filter-group.multi-summary {
		flex: 1 1 0 !important;
		min-width: calc(45% - 5px) !important;
		max-width: none !important;
		width: auto !important;
		padding-right: 12px !important;
		overflow: visible !important;
		position: relative;
	}
	
	/* Force the multi-select summary container to respect flex constraints */
	div#butt_container.reports-header .filter-group.multi-summary > *,
	div#butt_container.orders-header .filter-group.multi-summary > *,
	div.s_fields .filter-group.multi-summary > * {
		min-width: 0 !important;
		flex-shrink: 1 !important;
	}
	
	/* Ensure status filter (multi-summary) has same width as others - override any ID-specific styles */
	div#butt_container.reports-header .filter-group#search_type.multi-summary,
	div#butt_container.reports-header .filter-group#search_status.multi-summary,
	div#butt_container.orders-header .filter-group#search_type.multi-summary,
	div#butt_container.orders-header .filter-group#search_status.multi-summary,
	div.s_fields .filter-group#search_type.multi-summary,
	div.s_fields .filter-group#search_status.multi-summary {
		flex: 1 1 0 !important;
		min-width: calc(45% - 5px) !important;
		max-width: none !important;
		width: auto !important;
		padding-right: 12px !important;
	}
	
	/* Allow 3 per row on wider mobile screens */
	@media (min-width: 480px) and (max-width: 768px) {
		div#butt_container.reports-header .filter-group,
		div#butt_container.orders-header .filter-group,
		div.s_fields .filter-group {
			min-width: calc(30% - 7px);
		}
		
		div#butt_container.reports-header .filter-group.multi-summary,
		div#butt_container.orders-header .filter-group.multi-summary,
		div.s_fields .filter-group.multi-summary {
			min-width: calc(30% - 7px) !important;
			max-width: none !important;
			width: auto !important;
			flex: 1 1 0 !important;
		}
	}
	
	div#butt_container.reports-header .filter-group:focus-within,
	div#butt_container.orders-header .filter-group:focus-within,
	div.s_fields .filter-group:focus-within {
		border-color: #0c4d8b;
		box-shadow: 0 0 0 2px rgba(12, 77, 139, 0.1), 0 1px 3px rgba(15, 23, 42, 0.08);
	}
	
	div#butt_container.reports-header .filter-group i,
	div#butt_container.orders-header .filter-group i,
	div.s_fields .filter-group i {
		font-size: 13px;
		color: #64748b;
	}
	
	div#butt_container.reports-header .filter-group input,
	div#butt_container.orders-header .filter-group input,
	div.s_fields .filter-group input {
		font-size: 14px;
		padding: 0;
		height: 100%;
		width: 100%;
	}
	
	div#butt_container.reports-header .filter-group select,
	div#butt_container.orders-header .filter-group select,
	div.s_fields .filter-group select {
		font-size: 14px;
		padding: 0;
		height: 100%;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		flex: 1;
	}
	
	/* Better label positioning for mobile */
	div#butt_container.reports-header .filter-group[data-label]::before,
	div#butt_container.orders-header .filter-group[data-label]::before,
	div.s_fields .filter-group[data-label]::before {
		top: -8px;
		left: 10px;
		padding: 0 6px;
		font-size: 10px;
		font-weight: 600;
		letter-spacing: 0.01em;
		background: #fff;
		color: #475569;
		z-index: 1;
	}
	
	div#butt_container.reports-header .filters-row #run_report_btn,
	div#butt_container.orders-header .filters-row #run_inventory_btn {
		flex: 1 1 0 !important;
		min-width: calc(45% - 5px) !important;
		max-width: none !important;
		width: auto !important;
		margin-top: 0 !important;
		margin-bottom: 10px !important;
		height: 40px !important;
		min-height: 40px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		box-sizing: border-box !important;
		padding: 0 12px !important;
		font-size: 14px !important;
		font-weight: 600 !important;
		border-radius: 8px !important;
		box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2) !important;
		transition: all 0.15s ease !important;
		white-space: nowrap !important;
		position: relative !important;
		top: 0 !important;
		gap: 6px !important;
	}
	
	/* Ensure button text/icon don't force width */
	div#butt_container.reports-header .filters-row #run_report_btn > *,
	div#butt_container.orders-header .filters-row #run_inventory_btn > * {
		flex-shrink: 1 !important;
		min-width: 0 !important;
	}
	
	@media (min-width: 480px) and (max-width: 768px) {
		div#butt_container.reports-header .filters-row #run_report_btn,
		div#butt_container.orders-header .filters-row #run_inventory_btn {
			min-width: calc(30% - 7px) !important;
		}
	}
	
	div#butt_container.reports-header .filters-row #run_report_btn:active,
	div#butt_container.orders-header .filters-row #run_inventory_btn:active {
		transform: translateY(0) !important;
		box-shadow: 0 1px 2px rgba(16, 185, 129, 0.15) !important;
	}
	
	div#butt_container.reports-header .filter-group input {
		width: 100%;
		flex: 1;
	}
	
	div#butt_container.reports-header .filter-group input#start_date,
	div#butt_container.reports-header .filter-group input#end_date {
		width: 100%;
		flex: 1;
	}
	
	/* Multi-select summary text improvements for mobile */
	div#butt_container.reports-header .filter-group.multi-summary .multi-select-summary,
	div#butt_container.orders-header .filter-group.multi-summary .multi-select-summary,
	div.s_fields .filter-group.multi-summary .multi-select-summary {
		font-size: 14px;
		line-height: 1.4;
		flex: 1 1 0 !important;
		min-width: 0 !important;
		max-width: 100% !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		white-space: nowrap !important;
	}
	
	/* Better placeholder styling for mobile */
	div#butt_container.reports-header .filter-group input::placeholder,
	div#butt_container.orders-header .filter-group input::placeholder,
	div.s_fields .filter-group input::placeholder {
		font-size: 14px;
		color: #94a3b8;
	}
	
	/* Improved select dropdown arrow for mobile */
	div#butt_container.reports-header .filter-group.multi-summary::after,
	div#butt_container.orders-header .filter-group.multi-summary::after,
	div.s_fields .filter-group.multi-summary::after {
		right: 12px !important;
		width: 7px;
		height: 7px;
	}
	
	/* Pagination inline wrapper - mobile */
	.pagination-inline-wrapper {
		flex: 0 0 auto !important;
		width: 100%;
		border-left: none;
		border-top: 1px solid rgba(148, 163, 184, 0.25);
		padding-left: 0;
		padding-top: 8px;
		margin-left: 0;
		margin-top: 4px;
		justify-content: space-between;
	}
	
	.pagination-inline-wrapper .pagination-per-page,
	.pagination-inline-wrapper #orders_pagination {
		flex: 0 0 auto !important;
	}
}
div.jBox-content #send_receipt i, div.jBox-content #send_invoice i {
	margin-right: 0px;
    max-width:none;
}
span.first_time {
	display:block;
	margin-top:25px;
}
button#submit1.waiting {
	background: rgba(134, 208, 209, 0.4);
    background: -webkit-linear-gradient(90deg, #e9f2fa 0%, rgb(0 179 255 / 0%) 33%, #e9f2fa 66%, rgb(0 179 255 / 0%) 100%);
    background: -moz-linear-gradient(90deg, #e9f2fa 0%, rgb(0 179 255 / 0%) 33%, #e9f2fa 66%, rgb(0 179 255 / 0%) 100%);
    background: -ms-linear-gradient(90deg, #e9f2fa 0%, rgb(0 179 255 / 0%) 33%, #e9f2fa 66%, rgb(0 179 255 / 0%) 100%);
    background: -o-linear-gradient(90deg, #e9f2fa 0%, rgb(0 179 255 / 0%) 33%, #e9f2fa 66%, rgb(0 179 255 / 0%) 100%);
    background: linear-gradient(90deg, #e9f2fa 0%, rgb(0 179 255 / 0%) 33%, #e9f2fa 66%, rgb(0 179 255 / 0%) 100%);
    background-size: 400% 400%;
    -webkit-animation: gradient 2s linear infinite;
    -moz-animation: gradient 2s linear infinite;
    animation: gradient 2s linear infinite;
}
span.first_time a {
	color: #195894;
}
span.first_time.waiting a, span.first_time.waiting, span.first_time.waiting a:hover {
	color:gray;
	cursor:default;
	text-decoration: none;
}
span.first_time a:hover {
	color: #104577;
	text-decoration:underline;
	cursor:pointer;
}
i.day_notes {
	margin-right:5px;
	margin-left:3px;
}
div.srch_cus {
	display:block;
	padding:5px;
	margin:3px auto;
	width:80%;
	font-weight: bold;
	box-sizing:content-box;
	cursor:pointer;
	border: 1px solid #a4bfd9;
    border-radius: 5px;
}
div.srch_cus:hover {
	border-color:#306495;
}
div.select_cus {
	display:block;
	padding:5px;
	margin:3px auto;
	width:80%;
	font-weight: bold;
	box-sizing:content-box;
	cursor:pointer;
	border: 1px solid #a4bfd9;
    border-radius: 5px;
}
select[name=prep_email].no_style {
	border-bottom:1px solid #CCC;
	font-size:12px;
	margin-top:7px;
}
button.rm_att {
	color: #FFF;
	padding: 0px;
    border: 0px;
	vertical-align: middle;
	margin-left: 8px;
	background: transparent;
	top: -1px;
}
button.rm_att i {
	display:none;
	font-size: 18px;
}
button.rm_att img {
	display:block;
	max-height:23px;
}
button.rm_att:hover img {
	display:none;
}
button.rm_att:hover i {
	display:block;
	color:rgba(102, 0, 0, 0.82);
	cursor:pointer;
}
.progress-ring__circle {
  transition: 0.35s stroke-dashoffset;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
input[name=progress-ring] {
  position: fixed;
  top: 10px;
  left: 10px;
  width: 80px;
}
/* The Split pill now uses the shared `.sch-pill` styling (see
   style.css:23076) so it matches the communication panel's "include"
   pills and the delivery panel pills. The legacy `.draw_split_pill`
   rules that lived here had higher specificity than `.sch-pill` and
   would have masked the circle check indicator + ring transitions —
   replaced by a no-op selector to keep this slot diff-stable. The
   `.draw_split_pill` class is still on the label (alongside
   `.sch-pill`) so the click-stopPropagation selector in main_.js
   keeps working. */
label.draw_split_pill { /* see .sch-pill */ }
table#report_list div.cl_sort i {
	margin-left:2px;
	display:inline-block;
	top: -2px;
    position: relative;
}
div.hrs_file {
	display:inline-block;
	font-size:12px;
	width:75%;
	text-align: center;
}
div.hrs_file input {
	font-size: 14px;
    box-sizing: border-box;
    padding: 10px;
    width: 100%;
    border: 1px dotted #CCC;
}
div.rep_content input.inv_input, div.rep_content select.inv_input, div.rep_content button.inv_input {
	text-align:center;
	font-size:12px;
}
div.rep_content select.inv_input[name=reason] {
	text-align:left;
}
div.rep_content input.form_input, div.rep_content select.form_input, div.rep_content button.form_input {
	text-align:left;
	font-size:12px;
}
div.rep_content button.inv_input {
	cursor:pointer;
	margin-left:4px;
	font-size:11px;
}
div.rep_content button.inv_input:hover {
	background-color: lightblue;
    border: 1px solid #5EA8BB;
}
table#report_list tr.inv_q td, table#report_list tr.inv_form td {
	font-size:12px;
	padding-top: 5px;
    padding-bottom: 5px;
}
tr.inv_q i.delete_hover, tr.inv_form i.delete_hover, tr.inv_form i.dup_hover, tr.inv_form i.link_hover {
	margin-right:5px;
	margin-left:3px;
	font-size:14px;
}
div.form_link {
	display: block;
    text-align: left;
    width: auto;
    padding: 2px;
    font-weight: bold;
}
div.form_link i {
	font-size:14px;
	margin-right:6px;
}
/* Legacy generic add row padding — queue Add uses .inv-queue-add-btn in inventory.css */
div.add_button {
	padding:10px;
}
/* When the queue row renders the real button, don't force block padding on the wrap */
div.inv-queue-add-wrap div.add_button,
div.inv-queue-add-wrap button.add_button {
	padding: 10px 18px;
}
div.inv_cn i, div.inv_jn i, div.inv_dd i {
    margin-right:5px;
}
table#report_list thead {
	padding-top:124px;
}
div.drag i, div.dragged i, div.proj i {
	margin-right:5px;
}
div.prd_name i {
	max-width:none;
}
div.prd_name span {
	font-weight: bold;
}
span.t_type {
	font-size:14px;
	font-weight:normal;
	display:block;
}
span.t_caps {
	font-size:11px;
	font-weight:normal;
	display:block;
}
/* td.emp_name rules removed — now .sch-truck-name in css/dispatch.css */
table#report_list tbody tr.disabled, table#report_list tbody tr.disabled, table#report_list tbody tr.disabled select, table#report_list tbody tr.disabled td.sched_date, table#report_list tbody tr.disabled td.pour_date, table#report_list tbody tr.disabled td.cust_ready, table#report_list tbody tr.disabled td.del_date input, table#report_list tbody tr.disabled td.comments input, table#report_list tbody tr.disabled td.need_date input, table#report_list tbody tr.disabled td.tent_date input, table#report_list tbody tr.disabled td.tent_date, table#report_list tbody tr.disabled span.bar {
	color: #c7c7c7;
    background: transparent;
	border:0px transparent;
}

div.jBox-content .trumbowyg-button-pane button {
	display: block;
    position: relative;
    width: 35px;
    height: 35px;
    padding: 1px 6px !important;
    margin-bottom: 1px;
    overflow: hidden;
    border: none;
    cursor: pointer;
    background: none;
    -webkit-transition: background-color 150ms, opacity 150ms;
    transition: background-color 150ms, opacity 150ms;
	margin-right:0px;
	top:auto;
	color:inherit;
	border-radius:0px;
	float:none;
	margin-top: 0px;
    text-transform: none;
    font-weight: normal;
    font-size: 12px;
}

div.jBox-content .trumbowyg-dropdown-foreColor button, div.jBox-content .trumbowyg-dropdown-backColor button {
	display: block;
    position: relative;
    float: left;
    text-indent: -9999px;
    height: 20px;
    width: 20px;
    border: 1px solid #333;
    padding: 0;
    margin: 2px;
}
table#report_list tr.clicker td {
	cursor:pointer;
}
div.bt_div {
	cursor:pointer;
	padding:12px 15px;
	background-color:#048e34;
}
div.bt_div:hover {
	background:#047d2e;
}
div.jBox-content div.bt_div i {
	font-size:22px;margin:0px;padding:0px;color:#FFF;max-width:none;vertical-align:middle;
}
#ao_table div.drag.task span.user_name, #ao_table div.proj.task span.user_name, #ao_table div.dragged.task span.user_name {
	margin-top: 3px;
    display: block;
}
div.day_scroll {
	position: relative;
    margin-top: -56px;
    font-size: 24px;
	width:500px;
	margin-bottom:10px;
}
div.cal_div div.ui-datepicker-inline {
	margin:0px auto;
}

/* ── Modern datepicker overrides ── */
.ui-datepicker {
	font-family: inherit !important;
	width: 280px !important;
	padding: 8px !important;
	background: #fff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 12px !important;
	box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04) !important;
	z-index: 10001 !important;
}
.ui-datepicker .ui-datepicker-header {
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid #f1f5f9 !important;
	border-radius: 0 !important;
	padding: 6px 0 !important;
}
.ui-datepicker .ui-datepicker-title {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #1e293b !important;
	line-height: 2em !important;
}
.ui-datepicker .ui-datepicker-title select.ui-datepicker-month,
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	border: none !important;
	background-color: transparent !important;
	background-image: none !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #1e293b !important;
	width: auto !important;
	display: inline !important;
	padding: 5px 6px !important;
	margin: 0 1px !important;
	cursor: pointer !important;
	outline: none !important;
	border-radius: 6px !important;
	transition: background-color 0.15s ease !important;
}
.ui-datepicker .ui-datepicker-title select.ui-datepicker-month:hover,
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year:hover {
	background-color: #f1f5f9 !important;
}
.ui-datepicker .ui-datepicker-title select.ui-datepicker-month:focus,
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year:focus {
	background-color: #f1f5f9 !important;
}
.ui-datepicker .ui-datepicker-title select.ui-datepicker-month option,
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year option {
	background-color: #fff !important;
	color: #1e293b !important;
	font-weight: 500 !important;
	padding: 4px 8px !important;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 30px !important;
	height: 30px !important;
	border: none !important;
	border-radius: 8px !important;
	background: transparent !important;
	cursor: pointer !important;
	transition: background 0.15s ease;
}
.ui-datepicker .ui-datepicker-prev {
	left: 4px !important;
}
.ui-datepicker .ui-datepicker-next {
	right: 4px !important;
}
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
	background: #f1f5f9 !important;
}
.ui-datepicker .ui-datepicker-prev-hover {
	top: 50% !important;
	left: 4px !important;
}
.ui-datepicker .ui-datepicker-next-hover {
	top: 50% !important;
	right: 4px !important;
}
.ui-datepicker .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-next .ui-icon {
	background-image: url(css/ui-lightness/images/ui-icons_222222_256x240.png) !important;
}
.ui-datepicker table {
	border-collapse: separate !important;
	border-spacing: 2px !important;
	margin: 4px 0 0 !important;
}
.ui-datepicker th {
	font-size: 11px !important;
	font-weight: 600 !important;
	color: #94a3b8 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.03em !important;
	padding: 6px 4px !important;
}
.ui-datepicker td {
	padding: 1px !important;
}
.ui-datepicker td a.ui-state-default,
.ui-datepicker td span.ui-state-default {
	background: transparent !important;
	border: 1px solid transparent !important;
	border-radius: 8px !important;
	color: #334155 !important;
	font-weight: 500 !important;
	text-align: center !important;
	padding: 6px 4px !important;
	transition: background 0.12s ease, border-color 0.12s ease;
}
.ui-datepicker td a.ui-state-default:hover {
	background: #f1f5f9 !important;
	border-color: #e2e8f0 !important;
	color: #1e293b !important;
}
.ui-datepicker td a.ui-state-active {
	background: #0c4d8b !important;
	border-color: #0c4d8b !important;
	color: #fff !important;
	font-weight: 700 !important;
}
.ui-datepicker td a.ui-state-highlight,
.ui-datepicker td span.ui-state-highlight {
	background: #f0f7ff !important;
	border-color: #0c4d8b !important;
	color: #0c4d8b !important;
	font-weight: 600 !important;
}
.ui-datepicker .ui-datepicker-unselectable .ui-state-default {
	color: #cbd5e1 !important;
}
.ui-datepicker .ui-datepicker-buttonpane {
	border-top: 1px solid #f1f5f9 !important;
	margin-top: 4px !important;
}
#ao_table div.drag span.tic, #ao_table div.proj span.tic, #ao_table div.dragged span.tic {
	line-height:16px;
	text-align:left;
}
table#report_list tr.stype_head, table#report_list tr.stype_head:hover {
	padding:10px 3px;
	font-weight:bold;
	font-size:12px;
	color:#FFF;
	background-color:#0c4d8b;
}
table#report_list tr.stype_head td, table#report_list tr.stype_head:hover td {
	padding:10px 3px;
	font-weight:bold;
	font-size:12px;
	background-color:#0c4d8b;
}
div#dash_map {
	width:calc(100% - 12.5rem);
	height:calc(100vh - 48px);
	margin:0px auto;
	box-sizing: border-box;
    top: 48px;
	position:absolute;
}
div#dash_map.tmt {
	height:85%;
}
span.map_content {
	display:flex;
	position:relative;
	margin-bottom:3px;
	align-items:center;
	font-size:12px;
	column-gap:5px;
}
span.map_content.dest {
	font-size:12px;
	font-weight:bold;
}
span.map_content.driver {
	font-size:16px;
	font-weight:bold;
	cursor:pointer;
	margin-bottom:0px;
}
div.truck_info {
	text-align:left;
}
div.truck_info div.more_info {
	display:none;
	margin-top:3px;
}
i.mi {
	-moz-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    transition: all .3s linear;
	margin-left:5px;font-size:14px;
	margin-right:10px;
	cursor:pointer;
}
i.mi:hover {
	color:#0c4d8b;
}
i.mi.down{
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
}
div.open_map {
	position: absolute;
    margin-left: -13px;
    margin-top: 17px;
    font-size: 14px;
    cursor: pointer;
}
img.driver_circle_thumb {
	border-radius:25px;
	width:30px;
	height:30px;
	vertical-align: middle;
	margin-right:2px;
}
div.map_progress {
	top: 70px;
    position: relative;
    font-size: 1.2em;
    padding: 10px;
	font-weight:normal;
}
div.map_progress table th {
	font-weight:normal;
}
div.map_progress span.time_remain, div.map_progress span.dist_remain {
	font-weight:bold;
}
div.adj_del_qty i {
	display:none;
	position:absolute;
	margin-top:2px;
}
div.adj_del_qty i.more {
	margin-left:10px;
}
div.adj_del_qty i.more:hover {
	color:#0c4d8b;
}
div.adj_del_qty i.less {
	margin-left:-22px;
}
div.adj_del_qty i.less:hover {
	color:red;
}
div.adj_del_qty:hover i {
	display:inline-block;
}
div#dash_map.view_only {
	position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    z-index: 20000;
    left: 0px;
    top: 0px;
}
/* SHIP column text input (decimals mode for SF items). Was a hard
   1px gray underline; replaced with the clean borderless look the
   order-items qty inputs use — transparent bg, no border, slate-800
   text, centered in the column. */
table#dt_table input.dt_qty.no_style {
	border: 0;
	border-bottom: 0;
	background: transparent;
	font-size: 13px;
	font-weight: 600;
	color: #1e293b;
	text-align: center;
	width: 100%;
	padding: 4px 6px;
	border-radius: 5px;
	box-sizing: border-box;
	outline: none;
}
table#dt_table input.dt_qty.no_style:focus {
	background: rgba(12, 77, 139, 0.06);
	box-shadow: inset 0 0 0 1px rgba(12, 77, 139, 0.18);
}
table#dt_table input.dt_qty.no_style::placeholder {
	color: #cbd5e1;
	font-weight: 500;
	font-style: italic;
	letter-spacing: 0.02em;
}
/* The legacy `<span class="bar">` sibling after every .no_style input
   animates a blue underline from 0% → 100% on focus (style.css:3506).
   That fights the new clean focus look — kill the underline width
   animation for the SHIP-column input specifically and hide the bar
   element so it doesn't reserve any visual space. */
table#dt_table input.dt_qty.no_style:focus ~ .bar:after,
table#dt_table input.dt_qty.no_style:focus ~ .bar:before {
	width: 0 !important;
}
table#dt_table input.dt_qty.no_style ~ .bar {
	display: none !important;
}

/* ── Backordered Items section header ──
   Sits between the main shippable lines and the BO line items.
   Old style was a stark red-outlined band (jarring + colspan didn't
   span the full table width). Replaced with a soft amber section
   divider — eyebrow + icon + supporting copy on a tinted band that
   reads as "warning context", not "alert". */
/* Spacer row between the last regular line item and the
   "Backordered items" section header. Tables don't honor margin
   on <tr> / <td>, so the breathing room has to be a dedicated tall
   row. Height (~32px) is the white space the user sees. The cell
   itself stays empty + transparent so it doesn't carry any border
   or row banding from the items above. */
tr.bo_section_break {
	height: 40px !important;
	background: transparent !important;
	background-color: transparent !important;
}
.bo_section_break > td.bo_spacer {
	height: 40px !important;
	min-height: 40px !important;
	line-height: 40px !important;
	padding: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}
/* The spacer row's <tr> needs the same transparent treatment so any
   inherited row striping / hover styling doesn't paint a strip of
   color through the gap. */
tr.bo_section_break {
	background: transparent !important;
	background-color: transparent !important;
}
tr.bo_section_break:hover {
	background: transparent !important;
	background-color: transparent !important;
}
.bo_section_head > td.bo_title {
	padding: 0 !important;
	border: 0 !important;
	border-top: 1px solid rgba(245, 158, 11, 0.40) !important;
	border-bottom: 1px solid rgba(245, 158, 11, 0.40) !important;
	background:
		linear-gradient(180deg,
			rgba(255, 251, 235, 1) 0%,
			rgba(254, 243, 199, 0.7) 100%) !important;
	position: relative;
}
/* 4px amber accent stripe on the left edge of the header band. Drawn
   via inset shadow so it doesn't shift the title's left padding. */
.bo_section_head > td.bo_title {
	box-shadow: inset 4px 0 0 0 #d97706;
}
.bo_title_inner {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px 14px;
	padding: 9px 16px 9px 14px;
}
.bo_title_eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: 'Montserrat', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: #b45309;
}
.bo_title_eyebrow > i {
	font-size: 10px;
	color: #d97706;
}
.bo_title_sub {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: #92400e;
	font-style: italic;
	opacity: 0.85;
}
[data-theme="dark"] .bo_section_head > td.bo_title {
	background:
		linear-gradient(180deg,
			rgba(180, 83, 9, 0.18) 0%,
			rgba(146, 64, 14, 0.10) 100%) !important;
	border-top-color: rgba(245, 158, 11, 0.45) !important;
	border-bottom-color: rgba(245, 158, 11, 0.45) !important;
	box-shadow: inset 4px 0 0 0 #f59e0b;
}
[data-theme="dark"] .bo_title_eyebrow { color: #fbbf24; }
[data-theme="dark"] .bo_title_eyebrow > i { color: #f59e0b; }
[data-theme="dark"] .bo_title_sub { color: #fcd34d; }
div.bo_box {
	vertical-align:middle;
	font-size:12px;
	display:inline-block;
	margin-left:8px;
	position: relative;
}
div.vis_bo {
	position: relative;
    border-radius: 20px;
    border: 1.5px solid #d7a2a2;
    color: #9f2626;
    text-align: center;
    box-sizing: border-box;
    padding: 0px 4px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    top: -.5px;
	min-width: 17px;
}
b.vert {
	vertical-align: middle;
}
div.bo_box span {
	display:none;
	font-size:11px;
	font-weight:normal;
	vertical-align: middle;
	margin-left:5px;
}
div.bo_box:hover span {
	display:inline-block;
}
div.bo_box input {
	min-width: auto;
	width:auto;
	margin:0px;
	vertical-align: middle;
}
span.rs_fee {
	display:none;
}
span.rs_fee input[name=restock] {
	font-size: 12px;
    margin-left: 2px;
    text-align: right;
}
div.pass_valid {
	display:none;
}
div.pass_item i {
	margin-right:5px;
	width: 12px;
}
div.pass_item {
	color:green;
}
div.pass_item.fail {
	color:red;
	background-color:transparent;
}
div.pass_item span.icon {
	text-align: center;
}
table#dt_table tr:not(.moh) td.dt_inv, table#dt_table td.sqft {
	display:none;
}
table#dt_table tr.moh td.dt_inv {
	display:table-cell;
}
table#dt_table tr.moh td.dt_tot {
	display:none;
}
span.ti_span {
	display:block;
}
div#cus_list div.pr_details {
	margin-top:3px;
	cursor:auto;
}
div.pr_details div.pr_field {
	display:inline-block;
	position:relative;
	margin-right:2px;
}
div.pr_details div.pr_cont {
	display:inline-block;
	margin-top:25px;
	position:relative;
	margin-right:1%;
	min-width: 32%;
	box-sizing: border-box;
}
div.pr_details div.pr_cont.bot_pad {
	margin-bottom:15px;
}
div.pr_details div.pr_field label {
	top:-14px;
	left:0px;
}
div.pr_details div.pr_field input, div.pr_details div.pr_field select {
	background:transparent;
	border:0px solid;
	border-bottom: 1px solid #CCC;
  padding: 0px 2px;
	vertical-align: middle;
	margin: 0px;
}
div.pr_details div.pr_field input.no_bar, div.pr_details div.pr_field select.no_bar {
	border-bottom: 0px solid #CCC;
	font-weight: 100;
  font-size: 20px;
}
div.pr_cont span {
	vertical-align: middle;
    font-size: 12px;
}
div.lpb_only span {
	font-weight:bold;
	text-decoration: underline;
}
div.pr_details div.pr_field input[type=checkbox] {
	width:16px;
	height:16px;
}
div.pr_details div.pr_field input[type=checkbox] ~ label {
	top:0px;
	margin-left:3px;
	position:relative;
	vertical-align: middle;
}
span.srch_cus.pr_select:hover, span.srch_cus.pr_select {
	background-color: #eff6ff;
	border-color: #4a9eff;
}
div#cus_list span.srch_cus {
    border-radius: 3px;
}
div.reco_preview {
	width: 400px;
    margin-top: 15px;
    text-align: left;
    max-height: 400px;
    overflow-y: scroll;
}
table#dt_table tr.pallet {
	/* Pallets / "hidden" items are always shown in the delivery panel now
	   (previously display:none — only revealed by dt_type() on the Return
	   ticket type). dt_type() no longer hides them on other types either. */
	display: table-row;
}


span.pm_radio {
	vertical-align: middle;
	margin-right: 5px;
}
div.bank-row.confirmed span.pm_radio {
	margin-right: 7px;
}
div.bank-row.confirmed div.bank_image {
	margin-right: 11px;
}
div.saved-card {
	display:inline-block;
	vertical-align: middle;
	margin-left: 2px;
}
div.card-row, div.bank-row, div.check-row {
	padding: 10px;
	border-style: none;
	background-color: #ffffff;
	box-shadow: 0 6px 9px rgba(50, 50, 93, 0.06), 0 2px 5px rgba(0, 0, 0, 0.08), inset 0 1px 0 #FFF;
	border-radius: 4px;
	margin-bottom:7px;
	text-align: left;
	position: relative;
}
div.card-row, div.check-row, div.bank-row.confirmed {	
	display: flex;
    align-items: center;
}
div.payments div.form-row {
	gap: 0 3px;
}
div.payments div.card-row:hover {
	background-color: #c8dbff1a;
	border-color:#0c4d8b;
}
div.rm_card, div.up_card {
	position: absolute;
	right: 13px;
	top: 12px;
	font-size: 14px;
}
div.form-group div.rm_card, div.form-group div.up_card {
	top: 11px;
}
div.form-group span.pm_radio input {
	margin-top:0px;
}
div.rm_card i, div.up_card i {
	max-width:none;
	cursor:pointer;
	margin: 0px;
}
div.rm_card i:hover {
	color:red;
}
div.up_card {
	right: 30px;
	top: 12px;
	font-size: 12px;
}
div.up_card i:hover {
	color:#0c4d8b;
}
div.saved-card div.card_image, div.bank-row div.bank_image, div.check-row div.check_image {
	width: 24px;
	height: 15px;
	background-size: cover;
	display: inline-block;
	margin-right: 7px;
	vertical-align: middle;
}
div.bank-row div.bank_image {
	width: 12px;
}
div.bank-row.confirmed span.bank_span {
	width: 85%;
    display: inline-block;
}
div.check-row div.check_image {
	margin-right:0px;
	margin-left:2px;
}
div.jBox-content div.new_bank_info input {
	font-weight:normal;
}
div.jBox-content div.bank-element div.bank_image i, div.jBox-content div.check-element div.check_image i {
    max-width:none;
    font-size: 14px;
    color: #bbbbbb;
}
div.jBox-content div.bank-row.confirmed div.bank-element div.bank_image i, div.jBox-content div.check-row div.check-element div.check_image i {
    color: #0c4d8b;
}
div.saved-card span, div.bank-row span, div.bank-element, div.check-row span, div.check-element {
	vertical-align: middle;
}
div.bank-element, div.check-element {
    max-width: 85%;
    display: inline-flex;
	align-items: center;
}
div.bank-row.confirmed div.bank-element {
	width:100%;
}
div.saved-card div.card_image {
	background-image:url('images/cc_logos/generic.png');
}
div.saved-card.visa div.card_image {
	background-image:url('images/cc_logos/visa.png');
}
div.saved-card.mastercard div.card_image {
	background-image:url('images/cc_logos/mastercard.png');
}
div.saved-card.amex div.card_image {
	background-image:url('images/cc_logos/amex.png');
}
div.saved-card.discover div.card_image {
	background-image:url('images/cc_logos/discover.png');
}
div.saved-card.jcb div.card_image {
	background-image:url('images/cc_logos/jcb.png');
}
button.pm_save {
    font-size: 12px;
    border: 1px solid #0c4d8b;
    background-color: transparent;
		padding: 6px 9px 6px 9px;
    margin-right: 0px;
    margin-top: 3px;
    text-transform: uppercase;
    font-weight: 600;
    color: #0c4d8b;
    border-radius: 80px;
    display: inline-block;
    text-align: center;
		transition: all .2s ease-in-out;
		cursor:pointer;
}
button.pm_save span {
  margin-left:5px;
}
button.pm_save:enabled:hover {
  border: 1px solid green;
  background-color: green;
  color:white;
}
button.pm_save:disabled {
  cursor:default;
  background-color: transparent;
  color: rgb(12 77 139 / 41%);
  border: 1px solid rgb(12 77 139 / 41%);
}
div#card-element {
	width: 88%;
	display: inline-block;
	vertical-align: middle;
}

div#card-errors {
	margin-top: 10px;
	color:red;
}

div.ord_totals {
	display:inline-block;
    font-weight:bold;	
}

div.ord_totals {
    display:none;
}

td.top_bord {
    border-top: 1px solid #999;   
}
tr#total i {
    cursor:pointer;
}
table.bol_details tbody tr:nth-child(even) {
    background-color: rgba(180,190,199,0.23);
}
div.current_bol a {
	padding: 7px 12px;
    display: inline-block;
    border-radius: 5px;
    border: 1px solid;
    margin-bottom: 10px;
    font-weight: bold;
    color: #0c4d8b;
}
div.current_bol a:hover {
	color:white;
	background-color:#0c4d8b;
	text-decoration: none;
}
div.inv_hist_cont {
	box-sizing:border-box;
	width:100%;
	text-align:center;
	background: rgb(12 77 139 / 17%);
}
div.inv_hist {
	box-sizing:border-box;
	text-align:left;
	margin:0px auto;
	display:inline-block;
	padding:6px;
}
div.inv_hist_row {
	box-sizing:border-box;
	text-align:left;
	padding:2px;
}
.jBox-Modal.no_pad .jBox-content {
    padding: 0px;
}
div.dc_content div.prdi_items {
	background:none;
	border:0px solid rgb(116 116 116 / 36%);
	font-size: 12px;
}
div.dc_content div.prdi_items div.psrch_res {
	grid-template-columns: 1fr;
}
div.dc_content div.prdi_items div.psrch_res span.srch_cus {
	padding: 8px 12px;
}
div.dc_content .prdi_items:hover {
	background-color:none;
	border:0px;
}
table#reco_preview i {
	max-width:none;
	font-size:12px;
	padding: 2px 6px;
	height:auto;
	margin:0px;
}
table#reco_preview thead {
	font-weight:bold;
}
table#reco_preview tbody tr.new_day td {
	padding-top:6px;
}
table#reco_preview thead tr {
	background: #0c4d8b; /* rgba(49, 97, 122, 0.5);*/
	color:white;
}
table#reco_preview thead tr td {
	padding: 5px 3px;
}
table#reco_preview tr.caution {
	background: rgb(255 171 18 / 47%);
}
table#reco_preview tr.error {
	background: rgb(193 0 0 / 52%);
}
table.dlo_table {
	padding: 15px;
    width: 700px;
	left: 30px;
    position: relative;
}
table#dt_table tr.grp.selected td, table#dt_table tr.grp.cd1.selected td {
	background-color: rgb(255 227 164 / 85%);
}
tr#dlo {
	background-color: rgb(247 229 170 / 58%);
}
i.dlo_caret {
  	-moz-transition: transform .5s;
  	-webkit-transition: transform .5s;
  	transition: transform .5s;
	font-size: 12px;
	color: #0c4d8b;
}
div.qb_int.terms_only {
	width:350px;
	display:inline-block;
}
div#ccfee_amt {
	margin-top:10px;
	font-weight:bold;
	font-size: 11px;
}
i.clear_all {
	display:inline-block;
	font-size: 18px;
    vertical-align: middle;
	cursor:pointer;
}
div#inv_table div.thead div.td i.clear_all {
	display:none;
}
i.clear_all:hover {
	color:red;
}
div#inv_table div.cl_sort {
	display: inline-block;
    vertical-align: middle;
}
i.link_order {
	margin-left:10px;
	font-size:11px;
	vertical-align: middle;
	color: #0c4d8b;
	cursor:pointer;
}
i.link_order:hover {
	color: #103252;
}
div#cat-notes {
    border: 1px solid rgb(204 0 0 / 40%);
    background: #fafbfc;
	margin:0px auto;
	margin-top: 14px;
	margin-left:10px;
	display:inline-block;
	padding: 4px 10px;
	border-radius: 5px;
	color:#9e232e;
	font-size:.9rem;
	max-width:40%;
	text-align:center;	
}
.no-tent-date {
	background-color:orange;
}
button.pay_rpt i {
	font-size:16px !important;
	color: rgb(0 51 102 / 76%) !important;
}
button.pay_rpt {
	margin-left:4px !important;
}
div.clear_all {
	float:right;
}
div.clear_all i {
	cursor:pointer;
}
div.tt-ops button {
	border:1px solid;
	margin-top:0px;
}
div.tt-ops button:disabled, div.tt-ops button:disabled:hover {
	color: gray;
	background-color:transparent;
	cursor:default;
}
div.qc_add input.transfer_input {
	border-bottom: 1px solid #999;
    width: auto;
    padding: 0.2rem 0rem;
    font-size: 1rem;
}
div.transfer-ticket, div.transfer-ticket-list {
	position:relative;
	display:inline-block;
	margin-top: 10px;
}
div.transfer_loading {
	display:none;
	width: 100%;
    font-size: 8rem;
	padding: 3rem;
    box-sizing: border-box;
}
div.transfer_loading i {
	margin: 0px;
    max-width: none;
    color: #d7d7d7;
    padding: 0px;
}
div.ext-rebar {
	background: url(images/svg/ext-rebar.svg);
	width: 117px;
    height: 37px;
    background-size: contain;
    background-repeat: no-repeat;
    left: 167px;
    top: -51px;
    position: absolute;
}
div.ext-rebar-arrow {
	background:url(images/svg/rebar-arrow.svg);
	width: 120px;
    height: 55px;
    background-size: contain;
    background-repeat: no-repeat;
    top: -33px;
    left: 152px;
    position: absolute;
}
div.pvc-cam-arrow {
    background: url(images/svg/pvc-cam-arrow.svg);
    width: 118px;
    height: 53px;
    background-size: contain;
    background-repeat: no-repeat;
    top: 68px;
    left: -118px;
    position: absolute;
}
div.ext-rebar-div, div[name=conduit], div[name=rebar], select[name=b_ring], select[name=con_dist], select[name=jbolts], input[name=j_dist] {
	z-index: 5;
}
div.ground-wire {
    background: url(images/svg/ground-wire.svg);
    width: 360px;
    height: 370px;
    background-repeat: no-repeat;
    background-size: contain;
    left: 45px;
    position: absolute;
    top: -370px;
}
img.report-ticket-photo {
	max-height:35px;
	margin: 0px 1px;
}
img.report-ticket-photo-small {
	max-height:25px;
	margin: 0px 1px;
}
img.img-popup {
	max-width:570px;
	max-height:570px;
	height:100%;
}
div.del_email_check div.intro_div {
	font-size: 14px;
    margin-bottom: 15px;
    line-height: 20px;
}
div.del_email_check div.contact_select {
	display:inline-block;
}
div.del_email_check div.contact_select span.select2-selection {
	border: 1px solid rgb(12 77 139 / 38%);
}
div.del_email_check div.contact_select span.select2-selection__rendered, div.del_email_check div.contact_select .select2-container--default .select2-selection__placeholder {
	color: #0c4d8b;
    font-weight: bold;
}
span#search_qbcategory span.select2-container--default .select2-selection, span#search_qbcategory input {
	border:0px;
}
span#search_qbcategory span.select2-container--default .select2-selection {
	border-bottom:1px solid #999;
	border-radius:0;
}
span.select2-container {
	z-index: 10000;
}
div#qb_err svg {
	opacity:0.5;
	margin:10px auto;
	height:100px;
	display:block;
}
div#qb_err svg path {
	fill: rgb(0, 0, 0);
}
div#send_inv.send_inv, div#send_stmt.send_stmt {
	border: 1px solid #97c99b;
    border-radius: 30px;
    background: #ddf6df;
}
div#send_inv.send_inv:hover, div#send_stmt.send_stmt:hover {
	border: 1px solid lightgray;
    background: #ebebeb;
	color:gray;
}
span.inv_loading {
	margin-left:8px;
	position:relative;
	display:inline-block;
}
div.live_inv.inv_loading {
	color:#CCC;
}

tr.tax_totals td {
	border-top: 1px dashed #666;
}

div.gm-style-iw-t div.gm-style-iw {
	display:flex;
	align-items: center;
	flex-direction: row-reverse;
}
div.gm-style-iw-chr {
	display:flex;
    max-width: 50px;
    margin-left: -12px;
}
div.gm-style-iw-d {
	overflow:hidden !important;
	padding-top:10px;
	padding-bottom:10px;
}
div.pr_button {
	display:inline-block;
	margin-right:8px;
}
div.pr_buttons {
	display:flex !important;
	align-items:center;
	gap: 10px;
    flex-wrap: wrap;
}

@media only screen and (min-width: 0rem) {
	body {
		padding:0px;
	}
	div#menu {
		display:none;
    	width: 165px;
		height:auto;
		left:-165px;
		right:0;
	}		
    div#all_orders.invoices div#inv_table.send_inv div.inv_act, div#all_orders.invoices div#inv_table.send_stmt div.inv_act {
        width:7.5%;
    }
    div#all_orders.invoices div.inv_act {
        width:24.5%;
    }
    div#all_orders div.inv_act {
        width:21%;
    }	
    div#all_orders.invoices div.inv_jn {
        width:25%;
    }
    div#all_orders.invoices div#inv_table.send_inv div.inv_jn, div#all_orders.invoices div#inv_table.send_stmt div.inv_jn {
        width:35%;
    }
    div#all_orders div.inv_jn {
        width:28%;
    }
	div#order_buttons {
		width:95%;
	}
	div#all_orders {
		width:95%;
		max-height:none;
		overflow:visible;
		overflow-y:visible;
	}
	div#inv_table {
		padding-top:44px;
		width:100%;
	}
	table#table2.acc_table {
		padding-top:44px;
		width:100%;
	}
	div#inv_table div.thead {
		display:none;
	}
	div#m_open {
		display:inline-block;
	}
	div#inv_table div.td {
        display: inline-flex;
        min-width: 48%;
		padding: 6px 3px;
	}
	div#inv_table div.td.inv_act {
        display: inline-block;
	}
	div#inv_table div.tbody div.tr {
		padding: 10px;
	}
	div#inv_table div.td.inv_num {
		padding: 6px 3px;
		font-weight:bold;
		font-size:20px;
	}
	div.inv_cn i, div.inv_jn i, div.inv_dd i {
		display:inline-block;
	}
	div#inv_table div.td.inv_total {
		font-weight:bold;
		font-size:14px;
	}
	div#ord_form {
		width:100%;
	}
	/* (notify_content positioning is owned by the .nx-* block — legacy
	   width/left overrides removed.) */
	div.s_fields {
		width:100%;
		text-align:center;
		float:none;
		clear:both;
	}
	span.group {
		margin-top: 10px;
	}
	div#butt_container {
		padding-left:0px;
	}
	div#mob_head {
		display:inline-block;
	}
	div#page_title i {
		display:none;
	}
	div.lm_container {
        left: 0;
        border-radius: 8px;
        padding: 6px;
        margin-bottom: 10px;
		margin-top:10px;
        background-color: transparent;
        color: gray;
    	border: 0px solid rgba(128, 128, 128, 0.17);
	}
	div.lm_container:hover {
		background-color: #038309;
        color: #FFF;
	}
	div#load_all {
		display:none;
	}
	table#ao_table {
		width:100%;
		float:none;
	}
	div#notify, div#send_inv, div#send_stmt, div#search, div#mess, div#go_dash_map, div#new_quote, div#new_so, div#new_stock, div#load_all, div#m_open, div#scan_item, div#transfer, div#excel, div#new_cus, div#print_rep, div#bt_down {
		top:0px;
	}
}

@media only screen and (min-width: 40rem) {
	body {
		padding:0px;
	}
	div#menu {
		display:none;
    	width: 165px;
		height:auto;
		left:-165px;
		right:0;
	}
	div#order_buttons {
		width:95%;
	}
	div#all_orders {
		width:95%;
		max-height:none;
		overflow:visible;
		overflow-y:visible;
	}
	div#inv_table {
		padding-top:44px;
		width:100%;
	}
	table#table2.acc_table {
		padding-top:44px;
		width:75%;
	}
	div.rep_content {
		padding-top:120px;
	}
	div#inv_table div.thead {
		display:none;
	}
	div#m_open {
		display:inline-block;
	}
	div#inv_table div.td {
        display: inline-flex;
        min-width: 45%;
		padding: 6px 3px;
	}
	div#inv_table div.td.inv_act {
        display: inline-block;
	}
	div#inv_table div.tbody div.tr {
		padding: 10px;
	}
	div#inv_table div.td.inv_num {
		padding: 6px 3px;
		font-weight:bold;
		font-size:20px;
	}
	div#inv_table div.td.inv_total {
		font-weight:bold;
		font-size:14px;
	}
	div.inv_cn i, div.inv_jn i, div.inv_dd i {
		display:inline-block;
	}
	div#ord_form {
		max-width:100%;
	}
	/* (notify_content positioning owned by .nx-* block — legacy mid
	   breakpoint width/left overrides removed.) */
	div.s_fields {
		width:100%;
		text-align:center;
		float:none;
		clear:both;
	}
	span.group {
		margin-top: 0px;
	}
	div#page_title i {
		display:none;
	}
	div#butt_container {
		padding-left:0px;
	}
	div#mob_head {
		display:inline-block;
	}
	div.lm_container {
        left: 0;
        border-radius: 8px;
        padding: 6px;
        margin-bottom: 10px;
		margin-top:10px;
        background-color: transparent;
        color: gray;
    	border: 0px solid rgba(128, 128, 128, 0.17);
	}
	div.lm_container:hover {
		background-color: #038309;
        color: #FFF;
	}
	div#load_all {
		display:inline-block;
	}
	table#ao_table {
		width:850px;
	}
	div#notify, div#send_inv, div#send_stmt, div#search, div#mess, div#go_dash_map, div#new_quote, div#new_so, div#new_stock, div#load_all, div#m_open, div#scan_item, div#transfer, div#excel, div#print_rep, div#new_cus, div#bt_down {
		top:0px;
	}
}

/* Floating mobile selection bar — hidden by default, shown via JS */
.mobile-sel-bar {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	padding-bottom: max(12px, env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: blur(16px) saturate(180%);
	backdrop-filter: blur(16px) saturate(180%);
	border-top: 1px solid rgba(148, 163, 184, 0.25);
	box-shadow: 0 -4px 24px rgba(15, 23, 42, 0.08);
	transform: translateY(100%);
	transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-sel-bar.visible {
	transform: translateY(0);
}
.mobile-sel-bar .mobile-pay-sel {
	margin-left: auto !important;
	flex-shrink: 0;
}

@media only screen and (max-width: 69.999rem) {
	/* Invoices: modern mobile/tablet cards (desktop keeps its table layout) */
	div#inv_table div.tbody div.tr:first-child {
		margin-top: 0;
	}
	div#inv_table div.tbody div.tr {
		padding: 12px;
		margin: 8px 0;
		border-radius: 14px;
		border: 1px solid rgba(148, 163, 184, 0.45);
		border-left: 4px solid rgba(148, 163, 184, 0.45);
		background: #ffffff;
		box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
		position: relative;
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"invnum invtotal"
			"customer customer"
			"job job"
			"due due"
			"actions actions";
		gap: 10px 12px;
		cursor: pointer;
		transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
	}
	div#inv_table div.tbody div.tr.paid {
		cursor: default;
	}
	div#inv_table div.tbody div.tr.selected {
		border-left: 4px solid #0c4d8b;
		background-color: #f0f7ff;
		box-shadow: 0 6px 20px rgba(12, 77, 139, 0.10);
	}

	div#inv_table div.tbody div.td {
		display: block;
		width: auto;
		min-width: 0;
		padding: 0;
	}

	div#inv_table div.tbody div.td.inv_num { grid-area: invnum; }
	div#inv_table div.tbody div.td.inv_cn { grid-area: customer; }
	div#inv_table div.tbody div.td.inv_jn { grid-area: job; }
	div#inv_table div.tbody div.td.inv_dd { grid-area: due; }
	div#inv_table div.tbody div.td.inv_total { grid-area: invtotal; }
	div#inv_table div.tbody div.td.inv_act { grid-area: actions; }

	div#inv_table div.tbody div.td.inv_num,
	div#inv_table div.tbody div.td.inv_cn,
	div#inv_table div.tbody div.td.inv_jn,
	div#inv_table div.tbody div.td.inv_dd {
		display: flex;
		flex-direction: column;
		gap: 2px;
		color: #0f172a;
	}
	div#inv_table div.tbody div.td.inv_total {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 2px;
		color: #0c4d8b;
		font-variant-numeric: tabular-nums;
	}

	div#inv_table div.tbody div.td.inv_num::before { content: "Invoice"; }
	div#inv_table div.tbody div.td.inv_cn::before { content: "Customer"; }
	div#inv_table div.tbody div.td.inv_jn::before { content: "Job"; }
	div#inv_table div.tbody div.td.inv_dd::before { content: "Due"; }
	div#inv_table div.tbody div.td.inv_total::before { content: "Balance"; }

	div#inv_table div.tbody div.td.inv_num::before,
	div#inv_table div.tbody div.td.inv_cn::before,
	div#inv_table div.tbody div.td.inv_jn::before,
	div#inv_table div.tbody div.td.inv_dd::before,
	div#inv_table div.tbody div.td.inv_total::before {
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: #64748b;
	}

	/* Hide checkbox on mobile — tap card to select instead */
	div#inv_table div.tbody div.tr input[name="multi"] {
		display: none;
	}

	/* Remove spacer used for desktop alignment */
	div#inv_table div.tbody div.td.inv_num span[style*="width:20px"] {
		display: none !important;
	}

	/* Replace icon-as-label with actual labels */
	div#inv_table div.tbody div.inv_cn i,
	div#inv_table div.tbody div.inv_jn i,
	div#inv_table div.tbody div.inv_dd i {
		display: none;
	}
	div#inv_table div.tbody div.inv_cn > div {
		font-weight: 700;
	}

	div#inv_table div.tbody div.td.inv_num {
		font-weight: 800;
		font-size: 16px;
		line-height: 1.15;
	}
	div#inv_table div.tbody div.td.inv_total {
		font-weight: 900;
		font-size: 16px;
		line-height: 1.15;
	}

	/* Statement mode "open invoices" badge */
	div#inv_table div.tbody span.open_inv {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 28px;
		min-width: 28px;
		padding: 0 10px;
		border-radius: 999px;
		background: rgb(223 240 255);
		border: 1px solid rgb(122 172 220);
		color: #0c4d8b;
		font-weight: 900;
	}

	/* Actions row */
	div#inv_table div.tbody div.td.inv_act {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		gap: 8px;
		flex-wrap: wrap;
		padding-top: 10px;
		border-top: 1px solid #f1f5f9;
	}
	div#inv_table div.tbody div.td.inv_act button.upload,
	div#inv_table div.tbody div.td.inv_act button.snd_inv,
	div#inv_table div.tbody div.td.inv_act button.snd_receipt,
	div#inv_table div.tbody div.td.inv_act button.print_rcpt,
	div#inv_table div.tbody div.td.inv_act button.snd_history,
	div#inv_table div.tbody div.td.inv_act button.tic_photos,
	div#inv_table div.tbody div.td.inv_act button.update_inv,
	div#inv_table div.tbody div.td.inv_act button.del_inv,
	div#inv_table div.tbody div.td.inv_act button.portal-photos {
		margin: 0;
	}
	div#inv_table div.tbody div.td.inv_act div.pdf_prog {
		margin-left: 0;
	}

	div#inv_table div.tbody div.td.inv_act button.view,
	div#inv_table div.tbody div.td.inv_act button.pay,
	div#inv_table div.tbody div.td.inv_act span.paid,
	div#inv_table div.tbody div.td.inv_act span.pending {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		width: auto;
		min-width: 96px;
		height: 38px;
		border-radius: 12px;
		padding: 0 14px;
		margin: 0;
		font-size: 13px;
		font-weight: 600;
		line-height: 1;
		box-sizing: border-box;
	}
	div#inv_table div.tbody div.td.inv_act button.view,
	div#inv_table div.tbody div.td.inv_act button.pay {
		border: none;
	}

	/* Keep legacy checkbox sizing if other checkboxes exist */
	div#inv_table div.tbody div.td.inv_num input[type="checkbox"]:not([name="multi"]) {
		width: 18px;
		height: 18px;
		accent-color: #0c4d8b;
	}

	/* Mobile selection bar child styles */
	.mobile-sel-all {
		display: inline-flex;
		align-items: center;
		align-self: center;
		gap: 8px;
		cursor: pointer;
		font-weight: 600;
		color: #334155;
		font-size: 14px;
		line-height: 1;
		margin: 0;
	}
	.mobile-sel-all input[type="checkbox"] {
		width: 20px;
		height: 20px;
		margin: 0;
		vertical-align: middle;
		accent-color: #0c4d8b;
		border-radius: 4px;
		flex-shrink: 0;
	}
	.mobile-sel-all span {
		line-height: 1;
	}
	.mobile-sel-count {
		display: inline-flex;
		align-items: center;
		align-self: center;
		flex: 1;
		color: #64748b;
		font-size: 13px;
		font-weight: 500;
		line-height: 1;
	}
	.mobile-pay-sel {
		margin-left: auto;
		display: none;
		align-items: center;
		justify-content: center;
		gap: 6px;
		padding: 10px 20px;
		border-radius: 999px;
		border: none;
		background: linear-gradient(135deg, #0c4d8b 0%, #1565b8 100%);
		color: #fff;
		font-size: 14px;
		font-weight: 600;
		line-height: 1;
		cursor: pointer;
		box-shadow: 0 2px 10px rgba(12, 77, 139, 0.3);
		transition: transform 0.1s, box-shadow 0.1s;
	}
	.mobile-pay-sel i {
		font-size: 14px;
		line-height: 1;
	}
	.mobile-pay-sel:active {
		transform: scale(0.97);
		box-shadow: 0 1px 4px rgba(12, 77, 139, 0.2);
	}

	/* Filter toggle active state */
	#filter_toggle.active {
		color: #0c4d8b;
		background-color: rgba(12, 77, 139, 0.1);
	}

}

/* Invoices pagination — always inline */
.inv-hidden { display: none !important; }
#invoices_pagination_container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	padding: 10px 8px;
	flex-wrap: nowrap;
}
#invoices_per_page_selector {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
	font-size: 11px;
	color: #64748b;
	white-space: nowrap;
}
#invoices_per_page_selector .pagination-select {
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	padding: 4px 4px;
	font-size: 11px;
	color: #0c4d8b;
	background-color: #fff;
	font-weight: 500;
	min-width: 36px;
}
#invoices_per_page_selector .pagination-per-page-label {
	font-size: 11px;
}
#invoices_pagination .pagination-controls {
	display: flex;
	align-items: center;
	gap: 0;
}
#invoices_pagination .pagination-btn {
	background: transparent;
	border: none;
	padding: 4px 6px;
	cursor: pointer;
	color: #64748b;
	font-size: 13px;
	border-radius: 6px;
	display: flex;
	align-items: center;
}
#invoices_pagination .pagination-pages {
	display: flex;
	align-items: center;
	gap: 0;
}
#invoices_pagination .pagination-page {
	background: transparent;
	border: none;
	padding: 4px 6px;
	cursor: pointer;
	font-size: 12px;
	color: #64748b;
	border-radius: 6px;
	font-weight: 500;
	min-width: 24px;
	text-align: center;
}
#invoices_pagination .pagination-page.active {
	color: #fff;
	background: #0c4d8b;
	font-weight: 600;
}
#invoices_pagination .pagination-page.ellipsis {
	cursor: default;
	padding: 4px 2px;
	color: #94a3b8;
	min-width: auto;
}

@media only screen and (min-width: 70rem) {
	body {
		padding-left:0px !important;
	}
	div#menu {
		display:block;
		width: 165px;
		height:100%;
		left:0px;
	}
	div#order_buttons {
		width:900px;
	}
	div#all_orders {
		width:900px;
		overflow:hidden;
		overflow-y:auto;
	}
	div#all_orders.invoices {
		width:940px;
		overflow:hidden;
		overflow-y:auto;
	}
	div#inv_table {
		padding-top:110px;
		width:900px;
	}
	div#all_orders.invoices div#inv_table {
		width:940px;
	}
	table#table2.acc_table {
		padding-top:80px;
		width:540px;
	}
	div.rep_content {
		padding-top:77px;
	}
	div#inv_table div.thead {
		display:block;
	}
	div#m_open {
		display:none;
	}
	div#inv_table div.td {
        display: inline-flex;
        min-width:auto;
		padding: 12px 3px;
	}
	div#inv_table.send_inv div.tbody div.td, div#inv_table.send_stmt div.tbody div.td {
		padding: 4px 3px;
	}
	div#inv_table div.tbody div.tr {
		padding: 0px;
	}
	div#inv_table div.td.inv_num {
		font-weight:normal;
		font-size:12px;
		padding: 6px 0px 6px 12px !important;
	}
	div#inv_table div.td.inv_total {
		font-weight:normal;
		font-size:12px;
	}
	div.inv_cn i, div.inv_jn i, div.inv_dd i {
		display:none;
	}
	div#ord_form {
		max-width:98%;
	}
	/* (notify_content positioning owned by .nx-* block — legacy desktop
	   width/left overrides removed.) */
	div.s_fields {
		text-align:right;
	}
	span.group {
		margin-top: 0px;
	}
	div#butt_container {
		padding-left:0px;
		left:auto;
		width: calc(100% - 12.5rem);
		z-index: 100;
	}
	div#mob_head {
		display:none;
	}
	div#page_title i {
		display:inline-block;
	}
	div.lm_container, div.lm_container:hover {
		display: none;
        left: 165px;
        border-top-right-radius: 0px;
        border-top-left-radius: 0px;
        padding: 6px 5px 7px 5px;
        margin: 0px auto;
        background-color: #038309;
        color: #FFF;
    	border: 0px;
	}
	table#ao_table {
		width:900px;
	}
	div#notify, div#send_inv, div#send_stmt, div#search, div#mess, div#go_dash_map, div#new_quote, div#new_so, div#new_stock, div#load_all, div#m_open, div#scan_item, div#transfer, div#excel, div#print_rep, div#new_cus, div#bt_down {
		top:0px;
	}
}

@media only screen and (min-width: 1500px) {

}

/* Quoted Orders Modal Styles */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal-content {
	background: white;
	border-radius: 8px;
	max-width: 900px;
	width: 90%;
	max-height: 80vh;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	position: relative;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
	.modal-content {
		width: 95%;
		max-width: 95vw;
	}
	
	.order-item {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
	
	.order-main-info {
		width: 100%;
		gap: 12px;
	}
	
	.order-details {
		width: 100%;
		min-width: auto;
		justify-content: space-between;
	}
	
	.customer-name {
		max-width: none;
	}
}

.modal-header {
	padding: 20px 25px;
	border-bottom: 1px solid #e5e5e5;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #f8f9fa;
}

.modal-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: #333;
	flex:1;
}

.modal-header h3 i {
	margin-right: 8px;
	color: #0c4d8b;
}

.clickable_tax_code td {
	cursor: pointer !important;
}
    
/* Tax code row styling */
tr.clickable_tax_code:hover {
	background-color: #f0f8ff !important;
}
/* 
.clickable_tax_code td {
	transition: background-color 0.2s ease;
} */

.modal-close {
	background: none;
	border: none;
	font-size: 24px;
	color: #999;
	cursor: pointer;
	padding: 0;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: all 0.2s ease;
}

.modal-close:hover {
	background: #e5e5e5;
	color: #666;
}

.modal-body {
	padding: 20px;
	max-height: 65vh;
	overflow-y: auto;
}

.loading-state, .empty-state-modal, .error-state {
	text-align: center;
	padding: 40px 20px;
}

.loading-state i {
	font-size: 24px;
	color: #0c4d8b;
	margin-bottom: 15px;
}

.empty-state-modal h4 {
	margin: 0 0 10px 0;
	color: #666;
	font-size: 16px;
}

.empty-state-modal p {
	margin: 0;
	color: #999;
}

.orders-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.order-item {
	border: 1px solid #e5e5e5;
	border-radius: 6px;
	padding: 12px 16px;
	cursor: pointer;
	transition: all 0.2s ease;
	background: white;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	box-sizing: border-box;
	color: #666;
}

.order-item:hover {
	border-color: #0c4d8b;
	box-shadow: 0 2px 8px rgba(12, 77, 139, 0.1);
	transform: translateY(-1px);
}

.order-main-info {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 1;
}

.order-number {
	font-weight: 600;
	color: #0c4d8b;
	font-size: 16px;
	min-width: 80px;
}

.customer-name {
	font-weight: 500;
	color: #333;
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	max-width: 250px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.customer-name i {
	color: #0c4d8b;
}

.order-details {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 13px;
	color: #666;
	min-width: 280px;
	flex-shrink: 0;
}

.order-details span {
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.order-details .quantity {
	min-width: 120px;
	flex-shrink: 0;
	text-align: left;
}

.order-details .sales-person {
	min-width: 150px;
	flex-shrink: 0;
	text-align: left;
}

/* Ensure consistent spacing between columns */
.order-details .quantity,
.order-details .sales-person {
	padding-right: 10px;
}

.order-details i {
	color: #999;
	width: 16px;
	text-align: center;
	margin-right: 6px;
}

/* Make status-quoted clickable */
.status-quoted, .status-available {
	cursor: pointer;
	transition: all 0.2s ease;
}

.status-quoted:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.status-quoted .status-value:not(:empty) {
	position: relative;
}

/* Tooltip message */
.tooltip-message {
	position: absolute;
	bottom: -35px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.8);
	color: white;
	padding: 6px 12px;
	border-radius: 4px;
	font-size: 12px;
	white-space: nowrap;
	z-index: 1000;
}

.tooltip-message:before {
	content: '';
	position: absolute;
	top: -5px;
	left: 50%;
	transform: translateX(-50%);
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid rgba(0, 0, 0, 0.8);
}

/* Modern Sidebar Menu Styling */
/* Menu nav item styling */
.menu-nav-item {
	margin-bottom: 0.125rem;
}

.menu-nav-item a.nav-link {
	display: flex;
	align-items: center;
	padding: 0.625rem 0.875rem;
	border-radius: 0.5rem;
	text-decoration: none;
	color: #64748b;
	transition: background-color 0.2s ease, color 0.2s ease;
	font-family: 'Inter', sans-serif;
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	position: relative;
}

.menu-nav-item a.nav-link:hover {
	color: #0c4d8b;
	background-color: rgba(12, 77, 139, 0.06);
}

/* Sidebar hover accent bar (desktop sidebar only) */
nav.bg-menu-theme.main_menu .menu-nav-item a.nav-link:not(.active)::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 0;
	background: #0c4d8b;
	border-radius: 0 2px 2px 0;
	transition: height 0.2s ease;
}

nav.bg-menu-theme.main_menu .menu-nav-item a.nav-link:not(.active):hover::before,
nav.bg-menu-theme.main_menu .menu-nav-item a.nav-link:not(.active):focus-visible::before {
	height: 60%;
}

/* Click / active press state */
nav.bg-menu-theme.main_menu .menu-nav-item a.nav-link:not(.active):active {
	background-color: rgba(12, 77, 139, 0.12);
	color: #0c4d8b;
	transform: scale(0.97);
	box-shadow: inset 0 0 0 1.5px rgba(12, 77, 139, 0.18);
	transition: transform 0.06s ease, background-color 0.06s ease, box-shadow 0.06s ease;
}
nav.bg-menu-theme.main_menu .menu-nav-item a.nav-link:not(.active):active::before {
	height: 100%;
	background-color: #0c4d8b;
	transition: height 0.06s ease;
}
nav.bg-menu-theme.main_menu .menu-nav-item a.nav-link:not(.active):active i.menu-icon {
	color: #0c4d8b;
	transform: scale(1.1);
	transition: transform 0.06s ease;
}

/* Keep a clear focus style for keyboard users */
nav.bg-menu-theme.main_menu .menu-nav-item a.nav-link:not(.active):focus-visible {
	outline: 2px solid rgba(12, 77, 139, 0.2);
	outline-offset: -2px;
}

.menu-nav-item a.nav-link.active {
	background: linear-gradient(135deg, rgba(12, 77, 139, 0.1) 0%, rgba(12, 77, 139, 0.05) 100%);
	color: #0c4d8b;
	font-weight: 600;
}

.menu-nav-item a.nav-link.active::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 60%;
	background: #0c4d8b;
	border-radius: 0 2px 2px 0;
	/* FINITE on purpose (do not restore `infinite`): an infinite opacity
	   pulse repaints the active-nav accent every frame forever, forcing
	   continuous GPU compositing on every page. Pulse a few times, then idle. */
	animation: accent-pulse 3s ease-in-out 4;
}

@keyframes accent-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

.nav-link {
    display: block;
    padding: 0.625rem 0.875rem;
    color: #64748b;
    text-decoration: none;
    transition: all 0.15s ease;
	margin: 0.0625rem 0;
	font-family: 'Inter', sans-serif;
	font-size: 0.875rem;
	font-weight: 500;
	border-radius: 0.5rem;
}

.nav-link.active {
    background: linear-gradient(135deg, rgba(12, 77, 139, 0.1) 0%, rgba(12, 77, 139, 0.05) 100%);
	color: #0c4d8b;
	font-weight: 600;
}

.nav-item i.menu-icon, .menu-nav-item i.menu-icon {
	width: 1.25rem;
	font-size: 1rem;
	opacity: 0.85;
	transition: color 0.2s ease, opacity 0.2s ease;
}

.menu-nav-item a.nav-link:hover i.menu-icon,
.menu-nav-item a.nav-link.active i.menu-icon {
	opacity: 1;
}

nav.bg-menu-theme.main_menu .menu-nav-item a.nav-link:hover i.menu-icon,
nav.bg-menu-theme.main_menu .menu-nav-item a.nav-link:focus-visible i.menu-icon {
	color: #0c4d8b;
}

@media (prefers-reduced-motion: reduce) {
	nav.bg-menu-theme.main_menu .menu-nav-item a.nav-link,
	nav.bg-menu-theme.main_menu .menu-nav-item a.nav-link::before {
		transition: none !important;
		animation: none !important;
	}
}

.layout-page {
    display: flex;
    flex: 1 1 auto;
    align-items: flex-start;
    padding: 0;
    width: 100%;
    min-height: 100vh;
}

.content-wrapper {
    /* display: flex;
    align-items: flex-start;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: flex-start; */
    width: 100%;
    padding-bottom: 0 !important;
}

.bg-menu-theme {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    color: #64748b;
	border-right: 1px solid rgba(226, 232, 240, 0.8) !important;
}

.nav-link:not(.active):hover {
    background-color: rgba(12, 77, 139, 0.06);
	color: #0c4d8b;
}

.link-gray {
	color: #64748b;
}

/* Sidebar header styling */
nav.bg-menu-theme.main_menu > span:first-child {
	padding-bottom: 0rem;
}

nav.bg-menu-theme.main_menu > hr {
	border-color: rgba(226, 232, 240, 0.6);
	margin: 0.75rem 0;
}

/* Sidebar section label */
.menu-section-label {
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #94a3b8;
	padding: 0.75rem 0.875rem 0.375rem;
	margin-top: 0.5rem;
}

.layout-navbar-fixed .layout-navbar.navbar-detached {
    width: calc(100% - (1rem * 2)) !important;
}
.layout-navbar.navbar-detached {
    width: calc(100% - (1rem * 2));
    margin: 0.75rem auto 0;
    border-radius: 0.375rem;
    padding: 0 1.5rem 0 1rem;
	z-index: 1076;
	background-color: rgb(249 251 252 / 70%);
    -webkit-backdrop-filter: saturate(200%) blur(6px);
    backdrop-filter: saturate(200%) blur(6px);
}

@media only screen and (max-width: 70rem) {
	.layout-navbar.navbar-detached {
		width: calc(100% - 1rem);
		margin: 0.375rem auto 0;
		padding: 0 0.75rem;
		border-radius: 0.5rem;
	}
	
	nav.mobile-nav-bar .navbar-detached {
		width: calc(100% - 1rem) !important;
		margin: 0.375rem auto 0 !important;
	}
}
.navbar-detached {
    box-shadow: 0 0 0.375rem 0.25rem rgb(161 172 184 / 15%);
}
.layout-navbar {
    position: relative;
    padding-top: 0.25rem;
    padding-bottom: 0.2rem;
    min-height: 3.875rem;
    flex-wrap: nowrap;
    color: #697a8d;
    z-index: 2;
}
.layout-navbar {
    background-color: rgba(255,255,255,.95) !important;
    -webkit-backdrop-filter: saturate(200%) blur(6px);
    backdrop-filter: saturate(200%) blur(6px);
}
.layout-navbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
}

.navbar-nav {
	flex-direction: row;	
}

/* ---- Mobile Nav ---- */
/* Hard override base styles that bleed into mobile drawer */
/* Kill ALL inherited padding/margin from stacked base classes on mobile nav */
#layout-navbar.mobile-nav-bar {
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
	border-radius: 0 !important;
	border: none !important;
	width: 280px !important;
	max-width: 84vw !important;
	box-sizing: border-box !important;
	align-items: stretch !important;
}
nav.mobile-nav-bar .menu-me-2 {
	margin-right: 0 !important;
}
nav.mobile-nav-bar .menu-nav-item {
	margin-bottom: 0 !important;
}
nav.mobile-nav-bar .menu-nav-item a.nav-link::before {
	display: none !important;
}
nav.mobile-nav-bar .menu-nav {
	padding-left: 0 !important;
	flex-direction: column !important;
}

.mobile-nav-header {
	display: flex !important;
	align-items: center !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 20px calc(5% + 8px) 16px 5% !important;
	flex-shrink: 0 !important;
	box-sizing: border-box !important;
	position: sticky;
	top: 0;
	z-index: 2;
	background: rgba(255, 255, 255, 0.55);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.mobile-nav-logo {
	height: auto;
}

div.mobile-nav-menu {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	width: 100%;
	padding: 0 0 40px 0;
}

div.mobile-nav-menu > ul {
	padding: 4px 0 0 0;
	margin: 0 calc(5% + 8px) 0 5%;
	display: flex;
	flex-direction: column;
	gap: 0;
	box-sizing: border-box;
}

div.mobile-nav-menu .menu-nav-item {
	margin: 0 !important;
	box-sizing: border-box;
}

div.mobile-nav-menu .menu-nav-item a.nav-link {
	display: flex !important;
	align-items: center !important;
	padding: 12px 10px !important;
	font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: -0.02em !important;
	color: #1a1a2e !important;
	border-radius: 10px !important;
	min-height: 0 !important;
	text-decoration: none !important;
	background: transparent !important;
	position: relative !important;
	-webkit-tap-highlight-color: transparent;
	transition: background 0.15s ease, transform 0.1s ease !important;
}

div.mobile-nav-menu .menu-nav-item a.nav-link i.menu-icon {
	width: 34px !important;
	height: 34px !important;
	font-size: 15px !important;
	color: #64748b !important;
	margin-right: 12px !important;
	text-align: center !important;
	line-height: 34px !important;
	background: #f1f5f9 !important;
	border-radius: 8px !important;
	flex-shrink: 0 !important;
	opacity: 1 !important;
	transition: all 0.15s ease !important;
}

div.mobile-nav-menu .menu-nav-item a.nav-link:hover,
div.mobile-nav-menu .menu-nav-item a.nav-link:active {
	background: #f8fafc !important;
	transform: none !important;
	color: #1a1a2e !important;
	box-shadow: none !important;
}

div.mobile-nav-menu .menu-nav-item a.nav-link:hover i.menu-icon,
div.mobile-nav-menu .menu-nav-item a.nav-link:active i.menu-icon {
	color: #475569 !important;
	background: #e8edf3 !important;
}

div.mobile-nav-menu .menu-nav-item a.nav-link.active {
	background: #0c4d8b !important;
	color: #fff !important;
	font-weight: 600 !important;
	box-shadow: 0 4px 12px rgba(12, 77, 139, 0.25) !important;
}

div.mobile-nav-menu .menu-nav-item a.nav-link.active i.menu-icon {
	color: #fff !important;
	background: rgba(255, 255, 255, 0.18) !important;
}

div.mobile-nav-menu .menu-nav-item a.nav-link.active::before {
	display: none !important;
}

div.mobile-nav-menu hr {
	margin: 8px 10px;
	border: 0;
	border-top: 1px solid #f1f5f9;
}

div.mobile-nav-menu .menu-dropdown {
	padding: 0;
}

div.mobile-nav-menu .menu-dropdown-toggle {
	display: flex !important;
	align-items: center !important;
	padding: 12px 10px !important;
	font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: -0.02em !important;
	color: #1a1a2e !important;
	border-radius: 10px !important;
	min-height: 0 !important;
	-webkit-tap-highlight-color: transparent;
	transition: background 0.15s ease !important;
}

div.mobile-nav-menu .menu-dropdown-toggle:hover {
	background: #f8fafc !important;
	color: #1a1a2e !important;
}

div.mobile-nav-menu .menu-dropdown-toggle i {
	color: #64748b !important;
	margin-right: 12px !important;
	font-size: 15px !important;
	width: 34px !important;
	height: 34px !important;
	line-height: 34px !important;
	text-align: center !important;
	background: #f1f5f9 !important;
	border-radius: 8px !important;
	flex-shrink: 0 !important;
}

div#grey_out {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	overflow: auto;
	background-color: rgba(15, 23, 42, 0.5) !important;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	display: none;
	z-index: 1199;
	opacity: 0;
	transition: opacity 0.2s ease;
}
body.nav-open div#grey_out {
	display: block;
	opacity: 1;
}

/* Mobile nav close button */
.mobile-nav-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: none;
	background: #f1f5f9;
	border-radius: 8px;
	color: #64748b;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	margin-left: auto;
	flex-shrink: 0;
	transition: background 0.15s ease, color 0.15s ease;
}

.mobile-nav-close:hover {
	background: #e2e8f0;
	color: #334155;
}

.mobile-nav-close:active {
	background: #cbd5e1;
	color: #1e293b;
	transform: scale(0.95);
}

.mobile-nav-close i {
	font-size: 15px;
	line-height: 1;
}

@media only screen and (max-width: 70rem) {
	nav.mobile-nav-bar {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 280px;
		max-width: 84vw;
		background: #ffffff !important;
		z-index: 1200;
		box-shadow: 8px 0 30px rgba(15, 23, 42, 0.12) !important;
		border-right: 1px solid rgba(0, 0, 0, 0.04) !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
		overflow: hidden;
		transform: translateX(-100%);
		transition: transform 0.25s ease;
		will-change: transform;
	}
	body.nav-open nav.mobile-nav-bar {
		transform: translateX(0);
	}

	nav.mobile-nav-bar img {
		width: 85px !important;
		height: auto;
	}

	nav.mobile-nav-bar .menu-me-2 {
		margin-right: 0 !important;
	}

	nav.bg-menu-theme,
	nav.bg-menu-theme.main_menu,
	nav.main_menu {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
		pointer-events: none !important;
	}

	div#grey_out {
		z-index: 1199;
	}

	div.layout-page {
		padding-left: 0rem !important;
	}

	body {
		padding-left: 0px !important;
	}

	/* Better touch targets for mobile */
	.mobile-nav-menu .menu-nav-item a,
	.mobile-nav-menu .menu-dropdown-toggle {
		touch-action: manipulation;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0.04);
	}

	/* Truck dashboard — full width when sidebar hidden */
	div#dash_out {
		width: 100% !important;
		left: 0 !important;
	}
	div#dash_map {
		width: 100% !important;
		left: 0 !important;
	}
}

@media only screen and (min-width: 70rem) {
	nav.mobile-nav-bar, div#grey_out {
		display:none;
	}
	nav.bg-menu-theme {
		display:flex;
	}
	body {
		padding-left: 12.5rem !important;
	}
}

/* Menu Utility Classes - Replacements for Bootstrap */
.menu-container {
	width: 100%;
	max-width: 1320px;
	margin-right: auto;
	margin-left: auto;
	padding-right: 1rem;
	padding-left: 1rem;
}

@media only screen and (max-width: 70rem) {
	.menu-container {
		padding-right: 0.5rem;
		padding-left: 0.5rem;
		max-width: 100%;
	}
}

.menu-navbar {
	position: relative;
	padding-top: 0.25rem;
	padding-bottom: 0.2rem;
	min-height: 3.875rem;
	flex-wrap: nowrap;
	color: #697a8d;
	z-index: 2;
}

.menu-navbar-detached {
	width: calc(100% - (1rem * 2));
	/* margin: 0.75rem auto 0;
	border-radius: 0.375rem; */
	padding: 0.5rem 1.5rem 0 1rem;
	z-index: 1076;
	background-color: rgb(249 251 252 / 80%) !important;
	-webkit-backdrop-filter: saturate(200%) blur(6px);
	backdrop-filter: saturate(200%) blur(6px);
}

.menu-align-center {
	align-items: center;
}

.menu-nav {
	flex-direction: row;
	display: flex;
	flex-wrap: wrap;
	padding-left: 0;
	margin-bottom: 0;
	list-style: none;
}

.menu-align-xl-center {
	align-items: center;
}

.menu-me-2 {
	margin-right: 0.625rem;
}

.menu-me-3 {
	margin-right: 1rem;
}

.menu-d-xl-none {
	display: none;
}

.menu-justify-between {
	justify-content: space-between;
}

.menu-col-12 {
	flex: 0 0 auto;
	width: 100%;
}

.menu-d-flex {
	display: flex;
}

.menu-align-items-center {
	align-items: center;
}

.menu-fs-4 {
	font-size: 1.375rem;
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.menu-nav-pills {
	display: flex;
	flex-direction: column;
	padding-left: 0;
	margin-bottom: 0;
	list-style: none;
}

.menu-flex-column {
	flex-direction: column;
}

.menu-mb-auto {
	margin-bottom: auto;
}

.menu-mb-3 {
	margin-bottom: 1rem;
}

.menu-flex-shrink-0 {
	flex-shrink: 0;
}

.menu-p-3 {
	padding: 1rem;
}

.menu-text-decoration-none {
	text-decoration: none;
}

.menu-dropdown {
	position: relative;
	margin-top: auto;
}

.menu-dropdown-toggle {
	cursor: pointer;
	font-size: 0.9375rem;
}

.menu-dropdown-toggle:hover {
	color: #566a7f;
}

.menu-dropdown-menu {
	position: absolute;
	z-index: 1000;
	min-width: 12rem;
	padding: 0.375rem;
	margin: 0;
	font-size: 0.875rem;
	color: #64748b;
	text-align: left;
	list-style: none;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid rgba(226, 232, 240, 0.8);
	border-radius: 0.75rem;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1), 0 2px 10px rgba(0, 0, 0, 0.05);
	left: 0;
	margin-bottom: 0.5rem;
	box-sizing: border-box;
}

/* Position dropdown above toggle for footer menu at bottom of sidebar */
nav.bg-menu-theme.main_menu .menu-dropdown {
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

nav.bg-menu-theme.main_menu .menu-dropdown-menu {
	/* Position will be set dynamically by JavaScript for fixed positioning */
	bottom: auto;
	top: auto;
	left: auto;
	right: auto;
	overflow: hidden;
}

/* Position dropdown below toggle for mobile menu at top */
.mobile-nav-menu .menu-dropdown-menu {
	position: relative;
	top: auto;
	bottom: auto;
	left: auto;
	right: auto;
	margin: 2px 0 4px 56px;
	padding: 0;
	width: auto;
	border: none;
	background: transparent;
	border-radius: 8px;
	box-shadow: none;
}

.mobile-nav-menu .menu-dropdown-menu .menu-dropdown-item {
	padding: 10px 12px;
	font-size: 14px;
	font-weight: 500;
	border-radius: 8px;
	color: #64748b;
	letter-spacing: -0.01em;
}

.mobile-nav-menu .menu-dropdown-menu .menu-dropdown-item:hover {
	background: #f8fafc;
	color: #1a1a2e;
	transform: none;
}

.mobile-nav-menu .menu-dropdown-menu .menu-dropdown-divider {
	margin: 4px 0;
	border-color: #f1f5f9;
}

.menu-dropdown-item {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 0.625rem 0.875rem;
	clear: both;
	font-weight: 500;
	color: #64748b;
	text-align: inherit;
	text-decoration: none;
	white-space: nowrap;
	background-color: transparent;
	border: 0;
	border-radius: 0.5rem;
	transition: background-color 0.2s ease, color 0.2s ease;
	box-sizing: border-box;
	position: relative;
}

.menu-dropdown-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 0;
	background: #0c4d8b;
	border-radius: 0 2px 2px 0;
	transition: height 0.2s ease;
}

.menu-dropdown-item i {
	width: 1.25rem;
	font-size: 1rem;
	color: #64748b;
	transition: color 0.2s ease, transform 0.06s ease;
}

.menu-dropdown-item:hover i {
	color: #0c4d8b;
}

.menu-dropdown-item:hover {
	color: #0c4d8b;
	background-color: rgba(12, 77, 139, 0.06);
}

.menu-dropdown-item:hover::before {
	height: 60%;
}

.menu-dropdown-item:active {
	background-color: rgba(12, 77, 139, 0.12);
	color: #0c4d8b;
	transform: scale(0.97);
	box-shadow: inset 0 0 0 1.5px rgba(12, 77, 139, 0.18);
	transition: transform 0.06s ease, background-color 0.06s ease, box-shadow 0.06s ease;
}

.menu-dropdown-item:active::before {
	height: 100%;
	transition: height 0.06s ease;
}

.menu-dropdown-item:active i {
	color: #0c4d8b;
	transform: scale(1.1);
}

.menu-dropdown-divider {
	height: 0;
	margin: 0.375rem 0.5rem;
	overflow: hidden;
	border-top: 1px solid rgba(226, 232, 240, 0.8);
}

.menu-text-small {
	font-size: 0.875rem;
}

.menu-shadow {
	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.15);
}

/* Ensure sidebar menu is flex column so footer dropdown goes to bottom */
nav.bg-menu-theme.main_menu {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow-y: auto;
	overflow-x: hidden;
	box-sizing: border-box;
	padding-bottom:.4rem;
}

@media only screen and (min-width: 70rem) {
	nav.bg-menu-theme.main_menu {
		display: flex !important;
	}
}

nav.bg-menu-theme.main_menu > ul.menu-nav {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	min-height: 0;
	margin-top: .2rem;
}

nav.bg-menu-theme.main_menu > hr {
	margin: 0.2rem 0;
	border: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

nav.bg-menu-theme.main_menu .menu-dropdown {
	margin-top: auto;
	padding-top: 0;
	display: block;
	visibility: visible;
	flex-shrink: 0;
}

nav.bg-menu-theme.main_menu .menu-dropdown a.menu-dropdown-toggle {
	display: flex;
	align-items: center;
	padding: 0.625rem 0.875rem;
	color: #64748b;
	text-decoration: none;
	border-radius: 0.5rem;
	transition: background-color 0.2s ease, color 0.2s ease;
	font-family: 'Inter', sans-serif;
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	margin: 0.0625rem 0;
	position: relative;
}

nav.bg-menu-theme.main_menu .menu-dropdown-menu,
nav.bg-menu-theme.main_menu .menu-dropdown-menu .menu-dropdown-item {
	font-family: 'Inter', sans-serif;
	letter-spacing: 0.01em;
}

nav.bg-menu-theme.main_menu .menu-dropdown a.menu-dropdown-toggle::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 0;
	background: #0c4d8b;
	border-radius: 0 2px 2px 0;
	transition: height 0.2s ease;
}

nav.bg-menu-theme.main_menu .menu-dropdown a.menu-dropdown-toggle:hover {
	background-color: rgba(12, 77, 139, 0.06);
	color: #0c4d8b;
}

nav.bg-menu-theme.main_menu .menu-dropdown a.menu-dropdown-toggle:hover::before,
nav.bg-menu-theme.main_menu .menu-dropdown a.menu-dropdown-toggle:focus-visible::before {
	height: 60%;
}

nav.bg-menu-theme.main_menu .menu-dropdown a.menu-dropdown-toggle:active {
	background-color: rgba(12, 77, 139, 0.12);
	color: #0c4d8b;
	transform: scale(0.97);
	box-shadow: inset 0 0 0 1.5px rgba(12, 77, 139, 0.18);
	transition: transform 0.06s ease, background-color 0.06s ease, box-shadow 0.06s ease;
}

nav.bg-menu-theme.main_menu .menu-dropdown a.menu-dropdown-toggle:active::before {
	height: 100%;
	background-color: #0c4d8b;
	transition: height 0.06s ease;
}

nav.bg-menu-theme.main_menu .menu-dropdown a.menu-dropdown-toggle:hover i,
nav.bg-menu-theme.main_menu .menu-dropdown a.menu-dropdown-toggle:focus-visible i {
	color: #0c4d8b;
}

nav.bg-menu-theme.main_menu .menu-dropdown a.menu-dropdown-toggle:active i {
	color: #0c4d8b;
	transform: scale(1.1);
	transition: transform 0.06s ease;
}

@media only screen and (min-width: 70rem) {
	.menu-d-xl-none {
		display: none;
	}
}

@media only screen and (max-width: 70rem) {
	.menu-d-xl-none {
		display: flex;
	}
}

/* .tableFloatingHeaderOriginal removed — sticky-table-headers plugin deleted */

/* Report mobile cards (similar to inventory cards) */
.report-cards {
	display: none;
}

@media (max-width: 767px) {
	/* Hide wide table on phones, show cards instead */
	.report-cards {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 0 12px;
		margin-top: 10px;
	}

	.report-cards table#report_list { display: none; }

	.report-cards .results-state {
		margin: 0;
		max-width: none;
	}

	.report-card {
		background: #fff;
		border: 1px solid #e2e8f0;
		border-radius: 12px;
		box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
		padding: 12px 12px;
		cursor: pointer;
		transition: all 0.15s ease;
	}

	.report-card:active {
		transform: scale(0.98);
	}

	.report-card.report-card--highlight {
		border-color: rgba(12, 77, 139, 0.28);
		background: rgba(12, 77, 139, 0.03);
	}

	.report-card__top {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 10px;
		margin-bottom: 10px;
	}

	.report-card__right {
		display: inline-flex;
		align-items: center;
		gap: 8px;
	}

	.report-card__chev {
		color: #94a3b8;
		font-size: 14px;
		line-height: 1;
		transition: transform 0.18s ease;
		margin-top: 2px;
	}

	.report-card.is-open .report-card__chev {
		transform: rotate(180deg);
	}

	.report-card__title {
		font-size: 14px;
		font-weight: 800;
		color: #0f172a;
		line-height: 1.25;
		text-align: left;
	}

	.report-card__sub {
		margin-top: 2px;
		font-size: 12px;
		color: #64748b;
		line-height: 1.2;
		text-align: left;
	}

	.report-stats {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
	}

	.report-stat {
		border: 1px solid #e2e8f0;
		border-radius: 10px;
		padding: 8px 10px;
		background: #fafbfc;
	}

	.report-stat__label {
		font-size: 10px;
		font-weight: 800;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: #64748b;
	}

	.report-stat__val {
		margin-top: 2px;
		font-size: 14px;
		font-weight: 800;
		color: #0f172a;
	}

	.report-card__actions {
		margin-top: 10px;
		padding-top: 10px;
		border-top: 1px solid #e2e8f0;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px;
	}

	.report-card__action-btn {
		font-size: 12px;
		padding: 6px 12px;
	}

	.report-card__action-text {
		font-size: 13px;
		color: #64748b;
	}

	.report-card__action-btns {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px;
	}

	.report-card__action-icon {
		background: none;
		border: none;
		padding: 6px 8px;
		cursor: pointer;
		color: #64748b;
		border-radius: 6px;
		transition: color 0.15s, background 0.15s;
	}

	.report-card__action-icon:hover {
		color: #0f172a;
		background: #f1f5f9;
	}

	.report-card__action-icon i {
		font-size: 14px;
	}

	.report-card__details {
		margin-top: 10px;
		padding-top: 10px;
		border-top: 1px solid #e2e8f0;
		display: none;
	}

	.report-card.is-open .report-card__details {
		display: block;
	}

	.report-card__detail-row {
		margin-bottom: 8px;
		font-size: 12px;
		line-height: 1.4;
		color: #475569;
	}

	.report-card__detail-row strong {
		color: #0f172a;
		font-weight: 700;
	}
}

/* ─── AI Query Builder ──────────────────────────────────────────── */
.ai-query-container {
	max-width: 960px;
	margin: 10px auto;
	padding: 0 16px;
}

.ai-query-input-area {
	background-color: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 12px 14px;
	margin-bottom: 10px;
}

.ai-query-input-area label {
	display: block;
	font-weight: 600;
	font-size: 14px;
	color: #1e293b;
	margin-bottom: 10px;
}

.ai-query-input-area label i {
	color: #6366f1;
	margin-right: 6px;
}

/* Compact action bar (results-first layout): appears once SQL is generated or a
   saved report is loaded. The SQL itself stays tucked behind "View SQL" so the
   results table, not the SQL, sits at the top of the page. */
.aiq-actionbar {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.aiq-actionbar .ai-btn { padding: 6px 12px; font-size: 12px; }

.aiq-sqltoggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	font-size: 12px;
	font-weight: 600;
	color: #64748b;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color .15s, color .15s;
}

.aiq-sqltoggle:hover { background: #f1f5f9; color: #1e293b; }
.aiq-sqltoggle i { font-size: 11px; }

.ai-explanation-inline {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 12px;
	color: #64748b;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#ai_question {
	width: 100%;
	padding: 12px;
	font-family: inherit;
	font-size: 14px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	resize: vertical;
	min-height: 60px;
	box-sizing: border-box;
	transition: border-color .2s;
}

#ai_question:focus {
	outline: none;
	border-color: #6366f1;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, .12);
}

.ai-query-actions {
	display: flex;
	gap: 8px;
	margin-top: 12px;
	align-items: center;
}

.ai-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color .15s, opacity .15s;
}

.ai-btn:disabled {
	opacity: .55;
	cursor: not-allowed;
}

.ai-btn-generate {
	background-color: #6366f1;
	color: #fff;
}

.ai-btn-generate:hover:not(:disabled) {
	background-color: #4f46e5;
}

.ai-btn-run {
	background-color: #22c55e;
	color: #fff;
}

.ai-btn-run:hover:not(:disabled) {
	background-color: #16a34a;
}

.ai-btn-secondary {
	background-color: #e2e8f0;
	color: #475569;
}

.ai-btn-secondary:hover:not(:disabled) {
	background-color: #cbd5e1;
}

.ai-btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: none;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	color: #64748b;
	cursor: pointer;
	font-size: 13px;
	transition: background-color .15s, color .15s;
}

.ai-btn-icon:hover {
	background-color: #f1f5f9;
	color: #1e293b;
}

.ai-sql-panel {
	background-color: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 12px 14px;
	margin-bottom: 10px;
}

.ai-sql-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.ai-sql-title {
	font-weight: 600;
	font-size: 14px;
	color: #1e293b;
}

.ai-sql-title i {
	color: #6366f1;
	margin-right: 6px;
}

.ai-sql-tools {
	display: flex;
	gap: 4px;
}

.ai-explanation {
	font-size: 13px;
	color: #64748b;
	margin-bottom: 10px;
	line-height: 1.4;
}

.ai-sql-code {
	background-color: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	padding: 14px;
	font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	font-size: 13px;
	line-height: 1.5;
	color: #1e293b;
	white-space: pre-wrap;
	word-break: break-word;
	overflow-x: auto;
	margin: 0 0 12px 0;
}

.ai-sql-edit {
	width: 100%;
	padding: 14px;
	font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	font-size: 13px;
	line-height: 1.5;
	border: 1px solid #6366f1;
	border-radius: 6px;
	resize: vertical;
	box-sizing: border-box;
	margin-bottom: 12px;
	background-color: #fefce8;
}

.ai-sql-edit:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, .12);
}

.ai-status {
	background-color: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 12px 20px;
	font-size: 13px;
	color: #475569;
	margin-bottom: 16px;
}

.ai-status i {
	margin-right: 6px;
}

/* AI results table enhancements — only when AI container is visible */
.ai-query-container.ai-active ~ .rep_content table#report_list {
	min-width: 0;
	width: 97% !important;
}

.ai-query-container.ai-active ~ br.scr,
.ai-query-container.ai-active ~ br {
	display: none;
}

span.ai-null {
	color: #cbd5e1;
	font-style: italic;
}

/* AI Query Builder — unified cell alignment.
   Header, body, and footer all use the same padding so columns line up perfectly. */
table#report_list thead tr.ai-main td {
	padding: 6px 12px !important;
	text-align: left;
}
table#report_list tfoot tr.ai-totals-row td {
	border-top: 2px solid #0c4d8b;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 700;
	color: #0f172a;
	background-color: #f1f5f9;
}
table#report_list tbody tr.d0 td,
table#report_list tbody tr.d1 td {
	font-size: 12px;
}

/* Save / Delete buttons */
.ai-btn-save {
	background-color: #3b82f6;
	color: #fff;
}

.ai-btn-save:hover:not(:disabled) {
	background-color: #2563eb;
}

.ai-btn-export {
	background-color: #10b981;
	color: #fff;
}

.ai-btn-export:hover:not(:disabled) {
	background-color: #059669;
}

.ai-btn-delete {
	background-color: #ef4444;
	color: #fff;
	padding: 8px 10px;
}

.ai-btn-delete:hover:not(:disabled) {
	background-color: #dc2626;
}

.ai-btn-clear {
	background-color: #e2e8f0;
	color: #475569;
	margin-left: auto;
}

.ai-btn-clear:hover:not(:disabled) {
	background-color: #cbd5e1;
}

/* AI Column header controls */
.ai-col-header { display: flex; align-items: center; gap: 4px; position: relative; width: 100%; }
.ai-col-name { cursor: pointer; flex: 1; }
.ai-col-name:hover { color: #0c4d8b; }
/* Controls float over the cell so they don't consume label width — otherwise a
   right-flushed header label ends short of where the body numbers line up. */
.ai-col-controls { display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s; position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
td:hover .ai-col-controls { opacity: 1; }
.ai-col-sort { cursor: pointer; font-size: 10px; padding: 2px; }
.ai-col-sort.asc, .ai-col-sort.desc { opacity: 1 !important; color: #0c4d8b; }
.ai-col-remove { cursor: pointer; font-size: 10px; padding: 2px; color: #94a3b8; }
.ai-col-remove:hover { color: #ef4444; }
.ai-col-rename-input { font: inherit; border: 1px solid #0c4d8b; border-radius: 4px; padding: 2px 4px; width: 100%; font-size: 11px; }

/* Smart per-column alignment. Header, body AND footer cells all carry the same
   ai-al-* class from the same colMeta.align, so a column's data can never drift
   from its header label. !important beats the generic tr.ai-main td text-align. */
table#report_list td.ai-al-left   { text-align: left   !important; }
table#report_list td.ai-al-center { text-align: center !important; }
table#report_list td.ai-al-right  { text-align: right  !important; }
/* On right-aligned columns the hover-only controls sit on the LEFT so the label's
   right edge flushes to the exact cell edge the body numbers use. */
table#report_list td.ai-al-right .ai-col-controls { right: auto; left: 0; }

/* ── AI report chart (Chart.js) ── */
.ai-btn-chart { background-color: #e2e8f0; color: #475569; }
.ai-btn-chart:hover:not(:disabled) { background-color: #cbd5e1; }
.ai-btn-chart.active { background-color: #0c4d8b; color: #fff; }
.aiq-chart-panel {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
	background-color: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
	padding: 10px 12px; margin-bottom: 10px;
}
.aiq-chart-ctl { font-size: 12px; color: #475569; display: inline-flex; align-items: center; gap: 6px; }
.aiq-chart-ctl select { font: inherit; font-size: 12px; padding: 4px 8px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; color: #1e293b; }
.aiq-swap { padding: 5px 10px; }
.aiq-swap.active { background: #0c4d8b; color: #fff; border-color: #0c4d8b; }
.aiq-ds-label { font-size: 12px; color: #64748b; }
.aiq-ds-cols { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.aiq-ds-check-label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #334155; }
.aiq-ds-rename { font: inherit; font-size: 11px; padding: 2px 6px; border: 1px solid #cbd5e1; border-radius: 4px; width: 92px; background: #fff; color: #1e293b; }
.aiq-chart-canvas-wrap { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; height: 340px; margin-bottom: 10px; }
#ai_chart_canvas { width: 100% !important; height: 100% !important; }

/* Spacer pushes saved dropdown to right */
.ai-actions-spacer {
	flex: 1;
}

/* Saved reports dropdown */
.ai-saved-select {
	padding: 7px 28px 7px 10px;
	font-size: 13px;
	font-family: inherit;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	background-color: #fff;
	color: #334155;
	cursor: pointer;
	max-width: 260px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	appearance: none;
	-webkit-appearance: none;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path fill="%2364748b" d="M5 6L0 0h10z"/></svg>');
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 10px 6px;
}

.ai-saved-select:focus {
	outline: none;
	border-color: #6366f1;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, .12);
}

/* ─── Passkey Manager ─────────────────────────────────────────────── */
.passkey-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	margin-bottom: 8px;
	background-color: #fafbfc;
}
.passkey-icon {
	font-size: 22px;
	color: #0c4d8b;
	flex-shrink: 0;
	width: 32px;
	text-align: center;
}
.passkey-info {
	flex: 1;
	min-width: 0;
}
.passkey-name {
	font-size: 14px;
	font-weight: 600;
	color: #1e293b;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.passkey-meta {
	font-size: 11px;
	color: #94a3b8;
	margin-top: 2px;
}
.passkey-actions {
	display: flex;
	gap: 6px;
	flex-shrink: 0;
}
.passkey-action {
	border: none;
	background: none;
	color: #94a3b8;
	cursor: pointer;
	padding: 4px 6px;
	border-radius: 4px;
	font-size: 13px;
	transition: color 0.15s, background-color 0.15s;
}
.passkey-action:hover {
	color: #0c4d8b;
	background-color: #e8f0fe;
}

/* ─── Undo Toast (shared across pages) ─── */
.oli-undo-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%) translateY(100px);
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 20px;
	background: #1e293b;
	color: #f8fafc;
	border-radius: 10px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.1);
	font-size: 13px;
	font-weight: 500;
	z-index: 99999;
	animation: oliToastIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.oli-undo-toast.oli-toast-out { animation: oliToastOut 0.25s ease forwards; }
.oli-undo-toast i { color: #ef4444; font-size: 15px; }
.oli-undo-toast .oli-undo-btn {
	padding: 4px 14px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.1);
	color: #4a9eff;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s ease;
	white-space: nowrap;
}
.oli-undo-toast .oli-undo-btn:hover {
	background: rgba(74, 158, 255, 0.2);
	border-color: rgba(74, 158, 255, 0.4);
}
.oli-undo-toast .oli-undo-progress {
	position: absolute;
	bottom: 0;
	left: 10px;
	right: 10px;
	height: 2px;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 1px;
	overflow: hidden;
}
.oli-undo-toast .oli-undo-progress::after {
	content: '';
	display: block;
	height: 100%;
	background: #4a9eff;
	border-radius: 1px;
	animation: oliUndoCountdown 5s linear forwards;
}
@keyframes oliToastIn {
	from { transform: translateX(-50%) translateY(100px); opacity: 0; }
	to { transform: translateX(-50%) translateY(0); opacity: 1; }
}
@keyframes oliToastOut {
	from { transform: translateX(-50%) translateY(0); opacity: 1; }
	to { transform: translateX(-50%) translateY(100px); opacity: 0; }
}
@keyframes oliUndoCountdown {
	from { width: 100%; }
	to { width: 0%; }
}
/* Flash the freshly duplicated row when it lands in the list */
@keyframes dupRowFlash {
	0%   { background-color: #fff4c2; }
	100% { background-color: transparent; }
}
#ao_table tbody tr.dup-row-flash > td { animation: dupRowFlash 2.2s ease-out; }

/* Secondary action button inside a websocket notification toast (schToast).
   Sits on its own line under the title — e.g. the "Open" on a duplicate alert. */
.sch-toast-action {
	margin-top: 8px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 14px;
	font-size: 12px;
	font-weight: 600;
	font-family: inherit;
	color: #475569;
	background: rgba(15, 23, 42, 0.04);
	border: 1px solid rgba(15, 23, 42, 0.12);
	border-radius: 7px;
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
}
.sch-toast-action:hover {
	background: rgba(15, 23, 42, 0.08);
	border-color: rgba(15, 23, 42, 0.22);
	color: #1e293b;
}
[data-theme="dark"] .sch-toast-action {
	color: #cbd5e1;
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.14);
}
[data-theme="dark"] .sch-toast-action:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.24);
	color: #f1f5f9;
}

/* ═══════════════════════════════════════════════════════
   Notification Toast (oli-toast)
   ═══════════════════════════════════════════════════════ */
.oli-toast {
	position: fixed;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	background: #1e293b;
	color: #fff;
	padding: 10px 20px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
	z-index: 99999;
	opacity: 0;
	transition: all 0.3s ease;
	pointer-events: none;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.oli-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.oli-toast.undo, .oli-toast.redo { background: #0c4d8b; }
.oli-toast.success { background: #059669; }
.oli-toast.error { background: #dc2626; }
.oli-toast.info { background: #475569; }

/* ═══════════════════════════════════════════════════════
   Undo/Redo Buttons + Dropdown
   ═══════════════════════════════════════════════════════ */
.undo-btn.disabled, .redo-btn.disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}
.undo-btn.loading, .redo-btn.loading {
	opacity: 0.5;
}
.undo-btn.loading i, .redo-btn.loading i {
	animation: spin 0.8s linear infinite;
}
@keyframes spin { 100% { transform: rotate(360deg); } }

/* Split button: undo + caret */
.undo-split-btn {
	display: flex;
	align-items: stretch;
	position: relative;
}
.undo-split-btn .undo-btn {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
	flex: 1;
}
.undo-caret {
	width: 22px !important;
	min-width: 22px !important;
	padding: 0 !important;
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
	border-left: 1px solid rgba(0,0,0,0.08) !important;
	justify-content: center !important;
	font-size: 10px !important;
}
.undo-caret.disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}
.undo-caret span { display: none !important; }

/* Undo dropdown menu — fixed to body, right-aligned with button */
.undo-dropdown {
	position: fixed;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
	z-index: 10001;
	padding: 4px;
	width: 210px;
}
.undo-dropdown-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 10px;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.12s ease;
	font-size: 12px;
	color: #334155;
}
.undo-dropdown-item:hover {
	background: #f1f5f9;
}
.undo-dropdown-item i {
	font-size: 11px;
	color: #94a3b8;
	width: 14px;
	text-align: center;
	flex-shrink: 0;
}
.undo-dropdown-item span {
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.undo-dropdown-item .undo-drop-time {
	font-size: 10px;
	color: #b0b8c4;
	flex: none;
}

/* ═══════════════════════════════════════════════════════
   Version Items in History Modal
   ═══════════════════════════════════════════════════════ */
.history-item-icon.version {
	background: rgba(74, 158, 255, 0.12);
	color: #4a9eff;
}
.version-restore-btn {
	padding: 4px 12px;
	font-size: 11px;
	font-weight: 600;
	background: #f0f7ff;
	color: #4a9eff;
	border: 1px solid rgba(74, 158, 255, 0.3);
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
}
.version-restore-btn:hover {
	background: #4a9eff;
	color: #fff;
	border-color: #4a9eff;
}
.version-restore-btn.redo-restore-btn {
	background: #f0fdf4;
	color: #16a34a;
	border-color: rgba(22, 163, 74, 0.3);
}
.version-restore-btn.redo-restore-btn:hover {
	background: #16a34a;
	color: #fff;
	border-color: #16a34a;
}
.version-view-btn {
	padding: 4px 12px;
	font-size: 11px;
	font-weight: 600;
	background: #f5f7fa;
	color: #475569;
	border: 1px solid #d8dee9;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
	margin-right: 6px;
}
.version-view-btn:hover { background: #475569; color: #fff; border-color: #475569; }

/* ── Read-only order version snapshot preview ── */
.ovp { font-size: 13px; color: #1e293b; }
.ovp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid #eef2f7; }
.ovp-job { font-size: 17px; font-weight: 700; line-height: 1.2; }
.ovp-sub { color: #64748b; margin-top: 3px; }
.ovp-dot { color: #cbd5e1; }
.ovp-total { text-align: right; flex-shrink: 0; }
.ovp-total-label { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; font-weight: 600; }
.ovp-total-val { font-size: 18px; font-weight: 700; color: #0c4d8b; }
.ovp-meta { margin: 10px 0 14px; color: #64748b; font-size: 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.ovp-vtag { background: #eef4ff; color: #2563eb; font-weight: 700; border-radius: 5px; padding: 1px 7px; font-size: 11px; }
.ovp-meta-by { color: #94a3b8; }
.ovp-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.ovp-badge-appr { background: #ecfdf5; color: #059669; }
.ovp-table-wrap { border: 1px solid #eef2f7; border-radius: 8px; overflow: hidden; }
.ovp-items { width: 100%; border-collapse: collapse; }
.ovp-items th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; font-weight: 600; padding: 8px 12px; background: #f8fafc; border-bottom: 1px solid #eef2f7; }
.ovp-items td { padding: 8px 12px; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.ovp-items th.ovp-qty, .ovp-items td.ovp-qty, .ovp-items th.ovp-unit, .ovp-items td.ovp-unit, .ovp-items th.ovp-tot, .ovp-items td.ovp-tot { text-align: right; white-space: nowrap; }
.ovp-items tr.ovp-grp-head td { background: #fbfdff; font-weight: 600; }
.ovp-grp-ic { color: #64748b; font-size: 11px; margin-right: 2px; }
.ovp-child td.ovp-child-name { padding-left: 30px; position: relative; }
.ovp-child td.ovp-child-name::before { content: ''; position: absolute; left: 16px; top: 15px; width: 8px; height: 1px; background: #cbd5e1; }
.ovp-child td { color: #64748b; }
.ovp-draw { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; color: #0c4d8b; background: #eef4ff; border-radius: 4px; padding: 0 5px; margin-left: 6px; }
.ovp-draw i { font-size: 9px; }
.ovp-items tfoot td { padding: 10px 12px; font-weight: 700; border-top: 2px solid #eef2f7; }
.ovp-foot-label { text-align: right; color: #64748b; font-weight: 600; }
.ovp-empty { text-align: center; color: #94a3b8; padding: 20px; }
.ovp-note { margin-top: 12px; font-size: 11px; color: #94a3b8; display: flex; align-items: center; gap: 6px; }
.ovp-actions { margin-top: 16px; display: flex; justify-content: flex-end; }
.ovp-actions .version-restore-btn { padding: 7px 16px; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }
/* Dark theme */
[data-theme="dark"] .ovp { color: #e2e8f0; }
[data-theme="dark"] .ovp-head { border-bottom-color: #2a3650; }
[data-theme="dark"] .ovp-sub, [data-theme="dark"] .ovp-meta { color: #94a3b8; }
[data-theme="dark"] .ovp-total-val { color: #60a5fa; }
[data-theme="dark"] .ovp-table-wrap { border-color: #2a3650; }
[data-theme="dark"] .ovp-items th { background: #16203a; color: #94a3b8; border-bottom-color: #2a3650; }
[data-theme="dark"] .ovp-items td { border-bottom-color: #1e2941; }
[data-theme="dark"] .ovp-items tr.ovp-grp-head td { background: #16203a; }
[data-theme="dark"] .ovp-vtag, [data-theme="dark"] .ovp-draw { background: #1e293b; color: #60a5fa; }
[data-theme="dark"] .ovp-items tfoot td { border-top-color: #2a3650; }
[data-theme="dark"] .ovp-child td { color: #94a3b8; }

/* ═══════════════════════════════════════════════════════
   Version Modal (Customers + shared)
   ═══════════════════════════════════════════════════════ */
.version-modal-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 10000;
	justify-content: center;
	align-items: center;
}
.version-modal-overlay[style*="block"] { display: flex !important; }
.version-modal {
	background: #fff;
	border-radius: 16px;
	width: 90%;
	max-width: 600px;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
	overflow: hidden;
}
.version-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-bottom: 1px solid #e2e8f0;
}
.version-modal-header h2 {
	font-size: 16px;
	font-weight: 600;
	margin: 0;
	color: #1e293b;
}
.version-modal-header h2 i {
	margin-right: 8px;
	color: #4a9eff;
}
.version-modal-close {
	width: 32px;
	height: 32px;
	border: none;
	background: none;
	font-size: 20px;
	color: #94a3b8;
	cursor: pointer;
	border-radius: 8px;
	transition: all 0.2s ease;
}
.version-modal-close:hover {
	background: #f1f5f9;
	color: #1e293b;
}
.version-modal-content {
	flex: 1;
	overflow-y: auto;
	padding: 16px 24px;
}
.version-list-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid #f1f5f9;
}
.version-list-item:last-child { border-bottom: none; }
.version-list-item-header { flex: 1; min-width: 0; }
.version-list-item-info {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 2px;
}
.version-num {
	font-size: 11px;
	font-weight: 700;
	color: #4a9eff;
	background: rgba(74, 158, 255, 0.1);
	padding: 2px 8px;
	border-radius: 4px;
	flex-shrink: 0;
}
.version-summary {
	font-size: 13px;
	font-weight: 500;
	color: #1e293b;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.version-list-item-meta {
	display: flex;
	gap: 8px;
	font-size: 11px;
	color: #94a3b8;
}
.version-date { color: #cbd5e1; }
.version-empty {
	text-align: center;
	padding: 40px;
	color: #94a3b8;
}
.version-empty i {
	font-size: 32px;
	/* FA7 icons carry an intrinsic width, so a display:block icon won't center
	   on text-align alone - auto side margins center the fixed-width block. */
	margin: 0 auto 12px;
	display: block;
}

/* ── Production Attachments ── */
.prod-att-icon { color: #667eea; cursor: pointer; position: relative; }
.prod-att-icon.has-att { color: #16a34a; }
.prod-att-icon .att-badge {
	position: absolute;
	top: -6px;
	right: -8px;
	background-color: #16a34a;
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	border-radius: 50%;
	width: 15px;
	height: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	font-style: normal;
}

/* Attachment config modal */
.att-config-modal { padding: 12px; min-width: 350px; }
.att-body { margin-bottom: 12px; }
.att-loading { text-align: center; padding: 20px; color: #888; }
.att-empty { text-align: center; padding: 15px; color: #999; font-size: 13px; }
.att-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-bottom: 1px solid #eee;
}
.att-row:last-child { border-bottom: none; }
.att-row-name { flex: 1; font-size: 13px; }
.att-name { font-weight: 500; }
.att-row-qty { width: 70px; }
.att-qty-input {
	width: 60px;
	text-align: center;
	font-size: 13px;
	padding: 3px 4px;
	border: 1px solid #ccc;
	border-radius: 4px;
}
.att-row-status { font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 3px; }
.att-consumed { background-color: #dcfce7; color: #16a34a; }
.att-reversed { background-color: #fef3c7; color: #d97706; }
.att-row-actions { width: 24px; text-align: center; }
.att-rm-btn { cursor: pointer; color: #ef4444; font-size: 13px; }
.att-rm-btn:hover { color: #dc2626; }

.att-source-badge {
	display: inline-block;
	font-size: 10px;
	font-weight: 600;
	padding: 1px 5px;
	border-radius: 3px;
	text-transform: uppercase;
}
.att-source-sibling { background-color: #dbeafe; color: #2563eb; }
.att-source-search { background-color: #f3e8ff; color: #7c3aed; }
.att-source-pending { background-color: #fef3c7; color: #b45309; }
/* Pending row — drag-link from the candidates panel that hasn't yet
   been committed to prod_attachments. Match the amber/emerald pair
   the panel uses so the modal reads as the same component family. */
.att-row.att-row-pending {
	background: linear-gradient(90deg, rgba(254, 243, 199, 0.45) 0%, rgba(209, 250, 229, 0.35) 100%);
	border-left: 3px solid #f59e0b;
}

/* Add section */
.att-add-section { border-top: 1px solid #eee; padding-top: 10px; margin-top: 8px; }
.att-add-header { font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.att-sibling-select {
	width: 100%;
	font-size: 13px;
	padding: 5px 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	margin-bottom: 6px;
}
.att-search-wrap { position: relative; }
.att-search-input {
	width: 100%;
	box-sizing: border-box;
	font-size: 13px;
	padding: 6px 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
}
.att-search-results {
	position: absolute;
	/* The components modal lives at z-index 10010 (above the
	   dt-drawer panel). Results are detach()'d to <body> in JS, so
	   they need to outrank the modal explicitly to be visible. */
	z-index: 10020;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	max-height: 200px;
	overflow-y: auto;
	width: 100%;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.att-search-item {
	padding: 8px 12px;
	cursor: pointer;
	font-size: 13px;
	border-bottom: 1px solid #f0f0f0;
}
.att-search-item:hover { background-color: #f5f5f5; }
.att-no-results { color: #999; cursor: default; }

/* ── Catalog Default Attachments Section ── */
.cat-att-header { margin-bottom: 14px; }
.cat-att-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 700;
	color: #1e293b;
	margin-bottom: 4px;
}
.cat-att-title i { color: #0c4d8b; font-size: 14px; }
.cat-att-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 10px;
	background: #0c4d8b;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}
.cat-att-desc {
	font-size: 12px;
	color: #94a3b8;
	margin: 0;
	line-height: 1.4;
}
/* Attachment List */
.cat-att-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-bottom: 12px;
}
.cat-att-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border-radius: 8px;
	background: #f8fafc;
	border: 1px solid #e8edf2;
	margin-bottom: 6px;
	transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.cat-att-row:hover { background: #f1f5f9; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.cat-att-row-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	background: #eef4fb;
	flex-shrink: 0;
}
.cat-att-row-icon i { font-size: 12px; color: #0c4d8b; }
.cat-att-row-name {
	flex: 1;
	min-width: 0;
	font-size: 13px;
	font-weight: 500;
	color: #334155;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Component type pill (Production / Delivery) */
.att-type-pill {
	display: inline-block;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.4;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(120,120,120,.15);
	color: #666;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	white-space: nowrap;
	flex-shrink: 0;
}
.att-type-pill.delivery {
	background: rgba(33,118,210,.15);
	color: #2176d2;
}
.att-type-pill.delivery_optional {
	background: rgba(217,119,6,.14);
	color: #b45309;
}
/* Stepper */
.cat-att-stepper {
	display: inline-flex;
	align-items: center;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	overflow: hidden;
	flex-shrink: 0;
	height: 26px;
}
.cat-att-stepper button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 26px;
	border: none;
	background: #f8fafc;
	color: #64748b;
	cursor: pointer;
	padding: 0;
	font-size: 9px;
	transition: background 0.1s ease, color 0.1s ease;
}
.cat-att-stepper button:hover { background: #e2e8f0; color: #1e293b; }
.cat-att-stepper button:active { background: #cbd5e1; }
.cat-att-stepper input {
	width: 42px;
	height: 26px;
	border: none;
	border-left: 1px solid #d1d5db;
	border-right: 1px solid #d1d5db;
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	color: #1e293b;
	padding: 0;
	margin: 0;
	background: #fff;
	-moz-appearance: textfield;
	outline: none;
	font-family: inherit;
}
.cat-att-stepper input::-webkit-outer-spin-button,
.cat-att-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Remove */
.cat-att-rm {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: #cbd5e1;
	cursor: pointer;
	padding: 0;
	font-size: 12px;
	transition: all 0.15s ease;
	flex-shrink: 0;
}
.cat-att-rm:hover { background: #fef2f2; color: #dc2626; }
/* Empty State */
.cat-att-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
	border: 1.5px dashed #e2e8f0;
	border-radius: 8px;
	text-align: center;
	gap: 6px;
	margin-bottom: 12px;
}
.cat-att-empty i { font-size: 20px; color: #cbd5e1; }
.cat-att-empty span { font-size: 12px; color: #94a3b8; font-weight: 500; }
/* Search / Add */
.cat-att-add-wrap { position: relative; }
.cat-att-add-field {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 12px;
	border: 1px dashed #d1d5db;
	border-radius: 8px;
	background: #fafbfc;
	transition: all 0.15s ease;
	cursor: text;
}
.cat-att-add-field:focus-within { border-style: solid; border-color: #0c4d8b; background: #fff; box-shadow: 0 0 0 2px rgba(12, 77, 139, 0.08); }
.cat-att-add-field i { font-size: 12px; color: #94a3b8; flex-shrink: 0; transition: color 0.15s ease; }
.cat-att-add-field:focus-within i { color: #0c4d8b; }
.cat-att-add-field input {
	border: none !important;
	background: transparent !important;
	font-size: 12px;
	color: #1e293b;
	padding: 9px 0;
	margin: 0;
	outline: none !important;
	width: 100%;
	font-family: inherit;
	box-shadow: none !important;
}
.cat-att-add-field input::placeholder { color: #94a3b8; }
/* Dropdown */
.cat-att-dropdown {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	margin-top: 4px;
	z-index: 200;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	max-height: 180px;
	overflow-y: auto;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
}
.cat-att-dropdown-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	font-size: 13px;
	color: #334155;
	cursor: pointer;
	transition: background 0.1s ease;
	border-bottom: 1px solid #f8fafc;
}
.cat-att-dropdown-item:last-child { border-bottom: none; }
.cat-att-dropdown-item:hover { background: #f0f7ff; }
.cat-att-dropdown-item i { font-size: 12px; color: #0c4d8b; opacity: 0.6; }
.cat-att-dropdown-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-att-dropdown-empty { padding: 12px; font-size: 12px; color: #94a3b8; text-align: center; }

/* Plant origin badge in component-search dropdowns (catalog + production
   "default components" pickers). Shared between .cat-att and .pdm-att
   contexts — both data shapes are produced by data=prod_att_search_items. */
.att-plant-badge {
	margin-left: auto;
	flex-shrink: 0;
	padding: 2px 7px;
	border-radius: 10px;
	background: #e0ecf8;
	color: #0c4d8b;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	line-height: 1.4;
}

/* Stock item modal attachment section */
.stock-att-section { border-top: 1px solid #e2e8f0; padding-top: 10px; }
.stock-att-row { border-bottom: 1px solid #f1f5f9; }
.stock-att-row:last-child { border-bottom: none; }
.stock-att-qty { border: 1px solid #d1d5db; border-radius: 4px; }
.stock-att-results { position: absolute; left: 0; right: 0; background: #fff; border: 1px solid #d1d5db; border-radius: 6px; max-height: 180px; overflow-y: auto; z-index: 100; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.stock-att-result-item:hover { background-color: #f1f5f9; }
.stock-att-add { position: relative; }
.stock-att-empty { padding: 4px 0; }

/* ============================================
   Stock Production Modal (sp-)
   ============================================ */
.sp-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.4);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.2s ease;
	padding: 20px;
}
.sp-overlay.sp-visible { opacity: 1; }
/* Legacy outer-shell for the (now-retired) `.sp-overlay` modal. The
   modernized stock-production modal uses `.prod-modal` chrome — these
   shell properties must NOT cascade onto `.stock-prod-modal` or the
   prod-modal sizing/opacity/transform will be overridden. */
.sp-modal {
	background: #fff;
	border-radius: 16px;
	width: 100%;
	max-width: 480px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.08);
	transform: translateY(12px) scale(0.98);
	transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
	opacity: 0;
}
.sp-overlay.sp-visible .sp-modal { transform: translateY(0) scale(1); opacity: 1; }
.sp-modal::-webkit-scrollbar { width: 5px; }
.sp-modal::-webkit-scrollbar-track { background: transparent; }
.sp-modal::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.sp-modal::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Header */
.sp-header {
	display: flex;
	align-items: center;
	padding: 20px 24px 16px;
	border-bottom: 1px solid #f1f5f9;
}
.sp-header-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 600;
	color: #1e293b;
	margin: 0;
	flex: 1;
	min-width: 0;
}
.sp-header-title i { font-size: 17px; color: #0c4d8b; opacity: 0.85; }
.sp-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	border: none;
	background: transparent;
	color: #94a3b8;
	font-size: 14px;
	cursor: pointer;
	transition: all 0.15s ease;
	flex-shrink: 0;
	margin-left: auto;
	padding: 0;
}
.sp-close:hover { background: #f1f5f9; color: #475569; }

/* Body */
.sp-body { padding: 20px 24px 24px; }

/* Search */
.sp-search-group {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 0 14px;
	transition: all 0.15s ease;
}
.sp-search-group:focus-within {
	border-color: #0c4d8b;
	box-shadow: 0 0 0 3px rgba(12, 77, 139, 0.08);
}
.sp-search-group i.sp-search-icon { font-size: 14px; color: #94a3b8; transition: color 0.15s ease; flex-shrink: 0; line-height: 1; }
.sp-search-group:focus-within i.sp-search-icon { color: #0c4d8b; }
/* Specificity boost: beat div.qc_add input (0,1,2) with .sp-modal .sp-search-group input (0,2,1) */
:is(.sp-modal, .stock-prod-modal) .sp-search-group input {
	border: none;
	border-bottom: none;
	background: transparent;
	font-size: 14px;
	color: #1e293b;
	padding: 12px 0;
	margin: 0;
	outline: none;
	width: 100%;
	font-family: inherit;
	line-height: 1.4;
}
:is(.sp-modal, .stock-prod-modal) .sp-search-group input::placeholder { color: #94a3b8; font-weight: 400; }

/* Search Results */
.sp-results { margin-top: 8px; max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.sp-results::-webkit-scrollbar { width: 4px; }
.sp-results::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 2px; }
.sp-results .char { font-size: 12px; color: #94a3b8; text-align: center; padding: 12px 0; }
/* Override global span.srch_cus overflow:hidden + div.qc_add span.srch_gr margins */
:is(.sp-modal, .stock-prod-modal) span.srch_cus { border-radius: 8px; padding: 10px 14px; margin: 0; border: 1px solid #e2e8f0; transition: all 0.15s ease; overflow: visible; display: block; font-size: 13px; }
:is(.sp-modal, .stock-prod-modal) span.srch_cus.srch_gr { margin: 0; padding: 10px 14px; display: block; }
:is(.sp-modal, .stock-prod-modal) span.srch_cus:hover { border-color: #0c4d8b; background: #f0f7ff; box-shadow: 0 2px 8px rgba(12, 77, 139, 0.08); }
:is(.sp-modal, .stock-prod-modal) span.srch_cus i.fa-plus-circle { color: #0c4d8b; transition: transform 0.15s ease; }
:is(.sp-modal, .stock-prod-modal) span.srch_cus:hover i.fa-plus-circle { transform: scale(1.15); }

/* Selected Product Banner */
.sp-selected {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: #f0f7ff;
	border: 1px solid #bfdbfe;
	border-radius: 8px;
	margin-bottom: 20px;
	cursor: pointer;
	transition: all 0.15s ease;
}
.sp-selected:hover { background: #e0efff; border-color: #93c5fd; }
.sp-selected-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: #0c4d8b;
	color: #fff;
	font-size: 13px;
	flex-shrink: 0;
}
.sp-selected-name { flex: 1; font-size: 13px; font-weight: 600; color: #1e293b; line-height: 1.3; }
.sp-selected-change { font-size: 11px; color: #0c4d8b; font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }

/* Section Headers */
.sp-section-head {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 600;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 12px;
}
.sp-section-head i { font-size: 12px; color: #94a3b8; }
.sp-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: #e0efff;
	color: #0c4d8b;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}

/* Form Fields */
.sp-form { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.sp-form-row { display: flex; gap: 10px; }
.sp-field {
	display: flex;
	align-items: center;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	transition: all 0.15s ease;
	position: relative;
	flex: 1;
	min-width: 0;
}
.sp-field:focus-within { border-color: #0c4d8b; box-shadow: 0 0 0 2px rgba(12, 77, 139, 0.1); }
.sp-field[data-label]::before {
	content: attr(data-label);
	position: absolute;
	top: -7px;
	left: 6px;
	padding: 0 4px;
	background: #fff;
	color: #64748b;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	pointer-events: none;
	z-index: 1;
}
/* Specificity boost: beat div.qc_add select/input (0,1,2) */
:is(.sp-modal, .stock-prod-modal) .sp-field select,
:is(.sp-modal, .stock-prod-modal) .sp-field input[type="text"],
:is(.sp-modal, .stock-prod-modal) .sp-field input[type="number"] {
	border: none;
	border-bottom: none;
	background-color: transparent;
	font-size: 13px;
	font-family: inherit;
	color: #1e293b;
	padding: 8px 10px;
	margin: 0;
	outline: none;
	width: 100%;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	box-shadow: none;
}
:is(.sp-modal, .stock-prod-modal) .sp-field select {
	cursor: pointer;
	padding-right: 24px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path fill="%2394a3b8" d="M5 6L0 0h10z"/></svg>');
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 8px;
}
/* Focus only on container, never on the input itself */
:is(.sp-modal, .stock-prod-modal) .sp-search-group input:focus,
:is(.sp-modal, .stock-prod-modal) .sp-field input:focus,
:is(.sp-modal, .stock-prod-modal) .sp-field select:focus,
:is(.sp-modal, .stock-prod-modal) .sp-att-add-field input:focus,
:is(.sp-modal, .stock-prod-modal) .sp-att-stepper input:focus {
	border-color: transparent;
	box-shadow: none;
	outline: none;
}
.sp-field.sp-disabled { background: #f8fafc; opacity: 0.7; }
.sp-field.sp-disabled select { pointer-events: none; }
.sp-field.sp-field-error { border-color: #dc2626; }
.sp-field.sp-field-error[data-label]::before { color: #dc2626; }

/* Divider */
.sp-divider { height: 1px; background: #f1f5f9; margin: 4px 0 16px; }

/* ---- Attachments ---- */
.sp-att { margin-bottom: 24px; }
.sp-att-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.sp-att-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	transition: all 0.2s ease;
	animation: sp-att-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes sp-att-in { from { opacity: 0; transform: translateY(-8px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.sp-att-row:hover { border-color: #cbd5e1; background: #f1f5f9; }
.sp-att-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	background: #e0efff;
	color: #0c4d8b;
	font-size: 11px;
	flex-shrink: 0;
}
.sp-att-name { flex: 1; font-size: 13px; font-weight: 500; color: #334155; min-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Quantity Stepper */
.sp-att-stepper {
	display: flex;
	align-items: center;
	border: 1px solid #e2e8f0;
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
	flex-shrink: 0;
}
:is(.sp-modal, .stock-prod-modal) .sp-att-stepper button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 17px;
	height: 17px;
	border: none;
	background: transparent;
	color: #64748b;
	font-size: 8px;
	cursor: pointer;
	transition: all 0.1s ease;
	padding: 0;
	margin: 0;
}
:is(.sp-modal, .stock-prod-modal) .sp-att-stepper button:hover { background: #f1f5f9; color: #0c4d8b; }
:is(.sp-modal, .stock-prod-modal) .sp-att-stepper button:active { background: #e2e8f0; }
:is(.sp-modal, .stock-prod-modal) .sp-att-stepper input {
	width: 22px;
	text-align: center;
	border: none;
	border-left: 1px solid #e2e8f0;
	border-right: 1px solid #e2e8f0;
	border-bottom: none;
	font-size: 11px;
	font-weight: 600;
	color: #1e293b;
	padding: 1px 0;
	margin: 0;
	outline: none;
	background: transparent;
	box-shadow: none;
	-moz-appearance: textfield;
	font-family: inherit;
	line-height: 1;
}
:is(.sp-modal, .stock-prod-modal) .sp-att-stepper input::-webkit-outer-spin-button,
:is(.sp-modal, .stock-prod-modal) .sp-att-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Remove Button */
.sp-att-remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 6px;
	border: none;
	background: transparent;
	color: #cbd5e1;
	font-size: 12px;
	cursor: pointer;
	transition: all 0.15s ease;
	padding: 0;
	flex-shrink: 0;
}
.sp-att-remove:hover { background: #fef2f2; color: #dc2626; }

/* Empty State */
.sp-att-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px 16px;
	border: 1.5px dashed #e2e8f0;
	border-radius: 8px;
	text-align: center;
	gap: 6px;
}
.sp-att-empty i { font-size: 20px; color: #cbd5e1; }
.sp-att-empty span { font-size: 12px; color: #94a3b8; font-weight: 500; }

/* Add Attachment Search */
.sp-att-add-wrap { position: relative; }
.sp-att-add-field {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 12px;
	border: 1px dashed #d1d5db;
	border-radius: 8px;
	background: #fafbfc;
	transition: all 0.15s ease;
	cursor: text;
}
.sp-att-add-field:focus-within { border-style: solid; border-color: #0c4d8b; background: #fff; box-shadow: 0 0 0 2px rgba(12, 77, 139, 0.08); }
.sp-att-add-field i { font-size: 12px; color: #94a3b8; flex-shrink: 0; transition: color 0.15s ease; }
.sp-att-add-field:focus-within i { color: #0c4d8b; }
:is(.sp-modal, .stock-prod-modal) .sp-att-add-field input {
	border: none;
	border-bottom: none;
	background: transparent;
	font-size: 12px;
	color: #1e293b;
	padding: 9px 0;
	margin: 0;
	outline: none;
	width: 100%;
	font-family: inherit;
	box-shadow: none;
}
:is(.sp-modal, .stock-prod-modal) .sp-att-add-field input::placeholder { color: #94a3b8; }

/* Attachment Search Dropdown */
.sp-att-dropdown {
	position: fixed;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	max-height: 160px;
	overflow-y: auto;
	z-index: 10001;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
	display: none;
}
.sp-att-dropdown-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	font-size: 13px;
	color: #334155;
	cursor: pointer;
	transition: background 0.1s ease;
	border-bottom: 1px solid #f8fafc;
}
.sp-att-dropdown-item:last-child { border-bottom: none; }
.sp-att-dropdown-item:hover { background: #f0f7ff; }
.sp-att-dropdown-item i { font-size: 12px; color: #0c4d8b; opacity: 0.6; }
.sp-att-dropdown-empty { padding: 12px; font-size: 12px; color: #94a3b8; text-align: center; }

/* Submit Button */
.sp-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 12px 20px;
	border: none;
	border-radius: 10px;
	background: #0c4d8b;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: all 0.2s ease;
	margin-top: 4px;
}
.sp-submit:hover { background: #0a3f73; box-shadow: 0 4px 14px rgba(12, 77, 139, 0.3); transform: translateY(-1px); }
.sp-submit:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(12, 77, 139, 0.2); }
.sp-submit i { font-size: 15px; }
.sp-submit.sp-loading { pointer-events: none; opacity: 0.7; }

@media (max-width: 520px) {
	.sp-overlay { padding: 10px; }
	.sp-modal { border-radius: 12px; }
	.sp-body { padding: 16px 18px 20px; }
	.sp-form-row { flex-direction: column; }
	.sp-header { padding: 16px 18px 14px; }
}

/* QC attachment display */
.qc-att-section {
	margin: 10px 0;
	padding: 8px 12px;
	background-color: #f8fafc;
	border-radius: 6px;
	border: 1px solid #e2e8f0;
}
/* ───────────────────────────────────────────────
   Schedule Attachment Modal (sch-att)
   ─────────────────────────────────────────────── */
.sch-att-overlay {
	position: fixed; inset: 0; background: rgba(15,23,42,0.4);
	z-index: 10000; display: flex; align-items: center; justify-content: center;
	animation: sp-fade-in 0.2s ease;
}
.sch-att-modal {
	background: #fff; border-radius: 16px; width: 420px; max-width: 94vw;
	max-height: 80vh; display: flex; flex-direction: column;
	box-shadow: 0 20px 60px rgba(0,0,0,0.18); animation: sp-modal-in 0.25s cubic-bezier(0.34,1.56,0.64,1);
	overflow: hidden;
}
.sch-att-header {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 18px; border-bottom: 1px solid #e2e8f0;
	background: linear-gradient(135deg,#f8fafc,#f1f5f9);
}
.sch-att-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: #1e293b; }
.sch-att-title i { color: #667eea; margin-right: 6px; }
.sch-att-close {
	background: none; border: none; cursor: pointer; color: #94a3b8;
	font-size: 16px; padding: 4px; border-radius: 6px; transition: all 0.15s;
}
.sch-att-close:hover { background-color: #f1f5f9; color: #475569; }
.sch-att-body {
	flex: 1; overflow-y: auto; padding: 12px 18px; min-height: 60px;
}
.sch-att-loading { text-align: center; padding: 20px 0; color: #94a3b8; font-size: 13px; }
.sch-att-empty {
	text-align: center; padding: 24px 0; color: #94a3b8; font-size: 13px;
	border: 2px dashed #e2e8f0; border-radius: 8px;
}
.sch-att-empty i { display: block; font-size: 22px; margin: 0 auto 6px; }
.sch-att-list {}
.sch-att-row {
	display: flex; align-items: center; gap: 10px; padding: 8px 0;
	border-bottom: 1px solid #f1f5f9;
	animation: sp-att-in 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.sch-att-row:last-child { border-bottom: none; }
.sch-att-icon { color: #667eea; font-size: 13px; flex-shrink: 0; }
.sch-att-name { flex: 1; font-size: 13px; font-weight: 500; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sch-att-stepper {
	display: flex; align-items: center; border: 1px solid #e2e8f0; border-radius: 6px;
	overflow: hidden; flex-shrink: 0;
}
.sch-att-stepper button {
	background: #f8fafc; border: none; cursor: pointer; padding: 3px 7px;
	color: #64748b; font-size: 10px; transition: background-color 0.15s;
}
.sch-att-stepper button:hover { background-color: #e2e8f0; }
.sch-att-qty {
	width: 28px; text-align: center; border: none; border-left: 1px solid #e2e8f0;
	border-right: 1px solid #e2e8f0; font-size: 12px; font-weight: 600; padding: 2px 0;
	-moz-appearance: textfield; color: #334155; background: #fff;
}
.sch-att-qty::-webkit-inner-spin-button,
.sch-att-qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sch-att-remove {
	background: none; border: none; cursor: pointer; color: #cbd5e1;
	font-size: 13px; padding: 4px; border-radius: 6px; transition: all 0.15s; flex-shrink: 0;
}
.sch-att-remove:hover { color: #ef4444; background-color: #fef2f2; }
/* Add field */
.sch-att-add-wrap { padding: 0 18px 8px; }
.sch-att-add-field {
	display: flex; align-items: center; gap: 8px; padding: 8px 12px;
	border: 2px dashed #e2e8f0; border-radius: 8px; transition: border-color 0.15s;
}
.sch-att-add-field:focus-within { border-color: #667eea; }
.sch-att-add-field i { color: #94a3b8; font-size: 12px; }
.sch-att-search {
	flex: 1; border: none; outline: none; font-size: 13px; background: transparent; color: #334155;
}
.sch-att-search::placeholder { color: #94a3b8; }
/* Dropdown */
.sch-att-dropdown, .sch-att-dropdown-detached {
	position: fixed; background: #fff; border: 1px solid #e2e8f0; border-radius: 6px;
	max-height: 180px; overflow-y: auto; z-index: 10001; display: none;
	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.sch-att-dropdown-item {
	display: flex; align-items: center; gap: 8px; padding: 8px 12px;
	cursor: pointer; font-size: 13px; color: #334155; transition: background-color 0.1s;
}
.sch-att-dropdown-item:hover { background-color: #f1f5f9; }
.sch-att-dropdown-item i { color: #667eea; font-size: 12px; }
.sch-att-dropdown-empty { padding: 10px 12px; font-size: 12px; color: #94a3b8; text-align: center; }
/* Footer */
.sch-att-footer {
	display: flex; gap: 8px; padding: 12px 18px; border-top: 1px solid #e2e8f0;
	background: #f8fafc;
}
.sch-att-btn {
	flex: 1; padding: 8px 0; border: none; border-radius: 8px; cursor: pointer;
	font-size: 13px; font-weight: 600; transition: all 0.15s;
}
.sch-att-btn-done { background: #667eea; color: #fff; }
.sch-att-btn-done:hover { background: #5a6fd6; }
.sch-att-btn-clear { background: #f1f5f9; color: #64748b; }
.sch-att-btn-clear:hover { background: #e2e8f0; color: #475569; }
/* jBox attachment display */
.sch-att-display {
	margin: 6px 0; padding: 6px 8px; background: #f8fafc; border-radius: 6px;
	border: 1px solid #e2e8f0; font-size: 12px; color: #475569;
}
.sch-att-display > i { color: #667eea; margin-right: 4px; }
.sch-att-item {
	padding: 2px 0 2px 18px; font-size: 11px; color: #64748b;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.qc-att-title {
	font-weight: 600;
	font-size: 13px;
	margin-bottom: 6px;
	color: #475569;
}
.qc-att-title i { color: #667eea; margin-right: 4px; }
.qc-att-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 0;
	font-size: 13px;
}
.qc-att-name { flex: 1; }
.qc-att-qty { color: #64748b; }
.qc-att-status {
	font-size: 11px;
	font-weight: 600;
	padding: 2px 6px;
	border-radius: 3px;
}
.qc-att-pending { background-color: #e0f2fe; color: #0284c7; }
.qc-att-consumed { background-color: #dcfce7; color: #16a34a; }
.qc-att-reversed { background-color: #fef3c7; color: #d97706; }

/* STRUCTURE PRICE MISMATCH MODAL ================================= */
.str-sum-modal {
	padding: 4px 0 0;
	font-family: 'Montserrat', sans-serif;
	color: #1e293b;
	min-width: 420px;
}
.str-sum-intro {
	font-size: 13px;
	color: #475569;
	line-height: 1.5;
	padding: 0 6px 14px;
}
.str-sum-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 360px;
	overflow-y: auto;
	padding: 4px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
}
.str-sum-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	margin: 0;
}
.str-sum-row:hover { border-color: #cbd5e1; }
.str-sum-row input.str-sum-cb {
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	padding: 0;
	accent-color: #0c4d8b;
	cursor: pointer;
	flex: 0 0 auto;
}
.str-sum-row-locked {
	background: #f1f5f9;
	cursor: not-allowed;
	opacity: 0.75;
}
.str-sum-row-locked input.str-sum-cb { cursor: not-allowed; }
.str-sum-info { flex: 1 1 auto; min-width: 0; }
.str-sum-name {
	font-size: 13px;
	font-weight: 600;
	color: #0f172a;
	margin-bottom: 4px;
	word-break: break-word;
}
.str-sum-prices {
	font-size: 12px;
	color: #64748b;
	font-variant-numeric: tabular-nums;
}
.str-sum-price { color: #334155; font-weight: 500; }
.str-sum-delta {
	color: #c2410c;
	font-weight: 600;
	margin-left: 2px;
}
.str-sum-note {
	margin-top: 6px;
	font-size: 11px;
	color: #b45309;
	font-style: italic;
}
.str-sum-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 14px;
	padding: 0 2px;
}
.str-sum-btn {
	padding: 9px 16px;
	font-size: 13px;
	font-weight: 600;
	border-radius: 6px;
	border: 1px solid transparent;
	cursor: pointer;
	font-family: inherit;
	transition: all 0.15s ease;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.str-sum-btn-cancel {
	background: #fff;
	color: #475569;
	border-color: #cbd5e1;
}
.str-sum-btn-cancel:hover {
	background: #f1f5f9;
	color: #1e293b;
	border-color: #94a3b8;
}
.str-sum-btn-adjust {
	background: #0c4d8b;
	color: #fff;
}
.str-sum-btn-adjust:hover {
	background: #0a3d6e;
	box-shadow: 0 2px 6px rgba(12, 77, 139, 0.25);
}
.str-sum-btn-adjust i { font-size: 12px; }

@media (max-width: 600px) {
	.str-sum-modal { min-width: 0; }
	.str-sum-list { max-height: 50vh; }
	.str-sum-row { padding: 10px; }
	.str-sum-actions { flex-direction: column-reverse; }
	.str-sum-btn { width: 100%; justify-content: center; padding: 11px 14px; }
}

/* UNIFIED TICKET-ISSUE MODAL ========================================= */
.tic-issues-modal {
	font-family: 'Montserrat', sans-serif;
	color: #0f172a;
	min-width: 440px;
	max-width: 100%;
	padding: 2px 0 0;
}
.tic-summary {
	font-size: 13px;
	color: #475569;
	line-height: 1.55;
	padding: 0 4px 14px;
}
.tic-summary b { color: #0c4d8b; font-weight: 700; }
.tic-groups {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-height: 56vh;
	overflow-y: auto;
	padding: 2px;
}
.tic-card {
	position: relative;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 14px 18px 16px 22px;       /* extra bottom + left-of-strip space */
	background: #fff;
	/* No overflow:hidden — cards must grow to fit their content (rows
	   were getting their last line clipped). The accent strip's
	   border-radii below keep it inside the card's rounded corners. */
}
.tic-card::before {
	content: '';
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 4px;
	background: var(--tic-accent, #cbd5e1);
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}
/* When _renderIssueGroup returned no per-item rows (e.g. ship-date-missing,
   customer-hold — single-fact issues whose card title + hint already say
   everything), the card naturally has no .tic-items child. Drop the dashed
   divider under the hint so the card closes cleanly. */
.tic-card:not(:has(.tic-items)) .tic-hint {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 2px;
}
.tic-sev-block { --tic-accent: #b91c1c; background: linear-gradient(90deg, #fef2f2 0%, #fff 45%); }
.tic-sev-warn  { --tic-accent: #d97706; background: linear-gradient(90deg, #fffbeb 0%, #fff 45%); }
.tic-sev-fix   { --tic-accent: #1d4ed8; background: linear-gradient(90deg, #eff6ff 0%, #fff 45%); }
.tic-sev-info  { --tic-accent: #334155; background: #fff; }
.tic-card-hdr {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 6px;
}
.tic-icon {
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	border-radius: 8px;
	background: var(--tic-accent);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
/* Title + severity pill share one line (pill inline with the issue title),
   vertically centered. flex-wrap lets the pill drop below only if a long title
   needs the whole row. margin-top nudges the row to line up with the icon. */
.tic-title-wrap { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.tic-title {
	font-size: 14px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.3;
}
.tic-sev-tag {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tic-accent);
	border: 1px solid var(--tic-accent);
	padding: 1px 7px;
	border-radius: 100px;
	line-height: 1.5;
}
.tic-hint {
	font-size: 12px;
	color: #475569;
	line-height: 1.5;
	padding: 2px 0 10px;
	border-bottom: 1px dashed #e2e8f0;
	margin-bottom: 10px;
}
/* "Break out to {plant}" action on the plant-mismatch card */
.tic-card-action {
	margin-top: 10px;
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 8px 12px;
	font-size: 12.5px;
	font-weight: 700;
	font-family: inherit;
	color: #0c4d8b;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	border-radius: 8px;
	cursor: pointer;
	transition: background .14s ease, border-color .14s ease;
}
.tic-card-action:hover { background: #dbeafe; border-color: #93c5fd; }
.tic-card-action i { font-size: 12px; }
.tic-card-action.is-loading, .tic-card-action:disabled { opacity: 0.7; cursor: default; }
.tic-card-action.is-loading:hover { background: #eff6ff; border-color: #bfdbfe; }

/* Structure-missing-items card: the structure is the heading (cubes icon), the
   sub-lines that still need to ship are listed beneath it so the user acts on
   the ITEMS, not the structure. */
.tic-row-struct .tic-row-name { display: flex; align-items: center; gap: 7px; }
.tic-struct-ic { color: #64748b; font-size: 12px; }
.tic-struct-missing {
	list-style: none;
	margin: 7px 0 2px;
	padding: 0 0 0 20px;
	border-left: 2px solid #e2e8f0;
}
.tic-struct-missing li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 4px 0;
	font-size: 12.5px;
	border-bottom: 1px dashed #f1f5f9;
}
.tic-struct-missing li:last-child { border-bottom: none; }
.tic-struct-miss-name { color: #0f172a; font-weight: 600; }
.tic-struct-miss-qty {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 700;
	color: #b45309;
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: 999px;
	padding: 1px 9px;
	white-space: nowrap;
}

/* ── Break-out modal (rides WPModal) ─────────────────────────────────────── */
#bo_modal .wpmodal-card { max-width: 900px; }
.bo-intro { font-size: 12.5px; color: #475569; line-height: 1.55; margin-bottom: 12px; }
.bo-note { font-size: 11.5px; color: #64748b; margin-top: 10px; line-height: 1.5; }
.bo-note i { color: #94a3b8; margin-right: 5px; }
.bo-table-wrap { max-height: 52vh; overflow: auto; border: 1px solid #e2e8f0; border-radius: 10px; }
.bo-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.bo-table thead th {
	position: sticky; top: 0; z-index: 1;
	background: #f8fafc; text-align: left;
	font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
	color: #64748b; font-weight: 700;
	padding: 9px 10px; border-bottom: 1px solid #e2e8f0; white-space: nowrap;
}
.bo-table tbody td { padding: 9px 10px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.bo-table tbody tr:last-child td { border-bottom: none; }
.bo-c-inc { width: 42px; text-align: center; }
.bo-c-item { min-width: 170px; max-width: 240px; }
.bo-name { font-weight: 600; color: #0f172a; }
.bo-sub { font-size: 11px; color: #94a3b8; margin-top: 1px; }

/* Include toggle — modern circular pill (navy fill + check when on) */
.bo-check { display: inline-flex; cursor: pointer; }
.bo-check input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.bo-check-dot {
	width: 21px; height: 21px; border-radius: 50%;
	border: 1.5px solid #cbd5e1; background: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.bo-check-dot::after {
	content: "\f00c"; font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome"; font-weight: 900;
	font-size: 10px; line-height: 1; color: #fff;
	opacity: 0; transform: scale(.5); transition: opacity .15s ease, transform .15s ease;
}
.bo-check:hover .bo-check-dot { border-color: #0c4d8b; }
.bo-check input:checked + .bo-check-dot { background: #0c4d8b; border-color: #0c4d8b; box-shadow: 0 1px 2px rgba(12,77,139,.25); }
.bo-check input:checked + .bo-check-dot::after { opacity: 1; transform: scale(1); }
.bo-check input:focus-visible + .bo-check-dot { outline: 2px solid #0c4d8b; outline-offset: 2px; }

/* Break-out qty: the "/N" max sits inside the box, pinned right */
.bo-qty-wrap { position: relative; display: inline-block; }
.bo-qty {
	box-sizing: border-box; width: 58px; height: 30px; padding: 0 27px 0 9px;
	border: 1px solid #cbd5e1; border-radius: 8px;
	font-size: 13.5px; font-weight: 600; font-family: inherit; -moz-appearance: textfield;
}
.bo-qty::-webkit-outer-spin-button, .bo-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bo-ofqty {
	position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
	color: #94a3b8; font-size: 13px; pointer-events: none;
}
.bo-c-qty { white-space: nowrap; width: 1%; }
/* Recode picker uses the app's hx-single (searchable Alpine select) */
.bo-c-code { min-width: 200px; }
.bo-c-code .hx-single { width: 100%; max-width: 240px; }
.bo-c-code .hx-single-trigger { width: 100%; }
/* The panel teleports to <body> (z-index 9999) but WPModal's overlay is 50000,
   so lift the break-out pickers' panels above the modal. */
.hx-single-panel[id^="bo_p_"] { z-index: 50001; }
/* Compact the touch-sized hx-single (44px / 14–16px) for this dense desktop
   modal — scoped to the break-out cells + their teleported panels only.
   Match the qty input's height + rounded border so the two read as a pair. */
.bo-c-code .hx-single-trigger { height: 30px; min-height: 0; padding: 0 28px 0 10px; font-size: 12px; line-height: 1.2; border-radius: 8px; border-color: #cbd5e1; }
.bo-c-code .hx-single-chev { right: 9px; font-size: 10px !important; }
/* Selected vs not — tint the whole row, not just the left pill, so the
   choice is obvious at a glance (unselected rows read muted). */
#bo_modal tr.bo-row > td { transition: background .12s ease; }
#bo_modal tr.bo-row:has(.bo-inc:checked) > td { background: #eff6ff; }
#bo_modal tr.bo-row:not(:has(.bo-inc:checked)) .bo-name,
#bo_modal tr.bo-row:not(:has(.bo-inc:checked)) .bo-sub { opacity: .55; }
[data-theme="dark"] #bo_modal tr.bo-row:has(.bo-inc:checked) > td { background: #15233b; }
.hx-single-panel[id^="bo_p_"] .hx-single-search { padding: 6px 8px; }
.hx-single-panel[id^="bo_p_"] .hx-single-search input { height: 30px !important; font-size: 12px !important; padding: 0 10px 0 28px !important; }
.hx-single-panel[id^="bo_p_"] .hx-single-search i { left: 17px; font-size: 11px; }
.hx-single-panel[id^="bo_p_"] .hx-single-opt { padding: 6px 10px; font-size: 12px; }
.hx-single-panel[id^="bo_p_"] .hx-single-opt-title { font-size: 12px; }
/* Option row: plant abbreviation pill + item name (left), qoh inventory
   chip (right, the add-to-order search chip). */
.hx-single-panel[id^="bo_p_"] .bo-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bo-opt-l { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bo-opt-chip { flex: 0 0 auto; font-size: 9.5px; font-weight: 700; letter-spacing: .03em; padding: 2px 7px; border-radius: 999px; background: #eef4fb; color: #0c4d8b; white-space: nowrap; }
.bo-opt-name { font-size: 12px; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-single-panel[id^="bo_p_"] .qoh { flex: 0 0 auto; margin: 0; }
[data-theme="dark"] .bo-opt-chip { background: #16233b; color: #93c5fd; }
[data-theme="dark"] .bo-opt-name { color: #e2e8f0; }
.bo-inv { font-variant-numeric: tabular-nums; font-weight: 600; color: #334155; }
.bo-status { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.bo-status.bo-ok   { color: #047857; background: #ecfdf5; }
.bo-status.bo-warn { color: #b45309; background: #fffbeb; }
.bo-status.bo-bad  { color: #b91c1c; background: #fef2f2; }

[data-theme="dark"] .tic-card-action { color: #93c5fd; background: #16233b; border-color: #29406b; }
[data-theme="dark"] .tic-card-action:hover { background: #1c2e4d; border-color: #3a527a; }
[data-theme="dark"] .bo-intro { color: #94a3b8; }
[data-theme="dark"] .bo-table-wrap { border-color: #263048; }
[data-theme="dark"] .bo-table thead th { background: #141d2e; color: #8aa0bd; border-color: #263048; }
[data-theme="dark"] .bo-table tbody td { border-color: #1c2638; }
[data-theme="dark"] .bo-name { color: #e2e8f0; }
[data-theme="dark"] .bo-qty, [data-theme="dark"] .bo-code { background: #0f1623; border-color: #2d3a52; color: #e2e8f0; }
[data-theme="dark"] .bo-check-dot { background: #0f1623; border-color: #3a4863; }
[data-theme="dark"] .bo-check input:checked + .bo-check-dot { background: #2563eb; border-color: #2563eb; }
[data-theme="dark"] .bo-search { background: #0f1623; border-color: #243049; color: #cbd5e1; }
[data-theme="dark"] .bo-inv { color: #cbd5e1; }

.tic-items { display: flex; flex-direction: column; gap: 6px; }
.tic-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 7px;
	cursor: default;
	margin: 0;
}
.tic-row-check {
	background: #fff;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tic-row-check:hover { border-color: #93c5fd; box-shadow: 0 1px 3px rgba(29, 78, 216, 0.1); }
.tic-row input.tic-str-cb {
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	padding: 0;
	accent-color: #1d4ed8;
	cursor: pointer;
	flex: 0 0 16px;
}
.tic-row-locked { opacity: 0.65; cursor: not-allowed; }
.tic-row-locked input.tic-str-cb { cursor: not-allowed; }
.tic-row-info { flex: 1 1 auto; min-width: 0; }
.tic-row-name {
	font-size: 13px;
	font-weight: 600;
	color: #0f172a;
	line-height: 1.35;
	word-break: break-word;
	margin-bottom: 3px;
}
.tic-row-meta {
	font-size: 12px;
	color: #64748b;
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
}
.tic-row-meta .tic-mono { color: #0f172a; font-weight: 600; padding: 0 2px; }
.tic-row-meta .tic-sep  { color: #cbd5e1; padding: 0 6px; }
.tic-row-meta .tic-delta { color: #c2410c; font-weight: 700; margin-left: 4px; }
/* Plant-mismatch rows: one compact line — name (ellipsis) + plant chip right. */
.tic-row.tic-row-pm { align-items: center; padding: 7px 10px 7px 12px; gap: 10px; }
.tic-pm-name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 13px;
	font-weight: 600;
	color: #0f172a;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tic-pm-plant {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 9px;
	border-radius: 999px;
	background: #fffbeb;
	border: 1px solid #fde68a;
	color: #b45309;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}
.tic-pm-plant i { font-size: 9px; opacity: 0.85; }
/* Cap the list at 5 one-line rows + a peek of the 6th so the scroll is obvious. */
.tic-items.tic-items-scroll { max-height: 224px; overflow-y: auto; padding-right: 3px; }
.tic-items-scroll::-webkit-scrollbar { width: 8px; }
.tic-items-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.tic-items-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.tic-items-scroll::-webkit-scrollbar-track { background: transparent; }
.tic-row-note {
	margin-top: 6px;
	font-size: 11.5px;
	color: #64748b;
	line-height: 1.5;
	font-style: italic;
}
.tic-row-btn {
	flex: 0 0 auto;
	align-self: center;
	padding: 7px 11px;
	font-size: 11.5px;
	font-weight: 600;
	font-family: inherit;
	border: 1px solid var(--tic-accent);
	color: var(--tic-accent);
	background: #fff;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.15s ease;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.tic-row-btn:hover {
	background: var(--tic-accent);
	color: #fff;
	box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
.tic-row-btn i { font-size: 10px; }
.tic-row-stack {
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
}
.tic-row-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 2px;
}
.tic-row-actions .tic-row-btn {
	flex: 1 1 auto;
	justify-content: center;
	padding: 9px 14px;
	font-size: 12px;
}
.tic-row-btn-primary {
	background: var(--tic-accent);
	color: #fff !important;
	border-color: var(--tic-accent);
}
.tic-row-btn-primary:hover {
	background: #a16207;
	border-color: #a16207;
	color: #fff;
}
.tic-row-btn-primary:disabled {
	background: #94a3b8 !important;
	border-color: #94a3b8 !important;
	color: #fff;
	cursor: default;
	box-shadow: none;
}
.tic-row-btn-neutral {
	background: #fff;
	color: #475569;
	border-color: #cbd5e1;
}
.tic-row-btn-neutral:hover {
	background: #f1f5f9;
	color: #0f172a;
	border-color: #94a3b8;
}
.tic-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid #e2e8f0;
}
.tic-btn {
	padding: 9px 16px;
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	border-radius: 6px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: all 0.15s ease;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.tic-btn-cancel {
	background: #fff;
	color: #475569;
	border-color: #cbd5e1;
}
.tic-btn-cancel:hover {
	background: #f1f5f9;
	color: #0f172a;
	border-color: #94a3b8;
}
.tic-btn-primary {
	background: #0c4d8b;
	color: #fff;
}
.tic-btn-primary:hover {
	background: #0a3d6e;
	box-shadow: 0 2px 6px rgba(12, 77, 139, 0.25);
}
.tic-btn i { font-size: 12px; }

@media (max-width: 600px) {
	.tic-issues-modal { min-width: 0; }
	.tic-groups { max-height: 55vh; }
	.tic-card { padding: 12px 12px 10px 14px; }
	.tic-row { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; }
	.tic-row-btn { width: 100%; justify-content: center; padding: 10px 12px; }
	.tic-actions { flex-direction: column-reverse; }
	.tic-btn { width: 100%; justify-content: center; padding: 11px 14px; }
}

/* =================================================================
   Modal-shell safety net for the recode + swap overlays.
   Box-sizing: border-box on every descendant guarantees that padding
   + border are counted INTO the element's width — without this, a
   child with padding can compute to wider than its `width: 100%`
   parent and force horizontal overflow inside the modal. Scoped to
   these two overlays so we don't rewrite global box-sizing rules.
   ================================================================= */
#recode_modal_overlay,
#recode_modal_overlay *,
#recode_modal_overlay *::before,
#recode_modal_overlay *::after,
#swap_modal_overlay,
#swap_modal_overlay *,
#swap_modal_overlay *::before,
#swap_modal_overlay *::after {
	box-sizing: border-box;
}

/* Hard guard against ANY child trying to be wider than the body. */
#recode_modal_overlay .prod-panel-body,
#swap_modal_overlay .prod-panel-body {
	max-width: 100%;
}
#recode_modal_overlay .prod-panel-body > *,
#swap_modal_overlay .prod-panel-body > * {
	max-width: 100%;
	min-width: 0;
}

/* =================================================================
   Neutralize legacy `.prdi_items` chip styling for nested usage.
   The class is the 95px-wide pill button used in the structure
   detail panel (Edit Drawing, Convert to Group, etc.). switch_prd
   uses `closest('.prdi_items')` to look up data attrs on the recode
   / swap modal, so the class HAS to stay on the wrapper — but the
   chip's `width:95px; display:inline-flex; align-items:center` and
   the `input { max-width:72px }` rule below it would clip our
   search input to a tiny centered box. Override here so any
   `.prdi_items` that sits inside `.prod-panel-body` is treated as a
   plain block container.
   ================================================================= */
.prod-panel-body .prdi_items {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	cursor: default !important;
	text-align: left !important;
	font-size: inherit !important;
	font-weight: normal !important;
	color: inherit !important;
	box-sizing: border-box !important;
}
.prod-panel-body .prdi_items > i {
	font-size: inherit !important;
	color: inherit !important;
	display: inline !important;
	margin: 0 !important;
}
.prod-panel-body .prdi_items input,
.prod-panel-body .prdi_items select {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	font-size: inherit !important;
	text-align: left !important;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
}
.prod-panel-body .prdi_items input.recode-search-input,
.prod-panel-body .prdi_items input.swap-search-input {
	flex: 1 1 0% !important;
	width: 100% !important;
	min-width: 0 !important;
	padding: 11px 0 !important;
	font-size: 14px !important;
}

/* Force the .prod-panel-body, .swap-form, and the search wrappers to
   explicitly fill their parent. Without these, the browser's default
   `<input size=20>` natural width can collapse the chain back down to
   ~150px wide in a flex column whose alignment isn't actually
   stretching everything. */
.prod-modal-overlay .prod-panel-body { width: 100%; }
.swap-form,
.prod-panel-body .prdi_items.recode-modal,
.prod-panel-body .prdi_items.swap-search-cell { width: 100% !important; }
.prod-panel-body .recode-search,
.prod-panel-body .swap-search {
	width: 100% !important;
	box-sizing: border-box;
}
.prod-panel-body .prdi_items .recode-search-icon,
.prod-panel-body .prdi_items .swap-search-icon {
	font-size: 14px !important;
	color: #94a3b8 !important;
	display: inline-flex !important;
	margin: 0 !important;
	flex-shrink: 0;
}

/* Compact close button — the shared `.prod-panel-close` defaults to
   22px font-size and ~36px box (set in production.css). On these
   modals it reads as oversized next to the more compact contents.
   Match the order_files modal's tighter 28×28/16px treatment used
   elsewhere in the app. */
#recode_modal_overlay .prod-panel-close,
#swap_modal_overlay .prod-panel-close {
	width: 28px;
	height: 28px;
	padding: 0;
	font-size: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* =================================================================
   Recode Product modal
   Uses the shared `.prod-modal-overlay` shell from production.css so
   the chrome (overlay blur, panel header, close button) matches the
   production / trucking modals. Inner sections are .recode-* — the
   classes that switch_prd / recode_confirm look up by name to render
   their confirmation diff and success states.
   ================================================================= */

.recode-overlay .recode-modal-shell {
	max-width: 540px;
}

/* "Currently selected" header card */
.recode-current-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
}
.recode-current-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
}
.recode-current-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #94a3b8;
}
.recode-current-name {
	font-size: 14px;
	font-weight: 600;
	color: #0f172a;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1.3;
}

.recode-plant-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 26px;
	padding: 0 7px;
	border-radius: 7px;
	background: #0c4d8b;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	flex-shrink: 0;
	line-height: 1;
}
.recode-plant-pill.sm {
	min-width: 34px;
	height: 22px;
	padding: 0 6px;
	font-size: 10px;
	border-radius: 6px;
}
.recode-plant-pill--empty {
	background: #e2e8f0;
	color: #94a3b8;
}
.recode-plant-pill--empty i {
	font-size: 13px;
}

/* "Seconds" per-line badge — order-items row name column (#oli_items
   div.line .oli-col-name .pr_name), flags a line as sourced from seconds
   inventory (grp_items.from_seconds). Set from the detail-drawer toggle
   (set_line_seconds) and stamped on initial render by oli_build_item. Same
   orange identity as the forklift's SECONDS tag (css/qc.css
   .fork-cbx.inc_seconds) so the flag reads consistently everywhere it
   surfaces; dark-mode override in css/theme.css. */
.oli-col-name .pr_name.has-badge {
	display: flex;
	align-items: center;
	gap: 6px;
}
.oli-col-name .pr_name.has-badge textarea.oli-name {
	flex: 1 1 auto;
	min-width: 0;
}
.oli-seconds-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
	padding: 2px 8px;
	border-radius: 999px;
	background: #fff7ed;
	color: #c2410c;
	border: 1px solid #fdba74;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}
.oli-seconds-badge i {
	font-size: 9px;
}

/* Rename toggle */
.recode-toggle {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
	user-select: none;
}
.recode-toggle:hover {
	border-color: #cbd5e1;
	background: #f8fafc;
}
.recode-toggle-input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.recode-toggle-track {
	position: relative;
	display: inline-block;
	width: 36px;
	height: 20px;
	border-radius: 999px;
	background: #cbd5e1;
	flex-shrink: 0;
	margin-top: 1px;
	transition: background 0.18s ease;
}
.recode-toggle-thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
	transition: transform 0.18s ease;
}
.recode-toggle-input:checked ~ .recode-toggle-track {
	background: #0c4d8b;
}
.recode-toggle-input:checked ~ .recode-toggle-track .recode-toggle-thumb {
	transform: translateX(16px);
}
.recode-toggle-input:focus-visible ~ .recode-toggle-track {
	box-shadow: 0 0 0 3px rgba(12, 77, 139, 0.2);
}
.recode-toggle:has(.recode-toggle-input:checked) {
	border-color: #0c4d8b;
	background: #f0f7ff;
}
.recode-toggle-copy {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	flex: 1;
	line-height: 1.35;
	text-align: left;
}
.recode-toggle-title {
	font-size: 13px;
	font-weight: 600;
	color: #0f172a;
}
.recode-toggle-desc {
	font-size: 12px;
	color: #64748b;
}

/* Inner search/results container — sits inside .prod-panel-body */
.prod-panel-body > .recode-modal {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
}
.recode-modal * {
	box-sizing: border-box;
}

.recode-search {
	display: flex !important;
	align-items: center;
	gap: 10px;
	padding: 0 14px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	line-height: 1;
	width: auto !important;
}
.recode-search:focus-within {
	border-color: #0c4d8b;
	box-shadow: 0 0 0 3px rgba(12, 77, 139, 0.08);
}
.recode-search-icon {
	font-size: 14px;
	color: #94a3b8;
	flex-shrink: 0;
	transition: color 0.15s ease;
}
.recode-search:focus-within .recode-search-icon {
	color: #0c4d8b;
}
input.recode-search-input {
	border: none !important;
	border-bottom: none !important;
	background: transparent !important;
	font-size: 14px;
	color: #0f172a;
	padding: 11px 0;
	margin: 0;
	outline: none;
	width: 100%;
	font-family: inherit;
	line-height: 1.4;
	text-align: left;
}
input.recode-search-input::placeholder {
	color: #94a3b8;
	font-weight: 400;
}

/* Results — inherits .psrch_res but overrides absolute positioning */
.recode-results {
	margin: 4px 0 0 !important;
	padding: 0;
	max-height: 280px;
	overflow-y: auto;
	display: flex !important;
	flex-direction: column;
	gap: 6px;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	width: auto !important;
	left: auto !important;
	right: auto !important;
	top: auto !important;
	position: static !important;
}
.recode-results::-webkit-scrollbar { width: 5px; }
.recode-results::-webkit-scrollbar-track { background: transparent; }
.recode-results::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 3px;
}
.recode-results::-webkit-scrollbar-thumb:hover {
	background: #94a3b8;
}
.recode-results:empty {
	display: none !important;
}
.recode-results span.srch_cus {
	position: relative !important;
	display: flex !important;
	align-items: center;
	gap: 10px;
	padding: 11px 14px !important;
	margin: 0 !important;
	width: auto !important;
	border-radius: 10px !important;
	border: 1px solid #e2e8f0 !important;
	background: #ffffff !important;
	color: #0f172a !important;
	font-size: 13px;
	font-weight: 500;
	overflow: visible !important;
	text-align: left !important;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
	cursor: pointer;
}
.recode-results span.srch_cus:hover {
	border-color: #0c4d8b !important;
	background: #f0f7ff !important;
	box-shadow: 0 2px 8px rgba(12, 77, 139, 0.08) !important;
	transform: translateX(2px);
}
.recode-results span.srch_cus i.srch_icon { display: none !important; }
.recode-results span.srch_cus div.prd_loc.srch_plant {
	position: static !important;
	margin: 0 !important;
	min-width: 38px;
	width: auto;
	height: 22px;
	padding: 0 6px;
	border-radius: 6px;
	background: #0c4d8b;
	color: #ffffff;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	line-height: 1;
}
.recode-results span.srch_cus div.prd_loc.srch_plant i { display: none !important; }
.recode-results span.srch_cus div.prd_loc.srch_plant div.loc_let {
	position: static !important;
	color: #ffffff !important;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	margin: 0 !important;
	padding: 0 !important;
	text-shadow: none !important;
	transform: none !important;
	top: auto !important;
	left: auto !important;
}
.recode-results span.srch_cus .srch_info {
	display: flex !important;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
	padding: 0 !important;
	margin: 0 !important;
	text-align: left !important;
	line-height: 1.35;
}
.recode-results span.srch_cus .srch_info b {
	font-size: 13px;
	font-weight: 600;
	color: #0f172a;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.recode-results span.srch_cus .srch_cat {
	font-size: 11px;
	font-weight: 500;
	color: #64748b;
	background: transparent;
	padding: 0;
	margin: 0;
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.recode-results span.srch_cus::after {
	content: "\f061";
	font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro", FontAwesome;
	font-weight: 300;
	font-size: 13px;
	color: #cbd5e1;
	margin-left: auto;
	transition: transform 0.15s ease, color 0.15s ease;
	flex-shrink: 0;
}
.recode-results span.srch_cus:hover::after {
	color: #0c4d8b;
}

/* "No results" plain-text branch from srch_prd */
.recode-results:not(:empty):not(:has(span.srch_cus)) {
	padding: 14px;
	border: 1px dashed #e2e8f0;
	border-radius: 10px;
	color: #94a3b8;
	font-size: 12px;
	text-align: center;
	display: block !important;
}

/* Confirmation panel (rendered into .recode-confirm by switch_prd) */
.recode-confirm {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 4px 0 0;
}
.recode-confirm-head {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.recode-confirm-title {
	font-size: 16px;
	font-weight: 700;
	color: #0f172a;
}
.recode-confirm-sub {
	font-size: 13px;
	color: #64748b;
	line-height: 1.45;
}
.recode-confirm-sub em {
	font-style: normal;
	font-weight: 600;
	color: #0c4d8b;
}

.recode-diff {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 12px 14px;
}
.recode-diff-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.recode-diff-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #94a3b8;
	min-width: 68px;
	flex-shrink: 0;
}
.recode-diff-values {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
	flex-wrap: wrap;
}
.recode-diff-from,
.recode-diff-to {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: #0f172a;
	padding: 6px 10px;
	border-radius: 8px;
	border: 1px solid transparent;
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.recode-diff-from {
	color: #64748b;
	background: #f1f5f9;
	border-style: dashed;
	border-color: #e2e8f0;
}
.recode-diff-to {
	border-color: #0c4d8b;
	background: #f0f7ff;
	color: #0c4d8b;
}
.recode-diff-arrow {
	font-size: 12px;
	color: #94a3b8;
	flex-shrink: 0;
}
.recode-diff-note {
	margin-top: 10px;
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	color: #166534;
	padding-top: 10px;
	border-top: 1px dashed #e2e8f0;
}
.recode-diff-note i { font-size: 13px; }
.recode-diff-note.muted { color: #64748b; }

/* "Recode will update" — visual scope card with bulleted impact list.
   Light card with a clear header strip + grid of items. Each bullet
   sits in a fixed-size rounded square so the column gutter aligns
   regardless of label length. */
.recode-affected {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 14px 16px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.recode-affected-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #475569;
	margin: 0 0 12px 0;
	padding-bottom: 10px;
	border-bottom: 1px dashed #e2e8f0;
}
.recode-affected-title i {
	font-size: 12px;
	color: #0c4d8b;
}
.recode-affected-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 18px;
}
.recode-affected-list li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 12.5px;
	color: #1e293b;
	line-height: 1.4;
	min-width: 0;
}
.recode-affected-bullet {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border-radius: 6px;
	background: linear-gradient(135deg, #e0ecfa 0%, #d4e4f7 100%);
	color: #0c4d8b;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
}
.recode-affected-bullet i {
	font-size: 9px;
	font-weight: 900;
}
.recode-affected-text {
	flex: 1;
	min-width: 0;
	word-break: break-word;
	overflow-wrap: anywhere;
}
.recode-affected-name {
	color: #0c4d8b;
	font-weight: 600;
}

.recode-actions {
	display: flex;
	gap: 10px;
	justify-content: space-between;
}
.recode-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
	line-height: 1;
}
.recode-btn:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}
.recode-btn-cancel {
	background: #ffffff;
	color: #475569;
	border-color: #e2e8f0;
}
.recode-btn-cancel:hover:not(:disabled) {
	background: #f1f5f9;
	border-color: #cbd5e1;
	color: #0f172a;
}
.recode-btn-confirm {
	background: #0c4d8b;
	color: #ffffff;
	border-color: #0c4d8b;
	flex: 1;
	box-shadow: 0 1px 2px rgba(12, 77, 139, 0.2);
}
.recode-btn-confirm:hover:not(:disabled) {
	background: #0a3f72;
	border-color: #0a3f72;
	box-shadow: 0 4px 12px rgba(12, 77, 139, 0.28);
	transform: translateY(-1px);
}
.recode-btn:active:not(:disabled) {
	transform: translateY(0) scale(0.98);
}
.recode-btn i {
	font-size: 12px;
}

/* Success state */
.recode-success {
	text-align: center;
	padding: 12px 8px 4px;
}
.recode-success-icon {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: #ecfdf5;
	color: #059669;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	margin: 0 auto 12px;
	animation: recode-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.recode-success-title {
	font-size: 15px;
	font-weight: 700;
	color: #0f172a;
	margin-bottom: 4px;
}
.recode-success-sub {
	font-size: 13px;
	color: #64748b;
}
@keyframes recode-pop {
	0%   { transform: scale(0.5); opacity: 0; }
	100% { transform: scale(1);   opacity: 1; }
}

/* =================================================================
   Two-step wizard inside the recode modal body.
   `.recode-wizard` is the viewport; only one `.recode-step` is
   visible at a time (the inactive sibling is `display: none`). When
   `data-step` flips, the active step plays a slide+fade animation
   keyed off the direction class set by JS on the wizard.
   ================================================================= */
.recode-body {
	/* Body holds the wizard — kill the default 16px gap so the
	   single visible step can stretch the full width with no gutter
	   between header padding and the step content. */
	gap: 0;
	overflow-x: hidden;
}
.recode-wizard {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
}
.recode-step {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}
.recode-wizard[data-step="1"] .recode-step-2,
.recode-wizard[data-step="2"] .recode-step-1 {
	display: none;
}
/* Forward slide: step 2 enters from the right. */
.recode-wizard.is-going-forward[data-step="2"] .recode-step-2 {
	animation: recode-step-forward 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Backward slide: step 1 enters from the left. */
.recode-wizard.is-going-back[data-step="1"] .recode-step-1 {
	animation: recode-step-back 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes recode-step-forward {
	from { transform: translateX(36px); opacity: 0; }
	to   { transform: translateX(0);    opacity: 1; }
}
@keyframes recode-step-back {
	from { transform: translateX(-36px); opacity: 0; }
	to   { transform: translateX(0);     opacity: 1; }
}

/* Header back button — mirrors the close button (absolute, left
   side). Hidden on step 1, slides in on step 2. */
.recode-overlay .prod-panel-back {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%) translateX(-8px);
	border: none;
	background: none;
	color: #475569;
	font-size: 14px;
	cursor: pointer;
	padding: 7px 9px;
	border-radius: 8px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.22s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), background 0.15s, color 0.15s;
	z-index: 2;
}
.recode-overlay[data-wizard-step="2"] .prod-panel-back {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(-50%) translateX(0);
}
.recode-overlay .prod-panel-back:hover {
	background: #f1f5f9;
	color: #0c4d8b;
}
.recode-overlay .prod-panel-back:active {
	transform: translateY(-50%) translateX(0) scale(0.94);
}

/* Title swap — step 1 reads "Recode Product", step 2 reads
   "Confirm Recode". Both use the same icon-prefix layout so they
   visually anchor to the same baseline. */
.recode-overlay .recode-title-step {
	display: none;
	align-items: center;
	gap: 8px;
}
.recode-overlay[data-wizard-step="1"] .recode-title-step-1,
.recode-overlay[data-wizard-step="2"] .recode-title-step-2 {
	display: inline-flex;
	animation: recode-title-fade 0.28s ease both;
}
.recode-overlay .recode-title-step > i {
	color: #0c4d8b;
	font-size: 14px;
	opacity: 0.85;
}
@keyframes recode-title-fade {
	from { opacity: 0; transform: translateY(-2px); }
	to   { opacity: 1; transform: translateY(0);    }
}

@media (max-width: 540px) {
	.recode-affected-list { grid-template-columns: 1fr; }
	.recode-actions { flex-direction: column-reverse; }
	.recode-btn { width: 100%; }
}

/* =================================================================
   Product Swap modal
   Same prod-modal shell as recode. Two stacked card-lists ("swap out"
   / "replace with") with a search section underneath. Inner classes
   are .swap-* — neutral so they can't collide with .recode-* rules.
   ================================================================= */
.swap-overlay .swap-modal-shell { max-width: 580px; }

.swap-context-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
}
.swap-context-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #94a3b8;
	flex-shrink: 0;
}
.swap-context-name {
	flex: 1 1 0%;
	min-width: 0;
	font-size: 14px;
	font-weight: 600;
	color: #0f172a;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1.3;
}

.swap-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
}

.swap-out-list,
.swap-in-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.swap-in-empty {
	padding: 14px;
	border: 1px dashed #e2e8f0;
	border-radius: 10px;
	color: #94a3b8;
	font-size: 12px;
	text-align: center;
	font-style: italic;
}

.swap-row.dc_item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	width: auto;
	box-sizing: border-box;
}
.swap-row.swap-row--in {
	background: #f0f7ff;
	border-color: #bfdbfe;
}
.swap-row:focus-within {
	border-color: #0c4d8b;
	box-shadow: 0 0 0 2px rgba(12, 77, 139, 0.08);
}

.swap-qty-select {
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	color: #0c4d8b;
	background: #fff;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	padding: 4px 6px;
	min-width: 56px;
	flex-shrink: 0;
	cursor: pointer;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.swap-qty-select:hover { border-color: #94a3b8; }
.swap-qty-select:focus {
	border-color: #0c4d8b;
	box-shadow: 0 0 0 2px rgba(12, 77, 139, 0.12);
}

.swap-row-name {
	flex: 1;
	min-width: 0;
	font-size: 13px;
	font-weight: 500;
	color: #0f172a;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.swap-row-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 22px;
	padding: 0 6px;
	border-radius: 6px;
	background: #0c4d8b;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	flex-shrink: 0;
	line-height: 1;
}

.swap-row-remove {
	background: transparent;
	border: none;
	width: 26px;
	height: 26px;
	border-radius: 6px;
	color: #94a3b8;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	flex-shrink: 0;
	transition: background 0.15s ease, color 0.15s ease;
}
.swap-row-remove:hover {
	background: rgba(239, 68, 68, 0.1);
	color: #ef4444;
}

/* Search */
.swap-search-cell {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
}
.swap-search {
	display: flex !important;
	align-items: center;
	gap: 10px;
	padding: 0 14px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	line-height: 1;
	width: auto !important;
}
.swap-search:focus-within {
	border-color: #0c4d8b;
	box-shadow: 0 0 0 3px rgba(12, 77, 139, 0.08);
}
.swap-search-icon {
	font-size: 14px;
	color: #94a3b8;
	flex-shrink: 0;
	transition: color 0.15s ease;
}
.swap-search:focus-within .swap-search-icon { color: #0c4d8b; }
input.swap-search-input {
	border: none !important;
	border-bottom: none !important;
	background: transparent !important;
	font-size: 14px;
	color: #0f172a;
	padding: 11px 0;
	margin: 0;
	outline: none;
	width: 100%;
	font-family: inherit;
	line-height: 1.4;
	text-align: left;
}
input.swap-search-input::placeholder { color: #94a3b8; font-weight: 400; }
.swap-search > label { display: none !important; }

.swap-results {
	margin: 4px 0 0 !important;
	padding: 0;
	max-height: 240px;
	overflow-y: auto;
	display: flex !important;
	flex-direction: column;
	gap: 6px;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	width: auto !important;
	left: auto !important;
	right: auto !important;
	top: auto !important;
	position: static !important;
}
.swap-results::-webkit-scrollbar { width: 5px; }
.swap-results::-webkit-scrollbar-track { background: transparent; }
.swap-results::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 3px;
}
.swap-results::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.swap-results:empty { display: none !important; }

.swap-results span.srch_cus {
	position: relative !important;
	display: flex !important;
	align-items: center;
	gap: 10px;
	padding: 10px 12px !important;
	margin: 0 !important;
	width: auto !important;
	border-radius: 10px !important;
	border: 1px solid #e2e8f0 !important;
	background: #ffffff !important;
	color: #0f172a !important;
	font-size: 13px;
	font-weight: 500;
	overflow: visible !important;
	text-align: left !important;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
	cursor: pointer;
}
.swap-results span.srch_cus:hover {
	border-color: #0c4d8b !important;
	background: #f0f7ff !important;
	box-shadow: 0 2px 8px rgba(12, 77, 139, 0.08) !important;
	transform: translateX(2px);
}
.swap-results span.srch_cus i.srch_icon { display: none !important; }
.swap-results span.srch_cus div.prd_loc.srch_plant {
	position: static !important;
	margin: 0 !important;
	min-width: 38px;
	width: auto;
	height: 22px;
	padding: 0 6px;
	border-radius: 6px;
	background: #0c4d8b;
	color: #ffffff;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	line-height: 1;
}
.swap-results span.srch_cus div.prd_loc.srch_plant i { display: none !important; }
.swap-results span.srch_cus div.prd_loc.srch_plant div.loc_let {
	position: static !important;
	color: #ffffff !important;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	margin: 0 !important;
	padding: 0 !important;
	text-shadow: none !important;
	transform: none !important;
	top: auto !important;
	left: auto !important;
}
.swap-results span.srch_cus .srch_info {
	display: flex !important;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
	padding: 0 !important;
	margin: 0 !important;
	text-align: left !important;
	line-height: 1.35;
}
.swap-results span.srch_cus .srch_info b {
	font-size: 13px;
	font-weight: 600;
	color: #0f172a;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.swap-results span.srch_cus .srch_cat {
	font-size: 11px;
	font-weight: 500;
	color: #64748b;
	background: transparent;
	padding: 0;
	margin: 0;
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.swap-results span.srch_cus::after {
	content: "\f067"; /* plus icon — adds a replacement */
	font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro", FontAwesome;
	font-weight: 300;
	font-size: 12px;
	color: #cbd5e1;
	margin-left: auto;
	transition: transform 0.15s ease, color 0.15s ease;
	flex-shrink: 0;
}
.swap-results span.srch_cus:hover::after {
	color: #0c4d8b;
	transform: scale(1.15);
}
.swap-results:not(:empty):not(:has(span.srch_cus)) {
	padding: 14px;
	border: 1px dashed #e2e8f0;
	border-radius: 10px;
	color: #94a3b8;
	font-size: 12px;
	text-align: center;
	display: block !important;
}

/* When .swap-actions is rendered as the panel footer (current usage),
   override the default `justify-content: flex-end` so Cancel sits on
   the left, Confirm on the right. The unscoped `.swap-actions` rule
   below is left as a fallback for any consumer that renders the action
   bar without `.prod-panel-footer`. */
.prod-panel-footer.swap-actions { justify-content: space-between; }
.swap-actions:not(.prod-panel-footer) {
	display: flex;
	gap: 10px;
	justify-content: space-between;
	padding-top: 4px;
	border-top: 1px solid #f1f5f9;
	margin-top: 4px;
}
.swap-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
	line-height: 1;
}
.swap-btn:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}
.swap-btn-cancel {
	background: #ffffff;
	color: #475569;
	border-color: #e2e8f0;
}
.swap-btn-cancel:hover:not(:disabled) {
	background: #f1f5f9;
	border-color: #cbd5e1;
	color: #0f172a;
}
.swap-btn-confirm {
	background: #0c4d8b;
	color: #ffffff;
	border-color: #0c4d8b;
	flex: 1;
	box-shadow: 0 1px 2px rgba(12, 77, 139, 0.2);
}
.swap-btn-confirm:hover:not(:disabled) {
	background: #0a3f72;
	border-color: #0a3f72;
	box-shadow: 0 4px 12px rgba(12, 77, 139, 0.28);
	transform: translateY(-1px);
}
.swap-btn:active:not(:disabled) {
	transform: translateY(0) scale(0.98);
}
.swap-btn i { font-size: 12px; }

@media (max-width: 540px) {
	.swap-actions { flex-direction: column-reverse; }
	.swap-btn { width: 100%; }
	.swap-row.dc_item { flex-wrap: wrap; }
}

/* SHARED SCHEDULER-STYLE MODAL ================================
 * Extracted from dispatch.css so index.php (orders page) can render
 * the same look as the new-employee / new-area panels in trucking.
 * Class prefix `.sch-*` matches the canonical system in dispatch.css. */
.sch-modal-overlay,
.sch-modal-overlay:hover {
	position: fixed !important;
	inset: 0 !important;
	z-index: 1000 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background-color: transparent !important;
	border: none !important;
	padding: 20px !important;
	margin: 0 !important;
	border-radius: 0 !important;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease, background-color 0.2s ease;
}
.sch-modal-overlay.visible,
.sch-modal-overlay.visible:hover {
	background-color: rgba(15,23,42,0.4) !important;
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
}
.sch-modal-overlay::after { display: none !important; content: none !important; }
.sch-modal {
	width: 92%;
	max-width: 640px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	transform: translateY(12px) scale(0.98);
	opacity: 0;
	transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}
.sch-modal-overlay.visible .sch-modal { transform: translateY(0) scale(1); opacity: 1; }
.sch-modal::-webkit-scrollbar { width: 5px; }
.sch-modal::-webkit-scrollbar-track { background: transparent; }
.sch-modal::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.sch-modal::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.sch-panel {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.08);
	overflow: hidden;
}
.sch-panel-header {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 20px;
	background: #f8fafc;
	border-bottom: 1px solid #e2e8f0;
	font-size: 14px;
	font-weight: 700;
	color: #1e293b;
	letter-spacing: -0.01em;
	position: relative;
}
.sch-panel-header > i {
	color: #0c4d8b;
	font-size: 15px;
	opacity: 0.8;
}
.sch-panel-close {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	border: none;
	background: none;
	color: #94a3b8;
	font-size: 22px;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 6px;
	line-height: 1;
	transition: color 0.2s, background 0.2s, transform 0.2s ease;
}
.sch-panel-close:hover {
	color: #ef4444;
	background: rgba(239,68,68,0.08);
	transform: translateY(-50%) rotate(90deg);
}
.sch-panel-body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.sch-panel-footer {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-top: 1px solid #e2e8f0;
	background: #f8fafc;
}
.sch-panel-btn {
	margin-left: auto;
	/* Cancel the global `button { margin-right: auto }` (style.css:~24) —
	   without this, every sch-panel-btn ends up with both ml:auto + mr:auto
	   and the button centers itself in the available space instead of
	   anchoring flush right. */
	margin-right: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 38px;
	padding: 0 18px;
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	background: #0c4d8b;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.15s, box-shadow 0.15s;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	font-family: inherit;
}
.sch-panel-btn:hover {
	background: #0a3f73;
	box-shadow: 0 2px 8px rgba(12,77,139,0.25);
}
.sch-panel-btn:disabled { background: #94a3b8; cursor: default; box-shadow: none; }
.sch-panel-btn i { font-size: 13px; }
.sch-panel-btn--secondary {
	background: #fff;
	color: #0c4d8b;
	border: 1px solid #cbd5e1;
	/* Cancel-style buttons hug the LEFT of the footer so the primary
	   action's `margin-left: auto` can push it cleanly to the right.
	   Both margins explicitly zeroed to override the global
	   `button { margin: ... auto }` from style.css:~24. */
	margin-left: 0;
	margin-right: 0;
}
.sch-panel-btn--secondary:hover {
	background: #f1f5f9;
	border-color: #0c4d8b;
	box-shadow: 0 2px 8px rgba(12,77,139,0.12);
}
/* `--end` modifier — anchors the button to the far-right of a flex
   footer regardless of how many siblings precede it. Use this on the
   primary action (Generate / Save / Create) when there are siblings
   like Cancel that should stay on the left. */
.sch-panel-btn--end {
	margin-left: auto !important;
}
.sch-section-label {
	font-size: 11px;
	font-weight: 600;
	color: #94a3b8;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-align: left;
	margin: 0;
	padding-bottom: 0;
}
.sch-section-label:not(:first-child) {
	margin-top: 4px;
	padding-top: 12px;
	border-top: 1px solid #f1f5f9;
}

/* ═══════════════════════════════════════════════════════════════════
   sch-field primitives (notched fieldset, floating top-aligned label)
   --------------------------------------------------------------------
   Promoted out of css/production.css so every page that ships
   style.css (orders/index.php, customers.php, etc.) can render the
   same modal field treatment as production / trucking. Composition
   classes (.imp-reco-grid, .nc-grid, etc.) live with their owning
   modal; the primitives below are the shared atoms.
   ═══════════════════════════════════════════════════════════════════ */
.sch-field {
	position: relative;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 4px 8px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	box-sizing: border-box;
}
.sch-field:focus-within {
	border-color: #0c4d8b;
	box-shadow: 0 0 0 2px rgba(12, 77, 139, 0.1);
}
.sch-field-label {
	position: absolute;
	top: -7px;
	left: 4px;
	display: block;
	padding: 0 4px;
	background: #fff;
	font-size: 10px;
	font-weight: 600;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	pointer-events: none;
	z-index: 1;
	transition: color 0.15s ease;
	font-family: 'Montserrat', sans-serif;
}
.sch-field:focus-within .sch-field-label {
	color: #0c4d8b;
}
.sch-input,
.sch-select {
	width: 100%;
	border: none !important;
	background: transparent;
	padding: 6px 2px 2px;
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	color: #1e293b;
	outline: none;
	font-family: inherit;
	box-sizing: border-box;
	height: 28px;
	box-shadow: none;
}
.sch-input::placeholder {
	color: #94a3b8;
}
.sch-input:focus,
.sch-select:focus {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}
.sch-select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 24px;
	cursor: pointer;
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M5 6L0 0h10z' fill='%2394a3b8'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 4px center;
	background-size: 8px;
}
/* Dark-mode polish for the field primitives */
[data-theme="dark"] .sch-field {
	background: #1a2235;
	border-color: #344058;
}
[data-theme="dark"] .sch-field:focus-within {
	border-color: #4a9eff;
	box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.15);
}
[data-theme="dark"] .sch-field-label {
	background: #1a2235;
	color: #94a3b8;
}
[data-theme="dark"] .sch-field:focus-within .sch-field-label {
	color: #4a9eff;
}
[data-theme="dark"] .sch-input,
[data-theme="dark"] .sch-select {
	color: #f1f5f9;
}
[data-theme="dark"] .sch-input::placeholder {
	color: #64748b;
}

/* ═══════════════════════════════════════════════════════════════════
   NEW CUSTOMER MODAL (.nc-overlay)
   --------------------------------------------------------------------
   Used on the orders page (`+` icon next to the Customer field) and
   on customers.php (the "Add New" header/action buttons). Layout:
     row 1 — Customer Name (full width)
     row 2 — Address (full width, with Google-Places autocomplete)
     row 3 — Address 2 (full width)
     row 4 — City | State | Zip   (2fr | 1fr | 1fr)
     row 5 — Phone | Fax           (1fr  | 2fr)   ← span via :nth-child
     row 6 — Terms (full width)
     toggles — Hold + Require PO
   ═══════════════════════════════════════════════════════════════════ */
.nc-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 14px;
	margin-bottom: 14px;
}
.nc-grid .nc-field-wide  { grid-column: 1 / -1; }
.nc-grid .nc-field-city  { grid-column: 1 / 2; }
.nc-grid .nc-field-state { grid-column: 2 / 3; }
.nc-grid .nc-field-zip   { grid-column: 3 / 4; }
/* Phone (col 1) + Fax (cols 2–3) — one row, two cells */
.nc-grid .sch-field:nth-child(7) { grid-column: 1 / 2; }
.nc-grid .sch-field:nth-child(8) { grid-column: 2 / 4; }

/* ── .sch-pill / .sch-pills — modern check-pill toggle (shared) ──
   Used by:
     • New customer modal: Hold + Require PO
     • Order page tax row: Paid + Retail
   Native checkbox is hidden but still serializes on submit (name kept
   intact). Sibling of .dt_pill with a larger footprint and a fa-check
   icon that fades in when checked, so checked state is unambiguous
   even at a glance. */
.sch-pills {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 2px 0;
	flex-wrap: wrap;
}
.sch-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	padding: 0 14px;
	border: 1px solid #cbd5e1;
	border-radius: 999px;
	background: #fff;
	color: #475569;
	font-size: 11px;
	font-weight: 600;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 0.02em;
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
	box-sizing: border-box;
}
.sch-pill:hover {
	border-color: #94a3b8;
	background: #f8fafc;
	color: #0c4d8b;
}
.sch-pill:active {
	transform: scale(0.97);
}
.sch-pill.is-disabled {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}
.sch-pill input[type=checkbox] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}
/* Empty leading slot for the check icon — keeps text position stable
   between checked and unchecked so the pill doesn't twitch. */
.sch-pill::before {
	content: "";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	border: 1.5px solid #cbd5e1;
	border-radius: 50%;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	/* FA7 Pro listed first so the \f00c check renders on FA7-migrated pages
	   (customers); falls back to FA5 families on pages still loading FA5. */
	font-family: "Font Awesome 7 Pro", "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
	font-weight: 900;
	font-size: 8px;
	color: transparent;
	box-sizing: border-box;
	flex: 0 0 auto;
}
.sch-pill:hover::before {
	border-color: #0c4d8b;
}
.sch-pill:has(input:checked) {
	background: #0c4d8b;
	border-color: #0c4d8b;
	color: #fff;
	box-shadow: 0 1px 2px rgba(12, 77, 139, 0.18),
	            inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.sch-pill:has(input:checked):hover {
	background: #0a3f73;
	border-color: #0a3f73;
	color: #fff;
}
.sch-pill:has(input:checked)::before {
	content: "\f00c";   /* fa-check */
	background: #fff;
	border-color: #fff;
	color: #0c4d8b;
}
/* Keyboard focus ring (the hidden input still receives focus) */
.sch-pill:has(input:focus-visible) {
	box-shadow: 0 0 0 3px rgba(12, 77, 139, 0.20);
}
[data-theme="dark"] .sch-pill {
	background: #1a2235;
	border-color: #344058;
	color: #cbd5e1;
}
[data-theme="dark"] .sch-pill:hover {
	background: #243152;
	border-color: #4a9eff;
	color: #f1f5f9;
}
[data-theme="dark"] .sch-pill::before {
	border-color: #4a5568;
}
[data-theme="dark"] .sch-pill:has(input:checked) {
	background: #1e63b5;
	border-color: #1e63b5;
	color: #fff;
}
[data-theme="dark"] .sch-pill:has(input:checked)::before {
	color: #1e63b5;
	background: #fff;
	border-color: #fff;
}

/* Inline autocomplete dropdown anchored to the address field.
   Two things have to be true for it to float above the rest of the
   modal:
     1. z-index has to clear sibling .sch-fields (auto stacking).
     2. The .sch-panel's `overflow: hidden` would clip it past the
        panel boundary — overridden via .nc-overlay below.
   Width set explicitly so it ignores style.css's global `width: 350px`
   on .autocomplete-dropdown. */
.nc-grid .sch-field .autocomplete-dropdown {
	position: absolute;
	top: calc(100% + 4px);
	left: -1px;
	right: -1px;
	width: auto;
	z-index: 50;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	box-shadow: 0 12px 32px -10px rgba(15, 23, 42, 0.25),
	            0 2px 6px -2px rgba(15, 23, 42, 0.10);
	max-height: 240px;
	overflow-y: auto;
	list-style: none;
	padding: 4px 0;
	margin: 0;
}
.nc-grid .sch-field .autocomplete-dropdown li {
	padding: 8px 12px;
	border-bottom: 1px solid #f1f5f9;
}
.nc-grid .sch-field .autocomplete-dropdown li:last-child {
	border-bottom: none;
}

/* Let the dropdown escape the panel — replace overflow:hidden's
   corner-clipping by giving the header/footer their own matching
   rounded corners. Scoped to .nc-overlay so other sch-modals (which
   have no escapee dropdown) keep the original tight clipping. */
.nc-overlay .sch-modal { overflow: visible; }
.nc-overlay .sch-panel { overflow: visible; }
.nc-overlay .sch-panel-header {
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
}
.nc-overlay .sch-panel-footer {
	border-bottom-left-radius: 16px;
	border-bottom-right-radius: 16px;
}

/* Mobile: collapse the 3-col grid to a single column */
@media (max-width: 560px) {
	.nc-grid {
		grid-template-columns: 1fr;
	}
	.nc-grid .nc-field-city,
	.nc-grid .nc-field-state,
	.nc-grid .nc-field-zip,
	.nc-grid .sch-field:nth-child(7),
	.nc-grid .sch-field:nth-child(8) { grid-column: 1 / -1; }
}

/* Dark-mode polish for the autocomplete dropdown */
[data-theme="dark"] .nc-grid .sch-field .autocomplete-dropdown {
	background: #1a2235;
	border-color: #344058;
	box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.55),
	            0 2px 6px -2px rgba(0, 0, 0, 0.30);
}
[data-theme="dark"] .nc-grid .sch-field .autocomplete-dropdown li {
	border-bottom-color: #344058;
}

/* ════════════════════════════════════════════════════════════════════
   AUTOCOMPLETE DROPDOWNS — full dark-mode pass.
   --------------------------------------------------------------------
   Existing partial dark rules in css/theme.css cover the container
   background but leave the text colors (.mainText #111, .subText #666)
   and the icon-circle bg (#f2f2f2) at light-mode values — so the
   suggestion list ends up rendering as dark-text on a dark surface,
   essentially invisible. This block fills in the gaps so customer
   AND address autocompletes look intentional in dark mode.
   ════════════════════════════════════════════════════════════════════ */

/* Container — soft slate panel with a faint accent ring on focus.
   Higher-specificity selector beats both the base style.css:72 rule
   AND the partial theme.css rules so dark mode wins regardless of
   which surface the dropdown lives in. */
[data-theme="dark"] ul.autocomplete-dropdown,
[data-theme="dark"] ul.cus-dropdown {
	background: #1a2235;
	border: 1px solid #344058;
	color: #e2e8f0;
	box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.55),
	            0 2px 6px -2px rgba(0, 0, 0, 0.30);
}

/* Items — divider becomes a subtle slate hairline; hover lifts to a
   slightly brighter slate with a left accent strip so the active
   suggestion is unambiguous against the row below it. */
[data-theme="dark"] ul.autocomplete-dropdown li,
[data-theme="dark"] ul.cus-dropdown li {
	color: #e2e8f0;
	border-bottom-color: #2a3a52;
	transition: background 0.12s ease, box-shadow 0.12s ease;
}
[data-theme="dark"] ul.autocomplete-dropdown li:hover,
[data-theme="dark"] ul.autocomplete-dropdown li.highlighted,
[data-theme="dark"] ul.cus-dropdown li:hover,
[data-theme="dark"] ul.cus-dropdown li.highlighted {
	background: #243152;
	box-shadow: inset 3px 0 0 #4a9eff;
}

/* Main + sub text inside each suggestion. Main = bright slate-50,
   sub = muted slate-300 — both pop against the panel's #1a2235 bg
   while preserving the original visual hierarchy. */
[data-theme="dark"] ul.autocomplete-dropdown div.mainText,
[data-theme="dark"] ul.cus-dropdown div.mainText {
	color: #f1f5f9;
}
[data-theme="dark"] ul.autocomplete-dropdown div.subText,
[data-theme="dark"] ul.cus-dropdown div.subText {
	color: #94a3b8;
}

/* Avatar/icon circle — was a light #f2f2f2 disc with dark text;
   inverted for dark mode so it reads as a soft accent chip. */
[data-theme="dark"] ul.autocomplete-dropdown div.icon,
[data-theme="dark"] ul.cus-dropdown div.icon {
	background: #243152;
	color: #cbd5e1;
	box-shadow: inset 0 0 0 1px #344058;
}
[data-theme="dark"] ul.autocomplete-dropdown li:hover div.icon,
[data-theme="dark"] ul.autocomplete-dropdown li.highlighted div.icon,
[data-theme="dark"] ul.cus-dropdown li:hover div.icon,
[data-theme="dark"] ul.cus-dropdown li.highlighted div.icon {
	background: #2f4373;
	color: #ffffff;
	box-shadow: inset 0 0 0 1px #4a9eff;
}
/* Inactive customer icon — was white-bg with grey border. Use a
   greyed-out dark variant so it still reads as "deactivated". */
[data-theme="dark"] ul.cus-dropdown li.inactive div.icon {
	background: #15233a;
	color: #475569;
	border-color: #2a3a52;
	box-shadow: inset 0 0 0 1px #2a3a52;
}
[data-theme="dark"] ul.cus-dropdown li.inactive div.mainText,
[data-theme="dark"] ul.cus-dropdown li.inactive div.subText {
	color: #64748b;
}

/* Card-scoped variants (inside table#table1 inside .order-card on
   the orders page). The light-mode rule lives in index.php and uses
   different padding/radius — the panel-level overrides above already
   inherit through, but make the highlight ring stronger here since
   the wider panel surface needs a more confident hover state. */
[data-theme="dark"] table#table1 td div.indiv ul.autocomplete-dropdown,
[data-theme="dark"] table#table1 td div.indiv ul.cus-dropdown {
	background: #182132;
	border-color: #344058;
}
[data-theme="dark"] table#table1 td div.indiv ul.autocomplete-dropdown li,
[data-theme="dark"] table#table1 td div.indiv ul.cus-dropdown li {
	border-bottom: none;   /* card-scoped uses gap-spacing, no dividers */
}
[data-theme="dark"] table#table1 td div.indiv ul.autocomplete-dropdown li:hover,
[data-theme="dark"] table#table1 td div.indiv ul.cus-dropdown li:hover,
[data-theme="dark"] table#table1 td div.indiv ul.cus-dropdown li.highlighted {
	background: #243152;
	box-shadow: none;       /* the rounded card-scoped row uses bg-only */
}

/* jBox content can host an autocomplete (e.g. customer-edit modal).
   Make sure the inline icons + dividers play nice on the dark
   tooltip/modal surface. */
[data-theme="dark"] div.jBox-content .autocomplete-dropdown {
	background: #1a2235;
	border-color: #344058;
}
[data-theme="dark"] div.jBox-content .autocomplete-dropdown i {
	color: #cbd5e1;
}

/* Custom scrollbar on the dropdown — defaults to a chunky light
   browser scrollbar that draws too much attention; trim it down to
   match the panel chrome. */
[data-theme="dark"] ul.autocomplete-dropdown::-webkit-scrollbar,
[data-theme="dark"] ul.cus-dropdown::-webkit-scrollbar {
	width: 6px;
}
[data-theme="dark"] ul.autocomplete-dropdown::-webkit-scrollbar-track,
[data-theme="dark"] ul.cus-dropdown::-webkit-scrollbar-track {
	background: transparent;
}
[data-theme="dark"] ul.autocomplete-dropdown::-webkit-scrollbar-thumb,
[data-theme="dark"] ul.cus-dropdown::-webkit-scrollbar-thumb {
	background: #344058;
	border-radius: 3px;
}
[data-theme="dark"] ul.autocomplete-dropdown::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] ul.cus-dropdown::-webkit-scrollbar-thumb:hover {
	background: #4a5b7a;
}
[data-theme="dark"] .sch-pill {
	color: #cbd5e1;
}

/* ═══════════════════════════════════════════════════════════════════
   Compact-desktop sidebar (~14" laptops, 1121–1500px)
   Shrinks the global left nav from 12.5rem → 10rem and tightens the
   menu item padding/font so labels still fit. Applies to every page
   that includes Connections/menus.php (i.e. anything with the main
   sidebar). Production/trucking keep their per-page grid tweaks on
   top of this foundation.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 70.0625rem) and (max-width: 93.75rem) {
	body {
		padding-left: 10rem !important;
	}
	nav.bg-menu-theme.main_menu {
		width: 10rem !important;
		padding: 0.5rem !important;
	}
	div#butt_container {
		width: calc(100% - 10rem) !important;
	}
	nav.bg-menu-theme.main_menu .menu-nav-item a.nav-link {
		font-size: 0.78rem !important;
		padding: 0.45rem 0.6rem !important;
		border-radius: 0.5rem !important;
	}
	nav.bg-menu-theme.main_menu .menu-nav-item .menu-icon,
	nav.bg-menu-theme.main_menu .menu-nav-item i.menu-icon {
		font-size: 0.95rem !important;
		width: 1.1rem !important;
		margin-right: 0.4rem !important;
	}
	nav.bg-menu-theme.main_menu .menu-nav-item a.nav-link.active {
		margin-right: 2px;
		border-radius: 0.5rem !important;
	}
	nav.bg-menu-theme.main_menu .menu-dropdown a.menu-dropdown-toggle {
		font-size: 0.78rem !important;
		padding: 0.45rem 0.6rem !important;
	}
}

/* SF structure: auto-track / lock indicator + missing-SF child warning */
i.sf-lock-icon {
	margin-left: 6px;
	color: #888;
	cursor: pointer;
	font-size: 12px;
}
i.sf-lock-icon.fa-lock { color: #c84e2c; }
i.sf-lock-icon.fa-link { color: #4a90e2; }
i.sf-lock-icon:hover { opacity: 0.7; }

i.sf-warn { color: #c79a00; margin-left: 6px; font-size: 11px; }
i.sf-warn:hover { opacity: 0.7; }

/* "Set SF" button — replaces the old dead warning triangle on a structure
   child that has a catalog sq_ft but no line value yet. One click fills it.
   Amber keeps the "needs attention" read of the old warning while being
   clearly actionable. Inline-aligned to the title input's vertical center. */
button.sf-set-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	vertical-align: middle;
	margin-left: 6px;
	padding: 2px 7px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	background: #c79a00;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease, opacity 0.15s ease;
}
button.sf-set-btn:hover { background: #ad8600; }
button.sf-set-btn:active { transform: translateY(0.5px); }
button.sf-set-btn .fa-vector-square { font-size: 10px; }
button.sf-set-btn.sf-set-loading { opacity: 0.55; pointer-events: none; }

/* SF-present indicator — sits in the same slot as sf-warn but signals the
   opposite (this child has square footage; hover shows the value). Calm
   slate-blue at rest, lifts to brand blue on hover so it reads as a
   tooltip cue, not a warning. */
i.sf-info {
	color: #64748b;
	margin-left: 6px;
	font-size: 11px;
	cursor: help;
	transition: color 0.15s ease;
}
i.sf-info:hover { color: #0c4d8b; }
/* Out-of-date line SF: catalog sq_ft changed since this line was set. Amber +
   clickable (calls seed_line_sf to pull the new value). */
i.sf-info.sf-stale { color: #c79a00; cursor: pointer; }
i.sf-info.sf-stale:hover { color: #ad8600; }

/* ─────────────────────────────────────────────────────────────────
   Inline "add a product" row at the bottom of grp_table.
   The inputs use the same .prd_qty / .no_style.prd_title classes as
   the existing child rows above — they inherit the table's standard
   input treatment so the row reads as a continuous extension of the
   list. The only row-level cue is a soft accent stripe on the left
   edge that turns blue when the row is focused.
   ───────────────────────────────────────────────────────────────── */
tr.grp_add_input_row { position: relative; }
tr.grp_add_input_row td {
	cursor: default;       /* override .grp_table tbody td { cursor: move } — this row isn't sortable */
}
/* Left-edge accent stripe — appears when the row is focused. */
tr.grp_add_input_row td.trash { position: relative; }
tr.grp_add_input_row td.trash::before {
	content: '';
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 2px;
	background: transparent;
	transition: background 0.2s ease;
}
tr.grp_add_input_row:focus-within td.trash::before { background: #0c4d8b; }

/* The + icon — purely a placeholder cue. Muted at rest; turns brand blue
   ONLY while the user is actively typing in the product-name field (i.e.
   that input has focus). Hover does NOT change it: the icon isn't an
   actionable target on its own, so a hover state would be a lie about
   interactivity. The .is-typing class is toggled by JS on the <tr> when
   the name input gains/loses focus.

   IMPORTANT: every selector below includes `table#grp_table tbody` to
   match the specificity of the upstream rules in order-items.css (which
   loads AFTER style.css and uses `#grp_table` to tint red on hover) and
   in theme.css (which uses the same prefix to color trash icons in dark
   mode). Without the ID in our selector, the cascade ignores us. */
table#grp_table tbody tr.grp_add_input_row td.trash i.grp_add_icon {
	color: #94a3b8;
	font-size: 15px;
	transition: color 0.2s ease, transform 0.2s ease;
}
table#grp_table tbody tr.grp_add_input_row.is-typing td.trash i.grp_add_icon {
	color: #0c4d8b;
	transform: scale(1.08);
}
/* Defeat the `table#grp_table tbody tr td.trash i:hover` red-tint rule
   from order-items.css — that rule is meant for the delete icon on real
   line items, not the placeholder + icon. */
table#grp_table tbody tr.grp_add_input_row td.trash i.grp_add_icon:hover {
	color: #94a3b8;
	background-color: transparent;
}
table#grp_table tbody tr.grp_add_input_row.is-typing td.trash i.grp_add_icon:hover {
	color: #0c4d8b;
	background-color: transparent;
}

/* Hide the spin buttons on the qty number input — matches the visual
   treatment of the existing .prd_qty inputs. The input itself inherits
   default browser chrome from .prd_qty, just like rendered child rows. */
tr.grp_add_input_row input.grp_add_qty_input::-webkit-outer-spin-button,
tr.grp_add_input_row input.grp_add_qty_input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
tr.grp_add_input_row input.grp_add_qty_input { -moz-appearance: textfield; }

/* Placeholder for the name input — slightly lighter than the typed text,
   never italicized (italic placeholder is the AI-slop tell). */
tr.grp_add_input_row .grp_add_input::placeholder { color: #94a3b8; }
tr.grp_add_input_row .grp_add_input:disabled,
tr.grp_add_input_row .grp_add_qty_input:disabled { opacity: 0.55; }

/* Make the name cell occupy the full available width so the input
   stretches across the columns rather than sitting in a narrow box. */
tr.grp_add_input_row td.grp_add_name input.grp_add_input { width: 100%; }

/* ─────────────────────────────────────────────────────────────────
   Typeahead dropdown — appended to <body> with position:fixed and JS-
   computed coordinates so no ancestor's overflow:hidden can clip it.
   ───────────────────────────────────────────────────────────────── */
.grp_ta_dropdown.body_anchored {
	position: fixed;   /* explicit override; JS sets left/top/width on show */
}
.grp_ta_dropdown {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 6px);
	max-height: 360px;
	overflow-y: auto;
	overflow-x: hidden;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.04),
		0 12px 28px -6px rgba(15, 23, 42, 0.18),
		0 4px 12px -2px rgba(15, 23, 42, 0.08);
	padding: 6px;
	z-index: 10000;
	animation: grp_ta_drop_in 0.16s ease-out both;
}
@keyframes grp_ta_drop_in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}
.grp_ta_item {
	padding: 9px 12px;
	cursor: pointer;
	border-radius: 7px;
	transition: background 0.12s ease, transform 0.08s ease;
	margin: 1px 0;
}
.grp_ta_item:hover { background: #f1f5f9; }
.grp_ta_item.active {
	background: linear-gradient(90deg, #eff6ff 0%, #f8fafc 100%);
	box-shadow: inset 3px 0 0 0 #0c4d8b;
}
.grp_ta_item.active .grp_ta_name { color: #0c4d8b; }
.grp_ta_empty {
	padding: 14px 12px;
	font-size: 12px;
	color: #94a3b8;
	font-style: italic;
	text-align: center;
}

/* Dropdown row layout */
.grp_ta_row {
	display: flex;
	align-items: center;
	gap: 12px;
}
.grp_ta_plant {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 22px;
	padding: 0 6px;
	border-radius: 6px;
	background: linear-gradient(135deg, #0c4d8b 0%, #1e63b5 100%);
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 0.04em;
	flex-shrink: 0;
	box-shadow: 0 1px 2px rgba(12, 77, 139, 0.25);
	line-height: 1;
}
.grp_ta_main {
	flex: 1;
	min-width: 0;
}
.grp_ta_name {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 13px;
	color: #0f172a;
	letter-spacing: 0.005em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color 0.15s ease;
}
.grp_ta_cat {
	font-family: 'Montserrat', sans-serif;
	font-size: 10.5px;
	color: #64748b;
	letter-spacing: 0.02em;
	margin-top: 1px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: uppercase;
}
.grp_ta_sf,
.grp_ta_inv {
	display: inline-flex;
	align-items: center;
	font-family: 'Montserrat', sans-serif;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 3px 8px;
	border-radius: 999px;
	flex-shrink: 0;
	white-space: nowrap;
}
.grp_ta_sf {
	color: #166534;
	background: #dcfce7;
	border: 1px solid #bbf7d0;
}
.grp_ta_inv {
	color: #475569;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	min-width: 30px;
	justify-content: center;
}
.grp_ta_inv.zero  { color: #b91c1c; background: #fee2e2; border-color: #fecaca; }
.grp_ta_inv.low   { color: #b45309; background: #fef3c7; border-color: #fde68a; }

/* Custom scrollbar inside the dropdown — thin and unobtrusive */
.grp_ta_dropdown::-webkit-scrollbar { width: 6px; }
.grp_ta_dropdown::-webkit-scrollbar-track { background: transparent; }
.grp_ta_dropdown::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 999px;
}
.grp_ta_dropdown::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ─────────────────────────────────────────────────────────────────
   Dark mode
   The typeahead row inherits the table's existing dark-mode striping
   (set in theme.css); we only restyle the row-specific bits: the +
   icon, the left-edge accent stripe, and the dropdown card.
   ───────────────────────────────────────────────────────────────── */
[data-theme="dark"] i.sf-info { color: #94a3b8; }
[data-theme="dark"] i.sf-info:hover { color: #4a9eff; }
[data-theme="dark"] i.sf-info.sf-stale { color: #eab308; }
[data-theme="dark"] i.sf-info.sf-stale:hover { color: #facc15; }

[data-theme="dark"] button.sf-set-btn { background: #b8901a; color: #14130f; }
[data-theme="dark"] button.sf-set-btn:hover { background: #cfa42c; }

[data-theme="dark"] tr.grp_add_input_row:focus-within td.trash::before {
	background: #4a9eff;
}
/* Dark-mode + icon — same specificity-bump applies (theme.css uses
   `[data-theme="dark"] table#grp_table tbody tr td.trash i` to color
   trash icons; we need the ID prefix too or we lose the cascade). */
[data-theme="dark"] table#grp_table tbody tr.grp_add_input_row td.trash i.grp_add_icon { color: #64748b; }
[data-theme="dark"] table#grp_table tbody tr.grp_add_input_row.is-typing td.trash i.grp_add_icon { color: #4a9eff; }
[data-theme="dark"] table#grp_table tbody tr.grp_add_input_row td.trash i.grp_add_icon:hover {
	color: #64748b;
	background-color: transparent;
}
[data-theme="dark"] table#grp_table tbody tr.grp_add_input_row.is-typing td.trash i.grp_add_icon:hover {
	color: #4a9eff;
	background-color: transparent;
}

[data-theme="dark"] .grp_ta_dropdown {
	background: #1a2235;
	border-color: #2c3a52;
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.3),
		0 12px 28px -6px rgba(0, 0, 0, 0.6),
		0 4px 12px -2px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .grp_ta_item:hover { background: #243152; }
[data-theme="dark"] .grp_ta_item.active {
	background: linear-gradient(90deg, #1e3a5f 0%, #243152 100%);
	box-shadow: inset 3px 0 0 0 #4a9eff;
}
[data-theme="dark"] .grp_ta_item.active .grp_ta_name { color: #93c5fd; }
[data-theme="dark"] .grp_ta_name { color: #f1f5f9; }
[data-theme="dark"] .grp_ta_cat { color: #8a96a4; }
[data-theme="dark"] .grp_ta_plant {
	background: linear-gradient(135deg, #1e63b5 0%, #4a9eff 100%);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .grp_ta_inv {
	color: #cbd5e1;
	background: #243152;
	border-color: #344058;
}
[data-theme="dark"] .grp_ta_sf {
	color: #86efac;
	background: #14271d;
	border-color: #1f3a2a;
}
[data-theme="dark"] .grp_ta_inv.zero {
	color: #fca5a5;
	background: #2c1414;
	border-color: #4a1f1f;
}
[data-theme="dark"] .grp_ta_inv.low {
	color: #fcd34d;
	background: #2c2114;
	border-color: #4a3a1f;
}
[data-theme="dark"] .grp_ta_dropdown::-webkit-scrollbar-thumb { background: #344058; }
[data-theme="dark"] .grp_ta_dropdown::-webkit-scrollbar-thumb:hover { background: #4a5e7a; }

/* --- Photo Upload (shared with trucking driver modal — dark mode lives in theme.css) --- */
.photo-upload-area {
	display: flex; flex-direction: column; align-items: center;
	padding: 20px 0 8px; margin: -4px 0 0;
}
.photo-preview {
	width: 88px; height: 88px; border-radius: 50%; overflow: hidden;
	background: #f1f5f9;
	box-shadow: 0 0 0 3px #fff, 0 0 0 4px #e2e8f0;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; position: relative; flex-shrink: 0;
	transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.photo-preview:hover {
	box-shadow: 0 0 0 3px #fff, 0 0 0 4px #cbd5e1;
	transform: scale(1.03);
}
.photo-preview img {
	width: 100%; height: 100%; object-fit: cover;
}
.photo-placeholder {
	font-size: 34px; color: #c2cad6;
}
.photo-preview:hover::after {
	content: '\f030'; font-family: 'Font Awesome 5 Pro'; font-weight: 400;
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	background: rgba(15,23,42,0.5); color: #fff; font-size: 18px; border-radius: 50%;
	backdrop-filter: blur(1px);
}
.photo-upload-btns {
	display: flex; align-items: center; gap: 4px;
	margin-top: 10px;
}
.photo-btn {
	background: none; border: none; border-radius: 4px;
	padding: 4px 10px; font-size: 12px; font-weight: 500; cursor: pointer;
	display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
	color: #64748b; transition: all 0.15s ease;
}
.photo-btn:hover { color: #0c4d8b; }
.photo-btn-remove:hover { color: #ef4444; }
.photo-upload-btns .photo-btn + .photo-btn::before {
	content: ''; display: block;
	width: 1px; height: 12px; background: #d1d5db;
	margin-right: 4px;
}
.photo-upload-input { display: none; }

/* ── Orders list — pagination spinner ──
   Centered overlay shown over #all_orders while goToPage /
   changePage / changeOrdersPerPage fire their AJAX. Auto-hides
   on the matching ajaxComplete from main_.js. */
/* While the list is loading, hold the container at its loaded height so the
   spinner centers in a tall area (not a skinny header-row strip) and the page
   height doesn't grow from ~0 to full as rows arrive — which was toggling the
   vertical scrollbar on/off. Matches the lab container's max-height so there's
   no jump when rows land; the class (and this min-height) is removed once loaded. */
#all_orders.is-loading-orders { position: relative; min-height: calc(100vh - 160px); }
#all_orders .ao-pag-spinner {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.72);
	z-index: 50;
	-webkit-backdrop-filter: blur(2px);
	        backdrop-filter: blur(2px);
	pointer-events: auto;
	animation: ao-pag-spin-fade 0.12s ease-out;
}
#all_orders .ao-pag-spinner-ring {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 3px solid rgba(12, 77, 139, 0.18);
	border-top-color: #0c4d8b;
	animation: ao-pag-spin 0.75s linear infinite;
}
[data-theme="dark"] #all_orders .ao-pag-spinner {
	background: rgba(15, 23, 42, 0.58);
}
[data-theme="dark"] #all_orders .ao-pag-spinner-ring {
	border-color: rgba(147, 197, 253, 0.22);
	border-top-color: #93c5fd;
}
@keyframes ao-pag-spin { to { transform: rotate(360deg); } }
@keyframes ao-pag-spin-fade { from { opacity: 0; } to { opacity: 1; } }

/* (Removed) The global .fa-cog.fa-spin / .fa-gear.fa-spin → gray-ring override
   lived here (fd9f6601, hardened in 81cbd2a7). Leighton found it looked wrong in
   too many places, so it was removed 2026-06-09 — spinning cogs now render as the
   default FontAwesome cog again. Any spinner restyling should be done surgically
   per-spot, not globally. The scoped ring loaders (orders pagination
   #all_orders .ao-pag-spinner-ring above; the orders-list row loader in
   orders-lab.css) are NOT affected and remain. */

/* ── .hub-spinner: opt-in house ring loader (surgical, per-spot) ─────────────
   The replacement for the removed global cog→ring override. This is NOT applied
   to every spinning cog automatically — each loader is converted to it ONE AT A
   TIME and verified to look right in its own context (the global rule's failure
   was forcing one geometry on every context). Add it where a loader should be
   the house ring; leave default cogs elsewhere.

   Self-contained + oval-proof: sized in em so it scales with the host icon's
   font-size; flex:0 0 auto + aspect-ratio:1 so a flex row can never squeeze it
   into an oval; draws the ring on its own border (no glyph needed — when these
   replace an `<i class="fal fa-search">` the glyph class is removed, so there's
   nothing to hide). vertical-align tuned to sit on the text baseline. */
.hub-spinner {
	/* These are applied to a FontAwesome <i> (which keeps its .fas/.far family
	   class), so every geometry property is !important to beat FA's icon CSS —
	   without that, FA's width/line-height win and the ring renders as an oval. */
	display: inline-block !important;
	box-sizing: border-box !important;
	width: 1em !important;
	height: 1em !important;
	min-width: 1em !important;
	flex: 0 0 auto !important;          /* never let a flex row squeeze it → no oval */
	aspect-ratio: 1 / 1 !important;
	line-height: 1 !important;
	text-indent: 0 !important;
	/* Neutral faint track reads on a light page OR a colored button; the spinning
	   accent uses currentColor so it auto-matches the icon it replaced — white on
	   a navy/colored button, dark on a light background, light in dark mode. No
	   color-mix (keeps it working on the older browsers this targets). */
	border: 0.13em solid rgba(130, 130, 130, 0.30) !important;
	border-top-color: currentColor !important;
	border-radius: 50% !important;
	animation: ao-pag-spin 0.7s linear infinite !important;
	vertical-align: -0.125em;
}
/* Kill the FontAwesome glyph entirely — even if a glyph class (fa-cog, fa-search,
   …) lingers on the element, no cog/icon shows "behind" the ring. */
.hub-spinner::before,
.hub-spinner::after {
	content: "" !important;
	display: none !important;
}
/* Explicit white-ring override for the rare button whose text colour isn't a
   good ring colour (e.g. dark text on a saturated fill). Most buttons don't need
   it now that the accent is currentColor. */
.hub-spinner--on-color,
[data-theme="dark"] .hub-spinner--on-color {
	border-color: rgba(255, 255, 255, 0.40);
	border-top-color: #ffffff;
}

/* ── Job-location map loading state ─────────────────────────────────────────
   Shown inside #open_map (Set Job Location modal) while the geocode + tiles
   load. Centered house ring in brand navy with a quiet tracked-caps label —
   replaces the old 120px cog + bold 20px caps. */
.map-loading {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 15px;
	color: #0c4d8b;               /* ring arc (currentColor) — matches the modal's map icon */
}
.map-loading .hub-spinner {
	font-size: 40px;              /* ring diameter */
}
.map-loading span {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #97a1b0;              /* muted label, independent of the navy ring */
}
[data-theme="dark"] .map-loading { color: #5b9bd5; }
[data-theme="dark"] .map-loading span { color: #7d8797; }


/* ============================================================
   Filter bar: keyword × + Clear-all button
   Static markup in .s_fields (index.php) — these are NOT JS-injected
   so they can't be duplicated by AJAX re-renders.
   ============================================================ */
.s_fields .filter-group .kw-clear {
	display: none;
	background: none;
	border: 0;
	padding: 0 0 0 6px;
	margin: 0 0 0 4px;
	color: #cbd5e1;
	cursor: pointer;
	font: inherit;
	line-height: 1;
	transition: color 0.15s;
	flex-shrink: 0;
}
.s_fields .filter-group.has-value .kw-clear { display: inline-flex; align-items: center; }
.s_fields .filter-group .kw-clear i { font-size: 13px; }
.s_fields .filter-group .kw-clear:hover { color: #dc2626; }

.s_fields .filter-clear-all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	padding: 0 12px;
	height: 32px;
	font: 500 13px/1 inherit;
	color: #64748b;
	cursor: pointer;
	transition: all 0.15s ease;
	flex-shrink: 0;
}
.s_fields .filter-clear-all:hover {
	border-color: #dc2626;
	color: #dc2626;
	background: #fef2f2;
}
.s_fields .filter-clear-all:active { transform: scale(0.97); }
.s_fields .filter-clear-all i { font-size: 11px; }

[data-theme="dark"] .s_fields .filter-group .kw-clear { color: #475569; }
[data-theme="dark"] .s_fields .filter-group .kw-clear:hover { color: #f87171; }
[data-theme="dark"] .s_fields .filter-clear-all {
	background: #0f172a;
	border-color: #1e293b;
	color: #94a3b8;
}
[data-theme="dark"] .s_fields .filter-clear-all:hover {
	background: #2a1414;
	border-color: #7f1d1d;
	color: #f87171;
}

/* ── Vault-order "auto-add new items to current ticket" toggle ──────────────
   index.php #vo_ticket_opt. Hidden by default; load_ord() shows it only for
   vault orders. .is-billed = the order's ticket is invoiced/paid (toggle off
   + disabled). */
.vo-ticket-opt { display:flex; align-items:center; gap:12px; margin:8px 5px 12px; padding:10px 14px; background:#f1f6fb; border:1px solid #d6e4f0; border-left:3px solid #0c4d8b; border-radius:8px; max-width:660px; }
.vo-ticket-opt.is-billed { background:#fbf3ef; border-color:#ecd6ca; border-left-color:#b4541f; }
.vo-ticket-switch { position:relative; display:inline-block; width:42px; height:24px; flex:0 0 auto; cursor:pointer; }
.vo-ticket-switch input { position:absolute; opacity:0; width:0; height:0; }
.vo-ticket-slider { position:absolute; inset:0; background:#c4cdd6; border-radius:999px; transition:background .18s ease; }
.vo-ticket-slider::before { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; background:#fff; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .18s ease; }
.vo-ticket-switch input:checked + .vo-ticket-slider { background:#0c4d8b; }
.vo-ticket-switch input:checked + .vo-ticket-slider::before { transform:translateX(18px); }
.vo-ticket-switch input:disabled + .vo-ticket-slider { background:#d8c2b6; opacity:.75; }
.vo-ticket-switch input:disabled { cursor:not-allowed; }
.vo-ticket-opt-text { display:flex; flex-direction:column; line-height:1.35; }
.vo-ticket-opt-title { font-size:13px; font-weight:600; color:#1e293b; }
.vo-ticket-opt-title i { margin-right:5px; color:#0c4d8b; }
.vo-ticket-opt.is-billed .vo-ticket-opt-title i { color:#b4541f; }
.vo-ticket-opt-note { font-size:11.5px; color:#64748b; margin-top:1px; }
/* Billed vault ticket: lock the switch regardless of the disabled attr (which
   some later load step clears) — the .is-billed class is controlled by JS. */
.vo-ticket-opt.is-billed .vo-ticket-switch { pointer-events:none; }
.vo-ticket-opt.is-billed .vo-ticket-slider { background:#d8c2b6; opacity:.7; }
.vo-ticket-opt.is-billed .vo-ticket-switch input:checked + .vo-ticket-slider { background:#d8c2b6; }

/* ── Adaptive frosted glass (low-end devices) ─────────────────────────────────
   The head probe adds html.fx-lite on devices whose GPU can't composite
   full-viewport backdrop blur smoothly (old laptops / weak integrated GPUs).
   There we drop backdrop-filter everywhere — every blurred overlay keeps its
   rgba() scrim, so it reads as a clean flat tint instead of frosted, at a
   fraction of the paint cost. Capable devices keep the blur untouched.
   Specificity (0,1,1) + !important out-ranks all 140 blur rules (only 2 use
   !important, both at (0,1,0)). */
html.fx-lite *,
html.fx-lite *::before,
html.fx-lite *::after {
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

/* Recently-deleted-orders panel (orders list). Search wrap mirrors dt_search_wrap;
   icon + input centrelines coincide (align rule). */
.ord-deleted-bar { padding: 4px 2px 12px; }
.ord-deleted-search { position: relative; display: flex; align-items: center; }
.ord-deleted-search > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 13px; pointer-events: none; }
.ord-deleted-search input { width: 100%; box-sizing: border-box; height: 38px; padding: 0 12px 0 34px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 14px; outline: none; }
.ord-deleted-search input:focus { border-color: #0c4d8b; }
.ord-deleted-list { max-height: 60vh; overflow: auto; }
[data-theme="dark"] .ord-deleted-search input { background: #0f1729; border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] .ord-deleted-search > i { color: #64748b; }