/* Cassetto dei menu su telefono (26/10/2026): sotto i 900 px il menu #menu diventa un cassetto laterale a scomparsa, in stile Plancia
   (scuro tecnico, ciano su blu notte, angoli segnati, font di sistema: CSP font-src 'self'). Sopra i 900 px non cambia nulla:
   gli elementi del cassetto sono nascosti e la lista dei moduli resta il menu laterale di sempre. Logica in app.js (blocco «cassetto»). */
.cs-testa,.cs-utente,.cs-piede,#btnCassetto,#cassettoVelo,#cassettoLinguetta{display:none}
.cs-lista{display:contents}

@media(max-width:900px){
 .app,.app.compresso{display:block;height:auto}
 header{grid-column:auto}
 .cs-lista,.cs-piede,.cs-testa,.cs-utente{display:flex}
 #btnMenu,#nomeUtente,#btnEsci{display:none}
 #btnCassetto{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:44px;min-height:44px;padding:0;flex:none}
 #btnCassetto i{display:block;width:18px;height:2px;background:var(--txt);border-radius:1px}
 .cols{grid-template-columns:1fr}
 main{padding:12px 14px 40px}

 /* il cassetto */
 #menu{--mono:ui-monospace,"Cascadia Mono",Consolas,"SF Mono",monospace;
  position:fixed;left:0;top:0;bottom:0;width:min(80vw,340px);z-index:40;display:flex;flex-direction:column;overflow:hidden;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);background:#050f19;color:#d8f5ff;font-family:var(--mono);
  border-right:1px solid #1b5c78;transform:translateX(-102%);visibility:hidden;transition:transform .22s ease,visibility 0s .22s}
 #menu::after{content:"";position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border:2px solid #5ee1ff;border-left:0;border-top:0;pointer-events:none}
 .cassetto-aperto #menu{transform:none;visibility:visible;transition:transform .22s ease}
 #menu .op{--c:#5b8dff}#menu .fl{--c:#2dd4bf}#menu .cl{--c:#a78bfa}#menu .po{--c:#f472b6}#menu .ad{--c:#94a3b8}#menu .pf{--c:#fbbf24}

 .cs-testa{align-items:flex-start;gap:8px;padding:12px 12px 10px;border-bottom:1px solid #12364f;flex:none}
 .cs-marchio{display:block;font-size:15px;font-weight:500;letter-spacing:.16em;color:#5ee1ff}
 .cs-ora{display:block;margin-top:3px;font-size:11px;letter-spacing:.05em;color:#6d94ab}
 .cs-x{margin:0 0 0 auto;width:44px;height:44px;flex:none;border:1px solid #1b5c78;border-radius:0;background:transparent;color:#5ee1ff;font:inherit;font-size:22px;line-height:1}
 .cs-utente{align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #12364f;font-size:14px;flex:none}
 .cs-av{width:34px;height:34px;border:1px solid #5ee1ff;color:#5ee1ff;display:flex;align-items:center;justify-content:center;font-size:12px;flex:none}
 .cs-utente small{display:block;font-size:10px;letter-spacing:.1em;color:#6d94ab;text-transform:uppercase}
 .cs-lista{flex-direction:column;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 10px 24px}
 .cs-piede{align-items:center;gap:8px;padding:10px 12px;border-top:1px solid #12364f;flex:none}
 .cs-esci{min-height:44px;padding:0 18px;border:1px solid #12364f;border-radius:0;background:transparent;color:#b9d6e4;font:inherit;font-size:13px}
 .cs-esci:active{border-color:#5ee1ff;color:#5ee1ff}

 #menu .g{margin:14px 0 4px;padding:0;background:none;border-radius:0;font-size:11px;font-weight:400;letter-spacing:.2em;gap:8px}
 #menu .g::before{width:3px;height:12px;border-radius:0}
 #menu .g::after{content:"";flex:1;height:1px;background:#12364f}
 #menu .g span{color:var(--c)}
 #menu .it{position:relative;width:100%;min-height:44px;margin:0;padding:0 12px;gap:12px;border:1px solid transparent;border-radius:0;background:none;color:#b9d6e4;font:inherit;font-size:14px;font-weight:400;white-space:normal}
 #menu .it .ic{width:7px;height:7px;border-radius:50%;background:var(--c);opacity:.55}
 #menu .it:hover{background:rgba(94,225,255,.05)}
 #menu .it.on{background:rgba(94,225,255,.08);border-color:#1b5c78;color:#d8f5ff;font-weight:400}
 #menu .it.on .ic{opacity:1;box-shadow:0 0 8px var(--c)}
 #menu .it.on::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:3px;background:var(--c)}
 #menu .it.spento{color:#6d94ab}
 #menu .it small{color:#6d94ab}
 .compresso .it span.t{display:inline}

 #cassettoVelo{display:block;position:fixed;inset:0;z-index:39;background:rgba(0,0,0,.62);opacity:0;pointer-events:none;transition:opacity .22s ease}
 .cassetto-aperto #cassettoVelo{opacity:1;pointer-events:auto}
 #cassettoLinguetta{display:block;position:fixed;left:0;top:45%;width:4px;height:90px;z-index:5;background:#5ee1ff;opacity:.7;pointer-events:none}
 .cassetto-aperto #cassettoLinguetta{display:none}
 html.cs-blocca,html.cs-blocca body{overflow:hidden}
}
@media(max-width:900px) and (prefers-reduced-motion:reduce){
 #menu,.cassetto-aperto #menu,#cassettoVelo{transition:none}
}

/* Menu laterale del computer (26/10/2026): stesso stile Plancia del cassetto (scuro tecnico, ciano su blu notte, angoli segnati),
   senza testa, utente e Esci (restano nell'intestazione). Il menu compresso (64 px) resta com'è come comportamento. */
@media(min-width:901px){
 #menu{--mono:ui-monospace,"Cascadia Mono",Consolas,"SF Mono",monospace;position:relative;padding:6px 10px 24px;background:#050f19;color:#d8f5ff;font-family:var(--mono);border-right:1px solid #1b5c78}
 #menu .op{--c:#5b8dff}#menu .fl{--c:#2dd4bf}#menu .cl{--c:#a78bfa}#menu .po{--c:#f472b6}#menu .ad{--c:#94a3b8}#menu .pf{--c:#fbbf24}
 #menu .g{margin:14px 0 4px;padding:0;background:none;border-radius:0;font-size:11px;font-weight:400;letter-spacing:.2em;gap:8px}
 #menu .g::before{width:3px;height:12px;border-radius:0}
 #menu .g::after{content:"";flex:1;height:1px;background:#12364f}
 #menu .g span{color:var(--c)}
 #menu .it{position:relative;min-height:40px;margin:0;padding:0 12px;gap:12px;border:1px solid transparent;border-radius:0;background:none;color:#b9d6e4;font:inherit;font-size:13px;font-weight:400}
 #menu .it .ic{width:7px;height:7px;border-radius:50%;background:var(--c);opacity:.55}
 #menu .it:hover{background:rgba(94,225,255,.05)}
 #menu .it.on{background:rgba(94,225,255,.08);border-color:#1b5c78;color:#d8f5ff;font-weight:400}
 #menu .it.on .ic{opacity:1;box-shadow:0 0 8px var(--c)}
 #menu .it.on::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:3px;background:var(--c)}
 #menu .it.spento,#menu .it small{color:#6d94ab}
 .compresso #menu{padding-left:4px;padding-right:4px}
 .compresso #menu .it{justify-content:center;padding:0}
 .compresso #menu .g::after{display:none}
}