/* ---------------------------------------------------------
   Gestione personale — Calendario turni (server-rendered)
   Week/month grid + per-state shift chips + coverage-gap hint.
   WCAG: state and coverage are never colour-only — every chip
   carries its state label, and uncovered days carry a text flag.
   --------------------------------------------------------- */

.cal { margin-top: var(--sp-3); }

/* Time picker inside the single-shift form: explicit preset radios keep desktop
   entry discoverable while the structured 15-minute selectors make custom
   schedules dependable across desktop browsers. */
.turno-time-picker {
  grid-column: 1 / -1;
  min-width: 0;
  padding: var(--sp-3);
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
}
.turno-time-picker .info-disclosure {
  margin: 0 0 var(--sp-3);
  background: var(--color-surface);
}
.turno-time-picker legend {
  padding: 0 var(--sp-1);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
}
.turno-time-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.75rem, 1fr));
  gap: var(--sp-2);
}
.turno-time-preset {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "input label"
    "input range";
  align-items: center;
  gap: 0 var(--sp-2);
  min-height: 3rem;
  padding: var(--sp-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}
.turno-time-preset input {
  grid-area: input;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
}
.turno-time-preset__label {
  grid-area: label;
  font-size: var(--text-sm);
  font-weight: 700;
}
.turno-time-preset__range {
  grid-area: range;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.turno-time-preset:has(input:checked) {
  border-color: var(--accent-fill);
  background: var(--accent-soft);
}
.turno-time-preset:focus-within {
  outline: 2px solid var(--accent-fill);
  outline-offset: 2px;
}
.turno-time-manual {
  display: grid;
  grid-template-columns: repeat(2, minmax(9rem, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--color-border);
}
.orario-control {
  display: grid;
  gap: var(--sp-1);
  font-size: var(--text-sm);
  font-weight: 600;
}
.orario-control select,
.griglia-banda select {
  width: 100%;
  min-height: 2.5rem;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}
.orario-control select:focus,
.griglia-banda select:focus {
  outline: none;
  border-color: var(--accent-fill);
  box-shadow: var(--shadow-focus);
}
@media (max-width: 639px) {
  .turno-time-manual { grid-template-columns: 1fr; }
}

/* Toolbar: period nav + view toggle on one wrapping row. */
.cal-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
}

/* Weekday header strip (Lun..Dom) above the grid. */
.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sp-1);
  margin-bottom: var(--sp-1);
}
.cal-weekday {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--sp-1) 0;
}

/* Grid: 7 weekday columns for both week and month views. */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sp-1);
}

/* Single day cell. */
.cal-day {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-height: 6rem;
  padding: var(--sp-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.cal-week .cal-day { min-height: 9rem; }
.cal-month .cal-day { min-height: 6.5rem; }
.cal-day__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
}
.cal-day__num { font-weight: 600; font-size: var(--text-sm); color: var(--color-text); }
.cal-day__weekday {
  font-size: var(--text-xs);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.cal-day--today { border-color: var(--accent-fill); box-shadow: 0 0 0 1px var(--accent-fill); }
.cal-day--today .cal-day__num { color: var(--accent-ink); }
.cal-day--altro-mese { background: var(--color-bg); }
.cal-day--altro-mese .cal-day__num { color: var(--color-text-muted); font-weight: 400; }
.cal-day--scoperto { background: var(--st-bad-bg); border-color: var(--st-bad-border); }

/* Coverage-gap text flag inside an uncovered day (text + icon, not colour-only). */
.cal-day__scoperto {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--st-bad);
}

.cal-absences {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}
.cal-absence {
  display: inline-flex;
  align-items: center;
  min-height: 1.35rem;
  padding: 0 var(--sp-1);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.2;
  background: var(--color-bg);
  color: var(--color-text-muted);
}
.cal-absence--approvata {
  border-color: var(--st-ok-border);
  background: var(--st-ok-bg);
  color: var(--st-ok);
}
.cal-absence--richiesta {
  border-color: var(--st-warn-border);
  background: var(--st-warn-bg);
  color: var(--st-warn);
}
.cal-absence--malattia {
  border-color: var(--st-bad-border);
  background: var(--st-bad-bg);
  color: var(--st-bad);
}
.cal-absence--more {
  border-style: dashed;
  background: transparent;
}

/* Shift chip: state is a full background tint + border, plus a textual state
   badge — no accent bar (contract §0.4). */
.cal-shift {
  display: block;
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-size: var(--text-xs);
  line-height: 1.35;
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--motion) var(--ease), box-shadow var(--motion) var(--ease);
}
.cal-shift:hover,
.cal-shift:focus {
  text-decoration: none;
  border-color: var(--accent-fill);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.cal-shift__time { font-weight: 600; }
.cal-shift__meta { display: block; color: var(--color-text-muted); }
.cal-shift__state { font-weight: 600; }

/* Per-state colours — full tint background + border, always paired with the
   textual state label (never colour-only). */
.cal-shift--bozza { border-color: var(--st-missing-border); background: var(--st-missing-bg); }
.cal-shift--bozza .cal-shift__state { color: var(--st-missing); }
.cal-shift--pubblicato { border-color: var(--st-ok-border); background: var(--st-ok-bg); }
.cal-shift--pubblicato .cal-shift__state { color: var(--st-ok); }
.cal-shift--modificato { border-color: var(--st-warn-border); background: var(--st-warn-bg); }
.cal-shift--modificato .cal-shift__state { color: var(--st-warn); }
.cal-shift--completato { border-color: var(--accent-fill); background: var(--accent-soft); }
.cal-shift--completato .cal-shift__state { color: var(--accent-ink); }
.cal-shift--annullato { border-color: var(--color-border); background: transparent; opacity: 0.72; }
.cal-shift--annullato .cal-shift__time { text-decoration: line-through; }
/* Uncovered published shift: red marker stays a text label, never colour-only. */
.cal-shift__copertura--scoperto { color: var(--st-bad); font-weight: 600; }

/* Quick-create affordance pinned to the bottom of the cell. */
.cal-add {
  margin-top: auto;
  align-self: flex-start;
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  font-size: var(--text-md);
  line-height: 1;
  font-weight: 600;
  color: var(--accent-ink);
  border: 1px dashed var(--accent-fill);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background var(--motion-fast) var(--ease);
}
/* Touch targets keep their full 44px floor without filling every empty day
   with the same long call-to-action. */
@media (pointer: coarse) {
  .cal-add {
    width: 2.75rem;
    min-height: 2.75rem;
  }
}
.cal-add:hover,
.cal-add:focus { background: var(--accent-soft); text-decoration: none; }

/* Legend: colour swatch + text label (meaning never colour-only). */
.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.cal-legend__item { display: inline-flex; align-items: center; gap: var(--sp-1); }
/* Solid colour dot (not a left-bar swatch) — already paired with its text label. */
.cal-legend__swatch {
  width: 0.85rem;
  height: 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: 50%;
}
.cal-legend__swatch--bozza { background: var(--st-missing); border-color: var(--st-missing); }
.cal-legend__swatch--pubblicato { background: var(--st-ok); border-color: var(--st-ok); }
.cal-legend__swatch--modificato { background: var(--st-warn); border-color: var(--st-warn); }
.cal-legend__swatch--annullato { background: var(--st-na); border-color: var(--st-na); }
.cal-legend__swatch--scoperto { background: var(--st-bad); border-color: var(--st-bad); }
.cal-legend__swatch--assenza { background: var(--st-ok); border-color: var(--st-ok); }

/* Coverage summary banner above the grid: uncovered vs total + jump anchor. */
.cal-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-size: var(--text-sm);
}
.cal-summary__stat { color: var(--color-text-muted); }
.cal-summary__stat--scoperto { color: var(--st-bad); font-weight: 600; }
.cal-summary__jump {
  margin-left: auto;
  font-weight: 600;
  color: var(--accent-ink);
  text-decoration: underline;
}
.cal-summary__jump:hover,
.cal-summary__jump:focus { text-decoration: none; }

/* Per-day aggregated coverage count in the day header. */
.cal-day__copertura {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}
.cal-day__copertura--scoperto { color: var(--st-bad); }

/* "Vai a oggi" quick jump in the toolbar. */
.cal-toolbar__today {
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent-ink);
  text-decoration: none;
  border: 1px solid var(--accent-fill);
  border-radius: var(--radius);
  transition: background var(--motion-fast) var(--ease);
}
.cal-toolbar__today:hover,
.cal-toolbar__today:focus { background: var(--accent-soft); text-decoration: none; }

/* Sticky weekday header in month view: keep Lun..Dom visible while scrolling. */
.cal-weekdays--sticky {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-surface);
  padding-bottom: var(--sp-1);
}

/* CSS-only "solo scoperti" filter: native checkbox + sibling selector, zero JS.
   The checkbox is a direct child of .cal--stack so it can reach the grid; the
   visible control is the label (button-like) inside the toolbar. */
.cal-onlygaps { display: inline-flex; align-items: center; }
.cal-onlygaps__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.cal-onlygaps__label {
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.cal-onlygaps__label:hover { background: var(--color-bg); }
.cal-onlygaps__input:checked ~ .cal-toolbar .cal-onlygaps__label {
  color: var(--st-bad);
  border-color: var(--st-bad-border);
  background: var(--st-bad-bg);
}
.cal-onlygaps__input:focus-visible ~ .cal-toolbar .cal-onlygaps__label {
  outline: 2px solid var(--accent-fill);
  outline-offset: 2px;
}
/* When active, hide every covered day so only the gaps remain (cells stay in DOM). */
.cal-onlygaps__input:checked ~ .cal-grid .cal-day:not(.cal-day--scoperto) { display: none; }

/* Responsive: under 640px collapse the 7-col grid into a vertical day list. */
@media (max-width: 639px) {
  .cal--stack .cal-weekdays { display: none; }
  .cal--stack .cal-grid { grid-template-columns: 1fr; }
  .cal--stack .cal-day { min-height: 0; }
  .cal--stack .cal-week .cal-day { min-height: 0; }
}

/* View toggle: prominent segmented control (Elenco / Settimana / Mese) so the
   calendar views are discoverable — replaces the old buried <select>. */
.view-toggle {
  display: inline-flex;
  margin: var(--sp-3) 0 var(--sp-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-surface);
}
.view-toggle__btn {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  border-right: 1px solid var(--color-border);
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.view-toggle__btn:last-child { border-right: 0; }
.view-toggle__btn:hover,
.view-toggle__btn:focus-visible {
  background: var(--accent-soft);
  color: var(--accent-ink);
  text-decoration: none;
}
.view-toggle__btn.is-active { background: var(--accent-fill); color: var(--on-accent); }
/* On phones make it a full-width segmented bar that's easy to tap. */
@media (max-width: 639px) {
  .view-toggle { display: flex; width: 100%; }
  .view-toggle__btn { flex: 1; text-align: center; }
}

/* ---------------------------------------------------------
   Griglia settimanale turni — bulk data-entry (rows = fasce
   orarie, columns = Lun..Dom, cells = checkbox). Table markup
   goes through table_wrapper() for the shared responsive/
   keyboard-scroll behaviour; these rules style the grid's own
   cells on top of .data-table.
   --------------------------------------------------------- */

.griglia-corner {
  min-width: 17rem;
  vertical-align: middle;
}
.griglia-all {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
}
.griglia-col__date {
  display: block;
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
[data-col-toggle] { cursor: pointer; }
[data-row-toggle] { cursor: pointer; }

.griglia-row-head {
  min-width: 17rem;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}
.griglia-row-head__label { font-weight: 600; }
.griglia-row-head__time {
  display: block;
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.griglia-row-head--banda { white-space: normal; }

/* Ad-hoc fascia-oraria row: compact inline inputs inside the row header. */
.griglia-banda {
  display: grid;
  gap: var(--sp-2);
  min-width: min(22rem, 72vw);
  cursor: default;
}
.griglia-banda label {
  display: grid;
  gap: 2px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}
.griglia-banda input,
.griglia-banda select { cursor: auto; width: 100%; }
.griglia-banda__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
}
.griglia-banda__label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
}
.griglia-banda__hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.griglia-banda__times {
  display: grid;
  grid-template-columns: repeat(2, minmax(7rem, 1fr));
  gap: var(--sp-2);
}
.griglia-banda__quick {
  grid-template-columns: minmax(0, 1fr);
}
.griglia-banda__details {
  display: grid;
  grid-template-columns: minmax(4.5rem, 0.7fr) minmax(7rem, 1.4fr) minmax(4.5rem, 0.7fr);
  gap: var(--sp-2);
}
.griglia-banda__pausa,
.griglia-banda__fabbisogno,
.griglia-banda__ruolo { min-width: 0; }
.griglia-banda__salva {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.griglia-banda__salva input { width: auto; }
@media (max-width: 639px) {
  .griglia-corner,
  .griglia-row-head { min-width: 14rem; }
  .griglia-banda {
    min-width: 13rem;
  }
  .griglia-banda__times,
  .griglia-banda__details {
    grid-template-columns: 1fr;
  }
}

/* One checkbox cell per day. */
.griglia-cell {
  text-align: center;
  vertical-align: middle;
}
.griglia-cell__label {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  padding: var(--sp-1);
}
.griglia-cell__label input[type="checkbox"] {
  width: 1.2rem;
  height: 1.2rem;
}
/* Touch-target floor for coarse pointers. */
@media (pointer: coarse) {
  .griglia-cell__label { min-height: 2.75rem; min-width: 2.75rem; justify-content: center; }
}
.griglia-cell--presente {
  background: var(--st-ok-bg);
}
.griglia-cell__hint {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--st-ok);
}