:root {
    --bg: #f4f1e9;
    --panel: #ffffff;
    --ink: #2b2620;
    --muted: #6b6459;
    --accent: #7a5230;
    --accent-dark: #5a3b21;
    --sand: #d9c9a3;
    --green: #4c7a3d;
    --red: #a1362b;
    --border: #e0d7c2;
    --radius: 10px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.5;
}

a { color: var(--accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

header.topbar {
    background: var(--accent-dark);
    color: #fff;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

header.topbar a { color: #fff; }
header.topbar .brand { font-weight: 700; font-size: 1.2rem; }
header.topbar nav a { margin-left: 16px; }
header.topbar .nav-separator { margin-left: 16px; color: rgba(255, 255, 255, 0.35); }

main.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px;
}

h1, h2, h3 { color: var(--accent-dark); }

.panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 20px;
}

.panel > details > summary {
    color: var(--accent-dark);
    font-size: 1.3rem;
    font-weight: 700;
    cursor: pointer;
}
.panel > details > summary::marker { color: var(--muted); }
.panel > details[open] > summary { margin-bottom: 14px; }
.panel > details table { margin-top: 4px; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; font-size: 0.9rem; }

form.inline { display: inline; }

.form-grid { display: grid; gap: 10px; max-width: 420px; }
.form-grid label { font-weight: 600; font-size: 0.9rem; color: var(--muted); }
.form-grid input, .form-grid select { padding: 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 1rem; }

.checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px;
}
.checkbox-item { font-weight: normal; font-size: 0.95rem; color: var(--ink); display: flex; align-items: center; gap: 8px; }

button, .btn {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95rem;
}
button:hover, .btn:hover { background: var(--accent-dark); text-decoration: none; }
button.danger, .btn.danger { background: var(--red); }
button.secondary, .btn.secondary { background: var(--muted); }

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}
.badge.draft { background: #e5e0d4; color: var(--muted); }
.badge.scheduled { background: #dce8fb; color: #2d5ea8; }
.badge.in_progress { background: #fde9c8; color: #8a5a00; }
.badge.finished { background: #dcefd4; color: var(--green); }

.flash {
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 16px;
}
.flash.error { background: #fbe2df; color: var(--red); }
.flash.success { background: #e0f0da; color: var(--green); }

.bracket {
    position: relative;
    display: flex;
    gap: 40px;
    overflow-x: auto;
    padding: 4px 4px 14px;
}
/* Chaque colonne : l'entete (h3) reste fixe en haut, .bracket-round-matches se
   partage tout l'espace restant, meme si les colonnes ont ete etirees a la meme
   hauteur (align-items: stretch par defaut sur .bracket) -- sans cette separation,
   le h3 fait partie de la distribution "space-around" et se decale d'une colonne
   a l'autre. */
.bracket-round { min-width: 220px; display: flex; flex-direction: column; }
.bracket-round h3 { text-align: center; font-size: 0.95rem; margin: 0 0 16px; }
/* Cartes individuelles (non groupees), distribuees par justify-content: space-around :
   avec une hauteur de carte uniforme (cf. .match-body plus bas), les mathematiques du
   flexbox garantissent que la carte n du tour suivant tombe exactement au milieu des
   cartes (2n-1) et (2n) de ce tour -- grouper les cartes par paire de DOM cassait cette
   propriete (l'espacement entre paires differe de l'espacement entre paires du tour
   suivant). Les traits de connexion sont donc dessines par-dessus en JS (mesure des
   positions reelles), cf. assets/js/bracket-connectors.js. */
.bracket-round-matches { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 20px; }

.bracket-connector { position: absolute; background: var(--border); pointer-events: none; }
.bracket-connector.h { height: 2px; }
.bracket-connector.v { width: 2px; }

.match-card {
    position: relative;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.9rem;
}
.match-card .team { display: flex; justify-content: space-between; padding: 4px 0; }
.match-card .team.winner { font-weight: 700; color: var(--green); }
.match-card .status { font-size: 0.75rem; color: var(--muted); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Zone reservee sous les 2 lignes d'equipes (statut + horaire + actions admin) :
   hauteur fixe pour que toutes les cartes (statuts et tours differents) fassent
   la meme hauteur -- sinon la distribution "space-around" desaligne les
   connecteurs des qu'un tour a un statut/contenu plus court qu'un autre. */
.match-card .match-body { min-height: 46px; }
.match-card .match-body.is-admin { min-height: 112px; }
.match-card .stats-mini { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.stats-mini { font-size: 0.8rem; color: var(--muted); }

/* Terrain / replay */
#terrain-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
#terrain-canvas { background: #3c8a3c; border: 4px solid var(--accent-dark); border-radius: 6px; max-width: 100%; }
.replay-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.scoreboard { display: flex; gap: 30px; font-size: 1.4rem; font-weight: 700; }
.scoreboard .team1 { color: #d94b4b; }
.scoreboard .team2 { color: #3d6fd9; }
#event-note { min-height: 1.4em; color: var(--muted); font-style: italic; }