/* Shared responsive behavior. Test matrix: 320/375/768/1024/1440 CSS px. */

@media (max-width:820px) {
  .topbar { gap:var(--s-2); padding:var(--s-2) var(--s-3); }
  .topbar-left,.topbar-right { gap:var(--s-2); }
  .page-title { font-size:clamp(1rem,4vw,1.15rem); white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; }
  .user { display:none; }
  .content { padding:clamp(var(--s-3),4vw,var(--s-5)); }
  .theme-toggle__label { display:none; }
  .theme-toggle { width:44px; min-width:44px; min-height:44px; padding:0;
    justify-content:center; }
  .btn-sm { min-height:44px; }
}

@media (max-width:640px) {
  .toolbar { align-items:stretch; flex-direction:column; }
  .toolbar .btn { width:100%; }
  .card { padding:var(--s-4); }
  .empty { padding:var(--s-6) var(--s-4); }
  .form { max-width:none; }

  .table-wrap--responsive { overflow:visible; border:0; background:transparent; }
  .table--responsive,.table--responsive tbody { display:block; width:100%; }
  .table--responsive thead { position:absolute; width:1px; height:1px;
    padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .table--responsive tbody { display:grid; gap:var(--s-3); }
  .table--responsive tr { display:block; padding:var(--s-2) var(--s-3);
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); box-shadow:var(--shadow-1); }
  .table--responsive td { display:grid; grid-template-columns:minmax(6.5rem,38%) minmax(0,1fr);
    gap:var(--s-3); align-items:start; padding:var(--s-2) 0; border-bottom:1px solid var(--border); }
  .table--responsive td:last-child { border-bottom:0; }
  .table--responsive td::before { content:attr(data-label); color:var(--text-muted);
    font-size:.82rem; font-weight:600; }
  .table--responsive td > .badge,
  .table--responsive td > code { justify-self:start; }

  .table--details,.table--details tbody { display:block; width:100%; }
  .table--details tr { display:grid; grid-template-columns:minmax(6.5rem,38%) minmax(0,1fr);
    gap:var(--s-3); padding:var(--s-3); border-bottom:1px solid var(--border); }
  .table--details tr:last-child { border-bottom:0; }
  .table--details th,.table--details td { padding:0; border:0; text-align:left; overflow-wrap:anywhere; }

  .form-actions { flex-direction:column-reverse; }
  .form-actions .btn { width:100%; }
}

@media (max-width:480px) {
  .topbar { min-height:60px; }
  .topbar-right { flex:0 0 auto; }
  .logout-button { width:44px; min-width:44px; padding:0; }
  .logout-button__label { position:absolute; width:1px; height:1px; padding:0;
    margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  .content { padding:var(--s-3); }
  .auth { padding:var(--s-4); }
  .auth-card { padding:var(--s-5) var(--s-4); }
  .auth-tools { top:var(--s-3); right:var(--s-3); }
}

@media (max-width:360px) {
  .page-title { max-width:8.5rem; }
  .table--responsive td { grid-template-columns:1fr; gap:var(--s-1); }
}

@media (pointer:coarse) {
  .btn,.btn-sm,.theme-toggle,.icon-button { min-height:44px; }
  .nav-item { min-height:44px; }
}

@media (min-width:821px) {
  .content { margin-inline:auto; }
}