/* Dashboard owns its viewport; the other workspaces keep their existing layout. */
.shell[data-view="dashboard"]{height:100dvh;min-height:0;overflow:hidden}
.shell[data-view="dashboard"] main{height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.shell[data-view="dashboard"] .visual-banner{flex:none;height:clamp(60px,10dvh,91px)}
.shell[data-view="dashboard"] .page-head{flex:none;min-height:44px;gap:10px;padding:5px 14px;flex-wrap:nowrap}
.shell[data-view="dashboard"] .head-actions{min-width:0;margin:0;gap:12px}
.shell[data-view="dashboard"] .head-actions .btn{min-width:0;height:34px;padding:0 12px;font-size:15px}
.shell[data-view="dashboard"] .head-actions .btn span{font-size:12px}
.shell[data-view="dashboard"] .updated-label{font-size:12px}
.shell[data-view="dashboard"] .dashboard-periods{position:static;min-width:0;flex:none;margin:0 0 0 auto;gap:0;white-space:nowrap}
.shell[data-view="dashboard"] .dashboard-periods button{height:34px;padding:5px 12px;font-size:12px}
.shell[data-view="dashboard"] .dashboard-periods .metrics-toggle{margin-right:7px}
#dashboard.dashboard-page{flex:1;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) minmax(0,1.1fr) minmax(0,.8fr);gap:8px;padding:4px 12px 9px;overflow:hidden}
#dashboard .dashboard-metrics,#dashboard .dashboard-metrics.has-pppoe,#dashboard .dashboard-metrics.limited-latency{grid-template-columns:repeat(10,minmax(0,1fr));gap:7px;min-width:0}
#dashboard .dashboard-metrics.has-pppoe{grid-template-columns:repeat(11,minmax(0,1fr))}
#dashboard .dashboard-metric{position:relative;min-width:0;height:clamp(100px,10dvh,118px);padding:7px;display:grid;grid-template-columns:clamp(26px,1.8vw,38px) minmax(0,1fr);grid-template-rows:minmax(28px,1fr) auto minmax(24px,1fr);column-gap:6px;row-gap:1px;align-content:center;align-items:center;overflow:hidden}
#dashboard .dashboard-metric-copy{display:contents}
#dashboard .dashboard-metric .metric-icon{grid-column:1;grid-row:1/3;align-self:center;width:100%;height:auto;aspect-ratio:1;display:block;font-size:0;flex:none}
#dashboard .metric-icon svg{width:100%;height:100%;display:block;overflow:visible}
#dashboard .dashboard-metric-copy>span{grid-column:2;grid-row:1;min-width:0;display:block;font-size:clamp(10px,.65vw,14px);line-height:1.15;overflow-wrap:normal}
#dashboard .dashboard-metric strong{grid-column:2;grid-row:2;min-width:0;display:block;margin:0;font-size:clamp(20px,1.4vw,34px);line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap}
#dashboard .dashboard-metric small{grid-column:1/-1;grid-row:3;min-width:0;display:block;margin:0;color:#536a80;font-size:clamp(10px,.55vw,12px);line-height:1.2;overflow-wrap:anywhere}
#dashboard .dashboard-main-grid,#dashboard .dashboard-bottom-grid{margin:0;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#dashboard .dashboard-main-grid>.dashboard-panel{grid-column:auto}
#dashboard .dashboard-panel{min-width:0;min-height:0;display:flex;flex-direction:column}
#dashboard .dashboard-panel>header{flex:none;min-height:30px;padding:6px 10px;gap:7px}
#dashboard .dashboard-panel h2{min-width:0;font-size:clamp(12px,.8vw,18px);line-height:1.2}
#dashboard .dashboard-panel header small{min-width:0;font-size:clamp(10px,.6vw,13px);text-align:right;line-height:1.2}
#dashboard .dashboard-chart{flex:1;min-height:0;height:auto;padding:8px 10px 6px 7px}
#dashboard .dashboard-chart-plot{min-height:0}
#dashboard .dashboard-chart-plot svg{flex:1;min-height:0;height:auto}
#dashboard .dashboard-chart-y{font-size:clamp(10px,.6vw,13px);padding-bottom:17px}
#dashboard .dashboard-chart-x{flex:none;font-size:clamp(10px,.6vw,13px);line-height:1.2}
#dashboard #dashboard-area-list,#dashboard #dashboard-situation{flex:1;min-height:0;max-height:none;overflow:auto;overscroll-behavior:contain}
#dashboard #dashboard-situation{display:grid;grid-template-rows:repeat(4,minmax(24px,1fr));padding:0 10px}
#dashboard .dashboard-list-row{min-width:0;min-height:0;gap:6px;font-size:clamp(11px,.7vw,14px);padding:4px 0}
#dashboard .dashboard-list-row>span:nth-child(2){min-width:0}
#dashboard .dashboard-list-row strong{font-size:clamp(14px,.9vw,20px)}
#dashboard .dashboard-list-row small{flex:0 1 95px;min-width:0}
#dashboard .dashboard-area-row{min-height:34px;padding:5px 10px}
#dashboard .dashboard-events{margin:0}
#dashboard .dashboard-table-wrap{flex:1;min-width:0;min-height:0;max-height:none;overflow:auto;overscroll-behavior:contain}
#dashboard .dashboard-events th,#dashboard .dashboard-events td{padding:5px 10px;font-size:clamp(11px,.65vw,14px)}
#dashboard .dashboard-bottom-grid .dashboard-panel{min-height:0}
#dashboard #dashboard-affected,#dashboard #dashboard-unstable,#dashboard #dashboard-collector{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
#dashboard .dashboard-rank{grid-template-columns:minmax(0,1fr) minmax(32px,.8fr) auto;gap:6px;padding:5px 10px;font-size:clamp(11px,.65vw,14px)}
#dashboard .dashboard-unstable-row{padding:5px 10px;font-size:clamp(11px,.65vw,14px)}
#dashboard .dashboard-unstable-row span:first-child{min-width:0}
#dashboard .dashboard-collector-state{padding:6px 10px 0;font-size:clamp(17px,1.1vw,25px)}
#dashboard .dashboard-bottom-grid p{margin:3px 10px;font-size:clamp(11px,.65vw,14px)}
#dashboard .dashboard-collector-count{margin:6px 10px;padding-top:5px;align-items:flex-start}
#dashboard .dashboard-collector-count strong{flex:none;white-space:nowrap;font-variant-numeric:tabular-nums;font-size:clamp(14px,.9vw,20px)}
#dashboard .dashboard-collector-count span{min-width:0;font-size:clamp(10px,.6vw,13px);line-height:1.3}
#app.metrics-hidden #dashboard .dashboard-metric small{font-size:0}
#app.metrics-hidden #dashboard .dashboard-metric small::after{content:'•••';font-size:11px;letter-spacing:2px;color:#67788c}
@media(min-width:761px) and (max-width:1399px){
  #dashboard .dashboard-metrics,#dashboard .dashboard-metrics.limited-latency{grid-template-columns:repeat(5,minmax(0,1fr))}
  #dashboard .dashboard-metrics.has-pppoe{grid-template-columns:repeat(6,minmax(0,1fr))}
  #dashboard .dashboard-metric{height:86px;grid-template-columns:28px minmax(0,1fr);grid-template-rows:minmax(22px,1fr) auto minmax(24px,1fr);padding:5px 7px}
  #dashboard .dashboard-metric strong{font-size:21px}
  #dashboard .dashboard-metric-copy>span,#dashboard .dashboard-metric small{font-size:10px}
}
@media(max-width:1024px){
  .shell[data-view="dashboard"] main{height:calc(100dvh - 62px - env(safe-area-inset-bottom));padding-bottom:0}
  .shell[data-view="dashboard"] .sidebar{height:calc(62px + env(safe-area-inset-bottom));top:auto;bottom:0}
}
@media(max-width:760px){
  .shell[data-view="dashboard"] .page-head{min-height:0;display:flex;flex-wrap:wrap;padding:6px 8px;gap:5px}
  .shell[data-view="dashboard"] .head-actions{flex:1;gap:5px}
  .shell[data-view="dashboard"] .updated-label{font-size:10px}
  .shell[data-view="dashboard"] .head-actions .btn{height:29px;margin-left:auto;padding:0 9px;font-size:14px}
  .shell[data-view="dashboard"] .head-actions .btn span{display:inline;font-size:11px}
  .shell[data-view="dashboard"] .dashboard-periods{flex:1 1 100%;margin:0;justify-content:flex-end}
  .shell[data-view="dashboard"] .dashboard-periods button{flex:1;min-width:0;height:30px;padding:4px;font-size:11px}
  .shell[data-view="dashboard"] .dashboard-periods .metrics-toggle{margin-right:4px}
  #dashboard.dashboard-page{display:flex;flex-direction:column;gap:8px;padding:3px 7px 9px;overflow-y:auto;overscroll-behavior:contain}
  #dashboard .dashboard-metrics,#dashboard .dashboard-metrics.has-pppoe,#dashboard .dashboard-metrics.limited-latency{flex:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  #dashboard .dashboard-metric{height:90px;padding:6px;grid-template-columns:24px minmax(0,1fr);grid-template-rows:minmax(22px,1fr) auto minmax(24px,1fr);column-gap:4px}
  #dashboard .dashboard-metric-copy>span{font-size:10px;line-height:1.15}
  #dashboard .dashboard-metric strong{font-size:19px}
  #dashboard .dashboard-metric small{font-size:10px;line-height:1.15}
  #dashboard .dashboard-main-grid,#dashboard .dashboard-bottom-grid{flex:none;grid-template-columns:minmax(0,1fr)}
  #dashboard .dashboard-main-grid>.dashboard-panel{height:190px}
  #dashboard .dashboard-events{flex:none;height:240px}
  #dashboard .dashboard-bottom-grid>.dashboard-panel{height:145px}
  #dashboard .dashboard-events table{min-width:740px}
}
@media(max-width:359px){
  #dashboard .dashboard-metrics,#dashboard .dashboard-metrics.has-pppoe,#dashboard .dashboard-metrics.limited-latency{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-height:680px) and (min-width:761px){
  #dashboard .dashboard-chart{padding-top:4px;padding-bottom:4px}
  #dashboard .dashboard-chart-y{padding-bottom:12px}
  #dashboard .dashboard-chart-y>span:nth-child(even){display:none}
}
@media(max-height:540px) and (min-width:761px){
  #dashboard.dashboard-page{grid-template-rows:auto minmax(140px,1fr) minmax(160px,1fr) minmax(120px,.8fr);overflow-y:auto}
}