/*
 * OP1 app-tier theme tokens and semantic classes.
 * See Documentation/Theming.md.
 *
 * Layers: :root holds the complete light value set; .op1-dark overrides every
 * themed token; .op1-kiosk is a delta applied on top of dark. The layers are
 * selected by classes on the layout wrapper element (driven by ThemeState).
 * Client deltas are rendered from configuration into #op1-client-theme and win
 * by cascade order.
 *
 * Values are drawn from the Material palette where possible; the chosen tone is
 * recorded in a comment. C# never holds these values — components emit the
 * semantic classes (or var() references) only.
 */

:root {
    /* ================== Shared tokens ==================
       Reused across views; new features may adopt these. */

    /* Delay bands — chip/indicator pairs (light values predate Material naming) */
    --op1-delay-late-20-bg: hotpink;
    --op1-delay-late-20-fg: black;
    --op1-delay-late-19-bg: red;
    --op1-delay-late-19-fg: white;
    --op1-delay-late-9-bg: orange;
    --op1-delay-late-9-fg: black;
    --op1-delay-late-4-bg: yellow;
    --op1-delay-late-4-fg: black;
    --op1-delay-on-time-bg: lime;
    --op1-delay-on-time-fg: black;
    --op1-delay-early-4-bg: aquamarine;
    --op1-delay-early-4-fg: black;
    --op1-delay-early-9-bg: turquoise;
    --op1-delay-early-9-fg: black;
    --op1-delay-early-19-bg: dodgerblue;
    --op1-delay-early-19-fg: black;
    --op1-delay-early-20-bg: gainsboro;
    --op1-delay-early-20-fg: blueviolet;
    --op1-delay-unknown-bg: gainsboro;
    --op1-delay-unknown-fg: blueviolet;

    /* Passenger load bands — filled-chip backgrounds with a shared foreground.
       The fg pairs with the band backgrounds in every layer: if a layer re-tunes
       the bands (e.g. lighter dark tones), it must re-tune the fg with them. */
    --op1-passenger-load-low: #8BC34A;        /* Light Green 500 */
    --op1-passenger-load-medium: #388E3C;     /* Green 700 */
    --op1-passenger-load-high: #F44336;       /* Red 500 */
    --op1-passenger-load-very-high: #2196F3;  /* Blue 500 */
    --op1-passenger-load-none: #000000;
    --op1-passenger-load-fg: white;

    /* Table row states */
    --op1-row-selected-bg: #E3F2FD;      /* Blue 50 */
    --op1-row-hover-bg: #BBDEFB;         /* Blue 100 */
    --op1-row-swapped-bg: #FFF8E1;       /* Amber 50 */
    --op1-row-uncovered-bg: #FFEBEE;     /* Red 50 */
    --op1-row-partial-bg: #FFE0B2;       /* Orange 100 */
    --op1-row-covered-bg: #E8F5E9;       /* Green 50 */
    --op1-row-future-bg: #E3F2FD;        /* Blue 50 */

    /* Heavy frame around primary content panels (trips/departures panels, layout popovers) */
    --op1-panel-border: black;

    /* Boundary for floating overlays (dialogs, popovers, menus). Light mode relies
       on elevation shadows, so no line is drawn; dark shadows are invisible against
       the dark surface, so the dark layer draws a faint outline instead. */
    --op1-overlay-border: transparent;

    /* Headcode highlight */
    --op1-highlight-bg: #FFFF00;
    --op1-highlight-fg: black;

    /* Categorical series wheel — order is contract, see Theming.md */
    --op1-series-1: #9C27B0;   /* Purple 500 */
    --op1-series-2: #F44336;   /* Red 500 */
    --op1-series-3: #3F51B5;   /* Indigo 500 */
    --op1-series-4: #2196F3;   /* Blue 500 */
    --op1-series-5: #009688;   /* Teal 500 */
    --op1-series-6: #4CAF50;   /* Green 500 */
    --op1-series-7: #FF9800;   /* Orange 500 */
    --op1-series-8: #607D8B;   /* Blue Grey 500 */
    --op1-series-none: #000000;

    /* ============= Feature-specific tokens =============
       One owning feature each; named for what they encode there.
       Do not borrow for other features — promote to a shared
       token deliberately instead (see Documentation/Theming.md). */

    /* Crew activity tints (crew line diagram) */
    --op1-activity-pnb-bg: #E2E2FF;
    --op1-activity-imm-bg: #FFFBE3;
    --op1-activity-taxi-bg: #FFFBE3;
    --op1-activity-rel-bg: #ECFFE3;
    --op1-activity-ceb-bg: #FFAB91;      /* Deep Orange 200 */

    /* Timetable: station at a control ownership boundary — tint chosen to keep
       labels legible against the mud success/info/warning/error colours */
    --op1-control-boundary-bg: #E8EAF6;  /* Indigo 50 */

    /* External service status severities (NR status widgets) */
    --op1-status-severe: #E1251B;
    --op1-status-minor: #FF6600;
    --op1-status-normal: #00782A;
    --op1-status-unknown: #666666;

    /* Driver availability tints */
    --op1-driver-available-bg: #C8E6C9;    /* Green 100 */
    --op1-driver-pending-bg: #FFECB3;      /* Amber 100 */
    --op1-driver-unavailable-bg: #FFCDD2;  /* Red 100 */

    /* Tabs (diagram search) */
    /* Diagram-search tabs recreate the browser-tab idiom: the ACTIVE tab aliases
       the surface so it visually merges with the content panel below it — in both
       modes, whatever surface currently is. Inactive tabs recede: a grey step away
       from surface, with secondary text. (Aliasing mud tokens at :root is safe —
       MudThemeProvider re-emits them at :root, so same-scope substitution tracks
       the mode; only cross-scope aliases freeze.) */
    --op1-tab-bg: #E0E0E0;                 /* Grey 300 */
    --op1-tab-fg: var(--mud-palette-text-secondary);
    --op1-tab-active-bg: var(--mud-palette-surface);
    --op1-tab-active-fg: var(--mud-palette-text-primary);

    /* Current-activity emphasis border */
    --op1-current-activity-border: #4CAF50;   /* Green 500 */

    /* Diagram search: frame marking the selected unit/crew diagram summaries */
    --op1-selected-diagram-border: darkblue;

    /* Kiosk alert banner */
    --op1-alert-critical-bg: #B71C1C;      /* Red 900 */
    --op1-alert-warning-bg: #E65100;       /* Orange 900 */

    /* Overview map (Google Maps) line work — strokes render outside the DOM, so
       mapping.js resolves these tokens with getComputedStyle at draw time. The map
       is recreated on theme changes, which re-draws the lines with the new values. */
    --op1-map-track: #0E0E0E;
    --op1-map-train-geometry: #6950A1;   /* Elizabeth Line purple */

    /* Driver timeline bar (Live Roster). Consumed in DriverTimelineBar.razor.css,
       which carries matching light fallbacks in its var() references. */
    --timeline-off: #e0e0e0;
    --timeline-available: #c8e6c9;
    --timeline-available-target: #43a047;
    --timeline-busy: #ef5350;
    --timeline-busy-period: #e65100;
    --timeline-now: #d32f2f;
    --timeline-target-line: #1976d2;
    --timeline-range-line: #7b1fa2;
    --timeline-tick: #9e9e9e;
    --timeline-tick-label: #757575;
    --timeline-score-good: #2e7d32;
    --timeline-score-partial: #f57c00;
    --timeline-score-poor: #d32f2f;
}

.op1-dark {
    /* Delay bands: darker, desaturated backgrounds with the explicit foregrounds
       they were designed against. The op1-delay-row-* classes reference these same
       tokens directly in their rule bodies, so rows track the active layer.
       Two traps to avoid here (see Theming.md):
       - `inherit` as a token value does not pass through var(); CSS-wide keywords
         apply to the custom property itself and resolve to the parent scope's
         (light) values.
       - a token that aliases another token (--a: var(--b)) substitutes where it is
         DECLARED, not where it is used — an alias declared at :root freezes the
         light values even for elements inside .op1-dark. */
    --op1-delay-late-20-bg: #d65a9a;
    --op1-delay-late-20-fg: black;
    --op1-delay-late-19-bg: #d63333;
    --op1-delay-late-19-fg: white;
    --op1-delay-late-9-bg: #d68a00;
    --op1-delay-late-9-fg: black;
    --op1-delay-late-4-bg: #cccc00;
    --op1-delay-late-4-fg: black;
    --op1-delay-on-time-bg: #33cc33;
    --op1-delay-on-time-fg: black;
    --op1-delay-early-4-bg: #66ccaa;
    --op1-delay-early-4-fg: black;
    --op1-delay-early-9-bg: #33b3a6;
    --op1-delay-early-9-fg: black;
    --op1-delay-early-19-bg: #3d8fe0;
    --op1-delay-early-19-fg: black;
    --op1-delay-early-20-bg: #b0b0b0;
    --op1-delay-early-20-fg: blueviolet;
    --op1-delay-unknown-bg: #b0b0b0;
    --op1-delay-unknown-fg: blueviolet;

    --op1-passenger-load-low: #7CB342;        /* Light Green 600 */
    --op1-passenger-load-medium: #2E7D32;     /* Green 800 */
    --op1-passenger-load-high: #D32F2F;       /* Red 700 */
    --op1-passenger-load-very-high: #1976D2;  /* Blue 700 */
    --op1-passenger-load-none: #616161;       /* Grey 700 */

    --op1-overlay-border: rgba(255, 255, 255, 0.16);

    /* Selection/hover are tints in light mode (Blue 50/100 over white); the dark
       values mirror that feel as translucent washes over the surface rather than
       opaque fills — solid Indigo 900 read as an ink blot. */
    --op1-row-selected-bg: #0D47A14D;    /* Blue 900 @ 30% */
    --op1-row-hover-bg: #0D47A133;       /* Blue 900 @ 20% */
    --op1-row-swapped-bg: #4A3600;
    --op1-row-uncovered-bg: #4A1414;
    --op1-row-partial-bg: #4A2B00;
    --op1-row-covered-bg: #1B3A1B;
    --op1-row-future-bg: #0D47A120;      /* Blue 900 @ 12% */
    --op1-control-boundary-bg: #1A237E33;        /* Indigo 900 @ 20% */

    --op1-activity-pnb-bg: #2E2E5C;      /* dark lavender */
    --op1-activity-imm-bg: #3E3A1E;      /* dark cream */
    --op1-activity-taxi-bg: #3E3A1E;     /* dark cream */
    --op1-activity-rel-bg: #24401E;      /* dark pale-green */
    --op1-activity-ceb-bg: #4F2A1D;      /* dark salmon */

    --op1-panel-border: #9E9E9E;         /* Grey 500 */

    /* The highlight must pop against the dark surface — a muted tone defeats its
       purpose. Yellow 500 keeps the light-mode reading without pure-#FFFF00 glare. */
    --op1-highlight-bg: #FFEB3B;         /* Yellow 500 */
    --op1-highlight-fg: black;

    --op1-series-1: #CE93D8;   /* Purple 200 */
    --op1-series-2: #E57373;   /* Red 300 */
    --op1-series-3: #7986CB;   /* Indigo 300 */
    --op1-series-4: #64B5F6;   /* Blue 300 */
    --op1-series-5: #4DB6AC;   /* Teal 300 */
    --op1-series-6: #81C784;   /* Green 300 */
    --op1-series-7: #FFB74D;   /* Orange 300 */
    --op1-series-8: #90A4AE;   /* Blue Grey 300 */
    --op1-series-none: #E0E0E0;  /* Grey 300 */

    --op1-status-severe: #EF5350;   /* Red 400 */
    --op1-status-minor: #FF8A65;    /* Deep Orange 300 */
    --op1-status-normal: #66BB6A;   /* Green 400 */
    --op1-status-unknown: #9E9E9E;  /* Grey 500 */

    --op1-driver-available-bg: #1B3A1B;
    --op1-driver-pending-bg: #4A3600;
    --op1-driver-unavailable-bg: #4A1414;

    --op1-map-track: #9E9E9E;               /* Grey 500 — legible on dark tiles */
    --op1-map-train-geometry: #B39DDB;      /* Deep Purple 200 */

    /* Driver timeline dark values: authored with the component but previously
    keyed on a .mud-theme-dark class nothing applies — relocated here. */
    --timeline-off: #424242;
    --timeline-available: #2e7d32;
    --timeline-available-target: #66bb6a;
    --timeline-busy: #e53935;
    --timeline-busy-period: #ff8f00;
    --timeline-now: #ff7043;
    --timeline-target-line: #42a5f5;
    --timeline-range-line: #ce93d8;
    --timeline-tick: #616161;
    --timeline-tick-label: #9e9e9e;
    --timeline-score-good: #66bb6a;
    --timeline-score-partial: #ffb74d;
    --timeline-score-poor: #ef5350;

    /* Inactive tabs only: the active tab keeps tracking surface via the :root alias. */
    --op1-tab-bg: #424242;               /* Grey 800 */

    --op1-current-activity-border: #81C784;  /* Green 300 */

    --op1-selected-diagram-border: #7986CB;  /* Indigo 300 */
}

/* .op1-kiosk — kiosk inherits dark and currently has no deltas of its own.
   When a deliberate kiosk-only value is needed, reintroduce the ruleset here;
   the wrapper already emits the class (see Theming.md). */

/* ---- Semantic classes ------------------------------------------------- */

/* Row variants deliberately reference the chip tokens: substitution happens at the
   consuming element, so rows follow whichever layer is active. Do not introduce
   --op1-delay-row-* alias tokens at :root — they would freeze the light values.

   Row-level semantic backgrounds are !important: MudBlazor's striped and hover
   rules use ~6-class-deep selectors that outweigh any sane semantic class, and a
   row's state must always beat decorative striping (the pre-migration inline
   styles won implicitly). */

.op1-delay-late-20 { background-color: var(--op1-delay-late-20-bg); color: var(--op1-delay-late-20-fg); }
.op1-delay-late-19 { background-color: var(--op1-delay-late-19-bg); color: var(--op1-delay-late-19-fg); }
.op1-delay-late-9 { background-color: var(--op1-delay-late-9-bg); color: var(--op1-delay-late-9-fg); }
.op1-delay-late-4 { background-color: var(--op1-delay-late-4-bg); color: var(--op1-delay-late-4-fg); }
.op1-delay-on-time { background-color: var(--op1-delay-on-time-bg); color: var(--op1-delay-on-time-fg); }
.op1-delay-early-4 { background-color: var(--op1-delay-early-4-bg); color: var(--op1-delay-early-4-fg); }
.op1-delay-early-9 { background-color: var(--op1-delay-early-9-bg); color: var(--op1-delay-early-9-fg); }
.op1-delay-early-19 { background-color: var(--op1-delay-early-19-bg); color: var(--op1-delay-early-19-fg); }
.op1-delay-early-20 { background-color: var(--op1-delay-early-20-bg); color: var(--op1-delay-early-20-fg); }
.op1-delay-unknown { background-color: var(--op1-delay-unknown-bg); color: var(--op1-delay-unknown-fg); }

.op1-delay-row-late-20 { background-color: var(--op1-delay-late-20-bg) !important; color: var(--op1-delay-late-20-fg); }
.op1-delay-row-late-19 { background-color: var(--op1-delay-late-19-bg) !important; color: var(--op1-delay-late-19-fg); }
.op1-delay-row-late-9 { background-color: var(--op1-delay-late-9-bg) !important; color: var(--op1-delay-late-9-fg); }
.op1-delay-row-late-4 { background-color: var(--op1-delay-late-4-bg) !important; color: var(--op1-delay-late-4-fg); }
.op1-delay-row-on-time { background-color: var(--op1-delay-on-time-bg) !important; color: var(--op1-delay-on-time-fg); }
.op1-delay-row-early-4 { background-color: var(--op1-delay-early-4-bg) !important; color: var(--op1-delay-early-4-fg); }
.op1-delay-row-early-9 { background-color: var(--op1-delay-early-9-bg) !important; color: var(--op1-delay-early-9-fg); }
.op1-delay-row-early-19 { background-color: var(--op1-delay-early-19-bg) !important; color: var(--op1-delay-early-19-fg); }
.op1-delay-row-early-20 { background-color: var(--op1-delay-early-20-bg) !important; color: var(--op1-delay-early-20-fg); }
.op1-delay-row-unknown { background-color: var(--op1-delay-unknown-bg) !important; color: var(--op1-delay-unknown-fg); }

.op1-passenger-load-low { background-color: var(--op1-passenger-load-low); }
.op1-passenger-load-medium { background-color: var(--op1-passenger-load-medium); }
.op1-passenger-load-high { background-color: var(--op1-passenger-load-high); }
.op1-passenger-load-very-high { background-color: var(--op1-passenger-load-very-high); }
.op1-passenger-load-none { background-color: var(--op1-passenger-load-none); }

.op1-row-selected { background-color: var(--op1-row-selected-bg) !important; }
.op1-row-hover { background-color: var(--op1-row-hover-bg) !important; }
.op1-row-swapped { background-color: var(--op1-row-swapped-bg) !important; }
.op1-row-uncovered { background-color: var(--op1-row-uncovered-bg) !important; }
.op1-row-partial { background-color: var(--op1-row-partial-bg) !important; }
.op1-row-covered { background-color: var(--op1-row-covered-bg) !important; }
.op1-row-future { background-color: var(--op1-row-future-bg) !important; }
.op1-control-boundary { background-color: var(--op1-control-boundary-bg) !important; }

.op1-activity-pnb { background-color: var(--op1-activity-pnb-bg) !important; }
.op1-activity-imm { background-color: var(--op1-activity-imm-bg) !important; }
.op1-activity-taxi { background-color: var(--op1-activity-taxi-bg) !important; }
.op1-activity-rel { background-color: var(--op1-activity-rel-bg) !important; }
.op1-activity-ceb { background-color: var(--op1-activity-ceb-bg) !important; }

.op1-highlight { background-color: var(--op1-highlight-bg); color: var(--op1-highlight-fg); }

.op1-status-severe { background-color: var(--op1-status-severe); }
.op1-status-minor { background-color: var(--op1-status-minor); }
.op1-status-normal { background-color: var(--op1-status-normal); }
.op1-status-unknown { background-color: var(--op1-status-unknown); }

.op1-driver-available { background-color: var(--op1-driver-available-bg) !important; }
.op1-driver-pending { background-color: var(--op1-driver-pending-bg) !important; }
.op1-driver-unavailable { background-color: var(--op1-driver-unavailable-bg) !important; }

/* Station-group names are coloured from per-client configuration, which supplies a
   single mode-invariant value (chosen against light surfaces). The element sets
   --op1-station-group-colour inline; the dark layer lightens it with color-mix so
   the config stays single-valued. */
.op1-station-group-name { color: var(--op1-station-group-colour); }
.op1-dark .op1-station-group-name { color: color-mix(in srgb, var(--op1-station-group-colour) 60%, white); }

.op1-tab { background-color: var(--op1-tab-bg); color: var(--op1-tab-fg); }
.op1-tab-active { background-color: var(--op1-tab-active-bg); color: var(--op1-tab-active-fg); }

.op1-current-activity { border-color: var(--op1-current-activity-border) !important; }

.op1-strike { text-decoration: line-through; }

/* Floating overlays get a boundary where shadows cannot provide one (see the
   --op1-overlay-border token). Menus render inside popovers, so both are covered. */
.mud-dialog { border: 1px solid var(--op1-overlay-border); }
.mud-popover { border: 1px solid var(--op1-overlay-border); }