/* Twitch theme extensions for Bootstrap-based admin/studio pages.
   Keep Bootstrap for layout utilities; override components to match twitch.css. */

:root {
  color-scheme: dark;

  /* Make sure Bootstrap's variables don't force dark-on-dark text. */
  --bs-body-color: rgba(255,255,255,0.92);
  --bs-body-bg: transparent;
  --bs-emphasis-color: rgba(255,255,255,0.92);
  --bs-secondary-color: rgba(255,255,255,0.66);
  --bs-tertiary-color: rgba(255,255,255,0.45);
  --bs-table-color: rgba(255,255,255,0.88);
}

body.ls-scroll { overflow: auto; }

body { color: var(--text) !important; }

main, .container { color: var(--text); }

a { color: rgba(34,211,238,0.92); }
a:hover { color: rgba(34,211,238,1); }

code {
  font-family: var(--mono);
  color: rgba(255,255,255,0.90);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  padding: 2px 6px;
  border-radius: 8px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--stroke);
  color: var(--text);
  box-shadow: 0 20px 70px rgba(0,0,0,0.35) !important;
}

.card-header {
  background: rgba(10, 11, 18, 0.55);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.86);
}

.table { color: rgba(255,255,255,0.88); }
.table { --bs-table-color: rgba(255,255,255,0.88); }
.table td, .table th { color: rgba(255,255,255,0.88) !important; }
.table thead th { color: var(--muted) !important; }
.table > :not(caption) > * > * { background-color: transparent; border-color: rgba(255,255,255,0.10); }
.table thead th { color: var(--muted); font-weight: 800; letter-spacing: 0.02em; }

.form-label { color: rgba(255,255,255,0.82); }

.form-control, .form-select {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.92);
}

.form-control:focus, .form-select:focus {
  background: rgba(255,255,255,0.06);
  border-color: rgba(34,211,238,0.40);
  box-shadow: 0 0 0 4px rgba(34,211,238,0.10);
  color: rgba(255,255,255,0.92);
}

.form-control::placeholder { color: rgba(255,255,255,0.40); }

.form-check-input {
  background-color: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
}
.form-check-input:checked {
  background-color: rgba(34,211,238,0.55);
  border-color: rgba(34,211,238,0.55);
}

.alert {
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.88);
}

.alert-danger { border-color: rgba(251,113,133,0.30); background: rgba(251,113,133,0.12); }
.alert-success { border-color: rgba(52,211,153,0.26); background: rgba(52,211,153,0.10); }
.alert-info { border-color: rgba(34,211,238,0.26); background: rgba(34,211,238,0.10); }

.badge { font-family: var(--mono); font-weight: 700; }

.badge.text-bg-secondary { background: rgba(255,255,255,0.10) !important; color: rgba(255,255,255,0.82) !important; }
.badge.text-bg-success { background: rgba(52,211,153,0.22) !important; color: rgba(255,255,255,0.92) !important; }
.badge.text-bg-danger { background: rgba(251,113,133,0.22) !important; color: rgba(255,255,255,0.92) !important; }
.badge.text-bg-warning { background: rgba(251,191,36,0.22) !important; color: rgba(255,255,255,0.92) !important; }

/* Bootstrap buttons -> twitch-ish look */
.btn { height: 36px; padding: 0 12px; border-radius: 12px; }
.btn-sm { height: 32px; padding: 0 10px; border-radius: 10px; font-size: 13px; }

.btn-primary {
  border-color: rgba(139,92,246,0.30);
  background: rgba(139,92,246,0.18);
}

.btn-outline-primary {
  border-color: rgba(139,92,246,0.30);
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.04);
}

.btn-outline-secondary {
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.86);
  background: rgba(255,255,255,0.04);
}

.btn-danger {
  border-color: rgba(251,113,133,0.35);
  background: rgba(251,113,133,0.16);
}

.btn-outline-danger {
  border-color: rgba(251,113,133,0.35);
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.04);
}

.btn-warning {
  border-color: rgba(251,191,36,0.35);
  background: rgba(251,191,36,0.16);
  color: rgba(255,255,255,0.92);
}

.btn-outline-warning {
  border-color: rgba(251,191,36,0.35);
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.04);
}

.btn-outline-dark {
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.86);
  background: rgba(255,255,255,0.04);
}

.vr { background: rgba(255,255,255,0.18); opacity: 1; }

.text-secondary { color: var(--muted) !important; }

/* Keep the top bar readable when bootstrap is present */
.top { border-bottom-color: rgba(255,255,255,0.10); }

/* Make dark-on-dark areas distinguishable (especially video frames and previews). */
.ratio.bg-black, .ratio.bg-dark {
  background-color: rgba(0,0,0,0.72) !important;
  border: 1px solid rgba(255,255,255,0.14);
}

/* Improve contrast for range inputs on dark backgrounds. */
input[type=\"range\"].form-range { filter: saturate(1.1) brightness(1.1); }