/* Splash / schermata di caricamento iniziale (logo IN's) */
#splash{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 30%, #1d4fc4 0%, #163a93 55%, #102a6e 100%);transition:opacity .5s ease}
#splash.hide{opacity:0;pointer-events:none}
.splash-in{text-align:center;padding:0 40px}
.splash-logo{width:180px;max-width:62vw;display:block;margin:0 auto;border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.30);animation:spPop .55s cubic-bezier(.22,1,.36,1) both}
.splash-name{margin-top:20px;color:#fff;font-weight:800;font-size:1.7rem;letter-spacing:-.02em;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;animation:spFade .5s .18s both;opacity:0}
.splash-sub{margin-top:6px;color:rgba(255,255,255,.7);font-size:12px;letter-spacing:.14em;text-transform:uppercase;animation:spFade .5s .3s both;opacity:0}
.splash-bar{width:130px;height:4px;background:rgba(255,255,255,.22);border-radius:3px;margin:30px auto 0;overflow:hidden;animation:spFade .5s .42s both;opacity:0}
.splash-bar i{display:block;width:0;height:100%;background:#ffd200;border-radius:3px;animation:spLoad 1.25s cubic-bezier(.4,0,.2,1) forwards}
@keyframes spPop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes spFade{from{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes spLoad{from{width:0}to{width:100%}}
@media (prefers-reduced-motion:reduce){.splash-logo,.splash-name,.splash-sub,.splash-bar{animation:none;opacity:1}.splash-bar i{animation:none;width:100%}}

/* ============================================================================
   presenze.css — shared design layer for the Presenze app
   ----------------------------------------------------------------------------
   ONE drop-in stylesheet for every role:
     • Admin / gestore   → index.html   (<body class="role-admin">)
     • Crew / dipendente → dip.html     (<body class="role-crew">)
     • Area manager      → index.html?ro=…  (adds .ro to the admin body)
     • Registrazione     → join.html

   It is the single source of truth for tokens + components, replacing the
   duplicated <style> blocks currently inlined in each file. Self-contained:
   no @import, no build step — copy to your repo root and link it:

       <link rel="stylesheet" href="/presenze.css">

   Tokens below are the IN's BRAND palette (blue #163a93 + yellow), aligned with
   the company colors and the design system. A calm petrol alternative is kept as
   a commented option block just below.
   ============================================================================ */

/* ============================================================
   0 · TOKENS
   ============================================================ */
:root{
  /* palette BRAND — IN's blue #163a93 + giallo, su neutri iOS (minimal Apple) */
  --bg:#f2f2f7; --card:#ffffff; --ink:#1c1c1e; --muted:#6e6e73; --line:#e4e4ea;
  --accent:#163a93; --accent-soft:#e9edf8;
  --brand:#163a93; --yellow:#ffd200; --yellow-soft:#fff7cc;
  --green:#1a8a5a; --green-soft:#e4f4ec;
  --amber:#9a6a00; --amber-soft:#fbf1d8;
  --blue:#1f5fb0; --blue-soft:#e6eefb;
  --red:#c4362b; --red-soft:#fbe9e7;
  --gray:#6e6e73; --gray-soft:#ececed;
  --purple:#7a3da6; --purple-soft:#f2e9f8;
  --glass:rgba(242,242,247,.72);
  --r:16px; --shadow:0 1px 2px rgba(0,0,0,.04),0 1px 3px rgba(0,0,0,.05);
  --ease:cubic-bezier(.4,0,.2,1); --spring:cubic-bezier(.34,1.3,.5,1);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* --- OPTION: palette PETROLIO (accento calmo #356a98) ----------------------
   Decommenta per tornare all'accento petrolio attenuato al posto del blu brand.
   Cambiano solo accento/colori funzionali; il resto resta identico.
:root{
  --bg:#eef2f5; --card:#ffffff; --ink:#1b2530; --muted:#586577; --line:#e3e8ee;
  --accent:#356a98; --accent-soft:#e9f1f7;
  --green:#2f9e74; --green-soft:#e4f4ec;
  --amber:#b07d2b; --amber-soft:#f8efda;
  --blue:#356a98; --blue-soft:#e9f1f7;
  --red:#d06a5d; --red-soft:#fbeae7;
  --gray:#69788a; --gray-soft:#eceff3;
  --glass:rgba(238,242,245,.82);
  --shadow:0 1px 2px rgba(27,37,48,.05),0 4px 14px rgba(27,37,48,.06);
}
--------------------------------------------------------------------------- */

[data-theme="dark"]{
  /* dark allineato al blu brand */
  --bg:#0f161e; --card:#1a232e; --ink:#e7edf4; --muted:#94a3b5; --line:#2a3643;
  --accent:#6f9be8; --accent-soft:#1c2b46;
  --brand:#8fb0ee; --yellow:#ffd84d; --yellow-soft:#3a3416;
  --green:#3fb488; --green-soft:#122a22;
  --amber:#d6a34a; --amber-soft:#33290f;
  --blue:#6f9be8; --blue-soft:#1c2b46;
  --red:#e0867a; --red-soft:#3a201d;
  --gray:#94a3b5; --gray-soft:#222d39;
  --purple:#b294e0; --purple-soft:#2a2038;
  --glass:rgba(15,22,30,.82);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.35);
}

/* ============================================================
   1 · BASE RESETS
   ============================================================ */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font-size:16px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* Disattiva l'auto-boost del testo di iOS Safari nelle colonne strette (es. griglia orari 7 colonne):
   senza questo, il font supera la dimensione dichiarata in CSS e i numeri vengono tagliati dal box. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html{overflow-x:hidden}/* niente scroll orizzontale di pagina: i blocchi larghi scorrono dentro .scrollx/.fmscroll/.dp-scroll */
/* L'header resta sticky in cima: senza riservare il suo spazio, uno scrollIntoView (auto-scroll,
   tap che scorre fino a un elemento) può far finire quell'elemento PROPRIO SOTTO l'header — coperto,
   non toccabile (osservato: righe del Lineare irraggiungibili col dito dopo lo scroll). --hh = altezza
   reale dell'header (varia: nome/indirizzo negozio possono andare a capo su schermi stretti). */
html{scroll-padding-top:var(--hh,64px)}
/* admin reserves space for the fixed tab bar; pages without <nav> keep 40px */
body{padding-bottom:40px}
body:has(nav){padding-bottom:88px;padding-bottom:calc(88px + env(safe-area-inset-bottom))}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.01em}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
/* gli input ereditano il colore testo (altrimenti in dark restano neri = invisibili) */
input,select,textarea{color:var(--ink)}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
main,.scrollx,.lin-scroll,.fmscroll,.logwrap,.dp-scroll{
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain}

/* --- corporate icon set (inline SVG sprite, classe .ic) --- */
#icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.17em;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.ic.fill{fill:currentColor;stroke:none}
/* varianti dimensione/colore */
.ic.lg{width:1.4em;height:1.4em}
.ic.sm{width:1em;height:1em}
.ic.brand{stroke:var(--brand)} .ic.green{stroke:var(--green)} .ic.amber{stroke:var(--amber)}
.ic.blue{stroke:var(--blue)} .ic.red{stroke:var(--red)} .ic.yellow{stroke:#caa400}

/* ============================================================
   2 · APP CHROME — header, nav, theme + bell, read-only banner
   ============================================================ */
header{position:sticky;top:0;z-index:20;background:var(--glass);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line);padding:14px 16px;padding-top:calc(14px + env(safe-area-inset-top))}
/* Riga sottile SOPRA il nome negozio: annulla/ripeti/opzioni (2026-07, richiesta esplicita — prima
   erano sovrapposte in alto a destra, ora tornano in flusso normale ma in una riga propria, così
   annulla/ripeti nascosti (.ro-hide) non lasciano un vuoto fisso come con position:absolute). */
.hicons-row{display:flex;justify-content:flex-end;gap:8px;margin-bottom:8px}
.hicon-sm{flex:0 0 auto;width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;color:var(--ink)}
.hicon-sm:disabled{opacity:.35}
/* Riga principale: logo+nome a sinistra, orologio grande a destra. */
.hrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-logo{height:38px;width:auto;flex:0 0 auto;border-radius:6px}
/* Rinforzo secondario alla barra Notifiche (2026-07): puntino sul logo, come il badge di un'app
   sul telefono. Solo un puntino (non un numero): il conteggio esatto sta già nella barra sotto,
   qui basta il segnale "c'è qualcosa" senza duplicare l'informazione due volte. */
.logo-wrap{position:relative;flex:0 0 auto;line-height:0}
.logo-badge{position:absolute;top:-3px;right:-3px;width:13px;height:13px;border-radius:50%;background:var(--red);border:2px solid var(--bg);display:none}
.logo-badge.on{display:block;animation:badgepop .5s var(--spring)}
@media (prefers-reduced-motion:reduce){.logo-badge.on{animation:none}}
header h1{font-size:19px;border-bottom:2px solid var(--yellow);display:inline-block;padding-bottom:1px}
.cdc{font-size:12px;color:var(--muted);margin-top:2px}
.subhead{margin-top:2px;font-size:13px;color:var(--muted)}
/* Cambio tema chiaro/scuro: azione deliberata e rara (non un poll ripetuto) — sicuro animarla ogni
   volta. Cross-fade dei colori invece dello scatto secco (classe temporanea, rimossa dopo il cambio,
   NON una transizione permanente su tutto il sito: costerebbe repaint inutili durante l'uso normale). */
.theme-transition,.theme-transition *{transition:background-color .35s var(--ease),border-color .35s var(--ease),color .25s var(--ease),box-shadow .35s var(--ease)!important}
.themebtn.spin{animation:themespin .5s var(--spring)}
@keyframes themespin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(160deg) scale(.82)}100%{transform:rotate(360deg) scale(1)}}
.themebtn{flex:0 0 auto;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--card);font-size:16px;display:grid;place-items:center}
.notif-item{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-bottom:1px solid var(--line)}
.notif-item:last-child{border-bottom:none}
.notif-item.unseen{background:var(--blue-soft)}
.notif-item .nx{flex:0 0 auto;font-size:18px}
.notif-item .nm{flex:1;font-size:14px;line-height:1.4}
.notif-item .nt{display:block;font-size:11px;color:var(--muted);margin-top:3px}
.bellbtn{position:relative}
.bell-badge{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--red);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;line-height:1}
.bellbtn.has{animation:bellpulse 2s ease-in-out infinite}
@keyframes bellpulse{0%,100%{transform:none}10%{transform:rotate(-12deg)}20%{transform:rotate(10deg)}30%{transform:rotate(-6deg)}40%{transform:none}}
/* Rimbalzo a molla sul badge SOLO quando arriva qualcosa di nuovo (non ad ogni poll) — distinto
   dallo scuotimento continuo di .has, che segnala "c'è qualcosa in sospeso" senza soprassalti ripetuti. */
.bell-badge.pop,.notif-count.pop{animation:badgepop .5s var(--spring)}
@keyframes badgepop{0%{transform:scale(1)}35%{transform:scale(1.45)}60%{transform:scale(.85)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.bell-badge.pop,.notif-count.pop{animation:none}}

main{max-width:760px;margin:0 auto;padding:16px}
.role-crew main{max-width:560px}
.view{display:none}.view.on{display:block;animation:viewin .28s var(--ease)}
@keyframes viewin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#main>*{animation:viewin .26s var(--ease)}

nav{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--glass);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid var(--line);display:flex;padding:6px 6px;padding-bottom:calc(6px + env(safe-area-inset-bottom))}
nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;color:var(--muted);font-size:11px;font-weight:600;border-radius:12px;transition:color .2s var(--ease),transform .12s var(--ease)}
nav button.on{color:var(--accent)}
nav button:active{transform:scale(.88)}
nav svg{width:23px;height:23px;transition:transform .26s var(--spring)}
nav button.on svg{transform:translateY(-1px) scale(1.08)}

.ro-banner{background:var(--brand);color:#fff;text-align:center;font-size:13px;font-weight:600;padding:7px 10px}
.am-switch{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--card);border-bottom:1px solid var(--line);font-size:15px}
.am-switch select{flex:1;min-width:0;min-height:44px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font-size:16px;font-weight:650}
.am-switch .am-lab{flex:0 0 auto;color:var(--muted);font-size:13px;font-weight:600}
.linkbtn{border:none;background:none;color:var(--accent);font-weight:650;font-size:13px;cursor:pointer;padding:6px 4px;min-height:44px}

/* ============================================================
   3 · SURFACES — cards, section heads, week bar, misc
   ============================================================ */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:12px;transition:box-shadow .22s var(--ease)}
.card.pad{padding:14px 16px}
.role-crew .card{padding:16px}
.sec{display:flex;align-items:center;gap:10px;margin:18px 2px 8px}
.sec h2{font-size:15px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:650}
.sectitle,.role-crew .sec{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:650;margin:18px 2px 8px}
.weekbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.weekbar .wk{font-weight:650;font-size:16px}
.weekbar .wsub{font-size:13px;color:var(--muted)}
.arrowbtn{width:40px;height:40px;border-radius:11px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;font-size:20px;box-shadow:var(--shadow);transition:transform .14s var(--ease),box-shadow .18s var(--ease)}
.arrowbtn:active{transform:scale(.96)}.arrowbtn:hover{box-shadow:0 2px 10px rgba(16,21,28,.12)}
.arrowbtn:disabled{opacity:.32;box-shadow:none;cursor:default}.arrowbtn:disabled:active{transform:none}
.empty,.err{text-align:center;color:var(--muted);padding:30px 16px;font-size:14px}
.err{padding:60px 20px}
.legend{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--muted);margin-top:6px}
.riep-leg{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:12px;color:var(--muted);margin:8px 2px 0}
.riep-leg span{display:inline-flex;align-items:center;gap:5px}
.riep-leg i{width:11px;height:11px;border-radius:3px;display:inline-block}
.riep-leg .rl-note{color:var(--muted);opacity:.8;font-style:italic}
/* colori ore per tipo (Riepilogo): in negozio / trasferta out / trasferta in */
.t-out{color:var(--amber)} .t-loc{color:var(--green)} .t-in{color:var(--blue)}
.legend span b{font-weight:700}
.savedot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-left:6px;vertical-align:middle;opacity:0;transition:opacity .3s var(--ease),transform .3s var(--spring)}
.savedot.show{opacity:1;transform:scale(1.25)}
.daytot{font-size:12px;color:var(--muted);text-align:right}

/* ============================================================
   4 · BUTTONS & ACTIONS
   ============================================================ */
.btn{padding:11px 16px;border-radius:11px;font-weight:650;font-size:15px;min-height:44px;display:inline-flex;align-items:center;gap:6px;justify-content:center}
.btn-in{background:var(--green);color:#fff}
.btn-out{background:var(--red);color:#fff}
.btn-ghost{background:var(--bg);border:1px solid var(--line);color:var(--ink);font-weight:600;font-size:14px;padding:10px 14px;min-height:44px}
.rowbtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.action{padding:12px 16px;border-radius:12px;font-weight:650;background:var(--accent);color:#fff;display:inline-flex;align-items:center;gap:8px;min-height:46px;justify-content:center}
.action.sec2{background:var(--card);border:1px solid var(--line);color:var(--ink)}
.action.wide{width:100%}
.action.danger{color:var(--red);border-color:#e7b0ab}
.bigbtn{flex:1;padding:18px;border-radius:14px;font-weight:750;font-size:19px;color:#fff;border:none}
.bigbtn.in{background:var(--green)}.bigbtn.out{background:var(--red)}
.btnrow{display:flex;gap:10px;margin-top:14px}
.actbtn{display:block;width:100%;margin-top:8px;padding:13px;border-radius:12px;font-weight:650;font-size:15px;background:var(--card);border:1px solid var(--line);color:var(--ink)}
.actbtn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.timb-tools{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.toolchip{display:inline-flex;align-items:center;gap:5px;padding:8px 12px;border-radius:11px;background:var(--card);border:1px solid var(--line);color:var(--ink);font-size:13px;font-weight:600;box-shadow:var(--shadow)}
.toolchip.danger{color:var(--red);border-color:var(--red-soft)}
.addseg{margin-top:2px;align-self:flex-start;font-size:13px;font-weight:600;color:var(--accent);padding:4px 0}
[data-theme="dark"] .actbtn.primary,[data-theme="dark"] .bigbtn{color:#0f161e}
/* shared press feedback */
.action,.btn,.btn-ghost,.modebtn,.chip,.addseg,.seg .t,.fp .ok,.fp .no,.bigbtn,.actbtn,.toolchip{
  transition:transform .14s var(--ease),background-color .18s var(--ease),box-shadow .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),filter .18s var(--ease)}
.action:active,.btn:active,.btn-ghost:active,.chip:active,.modebtn:active,.addseg:active,.fp .ok:active,.fp .no:active,.bigbtn:active,.actbtn:active{transform:scale(.96)}
.action:hover{filter:saturate(1.05) brightness(1.02)}
.bigbtn:active{filter:brightness(.95)}

/* ============================================================
   5 · STATUS, BADGES, AVATAR
   ============================================================ */
.avatar{flex:0 0 42px;height:42px;width:42px;border-radius:50%;display:grid;place-items:center;font-weight:650;color:#fff;font-size:16px}
.role{font-size:11px;font-weight:600;padding:2px 7px;border-radius:99px;background:var(--gray-soft);color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.role.mgr{background:var(--blue-soft);color:var(--blue)}
.status{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;margin-top:6px;padding:3px 9px;border-radius:99px}
.status .dot{width:8px;height:8px;border-radius:50%}
.st-off{background:var(--gray-soft);color:var(--gray)} .st-off .dot{background:var(--gray)}
.st-on{background:var(--green-soft);color:var(--green)} .st-on .dot{background:var(--green);animation:pulse 1.8s infinite}
.st-done{background:var(--blue-soft);color:var(--blue)} .st-done .dot{background:var(--blue)}
.st-abs{background:var(--amber-soft);color:var(--amber)} .st-abs .dot{background:var(--amber)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(14,124,90,.45)}70%{box-shadow:0 0 0 7px rgba(14,124,90,0)}100%{box-shadow:0 0 0 0 rgba(14,124,90,0)}}
/* crew app uses slightly larger status + segments (one-handed, on the floor) */
.role-crew .status{margin-top:8px;padding:4px 10px}

/* ============================================================
   6 · TIMBRATURE (admin) — employee rows + time segments
   ============================================================ */
.emp{padding:14px 16px;display:flex;gap:12px;align-items:flex-start;transition:background-color .2s var(--ease)}
.emp.rest{opacity:.62}
.emp-main{flex:1;min-width:0}
.emp-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.emp-name{font-weight:600;font-size:16px}
.plan-line{font-size:13px;color:var(--muted);margin-top:3px}
.emp-act{flex:0 0 auto;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.segs{margin-top:8px;display:flex;flex-direction:column;gap:4px}
.seg{display:flex;align-items:center;gap:8px;font-size:14px}
.seg .t{padding:2px 6px;border-radius:8px;background:var(--bg);border:1px solid var(--line);cursor:pointer}
.seg .arr{color:var(--muted)}
.seg .h{margin-left:auto;color:var(--muted);font-size:13px}
.seg .del{color:var(--red);font-size:13px;padding:2px 6px}
.seg .t.ro{cursor:default}
.seg-pending{outline:1.5px solid var(--amber);outline-offset:1px;border-radius:9px}
.seg-flag{font-size:12px;font-weight:700;color:var(--amber);display:flex;align-items:center;gap:5px}
.seg-flag.est{color:var(--muted);background:var(--bg)}
.seg-approve{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:var(--amber-soft);border:1px solid var(--amber);border-radius:10px;padding:7px 10px;margin:2px 0 4px}
.seg-approve .action{min-height:34px;padding:6px 12px;font-size:13px}
.ch-reminder{margin-top:12px;padding:11px 14px;border-radius:12px;background:var(--amber-soft);color:var(--amber);border:1px solid #e7c97a;font-weight:700;text-align:center;cursor:pointer}
.ch-note{margin:0 0 10px;padding:10px 14px;border-radius:12px;background:var(--amber-soft);color:var(--amber);font-weight:600;font-size:13px}
.role-crew .segs{margin-top:12px;gap:6px}
.role-crew .seg{gap:10px;font-size:16px}
.role-crew .seg .t{padding:4px 10px;border-radius:9px}
.role-crew .seg .h{font-size:14px}
.role-crew .seg .del{padding:4px 8px}
.datepick{margin-top:4px;border:1px solid var(--line);border-radius:9px;padding:6px 10px;font:inherit;font-size:14px;background:var(--card);color:var(--ink)}
.autobanner{background:var(--amber-soft);color:var(--amber);border:1px solid #e7c97a;border-radius:12px;padding:12px 14px;margin-bottom:12px;font-weight:600;cursor:pointer}
.vday{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--accent-soft);border:1px solid var(--accent);border-radius:12px;padding:10px 14px;margin-bottom:12px;font-weight:650;color:var(--accent)}
.vday.done{background:var(--green-soft);border-color:var(--green);color:var(--green)}
.vday .action{min-height:40px;padding:9px 14px}
.vday .vlink{background:none;border:none;color:inherit;font-weight:650;text-decoration:underline;cursor:pointer;padding:4px}
.kpibar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin:0 0 10px;padding:10px 12px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.kpi-inps{display:flex;gap:8px;flex-wrap:wrap}
.kpi-inps label{display:flex;flex-direction:column;gap:2px;font-size:10.5px;font-weight:600;color:var(--muted)}
.kpi-inps input{width:96px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font-size:16px;font-variant-numeric:tabular-nums}
.kpi-inps.locked input{opacity:.7}
.kpi-lock{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%;font-size:12px;font-weight:600;color:var(--green);background:var(--green-soft);border:1px solid #bfe3d2;border-radius:9px;padding:6px 10px;margin-bottom:6px}
.kpi-lock .action{margin-left:auto;padding:5px 10px;min-height:0;font-size:12px}
.kpi-vals{display:flex;gap:16px;flex-wrap:wrap}
.kpi{display:flex;flex-direction:column;align-items:flex-end;gap:1px;font-size:10.5px;font-weight:600;color:var(--muted)}
.kpi b{font-size:15px;color:var(--ink);font-weight:800}
.kpi b.over{color:var(--amber)} .kpi b.under{color:var(--green)}
.emp-tasks{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.emp-task{font-size:11px;font-weight:600;color:var(--accent);background:var(--accent-soft);border-radius:6px;padding:1px 7px}
.emp-task.done{color:var(--green);background:var(--green-soft);text-decoration:line-through}
.emp-task.rim{color:var(--amber);background:var(--amber-soft)}
.emp-task .et-f{font-weight:700;opacity:.85}
.reqrow{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}
.reqact{display:flex;gap:6px;flex-shrink:0}
.reqrow .ok{color:#fff;background:var(--green);border-radius:9px;padding:6px 11px;font-weight:650;font-size:13px;border:none}
.reqrow .no{color:var(--red);background:var(--red-soft);border-radius:9px;padding:6px 11px;font-weight:650;font-size:13px;border:none}
.logwrap{max-height:60vh;overflow:auto;margin-bottom:12px}
.logrow{display:flex;gap:10px;padding:8px 4px;border-bottom:1px solid var(--line);font-size:13px}
.logrow:last-child{border-bottom:none}
.logt{flex:0 0 86px;color:var(--muted)}
.log-auto{background:var(--amber-soft);border-radius:8px;color:var(--amber);font-weight:600}

/* ============================================================
   7 · TURNI — planner (griglia + lineare) & objectives
   ============================================================ */
.genbar{display:flex;gap:8px;margin-bottom:12px}
.genbtn{flex:1;padding:11px 14px;border-radius:12px;font-weight:650;font-size:14px;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px}
.genbtn.ghost{flex:0 0 auto;background:var(--card);border:1px solid var(--line);color:var(--ink)}
.genbtn:active{transform:scale(.96)}
/* Barra generatore ridisegnata: impostazioni raggruppate + unica CTA, distruttivo fuori */
.genwrap{margin-bottom:12px}
.gensetup{border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:var(--card);margin-bottom:8px}
.gensetup-lbl{font-size:12px;font-weight:600;color:var(--muted)}
.gensetup-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.setupchip{flex:1;min-width:96px;padding:9px 10px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-size:13px;font-weight:600;min-height:42px}
.setupchip:active{transform:scale(.96)}
.gencta{width:100%;font-size:16px;min-height:50px}
/* Azione alternativa al CTA (es. "Racconta gli orari"): stessa geometria, gerarchia secondaria (ghost) e respiro dal primario */
.genbtn.gensec{width:100%;margin-top:8px;font-size:15px;min-height:46px;background:var(--card);border:1px solid var(--line);color:var(--accent)}
/* Orologio "timbracartellino": pannello scuro A TUTTA LARGHEZZA in testa alla card (stile lock-screen
   + tabellone Solari): data dentro il pannello, cifre enormi responsive, secondi gialli a foglia */
.fclock{display:flex;flex-direction:column;align-items:center;gap:10px;margin:-16px -16px 14px;padding:20px 10px 18px;background:linear-gradient(180deg,#1d47ab,#163a93);border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0}
/* La data è larga ESATTAMENTE quanto la riga delle tessere: parole giustificate da bordo a bordo */
.fc-in{display:inline-flex;flex-direction:column;gap:10px;max-width:100%}
.fc-date{align-self:stretch;text-align:justify;text-align-last:justify;-moz-text-align-last:justify;font-size:12.5px;color:rgba(255,255,255,.75);text-transform:uppercase;font-weight:700;letter-spacing:.08em;padding:0 2px}
.fc-row{display:flex;align-items:center;justify-content:center;gap:8px}
.ftile{position:relative;display:inline-block;flex:0 1 auto;min-width:2.05ch;padding:12px 10px;text-align:center;background:rgba(255,255,255,.12);color:#fff;border-radius:14px;font-variant-numeric:tabular-nums;font-weight:800;font-size:clamp(46px,16.5vw,66px);line-height:1;letter-spacing:.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;box-shadow:inset 0 -1px 0 rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.06);backface-visibility:hidden}
.ftile::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:rgba(10,26,66,.45)}
.ftile.fsec{font-size:clamp(24px,8.5vw,34px);padding:10px 8px;background:#ffd200;color:#163a93;border-radius:11px}
.ftile.fsec::after{background:rgba(22,58,147,.25)}
.fc-sep{font-size:clamp(34px,12vw,50px);font-weight:800;color:rgba(255,255,255,.5);margin-top:-6px}
.ftile.flap{animation:fcflap .22s ease-in-out}
@keyframes fcflap{0%{transform:perspective(500px) rotateX(0)}50%{transform:perspective(500px) rotateX(-88deg)}100%{transform:perspective(500px) rotateX(0)}}
@keyframes ledblink{0%,49%{opacity:1}50%,100%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.ftile.flap{animation:none}}
/* Orologio GRANDE accanto al logo (2026-07, richiesta esplicita: "a destra mettiamo l'orologio in
   grande con sotto la data" — sostituisce la barra .mini a tutta larghezza). Pillola scura propria
   (non tocca i bordi dell'header: qui condivide la riga col blocco brand, non è più da sola). */
.fclock.big{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;
  background:linear-gradient(180deg,#1d47ab,#163a93);border-radius:12px;padding:6px 12px}
.fclock.big .fc-row{display:flex;align-items:center;gap:2px}
.fclock.big .ftile{background:none;box-shadow:none;padding:0;min-width:auto;border-radius:0;
  font-size:26px;letter-spacing:.02em;color:#ffd200;text-shadow:0 0 5px rgba(255,210,0,.65),0 0 11px rgba(255,180,0,.35)}
.fclock.big .ftile::after{display:none}
.fclock.big .ftile.fsec{font-size:13px;padding:0 0 0 2px;opacity:.8;align-self:flex-end;margin-bottom:3px}
.fclock.big .fc-sep{font-size:22px;margin-top:0;color:#ffd200;text-shadow:0 0 5px rgba(255,210,0,.65);animation:ledblink 2s step-end infinite}
.fclock.big .fc-date{font-size:9.5px;color:rgba(255,255,255,.8);text-transform:uppercase;font-weight:700;letter-spacing:.05em;text-align:center;text-align-last:center;-moz-text-align-last:center;white-space:nowrap}
/* Barra "Notifiche", sempre visibile (2026-07, richiesta esplicita), al posto dove prima stava
   l'orologio compatto — stesso ruolo/click di quello che era il pulsante campanella (apre lo stesso
   popover, stessa "segna tutto come letto"), ma a tutta larghezza e sempre presente col conteggio,
   non solo un'icona con puntino. Lampeggia (via .has) solo quando c'è qualcosa da leggere: un colore
   fisso "acceso" anche a 0 sarebbe un falso allarme permanente. */
.notif-bar{display:flex;align-items:center;justify-content:center;gap:8px;margin:10px -16px -14px;padding:9px 16px;
  background:var(--gray-soft);color:var(--muted);font-weight:700;font-size:13px;cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease)}
.notif-bar .notif-count{background:var(--card);color:var(--ink);border-radius:8px;padding:1px 8px;font-weight:800;font-variant-numeric:tabular-nums}
.notif-bar.has{background:var(--red);color:#fff;animation:notifpulse 1.8s ease-in-out infinite}
.notif-bar.has .notif-count{background:rgba(255,255,255,.28);color:#fff}
@keyframes notifpulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18)}}
/* Griglia squadra (dip.html): riusa il Lineare; nome+orario su due righe, riga "io" evidenziata */
.lin-name.tg-name{flex:0 0 96px;min-width:96px;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;padding:3px 6px}
.tg-name .tg-n{font-weight:650;font-size:12px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tg-io{font-size:9px;font-weight:800;color:#fff;background:var(--accent);border-radius:5px;padding:1px 4px;vertical-align:1px}
.tg-hrs{font-size:9.5px;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:-.02em;max-width:100%;line-height:1.25}
.tg-me .lin-name{background:var(--accent-soft)}
.lin-c.tg-c{cursor:default;height:26px}
.tg-none{padding:10px 12px;font-size:12.5px;color:var(--muted)}
/* Striscia "Adesso" in Timbrature: stato del negozio a colpo d'occhio */
.now-strip{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin-bottom:10px;display:flex;flex-direction:column;gap:5px}
.now-line{font-size:13.5px;display:flex;align-items:center;gap:6px;color:var(--ink);min-width:0}
.now-line b{font-weight:650}
.now-line.g .ic{color:var(--green)}
.now-line.r{color:#c62828;font-weight:600}
[data-theme="dark"] .now-line.r{color:#ff6b60}
.now-line.b .ic{color:var(--accent)}
.now-line.m{color:var(--muted)}
/* Righe sottili (assenti / non previsti) in Timbrature */
.emp-slim{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px 12px;margin-bottom:8px;font:inherit;color:var(--ink);cursor:pointer}
.emp-slim .avatar{width:28px;height:28px;font-size:13px;border-radius:9px;display:grid;place-items:center;color:#fff;font-weight:700}
.emp-slim .es-n{font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.emp-slim .es-l{font-size:12.5px;color:var(--muted)}
.emp-slim.abs .es-l{color:var(--amber);font-weight:600}
.emp-slim .ic{color:var(--muted)}
.nudge-x{margin-left:auto;background:none;border:0;color:inherit;font-size:14px;padding:2px 6px;cursor:pointer}
/* Console god: righe compatte, dot di stato, chips riepilogo (progressive disclosure: azioni nello sheet) */
.godwrap{position:fixed;inset:0;overflow:auto;background:var(--bg);z-index:80;padding:18px 16px calc(40px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
.godwrap .god-inner{max-width:620px;margin:0 auto}
.god-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:12px 13px;border:1px solid var(--line);border-radius:14px;background:var(--card);margin-bottom:8px;font:inherit;color:var(--ink);cursor:pointer}
.god-row:active{transform:scale(.985)}
.god-dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.god-dot.g{background:var(--green,#34c759)}
.god-dot.a{background:var(--amber,#ff9f0a)}
.god-dot.x{background:#c7c7cc}
.god-main{flex:1;min-width:0}
.god-main .tm-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.god-chips{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 12px}
.god-chip{font-size:12.5px;font-weight:650;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 11px}
.god-chip b{font-weight:800}
/* Finestra consegna (+4h) nel Lineare: banda grigio chiaro sotto le celle + tacca nell'intestazione ore */
.lin-c.dlv:not(.on):not(.blk){background:rgba(120,120,128,.14)}
.lin-h.dlv{box-shadow:inset 0 -3px 0 rgba(120,120,128,.5)}
.lin-dlv-tag{font-size:11px;font-weight:650;color:var(--muted);background:rgba(120,120,128,.14);border-radius:999px;padding:2px 8px;display:inline-flex;align-items:center;gap:4px;vertical-align:middle}
/* Riga CTA compatta: Genera (primario) e Racconta (secondario) affiancati */
.genrow{display:flex;gap:8px}
.genrow .gencta{flex:1.7;width:auto}
.genrow .gensec{flex:1;width:auto;margin-top:0;font-size:14px;min-height:50px}
.genwrap .gensetup-chips{margin:0 0 8px}
/* Griglia 2 colonne per gruppi di azioni: il primo .wide occupa tutta la riga */
.rowbtns.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rowbtns.grid2 .wide{grid-column:1/-1}
.dangerzone{margin-top:18px;padding-top:12px;border-top:1px dashed var(--line)}
.danger-btn{background:var(--card);border:1px solid rgba(180,35,24,.4);color:#b42318}
.genmode{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.genmode-opt{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;cursor:pointer}
.genmode-opt small{color:var(--muted)}
.ord-list{display:flex;flex-direction:column;gap:8px}
.ord-row{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--card)}
.ord-top{display:flex;align-items:center;gap:6px;font-size:12px;flex-wrap:wrap}
.ord-on{flex:1;min-width:120px;display:flex;align-items:center;gap:6px}
.ord-top input[type=time]{font-size:13px;padding:3px 5px;border:1px solid var(--line);border-radius:7px;background:var(--bg)}
.ord-top input[type=number]{width:54px;font-size:13px;padding:3px 5px;border:1px solid var(--line);border-radius:7px;background:var(--bg)}
.ord-days{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.ord-day{display:flex;align-items:center;gap:3px;font-size:12px;color:var(--muted)}
.gen-caps{margin-top:10px;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.gen-caps summary{font-size:13px;font-weight:600;cursor:pointer}
.caps-list{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.cap-row{display:flex;align-items:center;gap:8px;font-size:13px}
.cap-name{flex:1}
.cap-h{width:60px;padding:4px 6px;border:1px solid var(--line);border-radius:7px;background:var(--bg)}
.cap-none{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--muted)}
.te-head.gen-in,.ls-item.gen-in,.lin-row.gen-in .lin-name{background:rgba(180,96,26,.10)}
.loan-cta{margin-left:auto;font-size:12px;font-weight:600;padding:6px 11px;border-radius:9px;border:1px solid rgba(180,96,26,.45);background:var(--card);color:#b4601a;min-height:34px}
/* Guardia di sicurezza: colore dedicato (viola) per distinguerla a colpo d'occhio dal resto della squadra. */
.te-head.guard-row,.ls-item.guard-row,.lin-row.guard-row .lin-name{background:var(--purple-soft)}
.te-head.guard-row .guard-tag,.lin-name .guard-tag{color:var(--purple);font-weight:700;font-size:11px;margin-left:4px}
.te-cell.guard-work{background:var(--purple-soft);border-color:var(--purple)}
.te-cell.guard-work .tm{background:var(--purple);color:#fff}
.te-cell.guard-work .tm i{color:#f2e9f8}
.lin-c.on.guard{background:var(--purple);box-shadow:inset 0 0 0 1.5px var(--purple)}
.loan-cta.sm{padding:3px 8px;min-height:0}
.loan-cta:active{transform:scale(.96)}
.loan-shifts{margin:6px 0 12px;padding-left:18px;font-size:13px;color:var(--ink);max-height:180px;overflow:auto}
.loan-shifts li{margin:2px 0}
.cons-list{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.cons-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px}
.cons-row span{flex:1;font-weight:600}
.cons-row input[type=time]{padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink)}
.straord-card{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:0 0 12px;background:var(--card)}
.straord-q{font-weight:650;margin-bottom:6px}
.straord-opt{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:15px}
.straord-opt input{width:18px;height:18px}
.modebar{display:flex;gap:6px;background:var(--gray-soft);padding:4px;border-radius:11px;margin-bottom:12px}
.modebtn{flex:1;padding:9px;border-radius:8px;font-weight:600;font-size:14px;color:var(--muted)}
.modebtn.on{background:#fff;color:var(--ink);box-shadow:var(--shadow)}
[data-theme="dark"] .modebtn.on{background:var(--card)}
.obj-card{margin-bottom:12px;padding:12px 14px}
.obj-card summary{font-weight:600;font-size:14px;cursor:pointer}
.obj-hint{color:var(--muted);font-weight:400;font-size:12px}
.ora-list{display:flex;flex-direction:column;gap:10px}
.ora-row{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--card)}
.ora-chk{display:flex;align-items:center;gap:8px;font-size:15px}
.ora-fields{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;font-size:12px;color:var(--muted)}
.ora-fields input[type=time]{font-size:14px;color:var(--ink);padding:4px 6px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.ora-fields span{margin-left:4px}
.ora-fields.off{opacity:.35;pointer-events:none}
.ora-head{display:flex;align-items:center;gap:12px}
.ora-chk.small{font-size:12px;color:var(--muted)}
.ora-copy{margin-left:auto;font-size:12px;padding:4px 8px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--accent)}
.ora-copy:active{transform:scale(.96)}
.ora-pub2grp{display:none;align-items:center;gap:6px}
.ora-row.split .ora-pub2grp{display:inline-flex}
.ora-row.split .ora-publbl::after{content:' (matt.)';color:var(--muted)}
#genOverlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);backdrop-filter:saturate(120%) blur(4px);-webkit-backdrop-filter:saturate(120%) blur(4px)}
.gen-card{background:var(--card);border-radius:20px;padding:26px 22px;width:min(360px,86vw);box-shadow:0 18px 50px rgba(0,0,0,.3);text-align:center}
.gen-phrase{font-size:18px;font-weight:700;color:var(--ink);min-height:26px}
.gen-bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin:16px 0 10px}
.gen-bar>span{display:block;height:100%;width:40%;border-radius:99px;background:linear-gradient(90deg,var(--accent),#5b8def);animation:genslide 1.3s ease-in-out infinite}
@keyframes genslide{0%{margin-left:-40%}50%{margin-left:60%}100%{margin-left:100%}}
.gen-sub{font-size:12px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.gen-bar>span{animation:none;width:100%}}
.lav-h{margin:18px 0 4px;font-size:14px;font-weight:700}
.lav-grid{display:flex;gap:10px;flex-wrap:wrap}
.lav-grid .field{flex:1;min-width:140px}
.lav-grid .field input{width:70px}
.lav-reps{display:flex;flex-direction:column;gap:6px}
.lav-rep{display:flex;align-items:center;gap:8px;font-size:13px}
.lav-rep span{flex:1}
.lav-rep input{width:64px}
.lav-days{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.lav-day{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--muted)}
.fab-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:10px 0;font-size:13px}
.fab-brush{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);font-weight:700}
.fab-brush.on{outline:2px solid var(--accent);outline-offset:1px}
.fab-act{margin-left:4px;font-size:12px;padding:5px 9px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--accent)}
.fab-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:10px;padding:4px;touch-action:pan-x pan-y}
.fab-wrap.painting{touch-action:none}
.fab-act.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.ext-head td{background:rgba(180,96,26,.08);font-weight:600;font-size:12px;color:#b4601a;padding-top:8px}
.ext-row td{color:var(--muted);font-style:italic}
.ext-tag{font-size:10px;font-weight:700;font-style:normal;background:rgba(180,96,26,.14);color:#b4601a;padding:1px 6px;border-radius:6px;margin-left:4px}
.riepnote-card{margin-bottom:12px}
.riepnote-card summary{font-weight:600;font-size:14px;cursor:pointer}
.riepnote-list{margin:8px 0 0;padding-left:20px;font-size:13px;line-height:1.5}
.riepnote-ev{margin-top:10px;padding-top:8px;border-top:1px solid var(--line);font-size:13px}
.riepnote-add{display:flex;flex-direction:column;gap:4px;margin-top:10px;font-size:12px;color:var(--muted)}
.riepnote-add input{padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--bg);font-size:14px;color:var(--ink)}
.inc-tbl{margin-top:0}
.inc-in{width:62px;padding:4px 6px;border:1px solid var(--line);border-radius:7px;background:var(--bg);font-size:13px;color:var(--ink);text-align:right}
.inc-src{display:inline-block;margin-left:3px;font-size:9px;font-weight:700;color:var(--muted);vertical-align:top}
.inc-pend{margin-bottom:12px;border:1px solid rgba(26,138,90,.35)}
.inc-pend-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;font-size:13px}
.inc-pend-row .ipr-d{flex:1;min-width:140px}
.inc-pend-row .action{padding:6px 12px;min-height:36px}
.action.sec3{background:var(--ok,#1a8a5a);color:#fff}
.fab-row{display:flex;gap:1px}
.fab-daylbl{flex:0 0 34px;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.fab-h{flex:0 0 18px;font-size:9px;text-align:center;color:var(--muted)}
.fab-c{flex:0 0 18px;height:24px;display:flex;align-items:center;justify-content:center;font-size:10px;border-radius:3px;cursor:pointer;user-select:none;border:1px solid var(--line)}
.fab-head .fab-c{cursor:default}
.obj-row{display:flex;align-items:center;gap:8px;margin-top:8px}
.obj-row label{flex:0 0 38px;font-size:12px;color:var(--muted);font-weight:600}
.obj-row input{flex:1;padding:8px 10px;border:1px solid var(--line);border-radius:9px;font-size:16px;background:var(--bg)}
.te-emp{padding:12px 14px;border-bottom:1px solid var(--line)}
.te-emp:last-child{border-bottom:none}
.te-head{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-weight:600;min-width:0}
.te-head .cohrs{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap}
.reqmerge{margin-top:6px}
.reqmerge select{width:100%;padding:8px;border:1px solid var(--line);border-radius:9px;font-size:16px;background:var(--bg);color:var(--ink)}
html,body{overscroll-behavior-y:contain}
.ptr{position:fixed;top:calc(10px + env(safe-area-inset-top));left:50%;margin-left:-16px;width:32px;height:32px;border-radius:50%;background:var(--card);box-shadow:0 3px 12px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--muted);opacity:0;transition:opacity .2s var(--ease,ease);z-index:9000;pointer-events:none}
.ptr .pi{display:block;line-height:1}
.ptr.spin{opacity:1!important}
.ptr.spin .pi{animation:ptrspin .7s linear infinite}
@keyframes ptrspin{to{transform:rotate(360deg)}}
.yearfilter{display:flex;gap:8px;margin:0 0 10px}
.yearfilter .yf{flex:1;padding:8px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);font-weight:700;font-size:14px}
.yearfilter .yf.on{background:var(--accent,#0e7c5a);color:#fff;border-color:transparent}
.yeartoggle{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 12px}
.yeartoggle .yt-y{font-size:20px;font-weight:800;min-width:72px;text-align:center;font-variant-numeric:tabular-nums}
.yeartoggle .yt-arrow{width:40px;height:40px;border-radius:11px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:22px;line-height:1;display:grid;place-items:center;box-shadow:var(--shadow)}
.yeartoggle .yt-arrow:disabled{opacity:.35}
.pubbar{margin:10px 0}
.pubbar .pub{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--card);display:flex;flex-direction:column;gap:8px}
.pubbar .pub>span{font-size:13px;color:var(--muted);font-weight:600}
.pubbar .pub.on{background:var(--green-soft);border-color:#bfe3d2}
.pubbar .pub.on>span{color:var(--green)}
.te-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;margin-top:10px}
.te-day{text-align:center;min-width:0;display:flex;flex-direction:column}
.te-day .dl{font-size:10px;color:var(--muted);text-transform:uppercase;margin-bottom:4px;line-height:1.15}
.te-day .dl .dnum{display:block;font-size:11px;font-weight:700;color:var(--ink);text-transform:none;letter-spacing:-.01em}
.te-cell{border:1px solid var(--line);border-radius:10px;padding:7px 1px;min-height:50px;flex:1;background:var(--bg);width:100%;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;overflow:hidden;text-align:center;transition:background-color .12s var(--ease),box-shadow .12s var(--ease)}
.te-cell .tm,.te-cell .cd,.te-cell .trbadge{max-width:100%}
.te-cell .empty-d{color:var(--muted);font-size:15px}
.te-cell .tm{display:block;width:fit-content;max-width:100%;margin:1px auto;background:var(--green-soft);border-radius:7px;padding:2px 3px;font-variant-numeric:tabular-nums;font-weight:700;font-size:11px;letter-spacing:-.03em;line-height:1.2;color:var(--green)}
.te-cell .tm i{display:block;font-style:normal;font-weight:600;font-size:10px;letter-spacing:-.03em;color:#3a8d6b}
.te-cell .cd{font-weight:800;font-size:15px;letter-spacing:.02em}
.te-cell.code-R{background:var(--gray-soft)} .te-cell.code-R .cd{color:var(--gray)}
.te-cell.code-F{background:var(--blue-soft)} .te-cell.code-F .cd{color:var(--blue)}
.te-cell.code-M{background:var(--red-soft)} .te-cell.code-M .cd{color:var(--red)}
.te-cell.code-P{background:var(--amber-soft)} .te-cell.code-P .cd{color:var(--amber)}
.te-cell.code-V{background:var(--accent-soft)} .te-cell.code-V .cd{color:var(--accent)}
.te-cell.work{background:var(--card);border-color:#bfe3d2}
.te-cell.work.tr{background:var(--card);border-color:#e7c97a}
.te-cell.work.tr .tm{color:var(--amber)} .te-cell.work.tr .tm i{color:#b07d12}
.te-cell.work.tr-in{background:var(--card);border-color:#eab8b3}
.te-cell.work.tr-in .tm{color:var(--red)} .te-cell.work.tr-in .tm i{color:#8a2018}
.te-cell .trbadge{display:block;font-size:8.5px;font-weight:700;color:var(--amber);margin-top:1px;line-height:1.1}
.te-cell .trbadge.in{color:var(--red)}
/* trasferta PER FASCIA: pillola colorata sul singolo segmento orario */
.te-cell .tm.tr{background:var(--amber-soft);border-radius:7px;padding:2px 6px}
.te-cell .tm.tr,.te-cell .tm.tr i{color:var(--amber)}
.te-cell .tm.tr-in{background:var(--red-soft);border-radius:7px;padding:2px 6px}
.te-cell .tm.tr-in,.te-cell .tm.tr-in i{color:var(--red)}
.te-cell:active{transform:scale(.97)}
.trsw{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.trsw input{width:20px;height:20px}
.lin-summary{position:sticky;top:var(--hh,64px);z-index:6;background:var(--bg);display:flex;flex-wrap:wrap;gap:6px;padding:8px 0 10px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.ls-item{display:flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:6px 10px;font-size:12px;box-shadow:var(--shadow)}
.ls-n{font-weight:650}.ls-h{color:var(--muted)}
.ls-d{font-weight:800;padding:1px 6px;border-radius:7px}
.ls-d.over{color:var(--amber);background:var(--amber-soft)}
.ls-d.under{color:var(--red);background:var(--red-soft)}
.ls-d.ok{color:var(--green);background:var(--green-soft)}
.lin-day-block{margin-bottom:16px}
.lin-day-title{font-size:14px;font-weight:650;margin:0 0 6px 2px}
.lin-day-title span{color:var(--muted);font-weight:400;font-size:13px}
/* Squadra (dipendente): giorno di oggi evidenziato, l'app apre già scrollata lì. */
/* Rosso FISSO (non legato al tema): in dark mode --accent diventa un blu chiaro tenue e sparisce —
   qui serve un colore che esalti sempre, uguale in chiaro/scuro. Marca l'INTERA riga del giorno. */
.tg-today{scroll-margin:14px;background:rgba(255,59,48,.12);border-left:4px solid #ff3b30;border-radius:10px;padding:8px 6px 2px 9px;margin-left:-9px;margin-right:-6px}
.tg-todaytag{background:#ff3b30;color:#fff;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:6px;letter-spacing:.03em;vertical-align:middle;margin-right:2px}
.lin-grid{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}
.lin-row{display:flex;align-items:stretch;border-bottom:1px solid var(--line)}
.lin-row:last-child{border-bottom:none}
.lin-name{flex:0 0 100px;min-width:100px;background:var(--card);border-right:1px solid var(--line);font-size:12px;font-weight:600;text-align:left;padding:0 6px;display:flex;align-items:center;gap:4px;overflow:hidden}
/* In modifica compare anche il selettore codice (R/F/M/P/V) nella stessa colonna: senza più
   spazio il nome si schiacciava fino a una sola lettera ("B", "M"…), illeggibile per capire
   chi si sta modificando. Colonna più larga SOLO in modalità modifica. */
#turniEditor.editing .lin-name{flex-basis:150px;min-width:150px}
/* Colonna NOME e colonna ORE affiancate (non impilate): il nome tronca con l'ellissi se serve,
   ma le ore hanno SEMPRE la loro larghezza riservata — non vengono mai schiacciate via. */
.lin-nm{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.lin-name .lh{flex:0 0 auto;margin-left:0;font-size:11px;color:var(--muted);font-weight:600;white-space:nowrap}
.lin-head{height:20px}.lin-head .lin-name{background:var(--bg)}
.lin-cells{display:flex;flex:1;min-width:0;touch-action:pan-y}/* default: scorri la pagina; si dipinge solo in modalità modifica */
#turniEditor.editing .lin-cells{touch-action:none}
.lin-editbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}
/* pulsante modifica galleggiante, sempre a portata di mano mentre si scorre */
.editfab{position:fixed;right:16px;bottom:calc(100px + env(safe-area-inset-bottom));z-index:35;height:50px;padding:0 20px;border-radius:25px;background:var(--accent);color:#fff;font-weight:750;font-size:15px;box-shadow:0 8px 22px rgba(0,0,0,.28);display:flex;align-items:center;gap:8px}
.editfab.on{background:var(--green)}
.editfab:active{transform:scale(.95)}
[data-theme="dark"] .editfab{color:#0f161e}
.modebtn.linedit{border:1px solid var(--accent);color:var(--accent);background:var(--accent-soft)}
.modebtn.linedit.on{background:var(--accent);color:#fff;border-color:var(--accent)}
[data-theme="dark"] .modebtn.linedit.on{color:#0f161e}
.lin-edithint{font-size:12px;color:var(--muted);flex:1;min-width:140px}
#turniEditor.editing .lin-c{cursor:cell}
#turniEditor.editing .lin-grid{box-shadow:0 0 0 2px var(--accent-soft)}
#turniEditor:not(.editing) .lin-c{cursor:default}
.lin-c{flex:1;min-width:0;height:30px;border-right:1px solid var(--line);cursor:pointer;transition:background-color .12s var(--ease),box-shadow .12s var(--ease)}
.lin-c:last-child{border-right:none}
.lin-c.hr{border-left:1px solid #cfd5dc}
.lin-c.on{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent)}
.lin-c.on.tr{background:var(--amber-soft);box-shadow:inset 0 0 0 1.5px var(--amber)}
.lin-c.on.tr-in{background:var(--blue-soft);box-shadow:inset 0 0 0 1.5px var(--blue)}
.lin-c.blk{background:repeating-linear-gradient(45deg,#fde2e0,#fde2e0 3px,#fff 3px,#fff 6px)}
.lin-c.on.blk{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--red)}
/* EFFETTIVO (timbrature reali) nelle tabelle turno: verde PIENO = realtà, distinto dal previsto (tenue/contornato).
   Griglia: cella verde piena + pallino; Lineare: barre verdi piene. Il previsto resta il riferimento in modifica. */
.te-cell.work.eff{border-color:var(--green);background:var(--green-soft)}
.te-cell.work.eff .tm{background:var(--green);color:#fff}
.te-cell.work.eff .tm i{color:#eafaf2}
.te-cell .eff-dot{width:6px;height:6px;border-radius:50%;background:var(--green);display:block;margin:0 auto 1px}
.te-cell .tm .open{color:var(--yellow);font-weight:700;background:var(--brand);border-radius:5px;padding:0 3px}
.te-cell .tm.pend{outline:1.5px dashed var(--amber);outline-offset:1px}
.te-cell .prev-hint{display:block;font-size:8.5px;color:var(--muted);font-weight:600;margin-top:1px;letter-spacing:-.02em;line-height:1.15}
.te-head .hdone{color:var(--green)}
.lin-c.on.eff{background:var(--green);box-shadow:inset 0 0 0 1.5px var(--green)}
.lin-name .lh.eff{color:var(--green);font-weight:700}
.lin-legend{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);font-weight:600;white-space:nowrap}
.lin-legend .lg{width:12px;height:12px;border-radius:3px;display:inline-block;vertical-align:middle}
.lin-legend .lg-prev{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent)}
.lin-legend .lg-eff{background:var(--green);margin-left:8px}
/* riga Lineare: nome (bottone) + selettore codice assenza */
/* Colonna nome + colonna ore affiancate dentro il pulsante (HMI: due colonne separate, non
   testo impilato) — la larghezza delle ore è riservata (.lh flex:0 0 auto) e non si schiaccia
   mai via, il nome tronca con l'ellissi se serve più spazio. */
.lin-nbtn{flex:1;min-width:0;background:none;border:none;font:inherit;font-weight:600;color:var(--ink);text-align:left;padding:0;display:flex;flex-direction:row;align-items:center;gap:4px;overflow:hidden;cursor:pointer}
.lin-code{flex:0 0 auto;font-size:10px;line-height:1;border:1px solid var(--line);border-radius:5px;background:var(--bg);color:var(--muted);padding:1px;max-width:36px}
#turniEditor:not(.editing) .lin-code{display:none}
.lin-cells.lin-codespan{align-items:center;justify-content:center;font-weight:800;font-size:12px;letter-spacing:.04em;text-transform:uppercase}
/* riga intera tinta quando c'è un codice o è "staccato dal piano" */
.lin-row.code-R{background:var(--gray-soft)} .lin-row.code-R .lin-codespan{color:var(--gray)}
.lin-row.code-F{background:var(--blue-soft)} .lin-row.code-F .lin-codespan{color:var(--blue)}
.lin-row.code-M{background:var(--red-soft)} .lin-row.code-M .lin-codespan{color:var(--red)}
.lin-row.code-P{background:var(--amber-soft)} .lin-row.code-P .lin-codespan{color:var(--amber)}
.lin-row.code-V{background:var(--accent-soft)} .lin-row.code-V .lin-codespan{color:var(--accent)}
.lin-row.lin-staccato{background:var(--amber-soft)} .lin-row.lin-staccato .lin-codespan{color:var(--amber)}
/* Squadra dipendente: chi non ha turno né codice assenza oggi non sparisce più (prima "perché non
   vedo X?"), riga minimale e defilata invece della barra oraria colorata delle colleghe in turno. */
.lin-row.tg-off{opacity:.62} .lin-row.tg-off .lin-codespan{color:var(--muted);font-weight:600;font-size:11.5px;letter-spacing:0;text-transform:none}
.lin-row.code-R .lin-name,.lin-row.code-F .lin-name,.lin-row.code-M .lin-name,.lin-row.code-P .lin-name,.lin-row.code-V .lin-name,.lin-row.lin-staccato .lin-name{background:transparent}
/* riga compiti (mansioni con fascia) sotto gli orari */
/* Riga trasferta: destinazione/provenienza su riga propria a tutta larghezza, mai incollata alla
   stretta colonna ore (prima "Kezia → 449 Fratti" ci finiva tutto assieme e il nome si troncava). */
.lin-trasfrow{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:3px 6px;border-bottom:1px solid var(--line);background:var(--bg)}
.lin-taskrow{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:3px 6px;border-bottom:1px solid var(--line);background:var(--bg)}
.lin-task{font-size:10.5px;font-weight:600;color:var(--accent);background:var(--accent-soft);border-radius:6px;padding:1px 6px}
.lin-task.ed{cursor:pointer}
.lin-addtask{font-size:10.5px;font-weight:650;color:var(--muted);background:none;border:1px dashed var(--line);border-radius:6px;padding:1px 6px;cursor:pointer}
.lin-h{flex:1;min-width:0;font-size:9px;color:var(--muted);position:relative;text-align:center}
.lin-h.hr{border-left:1px solid #cfd5dc}
.lin-h span{position:absolute;left:0;top:5px;transform:translateX(-50%);white-space:nowrap}

/* ============================================================
   8 · TABLES — riepilogo + registro
   ============================================================ */
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th,.tbl td{padding:8px 6px;text-align:right;border-bottom:1px solid var(--line)}
.tbl th{font-size:11px;color:var(--muted);text-transform:uppercase;font-weight:650;letter-spacing:.03em}
.tbl td.name,.tbl th.name{text-align:left;font-weight:600;position:sticky;left:0;background:var(--card)}
.tbl tr.tot td{font-weight:700;border-top:2px solid var(--line)}
.diff-pos{color:var(--green)} .diff-neg{color:var(--red)}
.reg{border-collapse:collapse;font-size:12px;min-width:880px}
.reg th,.reg td{border:1px solid var(--line);padding:0;text-align:center;white-space:nowrap}
.reg thead th{background:var(--gray-soft);font-size:9.5px;text-transform:uppercase;font-weight:700;color:var(--muted);padding:5px 6px;line-height:1.15}
.reg thead .grp{background:var(--blue-soft);color:var(--blue);font-size:9px;letter-spacing:.03em}
.reg td.wk{font-weight:700;padding:6px 8px;background:var(--card);position:sticky;left:0;z-index:1}
.reg td.auto{background:var(--accent-soft);font-weight:700;color:var(--ink);padding:6px 8px;font-variant-numeric:tabular-nums}
.reg td.straor{background:var(--amber-soft);color:var(--amber);font-weight:800}
.reg td.man input{width:54px;border:none;background:transparent;text-align:center;padding:6px 2px;font:inherit;font-variant-numeric:tabular-nums}
.reg td.man input:focus{outline:2px solid var(--accent);outline-offset:-2px;background:var(--card);border-radius:4px}
.reg td.man.autorol{background:var(--accent-soft)}
.reg td.man.autorol input::placeholder{color:var(--accent);opacity:1;font-weight:700}
.reg td.valcell{padding:5px 7px;white-space:normal}
.reg td.wkval.done{background:var(--green-soft);color:var(--green)}
.vbtn{padding:6px 11px;border-radius:8px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;white-space:nowrap}
.vbtn.done{background:var(--green-soft);color:var(--green);border:1px solid var(--green)}
.vdrift{font-size:10px;color:var(--amber);margin-top:3px;max-width:130px;line-height:1.25}
.vlink{color:var(--accent);font-weight:700;text-decoration:underline;font-size:10px}

/* ============================================================
   9 · FERIE — pending rows + year calendar
   ============================================================ */
.fp{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);font-size:14px}
.fp:last-child{border-bottom:none}
.fp-main{flex:1}.fp-main .sub{font-size:12px;color:var(--muted)}
.fp .ok{color:#fff;background:var(--green);border-radius:9px;padding:7px 12px;font-weight:650;font-size:13px}
.fp .no{color:var(--red);background:var(--red-soft);border-radius:9px;padding:7px 12px;font-weight:650;font-size:13px}
.fmonth{margin-bottom:14px}
.fmtitle{font-weight:700;font-size:14px;margin:0 0 6px 2px;text-transform:capitalize}
.fmscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.fcal{border-collapse:collapse;font-size:11px}
.fcal th,.fcal td{border:1px solid var(--line);text-align:center;min-width:23px;width:23px;height:27px;padding:0}
.fcal th .wl{display:block;font-size:8px;color:var(--muted);font-weight:500}
.fcal th.wkh{font-size:8.5px;font-weight:800;color:var(--accent);background:var(--accent-soft);letter-spacing:.02em;height:16px}
.fcal th.we,.fcal td.we{background:var(--bg)}
.fcal td.nm,.fcal th.nm{position:sticky;left:0;background:var(--card);text-align:left;padding:0 8px;min-width:80px;width:80px;font-weight:600;white-space:nowrap;z-index:1}
.fcal td.c{cursor:pointer}
.fcal td.app{background:var(--green);color:#fff;font-weight:800}
.fcal td.req{background:var(--amber);color:#fff;font-weight:800}
.fcal td.tot,.fcal th.tot{font-weight:700;background:var(--gray-soft);min-width:32px}

/* ============================================================
   10 · TEAM — roster rows
   ============================================================ */
.tm{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
.tm:last-child{border-bottom:none}
.tm-main{flex:1}.tm-sub{font-size:13px;color:var(--muted)}

/* ============================================================
   11 · SHEET / MODAL + form fields + chips
   ============================================================ */
.scrim{position:fixed;inset:0;background:rgba(16,21,28,.4);z-index:90;display:none;align-items:flex-end;justify-content:center;transition:background .25s var(--ease)}
.scrim.on{display:flex}
.sheet{background:var(--card);width:100%;max-width:560px;border-radius:18px 18px 0 0;padding:18px 18px calc(20px + env(safe-area-inset-bottom));animation:sheetup .32s var(--spring);max-height:88vh;overflow:auto}
/* Popover della campanella: nasce dal pulsante bell (alto a destra), non un foglio da basso schermo. */
.bell-scrim{position:fixed;inset:0;background:rgba(16,21,28,.22);z-index:68;opacity:0;pointer-events:none;transition:opacity .18s var(--ease)}
.bell-scrim.on{opacity:1;pointer-events:auto}
.bell-pop{position:fixed;top:64px;right:12px;z-index:69;
  width:min(440px,calc(100vw - 20px));max-height:min(80vh,660px);overflow:auto;
  background:var(--card);border-radius:16px;padding:16px;box-shadow:0 14px 40px rgba(0,0,0,.22),0 2px 8px rgba(0,0,0,.08);
  transform-origin:top right;transform:scale(.92) translateY(-4px);opacity:0;pointer-events:none;
  transition:transform .18s var(--ease),opacity .15s var(--ease)}
.bell-pop.on{transform:scale(1) translateY(0);opacity:1;pointer-events:auto;
  /* Entrata a molla più lenta e vivace; l'uscita (regola sopra, applicata quando .on viene tolta)
     resta rapida — un popover che si chiude di scatto si percepisce più reattivo di uno che indugia. */
  transition:transform .34s var(--spring),opacity .2s var(--ease)}
@media (min-width:600px){.bell-pop{width:min(480px,calc(100vw - 20px))}}
.bell-pop::before{content:'';position:absolute;top:-6px;right:18px;width:12px;height:12px;background:var(--card);transform:rotate(45deg);border-radius:2px}
.bell-pop h3{font-size:17px;margin-bottom:12px}
@keyframes sheetup{from{transform:translateY(100%)}to{transform:none}}
.sheet h3{font-size:18px;margin-bottom:14px}
.field{margin-bottom:12px}
.field.deleg-card{padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:5px;font-weight:600}
.field input,.field select,.field textarea{width:100%;padding:12px;border:1px solid var(--line);border-radius:11px;font-size:16px;background:var(--bg);color:var(--ink);font-family:inherit;box-sizing:border-box}
.field textarea{resize:vertical;min-height:64px}
.bc-ov{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9998;display:none;align-items:center;justify-content:center;padding:20px}
.bc-card{background:var(--card);border-radius:16px;padding:20px;max-width:420px;width:100%;box-shadow:0 12px 40px rgba(0,0,0,.3);animation:bcpop .34s var(--spring)}
@keyframes bcpop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.bc-card .bc-h{font-weight:800;font-size:17px;margin-bottom:10px}
.bc-card .bc-body{font-size:15px;line-height:1.5;color:var(--ink);margin-bottom:16px;white-space:pre-wrap}
.bc-banner{background:var(--accent,#0e7c5a);color:#fff;border-radius:11px;padding:11px 14px;font-weight:700;font-size:14px;margin-bottom:12px;cursor:pointer;transition:transform .14s var(--ease),box-shadow .18s var(--ease)}
.bc-banner:active{transform:scale(.98)}
/* Note del turno precedente: tint d'attenzione (ambra), distinto dal messaggio del responsabile (accent) */
.bc-banner.nota{background:var(--amber-soft);color:var(--amber);box-shadow:var(--shadow)}
.field input:focus,.field select:focus{outline:2px solid var(--accent);outline-offset:1px;background:var(--card)}
.field .trsw input{width:20px;height:20px;padding:0;flex:none}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.trow{display:flex;gap:10px;margin-bottom:10px;align-items:center}
.trow input{padding:12px;border:1px solid var(--line);border-radius:11px;font-size:16px;background:var(--bg);color:var(--ink)}
.trow input:focus{outline:2px solid var(--accent);outline-offset:1px;background:var(--card)}
.trow .pl-tn{flex:1;min-width:0}
.trow .pl-tf{width:112px;text-align:center}
.trow .pl-th{width:72px;text-align:center}
.chiprow{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.chip{padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);font-size:14px;font-weight:600}
.chip.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.logo-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.logo-prev{width:64px;height:48px;border:1px solid var(--line);border-radius:8px;display:grid;place-items:center;overflow:hidden;background:var(--bg);font-size:10px;color:var(--muted)}
.logo-prev img{max-width:100%;max-height:100%;object-fit:contain}
/* crew chiusura form fields */
.cf{margin:10px 0}.cf label{display:block;font-size:13px;color:var(--muted);font-weight:600;margin-bottom:4px}
.cf input,.cf textarea{width:100%;padding:11px;border:1px solid var(--line);border-radius:10px;font-size:16px;background:var(--bg);color:var(--ink)}
.cfck{display:flex;align-items:center;gap:8px;font-size:15px;margin:6px 0}.cfck input{width:20px;height:20px}

/* ============================================================
   12 · AUTH GATE
   ============================================================ */
#authGate{position:fixed;inset:0;z-index:100;background:var(--bg);display:none;align-items:center;justify-content:center;padding:24px;padding-top:calc(24px + env(safe-area-inset-top))}
.auth-card{width:100%;max-width:360px;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:26px 22px;text-align:center}
.auth-logo{height:46px;margin-bottom:10px}
.auth-card h2{font-size:19px;margin-bottom:4px}
.auth-card input{width:100%;padding:13px;border:1px solid var(--line);border-radius:11px;font-size:16px;background:var(--bg);margin-top:10px}
.auth-card input:focus{outline:2px solid var(--accent);outline-offset:1px;background:var(--card)}
.auth-err{color:var(--red);font-size:13px;min-height:16px;margin-top:8px}

/* ============================================================
   13 · CREW (dip.html) — today plan, week, tasks, history, disp
   ============================================================ */
.oggi-plan{font-size:14px;color:var(--muted)} .oggi-plan b{color:var(--ink)}
.seg-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.segchip{font-weight:700;font-size:14px;color:var(--green);background:var(--green-soft);border:1px solid #bfe3d2;border-radius:9px;padding:4px 10px;font-variant-numeric:tabular-nums}
.segchip.tr{color:var(--amber);background:var(--amber-soft);border-color:#e7c97a}
.segchip.tr-in{color:var(--blue);background:var(--blue-soft);border-color:#9db8e6}
.segchip b{font-weight:800}
/* slide-to-punch: timbra trascinando come il cartellino */
.slidepunch{position:relative;height:62px;margin-top:14px;border-radius:15px;overflow:hidden;background:var(--bg);border:1px solid var(--line);user-select:none;touch-action:none}
.sp-in{background:var(--green-soft);border-color:#bfe3d2}
.sp-out{background:var(--red-soft);border-color:#e7b0ab}
.sp-fill{position:absolute;top:0;bottom:0;width:0;opacity:.45;transition:width .04s linear}
.sp-in .sp-fill{left:0;background:var(--green)} .sp-out .sp-fill{right:0;background:var(--red)}
.slidepunch.dragging .sp-fill{transition:none}
.sp-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;color:var(--ink);pointer-events:none;padding:0 10px;text-align:center}
.sp-thumb{position:absolute;top:5px;width:52px;height:50px;border-radius:12px;display:grid;place-items:center;font-size:20px;color:#fff;box-shadow:var(--shadow);touch-action:none}
.sp-in .sp-thumb{left:5px;background:var(--green)} .sp-out .sp-thumb{right:5px;background:var(--red)}
.slidepunch.done .sp-label{opacity:0}
/* Conferma "wow" della timbratura: azione più frequente e più importante dell'app dipendente,
   merita il tocco più curato. Spunta a molla al posto della sola etichetta che sparisce. */
.sp-check{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;opacity:0;pointer-events:none;animation:checkpop .55s .12s var(--spring) forwards}
.sp-check svg{width:26px;height:26px}
@keyframes checkpop{0%{opacity:0;transform:scale(.35)}60%{opacity:1;transform:scale(1.18)}100%{opacity:1;transform:scale(1)}}
/* tab bar dipendente in basso */
.dipnav{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--glass);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);display:flex;gap:2px;padding:6px 8px calc(6px + env(safe-area-inset-bottom));max-width:560px;margin:0 auto}
.dipnav .ni{font-size:21px;line-height:1}
/* motivo per giorno nella richiesta disponibilità */
.dm-row{display:flex;align-items:center;gap:8px;margin-top:6px}
.dm-row .dm-day{flex:0 0 50px;font-size:12px;font-weight:700;color:var(--muted);display:flex;flex-direction:column;line-height:1.15}
.dm-row .dm-day .dm-dt{font-weight:600;font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.dm-row .dm-in{flex:1;padding:9px 11px;border:1px solid var(--line);border-radius:9px;font-size:15px;background:var(--bg);color:var(--ink)}
.wk-day{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line)}
.wk-day:last-child{border-bottom:none}
.wk-d{flex:0 0 64px}.wk-d .n{font-weight:650;font-size:14px}.wk-d .dt{font-size:12px;color:var(--muted)}
.wk-orari{flex:1}.wk-orari .tm{font-weight:700;color:var(--green);font-variant-numeric:tabular-nums}
.trtag{display:inline-block;font-size:11px;font-weight:700;color:var(--amber);background:var(--amber-soft);border-radius:6px;padding:1px 6px;margin-left:2px}
.trtag.in{color:var(--blue);background:var(--blue-soft)}
.oggi-plan .trtag{font-size:12px}
.wk-orari .cd{font-weight:700;padding:2px 8px;border-radius:7px;font-size:13px}
.cd-R{background:var(--gray-soft);color:var(--gray)} .cd-F{background:var(--blue-soft);color:var(--blue)}
.cd-M{background:var(--red-soft);color:var(--red)} .cd-P{background:var(--amber-soft);color:var(--amber)} .cd-V{background:var(--green-soft);color:var(--green)}
.wk-obj{font-size:12px;color:var(--muted);margin-top:2px}
.wk-today{background:var(--green-soft)}
/* Bacheca (report/foto dal gestore), sola lettura in home dipendente. */
.news-item{padding:12px 14px;border-bottom:1px solid var(--line)}
.news-item:last-child{border-bottom:none}
.news-photo{width:100%;max-height:200px;object-fit:cover;border-radius:10px;margin-bottom:8px;display:block}
.news-text{font-size:13px;color:var(--muted);margin-top:3px;white-space:pre-wrap}
.news-date{font-size:11px;color:var(--muted);margin-top:6px}
/* Arrivo dalla notifica in campanella: breve sfondo evidenziato sul post esatto, così si capisce
   quale dei tanti aggiornamenti è quello appena notificato (altrimenti si finisce nel mezzo di
   una lista senza sapere quale riga guardare). */
.news-item.news-flash{animation:newsflash 1.6s var(--ease)}
@keyframes newsflash{0%,100%{background:transparent}15%{background:var(--accent-soft)}}
.compiti{margin-top:12px;background:var(--blue-soft);border-radius:11px;padding:10px 12px}
.ctitle{font-size:12px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px}
.crow{display:flex;align-items:center;gap:8px;font-size:15px;padding:5px 0;transition:background-color .12s var(--ease)}
.crow .cn{flex:1}
.crow.cdone .cn{text-decoration:line-through;color:var(--muted)}
.crow .core{color:var(--muted);font-weight:600;font-size:13px}
.tck{width:26px;height:26px;flex:0 0 26px;border-radius:7px;border:2px solid var(--blue);background:var(--card);color:#fff;font-weight:800;font-size:15px;line-height:1}
.tck.on{background:var(--green);border-color:var(--green)}
.tck.tckpop{animation:tckpop .4s var(--spring)}
@keyframes tckpop{0%{transform:scale(1)}45%{transform:scale(1.3)}100%{transform:scale(1)}}
/* Conferma "Copiato ✓" (link invito, link god/supervisore, testo Riepilogo): piccolo rimbalzo sul
   pulsante invece del solo cambio di testo — si sente che l'azione è andata a buon fine. */
.copied{animation:copiedpop .4s var(--spring)}
@keyframes copiedpop{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
.rimbtn{border:1px solid var(--amber);color:var(--amber);background:var(--amber-soft);border-radius:8px;padding:4px 8px;font-size:12px;font-weight:600}
.rimb{color:var(--amber);font-size:12px;font-weight:700}
.fw{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);font-size:14px}
.fw:last-child{border-bottom:none}.fw input{width:20px;height:20px}
.fw .r{margin-left:auto;font-size:12px;font-weight:700;padding:2px 8px;border-radius:7px}
.r-app{background:var(--green-soft);color:var(--green)} .r-req{background:var(--amber-soft);color:var(--amber)} .r-no{background:var(--red-soft);color:var(--red)}
.hday{display:flex;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line);font-size:13px}
.hday:last-child{border-bottom:none}.hday .d{flex:0 0 54px;color:var(--muted)}
.hweek{font-weight:700;padding:10px 12px 4px}
/* accordion ore fatte */
.acc{background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden;box-shadow:var(--shadow)}
.acc-sum{display:flex;align-items:center;gap:10px;padding:13px 14px;cursor:pointer;list-style:none;font-weight:650}
.acc-sum::-webkit-details-marker{display:none}
.acc-t{font-size:15px}
.acc-y{color:var(--muted);font-weight:500;font-size:12px;margin-left:6px}
.acc-reg{margin-left:8px;font-size:11px;font-weight:700;color:var(--green);background:var(--green-soft);border-radius:7px;padding:2px 7px}
.acc-tot{margin-left:auto;font-weight:800;color:var(--green);background:var(--green-soft);border-radius:8px;padding:3px 10px;font-size:13px}
.acc-chev{color:var(--muted);font-size:12px;transition:transform .22s var(--ease)}
.acc[open] .acc-chev{transform:rotate(180deg)}
.acc-body{border-top:1px solid var(--line)}
.dp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.dp-grid{width:max-content;min-width:100%}
.dp-row{display:flex;border-bottom:1px solid var(--line)}.dp-row:last-child{border-bottom:none}
.dp-day{flex:0 0 54px;font-size:12px;font-weight:700;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:1px;padding:0 7px;position:sticky;left:0;background:var(--card);border-right:1px solid var(--line);z-index:1}
.dp-day .dp-dn{line-height:1.1}
.dp-day .dp-dt{font-weight:600;font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1}
.dp-cells{display:flex;touch-action:auto}/* default: scorri; si barra solo in modalità modifica */
body.dp-editing .dp-cells{touch-action:none}
.dp-c{width:18px;height:34px;border-right:1px solid var(--line);transition:background-color .12s var(--ease)}
.dp-c.hr{border-left:2px solid #aeb8c6}
.dp-c.on{background:#fde0de;box-shadow:inset 0 0 0 1.5px var(--red)}
.dp-c.lock{background:repeating-linear-gradient(45deg,#e6e9ee,#e6e9ee 3px,#fff 3px,#fff 6px)}
.dp-head{height:24px}.dp-head .dp-day{background:var(--bg)}
.dp-head .dp-c{height:24px;position:relative;overflow:visible}
.dp-head .dp-c span{position:absolute;left:3px;top:5px;font-size:11px;font-weight:700;color:var(--ink);white-space:nowrap}

/* ============================================================
   14 · READ-ONLY (area manager / osservatore) — body.ro
   ============================================================ */
body.ro .emp-act,body.ro .addseg,body.ro #timbToday .rowbtns,body.ro #v-oggi>.rowbtns,
body.ro .timb-tools,body.ro .vday,body.ro .autobanner,body.ro .pubbar,
body.ro .obj-card,body.ro .fp .ok,body.ro .fp .no,
body.ro #v-team .rowbtns,body.ro .tm .btn-ghost,
body.ro .admin-only,body.ro .ro-hide,body.ro .bellbtn,body.ro .notif-bar{display:none!important}
body.ro .te-cell,body.ro .lin-c,body.ro .lin-name,body.ro .seg .t,body.ro .seg .del,
body.ro .fcal td.c,body.ro .reg .man input,body.ro #v-team input,body.ro .datepick{pointer-events:none}
body.ro .reg .man input,body.ro #v-team input{background:transparent;border-color:transparent}

/* ============================================================
   15 · DELEGA CONSOLE (vice/dipendente delegato) — body.deleg
   Solo Turni + Timbrature: a differenza di RO, l'editing NON è disabilitato
   (deve poter fare orari/timbrature), spariscono solo tab/pulsanti fuori scope.
   ============================================================ */
body.deleg .deleg-hide{display:none!important}

/* ============================================================
   15 · MOTION fallback
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ============================================================
   15b · RESPONSIVE — niente overflow orizzontale su telefono
   ============================================================ */
@media (max-width:420px){
  main{padding:12px}
  .te-emp{padding:10px 8px}
  .te-days{gap:3px}
  .te-cell{padding:6px 0;min-height:46px}
  .te-cell .tm{font-size:10px;letter-spacing:-.03em;padding:1px 4px}
  .te-cell .tm i{font-size:9.5px;letter-spacing:-.03em}
  .te-cell .tm.tr,.te-cell .tm.tr-in{padding:1px 4px}
  .te-cell .cd{font-size:13px}
  .te-cell .empty-d{font-size:13px}
  .te-day .dl{font-size:9px}
  .lin-name{flex-basis:88px;min-width:88px;font-size:11px}
  #turniEditor.editing .lin-name{flex-basis:132px;min-width:132px}
}
@media (max-width:360px){
  main{padding:10px}
  .te-emp{padding:9px 6px}
  .te-cell .tm{font-size:9px}
  .te-cell .tm i{font-size:9px}
}

/* ============================================================
   16 · PRINT — only #printArea (orario / riepilogo / ferie PDF)
   ============================================================ */
#printArea{display:none}
@media print{
  @page{size:landscape;margin:8mm}
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  body{background:#fff;margin:0;padding:0}
  body>*{display:none!important}
  #printArea{display:block!important;font-family:Arial,Helvetica,sans-serif;color:#111}
  .po-brand{display:flex;align-items:center;gap:14px;margin-bottom:8px}
  .po-logo{height:52px;width:auto;object-fit:contain}
  .po-titlebox{flex:1;border:2px solid #163a93;border-radius:6px;padding:8px 14px;text-align:center;border-bottom:4px solid #ffd200}
  .po-titlebox h2{font-size:20px;font-weight:800;color:#163a93;margin:0}
  .po-sub{font-size:11px;color:#444;margin-top:3px}
  .po-when{display:flex;align-items:center;gap:8px;margin:6px 0 10px;font-size:12px}
  .po-when b{font-weight:700}
  .po-when .band{background:#fff14d;padding:3px 10px;border:1px solid #b9a800;border-radius:3px;font-weight:700}
  .po-page{page-break-inside:auto}
  .po-break{page-break-before:always}
  .po{width:100%;border-collapse:collapse;border:1.5px solid #4b5563;font-size:10.5px;table-layout:fixed;margin-bottom:8px}
  .po th,.po td{border:1px solid #6b7280;padding:3px 4px;text-align:center;vertical-align:top;overflow:hidden;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .po tbody tr{border-bottom:1px solid #6b7280;page-break-inside:avoid;break-inside:avoid}
  .po thead{display:table-header-group}
  .po-kpi{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
  .po-kpi>div{flex:1 1 30%;border:1px solid #6b7280;border-radius:4px;padding:5px 9px;min-width:120px}
  .po-kpi span{display:block;font-size:8.5px;color:#444;text-transform:uppercase;font-weight:700;letter-spacing:.02em}
  .po-kpi b{font-size:13px;color:#163a93;font-weight:800}
  .po thead th{background:#e7ebf1;font-size:9.5px;text-transform:uppercase;font-weight:800;color:#163a93}
  .po thead th .d{display:block;font-weight:500;color:#444;font-size:9px}
  .po col.c-name{width:120px}.po col.c-tot{width:52px}
  .po td.po-name{background:#d6e3f7;text-align:left;font-weight:800;white-space:nowrap;color:#11233f}
  .po td.po-name .n{color:#5b6b85;font-weight:700;margin-right:5px}
  .po td .po-time{display:block;font-weight:700;color:#11233f;line-height:1.35}
  .po td .ore-row{display:block;margin-top:4px}
  .po td .ore{display:inline-block;padding:1px 7px;border-radius:4px;background:#eef2f9;color:#163a93;font-weight:700;font-size:9px;letter-spacing:.02em;font-variant-numeric:tabular-nums}
  .po td.po-empty{color:#9aa3b0}
  .po td.po-hastr{background:#fff4e2}
  .po .po-tr{display:inline-block;color:#9a5a00;font-weight:800}
  .po td.rest{background:#cdebd6;font-weight:800;color:#15633a}
  .po td.abs{background:#eef0f3;font-weight:700;color:#444}
  .po td.po-tot{font-weight:800;background:#f3f5f8}
  .po tr.obj td{background:#fbfbf5;font-style:italic;font-size:9px;color:#333;font-weight:600}
  /* Riepilogo: colori ore per tipo anche in stampa (espliciti, non da var) */
  .po .t-out{color:#9a6a00!important;font-weight:700}
  .po .t-loc{color:#1a8a5a!important;font-weight:700}
  .po .t-in{color:#1f5fb0!important;font-weight:700}
  .po-leg{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:9px;color:#333;margin:6px 0 10px}
  .po-leg i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px;vertical-align:middle}
  .po tr.obj td.po-name{font-style:normal;background:#eef2f9;color:#11233f}
  .po tr.foot td{font-weight:800;background:#eef2f9;border-top:2px solid #163a93}
  .po-foot-note{margin-top:6px;font-size:9px;color:#666}
  .fmonth{margin-bottom:8px;page-break-inside:avoid}
  .fmtitle{font-weight:700;font-size:12px;margin:6px 0 2px;text-transform:capitalize}
  .fmscroll{overflow:visible;border:none}
  .fcal{border-collapse:collapse;font-size:8px}
  .fcal th,.fcal td{border:1px solid #999;width:15px;height:15px;text-align:center}
  .fcal th .wl{display:block;font-size:6px;color:#666}
  .fcal td.nm,.fcal th.nm{text-align:left;font-weight:700;white-space:nowrap;padding:0 4px;min-width:74px}
  .fcal td.app{background:#0e7c5a;color:#fff}
  .fcal td.we,.fcal th.we{background:#eee}
  .fcal td.tot,.fcal th.tot{background:#f0f0f0;font-weight:700}
}
