/* ============================================================
   BoutRoom — Applied component layer
   Turns the design tokens into the real buttons, cards, and
   form controls used across the product. Load AFTER tokens.css.

   This is the single source of truth for the look of shared
   components. Bespoke, page-specific styling (the sidebar, the
   fight-card rows, etc.) stays in its own page.
   ============================================================ */

/* ---- Bridge: point Bootstrap's own variables at the tokens ----
   Anything Bootstrap renders (buttons, badges, forms, tables…)
   now inherits the BoutRoom scales instead of Bootstrap defaults. */
:root {
  --bs-body-bg:            var(--bg-page);
  --bs-body-color:         var(--text-primary);
  --bs-body-font-family:   var(--font-body);
  --bs-emphasis-color:     var(--text-primary);

  --bs-border-color:       var(--border-default);
  --bs-border-radius:      var(--radius-md);
  --bs-border-radius-sm:   var(--radius-sm);
  --bs-border-radius-lg:   var(--radius-lg);
  --bs-border-radius-xl:   var(--radius-xl);
  --bs-border-radius-pill: var(--radius-pill);

  --bs-primary:            var(--accent);
  --bs-primary-rgb:        var(--red-rgb);
  --bs-link-color:         var(--accent);
  --bs-link-color-rgb:     var(--red-rgb);
  --bs-link-hover-color:   var(--accent-hover);
}

/* ---- Base ---- */
body {
  background-color: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display);
}
/* Big headings get tight letter-spacing — the "looks designed" cue */
h1, .h1, h2, .h2 { letter-spacing: var(--tracking-tight); }

/* ---- Eyebrow label (small uppercase tracked red label above a heading) ---- */
.eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  color: var(--accent);
}

/* ---- Cards: white, soft large shadow, hairline border ---- */
.card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* ---- One button system: 6px corners, display font, no lift ----
   Three tiers, in descending weight:
     1. Primary   — solid red        (.btn-primary / .btn-accent)
     2. Secondary — hairline border, near-black label
                    (.btn-outline-secondary / .btn-outline-dark), plus the
                    branded red-outline variant for emphasis
     3. Quiet     — .btn-link, red text, no chrome

   Changed 2026-08-31: corners were 999px pills, and EVERY button rose 2px
   with a shadow on hover then shrank on click. That combination (pill +
   hover-lift + click-scale) is the standard AI-generated-SaaS button, and
   it made the whole product read as generated rather than designed.
   Hover now changes colour only. Shared with the sibling product — see
   PRODUCT-SYNC.md section 2.

   Letter-spacing tried and reverted, same day: the brand rulebook's
   +0.08em "Wider" tracking (DESIGN-SYSTEM.md) was added for buttons, but
   George compared it live against a real toolbar (button-tracking
   Artifact, short labels like "Tickets" vs long ones like "Edit event
   details") and it visibly loosened the long labels more than the short
   ones — "much better without it". Buttons are now a documented exception
   to the Wider tracking tier; DESIGN-SYSTEM.md updated to match. */
.btn {
  --bs-btn-border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

/* Solid red — the main action (covers the legacy .btn-accent class too).
   Bootstrap hardcodes its OWN disabled-state colours inside each .btn-*
   variant rule, separate from the normal/hover/active ones above -- so a
   disabled button silently falls back to stock Bootstrap blue unless those
   are set here too. Point them at the same brand colours; Bootstrap's own
   opacity fade (--bs-btn-disabled-opacity) still does the "greyed out" look. */
.btn-primary,
.btn-accent {
  --bs-btn-bg:                    var(--accent);
  --bs-btn-border-color:          var(--accent);
  --bs-btn-color:                 var(--text-on-accent);
  --bs-btn-hover-bg:              var(--accent-hover);
  --bs-btn-hover-border-color:    var(--accent-hover);
  --bs-btn-hover-color:           var(--text-on-accent);
  --bs-btn-active-bg:             var(--accent-hover);
  --bs-btn-active-border-color:   var(--accent-hover);
  --bs-btn-active-color:          var(--text-on-accent);
  --bs-btn-disabled-bg:           var(--accent);
  --bs-btn-disabled-border-color: var(--accent);
  --bs-btn-disabled-color:        var(--text-on-accent);
  color: var(--text-on-accent);
}
.btn-accent:hover { color: var(--text-on-accent); }

/* Red outline — a *branded* secondary action, kept distinct from the
   neutral secondary below. Both exist on purpose: red outline for the
   secondary action that still belongs to the brand, neutral for the
   everyday one. Same disabled-state gotcha as .btn-primary above. */
.btn-outline-primary {
  --bs-btn-color:                 var(--accent);
  --bs-btn-border-color:          var(--accent);
  --bs-btn-hover-bg:              var(--accent);
  --bs-btn-hover-border-color:    var(--accent);
  --bs-btn-hover-color:           var(--text-on-accent);
  --bs-btn-active-bg:             var(--accent);
  --bs-btn-active-border-color:   var(--accent);
  --bs-btn-disabled-color:        var(--accent);
  --bs-btn-disabled-border-color: var(--accent);
}

/* Neutral secondary — hairline border, near-black label.
   These Bootstrap variants were never repainted, so until 2026-08-31 they
   rendered in stock Bootstrap grey (#6c757d): washed-out grey text in a
   washed-out grey outline, sitting directly beside brand-red buttons. With
   172 uses of .btn-outline-secondary and 47 of .btn-outline-dark across the
   two products, that unpainted grey was the single biggest reason the
   buttons read as plain Bootstrap. The weight now comes from the label
   rather than the border, so it reads as chosen instead of default. */
.btn-outline-secondary,
.btn-outline-dark,
.btn-secondary,
.btn-light {
  --bs-btn-bg:                    var(--surface-card);
  --bs-btn-border-color:          var(--border-strong);
  --bs-btn-color:                 var(--text-primary);
  --bs-btn-hover-bg:              var(--bg-sunken);
  --bs-btn-hover-border-color:    var(--text-primary);
  --bs-btn-hover-color:           var(--text-primary);
  --bs-btn-active-bg:             var(--ink-100);
  --bs-btn-active-border-color:   var(--text-primary);
  --bs-btn-active-color:          var(--text-primary);
  --bs-btn-disabled-bg:           var(--surface-card);
  --bs-btn-disabled-border-color: var(--border-default);
  --bs-btn-disabled-color:        var(--text-muted);
}

/* .btn-soft-accent (pale red fill) was removed 2026-08-31: zero uses across
   both products, and the pale tint was the same pastel flagged in the
   AI-tells audit. Reinstate only with a reason. */

.btn-xs { padding: var(--space-1) var(--space-2); font-size: var(--text-xs); }

/* Keep grouped/segmented buttons square-jointed */
.btn-group > .btn:not(:first-child):not(:last-child) { --bs-btn-border-radius: 0; }
.btn-group > .btn:first-child { --bs-btn-border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.btn-group > .btn:last-child  { --bs-btn-border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* ---- Form controls: red focus ring ---- */
.form-control:focus,
.form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--red-rgb), 0.15);
}

/* ---- Branded dropdown lists (replaces the native <select> popup, see
   static/js/custom-select.js and PRODUCT-SYNC.md) ---- */
.bout-select-wrap { position: relative; }
.bout-select-wrap select.form-select {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.bout-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  text-align: left;
  cursor: pointer;
  background-image: none;
}
.bout-select-trigger:disabled { cursor: not-allowed; }
.bout-select-trigger .bst-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Without this, a flex item won't shrink past its own text width no
     matter what truncation rules it has, so picking a longer option
     pushed the label wide and shoved the caret past the button's right
     edge for a frame before this jump-menu dropdown navigates away. */
  min-width: 0;
}
/* Sizing rule for EVERY branded dropdown: the box is at least as wide as its
   longest option. An invisible, zero-height copy of that text (set from
   custom-select.js via data-sizer) props the width open. Capped so a list of
   hundreds of long names can't make a monster box; a select given an explicit
   inline width still wins, since this only affects auto-width ones. */
.bout-select-trigger .bst-label::after {
  content: attr(data-sizer);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  max-width: 28rem;
}
.bout-select-trigger { max-width: 100%; }
.bout-select-trigger .bst-caret {
  flex: 0 0 auto;
  width: 0.85em;
  height: 0.85em;
  display: block;
  color: var(--text-muted);
  /* No CSS transform/rotate here on purpose (see custom-select.js
     CARET_DOWN_D/CARET_UP_D) — toggling `transform` promotes and demotes
     the element to/from its own GPU compositor layer on every open/close,
     and that handoff was a live, reproducible, real-eye-visible sideways
     jump that a rotate()-based caret (with or without a transition) never
     stopped doing. Swapping the SVG path's `d` directly changes the drawn
     shape without ever creating a transform layer at all. */
}
.bout-select-trigger[aria-expanded="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--red-rgb), 0.15);
}

.bout-select-panel {
  position: fixed;
  z-index: 1200;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
}
.bout-select-option {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bout-select-option.is-active,
.bout-select-option:hover:not([aria-disabled]) {
  background: rgba(var(--red-rgb), 0.08);
}
.bout-select-option.is-selected { font-weight: 600; }
.bout-select-option[aria-disabled="true"] {
  color: var(--text-disabled);
  cursor: not-allowed;
}
.bout-select-group-label {
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* ---- Brand wordmark red half (typed-text fallback contexts) ---- */
.brand-room { color: var(--accent); }

/* ---- Tooltip help icons ---- */
.tip-icon {
  cursor: pointer;
  font-size: 0.8em;
  opacity: 0.55;
  vertical-align: middle;
  margin-left: 4px;
}
.tip-icon:hover, .tip-icon:focus { opacity: 1; outline: none; }

/* ============================================================
   De-Bootstrap layer — gives badges, banners, toasts, tabs and
   the dashboard list a bespoke BoutRoom look instead of the
   stock Bootstrap defaults. Loaded after Bootstrap so it wins.
   ============================================================ */

/* ---- Badges: keep the bold solid colours, switch to the
        display font so they read as ours. Radius set explicitly to match
        the 6px button corners (2026-08-31) — badges previously inherited
        Bootstrap's default --bs-border-radius (8px, mapped to --radius-md),
        which is close enough to full-pill at badge height that it read as
        a leftover capsule shape beside the newly squared-off buttons. ---- */
.badge {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  border-radius: var(--radius-sm);
}

/* Gender pills — were both red; give M / F their own quiet colours */
.badge-gender-m { background: #4A5568; color: #fff; }
.badge-gender-f { background: #9B4A57; color: #fff; }

/* Hand-coded "soft blue" info badge (e.g. dressing-room switch note) */
.badge-switch {
  background: #E7EAF0;
  color: #3A4252;
  border: 1px solid #C7CEDC;
  font-weight: var(--fw-semibold);
}

/* ---- Status indicator: coloured dot + word (George's call, 2026-09-04,
   replacing the pill badge in dense data-table status columns — a pill
   per row read as loud/heavy repeated down a whole table; a dot scans
   just as fast at a fraction of the visual weight). Same semantic
   colours as the alert/toast left-bars above (#2EAD63 / #E0A21E / brand
   red), not Bootstrap's own bg-success/bg-warning, so "Vacant" means the
   same colour whether it's a table row or a banner. Page-level/header
   status (e.g. the big badge on a fighter or championship's own page)
   keeps the pill — this is for a column you scan down repeatedly, not a
   single state read once. ---- */
.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  white-space: nowrap;
}
.status-indicator::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.status-indicator--success { color: #2EAD63; }
.status-indicator--warning { color: #E0A21E; }
.status-indicator--danger  { color: var(--red-600); }
.status-indicator--neutral { color: var(--text-muted); }

/* ---- Notice banners (Take A): white panel, hairline border,
        soft shadow, coloured left bar. Restyles every .alert,
        which also covers the flash messages app-wide. ---- */
.alert {
  --bs-alert-bg:           var(--surface-card);
  --bs-alert-color:        var(--text-primary);
  --bs-alert-border-color: var(--border-subtle);
  border-left-width: 4px;
  border-left-color: var(--ink-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}
.alert-success { border-left-color: #2EAD63; }
.alert-danger  { border-left-color: var(--red-500); }
.alert-warning { border-left-color: #E0A21E; }
.alert-info    { border-left-color: var(--accent); }
.alert-muted   { border-left-color: var(--ink-300); }   /* custom */
.alert-accent  { border-left-color: var(--accent);  }   /* custom */

/* ---- Tables (George's call, 2026-09-04): quieter header, red accent-bar
   hover. Data tables stay tables app-wide (Roster, Rankings, Contracts,
   Testing, Finance, Staff, Weight Classes, Championships all use
   .table-dark/.table-hover) — this is one CSS change, not a per-page
   rebuild, so every one of them picks it up the same way. Was a solid
   dark header bar; that's now uppercase muted micro-labels on a plain
   background, so the row content carries the visual weight instead of
   the header chrome. ---- */
.table > thead.table-dark {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-muted);
}
.table > thead.table-dark th {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-default);
  padding-bottom: 12px;
  vertical-align: bottom;
}
.table.table-hover > tbody > tr:hover {
  background: var(--red-100);
}
.table.table-hover > tbody > tr > :first-child {
  box-shadow: inset 3px 0 0 transparent;
  transition: box-shadow .12s ease;
}
.table.table-hover > tbody > tr:hover > :first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}

/* ---- Fighter Roster's sortable column headers (George's call, 2026-09-04):
   left over from the old solid-dark header bar, these links still forced
   white text — invisible once the header background went transparent/light
   in the "quieter header" pass above. Inherit the header's own muted colour
   instead of hardcoding one, darken on hover for affordance. ---- */
.table > thead.table-dark .roster-filter-link {
  color: inherit;
}
.table > thead.table-dark .roster-filter-link:hover {
  color: var(--ink-900);
}
.table-name {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 1.02rem;
}
.table-subtext {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 1px;
}

/* ---- Division tabs (Bout Builder). Radius squared off to match buttons
   2026-08-31 — these, badges, and the fight-card weight pill below were
   the last capsule shapes left after the button re-cut; George called
   it for consistency once he saw them next to the new square buttons. ---- */
.br-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  background: var(--surface-card);
  color: var(--ink-700);
  padding: 0.35rem 0.9rem;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.br-tab:hover  { border-color: var(--ink-400); color: var(--ink-900); }
.br-tab.active { background: var(--ink-900); color: #fff; border-color: var(--ink-900); }
.br-tab-count {
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  background: var(--ink-100);
  color: var(--ink-600);
  border-radius: var(--radius-sm);
  padding: 0.05rem 0.45rem;
}
.br-tab.active .br-tab-count { background: rgba(255,255,255,0.18); color: #fff; }

/* ---- Underline tab bar — a small, fixed-count row of section/category
   switches (Fighter Profile's Overview/Contract/etc.; the bout builder's
   Men/Women division toggle). NOT for open-ended lists — that's .br-tab
   above, or a dropdown once the list can grow past a handful of items. ---- */
.profile-tab-bar {
  display: flex;
  align-items: flex-end;
  border-bottom: 1px solid var(--border-default);
  list-style: none;
  padding-left: 0;
  margin-bottom: 1rem;
}
.profile-tab-bar .nav-item { position: relative; }
.profile-tab-bar .nav-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 18px;
  background: var(--border-default);
}
.profile-tab {
  display: inline-block;
  padding: 0.65rem 1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.2px;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-bottom: 2.5px solid transparent;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  text-decoration: none;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.profile-tab:hover {
  color: var(--red-700);
  background: linear-gradient(180deg, rgba(var(--red-rgb), .08) 0%, rgba(var(--red-rgb), 0) 78%);
  border-bottom-color: var(--red-300);
}
.profile-tab.active {
  color: var(--ink-900);
  font-weight: 700;
  background: linear-gradient(180deg, rgba(var(--red-rgb), .06) 0%, rgba(var(--red-rgb), 0) 78%);
  border-bottom-color: var(--red-500);
}
.profile-tab.active:hover {
  background: linear-gradient(180deg, rgba(var(--red-rgb), .11) 0%, rgba(var(--red-rgb), 0) 78%);
  border-bottom-color: var(--red-600);
}

/* ---- Card-row list (use for simple lists only, NOT data tables) ---- */
.br-cardlist { display: flex; flex-direction: column; gap: 0.6rem; }
.br-cardrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.1rem;
  box-shadow: var(--shadow-xs);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast);
}
.br-cardrow:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-default);
  color: inherit;
}
.br-cardrow .cr-name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
}
.br-cardrow .cr-meta {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin-top: 2px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.br-cardrow .cr-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-shrink: 0;
}
.br-cardrow .cr-chev { color: var(--ink-400); }

/* ---- Toasts: dark panel, coloured accent + icon ---- */
.bout-toast {
  --bs-toast-bg:           var(--ink-900);
  --bs-toast-color:        var(--text-on-ink);
  --bs-toast-border-color: transparent;
  background: var(--ink-900);
  color: var(--text-on-ink);
  border: none;
  border-left: 4px solid var(--ink-500);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.bout-toast .toast-body { color: var(--text-on-ink); }
.bout-toast .toast-ico  { font-size: 1.05rem; flex-shrink: 0; }
.bout-toast--success { border-left-color: #2EAD63; }
.bout-toast--success .toast-ico { color: #6BD49B; }
.bout-toast--danger  { border-left-color: var(--red-500); }
.bout-toast--danger  .toast-ico { color: var(--red-400); }
.bout-toast--warning { border-left-color: #E0A21E; }
.bout-toast--warning .toast-ico { color: #F0C24E; }
.bout-toast--info    { border-left-color: var(--accent); }
.bout-toast--info    .toast-ico { color: var(--accent-on-ink); }

/* ---- Corner accent-bar matchup — fight-card "poster" look (event view).
   Each bout is a white card floating on the grey list, with full-height
   red/blue corner stripes and display-caps names. Ported from BoutRoom
   Lite 2026-07-21; see PRODUCT-SYNC.md. The Bout Builder still uses the
   older .slot-card treatment below (that port is pending, deferred).
   2026-09-02: the white card now wraps the whole bout — contract links,
   status badge/actions and the note row all sit inside it too, not just
   the fighter names row, so white is the dominant surface of the card
   (only the drag-handle gutter and the section backer stay grey). The
   status colour top-line was dropped at the same time — the status badge
   alone is enough, the coloured line read as too heavy. See
   PRODUCT-SYNC.md 2026-09-02 entry. ---- */
.bout-card {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  border-left: 6px solid var(--corner-red);
  border-right: 6px solid var(--corner-blue);
}
/* Weight class (and title-fight name) now sit in their own strip above the
   corners, so they read as the bout's heading rather than being buried in
   the vertically-centred VS column. 2026-09-03. */
.bout-topline {
  text-align: center;
  padding: 0.6rem 1rem 0;
}
.bout-matchup {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.bout-matchup .corner {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.6rem 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.corner-red  { text-align: left;  }
.corner-blue { text-align: right; }
/* .corner is a column flexbox, so its default align-items:stretch was
   forcing the contract-agreement button to fill the whole corner width —
   fine for red (its left-packed label already sits at the left edge like
   everything else in that corner) but wrong for blue, where the label sat
   left-packed inside a right-aligned corner, floating away from the name/
   record above it. Sized to content and pinned to the same edge as the
   rest of each corner instead. 2026-09-03. */
.corner-red .btn  { align-self: flex-start; }
.corner-blue .btn { align-self: flex-end; }

.bout-center {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 1.7rem;
  gap: 0.3rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  min-width: 56px;
}
.bout-vs {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1;
}
.bout-weight {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  /* Was var(--bg-page) — the app's page-grey, left over from before the
     card itself was white. A grey-filled chip floating on a white card
     read like a disabled input rather than a tag. 2026-09-03. */
  background: var(--surface-card);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 0.18rem 0.7rem;
  white-space: nowrap;
  text-align: center;
}
/* Round count: was plain Bootstrap (.small.text-muted, body font) sitting
   next to two branded-font elements (VS, the weight pill) — a visible
   third typeface for what's really the same "bout facts" family. Styled
   as a quiet caption matching the corner-eyebrow micro-label language
   used elsewhere on the card, one tier down from VS. 2026-09-03. */
.bout-rounds {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}
.corner-eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-size: var(--text-2xs);
  font-weight: var(--fw-extrabold);
}
.corner-eyebrow-red  { color: var(--corner-red); }
.corner-eyebrow-blue { color: var(--corner-blue); }
.corner-name {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: -0.005em;
  font-size: var(--text-xl);
  line-height: 1.1;
  margin-top: 2px;
}
.corner-gym  { color: var(--text-muted); font-size: var(--text-sm); }
/* Current-rank badge next to a corner name (Pro-only — Lite has no Rankings
   module, see PRODUCT-SYNC.md). Deliberately small next to the bold corner
   name, not a competing accent colour. */
.corner-rank { font-size: var(--text-2xs); vertical-align: middle; margin-left: 0.3rem; }
/* Champion badge — plain gold capital C next to a fighter's name wherever it
   appears. Deliberately just styled text, not an icon (see _champion.html). */
.champion-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 0.3rem;
  vertical-align: middle;
}
.champion-badge-icon {
  width: 1.05em;
  height: 1.05em;
  display: block;
}

/* ---- Rankings: champion row under each division card header. Went
   through five treatments before landing here (George's calls,
   2026-09-04): crammed into the header bar, a pale-yellow strip, solid
   black, solid gold, a gold-bordered box with its own margin (visibly
   different size from the rows below it, page grey showing through the
   gap, clipped at the card's rounded corners) — all rejected. Settled by
   comparing four real mockups side by side (see roadmap/bugs-tweaks-done.md
   2026-09-04): a plain left accent bar, same visual language as the
   existing row-hover accent used everywhere else in the app. No box, no
   outline — the row stays exactly the same size and shape as a ranked
   row, just marked on the left edge. Chosen unanimously, "best by a
   mile." ---- */
.ranking-row--champion {
  box-shadow: inset 4px 0 0 #ffc107;
}

/* ---- Bout Builder slots: the same poster look as a fight-card bout, so the
   strip at the top previews exactly how the bout will sit on the card. Blue is
   mirrored to the right. An empty slot sits on the page grey; a filled one
   turns white and lifts. Ported from BoutRoom Lite 2026-07-23; see
   PRODUCT-SYNC.md. ---- */
.slot-card.slot-red  { border: 1px solid var(--border-subtle); border-left-width: 6px;  border-left-color: var(--corner-red);   background: var(--bg-page); border-radius: var(--radius-lg); }
.slot-card.slot-blue { border: 1px solid var(--border-subtle); border-right-width: 6px; border-right-color: var(--corner-blue); background: var(--bg-page); border-radius: var(--radius-lg); }
.slot-card.filled    { background: var(--surface-card); box-shadow: var(--shadow-xs); }
.slot-card .corner-name { font-size: var(--text-lg); }
.slot-card.slot-blue.filled { text-align: right; }
.slot-blue .slot-head { flex-direction: row-reverse; }

.slot-compare { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.slot-compare td { padding: 1px 0; vertical-align: top; }
.slot-compare .sc-label { color: var(--text-muted); width: 42%; }
.slot-compare .sc-value { font-weight: var(--fw-bold); }
.slot-blue .slot-compare .sc-label { text-align: right; width: 58%; padding-right: 0.5rem; }
.slot-blue .slot-compare .sc-value { text-align: right; }

/* Set F1 / Set F2 pickers: hollow until that fighter is assigned, so a solid
   corner colour always means "this person is in that corner" */
.btn-corner {
  background: var(--surface-card);
  border: 1.5px solid currentColor;
  font-weight: var(--fw-semibold);
  transition: background .12s ease, color .12s ease;
}
.btn-corner-red  { color: var(--corner-red); }
.btn-corner-blue { color: var(--corner-blue); }
.btn-corner-red:hover,  .btn-corner-red.is-assigned  { background: var(--corner-red);  border-color: var(--corner-red);  color: #fff; }
.btn-corner-blue:hover, .btn-corner-blue.is-assigned { background: var(--corner-blue); border-color: var(--corner-blue); color: #fff; }

/* Fighter list rows (backgrounds live here, not inline, so selection wins) */
.fighter-row { background: var(--surface-card); transition: background .12s ease, box-shadow .12s ease; }
.fighter-row--withdrawn { background: #FFF5F5; }
.fighter-row--booked    { background: var(--bg-page); }
.fighter-row--red  { box-shadow: inset 4px 0 0 0 var(--corner-red); }
.fighter-row--blue { box-shadow: inset -4px 0 0 0 var(--corner-blue); }