/* ============================================================
   StationInCloud — foglio di stile
   ------------------------------------------------------------
   Stessa lingua visiva di Station In Box (sib-web.css): fondo
   blu-grigio, pannelli con angolo a 14px, accento azzurro,
   carattere di sistema. I token sotto sono gli stessi, cosi le
   due interfacce restano riconoscibili come una famiglia.

   Il rosso resta riservato allo stato di trasmissione e di
   registrazione: e informazione, non decorazione.
   ============================================================ */

:root {
  /* Token condivisi con Station In Box */
  --bg:     #0e1116;
  --panel:  #171c24;
  --border: #2a3240;
  --fg:     #e8ecf2;
  --dim:    #8b96a5;
  --accent: #3fa9f5;
  --ok:     #35c46a;
  --err:    #e05555;

  /* Aggiunte proprie della regia */
  --warn:      #e8b33f;
  --panel-in:  #0b0e13;   /* incassi: come lo sfondo dei campi SIB */
  --accent-in: #06121d;   /* testo sui pulsanti accento */
  --r-grande:  14px;
  --r-piccolo: 8px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, sans-serif;
  min-height: 100vh;
  font-size: 14px;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ===================== Testi ===================== */
.sic-legenda {
  display: block;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--dim);
}
.sic-aiuto { font-size: .8rem; color: var(--dim); line-height: 1.4; }
.dim { color: var(--dim); }
.ok  { color: var(--ok); }
.err { color: var(--err); }

.sic-marchio { text-align: center; }
.sic-marchio__nome { font-size: 1.4rem; font-weight: 600; letter-spacing: .03em; }
.sic-marchio__nome span { color: var(--accent); }
.sic-marchio__sub { display: block; margin-top: 2px; font-size: .82rem; color: var(--dim); }

/* ===================== Comandi ===================== */
.sic-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px;
  border: 0; border-radius: var(--r-piccolo);
  background: var(--accent); color: var(--accent-in);
  font: inherit; font-weight: 600; font-size: .95rem;
  cursor: pointer; text-decoration: none;
}
.sic-btn:hover { filter: brightness(1.1); }
.sic-btn--primario { background: var(--accent); }
.sic-btn--mini {
  padding: 6px 10px; font-size: .9rem;
  background: transparent; border: 1px solid var(--border); color: var(--fg);
}
.sic-btn--mini:hover { border-color: var(--accent); filter: none; }

.sic-messaggio { margin-top: 12px; font-size: .9rem; min-height: 1.2em; }
.sic-messaggio--errore { color: var(--err); }
.sic-messaggio--avviso { color: var(--warn); }

.sic-avviso {
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--warn);
  border-radius: var(--r-piccolo);
  background: rgba(232,179,63,.08);
  font-size: .85rem; color: var(--warn);
}

input[type=text], input[type=password], input[type=search], select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--r-piccolo);
  background: var(--panel-in); color: var(--fg);
  font: inherit; font-size: 1rem;
}
input:focus, select:focus { outline: none; border-color: var(--accent); }
input::placeholder { color: var(--dim); }

/* ===================== Accesso e schede ===================== */
.sic-centrata {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 42px 16px;
}
.sic-accesso { width: min(360px, 92vw); }
.sic-accesso--larga { width: min(460px, 92vw); }

.sic-piastra,
.panel {
  margin-top: 22px;
  padding: 24px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-grande);
}

.sic-codice {
  margin-top: 6px;
  font-size: 1.7rem; font-weight: 700;
  text-align: center; text-transform: uppercase;
  letter-spacing: .24em; text-indent: .24em;
}
.sic-codice--piccolo { font-size: 1.05rem; letter-spacing: .14em; text-indent: .14em; }

.sic-campo { margin-bottom: 16px; }
.sic-campo .sic-select { margin-top: 6px; }
.sic-nota { margin-top: 18px; text-align: center; font-size: .82rem; color: var(--dim); }
.sic-nota--sinistra { text-align: left; margin: 0 0 16px; }

/* ===================== Barra ===================== */
.sic-app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

.sic-barra {
  display: flex; align-items: center; gap: 18px;
  padding: 12px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sic-marchio--barra { text-align: left; }
.sic-marchio--barra .sic-marchio__nome { font-size: 1.05rem; }
.sic-barra__destra { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.sic-stato {
  padding: 6px 10px;
  border: 1px solid var(--border); border-radius: var(--r-piccolo);
  background: var(--panel-in);
  font-size: .8rem; color: var(--dim);
}
.sic-stato[data-stato="ok"]     { border-color: var(--ok);   color: var(--ok); }
.sic-stato[data-stato="errore"] { border-color: var(--err);  color: var(--err); }
.sic-stato[data-stato="attesa"] { border-color: var(--warn); color: var(--warn); }
.sic-stato--quieto { color: var(--dim); }

/* Spia di trasmissione: l'unico elemento a cui e concesso gridare. */
.sic-spia {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 16px;
  border: 1px solid var(--border); border-radius: var(--r-piccolo);
  background: var(--panel-in);
  font-size: .85rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim);
  transition: color .18s, background .18s, border-color .18s, box-shadow .18s;
}
.sic-spia__led {
  width: 8px; height: 8px; border-radius: 50%;
  background: #4a1f1c;
  transition: background .18s, box-shadow .18s;
}
body.in-onda .sic-spia {
  color: #fff; border-color: var(--err);
  background: var(--err);
  box-shadow: 0 0 18px rgba(224,85,85,.45);
}
body.in-onda .sic-spia__led { background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.9); }

/* ===================== Impianto della regia ===================== */
.sic-regia {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: minmax(230px, 310px) auto minmax(390px, 1fr) minmax(220px, 260px);
  gap: 14px;
  padding: 14px;
}

.sic-pannello {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-grande);
  padding: 16px;
  min-height: 0;
  display: flex; flex-direction: column;
}

.sic-pannello__testa {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.sic-cerca { flex: 1; min-width: 0; padding: 7px 10px; font-size: .85rem; }

/* ===================== Libreria ===================== */
.sic-tracce { flex: 1; min-height: 0; overflow-y: auto; list-style: none; }
.sic-tracce__vuoto { padding: 28px 0; text-align: center; font-size: .85rem; color: var(--dim); }

.sic-traccia {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "nome durata" "etich carica";
  gap: 2px 8px; align-items: center;
  padding: 8px 10px; margin-bottom: 6px;
  background: var(--panel-in);
  border: 1px solid var(--border);
  border-radius: var(--r-piccolo);
  cursor: grab;
  transition: border-color .15s;
}
.sic-traccia:hover { border-color: var(--accent); }
.sic-traccia__nome      { grid-area: nome; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sic-traccia__durata    { grid-area: durata; font-size: .78rem; color: var(--dim); font-variant-numeric: tabular-nums; }
.sic-traccia__etichetta { grid-area: etich; font-size: .72rem; color: var(--accent); }
.sic-traccia__carica    { grid-area: carica; display: flex; gap: 3px; }

.sic-quota { margin-top: 12px; }
.sic-quota__barra {
  height: 6px; border-radius: 3px; overflow: hidden;
  background: var(--panel-in); border: 1px solid var(--border);
  margin-bottom: 4px;
}
.sic-quota__barra > div { height: 100%; background: var(--accent); transition: width .3s; }
.sic-quota__barra > div.sic-quota--pieno { background: var(--err); }

/* Righe di caricamento, come in Station In Box: una barra per file. */
.up-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: .82rem; }
.up-row .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-row progress { width: 110px; height: 10px; }
#esitiCaricamento { max-height: 24vh; overflow-y: auto; }

/* ===================== Colonna etichette =====================
   Centrata verticalmente sulla libreria: accompagna l'elenco,
   non lo intesta. */
.sic-etichette {
  display: flex; flex-direction: column;
  align-items: stretch; justify-content: center;
  gap: 6px; width: 92px;
}
.sic-etichette__linea { height: 1px; background: var(--border); margin: 6px 0; }
.sic-etichette__elenco { display: flex; flex-direction: column; gap: 5px; max-height: 44vh; overflow-y: auto; }

/* ===================== Tasti ===================== */
.sic-tasto {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 10px;
  border: 1px solid var(--border); border-radius: var(--r-piccolo);
  background: transparent; color: var(--fg);
  font: inherit; font-size: .8rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}
.sic-tasto:hover { border-color: var(--accent); }
.sic-tasto--azione { flex-direction: column; gap: 3px; font-size: .72rem; padding: 9px 0; }
.sic-tasto--azione i { font-size: 1.1rem; color: var(--accent); }
.sic-tasto--quieto { color: var(--dim); }
.sic-tasto--mini { padding: 2px 7px; font-size: .72rem; min-width: 22px; }
.sic-tasto--pericolo { color: var(--err); }
.sic-tasto--pericolo:hover { border-color: var(--err); }
.sic-tasto--etichetta { font-size: .74rem; overflow: hidden; text-overflow: ellipsis; display: block; }
.sic-tasto--etichetta.acceso { border-color: var(--accent); color: var(--accent); background: rgba(63,169,245,.1); }

/* ===================== Mixer ===================== */
/* flex-start e non stretch: con lo stretch il canale microfono si
   allunga per tutta l altezza del pannello e VU e fader diventano
   due colonne alte mezzo schermo. */
.sic-mixer { flex-direction: row; align-items: flex-start; gap: 14px; }

.sic-canale {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  height: 300px;
  padding: 12px 10px;
  background: var(--panel-in);
  border: 1px solid var(--border);
  border-radius: var(--r-piccolo);
  flex-shrink: 0;
}

.sic-vu {
  position: relative; width: 10px; flex: 1; min-height: 90px;
  background: var(--bg);
  border: 1px solid var(--border); border-radius: 4px;
  overflow: hidden;
  display: flex; align-items: flex-end;
}
.sic-vu__barra {
  width: 100%; height: 0;
  background: linear-gradient(0deg, var(--ok) 0%, var(--ok) 62%, var(--warn) 84%, var(--err) 100%);
  transition: height .05s linear;
}
.sic-vu__barra.sic-vu--alto { background: var(--err); }

.sic-fader {
  writing-mode: vertical-lr; direction: rtl;
  width: 22px; flex: 1; min-height: 90px;
  accent-color: var(--accent);
}

.sic-tasto--muto { width: 100%; font-size: .72rem; letter-spacing: .08em; color: var(--err); border-color: var(--err); }
.sic-tasto--muto.aperto { color: var(--accent-in); background: var(--ok); border-color: var(--ok); }

/* ===================== Player ===================== */
.sic-players { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.sic-player {
  display: flex; flex-direction: column; gap: 7px;
  padding: 12px;
  background: var(--panel-in);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--r-piccolo);
  transition: border-left-color .2s, background .2s;
}
.sic-player--carico { border-left-color: var(--dim); }
.sic-player--suona  { border-left-color: var(--ok); }
.sic-player--attesa { border-left-color: var(--accent); background: rgba(63,169,245,.08); }

.sic-player__testa { display: flex; align-items: center; gap: 9px; }
.sic-player__num {
  width: 20px; height: 20px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 5px;
  font-size: .72rem; color: var(--dim);
}
.sic-player__titolo { flex: 1; min-width: 0; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sic-player__tempo { display: flex; align-items: center; gap: 9px; }
.sic-player__ora { font-size: .78rem; color: var(--dim); font-variant-numeric: tabular-nums; min-width: 40px; }
.sic-player__ora--resta { text-align: right; }
.sic-posizione { flex: 1; min-width: 0; accent-color: var(--accent); }

.sic-player__comandi { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.sic-tasto--play, .sic-tasto--stop { width: 34px; height: 28px; font-size: 1rem; }
.sic-tasto--play:hover { color: var(--accent); }
.sic-tasto--pfl { min-width: 38px; }
.sic-tasto--pfl.acceso { border-color: var(--accent); color: var(--accent); background: rgba(63,169,245,.12); }

.sic-manopola { display: flex; align-items: center; gap: 6px; }
.sic-mini { width: 72px; accent-color: var(--accent); }
.sic-manopola__valore { font-size: .72rem; color: var(--dim); min-width: 34px; font-variant-numeric: tabular-nums; }

/* ===================== Registratore ===================== */
.sic-registratore { gap: 10px; }

.sic-bobine { padding: 4px 0; }
.sic-bobine__svg { width: 100%; height: auto; display: block; }
.sic-bobina__corpo { fill: var(--panel-in); stroke: var(--border); stroke-width: 2; }
.sic-bobina__perno { fill: var(--dim); }
.sic-bobina__raggi { fill: var(--border); transform-box: fill-box; transform-origin: center; }
.sic-nastro { stroke: var(--dim); stroke-width: 2; fill: none; opacity: .45; }

/* Le bobine girano solo mentre si registra: il movimento dice che
   il nastro scorre, non decora la scatola. */
body.in-registrazione .sic-bobina__corpo { stroke: var(--err); }
body.in-registrazione .sic-bobina--sx .sic-bobina__raggi { animation: sic-gira 1.6s linear infinite; fill: var(--dim); }
body.in-registrazione .sic-bobina--dx .sic-bobina__raggi { animation: sic-gira 2.4s linear infinite; fill: var(--dim); }
@keyframes sic-gira { to { transform: rotate(360deg); } }

.sic-registratore__stato { display: flex; align-items: center; gap: 10px; justify-content: center; }
.sic-led { width: 10px; height: 10px; border-radius: 50%; background: #4a1f1c; }
body.in-registrazione .sic-led {
  background: var(--err);
  box-shadow: 0 0 10px rgba(224,85,85,.9);
  animation: sic-lampeggia 1.1s steps(1, end) infinite;
}
@keyframes sic-lampeggia { 0%,55% { opacity: 1; } 56%,100% { opacity: .2; } }

.sic-cronometro { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .04em; }

.sic-tasto--rec { padding: 10px; color: var(--err); border-color: var(--err); font-size: .85rem; }
body.in-registrazione .sic-tasto--rec { background: var(--err); color: #fff; }

.sic-onair {
  padding: 20px 0;
  border: 2px solid var(--border);
  border-radius: var(--r-grande);
  background: var(--panel-in);
  color: var(--dim);
  font: inherit; font-size: 1.1rem; font-weight: 800; letter-spacing: .16em;
  cursor: pointer; transition: all .18s;
}
.sic-onair:hover { border-color: var(--err); }
.sic-onair.acceso {
  border-color: var(--err); background: var(--err); color: #fff;
  box-shadow: 0 0 24px rgba(224,85,85,.45);
}

.sic-registratore__elenco { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: 8px; }
.sic-rec-elenco { flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin-top: 6px; }
.sic-rec {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 9px; margin-bottom: 4px;
  background: var(--panel-in); border: 1px solid var(--border);
  border-radius: var(--r-piccolo); font-size: .78rem;
}
.sic-rec__nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sic-rec__peso { color: var(--dim); font-size: .72rem; }

/* ===================== Postazione radio ===================== */
.sic-radio {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: minmax(340px, 1fr) minmax(220px, 260px);
  gap: 14px; padding: 14px; align-content: start;
}
.sic-radio__centro { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; }
.sic-radio__vu { display: flex; gap: 14px; height: 140px; }
.sic-radio__onair {
  width: 230px; height: 230px;
  border: 3px solid var(--border);
  border-radius: var(--r-grande);
  background: var(--panel-in);
  color: var(--dim);
  font: inherit; font-size: 1.7rem; font-weight: 800; letter-spacing: .12em;
  cursor: pointer; transition: all .2s;
}
.sic-radio__onair:hover { border-color: var(--err); }
.sic-radio__onair.acceso {
  border-color: var(--err); background: var(--err); color: #fff;
  box-shadow: 0 0 46px rgba(224,85,85,.5);
}

/* ===================== Adattamento ===================== */
@media (max-width: 1320px) {
  .sic-regia { grid-template-columns: minmax(210px, 270px) auto 1fr; }
  .sic-registratore { grid-column: 1 / -1; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 14px; }
  .sic-registratore .sic-bobine { width: 170px; }
  .sic-registratore__elenco { flex: 1 1 240px; margin-top: 0; }
  .sic-onair { flex: 1 1 170px; }
}
@media (max-width: 960px) {
  .sic-app { height: auto; overflow: visible; }
  .sic-regia, .sic-radio { grid-template-columns: 1fr; }
  .sic-etichette { flex-direction: row; flex-wrap: wrap; width: auto; justify-content: flex-start; }
  .sic-etichette__elenco { flex-direction: row; flex-wrap: wrap; max-height: none; }
  .sic-etichette__linea { display: none; }
  .sic-mixer { flex-direction: column; }
  .sic-canale { flex-direction: row; align-items: center; }
  .sic-vu { width: auto; height: 12px; flex: 1; min-height: 0; align-items: stretch; }
  .sic-fader { writing-mode: horizontal-tb; direction: ltr; width: auto; flex: 1; min-height: 0; }
  .sic-tasto--muto { width: auto; min-width: 74px; }
}