/* ============================================================
   FleetTrack Pro — Main CSS
   Logistics/fleet signal + location tracking console
   Primary: Purple #9333EA (SPEC §1 — distinct from RemindMe's violet
   #7C3AED and SignalTrack's magenta #C026D3)
   Layout: single responsive header/footer (no server-side device
   split) — sidebar+topbar activate at the desktop breakpoint via
   media query, bottom-nav is the default (mobile-first).
   ============================================================ */

:root {
  /* Brand Colors (SPEC §1 tokens — do not rename) */
  --color-primary:        #9333EA;
  --color-primary-dark:   #7E22CE;
  --color-primary-light:  #D8B4FE;
  --color-primary-xlt:    #FAF5FF;

  /* Secondary accents */
  --color-indigo:         #4F46E5;
  --color-indigo-light:   #E0E7FF;
  --color-success:        #059669;
  --color-success-light:  #D1FAE5;
  --color-warning:        #D97706;
  --color-warning-light:  #FEF3C7;
  --color-danger:         #DC2626;
  --color-danger-light:   #FEE2E2;
  --color-info:           #3B82F6;
  --color-info-light:     #DBEAFE;
  --color-teal:           #0D9488;
  --color-teal-light:     #CCFBF1;
  --color-orange:         #EA580C;
  --color-orange-light:   #FFEDD5;
  --color-amber:          #B45309;
  --color-amber-light:    #FEF3C7;

  /* Neutrals */
  --bg:               #F5F3F7;
  --bg-secondary:     #FAFAFB;
  --card-bg:          #FFFFFF;
  --text-primary:     #1E1B2E;
  --text-secondary:   #625D75;
  --text-muted:       #9691A8;
  --border:           #E7E3ED;
  --border-focus:     #9333EA;

  /* Typography */
  --font-family:    'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono:      "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --font-size-base: 16px;
  --font-size-sm:   14px;
  --font-size-xs:   12px;
  --font-size-lg:   18px;
  --font-size-xl:   20px;
  --line-height-base: 1.5;

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Radii */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs:  0 1px 2px rgba(0,0,0,.06);
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -2px rgba(0,0,0,.06);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -4px rgba(0,0,0,.06);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,.10), 0 8px 10px -6px rgba(0,0,0,.06);
  --shadow-top: 0 -2px 10px rgba(0,0,0,.08);
  --shadow-fab: 0 4px 16px rgba(147,51,234,.40);

  /* App shell */
  --header-height:     60px;
  --bottom-nav-height: 70px;
  --sidebar-width:     240px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* Z-indices */
  --z-header: 100;
  --z-bottom: 100;
  --z-modal:  1000;
  --z-toast:  9999;
}

/* Dark mode — system preference (no explicit choice stamped) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:                   #17131F;
    --bg-secondary:         #201A2B;
    --card-bg:              #221C2E;
    --text-primary:         #F3F0F8;
    --text-secondary:       #B4AEC6;
    --text-muted:           #8B84A0;
    --border:               #362E44;
    --color-primary-light:  #4C1D8C;
    --color-primary-xlt:    #2A1F3D;
    --color-success-light:  #064E3B;
    --color-warning-light:  #78350F;
    --color-danger-light:   #7F1D1D;
    --color-info-light:     #1E3A5F;
    --color-indigo-light:   #1E1B4B;
    --color-teal-light:     #134E4A;
  }
}
/* Dark mode — explicit user choice (persisted in localStorage flt-theme) */
:root[data-theme="dark"] {
  --bg:                   #17131F;
  --bg-secondary:         #201A2B;
  --card-bg:              #221C2E;
  --text-primary:         #F3F0F8;
  --text-secondary:       #B4AEC6;
  --text-muted:           #8B84A0;
  --border:               #362E44;
  --color-primary-light:  #4C1D8C;
  --color-primary-xlt:    #2A1F3D;
  --color-success-light:  #064E3B;
  --color-warning-light:  #78350F;
  --color-danger-light:   #7F1D1D;
  --color-info-light:     #1E3A5F;
  --color-indigo-light:   #1E1B4B;
  --color-teal-light:     #134E4A;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: var(--font-size-base); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--text-primary);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 { color: var(--text-primary); line-height: 1.25; font-weight: 700; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; font-weight: 600; }
h4 { font-size: 1.125rem; font-weight: 600; }
h5 { font-size: 1rem; font-weight: 600; }
h6 { font-size: 0.875rem; font-weight: 600; }
p  { color: var(--text-secondary); margin-bottom: var(--space-4); }
p:last-child { margin-bottom: 0; }
small { font-size: var(--font-size-xs); }
.text-xs   { font-size: var(--font-size-xs)   !important; }
.text-sm   { font-size: var(--font-size-sm)   !important; }
.text-lg   { font-size: var(--font-size-lg)   !important; }
.text-xl   { font-size: var(--font-size-xl)   !important; }
.text-muted    { color: var(--text-muted)    !important; }
.text-primary  { color: var(--color-primary) !important; }
.text-success  { color: var(--color-success) !important; }
.text-danger   { color: var(--color-danger)  !important; }
.text-warning  { color: var(--color-warning) !important; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

/* ============================================================
   LAYOUT / APP SHELL
   ============================================================ */
.app-shell { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

/* ── Mobile top bar (default; hidden at desktop breakpoint) ──────── */
.app-header {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--header-height);
  background: var(--color-primary);
  box-shadow: var(--shadow-md);
  z-index: var(--z-header);
}
.app-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 100%; padding: 0 var(--space-4);
}
.app-header__brand { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; }
.app-header__logo {
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.20);
  color: #fff; font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; letter-spacing: -.5px;
}
.app-header__app-name { color: #fff; font-size: 15px; font-weight: 600; line-height: 1; }
.app-header__app-name strong { font-weight: 800; }
.app-header__actions { display: flex; align-items: center; gap: var(--space-2); }
.app-header__icon-btn {
  width: 38px; height: 38px; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.85); transition: background var(--transition-fast);
  position: relative;
}
.app-header__icon-btn:hover { background: rgba(255,255,255,.15); }
.app-header__avatar-btn {
  width: 34px; height: 34px; border-radius: var(--radius-full);
  background: rgba(255,255,255,.20);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #fff;
}
.app-header__avatar-initials { font-size: 13px; font-weight: 700; }

.badge--notif {
  position: absolute; top: 4px; right: 4px;
  min-width: 16px; height: 16px; border-radius: var(--radius-full);
  background: var(--color-danger); color: #fff;
  font-size: 9px; font-weight: 700; padding: 0 3px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--color-primary);
}

/* Profile dropdown (shared: mobile header avatar + desktop topbar avatar) */
.profile-dropdown {
  position: fixed; top: calc(var(--header-height) - 4px); right: var(--space-4);
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xl);
  min-width: 220px; z-index: var(--z-modal);
  opacity: 0; transform: translateY(-8px) scale(.97);
  pointer-events: none; transition: all var(--transition-fast);
}
.profile-dropdown.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; }
.profile-dropdown__header { padding: var(--space-4); border-bottom: 1px solid var(--border); }
.profile-dropdown__name { font-weight: 600; color: var(--text-primary); font-size: var(--font-size-sm); margin-bottom: 2px; }
.profile-dropdown__email { font-size: var(--font-size-xs); color: var(--text-muted); margin: 0; }
.profile-dropdown__list { padding: var(--space-2) 0; }
.profile-dropdown__item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--text-secondary); font-size: var(--font-size-sm);
  transition: background var(--transition-fast);
}
.profile-dropdown__item:hover { background: var(--bg); color: var(--text-primary); text-decoration: none; }
.profile-dropdown__item--danger { color: var(--color-danger); }
.profile-dropdown__divider { height: 1px; background: var(--border); margin: var(--space-2) 0; }

.theme-toggle { width: 38px; height: 38px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.85); transition: background var(--transition-fast); }
.theme-toggle:hover { background: rgba(255,255,255,.15); }
.theme-toggle__sun { display: none; }
[data-theme="dark"] .theme-toggle__moon { display: none; }
[data-theme="dark"] .theme-toggle__sun  { display: block; }

/* Page content */
.page-content { flex: 1; padding-top: var(--header-height); padding-bottom: var(--bottom-nav-height); }
.no-bottom-nav .page-content { padding-bottom: 0; }
.page-inner { padding: var(--space-4); max-width: 640px; margin: 0 auto; }

/* ============================================================
   HERO / DASHBOARD BANNER
   ============================================================ */
.dash-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  padding: var(--space-6) var(--space-5) var(--space-8);
  color: #fff;
}
.dash-hero p { color: rgba(255,255,255,.85); }
.hero-greeting { color: rgba(255,255,255,.80); font-size: var(--font-size-sm); margin-bottom: 2px; }
.hero-name { color: #fff; font-size: 1.4rem; font-weight: 700; margin-bottom: 2px; }
.hero-date { color: rgba(255,255,255,.70); font-size: var(--font-size-xs); margin-bottom: var(--space-5); }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.hero-stat {
  background: rgba(255,255,255,.15); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-2); text-align: center; backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.12);
}
.hero-stat--accent { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.25); }
.hero-stat--danger { background: rgba(220,38,38,.35); border-color: rgba(220,38,38,.4); }
.hero-stat-value { color: #fff; font-size: 1.15rem; font-weight: 800; line-height: 1; word-break: break-all; }
.hero-stat-label { color: rgba(255,255,255,.75); font-size: 9px; margin-top: 4px; text-transform: uppercase; letter-spacing: .04em; }
.hero-stat p { color: rgba(255,255,255,.75); }

/* Alert banner */
.alert-strip {
  background: var(--color-warning-light); border-left: 4px solid var(--color-warning);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
  display: flex; align-items: flex-start; gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.alert-strip--danger { background: var(--color-danger-light); border-color: var(--color-danger); }
.alert-strip--info   { background: var(--color-info-light);   border-color: var(--color-info); }
.alert-strip--success{ background: var(--color-success-light);border-color: var(--color-success); }
.alert-strip p { margin: 0; font-size: var(--font-size-sm); color: var(--text-primary); }

/* ============================================================
   STAT / KPI CARDS
   ============================================================ */
.stat-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3); padding: 0 var(--space-4);
  margin-top: calc(-1 * var(--space-5));
}
.stat-card {
  background: var(--card-bg); border-radius: var(--radius-lg);
  padding: var(--space-4); box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: var(--space-1);
}
.stat-card svg { color: var(--color-primary); }
.stat-card.success svg { color: var(--color-success); }
.stat-card.warning svg { color: var(--color-warning); }
.stat-card.danger  svg { color: var(--color-danger); }
.stat-card.info    svg { color: var(--color-info); }
.stat-card.teal    svg { color: var(--color-teal); }
.stat-card.amber   svg { color: var(--color-amber); }
.stat-value { font-size: 1.35rem; font-weight: 800; color: var(--text-primary); line-height: 1; margin-top: var(--space-1); }
.stat-label { font-size: var(--font-size-xs); color: var(--text-secondary); font-weight: 600; }
.stat-sub   { font-size: 10px; color: var(--text-muted); margin: 0; }

/* KPI row (3-up, used by reports/analytics summaries) */
.kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-bottom: var(--space-4); }
.kpi-tile {
  background: var(--card-bg); border-radius: var(--radius-lg);
  border: 1px solid var(--border); border-top: 3px solid var(--color-primary);
  padding: var(--space-4) var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-1);
  box-shadow: var(--shadow-sm);
}
.kpi-tile__icon {
  width: 32px; height: 32px; border-radius: var(--radius-md);
  background: var(--color-primary-light); color: var(--color-primary-dark);
  display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-2);
}
.kpi-tile__label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.kpi-tile__value { font-size: 1.25rem; font-weight: 800; color: var(--text-primary); line-height: 1.1; word-break: break-all; }
.kpi-tile__sub { font-size: 10px; color: var(--text-muted); margin: 0; }

/* ============================================================
   ACTIVITY FEED
   ============================================================ */
.feed-item {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  position: relative;
}
.feed-item:last-child { border-bottom: none; }
.feed-item__dot {
  width: 32px; height: 32px; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: var(--color-primary-light); color: var(--color-primary-dark);
  font-size: 15px;
}
.feed-item__dot--income  { background: var(--color-success-light); color: var(--color-success); }
.feed-item__dot--danger  { background: var(--color-danger-light);  color: var(--color-danger); }
.feed-item__body { flex: 1; min-width: 0; }
.feed-item__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); margin-bottom: 2px;
}
.feed-item__title { font-weight: 600; font-size: var(--font-size-sm); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.feed-item__meta { font-size: var(--font-size-xs); color: var(--text-muted); line-height: 1.4; }
.feed-item__time { color: var(--text-muted); }

/* ============================================================
   SERVICE / QUICK ACTION GRID
   ============================================================ */
.section-label {
  font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted);
  padding: 0 var(--space-4); margin-bottom: var(--space-2);
}
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); padding: 0 var(--space-4); }
.service-icon-item {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-2); border-radius: var(--radius-md);
  text-decoration: none; transition: background var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}
.service-icon-item:hover { background: var(--bg-secondary); text-decoration: none; }
.icon-box {
  width: 52px; height: 52px; border-radius: var(--radius-lg);
  background: var(--color-primary-light); color: var(--color-primary-dark);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-xs);
}
.service-icon-item.success .icon-box { background: var(--color-success-light); color: var(--color-success); }
.service-icon-item.warning .icon-box { background: var(--color-warning-light); color: var(--color-warning); }
.service-icon-item.danger  .icon-box { background: var(--color-danger-light);  color: var(--color-danger); }
.service-icon-item.info    .icon-box { background: var(--color-info-light);    color: var(--color-info); }
.service-icon-item.teal    .icon-box { background: var(--color-teal-light);    color: var(--color-teal); }
.service-icon-item.amber   .icon-box { background: var(--color-amber-light);   color: var(--color-amber); }
.icon-label { font-size: 11px; font-weight: 500; color: var(--text-secondary); text-align: center; line-height: 1.3; }

/* ============================================================
   CARDS / LIST ITEMS
   ============================================================ */
.card {
  background: var(--card-bg); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); border: 1px solid var(--border);
  overflow: hidden;
}
.card-header {
  padding: var(--space-4); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.card-header h3 { font-size: 1rem; margin: 0; }
.card-body { padding: var(--space-4); }

.list-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4); border-bottom: 1px solid var(--border);
  text-decoration: none; transition: background var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}
.list-item:last-child { border-bottom: none; }
.list-item:hover { background: var(--bg-secondary); }
.list-item__icon {
  width: 42px; height: 42px; border-radius: var(--radius-md);
  background: var(--color-primary-light); color: var(--color-primary-dark);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.list-item__body { flex: 1; min-width: 0; }
.list-item__title { font-weight: 600; color: var(--text-primary); font-size: var(--font-size-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-item__meta  { font-size: var(--font-size-xs); color: var(--text-muted); margin-top: 2px; }
.list-item__right { text-align: right; flex-shrink: 0; }

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: var(--radius-full);
  font-size: var(--font-size-xs); font-weight: 600; line-height: 1.6;
}
.badge--primary   { background: var(--color-primary-light); color: var(--color-primary-dark); }
.badge--success   { background: var(--color-success-light); color: var(--color-success); }
.badge--warning   { background: var(--color-warning-light); color: var(--color-warning); }
.badge--danger    { background: var(--color-danger-light);  color: var(--color-danger); }
.badge--info      { background: var(--color-info-light);    color: var(--color-info); }
.badge--secondary { background: var(--bg);                  color: var(--text-secondary); }
.badge--teal      { background: var(--color-teal-light);    color: var(--color-teal); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 10px var(--space-5); border-radius: var(--radius-md);
  font-size: var(--font-size-sm); font-weight: 600; line-height: 1;
  cursor: pointer; transition: all var(--transition-fast);
  border: 1.5px solid transparent; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.btn--primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn--primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); text-decoration: none; }
.btn--secondary { background: var(--card-bg); color: var(--text-secondary); border-color: var(--border); }
.btn--secondary:hover { background: var(--bg); text-decoration: none; }
.btn--success { background: var(--color-success); color: #fff; border-color: var(--color-success); }
.btn--danger  { background: var(--color-danger);  color: #fff; border-color: var(--color-danger); }
.btn--outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn--outline:hover { background: var(--color-primary-xlt); }
.btn--ghost { background: transparent; color: var(--text-secondary); border-color: transparent; }
.btn--ghost:hover { background: var(--bg); }
.btn--sm { padding: 7px var(--space-4); font-size: var(--font-size-xs); }
.btn--lg { padding: 13px var(--space-6); font-size: var(--font-size-base); }
.btn--full { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ============================================================
   FORMS
   ============================================================ */
.form-group { margin-bottom: var(--space-5); }
.form-label { display: block; font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-2); }
.form-label .required { color: var(--color-danger); margin-left: 2px; }
.form-control {
  width: 100%; padding: 10px var(--space-4); border: 1.5px solid var(--border);
  border-radius: var(--radius-md); background: var(--card-bg); color: var(--text-primary);
  font-size: var(--font-size-sm); transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
}
.form-control:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(147,51,234,.15); }
.form-control::placeholder { color: var(--text-muted); }
.form-control:disabled { background: var(--bg); color: var(--text-muted); }
select.form-control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23625D75' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 40px; }
textarea.form-control { resize: vertical; min-height: 90px; }
.form-hint { font-size: var(--font-size-xs); color: var(--text-muted); margin-top: var(--space-1); }
.form-error { font-size: var(--font-size-xs); color: var(--color-danger); margin-top: var(--space-1); }
.form-control.is-invalid { border-color: var(--color-danger); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }

/* Number input with a unit suffix (settings thresholds) */
.input-unit { position: relative; }
.input-unit .form-control { padding-right: 52px; }
.input-unit__suffix {
  position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%);
  font-size: var(--font-size-xs); color: var(--text-muted); font-weight: 600; pointer-events: none;
}

/* ============================================================
   TABLES
   ============================================================ */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; min-width: 480px; }
.data-table th {
  padding: var(--space-3) var(--space-4); text-align: left;
  font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); background: var(--bg-secondary); border-bottom: 1px solid var(--border);
}
.data-table td {
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border);
  font-size: var(--font-size-sm); color: var(--text-secondary);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--bg-secondary); }
.data-table td strong { color: var(--text-primary); font-weight: 600; }

/* ============================================================
   BOTTOM NAVIGATION (mobile default; hidden at desktop breakpoint)
   ============================================================ */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--bottom-nav-height);
  background: var(--card-bg); border-top: 1px solid var(--border);
  box-shadow: var(--shadow-top); z-index: var(--z-bottom);
  display: grid; grid-template-columns: repeat(5, 1fr);
  align-items: center; padding-bottom: env(safe-area-inset-bottom);
}
.nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: var(--space-2) 0; text-decoration: none; transition: color var(--transition-fast);
  color: var(--text-muted); position: relative;
  -webkit-tap-highlight-color: transparent;
}
.nav-item:hover { text-decoration: none; }
.nav-item.active { color: var(--color-primary); }
.nav-item__label, .nav-label { font-size: 10px; font-weight: 600; }
.nav-item__badge {
  position: absolute; top: 4px; right: calc(50% - 16px);
  min-width: 16px; height: 16px; border-radius: var(--radius-full);
  background: var(--color-danger); color: #fff;
  font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  padding: 0 4px; border: 2px solid var(--card-bg);
}
.nav-fab {
  width: 48px; height: 48px; border-radius: var(--radius-full);
  background: var(--color-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-fab); cursor: pointer; border: none;
  margin: 0 auto; transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}
.nav-fab:hover { transform: scale(1.05); }
.nav-fab:active { transform: scale(.97); }

/* ============================================================
   MORE MENU SHEET (mobile "More" nav item)
   ============================================================ */
.quick-action-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.4);
  z-index: calc(var(--z-modal) - 1); opacity: 0; pointer-events: none;
  transition: opacity var(--transition-base); backdrop-filter: blur(2px);
}
.quick-action-overlay.is-open { opacity: 1; pointer-events: all; }
.quick-action-sheet {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--card-bg); border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  z-index: var(--z-modal); padding: var(--space-3) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform var(--transition-base);
  max-height: 75vh; overflow-y: auto;
}
.quick-action-sheet.is-open { transform: translateY(0); }
.sheet-handle { width: 36px; height: 4px; background: var(--border); border-radius: var(--radius-full); margin: 0 auto var(--space-4); }
.sheet-title { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-4); }
.sheet-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.sheet-action-btn { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-decoration: none; }
.sheet-action-btn:hover { text-decoration: none; }
.sheet-action-btn.is-active .action-icon { outline: 2px solid var(--color-primary); }
.action-icon { width: 52px; height: 52px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; background: var(--color-primary-light); color: var(--color-primary-dark); }
.action-label { font-size: 11px; font-weight: 500; color: var(--text-secondary); text-align: center; line-height: 1.3; }

/* ============================================================
   MODAL
   ============================================================ */
.modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity var(--transition-base);
}
.modal.is-open { opacity: 1; pointer-events: all; }
.modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(2px); }
.modal__content {
  position: relative; background: var(--card-bg);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  width: 100%; max-width: 640px; max-height: 90vh;
  overflow-y: auto; padding: var(--space-5);
  padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
  transform: translateY(40px); transition: transform var(--transition-base);
}
.modal.is-open .modal__content { transform: translateY(0); }
.modal__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); }
.modal__title { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); }
.modal__close { width: 32px; height: 32px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; color: var(--text-muted); transition: background var(--transition-fast); }
.modal__close:hover { background: var(--bg); }

/* Confirm dialog */
#confirm-modal {
  position: fixed; inset: 0; z-index: calc(var(--z-modal) + 10);
  display: flex; align-items: center; justify-content: center; padding: var(--space-5);
  background: rgba(0,0,0,.5); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity var(--transition-base);
}
#confirm-modal.is-open { opacity: 1; pointer-events: all; }
.confirm-dialog {
  background: var(--card-bg); border-radius: var(--radius-xl);
  padding: var(--space-6); max-width: 320px; width: 100%; text-align: center;
  box-shadow: var(--shadow-xl);
  transform: scale(.95); transition: transform var(--transition-base);
}
#confirm-modal.is-open .confirm-dialog { transform: scale(1); }
.confirm-icon { font-size: 2rem; margin-bottom: var(--space-3); }
.confirm-title { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-2); }
.confirm-message { font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: var(--space-5); }
.confirm-actions { display: flex; gap: var(--space-3); }
.confirm-actions .btn { flex: 1; }

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */
.toast-container {
  position: fixed; top: calc(var(--header-height) + var(--space-3));
  left: 50%; transform: translateX(-50%); z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--space-2); width: min(calc(100% - 32px), 420px);
  pointer-events: none;
}
.toast-container--initial { pointer-events: all; }
.toast {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--card-bg); box-shadow: var(--shadow-lg); border: 1px solid var(--border);
  opacity: 0; transform: translateY(-12px) scale(.96);
  transition: all var(--transition-base);
  pointer-events: all;
}
.toast--show { opacity: 1; transform: translateY(0) scale(1); }
.toast--success { border-left: 4px solid var(--color-success); }
.toast--error   { border-left: 4px solid var(--color-danger); }
.toast--warning { border-left: 4px solid var(--color-warning); }
.toast--info    { border-left: 4px solid var(--color-info); }
.toast__icon { flex-shrink: 0; margin-top: 1px; }
.toast--success .toast__icon { color: var(--color-success); }
.toast--error   .toast__icon { color: var(--color-danger); }
.toast--warning .toast__icon { color: var(--color-warning); }
.toast--info    .toast__icon { color: var(--color-info); }
.toast__message { flex: 1; font-size: var(--font-size-sm); color: var(--text-primary); font-weight: 500; }
.toast__close { flex-shrink: 0; color: var(--text-muted); margin-top: 1px; }

/* ============================================================
   LOADING OVERLAY
   ============================================================ */
#loading-overlay {
  position: fixed; inset: 0; background: rgba(255,255,255,.8);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-4); z-index: 9998; opacity: 0; pointer-events: none;
  transition: opacity var(--transition-base);
}
[data-theme="dark"] #loading-overlay { background: rgba(23,19,31,.85); }
#loading-overlay.is-visible { opacity: 1; pointer-events: all; }
.loading-spinner {
  width: 32px; height: 32px; border: 3px solid var(--border);
  border-top-color: var(--color-primary); border-radius: var(--radius-full);
  animation: spin .8s linear infinite;
}
.loading-spinner.lg { width: 40px; height: 40px; border-width: 4px; }
.loading-text { font-size: var(--font-size-sm); color: var(--text-secondary); font-weight: 500; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination-wrap { padding: var(--space-4) 0; }
.pagination { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; }
.page-item .page-link {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius-md);
  border: 1.5px solid var(--border); background: var(--card-bg);
  color: var(--text-secondary); font-size: var(--font-size-sm); font-weight: 500;
  transition: all var(--transition-fast);
}
.page-item .page-link:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }
.page-item.active .page-link { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* ============================================================
   AUTH PAGES
   ============================================================ */
.auth-page {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--space-5); background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}
.auth-card {
  background: var(--card-bg); border-radius: var(--radius-xl);
  padding: var(--space-8); width: 100%; max-width: 400px;
  box-shadow: var(--shadow-xl);
}
.auth-logo {
  width: 56px; height: 56px; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff; font-weight: 800; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--space-5); letter-spacing: -.5px;
}
.auth-title { text-align: center; font-size: 1.4rem; font-weight: 800; color: var(--text-primary); margin-bottom: var(--space-2); }
.auth-subtitle { text-align: center; font-size: var(--font-size-sm); color: var(--text-muted); margin-bottom: var(--space-6); }
.auth-demo { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.auth-demo__label { display: block; font-size: var(--font-size-xs); color: var(--text-muted); text-align: center; margin-bottom: var(--space-3); }
.auth-demo__row {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--border);
  font-size: var(--font-size-sm); color: var(--text-secondary); cursor: pointer;
  transition: background .15s, border-color .15s;
}
.auth-demo__row:hover { background: var(--color-primary-xlt); border-color: var(--color-primary); color: var(--color-primary); }

/* ============================================================
   SEARCH BAR
   ============================================================ */
.search-bar {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--card-bg); border: 1.5px solid var(--border);
  border-radius: var(--radius-full); padding: 8px var(--space-4);
  transition: border-color var(--transition-fast);
}
.search-bar:focus-within { border-color: var(--border-focus); }
.search-bar input { flex: 1; border: none; background: none; color: var(--text-primary); font-size: var(--font-size-sm); outline: none; }
.search-bar input::placeholder { color: var(--text-muted); }
.search-bar svg { color: var(--text-muted); flex-shrink: 0; }

/* ============================================================
   FILTER CHIPS
   ============================================================ */
.filter-chips { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.filter-chips::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 14px; border-radius: var(--radius-full);
  border: 1.5px solid var(--border); background: var(--card-bg);
  font-size: var(--font-size-xs); font-weight: 600; color: var(--text-secondary);
  white-space: nowrap; cursor: pointer; transition: all var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}
.chip.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.chip:hover:not(.active) { border-color: var(--color-primary); color: var(--color-primary); }

/* ============================================================
   API KEY REVEAL BOX (Settings — Anthropic key)
   ============================================================ */
.key-reveal {
  background: var(--bg-secondary); border: 1.5px dashed var(--color-primary);
  border-radius: var(--radius-md); padding: var(--space-4);
  font-family: var(--font-mono); font-size: 13px; word-break: break-all;
  color: var(--text-primary); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.key-masked { font-family: var(--font-mono); letter-spacing: 1px; color: var(--text-secondary); }

/* ============================================================
   UTILITIES
   ============================================================ */
.d-flex  { display: flex; }
.d-grid  { display: grid; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.p-4  { padding: var(--space-4); }
.p-5  { padding: var(--space-5); }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.w-100 { width: 100%; }
.empty-state {
  text-align: center; padding: var(--space-12) var(--space-6);
  color: var(--text-muted);
}
.empty-state svg { margin: 0 auto var(--space-4); }
.empty-state h3 { color: var(--text-secondary); margin-bottom: var(--space-2); }
.empty-state p  { font-size: var(--font-size-sm); margin-bottom: var(--space-5); }

/* ============================================================
   RESPONSIVE — small-screen tweaks
   ============================================================ */
@media (min-width: 480px) {
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 640px) {
  .page-inner { padding: var(--space-6); }
  .service-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════
   DESKTOP LAYOUT — sidebar + topbar activate at this breakpoint
   (single responsive header/footer, no server-side device split)
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  .app-header { display: none !important; }
  .bottom-nav, .quick-action-overlay, .quick-action-sheet { display: none !important; }

  .app-sidebar {
    display: flex !important;
    position: fixed; left: 0; top: 0; bottom: 0;
    width: var(--sidebar-width);
    flex-direction: column;
    background: var(--card-bg);
    border-right: 1px solid var(--border);
    z-index: 200;
    overflow-y: auto; overflow-x: hidden;
  }

  .app-topbar {
    display: flex !important;
    position: fixed; top: 0; left: var(--sidebar-width); right: 0;
    height: var(--header-height);
    background: var(--card-bg); border-bottom: 1px solid var(--border);
    align-items: center; padding: 0 var(--space-8);
    gap: var(--space-4); z-index: 150;
  }

  .page-content {
    margin-left: var(--sidebar-width);
    padding-top: calc(var(--header-height) + var(--space-6));
    padding-bottom: var(--space-10);
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
  .page-inner { max-width: 1200px; padding: 0; margin: 0 auto; }

  .toast-container { top: calc(var(--header-height) + var(--space-4)); }
  .profile-dropdown { top: calc(var(--header-height) - 4px); right: var(--space-6); }

  .desk-grid { display: grid; grid-template-columns: 3fr 2fr; gap: var(--space-6); align-items: start; }
  .desk-row-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-4); }
  .desk-row-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-4); }
  .desk-row-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-4); }
}

/* Sidebar internals (structure only matters once .app-sidebar is visible) */
.app-sidebar { display: none; }
.sidebar-brand {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  text-decoration: none; flex-shrink: 0;
}
.sidebar-logo {
  width: 36px; height: 36px; border-radius: var(--radius-md);
  background: var(--color-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; flex-shrink: 0;
}
.sidebar-app-name { font-size: 13px; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.sidebar-app-name strong { color: var(--color-primary); font-weight: 800; }
.sidebar-nav { flex: 1; padding: var(--space-3) 0; display: flex; flex-direction: column; gap: 2px; }
.sidebar-section-label {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-muted);
  padding: var(--space-3) var(--space-5) var(--space-1);
  margin-top: var(--space-2);
}
.sidebar-nav__item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 9px var(--space-5); margin: 0 var(--space-2);
  border-radius: var(--radius-md); text-decoration: none;
  font-size: 13px; font-weight: 500; color: var(--text-secondary);
  transition: background .12s, color .12s;
}
.sidebar-nav__item svg { flex-shrink: 0; opacity: .65; transition: opacity .12s; }
.sidebar-nav__item:hover { background: var(--color-primary-xlt); color: var(--color-primary); text-decoration: none; }
.sidebar-nav__item:hover svg { opacity: 1; }
.sidebar-nav__item.is-active { background: var(--color-primary-light); color: var(--color-primary-dark); font-weight: 700; }
.sidebar-nav__item.is-active svg { opacity: 1; }
.sidebar-nav__badge {
  margin-left: auto; background: var(--color-danger); color: #fff;
  font-size: 10px; font-weight: 700; padding: 1px 6px;
  border-radius: var(--radius-full); min-width: 18px; text-align: center;
}
.sidebar-divider { height: 1px; background: var(--border); margin: var(--space-2) var(--space-4); }
.sidebar-user {
  padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0;
}
.sidebar-user__avatar {
  width: 32px; height: 32px; border-radius: var(--radius-full);
  background: var(--color-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.sidebar-user__info { flex: 1; min-width: 0; }
.sidebar-user__name { font-size: 12px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user__role { font-size: 10px; color: var(--text-muted); }
.sidebar-user__logout { color: var(--text-muted); flex-shrink: 0; }
.sidebar-user__logout:hover { color: var(--color-danger); }

/* Topbar internals */
.app-topbar { display: none; }
.app-topbar__title { flex: 1; font-size: 1.05rem; font-weight: 700; color: var(--text-primary); }
.app-topbar__actions { display: flex; align-items: center; gap: var(--space-2); }
.app-topbar__icon-btn {
  width: 38px; height: 38px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer;
  color: var(--text-primary); position: relative; transition: background .12s;
}
.app-topbar__icon-btn:hover { background: var(--color-primary-xlt); color: var(--color-primary); }
.app-topbar__avatar-btn {
  width: 36px; height: 36px; border-radius: var(--radius-full);
  background: var(--color-primary); color: #fff; border: none; cursor: pointer;
  font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.app-topbar__divider { width: 1px; height: 24px; background: var(--border); margin: 0 var(--space-1); }

/* ============================================================
   MAP / TRIP PLAYBACK / DEVICE / PHOTO GALLERY COMPONENTS
   (SPEC §6 core pages — views/{map,trips,stops,places,photos,devices}/,
   assets/js/trip-detail.js, assets/js/flt-rf.js). Structure ported from
   SignalTrack's session-detail/map component set (closest analog — same
   playback/legend/tabs shape), re-themed to FleetTrack's purple tokens
   (--color-primary etc.) and matched to FleetTrack's own class names.
   Everything below is token-driven so it re-themes for dark mode for
   free, same as the rest of this file's non-hero components; a small
   set of literal-color exceptions (Leaflet's own chrome) get explicit
   dark overrides at the bottom of this section.
   ============================================================ */

/* ── Map + side-panel split layout (trip detail / live map) ─────────── */
.flt-map-layout { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); align-items: start; }
@media (max-width: 900px) { .flt-map-layout { grid-template-columns: 1fr; } }

/* ── Leaflet map container ────────────────────────────────────────── */
.map-container {
  height: 420px; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border); position: relative; margin-bottom: var(--space-4);
  background: var(--bg-secondary); box-shadow: var(--shadow-sm);
}
.map-container .leaflet-container { width: 100%; height: 100%; font-family: var(--font-family); background: var(--bg-secondary); }
@media (max-width: 900px) { .map-container { height: 320px; } }

/* Fixed-bucket signal-grade legend box (SPEC §6 — legend panel, not a
   continuous gradient; built client-side from fltLegend()/FLT_TECH_COLORS). */
.map-legend-box {
  position: absolute; z-index: 500; bottom: var(--space-3); left: var(--space-3);
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3); box-shadow: var(--shadow-md); font-size: 11px;
  max-width: 200px;
}
.map-legend-box__title { font-weight: 700; margin-bottom: 4px; color: var(--text-primary); text-transform: uppercase; letter-spacing: .03em; font-size: 10px; }
.map-legend-row { display: flex; align-items: center; gap: 6px; line-height: 1.7; color: var(--text-secondary); }
.map-legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

/* Metric picker + environment indicator overlaid on the map corners */
.map-metric-select { position: absolute; z-index: 500; top: var(--space-3); right: var(--space-3); }
.map-metric-select select {
  font-size: 12px; padding: 6px 32px 6px 10px; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--card-bg); color: var(--text-primary);
  box-shadow: var(--shadow-sm); appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23625D75' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 14px;
}
.map-env-indicator {
  position: absolute; z-index: 500; top: var(--space-3); left: var(--space-3);
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 5px 10px; font-size: 11px; font-weight: 600; color: var(--text-primary); box-shadow: var(--shadow-sm);
}

/* ── Playback controls (time scrubber bar) ───────────────────────────── */
.flt-playback-bar {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); flex-wrap: wrap;
}
.flt-playback-bar input[type="range"] { flex: 1; min-width: 160px; accent-color: var(--color-primary); }
.flt-play-btn {
  width: 38px; height: 38px; border-radius: 50%; background: var(--color-primary); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.flt-play-btn:hover { background: var(--color-primary-dark); }
.flt-play-btn:active { transform: scale(.94); }
.flt-speed-group { display: flex; gap: 4px; flex-shrink: 0; }
.flt-speed-btn {
  padding: 6px 11px; font-size: 11px; font-weight: 700; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-secondary);
  cursor: pointer; transition: all var(--transition-fast);
}
.flt-speed-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.flt-speed-btn.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.flt-playback-time { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); flex-shrink: 0; min-width: 150px; text-align: right; }

/* ── Log Inspector — sample detail synced to the scrubber position ──── */
.flt-inspector {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-4); max-height: 460px; overflow-y: auto;
}
.flt-inspector h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: var(--space-3) 0 var(--space-2); }
.flt-inspector h4:first-child { margin-top: 0; }
.flt-inspector-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 4px 0; font-size: 12px; border-bottom: 1px dashed var(--border); }
.flt-inspector-row:last-child { border-bottom: none; }
.flt-inspector-row__label { color: var(--text-muted); }
.flt-inspector-row__value { font-weight: 600; color: var(--text-primary); font-family: var(--font-mono); text-align: right; }
.flt-inspector-empty { text-align: center; color: var(--text-muted); font-size: 12px; padding: var(--space-6) 0; }
.flt-mini-table { width: 100%; font-size: 11px; border-collapse: collapse; }
.flt-mini-table th { text-align: left; color: var(--text-muted); font-weight: 700; padding: 3px 4px; border-bottom: 1px solid var(--border); }
.flt-mini-table td { padding: 3px 4px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); color: var(--text-secondary); }
@media (max-width: 900px) { .flt-inspector { max-height: 320px; } }

/* ── Grade chip — RSRP/RSRQ/SINR/etc. color-graded pill. Color is set
   inline by PHP/JS via style="--g:#hex" from fltGradeMetric()/fltGrade(),
   so the chip itself carries no theme color and needs no dark override. */
.grade-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
  border-radius: var(--radius-full); font-size: 11px; font-weight: 700;
  background: color-mix(in srgb, var(--g, #94A3B8) 16%, transparent);
  color: var(--g, #64748B);
  border: 1px solid color-mix(in srgb, var(--g, #94A3B8) 35%, transparent);
  white-space: nowrap;
}
.grade-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--g, #94A3B8); flex-shrink: 0; }

/* ── Environment badge (indoor/outdoor/mixed/auto/unknown). Carries the
   same dashed-vs-solid stroke language as the map route polyline (SPEC
   §6: indoor segments render thinner/dashed, outdoor solid) so a user
   reads "indoor" the same way whether it's a line on the map or a badge
   in the inspector. ───────────────────────────────────────────────── */
.env-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px;
  border-radius: var(--radius-full); font-size: 11px; font-weight: 600;
  border: 1.5px solid transparent;
}
.env-badge--outdoor { background: var(--color-success-light); color: var(--color-success); border-style: solid; border-color: var(--color-success); }
.env-badge--indoor  { background: var(--color-info-light);    color: var(--color-info);    border-style: dashed; border-color: var(--color-info); }
.env-badge--mixed   { background: var(--color-warning-light); color: var(--color-warning); border-style: dotted; border-color: var(--color-warning); }
.env-badge--auto, .env-badge--unknown { background: var(--bg); color: var(--text-secondary); border-style: solid; border-color: var(--border); }

/* ── Tabs (trip detail: Stops / Photos / Events / AI Report) ────────── */
.flt-tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--border); margin-bottom: var(--space-4); scrollbar-width: none; padding: 0 var(--space-4); }
.flt-tabs::-webkit-scrollbar { display: none; }
.card > .flt-tabs { margin-bottom: 0; }
.flt-tab-btn {
  padding: var(--space-3) var(--space-4); font-size: var(--font-size-sm); font-weight: 600;
  color: var(--text-secondary); border-bottom: 2px solid transparent; white-space: nowrap; cursor: pointer;
  background: none; border-top: none; border-left: none; border-right: none; transition: color var(--transition-fast), border-color var(--transition-fast);
}
.flt-tab-btn:hover { color: var(--text-primary); }
.flt-tab-btn.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.flt-tab-panel { display: none; }
.flt-tab-panel.is-active { display: block; }

/* ── Trip / session header info bar ──────────────────────────────────── */
.flt-session-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.flt-session-meta { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin-top: var(--space-3); }
.flt-session-meta__item { display: flex; flex-direction: column; gap: 2px; }
.flt-session-meta__label { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 700; }
.flt-session-meta__value { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); }

/* ── Chart cards grid (RF series / speed+tech / health / stops timeline) ── */
.flt-charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
@media (max-width: 900px) { .flt-charts-grid { grid-template-columns: 1fr; } }
.chart-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-sm); }
.chart-card__title { font-size: var(--font-size-sm); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-3); display: flex; align-items: center; justify-content: space-between; }
.chart-card__canvas-wrap { position: relative; height: 240px; }
.chart-card__canvas-wrap.sm { height: 180px; }

/* ── Device status cards (Devices page) ──────────────────────────────── */
.device-card { padding: var(--space-4); }
.device-card__top { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.device-card__icon {
  width: 44px; height: 44px; border-radius: var(--radius-md);
  background: var(--color-primary-light); color: var(--color-primary-dark);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.device-card__icon.is-disabled { background: var(--bg); color: var(--text-muted); }
.device-card__label { font-weight: 700; font-size: var(--font-size-sm); color: var(--text-primary); }
.device-card__number { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.device-card__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 7px 0; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-secondary); }
.device-card__row:first-of-type { border-top: none; }
.device-card__row span:last-child { color: var(--text-primary); font-weight: 600; text-align: right; }

/* ── Filter bar (Trips / Stops / Places / Photos list filters) ──────── */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-4); margin-bottom: var(--space-4);
}
.filter-bar .form-group { margin-bottom: 0; min-width: 140px; flex: 1; }
.filter-bar .form-group--checkbox { flex: 0 0 auto; min-width: 0; padding-bottom: 10px; }
@media (max-width: 480px) {
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar .form-group { min-width: 0; }
}

/* ── Responsive photo gallery grid + lightbox trigger tiles (Photos page,
   trip-detail Photos tab). "Estimated location" uses the existing
   .badge.badge--warning — muted amber, never implies a confirmed fix. ── */
.photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (min-width: 480px) { .photo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .photo-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .photo-grid { grid-template-columns: repeat(5, 1fr); } }
.photo-grid__item {
  position: relative; border-radius: var(--radius-md); overflow: hidden; cursor: pointer;
  background: var(--bg-secondary); border: 1px solid var(--border);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.photo-grid__item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-primary-light); }
.photo-grid__item img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.photo-grid__meta {
  display: flex; align-items: center; justify-content: space-between; gap: 4px; flex-wrap: wrap;
  padding: 6px 8px; background: var(--card-bg); font-size: 10px; color: var(--text-muted); line-height: 1.5;
}
.photo-grid__meta .badge { font-size: 9px; padding: 1px 6px; line-height: 1.5; }

/* Custom checkbox used for bulk "Promote to Place" selection (Stops list) */
.stop-checkbox { width: 16px; height: 16px; accent-color: var(--color-primary); cursor: pointer; }

/* ── AI report render (markdown-lite HTML from api/v1/ai_report.php) ──── */
.ai-report-content { font-size: var(--font-size-sm); line-height: 1.7; color: var(--text-primary); }
.ai-report-content h2 { font-size: 1.05rem; font-weight: 800; color: var(--color-primary-dark); margin: var(--space-5) 0 var(--space-2); }
.ai-report-content h2:first-child { margin-top: 0; }
.ai-report-content h3 { font-size: .95rem; font-weight: 700; margin: var(--space-4) 0 var(--space-2); }
.ai-report-content ul, .ai-report-content ol { margin: var(--space-2) 0 var(--space-3) var(--space-5); list-style: disc; }
.ai-report-content ol { list-style: decimal; }
.ai-report-content li { margin-bottom: 4px; color: var(--text-primary); }
.ai-report-content p { margin-bottom: var(--space-3); color: var(--text-primary); }
.ai-report-content strong { color: var(--text-primary); font-weight: 700; }
.ai-report-meta { display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: 11px; color: var(--text-muted); margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); }
.ai-report-empty { text-align: center; padding: var(--space-10) var(--space-4); color: var(--text-muted); font-size: var(--font-size-sm); }
.ai-report-list-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.ai-report-list-item:last-child { border-bottom: none; }

/* ── Print stylesheet (Reports / AI Report tab) ──────────────────────── */
@media print {
  .app-sidebar, .app-topbar, .app-header, .bottom-nav, .flt-no-print, #loading-overlay, #confirm-modal, .toast-container { display: none !important; }
  .app-shell, .page-content, .page-inner { display: block !important; margin: 0 !important; padding: 0 !important; }
  .card { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; }
  body { background: #fff !important; }
}

/* ── Leaflet chrome dark-mode integration — leaflet.css hardcodes white
   popups/controls, so these need explicit overrides (they're literal
   colors, not tokens, unlike everything above). Both the explicit-choice
   selector and the system-preference media query are covered, matching
   the dual-block dark-mode pattern this file uses for its root tokens. ── */
[data-theme="dark"] .leaflet-popup-content-wrapper,
[data-theme="dark"] .leaflet-popup-tip {
  background: var(--card-bg); color: var(--text-primary);
  box-shadow: var(--shadow-lg);
}
[data-theme="dark"] .leaflet-popup-content-wrapper a { color: var(--color-primary-light); }
[data-theme="dark"] .leaflet-control-zoom a {
  background: var(--card-bg); color: var(--text-primary); border-color: var(--border) !important;
}
[data-theme="dark"] .leaflet-control-zoom a:hover { background: var(--bg); }
[data-theme="dark"] .leaflet-control-attribution {
  background: rgba(34,28,46,.85) !important; color: var(--text-muted);
}
[data-theme="dark"] .leaflet-control-attribution a { color: var(--color-primary-light); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .leaflet-popup-content-wrapper,
  :root:not([data-theme="light"]) .leaflet-popup-tip {
    background: var(--card-bg); color: var(--text-primary); box-shadow: var(--shadow-lg);
  }
  :root:not([data-theme="light"]) .leaflet-popup-content-wrapper a { color: var(--color-primary-light); }
  :root:not([data-theme="light"]) .leaflet-control-zoom a {
    background: var(--card-bg); color: var(--text-primary); border-color: var(--border) !important;
  }
  :root:not([data-theme="light"]) .leaflet-control-zoom a:hover { background: var(--bg); }
  :root:not([data-theme="light"]) .leaflet-control-attribution {
    background: rgba(34,28,46,.85) !important; color: var(--text-muted);
  }
  :root:not([data-theme="light"]) .leaflet-control-attribution a { color: var(--color-primary-light); }
}