/* DEV 3.0.32: Material 3 thematic workspace surfaces. */
/* These hues belong ONLY to the application workspace, never to road-condition states. */
:root{--m3-area-wash:var(--m3-surface);--m3-area-selected:var(--m3-surface-container);--m3-area-ink:var(--text);--m3-area-rule:var(--m3-outline-variant);}
body[data-workspace="ops"]{--m3-area-wash:#E8F3F3;--m3-area-selected:#D3E9E8;--m3-area-ink:#134E59;--m3-area-rule:#176A76;}
body[data-workspace="measure"]{--m3-area-wash:#EDF2F8;--m3-area-selected:#DCE7F3;--m3-area-ink:#284D70;--m3-area-rule:#456C94;}
body[data-workspace="map"]{--m3-area-wash:#EFF5EC;--m3-area-selected:#E1EDDE;--m3-area-ink:#365F34;--m3-area-rule:#597955;}
body[data-workspace="tech"]{--m3-area-wash:#EEF2F4;--m3-area-selected:#E1E9EF;--m3-area-ink:#43545D;--m3-area-rule:#607580;}
body[data-workspace="admin"]{--m3-area-wash:#F6F1EA;--m3-area-selected:#EFE5D9;--m3-area-ink:#634E38;--m3-area-rule:#82694D;}
body[data-workspace="methods"]{--m3-area-wash:#EAF3F0;--m3-area-selected:#D9EAE4;--m3-area-ink:#2B5E55;--m3-area-rule:#517D76;}
body[data-workspace="reports"]{--m3-area-wash:#F2EFF5;--m3-area-selected:#E6DDEC;--m3-area-ink:#584765;--m3-area-rule:#7B708A;}
body.dark[data-workspace="ops"]{--m3-area-wash:#1C3438;--m3-area-selected:#294B4B;--m3-area-ink:#A7DADC;--m3-area-rule:#A7DADC;}
body.dark[data-workspace="measure"]{--m3-area-wash:#222F40;--m3-area-selected:#33465C;--m3-area-ink:#B4D4F1;--m3-area-rule:#B4D4F1;}
body.dark[data-workspace="map"]{--m3-area-wash:#29382A;--m3-area-selected:#36513D;--m3-area-ink:#C1DFBF;--m3-area-rule:#C1DFBF;}
body.dark[data-workspace="tech"]{--m3-area-wash:#28343B;--m3-area-selected:#384A52;--m3-area-ink:#B9D3DD;--m3-area-rule:#B9D3DD;}
body.dark[data-workspace="admin"]{--m3-area-wash:#3A3129;--m3-area-selected:#514438;--m3-area-ink:#E5CDA9;--m3-area-rule:#E5CDA9;}
body.dark[data-workspace="methods"]{--m3-area-wash:#233A36;--m3-area-selected:#31574D;--m3-area-ink:#B7DBD1;--m3-area-rule:#B7DBD1;}
body.dark[data-workspace="reports"]{--m3-area-wash:#33303B;--m3-area-selected:#484253;--m3-area-ink:#DBCAE5;--m3-area-rule:#DBCAE5;}
/* Large workspace surface, not coloured sensor panels or chart data. */
.layout>.page{background-color:var(--m3-area-wash);transition:background-color .22s var(--m3-easing);min-height:100dvh;}
.page>.topbar{border-bottom:1px solid color-mix(in srgb,var(--m3-area-rule) 18%,transparent);padding-bottom:18px;margin-bottom:16px;}
.page>.topbar>div:first-child{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;min-width:0;}
.page>.topbar>div:first-child p{flex-basis:100%;margin:0;}
.page .topbar #pageTitle{padding-left:14px;border-left:4px solid var(--m3-area-rule);margin:0;}
.m3-workspace-pill{display:inline-flex;align-items:center;gap:7px;max-width:100%;padding:6px 12px;border-radius:999px;background:var(--m3-area-selected);color:var(--m3-area-ink);font:600 12px/1.35 Roboto,"Segoe UI",Arial,sans-serif;letter-spacing:.08px;}
.m3-workspace-pill-icon{display:inline-block;flex:none;width:8px;height:8px;background:var(--m3-area-rule);border-radius:50%;}
/* Active page marker in drawer or navigation rail. Nav permissions and order unchanged. */
.sidebar .navlink.active,.sidebar .navlink.active:hover{background:var(--m3-area-selected);color:var(--m3-area-ink);box-shadow:inset 3px 0 0 var(--m3-area-rule);}
.sidebar .navlink.active .m3-nav-icon{color:var(--m3-area-ink);}
/* On data-heavy surfaces neutral legible panels always stay neutral. */
@media(min-width:731px) and (max-width:1150px){.sidebar .navlink.active{box-shadow:inset 0 -3px 0 var(--m3-area-rule);} .page>.topbar{margin-bottom:12px;}}
@media(max-width:730px){.page>.topbar>div:first-child{align-items:center;gap:8px 10px;}.page>.topbar h1{max-width:100%;} .m3-workspace-pill{padding:5px 9px;font-size:11px;}.page>.topbar{margin-bottom:12px;}}
@media(prefers-reduced-motion:reduce){.layout>.page{transition:none!important;}}
/* Keep the wide authenticated toolbar from overlapping the title and workspace label. */
.page>.topbar{flex-wrap:wrap;align-items:flex-start;row-gap:12px;}
.page>.topbar>div:first-child{flex:1 1 330px;min-width:min(100%,280px);}
.page>.topbar>.topactions{flex:1 1 560px;min-width:0;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;}
@media(max-width:730px){.page>.topbar>div:first-child{flex:1 1 100%;}.page>.topbar>.topactions{flex:1 1 100%;justify-content:flex-start;}}