[data-bs-theme="dark"] /* Dark Theme */
#page-wrapper, [data-bs-theme="dark"] #wrapper, [data-bs-theme="dark"] #mainNavBar, [data-bs-theme="dark"] .frameIntegration
#navCustPortal, [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .table .table, [data-bs-theme="dark"] h233,
[data-bs-theme="dark"] .card-header, [data-bs-theme="dark"] .card-body, [data-bs-theme="dark"] .card-body h3, [data-bs-theme="dark"] .card-footer, [data-bs-theme="dark"] span
input, [data-bs-theme="dark"] select, [data-bs-theme="dark"] textarea, [data-bs-theme="dark"] .row a div, [data-bs-theme="dark"] .infoLabel,
[data-bs-theme="dark"] .table th, [data-bs-theme="dark"] .infoInput, [data-bs-theme="dark"] .top-nav, [data-bs-theme="dark"] .modal-content, [data-bs-theme="dark"] .amtEditCuOr,
[data-bs-theme="dark"] .input_box_proLog, [data-bs-theme="dark"] .sumInput td, [data-bs-theme="dark"] .footerClimb, [data-bs-theme="dark"] .amtEditPuOr, [data-bs-theme="dark"] .input_box_po_edit,
[data-bs-theme="dark"] .input_box_po, [data-bs-theme="dark"] .undelivered, [data-bs-theme="dark"] .sumInput, [data-bs-theme="dark"] .popover, [data-bs-theme="dark"] .zIndex, [data-bs-theme="dark"] .input_box_crm,
[data-bs-theme="dark"] .amtEditCrmOr, [data-bs-theme="dark"] .themeLabel, [data-bs-theme="dark"] .multiselect, [data-bs-theme="dark"] .dropdown1-menu, [data-bs-theme="dark"] .input-group-addon,
[data-bs-theme="dark"] .multiselect-search, [data-bs-theme="dark"] .dropdown-menu1>li>a, [data-bs-theme="dark"] .multiselect-clear-filter, [data-bs-theme="dark"] .chart-title,
[data-bs-theme="dark"] .modalFont, [data-bs-theme="dark"] .select2-search__field, [data-bs-theme="dark"] .select2-selection--single, [data-bs-theme="dark"] .select2-selection__rendered,
[data-bs-theme="dark"] .border-rounded-light, [data-bs-theme="dark"] .navbar-fixed-top, [data-bs-theme="dark"] .panel, [data-bs-theme="dark"] .panel-heading {
    background-color: #333333 !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .multiselect.dropdown-toggle.btn.btn-default {
	border: 1px solid #ccc;
}

[data-bs-theme="dark"] .search-label {
	opacity: 0.25 !important;	
}

[data-bs-theme="dark"] button, [data-bs-theme="dark"] .buttonClimb {
    color: #ffffff !important;
    border: 2px solid white;
}

html:not([data-bs-theme="dark"]) .multiselect-clear-filter {
	color: #333 !important;
}

[data-bs-theme="dark"] .breadcrum ul li a .icon, [data-bs-theme="dark"] .breadcrum ul li a {
	color: white;
	-webkit-text-fill-color: unset;
	box-shadow: 0px 3px 6px 0px white;
}

[data-bs-theme="dark"] .bt, [data-bs-theme="dark"] input[type="button"], [data-bs-theme="dark"] .buttonClimb, [data-bs-theme="dark"] .blackFont, [data-bs-theme="dark"] .buttonClimbSolid:hover {
	color: white !important;
}

html:not([data-bs-theme="dark"]) .buttonClimbSolid, [data-bs-theme="dark"] input[type="date"] {
	color: white !important;
}

html:not([data-bs-theme="dark"]) .buttonClimbSolid:hover, html:not([data-bs-theme="dark"]) #menu {
	background-color: white;
	color: gray !important;
}

[data-bs-theme="dark"] .ulDrop li a {
    background-color: #333333 !important;
}

[data-bs-theme="dark"] .table-hover>tbody>tr:hover, [data-bs-theme="dark"] .table-hover>tbody>tr.active:hover>td, [data-bs-theme="dark"] .ulDrop li a:hover, [data-bs-theme="dark"] .climb-dd-menu li a:hover, [data-bs-theme="dark"] .dropdown-menu li a:hover {
	background-color: #444444 !important;
}

html:not([data-bs-theme="dark"]) .addToBackorderBtn.readOnlyECO, html:not([data-bs-theme="dark"]) .addToProductBtn.readOnlyECO, [data-bs-theme="dark"] a.bt.readOnlyECO, [data-bs-theme="dark"] .removeBtn.readOnlyECO, [data-bs-theme="dark"] .buttonClimbSmall.readOnlyECO, [data-bs-theme="dark"] .form-control.readOnlyECO, [data-bs-theme="dark"] #backOrderTable .form-control {
    opacity: 0.5 !important;
    background: no-repeat !important;
}

html:not([data-bs-theme="dark"]) .addToBackorderBtn.readOnlyView, html:not([data-bs-theme="dark"]) .addToProductBtn.readOnlyView, [data-bs-theme="dark"] a.bt.readOnlyView, [data-bs-theme="dark"] .removeBtn.readOnlyView, [data-bs-theme="dark"] .buttonClimbSmall.readOnlyView, [data-bs-theme="dark"] .form-control.readOnlyView, [data-bs-theme="dark"] #backOrderTable .form-control {
    opacity: 0.5 !important;
    background: no-repeat !important;
}

/* Prevent <a class="readOnlyECO"> wrappers from inheriting the #eee light background
   from climb-styling.css — their child inputs are transparent, so the wrapper
   background bleeds through and produces a lighter appearance in dark mode */
[data-bs-theme="dark"] a.readOnlyECO {
    background-color: transparent !important;
}

[data-bs-theme="dark"] .footerClimb, [data-bs-theme="dark"] .popover {
	background-image: none;
}

/* Theme Toggle button  */
.toggle {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: green; /* Green */
}

input:checked + .slider:before {
    transform: translateX(26px);
}

[data-bs-theme="dark"] .lightGreenColor, [data-bs-theme="dark"] .commentColor {
	color: #99FF33 !important;
}

html:not([data-bs-theme="dark"]) .lightGreenColor {
	color: green !important;
}

/** Theme Icon CSS**/
:root {
    --white: #ffffff;
    --black: #000000;
    --dark-blue: #1f2029;
    --dark-light: #353746;
    --red: #3c0076;
    --yellow: #a500ff;
    --grey: #ecedf3;
}
/** Theme Toggle **/
.for-checkbox {
    display: inline-block;
    position: relative;
    width: 36px;
    height: 3px;
    background-image: linear-gradient(298deg, var(--red), var(--yellow));
    border-radius: 4px;
    cursor: pointer;
	background-image: linear-gradient(298deg, #f97316, #facc15);
}

.for-checkbox::before {
    content: '\f0eb'; /* sun icon for light mode */
    font-family: FontAwesome;
    position: absolute;
    top: 50%;
    left: -2px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    font-size: 11px;
    line-height: 18px;
    border-radius: 50%;
    background-color: var(--dark-light);
    color: var(--grey);
    text-align: center;
    transition: all 300ms;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
}

.checkbox:checked + .for-checkbox::before {
    content: '\f042'; /* moon icon for dark mode */
    left: 20px;
    /*box-shadow: 0 2px 3px rgba(26, 53, 71, 0.25);*/
	background-color: var(--dark-blue);
    color: var(--yellow);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] .buttonClimb:hover, [data-bs-theme="dark"] .btnClimb:focus, [data-bs-theme="dark"] .buttonClimbShip:hover {
	background-image: unset !important;
}

[data-bs-theme="dark"] .close {
	background-color: unset !important;
}

[data-bs-theme="dark"] .alert1.alert-dismissible.alert-success a, [data-bs-theme="dark"] .active.tableInput a, [data-bs-theme="dark"] .tab.active span, [data-bs-theme="dark"] .buttonClimbSolid span, [data-bs-theme="dark"] #closeCart, [data-bs-theme="dark"] .cart-footer *, [data-bs-theme="dark"] #clearSearch, [data-bs-theme="dark"] .ds-section-count, [data-bs-theme="dark"] .ds-section-label {
	color: unset !important;
	background-color: unset !important;
}

[data-bs-theme="dark"] .starColor {
	color: red !important;
}

[data-bs-theme="dark"] .table a, [data-bs-theme="dark"] .alert a, [data-bs-theme="dark"] .underlineDesign, [data-bs-theme="dark"] .active.order.tableInput.claimTableRow a, [data-bs-theme="dark"] h4 a, [data-bs-theme="dark"] .aTagDiv a  {
	color: #4ea3ff !important; 
	background-color: unset !important;
}

[data-bs-theme="dark"] .successNew {
	background-color : #4caf50 !important;
}

.order-journey.in-progress {
	color : #fb8c00 !important;
}

[data-bs-theme="dark"] .order-journey.complete {
	color : #6ef146 !important;
}

html:not([data-bs-theme="dark"]) .order-journey.complete {
	color: green !important;
}

[data-bs-theme="dark"] .designColor, [data-bs-theme="dark"] span.label {
	background-color: unset !important;
}

[data-bs-theme="dark"] .table.table-hover .successNew:hover {
    background-color: #388e3c !important;
    transition: background-color 0.3s ease;
}

[data-bs-theme="dark"] /* Optional: Remove native icon in some browsers */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1); /* Makes calendar icon light */
}

.nav__link:hover {
  cursor: pointer;
}

[data-bs-theme="dark"] /* Applies only when dark theme is active */
 .select2-container--default .select2-selection--multiple,
[data-bs-theme="dark"] .select2-container--default .select2-selection--single {
    background-color: #333333 !important;
    color: #f0f0f0 !important;
    border: 1px solid #ffffff !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-selection__rendered {
    color: #f0f0f0 !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-selection__choice {
    background-color: #333333 !important;
    color: #fff !important;
    border: 1px solid #ffffff !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: #333333 !important;
    color: #f0f0f0 !important;
    border: 1px solid #ffffff !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-results__option {
    background-color: #333333;
    color: #f0f0f0;
}

[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted {
    background-color: #333333 !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] /* Hover and keyboard highlight */
 .select2-container--default .select2-results__option--highlighted[aria-selected],
[data-bs-theme="dark"] .select2-container--default .select2-results__option:hover,
[data-bs-theme="dark"] .flexselect_selected:hover {
    background-color: #555555 !important;  /* visible hover */
    color: #ffffff !important;
}

[data-bs-theme="dark"] /* Selected item (checkmark) */
 .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #444444 !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] /* Fix dropdown background */
 .select2-container--default .select2-results {
    background-color: #333333 !important;
}

[data-bs-theme="dark"] a.proColor {
	color: #DD9CDF !important;
}

[data-bs-theme="dark"] .warningWriting {
	color: #ff4d4d !important;
}

[data-bs-theme="dark"] .designColor {
	color: #b0b0b0 !important;
}

[data-bs-theme="dark"] .modalFont a {
	color: #337ab7 !important;
}

[data-bs-theme="dark"] /* 🔥 Dark Theme Overrides for DateRangePicker */
 .daterangepicker {
    background-color: #333333 !important;
    color: #ffffff !important;
    border: 1px solid #555 !important;
}

[data-bs-theme="dark"] .daterangepicker .calendar-table {
    background-color: #333333 !important;
    color: #ffffff !important;
    border-color: #555 !important;
}

[data-bs-theme="dark"] .daterangepicker td.available,
[data-bs-theme="dark"] .daterangepicker th.available {
    background-color: #333333 !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .daterangepicker td.off {
    background-color: #2a2a2a !important;
    color: #888888 !important;
}

[data-bs-theme="dark"] .daterangepicker td.active,
[data-bs-theme="dark"] .daterangepicker td.active:hover {
    background-color: #5555ff !important; /* selection highlight */
    color: #ffffff !important;
}

[data-bs-theme="dark"] .daterangepicker td.in-range {
    background-color: #444444 !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .daterangepicker .ranges li {
    background-color: #333333 !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .daterangepicker .ranges li:hover {
    background-color: #444444 !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .daterangepicker .ranges li.active {
    background-color: #5555ff !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .daterangepicker .drp-buttons {
    background-color: #333333 !important;
    border-top: 1px solid #555 !important;
}

[data-bs-theme="dark"] .daterangepicker .drp-buttons .btn {
    background-color: #444444 !important;
    color: #ffffff !important;
    border: 1px solid #555 !important;
}

[data-bs-theme="dark"] .daterangepicker .drp-buttons .btn:hover {
    background-color: #5555ff !important;
    color: #ffffff !important;
}

/* Light theme overrides for DateRangePicker buttons */
.daterangepicker .drp-buttons .btn {
    min-width: 70px;
    padding: 4px 12px;
    font-size: 13px;
}

/* Apply button */
.daterangepicker .drp-buttons .btn.applyBtn {
    background-color: #007bff; /* Bootstrap blue */
    border: 1px solid #007bff;
    color: #ffffff;
}

.daterangepicker .drp-buttons .btn.applyBtn:hover {
    background-color: #0056b3;
    border-color: #0056b3;
    color: #ffffff;
}

/* Cancel (Clear) button */
.daterangepicker .drp-buttons .btn.cancelBtn {
    background-color: #f8f9fa; /* light gray */
    border: 1px solid #ced4da;
    color: #333333;
}

.daterangepicker .drp-buttons .btn.cancelBtn:hover {
    background-color: #e2e6ea;
    border-color: #adb5bd;
    color: #000000;
}

[data-bs-theme="dark"] /* Gantt container */
.gantt {
  position: relative;
  overflow-x: auto;
  width: 100%;
  border: 1px solid #333;
  background: #1e1e1e;
  font-family: var(--app-font);
}

[data-bs-theme="dark"] /* Sticky header */
.gantt .gantt__header {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 10;
  background: #2a2a2a;
  border-bottom: 1px solid #444;
}

[data-bs-theme="dark"] /* Header day */
.gantt .gantt__header-day {
  flex: 0 0 auto;
  min-width: 60px;
  height: 50px;
  text-align: center;
  font-size: 12px;
  border-right: 1px solid #444;
  color: #ccc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

[data-bs-theme="dark"] /* Date and day spacing */
.gantt .gantt__header-day .date {
  font-weight: bold;
  margin-bottom: 2px;
}

[data-bs-theme="dark"] .gantt .gantt__header-day .day {
  font-size: 11px;
  color: #aaa;
}

[data-bs-theme="dark"] /* Row bars */
.gantt .gantt__row-bars {
  position: relative;
  height: 42px;
  border-bottom: 1px solid #333;
  overflow: hidden;
}

[data-bs-theme="dark"] /* Bars */
.gantt .gantt__row-bar {
  position: absolute;
  height: 26px;
  top: 8px;
  line-height: 26px;
  color: #fff;
  font-size: 11px;
  text-align: center;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 2;
  transition: transform 0.2s, box-shadow 0.2s;
}

[data-bs-theme="dark"] .gantt .gantt__row-bar:hover {
  transform: scaleY(1.1);
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

[data-bs-theme="dark"] /* Weekends */
.gantt .weekend {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.06);
  z-index: 0;
  pointer-events: none;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

[data-bs-theme="dark"] /* Current day line */
.gantt .current-day {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #ff4081;
  z-index: 3;
}
/** To Resolve Flicker issue **/
body {
  opacity: 0;
  transition: opacity 0.2s ease;
}
body.ready {
  opacity: 1;
}

[data-bs-theme="dark"] /** Table hover css for dark and light theme **/

 .table.table-hover.table-striped thead tr.tableLabel th,
[data-bs-theme="dark"] .table.table-hover.table-striped thead th {
  transition: background-color 0.18s ease, color 0.18s ease;
  cursor: pointer;
}

[data-bs-theme="dark"] .table.table-hover.table-striped thead tr.tableLabel th:hover,
[data-bs-theme="dark"] .table.table-hover.table-striped thead th:hover {
  background-color: #444 !important;
  color: #fff !important;
  box-shadow: 0 0 8px rgb(78, 78, 78);
}
html:not([data-bs-theme="dark"]) .table.table-hover.table-striped thead tr.tableLabel th,
html:not([data-bs-theme="dark"]) .table.table-hover.table-striped thead th {
  transition: background-color 0.18s ease, color 0.18s ease;
  cursor: pointer;
}

html:not([data-bs-theme="dark"]) .table.table-hover.table-striped thead tr.tableLabel th:hover,
html:not([data-bs-theme="dark"]) .table.table-hover.table-striped thead th:hover {
  background-color: #e8e8e8 !important;
  color: #000 !important;
  box-shadow: none; /* adjust if needed */
}

[data-bs-theme="dark"] /* --- Make all inputs/selects look like plain text until focus --- */
 #orderTable .form-control,
[data-bs-theme="dark"] #addChargesServicesTable .form-control,
[data-bs-theme="dark"] #proLogTable .form-control,
[data-bs-theme="dark"] #pickSlipTable .form-control,
[data-bs-theme="dark"] #purchaseOrderTable .form-control,
[data-bs-theme="dark"] #addChargesServicesPOTable .form-control,
[data-bs-theme="dark"] .drawdownTable .form-control,
[data-bs-theme="dark"] #backOrderTable .form-control {
  background: transparent;
  border: 1px solid transparent;
  color: #fff;
  padding: 0;
  height: auto;
  box-shadow: none;
  cursor: text;
  text-align: inherit;
  transition: all 0.15s ease;
  appearance: none;
  width: 100%;
}

[data-bs-theme="dark"] /* --- Hover effect (subtle dashed underline) --- */
 #orderTable .form-control:hover,
[data-bs-theme="dark"] #addChargesServicesTable .form-control:hover,
[data-bs-theme="dark"] .drawdownTable .form-control:hover,
[data-bs-theme="dark"] #backOrderTable .form-control:hover {
  border-bottom: 1px solid #deb85f;
}

[data-bs-theme="dark"] #proLogTable .form-control:hover, [data-bs-theme="dark"] #proLogTable .form-control:focus, .border-bottom-logs-color {
	border-bottom: 1px solid #dd9cdf;
}

[data-bs-theme="dark"] #pickSlipTable .form-control:hover, [data-bs-theme="dark"] #pickSlipTable .form-control:focus {
	border-bottom: 1px solid #e9937c;
}

[data-bs-theme="dark"] #purchaseOrderTable .form-control:hover, [data-bs-theme="dark"] #purchaseOrderTable .form-control:focus,
[data-bs-theme="dark"] #addChargesServicesPOTable .form-control:hover, [data-bs-theme="dark"] #addChargesServicesPOTable .form-control:focus {
	border-bottom: 1px solid #41b6e6;
}

[data-bs-theme="dark"] /* --- Focused state (active editing mode) --- */
 #orderTable .form-control:focus,
[data-bs-theme="dark"] #addChargesServicesTable .form-control:focus,
[data-bs-theme="dark"] .drawdownTable .form-control:focus,
[data-bs-theme="dark"] #backOrderTable .form-control:focus {
  background: #2b2b2b;
  border-bottom: 1px solid #deb85f;
  color: #fff;
  padding: 4px 6px;
  height: 30px;
  outline: none;
  box-shadow: none;
  border-radius: 4px;
}

[data-bs-theme="dark"] /* --- Select dropdowns --- */
 #orderTable select.form-control,
[data-bs-theme="dark"] #proLogTable select.form-control,
[data-bs-theme="dark"] #pickSlipTable select.form-control,
[data-bs-theme="dark"] #addChargesServicesTable select.form-control,
[data-bs-theme="dark"] #purchaseOrderTable select.form-control,
[data-bs-theme="dark"] #addChargesServicesPOTable select.form-control,
[data-bs-theme="dark"] .drawdownTable select.form-control,
[data-bs-theme="dark"] #backOrderTable select.form-control {
  cursor: pointer;
}

[data-bs-theme="dark"] /* Hide dropdown arrow until focus */
 #orderTable select.form-control:not(:focus),
[data-bs-theme="dark"] #proLogTable select.form-control:not(:focus),
[data-bs-theme="dark"] #pickSlipTable select.form-control:not(:focus),
[data-bs-theme="dark"] #addChargesServicesTable select.form-control:not(:focus),
[data-bs-theme="dark"] #purchaseOrderTable select.form-control:not(:focus),
[data-bs-theme="dark"] #addChargesServicesPOTable select.form-control:not(:focus),
[data-bs-theme="dark"] .drawdownTable select.form-control:not(:focus),
[data-bs-theme="dark"] #backOrderTable select.form-control:not(:focus) {
  background-image: none;
}

[data-bs-theme="dark"] /* Show normal dropdown when focused */
 #orderTable select.form-control:focus,
[data-bs-theme="dark"] #proLogTable select.form-control:focus,
[data-bs-theme="dark"] #pickSlipTable select.form-control:focus,
[data-bs-theme="dark"] #addChargesServicesTable select.form-control:focus,
[data-bs-theme="dark"] #addChargesServicesPOTable select.form-control:focus,
[data-bs-theme="dark"] #purchaseOrderTable select.form-control:focus,
[data-bs-theme="dark"] .drawdownTable select.form-control:focus,
[data-bs-theme="dark"] #backOrderTable select.form-control:focus {
  appearance: auto;
  background-color: #2b2b2b;
  border: 1px solid #666;
  padding: 4px 6px;
  height: 32px;
}

[data-bs-theme="dark"] /* --- Readonly fields --- */
 #orderTable .form-control[readonly],
[data-bs-theme="dark"] #orderTable input[readonly],
[data-bs-theme="dark"] #proLogTable .form-control[readonly],
[data-bs-theme="dark"] #proLogTable input[readonly],
[data-bs-theme="dark"] #pickSlipTable .form-control[readonly],
[data-bs-theme="dark"] #pickSlipTable input[readonly],
[data-bs-theme="dark"] #purchaseOrderTable .form-control[readonly],
[data-bs-theme="dark"] #purchaseOrderTable input[readonly],
[data-bs-theme="dark"] #addChargesServicesPOTable .form-control[readonly],
[data-bs-theme="dark"] #addChargesServicesPOTable input[readonly],
[data-bs-theme="dark"] #addChargesServicesTable .form-control[readonly],
[data-bs-theme="dark"] #addChargesServicesTable input[readonly],
[data-bs-theme="dark"] .drawdownTable .form-control[readonly],
[data-bs-theme="dark"] .drawdownTable input[readonly],
[data-bs-theme="dark"] #backOrderTable .form-control[readonly],
[data-bs-theme="dark"] #backOrderTable input[readonly] {
  background: transparent;
  border: none;
  color: #ccc;
  cursor: default;
  box-shadow: none;
  pointer-events: none;
}

html:not([data-bs-theme="dark"]) #orderTable .form-control,
html:not([data-bs-theme="dark"]) #proLogTable .form-control,
html:not([data-bs-theme="dark"]) #pickSlipTable .form-control,
html:not([data-bs-theme="dark"]) #addChargesServicesTable .form-control,
html:not([data-bs-theme="dark"]) #addChargesServicesPOTable .form-control,
html:not([data-bs-theme="dark"]) #purchaseOrderTable .form-control,
html:not([data-bs-theme="dark"]) .drawdownTable .form-control,
html:not([data-bs-theme="dark"]) #backOrderTable .form-control {
  background: transparent;
  border: 1px solid transparent;
  color: #000;
  padding: 0;
  height: auto;
  box-shadow: none;
  cursor: text;
  text-align: inherit;
  transition: all 0.15s ease;
  appearance: none;
  width: 100%;
}

html:not([data-bs-theme="dark"]) #orderTable .form-control:hover,
html:not([data-bs-theme="dark"]) #proLogTable .form-control:hover,
html:not([data-bs-theme="dark"]) #pickSlipTable .form-control:hover,
html:not([data-bs-theme="dark"]) #addChargesServicesTable .form-control:hover,
html:not([data-bs-theme="dark"]) #purchaseOrderTable .form-control:hover,
html:not([data-bs-theme="dark"]) #addChargesServicesPOTable .form-control:hover,
html:not([data-bs-theme="dark"]) .drawdownTable .form-control:hover,
html:not([data-bs-theme="dark"]) #backOrderTable .form-control:hover {
  border-bottom: 1px dashed #999;
}

html:not([data-bs-theme="dark"]) #orderTable .form-control:focus,
html:not([data-bs-theme="dark"]) #proLogTable .form-control:focus,
html:not([data-bs-theme="dark"]) #pickSlipTable .form-control:focus,
html:not([data-bs-theme="dark"]) #addChargesServicesTable .form-control:focus,
html:not([data-bs-theme="dark"]) #purchaseOrderTable .form-control:focus,
html:not([data-bs-theme="dark"]) #addChargesServicesPOTable .form-control:focus,
html:not([data-bs-theme="dark"]) .drawdownTable .form-control:focus,
html:not([data-bs-theme="dark"]) #backOrderTable .form-control:focus {
  background: #f2f2f2;
  border: 1px solid #aaa;
  color: #000;
  padding: 4px 6px;
  height: 30px;
  outline: none;
  box-shadow: none;
  border-radius: 4px;
}

html:not([data-bs-theme="dark"]) #orderTable select.form-control:not(:focus),
html:not([data-bs-theme="dark"]) #proLogTable select.form-control:not(:focus),
html:not([data-bs-theme="dark"]) #pickSlipTable select.form-control:not(:focus),
html:not([data-bs-theme="dark"]) #addChargesServicesTable select.form-control:not(:focus),
html:not([data-bs-theme="dark"]) #purchaseOrderTable select.form-control:not(:focus),
html:not([data-bs-theme="dark"]) #addChargesServicesPOTable select.form-control:not(:focus),
html:not([data-bs-theme="dark"]) .drawdownTable select.form-control:not(:focus),
html:not([data-bs-theme="dark"]) #backOrderTable select.form-control:not(:focus) {
  background-image: none;
}

html:not([data-bs-theme="dark"]) #orderTable .form-control[readonly],
html:not([data-bs-theme="dark"]) #orderTable input[readonly],
html:not([data-bs-theme="dark"]) .drawdownTable .form-control[readonly],
html:not([data-bs-theme="dark"]) .drawdownTable input[readonly],
html:not([data-bs-theme="dark"]) #proLogTable .form-control[readonly],
html:not([data-bs-theme="dark"]) #proLogTable input[readonly],
html:not([data-bs-theme="dark"]) #pickSlipTable .form-control[readonly],
html:not([data-bs-theme="dark"]) #pickSlipTable input[readonly],
html:not([data-bs-theme="dark"]) #addChargesServicesTable .form-control[readonly],
html:not([data-bs-theme="dark"]) #addChargesServicesTable input[readonly],
html:not([data-bs-theme="dark"]) #backOrderTable .form-control[readonly],
html:not([data-bs-theme="dark"]) #backOrderTable input[readonly],
html:not([data-bs-theme="dark"]) #purchaseOrderTable .form-control[readonly],
html:not([data-bs-theme="dark"]) #addChargesServicesPOTable .form-control[readonly],
html:not([data-bs-theme="dark"]) #addChargesServicesPOTable input[readonly],
html:not([data-bs-theme="dark"]) #purchaseOrderTable input[readonly] {
  background: transparent;
  border: none;
  color: #666;
  cursor: default;
  box-shadow: none;
  pointer-events: none;
}

/* --- Table layout tweaks --- */
#proLogTable, #pickSlipTable, .drawdownTable {
  table-layout: auto;
  width: 100%;
}
#pickSlipTable .form-control {
  padding: 2px 8px !important;
}

/* Vertical alignment consistency */
#orderTable td, #proLogTable td, #pickSlipTable td, #addChargesServicesTable td , #backOrderTable td, #purchaseOrderTable td, #addChargesServicesPOTable td, .drawdownTable td {
  vertical-align: middle !important;
}


[data-bs-theme="dark"] .modal-header  a {
    color: #4da3ff !important;   /* light blue link */
    text-decoration: none;
}

[data-bs-theme="dark"] .modal-header  a:hover,
[data-bs-theme="dark"] .modal-header  a:focus {
    color: #82c4ff !important;   /* lighter blue on hover */
    text-decoration: underline;
}

[data-bs-theme="dark"] .modal-header  a:visited {
    color: #b0d4ff !important;   /* softer shade for visited */
}

[data-bs-theme="dark"] .modal-header  a.disabled,
[data-bs-theme="dark"] .modal-header  a[disabled] {
    pointer-events: none;
    opacity: 0.5;
}

[data-bs-theme="dark"] /* Dark Theme Popover */
 .popover {
    background-color: #2d2d2d !important;
    border: 1px solid #555 !important;
    color: #fff !important;
}

[data-bs-theme="dark"] /* Popover title */
 .popover-title {
    background-color: #333 !important;
    color: #fff !important;
    border-bottom: 1px solid #555 !important;
}

[data-bs-theme="dark"] /* Popover arrow */
 .popover.right .arrow:after {
    border-right-color: #2d2d2d !important;
}
[data-bs-theme="dark"] .popover.left .arrow:after {
    border-left-color: #2d2d2d !important;
}
[data-bs-theme="dark"] .popover.top .arrow:after {
    border-top-color: #2d2d2d !important;
}
[data-bs-theme="dark"] .popover.bottom .arrow:after {
    border-bottom-color: #2d2d2d !important;
}

[data-bs-theme="dark"] /* Light theme */
body:not() input[type="date"] {
    background-color: #ffffff;
    color: #212529;
    border: 1px solid #ced4da;
}

[data-bs-theme="dark"] /* Dark theme for HTML date*/
body input[type="date"] {
    background-color: #555555;
    color: #ffffff;
}

[data-bs-theme="dark"] body {
    color-scheme: dark;
}

[data-bs-theme="dark"] body:not() {
    color-scheme: light;
}

[data-bs-theme="dark"] /* ============================================
   DRIVER SCHEDULE — Theme Variables
   ============================================ */

/* ── Dark theme variables ── */
 .ds-root,
[data-bs-theme="dark"] #mobileScheduleDataCurrent {
 /* --ds-bg:           #141414;*/
  --ds-surface:      #1e1e1e;
  --ds-surface-2:    #252525;
  --ds-border:       #2c2c2c;
  --ds-border-2:     #303030;
  --ds-text-primary: #efefef;
  --ds-text-muted:   #686868;
  --ds-text-dim:     #3a3a3a;
  --ds-tab-inactive: #4a4a4a;
  --ds-accent:       #e9937c;
  --ds-accent-glow:  rgba(233,147,124,.4);
  --ds-chev:         #3a3a3a;
  --ds-pill-text:    #666;
}

html:not([data-bs-theme="dark"]) /* ── Light theme variables ── */
 .ds-root,
html:not([data-bs-theme="dark"]) #mobileScheduleDataCurrent {
  --ds-bg:           #f4f4f4;
  --ds-surface:      #ffffff;
  --ds-surface-2:    #f0f0f0;
  --ds-border:       #e2e2e2;
  --ds-border-2:     #d8d8d8;
  --ds-text-primary: #1a1a1a;
  --ds-text-muted:   #888888;
  --ds-text-dim:     #bbbbbb;
  --ds-tab-inactive: #aaaaaa;
  --ds-accent:       #e9937c;
  --ds-accent-glow:  rgba(233,147,124,.2);
  --ds-chev:         #cccccc;
  --ds-pill-text:    #999999;
}

[data-bs-theme="dark"] /* ============================================
   DRIVER SCHEDULE — Dark Theme Overrides
   Fights against the global  rule
   which sets background:#333 color:#fff on ALL
   ============================================ */

 .ds-root,
[data-bs-theme="dark"] #mobileScheduleDataCurrent,
[data-bs-theme="dark"] .ds-list-screen {
  /*background-color: #141414 !important;*/
  color: #efefef !important;
}

[data-bs-theme="dark"] .ds-tabs,
[data-bs-theme="dark"] .ds-card,
[data-bs-theme="dark"] .ds-dh,
[data-bs-theme="dark"] .ds-dtabs,
[data-bs-theme="dark"] .ds-order-card,
[data-bs-theme="dark"] .ds-detail-screen {
  /*background-color: #1e1e1e !important;*/
  color: #efefef !important;
}

[data-bs-theme="dark"] .ds-tab {
  /*color: #4a4a4a !important;*/
  background-color: transparent !important;
}

[data-bs-theme="dark"] .ds-tab.ds-active {
  background-color: #e9937c !important;
  color: #ffffff !important;
  box-shadow: 0 3px 16px rgba(255,107,53,.4) !important;
}

[data-bs-theme="dark"] .ds-dtab {
 /* color: #4a4a4a !important;*/
  background-color: transparent !important;
  border-bottom: 2px solid transparent !important;
}

[data-bs-theme="dark"] .ds-dtab.ds-active {
  color: #e9937c !important;
  border-bottom-color: #e9937c !important;
  background-color: transparent !important;
}

[data-bs-theme="dark"] .ds-name {
  color: #efefef !important;
  background-color: transparent !important;
}

[data-bs-theme="dark"] .ds-date {
  /*color: #686868 !important;*/
  background-color: transparent !important;
}

[data-bs-theme="dark"] .ds-pill {
  background-color: #252525 !important;
 /* color: #666 !important;*/
  border-color: #303030 !important;
}

[data-bs-theme="dark"] .ds-pill b {
  color: #e9937c !important;
}

[data-bs-theme="dark"] .ds-section-label,
[data-bs-theme="dark"] .ds-section-count {
  /*color: #3a3a3a !important;*/
  background-color: transparent !important;
}

[data-bs-theme="dark"] /* Avatar — dark */
 .ds-av-green { background-color: #0d2118 !important; border-color: #1b4030 !important; color: #3ddc84 !important; }
[data-bs-theme="dark"] .ds-av-blue  { background-color: #0d1a26 !important; border-color: #1b3550 !important; color: #5ba4f5 !important; }
[data-bs-theme="dark"] .ds-av-amber { background-color: #251a08 !important; border-color: #4a3210 !important; color: #f5a623 !important; }

[data-bs-theme="dark"] .ds-dh-title,
[data-bs-theme="dark"] .ds-remaining {
  color: #efefef !important;
  background-color: transparent !important;
}

[data-bs-theme="dark"] .ds-back-btn {
  background-color: #252525 !important;
  border-color: #2c2c2c !important;
  color: #efefef !important;
}

[data-bs-theme="dark"] /* Safety notice — dark */
 .ds-safety {
  background-color: #0d1a26 !important;
  border-color: #1b3550 !important;
}
[data-bs-theme="dark"] .ds-safety-text {
  color: #5ba4f5 !important;
  background-color: transparent !important;
}

[data-bs-theme="dark"] .ds-order-head,
[data-bs-theme="dark"] .ds-order-body,
[data-bs-theme="dark"] .ds-order-footer {
  background-color: transparent !important;
}

[data-bs-theme="dark"] .ds-order-name {
  color: #efefef !important;
  background-color: transparent !important;
}

[data-bs-theme="dark"] .ds-order-num {
  color: #686868 !important;
  background-color: transparent !important;
}

[data-bs-theme="dark"] .ds-order-row {
 /* color: #686868 !important;*/
  background-color: transparent !important;
}

[data-bs-theme="dark"] .ds-order-row span {
  /*color: #686868 !important;*/
  background-color: transparent !important;
}

[data-bs-theme="dark"] .ic-sm {
  stroke: #ffffff !important;
}

[data-bs-theme="dark"] .ic-md {
  stroke: #ffffff;
}

[data-bs-theme="dark"] .ds-delivery-badge {
  background-color: #252525 !important;
  border-color: #303030 !important;
  color: #ffffff !important;
}

[data-bs-theme="dark"] .ds-order-divider {
  background-color: #2c2c2c !important;
}

[data-bs-theme="dark"] /* Arrived button — dark */
 .ds-arrived-btn {
  background-color: transparent !important;
  border: 1.5px solid #303030 !important;
  color: #ffffff !important;
}

[data-bs-theme="dark"] .ds-arrived-btn:hover {
  border-color: #e9937c !important;
  color: #e9937c !important;
  background-color: transparent !important;
}

[data-bs-theme="dark"] .ds-arrived-btn.ds-done {
  background-color: #e9937c !important;
  border-color: #e9937c !important;
  color: #ffffff !important;
}

[data-bs-theme="dark"] .ds-chev {
  color: #3a3a3a !important;
  background-color: transparent !important;
}

[data-bs-theme="dark"] .ds-spinner {
  border-color: #2c2c2c !important;
  border-top-color: #e9937c !important;
}

[data-bs-theme="dark"] .ds-loading-text,
[data-bs-theme="dark"] .ds-empty,
[data-bs-theme="dark"] .ds-empty-orders {
  color: #686868 !important;
  background-color: transparent !important;
}

html:not([data-bs-theme="dark"]) /* ============================================
   DRIVER SCHEDULE — Light Theme Overrides
   ============================================ */

 .ds-root,
html:not([data-bs-theme="dark"]) #mobileScheduleDataCurrent,
html:not([data-bs-theme="dark"]) .ds-list-screen {
  background-color: #f4f4f4 !important;
  color: #1a1a1a !important;
}

html:not([data-bs-theme="dark"]) .ds-tabs {
  background-color: #ffffff !important;
  border-color: #e2e2e2 !important;
}

html:not([data-bs-theme="dark"]) .ds-tab {
  color: #aaaaaa !important;
  background-color: transparent !important;
}

html:not([data-bs-theme="dark"]) .ds-tab.ds-active {
  background-color: #e9937c !important;
  color: #ffffff !important;
}

html:not([data-bs-theme="dark"]) .ds-section-label,
html:not([data-bs-theme="dark"]) .ds-section-count {
  color: #bbbbbb !important;
  background-color: transparent !important;
}

html:not([data-bs-theme="dark"]) .ds-card {
  background-color: #ffffff !important;
  border-color: #e2e2e2 !important;
  color: #1a1a1a !important;
}

html:not([data-bs-theme="dark"]) .ds-card:hover {
  background-color: #f0f0f0 !important;
  border-color: #d8d8d8 !important;
}

html:not([data-bs-theme="dark"]) .ds-name {
  color: #1a1a1a !important;
}

html:not([data-bs-theme="dark"]) .ds-date {
  color: #888888 !important;
  background-color: transparent !important;
}

html:not([data-bs-theme="dark"]) .ds-pill {
  background-color: #f0f0f0 !important;
  border-color: #d8d8d8 !important;
  color: #999999 !important;
}

html:not([data-bs-theme="dark"]) .ds-pill b {
  color: #e9937c !important;
}

html:not([data-bs-theme="dark"]) /* Avatar — light */
 .ds-av-green { background-color: #e8f8ef !important; border-color: #b2e8c8 !important; color: #1a7a45 !important; }
html:not([data-bs-theme="dark"]) .ds-av-blue  { background-color: #e8f0fb !important; border-color: #b2cfee !important; color: #1a4fa0 !important; }
html:not([data-bs-theme="dark"]) .ds-av-amber { background-color: #fdf3e3 !important; border-color: #f5d7a0 !important; color: #a0620a !important; }

html:not([data-bs-theme="dark"]) .ds-detail-screen {
  background-color: #f4f4f4 !important;
}

html:not([data-bs-theme="dark"]) .ds-dh {
  background-color: #ffffff !important;
  border-color: #e2e2e2 !important;
}

html:not([data-bs-theme="dark"]) .ds-dh-title {
  color: #1a1a1a !important;
}

html:not([data-bs-theme="dark"]) .ds-back-btn {
  background-color: #f0f0f0 !important;
  border-color: #e2e2e2 !important;
  color: #1a1a1a !important;
}

html:not([data-bs-theme="dark"]) .ds-dtabs {
  background-color: #ffffff !important;
  border-color: #e2e2e2 !important;
}

html:not([data-bs-theme="dark"]) .ds-dtab {
  color: #aaaaaa !important;
  background-color: transparent !important;
  border-bottom: 2px solid transparent !important;
}

html:not([data-bs-theme="dark"]) .ds-dtab.ds-active {
  color: #e9937c !important;
  border-bottom-color: #e9937c !important;
  background-color: transparent !important;
}

html:not([data-bs-theme="dark"]) .ds-remaining {
  color: #1a1a1a !important;
  background-color: transparent !important;
}

html:not([data-bs-theme="dark"]) /* Safety notice — light */
 .ds-safety {
  background-color: #e8f0fb !important;
  border-color: #b2cfee !important;
}

html:not([data-bs-theme="dark"]) .ds-safety-text {
  color: #1a4fa0 !important;
  background-color: transparent !important;
}

html:not([data-bs-theme="dark"]) .ds-order-card {
  background-color: #ffffff !important;
  border-color: #e2e2e2 !important;
}

html:not([data-bs-theme="dark"]) .ds-order-head,
html:not([data-bs-theme="dark"]) .ds-order-body,
html:not([data-bs-theme="dark"]) .ds-order-footer {
  background-color: transparent !important;
}

html:not([data-bs-theme="dark"]) .ds-order-name {
  color: #1a1a1a !important;
  background-color: transparent !important;
}

html:not([data-bs-theme="dark"]) .ds-order-num {
  color: #888888 !important;
  background-color: transparent !important;
}

html:not([data-bs-theme="dark"]) .ds-order-row {
  color: #888888 !important;
  background-color: transparent !important;
}

html:not([data-bs-theme="dark"]) .ds-order-row span {
  color: #888888 !important;
  background-color: transparent !important;
}

html:not([data-bs-theme="dark"]) .ic-sm {
  stroke: #888888 !important;
}

html:not([data-bs-theme="dark"]) .ic-md {
  stroke: #888888;
}

html:not([data-bs-theme="dark"]) .ds-delivery-badge {
  background-color: #f0f0f0 !important;
  border-color: #d8d8d8 !important;
  color: #888888 !important;
}

html:not([data-bs-theme="dark"]) .ds-order-divider {
  background-color: #e2e2e2 !important;
}

html:not([data-bs-theme="dark"]) /* Arrived button — light */
 .ds-arrived-btn {
  background-color: transparent !important;
  border: 1.5px solid #d8d8d8 !important;
  color: #888888 !important;
}

html:not([data-bs-theme="dark"]) .ds-arrived-btn:hover {
  border-color: #e9937c !important;
  color: #e9937c !important;
  background-color: transparent !important;
}

html:not([data-bs-theme="dark"]) .ds-arrived-btn.ds-done {
  background-color: #e9937c !important;
  border-color: #e9937c !important;
  color: #ffffff !important;
}

html:not([data-bs-theme="dark"]) .ds-chev {
  color: #cccccc !important;
  background-color: transparent !important;
}

html:not([data-bs-theme="dark"]) .ds-empty,
html:not([data-bs-theme="dark"]) .ds-empty-orders {
  color: #888888 !important;
  background-color: transparent !important;
}

[data-bs-theme="dark"] /* ── Fix: delivery badge text "K" issue ──
   Your global span rule sets color on ALL spans.
   This restores the badge text color. ── */
 .ds-delivery-badge span,
[data-bs-theme="dark"] .ds-delivery-badge {
  /*color: #686868 !important;*/
  background-color: #252525 !important;
}

html:not([data-bs-theme="dark"]) .ds-delivery-badge span,
html:not([data-bs-theme="dark"]) .ds-delivery-badge {
  color: #888888 !important;
  background-color: #f0f0f0 !important;
}
/* Dark navbar dropdown separator */
[data-bs-theme="dark"] .navbar .dropdown-menu > li + li {
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* ============================================================
   FIX: Product/data table rows have class="active" which triggers
   Bootstrap/Tabler's --bs-table-active-bg (blue in dark mode).
   Root cause: Bootstrap 5 applies the active bg via box-shadow.
   Fix: Solid neutral grey bg + box-shadow: none on cells.

   APPLIED GENERICALLY to every .table in the app (not per table-id)
   so row striping is CONSISTENT everywhere. The .successNew green
   rows are excluded so completed rows keep their status colour.
   ============================================================ */

/* Dark mode — even rows: neutral dark grey */
[data-bs-theme="dark"] .table > tbody > tr.active:not(.successNew) > td,
[data-bs-theme="dark"] .table > tbody > tr.active:not(.successNew) > th {
    background-color: #2b2d30 !important;
    box-shadow: none !important;
}
/* Dark mode — odd rows: slightly lighter grey (subtle stripe) */
[data-bs-theme="dark"] .table > tbody > tr.active:not(.successNew):nth-of-type(odd) > td,
[data-bs-theme="dark"] .table > tbody > tr.active:not(.successNew):nth-of-type(odd) > th {
    background-color: #333538 !important;
    box-shadow: none !important;
}
/* Light mode — override blue active bg with neutral subtle stripe */
html:not([data-bs-theme="dark"]) .table > tbody > tr.active:not(.successNew) > td,
html:not([data-bs-theme="dark"]) .table > tbody > tr.active:not(.successNew) > th {
    background-color: #ffffff !important;
    box-shadow: none !important;
}
html:not([data-bs-theme="dark"]) .table > tbody > tr.active:not(.successNew):nth-of-type(odd) > td,
html:not([data-bs-theme="dark"]) .table > tbody > tr.active:not(.successNew):nth-of-type(odd) > th {
    background-color: rgba(0, 0, 0, 0.03) !important;
    box-shadow: none !important;
}
/* Hover state for active rows — these selectors carry one more class than the
   base active rules above, so they win and restore the row-hover highlight that
   the active-bg !important would otherwise suppress. */
[data-bs-theme="dark"] .table-hover > tbody > tr.active:not(.successNew):hover > td,
[data-bs-theme="dark"] .table-hover > tbody > tr.active:not(.successNew):hover > th {
    background-color: #3d4044 !important;
    box-shadow: none !important;
}
html:not([data-bs-theme="dark"]) .table-hover > tbody > tr.active:not(.successNew):hover > td,
html:not([data-bs-theme="dark"]) .table-hover > tbody > tr.active:not(.successNew):hover > th {
    background-color: rgba(0, 0, 0, 0.06) !important;
    box-shadow: none !important;
}