/**
 * BirdieLogic — Mobile Scoring Redesign (override layer)
 * --------------------------------------------------------
 * Load AFTER screens.css. Override-only: no markup changes required.
 * Targets the existing live-scoring DOM (live.js):
 *   .scoring-layout > .scoring-main / .scoring-sidebar
 *   .score-display > .score-teams > .score-team(.team-1/.team-2) > .team-name + .team-points
 *   .score-buttons > .btn-score-team(.btn-score-team-1/-2) > .btn-label + .btn-action
 *   .action-buttons > .let-btn + .btn-warning
 *   .court-view(.court-horizontal) > .court-team-label(.ch-label) / .ch-net / .court-position(.serving)
 *
 * Uses BirdieLogic design tokens (variables.css). Brand-faithful: navy + teal.
 * Scoped to the scoring screen so the rest of the app is untouched.
 */

/* ============================================================
   1. SCOREBOARD — bigger, glanceable, tabular numerals
   ============================================================ */
#screen-scoring .score-display {
  padding: var(--space-sm) 0 var(--space-md);
}
#screen-scoring .score-teams {
  align-items: center;
  gap: var(--space-sm);
}
/* Symmetric team blocks: name centered on top (wraps, never clips), number below */
#screen-scoring .score-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  max-width: 44vw;
}
#screen-scoring .score-team .team-name {
  order: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-extrabold);
  color: var(--text-primary);
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  text-align: center;
  line-height: 1.12;
  /* reserve two lines so both numbers stay on the same baseline */
  min-height: 2.24em;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
#screen-scoring .score-team .team-points { order: 1; }
#screen-scoring .score-team .team-points {
  font-size: clamp(72px, 22vw, 132px);
  line-height: 0.82;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
}
#screen-scoring .score-separator {
  align-self: center;
  margin-top: 0.6em;
  color: var(--gray-600);
  font-weight: var(--font-weight-normal);
}

/* ============================================================
   2. SCORE BUTTONS — anchored to the thumb zone on phones
   ============================================================ */
#screen-scoring .score-buttons {
  display: flex;
  gap: var(--space-md);
}
#screen-scoring .btn-score-team {
  flex: 1;
  min-height: 84px;
  border-radius: var(--radius-lg);
  border: none;
  gap: 2px;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
/* Use each team's dynamically-set color (--team-1/--team-2 from .scoring-layout),
   lightened at the top for depth. Text color and shadow are set per-team based on
   luminance (--team-1-text / --team-2-text computed in scoringUI.render()). */
#screen-scoring .btn-score-team-1 {
  background: linear-gradient(165deg,
    color-mix(in srgb, var(--team-1, #3b82f6) 72%, #fff),
    var(--team-1, #3b82f6));
  color: var(--team-1-text, #fff);
  text-shadow: var(--team-1-text-shadow, 0 1px 2px rgba(0,0,0,0.35));
}
#screen-scoring .btn-score-team-2 {
  background: linear-gradient(165deg,
    color-mix(in srgb, var(--team-2, #f472b6) 72%, #fff),
    var(--team-2, #f472b6));
  color: var(--team-2-text, #fff);
  text-shadow: var(--team-2-text-shadow, 0 1px 2px rgba(0,0,0,0.35));
}
#screen-scoring .btn-score-team .btn-label {
  font-weight: var(--font-weight-extrabold);
  opacity: 0.95;
  font-size: clamp(12px, 3.2vw, 15px);
  line-height: 1.1;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
}
#screen-scoring .btn-score-team .btn-action {
  font-size: var(--font-size-3xl);
  font-weight: 900;
}

/* Secondary actions: quieter than +1 so the hero action stays obvious */
#screen-scoring .action-buttons {
  gap: var(--space-sm);
}
#screen-scoring .action-buttons .let-btn,
#screen-scoring .action-buttons .btn-warning {
  min-height: 46px;
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
}

/* ============================================================
   3. COURT — umpire (horizontal) view with colored team pills
   ============================================================ */
#screen-scoring .court-view-header h4 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
/* Plain text label, no pill background.
   Override display:flex+justify-content:center from components.css so
   text-overflow:ellipsis fires correctly and text aligns from the left. */
#screen-scoring .court-team-label {
  display: block;
  background: none;
  border-radius: 0;
  box-shadow: none;
  padding: 2px 4px;
  font-size: clamp(11px, 3vw, 13px);
  font-weight: var(--font-weight-extrabold);
  color: #fff;
  text-align: left;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ---- The court surface: green with a painted outer boundary line ---- */
#screen-scoring .court-view.court-horizontal {
  background: linear-gradient(160deg, #2f8f51, #1f6b3a);
  border-radius: 9px;
  overflow: hidden;
  padding: 9px;
  gap: 0;
  box-shadow:
    inset 0 0 26px rgba(0, 0, 0, 0.22),
    0 6px 16px rgba(0, 0, 0, 0.22);
  position: relative;
}
[data-theme="light"] #screen-scoring .court-view.court-horizontal {
  background: linear-gradient(160deg, #1a5c8a, #154d76);
}
/* Team-name pills sit above the court markings */
#screen-scoring .court-horizontal .ch-label {
  margin-bottom: 6px;
  z-index: 1;
}

/* ---- Each player box = a service court. Thin 1px white lines, NO gap or
   radius, so adjacent boxes merge into single continuous court lines
   (one clean dividing line between the two players on a side). ---- */
#screen-scoring .court-position {
  border-radius: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.5);
  margin: 0;
  font-weight: var(--font-weight-bold);
  color: #f3fff7;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  z-index: 1;
}
#screen-scoring .court-position.serving {
  background: var(--service);
  color: #1a1205;
  border-color: #fde68a;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.55);
  text-shadow: none;
}

/* ---- Realistic vertical net in the centre column (mesh + posts) ---- */
#screen-scoring .court-horizontal .ch-net-active {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.5) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 1px, transparent 1px 6px),
    rgba(0, 0, 0, 0.16);
  border-left: 2px solid rgba(255, 255, 255, 0.9);
  border-right: 2px solid rgba(255, 255, 255, 0.9);
  color: #fff;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.08em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  z-index: 1;
}
/* the empty net cell in the label row stays clear */
#screen-scoring .court-horizontal .ch-net { position: relative; }

/* ============================================================
   3b. SIDE MIRROR — when the umpire swaps court sides
   (.court-swapped on .scoring-layout), mirror the score blocks and
   the +1 buttons so each team stays on the same side as the court.
   Team COLOURS stay fixed (carried by .team-1/.team-2) — only
   horizontal POSITION mirrors.
   ============================================================ */
#screen-scoring .scoring-layout.court-swapped .score-teams,
#screen-scoring .scoring-layout.court-swapped .score-buttons {
  flex-direction: row-reverse;
}

/* ============================================================
   4. SERVING / LIVE chrome polish
   ============================================================ */
#screen-scoring .live-indicator {
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.06em;
}

/* ============================================================
   5. MOBILE LAYOUT — EVERYTHING on one screen, no scrolling, at
      any height. Score pinned top, court shrinks to fit, +1/Let
      below it, rally history as a thin strip at the very bottom
      (lowest priority for a scorer).  (<=900px = sidebar dropped)
   ============================================================ */
@media (max-width: 900px) {
  /* Natural flow — NO forced viewport height (that was the source of the
     dead space + clipping). Content is compact enough to fit a phone with
     no scroll; if a very small device overflows, it scrolls normally. */
  #screen-scoring .scoring-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding-top: var(--space-xs);
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }

  /* Order: score → court → +1 → Let/Fault → rally (least important, last) */
  /* Bleed past the container's side padding so the icon row gets full width
     to breathe, instead of squeezing into scoring-container's inner padding. */
  #screen-scoring .scoring-header     { order: 0; margin: 0 calc(-1 * var(--space-sm)); padding: 0 var(--space-xs); }
  #screen-scoring .games-won          { order: 1; margin: 0; }
  #screen-scoring .score-display      { order: 2; padding: var(--space-xs) 0; }
  #screen-scoring .court-view-section { order: 3; margin: 0; }
  #screen-scoring .score-buttons      { order: 4; margin: 0; }
  #screen-scoring .action-buttons     { order: 5; margin: 0; }
  #screen-scoring .rally-history-section { order: 6; margin: var(--space-md) 0 0; }
  #screen-scoring .rally-history      { max-height: 96px; overflow-y: auto; padding: var(--space-sm); }

  /* Court sits right under its header */
  #screen-scoring .court-view-section > .court-view { margin-top: 0; }

  /* Compaction + breathing room */
  #screen-scoring .score-team               { min-width: 0; }
  #screen-scoring .score-team .team-name    { min-height: 2.1em; }
  #screen-scoring .score-team .team-points  { font-size: clamp(46px, 14vw, 84px); }
  #screen-scoring .court-view-section h4    { margin: 0 0 var(--space-xs); }
  #screen-scoring .rally-history-section h4 { margin: 0 0 2px; }
  #screen-scoring .court-view-header        { margin: 0 0 var(--space-xs); }
  #screen-scoring .court-view               { gap: 6px; padding: 8px; }
  #screen-scoring .court-team-label         { padding: 5px 8px; }
  #screen-scoring .court-position           { min-height: 0; padding: var(--space-xs) var(--space-sm); }
  #screen-scoring .btn-score-team           { min-height: 56px; }
}

/* very small phones (iPhone SE): trim a touch more */
@media (max-width: 360px) {
  #screen-scoring .score-team .team-points { font-size: clamp(40px, 13vw, 72px); }
  #screen-scoring .btn-score-team { min-height: 50px; }
}

/* ============================================================
   T7. MICRO-POLISH
   ============================================================ */

/* Card press feedback — border snaps to focus color on tap */
.match-card:active,
.tournament-card:active {
  border-color: var(--border-focus);
}


/* Section-label letter-spacing — consistent .06em across all surfaces */
.pub-tournaments-title,
.scoring-sidebar .sidebar-title,
.play-log-game-header {
  letter-spacing: 0.06em;
}

/* ============================================================
   T12. RALLY STRIP — tighter gap + raised number contrast
   ============================================================ */
#screen-scoring .rally-history {
  gap: 4px;
}
#screen-scoring .rally-history [class*="team1"],
#screen-scoring .rally-history [class*="team2"] {
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

/* ============================================================
   T9. CARD RADIUS — one value across all primary card surfaces
   ============================================================ */
.tournament-card,
.stat-card,
.pub-t-card,
.group-card,
.match-card,
.qm-player-card,
.sb-player-card {
  border-radius: var(--radius-lg);
}

/* ============================================================
   T8. BUTTON HIERARCHY — dashboard header
   Quick Match becomes a quiet secondary; New Tournament stays solid.
   ============================================================ */
.dashboard-actions .btn-success {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  box-shadow: none;
}
.dashboard-actions .btn-success:hover {
  background: var(--bg-hover);
  border-color: var(--border-focus);
  color: var(--text-primary);
}

/* ============================================================
   T11. FOOTER SAFE-AREA — clear home indicator on notched phones
   ============================================================ */
.page-footer {
  padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom, 0px));
}

/* ============================================================
   T10. REDUCED MOTION — respect OS preference
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .badge-live-dot,
  .sb-sync-dot { animation: none !important; }
  * { scroll-behavior: auto !important; }
}

/* ============================================================
   T6. TOUCH TARGETS — reorder arrows + kebab ≥40px on mobile
   Glyph size unchanged; only hit area / padding expanded.
   ============================================================ */
@media (max-width: 768px) {
  .reorder-btn,
  .match-kebab-btn {
    min-width: 40px;
    min-height: 40px;
  }
  /* Keep the actions row on one line: tighten Start button padding */
  .match-actions-right .btn {
    padding-left: var(--space-xs);
    padding-right: var(--space-xs);
  }
}

/* ============================================================
   T5. EMPTY / ZERO STATES — soften zero values visually
   JS can add .is-zero to a .stat-value to dim it; without JS the
   rule is a no-op today but ready when wired.
   ============================================================ */
.stat-value.is-zero,
.stat-card .stat-value[data-zero="true"] {
  color: var(--text-muted);
  font-weight: var(--font-weight-medium);
}

/* ============================================================
   T4. BADGE CONSISTENCY — unified shape / size across all surfaces
   Harmonises landing, dashboard, match-list, and group-history pills.
   State→colour mappings stay as defined in components.css.
   ============================================================ */
.badge,
.match-status-slot .badge,
.group-match-status {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  padding: 3px 9px;
}

/* ============================================================
   T3. DASHBOARD TABS — tighter padding on small screens
   Tabs already scroll (overflow-x:auto in components.css);
   reduce horizontal padding so all four fit on 360–400px.
   ============================================================ */
@media (max-width: 400px) {
  .tabs .tab {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }
}

/* ============================================================
   T1. TABULAR NUMERALS — all score / stat surfaces
   Override --font-mono fallback (JetBrains Mono not loaded);
   use body font with equal-width figures instead.
   ============================================================ */
.match-team-score,
.scorecard-game-score,
.play-log-score,
.stat-value,
.match-number,
#screen-scoring .score-team .team-points {
  font-family: var(--font-family);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   LANDING HERO — polish (additive, both themes)
   The hero background is ALWAYS dark (light AND dark theme),
   so all text/accents here are light-on-dark regardless of theme.
   ============================================================ */
.landing-hero {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}
/* Fade the grid overlay toward bottom-left so it reads as depth, not wallpaper. */
.landing-hero::before {
  -webkit-mask-image: radial-gradient(125% 105% at 85% 0%, #000 32%, transparent 80%);
          mask-image: radial-gradient(125% 105% at 85% 0%, #000 32%, transparent 80%);
}
/* Oversized shuttle motif, top-right, for athletic energy. */
.landing-hero::after {
  content: '🏸';
  position: absolute;
  top: -16px;
  right: -14px;
  font-size: 130px;
  line-height: 1;
  transform: rotate(22deg);
  opacity: 0.10;
  pointer-events: none;
  z-index: 0;
}
/* Badge chip: a little more presence. */
.landing-hero-badge {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.82);
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
/* Title: bigger, tighter, punchier — balanced wrapping. */
.landing-title {
  font-size: clamp(2.15rem, 8.5vw, 3.3rem);
  letter-spacing: -0.02em;
  line-height: 1.03;
  text-wrap: balance;
  margin-bottom: var(--space-md);
}
/* Accent MUST stay bright on the always-dark hero in BOTH themes.
   (var(--teal) resolves to a dark BWF-blue in light theme = low contrast here.) */
.landing-title-accent,
[data-theme="light"] .landing-title-accent {
  color: #5fe0d2;
  -webkit-text-fill-color: #5fe0d2;
}
/* Subtitle: slightly brighter and a comfortable measure. */
.landing-subtitle {
  color: rgba(255, 255, 255, 0.74);
  font-size: clamp(1rem, 4vw, 1.12rem);
  max-width: 34ch;
}

/* ============================================================
   MATCH-CARD FOOTER — compact the action row toward header height
   (Reclaims the vertical space T6 added; keeps taps usable at 34px.)
   ============================================================ */
.match-actions {
  margin-top: var(--space-xs);
  padding-top: var(--space-xs);
}
.match-actions .btn {
  min-height: 32px;
  padding-top: 3px;
  padding-bottom: 3px;
  line-height: 1.2;
}
.match-actions .reorder-btn {
  height: 32px;
}
@media (max-width: 768px) {
  .reorder-btn,
  .match-kebab-btn {
    min-width: 34px;
    min-height: 34px;
  }
}

/* ============================================================
   LIGHT THEME — soften the canvas (reduce the "sea of white")
   Calm off-white page + solid-white cards that lift off it.
   Dark theme unaffected.
   ============================================================ */
[data-theme="light"] {
  --bg-card: #ffffff;
  --bg-card-hover: #ffffff;
  --bg-secondary: #eef2f6;
  --border: rgba(15, 23, 42, 0.11);
  --border-color: rgba(15, 23, 42, 0.11);
  --border-subtle: rgba(15, 23, 42, 0.07);
  --surface-raised: #eef2f6;
  --bg-elevated: #f5f8fb;
  /* primary-light used as badge/chip backgrounds — keep it a soft blue tint, not the BWF navy */
  --primary-light: #dbeafe;
}
/* Teal-tinted backgrounds that hardcode the dark-theme teal rgba — remap to BWF blue in light */
[data-theme="light"] .dashboard-pending-reg {
  background: rgba(26, 92, 138, 0.10);
  border-color: rgba(26, 92, 138, 0.25);
}
[data-theme="light"] .wiz-method-card:hover { background: rgba(26, 92, 138, 0.06); }
[data-theme="light"] .wiz-draft-pick-btn:hover { background: rgba(26, 92, 138, 0.12); }
[data-theme="light"] body {
  background: #e7edf2;
}
/* Keep the top/bottom chrome as clean white bars against the soft canvas. */
[data-theme="light"] .app-header,
[data-theme="light"] .page-footer {
  background: #e7edf2;
}
/* Subtle lift so solid-white cards read as "paper" on the canvas. */
[data-theme="light"] .tournament-card,
[data-theme="light"] .stat-card,
[data-theme="light"] .pub-t-card,
[data-theme="light"] .match-card,
[data-theme="light"] .card,
[data-theme="light"] .landing-host-card {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

/* ============================================================
   BALANCED TITLES — prevent orphaned last words on wrap
   Only applied to titles that actually wrap (not ellipsis/nowrap ones).
   ============================================================ */
.tournament-card__name,
.pub-t-card__name,
.landing-host-card__title,
.celebration-banner {
  text-wrap: balance;
}