/* Main dark cockpit: reference design2. Decoration does not encode real metrics. */
html[data-theme="dark"]{--bg:#050e18;--panel:#0b1b2b;--soft:#132c40;--ink:#f1f7ff;--muted:#b9cfdf;--line:#6485a1;--accent:#ffac65;--primary:#983709;--link:#75ddff;--selected:#38261d;--focus:#ffcb8c;--rail-tint:#071625ee;--radius:3px;color-scheme:dark}
.roleNavigation{display:flex;flex-direction:column;gap:7px;padding:12px 0;border-bottom:1px solid var(--line);margin-bottom:10px}.roleNavigation button{text-align:left;font-weight:700}
.weekMaintenanceActions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 16px;padding:12px 16px;background:var(--soft);border:1px solid var(--hud-edge);border-left:3px solid var(--hud-orange);border-radius:4px}.weekMaintenanceActions[hidden]{display:none}.weekMaintenanceActions strong{margin-right:auto}.weekMaintenanceActions button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px}.weekMaintenanceActions button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.kpiHalfDial{display:block;width:min(220px,80%);height:120px;margin:6px auto;color:var(--muted)}.kpiHalfDial path{fill:none;stroke-width:7;stroke-linecap:round}.kpiHalfDial .dialBase{stroke:var(--line)}.kpiHalfDial.unrated .dialBase{stroke-dasharray:7 5;opacity:.7}.kpiHalfDial .dialRed{stroke:#e57269}.kpiHalfDial .dialAmber{stroke:#f6c161}.kpiHalfDial .dialGreen{stroke:#63d896}.kpiHalfDial .dialNeedle{stroke:var(--ink);stroke-width:3}.kpiHalfDial circle{fill:var(--ink)}.kpiHalfDial text{fill:var(--muted);font:9px 'Segoe UI',sans-serif}.biCustomFilterHint{display:block;flex-basis:100%;line-height:1.5;color:var(--muted)}
.maintenanceDialog{max-width:min(950px,95vw);max-height:90vh;overflow:auto}.maintenanceDialog pre{white-space:pre-wrap;overflow-wrap:anywhere}.reminderList{display:grid;gap:12px}.reminderOverdue{border-left:4px solid #ee9384;background:var(--danger-bg)}.reminderOverdue :is(h3,p){color:var(--danger-ink)}
.inspectionPhoto{display:block;width:100%;max-width:500px;max-height:350px;object-fit:contain;border:1px solid var(--line)}
.taskImportTable{overflow:auto;max-height:65vh;margin:16px 0}.taskImportTable table{width:100%;border-collapse:collapse;min-width:1000px}.taskImportTable :is(th,td){padding:12px;border:1px solid var(--line);text-align:left;vertical-align:top}.taskImportTable th{position:sticky;top:0;background:var(--panel);z-index:1}.taskImportTable small{display:block;color:var(--muted)}.taskImportTable :is(select,input[type=number]){min-width:150px;max-width:240px}.taskImportTable input[type=checkbox]{width:24px;height:24px;accent-color:var(--primary)}
@media(max-width:750px){.sectionNavigation{position:sticky!important;top:0;z-index:15;max-height:34vh;overflow:auto!important}.roleNavigation{position:sticky;top:-6px;z-index:2;background:var(--panel);flex-direction:row;flex-wrap:wrap;margin:0 0 6px;padding:6px}.roleNavigation button{flex:1;text-align:center;min-height:44px}.weekMaintenanceActions strong{flex-basis:100%}.weekMaintenanceActions button{flex:1 1 160px}.maintenanceDialog{padding:14px}}
@media(forced-colors:active){.sectionScene{display:none}.kpiHalfDial path{stroke:CanvasText}.kpiHalfDial circle{fill:CanvasText}.kpiHalfDial text{fill:CanvasText}}

/* Revised reference cockpit: shared geometry across all palettes. */
:root{--hud-edge:#398eb5;--hud-bright:#7addff;--hud-glow:#20bfff24;--hud-orange:#ff983e;--hud-shadow:#0005;--hud-surface:var(--panel);--hud-inset:var(--soft)}
html[data-theme="light"],html[data-theme="sand"]{--hud-edge:#5b94af;--hud-bright:#147197;--hud-glow:#218bc020;--hud-shadow:#33556b1c;--hud-orange:#b64900}
html[data-theme="neon"]{--hud-edge:#91aa5d;--hud-bright:#d9fa8d;--hud-glow:#baff2520;--hud-orange:#ffb785}
/* A compact panorama leaves controls and vehicle cards on the first screen. */
body.flowReferenceDesign .app>header{min-height:116px;padding:16px 20px 24px;border:1px solid var(--hud-edge);border-radius:4px;box-shadow:inset 0 0 0 4px var(--hud-shadow),0 6px 24px var(--hud-shadow);overflow:hidden}
body.flowReferenceDesign .app>header::before{background-position:center 54%}
body.flowReferenceDesign .brand{border-radius:4px;border:1px solid var(--hud-edge);background:var(--panel);box-shadow:inset 0 0 0 3px var(--hud-shadow);padding:10px 14px}
body.flowReferenceDesign .logo{border-radius:4px;border:1px solid #ffc786;box-shadow:0 0 18px #ff762b66,inset 0 0 8px #ffc78655;background:linear-gradient(135deg,#f77b12,#9c3103)}
body.flowReferenceDesign .app>header #account{border-radius:4px;border:1px solid var(--hud-edge);background:var(--panel);padding:10px 12px}
body.flowReferenceDesign .sectionNavigation{padding:16px 12px;border-right:1px solid var(--hud-edge);box-shadow:inset -4px 0 var(--hud-shadow)}
body.flowReferenceDesign .flowRailBrand{border-radius:4px;border:1px solid var(--hud-edge);border-top:2px solid var(--hud-bright);background:var(--panel);box-shadow:inset 0 0 0 4px var(--hud-shadow);padding:20px 14px;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
body.flowReferenceDesign .sectionNavigation button{border:1px solid var(--hud-edge);border-radius:3px;min-height:48px;background:linear-gradient(115deg,var(--hud-inset),var(--hud-surface));box-shadow:inset 0 0 0 2px var(--hud-shadow);padding:10px 12px;display:flex;align-items:center;gap:10px}
body.flowReferenceDesign .sectionNavigation button::before{content:none}
body.flowReferenceDesign .sectionNavigation button.active{border-color:var(--hud-orange);box-shadow:inset 3px 0 var(--hud-orange),inset 0 0 0 2px var(--hud-shadow),0 0 17px #ff8b3530;background:linear-gradient(100deg,var(--selected),var(--panel));color:var(--ink)}
.hudNavIcon{display:inline-flex;width:22px;height:22px;flex:0 0 22px;color:var(--link)}.hudNavIcon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.active .hudNavIcon{color:var(--accent)}
body.flowReferenceDesign :is(.view>.titlebar,.card,.ops-panel,.fuelCard,.biCommandPanel,.biKpiSection,.dataHubGrid>.card,.planScrollTools){position:relative;border:1px solid var(--hud-edge);border-radius:4px;background:linear-gradient(145deg,var(--soft),var(--panel) 58%);box-shadow:inset 0 0 0 4px var(--hud-shadow),0 5px 18px var(--hud-shadow)}
body.flowReferenceDesign :is(.card,.ops-panel,.fuelCard,.biCommandPanel,.biKpiSection,.dataHubGrid>.card)::after{content:'';position:absolute;top:0;right:14px;width:48px;height:3px;background:var(--hud-bright);pointer-events:none;box-shadow:0 0 10px var(--hud-glow)}
body.flowReferenceDesign .view>.titlebar{border-top:2px solid var(--hud-bright);border-left:3px solid var(--hud-orange);min-height:126px;padding:12px 22px;gap:16px;margin:14px 0 20px;background:radial-gradient(ellipse at 8% 60%,var(--hud-glow),transparent 58%),linear-gradient(120deg,var(--soft),var(--panel));box-shadow:inset 0 0 0 5px var(--hud-shadow),0 7px 24px var(--hud-shadow);isolation:isolate}
body.flowReferenceDesign .view>.titlebar::before{content:'';display:block;position:absolute;inset:7px;pointer-events:none;border-top:1px solid var(--hud-edge);border-bottom:1px solid var(--hud-edge);z-index:-1}
body.flowReferenceDesign .view>.titlebar::after{content:'';position:absolute;bottom:-2px;right:36px;width:100px;height:3px;background:var(--hud-orange);transform:skewX(-35deg);pointer-events:none;box-shadow:0 0 12px #f87d3044}
body.flowReferenceDesign .view>.titlebar h1{font-family:Bahnschrift,'Segoe UI',sans-serif;font-size:clamp(28px,3vw,43px);letter-spacing:.015em;line-height:1.05;margin:6px 0}
.sectionHeading{display:flex;align-items:center;gap:18px;min-width:0;flex:1 1 360px}.sectionHeadingCopy{min-width:0}.sectionHeadingCopy .eyebrow{font-size:10px;letter-spacing:.16em}
/* Opaque, in-flow artwork remains visible in every theme. */
.sectionScene{pointer-events:none;flex:0 0 112px;width:112px;height:112px;max-width:none;position:relative;inset:auto;display:grid;place-items:center;opacity:1;z-index:auto;border-radius:16px;background:radial-gradient(ellipse,var(--hud-glow),transparent 72%);color:var(--link)}
.sectionScene img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 6px var(--hud-shadow))}.sectionScene svg{width:84px;height:84px;min-height:0;filter:drop-shadow(0 4px 4px var(--hud-shadow))}
body.flowReferenceDesign .view button:not(.themePreview){border-radius:4px;box-shadow:inset 0 1px #ffffff22,inset 0 -2px #0002}
body.flowReferenceDesign .view button:is(.primary,.advance,[type="submit"],#importMrp,#installFlow):not(:disabled){color:#fff;border:1px solid var(--accent);background:linear-gradient(145deg,var(--primary),color-mix(in srgb,var(--primary) 75%,#000));box-shadow:inset 0 1px #ffc78666,0 0 12px #ff7c2220}
body.flowReferenceDesign :is(h2,h3){font-family:Bahnschrift,'Segoe UI',sans-serif;letter-spacing:.02em}
/* Keep existing 220px vehicle lanes and job alignment unchanged. */
body.flowReferenceDesign #weekBoard .planVehicleCard{position:relative;isolation:isolate;border:1px solid var(--hud-edge);border-top:2px solid var(--hud-bright);border-radius:4px;background:radial-gradient(ellipse at 50% 36%,var(--hud-glow),transparent 50%),linear-gradient(160deg,var(--soft),var(--panel) 72%);box-shadow:inset 0 0 0 5px var(--hud-shadow);padding:14px 15px 12px;gap:7px;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%,0 12px)}
body.flowReferenceDesign #weekBoard .planVehicleCard::after{content:'';position:absolute;inset:6px;pointer-events:none;border:1px solid var(--hud-edge);border-radius:3px;z-index:-1;background:none;opacity:1}
body.flowReferenceDesign #weekBoard .planVehicleCard .centerBadge{font-family:Consolas,monospace;letter-spacing:.025em;border-radius:3px;color:var(--muted);background:var(--panel);border:1px solid var(--hud-edge);padding:4px 6px;font-size:11px}
body.flowReferenceDesign #weekBoard .planVehicleModel{font-family:Bahnschrift,'Segoe UI',sans-serif;font-size:19px;letter-spacing:.03em;min-height:2.5em}
body.flowReferenceDesign #weekBoard .planVehicleCard .flowAsset{margin:0 -8px;border-radius:2px;background:radial-gradient(ellipse at 50% 78%,var(--hud-glow),transparent 65%);border-bottom:1px solid var(--hud-edge)}
body.flowReferenceDesign #weekBoard .planVehicleCard .flowAsset img{height:128px;padding:0;filter:drop-shadow(0 7px 5px var(--hud-shadow))}
body.flowReferenceDesign #weekBoard .planVehicleRegistration{font-family:Bahnschrift,Consolas,monospace;font-size:23px;letter-spacing:.035em;color:var(--link);margin:3px 0}
body.flowReferenceDesign #weekBoard .planVehicleCapacity{border-left:2px solid var(--hud-bright);padding:4px 0 4px 8px;background:var(--soft)}
body.flowReferenceDesign #weekBoard .planVehicleCard[role="button"]:hover{border-color:var(--hud-orange);box-shadow:inset 0 0 0 2px var(--hud-orange),0 0 18px #ff8b3530}
body.flowReferenceDesign #weekBoard .planVehicleCard[role="button"]:focus-visible{outline:3px solid var(--focus);outline-offset:-5px}
body.flowReferenceDesign .planScrollTools{border-top:2px solid var(--hud-bright);padding:12px 16px}
.planFleetHeading{display:flex;align-items:center;gap:10px;font-size:20px;margin:0 0 12px}.planFleetHeading svg{width:25px;height:25px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linejoin:round}
body.flowReferenceDesign .planScrollLabel{font-size:12px;color:var(--muted)}
body.flowReferenceDesign .biKpiSection>h3{border-bottom:1px solid var(--hud-edge);padding:4px 0 10px;color:var(--ink)}
body.flowReferenceDesign .ops-tabs{background:var(--soft);border:1px solid var(--hud-edge);border-radius:4px;padding:8px}
/* Visible chamfers and layered edge lights, as in the supplied HUD reference. */
body.flowReferenceDesign :is(.view>.titlebar,.sectionNavigation button,.app>header){clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px)}
body.flowReferenceDesign .sectionNavigation button.active{background:radial-gradient(ellipse at 0 50%,#ff8a3522,transparent 80%),linear-gradient(110deg,var(--selected),var(--panel));border-top:2px solid var(--hud-orange);border-bottom:2px solid var(--hud-orange)}
body.flowReferenceDesign .sectionNavigation button:focus-visible{outline:3px solid var(--focus);outline-offset:-5px}
body.flowReferenceDesign .view>.titlebar .weekControls{flex:0 0 100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0 0;margin:0;border:0;border-top:1px solid var(--hud-edge);border-radius:0;background:transparent;box-shadow:none}
body.flowReferenceDesign #weekLabel{color:var(--link);font:600 20px Bahnschrift,'Segoe UI',sans-serif;letter-spacing:.03em}
body.flowReferenceDesign .planScrollTools{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;padding:12px 16px}
.planFleetHeading{margin:0;grid-column:1;grid-row:1}.planScrollLabel{grid-column:2;grid-row:1;gap:10px}.planTopScroll,.planElapsedLegend{grid-column:1/-1}.planElapsedLegend{margin:0}
html[data-theme="dark"] body{background:radial-gradient(ellipse at 85% 0,#12385370,transparent 55%),linear-gradient(120deg,#030c14,#071624)}
html[data-theme="dark"] .app>header::after{background:linear-gradient(90deg,#030d16e8,transparent 72%),linear-gradient(0deg,#04111bb8,transparent 65%)}
html[data-theme="dark"] .sectionNavigation{background-image:linear-gradient(#05101be8,#071929a8),url('/flow-europe-bg.png')}
@media(max-width:1000px){.sectionHeading{flex-basis:280px;gap:12px}.sectionScene{width:96px;height:96px;flex-basis:96px}}
@media(max-width:750px){body.flowReferenceDesign .sectionNavigation{padding:8px}.roleNavigation button{justify-content:center}.sectionScene{width:82px;height:82px;flex-basis:82px;opacity:1}.sectionScene svg{width:64px;height:64px}body.flowReferenceDesign .app>header{min-height:108px;padding:10px 10px 18px}body.flowReferenceDesign .view>.titlebar{padding:12px;gap:12px;min-height:106px}.sectionHeading{flex-basis:100%;gap:10px}body.flowReferenceDesign .view>.titlebar h1{font-size:28px}}
@media(forced-colors:active){.sectionScene{display:none}.hudNavIcon svg{stroke:ButtonText}}
@media(max-width:750px){body.flowReferenceDesign .view>.titlebar .weekControls{justify-content:flex-start;flex-wrap:wrap}body.flowReferenceDesign #weekLabel{font-size:17px;order:-1;flex-basis:100%}.planFleetHeading{font-size:18px}.planScrollLabel>span:first-child{display:none}.planScrollLabel button{min-width:44px}.sectionHeadingCopy .eyebrow{line-height:1.6}.hudNavIcon{width:20px;flex-basis:20px}}