/* ============================================================================
   ONYX Mail — Ops Console
   Enterprise admin design system. Brand mirrors onyx.az (sky→blue / slate /
   emerald). The page JS (domains/mailboxes/tenants/plans.js) owns the markup
   inside #view and depends on these class names — keep them:
     .toolbar h2 .spacer  .card table  .filterbar  .form .form-actions
     .sec .del .create  .pill.on .pill.off  .muted .kv  .toast(.ok/.err)
   ========================================================================== */

:root {
  /* brand */
  --sky-50:#f0f9ff;  --sky-100:#e0f2fe; --sky-500:#0ea5e9;
  --sky-600:#0284c7; --sky-700:#0369a1;
  --blue-700:#1d4ed8; --blue-800:#1e40af;
  --brand-grad:linear-gradient(135deg,#0284c7 0%,#1d4ed8 100%);

  /* slate ink + surfaces */
  --ink:#0f172a;        /* slate-900 */
  --ink-soft:#334155;   /* slate-700 */
  --muted:#64748b;      /* slate-500 */
  --faint:#94a3b8;      /* slate-400 */
  --line:#e2e8f0;       /* slate-200 */
  --line-soft:#eef2f6;
  --bg:#f6f8fb;
  --surface:#ffffff;
  --surface-2:#f8fafc;

  /* status */
  --ok:#059669; --ok-bg:#ecfdf5; --ok-line:#a7f3d0;
  --danger:#dc2626; --danger-bg:#fef2f2; --danger-line:#fecaca;
  --warn:#b45309; --warn-bg:#fffbeb; --warn-line:#fde68a;
  --info:#0369a1; --info-bg:#eff6ff; --info-line:#bfdbfe;

  /* shape + depth */
  --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:18px;
  --sh-xs:0 1px 2px rgba(15,23,42,.06);
  --sh-sm:0 1px 3px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.04);
  --sh-md:0 4px 16px rgba(15,23,42,.08),0 1px 3px rgba(15,23,42,.05);
  --sh-lg:0 18px 50px rgba(15,23,42,.20);
  --ring:0 0 0 3px rgba(2,132,199,.18);

  --sidebar-w:252px;
  --topbar-h:60px;
  --panel-w:440px;
}

* { box-sizing:border-box; }
html, body { height:100%; }

body {
  margin:0;
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size:14px;
  line-height:1.5;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"cv02","cv03","cv04","ss01";
}

a { color:var(--sky-600); }
::selection { background:rgba(2,132,199,.18); }

/* ============================================================================
   App shell  ·  sidebar + main column
   ========================================================================== */
.app {
  min-height:100vh;
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
}

/* ---- sidebar ---- */
.sidebar {
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  flex-direction:column;
  background:#0b1220;
  background-image:linear-gradient(180deg,#0f172a 0%,#0b1220 100%);
  border-right:1px solid rgba(148,163,184,.12);
  padding:18px 14px;
  gap:6px;
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 8px 16px;
  margin-bottom:6px;
  border-bottom:1px solid rgba(148,163,184,.12);
}
.brand-logo { height:24px; width:auto; display:block; }
.brand-tag {
  font-size:11px;
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:#7dd3fc;
  background:rgba(14,165,233,.12);
  border:1px solid rgba(14,165,233,.25);
  padding:3px 8px;
  border-radius:999px;
}

#nav {
  display:flex;
  flex-direction:column;
  gap:3px;
  flex:1 1 auto;
}
#nav a {
  display:flex;
  align-items:center;
  gap:11px;
  padding:9px 11px;
  border-radius:var(--r-md);
  color:#94a3b8;
  text-decoration:none;
  font-size:13.5px;
  font-weight:550;
  letter-spacing:.1px;
  position:relative;
  transition:background .15s ease, color .15s ease;
}
#nav a svg { width:19px; height:19px; flex:0 0 auto; opacity:.85; }
#nav a:hover { color:#e2e8f0; background:rgba(148,163,184,.08); }
#nav a.active {
  color:#fff;
  background:linear-gradient(135deg,rgba(2,132,199,.30),rgba(29,78,216,.22));
}
#nav a.active svg { opacity:1; color:#7dd3fc; }
#nav a.active::before {
  content:"";
  position:absolute;
  left:-14px;
  top:50%;
  transform:translateY(-50%);
  width:3px;
  height:20px;
  border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,var(--sky-500),var(--blue-700));
}

.side-foot {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:6px;
  padding:11px 12px;
  border-radius:var(--r-md);
  background:rgba(148,163,184,.06);
  border:1px solid rgba(148,163,184,.12);
}
.env-dot {
  width:8px; height:8px; border-radius:50%; flex:0 0 auto;
  background:#34d399;
  box-shadow:0 0 0 3px rgba(52,211,153,.18);
}
.env-name { font-size:12px; font-weight:700; color:#e2e8f0; line-height:1.3; }
.env-sub  { font-size:10.5px; color:#64748b; letter-spacing:.2px; }

/* ---- main column ---- */
.main { min-width:0; display:flex; flex-direction:column; }

.topbar {
  position:sticky; top:0; z-index:20;
  height:var(--topbar-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 26px;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(1.6) blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar-title { font-size:14px; font-weight:700; letter-spacing:.2px; color:var(--ink); }
.topbar-right { display:flex; align-items:center; gap:10px; }

.badge-danger {
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.7px;
  text-transform:uppercase;
  color:var(--danger);
  background:var(--danger-bg);
  border:1px solid var(--danger-line);
  padding:4px 10px;
  border-radius:999px;
}

/* ---- the live-system warning strip ---- */
.banner {
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 26px;
  background:var(--warn-bg);
  border-bottom:1px solid var(--warn-line);
  color:var(--warn);
  font-size:12.5px;
  font-weight:500;
}
.banner svg { width:16px; height:16px; flex:0 0 auto; }
.banner b { font-weight:800; }

/* ---- scrollable content area ---- */
#view {
  flex:1 1 auto;
  max-width:1180px;
  width:100%;
  margin:0 auto;
  padding:26px 26px 60px;
}

/* ============================================================================
   Page header (toolbar) + section headings
   ========================================================================== */
.toolbar {
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 20px;
  flex-wrap:wrap;
}
.toolbar h2, .page-head h2 {
  margin:0;
  font-size:22px;
  font-weight:700;
  letter-spacing:-.3px;
  color:var(--ink);
}
.spacer { flex:1 1 auto; }
.page-head {
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; flex-wrap:wrap; margin-bottom:18px;
}
.hint { color:var(--muted); font-size:12.5px; margin:14px 2px 0; }

/* ============================================================================
   Cards
   ========================================================================== */
.card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);
  overflow:hidden;
}

/* ============================================================================
   Tables
   ========================================================================== */
table { width:100%; border-collapse:separate; border-spacing:0; font-size:13.5px; }
thead th {
  text-align:left;
  padding:11px 16px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--muted);
  background:var(--surface-2);
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
tbody td {
  padding:12px 16px;
  border-bottom:1px solid var(--line-soft);
  vertical-align:middle;
  color:var(--ink-soft);
}
tbody tr { transition:background .12s ease; }
tbody tr:hover td { background:#fafcff; }
tbody tr:last-child td { border-bottom:0; }
td.actions { text-align:right; white-space:nowrap; }
td.actions button { margin-left:6px; }

.muted { color:var(--muted); font-size:12.5px; }

code {
  font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size:12.5px;
  background:var(--surface-2);
  border:1px solid var(--line);
  padding:1.5px 7px;
  border-radius:6px;
  color:var(--ink);
}

/* ============================================================================
   Pills / badges
   ========================================================================== */
.pill {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.2px;
  line-height:1.6;
  border:1px solid transparent;
}
.pill::before {
  content:"";
  width:6px; height:6px; border-radius:50%;
  background:currentColor;
}
.pill.on  { color:var(--ok); background:var(--ok-bg); border-color:var(--ok-line); }
.pill.off { color:var(--danger); background:var(--danger-bg); border-color:var(--danger-line); }

/* DNS verification status badges — share the pill shape but carry a leading
   glyph instead of the ::before dot. */
.dns-badge {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.2px;
  line-height:1.6;
  border:1px solid transparent;
  white-space:nowrap;
}
.dns-pass { color:var(--ok);     background:var(--ok-bg);     border-color:var(--ok-line); }
.dns-fail { color:var(--danger); background:var(--danger-bg); border-color:var(--danger-line); }
.dns-warn { color:var(--warn);   background:var(--warn-bg);   border-color:var(--warn-line); }
.dns-pending { color:var(--muted); background:var(--surface-2); border-color:var(--line); }

/* ============================================================================
   Buttons
   ========================================================================== */
button {
  cursor:pointer;
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  letter-spacing:.1px;
  color:#fff;
  background:var(--sky-600);
  background-image:linear-gradient(180deg,#0ea5e9,#0284c7);
  border:1px solid #0277b6;
  border-radius:var(--r-sm);
  padding:8px 14px;
  box-shadow:var(--sh-xs);
  transition:filter .12s ease, transform .04s ease, background .12s ease, box-shadow .12s ease;
}
button:hover { filter:brightness(1.05); box-shadow:var(--sh-sm); }
button:active { transform:translateY(.5px); }
button:focus-visible { outline:none; box-shadow:var(--ring); }

button.sec {
  color:var(--ink-soft);
  background:#fff;
  background-image:none;
  border:1px solid var(--line);
  box-shadow:var(--sh-xs);
}
button.sec:hover { background:var(--surface-2); border-color:#cbd5e1; filter:none; }

button.del {
  color:var(--danger);
  background:#fff;
  background-image:none;
  border:1px solid var(--danger-line);
  box-shadow:none;
}
button.del:hover { background:var(--danger-bg); filter:none; }

button:disabled { opacity:.5; cursor:not-allowed; filter:none; box-shadow:none; }
button.create { font-weight:700; }
button.create .plus { margin-right:4px; }

/* ============================================================================
   Inputs
   ========================================================================== */
input, select, textarea {
  font-family:inherit;
  font-size:13.5px;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:9px 11px;
  transition:border-color .12s ease, box-shadow .12s ease;
}
input::placeholder { color:var(--faint); }
input:hover, select:hover { border-color:#cbd5e1; }
input:focus, select:focus, textarea:focus {
  outline:none;
  border-color:var(--sky-500);
  box-shadow:var(--ring);
}
input[type=number] { width:120px; }
select {
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 10px center;
  padding-right:30px;
}

/* ============================================================================
   Filter bar (mailboxes)
   ========================================================================== */
.filterbar {
  display:flex;
  gap:12px;
  align-items:flex-end;
  flex-wrap:wrap;
  margin-bottom:16px;
  padding:14px 16px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);
}
.filterbar label {
  display:flex; flex-direction:column; gap:5px;
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.4px; color:var(--muted);
}
.filterbar .search { min-width:240px; }
.filterbar .grow { flex:1 1 200px; }
.filterbar .refresh { align-self:flex-end; }

/* ============================================================================
   Side panel  ·  slide-in drawer
   ========================================================================== */
.overlay {
  position:fixed; inset:0; z-index:40;
  background:rgba(15,23,42,.42);
  backdrop-filter:blur(2px);
  opacity:1;
  transition:opacity .25s ease;
}
.panel {
  position:fixed; top:0; right:0; z-index:50;
  height:100%; width:var(--panel-w); max-width:94vw;
  background:var(--surface);
  border-left:1px solid var(--line);
  box-shadow:var(--sh-lg);
  transform:translateX(0);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
}
.panel-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px;
  border-bottom:1px solid var(--line);
  flex:0 0 auto;
  background:var(--surface-2);
}
.panel-head h3 { margin:0; font-size:15px; font-weight:700; color:var(--ink); }
#panelClose {
  background:transparent; background-image:none; border:0; box-shadow:none;
  color:var(--muted); font-size:24px; line-height:1; padding:2px 6px; border-radius:6px;
}
#panelClose:hover { background:var(--line-soft); color:var(--ink); filter:none; }
#panelBody { padding:22px; overflow-y:auto; flex:1 1 auto; }

.overlay.hidden { opacity:0; pointer-events:none; }
.panel.hidden { transform:translateX(calc(100% + 40px)); box-shadow:none; }

/* ============================================================================
   Forms
   ========================================================================== */
.form-field { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.form-field label { font-size:12px; font-weight:700; color:var(--ink-soft); }
.form-field input, .form-field select { width:100%; }
.form-field .help { font-size:12px; color:var(--muted); }

.form { display:flex; flex-direction:column; }
.form > label {
  display:flex; flex-direction:column; gap:6px; margin-bottom:16px;
  font-size:12px; font-weight:700; color:var(--ink-soft);
}
.form > label input, .form > label select { width:100%; font-weight:400; }
.form .muted { margin:0 0 16px; }
.form h4 { color:var(--ink); }
.form details summary { color:var(--ink-soft) !important; }

.form-actions {
  margin-top:8px;
  display:flex; gap:10px;
  padding-top:16px;
  border-top:1px solid var(--line-soft);
}
.form-actions button { flex:0 0 auto; }

/* ============================================================================
   Dialogs
   ========================================================================== */
dialog {
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:26px;
  max-width:480px;
  color:var(--ink);
  box-shadow:var(--sh-lg);
}
dialog::backdrop { background:rgba(15,23,42,.45); backdrop-filter:blur(3px); }
dialog h3 { margin:0 0 12px; font-size:17px; font-weight:700; letter-spacing:-.2px; }
dialog h4 { font-size:13px; font-weight:700; color:var(--ink-soft); }

.kv { display:flex; align-items:center; gap:8px; margin:6px 0; font-size:14px; }
.kv .muted { min-width:96px; }
.kv code {
  flex:1;
  background:var(--surface-2);
  border:1px solid var(--line);
  padding:7px 9px;
  border-radius:var(--r-sm);
  word-break:break-all;
}
.kv button { flex:0 0 auto; }

/* Billing roll-up: responsive tiles for the MRR/ARR/trial figures. auto-fit keeps
   a single-currency deployment from stranding two empty columns, while a
   multi-currency one wraps instead of overflowing the card. */
.kv-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:4px 18px;
}
.kv-grid .kv { margin:4px 0; }
.kv-grid .kv .muted { min-width:auto; }

.dlg-actions { margin-top:18px; text-align:right; }
.dlg-actions button { margin-left:8px; }

.pw {
  font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size:15px;
  background:var(--warn-bg);
  border:1px dashed #fbbf24;
  color:#92400e;
  padding:12px;
  border-radius:var(--r-md);
  word-break:break-all;
}
.dns-scroll {
  max-height:60vh; overflow:auto;
  border:1px solid var(--line);
  border-radius:var(--r-md);
}
.dns-table { font-size:13.5px; width:100%; table-layout:auto; }
.dns-table th, .dns-table td { vertical-align:top; }
/* The Value column holds long DKIM/SPF strings — give it the slack and wrap there. */
.dns-table td .val { word-break:break-all; }
.dns-table td code { line-height:1.5; }
.dns-table td .muted { margin-top:4px; }
/* Status column: just the badge, never wraps. */
.dns-table th:nth-child(4), .dns-table td.dns-status { white-space:nowrap; width:1%; text-align:center; }

.dns-verify-bar {
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:12px;
}
.dns-verify-bar #dnsSummary { flex:1 1 auto; font-size:12.5px; }
.dns-verify-bar #dnsSummary.is-fail { color:var(--danger); font-weight:600; }
.dns-verify-bar #dnsSummary.is-ok   { color:var(--ok); font-weight:600; }
.dns-verify-bar.is-loading #dnsSummary { color:var(--muted); }

/* ============================================================================
   Toasts
   ========================================================================== */
#msg { position:fixed; right:22px; bottom:22px; max-width:420px; z-index:60; }
.toast {
  display:flex; align-items:center; gap:8px;
  background:var(--ink);
  color:#fff;
  padding:12px 15px;
  border-radius:var(--r-md);
  margin-top:10px;
  font-size:13px;
  font-weight:500;
  box-shadow:var(--sh-md);
  border:1px solid rgba(255,255,255,.08);
  animation:toastIn .2s cubic-bezier(.2,.8,.3,1);
}
.toast.err { background:#7f1d1d; border-color:rgba(254,202,202,.25); }
.toast.ok  { background:#065f46; border-color:rgba(167,243,208,.25); }
@keyframes toastIn {
  from { transform:translateY(10px); opacity:0; }
  to   { transform:translateY(0); opacity:1; }
}

/* ============================================================================
   Signed-in header affordance  ·  topbar "signed in as … · Sign out"
   ========================================================================== */
.signed-in {
  display:flex;
  align-items:center;
  gap:10px;
}
.signed-in-who {
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
}
.signed-in-who b { color:var(--ink-soft); font-weight:700; }
.signed-in-role {
  display:inline-block;
  margin-left:4px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--info);
  background:var(--info-bg);
  border:1px solid var(--info-line);
  padding:2px 7px;
  border-radius:999px;
  vertical-align:middle;
}
.signed-in-out {
  padding:5px 11px;
  font-size:12px;
}

/* ============================================================================
   Operator role badges  ·  pill-shaped, color-coded by privilege
   ========================================================================== */
.badge-role {
  display:inline-block;
  padding:3px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.2px;
  line-height:1.6;
  border:1px solid transparent;
  text-transform:capitalize;
}
.role-owner    { color:var(--blue-800); background:var(--info-bg);   border-color:var(--info-line); }
.role-operator { color:var(--ok);       background:var(--ok-bg);     border-color:var(--ok-line); }
.role-helpdesk { color:var(--warn);      background:var(--warn-bg);   border-color:var(--warn-line); }
.role-viewer   { color:var(--muted);    background:var(--surface-2); border-color:var(--line); }

/* 2FA state pill (operators table) — reuses the role-pill shape + status vars.
   enabled = ok/green, pending = warn/amber (forced enroll on next login). */
.badge-2fa {
  display:inline-block;
  padding:3px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.2px;
  line-height:1.6;
  border:1px solid transparent;
}
.badge-2fa.tfa-on      { color:var(--ok);   background:var(--ok-bg);   border-color:var(--ok-line); }
.badge-2fa.tfa-pending { color:var(--warn); background:var(--warn-bg); border-color:var(--warn-line); }

/* ============================================================================
   Login screen  ·  full-view centered card shown when not signed in
   ========================================================================== */
/* Until GET /api/auth/me confirms an active session, <body> keeps the `pre-auth`
   class and ONLY the login screen renders — the operator chrome (sidebar / topbar /
   banner) never shows to an unauthenticated visitor, so the god-mode console's
   structure and labels aren't exposed on the public internet. common.js boot()
   drops the class once signed in. */
body.pre-auth .sidebar,
body.pre-auth .topbar,
body.pre-auth .banner { display:none; }
body.pre-auth .app { grid-template-columns:1fr; }
body.pre-auth .login-screen { min-height:100vh; }

.login-screen {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:60vh;
  padding:20px 0;
}
.login-card {
  width:100%;
  max-width:380px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-md);
  padding:28px 26px;
  display:flex;
  flex-direction:column;
}
.login-title {
  margin:0 0 4px;
  font-size:20px;
  font-weight:700;
  letter-spacing:-.3px;
  color:var(--ink);
}
.login-sub { margin:0 0 20px; }
.login-card label {
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:16px;
  font-size:12px;
  font-weight:700;
  color:var(--ink-soft);
}
.login-card label input { width:100%; font-weight:400; }
.login-error {
  margin:0 0 14px;
  font-size:12.5px;
  font-weight:600;
  color:var(--danger);
  background:var(--danger-bg);
  border:1px solid var(--danger-line);
  border-radius:var(--r-sm);
  padding:8px 11px;
}
.login-actions { display:flex; }
.login-actions button { flex:1 1 auto; padding:10px 14px; }

/* ---- 2FA enrollment view (QR image block + manual secret) ---- */
.enroll-qr {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:188px;
  margin:0 0 16px;
  padding:14px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-md);
}
/* The QR is a data:image/svg+xml URI from the backend (CSP img-src 'self' data:). */
.enroll-qr-img {
  display:block;
  width:188px;
  height:188px;
  background:#fff;
  border-radius:var(--r-sm);
}
.enroll-secret {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 16px;
}
.enroll-secret .muted { flex:1 1 100%; margin:0; }
.enroll-secret-val {
  flex:1 1 auto;
  word-break:break-all;
  letter-spacing:.5px;
}
.enroll-secret button { flex:0 0 auto; padding:6px 11px; font-size:12px; }

/* ============================================================================
   Responsive  ·  sidebar collapses to a top strip on narrow screens
   ========================================================================== */
@media (max-width:920px) {
  .app { grid-template-columns:1fr; }
  .sidebar {
    position:sticky; top:0; height:auto; width:100%;
    flex-direction:row; align-items:center; gap:10px;
    padding:10px 16px; border-right:0;
    border-bottom:1px solid rgba(148,163,184,.14);
    overflow-x:auto;
  }
  .brand { padding:0 12px 0 0; margin:0; border-bottom:0; border-right:1px solid rgba(148,163,184,.14); }
  #nav { flex-direction:row; gap:4px; flex:1 1 auto; }
  #nav a { white-space:nowrap; }
  #nav a.active::before { display:none; }
  .side-foot { display:none; }
}
@media (max-width:720px) {
  :root { --panel-w:100vw; }
  #view { padding:18px 16px 50px; }
  .topbar { padding:0 16px; }
  .banner { padding:9px 16px; }
  #nav a span { display:none; }
  #nav a { padding:9px; }
  .toolbar h2, .page-head h2 { font-size:19px; }
  thead th, tbody td { padding:10px 12px; }
  .signed-in-who { display:none; }
}