/* =========================================================================
   myProHub — app.css v2
   Tema broadcast: navy scoreboard + arancio. Strumento interno, dati densi.
   Riscrittura completa secondo 00-DESIGN-SYSTEM.md (sezioni 2 e 4).

   INDICE
     01. Token
     02. Alias retrocompatibili
     03. Reset e base
     04. Accessibilita (skip link, focus)
     05. Shell: sidebar, topbar, wrap
     06. Navigazione a gruppi
     07. Drawer mobile (hamburger + scrim)
     08. Tiles / KPI
     09. Card e pannelli
     10. Tabelle: base + sistema .dt
     11. Tabs
     12. Form e bottoni
     13. Badge, tag, status, flash
     14. Stati: vuoto, scheletro, caricamento
     15. Login
     16. Loghi club
     17. Compatibilita classi di pagina (.dg .g-* .t-* .s-* .b-* .m-* .a-*)
     18. Responsive
     19. Riduzione del movimento / stampa
   ========================================================================= */

/* ---------- 01. Token --------------------------------------------------- */
:root{
  /* superfici — dal fondo alla superficie piu alta */
  --ink:        #0a1019;   /* fondo pagina */
  --ink-2:      #0e1622;   /* sidebar, barre */
  --surface:    #131e2c;   /* card, pannelli */
  --surface-2:  #18273a;   /* riga hover, stato attivo, input */
  --surface-3:  #1e3048;   /* elevazione modale/dropdown */

  /* tratto */
  --line:       #22344a;   /* hairline standard */
  --line-soft:  #1a2636;   /* griglie grafici, divisori deboli */

  /* testo */
  --txt:        #dfe8f2;   /* corpo */
  --txt-hi:     #ffffff;   /* titoli, numeri chiave */
  --muted:      #8aa0b8;   /* etichette, testo secondario — 5.9:1 su --surface */
  --muted-2:    #6b7891;   /* disabilitato — USO NON TESTUALE */

  /* accenti */
  --accent:     #ff6a1a;   /* arancio scoreboard — azione primaria, stato attivo */
  --accent-ink: #0a1019;   /* testo sopra --accent */
  --cyan:       #19c0ff;   /* accento secondario, dati/metriche */

  /* semantici */
  --ok:   #39d98a;
  --warn: #ffce4d;
  --bad:  #ff5d5d;

  /* per-ruolo — usati da TOTW, deep, records */
  --role-gk:  #ffce4d;
  --role-def: #19c0ff;
  --role-mid: #39d98a;
  --role-att: #ff6a1a;

  /* forma */
  --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-pill: 999px;

  /* spazio — scala 4pt */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;

  /* elevazione */
  --sh-1: 0 1px 2px rgba(0,0,0,.3);
  --sh-2: 0 4px 12px rgba(0,0,0,.35);
  --sh-3: 0 12px 32px rgba(0,0,0,.45);

  /* moto */
  --t-fast: 120ms cubic-bezier(.2,0,.2,1);
  --t:      180ms cubic-bezier(.2,0,.2,1);
  --t-slow: 260ms cubic-bezier(.2,0,.2,1);

  /* tipografia */
  --f-display: Oswald, system-ui, sans-serif;
  --f-body:    Inter, system-ui, sans-serif;

  --fs-xs:  11px;  /* etichette maiuscole, note */
  --fs-sm:  12px;
  --fs-md:  14px;  /* corpo base */
  --fs-lg:  16px;
  --fs-xl:  20px;  /* h2 sezione */
  --fs-2xl: 26px;  /* h1 pagina */
  --fs-3xl: 38px;  /* numeri KPI */

  --lh-tight: 1.2;   /* display */
  --lh:       1.55;  /* corpo */

  /* misure shell */
  --side-w: 240px;
}

/* ---------- 02. Alias retrocompatibili ---------------------------------- */
/* Le pagine esistenti usano ancora questi nomi (o li usano con fallback
   inline: var(--fg,#ecf0f5), var(--card2,#0f1a2c), var(--bg,#0b1220)).
   Qui li agganciamo ai token nuovi: nessuna pagina si rompe e tutte
   ereditano automaticamente la palette aggiornata. */
:root{
  --ink2:    var(--ink-2);
  --surface2:var(--surface-2);
  --accent2: var(--cyan);
  --radius:  var(--r);
  --fg:      var(--txt);
  --bg:      var(--ink);
  --card:    var(--surface);
  --card2:   var(--surface-2);
}

/* ---------- 03. Reset e base -------------------------------------------- */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:
    radial-gradient(1200px 500px at 80% -10%, #16263a 0%, transparent 60%),
    var(--ink);
  color:var(--txt);
  font-family:var(--f-body);
  font-size:var(--fs-md);
  line-height:var(--lh);
  display:flex;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{line-height:var(--lh-tight)}
img{max-width:100%}
hr{border:none;border-top:1px solid var(--line);margin:var(--s-5) 0}
b,strong{color:var(--txt-hi);font-weight:600}
code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-sm)}

/* ---------- 04. Accessibilita ------------------------------------------- */
/* Link "salta al contenuto": primo elemento focusabile del documento. */
.skip-link{
  position:absolute;left:var(--s-3);top:-100px;z-index:200;
  background:var(--accent);color:var(--accent-ink);
  font-family:var(--f-display);text-transform:uppercase;letter-spacing:1px;
  font-size:var(--fs-sm);padding:10px 18px;border-radius:var(--r-sm);
  transition:top var(--t-fast);
}
.skip-link:focus{top:var(--s-3)}

/* Focus visibile su OGNI elemento interattivo — prima esisteva solo su input/select. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:2px;
  border-radius:var(--r-sm);
}
/* Nessun outline "fantasma" al click del mouse. */
:where(a, button, summary):focus:not(:focus-visible){outline:none}

/* ---------- 05. Shell ---------------------------------------------------- */
.side{
  width:var(--side-w);flex:0 0 var(--side-w);
  background:linear-gradient(180deg,var(--ink-2),#0a121c);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  padding:var(--s-5) 0;
  overflow:hidden auto;
  scrollbar-width:thin;
}
.brand{
  display:flex;align-items:center;gap:var(--s-3);
  padding:0 var(--s-5) var(--s-5);
  border-bottom:1px solid var(--line);
  flex:none;
}
.brand-mark{
  font-family:var(--f-display);font-weight:700;font-size:18px;letter-spacing:.5px;
  background:var(--accent);color:var(--accent-ink);
  width:38px;height:38px;display:grid;place-items:center;
  border-radius:var(--r-sm);transform:skewX(-6deg);flex:none;
}
.brand-txt{
  font-family:var(--f-display);font-weight:600;font-size:var(--fs-xl);
  text-transform:uppercase;letter-spacing:1px;line-height:1;color:var(--txt-hi);
}
.brand-txt small{display:block;font-size:10px;color:var(--accent);letter-spacing:3px}

.side-foot{
  padding:var(--s-4) var(--s-5);border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);
  flex:none;
}
.who{color:var(--muted);font-size:var(--fs-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logout{color:var(--accent);font-weight:600;font-size:var(--fs-sm)}
.logout:hover{text-decoration:underline}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.bar{
  display:flex;align-items:center;gap:var(--s-4);
  padding:var(--s-5) var(--s-6);
  border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,var(--ink-2),transparent);
  position:sticky;top:0;z-index:20;
  backdrop-filter:blur(6px);
}
.bar h1{
  font-family:var(--f-display);font-weight:600;text-transform:uppercase;letter-spacing:1.5px;
  margin:0;font-size:var(--fs-2xl);color:var(--txt-hi);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bar__spacer{flex:1}
.bar__actions{display:flex;align-items:center;gap:var(--s-2);flex:none}
.db-pill{
  font-family:var(--f-display);letter-spacing:1px;font-size:var(--fs-sm);color:var(--cyan);
  border:1px solid var(--line);padding:6px 12px;border-radius:var(--r-pill);
  background:var(--surface);white-space:nowrap;flex:none;
}

/* Tre varianti di larghezza: prima .wrap era fisso a 1100px e schiacciava
   le tabelle da 11 colonne sui monitor grandi. */
.wrap{padding:var(--s-6);max-width:1180px;width:100%}
.wrap--wide{max-width:1600px}
.wrap--full{max-width:none}

/* ---------- 06. Navigazione a gruppi ------------------------------------ */
.side nav{
  display:flex;flex-direction:column;
  padding:var(--s-4) var(--s-3);
  gap:var(--s-1);flex:1;
}
.nav-group{display:flex;flex-direction:column;gap:2px;margin-top:var(--s-5)}
.nav-group:first-child{margin-top:0}
.nav-group__label{
  font-family:var(--f-display);font-size:var(--fs-xs);
  text-transform:uppercase;letter-spacing:2px;
  color:var(--muted-2);
  padding:0 var(--s-4) var(--s-2);
}
.side nav a{
  padding:10px var(--s-4);border-radius:var(--r-sm);
  color:var(--muted);font-weight:500;
  display:flex;align-items:center;gap:var(--s-2);
  transition:background var(--t-fast),color var(--t-fast);
}
.side nav a:hover{background:var(--surface);color:var(--txt)}
.side nav a.on{background:var(--surface-2);color:var(--txt-hi);box-shadow:inset 3px 0 0 var(--accent)}
/* sotto-pagina dichiarata (deep, teamdeep, archivio TOTW...) */
.side nav a.sub{
  padding-left:var(--s-6);font-size:var(--fs-sm);
  position:relative;
}
.side nav a.sub::before{
  content:"";position:absolute;left:var(--s-5);top:50%;
  width:6px;height:1px;background:var(--line);
}
.side nav a.sub.on::before{background:var(--accent)}
.side nav a svg{flex:none;opacity:.8}

/* ---------- 07. Drawer mobile ------------------------------------------- */
/* Il bottone e lo scrim esistono sempre nel DOM ma sono nascosti sopra 1024px.
   Sotto 1024px la sidebar diventa un pannello sovrapposto (vedi 18. Responsive):
   la vecchia riga a scorrimento orizzontale e' eliminata. */
.navtoggle{
  display:none;align-items:center;justify-content:center;
  width:40px;height:40px;flex:none;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--txt);cursor:pointer;transition:background var(--t-fast);
}
.navtoggle:hover{background:var(--surface-2)}
.scrim{
  display:none;position:fixed;inset:0;z-index:40;
  background:rgba(4,8,14,.66);
  opacity:0;transition:opacity var(--t);
}

/* ---------- 08. Tiles / KPI --------------------------------------------- */
.tiles{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:var(--s-4);margin-bottom:var(--s-6);
}
.tile{
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--r);padding:18px 20px;position:relative;overflow:hidden;
}
.tile::after{
  content:"";position:absolute;inset:0 0 auto auto;width:60px;height:60px;
  background:radial-gradient(circle at 100% 0,rgba(255,106,26,.18),transparent 70%);
  pointer-events:none;
}
.tile .k{
  font-family:var(--f-display);font-size:var(--fs-3xl);font-weight:700;line-height:1;
  color:var(--txt-hi);font-variant-numeric:tabular-nums;
}
.tile .l{
  color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;
  font-size:var(--fs-xs);margin-top:var(--s-2);
}

/* ---------- 09. Card e pannelli ----------------------------------------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s-5);margin-bottom:var(--s-5);
}
.card h2{
  font-family:var(--f-display);text-transform:uppercase;letter-spacing:1px;
  font-size:var(--fs-xl);margin:0 0 var(--s-4);
  display:flex;gap:var(--s-3);align-items:center;color:var(--txt-hi);
}
/* firma visiva: taglio obliquo scoreboard, solo qui e sul marchio */
.card h2::before{
  content:"";width:8px;height:18px;background:var(--accent);
  transform:skewX(-8deg);border-radius:2px;flex:none;
}
.card h2 svg{flex:none;color:var(--muted)}
.muted{color:var(--muted)}
.note{font-size:var(--fs-sm);color:var(--muted);margin-top:var(--s-2)}

/* ---------- 10. Tabelle -------------------------------------------------- */
/* base globale — invariata nel comportamento rispetto alla v1 */
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{padding:9px var(--s-3);text-align:left;border-bottom:1px solid var(--line)}
th{
  font-family:var(--f-display);font-weight:500;text-transform:uppercase;
  letter-spacing:1px;font-size:var(--fs-xs);color:var(--muted);
}
tr:hover td{background:var(--surface-2)}
td input{width:74px}

/* numeri: sempre a destra, sempre tabulari */
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.poster td.num,.poster th.num{text-align:left} /* i poster hanno layout proprio */

/* --- sistema .dt: il componente piu importante del portale --- */
.dt-scroll{
  overflow:auto;max-height:calc(100vh - 260px);
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);
  scrollbar-width:thin;
}
.dt{width:100%;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums}
.dt thead th{
  position:sticky;top:0;z-index:2;
  background:var(--surface);              /* opaco: sotto ci scorre il contenuto */
  box-shadow:inset 0 -1px 0 var(--line);
  border-bottom:none;
  white-space:nowrap;
  padding:var(--s-3);
}
.dt th,.dt td{border-bottom:1px solid var(--line-soft)}
.dt tbody tr:last-child td{border-bottom:none}
.dt tbody tr:nth-child(even) td{background:rgba(255,255,255,.015)}
.dt tbody tr:hover td{background:var(--surface-2)}
.dt td{padding:9px var(--s-3)}
.dt td.num,.dt th.num{text-align:right;font-variant-numeric:tabular-nums}

/* colonne ordinabili: freccia + aria-sort (non solo visivo) */
.dt th.sort{cursor:pointer;user-select:none}
.dt th.sort:hover{color:var(--txt)}
.dt th.sort[aria-sort="ascending"]::after {content:"\25B2";font-size:9px;margin-left:6px;color:var(--accent)}
.dt th.sort[aria-sort="descending"]::after{content:"\25BC";font-size:9px;margin-left:6px;color:var(--accent)}

/* prime 3 posizioni: era uno style inline in deep.php, ora e' una classe */
.rank-top{color:var(--accent);font-weight:700}
.dt td.rank-top,.dt th.rank-top{color:var(--accent);font-weight:700}

/* riga compatta per tabelle molto lunghe */
.dt--tight td,.dt--tight th{padding:6px var(--s-3)}

/* ---------- 11. Tabs ----------------------------------------------------- */
.tabs{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap}
.tabs a{
  padding:8px var(--s-4);border:1px solid var(--line);border-radius:var(--r-pill);
  color:var(--muted);font-weight:600;font-size:13px;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.tabs a:hover{color:var(--txt);border-color:var(--surface-3)}
.tabs a.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

/* ---------- 12. Form e bottoni ------------------------------------------ */
input,select,textarea{
  background:var(--ink-2);border:1px solid var(--line);color:var(--txt);
  padding:9px 11px;border-radius:var(--r-sm);font:inherit;
  transition:border-color var(--t-fast);
}
input:hover,select:hover,textarea:hover{border-color:var(--surface-3)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--cyan);outline-offset:1px}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
input:disabled,select:disabled,textarea:disabled{opacity:.5;cursor:not-allowed}
label{display:block;color:var(--muted);font-size:var(--fs-sm);margin-bottom:6px;letter-spacing:.5px}
.field{margin-bottom:var(--s-4)}
.row{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:end}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  background:var(--accent);color:var(--accent-ink);
  font-family:var(--f-display);font-weight:600;letter-spacing:1px;
  text-transform:uppercase;font-size:13px;
  border:none;padding:10px 20px;border-radius:var(--r-sm);
  cursor:pointer;min-height:40px;
  transition:filter var(--t-fast),background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.btn:hover{filter:brightness(1.1)}
.btn:active{filter:brightness(.95)}
.btn.ghost{background:transparent;color:var(--txt);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--surface-2);filter:none}
.btn.cyan{background:var(--cyan);color:var(--accent-ink)}
/* azioni distruttive: sempre riconoscibili, mai piene */
.btn.danger{background:transparent;color:var(--bad);border:1px solid var(--bad)}
.btn.danger:hover{background:rgba(255,93,93,.12);filter:none}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;filter:none}
.btn svg{flex:none}
.btn--sm{padding:6px 12px;min-height:32px;font-size:var(--fs-xs)}

/* ---------- 13. Badge, tag, status, flash ------------------------------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-display);font-size:var(--fs-xs);letter-spacing:1px;
  text-transform:uppercase;padding:3px 10px;border-radius:var(--r-pill);
  border:1px solid var(--line);color:var(--muted);line-height:1.6;
}
.badge--gk {color:var(--role-gk); border-color:var(--role-gk)}
.badge--def{color:var(--role-def);border-color:var(--role-def)}
.badge--mid{color:var(--role-mid);border-color:var(--role-mid)}
.badge--att{color:var(--role-att);border-color:var(--role-att)}
.badge--ok  {color:var(--ok);  border-color:var(--ok)}
.badge--warn{color:var(--warn);border-color:var(--warn)}
.badge--bad {color:var(--bad); border-color:var(--bad)}

.tag{
  font-family:var(--f-display);letter-spacing:1px;font-size:var(--fs-xs);
  text-transform:uppercase;color:var(--cyan);
}

.status{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;background:var(--muted-2)}
.status.ok{background:var(--ok)}
.status.bad{background:var(--bad)}
.status.warn{background:var(--warn)}

.flash{padding:var(--s-3) var(--s-4);border-radius:var(--r-sm);margin-bottom:18px;border:1px solid var(--line)}
.flash.ok {background:rgba(57,217,138,.10);border-color:var(--ok); color:var(--ok)}
.flash.bad{background:rgba(255,93,93,.10);border-color:var(--bad);color:var(--bad)}
.flash.warn{background:rgba(255,206,77,.10);border-color:var(--warn);color:var(--warn)}

/* ---------- 14. Stati: vuoto, scheletro --------------------------------- */
/* Regola: ogni stato vuoto dice COME rimediare, non solo che e' vuoto. */
.empty{
  padding:var(--s-7);text-align:center;color:var(--muted);
  border:1px dashed var(--line);border-radius:var(--r);
}
.empty__t{
  font-family:var(--f-display);text-transform:uppercase;letter-spacing:1px;
  color:var(--txt);margin-bottom:var(--s-2);font-size:var(--fs-lg);
}
.empty__hint{max-width:52ch;margin:0 auto var(--s-4);font-size:var(--fs-md)}
.empty__hint:last-child{margin-bottom:0}

.skel{
  background:linear-gradient(90deg,var(--surface) 25%,var(--surface-2) 50%,var(--surface) 75%);
  background-size:200% 100%;
  animation:sk 1.4s infinite linear;
  border-radius:var(--r-sm);
  width:100%;
}
@keyframes sk{ to{ background-position:-200% 0; } }

/* ---------- 15. Login ---------------------------------------------------- */
.login-wrap{margin:auto;width:100%;max-width:380px;padding:40px}
.login-card{
  background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--accent);
  border-radius:var(--r-lg);padding:34px;box-shadow:var(--sh-3);
}
.login-card .brand{justify-content:center;border:none;padding-bottom:var(--s-5)}
body.login{display:grid;place-items:center}

/* ---------- 16. Loghi club ---------------------------------------------- */
.club{display:inline-flex;align-items:center;gap:var(--s-2);min-width:0}
.club-logo{border-radius:50%;object-fit:cover;background:var(--surface-2);flex:none;vertical-align:middle}

/* ---------- 17. Compatibilita classi di pagina -------------------------- */
/* Queste classi sono definite nei <style> locali delle singole pagine
   (gestionale, bannati, tavolini, mappature, annunci, social, lab, nextmd).
   Il blocco locale viene dopo questo foglio, quindi vince sempre: qui
   forniamo solo dei default sensati perche la pagina resti leggibile anche
   se il suo blocco cambia o viene rimosso. Non toccare senza motivo. */
.dg{font-family:var(--f-display);font-weight:700;color:var(--accent)}
.g-p{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.g-nick{font-weight:600;color:var(--txt)}
.g-id{font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-xs);color:var(--muted-2)}
.g-role{font-size:10px;font-weight:700;letter-spacing:.5px;padding:2px 8px;border-radius:5px}
.t-when,.t-sec{color:var(--muted);font-size:var(--fs-sm)}
.t-nick{font-weight:600;color:var(--txt)}
.t-id{font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-xs);color:var(--muted-2)}
.s-in{min-width:200px}
.b-f{color:var(--muted)}
/* .m-* (mappature) e .a-* (annunci) restano interamente locali:
   qui non introduciamo regole per non sovrascriverne il layout. */

/* ---------- 18. Responsive ---------------------------------------------- */
/* >=1280px  sidebar fissa 240px
   1024-1279 sidebar 200px, padding ridotto
   <1024px   sidebar a scomparsa: overlay + scrim + hamburger
   <768px    idem + tabelle in .dt-scroll orizzontale, KPI a 2 colonne     */

@media (max-width:1279px){
  :root{--side-w:200px}
  .wrap{padding:var(--s-5)}
  .bar{padding:var(--s-4) var(--s-5)}
}

@media (max-width:1023px){
  .side{
    position:fixed;inset:0 auto 0 0;z-index:50;
    width:280px;flex-basis:280px;
    transform:translateX(-100%);
    transition:transform var(--t);
    box-shadow:var(--sh-3);
    will-change:transform;
  }
  body.nav-open .side{transform:translateX(0)}
  .scrim{display:block;pointer-events:none}
  body.nav-open .scrim{opacity:1;pointer-events:auto}
  body.nav-open{overflow:hidden}
  .navtoggle{display:inline-flex}
  .main{width:100%}
  .bar{padding:var(--s-3) var(--s-4)}
  .bar h1{font-size:var(--fs-xl)}
  .wrap{padding:var(--s-4);max-width:none}
  .dt-scroll{max-height:calc(100vh - 200px)}
}

@media (max-width:767px){
  .tiles{grid-template-columns:repeat(2,1fr);gap:var(--s-3)}
  .tile{padding:var(--s-3) var(--s-4)}
  .tile .k{font-size:28px}
  .card{padding:var(--s-4)}
  .row{gap:var(--s-2)}
  .row > *{flex:1 1 100%}
  .db-pill{display:none}
  /* le tabelle non si comprimono: scorrono in orizzontale dentro .dt-scroll */
  .dt-scroll{max-height:none;-webkit-overflow-scrolling:touch}
  .empty{padding:var(--s-5)}
  .login-wrap{padding:var(--s-5)}
}

/* ---------- 19. Riduzione del movimento / stampa ------------------------ */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;scroll-behavior:auto !important}
  .skel{animation:none;background:var(--surface-2)}
  .side{transition:none}
  .scrim{transition:none}
}

@media print{
  .side,.bar,.scrim,.navtoggle,.skip-link{display:none !important}
  body{display:block;background:#fff;color:#000}
  .wrap{max-width:none;padding:0}
  .card{border-color:#ccc;background:#fff}
}