/* Gestionale Muffin Dipendenti - foglio di stile unico.
   Classi disponibili per tutte le sezioni:
   .scheda .titolo-pagina .tabella .bottone(.primario/.fantasma/.pericolo)
   .campo .griglia-campi .etichetta(.verde/.gialla/.rossa/.grigia/.blu)
   .avviso(.errore/.successo/.attenzione) .calendario .vuoto */

:root {
  --sfondo: #f4f5f7;
  --superficie: #ffffff;
  --bordo: #e2e5ea;
  --testo: #1c2128;
  --testo-tenue: #67707d;
  --primario: #c2410c;
  --primario-scuro: #9a3412;
  --primario-chiaro: #fff1e9;
  --verde: #15803d;
  --verde-chiaro: #e8f6ed;
  --rosso: #b91c1c;
  --rosso-chiaro: #fdecec;
  --giallo: #a16207;
  --giallo-chiaro: #fdf5e3;
  --blu: #1d4ed8;
  --blu-chiaro: #eaf0fe;
  --ombra: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .05);
  --raggio: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--primario); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Barra superiore ------------------------------------------------------ */

.barra {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 22px;
  height: 58px;
  background: var(--superficie);
  border-bottom: 1px solid var(--bordo);
  position: sticky;
  top: 0;
  z-index: 30;
  flex-wrap: wrap;
}

.marchio { display: flex; align-items: center; gap: 10px; color: var(--testo); font-weight: 600; }
.marchio:hover { text-decoration: none; }
.marchio-logo {
  width: 32px; height: 32px; border-radius: 8px;
  object-fit: contain; display: block;
}

.menu { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.menu a {
  padding: 7px 13px; border-radius: 7px;
  color: var(--testo-tenue); font-weight: 500;
}
.menu a:hover { background: var(--sfondo); text-decoration: none; color: var(--testo); }
.menu a.attivo { background: var(--primario-chiaro); color: var(--primario-scuro); }

.utente-barra { display: flex; align-items: center; gap: 10px; }
.utente-nome { color: var(--testo-tenue); font-size: 14px; }
.in-linea { display: inline; }

.banner-gestione {
  background: #422006; color: #fed7aa;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 8px 16px; font-size: 14px; flex-wrap: wrap;
}
.banner-gestione strong { color: #fff; }

.pastiglia-avviso {
  background: var(--rosso); color: #fff; border-radius: 999px;
  min-width: 22px; height: 22px; padding: 0 7px;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.pastiglia-menu {
  background: var(--rosso); color: #fff; border-radius: 999px;
  padding: 0 6px; font-size: 11px; font-weight: 700; vertical-align: middle;
}
.pastiglia-avviso:hover { text-decoration: none; color: #fff; }

/* --- Struttura ------------------------------------------------------------ */

.contenuto { max-width: 1400px; margin: 0 auto; padding: 24px 22px 60px; }
.contenuto.senza-barra { max-width: 460px; padding-top: 8vh; }

.titolo-pagina {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.titolo-pagina h1 { font-size: 23px; margin: 0; }
.titolo-pagina p { margin: 3px 0 0; color: var(--testo-tenue); font-size: 14px; }
.azioni { display: flex; gap: 8px; flex-wrap: wrap; }

.scheda {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 18px 20px;
  box-shadow: var(--ombra);
  margin-bottom: 18px;
}
.scheda > h2 { font-size: 16px; margin: 0 0 14px; }
.scheda > h2 small { font-weight: 400; color: var(--testo-tenue); margin-left: 8px; }

.griglia { display: grid; gap: 18px; }
.griglia.due { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.griglia.tre { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.griglia.quattro { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* --- Riquadri numerici ---------------------------------------------------- */

.riquadro-dato {
  background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: 15px 17px; box-shadow: var(--ombra);
}
.riquadro-dato .etichetta-dato {
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--testo-tenue); font-weight: 600;
}
.riquadro-dato .valore-dato { font-size: 25px; font-weight: 650; margin-top: 5px; }
.riquadro-dato .nota-dato { font-size: 13px; color: var(--testo-tenue); margin-top: 2px; }

/* --- Tabelle -------------------------------------------------------------- */

.contenitore-tabella { overflow-x: auto; }
.tabella { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabella th {
  text-align: left; padding: 9px 11px; font-size: 12px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .03em; color: var(--testo-tenue);
  border-bottom: 1px solid var(--bordo); white-space: nowrap;
}
.tabella td { padding: 10px 11px; border-bottom: 1px solid var(--bordo); vertical-align: middle; }
.tabella tbody tr:hover { background: #fafbfc; }
.tabella tbody tr:last-child td { border-bottom: none; }
.tabella .numerico { text-align: right; font-variant-numeric: tabular-nums; }

.vuoto { text-align: center; padding: 34px 16px; color: var(--testo-tenue); }
.vuoto strong { display: block; margin-bottom: 5px; color: var(--testo); }

/* --- Bottoni -------------------------------------------------------------- */

.bottone, .bottone-piccolo {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  border: 1px solid var(--bordo); background: var(--superficie); color: var(--testo);
  border-radius: 7px; cursor: pointer; font: inherit; font-weight: 550;
  padding: 8px 15px; text-decoration: none; white-space: nowrap;
}
.bottone-piccolo { padding: 5px 10px; font-size: 13px; }
.bottone:hover, .bottone-piccolo:hover { background: var(--sfondo); text-decoration: none; }

.bottone.primario, .bottone-piccolo.primario {
  background: var(--primario); border-color: var(--primario); color: #fff;
}
.bottone.primario:hover, .bottone-piccolo.primario:hover { background: var(--primario-scuro); }

.bottone.pericolo, .bottone-piccolo.pericolo { color: var(--rosso); border-color: #f0c4c4; }
.bottone.pericolo:hover, .bottone-piccolo.pericolo:hover { background: var(--rosso-chiaro); }

.bottone.fantasma, .bottone-piccolo.fantasma { border-color: transparent; background: transparent; color: var(--testo-tenue); }
.bottone.fantasma:hover, .bottone-piccolo.fantasma:hover { background: var(--sfondo); color: var(--testo); }

.bottone.largo { width: 100%; padding: 11px; font-size: 16px; }

/* --- Moduli --------------------------------------------------------------- */

.campo { margin-bottom: 14px; }
.campo > label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.campo .aiuto { font-size: 12px; color: var(--testo-tenue); margin-top: 4px; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=time], input[type=tel], select, textarea {
  width: 100%; padding: 8px 11px; font: inherit;
  border: 1px solid var(--bordo); border-radius: 7px;
  background: var(--superficie); color: var(--testo);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primario);
  box-shadow: 0 0 0 3px var(--primario-chiaro);
}
textarea { min-height: 74px; resize: vertical; }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--primario); }

.campo-riga { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.campo-riga label { font-size: 14px; margin: 0; font-weight: 500; }

.griglia-campi { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

fieldset { border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 15px 17px; margin: 0 0 18px; }
legend { font-weight: 650; font-size: 14px; padding: 0 6px; }

/* --- Etichette di stato --------------------------------------------------- */

.etichetta {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; background: var(--sfondo); color: var(--testo-tenue);
  white-space: nowrap;
}
.etichetta.verde  { background: var(--verde-chiaro);  color: var(--verde); }
.etichetta.rossa  { background: var(--rosso-chiaro);  color: var(--rosso); }
.etichetta.gialla { background: var(--giallo-chiaro); color: var(--giallo); }
.etichetta.blu    { background: var(--blu-chiaro);    color: var(--blu); }
.etichetta.grigia { background: var(--sfondo);        color: var(--testo-tenue); }
.etichetta.arancio{ background: var(--primario-chiaro); color: var(--primario-scuro); }

/* --- Avvisi --------------------------------------------------------------- */

.avviso {
  padding: 11px 15px; border-radius: 8px; margin-bottom: 16px;
  border: 1px solid var(--bordo); background: var(--superficie); font-size: 14px;
}
.avviso.errore     { background: var(--rosso-chiaro);  border-color: #f3cccc; color: #7f1d1d; }
.avviso.successo   { background: var(--verde-chiaro);  border-color: #c4e6d1; color: #14532d; }
.avviso.attenzione { background: var(--giallo-chiaro); border-color: #ecd9a8; color: #713f12; }
.avviso.informazione { background: var(--blu-chiaro);  border-color: #cddafb; color: #1e3a8a; }

/* --- Calendario turni ----------------------------------------------------- */

/* Sempre a 7 colonne affiancate (orizzontale). Su schermi stretti il
   contenitore .contenitore-tabella che lo avvolge scorre in orizzontale,
   invece di impilare i giorni in verticale: cosi' resta comodo inserire i turni. */
.calendario { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 1px; background: var(--bordo); border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; min-width: 960px; }
.calendario .intestazione-giorno { background: #f8f9fb; padding: 8px 10px; font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .03em; color: var(--testo-tenue); text-align: center; }
.cella-giorno { background: var(--superficie); min-height: 132px; padding: 7px; display: flex; flex-direction: column; gap: 5px; }
.azioni-giorno { margin-top: auto; display: flex; gap: 4px; opacity: 0; transition: opacity .12s; }
.azioni-giorno a { flex: 1; font-size: 11px; color: var(--testo-tenue); border: 1px dashed var(--bordo); border-radius: 6px; text-align: center; padding: 3px; }
.cella-giorno:hover .azioni-giorno { opacity: 1; }
.azioni-giorno a:hover { background: var(--primario-chiaro); color: var(--primario-scuro); border-color: var(--primario); text-decoration: none; }
.cella-giorno.festiva { background: #fffaf6; }
.cella-giorno.oggi { box-shadow: inset 0 0 0 2px var(--primario); }
.numero-giorno { font-size: 12px; font-weight: 650; color: var(--testo-tenue); display: flex; justify-content: space-between; align-items: center; }

.turno-blocco {
  border-radius: 6px; padding: 4px 7px; font-size: 12px; line-height: 1.35;
  background: var(--primario-chiaro); border-left: 3px solid var(--primario);
  color: var(--testo); cursor: pointer; display: block;
}
.turno-blocco:hover { filter: brightness(.97); text-decoration: none; }
.turno-blocco.scoperto { background: var(--rosso-chiaro); border-left-color: var(--rosso); }
.turno-blocco.pranzo { background: var(--blu-chiaro); border-left-color: var(--blu); }
.turno-blocco.assenza { background: var(--sfondo); border-left-color: var(--testo-tenue); font-style: italic; }
.turno-blocco .orario-turno { font-weight: 650; }
.turno-blocco .nome-turno { display: block; }

/* --- Pagina QR di timbratura ---------------------------------------------- */

.schermo-qr { min-height: 100vh; display: grid; place-items: center; background: #11161d; color: #fff; text-align: center; padding: 20px; }
.schermo-qr h1 { font-size: 26px; margin: 0 0 6px; }
.schermo-qr .riquadro-qr { background: #fff; padding: 22px; border-radius: 18px; display: inline-block; margin: 20px 0; }
.schermo-qr img { display: block; width: min(62vw, 340px); height: auto; image-rendering: pixelated; }
.schermo-qr .orologio { font-size: 46px; font-weight: 300; font-variant-numeric: tabular-nums; }
.schermo-qr .istruzioni { color: #9aa5b4; max-width: 460px; margin: 0 auto; }

.esito-timbratura { text-align: center; padding: 26px 18px; }
.esito-timbratura .segno { font-size: 52px; line-height: 1; }
.esito-timbratura h1 { margin: 12px 0 6px; }

/* --- Accesso -------------------------------------------------------------- */

.riquadro-accesso { background: var(--superficie); border: 1px solid var(--bordo); border-radius: 14px; padding: 30px 28px; box-shadow: var(--ombra); }
.riquadro-accesso .logo-accesso { text-align: center; margin-bottom: 22px; }
.riquadro-accesso .logo-accesso img { width: 96px; height: 96px; object-fit: contain; }
.riquadro-accesso h1 { font-size: 19px; text-align: center; margin: 10px 0 4px; }
.riquadro-accesso .sottotitolo { text-align: center; color: var(--testo-tenue); font-size: 14px; margin-bottom: 22px; }

/* --- Varie ---------------------------------------------------------------- */

.tenue { color: var(--testo-tenue); }
.piccolo { font-size: 13px; }
.grassetto { font-weight: 650; }
.destra { text-align: right; }
.centro { text-align: center; }
.separatore { height: 1px; background: var(--bordo); margin: 16px 0; border: none; }
.pila { display: flex; flex-direction: column; gap: 8px; }
.riga { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spinta { margin-left: auto; }
.barra-progresso { height: 7px; background: var(--sfondo); border-radius: 999px; overflow: hidden; }
.barra-progresso > div { height: 100%; background: var(--primario); border-radius: 999px; }

.faq-voce { border: 1px solid var(--bordo); border-radius: 8px; overflow: hidden; }
.faq-voce > summary { padding: 12px 14px; cursor: pointer; font-weight: 600; list-style: none; }
.faq-voce > summary::-webkit-details-marker { display: none; }
.faq-voce > summary::before { content: "+ "; color: var(--primario); font-weight: 700; }
.faq-voce[open] > summary::before { content: "− "; }
.faq-voce[open] > summary { background: var(--sfondo); }
.faq-risposta { padding: 12px 14px; border-top: 1px solid var(--bordo); color: var(--testo-tenue); }

/* Conversazione di un ticket: i messaggi del cliente a sinistra, quelli di
   Muffin Suite rientrati e col bordo colorato, come in una chat. */
.conversazione { display: flex; flex-direction: column; gap: 14px; }
.intervento { border: 1px solid var(--bordo); border-radius: 12px; padding: 12px 14px; max-width: 82%; }
.intervento.da-cliente { align-self: flex-start; background: var(--sfondo); }
.intervento.da-muffin { align-self: flex-end; background: var(--primario-chiaro); border-color: var(--primario); }
.intervento-testa { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.intervento-testo { white-space: pre-wrap; }

.pallino-non-letto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--primario); flex: none; }
.riga-da-leggere { font-weight: 600; }
.elenco-ticket { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.elenco-ticket li { border-bottom: 1px solid var(--bordo); padding-bottom: 10px; }
.elenco-ticket li:last-child { border-bottom: 0; padding-bottom: 0; }

/* Stato del numero WhatsApp: si deve capire a colpo d'occhio se e' collegato. */
.stato-whatsapp { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 600; margin: 0 0 10px; }
.stato-whatsapp .pallino { width: 11px; height: 11px; border-radius: 50%; background: var(--testo-tenue); flex: none; }
.stato-whatsapp.collegato { color: #157347; }
.stato-whatsapp.collegato .pallino { background: #157347; }
.stato-whatsapp.in-attesa { color: #9a6700; }
.stato-whatsapp.in-attesa .pallino { background: #d29922; }
.stato-whatsapp.scollegato, .stato-whatsapp.spento { color: var(--testo-tenue); }
.stato-whatsapp.spento .pallino { background: #b42318; }

@media print {
  .barra, .azioni, .bottone, .bottone-piccolo { display: none !important; }
  body { background: #fff; }
  .scheda { box-shadow: none; border-color: #ccc; }
}

@media (max-width: 760px) {
  .contenuto { padding: 16px 13px 50px; }
  .barra { height: auto; padding: 10px 13px; }
  .menu { order: 3; width: 100%; }
  /* Il calendario NON collassa piu' in verticale: resta a 7 colonne e scorre
     lateralmente dentro il suo contenitore, cosi' i turni restano leggibili. */
  .azioni-giorno { opacity: 1; }
}