/* ============================================================
   Gestionale Scadenzario — stile piatto (flat)
   Brand: navy del logo FP + palette di stato validata
   ============================================================ */
:root {
  --fp-navy: #2b3a80;          /* blu del logo FP */
  --fp-navy-scuro: #1f2c66;
  --fp-grigio: #8a8a8a;        /* grigio del logo FP */
  --pagina: #f4f5f8;
  --carta: #ffffff;
  --bordo: #e4e6ec;
  --ink: #1c1d21;
  --ink-2: #52565e;
  --muted: #8b8f98;
  /* palette di stato (validata: good/warning/serious/critical) */
  --st-ok: #0ca30c;
  --st-30: #fab219;
  --st-10: #ec835a;
  --st-scad: #d03b3b;
  /* palette categoriale (slot 1-3) per i tipi di scadenza */
  --cat-visita: #2a78d6;
  --cat-corso: #1baf7a;
  --cat-patentino: #eda100;
}

body { background: var(--pagina); color: var(--ink); }

/* ---------- navbar chiara con logo ---------- */
.navbar-fp { background: var(--carta); border-bottom: 1px solid var(--bordo); }
.navbar-fp .navbar-brand img { height: 40px; }
.navbar-fp .nav-link { color: var(--ink-2); font-weight: 500; }
.navbar-fp .nav-link:hover, .navbar-fp .nav-link.active { color: var(--fp-navy); }
.btn-primary { background: var(--fp-navy); border-color: var(--fp-navy); }
.btn-primary:hover { background: var(--fp-navy-scuro); border-color: var(--fp-navy-scuro); }
a { color: var(--fp-navy); }
a { text-decoration: none; }

/* ---------- card piatte ---------- */
.card { border: 1px solid var(--bordo); border-radius: .75rem; box-shadow: none; }
.card .card-header { background: var(--carta); border-bottom: 1px solid var(--bordo);
                     border-radius: .75rem .75rem 0 0; }

/* ---------- badge semaforo (pallino + testo, mai solo colore) ---------- */
.sem-badge { border-radius: 1rem; padding: .15rem .6rem; display: inline-block;
             font-size: .82rem; white-space: nowrap; font-weight: 600; }
.sem-rosso   { background: #fbe9e9; color: #a32424; }
.sem-arancio { background: #fdefe8; color: #b04a1d; }
.sem-giallo  { background: #fdf3d7; color: #8a6403; }
.sem-verde   { background: #e7f6e7; color: #0a7d0a; }
.sem-grigio  { background: #eef0f2; color: #5a6570; }

/* Pallini di stato: cerchietti CSS al posto delle emoji
   (segnaposto in attesa delle icone lucide.dev) */
.pallino { width: 10px; height: 10px; border-radius: 50%;
           display: inline-block; margin-right: .35rem; }
.pallino-rosso   { background: #c0392b; }
.pallino-arancio { background: #d9702c; }
.pallino-giallo  { background: #d4a90b; }
.pallino-verde   { background: #199a19; }
.pallino-grigio  { background: #9aa4ad; }

/* ---------- stat tile (numero-eroe) ---------- */
.tile { background: var(--carta); border: 1px solid var(--bordo); border-radius: .75rem;
        padding: 1rem 1.15rem; height: 100%; }
.tile .etichetta { font-size: .72rem; font-weight: 700; letter-spacing: .06em;
                   text-transform: uppercase; color: var(--muted); }
.tile .numero { font-size: 1.9rem; font-weight: 700; line-height: 1.15; color: var(--ink); }
.tile .sotto { font-size: .78rem; color: var(--ink-2); }
.tile .icona { width: 42px; height: 42px; border-radius: .6rem; display: flex;
               align-items: center; justify-content: center; font-size: 1.25rem; }

/* ---------- anello (donut) di stato ---------- */
.anello-card { text-align: center; padding: 1.1rem .5rem; }
.anello { position: relative; width: 108px; height: 108px; margin: 0 auto .35rem; }
.anello svg { transform: rotate(-90deg); }
.anello .traccia { fill: none; stroke: #eef0f4; stroke-width: 10; }
.anello .valore  { fill: none; stroke-width: 10; stroke-linecap: round;
                   transition: stroke-dashoffset .6s ease; }
.anello .centro { position: absolute; inset: 0; display: flex; flex-direction: column;
                  align-items: center; justify-content: center; }
.anello .centro b { font-size: 1.45rem; line-height: 1; }
.anello .centro small { color: var(--muted); font-size: .68rem; }

/* ---------- grafico a barre (12 mesi) ---------- */
.grafico-barre { display: flex; align-items: flex-end; gap: 10px;
                 height: 190px; padding: .25rem .25rem 0; }
.gb-col { flex: 1; display: flex; flex-direction: column; align-items: center;
          justify-content: flex-end; height: 100%; min-width: 0; }
.gb-barra { width: 100%; max-width: 34px; background: var(--fp-navy);
            border-radius: 4px 4px 0 0; min-height: 2px; position: relative;
            transition: background .15s; }
.gb-col:hover .gb-barra { background: var(--fp-navy-scuro); }
.gb-val { font-size: .72rem; color: var(--muted); margin-bottom: 3px;
          visibility: hidden; }
.gb-col:hover .gb-val, .gb-col.evidenza .gb-val { visibility: visible; }
.gb-mese { font-size: .68rem; font-weight: 600; letter-spacing: .03em;
           color: var(--muted); margin-top: 6px; }

/* ---------- barre orizzontali per tipo ---------- */
.tipo-riga { display: flex; align-items: center; gap: .6rem; margin-bottom: .85rem; }
.tipo-riga .tipo-nome { width: 40%; font-size: .82rem; color: var(--ink-2);
                        display: flex; align-items: center; gap: .4rem; }
.tipo-pallino { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.tipo-riga .tipo-binario { flex: 1; height: 10px; background: #eef0f4;
                           border-radius: 5px; overflow: hidden; }
.tipo-riga .tipo-quota { height: 100%; border-radius: 5px; }
.tipo-riga .tipo-num { width: 3.2rem; text-align: right; font-weight: 700; font-size: .85rem; }

/* ---------- tabelle ---------- */
.tab-scadenzario td, .tab-scadenzario th { vertical-align: middle; }
.riga-scaduta { background: #fdf5f4 !important; }
.table-light th { background: #f7f8fa; color: var(--ink-2); font-size: .8rem;
                  text-transform: uppercase; letter-spacing: .04em; }

/* ---------- calendario ---------- */
.cal-cella { min-height: 90px; vertical-align: top; width: 14.28%; }
.cal-evento { font-size: .72rem; border-radius: .3rem; padding: 1px 4px; margin-bottom: 2px;
              display: block; overflow: hidden; text-overflow: ellipsis;
              white-space: nowrap; text-decoration: none; }

/* ---------- firma HMD ---------- */
.firma-hmd { text-align: right; font-size: .74rem; color: var(--muted);
             padding: 1.2rem .25rem 1rem; }
.firma-hmd b { color: var(--fp-navy); }

/* ---------- panoramica azienda (issue #9, 25/09/2026) ----------
   Dipendenti per corsi/visite in una griglia sola, a grandezza piena: se e'
   piu' larga della finestra si scorre in orizzontale, mai rimpicciolita
   (scelta di Armando: meglio scorrere che leggere in piccolo). La tabella
   tiene la sua larghezza naturale (max-content): senza, si stringerebbe da
   sola mandando a capo nomi, luoghi di nascita e mansioni. Il contenitore
   finisce dove finisce la tabella (fit-content): con poche colonne non resta
   un riquadro bianco vuoto a destra. Intestazione e prima colonna restano ferme
   mentre la griglia scorre dentro il contenitore; per questo hanno uno sfondo
   pieno, altrimenti le righe ci passerebbero sotto in trasparenza. */
.panoramica-azienda { display: flex; flex-wrap: wrap; gap: .15rem 1.1rem; color: var(--ink-2); }
.panoramica-azienda b, .panoramica-certificati > b {
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); margin-right: .2rem; }
.panoramica-azienda .sem-badge, .panoramica-certificati .sem-badge,
.panoramica-riepilogo .sem-badge { font-size: .72rem; padding: .05rem .45rem; }
.panoramica-riepilogo { color: var(--ink-2); }

.panoramica-contenitore { overflow: auto; max-height: calc(100vh - 9rem);
                          width: fit-content; max-width: 100%;
                          background: var(--carta); border: 1px solid var(--bordo);
                          border-radius: .5rem; }
.tab-panoramica { width: max-content; border-collapse: separate; border-spacing: 0;
                  font-size: .9rem; line-height: 1.3; font-variant-numeric: tabular-nums; }
.tab-panoramica th, .tab-panoramica td { padding: .3rem .45rem; vertical-align: middle;
                                         border-right: 1px solid var(--bordo);
                                         border-bottom: 1px solid var(--bordo); }
.tab-panoramica thead th { position: sticky; top: 0; z-index: 2; background: #f7f8fa;
                           color: var(--ink-2); font-size: .74rem; font-weight: 700;
                           letter-spacing: .02em; text-transform: uppercase;
                           vertical-align: bottom; border-bottom-color: #cfd3dc; }
.tab-panoramica th.col-titolo { text-align: center; }
/* max-width su un blocco interno e non sulla cella: sulle celle di tabella
   i browser la ignorano. Le intestazioni vanno a capo poco oltre la larghezza
   di una data; luogo di nascita e mansione solo oltre i 20rem, dove ci sta
   anche «CASTELLAMMARE DI STABIA, 02/02/1966»: righe tutte alte uguali, e piu'
   righe a vista. */
.tab-panoramica .intestazione { max-width: 6.5rem; margin: 0 auto; }
.tab-panoramica .limita { max-width: 20rem; }
.tab-panoramica .col-dip { position: sticky; left: 0; z-index: 1; background: var(--carta);
                           border-right-color: #cfd3dc; }
.tab-panoramica .col-dip .limita { max-width: 16rem; }
.tab-panoramica thead .col-dip { z-index: 3; background: #f7f8fa; }
.tab-panoramica .col-cf { white-space: nowrap; color: var(--ink-2); }
/* le celle-data riusano i colori .sem-* dello scadenzario */
.tab-panoramica td.cella { padding: 0; text-align: center; white-space: nowrap; }
.tab-panoramica td.cella a { display: block; padding: .3rem .45rem; color: inherit;
                             font-weight: 600; }
.tab-panoramica td.cella a:hover { text-decoration: underline; }
.tab-panoramica .senza-data { font-size: .76rem; font-weight: 400; }
/* la riga sotto il mouse si segue meglio attraverso venti colonne */
.tab-panoramica tbody tr:hover > td { box-shadow: inset 0 0 0 9999px rgba(43, 58, 128, .07); }
.tab-panoramica tr.riga-cessato > td { background: #eef0f2; color: #5a6570; }
/* Le celle strette della stampa (vedi @media print qui sotto), applicate per
   un istante dallo script della pagina mentre misura quanto rimpicciolire la
   griglia sul foglio: misurata con i margini larghi dello schermo, sulla carta
   usciva piu' piccola del necessario. td.cella resta esclusa perche' il suo
   margine sta nel link che contiene. */
.tab-panoramica.misura-stampa th, .tab-panoramica.misura-stampa td:not(.cella),
.tab-panoramica.misura-stampa td.cella a { padding: .18rem .3rem; }

@media print {
  nav, .no-stampa, .alert, .firma-hmd { display: none !important; }
  body { background: #fff; }
  /* main[class] e non solo main: i margini interni di <main> vengono dalle
     classi Bootstrap px-3 e pb-5, anch'esse !important, e una classe batte un
     tag. Con il solo "main" la regola non valeva, e i 3rem di pb-5 in fondo
     potevano spingere un foglio bianco in piu' (visto sulla panoramica). */
  main, main[class] { padding: 0 !important; }
  /* panoramica: tutta la griglia sulla carta, senza scorrimento e con i
     colori (i browser di norma non stampano gli sfondi). A schermo si scorre,
     sulla carta no: lo zoom di stampa lo calcola lo script della pagina
     (--zoom-stampa) perche' la griglia intera stia nella larghezza del
     foglio, altrimenti le ultime colonne, le visite, ne uscirebbero. Senza
     script resta 1. */
  .panoramica-contenitore { max-height: none !important; overflow: visible !important;
                            width: auto; border: 0; }
  .tab-panoramica { zoom: var(--zoom-stampa, 1) !important; width: 100%; }
  .tab-panoramica th, .tab-panoramica td:not(.cella),
  .tab-panoramica td.cella a { padding: .18rem .3rem; }
  .tab-panoramica thead th, .tab-panoramica .col-dip { position: static; }
  .tab-panoramica td, .tab-panoramica th { -webkit-print-color-adjust: exact;
                                           print-color-adjust: exact; }
}