/* ============================================================
   PernaApp — stile comune
   Ordine: variabili, reset, layout, componenti, schermate.
   ============================================================ */

:root{
  --verde:#00a33c;
  --verde-scuro:#008a33;
  --verde-tenue:#e9f6ee;
  --testo:#111827;
  --testo-soft:#6b7280;
  --testo-tenue:#9aa4b2;
  --bordo:#e5e7eb;
  --bordo-forte:#d7dde8;
  --sfondo:#f3f5f8;
  --superficie:#ffffff;
  --rosso:#c0392b;
  --rosso-tenue:#fdecec;
  --ambra:#8a5a00;
  --ambra-tenue:#fff4e0;
  /* Nome dell'addetto nella vista Master: un colore proprio lo distingue a
     colpo d'occhio dal verde "Validato" e dal grigio dell'orario. */
  --indaco:#3730a3;
  --indaco-tenue:#eceafb;

  --raggio:14px;
  --raggio-s:10px;
  --raggio-l:20px;

  --ombra:0 6px 18px rgba(17,24,39,.07);
  --ombra-alta:0 16px 40px rgba(17,24,39,.18);

  --tocco:44px;              /* area minima toccabile col dito */
  --safe-bottom:env(safe-area-inset-bottom, 0px);
}

/* ===== Reset & base ===== */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--sfondo);
  color:var(--testo);
  font-family:system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  -webkit-tap-highlight-color:transparent;
}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}

/* L'attributo hidden deve avere l'ultima parola: senza questo, un elemento con
   display esplicito (es. i pulsanti icona) resterebbe visibile. */
[hidden]{display:none !important}

/* Blocco dello scorrimento quando una finestra modale e' aperta.
   Il JS salva la posizione e la riapplica come "top" negativo, cosi'
   la pagina resta ferma dov'era invece di saltare in cima. */
body.is-locked{position:fixed;left:0;right:0;width:100%;overflow:hidden}

/* Header opzionale (usato solo dalle pagine che valorizzano il blocco header) */
.app-header{padding:12px 16px}
.app-main{min-height:100vh}

/* ===== Barra applicativa comune =====
   Tre posizioni: sinistra (avatar o indietro), centro (titolo), destra (azione). */
.topbar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  min-height:60px;
  background:var(--sfondo);
}
.topbar-title{
  flex:1 1 auto;
  min-width:0;
  font-size:1.05rem;
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.topbar-title.is-centered{text-align:center}

/* Pulsante icona (indietro, chiudi, calendario…) */
.icon-btn{
  flex:0 0 auto;
  width:var(--tocco);
  height:var(--tocco);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:12px;
  background:none;
  color:var(--testo);
  cursor:pointer;
  text-decoration:none;
  transition:background .18s ease, color .18s ease, transform .06s ease;
}
.icon-btn:hover{background:rgba(17,24,39,.06)}
.icon-btn:active{transform:scale(.94)}
.icon-btn:focus-visible{outline:2px solid rgba(0,163,60,.4);outline-offset:-2px}
.icon-btn svg{display:block;width:22px;height:22px}
.icon-btn[disabled]{opacity:.35;pointer-events:none}

/* Identita' dell'addetto */
.user-chip{display:flex;align-items:center;gap:10px;min-width:0}
.user-avatar{
  flex:0 0 auto;width:36px;height:36px;border-radius:50%;
  background:var(--verde);color:#fff;font-weight:700;font-size:.95rem;
  display:inline-flex;align-items:center;justify-content:center;
}
.user-name{
  font-weight:600;font-size:1rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Ricorda in che modalita' si sta lavorando: la vista del Master mostra le
   chiamate di tutti, ed e' bene che sia evidente. */
.ruolo-badge{
  flex:0 0 auto;
  padding:2px 8px;
  border-radius:999px;
  background:var(--indaco-tenue);
  color:var(--indaco);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
}

/* ===== Pulsanti ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:var(--tocco);
  padding:11px 16px;
  border:1px solid transparent;
  border-radius:12px;
  font-size:.98rem;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease, color .18s ease,
             filter .18s ease, transform .06s ease;
}
.btn svg{display:block;width:19px;height:19px;flex:0 0 auto}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid rgba(0,163,60,.45);outline-offset:2px}
.btn[disabled],.btn.is-busy{opacity:.6;pointer-events:none}

.btn-primary{background:var(--verde);color:#fff}
.btn-primary:hover{background:var(--verde-scuro)}

.btn-secondary{background:var(--superficie);color:var(--testo);border-color:var(--bordo)}
.btn-secondary:hover{background:#f7f8fa;border-color:var(--bordo-forte)}

.btn-quiet{background:transparent;color:var(--testo-soft);border-color:transparent}
.btn-quiet:hover{background:rgba(17,24,39,.06);color:var(--testo)}

.btn-danger{background:var(--rosso);color:#fff}
.btn-danger:hover{filter:brightness(.94)}

.btn-block{width:100%}

/* ===== Messaggi ===== */
.flash-messages{display:grid;gap:.5rem;margin-bottom:1rem}
.flash{
  font-size:.92rem;
  border-radius:var(--raggio-s);
  padding:.7rem .85rem;
  text-align:left;
}
.flash.danger{color:var(--rosso);background:var(--rosso-tenue)}
.flash.success{color:#2e7d32;background:var(--verde-tenue)}
.flash.warning{color:var(--ambra);background:var(--ambra-tenue)}

/* ===== Finestra di conferma (logout e simili) ===== */
.confirm{
  position:fixed;
  inset:0;
  z-index:80;
  display:grid;
  place-items:center;
  padding:16px;
}
.confirm[hidden]{display:none}
.confirm-backdrop{
  position:absolute;inset:0;
  background:rgba(17,24,39,.45);
  backdrop-filter:blur(2px);
}
.confirm-box{
  position:relative;
  width:min(360px,100%);
  background:var(--superficie);
  border-radius:18px;
  box-shadow:var(--ombra-alta);
  padding:22px 20px 18px;
  text-align:center;
  animation:sali .18s ease;
}
.confirm-box h2{font-size:1.1rem;font-weight:700;margin-bottom:6px}
.confirm-box p{color:var(--testo-soft);font-size:.95rem;margin-bottom:18px}
.confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}

@keyframes sali{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* ============================================================
   Login
   ============================================================ */
.login-container{
  display:flex;justify-content:center;align-items:center;
  min-height:100vh;
  padding:16px;
}

.login-card{
  background:var(--superficie);
  padding:2.25rem 1.75rem;
  border-radius:18px;
  box-shadow:0 10px 30px rgba(17,24,39,.10);
  width:100%;
  max-width:400px;          /* card compatta: l'altezza la detta il contenuto */
  text-align:center;
}

/* Logo (il file e' gia' ritagliato: i margini bianchi stanno nell'immagine, non qui) */
.logo{width:210px;max-width:75%;height:auto;margin:0 auto 1.75rem;display:block}

.login-form .form-group{margin-bottom:.9rem}
.login-form input{
  width:100%;
  padding:.85rem 1rem;
  border:1px solid var(--bordo-forte);
  border-radius:var(--raggio-s);
  font-size:1rem;
  background:var(--superficie);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.login-form input::placeholder{color:var(--testo-tenue)}
.login-form input:focus{
  outline:none;
  border-color:var(--verde);
  box-shadow:0 0 0 3px rgba(0,163,60,.14);
}

/* Campo password con il pulsante "mostra/nascondi" dentro, a destra */
.password-field{position:relative}
.password-field input{padding-right:3.1rem}
.toggle-password{
  position:absolute;
  top:50%;
  right:.35rem;
  transform:translateY(-50%);
  width:var(--tocco);
  height:var(--tocco);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:none;
  border-radius:var(--raggio-s);
  background:none;
  color:var(--testo-tenue);   /* a riposo: grigio */
  cursor:pointer;
  transition:color .18s ease, background .18s ease;
}
.toggle-password:hover{background:rgba(17,24,39,.05)}
.toggle-password:focus-visible{outline:2px solid rgba(0,163,60,.35);outline-offset:-2px}
.toggle-password svg{display:block;width:22px;height:22px}

/* Password visibile: icona sbarrata e colore brand */
.toggle-password.is-visible{color:var(--verde)}
.toggle-password .icon-off{display:none}
.toggle-password.is-visible .icon-on{display:none}
.toggle-password.is-visible .icon-off{display:block}

.btn-login{
  width:100%;
  margin-top:.4rem;
  padding:.85rem;
  background:var(--verde);
  color:#fff;
  border:none;
  border-radius:var(--raggio-s);
  font-size:1rem;
  font-weight:600;
  cursor:pointer;
  transition:background .2s ease, transform .06s ease
}
.btn-login:hover{background:var(--verde-scuro)}
.btn-login:active{transform:translateY(1px)}
.btn-login:focus-visible{outline:2px solid rgba(0,163,60,.45);outline-offset:2px}

/* ============================================================
   Chiamate del giorno
   ============================================================ */
.giornata{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  padding-bottom:calc(24px + var(--safe-bottom));
}

/* --- Barra data: frecce, etichetta e calendario in un unico blocco --- */
.daybar{
  display:flex;
  align-items:center;
  gap:2px;
  margin:0 12px 12px;
  padding:5px 6px;
  background:var(--superficie);
  border:1px solid var(--bordo);
  border-radius:999px;
  box-shadow:var(--ombra);
}
.daybar-label{
  flex:1 1 auto;
  min-width:0;
  padding:2px 4px;
  text-align:center;
  line-height:1.15;
  border-radius:999px;
  transition:background .15s ease;
}
/* L'etichetta e' toccabile quando riporta a oggi. */
a.daybar-label:hover{background:rgba(17,24,39,.05)}
a.daybar-label:active{background:rgba(17,24,39,.09)}
a.daybar-label:focus-visible{outline:2px solid rgba(0,163,60,.4);outline-offset:-2px}
.daybar-main{
  display:block;
  font-size:1.15rem;
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.daybar-sub{
  display:block;
  margin-top:2px;
  font-size:.82rem;
  color:var(--testo-soft);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.daybar .icon-btn.is-today{color:var(--verde)}

/* Il selettore data nativo resta invisibile: lo apre l'icona calendario. */
.daybar-picker{
  position:absolute;
  width:1px;height:1px;
  opacity:0;
  pointer-events:none;
  border:0;
  padding:0;
}

/* --- Elenco appuntamenti --- */
.appt-list{
  flex:1 1 auto;
  display:grid;
  gap:12px;
  padding:0 12px;
  align-content:start;
}

.appt{
  position:relative;
  background:var(--superficie);
  border:1px solid var(--bordo);
  border-radius:var(--raggio-l);
  box-shadow:var(--ombra);
  padding:12px 14px 14px;
  transition:border-color .18s ease, box-shadow .18s ease, transform .06s ease;
}
.appt:has(.appt-link:hover){border-color:var(--bordo-forte);box-shadow:0 10px 24px rgba(17,24,39,.10)}
.appt:has(.appt-link:active){transform:translateY(1px)}
.appt:has(.appt-link:focus-visible){outline:2px solid rgba(0,163,60,.45);outline-offset:2px}

/* Il collegamento copre tutta la card: cosi' il numero di telefono
   puo' restare un link a se' stante senza annidare due <a>. */
.appt-link{position:absolute;inset:0;z-index:1;border-radius:inherit;text-indent:-9999px;overflow:hidden}

/* Riga in testa: quando, stato, e la freccia che segnala la card apribile. */
.appt-testata{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}
.appt-ora{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 11px 5px 9px;
  border-radius:999px;
  background:#eef1f6;
  color:var(--testo);
  font-size:1rem;
  font-weight:700;
  letter-spacing:.01em;
  white-space:nowrap;
}
.appt-ora svg{width:15px;height:15px;color:var(--testo-soft)}
/* Chiamata senza orario registrato: si legge come informazione, non come errore. */
.appt-ora.senza-ora{
  background:transparent;
  border:1px dashed var(--bordo-forte);
  color:var(--testo-soft);
  font-weight:600;
  font-size:.85rem;
}

.appt-stato{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 10px;
  border-radius:999px;
  background:var(--verde-tenue);
  color:var(--verde-scuro);
  font-size:.78rem;
  font-weight:700;
  white-space:nowrap;
}
.appt-stato svg{width:12px;height:12px}

/* Addetto assegnatario: compare solo nella vista del Master. Il nome viene
   troncato invece di far crescere la testata, che deve restare su una riga. */
.appt-addetto{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-width:0;
  padding:4px 10px;
  border-radius:999px;
  background:var(--indaco-tenue);
  color:var(--indaco);
  font-size:.78rem;
  font-weight:700;
}
.appt-addetto svg{flex:0 0 auto;width:12px;height:12px}
.appt-addetto-nome{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.appt-apri{
  margin-left:auto;
  flex:0 0 auto;
  width:18px;height:18px;
  color:var(--testo-tenue);
}

.appt-nome{
  display:flex;
  align-items:flex-start;
  gap:7px;
  font-size:1.08rem;
  font-weight:700;
  line-height:1.25;
  word-break:break-word;
}
/* Stessa larghezza delle icone sottostanti: i testi restano incolonnati. */
.appt-nome svg{
  flex:0 0 auto;
  width:16px;height:16px;
  margin-top:2px;
  color:var(--testo-soft);
}
.appt-riga{
  display:flex;
  align-items:flex-start;
  gap:7px;
  margin-top:6px;
  font-size:.93rem;
  color:var(--testo-soft);
  line-height:1.35;
}
.appt-riga svg{flex:0 0 auto;width:15px;height:15px;margin-top:2px;color:var(--testo-tenue)}
.appt-motivo{color:var(--testo);font-weight:500}

/* Il telefono sta sopra il collegamento della card e chiama al tocco. */
.appt-tel{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:10px;
  padding:9px 14px 9px 12px;
  min-height:var(--tocco);
  border-radius:999px;
  background:var(--verde-tenue);
  color:var(--verde-scuro);
  font-size:.92rem;
  font-weight:600;
  text-decoration:none;
}
.appt-tel svg{width:15px;height:15px}
.appt-tel:active{filter:brightness(.96)}
.appt-tel:focus-visible{outline:2px solid rgba(0,163,60,.45);outline-offset:2px}

/* --- Nessun appuntamento --- */
.vuoto{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:56px 24px;
  text-align:center;
  color:var(--testo-soft);
}
.vuoto svg{width:44px;height:44px;color:var(--bordo-forte)}
.vuoto-titolo{font-size:1rem;font-weight:600;color:var(--testo)}
.vuoto-sub{font-size:.92rem}

@media (max-width:360px){
  .appt{padding:11px 12px 13px}
  .appt-nome{font-size:1.02rem}
}