/* status-corrieri.css — foglio riservato a una corsia di lavoro.
   Nasce vuoto apposta: serve a NON far scrivere tre corsie in coda a
   components.css (6763 righe, un solo file) nello stesso punto.
   Chi lavora su questa corsia scrive QUI e non tocca components.css,
   salvo per modificare regole gia' esistenti. */

/* ── Status Corrieri ──────────────────────────────────────────────────────
   Il tasto in topbar e la finestra del bollettino giornaliero.

   I quattro livelli hanno un colore solo, definito qui una volta:
     critico -> --danger    alto -> --accent3
     medio   -> --accent2   basso -> --muted
   Tutto il resto (pillole, pallini, bordi delle schede) li riusa via
   color-mix, cosi' un tema che cambia la palette non lascia indietro
   meta' della finestra. */

.sc-critico { --sc-c: var(--danger); }
.sc-alto    { --sc-c: var(--accent3); }
.sc-medio   { --sc-c: var(--accent2); }
.sc-basso   { --sc-c: var(--muted); }

/* ── Il tasto in topbar ─────────────────────────────────────────────── */
/* Sta dentro .logo-badge, subito dopo il badge di versione. Nasce con
   l'attributo `hidden`: si accende solo quando un bollettino esiste
   davvero. */
.sc-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.5rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--sc-c, var(--muted)) 55%, transparent);
  background: color-mix(in srgb, var(--sc-c, var(--muted)) 14%, var(--surface));
  color: var(--text);
  font-size: var(--fs-xs);
  line-height: 1.6;
  cursor: pointer;
  white-space: nowrap;
}
.sc-badge:hover {
  background: color-mix(in srgb, var(--sc-c, var(--muted)) 26%, var(--surface));
}
.sc-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sc-c, var(--muted));
  flex: none;
}
/* Solo il livello piu' grave pulsa. Se pulsasse anche `alto` il movimento
   diventerebbe il fondale della topbar e smetterebbe di voler dire
   "guardami". */
.sc-badge.sc-critico .sc-badge-dot {
  animation: sc-pulse 1.8s ease-in-out infinite;
}
@keyframes sc-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-badge.sc-critico .sc-badge-dot { animation: none; }
}

/* Su mobile la topbar e' stretta: resta il pallino, sparisce la parola. */
@media (max-width: 768px) {
  .sc-badge-text { display: none; }
  .sc-badge { padding: 0.25rem; }
}

/* ── La finestra ────────────────────────────────────────────────────── */
.modal-dialog.sc-dialog {
  width: min(760px, 94vw);
  display: flex;
  flex-direction: column;
  max-height: 86vh;
}

/* Le schede dei giorni: 7 a video, il resto resta su Supabase. Scorrono in
   orizzontale invece di andare a capo, cosi' l'altezza della testata non
   cambia da un giorno all'altro. */
.sc-giorni {
  display: flex;
  gap: 0.35rem;
  padding: 0.5rem var(--pad-lg);
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  flex: none;
}
.sc-giorno-tab {
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  border-bottom: 2px solid var(--sc-c, var(--muted));
  background: var(--surface);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-family: var(--mono);
  cursor: pointer;
  white-space: nowrap;
}
.sc-giorno-tab.attivo {
  background: var(--surface2);
  color: var(--text);
}
.sc-bordo-critico { --sc-c: var(--danger); }
.sc-bordo-alto    { --sc-c: var(--accent3); }
.sc-bordo-medio   { --sc-c: var(--accent2); }
.sc-bordo-basso   { --sc-c: var(--muted); }

.sc-corpo {
  padding: var(--pad-md) var(--pad-lg);
  overflow-y: auto;
  flex: 1 1 auto;
}

/* ── Le fonti cadute ─────────────────────────────────────────────────── */
/* In cima, prima dei corrieri: una fonte non letta cambia come si legge
   tutto il resto del bollettino, e va saputo prima, non dopo. */
.sc-errori {
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  border-radius: var(--radius);
  padding: 0.6rem 0.8rem;
  margin-bottom: var(--pad-md);
  font-size: var(--fs-sm);
}
.sc-errori ul { margin: 0.3rem 0 0; padding-left: 1.1rem; }

/* ── Il blocco di un corriere ────────────────────────────────────────── */
.sc-corriere { margin-bottom: var(--pad-md); }
.sc-corriere-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.5rem;
}
.sc-corriere-head h3 {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--text);
}
.sc-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sc-c, var(--muted));
  flex: none;
}
.sc-count {
  margin-left: auto;
  font-size: var(--fs-xs);
  font-family: var(--mono);
  color: var(--muted);
}

/* "Nessuna novita'" e "fonte non raggiungibile" non sono la stessa cosa e
   non devono somigliarsi: la prima e' una buona notizia, la seconda e' un
   buco nel bollettino. */
.sc-vuoto {
  font-size: var(--fs-sm);
  color: var(--muted);
  padding: 0.2rem 0 0.4rem;
}
.sc-vuoto-errore { color: var(--danger); }

/* ── La singola notizia ──────────────────────────────────────────────── */
.sc-news {
  padding: 0.5rem 0 0.6rem;
  border-bottom: 1px dashed var(--border);
}
.sc-news:last-of-type { border-bottom: none; }
.sc-news-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.25rem;
}
.sc-pill {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--sc-c, var(--muted)) 55%, transparent);
  background: color-mix(in srgb, var(--sc-c, var(--muted)) 16%, var(--surface));
  color: var(--text);
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.sc-cat {
  font-size: var(--fs-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sc-news-title {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--text);
  display: block;
}
a.sc-news-title { text-decoration: none; }
a.sc-news-title:hover { color: var(--accent); text-decoration: underline; }
.sc-news-body {
  margin: 0.2rem 0 0;
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.45;
}
.sc-news-meta {
  margin-top: 0.25rem;
  font-size: var(--fs-xs);
  color: var(--muted);
  font-family: var(--mono);
}

/* ── Il piede ────────────────────────────────────────────────────────── */
.sc-piede {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.5rem var(--pad-lg);
  border-top: 1px solid var(--border);
  flex: none;
}
.sc-nascondi {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-sm);
  color: var(--muted);
  cursor: pointer;
}
.sc-generato {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--muted);
  font-family: var(--mono);
}

/* ── Il riepilogo nella tab Impostazioni ─────────────────────────────── */
.sc-riepilogo {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.6rem 0.8rem;
  margin: 0.6rem 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface2);
  font-size: var(--fs-sm);
}