/* NOC layout: keep the switch grid, selected port and chart in one desktop viewport. */
.page-head.switches-head{padding:14px 12px 9px 16px}
.page-head.switches-head h1{font-size:28px;line-height:1.1}
.page-head.switches-head #switch-head-controls{
  display:grid;grid-template-columns:minmax(0,385px) minmax(0,175px) minmax(0,1fr) auto;
  grid-template-rows:46px 42px;gap:5px 10px;margin-top:10px
}
.page-head.switches-head #switch-header-metrics{grid-column:1/3;grid-row:1;width:100%}
.page-head.switches-head #switch-header-metrics>div{height:45px;padding:4px}
.page-head.switches-head #switch-header-metrics span{font-size:9px}
.page-head.switches-head #switch-header-metrics strong{font-size:17px;margin-top:1px}
.page-head.switches-head #switch-selector{grid-column:1;grid-row:2;width:min(385px,100%);height:42px}
.page-head.switches-head #switch-selector button{min-width:0;min-height:42px;height:42px;flex:1;padding:3px 7px}
.page-head.switches-head .switch-tabs{grid-column:2/4;grid-row:2;justify-self:start;align-self:center;flex-wrap:nowrap;margin:0}
.page-head.switches-head .switch-tabs button{height:32px;padding:0 10px;font-size:11px}
.page-head.switches-head #switch-refresh{grid-column:4;grid-row:1;align-self:center;height:34px}
.page-head.switches-head #switch-update-countdown{grid-column:3;grid-row:1;align-self:center;justify-self:end;white-space:nowrap;color:#48627d;font-size:10px;font-weight:700}
@media (min-width:1400px){
  .page-head.switches-head #switch-head-controls{grid-template-columns:minmax(250px,385px) auto minmax(380px,1fr) auto auto;grid-template-rows:46px;gap:0 8px}
  .page-head.switches-head #switch-selector{grid-column:1;grid-row:1;width:100%}
  .page-head.switches-head .switch-tabs{grid-column:2;grid-row:1}
  .page-head.switches-head #switch-header-metrics{grid-column:3;grid-row:1}
  .page-head.switches-head #switch-update-countdown{grid-column:4;grid-row:1;justify-self:center}
  .page-head.switches-head #switch-refresh{grid-column:5;grid-row:1}
}
.switch-page{padding:3px 8px 8px}
.switch-telemetry{gap:4px}
#switch-groups{display:grid;gap:4px}
.switch-compact-group>header{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0
}
.switch-port-grid{gap:3px;padding:3px;grid-template-columns:repeat(12,minmax(0,1fr))}
.switch-port-tile{height:clamp(38px,6.3vh,50px);padding:3px 5px;gap:0;justify-content:flex-start}
.switch-port-tile strong{font-size:10px;line-height:1.1}
.switch-port-tile small,.switch-port-tile em{font-size:8px;line-height:1.1}
.switch-port-tile .status-dot{right:4px;top:4px;width:7px;height:7px}
.switch-inspector-heading{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0
}
#switches .switch-port-inspector-facts{grid-template-columns:repeat(13,minmax(0,1fr)) minmax(75px,1fr);gap:0;padding:2px 3px}
#switches .switch-port-inspector-facts>div{min-height:43px;padding:4px 5px;border:0;border-right:1px solid var(--line);border-radius:0}
#switches .switch-port-inspector-facts>div:last-child{border-right:0}
#switches .switch-port-inspector-facts span{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#switches .switch-port-inspector-facts strong{font-size:10px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
#switches .switch-port-inspector-facts .switch-inspector-state{display:flex;align-items:center;justify-content:center;padding:3px}
.switch-inspector-state>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.switch-inspector-state .switch-status{min-width:0;padding:3px 6px;font-size:9px}
#switches .switch-chart{margin:2px 3px 3px;padding:7px 9px 4px}
#switches .switch-chart-svg{height:clamp(150px,29vh,240px)}
#switches .switch-chart-empty{min-height:130px}

@media (min-width:1280px){
  .shell{grid-template-columns:160px minmax(0,1fr)}
  .sidebar{padding:15px 5px 12px}
  .sidebar .brand{font-size:17px;gap:5px;padding:0 2px 20px}
  .sidebar .brand-wave{width:27px;height:27px;flex-basis:27px}
  .sidebar .brand-wave svg{width:27px;height:27px}
  .sidebar nav button{height:49px;padding:0 7px;gap:7px;font-size:13px}
  .sidebar .nav-icon{width:20px;font-size:19px}
  .sidebar footer{padding:0 4px;font-size:12px}
  .sidebar footer button{padding:0 5px;font-size:12px}
}
@media (min-width:1280px) and (min-height:680px){
  .shell:has(#switches:not([hidden])){grid-template-columns:160px minmax(0,1fr);height:100dvh;min-height:0;overflow:hidden}
  .shell:has(#switches:not([hidden])) main{height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden}
  .shell:has(#switches:not([hidden])) .page-head{flex:none}
  #switches.switch-page{flex:1;min-height:0;overflow:hidden}
  #switches .switch-telemetry{height:100%;display:flex;flex-direction:column;min-height:0;--switch-card-height:clamp(42px,calc((100dvh - 430px)/6),74px)}
  #switches #switch-groups{flex:1;min-height:0;display:flex;flex-direction:column;gap:4px;overflow:hidden}
  #switches .switch-compact-group{flex:none;min-height:0;display:block}
  #switches .switch-port-grid{grid-template-columns:repeat(var(--switch-cols,12),minmax(0,1fr));grid-auto-rows:var(--switch-card-height)}
  #switches .switch-port-tile{height:100%;min-height:0}
  #switches #switch-port-inspector{flex:none;min-height:0}
  #switches #switch-port-inspector:not(:empty) .switch-port-inspector{height:auto;display:flex;flex-direction:column;min-height:0}
  #switches .switch-port-inspector-facts{flex:none}
  #switches .switch-chart{flex:none;height:clamp(180px,28dvh,270px);min-height:0;display:flex;flex-direction:column;overflow:visible}
  #switches .switch-chart-svg{flex:1;min-height:0;height:auto}
  #switches .switch-chart-empty{flex:1;min-height:0}
}

@media (max-width:1279px){
  .page-head.switches-head #switch-head-controls{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto;gap:6px}
  .page-head.switches-head #switch-header-metrics{grid-column:1;grid-row:1}
  .page-head.switches-head #switch-selector{grid-column:1;grid-row:2}
  .page-head.switches-head .switch-tabs{grid-column:1/-1;grid-row:3;flex-wrap:wrap}
  .page-head.switches-head #switch-refresh{grid-column:2;grid-row:1}
  .page-head.switches-head #switch-update-countdown{grid-column:2;grid-row:2}
  .switch-port-grid{grid-template-columns:repeat(8,minmax(0,1fr))}
  #switches .switch-port-inspector-facts{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1280px) and (max-width:1439px){
  #switches .switch-telemetry{--switch-card-height:clamp(38px,calc((100dvh - 475px)/6),58px)}
  #switches .switch-port-inspector-facts{grid-template-columns:repeat(7,minmax(0,1fr))}
  #switches .switch-port-inspector-facts>div{min-height:34px}
  #switches .switch-chart{height:clamp(170px,25dvh,195px)}
}
@media (max-width:760px){
  .page-head.switches-head #switch-head-controls{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto auto}
  .page-head.switches-head #switch-header-metrics{grid-column:1/-1;grid-row:1}
  .page-head.switches-head #switch-selector{grid-column:1/-1;grid-row:2;width:100%}
  .page-head.switches-head .switch-tabs{grid-column:1/-1;grid-row:3}
  .page-head.switches-head #switch-refresh{grid-column:2;grid-row:2}
  .page-head.switches-head #switch-update-countdown{grid-column:1;grid-row:4;justify-self:start}
  .switch-port-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  #switches .switch-port-inspector-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Navigation becomes a horizontally scrollable bottom bar on touch screens. */
@media (max-width:1024px){
  .shell{display:block;grid-template-columns:minmax(0,1fr);min-height:100dvh}
  .sidebar{
    position:fixed;top:auto;right:0;bottom:0;left:0;z-index:120;
    width:100%;height:calc(62px + env(safe-area-inset-bottom));
    padding:4px 6px env(safe-area-inset-bottom);overflow:visible
  }
  .sidebar .brand,.sidebar footer{display:none}
  .sidebar nav{
    display:flex;flex-wrap:nowrap;gap:4px;width:100%;height:100%;
    overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;
    overscroll-behavior-x:contain;touch-action:pan-x
  }
  .sidebar nav button,.sidebar nav button:not(.active),.sidebar nav button.active{
    flex:0 0 auto;min-width:98px;height:48px;padding:0 8px;
    justify-content:center;gap:5px;font-size:12px;white-space:nowrap
  }
  .sidebar .nav-icon{width:auto;font-size:18px}
  .sidebar .area-alert-popup{
    position:fixed;right:8px;bottom:calc(72px + env(safe-area-inset-bottom));
    left:auto;width:min(380px,calc(100vw - 16px));height:260px;
    max-height:calc(100dvh - 90px);margin:0;z-index:121
  }
  main{min-width:0;padding-bottom:calc(62px + env(safe-area-inset-bottom))}
  .shell:has(#hosts:not([hidden])) main,
  .shell:has(#clients:not([hidden])) main{
    height:calc(100dvh - 62px - env(safe-area-inset-bottom));
    min-height:0;padding-bottom:0;overflow:hidden
  }
}