/* ══════════════════════════════════════════════════════════════════════════════
 * Brand Palette
 *   Average Green    #3CAC3B
 *   Hermes Blue      #2A398D
 *   Torch Red        #E61D25
 *   Light Gray       #D1D4D1
 *   Dark Heather Grey #474A4A
 * ══════════════════════════════════════════════════════════════════════════════ */
:root {
    --green:       #3CAC3B;
    --green-dark:  #2d8a2c;
    --blue:        #2A398D;
    --blue-dark:   #1e2b6b;
    --red:         #E61D25;
    --red-dark:    #c41920;
    --purple:      #6600CC;
    --gray-light:  #D1D4D1;
    --gray-dark:   #474A4A;
}

/* ── Body + achtergrond-cirkels (FIFA WK2026 stijl) ──────────────────────── */
body {
    background-image:
        radial-gradient(circle 560px at -180px -160px,
            var(--purple) 100%, transparent 100%),
        radial-gradient(circle 460px at calc(100% + 160px) calc(100% + 120px),
            var(--green) 100%, transparent 100%);
    background-color:      var(--red);
    background-attachment: fixed, fixed;
    overflow-x: hidden;
}

/* ── Dark card variant ────────────────────────────────────────────────────── */
.card-dark {
    background-color: var(--gray-dark) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.1) !important;
}
.card-dark .card-header {
    background-color: rgba(0,0,0,.25) !important;
    border-bottom-color: rgba(255,255,255,.1) !important;
    color: #fff !important;
}
.card-dark .text-muted {
    color: rgba(255,255,255,.6) !important;
}
.card-dark .table {
    color: #fff;
    --bs-table-bg: transparent;
}
.card-dark .table-light,
.card-dark thead.table-light tr,
.card-dark thead.table-light th {
    background-color: rgba(0,0,0,.25) !important;
    color: #e0e0e0 !important;
    border-color: rgba(255,255,255,.08) !important;
}
.card-dark .table td,
.card-dark .table th {
    border-color: rgba(255,255,255,.08);
}
.card-dark .fst-italic {
    color: rgba(255,255,255,.5) !important;
}

/* ── Flag images ─────────────────────────────────────────────────────────── */
/* flag-sm : inline in text / table rows  (18 × 12 px, ~3:2) */
.flag-sm {
    width:          18px;
    height:         12px;
    object-fit:     cover;
    vertical-align: middle;
    flex-shrink:    0;
}
/* flag-lg : knockout cards, match headers  (28 × 19 px, ~3:2) */
.flag-lg {
    width:          28px;
    height:         19px;
    object-fit:     cover;
    vertical-align: middle;
    flex-shrink:    0;
}
/* flag-xl : match detail page  (60 × 40 px, ~3:2) */
.flag-xl {
    width:          60px;
    height:         40px;
    object-fit:     cover;
    vertical-align: middle;
    flex-shrink:    0;
}

/* ── List-group inside dark card ─────────────────────────────────────────── */
.card-dark .list-group-item {
    background-color: transparent !important;
    border-color:     rgba(255,255,255,.1) !important;
    color:            #fff !important;
}
.card-dark .list-group-item-action:hover,
.card-dark .list-group-item-action:focus {
    background-color: rgba(255,255,255,.07) !important;
    color:            #fff !important;
}
.card-dark .list-group-item small {
    color: rgba(255,255,255,.55);
}

/* ── Section / card background (replaces .yellow-bg) ─────────────────────── */
.yellow-bg {
    background-color: var(--gray-light);
}

/* ── Navbar & dark backgrounds ────────────────────────────────────────────── */
.navbar.bg-dark,
nav.bg-dark {
    background-color: var(--blue) !important;
}

.bg-dark {
    background-color: var(--gray-dark) !important;
}

/* ── Navbar text legibility (override Bootstrap's dim rgba values) ────────── */
.navbar.bg-dark .navbar-brand {
    color: #fff !important;
    font-weight: 700;
    letter-spacing: .02em;
}
.navbar.bg-dark .nav-link {
    color: rgba(255,255,255,.9) !important;
}
.navbar.bg-dark .nav-link:hover,
.navbar.bg-dark .nav-link:focus {
    color: #fff !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.navbar.bg-dark .nav-link.active {
    color: #fff !important;
    font-weight: 600;
}
.navbar.bg-dark .navbar-toggler {
    border-color: rgba(255,255,255,.5) !important;
}
.navbar.bg-dark .navbar-toggler-icon {
    filter: brightness(10);          /* white hamburger icon */
}
.navbar.bg-dark .text-light {
    color: rgba(255,255,255,.8) !important;
    font-size: .875rem;
}

/* ── btn-danger → Torch Red ──────────────────────────────────────────────── */
.btn-danger {
    background-color: var(--red)      !important;
    border-color:     var(--red)      !important;
    color:            #fff            !important;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active {
    background-color: var(--red-dark) !important;
    border-color:     var(--red-dark) !important;
    color:            #fff            !important;
}
.btn-outline-danger {
    color:        var(--red) !important;
    border-color: var(--red) !important;
}
.btn-outline-danger:hover {
    background-color: var(--red) !important;
    color:            #fff      !important;
}

/* ── btn-warning → Average Green ─────────────────────────────────────────── */
.btn-warning {
    background-color: var(--green)      !important;
    border-color:     var(--green)      !important;
    color:            #fff              !important;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active {
    background-color: var(--green-dark) !important;
    border-color:     var(--green-dark) !important;
    color:            #fff              !important;
}
.btn-outline-warning {
    color:        var(--green) !important;
    border-color: var(--green) !important;
}
.btn-outline-warning:hover {
    background-color: var(--green) !important;
    color:            #fff        !important;
}

/* ── btn-primary → Hermes Blue ───────────────────────────────────────────── */
.btn-primary {
    background-color: var(--blue)      !important;
    border-color:     var(--blue)      !important;
    color:            #fff             !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--blue-dark) !important;
    border-color:     var(--blue-dark) !important;
    color:            #fff             !important;
}
.btn-outline-secondary:hover {
    background-color: var(--gray-dark) !important;
    border-color:     var(--gray-dark) !important;
    color:            #fff             !important;
}

/* ── Alerts ──────────────────────────────────────────────────────────────── */
.alert-danger {
    background-color: #fde8e9        !important;
    border-color:     var(--red)     !important;
    color:            #7a0005        !important;
}
.alert-warning {
    background-color: #e8f5e8        !important;
    border-color:     var(--green)   !important;
    color:            #1a4d1a        !important;
}
.alert-success {
    background-color: #e8f5e9        !important;
    border-color:     #4caf50        !important;
    color:            #1b5e20        !important;
}

/* ── text-warning ────────────────────────────────────────────────────────── */
.text-warning {
    color: var(--green) !important;
}

/* ── Leaderboard active-user row ─────────────────────────────────────────── */
.lb-active-row > td {
    color:       var(--green) !important;
    font-weight: 600;
}

/* ── Dark modal ──────────────────────────────────────────────────────────── */
.modal-content.card-dark {
    background-color: var(--gray-dark) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.15) !important;
}

/* ── Focus rings ─────────────────────────────────────────────────────────── */
.btn:focus {
    box-shadow: 0 0 0 .25rem rgba(42, 57, 141, .35) !important;
}

/* ── Dark card: form inputs ──────────────────────────────────────────────── */
.card-dark .form-control,
.card-dark .form-select {
    background-color: rgba(0,0,0,.28);
    color:            #fff;
    border-color:     rgba(255,255,255,.18);
}
.card-dark .form-control::placeholder {
    color: rgba(255,255,255,.4);
}
.card-dark .form-control:focus,
.card-dark .form-select:focus {
    background-color: rgba(0,0,0,.38);
    color:            #fff;
    border-color:     rgba(255,255,255,.4);
    box-shadow:       0 0 0 .2rem rgba(255,255,255,.08);
}

/* ── MyEntry: score input validation ─────────────────────────────────────── */
.bg-success-custom { background-color: rgba(26,229,135,.7) !important; }
.bg-warning-custom { background-color: #f3ad22             !important; }
.bg-danger-custom  { background-color: orangered           !important; }

/* ── MyEntry: KO selected team highlight ─────────────────────────────────── */
.card-dark .list-group-item-success {
    background-color: rgba(60,172,59,.35) !important;
    border-color:     rgba(60,172,59,.5)  !important;
}

/* ── MyEntry: poule ranking highlights ───────────────────────────────────── */
.card-dark .table-success,
.card-dark .table-success > td,
.card-dark .table-success > th {
    background-color: rgba(60,172,59,.22) !important;
    color: #fff !important;
}
.card-dark .best-third-row > td,
.card-dark .best-third-row > th {
    background-color: rgba(255,193,7,.18) !important;
    color: #fff !important;
}

/* ── Decoratieve bekers – vast links/rechts naast de content ─────────────── */
.page-beker {
    position:       fixed;
    top:            50%;
    transform:      translateY(-50%);
    width:          120px;
    opacity:        .72;
    filter:         drop-shadow(0 4px 14px rgba(0,0,0,.55));
    pointer-events: none;
    z-index:        0;
    display:        none;
}
.page-beker-left  { left:  1.5vw; }
.page-beker-right { right: 1.5vw; }
@media (min-width: 1600px) {
    .page-beker { display: block; }
}

/* ── KO: winnaar highlight ────────────────────────────────────────────────── */
.card-dark .ko-winner-display {
    background:   linear-gradient(90deg, rgba(255,193,7,.14), rgba(255,165,0,.04)) !important;
    border-color: rgba(255,193,7,.45) !important;
    padding:      .65rem 1rem        !important;
}
.ko-winner-flag {
    border:        2px solid rgba(255,193,7,.55);
    border-radius: 3px;
    box-shadow:    0 2px 8px rgba(0,0,0,.5);
    flex-shrink:   0;
}
.card-dark .ko-winner-display .teamdata {
    font-size:   1.15rem             !important;
    font-weight: 700                 !important;
    color:       rgba(255,218,90,.95) !important;
}

/* ── Bracket: dark theme ──────────────────────────────────────────────────── */
.bc-match {
    background:   #3a3d3d               !important;
    border-color: rgba(255,255,255,.15)  !important;
    box-shadow:   0 1px 3px rgba(0,0,0,.4) !important;
}
.bc-team     { color: rgba(255,255,255,.85); }
.bc-t1       { border-bottom-color: rgba(255,255,255,.1) !important; }
.bc-team.won { background: rgba(60,172,59,.3) !important; }
.bc-name     { color: rgba(255,255,255,.35) !important; }
.bc-flag-ph  { background: rgba(255,255,255,.15) !important; }