/* VIDEO ROUTING — router operatorski konsoli.
   Cel: jeden ekran, jedno spojrzenie. Wiersz zamiast karty-formularza; rzeczy rzadkie
   (nazwa wyjścia, linki) siedzą w menu „•••", a nie w stale widocznym polu.
   FIOLET = domena VIDEO (--adm-video), zgodnie z resztą interfejsu. */

.video-routing { margin-top:16px; }
.video-routing h2 { margin:0 0 10px; }
.video-routing h3 {
  margin:0 0 8px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--adm-text-faint, #6b7280);
}
.video-routing [data-video-routing-status]:empty { display:none; }
.video-routing [data-video-routing-status] { margin:0 0 10px; color:var(--adm-error, #f0574c); font-size:12px; }

.video-routing-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; align-items:start; }
.video-routing-col { min-width:0; }
.video-routing-col__heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.video-routing-col__heading h3 { margin:0; }
.video-output-add { flex:0 0 auto; min-height:28px; padding:4px 8px; font-size:11px; }

/* ---- GŁÓWNY OBRAZ INTERCOMU -------------------------------------------------------- */
.video-mainbar { margin-bottom:14px; }
.video-mainrow {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:8px 10px; border:1px solid var(--adm-video-border, #3b2d60); border-radius:var(--adm-radius, 8px);
  background:linear-gradient(0deg, rgba(139,92,246,.06), rgba(139,92,246,.06)), var(--adm-surface-2, #14161a);
}
.video-mainrow__role {
  flex:0 0 auto; min-width:52px; padding:3px 8px; border-radius:var(--adm-radius-sm, 5px);
  background:var(--adm-video, #8b5cf6); color:var(--adm-video-ink, #0d1013);
  font-size:11px; font-weight:800; letter-spacing:.06em; text-align:center;
}
.video-mainrow__pick {
  flex:1 1 220px; min-width:0; display:flex; align-items:center; gap:8px; min-height:34px;
  padding:5px 10px; border:1px solid var(--adm-border-strong, #262b31); border-radius:var(--adm-radius-sm, 5px);
  background:var(--adm-surface, #0f1113); color:var(--adm-text, #e6e8ea);
  font:inherit; font-size:12.5px; font-weight:650; text-align:left; cursor:pointer;
}
.video-mainrow__pick:hover { border-color:var(--adm-video, #8b5cf6); background:var(--adm-surface-hover, #14171b); }
.video-mainrow__name { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.video-mainrow__name[data-empty="true"] { color:var(--adm-text-faint, #6b7280); font-weight:600; }
.video-mainrow__clear { flex:0 0 auto; }
.video-mainrow__hint { flex:1 0 100%; color:var(--adm-text-ghost, #5c636b); font-size:10.5px; }
.video-chevron { flex:0 0 auto; color:var(--adm-text-faint, #6b7280); font-size:10px; }

/* ---- wspólny wiersz ---------------------------------------------------------------- */
.video-row {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:6px 8px; margin-bottom:6px; min-height:40px;
  border:1px solid var(--adm-border, #1c2025); border-radius:var(--adm-radius-sm, 5px);
  background:var(--adm-surface-2, #14161a);
}
.video-row:hover { border-color:var(--adm-border-strong, #262b31); }
.video-row__name {
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:12.5px; font-weight:700; color:var(--adm-text, #e6e8ea);
}
.video-row__namewrap { flex:0 0 96px; min-width:0; }
.video-row__rename { box-sizing:border-box; width:100%; min-height:28px; font-size:12px; }
.video-row__actions { flex:0 0 auto; display:flex; align-items:center; gap:4px; margin-left:auto; }

.video-dot { flex:0 0 auto; font-size:10px; line-height:1; color:var(--adm-text-faint, #6b7280); }
.video-dot[data-live="true"] { color:var(--adm-video, #8b5cf6); }

.video-route-state {
  flex:0 0 auto; padding:2px 7px; border-radius:999px; white-space:nowrap;
  background:var(--adm-surface, #0f1113); color:var(--adm-text-dim, #8b9098);
  font-size:10px; font-weight:700; letter-spacing:.04em;
}
.video-route-state[data-live="true"] { color:var(--adm-video-ink, #0d1013); background:var(--adm-video, #8b5cf6); }
/* PODGLĄD ADMINISTRATORA wygrywa z LIVE: obraz realnie leci, ale wyłącznie do administratora.
   Czerwień administratorska (ta sama co `--adm-admin` i ramka u użytkownika), nie fiolet VIDEO —
   fiolet znaczy tu „idzie do odbiorców", a to źródło właśnie NIE idzie. */
.video-route-state[data-preview-only="true"] { color:#1a0c0d; background:var(--adm-admin, #d98a8a); }
.video-row--source[data-preview-armed="true"] { outline:1px solid var(--adm-admin-border, #4a2a2c); outline-offset:-1px; }
.video-route-empty { margin:2px 0 0; color:var(--adm-text-faint, #6b7280); font-size:12px; }

.video-spin { flex:0 0 auto; color:var(--adm-pending, #b48ce8); font-size:11px; animation:video-spin 1s linear infinite; }
@keyframes video-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .video-spin { animation:none; } }

/* ---- wiersz OUTPUT ----------------------------------------------------------------- */
.video-row--output .video-row__source {
  flex:1 1 150px; min-width:0; display:flex; align-items:center; gap:7px; min-height:30px;
  padding:3px 9px; border:1px solid var(--adm-border-strong, #262b31); border-radius:999px;
  background:var(--adm-surface, #0f1113); color:var(--adm-text, #e6e8ea);
  font:inherit; font-size:12px; font-weight:650; text-align:left; cursor:pointer;
}
.video-row--output .video-row__source:hover { border-color:var(--adm-video, #8b5cf6); background:var(--adm-surface-hover, #14171b); }
.video-row__source-name { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.video-row__source-name[data-empty="true"] { color:var(--adm-text-faint, #6b7280); font-weight:600; }
/* Puste wyjście zaprasza jednym „＋", zamiast udawać wypełniony selektor. */
.video-row__source--empty { border-style:dashed; }
.video-row__source--empty::before { content:"＋"; flex:0 0 auto; color:var(--adm-text-dim, #8b9098); font-size:12px; }
.video-row__link { flex:0 0 auto; font-size:11px; line-height:1; filter:grayscale(.2); }
.video-row__audio { flex:0 0 auto; padding:2px 6px; border:1px solid rgba(139,92,246,.45); border-radius:999px; color:var(--adm-video,#8b5cf6); font-size:9px; font-weight:800; letter-spacing:.04em; }
.video-row__audio[data-ready="false"] { border-color:rgba(245,158,11,.45); color:var(--adm-warning,#d99a22); }
.video-row[data-pending="true"] { border-color:var(--adm-pending, #b48ce8); }

/* ---- wiersz SOURCE ----------------------------------------------------------------- */
.video-row--source { align-items:flex-start; }
.video-row__head { flex:1 1 200px; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.video-row__profile { flex:0 0 auto; color:var(--adm-text-faint, #6b7280); font-size:10.5px; letter-spacing:.04em; }
.video-row__where {
  flex:1 1 100%; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--adm-video, #8b5cf6); font-size:11px; font-weight:650;
}
.video-row__where[data-empty="true"] { color:var(--adm-text-ghost, #5c636b); font-weight:500; }
.video-row__routes { flex:0 0 auto; display:flex; align-items:center; gap:3px; }

.video-chip {
  min-width:28px; height:28px; padding:0 6px;
  border:1px solid var(--adm-border-strong, #262b31); border-radius:var(--adm-radius-sm, 5px);
  background:var(--adm-surface, #0f1113); color:var(--adm-text-dim, #8b9098);
  font:inherit; font-size:11.5px; font-weight:800; line-height:1; cursor:pointer;
}
.video-chip:hover:not(:disabled) { color:var(--adm-text, #e6e8ea); border-color:var(--adm-video, #8b5cf6); }
.video-chip[aria-pressed="true"] {
  background:var(--adm-video, #8b5cf6); border-color:var(--adm-video, #8b5cf6); color:var(--adm-video-ink, #0d1013);
}
.video-chip[data-pending="true"] { background:var(--adm-pending, #b48ce8); border-color:var(--adm-pending, #b48ce8); }
.video-chip:disabled { opacity:.4; cursor:not-allowed; }
.video-chip--main { letter-spacing:.02em; }

.video-icon-btn {
  display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:30px; padding:0 6px;
  border:1px solid var(--adm-border-strong, #262b31); border-radius:var(--adm-radius-sm, 5px);
  background:var(--adm-surface, #0f1113); color:var(--adm-text-dim, #8b9098);
  font:inherit; font-size:12px; line-height:1; cursor:pointer;
}
.video-icon-btn:hover:not(:disabled) { color:var(--adm-text, #e6e8ea); border-color:var(--adm-video, #8b5cf6); }
.video-icon-btn:disabled { opacity:.38; cursor:not-allowed; }
.video-icon-btn--more { letter-spacing:.04em; }
.video-icon-btn[aria-expanded="true"] { border-color:var(--adm-video, #8b5cf6); color:var(--adm-text, #e6e8ea); }

.video-src-preview { flex:1 0 100%; padding-top:6px; }
.video-src-preview__stage { position:relative; }
.video-src-preview__video {
  display:block; width:100%; aspect-ratio:16/9; background:#000; border-radius:var(--adm-radius-sm, 5px);
  border:1px solid var(--adm-border-strong, #262b31); object-fit:contain;
}
.video-src-preview__info {
  position:absolute; top:8px; right:8px; z-index:1; min-width:28px; width:28px; height:28px;
  border-color:rgba(255,255,255,.28); border-radius:50%; background:rgba(8,10,12,.78); color:#fff;
  font-family:Georgia,serif; font-size:14px; font-weight:700; backdrop-filter:blur(4px);
}
.video-src-preview__details {
  margin-top:6px; padding:9px 10px; border:1px solid var(--adm-border-strong, #262b31);
  border-radius:var(--adm-radius-sm, 5px); background:var(--adm-surface, #0f1113);
}
.video-src-preview__details[hidden] { display:none; }
.video-src-preview__details-title {
  margin:0 0 8px; color:var(--adm-text, #e6e8ea); font-size:11px; font-weight:750;
  letter-spacing:.06em; text-transform:uppercase;
}
.video-src-preview__stats { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px 12px; margin:0; }
.video-src-preview__stat { min-width:0; }
.video-src-preview__stat dt {
  overflow:hidden; margin:0 0 2px; color:var(--adm-text-faint, #6b7280); font-size:9.5px;
  font-weight:650; letter-spacing:.035em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap;
}
.video-src-preview__stat dd {
  overflow:hidden; margin:0; color:var(--adm-text, #e6e8ea); font-size:11.5px; font-variant-numeric:tabular-nums;
  text-overflow:ellipsis; white-space:nowrap;
}
.video-src-preview__status { margin:5px 0 0; color:var(--adm-text-dim, #8b9098); font-size:11px; min-height:1.3em; }

/* ---- menu / popover ---------------------------------------------------------------- */
.video-menu {
  position:fixed; z-index:1200; max-width:min(320px, calc(100vw - 16px)); max-height:min(60vh, 420px); overflow:auto;
  padding:4px; border:1px solid var(--adm-border-strong, #262b31); border-radius:var(--adm-radius, 8px);
  background:var(--adm-surface-2, #14161a); box-shadow:0 10px 28px rgba(0,0,0,.55);
}
.video-menu__title { margin:6px 8px 4px; color:var(--adm-text-faint, #6b7280); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.video-menu__sep { height:1px; margin:4px 2px; background:var(--adm-border, #1c2025); }
.video-menu__item {
  display:flex; align-items:center; gap:8px; width:100%; min-height:34px; padding:6px 8px;
  border:0; border-radius:var(--adm-radius-sm, 5px); background:transparent; color:var(--adm-text, #e6e8ea);
  font:inherit; font-size:12.5px; text-align:left; cursor:pointer;
}
.video-menu__item:hover:not(:disabled) { background:var(--adm-surface-hover, #14171b); }
.video-menu__item:disabled { opacity:.45; cursor:not-allowed; }
.video-menu__item--danger { color:#d98080; }
.video-menu__item--danger:hover:not(:disabled) { background:rgba(160,60,60,.10); }
.video-menu__mark { flex:0 0 12px; color:var(--adm-video, #8b5cf6); font-size:11px; }
.video-menu__label { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.video-menu__hint { flex:0 0 auto; color:var(--adm-text-faint, #6b7280); font-size:10px; font-weight:700; letter-spacing:.04em; }

/* ---- dostępność -------------------------------------------------------------------- */
.video-routing :focus-visible,
.video-menu :focus-visible { outline:2px solid var(--adm-video, #8b5cf6); outline-offset:2px; }

/* ---- wąski ekran / dotyk ----------------------------------------------------------- */
@media (max-width:880px) {
  .video-routing-grid { grid-template-columns:1fr; }
  /* Na wąskim ekranie kolejność to MAIN → OUTPUTS → SOURCES: operator najpierw przełącza. */
  .video-routing-col--outputs { order:1; }
  .video-routing-col--sources { order:2; }
  .video-row__namewrap { flex:0 0 auto; }
}
/* Wąski ekran: wiersz wyjścia łamie się na „nazwa + akcje" i pełnowymiarowy selektor źródła,
   zamiast zostawiać pustą wstęgę pod nazwą. Selektor pozostaje największym celem dotyku. */
@media (max-width:620px) {
  .video-row--output { align-items:center; }
  .video-row--output .video-row__namewrap { order:1; flex:1 1 auto; }
  .video-row--output .video-row__link { order:2; }
  .video-row--output .video-row__audio { order:2; }
  .video-row--output .video-row__actions { order:3; }
  .video-row--output .video-row__source { order:4; flex:1 0 100%; }
  .video-src-preview__stats { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (pointer:coarse), (max-width:620px) {
  .video-chip { min-width:36px; height:36px; font-size:12.5px; }
  .video-icon-btn { min-width:38px; height:38px; font-size:13px; }
  .video-menu__item { min-height:40px; }
  .video-row { padding:8px; }
  .video-row--output .video-row__source { min-height:36px; }
}