/*
  Site themes. Loaded right after Bootstrap and BEFORE vibrant-persona.css.

  Every colour the site uses should come from the semantic tokens below
  (--c-*). A theme only redefines tokens; components never test which theme
  is active. "original" is the default and keeps the Steam-derived palette
  the site launched with.

  The active theme is set as <html data-theme="..."> by the inline script in
  index.php (localStorage "csb_theme", mirrored to a cookie) before first
  paint. The list of themes lives in csb_themes() in Core/config.core.php;
  add a theme there AND here.

  Token roles:
    --c-bg            page canvas
    --c-surface       panels and cards
    --c-surface-2     raised: hover rows, active tabs, secondary buttons
    --c-surface-3     wells: inputs, code, sunken areas
    --c-border        hairlines; --c-border-strong for inputs and dividers
    --c-text          primary text; --c-text-2 secondary; --c-text-3 hints
    --c-accent        the ONE action / selection colour
    --c-accent-hi     accent as text on dark or tinted backgrounds
    --c-accent-ink    text on a solid accent fill
    --c-success / --c-warning / --c-danger   states only, never decoration
    --c-chart-1..3    data series (1 = accent family)
  Each colour used inside rgba() also has an *-rgb twin ("r, g, b").
*/

:root,
:root[data-theme="original"] {
    color-scheme: dark;
    --c-bg: #1a2634;
    --c-bg-rgb: 26, 38, 52;
    --c-surface: #101a25;
    --c-surface-rgb: 16, 26, 37;
    --c-surface-2: #2a3d52;
    --c-surface-3: #0b131c;
    --c-shell: #0c131b;
    --c-border: rgba(130, 175, 215, 0.10);
    --c-border-strong: rgba(130, 175, 215, 0.20);
    --c-text: #eaf0f6;
    --c-text-rgb: 234, 240, 246;
    --c-text-2: #a6b6c6;
    --c-text-3: #7d8fa2;
    --c-accent: #5ab0ec;
    --c-accent-rgb: 90, 176, 236;
    --c-accent-hover: #7cc2f2;
    --c-accent-hi: #93d0f7;
    --c-accent-ink: #061624;
    --c-grad-a: #45b5f2;
    --c-grad-b: #2b6fd8;
    --c-glow-rgb: 58, 96, 138;
    --c-success: #5cc77a;
    --c-success-rgb: 92, 199, 122;
    --c-positive: #00ffaa;
    --c-positive-rgb: 0, 255, 170;
    --c-warning: #f3c04f;
    --c-warning-rgb: 243, 192, 79;
    --c-danger: #f2645a;
    --c-danger-rgb: 242, 100, 90;
    --c-chart-1: #5ab0ec;
    --c-chart-2: #c9a2ff;
    --c-chart-3: #f3c04f;
    --c-heat-0: rgba(255, 255, 255, 0.06);
}

/* Dust: warm graphite and desert sand. The signature palette. */
:root[data-theme="dust"] {
    --c-bg: #15130f;
    --c-bg-rgb: 21, 19, 15;
    --c-surface: #1d1a15;
    --c-surface-rgb: 29, 26, 21;
    --c-surface-2: #29241c;
    --c-surface-3: #100e0b;
    --c-shell: #110f0c;
    --c-border: rgba(255, 236, 205, 0.08);
    --c-border-strong: rgba(255, 236, 205, 0.16);
    --c-text: #f4eee3;
    --c-text-rgb: 244, 238, 227;
    --c-text-2: #b9ae9c;
    --c-text-3: #8f8574;
    --c-accent: #e9a23b;
    --c-accent-rgb: 233, 162, 59;
    --c-accent-hover: #f2b65d;
    --c-accent-hi: #f5c47a;
    --c-accent-ink: #1e1304;
    --c-grad-a: #f2b14f;
    --c-grad-b: #d9792a;
    --c-glow-rgb: 110, 78, 36;
    --c-success: #8bc96b;
    --c-success-rgb: 139, 201, 107;
    --c-positive: #8bc96b;
    --c-positive-rgb: 139, 201, 107;
    --c-warning: #e8d25a;
    --c-warning-rgb: 232, 210, 90;
    --c-danger: #ee6250;
    --c-danger-rgb: 238, 98, 80;
    --c-chart-1: #e9a23b;
    --c-chart-2: #7fb7c9;
    --c-chart-3: #c98fd0;
    --c-heat-0: rgba(255, 236, 205, 0.06);
}

/* Carbon: neutral graphite, colour reserved for state. */
:root[data-theme="carbon"] {
    --c-bg: #0f1012;
    --c-bg-rgb: 15, 16, 18;
    --c-surface: #16181b;
    --c-surface-rgb: 22, 24, 27;
    --c-surface-2: #202328;
    --c-surface-3: #0b0c0e;
    --c-shell: #0b0c0e;
    --c-border: rgba(255, 255, 255, 0.08);
    --c-border-strong: rgba(255, 255, 255, 0.16);
    --c-text: #f2f3f5;
    --c-text-rgb: 242, 243, 245;
    --c-text-2: #a4aab3;
    --c-text-3: #7c828b;
    --c-accent: #e9ebee;
    --c-accent-rgb: 233, 235, 238;
    --c-accent-hover: #ffffff;
    --c-accent-hi: #ffffff;
    --c-accent-ink: #0f1012;
    --c-grad-a: #f2f3f5;
    --c-grad-b: #c3c8cf;
    --c-glow-rgb: 60, 64, 72;
    --c-success: #5fcf86;
    --c-success-rgb: 95, 207, 134;
    --c-positive: #5fcf86;
    --c-positive-rgb: 95, 207, 134;
    --c-warning: #efc14e;
    --c-warning-rgb: 239, 193, 78;
    --c-danger: #f0645c;
    --c-danger-rgb: 240, 100, 92;
    --c-chart-1: #e9ebee;
    --c-chart-2: #7aa7d9;
    --c-chart-3: #efc14e;
    --c-heat-0: rgba(255, 255, 255, 0.06);
}

/* Radar: deep green-black with the minimap's mint. */
:root[data-theme="radar"] {
    --c-bg: #0c1411;
    --c-bg-rgb: 12, 20, 17;
    --c-surface: #111c18;
    --c-surface-rgb: 17, 28, 24;
    --c-surface-2: #182822;
    --c-surface-3: #08100d;
    --c-shell: #09110e;
    --c-border: rgba(210, 255, 235, 0.08);
    --c-border-strong: rgba(210, 255, 235, 0.16);
    --c-text: #eaf4ef;
    --c-text-rgb: 234, 244, 239;
    --c-text-2: #9fb5ab;
    --c-text-3: #768c82;
    --c-accent: #3fd99a;
    --c-accent-rgb: 63, 217, 154;
    --c-accent-hover: #66e4b0;
    --c-accent-hi: #7deabd;
    --c-accent-ink: #03150d;
    --c-grad-a: #4ee3a5;
    --c-grad-b: #1fa877;
    --c-glow-rgb: 28, 84, 64;
    --c-success: #8bd65f;
    --c-success-rgb: 139, 214, 95;
    --c-positive: #3fd99a;
    --c-positive-rgb: 63, 217, 154;
    --c-warning: #f0c454;
    --c-warning-rgb: 240, 196, 84;
    --c-danger: #f4665b;
    --c-danger-rgb: 244, 102, 91;
    --c-chart-1: #3fd99a;
    --c-chart-2: #8ab4f0;
    --c-chart-3: #f0c454;
    --c-heat-0: rgba(210, 255, 235, 0.06);
}

/* Ember: charcoal with terrorist-side orange. */
:root[data-theme="ember"] {
    --c-bg: #141010;
    --c-bg-rgb: 20, 16, 16;
    --c-surface: #1c1716;
    --c-surface-rgb: 28, 23, 22;
    --c-surface-2: #282020;
    --c-surface-3: #0f0c0c;
    --c-shell: #100c0c;
    --c-border: rgba(255, 220, 210, 0.08);
    --c-border-strong: rgba(255, 220, 210, 0.16);
    --c-text: #f6eeeb;
    --c-text-rgb: 246, 238, 235;
    --c-text-2: #bba9a3;
    --c-text-3: #917f79;
    --c-accent: #ff7043;
    --c-accent-rgb: 255, 112, 67;
    --c-accent-hover: #ff8d68;
    --c-accent-hi: #ffa284;
    --c-accent-ink: #1f0a03;
    --c-grad-a: #ff8a4c;
    --c-grad-b: #e8452f;
    --c-glow-rgb: 112, 46, 30;
    --c-success: #74cf7f;
    --c-success-rgb: 116, 207, 127;
    --c-positive: #74cf7f;
    --c-positive-rgb: 116, 207, 127;
    --c-warning: #f2c94c;
    --c-warning-rgb: 242, 201, 76;
    --c-danger: #ff5470;
    --c-danger-rgb: 255, 84, 112;
    --c-chart-1: #ff7043;
    --c-chart-2: #7fb3d5;
    --c-chart-3: #f2c94c;
    --c-heat-0: rgba(255, 220, 210, 0.06);
}

/* ---------------------------------------------------------------------
   Bridges: legacy variables and Bootstrap follow the tokens.
   --------------------------------------------------------------------- */
:root {
    /* vibrant-persona.css legacy names */
    --vp-bg-deep: var(--c-bg);
    --vp-bg-card: rgba(var(--c-surface-rgb), 0.72);
    --vp-accent-primary: var(--c-accent);
    --vp-accent-secondary: var(--c-accent-hi);
    --vp-text-bright: var(--c-text);
    --vp-text-dim: var(--c-text-2);
    --vp-border: var(--c-border);
    --vp-glow-blue: 0 0 15px rgba(var(--c-accent-rgb), 0.3);
    --vp-glow-cyan: 0 0 15px rgba(var(--c-accent-rgb), 0.3);
    --vp-gradient-primary: linear-gradient(90deg, var(--c-grad-a) 0%, var(--c-grad-b) 100%);

    /* Bootstrap 5.3 runtime variables */
    --bs-body-bg: var(--c-bg);
    --bs-body-bg-rgb: var(--c-bg-rgb);
    --bs-body-color: var(--c-text);
    --bs-body-color-rgb: var(--c-text-rgb);
    --bs-emphasis-color: var(--c-text);
    --bs-secondary-color: var(--c-text-2);
    --bs-tertiary-color: var(--c-text-3);
    --bs-secondary-bg: var(--c-surface-2);
    --bs-tertiary-bg: var(--c-surface);
    --bs-border-color: var(--c-border-strong);
    --bs-border-color-translucent: var(--c-border);
    --bs-primary: var(--c-accent);
    --bs-primary-rgb: var(--c-accent-rgb);
    --bs-info: var(--c-accent);
    --bs-info-rgb: var(--c-accent-rgb);
    --bs-success: var(--c-success);
    --bs-success-rgb: var(--c-success-rgb);
    --bs-warning: var(--c-warning);
    --bs-warning-rgb: var(--c-warning-rgb);
    --bs-danger: var(--c-danger);
    --bs-danger-rgb: var(--c-danger-rgb);
    --bs-primary-text-emphasis: var(--c-accent-hi);
    --bs-info-text-emphasis: var(--c-accent-hi);
    --bs-primary-bg-subtle: rgba(var(--c-accent-rgb), 0.12);
    --bs-info-bg-subtle: rgba(var(--c-accent-rgb), 0.12);
    --bs-primary-border-subtle: rgba(var(--c-accent-rgb), 0.32);
    --bs-info-border-subtle: rgba(var(--c-accent-rgb), 0.32);
    --bs-link-color: var(--c-accent-hi);
    --bs-link-color-rgb: var(--c-accent-rgb);
    --bs-link-hover-color: var(--c-accent-hover);
    --bs-focus-ring-color: rgba(var(--c-accent-rgb), 0.35);
    --bs-form-valid-color: var(--c-success);
    --bs-form-invalid-color: var(--c-danger);
}

/* Bootstrap's emphasis colours ship as compiled hex inside these components,
   so they are re-pointed here. */
.btn-primary {
    --bs-btn-color: var(--c-accent-ink);
    --bs-btn-bg: var(--c-accent);
    --bs-btn-border-color: var(--c-accent);
    --bs-btn-hover-color: var(--c-accent-ink);
    --bs-btn-hover-bg: var(--c-accent-hover);
    --bs-btn-hover-border-color: var(--c-accent-hover);
    --bs-btn-active-color: var(--c-accent-ink);
    --bs-btn-active-bg: var(--c-accent);
    --bs-btn-active-border-color: var(--c-accent);
    --bs-btn-disabled-color: var(--c-accent-ink);
    --bs-btn-disabled-bg: var(--c-accent);
    --bs-btn-disabled-border-color: var(--c-accent);
    --bs-btn-focus-shadow-rgb: var(--c-accent-rgb);
}

.btn-outline-primary,
.btn-outline-info {
    --bs-btn-color: var(--c-accent-hi);
    --bs-btn-bg: rgba(var(--c-accent-rgb), 0.08);
    --bs-btn-border-color: rgba(var(--c-accent-rgb), 0.35);
    --bs-btn-hover-color: var(--c-accent-ink);
    --bs-btn-hover-bg: var(--c-accent);
    --bs-btn-hover-border-color: var(--c-accent);
    --bs-btn-active-color: var(--c-accent-ink);
    --bs-btn-active-bg: var(--c-accent);
    --bs-btn-active-border-color: var(--c-accent);
    --bs-btn-disabled-color: var(--c-text-3);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--c-border);
    --bs-btn-focus-shadow-rgb: var(--c-accent-rgb);
}

.btn-info {
    --bs-btn-color: var(--c-accent-ink);
    --bs-btn-bg: var(--c-accent);
    --bs-btn-border-color: var(--c-accent);
    --bs-btn-hover-color: var(--c-accent-ink);
    --bs-btn-hover-bg: var(--c-accent-hover);
    --bs-btn-hover-border-color: var(--c-accent-hover);
    --bs-btn-active-color: var(--c-accent-ink);
    --bs-btn-active-bg: var(--c-accent);
    --bs-btn-active-border-color: var(--c-accent);
}

.btn-outline-light,
.btn-outline-secondary,
.btn-secondary,
.btn-dark {
    --bs-btn-color: var(--c-text);
    --bs-btn-bg: var(--c-surface-2);
    --bs-btn-border-color: var(--c-border-strong);
    --bs-btn-hover-color: var(--c-text);
    --bs-btn-hover-bg: rgba(var(--c-text-rgb), 0.12);
    --bs-btn-hover-border-color: rgba(var(--c-text-rgb), 0.28);
    --bs-btn-active-color: var(--c-text);
    --bs-btn-active-bg: rgba(var(--c-text-rgb), 0.16);
    --bs-btn-active-border-color: rgba(var(--c-text-rgb), 0.32);
    --bs-btn-disabled-color: var(--c-text-3);
    --bs-btn-disabled-bg: var(--c-surface-2);
    --bs-btn-disabled-border-color: var(--c-border);
}

.btn-success {
    --bs-btn-color: #07170c;
    --bs-btn-bg: var(--c-success);
    --bs-btn-border-color: var(--c-success);
    --bs-btn-hover-color: #07170c;
    --bs-btn-hover-bg: var(--c-success);
    --bs-btn-hover-border-color: var(--c-success);
    --bs-btn-active-color: #07170c;
    --bs-btn-active-bg: var(--c-success);
    --bs-btn-disabled-color: #07170c;
    --bs-btn-disabled-bg: var(--c-success);
    --bs-btn-disabled-border-color: var(--c-success);
}

.btn-outline-success {
    --bs-btn-color: var(--c-success);
    --bs-btn-border-color: rgba(var(--c-success-rgb), 0.4);
    --bs-btn-hover-color: #07170c;
    --bs-btn-hover-bg: var(--c-success);
    --bs-btn-hover-border-color: var(--c-success);
    --bs-btn-active-color: #07170c;
    --bs-btn-active-bg: var(--c-success);
}

.btn-danger {
    --bs-btn-color: #1d0505;
    --bs-btn-bg: var(--c-danger);
    --bs-btn-border-color: var(--c-danger);
    --bs-btn-hover-color: #1d0505;
    --bs-btn-hover-bg: var(--c-danger);
    --bs-btn-hover-border-color: var(--c-danger);
    --bs-btn-active-color: #1d0505;
    --bs-btn-active-bg: var(--c-danger);
}

.btn-outline-danger {
    --bs-btn-color: var(--c-danger);
    --bs-btn-border-color: rgba(var(--c-danger-rgb), 0.4);
    --bs-btn-hover-color: #1d0505;
    --bs-btn-hover-bg: var(--c-danger);
    --bs-btn-hover-border-color: var(--c-danger);
    --bs-btn-active-color: #1d0505;
    --bs-btn-active-bg: var(--c-danger);
}

.btn-warning {
    --bs-btn-color: #1f1603;
    --bs-btn-bg: var(--c-warning);
    --bs-btn-border-color: var(--c-warning);
    --bs-btn-hover-color: #1f1603;
    --bs-btn-hover-bg: var(--c-warning);
    --bs-btn-hover-border-color: var(--c-warning);
    --bs-btn-active-color: #1f1603;
    --bs-btn-active-bg: var(--c-warning);
}

.btn-outline-warning {
    --bs-btn-color: var(--c-warning);
    --bs-btn-border-color: rgba(var(--c-warning-rgb), 0.4);
    --bs-btn-hover-color: #1f1603;
    --bs-btn-hover-bg: var(--c-warning);
    --bs-btn-hover-border-color: var(--c-warning);
    --bs-btn-active-color: #1f1603;
    --bs-btn-active-bg: var(--c-warning);
}

.text-bg-primary,
.text-bg-info {
    color: var(--c-accent-ink) !important;
    background-color: var(--c-accent) !important;
}

.text-bg-success { color: #07170c !important; background-color: var(--c-success) !important; }
.text-bg-warning { color: #1f1603 !important; background-color: var(--c-warning) !important; }
.text-bg-danger { color: #1d0505 !important; background-color: var(--c-danger) !important; }
.text-bg-secondary { color: var(--c-text) !important; background-color: var(--c-surface-2) !important; }

.nav-pills {
    --bs-nav-pills-link-active-bg: rgba(var(--c-accent-rgb), 0.16);
    --bs-nav-pills-link-active-color: var(--c-accent-hi);
}

.nav-link {
    --bs-nav-link-color: var(--c-text-2);
    --bs-nav-link-hover-color: var(--c-text);
}

.pagination {
    --bs-pagination-color: var(--c-text-2);
    --bs-pagination-bg: var(--c-surface);
    --bs-pagination-border-color: var(--c-border);
    --bs-pagination-hover-color: var(--c-text);
    --bs-pagination-hover-bg: var(--c-surface-2);
    --bs-pagination-hover-border-color: var(--c-border-strong);
    --bs-pagination-focus-color: var(--c-text);
    --bs-pagination-focus-bg: var(--c-surface-2);
    --bs-pagination-active-color: var(--c-accent-ink);
    --bs-pagination-active-bg: var(--c-accent);
    --bs-pagination-active-border-color: var(--c-accent);
    --bs-pagination-disabled-color: var(--c-text-3);
    --bs-pagination-disabled-bg: var(--c-surface);
    --bs-pagination-disabled-border-color: var(--c-border);
}

.dropdown-menu {
    --bs-dropdown-bg: var(--c-surface);
    --bs-dropdown-border-color: var(--c-border-strong);
    --bs-dropdown-link-color: var(--c-text);
    --bs-dropdown-link-hover-color: var(--c-text);
    --bs-dropdown-link-hover-bg: var(--c-surface-2);
    --bs-dropdown-link-active-color: var(--c-accent-ink);
    --bs-dropdown-link-active-bg: var(--c-accent);
    --bs-dropdown-divider-bg: var(--c-border);
}

.progress,
.progress-stacked {
    --bs-progress-bg: var(--c-surface-3);
    --bs-progress-bar-bg: var(--c-accent);
}

.form-check-input:checked {
    background-color: var(--c-accent);
    border-color: var(--c-accent);
}

.form-check-input:focus,
.form-control:focus,
.form-select:focus {
    border-color: rgba(var(--c-accent-rgb), 0.6);
    box-shadow: 0 0 0 0.2rem rgba(var(--c-accent-rgb), 0.22);
}

.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255,255,255,0.6%29'/%3e%3c/svg%3e");
}

.table-dark {
    --bs-table-color: var(--c-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--c-border);
    --bs-table-striped-bg: rgba(var(--c-text-rgb), 0.03);
    --bs-table-striped-color: var(--c-text);
    --bs-table-active-bg: rgba(var(--c-accent-rgb), 0.1);
    --bs-table-active-color: var(--c-text);
    --bs-table-hover-bg: rgba(var(--c-text-rgb), 0.04);
    --bs-table-hover-color: var(--c-text);
}

.alert-info,
.alert-primary {
    --bs-alert-color: var(--c-accent-hi);
    --bs-alert-bg: rgba(var(--c-accent-rgb), 0.1);
    --bs-alert-border-color: rgba(var(--c-accent-rgb), 0.3);
    --bs-alert-link-color: var(--c-accent-hi);
}

.alert-success {
    --bs-alert-color: var(--c-success);
    --bs-alert-bg: rgba(var(--c-success-rgb), 0.1);
    --bs-alert-border-color: rgba(var(--c-success-rgb), 0.3);
}

.alert-warning {
    --bs-alert-color: var(--c-warning);
    --bs-alert-bg: rgba(var(--c-warning-rgb), 0.1);
    --bs-alert-border-color: rgba(var(--c-warning-rgb), 0.3);
}

.alert-danger {
    --bs-alert-color: var(--c-danger);
    --bs-alert-bg: rgba(var(--c-danger-rgb), 0.1);
    --bs-alert-border-color: rgba(var(--c-danger-rgb), 0.3);
}

/* Bootstrap ships these as hard white; warm themes want warm white. */
.text-white { color: var(--c-text) !important; }
.text-white-50 { color: var(--c-text-2) !important; }
.text-muted,
.text-body-secondary { color: var(--c-text-2) !important; }
.text-secondary { color: var(--c-text-3) !important; }
.border-secondary { border-color: var(--c-border-strong) !important; }
.bg-dark { background-color: var(--c-surface-3) !important; }

/* Browser surfaces carry the palette too. */
::selection {
    background: rgba(var(--c-accent-rgb), 0.35);
    color: var(--c-text);
}

html {
    accent-color: var(--c-accent);
    scrollbar-color: rgba(var(--c-text-rgb), 0.18) transparent;
}

:focus-visible {
    outline-color: var(--c-accent);
}

/* ---------------------------------------------------------------------
   Theme picker (App/Views/_partials/theme_picker.php)
   --------------------------------------------------------------------- */
.theme-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.theme-swatch {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0.4rem 0.75rem 0.4rem 0.45rem;
    border: 1px solid var(--c-border-strong);
    border-radius: 8px;
    background: var(--c-surface-2);
    color: var(--c-text);
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.theme-swatch:hover {
    border-color: rgba(var(--c-text-rgb), 0.35);
}

.theme-swatch[aria-checked="true"] {
    border-color: var(--c-accent);
    box-shadow: inset 0 0 0 1px var(--c-accent);
}

.theme-swatch-chip {
    position: relative;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.theme-swatch-chip span {
    position: absolute;
    inset: 0;
}

.theme-swatch-chip span:nth-child(2) {
    inset: auto 0 0 auto;
    width: 50%;
    height: 50%;
}

.theme-swatch-name small {
    display: block;
    color: var(--c-text-3);
    font-size: 0.72rem;
    font-weight: 400;
}

.theme-picker--compact .theme-swatch {
    min-height: 36px;
    padding: 0.25rem;
}

.theme-picker--compact .theme-swatch-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}