/* Restreamer - dark operator console */
:root {
  --rs-bg: #0d1014;
  --rs-surface: #202938;
  --rs-surface-2: #253044;
  --rs-border: #303b4e;
  --rs-text: #e6e9ee;
  --rs-muted: #a0b2cb;
  --rs-accent: #4e80ff;
  --rs-good: #21c66b;
  --rs-warning: #fab219;
  --rs-serious: #ec835a;
  --rs-critical: #d03b3b;
  --rs-series-1: #3987e5;
  --rs-series-2: #d95926;
  --rs-series-3: #199e70;
  --rs-grid: #232a34;
  --bs-body-bg: var(--rs-bg);
  --bs-body-color: var(--rs-text);
  --bs-border-color: var(--rs-border);
  --bs-secondary-color: var(--rs-muted);
  --bs-primary: #3987e5;
  --bs-primary-rgb: 57, 135, 229;
  --bs-link-color: #6da7ec;
  --bs-link-hover-color: #9ec5f4;
  color-scheme: dark;
}
[data-bs-theme=dark] { --bs-body-bg: var(--rs-bg); --bs-tertiary-bg: var(--rs-surface-2); }
html, body { background: var(--rs-bg); }
body { font-size: .9rem; font-feature-settings: "tnum" 1; }
.rs-icon { flex: none; vertical-align: -3px; }
.rs-muted { color: var(--rs-muted) !important; }
code { color: #9ec5f4; }

.btn-primary { --bs-btn-bg: #2a78d6; --bs-btn-border-color: #2a78d6; --bs-btn-hover-bg: #256abf; --bs-btn-hover-border-color: #256abf; --bs-btn-active-bg: #1c5cab; }
.form-control, .form-select { background-color: #10141a; border-color: var(--rs-border); }
.form-control:focus, .form-select:focus { background-color: #10141a; border-color: #3987e5; box-shadow: 0 0 0 .2rem rgba(57,135,229,.25); }
.modal-content { background: var(--rs-surface); border: 1px solid var(--rs-border); }
.modal-header, .modal-footer { border-color: var(--rs-border); }

/* shell */
.rs-shell { display: flex; min-height: 100vh; }
.rs-sidebar {
  width: 232px; flex: none; background: #0a0d11; border-right: 1px solid var(--rs-border);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: 1040;
}
.rs-brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; letter-spacing: .14em; font-size: .95rem; padding: 1.25rem 1.25rem 1rem; color: #fff; }
.rs-brand .rs-icon { color: var(--rs-accent); }
.rs-nav { display: flex; flex-direction: column; gap: 2px; padding: .5rem .75rem; flex: 1; }
.rs-nav a { display: flex; align-items: center; gap: .75rem; padding: .55rem .75rem; border-radius: 8px; color: var(--rs-muted); text-decoration: none; font-weight: 500; }
.rs-nav a:hover { color: var(--rs-text); background: var(--rs-surface); }
.rs-nav a.active { color: #fff; background: var(--rs-surface-2); box-shadow: inset 3px 0 0 var(--rs-accent); }
.rs-userbox { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 1rem 1.25rem; border-top: 1px solid var(--rs-border); }
.rs-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rs-topbar { display: flex; align-items: center; gap: .75rem; padding: .9rem 1.5rem; border-bottom: 1px solid var(--rs-border); background: rgba(13,16,20,.92); position: sticky; top: 0; z-index: 1030; backdrop-filter: blur(6px); }
.rs-content { padding: 1.5rem; }

@media (max-width: 991.98px) {
  .rs-sidebar { position: fixed; left: -240px; transition: left .2s ease; }
  .rs-sidebar.open { left: 0; box-shadow: 0 0 40px rgba(0,0,0,.6); }
  .rs-content { padding: 1rem; }
  .rs-topbar { padding: .75rem 1rem; }
}

/* cards & stats */
.rs-card { background: var(--rs-surface); border: 1px solid var(--rs-border); border-radius: 12px; }
.rs-section-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--rs-muted); font-weight: 600; margin-bottom: .75rem; }
.rs-grid { display: grid; gap: 1rem; }
.rs-grid-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.15rem; }
.rs-stat { --stat-color: #4e80ff; padding: 1.15rem 1.25rem; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: .3rem .7rem; align-items: center; background: linear-gradient(125deg, #222d3d, #1a2230); box-shadow: 0 8px 22px #00000012; }
.rs-tone-green { --stat-color: #21c66b; }
.rs-tone-purple { --stat-color: #8b6bff; }
.rs-tone-red { --stat-color: #ff506e; }
.rs-tone-cyan { --stat-color: #19bdd0; }
.rs-tone-amber { --stat-color: #ffa91e; }
.rs-stat-icon { width: 46px; height: 46px; display: grid; place-items: center; color: #fff; background: var(--stat-color); border-radius: 13px; box-shadow: 0 6px 16px #0003; }
.rs-stat .rs-stat-label { letter-spacing: .025em; font-size: .68rem; }
.rs-stat .rs-stat-value { font-size: clamp(1.2rem, 1.8vw, 1.85rem); margin: 0; text-align: right; }
.rs-stat .rs-stat-sub { grid-column: 1 / -1; margin-top: .8rem; font-size: .8rem; }
.rs-stat-track { grid-column: 1 / -1; height: 7px; margin-top: .35rem; border-radius: 999px; background: #0e1520; overflow: hidden; }
.rs-stat-track > div { width: 0; height: 100%; border-radius: inherit; background: var(--stat-color); transition: width .4s ease; }
.rs-stat:has([data-stat="viewers"]) .rs-stat-track { visibility: hidden; }
@media (max-width: 1399px) { .rs-grid-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1199px) { .rs-grid-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .rs-grid-stats { grid-template-columns: 1fr; } .rs-stat .rs-stat-value { font-size: 1.8rem; } }
@media (prefers-reduced-motion: reduce) { .rs-stat-track > div, .rs-meter-fill { transition: none; } .rs-status::before { animation: none; } }
.rs-stat-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--rs-muted); font-weight: 600; }
.rs-stat-value { font-size: 1.6rem; font-weight: 650; line-height: 1.25; margin-top: .25rem; color: #fff; white-space: nowrap; }
.rs-stat-sub { font-size: .75rem; color: var(--rs-muted); min-height: 1.1em; }
.rs-hero { font-size: 2rem; font-weight: 650; color: #fff; line-height: 1.1; }
.rs-note { background: rgba(57,135,229,.08); border: 1px solid rgba(57,135,229,.3); color: var(--rs-text); }

/* meter */
.rs-meter { position: relative; height: 12px; border-radius: 6px; background: #0f1318; border: 1px solid var(--rs-border); overflow: hidden; }
.rs-meter-fill { height: 100%; width: 0; background: var(--rs-accent); border-radius: 6px; transition: width .4s ease; }
.rs-meter-fill.warning { background: var(--rs-warning); }
.rs-meter-fill.critical { background: var(--rs-critical); }
.rs-meter-mark { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--rs-muted); opacity: .6; }
.rs-bar { margin-bottom: .9rem; }
.rs-bar-head { display: flex; justify-content: space-between; font-size: .8rem; margin-bottom: .3rem; }

/* tables */
.rs-table { --bs-table-bg: transparent; --bs-table-color: var(--rs-text); --bs-table-border-color: var(--rs-border); --bs-table-hover-bg: rgba(255,255,255,.025); margin: 0; }
.rs-table thead th { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--rs-muted); font-weight: 600; border-bottom-width: 1px; padding: .7rem .75rem; white-space: nowrap; }
.rs-table td { vertical-align: middle; padding: .65rem .75rem; }
.rs-table tbody tr:last-child td { border-bottom: 0; }
.rs-col-logo { width: 56px; }
.rs-logo { width: 40px; height: 40px; border-radius: 8px; object-fit: contain; background: #0f1318; border: 1px solid var(--rs-border); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--rs-muted); font-size: .8rem; }
.rs-ch-name { font-weight: 600; color: #fff; }
.rs-ch-meta { font-size: .75rem; color: var(--rs-muted); }
.rs-ch-error { font-size: .75rem; color: #f08b8b; max-width: 460px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-actions { display: flex; flex-wrap: wrap; gap: .25rem; justify-content: flex-end; }
.rs-actions .btn { --bs-btn-padding-y: .2rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem; }
.rs-search { max-width: 280px; }

/* status badges: color + text, never color alone */
.rs-status { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; padding: .22rem .55rem; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.rs-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rs-st-ONLINE { color: #3ccf3c; border-color: rgba(12,163,12,.45); background: rgba(12,163,12,.10); }
.rs-st-STARTING, .rs-st-RESTARTING { color: #6da7ec; border-color: rgba(57,135,229,.45); background: rgba(57,135,229,.10); }
.rs-st-STARTING::before, .rs-st-RESTARTING::before, .rs-st-STOPPING::before { animation: rs-pulse 1s infinite; }
.rs-st-DEGRADED { color: var(--rs-warning); border-color: rgba(250,178,25,.45); background: rgba(250,178,25,.08); }
.rs-st-ERROR { color: #f07070; border-color: rgba(208,59,59,.55); background: rgba(208,59,59,.12); }
.rs-st-STOPPING { color: var(--rs-serious); border-color: rgba(236,131,90,.45); background: rgba(236,131,90,.08); }
.rs-st-OFFLINE { color: var(--rs-muted); border-color: var(--rs-border); background: transparent; }
@keyframes rs-pulse { 50% { opacity: .25; } }

.rs-pill { display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; padding: .25rem .65rem; border-radius: 999px; border: 1px solid var(--rs-border); color: var(--rs-muted); }
.rs-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rs-muted); }
.rs-pill.ok .rs-dot { background: var(--rs-good); }
.rs-pill.bad { color: #f07070; border-color: rgba(208,59,59,.55); }
.rs-pill.bad .rs-dot { background: var(--rs-critical); }

.rs-level { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.rs-level-error { color: #f07070; }
.rs-level-warning { color: var(--rs-warning); }
.rs-level-info { color: #6da7ec; }

/* probe result */
.rs-probe { border: 1px solid var(--rs-border); background: #10141a; border-radius: 10px; padding: .75rem 1rem; }
.rs-probe.ok { border-color: rgba(12,163,12,.5); }
.rs-probe.fail { border-color: rgba(208,59,59,.6); }
.rs-probe-head { font-weight: 700; letter-spacing: .06em; margin-bottom: .5rem; }
.rs-probe.ok .rs-probe-head { color: #3ccf3c; }
.rs-probe.fail .rs-probe-head { color: #f07070; }
.rs-probe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem 1rem; }
.rs-probe-grid div span { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--rs-muted); }
.rs-probe-grid div strong { color: #fff; font-weight: 600; }

.rs-console { background: #07090c; border: 1px solid var(--rs-border); border-radius: 8px; padding: .75rem; max-height: 340px; overflow: auto; font-size: .75rem; color: #c9d1d9; white-space: pre-wrap; word-break: break-all; }
.rs-video { background: #000; border-radius: 8px; max-height: 60vh; }
.rs-dl { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.25rem; margin: 0; }
.rs-dl dt { color: var(--rs-muted); font-weight: 500; }
.rs-dl dd { margin: 0; word-break: break-word; }

/* charts */
.rs-analytics-heading { display: flex; align-items: center; gap: 1rem; }
.rs-analytics-heading .rs-stat-icon { background: var(--rs-accent); width: 55px; height: 55px; border-radius: 16px; }
.rs-chart { position: relative; }
.rs-chart canvas { width: 100%; height: 220px; display: block; }
.rs-chart-legend { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .75rem; color: var(--rs-muted); margin-bottom: .4rem; }
.rs-chart-legend i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: .35rem; }
.rs-chart-tip { position: absolute; pointer-events: none; background: #0a0d11; border: 1px solid var(--rs-border); border-radius: 8px; padding: .4rem .6rem; font-size: .75rem; color: var(--rs-text); white-space: nowrap; display: none; z-index: 5; box-shadow: 0 6px 20px rgba(0,0,0,.5); }
.rs-chart-tip b { color: #fff; }
.rs-chart-empty { height: 220px; display: flex; align-items: center; justify-content: center; color: var(--rs-muted); font-size: .85rem; }

/* login */
.rs-login-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; background: radial-gradient(1200px 600px at 50% -10%, #142235 0%, var(--rs-bg) 60%); }
.rs-login { width: 100%; max-width: 380px; }
.rs-login .rs-brand { justify-content: center; padding: 0; }