/* ============================================================
   DOSSIERO PER SHIFT — i pezzi che il kit non ha
   Viene dopo 01-token, 02-base, 03-componenti e 04-v5 (lo Stile V5
   di Dossiero, repo/pezzi/kit-dossiero-v5), e ne usa solo i token:
   niente colori scritti a mano, niente misure inventate. I pezzi
   comuni (ingresso, filtri, schede, posta) vengono da BlancoHub.

   Le correzioni per il telefono stanno in fondo, in un blocco solo.
   ============================================================ */

/* ---- Token nostri ------------------------------------------ */
/* I colori dell'agenda: i sei stati del V5 per i clienti, e uno suo
   per il personale (rosa), con la tinta del chiaro e dello scuro. */
body.stile-v5 { --s-rosa: #f472b6; --posta-fondo: #fff; }
body.stile-v5.theme-light { --s-rosa: #be185d; }

.k-ciano    { --kc: var(--s-ciano); }
.k-viola    { --kc: var(--s-viola); }
.k-arancio  { --kc: var(--s-arancio); }
.k-verde    { --kc: var(--s-verde); }
.k-rosso    { --kc: var(--s-rosso); }
.k-blu      { --kc: var(--s-blu); }
.k-personale { --kc: var(--s-rosa); }
.k-neutro   { --kc: var(--muted); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- La barra in alto: marchio, tema, chi sei, esci -------- */

.brand { display: flex; align-items: center; gap: var(--space-2); color: var(--text); }
.brand-segno {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--text);
  color: var(--bg);
}
.brand-segno svg { width: 20px; height: 20px; }

.topbar-meta { display: flex; align-items: center; gap: var(--space-2); }
.topbar-meta form { margin: 0; }
.topbar-utente { color: var(--muted-strong); font-size: var(--fs-small); }

.btn.btn-icona { display: inline-grid; place-items: center; width: 36px; padding: 0; }
.btn-icona svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- L'ingresso ------------------------------------------ */

.accesso { display: grid; place-items: center; min-height: 100vh; padding: var(--space-4); }
.accesso-card { width: min(400px, 100%); }
.accesso-marchio { margin-bottom: var(--space-5); }
.accesso-card h1 { margin-bottom: var(--space-4); }
.accesso-card .btn { width: 100%; }
/* Il V5 toglie il maiuscolo alle etichette dentro la pagina; l'ingresso
   sta fuori da .content, e qui lo si toglie a mano. */
body.stile-v5 .accesso label { letter-spacing: 0; text-transform: none; }
.accesso-firma { margin: var(--space-4) 0 0; color: var(--muted); font-size: var(--fs-small); text-align: center; }

.errore-dettaglio {
  max-height: 320px;
  overflow: auto;
  margin: var(--space-4) 0;
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--bg-soft);
  color: var(--muted-strong);
  font-size: var(--fs-small);
  white-space: pre-wrap;
}

/* ---- Il menu: le icone alle voci di tutti i giorni --------- */

.nav-icon { display: inline-flex; flex: 0 0 18px; width: 18px; height: 18px; align-items: center; justify-content: center; }
.nav-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.8; }
.sidebar nav a.is-active .nav-icon svg { opacity: 1; }
.sidebar nav a { display: flex; align-items: center; gap: var(--space-2); }
.nav-label { flex: 1; min-width: 0; }

.menu-conta {
  display: inline-block;
  min-width: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.menu-conta.is-urgente { background: color-mix(in srgb, var(--s-rosso) 14%, transparent); color: var(--s-rosso); }

/* ---- Pezzi comuni delle pagine ------------------------------ */

.vuoto { margin: var(--space-3) 0; color: var(--muted); }
.campo-errore { margin: var(--space-1) 0 0; color: var(--danger); }
.is-nascosto { display: none !important; }

.grid.due-colonne { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0; align-items: start; }

.card-testa { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.sezione-titolo { margin: var(--space-4) 0 var(--space-2); color: var(--muted-strong); font-size: var(--fs-small); font-weight: 600; }

.filtri { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.filtri input[type="search"] { flex: 1 1 260px; width: auto; }
.filtri select { flex: 0 1 220px; width: auto; }

.schede { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-4); }
.schede a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted-strong);
  font-size: var(--fs-small);
}
.schede a:hover { background: var(--panel-2); color: var(--text); }
.schede a.is-active { border-color: transparent; background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.pallino {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: var(--radius-pill);
  background: var(--kc, var(--accent));
  vertical-align: 0;
}
.pallino.is-ciano { --kc: var(--s-ciano); } .pallino.is-viola { --kc: var(--s-viola); }
.pallino.is-arancio { --kc: var(--s-arancio); } .pallino.is-verde { --kc: var(--s-verde); }
.pallino.is-rosso { --kc: var(--s-rosso); } .pallino.is-blu { --kc: var(--s-blu); }
.pallino.is-personale { --kc: var(--s-rosa); }
.page-head h1 .pallino { width: 14px; height: 14px; vertical-align: 1px; }

.dati { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); margin: 0; }
.dati dt { color: var(--muted); font-size: var(--fs-small); line-height: 1.9; }
.dati dd { margin: 0; line-height: 1.9; overflow-wrap: anywhere; }
.descrizione { margin: var(--space-4) 0 0; color: var(--muted-strong); }

/* Due scelte corte (Lavoro / Personale) stanno in riga. */
.choice-list.choice-riga { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.passi { margin: 0 0 var(--space-3); padding-left: var(--space-4); }
.passi li { margin: var(--space-1) 0; }
.elenco-note { margin: 0; padding-left: var(--space-4); color: var(--muted-strong); font-size: var(--fs-small); }

.avviso-notifiche { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.avviso-notifiche[hidden] { display: none; }

/* Il colore del cliente: sei campioni da toccare. L'input c'e' (si
   manda col modulo, le frecce funzionano) ma non si vede: si vede il
   campione, con l'anello quando e' scelto. */
.colori-scelta { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.colore-scelta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 6px 12px 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--text);
  font-size: var(--fs-small);
  font-weight: 500;
  cursor: pointer;
}
.colore-scelta input { position: absolute; opacity: 0; pointer-events: none; }
.colore-campione { width: 16px; height: 16px; border-radius: var(--radius-pill); background: var(--kc); }
.colore-scelta:has(input:checked) { border-color: var(--kc); background: color-mix(in srgb, var(--kc) 12%, transparent); }
.colore-scelta:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---- Oggi ---------------------------------------------------- */

.oggi-griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }

/* Una volta di un impegno: l'ora, il filo del colore, titolo e dettagli. */
.volte { display: flex; flex-direction: column; gap: 6px; }
.volte-giorno { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--fs-small); }
.volta {
  display: flex;
  gap: var(--space-3);
  padding: 8px 10px;
  border-left: 3px solid var(--kc, var(--accent));
  border-radius: 6px;
  background: color-mix(in srgb, var(--kc, var(--accent)) 9%, transparent);
  color: var(--text);
}
.volta:hover { background: color-mix(in srgb, var(--kc, var(--accent)) 16%, transparent); color: var(--text); }
.volta-ora { flex: none; width: 46px; font-weight: 600; font-variant-numeric: tabular-nums; }
.volta-corpo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.volta-corpo b { font-weight: 600; }
.volta-corpo small { color: var(--muted-strong); font-size: var(--fs-small); }
.volta-ripete { color: var(--muted); font-weight: 400; }

/* ---- Todo ---------------------------------------------------- */

.todo-veloce { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.todo-veloce input[name="titolo"] { flex: 1 1 240px; width: auto; }
.todo-veloce select { flex: 0 1 180px; width: auto; }
.todo-veloce input[type="date"] { flex: 0 1 160px; width: auto; }

.todo-lista { margin: 0; padding: 0; list-style: none; }
.todo { display: flex; align-items: flex-start; gap: var(--space-2); padding: 6px 0; border-top: 1px solid var(--line); }
.todo:first-child { border-top: 0; }
.todo form { margin: 0; }

/* Il tasto «fatto»: un tondo vuoto, pieno di verde quando e' fatto. */
.todo-spunta {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  padding: 0;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: none;
  color: transparent;
  cursor: pointer;
}
.todo-spunta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.todo-spunta:hover { border-color: var(--s-verde); color: var(--s-verde); }
.todo.is-fatto .todo-spunta { border-color: var(--s-verde); background: var(--s-verde); color: var(--v5-on-accent); }
.todo.is-importante .todo-spunta { border-color: var(--s-rosso); }

.todo-corpo { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; color: var(--text); }
.todo-corpo:hover { color: var(--text); }
.todo-corpo:hover .todo-titolo { text-decoration: underline; text-decoration-color: var(--line-strong); }
.todo-titolo { overflow-wrap: anywhere; }
.todo.is-fatto .todo-titolo { color: var(--muted); text-decoration: line-through; }
.todo-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-3); color: var(--muted); font-size: var(--fs-small); }
.todo-meta .status-badge { min-height: 0; padding: 0 7px; font-size: 11px; }
.todo-scaduto { color: var(--s-rosso); font-weight: 600; }
.todo-nota { text-decoration: underline dotted; }

/* ---- Posta (da BlancoHub) ------------------------------------ */

.posta-elenco tr.is-nuova td { color: var(--text); font-weight: 700; }
.posta-elenco .status-badge { margin-left: var(--space-1); }
.posta-corpo { width: 100%; min-height: 60vh; border: 1px solid var(--line); border-radius: 8px; background: var(--posta-fondo); }
.posta-testo { padding: var(--space-3); border: 1px solid var(--line); border-radius: 8px; background: var(--bg-soft); overflow-wrap: anywhere; }
.posta-firma { padding: var(--space-2) var(--space-3); border-left: 3px solid var(--line-strong); color: var(--muted-strong); }
.posta-nota { margin-top: var(--space-3); }
.posta-allegati { margin: 0; padding-left: var(--space-3); }
.posta-allegati li { margin: var(--space-1) 0; }

/* ---- Il calendario ------------------------------------------- */
/* L'agenda di Pepper come in Oltremare (repo/pezzi/agenda-calendario):
   barra, mini mese a lato, EventCalendar in mezzo, con i token del V5. */

.agenda { container-type: inline-size; display: flex; flex-direction: column; gap: var(--space-3); }
.ag-barra { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.ag-frecce { display: flex; }
.ag-frecce button, .ag-pannello-btn {
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--muted-strong); cursor: pointer;
}
.ag-frecce button:hover, .ag-pannello-btn:hover { background: var(--panel-2); color: var(--text); }
.ag-pannello-btn { display: none; }
.ag-titolo { margin: 0; overflow: hidden; min-width: 0; font-size: 1.25rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ag-titolo::first-letter { text-transform: uppercase; }
.ag-spazio { flex: 1; }
.ag-viste { display: flex; flex: none; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; }
.ag-viste button {
  padding: 6px 12px; border: 0; border-left: 1px solid var(--line); background: var(--panel);
  color: var(--muted-strong); font-size: var(--fs-small); cursor: pointer;
}
.ag-viste button:first-child { border-left: 0; }
.ag-viste button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.ag-corto { display: none; }

.ag-corpo { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.ag-lato { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.ag-blocco { display: flex; flex-direction: column; gap: 4px; }
.ag-blocco-titolo { margin: 0 0 2px; color: var(--muted); font-size: var(--fs-small); font-weight: 600; }
.ag-aiuto { margin: 0; font-size: 12px; }
.ag-livello {
  position: relative; display: flex; align-items: center; gap: 8px; margin: 0; padding: 2px 0;
  color: var(--text); font-size: var(--fs-small); font-weight: 400; cursor: pointer;
}
.ag-livello input { position: absolute; opacity: 0; pointer-events: none; }
.ag-quadro { flex: none; width: 13px; height: 13px; border: 2px solid var(--kc); border-radius: 3px; }
.ag-livello input:checked + .ag-quadro { background: var(--kc); }
.ag-livello input:focus-visible + .ag-quadro { box-shadow: 0 0 0 3px var(--accent-soft); }

.ag-mini { user-select: none; }
.ag-mini-testa { display: flex; align-items: center; gap: 2px; margin-bottom: 6px; }
.ag-mini-testa span { flex: 1; padding-left: 4px; font-size: var(--fs-small); font-weight: 600; text-transform: capitalize; }
.ag-mini-testa button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted-strong); font-size: 16px; cursor: pointer; }
.ag-mini-testa button:hover { background: var(--panel-2); }
.ag-mini-griglia { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 1px; }
.ag-mini-nome { padding: 2px 0 4px; color: var(--muted); font-size: 10.5px; text-align: center; }
.ag-g { position: relative; display: grid; place-items: center; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text); font-size: 11.5px; cursor: pointer; }
.ag-g:hover { background: var(--panel-2); }
.ag-g.fuori { color: var(--muted); }
.ag-g.visibile { border-radius: 0; background: var(--accent-soft); }
.ag-g.oggi { border-radius: 50%; background: var(--accent); color: var(--v5-on-accent); font-weight: 600; }

.ag-cal { position: relative; min-width: 0; height: 680px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.agenda.vista-mese .ag-cal, .agenda.vista-elenco .ag-cal { height: auto; min-height: 420px; }
.agenda .ec {
  height: 100%; border: 0; font-family: inherit;
  --ec-bg-color: var(--panel);
  --ec-text-color: var(--text);
  --ec-border-color: var(--line);
  --ec-color-400: var(--line-strong);
  --ec-color-300: var(--line);
  --ec-color-200: var(--panel-2);
  --ec-color-100: var(--panel-2);
  --ec-color-50: var(--panel-2);
  --ec-today-bg-color: transparent;
  --ec-highlight-color: var(--accent-soft);
  --ec-now-indicator-color: var(--s-rosso);
  --ec-event-bg-color: var(--kc, var(--accent));
  --ec-event-text-color: var(--text);
  --ec-popup-bg-color: var(--panel);
  --ec-button-bg-color: var(--panel);
  --ec-list-day-bg-color: var(--panel-2);
}
.agenda .ec-header, .agenda .ec-all-day { background: var(--panel); }
.agenda .ec-day-head, .agenda .ec-col-head { padding: 6px 0; color: var(--muted-strong); font-size: var(--fs-small); font-weight: 500; text-transform: capitalize; }
.agenda .ec-header .ec-today, .agenda .ec-col-head.ec-today { color: var(--accent); font-weight: 700; }
.agenda .ec-month-view .ec-today .ec-day-head time {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: var(--v5-on-accent); font-weight: 600;
}
.agenda .ec-sidebar, .agenda .ec-slot-label, .agenda .ec-time { color: var(--muted); font-size: 11px; }
.agenda .ec-month-view .ec-day { min-height: 92px; cursor: pointer; }
.agenda .ec-month-view .ec-day:hover { background: var(--panel-2); }
.agenda .ec-other-month { opacity: 0.55; }
.agenda .ec-more-link { color: var(--muted-strong); font-size: 11.5px; font-weight: 500; }
.agenda .ec-popup { border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: var(--shadow-soft); }
.agenda .ec-list .ec-day-head { padding: 6px 12px; background: var(--panel-2); color: var(--muted-strong); }
.agenda .ec-list .ec-event { padding: 8px 12px; }
.agenda .ec-no-events { padding: var(--space-5); color: var(--muted); text-align: center; }

.agenda .ec-event {
  padding: 1px 5px;
  border-left: 3px solid var(--kc, var(--accent));
  border-radius: 4px;
  background: color-mix(in srgb, var(--kc, var(--accent)) 16%, var(--panel));
  box-shadow: none;
  color: var(--text);
  font-size: 12px;
  line-height: 1.3;
  cursor: pointer;
}
.agenda .ec-event:hover { background: color-mix(in srgb, var(--kc, var(--accent)) 28%, var(--panel)); }
.agenda .ec-month-view .ec-event, .agenda .ec-list .ec-event { border-left-width: 0; background: none; }
.agenda .ec-month-view .ec-event:hover, .agenda .ec-list .ec-event:hover { background: var(--panel-2); }
.agenda .ec-event.is-todo { border-left-style: dashed; }
.agenda .ec-event.is-fatto .ev-titolo { color: var(--muted); text-decoration: line-through; }

.ev { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.ev.riga { flex-direction: row; align-items: center; gap: 5px; }
.ev-titolo { overflow: hidden; min-width: 0; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.ev-ora, .ev-luogo { overflow: hidden; color: var(--muted-strong); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ev-ora.prima { flex: none; }
.ev-punto { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--kc, var(--accent)); }
.ev-quadro { flex: none; width: 8px; height: 8px; border: 1.5px solid var(--kc, var(--accent)); border-radius: 2px; }
.is-fatto .ev-quadro { background: var(--kc, var(--accent)); }

@container (max-width: 860px) {
  .ag-corpo { grid-template-columns: minmax(0, 1fr); }
  .ag-lato { display: none; }
  .agenda.pannello-aperto .ag-lato { display: flex; padding: var(--space-3); border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
  .ag-pannello-btn { display: grid; }
  .ag-lungo { display: none; }
  .ag-corto { display: inline; }
}

/* ============================================================
   IL TELEFONO — tutte le correzioni qui, dal grande al piccolo.
   Stessi punti di rottura del kit: 1100, 920, 640.
   ============================================================ */

@media (max-width: 1100px) {
  .grid.due-colonne,
  .oggi-griglia {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 920px) {
  .topbar-utente { display: none; }
}

@media (max-width: 640px) {
  .filtri input[type="search"],
  .filtri select,
  .todo-veloce input[name="titolo"] {
    flex: 1 1 100%;
  }

  .todo-veloce select,
  .todo-veloce input[type="date"] {
    flex: 1 1 0;
  }

  .ag-barra { flex-wrap: wrap; }
  .ag-titolo { order: 5; flex-basis: 100%; font-size: 1.1rem; }
  .ag-cal { height: 560px; }
  .agenda .ec-month-view .ec-day { min-height: 64px; }

  .dati { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .dati dd { margin-bottom: var(--space-2); }
}