/* regie.css — pupitru de regie.
 *
 * Principiu: în timpul slujbei operatorul nu are voie să piardă Programul din
 * ochi și nu are voie să deruleze. Monitoarele rămân lipite sus, comenzile
 * folosite des rămân lipite jos, iar tot ce e pregătire trece la mijloc, unde
 * derularea e permisă fiindcă nu te uiți acolo când ești live.
 *
 * Stratul acesta nu rescrie layoutul existent: îl fixează. */

:root {
  --regie-bar-height: 5.5rem;
}

/* --- Antet și monitoare, mereu vizibile --------------------------------- */

#protectedContent > header,
#protectedContent > .demo-notice {
  position: sticky;
  top: 0;
  z-index: 45;
  background: var(--surface, #0c111b);
}

#protectedContent > .demo-notice { top: 0; }

.monitor-grid {
  position: sticky;
  top: 3.5rem;
  z-index: 40;
  padding: .5rem 0;
  background: var(--bg, #070b12);
  box-shadow: 0 .75rem 1rem -.75rem rgba(0, 0, 0, .75);
}

/* Monitoarele scad la jumătate: e nevoie să vezi CE e pe ecran, nu să admiri
 * imaginea. Raportul fix ține layoutul stabil când o cameră se deconectează. */
.monitor-grid .frame,
#previewFrame,
#programFrame {
  aspect-ratio: 16 / 9;
  max-height: 30vh;
}

/* --- Zona derulabilă ---------------------------------------------------- */

body {
  padding-bottom: calc(var(--regie-bar-height) + 1rem);
}

/* Mixerul se strânge într-un rând compact. Se reglează o dată, la început. */
.phone-audio-row {
  display: grid;
  grid-template-columns: 6.5rem auto 1fr 3rem auto;
  align-items: center;
  gap: .5rem;
  padding: .35rem 0;
}

.phone-audio-row input[type="range"] { width: 100%; }
.phone-audio-row meter { width: 3rem; }
.phone-audio-row .camera-remove { font-size: .75rem; padding: .25rem .5rem; }

/* --- Bara de regie ------------------------------------------------------ */

.regie-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto auto auto;
  align-items: center;
  gap: 1rem;
  min-height: var(--regie-bar-height);
  padding: .6rem 1rem;
  background: #0a0f18;
  border-top: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 -.5rem 1.25rem rgba(0, 0, 0, .5);
}

.regie-group {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.regie-group > .regie-label {
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7f8b9c;
  margin-right: .25rem;
}

/* Textul curent: două rânduri, tăiat, doar ca să confirmi ce e proiectat. */
.regie-now {
  min-width: 0;
  font-size: .85rem;
  line-height: 1.3;
  color: #e6ecf5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.regie-now:empty::before {
  content: "Ecran gol";
  color: #6c7789;
}

.regie-bar button {
  min-height: 2.6rem;
  min-width: 2.6rem;
  padding: .4rem .7rem;
  font-size: .85rem;
  border-radius: .45rem;
  border: 1px solid rgba(255, 255, 255, .18);
  background: #141c2a;
  color: #e6ecf5;
  cursor: pointer;
}

.regie-bar button:hover:not(:disabled) { background: #1d2738; }
.regie-bar button:disabled { opacity: .35; cursor: default; }

.regie-bar button.regie-cam.live {
  background: #7a1f1f;
  border-color: #c0392b;
  color: #fff;
}

.regie-bar button.regie-cam.preview {
  border-color: #2ecc71;
  color: #8ce39a;
}

.regie-bar button.regie-take {
  background: #c9302c;
  border-color: #e06b66;
  color: #fff;
  font-weight: 600;
  padding-inline: 1rem;
}

.regie-bar button.regie-clear { color: #ffd39a; }

.regie-bar kbd {
  display: inline-block;
  margin-left: .35rem;
  padding: 0 .3rem;
  font-size: .65rem;
  border-radius: .2rem;
  background: rgba(255, 255, 255, .12);
  color: #b8c3d4;
}

@media (max-width: 1100px) {
  .regie-bar { grid-template-columns: 1fr; gap: .5rem; }
  .regie-now { -webkit-line-clamp: 1; }
  .monitor-grid .frame { max-height: 22vh; }
}

/* Modalul trebuie sa stea peste toate straturile introduse aici: antet 45,
 * monitoare 40, bara de regie 60. Altfel fereastra cu codul QR ramane prinsa
 * sub monitorul Program si operatorul nu poate conecta un telefon. */
.modal { z-index: 80; }

/* Fereastra de conectare este mai inalta decat monitoarele reduse, deci are
 * nevoie de derulare proprie pe ecrane mici. */
.modal-card {
  max-height: 88vh;
  overflow-y: auto;
}

.legal-footer {
  padding: 1rem 0 .25rem;
  text-align: center;
  font-size: .72rem;
  color: var(--muted);
  letter-spacing: .04em;
}

.legal-links {
  margin-top: 1.25rem;
  text-align: center;
  font-size: .72rem;
  color: var(--muted);
}

.legal-links a { color: var(--muted); }