/* ===== Navbar =====
   La barra tiene lo sfondo a tutta larghezza — e' ancorata al bordo dello schermo
   e interromperla lascerebbe una striscia sospesa sul vuoto — ma il suo CONTENUTO
   si allinea alla stessa colonna di tutto il resto: sopra i 3840px il nome
   dell'app e le info di sessione stavano a due metri l'uno dall'altro. */
.navbar{position:fixed;top:0;left:0;right:0;height:60px;z-index:var(--z-navbar);background:var(--surface);border-bottom:1px solid var(--border);padding:0 1rem;display:flex;align-items:center}
.navbar .container-fluid{display:flex;align-items:center;width:100%;gap:.5rem;max-width:var(--shell-w);margin:0 auto}
.navbar-brand{font-weight:700;font-size:1.2rem;color:var(--text);text-decoration:none}
/* Il nome dell'app si allinea alle voci della sidebar (che hanno lo stesso 1.25rem
   di rientro). Solo dove la sidebar c'e': sotto il breakpoint il posto e' occupato
   dal bottone che la richiama, e il rientro sposterebbe il brand nel vuoto. */
@media (min-width:992px){
  .navbar-brand{padding-left:1.25rem}
}
.frontend-link{color:var(--muted);font-size:1.1rem;text-decoration:none;transition:color .15s}
.frontend-link:hover{color:var(--accent-text)}
.navbar-nav{display:flex;align-items:center;list-style:none;margin:0;padding:0}
.session-info{text-align:right;line-height:1.3}
.session-datetime{font-size:var(--fs-sm);font-weight:500;color:var(--text);margin-bottom:4px}
.session-duration{font-size:.75rem;color:var(--muted)}
.session-duration i{margin-right:.25rem}
.nav-btn,.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius);border:1px solid var(--border);background:transparent;color:var(--text);cursor:pointer;font-size:1.05rem}
.nav-btn:hover,.theme-toggle:hover{background:var(--surface-2)}
.nav-btn{text-decoration:none}

/* ===== Sidebar ===== */
.sidebar{position:fixed;top:60px;left:0;width:250px;height:calc(100vh - 60px);z-index:var(--z-sidebar);background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;transition:transform .25s ease}
.sidebar-nav{flex:1;overflow-y:auto;padding-bottom:.5rem}
.sidebar-section{padding:1rem 1.25rem .4rem;font-size:.7rem;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:600}
.sidebar .nav{flex-direction:column;gap:0}
.sidebar .nav-link{display:flex;align-items:center;color:var(--muted);padding:.7rem 1.1rem;border-radius:var(--radius);margin:2px .75rem;text-decoration:none;transition:background .15s,color .15s}
.sidebar .nav-link:hover{color:var(--text);background:var(--surface-2)}
.sidebar .nav-link.active{color:var(--text-on-accent);background:var(--accent-solid)}
.sidebar .nav-link>i:first-child{margin-right:.75rem;width:20px;text-align:center;font-size:1.1rem;flex-shrink:0}
.sidebar .nav-link span{flex:1}
.sidebar-footer{display:flex;flex-direction:column;gap:.5rem;align-items:stretch;padding:.75rem 1.25rem;border-top:1px solid var(--border)}
.sidebar-footer .lang-select{width:100%;text-align:center;text-align-last:center}
/* La versione e' anche il modo di arrivare al changelog, quindi da' un segno
   di se' al passaggio del mouse: un link che non si distingue da una scritta
   non viene cliccato da nessuno. Resta discreta — e' in fondo alla sidebar,
   non e' un'azione. */
.sidebar-version{display:block;font-size:.7rem;color:var(--muted);text-align:center;
  letter-spacing:.5px;text-decoration:none}
a.sidebar-version:hover{color:var(--accent);text-decoration:underline}
.sidebar-backdrop{display:none;position:fixed;inset:60px 0 0 0;background:rgba(0,0,0,.5);z-index:var(--z-backdrop)}
.sidebar-backdrop.show{display:block;z-index:auto}

/* ===== Main ===== */
/* Nessuna transizione su margin-left: il margine e' 250px sopra il breakpoint e 0
   sotto, non cambia mai dentro una sessione — l'unico momento in cui varia e' il
   resize della finestra. Animarlo faceva ricalcolare il layout per nulla; la
   sidebar, che si muove davvero, scorre gia' in transform. */
.main-content{margin-left:250px;margin-top:60px;padding:1.5rem;min-height:calc(100vh - 60px)}

@media (max-width:991.98px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.show{transform:translateX(0)}
  .main-content{margin-left:0}
}

/* ===== La shell si centra con il contenuto =====
   La sidebar governa la pagina: lasciarla incollata al bordo sinistro mentre il
   contenuto sta al centro le mette in mezzo mille pixel di nulla, e le due cose
   smettono di sembrare la stessa applicazione. Sopra la soglia scorre insieme al
   contenuto; sotto, tutto torna esattamente com'era.
   Il centraggio usa il 50% del body, non 100vw: vw include la barra di scorrimento
   e regalerebbe un overflow orizzontale a ogni pagina lunga. */
@media (min-width:1618px){
  .sidebar{left:50%;margin-left:calc(var(--shell-w) / -2)}
  .main-content{margin-left:calc(50% - (var(--shell-w) / 2) + 250px);
    max-width:calc(var(--shell-w) - 250px)}
  .sidebar-backdrop{left:50%;margin-left:calc(var(--shell-w) / -2)}
}

/* ===== Zona utile della pagina =====
   .main-content non ha una larghezza massima: su uno schermo 4K il contenuto
   arrivava a 3590px, con righe di tabella larghe due palmi e campi da 1700px per
   tre cifre. Lo spazio in eccesso serve ad AFFIANCARE, non ad allargare: una
   colonna di lavoro a misura leggibile e una di contesto per stato, azioni e
   diagnosi. Oltre i 2560px entrambe crescono, invece di lasciare il vuoto. */
.page{max-width:calc(var(--work-max) + var(--context-w) + var(--shell-gap));margin:0 auto}
.page-grid{display:grid;grid-template-columns:minmax(0,var(--work-max)) var(--context-w);
  gap:var(--shell-gap);align-items:start}
/* Quando alla griglia seguono altre sezioni, il loro titolo cadeva a filo
   dell'ultimo elemento della colonna di contesto — di solito un bottone — e
   sembrava appartenergli. Lo stacco appartiene a cio' che comincia. */
.page-grid + .section{margin-top:2.5rem}
/* Sotto la soglia la colonna di contesto scende in fondo: e' materiale di
   supporto, non deve competere in larghezza con il lavoro. */
@media (max-width:1599.98px){
  .page-grid{grid-template-columns:minmax(0,1fr);gap:2rem}
  .page-context{position:static}
}
/* Una pagina senza colonna di contesto (tabelle piene, audit) usa tutta la zona. */
.page-wide{max-width:calc(var(--work-max) + var(--context-w) + var(--shell-gap));margin:0 auto}

/* Un passo che chiede una cosa sola — confermare un codice, disattivare il secondo
   fattore — non ha contesto da affiancare: una colonna stretta, centrata, e nient'altro
   attorno a distrarre. */
.page-focus{max-width:32rem;margin:0 auto}

/* Testata di pagina: titolo e descrizione a sinistra, stato e azione primaria a
   destra. Un solo posto in tutto il pannello dove si guarda per agire. */
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem;flex-wrap:wrap;
  margin-bottom:2rem}
.page-head h1{font-size:1.5rem;margin:0 0 .25rem;text-wrap:balance}
.page-head p{margin:0;color:var(--muted);font-size:var(--fs-sm);max-width:70ch;text-wrap:pretty}
.page-actions{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}

/* Colonna di contesto: si distingue per posizione e ritmo, non per una cornice. */
.page-context{position:sticky;top:1.5rem}
.context-block{margin-bottom:2rem}
.context-block:last-child{margin-bottom:0}
.context-block > h2{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  font-weight:600;margin:0 0 .85rem}
.page-context .btn{width:100%;justify-content:center}
.page-context .btn + .btn{margin-top:.5rem}
.page-context form + form .btn{margin-top:.5rem}

/* ===== Auth pages (login / register / 2fa) =====
   La larghezza e il centraggio verticale stanno su #app-main (unico, dentro
   .auth-body): cosi' il flash (fratello del contenitore di pagina, fuori da
   esso) finisce nella stessa colonna della card invece di stare a piena
   larghezza in cima allo schermo. Le tre classi sotto restano solo per lo
   spazio interno; la larghezza e' quella, unica, di #app-main. */
.auth-body #app-main{width:100%;max-width:550px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:1rem}
.login-container,.register-container,.twofa-container{width:100%}
.login-card,.register-card,.twofa-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2.5rem;box-shadow:var(--shadow)}
.twofa-card{text-align:center}
.login-logo,.register-logo{font-size:1.75rem;font-weight:700;text-align:center;margin-bottom:.5rem;color:var(--text)}
.login-subtitle,.register-subtitle{text-align:center;color:var(--muted);font-size:.9rem;margin-bottom:2rem}
.login-footer,.register-footer{text-align:center;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border);color:var(--muted);font-size:var(--fs-sm)}
.login-footer a,.register-footer a{color:var(--accent-text);font-weight:500}
.back-link{display:inline-flex;align-items:center;gap:.5rem;color:var(--muted);text-decoration:none;font-size:var(--fs-sm);margin-bottom:1.5rem}
.back-link:hover{color:var(--text)}
.toggle-password{background:transparent;border:none;color:var(--muted);cursor:pointer;padding:0 .75rem;display:flex;align-items:center}
.toggle-password:hover{color:var(--text)}
.telegram-help{background:var(--accent-bg);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);border-radius:var(--radius);padding:1rem;margin-top:.5rem;font-size:.8rem;color:var(--muted)}
.telegram-help-title{color:var(--accent-text);font-weight:600;margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem}
.telegram-help ol{margin:0;padding-left:1.25rem}
.telegram-help a{color:var(--accent-text)}

/* ===== 2FA code inputs ===== */
.twofa-icon{width:80px;height:80px;background:color-mix(in srgb,var(--accent) 16%,transparent);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;font-size:2rem;color:var(--accent)}
.twofa-title{font-size:1.5rem;font-weight:700;margin-bottom:.5rem}
.twofa-subtitle{color:var(--muted);font-size:.9rem;margin-bottom:2rem}
.code-inputs{display:flex;gap:.5rem;justify-content:center;margin-bottom:1.5rem}
.code-input{width:50px;height:60px;background:var(--surface);border:2px solid var(--border);border-radius:var(--radius);text-align:center;font-size:1.5rem;font-weight:600;color:var(--text);transition:border-color .15s,box-shadow .15s}
.code-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.code-input.filled{border-color:var(--success)}
.hidden-input{position:absolute;opacity:0;pointer-events:none}
.resend-section{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border);text-align:center}
.resend-text{color:var(--muted);font-size:var(--fs-sm);margin-bottom:.5rem}
.resend-link{color:var(--accent-text);font-weight:500}
.resend-link.disabled{color:var(--muted);pointer-events:none;opacity:.6}
.timer{color:var(--muted);font-size:.8rem;margin-top:.5rem}