/*
 * TEMA "QUADERNO" — direzione visiva dell'app (Home, Turni, Personale,
 * Attenzione, Locali, oltre alle pagine di accesso in quaderno-auth.css).
 * Unico file sorgente per palette, font, cursore, animazioni e stile dei
 * riquadri: ogni pagina lo importa con un <link>, invece di duplicare lo
 * stesso blocco di stile in ogni file. Per cambiare qualcosa nel tema
 * (un colore, un font, l'animazione delle sheet) si tocca SOLO questo
 * file — si riflette automaticamente ovunque sia collegato.
 *
 * Ogni pagina aggiunge poi, nel proprio <style> locale, SOLO le regole
 * specifiche di quella pagina (es. la rotazione delle card Home, i toni
 * colore di Attenzione) — mai una ridefinizione della palette o dei font.
 *
 * Il font Google (Quicksand/Permanent Marker/Space Mono — Quicksand ha
 * sostituito Public Sans nel reskin 09/2026, stessa ragione delle email:
 * piu' morbido/arrotondato, coerente con lo stile "quaderno") NON si carica
 * piu' da qui via @import: ogni pagina lo collega con un <link> proprio,
 * PRIMA di questo file (vedi login.php, home.php, ecc.) — @import blocca
 * il rendering ancora di piu' di un <link> (va scoperto solo dopo aver
 * scaricato e parsato QUESTO file, mai in parallelo con lui) ed e' invisibile
 * allo scanner di preload del browser. Su una pagina che ricarica se stessa
 * di frequente (es. il Calendario dopo ogni assegnazione a orari liberi,
 * segnalato lento dal gestore — "3/4 secondi" per un turno in piu') quel
 * ritardo si ripete a ogni reload.
 */

:root {
  /* "Carta bianca": tema chiaro vero foglio bianco. */
  --zinc-50: #fdfcf8; --zinc-100: #f4f2ea; --zinc-200: #e6e2d2; --zinc-300: #d3cdb4;
  --zinc-400: #a89f86; --zinc-500: #6d6250; --zinc-600: #584f40; --zinc-700: #413a2f;
  --zinc-800: #2b2620; --zinc-900: #201c17;
  --panel: #ffffff;
  --brand-50: #fbeae5; --brand-100: #f6d3c9; --brand-200: #eeb6a5; --brand-300: #e0937c;
  --brand-400: #d97a54; --brand-500: #cf6540; --brand-600: #c8544a; --brand-700: #a5402f; --brand-800: #7c2f22;
  --shadow-card: none; --shadow-card-hover: none;
}
:root[data-theme="dark"] {
  --zinc-50: #201c17; --zinc-100: #26221a; --zinc-200: #3c3526; --zinc-300: #4a4231;
  --zinc-400: #7c715c; --zinc-500: #a89a7e; --zinc-600: #c2b699; --zinc-700: #d8cfb9;
  --zinc-800: #e9e2cf; --zinc-900: #f4f0e6;
  --panel: #2b2720;
  /* brand-50..300 mancavano qui: senza una propria versione scura, questi
     4 toni restavano quelli DEL TEMA CHIARO di questo stesso file (bordo
     via attributo [data-theme="dark"] piu' specifico di ":root" da solo,
     ma nessuna regola qui li ridefiniva) — MA il layout base dell'app (le
     variabili originali "Aurora", incluse su ogni pagina prima di questo
     file) HA una propria :root[data-theme="dark"] con questi stessi nomi,
     a specificita' identica: essendo dichiarata per prima nel documento
     perdeva comunque il confronto sulle proprieta' che quaderno-theme.css
     ridefinisce, ECCETTO queste 4, mai toccate qui — risultato: sfondi
     "evidenziati" (oggi nel calendario, pulsante mansione principale, ecc)
     tornavano al viola dell'app originale invece del corallo di carta
     scelto per il tema scuro. Aggiunte qui, stessa tinta di --brand-400. */
  --brand-50: #2e2019; --brand-100: #3a271e; --brand-200: #4a3226; --brand-300: #6b4536;
  --brand-400: #e08379; --brand-500: #d76e5f; --brand-600: #e08379; --brand-700: #f0a89c; --brand-800: #f6c9c2;
  --shadow-card: none; --shadow-card-hover: none;
}

body {
  font-family: 'Quicksand', -apple-system, sans-serif;
  background-image: repeating-linear-gradient(var(--zinc-50) 0 34px, var(--zinc-200) 34px 35px);
  background-attachment: local;
  /* Evita il "pull to refresh"/rimbalzo del browser mobile quando si scorre
     oltre i bordi della pagina — non tocca touch-action:none sugli elementi
     di drag&drop (voluto: durante il trascinamento serve bloccare TUTTI i
     gesti, non solo il rimbalzo verticale della pagina). */
  overscroll-behavior-y: contain;
  /* Su iOS (Safari e le webview in-app: Chrome iOS, Instagram, ecc.) un
     doppio tocco ravvicinato ma impreciso — es. toccando due giorni vicini
     di fretta sul calendario — viene letto come "doppio tap per zoomare",
     ingrandendo la pagina invece di eseguire i due tocchi separati.
     "manipulation" disattiva SOLO il doppio-tap-zoom (mai voluto in
     un'app, non e' un sito da leggere) mantenendo intero lo zoom a
     pizzico, che restrittivo invece rimuoverlo del tutto (accessibilita'). */
  touch-action: manipulation;
}
.marker { font-family: 'Permanent Marker', cursive; font-weight: 400; }
h1, h2, h3, .page-title { font-family: 'Permanent Marker', cursive; font-weight: 400; letter-spacing: 0; }
.page-title { font-size: clamp(1.6rem, 1.4vw + 1.3rem, 2.2rem); }

/* Header reale nascosto su ogni pagina v2: sostituito dal blocco marchio
   qb-band, identico ovunque (vedi markup in ciascun file). */
header.app-header { display: none; }
main.app-main { padding-top: 1.4rem; }

.qb-band { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.4rem; flex-wrap: wrap; gap: .6rem; }
.qb-brand { display: flex; align-items: center; gap: .6rem; font-size: clamp(1.2rem, 1.5vw + .8rem, 1.5rem); }
.qb-brand .pencil { width: 1.2em; height: 1.2em; color: var(--zinc-900); flex: none; }
.qb-brand .venue { font-size: .78em; color: var(--zinc-500); border-left: 1px solid var(--zinc-200); padding-left: .6rem; font-family: 'Quicksand', sans-serif; }
.qb-exit { background: none; border: none !important; color: var(--zinc-500); font-size: .9rem; cursor: pointer; padding: 0; font-family: 'Quicksand', sans-serif; }
.qb-exit:hover { color: var(--zinc-900); text-decoration: underline; }
.qb-back { display: inline-flex; align-items: center; gap: .4rem; color: var(--zinc-500); text-decoration: none; font-size: .9rem; font-weight: 700; margin-bottom: 1rem; font-family: 'Quicksand', sans-serif; }
.qb-back:hover { color: var(--zinc-900); }
.qb-inline-icon { width: 1rem; height: 1rem; vertical-align: -2px; margin-right: .2rem; flex: none; }
.qb-role-icon { width: 1.05em; height: 1.05em; vertical-align: -.15em; flex: none; }

/* "OGNI RIQUADRO DEVE ESSERE DI CARTA": qualunque box dell'app — card,
   sheet, tile mansione, righe turno, pulsanti-riquadro, tab — condivide
   lo stesso bordo a inchiostro e lo stesso sfondo, mai piu' l'ombra
   morbida/bordo grigio del design originale. Un'unica regola invece di
   una per classe, cosi' si vede subito se una pagina nuova ne dimentica
   una: aggiungere qui la classe, non nel file della singola pagina. */
.card, .sheet-panel, .help-feature-card, .group-card, .assign-btn, .emp-chip,
.shift-chip, .repeat-day-btn, .future-item, .pattern-cell, .role-tile,
#fixed-config-panel, #pattern-role-sheet-panel, .tpl-btn, .hours-mode-btn,
.role-sheet-btn, .month-day-btn, .report-day-card, .toggle-row, .role-pick,
.emp-tab, .time-field-manual-toggle, input, select, textarea {
  background: var(--panel) !important;
  border: 2px solid var(--zinc-900) !important;
  border-radius: 4px 10px 4px 10px !important;
  box-shadow: none !important;
}
.emp-tab.on, .role-pick.active, .role-pick.secondary-active, .tpl-btn.on,
.toggle-row.on, .pattern-cell.on, .role-tile.on {
  background: var(--zinc-100) !important;
}

/* "UNA PAGINA VERA, NON UN RETTANGOLO STAMPATO": il solo bordo a inchiostro
   sopra rendeva ogni riquadro "solo una linea" (segnalato dal gestore) —
   qui si aggiunge la piccola piega dell'angolo in alto a destra che ha
   ogni vera pagina di quaderno, come dettaglio condiviso da TUTTI i
   riquadri "di carta" dell'app (una sola regola, si riflette ovunque).
   Esclusi deliberatamente gli elementi piccoli della lista sopra (input,
   chip, tessere/pulsanti minuscoli, celle di una griglia): su quella
   scala la piega sembrerebbe un difetto grafico, non un dettaglio — resta
   solo il bordo a inchiostro per quelli. */
.card, .sheet-panel, .emp-modal, .help-feature-card,
.home-card, .assign-btn, .shift-chip, .future-item, .report-day-card,
.day-card, .event-row, .open-shift-row, .item, .group-card, .mode-card,
.emp-tile {
  position: relative;
}
.card::before, .sheet-panel::before, .emp-modal::before, .help-feature-card::before,
.home-card::before, .assign-btn::before, .shift-chip::before, .future-item::before,
.report-day-card::before, .day-card::before, .event-row::before, .open-shift-row::before,
.item::before, .group-card::before, .mode-card::before, .emp-tile::before {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 13px;
  height: 13px;
  background: linear-gradient(135deg, transparent 50%, color-mix(in srgb, black 16%, var(--panel)) 50%);
  border-left: 2px solid var(--zinc-900);
  border-bottom: 2px solid var(--zinc-900);
  border-radius: 0 4px 0 5px;
  pointer-events: none;
}
/* Rotazione leggera e alternata: solo sui riquadri che si ripetono in
   lista (un turno dopo l'altro, una riga dopo l'altra) — mai sui
   contenitori grandi e unici (.card, .sheet-panel, .emp-modal), che
   inclinati sembrerebbero un difetto di rendering, non un dettaglio a
   mano. Stesso principio gia' provato su Home (le 3 card "post-it") e su
   Turni (righe turno alternate), esteso qui a tutti gli altri. */
.home-card:nth-of-type(odd), .assign-btn:nth-of-type(odd), .shift-chip:nth-of-type(odd),
.future-item:nth-of-type(odd), .report-day-card:nth-of-type(odd), .day-card:nth-of-type(odd),
.event-row:nth-of-type(odd), .open-shift-row:nth-of-type(odd), .item:nth-of-type(odd),
.group-card:nth-of-type(odd), .mode-card:nth-of-type(odd), .emp-tile:nth-of-type(odd) {
  transform: rotate(-.35deg);
}
.home-card:nth-of-type(even), .assign-btn:nth-of-type(even), .shift-chip:nth-of-type(even),
.future-item:nth-of-type(even), .report-day-card:nth-of-type(even), .day-card:nth-of-type(even),
.event-row:nth-of-type(even), .open-shift-row:nth-of-type(even), .item:nth-of-type(even),
.group-card:nth-of-type(even), .mode-card:nth-of-type(even), .emp-tile:nth-of-type(even) {
  transform: rotate(.35deg);
}
.assign-btn:hover, .shift-chip:hover, .mode-card:hover, .group-card:hover { transform: rotate(0deg); }
button[type=submit], .btn-primary {
  background: none !important; border: 3px solid var(--zinc-900); color: var(--zinc-900); box-shadow: none;
  font-family: 'Quicksand', sans-serif; font-weight: 700;
}
button[type=submit]:hover, .btn-primary:hover { transform: none; box-shadow: none; background: var(--zinc-100) !important; }
button.secondary, .btn-secondary { border-radius: 4px 10px 4px 10px; border: 2px solid var(--zinc-900); background: var(--panel); }

/* Puntatore aeroplanino di carta — linea guida di stile per tutto
   Turnio "v2": punta in alto a sinistra come la freccia di default di
   Windows (hotspot sulla punta, 2 2), non come un'icona "invia" che
   punterebbe dall'altra parte. */
body, a, button, input, select, textarea, label, .emp-row, .role-pick, .toggle-row, .home-card {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23201c17' stroke-width='1.8' stroke-linejoin='round'><path d='M2 2 13 13'/><path d='M2 2 9 22 13 13 22 9 2 2Z' fill='%23ffffff'/></svg>") 2 2, pointer;
}
:root[data-theme="dark"] body, :root[data-theme="dark"] a, :root[data-theme="dark"] button,
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea,
:root[data-theme="dark"] label, :root[data-theme="dark"] .emp-row, :root[data-theme="dark"] .role-pick,
:root[data-theme="dark"] .toggle-row, :root[data-theme="dark"] .home-card {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23f4f0e6' stroke-width='1.8' stroke-linejoin='round'><path d='M2 2 13 13'/><path d='M2 2 9 22 13 13 22 9 2 2Z' fill='%23201c17'/></svg>") 2 2, pointer;
}
/* Trascinamento: cursore "carta afferrata" invece del "grabbing" generico. */
body.dragging-active, body.dragging-active * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none' stroke='%23201c17' stroke-width='1.8' stroke-linejoin='round'><rect x='5' y='3' width='13' height='16' rx='1.5' fill='%23fdfcf8' transform='rotate(-8 11.5 11)'/><path d='M9 16 5 20' stroke-linecap='round'/><path d='M12 16 8 22' stroke-linecap='round'/></svg>") 10 10, grabbing !important;
}
.emp-chip.dragging-src, .day-head.dragging-src, .assign-btn.dragging-src {
  opacity: .55 !important; transform: rotate(-3deg) scale(1.04); box-shadow: 3px 5px 0 rgba(32,28,23,.18) !important;
  transition: transform .15s ease, box-shadow .15s ease;
}

/* ---- Animazione d'ingresso pagina: ogni pagina v2 si apre come un
   foglio di quaderno che si volta verso il lettore, non un semplice
   fade. Applicata al contenitore principale, cosi' vale per Home,
   Calendario, Personale e Attenzione senza differenze. ---- */
@keyframes qb-page-in {
  0% { opacity: 0; transform: perspective(1400px) rotateX(6deg) translateY(16px); }
  100% { opacity: 1; transform: perspective(1400px) rotateX(0deg) translateY(0); }
}
/* IMPORTANTE: fill-mode "forwards"/"both" qui romperebbe ogni sheet
   (position:fixed) dentro .app-main — un transform "vivo" a fine
   animazione (anche solo rotateX(0)) trasforma l'elemento in un
   contenitore di posizionamento per i figli fixed, che smettono di
   agganciarsi al viewport e finiscono spinti fuori schermo. Fill-mode di
   default (nessuno): a animazione conclusa la proprieta' transform torna
   davvero a "none", visivamente identico (rotateX(0) = none) ma senza
   l'effetto collaterale sul posizionamento. */
main.app-main { animation: qb-page-in .3s cubic-bezier(.22,.85,.32,1); transform-origin: top center; }

/* ---- Transizione FRA pagine v2 (Home -> Calendario, ecc, vedi
   quaderno-theme.js): la pagina di partenza si volta via prima che il
   browser navighi davvero, cosi' l'uscita e l'ingresso della pagina
   successiva sembrano un unico gesto di sfoglio, non due animazioni
   scollegate. "forwards" qui va bene (a differenza di qb-page-in): la
   pagina sta per essere scaricata comunque, nessun rischio di lasciare
   un transform "vivo" in giro. ---- */
@keyframes qb-page-out {
  0% { opacity: 1; transform: perspective(1400px) rotateX(0deg) translateY(0); }
  100% { opacity: 0; transform: perspective(1400px) rotateX(-14deg) translateY(-18px); }
}
main.app-main.qb-page-out { animation: qb-page-out .2s cubic-bezier(.4,0,1,.6) forwards; }

/* ---- Sheet/dialoghi: pagina di quaderno che si apre dal basso
   sfogliandosi (rotazione 3D), con le stesse righe della pagina
   principale — una sola regola sulla classe .sheet-panel condivisa da
   OGNI sheet dell'app (scheda dipendente, assegna turno, pubblica,
   evento speciale, turni disponibili, turnista fisso, ecc). ---- */
@keyframes qb-sheet-open {
  0% { opacity: 0; transform: perspective(1200px) rotateX(-35deg) translateY(15%); }
  100% { opacity: 1; transform: perspective(1200px) rotateX(0deg) translateY(0); }
}
@keyframes qb-sheet-close {
  0% { opacity: 1; transform: perspective(1200px) rotateX(0deg) translateY(0); }
  100% { opacity: 0; transform: perspective(1200px) rotateX(-30deg) translateY(10%); }
}
@keyframes qb-overlay-fade-out { from { opacity: 1; } to { opacity: 0; } }
.sheet-panel {
  animation: qb-sheet-open .5s cubic-bezier(.22,.85,.32,1) both !important;
  transform-origin: bottom center;
  background-color: var(--panel) !important;
  background-image: repeating-linear-gradient(var(--panel) 0 32px, var(--zinc-200) 32px 33px) !important;
  border: 2.5px solid var(--zinc-900) !important; border-bottom: none !important;
  border-radius: 6px 24px 0 0 !important; box-shadow: none !important;
}
.sheet-handle { background: var(--zinc-300); }
.qb-sheet-closing .sheet-panel { animation: qb-sheet-close .32s cubic-bezier(.4,0,1,.6) both !important; }
.qb-sheet-closing.qb-modal-closing { animation: qb-overlay-fade-out .32s ease both; }

/* Overlay centrato (non ancorato al fondo, es. modali di benvenuto):
   stesso foglio di carta, entrata "posata sul tavolo". */
@keyframes qb-modal-pop {
  0% { opacity: 0; transform: translateY(14px) rotate(-1.2deg) scale(.96); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
}
@keyframes qb-modal-pop-out {
  0% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translateY(10px) rotate(-1deg) scale(.96); }
}
.qb-paper-modal {
  background-color: var(--panel) !important;
  background-image: repeating-linear-gradient(var(--panel) 0 32px, var(--zinc-200) 32px 33px) !important;
  border: 2.5px solid var(--zinc-900) !important; box-shadow: none !important;
  border-radius: 4px 18px 4px 18px !important;
  animation: qb-modal-pop .4s cubic-bezier(.22,.85,.32,1) both !important;
}
.qb-modal-closing .qb-paper-modal { animation: qb-modal-pop-out .3s ease both !important; }

/* ---- Barra "pennarello scarico" (consumo messaggi WhatsApp) ----
   Il riempimento e' un tratto di pennarello: pieno a sinistra, sempre piu' chiaro e "a righe" verso la fine, come un
   pennarello che si sta scaricando. Inchiostro = var(--zinc-900) (nero nel tema chiaro, bianco nello scuro); le righe
   di carta scoperta = var(--zinc-50), cioe' il colore del foglio in entrambi i temi. */
.mk-track { position: relative; height: 2.2rem; margin-top: .55rem; border: 2.5px solid var(--zinc-900); border-radius: 6px 15px 7px 13px; padding: .3rem .4rem; background: transparent; overflow: hidden; }
.mk-ink {
  position: relative; height: 100%; width: calc(var(--p, 0) * 1%);
  background: var(--zinc-900); border-radius: 3px 55% 45% 3px / 35% 55% 45% 50%;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 48%, rgba(0,0,0,.9) 70%, rgba(0,0,0,.6) 88%, rgba(0,0,0,.32) 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 48%, rgba(0,0,0,.9) 70%, rgba(0,0,0,.6) 88%, rgba(0,0,0,.32) 100%);
  animation: mk-draw 1s cubic-bezier(.3,.7,.3,1) both;
}
.mk-ink::after {
  content: ''; position: absolute; inset: 0; opacity: .8;
  background: repeating-linear-gradient(0deg, transparent 0 2.5px, var(--zinc-50) 2.5px 4px, transparent 4px 7px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 38%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0, transparent 38%, #000 100%);
}
.mk-tick { position: absolute; top: -2px; bottom: -2px; width: 0; border-left: 2px dashed var(--zinc-500); opacity: .7; }
@keyframes mk-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .mk-ink { animation: none; } }

/* Scheda in Home con la barra dei messaggi (compare solo dal 60% di utilizzo). */
.qb-msg-card { display: block; text-decoration: none; color: inherit; margin-top: 1.4rem; }
.qb-msg-card .qb-tag { font-family: 'Permanent Marker', cursive; font-size: .82rem; color: var(--zinc-500); display: block; }
.qb-msg-card .t { font-weight: 700; font-size: 1rem; color: var(--zinc-900); margin: .1rem 0 0; }
.qb-msg-card .l { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .65rem; font-size: .8rem; color: var(--zinc-600); }
.qb-msg-card .go { font-family: 'Space Mono', monospace; font-weight: 700; font-size: .74rem; text-decoration: underline wavy; text-underline-offset: 3px; color: var(--zinc-900); }