/* ============================================================
   BARRA LATERALE — il fondo, e la barra compressa

   Tre righe, una per livello: il timer, la settimana, l'utente. Il
   dettaglio non sparisce, si sposta dove serve — nel tooltip della card e
   dentro il menu utente. Prefisso `sf-`, solo token.

   La barra compressa («rail») e' la stessa barra a 76px: le voci restano
   con la sola icona e il fondo diventa tre pulsanti tondi.
   ============================================================ */

.sf-foot{border-top:1px solid var(--border);padding-top:8px;display:flex;flex-direction:column;gap:6px;}

/* ---- il timer: un componente, una riga ---- */
.sf-dock{border-radius:12px;overflow:hidden;background:var(--field);border:1px solid var(--border);}
.sf-dock.on{background:var(--primary-tint);border-color:var(--primary-mid);}
.sf-idle{display:flex;align-items:center;gap:9px;width:100%;border:0;background:transparent;padding:8px 10px;text-align:left;font-size:12.5px;font-weight:600;min-height:42px;color:var(--text);font-family:inherit;cursor:pointer;}
.sf-idle:hover{background:var(--hover);}
.sf-idle b{font-weight:600;white-space:nowrap;}
.sf-idle em{font-style:normal;color:var(--muted);font-weight:500;font-size:11.5px;margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px;}
.sf-play{width:26px;height:26px;border-radius:8px;background:var(--primary);color:var(--on-accent);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.sf-play svg{width:12px;height:12px;fill:currentColor;stroke-width:1;}
.sf-live{display:flex;align-items:center;gap:8px;padding:8px 10px;min-height:40px;}
.sf-live-time{font-size:15px;font-weight:700;letter-spacing:-.4px;font-variant-numeric:tabular-nums;color:var(--primary-dark);line-height:1;flex-shrink:0;}
.sf-live-ticket{flex:1;min-width:0;font-size:11.5px;font-weight:500;color:var(--neutral-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sf-live-ticket b{font-weight:600;color:var(--text);}
.sf-live-acts{display:flex;gap:4px;flex-shrink:0;}
.sf-iact{width:24px;height:24px;border-radius:7px;border:0;background:var(--card);color:var(--primary-dark);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.sf-iact:hover{background:var(--primary-soft);}
.sf-iact svg{width:12px;height:12px;}
.sf-iact.stop svg{fill:currentColor;stroke-width:1;}
/* Che stia girando lo dice il movimento, non un pallino. In pausa la linea
   e' ferma e piena. */
.sf-runline{height:2px;background:var(--primary-soft);position:relative;overflow:hidden;}
.sf-runline::after{content:"";position:absolute;top:0;bottom:0;left:0;width:38%;background:linear-gradient(90deg,transparent,var(--primary),transparent);animation:sf-slide 1.9s linear infinite;}
.sf-dock.paused .sf-runline::after{animation:none;width:100%;background:var(--primary-mid);}
@keyframes sf-slide{from{transform:translateX(-110%);}to{transform:translateX(280%);}}
@media (prefers-reduced-motion:reduce){.sf-runline::after{animation:none;width:100%;background:var(--primary);opacity:.45;}}

/* ---- la settimana: etichetta e cifra, il resto sta nel tooltip ---- */
.sf-week{width:100%;border:1px solid var(--border);background:var(--field);border-radius:12px;padding:11px 12px 12px;display:flex;flex-direction:column;gap:6px;text-align:left;color:var(--text);font-family:inherit;cursor:pointer;}
.sf-week:hover{background:var(--card);box-shadow:var(--shadow);}
.sf-wk-label{font-size:11.5px;color:var(--muted);font-weight:500;}
.sf-wk-val{font-variant-numeric:tabular-nums;font-size:18px;font-weight:700;letter-spacing:-.4px;line-height:1;}
.sf-wk-val span{font-size:13px;color:var(--muted);font-weight:500;letter-spacing:0;}

/* ---- la riga utente: il profilo e la campanella, due pulsanti ---- */
.sf-urow{display:flex;align-items:center;gap:4px;min-width:0;}
.sf-user{flex:1;min-width:0;border:1px solid transparent;background:transparent;border-radius:11px;padding:6px 8px;display:flex;align-items:center;gap:10px;text-align:left;color:var(--text);font-family:inherit;cursor:pointer;}
.sf-user:hover,.sf-user[aria-expanded="true"]{background:var(--hover);}
.sf-user[aria-expanded="true"]{border-color:var(--border);}
.sf-user .avatar{width:32px;height:32px;}
.sf-utxt{flex:1;min-width:0;}
.sf-utxt b{display:block;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sf-utxt small{display:block;font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* La campanella resta anche a zero: e' il posto dove si va a guardare, non
   un avviso che compare e sparisce. Il numero si aggiunge quando c'e'. */
/* Il pulsante e' un quadrato con la sua superficie, e il numero e' un
   pallino pieno appoggiato all'angolo: il segno che si riconosce senza
   leggerlo. Prima il pallino era da nove pixel e mezzo fuori dal bordo;
   adesso e' abbastanza grande da contenere una cifra e sta dentro
   all'ingombro della barra, cosi' non lo taglia niente. Il bordo del
   colore della barra lo stacca dal pulsante che ha sotto. */
.sf-bell{position:relative;flex-shrink:0;width:34px;height:34px;border-radius:11px;
  border:1px solid var(--border);background:var(--card);color:var(--neutral-ink);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-family:inherit;
  transition:background .12s,border-color .12s,color .12s;}
.sf-bell:hover{background:var(--hover);color:var(--text);}
.sf-bell[aria-expanded="true"]{background:var(--hover);border-color:var(--primary);color:var(--text);}
.sf-bell svg{width:17px;height:17px;}
/* Qualcosa di scaduto o di oggi: si accende la campanella. Il numero non
   cambia — e' sempre pieno — perche' quello che dice e' quanti, non quanto
   urgenti. */
.sf-bell.on{color:var(--primary-dark);}
/* Il primario scuro e non il pieno chiaro: un pallino piccolo con dentro
   una cifra bianca ha bisogno del tono piu' carico per reggersi, e di
   notte quello chiaro se la mangerebbe. */
.sf-bell .cnt{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;
  border-radius:20px;background:var(--primary-deep);color:var(--on-accent);border:2px solid var(--sidebar);
  font-size:11px;font-weight:700;line-height:16px;font-variant-numeric:tabular-nums;
  display:inline-flex;align-items:center;justify-content:center;}
/* Il pallino e' sempre pieno, anche quando non c'e' niente di urgente: con
   la coppia tenue si leggeva come una decorazione e non come un numero da
   guardare. La differenza fra «c'e' qualcosa per oggi» e «c'e' qualcosa»
   resta, ma la porta la campanella sotto (`.sf-bell.on`), non il numero. */

/* ---- il menu: sopra la riga utente, appeso al body per non essere
   tagliato dalla barra (che ha overflow nascosto) ---- */
.sf-menu{position:fixed;z-index:650;background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lift);padding:6px;min-width:240px;}
.sf-mhead{padding:10px 10px 11px;display:flex;gap:10px;align-items:center;border-bottom:1px solid var(--border);margin-bottom:6px;}
.sf-mhead .avatar{width:32px;height:32px;}
.sf-mtxt{min-width:0;flex:1;}
.sf-mhead b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sf-mhead small{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sf-role{margin-left:auto;font-size:9.5px;font-weight:700;background:var(--primary-soft);color:var(--primary-dark);padding:3px 7px;border-radius:6px;white-space:nowrap;flex-shrink:0;max-width:112px;overflow:hidden;text-overflow:ellipsis;}
.sf-mi{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;padding:8px 10px;border-radius:9px;font-size:12.5px;font-weight:500;text-align:left;color:var(--text);font-family:inherit;cursor:pointer;text-decoration:none;}
.sf-mi:hover{background:var(--hover);}
.sf-mi svg{width:16px;height:16px;color:var(--neutral-ink);flex-shrink:0;}
.sf-mi .cnt{margin-left:auto;background:var(--primary);color:var(--on-accent);font-size:10px;font-weight:700;border-radius:20px;padding:1px 6px;font-variant-numeric:tabular-nums;}
.sf-mi .sw{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--muted);background:var(--track);border-radius:20px;padding:2px 8px;}
.sf-msep{height:1px;background:var(--border);margin:6px 0;}
.sf-mi.danger{color:var(--red-dark);}
.sf-mi.danger svg{color:var(--red-dark);}
.sf-mi.danger:hover{background:var(--red-soft);}

/* ---- il riquadro delle notifiche ----
   Stessa famiglia del menu utente: appeso al body, sopra la campanella,
   con la misura decisa dal JS perche' dipende da dov'e' il pulsante. */
.sfn-panel{position:fixed;z-index:660;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lift);overflow:hidden;}
/* Il fuoco ci arriva da codice per far partire Tab ed Esc da dentro: il
   contorno direbbe «sei qui» di un riquadro intero, che non e' un comando. */
.sfn-panel:focus{outline:none;}
.sfn-head{display:flex;align-items:center;gap:8px;padding:11px 10px 10px 13px;border-bottom:1px solid var(--border);flex-shrink:0;}
.sfn-head b{font-size:13px;font-weight:600;color:var(--text);}
.sfn-cnt{background:var(--primary);color:var(--on-accent);font-size:10px;font-weight:700;border-radius:20px;padding:1px 7px;font-variant-numeric:tabular-nums;}
.sfn-x{margin-left:auto;width:24px;height:24px;border-radius:7px;border:0;background:transparent;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.sfn-x:hover{background:var(--hover);color:var(--text);}
.sfn-x svg{width:14px;height:14px;}
.sfn-body{overflow-y:auto;padding:5px;min-height:0;}
.sfn-grp{font-size:9.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);padding:8px 8px 5px;}
.sfn-row{display:flex;align-items:stretch;gap:2px;border-radius:10px;}
.sfn-row:hover{background:var(--hover);}
.sfn-main{flex:1;min-width:0;display:flex;align-items:flex-start;gap:9px;border:0;background:transparent;padding:8px;border-radius:10px;text-align:left;font-family:inherit;color:var(--text);cursor:pointer;}
.sfn-ico{width:24px;height:24px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--track);color:var(--neutral-ink);}
.sfn-ico svg{width:12px;height:12px;}
.sfn-row.late .sfn-ico{background:var(--red-soft);color:var(--red-dark);}
.sfn-row.now .sfn-ico{background:var(--primary-soft);color:var(--primary-dark);}
.sfn-txt{min-width:0;flex:1;}
.sfn-txt b{font-size:12px;font-weight:500;line-height:1.35;color:var(--text);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.sfn-txt small{display:block;margin-top:2px;font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sfn-row.late .sfn-txt small{color:var(--red-dark);font-weight:600;}
.sfn-done{align-self:center;width:26px;height:26px;margin-right:6px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;}
.sfn-done:hover{background:var(--primary-soft);border-color:transparent;color:var(--primary-dark);}
.sfn-done svg{width:13px;height:13px;}
.sfn-more{padding:8px 10px 6px;font-size:10.5px;color:var(--muted);}
.sfn-empty{padding:26px 18px 28px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px;}
.sfn-empty svg{width:22px;height:22px;color:var(--dim);margin-bottom:5px;}
.sfn-empty b{font-size:12.5px;font-weight:600;color:var(--text);}
.sfn-empty small{font-size:11px;color:var(--muted);line-height:1.45;}

/* ---- la barra compressa ---- */
.sf-railbtn{margin-left:auto;width:26px;height:26px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
.sf-railbtn:hover{background:var(--hover);color:var(--text);}
.sf-railbtn svg{width:14px;height:14px;}
.sf-railonly{display:none;}
.app.rail{grid-template-columns:76px minmax(0,1fr);}
.app.rail .sidebar{padding:18px 8px 12px;}
.app.rail .brand{flex-direction:column;justify-content:center;gap:8px;padding:5px 0 14px;}
.app.rail .brand-name{display:none;}
.app.rail .sf-railbtn{margin:0;}
.app.rail .nav-item{justify-content:center;padding:9px;}
.app.rail .nav-item span{display:none;}
.app.rail .sf-dock,.app.rail .sf-week,.app.rail .sf-utxt{display:none;}
.app.rail .sf-urow{flex-direction:column-reverse;gap:8px;}
.app.rail .sf-bell{width:34px;height:34px;border-radius:11px;}
.app.rail .sf-railonly{display:flex;}
.app.rail .sf-foot{align-items:center;gap:8px;padding-top:10px;}
.app.rail .sf-user{justify-content:center;padding:4px;width:auto;}
.sf-ring{width:42px;height:42px;border-radius:50%;flex-direction:column;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--primary-dark);background:var(--card);position:relative;border:0;cursor:pointer;font-family:inherit;}
.sf-ring::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--primary) calc(var(--p,0)*1%),var(--track) 0);}
.sf-ring::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--card);}
.sf-ring b{position:relative;z-index:1;font-variant-numeric:tabular-nums;}
.sf-railtimer{position:relative;width:42px;height:42px;border-radius:12px;border:0;background:var(--primary-tint);box-shadow:inset 0 0 0 1px var(--primary-mid);flex-direction:column;align-items:center;justify-content:center;gap:1px;color:var(--primary-dark);cursor:pointer;font-family:inherit;}
.sf-railtimer small{font-size:8.5px;font-weight:700;font-variant-numeric:tabular-nums;}
.sf-railtimer svg{width:12px;height:12px;}
.sf-railplay{width:42px;height:42px;border-radius:12px;background:var(--primary);color:var(--on-accent);border:0;align-items:center;justify-content:center;cursor:pointer;}
.sf-railplay svg{width:15px;height:15px;fill:currentColor;stroke-width:1;}
.sf-railplay:hover{background:var(--primary-dark);}
.nav-noresult{padding:14px;font-size:13px;color:var(--muted);}