/* Material 3 visual foundation: Street Monitoring DEV 3.0.30.
   Semantic road-condition colours are fixed in status_ui_v324.js and NEVER theme-driven.
   Maintains existing JS IDs, roles, API requests, panels and plotting. */
:root{
  --m3-surface:#f8fafc;--m3-surface-container:#edf2f5;--m3-surface-high:#e1e9ee;
  --m3-on-surface:#1b2831;--m3-outline:#748790;--m3-outline-variant:#c7d4db;
  --m3-inverse:#123e50;--m3-state-hover:rgba(22,91,115,.08);
  --m3-state-pressed:rgba(22,91,115,.12);--m3-focus:#237b9c;
  --m3-easing:cubic-bezier(.2,0,0,1);
  --m3-radius-xs:4px;--m3-radius-sm:8px;--m3-radius-md:12px;--m3-radius-lg:16px;--m3-radius-xl:28px;
  font-family:Roboto,'Segoe UI',Arial,sans-serif;font-synthesis:none;
}
body.dark{
  --m3-surface:#101b22;--m3-surface-container:#1d2d35;--m3-surface-high:#2d414b;
  --m3-on-surface:#e3edf0;--m3-outline:#98aab4;--m3-outline-variant:#40535e;
  --m3-inverse:#a6d5e9;--m3-state-hover:rgba(159,215,234,.08);
  --m3-state-pressed:rgba(159,215,234,.14);--m3-focus:#94d9f2;
}
html{scroll-behavior:smooth;}
body{line-height:1.48;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
.topbar h1{font-size:clamp(22px,2.15vw,28px);line-height:1.25;font-weight:500;letter-spacing:0;}
.panel h2{font-size:20px;font-weight:500;line-height:1.3;letter-spacing:0;}
.panel h3{font-size:16px;line-height:1.45;font-weight:600;}
.panelheader p,.topbar p{font-size:14px;line-height:1.5;}
.panel{border-radius:var(--m3-radius-xl);box-shadow:none;border-color:var(--m3-outline-variant);}
.notice{border-radius:var(--m3-radius-md);line-height:1.5;}
.metric{border-radius:var(--m3-radius-lg);box-shadow:none;}
/* Extended FAB/icon/button family consistent with 40/48dp Material 3 sizes. */
button.primary,button.secondary,.iconbutton,.popup-close,.op-modal-close{
  min-height:40px;border-radius:999px;font:inherit;font-size:14px;font-weight:600;
  letter-spacing:.1px;transition:background-color .18s var(--m3-easing),
    color .18s var(--m3-easing),box-shadow .18s var(--m3-easing),
    transform .18s var(--m3-easing);position:relative;
}
button.primary,button.secondary{min-height:40px;padding:9px 20px;}
button.primary{background:var(--primary);color:var(--onprimary);}
button.primary:hover:not(:disabled){box-shadow:0 2px 6px rgba(0,0,0,.2);filter:brightness(.96);}
button.secondary:hover:not(:disabled),.iconbutton:hover:not(:disabled){background:var(--m3-surface-high);}
button.primary:active:not(:disabled),button.secondary:active:not(:disabled),.iconbutton:active:not(:disabled){transform:scale(.985);}
.iconbutton,.popup-close,.op-modal-close{min-width:40px;min-height:40px;display:inline-grid;place-items:center;padding:6px;}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--m3-focus);outline-offset:3px;
}
button:disabled{cursor:not-allowed;opacity:.48;}
/* Text fields: shape, density, and readable labels. */
.fields label,section label{font-size:13px;font-weight:500;line-height:1.5;}
.fields input:not([type=checkbox]):not([type=radio]):not([type=range]),.fields select,.panel input:not([type=checkbox]):not([type=radio]):not([type=range]),.panel select,.panel textarea{
  font:inherit;font-size:14px;min-height:48px;border-radius:var(--m3-radius-sm);
  border-color:var(--m3-outline);padding:10px 14px;transition:border-color .16s var(--m3-easing),box-shadow .16s var(--m3-easing);
}
.fields :is(input,select,textarea):focus,.panel :is(input,select,textarea):focus{
  border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary);
}
input[type=checkbox],input[type=radio]{accent-color:var(--primary);}
input[type=range]{accent-color:var(--primary);cursor:pointer;}
.badge,.chip,.userpill{border-radius:var(--m3-radius-sm);font-weight:600;letter-spacing:.1px;}
/* Expanded drawer with Material 3 active indicator and a scrollable destination list. */
.layout{grid-template-columns:280px minmax(0,1fr);}
.sidebar{
  min-height:100dvh;height:100dvh;position:sticky;top:0;overflow:hidden;
  border-right:1px solid var(--m3-outline-variant);padding:16px 12px;gap:18px;
  background:var(--m3-surface-container);
}
.brand{padding:7px 12px;min-height:56px;gap:12px;}
.brand img{width:40px;height:40px;object-fit:contain;}
.brand strong{font-size:16px;font-weight:600;line-height:1.3;}
.brand small{font-size:12px;line-height:1.45;}
.sidebar nav{display:flex;flex-direction:column;gap:4px;overflow-y:auto;overflow-x:hidden;min-height:0;flex:1 1 auto;padding:0 3px 12px;scrollbar-width:thin;}
.sidebar .navlink{
  flex:none;display:flex;align-items:center;gap:12px;width:100%;min-height:52px;
  padding:10px 16px;border-radius:28px;background:transparent;color:var(--text);
  font-size:14px;line-height:1.4;font-weight:500;position:relative;
  transition:background-color .18s var(--m3-easing),color .18s var(--m3-easing);
}
.sidebar .navlink:hover:not(.active){background:var(--m3-state-hover);}
.sidebar .navlink:active{background:var(--m3-state-pressed);}
.sidebar .navlink.active{background:var(--surface);color:var(--primary);font-weight:700;}
.m3-nav-icon{display:block;flex:0 0 24px;width:24px;height:24px;}
.m3-nav-label{display:block;min-width:0;overflow-wrap:anywhere;}
.sidebar-bottom{padding:10px 14px;font-size:12px;border-top:1px solid var(--m3-outline-variant);line-height:1.5;}
/* Keep 24 navigation destinations accessible on touch screens via a modal drawer. */
.m3-nav-scrim{display:none;}
@media(min-width:731px) and (max-width:1150px){
  .layout{grid-template-columns:88px minmax(0,1fr);}
  .sidebar{padding:14px 8px;gap:10px;align-items:center;}
  .brand{padding:5px;justify-content:center;min-height:54px;}
  .brand img{width:44px;height:44px;}
  .brand>div,.sidebar-bottom,.sidebar .m3-nav-label{display:none;}
  .sidebar nav{align-items:center;width:100%;padding:0 0 8px;}
  .sidebar .navlink{width:64px;min-height:56px;border-radius:18px;padding:10px;justify-content:center;}
  .sidebar .navlink.active{background:var(--surface);}
  .m3-nav-icon{width:24px;height:24px;}
  .sidebar .navlink::after{content:attr(aria-label);position:absolute;left:calc(100% + 8px);display:none;}
  .topbar{flex-wrap:wrap;}
}
@media(max-width:730px){
  .layout{display:block;}
  .sidebar{
    display:flex;position:fixed;inset:0 auto 0 0;height:100dvh;max-width:calc(100vw - 48px);
    width:min(360px,calc(100vw - 48px));padding:16px;transform:translateX(-108%);
    visibility:hidden;pointer-events:none;z-index:51;border-right:0;
    box-shadow:0 12px 32px rgba(0,0,0,.22);
    transition:transform .25s var(--m3-easing),visibility .25s;
  }
  .sidebar.open{display:flex;transform:translateX(0);visibility:visible;pointer-events:auto;}
  .m3-nav-scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.42);opacity:0;visibility:hidden;pointer-events:none;z-index:50;transition:opacity .25s var(--m3-easing),visibility .25s;}
  body.m3-drawer-open .m3-nav-scrim{opacity:1;visibility:visible;pointer-events:auto;}
  body.m3-drawer-open{overflow:hidden;}
  .topbar{align-items:flex-start;flex-wrap:wrap;gap:12px;}
  .topbar h1{font-size:22px;}
  .panel{border-radius:var(--m3-radius-lg);}
  .panelheader{flex-wrap:wrap;}
  /* Deliberately keep enough whitespace to tap actual chart controls. */
  #einsatz .ops-sensor-toggle{min-height:72px;}
}
/* M3 state-layer response for in-row accordion without changing its semantic status. */
#einsatz .ops-sensor{border-radius:var(--m3-radius-lg);}
#einsatz .ops-sensor-toggle{transition:background-color .16s var(--m3-easing);}
#einsatz .ops-sensor-toggle:hover{background:var(--m3-state-hover);}
#einsatz .ops-sensor-toggle[aria-expanded=true]{background:var(--m3-state-hover);}
#einsatz .ops-sensor-icon{border-radius:var(--m3-radius-md);}
/* Fixed semantic condition glyph colours; NEVER refer to theme tokens. */
#einsatz .ops-sensor[style*="--ops-state:#e7b316"] .ops-sensor-icon{color:#3f3200;}
#einsatz .ops-sensor[style*="--ops-state:#ee9000"] .ops-sensor-icon{color:#332300;}
.ops-map-pin.state-dark:has(.street-state-icon){isolation:isolate;}
.ops-map-pin[style*="#e7b316"] .street-state-icon,.ops-map-pin[style*="rgb(231, 179, 22)"] .street-state-icon{color:#3f3200;}
#opsAnalysisPanel .ops-zero-line{stroke:#d16b23!important;stroke-width:2!important;stroke-dasharray:5 4;}
#opsAnalysisPanel .ops-zero-label{fill:#a64e0f!important;font-weight:800;}
#opsAnalysisPanel .ops-measurement-point{cursor:pointer;}
#opsAnalysisPanel .ops-point-hit{cursor:pointer;pointer-events:all;}
#opsAnalysisPanel .ops-measurement-point:hover,#opsAnalysisPanel .ops-measurement-point:focus-visible{stroke:var(--m3-focus);stroke-width:3;}
/* System and user preferences, not playful distracting motion. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;}
}