/*
 * 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;
    /* Text drawn on top of a series colour (500-level fills: light text). */
    --op1-on-series: rgba(255, 255, 255, 0.95);

    /* ============= 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 */

    /* Driver coded-attribute chips — home depot / role / route competency.
       One light Material palette shared across the three dimensions so a driver's
       chips read as one set; the foreground flips with the theme (dark ink on the
       light fills here, light ink on the dark fills in .op1-dark). Home-depot light
       values replicate the client's Excel conditional formatting; Plumstead's dark
       gold is the one fill that needs light text in light mode. --op1-chip-ink-mix is
       the ink the accent is blended toward for the edit-dialog outline/selected states
       (near-black in light, near-white in dark) so those derived tones stay legible. */
    --op1-coded-chip-fg: #1a1a1a;
    --op1-chip-ink-mix: #1a1a1a;

    --op1-depot-aw-bg: #EAD1DC;   /* Abbey Wood — pink */
    --op1-depot-gp-bg: #FCE5CD;   /* Gidea Park — peach */
    --op1-depot-if-bg: #CFE2F3;   /* Ilford — light blue */
    --op1-depot-mh-bg: #EA9999;   /* Maidenhead — salmon */
    --op1-depot-oc-bg: #B4A7D6;   /* Old Oak Common — light purple */
    --op1-depot-pd-bg: #B2DFDB;   /* Paddington — Teal 100 (not in the client sheet; palette-chosen) */
    --op1-depot-pu-bg: #BF9000;   /* Plumstead — dark gold */
    --op1-depot-pu-fg: #ffffff;   /* dark gold needs light text in light mode */
    --op1-depot-rg-bg: #D7CCC8;   /* Reading — Brown 200 (not in the client sheet; palette-chosen) */
    --op1-depot-sh-bg: #D9EAD3;   /* Shenfield — light green */

    --op1-role-di-bg: #9FA8DA;    /* Instructor — Indigo 200 */
    --op1-role-dtl-bg: #AED581;   /* Team leader — Light Green 300 */
    --op1-role-pqd-bg: #FFCC80;   /* Post-qualification — Orange 200 */
    --op1-role-exp-bg: #BDBDBD;   /* Experienced — Grey 400 */

    --op1-route-reading-bg: #EF9A9A;            /* Red 200 */
    --op1-route-cos-bg: #FFE082;                /* Amber 200 */
    --op1-route-oldoakcommon-bg: #CE93D8;       /* Purple 200 */
    --op1-route-plumstead-bg: #80DEEA;          /* Cyan 200 */
    --op1-route-heathrow-bg: #A5D6A7;           /* Green 200 */
    --op1-route-haysandharlington-bg: #80CBC4;  /* Teal 200 */
    --op1-route-east-bg: #90CAF9;               /* Blue 200 (shared with Ilford Depot) */
    --op1-route-ilforddepot-bg: #90CAF9;        /* Blue 200 (shared with East) */
    --op1-route-stratford-bg: #B0BEC5;          /* Blue Grey 200 */

    /* 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: #212121;
    --timeline-now-halo: rgba(255, 255, 255, 0.55);
    --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;

    /* Plan-change before/after strip (Live Roster confirmation dialog). Consumed
       in PlanChangeStrip.razor.css, which carries matching light fallbacks. */
    --strip-border: rgba(0, 0, 0, 0.12);
    --strip-background: rgba(0, 0, 0, 0.02);
    --strip-lane-background: #f0f0f0;
    --strip-lane-label: #757575;
    --strip-block-text: #ffffff;
    --strip-assign: #487e30;
    --strip-keep: #5c6d84;
    --strip-removed: #9e9e9e;
    --strip-freed-a: #ffcdd2;
    --strip-freed-b: #ef9a9a;
    --strip-freed-border: #b71c1c;
    --strip-freed-text: #000000;
    --strip-busy: #ef6c00;
    --strip-unchanged: #eceff1;
    --strip-unchanged-border: #b0bec5;
    --strip-unchanged-text: #546e7a;
    --strip-tick: #9e9e9e;
    --strip-tick-label: #757575;
    --strip-legend-text: #757575;
}

.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 */
    /* 200/300-level fills in dark mode: dark text reads better on them. */
    --op1-on-series: rgba(0, 0, 0, 0.87);

    --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;

    /* Coded-attribute chips: dark, hue-preserving fills (same tone family as the row
       and activity dark tints above) with a light shared foreground. Plumstead's dark
       fill no longer needs its own light-mode white text. */
    --op1-coded-chip-fg: #ECEFF4;
    --op1-chip-ink-mix: #ECEFF4;

    --op1-depot-aw-bg: #4A2E3D;   /* dark mauve */
    --op1-depot-gp-bg: #4A3A28;   /* dark tan */
    --op1-depot-if-bg: #22384A;   /* dark blue */
    --op1-depot-mh-bg: #4A2A2A;   /* dark salmon */
    --op1-depot-oc-bg: #322A4A;   /* dark purple */
    --op1-depot-pd-bg: #1E3B39;   /* dark teal */
    --op1-depot-pu-bg: #5A4500;   /* dark gold */
    --op1-depot-pu-fg: #ECEFF4;
    --op1-depot-rg-bg: #3A322C;   /* dark taupe */
    --op1-depot-sh-bg: #263A28;   /* dark green */

    --op1-role-di-bg: #2E2E5C;    /* dark indigo */
    --op1-role-dtl-bg: #2E3A1E;   /* dark light-green */
    --op1-role-pqd-bg: #4A3400;   /* dark orange */
    --op1-role-exp-bg: #3A3A3A;   /* dark grey */

    --op1-route-reading-bg: #4A2A2A;
    --op1-route-cos-bg: #4A3A00;
    --op1-route-oldoakcommon-bg: #3A2544;
    --op1-route-plumstead-bg: #163C42;
    --op1-route-heathrow-bg: #24401E;
    --op1-route-haysandharlington-bg: #16403B;
    --op1-route-east-bg: #1E354A;        /* shared with Ilford Depot */
    --op1-route-ilforddepot-bg: #1E354A; /* shared with East */
    --op1-route-stratford-bg: #2E3840;

    --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: #fafafa;
    --timeline-now-halo: rgba(0, 0, 0, 0.5);
    --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;

    /* Plan-change strip dark values: authored with the component but previously
       keyed on a .mud-theme-dark class nothing applies — relocated here. The lane
       track is a dark surface (was showing the light #f0f0f0), and the assign/keep/
       removed bars are saturated so they read solidly rather than pale. */
    --strip-border: rgba(255, 255, 255, 0.12);
    --strip-background: rgba(255, 255, 255, 0.03);
    --strip-lane-background: #2b2b2b;
    --strip-lane-label: #9e9e9e;
    --strip-assign: #5a9e3f;
    --strip-keep: #5f80ba;
    --strip-removed: #707070;
    --strip-freed-a: #4a1414;
    --strip-freed-b: #6e2020;
    --strip-freed-border: #ef9a9a;
    --strip-freed-text: #ffffff;
    --strip-busy: #ff8f00;
    --strip-unchanged: #37474f;
    --strip-unchanged-border: #546e7a;
    --strip-unchanged-text: #b0bec5;
    --strip-tick: #616161;
    --strip-tick-label: #9e9e9e;
    --strip-legend-text: #9e9e9e;

    /* 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; }

/* A locally-submitted change awaiting confirmation. Gentle opacity pulse layered over the coverage tint;
   theme-agnostic, so it reads the same in light and dark. Cleared once the change is confirmed or reverted. */
.op1-row-pending { animation: op1-pending-pulse 1.2s ease-in-out infinite; }
@keyframes op1-pending-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

.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; }

/* Coded-attribute chips (home depot / role / route competency). Each code class only
   publishes its colour as --op1-chip-accent; op1-coded-chip paints the solid display
   fill from it (!important beats MudChip's own filled-variant background). The edit
   dialog re-skins the same chips via .op1-chip-select below. */
.op1-coded-chip { background-color: var(--op1-chip-accent) !important; color: var(--op1-coded-chip-fg) !important; }

.op1-depot-aw { --op1-chip-accent: var(--op1-depot-aw-bg); }
.op1-depot-gp { --op1-chip-accent: var(--op1-depot-gp-bg); }
.op1-depot-if { --op1-chip-accent: var(--op1-depot-if-bg); }
.op1-depot-mh { --op1-chip-accent: var(--op1-depot-mh-bg); }
.op1-depot-oc { --op1-chip-accent: var(--op1-depot-oc-bg); }
.op1-depot-pd { --op1-chip-accent: var(--op1-depot-pd-bg); }
.op1-depot-pu { --op1-chip-accent: var(--op1-depot-pu-bg); --op1-coded-chip-fg: var(--op1-depot-pu-fg); }
.op1-depot-rg { --op1-chip-accent: var(--op1-depot-rg-bg); }
.op1-depot-sh { --op1-chip-accent: var(--op1-depot-sh-bg); }

.op1-role-di { --op1-chip-accent: var(--op1-role-di-bg); }
.op1-role-dtl { --op1-chip-accent: var(--op1-role-dtl-bg); }
.op1-role-pqd { --op1-chip-accent: var(--op1-role-pqd-bg); }
.op1-role-exp { --op1-chip-accent: var(--op1-role-exp-bg); }

.op1-route-reading { --op1-chip-accent: var(--op1-route-reading-bg); }
.op1-route-cos { --op1-chip-accent: var(--op1-route-cos-bg); }
.op1-route-oldoakcommon { --op1-chip-accent: var(--op1-route-oldoakcommon-bg); }
.op1-route-plumstead { --op1-chip-accent: var(--op1-route-plumstead-bg); }
.op1-route-heathrow { --op1-chip-accent: var(--op1-route-heathrow-bg); }
.op1-route-haysandharlington { --op1-chip-accent: var(--op1-route-haysandharlington-bg); }
.op1-route-east { --op1-chip-accent: var(--op1-route-east-bg); }
.op1-route-ilforddepot { --op1-chip-accent: var(--op1-route-ilforddepot-bg); }
.op1-route-stratford { --op1-chip-accent: var(--op1-route-stratford-bg); }

/* Tight chip list: drop MudChip's default 4px margin and let the container gap own the
   spacing, so wrapped coded chips (e.g. route competencies) sit close together. */
.op1-chip-row { display: flex; flex-wrap: wrap; gap: 4px; }
.op1-chip-row .mud-chip { margin: 0; }

/* Edit-dialog selectable chips. Both states keep the accent ring. Unselected: the
   accent as text over a faint wash. Selected: solid accent fill with a faint tick +
   label (the fill carries the signal). Accent text/ring are blended toward
   --op1-chip-ink-mix so they stay legible whether the accent is a light (light mode) or
   dark (dark mode) fill. */
.op1-chip-select .mud-chip.op1-coded-chip {
    background-color: color-mix(in srgb, var(--op1-chip-accent) 18%, transparent) !important;
    color: color-mix(in srgb, var(--op1-chip-accent) 62%, var(--op1-chip-ink-mix)) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--op1-chip-accent) 55%, var(--op1-chip-ink-mix)) !important;
}
.op1-chip-select .mud-chip.op1-coded-chip.mud-chip-selected {
    background-color: var(--op1-chip-accent) !important;
    color: color-mix(in srgb, var(--op1-chip-ink-mix) 55%, transparent) !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); }