/* SHARPER 2026 — la pagina Prenotazioni.
   Due domande, in quest'ordine: quanto è pieno, e chi c'è dentro. In cima i numeri e
   le barre dei turni, che si leggono in un colpo d'occhio; sotto l'elenco, che si
   legge riga per riga solo quando serve cercare qualcuno. */

.riga-strumenti {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1rem;
}
.riga-strumenti input {
  flex: 1 1 16rem;
  max-width: 24rem;
  padding: .6rem .8rem;
  border: 1px solid var(--bordo);
  border-radius: calc(var(--r) - 3px);
  background: var(--superficie);
  color: var(--inchiostro);
  font: inherit;
}

/* ── i turni ─────────────────────────────────────────────────────────────────── */

.turni { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.turni li {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr) 8rem auto;
  align-items: center;
  gap: .5rem .9rem;
  padding: .55rem .8rem;
  border: 1px solid var(--bordo);
  border-radius: calc(var(--r) - 3px);
  background: var(--superficie);
}
.turni li[data-pieno="si"] { border-color: color-mix(in srgb, var(--area-medicina) 55%, var(--bordo)); }

.turno-quando { font-family: var(--dato); color: var(--ancona); }
.turno-titolo { overflow-wrap: anywhere; }
.turno-conta { font-family: var(--dato); font-size: .8rem; color: var(--inchiostro-3); white-space: nowrap; }

/* La barra non è un grafico: è la stessa informazione del numero accanto, messa in
   modo che si veda da lontano quale turno sta per chiudersi. */
.barra {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--superficie-2);
  border: 1px solid var(--bordo);
  overflow: hidden;
}
.barra span {
  display: block;
  height: 100%;
  background: var(--ancona);
  transition: width 220ms;
}
.turni li[data-pieno="si"] .barra span { background: var(--area-medicina); }

@media (max-width: 640px) {
  .turni li { grid-template-columns: 3.4rem minmax(0, 1fr); }
  .turni li .barra { grid-column: 1 / -1; }
  .turno-conta { grid-column: 2; justify-self: end; grid-row: 1; }
}

/* ── l'elenco delle prenotazioni ─────────────────────────────────────────────── */

.prenotazioni { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.prenotazioni li {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) auto auto auto;
  align-items: center;
  gap: .4rem .9rem;
  padding: .6rem .85rem;
  border: 1px solid var(--bordo);
  border-left: 3px solid var(--ancona);
  border-radius: calc(var(--r) - 3px);
  background: var(--superficie);
}
.prenotazioni li[data-stato="annullata"] { border-left-color: var(--bordo); opacity: .6; }

.pren-chi { display: grid; gap: .1rem; min-width: 0; }
.pren-email { color: var(--inchiostro-3); font-size: .82rem; overflow-wrap: anywhere; }
.pren-email:hover { color: var(--ancona); }
.pren-quando { color: var(--inchiostro-2); font-size: .9rem; overflow-wrap: anywhere; }
.pren-quanti { font-family: var(--dato); font-size: .82rem; color: var(--inchiostro-2); white-space: nowrap; }
.pren-stato { font-size: .8rem; color: var(--inchiostro-3); white-space: nowrap; }

@media (max-width: 760px) {
  .prenotazioni li { grid-template-columns: minmax(0, 1fr) auto; }
  .pren-quando, .pren-stato { grid-column: 1 / -1; }
  .prenotazioni li button { grid-column: 2; grid-row: 1; }
}