/* A single command header, framed metrics and an unobstructed plant backdrop.
   Coordinates are expressed in the 1600 × 900 display canvas. */
#water-console { --console-title-height: 38px; --console-kpi-height: 76px; --console-bottom-height: 164px; }
#water-console > .console-perimeter { position: absolute; inset: 0; z-index: 40; background: url('./assets/console-screen-perimeter-v1.svg') center / 100% 100% no-repeat; pointer-events: none; }
#water-console :is(.dashboard-shell,.detail-shell) { position: relative; isolation: isolate; gap: 12px !important; padding: 0 16px 16px !important; }
#water-console .topbar { height: 72px; display: block !important; margin: 0 -16px !important; padding: 0 !important; z-index: 30; background: linear-gradient(180deg,rgba(1,8,28,.97),rgba(2,11,35,.65)) !important; border-bottom: 0 !important; box-shadow: none !important; }
/* The title plate meets the screen perimeter's upper edge at y=8.
   Title and navigation remain separate, selectable HTML text. */
#water-console .topbar::before { top: 8px; left: 50%; width: 480px; height: 64px; background: url('./assets/console-title-integrated-v1.svg') center / 100% 100% no-repeat !important; opacity: 1; }
#water-console .brand { position: absolute; left: 16px; top: 22px; height: 30px; gap: 8px; }
#water-console .brand-mark { width: 28px; height: 28px; }
#water-console .brand-mark img { width: 25px; height: 25px; }
#water-console .brand-name { font-size: 15px; }
#water-console .header-title { position: absolute !important; left: 606px; top: 22px; width: 388px; padding: 0 !important; z-index: 2; }
#water-console .header-title h1 { font-size: 25px !important; letter-spacing: .04em !important; line-height: 32px; white-space: nowrap; text-shadow: none !important; }
#water-console .main-nav { position: absolute; left: 392px; top: 23px; width: 816px; height: 32px; display: grid !important; grid-template-columns: 180px 456px 180px; gap: 0; overflow: visible; border: 0; }
#water-console .nav-item { height: 32px; min-height: 32px; min-width: 0; padding: 0 5px !important; font-size: 14px !important; white-space: nowrap; background: transparent; clip-path: none; }
#water-console .nav-item:nth-child(2) { grid-column: 3; }
#water-console .nav-item,
#water-console .nav-item:is(:hover,:focus-visible,.active) { border: 0 !important; background: transparent !important; box-shadow: none !important; text-decoration: none !important; }
#water-console .nav-item.active { color: #e0faff !important; font-weight: 700; text-shadow: 0 0 8px rgba(89,183,224,.2); }
#water-console .nav-item:hover { color: #d0eaf6; }
#water-console .nav-item::before,
#water-console .nav-item::after { display: none !important; }
#water-console .nav-item:focus-visible { outline: 2px solid var(--console-accent) !important; outline-offset: -4px; }
#water-console .nav-badge { width: 16px; height: 16px; margin-left: 3px; font-size: 11px; }
#water-console .topbar-meta { position: absolute; top: 18px; right: 16px; width: 212px; height: 38px; display: grid; grid-template-columns: minmax(0,1fr) 28px 28px; align-items: center; gap: 7px; }
#water-console .clock-block { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; }
#water-console .clock-block :is(strong,span) { font-size: 12px; line-height: 16px; }
#water-console .topbar :is(.icon-button,.dha-trigger) { min-width: 28px; min-height: 28px; width: 28px; height: 28px; }
#water-console .system-status { display: none; }
#water-console :is(.kpi-rail,.kpi-command-ribbon) { position: relative; z-index: 3; gap: 9px !important; border: 0 !important; background: none !important; box-shadow: none !important; }
#water-console .kpi-rail > .kpi-item { min-height: 0; padding: 10px 18px !important; border: 0 !important; background: rgba(3,17,47,.77) !important; }
#water-console .kpi-rail > .kpi-item::before { display: none !important; }
#water-console .kpi-rail > .kpi-item::after { content: ''; display: block !important; position: absolute; inset: -1px; z-index: -1; border: 14px solid transparent; border-image: url('./assets/console-kpi-frame-v1.png') 24% 8% fill / 14px / 0 stretch; background: none !important; opacity: .75; pointer-events: none; }
#water-console .kpi-rail > .kpi-item:is(:hover,.ui-selected)::after { opacity: 1; }
#water-console .kpi-label, #water-console .kpi-label > span:first-child:last-child { font-size: 14px !important; line-height: 20px !important; color: #bcd3e7 !important; }
#water-console .kpi-value { margin-top: 2px !important; flex-wrap: nowrap; }
#water-console .kpi-value strong { font-size: 30px !important; line-height: 1 !important; }
#water-console .kpi-value span { font-size: 12px !important; white-space: nowrap !important; }
#water-console .kpi-label .kpi-tag { font-size: 12px !important; }
#water-console .kpi-alarm-breakdown { gap: 7px !important; }
#water-console .kpi-alarm-breakdown span { font-size: 12px !important; }
#water-console :is(.ui-detail-drawer,.ui-popover,.ui-range-menu):not(.open) { display: none !important; }

/* Keep the real WebGL scene behind the data panels. Empty foreground space
   passes pointer input to the canvas, so orbit and picking remain available. */
#water-console:not([data-page]) .workspace { pointer-events: none; position: static; }
#water-console:not([data-page]) .left-column { grid-column: 1; }
#water-console:not([data-page]) .right-column { grid-column: 3; }
#water-console:not([data-page]) :is(.column,.bottom-grid) { position: relative; z-index: 2; pointer-events: auto; }
#water-console:not([data-page]) .scene-panel { position: absolute; inset: 0; width: 1600px; height: 900px; z-index: 0; border: 0 !important; background: none !important; pointer-events: auto; }
#water-console:not([data-page]) .scene-panel::before,
#water-console:not([data-page]) .scene-panel::after,
#water-console:not([data-page]) .scene-heading { display: none !important; }
#water-console:not([data-page]) .scene-canvas { position: absolute !important; inset: 0; height: 900px; width: 1600px; min-height: 0; background: transparent !important; }
#water-console:not([data-page]) .scene-vignette { background: linear-gradient(180deg,rgba(1,8,25,.2),transparent 25%,transparent 78%,rgba(1,8,25,.3)); }
#water-console:not([data-page]) .scene-toolbar { top: 174px; right: 328px; padding: 3px; background: rgba(4,20,48,.82); }
#water-console:not([data-page]) .tool-button { width: 32px; height: 32px; }
#water-console:not([data-page]) .plant-device-card { top: 218px !important; right: 328px !important; bottom: auto !important; width: 292px; }
#water-console .plant-label { min-width: 100px; padding: 5px 8px; background: rgba(2,15,37,.87); }
#water-console .plant-label__name { font-size: 13px; line-height: 18px; }
#water-console .plant-label__metric { display: block !important; margin-top: 2px; font-size: 12px; line-height: 16px; color: #b0c9dd; }
#water-console .plant-label__dot { box-shadow: none; }
#water-console .plant-device-card :is(small,.plant-device-card__eyebrow,.plant-device-card__status) { font-size: 12px; }
#water-console:not([data-page]) .panel { --frame-fill: rgba(3,17,48,.83); }