:root,
:root[data-theme="dark"] {
  --background: #15130F;
  --surface: #1a1a1a;
  --surface-alt: #1a1712;
  --surface-2: #262019;
  --border: #2a2a2a;
  --text: #ffffff;
  --muted: #a8a29e;
  --gold: #d4af37;
  --gold-faded: #d4af3733;
  --coral: #ff7f50;
  --success: #22c55e;
  --success-bg: #22c55e1a;
  --success-dark: #15803d;
  --danger: #ef4444;
  --warning: #f59e0b;
  --info: #3498db;
  --status-bar-style: light;
}

:root[data-theme="light"] {
  --background: #ffffff;
  --surface: #ffffff;
  --surface-alt: #fbf9f6;
  --surface-2: #f8f9fa;
  --border: #e2ddd3;
  --text: #1a1712;
  --muted: #36322f;
  --gold: #a8790c;
  --gold-faded: #a8790c26;
  --coral: #c94a26;
  --success: #15803d;
  --success-bg: #15803d1a;
  --success-dark: #0f5c2c;
  --danger: #b91c1c;
  --warning: #a15b06;
  --info: #1f6fae;
  --status-bar-style: dark;
}

/* OPTION A: FAINT GREY SHAPES */
/* Places a 92% white tint layer over body to turn heavy black pattern into faint grey */
/* Light mode: faint gold watermark pattern */
/* OPTION A: FAINT WHITE BODY */
[data-theme="light"] body {
  background-color: #ffffff !important;
  background-image: linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)) !important;
}

/* Light mode: faint gold watermark pattern */
[data-theme="light"] .dash-content::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Crect x='20' y='30' width='18' height='42' rx='9' fill='none' stroke='%23a8790c' stroke-width='2.5'/%3E%3Crect x='80' y='20' width='32' height='28' rx='3' fill='none' stroke='%23a8790c' stroke-width='2.5'/%3E%3Crect x='80' y='14' width='32' height='10' rx='2' fill='none' stroke='%23a8790c' stroke-width='2.5'/%3E%3Cline x1='96' y1='14' x2='96' y2='48' stroke='%23a8790c' stroke-width='2'/%3E%3Cpath d='M140 90 L130 115 L150 115 Z' fill='none' stroke='%23a8790c' stroke-width='2.5'/%3E%3Cellipse cx='140' cy='87' rx='12' ry='10' fill='none' stroke='%23a8790c' stroke-width='2.5'/%3E%3Crect x='55' y='110' width='16' height='38' rx='8' fill='none' stroke='%23a8790c' stroke-width='2.5'/%3E%3Cpath d='M100 130 h36 l-5 25 h-26 z' fill='none' stroke='%23a8790c' stroke-width='2.5'/%3E%3Cpath d='M108 130 c0-8 4-14 10-14 s10 6 10 14' fill='none' stroke='%23a8790c' stroke-width='2.5'/%3E%3Crect x='15' y='140' width='38' height='16' rx='8' fill='none' stroke='%23a8790c' stroke-width='2.5'/%3E%3Ccircle cx='160' cy='40' r='5' fill='none' stroke='%23a8790c' stroke-width='2'/%3E%3Ccircle cx='30' cy='85' r='12' fill='none' stroke='%23a8790c' stroke-width='2'/%3E%3Ccircle cx='30' cy='85' r='4' fill='none' stroke='%23a8790c' stroke-width='1.5'/%3E%3C/svg%3E");
    opacity: 0.2;
}

[data-theme="light"] .page-wrap::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Crect x='20' y='30' width='18' height='42' rx='9' fill='none' stroke='%23a8790c' stroke-width='2.5'/%3E%3Crect x='80' y='20' width='32' height='28' rx='3' fill='none' stroke='%23a8790c' stroke-width='2.5'/%3E%3Crect x='80' y='14' width='32' height='10' rx='2' fill='none' stroke='%23a8790c' stroke-width='2.5'/%3E%3Cline x1='96' y1='14' x2='96' y2='48' stroke='%23a8790c' stroke-width='2'/%3E%3Cpath d='M140 90 L130 115 L150 115 Z' fill='none' stroke='%23a8790c' stroke-width='2.5'/%3E%3Cellipse cx='140' cy='87' rx='12' ry='10' fill='none' stroke='%23a8790c' stroke-width='2.5'/%3E%3Crect x='55' y='110' width='16' height='38' rx='8' fill='none' stroke='%23a8790c' stroke-width='2.5'/%3E%3Cpath d='M100 130 h36 l-5 25 h-26 z' fill='none' stroke='%23a8790c' stroke-width='2.5'/%3E%3Cpath d='M108 130 c0-8 4-14 10-14 s10 6 10 14' fill='none' stroke='%23a8790c' stroke-width='2.5'/%3E%3Crect x='15' y='140' width='38' height='16' rx='8' fill='none' stroke='%23a8790c' stroke-width='2.5'/%3E%3Ccircle cx='160' cy='40' r='5' fill='none' stroke='%23a8790c' stroke-width='2'/%3E%3Ccircle cx='30' cy='85' r='12' fill='none' stroke='%23a8790c' stroke-width='2'/%3E%3Ccircle cx='30' cy='85' r='4' fill='none' stroke='%23a8790c' stroke-width='1.5'/%3E%3C/svg%3E");
    opacity: 0.2;
}

[data-theme="light"] body {
    background: #ffffff !important;
    color: var(--text) !important;
}
[data-theme="light"] body::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Crect x='20' y='30' width='18' height='42' rx='9' fill='none' stroke='%23a8790c' stroke-width='2.5'/%3E%3Crect x='80' y='20' width='32' height='28' rx='3' fill='none' stroke='%23a8790c' stroke-width='2.5'/%3E%3Crect x='80' y='14' width='32' height='10' rx='2' fill='none' stroke='%23a8790c' stroke-width='2.5'/%3E%3Cline x1='96' y1='14' x2='96' y2='48' stroke='%23a8790c' stroke-width='2'/%3E%3Cpath d='M140 90 L130 115 L150 115 Z' fill='none' stroke='%23a8790c' stroke-width='2.5'/%3E%3Cellipse cx='140' cy='87' rx='12' ry='10' fill='none' stroke='%23a8790c' stroke-width='2.5'/%3E%3Crect x='55' y='110' width='16' height='38' rx='8' fill='none' stroke='%23a8790c' stroke-width='2.5'/%3E%3Cpath d='M100 130 h36 l-5 25 h-26 z' fill='none' stroke='%23a8790c' stroke-width='2.5'/%3E%3Cpath d='M108 130 c0-8 4-14 10-14 s10 6 10 14' fill='none' stroke='%23a8790c' stroke-width='2.5'/%3E%3Crect x='15' y='140' width='38' height='16' rx='8' fill='none' stroke='%23a8790c' stroke-width='2.5'/%3E%3Ccircle cx='160' cy='40' r='5' fill='none' stroke='%23a8790c' stroke-width='2'/%3E%3Ccircle cx='30' cy='85' r='12' fill='none' stroke='%23a8790c' stroke-width='2'/%3E%3Ccircle cx='30' cy='85' r='4' fill='none' stroke='%23a8790c' stroke-width='1.5'/%3E%3C/svg%3E");
    opacity: 0.2;
}

/* Light mode: recolor the watermark pattern instead of tinting body */
[data-theme="light"] .dash-content::before {
    opacity: 0.06;
}

[data-theme="light"] .ckTypeBtn:not(.active) {
    color: var(--gold);
}

[data-theme="light"] .qtyVal {
    color: var(--gold);
}

[data-theme="light"] .addrLine {
    color: var(--gold);
}

[data-theme="light"] .tipBtn:not(.active) {
    color: var(--gold);
}

[data-theme="light"] .cta-box p {
    color: var(--gold);
}

[data-theme="light"] #distanceLine,
[data-theme="light"] .priceRow > span:first-child,
[data-theme="light"] .noteCard label {
    color: var(--gold);
}

[data-theme="light"] .tracker-title,
[data-theme="light"] .tracker-date,
[data-theme="light"] .shift-meta,
[data-theme="light"] .shift-meta span,
[data-theme="light"] .m-lbl,
[data-theme="light"] .m-sub,
[data-theme="light"] .m-val,
[data-theme="light"] .prog-lbl,
[data-theme="light"] .prog-marks,
[data-theme="light"] .rb-body {
  color: var(--gold);
}
/*
[data-theme="light"] .driver-code-box small {
  color: var(--gold);
}

[data-theme="light"] .bc-route-row span,
[data-theme="light"] .bc-route-row strong {
  color: #ffffff;
}

[data-theme="light"] .ao-row,
[data-theme="light"] .ao-row strong,
[data-theme="light"] .ao-addr {
  color: #ffffff;
}

[data-theme="light"] .m-field input,
[data-theme="light"] .m-field select {
  color: var(--gold);
}

[data-theme="light"] .form-control-custom {
  color: var(--gold);
}
[data-theme="light"] .form-control-custom::placeholder {
  color: var(--gold);
  opacity: 0.65;
}

[data-theme="light"] .time-input {
  color: var(--gold);
}


[data-theme="light"] .form-input {
  color: var(--gold);
}
[data-theme="light"] .form-input::placeholder {
  color: var(--gold);
  opacity: 0.6;
}
[data-theme="light"] .withdraw-note {
  color: var(--gold);
}
[data-theme="light"] .withdraw-note i {
  color: var(--gold);
}

[data-theme="light"] .wh-action:not(.primary) {
  color: var(--gold);
}

[data-theme="light"] .profile-section .info-row-value,
[data-theme="light"] .profile-section p {
  color: var(--gold) !important;
}
[data-theme="light"] #orders-list select {
  color: var(--gold) !important;
}

[data-theme="light"] #searchInput {
  color: #ffffff !important;
}
[data-theme="light"] #searchInput::placeholder {
  color: #ffffff !important;
  opacity: 0.6;
}

[data-theme="light"] .profile-hero-info div[style*="color:var(--text)"] {
  color: #ffffff !important;
}
[data-theme="light"] label.btn-outline {
  color: #ffffff !important;
}

[data-theme="light"] .info-row div[style*="color:var(--text)"] {
  color: #ffffff !important;
}

[data-theme="light"] .info-row div[style*="color:var(--muted)"] {
  color: #ffffff !important;
}

[data-theme="light"] .image-box p {
  color: #ffffff !important;
}
[data-theme="light"] .styled-input {
  color: #ffffff !important;
}
[data-theme="light"] .styled-input::placeholder {
  color: #ffffff !important;
  opacity: 0.65;
}
[data-theme="light"] .price-wrap span,
[data-theme="light"] .price-wrap input {
  color: #ffffff !important;
}
[data-theme="light"] .price-wrap input::placeholder {
  color: #ffffff !important;
  opacity: 0.65;
}

[data-theme="light"] .edit-label {
  color: #ffffff !important;
}
[data-theme="light"] .edit-input,
[data-theme="light"] .edit-textarea {
  color: #ffffff !important;
}
[data-theme="light"] .edit-input::placeholder,
[data-theme="light"] .edit-textarea::placeholder {
  color: #ffffff !important;
  opacity: 0.6;
}

[data-theme="light"] .ctable thead th {
  color: var(--gold);
}*/

/* Light Theme Top Bar & Header Override */
[data-theme="light"] .top-bar,
[data-theme="light"] .sidebar-header {
    background: #F5F5F5 !important;
    background-image: none !important;
    border-bottom: 1px solid var(--border) !important;
}

/* Adjust text and icon colors inside the top bar for readability */
[data-theme="light"] .top-bar .menu-toggle-mobile,
[data-theme="light"] .top-bar .user-info h6 {
    color: var(--text) !important;
}

[data-theme="light"] .top-bar .user-info p {
    color: var(--muted) !important;
}

/* Solid black theme toggle icon in Light Theme */
[data-theme="light"] .top-bar-actions button,
[data-theme="light"] .top-bar-actions i,
[data-theme="light"] .top-bar-actions svg,
[data-theme="light"] .theme-toggle,
[data-theme="light"] .theme-toggle i {
    color: #000000 !important;
    fill: #000000 !important;
    border-color: #000000 !important;
    opacity: 1 !important;
}

:root, :root[data-theme="dark"] {
  ...
  --surface2: #262019; /* matches style.css's original hardcoded value — no change in dark mode */
  ...
}

:root[data-theme="light"] {
  ...
  --surface2: #f8f9fa; /* now matches --surface-2, actually resolves in light mode */
  ...
}

[data-theme="light"] .profile-hero {
    background: linear-gradient(135deg, #fdfaf3 0%, #f8f4ea 60%, #ffffff 100%);
}
[data-theme="light"] .profile-section {
    background: #ffffff;
    border-color: var(--border);
}
[data-theme="light"] .info-row {
    border-bottom-color: var(--border);
}
[data-theme="light"] .info-row-label {
    color: var(--muted);
}
[data-theme="light"] .info-row-value {
    color: var(--text);
}

/* ── LIGHT MODE: Universal Heading Overrides ── */

/* Targets universal resets, sidebar sections, page headers, 
   hero cards, and profile section headings */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] .nav-section,
[data-theme="light"] .page-hdr h1,
[data-theme="light"] .profile-hero-info h2,
[data-theme="light"] .profile-section-hdr h4 {
    color: #000000 !important;
    font-weight: 700 !important; /* Ensures boldness on white background */
}

/* Ensure icons inside these headers also turn dark */
[data-theme="light"] .profile-section-hdr .hdr-icon {
    color: #EFBF04 !important;
    background: rgba(0, 0, 0, 0.05) !important; /* Faint dark background */
    border-color: rgba(0, 0, 0, 0.1) !important;
}

/* Universal Light Theme Overrides for CTA Elements */
[data-theme="light"] .cta-box,
body.light-theme .cta-box,
html.light .cta-box,
body.light .cta-box {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

[data-theme="light"] .cta-box p,
body.light-theme .cta-box p,
html.light .cta-box p,
body.light .cta-box p {
    color: #333333 !important;
}

[data-theme="light"] .cta-input,
body.light-theme .cta-input,
html.light .cta-input,
body.light .cta-input {
    background: #f8f9fa !important;
    border-color: #cbd5e1 !important;
    color: #1a202c !important;
}

.btn-gold-solid {
    color: #ffffff !important;
}

/* Light Theme Specific Overrides for Wallet & Form Inputs */
[data-theme="light"] .form-input,
[data-theme="light"] .form-select,
[data-theme="light"] .amount-wrap,
body.light-theme .form-input,
body.light-theme .form-select,
body.light-theme .amount-wrap,
html.light .form-input,
html.light .form-select,
html.light .amount-wrap {
    background: #ffffff !important;
    color: #1a202c !important;
    border-color: #cbd5e1 !important;
}

[data-theme="light"] .amount-wrap .currency-prefix,
body.light-theme .amount-wrap .currency-prefix,
html.light .amount-wrap .currency-prefix {
    color: #1a202c !important;
}

[data-theme="light"] .withdraw-note,
body.light-theme .withdraw-note,
html.light .withdraw-note {
    background: #f8f9fa !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .form-input::placeholder,
body.light-theme .form-input::placeholder,
html.light .form-input::placeholder {
    color: #94a3b8 !important;
}

/* Light Theme Override for Wallet Hero Action Buttons */
[data-theme="light"] .wallet-hero-actions .wh-action,
body.light-theme .wallet-hero-actions .wh-action,
html.light .wallet-hero-actions .wh-action {
    color: #ffffff !important;
}

[data-theme="light"] .wallet-hero-actions .wh-action i,
body.light-theme .wallet-hero-actions .wh-action i,
html.light .wallet-hero-actions .wh-action i {
    color: #ffffff !important;
}

/* Light Theme Override for Location & Delivery Note Boxes */
[data-theme="light"] .note-inner,
[data-theme="light"] .location-box,
[data-theme="light"] .pickup-drop-box,
[data-theme="light"] .address-box,
[data-theme="light"] .order-location,
body.light-theme .note-inner,
body.light-theme .location-box,
body.light-theme .pickup-drop-box,
body.light-theme .address-box,
body.light-theme .order-location,
html.light .note-inner,
html.light .location-box,
html.light .pickup-drop-box,
html.light .address-box,
html.light .order-location {
    background: #ffffff !important;
    color: #1a202c !important;
    border: 1px solid #cbd5e1 !important;
}

/* Force inner text and labels inside the boxes to remain readable */
[data-theme="light"] .note-inner *,
[data-theme="light"] .location-box *,
[data-theme="light"] .pickup-drop-box *,
[data-theme="light"] .address-box *,
[data-theme="light"] .order-location *,
body.light-theme .note-inner *,
body.light-theme .location-box *,
body.light-theme .pickup-drop-box *,
body.light-theme .address-box *,
body.light-theme .order-location * {
    color: #1a202c !important;
}

/* Top Bar Navigation Tabs */
[data-theme="light"] .tab-bar,
html[data-theme="light"] .tab-bar {
    border-bottom-color: #cbd5e1 !important;
}

[data-theme="light"] .tab,
html[data-theme="light"] .tab {
    color: #475569 !important;
    background: transparent !important;
}

[data-theme="light"] .tab.active,
html[data-theme="light"] .tab.active {
    color: #0f172a !important;
    background: #e2e8f0 !important;
    border-bottom-color: #FF9900 !important;
    font-weight: bold !important;
}

/* Inner Dark Boxes (Pickup/Drop & Delivery Notes) */
[data-theme="light"] .note-inner,
[data-theme="light"] .order-card div[style*="background"],
[data-theme="light"] [class*="route"],
[data-theme="light"] [class*="pickup"],
html[data-theme="light"] .note-inner {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

/* Light Theme Override for Delivery Note Label & Box */
[data-theme="light"] .note-box label,
html[data-theme="light"] .note-box label {
    color: #475569 !important;
    font-weight: 600 !important;
}

[data-theme="light"] .note-inner,
html[data-theme="light"] .note-inner {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 2px solid #cbd5e1 !important;
}

/* Light Theme Override for div.delivery-note */
[data-theme="light"] div.delivery-note,
[data-theme="light"] .delivery-note,
html[data-theme="light"] div.delivery-note,
html[data-theme="light"] .delivery-note {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 12px;
}

/* Ensure all nested text inside div.delivery-note is dark and readable */
[data-theme="light"] div.delivery-note *,
[data-theme="light"] .delivery-note *,
html[data-theme="light"] div.delivery-note *,
html[data-theme="light"] .delivery-note * {
    color: #0f172a !important;
}

/* Light Theme Overrides for Add Menu Item Form */
[data-theme="light"] .image-box,
[data-theme="light"] .styled-input,
[data-theme="light"] .price-wrap,
html[data-theme="light"] .image-box,
html[data-theme="light"] .styled-input,
html[data-theme="light"] .price-wrap {
    /*background: #f8fafc !important;*/
    background-color: #f8fafc !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

/* Fix text and options inside inputs/dropdowns */
[data-theme="light"] .price-wrap input,
html[data-theme="light"] .price-wrap input {
    color: #0f172a !important;
}

[data-theme="light"] select.styled-input option,
html[data-theme="light"] select.styled-input option {
    background: #ffffff !important;
    color: #0f172a !important;
}

/* Fix price 'R' and '.00' side badges */
[data-theme="light"] .price-wrap span,
html[data-theme="light"] .price-wrap span {
    background: #e2e8f0 !important;
    color: #475569 !important;
}

/* Light mode overrides for Driver Profile action tiles */
[data-theme="light"] .action-tile,
body.light-theme .action-tile,
body.light-mode .action-tile {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .tile-label,
body.light-theme .tile-label,
body.light-mode .tile-label {
    color: #1e293b !important;
}

[data-theme="light"] .tile-sub,
body.light-theme .tile-sub,
body.light-mode .tile-sub {
    color: #64748b !important;
}

/* Light mode override for Store Hours block */
[data-theme="light"] .store-hours,
body.light-theme .store-hours,
body.light-mode .store-hours {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

/* Ensure text remains legible against a white background */
[data-theme="light"] .store-hours .hours-row,
body.light-theme .store-hours .hours-row,
body.light-mode .store-hours .hours-row {
    color: #1e293b !important;
    border-bottom-color: #f1f5f9 !important;
}

/* Gold Ready Now Selector Override */
.aoc-actions select,
select[id^="time-"] {
    background-color: var(--gold) !important;
    color: #ffffff !important;
    border: 1px solid var(--gold) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

/* Ensure dropdown options remain legible across light/dark themes */
.aoc-actions select option,
select[id^="time-"] option {
    background-color: var(--surface, #ffffff) !important;
    color: var(--text, #111111) !important;
}

/* White Search Bar Input Override for Light Theme */
[data-theme="light"] #searchInput,
[data-theme="light"] .search-input,
body:not(.dark) #searchInput,
html:not([data-theme="dark"]) #searchInput {
    background-color: #ffffff !important;
    color: #111111 !important;
}

[data-theme="light"] #searchInput::placeholder,
body:not(.dark) #searchInput::placeholder {
    color: #777777 !important;
    opacity: 0.9;
}

/* Light theme input and textarea override */
[data-theme="light"] .edit-input,
[data-theme="light"] .edit-textarea,
body:not(.dark) .edit-input,
body:not(.dark) .edit-textarea,
html:not([data-theme="dark"]) .edit-input,
html:not([data-theme="dark"]) .edit-textarea {
    background-color: #ffffff !important;
    color: #111111 !important;
    border-color: #e0e0e0 !important;
}

[data-theme="light"] .edit-input::placeholder,
[data-theme="light"] .edit-textarea::placeholder,
body:not(.dark) .edit-input::placeholder,
body:not(.dark) .edit-textarea::placeholder {
    color: #777777 !important;
    opacity: 1;
}

/* ══════════════════ LIGHT THEME OVERRIDES ══════════════════ */

/* Switch to Customer button — solid gold with white text on light mode */
[data-theme="light"] .switch-role-btn {
    background: var(--gold);
    border-color: var(--gold);
    color: #fff;
}
[data-theme="light"] .switch-role-btn:hover {
    background: #b8933f; /* slightly darker gold on hover for contrast feedback */
    border-color: #b8933f;
    color: #fff;
    transform: translateY(-1px);
}

/* All input / select fields — white background on light mode */
[data-theme="light"] .m-field input,
[data-theme="light"] .m-field select,
[data-theme="light"] .field-wrap input,
[data-theme="light"] .field-wrap {
    background: #ffffff;
    color: #1a1a1a;
}
[data-theme="light"] .field-wrap input::placeholder {
    color: #9a9a9a;
}
[data-theme="light"] .m-field input:focus,
[data-theme="light"] .m-field select:focus,
[data-theme="light"] .field-wrap:focus-within {
    border-color: var(--gold);
    background: #ffffff;
}

/* OTP input inside active order cards — force light background/text in light mode */
[data-theme="light"] .otp-input-wrap input {
    background: #ffffff;
    color: #1a1a1a;
    border-color: var(--border);
}
[data-theme="light"] .otp-input-wrap input::placeholder {
    color: #9a9a9a;
}
[data-theme="light"] .otp-input-wrap input:focus {
    border-color: var(--gold);
    outline: none;
}

[data-theme="light"] .driver-code-box {
    background: #ffffff;
    color: #1a1a1a;
    border-color: var(--border);
}
[data-theme="light"] .driver-code-box div::placeholder {
    color: #9a9a9a;
}
[data-theme="light"] .driver-code-box div:focus {
    border-color: var(--gold);
    outline: none;
}


[data-theme="light"] .driverRow {
    background: #ffffff;
    color: #1a1a1a;
    border-color: var(--border);
}

[data-theme="light"] .ckTypeBtn.active.disabled {
    
    color:white;
    border-color: var(--border);
}

[data-theme="light"] .helpSelect{
    background: #ffffff;
    color: #1a1a1a;
    border-color: var(--border);
}

/* ===== Shop Card Glossy Fix — Light Mode Override ===== */

.shopCard {
    position: relative;
    overflow: hidden;
}

.shopCard::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -20%;
    width: 60%;
    height: 200%;
    transform: rotate(20deg);
    pointer-events: none;
}

/* Dark mode gloss (white sheen) */
[data-theme="dark"] .shopCard {
    background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 40%), var(--surface);
}
[data-theme="dark"] .shopCard::before {
    background: linear-gradient(120deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 60%);
}
[data-theme="dark"] .shopCard:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,0.35), 0 0 0 1px rgba(212,175,55,0.2);
}

/* Light mode gloss (pearl/satin sheen instead of glassy white-on-white) */
[data-theme="light"] .shopCard {
    background: linear-gradient(145deg, rgba(0,0,0,0.03), rgba(255,255,255,0.6) 40%), var(--surface);
}
[data-theme="light"] .shopCard::before {
    background: linear-gradient(120deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 60%);
}
[data-theme="light"] .shopCard:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,0.12), 0 0 0 1px rgba(212,175,55,0.25);
}

/* ── Light mode: soft tinted tiles instead of solid colour ── */
[data-theme="light"] .tile-green {
    background: rgba(125, 165, 80, 0.16);
    border-color: rgba(125, 165, 80, 0.55);
}
[data-theme="light"] .tile-mustard {
    background: rgba(201, 160, 48, 0.16);
    border-color: rgba(201, 160, 48, 0.55);
}
[data-theme="light"] .tile-red {
    background: rgba(208, 96, 112, 0.14);
    border-color: rgba(208, 96, 112, 0.55);
}

/* Hover: slightly stronger tint, solid border */
[data-theme="light"] .tile-green:hover  { background: rgba(125, 165, 80, 0.28);  border-color: #4a9e22; }
[data-theme="light"] .tile-mustard:hover { background: rgba(201, 160, 48, 0.28);  border-color: #a07818; }
[data-theme="light"] .tile-red:hover     { background: rgba(208, 96, 112, 0.26); border-color: #e74c3c; }

/* Icons take the tile's hue (darker shade), labels use normal text colour */
[data-theme="light"] .tile-green .tile-icon  { color: #4f7a2a; }
[data-theme="light"] .tile-mustard .tile-icon { color: #8a6a10; }
[data-theme="light"] .tile-red .tile-icon     { color: #b23a4c; }

[data-theme="light"] .tile-green .tile-lbl,
[data-theme="light"] .tile-mustard .tile-lbl,
[data-theme="light"] .tile-red .tile-lbl {
    color: var(--text, #1c1b16);
}

/* ── Light mode: Payments (.sc-*) and Analytics (.box-*) cards ── */
[data-theme="light"] .stat-card.sc-green,
[data-theme="light"] .p-stat-card.box-green {
    background: rgba(125, 165, 80, 0.16);
    border-color: rgba(125, 165, 80, 0.55);
}
[data-theme="light"] .stat-card.sc-mustard,
[data-theme="light"] .p-stat-card.box-mustard {
    background: rgba(201, 160, 48, 0.16);
    border-color: rgba(201, 160, 48, 0.55);
}
[data-theme="light"] .stat-card.sc-red,
[data-theme="light"] .p-stat-card.box-red {
    background: rgba(208, 96, 112, 0.14);
    border-color: rgba(208, 96, 112, 0.55);
}

/* Icon chips: tinted circle + darker hue icon */
[data-theme="light"] .sc-green .stat-icon,
[data-theme="light"] .box-green .stat-icon   { background: rgba(125, 165, 80, 0.22); color: #4f7a2a; }
[data-theme="light"] .sc-mustard .stat-icon,
[data-theme="light"] .box-mustard .stat-icon { background: rgba(201, 160, 48, 0.22); color: #8a6a10; }
[data-theme="light"] .sc-red .stat-icon,
[data-theme="light"] .box-red .stat-icon     { background: rgba(208, 96, 112, 0.20); color: #b23a4c; }

/* Numbers and labels: your Payments page hardcodes #111 / #1a1a0a */
[data-theme="light"] .pmt-card .stat-val,
[data-theme="light"] .p-stat-card .stat-value { color: var(--text); }
[data-theme="light"] .pmt-card .stat-lbl,
[data-theme="light"] .p-stat-card .stat-label { color: var(--text); opacity: 0.75; 
    
}

/* ── Light mode: driver stat cards (.s-icon / .stat-val / .stat-lbl / .stat-foot) ── */
[data-theme="light"] .sc-green .s-icon   { background: rgba(125, 165, 80, 0.22); color: #4f7a2a; }
[data-theme="light"] .sc-mustard .s-icon { background: rgba(201, 160, 48, 0.22); color: #8a6a10; }
[data-theme="light"] .sc-red .s-icon     { background: rgba(208, 96, 112, 0.20); color: #b23a4c; }

[data-theme="light"] .stat-card .stat-val  { color: var(--text); }
[data-theme="light"] .stat-card .stat-lbl  { color: var(--text); opacity: 0.75; }
[data-theme="light"] .stat-card .stat-foot { color: var(--muted); }

/* Emergency button: its colours are inline, so !important is needed here */
[data-theme="light"] button[onclick="triggerEmergency()"] {
    background: rgba(231, 76, 60, 0.12) !important;
    color: #b23a4c !important;
}

/* Order history: OTP / Find Another Driver box */
[data-theme="light"] .otp-box {
    background: #f8efcf !important;          /* light gold */
    border-top: 1px solid #e8d9a0 !important;
}

/* Table header row: gold in light mode */
[data-theme="light"] .ctable thead tr,
[data-theme="light"] .ctable thead th {
    background: var(--gold) !important;
    color: #2b2618 !important;
    border-bottom-color: rgba(0,0,0,0.08) !important;
}


[data-theme="light"] .ao-card {
    background: #ffffff !important;
    border-color: var(--border) !important;
}
[data-theme="light"] .ao-row,
[data-theme="light"] .ao-addr {
    color: var(--muted) !important;
}
[data-theme="light"] .ao-row strong,
[data-theme="light"] .ao-card-id {
    color: var(--text) !important;
}
 
[data-theme="light"] .user-profile {
    background: #ffffff !important;
}
[data-theme="light"] .user-profile .user-info h6 {
    color: var(--text) !important;
}
[data-theme="light"] .user-profile .user-info p {
    color: var(--muted) !important;
}

/* ============ KYC + Step4 hardcoded light-mode overrides ============ */
[data-theme="light"] .top-bar {
    background: #ffffff !important;
    border-bottom-color: #e2ddd3 !important;
}
[data-theme="light"] .back-btn {
    color: #1a1712 !important;
}
[data-theme="light"] .ckTypeToggle {
    background: #f8f9fa !important;
    border-color: #e2ddd3 !important;
}
[data-theme="light"] .ckTypeBtn {
    color: #36322f !important;
}
[data-theme="light"] .ckOuter {
    background: #ffffff !important;
    border-color: #e2ddd3 !important;
}
[data-theme="light"] .ckHeaderBar {
    background: #f8f9fa !important;
    border-bottom-color: #e2ddd3 !important;
}
[data-theme="light"] .ckCard p.note {
    color: #36322f !important;
}
[data-theme="light"] .field label {
    color: #1a1712 !important;
}
[data-theme="light"] .field.hint {
    color: #36322f !important;
}
[data-theme="light"] .field input[type="text"],
[data-theme="light"] .field input[type="email"],
[data-theme="light"] .field input[type="tel"] {
    background: #f8f9fa !important;
    color: #1a1712 !important;
    border-color: #e2ddd3 !important;
}
[data-theme="light"] .upload-row {
    background: #f8f9fa !important;
    border-color: #e2ddd3 !important;
}
[data-theme="light"] .upload-row.upload-label {
    color: #1a1712 !important;
}
[data-theme="light"] .upload-row.upload-status {
    color: #36322f !important;
}
[data-theme="light"] .consent-row {
    background: #f8f9fa !important;
    border-color: #e2ddd3 !important;
}
[data-theme="light"] .consent-row label {
    color: #36322f !important;
}

/* step4.php specific */
[data-theme="light"] .address-display {
    background: #f8f9fa !important;
    border-color: #e2ddd3 !important;
    color: #36322f !important;
}
[data-theme="light"] .address-display span {
    color: #1a1712 !important;
}
[data-theme="light"] #suggestions {
    background: #ffffff !important;
    border-color: #e2ddd3 !important;
}

[data-theme="light"] #addressInput {
    background: #f8f9fa !important;
    color: #1a1712 !important;
    border-color: #e2ddd3 !important;
}
#addressInput::placeholder {
    color: #8a836a;
}

/* ===== maps-2 navigation: light-mode overrides ===== */
:is(html[data-theme="light"], html.light, html.light-mode,
    body.light, body.light-mode, [data-bs-theme="light"]) {

  /* handy light palette for the nav UI */
  --nv-panel:  #ffffff;
  --nv-ink:    #1c1b16;
  --nv-muted:  #6f6650;
  --nv-line:   #e3dccb;
  --nv-chip:   #f6f1e3;
}

/* Top turn-by-turn banner */
:is(html[data-theme="light"], html.light, html.light-mode,
    body.light, body.light-mode, [data-bs-theme="light"]) .nav-banner {
  background: var(--nv-panel);
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
:is(html[data-theme="light"], html.light, html.light-mode,
    body.light, body.light-mode, [data-bs-theme="light"]) .nav-instruction,
:is(html[data-theme="light"], html.light, html.light-mode,
    body.light, body.light-mode, [data-bs-theme="light"]) .nav-distance {
  color: var(--nv-ink);
}
:is(html[data-theme="light"], html.light, html.light-mode,
    body.light, body.light-mode, [data-bs-theme="light"]) .nav-banner-next {
  color: var(--nv-muted);
  border-top-color: var(--nv-line);
}

/* Bottom panel */
:is(html[data-theme="light"], html.light, html.light-mode,
    body.light, body.light-mode, [data-bs-theme="light"]) .nav-bottom {
  background: var(--nv-panel);
  border-top-color: var(--nv-line);
  box-shadow: 0 -10px 26px rgba(0,0,0,.12);
}
:is(html[data-theme="light"], html.light, html.light-mode,
    body.light, body.light-mode, [data-bs-theme="light"]) .nav-bottom .sheet-grabber {
  background: var(--nv-line);
}

/* Close (X) and mic buttons: were black circles with invisible icons */
:is(html[data-theme="light"], html.light, html.light-mode,
    body.light, body.light-mode, [data-bs-theme="light"]) .nav-exit-btn,
:is(html[data-theme="light"], html.light, html.light-mode,
    body.light, body.light-mode, [data-bs-theme="light"]) .nav-voice-btn {
  background: var(--nv-chip);
  border-color: var(--nv-line);
  color: var(--nv-ink);
}
:is(html[data-theme="light"], html.light, html.light-mode,
    body.light, body.light-mode, [data-bs-theme="light"]) .nav-exit-btn:hover {
  color: #e74c3c; border-color: #e74c3c;
}

/* Route timeline dots + text */
:is(html[data-theme="light"], html.light, html.light-mode,
    body.light, body.light-mode, [data-bs-theme="light"]) .nr-dot {
  background: var(--nv-panel);
  border-color: var(--nv-line);
}
:is(html[data-theme="light"], html.light, html.light-mode,
    body.light, body.light-mode, [data-bs-theme="light"]) .nr-name { color: var(--nv-ink); }
:is(html[data-theme="light"], html.light, html.light-mode,
    body.light, body.light-mode, [data-bs-theme="light"]) .nr-addr,
:is(html[data-theme="light"], html.light, html.light-mode,
    body.light, body.light-mode, [data-bs-theme="light"]) .nr-title { color: var(--nv-muted); }
:is(html[data-theme="light"], html.light, html.light-mode,
    body.light, body.light-mode, [data-bs-theme="light"]) .nav-end-btn {
  border-color: var(--nv-line); color: var(--nv-muted);
}

/* ===== Light mode: white text/icons on gold backgrounds ===== */

/* Gold chip, turn arrow, NEXT tag, current-stop dot */
:is(html[data-theme="light"], html.light, html.light-mode,
    body.light, body.light-mode, [data-bs-theme="light"]) .nav-chip,
:is(html[data-theme="light"], html.light, html.light-mode,
    body.light, body.light-mode, [data-bs-theme="light"]) .nav-arrow,
:is(html[data-theme="light"], html.light, html.light-mode,
    body.light, body.light-mode, [data-bs-theme="light"]) .nr-tag,
:is(html[data-theme="light"], html.light, html.light-mode,
    body.light, body.light-mode, [data-bs-theme="light"]) .nr-stop.current .nr-dot,
:is(html[data-theme="light"], html.light, html.light-mode,
    body.light, body.light-mode, [data-bs-theme="light"]) .shop-pin-badge {
  color: #fff;
}

/* Gold gradient buttons (nav action + "Drive to"), use the same deeper gold as the chip */
:is(html[data-theme="light"], html.light, html.light-mode,
    body.light, body.light-mode, [data-bs-theme="light"]) .nav-action-btn,
:is(html[data-theme="light"], html.light, html.light-mode,
    body.light, body.light-mode, [data-bs-theme="light"]) .btn-drive-to {
  background: var(--gold);
  color: #fff;
}

/* Floating chat button, chat header and send button (these use inline styles, so !important) */
:is(html[data-theme="light"], html.light, html.light-mode,
    body.light, body.light-mode, [data-bs-theme="light"]) #chatBtn {
  background: var(--gold) !important;
}
:is(html[data-theme="light"], html.light, html.light-mode,
    body.light, body.light-mode, [data-bs-theme="light"]) #chatBtn i,
:is(html[data-theme="light"], html.light, html.light-mode,
    body.light, body.light-mode, [data-bs-theme="light"]) #chatPanel > div:first-child,
:is(html[data-theme="light"], html.light, html.light-mode,
    body.light, body.light-mode, [data-bs-theme="light"]) #chatPanel > div:first-child * {
  color: #fff !important;
}
:is(html[data-theme="light"], html.light, html.light-mode,
    body.light, body.light-mode, [data-bs-theme="light"]) #chatPanel > div:first-child {
  background: var(--gold) !important;
}
:is(html[data-theme="light"], html.light, html.light-mode,
    body.light, body.light-mode, [data-bs-theme="light"]) #chatPanel button[onclick="sendChat()"] {
  background: var(--gold) !important;
  color: #fff !important;
}

/* ── Driver wallet: bank selector, light mode override ── */
:is([data-theme="light"], [data-bs-theme="light"], .light, .light-mode, .theme-light) #po-bank {
    color-scheme: light;                      /* makes the native dropdown list light too */
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #d9d9d9 !important;
    -webkit-appearance: none;
    appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px 8px !important;
}

:is([data-theme="light"], [data-bs-theme="light"], .light, .light-mode, .theme-light) #po-bank:focus {
    outline: none;
    border-color: var(--gold, #c8a96e) !important;
}

:is([data-theme="light"], [data-bs-theme="light"], .light, .light-mode, .theme-light) #po-bank option {
    background-color: #ffffff;
    color: #1a1a1a;
}

/* ── Bank modal: Personal/Business + ID/Passport chips, light mode ── */
:is([data-theme="light"], [data-bs-theme="light"], .light, .light-mode, .theme-light) #po-typeRow .chip:not(.active),
:is([data-theme="light"], [data-bs-theme="light"], .light, .light-mode, .theme-light) #po-docTypeRow .chip:not(.active) {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #d9d9d9 !important;
}

:is([data-theme="light"], [data-bs-theme="light"], .light, .light-mode, .theme-light) #po-typeRow .chip:not(.active):hover,
:is([data-theme="light"], [data-bs-theme="light"], .light, .light-mode, .theme-light) #po-docTypeRow .chip:not(.active):hover {
    background-color: #f5f5f5 !important;
    border-color: var(--gold, #c8a96e) !important;
}

/* Light theme overrides for Payment Method tiles */
[data-theme="light"] .pm-method,
body.light-theme .pm-method,
body.light-mode .pm-method {
    background-color: var(--gold, #c9a84c) !important;
    background: var(--gold, #c9a84c) !important;
    border-color: var(--gold, #c9a84c) !important;
}

[data-theme="light"] .pm-method-text h4,
[data-theme="light"] .pm-method-text p,
[data-theme="light"] .pm-brands,
[data-theme="light"] .pm-method-icon,
body.light-theme .pm-method-text h4,
body.light-theme .pm-method-text p,
body.light-theme .pm-brands,
body.light-theme .pm-method-icon,
body.light-mode .pm-method-text h4,
body.light-mode .pm-method-text p,
body.light-mode .pm-brands,
body.light-mode .pm-method-icon {
    color: #ffffff !important;
}

/* Ensure icons inside the gold container inherit white */
[data-theme="light"] .pm-method-icon,
body.light-theme .pm-method-icon,
body.light-mode .pm-method-icon {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* Force White Text and Icons on Proceed Payment Button Regardless of Theme */
.pm-btn,
.pm-btn *,
.pm-btn i,
.pm-btn .pm-btn-text,
[data-theme="light"] .pm-btn,
[data-theme="light"] .pm-btn *,
[data-theme="dark"] .pm-btn,
[data-theme="dark"] .pm-btn * {
    color: #ffffff !important;
}

/* Support Page Light Theme Overrides */
[data-theme="light"] .s-card,
[data-theme="light"] .support-hero,
[data-theme="light"] .ticket-item,
[data-theme="light"] .chat-section,
[data-theme="light"] .chip,
body.light-theme .s-card,
body.light-theme .support-hero,
body.light-theme .ticket-item,
body.light-theme .chat-section,
body.light-theme .chip,
body.light-mode .s-card,
body.light-mode .support-hero,
body.light-mode .ticket-item,
body.light-mode .chat-section,
body.light-mode .chip {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

/* Light Theme Input & Select Fields */
[data-theme="light"] .form-control-custom,
[data-theme="light"] select.form-control-custom,
[data-theme="light"] textarea.form-control-custom,
[data-theme="light"] .chat-input,
body.light-theme .form-control-custom,
body.light-theme select.form-control-custom,
body.light-theme textarea.form-control-custom,
body.light-theme .chat-input,
body.light-mode .form-control-custom,
body.light-mode select.form-control-custom,
body.light-mode textarea.form-control-custom,
body.light-mode .chat-input {
    background-color: #f8fafc !important;
    color: #1e293b !important;
    border-color: #cbd5e1 !important;
}

/* Option Dropdown List Background */
[data-theme="light"] select.form-control-custom option,
body.light-theme select.form-control-custom option,
body.light-mode select.form-control-custom option {
    background-color: #ffffff !important;
    color: #1e293b !important;
}

/* Chat Received Messages & Header Elements */
[data-theme="light"] .chat-header,
[data-theme="light"] .chat-input-area,
[data-theme="light"] .chat-msg.received,
body.light-theme .chat-header,
body.light-theme .chat-input-area,
body.light-theme .chat-msg.received,
body.light-mode .chat-header,
body.light-mode .chat-input-area,
body.light-mode .chat-msg.received {
    background-color: #f1f5f9 !important;
    color: #1e293b !important;
    border-color: #e2e8f0 !important;
}

/* Text and Label Visibility */
[data-theme="light"] .s-card-header h2,
[data-theme="light"] .ticket-title,
[data-theme="light"] .chat-header h3,
[data-theme="light"] .form-label,
body.light-theme .s-card-header h2,
body.light-theme .ticket-title,
body.light-theme .chat-header h3,
body.light-theme .form-label,
body.light-mode .s-card-header h2,
body.light-mode .ticket-title,
body.light-mode .chat-header h3,
body.light-mode .form-label {
    color: #1e293b !important;
}

/* Light Theme Back Button Color Override */
[data-theme="light"] .back-btn,
body.light-theme .back-btn,
body.light-mode .back-btn {
    background-color: #ffffff !important;
    color: #111111 !important;
    border: 1px solid #dcdcdc !important;
}

[data-theme="light"] .back-btn:hover,
body.light-theme .back-btn:hover,
body.light-mode .back-btn:hover {
    background-color: #f8fafc !important;
    color: var(--gold, #c9a84c) !important;
    border-color: var(--gold, #c9a84c) !important;
}

/* Quantity Row & Controls Light Theme Override */
[data-theme="light"] .qtyRow,
body.light-theme .qtyRow,
body.light-mode .qtyRow {
    background-color: var(--gold, #c9a84c) !important;
    border-color: var(--gold, #c9a84c) !important;
}

[data-theme="light"] .qtyRow *,
[data-theme="light"] .qtyBtn,
[data-theme="light"] .qtyVal,
body.light-theme .qtyRow *,
body.light-mode .qtyRow * {
    color: #ffffff !important;
}

[data-theme="light"] .qtyBtn:disabled,
body.light-theme .qtyBtn:disabled,
body.light-mode .qtyBtn:disabled {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Home & Add Custom Location Option Rows Light Theme Override */
[data-theme="light"] .radioRow,
body.light-theme .radioRow,
body.light-mode .radioRow {
    background-color: var(--gold, #c9a84c) !important;
    border-color: var(--gold, #c9a84c) !important;
}

[data-theme="light"] .radioRow span,
[data-theme="light"] .radioRow *,
body.light-theme .radioRow *,
body.light-mode .radioRow * {
    color: #ffffff !important;
}

[data-theme="light"] .radioDot,
body.light-theme .radioDot,
body.light-mode .radioDot {
    border-color: #ffffff !important;
}

[data-theme="light"] .radioDot.filled::after,
body.light-theme .radioDot.filled::after,
body.light-mode .radioDot.filled::after {
    background-color: #ffffff !important;
}

/* OPTION B: FAINT GOLD SHAPES (Uncomment this and comment out Option A if you prefer gold) */
/*
[data-theme="light"] body {
  background-color: #ffffff !important;
  background-image: linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)), 
                    linear-gradient(rgba(168, 121, 12, 0.15), rgba(168, 121, 12, 0.15)) !important;
}
*/

body {
  color: var(--text);
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Ensure wrappers stay transparent so background shows through */
.main-content, .dash-content {
  background-color: transparent !important;
}

.card, .surface, .panel, .modal, .drawer,
input, select, textarea, button {
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}