/* ============================================================
   MagicStream — superficie di regia
   ------------------------------------------------------------
   Questo file sostituisce la stratificazione "Studio at Dusk"
   piu i 23 livelli di fix successivi. Regole guida:

   1. Il colore e informazione. Rosso, ambra e verde compaiono
      solo per dichiarare uno stato (in onda, moderato, attivo).
      Nessuna superficie e colorata per decorazione.
   2. Le superfici si distinguono per materia — incassi, smussi,
      bordi — non per bagliori o vetri smerigliati.
   3. Il movimento risponde a un cambiamento di stato. Niente
      animazioni d'ambiente, niente entrate a scorrimento.
   4. Un solo carattere tipografico. La larghezza variabile fa
      il lavoro che altrove richiederebbe famiglie diverse.

   Gli id e le classi su cui si appoggia il JS sono preservati:
   vedere l'inventario in fondo al file.
   ============================================================ */

/* ===================== Carattere ===================== */
/* Ospitato in locale: durante una diretta non deve dipendere
   dalla raggiungibilita di un CDN esterno. */
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 300 800;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
                 U+2C60-2C7F, U+A720-A7FF;
}

/* ===================== Token ===================== */
:root {
  /* Stessa lingua visiva di StationInCloud e di Station In Box:
     telaio blu-grigio, pannelli piu chiari, un solo accento freddo.
     I valori arrivano da li senza ritocchi, perche due prodotti che
     si usano nella stessa giornata devono somigliarsi davvero. */
  --chassis:    #0e1116;
  --panel:      #171c24;
  --panel-up:   #1e2530;
  --panel-in:   #0b0e13;
  --edge:       #2a3240;
  --edge-hi:    #3a4454;
  --edge-dark:  #070a0e;

  /* Serigrafia */
  --legend:       #e8ecf2;
  --legend-dim:   #8b96a5;
  --legend-faint: #5c6675;

  /* Accento: e la cosa che piu di tutte fa riconoscere i due
     prodotti come la stessa famiglia. */
  --accent:     #3fa9f5;
  --accent-in:  #06121d;

  /* Segnali — gli unici colori saturi della pagina */
  --live:      #e05555;
  --live-deep: #5a1f1f;
  --hold:      #e8b33f;
  --hold-deep: #5c4514;
  --ok:        #35c46a;
  --ok-deep:   #14502c;

  /* --- Palette dello strumento -------------------------------
     Metri, fader e pulsante TX restano quelli costruiti a mano,
     con le loro bitmap (sliderbg.png, cursor.png) e i loro colori
     originali. Sono tarati sull'immagine, non sui token qui
     sopra: cambiarli significherebbe disallineare la grafica dal
     disegno della scala. */
  --ms-vu-green:     #74b56a;
  --ms-vu-green-hi:  #9bd994;
  --ms-vu-yellow:    #e9c45c;
  --ms-vu-yellow-hi: #f5dc7c;
  --ms-vu-red:       #e5523f;
  --ms-vu-red-hi:    #f17a6a;
  --ms-rivet:        #cdb47a;
  --ms-mono:         var(--font);

  /* Carattere di sistema, come StationInCloud. Le targhette
     condensate usavano l'asse variabile di Archivo: le due misure
     qui sotto restano perche le regole le citano, ma su un carattere
     non variabile non fanno niente e nessuna etichetta ci contava
     per starci dentro. */
  --font: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Larghezze dell'asse variabile: le targhette strette usano il
     taglio condensato, come la serigrafia sulla ferramenta vera. */
  --w-narrow: 78;
  --w-normal: 100;

  --u: 4px;
  /* 8 per i comandi, 14 per i pannelli: le stesse due misure di
     StationInCloud (--r-piccolo e --r-grande). */
  --radius: 8px;
  --radius-grande: 14px;

}

/* ===================== Base ===================== */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body,
body.bg-dark {
  margin: 0;
  background: var(--chassis) !important;
  color: var(--legend);
  font-family: var(--font);
  font-size: 14px;
  font-variation-settings: "wdth" var(--w-normal);
  font-feature-settings: "tnum" 1;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Il telaio ha una sola texture: una velatura verticale appena
   percepibile, come la luce radente su un pannello opaco.
   Nessun gradiente radiale, nessuna grana, nessun riflettore. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.022), transparent 38%);
}
body > * { position: relative; z-index: 1; }

.hidden, .hideBtn { display: none !important; }

/* ===================== Accessibilita ===================== */
:focus-visible {
  outline: 2px solid var(--hold);
  outline-offset: 2px;
}
button:focus:not(:focus-visible) { outline: none; }

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

/* ===================== Targhette ===================== */
/* Un'unica classe per tutta la serigrafia: stretta, spaziata,
   piccola. */
.ms-legend,
.ms-topbar__status,
.ms-panel-tab,
.form-label {
  font-size: 10px;
  font-weight: 600;
  font-variation-settings: "wdth" var(--w-narrow);
  letter-spacing: 0.09em;
  color: var(--legend-faint);
}

/* ===================== Barra superiore ===================== */
.ms-topbar {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 6);
  height: 52px;
  padding: 0 calc(var(--u) * 5);
  background: var(--panel);
  border-bottom: 1px solid var(--edge-dark);
  box-shadow: inset 0 1px 0 var(--edge);
}

.ms-wordmark { display: flex; align-items: baseline; gap: calc(var(--u) * 2); }
.ms-wordmark__primary {
  font-size: 19px;
  font-weight: 700;
  font-variation-settings: "wdth" 88;
  letter-spacing: 0.02em;
  color: var(--legend);
}
/* Il marchio e uniforme: niente meta parola in corsivo, in peso
   diverso o di un altro colore. L'audacia e spesa tutta sulla spia
   di trasmissione, che e l'unica cosa che deve gridare. La
   struttura la reggono il filetto e la sottoscritta. */
.ms-wordmark__primary em { font-style: normal; font-weight: inherit; color: inherit; }
.ms-wordmark__divider {
  width: 1px; height: 15px;
  background: var(--edge);
  align-self: center;
}
.ms-wordmark__sub {
  font-size: 10px;
  font-weight: 500;
  font-variation-settings: "wdth" var(--w-narrow);
  letter-spacing: 0.11em;
  color: var(--legend-faint);
}

.ms-topbar__status {
  margin-left: auto;
  padding: calc(var(--u)) calc(var(--u) * 2.5);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--panel-in);
  color: var(--legend-dim);
}

/* --- La spia di trasmissione ---------------------------------
   E l'unico elemento a cui e concessa audacia: e la prima cosa
   che si guarda entrando in regia e l'ultima prima di parlare.
   Spenta e vetro morto; accesa non lascia dubbi. */
.ms-onair-sign {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 4);
  border: 1px solid var(--edge-dark);
  border-radius: var(--radius);
  background: var(--panel-in);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.55);
  font-size: 13px;
  font-weight: 700;
  font-variation-settings: "wdth" 82;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--legend-faint);
  transition: color 0.18s, background 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.ms-onair-sign::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--live-deep);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.6);
  transition: background 0.18s, box-shadow 0.18s;
}
body.is-onair .ms-onair-sign {
  color: #fff3f0;
  border-color: var(--live);
  background: linear-gradient(180deg, #b32b1c, #8d2013);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 0 16px rgba(232,68,46,0.4);
}
body.is-onair .ms-onair-sign::before {
  background: #ffd9d1;
  box-shadow: 0 0 7px rgba(255,255,255,0.9);
}

/* ===================== Schermata di connessione ===================== */
#connectionScreen { gap: calc(var(--u) * 8); }

.ms-hero-mark { text-align: center; }
.ms-hero-mark__pre {
  font-size: 10px;
  font-weight: 600;
  font-variation-settings: "wdth" var(--w-narrow);
  letter-spacing: 0.14em;
  color: var(--legend-faint);
  margin-bottom: calc(var(--u) * 2);
}
.ms-hero-mark__title {
  font-size: clamp(38px, 6vw, 62px);
  font-weight: 800;
  font-variation-settings: "wdth" 84;
  letter-spacing: -0.015em;
  line-height: 0.98;
  color: var(--legend);
  margin: 0;
}
.ms-hero-mark__title em { font-style: normal; font-weight: 300; color: var(--legend-dim); }
.ms-hero-mark__tag {
  margin-top: calc(var(--u) * 3);
  font-size: 14px;
  color: var(--legend-dim);
  max-width: 46ch;
  margin-inline: auto;
}

/* Il riquadro del codice: una piastrina incisa, non una card. */
#connectionScreen .card {
  background: var(--panel) !important;
  border: 1px solid var(--edge) !important;
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 var(--edge-hi), 0 12px 28px rgba(0,0,0,0.45);
  min-width: 320px;
}
#connectionScreen .card-body { padding: calc(var(--u) * 7); }
#connectionScreen .card h3 {
  font-size: 10px;
  font-weight: 600;
  font-variation-settings: "wdth" var(--w-narrow);
  letter-spacing: 0.12em;
  color: var(--legend-faint);
  margin-bottom: calc(var(--u) * 2);
}
#connectionScreen #userCode {
  font-size: 34px !important;
  font-weight: 700;
  font-variation-settings: "wdth" 92;
  letter-spacing: 0.16em;
  color: var(--legend) !important;
  padding: calc(var(--u) * 2) 0;
  border-top: 1px solid var(--edge-dark);
  border-bottom: 1px solid var(--edge-dark);
  background: var(--panel-in);
  border-radius: var(--radius);
}

/* ===================== Il banco ===================== */
/* #pcBar e un riquadro vuoto: nessuno ci scrive mai dentro, ma i suoi
   100px di min-height dichiarati nel markup stavano fra la barra
   superiore e il banco come un buco. Sul telefono era gia nascosto,
   sul desktop no. Resta nel DOM perche il JS lo cerca, ma non occupa
   piu spazio. Serve !important: il min-height e inline. */
#pcBar { min-height: 0 !important; height: 0; overflow: hidden; }

#mainScreen { padding: calc(var(--u) * 5) !important; }

#mainContainer {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 5);
  width: 100%;
  /* Un banco di regia non guadagna nulla ad allargarsi su uno
     schermo da 3440: oltre questa misura le colonne si allontanano
     e basta. Si ferma qui e resta centrato. */
  max-width: 1240px;
  margin-inline: auto;
}

/* Il contenitore porta ancora le classi row/col di Bootstrap: i loro
   gutter negativi qui non servono e sul telefono facevano sbordare il
   banco. Attenzione pero: azzerare i margini laterali azzerava anche
   il centraggio automatico, e su uno schermo largo (3440) tutto il
   banco restava incollato al bordo sinistro. Il margine orizzontale
   deve restare auto. */
#mainContainer.row {
  --bs-gutter-x: 0;
  margin-inline: auto;
}
/* Il markup porta anche .align-items-start, che con il suo !important
   impediva ai pannelli di distendersi: sul telefono la consolle
   restava stretta attorno allo strumento invece di occupare la
   larghezza, e sul desktop le tre colonne finivano con altezze
   diverse. */
#mainContainer.align-items-start { align-items: stretch !important; }
/* Qui NON si azzera il padding: questo selettore vale (1 id + 1
   classe) e batteva la regola dei pannelli piu sotto, lasciandoli
   senza spazio interno ai lati, con i campi a filo del bordo. Il
   gutter di Bootstrap e gia neutralizzato da --bs-gutter-x: 0. */
#mainContainer > .col,
#mainContainer > [class*="col-"] {
  flex: initial;
  max-width: none;
  width: auto;
  /* Il JS aggiunge .mb-3 alla colonna dispositivi quando passa in
     modalita desktop: quel margine la lasciava piu bassa delle altre
     due. Serve !important perche la utility di Bootstrap ce l ha. */
  margin: 0 !important;
}

@media (min-width: 992px) {
  /* Tre colonne affiancate e centrate, come il markup e fatto.

     Volutamente flex e non griglia: l elenco ospiti puo essere
     nascosto (utente non moderatore, display:none da JS) oppure
     mancare del tutto (guest.php non ha #usersCol). Una griglia con
     le colonne dichiarate gli terrebbe comunque il posto, lasciando
     una colonna vuota che spinge consolle e comandi fuori asse.
     Con flex una colonna assente semplicemente non occupa nulla. */
  #mainContainer {
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
  }
  /* Selettore a due id di proposito: il reset delle .col di Bootstrap
     qui sopra vale (1 id + 1 classe) e batterebbe un solo id, tenendo
     le colonne a flex:initial. Cosi la consolle cresce davvero. */
  #mainContainer > #devicesCol  { flex: 0 1 300px; }
  #mainContainer > #controlsCol { flex: 1 1 auto; min-width: 430px; }
  #mainContainer > #usersCol    { flex: 0 0 340px; }
}

/* Superficie comune a tutti i pannelli del banco.
   Gli !important servono a neutralizzare le utility Bootstrap
   (bg-transparent, border-warning) rimaste nel markup: senza, il
   pannello ospiti conserverebbe il contorno ambra, che qui
   significherebbe "moderato" e mentirebbe sullo stato. */
#controlsCol,
#devicesCol,
#usersCol {
  background: var(--panel) !important;
  border: 1px solid var(--edge) !important;
  border-radius: var(--radius-grande);
  /* Niente smusso interno: di la i pannelli sono superfici piatte
     con un bordo sottile, e l'ombra serve solo a staccarli dal
     fondo, non a simulare una lamiera. */
  box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
  padding: calc(var(--u) * 5);
  margin: 0;
}

/* Passando in modalita desktop il JS aggiunge a #mainScreen le classi
   card / border-warning / card-body di Bootstrap. L'ambra qui dentro
   vuol dire "moderato": una cornice ambra attorno a tutto il banco
   dichiara uno stato che non c'e. Il banco non ha cornice, i pannelli
   stanno direttamente sul telaio come in StationInCloud. */
#mainScreen.card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ===================== Consolle: metri e trasmissione =====================
   BLOCCO RIPRISTINATO dalla versione precedente. Metri, fader e
   pulsante TX sono costruiti su bitmap (sliderbg.png per la scala,
   cursor.png per la manopola) e la loro geometria e tarata a mano.

   In particolare: l input del fader e ruotato di 270 gradi e
   translate(16px, 20px) e il risultato del calcolo che fa combaciare
   la corsa del cursore con il disegno della scala. Non e un valore
   arbitrario e non va "semplificato": sostituirlo con un cursore
   disegnato in CSS butta via la taratura.

   Semantica dei colori del TX, anch essa originale:
   alone rosso = fuori onda, verde = in trasmissione, ambra = moderato.
   ========================================================================= */

#controlsBar {
  padding: 8px 0 8px !important;
}
#controlsBar::after { display: none !important; }

/* Aggancio del gruppo metro. Non posiziona nulla: la geometria e
   tutta nelle regole originali qui sotto. */
.ms-meter { display: flex; align-items: flex-start; }

.segments {
  display: flex !important;
  flex-direction: column-reverse !important;
  gap: 4px !important;
  height: auto !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  width: auto !important;
  min-height: 0 !important;
  position: relative;
  overflow: visible;
}

.seg {
  width: 10px;
  height: 8px;
  background: linear-gradient(180deg, rgba(245, 236, 217, 0.06), rgba(245, 236, 217, 0.018));
  border-radius: 2px;
  border: 1px solid rgba(13, 10, 8, 0.7);
  transition: background 0.04s linear, box-shadow 0.04s linear, border-color 0.04s linear;
}
.seg.on.lime {
  background: linear-gradient(180deg, var(--ms-vu-green-hi), var(--ms-vu-green)) !important;
  box-shadow: 0 0 8px rgba(116, 181, 106, 0.7), inset 0 0 2px rgba(245, 236, 217, 0.4);
  border-color: rgba(74, 130, 60, 0.85);
}
.seg.on.yellow {
  background: linear-gradient(180deg, var(--ms-vu-yellow-hi), var(--ms-vu-yellow)) !important;
  box-shadow: 0 0 9px rgba(233, 196, 92, 0.78), inset 0 0 2px rgba(245, 236, 217, 0.4);
  border-color: rgba(180, 140, 50, 0.85);
}
.seg.on.red {
  background: linear-gradient(180deg, var(--ms-vu-red-hi), var(--ms-vu-red)) !important;
  box-shadow: 0 0 12px rgba(229, 82, 63, 0.85), inset 0 0 3px rgba(255, 200, 180, 0.5);
  border-color: rgba(160, 50, 35, 0.9);
}

/* --- Fader: scala e manopola sono immagini ------------------ */
.slider {
  display: flex !important;
  flex-direction: column-reverse !important;
  gap: 4px !important;
  width: 30px !important;
  height: 238px !important;
  margin-right: 4px !important;
  background: url("sliderbg.png") no-repeat !important;
  background-size: cover !important;
  position: static !important;
  filter: none !important;
}
.slider-ios {
  width: 36px !important;
  height: 238px !important;
  background: url("sliderbgios.png") no-repeat !important;
  background-size: cover !important;
}

.vertical-slider {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  background-size: contain;
  z-index: 1000;
  width: 238px !important;
  height: 40px !important;
  writing-mode: horizontal-tb !important;
  direction: ltr !important;
  transform-origin: left !important;
  transform: translate(16px, 20px) rotate(270deg) !important;
}
.vertical-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 40px;
  height: 80px;
  background: url("cursor.png") no-repeat center;
  background-size: contain;
  border: none;
  cursor: pointer;
  filter: drop-shadow(0 0 6px rgba(230, 183, 63, 0.4));
}
.vertical-slider::-moz-range-thumb {
  width: 50px;
  height: 80px;
  background: url("cursor.png") no-repeat center;
  background-size: contain;
  border: none;
  cursor: pointer;
}

.label-in, .label-out {
  width: 36px !important;
  text-align: center !important;
  padding: 0 !important;
  margin-top: 224px !important;
  margin-left: -34px !important;
  font-size: 10px !important;
  letter-spacing: 0 !important;
  color: var(--ms-rivet) !important;
  text-shadow: 0 0 6px rgba(205, 180, 122, 0.45);
  z-index: 2;
  position: relative;
  display: block !important;
}
.label-in-desktop, .label-out-desktop { padding: 0 !important; }

/* --- Trasmissione ------------------------------------------- */
#txBtn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  position: relative;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 50%;
  cursor: pointer;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.6));
}
/* Ghiera in metallo spazzolato */
#txBtn::before {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: conic-gradient(from 230deg,
    #1a1612, #4a4239, #b9a778, #f4e9c8, #b9a778, #4a4239, #1a1612 70%, #1a1612);
  filter: blur(0.3px);
  z-index: -2;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.7);
}
/* Alone: e il segnale di stato */
#txBtn::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 55%, transparent 55%, rgba(238, 61, 46, 0.55) 72%, transparent 92%);
  filter: blur(10px);
  z-index: -1;
  transition: background .35s ease;
}
#txBtn img, #txBtn #txImg, #txImg {
  display: block !important;
  margin: 0 !important;
  width: 148px !important;
  height: 148px !important;
  border-radius: 50% !important;
  transform: translateY(-4px) !important;
  filter:
    drop-shadow(0 0 14px rgba(238, 61, 46, 0.55))
    drop-shadow(0 0 32px rgba(238, 61, 46, 0.22));
  transition: filter .3s ease;
}
#txBtn:hover { transform: translateY(-1px) scale(1.01); }

#txBtn.on::after {
  background: radial-gradient(circle at 50% 55%, transparent 55%, rgba(116, 181, 106, 0.6) 72%, transparent 92%);
  animation: ms-tx-on-glow 2.5s ease-in-out infinite;
}
#txBtn.on img, #txBtn.on #txImg {
  filter:
    drop-shadow(0 0 16px rgba(116, 181, 106, 0.7))
    drop-shadow(0 0 40px rgba(116, 181, 106, 0.35));
  animation: none !important;
}
#txBtn.mod::after {
  background: radial-gradient(circle at 50% 55%, transparent 55%, rgba(241, 178, 17, 0.55) 72%, transparent 92%);
}
#txBtn.mod img, #txBtn.mod #txImg {
  filter:
    drop-shadow(0 0 14px rgba(241, 178, 17, 0.75))
    drop-shadow(0 0 36px rgba(241, 178, 17, 0.32));
}
/* Il battito sta sull opacita dell alone, non su un drop-shadow
   animato: quello forzava un ridisegno per fotogramma e affossava
   le schede video datate. */
@keyframes ms-tx-on-glow {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}

#txLabel {
  display: block !important;
  width: max-content !important;
  margin: 16px auto 0 !important;
  padding: 6px 16px;
  text-align: center !important;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--legend-dim);
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
}
#txBtn.on  + #txLabel { color: var(--ms-vu-green); }
#txBtn.mod + #txLabel { color: var(--hold); }

/* Disconnetti e Invita Ospite: uno sopra l altro, stessa larghezza.
   Affiancati si leggevano come una coppia di pari peso, che non
   sono: uno chiude la sessione, l altro apre una finestra. */
#logout > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 2.5);
}
#logout > div > .btn {
  width: 100%;
  max-width: 260px;
  margin: 0 !important;
}

/* ===================== Colonna dispositivi =====================
   Il guaio precedente: #spkSelect era figlio diretto e portava
   .mx-auto, che in riga flex diventa margin-left:auto e lo scagliava
   contro il bordo destro portandosi dietro tutto lo spazio libero.
   Ora i campi sono coppie etichetta+menu e nessun margine automatico
   puo spostarli. */
#devicesCol {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
  text-align: center;
}

#devicesCol .mx-auto,
#devicesCol .ms-auto,
#devicesCol > select,
#devicesCol > div {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#devicesCol #name {
  font-size: 17px !important;
  font-weight: 600;
  color: var(--legend);
  margin: 0 !important;
}
#devicesCol #userCode {
  font-size: 12px !important;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--legend-faint) !important;
  margin: 0 !important;
}
#status {
  font-size: 12px !important;
  color: var(--legend-dim);
}

/* Un contenitore di messaggi vuoto non deve occupare spazio: a
   pannello sgombro lasciava una fascia grigia sotto ai campi. */
#guestCodeMsg { font-size: 12px; }
#guestCodeMsg:empty,
#msgBox:empty { display: none; }

/* I campi: etichetta sopra, menu sotto, allineati a sinistra perche
   una colonna di etichette si legge piu in fretta di tre etichette
   centrate una sull altra. Micro e qualita stanno appaiati,
   l altoparlante prende la riga intera perche i nomi sono lunghi. */
.ms-setup-row {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 2);
  width: 100%;
  justify-content: flex-start !important;
}
#devicesCol .ms-setup-field {
  display: flex;
  flex-direction: column;
  flex: 1 1 140px;
  text-align: left;
  min-width: 0;
}
#devicesCol .ms-setup-field--narrow { flex: 0 0 86px; }
#devicesCol .ms-setup-field:has(#spkSelect) { flex: 1 1 100%; }
#devicesCol .ms-setup-field > .form-select { width: 100%; }

/* I tre pulsanti della colonna dispositivi comandano la sessione e
   hanno percio la stessa larghezza. Prima "Reset Authenticator" era
   260px per uno stile inline nel JS, mentre Login e Logout Moderatore
   erano larghi quanto il testo. */
#btnModerator,
#btnOutModerator,
#btnAuthenticator {
  align-self: center;
  width: 100%;
  max-width: 260px;
}
#usersModalBtn { width: 100%; }

/* ===================== Comandi ===================== */
.form-select, .form-control {
  background: var(--panel-in) !important;
  border: 1px solid var(--edge-dark) !important;
  border-radius: var(--radius) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.45);
  color: var(--legend) !important;
  font-family: var(--font);
  font-size: 13px !important;
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2) !important;
}
.form-select:focus, .form-control:focus {
  border-color: var(--edge-hi) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.45), 0 0 0 2px rgba(239,164,42,0.28) !important;
}
.form-select option { background: var(--panel); color: var(--legend); }
.form-control::placeholder { color: var(--legend-faint); }

.form-check-input {
  background-color: var(--panel-in);
  border-color: var(--edge);
}
.form-check-input:checked {
  background-color: var(--ok);
  border-color: var(--ok);
}
.form-check-label { font-size: 13px; color: var(--legend-dim); }

/* --- Pulsanti ------------------------------------------------
   Un solo trattamento fisico; il colore distingue la funzione,
   non l'importanza percepita. */
.btn {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  font-variation-settings: "wdth" 92;
  letter-spacing: 0.05em;
  border-radius: var(--radius);
  border: 1px solid var(--edge);
  background: linear-gradient(180deg, var(--panel-up), #1e2325);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
  color: var(--legend);
  padding: calc(var(--u) * 1.75) calc(var(--u) * 3.5);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.btn:hover { border-color: var(--edge-hi); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn-lg { font-size: 13px; padding: calc(var(--u) * 2.5) calc(var(--u) * 5); }
.btn-sm { font-size: 11px; padding: calc(var(--u)) calc(var(--u) * 2); }

.btn-success, .btn-outline-success {
  border-color: var(--ok-deep);
  color: var(--ok);
}
.btn-success:hover, .btn-outline-success:hover {
  border-color: var(--ok); color: #eafaf1;
  background: linear-gradient(180deg, #35604a, var(--ok-deep));
}
.btn-danger, .btn-outline-danger {
  border-color: var(--live-deep);
  color: var(--live);
}
.btn-danger:hover, .btn-outline-danger:hover {
  border-color: var(--live); color: #fff0ed;
  background: linear-gradient(180deg, #8d2013, var(--live-deep));
}
.btn-warning, .btn-outline-warning {
  border-color: var(--hold-deep);
  color: var(--hold);
}
.btn-warning:hover, .btn-outline-warning:hover {
  border-color: var(--hold); color: #fff6e6;
  background: linear-gradient(180deg, #8a6316, var(--hold-deep));
}
.btn-primary, .btn-info, .btn-secondary, .btn-outline-light, .btn-outline-secondary {
  border-color: var(--edge); color: var(--legend);
}
.btn.disabled, .btn:disabled { opacity: 0.55; }

#usersModalBtn { width: 100%; }
#connectedCount { font-size: 12px; color: var(--ok) !important; }

/* ===================== Elenco ospiti ===================== */
/* Niente display forzato qui: la visibilita della colonna ospiti la
   decide il JS (display none/block a seconda che si sia moderatori).
   Un "display: block !important" scavalcava quella scelta e mostrava
   il pannello anche a chi moderatore non e. */
#usersPanel { min-height: 0 !important; }

.ms-panel-tabs {
  display: flex;
  gap: 0;
  margin-bottom: calc(var(--u) * 3);
  border: 1px solid var(--edge-dark);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel-in);
}
.ms-panel-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 1.5);
  padding: calc(var(--u) * 1.75) 0;
  background: transparent;
  border: none;
  border-right: 1px solid var(--edge-dark);
  color: var(--legend-faint);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ms-panel-tab:last-child { border-right: none; }
.ms-panel-tab:hover:not(.active) { background: rgba(255,255,255,0.045); color: var(--legend-dim); }
.ms-panel-tab.active {
  background: var(--panel-up);
  color: var(--legend);
  box-shadow: inset 0 -2px 0 var(--hold);
}

/* --- Targhette ospite ----------------------------------------
   Il bordo sinistro porta lo stato: e la prima cosa che l'occhio
   percorre scorrendo una colonna. */
#usersList { display: grid !important; gap: calc(var(--u) * 1.5) !important; }
@media (min-width: 992px) {
  #usersList {
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)) !important;
    max-width: none !important;
  }
}

.ms-user-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u));
  min-height: 74px;
  padding: calc(var(--u) * 1.5) calc(var(--u)) !important;
  background: var(--panel-up);
  border: 1px solid var(--edge-dark);
  border-left: 3px solid var(--ok);
  border-radius: var(--radius) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.ms-user-tile > span {
  font-size: 12px;
  line-height: 1.25;
  color: var(--legend);
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 0 !important;
}
.ms-user-tile.tile-muted { border-left-color: var(--live); }
.ms-user-tile.tile-mod   { border-left-color: var(--hold); }
.ms-user-tile.tile-ghost { visibility: hidden !important; }

/* Il pulsante microfono dentro la targhetta: piatto, senza
   riempimento pieno, cosi il colore dello stato resta uno solo
   (quello del bordo) e non compete con se stesso. */
.ms-user-tile .btn {
  width: 26px; height: 26px;
  padding: 0 !important;
  background: var(--panel-in);
  border: 1px solid var(--edge-dark);
  box-shadow: none;
}
.ms-user-tile .btn.btn-success { color: var(--ok); }
.ms-user-tile .btn.btn-danger  { color: var(--live); }
.ms-user-tile .btn.btn-warning { color: var(--hold); }

/* Elenco su mobile */
.list-group-item {
  background: transparent !important;
  border-color: var(--edge-dark) !important;
  color: var(--legend) !important;
  font-size: 13px;
}

/* ===================== Registrazione ===================== */
#btnRec {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 1.5);
  position: relative;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
#btnRec.rec-off {
  background: linear-gradient(180deg, var(--panel-up), #1e2325);
  border: 1px solid var(--live-deep);
  color: var(--live);
}
#btnRec.rec-off:hover { border-color: var(--live); color: #ff6d59; }
#btnRec.rec-on {
  background: linear-gradient(180deg, #b32b1c, #8d2013);
  border: 1px solid var(--live);
  color: #fff3f0;
  box-shadow: 0 0 16px rgba(232,68,46,0.4);
}

#recTimerRow { text-align: center !important; padding: 0 !important; }
.rec-timer {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--live);
  opacity: 0;
  transition: opacity 0.25s;
}
.rec-timer.visible { opacity: 1; }

/* --- Il segnalino -------------------------------------------
   Sostituisce la targhetta REC che occupava un posto nella
   griglia: la registrazione non e un partecipante. Oltre a dire
   che si registra, confronta chi si sente con chi sta davvero
   entrando nel file e dichiara i mancanti. */
.ms-rec-signal {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  margin-bottom: calc(var(--u) * 2);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2.5);
  border: 1px solid var(--live-deep);
  border-left: 3px solid var(--live);
  border-radius: var(--radius);
  background: var(--panel-in);
  font-size: 11px;
  line-height: 1.35;
}
.ms-rec-signal__dot {
  width: 7px; height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 6px rgba(232,68,46,0.75);
  animation: ms-tally 1.3s steps(1, end) infinite;
}
@keyframes ms-tally { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0.28; } }

.ms-rec-signal__label {
  font-weight: 700;
  font-variation-settings: "wdth" 84;
  letter-spacing: 0.13em;
  color: var(--live);
}
.ms-rec-signal__time {
  font-variant-numeric: tabular-nums;
  color: var(--legend);
}
.ms-rec-signal__ok,
.ms-rec-signal__warn { margin-left: auto; text-align: right; }
.ms-rec-signal__ok   { color: var(--legend-faint); }
.ms-rec-signal__warn { color: var(--hold); font-weight: 600; }

/* Qualcuno e udibile ma resta fuori dal file: deve saltare
   all'occhio, perche e esattamente il guasto che prima passava
   inosservato. */
.ms-rec-signal.is-alert {
  border-color: var(--hold-deep);
  border-left-color: var(--hold);
  background: rgba(239,164,42,0.07);
}
.ms-rec-signal.is-alert .ms-rec-signal__dot {
  background: var(--hold);
  box-shadow: 0 0 6px rgba(239,164,42,0.75);
}

/* --- Registrazioni salvate ----------------------------------- */
.rec-list-item {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  margin-bottom: calc(var(--u) * 1.5);
  padding: calc(var(--u) * 2);
  background: var(--panel-up);
  border: 1px solid var(--edge-dark);
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--legend-dim);
}
.rec-list-item .rec-icon { color: var(--live); }
.rec-list-item .rec-name { flex: 1; word-break: break-all; color: var(--legend); }
.rec-list-item .rec-dur  { white-space: nowrap; color: var(--legend-faint); font-variant-numeric: tabular-nums; }
.rec-actions { display: flex; flex-direction: column; gap: calc(var(--u)); flex-shrink: 0; }
.rec-actions .btn { font-size: 10px; padding: calc(var(--u) * 0.75) calc(var(--u) * 1.5); }
.rec-hold-msg { font-size: 10px; color: var(--hold); text-align: right; }
.rec-empty {
  padding: calc(var(--u) * 8) 0;
  text-align: center;
  font-size: 12px;
  color: var(--legend-faint);
}
.rec-player-bar { display: flex; align-items: center; gap: calc(var(--u) * 2); width: 100%; }
.rec-player-bar input { flex: 1; accent-color: var(--live); }
.rec-player-bar span { font-variant-numeric: tabular-nums; color: var(--legend-faint); font-size: 11px; }

/* ===================== Finestre ===================== */
.modal-content {
  background: var(--panel) !important;
  border: 1px solid var(--edge) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
  color: var(--legend) !important;
}
.modal-header, .modal-footer {
  border-color: var(--edge-dark) !important;
  padding: calc(var(--u) * 3) calc(var(--u) * 5) !important;
}
.modal-body { padding: calc(var(--u) * 5) !important; }
.modal-title {
  font-size: 14px;
  font-weight: 600;
  font-variation-settings: "wdth" 92;
  letter-spacing: 0.04em;
}
.btn-close, .btn-close-white { filter: invert(0.75); opacity: 0.7; }

#btnModerateAllGlobal { transition: border-color 0.15s, color 0.15s !important; }

/* ===================== Ospite ===================== */
#guestWelcome { font-size: 17px; color: var(--legend); }

/* ===================== Pagine di accesso =====================
   Accesso, recupero codice, registrazione e attivazione erano
   rimaste fuori dal sistema: Bootstrap grezzo, campi bianchi e
   pulsanti pieni. Sono la prima cosa che si vede del prodotto e
   devono gia parlare la lingua del banco. */
.container .card {
  max-width: 400px;
  margin-inline: auto;
  background: var(--panel) !important;
  border: 1px solid var(--edge) !important;
  border-radius: var(--radius) !important;
  box-shadow: inset 0 1px 0 var(--edge-hi), 0 14px 34px rgba(0,0,0,0.5);
}
.container .card-body { padding: calc(var(--u) * 7) !important; }
.card-title {
  font-size: 17px;
  font-weight: 600;
  font-variation-settings: "wdth" 92;
  color: var(--legend);
  margin-bottom: calc(var(--u) * 5);
}
.container hr {
  border: none;
  border-top: 1px solid var(--edge-dark);
  opacity: 1;
  margin: calc(var(--u) * 5) 0;
}

/* Il centraggio di queste pagine veniva tutto dalle utility di
   Bootstrap: .container per la colonna, .mx-auto per il riquadro,
   .text-center per logo e titoli. Basta che quel foglio non venga
   applicato - e su una macchina alla prima visita e successo - e il
   logo finisce a filo del bordo sinistro.

   Stessa tecnica di StationInCloud (.sic-centrata): il corpo e una
   colonna flex che centra i suoi figli, e il blocco ha una larghezza
   sua. Non c'e nessun margine automatico da rispettare e nessun
   allineamento di testo da ereditare, quindi non dipende da nessun
   altro foglio. */
.ms-auth {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: calc(var(--u) * 10) calc(var(--u) * 4);
}
.ms-auth > .container {
  width: min(400px, 92vw);
  max-width: none;
  padding: 0;
  margin: 0;
}
/* I figli del blocco sono a loro volta centrati come scatole, non
   per allineamento di testo: cosi il logo sta al centro anche se
   .text-center non esiste. */
.ms-auth > .container > * { margin-inline: auto; }
.ms-auth .card { max-width: none; margin-inline: 0; }
.ms-auth .card-title,
.ms-auth form,
.ms-auth #msgBox { text-align: center; }
.ms-auth > .container > div:first-child { display: flex; justify-content: center; }

/* Il campo del codice e una targa da leggere a distanza, non un
   input generico: cifre larghe, spaziate, allineate al centro. */
#codeForm input[type="text"] {
  text-transform: uppercase;
  text-align: center;
  font-size: 26px !important;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  padding: calc(var(--u) * 2.5) calc(var(--u) * 2) !important;
}

/* L'azione primaria di una pagina di accesso e una sola e deve
   essere riconoscibile senza leggere: e l'unico pulsante acceso. */
.container .card .btn-success {
  background: linear-gradient(180deg, #3d6b52, var(--ok-deep));
  border-color: var(--ok);
  color: #eafaf1;
}
.container .card .btn-success:hover {
  background: linear-gradient(180deg, #4a8163, #35604a);
  color: #fff;
}

/* Messaggi: dicono cosa fare, e prendono il colore del loro stato. */
#msgBox, #guestCodeMsg, #inviteMsg, #setNameMsg, #moderatorMsg { font-size: 12px; }
.alert {
  margin-top: calc(var(--u) * 3);
  padding: calc(var(--u) * 2) calc(var(--u) * 3);
  border-radius: var(--radius);
  border: 1px solid var(--edge);
  background: var(--panel-in);
  color: var(--legend-dim);
  font-size: 12px;
}
.alert-danger {
  border-color: var(--live-deep);
  border-left: 3px solid var(--live);
  color: var(--live);
  background: rgba(232,68,46,0.07);
}

/* ===================== Adattamento =====================
   Regole mobile RIPRISTINATE dalla versione precedente: erano il
   risultato di prove sul telefono vero, non un adattamento
   ricavato a tavolino. Sul telefono la barra superiore sparisce,
   l elenco ospiti passa in una finestra e il banco resta la sola
   cosa a schermo. */
@media (max-width: 991.98px) {
  .ms-topbar    { display: none !important; }
  .ms-hero-mark { display: none !important; }
  #pcBar        { display: none !important; }
  #usersCol     { display: none !important; }
  #usersModalBtn { display: flex !important; margin: 0 auto !important; }

  #mainScreen { padding: calc(var(--u) * 3) !important; }
  #mainContainer { gap: calc(var(--u) * 3); }
  #controlsCol, #devicesCol { padding: calc(var(--u) * 4); }
  #controlsBar { gap: 1.25rem !important; }
}

/* Sotto i 576px il TX scende a 112px e i gap si stringono, cosi
   VU sinistro (~58) + TX (112) + VU destro (~58) sta dentro 320px
   senza che il flex-wrap mandi a capo la colonna OUT. */
@media (max-width: 575.98px) {
  #controlsBar { gap: 0.75rem !important; }
  #txBtn img, #txBtn #txImg, #txImg { width: 112px !important; height: 112px !important; }
  #txBtn::before { inset: -10px !important; }
  #txLabel { margin-top: 10px !important; letter-spacing: 0.3em; }
}

/* ============================================================
   Agganci del JS preservati da questo file
   id:     mainContainer devicesCol controlsCol usersCol usersPanel
           usersList usersListModal controlsBar txBtn txImg txLabel
           labelIn labelOut localL localR remoteL remoteR sliderLocal
           sliderRemote micVolume spkVolume micSelect spkSelect brSelect
           name userCode status connectedCount usersModalBtn btnRec
           recTimer recTimerRow recSignal msPanelTabs msTabOspiti
           msTabRec msPanelRec msRecList connectionScreen mainScreen
   classi: ms-user-tile tile-mod tile-muted tile-ghost ms-panel-tabs
           ms-panel-tab ms-tab-label ms-fade-in seg on lime yellow red
           segments slider vertical-slider label-in label-out
           rec-timer visible rec-on rec-off rec-list-item rec-icon
           rec-name rec-dur rec-actions rec-empty rec-hold-msg
           rec-player-bar ms-rec-signal (dot label time ok warn)
           is-alert hidden hideBtn on mod
   ============================================================ */