/* assets/gestionale.css
   Foglio di stile condiviso per tutto il Gestionale G.T. Service.
   Ogni pagina, presente e futura, lo richiama invece di duplicare il CSS. */

/* Font forzato uguale per tutti (prima era lo stack di sistema — San
   Francisco su iPhone/Mac, Segoe UI su Windows, Roboto su Android — quindi
   il gestionale appariva visivamente diverso a seconda del dispositivo).
   Inter, la stessa font del corpo testo nel sito pubblico, caricata con
   @import qui (un solo punto, non serve toccare il <head> di ogni pagina).
   File .woff2 ospitati qui (assets/fonts.css + assets/fonts/), non più
   scaricati da Google Fonts — evita di trasmettere l'IP dei visitatori a
   Google ad ogni pagina, indipendentemente dal consenso cookie (lo stesso
   vale per il sito pubblico, vedi assets/fonts.css lì). */
@import url('fonts.css');

:root {
  /* Tema scuro = palette originale. Il tema chiaro è in gestionale_chiaro.css (selettore nel banner). */
  --navy-deep: #22343B;
  --navy: #3D5A66;
  --card-bg: #2c4148;
  --header-bg: #1c2b31;
  --accent: #8FB8C4;
  --red: #EE0005;
  --red-testo: #FF8080;          /* rosso per SCRITTE (il rosso pieno resta per pulsanti e sfondi) */
  --arancio-testo: #E8873A;
  --barra-scura: #22343B;        /* barre di totale/raggruppamento con testo bianco */
  --text: #ffffff;
  --text-muted: #cfd9dc;
  --text-dim: #B0BFC4;
  --text-faint: #98ABB2;
  --border: #3D5A66;
  --errore-bg: #4a2020;
  --errore-text: #ffb3b3;
  --successo-bg: #1c3b2b;
  --successo-text: #a8e0c0;
  --avviso-bg: #3b2f1c;
  --avviso-text: #e0c9a8;
  --messaggio-bg: #1c2b31;
  --messaggio-text: #a8c5cc;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--navy-deep);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px; /* base leggibile su mobile, mai sotto i 16px per evitare zoom automatico iOS sugli input */
}

/* ---------- Layout a card centrata (login, password, form singoli) ---------- */
.pagina-centrata {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  min-height: 100vh;
}
.pagina-centrata .home-banner {
  align-self: stretch;
  margin: -24px -16px 24px;
  width: auto;
}

.card {
  background: var(--card-bg);
  padding: 28px 24px;
  border-radius: 10px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

.header-box {
  background: var(--header-bg);
  border-radius: 8px;
  padding: 16px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 22px;
  flex-wrap: wrap;
  text-align: center;
}
.header-box img { width: 34px; height: 34px; display: block; }
.header-box span { color: var(--text); font-weight: 700; font-size: 15px; letter-spacing: 0.2px; }

h1 { color: var(--accent); font-size: 1.15rem; font-weight: 500; margin: 0 0 2px; text-align: center; }
.sottotitolo, p.desc { color: var(--text-dim); font-size: 0.8rem; text-align: center; margin: 0 0 20px; line-height: 1.5; }

/* ---------- Form ---------- */
label { display: block; color: var(--text-muted); font-size: 0.85rem; margin-bottom: 6px; }

input[type="email"], input[type="password"], input[type="text"], input[type="date"], input[type="file"], select, textarea {
  width: 100%;
  padding: 12px 14px; /* più alto: dita, non cursore */
  margin-bottom: 16px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--navy-deep);
  color: var(--text);
  font-size: 1rem;
  min-height: 44px; /* target minimo touch */
  box-sizing: border-box;
  font-family: inherit;
}
textarea { resize: none; min-height: 120px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); }

/* select e input[type=date] sconfinavano leggermente oltre il bordo destro
   della card su iOS Safari (segnalato con screenshot: i pulsanti, senza
   aspetto nativo, restavano dentro il margine; select/data no) — il
   "chrome" nativo di questi due controlli (freccia del menu a tendina,
   icona/spinner del selettore data) non rispetta sempre con precisione il
   box-sizing:border-box che gli diamo. Tolto l'aspetto nativo del tutto e
   ridisegnata a mano la sola freccia del <select> (l'icona nativa del
   datepicker non serve ridisegnarla: il tocco apre comunque il selettore
   di sistema anche senza mostrare l'icona). */
select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FB8C4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 38px;
}
input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
}

/* Riga per coppie di date "Dal"/"Al" — era duplicata identica in una decina
   di pagine, centralizzata qui. Dopo due tentativi di farle stare affiancate
   quando "c'è spazio" (prima un @media sulla larghezza SCHERMO, poi
   flex-wrap+flex-basis sul CONTENITORE) — entrambi vanificati su almeno un
   dispositivo reale, dove il campo data nativo non si restringe mai
   abbastanza e sfora comunque dal bordo della card — si è scelto di
   arrendersi al vincolo del controllo data nativo: ora "Dal" e "Al" stanno
   SEMPRE una sopra l'altra, su qualunque schermo, nessuna condizione. Non è
   più un problema responsive da indovinare, è una scelta di layout fissa. */
.riga-due { display: flex; flex-direction: column; gap: 12px; }
.riga-due > div { width: 100%; }

button, a.btn {
  width: 100%;
  padding: 9px;
  border: none;
  border-radius: 6px;
  background: var(--red);
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  min-height: 36px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  box-sizing: border-box;
}
button:hover, a.btn:hover { opacity: 0.9; }
.small {
  display: inline-block;
  width: auto;
  background: var(--navy);
  color: #fff;
  padding: 8px 14px;
  font-size: 0.8rem;
  min-height: 38px;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  box-sizing: border-box;
}
.small.pericolo { background: #6b2a2a; }
.small.btn-successo { background: #1c5c38; }

/* Variante non rossa di .btn — per pulsanti che rivelano un form (azione
   secondaria/neutra), da non confondere visivamente con le azioni primarie/
   distruttive che restano rosse. Stessa dimensione del pulsante di base
   (non più il precedente 13px/46px/0.95rem, ridotto su richiesta esplicita
   dopo aver visto le versioni "sottili" introdotte per alcuni gruppi di
   pulsanti in oggi.php/calendario.php/gestisci_presenze.php — piaciute al
   punto da diventare la taglia standard ovunque; le classi `.btn-sottile`/
   `.btn-secondario-sottile` usate lì sono state rimosse perché ora
   equivalenti alle classi base). */
.btn-secondario {
  width: 100%; padding: 9px; border: none; border-radius: 6px;
  background: var(--navy); color: #fff; font-weight: 600; font-size: 0.85rem;
  cursor: pointer; min-height: 36px; text-align: center; text-decoration: none;
  display: inline-block; box-sizing: border-box;
}
.btn-secondario:hover { opacity: 0.9; }

/* ---------- Messaggi di stato ---------- */
.errore { background: var(--errore-bg); color: var(--errore-text); padding: 11px 14px; border-radius: 6px; font-size: 0.85rem; margin-bottom: 16px; text-align: center; }
.successo { background: var(--successo-bg); color: var(--successo-text); padding: 14px; border-radius: 6px; font-size: 0.85rem; margin-bottom: 16px; line-height: 1.6; }
.avviso { background: var(--avviso-bg); color: var(--avviso-text); padding: 11px 14px; border-radius: 6px; font-size: 0.82rem; text-align: center; margin-bottom: 18px; line-height: 1.5; }
.messaggio { background: var(--messaggio-bg); color: var(--messaggio-text); padding: 11px 14px; border-radius: 6px; font-size: 0.85rem; margin-bottom: 18px; line-height: 1.5; }

.password-box {
  background: var(--header-bg); color: #fff; font-family: monospace; font-size: 1.05rem;
  padding: 12px; border-radius: 6px; text-align: center; margin: 10px 0; letter-spacing: 0.5px;
  word-break: break-all;
}
.avviso-piccolo { color: var(--text-dim); font-size: 0.75rem; line-height: 1.5; }

/* Link senza stile proprio: colore accento invece del blu di default del
   browser (illeggibile sullo sfondo scuro). Specificità minima: ogni classe
   o contenitore che già colora i suoi link continua a vincere. */
a, a:visited { color: var(--accent); }

.riga-opzioni { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; font-size: 0.8rem; gap: 10px; flex-wrap: wrap; }
.riga-opzioni label { display: flex; align-items: center; gap: 6px; color: var(--text-muted); margin: 0; cursor: pointer; }
.riga-opzioni input[type="checkbox"] { accent-color: var(--red); width: 16px; height: 16px; }
.riga-opzioni a { color: var(--accent); text-decoration: none; }

a.torna, a.link-secondario { display: block; text-align: center; margin-top: 18px; color: var(--accent); font-size: 0.8rem; text-decoration: none; }

.link-contatto { color: var(--accent); text-decoration: none; }
.link-contatto:hover { text-decoration: underline; }

.home-banner {
  background: var(--header-bg); width: 100%; box-sizing: border-box;
  /* Testata più alta: sotto la barra di stato (env = 0 nel browser normale) c'è
     più aria sopra il logo, così l'app dalla Home iPhone non sembra "sfumata"
     — la testata arriva fino al bordo alto dello schermo (status bar
     translucent + viewport-fit=cover). */
  padding: 14px max(20px, env(safe-area-inset-right)) 16px max(20px, env(safe-area-inset-left));
  padding-top: calc(env(safe-area-inset-top) + 18px);
}
.home-banner-inner { max-width: 960px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.home-banner .logo-riga { display: flex; align-items: center; gap: 12px; }
.home-banner img.logo { width: 42px; height: 42px; flex-shrink: 0; }
.home-banner .nome-ditta { color: #fff; font-weight: 700; font-size: 1.05rem; }
.home-banner a.link-azienda { color: var(--accent); font-size: 0.8rem; text-decoration: none; white-space: nowrap; }
.home-banner a.link-azienda:hover { text-decoration: underline; }

/* Nelle pagine con contenitore centrato e margine (pagina-larga), il banner
   deve comunque toccare i bordi dello schermo come in home, non restare
   incorniciato dentro il margine del contenitore. */
.pagina-larga .home-banner {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: -24px;
  margin-bottom: 20px;
}
@media (min-width: 700px) {
  .home-banner { padding: 20px 24px; padding-top: calc(env(safe-area-inset-top) + 22px); }
  .home-banner img.logo { width: 50px; height: 50px; }
  .home-banner .nome-ditta { font-size: 1.2rem; }
}

.nota-referente {
  margin-top: 6px; padding: 6px 10px; background: rgba(238,0,5,0.12); border-left: 3px solid var(--red);
  border-radius: 4px; font-size: 0.78rem; color: var(--errore-text);
}

/* Su schermi larghi, i pulsanti di azione (Dettagli/Elimina ecc.) devono
   stare sempre su una riga sola, non andare a capo come su mobile. */
@media (min-width: 700px) {
  .azioni { flex-wrap: nowrap; }
}

/* Stacco tra gruppi in un elenco (es. Aziende/Condomini, Titolari/Dipendenti):
   solo spazio, nessuna riga divisoria. */
.gruppo-separatore {
  color: var(--accent); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;
  font-weight: 600; margin: 44px 0 12px;
}
.gruppo-separatore:first-child { margin-top: 0; }
tr.gruppo-separatore-riga td {
  color: var(--accent); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;
  font-weight: 600; padding: 36px 8px 14px !important; border: none !important; background: transparent;
}
tbody tr.gruppo-separatore-riga:first-child td { padding-top: 10px !important; }

/* Sezioni "a discesa" (Contatti utili, Documenti azienda, Moduli e circolari):
   titolo più grande, ciascuna sezione apribile/richiudibile a scelta. */
.sezione-titolo-riga { display: flex; align-items: center; justify-content: space-between; margin: 40px 0 12px; }
.sezione-titolo-riga:first-of-type { margin-top: 0; }
.sezione-titolo { color: var(--text); font-size: 1.05rem; font-weight: 700; display: block; margin: 40px 0 12px; }
.sezione-titolo:first-of-type { margin-top: 0; }
.sezione-titolo-riga .sezione-titolo { margin: 0; }

details.sezione-discesa { margin-bottom: 4px; }
details.sezione-discesa summary.sezione-titolo {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px;
}
details.sezione-discesa summary.sezione-titolo::-webkit-details-marker { display: none; }
details.sezione-discesa summary.sezione-titolo::before {
  content: '▸'; color: var(--accent); font-size: 0.85rem; transition: transform 0.15s ease; display: inline-block;
}
details.sezione-discesa[open] summary.sezione-titolo::before { transform: rotate(90deg); }
.conteggio-sezione { color: var(--text-faint); font-size: 0.78rem; font-weight: 400; }

/* ---------- Layout a pagina larga (dashboard, elenchi) ---------- */
.pagina-larga { padding: 24px 16px 48px; max-width: 1000px; margin: 0 auto; }

.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 12px; flex-wrap: wrap; }
.topbar h1 { margin: 0; text-align: left; }
.topbar .btn { width: auto; padding: 10px 18px; }

/* ---------- Tabelle responsive ---------- */
.tabella-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  background: var(--card-bg);
}
table { width: 100%; min-width: 640px; border-collapse: collapse; }
th, td { padding: 12px; text-align: left; font-size: 0.85rem; border-bottom: 1px solid var(--navy-deep); }
th { color: var(--accent); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
td { color: var(--text-muted); }

.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.badge.attivo { background: var(--successo-bg); color: var(--successo-text); }
.badge.disattivo { background: var(--errore-bg); color: var(--errore-text); }
.badge.assegnato { background: var(--successo-bg); color: var(--successo-text); border: 1px solid var(--successo-text); }
.badge.non-assegnato { background: var(--errore-bg); color: var(--errore-text); border: 1px solid var(--errore-text); }

/* Scadenze automezzi (bollo/assicurazione/revisione) — stesso schema
   cromatico di .badge, riusato per le celle data invece che per un pallino. */
.scadenza-ok { color: var(--successo-text); }
.scadenza-vicina { color: var(--avviso-text); font-weight: 600; }
.scadenza-scaduta { color: var(--errore-text); font-weight: 700; }

/* Logo marca automezzo — chip bianco a prescindere dal colore del loghetto
   (spesso monocromatico nero), così resta leggibile anche sullo sfondo scuro
   del gestionale senza dover invertire ogni singola icona. */
.chip-marca {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; background: #fff; border-radius: 8px;
    padding: 6px; margin-right: 8px; vertical-align: middle; flex-shrink: 0;
    box-sizing: border-box;
}
.chip-marca img { width: 100%; height: 100%; object-fit: contain; display: block; }

.azioni { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.azioni form { display: inline; margin: 0; }
.azioni select { width: auto; margin-bottom: 0; min-height: 38px; padding: 6px 8px; font-size: 0.8rem; }
.tu-stesso { color: var(--text-faint); font-size: 0.78rem; font-style: italic; }

.info-riga { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--navy-deep); font-size: 0.9rem; }
.info-riga span:first-child { color: var(--text-dim); flex-shrink: 0; }
.info-riga span:last-child { text-align: right; word-break: break-word; }

.contatti-referente { color: var(--accent); font-size: 0.72rem; letter-spacing: 0.02em; }

/* ---------- Utility: mostra solo su desktop / solo su mobile ---------- */
.solo-mobile { display: none; }
.solo-desktop { display: block; }
.nascosto { display: none !important; }

/* ---------- Elenco a fisarmonica (mobile) ---------- */
.cliente-accordion {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
}
.cliente-accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
  gap: 10px;
}
.cliente-accordion-header .nome { font-weight: 600; font-size: 0.95rem; }
.cliente-accordion-header .chevron { color: var(--accent); font-size: 0.9rem; }
.cliente-accordion-dettagli {
  display: none;
  padding: 0 16px 16px;
  border-top: 1px solid var(--navy-deep);
}
.cliente-accordion-dettagli .info-riga { border-bottom: 1px solid var(--navy-deep); }
.cliente-accordion-dettagli .btn { width: 100%; text-align: center; }

/* ---------- Adattamenti per schermi stretti (telefoni) ---------- */
@media (max-width: 700px) {
  .solo-desktop { display: none; }
  .solo-mobile { display: block; }
  .tabella-scroll { overflow-x: visible; }
  table { min-width: 0; width: 100%; }
  thead { display: none; }
  table, tbody, tr, td { display: block; width: 100%; }
  tr {
    background: var(--navy-deep);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
  }
  td {
    border-bottom: none;
    padding: 7px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    text-align: right;
  }
  td::before {
    content: attr(data-label);
    color: var(--accent);
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: left;
    flex-shrink: 0;
  }
  td.cella-azioni {
    display: block;
    text-align: left;
  }
  td.cella-azioni::before {
    display: block;
    margin-bottom: 8px;
  }
}

@media (max-width: 480px) {
  .card { padding: 22px 18px; border-radius: 8px; }
  h1 { font-size: 1.05rem; }
  .topbar { flex-direction: column; align-items: stretch; }
  .topbar .btn { width: 100%; }
  .azioni { flex-direction: column; align-items: stretch; }
  .azioni form, .azioni select, .azioni button, .azioni a { width: 100%; text-align: center; }
  button.small { width: 100%; }
}

/* Selettore ore straordinarie: input grande + frecce su/giù più comode al
   tocco dei minuscoli spinner nativi di <input type="number">. Verticale
   (− sopra, campo al centro, + sotto) invece che in riga: affiancati
   orizzontalmente (due bottoni 46px + un campo fino a 100px) non ci
   stavano nella colonna stretta di ".riga-due" su mobile, sconfinando
   fuori dalla card. */
.selettore-ore-btn { width: 46px; height: 46px; font-size: 1.5rem; padding: 0; flex-shrink: 0; line-height: 1; box-sizing: border-box; }
.selettore-ore-input { text-align: center; font-size: 1.2rem; max-width: 100px; margin-bottom: 0; }
/* column-reverse: nel markup l'ordine è sempre [−][campo][+], qui capovolto
   in verticale così il "+" sta sopra e il "−" sotto (richiesto esplicitamente
   per l'indicatore straordinario/credito con segno — partendo da 0, "+" in
   alto è più intuitivo) — un solo punto da cambiare, nessun markup toccato. */
.selettore-ore-gruppo { display: flex; flex-direction: column-reverse; align-items: center; gap: 6px; }

/* Programma giornaliero (lavori regolari/straordinari/extra + roster) —
   condiviso tra oggi.php e calendario.php (che mostra lo stesso programma
   sotto la griglia mensile per il giorno cliccato, "a specchio"): prima
   viveva solo nello <style> di oggi.php, spostato qui perché ora serve a
   entrambe le pagine. */
.roster-riga { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--navy-deep); font-size: 0.85rem; }
.roster-riga:last-child { border-bottom: none; }
.roster-nome { display: flex; flex-direction: column; }
.roster-gruppo { font-size: 0.7rem; color: var(--text-dim); }
.lavoro-item {
  background: var(--navy-deep); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; margin-bottom: 10px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px;
}
/* Il blocco "↔ Riassegna" (pulsante + pannello, con Nuova data e le tre
   liste squadre/dipendenti/collaboratori) va sempre a capo su una riga
   propria a piena larghezza — senza, essendo .lavoro-item un flex-row,
   finiva schiacciato in una colonna stretta accanto al contenuto
   principale non appena il pannello si apriva (troppi campi per stare
   nello spazio residuo della riga). */
.riassegna-blocco { flex-basis: 100%; width: 100%; }
.lavoro-item .cadenza-tag { color: var(--accent); font-size: 0.75rem; }
.lavoro-fatto { opacity: 0.55; }
.lavoro-fatto .cadenza-tag { color: var(--text-dim); }
.titolo-squadra { color: var(--accent); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; margin: 4px 0 10px; }
/* Separa visivamente il blocco di ogni singolo dipendente/collaboratore
   dentro "Assegnazioni a singoli dipendenti"/"Collaboratori esterni" — non
   più con una linea/bordo tra un blocco e l'altro (tolta su richiesta
   esplicita), solo con lo spazio verticale e la casella-nome qui sotto
   (.etichetta-persona), già di per sé un delimitatore netto. */
.blocco-persona { margin-top: 18px; }
.blocco-persona:first-child { margin-top: 0; }
/* Nome della persona (dipendente/collaboratore) dentro .blocco-persona —
   una casella piena, larga quanto la card, contorno accent e testo
   bianco, non più semplice testo colorato senza bordo. */
.etichetta-persona {
  display: block; width: 100%; box-sizing: border-box;
  border: 1px solid var(--accent); border-radius: 6px;
  color: #fff; background: var(--navy-deep);
  padding: 7px 12px; margin: 0 0 10px;
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.separatore-straordinari { color: var(--red-testo); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin: 16px 0 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.separatore-straordinari:first-child { margin-top: 4px; padding-top: 0; border-top: none; }
.separatore-extra { color: var(--accent); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin: 16px 0 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.separatore-extra:first-child { margin-top: 4px; padding-top: 0; border-top: none; }
.etichetta-straordinario { color: var(--red) !important; font-weight: 600; }
.elenco-straordinari-compatto { margin-bottom: 8px; }
.riga-straordinario-compatta { padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 0.85rem; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.riga-straordinario-compatta:last-child { border-bottom: none; }
.btn-salta-compatto {
  width: auto; height: 28px; min-height: 0; padding: 0 10px; font-size: 0.72rem; flex-shrink: 0;
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
}

/* Titolo a scomparsa delle sotto-sezioni (Squadra/Assegnazioni a singoli
   dipendenti/Collaboratori esterni in oggi.php e calendario.php,
   Interventi regolari/straordinari/Listino in clienti/scheda.php) — prima
   duplicato lì, ora condiviso. */
.titolo-sezione-clienti {
  cursor: pointer; list-style: none; color: var(--accent); font-size: 1.15rem; font-weight: 500;
  display: flex; align-items: center; gap: 8px; text-align: left;
}
.titolo-sezione-clienti::-webkit-details-marker { display: none; }
.titolo-sezione-clienti::before { content: '▸'; font-size: 0.85rem; transition: transform 0.15s ease; }
details[open] > .titolo-sezione-clienti::before { transform: rotate(90deg); }

/* Variante più piccola/discreta di .titolo-sezione-clienti, per una
   sotto-sezione ANNIDATA dentro una sezione a scomparsa già esistente
   (es. "Lavori ordinari" dentro "Le tue attività"/Squadra X) — stessa
   meccanica di apertura/triangolo, ma dimensione in stile .titolo-squadra
   per non competere visivamente con il titolo della sezione madre. */
.titolo-sotto-sezione {
  cursor: pointer; list-style: none; color: var(--accent); font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
  display: flex; align-items: center; gap: 8px; margin: 4px 0 10px;
}
.titolo-sotto-sezione::-webkit-details-marker { display: none; }
.titolo-sotto-sezione::before { content: '▸'; font-size: 0.75rem; transition: transform 0.15s ease; }
details[open] > .titolo-sotto-sezione::before { transform: rotate(90deg); }

/* Griglia di tile a icona (dashboard.php e le sue sotto-dashboard, es.
   contabilita/index.php) — spostata qui da dashboard.php appena una
   seconda pagina ne ha avuto bisogno, per non duplicarla. */
.griglia-sezioni { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

.tile-sezione {
  position: relative;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 10px; text-decoration: none; color: var(--text); text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 92px; box-sizing: border-box;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
/* L'icona sta dentro una "pastiglia" circolare colorata invece che nuda
   sullo sfondo della card — stesso principio dei chip marca automezzi, qui
   usato per dare a ogni sezione un colore riconoscibile a colpo d'occhio
   (richiesto esplicitamente: più contrasto/colore, pulsanti più grandi).
   Il colore ruota per POSIZIONE nella griglia (nth-child), non per
   significato della sezione: vale quindi automaticamente per qualunque
   griglia .tile-sezione presente o futura (dashboard.php e
   contabilita/index.php la condividono già), senza dover assegnare un
   colore a mano sezione per sezione. */
.tile-sezione svg {
  width: 26px; height: 26px; flex-shrink: 0; box-sizing: content-box;
  padding: 11px; border-radius: 50%; color: var(--accent); background: rgba(143,184,196,0.16);
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.tile-sezione .titolo-sezione { font-size: 0.84rem; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex-shrink: 0; width: 100%; }
.tile-sezione .descrizione-sezione { display: none; }

.tile-inattiva { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.tile-inattiva .titolo-sezione::after { content: " (presto)"; font-weight: 400; font-size: 0.68rem; color: var(--text-faint); display: block; margin-top: 2px; }

a.tile-sezione:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 10px 22px rgba(0,0,0,0.3); }
a.tile-sezione:hover svg { transform: scale(1.08); }

/* Colore per SIGNIFICATO della sezione (richiesto esplicitamente), non più
   per posizione nella griglia — ogni tile porta un attributo
   data-colore="..." (impostato in PHP insieme a titolo/href/icona) che
   sceglie qui sia il colore dell'icona sia il bagliore in hover. Stesso
   principio grafico di prima (icona in tinta piena, pastiglia nella stessa
   tinta molto tenue) solo con la chiave cambiata da nth-child a attributo. */
.griglia-sezioni .tile-sezione[data-colore="giallo"] svg { color: #E0B94D; background: rgba(224,185,77,0.16); }
.griglia-sezioni .tile-sezione[data-colore="giallo"]:hover { box-shadow: 0 10px 22px rgba(224,185,77,0.3); }
.griglia-sezioni .tile-sezione[data-colore="blu"] svg { color: #5B8DEF; background: rgba(91,141,239,0.16); }
.griglia-sezioni .tile-sezione[data-colore="blu"]:hover { box-shadow: 0 10px 22px rgba(91,141,239,0.3); }
.griglia-sezioni .tile-sezione[data-colore="rosso"] svg { color: var(--red); background: rgba(238,0,5,0.16); }
.griglia-sezioni .tile-sezione[data-colore="rosso"]:hover { box-shadow: 0 10px 22px rgba(238,0,5,0.3); }
.griglia-sezioni .tile-sezione[data-colore="viola"] svg { color: #A47FD9; background: rgba(164,127,217,0.16); }
.griglia-sezioni .tile-sezione[data-colore="viola"]:hover { box-shadow: 0 10px 22px rgba(164,127,217,0.3); }
.griglia-sezioni .tile-sezione[data-colore="arancio"] svg { color: #E08A3D; background: rgba(224,138,61,0.16); }
.griglia-sezioni .tile-sezione[data-colore="arancio"]:hover { box-shadow: 0 10px 22px rgba(224,138,61,0.3); }
.griglia-sezioni .tile-sezione[data-colore="teal"] svg { color: #4FB3A9; background: rgba(79,179,169,0.16); }
.griglia-sezioni .tile-sezione[data-colore="teal"]:hover { box-shadow: 0 10px 22px rgba(79,179,169,0.3); }
.griglia-sezioni .tile-sezione[data-colore="verde"] svg { color: #6FBF8B; background: rgba(111,191,139,0.16); }
.griglia-sezioni .tile-sezione[data-colore="verde"]:hover { box-shadow: 0 10px 22px rgba(111,191,139,0.3); }
.griglia-sezioni .tile-sezione[data-colore="accent"]:hover { box-shadow: 0 10px 22px rgba(143,184,196,0.3); }

@media (min-width: 700px) {
  .griglia-sezioni { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .tile-sezione { min-height: 142px; padding: 22px 16px; gap: 12px; }
  .tile-sezione svg { width: 36px; height: 36px; padding: 13px; }
  .tile-sezione .titolo-sezione { font-size: 0.98rem; }
  .tile-sezione .descrizione-sezione { display: -webkit-box; font-size: 0.74rem; color: var(--text-dim); -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; flex-shrink: 0; width: 100%; }
}


/* Pulsante "Tema chiaro/scuro" nel banner (includes/banner_gt.php) */
.home-banner .banner-destra { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.home-banner .toggle-tema {
  width: auto; min-height: auto; padding: 4px 12px; border-radius: 999px;
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.45);
  font-size: 0.75rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.home-banner .toggle-tema:hover { background: rgba(255,255,255,0.12); }


/* ===== Mobile: testi e pulsanti più grandi da toccare ===== */
@media (max-width: 700px) {
  /* Pulsanti piccoli: area di tocco di almeno ~38px */
  button.small, a.small, .btn-salta-compatto { min-height: 38px !important; }
  .btn-salta-compatto { height: 38px !important; padding: 0 14px !important; font-size: 0.8rem !important; }
  /* Scritte minuscole (sotto ~11px) portate a una misura leggibile */
  .badge { font-size: 0.72rem !important; }
  .dettaglio-mobile { font-size: 0.75rem !important; }
  .dettaglio-mobile .badge { font-size: 0.7rem !important; }
  .num-fatt-mini { font-size: 0.72rem !important; }
  table.ritenute td button.small { font-size: 0.72rem !important; }
  .chip-fattura button, .pillola-categoria button { min-height: 32px !important; min-width: 32px; }
  table.ritenute th { font-size: 0.68rem !important; }
  .riga-movimento .et, .dettaglio-movimento .et { font-size: 0.72rem !important; }
}


/* ===== Dashboard: ricerca e "Da controllare" ===== */
.ricerca-dash { margin: 0 0 14px; }
.ricerca-dash input { margin: 0; }
.avvisi-dash { margin-top: 22px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.avvisi-titolo { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); font-weight: 700; margin-bottom: 4px; }
.avviso-riga { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: 0.88rem; }
.avviso-riga:last-child { border-bottom: none; }
.avviso-riga:hover { background: rgba(127,145,152,0.12); }
.avviso-n { min-width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--navy); color: #fff; font-weight: 700; font-size: 0.82rem; flex-shrink: 0; }
.avviso-riga.urgente .avviso-n { background: #C62828; }
.avviso-freccia { margin-left: auto; color: var(--text-dim); font-size: 1.2rem; }


/* iPhone (app dalla Home): lo schermo arriva sotto la barra di stato e il
   gesto Home — margini di sicurezza per le pagine senza testata e per il fondo. */
body { padding-bottom: env(safe-area-inset-bottom); }
.pagina-centrata { padding-top: calc(24px + env(safe-area-inset-top)); }


/* Barra di stato del telefono: Safari/iOS la colora con lo sfondo in alto della pagina
   (non più con il tag theme-color). Le prime righe dello sfondo hanno quindi lo stesso
   colore della testata, così la testata "sale" fino al bordo dello schermo senza la
   fascia di un altro colore. La fascia è più bassa della testata, quindi non si vede
   nel resto della pagina. Solo nelle pagine con testata direttamente nel body. */
body:has(> .home-banner) {
  background-image: linear-gradient(var(--header-bg), var(--header-bg));
  background-size: 100% 56px;
  background-repeat: no-repeat;
}


/* Mobile: un po' più di spazio sopra logo e nome nella testata (anche nel browser) */
@media (max-width: 700px) {
  .home-banner { padding-top: calc(env(safe-area-inset-top) + 28px); }
}

/* App installata dalla Home (iPhone/Android): più spazio sopra logo e nome, lontano
   dalla fascia della barra di stato che il sistema sfuma. */
@media (display-mode: standalone) {
  .home-banner { padding-top: calc(env(safe-area-inset-top) + 34px); }
}

html.app-standalone .home-banner { padding-top: calc(env(safe-area-inset-top) + 34px); }


/* ===== Anno di consultazione (dashboard) ===== */
.anno-dash { margin-top: 16px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.anno-dash-riga { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 6px; }
.anno-dash-riga a { color: var(--accent); text-decoration: none; font-weight: 600; font-size: 0.95rem; min-width: 70px; }
.anno-dash-riga a:last-child { text-align: right; }
.anno-dash-riga strong { color: var(--accent); font-size: 1.35rem; }
.anno-dash-nota { font-size: 0.76rem; color: var(--text-dim); text-align: center; margin-top: 4px; }
.anno-dash-nota a { color: var(--accent); }
.tile-anno { position: absolute; top: 8px; left: 8px; font-size: 0.66rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: var(--navy-deep); }
.anno-nav-banner { text-align: center; font-size: 0.82rem; padding: 6px 12px; background: var(--accent); color: var(--navy-deep); margin: -8px 0 10px; }
.anno-nav-banner a { color: var(--navy-deep); font-weight: 700; text-decoration: underline; }