/* Scoped maintenance Home. Existing navigation, roster cards and status colors remain. */
.fa-home-maintenance { padding:12px; color:var(--text); }
.fa-home-maintenance-toolbar,.fa-home-maintenance-controls,.fa-home-selected-heading { display:flex;align-items:center;gap:10px;flex-wrap:wrap; }
.fa-home-maintenance-toolbar>strong { font-size:14px; }
.fa-home-maintenance-toolbar>span { flex:1;color:var(--text2);font-size:11px; }
.fa-home-maintenance-kpis { display:grid;grid-template-columns:repeat(6,minmax(115px,1fr));gap:8px;margin:10px 0; }
.fa-home-kpi { display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:10px;border:1px solid var(--border2);border-radius:7px;background:var(--bg2);color:var(--text);text-align:left;cursor:pointer; }
.fa-home-kpi>span { display:flex;align-items:center;gap:5px;font-size:11px; }
.fa-home-kpi strong { font-size:22px;line-height:1.15;font-variant-numeric:tabular-nums; }
.fa-home-kpi small { color:var(--text2);font-size:10px; }
.fa-home-kpi[aria-pressed=true],.fa-home-unit[aria-pressed=true] { border-color:var(--text);box-shadow:inset 3px 0 0 var(--text);background:var(--bg3); }
.fa-home-kpi:disabled { cursor:default;opacity:1;color:var(--text3);border-style:dashed; }
.fa-home-maintenance-controls { margin-bottom:8px;font-size:11px; }
.fa-home-maintenance-controls label { display:flex;align-items:center;gap:7px; }
.fa-home-maintenance-controls input { min-width:200px;max-width:100%;padding:6px 8px;border:1px solid var(--border2);border-radius:5px;background:var(--bg2);color:var(--text); }
#fa-home-visible-count { margin-left:auto;color:var(--text2);font-variant-numeric:tabular-nums; }
.fa-home-maintenance-workspace { display:grid;grid-template-columns:minmax(0,1fr) 340px;border:1px solid var(--border2);border-radius:7px;overflow:hidden;min-height:360px; }
.fa-home-map-wrap { position:relative;min-width:0;background:var(--bg2); }
#fa-home-map { height:410px;width:100%; }
#fa-home-map-note { position:relative;z-index:1;background:var(--bg2);color:var(--text2);padding:7px 10px;font-size:11px;margin:0;border-top:1px solid var(--border2); }
.fa-home-unit-list { max-height:454px;overflow:auto;border-left:1px solid var(--border2);background:var(--bg); }
.fa-home-unit { width:100%;display:flex;flex-direction:column;align-items:stretch;gap:4px;text-align:left;border:0;border-bottom:1px solid var(--border2);border-left:3px solid transparent;padding:9px 10px;color:var(--text);background:var(--bg2);cursor:pointer;font-size:11px; }
.fa-home-unit-name { display:flex;align-items:center;gap:6px;font-size:13px; }
.fa-home-unit small { color:var(--text2);font-size:10px; }
.fa-home-unit-name small { margin-left:auto;text-transform:capitalize; }
.fa-home-selected-unit { margin-top:10px;border:1px solid var(--border2);border-radius:7px;padding:12px;background:var(--bg2);font-size:12px; }
.fa-home-selected-heading>strong { display:flex;align-items:center;gap:6px;flex:1; }
.fa-home-selected-heading small { font-size:11px;font-weight:400;color:var(--text2);text-transform:capitalize; }
.fa-home-selected-grid { display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:12px; }
.fa-home-selected-grid section { min-width:0;overflow-wrap:anywhere; }
.fa-home-selected-grid section>strong { font-size:11px; }
.fa-home-selected-grid p,.fa-home-selected-grid li { color:var(--text2);line-height:1.5;margin:5px 0; }
.fa-home-selected-grid ul { margin:5px 0;padding-left:15px; }
.fa-home-selected-grid small { display:block;line-height:1.5;color:var(--text2);font-size:10px; }
.fa-home-evidence-note,.fa-home-empty { font-size:11px;line-height:1.5;color:var(--text2);padding:4px 0;margin:5px 0 0; }
.fa-home-map-marker { border:0;background:transparent; }
.fa-home-map-pin { display:inline-flex;align-items:center;gap:4px;white-space:nowrap;padding:5px 7px;background:var(--bg2);color:var(--text);border:1.5px solid var(--text);border-radius:5px;box-shadow:0 2px 5px #0004;font-size:11px; }
.fa-home-map-pin small { font-size:9px;border-left:1px solid currentColor;padding-left:4px; }
.fa-home-map-pin.is-selected { outline:2px solid var(--text);outline-offset:3px; }
.fa-home-map-pin.is-stale { border-style:dashed; }
.fa-home-maintenance :is(button,input):focus-visible { outline:2px solid var(--text);outline-offset:3px; }
@media(max-width:1100px) { .fa-home-maintenance-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); }.fa-home-maintenance-workspace { grid-template-columns:minmax(0,1fr) 280px; } }
@media(max-width:750px) { .fa-home-maintenance-workspace { grid-template-columns:1fr; }.fa-home-unit-list { border-left:0;border-top:1px solid var(--border2);max-height:260px; }#fa-home-map { height:280px; }.fa-home-selected-grid { grid-template-columns:1fr;gap:10px; }.fa-home-maintenance-controls label { width:100%; }.fa-home-maintenance-controls input { min-width:0;flex:1; } }

/* ── COLOUR (operator 2026-09-09: "red for urgent yellow logic" and "the page
   is too black and white missing our designs"). The pane shipped monochrome —
   every KPI, pin and row drawn in var(--text) on var(--bg2) — so nothing on it
   could be triaged at a glance, which is the only reason to put a map on a
   landing page.

   Two tiers, the operator's own split: RED is act-now (engine stop/protect
   lamp, service already overdue), YELLOW is plan-it (a fault that is not a
   stop, low efficiency, service coming due). A tile with a count of ZERO stays
   neutral — colour marks work waiting, not a category that exists. And a unit
   with no evidence is grey rather than green, so an unmonitored truck can
   never read as a clean one. */
.fa-home-kpi.is-urgent.has-count { border-color:var(--red,#dc2626);background:color-mix(in srgb, var(--red,#dc2626) 9%, var(--bg2)); }
.fa-home-kpi.is-urgent.has-count strong { color:var(--red,#dc2626); }
.fa-home-kpi.is-warn.has-count { border-color:var(--orange,#ea580c);background:color-mix(in srgb, var(--orange,#ea580c) 9%, var(--bg2)); }
.fa-home-kpi.is-warn.has-count strong { color:var(--orange,#ea580c); }
.fa-home-kpi:not(.has-count) strong { color:var(--text3); }
.fa-home-kpi:hover:not(:disabled) { border-color:var(--text2); }
.fa-home-kpi:focus-visible { outline:2px solid var(--gold,#F5A800);outline-offset:2px; }

/* Map pins carry the same two tiers, so the map and the KPI row agree. */
.fa-home-map-pin.is-urgent { border-color:var(--red,#dc2626);color:var(--red,#dc2626);box-shadow:0 2px 6px color-mix(in srgb, var(--red,#dc2626) 45%, transparent); }
.fa-home-map-pin.is-warn { border-color:var(--orange,#ea580c);color:var(--orange,#ea580c); }
.fa-home-map-pin.is-urgent small,.fa-home-map-pin.is-warn small { border-left-color:currentColor;font-weight:700; }
/* Selection must still win over tier colour — it is the thing you just clicked. */
.fa-home-map-pin.is-selected { outline:2px solid var(--gold,#F5A800);outline-offset:3px;z-index:1000; }

/* The unit list reads as a triage queue: a coloured left edge per tier. */
.fa-home-unit.is-urgent { border-left-color:var(--red,#dc2626); }
.fa-home-unit.is-warn { border-left-color:var(--orange,#ea580c); }
.fa-home-unit:hover { background:var(--bg3); }

/* Quick filters — the second row, derived from the loaded units so they work
   even when a server count is missing and its KPI is disabled. */
.fa-home-quick-filters { display:flex;flex-wrap:wrap;gap:6px;margin:0 0 9px; }
.fa-home-chip { display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--border2);border-radius:999px;background:var(--bg2);color:var(--text2);font-size:11px;cursor:pointer; }
.fa-home-chip small { font-variant-numeric:tabular-nums;color:var(--text3);font-size:10px; }
.fa-home-chip:hover { border-color:var(--text2);color:var(--text); }
.fa-home-chip[aria-pressed=true] { border-color:var(--gold,#F5A800);color:var(--text);background:var(--bg3); }
.fa-home-chip.is-urgent[aria-pressed=true] { border-color:var(--red,#dc2626);color:var(--red,#dc2626); }
.fa-home-chip.is-warn[aria-pressed=true] { border-color:var(--orange,#ea580c);color:var(--orange,#ea580c); }
.fa-home-chip:focus-visible { outline:2px solid var(--gold,#F5A800);outline-offset:2px; }

/* Leaflet's own controls are white boxes by default — theme them, or the map
   looks like a different application in dark mode. */
#fa-home-map .leaflet-control-zoom a { background:var(--bg2);color:var(--text);border-color:var(--border2); }
#fa-home-map .leaflet-control-zoom a:hover { background:var(--bg3); }
#fa-home-map .leaflet-control-attribution { background:color-mix(in srgb, var(--bg2) 82%, transparent);color:var(--text3); }