/* Studiouno - CSS su misura, niente framework. */

:root {
  --testo: #1b1f23;
  --tenue: #5c6670;
  --bordo: #d5dbe1;
  --bordo-forte: #9aa5b1;
  --sfondo: #f4f6f8;
  --carta: #ffffff;
  --accento: #1f5fa9;
  --ok: #1a7f4b;
  --ko: #b3261e;
  --riga-alt: #fafbfc;
  --altezza-riga: 26px;
  /* deve stare comoda l'etichetta piu' lunga dell'header ("30") senza
     accavallarsi con la colonna accanto */
  --larghezza-slot: 27px;
  --larghezza-sito: 190px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--testo);
  background: var(--sfondo);
}

a { color: var(--accento); }

/* --- barra di navigazione ------------------------------------------------ */
.barra {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 8px 16px;
  background: var(--carta);
  border-bottom: 1px solid var(--bordo);
  position: sticky;
  top: 0;
  z-index: 40;
}
.marchio { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--testo); }
.barra nav { display: flex; gap: 14px; flex: 1; flex-wrap: wrap; }
.barra nav a { text-decoration: none; padding: 4px 6px; border-radius: 4px; color: var(--tenue); }
.barra nav a:hover { background: var(--sfondo); color: var(--testo); }
.barra nav a.attivo { color: var(--accento); font-weight: 600; }
.uscita { display: flex; align-items: center; gap: 10px; }
.utente { color: var(--tenue); font-size: 12px; }
.collegamento { background: none; border: none; color: var(--accento); cursor: pointer; padding: 0; font-size: 13px; }

main.contenuto { max-width: 1100px; margin: 20px auto; padding: 0 16px; }
main.pieno { padding: 12px 14px; }

/* --- testata griglia ----------------------------------------------------- */
.testata-griglia {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.testata-griglia h1 { font-size: 17px; margin: 0; flex: 1; text-transform: capitalize; }
.navigazione { display: flex; align-items: center; gap: 6px; }
.bottone {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--bordo-forte);
  border-radius: 4px;
  background: var(--carta);
  text-decoration: none;
  color: var(--testo);
  cursor: pointer;
}
.bottone.oggi { border-color: var(--accento); color: var(--accento); font-weight: 600; }
.azioni .copia { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tenue); }

/* --- messaggi ------------------------------------------------------------ */
.messaggi { min-height: 22px; }
.messaggi p { margin: 0 0 6px; padding: 5px 10px; border-radius: 4px; font-size: 13px; }
.messaggi .ok { background: #e6f4ec; color: var(--ok); border: 1px solid #b8e0c9; }
.messaggi .ko { background: #fdeceb; color: var(--ko); border: 1px solid #f3c4c1; }

/* --- disposizione griglia + contatori ------------------------------------ */
.disposizione { display: flex; gap: 14px; align-items: flex-start; }
.contenitore-griglia {
  flex: 1;
  overflow-x: auto;
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: 6px;
}

/* --- griglia ------------------------------------------------------------- */
.griglia {
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 11px;
  user-select: none;
}
.griglia th, .griglia td { border: 1px solid var(--bordo); padding: 0; }
.griglia thead th {
  position: sticky;
  top: 0;
  background: #eef1f4;
  font-weight: 600;
  color: var(--tenue);
  height: 22px;
  z-index: 10;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
}
/* L'ora si scrive una volta sola: la mezz'ora e' un "30" piu' leggero.
   La notte (0-6) sta in colonne da un'ora, come sul foglio, ed e' piu' scura
   per ricordare che un click li' vale sessanta minuti. */
.griglia thead .ora {
  width: var(--larghezza-slot);
  min-width: var(--larghezza-slot);
  font-size: 11px;
}
.griglia thead .ora.inizio-ora { border-left: 2px solid var(--bordo-forte); color: var(--testo); }
.griglia thead .ora.mezza { font-size: 9px; font-weight: 400; color: #97a1ab; }
.griglia thead .ora.compressa { background: #e2e7ec; }
.intestazione-sito, .nome-sito {
  position: sticky;
  left: 0;
  z-index: 20;
  background: var(--carta);
  width: var(--larghezza-sito);
  min-width: var(--larghezza-sito);
  max-width: var(--larghezza-sito);
  text-align: left;
  padding: 2px 6px;
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-right: 2px solid var(--bordo-forte);
}
.intestazione-sito { z-index: 30; background: #eef1f4; }
.riga-sito:nth-child(even) .nome-sito { background: var(--riga-alt); }
.corsia-extra .nome-sito { font-weight: 400; color: var(--tenue); }
.continuazione { color: var(--bordo-forte); padding-left: 10px; }
.badge { font-size: 9px; background: #eee; color: var(--tenue); padding: 0 4px; border-radius: 3px; text-transform: uppercase; }

.cella {
  width: var(--larghezza-slot);
  min-width: var(--larghezza-slot);
  height: var(--altezza-riga);
}
.cella.libera { cursor: cell; }
.cella.libera.confine { border-left: 2px solid var(--bordo-forte); }
.riga-sito:nth-child(even) .cella.libera { background: var(--riga-alt); }
.cella.libera:hover { background: #dfe9f5; }
.cella.selezionata { background: #b9d3f0 !important; }

.cella.turno {
  background: hsl(var(--tinta) 62% 86%);
  border: 1px solid hsl(var(--tinta) 45% 62%);
  cursor: pointer;
  text-align: center;
  overflow: hidden;
}
.cella.turno:hover { background: hsl(var(--tinta) 70% 78%); }
.cella.turno .sigla {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .04em;
  color: hsl(var(--tinta) 55% 25%);
  white-space: nowrap;
}
.vuoto { padding: 20px; text-align: center; color: var(--tenue); }

/* --- pannello contatori -------------------------------------------------- */
.pannello-contatori {
  width: 290px;
  flex: 0 0 auto;
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: 6px;
  padding: 10px 12px;
  position: sticky;
  top: 60px;
  max-height: calc(100vh - 80px);
  overflow: auto;
}
.pannello-contatori h2 { font-size: 13px; margin: 0 0 8px; text-transform: uppercase; color: var(--tenue); letter-spacing: .06em; }
.contatori { width: 100%; border-collapse: collapse; font-size: 12px; }
.contatori th { text-align: right; font-weight: 600; color: var(--tenue); font-size: 11px; padding: 2px 4px; border-bottom: 1px solid var(--bordo); }
.contatori th:first-child { text-align: left; }
.contatori td { padding: 2px 4px; text-align: right; border-bottom: 1px solid #eef1f4; font-variant-numeric: tabular-nums; }
.contatori tr.inattivo { opacity: .5; }
.sigla-contatore {
  text-align: left !important;
  font-weight: 700;
  border-left: 4px solid hsl(var(--tinta) 55% 62%);
  padding-left: 6px !important;
}
.contatori .zero { color: #c0c6cc; }
.contatori .mese { position: relative; min-width: 78px; }
.barra-ore {
  position: absolute;
  left: 4px; right: 4px; bottom: 1px;
  height: 3px;
  background: linear-gradient(to right, hsl(145 55% 45%) var(--quota), #e6eaee var(--quota));
  border-radius: 2px;
}
.legenda { font-size: 11px; color: var(--tenue); margin: 8px 0 0; }

/* --- dialogo ------------------------------------------------------------- */
.dialogo {
  position: fixed;
  inset: 0;
  background: rgba(20, 26, 32, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.dialogo[hidden] { display: none; }
.riquadro {
  background: var(--carta);
  border-radius: 8px;
  padding: 16px 18px;
  width: 340px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}
.riquadro header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.riquadro h2 { font-size: 15px; margin: 0; }
.sito-form { font-size: 12px; color: var(--tenue); }
.riquadro label { display: block; font-size: 12px; color: var(--tenue); margin-bottom: 8px; }
.riquadro input {
  display: block;
  width: 100%;
  margin-top: 3px;
  padding: 6px 8px;
  border: 1px solid var(--bordo-forte);
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
}
.campo-sigla input { font-size: 20px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-align: center; }
.orari { display: flex; gap: 10px; }
.orari label { flex: 1; }
.nota-orario { font-size: 11px; color: var(--tenue); margin: -2px 0 10px; }
.riquadro footer { display: flex; gap: 8px; margin-top: 12px; }
.riquadro button, .modulo button {
  padding: 7px 14px;
  border: 1px solid var(--bordo-forte);
  border-radius: 4px;
  background: var(--carta);
  cursor: pointer;
  font-size: 13px;
}
.riquadro .primario, .modulo .primario { background: var(--accento); border-color: var(--accento); color: #fff; font-weight: 600; }
.riquadro .pericolo { margin-left: auto; color: var(--ko); border-color: #e7b4b0; }

/* --- pagine semplici ----------------------------------------------------- */
h1 { font-size: 20px; }
.tabella { width: 100%; border-collapse: collapse; background: var(--carta); border: 1px solid var(--bordo); border-radius: 6px; }
.tabella th, .tabella td { padding: 6px 10px; border-bottom: 1px solid var(--bordo); text-align: left; font-size: 13px; }
.tabella thead th { background: #eef1f4; font-size: 12px; color: var(--tenue); text-transform: uppercase; letter-spacing: .04em; }
.tabella tbody tr:hover { background: var(--riga-alt); }
.tabella .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabella tr.inattivo { opacity: .55; }
.modulo { background: var(--carta); border: 1px solid var(--bordo); border-radius: 6px; padding: 12px 14px; margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.modulo label { font-size: 12px; color: var(--tenue); display: flex; flex-direction: column; gap: 3px; }
.modulo input, .modulo select { padding: 6px 8px; border: 1px solid var(--bordo-forte); border-radius: 4px; font-size: 13px; font-family: inherit; }
.modulo input[type=checkbox] { width: auto; }
.pannello { background: var(--carta); border: 1px solid var(--bordo); border-radius: 6px; padding: 12px 14px; margin-bottom: 14px; }
.esito-ok { color: var(--ok); font-weight: 600; }
.esito-ko { color: var(--ko); font-weight: 600; }
.anteprima { white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--sfondo); border: 1px solid var(--bordo); border-radius: 4px; padding: 8px; margin: 6px 0 0; }
details summary { cursor: pointer; font-size: 12px; color: var(--accento); }

/* --- accesso ------------------------------------------------------------- */
.accesso { max-width: 320px; margin: 12vh auto; background: var(--carta); border: 1px solid var(--bordo); border-radius: 8px; padding: 24px; }
.accesso h1 { margin: 0 0 16px; font-size: 18px; text-align: center; }
.accesso label { display: block; font-size: 12px; color: var(--tenue); margin-bottom: 12px; }
.accesso input { display: block; width: 100%; margin-top: 4px; padding: 8px; border: 1px solid var(--bordo-forte); border-radius: 4px; font-size: 14px; }
.accesso button { width: 100%; padding: 9px; background: var(--accento); color: #fff; border: none; border-radius: 4px; font-size: 14px; font-weight: 600; cursor: pointer; }

/* --- stampa (ripiego finché non arriva la vista WeasyPrint) --------------- */
@media print {
  @page { size: A4 landscape; margin: 8mm; }
  body { background: #fff; }
  .barra, .navigazione, .azioni, .dialogo, .legenda, .messaggi { display: none !important; }
  main.pieno { padding: 0; }
  .disposizione { display: block; }
  .contenitore-griglia { overflow: visible; border: none; }
  .pannello-contatori { width: 100%; position: static; max-height: none; page-break-before: always; border: none; }
  .griglia { font-size: 7pt; width: 100%; }
  .griglia thead th { position: static; }
  .nome-sito, .intestazione-sito { position: static; width: 30mm; min-width: 30mm; max-width: 30mm; font-size: 7pt; }
  :root { --altezza-riga: 16px; --larghezza-slot: 5mm; }
  .cella.turno { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .testata-griglia h1 { font-size: 12pt; }
}

/* --- logo e accesso ------------------------------------------------------ */
.logo-barra { height: 34px; width: auto; display: block; border-radius: 3px; }
.marchio { display: flex; align-items: center; padding: 0; }
.logo-accesso {
  display: block;
  width: 150px;
  margin: 0 auto 18px;
  border-radius: 8px;
}
.accesso { background: var(--carta); }
.sotto-accesso { text-align: center; font-size: 12px; color: var(--tenue); margin: 14px 0 0; }

/* --- avvisi -------------------------------------------------------------- */
.avviso-ok, .avviso-ko {
  padding: 7px 12px;
  border-radius: 4px;
  font-size: 13px;
  margin: 0 0 14px;
}
.avviso-ok { background: #e6f4ec; color: var(--ok); border: 1px solid #b8e0c9; }
.avviso-ko { background: #fdeceb; color: var(--ko); border: 1px solid #f3c4c1; }
.spiegazione { font-size: 12.5px; color: var(--tenue); margin: 0 0 12px; max-width: 68ch; }

/* --- pannelli di impostazioni -------------------------------------------- */
.pannello h2 { font-size: 14px; margin: 0 0 6px; text-transform: uppercase; letter-spacing: .05em; color: var(--tenue); }
.campi { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; }
.campi label { font-size: 12px; color: var(--tenue); display: flex; flex-direction: column; gap: 3px; }
.campi input { padding: 6px 8px; border: 1px solid var(--bordo-forte); border-radius: 4px; font-size: 13px; font-family: inherit; }
.campi .interruttore { flex-direction: row; align-items: center; gap: 6px; font-size: 13px; color: var(--testo); }
.campi .interruttore input { width: auto; }
.riga-azione { display: flex; gap: 4px; align-items: center; }
.riga-azione input { padding: 4px 6px; border: 1px solid var(--bordo); border-radius: 4px; font-size: 12px; }
.tabella .portale { white-space: nowrap; }
.tabella .portale form { display: inline; }

/* --- portale operatore (si usa dal telefono) ----------------------------- */
.testata-turni { display: flex; align-items: baseline; gap: 12px; }
.testata-turni h1 { margin: 0; }
.sigla-grande { font-weight: 700; color: var(--accento); letter-spacing: .08em; margin: 0; }
.navigazione-settimana { display: flex; align-items: center; gap: 12px; margin: 12px 0 16px; font-size: 15px; }
.giorni { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.giorno {
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-left: 4px solid var(--accento);
  border-radius: 6px;
  padding: 10px 14px;
}
.giorno.riposo { border-left-color: var(--bordo); }
.giorno.oggi { border-left-color: var(--ok); box-shadow: 0 0 0 2px #e6f4ec; }
.etichetta-giorno { display: flex; justify-content: space-between; align-items: baseline; }
.nome-giorno { font-weight: 600; text-transform: capitalize; }
.ore-giorno { font-variant-numeric: tabular-nums; color: var(--tenue); font-size: 13px; }
.giorno .turni { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 4px; }
.giorno .turni li { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.orario { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 108px; }
.sito { flex: 1; }
.nota { font-size: 12px; color: var(--tenue); font-style: italic; }
.nessun-turno { font-size: 13px; color: var(--tenue); }
.totale-settimana { margin-top: 16px; font-size: 15px; }

@media (max-width: 640px) {
  .barra { gap: 10px; padding: 6px 10px; }
  .barra nav { gap: 8px; font-size: 14px; }
  main.contenuto { margin: 12px auto; padding: 0 10px; }
  .orario { min-width: 100%; }
}

/* --- stati vuoti --------------------------------------------------------- */
.stato-vuoto {
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: 6px;
  padding: 26px 24px;
  text-align: center;
  max-width: 520px;
  margin: 30px auto;
}
.stato-vuoto h2 { margin: 0 0 6px; font-size: 16px; }
.stato-vuoto p { color: var(--tenue); font-size: 13px; margin: 0 0 12px; }
.stato-vuoto .bottone { margin: 0 4px; }
.stato-vuoto .bottone.primario { background: var(--accento); border-color: var(--accento); color: #fff; font-weight: 600; }
.disposizione.nascosta { display: none; }
.vuoto-contatori { text-align: left !important; color: var(--tenue); padding: 10px 4px !important; font-size: 12px; }

/* --- schermi stretti: telefono e tablet ---------------------------------- */
@media (max-width: 1000px) {
  /* il pannello dei contatori scende sotto la griglia invece di strozzarla */
  .disposizione { flex-direction: column; }
  .pannello-contatori {
    width: 100%;
    position: static;
    max-height: none;
    order: 2;
  }
  .contenitore-griglia { width: 100%; }
}

@media (max-width: 700px) {
  :root { --larghezza-sito: 128px; --altezza-riga: 30px; }
  main.pieno { padding: 8px; }
  /* la barra di navigazione scorre invece di andare a capo tre volte */
  .barra { gap: 10px; padding: 6px 10px; flex-wrap: nowrap; }
  .barra nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .barra nav::-webkit-scrollbar { display: none; }
  .barra nav a { white-space: nowrap; font-size: 13px; }
  .logo-barra { height: 28px; }
  .utente { display: none; }
  .uscita { flex: 0 0 auto; }

  .testata-griglia { gap: 8px 10px; }
  /* flex-basis:100% (non width) per battere il flex:1 della regola base e
     mandare il titolo su una riga propria */
  .testata-griglia h1 { order: 3; flex: 0 0 100%; font-size: 15px; }
  .navigazione { order: 1; flex-wrap: wrap; }
  .azioni { order: 4; flex: 0 0 100%; }
  .azioni .copia { flex-wrap: wrap; }

  /* toccare una cella e' piu' impreciso del mouse: righe piu' alte */
  .contatori { font-size: 13px; }
  .contatori td { padding: 4px; }
  .modulo { flex-direction: column; align-items: stretch; }
  .modulo label { width: 100%; }
  .modulo input, .modulo select { width: 100%; }
  .tabella { display: block; overflow-x: auto; }
  .riquadro { width: calc(100vw - 24px); max-width: 360px; }
  .campi { flex-direction: column; align-items: stretch; }
  .campi input { width: 100%; }
}