/* ============================================================
   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: pill-shaped, display font ---- */
.btn {
  --bs-btn-border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover  { transform: translateY(-2px); box-shadow: var(--shadow-md) !important; }
.btn:active { transform: translateY(1px) scale(0.97); box-shadow: none !important; }

/* Solid red — the main action (covers the legacy .btn-accent class too) */
.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);
  color: var(--text-on-accent);
}
.btn-accent:hover { color: var(--text-on-accent); }

/* Outline — a secondary action next to the main one */
.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);
}

/* Soft — a quieter action (pale red fill, red text) */
.btn-soft-accent {
  --bs-btn-bg:                  var(--accent-soft);
  --bs-btn-border-color:        var(--accent-soft);
  --bs-btn-color:               var(--accent-strong);
  --bs-btn-hover-bg:            var(--red-200);
  --bs-btn-hover-border-color:  var(--red-200);
  --bs-btn-hover-color:         var(--accent-strong);
}

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

/* Keep grouped/segmented buttons square-jointed, not pill-per-segment */
.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-pill) 0 0 var(--radius-pill); }
.btn-group > .btn:last-child  { --bs-btn-border-radius: 0 var(--radius-pill) var(--radius-pill) 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);
}

/* ---- 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 ---- */
.badge {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
}

/* 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; }

/* Dressing-room switch note — was a hand-coded Bootstrap-blue badge */
.badge-switch {
  background: #E7EAF0;
  color: #3A4252;
  border: 1px solid #C7CEDC;
  font-weight: var(--fw-semibold);
}

/* ---- 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 */

/* ---- Division tabs (Bout Builder) ---- */
.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-pill);
  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-pill);
  padding: 0.05rem 0.45rem;
}
.br-tab.active .br-tab-count { background: rgba(255,255,255,0.18); color: #fff; }

/* ---- Dashboard / archive list: white card rows (Take A) ---- */
.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 + builder) ---- */
.bout-matchup {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.bout-matchup .corner {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.8rem 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.corner-red  { border-left: 6px solid var(--corner-red);   text-align: left;  }
.corner-blue { border-right: 6px solid var(--corner-blue); text-align: right; }
.bout-matchup--confirmed { box-shadow: var(--shadow-xs), inset 0 4px 0 0 #2FA968; }

.bout-center {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0 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-xs);
  background: var(--bg-page);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  padding: 0.18rem 0.7rem;
  white-space: nowrap;
  text-align: center;
}
.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); }

/* ---- 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. ---- */
.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; }

/* Fighter 1 / Fighter 2 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); }

/* ── Non-Latin script support ─────────────────────────────────────────────────
   Barlow and Barlow Semi Condensed only contain Latin characters. For Russian,
   Thai, Chinese and Japanese the browser would silently fall back to whatever
   the operating system picks, which breaks the brand typography completely.
   Each language below keeps Barlow first (so any Latin text — fighter names,
   gym names, "MMA", "70 kg" — still renders in the brand face) and adds a
   matched second font that covers the rest.
   Set on <body> by lang_font_class. See i18n.LANGUAGES. */

.lang-cyrillic {
  --font-display: 'Barlow Semi Condensed', 'Roboto Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-body:    'Barlow', 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.lang-thai {
  --font-display: 'Barlow Semi Condensed', 'Noto Sans Thai', system-ui, sans-serif;
  --font-body:    'Barlow', 'Noto Sans Thai', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.lang-cjk-sc {
  --font-display: 'Barlow Semi Condensed', 'Noto Sans SC', system-ui, sans-serif;
  --font-body:    'Barlow', 'Noto Sans SC', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.lang-cjk-jp {
  --font-display: 'Barlow Semi Condensed', 'Noto Sans JP', system-ui, sans-serif;
  --font-body:    'Barlow', 'Noto Sans JP', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Thai vowel and tone marks stack above and below the letters, so Thai needs
   more room between lines than Latin text or the marks collide. */
.lang-thai { line-height: 1.75; }
.lang-thai h1, .lang-thai h2, .lang-thai h3,
.lang-thai .h1, .lang-thai .h2, .lang-thai .h3 { line-height: 1.4; }

/* Thai has no spaces between words, so the browser can't find a line break.
   Let it break anywhere rather than overflow the card. */
.lang-thai { word-break: break-word; overflow-wrap: anywhere; }

/* CJK doesn't suit the tight tracking the brand uses on Latin display type. */
.lang-cjk-sc [style*="letter-spacing"],
.lang-cjk-jp [style*="letter-spacing"] { letter-spacing: normal !important; }

/* Translated labels run longer than English in every language we support:
   measured worst case is French at ~143% average across buttons and pills,
   with individual labels up to 2-3x ("TBD" -> "Vacant"). Bootstrap sets
   white-space: nowrap on badges, which would push them out of their container,
   so let the tight components wrap instead of overflowing.
   Scoped to .lang-intl (set on <body> for every language except English) so
   the English layout is untouched. */
.lang-intl .br-tab,
.lang-intl .btn,
.lang-intl .badge { white-space: normal; }

/* Keep a wrapped badge readable rather than one character per line. */
.lang-intl .badge { text-align: left; }

/* The fight-card corner name is a big uppercase display slot sized around short
   names. A long placeholder ("Вакантно", "A definir") must shrink rather than
   spill over the corner stripe. */
.lang-intl .corner-name { overflow-wrap: anywhere; }
.lang-intl .corner-name.is-placeholder { font-size: var(--text-md); }

/* Sidebar is a fixed 220px; long nav labels wrap onto a second line. */
.lang-intl .sidebar-link { white-space: normal; line-height: 1.25; }