/* ==========================================================================
   EpimWeb v2 — foglio di stile

   Impianto: la settimana e' divisa in due fasce sovrapposte che condividono
   le stesse sette colonne. L'allineamento fra le due zone e' garantito da
   un'unica griglia CSS ripetuta identica in quattro punti (intestazione,
   zona libera, contatori, zona oraria): la variabile --canale tiene la
   colonna di sinistra della stessa larghezza ovunque.

   Il cromo e' volutamente spento: i colori veri sono quelli dei calendari e
   delle categorie, e devono poter parlare senza concorrenza.
   ========================================================================== */

:root {
  /* Struttura */
  --canale: 52px;          /* colonna di sinistra: ore e allineamento */
  --lato: 208px;           /* barra dei calendari */
  --barra-h: 46px;
  --altezza-oraria: 240px; /* la maniglia scrive qui */
  --ora-h: 42px;           /* altezza di un'ora nella zona oraria */

  /* Inchiostri */
  --sfondo: #EEF0F3;
  --carta: #FFFFFF;
  --testo: #1A1E23;
  --tenue: #6A727C;
  --linea: #DBDFE5;
  --linea-forte: #C2C8D0;

  /* Interazione */
  --accento: #2B4570;
  --accento-tenue: #E7ECF4;
  --oggi: #FBF3DC;
  --oggi-linea: #E0C168;

  /* Stati dell'evento */
  --fatto-fondo: #E3F1D8;
  --fatto-linea: #7FAE5E;

  --raggio: 3px;
  --ombra: 0 1px 2px rgba(20, 30, 45, .10);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font: 13px/1.35 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* ==========================================================================
   BARRA SUPERIORE
   ========================================================================== */

.guscio { display: flex; flex-direction: column; height: 100%; }

.barra {
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--barra-h);
  padding: 0 12px;
  background: var(--carta);
  border-bottom: 1px solid var(--linea-forte);
  flex: none;
}

.navigazione { display: flex; align-items: center; gap: 2px; }

.passo, .oggi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 27px;
  padding: 0 9px;
  border: 1px solid var(--linea-forte);
  border-radius: var(--raggio);
  background: var(--carta);
  color: var(--testo);
  text-decoration: none;
  font-size: 13px;
}
.passo { width: 27px; padding: 0; font-size: 17px; line-height: 1; }
.passo:hover, .oggi:hover { background: var(--accento-tenue); border-color: var(--accento); }

.periodo {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
}

.stato-barra { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.conteggio { color: var(--tenue); font-size: 12px; font-variant-numeric: tabular-nums; }

.apri-lato {
  display: none;
  width: 30px; height: 27px;
  border: 1px solid var(--linea-forte);
  border-radius: var(--raggio);
  background: var(--carta);
  cursor: pointer;
}

/* ==========================================================================
   CORPO E BARRA LATERALE
   ========================================================================== */

.corpo { display: flex; flex: 1; min-height: 0; }

.lato {
  width: var(--lato);
  flex: none;
  padding: 12px 10px;
  background: var(--carta);
  border-right: 1px solid var(--linea-forte);
  overflow-y: auto;
}

.lato h2 {
  margin: 0 0 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tenue);
}
.lato h2:not(:first-child) { margin-top: 18px; }

.elenco-calendari, .legenda { list-style: none; margin: 0; padding: 0; }

.elenco-calendari li {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 5px;
  border-radius: var(--raggio);
  cursor: pointer;
}
.elenco-calendari li:hover { background: var(--accento-tenue); }
.elenco-calendari .vuoto { color: var(--tenue); cursor: default; }
.elenco-calendari .vuoto:hover { background: none; }

.pastiglia {
  width: 11px; height: 11px;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,.22);
  flex: none;
}
.nome-cal { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.elenco-calendari li.spento .nome-cal,
.elenco-calendari li.spento .pastiglia { opacity: .34; }

/* Il puntino che ricorda: quello che scrivi qui esce dalla macchina. */
.punto-ms {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accento);
  flex: none;
}

.legenda li {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 5px;
  color: var(--tenue);
  font-size: 12px;
}
.quadrato-cat { width: 8px; height: 8px; background: #84EFF7; border: 1px solid rgba(0,0,0,.25); }
.barra-completo { width: 11px; height: 11px; background: var(--fatto-fondo); border: 1px solid var(--fatto-linea); }

/* ==========================================================================
   GRIGLIA — le quattro fasce allineate
   ========================================================================== */

.griglia {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--sfondo);
}

/* La griglia condivisa. Ripetuta identica: e' cio' che tiene allineate
   la zona libera e quella oraria. */
.intestazione-giorni,
.colonne-libera,
.contatori,
.telaio-ore {
  display: grid;
  grid-template-columns: var(--canale) repeat(7, minmax(0, 1fr));
}

.canale { border-right: 1px solid var(--linea); }

/* --- Intestazione dei giorni --- */
.intestazione-giorni {
  flex: none;
  background: var(--carta);
  border-bottom: 1px solid var(--linea-forte);
}

.giorno-testa {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  padding: 5px 4px;
  border-right: 1px solid var(--linea);
}
.giorno-testa:last-child { border-right: 0; }
.giorno-testa .sigla {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tenue);
}
.giorno-testa .numero { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.giorno-testa.festivo .sigla { color: #A8534C; }
.giorno-testa.e-oggi { background: var(--oggi); box-shadow: inset 0 -2px 0 var(--oggi-linea); }

/* ==========================================================================
   ZONA LIBERA — la fascia grande, senza ore
   ========================================================================== */

.zona-libera {
  flex: 1;
  min-height: 90px;
  display: flex;
  flex-direction: column;
  background: var(--carta);
  overflow: hidden;
}

/* Scorrimento UNICO per tutte e sette le colonne: scendono insieme e
   restano allineate. Sette barre indipendenti sarebbero inutilizzabili. */
.scorrimento-libera { flex: 1; overflow-y: auto; overflow-x: hidden; }

.colonne-libera { min-height: 100%; align-items: stretch; }

.colonna-libera {
  border-right: 1px solid var(--linea);
  padding: 4px;
  min-height: 100%;
}
.colonna-libera:last-child { border-right: 0; }
.colonna-libera.festivo { background: #FAFAFB; }
.colonna-libera.e-oggi { background: var(--oggi); }
.colonna-libera.bersaglio { background: var(--accento-tenue); }

.lista { list-style: none; margin: 0; padding: 0; min-height: 40px; }

/* --- Il blocco, uguale nelle due zone ---
   Deve essere abbastanza alto da contenere piu' righe di testo formattato:
   nella zona libera il blocco NON e' un'etichetta, e' il contenuto. */
.blocco {
  position: relative;
  margin-bottom: 4px;
  padding: 6px 14px 7px 9px;
  min-height: 34px;
  background: var(--carta);
  border: 1px solid var(--linea-forte);
  border-left: 5px solid var(--linea-forte);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  cursor: grab;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.4;
}
.blocco:hover { border-color: var(--accento); }
.blocco.in-volo { opacity: .4; }
.blocco.fatto { background: var(--fatto-fondo); border-color: var(--fatto-linea); }

.blocco .testo { word-break: break-word; white-space: pre-wrap; }
.blocco .testo b, .blocco .testo strong { font-weight: 700; }
.blocco .testo ul, .blocco .testo ol { margin: 2px 0 0; padding-left: 17px; }
.blocco .testo li { margin: 1px 0; }
.blocco .testo a { color: var(--accento); }

/* L'ora, quando c'e', precede il testo senza rubargli spazio */
.blocco .ora {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--tenue);
  margin-right: 5px;
}
.blocco.fatto .ora { color: #4E7038; }

/* Quadratino della categoria: in basso a destra, come in EPIM */
.blocco .categoria {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 7px; height: 7px;
  border: 1px solid rgba(0,0,0,.28);
}

/* Pallino Microsoft: in alto a destra, non confondibile col quadratino */
.blocco .ms {
  position: absolute;
  right: 3px;
  top: 4px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accento);
}

/* --- Contatori "+N": cosa resta sotto la piega --- */
.contatori {
  flex: none;
  border-top: 1px solid var(--linea);
  background: var(--carta);
  min-height: 0;
}
.cella-contatore {
  border-right: 1px solid var(--linea);
  text-align: center;
  font-size: 11px;
  color: var(--accento);
  padding: 0;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.cella-contatore:last-child { border-right: 0; }
.cella-contatore:not(:empty) { padding: 2px 0; }
.cella-contatore:hover:not(:empty) { background: var(--accento-tenue); }

/* ==========================================================================
   MANIGLIA — il confine trascinabile
   ========================================================================== */

.maniglia {
  flex: none;
  height: 9px;
  background: var(--sfondo);
  border-top: 1px solid var(--linea-forte);
  border-bottom: 1px solid var(--linea-forte);
  cursor: row-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}
.maniglia:hover, .maniglia:focus-visible { background: var(--accento-tenue); }
.maniglia .presa {
  width: 46px;
  height: 3px;
  border-radius: 2px;
  background: var(--linea-forte);
}
.maniglia:hover .presa { background: var(--accento); }

/* ==========================================================================
   ZONA ORARIA — l'asse delle ore
   ========================================================================== */

.zona-oraria {
  flex: none;
  height: var(--altezza-oraria);
  min-height: 0;
  background: var(--carta);
  overflow: hidden;
}
.scorrimento-oraria { height: 100%; overflow-y: auto; overflow-x: hidden; }

.telaio-ore { position: relative; }

.canale-ore { position: relative; border-right: 1px solid var(--linea); }

.etichetta-ora {
  position: absolute;
  right: 5px;
  transform: translateY(-50%);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--tenue);
}

.colonna-oraria {
  position: relative;
  border-right: 1px solid var(--linea);
}
.colonna-oraria:last-child { border-right: 0; }
.colonna-oraria.festivo { background: #FAFAFB; }
.colonna-oraria.e-oggi { background: var(--oggi); }

/* Righe delle ore, disegnate in sfondo per non moltiplicare gli elementi */
.telaio-ore .righe {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--linea) 0 1px,
    transparent 1px var(--ora-h)
  );
}

.blocco-orario {
  position: absolute;
  left: 1px;
  padding: 3px 11px 3px 6px;
  min-height: 0;
  font-size: 12px;
  line-height: 1.3;
  overflow: hidden;
}

/* Linea dell'ora corrente */
.adesso {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: #C0392B;
  pointer-events: none;
  z-index: 3;
}
.adesso::before {
  content: "";
  position: absolute;
  left: -3px; top: -2.5px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #C0392B;
}

/* ==========================================================================
   MODALE
   ========================================================================== */

.velo {
  position: fixed;
  inset: 0;
  background: rgba(16, 22, 30, .42);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 40;
}
.velo[hidden] { display: none; }

.modale {
  width: min(520px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--carta);
  border-radius: 5px;
  box-shadow: 0 12px 40px rgba(10, 18, 30, .30);
}

.modale-testa {
  display: flex;
  align-items: center;
  padding: 11px 14px;
  border-bottom: 1px solid var(--linea);
}
.modale-testa h2 { margin: 0; font-size: 14px; font-weight: 600; }
.chiudi {
  margin-left: auto;
  width: 26px; height: 26px;
  border: 0;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--tenue);
  cursor: pointer;
  border-radius: var(--raggio);
}
.chiudi:hover { background: var(--sfondo); color: var(--testo); }

.modale-corpo { padding: 14px; overflow-y: auto; }

.campo { display: block; margin-bottom: 11px; }
.campo > span {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tenue);
}
.coppia { display: flex; gap: 11px; }
.coppia .campo { flex: 1; }

.campo input, .campo select, .editor {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--linea-forte);
  border-radius: var(--raggio);
  background: var(--carta);
  font: inherit;
  color: var(--testo);
}
.campo input:focus, .campo select:focus, .editor:focus {
  outline: 2px solid var(--accento);
  outline-offset: -1px;
  border-color: var(--accento);
}
.editor {
  min-height: 108px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  line-height: 1.45;
}
.editor ul, .editor ol { margin: 3px 0; padding-left: 20px; }

/* --- Barra di formattazione --- */
.fmt-barra {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 3px 4px;
  border: 1px solid var(--linea-forte);
  border-bottom: 0;
  border-radius: var(--raggio) var(--raggio) 0 0;
  background: var(--sfondo);
  flex-wrap: wrap;
}

.fmt {
  min-width: 26px;
  height: 24px;
  padding: 0 5px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--testo);
  cursor: pointer;
  line-height: 1;
}
.fmt:hover { background: var(--carta); border-color: var(--linea-forte); }
.fmt s { text-decoration: line-through; }

.fmt-sep {
  width: 1px;
  height: 17px;
  margin: 0 3px;
  background: var(--linea-forte);
}

.fmt-tavolozza { position: relative; display: inline-flex; }
.fmt-apri::after {
  content: "▾";
  font-size: 8px;
  margin-left: 2px;
  color: var(--tenue);
}

.fmt-colori {
  display: none;
  position: absolute;
  top: 26px;
  left: 0;
  z-index: 5;
  padding: 5px;
  gap: 4px;
  background: var(--carta);
  border: 1px solid var(--linea-forte);
  border-radius: var(--raggio);
  box-shadow: 0 3px 12px rgba(10, 18, 30, .20);
  width: 96px;
  flex-wrap: wrap;
}
.fmt-tavolozza.aperta .fmt-colori { display: flex; }

.fmt-colore {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, .28);
  border-radius: 2px;
  cursor: pointer;
}
.fmt-colore:hover { outline: 2px solid var(--accento); outline-offset: 1px; }

.avviso {
  margin: 0;
  padding: 7px 9px;
  border-radius: var(--raggio);
  background: #FDF3D8;
  border: 1px solid #E3C56A;
  font-size: 12px;
}
.avviso[hidden] { display: none; }

.modale-piede {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-top: 1px solid var(--linea);
}
.modale-piede .spazio { flex: 1; }
.modale-piede button {
  height: 30px;
  padding: 0 14px;
  border: 1px solid var(--linea-forte);
  border-radius: var(--raggio);
  background: var(--carta);
  font: inherit;
  cursor: pointer;
}
.modale-piede button:hover { background: var(--sfondo); }
.salva { background: var(--accento) !important; border-color: var(--accento) !important; color: #fff; }
.salva:hover { filter: brightness(1.12); }
.elimina { color: #9C332B; }

/* ==========================================================================
   SCHERMI PICCOLI
   La vista resta la settimana, come sul computer: scorre in orizzontale.
   ========================================================================== */

@media (max-width: 860px) {
  :root { --canale: 40px; --lato: 200px; }

  .apri-lato { display: inline-flex; align-items: center; justify-content: center; }

  .lato {
    position: fixed;
    top: var(--barra-h);
    bottom: 0;
    left: 0;
    z-index: 30;
    transform: translateX(-100%);
    transition: transform .18s ease;
    box-shadow: 3px 0 14px rgba(10, 18, 30, .16);
  }
  .lato.aperto { transform: none; }

  .periodo { font-size: 13px; }

  /* Le sette colonne restano sette: si scorre di lato invece di ridurle
     a poltiglia. */
  .griglia { overflow-x: auto; }
  .intestazione-giorni,
  .colonne-libera,
  .contatori,
  .telaio-ore {
    grid-template-columns: var(--canale) repeat(7, minmax(96px, 1fr));
    min-width: 760px;
  }
}

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

/* ==========================================================================
   ACCESSO
   ========================================================================== */

.ingresso {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--sfondo);
}

.scheda-accesso {
  width: min(340px, 100%);
  padding: 26px 24px 22px;
  background: var(--carta);
  border: 1px solid var(--linea-forte);
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(15, 25, 40, .10);
}

.scheda-accesso h1 {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.01em;
}
/* Le quattro lettere riprendono i colori dell'icona. */
.scheda-accesso h1::first-letter { color: #C0392B; }

.sottotitolo {
  margin: 2px 0 20px;
  color: var(--tenue);
  font-size: 13px;
}

.scheda-accesso .campo { margin-bottom: 14px; }

.con-occhio { position: relative; display: block; }
.con-occhio input { padding-right: 38px; }
.occhio {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 26px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}

.codice {
  font-size: 22px;
  letter-spacing: .32em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.primario {
  width: 100%;
  height: 36px;
  margin-top: 4px;
  border: 1px solid var(--accento);
  border-radius: var(--raggio);
  background: var(--accento);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.primario:hover { filter: brightness(1.12); }

.errore {
  margin: 0 0 14px;
  padding: 8px 10px;
  border: 1px solid #D9A5A0;
  border-radius: var(--raggio);
  background: #FBEBEA;
  color: #8E2F27;
  font-size: 12.5px;
}

.nota {
  margin: 12px 0 0;
  color: var(--tenue);
  font-size: 11.5px;
  text-align: center;
}
.nota a { color: var(--accento); }

/* Utente ed uscita nella barra superiore */
.utente {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--tenue);
  font-size: 12px;
}
.utente a { color: var(--accento); text-decoration: none; }
.utente a:hover { text-decoration: underline; }