/* FerieGo — foglio di stile unico. Nessun framework, nessun font esterno.
   Palette presa dai pixel del logo. Sfondo chiaro, un solo elemento appariscente:
   la barra del residuo. */

:root{
  --blu:#012B63; --blu-scuro:#001B42; --turchese:#03ACB6; --turchese-scuro:#028F98;
  --lime:#A9C40C; --lime-scuro:#7E9209; --ambra:#D9861F; --grigio:#7A8794;
  --testo:#16202C; --muto:#5F7183; --bordo:#E3EAF0; --sfondo:#EEF3F8; --card:#fff;
  --binario:#DCE6EE; --rosso:#B3261E; --rosso-chiaro:#FDECEA;

  --ferie:var(--turchese); --permesso:var(--lime); --rol:var(--lime-scuro);
  --malattia:var(--ambra); --smartworking:var(--blu); --altro:var(--grigio);

  --raggio:14px; --raggio-piccolo:9px;
  --ombra:0 1px 2px rgba(1,43,99,.05), 0 8px 24px rgba(1,43,99,.06);
  --ombra-alta:0 2px 4px rgba(1,43,99,.07), 0 14px 34px rgba(1,43,99,.10);
  --stacco:clamp(22px, 4vw, 34px);
}

*{box-sizing:border-box}
html,body{margin:0}
/* Deve battere qualsiasi display: e' il modo in cui il JS nasconde i pezzi di modulo. */
[hidden]{display:none!important}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--testo);
  background:var(--sfondo);
  background-image:linear-gradient(180deg,#E4EDF5 0%,var(--sfondo) 380px);
  background-repeat:no-repeat;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  font-variant-numeric:tabular-nums;   /* registro contabile: i numeri si incolonnano */
}

h1,h2,h3{color:var(--blu);letter-spacing:-.02em;line-height:1.2;margin:0}
h1{font-size:clamp(1.45rem,3.4vw,1.9rem);font-weight:750}
h2{font-size:1.06rem;font-weight:700;margin-bottom:12px}
p{margin:0 0 10px}
a{color:var(--turchese-scuro)}
.muted{color:var(--muto)}
.piccolo{font-size:.82rem}

:focus-visible{outline:2.5px solid var(--turchese);outline-offset:2px;border-radius:4px}

/* ---------- Testata ---------- */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:18px;
  padding:11px clamp(14px,3vw,26px);
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--bordo);
}
.topbar-logo{height:30px;width:auto;display:block}
.topbar-nav{
  display:flex;align-items:center;gap:2px;margin-left:auto;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.topbar-nav::-webkit-scrollbar{display:none}
.topbar-nav a{
  white-space:nowrap;text-decoration:none;color:var(--muto);
  font-size:.87rem;font-weight:600;padding:8px 13px;border-radius:999px;
  transition:color .15s,background .15s;
}
.topbar-nav a:hover{color:var(--blu);background:#EDF3F8}
.topbar-nav a.attivo{color:var(--blu);background:#DFEAF3}
.topbar-nav a.pill-ghost{color:var(--muto);border:1px solid var(--bordo);margin-left:8px}
.topbar-nav a.pill-ghost:hover{color:var(--blu);border-color:#C4D5E3;background:#fff}

.contenuto{max-width:1080px;margin:0 auto;padding:var(--stacco) clamp(14px,3vw,26px) 64px}
.contenuto > section{margin-top:var(--stacco)}
.piede{padding:0 0 30px;text-align:center}

/* ---------- Superfici ---------- */
.card{
  background:var(--card);border:1px solid var(--bordo);border-radius:var(--raggio);
  padding:20px;box-shadow:var(--ombra);
}

/* ---------- Comandi ---------- */
.btn,.btn-ghost{
  font:inherit;font-weight:650;font-size:.92rem;cursor:pointer;
  padding:11px 20px;border-radius:10px;border:1px solid transparent;
  transition:background .15s,box-shadow .15s,transform .08s,border-color .15s;
}
.btn{background:var(--turchese);color:#fff;box-shadow:0 2px 8px rgba(3,172,182,.28)}
.btn:hover{background:var(--turchese-scuro);box-shadow:0 4px 14px rgba(3,172,182,.34)}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:#fff;color:var(--blu);border-color:var(--bordo)}
.btn-ghost:hover{border-color:#B9CEDE;background:#F7FAFC}
a.btn,a.btn-ghost{display:inline-block;text-decoration:none}

label{display:block;font-weight:600;font-size:.85rem;color:#33414F;margin-bottom:5px}
input[type=text],input[type=email],input[type=password],input[type=date],
input[type=time],input[type=number],select,textarea{
  width:100%;font:inherit;font-variant-numeric:tabular-nums;
  padding:10px 12px;border:1px solid var(--bordo);border-radius:10px;
  background:#FBFDFF;color:var(--testo);
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--turchese);box-shadow:0 0 0 3px rgba(3,172,182,.16);background:#fff;
}
textarea{resize:vertical}
/* Il riempimento automatico del browser colora i campi di azzurro: lo riporto ai nostri colori. */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--testo);
  -webkit-box-shadow:0 0 0 40px #FBFDFF inset;
  caret-color:var(--testo);
}

.errore,.ok,.avviso{
  border-radius:var(--raggio-piccolo);padding:11px 13px;font-size:.9rem;margin:0 0 14px;
  border:1px solid;
}
.errore{background:var(--rosso-chiaro);border-color:#F3C4BF;color:var(--rosso)}
.ok{background:#EAF7EE;border-color:#BFE3CB;color:#1B6B35}
.avviso{background:#FFF6E8;border-color:#F0D6A8;color:#8A5A10}

/* ---------- Accesso ---------- */
.login-wrap{max-width:420px;margin:0 auto;padding:min(9vh,74px) 18px}
.card-login{padding:30px 26px;text-align:center;box-shadow:var(--ombra-alta)}
.card-login label{text-align:left;margin-top:14px}
.card-login .btn{width:100%;margin-top:20px}
.login-logo{width:190px;max-width:78%;height:auto;margin:0 auto 4px;display:block}
.login-tag{color:var(--muto);font-size:.84rem;margin:0 0 20px}

/* ---------- Saldi: l'elemento firma ---------- */
.griglia-saldi{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:14px}
.saldo h2{
  font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muto);margin-bottom:6px;
}
.saldo-residuo{display:flex;align-items:baseline;gap:7px;margin:0 0 12px}
.saldo-residuo strong{
  font-size:2.7rem;font-weight:760;line-height:1;letter-spacing:-.035em;color:var(--blu);
}
.saldo-residuo span{font-size:.86rem;color:var(--muto);font-weight:600}
.saldo-residuo.negativo strong{color:var(--rosso)}

/* Barra: quanto e' stato goduto, quanto e' in attesa, quanto resta. */
.saldo-barra{
  display:flex;height:7px;border-radius:99px;overflow:hidden;background:var(--binario);margin-bottom:9px;
}
.barra-goduto{background:var(--turchese)}
.barra-attesa{
  background:repeating-linear-gradient(115deg,var(--lime) 0 5px,#C7DC5A 5px 10px);
}
.saldo-dettaglio{font-size:.79rem;color:var(--muto);margin:0}
.saldo-dettaglio b{color:var(--testo);font-weight:650}

/* ---------- Etichette dei tipi e degli stati ---------- */
.badge,.chip{
  display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.01em;
  padding:3px 9px;border-radius:7px;white-space:nowrap;border:1.5px solid transparent;
}
.badge-ferie{background:var(--ferie);color:#fff}
.badge-permesso{background:var(--permesso);color:#2B3406}
.badge-rol{background:var(--rol);color:#fff}
.badge-malattia{background:var(--malattia);color:#fff}
.badge-altro{background:var(--altro);color:#fff}
/* Contornato = la persona c'e', semplicemente non in sede. Vale in tutta l'app. */
.badge-smartworking{background:#fff;color:var(--blu);border-color:var(--blu)}

.chip{background:#EDF3F8;color:#3C4C5C;font-weight:600}
.chip-ferie{background:#E1F5F6;color:#046068}
.chip-permesso{background:#F2F7DC;color:#4E5C07}
.chip-rol{background:#EDF2D8;color:#4E5C07}
.chip-malattia{background:#FDF0E1;color:#8A5210}
.chip-altro{background:#EEF1F4;color:#4B5866}
.chip-smartworking{background:#fff;color:var(--blu);border-color:#B7C6DA}
.chip-avviso{background:#FFF3E0;color:#8A5A10}

.stato{font-size:.78rem;font-weight:700;text-transform:lowercase}
.stato-in_attesa{color:#8A5A10}
.stato-approvata{color:#1B6B35}
.stato-rifiutata{color:var(--rosso)}
.stato-annullata{color:var(--muto);text-decoration:line-through}

.conteggio{
  display:inline-block;vertical-align:middle;min-width:30px;padding:2px 9px;margin-left:8px;
  background:var(--turchese);color:#fff;border-radius:99px;font-size:.9rem;font-weight:700;
}

/* ---------- Tabelle ---------- */
.tabella-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  background:var(--card);border:1px solid var(--bordo);border-radius:var(--raggio);box-shadow:var(--ombra)}
.tabella{width:100%;border-collapse:collapse;font-size:.88rem;min-width:640px}
.tabella th{
  text-align:left;font-size:.71rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muto);padding:13px 14px;border-bottom:1px solid var(--bordo);white-space:nowrap;
}
.tabella td{padding:11px 14px;border-bottom:1px solid #F0F4F8;vertical-align:top}
.tabella tbody tr:last-child td{border-bottom:none}
.tabella tbody tr:hover{background:#F8FBFD}
.tabella tr.da-verificare{background:#FFFBF0}
.tabella tr.da-verificare:hover{background:#FFF6E2}
.tabella form{margin:0}

.lista-prossime{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.lista-prossime li{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.9rem;
  background:var(--card);border:1px solid var(--bordo);border-radius:var(--raggio-piccolo);padding:10px 13px;
}

/* ---------- Moduli ---------- */
.form-griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:13px;margin-top:14px}
.form-griglia .largo{grid-column:1/-1}
.form-griglia .separatore{
  grid-column:1/-1;margin-top:6px;padding-top:12px;border-top:1px solid var(--bordo);
  font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muto);
}
.form-griglia label{margin:0}
.riga-check{display:flex;align-items:center;gap:8px;margin-top:24px}
.riga-check input{width:auto}
.form-inline{margin-top:12px}
.riga-campi{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:14px}

.form-richiesta{display:block}
.form-richiesta > label{margin-top:6px}
.tipi{border:none;padding:0;margin:0 0 18px;display:flex;flex-wrap:wrap;gap:8px}
.tipi legend{
  font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muto);padding:0;margin-bottom:9px;
}
.tipo-scelta{
  display:inline-flex;align-items:center;gap:7px;margin:0;cursor:pointer;
  padding:9px 14px;border:1.5px solid var(--bordo);border-radius:999px;
  font-size:.88rem;font-weight:600;color:var(--testo);background:#fff;
  transition:border-color .15s,background .15s,color .15s;
}
.tipo-scelta:hover{border-color:#B9CEDE}
/* Il pallino di sistema si nasconde, ma resta raggiungibile da tastiera:
   un input di dimensione zero in certi browser non prende il fuoco. */
.tipo-scelta input{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.tipo-scelta::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--grigio);flex:none}
.tipo-ferie::before{background:var(--ferie)}
.tipo-permesso::before{background:var(--permesso)}
.tipo-rol::before{background:var(--rol)}
.tipo-malattia::before{background:var(--malattia)}
.tipo-altro::before{background:var(--altro)}
.tipo-smartworking::before{background:#fff;box-shadow:inset 0 0 0 2.5px var(--blu)}
.tipo-scelta:has(input:checked){border-color:var(--blu);background:#F2F7FC;color:var(--blu)}
.tipo-scelta:has(input:focus-visible){outline:2.5px solid var(--turchese);outline-offset:2px}

.calcolo{margin:16px 0 0;font-size:1rem;font-weight:650;color:var(--blu);min-height:1.4em}
.calcolo-errore{color:var(--rosso)}
.form-richiesta .btn{margin-top:16px}

.filtri{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:13px;align-items:end}
.filtri-azioni{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.riepilogo{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0}

details.card{padding:16px 20px}
details.card > summary{
  cursor:pointer;font-weight:650;color:var(--blu);display:flex;align-items:center;
  gap:10px;flex-wrap:wrap;list-style:none;
}
details.card > summary::-webkit-details-marker{display:none}
details.card > summary::before{
  content:"›";display:inline-block;transition:transform .18s;font-size:1.25rem;line-height:1;color:var(--muto);
}
details.card[open] > summary::before{transform:rotate(90deg)}
details.dipendente{margin-top:11px}
details.inattivo > summary{color:var(--muto)}
.link-password{border-color:var(--turchese);background:#F4FCFC}
.link-box{margin-top:8px;font-size:.82rem;font-family:ui-monospace,Consolas,monospace}

/* ---------- Coda delle approvazioni ---------- */
.richiesta-da-decidere{margin-top:14px}
.rdd-testa{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.rdd-testa strong{color:var(--blu);font-size:1.02rem;margin-left:8px}
.rdd-periodo{font-size:.92rem;color:var(--muto)}
.rdd-periodo strong{color:var(--testo);font-size:.92rem;margin-left:4px}
.rdd-note{
  margin:13px 0 0;padding:9px 13px;border-left:3px solid var(--bordo);
  color:#3C4C5C;font-size:.9rem;background:#F8FBFD;border-radius:0 7px 7px 0;
}
.rdd-residuo{margin:13px 0 0;font-size:.89rem;color:var(--muto)}
.rdd-residuo strong{color:var(--testo)}
.rdd-residuo.sfora{color:var(--rosso);font-weight:600}
.rdd-residuo.sfora strong{color:var(--rosso)}
.rdd-sovrapposizioni{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:11px}
.rdd-azioni{
  display:flex;gap:9px;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid var(--bordo);
}
.rdd-azioni input[type=text]{flex:1 1 220px;width:auto}

/* ---------- Calendario ---------- */
.cal-testa{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.cal-testa .btn-ghost{padding:8px 16px;font-size:1rem;line-height:1}
.legenda{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 16px}
.calendario{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-intestazione{
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muto);text-align:center;padding-bottom:3px;
}
.cal-cella{
  min-height:96px;background:var(--card);border:1px solid var(--bordo);
  border-radius:var(--raggio-piccolo);padding:6px;
}
.cal-cella.fuori-mese{opacity:.42}
.cal-cella.weekend,.cal-cella.festivo{background:#F3F7FA}
.cal-cella.festivo .cal-giorno{color:var(--rosso)}
.cal-cella.oggi{border-color:var(--turchese);box-shadow:0 0 0 2px rgba(3,172,182,.18)}
.cal-giorno{font-size:.78rem;font-weight:700;color:var(--muto)}
.cal-assenza{
  display:block;font-size:.71rem;font-weight:600;border-radius:6px;padding:2px 6px;margin-top:3px;
  color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1.5px solid transparent;
}
.cal-ferie{background:var(--ferie)}
.cal-permesso{background:var(--permesso);color:#2B3406}
.cal-rol{background:var(--rol)}
.cal-malattia{background:var(--malattia)}
.cal-altro{background:var(--altro)}
.cal-smartworking{background:#fff;color:var(--blu);border-color:var(--blu)}

/* ---------- Telefono ---------- */
@media(max-width:720px){
  .riga-campi{grid-template-columns:1fr}
  .saldo-residuo strong{font-size:2.3rem}
  .topbar{gap:10px;padding:10px 12px}
  .topbar-logo{height:26px}
  .topbar-nav a{padding:7px 11px;font-size:.84rem}
  .rdd-testa{flex-direction:column;gap:6px}

  /* Il calendario diventa un elenco di giorni: una griglia a 7 colonne su 380 px
     e' illeggibile, e i giorni senza nessuno fuori non servono a niente. */
  .calendario{grid-template-columns:1fr;gap:5px}
  .cal-intestazione{display:none}
  .cal-cella.fuori-mese{display:none}
  .cal-cella{min-height:0;display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:9px 11px}
  .cal-cella .cal-giorno{min-width:26px}
  .cal-assenza{margin-top:0}
  .cal-cella.weekend:not(:has(.cal-assenza)),
  .cal-cella:not(:has(.cal-assenza)){opacity:.55;padding:5px 11px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

@media print{
  .topbar,.rdd-azioni,.filtri,.piede{display:none}
  body{background:#fff}
  .card,.tabella-wrap{box-shadow:none}
}