/* V80: phone and tablet layout for the admin console.
   Tables become one card per row on phones (labels come from the table header, filled in by js/app.js),
   tab bars wrap instead of hiding tabs off-screen, and nothing may push the page wider than the screen. */
html,body{max-width:100%;overflow-x:hidden}
.content,.content>*,.card,.grid>*,.row>*{min-width:0}
.content img,.content video,.content canvas{max-width:100%;height:auto}
.content pre,.content code{white-space:pre-wrap;overflow-wrap:anywhere}
.content p,.content .help,.content .muted,.content .faint,.content .sub,.kv>*{overflow-wrap:anywhere}

@media(max-width:860px){
  .tabs{flex-wrap:wrap;overflow-x:visible;gap:2px 4px}
  .tabs button{padding:9px 12px;font-size:.86rem}
  .page-head{flex-wrap:wrap;gap:10px}
  .page-head .actions{flex-wrap:wrap}
  .page-head .actions .btn{flex:1 1 auto;justify-content:center}
  .toolbar{flex-wrap:wrap;gap:8px}
  .toolbar>*{min-width:0}
  .modal,.dialog{max-width:calc(100vw - 24px)}
  .kv{grid-template-columns:minmax(90px,38%) 1fr}
}

@media(max-width:640px){
  .tw{overflow-x:visible}
  table.t,table.t thead,table.t tbody,table.t tr,table.t td{display:block;width:auto}
  table.t thead{display:none}
  table.t tr{margin:10px 10px;padding:6px 0;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
  table.t tr.click{cursor:pointer}
  table.t td{display:grid;grid-template-columns:minmax(78px,38%) minmax(0,1fr);column-gap:12px;row-gap:0;align-items:center;justify-items:end;padding:7px 14px;border:0;text-align:right;min-height:34px}
  table.t td>*{min-width:0;max-width:100%;grid-column:2}
  table.t td::before{content:attr(data-label);grid-column:1;grid-row:1 / span 9;align-self:center;justify-self:start;text-align:left;color:var(--faint);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
  table.t td[data-label=""],table.t td:not([data-label]){grid-template-columns:minmax(0,1fr)}
  table.t td[data-label=""]::before,table.t td:not([data-label])::before{display:none}
  table.t td[data-label=""]>*,table.t td:not([data-label])>*{grid-column:1}
  table.t td.acts{display:flex;justify-content:flex-end;white-space:normal;flex-wrap:wrap;gap:6px}
  table.t td.acts::before{display:none}
  table.t td .sub{text-align:right}
  .toolbar>.searchfield{flex:1 1 100%}
  .tfoot{flex-wrap:wrap;gap:8px}
  .content{padding-left:10px;padding-right:10px}
  .topbar h1,.topbar .ttl{font-size:1rem}
}