/* ==========================================================================
   RotoCore Brand Theme
   --------------------------------------------------------------------------
   Loaded AFTER the Sparrow theme.css / user.css (see home/base.html).

   The Sparrow build is Bootstrap 5.3 with a full CSS custom-property token
   layer (--sparrow-*). Components read those tokens, so retheming the whole
   site is done here by overriding tokens rather than editing the vendor CSS
   (which is S3-hosted and not in this repo).

   BRAND (sampled from static/img/logo/logo_dark.png + logo_light.png):
       #FE4E1C  orange    the mark
       #000000  black
       #FFFFFF  white

   Why dark is the canonical theme:
   Brand orange scores only 3.32:1 on white - it cannot carry text or links
   there. On a near-black surface it scores 5.71:1 and passes. The old theme
   fell back to blue (#045bc1) for exactly this reason, which is what pushed
   the UI off-brand. Dark surfaces are what make an orange primary viable.

   Blue is present as a cool NEUTRAL foundation (surfaces, borders) and as the
   informational accent only. Orange directs attention; blue supports it.
   Orange and blue are near-complements, so they are deliberately never given
   equal weight.
   ========================================================================== */

:root {
  /* ---- Brand ---- */
  --rc-orange: #FE4E1C;
  --rc-orange-hover: #FF6B3D;
  --rc-orange-active: #E23F10;
  --rc-orange-subtle: rgba(254, 78, 28, 0.14);
  --rc-orange-rgb: 254, 78, 28;

  /* ---- Cool neutral foundation (slate-blue, low saturation) ----
     Deliberately near-black: the page reads as black, and each surface step
     is small so panels separate by edge rather than by brightness. */
  --rc-bg: #050506;          /* page - effectively black */
  --rc-surface: #0C0C0F;     /* cards, panels */
  --rc-surface-2: #131318;   /* raised: modal headers, table headers */
  --rc-surface-3: #1C1C23;   /* hover / active rows */
  --rc-border: #24242C;
  --rc-border-strong: #33333D;

  --rc-text: #ECEAE6;
  --rc-text-muted: #A3A0AC;
  --rc-text-dim: #76737F;

  /* ---- Data / state accents, desaturated to sit beside orange ---- */
  --rc-info: #38BDF8;
  --rc-success: #4ADE80;
  --rc-warning: #FBBF24;
  --rc-danger: #F87171;       /* reserved: destructive actions + errors only */

  /* State colours used on *text*. On this near-black surface the values above
     are already legible, so these match; light mode darkens them. */
  --rc-success-ink: var(--rc-success);
  --rc-warning-ink: var(--rc-warning);
  --rc-danger-ink: var(--rc-danger);
  --rc-info-ink: var(--rc-info);
}

/* ==========================================================================
   1. Core token remap  (light + dark share brand accents)
   ========================================================================== */

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --sparrow-primary: var(--rc-orange);
  --sparrow-primary-rgb: var(--rc-orange-rgb);
  --sparrow-info: var(--rc-info);
  --sparrow-info-rgb: 56, 189, 248;
  --sparrow-success: var(--rc-success);
  --sparrow-success-rgb: 74, 222, 128;
  --sparrow-warning: var(--rc-warning);
  --sparrow-warning-rgb: 251, 191, 36;
  --sparrow-danger: var(--rc-danger);
  --sparrow-danger-rgb: 248, 113, 113;

  --sparrow-link-color: var(--rc-orange);
  --sparrow-link-hover-color: var(--rc-orange-hover);
  --sparrow-border-radius: 0.375rem;
}

/* ---- Light theme -------------------------------------------------------
   Orange alone on white is thin, and at 3.32:1 it cannot legally carry text
   or links. So light mode gets the same cool slate foundation as dark: a
   tinted (not white) page, ink-blue headings, and a DARKENED orange for text
   and links while fills keep the true brand color. Chrome stays near-black,
   which is what ties the two themes together.
   ------------------------------------------------------------------------ */
[data-bs-theme="light"] {
  --rc-bg: #F4F5F7;
  --rc-surface: #FFFFFF;
  --rc-surface-2: #EDEEF2;
  --rc-surface-3: #E4E6EC;
  --rc-border: #DDDFE6;
  --rc-border-strong: #C4C7D2;

  --rc-text: #14151A;
  --rc-text-muted: #565A66;
  --rc-text-dim: #767B88;

  /* Text-safe orange for light backgrounds (brand orange is 3.32:1 on white).
     Fills still use --rc-orange so the brand color stays intact. */
  --rc-orange-ink: #C23A0F;

  /* Text-safe state colours for light backgrounds. The dark-mode values are
     tuned for a near-black surface and wash out on white, so anything that
     colours *text* by state uses these; fills keep the --rc-* values. */
  --rc-success-ink: #18794E;
  --rc-warning-ink: #9A6700;
  --rc-danger-ink: #B42318;
  --rc-info-ink: #0B6E99;

  --sparrow-body-bg: var(--rc-bg);
  --sparrow-body-bg-rgb: 244, 245, 247;
  --sparrow-body-color: #2B2F3A;
  --sparrow-body-color-rgb: 43, 47, 58;
  --sparrow-emphasis-color: var(--rc-text);
  --sparrow-heading-color: var(--rc-text);
  --sparrow-secondary-color: var(--rc-text-muted);
  --sparrow-border-color: var(--rc-border);
  --sparrow-secondary-bg: var(--rc-surface-2);
  --sparrow-tertiary-bg: var(--rc-surface-2);

  --sparrow-card-bg: var(--rc-surface);
  --sparrow-card-border-color: var(--rc-border);
  --sparrow-card-cap-bg: var(--rc-surface-2);
  --sparrow-modal-bg: var(--rc-surface);

  --sparrow-link-color: var(--rc-orange-ink);
  --sparrow-link-hover-color: var(--rc-orange);
}

[data-bs-theme="light"] body { background-color: var(--rc-bg); }

[data-bs-theme="light"] .text-primary { color: var(--rc-orange-ink) !important; }
/* Same idea for the status colours: the tokens are dark-surface pastels, so
   as text on a light card they read at about 2.4:1. The ink shades exist
   for exactly this. */
[data-bs-theme="light"] .text-success { color: var(--rc-success-ink) !important; }
[data-bs-theme="light"] .text-danger  { color: var(--rc-danger-ink) !important; }
[data-bs-theme="light"] .text-warning { color: var(--rc-warning-ink) !important; }
[data-bs-theme="light"] .text-info    { color: var(--rc-info-ink) !important; }

/* Give light mode real depth instead of flat white panels. */
[data-bs-theme="light"] .card {
  border: 1px solid var(--rc-border);
  box-shadow: 0 1px 2px rgba(16, 18, 26, 0.04), 0 2px 8px rgba(16, 18, 26, 0.04);
}

[data-bs-theme="light"] .modal-header {
  background-color: var(--rc-surface-2);
  border-top: 3px solid var(--rc-orange);
}

/* Keep site chrome near-black in light mode - this is the through-line
   between the two themes and where the logo lives. */
[data-bs-theme="light"] .fancynavbar,
[data-bs-theme="light"] .fancynavbar-togglerbar {
  background-color: #0C0C0F;
}

[data-bs-theme="light"] .fancynav-link,
[data-bs-theme="light"] .fancynavbar-addon-item {
  color: #ECEAE6;
}

[data-bs-theme="light"] .fancynav-link:hover,
[data-bs-theme="light"] .fancynavbar-addon-item:hover {
  color: var(--rc-orange);
}

[data-bs-theme="light"] .fancynavbar-toggler-icon path { stroke: var(--rc-orange); }

/* Dark is the canonical theme. */
[data-bs-theme="dark"] {
  --sparrow-body-bg: var(--rc-bg);
  --sparrow-body-bg-rgb: 5, 5, 6;
  --sparrow-body-color: var(--rc-text);
  --sparrow-body-color-rgb: 236, 234, 230;
  --sparrow-emphasis-color: #FFFFFF;
  --sparrow-secondary-color: var(--rc-text-muted);
  --sparrow-tertiary-color: var(--rc-text-dim);
  --sparrow-border-color: var(--rc-border);
  --sparrow-border-color-translucent: rgba(255, 255, 255, 0.10);

  --sparrow-secondary-bg: var(--rc-surface);
  --sparrow-tertiary-bg: var(--rc-surface-2);

  --sparrow-card-bg: var(--rc-surface);
  --sparrow-card-color: var(--rc-text);
  --sparrow-card-border-color: var(--rc-border);
  --sparrow-card-cap-bg: var(--rc-surface-2);

  --sparrow-modal-bg: var(--rc-surface);
  --sparrow-modal-color: var(--rc-text);
  --sparrow-modal-border-color: var(--rc-border);
  --sparrow-modal-header-border-color: var(--rc-border);
  --sparrow-modal-footer-border-color: var(--rc-border);

  --sparrow-dropdown-bg: var(--rc-surface-2);
  --sparrow-dropdown-color: var(--rc-text);
  --sparrow-dropdown-border-color: var(--rc-border);
  --sparrow-dropdown-link-color: var(--rc-text);
  --sparrow-dropdown-link-hover-bg: var(--rc-surface-3);
  --sparrow-dropdown-link-hover-color: #FFFFFF;

  --sparrow-table-bg: transparent;
  --sparrow-table-color: var(--rc-text);
  --sparrow-table-border-color: var(--rc-border);
  --sparrow-table-striped-bg: rgba(255, 255, 255, 0.025);
  --sparrow-table-hover-bg: rgba(255, 255, 255, 0.05);

  --sparrow-heading-color: var(--rc-text);
}

/* ==========================================================================
   2. Buttons
   Bootstrap bakes literal hex into each variant's component-scoped vars, so
   overriding --sparrow-primary alone does NOT reach .btn-primary. The
   component vars have to be set directly.
   ========================================================================== */

.btn-primary {
  --sparrow-btn-color: #000;                /* 6.32:1 on brand orange; white is only 3.32:1 */
  --sparrow-btn-bg: var(--rc-orange);
  --sparrow-btn-border-color: var(--rc-orange);
  --sparrow-btn-hover-color: #000;
  --sparrow-btn-hover-bg: var(--rc-orange-hover);
  --sparrow-btn-hover-border-color: var(--rc-orange-hover);
  --sparrow-btn-focus-shadow-rgb: var(--rc-orange-rgb);
  --sparrow-btn-active-color: #000;
  --sparrow-btn-active-bg: var(--rc-orange-active);
  --sparrow-btn-active-border-color: var(--rc-orange-active);
  --sparrow-btn-disabled-color: #000;
  --sparrow-btn-disabled-bg: var(--rc-orange);
  --sparrow-btn-disabled-border-color: var(--rc-orange);
}

.btn-outline-primary {
  --sparrow-btn-color: var(--rc-orange);
  --sparrow-btn-border-color: var(--rc-orange);
  --sparrow-btn-hover-color: #000;
  --sparrow-btn-hover-bg: var(--rc-orange);
  --sparrow-btn-hover-border-color: var(--rc-orange);
  --sparrow-btn-focus-shadow-rgb: var(--rc-orange-rgb);
  --sparrow-btn-active-color: #000;
  --sparrow-btn-active-bg: var(--rc-orange);
  --sparrow-btn-active-border-color: var(--rc-orange);
  --sparrow-btn-disabled-color: var(--rc-orange);
}

/* user.css paints .btn-outline-primary transparent in dark mode (and again
   inside .btn-group) with more weight than Bootstrap's .btn.active, so a
   selected lineup-count preset lost its fill there. Pin the active state. */
[data-bs-theme="dark"] .btn-outline-primary.active,
[data-bs-theme="dark"] .btn-group .btn-outline-primary.active {
  color: #000;
  background-color: var(--rc-orange);
  border-color: var(--rc-orange);
}

/* btn-warning was the de-facto brand CTA across the marketing pages and the
   footer. Fold it into brand orange so those keep working unchanged. */
.btn-warning {
  --sparrow-btn-color: #000;
  --sparrow-btn-bg: var(--rc-orange);
  --sparrow-btn-border-color: var(--rc-orange);
  --sparrow-btn-hover-color: #000;
  --sparrow-btn-hover-bg: var(--rc-orange-hover);
  --sparrow-btn-hover-border-color: var(--rc-orange-hover);
  --sparrow-btn-focus-shadow-rgb: var(--rc-orange-rgb);
  --sparrow-btn-active-color: #000;
  --sparrow-btn-active-bg: var(--rc-orange-active);
  --sparrow-btn-active-border-color: var(--rc-orange-active);
  --sparrow-btn-disabled-color: #000;
  --sparrow-btn-disabled-bg: var(--rc-orange);
  --sparrow-btn-disabled-border-color: var(--rc-orange);
}

/* Game style toggle (Classic / Captain Mode) on the optimizer: type in the
   page's text colour rather than orange, so it reads like the labels around
   it. The orange border and the orange fill still mark the selection. */
.rc-game-style .btn-outline-primary {
  --sparrow-btn-color: var(--rc-text);
  --sparrow-btn-hover-color: var(--rc-text);
  --sparrow-btn-active-color: var(--rc-text);
  --sparrow-btn-disabled-color: var(--rc-text);
}
.rc-game-style .btn-primary {
  --sparrow-btn-color: var(--rc-text);
  --sparrow-btn-hover-color: var(--rc-text);
  --sparrow-btn-active-color: var(--rc-text);
  --sparrow-btn-disabled-color: var(--rc-text);
}
/* user.css paints these two variants directly in dark mode (orange type on
   the outline, white !important on the fill), which the component vars
   above cannot reach, so the colour is pinned here with the same weight. */
[data-bs-theme="dark"] .rc-game-style .btn-outline-primary,
[data-bs-theme="dark"] .rc-game-style .btn-primary,
[data-bs-theme="dark"] .rc-game-style .btn:hover {
  color: var(--rc-text) !important;
}

/* In a .btn-group Bootstrap overlaps neighbouring borders by 1px and the
   later button paints on top, so a brand-orange outline next to a grey one
   lost its right edge. Lift the orange outlines so their border always wins. */
.btn-group > .btn-outline-primary {
  position: relative;
  z-index: 1;
}

/* Lineup editor headline count: the one number the user must never lose
   track of while trimming a build. Standalone block, not part of the
   muted stats line. */
.rc-team-count {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 7.5rem;
  padding: 0.375rem 1rem;
  border: 1px solid var(--rc-border-strong);
  border-top: 3px solid var(--rc-orange);
  border-radius: 0.375rem;
  background-color: var(--rc-surface-2);
  color: var(--rc-text);
  white-space: nowrap;
}

.rc-team-count-num {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--rc-orange);
  font-variant-numeric: tabular-nums;
}

.rc-team-count-label {
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rc-text-muted);
}

[data-bs-theme="dark"] .btn-outline-dark,
[data-bs-theme="dark"] .btn-outline-secondary {
  --sparrow-btn-color: var(--rc-text);
  --sparrow-btn-border-color: var(--rc-border-strong);
  --sparrow-btn-hover-color: #FFFFFF;
  --sparrow-btn-hover-bg: var(--rc-surface-3);
  --sparrow-btn-hover-border-color: var(--rc-border-strong);
  --sparrow-btn-active-color: #FFFFFF;
  --sparrow-btn-active-bg: var(--rc-surface-3);
  --sparrow-btn-active-border-color: var(--rc-border-strong);
}

[data-bs-theme="dark"] .btn-dark {
  --sparrow-btn-color: #000;
  --sparrow-btn-bg: var(--rc-text);
  --sparrow-btn-border-color: var(--rc-text);
  --sparrow-btn-hover-color: #000;
  --sparrow-btn-hover-bg: #FFFFFF;
  --sparrow-btn-hover-border-color: #FFFFFF;
  --sparrow-btn-active-color: #000;
  --sparrow-btn-active-bg: #FFFFFF;
  --sparrow-btn-active-border-color: #FFFFFF;
}

/* Contextual fills need black text, not white - all four are light colors. */
.btn-info, .btn-success, .btn-danger {
  --sparrow-btn-color: #000;
  --sparrow-btn-hover-color: #000;
  --sparrow-btn-active-color: #000;
}

/* ==========================================================================
   3. Focus rings - brand orange, consistent everywhere
   ========================================================================== */

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--rc-orange);
  box-shadow: 0 0 0 0.2rem rgba(var(--rc-orange-rgb), 0.25);
}

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

.btn:focus-visible,
.btn.focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--rc-orange-rgb), 0.35);
}

:focus-visible {
  outline-color: var(--rc-orange);
}

/* ==========================================================================
   4. Form controls on dark
   Django's stock auth forms render bare inputs; see accounts/forms.py for the
   form-control classes. These rules make them legible on dark surfaces.
   ========================================================================== */

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: var(--rc-surface-2);
  border-color: var(--rc-border-strong);
  color: var(--rc-text);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: var(--rc-surface-2);
  color: var(--rc-text);
}

[data-bs-theme="dark"] .form-control::placeholder {
  color: var(--rc-text-dim);
}

[data-bs-theme="dark"] .input-group-text {
  background-color: var(--rc-surface-3);
  border-color: var(--rc-border-strong);
  color: var(--rc-text-muted);
}

/* Django renders auth forms as <p> stacks with bare labels and helptext. */
[data-bs-theme="dark"] .card label {
  color: var(--rc-text);
  font-weight: 500;
  margin-bottom: 0.25rem;
}

[data-bs-theme="dark"] .helptext,
[data-bs-theme="dark"] .form-text {
  color: var(--rc-text-dim);
  font-size: 0.8125rem;
  display: block;
  margin-top: 0.25rem;
}

[data-bs-theme="dark"] .errorlist {
  color: var(--rc-danger);
  list-style: none;
  padding-left: 0;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

/* ==========================================================================
   5. Surfaces: cards, modals, tables, nav
   ========================================================================== */

[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-light {
  background-color: var(--rc-surface) !important;
  color: var(--rc-text);
}

[data-bs-theme="dark"] .bg-black,
[data-bs-theme="dark"] .bg-dark {
  background-color: var(--rc-bg) !important;
}

[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] .text-900,
[data-bs-theme="dark"] .text-1000 {
  color: var(--rc-text) !important;
}

[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .text-500,
[data-bs-theme="dark"] .text-600,
[data-bs-theme="dark"] .text-700 {
  color: var(--rc-text-muted) !important;
}

[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-top,
[data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-start,
[data-bs-theme="dark"] .border-end,
[data-bs-theme="dark"] .border-secondary,
[data-bs-theme="dark"] .border-dark,
[data-bs-theme="dark"] .border-700 {
  border-color: var(--rc-border) !important;
}

/* Modal headers: one neutral treatment sitewide, with a thin brand rule.
   Previously 2 of 7 modals had solid fills in two different colors
   (bg-primary and bg-danger) while five were plain. */
.modal-header {
  background-color: var(--rc-surface-2);
  border-bottom: 1px solid var(--rc-border);
  border-top: 3px solid var(--rc-orange);
}

.modal-header.bg-primary,
.modal-header.bg-danger,
.modal-header.bg-success,
.modal-header.bg-info,
.modal-header.bg-warning {
  background-color: var(--rc-surface-2) !important;
  color: var(--rc-text) !important;
}

/* The error modal keeps a red rule - that one IS semantic. */
.modal-header.bg-danger {
  border-top-color: var(--rc-danger);
}

[data-bs-theme="dark"] .modal-header .btn-close,
[data-bs-theme="dark"] .btn-close {
  filter: invert(1) grayscale(1) brightness(1.6);
}

/* The home page's "what you control" icons are black line-art SVGs served
   as <img>; flip them to white on the dark theme. */
[data-bs-theme="dark"] #defaultServices img {
  filter: invert(1) brightness(1.3);
}

[data-bs-theme="dark"] .table > :not(caption) > * > * {
  background-color: transparent;
  color: var(--rc-text);
  border-bottom-color: var(--rc-border);
}

/* Table header variants -> one neutral treatment. */
[data-bs-theme="dark"] .table-dark > :not(caption) > * > *,
[data-bs-theme="dark"] .table-primary > :not(caption) > * > *,
[data-bs-theme="dark"] .table-light > :not(caption) > * > * {
  background-color: var(--rc-surface-2) !important;
  color: var(--rc-text) !important;
  border-bottom-color: var(--rc-border) !important;
}

[data-bs-theme="dark"] .nav-tabs {
  border-bottom-color: var(--rc-border);
}

[data-bs-theme="dark"] .nav-tabs .nav-link {
  color: var(--rc-text-muted);
  border-color: transparent;
}

[data-bs-theme="dark"] .nav-tabs .nav-link:hover {
  color: var(--rc-text);
  border-color: transparent;
  background-color: var(--rc-surface-2);
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active {
  color: var(--rc-orange);
  background-color: transparent;
  border-color: transparent;
  box-shadow: inset 0 -2px 0 var(--rc-orange);
}

[data-bs-theme="dark"] .list-group-item {
  background-color: var(--rc-surface);
  border-color: var(--rc-border);
  color: var(--rc-text);
}

[data-bs-theme="dark"] .accordion-item,
[data-bs-theme="dark"] .accordion-button {
  background-color: var(--rc-surface);
  border-color: var(--rc-border);
  color: var(--rc-text);
}

[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: var(--rc-surface-2);
  color: var(--rc-orange);
  box-shadow: none;
}

[data-bs-theme="dark"] .accordion-button::after {
  filter: invert(1) grayscale(1) brightness(1.4);
}

[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .fancy-dropdown-menu {
  background-color: var(--rc-surface-2);
  border: 1px solid var(--rc-border);
}

/* ==========================================================================
   6. Calming saturated fills
   Semantic colors were being used decoratively (four stat cards tinted
   blue/green/cyan/yellow purely because there were four of them). Tinted
   surface + colored top rule keeps the distinction without the shouting.
   ========================================================================== */

.stats-overview-card,
.stats-overview-card.bg-primary,
.stats-overview-card.bg-success,
.stats-overview-card.bg-info,
.stats-overview-card.bg-warning {
  background-color: var(--rc-surface-2) !important;
  color: var(--rc-text) !important;
  border: 1px solid var(--rc-border);
  border-top: 3px solid var(--rc-border-strong);
}

.stats-overview-card.bg-primary  { border-top-color: var(--rc-orange); }
.stats-overview-card.bg-success  { border-top-color: var(--rc-success); }
.stats-overview-card.bg-info     { border-top-color: var(--rc-info); }
.stats-overview-card.bg-warning  { border-top-color: var(--rc-warning); }

.stats-overview-card .card-title i,
.stats-overview-card h3 {
  color: var(--rc-text);
}

/* Solid card headers -> neutral surface + accent rule. */
[data-bs-theme="dark"] .card-header.bg-primary,
[data-bs-theme="dark"] .card-header.bg-success,
[data-bs-theme="dark"] .card-header.bg-info,
[data-bs-theme="dark"] .card-header.bg-warning,
[data-bs-theme="dark"] .card-header.bg-secondary {
  background-color: var(--rc-surface-2) !important;
  color: var(--rc-text) !important;
  border-bottom: 1px solid var(--rc-border);
  box-shadow: inset 0 3px 0 var(--rc-border-strong);
}

[data-bs-theme="dark"] .card-header.bg-primary   { box-shadow: inset 0 3px 0 var(--rc-orange); }
[data-bs-theme="dark"] .card-header.bg-success   { box-shadow: inset 0 3px 0 var(--rc-success); }
[data-bs-theme="dark"] .card-header.bg-info      { box-shadow: inset 0 3px 0 var(--rc-info); }
[data-bs-theme="dark"] .card-header.bg-warning   { box-shadow: inset 0 3px 0 var(--rc-warning); }

/* Badges: keep the hue as a signal, drop the saturated fill. */
[data-bs-theme="dark"] .badge.bg-primary,
[data-bs-theme="dark"] .badge.bg-success,
[data-bs-theme="dark"] .badge.bg-info,
[data-bs-theme="dark"] .badge.bg-warning,
[data-bs-theme="dark"] .badge.bg-danger,
[data-bs-theme="dark"] .badge.bg-secondary,
[data-bs-theme="dark"] .badge.bg-light {
  background-color: var(--rc-surface-3) !important;
  border: 1px solid var(--rc-border-strong);
  font-weight: 600;
}

[data-bs-theme="dark"] .badge.bg-primary   { color: var(--rc-orange) !important; }
[data-bs-theme="dark"] .badge.bg-success   { color: var(--rc-success) !important; }
[data-bs-theme="dark"] .badge.bg-info      { color: var(--rc-info) !important; }
[data-bs-theme="dark"] .badge.bg-warning   { color: var(--rc-warning) !important; }
[data-bs-theme="dark"] .badge.bg-danger    { color: var(--rc-danger) !important; }
[data-bs-theme="dark"] .badge.bg-secondary,
[data-bs-theme="dark"] .badge.bg-light     { color: var(--rc-text-muted) !important; }

/* Light mode keeps the filled badge, but the pastel fills with white type
   read at 1.7:1 (green) and 2.8:1 (red). Fill with the ink shades instead.
   bg-warning badges carry text-dark, so the amber fill is left alone. */
[data-bs-theme="light"] .badge.bg-success { background-color: var(--rc-success-ink) !important; }
[data-bs-theme="light"] .badge.bg-danger  { background-color: var(--rc-danger-ink) !important; }
[data-bs-theme="light"] .badge.bg-info    { background-color: var(--rc-info-ink) !important; }

/* Bootstrap's .badge sets --sparrow-badge-color (white) at a specificity that
   beats a single custom class, so custom badges need .badge.<name> to win.
   Without this the day pill renders white-on-pale-orange and is unreadable. */
/* "Featured" slate on the selection cards: the brand orange. */
.badge.badge-featured {
  background-color: var(--rc-orange) !important;
  color: #fff !important;
  font-weight: 600;
}

.badge.badge-day-range {
  background-color: var(--rc-orange-subtle) !important;
  color: var(--rc-orange) !important;
  border: 1px solid rgba(var(--rc-orange-rgb), 0.35);
  font-weight: 600;
}

[data-bs-theme="light"] .badge.badge-day-range {
  background-color: rgba(var(--rc-orange-rgb), 0.10) !important;
  color: var(--rc-orange-ink) !important;
  border-color: rgba(var(--rc-orange-rgb), 0.30);
}

/* .text-dark paired with a fill breaks once the fill becomes a dark surface. */
[data-bs-theme="dark"] .badge.bg-warning.text-dark,
[data-bs-theme="dark"] .badge.bg-info.text-dark,
[data-bs-theme="dark"] .badge.bg-success.text-dark {
  color: var(--rc-warning) !important;
}

[data-bs-theme="dark"] .badge.bg-info.text-dark    { color: var(--rc-info) !important; }
[data-bs-theme="dark"] .badge.bg-success.text-dark { color: var(--rc-success) !important; }

/* Alerts: tinted surface + left rule instead of a full colored block. */
[data-bs-theme="dark"] .alert {
  background-color: var(--rc-surface-2);
  border: 1px solid var(--rc-border);
  border-left: 3px solid var(--rc-border-strong);
  color: var(--rc-text);
}

[data-bs-theme="dark"] .alert-primary   { border-left-color: var(--rc-orange); }
[data-bs-theme="dark"] .alert-info      { border-left-color: var(--rc-info); }
[data-bs-theme="dark"] .alert-success   { border-left-color: var(--rc-success); }
[data-bs-theme="dark"] .alert-warning   { border-left-color: var(--rc-warning); }
[data-bs-theme="dark"] .alert-danger    { border-left-color: var(--rc-danger); }
[data-bs-theme="dark"] .alert-secondary,
[data-bs-theme="dark"] .alert-light     { border-left-color: var(--rc-border-strong); }

[data-bs-theme="dark"] .alert .alert-link { color: var(--rc-orange); }

/* Text accents keep meaning but stop competing. */
[data-bs-theme="dark"] .text-primary { color: var(--rc-orange) !important; }
[data-bs-theme="dark"] .text-info    { color: var(--rc-info) !important; }
[data-bs-theme="dark"] .text-success { color: var(--rc-success) !important; }
[data-bs-theme="dark"] .text-warning { color: var(--rc-warning) !important; }
[data-bs-theme="dark"] .text-danger  { color: var(--rc-danger) !important; }

[data-bs-theme="dark"] .progress {
  background-color: var(--rc-surface-3);
}

[data-bs-theme="dark"] .progress-bar {
  background-color: var(--rc-orange);
}

[data-bs-theme="dark"] .progress-bar.bg-success { background-color: var(--rc-success); }
[data-bs-theme="dark"] .progress-bar.bg-info    { background-color: var(--rc-info); }
[data-bs-theme="dark"] .progress-bar.bg-warning { background-color: var(--rc-warning); }

[data-bs-theme="dark"] .spinner-border.text-primary { color: var(--rc-orange) !important; }

/* ==========================================================================
   7. Site chrome: nav + footer
   ========================================================================== */

[data-bs-theme="dark"] .fancynavbar,
[data-bs-theme="dark"] .fancynavbar-togglerbar {
  background-color: var(--rc-bg);
}

[data-bs-theme="dark"] .fancynavbar-collapse {
  background-color: var(--rc-surface);
}

[data-bs-theme="dark"] .fancynav-link,
[data-bs-theme="dark"] .fancynavbar-addon-item {
  color: var(--rc-text);
}

[data-bs-theme="dark"] .fancynav-link:hover,
[data-bs-theme="dark"] .fancynav-link:focus,
[data-bs-theme="dark"] .fancynavbar-addon-item:hover,
[data-bs-theme="dark"] .fancy-dropdown-item:hover {
  color: var(--rc-orange);
}

[data-bs-theme="dark"] .fancynavbar-toggler-icon path {
  stroke: var(--rc-orange);
}

[data-bs-theme="dark"] .footer {
  background-color: var(--rc-bg) !important;
  border-top: 1px solid var(--rc-border);
}

[data-bs-theme="dark"] .footer .text-warning {
  color: var(--rc-orange) !important;
}

/* Footer links carry .text-500/.text-600, and the dark-mode rule in section
   4 paints every .text-500 muted with !important, so links were the same
   grey as the text beside them. Give them the dark theme's link colour;
   .hover-text-white still handles hover. */
[data-bs-theme="dark"] .footer a.text-500,
[data-bs-theme="dark"] .footer a.text-600 {
  color: var(--sparrow-link-color, var(--rc-orange)) !important;
}
[data-bs-theme="dark"] .footer a.text-500:hover,
[data-bs-theme="dark"] .footer a.text-600:hover {
  color: var(--rc-text) !important;
}

/* The footer is black in both themes, but .text-300 has no definition, so
   the season-pass card's paragraph inherited the light-mode body colour and
   read dark grey on black. Pin it to a light grey in both themes. */
.footer .text-300 { color: #CFCFCF; }

/* Hero images: darken so white type stays readable on the new dark ground.
   These images are being replaced, but this keeps them usable meanwhile. */
[data-bs-theme="dark"] .bg-holder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 5, 6, 0.62), rgba(5, 5, 6, 0.88));
  pointer-events: none;
}

[data-bs-theme="dark"] .preloader {
  background-color: var(--rc-bg);
}

/* ==========================================================================
   8. AG-Grid - align the data grid with the theme
   ========================================================================== */

[data-bs-theme="dark"] .ag-theme-alpine,
.ag-theme-alpine-dark {
  --ag-background-color: var(--rc-surface);
  --ag-foreground-color: var(--rc-text);
  --ag-header-background-color: var(--rc-surface-2);
  --ag-header-foreground-color: var(--rc-text-muted);
  --ag-border-color: var(--rc-border);
  --ag-row-border-color: var(--rc-border);
  --ag-odd-row-background-color: transparent;
  --ag-row-hover-color: var(--rc-surface-3);
  --ag-selected-row-background-color: rgba(var(--rc-orange-rgb), 0.16);
  --ag-range-selection-border-color: var(--rc-orange);
  --ag-input-focus-border-color: var(--rc-orange);
  --ag-checkbox-checked-color: var(--rc-orange);
  --ag-alpine-active-color: var(--rc-orange);
}

/* Let a cell renderer colour its own text.
   user.css carries blanket dark-mode rules that paint every descendant of a
   grid cell, the strongest being

     [data-bs-theme="dark"] .ag-theme-alpine-dark
       .ag-cell:not([col-id="poa"]):not([col-id="captain_flex"]) *
     { color: var(--sparrow-body-color) !important }

   added back when the grid theme did not auto-switch. Being !important it
   beats even an inline style, so a cell that encodes meaning in colour (OPRK's
   matchup quality) rendered plain white in dark mode. Note the grid element
   carries .ag-theme-alpine-dark at runtime -- JS swaps the class -- even
   though the template markup says .ag-theme-alpine.

   To win, this has to match that rule's specificity and then some, and this
   file loads after user.css. Hence the :not() pair is repeated: it is not
   decoration, it is what carries the specificity. Scoped to elements that
   opt in with .rc-cell-ink, so the rest of the grid keeps the default
   foreground and whatever the original rule was fixing stays fixed. */
[data-bs-theme="dark"] .ag-theme-alpine-dark
  .ag-cell:not([col-id="poa"]):not([col-id="captain_flex"]) .rc-cell-ink,
[data-bs-theme="dark"] .ag-theme-alpine
  .ag-cell:not([col-id="poa"]):not([col-id="captain_flex"]) .rc-cell-ink,
.ag-theme-alpine-dark .ag-cell .rc-cell-ink,
.ag-theme-alpine .ag-cell .rc-cell-ink,
[data-bs-theme="dark"] .ag-theme-alpine-dark
  .ag-cell:not([col-id="poa"]):not([col-id="captain_flex"]) .rc-cell-ink *,
[data-bs-theme="dark"] .ag-theme-alpine
  .ag-cell:not([col-id="poa"]):not([col-id="captain_flex"]) .rc-cell-ink *,
.ag-theme-alpine-dark .ag-cell .rc-cell-ink *,
.ag-theme-alpine .ag-cell .rc-cell-ink * {
  color: var(--rc-cell-ink, inherit) !important;
}

/* The `*` variants matter for icons. Font Awesome's JS build swaps <i> for
   an <svg> whose <path> is fill="currentColor", and the blanket rule's own
   `*` reaches that <path>, so the svg was the right colour while its path
   painted white. Descendants of an opted-in element follow its ink. */

/* ==========================================================================
   Stack cards - which shapes are on, and what they add up to
   ========================================================================== */

/* An enabled stack reads at a glance: the card is the control, so the whole
   card carries the state rather than just the checkbox. Border plus a tinted
   ground, not colour alone, so it still reads when the orange is hard to
   distinguish. */
.rc-stack-card {
  transition: border 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

/* The shorthand, and !important, because a .card in this theme takes its
   border from a --sparrow-card-* variable set further down the cascade; a
   longhand border-color here is simply ignored. */
.rc-stack-card.rc-stack-card-on {
  border: 1px solid var(--rc-orange) !important;
  background-color: rgba(var(--rc-orange-rgb), 0.08) !important;
  box-shadow: 0 0 0 1px rgba(var(--rc-orange-rgb), 0.45);
}

.rc-stack-card-on .form-check-label {
  color: var(--rc-orange-ink, var(--rc-orange));
}

/* Under the stack cards, one line: the running total, the Include RBs
   toggle, and the bring-back control, wrapping only when the panel is too
   narrow to hold them. */
.rc-stack-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}

.rc-stack-row-item {
  display: inline-flex;
  align-items: center;
}

/* The bring-back control is a card like the shapes so its on-state reads
   the same way, but padded to sit on the row rather than stack in a grid. */
.rc-bring-back {
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--rc-border);
  border-radius: 0.5rem;
}

.rc-bring-back .form-check {
  margin-right: 0.25rem;
}

/* Bring-back Min / Max: two one-digit selects, sized to their content so the
   pair sits on one line beside the label. */
.rc-bring-back-select {
  width: auto;
  min-width: 4rem;
}

/* Alpine hides x-cloak elements until it has started, so the popover
   cannot flash open on load. */
[x-cloak] {
  display: none !important;
}

/* The info button and the popover it opens. The popover is anchored to the
   button and themed from the panel's own variables rather than Bootstrap's
   popover, so it reads the same in both themes. */
.rc-stack-help {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.rc-stack-help-btn {
  border: 0;
  background: transparent;
  padding: 0 0.25rem;
  line-height: 1;
  color: var(--rc-text-muted);
  cursor: pointer;
}

.rc-stack-help-btn:hover,
.rc-stack-help-btn:focus-visible,
.rc-stack-help-btn[aria-expanded="true"] {
  color: var(--rc-orange);
}

.rc-stack-help-pop {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 1060;
  width: min(26rem, 80vw);
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--rc-border-strong);
  border-radius: 0.5rem;
  background: var(--rc-surface-2);
  color: var(--rc-text);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  font-size: 0.8125rem;
  line-height: 1.4;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
}

.rc-stack-help-pop p {
  margin-bottom: 0.5rem;
}

/* The total is the number that decides whether the build is valid, so it is
   sized to be read from across the panel rather than tucked into the
   footnotes. */
/* Sits directly under the stack cards, reading left to right with them. */
.rc-stack-total {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.rc-stack-total-label {
  font-size: 0.8125rem;
  color: var(--rc-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rc-stack-total-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--rc-text);
  font-variant-numeric: tabular-nums;
}

.rc-stack-total-note {
  font-size: 0.75rem;
  color: var(--rc-text-dim);
}

/* Over budget: the server will refuse the build, so say so here first.
   !important for the same reason the cards need it -- a blanket dark-mode
   rule in user.css paints text in this panel and wins on specificity. */
.rc-stack-total.rc-stack-total-over .rc-stack-total-value,
.rc-stack-total.rc-stack-total-over .rc-stack-total-label,
.rc-stack-total.rc-stack-total-over .rc-stack-total-note {
  color: var(--rc-danger-ink, #B42318) !important;
}

/* Compare grids: a fixed frame with internal scroll, side by side. */
#comparisonGridLeft,
#comparisonGridRight {
  height: min(1050px, calc(100vh - 240px));
  min-height: 420px;
}

/* ==========================================================================
   9. Auth shell - one treatment for login / signup / reset / verify
   Replaces the two competing identities (signup.css navy gradient vs the
   wood-photo hero). No imagery, so it needs no asset work.
   ========================================================================== */

.rc-auth {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  background-color: var(--rc-bg);
}

/* The same turf photo and 0.55 overlay the marketing pages use
   (home/photo_page.html, .bg-holder.overlay-1). The image URL comes from
   --rc-photo-turf, set on <main> in base.html via s3_static, so this file
   never names the bucket. Without the variable the page is plain --rc-bg. */
.rc-auth::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--rc-photo-turf, none) center / cover no-repeat;
  background-attachment: fixed;
}

.rc-auth::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.rc-auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  background-color: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-top: 3px solid var(--rc-orange);
  border-radius: 0.5rem;
  padding: 2.5rem;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5);
}

.rc-auth-card.rc-auth-wide { max-width: 1140px; }
.rc-auth-card.rc-auth-mid  { max-width: 620px; }

.rc-auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--rc-text);
}

.rc-auth-brand img { width: 32px; height: 32px; }
.rc-auth-brand .rc-mark { color: var(--rc-orange); }

.rc-auth-title {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--rc-text);
  margin-bottom: 0.375rem;
  text-align: center;
}

.rc-auth-sub {
  color: var(--rc-text-muted);
  font-size: 0.9375rem;
  text-align: center;
  margin-bottom: 1.75rem;
}

.rc-auth-card .form-control {
  padding: 0.6rem 0.85rem;
  margin-bottom: 0.25rem;
}

.rc-auth-card p { margin-bottom: 1rem; }

.rc-auth-footer {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rc-border);
  text-align: center;
  color: var(--rc-text-muted);
  font-size: 0.9375rem;
}

.rc-auth-footer a,
.rc-auth-card .form-check-label a,
.rc-auth-card .form-text a { color: var(--rc-orange); text-decoration: none; }
.rc-auth-footer a:hover,
.rc-auth-card .form-check-label a:hover,
.rc-auth-card .form-text a:hover { text-decoration: underline; }

.rc-auth-icon {
  font-size: 3rem;
  display: block;
  text-align: center;
  margin-bottom: 1.25rem;
  color: var(--rc-orange);
}

.rc-auth-icon.is-success { color: var(--rc-success); }
.rc-auth-icon.is-danger  { color: var(--rc-danger); }

@media (max-width: 576px) {
  .rc-auth { padding: 1.5rem 1rem; }
  .rc-auth::before { background-attachment: scroll; }
  .rc-auth-card { padding: 1.75rem 1.25rem; }
}

/* ==========================================================================
   10. Icon tiles
   Bare 3x FontAwesome glyphs in four different hues (green/cyan/yellow/orange,
   chosen only because there were four cards) read as generic clip-art. A
   contained tile with one brand accent gives them structure and weight; the
   ICON carries the meaning, not the color.
   ========================================================================== */

.rc-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  font-size: 1.375rem;
  color: var(--rc-orange);
  background: linear-gradient(150deg,
              rgba(var(--rc-orange-rgb), 0.16),
              rgba(var(--rc-orange-rgb), 0.06));
  border: 1px solid rgba(var(--rc-orange-rgb), 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.rc-icon-tile-lg {
  width: 88px;
  height: 88px;
  border-radius: 18px;
  font-size: 2.25rem;
}

/* Inline variant: sits beside a heading in a flex row (features page). */
.rc-icon-tile-sm {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  font-size: 1.0625rem;
  flex-shrink: 0;
}

/* Step numerals (guide page) reuse the tile shape so the numbered walkthrough
   matches the icon language instead of being oversized bare digits. */
.rc-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--rc-orange);
  background: linear-gradient(150deg,
              rgba(var(--rc-orange-rgb), 0.16),
              rgba(var(--rc-orange-rgb), 0.06));
  border: 1px solid rgba(var(--rc-orange-rgb), 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

[data-bs-theme="light"] .rc-step-num { color: var(--rc-orange-ink); }

.card:hover .rc-icon-tile,
a:hover .rc-icon-tile {
  transform: translateY(-2px);
  border-color: rgba(var(--rc-orange-rgb), 0.55);
  background: linear-gradient(150deg,
              rgba(var(--rc-orange-rgb), 0.24),
              rgba(var(--rc-orange-rgb), 0.10));
}

[data-bs-theme="light"] .rc-icon-tile { color: var(--rc-orange-ink); }

/* Quick-link cards: give the hover state real feedback. */
.hover-lift {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.hover-lift:hover { transform: translateY(-3px); }

[data-bs-theme="dark"] .card.hover-lift {
  border: 1px solid var(--rc-border) !important;
}

[data-bs-theme="dark"] .card.hover-lift:hover {
  border-color: rgba(var(--rc-orange-rgb), 0.45) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

[data-bs-theme="light"] .card.hover-lift:hover {
  border-color: rgba(var(--rc-orange-rgb), 0.45) !important;
  box-shadow: 0 8px 20px rgba(16, 18, 26, 0.10);
}

.rc-icon-tile + .card-title,
.card-body .rc-icon-tile ~ .card-title {
  font-weight: 600;
}

/* ==========================================================================
   11. App header (optimizer / settings)
   Replaces the full-bleed parallax photo hero. The optimizer used to open
   with two stacked headers - site nav, then a py-11 photo hero, then the app
   - while every other page flows straight into content. This is a slim bar
   that keeps the title and hands the page straight to the tool.
   ========================================================================== */

.rc-app-header {
  background: linear-gradient(180deg, var(--rc-surface-2), var(--rc-surface));
  border-bottom: 1px solid var(--rc-border);
  box-shadow: inset 0 2px 0 var(--rc-orange);
  padding: 1.25rem 0;
}

.rc-app-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
  font-size: 1.125rem;
  color: var(--rc-orange);
  background: linear-gradient(150deg,
              rgba(var(--rc-orange-rgb), 0.16),
              rgba(var(--rc-orange-rgb), 0.06));
  border: 1px solid rgba(var(--rc-orange-rgb), 0.28);
}

.rc-app-header-title {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--rc-text);
  line-height: 1.2;
}

.rc-app-header-sub {
  font-size: 0.8125rem;
  color: var(--rc-text-muted);
  margin-top: 0.125rem;
}

[data-bs-theme="light"] .rc-app-header-icon { color: var(--rc-orange-ink); }

@media (max-width: 576px) {
  .rc-app-header { padding: 0.875rem 0; }
  .rc-app-header-title { font-size: 1.0625rem; }
  .rc-app-header-sub { display: none; }
}

/* Breadcrumb bar sits directly under the header - keep it flush and quiet. */
[data-bs-theme="dark"] .card-header.bg-light {
  background-color: var(--rc-surface-2) !important;
}

.breadcrumb {
  --sparrow-breadcrumb-divider-color: var(--rc-text-dim);
  --sparrow-breadcrumb-item-active-color: var(--rc-text);
  margin-bottom: 0;
}

.breadcrumb-item a { color: var(--rc-text-muted); }
.breadcrumb-item a:hover { color: var(--rc-orange); }
[data-bs-theme="light"] .breadcrumb-item a:hover { color: var(--rc-orange-ink); }

/* ------------------------------------------------------------------
   Command Center (optimizer/templates/optimizer/home.html)
   ------------------------------------------------------------------ */
.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.15) !important;
}

/* Reduce overlay opacity to see background image */
.bg-holder.overlay::after {
  opacity: 0.5 !important;
}

/* Add backdrop blur and transparency to cards */
#builder-hub .card {
  background-color: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#builder-hub .card-body {
  background-color: transparent !important;
}

/* Dark mode support with backdrop blur */
[data-bs-theme="dark"] #builder-hub .card {
  background-color: rgba(33, 37, 41, 0.85) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ==========================================================================
   12. Optimizer builder
   ========================================================================== */

/* Range sliders in brand orange. Bootstrap bakes the thumb colour into its
   compiled CSS, so accent-color alone does nothing; the pseudo-elements do. */
.form-range::-webkit-slider-thumb {
  background-color: var(--rc-orange);
  border: 0;
}
.form-range::-moz-range-thumb {
  background-color: var(--rc-orange);
  border: 0;
}
.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px var(--rc-surface), 0 0 0 0.25rem rgba(var(--rc-orange-rgb), 0.35);
}
.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px var(--rc-surface), 0 0 0 0.25rem rgba(var(--rc-orange-rgb), 0.35);
}
.form-range:disabled::-webkit-slider-thumb,
.form-range:disabled::-moz-range-thumb {
  background-color: var(--rc-text-dim);
}
[data-bs-theme="dark"] .form-range::-webkit-slider-runnable-track {
  background-color: var(--rc-surface-3);
}
[data-bs-theme="dark"] .form-range::-moz-range-track {
  background-color: var(--rc-surface-3);
}

/* The vendor theme (S3, not in this repo) pins the settings tab area to
   400px by id; a one-slider pane should not float in a void. */
.rc-builder #builderTabsContent,
.rc-builder #builderTabsContent > .tab-pane {
  min-height: 0 !important;
  height: auto !important;
}

/* Square radio buttons used for "unique players" and "players per team" */
.rc-radio-btn {
  width: 2.25rem;
}

/* Five rule cards share one row from xl up, so a button group may wrap;
   a small gap keeps the wrapped rows from touching. */
.rc-rule .btn-group.flex-wrap {
  gap: 0.25rem;
}

.rc-rule .btn-group.flex-wrap > div > .btn {
  border-radius: var(--bs-border-radius-sm, 0.25rem);
}

/* Builder settings tabs: a segmented control on a toolbar band, so the three
   sections read as buttons rather than a line of text. Colours are tokens,
   so light and dark both work without a per-theme block. */
.rc-seg-bar {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background-color: var(--rc-surface-2);
  border-bottom: 1px solid var(--rc-border);
}

.rc-seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--rc-border-strong);
  border-radius: 0.5rem;
  background-color: var(--rc-surface);
}

.rc-seg .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  border: 0;
  border-radius: 0.375rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rc-text-muted);
  background-color: transparent;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.rc-seg .nav-link:hover,
.rc-seg .nav-link:focus-visible {
  color: var(--rc-text);
  background-color: var(--rc-surface-3);
}

.rc-seg .nav-link.active {
  color: #000;
  background-color: var(--rc-orange);
}

.rc-seg .nav-link .fas {
  font-size: 0.85em;
  opacity: 0.85;
}

@media (max-width: 576px) {
  .rc-seg .nav-link { padding: 0.4rem 0.6rem; }
  .rc-seg .nav-link .fas { display: none; }
}

/* Rule cards: title on the left, current value on the right, one control,
   one line of help. The value is the thing to scan for. */
.rc-rule-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rc-text);
}

.rc-rule-value {
  font-size: 0.85rem;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  color: var(--rc-orange);
}

[data-bs-theme="light"] .rc-rule-value {
  color: var(--rc-orange-ink);
}

/* A rule that does not apply to this slate type (showdown) stays visible
   but steps back; the controls are disabled alongside. */
.rc-rule-off {
  opacity: 0.55;
}

.rc-rule .form-switch .form-check-input {
  cursor: pointer;
}

/* Volatility presets: the number sits inside the button, dimmed. */
.rc-preset-pct {
  margin-left: 0.3rem;
  opacity: 0.7;
  font-weight: 400;
}

/* Player grid scrolls inside a fixed frame instead of stretching the page.
   The vendor grid sizing wins on specificity without the !important. */
#nflOptimizerGrid {
  height: 600px !important;
}

/* Game-style buttons on the NFL optimizer: contest count pill */
.game-style-count {
  font-size: 0.72em;
  font-weight: 600;
  vertical-align: middle;
  color: inherit;
  background: rgba(var(--rc-orange-rgb), 0.18);
}
.btn-primary .game-style-count {
  background: rgba(0, 0, 0, 0.22);
}

/* ==========================================================================
   13. Optimizer settings page
   One card per topic on the shared photo-with-scrim ground (profile /
   pricing use the same section wrapper). Headings all share the brand tile
   instead of one semantic color each, and numeric inputs get a fixed width
   so a 3-digit value does not sit in a full-row field.
   ========================================================================== */

.rc-page {
  max-width: 960px;
}

/* One panel under every section. */
.rc-panel {
  display: block;
  padding: 1.25rem;
  border-radius: 0.75rem;
  background-color: var(--rc-surface);
  border: 1px solid var(--rc-border);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

@media (min-width: 768px) {
  .rc-panel { padding: 1.5rem; }
}

/* Sections inside the panel: a quieter raised surface, no shadow of their own.
   Add .mb-0 to the last section when the panel has no footer. */
.rc-panel-section {
  background-color: var(--rc-surface-2);
  border: 1px solid var(--rc-border);
  border-radius: 0.5rem;
  margin-bottom: 1.25rem;
}

.rc-panel-section .card-body {
  padding: 1.25rem;
}

@media (min-width: 768px) {
  .rc-panel-section .card-body { padding: 1.5rem 1.75rem; }
}

/* Inputs sit on surface-2 now, so step them up one level to stay distinct. */
[data-bs-theme="dark"] .rc-panel-section .form-control,
[data-bs-theme="dark"] .rc-panel-section .form-select {
  background-color: var(--rc-surface-3);
}

[data-bs-theme="dark"] .rc-panel-section .input-group-text {
  background-color: var(--rc-surface-3);
  border-color: var(--rc-border-strong);
}

[data-bs-theme="dark"] .rc-panel-section .form-range::-webkit-slider-runnable-track {
  background-color: var(--rc-border-strong);
}
[data-bs-theme="dark"] .rc-panel-section .form-range::-moz-range-track {
  background-color: var(--rc-border-strong);
}

.rc-panel-section-head {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--rc-border);
}

.rc-panel-section-head .card-title {
  font-weight: 600;
  font-size: 1.0625rem;
}

.rc-panel-section-sub {
  font-size: 0.8125rem;
  color: var(--rc-text-muted);
  margin-top: 0.125rem;
}

.rc-panel-subhead {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--rc-text);
  margin-bottom: 0.25rem;
}

/* A Season Pass section shown to a free user: the same card, with the
   controls replaced by one line and the pricing link. */
.rc-locked {
  border: 1px dashed var(--rc-border-strong);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  color: var(--rc-text-muted);
}

.rc-locked-badge {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rc-orange-ink, var(--rc-orange));
  white-space: nowrap;
}

/* The builder panel on the settings page: boxed like the optimizer's
   expanded panel so the tabs read as one control. */
.rc-settings-builder {
  border: 1px solid var(--rc-border);
  border-radius: 0.5rem;
  padding-bottom: 0.5rem;
}

.rc-settings-divider {
  border-color: var(--rc-border);
  opacity: 1;
  margin: 1.5rem 0 1.25rem;
}

/* Numeric fields: a fixed width, whether bare or in an input-group. */
.rc-settings-num {
  max-width: 180px;
}

/* The vendor theme (S3, not in this repo) paints inline spans white with a
   rule that outranks a plain selector; the Alpine-filled max-lineups number
   should read as part of the hint, not jump out of it. */
[data-bs-theme="dark"] .rc-panel .form-text span,
.rc-panel .form-text span {
  color: inherit !important;
}

/* Header/section action button: icon only on phones so it never wraps beside the title. */
.rc-btn-collapse {
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 576px) {
  .rc-btn-collapse span { display: none; }
}

.rc-settings-switches .form-check {
  padding: 0.375rem 0 0.375rem 2.75rem;
}

.rc-settings-switches .form-check-input {
  margin-left: -2.75rem;
  cursor: pointer;
}

.rc-settings-switches .form-check-label {
  cursor: pointer;
}

/* Exposure rows: position | number | slider, sharing one column grid so the
   sliders line up instead of starting wherever each label happens to end. */
.rc-exposure-grid {
  display: grid;
  grid-template-columns: 3rem 7.5rem 1fr;
  column-gap: 1rem;
  row-gap: 0.875rem;
  align-items: center;
}

.rc-exposure-label {
  margin: 0;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: var(--rc-text-muted);
}

.rc-exposure-grid .form-range {
  margin: 0;
}

@media (max-width: 575.98px) {
  .rc-exposure-grid {
    grid-template-columns: 3rem 1fr;
  }
  .rc-exposure-grid .form-range {
    grid-column: 1 / -1;
  }
}

/* Panel footer (settings save bar): sticks to the bottom while the form scrolls. */
.rc-panel-footer {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 -1.25rem -1.25rem;
  padding: 0.875rem 1.25rem;
  border-radius: 0 0 0.75rem 0.75rem;
  background-color: var(--rc-surface);
  border-top: 1px solid var(--rc-border);
}

@media (min-width: 768px) {
  .rc-panel-footer {
    margin: 0 -1.5rem -1.5rem;
    padding: 1rem 1.5rem;
  }
}

.rc-settings-status {
  font-size: 0.875rem;
  color: var(--rc-text);
}

.rc-settings-status.is-success i { color: var(--rc-success); }
.rc-settings-status.is-error   i { color: var(--rc-danger); }

/* Slim status strip (pricing): one line of "your access" above the tier
   cards, instead of a third card competing with them. */
.rc-status-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  color: var(--rc-text);
  background-color: var(--rc-surface);
  border: 1px solid var(--rc-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.rc-status-strip > i { color: var(--rc-orange); }

[data-bs-theme="light"] .rc-status-strip > i { color: var(--rc-orange-ink); }

/* Guided tour (optimizer-tour.js).

   The card is placed by JS just below the component the step describes
   (document coordinates, so it scrolls with the page), and that component
   gets a highlight ring. .rc-tour-step-floating is the fallback when the
   target is not on screen: fixed bottom-right, clear of the vendor theme's
   4.3125rem sidebar (z-index 10000). */
.rc-tour-step {
  position: absolute;
  z-index: 10001;
  width: min(26rem, calc(100vw - 4.3125rem - 3rem));
}

.rc-tour-step-floating {
  position: fixed;
  right: calc(4.3125rem + 1.5rem);
  bottom: 1.5rem;
  top: auto !important;
  left: auto !important;
}

.rc-tour-card {
  padding: 1rem 1.15rem;
  border: 1px solid var(--rc-orange);
  border-radius: 0.5rem;
  background: var(--rc-surface-2);
  color: var(--rc-text);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  font-size: 0.875rem;
  line-height: 1.45;
}

/* The component the current step is about. Outline rather than border so
   the layout does not shift, with a pulse so the eye finds it. */
.rc-tour-highlight {
  outline: 2px solid var(--rc-orange);
  outline-offset: 4px;
  border-radius: 0.5rem;
  animation: rc-tour-pulse 1.6s ease-in-out 2;
}

@keyframes rc-tour-pulse {
  0%, 100% { outline-color: var(--rc-orange); }
  50% { outline-color: transparent; }
}

@media (max-width: 575.98px) {
  .rc-tour-step,
  .rc-tour-step-floating {
    position: fixed;
    right: 1rem;
    left: 1rem !important;
    bottom: 1rem;
    top: auto !important;
    width: auto;
    max-width: calc(100vw - 2rem);
  }
}

/* Phone layout for the builder (optimizer and demo).

   The vendor card pads 3rem a side, which on a 375px phone left a 245px
   column, and three control rows refused to wrap, so the page laid out
   646px wide with everything past the fold cut off: the position filter
   (a btn-group), the trash and pool-count group, and the build buttons.
   The grid keeps its own horizontal scroll. */
@media (max-width: 575.98px) {
  .rc-builder-shell .card-header,
  .rc-builder-shell .card-body,
  #optimizationResultsModal .card-header,
  #optimizationResultsModal .card-body { padding: 0.75rem; }
  #optimizationResultsModal .modal-body { padding: 0.75rem; }

  /* The nested container-fluid + row-padding-x + col gutters cost another
     62px a side on top of the card padding. The card edge is the margin. */
  .rc-builder-shell .container-fluid { padding-left: 0; padding-right: 0; }
  .rc-builder-shell .row-padding-x { padding-left: 0; padding-right: 0; }

  /* Game cards three to a row instead of one, with the GAMES / ODDS label
     on its own line above them. */
  .rc-builder-shell [data-tour="slate"] .d-flex.flex-wrap > span.me-2 { flex: 1 0 100%; }
  .rc-builder-shell [data-tour="slate"] button.btn-sm {
    min-width: 0 !important;
    flex: 1 1 calc(33.333% - 0.5rem);
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }

  /* Position filter: label on its own line, then all seven buttons in
     one row sharing the width. */
  .rc-position-filter-wrap { flex-wrap: wrap; width: 100%; }
  .rc-position-filter-wrap > span { flex: 1 0 100%; margin-bottom: 0.25rem; }
  .rc-position-filter { width: 100%; }
  .rc-position-filter .btn {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    font-size: 0.75rem;
  }

  /* Build results: the title, build name and View Lineups button do not
     fit one header row on a phone; wrap them. */
  #optimizationResultsModal .modal-header { flex-wrap: wrap; gap: 0.5rem; }
  #optimizationResultsModal .modal-header .badge { margin-left: 0 !important; }
  #optimizationResultsModal .modal-header .ms-auto {
    width: 100%;
    margin-left: 0 !important;
    justify-content: flex-end;
  }

  .rc-pool-tools {
    margin-left: 0 !important;
    flex-wrap: wrap;
    gap: 0.5rem 1rem !important;
  }
  .rc-pool-tools .text-nowrap { white-space: normal !important; }

  /* Lineup-count presets: seven buttons on the signed-in builder ran past
     the card edge. Share the width instead. */
  .rc-lineup-presets { width: 100%; }
  .rc-lineup-presets .btn {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .rc-build-actions {
    flex-wrap: wrap;
    width: 100%;
  }
  .rc-build-actions [data-tour="build"] { flex: 1 0 100%; }
}