/* Desktop hierarchy: overview, station action, process, equipment, data. */
/* Give the full dashboard an explicit scroll viewport, like the station list. */
html:has(#application:not([hidden])), body:has(#application:not([hidden])) { height:100%; overflow:hidden; }
#application { width:100%; min-width:0; height:100dvh; overflow:auto; scrollbar-gutter:stable; }
#application::-webkit-scrollbar { width:10px; height:10px; }
footer { min-width:0; }
:root { font-size:16px; }
.topbar { height:76px; grid-template-columns:270px 1fr 450px; padding:0 20px; }
.brand { font-size:22px; }.brand small { font-size:12px; }
.page-title h1 { font-size:26px; letter-spacing:2px; }.page-title>span { font-size:12px; letter-spacing:3px; }
.header-tools,.header-tools button { font-size:14px; }
.navigation { height:44px; padding:0 20px; }.navigation button { height:44px; }.connection { font-size:14px; }
.summary { grid-template-columns:repeat(4,minmax(0,1fr)) minmax(365px,1.9fr); gap:12px; padding:14px 20px 10px; align-items:stretch; }
.summary-card { padding:13px 16px; min-width:0; grid-template-columns:minmax(0,1fr) auto; gap:4px 8px; align-content:center; }
.summary-card>span { font-size:16px; }.summary-card>strong { font-size:32px; white-space:nowrap; }
.summary-card>strong small { font-size:14px; margin-left:4px; }
.summary-card>p { grid-column:1 / -1; font-size:13px; line-height:1.45; margin:3px 0 0; overflow-wrap:normal; }
.summary-card>strong { grid-row:auto; }.summary-card:after { pointer-events:none; }
.summary-card.equipment-counts { display:block; }
.count-breakdown { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:7px 0 8px; }
.count-item { display:flex; align-items:baseline; gap:7px; white-space:nowrap; padding:0 12px; border-left:1px solid #4c8da766; }
.count-item:first-child { padding-left:0; border-left:0; }.count-item:last-child { padding-right:0; }
.count-item>span { font-size:14px; color:#c5deed; }.count-item>strong { font-size:26px; line-height:1; }
.count-item>strong small { margin-left:3px; font-size:13px; }.count-item.running>strong { color:#47eea2; }
.count-item.stopped>strong { color:#e4eff7; }.count-item.unknown>strong { color:#ffdc82; }
.equipment-counts>p { font-size:13px; }
.summary-card.communication-card { grid-template-columns:minmax(0,1fr) auto; }
.communication-card>strong { grid-column:2; grid-row:1 / 3; color:#ffdc82; }
.communication-card>p { grid-column:1; }
.communication-card>button { grid-column:1 / -1; justify-self:start; padding:2px 0; font-size:13px; }
.communication-dialog { width:min(760px,calc(100vw - 48px)); max-height:80vh; padding:22px; color:#e4eff7; background:#103858; border:1px solid #36b2d0; border-radius:12px; }
.communication-dialog::backdrop { background:#03182dcc; }
.communication-dialog header { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.communication-dialog h2 { margin:0; font-size:22px; }.communication-dialog p { font-size:14px; line-height:1.6; }
.communication-list { display:grid; gap:12px; max-height:52vh; overflow:auto; }
.communication-station { border:1px solid #44839f; border-radius:8px; padding:14px; }
.communication-station>button { font-size:17px; font-weight:700; }.communication-station p { margin:8px 0; color:#ffdc82; }
.communication-station time { color:#bed8e5; font-size:13px; }.communication-station small { display:block; color:#bed8e5; }
.station-data-issue { display:block; color:#ffdc82; font-size:12px; margin-top:6px; }
.data-status { padding:8px 20px; gap:8px 24px; font-size:13px; line-height:1.5; }
.workspace { grid-template-columns:270px minmax(0,1fr); gap:16px; padding:16px 20px 24px; }
.workspace.sidebar-collapsed { grid-template-columns:78px minmax(0,1fr); }
.station-heading { padding:15px 13px; }.station-heading h2 { font-size:20px; }
.station-name strong { font-size:16px; }.station-row { padding:13px 12px; }
.device-no { font-size:13px; }.station-row-foot { font-size:13px; margin-top:8px; }
.station-search { margin:0 12px 12px; }.station-filters,.list-caption { padding-left:12px; padding-right:12px; }
.station-filters { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }.station-filters button { padding:6px 0; font-size:14px; white-space:nowrap; }
.station-panel { top:12px; }#stations { max-height:calc(100vh - 350px); min-height:300px; }
.sidebar-foot { padding:12px; font-size:13px; }
.detail-heading { min-height:64px; margin:0 0 13px; gap:16px; align-items:center; }.detail-heading .eyebrow { display:none; }
.detail-heading h2 { font-size:26px; margin:0 0 7px; }.detail-heading p { font-size:14px; margin:0; line-height:1.6; }
.detail-heading .station-heading-right { max-width:500px; }.station-heading-right p { font-size:13px; }
.tag { font-size:13px; padding:4px 8px; }.panel { border-radius:9px; }
.panel-heading { padding:11px 15px; gap:12px; }.panel-heading h3,.equipment-heading h3 { font-size:19px; }
.panel-heading>span,.equipment-heading>span { font-size:13px; line-height:1.4; }
.monitor-compact { grid-template-columns:minmax(0,1.9fr) minmax(380px,1fr); grid-template-areas:"toolbar toolbar" "feedback feedback" "process operations" "equipment equipment" "context context" "variables variables"; gap:14px; align-items:start; }
.station-toolbar { display:grid; grid-template-columns:auto minmax(350px,1fr) 210px; padding:12px 16px; gap:22px; }
.mode-switch-block { gap:12px; }.mode-switch-block>span { font-size:15px; }
.mode-rocker { min-width:230px; gap:12px; padding:7px 10px; }
.mode-switch-copy { font-size:16px; }.mode-switch-copy small { font-size:14px; }
.toolbar-water { min-width:0; gap:24px; justify-content:center; }
.toolbar-level { grid-template-columns:auto auto; gap:6px 12px; }.toolbar-level>span,.toolbar-level>strong { font-size:16px; }
.toolbar-level small { font-size:13px; }.toolbar-refresh { max-width:none; gap:5px; }
.toolbar-refresh button { font-size:14px; padding:7px 10px; }.toolbar-refresh small { font-size:12px; line-height:1.45; }
.latest-operation .panel-heading { padding:8px 15px; }.latest-operation .panel-heading h3 { font-size:16px; }
.operation-record { padding:9px 15px; }.operation-record>div { gap:10px 18px; }
.operation-record strong,.operation-record b { font-size:16px; }.operation-record time { font-size:13px; }
.operation-record p { font-size:14px; line-height:1.5; margin-top:5px; }
.operation-history { padding:7px 15px; }.operation-history summary { font-size:14px; }
.process-panel,.operations-panel { min-width:0; align-self:stretch; }
.process-panel { display:flex; flex-direction:column; }
.process-svg { display:block; width:100%; height:auto; min-height:225px; flex:1; padding:6px 8px; }
.stage-title { font-size:25px; }.stage-index { font-size:17px; }.stage-sub,.svg-label { font-size:21px; }.diagram-note { font-size:17px; }
.operations-panel .panel-heading>span { max-width:160px; font-size:12px; }
.operation-relations { display:grid; gap:8px; padding:12px 14px; }
.operation-relation { display:grid; grid-template-columns:64px minmax(95px,1fr) 18px minmax(80px,1fr); gap:8px; align-items:center; min-height:36px; padding:7px 9px; background:#103b5b; border:1px solid #3880a1; border-radius:6px; font-size:15px; }
.relation-state { display:flex; align-items:center; gap:7px; white-space:nowrap; color:#bdd4e3; font-size:14px; }
.relation-state i { width:7px; height:7px; border-radius:50%; background:#a7bbcc; flex:none; }
.relation-arrow { color:#4cb9db; }.relation-purpose { font-size:14px; color:#c9e2ef; white-space:nowrap; }
.operation-relation.running .relation-state { color:#5df1ac; }.operation-relation.running .relation-state i { background:#46eea3; }
.operation-relation.running .relation-arrow { color:#46eea3; }.operation-relation.fault { border-color:#fa7d92; }
.operation-relation.fault .relation-state { color:#ff929e; }.operation-relation.fault .relation-state i { background:#ff7d90; }
.equipment-section .equipment-heading { margin:0 0 10px; }.equipment-section .equipment-grid { gap:12px; }
.equipment-section .equipment-card { padding:13px 15px; }
.equipment-card-heading { display:flex; flex-wrap:wrap; gap:7px; align-items:center; }.equipment-card-heading h4 { font-size:20px; }
.equipment-card-heading .tag { margin:0; font-size:13px; }.equipment-visual { height:64px; }.equipment-visual .glyph { width:78px; height:62px; }
.state-row { display:grid; grid-template-columns:minmax(0,1fr) auto; font-size:16px; line-height:1.85; gap:0 8px; }.state-row:has(.field-time) { min-height:40px; }
.field-time { grid-column:1 / -1; text-align:right; font-size:12px; line-height:1.5; }.equipment-output { margin-top:9px; padding-top:10px; font-size:15px; }
.control-warning-message { font-size:14px; line-height:1.5; padding:7px; }
.output-toggle { min-height:36px; font-size:18px; }.control-disabled-reason { margin:8px 0; font-size:14px; line-height:1.5; }
.equipment-time { font-size:12px; margin:9px 0 4px; }.equipment-card>.text-button { font-size:14px; }
.site-context { grid-template-columns:1.2fr 1fr 1fr; gap:14px; align-items:stretch; }
.site-context .panel-heading { padding:10px 15px; }.site-context .panel-heading h3 { font-size:17px; }
.gateway-details { padding:4px 15px; display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.gateway-details>div { padding:9px 0; }.gateway-details dt { font-size:13px; margin-bottom:5px; }
.gateway-details dd { font-size:15px; }.gateway-panel>.panel-note { font-size:12px; padding:7px 15px 12px; }
.site-context .location-panel h4 { margin:12px 15px 8px; font-size:15px; line-height:1.5; }
.site-context .coordinate { margin:8px 15px; padding:8px 10px; font-size:14px; }.coordinate span { font-size:13px; }
.site-context .panel-note { font-size:13px; line-height:1.5; margin:8px 15px; }
.map-open { font-size:14px; padding:7px 10px; margin-bottom:12px; }
.quiet-state { padding:16px 15px; font-size:15px; line-height:1.6; }.alarm-item { font-size:14px; }
.variable-workspace .panel-heading { padding:12px 15px; }.variable-workspace .panel-heading p { font-size:13px; margin-top:5px; }
.variable-workspace input { font-size:14px; width:260px; padding:8px 10px; }.variable-workspace label { font-size:14px; }
.variable-workspace td,.variable-workspace th { padding:11px 15px; font-size:15px; }.variable-workspace td small { font-size:12px; margin-top:5px; }
.variable-actions button { font-size:14px; padding:7px 10px; }.variable-table-scroll { max-height:440px; }
footer { font-size:12px; padding:14px 20px; }
/* Live updates retain nodes; hover uses a steady outline, never a flashing fill. */
button,.map-open { transition:none; }
button { --button-bg:linear-gradient(180deg,#1c5d89,#123f65); background:var(--button-bg); }
button:hover:not(:disabled) { background:var(--button-bg); border-color:#63d9ed; box-shadow:0 0 0 1px #63d9ed55; }
.primary { --button-bg:linear-gradient(145deg,#208fd4,#176ab2); }.mode-rocker { --button-bg:#103858; }
.navigation button,.station-filters button,.text-button { --button-bg:transparent; }.group-toggle { --button-bg:#103654; }
.station-row { --button-bg:transparent; }.station-row.selected { --button-bg:#1a5675; }
.output-toggle { --button-bg:#35516b; }.output-toggle.on { --button-bg:#13594f; }
@media(max-width:1700px) {
 .topbar { grid-template-columns:230px 1fr 450px; }.page-title h1 { font-size:23px; }
 .summary { gap:10px; }.summary-card { padding:11px 12px; }.summary-card>strong { font-size:28px; }
 .count-item { gap:5px; padding:0 8px; }.count-item>strong { font-size:24px; }.count-item>span { font-size:13px; }
 .workspace { grid-template-columns:240px minmax(0,1fr); gap:14px; }.workspace.sidebar-collapsed { grid-template-columns:78px minmax(0,1fr); }
 .monitor-compact { grid-template-columns:minmax(0,1fr); grid-template-areas:"toolbar" "feedback" "process" "operations" "equipment" "context" "variables"; }
 .station-toolbar { grid-template-columns:auto minmax(330px,1fr); gap:10px 16px; }
 .station-toolbar .toolbar-refresh { grid-column:1 / -1; display:flex; flex-direction:row; align-items:center; gap:12px; }
 .station-toolbar .toolbar-water { min-width:0; justify-content:flex-end; }.toolbar-refresh small { max-width:none; }
 .process-svg { min-height:0; flex:none; height:auto; }
 .operation-relations { grid-template-columns:repeat(5,minmax(0,1fr)); padding:12px; gap:10px; }
 .operation-relation { grid-template-columns:1fr; text-align:center; gap:5px; padding:10px; }
 .relation-state { justify-content:center; }.relation-arrow { transform:rotate(90deg); }
 .operations-panel .panel-heading>span { max-width:none; }
 .equipment-section .equipment-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }.equipment-section .equipment-grid.three-loads { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .equipment-section .equipment-card { padding:12px; }.equipment-card-heading { gap:6px; }.equipment-card-heading h4 { font-size:18px; }
 .state-row { font-size:15px; }.gateway-details { grid-template-columns:1fr; }.site-context { grid-template-columns:1.1fr 1fr 1fr; }
}

.station-filters [data-filter="communication"] { grid-column:1 / -1; }

/* Yuntu product brand; organization names continue to come from device data. */
.brand-mark { font-family:Arial,sans-serif; font-size:25px; font-weight:800; letter-spacing:-1.5px; flex-shrink:0; }
.auth-intro>.brand-mark { font-size:34px; letter-spacing:-2px; }

.collection-warning { color:#ffdc82; }

/* Fit the browser's usable width, including laptop display/browser scaling.
   Keep every business panel; wide data tables scroll inside their own panel. */
.monitor-compact>* { min-width:0; }
.data-status { flex-wrap:wrap; }
.data-status>span { min-width:0; overflow-wrap:anywhere; }
.detail-heading,.panel-heading,.equipment-heading { flex-wrap:wrap; }
.detail-heading p { overflow-wrap:anywhere; }
@media(max-width:1400px) {
 .summary { grid-template-columns:repeat(4,minmax(0,1fr)); }
 .summary-card.communication-card { grid-column:1 / -1; }
 .equipment-section .equipment-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:1200px) {
 .topbar { height:auto; min-height:76px; grid-template-columns:220px minmax(0,1fr); gap:12px; padding:12px 20px; }
 .page-title { grid-column:1 / -1; grid-row:2; }
 .header-tools { grid-column:2; grid-row:1; min-width:0; }
 .workspace { grid-template-columns:220px minmax(0,1fr); }
 .operation-relations { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .site-context { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .site-context .alarm-overview { grid-column:1 / -1; }
 .navigation { height:auto; min-height:44px; flex-wrap:wrap; gap:8px; }
 .navigation>div { flex-wrap:wrap; gap:8px 16px; }
 .navigation .connection { padding-bottom:8px; }
}
@media(max-width:1100px) {
 .station-toolbar { grid-template-columns:minmax(0,1fr); gap:12px; }
 .station-toolbar .toolbar-water { justify-content:flex-start; flex-wrap:wrap; }
 .station-toolbar .toolbar-refresh { flex-wrap:wrap; }
 .equipment-section .equipment-grid,.equipment-section .equipment-grid.three-loads { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .variable-workspace label { display:flex; flex-wrap:wrap; gap:8px; max-width:100%; }
 .variable-workspace input { width:min(260px,100%); }
 .history-controls,.history-quick-ranges { flex-wrap:wrap; }
 .user-layout { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:900px) {
 .workspace,.workspace.sidebar-collapsed { grid-template-columns:minmax(0,1fr); padding:12px; }
 .station-panel { position:static; }
 #stations { min-height:0; max-height:240px; }
 .summary { padding:12px; grid-template-columns:repeat(2,minmax(0,1fr)); }
 .data-status { margin:0 12px; padding:10px 12px; }
 .operation-relations { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .detail-heading h2 { font-size:23px; }
 .equipment-section .equipment-grid,.equipment-section .equipment-grid.three-loads { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:600px) {
 .topbar { grid-template-columns:minmax(0,1fr); padding:12px; }
 .header-tools { grid-column:1; grid-row:3; justify-content:flex-start; }
 .page-title { text-align:left; }.page-title h1 { font-size:21px; letter-spacing:0; }
 .page-title>span { font-size:10px; letter-spacing:1px; }
 .navigation { padding:0 12px; }
 .summary-card>span { font-size:14px; }
 .mode-switch-block { flex-wrap:wrap; }
 .mode-rocker { min-width:0; max-width:100%; }
 .toolbar-water { gap:12px; }
 .station-toolbar .toolbar-water { flex-basis:auto; }
 .operation-relations { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .equipment-section .equipment-grid,.equipment-section .equipment-grid.three-loads,.site-context,.form-grid { grid-template-columns:minmax(0,1fr); }
 .equipment-heading,.panel-heading { gap:8px; }
 .equipment-heading>span,.panel-heading>span { overflow-wrap:anywhere; }
 footer { padding:12px; font-size:13px; }
}