:root {
  color-scheme: light;
}

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

body {
  background: var(--fe-bg) !important;
  color: var(--fe-text) !important;
}

html {
  background: var(--fe-bg) !important;
}

/* Reduce “white flash” during tab/iframe swaps */
#section #pills-tabContent,
#section .tab-pane,
iframe,
.tab-content {
  background: var(--fe-bg) !important;
}

[data-theme="dark"] .tab-content.bg-light {
  background: var(--fe-bg) !important;
}

/* Booking fare label (e.g., "| MILEAGE FARE | DM"): keep readable in dark mode */
[data-theme="dark"] #fare-type,
html[data-theme="dark"] #fare-type {
  color: var(--fe-text) !important;
}

/* Portal tab content area: remove light border in dark mode */
[data-theme="dark"] #section #pills-tabContent,
html[data-theme="dark"] #section #pills-tabContent,
[data-theme="dark"] #pills-tabContent,
html[data-theme="dark"] #pills-tabContent {
  border-top-color: var(--fe-border) !important;
}

/* Account information modal: align with dark mode tokens */
[data-theme="dark"] #accountInformationModal .modal-content.fe-account-info-modal,
html[data-theme="dark"] #accountInformationModal .modal-content.fe-account-info-modal {
  background-color: var(--fe-surface) !important;
  color: var(--fe-text) !important;
  border: 1px solid var(--fe-border) !important;
}

[data-theme="dark"] #accountInformationModal .fe-account-info-modal__header,
[data-theme="dark"] #accountInformationModal .fe-account-info-modal__footer,
html[data-theme="dark"] #accountInformationModal .fe-account-info-modal__header,
html[data-theme="dark"] #accountInformationModal .fe-account-info-modal__footer {
  background-color: var(--fe-surface-2) !important;
  border-color: var(--fe-border) !important;
  color: var(--fe-text) !important;
}

[data-theme="dark"] #accountInformationModal .fe-account-info-modal__content,
html[data-theme="dark"] #accountInformationModal .fe-account-info-modal__content {
  background-color: var(--fe-surface-2) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] #accountInformationModal .btn-close,
html[data-theme="dark"] #accountInformationModal .btn-close {
  filter: invert(1) grayscale(100%);
  opacity: 0.85;
}

/* Tables: header uses theme surface token (light + dark via --fe-surface-2) */
.table thead th,
.table thead td {
  background-color: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
}

/* Tables: unify tbody padding everywhere */
.table tbody td,
.table tbody th {
  padding: 6px !important;
}

/* Booking updated highlight — specificity must beat the dark-mode generic
   table cell rule `.table > :not(caption) > * > *:not(…)` (0,3,1) so the
   tint survives after `.table-success` is removed by selectRow().
   Adding box-shadow:none prevents Bootstrap's inset-9999px paint trick. */
.fe-updated-row > td,
.fe-updated-row > th,
.table tr.fe-updated-row > td,
.table tr.fe-updated-row > th,
.fe-updated-row.table-success > td,
.fe-updated-row.table-success > th,
.table tr.fe-updated-row.table-success > td,
.table tr.fe-updated-row.table-success > th {
  background-color: #d1e7dd !important; /* Bootstrap "success-subtle" */
  color: #0f5132 !important;
  box-shadow: none !important;
}

.table-hover tbody tr.fe-updated-row:hover,
.table-hover tbody tr.fe-updated-row:hover > td,
.table-hover tbody tr.fe-updated-row:hover > th {
  background-color: #d1e7dd !important;
  box-shadow: none !important;
}

[data-theme="dark"] .table tr.fe-updated-row > td,
[data-theme="dark"] .table tr.fe-updated-row > th,
[data-theme="dark"] .table tr.fe-updated-row.table-success > td,
[data-theme="dark"] .table tr.fe-updated-row.table-success > th,
html[data-theme="dark"] .table tr.fe-updated-row > td,
html[data-theme="dark"] .table tr.fe-updated-row > th,
html[data-theme="dark"] .table tr.fe-updated-row.table-success > td,
html[data-theme="dark"] .table tr.fe-updated-row.table-success > th {
  background-color: rgba(22, 101, 52, 0.58) !important;
  color: #dcfce7 !important;
  box-shadow: none !important;
}

[data-theme="dark"] .table-hover tbody tr.fe-updated-row:hover,
[data-theme="dark"] .table-hover tbody tr.fe-updated-row:hover > td,
[data-theme="dark"] .table-hover tbody tr.fe-updated-row:hover > th,
html[data-theme="dark"] .table-hover tbody tr.fe-updated-row:hover,
html[data-theme="dark"] .table-hover tbody tr.fe-updated-row:hover > td,
html[data-theme="dark"] .table-hover tbody tr.fe-updated-row:hover > th {
  background-color: rgba(21, 128, 61, 0.68) !important;
  color: #ecfdf5 !important;
  box-shadow: none !important;
}

.premium-table tbody td,
.premium-table tbody th {
  padding: 6px !important;
}

/* Portal create/update booking: match dashboard button colors by ID (light + dark) */
#multi-booking-button,
#multi-vehicle-button,
#reverse,
#vias,
#return-via,
#name-search,
#mobile-search,
#telephone-search,
#payment-link,
#settings-button,
#child-seat-btn,
#notes-btn,
#paste,
#calculate,
#multiple-routes2,
#expand-map2 {
  background-color: rgb(223, 222, 222) !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
  color: #111827 !important;
}

#multi-booking-button:hover,
#multi-vehicle-button:hover,
#reverse:hover,
#vias:hover,
#return-via:hover,
#name-search:hover,
#mobile-search:hover,
#telephone-search:hover,
#payment-link:hover,
#settings-button:hover,
#child-seat-btn:hover,
#notes-btn:hover,
#paste:hover,
#calculate:hover,
#multiple-routes2:hover,
#expand-map2:hover {
  filter: brightness(0.98);
}

[data-theme="dark"] #multi-booking-button,
[data-theme="dark"] #multi-vehicle-button,
[data-theme="dark"] #reverse,
[data-theme="dark"] #vias,
[data-theme="dark"] #return-via,
[data-theme="dark"] #name-search,
[data-theme="dark"] #mobile-search,
[data-theme="dark"] #telephone-search,
[data-theme="dark"] #payment-link,
[data-theme="dark"] #settings-button,
[data-theme="dark"] #child-seat-btn,
[data-theme="dark"] #notes-btn,
[data-theme="dark"] #paste,
[data-theme="dark"] #calculate,
[data-theme="dark"] #multiple-routes2,
[data-theme="dark"] #expand-map2,
html[data-theme="dark"] #multi-booking-button,
html[data-theme="dark"] #multi-vehicle-button,
html[data-theme="dark"] #reverse,
html[data-theme="dark"] #vias,
html[data-theme="dark"] #return-via,
html[data-theme="dark"] #name-search,
html[data-theme="dark"] #mobile-search,
html[data-theme="dark"] #telephone-search,
html[data-theme="dark"] #payment-link,
html[data-theme="dark"] #settings-button,
html[data-theme="dark"] #child-seat-btn,
html[data-theme="dark"] #notes-btn,
html[data-theme="dark"] #paste,
html[data-theme="dark"] #calculate,
html[data-theme="dark"] #multiple-routes2,
html[data-theme="dark"] #expand-map2 {
  background-color: var(--fe-surface-2) !important;
  border-color: var(--fe-border) !important;
  color: var(--fe-text) !important;
}

[data-theme="dark"] #multi-booking-button:hover,
[data-theme="dark"] #multi-vehicle-button:hover,
[data-theme="dark"] #reverse:hover,
[data-theme="dark"] #vias:hover,
[data-theme="dark"] #return-via:hover,
[data-theme="dark"] #name-search:hover,
[data-theme="dark"] #mobile-search:hover,
[data-theme="dark"] #telephone-search:hover,
[data-theme="dark"] #payment-link:hover,
[data-theme="dark"] #settings-button:hover,
[data-theme="dark"] #child-seat-btn:hover,
[data-theme="dark"] #notes-btn:hover,
[data-theme="dark"] #paste:hover,
[data-theme="dark"] #calculate:hover,
[data-theme="dark"] #multiple-routes2:hover,
[data-theme="dark"] #expand-map2:hover,
html[data-theme="dark"] #multi-booking-button:hover,
html[data-theme="dark"] #multi-vehicle-button:hover,
html[data-theme="dark"] #reverse:hover,
html[data-theme="dark"] #vias:hover,
html[data-theme="dark"] #return-via:hover,
html[data-theme="dark"] #name-search:hover,
html[data-theme="dark"] #mobile-search:hover,
html[data-theme="dark"] #telephone-search:hover,
html[data-theme="dark"] #payment-link:hover,
html[data-theme="dark"] #settings-button:hover,
html[data-theme="dark"] #child-seat-btn:hover,
html[data-theme="dark"] #notes-btn:hover,
html[data-theme="dark"] #paste:hover,
html[data-theme="dark"] #calculate:hover,
html[data-theme="dark"] #multiple-routes2:hover,
html[data-theme="dark"] #expand-map2:hover {
  filter: brightness(1.05);
}

/* VIA route buttons: grey #vias/#return-via use !important above; red state must win (portal + dashboard). */
#vias.attach-btn2,
#return-via.attach-btn2 {
  background-color: rgb(238, 50, 50) !important;
  border-color: rgba(185, 28, 28, 0.45) !important;
  color: #fff !important;
}
#vias.attach-btn2:hover,
#return-via.attach-btn2:hover {
  background-color: rgb(220, 38, 38) !important;
  border-color: rgba(185, 28, 28, 0.55) !important;
  color: #fff !important;
  filter: none;
}
[data-theme="dark"] #vias.attach-btn2,
[data-theme="dark"] #return-via.attach-btn2,
html[data-theme="dark"] #vias.attach-btn2,
html[data-theme="dark"] #return-via.attach-btn2 {
  background-color: rgb(185, 28, 28) !important;
  border-color: rgba(248, 113, 113, 0.35) !important;
  color: #fff !important;
}
[data-theme="dark"] #vias.attach-btn2:hover,
[data-theme="dark"] #return-via.attach-btn2:hover,
html[data-theme="dark"] #vias.attach-btn2:hover,
html[data-theme="dark"] #return-via.attach-btn2:hover {
  background-color: rgb(220, 38, 38) !important;
  filter: none;
}

/* Settings gear: green when booking settings modal has active content (booking.js toggles .btn-success) */
#settings-button.btn-success {
  background-color: var(--fe-primary) !important;
  border-color: rgba(34, 197, 94, 0.45) !important;
  color: #fff !important;
}
#settings-button.btn-success:hover {
  background-color: #239423 !important;
  border-color: rgba(34, 197, 94, 0.55) !important;
  color: #fff !important;
  filter: none;
}
[data-theme="dark"] #settings-button.btn-success,
html[data-theme="dark"] #settings-button.btn-success {
  background-color: var(--fe-primary) !important;
  border-color: rgba(126, 231, 135, 0.35) !important;
  color: #fff !important;
}
[data-theme="dark"] #settings-button.btn-success:hover,
html[data-theme="dark"] #settings-button.btn-success:hover {
  background-color: #36c93a !important;
  filter: none;
  color: #fff !important;
}

/* Dashboard bookings list uses `.premium-table` (non-bootstrap).
   Give it the same bordered/interactive feel as other tables. */
.premium-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.96);
}

.premium-table thead th,
.premium-table thead td,
.premium-table thead.premium-thead th,
.premium-table thead.premium-thead td {
  background-color: var(--fe-surface-2) !important;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--fe-text) !important;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  padding: 6px !important;
  border-bottom: 2px solid var(--fe-border) !important;
  border-right: 1px solid var(--fe-border) !important;
  border-top: none !important;
  white-space: nowrap;
}

.premium-table th,
.premium-table td {
  border-right: 1px solid rgba(15, 23, 42, 0.12);
  border-bottom: 1px solid rgba(15, 23, 42, 0.12);
}

.premium-table tr > *:last-child {
  border-right: 0;
}

.premium-table tbody tr:last-child > * {
  border-bottom: 0;
}

.premium-table tbody tr {
  transition: background-color 0.12s ease, box-shadow 0.12s ease;
}

/* Row hover: tint only non-status, non–inline-colored cells (pickup/dropoff/account/payment/vehicle use .booking-colored-cell). */
.premium-table tbody tr:hover > *:not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-primary):not(.bg-secondary):not(.bg-dark):not(.table-danger):not(.table-warning):not(.table-success):not(.booking-colored-cell) {
  background-color: rgba(40, 182, 44, 0.06) !important;
}

.premium-table tbody tr:nth-of-type(odd) > *:not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-primary):not(.bg-secondary):not(.bg-dark):not(.table-danger):not(.table-warning):not(.table-success):not(.booking-colored-cell) {
  background-color: rgba(15, 23, 42, 0.02);
}

/* Whole-row hover cue without repainting fixed-color columns */
.premium-table tbody tr:hover {
  box-shadow: inset 3px 0 0 rgba(40, 182, 44, 0.4);
}

[data-theme="dark"] .premium-table {
  border-color: var(--fe-border);
  background: rgba(27, 31, 35, 0.55);
}

[data-theme="dark"] .premium-table th,
[data-theme="dark"] .premium-table td {
  border-color: var(--fe-border);
}

/* Do not force theme text color onto inline-colored booking cells (pickup/dropoff/etc.) */
[data-theme="dark"] .premium-table td:not(.booking-colored-cell) {
  color: var(--fe-text) !important;
}

[data-theme="dark"] .premium-table thead th,
[data-theme="dark"] .premium-table thead td,
html[data-theme="dark"] .premium-table thead th,
html[data-theme="dark"] .premium-table thead td,
[data-theme="dark"] .premium-table thead.premium-thead th,
[data-theme="dark"] .premium-table thead.premium-thead td,
html[data-theme="dark"] .premium-table thead.premium-thead th,
html[data-theme="dark"] .premium-table thead.premium-thead td {
  background-color: var(--fe-surface-2) !important;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--fe-text) !important;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  padding: 6px !important;
  border-bottom: 2px solid var(--fe-border) !important;
  border-right: 1px solid var(--fe-border) !important;
  border-top: none !important;
  white-space: nowrap;
}

[data-theme="dark"] .premium-table tbody tr > *:not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-primary):not(.bg-secondary):not(.bg-dark):not(.table-danger):not(.table-warning):not(.table-success):not(.booking-colored-cell) {
  background-color: rgba(34, 39, 46, 0.92) !important;
}

[data-theme="dark"] .premium-table tbody tr:nth-of-type(odd) > *:not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-primary):not(.bg-secondary):not(.bg-dark):not(.table-danger):not(.table-warning):not(.table-success):not(.booking-colored-cell) {
  background-color: rgba(34, 39, 46, 0.72) !important;
}

[data-theme="dark"] .premium-table tbody tr:hover > *:not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-primary):not(.bg-secondary):not(.bg-dark):not(.table-danger):not(.table-warning):not(.table-success):not(.booking-colored-cell) {
  background-color: rgba(110, 231, 183, 0.10) !important;
  color: var(--fe-text) !important;
}

[data-theme="dark"] .premium-table tbody tr:hover {
  box-shadow: inset 3px 0 0 rgba(110, 231, 183, 0.45);
}

[data-theme="dark"] .premium-table .table-danger > *,
[data-theme="dark"] .premium-table tr.table-danger > * {
  background-color: rgba(239, 68, 68, 0.22) !important;
  color: #fecaca !important;
}

/* Common surfaces */
[data-theme="dark"] .card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .list-group-item {
  background-color: var(--fe-surface) !important;
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
}

/* Modals (global, consistent dark mode) */
[data-theme="dark"] .modal-content {
  background: var(--fe-surface) !important;
  border: 1px solid var(--fe-border) !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55) !important;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
  background: var(--fe-surface-2) !important;
  border-color: var(--fe-border) !important;
  color: var(--fe-text) !important;
}

[data-theme="dark"] .modal-body {
  background: var(--fe-surface) !important;
  color: var(--fe-text) !important;
}

[data-theme="dark"] .modal-title {
  color: var(--fe-text) !important;
}

/* Bootstrap `.btn-close` uses a baked SVG (dark). Force visibility in dark mode. */
[data-theme="dark"] .btn-close,
html[data-theme="dark"] .btn-close,
[data-theme="dark"] .modal .btn-close,
html[data-theme="dark"] .modal .btn-close {
  /* Force a white SVG icon (some CSS sets fill=%23000) */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
  /* IMPORTANT: don't invert, it turns the white SVG back to black */
  filter: none !important;
  opacity: 1 !important;
  background-color: rgba(34, 39, 46, 0.55) !important;
  border-radius: 10px;
}

/* Cover Bootstrap’s specific close buttons too */
[data-theme="dark"] .modal-header .btn-close,
[data-theme="dark"] .toast-header .btn-close,
[data-theme="dark"] .offcanvas-header .btn-close,
html[data-theme="dark"] .modal-header .btn-close,
html[data-theme="dark"] .toast-header .btn-close,
html[data-theme="dark"] .offcanvas-header .btn-close {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
  filter: none !important;
}

[data-theme="dark"] .modal .btn-close:focus,
html[data-theme="dark"] .modal .btn-close:focus,
[data-theme="dark"] .btn-close:focus,
html[data-theme="dark"] .btn-close:focus {
  box-shadow: 0 0 0 0.2rem rgba(110, 231, 183, 0.18) !important;
}

[data-theme="dark"] .modal .btn-close:hover,
html[data-theme="dark"] .modal .btn-close:hover,
[data-theme="dark"] .btn-close:hover,
html[data-theme="dark"] .btn-close:hover {
  background-color: rgba(110, 231, 183, 0.10) !important;
}

/* Context menu (ensure icons/text readable) */
[data-theme="dark"] .context-menu-item,
[data-theme="dark"] .context-menu-item > span,
[data-theme="dark"] .context-menu-icon::before {
  color: rgba(229, 231, 235, 0.92) !important;
}

/* Dashboard attach-btn (dark mode) */
[data-theme="dark"] .attach-btn {
  background-color: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] .attach-btn:hover {
  background-color: rgba(110, 231, 183, 0.10) !important;
  color: var(--fe-text) !important;
}

[data-theme="dark"] .modal-backdrop.show {
  opacity: 0.72;
}

[data-theme="dark"] .modal a {
  color: var(--fe-link) !important;
}

/*
 * VoIP modals: template #voipModal and dynamic clones (#voipModal-1, …).
 * Global dark `.btn-light` stays a light chip — override minimize control + title chrome.
 */
[data-theme="dark"] .voip-modal .modal-header,
html[data-theme="dark"] .voip-modal .modal-header {
  background: var(--fe-surface-2) !important;
  border-bottom-color: var(--fe-border) !important;
  color: var(--fe-text) !important;
}

[data-theme="dark"] .voip-modal .voip-modal-title,
html[data-theme="dark"] .voip-modal .voip-modal-title {
  color: var(--fe-text) !important;
}

[data-theme="dark"] .voip-modal .modal-title .text-success,
html[data-theme="dark"] .voip-modal .modal-title .text-success {
  color: var(--fe-link-hover) !important;
}

[data-theme="dark"] .voip-modal .voip-modal-close-btn.btn-light,
html[data-theme="dark"] .voip-modal .voip-modal-close-btn.btn-light {
  --bs-btn-color: var(--fe-text);
  --bs-btn-bg: rgba(34, 39, 46, 0.92);
  --bs-btn-border-color: var(--fe-border);
  --bs-btn-hover-color: var(--fe-text);
  --bs-btn-hover-bg: rgba(110, 231, 183, 0.14);
  --bs-btn-hover-border-color: rgba(110, 231, 183, 0.4);
  --bs-btn-active-color: var(--fe-text);
  --bs-btn-active-bg: rgba(110, 231, 183, 0.2);
  --bs-btn-active-border-color: rgba(110, 231, 183, 0.5);
  color: var(--fe-text) !important;
  background-color: rgba(34, 39, 46, 0.92) !important;
  border: 1px solid var(--fe-border) !important;
}

[data-theme="dark"] .voip-modal .voip-modal-close-btn.btn-light:hover,
[data-theme="dark"] .voip-modal .voip-modal-close-btn.btn-light:focus-visible,
html[data-theme="dark"] .voip-modal .voip-modal-close-btn.btn-light:hover,
html[data-theme="dark"] .voip-modal .voip-modal-close-btn.btn-light:focus-visible {
  color: var(--fe-text) !important;
  background-color: rgba(110, 231, 183, 0.14) !important;
  border-color: rgba(110, 231, 183, 0.4) !important;
  box-shadow: 0 0 0 0.2rem rgba(110, 231, 183, 0.15) !important;
}

[data-theme="dark"] .voip-modal .modal-body,
html[data-theme="dark"] .voip-modal .modal-body {
  background: var(--fe-surface) !important;
}

[data-theme="dark"] .voip-modal .voip-modal-iframe,
html[data-theme="dark"] .voip-modal .voip-modal-iframe {
  background-color: var(--fe-surface-2);
}

/* VoIP draggable modal: ensure shell matches app dark surfaces (iframe content is /voip — themed in voip.ejs) */
[data-theme="dark"] .voip-modal .modal-content,
html[data-theme="dark"] .voip-modal .modal-content {
  background: var(--fe-surface) !important;
  color: var(--fe-text) !important;
  border: 1px solid var(--fe-border) !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55) !important;
}

[data-theme="dark"] .table {
  color: var(--fe-text) !important;
}

[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
  border-color: var(--fe-border) !important;
}

/* Tables (logical + visible in dark mode) */
[data-theme="dark"] .table {
  --fe-table-bg: rgba(27, 31, 35, 0.72); /* #1B1F23 @ ~72% */
  --fe-table-row: rgba(34, 39, 46, 0.92); /* #22272e */
  --fe-table-row-alt: rgba(34, 39, 46, 0.72);
  --fe-table-hover: rgba(110, 231, 183, 0.10);
  --fe-table-head: var(--fe-surface-2);
  --fe-table-head-text: var(--fe-text);

  /* App uses data-theme, not data-bs-theme — keep BS5 table paint vars on dark tokens     so .table-hover inset box-shadow does not flash a light “sheet” over rows. */
  --bs-table-color: var(--fe-text);
  --bs-table-bg: var(--fe-table-row);
  --bs-table-border-color: var(--fe-border);
  --bs-table-striped-color: var(--fe-text);
  --bs-table-striped-bg: var(--fe-table-row-alt);
  --bs-table-hover-color: var(--fe-text);
  --bs-table-hover-bg: rgba(110, 231, 183, 0.12);
  --bs-table-active-color: var(--fe-text);
  --bs-table-active-bg: rgba(110, 231, 183, 0.08);

  background-color: var(--fe-table-bg) !important;
  color: var(--fe-text) !important;
}

/* Bootstrap 5 sets cell backgrounds via --bs-table-bg; force dark surfaces */
[data-theme="dark"] .table > :not(caption) > * > *:not(.booking-colored-cell) {
  background-color: var(--fe-table-row) !important;
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
  /* Drop inset “9999px” paint so hover/stripes cannot stack a light layer (driver expiry modal, vehicle types, etc.) */
  box-shadow: none !important;
}

[data-theme="dark"] .table > :not(caption) > * > .booking-colored-cell {
  border-color: var(--fe-border) !important;
  box-shadow: none !important;
}

[data-theme="dark"] .table thead th,
[data-theme="dark"] .table thead td,
html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table thead td {
  background-color: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > *:not(.booking-colored-cell) {
  background-color: var(--fe-table-row-alt) !important;
}

[data-theme="dark"] .table-hover > tbody > tr:hover > *:not(.booking-colored-cell) {
  background-color: var(--fe-table-hover) !important;
  color: var(--fe-text) !important;
  --bs-table-color-state: var(--fe-text) !important;
  --bs-table-bg-state: var(--fe-table-hover) !important;
  box-shadow: none !important;
}

[data-theme="dark"] .table tbody tr:hover td:not(.booking-colored-cell) {
  /* Override legacy light hover text color */
  background-color: var(--fe-table-hover) !important;
  color: var(--fe-text) !important;
}

/* Light + dark: BS5 table-hover uses --bs-table-bg-state; keep inline pickup/dropoff/etc. visible */
.table-hover > tbody > tr:hover > td.booking-colored-cell,
.table-hover > tbody > tr:hover > th.booking-colored-cell,
[data-theme="dark"] .table-hover > tbody > tr:hover > td.booking-colored-cell,
[data-theme="dark"] .table-hover > tbody > tr:hover > th.booking-colored-cell,
html[data-theme="dark"] .table-hover > tbody > tr:hover > td.booking-colored-cell,
html[data-theme="dark"] .table-hover > tbody > tr:hover > th.booking-colored-cell {
  --bs-table-bg-state: transparent !important;
  --bs-table-color-state: inherit !important;
}

/* Preserve semantic “danger/warning/success” row/cell colors in dark mode (expire/blacklisted etc.) */
[data-theme="dark"] .table .table-danger > *,
[data-theme="dark"] .table .table-danger td,
[data-theme="dark"] .table .table-danger th,
[data-theme="dark"] .table tr.table-danger > * {
  background-color: rgba(239, 68, 68, 0.22) !important;
  color: #fecaca !important;
}

[data-theme="dark"] .table td.table-danger,
[data-theme="dark"] .table th.table-danger,
html[data-theme="dark"] .table td.table-danger,
html[data-theme="dark"] .table th.table-danger {
  background-color: rgba(239, 68, 68, 0.22) !important;
  color: #fecaca !important;
}

[data-theme="dark"] .table .table-warning > *,
[data-theme="dark"] .table tr.table-warning > * {
  background-color: rgba(245, 158, 11, 0.18) !important;
  color: #fde68a !important;
}

[data-theme="dark"] .table td.table-warning,
[data-theme="dark"] .table th.table-warning,
html[data-theme="dark"] .table td.table-warning,
html[data-theme="dark"] .table th.table-warning {
  background-color: rgba(245, 158, 11, 0.18) !important;
  color: #fde68a !important;
}

/* Hover on semantic rows/cells: slightly stronger tint, keep readable (not pure white on pale BS hover) */
[data-theme="dark"] .table-hover > tbody > tr:hover > td.table-danger,
[data-theme="dark"] .table-hover > tbody > tr:hover > th.table-danger,
[data-theme="dark"] .table-hover > tbody > tr.table-danger:hover > *,
html[data-theme="dark"] .table-hover > tbody > tr:hover > td.table-danger,
html[data-theme="dark"] .table-hover > tbody > tr:hover > th.table-danger,
html[data-theme="dark"] .table-hover > tbody > tr.table-danger:hover > * {
  background-color: rgba(239, 68, 68, 0.32) !important;
  color: #fecaca !important;
  --bs-table-color-state: #fecaca !important;
  --bs-table-bg-state: rgba(239, 68, 68, 0.32) !important;
}

[data-theme="dark"] .table-hover > tbody > tr:hover > td.table-warning,
[data-theme="dark"] .table-hover > tbody > tr:hover > th.table-warning,
[data-theme="dark"] .table-hover > tbody > tr.table-warning:hover > *,
html[data-theme="dark"] .table-hover > tbody > tr:hover > td.table-warning,
html[data-theme="dark"] .table-hover > tbody > tr:hover > th.table-warning,
html[data-theme="dark"] .table-hover > tbody > tr.table-warning:hover > * {
  background-color: rgba(245, 158, 11, 0.28) !important;
  color: #fde68a !important;
  --bs-table-color-state: #fde68a !important;
  --bs-table-bg-state: rgba(245, 158, 11, 0.28) !important;
}

/* Driver expiry modal (#driverExpiry): same hover/readability as portal tables */
[data-theme="dark"] #driverExpiry .table-hover > tbody > tr:hover > *,
html[data-theme="dark"] #driverExpiry .table-hover > tbody > tr:hover > * {
  background-color: var(--fe-table-hover) !important;
  color: var(--fe-text) !important;
  --bs-table-color-state: var(--fe-text) !important;
  --bs-table-bg-state: var(--fe-table-hover) !important;
  box-shadow: none !important;
}

/* Default vehicle type marker (vehicle types list) — theme tokens instead of bg-white */
.vehicle-type-default-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  background: var(--fe-surface);
  color: var(--fe-primary);
  border: 1px solid var(--fe-border);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

[data-theme="dark"] .vehicle-type-default-icon {
  background: var(--fe-surface-2);
  color: var(--fe-link-hover);
  border-color: var(--fe-border);
  box-shadow: none;
}

[data-theme="dark"] .table tr.table-warning .vehicle-type-default-icon {
  background: rgba(11, 18, 32, 0.88);
  border-color: rgba(245, 158, 11, 0.35);
}

[data-theme="dark"] .table .table-success > *,
[data-theme="dark"] .table tr.table-success > * {
  background-color: rgba(40, 182, 44, 0.18) !important;
  color: rgba(255, 255, 255, 0.96) !important;
}

[data-theme="dark"] .table td.table-success,
[data-theme="dark"] .table th.table-success,
html[data-theme="dark"] .table td.table-success,
html[data-theme="dark"] .table th.table-success {
  background-color: rgba(40, 182, 44, 0.18) !important;
  color: rgba(255, 255, 255, 0.96) !important;
}

[data-theme="dark"] .table td.bg-danger,
[data-theme="dark"] .table th.bg-danger,
[data-theme="dark"] .table .bg-danger {
  background-color: #ef4444 !important;
  color: #ffffff !important;
}

/* On route / sin-bin etc.: light text on tinted fill (was #111827 on solid amber after dispatch) */
[data-theme="dark"] .table td.bg-warning,
[data-theme="dark"] .table th.bg-warning,
[data-theme="dark"] .table .bg-warning,
html[data-theme="dark"] .table td.bg-warning,
html[data-theme="dark"] .table th.bg-warning,
html[data-theme="dark"] .table .bg-warning {
  background-color: rgba(245, 158, 11, 0.4) !important;
  color: rgba(255, 255, 255, 0.96) !important;
}

/*
 * Dashboard bookings list (premium-table tbody#content + mobile cards): use the same Lumen
 * light-theme status colors in dark mode (especially bg-warning / "on route").
 * Desktop status cells inherit body-like text on colored fills; mobile badges use text-white.
 */
[data-theme="dark"] tbody#content tr td.bg-success,
html[data-theme="dark"] tbody#content tr td.bg-success {
  background-color: #28b62c !important;
  color: #444 !important;
}

[data-theme="dark"] tbody#content tr td.bg-danger,
html[data-theme="dark"] tbody#content tr td.bg-danger {
  background-color: #fc3939 !important;
  color: #444 !important;
}

[data-theme="dark"] tbody#content tr td.bg-primary.text-white,
html[data-theme="dark"] tbody#content tr td.bg-primary.text-white {
  background-color: #593196 !important;
  color: #fff !important;
}

[data-theme="dark"] tbody#content tr td.bg-secondary,
html[data-theme="dark"] tbody#content tr td.bg-secondary {
  background-color: #a991d4 !important;
  color: #444 !important;
}

[data-theme="dark"] tbody#content tr td.bg-warning,
html[data-theme="dark"] tbody#content tr td.bg-warning {
  background-color: #efa31d !important;
  color: #444 !important;
}

[data-theme="dark"] tbody#content tr td.bg-dark.text-white,
html[data-theme="dark"] tbody#content tr td.bg-dark.text-white {
  background-color: #17141f !important;
  color: #fff !important;
}

[data-theme="dark"] tbody#content tr td.bg-info,
html[data-theme="dark"] tbody#content tr td.bg-info {
  background-color: #009cdc !important;
  color: #444 !important;
}

[data-theme="dark"] #mobile-bookings .card-header span.bg-success,
html[data-theme="dark"] #mobile-bookings .card-header span.bg-success {
  background-color: #28b62c !important;
  color: #fff !important;
}

[data-theme="dark"] #mobile-bookings .card-header span.bg-danger,
html[data-theme="dark"] #mobile-bookings .card-header span.bg-danger {
  background-color: #fc3939 !important;
  color: #fff !important;
}

[data-theme="dark"] #mobile-bookings .card-header span.bg-primary,
html[data-theme="dark"] #mobile-bookings .card-header span.bg-primary {
  background-color: #593196 !important;
  color: #fff !important;
}

[data-theme="dark"] #mobile-bookings .card-header span.bg-secondary,
html[data-theme="dark"] #mobile-bookings .card-header span.bg-secondary {
  background-color: #a991d4 !important;
  color: #fff !important;
}

[data-theme="dark"] #mobile-bookings .card-header span.bg-warning,
html[data-theme="dark"] #mobile-bookings .card-header span.bg-warning {
  background-color: #efa31d !important;
  color: #fff !important;
}

[data-theme="dark"] #mobile-bookings .card-header span.bg-dark,
html[data-theme="dark"] #mobile-bookings .card-header span.bg-dark {
  background-color: #17141f !important;
  color: #fff !important;
}

[data-theme="dark"] #mobile-bookings .card-header span.bg-info,
html[data-theme="dark"] #mobile-bookings .card-header span.bg-info {
  background-color: #009cdc !important;
  color: #fff !important;
}

[data-theme="dark"] .table td.bg-success,
[data-theme="dark"] .table th.bg-success,
[data-theme="dark"] .table .bg-success {
  background-color: #28b62c !important;
  color: #ffffff !important;
}

[data-theme="dark"] .table td.bg-info,
[data-theme="dark"] .table th.bg-info,
[data-theme="dark"] .table .bg-info {
  background-color: #0ea5e9 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .table td.bg-primary,
[data-theme="dark"] .table th.bg-primary,
[data-theme="dark"] .table .bg-primary {
  background-color: #2563eb !important;
  color: #ffffff !important;
}

[data-theme="dark"] .table .text-dark {
  color: var(--fe-text) !important;
}

[data-theme="dark"] .table .text-secondary {
  color: var(--fe-text-muted) !important;
}

[data-theme="dark"] .table .badge.bg-light,
[data-theme="dark"] .table .badge.text-dark {
  background-color: rgba(34, 39, 46, 0.85) !important;
  color: var(--fe-text) !important;
  border: 1px solid var(--fe-border) !important;
}

/* Form controls */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background-color: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
}

/* Make the native select arrow visible in dark mode */
[data-theme="dark"] .form-select,
html[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(255,255,255,0.92)'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 14px !important;
}

/* Dashboard quick-filter select uses a custom arrow via background-image */
[data-theme="dark"] .quick-filter-select,
html[data-theme="dark"] .quick-filter-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(255,255,255,0.92)'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: rgba(229, 231, 235, 0.65) !important;
}

[data-theme="dark"] .input-group-text {
  background-color: var(--fe-surface) !important;
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
}

/* Via modal: Bootstrap bg-light/bg-white fights dark form-control — fix contrast for address rows + autocomplete fields */
[data-theme="dark"] #viapointsModal .form-control.bg-light,
html[data-theme="dark"] #viapointsModal .form-control.bg-light,
[data-theme="dark"] #viapointsModal .form-control.bg-white,
html[data-theme="dark"] #viapointsModal .form-control.bg-white {
  background-color: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] #viapointsModal .input-group-text.bg-white,
html[data-theme="dark"] #viapointsModal .input-group-text.bg-white {
  background-color: var(--fe-surface) !important;
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
}

/* jQuery UI autocomplete: explicit light theme (dark rules below override when themed) */
.ui-autocomplete.ui-widget-content,
.ui-autocomplete {
  background: #fff !important;
  color: #111827 !important;
  border: 1px solid rgba(148, 163, 184, 0.45) !important;
}
.ui-autocomplete .ui-menu-item-wrapper {
  color: #111827 !important;
}
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
.ui-autocomplete .ui-menu-item-wrapper.ui-state-focus,
.ui-autocomplete .ui-menu-item-wrapper.ui-state-hover {
  background: rgba(40, 182, 44, 0.15) !important;
  color: #0f172a !important;
  border-color: transparent !important;
}

/* jQuery UI autocomplete (pickup, dropoff, vias, etc.) */
[data-theme="dark"] .ui-autocomplete.ui-widget-content,
html[data-theme="dark"] .ui-autocomplete.ui-widget-content,
[data-theme="dark"] .ui-autocomplete,
html[data-theme="dark"] .ui-autocomplete {
  background: rgba(27, 31, 35, 0.96) !important;
  border: 1px solid var(--fe-border) !important;
  color: var(--fe-text) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .ui-autocomplete .ui-menu-item,
html[data-theme="dark"] .ui-autocomplete .ui-menu-item {
  color: var(--fe-text) !important;
  background: transparent !important;
  border: none !important;
}

[data-theme="dark"] .ui-autocomplete .ui-menu-item-wrapper,
html[data-theme="dark"] .ui-autocomplete .ui-menu-item-wrapper {
  color: var(--fe-text) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}

[data-theme="dark"] .ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
[data-theme="dark"] .ui-autocomplete .ui-menu-item-wrapper.ui-state-focus,
[data-theme="dark"] .ui-autocomplete .ui-menu-item-wrapper.ui-state-hover,
html[data-theme="dark"] .ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
html[data-theme="dark"] .ui-autocomplete .ui-menu-item-wrapper.ui-state-focus,
html[data-theme="dark"] .ui-autocomplete .ui-menu-item-wrapper.ui-state-hover {
  background: rgba(110, 231, 183, 0.18) !important;
  color: var(--fe-text) !important;
  border-color: rgba(110, 231, 183, 0.28) !important;
}

[data-theme="dark"] .ui-autocomplete .ui-state-disabled .ui-menu-item-wrapper,
html[data-theme="dark"] .ui-autocomplete .ui-state-disabled .ui-menu-item-wrapper {
  color: var(--fe-text-muted) !important;
  background: transparent !important;
}

[data-theme="dark"] .ui-autocomplete .ui-autocomplete-category,
html[data-theme="dark"] .ui-autocomplete .ui-autocomplete-category {
  background: var(--fe-surface-2) !important;
  color: rgba(167, 243, 208, 0.88) !important;
  border-bottom: 1px solid var(--fe-border) !important;
}

[data-theme="dark"] .form-check-input,
html[data-theme="dark"] .form-check-input {
  background-color: var(--fe-surface-2) !important;
  /* High-contrast ring — previous fe-border-matched stroke disappeared on dark panels */
  border: 2px solid rgba(203, 213, 225, 0.92) !important;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.55) !important;
}

[data-theme="dark"] .form-check-input:checked,
html[data-theme="dark"] .form-check-input:checked {
  background-color: var(--fe-primary) !important;
  border-color: rgba(134, 239, 172, 0.95) !important;
  box-shadow: 0 0 0 1px rgba(21, 128, 61, 0.5) !important;
}

[data-theme="dark"] .form-check-input:focus,
html[data-theme="dark"] .form-check-input:focus {
  border-color: rgba(110, 231, 183, 0.95) !important;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.45),
    0 0 0 0.22rem rgba(110, 231, 183, 0.35) !important;
}

[data-theme="dark"] .form-check-input:indeterminate,
html[data-theme="dark"] .form-check-input:indeterminate {
  background-color: var(--fe-primary) !important;
  border-color: rgba(134, 239, 172, 0.95) !important;
  box-shadow: 0 0 0 1px rgba(21, 128, 61, 0.5) !important;
}

/* Switches: same visible edge as standard checkboxes when off */
[data-theme="dark"] .form-switch .form-check-input:not(:checked),
html[data-theme="dark"] .form-switch .form-check-input:not(:checked) {
  border: 2px solid rgba(203, 213, 225, 0.92) !important;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.5) !important;
}

/* Validation: pickup/dropoff and app-wide — dark theme form rules used !important on border-color */
[data-theme="dark"] .form-control.border-danger,
[data-theme="dark"] .form-select.border-danger,
[data-theme="dark"] textarea.border-danger,
html[data-theme="dark"] .form-control.border-danger,
html[data-theme="dark"] .form-select.border-danger {
  border-color: #f87171 !important;
  box-shadow: 0 0 0 0.12rem rgba(248, 113, 113, 0.35) !important;
}

[data-theme="dark"] .form-control.border-danger:focus,
[data-theme="dark"] .form-select.border-danger:focus,
html[data-theme="dark"] .form-control.border-danger:focus,
html[data-theme="dark"] .form-select.border-danger:focus {
  border-color: #fca5a5 !important;
  box-shadow: 0 0 0 0.15rem rgba(248, 113, 113, 0.4) !important;
}

[data-theme="dark"] .form-control.is-invalid,
[data-theme="dark"] .form-select.is-invalid,
html[data-theme="dark"] .form-control.is-invalid,
html[data-theme="dark"] .form-select.is-invalid {
  border-color: #f87171 !important;
  box-shadow: 0 0 0 0.12rem rgba(248, 113, 113, 0.35) !important;
}

[data-theme="dark"] .invalid-feedback,
[data-theme="dark"] .invalid-tooltip,
html[data-theme="dark"] .invalid-feedback {
  color: #fecaca !important;
}

[data-theme="dark"] .alert.border-danger,
html[data-theme="dark"] .alert.border-danger {
  border-color: #f87171 !important;
}

/* Toasts (toggleMessage): never neutral/white shells — only green, red, amber (matches main.js) */
[data-theme="dark"] .toast.toast-success,
html[data-theme="dark"] .toast.toast-success {
  background-color: #28b62c !important;
  border-color: #28b62c !important;
  color: #ffffff !important;
  --bs-toast-bg: #28b62c;
  --bs-toast-header-bg: #28b62c;
  --bs-toast-header-color: #ffffff;
}

[data-theme="dark"] .toast.toast-danger,
html[data-theme="dark"] .toast.toast-danger {
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
  color: #ffffff !important;
  --bs-toast-bg: #dc3545;
  --bs-toast-header-bg: #dc3545;
  --bs-toast-header-color: #ffffff;
}

[data-theme="dark"] .toast.toast-warning,
html[data-theme="dark"] .toast.toast-warning {
  background-color: #ffc107 !important;
  border-color: #ffc107 !important;
  color: #212529 !important;
  --bs-toast-bg: #ffc107;
  --bs-toast-header-bg: #ffc107;
  --bs-toast-header-color: #212529;
}

[data-theme="dark"] .toast.toast-success .toast-header,
[data-theme="dark"] .toast.toast-success .toast-body,
[data-theme="dark"] .toast.toast-danger .toast-header,
[data-theme="dark"] .toast.toast-danger .toast-body,
html[data-theme="dark"] .toast.toast-success .toast-header,
html[data-theme="dark"] .toast.toast-success .toast-body,
html[data-theme="dark"] .toast.toast-danger .toast-header,
html[data-theme="dark"] .toast.toast-danger .toast-body {
  background-color: transparent !important;
  color: inherit !important;
}

[data-theme="dark"] .toast.toast-warning .toast-header,
[data-theme="dark"] .toast.toast-warning .toast-body,
html[data-theme="dark"] .toast.toast-warning .toast-header,
html[data-theme="dark"] .toast.toast-warning .toast-body {
  background-color: transparent !important;
  color: inherit !important;
}

/*
 * Dark mode: restore Lumen (bootstrap-lumen.css) solid button colors — same as light theme.
 * Replaces earlier translucent “glass” styles so SAVE / CLEAR etc. match previous appearance.
 */
[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #158cba;
  --bs-btn-border-color: #158cba;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #12779e;
  --bs-btn-hover-border-color: #117095;
  --bs-btn-focus-shadow-rgb: 56, 157, 196;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #117095;
  --bs-btn-active-border-color: #10698c;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #158cba;
  --bs-btn-disabled-border-color: #158cba;
}

[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-secondary {
  --bs-btn-color: #000;
  --bs-btn-bg: #f0f0f0;
  --bs-btn-border-color: #f0f0f0;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #f2f2f2;
  --bs-btn-hover-border-color: #f2f2f2;
  --bs-btn-focus-shadow-rgb: 204, 204, 204;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #f3f3f3;
  --bs-btn-active-border-color: #f2f2f2;
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #f0f0f0;
  --bs-btn-disabled-border-color: #f0f0f0;
}

[data-theme="dark"] .btn-success,
html[data-theme="dark"] .btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: #28b62c;
  --bs-btn-border-color: #28b62c;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #28b62c;
  --bs-btn-hover-border-color: #28b62c;
  --bs-btn-focus-shadow-rgb: 40, 182, 44;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #28b62c;
  --bs-btn-active-border-color: #28b62c;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #28b62c;
  --bs-btn-disabled-border-color: #28b62c;
}

[data-theme="dark"] .btn-danger,
html[data-theme="dark"] .btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #ff4136;
  --bs-btn-border-color: #ff4136;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #d9372e;
  --bs-btn-hover-border-color: #cc342b;
  --bs-btn-focus-shadow-rgb: 255, 94, 84;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #cc342b;
  --bs-btn-active-border-color: #bf3129;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #ff4136;
  --bs-btn-disabled-border-color: #ff4136;
}

[data-theme="dark"] .btn-warning,
html[data-theme="dark"] .btn-warning {
  --bs-btn-color: #fff;
  --bs-btn-bg: #ff851b;
  --bs-btn-border-color: #ff851b;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #d97117;
  --bs-btn-hover-border-color: #cc6a16;
  --bs-btn-focus-shadow-rgb: 255, 151, 61;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #cc6a16;
  --bs-btn-active-border-color: #bf6414;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #ff851b;
  --bs-btn-disabled-border-color: #ff851b;
}

[data-theme="dark"] .btn-info,
html[data-theme="dark"] .btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: #75caeb;
  --bs-btn-border-color: #75caeb;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #63acc8;
  --bs-btn-hover-border-color: #5ea2bc;
  --bs-btn-focus-shadow-rgb: 138, 210, 238;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #5ea2bc;
  --bs-btn-active-border-color: #5898b0;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #75caeb;
  --bs-btn-disabled-border-color: #75caeb;
}

[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-light {
  --bs-btn-color: #000;
  --bs-btn-bg: #f6f6f6;
  --bs-btn-border-color: #f6f6f6;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #d1d1d1;
  --bs-btn-hover-border-color: #c5c5c5;
  --bs-btn-focus-shadow-rgb: 209, 209, 209;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #c5c5c5;
  --bs-btn-active-border-color: #b9b9b9;
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #f6f6f6;
  --bs-btn-disabled-border-color: #f6f6f6;
}

[data-theme="dark"] .btn-dark,
html[data-theme="dark"] .btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: #555;
  --bs-btn-border-color: #555;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #6f6f6f;
  --bs-btn-hover-border-color: #666666;
  --bs-btn-focus-shadow-rgb: 111, 111, 111;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #777777;
  --bs-btn-active-border-color: #666666;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #555;
  --bs-btn-disabled-border-color: #555;
}

[data-theme="dark"] .btn-outline-primary,
html[data-theme="dark"] .btn-outline-primary {
  --bs-btn-color: #158cba;
  --bs-btn-border-color: #158cba;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #158cba;
  --bs-btn-hover-border-color: #158cba;
  --bs-btn-focus-shadow-rgb: 21, 140, 186;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #158cba;
  --bs-btn-active-border-color: #158cba;
  --bs-btn-disabled-color: #158cba;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #158cba;
  --bs-gradient: none;
}

[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: #f0f0f0;
  --bs-btn-border-color: #f0f0f0;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #f0f0f0;
  --bs-btn-hover-border-color: #f0f0f0;
  --bs-btn-focus-shadow-rgb: 240, 240, 240;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #f0f0f0;
  --bs-btn-active-border-color: #f0f0f0;
  --bs-btn-disabled-color: #f0f0f0;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #f0f0f0;
  --bs-gradient: none;
}

[data-theme="dark"] .btn-outline-success,
html[data-theme="dark"] .btn-outline-success {
  --bs-btn-color: #28b62c;
  --bs-btn-border-color: #28b62c;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #28b62c;
  --bs-btn-hover-border-color: #28b62c;
  --bs-btn-focus-shadow-rgb: 40, 182, 44;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #28b62c;
  --bs-btn-active-border-color: #28b62c;
  --bs-btn-disabled-color: #28b62c;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #28b62c;
  --bs-gradient: none;
}

[data-theme="dark"] .btn-outline-info,
html[data-theme="dark"] .btn-outline-info {
  --bs-btn-color: #75caeb;
  --bs-btn-border-color: #75caeb;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #75caeb;
  --bs-btn-hover-border-color: #75caeb;
  --bs-btn-focus-shadow-rgb: 117, 202, 235;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #75caeb;
  --bs-btn-active-border-color: #75caeb;
  --bs-btn-disabled-color: #75caeb;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #75caeb;
  --bs-gradient: none;
}

[data-theme="dark"] .btn-outline-warning,
html[data-theme="dark"] .btn-outline-warning {
  --bs-btn-color: #ff851b;
  --bs-btn-border-color: #ff851b;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #ff851b;
  --bs-btn-hover-border-color: #ff851b;
  --bs-btn-focus-shadow-rgb: 255, 133, 27;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #ff851b;
  --bs-btn-active-border-color: #ff851b;
  --bs-btn-disabled-color: #ff851b;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #ff851b;
  --bs-gradient: none;
}

[data-theme="dark"] .btn-outline-danger,
html[data-theme="dark"] .btn-outline-danger {
  --bs-btn-color: #ff4136;
  --bs-btn-border-color: #ff4136;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #ff4136;
  --bs-btn-hover-border-color: #ff4136;
  --bs-btn-focus-shadow-rgb: 255, 65, 54;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #ff4136;
  --bs-btn-active-border-color: #ff4136;
  --bs-btn-disabled-color: #ff4136;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #ff4136;
  --bs-gradient: none;
}

[data-theme="dark"] .btn-outline-light,
html[data-theme="dark"] .btn-outline-light {
  --bs-btn-color: #f6f6f6;
  --bs-btn-border-color: #f6f6f6;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #f6f6f6;
  --bs-btn-hover-border-color: #f6f6f6;
  --bs-btn-focus-shadow-rgb: 246, 246, 246;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #f6f6f6;
  --bs-btn-active-border-color: #f6f6f6;
  --bs-btn-disabled-color: #f6f6f6;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #f6f6f6;
  --bs-gradient: none;
}

[data-theme="dark"] .btn-outline-dark,
html[data-theme="dark"] .btn-outline-dark {
  --bs-btn-color: #555;
  --bs-btn-border-color: #555;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #555;
  --bs-btn-hover-border-color: #555;
  --bs-btn-focus-shadow-rgb: 85, 85, 85;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #555;
  --bs-btn-active-border-color: #555;
  --bs-btn-disabled-color: #555;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #555;
  --bs-gradient: none;
}

[data-theme="dark"] .btn-link,
html[data-theme="dark"] .btn-link {
  --bs-btn-font-weight: 400;
  --bs-btn-color: var(--bs-link-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--bs-link-hover-color);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--bs-link-hover-color);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: #999;
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-box-shadow: 0 0 0 #000;
  --bs-btn-focus-shadow-rgb: 56, 157, 196;
}

/* Icon tint on gray secondary toolbar buttons (fare forms, etc.) */
[data-theme="dark"] .btn-secondary.text-success,
html[data-theme="dark"] .btn-secondary.text-success {
  color: #28b62c !important;
}
[data-theme="dark"] .btn-secondary.text-danger,
html[data-theme="dark"] .btn-secondary.text-danger {
  color: #ff4136 !important;
}
[data-theme="dark"] .btn-secondary:hover.text-success,
html[data-theme="dark"] .btn-secondary:hover.text-success {
  color: #239423 !important;
}
[data-theme="dark"] .btn-secondary:hover.text-danger,
html[data-theme="dark"] .btn-secondary:hover.text-danger {
  color: #d9372e !important;
}

[data-theme="dark"] .text-muted {
  color: var(--fe-text-muted) !important;
}

/* Reports (view pages): Bootstrap bg-light headers/footers should not stay light in dark mode */
[data-theme="dark"] .modal-header.bg-light,
[data-theme="dark"] .modal-footer.bg-light,
html[data-theme="dark"] .modal-header.bg-light,
html[data-theme="dark"] .modal-footer.bg-light,
[data-theme="dark"] thead.bg-light,
html[data-theme="dark"] thead.bg-light {
  background-color: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] .modal-header.bg-light .modal-title,
html[data-theme="dark"] .modal-header.bg-light .modal-title {
  color: var(--fe-text) !important;
}

[data-theme="dark"] .form-group > label,
html[data-theme="dark"] .form-group > label {
  color: var(--fe-text-muted) !important;
  font-weight: 600;
}

/* Customer portal: restricted-driver username chip */
.restricted-driver-username {
  background-color: var(--fe-primary) !important;
  color: #fff !important;
  font-weight: 600;
}

[data-theme="dark"] .restricted-driver-username,
html[data-theme="dark"] .restricted-driver-username {
  background-color: rgba(40, 182, 44, 0.26) !important;
  color: #bbf7d0 !important;
  border: 1px solid rgba(110, 231, 183, 0.38) !important;
  box-shadow: none !important;
}

/* Pagination (Bootstrap) */
[data-theme="dark"] .pagination .page-link,
html[data-theme="dark"] .pagination .page-link {
  background-color: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] .pagination .page-link:hover,
html[data-theme="dark"] .pagination .page-link:hover {
  background-color: rgba(110, 231, 183, 0.10) !important;
  color: var(--fe-text) !important;
  border-color: rgba(110, 231, 183, 0.35) !important;
}

[data-theme="dark"] .pagination .page-item.active .page-link,
html[data-theme="dark"] .pagination .page-item.active .page-link {
  background-color: rgba(110, 231, 183, 0.18) !important;
  color: var(--fe-text) !important;
  border-color: rgba(110, 231, 183, 0.45) !important;
  box-shadow: 0 0 0 0.2rem rgba(110, 231, 183, 0.10) !important;
}

[data-theme="dark"] .pagination .page-item.disabled .page-link,
html[data-theme="dark"] .pagination .page-item.disabled .page-link {
  background-color: rgba(34, 39, 46, 0.60) !important;
  color: var(--fe-text-muted) !important;
  border-color: var(--fe-border) !important;
}

/* Links/icons on dark backgrounds */
[data-theme="dark"] a,
[data-theme="dark"] .nav-link,
[data-theme="dark"] .dropdown-item {
  color: var(--fe-text) !important;
}

[data-theme="dark"] a:hover,
[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .dropdown-item:hover {
  color: var(--fe-link-hover) !important;
}

/* Card headers/footers (style.css forces light colors with !important) */
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
  color: var(--fe-text) !important;
  background-color: var(--fe-surface-2) !important;
  border-color: var(--fe-border) !important;
}

/* Fixed footer (footer.ejs uses hard-coded light colors) */
[data-theme="dark"] footer {
  background: var(--fe-nav-bg) !important;
  border-top-color: var(--fe-border) !important;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.35) !important;
  color: var(--fe-text) !important;
}

[data-theme="dark"] footer .footer-status-pill {
  background: var(--fe-surface) !important;
  border-color: var(--fe-border) !important;
  color: var(--fe-text) !important;
}

/* License / days remaining: keep app green in dark mode (footer-status-pill overrides .footer-expiry.safe) */
[data-theme="dark"] footer .footer-expiry.safe,
[data-theme="dark"] footer .footer-expiry.safe span,
[data-theme="dark"] footer .footer-expiry.safe b,
[data-theme="dark"] footer .footer-expiry.safe i {
  color: #28b62c !important;
}

[data-theme="dark"] footer .footer-expiry.warning,
[data-theme="dark"] footer .footer-expiry.warning span,
[data-theme="dark"] footer .footer-expiry.warning b {
  color: #ef4444 !important;
}

[data-theme="dark"] footer #user-status-container .footer-value {
  color: var(--fe-text) !important;
}

[data-theme="dark"] footer #footer-date-time {
  color: var(--fe-text-muted) !important;
}

[data-theme="dark"] footer #footer-date-time .time-val {
  color: var(--fe-text) !important;
}

[data-theme="dark"] footer #footer-date-time .divider {
  background: var(--fe-border) !important;
}

[data-theme="dark"] footer .footer-branding,
[data-theme="dark"] footer .footer-branding b {
  color: var(--fe-text-muted) !important;
}

/* Portal tabs (pills-tab) */
[data-theme="dark"] #section #pills-tab .nav-item {
  background: rgba(34, 39, 46, 0.55) !important;
  border: 1px solid var(--fe-border) !important;
}

[data-theme="dark"] #section #pills-tab .nav-link {
  color: var(--fe-text) !important;
}

[data-theme="dark"] #section #pills-tab .nav-item:hover {
  background: rgba(34, 39, 46, 0.8) !important;
}

[data-theme="dark"] #section #pills-tab .nav-link:hover,
[data-theme="dark"] .nav-pills .nav-link:hover {
  background: rgba(34, 39, 46, 0.82) !important;
  color: var(--fe-text) !important;
}

[data-theme="dark"] #section #pills-tab .nav-item .active,
[data-theme="dark"] .nav-pills .nav-link.active,
[data-theme="dark"] .nav-pills .show > .nav-link {
  /* Slightly different from inactive: deeper + subtle green ink */
  background: linear-gradient(180deg, rgba(34, 39, 46, 0.98) 0%, rgba(27, 31, 35, 0.98) 100%) !important;
  color: var(--fe-text) !important;
  border-color: rgba(110, 231, 183, 0.42) !important;
  box-shadow:
    0 0 0 1px rgba(110, 231, 183, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 26px rgba(0, 0, 0, 0.28) !important;
}

/* LIVE CALLS panel (call-history) */
[data-theme="dark"] #call-history {
  background: rgba(27, 31, 35, 0.92) !important;
  border-color: var(--fe-border) !important;
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.45) !important;
}

[data-theme="dark"] .call-history-header {
  background: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-bottom-color: rgba(110, 231, 183, 0.22) !important;
}

[data-theme="dark"] #call-history-container .list-group-item.call-item {
  background: transparent !important;
  border-bottom-color: var(--fe-border) !important;
}

[data-theme="dark"] .call-item:hover {
  background: rgba(110, 231, 183, 0.10) !important;
}

[data-theme="dark"] .call-item .caller-name {
  color: var(--fe-text) !important;
}

[data-theme="dark"] .call-item .caller-num {
  color: var(--fe-text-muted) !important;
}

[data-theme="dark"] .call-item .call-time {
  color: var(--fe-text) !important;
  background: rgba(110, 231, 183, 0.14) !important;
  border: 1px solid rgba(110, 231, 183, 0.20) !important;
}

/* Footer: make right side text readable (Messages + extension numbers) */
[data-theme="dark"] footer #footer-messages-btn span,
[data-theme="dark"] footer #employee-extension-container span {
  color: var(--fe-text) !important;
}

[data-theme="dark"] footer #employee-extension-container i {
  color: var(--fe-text-muted) !important;
}

/* Footer chat panel (messages) */
[data-theme="dark"] #footer-chat-panel {
  background: var(--fe-surface) !important;
  border-color: var(--fe-border) !important;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.55) !important;
}

[data-theme="dark"] .footer-chat-header {
  background: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-bottom-color: rgba(110, 231, 183, 0.18) !important;
}

[data-theme="dark"] #footer-chat-header-title,
[data-theme="dark"] #footer-chat-header-title i {
  color: var(--fe-text) !important;
}

[data-theme="dark"] .footer-chat-header .footer-chat-header-btn {
  color: var(--fe-text) !important;
  background: rgba(110, 231, 183, 0.10) !important;
  border-color: rgba(110, 231, 183, 0.18) !important;
}

[data-theme="dark"] .footer-chat-main {
  background: var(--fe-surface) !important;
}

[data-theme="dark"] .footer-chat-sidebar {
  background: var(--fe-surface-2) !important;
  border-right-color: var(--fe-border) !important;
}

[data-theme="dark"] .footer-chat-sidebar .list-group-item {
  background: transparent !important;
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] .footer-chat-sidebar .list-group-item:hover {
  background: rgba(110, 231, 183, 0.10) !important;
}

[data-theme="dark"] .footer-chat-sidebar .list-group-item.active {
  background: rgba(110, 231, 183, 0.14) !important;
  border-left-color: rgba(110, 231, 183, 0.55) !important;
}

[data-theme="dark"] .footer-chat-body {
  background: var(--fe-surface) !important;
  color: var(--fe-text) !important;
}

[data-theme="dark"] .footer-chat-placeholder {
  color: var(--fe-text-muted) !important;
}

[data-theme="dark"] .footer-chat-messages {
  background: transparent !important;
}

[data-theme="dark"] .footer-chat-input-wrap {
  background: var(--fe-surface-2) !important;
  border-top-color: var(--fe-border) !important;
}

[data-theme="dark"] .footer-chat-input-wrap input {
  background: rgba(27, 31, 35, 0.92) !important;
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] .footer-chat-input-wrap input::placeholder {
  color: rgba(156, 163, 175, 0.90) !important;
}

/* Shortcuts / Help modal (SYSTEM SHORTCUTS) */
[data-theme="dark"] .help-modal .modal-content {
  background: var(--fe-surface) !important;
  border: 1px solid var(--fe-border) !important;
}

[data-theme="dark"] .help-modal .modal-header {
  background-color: var(--fe-surface-2) !important;
  border-bottom-color: rgba(110, 231, 183, 0.18) !important;
}

[data-theme="dark"] .help-modal .modal-title {
  color: var(--fe-text) !important;
}

[data-theme="dark"] .help-modal .btn-close {
  filter: invert(1) grayscale(1);
}

[data-theme="dark"] .shortcuts-modal .modal-body {
  background: var(--fe-surface) !important;
}

[data-theme="dark"] .shortcuts-container {
  background: rgba(27, 31, 35, 0.92) !important;
  border-color: var(--fe-border) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45) !important;
}

[data-theme="dark"] .shortcuts-title {
  color: var(--fe-text) !important;
  border-bottom-color: var(--fe-border) !important;
}

[data-theme="dark"] .shortcut-item {
  border-bottom-color: var(--fe-border) !important;
}

[data-theme="dark"] .shortcut-item:hover {
  background: rgba(110, 231, 183, 0.10) !important;
}

[data-theme="dark"] .shortcut-label {
  color: var(--fe-text) !important;
}

[data-theme="dark"] .or-text,
[data-theme="dark"] .plus-sep {
  color: var(--fe-text-muted) !important;
}
/* Driver modal cards */
[data-theme="dark"] .driver-vehicle-modal .card,
[data-theme="dark"] .driver-earning-modal .card {
  background-color: var(--fe-surface) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] .driver-vehicle-modal .card-body,
[data-theme="dark"] .driver-earning-modal .card-body {
  color: var(--fe-text) !important;
}

[data-theme="dark"] .driver-vehicle-modal .card-header h5,
[data-theme="dark"] .driver-earning-modal .card-header h5,
[data-theme="dark"] .driver-vehicle-modal .card-header .text-muted,
[data-theme="dark"] .driver-earning-modal .card-header .text-muted {
  color: var(--fe-text) !important;
}

/* Dashboard booking tabs (buttons) */
[data-theme="dark"] #booking-tabs .bookings-button.btn-light {
  /* Inactive dashboard booking tabs: black */
  background: rgba(27, 31, 35, 0.92) !important;
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] #booking-tabs .bookings-button.btn-success {
  /* Active: green */
  background: var(--fe-primary) !important;
  color: #ffffff !important;
  border-color: rgba(40, 182, 44, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(40, 182, 44, 0.20), 0 12px 26px rgba(0, 0, 0, 0.28) !important;
}

/* Dashboard: shortcut bar (Base Address / Booking Form / Driver Vehicle / Driver Earning / Quotation / Quick Help) */
[data-theme="dark"] .shortcut {
  background: rgba(34, 39, 46, 0.82) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] .shortcut-item {
  background: transparent !important;
  border-bottom-color: var(--fe-border) !important;
}

[data-theme="dark"] .shortcut-item:not(:last-child) {
  border-right: 1px solid #2e3135;
}

[data-theme="dark"] .shortcut-item span {
  color: var(--fe-text) !important;
}

[data-theme="dark"] .shortcut-item:hover {
  background: rgba(110, 231, 183, 0.10) !important;
}

[data-theme="dark"] .shortcut-active {
  background: rgba(110, 231, 183, 0.14) !important;
  box-shadow: 0 0 0 1px rgba(110, 231, 183, 0.18), 0 10px 24px rgba(0, 0, 0, 0.25) !important;
}

/* Dashboard: booking form + booking list surfaces */
[data-theme="dark"] #card-booking {
  background: var(--fe-surface) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] #card-booking-header {
  background: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-bottom-color: var(--fe-border) !important;
}

/* Update booking (portal/updateBooking.ejs): header strip — pills, ref badge, actions */
[data-theme="dark"] #card-booking-header .header-title,
html[data-theme="dark"] #card-booking-header .header-title {
  color: var(--fe-text) !important;
}

[data-theme="dark"] #card-booking-header .info-item:not([class*="bg-status-"]),
html[data-theme="dark"] #card-booking-header .info-item:not([class*="bg-status-"]) {
  background: rgba(27, 31, 35, 0.72) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] #card-booking-header .info-item:not([class*="bg-status-"]):hover,
html[data-theme="dark"] #card-booking-header .info-item:not([class*="bg-status-"]):hover {
  background: rgba(34, 39, 46, 0.9) !important;
  border-color: rgba(110, 231, 183, 0.28) !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] #card-booking-header .info-label,
html[data-theme="dark"] #card-booking-header .info-label {
  color: rgba(167, 243, 208, 0.82) !important;
}

[data-theme="dark"] #card-booking-header .info-item:not([class*="bg-status-"]) .info-value,
html[data-theme="dark"] #card-booking-header .info-item:not([class*="bg-status-"]) .info-value {
  color: rgba(229, 231, 235, 0.96) !important;
}

[data-theme="dark"] #card-booking-header .badge-reference,
html[data-theme="dark"] #card-booking-header .badge-reference {
  background: rgba(40, 182, 44, 0.14) !important;
  color: rgba(167, 243, 208, 0.98) !important;
  border-color: rgba(110, 231, 183, 0.42) !important;
}

[data-theme="dark"] #card-booking-header .secondary-info-item,
html[data-theme="dark"] #card-booking-header .secondary-info-item {
  background: rgba(27, 31, 35, 0.65) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] #card-booking-header .action-btn-group .btn,
html[data-theme="dark"] #card-booking-header .action-btn-group .btn {
  background: rgba(27, 31, 35, 0.72) !important;
  border-color: var(--fe-border) !important;
  color: var(--fe-text) !important;
}

[data-theme="dark"] #card-booking-header .action-btn-group .btn:hover,
html[data-theme="dark"] #card-booking-header .action-btn-group .btn:hover {
  background: rgba(110, 231, 183, 0.12) !important;
  color: var(--fe-text) !important;
}

[data-theme="dark"] #card-booking-header .btn-complaint,
html[data-theme="dark"] #card-booking-header .btn-complaint {
  background: rgba(239, 68, 68, 0.14) !important;
  color: #fecaca !important;
  border-color: rgba(248, 113, 113, 0.4) !important;
}

[data-theme="dark"] #card-booking-header .btn-complaint:hover,
html[data-theme="dark"] #card-booking-header .btn-complaint:hover {
  background: #ef4444 !important;
  color: #fff !important;
  border-color: #ef4444 !important;
}

[data-theme="dark"] #card-booking-header .btn-lost,
html[data-theme="dark"] #card-booking-header .btn-lost {
  background: rgba(40, 182, 44, 0.12) !important;
  color: rgba(167, 243, 208, 0.95) !important;
  border-color: rgba(110, 231, 183, 0.35) !important;
}

[data-theme="dark"] #card-booking-header .btn-lost:hover,
html[data-theme="dark"] #card-booking-header .btn-lost:hover {
  background: #28b62c !important;
  color: #fff !important;
}

[data-theme="dark"] #card-booking-header .btn-associated,
html[data-theme="dark"] #card-booking-header .btn-associated {
  background: rgba(40, 182, 44, 0.12) !important;
  color: rgba(167, 243, 208, 0.95) !important;
  border-color: rgba(110, 231, 183, 0.38) !important;
}

[data-theme="dark"] #card-booking-header .btn-associated:hover,
html[data-theme="dark"] #card-booking-header .btn-associated:hover {
  background: #28b62c !important;
  color: #fff !important;
}

[data-theme="dark"] #card-booking-header .info-item.bg-status-waiting,
html[data-theme="dark"] #card-booking-header .info-item.bg-status-waiting {
  background: rgba(168, 85, 247, 0.18) !important;
  border-color: rgba(196, 181, 253, 0.35) !important;
}

[data-theme="dark"] #card-booking-header .info-item.bg-status-waiting .info-value,
html[data-theme="dark"] #card-booking-header .info-item.bg-status-waiting .info-value {
  color: rgba(233, 213, 255, 0.98) !important;
}

[data-theme="dark"] #card-booking-header .info-item.bg-status-waiting .info-label,
html[data-theme="dark"] #card-booking-header .info-item.bg-status-waiting .info-label {
  color: rgba(196, 181, 253, 0.88) !important;
}

[data-theme="dark"] #card-booking-header .info-item.bg-status-active,
[data-theme="dark"] #card-booking-header .info-item.bg-status-completed,
html[data-theme="dark"] #card-booking-header .info-item.bg-status-active,
html[data-theme="dark"] #card-booking-header .info-item.bg-status-completed {
  background: rgba(40, 182, 44, 0.16) !important;
  border-color: rgba(110, 231, 183, 0.28) !important;
}

[data-theme="dark"] #card-booking-header .info-item.bg-status-active .info-value,
[data-theme="dark"] #card-booking-header .info-item.bg-status-completed .info-value,
html[data-theme="dark"] #card-booking-header .info-item.bg-status-active .info-value,
html[data-theme="dark"] #card-booking-header .info-item.bg-status-completed .info-value {
  color: rgba(167, 243, 208, 0.98) !important;
}

[data-theme="dark"] #card-booking-header .info-item.bg-status-active .info-label,
[data-theme="dark"] #card-booking-header .info-item.bg-status-completed .info-label,
html[data-theme="dark"] #card-booking-header .info-item.bg-status-active .info-label,
html[data-theme="dark"] #card-booking-header .info-item.bg-status-completed .info-label {
  color: rgba(167, 243, 208, 0.78) !important;
}

[data-theme="dark"] #card-booking-header .info-item.bg-status-cancelled,
[data-theme="dark"] #card-booking-header .info-item.bg-status-danger,
html[data-theme="dark"] #card-booking-header .info-item.bg-status-cancelled,
html[data-theme="dark"] #card-booking-header .info-item.bg-status-danger {
  background: rgba(239, 68, 68, 0.18) !important;
  border-color: rgba(252, 165, 165, 0.35) !important;
}

[data-theme="dark"] #card-booking-header .info-item.bg-status-cancelled .info-value,
[data-theme="dark"] #card-booking-header .info-item.bg-status-danger .info-value,
html[data-theme="dark"] #card-booking-header .info-item.bg-status-cancelled .info-value,
html[data-theme="dark"] #card-booking-header .info-item.bg-status-danger .info-value {
  color: #fecaca !important;
}

[data-theme="dark"] #card-booking-header .info-item.bg-status-cancelled .info-label,
[data-theme="dark"] #card-booking-header .info-item.bg-status-danger .info-label,
html[data-theme="dark"] #card-booking-header .info-item.bg-status-cancelled .info-label,
html[data-theme="dark"] #card-booking-header .info-item.bg-status-danger .info-label {
  color: rgba(254, 202, 202, 0.88) !important;
}

[data-theme="dark"] #card-booking-header .info-item.bg-status-warning,
html[data-theme="dark"] #card-booking-header .info-item.bg-status-warning {
  background: rgba(245, 158, 11, 0.18) !important;
  border-color: rgba(252, 211, 77, 0.35) !important;
}

[data-theme="dark"] #card-booking-header .info-item.bg-status-warning .info-value,
html[data-theme="dark"] #card-booking-header .info-item.bg-status-warning .info-value {
  color: #fde68a !important;
}

[data-theme="dark"] #card-booking-header .info-item.bg-status-warning .info-label,
html[data-theme="dark"] #card-booking-header .info-item.bg-status-warning .info-label {
  color: rgba(253, 230, 138, 0.85) !important;
}

[data-theme="dark"] #card-booking-header .info-item.bg-status-info,
html[data-theme="dark"] #card-booking-header .info-item.bg-status-info {
  background: rgba(14, 165, 233, 0.16) !important;
  border-color: rgba(125, 211, 252, 0.35) !important;
}

[data-theme="dark"] #card-booking-header .info-item.bg-status-info .info-value,
html[data-theme="dark"] #card-booking-header .info-item.bg-status-info .info-value {
  color: #7dd3fc !important;
}

[data-theme="dark"] #card-booking-header .info-item.bg-status-info .info-label,
html[data-theme="dark"] #card-booking-header .info-item.bg-status-info .info-label {
  color: rgba(125, 211, 252, 0.85) !important;
}

[data-theme="dark"] #card-booking-header .info-item.bg-status-dark,
html[data-theme="dark"] #card-booking-header .info-item.bg-status-dark {
  background: rgba(148, 163, 184, 0.14) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
}

[data-theme="dark"] #card-booking-header .info-item.bg-status-dark .info-value,
html[data-theme="dark"] #card-booking-header .info-item.bg-status-dark .info-value {
  color: rgba(229, 231, 235, 0.96) !important;
}

[data-theme="dark"] #card-booking-header .info-item.bg-status-dark .info-label,
html[data-theme="dark"] #card-booking-header .info-item.bg-status-dark .info-label {
  color: rgba(203, 213, 225, 0.85) !important;
}

[data-theme="dark"] #card-booking-header .info-item.bg-status-secondary,
html[data-theme="dark"] #card-booking-header .info-item.bg-status-secondary {
  background: rgba(100, 116, 139, 0.22) !important;
  border-color: rgba(148, 163, 184, 0.26) !important;
}

[data-theme="dark"] #card-booking-header .info-item.bg-status-secondary .info-value,
html[data-theme="dark"] #card-booking-header .info-item.bg-status-secondary .info-value {
  color: rgba(226, 232, 240, 0.94) !important;
}

[data-theme="dark"] #card-booking-header .info-item.bg-status-secondary .info-label,
html[data-theme="dark"] #card-booking-header .info-item.bg-status-secondary .info-label {
  color: rgba(203, 213, 225, 0.85) !important;
}

[data-theme="dark"] #card-booking-body {
  background: var(--fe-surface) !important;
  color: var(--fe-text) !important;
}

[data-theme="dark"] #accordionExample .card,
[data-theme="dark"] #mobile-bookings .card {
  background: var(--fe-surface) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] #mobile-bookings .card .card-header,
[data-theme="dark"] #accordionExample .card .card-header {
  background: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-bottom-color: var(--fe-border) !important;
}

/* Dashboard: booking filter container (dark mode) */
[data-theme="dark"] .booking-filter-container {
  background: rgba(34, 39, 46, 0.82) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] .booking-filter-btn {
  background: rgba(27, 31, 35, 0.92) !important;
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] .booking-filter-btn:hover {
  background: rgba(110, 231, 183, 0.10) !important;
  color: var(--fe-text) !important;
}

[data-theme="dark"] .booking-filter-btn.btn-success {
  background: rgba(34, 39, 46, 0.98) !important;
  color: var(--fe-text) !important;
  border-color: rgba(110, 231, 183, 0.40) !important;
  box-shadow: 0 0 0 1px rgba(110, 231, 183, 0.12), 0 10px 24px rgba(0, 0, 0, 0.25) !important;
}

/* Dashboard (customers/dashboard.ejs) – override hard-coded light theme blocks */
[data-theme="dark"] .shortcut-active {
  background: rgba(110, 231, 183, 0.14) !important;
  color: var(--fe-primary) !important;
}

[data-theme="dark"] #toggle-dashboard {
  background: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] #toggle-dashboard:hover {
  background: rgba(110, 231, 183, 0.10) !important;
  color: var(--fe-text) !important;
  border-color: rgba(110, 231, 183, 0.35) !important;
}

/* Dashboard pills */
[data-theme="dark"] .nav-pills {
  background: rgba(34, 39, 46, 0.82) !important;
  border: 1px solid var(--fe-border) !important;
}

[data-theme="dark"] .nav-pills .nav-link {
  color: var(--fe-text) !important;
}

[data-theme="dark"] .nav-pills .nav-link:hover:not(.active) {
  background: rgba(110, 231, 183, 0.10) !important;
  color: var(--fe-text) !important;
}

/* Driver earnings report: Statistics / Driver Information (nav-link + outline needs .btn + scoped dark rules) */
[data-theme="dark"] .driver-earnings-pills,
html[data-theme="dark"] .driver-earnings-pills {
  background: rgba(34, 39, 46, 0.88) !important;
  border: 1px solid var(--fe-border) !important;
  padding: 6px !important;
  gap: 8px;
  flex-wrap: wrap;
}

[data-theme="dark"] .driver-earnings-pills .nav-link.btn-outline-success,
html[data-theme="dark"] .driver-earnings-pills .nav-link.btn-outline-success {
  color: var(--fe-link-hover) !important;
  background-color: transparent !important;
  border-color: rgba(110, 231, 183, 0.55) !important;
}

[data-theme="dark"] .driver-earnings-pills .nav-link.btn-outline-success:hover:not(.active),
html[data-theme="dark"] .driver-earnings-pills .nav-link.btn-outline-success:hover:not(.active) {
  color: var(--fe-text) !important;
  background-color: rgba(110, 231, 183, 0.14) !important;
  border-color: rgba(110, 231, 183, 0.7) !important;
}

[data-theme="dark"] .driver-earnings-pills .nav-link.btn-outline-success.active,
[data-theme="dark"] .driver-earnings-pills .show > .nav-link.btn-outline-success.active,
html[data-theme="dark"] .driver-earnings-pills .nav-link.btn-outline-success.active,
html[data-theme="dark"] .driver-earnings-pills .show > .nav-link.btn-outline-success.active {
  color: var(--fe-text) !important;
  background-color: rgba(110, 231, 183, 0.22) !important;
  border-color: rgba(110, 231, 183, 0.85) !important;
  box-shadow: 0 0 0 1px rgba(110, 231, 183, 0.2) !important;
}

/* Authorization settings: vertical section menu (authorization.ejs) */
[data-theme="light"] .authorization-side-nav,
html[data-theme="light"] .authorization-side-nav {
  background: var(--fe-surface) !important;
  border: 1px solid var(--fe-border) !important;
  border-radius: 12px !important;
  padding: 0.65rem 0.5rem !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 8px 24px rgba(15, 23, 42, 0.08) !important;
  gap: 0.35rem;
}

[data-theme="light"] .authorization-side-nav .nav-link.btn-outline-success,
html[data-theme="light"] .authorization-side-nav .nav-link.btn-outline-success {
  color: var(--fe-text) !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(40, 182, 44, 0.45) !important;
  font-weight: 700 !important;
  text-align: center !important;
  letter-spacing: 0.03em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .authorization-side-nav .nav-link.btn-outline-success:hover:not(.active),
html[data-theme="light"] .authorization-side-nav .nav-link.btn-outline-success:hover:not(.active) {
  color: #15803d !important;
  background-color: rgba(40, 182, 44, 0.08) !important;
  border-color: rgba(40, 182, 44, 0.75) !important;
}

[data-theme="light"] .authorization-side-nav .nav-link.btn-outline-success.active,
[data-theme="light"] .authorization-side-nav .nav-link.btn-outline-success.show,
html[data-theme="light"] .authorization-side-nav .nav-link.btn-outline-success.active,
html[data-theme="light"] .authorization-side-nav .nav-link.btn-outline-success.show {
  color: #ffffff !important;
  background-color: var(--fe-primary) !important;
  border-color: var(--fe-primary) !important;
  box-shadow: 0 2px 8px rgba(40, 182, 44, 0.22) !important;
}

/* Dark: same layout, higher contrast */
[data-theme="dark"] .authorization-side-nav,
html[data-theme="dark"] .authorization-side-nav {
  background: var(--fe-surface-2) !important;
  border: 1px solid var(--fe-border) !important;
  border-radius: 12px !important;
  padding: 0.65rem 0.5rem !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 12px 32px rgba(0, 0, 0, 0.45) !important;
  gap: 0.35rem;
}

[data-theme="dark"] .authorization-side-nav .nav-link.btn-outline-success,
html[data-theme="dark"] .authorization-side-nav .nav-link.btn-outline-success {
  color: var(--fe-text) !important;
  background-color: rgba(22, 27, 34, 0.75) !important;
  border: 1px solid var(--fe-border) !important;
  font-weight: 700 !important;
  text-align: center !important;
  letter-spacing: 0.03em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .authorization-side-nav .nav-link.btn-outline-success:hover:not(.active),
html[data-theme="dark"] .authorization-side-nav .nav-link.btn-outline-success:hover:not(.active) {
  color: var(--fe-text) !important;
  background-color: rgba(110, 231, 183, 0.14) !important;
  border-color: rgba(110, 231, 183, 0.55) !important;
}

[data-theme="dark"] .authorization-side-nav .nav-link.btn-outline-success.active,
[data-theme="dark"] .authorization-side-nav .nav-link.btn-outline-success.show,
html[data-theme="dark"] .authorization-side-nav .nav-link.btn-outline-success.active,
html[data-theme="dark"] .authorization-side-nav .nav-link.btn-outline-success.show {
  color: #ffffff !important;
  background-color: var(--fe-primary) !important;
  border-color: var(--fe-primary) !important;
  box-shadow: 0 2px 10px rgba(40, 182, 44, 0.28) !important;
}

/* Dashboard driver card (right panel) */
[data-theme="dark"] #card-driver {
  background: var(--fe-surface) !important;
  border-color: var(--fe-border) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] #card-driver-header {
  background: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-bottom-color: var(--fe-border) !important;
}

[data-theme="dark"] #card-driver-body {
  background: var(--fe-surface) !important;
}

/* #card-driver-body: remove light/white chrome (Borders + active pill outline) */
#card-driver-body {
  border: none !important;
  box-shadow: none !important;
}

#card-driver-body .nav-pills .nav-link,
#card-driver-body .nav-pills .nav-link.active {
  border-color: transparent !important;
}

#card-driver-body > .tab-content {
  border: none !important;
  border-top: none !important;
}

#card-driver-body .table {
  border-top: none !important;
}

#card-driver-body .table tbody tr:first-child td {
  border-top: none !important;
}

/* Dashboard: driver list hover shouldn't turn white */
[data-theme="dark"] #list-available-drivers tr:hover,
[data-theme="dark"] #list-unavailable-drivers tr:hover {
  background-color: rgba(110, 231, 183, 0.10) !important;
}

[data-theme="dark"] #list-available-drivers tr:hover td,
[data-theme="dark"] #list-unavailable-drivers tr:hover td {
  color: var(--fe-text) !important;
}

/* First column uses job-status background (bg-*); username must stay white vs .driver-username-status--* */
#list-available-drivers td:first-child .driver-username-status,
#list-unavailable-drivers td:first-child .driver-username-status,
#mobile-list-available-drivers td:first-child .driver-username-status,
#mobile-list-unavailable-drivers td:first-child .driver-username-status {
  color: #fff !important;
}

[data-theme="dark"] #list-available-drivers tr:hover td:first-child .driver-username-status,
[data-theme="dark"] #list-unavailable-drivers tr:hover td:first-child .driver-username-status,
[data-theme="dark"] #mobile-list-available-drivers tr:hover td:first-child .driver-username-status,
[data-theme="dark"] #mobile-list-unavailable-drivers tr:hover td:first-child .driver-username-status {
  color: #fff !important;
}

/*
 * Driver card username column: same solid hexes in light + dark (app green #28b62c; other = Pulse light palette).
 * Dark: global `tr:hover td` would wash out `.bg-*` without these.
 */
#list-available-drivers td:first-child.bg-success,
#list-available-drivers tr:hover td:first-child.bg-success,
#list-unavailable-drivers td:first-child.bg-success,
#list-unavailable-drivers tr:hover td:first-child.bg-success,
#mobile-list-available-drivers td:first-child.bg-success,
#mobile-list-available-drivers tr:hover td:first-child.bg-success,
#mobile-list-unavailable-drivers td:first-child.bg-success,
#mobile-list-unavailable-drivers tr:hover td:first-child.bg-success,
[data-theme="dark"] #list-available-drivers td:first-child.bg-success,
[data-theme="dark"] #list-available-drivers tr:hover td:first-child.bg-success,
[data-theme="dark"] #list-unavailable-drivers td:first-child.bg-success,
[data-theme="dark"] #list-unavailable-drivers tr:hover td:first-child.bg-success,
[data-theme="dark"] #mobile-list-available-drivers td:first-child.bg-success,
[data-theme="dark"] #mobile-list-available-drivers tr:hover td:first-child.bg-success,
[data-theme="dark"] #mobile-list-unavailable-drivers td:first-child.bg-success,
[data-theme="dark"] #mobile-list-unavailable-drivers tr:hover td:first-child.bg-success,
html[data-theme="dark"] #list-available-drivers td:first-child.bg-success,
html[data-theme="dark"] #list-available-drivers tr:hover td:first-child.bg-success,
html[data-theme="dark"] #list-unavailable-drivers td:first-child.bg-success,
html[data-theme="dark"] #list-unavailable-drivers tr:hover td:first-child.bg-success,
html[data-theme="dark"] #mobile-list-available-drivers td:first-child.bg-success,
html[data-theme="dark"] #mobile-list-available-drivers tr:hover td:first-child.bg-success,
html[data-theme="dark"] #mobile-list-unavailable-drivers td:first-child.bg-success,
html[data-theme="dark"] #mobile-list-unavailable-drivers tr:hover td:first-child.bg-success {
  background-color: #28b62c !important;
  color: #fff !important;
}

#list-available-drivers td:first-child.bg-danger,
#list-available-drivers tr:hover td:first-child.bg-danger,
#list-unavailable-drivers td:first-child.bg-danger,
#list-unavailable-drivers tr:hover td:first-child.bg-danger,
#mobile-list-available-drivers td:first-child.bg-danger,
#mobile-list-available-drivers tr:hover td:first-child.bg-danger,
#mobile-list-unavailable-drivers td:first-child.bg-danger,
#mobile-list-unavailable-drivers tr:hover td:first-child.bg-danger,
[data-theme="dark"] #list-available-drivers td:first-child.bg-danger,
[data-theme="dark"] #list-available-drivers tr:hover td:first-child.bg-danger,
[data-theme="dark"] #list-unavailable-drivers td:first-child.bg-danger,
[data-theme="dark"] #list-unavailable-drivers tr:hover td:first-child.bg-danger,
[data-theme="dark"] #mobile-list-available-drivers td:first-child.bg-danger,
[data-theme="dark"] #mobile-list-available-drivers tr:hover td:first-child.bg-danger,
[data-theme="dark"] #mobile-list-unavailable-drivers td:first-child.bg-danger,
[data-theme="dark"] #mobile-list-unavailable-drivers tr:hover td:first-child.bg-danger,
html[data-theme="dark"] #list-available-drivers td:first-child.bg-danger,
html[data-theme="dark"] #list-available-drivers tr:hover td:first-child.bg-danger,
html[data-theme="dark"] #list-unavailable-drivers td:first-child.bg-danger,
html[data-theme="dark"] #list-unavailable-drivers tr:hover td:first-child.bg-danger,
html[data-theme="dark"] #mobile-list-available-drivers td:first-child.bg-danger,
html[data-theme="dark"] #mobile-list-available-drivers tr:hover td:first-child.bg-danger,
html[data-theme="dark"] #mobile-list-unavailable-drivers td:first-child.bg-danger,
html[data-theme="dark"] #mobile-list-unavailable-drivers tr:hover td:first-child.bg-danger {
  background-color: #fc3939 !important;
  color: #fff !important;
}

#list-available-drivers td:first-child.bg-primary,
#list-available-drivers tr:hover td:first-child.bg-primary,
#list-unavailable-drivers td:first-child.bg-primary,
#list-unavailable-drivers tr:hover td:first-child.bg-primary,
#mobile-list-available-drivers td:first-child.bg-primary,
#mobile-list-available-drivers tr:hover td:first-child.bg-primary,
#mobile-list-unavailable-drivers td:first-child.bg-primary,
#mobile-list-unavailable-drivers tr:hover td:first-child.bg-primary,
[data-theme="dark"] #list-available-drivers td:first-child.bg-primary,
[data-theme="dark"] #list-available-drivers tr:hover td:first-child.bg-primary,
[data-theme="dark"] #list-unavailable-drivers td:first-child.bg-primary,
[data-theme="dark"] #list-unavailable-drivers tr:hover td:first-child.bg-primary,
[data-theme="dark"] #mobile-list-available-drivers td:first-child.bg-primary,
[data-theme="dark"] #mobile-list-available-drivers tr:hover td:first-child.bg-primary,
[data-theme="dark"] #mobile-list-unavailable-drivers td:first-child.bg-primary,
[data-theme="dark"] #mobile-list-unavailable-drivers tr:hover td:first-child.bg-primary,
html[data-theme="dark"] #list-available-drivers td:first-child.bg-primary,
html[data-theme="dark"] #list-available-drivers tr:hover td:first-child.bg-primary,
html[data-theme="dark"] #list-unavailable-drivers td:first-child.bg-primary,
html[data-theme="dark"] #list-unavailable-drivers tr:hover td:first-child.bg-primary,
html[data-theme="dark"] #mobile-list-available-drivers td:first-child.bg-primary,
html[data-theme="dark"] #mobile-list-available-drivers tr:hover td:first-child.bg-primary,
html[data-theme="dark"] #mobile-list-unavailable-drivers td:first-child.bg-primary,
html[data-theme="dark"] #mobile-list-unavailable-drivers tr:hover td:first-child.bg-primary {
  background-color: #593196 !important;
  color: #fff !important;
}

#list-available-drivers td:first-child.bg-secondary,
#list-available-drivers tr:hover td:first-child.bg-secondary,
#list-unavailable-drivers td:first-child.bg-secondary,
#list-unavailable-drivers tr:hover td:first-child.bg-secondary,
#mobile-list-available-drivers td:first-child.bg-secondary,
#mobile-list-available-drivers tr:hover td:first-child.bg-secondary,
#mobile-list-unavailable-drivers td:first-child.bg-secondary,
#mobile-list-unavailable-drivers tr:hover td:first-child.bg-secondary,
[data-theme="dark"] #list-available-drivers td:first-child.bg-secondary,
[data-theme="dark"] #list-available-drivers tr:hover td:first-child.bg-secondary,
[data-theme="dark"] #list-unavailable-drivers td:first-child.bg-secondary,
[data-theme="dark"] #list-unavailable-drivers tr:hover td:first-child.bg-secondary,
[data-theme="dark"] #mobile-list-available-drivers td:first-child.bg-secondary,
[data-theme="dark"] #mobile-list-available-drivers tr:hover td:first-child.bg-secondary,
[data-theme="dark"] #mobile-list-unavailable-drivers td:first-child.bg-secondary,
[data-theme="dark"] #mobile-list-unavailable-drivers tr:hover td:first-child.bg-secondary,
html[data-theme="dark"] #list-available-drivers td:first-child.bg-secondary,
html[data-theme="dark"] #list-available-drivers tr:hover td:first-child.bg-secondary,
html[data-theme="dark"] #list-unavailable-drivers td:first-child.bg-secondary,
html[data-theme="dark"] #list-unavailable-drivers tr:hover td:first-child.bg-secondary,
html[data-theme="dark"] #mobile-list-available-drivers td:first-child.bg-secondary,
html[data-theme="dark"] #mobile-list-available-drivers tr:hover td:first-child.bg-secondary,
html[data-theme="dark"] #mobile-list-unavailable-drivers td:first-child.bg-secondary,
html[data-theme="dark"] #mobile-list-unavailable-drivers tr:hover td:first-child.bg-secondary {
  background-color: #a991d4 !important;
  color: #fff !important;
}

#list-available-drivers td:first-child.bg-warning,
#list-available-drivers tr:hover td:first-child.bg-warning,
#list-unavailable-drivers td:first-child.bg-warning,
#list-unavailable-drivers tr:hover td:first-child.bg-warning,
#mobile-list-available-drivers td:first-child.bg-warning,
#mobile-list-available-drivers tr:hover td:first-child.bg-warning,
#mobile-list-unavailable-drivers td:first-child.bg-warning,
#mobile-list-unavailable-drivers tr:hover td:first-child.bg-warning,
[data-theme="dark"] #list-available-drivers td:first-child.bg-warning,
[data-theme="dark"] #list-available-drivers tr:hover td:first-child.bg-warning,
[data-theme="dark"] #list-unavailable-drivers td:first-child.bg-warning,
[data-theme="dark"] #list-unavailable-drivers tr:hover td:first-child.bg-warning,
[data-theme="dark"] #mobile-list-available-drivers td:first-child.bg-warning,
[data-theme="dark"] #mobile-list-available-drivers tr:hover td:first-child.bg-warning,
[data-theme="dark"] #mobile-list-unavailable-drivers td:first-child.bg-warning,
[data-theme="dark"] #mobile-list-unavailable-drivers tr:hover td:first-child.bg-warning,
html[data-theme="dark"] #list-available-drivers td:first-child.bg-warning,
html[data-theme="dark"] #list-available-drivers tr:hover td:first-child.bg-warning,
html[data-theme="dark"] #list-unavailable-drivers td:first-child.bg-warning,
html[data-theme="dark"] #list-unavailable-drivers tr:hover td:first-child.bg-warning,
html[data-theme="dark"] #mobile-list-available-drivers td:first-child.bg-warning,
html[data-theme="dark"] #mobile-list-available-drivers tr:hover td:first-child.bg-warning,
html[data-theme="dark"] #mobile-list-unavailable-drivers td:first-child.bg-warning,
html[data-theme="dark"] #mobile-list-unavailable-drivers tr:hover td:first-child.bg-warning {
  background-color: #efa31d !important;
  color: #fff !important;
}

#list-available-drivers td:first-child.bg-info,
#list-available-drivers tr:hover td:first-child.bg-info,
#list-unavailable-drivers td:first-child.bg-info,
#list-unavailable-drivers tr:hover td:first-child.bg-info,
#mobile-list-available-drivers td:first-child.bg-info,
#mobile-list-available-drivers tr:hover td:first-child.bg-info,
#mobile-list-unavailable-drivers td:first-child.bg-info,
#mobile-list-unavailable-drivers tr:hover td:first-child.bg-info,
[data-theme="dark"] #list-available-drivers td:first-child.bg-info,
[data-theme="dark"] #list-available-drivers tr:hover td:first-child.bg-info,
[data-theme="dark"] #list-unavailable-drivers td:first-child.bg-info,
[data-theme="dark"] #list-unavailable-drivers tr:hover td:first-child.bg-info,
[data-theme="dark"] #mobile-list-available-drivers td:first-child.bg-info,
[data-theme="dark"] #mobile-list-available-drivers tr:hover td:first-child.bg-info,
[data-theme="dark"] #mobile-list-unavailable-drivers td:first-child.bg-info,
[data-theme="dark"] #mobile-list-unavailable-drivers tr:hover td:first-child.bg-info,
html[data-theme="dark"] #list-available-drivers td:first-child.bg-info,
html[data-theme="dark"] #list-available-drivers tr:hover td:first-child.bg-info,
html[data-theme="dark"] #list-unavailable-drivers td:first-child.bg-info,
html[data-theme="dark"] #list-unavailable-drivers tr:hover td:first-child.bg-info,
html[data-theme="dark"] #mobile-list-available-drivers td:first-child.bg-info,
html[data-theme="dark"] #mobile-list-available-drivers tr:hover td:first-child.bg-info,
html[data-theme="dark"] #mobile-list-unavailable-drivers td:first-child.bg-info,
html[data-theme="dark"] #mobile-list-unavailable-drivers tr:hover td:first-child.bg-info {
  background-color: #009cdc !important;
  color: #fff !important;
}

#list-available-drivers td:first-child.bg-dark,
#list-available-drivers tr:hover td:first-child.bg-dark,
#list-unavailable-drivers td:first-child.bg-dark,
#list-unavailable-drivers tr:hover td:first-child.bg-dark,
#mobile-list-available-drivers td:first-child.bg-dark,
#mobile-list-available-drivers tr:hover td:first-child.bg-dark,
#mobile-list-unavailable-drivers td:first-child.bg-dark,
#mobile-list-unavailable-drivers tr:hover td:first-child.bg-dark,
[data-theme="dark"] #list-available-drivers td:first-child.bg-dark,
[data-theme="dark"] #list-available-drivers tr:hover td:first-child.bg-dark,
[data-theme="dark"] #list-unavailable-drivers td:first-child.bg-dark,
[data-theme="dark"] #list-unavailable-drivers tr:hover td:first-child.bg-dark,
[data-theme="dark"] #mobile-list-available-drivers td:first-child.bg-dark,
[data-theme="dark"] #mobile-list-available-drivers tr:hover td:first-child.bg-dark,
[data-theme="dark"] #mobile-list-unavailable-drivers td:first-child.bg-dark,
[data-theme="dark"] #mobile-list-unavailable-drivers tr:hover td:first-child.bg-dark,
html[data-theme="dark"] #list-available-drivers td:first-child.bg-dark,
html[data-theme="dark"] #list-available-drivers tr:hover td:first-child.bg-dark,
html[data-theme="dark"] #list-unavailable-drivers td:first-child.bg-dark,
html[data-theme="dark"] #list-unavailable-drivers tr:hover td:first-child.bg-dark,
html[data-theme="dark"] #mobile-list-available-drivers td:first-child.bg-dark,
html[data-theme="dark"] #mobile-list-available-drivers tr:hover td:first-child.bg-dark,
html[data-theme="dark"] #mobile-list-unavailable-drivers td:first-child.bg-dark,
html[data-theme="dark"] #mobile-list-unavailable-drivers tr:hover td:first-child.bg-dark {
  background-color: #17141f !important;
  color: #fff !important;
}

/* Dashboard: driver card pills (inactive tabs). Map card uses #pills-tab-map (dashboard.ejs). */
[data-theme="dark"] #card-driver-body #pills-tab .nav-item,
[data-theme="dark"] #card-map-zone #pills-tab .nav-item,
[data-theme="dark"] #card-map-zone #pills-tab-map .nav-item,
html[data-theme="dark"] #card-map-zone #pills-tab-map .nav-item {
  background: rgba(34, 39, 46, 0.70) !important;
  border: 1px solid var(--fe-border) !important;
}

[data-theme="dark"] #card-driver-body #pills-tab .nav-item .nav-link,
[data-theme="dark"] #card-map-zone #pills-tab .nav-item .nav-link,
[data-theme="dark"] #card-map-zone #pills-tab-map .nav-item .nav-link,
html[data-theme="dark"] #card-map-zone #pills-tab-map .nav-item .nav-link {
  color: var(--fe-text) !important;
}

[data-theme="dark"] #card-driver-body #pills-tab .nav-item .active,
[data-theme="dark"] #card-map-zone #pills-tab .nav-item .active,
[data-theme="dark"] #card-map-zone #pills-tab-map .nav-item .active,
html[data-theme="dark"] #card-map-zone #pills-tab-map .nav-item .active {
  background: rgba(27, 31, 35, 0.96) !important;
}

/* Tom-select (dashboard uses tom-select heavily) */
[data-theme="dark"] .ts-control {
  background-color: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] .ts-dropdown {
  background-color: rgba(27, 31, 35, 0.98) !important;
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] .ts-dropdown .option,
[data-theme="dark"] .ts-dropdown .create {
  color: var(--fe-text) !important;
}

[data-theme="dark"] .ts-dropdown .option.active,
[data-theme="dark"] .ts-dropdown .option:hover {
  background: rgba(110, 231, 183, 0.10) !important;
}

/* jQuery context menu (dashboard actions) */
[data-theme="dark"] .context-menu-list,
html[data-theme="dark"] .context-menu-list {
  background: rgba(27, 31, 35, 0.98) !important;
  border: 1px solid var(--fe-border) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55) !important;
  z-index: 9999 !important;
}

[data-theme="dark"] .context-menu-item,
html[data-theme="dark"] .context-menu-item {
  color: var(--fe-text) !important;
  background: rgba(27, 31, 35, 0.98) !important;
}

[data-theme="dark"] .context-menu-item:hover,
[data-theme="dark"] .context-menu-item.context-menu-hover,
html[data-theme="dark"] .context-menu-item:hover,
html[data-theme="dark"] .context-menu-item.context-menu-hover {
  background: rgba(110, 231, 183, 0.10) !important;
  color: var(--fe-text) !important;
}

[data-theme="dark"] .context-menu-separator,
html[data-theme="dark"] .context-menu-separator {
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] .context-menu-item.context-menu-disabled,
html[data-theme="dark"] .context-menu-item.context-menu-disabled {
  color: var(--fe-text-muted) !important;
  background: rgba(27, 31, 35, 0.98) !important;
}

[data-theme="dark"] .context-menu-submenu:after,
html[data-theme="dark"] .context-menu-submenu:after {
  border-color: transparent transparent transparent rgba(229, 231, 235, 0.72) !important;
}

/* Context menu icons (plugin supports different icon systems) */
[data-theme="dark"] .context-menu-icon::before,
[data-theme="dark"] .context-menu-icon.context-menu-icon--fa::before,
html[data-theme="dark"] .context-menu-icon::before,
html[data-theme="dark"] .context-menu-icon.context-menu-icon--fa::before {
  color: rgba(110, 231, 183, 0.95) !important;
}

[data-theme="dark"] .context-menu-item.context-menu-hover.context-menu-icon::before,
[data-theme="dark"] .context-menu-item.context-menu-hover.context-menu-icon.context-menu-icon--fa::before,
html[data-theme="dark"] .context-menu-item.context-menu-hover.context-menu-icon::before,
html[data-theme="dark"] .context-menu-item.context-menu-hover.context-menu-icon.context-menu-icon--fa::before {
  color: rgba(110, 231, 183, 0.98) !important;
}

[data-theme="dark"] .context-menu-icon.context-menu-icon--fa5 i,
[data-theme="dark"] .context-menu-icon.context-menu-icon--fa5 svg,
html[data-theme="dark"] .context-menu-icon.context-menu-icon--fa5 i,
html[data-theme="dark"] .context-menu-icon.context-menu-icon--fa5 svg {
  color: rgba(110, 231, 183, 0.95) !important;
}

[data-theme="dark"] .context-menu-icon.context-menu-icon--fa5.context-menu-hover > i,
[data-theme="dark"] .context-menu-icon.context-menu-icon--fa5.context-menu-hover > svg,
html[data-theme="dark"] .context-menu-icon.context-menu-icon--fa5.context-menu-hover > i,
html[data-theme="dark"] .context-menu-icon.context-menu-icon--fa5.context-menu-hover > svg {
  color: rgba(110, 231, 183, 0.98) !important;
}

/*
 * Context menu row highlight (style.css: tr.context-menu-active uses #f1f5f9).
 * In dark mode that makes the row light; DATETIME cells with .blink animate to
 * background-color: inherit (style.css keyframes), so they pick up the row and
 * read as a white/gray flash. Use a dark row highlight and explicit blink end color.
 */
[data-theme="dark"] tr.context-menu-active,
html[data-theme="dark"] tr.context-menu-active {
  background-color: rgba(34, 39, 46, 0.88) !important;
}

[data-theme="dark"] div.card-header.context-menu-active,
html[data-theme="dark"] div.card-header.context-menu-active {
  background-color: rgba(30, 41, 59, 0.92) !important;
}

@-webkit-keyframes premium-table-blink-dark {
  from {
    background-color: rgba(239, 68, 68, 0.5);
  }
  to {
    background-color: rgba(34, 39, 46, 0.92);
  }
}

@keyframes premium-table-blink-dark {
  from {
    background-color: rgba(239, 68, 68, 0.5);
  }
  to {
    background-color: rgba(34, 39, 46, 0.92);
  }
}

[data-theme="dark"] .premium-table .blink,
html[data-theme="dark"] .premium-table .blink {
  -webkit-animation-name: premium-table-blink-dark !important;
  animation-name: premium-table-blink-dark !important;
}

/* Navbar: make open/active tab visually distinct */
.navbar-nav .nav-link.nav-link-open,
.navbar-nav .nav-link.nav-link-open:hover {
  background: rgba(40, 182, 44, 0.10) !important;
  border-color: rgba(40, 182, 44, 0.28) !important;
  box-shadow: 0 0 0 1px rgba(40, 182, 44, 0.10) !important;
}

.navbar-nav .nav-link.nav-link-open i {
  color: #28b62c !important;
}

[data-theme="dark"] .navbar-nav .nav-link.nav-link-open,
[data-theme="dark"] .navbar-nav .nav-link.nav-link-open:hover {
  background: rgba(110, 231, 183, 0.12) !important;
  border-color: rgba(110, 231, 183, 0.28) !important;
  box-shadow:
    0 0 0 1px rgba(110, 231, 183, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

[data-theme="dark"] .navbar-nav .nav-link.nav-link-open i {
  color: rgba(110, 231, 183, 0.95) !important;
}

/*
 * Top navbar dropdown toggles (Bookings, Drivers, …): Bootstrap applies
 * `.navbar-nav .nav-link.show { color: var(--bs-navbar-active-color) }` when a menu is open.
 * Under `color-scheme: dark` / mixed CSS vars that active color can become #fff while our
 * open/hover chip uses `var(--fe-surface)` — wrong contrast. Pin labels + icons to FE tokens.
 */
#main-nav .navbar-nav > .nav-item > .nav-link:not(.theme-switch):not(.text-danger),
#mobile-nav .navbar-nav > .nav-item > .nav-link:not(.theme-switch):not(.text-danger) {
  color: var(--fe-link) !important;
}

#main-nav .navbar-nav > .nav-item > .nav-link:not(.theme-switch):not(.text-danger):hover,
#mobile-nav .navbar-nav > .nav-item > .nav-link:not(.theme-switch):not(.text-danger):hover {
  color: var(--fe-link-hover) !important;
}

#main-nav .navbar-nav > .nav-item > .nav-link:not(.theme-switch):not(.text-danger).show,
#main-nav .navbar-nav > .nav-item > .nav-link:not(.theme-switch):not(.text-danger).active,
#main-nav .navbar-nav > .nav-item > .nav-link:not(.theme-switch):not(.text-danger).nav-link-open,
#main-nav .navbar-nav > .nav-item > .nav-link:not(.theme-switch):not(.text-danger).nav-link-open:hover,
#mobile-nav .navbar-nav > .nav-item > .nav-link:not(.theme-switch):not(.text-danger).show,
#mobile-nav .navbar-nav > .nav-item > .nav-link:not(.theme-switch):not(.text-danger).active,
#mobile-nav .navbar-nav > .nav-item > .nav-link:not(.theme-switch):not(.text-danger).nav-link-open,
#mobile-nav .navbar-nav > .nav-item > .nav-link:not(.theme-switch):not(.text-danger).nav-link-open:hover {
  color: var(--fe-link-hover) !important;
}

/* Icons follow the link unless they use a utility (e.g. .text-success on active calls). */
#main-nav .navbar-nav > .nav-item > .nav-link:not(.theme-switch):not(.text-danger) > i:not([class*="text-"]),
#mobile-nav .navbar-nav > .nav-item > .nav-link:not(.theme-switch):not(.text-danger) > i:not([class*="text-"]) {
  color: inherit !important;
}

/*
 * Navbar dropdowns (Drivers → Driver → Add Driver, etc.): Bootstrap’s `.dropdown-item:focus`
 * and `--bs-dropdown-link-*` default to light greys — submenu rows and open tabs read as white
 * in dark mode. Re-tokenize menus + items under #main-nav / #mobile-nav only.
 */
[data-theme="dark"] #main-nav .dropdown-menu,
[data-theme="dark"] #mobile-nav .dropdown-menu,
html[data-theme="dark"] #main-nav .dropdown-menu,
html[data-theme="dark"] #mobile-nav .dropdown-menu {
  background-color: var(--fe-surface) !important;
  color: var(--fe-text) !important;
  border: 1px solid var(--fe-border) !important;
  --bs-dropdown-link-color: var(--fe-text);
  --bs-dropdown-link-hover-color: var(--fe-text);
  --bs-dropdown-link-hover-bg: rgba(110, 231, 183, 0.14);
  --bs-dropdown-link-active-color: var(--fe-text);
  --bs-dropdown-link-active-bg: rgba(110, 231, 183, 0.2);
}

[data-theme="dark"] #main-nav .dropdown-item,
[data-theme="dark"] #mobile-nav .dropdown-item,
html[data-theme="dark"] #main-nav .dropdown-item,
html[data-theme="dark"] #mobile-nav .dropdown-item {
  color: var(--fe-text) !important;
  background-color: transparent !important;
}

[data-theme="dark"] #main-nav .dropdown-item:hover,
[data-theme="dark"] #main-nav .dropdown-item:focus,
[data-theme="dark"] #main-nav .dropdown-item:focus-visible,
[data-theme="dark"] #main-nav .dropdown-item.active,
[data-theme="dark"] #main-nav .dropdown-item:active,
[data-theme="dark"] #mobile-nav .dropdown-item:hover,
[data-theme="dark"] #mobile-nav .dropdown-item:focus,
[data-theme="dark"] #mobile-nav .dropdown-item:focus-visible,
[data-theme="dark"] #mobile-nav .dropdown-item.active,
[data-theme="dark"] #mobile-nav .dropdown-item:active,
html[data-theme="dark"] #main-nav .dropdown-item:hover,
html[data-theme="dark"] #main-nav .dropdown-item:focus,
html[data-theme="dark"] #main-nav .dropdown-item:focus-visible,
html[data-theme="dark"] #main-nav .dropdown-item.active,
html[data-theme="dark"] #main-nav .dropdown-item:active,
html[data-theme="dark"] #mobile-nav .dropdown-item:hover,
html[data-theme="dark"] #mobile-nav .dropdown-item:focus,
html[data-theme="dark"] #mobile-nav .dropdown-item:focus-visible,
html[data-theme="dark"] #mobile-nav .dropdown-item.active,
html[data-theme="dark"] #mobile-nav .dropdown-item:active {
  background-color: rgba(110, 231, 183, 0.14) !important;
  color: var(--fe-text) !important;
}

[data-theme="dark"] #main-nav .dropdown-submenu.show > a.dropdown-item,
[data-theme="dark"] #mobile-nav .dropdown-submenu.show > a.dropdown-item,
html[data-theme="dark"] #main-nav .dropdown-submenu.show > a.dropdown-item,
html[data-theme="dark"] #mobile-nav .dropdown-submenu.show > a.dropdown-item {
  background-color: rgba(110, 231, 183, 0.12) !important;
  color: var(--fe-text) !important;
}

/* Navbar bell: notification panel body + rows (nav.ejs uses light-only text/icon colors) */
[data-theme="dark"] #dropdown-notification-container .notification-dropdown-header,
[data-theme="dark"] #dropdown-notification-container-mobile .notification-dropdown-header,
html[data-theme="dark"] #dropdown-notification-container .notification-dropdown-header,
html[data-theme="dark"] #dropdown-notification-container-mobile .notification-dropdown-header {
  background: linear-gradient(180deg, rgba(110, 231, 183, 0.08) 0%, transparent 100%) !important;
  border-bottom-color: var(--fe-border) !important;
}

[data-theme="dark"] #dropdown-notification-container .notification-dropdown-title,
[data-theme="dark"] #dropdown-notification-container-mobile .notification-dropdown-title,
html[data-theme="dark"] #dropdown-notification-container .notification-dropdown-title,
html[data-theme="dark"] #dropdown-notification-container-mobile .notification-dropdown-title {
  color: var(--fe-text) !important;
}

[data-theme="dark"] #dropdown-notification-container .notification-dropdown-mark-read,
[data-theme="dark"] #dropdown-notification-container-mobile .notification-dropdown-mark-read,
html[data-theme="dark"] #dropdown-notification-container .notification-dropdown-mark-read,
html[data-theme="dark"] #dropdown-notification-container-mobile .notification-dropdown-mark-read {
  color: var(--fe-link-hover) !important;
}

[data-theme="dark"] #dropdown-notification-container .notification-dropdown-mark-read:hover,
[data-theme="dark"] #dropdown-notification-container-mobile .notification-dropdown-mark-read:hover,
html[data-theme="dark"] #dropdown-notification-container .notification-dropdown-mark-read:hover,
html[data-theme="dark"] #dropdown-notification-container-mobile .notification-dropdown-mark-read:hover {
  background: rgba(110, 231, 183, 0.14) !important;
  color: var(--fe-link-hover) !important;
}

[data-theme="dark"] #dropdown-notification-container .notification-dropdown-list,
[data-theme="dark"] #dropdown-notification-container-mobile .notification-dropdown-list,
html[data-theme="dark"] #dropdown-notification-container .notification-dropdown-list,
html[data-theme="dark"] #dropdown-notification-container-mobile .notification-dropdown-list {
  background-color: transparent !important;
}

[data-theme="dark"] #dropdown-notification-container .notification-dropdown-list::-webkit-scrollbar-thumb,
[data-theme="dark"] #dropdown-notification-container-mobile .notification-dropdown-list::-webkit-scrollbar-thumb,
html[data-theme="dark"] #dropdown-notification-container .notification-dropdown-list::-webkit-scrollbar-thumb,
html[data-theme="dark"] #dropdown-notification-container-mobile .notification-dropdown-list::-webkit-scrollbar-thumb {
  background: rgba(110, 231, 183, 0.35) !important;
}

[data-theme="dark"] #dropdown-notification-container .notification-item:hover,
[data-theme="dark"] #dropdown-notification-container-mobile .notification-item:hover,
html[data-theme="dark"] #dropdown-notification-container .notification-item:hover,
html[data-theme="dark"] #dropdown-notification-container-mobile .notification-item:hover {
  background: rgba(110, 231, 183, 0.12) !important;
}

[data-theme="dark"] #dropdown-notification-container .notification-item-unread,
[data-theme="dark"] #dropdown-notification-container-mobile .notification-item-unread,
html[data-theme="dark"] #dropdown-notification-container .notification-item-unread,
html[data-theme="dark"] #dropdown-notification-container-mobile .notification-item-unread {
  background: rgba(110, 231, 183, 0.08) !important;
}

[data-theme="dark"] #dropdown-notification-container .notification-item-unread::before,
[data-theme="dark"] #dropdown-notification-container-mobile .notification-item-unread::before,
html[data-theme="dark"] #dropdown-notification-container .notification-item-unread::before,
html[data-theme="dark"] #dropdown-notification-container-mobile .notification-item-unread::before {
  background: var(--fe-link-hover) !important;
}

[data-theme="dark"] #dropdown-notification-container .notification-item-icon,
[data-theme="dark"] #dropdown-notification-container-mobile .notification-item-icon,
html[data-theme="dark"] #dropdown-notification-container .notification-item-icon,
html[data-theme="dark"] #dropdown-notification-container-mobile .notification-item-icon {
  background: rgba(110, 231, 183, 0.16) !important;
  color: var(--fe-link-hover) !important;
}

[data-theme="dark"] #dropdown-notification-container .notification-item-title,
[data-theme="dark"] #dropdown-notification-container-mobile .notification-item-title,
html[data-theme="dark"] #dropdown-notification-container .notification-item-title,
html[data-theme="dark"] #dropdown-notification-container-mobile .notification-item-title {
  color: var(--fe-text) !important;
}

[data-theme="dark"] #dropdown-notification-container .notification-item-unread .notification-item-title,
[data-theme="dark"] #dropdown-notification-container-mobile .notification-item-unread .notification-item-title,
html[data-theme="dark"] #dropdown-notification-container .notification-item-unread .notification-item-title,
html[data-theme="dark"] #dropdown-notification-container-mobile .notification-item-unread .notification-item-title {
  color: var(--fe-link-hover) !important;
}

[data-theme="dark"] #dropdown-notification-container .notification-dropdown-empty-text,
[data-theme="dark"] #dropdown-notification-container-mobile .notification-dropdown-empty-text,
html[data-theme="dark"] #dropdown-notification-container .notification-dropdown-empty-text,
html[data-theme="dark"] #dropdown-notification-container-mobile .notification-dropdown-empty-text {
  color: var(--fe-text-muted) !important;
}

[data-theme="dark"] #dropdown-notification-container .notification-dropdown-empty-icon,
[data-theme="dark"] #dropdown-notification-container-mobile .notification-dropdown-empty-icon,
html[data-theme="dark"] #dropdown-notification-container .notification-dropdown-empty-icon,
html[data-theme="dark"] #dropdown-notification-container-mobile .notification-dropdown-empty-icon {
  color: rgba(110, 231, 183, 0.5) !important;
}

[data-theme="dark"] #main-nav .navbar-nav > .nav-item > .nav-link.show,
[data-theme="dark"] #main-nav .navbar-nav > .nav-item > .nav-link:focus-visible,
[data-theme="dark"] #mobile-nav .navbar-nav > .nav-item > .nav-link.show,
[data-theme="dark"] #mobile-nav .navbar-nav > .nav-item > .nav-link:focus-visible,
html[data-theme="dark"] #main-nav .navbar-nav > .nav-item > .nav-link.show,
html[data-theme="dark"] #main-nav .navbar-nav > .nav-item > .nav-link:focus-visible,
html[data-theme="dark"] #mobile-nav .navbar-nav > .nav-item > .nav-link.show,
html[data-theme="dark"] #mobile-nav .navbar-nav > .nav-item > .nav-link:focus-visible {
  background-color: rgba(110, 231, 183, 0.12) !important;
  color: var(--fe-link-hover) !important;
}

/* Generic active tabs/links: make `.nav-link.active` clearly visible */
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
  font-weight: 800 !important;
}

.nav-tabs .nav-link.active {
  background: rgba(40, 182, 44, 0.08) !important;
  border-color: rgba(40, 182, 44, 0.20) !important;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
  background: rgba(110, 231, 183, 0.12) !important;
  color: var(--fe-text) !important;
  border-color: rgba(110, 231, 183, 0.28) !important;
  box-shadow: inset 0 -2px 0 rgba(110, 231, 183, 0.55) !important;
}

/* Driver cards (generic .driver-card blocks, e.g. wallboard) */
[data-theme="dark"] .driver-card {
  background: var(--fe-surface) !important;
  color: var(--fe-text) !important;
  border: 1px solid var(--fe-border) !important;
}

[data-theme="dark"] .driver-card .driver-value {
  color: var(--fe-text) !important;
}

[data-theme="dark"] .driver-card .driver-label {
  color: var(--fe-text-muted) !important;
}

[data-theme="dark"] .driver-card .driver-divider {
  background: var(--fe-border) !important;
  opacity: 0.7;
}

/* Booking modals: settings, child seat, notes, payment link — override Bootstrap bg-light/bg-white */
/* Driver partial (driverModals.ejs): shifts + attributes use the same surfaces */
[data-theme="dark"] #bookingsettingsModal .bg-light,
[data-theme="dark"] #childSeatModal .bg-light,
[data-theme="dark"] #notesModal .bg-light,
[data-theme="dark"] #shiftsModal .bg-light,
[data-theme="dark"] #attributesModal .bg-light,
[data-theme="dark"] #paymentLinkModal .bg-light,
html[data-theme="dark"] #bookingsettingsModal .bg-light,
html[data-theme="dark"] #childSeatModal .bg-light,
html[data-theme="dark"] #notesModal .bg-light,
html[data-theme="dark"] #shiftsModal .bg-light,
html[data-theme="dark"] #attributesModal .bg-light,
html[data-theme="dark"] #paymentLinkModal .bg-light {
  background-color: var(--fe-surface-2) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] #bookingsettingsModal .bg-white,
[data-theme="dark"] #childSeatModal .bg-white,
[data-theme="dark"] #notesModal .bg-white,
[data-theme="dark"] #shiftsModal .bg-white,
[data-theme="dark"] #attributesModal .bg-white,
[data-theme="dark"] #paymentLinkModal .bg-white,
html[data-theme="dark"] #bookingsettingsModal .bg-white,
html[data-theme="dark"] #childSeatModal .bg-white,
html[data-theme="dark"] #notesModal .bg-white,
html[data-theme="dark"] #shiftsModal .bg-white,
html[data-theme="dark"] #attributesModal .bg-white,
html[data-theme="dark"] #paymentLinkModal .bg-white {
  background-color: rgba(27, 31, 35, 0.88) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] #bookingsettingsModal .modal-body > .d-flex > .flex-grow-1.p-3,
html[data-theme="dark"] #bookingsettingsModal .modal-body > .d-flex > .flex-grow-1.p-3 {
  background-color: var(--fe-surface) !important;
}

[data-theme="dark"] #bookingsettingsModal .modal-title.text-dark,
[data-theme="dark"] #bookingsettingsModal .fw-bold.text-dark,
[data-theme="dark"] #notesModal .modal-title.text-dark,
[data-theme="dark"] #shiftsModal .modal-title.text-dark,
[data-theme="dark"] #attributesModal .modal-title.text-dark,
html[data-theme="dark"] #bookingsettingsModal .modal-title.text-dark,
html[data-theme="dark"] #bookingsettingsModal .fw-bold.text-dark,
html[data-theme="dark"] #notesModal .modal-title.text-dark,
html[data-theme="dark"] #shiftsModal .modal-title.text-dark,
html[data-theme="dark"] #attributesModal .modal-title.text-dark {
  color: var(--fe-text) !important;
}

[data-theme="dark"] #bookingsettingsModal .text-secondary,
[data-theme="dark"] #childSeatModal .text-secondary,
[data-theme="dark"] #notesModal .text-secondary,
[data-theme="dark"] #shiftsModal .text-secondary,
[data-theme="dark"] #attributesModal .text-secondary,
html[data-theme="dark"] #bookingsettingsModal .text-secondary,
html[data-theme="dark"] #childSeatModal .text-secondary,
html[data-theme="dark"] #notesModal .text-secondary,
html[data-theme="dark"] #shiftsModal .text-secondary,
html[data-theme="dark"] #attributesModal .text-secondary {
  color: var(--fe-text-muted) !important;
}

[data-theme="dark"] #bookingsettingsModal .border,
[data-theme="dark"] #bookingsettingsModal .border-top,
[data-theme="dark"] #bookingsettingsModal .border-bottom,
[data-theme="dark"] #childSeatModal .border,
[data-theme="dark"] #childSeatModal .border-top,
[data-theme="dark"] #notesModal .border,
[data-theme="dark"] #notesModal .border-top,
[data-theme="dark"] #notesModal .border-dashed,
[data-theme="dark"] #shiftsModal .border,
[data-theme="dark"] #shiftsModal .border-top,
[data-theme="dark"] #shiftsModal .border-dashed,
[data-theme="dark"] #shiftsModal .border-bottom,
[data-theme="dark"] #attributesModal .border,
[data-theme="dark"] #attributesModal .border-top,
[data-theme="dark"] #attributesModal .border-bottom,
[data-theme="dark"] #paymentLinkModal .border,
[data-theme="dark"] #paymentLinkModal .border-top,
[data-theme="dark"] #paymentLinkModal .border-bottom,
html[data-theme="dark"] #bookingsettingsModal .border,
html[data-theme="dark"] #childSeatModal .border,
html[data-theme="dark"] #notesModal .border,
html[data-theme="dark"] #notesModal .border-top,
html[data-theme="dark"] #notesModal .border-dashed,
html[data-theme="dark"] #shiftsModal .border,
html[data-theme="dark"] #shiftsModal .border-top,
html[data-theme="dark"] #shiftsModal .border-dashed,
html[data-theme="dark"] #shiftsModal .border-bottom,
html[data-theme="dark"] #attributesModal .border,
html[data-theme="dark"] #attributesModal .border-top,
html[data-theme="dark"] #attributesModal .border-bottom,
html[data-theme="dark"] #paymentLinkModal .border,
html[data-theme="dark"] #paymentLinkModal .border-top,
html[data-theme="dark"] #paymentLinkModal .border-bottom {
  border-color: var(--fe-border) !important;
}

/* Payment link modal: keep CTA link clearly green on dark panel */
[data-theme="dark"] #paymentLinkModal #payment-link-content.text-success,
html[data-theme="dark"] #paymentLinkModal #payment-link-content.text-success {
  color: rgba(110, 231, 183, 0.98) !important;
}

[data-theme="dark"] #paymentLinkModal #payment-link-content:hover,
html[data-theme="dark"] #paymentLinkModal #payment-link-content:hover {
  color: rgba(167, 243, 208, 1) !important;
}

#paymentLinkModal .payment-link-dialog {
  max-width: 390px;
  margin: 1rem auto 0;
}

#paymentLinkModal .payment-link-card {
  overflow: hidden;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(40, 167, 69, 0.16) !important;
}

#paymentLinkModal .payment-link-header {
  align-items: flex-start;
  padding: 1.25rem 1.35rem;
  color: #ffffff;
  background: #28a745;
}

#paymentLinkModal .payment-link-kicker {
  margin-bottom: 0.2rem;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

#paymentLinkModal .payment-link-body {
  padding: 1.35rem 1.45rem 1rem;
}

#paymentLinkModal .payment-link-helper-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-bottom: 0.9rem;
}

#paymentLinkModal .payment-link-icon {
  display: inline-grid;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  color: #28a745;
  font-size: 0.9rem;
  background: rgba(40, 167, 69, 0.09);
  box-shadow: inset 0 0 0 1px rgba(40, 167, 69, 0.16);
}

#paymentLinkModal .payment-link-helper {
  color: #667085;
  font-size: 0.74rem;
  line-height: 1.35;
  text-align: left;
}

#paymentLinkModal .payment-link-open-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
  margin-bottom: 0.95rem;
}

#paymentLinkModal .payment-link-open-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  color: #218838;
  font-weight: 800;
  text-decoration: none;
  background: rgba(40, 167, 69, 0.08);
  border: 1px solid rgba(40, 167, 69, 0.28);
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

#paymentLinkModal .payment-link-open-btn:hover {
  color: #1e7e34;
  background: rgba(40, 167, 69, 0.14);
  box-shadow: 0 12px 24px rgba(40, 167, 69, 0.14);
  transform: translateY(-1px);
}

#paymentLinkModal .payment-link-copy-btn {
  min-width: 76px;
  padding: 0.85rem 0.8rem;
  border: 1px solid rgba(40, 167, 69, 0.28);
  border-radius: 14px;
  color: #218838;
  font-size: 0.78rem;
  font-weight: 900;
  background: #ffffff;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

#paymentLinkModal .payment-link-copy-btn:hover {
  color: #1e7e34;
  background: rgba(40, 167, 69, 0.08);
  box-shadow: 0 10px 20px rgba(40, 167, 69, 0.12);
  transform: translateY(-1px);
}

#paymentLinkModal .payment-link-fare-card {
  padding: 1rem;
  border: 1px solid rgba(40, 167, 69, 0.2);
  border-radius: 16px;
  background: rgba(40, 167, 69, 0.07);
  box-shadow: 0 12px 24px rgba(40, 167, 69, 0.1);
}

#paymentLinkModal .payment-link-fare-label {
  margin-bottom: 0.2rem;
  color: #667085;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#paymentLinkModal .payment-link-fare-value {
  color: #28a745;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
}

#paymentLinkModal .payment-link-return-note {
  margin-top: 0.75rem;
  padding: 0.55rem 0.75rem;
  border-radius: 999px;
  color: #92400e;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: #fffbeb;
  border: 1px solid #fde68a;
}

#paymentLinkModal .payment-link-footer {
  display: block;
  padding: 0 1.45rem 1.35rem;
  background: transparent;
}

#paymentLinkModal .payment-link-charge-badge {
  display: inline-flex;
  margin-bottom: 0.75rem;
  padding: 0.42rem 0.7rem;
  border-radius: 999px;
  color: #218838;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  background: rgba(40, 167, 69, 0.12);
}

#paymentLinkModal .payment-link-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  width: 100%;
}

#paymentLinkModal .payment-link-send-btn {
  padding: 0.72rem 0.65rem;
  border: 0;
  border-radius: 14px;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 900;
  background: #28a745;
  box-shadow: 0 8px 18px rgba(40, 167, 69, 0.22);
}

#paymentLinkModal .payment-link-send-btn-alt {
  background: #218838;
  box-shadow: 0 8px 18px rgba(33, 136, 56, 0.2);
}

#paymentLinkModal .payment-link-send-btn:hover:not(:disabled) {
  color: #ffffff;
  transform: translateY(-1px);
}

#paymentLinkModal .payment-link-send-btn:disabled {
  color: rgba(255, 255, 255, 0.72);
  cursor: not-allowed;
  opacity: 0.58;
  box-shadow: none;
}

[data-theme="dark"] #paymentLinkModal .payment-link-card,
html[data-theme="dark"] #paymentLinkModal .payment-link-card {
  background: var(--fe-surface);
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] #paymentLinkModal .payment-link-helper,
[data-theme="dark"] #paymentLinkModal .payment-link-fare-label,
html[data-theme="dark"] #paymentLinkModal .payment-link-helper,
html[data-theme="dark"] #paymentLinkModal .payment-link-fare-label {
  color: var(--fe-text-muted) !important;
}

[data-theme="dark"] #paymentLinkModal .payment-link-icon,
html[data-theme="dark"] #paymentLinkModal .payment-link-icon {
  color: #28a745;
  background: rgba(40, 167, 69, 0.14);
  box-shadow: inset 0 0 0 1px rgba(40, 167, 69, 0.18);
}

[data-theme="dark"] #paymentLinkModal .payment-link-open-btn,
html[data-theme="dark"] #paymentLinkModal .payment-link-open-btn {
  color: #7bd88f !important;
  background: rgba(40, 167, 69, 0.12);
  border-color: rgba(40, 167, 69, 0.24);
}

[data-theme="dark"] #paymentLinkModal .payment-link-open-btn:hover,
html[data-theme="dark"] #paymentLinkModal .payment-link-open-btn:hover {
  color: #9be5ab !important;
  background: rgba(40, 167, 69, 0.18);
}

[data-theme="dark"] #paymentLinkModal .payment-link-copy-btn,
html[data-theme="dark"] #paymentLinkModal .payment-link-copy-btn {
  color: #7bd88f;
  background: var(--fe-surface-2);
  border-color: rgba(40, 167, 69, 0.24);
}

[data-theme="dark"] #paymentLinkModal .payment-link-copy-btn:hover,
html[data-theme="dark"] #paymentLinkModal .payment-link-copy-btn:hover {
  color: #9be5ab;
  background: rgba(40, 167, 69, 0.14);
}

[data-theme="dark"] #paymentLinkModal .payment-link-fare-card,
html[data-theme="dark"] #paymentLinkModal .payment-link-fare-card {
  background: var(--fe-surface-2);
  border-color: rgba(40, 167, 69, 0.26);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] #paymentLinkModal .payment-link-fare-value,
html[data-theme="dark"] #paymentLinkModal .payment-link-fare-value {
  color: #7bd88f;
}

[data-theme="dark"] #paymentLinkModal .payment-link-return-note,
html[data-theme="dark"] #paymentLinkModal .payment-link-return-note {
  color: #fde68a;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.26);
}

/* Localization (postcode) modal: focus/autofill must not snap to Bootstrap --bs-body-bg (white) */
[data-theme="dark"] #localizationModal .form-control,
html[data-theme="dark"] #localizationModal .form-control {
  background-color: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] #localizationModal .form-control:focus,
[data-theme="dark"] #localizationModal .form-control:focus-visible,
html[data-theme="dark"] #localizationModal .form-control:focus,
html[data-theme="dark"] #localizationModal .form-control:focus-visible {
  background-color: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-color: rgba(110, 231, 183, 0.45) !important;
  box-shadow: 0 0 0 0.25rem rgba(110, 231, 183, 0.18) !important;
}

[data-theme="dark"] #localizationModal .form-control::placeholder,
html[data-theme="dark"] #localizationModal .form-control::placeholder {
  color: rgba(229, 231, 235, 0.55) !important;
}

[data-theme="dark"] #localizationModal label,
html[data-theme="dark"] #localizationModal label {
  color: var(--fe-text) !important;
}

[data-theme="dark"] #localizationModal #postcode:-webkit-autofill,
[data-theme="dark"] #localizationModal #postcode:-webkit-autofill:hover,
[data-theme="dark"] #localizationModal #postcode:-webkit-autofill:focus,
html[data-theme="dark"] #localizationModal #postcode:-webkit-autofill,
html[data-theme="dark"] #localizationModal #postcode:-webkit-autofill:hover,
html[data-theme="dark"] #localizationModal #postcode:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--fe-text) !important;
  caret-color: var(--fe-text) !important;
  box-shadow: 0 0 0 1000px var(--fe-surface-2) inset !important;
}

/* Document number modal (settings): inputs/selects must not flash white on focus (Bootstrap --bs-body-bg) */
[data-theme="dark"] #documentNumberModal,
html[data-theme="dark"] #documentNumberModal {
  color-scheme: dark;
}

[data-theme="dark"] #documentNumberModal .modal-content,
html[data-theme="dark"] #documentNumberModal .modal-content {
  color-scheme: dark;
}

[data-theme="dark"] #documentNumberModal .form-control,
[data-theme="dark"] #documentNumberModal .form-select,
html[data-theme="dark"] #documentNumberModal .form-control,
html[data-theme="dark"] #documentNumberModal .form-select {
  background-color: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] #documentNumberModal .form-control:focus,
[data-theme="dark"] #documentNumberModal .form-control:focus-visible,
[data-theme="dark"] #documentNumberModal .form-select:focus,
[data-theme="dark"] #documentNumberModal .form-select:focus-visible,
html[data-theme="dark"] #documentNumberModal .form-control:focus,
html[data-theme="dark"] #documentNumberModal .form-control:focus-visible,
html[data-theme="dark"] #documentNumberModal .form-select:focus,
html[data-theme="dark"] #documentNumberModal .form-select:focus-visible {
  background-color: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-color: rgba(110, 231, 183, 0.45) !important;
  box-shadow: 0 0 0 0.25rem rgba(110, 231, 183, 0.18) !important;
}

[data-theme="dark"] #documentNumberModal label,
html[data-theme="dark"] #documentNumberModal label {
  color: var(--fe-text) !important;
}

[data-theme="dark"] #documentNumberModal .form-select option,
html[data-theme="dark"] #documentNumberModal .form-select option {
  background-color: var(--fe-surface-2);
  color: var(--fe-text);
}

[data-theme="dark"] #documentNumberModal input:-webkit-autofill,
[data-theme="dark"] #documentNumberModal input:-webkit-autofill:hover,
[data-theme="dark"] #documentNumberModal input:-webkit-autofill:focus,
html[data-theme="dark"] #documentNumberModal input:-webkit-autofill,
html[data-theme="dark"] #documentNumberModal input:-webkit-autofill:hover,
html[data-theme="dark"] #documentNumberModal input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--fe-text) !important;
  caret-color: var(--fe-text) !important;
  box-shadow: 0 0 0 1000px var(--fe-surface-2) inset !important;
}

/* Account modals partial: web logins, departments, contacts, order numbers, addresses, restricted drivers */
[data-theme="dark"] :is(#webLoginsModal, #departmentsModal, #contactsModal, #orderNumbersModal, #companyAddressesModal, #restrictedDriversModal),
html[data-theme="dark"] :is(#webLoginsModal, #departmentsModal, #contactsModal, #orderNumbersModal, #companyAddressesModal, #restrictedDriversModal) {
  color-scheme: dark;
}

[data-theme="dark"] :is(#webLoginsModal, #departmentsModal, #contactsModal, #orderNumbersModal, #companyAddressesModal, #restrictedDriversModal) .modal-content,
html[data-theme="dark"] :is(#webLoginsModal, #departmentsModal, #contactsModal, #orderNumbersModal, #companyAddressesModal, #restrictedDriversModal) .modal-content {
  background-color: var(--fe-surface) !important;
  color: var(--fe-text) !important;
  border: 1px solid var(--fe-border) !important;
}

[data-theme="dark"] :is(#webLoginsModal, #departmentsModal, #contactsModal, #orderNumbersModal, #companyAddressesModal, #restrictedDriversModal) .modal-header,
html[data-theme="dark"] :is(#webLoginsModal, #departmentsModal, #contactsModal, #orderNumbersModal, #companyAddressesModal, #restrictedDriversModal) .modal-header {
  background-color: var(--fe-surface-2) !important;
  border-color: var(--fe-border) !important;
  color: var(--fe-text) !important;
}

[data-theme="dark"] :is(#webLoginsModal, #departmentsModal, #contactsModal, #orderNumbersModal, #companyAddressesModal, #restrictedDriversModal) .modal-title,
html[data-theme="dark"] :is(#webLoginsModal, #departmentsModal, #contactsModal, #orderNumbersModal, #companyAddressesModal, #restrictedDriversModal) .modal-title {
  color: var(--fe-text) !important;
}

[data-theme="dark"] :is(#webLoginsModal, #departmentsModal, #contactsModal, #orderNumbersModal, #companyAddressesModal, #restrictedDriversModal) .modal-body,
html[data-theme="dark"] :is(#webLoginsModal, #departmentsModal, #contactsModal, #orderNumbersModal, #companyAddressesModal, #restrictedDriversModal) .modal-body {
  background-color: var(--fe-surface) !important;
  color: var(--fe-text) !important;
}

[data-theme="dark"] :is(#webLoginsModal, #departmentsModal, #contactsModal, #orderNumbersModal, #companyAddressesModal, #restrictedDriversModal) :is(label, .text-secondary, .text-muted),
html[data-theme="dark"] :is(#webLoginsModal, #departmentsModal, #contactsModal, #orderNumbersModal, #companyAddressesModal, #restrictedDriversModal) :is(label, .text-secondary, .text-muted) {
  color: var(--fe-text-muted) !important;
}

[data-theme="dark"] :is(#webLoginsModal, #departmentsModal, #contactsModal, #orderNumbersModal, #companyAddressesModal, #restrictedDriversModal) :is(.form-control, .form-select),
html[data-theme="dark"] :is(#webLoginsModal, #departmentsModal, #contactsModal, #orderNumbersModal, #companyAddressesModal, #restrictedDriversModal) :is(.form-control, .form-select) {
  background-color: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] :is(#webLoginsModal, #departmentsModal, #contactsModal, #orderNumbersModal, #companyAddressesModal, #restrictedDriversModal) :is(.form-control, .form-select):focus,
[data-theme="dark"] :is(#webLoginsModal, #departmentsModal, #contactsModal, #orderNumbersModal, #companyAddressesModal, #restrictedDriversModal) :is(.form-control, .form-select):focus-visible,
html[data-theme="dark"] :is(#webLoginsModal, #departmentsModal, #contactsModal, #orderNumbersModal, #companyAddressesModal, #restrictedDriversModal) :is(.form-control, .form-select):focus,
html[data-theme="dark"] :is(#webLoginsModal, #departmentsModal, #contactsModal, #orderNumbersModal, #companyAddressesModal, #restrictedDriversModal) :is(.form-control, .form-select):focus-visible {
  background-color: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-color: rgba(110, 231, 183, 0.45) !important;
  box-shadow: 0 0 0 0.25rem rgba(110, 231, 183, 0.18) !important;
}

[data-theme="dark"] :is(#webLoginsModal, #departmentsModal, #contactsModal, #orderNumbersModal, #companyAddressesModal, #restrictedDriversModal) .form-control::placeholder,
html[data-theme="dark"] :is(#webLoginsModal, #departmentsModal, #contactsModal, #orderNumbersModal, #companyAddressesModal, #restrictedDriversModal) .form-control::placeholder {
  color: rgba(229, 231, 235, 0.58) !important;
}

[data-theme="dark"] :is(#webLoginsModal, #departmentsModal, #contactsModal, #orderNumbersModal, #companyAddressesModal, #restrictedDriversModal) .form-select option,
html[data-theme="dark"] :is(#webLoginsModal, #departmentsModal, #contactsModal, #orderNumbersModal, #companyAddressesModal, #restrictedDriversModal) .form-select option {
  background-color: var(--fe-surface-2);
  color: var(--fe-text);
}

[data-theme="dark"] :is(#webLoginsModal, #departmentsModal, #contactsModal, #orderNumbersModal, #companyAddressesModal, #restrictedDriversModal) .table,
html[data-theme="dark"] :is(#webLoginsModal, #departmentsModal, #contactsModal, #orderNumbersModal, #companyAddressesModal, #restrictedDriversModal) .table {
  --bs-table-color: var(--fe-text);
  --bs-table-bg: var(--fe-surface);
  --bs-table-border-color: var(--fe-border);
  --bs-table-striped-color: var(--fe-text);
  --bs-table-striped-bg: rgba(34, 39, 46, 0.72);
  --bs-table-hover-color: var(--fe-text);
  --bs-table-hover-bg: rgba(110, 231, 183, 0.10);
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] :is(#webLoginsModal, #departmentsModal, #contactsModal, #orderNumbersModal, #companyAddressesModal, #restrictedDriversModal) .table :is(th, td),
html[data-theme="dark"] :is(#webLoginsModal, #departmentsModal, #contactsModal, #orderNumbersModal, #companyAddressesModal, #restrictedDriversModal) .table :is(th, td) {
  border-color: var(--fe-border) !important;
  color: var(--fe-text) !important;
}

[data-theme="dark"] :is(#webLoginsModal, #departmentsModal, #contactsModal, #orderNumbersModal, #companyAddressesModal, #restrictedDriversModal) .table thead tr.table-light > *,
html[data-theme="dark"] :is(#webLoginsModal, #departmentsModal, #contactsModal, #orderNumbersModal, #companyAddressesModal, #restrictedDriversModal) .table thead tr.table-light > * {
  background-color: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
  box-shadow: none !important;
}

[data-theme="dark"] :is(#webLoginsModal, #departmentsModal, #contactsModal, #orderNumbersModal, #companyAddressesModal, #restrictedDriversModal) .table tbody td,
html[data-theme="dark"] :is(#webLoginsModal, #departmentsModal, #contactsModal, #orderNumbersModal, #companyAddressesModal, #restrictedDriversModal) .table tbody td {
  background-color: rgba(34, 39, 46, 0.82) !important;
  color: var(--fe-text) !important;
}

[data-theme="dark"] :is(#webLoginsModal, #departmentsModal, #contactsModal, #orderNumbersModal, #companyAddressesModal, #restrictedDriversModal) .table-hover > tbody > tr:hover > *,
html[data-theme="dark"] :is(#webLoginsModal, #departmentsModal, #contactsModal, #orderNumbersModal, #companyAddressesModal, #restrictedDriversModal) .table-hover > tbody > tr:hover > * {
  background-color: rgba(110, 231, 183, 0.12) !important;
  color: var(--fe-text) !important;
  --bs-table-color-state: var(--fe-text) !important;
  --bs-table-bg-state: rgba(110, 231, 183, 0.12) !important;
  box-shadow: none !important;
}

[data-theme="dark"] :is(#webLoginsModal, #departmentsModal, #contactsModal, #orderNumbersModal, #companyAddressesModal, #restrictedDriversModal) input:-webkit-autofill,
[data-theme="dark"] :is(#webLoginsModal, #departmentsModal, #contactsModal, #orderNumbersModal, #companyAddressesModal, #restrictedDriversModal) input:-webkit-autofill:hover,
[data-theme="dark"] :is(#webLoginsModal, #departmentsModal, #contactsModal, #orderNumbersModal, #companyAddressesModal, #restrictedDriversModal) input:-webkit-autofill:focus,
html[data-theme="dark"] :is(#webLoginsModal, #departmentsModal, #contactsModal, #orderNumbersModal, #companyAddressesModal, #restrictedDriversModal) input:-webkit-autofill,
html[data-theme="dark"] :is(#webLoginsModal, #departmentsModal, #contactsModal, #orderNumbersModal, #companyAddressesModal, #restrictedDriversModal) input:-webkit-autofill:hover,
html[data-theme="dark"] :is(#webLoginsModal, #departmentsModal, #contactsModal, #orderNumbersModal, #companyAddressesModal, #restrictedDriversModal) input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--fe-text) !important;
  caret-color: var(--fe-text) !important;
  box-shadow: 0 0 0 1000px var(--fe-surface-2) inset !important;
}

/* Restricted drivers modal (create/update customer): select + table must not snap to white on focus/hover */
[data-theme="dark"] #restrictedDriversModal,
html[data-theme="dark"] #restrictedDriversModal {
  color-scheme: dark;
}

[data-theme="dark"] #restrictedDriversModal .modal-content,
html[data-theme="dark"] #restrictedDriversModal .modal-content {
  color-scheme: dark;
}

[data-theme="dark"] #restrictedDriversModal .form-select,
[data-theme="dark"] #restrictedDriversModal #restrict-driver,
[data-theme="dark"] #restrictedDriversModal #account-restrict-driver,
html[data-theme="dark"] #restrictedDriversModal .form-select,
html[data-theme="dark"] #restrictedDriversModal #restrict-driver,
html[data-theme="dark"] #restrictedDriversModal #account-restrict-driver {
  background-color: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] #restrictedDriversModal .form-select:focus,
[data-theme="dark"] #restrictedDriversModal .form-select:focus-visible,
[data-theme="dark"] #restrictedDriversModal #restrict-driver:focus,
[data-theme="dark"] #restrictedDriversModal #restrict-driver:focus-visible,
[data-theme="dark"] #restrictedDriversModal #account-restrict-driver:focus,
[data-theme="dark"] #restrictedDriversModal #account-restrict-driver:focus-visible,
html[data-theme="dark"] #restrictedDriversModal .form-select:focus,
html[data-theme="dark"] #restrictedDriversModal .form-select:focus-visible,
html[data-theme="dark"] #restrictedDriversModal #restrict-driver:focus,
html[data-theme="dark"] #restrictedDriversModal #restrict-driver:focus-visible,
html[data-theme="dark"] #restrictedDriversModal #account-restrict-driver:focus,
html[data-theme="dark"] #restrictedDriversModal #account-restrict-driver:focus-visible {
  background-color: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-color: rgba(110, 231, 183, 0.45) !important;
  box-shadow: 0 0 0 0.25rem rgba(110, 231, 183, 0.18) !important;
}

[data-theme="dark"] #restrictedDriversModal .form-select option,
html[data-theme="dark"] #restrictedDriversModal .form-select option {
  background-color: var(--fe-surface-2);
  color: var(--fe-text);
}

[data-theme="dark"] #restrictedDriversModal .table thead tr.table-light > *,
html[data-theme="dark"] #restrictedDriversModal .table thead tr.table-light > * {
  background-color: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
  box-shadow: none !important;
}

[data-theme="dark"] #restrictedDriversModal .table-hover > tbody > tr:hover > *,
html[data-theme="dark"] #restrictedDriversModal .table-hover > tbody > tr:hover > * {
  background-color: rgba(110, 231, 183, 0.12) !important;
  color: var(--fe-text) !important;
  --bs-table-color-state: var(--fe-text) !important;
  --bs-table-bg-state: rgba(110, 231, 183, 0.12) !important;
  box-shadow: none !important;
}

[data-theme="dark"] #restrictedDriversModal .table tbody td .row .col-8,
html[data-theme="dark"] #restrictedDriversModal .table tbody td .row .col-8 {
  background-color: transparent !important;
  color: var(--fe-text) !important;
}

/* Driver earnings modal: keep controls and labels readable in dark mode */
[data-theme="dark"] .driver-earning-modal,
html[data-theme="dark"] .driver-earning-modal {
  color-scheme: dark;
}

[data-theme="dark"] .driver-earning-modal .modal-content,
html[data-theme="dark"] .driver-earning-modal .modal-content {
  color-scheme: dark;
  background-color: var(--fe-surface) !important;
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] .driver-earning-modal .modal-header,
html[data-theme="dark"] .driver-earning-modal .modal-header {
  background-color: var(--fe-surface-2) !important;
  border-bottom-color: var(--fe-border) !important;
}

[data-theme="dark"] .driver-earning-modal .modal-body,
html[data-theme="dark"] .driver-earning-modal .modal-body {
  background-color: var(--fe-surface) !important;
}

[data-theme="dark"] .driver-earning-modal label,
html[data-theme="dark"] .driver-earning-modal label {
  color: var(--fe-text) !important;
  font-weight: 600;
}

[data-theme="dark"] .driver-earning-modal .form-control,
[data-theme="dark"] .driver-earning-modal .form-select,
html[data-theme="dark"] .driver-earning-modal .form-control,
html[data-theme="dark"] .driver-earning-modal .form-select {
  background-color: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] .driver-earning-modal .form-control:focus,
[data-theme="dark"] .driver-earning-modal .form-select:focus,
html[data-theme="dark"] .driver-earning-modal .form-control:focus,
html[data-theme="dark"] .driver-earning-modal .form-select:focus {
  background-color: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-color: rgba(110, 231, 183, 0.45) !important;
  box-shadow: 0 0 0 0.25rem rgba(110, 231, 183, 0.18) !important;
}

[data-theme="dark"] .driver-earning-modal .form-select option,
html[data-theme="dark"] .driver-earning-modal .form-select option {
  background-color: var(--fe-surface-2);
  color: var(--fe-text);
}

[data-theme="dark"] #bookingsettingsModal .nav-pills .nav-link:not(.active),
html[data-theme="dark"] #bookingsettingsModal .nav-pills .nav-link:not(.active) {
  color: var(--fe-text) !important;
}

[data-theme="dark"] #bookingsettingsModal .nav-pills .nav-link.active,
html[data-theme="dark"] #bookingsettingsModal .nav-pills .nav-link.active {
  background: rgba(110, 231, 183, 0.16) !important;
  color: var(--fe-text) !important;
}

[data-theme="dark"] #bookingsettingsModal [id$="-notification-badge"],
html[data-theme="dark"] #bookingsettingsModal [id$="-notification-badge"] {
  border-color: rgba(27, 31, 35, 0.95) !important;
  box-shadow: 0 0 0 1px var(--fe-border) !important;
}

[data-theme="dark"] #childSeatModal .modal-footer .btn-light,
[data-theme="dark"] #notesModal .modal-footer .btn-light,
[data-theme="dark"] #shiftsModal .modal-footer .btn-light,
[data-theme="dark"] #attributesModal .modal-footer .btn-light,
html[data-theme="dark"] #childSeatModal .modal-footer .btn-light,
html[data-theme="dark"] #notesModal .modal-footer .btn-light,
html[data-theme="dark"] #shiftsModal .modal-footer .btn-light,
html[data-theme="dark"] #attributesModal .modal-footer .btn-light {
  background-color: var(--fe-surface-2) !important;
  border-color: var(--fe-border) !important;
  color: var(--fe-text) !important;
}

[data-theme="dark"] #childSeatModal .modal-footer .btn-light:hover,
[data-theme="dark"] #notesModal .modal-footer .btn-light:hover,
[data-theme="dark"] #shiftsModal .modal-footer .btn-light:hover,
[data-theme="dark"] #attributesModal .modal-footer .btn-light:hover,
html[data-theme="dark"] #childSeatModal .modal-footer .btn-light:hover,
html[data-theme="dark"] #notesModal .modal-footer .btn-light:hover,
html[data-theme="dark"] #shiftsModal .modal-footer .btn-light:hover,
html[data-theme="dark"] #attributesModal .modal-footer .btn-light:hover {
  background-color: rgba(110, 231, 183, 0.12) !important;
  color: var(--fe-text) !important;
}

/* Bank details modal: table header contains inputs, so keep every cell/control on dark tokens */
[data-theme="dark"] #bankDetailsModal .modal-content,
html[data-theme="dark"] #bankDetailsModal .modal-content {
  background-color: var(--fe-surface) !important;
  color: var(--fe-text) !important;
  border: 1px solid var(--fe-border) !important;
}

[data-theme="dark"] #bankDetailsModal .modal-header,
html[data-theme="dark"] #bankDetailsModal .modal-header {
  background-color: var(--fe-surface-2) !important;
  border-color: var(--fe-border) !important;
  color: var(--fe-text) !important;
}

[data-theme="dark"] #bankDetailsModal .modal-title,
html[data-theme="dark"] #bankDetailsModal .modal-title {
  color: var(--fe-text) !important;
}

[data-theme="dark"] #bankDetailsModal .modal-body,
html[data-theme="dark"] #bankDetailsModal .modal-body {
  background-color: var(--fe-surface) !important;
  color: var(--fe-text) !important;
}

[data-theme="dark"] #bankDetailsModal .table,
html[data-theme="dark"] #bankDetailsModal .table {
  --bs-table-color: var(--fe-text);
  --bs-table-bg: var(--fe-surface);
  --bs-table-border-color: var(--fe-border);
  --bs-table-hover-color: var(--fe-text);
  --bs-table-hover-bg: rgba(110, 231, 183, 0.10);
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] #bankDetailsModal .table thead th,
[data-theme="dark"] #bankDetailsModal .table tbody td,
html[data-theme="dark"] #bankDetailsModal .table thead th,
html[data-theme="dark"] #bankDetailsModal .table tbody td {
  background-color: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] #bankDetailsModal label,
html[data-theme="dark"] #bankDetailsModal label {
  color: var(--fe-text-muted) !important;
}

[data-theme="dark"] #bankDetailsModal .form-control,
html[data-theme="dark"] #bankDetailsModal .form-control {
  background-color: rgba(34, 39, 46, 0.92) !important;
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] #bankDetailsModal .form-control:focus,
[data-theme="dark"] #bankDetailsModal .form-control:focus-visible,
html[data-theme="dark"] #bankDetailsModal .form-control:focus,
html[data-theme="dark"] #bankDetailsModal .form-control:focus-visible {
  background-color: rgba(34, 39, 46, 0.98) !important;
  color: var(--fe-text) !important;
  border-color: rgba(110, 231, 183, 0.55) !important;
  box-shadow: 0 0 0 0.2rem rgba(110, 231, 183, 0.16) !important;
}

[data-theme="dark"] #bankDetailsModal .form-control::placeholder,
html[data-theme="dark"] #bankDetailsModal .form-control::placeholder {
  color: rgba(229, 231, 235, 0.58) !important;
}

[data-theme="dark"] #bookingsettingsModal .table.table-bordered,
[data-theme="dark"] #childSeatModal .table.table-bordered,
[data-theme="dark"] #notesModal .table.table-bordered,
[data-theme="dark"] #shiftsModal .table.table-bordered,
[data-theme="dark"] #attributesModal .table.table-bordered,
html[data-theme="dark"] #bookingsettingsModal .table.table-bordered,
html[data-theme="dark"] #childSeatModal .table.table-bordered,
html[data-theme="dark"] #notesModal .table.table-bordered,
html[data-theme="dark"] #shiftsModal .table.table-bordered,
html[data-theme="dark"] #attributesModal .table.table-bordered {
  border-color: var(--fe-border) !important;
}

/* Driver notes + shifts: form fields must not use light focus/autofill backgrounds */
[data-theme="dark"] #notesModal .form-control,
[data-theme="dark"] #shiftsModal .form-control,
html[data-theme="dark"] #notesModal .form-control,
html[data-theme="dark"] #shiftsModal .form-control {
  background-color: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] #notesModal .form-control:focus,
[data-theme="dark"] #notesModal .form-control:focus-visible,
[data-theme="dark"] #shiftsModal .form-control:focus,
[data-theme="dark"] #shiftsModal .form-control:focus-visible,
html[data-theme="dark"] #notesModal .form-control:focus,
html[data-theme="dark"] #notesModal .form-control:focus-visible,
html[data-theme="dark"] #shiftsModal .form-control:focus,
html[data-theme="dark"] #shiftsModal .form-control:focus-visible {
  background-color: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-color: rgba(110, 231, 183, 0.45) !important;
  box-shadow: 0 0 0 0.25rem rgba(110, 231, 183, 0.18) !important;
}

[data-theme="dark"] #notesModal .input-group-text.bg-white,
[data-theme="dark"] #shiftsModal .input-group-text.bg-white,
html[data-theme="dark"] #notesModal .input-group-text.bg-white,
html[data-theme="dark"] #shiftsModal .input-group-text.bg-white {
  background-color: var(--fe-surface) !important;
  color: var(--fe-text-muted) !important;
  border-color: var(--fe-border) !important;
}

/* Driver document modals: PHC Vehicle/Driver, MOT, MOT 2, Insurance, License, Road Tax, V5, Rental (driverModals.ejs) */
[data-theme="dark"] .driver-documents-modal .bg-light,
html[data-theme="dark"] .driver-documents-modal .bg-light {
  background-color: var(--fe-surface-2) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] .driver-documents-modal .bg-white,
html[data-theme="dark"] .driver-documents-modal .bg-white {
  background-color: rgba(27, 31, 35, 0.88) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] .driver-documents-modal .modal-title.text-dark,
html[data-theme="dark"] .driver-documents-modal .modal-title.text-dark {
  color: var(--fe-text) !important;
}

[data-theme="dark"] .driver-documents-modal .text-secondary,
html[data-theme="dark"] .driver-documents-modal .text-secondary {
  color: var(--fe-text-muted) !important;
}

[data-theme="dark"] .driver-documents-modal .border,
[data-theme="dark"] .driver-documents-modal .border-top,
[data-theme="dark"] .driver-documents-modal .border-bottom,
html[data-theme="dark"] .driver-documents-modal .border,
html[data-theme="dark"] .driver-documents-modal .border-top,
html[data-theme="dark"] .driver-documents-modal .border-bottom {
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] .driver-documents-modal .modal-footer .btn-light,
html[data-theme="dark"] .driver-documents-modal .modal-footer .btn-light {
  background-color: var(--fe-surface-2) !important;
  border-color: var(--fe-border) !important;
  color: var(--fe-text) !important;
}

[data-theme="dark"] .driver-documents-modal .modal-footer .btn-light:hover,
html[data-theme="dark"] .driver-documents-modal .modal-footer .btn-light:hover {
  background-color: rgba(110, 231, 183, 0.12) !important;
  color: var(--fe-text) !important;
}

[data-theme="dark"] .driver-documents-modal .table.table-bordered,
html[data-theme="dark"] .driver-documents-modal .table.table-bordered {
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] .driver-documents-modal .form-control,
html[data-theme="dark"] .driver-documents-modal .form-control {
  background-color: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] .driver-documents-modal .form-control:focus,
[data-theme="dark"] .driver-documents-modal .form-control:focus-visible,
html[data-theme="dark"] .driver-documents-modal .form-control:focus,
html[data-theme="dark"] .driver-documents-modal .form-control:focus-visible {
  background-color: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-color: rgba(110, 231, 183, 0.45) !important;
  box-shadow: 0 0 0 0.25rem rgba(110, 231, 183, 0.18) !important;
}

[data-theme="dark"] .driver-documents-modal .input-group-text.bg-white,
html[data-theme="dark"] .driver-documents-modal .input-group-text.bg-white {
  background-color: var(--fe-surface) !important;
  color: var(--fe-text-muted) !important;
  border-color: var(--fe-border) !important;
}

/* updateDriver.ejs: vehicle history + complaints tables (table-light + bordered) */
[data-theme="dark"] .driver-update-page-modal .table.table-bordered,
html[data-theme="dark"] .driver-update-page-modal .table.table-bordered {
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] .driver-update-page-modal thead.table-light,
html[data-theme="dark"] .driver-update-page-modal thead.table-light {
  --bs-table-bg: var(--fe-surface-2);
  --bs-table-color: var(--fe-text);
}

[data-theme="dark"] .driver-update-page-modal thead.table-light th,
[data-theme="dark"] .driver-update-page-modal thead.table-light td,
html[data-theme="dark"] .driver-update-page-modal thead.table-light th,
html[data-theme="dark"] .driver-update-page-modal thead.table-light td {
  background-color: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
}

/* Dispatch + compose email/SMS modals (bookingModals.ejs — bg-light + inline dispatch table styles) */
[data-theme="dark"] #noPickupModal .bg-light,
[data-theme="dark"] #recoverDriverModal .bg-light,
[data-theme="dark"] #allocateDriverModal .bg-light,
[data-theme="dark"] #dispatchBookingModal .bg-light,
[data-theme="dark"] #dispatchFOBModal .bg-light,
[data-theme="dark"] #dispatchFBModal .bg-light,
[data-theme="dark"] #smsModal .bg-light,
[data-theme="dark"] #emailModal .bg-light,
html[data-theme="dark"] #noPickupModal .bg-light,
html[data-theme="dark"] #recoverDriverModal .bg-light,
html[data-theme="dark"] #allocateDriverModal .bg-light,
html[data-theme="dark"] #dispatchBookingModal .bg-light,
html[data-theme="dark"] #dispatchFOBModal .bg-light,
html[data-theme="dark"] #dispatchFBModal .bg-light,
html[data-theme="dark"] #smsModal .bg-light,
html[data-theme="dark"] #emailModal .bg-light {
  background-color: var(--fe-surface-2) !important;
  border-color: var(--fe-border) !important;
  color: var(--fe-text) !important;
}

[data-theme="dark"] #noPickupModal .text-dark,
[data-theme="dark"] #recoverDriverModal .text-dark,
html[data-theme="dark"] #noPickupModal .text-dark,
html[data-theme="dark"] #recoverDriverModal .text-dark {
  color: var(--fe-text) !important;
}

[data-theme="dark"] #dispatchBookingModal .border,
[data-theme="dark"] #dispatchFOBModal .border,
[data-theme="dark"] #dispatchFBModal .border,
[data-theme="dark"] #allocateDriverModal .border,
[data-theme="dark"] #noPickupModal .border,
[data-theme="dark"] #recoverDriverModal .border,
[data-theme="dark"] #smsModal .border,
[data-theme="dark"] #emailModal .border,
html[data-theme="dark"] #dispatchBookingModal .border,
html[data-theme="dark"] #dispatchFOBModal .border,
html[data-theme="dark"] #dispatchFBModal .border,
html[data-theme="dark"] #allocateDriverModal .border,
html[data-theme="dark"] #noPickupModal .border,
html[data-theme="dark"] #recoverDriverModal .border,
html[data-theme="dark"] #smsModal .border,
html[data-theme="dark"] #emailModal .border {
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] #dispatchBookingModal .text-muted,
[data-theme="dark"] #dispatchFOBModal .text-muted,
[data-theme="dark"] #dispatchFBModal .text-muted,
[data-theme="dark"] #allocateDriverModal .text-muted,
[data-theme="dark"] #smsModal .text-muted,
[data-theme="dark"] #emailModal .text-muted,
html[data-theme="dark"] #dispatchBookingModal .text-muted,
html[data-theme="dark"] #dispatchFOBModal .text-muted,
html[data-theme="dark"] #dispatchFBModal .text-muted,
html[data-theme="dark"] #allocateDriverModal .text-muted,
html[data-theme="dark"] #smsModal .text-muted,
html[data-theme="dark"] #emailModal .text-muted {
  color: var(--fe-text-muted) !important;
}

[data-theme="dark"] #dispatchBookingModal .modal-footer .btn-light,
[data-theme="dark"] #dispatchFOBModal .modal-footer .btn-light,
[data-theme="dark"] #dispatchFBModal .modal-footer .btn-light,
[data-theme="dark"] #allocateDriverModal .modal-footer .btn-light,
[data-theme="dark"] #smsModal .modal-footer .btn-light,
[data-theme="dark"] #emailModal .modal-footer .btn-light,
html[data-theme="dark"] #dispatchBookingModal .modal-footer .btn-light,
html[data-theme="dark"] #dispatchFOBModal .modal-footer .btn-light,
html[data-theme="dark"] #dispatchFBModal .modal-footer .btn-light,
html[data-theme="dark"] #allocateDriverModal .modal-footer .btn-light,
html[data-theme="dark"] #smsModal .modal-footer .btn-light,
html[data-theme="dark"] #emailModal .modal-footer .btn-light {
  background-color: var(--fe-surface-2) !important;
  border-color: var(--fe-border) !important;
  color: var(--fe-text) !important;
}

[data-theme="dark"] #dispatchBookingModal .modal-footer .btn-light:hover,
[data-theme="dark"] #dispatchFOBModal .modal-footer .btn-light:hover,
[data-theme="dark"] #dispatchFBModal .modal-footer .btn-light:hover,
[data-theme="dark"] #allocateDriverModal .modal-footer .btn-light:hover,
[data-theme="dark"] #smsModal .modal-footer .btn-light:hover,
[data-theme="dark"] #emailModal .modal-footer .btn-light:hover,
html[data-theme="dark"] #dispatchBookingModal .modal-footer .btn-light:hover,
html[data-theme="dark"] #dispatchFOBModal .modal-footer .btn-light:hover,
html[data-theme="dark"] #dispatchFBModal .modal-footer .btn-light:hover,
html[data-theme="dark"] #allocateDriverModal .modal-footer .btn-light:hover,
html[data-theme="dark"] #smsModal .modal-footer .btn-light:hover,
html[data-theme="dark"] #emailModal .modal-footer .btn-light:hover {
  background-color: rgba(110, 231, 183, 0.12) !important;
  color: var(--fe-text) !important;
}

[data-theme="dark"] #emailModal #email-from.bg-light,
html[data-theme="dark"] #emailModal #email-from.bg-light {
  background-color: rgba(34, 39, 46, 0.88) !important;
  color: var(--fe-text-muted) !important;
}

/* Override bookingModals.ejs scoped light table body (inline style block) */
[data-theme="dark"] #dispatchBookingModal .dispatch-drivers-table table,
[data-theme="dark"] #dispatchFOBModal .dispatch-drivers-table table,
[data-theme="dark"] #dispatchFBModal .dispatch-drivers-table table,
html[data-theme="dark"] #dispatchBookingModal .dispatch-drivers-table table,
html[data-theme="dark"] #dispatchFOBModal .dispatch-drivers-table table,
html[data-theme="dark"] #dispatchFBModal .dispatch-drivers-table table {
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] #dispatchBookingModal .dispatch-drivers-table tbody td,
[data-theme="dark"] #dispatchFOBModal .dispatch-drivers-table tbody td,
[data-theme="dark"] #dispatchFBModal .dispatch-drivers-table tbody td,
html[data-theme="dark"] #dispatchBookingModal .dispatch-drivers-table tbody td,
html[data-theme="dark"] #dispatchFOBModal .dispatch-drivers-table tbody td,
html[data-theme="dark"] #dispatchFBModal .dispatch-drivers-table tbody td {
  background: rgba(34, 39, 46, 0.78) !important;
  border-color: var(--fe-border) !important;
  color: var(--fe-text) !important;
}

[data-theme="dark"] #dispatchBookingModal .dispatch-drivers-table tbody tr:nth-child(even) td,
[data-theme="dark"] #dispatchFOBModal .dispatch-drivers-table tbody tr:nth-child(even) td,
[data-theme="dark"] #dispatchFBModal .dispatch-drivers-table tbody tr:nth-child(even) td,
html[data-theme="dark"] #dispatchBookingModal .dispatch-drivers-table tbody tr:nth-child(even) td,
html[data-theme="dark"] #dispatchFOBModal .dispatch-drivers-table tbody tr:nth-child(even) td,
html[data-theme="dark"] #dispatchFBModal .dispatch-drivers-table tbody tr:nth-child(even) td {
  background: rgba(27, 31, 35, 0.88) !important;
}

[data-theme="dark"] #dispatchBookingModal .dispatch-drivers-table tbody tr:hover td,
[data-theme="dark"] #dispatchFOBModal .dispatch-drivers-table tbody tr:hover td,
[data-theme="dark"] #dispatchFBModal .dispatch-drivers-table tbody tr:hover td,
html[data-theme="dark"] #dispatchBookingModal .dispatch-drivers-table tbody tr:hover td,
html[data-theme="dark"] #dispatchFOBModal .dispatch-drivers-table tbody tr:hover td,
html[data-theme="dark"] #dispatchFBModal .dispatch-drivers-table tbody tr:hover td {
  background: rgba(110, 231, 183, 0.10) !important;
}

[data-theme="dark"] #dispatchBookingModal .dispatch-title-icon,
[data-theme="dark"] #dispatchFOBModal .dispatch-title-icon,
[data-theme="dark"] #dispatchFBModal .dispatch-title-icon,
html[data-theme="dark"] #dispatchBookingModal .dispatch-title-icon,
html[data-theme="dark"] #dispatchFOBModal .dispatch-title-icon,
html[data-theme="dark"] #dispatchFBModal .dispatch-title-icon {
  background: rgba(110, 231, 183, 0.10) !important;
  color: rgba(110, 231, 183, 0.95) !important;
  border-color: rgba(110, 231, 183, 0.22) !important;
}

[data-theme="dark"] #dispatchBookingModal .dispatch-title-text,
[data-theme="dark"] #dispatchFOBModal .dispatch-title-text,
[data-theme="dark"] #dispatchFBModal .dispatch-title-text,
html[data-theme="dark"] #dispatchBookingModal .dispatch-title-text,
html[data-theme="dark"] #dispatchFOBModal .dispatch-title-text,
html[data-theme="dark"] #dispatchFBModal .dispatch-title-text {
  color: rgba(229, 231, 235, 0.96) !important;
}

[data-theme="dark"] #dispatchBookingModal .dispatch-title-subtext,
[data-theme="dark"] #dispatchFOBModal .dispatch-title-subtext,
[data-theme="dark"] #dispatchFBModal .dispatch-title-subtext,
html[data-theme="dark"] #dispatchBookingModal .dispatch-title-subtext,
html[data-theme="dark"] #dispatchFOBModal .dispatch-title-subtext,
html[data-theme="dark"] #dispatchFBModal .dispatch-title-subtext {
  color: var(--fe-text-muted) !important;
}

/* Dispatch modals: thead matches global table header token (overrides bookingModals inline) */
.dispatch-drivers-table .dispatch-thead th {
  background-color: var(--fe-surface-2) !important;
  background: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] #dispatchBookingModal .dispatch-drivers-table .dispatch-thead th,
[data-theme="dark"] #dispatchFOBModal .dispatch-drivers-table .dispatch-thead th,
[data-theme="dark"] #dispatchFBModal .dispatch-drivers-table .dispatch-thead th,
html[data-theme="dark"] #dispatchBookingModal .dispatch-drivers-table .dispatch-thead th,
html[data-theme="dark"] #dispatchFOBModal .dispatch-drivers-table .dispatch-thead th,
html[data-theme="dark"] #dispatchFBModal .dispatch-drivers-table .dispatch-thead th {
  background-color: var(--fe-surface-2) !important;
  background: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
}

/* Allocated-driver row (JS uses tr.table-warning) — modal-scoped td rules above would otherwise flatten it */
[data-theme="dark"] #dispatchBookingModal .dispatch-drivers-table tbody tr.table-warning > td,
[data-theme="dark"] #dispatchFOBModal .dispatch-drivers-table tbody tr.table-warning > td,
[data-theme="dark"] #dispatchFBModal .dispatch-drivers-table tbody tr.table-warning > td,
html[data-theme="dark"] #dispatchBookingModal .dispatch-drivers-table tbody tr.table-warning > td,
html[data-theme="dark"] #dispatchFOBModal .dispatch-drivers-table tbody tr.table-warning > td,
html[data-theme="dark"] #dispatchFBModal .dispatch-drivers-table tbody tr.table-warning > td {
  background-color: rgba(245, 158, 11, 0.22) !important;
  color: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(245, 158, 11, 0.28) !important;
}

[data-theme="dark"] #dispatchBookingModal .dispatch-drivers-table tbody tr.table-warning:hover > td,
[data-theme="dark"] #dispatchFOBModal .dispatch-drivers-table tbody tr.table-warning:hover > td,
[data-theme="dark"] #dispatchFBModal .dispatch-drivers-table tbody tr.table-warning:hover > td,
html[data-theme="dark"] #dispatchBookingModal .dispatch-drivers-table tbody tr.table-warning:hover > td,
html[data-theme="dark"] #dispatchFOBModal .dispatch-drivers-table tbody tr.table-warning:hover > td,
html[data-theme="dark"] #dispatchFBModal .dispatch-drivers-table tbody tr.table-warning:hover > td {
  background-color: rgba(245, 158, 11, 0.30) !important;
}

/*
 * Driver username color by job status (dashboard bookings grid, dispatch modals).
 * Parent cells use color: ... !important in dark mode; these win on the inner span.
 */
.driver-username-status {
  font-weight: 700 !important;
}

.driver-username-status--available,
.driver-username-status--quoted {
  color: #15803d !important;
}
.driver-username-status--on-break,
.driver-username-status--cancelled,
.driver-username-status--no-pickup,
.driver-username-status--no-show,
.driver-username-status--missed,
.driver-username-status--not-accepted,
.driver-username-status--declined {
  color: #b91c1c !important;
}
.driver-username-status--waiting {
  color: #1d4ed8 !important;
}
.driver-username-status--pending {
  color: #4b5563 !important;
}
.driver-username-status--on-route {
  color: #b45309 !important;
}
/* Arrived: purple (matches getRGBByJobStatus lavender family, readable on light rows) */
.driver-username-status--arrived {
  color: #6b21a8 !important;
}
.driver-username-status--pob {
  color: #1f2937 !important;
}
.driver-username-status--stc {
  color: #0369a1 !important;
}

[data-theme="dark"] .driver-username-status--available,
[data-theme="dark"] .driver-username-status--quoted,
html[data-theme="dark"] .driver-username-status--available,
html[data-theme="dark"] .driver-username-status--quoted {
  color: #4ade80 !important;
}
[data-theme="dark"] .driver-username-status--on-break,
[data-theme="dark"] .driver-username-status--cancelled,
[data-theme="dark"] .driver-username-status--no-pickup,
[data-theme="dark"] .driver-username-status--no-show,
[data-theme="dark"] .driver-username-status--missed,
[data-theme="dark"] .driver-username-status--not-accepted,
[data-theme="dark"] .driver-username-status--declined,
html[data-theme="dark"] .driver-username-status--on-break,
html[data-theme="dark"] .driver-username-status--cancelled,
html[data-theme="dark"] .driver-username-status--no-pickup,
html[data-theme="dark"] .driver-username-status--no-show,
html[data-theme="dark"] .driver-username-status--missed,
html[data-theme="dark"] .driver-username-status--not-accepted,
html[data-theme="dark"] .driver-username-status--declined {
  color: #fca5a5 !important;
}
[data-theme="dark"] .driver-username-status--waiting,
html[data-theme="dark"] .driver-username-status--waiting {
  color: #93c5fd !important;
}
[data-theme="dark"] .driver-username-status--pending,
html[data-theme="dark"] .driver-username-status--pending {
  color: #9ca3af !important;
}
[data-theme="dark"] .driver-username-status--on-route,
html[data-theme="dark"] .driver-username-status--on-route {
  color: #fbbf24 !important;
}
[data-theme="dark"] .driver-username-status--arrived,
html[data-theme="dark"] .driver-username-status--arrived {
  color: #c4b5fd !important;
}
[data-theme="dark"] .driver-username-status--pob,
html[data-theme="dark"] .driver-username-status--pob {
  color: #e5e7eb !important;
}
[data-theme="dark"] .driver-username-status--stc,
html[data-theme="dark"] .driver-username-status--stc {
  color: #7dd3fc !important;
}

/* Portal: live map report (drivers sidebar + list) */
[data-theme="dark"] #map-report-view .map-report-card.bg-secondary.text-white,
html[data-theme="dark"] #map-report-view .map-report-card.bg-secondary.text-white {
  background-color: rgba(51, 65, 85, 0.95) !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
  color: rgba(255, 255, 255, 0.96) !important;
}

[data-theme="dark"] #map-report-view .map-report-card.bg-secondary.text-white h5,
html[data-theme="dark"] #map-report-view .map-report-card.bg-secondary.text-white h5 {
  color: rgba(255, 255, 255, 0.96) !important;
}

/* Default upload placeholder (white PNG) — invert on dark surfaces; only while src is still the placeholder */
[data-theme="dark"] img#image[src="/images/upload.png"],
html[data-theme="dark"] img#image[src="/images/upload.png"] {
  filter: invert(1) brightness(0.93);
}

[data-theme="dark"] img#image[src="/images/upload.png"]:hover,
html[data-theme="dark"] img#image[src="/images/upload.png"]:hover {
  filter: invert(1) brightness(1);
}

/* Bootstrap popovers — dark mode (dashboard driver-popover-card, etc.) */
[data-theme="dark"] .popover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .popover-body {
  background-color: var(--fe-surface) !important;
  color: var(--fe-text) !important;
}

[data-theme="dark"] .popover-header {
  background-color: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-bottom-color: var(--fe-border) !important;
}

[data-theme="dark"] .bs-popover-top > .popover-arrow::after,
[data-theme="dark"] .bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after {
  border-top-color: var(--fe-surface) !important;
}

[data-theme="dark"] .bs-popover-bottom > .popover-arrow::after,
[data-theme="dark"] .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after {
  border-bottom-color: var(--fe-surface) !important;
}

[data-theme="dark"] .bs-popover-start > .popover-arrow::after,
[data-theme="dark"] .bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after {
  border-left-color: var(--fe-surface) !important;
}

[data-theme="dark"] .bs-popover-end > .popover-arrow::after,
[data-theme="dark"] .bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after {
  border-right-color: var(--fe-surface) !important;
}

[data-theme="dark"] .popover .driver-popover-card .label-text {
  color: var(--fe-text-muted) !important;
}

[data-theme="dark"] .popover .driver-popover-card .value-text {
  color: var(--fe-text) !important;
}

[data-theme="dark"] .popover .driver-popover-card .value-text.text-success {
  color: var(--fe-link-hover) !important;
}

[data-theme="dark"] .popover .driver-popover-card .border-bottom {
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] .popover .driver-popover-card .driver-popover-username,
[data-theme="dark"] .popover .driver-popover-card .driver-popover-os-apple {
  color: var(--fe-text) !important;
}

[data-theme="dark"] .popover .driver-popover-card .text-muted {
  color: var(--fe-text-muted) !important;
}

[data-theme="dark"] .popover .driver-popover-card .close-pop,
[data-theme="dark"] .popover .driver-popover-card .driver-popover-close {
  color: var(--fe-text-muted) !important;
}

[data-theme="dark"] .popover .driver-popover-card .close-pop:hover {
  background-color: rgba(239, 68, 68, 0.2) !important;
  color: #fecaca !important;
}

/* Driver popover: theme-aware labels (works in light + dark popover body) */
.driver-popover-card .driver-popover-username,
.driver-popover-card .driver-popover-os-apple {
  color: var(--fe-text);
}

.driver-popover-card .driver-popover-close {
  color: var(--fe-text-muted);
}

/* Booking info popover (dashboard — info icon): REF# must follow theme, not Bootstrap .text-dark */
.popover .booking-popover-ref {
  color: var(--fe-text) !important;
}

/* Multi booking modal: column header spacing/alignment */
#multiBookingModal .table {
  table-layout: auto !important;
}

#multiBookingModal .table thead th {
  white-space: nowrap;
  padding: 0.55rem 0.75rem !important;
  vertical-align: middle;
}

#multiBookingModal .table thead th:nth-child(1) {
  min-width: 88px;
}

#multiBookingModal .table thead th:nth-child(2) {
  min-width: 90px;
}

#multiBookingModal .table thead th:nth-child(3) {
  min-width: 130px;
}

#multiBookingModal .table thead th:nth-child(4),
#multiBookingModal .table thead th:nth-child(5) {
  min-width: 120px;
}

#multiBookingModal .table tbody td {
  padding: 0.45rem 0.65rem !important;
}

/* Multi booking modal: dark theme alignment */
[data-theme="dark"] #multiBookingModal,
html[data-theme="dark"] #multiBookingModal {
  color-scheme: dark;
}

[data-theme="dark"] #multiBookingModal .modal-content,
html[data-theme="dark"] #multiBookingModal .modal-content {
  background-color: var(--fe-surface) !important;
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] #multiBookingModal .modal-header,
[data-theme="dark"] #multiBookingModal .modal-footer,
html[data-theme="dark"] #multiBookingModal .modal-header,
html[data-theme="dark"] #multiBookingModal .modal-footer {
  background-color: var(--fe-surface-2) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] #multiBookingModal .modal-body,
html[data-theme="dark"] #multiBookingModal .modal-body {
  background-color: var(--fe-surface) !important;
}

[data-theme="dark"] #multiBookingModal .bg-light,
html[data-theme="dark"] #multiBookingModal .bg-light {
  background-color: var(--fe-surface-2) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] #multiBookingModal .form-label,
[data-theme="dark"] #multiBookingModal .form-check-label,
html[data-theme="dark"] #multiBookingModal .form-label,
html[data-theme="dark"] #multiBookingModal .form-check-label {
  color: var(--fe-text) !important;
}

[data-theme="dark"] #multiBookingModal .form-control,
html[data-theme="dark"] #multiBookingModal .form-control {
  background-color: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] #multiBookingModal .form-control:focus,
html[data-theme="dark"] #multiBookingModal .form-control:focus {
  background-color: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-color: rgba(110, 231, 183, 0.45) !important;
  box-shadow: 0 0 0 0.25rem rgba(110, 231, 183, 0.18) !important;
}

[data-theme="dark"] #multiBookingModal .table-responsive,
html[data-theme="dark"] #multiBookingModal .table-responsive {
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] #multiBookingModal .modal-footer .btn-light,
html[data-theme="dark"] #multiBookingModal .modal-footer .btn-light {
  background-color: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
}

/* Extension number modal: dark theme alignment + input readability */
[data-theme="dark"] #extensionNumberModal,
html[data-theme="dark"] #extensionNumberModal {
  color-scheme: dark;
}

[data-theme="dark"] #extensionNumberModal .modal-content,
html[data-theme="dark"] #extensionNumberModal .modal-content {
  background-color: var(--fe-surface) !important;
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] #extensionNumberModal .modal-header,
[data-theme="dark"] #extensionNumberModal .modal-footer,
html[data-theme="dark"] #extensionNumberModal .modal-header,
html[data-theme="dark"] #extensionNumberModal .modal-footer {
  background-color: var(--fe-surface-2) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] #extensionNumberModal .modal-body,
html[data-theme="dark"] #extensionNumberModal .modal-body {
  background-color: var(--fe-surface) !important;
}

[data-theme="dark"] #extensionNumberModal label,
html[data-theme="dark"] #extensionNumberModal label {
  color: var(--fe-text) !important;
}

[data-theme="dark"] #extensionNumberModal #extension-number,
html[data-theme="dark"] #extensionNumberModal #extension-number {
  background-color: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] #extensionNumberModal #extension-number::placeholder,
html[data-theme="dark"] #extensionNumberModal #extension-number::placeholder {
  color: var(--fe-text-muted) !important;
}

[data-theme="dark"] #extensionNumberModal #extension-number:focus,
html[data-theme="dark"] #extensionNumberModal #extension-number:focus {
  background-color: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-color: rgba(110, 231, 183, 0.45) !important;
  box-shadow: 0 0 0 0.25rem rgba(110, 231, 183, 0.18) !important;
}

[data-theme="dark"] #extensionNumberModal #temporary-extentions .badge,
html[data-theme="dark"] #extensionNumberModal #temporary-extentions .badge {
  box-shadow: 0 0 0 1px rgba(110, 231, 183, 0.28) !important;
}

/* Portal booking update screens: disabled/readonly field contrast in dark mode */
[data-theme="dark"] #card-booking-body .form-control:disabled,
[data-theme="dark"] #card-booking-body .form-control[readonly],
[data-theme="dark"] #card-booking-body .form-select:disabled,
[data-theme="dark"] #card-booking-body .form-select[readonly],
html[data-theme="dark"] #card-booking-body .form-control:disabled,
html[data-theme="dark"] #card-booking-body .form-control[readonly],
html[data-theme="dark"] #card-booking-body .form-select:disabled,
html[data-theme="dark"] #card-booking-body .form-select[readonly] {
  background-color: rgba(71, 85, 105, 0.34) !important;
  color: rgba(226, 232, 240, 0.95) !important;
  border-color: rgba(148, 163, 184, 0.45) !important;
  -webkit-text-fill-color: rgba(226, 232, 240, 0.95) !important;
  opacity: 1 !important;
}

[data-theme="dark"] #card-booking-body .form-control:disabled::placeholder,
[data-theme="dark"] #card-booking-body .form-control[readonly]::placeholder,
html[data-theme="dark"] #card-booking-body .form-control:disabled::placeholder,
html[data-theme="dark"] #card-booking-body .form-control[readonly]::placeholder {
  color: rgba(203, 213, 225, 0.72) !important;
}

[data-theme="dark"] #card-booking-body .form-control:disabled + .input-group-append .btn,
[data-theme="dark"] #card-booking-body .form-control[readonly] + .input-group-append .btn,
html[data-theme="dark"] #card-booking-body .form-control:disabled + .input-group-append .btn,
html[data-theme="dark"] #card-booking-body .form-control[readonly] + .input-group-append .btn {
  background-color: rgba(71, 85, 105, 0.34) !important;
  color: rgba(226, 232, 240, 0.95) !important;
  border-color: rgba(148, 163, 184, 0.45) !important;
  opacity: 1 !important;
}

[data-theme="dark"] #card-booking-body .input-group-text.bg-white,
[data-theme="dark"] #card-booking-body .input-group-text.bg-light,
html[data-theme="dark"] #card-booking-body .input-group-text.bg-white,
html[data-theme="dark"] #card-booking-body .input-group-text.bg-light {
  background-color: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
}

/* Driver information modal: align driver select with dark theme form controls */
[data-theme="dark"] .driver-vehicle-modal #driver-modal,
html[data-theme="dark"] .driver-vehicle-modal #driver-modal {
  background-color: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-color: var(--fe-border) !important;
}

[data-theme="dark"] .driver-vehicle-modal #driver-modal:focus,
html[data-theme="dark"] .driver-vehicle-modal #driver-modal:focus {
  background-color: var(--fe-surface-2) !important;
  color: var(--fe-text) !important;
  border-color: rgba(110, 231, 183, 0.45) !important;
  box-shadow: 0 0 0 0.25rem rgba(110, 231, 183, 0.18) !important;
}