/* Shared sizing for all monitor pages, from phones to wall displays. */
main,.page,.panel,.dashboard-panel,.client-hosts-panel{min-width:0}
.table-wrap{max-width:100%;overflow-x:auto}
.filter-chain:not([open])>.filter-chain-panel{display:none!important}
@media (max-width:1024px){.sidebar nav{scrollbar-width:none}.sidebar nav::-webkit-scrollbar{display:none}}

@media (min-width:1900px){
  .shell,.shell:has(#switches:not([hidden])){grid-template-columns:clamp(190px,8.5vw,220px) minmax(0,1fr)}
  .sidebar .brand{font-size:clamp(19px,.9vw,23px)}
  .sidebar nav button{font-size:clamp(14px,.68vw,17px)}
  .sidebar .nav-icon{font-size:22px}
  .page-head:not(.switches-head) h1{font-size:clamp(32px,1.65vw,42px)}
  .dashboard-page .dashboard-metric{height:84px}
  .dashboard-page .dashboard-metric-copy span{font-size:13px}
  .dashboard-page .dashboard-metric strong{font-size:26px}
  #system .system-grid{grid-template-columns:minmax(320px,.55fr) minmax(0,1.45fr);align-items:start}
}

@media (min-width:951px) and (max-width:1359px){
  .dashboard-page .dashboard-metrics,
  .dashboard-page .dashboard-metrics.limited-latency,
  .dashboard-page .dashboard-metrics.has-pppoe{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (max-width:1024px){
  .shell:has(#hosts:not([hidden])) .sidebar{
    top:auto;bottom:0;height:calc(62px + env(safe-area-inset-bottom));overflow:visible
  }
  .page-head{min-width:0}
  .page-head .head-copy{min-width:0}
  .system-grid .table-wrap{overflow-x:auto;overscroll-behavior-x:contain}
  #system table{min-width:530px}
}

@media (max-width:760px){
  .dashboard-page,.client-detail-page,#system.page{padding-inline:10px}
  .dashboard-page .dashboard-metric{min-width:0}
  .dashboard-page .dashboard-metric-copy span{white-space:normal;line-height:1.15}
  #clients .client-hosts-panel>.table-wrap{overflow-y:auto;overflow-x:hidden}
  #clients .client-hosts-panel table{display:block;width:100%;table-layout:auto;white-space:normal}
  #clients .client-hosts-panel thead{display:none}
  #clients .client-hosts-panel tbody{display:grid;gap:6px;padding:6px}
  #clients .client-hosts-panel tbody tr{
    display:grid;grid-template-columns:23px minmax(0,1fr) auto;gap:3px 7px;
    width:100%;height:auto;padding:7px;border:1px solid var(--line);
    border-radius:7px;background:#fff
  }
  #clients .client-hosts-panel tbody td{display:none!important;width:auto;padding:0;font-size:12px}
  #clients .client-hosts-panel tbody td:nth-child(1),
  #clients .client-hosts-panel tbody td:nth-child(3),
  #clients .client-hosts-panel tbody td:nth-child(5),
  #clients .client-hosts-panel tbody td:nth-child(6),
  #clients .client-hosts-panel tbody td:nth-child(12),
  #clients .client-hosts-panel tbody td[colspan]{display:block!important}
  #clients .client-hosts-panel tbody td:nth-child(1){grid-column:1;grid-row:1}
  #clients .client-hosts-panel tbody td:nth-child(3){grid-column:2;grid-row:1;font-weight:700;min-width:0}
  #clients .client-hosts-panel tbody td:nth-child(5){grid-column:2;grid-row:2}
  #clients .client-hosts-panel tbody td:nth-child(5)::before{content:'IP ';color:var(--muted);font-weight:600}
  #clients .client-hosts-panel tbody td:nth-child(6){grid-column:3;grid-row:2}
  #clients .client-hosts-panel tbody td:nth-child(6)::before{content:'Porta ';color:var(--muted);font-weight:600}
  #clients .client-hosts-panel tbody td:nth-child(12){grid-column:3;grid-row:1}
  #clients .client-hosts-panel tbody td[colspan]{grid-column:1/-1}
  #clients .client-hosts-panel .client-host-name{max-width:none}
  #system .system-grid{grid-template-columns:minmax(0,1fr)}
  .system-grid .panel>header{padding-inline:14px}
  #system table{display:block;min-width:0;width:100%;table-layout:auto}
  #system thead{display:none}
  #system tbody{display:grid;gap:6px;padding:8px}
  #system tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 8px;padding:9px;border:1px solid var(--line);border-radius:7px}
  #system tbody td{display:block;padding:0;font-size:12px;min-width:0;overflow-wrap:anywhere}
  #system tbody td:first-child{grid-column:1/-1;font-weight:700;font-size:14px}
  #system tbody td:nth-child(2)::before{content:'Perfil: ';color:var(--muted)}
  #system tbody td:nth-child(3)::before{content:'Cliente: ';color:var(--muted)}
  #system tbody td:nth-child(4)::before{content:'Acesso: ';color:var(--muted)}
  #system tbody td:nth-child(5)::before{content:'Estado: ';color:var(--muted)}
}