/* NOTE: Consolidated to /static/css/card_header_colors.css */
/* This app-level copy has been superseded by the central stylesheet. */

:root {
  /* AVAILABLE COLOR SAMPLES (copy the hex you like into the variables below)
     - Blues:       rc-blue-500: #1e90ff (dodgerblue)
     - Teals:       rc-teal-500: #20c997 (teal)
     - Greens:      rc-green-500: #2ecc71 (emerald)
     - Purples:     rc-purple-500: #9b59b6 (amethyst)
     - Indigos:     rc-indigo-500: #4b0082 (indigo)
     - Reds:        rc-red-500: #d9534f (danger)
     - Oranges:     rc-orange-500: #ff7b00
     - Neutrals:    rc-gray-500: #6c757d

     Use these as inspiration — the file defines semantic variables like
     --rc-events-green which are used by the header classes below.
  */

  /* Variant shades for each semantic color (dark / default / light / lighter) */
  /* Matchgroups (blue) */
  --rc-matchgroups-dark:  #1477e6;
  --rc-matchgroups:       #1e90ff;
  --rc-matchgroups-light: #7fc0ff;
  --rc-matchgroups-lighter:#d6eaff;

  /* Events (green) */
  --rc-events-dark:  #1f7a43;
  --rc-events:       #2ecc71;
  --rc-events-light: #85d9a1;
  --rc-events-lighter:#ecf9f1;

  /* Events header bars should match Bootstrap success (swap requested). */
  --rc-events-header-bg: var(--bs-success, #198754);

  /* Messaging (purple) */
  --rc-messaging-dark:  #5c2f73;
  --rc-messaging:       #9b59b6;
  --rc-messaging-light: #d6b3ff;
  --rc-messaging-lighter:#faf5ff;

  /* Venue (teal) */
  --rc-venue-dark:  #116a4b;
  --rc-venue:       #20c997;
  --rc-venue-light: #6fe6cf;
  --rc-venue-lighter:#e6fbf8;

  /* Membership (indigo) */
  --rc-membership-dark:  #280046;
  --rc-membership:       #4b0082;
  --rc-membership-light: #b3abff;
  --rc-membership-lighter:#f3f2ff;

  /* League (dark blue, distinct from Bootstrap info/primary) */
  --rc-league-dark:  #123c69;
  --rc-league:       #1a4d80;
  --rc-league-light: #2a6297;
  --rc-league-lighter:#4d7faa;

  /* Debug (red) */
  --rc-debug-dark:  #8b2b2a;
  --rc-debug:       #d9534f;
  --rc-debug-light: #ff8a8a;
  --rc-debug-lighter:#fff5f5;

  /* Centralized color variables (can be adjusted to taste) */
  --rc-matchgroups-blue: #1e90ff; /* dodgerblue */
  --rc-events-green:   #2ecc71; /* emerald */
  --rc-messaging-purple:#9b59b6; /* amethyst */
  --rc-venue-teal:     #20c997; /* custom teal */
  --rc-membership-indigo:#4b0082; /* indigo */
  --rc-debug-red:      #d9534f; /* reddish */
  /* Teams (orange) */
  --rc-teams-dark:  #b45309;
  --rc-teams:       #f97316;
  --rc-teams-light: #fb923c;
  --rc-teams-lighter:#fff2e6;

  /* Dashboard (cyan) - distinct from other page headers */
  --rc-dashboard-dark:  #0e7893;
  --rc-dashboard:       #45d1e8;
  --rc-dashboard-light: #d0fbff;
  --rc-dashboard-lighter:#ecfeff;
}

.rc-matchgroups-header {
  background: var(--rc-matchgroups);
  color: #ffffff;
}

.rc-events-header {
  background: var(--rc-events-header-bg);
  color: #ffffff;
}

.rc-messaging-header {
  background: var(--rc-messaging);
  color: #ffffff;
}

.rc-venue-header {
  background: var(--rc-venue);
  color: #ffffff;
}

/* Teams header (for MyTeams page) */
.rc-teams-header {
  background: var(--rc-teams);
  color: #ffffff;
}

.rc-teams-header--dark { background: var(--rc-teams-dark); color: var(--rc-white); }
.rc-teams-header--light { background: var(--rc-teams-light); color: var(--rc-gray-900); }
.rc-teams-header--lighter { background: var(--rc-teams-lighter); color: var(--rc-gray-900); }

/* Dashboard header */
.rc-dashboard-header {
  background: var(--rc-dashboard);
  color: var(--rc-gray-900);
}

.rc-dashboard-header--dark { background: var(--rc-dashboard-dark); color: var(--rc-white); }
.rc-dashboard-header--light { background: var(--rc-dashboard-light); color: var(--rc-gray-900); }
.rc-dashboard-header--lighter { background: var(--rc-dashboard-lighter); color: var(--rc-gray-900); }

.rc-membership-header {
  background: var(--rc-membership);
  color: #ffffff;
}

.rc-league-header {
  background: var(--rc-league);
  color: #ffffff;
}

.rc-debug-header {
  background: var(--rc-debug);
  color: #ffffff;
}

/* Modifier classes for lighter/darker variants */
.rc-matchgroups-header--dark { background: var(--rc-matchgroups-dark); color: var(--rc-white); }
.rc-matchgroups-header--light { background: var(--rc-matchgroups-light); color: var(--rc-gray-900); }
.rc-matchgroups-header--lighter { background: var(--rc-matchgroups-lighter); color: var(--rc-gray-900); }

.rc-events-header--dark { background: var(--rc-events-dark); color: var(--rc-white); }
.rc-events-header--light { background: var(--rc-events-light); color: var(--rc-gray-900); }
.rc-events-header--lighter { background: var(--rc-events-lighter); color: var(--rc-gray-900); }

.rc-messaging-header--dark { background: var(--rc-messaging-dark); color: var(--rc-white); }
.rc-messaging-header--light { background: var(--rc-messaging-light); color: var(--rc-gray-900); }
.rc-messaging-header--lighter { background: var(--rc-messaging-lighter); color: var(--rc-gray-900); }

.rc-venue-header--dark { background: var(--rc-venue-dark); color: var(--rc-white); }
.rc-venue-header--light { background: var(--rc-venue-light); color: var(--rc-gray-900); }
.rc-venue-header--lighter { background: var(--rc-venue-lighter); color: var(--rc-gray-900); }

.rc-membership-header--dark { background: var(--rc-membership-dark); color: var(--rc-white); }
.rc-membership-header--light { background: var(--rc-membership-light); color: var(--rc-gray-900); }
.rc-membership-header--lighter { background: var(--rc-membership-lighter); color: var(--rc-gray-900); }

.rc-league-header--dark { background: var(--rc-league-dark); color: var(--rc-white); }
.rc-league-header--light { background: var(--rc-league-light); color: var(--rc-white); }
.rc-league-header--lighter { background: var(--rc-league-lighter); color: var(--rc-white); }

.rc-debug-header--dark { background: var(--rc-debug-dark); color: var(--rc-white); }
.rc-debug-header--light { background: var(--rc-debug-light); color: var(--rc-gray-900); }
.rc-debug-header--lighter { background: var(--rc-debug-lighter); color: var(--rc-gray-900); }

/* Provide a utility fallback for text-dark cases where needed */
.rc-header-text-dark {
  color: #212529 !important;
}

/* Utility badge background to match matchgroups primary color */
.bg-rc-matchgroups {
  background-color: var(--rc-matchgroups) !important;
  color: #ffffff !important;
}

/* Small button variant if needed */
.btn-rc-matchgroups {
  background-color: var(--rc-matchgroups) !important;
  border-color: var(--rc-matchgroups-dark) !important;
  color: #ffffff !important;
}

/* Events button variant (swap requested): use the former Events header green. */
.btn-rc-events {
  background-color: var(--rc-events) !important;
  border-color: var(--rc-events-dark) !important;
  color: #ffffff !important;
}

.btn-rc-events:hover,
.btn-rc-events:focus {
  background-color: var(--rc-events-dark) !important;
  border-color: var(--rc-events-dark) !important;
  color: #ffffff !important;
}

/* Expire button variant (intentionally NOT red; red reserved for destructive delete) */
.btn-rc-expire {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--rc-expired, #4f46e5);
  --bs-btn-border-color: var(--rc-expired, #4f46e5);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--rc-expired-dark, #4338ca);
  --bs-btn-hover-border-color: var(--rc-expired-dark, #4338ca);
  --bs-btn-focus-shadow-rgb: 79, 70, 229;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--rc-expired-dark, #4338ca);
  --bs-btn-active-border-color: var(--rc-expired-dark, #4338ca);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--rc-expired, #4f46e5);
  --bs-btn-disabled-border-color: var(--rc-expired, #4f46e5);
}

/* Bootstrap sometimes makes disabled custom buttons look "blank" if vars are missing.
   Keep Expire visibly non-red even when disabled. */
.btn-rc-expire:disabled,
.btn-rc-expire.disabled {
  background-color: var(--rc-expired, #4f46e5) !important;
  border-color: var(--rc-expired, #4f46e5) !important;
  color: #fff !important;
  opacity: 0.65;
}

/* Disabled delete/locked state should still read as "destructive" (red),
   but visually disabled (faded). Bootstrap's btn-outline-danger becomes
   gray/white when disabled, which looks inconsistent next to other buttons. */
.btn-rc-delete-disabled {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--color-danger, #dc3545);
  --bs-btn-border-color: var(--color-danger, #dc3545);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color-danger, #dc3545);
  --bs-btn-hover-border-color: var(--color-danger, #dc3545);
  --bs-btn-focus-shadow-rgb: 220, 53, 69;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--color-danger, #dc3545);
  --bs-btn-active-border-color: var(--color-danger, #dc3545);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--color-danger, #dc3545);
  --bs-btn-disabled-border-color: var(--color-danger, #dc3545);
}

.btn-rc-delete-disabled:disabled,
.btn-rc-delete-disabled.disabled {
  background-color: var(--color-danger, #dc3545) !important;
  border-color: var(--color-danger, #dc3545) !important;
  color: #fff !important;
  opacity: 0.55;
}

/* Outline variant matching rc-matchgroups */
.btn-outline-rc-matchgroups {
  color: var(--rc-matchgroups) !important;
  border-color: var(--rc-matchgroups) !important;
  background-color: transparent !important;
}
.btn-outline-rc-matchgroups:hover,
.btn-outline-rc-matchgroups:focus {
  color: #fff !important;
  background-color: var(--rc-matchgroups) !important;
  border-color: var(--rc-matchgroups-dark) !important;
}
.btn-outline-rc-matchgroups.disabled,
.btn-outline-rc-matchgroups:disabled {
  color: #6c757d !important;
  background-color: transparent !important;
  border-color: #dee2e6 !important;
}

/* Standardized status badges used across MatchGroup & Event cards */
.badge-rc-draft {
  background-color: var(--rc-matchgroups) !important;
  color: #ffffff !important;
}

.card .badge-rc-draft {
  background-color: var(--rc-matchgroups) !important;
  color: #ffffff !important;
}
.badge-rc-published {
  background-color: var(--rc-events) !important;
  color: #ffffff !important;
}
.badge-rc-paused {
  background-color: #ffc107 !important; /* bootstrap warning */
  color: #212529 !important;
}
.badge-rc-expired {
  background-color: var(--rc-expired, #4f46e5) !important;
  color: #ffffff !important;
}
.badge-rc-cancel {
  background-color: #343a40 !important; /* dark */
  color: #ffffff !important;
}

/* Small status icon badges (circular) */
.badge-rc-sm { padding: .35rem .45rem; border-radius: .375rem; }

/* Event-state specific small badges mapped to matchgroups blue where appropriate */
.badge-rc-invitation-sent { background-color: var(--rc-matchgroups) !important; color: #fff !important; }
.badge-rc-captain-review { background-color: var(--rc-matchgroups) !important; color: #fff !important; }

/* Uniform badge sizing: center text and match width to the largest status word ("Published")
   Use ch units so it scales with font; adjust min-width if needed. */
.badge-rc-draft,
.badge-rc-published,
.badge-rc-paused,
.badge-rc-expired,
.badge-rc-cancel,
.badge-rc-invitation-sent,
.badge-rc-captain-review {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  /* Roughly fit the longest label "Published" (9 chars) plus padding */
  min-width: 10ch !important;
  padding-left: .6rem !important;
  padding-right: .6rem !important;
}

/* ---- Flow-state badges (EventInstance.state) ----
   Single source-of-truth for state badge colors.
   Use in templates as:
     <span class="badge badge-rc-flowstate" data-rc-flowstate="{{ ev.state }}">State: ...</span>
   Keep the selector data-driven so templates stay simple.
*/
.badge-rc-flowstate {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important; /* override uniform badge sizing inside cards */
  padding-left: .6rem !important;
  padding-right: .6rem !important;
  border-radius: .375rem !important;
  font-weight: 700 !important;
  background-color: #6c757d !important; /* fallback */
  color: #ffffff !important;
}

/* ---- Card-state + method badges ----
   These are NOT flow-state badges. They exist so we can tune sizing/wrapping
   independently from (a) flow-state colors and (b) format/method colors.
   They intentionally do not set background/text colors.
*/
.badge-rc-cardstate,
.badge-rc-method {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important; /* override uniform badge sizing inside cards */
  padding-left: .6rem !important;
  padding-right: .6rem !important;
  border-radius: .375rem !important;
  font-weight: 700 !important;
}

/* Method badges get their own palette (not Bootstrap). */
.badge-rc-method {
  font-weight: 700 !important;
  background-color: #6c757d !important; /* fallback */
  color: #ffffff !important;
}
.badge-rc-method[data-rc-method="review"] { background-color: var(--rc-matchgroups) !important; color: #ffffff !important; }
.badge-rc-method[data-rc-method="auto"] { background-color: #343a40 !important; color: #ffffff !important; }
.badge-rc-method[data-rc-method="algo"] { background-color: var(--rc-teams) !important; color: #ffffff !important; }
.badge-rc-method[data-rc-method="mode"] { background-color: var(--rc-membership) !important; color: #ffffff !important; }

/* ---- Scoring + standings badges ----
   Use data attributes so templates stay simple and colors remain centralized.
   These intentionally avoid Bootstrap's default palette.
*/
.badge-rc-scoring,
.badge-rc-standing {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding-left: .6rem !important;
  padding-right: .6rem !important;
  border-radius: .375rem !important;
  font-weight: 700 !important;
  background-color: #6c757d !important; /* fallback */
  color: #ffffff !important;
}

/* Scoring badge kinds */
.badge-rc-scoring[data-rc-scoring="match_play"] { background-color: var(--rc-events) !important; color: #ffffff !important; }
.badge-rc-scoring[data-rc-scoring="games_per_unit"] { background-color: var(--rc-venue) !important; color: #ffffff !important; }
.badge-rc-scoring[data-rc-scoring="scoring_basis"] { background-color: var(--rc-membership) !important; color: #ffffff !important; }

/* Standing badge kinds */
.badge-rc-standing[data-rc-standing="metric"] { background-color: var(--rc-teams) !important; color: #ffffff !important; }
.badge-rc-standing[data-rc-standing="events"] { background-color: #343a40 !important; color: #ffffff !important; }
.badge-rc-standing[data-rc-standing="intent"] { background-color: var(--rc-matchgroups) !important; color: #ffffff !important; }

/* ---- Series-state badge (EventSeries.status-derived) ----
   Kept separate from flow-state so we can change palettes independently.
   Use in templates as:
     <span class="badge badge-rc-seriesstate" data-rc-seriesstate="live|closed">...</span>
*/
.badge-rc-seriesstate {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important; /* override uniform badge sizing inside cards */
  padding-left: .6rem !important;
  padding-right: .6rem !important;
  border-radius: .375rem !important;
  font-weight: 700 !important;
  background-color: #6c757d !important; /* fallback */
  color: #ffffff !important;
}
.badge-rc-seriesstate[data-rc-seriesstate="live"] { background-color: var(--rc-matchgroups) !important; color: #ffffff !important; }
.badge-rc-seriesstate[data-rc-seriesstate="closed"] { background-color: #343a40 !important; color: #ffffff !important; }

/* Event lifecycle / messaging states */
.badge-rc-flowstate[data-rc-flowstate="pre_invitation"] { background-color: #6c757d !important; color: #ffffff !important; }
.badge-rc-flowstate[data-rc-flowstate="invitation_sent"] { background-color: var(--rc-matchgroups) !important; color: #ffffff !important; }
.badge-rc-flowstate[data-rc-flowstate="reminder"] { background-color: #ffc107 !important; color: #212529 !important; }
.badge-rc-flowstate[data-rc-flowstate="last_call"] { background-color: var(--rc-teams) !important; color: #ffffff !important; }
.badge-rc-flowstate[data-rc-flowstate="enrollment_closed"] { background-color: var(--rc-membership) !important; color: #ffffff !important; }

/* Captain workflow */
.badge-rc-flowstate[data-rc-flowstate="review_assignments"] { background-color: var(--rc-matchgroups) !important; color: #ffffff !important; }
.badge-rc-flowstate[data-rc-flowstate="assignments_locked"] { background-color: #343a40 !important; color: #ffffff !important; }

/* Results workflow */
.badge-rc-flowstate[data-rc-flowstate="results_pending"] { background-color: var(--rc-venue) !important; color: #ffffff !important; }
.badge-rc-flowstate[data-rc-flowstate="review_results"] { background-color: var(--rc-events) !important; color: #ffffff !important; }
.badge-rc-flowstate[data-rc-flowstate="results_closed"] { background-color: #343a40 !important; color: #ffffff !important; }
.badge-rc-flowstate[data-rc-flowstate="completed"] { background-color: #343a40 !important; color: #ffffff !important; }

/* Legacy aliases used in older templates (keep working if encountered) */
.badge-rc-flowstate[data-rc-flowstate="captain_review"] { background-color: var(--rc-matchgroups) !important; color: #ffffff !important; }
.badge-rc-flowstate[data-rc-flowstate="locked"] { background-color: #343a40 !important; color: #ffffff !important; }

/* Slightly smaller variant for compact badges if needed */
.badge-rc-sm-uniform { min-width: 6ch !important; padding-left: .4rem !important; padding-right: .4rem !important; }

/* Apply the same uniform sizing to all badges inside cards so status badges
   across the UI align to the same width as "Published". This targets badges
   rendered in card headers and card bodies, while leaving global .badge
   outside cards unaffected. */
.card .badge:not(.badge-icon),
.card-header .badge:not(.badge-icon),
.events-viewer .badge:not(.badge-icon),
.mobile-event-card .badge:not(.badge-icon) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-width: 10ch !important;
  padding-left: .6rem !important;
  padding-right: .6rem !important;
}

/* Tables often contain tiny badges (e.g., UP/DOWN/STAY) where uniform sizing
   distorts column widths. Keep table badges compact. */
.card .table .badge,
.card .table-responsive .badge,
.events-viewer .table .badge,
.events-viewer .table-responsive .badge,
.mobile-event-card .table .badge,
.mobile-event-card .table-responsive .badge {
  min-width: 0 !important;
  padding-left: .35rem !important;
  padding-right: .35rem !important;
}

/* Icon-only badge helper: neutralize uniform badge sizing so icons stay compact
   Use this class on icon wrappers (e.g. <span class="badge badge-icon">) */
.badge-icon {
  min-width: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;
  color: inherit !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Ensure icon size inside neutralized badge is preserved and not constrained */
.badge-icon i,
.badge-icon svg {
  font-size: 1rem !important;
  line-height: 1 !important;
}

/* ---- Neutral badge override (requested: meta badges appear dark gray) ----
   Add this class in templates when you want a badge to ALWAYS render as
   a neutral/dark pill, regardless of other badge family palettes.
*/
.badge-rc-neutral {
  background-color: var(--rc-gray-800, #343a40) !important;
  color: var(--rc-white, #ffffff) !important;
  border: 1px solid var(--rc-gray-700, #495057) !important;
}

/* ---- Results & Standings accordion: consistent green bars ----
   Scoped so we don't globally restyle unrelated accordions.
*/
.rc-events-accordion {
  /* rc-site-overrides.css styles all accordions via these variables.
     Set them here so Results & Standings stays Events-green even inside cards. */
  --rc-accordion-bg: var(--rc-events-header-bg);
  --rc-accordion-active-bg: var(--rc-events-header-bg);
  --rc-accordion-color: var(--rc-white, #ffffff);
}

.rc-events-accordion .accordion-button,
.rc-events-accordion .accordion-button:not(.collapsed) {
  background-color: var(--rc-events-header-bg) !important;
  color: var(--rc-white, #ffffff) !important;
}

.rc-events-accordion .accordion-button:focus {
  box-shadow: 0 0 0 0.2rem rgba(73, 80, 87, 0.15) !important;
}

.rc-events-accordion .accordion-button::after {
  filter: invert(1);
}

/* ---- Results cards: group header bars match left-edge accent ---- */
:root {
  --rc-results-group-accent: var(--rc-matchgroups);
}

/* ---- Global RC badge palette (requested: all badges appear dark gray) ----
   This intentionally overrides the per-kind palette rules above.
*/
:root {
  --rc-badge-bg: var(--rc-gray-800, #343a40);
  --rc-badge-fg: var(--rc-white, #ffffff);
  --rc-badge-border: var(--rc-gray-700, #495057);
}

.badge-rc-flowstate:not(.badge-rc-row-state),
.badge-rc-seriesstate:not(.badge-rc-row-state),
.badge-rc-cardstate:not(.badge-rc-row-state),
.badge-rc-method:not(.badge-rc-row-method),
.badge-rc-scoring:not(.badge-rc-row-scoring),
.badge-rc-standing {
  background-color: var(--rc-badge-bg) !important;
  color: var(--rc-badge-fg) !important;
  border: 1px solid var(--rc-badge-border) !important;
}

/* ---- Row-level standardization overrides ----
   Some card sections want all badges in a given row to share one color.
   Apply these ONLY where desired by adding the class in the template.
   Placed at the end so it wins against flowstate-specific and global palette rules.
*/
.badge-rc-flowstate.badge-rc-row-state,
.badge-rc-seriesstate.badge-rc-row-state,
.badge-rc-cardstate.badge-rc-row-state {
  background-color: rgb(var(--bs-primary-rgb)) !important;
  color: #ffffff !important;
  border: 1px solid rgba(var(--bs-primary-rgb), 0.45) !important;
}

.badge-rc-method.badge-rc-row-method {
  background-color: #343a40 !important;
  color: #ffffff !important;
  border: 1px solid #495057 !important;
}

.badge-rc-scoring.badge-rc-row-scoring {
  background-color: var(--rc-membership) !important;
  color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
}