/* GTMA tournament UI — Bootstrap 5 theme layer.

   Bootstrap (vendored in static/vendor/bootstrap/) supplies the grid, navbar,
   buttons, cards, badges, list groups, forms and alerts. This file only holds
   what is GTMA-specific: the red/black palette, the ringside touch targets, the
   medal colours, and the TV display's fluid type scale. */

:root {
  --gtma-red: #d21a1f;
  --gtma-red-dark: #a31317;
  --gtma-gold: #f2c14e;
  --gtma-silver: #c9d4de;
  --gtma-bronze: #d08a4e;
  --gtma-radius: 14px;
}

/* ---------- Palette (Bootstrap dark mode, GTMA-tinted) ---------- */

[data-bs-theme="dark"] {
  --bs-body-bg: #0e1116;
  --bs-body-color: #eef1f4;
  --bs-emphasis-color: #fff;
  --bs-secondary-color: #98a2ae;
  --bs-secondary-bg: #161b23;
  --bs-tertiary-bg: #1d242e;
  --bs-border-color: #2a3340;
  --bs-border-color-translucent: rgba(42, 51, 64, 0.7);
  --bs-link-color: #eef1f4;
  --bs-link-hover-color: #fff;
  --bs-focus-ring-color: rgba(210, 26, 31, 0.35);
}

body {
  font-size: clamp(15px, 1vw + 9px, 20px);
  -webkit-tap-highlight-color: transparent;
}

/* GTMA red is the primary action colour (Bootstrap 5.3 components hard-code
   their own --bs-btn-* vars, so overriding --bs-primary alone is not enough). */
.btn-primary {
  --bs-btn-bg: var(--gtma-red);
  --bs-btn-border-color: var(--gtma-red);
  --bs-btn-hover-bg: var(--gtma-red-dark);
  --bs-btn-hover-border-color: var(--gtma-red-dark);
  --bs-btn-active-bg: var(--gtma-red-dark);
  --bs-btn-active-border-color: var(--gtma-red-dark);
  --bs-btn-disabled-bg: var(--gtma-red);
  --bs-btn-disabled-border-color: var(--gtma-red);
}

.btn-danger {
  --bs-btn-bg: var(--gtma-red-dark);
  --bs-btn-border-color: var(--gtma-red-dark);
}

.text-bg-live {
  background-color: var(--gtma-red);
  color: #fff;
}

/* Ringside targets: fingers, not cursors. */
.btn {
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-padding-x: 1.1rem;
  min-height: 44px;
}

/* .btn-sm stays genuinely small — for the rarely-used or destructive
   controls (disqualify, remove placement, tie resolution). */
.btn-sm {
  --bs-btn-padding-y: 0.2rem;
  --bs-btn-padding-x: 0.6rem;
  min-height: 30px;
  font-size: 0.82rem;
}

/* ---------- App shell ---------- */

.gtma-navbar {
  background-color: rgba(14, 17, 22, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bs-border-color);
}

.gtma-logo {
  height: clamp(30px, 4.5vh, 46px);
  width: auto;
}

.gtma-brand-text {
  font-size: 0.95rem;
  color: var(--bs-secondary-color);
}

.gtma-main {
  max-width: 1400px;
}

.gtma-title {
  font-weight: 800;
  font-size: clamp(24px, 3vw, 40px);
}

/* ---------- Ringside judging panel ---------- */

.gtma-score-slot {
  width: clamp(52px, 8vw, 68px);
  min-height: 48px;
  padding: 4px;
  text-align: center;
  font-size: 1.15em;
  font-weight: 700;
}

.gtma-score-slot.has-score {
  border-color: var(--gtma-red);
  color: #fff;
}

.gtma-row-order {
  min-width: 1.6em;
  text-align: center;
  font-weight: 800;
  color: var(--bs-secondary-color);
}

.gtma-row-name {
  font-weight: 700;
}

.gtma-row-absent {
  opacity: 0.5;
}

.gtma-row-dq {
  border-left: 4px solid var(--gtma-red);
}

.gtma-total {
  min-width: 2.2em;
  font-weight: 800;
  font-size: 1.2em;
  text-align: right;
}

.gtma-standing-rank {
  min-width: 2.2em;
  font-weight: 800;
  font-size: 1.15em;
}

.gtma-standing-total {
  margin-left: auto;
  font-weight: 800;
  font-size: 1.2em;
}

/* Division tabs (hx-get panels). */
.gtma-tabs .nav-link {
  border: 1px solid var(--bs-border-color);
  font-weight: 700;
}

.gtma-tabs .nav-link.active {
  background-color: var(--gtma-red);
  border-color: var(--gtma-red);
}

.gtma-tabs .gtma-tab-done {
  border-color: var(--bs-success);
  color: var(--bs-success);
}

.gtma-tabs .gtma-tab-done.active {
  color: #fff;
}

.gtma-dq-on {
  border-color: var(--gtma-red);
}

/* ---------- Medals & podium ---------- */

.gtma-medal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.2em;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.9em;
  color: #10131a;
}

.gtma-rank-1, .gtma-medal-1 { background-color: var(--gtma-gold); }
.gtma-rank-2, .gtma-medal-2 { background-color: var(--gtma-silver); }
.gtma-rank-3, .gtma-medal-3 { background-color: var(--gtma-bronze); }

.gtma-podium-name {
  font-weight: 800;
  font-size: 1.1em;
}

/* ---------- Sparring match card ---------- */

.gtma-fighter-score {
  font-size: clamp(28px, 5vw, 56px);
  font-weight: 800;
  line-height: 1;
}

.gtma-fighter-win {
  border-color: var(--gtma-gold);
  box-shadow: 0 0 0 2px rgba(242, 193, 78, 0.35);
}

.gtma-clock {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: clamp(24px, 3vw, 40px);
}

.gtma-bracket-match {
  cursor: pointer;
}

.gtma-bracket-match .gtma-bm-win {
  color: var(--gtma-gold);
  font-weight: 800;
}

/* ---------- uventex-mapped controls ---------- */

/* Check-in: the button bar (Reshuffle / Refresh / All Competitors / Split),
   numbered rows with a green check-mark control, and the search box. */
.gtma-checkin-bar .btn { white-space: nowrap; }
.gtma-checkin-row { transition: opacity 0.15s ease; }
.gtma-checkin-check { min-width: 38px; border-radius: 50%; font-weight: 800; }
.gtma-checkin-search { max-width: 220px; }
.gtma-kb-input { max-width: 70px; }
.gtma-kb-panel { border-top: 1px dashed var(--bs-secondary-border-subtle); padding-top: 0.5rem; width: 100%; }
.gtma-winner-check .btn { font-size: 1.5rem; min-width: 64px; border-radius: 50%; }
.gtma-big-clock { font-size: clamp(36px, 5vw, 64px); }
.gtma-warn-counter { font-size: 0.85em; color: var(--bs-danger); font-weight: 700; letter-spacing: 0.05em; }
.gtma-victory-card {
  text-align: center;
  padding: clamp(2rem, 8vh, 5rem) 1.5rem;
}
.gtma-victory-logo { margin-bottom: 1rem; }
.gtma-victory-line {
  font-size: clamp(28px, 5vw, 56px);
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--gtma-gold);
}
.gtma-victory-event { font-size: clamp(18px, 2vw, 28px); margin-top: 0.5rem; text-transform: uppercase; letter-spacing: 0.08em; }
.gtma-victory-name {
  font-size: clamp(40px, 9vw, 96px);
  font-weight: 800;
  margin: 0.75rem 0;
}
.gtma-victory-division { font-size: clamp(16px, 1.8vw, 24px); text-transform: uppercase; letter-spacing: 0.1em; color: var(--bs-secondary); }
.gtma-victory-footer { margin-top: 1.5rem; font-size: 0.85rem; color: var(--bs-secondary); }
.gtma-division-strip .btn { border-radius: 999px; }
.gtma-roster-strip .list-group-item { border-bottom: 1px solid var(--bs-border-color); }

/* ---------- Spectator display (30" TV, read from 20 feet) ---------- */

body.gtma-display {
  overflow: hidden;
  height: 100dvh;
  margin: 0;
}

/* The spectator screen owns the whole viewport: no page padding may push the
   root past it, or the footer (the progress line) is clipped off the bottom. */
body.gtma-display .gtma-main {
  padding: 0;
  max-width: none;
  height: 100dvh;
  overflow: hidden;
}

.gtma-display-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* The scrolling middle must be allowed to shrink, or the header + footer lose
   their space to it and the footer slides off-screen. */
.gtma-display-root #display-body {
  flex: 1 1 auto;
  min-height: 0;
}

.gtma-display-title {
  font-weight: 800;
  font-size: clamp(13px, 1.1vw, 20px);
  color: var(--bs-secondary-color);
}

/* The display header is a slim brand bar, not a navigation: spectators are
   standing in the venue and the hero carries the division identity, so the
   logo + "tournament · ring" line stays small and cheap (every pixel stolen
   from the check-in roster at 720p). */
.gtma-display-root header .gtma-logo {
  height: clamp(18px, 2.2vh, 26px);
}

.gtma-display-hero h1 {
  font-weight: 800;
  /* Sized to keep a long division name + its badges on ONE line at 720p
     (3.4vw wrapped into two lines at 1280 wide, eating ~46px the check-in
     list needs). Grows to 50px at 1080p. */
  font-size: clamp(22px, 2.6vw, 56px);
}

.gtma-display-name {
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 34px);
}

.gtma-display-scores .badge {
  font-size: clamp(16px, 1.6vw, 26px);
  min-width: 2.2em;
}

.gtma-display-total {
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 36px);
  min-width: 2.2em;
  text-align: right;
}

.gtma-display-list .list-group-item {
  padding: clamp(8px, 1.2vh, 16px) clamp(10px, 1.4vw, 20px);
}

/* Check-in running order: what the spectator reads while competitors wait.
   A full 16-competitor roster must fill the screen with no scrolling on
   both display sizes — two columns on a 720p TV, three on a 1080p one, and
   the type scaled in vw so it is as large as each screen allows (measured
   against 1280x720 and 1920x1080 viewports, 16 rows, with headroom for TV
   overscan; 8 or fewer rows stay in one column).

   Multi-column (not grid) is deliberate: the layout-cookbook reading order
   for a numbered list is the continuous thread — 1-8 down the left column,
   9-16 down the right — which grid's row-major auto-placement (1,2 / 3,4)
   does not give. */
.gtma-display-root .gtma-checkin-card > .card-body.gtma-checkin-grid {
  column-count: 2;
  column-gap: clamp(1.5rem, 3vw, 3rem);
}

.gtma-display-root .gtma-checkin-card .py-2 {
  /* Bootstrap's py-2 uses !important, so this must too or the row keeps
     .5rem padding and 16 rows overflow a 720p screen. */
  padding-top: 0.1rem !important;
  padding-bottom: 0.1rem !important;
}

.gtma-display-root .gtma-checkin-card .d-flex.align-items-center {
  break-inside: avoid;
}

.gtma-display-root .gtma-checkin-card > .card-body {
  --bs-card-spacer-y: 0.75rem;
}

.gtma-display-root .gtma-checkin-card .gtma-row-order,
.gtma-display-root .gtma-checkin-card .gtma-display-name {
  font-size: clamp(18px, 2.35vw, 46px);
}

/* One line per row, name ending in "…" only if it cannot fit the column
   (a wrapped row doubles its height and silently breaks the fit). */
.gtma-display-root .gtma-checkin-card .gtma-display-name {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gtma-display-root .gtma-checkin-card .badge {
  font-size: clamp(11px, 1.4vw, 28px);
}

@media (min-width: 1500px) {
  .gtma-display-root .gtma-checkin-card > .card-body.gtma-checkin-grid {
    column-count: 3;
    column-gap: clamp(2rem, 3vw, 4rem);
  }

  .gtma-display-root .gtma-checkin-card .gtma-row-order,
  .gtma-display-root .gtma-checkin-card .gtma-display-name {
    font-size: clamp(20px, 2.55vw, 54px);
  }

  .gtma-display-root .gtma-checkin-card .badge {
    font-size: clamp(12px, 1.5vw, 32px);
  }
}

.gtma-display-rank {
  min-width: 2.4em;
  text-align: center;
  font-weight: 800;
  font-size: clamp(18px, 2vw, 30px);
}

.gtma-display-empty .gtma-big {
  font-size: clamp(28px, 6vw, 64px);
}

.gtma-big {
  font-size: clamp(28px, 6vw, 64px);
  line-height: 1.1;
}

/* The competitor currently up on the judging card. */
.gtma-row-current {
  border-left: 4px solid var(--gtma-red);
  background-color: rgba(210, 26, 31, 0.08);
}

/* The one-competitor-at-a-time judging card. */
.gtma-now-card .gtma-score-slot {
  width: clamp(64px, 9vw, 84px);
  min-height: 60px;
  font-size: 1.4em;
}

/* Display: the competitor currently on the floor. */
.gtma-display-upnow {
  border-color: var(--gtma-red);
  box-shadow: 0 0 0 2px rgba(210, 26, 31, 0.25);
}

/* Sparring: editable score field on the match card. */
.gtma-fighter-input {
  width: 5.5rem;
  min-height: 48px;
  text-align: center;
  font-size: 1.3em;
  font-weight: 800;
}

/* Sparring corner theme (like Uventex, verified from their sparring training
   video): the fighter on the LEFT of the match view is BLUE and the one on
   the RIGHT is RED — the plate carries a corner chip and the score number
   takes the corner color, so the TV and the scorekeeper agree at a glance. */
.gtma-fighter-plate {
  position: relative;
}

.gtma-corner {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  font-size: clamp(11px, 0.8rem, 1rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
  color: #fff;
  z-index: 1;
}

.gtma-corner-right {
  left: auto;
  right: 0.5rem;
}

.gtma-corner-blue {
  background: #1d6ff2;
}

.gtma-corner-red {
  background: var(--gtma-red);
}

.gtma-fighter-score.gtma-score-blue {
  color: #5c9dff;
}

.gtma-fighter-score.gtma-score-red {
  color: #ff6b6f;
}

@media (min-width: 1500px) {
  .gtma-corner {
    font-size: clamp(12px, 1vw, 22px);
  }
}

/* The winner pause card (panel): the scorekeeper sees the result until they
   tap Next match — the sparring echo of the forms park. */
.gtma-winner-big {
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1;
}

.gtma-winner-label {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gtma-gold);
}

.gtma-winner-name {
  font-size: clamp(1.6rem, 3vw, 3rem);
  font-weight: 800;
}

/* Bracket slot styling (the bracket's own name/score spans). */
.bm-name { font-weight: 700; }
.bm-score { font-weight: 800; }