/* fd-veste.css: la veste delle specifiche FastDoctor sulle dashboard interne (Fastdoctor-ITA/Fastdoctor-Project-Planning#115).
   Fonte: app/specifiche/ di Fastdoctor-Project-Planning; le altre app ne hanno una copia (tools/veste-dashboard/porta.sh).
   Si carica dopo il CSS dell'app e dopo fd.css. I nomi di STILE.md (estrazione, analytics, planning) puntano ai
   token; le regole comuni prendono le forme delle specifiche, e i colori restano quelli dell'app (gia' token). */
:root {
  --bg: var(--fondo); --card: var(--superficie);
  --blu: var(--accento); --blu-scuro: var(--accento-forte); --blu-chiaro: var(--accento-tenue);
  --aqua: var(--acqua); --successo: var(--entro); --avviso: var(--attenzione); --urgente: var(--oltre);
  --raggio-m: var(--raggio); --ombra-s: none; --ombra-m: var(--ombra-2); --ombra-l: var(--ombra-3);
  --ok: var(--entro); --ko: var(--oltre); --corso: var(--attenzione); --coda: var(--acqua);
  --stop: var(--muto); --mai: var(--bordo-lieve);
  /* planning */
  --navy: var(--accento); --navy-scuro: var(--accento-forte); --navy-chiaro: var(--accento-tenue);
  --line: var(--bordo); --muted: var(--tenue); --warn: var(--attenzione-testo); --bad: var(--oltre-testo);
  --info: var(--info-testo); --testa-tabella: var(--rialzo);
}
body { font-family: var(--font); background: var(--fondo); color: var(--testo); }
main, .pannello { animation: none !important; }

/* intestazione e marchio: bianca, un bordo, niente sfumature ne' punti che pulsano */
body > header, header { background: var(--superficie) !important; backdrop-filter: none !important;
  box-shadow: none !important; border-bottom: 1px solid var(--bordo) !important; }
h1, h2, h3, h4, .marchio .nome { font-family: var(--font) !important; }
.marchio .segno { background: var(--sanita) !important; border-radius: var(--raggio) !important; box-shadow: none !important; }
.marchio .segno::after { animation: none !important; background: var(--rosso) !important; }
.marchio .nome { background: none !important; -webkit-text-fill-color: currentColor !important;
  color: var(--testo) !important; font-weight: 700 !important; letter-spacing: -.02em; }

/* bottoni: le forme delle specifiche. I colori e il passaggio sono quelli dell'app: ogni app ha il suo
   primario (nel planning e' .btn), e qui non si sa quale sia. */
button, .bottone, a.btn, .btn { border-radius: var(--raggio) !important; box-shadow: none !important; font-family: var(--font); }
button:focus-visible, .bottone:focus-visible, .btn:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }

/* campi */
input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea {
  border-radius: var(--raggio) !important; box-shadow: none !important; border-color: var(--bordo-forte) !important; }
input:focus, select:focus, textarea:focus { outline: none !important; border-color: var(--bordo-accento) !important;
  box-shadow: 0 0 0 3px var(--selezione) !important; }
input[type=checkbox], input[type=radio] { accent-color: var(--accento); }

/* schede: un bordo al posto dell'ombra */
.scheda, .card, .tessera, .riquadro { box-shadow: none !important; border: 1px solid var(--bordo) !important; }

/* titoli di sezione in tondo, etichette in mono */
.elenco-testa h2, .scheda h2, .scheda h3, h2.sezione, .titolo-sezione { text-transform: none !important; letter-spacing: -.01em !important; }
thead th { font-family: var(--font-mono) !important; font-size: var(--t-2xs) !important; font-weight: 500 !important;
  letter-spacing: .08em !important; text-transform: uppercase; color: var(--tenue) !important; background: var(--rialzo) !important; }
td.n, th.n, td.r, td.num, .num, .fd-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
td.n, th.n { white-space: nowrap; }
tbody tr:hover, tbody tr:hover td { background-color: var(--rialzo) !important; }
tbody tr.sel, tbody tr.sel td { background-color: var(--accento-tenue) !important; }
.tabella-scroll, .barra-selezione { border-radius: var(--raggio) !important; box-shadow: none !important; }

/* pillole di stato: quadrate, in mono, con un punto */
.pill, .tag, .stato { border-radius: var(--raggio-s) !important; font-family: var(--font-mono); letter-spacing: .06em; }
.pill::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; vertical-align: 1px; background: currentColor; }
.pill.riuscita { background: var(--entro-fondo) !important; color: var(--entro-testo) !important; }
.pill.fallita { background: var(--oltre-fondo) !important; color: var(--oltre-testo) !important; }
.pill.in_corso, .tag { background: var(--attenzione-fondo) !important; color: var(--attenzione-testo) !important; }
.pill.in_coda { background: var(--info-fondo) !important; color: var(--info-testo) !important; }
.pill.fermata, .pill.interrotta, .pill.mai { background: var(--rialzo) !important; color: var(--testo-2) !important; }
.pill.riuscita.con-anomalie { background: var(--attenzione-fondo) !important; color: var(--attenzione-testo) !important; box-shadow: none !important; }

/* barre e legende: niente tondi, niente pulsazioni */
.barra, .barra > i, .q { border-radius: 0 !important; }
.barra { background: var(--bordo-lieve) !important; }
#mappa path.s-in_corso { animation: none !important; }
/* la mappa dell'estrazione: un verde per aree grandi, 3,5:1 sul bianco, meno pesante di --entro */
:root { --entro-area: #4E9A52; }
[data-tema="scuro"] { --entro-area: #4FAE5C; }
#mappa path.s-riuscita { fill: var(--entro-area) !important; }
.q.ok { background: var(--entro-area) !important; }

/* I colori dei grafici (statistiche, analytics): i token dei grafici, validati per tema. --lavoro e --morto li
   dichiara .statistiche (non :root): stesso selettore, qui vince perche' viene dopo. */
:root, .statistiche { --lavoro: var(--serie-1); --morto: var(--serie-2); }
:root { --marca: var(--serie-1); }

/* Gantt del planning nello scuro: le barre hanno il colore del loro filone (non si converte); il bordo si vede */
[data-tema="scuro"] .g-bar { border-color: var(--bordo-forte) !important; }

/* Il telaio nelle app: la spina fissa a sinistra (fd-veste.js), la pagina dell'app si sposta di lato.
   Livello 35: sopra le intestazioni appiccicate (fino a 30), sotto veli e finestre (40 e oltre). */
html.fd-con-spina { --spina-w: 232px; }
html.fd-con-spina[data-spina="chiusa"] { --spina-w: 48px; }
/* margin, non padding: il margine sinistro dell'app (24px nel planning) resta, la spina si aggiunge accanto. */
html.fd-con-spina body { margin-left: var(--spina-w) !important; }
.fd-telaio-app { position: fixed !important; inset: 0 auto 0 0; z-index: 35; width: var(--spina-w);
  display: flex !important; flex-direction: column; gap: 1px; min-height: 0 !important; --banda: 48px;
  background: var(--bordo); border-right: 1px solid var(--bordo); font-family: var(--font); }
.fd-telaio-app .fd-angolo { flex: none; height: var(--testa-h, 60px); }
.fd-telaio-app .fd-spina { flex: 1; min-height: 0; }
.fd-nascosto-spina { display: none !important; }
header .marchio .segno, header .marchio .nome, header .marchio > svg { display: none !important; }
header .marchio .sezione, body > header h1 { font-size: var(--t-lg) !important; font-weight: 600 !important; color: var(--testo) !important; border-left: 0 !important; padding-left: 0 !important; }
/* con la spina la pagina e' piu' stretta: la tabella scorre nel suo riquadro invece di essere tagliata */
.tabella-scroll { overflow: auto !important; }

/* Sulla carta niente barra e niente margine: si stampa la pagina */
@media print {
  .fd-telaio-app { display: none !important; }
  html.fd-con-spina body { margin-left: 0 !important; }
}

/* I menu a tendina delle app: la freccia di .fd-select (due tagli col colore --tenue, segue il tema) al posto di quella
   del sistema, che cambia da un browser all'altro e stava attaccata al bordo. */
select:not([multiple]):not([size]):not(.fd-select) {
  -webkit-appearance: none; appearance: none; padding-right: 30px !important;
  background-image: linear-gradient(45deg, transparent 50%, var(--tenue) 50%), linear-gradient(135deg, var(--tenue) 50%, transparent 50%) !important;
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50% !important;
  background-size: 5px 5px !important; background-repeat: no-repeat !important;
}

/* Il tema in alto a destra nell'intestazione dell'app (fd-veste.js): spinto in fondo alla riga. */
.fd-tema-testa { margin-left: auto !important; flex: none; }
.fd-tema-testa svg { width: 16px; height: 16px; }