/* ==========================================================================
   theme-options.css - the style OPTIONS a Super Admin can mix in any theme
   (Admin -> Appearance). Loaded after style.css / site.css and before
   themes/<key>.css. Every rule is keyed on a <body> class printed by
   theme_body_class() in includes/themes.php:
     btn-{rounded|pill|square}   cards-{shadow|outline|flat}
     header-{light|dark|brand}   nav-{inline|centered}   footer-{dark|light}
     sidebar-{dark|light|brand}  track-{standard|compact}  mode-{light|dark|auto}
   Colours always come from the CSS variables in theme_css.php.
   ========================================================================== */

/* Off-screen slides (testimonial slider) must never cause sideways scrolling. 'clip' keeps sticky headers working. */
body.public main { overflow-x: clip; }

/* ---------- corner radius from the theme (buttons + cards) ---------- */
.btn, .btn-small, .bell, .pager a, .seg { border-radius: var(--btn-radius); }
.card, .kpi, .service-card, .contact-card, .slide, .stat-tile, .modal-box, .msg-panel-box .inbox li { border-radius: var(--card-radius); }
.stats-grid { border-radius: var(--card-radius); }
.btn-pill .track-glass-row { border-radius: 999px; padding-left: .8rem; }
.btn-pill .track-glass { border-radius: 28px; }
.btn-square .track-glass, .btn-square .track-glass-row { border-radius: 2px; }
.btn-square input, .btn-square select, .btn-square textarea { border-radius: 2px; }

/* ---------- cards ---------- */
/* shadow = the default look of style.css / site.css */
.cards-outline .card, .cards-outline .kpi, .cards-outline .service-card, .cards-outline .contact-card,
.cards-outline .slide, .cards-outline .stats-grid {
  box-shadow: none; border: 1px solid var(--border);
}
.cards-outline .service-card:hover, .cards-outline .contact-card:hover, .cards-outline .kpi:hover { box-shadow: none; border-color: var(--accent); }
.cards-flat .card, .cards-flat .kpi, .cards-flat .service-card, .cards-flat .contact-card,
.cards-flat .slide, .cards-flat .stats-grid {
  box-shadow: none; border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.cards-flat .service-card:hover, .cards-flat .contact-card:hover, .cards-flat .kpi:hover { transform: none; box-shadow: none; }

/* ---------- public header ---------- */
.header-dark .topbar:not(.topbar-over), .header-dark .topbar-over.is-scrolled,
.header-dark .topbar-over:is(.nav-open, :has(.nav-toggle:checked)) {
  background: color-mix(in srgb, var(--primary) 82%, #000); border-bottom-color: rgba(255, 255, 255, .08);
}
.header-brand .topbar:not(.topbar-over), .header-brand .topbar-over.is-scrolled,
.header-brand .topbar-over:is(.nav-open, :has(.nav-toggle:checked)) {
  background: var(--primary); border-bottom-color: rgba(255, 255, 255, .12);
}
:is(.header-dark, .header-brand) .topbar .logo,
:is(.header-dark, .header-brand) .topbar .mainnav a:not(.btn) { color: #fff; }
:is(.header-dark, .header-brand) .topbar .nav-burger span { background: #fff; }
:is(.header-dark, .header-brand) .topbar .bell { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .25); }
:is(.header-dark, .header-brand) .topbar .bell-count { border-color: transparent; }
/* The phone menu panel uses the same colour as its bar. */
.header-dark .topbar { --nav-bg: color-mix(in srgb, var(--primary) 82%, #000); --nav-fg: #fff; }
.header-brand .topbar { --nav-bg: var(--primary); --nav-fg: #fff; }

/* Centred navigation: logo on top, menu underneath (computers - phones and tablets use the drop-down menu). */
@media (min-width: 960px) {
  .nav-centered .topbar-inner { flex-direction: column; justify-content: center; gap: .35rem; padding-top: .8rem; padding-bottom: .8rem; }
  .nav-centered .topbar.is-scrolled .topbar-inner { padding-top: .5rem; padding-bottom: .5rem; }
  .nav-centered .mainnav { justify-content: center; }
  .nav-centered .hero { padding-top: 170px; }
}

/* ---------- footer ---------- */
.footer-light .footer { background: var(--surface); color: var(--muted); border-top: 1px solid var(--border); }
.footer-light .footer a, .footer-light .footer .logo-light { color: var(--text); }
.footer-light .footer a:hover { color: var(--primary); }
.footer-light .footer h4 { color: var(--text); }
.footer-light .muted-light, .footer-light .copyright { color: var(--muted); }
.footer-light .copyright { border-top-color: var(--border); }
.footer-light .footer .btn-accent { color: #1b1300; }

/* ---------- admin sidebar ---------- */
.sidebar-light .sidebar { background: var(--surface); color: var(--text); border-right: 1px solid var(--border); }
.sidebar-light .sidebar .logo-light { color: var(--text); }
.sidebar-light .sidebar nav a { color: var(--muted); }
.sidebar-light .sidebar nav a:hover { background: var(--primary-soft); color: var(--text); }
.sidebar-light .sidebar nav a.active { background: var(--primary); color: #fff; box-shadow: none; }
.sidebar-light .sidebar nav .nav-label { color: var(--muted); }
.sidebar-light .sidebar-user { border-top-color: var(--border); }
.sidebar-light .sidebar-user .who strong { color: var(--text); }
.sidebar-light .sidebar-user .link-btn, .sidebar-light .side-close { color: var(--muted); }
.sidebar-light .sidebar-user .link-btn:hover { color: var(--text); }
.sidebar-brand .sidebar { background: linear-gradient(180deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 80%, #000) 100%); color: rgba(255, 255, 255, .85); }
.sidebar-brand .sidebar nav a { color: rgba(255, 255, 255, .78); }
.sidebar-brand .sidebar nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.sidebar-brand .sidebar nav a.active { background: rgba(255, 255, 255, .16); box-shadow: inset 3px 0 0 var(--accent); }
.sidebar-brand .sidebar nav .nav-label { color: rgba(255, 255, 255, .5); }
.sidebar-brand .sidebar-user { border-top-color: rgba(255, 255, 255, .15); }
.sidebar-brand .sidebar-user .link-btn { color: rgba(255, 255, 255, .7); }

/* ---------- tracking page layout ---------- */
.track-compact .track-hero { padding: 2.4rem 0 4.8rem; }
.track-compact .track-hero .container, .track-compact .track-result .container { max-width: 980px; }
.track-compact .map-lg { height: 320px; }
.track-compact .status-card { padding: 1.3rem; }

/* ---------- draft preview banner (includes/views/preview_banner.php) ---------- */
.preview-banner {
  position: sticky; top: 0; z-index: 5000; height: 36px; display: flex; align-items: center; justify-content: center; gap: 1rem;
  padding: 0 16px; background: #111827; color: #fde68a; font: 500 .82rem/1 system-ui, 'Segoe UI', Arial, sans-serif;
  white-space: nowrap; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.preview-banner > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; display: inline-flex; align-items: center; gap: .4rem; }
.preview-banner a, .preview-banner .link-btn { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-size: .82rem; flex: none; }
.preview-banner form { margin: 0; flex: none; }
body:has(.preview-banner) .topbar { top: 36px; }
body:has(.preview-banner) .topbar-over { top: 36px; }
body:has(.preview-banner) .sidebar { top: 36px; }
@media (max-width: 599px) { .preview-banner > span strong ~ * { display: none; } .preview-banner { gap: .7rem; font-size: .75rem; } }

/* ==========================================================================
   DARK MODE  (mode-dark always, mode-auto when the device is set to dark).
   theme_css.php already switches the colour variables; these rules fix the
   places in style.css / site.css that use fixed light colours.
   The printable receipt (receipt.css) is never themed dark.
   ========================================================================== */
/* :where() = zero extra specificity: theme files (loaded later) can still restyle these. */
:where(body.mode-dark) { --primary-soft: rgba(255, 255, 255, .07); --accent-soft: rgba(255, 255, 255, .08); color-scheme: dark; }
:where(body.mode-dark).admin-body { background: var(--background); }
:where(body.mode-dark) input, :where(body.mode-dark) select, :where(body.mode-dark) textarea { background: #0d1526; color: var(--text); border-color: var(--border); }
:where(body.mode-dark) input::placeholder, :where(body.mode-dark) textarea::placeholder { color: #64748b; }
:where(body.mode-dark) label { color: #cbd5e1; }
:where(body.mode-dark) a { color: color-mix(in srgb, var(--primary) 50%, #fff); }
/* In dark mode the primary colour is lightened, so text on it is dark. */
:where(body.mode-dark) .btn, :where(body.mode-dark) .btn:hover, :where(body.mode-dark) .sidebar nav a.active, :where(body.mode-dark) .pager a.active, :where(body.mode-dark) .seg button.active, :where(body.mode-dark) .avatar { color: #0b1120; }
:where(body.mode-dark) .btn-danger, :where(body.mode-dark) .btn-danger:hover { color: #fff; }
/* Big brand-coloured areas use a deep mix of the secondary colour instead of the lightened primary. */
:where(body.mode-dark).header-dark .topbar:not(.topbar-over), :where(body.mode-dark).header-dark .topbar-over.is-scrolled,
:where(body.mode-dark).header-brand .topbar:not(.topbar-over), :where(body.mode-dark).header-brand .topbar-over.is-scrolled { background: color-mix(in srgb, var(--secondary) 55%, #050a14); }
:where(body.mode-dark).sidebar-brand .sidebar, :where(body.mode-dark) .kpi-main { background: color-mix(in srgb, var(--secondary) 55%, #050a14); }
:where(body.mode-dark).sidebar-brand .sidebar nav a.active { color: #fff; }
:where(body.mode-dark) .btn-outline { color: var(--text); border-color: var(--border); background: transparent; }
:where(body.mode-dark) .btn-outline:hover { background: rgba(255, 255, 255, .08); color: #fff; }
:where(body.mode-dark) .btn-accent, :where(body.mode-dark) .btn-accent:hover { color: #1b1300; }
:where(body.mode-dark) .alert a { color: inherit; }
:where(body.mode-dark) code { background: rgba(255, 255, 255, .06); }
/* header */
:where(body.mode-dark).header-light .topbar:not(.topbar-over), :where(body.mode-dark).header-light .topbar-over.is-scrolled { background: rgba(17, 26, 46, .92); border-bottom-color: var(--border); }
:where(body.mode-dark) .bell { background: var(--surface); border-color: var(--border); color: var(--text); }
:where(body.mode-dark) .bell-count, :where(body.mode-dark) .lock-badge b, :where(body.mode-dark) .step-num { border-color: var(--surface); }
/* public sections */
:where(body.mode-dark) .section-alt, :where(body.mode-dark) .stat, :where(body.mode-dark) .service-card, :where(body.mode-dark) .contact-card, :where(body.mode-dark) .slide { background: var(--surface); }
:where(body.mode-dark) .service-img { background: #1e293b; }
:where(body.mode-dark) .step-icon, :where(body.mode-dark) .step-icon { background: var(--surface); }
:where(body.mode-dark) .contact-icon, :where(body.mode-dark) .lock-badge, :where(body.mode-dark) .status-icon, :where(body.mode-dark) .kpi .kpi-icon { background: rgba(255, 255, 255, .06); color: color-mix(in srgb, var(--primary) 45%, #fff); }
:where(body.mode-dark) .slider-dots button { background: #334155; }
:where(body.mode-dark) .track-glass-row { background: var(--surface); }
:where(body.mode-dark) .stats-grid { background: var(--border); }
/* tracking page */
:where(body.mode-dark) .progress-track { background: repeating-linear-gradient(90deg, #1e293b 0 10px, #243147 10px 20px); }
:where(body.mode-dark) .progress-vehicle, :where(body.mode-dark) .tl-dot { background: var(--surface); }
:where(body.mode-dark) .tl-done .tl-dot { background: var(--success); }
:where(body.mode-dark) .tl-current .tl-dot { background: var(--accent); }
:where(body.mode-dark) .tl-todo .tl-label, :where(body.mode-dark) .tl-skipped .tl-label { color: #64748b; }
:where(body.mode-dark) .history-note { background: rgba(255, 255, 255, .05); }
:where(body.mode-dark) .safety-note { background: rgba(255, 255, 255, .05); color: #cbd5e1; }
:where(body.mode-dark) .msg-panel-box { background: var(--surface); }
:where(body.mode-dark) .msg-close { color: var(--text); }
:where(body.mode-dark) .inbox li { background: rgba(255, 255, 255, .03); }
:where(body.mode-dark) .inbox li.is-new { background: rgba(245, 165, 36, .08); }
:where(body.mode-dark) .inbox .reply-list li { background: rgba(120, 170, 255, .08); }
:where(body.mode-dark) .map { border-color: var(--border); }
/* admin */
:where(body.mode-dark) .kpi, :where(body.mode-dark) .burger-btn, :where(body.mode-dark) .pager a, :where(body.mode-dark) .modal-box, :where(body.mode-dark) .seg button, :where(body.mode-dark) .stat-tile, :where(body.mode-dark) .chip, :where(body.mode-dark) .file-drop-icon { background: var(--surface); color: var(--text); }
:where(body.mode-dark) .kpi { color: var(--muted); }
:where(body.mode-dark) .table th { background: rgba(255, 255, 255, .04); }
:where(body.mode-dark) .table tbody tr:hover { background: rgba(255, 255, 255, .03); }
:where(body.mode-dark) .activity code { background: rgba(255, 255, 255, .06); }
:where(body.mode-dark) .activity .dot { box-shadow: 0 0 0 4px rgba(255, 255, 255, .06); }
:where(body.mode-dark) .file-drop, :where(body.mode-dark) .copy-field input, :where(body.mode-dark) .email-preview-wrap { background: #0d1526; border-color: var(--border); }
:where(body.mode-dark) .copy-field input { color: var(--text); }
:where(body.mode-dark) .file-drop-count { background: rgba(255, 255, 255, .08); }
:where(body.mode-dark) .tabs a.active { color: var(--text); border-bottom-color: var(--accent); }
:where(body.mode-dark) .seg button.active { background: var(--primary); color: #0b1120; }
:where(body.mode-dark) .access-code { background: rgba(245, 165, 36, .15); color: #fcd34d; }
:where(body.mode-dark) .sidebar { box-shadow: inset -1px 0 0 var(--border); }
:where(body.mode-dark) .toast-stack .alert { border-color: rgba(255, 255, 255, .08); }
:where(body.mode-dark) .map-notice { background: rgba(17, 26, 46, .92); color: #cbd5e1; }

@media (prefers-color-scheme: dark) {
  :where(body.mode-auto) { --primary-soft: rgba(255, 255, 255, .07); --accent-soft: rgba(255, 255, 255, .08); color-scheme: dark; }
  :where(body.mode-auto).admin-body { background: var(--background); }
  :where(body.mode-auto) input, :where(body.mode-auto) select, :where(body.mode-auto) textarea { background: #0d1526; color: var(--text); border-color: var(--border); }
  :where(body.mode-auto) input::placeholder, :where(body.mode-auto) textarea::placeholder { color: #64748b; }
  :where(body.mode-auto) label { color: #cbd5e1; }
  :where(body.mode-auto) a { color: color-mix(in srgb, var(--primary) 50%, #fff); }
  /* In dark mode the primary colour is lightened, so text on it is dark. */
  :where(body.mode-auto) .btn, :where(body.mode-auto) .btn:hover, :where(body.mode-auto) .sidebar nav a.active, :where(body.mode-auto) .pager a.active, :where(body.mode-auto) .seg button.active, :where(body.mode-auto) .avatar { color: #0b1120; }
  :where(body.mode-auto) .btn-danger, :where(body.mode-auto) .btn-danger:hover { color: #fff; }
  /* Big brand-coloured areas use a deep mix of the secondary colour instead of the lightened primary. */
  :where(body.mode-auto).header-dark .topbar:not(.topbar-over), :where(body.mode-auto).header-dark .topbar-over.is-scrolled,
  :where(body.mode-auto).header-brand .topbar:not(.topbar-over), :where(body.mode-auto).header-brand .topbar-over.is-scrolled { background: color-mix(in srgb, var(--secondary) 55%, #050a14); }
  :where(body.mode-auto).sidebar-brand .sidebar, :where(body.mode-auto) .kpi-main { background: color-mix(in srgb, var(--secondary) 55%, #050a14); }
  :where(body.mode-auto).sidebar-brand .sidebar nav a.active { color: #fff; }
  :where(body.mode-auto) .btn-outline { color: var(--text); border-color: var(--border); background: transparent; }
  :where(body.mode-auto) .btn-outline:hover { background: rgba(255, 255, 255, .08); color: #fff; }
  :where(body.mode-auto) .btn-accent, :where(body.mode-auto) .btn-accent:hover { color: #1b1300; }
  :where(body.mode-auto) .alert a { color: inherit; }
  :where(body.mode-auto) code { background: rgba(255, 255, 255, .06); }
  /* header */
  :where(body.mode-auto).header-light .topbar:not(.topbar-over), :where(body.mode-auto).header-light .topbar-over.is-scrolled { background: rgba(17, 26, 46, .92); border-bottom-color: var(--border); }
  :where(body.mode-auto) .bell { background: var(--surface); border-color: var(--border); color: var(--text); }
  :where(body.mode-auto) .bell-count, :where(body.mode-auto) .lock-badge b, :where(body.mode-auto) .step-num { border-color: var(--surface); }
  /* public sections */
  :where(body.mode-auto) .section-alt, :where(body.mode-auto) .stat, :where(body.mode-auto) .service-card, :where(body.mode-auto) .contact-card, :where(body.mode-auto) .slide { background: var(--surface); }
  :where(body.mode-auto) .service-img { background: #1e293b; }
  :where(body.mode-auto) .step-icon, :where(body.mode-auto) .step-icon { background: var(--surface); }
  :where(body.mode-auto) .contact-icon, :where(body.mode-auto) .lock-badge, :where(body.mode-auto) .status-icon, :where(body.mode-auto) .kpi .kpi-icon { background: rgba(255, 255, 255, .06); color: color-mix(in srgb, var(--primary) 45%, #fff); }
  :where(body.mode-auto) .slider-dots button { background: #334155; }
  :where(body.mode-auto) .track-glass-row { background: var(--surface); }
  :where(body.mode-auto) .stats-grid { background: var(--border); }
  /* tracking page */
  :where(body.mode-auto) .progress-track { background: repeating-linear-gradient(90deg, #1e293b 0 10px, #243147 10px 20px); }
  :where(body.mode-auto) .progress-vehicle, :where(body.mode-auto) .tl-dot { background: var(--surface); }
  :where(body.mode-auto) .tl-done .tl-dot { background: var(--success); }
  :where(body.mode-auto) .tl-current .tl-dot { background: var(--accent); }
  :where(body.mode-auto) .tl-todo .tl-label, :where(body.mode-auto) .tl-skipped .tl-label { color: #64748b; }
  :where(body.mode-auto) .history-note { background: rgba(255, 255, 255, .05); }
  :where(body.mode-auto) .safety-note { background: rgba(255, 255, 255, .05); color: #cbd5e1; }
  :where(body.mode-auto) .msg-panel-box { background: var(--surface); }
  :where(body.mode-auto) .msg-close { color: var(--text); }
  :where(body.mode-auto) .inbox li { background: rgba(255, 255, 255, .03); }
  :where(body.mode-auto) .inbox li.is-new { background: rgba(245, 165, 36, .08); }
  :where(body.mode-auto) .inbox .reply-list li { background: rgba(120, 170, 255, .08); }
  :where(body.mode-auto) .map { border-color: var(--border); }
  /* admin */
  :where(body.mode-auto) .kpi, :where(body.mode-auto) .burger-btn, :where(body.mode-auto) .pager a, :where(body.mode-auto) .modal-box, :where(body.mode-auto) .seg button, :where(body.mode-auto) .stat-tile, :where(body.mode-auto) .chip, :where(body.mode-auto) .file-drop-icon { background: var(--surface); color: var(--text); }
  :where(body.mode-auto) .kpi { color: var(--muted); }
  :where(body.mode-auto) .table th { background: rgba(255, 255, 255, .04); }
  :where(body.mode-auto) .table tbody tr:hover { background: rgba(255, 255, 255, .03); }
  :where(body.mode-auto) .activity code { background: rgba(255, 255, 255, .06); }
  :where(body.mode-auto) .activity .dot { box-shadow: 0 0 0 4px rgba(255, 255, 255, .06); }
  :where(body.mode-auto) .file-drop, :where(body.mode-auto) .copy-field input, :where(body.mode-auto) .email-preview-wrap { background: #0d1526; border-color: var(--border); }
  :where(body.mode-auto) .copy-field input { color: var(--text); }
  :where(body.mode-auto) .file-drop-count { background: rgba(255, 255, 255, .08); }
  :where(body.mode-auto) .tabs a.active { color: var(--text); border-bottom-color: var(--accent); }
  :where(body.mode-auto) .seg button.active { background: var(--primary); color: #0b1120; }
  :where(body.mode-auto) .access-code { background: rgba(245, 165, 36, .15); color: #fcd34d; }
  :where(body.mode-auto) .sidebar { box-shadow: inset -1px 0 0 var(--border); }
  :where(body.mode-auto) .toast-stack .alert { border-color: rgba(255, 255, 255, .08); }
  :where(body.mode-auto) .map-notice { background: rgba(17, 26, 46, .92); color: #cbd5e1; }

}

/* Map without tiles (no MapTiler key / tiles refused) in dark mode: a dark plain background
   instead of Leaflet's light grey, so the route lines and markers sit on a calm surface. */
body.mode-dark .map.map-no-tiles { background-color: #162033; }
@media (prefers-color-scheme: dark) { body.mode-auto .map.map-no-tiles { background-color: #162033; } }

/* ---------- phone menu panel colours in dark mode (match the darker bars above) ---------- */
:where(body.mode-dark).header-dark .topbar, :where(body.mode-dark).header-brand .topbar { --nav-bg: color-mix(in srgb, var(--secondary) 55%, #050a14); }
:where(body.mode-dark).header-dark .topbar-over:is(.nav-open, :has(.nav-toggle:checked)),
:where(body.mode-dark).header-brand .topbar-over:is(.nav-open, :has(.nav-toggle:checked)) { background: var(--nav-bg); }
@media (prefers-color-scheme: dark) {
  :where(body.mode-auto).header-dark .topbar, :where(body.mode-auto).header-brand .topbar { --nav-bg: color-mix(in srgb, var(--secondary) 55%, #050a14); }
  :where(body.mode-auto).header-dark .topbar-over:is(.nav-open, :has(.nav-toggle:checked)),
  :where(body.mode-auto).header-brand .topbar-over:is(.nav-open, :has(.nav-toggle:checked)) { background: var(--nav-bg); }
}