/**
 * brackets_dark.css — Sprint 14
 * Affichage brackets en thème glassmorphism dark pour l'interface JAP (tableaux.html)
 * Les --gd-* variables sont définies dans le <style> du template
 */

/* ============================================================================
   VARIABLES BRACKET
   ============================================================================ */
:root {
  --match-h:                104px;   /* 21px info-match + 83px match card (2×40 teams + 1 divider + 2 borders) */
  --base-gap:               15px;
  --connector-width:        28px;
  --parent-connector-width: 16px;
  --round-width:            185px;
  --round-gap:              48px;
  --connector-color:        rgba(255,255,255,0.35);
}

/* ============================================================================
   CONTAINER PRINCIPAL
   ============================================================================ */
.bracket {
  display: flex;
  gap: var(--round-gap);
  overflow-x: auto;
  padding: 20px 8px 24px 4px;
  background: transparent;
  min-height: 160px;
  align-items: flex-start;
  scrollbar-width: thin;
  scrollbar-color: rgba(105,139,197,0.25) transparent;
}

.bracket::-webkit-scrollbar         { height: 5px; }
.bracket::-webkit-scrollbar-track   { background: transparent; }
.bracket::-webkit-scrollbar-thumb   { background: rgba(105,139,197,0.25); border-radius: 99px; }

/* ============================================================================
   COLONNE ROUND
   ============================================================================ */
.round {
  flex: 0 0 auto;
  width: var(--round-width);
  display: flex;
  flex-direction: column;
}

.round-matchs {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* ============================================================================
   EN-TÊTE DE ROUND — pill glassmorphism
   ============================================================================ */
.round-header {
  background: rgba(105,139,197,0.18);
  border: 1px solid rgba(105,139,197,0.32);
  border-radius: 8px;
  padding: 7px 11px;
  margin-bottom: 16px;
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.20);
}

.round-header h6 {
  font-weight: 800 !important;
  color: var(--gd-accent, #698BC5) !important;
  font-size: 0.58rem !important;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin: 0 !important;
}

/* ============================================================================
   CONTAINER D'UN MATCH
   ============================================================================ */
.match-container {
  position: relative;     /* requis pour les connecteurs absolus */
  width: 100%;
  background: transparent;
  box-shadow: none;
  border-radius: 10px;
  overflow: visible;      /* les connecteurs sortent du container */
  cursor: default;
  transition: none;
}

/* BYE (r0 uniquement) : 1 équipe vs BYE — carte + connecteurs invisibles, espace conservé */
.match-container.bye-match .match,
.match-container.bye-match .info-match,
.match-container.bye-match .connector {
  visibility: hidden;
}

/* Gap fix : annule le margin-bottom exponentiel sur le match final quand
   la petite finale le suit directement (finale n'est plus :last-child) */
.match-container:has(+ .petit-finale-container) {
  margin-bottom: 0 !important;
}

/* Info-match — bande au-dessus de la carte match
   Hauteur 21px : 21 + (1 + 40 + 1 + 40 + 1) = 104px = --match-h */
.info-match {
  height: 21px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  font-size: 0.61rem;
  line-height: 1;
}

/* Score saisi : aligné à droite, couleur neutre */
.info-match .inm-score {
  width: 100%;
  text-align: right;
  color: rgba(255,255,255,0.50);
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* Créneau/terrain (gauche) — bleu accent gras */
.info-match .inm-left {
  color: var(--gd-accent, #698BC5);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 72%;
}

/* Format match (droite) — gris discret gras */
.info-match .inm-right {
  color: rgba(255,255,255,0.30);
  font-weight: 700;
  flex-shrink: 0;
  margin-left: 4px;
}

/* ============================================================================
   CARTE MATCH — GLASSMORPHISM DARK
   ============================================================================ */
.match {
  background: linear-gradient(160deg, rgba(105,139,197,0.30) 0%, rgba(105,139,197,0.16) 100%);
  border: 1px solid rgba(105,139,197,0.48);
  border-radius: 10px;
  overflow: hidden;
  font-size: 0.8rem;
  position: relative;
  transition: border-color 0.18s, box-shadow 0.18s;
}

/* Barre d'accent gauche — identique aux creneau-slot occupés */
.match::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: rgba(105,139,197,0.40);
  border-radius: 10px 0 0 10px;
  pointer-events: none;
}

.match-container:hover .match {
  border-color: rgba(105,139,197,0.35);
  box-shadow: 0 0 16px rgba(105,139,197,0.12), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ── Ligne équipe ── */
.match .team {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 0 8px;
  gap: 6px;
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  transition: background 0.12s;
  position: relative;
  box-sizing: border-box;
}

.match .team:last-child {
  border-bottom: none;
}

/* ── Seed badge — bleu accent (harmonieux avec le thème) ── */
.match .team .seed {
  font-size: 0.58rem;
  font-weight: 800;
  min-width: 20px;
  text-align: center;
  padding: 2px 4px;
  border-radius: 4px;
  background: rgba(105,139,197,0.12);
  color: #8AAEE0;
  border: 1px solid rgba(105,139,197,0.28);
  flex-shrink: 0;
  line-height: 1.4;
}

/* Seed vide/point */
.match .team .seed:empty,
.match .team .seed:contains("·") {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.28);
  min-width: 18px;
}

/* Badge Qualifié Entrant — amber pour distinguer visuellement */
.match .team .seed.seed-qe {
  background: rgba(251,191,36,0.10);
  color: #f59e0b;
  border-color: rgba(251,191,36,0.25);
  min-width: 22px;
}

/* ── Nom équipe ── */
.match .team .name {
  flex: 1;
  color: rgba(255,255,255,0.78);
  font-size: 0.72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

/* ── Score ── */
.match .team .score {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255,255,255,0.65);
  min-width: 0;
  text-align: right;
  flex-shrink: 0;
  margin-left: 2px;
}

/* ── GAGNANT — border-left bleu + nom en gras (uniquement si score saisi, géré par template) ── */
.match.winner-top .match-top,
.match.winner-bottom .match-bottom {
  border-left: 2px solid #698BC5;
  padding-left: 6px;
}

.match.winner-top    .match-top .name,
.match.winner-bottom .match-bottom .name {
  color: rgba(255,255,255,0.92);
  font-weight: 700;
}

/* ── PERDANT — nom estompé ── */
.match.winner-top    .match-bottom .name,
.match.winner-bottom .match-top    .name {
  color: rgba(255,255,255,0.35);
}

/* ============================================================================
   ESPACEMENT EXPONENTIEL
   Formule : margin-top[n] = margin-top[n-1] + (match-h + margin-bottom[n-1]) / 2
             margin-bottom[n] = (2^n - 1) * match-h + 2^n * base-gap
   Avec match-h=104px, base-gap=15px
   ============================================================================ */

/* Round 0 — espacement plat */
.round.r0 .match-container:not(:last-child) {
  margin-bottom: var(--base-gap); /* 15px */
}

/* Round 1 — connector h=(104+15)/2=59.5 | mb=(2-1)*104+2*15=134 */
.round.r1 .match-container:first-child      { margin-top: 59.5px; }
.round.r1 .match-container:not(:last-child) { margin-bottom: 134px; }

/* Round 2 — connector h=(104+134)/2=119 | mb=(4-1)*104+4*15=372 */
.round.r2 .match-container:first-child      { margin-top: 178.5px; }
.round.r2 .match-container:not(:last-child) { margin-bottom: 372px; }

/* Round 3 — connector h=(104+372)/2=238 | mb=(8-1)*104+8*15=848 */
.round.r3 .match-container:first-child      { margin-top: 416.5px; }
.round.r3 .match-container:not(:last-child) { margin-bottom: 848px; }

/* Round 4 — connector h=(104+848)/2=476 | mb=(16-1)*104+16*15=1800 */
.round.r4 .match-container:first-child      { margin-top: 892.5px; }
.round.r4 .match-container:not(:last-child) { margin-bottom: 1800px; }

/* Round 5 — connector h=(104+1800)/2=952 | mb=(32-1)*104+32*15=3704 */
.round.r5 .match-container:first-child      { margin-top: 1844.5px; }
.round.r5 .match-container:not(:last-child) { margin-bottom: 3704px; }

/* ============================================================================
   CONNECTEURS — L-shape border avec bras droit vers la carte match
   Forme : bras gauche (border-top/bottom) → angle arrondi → barre verticale
           (border-right) → bras droit (::before) → carte match suivante

   Positionnement :
     left = -(connector-width + parent-connector-width) = -(28+16) = -44px
     width = parent-connector-width = 16px  (largeur du bras gauche)
     border-right = barre verticale sur le bord droit du div (-28px du match)
     border-top/.bottom = bras gauche vers le match source
     ::before = bras droit de 28px vers la carte du match courant (at match center)
   ============================================================================ */
.connector {
  position: absolute;
  background: transparent;
  pointer-events: none;
  border-color: var(--connector-color);
  border-style: solid;
}

/* ── Round 1 ── (h = 59.5px) */
.round.r1 .connector.top,
.round.r1 .connector.bottom {
  left: calc(-1 * var(--connector-width) - var(--parent-connector-width));
  width: var(--parent-connector-width);
  height: 59.5px;
}
.round.r1 .connector.top    { bottom: 50%; border-width: 1px 1px 0 0; border-radius: 0 3px 0 0; }
.round.r1 .connector.bottom { top: 50%;   border-width: 0 1px 1px 0; border-radius: 0 0 3px 0; }
.round.r1 .connector.top::before,
.round.r1 .connector.bottom::before {
  content: ''; position: absolute; left: 100%;
  width: var(--connector-width); height: 1px; background: var(--connector-color);
}
.round.r1 .connector.top::before    { bottom: 0; }
.round.r1 .connector.bottom::before { top: 0; }

/* ── Round 2 ── (h = 119px) */
.round.r2 .connector.top,
.round.r2 .connector.bottom {
  left: calc(-1 * var(--connector-width) - var(--parent-connector-width));
  width: var(--parent-connector-width);
  height: 119px;
}
.round.r2 .connector.top    { bottom: 50%; border-width: 1px 1px 0 0; border-radius: 0 3px 0 0; }
.round.r2 .connector.bottom { top: 50%;   border-width: 0 1px 1px 0; border-radius: 0 0 3px 0; }
.round.r2 .connector.top::before,
.round.r2 .connector.bottom::before {
  content: ''; position: absolute; left: 100%;
  width: var(--connector-width); height: 1px; background: var(--connector-color);
}
.round.r2 .connector.top::before    { bottom: 0; }
.round.r2 .connector.bottom::before { top: 0; }

/* ── Round 3 ── (h = 238px) */
.round.r3 .connector.top,
.round.r3 .connector.bottom {
  left: calc(-1 * var(--connector-width) - var(--parent-connector-width));
  width: var(--parent-connector-width);
  height: 238px;
}
.round.r3 .connector.top    { bottom: 50%; border-width: 1px 1px 0 0; border-radius: 0 3px 0 0; }
.round.r3 .connector.bottom { top: 50%;   border-width: 0 1px 1px 0; border-radius: 0 0 3px 0; }
.round.r3 .connector.top::before,
.round.r3 .connector.bottom::before {
  content: ''; position: absolute; left: 100%;
  width: var(--connector-width); height: 1px; background: var(--connector-color);
}
.round.r3 .connector.top::before    { bottom: 0; }
.round.r3 .connector.bottom::before { top: 0; }

/* ── Round 4 ── (h = 476px) */
.round.r4 .connector.top,
.round.r4 .connector.bottom {
  left: calc(-1 * var(--connector-width) - var(--parent-connector-width));
  width: var(--parent-connector-width);
  height: 476px;
}
.round.r4 .connector.top    { bottom: 50%; border-width: 1px 1px 0 0; border-radius: 0 3px 0 0; }
.round.r4 .connector.bottom { top: 50%;   border-width: 0 1px 1px 0; border-radius: 0 0 3px 0; }
.round.r4 .connector.top::before,
.round.r4 .connector.bottom::before {
  content: ''; position: absolute; left: 100%;
  width: var(--connector-width); height: 1px; background: var(--connector-color);
}
.round.r4 .connector.top::before    { bottom: 0; }
.round.r4 .connector.bottom::before { top: 0; }

/* ── Round 5 ── (h = 952px) */
.round.r5 .connector.top,
.round.r5 .connector.bottom {
  left: calc(-1 * var(--connector-width) - var(--parent-connector-width));
  width: var(--parent-connector-width);
  height: 952px;
}
.round.r5 .connector.top    { bottom: 50%; border-width: 1px 1px 0 0; border-radius: 0 3px 0 0; }
.round.r5 .connector.bottom { top: 50%;   border-width: 0 1px 1px 0; border-radius: 0 0 3px 0; }
.round.r5 .connector.top::before,
.round.r5 .connector.bottom::before {
  content: ''; position: absolute; left: 100%;
  width: var(--connector-width); height: 1px; background: var(--connector-color);
}
.round.r5 .connector.top::before    { bottom: 0; }
.round.r5 .connector.bottom::before { top: 0; }

/* ============================================================================
   LABEL DE PLACE — sous la carte du match de finale (position absolute)
   N'affecte pas la hauteur du match-container (→ connecteurs non perturbés)
   ============================================================================ */
.info-match-bottom {
  position: absolute;
  bottom: -19px;
  left: 0;
  right: 0;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.48rem;
  color: rgba(255,255,255,0.22);
  line-height: 1;
  pointer-events: none;
}

/* ============================================================================
   PETITE FINALE — dans la colonne finale, sous la finale principale
   ============================================================================ */
.petit-finale-container {
  margin-top: 20px;
}

/* Pas de connecteur sur la petite finale */
.petit-finale-container .connector {
  display: none;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 768px) {
  :root {
    --round-width:            200px;
    --round-gap:              32px;
    --connector-width:        12px;
    --parent-connector-width: 12px;
  }
}