/* ============================================================
   Material Design 3 design tokens — shared across all apps.
   Seed: blue (#2f6fed). Dark is default; [data-theme="light"] overrides.
   Old aliases (--bg/--card/--accent/--text/--muted/--outline) kept
   at the bottom so existing component CSS keeps working.
   ============================================================ */
:root {
  color-scheme: dark;

  /* --- Primary --- */
  --md-primary: #cfbdfe;
  --md-on-primary: #36275d;
  --md-primary-container: #4d3d75;
  --md-on-primary-container: #e9ddff;

  /* --- Secondary --- */
  --md-secondary: #cbc2db;
  --md-on-secondary: #332d41;
  --md-secondary-container: #4a4458;
  --md-on-secondary-container: #e8def8;

  /* --- Tertiary --- */
  --md-tertiary: #efb8c8;
  --md-on-tertiary: #4a2532;
  --md-tertiary-container: #633b48;
  --md-on-tertiary-container: #ffd9e3;

  /* --- Error --- */
  --md-error: #ffb4ab;
  --md-on-error: #690005;
  --md-error-container: #93000a;
  --md-on-error-container: #ffdad6;

  /* --- Semantic status (extended roles, not in core M3).
         Theme-switching text colors used for warnings, delays,
         countdown urgency, occupancy, etc. --- */
  --status-good: #8bd99f;
  --status-warn: #ffb454;
  --status-bad: #ffb4ab;
  --md-warning: var(--status-warn); /* legacy alias (home badge) */

  /* --- Surfaces (tonal elevation) --- */
  --md-surface: #141218;
  --md-on-surface: #e6e0e9;
  --md-on-surface-variant: #cac4cf;
  --md-surface-container-lowest: #0f0d13;
  --md-surface-container-low: #1d1b20;
  --md-surface-container: #211f24;
  --md-surface-container-high: #2b292f;
  --md-surface-container-highest: #36343a;

  /* --- Outline --- */
  --md-outline: #948f99;
  --md-outline-variant: #49454e;

  /* --- Inverse --- */
  --md-inverse-surface: #e6e0e9;
  --md-inverse-on-surface: #322f35;
  --md-inverse-primary: #65558f;

  /* --- State-layer opacities (M3 spec) --- */
  --md-state-hover: 0.08;
  --md-state-focus: 0.10;
  --md-state-pressed: 0.10;
  --md-state-dragged: 0.16;

  /* --- Shape scale (corner radius) --- */
  --md-shape-xs: 4px;
  --md-shape-sm: 8px;
  --md-shape-md: 12px;
  --md-shape-lg: 16px;
  --md-shape-xl: 28px;
  --md-shape-full: 999px;

  /* --- Elevation (M3 dark uses tonal + shadow) --- */
  --md-elev-0: none;
  --md-elev-1: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15);
  --md-elev-2: 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15);
  --md-elev-3: 0 4px 8px 3px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.3);
  --md-elev-4: 0 6px 10px 4px rgba(0,0,0,0.15), 0 2px 3px rgba(0,0,0,0.3);

  /* --- Type scale (Roboto). label/body/title/headline/display --- */
  --md-font: 'Roboto', 'Noto Sans Malayalam', 'Vazirmatn', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --md-display-small: 700 2.25rem/2.75rem var(--md-font);
  --md-headline-small: 600 1.5rem/2rem var(--md-font);
  --md-title-large: 700 1.375rem/1.75rem var(--md-font);
  --md-title-medium: 500 1rem/1.5rem var(--md-font);
  --md-title-small: 500 0.875rem/1.25rem var(--md-font);
  --md-body-large: 400 1rem/1.5rem var(--md-font);
  --md-body-medium: 400 0.875rem/1.25rem var(--md-font);
  --md-body-small: 400 0.75rem/1rem var(--md-font);
  --md-label-large: 500 0.875rem/1.25rem var(--md-font);
  --md-label-medium: 500 0.75rem/1rem var(--md-font);
  --md-label-small: 500 0.6875rem/1rem var(--md-font);
}

:root[data-theme="light"] {
  color-scheme: light;

  --md-primary: #65558f;
  --md-on-primary: #ffffff;
  --md-primary-container: #e9ddff;
  --md-on-primary-container: #201047;

  --md-secondary: #625b71;
  --md-on-secondary: #ffffff;
  --md-secondary-container: #e8def8;
  --md-on-secondary-container: #1e192b;

  --md-tertiary: #7e5260;
  --md-on-tertiary: #ffffff;
  --md-tertiary-container: #ffd9e3;
  --md-on-tertiary-container: #31101d;

  --md-error: #ba1a1a;
  --md-on-error: #ffffff;
  --md-error-container: #ffdad6;
  --md-on-error-container: #410002;

  /* Semantic status — darker for contrast on light surfaces */
  --status-good: #1e6b3a;
  --status-warn: #8a5d00;
  --status-bad: #ba1a1a;

  --md-success: #1e6b3a;
  --md-on-success: #ffffff;
  --md-warning: #8a5d00;
  --md-on-warning: #ffffff;

  --md-surface: #fdf7ff;
  --md-on-surface: #1d1b20;
  --md-on-surface-variant: #49454e;
  --md-surface-container-lowest: #ffffff;
  --md-surface-container-low: #f8f2fa;
  --md-surface-container: #f2ecf4;
  --md-surface-container-high: #ece6ee;
  --md-surface-container-highest: #e6e0e9;

  --md-outline: #7a757f;
  --md-outline-variant: #cac4cf;

  --md-inverse-surface: #322f35;
  --md-inverse-on-surface: #f5eff7;
  --md-inverse-primary: #cfbdfe;

  --md-elev-1: 0 1px 2px rgba(20,30,50,0.1), 0 1px 3px 1px rgba(20,30,50,0.05);
  --md-elev-2: 0 1px 2px rgba(20,30,50,0.1), 0 2px 6px 2px rgba(20,30,50,0.06);
  --md-elev-3: 0 4px 8px 3px rgba(20,30,50,0.06), 0 1px 3px rgba(20,30,50,0.1);
  --md-elev-4: 0 6px 10px 4px rgba(20,30,50,0.07), 0 2px 3px rgba(20,30,50,0.1);
}

/* ============================================================
   Back-compat aliases — map the apps' existing var names onto
   M3 roles. Lets old component CSS keep working unchanged.
   ============================================================ */
:root {
  --bg: var(--md-surface);
  --card: var(--md-surface-container);
  --card-high: var(--md-surface-container-high);
  --accent: var(--md-primary);
  --on-accent: var(--md-on-primary);
  --primary-container: var(--md-primary-container);
  --on-primary-container: var(--md-on-primary-container);
  --text: var(--md-on-surface);
  --muted: var(--md-on-surface-variant);
  --outline: var(--md-outline-variant);
}

/* ============================================================
   Shared M3 component helpers (opt-in classes).
   ============================================================ */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* M3 state layer: put on a positioned, overflow-hidden element. */
.md-state {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.md-state::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
  z-index: -1;
}
.md-state:hover::after { opacity: var(--md-state-hover); }
.md-state:focus-visible::after { opacity: var(--md-state-focus); }
.md-state:active::after { opacity: var(--md-state-pressed); }

/* Visible focus ring everywhere (a11y) */
:where(button, a, input, [tabindex]):focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

/* M3 filled button */
.md-btn-filled {
  min-height: 40px;
  padding: 10px 24px;
  border: none;
  border-radius: var(--md-shape-full);
  background: var(--md-primary);
  color: var(--md-on-primary);
  font: var(--md-label-large);
  cursor: pointer;
}

/* ============================================================
   Right-to-left (Persian). Flip the bits that use physical
   direction; flex/grid layouts mirror automatically under dir=rtl.
   ============================================================ */
[dir="rtl"] body { text-align: right; }
[dir="rtl"] .day-arrow svg { transform: scaleX(-1); }
[dir="rtl"] .chev { transform: scaleX(-1); }
[dir="rtl"] .route { border-left: none; border-right: 4px solid var(--outline); border-radius: 16px 4px 4px 16px; }
[dir="rtl"] .route.chosen { border-right-color: var(--accent); }
[dir="rtl"] .route-num { margin-right: 0; margin-left: 9px; }
[dir="rtl"] .ts-change, [dir="rtl"] .trip-summary .ts-change { margin-left: 0; margin-right: auto; }
[dir="rtl"] .day-temp { margin-left: 0; margin-right: auto; }
[dir="rtl"] .strip-chevron { margin-left: 0; margin-right: auto; }
[dir="rtl"] .route-legs { padding-left: 0; padding-right: 18px; }
[dir="rtl"] .route-legs::before { left: auto; right: 5px; }
[dir="rtl"] .leg-stop .dot { left: auto; right: -16px; }
[dir="rtl"] .occupancy, [dir="rtl"] .delay-tag, [dir="rtl"] .leg-meta { margin-left: 0; margin-right: 6px; }

/* M3 icon button — 48dp target. Shared by every app header. */
.icon-btn {
  width: 48px;
  height: 48px;
  border: none;
  border-radius: var(--md-shape-full);
  background: var(--md-surface-container-high);
  color: var(--md-on-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease;
}
.icon-btn:hover { background: var(--md-surface-container-highest); }
.icon-btn:active { transform: scale(0.92); }