/* ======================================================
   Bolt Fleet Owner Portal - Design System & Stylesheet
   ====================================================== */

:root {
  /* Dark theme baseline — matches the driver page's dark palette
     (#141b2b cards, #1c2438 nested surfaces) for a consistent look
     app-wide, instead of the old separate glass/navy dark theme. */
  --bg-dark: #0B0F19;
  --bg-card: #141B2B;
  --bg-card-hover: #1A2234;
  --border-glass: rgba(255, 255, 255, 0.08);
  --border-accent: rgba(42, 120, 214, 0.4);

  /* Brand Palette (FalconPay family) */
  --brand-navy: #12203C;
  --brand-navy-mid: #162D52;
  --brand-navy-dark: #0F1F3A;
  --brand-blue: #2A78D6;
  --brand-blue-hover: #1E5AA8;
  --brand-gradient: linear-gradient(160deg, var(--brand-navy) 0%, var(--brand-navy-mid) 60%, var(--brand-navy-dark) 100%);

  /* Brand accent alias — used across buttons, badges, highlights */
  --bolt-green: var(--brand-blue);
  --bolt-green-hover: var(--brand-blue-hover);
  --bolt-green-glow: rgba(42, 120, 214, 0.25);

  --state-has-order: #16A34A;
  --state-waiting: #2A78D6;
  --state-offline: #6B7280;

  --text-main: #F1F5F9;
  --text-muted: #94A3B8;
  --text-dim: #78859C;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  --shadow-main: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 0 20px rgba(42, 120, 214, 0.25);
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  /* Theme-aware surface tokens (dark defaults) */
  --chrome-bg: #141B2B;
  --chrome-bg-strong: #141B2B;
  --legend-bg: #141B2B;
  --overlay-soft: rgba(255, 255, 255, 0.04);
  --overlay-1: rgba(255, 255, 255, 0.05);
  --overlay-2: rgba(255, 255, 255, 0.08);
  --overlay-3: rgba(255, 255, 255, 0.12);
  --chip-bg: #1C2438;
  --chip-bg-hover: #242E45;
  --hairline: rgba(255, 255, 255, 0.1);
  --card-fill: #1C2438;
  --backdrop-bg: rgba(0, 0, 0, 0.6);

  /* ---- Fleet dashboard redesign (header / driver panel / map panel) ----
     A separate, scoped token set — deliberately not reusing --bg-card,
     --state-has-order, etc. above, since those are shared by other parts
     of the app (driver's own .dpage-* page, modals) with slightly
     different values, and this redesign's colors need to match the
     handoff spec exactly. Dark defaults here; light overrides in
     body.light-theme below. */
  --fd-page-bg: #0d1117;
  --fd-surface: #161b22;
  --fd-card: #1c222b;
  --fd-card-hover: #222932;
  --fd-inset: #0d1117;
  --fd-subtle: #252b36;
  --fd-subtle-hover: #2d333d;
  --fd-list-bg: #0d1117;
  --fd-text-primary: #f3f4f6;
  --fd-text-body: #e5e7eb;
  --fd-text-secondary: #9ca3af;
  --fd-text-tertiary: #6b7280;
  --fd-brand-blue: #5b9bf0;
  --fd-brand-tile: #2a3a5c;
  --fd-star: #f5a623;
  --fd-success-text: #4ade80;
  --fd-success-tint: #12291c;
  --fd-success-badge-bg: #12291c;
  --fd-success-badge-text: #4ade80;
  --fd-waiting-text: #7cb2f5;
  --fd-waiting-tint: #132234;
  --fd-danger: #e11d48;
  --fd-border: rgba(255, 255, 255, 0.08);
  --fd-divider: rgba(255, 255, 255, 0.07);
  --fd-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.2);
  --fd-shadow-control: 0 1px 4px rgba(0, 0, 0, 0.35);
  --fd-shadow-popover: 0 3px 14px rgba(0, 0, 0, 0.4);
  --fd-shadow-menu: 0 8px 28px rgba(0, 0, 0, 0.45);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.hidden {
  display: none !important;
}

/* overflow-x belongs on html, not body — setting it on body breaks
   position: sticky headers on iOS Safari (a long-standing WebKit quirk). */
html {
  overflow-x: hidden;
}

body {
  background-color: var(--bg-dark);
  color: var(--text-main);
  /* A definite height (not min-height) so .fleet-grid's percentage/fr
     grid rows can resolve correctly on their first layout pass — without
     it, nested flex:1 chains never give the grid a definite size to
     compute against, so the browser falls back to sizing rows by content
     instead of clipping them (see .fleet-grid). Content taller than this
     (Settings, the driver's own page) still grows the page and scrolls
     normally — nothing here clips it, this only fixes the case where
     content should be capped to the screen and scroll internally. */
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(22, 163, 74, 0.04) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(42, 120, 214, 0.04) 0%, transparent 40%);
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Light Theme Overrides — matches the driver page's flat card design
   (#eef1f4 page bg, solid white cards, navy/blue accents) instead of
   the old semi-transparent glass look. */
body.light-theme {
  --bg-dark: #EEF1F4;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F9FAFB;
  --border-glass: rgba(0, 0, 0, 0.08);
  --border-accent: rgba(42, 120, 214, 0.4);

  --text-main: #111827;
  --text-muted: #6B7280;
  --text-dim: #9CA3AF;

  --shadow-main: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-glow: 0 0 20px rgba(42, 120, 214, 0.2);

  --chrome-bg: #FFFFFF;
  --chrome-bg-strong: #FFFFFF;
  --legend-bg: #FFFFFF;
  --overlay-soft: rgba(0, 0, 0, 0.03);
  --overlay-1: rgba(0, 0, 0, 0.04);
  --overlay-2: rgba(0, 0, 0, 0.06);
  --overlay-3: rgba(0, 0, 0, 0.08);
  --chip-bg: #F3F4F6;
  --chip-bg-hover: #E5E7EB;
  --hairline: rgba(0, 0, 0, 0.1);
  --card-fill: #F4F5F7;
  --backdrop-bg: rgba(15, 23, 42, 0.45);

  /* ---- Fleet dashboard redesign — light overrides ---- */
  --fd-page-bg: #eef0f3;
  --fd-surface: #ffffff;
  --fd-card: #f5f6f9;
  --fd-card-hover: #e9eaed;
  --fd-inset: #e8ebf0;
  --fd-subtle: #f2f4f7;
  --fd-subtle-hover: #e6e8ec;
  --fd-list-bg: #f7f7f8;
  --fd-text-primary: #12203c;
  --fd-text-body: #1a1a1a;
  --fd-text-secondary: #6b7280;
  --fd-text-tertiary: #9ca3af;
  --fd-brand-blue: #2a78d6;
  --fd-brand-tile: #12203c;
  --fd-star: #f5a623;
  --fd-success-text: #15803d;
  --fd-success-tint: #eafcef;
  --fd-success-badge-bg: #d9f5e3;
  --fd-success-badge-text: #15803d;
  --fd-waiting-text: #1d5fa8;
  --fd-waiting-tint: #eff6ff;
  --fd-danger: #e11d48;
  --fd-border: rgba(0, 0, 0, 0.07);
  --fd-divider: rgba(0, 0, 0, 0.06);
  --fd-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06);
  --fd-shadow-control: 0 1px 4px rgba(0, 0, 0, 0.14);
  --fd-shadow-popover: 0 3px 14px rgba(0, 0, 0, 0.16);
  --fd-shadow-menu: 0 8px 28px rgba(0, 0, 0, 0.16);
}

/* Navbar — flat 56px bar per the fleet-dashboard redesign spec (uses the
   --fd-* token set defined at the top of the file). */
.navbar {
  height: 56px;
  padding: 0 20px;
  background: var(--fd-surface);
  border-bottom: 1px solid var(--fd-border);
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  z-index: 1000;
  transition: background-color .2s, border-color .2s, color .2s;
  /* Without this, the default flex-shrink: 1 clamps the navbar to its
     pre-wrap single-line height even once its content (brand + actions)
     wraps to two lines on mobile — the second line then spills out past
     the navbar's own box onto the page background below it, instead of
     the white header actually containing both lines. */
  flex-shrink: 0;
}

/* Fixed header only when launched from the home-screen icon (standalone
   PWA) — matches how a native app behaves. A regular browser tab keeps
   the normal scrolling header. */
@media (display-mode: standalone) {
  .navbar {
    position: sticky;
    top: 0;
    padding-top: env(safe-area-inset-top);
  }
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.logo-badge {
  width: 32px;
  height: 32px;
  background: var(--fd-brand-tile);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}

.logo-icon {
  color: #FFF;
  font-size: 0.9rem;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  position: relative;
}

.brand-title {
  font-weight: 800;
  font-size: 14.5px;
  color: var(--fd-text-primary);
  cursor: pointer;
  width: fit-content;
}

.brand-company {
  font-size: 10px;
  color: var(--fd-brand-blue);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.company-switcher-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.company-switcher-btn i {
  font-size: 0.6rem;
  color: var(--fd-text-tertiary);
  transition: var(--transition);
}

.company-switcher-btn:hover i {
  color: var(--fd-text-primary);
}

.company-switcher-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  border-radius: 10px;
  box-shadow: var(--fd-shadow-menu);
  padding: 6px;
  z-index: 500;
  max-height: 60vh;
  overflow-y: auto;
}

.company-switcher-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: var(--transition);
  color: var(--fd-text-primary);
}

.company-switcher-row:hover {
  background: var(--fd-subtle);
}

.company-switcher-row.active {
  color: var(--fd-brand-blue);
  font-weight: 700;
}

.company-switcher-row.active i {
  display: inline-block;
}

.company-switcher-row i {
  display: none;
  font-size: 0.75rem;
}

/* Nav menu — "Manage Driver" / "Settings", relabeled and moved beside the
   brand block instead of the right-side icon cluster. Not a real router,
   so "active" just means that item's modal is currently open (toggled in
   openDriverAccessModal/openSettingsModal etc., public/js/app.js). */
.nav-menu {
  margin-left: 14px;
  display: flex;
  gap: 4px;
}

.nav-menu-item {
  padding: 7px 12px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fd-text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  transition: var(--transition);
}

.nav-menu-item:hover {
  background: var(--fd-subtle);
}

.nav-menu-item.active {
  font-weight: 700;
  color: var(--fd-text-primary);
  background: var(--fd-subtle);
}

.nav-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Merges the old separate "Live Syncing (3s)" and "Live (Auto-Connected)"
   pills into one chip — they said the same thing twice. */
.sync-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: 8px;
  white-space: nowrap;
  background: var(--fd-success-tint);
  border: 1px solid var(--fd-success-badge-bg);
  transition: var(--transition);
}

.sync-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fd-text-tertiary);
  flex-shrink: 0;
}

.sync-chip-dot.active {
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
  animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.sync-chip-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--fd-success-text);
}

.sync-chip-detail {
  font-size: 11px;
  font-weight: 600;
  color: var(--fd-success-text);
  opacity: 0.75;
}

.sync-chip-refresh {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--fd-success-text);
  opacity: 0.7;
  cursor: pointer;
  font-size: 0.75rem;
  transition: var(--transition);
}

.sync-chip-refresh:hover {
  opacity: 1;
}

.icon-btn {
  background: transparent;
  border: none;
  color: var(--fd-text-secondary);
  font-size: 0.95rem;
  cursor: pointer;
  transition: var(--transition);
}

.icon-btn:hover {
  color: var(--fd-text-primary);
}

/* Standalone icon buttons get a 32x32 boxed treatment. */
.nav-actions > .icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--fd-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.nav-actions > .icon-btn:hover {
  background: var(--fd-subtle-hover);
}

.nav-divider {
  width: 1px;
  height: 20px;
  background: var(--fd-border);
}

.account-avatar-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--fd-brand-tile);
  border: none;
  color: #FFF;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.account-avatar-btn[aria-expanded="true"] {
  box-shadow: 0 0 0 3px rgba(18, 32, 60, 0.18);
}

/* Account Menu */
.account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 18px;
  width: 262px;
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  border-radius: 11px;
  box-shadow: var(--fd-shadow-menu);
  overflow: hidden;
  z-index: 1500;
}

.account-menu-section {
  padding: 9px 14px;
  border-bottom: 1px solid var(--fd-divider);
}

.account-menu-section:last-of-type {
  border-bottom: none;
}

.account-menu-identity {
  padding: 13px 14px;
  display: flex;
  align-items: center;
  gap: 11px;
}

.account-menu-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--fd-brand-tile);
  color: #FFF;
  font-size: 12.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.account-menu-identity-text {
  min-width: 0;
}

.account-menu-company-name {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--fd-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu-username {
  font-size: 11.5px;
  color: var(--fd-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu-role {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.account-menu-role-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--fd-text-secondary);
}

.account-menu-role-badge {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--fd-success-text);
  background: var(--fd-success-badge-bg);
  border-radius: 5px;
  padding: 3px 8px;
}

.account-menu-row {
  width: 100%;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fd-text-primary);
  background: none;
  border: none;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
  box-sizing: border-box;
}

.account-menu-section .account-menu-row {
  padding-left: 0;
  padding-right: 0;
  margin: 0 14px;
  width: calc(100% - 28px);
}

.account-menu-row i {
  width: 16px;
  text-align: center;
  color: var(--fd-text-secondary);
  flex-shrink: 0;
}

.account-menu-row:hover {
  background: var(--fd-list-bg);
}

.account-menu-row-inert {
  cursor: default;
}

.account-menu-row-inert:hover {
  background: none;
}

.account-menu-row-trailing {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--fd-text-tertiary);
}

.account-menu-row-trailing.success {
  color: var(--fd-success-text);
}

.account-menu-logout {
  color: var(--fd-danger);
}

.account-menu-logout i {
  color: var(--fd-danger);
}

.account-menu-section-title {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--fd-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.account-menu-segmented {
  display: flex;
  background: var(--fd-subtle);
  border-radius: 7px;
  padding: 3px;
}

.account-menu-segment {
  flex: 1;
  padding: 5px 0;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fd-text-secondary);
  background: none;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: var(--transition);
}

.account-menu-segment.active {
  background: var(--fd-surface);
  color: var(--fd-text-primary);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.account-menu-version {
  padding: 8px 14px;
  background: var(--fd-list-bg);
  border-top: 1px solid var(--fd-divider);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--fd-text-tertiary);
}

/* Buttons */
.btn {
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: var(--transition);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-primary {
  background: var(--brand-gradient);
  color: #FFF;
}

.btn-primary:hover {
  background: var(--brand-blue-hover);
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--chip-bg);
  color: var(--text-main);
}

.btn-danger {
  background: rgba(239, 68, 68, 0.12);
  color: #EF4444;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

.btn-danger:hover {
  background: rgba(239, 68, 68, 0.2);
}

.btn-secondary:hover {
  background: var(--chip-bg-hover);
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--border-glass);
  color: var(--text-main);
}

.btn-outline:hover {
  border-color: var(--bolt-green);
  color: var(--bolt-green);
}

.btn-full {
  width: 100%;
}

/* ======================================================
   Portal Access Login Screen (FalconPay-style: animated mesh,
   glowing orbs, solid white card — independent of light/dark theme)
   ====================================================== */
.portal-login-screen {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  overflow: hidden;
  background: var(--brand-gradient);
}

.portal-login-screen.hidden {
  display: none;
}

#portalMeshCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.portal-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(80px);
}

.portal-orb-1 {
  width: 500px;
  height: 500px;
  background: rgba(255, 255, 255, 0.06);
  top: -120px;
  left: -120px;
}

.portal-orb-2 {
  width: 380px;
  height: 380px;
  background: rgba(42, 120, 214, 0.25);
  bottom: -80px;
  right: -80px;
}

.portal-login-wrap {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 420px;
  animation: portalCardIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes portalCardIn {
  from { opacity: 0; transform: translateY(28px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.portal-login-card {
  background: #FFF;
  border-radius: 20px;
  padding: 36px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.portal-login-logo {
  text-align: center;
  margin-bottom: 28px;
}

.portal-logo-badge {
  width: 72px;
  height: 72px;
  margin: 0 auto 10px;
  background: var(--brand-gradient);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(31, 56, 100, 0.35);
  animation: portalLogoIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.portal-logo-badge i {
  color: #FFF;
  font-size: 1.8rem;
}

@keyframes portalLogoIn {
  from { opacity: 0; transform: scale(0.6) rotate(-10deg); }
  to { opacity: 1; transform: none; }
}

.portal-login-logo h1 {
  font-size: 22px;
  font-weight: 800;
  color: var(--brand-navy);
  margin-top: 4px;
}

.portal-login-logo h1 span {
  color: var(--brand-blue);
}

.portal-login-logo p {
  font-size: 12px;
  color: #94A3B8;
  margin-top: 3px;
}

.portal-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: portalFadeUp 0.5s ease 0.2s both;
}

@keyframes portalFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.portal-form-group label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 6px;
}

.portal-form-input {
  width: 100%;
  padding: 12px 14px;
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  border-radius: 10px;
  color: #1A2744;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: all 0.2s;
}

.portal-form-input::placeholder {
  color: #94A3B8;
}

.portal-form-input:focus {
  border-color: var(--brand-blue);
  background: #FFF;
  box-shadow: 0 0 0 3px rgba(42, 120, 214, 0.12);
}

.portal-input-wrapper {
  position: relative;
}

.portal-input-wrapper .portal-form-input {
  padding-right: 42px;
}

.portal-pw-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #94A3B8;
  font-size: 15px;
  padding: 6px;
}

.portal-pw-toggle:hover {
  color: var(--brand-blue);
}

.portal-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.portal-remember input {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--brand-navy);
}

.portal-remember span {
  font-size: 12.5px;
  color: #64748B;
}

.portal-submit-btn {
  width: 100%;
  padding: 13px;
  background: var(--brand-gradient);
  border: none;
  border-radius: 10px;
  color: #FFF;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  margin-top: 4px;
  transition: all 0.2s;
}

.portal-submit-btn:hover {
  background: var(--brand-blue-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(31, 56, 100, 0.35);
}

.portal-submit-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

.portal-submit-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.portal-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #FFF;
  border-radius: 50%;
  animation: portalSpin 0.7s linear infinite;
  vertical-align: middle;
}

@keyframes portalSpin {
  to { transform: rotate(360deg); }
}

.portal-error-msg {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #DC2626;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 460px) {
  .portal-login-card {
    padding: 26px 20px;
  }
}

/* Main App Layout */
.app-container {
  flex: 1;
  /* Lets this shrink to fit the space flex:1 actually gives it (now that
     body has a definite height) instead of being forced no shorter than
     its content — needed for .fleet-grid's height:100% below to mean
     "exactly the available space" rather than "whatever content wants."
     overflow: hidden doesn't clip anything here: this element has no max
     height of its own, so it simply grows to fit taller content (Settings,
     the driver's own page) exactly as before, and the page scrolls. */
  min-height: 0;
  overflow: hidden;
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 1800px;
  margin: 0 auto;
  width: 100%;
}

/* The driver page controls its own spacing/max-width via .dpage-*
   classes, so the shared app-container shell gets out of its way. */
body.driver-page-mode .app-container {
  padding: 0;
  max-width: none;
  gap: 0;
}


/* Fleet Grid — 400px driver panel + flexible map panel, per the
   fleet-dashboard redesign spec. */
.fleet-grid {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 14px;
  /* height: 100% (of .app-container, now a definite size) rather than
     flex: 1 — a flex item that's also a multi-row grid (see the mobile
     override below) needs a definite height from its own parent for its
     grid-template-rows to resolve correctly; flex-grow alone doesn't
     reliably provide that here, and this element is never the flex
     container's only concern in a way that flex:1 was solving. */
  height: 100%;
  min-height: 600px;
}

/* Driver Panel */
.driver-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Without this, a grid item defaults to a min-height equal to its
     content's natural size, ignoring overflow entirely — so with enough
     drivers, this panel (and the whole grid row, map included) would grow
     taller than the screen instead of the driver list below scrolling on
     its own. */
  min-height: 0;
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  border-radius: 10px;
  box-shadow: var(--fd-shadow-card);
  transition: background-color .2s, border-color .2s, color .2s;
}

.driver-panel-header {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--fd-divider);
  display: flex;
  flex-direction: column;
}

.filter-tabs {
  display: flex;
  background: var(--fd-subtle);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}

.tab-btn {
  flex: 1;
  text-align: center;
  padding: 6px 0;
  background: transparent;
  border: none;
  color: var(--fd-text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: var(--transition);
}

.tab-btn .tab-count {
  color: var(--fd-text-tertiary);
}

.tab-btn.active {
  background: var(--fd-brand-tile);
  color: #FFF;
  font-weight: 700;
}

.tab-btn.active .tab-count {
  color: #FFF;
  opacity: 0.6;
}

.search-box {
  position: relative;
  width: 100%;
  margin-top: 9px;
  padding: 8px 11px;
  border-radius: 8px;
  background: var(--fd-list-bg);
  border: 1px solid var(--fd-border);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
}

.search-icon {
  color: var(--fd-text-tertiary);
  font-size: 12px;
  flex-shrink: 0;
}

.search-box input {
  width: 100%;
  background: none;
  border: none;
  color: var(--fd-text-primary);
  font-size: 12.5px;
  outline: none;
}

.search-box input::placeholder {
  color: var(--fd-text-tertiary);
}

.search-box:focus-within {
  border-color: var(--fd-brand-blue);
}

.driver-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--fd-list-bg);
}

/* White specifically (not the shared --fd-list-bg, which also backs the
   search box and account menu footer) so the driver cards' own color
   stands out clearly against it in light mode. */
body.light-theme .driver-list {
  background: #ffffff;
}

/* Custom Scrollbar */
.driver-list::-webkit-scrollbar {
  width: 6px;
}

.driver-list::-webkit-scrollbar-thumb {
  background: var(--hairline);
  border-radius: 3px;
}

/* Fleet Driver Card */
.fleet-driver-card {
  background: var(--fd-card);
  border-radius: 9px;
  padding: 12px;
  cursor: pointer;
  transition: var(--transition);
}

.fleet-driver-card:hover {
  background: var(--fd-card-hover);
}

.fleet-driver-card.selected {
  box-shadow: 0 0 0 2px var(--fd-brand-blue);
}

.fleet-driver-header {
  display: flex;
  align-items: center;
  gap: 11px;
}

.fleet-driver-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.fleet-driver-text {
  flex: 1;
  min-width: 0;
}

.fleet-driver-name-row {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.fleet-driver-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--fd-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fleet-driver-rating {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--fd-text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

.fleet-driver-rating i {
  color: var(--fd-star);
}

.fleet-driver-vehicle {
  font-size: 12px;
  color: var(--fd-text-secondary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fleet-driver-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
}

/* Status pill — soft-tinted rounded rect with a status marker, not a
   solid-color pill (deliberately different shapes for on-ride vs waiting
   so status stays distinguishable in greyscale / for colorblind users). */
.fleet-status-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.fleet-status-pill.on-ride {
  background: var(--fd-success-tint);
  color: var(--fd-success-text);
}

.fleet-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
}

.fleet-status-pill.waiting {
  background: var(--fd-waiting-tint);
  color: var(--fd-waiting-text);
}

.fleet-status-ring {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 2px solid var(--fd-brand-blue);
  box-sizing: border-box;
  flex-shrink: 0;
}

.fleet-driver-fare {
  font-size: 14px;
  font-weight: 800;
  color: var(--fd-text-primary);
  white-space: nowrap;
  padding-right: 8px;
}

/* Route box */
.fleet-route-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--fd-inset);
  border-left: 4px solid #22c55e;
  border-radius: 6px;
  padding: 9px 10px;
  margin-top: 10px;
}

.fleet-route-grid {
  display: grid;
  grid-template-columns: 10px 1fr;
  column-gap: 8px;
  row-gap: 3px;
  align-items: center;
  font-size: 12px;
  line-height: 1.5;
  width: 100%;
}

.fleet-route-marker {
  width: 8px;
  height: 8px;
  justify-self: center;
}

.fleet-route-marker.pickup {
  border-radius: 50%;
  border: 2px solid var(--fd-text-tertiary);
  box-sizing: border-box;
}

.fleet-route-marker.dropoff {
  border-radius: 2px;
  background: var(--fd-text-primary);
}

.fleet-route-marker.stop {
  border-radius: 2px;
  background: #f59e0b;
  color: #000;
  font-size: 8px;
  font-weight: 800;
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fleet-route-address {
  color: var(--fd-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fleet-route-address.dropoff {
  color: var(--fd-text-body);
  font-weight: 600;
}

/* Right Panel - Map */
.map-panel {
  position: relative;
  overflow: hidden;
  /* Fills exactly the grid row's height (same reasoning as .driver-panel
     above) — no fixed floor, so the map stays one fixed size that fits
     the screen instead of forcing the page taller. */
  min-height: 0;
  background: #e2e5e9;
  border: 1px solid var(--fd-border);
  border-radius: 10px;
  transition: background-color .2s, border-color .2s, color .2s;
}

body.dark-theme .map-panel {
  background: #1c222b;
}

.map-container {
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Zoom control — replaces Leaflet's default (zoomControl:false in initMap,
   public/js/app.js) with the redesign's own two-cell stack. */
.map-zoom-control {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 500;
  background: var(--fd-surface);
  border-radius: 8px;
  box-shadow: var(--fd-shadow-control);
  overflow: hidden;
}

.map-zoom-cell {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--fd-text-primary);
  font-size: 13px;
  cursor: pointer;
  transition: var(--transition);
}

.map-zoom-cell:hover {
  background: var(--fd-subtle);
}

.map-zoom-cell:first-child {
  border-bottom: 1px solid var(--fd-border);
}

/* Layer filters — filter map pins only, independent of the driver list's
   own tabs (see getMapFilteredDrivers, public/js/app.js). */
.map-layer-filters {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 500;
  display: flex;
  gap: 6px;
}

.map-layer-filter {
  padding: 6px 11px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  background: var(--fd-surface);
  color: var(--fd-text-secondary);
  border: none;
  box-shadow: var(--fd-shadow-control);
  cursor: pointer;
  transition: var(--transition);
}

.map-layer-filter.active {
  background: var(--fd-brand-tile);
  color: #FFF;
  font-weight: 700;
}

.map-legend {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 500;
  background: var(--fd-surface);
  padding: 9px 12px;
  border-radius: 8px;
  box-shadow: var(--fd-shadow-control);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.map-legend-title {
  font-size: 10px;
  font-weight: 800;
  color: var(--fd-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.map-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fd-text-primary);
}

.map-legend-marker {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.map-legend-marker.has_order {
  background: #22c55e;
}

.map-legend-marker.waiting_orders {
  background: none;
  border: 2px solid var(--fd-brand-blue);
  box-sizing: border-box;
}

/* Selection popover — shown over the map when a driver is selected (see
   showMapSelectionPopover, public/js/app.js). */
.map-selection-popover {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 600;
  width: 270px;
  background: var(--fd-surface);
  border-radius: 10px;
  box-shadow: var(--fd-shadow-popover);
  overflow: hidden;
}

.map-selection-popover-top {
  padding: 11px 13px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.map-selection-popover-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.map-selection-popover-info {
  flex: 1;
  min-width: 0;
}

.map-selection-popover-name {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--fd-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-selection-popover-sub {
  font-size: 11px;
  color: var(--fd-text-secondary);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-selection-popover-fare {
  font-size: 15px;
  font-weight: 800;
  color: var(--fd-text-primary);
  flex-shrink: 0;
}

.map-selection-popover-actions {
  padding: 0 13px 11px;
  display: flex;
  gap: 6px;
}

.map-selection-popover-actions .btn {
  flex: 1;
  padding: 7px 0;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 700;
}

.map-selection-popover-actions .btn-primary {
  background: var(--fd-brand-tile);
  color: #FFF;
}

.map-selection-popover-actions .btn-secondary {
  background: var(--fd-subtle);
  color: var(--fd-text-primary);
}

/* Modal & Drawer Component */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--backdrop-bg);
  backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 1;
  transition: var(--transition);
}

.modal-backdrop.hidden {
  display: none;
  opacity: 0;
  pointer-events: none;
}

.glass-modal {
  background: var(--chrome-bg-strong);
  backdrop-filter: blur(24px);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
  position: relative;
  max-width: 650px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-close-btn {
  position: absolute;
  top: 16px;
  right: 18px;
  background: var(--chip-bg);
  border: none;
  color: var(--text-muted);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.modal-close-btn:hover {
  background: var(--chip-bg-hover);
  color: var(--text-main);
}

/* Modal Content Styles */
.modal-detail-wrapper {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.modal-header-profile {
  display: flex;
  align-items: center;
  gap: 18px;
}

.modal-driver-title h2 {
  font-size: 1.35rem;
  font-weight: 800;
}

.payment-icon {
  font-size: 0.8em;
  vertical-align: middle;
  margin-left: 2px;
}

.payment-icon-cash { color: #F59E0B; }
.payment-icon-card { color: var(--brand-blue); }
.payment-icon-wallet { color: #A855F7; }
.payment-icon-business { color: #64748B; }

/* Full-Screen Driver Map */
.full-map-overlay {
  position: fixed;
  inset: 0;
  z-index: 6000;
  background: var(--bg-dark);
}

.full-map-overlay.hidden {
  display: none;
}

.full-map-container {
  width: 100%;
  height: 100%;
}

/* Leaflet's own top-left zoom controls (+/-) also need to clear the
   notch/status-bar area, same as the close button above. */
.full-map-container .leaflet-top {
  margin-top: env(safe-area-inset-top);
}

.full-map-container .leaflet-left {
  margin-left: env(safe-area-inset-left);
}

.full-map-close-btn {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top));
  right: calc(16px + env(safe-area-inset-right));
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--brand-gradient);
  border: none;
  border-radius: var(--radius-full);
  color: #FFF;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.35);
  transition: background-color 0.2s ease, transform 0.2s ease;
  /* Promote to its own compositing layer so Leaflet's zoom-animation
     transforms on the sibling map never cause it to flicker/repaint. */
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}

.full-map-close-btn:hover {
  background: #EF4444;
  transform: translateY(-1px) translateZ(0);
}

/* Loading State */
.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: var(--text-muted);
  gap: 12px;
}

.loading-spinner i {
  font-size: 2rem;
  color: var(--bolt-green);
}

/* Admin: Manage Driver Access */
.driver-access-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 50vh;
  overflow-y: auto;
  padding-right: 4px;
}

.access-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--card-fill);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 0.9rem 1rem;
  transition: var(--transition);
}

.access-row-disabled {
  opacity: 0.5;
}

.access-row-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.access-row-name {
  font-weight: 600;
  font-size: 0.95rem;
}

.access-row-detail {
  font-size: 0.8rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.access-row-password-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 0.78rem;
}

.access-row-password-label {
  color: var(--text-dim);
}

.access-row-password-value {
  font-family: 'SF Mono', 'Courier New', monospace;
  color: var(--text-main);
  font-weight: 600;
}

.access-row-password-custom-badge {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--brand-blue);
  background: rgba(42, 120, 214, 0.15);
  border: 1px solid rgba(42, 120, 214, 0.3);
  border-radius: var(--radius-full);
  padding: 1px 6px;
}

.access-row-edit-password-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 2px 5px;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  transition: var(--transition);
}

.access-row-edit-password-btn:hover {
  color: var(--brand-blue);
  background: var(--overlay-2);
}

.access-row-presence {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 0.75rem;
  color: var(--text-dim);
}

.access-row-password-edit {
  background: var(--overlay-1);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 0.75rem 0.9rem;
  margin-top: 6px;
}

.access-password-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.access-password-edit-actions .btn {
  padding: 6px 12px;
  font-size: 0.8rem;
}

.access-list-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 2rem;
  color: var(--text-muted);
  text-align: center;
}

.companies-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.company-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 12px;
  background: var(--card-fill);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 0.9rem 1rem;
  transition: var(--transition);
}

.company-row-name {
  font-weight: 600;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.company-row-active-badge {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--brand-blue);
  background: rgba(42, 120, 214, 0.15);
  border: 1px solid rgba(42, 120, 214, 0.3);
  border-radius: var(--radius-full);
  padding: 1px 6px;
}

.company-row-remove-btn {
  background: none;
  border: none;
  color: #EF4444;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.company-row-remove-btn:hover {
  background: rgba(239, 68, 68, 0.12);
}

.company-row-wrapper {
  display: flex;
  flex-direction: column;
}

.company-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.company-row-icon-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  transition: var(--transition);
}

.company-row-icon-btn:hover {
  color: var(--bolt-green);
  background: var(--overlay-2);
}

.company-row-sign-out-btn {
  background: none;
  border: 1px solid var(--border-glass);
  color: var(--text-muted);
  cursor: pointer;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  transition: var(--transition);
}

.company-row-sign-out-btn:hover {
  border-color: var(--bolt-green);
  color: var(--bolt-green);
}

.company-row-sign-out-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.company-row-edit {
  background: var(--overlay-1);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.company-row-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.company-row-edit-actions .btn {
  padding: 7px 14px;
  font-size: 0.82rem;
}

.access-list-error i {
  font-size: 1.75rem;
  color: #EF4444;
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background: var(--chip-bg);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-full);
  transition: var(--transition);
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--text-main);
  border-radius: 50%;
  transition: var(--transition);
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--bolt-green);
  border-color: var(--bolt-green);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translate(18px, -50%);
  background: #FFF;
}

.toggle-switch input:disabled + .toggle-slider {
  cursor: not-allowed;
  opacity: 0.6;
}

/* ======================================================
   Driver Self-Service Page — a distinct, self-contained light-theme
   design used only for a signed-in driver's own view. Deliberately
   separate from the admin dashboard's dark/glass styling, so this
   can change freely without touching the admin experience.
   ====================================================== */
body.driver-page-mode {
  background: #eef1f4;
}

.driver-own-content {
  width: 100%;
}

/* ---- Driver Page Header (compact card, own header replacing the navbar) ---- */
.dph-card {
  width: 100%;
  background: #ffffff;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  /* Extends the header's own background up behind the notch/status bar
     instead of leaving that area showing the page background, and
     pushes the actual header content down below it. */
  padding-top: env(safe-area-inset-top);
}

.dph-row1 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px 8px;
}

.dph-logo {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #12203c;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dph-logo svg {
  width: 12px;
  height: 12px;
}

.dph-title-block {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1.2;
  min-width: 0;
}

.dph-title {
  font-size: 14px;
  font-weight: 800;
  color: #12203c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dph-subtitle {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #2a78d6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dph-divider {
  height: 1px;
  margin: 0 24px;
  background: rgba(0, 0, 0, 0.06);
}

.dph-row2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 24px;
  gap: 8px;
  flex-wrap: wrap;
}

.dph-sync {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
}

.dph-sync-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
}

.dph-sync-dot.offline {
  background: #9ca3af;
}

.dph-refresh-btn {
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 11px;
  padding: 2px;
  transition: var(--transition);
}

.dph-refresh-btn:hover {
  color: #6b7280;
}

.dph-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dph-icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  flex-shrink: 0;
  transition: var(--transition);
}

.dph-moon {
  background: #f3f4f6;
  color: #374151;
}

.dph-moon:hover {
  background: #e5e7eb;
}

.dph-shield {
  background: #d3f2df;
  color: #16a34a;
  cursor: default;
}

.dph-logout {
  background: #fde8e8;
  color: #e11d48;
}

.dph-logout:hover {
  background: #fbd0d0;
}

.dph-action-divider {
  width: 1px;
  height: 16px;
  background: rgba(0, 0, 0, 0.1);
}

/* Dark mode — reuses this page's established dark palette */
body.dark-theme .dph-card {
  background: #141b2b;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.dark-theme .dph-title {
  color: #f1f5f9;
}

body.dark-theme .dph-subtitle {
  color: #2a78d6;
}

body.dark-theme .dph-divider {
  background: rgba(255, 255, 255, 0.08);
}

body.dark-theme .dph-sync {
  color: #e5e7eb;
}

body.dark-theme .dph-refresh-btn {
  color: #78859c;
}

body.dark-theme .dph-refresh-btn:hover {
  color: #94a3b8;
}

body.dark-theme .dph-moon {
  background: #1c2438;
  color: #cbd5e1;
}

body.dark-theme .dph-moon:hover {
  background: #242e45;
}

body.dark-theme .dph-shield {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
}

body.dark-theme .dph-logout {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

body.dark-theme .dph-logout:hover {
  background: rgba(239, 68, 68, 0.25);
}

body.dark-theme .dph-action-divider {
  background: rgba(255, 255, 255, 0.1);
}

.dpage-root {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #111827;
}

.dpage-content {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 20px 24px;
}

@media (min-width: 860px) {
  .dpage-content {
    max-width: 1080px;
  }
}

.dpage-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 860px) {
  .dpage-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Admin's driver modal — same cards, but the modal itself is capped
   narrower than a full page even on wide viewports, so the grid stays
   single-column regardless of the breakpoint above. */
.dpage-modal-context {
  padding: 24px;
}

.dpage-modal-context .dpage-grid {
  grid-template-columns: 1fr;
}

/* ---- Profile Card ---- */
.dpage-card {
  background: #fff;
  border-radius: 24px;
  padding: 24px 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.dpage-profile-top {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.dpage-avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 3px solid #3b82f6;
  background: #e5e7eb;
  object-fit: cover;
  flex-shrink: 0;
}

/* Lets the name's ellipsis actually kick in instead of overflowing the
   card — flex items don't shrink below their content's natural width
   by default. */
.dpage-profile-info {
  flex: 1;
  min-width: 0;
}

.dpage-name {
  font-size: 19px;
  font-weight: 800;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dpage-rating-row {
  font-size: 15px;
  font-weight: 600;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.dpage-phone-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.dpage-phone {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
}

.dpage-status-pill {
  font-weight: 800;
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 20px;
  white-space: nowrap;
}

.dpage-status-pill-has_order {
  background: #dcfce7;
  color: #16a34a;
}

.dpage-status-pill-waiting_orders {
  background: #dbeafe;
  color: #2563eb;
}

.dpage-status-pill-offline {
  background: #e2e8f0;
  color: #64748b;
}

.dpage-info-cards {
  margin-top: 18px;
}

.dpage-info-row {
  display: flex;
  gap: 8px;
}

.dpage-info-card {
  background: #f4f5f7;
  border-radius: 14px;
  padding: 10px 14px;
}

.dpage-info-card.vehicle {
  flex: 2.2;
  min-width: 0;
}

.dpage-info-card.vehicle.full-width {
  flex: 1;
}

.dpage-info-card.online {
  flex: 1;
  min-width: 0;
}

.dpage-info-card.categories {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

/* Label and value are each forced to a single line (truncating with an
   ellipsis only if genuinely too long for the card) so these cards
   always hold to a predictable 2-line height instead of the label
   itself wrapping and pushing the card to 3 lines. */
.dpage-info-label {
  font-size: 12px;
  color: #6b7280;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dpage-info-value {
  font-size: 12px;
  font-weight: 800;
  color: #111827;
  display: block;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dpage-category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dpage-category-pill {
  background: #e2e5ea;
  color: #374151;
  font-size: 10px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 16px;
}

.dpage-category-pill.active {
  background: #dbeafe;
  color: #1d4ed8;
  border: 1px solid #93c5fd;
}

/* ---- Ride Info Card ---- */
.dpage-ride-card {
  background: #f4faf6;
  border: 1px solid #d1ead9;
  border-radius: 18px;
  padding: 20px;
}

.dpage-ride-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 10px;
  flex-wrap: wrap;
}

.dpage-ride-title {
  font-size: 17px;
  font-weight: 800;
  color: #16a34a;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dpage-ride-pill {
  background: #dcfce7;
  color: #16a34a;
  font-size: 12px;
  font-weight: 800;
  padding: 7px 14px;
  border-radius: 16px;
  text-transform: uppercase;
  white-space: nowrap;
}

.dpage-route-rail {
  display: flex;
  flex-direction: column;
}

.dpage-route-node {
  display: flex;
  gap: 12px;
}

.dpage-route-marker-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dpage-route-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #16a34a;
  flex-shrink: 0;
}

.dpage-route-square {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: #ef4444;
  flex-shrink: 0;
}

.dpage-route-line {
  width: 2px;
  flex: 1;
  background: #a7f3d0;
  min-height: 24px;
}

.dpage-route-text {
  padding-bottom: 16px;
}

.dpage-route-label {
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.dpage-route-value {
  font-size: 16px;
  font-weight: 800;
  color: #111827;
  margin-top: 2px;
}

.dpage-subcard {
  background: #fff;
  border-radius: 14px;
  padding: 12px 14px;
  margin-top: 14px;
}

.dpage-fare-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.dpage-fare-label {
  font-size: 13px;
  color: #6b7280;
}

.dpage-fare-value {
  font-size: 22px;
  font-weight: 800;
  color: #16a34a;
  white-space: nowrap;
}

.dpage-fare-caption {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 2px;
}

.dpage-fare-category {
  font-weight: 800;
  color: #374151;
}

.dpage-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 10px 0;
}

.dpage-distance-label {
  font-size: 13px;
  color: #6b7280;
}

.dpage-distance-value {
  font-size: 16px;
  font-weight: 800;
  color: #111827;
  margin-top: 2px;
}

.dpage-no-ride {
  text-align: center;
  padding: 2rem 1rem;
  color: #6b7280;
}

.dpage-no-ride i {
  font-size: 1.8rem;
  color: #16a34a;
  margin-bottom: 10px;
}

.dpage-map-card {
  background: #fff;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.dpage-map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: #6b7280;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.dpage-map-header span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dpage-map-hint {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 600;
  color: #9ca3af;
}

.dpage-mini-map {
  width: 100%;
  height: 240px;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
}

/* ---- Dark mode ---- */
body.dark-theme.driver-page-mode {
  background: #0b0f19;
}

body.dark-theme .dpage-root {
  color: #f1f5f9;
}

body.dark-theme .dpage-card,
body.dark-theme .dpage-subcard,
body.dark-theme .dpage-map-card {
  background: #141b2b;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

body.dark-theme .dpage-avatar {
  background: #2a3548;
}

body.dark-theme .dpage-name,
body.dark-theme .dpage-phone,
body.dark-theme .dpage-route-value,
body.dark-theme .dpage-distance-value,
body.dark-theme .dpage-info-value {
  color: #f1f5f9;
}

body.dark-theme .dpage-rating-row,
body.dark-theme .dpage-fare-category {
  color: #cbd5e1;
}

body.dark-theme .dpage-ride-pill,
body.dark-theme .dpage-status-pill-has_order {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
}

body.dark-theme .dpage-status-pill-waiting_orders {
  background: rgba(96, 165, 250, 0.18);
  color: #60a5fa;
}

body.dark-theme .dpage-status-pill-offline {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
}

body.dark-theme .dpage-info-card {
  background: #1c2438;
}

body.dark-theme .dpage-info-label,
body.dark-theme .dpage-route-label,
body.dark-theme .dpage-fare-label,
body.dark-theme .dpage-distance-label,
body.dark-theme .dpage-map-header {
  color: #94a3b8;
}

body.dark-theme .dpage-fare-caption,
body.dark-theme .dpage-map-hint {
  color: #78859c;
}

body.dark-theme .dpage-category-pill {
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
}

body.dark-theme .dpage-category-pill.active {
  background: rgba(42, 120, 214, 0.18);
  color: #60a5fa;
  border-color: rgba(96, 165, 250, 0.4);
}

body.dark-theme .dpage-ride-card {
  background: rgba(74, 222, 128, 0.06);
  border-color: rgba(74, 222, 128, 0.2);
}

body.dark-theme .dpage-ride-title,
body.dark-theme .dpage-fare-value,
body.dark-theme .dpage-no-ride i {
  color: #4ade80;
}

body.dark-theme .dpage-no-ride {
  color: #94a3b8;
}

body.dark-theme .dpage-route-dot {
  background: #4ade80;
}

body.dark-theme .dpage-route-square {
  background: #f87171;
}

body.dark-theme .dpage-route-line {
  background: rgba(74, 222, 128, 0.3);
}

body.dark-theme .dpage-divider {
  background: rgba(255, 255, 255, 0.1);
}

/* Admin: Settings — a real full-page section (navbar stays visible, unlike
   the driver's own page), not a modal. */
.settings-page {
  width: 100%;
  display: flex;
  justify-content: center;
}

.settings-page-inner {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background: var(--card-fill);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 1.75rem 2rem 2rem;
}

.settings-page-header h1 {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 2px;
}

.settings-page-header-hint {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.settings-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-glass);
}

.settings-section:first-of-type {
  padding-top: 0;
  border-top: none;
}

.settings-section-title {
  font-size: 1rem;
  font-weight: 700;
}

.settings-section-hint {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.settings-form-group label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.settings-form-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--overlay-2);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  color: var(--text-main);
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
  transition: var(--transition);
}

.settings-form-input:focus {
  border-color: var(--bolt-green);
  box-shadow: 0 0 10px rgba(42, 120, 214, 0.2);
}

.settings-status {
  font-size: 0.82rem;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}

.settings-status-success {
  background: rgba(22, 163, 74, 0.1);
  color: #16A34A;
  border: 1px solid rgba(22, 163, 74, 0.3);
}

.settings-status-error {
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.admin-login-log {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
}

.admin-login-log-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: var(--overlay-1);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
}

.admin-login-log-time {
  color: var(--text-main);
  font-weight: 600;
}

.admin-login-log-ip {
  color: var(--text-dim);
  font-size: 0.78rem;
}

/* ======================================================
   Responsive Adjustments
   ====================================================== */

/* Tablets / small laptops — stacked (driver list above map) instead of
   side-by-side. Every driver shows in full, no internal scroll — the
   panel grows to fit them all, same as .app-container already does for
   Settings/the driver's own page, and the page scrolls if that's taller
   than the screen. The map keeps one fixed height below it. */
@media (max-width: 1100px) {
  /* .app-container normally clips to exactly the available space (see
     the base rule) so the desktop grid can't overflow the viewport — but
     that only works by giving it an explicit min-height: 0, which also
     defeats the browser's normal "flex items don't shrink below their
     content" safety net. Undoing that here is what lets this stacked
     layout grow past the viewport when it needs to, instead of clipping
     drivers off the bottom. */
  .app-container {
    min-height: auto;
    overflow: visible;
  }

  /* Plain block stacking instead of a grid — a multi-row grid nested in
     a flex chain fights to stay a fixed size (see the desktop fix above),
     which is exactly what mobile shouldn't do here: every driver must
     show, so this needs to grow with content and let the page scroll. */
  .fleet-grid {
    display: block;
    height: auto;
    flex-shrink: 0;
    min-height: 0;
  }

  .driver-panel {
    overflow: visible;
  }

  .driver-list {
    flex: none;
    overflow-y: visible;
  }

  .map-panel {
    height: 400px;
    min-height: 400px;
    margin-top: 14px;
  }
}

/* Tablets / large phones */
@media (max-width: 768px) {
  .navbar {
    height: auto;
    min-height: 64px;
    padding: 10px 1rem;
    padding-top: calc(10px + env(safe-area-inset-top));
    /* One line, not wrapped: brand on the left, Live status + account menu
       on the right — matches the two-section header pattern most apps
       use. Fits by trimming both sides down (brand text truncates, the
       sync chip drops to icon-only) rather than stacking them. */
    flex-wrap: nowrap;
  }

  /* min-width: 0 (not overflow: hidden) — the company switcher dropdown
     is positioned inside .brand-text, so clipping overflow here would
     also clip the dropdown itself off-screen. Truncation instead lives
     on .brand-title/.brand-company directly below, which doesn't have
     that problem since nothing needs to render outside their own box. */
  .nav-brand {
    flex: 1 1 auto;
    min-width: 0;
  }

  .brand-text {
    min-width: 0;
  }

  .brand-title {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .company-switcher-btn {
    min-width: 0;
    max-width: 100%;
  }

  .brand-company {
    display: inline-block;
    max-width: 140px;
    vertical-align: bottom;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .map-legend {
    display: none;
  }

  .nav-actions {
    width: auto;
    flex-wrap: nowrap;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
  }

  /* Keeps the "Live" label but drops the more verbose "· synced Xs ago"
     detail, so this still fits on the same line as the brand instead of
     needing its own row (see .navbar above). */
  .sync-chip {
    padding: 4px 8px;
    gap: 4px;
  }

  .sync-chip-detail,
  .nav-menu-item {
    display: none;
  }

  .icon-btn {
    font-size: 0.85rem;
  }

  .brand-title {
    font-size: 1rem;
  }

  .app-container {
    padding: 1rem;
    gap: 1rem;
  }

  .driver-panel-header {
    padding: 0.75rem;
  }

  .filter-tabs {
    overflow-x: auto;
  }

  .fleet-driver-card {
    padding: 10px;
  }

  .modal-container.glass-modal {
    max-width: 100%;
    max-height: 100%;
  }

  /* Deliberately NOT zeroed to 0 — a modal tall enough to need its full
     max-height (Settings, with five sections, easily is) would otherwise
     sit flush against the screen edges with nowhere for its rounded
     corners to actually show, while a shorter modal (Manage Driver
     Access) stays centered with visible margin — same CSS, but one reads
     as rounded and the other as square purely from content length. A
     small reserved margin on every side keeps every modal's corners
     visible regardless of how much content it holds. */
  .modal-backdrop {
    padding: 12px;
    padding-top: calc(12px + env(safe-area-inset-top));
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  .modal-detail-wrapper {
    padding: 1.25rem;
    gap: 1rem;
  }

  .modal-header-profile {
    flex-wrap: wrap;
  }
}

/* Phones */
@media (max-width: 480px) {
  .nav-brand {
    gap: 8px;
  }

  .logo-badge {
    width: 36px;
    height: 36px;
  }

  .brand-title {
    font-size: 0.9rem;
  }

  .brand-company {
    font-size: 0.65rem;
  }

  .filter-tabs {
    flex-wrap: nowrap;
  }

  .tab-btn {
    padding: 6px 8px;
    font-size: 0.72rem;
  }

  .search-box input {
    font-size: 0.8rem;
  }

  .fleet-driver-avatar {
    width: 38px;
    height: 38px;
  }

  .fleet-driver-name {
    font-size: 14px;
  }

  .map-legend {
    bottom: 10px;
    right: 10px;
    padding: 8px 10px;
    font-size: 0.68rem;
  }

  .modal-driver-title h2 {
    font-size: 1.1rem;
  }

  .settings-page-inner {
    padding: 1.25rem 1rem 1.5rem;
  }
}