[x-cloak]{display:none!important}

  /* ── THEME TOKENS (Teleste display family — SNCF re-skin) ──────────── */
  /* navy scale · cyan primary (titles/links/active) · gold action buttons */
  :root{
    --c-base:#0d1825;   --c-surface:#16273b; --c-raised:#1b3047;
    --c-border:#22364f; --c-border2:#2c4564;
    --c-tx1:#e7edf5;    --c-tx2:#8aa0b8;     --c-tx3:#5d7186;
    --c-ghost-bg:#1b3047; --c-ghost-hover:#22364f;
    --c-row-hover:rgba(79,182,230,.08);
    --c-sc-track:#16273b; --c-sc-thumb:#2c4564;
    /* aliases used by views + Perry */
    --c-bg:#0d1825; --c-bg1:#16273b; --c-bg2:#1b3047;
    --c-accent:#4fb6e6;     /* cyan — primary */
    --c-accent-dim:#2c6f96;
    --c-cyan-bg:#12324a;    /* active nav tint */
    --c-gold:#f2c517;       /* gold — actions */
    --c-gold-dim:#6f5d12;
    --c-sidebar:#0b1421;
  }

  /* ── BASE ─────────────────────────────────────────── */
  body{font-family:system-ui,sans-serif;background:var(--c-base);color:var(--c-tx1)}
  ::-webkit-scrollbar{width:6px;height:6px}
  ::-webkit-scrollbar-track{background:var(--c-sc-track)}
  ::-webkit-scrollbar-thumb{background:var(--c-sc-thumb);border-radius:3px}
  #map{height:100%;min-height:480px;isolation:isolate}

  /* ── SIDEBAR (always dark; nav icons + labels in WHITE) ───────────── */
  .sidebar-item{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:8px;cursor:pointer;font-size:.85rem;font-weight:500;transition:all .15s;color:#ffffff;position:relative}
  .sidebar-item svg,.sidebar-item img{color:#ffffff}
  .sidebar-item:hover{background:var(--c-surface);color:#ffffff}
  .sidebar-item.active{background:var(--c-cyan-bg);color:#ffffff}
  .sidebar-item.active::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 2px 2px 0;background:var(--c-gold)}
  /* white SVG line icons (inherit white text colour via currentColor) */
  .sidebar-item .nav-ic{display:flex;align-items:center;justify-content:center;width:20px;color:#ffffff;opacity:.92}
  .sidebar-item.active .nav-ic{opacity:1}
  .sidebar-item .nav-ic svg{width:18px;height:18px}
  /* settings tab icons (inherit tab text colour) */
  .tab-ic{display:inline-flex;align-items:center}
  .tab-ic svg{width:15px;height:15px}

  /* ── COMPONENTS ───────────────────────────────────── */
  .card{background:var(--c-surface);border-radius:12px;border:1px solid var(--c-border);padding:1.25rem}
  /* Shared modal chrome — the identical Family-A backdrop + close ✕ used across ~21
     modals. Exact equivalents of the Tailwind utilities they replace (behavior-
     invariant): centralizing them means a modal restyle happens in one place. */
  .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:50;padding:1rem}
  .modal-x{color:#94a3b8;font-size:1.25rem;line-height:1.75rem}
  .modal-x:hover{color:#ffffff}
  .badge-online{background:#065f46;color:#6ee7b7;padding:2px 9px;border-radius:999px;font-size:.72rem;font-weight:600}
  .badge-offline{background:#7f1d1d;color:#fca5a5;padding:2px 9px;border-radius:999px;font-size:.72rem;font-weight:600}
  .btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:8px;font-size:.82rem;font-weight:600;cursor:pointer;transition:all .15s;border:none}
  .btn-primary{background:var(--c-gold);color:#1a1605}.btn-primary:hover{background:#ffd227}
  .btn-danger{background:#991b1b;color:#fff}.btn-danger:hover{background:#7f1d1d}
  .btn-ghost{background:var(--c-ghost-bg);color:var(--c-tx1)}.btn-ghost:hover{background:var(--c-ghost-hover)}
  .btn-sm{padding:4px 10px;font-size:.75rem}
  .input{background:var(--c-raised);border:1px solid var(--c-border);color:var(--c-tx1);border-radius:8px;padding:7px 12px;font-size:.84rem;width:100%}
  .input:focus{outline:none;border-color:#3b82f6}
  /* Date/time pickers: let the browser draw the native calendar icon in the theme's scheme so it stays
     visible (on the dark theme the default icon would be black-on-dark → invisible). Clicking the field
     opens the picker (see showPicker in the markup). */
  input[type="date"],input[type="datetime-local"],input[type="time"],input[type="month"],input[type="week"]{color-scheme:dark;cursor:pointer}
  input[type="date"]::-webkit-calendar-picker-indicator,
  input[type="datetime-local"]::-webkit-calendar-picker-indicator,
  input[type="time"]::-webkit-calendar-picker-indicator,
  input[type="month"]::-webkit-calendar-picker-indicator,
  input[type="week"]::-webkit-calendar-picker-indicator{opacity:.9;cursor:pointer;padding:2px}
  .select{background:var(--c-raised);border:1px solid var(--c-border);color:var(--c-tx1);border-radius:8px;padding:7px 12px;font-size:.84rem;width:100%}
  .label{font-size:.78rem;font-weight:600;color:var(--c-tx2);margin-bottom:4px;display:block}
  .table-row:hover{background:var(--c-row-hover)}
  /* Unified table hover across all pages (matches Fleet → Displays): row gets a
     darker background, column header text brightens. Inline row styles still win. */
  table tbody tr{transition:background .12s ease}
  table thead th{transition:color .12s ease}
  table tbody tr:hover{background:var(--c-row-hover)}
  table thead th:hover{color:#ffffff}
  .severity-critical{color:#f87171}
  .severity-warning{color:#fbbf24}
  .severity-info{color:#60a5fa}
  .toast{position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:10px;font-size:.85rem;font-weight:600;animation:slideIn .25s ease}
  @keyframes slideIn{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
  .tab-active{border-bottom:2px solid #3b82f6;color:var(--c-tx1)}
  .tab-inactive{border-bottom:2px solid transparent;color:var(--c-tx3)}

  /* ── LEAFLET ──────────────────────────────────────── */
  .leaflet-tile-pane{filter:brightness(1.45)}
  .leaflet-popup-content-wrapper{background:var(--c-surface)!important;color:var(--c-tx1)!important;border:1px solid var(--c-border)!important;border-radius:12px!important;box-shadow:0 8px 32px rgba(0,0,0,.15)!important}
  .leaflet-popup-tip{background:var(--c-surface)!important}
  .leaflet-popup-content{margin:10px 14px!important;font-size:.82rem;line-height:1.6}
  .leaflet-popup-close-button{color:var(--c-tx2)!important;font-size:18px!important;padding:4px 6px!important}
  .leaflet-bar a{background:var(--c-surface)!important;color:var(--c-tx1)!important;border-color:var(--c-border)!important}
  .leaflet-bar a:hover{background:var(--c-raised)!important}
  .marker-cluster-small,.marker-cluster-medium,.marker-cluster-large{background:transparent!important}
  .marker-cluster-small div,.marker-cluster-medium div,.marker-cluster-large div{background:transparent!important}

/* SortableJS drag ghost for overview grid */
.ov-drag-ghost { opacity: 0.35; border: 2px dashed #3b82f6 !important; }