/* ==========================================================================
   RARITEX — palinsesto.css
   Vestito del palinsesto delle dirette (Fase 16): la settimana tipo, le
   eccezioni per singola data e il riquadro delle prenotazioni rimaste orfane,
   dentro la vista «Live & Prenotazioni».

   Solo classi NUOVE, tutte prefissate .pal-* : niente qui dentro ridefinisce
   una classe di admin.css (che non si tocca, 1649 righe di punto di
   collisione noto). Dove serve ritoccare un pezzo di admin.css lo si fa SEMPRE
   dentro il perimetro del palinsesto (.pal-giorno .adm-select, .pal-ecc
   .adm-input), mai in globale. Colori, ombre e caratteri escono dai token di
   base.css e dalle spie di stato di .admin-body (--st-ok, --st-warn,
   --st-bad, --font-mono).

   L'idea del vestito: questa pagina decide quando il negozio va in onda, e
   l'occhio deve trovare tre cose senza leggere —
     1. quali giorni sono ACCESI (i giorni spenti sono grigi e sbiaditi, e i
        loro campi sono disabilitati: non c'è modo di sbagliarsi);
     2. che cosa NON È ANCORA SALVATO (la spia «● modifiche non ancora
        salvate» accanto al pulsante di salvataggio);
     3. che qualcuno è rimasto SENZA DIRETTA (il riquadro arancione, che
        esiste solo quando c'è un problema vero da guardare).
   ========================================================================== */

/* ==========================================================================
   1. TESTI DI SERVIZIO — introduzioni, note, avvisi
   ========================================================================== */
.pal-intro {
  font-size: 0.84rem;
  color: var(--text-muted);
  margin: 0 0 14px;
  max-width: 78ch;
  line-height: 1.55;
}
.pal-intro b { color: var(--text); font-weight: 600; }

.pal-nota {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin: 12px 0 0;
}
.pal-nota b { color: var(--text); }

/* la striscia «stai usando il palinsesto di fabbrica»: informativa, non un
   allarme — il palinsesto di fabbrica è uno stato legittimo, non un guasto */
.pal-banner {
  display: block;
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border-strong);
  background: color-mix(in srgb, var(--brand-teal) 7%, transparent);
  color: var(--text-muted);
}
.pal-banner b { color: var(--text); font-weight: 600; }

/* il rosso: qualcosa non va e il salvataggio si è fermato prima di partire */
.pal-avviso {
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--st-bad) 45%, transparent);
  background: color-mix(in srgb, var(--st-bad) 12%, transparent);
  color: var(--st-bad);
  font-weight: 600;
}

/* ==========================================================================
   2. LA SETTIMANA TIPO — sette righe, una per giorno
   ==========================================================================
   Ogni riga è una griglia a due colonne: a sinistra l'interruttore col nome
   del giorno (larghezza fissa, così i sette nomi restano incolonnati), a
   destra i campi. Sotto, in piccolo, la riga che racconta a parole quello che
   i campi dicono in numeri: «Il martedì dalle 21:00 alle 23:00 — 6 slot da 20
   minuti per i clienti». È lì che il titolare si accorge di aver sbagliato. */

.pal-giorni {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pal-giorno {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 8px 18px;
  align-items: start;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  transition: border-color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}
.pal-giorno:hover { border-color: var(--border-strong); }

/* giorno spento: grigio e in disparte, ma leggibile — deve restare chiaro
   che quel giorno ESISTE e si può riaccendere, non che è sparito */
.pal-giorno.is-off {
  background: transparent;
  border-style: dashed;
  opacity: 0.62;
}
.pal-giorno.is-off:hover { opacity: 0.85; }

.pal-giorno-testa {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.pal-giorno-nome {
  display: flex;
  flex-direction: column;
  gap: 1px;
  cursor: pointer;
  min-width: 0;
}
.pal-giorno-nome b {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: -0.01em;
}
.pal-giorno-nome span {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pal-giorno:not(.is-off) .pal-giorno-nome span { color: var(--accent-2); }

/* I campi: orari e durata stretti, il titolo prende tutto quello che resta.
   FLEX e non grid, con min-width:0 su ogni campo: fra i 900 e i 1100 px la
   colonna dei campi si stringe parecchio (c'è il rack della Regia a sinistra)
   e una griglia a colonne fisse uscirebbe dalla card. Così invece il titolo
   va a capo da solo e non esce niente. */
.pal-campi {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  min-width: 0;
}
.pal-campi > .adm-field { min-width: 0; }
.pal-campi .pal-ora { flex: 0 1 104px; }
.pal-campi .pal-min { flex: 0 1 132px; }
.pal-campi .pal-tit { flex: 1 1 200px; }
.pal-campi label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pal-giorno .adm-select,
.pal-giorno .adm-input {
  font-size: 0.85rem;
  padding: 8px 10px;
}
.pal-giorno .adm-select:disabled,
.pal-giorno .adm-input:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* la riga che racconta a parole quello che dicono i campi */
.pal-giorno-eco {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.45;
}
.pal-giorno-eco b { color: var(--text); font-weight: 600; }
.pal-eco-guaio { color: var(--st-bad); font-weight: 600; }

/* ==========================================================================
   3. LE ECCEZIONI — una scheda per data
   ========================================================================== */
.pal-ecc-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pal-ecc {
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* «salta questa data» è la modalità che TOGLIE una serata: si vede da lontano */
.pal-ecc.is-salta {
  border-color: color-mix(in srgb, var(--st-bad) 35%, var(--border));
  background: color-mix(in srgb, var(--st-bad) 6%, var(--surface-2));
}

/* stessa scelta della settimana: flex e non grid, così la riga si smonta da
   sola quando la card si stringe invece di sfondarla */
.pal-ecc-testa {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
}
.pal-ecc-testa > .adm-field { min-width: 0; }
.pal-ecc-testa .pal-ecc-data { flex: 0 1 190px; }
.pal-ecc-testa .pal-ecc-modo { flex: 1 1 260px; }

.pal-ecc label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pal-ecc .adm-input,
.pal-ecc .adm-select { font-size: 0.85rem; padding: 8px 10px; }
.pal-ecc .hint { font-size: 0.68rem; }

.pal-ecc-x { align-self: end; white-space: nowrap; }
.pal-ecc-x:hover { border-color: var(--st-bad); color: var(--st-bad); }

.pal-ecc-corpo {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border);
  background: color-mix(in srgb, var(--brand-purple) 5%, transparent);
}

.pal-check {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.82rem;
  color: var(--text);
  cursor: pointer;
  /* qui l'etichetta è una frase, non un'intestazione di campo: niente
     maiuscoletto mono, si legge come si legge una casella da spuntare */
  font-family: var(--font-body);
  letter-spacing: normal;
  text-transform: none;
}
.pal-check input { width: 16px; height: 16px; accent-color: var(--brand-purple); cursor: pointer; }

.pal-ecc-ore { display: flex; flex-wrap: wrap; gap: 12px; }
.pal-ecc-ore .pal-ora { flex: 0 1 104px; min-width: 0; }

.pal-ecc-eco {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-muted);
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.pal-ecc-eco b { color: var(--text); font-weight: 600; text-transform: capitalize; }

/* le date saltate, sotto le prossime dirette: non sono serate, quindi non
   possono stare nell'elenco, ma vanno ricordate */
.pal-saltate {
  list-style: none;
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px dashed var(--border);
  font-size: 0.76rem;
  color: var(--text-muted);
}
.pal-saltate li { margin-bottom: 4px; }
.pal-saltate li::before { content: "✕ "; color: var(--st-bad); font-weight: 700; }
.pal-saltate b { color: var(--text); font-weight: 600; text-transform: capitalize; }
.pal-saltate span { opacity: 0.8; }

.pal-ep-ecc { display: block; color: var(--st-warn) !important; }

/* ==========================================================================
   4. LA RIGA DEI PULSANTI, con la spia «non ancora salvato»
   ========================================================================== */
.pal-azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}
/* la spia si prende lo spazio in mezzo: i pulsanti restano a destra */
.pal-stato {
  flex: 1 1 auto;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.75;
}
.pal-stato.is-sporco {
  color: var(--st-warn);
  opacity: 1;
  font-weight: 700;
}

/* ==========================================================================
   5. PRENOTAZIONI RIMASTE ORFANE — il riquadro che non dovrebbe esistere
   ==========================================================================
   Compare solo quando c'è davvero qualcuno rimasto senza diretta. Arancione,
   non rosso: non è un errore del sistema, è una conseguenza di una scelta del
   titolare, e va guardata con calma. Nessuna di queste prenotazioni è stata
   cancellata — è una promessa del backend — e da qui non si cancella nulla. */

.pal-orfane-testa {
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--st-warn) 40%, transparent);
  background: color-mix(in srgb, var(--st-warn) 10%, transparent);
}
.pal-orfane-testa b { color: var(--text); font-weight: 700; }

.pal-orfane-lista { display: flex; flex-direction: column; }

.pal-orfana {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 2px;
}
.pal-orfana + .pal-orfana { border-top: 1px dashed var(--border); }
.pal-orfana > div { min-width: 0; flex: 1 1 auto; }
.pal-orfana .book-name { font-weight: 600; font-size: 0.88rem; }
.pal-orfana .book-when {
  color: var(--text-muted);
  font-size: 0.74rem;
  line-height: 1.4;
}
.pal-orfana .chip-status { flex: 0 0 auto; }

/* la stessa prenotazione, giù nell'elenco «Prenotazioni Rip & Ship»: una
   striscia arancione a sinistra basta a ritrovarla senza cercarla */
.pal-book-orfana {
  border-left: 3px solid var(--st-warn);
  padding-left: 11px;
  background: color-mix(in srgb, var(--st-warn) 6%, transparent);
}

/* ==========================================================================
   6. IL MODALE DEL PRESIDIO — l'avviso prima di salvare
   ==========================================================================
   È il punto in cui il titolare decide se lasciare a piedi dei clienti veri.
   Deve leggersi in due secondi: frasi corte, l'elenco delle date in evidenza,
   e il dubbio dichiarato quando il controllo sul backend non è riuscito. */

.pal-modale-testo {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 6px 0 12px;
}
.pal-modale-testo b { color: var(--text); font-weight: 600; }

.pal-modale-orfane {
  list-style: none;
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--st-warn) 40%, transparent);
  background: color-mix(in srgb, var(--st-warn) 10%, transparent);
  font-size: 0.82rem;
  max-height: 240px;
  overflow-y: auto;
}
.pal-modale-orfane li { line-height: 1.45; }
.pal-modale-orfane li + li {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed color-mix(in srgb, var(--st-warn) 30%, transparent);
}
.pal-modale-orfane b { text-transform: capitalize; }
.pal-modale-orfane span {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.pal-modale-resto { font-size: 0.78rem; color: var(--text-muted); margin: -6px 0 12px; }

.pal-modale-dubbio {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--st-bad);
  margin: 0 0 12px;
}

/* ==========================================================================
   7. SCHERMI STRETTI — la Regia si apre anche dal telefono, in studio
   ========================================================================== */
@media (max-width: 900px) {
  /* il nome del giorno smette di essere una colonna e passa sopra i campi */
  .pal-giorno { grid-template-columns: minmax(0, 1fr); }
  .pal-ecc-x { margin-left: auto; }
}

@media (max-width: 560px) {
  .pal-campi .pal-ora,
  .pal-campi .pal-min,
  .pal-campi .pal-tit { flex: 1 1 100%; }
  .pal-ecc-testa .pal-ecc-data,
  .pal-ecc-testa .pal-ecc-modo { flex: 1 1 100%; }
  .pal-azioni .btn { flex: 1 1 100%; }
  .pal-stato { flex: 1 1 100%; }
}