/* ============================================================
   bs-dark.css — make Bootstrap's dark mode match each site theme
   ------------------------------------------------------------
   templates/base.html sets <html data-bs-theme="dark">, so Bootstrap
   uses light text on dark (instead of near-black text that vanished on
   our dark themes). This file then swaps Bootstrap's stock grey
   surfaces (#212529 .bg-dark / .table-dark / #6c757d borders) for
   tones taken from each site's own palette.

   Bootstrap is loaded at the END of <body> (after this file), so every
   rule here uses an html[...] / body.theme-* prefix to out-rank it
   regardless of load order.
   ============================================================ */

/* ── Defaults (GambaStats / any theme not listed below) ── */
html[data-bs-theme=dark] {
  --gs-bg: #0a0a0f;          /* page background, inputs */
  --gs-surface: #14141d;     /* cards, modals, tiles (.bg-dark) */
  --gs-accent-rgb: 139, 92, 246;

  --bs-body-bg: var(--gs-bg);
  --bs-body-bg-rgb: 10, 10, 15;
  --bs-body-color: #ebe9f1;
  --bs-body-color-rgb: 235, 233, 241;
  --bs-emphasis-color: #fff;
  --bs-secondary-color: rgba(235, 233, 241, 0.66);   /* .text-muted, .form-text, placeholders */
  --bs-secondary-color-rgb: 235, 233, 241;
  --bs-tertiary-color: rgba(235, 233, 241, 0.45);
  --bs-secondary-bg: var(--gs-surface);
  --bs-tertiary-bg: var(--gs-surface);
  --bs-border-color: rgba(255, 255, 255, 0.12);
  --bs-border-color-translucent: rgba(255, 255, 255, 0.1);
  --bs-heading-color: #fff;
}

/* ── Per-site palettes ── */
body.theme-platty       { --gs-bg: #0b0612; --gs-surface: #170d22; --gs-accent-rgb: 254, 95, 149; }
body.theme-flyer        { --gs-bg: #080808; --gs-surface: #151010; --gs-accent-rgb: 255, 26, 26; }
body.theme-logan        { --gs-bg: #060b16; --gs-surface: #0d1626; --gs-accent-rgb: 0, 242, 254; }
body.theme-dizkontinued { --gs-bg: #0a0014; --gs-surface: #170826; --gs-accent-rgb: 157, 0, 255; }
body.theme-stolen       { --gs-bg: #05000a; --gs-surface: #140a22; --gs-accent-rgb: 138, 43, 226; }
body.theme-kmack        { --gs-bg: #000000; --gs-surface: #140d08; --gs-accent-rgb: 249, 115, 22; }
body.theme-kmackdev     { --gs-bg: #07080c; --gs-surface: #10121a; --gs-accent-rgb: 217, 178, 95; }

/* Re-resolve on body so each theme's --gs-bg feeds Bootstrap components */
html[data-bs-theme=dark] body {
  --bs-body-bg: var(--gs-bg);
  --bs-secondary-bg: var(--gs-surface);
  --bs-tertiary-bg: var(--gs-surface);
}

/* ── Surfaces: the grey tiles ── */
html[data-bs-theme=dark] .bg-dark {
  background-color: var(--gs-surface) !important;
}
html[data-bs-theme=dark] .card,
html[data-bs-theme=dark] .modal-content {
  --bs-card-bg: var(--gs-surface);
  --bs-modal-bg: var(--gs-surface);
  --bs-card-border-color: rgba(var(--gs-accent-rgb), 0.16);
  --bs-modal-border-color: rgba(var(--gs-accent-rgb), 0.2);
  --bs-card-cap-bg: rgba(255, 255, 255, 0.03);
}

/* Bootstrap's grey (#6c757d) borders → soft accent tint */
html[data-bs-theme=dark] .border-secondary {
  border-color: rgba(var(--gs-accent-rgb), 0.2) !important;
}

/* Inputs forced to .bg-dark sit a shade darker than the card they're in so
   they stay visible. Plain inputs already follow --bs-body-bg (= --gs-bg). */
html[data-bs-theme=dark] .form-control.bg-dark,
html[data-bs-theme=dark] .form-select.bg-dark,
html[data-bs-theme=dark] .input-group-text.bg-dark {
  background-color: var(--gs-bg) !important;
}

/* Tables: let the card surface show through instead of a grey slab */
html[data-bs-theme=dark] .table,
html[data-bs-theme=dark] .table-dark {
  --bs-table-bg: transparent;
  --bs-table-color: var(--bs-body-color);
  --bs-table-border-color: rgba(255, 255, 255, 0.08);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.025);
  --bs-table-striped-color: var(--bs-body-color);
  --bs-table-hover-bg: rgba(var(--gs-accent-rgb), 0.07);
  --bs-table-hover-color: #fff;
  --bs-table-active-bg: rgba(var(--gs-accent-rgb), 0.1);
}
html[data-bs-theme=dark] .table > thead th {
  color: rgba(235, 233, 241, 0.75);
}

/* Tabs */
html[data-bs-theme=dark] .nav-tabs {
  --bs-nav-tabs-border-color: rgba(var(--gs-accent-rgb), 0.2);
  --bs-nav-tabs-link-hover-border-color: rgba(var(--gs-accent-rgb), 0.25);
  --bs-nav-tabs-link-active-bg: var(--gs-surface);
  --bs-nav-tabs-link-active-color: #fff;
  --bs-nav-tabs-link-active-border-color: rgba(var(--gs-accent-rgb), 0.3) rgba(var(--gs-accent-rgb), 0.3) var(--gs-surface);
  --bs-nav-link-color: rgba(235, 233, 241, 0.7);
  --bs-nav-link-hover-color: #fff;
}
/* Pages add .text-muted to inactive tabs — keep those readable too */
html[data-bs-theme=dark] .nav-tabs .nav-link.text-muted { color: rgba(235, 233, 241, 0.7) !important; }
html[data-bs-theme=dark] .nav-tabs .nav-link.text-muted:hover { color: #fff !important; }

/* Dropdowns / list groups / pagination follow the surface colour */
html[data-bs-theme=dark] .dropdown-menu {
  --bs-dropdown-bg: var(--gs-surface);
  --bs-dropdown-border-color: rgba(var(--gs-accent-rgb), 0.2);
  --bs-dropdown-link-hover-bg: rgba(var(--gs-accent-rgb), 0.12);
  --bs-dropdown-link-active-bg: rgba(var(--gs-accent-rgb), 0.3);
}
html[data-bs-theme=dark] .list-group {
  --bs-list-group-bg: var(--gs-surface);
  --bs-list-group-border-color: rgba(255, 255, 255, 0.08);
}