/* TW LogistiQ Driver PWA — theme system + components.
 *
 * Scope: applies only to /driver/* pages. The driver app is mobile-first.
 *
 * Theme is selected via `<html data-theme="light|dark">`. The layout sets
 * this attribute synchronously in <head> from localStorage('tw-driver-theme')
 * before <body> renders, so there's no flash of the wrong palette.
 *
 * Files that read these variables:
 *   - resources/views/driver/*.blade.php
 *   - public/preview/assets/driver/app.js
 */

/* -----------------------------------------------------------------
 * Theme tokens
 * ----------------------------------------------------------------- */
:root,
:root[data-theme="dark"] {
  /* Default = dark (matches existing premium-cockpit feel) */
  --bg:                 #050A14;
  --surface:            #0A1228;
  --card:               #0F1B3D;
  --card-elev:          #0F1B3D;
  --border:             #1F2A40;
  --border-soft:        rgba(255, 255, 255, 0.05);
  --ink:                #F1F5F9;
  --ink-muted:          #94A3B8;
  --ink-faint:          #64748B;
  --accent:             #0066FF;
  --accent-strong:      #0066FF;
  --accent-soft:        rgba(0, 102, 255, 0.18);
  --accent-soft-2:      rgba(0, 102, 255, 0.08);
  --accent-ink:         #FFFFFF;
  --success:            #10B981;
  --success-soft:       rgba(16, 185, 129, 0.18);
  --warning:            #F59E0B;
  --warning-soft:       rgba(245, 158, 11, 0.16);
  --danger:             #EF4444;
  --danger-soft:        rgba(239, 68, 68, 0.16);
  --danger-ink:         #FECACA;
  --tabbar:             #050A14;
  --tabbar-border:      #1F2A40;
  --tabbar-ink:         #94A3B8;
  --tabbar-active:      #00D4FF;
  --led:                #00D4FF;
  --led-intensity:      1;
  --shadow:             0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-lg:          0 10px 30px rgba(0, 0, 0, 0.45);
  --overlay:            rgba(0, 0, 0, 0.55);
  --pill-bg:            rgba(255, 255, 255, 0.08);
  --pill-ink:           #F1F5F9;
  --topbar-bg:          #0A1228;
  --topbar-ink:         #F1F5F9;
  --link:               #00B4FF;
  --info-bg:            rgba(0, 102, 255, 0.08);
  --info-border:        rgba(0, 102, 255, 0.30);
  --info-ink:           #BFDBFE;
  --skeleton:           rgba(255, 255, 255, 0.06);
  --skeleton-2:         rgba(255, 255, 255, 0.03);
}

:root[data-theme="light"] {
  --bg:                 #FFFFFF;
  --surface:            #F8FAFC;
  --card:               #FFFFFF;
  --card-elev:          #FFFFFF;
  --border:             #E2E8F0;
  --border-soft:        #F1F5F9;
  --ink:                #0F172A;
  --ink-muted:          #475569;
  --ink-faint:          #64748B;
  --accent:             #0066FF;
  --accent-strong:      #0066FF;
  --accent-soft:        #DBEAFE;
  --accent-soft-2:      #EFF6FF;
  --accent-ink:         #FFFFFF;
  --success:            #10B981;
  --success-soft:       #D1FAE5;
  --warning:            #F59E0B;
  --warning-soft:       #FEF3C7;
  --danger:             #DC2626;
  --danger-soft:        #FEE2E2;
  --danger-ink:         #991B1B;
  --tabbar:             #FFFFFF;
  --tabbar-border:      #E2E8F0;
  --tabbar-ink:         #64748B;
  --tabbar-active:      #0066FF;
  --led:                #00B4FF;
  --led-intensity:      0.55;
  --shadow:             0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow-lg:          0 10px 30px rgba(15, 23, 42, 0.10);
  --overlay:            rgba(15, 23, 42, 0.40);
  --pill-bg:            rgba(15, 23, 42, 0.06);
  --pill-ink:           #0F172A;
  --topbar-bg:          #FFFFFF;
  --topbar-ink:         #0F172A;
  --link:               #0066FF;
  --info-bg:            #EFF6FF;
  --info-border:        #BFDBFE;
  --info-ink:           #0C4A6E;
  --skeleton:           #E2E8F0;
  --skeleton-2:         #F1F5F9;
}

/* -----------------------------------------------------------------
 * Base
 * ----------------------------------------------------------------- */
.driver-app body,
body.driver-app {
  background: var(--bg);
  color: var(--ink);
  transition: background-color 0.18s ease, color 0.18s ease;
}

/* When this stylesheet is loaded on a driver page, override the few
 * baseline driver-layout properties without forcing every consumer to
 * add the class. */
html[data-driver-app] body {
  background: var(--bg);
  color: var(--ink);
}

/* -----------------------------------------------------------------
 * Top bar (with notifications bell)
 * ----------------------------------------------------------------- */
.twt-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--topbar-bg);
  color: var(--topbar-ink);
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  /* Keep the brand row contained so the new horizontal logo can't push
     the bell / WhatsApp / avatar buttons off the right edge on narrow
     phones (this was the source of the "notifications hiding behind
     dashboard text" report — on 360-414px viewports the brand was
     growing past the topbar and the bell badge ended up overlapping
     the trips heading underneath). */
  overflow: hidden;
}

.twt-topbar .brand {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--topbar-ink);
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  /* Allow the brand to shrink first when the topbar is tight on small
     phones, so .topbar-actions (bell + WhatsApp + avatar) keeps its
     natural size and the bell badge stays fully visible. */
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
}

/* Horizontal TW LogistiQ logo in the topbar — both variants render in
   markup, .tw-logo-light / .tw-logo-dark in app.css picks the one
   matching html[data-theme]. Kept small so the topbar height (~50px)
   isn't dominated by the brand. Shrinks aggressively under 480px so the
   bell / WhatsApp / avatar trio has room. */
.twt-topbar .brand-logo {
  display: block;
  height: 30px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  flex-shrink: 1;
  min-width: 0;
}
@media (max-width: 480px) {
  .twt-topbar .brand-logo { height: 24px; max-width: 110px; }
}
@media (max-width: 360px) {
  .twt-topbar .brand-logo { height: 22px; max-width: 88px; }
}

/* Legacy brand-dot — kept for any leftover use, but the new logo block
   replaces the brand-dot + text combo on the driver topbar. */
.twt-topbar .brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--led);
}

.twt-topbar .gps-pill {
  font-size: 11px;
  background: var(--pill-bg);
  color: var(--pill-ink);
  padding: 4px 10px;
  border-radius: 999px;
}

.twt-topbar .avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
}

.twt-topbar .topbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  /* Never shrink the action trio (WhatsApp + bell + avatar). If the
     topbar is tight the brand block shrinks first; the bell + badge
     stay fully on-screen. */
  flex-shrink: 0;
}

/* Bell button */
.twt-bell {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: transparent;
  border: 0;
  color: var(--topbar-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease;
}
.twt-bell:hover { background: var(--pill-bg); }
.twt-bell:active { background: var(--accent-soft); }
.twt-bell svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.twt-bell-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--topbar-bg);
  line-height: 1;
}
.twt-bell[data-unread-count]:not([data-unread-count="0"]):not([data-unread-count=""]) .twt-bell-badge {
  display: inline-flex;
}

/* -----------------------------------------------------------------
 * Notifications panel
 *
 * Z-index note: .trip-card and .led-tile both use `isolation: isolate`
 * to keep their LED glow pseudo-element contained, which creates a
 * new stacking context per card. We push the notif panel/backdrop
 * z-indices well above any in-content stacking context so the panel
 * always lands on top of the dashboard text + cards, never behind it.
 * Brent flagged this on 2026-05-19 ("notifications getting lost behind
 * the text in the home dashboard").
 * ----------------------------------------------------------------- */
.twt-notif-backdrop {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.twt-notif-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.twt-notif-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1010;
  background: var(--surface);
  color: var(--ink);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  transform: translateY(-105%);
  transition: transform 0.22s ease;
  padding-top: env(safe-area-inset-top);
}
.twt-notif-panel.open { transform: translateY(0); }

.twt-notif-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.twt-notif-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.twt-notif-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}
.twt-notif-mark-all {
  background: none;
  border: 0;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 8px;
}
.twt-notif-mark-all:disabled { opacity: 0.5; cursor: default; }
.twt-notif-close {
  background: none;
  border: 0;
  color: var(--ink-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

.twt-notif-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}
.twt-notif-item {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.12s;
}
.twt-notif-item:hover,
.twt-notif-item:active { background: var(--accent-soft-2); }
.twt-notif-item.unread {
  background: var(--accent-soft-2);
}
.twt-notif-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.twt-notif-body { flex: 1; min-width: 0; }
.twt-notif-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 2px;
}
.twt-notif-text {
  font-size: 13px;
  color: var(--ink-muted);
  margin: 0;
  word-wrap: break-word;
}
.twt-notif-time {
  font-size: 11px;
  color: var(--ink-faint);
  margin-top: 4px;
}
.twt-notif-unread-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  margin-top: 14px;
  visibility: hidden;
}
.twt-notif-item.unread .twt-notif-unread-dot { visibility: visible; }

.twt-notif-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--ink-muted);
  font-size: 14px;
}
.twt-notif-empty .empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background: var(--success-soft);
  color: var(--success);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.twt-notif-empty .empty-icon svg { width: 28px; height: 28px; }

.twt-notif-loading,
.twt-notif-error {
  text-align: center;
  padding: 36px 24px;
  color: var(--ink-muted);
  font-size: 13px;
}
.twt-notif-error { color: var(--danger); }

/* -----------------------------------------------------------------
 * WhatsApp shortcut — topbar icon + slide-down panel (driver-side)
 *
 * Shares button + panel chrome with the bell via .twt-bell and
 * .twt-notif-panel. The .twt-wa-* selectors override only the
 * details that differ (green badge, custom panel body).
 * ----------------------------------------------------------------- */
.twt-wa svg {
  /* The path uses fill="none" stroke="currentColor" via the body
     default `.twt-bell svg` rule — same look as the bell. */
}
.twt-wa-badge {
  background: var(--success, #25D366);
}

.twt-wa-panel .twt-wa-body {
  padding: 18px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.twt-wa-thread-hint {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--success-soft);
  color: var(--ink);
  font-size: 14px;
}
.twt-wa-thread-hint.subtle {
  background: var(--accent-soft-2);
}
.twt-wa-thread-hint .twt-wa-thread-sub {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 4px;
}
.twt-wa-thread-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin-bottom: 4px;
}
.twt-wa-thread-preview {
  font-size: 13px;
  color: var(--ink);
  word-wrap: break-word;
}

.twt-wa-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--success, #25D366);
  color: #fff;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 600;
  transition: filter 0.15s ease;
  min-height: 56px;
}
.twt-wa-cta:active { filter: brightness(0.92); }
.twt-wa-cta-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.twt-wa-cta-icon svg { width: 20px; height: 20px; stroke: #fff; fill: none; }
.twt-wa-cta-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.twt-wa-cta-title { font-size: 15px; }
.twt-wa-cta-sub {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.85;
  word-wrap: break-word;
}

.twt-wa-secondary {
  display: block;
  text-align: center;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--accent-soft-2);
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

.twt-wa-empty {
  text-align: center;
  padding: 28px 16px;
  color: var(--ink-muted);
  font-size: 14px;
}
.twt-wa-empty .empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background: var(--success-soft);
  color: var(--success);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.twt-wa-empty .empty-icon svg { width: 28px; height: 28px; }
.twt-wa-empty-sub {
  font-size: 12px;
  margin-top: 6px;
  color: var(--ink-faint);
}

/* Respect prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  .twt-wa-cta { transition: none; }
}

/* -----------------------------------------------------------------
 * Tab bar
 * ----------------------------------------------------------------- */
.twt-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--tabbar);
  border-top: 1px solid var(--tabbar-border);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  z-index: 50;
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
}
.twt-tabbar a {
  color: var(--tabbar-ink);
  text-align: center;
  text-decoration: none;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 0;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
}
.twt-tabbar a.active { color: var(--tabbar-active); }
.twt-tabbar svg { width: 22px; height: 22px; margin-bottom: 2px; }

/* -----------------------------------------------------------------
 * Content / toast / install banner
 * ----------------------------------------------------------------- */
.twt-content {
  padding: 16px 16px 300px;
  max-width: 720px;
  margin: 0 auto;
}

.twt-toast {
  position: fixed;
  left: 50%;
  bottom: 90px;
  transform: translateX(-50%);
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--ink);
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 13px;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  box-shadow: var(--shadow);
}
.twt-toast.show { opacity: 1; }
.twt-toast.is-error {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger-ink);
}

.twt-install-banner {
  display: none;
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: var(--shadow-lg);
  z-index: 60;
  gap: 12px;
  align-items: center;
  color: var(--ink);
  font-size: 13px;
}
.twt-install-banner.show { display: flex; }
.twt-install-banner .install-dismiss {
  background: none;
  border: 0;
  color: var(--ink-muted);
  font-size: 18px;
  cursor: pointer;
}
.twt-install-btn {
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

/* -----------------------------------------------------------------
 * Cards / surfaces / inputs (semantic)
 * ----------------------------------------------------------------- */
.twt-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  color: var(--ink);
  position: relative;
}
.twt-card-tight { padding: 6px 18px; }

.twt-h2 { font-size: 18px; font-weight: 600; margin: 0 0 12px; color: var(--ink); }
.twt-muted { color: var(--ink-muted); }
.twt-faint { color: var(--ink-faint); }
.twt-link { color: var(--link); text-decoration: none; }

.twt-input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font-size: 16px;
  box-sizing: border-box;
}
.twt-input::placeholder { color: var(--ink-faint); }
.twt-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.twt-btn {
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: 12px;
  padding: 14px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  width: 100%;
  transition: filter 0.15s, transform 0.05s;
}
.twt-btn:hover { filter: brightness(1.05); }
.twt-btn:active { transform: scale(0.98); }
.twt-btn:disabled { opacity: 0.6; cursor: wait; }
.twt-btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
}
.twt-btn-danger {
  background: var(--danger-soft);
  color: var(--danger-ink);
}

/* -----------------------------------------------------------------
 * Info / status colour helpers
 * ----------------------------------------------------------------- */
.twt-info-box {
  padding: 14px 18px;
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  border-radius: 12px;
  font-size: 12px;
  color: var(--info-ink);
}

.twt-error-box {
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  color: var(--danger-ink);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
}

/* -----------------------------------------------------------------
 * Skeleton bars
 * ----------------------------------------------------------------- */
.twt-skel { background: var(--skeleton); border-radius: 6px; }
.twt-skel-2 { background: var(--skeleton-2); border-radius: 6px; }

/* -----------------------------------------------------------------
 * Filter chips (trips list)
 * ----------------------------------------------------------------- */
.filter-chip {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.filter-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* -----------------------------------------------------------------
 * Trip card (with LED glow on dark, subtle on light)
 * ----------------------------------------------------------------- */
.trip-card {
  display: block;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 10px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.1s, box-shadow 0.15s;
  position: relative;
  isolation: isolate;
}
.trip-card:active { transform: scale(0.99); }
.trip-card:hover { box-shadow: var(--shadow); }

/* -----------------------------------------------------------------
 * Electric blue LED glow on tiles + cards.
 *
 * Applied via the .led-tile class. Stagger animation-delay via
 * inline `--led-delay` or per-nth-child. In light mode the intensity
 * is scaled down via --led-intensity so the glow doesn't blow out.
 *
 * Z-index strategy: the pseudo-element is below content (z-index -1)
 * but the parent gets `isolation: isolate` so the glow never escapes.
 * ----------------------------------------------------------------- */
.led-tile,
.trip-card,
.twt-tabbar a {
  position: relative;
  isolation: isolate;
}
.led-tile::before,
.trip-card::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  background: radial-gradient(60% 60% at 50% 50%, var(--led) 0%, transparent 70%);
  filter: blur(18px);
  opacity: calc(0.45 * var(--led-intensity));
  z-index: -1;
  pointer-events: none;
  animation: ledPulse 4.5s ease-in-out infinite;
}
.led-tile:nth-child(2)::before, .trip-card:nth-child(2)::before { animation-delay: 0.6s; }
.led-tile:nth-child(3)::before, .trip-card:nth-child(3)::before { animation-delay: 1.2s; }
.led-tile:nth-child(4)::before, .trip-card:nth-child(4)::before { animation-delay: 1.8s; }
.led-tile:nth-child(5)::before, .trip-card:nth-child(5)::before { animation-delay: 2.4s; }

.led-tile:active::before,
.trip-card:active::before {
  opacity: calc(0.8 * var(--led-intensity));
  transition: opacity 0.15s ease;
}

@keyframes ledPulse {
  0%, 100% { opacity: calc(0.28 * var(--led-intensity)); }
  50%      { opacity: calc(0.60 * var(--led-intensity)); }
}

/* Tabbar tile LED — softer, behind the icon only */
.twt-tabbar a.active::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 50% at 50% 35%, var(--led) 0%, transparent 70%);
  filter: blur(14px);
  opacity: calc(0.5 * var(--led-intensity));
  z-index: -1;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .led-tile::before,
  .trip-card::before,
  .twt-tabbar a.active::before {
    animation: none;
    opacity: calc(0.35 * var(--led-intensity)) !important;
  }
}

/* -----------------------------------------------------------------
 * Theme picker (Settings page)
 * ----------------------------------------------------------------- */
.theme-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
.theme-card {
  cursor: pointer;
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 14px 12px;
  text-align: left;
  background: var(--card);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.15s, background-color 0.15s;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.theme-card[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.theme-card .swatch {
  width: 100%;
  height: 56px;
  border-radius: 10px;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.theme-card .swatch::after {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 8px;
  width: 28px;
  height: 6px;
  border-radius: 3px;
  background: #0066FF;
  box-shadow: 0 0 10px #00B4FF;
}
.theme-card.light .swatch { background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%); }
.theme-card.dark  .swatch { background: linear-gradient(180deg, #050A14 0%, #0A1228 100%); }
.theme-card .label {
  font-weight: 600;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.theme-card .label .dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid var(--border);
}
.theme-card[aria-pressed="true"] .label .dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--card);
}
.theme-card .sub {
  font-size: 11px;
  color: var(--ink-muted);
}

/* -----------------------------------------------------------------
 * Login-screen overrides (driver/login.blade.php inlines colours)
 * The hard-coded gradients are now theme-aware via this stylesheet.
 * ----------------------------------------------------------------- */
.driver-login-shell {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--accent) 0%, var(--bg) 100%);
  padding: 16px;
}
.driver-login-card {
  background: var(--card);
  border-radius: 24px;
  padding: 32px 28px;
  max-width: 360px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  color: var(--ink);
}
.driver-login-back {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #FFFFFF;
  text-decoration: none;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  transition: all 0.15s;
}
.driver-login-back:hover { background: rgba(255, 255, 255, 0.26); }

/* -----------------------------------------------------------------
 * Office POD instructions
 *
 * The office raises a POD, sends it to the driver, and app.js collects it
 * on the trip screen and on the trips list. The card carries wording typed
 * by an office user, so it is built entirely through textContent in
 * app.js and styled here rather than assembled as markup.
 *
 * The stale variant is the one a driver sees most often. It means the last
 * instructions we managed to collect, shown because a driver with no signal
 * still has to know what the office asked for.
 * ----------------------------------------------------------------- */
.twt-pod-instructions:empty { display: none; }

.twt-pod-instruction {
  margin-bottom: 12px;
  border-color: var(--accent);
  /* The tint is layered over the card colour instead of replacing it. In dark
     mode the soft tokens are translucent, so setting one as the only
     background would let the near-black page show through and leave this card
     darker than the ones around it. */
  background: linear-gradient(var(--accent-soft-2), var(--accent-soft-2)), var(--card);
}
.twt-pod-instruction.is-stale {
  border-color: var(--warning);
  background: linear-gradient(var(--warning-soft), var(--warning-soft)), var(--card);
}
.twt-pod-instruction-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.twt-pod-instruction-flag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  white-space: nowrap;
}
.twt-pod-instruction.is-stale .twt-pod-instruction-flag { color: var(--warning); }
.twt-pod-instruction-when {
  font-size: 11px;
  color: var(--ink-muted);
  white-space: nowrap;
}
.twt-pod-instruction-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}
.twt-pod-instruction-drop {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 3px;
}
.twt-pod-instruction-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  margin-top: 10px;
  /* Office wording arrives as it was typed, line breaks and all, and a long
     reference with no spaces in it must not push the card sideways on a
     narrow handset. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.twt-pod-instruction-stale {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 10px;
}
/* The capture button is built by the shared actionLink helper, which sets its
   own inline colours and leaves spacing to us. */
.twt-pod-instruction a { margin-top: 12px; }

/* Trips-list marker, appended beside the has_pod tick on the route summary. */
.twt-pod-chip {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  white-space: nowrap;
}
.twt-pod-chip.is-stale {
  background: var(--warning-soft);
  color: var(--warning);
}

/* -----------------------------------------------------------------
 * "Before you start": the privacy and location notice
 * (resources/views/driver/_notice.blade.php, wired in app.js).
 *
 * A full-screen sheet over the whole application, above the top bar, the
 * tab bar and the notification panels. It uses the theme tokens only, so the
 * dark cockpit and the light daytime theme both carry it.
 * ----------------------------------------------------------------- */
.twt-notice {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--bg);
  color: var(--ink);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.twt-notice[hidden] { display: none; }
html.twt-notice-open body { overflow: hidden; }

.twt-notice-sheet {
  box-sizing: border-box;
  min-height: 100%;
  max-width: 30rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
}

.twt-notice-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 28px;
}
.twt-notice-mark { display: block; flex: 0 0 auto; }
.twt-notice-org {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-faint);
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.twt-notice-org[hidden] { display: none; }

.twt-notice-title {
  margin: 8px 0 0;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  outline: none;
}
.twt-notice-lede,
.twt-notice-text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-muted);
}

.twt-notice-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.twt-notice-part { margin: 0; }
.twt-notice-label {
  margin: 0 0 4px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* Cyan on the dark cockpit, the accent blue on white: both readable. */
  color: var(--tabbar-active);
}
/* The one promise about location, set apart so it is not skimmed past. */
.twt-notice-text-strong {
  color: var(--ink);
  padding: 8px 10px;
  border-left: 3px solid var(--tabbar-active);
  background: var(--accent-soft-2);
  border-radius: 0 8px 8px 0;
}

.twt-notice-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--link);
  text-decoration: none;
}
.twt-notice-link:hover,
.twt-notice-link:focus-visible { text-decoration: underline; text-underline-offset: 0.18em; }
.twt-notice-small {
  margin: -8px 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-faint);
}

.twt-notice-foot {
  margin-top: auto;
  position: sticky;
  bottom: 0;
  padding-top: 16px;
  background: linear-gradient(180deg, transparent, var(--bg) 35%);
}
.twt-notice-accept {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 60px;
  border: 0;
  border-radius: 14px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 8px 24px var(--accent-soft);
}
.twt-notice-accept:active { transform: scale(0.99); }
.twt-notice-accept:focus-visible,
.twt-notice-link:focus-visible {
  outline: 3px solid var(--tabbar-active);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  .twt-notice:not([hidden]) .twt-notice-sheet { animation: twt-notice-in 0.22s ease-out both; }
  .twt-notice-accept { transition: transform 0.12s ease, filter 0.12s ease; }
  .twt-notice-accept:hover { filter: brightness(1.06); }
}
@keyframes twt-notice-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Settings, Privacy: the notice again, and the full policy. */
.setting-privacy { padding-top: 0; padding-bottom: 0; }
.setting-privacy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 12px 0;
  margin: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.setting-privacy-row:last-child { border-bottom: 0; }
.setting-privacy-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.setting-privacy-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.setting-privacy-title { font-size: 14px; font-weight: 500; color: var(--ink); }
.setting-privacy-sub { font-size: 12px; color: var(--ink-muted); }
.setting-privacy-chevron { flex: 0 0 auto; color: var(--ink-faint); }

/* POD capture: the phone's own capture time, shown once the POD is saved. */
.pod-captured-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--ink-muted);
}
.pod-captured-line[hidden] { display: none; }
.pod-captured-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--warning-soft);
  color: var(--ink);
  border: 1px solid var(--warning);
}
.pod-captured-pill[hidden] { display: none; }
.pod-captured-text { font-variant-numeric: tabular-nums; }