/* ═══════════════════════════════════════════════════════════════════════════
   Temp Mail Web — foglio di stile

   Tavolozza presa da ui/Theme.kt: il web deve sembrare la stessa applicazione.
   Scala tipografica e ritmo delle spaziature espliciti: è ciò che distingue
   un'interfaccia curata da una "che funziona".
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* scala tipografica */
  --fs-xs: .75rem;      /* 12 */
  --fs-sm: .8125rem;    /* 13 */
  --fs-md: .9375rem;    /* 15 */
  --fs-lg: 1.0625rem;   /* 17 */
  --fs-xl: 1.25rem;     /* 20 */
  --fs-2xl: 1.625rem;   /* 26 */

  /* ritmo: multipli di 4 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px;

  --r-sm: 10px; --r: 14px; --r-lg: 18px; --r-pill: 999px;
  --maxw: 760px;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
}

/* ---------- Midnight ---------- */
[data-theme="midnight"] {
  --bg: radial-gradient(1200px 600px at 20% -10%, #24325e 0%, transparent 60%), linear-gradient(180deg, #151d3a 0%, #0f1424 45%, #0a0d17 100%);
  --text: #f7f9ff;
  --text-dim: rgba(247, 249, 255, .64);
  --label: rgba(247, 249, 255, .48);
  --card: rgba(255, 255, 255, .055);
  --card-border: rgba(255, 255, 255, .085);
  --card-hover: rgba(255, 255, 255, .095);
  --hero: linear-gradient(115deg, #4f6cf7 0%, #6a5cff 48%, #22c1dc 100%);
  --hero-text: #ffffff;
  --hero-label: rgba(255, 255, 255, .72);
  --hero-shadow: rgba(79, 108, 247, .28);
  --btn: #ffffff;
  --on-btn: #1d2a6b;
  --glass: rgba(255, 255, 255, .13);
  --glass-border: rgba(255, 255, 255, .2);
  --on-glass: #ffffff;
  --outline: rgba(255, 255, 255, .16);
  --accent: #8fb0ff;
  --otp-card: linear-gradient(135deg, rgba(143, 176, 255, .16), rgba(34, 193, 220, .08));
  --otp-border: rgba(143, 176, 255, .28);
  --otp-label: #a9c2ff;
  --otp-text: #ffffff;
  --otp-glow: rgba(120, 150, 255, .45);
  --chip: linear-gradient(120deg, #4f6cf7, #22c1dc);
  --on-chip: #ffffff;
  --ok: rgba(34, 197, 94, .16); --on-ok: #7ef0a4;
  --warn: rgba(245, 158, 11, .18); --on-warn: #fbd38d;
  --off: rgba(255, 255, 255, .07); --on-off: rgba(247, 249, 255, .55);
  --bar: rgba(12, 16, 28, .92);
  --bar-border: rgba(255, 255, 255, .07);
  --sidebar: rgba(255, 255, 255, .025);
  --error: #ff8a80;
  --shadow-1: 0 1px 2px rgba(0,0,0,.3);
  --shadow-2: 0 4px 16px rgba(0,0,0,.3);
  --shadow-3: 0 18px 48px rgba(0,0,0,.42);
  color-scheme: dark;
}

/* ---------- Paper ---------- */
[data-theme="paper"] {
  --bg: radial-gradient(1000px 500px at 85% -10%, #fff1e4 0%, transparent 55%), #f4f6fb;
  --text: #0f172a;
  --text-dim: #5b6779;
  --label: #8794a7;
  --card: #ffffff;
  --card-border: #e6ebf2;
  --card-hover: #fbfcfe;
  --hero: linear-gradient(115deg, #101a30, #22304c);
  --hero-text: #ffffff;
  --hero-label: rgba(255, 255, 255, .66);
  --hero-shadow: rgba(15, 23, 42, .16);
  --btn: #f97316;
  --on-btn: #ffffff;
  --glass: rgba(255, 255, 255, .16);
  --glass-border: rgba(255, 255, 255, .28);
  --on-glass: #ffffff;
  --outline: #dfe5ee;
  --accent: #ea6a0c;
  --otp-card: linear-gradient(135deg, #fff7ed, #ffe9d2);
  --otp-border: #fcd0a3;
  --otp-label: #c2410c;
  --otp-text: #0f172a;
  --otp-glow: transparent;
  --chip: linear-gradient(120deg, #101a30, #22304c);
  --on-chip: #ffffff;
  --ok: #dcfce7; --on-ok: #15803d;
  --warn: #fef3c7; --on-warn: #b45309;
  --off: #eef1f6; --on-off: #64748b;
  --bar: #ffffff;
  --bar-border: #e6ebf2;
  --sidebar: #ffffff;
  --error: #d64545;
  --shadow-1: 0 1px 2px rgba(15,23,42,.05);
  --shadow-2: 0 4px 14px rgba(15,23,42,.07);
  --shadow-3: 0 18px 44px rgba(15,23,42,.14);
  color-scheme: light;
}

/* ---------- Ember: scuro ad alto contrasto, accenti incandescenti ----------
   ⚠️ Il rosso qui è l'accento, non l'errore: per non perdere il segnale di
   pericolo, --error passa al cremisi-magenta, che resta distinguibile
   dall'arancio anche per chi confonde rosso e verde. */
[data-theme="ember"] {
  --bg:
    radial-gradient(900px 480px at 12% -8%, #47100a 0%, transparent 62%),
    radial-gradient(760px 420px at 92% 108%, #2c0a0c 0%, transparent 60%),
    linear-gradient(180deg, #150a0a 0%, #0c0708 52%, #060405 100%);
  --text: #fff4ec;
  --text-dim: rgba(255, 244, 236, .60);
  --label: rgba(255, 158, 106, .58);
  --card: rgba(255, 118, 56, .055);
  --card-border: rgba(255, 126, 62, .16);
  --card-hover: rgba(255, 126, 62, .11);
  --hero: linear-gradient(112deg, #a8140b 0%, #ff4800 46%, #ffa000 100%);
  --hero-text: #fff8f2;
  --hero-label: rgba(255, 240, 225, .78);
  --hero-shadow: rgba(255, 72, 0, .34);
  --btn: linear-gradient(120deg, #ff4d16, #ff9100);
  --on-btn: #1a0703;
  --glass: rgba(255, 255, 255, .13);
  --glass-border: rgba(255, 210, 180, .28);
  --on-glass: #fff8f2;
  --outline: rgba(255, 140, 80, .26);
  --accent: #ff9147;
  --otp-card: linear-gradient(135deg, rgba(255, 86, 20, .22), rgba(255, 176, 0, .07));
  --otp-border: rgba(255, 140, 50, .42);
  --otp-label: #ffb27a;
  --otp-text: #fff8f2;
  --otp-glow: rgba(255, 108, 28, .62);
  --chip: linear-gradient(120deg, #ff3d00, #ffab00);
  --on-chip: #1a0703;
  --ok: rgba(34, 197, 94, .18); --on-ok: #6ee7a0;
  --warn: rgba(255, 196, 0, .20); --on-warn: #ffd166;
  --off: rgba(255, 150, 100, .09); --on-off: rgba(255, 244, 236, .55);
  --bar: rgba(14, 7, 8, .94);
  --bar-border: rgba(255, 126, 62, .14);
  --sidebar: rgba(255, 110, 50, .035);
  --error: #ff4d7d;
  --shadow-1: 0 1px 2px rgba(0,0,0,.45);
  --shadow-2: 0 4px 18px rgba(0,0,0,.5);
  --shadow-3: 0 20px 54px rgba(0,0,0,.66);
  color-scheme: dark;
}

/* incandescenza: solo su Ember, dove è il punto della tavolozza */
[data-theme="ember"] .hero { box-shadow: var(--shadow-2), 0 12px 46px var(--hero-shadow), inset 0 1px 0 rgba(255,220,190,.22); }
[data-theme="ember"] .logo { filter: drop-shadow(0 0 14px rgba(255, 90, 20, .42)); }
[data-theme="ember"] .btn { color: var(--on-btn); font-weight: 700; }
[data-theme="ember"] .side-item[aria-current="page"] { box-shadow: inset 2px 0 0 var(--accent); }
[data-theme="ember"] .otp-code { text-shadow: 0 0 10px var(--otp-glow), 0 0 32px rgba(255,90,20,.42); }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg) fixed;
  color: var(--text);
  font-family: "Inter var", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--fs-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Rete di sicurezza: nessuno scorrimento orizzontale, mai.
   ⚠️ `clip` e non `hidden`: `overflow: hidden` su un antenato crea un
   contenitore di scorrimento e ROMPE `position: sticky` dei discendenti —
   la barra laterale smetterebbe di restare ferma. `clip` taglia senza
   creare il contenitore, quindi lo sticky continua a funzionare. */
html, body { overflow-x: clip; }
#app { min-height: 100dvh; max-width: 100%; }
.shell, .main, .detail { min-width: 0; }

/* ---------- tipografia ---------- */
h1, h2, h3 { margin: 0; letter-spacing: -.02em; line-height: 1.22; }
h1 { font-size: var(--fs-2xl); font-weight: 780; }
h2 { font-size: var(--fs-xl); font-weight: 720; }
h3 { font-size: var(--fs-lg); font-weight: 700; }

.label {
  font-size: var(--fs-xs); font-weight: 650; letter-spacing: .1em;
  text-transform: uppercase; color: var(--label);
}
.dim { color: var(--text-dim); }
.sm { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.mono { font-family: var(--mono); font-variant-ligatures: none; }
.center { text-align: center; }
/* ⚠️ `min-width: 0` sui contenitori flessibili non è decorativo.
   Il valore predefinito è `auto`, che impedisce a un contenitore di scendere
   sotto la larghezza minima del suo contenuto: un testo con `white-space:
   nowrap` (come un indirizzo email) fissa quindi un pavimento e sfonda il
   layout verso destra su schermi stretti. Va messo su OGNI anello della catena,
   non solo sull'elemento che cresce. */
.row { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; min-width: 0; }
.spread { display: flex; gap: var(--s2); align-items: center; justify-content: space-between; min-width: 0; }
.grow { flex: 1; min-width: 0; }
.stack, .card, .hero { min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stack > * + * { margin-top: var(--s3); }
.nowrap { white-space: nowrap; flex: 0 0 auto; }

/* ---------- icone ---------- */
.ic { fill: currentColor; flex: 0 0 auto; vertical-align: -.16em; }

/* ---------- pulsanti ---------- */
button, .btn-link {
  font: inherit; cursor: pointer; border: 1px solid transparent;
  border-radius: var(--r-sm); padding: 9px 14px; font-weight: 620;
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  transition: background .14s, border-color .14s, filter .14s, transform .06s;
  -webkit-tap-highlight-color: transparent;
}
button:focus-visible, a:focus-visible, input:focus-visible, .pick:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: default; }

.btn { background: var(--btn); color: var(--on-btn); box-shadow: var(--shadow-1); }
.btn:hover:not(:disabled) { filter: brightness(.95); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--outline); }
.btn-ghost:hover:not(:disabled) { background: var(--card-hover); border-color: var(--accent); }
.btn-glass { background: var(--glass); color: var(--on-glass); border-color: var(--glass-border); backdrop-filter: blur(6px); }
.btn-glass:hover:not(:disabled) { background: rgba(255,255,255,.2); }
.btn-danger { background: transparent; color: var(--error); border-color: var(--outline); }
.btn-danger:hover:not(:disabled) { border-color: var(--error); background: color-mix(in srgb, var(--error) 8%, transparent); }
.btn-sm { padding: 6px 11px; font-size: var(--fs-sm); border-radius: 9px; }
.btn-block { width: 100%; }
.btn-icon { padding: 8px; border-radius: 9px; }

/* ---------- campi ---------- */
input, select, textarea {
  font: inherit; width: 100%; padding: 10px 12px; color: var(--text);
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--r-sm); outline: none; transition: border-color .14s;
}
input::placeholder, textarea::placeholder { color: var(--label); }
input:focus, textarea:focus { border-color: var(--accent); }
label.field { display: block; }
label.field > span { display: block; margin-bottom: 6px; }

/* ---------- card ---------- */
.card {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--r); padding: var(--s4); box-shadow: var(--shadow-1);
}
.card.clickable { cursor: pointer; transition: background .14s, border-color .14s, box-shadow .14s; }
.card.clickable:hover { background: var(--card-hover); border-color: var(--outline); box-shadow: var(--shadow-2); }
.card-pad-sm { padding: var(--s3); }

/* ---------- hero: l'indirizzo ---------- */
.hero {
  background: var(--hero); color: var(--hero-text);
  border-radius: var(--r-lg); padding: var(--s4) var(--s5);
  box-shadow: var(--shadow-2), 0 10px 32px var(--hero-shadow);
  position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(420px 160px at 100% 0%, rgba(255,255,255,.16), transparent 70%);
  pointer-events: none;
}
.hero .label { color: var(--hero-label); }
.hero .addr {
  font-family: var(--mono); font-size: var(--fs-lg); font-weight: 600;
  letter-spacing: -.01em; word-break: break-all; margin: 6px 0 var(--s3);
}
/* i quattro pulsanti dell'hero: su telefono una griglia 2×2 ordinata
   invece di un avvolgimento irregolare */
.hero-acts { display: flex; gap: var(--s2); flex-wrap: wrap; position: relative; }
.hero-acts > * { flex: 1 1 auto; }
@media (max-width: 460px) {
  .hero-acts { display: grid; grid-template-columns: 1fr 1fr; }
  .hero { padding: var(--s4); }
}

/* ---------- OTP ---------- */
.otp-card {
  background: var(--otp-card); border: 1px solid var(--otp-border);
  border-radius: var(--r-lg); padding: var(--s5) var(--s4); text-align: center;
}
.otp-code {
  font-family: var(--mono); font-size: clamp(30px, 8vw, 38px); font-weight: 700;
  letter-spacing: .22em; color: var(--otp-text); text-indent: .22em;
  text-shadow: 0 0 26px var(--otp-glow); margin: var(--s1) 0 var(--s3);
}
.otp-badge {
  background: var(--chip); color: var(--on-chip); border: 0;
  font-family: var(--mono); font-weight: 700; letter-spacing: .1em;
  padding: 5px 10px; border-radius: 8px; font-size: var(--fs-sm);
}

/* ---------- pillole ---------- */
.pill { padding: 3px 9px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 650; white-space: nowrap; }
.pill-ok { background: var(--ok); color: var(--on-ok); }
.pill-warn { background: var(--warn); color: var(--on-warn); }
.pill-off { background: var(--off); color: var(--on-off); }
.tag {
  background: var(--off); color: var(--text-dim); padding: 3px 9px;
  border-radius: var(--r-pill); font-size: var(--fs-xs); display: inline-flex; gap: 5px;
}
.tag b { color: var(--accent); font-variant-numeric: tabular-nums; }

/* ---------- messaggi ---------- */
.mail-body { white-space: pre-wrap; word-break: break-word; font-size: var(--fs-md); line-height: 1.62; }
.mail-body a, .links a { color: var(--accent); text-underline-offset: 2px; }
.links a { display: block; word-break: break-all; font-size: var(--fs-sm); }

/* ---------- avatar ---------- */
.avatar {
  width: 38px; height: 38px; border-radius: 11px; flex: 0 0 38px;
  display: grid; place-items: center; font-weight: 700; font-size: var(--fs-sm);
  color: #fff; text-transform: uppercase; letter-spacing: .02em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}

/* ---------- barra in basso (telefono) ---------- */
nav.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex;
  background: var(--bar); border-top: 1px solid var(--bar-border);
  backdrop-filter: blur(14px); padding-bottom: env(safe-area-inset-bottom);
}
nav.tabs button {
  flex: 1; flex-direction: column; gap: 3px; background: none; border: 0;
  border-radius: 0; padding: 9px 4px 11px; color: var(--on-off);
  font-size: 11px; font-weight: 620; letter-spacing: .01em;
}
nav.tabs button[aria-current="page"] { color: var(--accent); }

/* ---------- varie ---------- */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 84px; z-index: 40;
  background: var(--bar); border: 1px solid var(--bar-border); color: var(--text);
  padding: 10px 16px; border-radius: var(--r-pill); box-shadow: var(--shadow-3);
  font-size: var(--fs-sm); max-width: 90vw; text-align: center;
  animation: rise .18s ease-out;
}
@keyframes rise { from { opacity: 0; transform: translate(-50%, 8px); } }
.err { color: var(--error); font-size: var(--fs-sm); }
.empty { text-align: center; padding: var(--s8) var(--s4); color: var(--text-dim); }
.empty .ic { opacity: .38; margin-bottom: var(--s2); }
.empty h3 { color: var(--text); margin-bottom: 4px; }
.login-wrap { max-width: 384px; margin: 0 auto; padding: 12vh var(--s4) var(--s8); }
.logo {
  font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.035em;
  background: var(--chip); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.spinner {
  display: inline-block; width: 15px; height: 15px; border: 2px solid var(--outline);
  border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* scheletri di caricamento */
.sk { border-radius: 8px; background: var(--off); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }

/* ---------- selettore del tema: campioni reali, non anteprime finte ---------- */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: var(--s3); }
.theme-opt {
  flex-direction: column; align-items: stretch; gap: var(--s3); text-align: left;
  padding: var(--s3); border-radius: var(--r); background: var(--card);
  border: 1px solid var(--card-border); color: var(--text); font-weight: 400;
}
.theme-opt:hover { border-color: var(--outline); }
.theme-opt[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.sw { display: flex; height: 44px; border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--shadow-1); }
.sw span { flex: 1; }
.sw span:first-child { flex: 1.6; }
.theme-opt .nm { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--fs-md); }
.theme-opt .nm .ic { color: var(--accent); opacity: 0; }
.theme-opt[aria-pressed="true"] .nm .ic { opacity: 1; }
.theme-opt .ds { font-size: var(--fs-xs); color: var(--text-dim); line-height: 1.4; }

/* ---------- pillole selezionabili (domini) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 6px 12px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 650;
  background: var(--off); color: var(--text-dim); border: 1px solid transparent;
  font-family: var(--mono);
}
.chip:hover { color: var(--text); }
.chip[aria-pressed="true"] { background: var(--btn); color: var(--on-btn); }

/* ---------- finestre di dialogo ---------- */
dialog {
  border: 1px solid var(--card-border); border-radius: var(--r-lg); padding: 0;
  background: var(--bar); color: var(--text); width: min(470px, calc(100vw - 28px));
  max-height: 84dvh; box-shadow: var(--shadow-3);
  animation: pop .16s ease-out;
}
@keyframes pop { from { opacity: 0; transform: scale(.97); } }
dialog::backdrop { background: rgba(4, 6, 14, .6); backdrop-filter: blur(4px); }
dialog .dlg-head { padding: var(--s5) var(--s5) 0; }
dialog .dlg-head .dim { margin-top: 5px; font-size: var(--fs-sm); }
dialog .dlg-body { padding: var(--s4) var(--s5); overflow-y: auto; max-height: 58dvh; overscroll-behavior: contain; }
/* elenco lungo: righe compatte a due linee, così venti caselle restano scorrevoli */
dialog .pick { padding: 9px 11px; margin-bottom: 6px; }
dialog .pick .avatar { width: 32px; height: 32px; flex-basis: 32px; border-radius: 9px; font-size: var(--fs-xs); }
dialog .dlg-foot {
  padding: var(--s3) var(--s5) var(--s5); display: flex; gap: var(--s2);
  justify-content: flex-end; flex-wrap: wrap;
}

/* voci selezionabili nel dialogo */
.pick {
  width: 100%; text-align: left; background: var(--card); color: var(--text);
  border: 1px solid var(--card-border); border-radius: var(--r); padding: var(--s3);
  gap: var(--s3); justify-content: flex-start; font-weight: 400; margin-bottom: var(--s2);
}
.pick:hover:not(:disabled) { background: var(--card-hover); border-color: var(--outline); }
.pick[data-current="1"] { border-color: var(--accent); }

/* ---------- QR dell'authenticator ----------
   Sfondo bianco fisso e bordo chiaro: i lettori QR hanno bisogno di contrasto
   pieno, quindi non segue il tema. */
.qr {
  background: #fff; padding: 10px; border-radius: var(--r-sm);
  line-height: 0; align-self: center; box-shadow: var(--shadow-1);
}
.qr svg { display: block; width: 100%; height: auto; max-width: 210px; }

/* il link otpauth:// serve solo su dispositivi touch: da PC non apre nulla */
.only-touch { display: none; }
@media (hover: none) and (pointer: coarse) { .only-touch { display: inline-flex; } }

/* ---------- collegamenti rapidi ---------- */
.qlink + .qlink { border-top: 1px solid var(--card-border); padding-top: var(--s4); margin-top: var(--s4); }
.qlink .u { font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-dim); word-break: break-all; }

/* ═══════════════════════════════════════════════════════════════
   Impianto adattivo — come il layout dell'app:
   telefono  → barra in basso, una colonna
   tablet    → barra laterale, una colonna
   desktop   → barra laterale + due colonne (elenco | messaggio)
   ═══════════════════════════════════════════════════════════════ */

.shell { display: grid; grid-template-columns: 1fr; min-height: 100dvh; }
.side { display: none; }
.main { padding: var(--s4) var(--s4) 92px; max-width: var(--maxw); margin: 0 auto; width: 100%; }
.detail { display: none; }

@media (min-width: 880px) {
  .shell { grid-template-columns: 252px 1fr; }
  nav.tabs { display: none; }
  /* fluido: usa lo spazio disponibile, con un tetto che evita righe di testo
     troppo lunghe da leggere su monitor molto larghi */
  .main { padding: var(--s8); max-width: 1180px; margin: 0; }

  .side {
    display: flex; flex-direction: column; gap: 2px; padding: var(--s5) var(--s3);
    background: var(--sidebar); border-right: 1px solid var(--bar-border);
    position: sticky; top: 0; height: 100dvh; overflow-y: auto;
  }
  .side .brand { padding: var(--s1) var(--s3) var(--s5); }
  .side .brand .logo { font-size: var(--fs-xl); }
  .side .brand .sub { font-size: var(--fs-xs); color: var(--label); letter-spacing: .04em; }
  .side-item {
    justify-content: flex-start; width: 100%; background: none; border: 0;
    border-radius: var(--r-sm); padding: 10px var(--s3); color: var(--text-dim);
    font-weight: 600; font-size: var(--fs-md); gap: 11px;
  }
  .side-item:hover { background: var(--card-hover); color: var(--text); }
  .side-item[aria-current="page"] { background: var(--card-hover); color: var(--text); font-weight: 680; }
  .side-item[aria-current="page"] .ic { color: var(--accent); }
  .side .foot { margin-top: auto; padding-top: var(--s4); border-top: 1px solid var(--bar-border); }
  .side .who { font-size: var(--fs-sm); padding: 0 var(--s3) var(--s2); color: var(--text-dim); }
}

@media (min-width: 1200px) {
  /* ⚠️ proporzioni in fr, non larghezze fisse: la colonna dell'elenco cresce
     con la finestra invece di restare inchiodata a 440px su un monitor largo.
     Il minmax garantisce che non scenda sotto una larghezza leggibile. */
  .shell.split { grid-template-columns: 252px minmax(360px, 1.05fr) minmax(0, 1.6fr); }
  .shell.split .main { max-width: none; border-right: 1px solid var(--bar-border); height: 100dvh; overflow-y: auto; padding: var(--s6); }
  .shell.split .detail { display: block; padding: var(--s6) var(--s8); height: 100dvh; overflow-y: auto; }
  .shell.split .detail-inner { max-width: 820px; }
  .back-btn { display: none; }
}
/* su monitor molto larghi la colonna dell'elenco non deve diventare enorme */
@media (min-width: 1900px) {
  .shell.split { grid-template-columns: 252px minmax(420px, .75fr) minmax(0, 1.9fr); }
}

/* Archivio a griglia.
   ⚠️ auto-FIT, non auto-fill: auto-fill mantiene le colonne vuote e con una
   sola casella la card resterebbe stretta con il deserto accanto. auto-fit
   collassa le tracce vuote, così una card sola occupa tutta la larghezza. */
.grid-cards {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  align-items: start;
}

/* tabella utenti */
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tbl th {
  text-align: left; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--label); padding: 0 10px var(--s3); font-weight: 650;
}
.tbl td { padding: var(--s3) 10px; border-top: 1px solid var(--card-border); vertical-align: middle; }
.tbl tbody tr:first-child td { border-top: 0; }
.tbl .acts { text-align: right; white-space: nowrap; }
@media (max-width: 760px) {
  .tbl thead { display: none; }
  .tbl tr { display: block; border-top: 1px solid var(--card-border); padding: var(--s3) 0; }
  .tbl tbody tr:first-child { border-top: 0; }
  .tbl td { display: block; border: 0; padding: 2px 0; }
  .tbl .acts { text-align: left; padding-top: var(--s2); }
}

/* colonna di destra vuota */
.detail-empty { display: grid; place-items: center; height: 100%; text-align: center; color: var(--text-dim); }
.detail-empty .ic { opacity: .3; margin-bottom: var(--s3); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}