/* Haulence staff app: dark theme. Loaded after styles.css, admin.css and lm.css; active only when <html data-theme="dark"> (theme.js).
   Dark surfaces are neutral slate (not a heavy navy block); blue stays the dominant accent, orange stays reserved for key actions/status.
   Text/surface pairs target WCAG AA (4.5:1 body, 3:1 large/UI). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --lm-navy: #E7ECF6; --lm-bg: #0C1220; --lm-surface: #141B2B; --lm-surface-2: #1A2335; --lm-border: #28334B; --lm-text: #E7ECF6; --lm-muted: #A3B0C9;
  --lm-primary: #2368CF; --lm-secondary: #4C9BFF; --lm-link: #7DB6FF; --lm-accent: #2FCBFF;
  --lm-ok: #43C79A; --lm-warn: #F2A33A; --lm-bad: #FF8A73;
  --lm-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .28);
  --blue: var(--lm-primary); --ink: var(--lm-text); --mute: var(--lm-muted); --rule: var(--lm-border); --canvas: var(--lm-bg);
  /* inherited styles.css variables */
  --bg: var(--lm-surface); --alt: var(--lm-surface-2); --text: var(--lm-text); --muted: var(--lm-muted); --line: var(--lm-border); --navy: var(--lm-text);
}
[data-theme="dark"] body, [data-theme="dark"] body.admin-app, [data-theme="dark"] .admin-login-body { background: var(--lm-bg); color: var(--lm-text); }
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4 { color: var(--lm-text); }
[data-theme="dark"] a { color: var(--lm-link); }
[data-theme="dark"] ::placeholder { color: #7E8CA6; }
[data-theme="dark"] hr { border-color: var(--lm-border); }

/* ---- surfaces ---- */
[data-theme="dark"] .topbar, [data-theme="dark"] .orgbar, [data-theme="dark"] .mainnav, [data-theme="dark"] .kpi, [data-theme="dark"] .panel,
[data-theme="dark"] .modal-box, [data-theme="dark"] .cur-block, [data-theme="dark"] .fin-save, [data-theme="dark"] .mail-wrap, [data-theme="dark"] .mail-row,
[data-theme="dark"] .search-res, [data-theme="dark"] .menu-pop, [data-theme="dark"] .nav-menu, [data-theme="dark"] .sel, [data-theme="dark"] .seg-btn,
[data-theme="dark"] .app .tbl, [data-theme="dark"] .lp-card, [data-theme="dark"] .lp-step.on, [data-theme="dark"] .nqp-dock, [data-theme="dark"] .nqp-card,
[data-theme="dark"] .lmd-card, [data-theme="dark"] .lmd-kpi, [data-theme="dark"] .lmd-panel, [data-theme="dark"] .lmd-map .legend,
[data-theme="dark"] .card-form, [data-theme="dark"] .card, [data-theme="dark"] .ship, [data-theme="dark"] .track-card, [data-theme="dark"] .cl-banner,
[data-theme="dark"] .mail-moveto, [data-theme="dark"] .lmd-pager button, [data-theme="dark"] .note-pop, [data-theme="dark"] .np-pop {
  background: var(--lm-surface); color: var(--lm-text); border-color: var(--lm-border);
}
[data-theme="dark"] .modal-box, [data-theme="dark"] .search-res, [data-theme="dark"] .menu-pop, [data-theme="dark"] .nav-menu, [data-theme="dark"] .nqp-card { box-shadow: 0 18px 50px rgba(0, 0, 0, .55); }
[data-theme="dark"] .app .tbl th, [data-theme="dark"] .mail-side, [data-theme="dark"] .itile-logo, [data-theme="dark"] .lp-summary, [data-theme="dark"] .nqp-ctx,
[data-theme="dark"] .lmd-table th, [data-theme="dark"] .lp-step { background: var(--lm-surface-2); color: var(--lm-muted); border-color: var(--lm-border); }
[data-theme="dark"] .lmd-table th { color: var(--lm-muted); }
[data-theme="dark"] .lmd-table tbody tr:hover, [data-theme="dark"] .app .tbl tr:hover td, [data-theme="dark"] .fin-row:hover td, [data-theme="dark"] .fin-row:focus-visible td,
[data-theme="dark"] button.att-row:hover, [data-theme="dark"] button.lmd-kpi:hover, [data-theme="dark"] .mail-row:hover, [data-theme="dark"] .audit-row:hover,
[data-theme="dark"] .res-row:hover, [data-theme="dark"] .nav-sub:hover, [data-theme="dark"] .nav-item:hover, [data-theme="dark"] .icon-btn:hover, [data-theme="dark"] .btn-o:hover,
[data-theme="dark"] .mail-folder:hover, [data-theme="dark"] .note-row:hover { background: #1D2940; }
[data-theme="dark"] tr.unread td, [data-theme="dark"] .note-row.unread { background: #17243D; }
[data-theme="dark"] .mail-row { border-bottom-color: var(--lm-border); }
[data-theme="dark"] .mail-row.on, [data-theme="dark"] .mail-folder.on { background: #1B3358; color: var(--lm-link); }
[data-theme="dark"] .itile-logo.dark { background: #0A1020; border-color: var(--lm-border); }

/* ---- navigation ---- */
[data-theme="dark"] .nav-item { color: var(--lm-text); }
[data-theme="dark"] .nav-item svg { color: var(--lm-muted); }
[data-theme="dark"] .nav-item.active { background: #1B3358; color: var(--lm-link); border-left-color: var(--lm-secondary); }
[data-theme="dark"] .nav-item.active svg { color: var(--lm-link); }
[data-theme="dark"] .lmd-tab.on, [data-theme="dark"] .lmd-tab.on .n { color: var(--lm-link); border-bottom-color: var(--lm-secondary); }
[data-theme="dark"] .lmd-tab.on .n { background: #1B3358; }
[data-theme="dark"] .lmd-tab .n, [data-theme="dark"] .seg-n, [data-theme="dark"] .lmd-chip { background: #222E46; color: var(--lm-muted); }
[data-theme="dark"] .lmd-chip { color: #C3CDE2; }
[data-theme="dark"] .avatar, [data-theme="dark"] .ini { background: #223457; color: var(--lm-link); }
[data-theme="dark"] .orgbar .env { background: #3A2A12; color: #FFC77A; }
[data-theme="dark"] .orgbar .env.prod { background: #10392D; color: var(--lm-ok); }
[data-theme="dark"] .admin-badge { background: #223457; }

/* ---- forms and buttons ---- */
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea, [data-theme="dark"] .search input {
  background: #0F1626; color: var(--lm-text); border-color: #34415C;
}
[data-theme="dark"] .search input:focus { background: #0F1626; outline-color: var(--lm-secondary); }
[data-theme="dark"] input:disabled, [data-theme="dark"] select:disabled { background: #172033; color: var(--lm-muted); }
[data-theme="dark"] .btn-o, [data-theme="dark"] .btn-ghost-dark, [data-theme="dark"] .btn-light { background: transparent; color: var(--lm-link); border-color: #34415C; }
[data-theme="dark"] .btn-p, [data-theme="dark"] .btn-p:visited { background: var(--lm-primary); border-color: var(--lm-primary); color: #fff; }
[data-theme="dark"] .btn-p:hover { background: #3C89F2; }
[data-theme="dark"] .seg-btn.on { background: var(--lm-primary); border-color: var(--lm-primary); color: #fff; }
[data-theme="dark"] .qr-box { background: #fff; }   /* QR codes must stay black on white to scan */

/* ---- status colours ---- */
[data-theme="dark"] .pill-info, [data-theme="dark"] .kpi-blue, [data-theme="dark"] .lmd-chip.transit { background: #16325C; color: #9CC8FF; }
[data-theme="dark"] .pill-warn, [data-theme="dark"] .lmd-chip.warn, [data-theme="dark"] .lmd-chip.delayed { background: #3A2A12; color: #FFC77A; }
[data-theme="dark"] .pill-bad, [data-theme="dark"] .kpi-red, [data-theme="dark"] .lmd-chip.bad, [data-theme="dark"] .seg-btn.alert:not(.on) .seg-n { background: #3B1B1A; color: #FFA595; }
[data-theme="dark"] .kpi-green, [data-theme="dark"] .lmd-chip.ok, [data-theme="dark"] .pill-ok { background: #10392D; color: #6FE0B5; }
[data-theme="dark"] .kpi-purple, [data-theme="dark"] .lmd-chip.pickup { background: #2A2350; color: #BDB3FF; }
[data-theme="dark"] .pill-zero { background: #222E46; color: var(--lm-muted); }
[data-theme="dark"] .lmd-att-row .ic.bad, [data-theme="dark"] .lmd-att-row .ic.warn, [data-theme="dark"] .lmd-callout { background: #3A2A12; }
[data-theme="dark"] .lmd-att-row .ic.info { background: #16325C; }
[data-theme="dark"] .toast { background: #10392D; color: #8FEAC6; border-color: #1E5A46; }
[data-theme="dark"] .toast.bad { background: #3B1B1A; color: #FFB3A5; border-color: #6A2E28; }
[data-theme="dark"] .nqp-note { background: #3A2A12; color: #FFD9A0; }
[data-theme="dark"] .nqp-err { background: #3B1B1A; color: #FFB3A5; }
[data-theme="dark"] .nqp-ver.ok { background: #10392D; color: #6FE0B5; }
[data-theme="dark"] .secret-box { background: #3A2A12; border-color: #6A4A18; color: #FFE2B0; }
[data-theme="dark"] .cur-block { background: var(--lm-surface-2); }
[data-theme="dark"] .aging, [data-theme="dark"] .lmd-skel { background: linear-gradient(90deg, #1A2335 25%, #232F48 37%, #1A2335 63%); background-size: 400% 100%; }
[data-theme="dark"] .aging { background: #222E46; }
[data-theme="dark"] .mail-att, [data-theme="dark"] .mail-file, [data-theme="dark"] .lp-num { background: #222E46; color: var(--lm-text); }
[data-theme="dark"] .nqp-keys button { background: var(--lm-surface-2); border-color: var(--lm-border); color: var(--lm-text); }

/* ---- text helpers ---- */
[data-theme="dark"] .muted, [data-theme="dark"] .mute, [data-theme="dark"] small { color: var(--lm-muted); }
[data-theme="dark"] .lmd-callout, [data-theme="dark"] .lmd-callout * { color: #FFD9A0; }
[data-theme="dark"] .app .tbl th, [data-theme="dark"] .lmd-table th { border-bottom-color: var(--lm-border); }
[data-theme="dark"] .app .tbl td, [data-theme="dark"] .lmd-table td { border-color: var(--lm-border); }

/* ---- map (OpenStreetMap tiles are light only; darken them in CSS, no extra provider) ---- */
[data-theme="dark"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.9) saturate(.75); }
[data-theme="dark"] .leaflet-container { background: #121A2B; }
[data-theme="dark"] .leaflet-popup-content-wrapper, [data-theme="dark"] .leaflet-popup-tip { background: var(--lm-surface); color: var(--lm-text); }
[data-theme="dark"] .leaflet-control-attribution { background: rgba(20, 27, 43, .85) !important; color: var(--lm-muted); }
[data-theme="dark"] .leaflet-control-attribution a { color: var(--lm-link); }
[data-theme="dark"] .leaflet-bar a { background: var(--lm-surface); color: var(--lm-text); border-color: var(--lm-border); }
[data-theme="dark"] .lmd-map .empty > div { background: rgba(20, 27, 43, .94); border-color: var(--lm-border); color: var(--lm-text); }

/* ---- logo: the official artwork has an off-white background, so on dark surfaces it sits on a light plate ---- */
[data-theme="dark"] .lm-logo img { mix-blend-mode: normal; }


/* inherited button / tab / status styles that hard-code light-theme colours */
[data-theme="dark"] .btn-primary { background: #1D56A6; color: #fff; } [data-theme="dark"] .btn-primary:hover { background: #2866BA; }
[data-theme="dark"] .btn-accent { background: #1A74B8; color: #fff; } [data-theme="dark"] .btn-accent:hover { background: #2486D0; }
[data-theme="dark"] #settingsnav .pagetab, [data-theme="dark"] .phone-tabs .pagetab, [data-theme="dark"] .pagetab { color: var(--lm-muted); }
[data-theme="dark"] #settingsnav .pagetab:hover, [data-theme="dark"] #settingsnav .pagetab.on, [data-theme="dark"] .phone-tabs .pagetab:hover, [data-theme="dark"] .phone-tabs .pagetab.on { color: var(--lm-text); }
[data-theme="dark"] .msg { color: #5FD6A4; }
[data-theme="dark"] .chip-ok { background: #10392D; color: #6FE0B5; } [data-theme="dark"] .chip-warn { background: #3A2A12; color: #FFC77A; } [data-theme="dark"] .chip-bad { background: #3B1B1A; color: #FFA595; }
[data-theme="dark"] .att-label { color: var(--lm-text); } [data-theme="dark"] .att-info { color: var(--lm-link); } [data-theme="dark"] .att-warn { color: #F2A33A; } [data-theme="dark"] .att-bad { color: #FF8A73; }
[data-theme="dark"] .lmd-link, [data-theme="dark"] .fleetform a { color: var(--lm-link); }

/* theme toggle in the top bar */
.lm-theme-btn { color: var(--lm-muted); }
.lm-theme-btn:hover { color: var(--lm-text); }