html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
        html, body { -ms-overflow-style: none; scrollbar-width: none; }

        #drawer, #settings-drawer { transition: transform 0.3s ease-in-out; transform: translateX(100%); }
        #drawer.open, #settings-drawer.open { transform: translateX(0); }
        
        #overlay, #edit-modal-overlay, #county-schedule-modal-overlay { display: none; background: rgba(0,0,0,0.4); }
        #overlay.open, #edit-modal-overlay.open, #county-schedule-modal-overlay.open { display: flex; } 
        body, div, tr, td, h1, h2, h3, p, span { transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
        
        .calendar-day-selected { outline: 2px solid rgb(var(--brand-500)); outline-offset: 2px; }
        .maint-outline { border: 2px solid #a855f7 !important; box-sizing: border-box; }
        .timeline-container { position: relative; height: 80px; width: 100%; margin-top: 10px; }
        
        .custom-scrollbar::-webkit-scrollbar { width: 6px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
        .dark .custom-scrollbar::-webkit-scrollbar-thumb { background: #475569; }
        .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #64748b; }
/* ---------- Brand (ForesightDM logo kit) ----------
   The accent scale Tailwind's `blue-*` classes resolve to (see tailwind.config in index.html), as RGB
   triplets so opacity modifiers like bg-blue-900/20 keep working. 600 = the kit's accent (light grounds),
   400 = its "lifted" accent (navy grounds), both with the kit's measured contrast.
   Colourway: CSN blue (owner, 2026-10-15). To change it, swap this block AND the files in public/brand/
   for the matching colourway from the logo kit (Dropbox: CSN/foresightfdm-logo) — e.g. signal cyan is
   600 #007F99 / 400 #33B2CC. */
:root {
  --brand-50: 238 244 255;  --brand-100: 220 232 254; --brand-200: 188 211 253; --brand-300: 147 184 252;
  --brand-400: 111 163 255; --brand-500: 63 132 248;  --brand-600: 31 111 245;  --brand-700: 24 89 199;
  --brand-800: 21 72 158;   --brand-900: 19 59 126;   --brand-950: 14 37 81;     /* CSN blue #1F6FF5 / #6FA3FF */
}

/* Headings in the wordmark's face (Sora). Body, tables and figures stay in the system font for density. */
h1, h2, h3 { font-family: 'Sora', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: -0.01em; }