/* Dark theme. Keep rules scoped so additional themes can coexist. */
:root[data-rr-theme="dark"] {
    color-scheme: dark;
    --rr-white: #171c22;
    --rr-card: #222a33;
    --rr-slate: #e9e8e3;
    --rr-muted: #b5bec7;
    --rr-border: #46515e;
    --rr-blue: #a6c3d4;
    --rr-blue-dark: #294452;
    --rr-burgundy: #e0a4b0;
    --rr-burgundy-dark: #59303c;
    --rr-light: #2a333e;
    /* Tack Room surfaces: --rr-blue / --rr-burgundy are pale accents in this
       theme, so leather surfaces get their own dark values. */
    --rr-page: var(--rr-white);
    --rr-leather: #3D5463;
    --rr-leather-deep: #1D2832;
    --rr-strap: #6A3341;
    --rr-strap-deep: #59303C;
    --rr-tint: #26303A;
    --rr-line: #3A4652;
    --rr-line-soft: #303A45;
    --rr-input-line: #4F5D6B;
    /* --rr-dark intentionally NOT overridden here: it's almost certainly used
       elsewhere as "dark text on a light-tinted chip/badge" (champagne/accent
       backgrounds that stay light even in dark mode). It was previously
       redefined to the exact same value as --rr-slate (a light color), which
       would make that text invisible against its own light background. */
    --rr-shadow: 0 10px 30px rgba(0,0,0,.2);
    --rr-shadow-lg: 0 20px 55px rgba(0,0,0,.3);
    --bs-body-bg: var(--rr-white);
    --bs-body-color: var(--rr-slate);
    --bs-secondary-color: var(--rr-muted);
    --bs-tertiary-bg: var(--rr-light);
    --bs-border-color: var(--rr-border);
    --bs-link-color: #a6c3d4;
    --bs-link-hover-color: #d5e5ee;
}
[data-rr-theme="dark"] body { background: var(--rr-white); color: var(--rr-slate); }
[data-rr-theme="dark"] :is(.card, .dashboard-card, .modal-content, .dropdown-menu, .list-group-item, .accordion-item) {
    background-color: var(--rr-card); color: var(--rr-slate); border-color: var(--rr-border);
}
[data-rr-theme="dark"] :is(.bg-white, .bg-light, .bg-body, .bg-body-tertiary) { background-color: var(--rr-card) !important; color: var(--rr-slate) !important; }
[data-rr-theme="dark"] :is(.text-dark, .text-body) { color: var(--rr-slate) !important; }
[data-rr-theme="dark"] :is(.text-muted, .text-body-secondary, .form-text, .muted) { color: var(--rr-muted) !important; }
[data-rr-theme="dark"] :is(.form-control, .form-select, .input-group-text) { background-color: #1b222b; color: var(--rr-slate); border-color: var(--rr-border); }
[data-rr-theme="dark"] :is(.form-control, .form-select):disabled { background-color: #303946; color: var(--rr-muted); }
[data-rr-theme="dark"] .form-control::placeholder { color: #a3afbb; opacity: 1; }
[data-rr-theme="dark"] .form-check-input { background-color: #1b222b; border-color: #8998a7; }
[data-rr-theme="dark"] .form-check-input:checked { background-color: #536b7a; }
[data-rr-theme="dark"] .table {
    --bs-table-bg: var(--rr-card); --bs-table-color: var(--rr-slate);
    --bs-table-border-color: var(--rr-border); --bs-table-striped-bg: #29323d;
    --bs-table-striped-color: var(--rr-slate); --bs-table-hover-bg: #34414e; --bs-table-hover-color: var(--rr-slate);
}


[data-rr-theme="dark"] :is(.table-light, .table thead) { --bs-table-bg: #303b48; --bs-table-color: var(--rr-slate); }
[data-rr-theme="dark"] .alert { background-color: #293440; color: #e3e9ef; border-color: #5a6c7d; }
[data-rr-theme="dark"] .alert-danger { background-color: #432931; color: #f5c4cd; border-color: #955766; }
[data-rr-theme="dark"] .alert-warning { background-color: #3a3324; color: #efdab0; border-color: #89744a; }
[data-rr-theme="dark"] .alert-success { background-color: #233b30; color: #c4e2cf; border-color: #547c64; }
[data-rr-theme="dark"] .dropdown-item { color: var(--rr-slate); }
[data-rr-theme="dark"] .dropdown-item:is(:hover, :focus, .active) { background: #354552; color: #fff; }
[data-rr-theme="dark"] .site-header .dropdown-item { color: var(--rr-slate); }
[data-rr-theme="dark"] .site-header .dropdown-item:is(:hover, :focus, .active) { background: #354552; color: #fff; }
[data-rr-theme="dark"] :is(.home-feature-card, .rulebook-category-card, .rulebook-sidebar, .rulebook-articles) { background: var(--rr-card); color: var(--rr-slate); }
[data-rr-theme="dark"] .text-primary { color: #a6c3d4 !important; }
[data-rr-theme="dark"] :is(.card-footer, .accordion-button, .page-link) { background: #2b3541; color: var(--rr-slate); border-color: var(--rr-border); }
[data-rr-theme="dark"] .btn-outline-secondary { --bs-btn-color: #c2cbd3; --bs-btn-border-color: #84919d; }
/* ---------------------------------------------------------------
   Brand monogram ("R&R" circle). It sets color: var(--rr-white)
   !important, meaning "light text" in app.css — but --rr-white
   means "page background" here, which is dark in this theme, so
   the text was going dark-on-dark. Force it back to the light
   (--rr-slate) text color.
   --------------------------------------------------------------- */
[data-rr-theme="dark"] :is(.rr-monogram, .rr-monogram-lg, .rr-brand-mark) { color: var(--rr-slate) !important; }

/* ---------------------------------------------------------------
   Dashboard balance chip. Boxed card in light mode (white bg,
   bordered) — give it the same look with dark-adapted colors.

   NOTE: .dashboard-stat (the Horses/Dogs/Entries/Wins tiles) is
   deliberately NOT touched here. app.css:3666 already overrides the
   older boxed-card .dashboard-stat (app.css:1342) with a transparent
   background and a thin champagne bottom border — that's the actual
   current light-mode design (no card at all), and it wins in light
   mode too. Forcing a dark card background here would fight that
   design instead of matching it, so dark mode should just leave
   background transparent and let the page's own dark background
   show through, same as light mode lets the white page show through.
   --------------------------------------------------------------- */
[data-rr-theme="dark"] .dashboard-balance { background: var(--rr-card); border-color: var(--rr-border); }
[data-rr-theme="dark"] :is(.dashboard-stat-note, .dashboard-balance > span:not(.currency-badge)) { color: var(--rr-muted); }

/* ---------------------------------------------------------------
   Champagne/brass/blue badges (e.g. the Merit Points pill). Their
   light-mode fill is color-mix(brand-color, white) — a pale wash
   meant to sit on a white card. Untouched, that wash stays bright
   white-ish and glares against a dark card. Swap it for a soft
   tinted-dark fill so the badge still reads as its brand color but
   fits the rest of the theme.
   --------------------------------------------------------------- */
[data-rr-theme="dark"] .champagne-badge { background-color: rgba(214, 191, 145, 0.14); border-color: var(--rr-champagne); color: #f1e2bd; }
[data-rr-theme="dark"] .brass-badge { background-color: rgba(183, 154, 99, 0.14); border-color: var(--rr-brass); color: #e3cf9e; }
[data-rr-theme="dark"] .blue-badge { background-color: rgba(166, 195, 212, 0.14); border-color: var(--rr-blue); color: var(--rr-blue); }
/* ---------------------------------------------------------------
   Dashboard hero banner (#dashboard-hero). This is meant to be a
   fixed, always-dark navy-blue band — same idea as the Horses/Dogs
   panels — but it was built with var(--rr-blue)/var(--rr-blue-dark)/
   var(--rr-white) instead of hardcoded colors. This theme redefines
   --rr-blue to a PALE accent blue (for text elsewhere) and --rr-white
   to near-black (the page background), so the "always dark" banner
   actually got lighter, and its white title/number text went
   dark-on-dark. Pin it back to the same fixed colors light mode
   uses, so it looks identical in both themes.
   --------------------------------------------------------------- */
[data-rr-theme="dark"] #dashboard-hero :is(.page-title, .dashboard-stat-value) { color: #FAF8F3; }
/* #dashboard-hero .btn-outline-primary ("Browse Shows") needs no entry
   here anymore — it's now a fixed blue fill in app.css itself, so it
   already looks identical in both themes without a dark-mode patch. */

/* ---------------------------------------------------------------
   Same var(--rr-white)-as-"always white text" bug, found in a sweep
   of every remaining use of that variable, in places that sit on
   their own fixed-dark surfaces (the site header, the default
   button fill) rather than on a surface this theme actually inverts.
   --------------------------------------------------------------- */
[data-rr-theme="dark"] .btn-rr-default { --bs-btn-color: #FAF8F3; --bs-btn-hover-color: #FAF8F3 !important; }
[data-rr-theme="dark"] .rr-account-trigger,
[data-rr-theme="dark"] .rr-account-trigger:hover,
[data-rr-theme="dark"] .rr-account-trigger:focus { color: #FAF8F3; }

@media print {
    :root[data-rr-theme="dark"] { --rr-white: #fff; --rr-card: #fff; --rr-slate: #111; --rr-muted: #555; --rr-border: #ccc; }
}