/* Os mesmos filtros permanecem em linha no desktop e viram uma cadeia no toque. */
.filter-chain,.filter-chain-panel,.filter-step{display:flex;align-items:center;min-width:0}
.filter-chain{flex:1 1 470px}
.filter-chain-panel{flex:1 1 auto;gap:10px}
.filter-step{flex:1 1 0}
.filter-step>select,.filter-step>.search{width:100%;min-width:0;max-width:none}
#client-filters{flex:1 1 520px}
.filter-chain>summary,.filter-step>summary,.filter-chain-actions{display:none}

@media(max-width:1450px){
  .sidebar .brand{font-size:18px;gap:5px;padding-inline:3px}
  .sidebar .brand-wave{width:31px;height:29px;flex-basis:31px}
  .sidebar .brand-wave svg{width:31px;height:29px}
  #hosts>.filterbar{position:relative;display:flex;flex-wrap:wrap;height:auto;min-height:0;gap:8px;padding:8px 10px;margin-bottom:0}
  #hosts>.filterbar .search{flex:1 1 calc(100% - 112px);width:auto;min-width:0;max-width:none;height:40px}
  #host-filters{display:block;flex:0 0 100px;min-width:0}
  .filter-chain>summary{display:flex;align-items:center;justify-content:center;gap:5px;min-height:40px;padding:0 9px;border:1px solid var(--line);border-radius:7px;background:#fff;font-size:13px;font-weight:700;list-style:none;cursor:pointer}
  .filter-chain>summary::-webkit-details-marker,.filter-step>summary::-webkit-details-marker{display:none}
  .filter-chain>summary::after{content:'⌄';font-size:16px;line-height:1}
  .filter-chain[open]>summary::after{content:'⌃'}
  .filter-count{min-width:18px;height:18px;padding:1px 4px;border-radius:9px;background:#087d3f;color:#fff;font-size:11px;text-align:center}
  .filter-chain-panel{display:block;position:absolute;z-index:70;left:8px;right:8px;top:calc(100% - 1px);padding:9px;border:1px solid var(--line);border-radius:0 0 9px 9px;background:#fff;box-shadow:0 14px 28px #071b3130}
  .filter-step{display:block;border-bottom:1px solid #e5ebf1}
  .filter-step>summary{display:flex;align-items:center;justify-content:space-between;min-height:39px;padding:0 9px;font-size:13px;font-weight:700;list-style:none;cursor:pointer}
  .filter-step>summary::after{content:'▾';color:#61748b}
  .filter-step[open]>summary::after{content:'▴'}
  .filter-step>select,.filter-step>.search{width:100%;height:42px;min-width:0;max-width:none;margin:0 0 8px;border:1px solid var(--line);border-radius:6px;padding-inline:10px;background:#fff}
  .filter-step>select{display:block}
  .filter-step>.search{display:flex}
  .filter-step>.search input{font-size:14px}
  .filter-chain-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}
  .filter-chain-actions .btn{height:38px;font-size:13px}
  #hosts .host-pagination-top{order:2;flex:0 0 auto;margin-left:auto}
  #hosts .local-refresh,#hosts .host-view-toggle,#hosts .local-add-host{order:3;height:40px;min-width:0;padding-inline:12px;font-size:13px}
  #hosts .groups-grid,#hosts .hosts-layout.details-open .groups-grid{height:100%;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:112px;align-content:start;overflow-y:auto;overscroll-behavior:contain;padding:8px;gap:8px}
  #hosts .host-card{width:100%;height:100%;min-height:0;padding:6px 4px}
  #hosts .host-card b{font-size:clamp(10px,1.2vw,12px)}
  #hosts .host-card small{font-size:10px}
  #hosts .host-times em{font-size:8px}
  #hosts .host-times strong{font-size:9px}
  #hosts .groups-grid.all-view{grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:62px;overflow-y:auto}
  .client-hosts-panel>header.client-panel-toolbar{position:relative;flex:0 0 auto;height:auto;min-height:0;display:flex;flex-wrap:wrap;align-items:center;padding:8px;gap:8px}
  .client-panel-toolbar h2{width:100%;margin:0;font-size:15px}
  .client-panel-toolbar #client-selector{flex:1 1 calc(100% - 112px);min-width:0;max-width:none;height:40px}
  #client-filters{display:block;flex:0 0 100px}
  .client-panel-toolbar .client-host-actions{margin:0}
  .client-panel-toolbar .client-host-actions:not(.has-selection){display:none}
  .client-panel-toolbar .client-pagination{margin-left:auto}
  .client-panel-toolbar .local-refresh,.client-panel-toolbar .local-add-host{height:38px}
  .client-panel-toolbar .filter-step>.search{width:100%;flex:none}
  .system-grid{grid-template-columns:1fr}
}

@media(min-width:761px) and (max-width:899px){
  #hosts .groups-grid,#hosts .hosts-layout.details-open .groups-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}

@media(max-width:760px){
  .shell:has(#hosts:not([hidden])) .page-head{padding:10px 10px 8px;gap:0}
  .shell:has(#hosts:not([hidden])) .page-head>div:first-child{min-width:0}
  .shell:has(#hosts:not([hidden])) .page-head h1{font-size:28px}
  .shell:has(#hosts:not([hidden])) .head-summary,.shell:has(#clients:not([hidden])) .head-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;gap:4px;margin-top:8px;overflow:visible}
  .shell:has(#hosts:not([hidden])) .head-summary>div,.shell:has(#clients:not([hidden])) .head-summary>div{width:auto;min-width:0;height:59px;padding:3px;border-radius:6px}
  .head-summary b{font-size:19px}
  .head-summary span{font-size:10px;margin-top:4px;white-space:nowrap}
  .head-summary .status-dot{width:7px;height:7px;margin-right:2px}
  #hosts .host-pagination-top{order:2;flex:1 1 100%;width:100%;justify-content:center;margin:0}
  #hosts .local-refresh,#hosts .host-view-toggle,#hosts .local-add-host{flex:1 1 0}
  #hosts .groups-grid,#hosts .hosts-layout.details-open .groups-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:112px;overflow-y:auto}
  #hosts .groups-grid.all-view{grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:54px}
  .shell:has(#clients:not([hidden])),.shell:has(#clients:not([hidden])) main{height:100dvh;min-height:0;overflow:hidden}
  .client-detail-page{flex:1 1 auto;min-height:0;display:flex;padding:0 6px 6px}
  .client-hosts-panel{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
  .client-hosts-panel>.table-wrap{flex:1 1 auto;min-height:0;overflow:auto}
  .client-panel-toolbar .client-pagination{order:3;width:100%;justify-content:center}
  .client-panel-toolbar .local-refresh,.client-panel-toolbar .local-add-host{order:4;flex:1 1 0}
  .client-panel-toolbar .client-host-actions.has-selection{order:2;width:100%;justify-content:center}
  .dashboard-metric{height:94px;padding:10px;gap:7px}
  .dashboard-metric .metric-icon{width:26px;font-size:25px}
  .dashboard-metric strong{font-size:25px}
  .dashboard-metric span{font-size:12px}
  #hosts .details-panel{overflow:auto;max-height:calc(100dvh - 16px)}
  #hosts .details-head{cursor:default;touch-action:auto}
  #hosts .host-card{touch-action:manipulation}
}

@media(max-width:520px){
  .shell{grid-template-columns:64px minmax(0,1fr)}
  .sidebar{padding-inline:5px}
  #hosts .groups-grid,#hosts .hosts-layout.details-open .groups-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:116px}
  #hosts .groups-grid.all-view{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:52px}
  #hosts .host-card b{font-size:11px}
  #hosts .host-card small{font-size:10px}
  .host-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #hosts .details-actions{grid-template-columns:1fr 1fr}
  #hosts .details-actions .btn{font-size:12px;padding-inline:5px}
  .client-hosts-panel table{table-layout:fixed;width:100%;white-space:normal}
  .client-hosts-panel th,.client-hosts-panel td{padding:5px 2px;font-size:10px}
  .client-hosts-panel th:nth-child(2),.client-hosts-panel td:nth-child(2),
  .client-hosts-panel th:nth-child(4),.client-hosts-panel td:nth-child(4),
  .client-hosts-panel th:nth-child(7),.client-hosts-panel td:nth-child(7),
  .client-hosts-panel th:nth-child(8),.client-hosts-panel td:nth-child(8),
  .client-hosts-panel th:nth-child(9),.client-hosts-panel td:nth-child(9),
  .client-hosts-panel th:nth-child(10),.client-hosts-panel td:nth-child(10),
  .client-hosts-panel th:nth-child(11),.client-hosts-panel td:nth-child(11){display:none}
  .client-hosts-panel .select-column{width:27px;min-width:27px;padding:0 2px}
  .client-hosts-panel th:nth-child(3){width:88px}
  .client-hosts-panel th:nth-child(5){width:105px}
  .client-hosts-panel th:nth-child(6){width:48px}
  .client-hosts-panel th:nth-child(12){width:35px;font-size:0}
  .client-hosts-panel th:nth-child(12)::before{content:'↗';font-size:13px}
  .client-hosts-panel .client-host-name{max-width:88px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .client-hosts-panel .client-host-name small{display:none}
  .client-hosts-panel .client-ip-cell{white-space:nowrap;font-size:9px}
  .client-hosts-panel .client-ip-cell .edit-ip{margin-left:1px;padding:0 1px;font-size:12px}
  .client-hosts-panel .openweb{height:25px;width:28px;padding:0;justify-content:center;font-size:0}
  .client-hosts-panel .openweb::before{content:'↗';font-size:16px}
  .client-hosts-panel .openweb.disabled::before{content:'—';font-size:12px}
  .system-grid .panel>header{flex-wrap:wrap;gap:10px}
  .system-user-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .system-user-actions .btn{width:100%;min-width:0}
}

@media(max-width:360px){
  #hosts .local-refresh{flex:0 0 42px;padding:0}
  #hosts .local-refresh span{display:none}
  #hosts .host-view-toggle,#hosts .local-add-host{flex:1 1 0;padding-inline:5px}
  #hosts>.filterbar .search input::placeholder{font-size:12px}
}

@media(max-width:760px){
  .client-hosts-panel th:nth-child(12)::before{content:'⧉'}
}