/* Poppins (SIL OFL, vedi fonts/OFL.txt) */
@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/Poppins-Regular.093ee89be9ed.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/Poppins-Medium.bf59c687bc6d.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/Poppins-SemiBold.6f1520d10720.ttf") format("truetype"); }

:root {
  --sintech-rosso: #CA071E;     /* solo accento */
  --sintech-blu: #080E2B;       /* testo e intestazioni */
  --sintech-azzurro: #9AC4F8;   /* fondi */
  --sintech-grigio: #EDEDED;    /* fondi */
  --rosso-tenue: #fbeff0;
  --fondo-contenuto: #fafafa;
  --testo-tenue: #6b6f80;
  --bordo: #dcdde3;

  --ok: #27500A;
  --ok-sfondo: #EAF3DE;
  --scarico: #633806;
  --scarico-sfondo: #FAEEDA;
  --sovraccarico: #791F1F;
  --sovraccarico-sfondo: #FCEBEB;
  --interna-sfondo: #f4f4f6;
  --riga-pari: #f0f2f7;
  --assenza-sfondo: #e6f1fd;
  --riga-attiva: color-mix(in srgb, var(--sintech-azzurro) 25%, #fff);
  --avviso-sfondo: var(--sintech-blu);
  --errore-sfondo: var(--sintech-rosso);

  /* controllo: colori delle barre (bozze approvate) */
  --ore-fatte: #378ADD;
  --ore-future: #B5D4F4;
  --ore-oltre: #E24B4A;
  --ore-pianificate: #D3D1C7;
}

* { box-sizing: border-box; }
body {
  margin: 0; font-size: 14px; color: var(--sintech-blu); background: var(--fondo-contenuto);
  font-family: "Poppins", "Open Sans", system-ui, sans-serif;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

/* --- impaginazione: sidebar + contenuto ------------------------------------ */
.impaginazione { display: flex; min-height: 100vh; }
.sidebar {
  width: 200px; flex: none; background: #fff; border-right: 1px solid var(--bordo);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.marchio { padding: 22px 16px; border-bottom: 3px solid var(--sintech-rosso); }
.marchio img { display: block; width: 146px; height: auto; }
.menu { flex: 1; overflow-y: auto; padding: 8px 0; }
.menu .gruppo {
  padding: 14px 16px 4px; font-size: 11px; font-weight: 500; color: var(--testo-tenue);
  text-transform: uppercase; letter-spacing: .05em;
}
.voce {
  display: flex; align-items: center; gap: 8px; padding: 7px 16px 7px 13px;
  text-decoration: none; border-left: 3px solid transparent;
}
.voce .ti { font-size: 18px; }
.voce:hover { background: var(--sintech-grigio); }
.voce.attiva { border-left-color: var(--sintech-rosso); background: var(--rosso-tenue); font-weight: 600; }
.utente { padding: 12px 16px; border-top: 1px solid var(--bordo); display: grid; gap: 8px; }
.nome-utente { text-decoration: none; display: flex; align-items: center; gap: 6px; font-weight: 500; overflow-wrap: anywhere; }
.utente form { margin: 0; }
.nome-utente:hover, .nome-utente:focus-visible { text-decoration: underline; }

.contenuto { flex: 1; min-width: 0; padding: 16px 24px; }
.testata { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.testata h1 { font-size: 18px; font-weight: 600; margin: 0; }
.testata h1:empty { display: none; }
.azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }

/* --- componenti ------------------------------------------------------------ */
.bottone {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; cursor: pointer;
  border: 1px solid var(--sintech-blu); border-radius: 6px; background: #fff;
  color: var(--sintech-blu); text-decoration: none; line-height: 1.4; font-weight: 500;
}
.bottone:hover { background: var(--sintech-grigio); }
.bottone.primario { background: var(--sintech-rosso); border-color: var(--sintech-rosso); color: #fff; }
.bottone.primario:hover { filter: brightness(.92); }
.bottone .ti { font-size: 16px; }

.etichetta {
  display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px;
  background: var(--sintech-grigio); white-space: nowrap;
}
.scheda { background: #fff; border: 1px solid var(--bordo); border-radius: 8px; padding: 16px; }

.tabella { width: 100%; border-collapse: collapse; background: #fff; }
.tabella th, .tabella td { padding: 7px 10px; border-bottom: 1px solid var(--sintech-grigio); text-align: left; }
.tabella th { font-weight: 600; font-size: 12px; color: var(--testo-tenue); background: #fff; }
.tabella tbody tr:hover { background: #f5f8fe; }

.campo { display: grid; gap: 4px; font-weight: 500; }
.campo input, .campo select, .campo textarea {
  font-weight: 400; padding: 6px 8px; border: 1px solid var(--bordo); border-radius: 6px; background: #fff;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--sintech-azzurro); border-color: var(--sintech-azzurro); }
.errore-campo { color: var(--sintech-rosso); font-size: 12px; margin: 0; }

.filtro-divisione { display: inline-flex; border: 1px solid var(--sintech-blu); border-radius: 6px; overflow: hidden; }
.filtro-divisione > * { padding: 4px 12px; border: 0; background: #fff; text-decoration: none; cursor: pointer; }
.filtro-divisione > * + * { border-left: 1px solid var(--sintech-blu); }
.filtro-divisione > .attivo, .filtro-divisione > [aria-pressed="true"] { background: var(--sintech-blu); color: #fff; }

/* --- pagina di accesso ----------------------------------------------------- */
.accesso { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--sintech-grigio); }
.accesso .scheda { width: 100%; max-width: 340px; display: grid; gap: 14px; padding: 32px 28px; }
.accesso img { justify-self: center; width: 180px; height: auto; margin-bottom: 10px; }
.accesso h1 { font-size: 18px; font-weight: 600; margin: 0; text-align: center; }
.accesso .bottone { justify-content: center; }

@media (max-width: 700px) {
  .impaginazione { flex-direction: column; }
  .sidebar { width: auto; height: auto; position: static; border-right: 0; border-bottom: 1px solid var(--bordo); }
  .contenuto { padding: 12px 16px; }
}

/* --- griglie settimana, mese e anno: tema Tabulator ristretto a #griglia -------------- */
#griglia.tabulator {
  font-family: inherit; font-size: 13px; color: var(--sintech-blu);
  background: #fff; border: 1px solid var(--bordo); border-radius: 8px;
}
#griglia .tabulator-header { background: var(--sintech-blu); color: #fff; font-weight: 500; border-bottom: 0; }
#griglia .tabulator-header .tabulator-col {
  background: var(--sintech-blu); border-right-color: rgba(255, 255, 255, .15);
}
#griglia .tabulator-col-title { white-space: normal; }
#griglia .tabulator-tableholder .tabulator-table { background: #fff; color: var(--sintech-blu); }
#griglia .tabulator-row { background: #fff; border-bottom: 1px solid var(--bordo); }
#griglia .tabulator-row.tabulator-row-even { background: var(--riga-pari); }
#griglia .tabulator-row:hover { background: #f5f8fe; }
#griglia .tabulator-row .tabulator-cell { border-right-color: var(--sintech-grigio); }
#griglia .tabulator-row.interna { background: var(--interna-sfondo); }
/* righe assenza (Ferie/PAR, Altri permessi, Malattia): fondo azzurro chiaro, etichetta in corsivo */
#griglia .tabulator-row.assenza { background: var(--assenza-sfondo); }
#griglia .tabulator-row.assenza .tabulator-cell[tabulator-field="commessa"] { font-style: italic; }
#griglia .dettaglio-sotto { color: var(--testo-tenue); font-style: italic; }
/* mese: "Nelle sett." giallo quando differisce da "Del mese" */
#griglia .tabulator-row.nelle-diverse .tabulator-cell[tabulator-field="nelle_settimane"] {
  color: var(--scarico); background: var(--scarico-sfondo); font-weight: 600;
}
/* riga e colonna della cella in modifica */
#griglia .tabulator-row.riga-attiva { background: var(--riga-attiva); }
#griglia .tabulator-col.col-attiva::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--sintech-rosso);
}
/* righe di gruppo (una per divisione, con i subtotali): sola lettura, grigie */
#griglia .tabulator-row.gruppo { background: #F1EFE8; color: #444441; font-weight: 700; }
/* colonna Tot.: grassetto su fondo leggero; €/h sotto il costo orario dei diretti in rosso */
#griglia .tabulator-row:not(.riepilogo):not(.intestazione):not(.tabulator-calcs) .tabulator-cell[tabulator-field="tot"] { font-weight: 700; background: rgba(8, 14, 43, .04); }
#griglia .sotto-costo { color: var(--sovraccarico); font-weight: 600; }
#griglia .tabulator-cell.tabulator-editing { outline: 2px solid var(--sintech-rosso); outline-offset: -2px; border-color: transparent; }
#griglia .tabulator-cell.tabulator-editing input { font: inherit; color: inherit; }
#griglia .tabulator-cell .etichetta { max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }

/* in alto solo i nomi delle persone, su due righe (cognome, nome) */
#griglia .nome-persona { font-size: 12px; line-height: 1.25; overflow-wrap: anywhere; }
#griglia .nome-persona span { display: block; }
/* righe bloccate in cima (come nell'Excel): Capacità, Pianificate, Residuo con numeri grandi, poi i nomi delle colonne.
   Stanno dentro la testata di Tabulator: colore e peso del testo vanno ripristinati */
#griglia .tabulator-frozen-rows-holder { color: var(--sintech-blu); font-weight: 400; }
#griglia .tabulator-row.riepilogo { background: #f4f7fd; }
#griglia .tabulator-row.riepilogo .tabulator-cell[tabulator-field="commessa"] { font-weight: 700; font-size: 14px; }
#griglia .valore-cima { font-size: 16px; font-weight: 700; }
#griglia .tabulator-row.intestazione {
  background: color-mix(in srgb, var(--sintech-azzurro) 35%, #fff); font-weight: 600; border-bottom: 2px solid var(--sintech-blu);
}
/* piè di colonna: Produzione € per persona */
#griglia .tabulator-footer { color: var(--sintech-blu); border-top: 2px solid var(--sintech-blu); }
#griglia .tabulator-footer .tabulator-calcs-holder,
#griglia .tabulator-footer .tabulator-calcs-holder .tabulator-row { background: #f4f7fd !important; }
#griglia .tabulator-footer .tabulator-calcs-holder .tabulator-cell { font-size: 14px; font-weight: 700; }
.ok { color: var(--ok); background: var(--ok-sfondo); }
.etichetta.persa { color: #8a3b3b; background: #f6e4e4; }
.scarico { color: var(--scarico); background: var(--scarico-sfondo); }
.sovraccarico { color: var(--sovraccarico); background: var(--sovraccarico-sfondo); }

/* riepilogo economico sotto la griglia: una barra con la produzione e le due soglie come tacche */
.riepilogo-economico { margin-top: 16px; }
.riepilogo-economico .scheda { padding: 16px 20px; }
.rie-periodo { font-size: 12px; color: var(--testo-tenue); }
.rie-titolo { font-size: 26px; font-weight: 600; margin-top: 4px; }
.rie-titolo .ti { vertical-align: -3px; }
.rie-sotto { font-size: 13px; color: var(--testo-tenue); margin-top: 2px; }
.rie-barra { position: relative; margin: 16px 0 52px; }
.rie-pista { position: relative; height: 34px; border-radius: 8px; background: var(--sintech-grigio); overflow: hidden; }
.rie-riempi { height: 100%; display: flex; align-items: center; padding: 0 12px; box-sizing: border-box; font-size: 13px; font-weight: 600; white-space: nowrap; }
.rie-fuori { position: absolute; top: 0; line-height: 34px; font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--sintech-blu); }
.rie-tacca { position: absolute; top: -4px; width: 2px; height: 42px; margin-left: -1px; }
.rie-tacca.rosso { background: var(--sovraccarico); }
.rie-tacca.verde { background: var(--ok); }
.rie-etichetta { position: absolute; top: 42px; transform: translateX(-50%); text-align: center; font-size: 12px; line-height: 1.3; white-space: nowrap; }
.rie-etichetta.rosso { color: var(--sovraccarico); }
.rie-etichetta.verde { color: var(--ok); }
.rie-piede { border-top: 1px solid var(--bordo); padding-top: 10px; font-size: 12px; color: var(--testo-tenue); }

/* interruttore (checkbox come switch) */
.interruttore { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.interruttore input {
  appearance: none; margin: 0; width: 30px; height: 16px; border-radius: 8px; flex: none;
  background: var(--bordo); position: relative; cursor: pointer; transition: background .15s;
}
.interruttore input::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px;
  border-radius: 50%; background: #fff; transition: left .15s;
}
.interruttore input:checked { background: var(--sintech-blu); }
.interruttore input:checked::before { left: 16px; }
.interruttore input:focus-visible { outline: 2px solid var(--sintech-azzurro); outline-offset: 2px; }
#aggiungi-commessa { max-width: 16rem; }  /* altrimenti largo quanto il nome di commessa più lungo */

#avviso {
  position: fixed; right: 1rem; bottom: 1rem; max-width: 28rem; z-index: 10;
  padding: .6rem .9rem; border-radius: 6px; color: #fff; background: var(--avviso-sfondo);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
#avviso[hidden] { display: none; }
#avviso.errore, #avviso.error { background: var(--errore-sfondo); }

/* --- anagrafiche: elenco e modulo ------------------------------------------ */
.nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ricerca { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--bordo); border-radius: 6px; background: #fff; padding: 0 8px; }
.ricerca input { border: 0; padding: 5px 0; outline: 0; min-width: 12rem; }
.ricerca:focus-within { outline: 2px solid var(--sintech-azzurro); }
.contatore { margin: 0 0 8px; font-size: 12px; color: var(--testo-tenue); }
.contenitore-tabella { padding: 0; overflow-x: auto; }
.tabella.elenco tbody tr[data-href] { cursor: pointer; }
.tabella.elenco td:first-child a { font-weight: 500; text-decoration: none; }
.tabella.elenco td:first-child a:hover, .tabella.elenco td:first-child a:focus-visible { text-decoration: underline; }
.tabella .vuoto { color: var(--testo-tenue); text-align: center; }
.tabella .centrato { text-align: center; }
.modulo { display: grid; gap: 16px; max-width: 900px; }
.modulo h2 { font-size: 15px; font-weight: 600; margin: 0 0 8px; }
.griglia-campi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.formset td { vertical-align: top; }
.formset .campo input { width: 100%; }
.errori-modulo { border: 1px solid var(--sintech-rosso); border-left-width: 4px; border-radius: 6px; background: var(--rosso-tenue); padding: 8px 12px; }
.errori-modulo p { margin: 0; color: var(--sintech-rosso); }
.aggiungi-riga { margin-top: 8px; }
.pulsanti { display: flex; gap: 8px; }
@media (max-width: 700px) { .griglia-campi { grid-template-columns: 1fr; } }
.euro-ora { text-align: right; white-space: nowrap; padding-top: 14px; }

/* Divisioni e calendario */
.anteprima { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 500; }
.campo input[type="color"] { width: 64px; height: 34px; padding: 2px; }
.modulo-breve { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; margin-top: 12px; }
.modulo-breve .bottone { margin-top: 22px; }
.modulo-breve .nota-modulo { order: 1; flex-basis: 100%; font-size: 12px; color: var(--testo-tenue); margin: 0; }

/* --- andamento divisioni --- */
.andamento-tabella { overflow-x: auto; }
.andamento-tabella th, .andamento-tabella td { white-space: nowrap; }
.andamento-tabella .num { text-align: right; font-variant-numeric: tabular-nums; }
.andamento-tabella tfoot td { font-weight: 600; border-top: 2px solid var(--sintech-blu); }
.andamento-tabella thead th.divisione { text-align: center; border-bottom: 3px solid var(--sintech-grigio); }
.grafici { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin-top: 16px; }
.grafici .scheda { position: relative; height: 320px; }
.nota-pagina { font-size: 12px; color: var(--testo-tenue); margin-top: 12px; }

.riga-sync { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; }
.riga-sync p { margin: 0; font-size: 12px; color: var(--testo-tenue); }
.avvisi-sync { margin: 0 0 8px; font-size: 12px; }
.nota { margin: 0 0 8px; font-size: 12px; color: var(--testo-tenue); }

/* --- controllo commesse --- */
.legenda-barre { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 8px; font-size: 12px; color: var(--testo-tenue); }
.legenda-barre .chip { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.chip.fatte, .colonna .fatte { background: var(--ore-fatte); }
.chip.future { background: var(--ore-future); }
.chip.oltre { background: var(--ore-oltre); }
.chip.pianificate, .colonna .pianificate { background: var(--ore-pianificate); }
.chip.tacca { width: 3px; background: #000; margin-left: 4px; margin-right: 8px; }
.elenco-commesse { padding: 0; }
.riga-commessa {
  display: grid; grid-template-columns: minmax(10rem, 16rem) 1fr 9rem; align-items: center; gap: 16px;
  padding: 10px 16px; border-bottom: 1px solid var(--sintech-grigio); text-decoration: none;
}
.riga-commessa:last-child { border-bottom: 0; }
.riga-commessa:hover, .riga-commessa:focus-visible { background: #f5f8fe; }
.nome-commessa { display: grid; min-width: 0; }
.nome-commessa small { color: var(--testo-tenue); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-budget { position: relative; display: flex; height: 14px; background: var(--sintech-grigio); border-radius: 2px; }
.barra-budget.grande { height: 28px; }
.barra-budget > span:not(.b-tacca) { display: block; height: 100%; }
.b-fatte { background: var(--ore-fatte); }
.b-future { background: var(--ore-future); }
.b-oltre { background: var(--ore-oltre); }
.b-tacca { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -2px; background: #000; }
.barra-vuota { display: block; }
.esito-commessa { text-align: right; }
.esito { font-weight: 600; }
.esito.ok { color: #2f7d1f; }
.esito.sforata, .sotto-costo { color: var(--ore-oltre); }
.esito.mancante { color: var(--testo-tenue); }
.esito-sub { font-size: 11px; color: var(--testo-tenue); }
.elenco-commesse .vuoto { margin: 16px; color: var(--testo-tenue); text-align: center; }
a.interruttore { text-decoration: none; }
a.interruttore input { pointer-events: none; }
.dettaglio-barra { display: grid; grid-template-columns: 1fr 10rem; align-items: center; gap: 16px; margin-bottom: 12px; }
.dettaglio-barra:not(:has(.barra-budget)) { grid-template-columns: 1fr; }
.riquadri { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 12px; margin-bottom: 12px; }
.riquadro { display: grid; background: #fff; border: 1px solid var(--bordo); border-radius: 8px; padding: 10px 14px; }
.riquadro span { font-size: 12px; color: var(--testo-tenue); }
.riquadro strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.riquadro small { font-size: 11px; color: var(--testo-tenue); }
section.scheda { margin-bottom: 12px; }
.testata-sezione { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.testata-sezione h2 { font-size: 15px; font-weight: 600; margin: 0; }
.mesi { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
.mese { display: grid; justify-items: center; }
.colonne { display: flex; gap: 3px; width: 100%; justify-content: center; }
.colonna { display: flex; flex-direction: column; align-items: center; width: 42%; }
/* l'altezza fissa è della sola barra: il numero sta sotto, così le altezze restano proporzionali */
.colonna .barra { display: flex; align-items: flex-end; width: 100%; height: 120px; }
.colonna em { font-style: normal; font-size: 10px; font-variant-numeric: tabular-nums; margin-top: 2px; }
.colonna i { display: block; width: 100%; min-height: 1px; }
.nome-mese { font-size: 12px; color: var(--testo-tenue); margin-top: 4px; }
.tabella .num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .mesi { grid-template-columns: repeat(6, minmax(0, 1fr)); } .riga-commessa { grid-template-columns: 1fr 7rem; } .riga-commessa .barra-budget { grid-column: 1 / -1; order: 3; } }

/* --- controllo persone --- */
.elenco-persone { padding: 0; }
.riga-persona {
  display: grid; grid-template-columns: minmax(10rem, 16rem) 1fr 13rem 6rem; align-items: center; gap: 16px;
  padding: 10px 16px; border-bottom: 1px solid var(--sintech-grigio); text-decoration: none;
}
.riga-persona:last-child { border-bottom: 0; }
a.riga-persona:hover, a.riga-persona:focus-visible { background: #f5f8fe; }
.barre-ore { display: grid; gap: 3px; }
.barre-ore > span { display: block; height: 8px; background: var(--sintech-grigio); border-radius: 2px; overflow: hidden; }
.barre-ore i { display: block; height: 100%; }
.b-pian i { background: var(--ore-pianificate); }
.b-fatt i { background: var(--ore-fatte); }
.numeri-ore { font-variant-numeric: tabular-nums; white-space: nowrap; }
.esito-persona { text-align: right; }
.scostamento { font-weight: 600; font-size: 13px; }
.scostamento.linea { color: #2f7d1f; }
.scostamento.fuori { color: var(--scarico); background: var(--scarico-sfondo); padding: 1px 8px; border-radius: 10px; }
.scostamento.in-corso { color: var(--testo-tenue); font-weight: 400; }
.elenco-persone .vuoto { margin: 16px; color: var(--testo-tenue); text-align: center; }
@media (max-width: 700px) { .riga-persona { grid-template-columns: 1fr 6rem; } .riga-persona .barre-ore { grid-column: 1 / -1; order: 3; } .riga-persona .numeri-ore { order: 4; grid-column: 1 / -1; } }

/* --- benestare del mese --- */
:root {
  --stato-da-richiedere: #FAEEDA; --stato-da-richiedere-testo: #633806;
  --stato-richiesto: #E6F1FB; --stato-richiesto-testo: #0C447C;
  --stato-approvato: #EAF3DE; --stato-approvato-testo: #27500A;
  --stato-fatturato: #F1EFE8; --stato-fatturato-testo: #444441;
}
.pillola { display: inline-block; padding: 1px 10px; border-radius: 10px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.pillola.stato-da_richiedere { background: var(--stato-da-richiedere); color: var(--stato-da-richiedere-testo); }
.pillola.stato-richiesto { background: var(--stato-richiesto); color: var(--stato-richiesto-testo); }
.pillola.stato-approvato { background: var(--stato-approvato); color: var(--stato-approvato-testo); }
.pillola.stato-fatturato { background: var(--stato-fatturato); color: var(--stato-fatturato-testo); }
.riquadro .pillole { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
.scheda.benestare .nome-benestare { font-weight: 400; color: var(--testo-tenue); margin-left: 6px; }
.benestare-righe tfoot th, .benestare-righe tfoot td { border-bottom: 0; border-top: 2px solid var(--sintech-blu); }
.benestare-righe thead .num, .benestare-righe tfoot .num { text-align: right; }
.benestare-righe .quantita { display: inline-flex; align-items: center; gap: 6px; }
.benestare-righe .quantita input { width: 7rem; text-align: right; }
.benestare-righe td .campo input[name$="_descrizione"] { width: 100%; }
.benestare-righe td.num .campo input { width: 8rem; text-align: right; margin-left: auto; }
.benestare-righe .nota-quantita, .benestare-righe .sal { display: block; color: var(--testo-tenue); font-size: 11px; }
.benestare-righe .sal { display: inline; }
.riga-libera { margin: 10px 0; }
.riga-libera summary { cursor: pointer; color: var(--sintech-blu); font-weight: 500; }
.campi-libera { display: grid; grid-template-columns: minmax(12rem, 2fr) 1fr 1fr 1fr; gap: 8px; margin-top: 8px; }
.pie-benestare { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 10px; }
.pie-benestare .campo.note { flex: 1; min-width: 14rem; }
.aggiungi-commessa { margin: 12px 0; }
.aggiungi-commessa summary { display: inline-flex; list-style: none; }
.aggiungi-commessa ul { list-style: none; margin: 8px 0; padding: 8px 12px; background: #fff; border: 1px solid var(--bordo); border-radius: 8px; max-width: 28rem; }
.aggiungi-commessa li { padding: 3px 0; }
.aggiungi-commessa li.vuoto { color: var(--testo-tenue); }
@media (max-width: 700px) { .campi-libera { grid-template-columns: 1fr 1fr; } }

/* --- stampa / PDF: A4 orizzontale, logo in alto, senza menu e bottoni (il filtro divisione attivo resta) ---- */
.intestazione-stampa, .solo-stampa { display: none; }
@page { size: A4 landscape; margin: 10mm; }
@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: #fff; font-size: 11px; }
  .sidebar, #avviso, .solo-schermo, .azioni > :not(.filtro-divisione), .filtro-divisione a:not(.attivo) { display: none !important; }
  .impaginazione { display: block; min-height: 0; }
  .contenuto { padding: 0; }
  .intestazione-stampa {
    display: flex; justify-content: space-between; align-items: flex-end;
    border-bottom: 2px solid var(--sintech-rosso); padding-bottom: 4px; margin-bottom: 8px; color: var(--testo-tenue);
  }
  .intestazione-stampa img { height: 32px; width: auto; }
  .solo-stampa { display: block; }
  tr, .riga-commessa, .riga-persona, .riquadro, .mese { break-inside: avoid; }
  a { text-decoration: none; }
}
@media print {
  table.tabella-stampa { display: table; width: 100%; border-collapse: collapse; font-size: 7.5px; margin-bottom: 8px; }
  .tabella-stampa th, .tabella-stampa td { border: 1px solid var(--bordo); padding: 1px 3px; }
  .tabella-stampa th { background: var(--sintech-grigio); font-weight: 600; }
  .tabella-stampa thead { display: table-header-group; }   /* intestazione ripetuta su ogni pagina */
  .tabella-stampa .num { text-align: right; white-space: nowrap; }
  .tabella-stampa .riepilogo td, .tabella-stampa .gruppo td { font-weight: 600; background: var(--sintech-grigio); }
  .tabella-stampa .assenza td, .tabella-stampa .interna td { color: var(--testo-tenue); }
}

/* --- pagine con griglia: la pagina sta nello schermo e scorre solo la griglia (righe in alto e colonne a sinistra
   restano sempre visibili); il riepilogo economico è chiuso in fondo e si apre con un clic --------------------- */
.contenuto:has(#griglia) { display: flex; flex-direction: column; height: 100vh; }
.contenuto:has(#griglia) #griglia { flex: 1; min-height: 0; }
.riepilogo-chiuso { flex: none; margin-top: 8px; background: #fff; border: 1px solid var(--bordo); border-radius: 8px; }
.riepilogo-chiuso summary { display: flex; justify-content: space-between; gap: 16px; padding: 8px 14px; cursor: pointer; font-weight: 500; }
.riepilogo-chiuso summary #riepilogo-esito { font-weight: 600; }
.riepilogo-chiuso .riepilogo-economico { margin: 0; max-height: 45vh; overflow-y: auto; }
.riepilogo-chiuso .riepilogo-economico .scheda { border: 0; border-top: 1px solid var(--bordo); border-radius: 0 0 8px 8px; }
@media print { .contenuto:has(#griglia) { display: block; height: auto; } .riepilogo-chiuso summary { display: none; } }

/* --- Annuale: commesse barrate, etichette, commenti sulle celle, finestre ----------------------------------- */
#griglia .tabulator-row.barrata .tabulator-cell { color: var(--testo-tenue); text-decoration: line-through; }
#griglia .tabulator-cell.con-commento { position: relative; }
#griglia .tabulator-cell.con-commento::after {
  content: ""; position: absolute; top: 0; right: 0; border-left: 8px solid transparent; border-top: 8px solid #E24B4A;
}
.tag-riga { font-size: 11px; padding: 1px 6px; border-radius: 4px; white-space: nowrap; text-decoration: none; display: inline-block; }
.tag-riga.da-collegare { background: #FAEEDA; color: #633806; }
.tag-riga.aggiunta { background: #E6F1FB; color: #0C447C; }
.stato-approvazione { font-size: 13px; font-weight: 400; color: var(--testo-tenue); }
.dialogo { border: 1px solid var(--bordo); border-radius: 8px; padding: 20px 24px; max-width: 440px; width: calc(100% - 32px); color: var(--sintech-blu); }
.dialogo::backdrop { background: rgba(8, 14, 43, .35); }
.dialogo form { display: grid; gap: 12px; }
.dialogo h2 { font-size: 16px; margin: 0; }
.dialogo label { display: grid; gap: 4px; font-weight: 500; }
.dialogo input, .dialogo select { padding: 6px 8px; border: 1px solid var(--bordo); border-radius: 6px; font-weight: 400; }
.dialogo .azioni-dialogo { display: flex; justify-content: flex-end; gap: 8px; }
.errore-dialogo { color: var(--sovraccarico); margin: 0; }

/* --- bottone "Esporta" con la scelta CSV / PDF ---------------------------------------------------------------- */
.menu-esporta { position: relative; }
.menu-esporta summary { list-style: none; }
.menu-esporta summary::-webkit-details-marker { display: none; }
.voci-esporta {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 20; display: grid; padding: 4px; white-space: nowrap;
  background: #fff; border: 1px solid var(--bordo); border-radius: 8px; box-shadow: 0 4px 12px rgba(8, 14, 43, .12);
}
.voci-esporta a, .voci-esporta button {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; background: none; text-align: left;
  text-decoration: none; border-radius: 6px; cursor: pointer;
}
.voci-esporta a:hover, .voci-esporta button:hover { background: var(--sintech-grigio); }
.dialogo textarea { padding: 6px 8px; border: 1px solid var(--bordo); border-radius: 6px; font-weight: 400; resize: vertical; }
.dialogo [hidden] { display: none; }

/* --- avviso del mese chiuso (Mese e Settimana, primi giorni del mese dopo) ---------------------------------- */
.avviso-mese { flex: none; margin-bottom: 8px; border: 1px solid #EF9F27; background: #FAEEDA; color: #633806; border-radius: 8px; }
.avviso-mese summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 12px; cursor: pointer; font-weight: 500; }
.avviso-tabelle { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; padding: 0 12px 10px; max-height: 30vh; overflow-y: auto; }
.avviso-tabelle table { border-collapse: collapse; width: 100%; }
.avviso-tabelle th { text-align: left; padding: 4px 6px; }
.avviso-tabelle td { padding: 2px 6px; border-top: 1px solid rgba(186, 117, 23, .25); }
.avviso-tabelle .num { text-align: right; white-space: nowrap; }
@media print { .avviso-mese { display: none; } }