/* ── Color palette ──────────────────────────────────────────
   6 design tokens used across the entire site.
   Semantic colors (success / danger / warning) come from Bootstrap.
   ─────────────────────────────────────────────────────────── */
:root {
  --hs-bg:      #1c1f23;   /* page background              */
  --hs-surface: #272b2f;   /* card / input background      */
  --hs-border:  #3c4148;   /* borders & dividers           */
  --hs-text:    #e2e6ea;   /* primary text                 */
  --hs-muted:   #9aa0a6;   /* secondary / placeholder text */
  --hs-accent:  #2d7be5;   /* primary action (blue)        */
}

/* ── Base ───────────────────────────────────────────────────── */
body {
  background-color: var(--hs-bg);
  color: var(--hs-text);
  margin-bottom: 60px;
}
a         { color: var(--hs-accent); }
a:hover   { color: #5a9ef0; }
hr        { border-color: var(--hs-border); opacity: 1; }

/* ── Navbar ─────────────────────────────────────────────────── */
.navbar-brand      { font-size: 1.35rem; }
.navbar-brand-icon { height: 28px; width: 28px; object-fit: contain; }

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background-color: var(--hs-surface);
  border-color: var(--hs-border);
  border-radius: 8px;
  color: var(--hs-text);
}
.card-header {
  background-color: rgba(255, 255, 255, .04);
  border-bottom-color: var(--hs-border);
}
.card-footer {
  background-color: rgba(255, 255, 255, .04);
  border-top-color: var(--hs-border);
}

/* ── Alerts (dark-theme variants) ───────────────────────────── */
/* Bootstrap 5.1 generates static alert colors via mixins, so we
   override each variant directly.                               */
.alert-success {
  color: #75b798;
  background-color: rgba(25, 135, 84, .12);
  border-color: rgba(25, 135, 84, .40);
}
.alert-success .alert-link { color: #a3cfbb; }

.alert-danger {
  color: #ea868f;
  background-color: rgba(220, 53, 69, .12);
  border-color: rgba(220, 53, 69, .40);
}
.alert-danger .alert-link { color: #f1aeb5; }

.alert-warning {
  color: #ffda6a;
  background-color: rgba(255, 193, 7, .12);
  border-color: rgba(255, 193, 7, .40);
}
.alert-warning .alert-link { color: #ffe69c; }

.alert-info {
  color: #6edff6;
  background-color: rgba(13, 202, 240, .12);
  border-color: rgba(13, 202, 240, .40);
}
.alert-info .alert-link { color: #9eeaf9; }

/* Bootstrap's btn-close uses a dark SVG; invert it for dark surfaces */
.alert .btn-close,
.modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ── Form controls ──────────────────────────────────────────── */
.form-control,
.form-select {
  background-color: var(--hs-surface);
  border-color: var(--hs-border);
  color: var(--hs-text);
}
.form-control:focus,
.form-select:focus {
  background-color: var(--hs-surface);
  border-color: var(--hs-accent);
  color: var(--hs-text);
  box-shadow: 0 0 0 .2rem rgba(45, 123, 229, .25);
}
.form-control::placeholder { color: var(--hs-muted); }
.form-label  { color: var(--hs-text); }
.form-text   { color: var(--hs-muted); }
.input-group-text {
  background-color: var(--hs-surface);
  border-color: var(--hs-border);
  color: var(--hs-text);
}

/* Checkboxes & radios */
.form-check-input {
  background-color: var(--hs-surface);
  border-color: var(--hs-border);
}
.form-check-input:checked {
  background-color: var(--hs-accent);
  border-color: var(--hs-accent);
}
.form-check-input:focus {
  border-color: var(--hs-accent);
  box-shadow: 0 0 0 .2rem rgba(45, 123, 229, .25);
}

/* Pairing code input */
.pairing-code-input {
  letter-spacing: 0.35em;
  font-size: 1.6rem;
}
.pairing-code-input:read-only {
  background-color: var(--hs-surface);
  cursor: default;
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn-primary {
  background-color: var(--hs-accent);
  border-color: var(--hs-accent);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #1f6acc;
  border-color: #1f6acc;
  color: #fff;
}

.btn-outline-secondary {
  color: var(--hs-muted);
  border-color: var(--hs-border);
}
.btn-outline-secondary:hover {
  background-color: var(--hs-border);
  border-color: var(--hs-border);
  color: var(--hs-text);
}

/* ── Nav pills ──────────────────────────────────────────────── */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link { background-color: var(--hs-accent); }

/* ── Tables ─────────────────────────────────────────────────── */
.table {
  --bs-table-color: var(--hs-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--hs-border);
  --bs-table-striped-bg: rgba(255, 255, 255, .03);
  --bs-table-hover-bg: rgba(255, 255, 255, .04);
}
.table-dark {
  --bs-table-bg: rgba(255, 255, 255, .06);
  --bs-table-border-color: var(--hs-border);
}

/* ── List group ─────────────────────────────────────────────── */
.list-group-item {
  background-color: var(--hs-surface);
  border-color: var(--hs-border);
  color: var(--hs-text);
}
.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: rgba(255, 255, 255, .05);
  color: var(--hs-text);
}

/* ── Modal ──────────────────────────────────────────────────── */
.modal-content {
  background-color: var(--hs-surface);
  border-color: var(--hs-border);
  color: var(--hs-text);
}
.modal-header,
.modal-footer { border-color: var(--hs-border); }

/* ── Text helpers ───────────────────────────────────────────── */
.text-muted     { color: var(--hs-muted) !important; }
.text-secondary { color: var(--hs-muted) !important; }

/* ── Avatar circle (profile card) ──────────────────────────── */
.avatar-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-circle .avatar-letter {
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
}

/* ── Avatar color swatches (profile color picker) ───────────── */
.avatar-swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-block;
  border: 3px solid transparent;
  transition: border-color .15s;
}
.avatar-swatch:has(input:checked) { border-color: var(--hs-text); }
.avatar-swatch input[type="radio"] { display: none; }

/* ── Thumbnail images ───────────────────────────────────────── */
.thumb-video { object-fit: cover; }

/* ── Misc ───────────────────────────────────────────────────── */
.filtered-out { display: none !important; }