:root{--bg:#eef2f6;--panel:#fff;--ink:#172033;--muted:#6b7485;--line:#dfe5ec;--nav:#111a2c;--accent:#12a6a6;--danger:#dc4c64;--warn:#f0a93b;--good:#2ca66f}*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:var(--bg);color:var(--ink);display:flex;min-height:100vh}.sidebar{width:235px;background:var(--nav);color:white;padding:24px 18px;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0}.brand{display:flex;gap:12px;align-items:center;margin-bottom:38px}.brand .mark{width:42px;height:42px;border-radius:12px;background:linear-gradient(145deg,#1fd1c9,#167c91);display:grid;place-items:center;font-size:24px;font-weight:800}.brand strong,.brand span{display:block}.brand span{font-size:12px;color:#9db0c8;letter-spacing:1.5px}.nav{width:100%;border:0;background:transparent;color:#aebbd0;text-align:left;padding:13px 14px;border-radius:10px;margin-bottom:7px;font-weight:600;cursor:pointer}.nav:hover,.nav.active{background:#22304a;color:white}.health{margin-top:auto;display:flex;gap:10px;align-items:center;padding:13px;background:#1a263d;border-radius:12px}.health span{width:11px;height:11px;border-radius:50%;background:#f0a93b}.health strong,.health small{display:block}.health small{color:#91a1b8;font-size:11px;margin-top:2px}main{margin-left:235px;width:calc(100% - 235px);padding:26px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}h1,h2,p{margin-top:0}header h1{margin-bottom:6px}header p{color:var(--muted);margin-bottom:0}.primary{border:0;background:var(--accent);color:white;padding:11px 16px;border-radius:9px;font-weight:700;cursor:pointer}.view{display:none}.view.active{display:block}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:16px}.stats article,.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:0 8px 24px rgba(23,32,51,.05)}.stats span{color:var(--muted);font-size:13px}.stats strong{display:block;font-size:28px;margin-top:8px}.filters{display:grid;grid-template-columns:1fr 1fr 1fr 1.4fr;gap:10px;margin-bottom:14px}.filters select,.filters input,.settings-card input{border:1px solid var(--line);background:white;padding:11px;border-radius:9px;color:var(--ink)}.workspace{display:grid;grid-template-columns:1.35fr .85fr;gap:15px;height:640px}#map,.alerts-panel{background:white;border:1px solid var(--line);border-radius:14px;overflow:hidden}.panel-title{padding:16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}.panel-title h2{font-size:18px;margin:0}.panel-title span{color:var(--muted);font-size:13px}#alertList{height:580px;overflow:auto}.alert-card{padding:15px;border-bottom:1px solid var(--line);cursor:pointer}.alert-card:hover{background:#f7fafc}.alert-head{display:flex;justify-content:space-between;gap:10px}.alert-card h3{font-size:14px;margin:0 0 6px}.badge{font-size:10px;padding:5px 8px;border-radius:999px;font-weight:800;background:#eef2f6}.badge.NEW{background:#fff2d8;color:#9c6500}.badge.CONFIRMED{background:#dff7ed;color:#167149}.badge.INCIDENT{background:#ffe3e7;color:#a6273c}.badge.DISMISSED,.badge.CLOSED{background:#e9edf2;color:#596273}.meta{font-size:12px;color:var(--muted);line-height:1.6}.category{display:inline-block;color:#147b7b;font-size:11px;font-weight:700;margin-bottom:6px}.alert-actions{display:flex;gap:6px;margin-top:10px}.alert-actions button{border:1px solid var(--line);background:white;padding:7px 9px;border-radius:7px;font-size:11px;cursor:pointer}.alert-actions button:hover{border-color:var(--accent);color:var(--accent)}dialog{border:0;border-radius:16px;width:min(610px,90vw);padding:0;box-shadow:0 30px 90px rgba(0,0,0,.25)}dialog::backdrop{background:rgba(12,19,31,.55)}.dialog-close{position:absolute;right:14px;top:10px;border:0;background:none;font-size:27px;cursor:pointer}.dialog-content{padding:28px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}.detail-grid div{background:#f4f7fa;padding:12px;border-radius:9px}.detail-grid small,.detail-grid strong{display:block}.detail-grid small{color:var(--muted);margin-bottom:5px}.note{width:100%;min-height:90px;border:1px solid var(--line);border-radius:9px;padding:10px}.dialog-buttons{display:flex;gap:8px;margin-top:10px}.dialog-buttons button{flex:1}.scheme-row,.audit-row{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);align-items:center}.audit-row{grid-template-columns:1.4fr 1fr 2fr;font-size:13px}.settings-card{max-width:580px}.settings-card label{display:block;margin:16px 0;color:var(--muted);font-size:13px}.settings-card input{display:block;width:100%;margin-top:7px}.empty{padding:40px;text-align:center;color:var(--muted)}@media(max-width:1000px){.sidebar{width:190px}main{margin-left:190px;width:calc(100% - 190px)}.workspace{grid-template-columns:1fr;height:auto}#map{height:450px}.alerts-panel{height:520px}.filters{grid-template-columns:1fr 1fr}.stats{grid-template-columns:1fr 1fr}}@media(max-width:700px){.sidebar{position:static;width:100%;height:auto}.health{display:none}body{display:block}main{margin:0;width:100%;padding:15px}.workspace{display:block}#map{height:360px;margin-bottom:12px}.stats{grid-template-columns:1fr 1fr}.filters{grid-template-columns:1fr}}


/* Category filter and danger-led traffic-light update */
.filter-button{border:1px solid var(--line);background:#fff;padding:11px;border-radius:9px;color:var(--ink);text-align:left;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.filter-button span{color:var(--muted);font-size:11px}
.category-filter-panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;margin:-4px 0 14px;box-shadow:0 12px 30px rgba(23,32,51,.1)}
.category-filter-panel.hidden{display:none}
.category-filter-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:13px}
.category-filter-header strong,.category-filter-header small{display:block}
.category-filter-header small{color:var(--muted);margin-top:4px}
.category-filter-header button{border:1px solid var(--line);background:#fff;border-radius:7px;padding:7px 10px;cursor:pointer}
.category-checkboxes{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:8px}
.category-check{display:flex;align-items:center;gap:9px;padding:9px 10px;border:1px solid var(--line);border-radius:9px;font-size:12px;cursor:pointer}
.category-check:hover{background:#f7fafc}
.category-check input{accent-color:var(--accent)}
.severity-key{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:0 3px 12px;color:var(--muted);font-size:11px}
.severity-key span{display:flex;align-items:center;gap:6px}
.severity-dot{display:inline-block;width:10px;height:10px;border-radius:50%}
.severity-dot.danger{background:#d7263d}.severity-dot.high{background:#f07c00}.severity-dot.caution{background:#e6b800}.severity-dot.clear{background:#2ca66f}.severity-dot.neutral{background:#7b8492}
.alert-card{position:relative;padding:0;display:flex}
.severity-strip{width:6px;flex:0 0 6px}
.alert-card-content{padding:15px;width:100%}
.severity-danger .severity-strip{background:#d7263d}
.severity-high .severity-strip{background:#f07c00}
.severity-caution .severity-strip{background:#e6b800}
.severity-clear .severity-strip{background:#2ca66f}
.severity-neutral .severity-strip{background:#7b8492}
.alert-badges{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.severity-badge{font-size:10px;padding:5px 8px;border-radius:999px;font-weight:800;white-space:nowrap}
.severity-badge.danger{background:#ffe1e5;color:#a70f25}
.severity-badge.high{background:#ffead6;color:#9a4b00}
.severity-badge.caution{background:#fff6c7;color:#806400}
.severity-badge.clear{background:#dff7ed;color:#167149}
.severity-badge.neutral{background:#e9edf2;color:#596273}
.dialog-severity{display:inline-block;padding:7px 10px;border-radius:8px;font-size:12px;font-weight:800;margin-bottom:14px}
.dialog-severity.danger{background:#ffe1e5;color:#a70f25}.dialog-severity.high{background:#ffead6;color:#9a4b00}.dialog-severity.caution{background:#fff6c7;color:#806400}.dialog-severity.clear{background:#dff7ed;color:#167149}.dialog-severity.neutral{background:#e9edf2;color:#596273}
.danger-button{background:#d7263d}
@media(max-width:1100px){.category-checkboxes{grid-template-columns:repeat(2,minmax(180px,1fr))}}
@media(max-width:700px){.category-checkboxes{grid-template-columns:1fr}.category-filter-header{display:block}.category-filter-header>div:last-child{margin-top:10px}}


/* Settings-page alert category controls */
.settings-section{border-top:1px solid var(--line);padding-top:18px;margin-top:18px}
.settings-section:first-of-type{border-top:0;padding-top:0;margin-top:12px}
.settings-section h3{margin:0 0 12px;font-size:15px}
.settings-filter-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:12px}
.settings-filter-heading h3{margin-bottom:4px}
.settings-filter-heading p{margin:0;color:var(--muted);font-size:12px}
.settings-filter-actions{display:flex;gap:8px}
.settings-filter-actions button{border:1px solid var(--line);background:#fff;border-radius:7px;padding:7px 10px;cursor:pointer}
.settings-category-checkboxes{margin-bottom:18px}
@media(max-width:700px){.settings-filter-heading{display:block}.settings-filter-actions{margin-top:10px}}


/* Expandable source data for alert investigation */
.source-details{margin:14px 0;border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}
.source-details summary{cursor:pointer;padding:12px 14px;font-weight:700;background:#f4f7fa}
.source-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px}
.source-detail-grid div{background:#f7fafc;padding:10px;border-radius:8px;min-width:0}
.source-detail-grid small,.source-detail-grid strong{display:block}
.source-detail-grid small{color:var(--muted);margin-bottom:4px}
.source-detail-grid strong{font-size:12px;overflow-wrap:anywhere}
.source-empty{grid-column:1/-1;color:var(--muted);margin:0;padding:5px}
@media(max-width:700px){.source-detail-grid{grid-template-columns:1fr}}

/* Operator-first alert console trial */
.sidebar-toggle{position:fixed;left:244px;top:18px;z-index:1200;width:40px;height:40px;border:1px solid var(--line);background:#fff;border-radius:10px;cursor:pointer;font-size:18px;box-shadow:0 5px 18px rgba(23,32,51,.12);transition:left .2s ease}
body.sidebar-collapsed .sidebar{transform:translateX(-100%)}
body.sidebar-collapsed main{margin-left:0;width:100%}
body.sidebar-collapsed .sidebar-toggle{left:14px}
.sidebar{transition:transform .2s ease}
main{transition:margin-left .2s ease,width .2s ease}
.alerts-workspace{min-height:650px}
.alerts-workspace .alerts-panel{overflow:hidden}
.alerts-workspace #alertList{height:calc(100vh - 330px);min-height:500px;overflow:auto;padding:12px;background:#f5f7fa}
.alerts-workspace .alert-card{margin-bottom:12px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 5px 18px rgba(23,32,51,.05)}
.scheme-banner{margin:-15px -15px 14px;padding:11px 15px;background:#172033;color:#fff;font-size:16px;font-weight:800;letter-spacing:.35px;text-transform:uppercase}
.operator-alert-head{align-items:flex-start}
.alert-title-block{min-width:0;flex:1}.alert-title-block h3{font-size:18px;line-height:1.3;margin-bottom:5px}
.priority-stack{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.confidence-badge{min-width:112px;border-radius:10px;padding:8px 11px;font-size:14px;font-weight:800;text-align:center;border:2px solid currentColor;background:#fff}
.confidence-badge small{display:block;font-size:9px;letter-spacing:.7px;text-transform:uppercase;margin-bottom:3px;opacity:.75}
.confidence-very-low{color:#6c7583}.confidence-low{color:#2471a3}.confidence-medium{color:#9a7b00}.confidence-high{color:#c35a00}.confidence-very-high{color:#b5152d;background:#fff0f2}
.priority-stack .severity-badge{display:flex;align-items:center;padding:8px 11px;font-size:11px}
.email-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(170px,1fr));gap:9px;margin-top:14px}
.email-detail-grid>div{background:#f4f7fa;border:1px solid #e7ebf0;border-radius:9px;padding:10px;min-width:0}
.email-detail-grid .wide{grid-column:1/-1}
.email-detail-grid small,.email-detail-grid strong{display:block}.email-detail-grid small{color:var(--muted);font-size:10px;margin-bottom:4px;text-transform:uppercase;letter-spacing:.4px}.email-detail-grid strong{font-size:12px;overflow-wrap:anywhere}
.alert-card-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.alert-card-footer .alert-actions{margin-top:0}
.map-page{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}.map-page #map{height:calc(100vh - 150px);min-height:600px;border:0;border-radius:0}
.panel-title small{display:block;color:var(--muted);font-size:11px;margin-top:4px}
@media(max-width:1100px){.email-detail-grid{grid-template-columns:repeat(2,minmax(160px,1fr))}}
@media(max-width:700px){.sidebar-toggle{left:14px}.sidebar{position:fixed;z-index:1100}.email-detail-grid{grid-template-columns:1fr}.priority-stack{justify-content:flex-start}.operator-alert-head{display:block}.priority-stack{margin-top:10px}.alerts-workspace #alertList{height:auto;min-height:420px}.map-page #map{height:500px;min-height:500px}}


/* Final operator-console refinements */
.scheme-banner{
  font-size:18px;
  padding:13px 16px;
  letter-spacing:.55px;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.14);
}
.confidence-badge{
  min-width:132px;
  padding:10px 14px;
  font-size:16px;
  box-shadow:0 4px 12px rgba(23,32,51,.08);
}
.confidence-badge small{font-size:10px}
.alert-title-block h3{font-size:19px}
.alerts-workspace .alert-card:first-child{
  box-shadow:0 9px 24px rgba(23,32,51,.12);
}
.alerts-workspace .alert-card:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(23,32,51,.10);
}
.alerts-workspace .alert-card{transition:transform .12s ease,box-shadow .12s ease}
body.sidebar-collapsed .alerts-workspace #alertList{padding-left:18px;padding-right:18px}


/* Three-column compact live-alert grid */
.alerts-workspace #alertList{display:grid;grid-template-columns:repeat(3,minmax(280px,1fr));gap:14px;align-items:stretch;height:calc(100vh - 330px);min-height:520px;padding:12px}
.alerts-workspace .alert-card{margin:0;min-height:0;border-radius:12px;align-self:stretch}
.compact-grid-card{background:#fff;border:1px solid var(--line);overflow:hidden;display:flex}
.compact-card-inner{width:100%;padding:15px 16px 14px;display:flex;flex-direction:column}
.compact-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.compact-scheme{font-size:15px;line-height:1.2}
.compact-confidence{flex:0 0 auto;border-radius:999px;padding:5px 10px;font-size:11px;font-weight:800;text-transform:uppercase;background:#f3f5f7}
.compact-confidence.confidence-very-low{color:#596273;background:#eceff3}.compact-confidence.confidence-low{color:#2471a3;background:#e7f2fa}.compact-confidence.confidence-medium{color:#8a6c00;background:#fff5cf}.compact-confidence.confidence-high{color:#b85200;background:#fff0df}.compact-confidence.confidence-very-high{color:#a70f25;background:#ffe7eb}
.compact-title{font-size:14px;line-height:1.35;margin-bottom:3px}.compact-risk{font-size:12px;line-height:1.4;margin-bottom:7px}.compact-road{color:#08735f;font-size:15px;font-weight:800;margin-bottom:9px}.compact-description{font-size:12px;line-height:1.5;margin:0 0 10px;color:#263044}
.compact-meta{display:flex;flex-direction:column;gap:4px;color:var(--muted);font-size:11px;margin-bottom:10px}.compact-location{display:grid;gap:7px;margin-top:auto}.compact-location div{font-size:11px;line-height:1.35}.compact-location small{color:var(--muted);margin-right:4px}.compact-location strong{color:#08735f;overflow-wrap:anywhere}
.compact-footer{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}.compact-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.compact-actions button{border:0;border-radius:8px;padding:10px 8px;font-size:12px;font-weight:700;cursor:pointer;background:#edf0f3;color:#172033}.compact-actions .clear-action{background:#39b8aa;color:#fff}
@media(max-width:1200px){.alerts-workspace #alertList{grid-template-columns:repeat(2,minmax(280px,1fr))}}@media(max-width:760px){.alerts-workspace #alertList{grid-template-columns:1fr;height:auto}}


/* Ingest diagnostics */
.ingest-card{max-width:none;padding:0;overflow:hidden}
#ingestRows{padding:10px 16px 18px}
.ingest-row{display:grid;grid-template-columns:1.25fr 1.5fr .75fr 1fr;gap:14px;align-items:center;padding:12px;border-bottom:1px solid var(--line);border-left:4px solid #7b8492}
.ingest-row.accepted{border-left-color:#2ca66f}
.ingest-row.rejected{border-left-color:#d7263d;background:#fff8f8}
.ingest-row strong,.ingest-row small{display:block}
.ingest-row small{color:var(--muted);font-size:10px;margin-top:3px;overflow-wrap:anywhere}
.ingest-result{font-weight:800;font-size:12px}
.ingest-row.accepted .ingest-result{color:#167149}
.ingest-row.rejected .ingest-result{color:#a70f25}
@media(max-width:900px){.ingest-row{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.ingest-row{grid-template-columns:1fr}}

/* Confirmation count display */
.compact-confirmations{flex:0 0 auto;border-radius:999px;padding:5px 10px;font-size:11px;font-weight:800;background:#eceff3;color:#394355;white-space:nowrap}


/* Confirmation-led operator priority states */
.confirmation-amber .severity-strip{background:#f0a93b!important}
.confirmation-red .severity-strip{background:#d7263d!important}
.confirmation-critical{border-color:#b5152d!important;background:#ffe8ec!important}
.confirmation-critical .severity-strip{background:#b5152d!important}
.confirmation-critical .compact-card-inner{background:rgba(255,232,236,.96)}
.confirmation-silenced{box-shadow:0 0 0 2px rgba(181,21,45,.18),0 7px 20px rgba(181,21,45,.12)!important}
@keyframes lenseEmergencyPulse{
  0%,12%{background:#b5152d;box-shadow:0 0 0 2px rgba(181,21,45,.4),0 0 28px rgba(181,21,45,.42)}
  13%,24%{background:#ffe8ec;box-shadow:0 0 0 2px rgba(181,21,45,.18),0 7px 20px rgba(181,21,45,.12)}
  25%,37%{background:#b5152d;box-shadow:0 0 0 2px rgba(181,21,45,.4),0 0 28px rgba(181,21,45,.42)}
  38%,100%{background:#ffe8ec;box-shadow:0 0 0 2px rgba(181,21,45,.18),0 7px 20px rgba(181,21,45,.12)}
}
.confirmation-flashing{animation:lenseEmergencyPulse 1.8s ease-in-out infinite}
.confirmation-flashing .compact-card-inner{animation:lenseEmergencyInnerPulse 1.8s ease-in-out infinite}
@keyframes lenseEmergencyInnerPulse{0%,12%,25%,37%{background:#ffd9df}13%,24%,38%,100%{background:#ffe8ec}}
.compact-confirmations.priority-attention{background:#fff0d5;color:#8a5600}
.compact-confirmations.priority-high{background:#ffe0e5;color:#a70f25}
.compact-confirmations.priority-critical{background:#b5152d;color:#fff}
.compact-actions.three-actions{grid-template-columns:repeat(3,1fr)}
.compact-actions .investigating-action{background:#edf0f3;color:#172033}
.compact-actions .silence-action{background:#172033;color:#fff}
.compact-actions .clear-action{background:#39b8aa;color:#fff}
@media (prefers-reduced-motion:reduce){.confirmation-flashing,.confirmation-flashing .compact-card-inner{animation:none}.confirmation-flashing{outline:4px solid #b5152d}}


/* External map access */
.compact-actions.four-actions{grid-template-columns:repeat(4,minmax(0,1fr))}
.compact-actions .map-action,.dialog-buttons .map-action{background:#e5f2ff;color:#145a8d}
.compact-actions .map-action:hover,.dialog-buttons .map-action:hover{background:#d4eaff;color:#0d4772}
@media(max-width:1050px){.compact-actions.four-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Admin access */
.hidden{display:none!important}
.sidebar-footer{margin-top:auto;display:grid;gap:10px}
.admin-menu{margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12)}
.admin-menu-label{padding:0 14px 8px;color:#70829e;font-size:10px;font-weight:800;letter-spacing:1.5px}
.sidebar-footer .health{margin-top:0}
.filters{grid-template-columns:1fr 1fr 1.4fr}
.alerts-workspace{display:block}
.alerts-workspace .alerts-panel{width:100%}


/* Current admin/operator compatibility */
.hidden{display:none!important}
.filters{grid-template-columns:1fr 1fr 1.4fr}
.alerts-workspace{display:block}
.alerts-workspace .alerts-panel{width:100%}

/* Full-screen internal scheme map */
.operational-map-dialog{width:min(96vw,1500px);height:92vh;max-width:none;max-height:none;padding:0;border:0;border-radius:16px;overflow:hidden;background:#fff}
.operational-map-dialog::backdrop{background:rgba(14,23,38,.72)}
.operational-map-shell{height:100%;display:grid;grid-template-rows:auto 1fr;position:relative}
.operational-map-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 20px;border-bottom:1px solid #dfe5ec;background:#fff}
.operational-map-header>div{display:grid;gap:3px;min-width:0}
.operational-map-header strong{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.operational-map-header small{color:#667085;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.operational-map-close{width:40px;height:40px;border-radius:10px;font-size:26px;line-height:1;flex:0 0 auto}
.operational-map-canvas{width:100%;height:100%;min-height:500px;background:#e8edf2}
.operational-map-message{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1000;background:#fff;border:1px solid #dfe5ec;border-radius:12px;padding:18px 22px;font-weight:600}
.operational-map-message.hidden{display:none}
@media(max-width:700px){.operational-map-dialog{width:100vw;height:100vh;border-radius:0}.operational-map-header{padding:12px}.operational-map-header strong{font-size:15px}.operational-map-canvas{min-height:400px}}


/* ---------------- Scheme Manager ---------------- */
#schemeAdmin .card{max-width:1000px;margin-bottom:16px}
.scheme-admin-intro{color:var(--muted);font-size:13px;line-height:1.6;max-width:700px}
.scheme-admin-intro a{color:var(--accent);font-weight:600}
.scheme-admin-field{display:block;margin:18px 0 6px;color:var(--muted);font-size:13px}
.scheme-admin-field input{display:block;width:100%;margin-top:8px;border:1px solid var(--line);background:#fff;padding:11px;border-radius:9px}
.scheme-admin-fields{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;margin-top:18px}
.scheme-admin-fields label{color:var(--muted);font-size:13px}
.scheme-admin-fields input{display:block;width:100%;margin-top:7px;border:1px solid var(--line);background:#fff;padding:11px;border-radius:9px;color:var(--ink)}
.scheme-admin-buttons{display:flex;gap:10px;margin-top:20px}
.scheme-admin-buttons button:not(.primary){border:1px solid var(--line);background:#fff;padding:11px 16px;border-radius:9px;font-weight:600;cursor:pointer;color:var(--muted)}
.scheme-admin-message{margin-top:14px;font-size:13px;color:var(--muted);min-height:18px}
.scheme-admin-message.success{color:#167149}
.scheme-admin-message.error{color:var(--danger)}

.scheme-counts{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 12px}
.scheme-counts .cnt{font-size:11px;font-weight:800;padding:5px 11px;border-radius:999px;letter-spacing:.03em}
.scheme-counts .ok{background:#dff7ed;color:#167149}
.scheme-counts .warn{background:#fdf3e0;color:#8a5d00}
.scheme-counts .bad{background:#fdecef;color:#a6273c}
.scheme-counts .moved{background:#e0f5f5;color:#0d7d7d}

.scheme-table-wrap{max-height:330px;overflow:auto;border:1px solid var(--line);border-radius:10px}
.scheme-table{width:100%;border-collapse:collapse;font-size:13px}
.scheme-table th{position:sticky;top:0;background:#f6f9fc;text-align:left;padding:10px 12px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);z-index:2}
.scheme-table td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.scheme-table tr:last-child td{border-bottom:0}
.scheme-table td.rt{text-align:right;white-space:nowrap}
.scheme-table small{display:block;color:var(--muted);font-size:11px;margin-top:3px;line-height:1.45}
.scheme-table tr.row-review{background:#fffaf0}
.scheme-table tr.row-missing{background:#fef6f7}
.scheme-table tr.selected{outline:2px solid var(--accent);outline-offset:-2px}
.scheme-table button{border:1px solid var(--line);background:#fff;padding:6px 12px;border-radius:7px;font-size:11px;font-weight:600;cursor:pointer}
.scheme-table button:hover{border-color:var(--accent);color:var(--accent)}
.scheme-table button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.pill{display:inline-block;font-size:10px;font-weight:800;padding:3px 8px;border-radius:999px;letter-spacing:.04em}
.pill.found{background:#dff7ed;color:#167149}
.pill.review{background:#fdf3e0;color:#8a5d00}
.pill.missing{background:#fdecef;color:#a6273c}

.scheme-map-hint{font-size:12.5px;color:var(--muted);margin:16px 0 8px}
.scheme-map-hint.placing{color:var(--accent);font-weight:700}
.scheme-map{height:420px;border-radius:11px;border:1px solid var(--line);overflow:hidden}
.scheme-pin-wrap{background:none;border:none}
.scheme-pin{
  /* A pill rather than a fixed circle, so a four digit camera number such as
     1111 fits as readily as a single digit. */
  min-width:26px;height:26px;padding:0 6px;border-radius:999px;
  color:#fff;font-size:11px;font-weight:800;line-height:1;
  display:flex;align-items:center;justify-content:center;white-space:nowrap;
  border:2px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.4)
}

.scheme-admin-row{display:grid;grid-template-columns:2fr auto auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.scheme-admin-row small{display:block;color:var(--muted);font-size:12px;margin-top:4px}
.scheme-origin{display:inline-block;margin-top:6px;font-size:10px;font-weight:800;letter-spacing:.05em;padding:3px 8px;border-radius:999px;background:#eef2f7;color:#5f6b7f}
.scheme-admin-state{font-size:11px;font-weight:800;padding:5px 9px;border-radius:999px;background:#dff7ed;color:#167149}
.scheme-admin-state.off{background:#e9edf2;color:#596273}
.scheme-admin-actions button{border:1px solid var(--line);background:#fff;padding:7px 12px;border-radius:7px;font-size:11px;cursor:pointer}
.scheme-admin-actions button:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:1000px){.scheme-admin-fields{grid-template-columns:1fr}.scheme-map{height:320px}}


/* ============================================================
   Alert card actions: wrap instead of being squeezed
   ------------------------------------------------------------
   The old rules forced three or four fixed columns into a card
   only about 250px wide, so "Investigating" needed roughly 106px
   and got as little as 49px. The card is overflow:hidden, so the
   buttons were clipped rather than shrunk, which is why they
   looked like they had gone missing when the board filled up.
   auto-fit lets them drop onto a second line instead.
   ============================================================ */
.compact-actions,
.compact-actions.three-actions,
.compact-actions.four-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.compact-actions button{
  /* Grow to share a line, wrap when there is not room, and never
     shrink below the width the longest label needs. */
  flex:1 1 106px;
  min-width:106px;
  white-space:nowrap;
  padding:11px 10px;
  line-height:1.2;
}

/* ============================================================
   Mobile and tablet
   ============================================================ */

/* The drawer backdrop. Invisible until the menu is open. */
.sidebar-scrim{display:none}

@media(max-width:760px){
  body{display:block}

  /* Sidebar becomes a drawer over the page rather than a full-width
     panel that buries the alerts on load. */
  .sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:min(284px,84vw);
    height:100%;
    z-index:1100;
    overflow-y:auto;
    padding:20px 16px;
    box-shadow:6px 0 28px rgba(12,19,31,.28);
  }
  .brand{margin-bottom:24px}
  .health{display:flex}

  .sidebar-scrim{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(12,19,31,.5);
    z-index:1050;
    opacity:1;
    transition:opacity .2s ease;
  }
  body.sidebar-collapsed .sidebar-scrim{display:none}

  .sidebar-toggle{
    left:12px;
    top:12px;
    width:46px;
    height:46px;
    font-size:20px;
    box-shadow:0 3px 14px rgba(12,19,31,.3);
    border:1px solid var(--line);
  }
  body.sidebar-collapsed .sidebar-toggle{left:12px}

  main{
    margin-left:0;
    width:100%;
    padding:14px;
    padding-top:70px;
    padding-bottom:32px;
  }

  header{display:block}
  header h1{font-size:21px}
  header .primary{margin-top:12px;width:100%}

  /* Four stat tiles across is unreadable on a phone. */
  .stats{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
  .stats article{padding:13px}
  .stats span{font-size:12px}
  .stats strong{font-size:23px;margin-top:5px}

  .filters{grid-template-columns:1fr;gap:8px}
  .filters select,.filters input{padding:13px;font-size:16px}

  /* The panel around the list is fixed at 520px with overflow:hidden by a rule
     that applies below 1000px and was never undone for phones, so the list grew
     normally and the panel clipped it after the first card. The workspace also
     carries min-height:650px, which was the empty space underneath. */
  .alerts-workspace{min-height:0}
  .alerts-workspace .alerts-panel{height:auto;min-height:0;overflow:visible;border:0;background:transparent}
  .alerts-workspace .panel-title{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:12px}

  /* Let the page scroll rather than trapping a scroller inside a
     scroller, which is horrible on a touchscreen. */
  .alerts-workspace #alertList{
    grid-template-columns:1fr;
    height:auto;
    min-height:0;
    overflow:visible;
    padding:0;
    gap:12px;
    background:transparent;
  }
  body.sidebar-collapsed .alerts-workspace #alertList{padding-left:0;padding-right:0}

  .compact-card-inner{padding:14px}
  .compact-scheme{font-size:16px}
  .compact-title{font-size:15px}
  .compact-road{font-size:16px}

  /* Comfortable thumb targets. */
  .compact-actions button{min-height:46px;font-size:13px;flex:1 1 120px;min-width:120px}

  .workspace{display:block}
  #map{height:320px;margin-bottom:12px}
  .map-page #map{height:60vh;min-height:340px}

  /* Dialogs fill the screen instead of sitting in a cramped box. */
  dialog{width:100vw;max-width:100vw;height:100%;max-height:100%;border-radius:0}
  .dialog-content{padding:20px 16px 28px}
  .detail-grid{grid-template-columns:1fr}
  .dialog-buttons{flex-direction:column}
  .dialog-buttons button{width:100%;min-height:46px}
  .dialog-close{width:44px;height:44px;right:6px;top:6px}

  /* Row layouts that assume a wide screen. */
  .scheme-row,.audit-row{grid-template-columns:1fr;gap:5px;padding:14px 0}
  .audit-row{font-size:13px}
  .settings-card{max-width:none}
  .settings-card input{padding:13px;font-size:16px}

  /* Scheme Manager on a phone. */
  .scheme-admin-fields{grid-template-columns:1fr}
  .scheme-admin-buttons{flex-direction:column}
  .scheme-admin-buttons button{width:100%;min-height:46px}
  .scheme-table-wrap{max-height:none}
  .scheme-table{font-size:12px}
  .scheme-table th:nth-child(2),.scheme-table td:nth-child(2){display:none}
  .scheme-map{height:60vh;min-height:320px}
  .scheme-counts .cnt{font-size:10px}
  #schemeAdmin .card{padding:15px}
}

@media(max-width:420px){
  .stats{grid-template-columns:1fr 1fr}
  .compact-actions button{flex:1 1 100%;min-width:0}
}

/* Respect a phone's notch and home indicator. */
@supports(padding:max(0px)){
  @media(max-width:760px){
    main{
      padding-left:max(14px,env(safe-area-inset-left));
      padding-right:max(14px,env(safe-area-inset-right));
      padding-bottom:max(32px,env(safe-area-inset-bottom));
    }
  }
}


/* ============================================================
   System health
   ============================================================ */
.health{
  width:100%;
  border:0;
  text-align:left;
  cursor:pointer;
  position:relative;
  font:inherit;
  color:inherit;
}
.health:hover{background:#22304a}
.health small{color:#91a1b8;font-size:11px;margin-top:2px;display:block}
.health-badge{
  position:absolute;right:11px;top:50%;transform:translateY(-50%);
  min-width:21px;height:21px;padding:0 6px;border-radius:999px;
  background:var(--danger);color:#fff;font-size:11px;font-weight:800;
  display:grid;place-items:center;
}
.health-badge.hidden{display:none}

.health-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:6px}
.health-head h2{margin-bottom:4px}
.health-intro{color:var(--muted);font-size:13px;max-width:62ch;margin-bottom:0}
#healthRefresh{
  border:1px solid var(--line);background:#fff;padding:9px 14px;
  border-radius:9px;font-weight:600;cursor:pointer;color:var(--muted);flex:none;
}
#healthRefresh:hover{border-color:var(--accent);color:var(--accent)}

#healthChecks{margin-top:16px;display:grid;gap:9px}
.health-check{
  display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;
  padding:14px 16px;border-radius:11px;border:1px solid var(--line);background:#fff;
  border-left-width:5px;
}
.health-check strong{display:block;font-size:14px}
.health-check small{display:block;color:var(--muted);font-size:12.5px;margin-top:3px;line-height:1.5}
.health-check-dot{width:12px;height:12px;border-radius:50%;background:var(--muted)}
.health-check-state{
  font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;background:#eef2f6;color:var(--muted);
}
.health-check.health-ok{border-left-color:var(--good)}
.health-check.health-ok .health-check-dot{background:var(--good)}
.health-check.health-ok .health-check-state{background:#dff7ed;color:#167149}
.health-check.health-warning{border-left-color:var(--warn);background:#fffaf1}
.health-check.health-warning .health-check-dot{background:var(--warn)}
.health-check.health-warning .health-check-state{background:#fdf3e0;color:#8a5d00}
.health-check.health-fault{border-left-color:var(--danger);background:#fef5f6}
.health-check.health-fault .health-check-dot{background:var(--danger);animation:healthPulse 1.6s ease-in-out infinite}
.health-check.health-fault .health-check-state{background:#fdecef;color:#a6273c}
@keyframes healthPulse{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.health-check.health-fault .health-check-dot{animation:none}}

.health-checked{margin:14px 0 0;color:var(--muted);font-size:12px}
.health-glossary{margin:0}
.health-glossary dt{font-weight:700;font-size:13.5px;margin-top:14px}
.health-glossary dt:first-child{margin-top:0}
.health-glossary dd{margin:4px 0 0;color:var(--muted);font-size:13px;line-height:1.6;max-width:70ch}

@media(max-width:760px){
  .health-head{display:block}
  #healthRefresh{width:100%;margin-top:12px;min-height:46px}
  .health-check{grid-template-columns:auto 1fr;gap:11px;padding:13px}
  .health-check-state{grid-column:2;justify-self:start;margin-top:7px}
}


/* Last reported by the source. Amber once several polls have gone by without
   it appearing, which is the earliest sign an alert is on its way out. */
.compact-meta .last-seen{color:var(--muted)}
.compact-meta .last-seen.stale{color:#8a5d00;font-weight:700}
.detail-grid div.detail-stale{background:#fdf3e0}
.detail-grid div.detail-stale strong{color:#8a5d00}
.detail-sub{display:block;font-weight:400;color:var(--muted);font-size:11.5px;margin-top:3px}


/* ---------------- Scheme filter, multiple choice ---------------- */
.scheme-filter{position:relative}
.scheme-filter-toggle{
  width:100%;text-align:left;border:1px solid var(--line);background:#fff;
  padding:11px 30px 11px 11px;border-radius:9px;color:var(--ink);
  font:inherit;font-size:14px;cursor:pointer;position:relative;
}
.scheme-filter-toggle::after{
  content:"";position:absolute;right:12px;top:50%;width:8px;height:8px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);
}
.scheme-filter-toggle:hover{border-color:var(--accent)}
.scheme-filter-toggle.filtered{border-color:var(--accent);color:var(--accent);font-weight:700}
.scheme-filter-panel{
  position:absolute;z-index:900;top:calc(100% + 6px);left:0;min-width:250px;max-width:330px;
  background:#fff;border:1px solid var(--line);border-radius:11px;
  box-shadow:0 12px 32px rgba(23,32,51,.16);padding:8px;
}
.scheme-filter-panel[hidden]{display:none}
.scheme-filter-quick{display:flex;gap:6px;padding:4px 4px 8px;border-bottom:1px solid var(--line);margin-bottom:6px}
.scheme-filter-quick button{
  flex:1;border:1px solid var(--line);background:#fff;padding:7px 8px;
  border-radius:7px;font-size:11px;font-weight:700;cursor:pointer;color:var(--muted);
}
.scheme-filter-quick button:hover{border-color:var(--accent);color:var(--accent)}
.scheme-check{
  display:flex;gap:10px;align-items:center;padding:9px 8px;border-radius:8px;
  cursor:pointer;font-size:13.5px;
}
.scheme-check:hover{background:#f4f7fa}
.scheme-check input{width:17px;height:17px;accent-color:var(--accent);flex:none;margin:0}
.scheme-filter-panel .empty{padding:16px;font-size:13px}

@media(max-width:760px){
  .scheme-filter-toggle{min-height:46px;font-size:16px}
  .scheme-filter-panel{min-width:0;width:100%;max-width:none}
  .scheme-check{padding:12px 8px;font-size:15px}
}


/* ---------------- Scheme camera editor ---------------- */
#schemeEditCard[hidden]{display:none}
#schemeEditClose,#schemeAddCamera,#schemeSeparate{
  border:1px solid var(--line);background:#fff;padding:9px 14px;border-radius:9px;
  font-weight:600;cursor:pointer;color:var(--muted);flex:none;
}
#schemeEditClose:hover,#schemeAddCamera:hover,#schemeSeparate:hover{border-color:var(--accent);color:var(--accent)}
#schemeAddCamera{border-color:var(--accent);color:var(--accent);font-weight:700}
.scheme-edit-bar{display:flex;align-items:center;gap:12px;margin:18px 0 6px}
.scheme-edit-count{font-size:12px;color:var(--muted)}
.scheme-cell-input{
  width:100%;border:1px solid transparent;background:transparent;padding:6px 8px;
  border-radius:7px;font:inherit;font-size:13px;color:var(--ink);
}
.scheme-cell-input:hover{border-color:var(--line);background:#fff}
.scheme-cell-input:focus{border-color:var(--accent);background:#fff;outline:none}
.mono-cell{font-family:ui-monospace,Consolas,monospace;font-size:11.5px;color:var(--muted);white-space:nowrap}
.muted-cell{color:var(--muted)}
#schemeEditRows td{vertical-align:middle}
#schemeEditRows .rt button{margin-left:5px}
@media(max-width:760px){
  .scheme-edit-bar{flex-direction:column;align-items:stretch}
  #schemeAddCamera,#schemeEditClose,#schemeSeparate{width:100%;min-height:46px}
  #schemeEditRows .mono-cell{display:none}
  .scheme-table th:nth-child(3){display:none}
}


/* A camera just placed on the map, still to be named. */
#schemeEditRows tr.row-new{background:#e6f7f7}
#schemeEditRows tr.row-new .scheme-cell-input{border-color:var(--accent);background:#fff}
/* Two cameras on one scheme sharing a name. */
.scheme-cell-input.duplicate{border-color:var(--danger);background:#fdecef;color:#a6273c}


/* Destructive action, kept visually distinct from Cameras and Disable. */
.scheme-admin-actions button.danger-action{color:var(--danger);border-color:#f3c9d1}
.scheme-admin-actions button.danger-action:hover{background:var(--danger);color:#fff;border-color:var(--danger)}


/* ---------------- Operator verdict ---------------- */
.verdict-row{display:flex;gap:8px;margin-bottom:8px}
.verdict-btn{
  flex:1;min-width:0;padding:13px 10px;border-radius:9px;font-weight:700;
  font-size:13px;cursor:pointer;border:2px solid var(--line);background:#fff;
  color:var(--muted);white-space:nowrap;
}
.verdict-btn:hover{border-color:var(--muted)}
.verdict-btn.confirm.chosen{background:#2ca66f;border-color:#2ca66f;color:#fff}
.verdict-btn.false.chosen{background:var(--danger);border-color:var(--danger);color:#fff}
.verdict-btn.confirm:hover:not(.chosen){border-color:#2ca66f;color:#167149}
.verdict-btn.false:hover:not(.chosen){border-color:var(--danger);color:var(--danger)}
.verdict-note{margin:6px 0 0;font-size:11.5px;color:var(--muted);line-height:1.45}

@media(max-width:760px){
  .verdict-btn{min-height:48px;font-size:14px}
}


/* ---------------- Alert card height ----------------
   The grid stretched every card to match the tallest in its row, and
   .compact-location then pushed the camera block to the bottom of that
   stretched box, leaving a gap in the middle. Each card now takes only
   the height its own content needs. */
.alerts-workspace #alertList{
  /* align-items positions a card inside its row. align-content is the one that
     matters here: with a single row in a container 700px tall, the row itself
     stretched to fill the space and took the cards with it. */
  align-items:start;
  align-content:start;
  grid-auto-rows:min-content;
}
.compact-grid-card{align-self:start;height:auto}
.compact-card-inner{height:auto}
.compact-location{margin-top:10px}

/* Shown when a verdict could not be saved, so a failed save is visible
   rather than looking like the button did nothing. */
.verdict-error{
  margin:6px 0 0;font-size:11.5px;font-weight:700;color:var(--danger);
  background:#fdecef;border-radius:7px;padding:7px 9px;line-height:1.4;
}


/* ---------------- Accounts ---------------- */
.signed-in{display:flex;align-items:center;gap:9px;padding:11px 13px;background:#1a263d;border-radius:12px;margin-top:auto;margin-bottom:9px}
.signed-in-who{flex:1;min-width:0;overflow:hidden}
.signed-in-who strong{display:block;font-size:13px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.signed-in-who small{display:block;font-size:11px;color:#91a1b8;margin-top:1px}
.sign-out{border:1px solid #34405c;background:transparent;color:#aebbd0;font:inherit;font-size:11px;font-weight:700;padding:6px 10px;border-radius:7px;cursor:pointer;flex:none}
.sign-out:hover{border-color:var(--danger);color:#ff8fa0}
/* The health block no longer needs to push itself to the bottom, the signed-in
   block above it does that now. */
.health{margin-top:0}

/* Admin-only navigation is hidden until we know the account is an admin. */
.admin-nav{display:none}
body.is-admin .admin-nav{display:block}

.users-waiting{background:#fdf3e0;color:#8a5d00;font-weight:700;font-size:13px;padding:11px 14px;border-radius:9px;margin:0 0 14px}
.user-row{display:grid;grid-template-columns:1.6fr auto auto;gap:14px;align-items:start;padding:16px 0;border-bottom:1px solid var(--line)}
.user-row:last-child{border-bottom:0}
.user-row.status-pending{background:#fffaf1;margin:0 -18px;padding-left:18px;padding-right:18px}
.user-row.status-suspended{opacity:.62}
.user-main strong{display:block;font-size:14.5px}
.user-main small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.user-schemes{display:block;font-size:12px;color:var(--muted);margin-top:6px;line-height:1.45}
.user-schemes.warn{color:#8a5d00;font-weight:700}
.user-state{display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.user-pill{font-size:10px;font-weight:800;letter-spacing:.05em;padding:4px 9px;border-radius:999px;white-space:nowrap}
.user-pill.active{background:#dff7ed;color:#167149}
.user-pill.pending{background:#fdf3e0;color:#8a5d00}
.user-pill.suspended{background:#fdecef;color:#a6273c}
.user-role{font-size:11px;color:var(--muted);font-weight:600}
.user-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;max-width:330px}
.user-actions button{border:1px solid var(--line);background:#fff;padding:7px 11px;border-radius:7px;font-size:11px;font-weight:600;cursor:pointer;color:var(--muted)}
.user-actions button:hover{border-color:var(--accent);color:var(--accent)}
.user-actions button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.user-actions button.danger-action{color:var(--danger);border-color:#f3c9d1}
.user-actions button.danger-action:hover{background:var(--danger);color:#fff}
.user-scheme-picker{grid-column:1/-1;background:#f4f7fa;border-radius:11px;padding:15px;margin-top:4px}
.user-scheme-picker[hidden]{display:none}
.user-picker-note{margin:0 0 11px;font-size:12.5px;color:var(--muted)}
.user-scheme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:4px;margin-bottom:12px}
.user-picker-buttons{display:flex;gap:8px;flex-wrap:wrap}
.user-picker-buttons button{border:1px solid var(--line);background:#fff;padding:9px 14px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;color:var(--muted)}
.user-picker-buttons button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}

@media(max-width:760px){
  .user-row{grid-template-columns:1fr;gap:9px}
  .user-state{flex-direction:row;align-items:center;gap:9px}
  .user-actions{justify-content:flex-start;max-width:none}
  .user-actions button{min-height:40px}
  .signed-in{margin-bottom:12px}
}


.scheme-roads-note{font-size:12px;color:var(--muted);margin:6px 0 0;line-height:1.5;max-width:66ch}


/* ---------------- Sidebar logo ---------------- */
.brand-logo-button{width:100%;height:auto;margin:0 0 30px;padding:0;border:0;background:transparent;display:block;cursor:pointer;text-align:left}
.brand-logo-button:hover{background:transparent}
.brand-logo-image{display:block;width:100%;max-width:190px;height:auto;object-fit:contain}

/* ---------------- Header actions ---------------- */
.header-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sound-toggle{border:1px solid var(--line);background:#fff;color:var(--muted);padding:10px 14px;border-radius:9px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.sound-toggle:hover{border-color:var(--accent);color:var(--accent)}
.sound-toggle.on{background:#e3f6f6;border-color:var(--accent);color:#0c7676}

/* ---------------- Stat tiles as quick filters ---------------- */
.stat-tile{display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:0 8px 24px rgba(23,32,51,.05);transition:border-color .15s,box-shadow .15s}
.stat-tile span{color:var(--muted);font-size:13px;font-weight:600}
.stat-tile strong{display:block;font-size:28px;margin-top:8px}
.stat-tile small{display:block;color:var(--muted);font-size:11px;margin-top:4px}
.stat-tile:hover{border-color:#b9c3d0}
.stat-tile.selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.stat-tile.tile-critical.has-critical strong{color:var(--danger)}
.stat-tile.tile-confirmed strong{color:#167149}
.stat-tile.tile-awaiting strong{color:#8a5d00}

/* ---------------- New since last looked ---------------- */
.compact-badges{display:flex;gap:6px;align-items:center;flex:0 0 auto}
.new-tag{border-radius:999px;padding:5px 9px;font-size:10.5px;font-weight:800;letter-spacing:.04em;background:#2563eb;color:#fff}
.alert-card.is-unseen{box-shadow:0 0 0 2px #2563eb}
.panel-title-actions{display:flex;gap:12px;align-items:center}
.mark-seen{border:1px solid #bfd3fb;background:#eef4ff;color:#1d4ed8;padding:6px 10px;border-radius:7px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.mark-seen:hover{background:#dce8ff}
.mark-seen[hidden]{display:none}

@media(max-width:760px){
  .header-actions{margin-top:12px}
  .header-actions button{flex:1}
  header .header-actions .primary{margin-top:0}
  .stat-tile{padding:13px}
  .stat-tile span{font-size:12px}
  .stat-tile strong{font-size:23px;margin-top:5px}
  .stat-tile small{display:none}
}

/* ---------------- Camera list guide (Scheme Manager) ---------------- */
.csv-guide{background:#f4f7fa;border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:14px 0 6px;max-width:820px;font-size:13.5px;line-height:1.6;color:var(--ink)}
.csv-guide summary{font-weight:700;font-size:15px;cursor:pointer}
.csv-guide ol{margin:12px 0 0;padding-left:22px}
.csv-guide li{margin:0 0 9px}
.csv-guide a{color:var(--accent);font-weight:700}
.csv-guide-table-wrap{overflow-x:auto;margin:8px 0 2px}
.csv-guide-table{border-collapse:collapse;width:100%;background:#fff;border:1px solid var(--line);border-radius:8px;font-size:13px}
.csv-guide-table th,.csv-guide-table td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.csv-guide-table th{background:#eaf0f5;font-size:12px;color:var(--muted)}
.csv-guide-table td:first-child{font-weight:700;white-space:nowrap}
.csv-guide-table td:last-child{font-family:Consolas,Menlo,monospace;white-space:nowrap}
.csv-guide-table tr:last-child td{border-bottom:0}
.csv-guide-tips{margin-top:10px;padding:10px 14px;background:#fff8e6;border:1px solid #f1dfae;border-radius:9px}
.csv-guide-tips p{margin:0 0 7px}
.csv-guide-tips p:last-child{margin-bottom:0}

/* ---------------- Marker post you can type in (scheme editor) ---------------- */
.scheme-post-input{max-width:130px;border-color:var(--line);background:#fff;font-family:ui-monospace,Consolas,monospace}
.scheme-post-input::placeholder{color:var(--muted);font-family:Inter,Arial,sans-serif}
.scheme-post-input:disabled{opacity:.55}

/* ---------------- Congestion maps ---------------- */
.congestion-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 22px;margin-bottom:14px}
.congestion-pick{display:grid;gap:6px;font-size:12px;font-weight:700;color:var(--muted);min-width:260px}
.congestion-pick select{border:1px solid var(--line);background:#fff;padding:11px;border-radius:9px;color:var(--ink);font:inherit;font-size:14px;font-weight:600}
.congestion-toggle{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);padding-bottom:11px;cursor:pointer}
.congestion-checked{margin-left:auto;font-size:12px;color:var(--muted);padding-bottom:11px}
.congestion-checked.stale{color:var(--danger);font-weight:700}
.congestion-stats small{display:block;color:var(--muted);font-size:11px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.congestion-notice{background:#fdf3e0;color:#8a5d00;font-weight:600;font-size:13px;padding:11px 14px;border-radius:9px;margin:0 0 14px}
.congestion-notice[hidden]{display:none}
.congestion-workspace{display:grid;grid-template-columns:1.5fr 1fr;gap:15px;align-items:stretch}
.congestion-map{height:600px;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;z-index:0}
.congestion-panel{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;max-height:600px}
.congestion-list{overflow:auto;flex:1}
.congestion-row{display:grid;grid-template-columns:8px 1fr auto;gap:12px;align-items:center;width:100%;text-align:left;font:inherit;color:inherit;background:#fff;border:0;border-bottom:1px solid var(--line);padding:13px 16px;cursor:pointer}
.congestion-row:hover,.congestion-row.selected{background:#f4f7fa}
.congestion-row .bar{width:8px;height:38px;border-radius:4px}
.congestion-row strong{display:block;font-size:14px}
.congestion-row small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.congestion-row .figures{text-align:right;white-space:nowrap}
.congestion-row .figures strong{font-size:15px}
.congestion-row.off-scheme{opacity:.7}
.congestion-closures summary{padding:12px 16px;font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--muted);cursor:pointer;border-bottom:1px solid var(--line);background:#fafbfc}
.congestion-foot{margin:0;padding:11px 16px;font-size:11.5px;line-height:1.5;color:var(--muted);border-top:1px solid var(--line);background:#fafbfc}
.congestion-key{margin-top:14px}
.congestion-line{display:inline-block;width:22px;height:5px;border-radius:3px;margin-right:6px;vertical-align:middle}
.congestion-line.l1{background:#f0c23b}.congestion-line.l3{background:#f07c00}.congestion-line.l4{background:#d7263d}.congestion-line.l5{background:#7a0c1c}
.congestion-line.closed{background:repeating-linear-gradient(90deg,#172033 0 5px,transparent 5px 8px)}
.congestion-cam{display:inline-block;width:11px;height:11px;border-radius:50%;background:#12a6a6;border:2px solid #fff;box-shadow:0 0 0 1px #12a6a6;margin-right:6px;vertical-align:middle}
@media(max-width:1000px){.congestion-workspace{grid-template-columns:1fr}.congestion-map{height:420px}.congestion-panel{max-height:none}}
@media(max-width:760px){.congestion-pick{min-width:0;width:100%}.congestion-checked{margin-left:0;padding-bottom:0}.congestion-toggle{padding-bottom:0}.congestion-map{height:340px}}

/* ---------------- Sidebar brand: Lense Assist ---------------- */
.brand-logo-button{display:flex;align-items:center;gap:12px}
.brand-mark{width:38px;height:auto;display:block;flex:none}
.brand-words{display:block;min-width:0}
.brand .brand-words strong{display:block;font-size:19px;font-weight:700;color:#fff;letter-spacing:.2px;line-height:1.15}
.brand-words small{display:block;font-size:10.5px;color:#9db0c8;letter-spacing:1.7px;margin-top:3px}

/* ---------------- Buttons that were left unstyled ---------------- */
.dialog-buttons button:not(.primary):not(.map-action),#usersRefresh{border:1px solid var(--line);background:#fff;color:var(--ink);padding:11px 16px;border-radius:9px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.dialog-buttons button:not(.primary):not(.map-action):hover,#usersRefresh:hover{border-color:var(--accent);color:var(--accent)}
.dialog-buttons .map-action{border:1px solid #c5ddf5;padding:11px 16px;border-radius:9px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}

/* ---------------- Settings tick boxes sit beside their labels ---------------- */
.settings-card input[type=checkbox]{display:inline-block;width:18px;height:18px;margin:0;padding:0;flex:none;accent-color:var(--accent)}
.settings-card .category-check{display:flex;align-items:center;gap:10px;margin:0;color:var(--ink);font-size:13px}
.settings-card .setting-toggle input[type=checkbox]{margin-top:3px}

/* ---------------- "Refresh alerts" only belongs on Live Alerts ---------------- */
body[data-view]:not([data-view="dashboard"]) #refreshBtn{display:none}

/* ---------------- Phone fixes ---------------- */
@media(max-width:760px){
  /* A solid strip behind the menu button, so the page no longer scrolls underneath it. */
  body:not(.auth-page)::before{content:'';position:fixed;top:0;left:0;right:0;height:66px;background:var(--bg);border-bottom:1px solid var(--line);z-index:1050}
  /* With the menu open, the logo sits below the menu button rather than under it. */
  .sidebar{padding-top:76px}

  /* Camera list guide: each column stacks instead of squeezing three across. */
  .csv-guide{padding:12px 13px}
  .csv-guide ol{padding-left:19px}
  .csv-guide-table thead{display:none}
  .csv-guide-table,.csv-guide-table tbody,.csv-guide-table tr,.csv-guide-table td{display:block;width:100%}
  .csv-guide-table tr{padding:10px 11px;border-bottom:1px solid var(--line)}
  .csv-guide-table tr:last-child{border-bottom:0}
  .csv-guide-table td,.csv-guide-table td:first-child,.csv-guide-table td:last-child{padding:0;border:0;white-space:normal}
  .csv-guide-table td:first-child{margin-bottom:2px}
  .csv-guide-table td:last-child{margin-top:5px;color:var(--muted)}
  .csv-guide-table td:last-child::before{content:'Example: ';font-family:Inter,Arial,sans-serif}

  /* Scheme cameras: each camera becomes a small block, so the marker post box has room. */
  #schemeEditCard .scheme-table thead{display:none}
  #schemeEditCard .scheme-table,#schemeEditCard .scheme-table tbody{display:block}
  #schemeEditRows tr{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;padding:12px;border-bottom:1px solid var(--line)}
  #schemeEditRows tr:last-child{border-bottom:0}
  #schemeEditRows td{display:block;padding:0;border:0;min-width:0}
  #schemeEditRows td.rt{grid-column:1/-1;display:flex;gap:8px;text-align:left}
  #schemeEditRows td.rt button{flex:1;margin-left:0;min-height:42px;font-size:13px}
  #schemeEditRows td.empty{grid-column:1/-1}
  #schemeEditRows .scheme-cell-input{width:100%;max-width:none;min-height:42px;font-size:16px;border-color:var(--line);background:#fff}
  #schemeEditCard .scheme-table-wrap{max-height:none}
}

/* ---------------- Congestion maps: Live / History ---------------- */
.congestion-mode{display:inline-flex;border:1px solid var(--line);border-radius:10px;background:#fff;padding:3px;gap:3px}
.congestion-mode button{border:0;background:transparent;font:inherit;font-size:13px;font-weight:700;color:var(--muted);padding:9px 18px;border-radius:7px;cursor:pointer}
.congestion-mode button:hover{color:var(--ink)}
.congestion-mode button.on{background:var(--nav);color:#fff}
#congestionLive[hidden],#congestionHistory[hidden],.congestion-checked[hidden]{display:none}
#congestionHistory.loading{opacity:.55;transition:opacity .15s}
.congestion-stats article{min-width:0}
#congestionHistory .congestion-stats small{white-space:normal;overflow:visible;line-height:1.4}
.history-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px;margin-bottom:14px}
.history-filters label{display:grid;gap:6px;font-size:12px;font-weight:700;color:var(--muted)}
.history-filters label[hidden]{display:none}
.history-filters select,.history-filters input{border:1px solid var(--line);background:#fff;padding:10px 11px;border-radius:9px;color:var(--ink);font:inherit;font-size:14px;font-weight:600;min-width:150px}
.history-download{margin-left:auto;border:1px solid var(--line);background:#fff;color:var(--ink);padding:10px 15px;border-radius:9px;font-size:13px;font-weight:700;text-decoration:none}
.history-download:hover{border-color:var(--accent);color:var(--accent)}
.history-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:15px;box-shadow:0 8px 24px rgba(23,32,51,.05)}
.history-card h2{font-size:17px;margin:0 0 4px}
.history-card summary{font-size:15px;font-weight:700;cursor:pointer}
.history-card[open] summary{margin-bottom:12px}
.history-sub{margin:0 0 10px;font-size:12.5px;color:var(--muted);line-height:1.5;max-width:90ch}
.history-chart{position:relative;width:100%;border-radius:8px;outline-offset:3px}
.history-chart:focus-visible{outline:2px solid var(--accent)}
.history-chart svg{display:block;max-width:100%}
.history-chart text{font-family:Inter,Arial,sans-serif;font-variant-numeric:tabular-nums}
.history-tip{position:absolute;pointer-events:none;background:var(--nav);color:#fff;border-radius:8px;padding:7px 10px;font-size:12px;line-height:1.35;white-space:nowrap;box-shadow:0 6px 18px rgba(12,19,31,.25);z-index:2}
.history-tip[hidden]{display:none}
.history-tip strong{display:block;font-size:14px}
.history-tip span{color:#c7d2e2}
.history-table-wrap{overflow-x:auto}
.history-table{width:100%;border-collapse:collapse;font-size:13px}
.history-table th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.history-table td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
.history-table tr:last-child td{border-bottom:0}
.history-table .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.history-table td.empty{text-align:center;color:var(--muted);padding:26px 10px}
.history-table small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.history-road{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--ink);cursor:pointer;text-align:left}
.history-road:hover{color:var(--accent);text-decoration:underline}
.history-foot{font-size:11.5px;color:var(--muted);line-height:1.5;margin:0 2px}
@media(max-width:760px){
  .congestion-mode{width:100%}
  .congestion-mode button{flex:1;min-height:42px}
  .history-filters label{flex:1 1 100%}
  .history-filters select,.history-filters input{width:100%;font-size:16px;padding:12px}
  .history-download{margin-left:0;flex:1 1 100%;text-align:center;padding:13px}
  .history-card{padding:14px}
  .history-table{font-size:12.5px}
  .history-table th,.history-table td{padding:8px 6px}
}

/* ---------------- Menu link that opens another page (the wallboard) ---------------- */
.nav-link{display:block;width:100%;color:#aebbd0;text-align:left;padding:13px 14px;border-radius:10px;margin-bottom:7px;font-weight:600;font-size:13.3333px;text-decoration:none}
.nav-link:hover{background:#22304a;color:#fff}
.nav-link::after{content:'\2197';margin-left:7px;font-size:11px;opacity:.7}

/* ==========================================================================
   Lense theme: makes Lense Assist look like lense.info.
   Loaded after styles.css, so removing this one file puts the old look back.
   Colours and type are taken from lense.info. Status colours (red, amber,
   green) are left alone on purpose: on the board they mean something.
   ========================================================================== */
:root{
  --lense-teal:#3FA69D;
  --lense-teal-deep:#2C8880;
  --lense-teal-dark:#1F5F5A;
  --lense-teal-tint:#E4F3F1;
  --lense-navy:#0B1220;
  --lense-navy-2:#141D2E;
  --lense-grey:#ECEDED;
  --lense-ink-soft:#5A6266;

  /* The app's own tokens, pointed at the Lense palette. */
  --accent:var(--lense-teal);
  --nav:var(--lense-navy);
  --ink:var(--lense-navy);
  --muted:var(--lense-ink-soft);
  --bg:#F2F3F3;
  --line:#DFE3E3;
}

/* ---------------- type: Poppins for headings, buttons and the menu ---------------- */
body.lense-theme h1,body.lense-theme h2,body.lense-theme h3,
body.lense-theme .nav,body.lense-theme .nav-link,body.lense-theme .primary,
body.lense-theme .stats strong,body.lense-theme .stat-tile strong,body.lense-theme .admin-menu-label,
body.lense-theme .brand-words,body.lense-theme .panel-title h2{font-family:Poppins,Inter,Arial,sans-serif}

/* Page title in the lense.info style: heavy, upper case, last word in teal. */
body.lense-theme header h1{font-size:30px;font-weight:800;text-transform:uppercase;letter-spacing:.01em;line-height:1.1;margin-bottom:6px}
body.lense-theme header h1 .lense-hl{color:var(--lense-teal)}
body.lense-theme header p{color:var(--lense-ink-soft)}
body.lense-theme .card h2,body.lense-theme .panel-title h2,body.lense-theme .history-card h2{font-weight:700}

/* The menu button sits at the top of the page beside the sidebar; keep the title clear of it. */
body.lense-theme:not(.sidebar-collapsed) header{padding-left:46px}
body.lense-theme.sidebar-collapsed header{padding-left:46px}
@media(max-width:760px){body.lense-theme header,body.lense-theme.sidebar-collapsed header{padding-left:0}}

/* ---------------- sidebar ---------------- */
/* Deep teal, like the lense.info header bar (chosen 16 Oct 2026). */
body.lense-theme .sidebar{background:var(--lense-teal-dark)}
body.lense-theme .brand-mark{display:none}
body.lense-theme .brand-words{display:block}
/* Same trick as lense.info: the logo file is dark, and this turns it white. */
body.lense-theme .brand-words .lense-wordmark{display:block;height:34px;width:auto;filter:brightness(0) invert(1)}
body.lense-theme .brand-words strong{display:none}
body.lense-theme .brand-words small{font-family:Poppins,Inter,sans-serif;font-size:11px;font-weight:700;letter-spacing:.42em;color:#BFE0DC;margin-top:6px}
body.lense-theme .nav,body.lense-theme .nav-link{font-weight:500;font-size:14px;border-radius:999px;padding:11px 18px}
body.lense-theme .nav:hover,body.lense-theme .nav-link:hover{background:rgba(255,255,255,.08)}
body.lense-theme .nav,body.lense-theme .nav-link{color:#DCEFEC}
body.lense-theme .nav.active{background:#fff;color:var(--lense-teal-dark);font-weight:600}
/* The account and health boxes at the foot of the sidebar, a shade darker than the teal. */
body.lense-theme .signed-in,body.lense-theme .health{background:rgba(11,18,32,.28)}
body.lense-theme .admin-menu-label{letter-spacing:.2em}
body.lense-theme .signed-in,body.lense-theme .health{border-radius:16px}

/* ---------------- buttons: pills, like the website ---------------- */
body.lense-theme .primary{
  border-radius:999px;text-transform:uppercase;letter-spacing:.04em;font-weight:700;font-size:13px;
  padding:12px 24px;background:var(--lense-teal);border:2px solid var(--lense-teal)
}
body.lense-theme .primary:hover{background:var(--lense-teal-deep);border-color:var(--lense-teal-deep)}
body.lense-theme .sound-toggle,body.lense-theme .history-download,body.lense-theme .mark-seen,
body.lense-theme #healthRefresh,body.lense-theme #usersRefresh,body.lense-theme .scheme-filter-toggle{border-radius:999px}
body.lense-theme .sound-toggle,body.lense-theme .history-download{
  border:2px solid var(--lense-navy);color:var(--lense-navy);font-family:Poppins,Inter,sans-serif;
  text-transform:uppercase;letter-spacing:.04em;font-size:12px;font-weight:700;padding:10px 20px;background:transparent
}
body.lense-theme .sound-toggle.on{border-color:var(--lense-teal);background:var(--lense-teal-tint);color:var(--lense-teal-dark)}
body.lense-theme .congestion-mode{border-radius:999px}
body.lense-theme .congestion-mode button{border-radius:999px;font-family:Poppins,Inter,sans-serif}
body.lense-theme .congestion-mode button.on{background:var(--lense-teal)}
body.lense-theme .verdict-btn{border-radius:999px}
body.lense-theme .map-action{border-radius:999px}
body.lense-theme .dialog-buttons button{border-radius:999px}

/* ---------------- cards and tiles: rounder, more air ---------------- */
body.lense-theme .card,body.lense-theme .alerts-panel,body.lense-theme .history-card,
body.lense-theme .congestion-panel,body.lense-theme .congestion-map{border-radius:20px}
body.lense-theme .stat-tile,body.lense-theme .stats article{border-radius:20px;padding:20px 22px}
body.lense-theme .stat-tile strong,body.lense-theme .stats article strong{font-weight:800;font-size:32px}
body.lense-theme .stat-tile.selected{box-shadow:0 0 0 2px var(--lense-teal) inset;border-color:var(--lense-teal)}
body.lense-theme .filters select,body.lense-theme .filters input,body.lense-theme .congestion-pick select,
body.lense-theme .history-filters select,body.lense-theme .history-filters input{border-radius:12px}
body.lense-theme .alerts-workspace #alertList{background:var(--lense-grey)}
body.lense-theme .compact-grid-card{border-radius:16px}
body.lense-theme dialog{border-radius:20px}

@media(max-width:760px){
  body.lense-theme header h1{font-size:24px}
}

/* The alert list grows with the page instead of scrolling inside a fixed box,
   so cards are never cut off at the bottom. */
.alerts-workspace #alertList{height:auto;min-height:320px;overflow:visible}

/* Day by day chart on the Congestion Maps history */
.history-days-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:10px 18px}
.history-days-head .history-sub{margin-bottom:6px}
.history-days-pick{display:inline-flex;border:1px solid var(--line);border-radius:999px;background:#fff;padding:3px;gap:3px}
.history-days-pick button{border:0;background:transparent;font:inherit;font-size:12.5px;font-weight:700;color:var(--muted);padding:8px 14px;border-radius:999px;cursor:pointer;white-space:nowrap}
.history-days-pick button:hover{color:var(--ink)}
.history-days-pick button.on{background:var(--accent);color:#fff}
.history-days-table{margin-top:10px}
.history-days-table summary{font-size:13px;font-weight:700;color:var(--muted);cursor:pointer}
.history-days-table[open] summary{margin-bottom:8px}
.history-table td.empty-day{color:var(--muted);text-align:center}
@media(max-width:760px){
  .history-days-pick{width:100%}
  .history-days-pick button{flex:1;padding:10px 6px;white-space:normal}
}

/* Picking a day on the day by day chart */
#historyDaysChart rect.pickable{cursor:pointer}
.history-focus{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:0 0 15px;padding:12px 16px;border-radius:14px;background:#E4F3F1;border:1px solid #bfe0dc;color:#1F5F5A;font-size:13.5px;font-weight:600;scroll-margin-top:80px}
.history-focus[hidden]{display:none}
.history-focus button{border:0;border-radius:999px;background:#1F5F5A;color:#fff;font:inherit;font-size:12.5px;font-weight:700;padding:9px 16px;cursor:pointer;white-space:nowrap}
.history-focus button:hover{background:#2C8880}
@media(max-width:760px){.history-focus button{width:100%}}

/* Traffic flow (National Highways counters) on Congestion Maps */
.flow-card{margin-top:15px}
.flow-live{display:grid;gap:8px}
.flow-row{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:10px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff}
.flow-name strong{display:block;font-size:15px;text-transform:capitalize}
.flow-name small{color:var(--muted);font-size:12px}
.flow-figure{text-align:right}
.flow-figure strong{display:block;font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
.flow-figure small{color:var(--muted);font-size:11.5px}
.flow-idle{margin:6px 0 0;color:var(--muted);font-size:12.5px}
.flow-credit{margin:12px 0 0;color:var(--muted);font-size:11.5px}
.flow-history{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:center;margin-bottom:12px}
.flow-mix{display:flex;gap:14px;align-items:center}
.flow-mix svg{flex:none}
.flow-key{display:grid;gap:7px;min-width:0}
.flow-key-row{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:8px;align-items:center;font-size:12.5px}
.flow-key-row i{width:12px;height:12px;border-radius:3px}
.flow-key-row strong{display:block;font-weight:600}
.flow-key-row small{color:var(--muted)}
.flow-key-row b{font-variant-numeric:tabular-nums}
.flow-total{margin:4px 0 0;color:var(--muted);font-size:12px}
.history-table td.muted{color:var(--muted);font-size:12px}
@media(max-width:1100px){.flow-history{grid-template-columns:1fr}}
@media(max-width:760px){
  .flow-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .flow-name{grid-column:1/-1}
  .flow-figure{text-align:left}
  .flow-mix{flex-direction:column;align-items:flex-start}
}