/* WK 2026 — FIFA World Cup USA · Canada · Mexico
   Loads after ek2024/style.css. Only overrides changed values.

   Host-nation palette
     USA    #1B3A8C  deep blue
     Canada #C8102E  red
     Mexico #006847  green
   Oranje   #FF6200  (Netherlands)
   Gold     #F5A623  (FIFA trophy)
*/

:root {
    /* ── Backgrounds — warm dark ── */
    --c-bg:           #150a05;
    --c-bg2:          #231205;

    /* ── Primary — WC2026 deep USA/FIFA blue ── */
    --c-primary:      #112556;
    --c-primary-dk:   #0b1c44;

    /* ── Accent + orange — Dutch Oranje, dominant highlight ── */
    --c-accent:       #FF6200;
    --c-orange:       #FF6200;

    /* ── Surfaces — solid white cards ── */
    --c-surface:      rgba(255,255,255,0.88);
    --c-surface-hov:  rgba(255,255,255,0.96);
    --c-border:       rgba(0,0,0,0.10);

    /* ── Text — keep white for nav/dark areas, cards override below ── */
    --c-text:         #ede9e0;
    --c-text-dim:     rgba(237,233,224,0.55);

    /* ── Status colours tied to host nations ── */
    --c-gold:         #F5A623;   /* FIFA trophy gold          */
    --c-win:          #27a85f;   /* green (Mexico)            */
    --c-draw:         #7a7a7a;
    --c-lose:         #C8102E;   /* red (Canada)              */
    --c-error:        #e03030;
    --c-supermax:     #FF6200;   /* perfect score = Oranje    */
    --c-max:          #9333ea;
    --c-chart-purple: #9b59b6;
    --c-chart-green:  #006847;

    /* ── Host-nation custom props (for future use in pages) ── */
    --c-wk26-usa:     #1B3A8C;
    --c-wk26-canada:  #C8102E;
    --c-wk26-mexico:  #006847;
}

/* ── Body background — stadium photo with lighter warm overlay ── */
html, body {
    background:
        radial-gradient(ellipse at 75% 15%, rgba(255,98,0,0.12)  0%, transparent 50%),
        linear-gradient(rgba(9,4,1,0.20), rgba(9,4,1,0.20)),
        url('../../img/ek2024/background2.jpg') center / cover fixed,
        var(--c-bg);
}

/* ── White-card context: override text variables so ALL children inherit dark ── */
.card,
main.content-area,
.page-content,
.sidebar-left,
.sidebar-right {
    --c-text:     #18100a;
    --c-text-dim: rgba(24,16,10,0.72);  /* was 0.55 — darkened for readability */
    color: var(--c-text);
}

/* ── Score numbers: were hardcoded light, make dark on white card ── */
.lw-sc {
    color: rgba(24,16,10,0.65);
}
.lw-sc-win { color: var(--c-win); }

/* ── All section/card headers: cardheader_strip3.png stretched to fill, gradient fallback ── */
.card-header,
.stats-header,
.gb-card-header,
.vp-group-card-header {
    background: url('../../img/wk2026/cardheader_strip3.png') center / 100% 100% no-repeat,
                linear-gradient(180deg, var(--c-primary) 0%, #0b1c44 100%);
    box-shadow: inset 0 1px 0 rgba(120,170,255,0.20), inset 0 -1px 0 rgba(0,0,0,0.30);
    border-bottom: none;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.45);
    min-height: 50px;
    height: 50px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
}

/* ── gb-entry-body: small top breathing room ── */
.gb-entry-body {
    padding-top: 6px;
}

/* ── Remove border on gb-entry and programme (sidebar .card already has border:none)
   The 1px rgba(0,0,0,0.1) border rendered white against the orange background ── */
article.gb-entry,
.programme {
    border: none;
}

/* ── Remove white band below gb-card-header in news items ── */
article.gb-entry .gb-card-header + .gb-entry-body .gb-body {
    padding-top: 0;
}
/* ── Remove white band below card-header in next-match card ── */
.nm-card-body {
    padding-top: 0;
}
.nm-card-body .nm-teams {
    margin-top: 10px;
}

/* ── stats-header: center-align so image sits flush with title+subtitle ── */
.stats-header {
    align-items: center;
}
/* stats-hero-img: image in the icon grid area */
.stats-hero-img {
    grid-area: icon;
    height: 48px;
    width: auto;
    flex-shrink: 0;
    align-self: center;
}
/* stats-text: spans both text rows in the grid when used as a wrapper */
.stats-text {
    grid-column: 2;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
    padding: 0;
}
.stats-text .stats-title   { grid-area: unset; }
.stats-text .stats-subtitle { grid-area: unset; }

/* ── Header title text inherits white ── */
.stats-title {
    color: #ffffff;
    font-size: 18px;
    letter-spacing: 1.2px;
}
.stats-subtitle {
    color: rgba(255,255,255,0.70);
    font-size: 10px;
    letter-spacing: 0.5px;
    padding-top: 2px;
}
.gb-card-title {
    color: #ffffff;
}

/* ── gb-card-time: white + inline (not absolute dark text on blue header) ── */
.gb-card-header .gb-card-time {
    position: static;
    margin-left: auto;
    flex-shrink: 0;
    color: rgba(255,255,255,0.65);
    opacity: 1;
    font-size: 11px;
}

/* ── Guestbook write button: white text on blue background ── */
.gb-write-btn {
    color: #ffffff;
}

/* ── Primary action button: orange accent, white text ── */
.gb-submit-btn {
    background: var(--c-accent);
    color: #ffffff;
    border: 2px solid transparent;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.gb-submit-btn:hover {
    background: #d45200;
    color: #ffffff;
}

/* ── Secondary button: navy outline, no fill ── */
.gb-secondary-btn {
    display: inline-flex;
    align-items: center;
    padding: 9px 22px;
    background: transparent;
    color: var(--c-primary);
    border: 2px solid var(--c-primary);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.gb-secondary-btn:hover {
    background: var(--c-primary);
    color: #ffffff;
}
.gb-logout-btn {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    background: transparent;
    color: rgba(220, 80, 80, 0.85);
    border: 2px solid rgba(220, 80, 80, 0.4);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    margin-left: auto;
}
.gb-logout-btn:hover {
    background: rgba(220, 80, 80, 0.12);
    color: rgba(220, 80, 80, 1);
    border-color: rgba(220, 80, 80, 0.75);
}

/* ── Links inside cards ── */
.card a:not(.btn):not([class*="slicer"]) {
    color: var(--c-primary);
}
.card a:not(.btn):not([class*="slicer"]):hover {
    color: var(--c-accent);
}

/* ── Form inputs: light background for white-card context ── */
.page-content input[type="text"],
.page-content input[type="email"],
.page-content input[type="password"],
.page-content input[type="number"],
.page-content select,
.page-content textarea,
main.content-area input[type="text"],
main.content-area input[type="email"],
main.content-area input[type="password"],
main.content-area input[type="number"],
main.content-area select,
main.content-area textarea,
input.select,
select.select,
.gb-input,
.gb-textarea {
    background: rgba(255,255,255,0.95);
    border-color: rgba(0,0,0,0.18);
    color: #18100a;
}
.page-content input[type="text"]:focus,
.page-content input[type="email"]:focus,
.page-content input[type="password"]:focus,
.page-content select:focus,
.page-content textarea:focus,
main.content-area input:focus,
main.content-area select:focus,
main.content-area textarea:focus,
input.select:focus,
select.select:focus,
.gb-input:focus,
.gb-textarea:focus {
    background: #ffffff;
    border-color: var(--c-primary);
}
input.select::placeholder,
.gb-input::placeholder,
.page-content input::placeholder,
main.content-area input::placeholder { color: rgba(24,16,10,0.40); }

/* ── vpa-legend (score key) on white card ── */
.vpa-legend {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.12);
}

/* ── Profile page: borders visible on white ── */
.profiel-stats-card {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.10);
}
.profiel-tbl td {
    border-bottom-color: rgba(0,0,0,0.08);
}
.profiel-stat-box {
    border-right-color: rgba(0,0,0,0.08);
}

/* ── Rank row text: light colors are invisible on white ── */
table.liststand tbody tr.rank-silver .col-rank,
table.liststand tbody tr.rank-silver .col-pts {
    color: #607585;
    text-shadow: none;
}
table.liststand tbody tr.rank-bronze .col-rank,
table.liststand tbody tr.rank-bronze .col-pts {
    color: #9a6030;
    text-shadow: none;
}
/* rank row td borders use white-transparent which is invisible on white */
table.liststand tbody tr.rank-gold   td,
table.liststand tbody tr.rank-silver td,
table.liststand tbody tr.rank-bronze td {
    border-bottom-color: rgba(0,0,0,0.08);
}

/* ── Site header: poolpageheader as background, dark edge fade via gradient ── */
.poolpageheader {
    height: clamp(255px, 32vw, 452px);
    background:
        linear-gradient(to right, #112556 0%, transparent 15%, transparent 85%, #112556 100%),
        url('../../img/wk2026/poolpageheader.jpg?v=20260525') center / cover no-repeat;
}
/* Soft edge fade: img fades to transparent at left/right, revealing dark bg */
.poolpageheader img {
    display: none;
}

/* ── Show compact header on mobile (ek2024 hides it at ≤680px) ── */
@media (max-width: 680px) {
    .poolpageheader {
        display: block;
        background: url('../../img/wk2026/poolpageheadermob.jpg?v=20260525') center / cover no-repeat;
    }
}

/* ── Nav links: full white instead of dim ── */
.nav-links > li > a {
    color: rgba(255,255,255,0.88);
}

/* ── Nav: same metallic background as card headers ── */
.site-nav {
    background: url('../../img/wk2026/cardheader_strip3.png') center / 100% 100% no-repeat,
                linear-gradient(180deg, #112556 0%, #0b1c44 100%);
    box-shadow: inset 0 1px 0 rgba(120,170,255,0.18), 0 2px 16px rgba(0,0,0,0.50);
}

/* ── Nav login inputs: force dark-context colours (nav is always dark blue) ── */
.nav-login-form input[type="text"],
.nav-login-form input[type="password"] {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.28);
    color: #dff0f6;
    -webkit-text-fill-color: #dff0f6;
    color-scheme: dark;
}
.nav-login-form input[type="text"]:focus,
.nav-login-form input[type="password"]:focus {
    background: rgba(255,255,255,0.16);
    border-color: rgba(120,170,255,0.70);
}
.nav-login-form input::placeholder { color: rgba(223,240,246,0.50); }
/* Autofill override so browser-filled inputs stay readable */
.nav-login-form input:-webkit-autofill,
.nav-login-form input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px rgba(11,28,68,0.97) inset;
    -webkit-text-fill-color: #dff0f6;
}

/* ── Dropdown submenu: match nav gradient ── */
.nav-links .dropdown,
.nav-gear-dropdown {
    background: linear-gradient(180deg, #112556 0%, #0b1c44 100%);
}

/* ── Gear button: visible on dark nav ── */
.nav-gear-btn {
    color: rgba(255,255,255,0.80);
    border-color: rgba(255,255,255,0.25);
    font-size: 18px;
}
.nav-gear-btn:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.55);
    color: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════════
   WK 2026 — White-card overrides (second pass)
   Fixes visibility of components that were designed for a dark theme.
   ═══════════════════════════════════════════════════════════════════ */

/* ── btn-back: readable on white card ── */
.btn-back {
    border-color: rgba(17,37,86,0.28);
    background:   rgba(17,37,86,0.06);
    color:        var(--c-primary);
}
.btn-back:hover {
    background:   rgba(17,37,86,0.13);
    border-color: rgba(17,37,86,0.50);
    color:        var(--c-primary);
}

/* ── admin-add-btn inside blue header: white style ── */
.card-header .admin-add-btn,
.stats-header .admin-add-btn,
main.content-area .stats-header .admin-add-btn,
.vp-group-card-header .admin-add-btn {
    background:   rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.38);
    color:        #ffffff;
}
.card-header .admin-add-btn:hover,
.stats-header .admin-add-btn:hover,
main.content-area .stats-header .admin-add-btn:hover,
.vp-group-card-header .admin-add-btn:hover {
    background:   rgba(255,255,255,0.22);
    border-color: rgba(255,255,255,0.65);
    color:        #ffffff;
}
/* admin-add-btn in white page body */
.page-content .admin-add-btn,
main.content-area .admin-add-btn {
    background:   rgba(17,37,86,0.08);
    border-color: rgba(17,37,86,0.30);
    color:        var(--c-primary);
}
.page-content .admin-add-btn:hover,
main.content-area .admin-add-btn:hover {
    background:   rgba(17,37,86,0.16);
    border-color: rgba(17,37,86,0.55);
    color:        var(--c-primary);
}

/* ── pred-metric-card: override dark default background ── */
.pred-metric-card {
    background:   rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.12);
}
.pred-metric-card:hover {
    background:   rgba(0,0,0,0.08);
    border-color: rgba(0,0,0,0.22);
}
.pred-metric-card--done {
    background:   rgba(39,168,95,0.08);
    border-color: rgba(39,168,95,0.30);
}
.pred-metric-card--done:hover {
    border-color: rgba(39,168,95,0.55);
}
.pred-metric-card--partial {
    border-color: rgba(200,16,46,0.35);
}
.pred-metric-card--partial:hover {
    border-color: rgba(200,16,46,0.60);
}
.pred-metric-card--empty {
    background:   rgba(200,16,46,0.06);
    border-color: rgba(200,16,46,0.26);
}
.pred-metric-card--active {
    background:   rgba(17,37,86,0.10);
    border-color: var(--c-primary);
    box-shadow:   0 0 0 2px rgba(17,37,86,0.25), 0 4px 12px rgba(17,37,86,0.10);
}
/* Progress bar mask: white so gradient behind shows correctly */
.pred-metric-fill {
    background: rgba(255,255,255,0.96);
}

/* ── Score steppers (+/−): WK blue on white ── */
.pred-stepper {
    border-color: rgba(17,37,86,0.35);
    background:   rgba(255,255,255,0.85);
}
.stepper-btn {
    background: var(--c-primary);
    color:      #fff;
    height:     34px;
}
.stepper-btn:hover  { background: rgba(17,37,86,0.82); color: #fff; }
.stepper-btn:active { background: rgba(17,37,86,0.96); color: #fff; }
.stepper-btn:disabled { background: rgba(17,37,86,0.12); color: rgba(17,37,86,0.35); }
.page-content .pred-stepper .inputblue {
    border-left-color:  rgba(17,37,86,0.35);
    border-right-color: rgba(17,37,86,0.35);
    color:       #18100a;
    height:      34px;
    width:       54px;
    min-width:   54px;
    font-size:   18px;
    font-weight: 700;
    padding:     4px 2px;
}

/* ── pred-notice-warn: clearly red on white ── */
.pred-notice-warn {
    background:   rgba(200,16,46,0.08);
    border-color: rgba(200,16,46,0.38);
    color:        var(--c-lose);
}

/* ── pred-notice (yellow/amber): visible on white ── */
.pred-notice {
    background:   rgba(180,120,0,0.08);
    border-color: rgba(180,120,0,0.28);
    color:        #7a5000;
}

/* ── lw-meta: explicit dark color on white card ── */
.card .lw-meta,
.sidebar-left .lw-meta,
.sidebar-right .lw-meta {
    color: rgba(24,16,10,0.52);
}

/* ── liststand table header: WK blue tint ── */
.card table.liststand thead tr th,
.page-content table.liststand thead tr th,
main.content-area table.liststand thead tr th,
.sidebar-right table.liststand thead tr th,
.sidebar-left table.liststand thead tr th {
    background:        rgba(17,37,86,0.07);
    color:             var(--c-primary);
    border-bottom-color: rgba(17,37,86,0.14);
}
/* col-pts carries font-size:13px for data cells; reset to 10px in headers */
table.liststand thead tr th.col-pts {
    font-size: 10px;
}

/* ── Sidebar cards: PNT label in header, thead row hidden ── */
.sidebar-right .card .liststand thead,
.sidebar-left  .card .liststand thead {
    display: none;
}
.sb-hdr-label {
    font-size:      11px;
    font-weight:    700;
    letter-spacing: .07em;
    color:          rgba(255,255,255,0.75);
    flex-shrink:    0;
}

/* ── rank-me row: teal → WK blue ── */
table.liststand tbody tr.rank-me td             { background: rgba(17,37,86,0.08); }
table.liststand tbody tr.rank-me td:first-child { border-left-color: var(--c-primary); }
table.liststand tbody tr.rank-me .col-rank,
table.liststand tbody tr.rank-me .col-pts       { color: var(--c-primary); }
table.liststand tbody tr.rank-me:hover td       { background: rgba(17,37,86,0.14); }

/* ── rank-gold background: more visible on white ── */
table.liststand tbody tr.rank-gold td       { background: rgba(245,166,35,0.14); }
table.liststand tbody tr.rank-gold:hover td { background: rgba(245,166,35,0.24); }

/* ── stats-link icon: WK blue ── */
table.liststand a.stats-link {
    background:   rgba(17,37,86,0.08);
    border-color: rgba(17,37,86,0.22);
    color:        var(--c-primary);
}
table.liststand a.stats-link:hover {
    background: rgba(17,37,86,0.18);
    color:      var(--c-primary);
}

/* ── gender badge ── */
.gender-m {
    background:   rgba(17,37,86,0.10);
    border-color: rgba(17,37,86,0.30);
    color:        var(--c-primary);
}

/* ── vp-badge: vp-toto green is too light on white ── */
.vp-toto {
    background:   rgba(0,104,71,0.12);
    color:        #006847;
    border-color: rgba(0,104,71,0.35);
}
/* vp-max: remove text-shadow on white */
.vp-max { text-shadow: none; }

/* ── Slicer pills (inactive): dark border/text on white ── */
.page-content .slicer-btn,
main.content-area .slicer-btn,
.card .slicer-btn {
    border-color: rgba(0,0,0,0.16);
    color:        rgba(24,16,10,0.62);
}
.page-content .slicer-btn:hover,
main.content-area .slicer-btn:hover,
.card .slicer-btn:hover {
    background: rgba(0,0,0,0.05);
    color:      rgba(24,16,10,0.85);
}

/* ── Pool pills (group filter): dark on white ── */
.page-content .pool-pill,
main.content-area .pool-pill {
    border-color: rgba(0,0,0,0.14);
    color:        rgba(24,16,10,0.58);
}
.page-content .pool-pill:hover,
main.content-area .pool-pill:hover {
    background:   rgba(17,37,86,0.06);
    border-color: rgba(17,37,86,0.28);
    color:        var(--c-primary);
}
.page-content .pool-pill.active,
main.content-area .pool-pill.active {
    background:   rgba(17,37,86,0.12);
    border-color: var(--c-primary);
    color:        var(--c-primary);
}

/* ── KO team select: white context ── */
.pred-ko-select {
    background:   rgba(255,255,255,0.95);
    color:        #18100a;
    border-color: rgba(17,37,86,0.28);
}

/* ── Metric tiles: eye-catcher upgrade — white card, blue top accent, orange value ── */
.prize-summary-item,
.sr-keyfact {
    background:    #ffffff;
    border:        1px solid rgba(17,37,86,0.14);
    border-top:    3px solid var(--c-primary);
    border-radius: 0 0 10px 10px;
    box-shadow:    0 4px 18px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
    transition:    transform 0.18s, box-shadow 0.18s;
}
.prize-summary-item:hover,
.sr-keyfact:hover {
    background:  #ffffff;
    transform:   translateY(-3px);
    box-shadow:  0 10px 30px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.07);
}
/* sr-keyfact inner elements */
.sr-kf-val {
    display:       block;
    font-size:     clamp(26px, 4vw, 40px);
    font-weight:   900;
    color:         var(--c-accent);
    line-height:   1.0;
    margin-bottom: 5px;
}
.sr-kf-lbl {
    display:        block;
    font-size:      10px;
    font-weight:    700;
    color:          rgba(24,16,10,0.50);
    text-transform: uppercase;
    letter-spacing: .07em;
    line-height:    1.3;
}
/* prize-summary value: orange Oranje for excitement */
.prize-summary-value {
    color:       var(--c-accent);
    font-size:   clamp(16px, 2.5vw, 22px);
    font-weight: 900;
    align-self:  flex-end;
    white-space: nowrap;
}
.prize-summary-label {
    color:          rgba(24,16,10,0.50);
    font-size:      10px;
    font-weight:    700;
    letter-spacing: .06em;
}
.prize-summary-pct-bar {
    background: rgba(0,0,0,0.10);
}

/* ── prize-summary color modifiers ── */
.prize-summary-item--blue   { border-top-color: #112556; }
.prize-summary-item--orange { border-top-color: #FF6200; }
.prize-summary-item--green  { border-top-color: #27a85f; }
.prize-summary-item--purple { border-top-color: #7c3aed; }
.prize-summary-item--teal   { border-top-color: #0891b2; }
.prize-summary-item--gold   { border-top-color: #b8860b; }
.prize-summary-item--rose   { border-top-color: #e11d6c; }
.prize-summary-item--blue   .prize-summary-value { color: #112556; }
.prize-summary-item--green  .prize-summary-value { color: #27a85f; }
.prize-summary-item--purple .prize-summary-value { color: #7c3aed; }
.prize-summary-item--teal   .prize-summary-value { color: #0891b2; }
.prize-summary-item--gold   .prize-summary-value { color: #b8860b; }
.prize-summary-item--rose   .prize-summary-value { color: #e11d6c; }

/* ── stand-blurb: funfact-style info box (orange left accent) ── */
.stand-blurb {
    padding:       14px 16px;
    background:    linear-gradient(135deg, rgba(17,37,86,0.06) 0%, rgba(255,98,0,0.04) 100%);
    border:        1px solid rgba(17,37,86,0.15);
    border-left:   3px solid var(--c-accent);
    border-radius: 0 8px 8px 0;
    max-width: none;
}
.stand-blurb strong { color: var(--c-primary); }

/* ── rule-section: funfact-style info box with blue left accent ── */
.rule-section {
    background:   linear-gradient(135deg, rgba(17,37,86,0.06) 0%, rgba(255,98,0,0.04) 100%);
    border:       1px solid rgba(17,37,86,0.15);
    border-left:  3px solid var(--c-primary);
    border-radius: 0 8px 8px 0;
}
.rule-title { color: var(--c-primary); }

/* ── poll-bar track: inset shadow for depth on white cards ── */
.card .poll-bar,
.sidebar-left .poll-bar,
.sidebar-right .poll-bar {
    background: rgba(0,0,0,0.10);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.28);
}
/* ── poll-bar fill: top highlight + bottom shadow via gradient ── */
.poll-bar-fill {
    background:
        linear-gradient(to bottom, rgba(255,255,255,0.28) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.25) 100%),
        var(--c-accent);
}

/* ── nv2 tabs / content area: white context ── */
.page-content .nv2-pool-tab,
main.content-area .nv2-pool-tab {
    background:   rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.12);
    color:        rgba(24,16,10,0.68);
}
.page-content .nv2-pool-tab:hover,
main.content-area .nv2-pool-tab:hover {
    background:   rgba(0,0,0,0.08);
    border-color: rgba(0,0,0,0.22);
}
.page-content .nv2-pool-tab.active,
main.content-area .nv2-pool-tab.active {
    background:   rgba(17,37,86,0.12);
    border-color: var(--c-primary);
    color:        var(--c-primary);
}
.page-content .nv2-content-area,
main.content-area .nv2-content-area {
    background:   rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.08);
}
.page-content .nv2-mc,
main.content-area .nv2-mc {
    background:   rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.09);
    color:        var(--c-text);
}
.page-content .nv2-mc:hover,
main.content-area .nv2-mc:hover {
    background:   rgba(0,0,0,0.07);
    border-color: rgba(0,0,0,0.18);
}
.page-content .nv2-mc.active,
main.content-area .nv2-mc.active {
    background:   rgba(17,37,86,0.08);
    border-color: var(--c-primary);
}

/* ── params-toggle: white context ── */
.page-content .params-toggle,
main.content-area .params-toggle {
    border-color: rgba(0,0,0,0.18);
}
.page-content .params-toggle label,
main.content-area .params-toggle label {
    background: rgba(0,0,0,0.04);
    color:      rgba(24,16,10,0.65);
}
.page-content .params-toggle label:first-of-type,
main.content-area .params-toggle label:first-of-type {
    border-right-color: rgba(0,0,0,0.12);
}

/* ── admin icon buttons: WK blue ── */
.page-content .admin-icon-edit,
main.content-area .admin-icon-edit {
    background: rgba(17,37,86,0.08);
    color:      var(--c-primary);
}
.page-content .admin-icon-edit:hover,
main.content-area .admin-icon-edit:hover {
    background: rgba(17,37,86,0.18);
    color:      var(--c-primary);
}

/* ── Card base border: subtle on white page bg ── */
.card { border-color: rgba(0,0,0,0.10); }

/* ── page-content: replace border with box-shadow so stats-header has no top gap ── */
.page-content {
    border: none;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.10), 0 4px 18px rgba(0,0,0,0.12);
}
/* ── page-content--bare (nieuws): no ring shadow or side padding — cards float freely ── */
.page-content--bare {
    box-shadow: none;
}
/* Use combined selector (higher specificity) to beat the .page-content padding override below */
.page-content.page-content--bare {
    padding-left: 0;
    padding-right: 0;
}

/* ── Bracket flags ── */
.bm-flag {
    width:        24px;
    height:       16px;
    border-radius: 2px;
    object-fit:   cover;
    flex-shrink:  0;
    vertical-align: middle;
    box-shadow:   0 1px 2px rgba(0,0,0,0.25);
}

/* ── .bm match cards: visible border by default on white background ── */
.bm {
    background:  rgba(17,37,86,0.04);
    border-color: rgba(17,37,86,0.20);
}
.bm--played {
    background:  rgba(17,37,86,0.07);
}
.bm:hover, .bm.bm--hi {
    border-color: rgba(17,37,86,0.50);
    background:   rgba(17,37,86,0.10);
}
.bm-sep {
    background: rgba(0,0,0,0.08);
}

/* ── table.list (poulestand wedstrijden): match liststand header style ── */
.page-content table.list tr:hover td,
main.content-area table.list tr:hover td {
    background: rgba(17,37,86,0.05);
}


/* ── params-section border: visible on white ── */
.page-content .params-section,
main.content-area .params-section {
    border-color: rgba(0,0,0,0.10);
}
.page-content .params-section-title,
main.content-area .params-section-title {
    background:   rgba(0,0,0,0.04);
    border-bottom-color: rgba(0,0,0,0.08);
    color:        var(--c-primary);
}
.page-content .params-row,
main.content-area .params-row {
    border-bottom-color: rgba(0,0,0,0.06);
}

/* ═══════════════════════════════════════════════════════════════════════════
   WK 2026 — Comprehensive white-card fixes (batch 2)
   All components originally designed for dark backgrounds — fixed for white.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── lw-meta: slightly darker so it reads clearly on white ── */
.card .lw-meta,
.sidebar-left .lw-meta,
.sidebar-right .lw-meta,
.page-content .lw-meta,
main.content-area .lw-meta {
    color: rgba(24,16,10,0.65);
}

/* ── Reply entries: compact ── */
article.gb-entry.gb-reply-entry {
    margin-bottom: 6px;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}
article.gb-entry.gb-reply-entry .gb-card-header {
    padding: 5px 14px 9px;
}
article.gb-entry.gb-reply-entry .gb-entry-main .gb-body {
    padding: 8px 14px 0;
    font-size: 13px;
}
article.gb-entry.gb-reply-entry .gb-entry-main .gb-entry-footer {
    padding: 5px 14px 10px;
}
article.gb-entry.gb-reply-entry .gb-entry-meta {
    width: 80px;
    padding: 10px 10px 10px 12px;
    gap: 4px;
}

/* ── News entry footer: separator visible on white ── */
.page-content .gb-entry-footer,
main.content-area .gb-entry-footer {
    border-top-color: rgba(0,0,0,0.10);
    color: rgba(24,16,10,0.55);
    padding-top: 4px !important;
    padding-bottom: 6px !important;
}

/* ── gb-author: keep compact — override base @media 15px !important ── */
.gb-entry-footer .gb-author { font-size: 12px !important; font-weight: 600 !important; }

/* ── news-react-btn: "Reageer" button — WK blue outline pill ── */
.page-content .news-react-btn,
main.content-area .news-react-btn {
    border-color: rgba(17,37,86,0.25);
    color:        var(--c-primary);
    background:   rgba(17,37,86,0.04);
}
.page-content .news-react-btn:hover,
main.content-area .news-react-btn:hover {
    border-color: rgba(17,37,86,0.45);
    background:   rgba(17,37,86,0.10);
    color:        var(--c-primary);
}

/* ── gb-like-btn on white ── */
.page-content .gb-like-btn,
main.content-area .gb-like-btn {
    border-color: rgba(200,16,46,0.30);
    background:   rgba(200,16,46,0.06);
    color:        #b01030;
}
.page-content .gb-like-btn:hover,
main.content-area .gb-like-btn:hover {
    border-color: rgba(200,16,46,0.55);
    background:   rgba(200,16,46,0.12);
}

/* ── rule-title: WK blue in all contexts; white on dark header ── */
.rule-title { color: var(--c-primary); }
.card-header .rule-title,
.stats-header .rule-title,
.gb-card-header .rule-title { color: #ffffff; }

/* ── pred-notice-warn: clearly red on white ── */
.pred-notice-warn {
    background:   rgba(200,16,46,0.09)  !important;
    border-color: rgba(200,16,46,0.40)  !important;
    color:        #b01030               !important;
    font-weight:  600;
}

/* ── vp-badge: MAX and TOTO more opaque on white ── */
.vp-max {
    background:   rgba(147,51,234,0.14);
    border-color: rgba(147,51,234,0.50);
    color:        #7c28c8;
    text-shadow:  none;
}
.vp-toto {
    background:   rgba(0,104,71,0.12);
    border-color: rgba(0,104,71,0.40);
    color:        #006847;
}

/* ── pts-badge (stat heading badge: "10pnt") on white ── */
.page-content .pts-badge,
main.content-area .pts-badge {
    background:   rgba(245,166,35,0.14);
    border-color: rgba(245,166,35,0.45);
    color:        #7a4f00;
}

/* ── vp-tab (statistics page tabs) — white context ── */
.page-content .vp-tab,
main.content-area .vp-tab {
    background:   rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.16);
    color:        rgba(24,16,10,0.65);
}
.page-content .vp-tab:hover,
main.content-area .vp-tab:hover {
    background:   rgba(17,37,86,0.08);
    border-color: rgba(17,37,86,0.28);
    color:        var(--c-primary);
}
.page-content .vp-tab-active,
main.content-area .vp-tab-active {
    background:   rgba(17,37,86,0.14);
    border-color: var(--c-primary);
    color:        var(--c-primary);
}
/* SUPER SCORE tab keeps its orange gradient */
.page-content .vp-tab-super,
main.content-area .vp-tab-super {
    background:   linear-gradient(90deg, rgba(255,164,0,0.16), rgba(255,98,0,0.10));
    border-color: rgba(255,148,0,0.45);
    color:        #8a4400;
    text-shadow:  none;
}
.page-content .vp-tab-super.vp-tab-active,
main.content-area .vp-tab-super.vp-tab-active {
    background:   linear-gradient(90deg, rgba(255,164,0,0.28), rgba(255,98,0,0.20));
    border-color: rgba(255,120,0,0.70);
    color:        #7a3a00;
}
/* MAX tab: purple, solid enough on white */
.page-content .vp-tab-max,
main.content-area .vp-tab-max {
    background:   rgba(147,51,234,0.12);
    border-color: rgba(147,51,234,0.45);
    color:        #7c28c8;
    text-shadow:  none;
}
.page-content .vp-tab-max.vp-tab-active,
main.content-area .vp-tab-max.vp-tab-active {
    background:   rgba(147,51,234,0.20);
    border-color: rgba(147,51,234,0.75);
    box-shadow:   0 0 6px rgba(147,51,234,0.20);
}
/* TOTO tab: green, solid on white */
.page-content .vp-tab-toto,
main.content-area .vp-tab-toto {
    background:   rgba(0,104,71,0.10);
    border-color: rgba(0,104,71,0.40);
    color:        #006847;
}
.page-content .vp-tab-toto.vp-tab-active,
main.content-area .vp-tab-toto.vp-tab-active {
    background:   rgba(0,104,71,0.18);
    border-color: rgba(0,104,71,0.70);
}

/* ── tu-mode-btn (Dit seizoen / Subpool stand / All-time) ── */
.page-content .tu-mode-btn,
main.content-area .tu-mode-btn {
    border-color: rgba(0,0,0,0.18);
    background:   rgba(0,0,0,0.04);
    color:        rgba(24,16,10,0.65);
}
.page-content .tu-mode-btn:hover,
main.content-area .tu-mode-btn:hover {
    background:   rgba(17,37,86,0.08);
    border-color: rgba(17,37,86,0.30);
    color:        var(--c-primary);
}
.page-content .tu-mode-btn.tu-mode-active,
main.content-area .tu-mode-btn.tu-mode-active {
    background:   rgba(17,37,86,0.14);
    border-color: var(--c-primary);
    color:        var(--c-primary);
}

/* ── wd-sp-btn (subpool filter pills) — white context ── */
.page-content .wd-sp-btn,
main.content-area .wd-sp-btn {
    border-color: rgba(0,0,0,0.16);
    background:   rgba(0,0,0,0.03);
    color:        rgba(24,16,10,0.65);
}
.page-content .wd-sp-btn:hover,
main.content-area .wd-sp-btn:hover {
    background:   rgba(17,37,86,0.08);
    border-color: rgba(17,37,86,0.30);
    color:        var(--c-primary);
}
.page-content .wd-sp-btn.wd-sp-active,
main.content-area .wd-sp-btn.wd-sp-active {
    background:   rgba(17,37,86,0.12);
    border-color: var(--c-primary);
    color:        var(--c-primary);
}

/* ── ps-card stat cards in voorspellen_all: eye-catcher upgrade ── */
.page-content .ps-label,
main.content-area .ps-label { color: rgba(24,16,10,0.55); font-weight: 600; }
/* Base tile: white + shadow + lift hover */
.page-content .ps-card,
main.content-area .ps-card {
    background:    #ffffff;
    border:        1px solid rgba(0,0,0,0.10);
    border-radius: 0 0 10px 10px;
    box-shadow:    0 4px 14px rgba(0,0,0,0.09);
    transition:    transform 0.18s, box-shadow 0.18s;
}
.page-content .ps-card:hover,
main.content-area .ps-card:hover {
    transform:  translateY(-3px);
    box-shadow: 0 10px 26px rgba(0,0,0,0.13);
}
/* Per-type colored top accent border + value color */
.page-content .ps-card-rank,
main.content-area .ps-card-rank {
    background: #ffffff; border-color: rgba(17,37,86,0.15); border-top: 3px solid var(--c-primary);
}
.page-content .ps-card-rank .ps-value,
main.content-area .ps-card-rank .ps-value { color: var(--c-primary); }
.page-content .ps-card-rank .ps-sub,
main.content-area .ps-card-rank .ps-sub   { color: rgba(17,37,86,0.60); }
.page-content .ps-card-pool,
main.content-area .ps-card-pool {
    background: #ffffff; border-color: rgba(0,104,71,0.18); border-top: 3px solid #006847;
}
.page-content .ps-card-pool .ps-value,
main.content-area .ps-card-pool .ps-value { color: #006847; }
.page-content .ps-card-ko,
main.content-area .ps-card-ko {
    background: #ffffff; border-color: rgba(124,40,200,0.18); border-top: 3px solid #7c28c8;
}
.page-content .ps-card-ko .ps-value,
main.content-area .ps-card-ko .ps-value { color: #7c28c8; }
.page-content .ps-card-bonus,
main.content-area .ps-card-bonus {
    background: #ffffff; border-color: rgba(200,16,46,0.18); border-top: 3px solid #C8102E;
}
.page-content .ps-card-bonus .ps-value,
main.content-area .ps-card-bonus .ps-value { color: #b01030; }
.page-content .ps-card-avg,
main.content-area .ps-card-avg {
    background: #ffffff; border-color: rgba(255,98,0,0.20); border-top: 3px solid var(--c-accent);
}
.page-content .ps-card-avg .ps-value,
main.content-area .ps-card-avg .ps-value { color: #cc4d00; }
.page-content .ps-card-best,
main.content-area .ps-card-best {
    background: #ffffff; border-color: rgba(217,119,6,0.22); border-top: 3px solid #d97706;
}
.page-content .ps-card-best .ps-value,
main.content-area .ps-card-best .ps-value { color: #7a4f00; }
.page-content .ps-card-super,
main.content-area .ps-card-super {
    background: #ffffff; border-color: rgba(245,158,11,0.25); border-top: 3px solid #f59e0b;
}
.page-content .ps-card-super .ps-value,
main.content-area .ps-card-super .ps-value { color: #8a4400; }
.page-content .ps-card-dubbel,
main.content-area .ps-card-dubbel {
    background: #ffffff; border-color: rgba(255,98,0,0.20); border-top: 3px solid var(--c-accent);
}
.page-content .ps-card-dubbel .ps-value,
main.content-area .ps-card-dubbel .ps-value { color: var(--c-accent); }

/* ── vp-sd-card (Stand & statistieken link card) on white ── */
.page-content .vp-sd-card,
main.content-area .vp-sd-card {
    background:   linear-gradient(135deg, rgba(255,98,0,0.08), rgba(180,60,0,0.05));
    border-color: rgba(255,98,0,0.30);
}
.page-content .vp-sd-card:hover,
main.content-area .vp-sd-card:hover {
    background:   linear-gradient(135deg, rgba(255,98,0,0.14), rgba(180,60,0,0.08));
    border-color: rgba(255,98,0,0.55);
}
.page-content .vp-sd-card-label,
main.content-area .vp-sd-card-label { color: rgba(24,16,10,0.55); }
.page-content .vp-sd-card-rank,
main.content-area .vp-sd-card-rank  { color: rgba(24,16,10,0.55); }
.page-content .vp-sd-card-cta,
main.content-area .vp-sd-card-cta  { color: var(--c-accent); }

/* ── stad-metric strip: WK2026 fancy upgrade ── */
.page-content .stad-metrics,
main.content-area .stad-metrics {
    border-color: rgba(0,0,0,0.10);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
    margin-bottom: 16px;
}
.page-content .stad-metric,
main.content-area .stad-metric {
    background: #fff;
    border-right-color: rgba(0,0,0,0.08);
    padding: 14px 10px;
    box-shadow: inset 0 3px 0 rgba(17,37,86,0.20);
}
.page-content .stad-metric-val,
main.content-area .stad-metric-val {
    color: var(--c-primary);
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
}
.page-content .stad-metric-lbl,
main.content-area .stad-metric-lbl {
    color: rgba(24,16,10,0.48);
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-top: 4px;
}

/* ── stad-capbar and stad-name on white ── */
.page-content .stad-capbar-bg,
main.content-area .stad-capbar-bg { background: rgba(0,0,0,0.10); }
.page-content .stad-name,
main.content-area .stad-name { color: var(--c-text); }
.page-content .stad-sub,
main.content-area .stad-sub  { color: rgba(24,16,10,0.55); }
.page-content .stad-info-text,
main.content-area .stad-info-text { color: rgba(24,16,10,0.55); opacity: 1; }
/* ── stad-item: visible row separator on white card ── */
.page-content .stad-item,
main.content-area .stad-item { border-bottom: 1px solid rgba(0,0,0,0.07); }
.page-content .stad-item:last-child,
main.content-area .stad-item:last-child { border-bottom: none; }

/* ── wd-panel (wedstrijd_detail) — white context ── */
.page-content .wd-panel,
main.content-area .wd-panel {
    background:   rgba(17,37,86,0.04);
    border-color: rgba(0,0,0,0.12);
}
.page-content .wd-panel-meta,
main.content-area .wd-panel-meta {
    border-top-color: rgba(0,0,0,0.08);
    color: rgba(24,16,10,0.60);
}
.page-content .wd-panel-wgv,
main.content-area .wd-panel-wgv { border-top-color: rgba(0,0,0,0.08); }
.page-content .wd-panel-dist,
main.content-area .wd-panel-dist { border-top-color: rgba(0,0,0,0.08); }
.page-content .wd-panel-dist-label,
main.content-area .wd-panel-dist-label { color: rgba(24,16,10,0.55); }
.page-content .wd-dist-tbl th,
main.content-area .wd-dist-tbl th {
    color: rgba(24,16,10,0.55);
    border-bottom-color: rgba(0,0,0,0.12);
}
.page-content .wd-dist-tbl td,
main.content-area .wd-dist-tbl td {
    color: var(--c-text);
    border-bottom-color: rgba(0,0,0,0.06);
}
.page-content .wd-dist-total td,
main.content-area .wd-dist-total td {
    border-top-color: rgba(0,0,0,0.14);
    color: rgba(24,16,10,0.65);
}
.page-content .wd-dist-correct td,
main.content-area .wd-dist-correct td { color: var(--c-win); }
.page-content .wd-dist-mine td,
main.content-area .wd-dist-mine td   { color: var(--c-primary); }
.page-content .wd-dist-mine .wd-dist-bar,
main.content-area .wd-dist-mine .wd-dist-bar { background: var(--c-primary); }

/* ── wedstrijd-detail subpool filter ── */
.page-content .wd-sp-label,
main.content-area .wd-sp-label { color: rgba(24,16,10,0.55); }
.page-content .wd-wgv-title,
main.content-area .wd-wgv-title { color: rgba(24,16,10,0.55); }

/* ── Prijzenpot: funfact-style info box with orange left accent ── */
.page-content .prize-explanation,
main.content-area .prize-explanation {
    background:    linear-gradient(135deg, rgba(17,37,86,0.06) 0%, rgba(255,98,0,0.04) 100%);
    border:        1px solid rgba(17,37,86,0.15);
    border-left:   3px solid var(--c-accent);
    border-radius: 0 8px 8px 0;
    color:         rgba(24,16,10,0.68);
}
.page-content .prize-explanation strong,
main.content-area .prize-explanation strong { color: var(--c-text); }
/* Progress bar tracks: invisible on white without fix */
.page-content .pp-pct-bar,
main.content-area .pp-pct-bar { background: rgba(0,0,0,0.10); }
.page-content .prize-summary-pct-bar,
main.content-area .prize-summary-pct-bar { background: rgba(0,0,0,0.10); }
.page-content .prize-summary-pct-bar-dim span,
main.content-area .prize-summary-pct-bar-dim span { background: rgba(0,0,0,0.14); }
/* Totals row: WK blue tint */
.page-content table.liststand tr.totals-row td,
main.content-area table.liststand tr.totals-row td {
    background:   rgba(17,37,86,0.07);
    border-top-color: rgba(17,37,86,0.20);
}
.page-content .pp-pct-num,
main.content-area .pp-pct-num { color: var(--c-text); }
/* Alert item: unpaid warning — red */
.page-content .prize-summary-item.prize-summary-alert,
main.content-area .prize-summary-item.prize-summary-alert {
    background:    rgba(200,16,46,0.05);
    border-color:  rgba(200,16,46,0.25);
    border-top:    3px solid #C8102E;
}
.page-content .prize-summary-item.prize-summary-alert .prize-summary-value,
main.content-area .prize-summary-item.prize-summary-alert .prize-summary-value {
    color: #b01030;
}

/* ── Admin table: cheader + cwit + lheader + lwit — white context ── */
.page-content td.cheader,
.page-content th.cheader,
main.content-area td.cheader,
main.content-area th.cheader {
    background:   rgba(17,37,86,0.09);
    color:        var(--c-primary);
    border-bottom-color: rgba(17,37,86,0.18);
}
.page-content td.lheader,
.page-content th.lheader,
main.content-area td.lheader,
main.content-area th.lheader,
.page-content table.list tr.bottom td,
.page-content table.list tr.bottom th,
main.content-area table.list tr.bottom td,
main.content-area table.list tr.bottom th {
    background:   rgba(17,37,86,0.09);
    color:        var(--c-primary);
    border-bottom-color: rgba(17,37,86,0.18);
}
/* admin-add-btn: consistent WK blue outside of blue headers */
.page-content .admin-add-btn,
main.content-area .admin-add-btn {
    background:   rgba(17,37,86,0.08);
    border-color: rgba(17,37,86,0.28);
    color:        var(--c-primary);
    font-weight:  700;
}
.page-content .admin-add-btn:hover,
main.content-area .admin-add-btn:hover {
    background:   rgba(17,37,86,0.16);
    border-color: rgba(17,37,86,0.52);
    color:        var(--c-primary);
}
/* admin-add-btn IN blue card-header: stays white */
.card-header .admin-add-btn,
.stats-header .admin-add-btn,
main.content-area .stats-header .admin-add-btn,
.vp-group-card-header .admin-add-btn {
    background:   rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.40);
    color:        #ffffff;
    font-weight:  700;
}
.card-header .admin-add-btn:hover,
.stats-header .admin-add-btn:hover,
main.content-area .stats-header .admin-add-btn:hover,
.vp-group-card-header .admin-add-btn:hover {
    background:   rgba(255,255,255,0.24);
    border-color: rgba(255,255,255,0.70);
}

/* ── Wedstrijd flag gap (result vs flag spacing) ── */
.mc-row { gap: 6px; }
.bm-team { gap: 6px; }

/* ── poll sidebar borders on white ── */
.sidebar-left .poll-result-row,
.sidebar-right .poll-result-row {
    border-bottom-color: rgba(0,0,0,0.06);
}
.sidebar-left .poll-bar-wrap,
.sidebar-right .poll-bar-wrap { background: rgba(0,0,0,0.04); }

/* ── subpool-label on white ── */
.page-content .subpool-label,
main.content-area .subpool-label { color: rgba(24,16,10,0.55); }

/* ── medal rank badges: darker text for white context ── */
.page-content .medal-gold,
main.content-area .medal-gold {
    background:   rgba(234,168,0,0.18);
    color:        #7a5000;
    border-color: rgba(234,168,0,0.50);
}
.page-content .medal-silver,
main.content-area .medal-silver {
    background:   rgba(100,116,139,0.14);
    color:        #3b5068;
    border-color: rgba(100,116,139,0.40);
}
.page-content .medal-bronze,
main.content-area .medal-bronze {
    background:   rgba(160,100,50,0.16);
    color:        #7a4010;
    border-color: rgba(160,100,50,0.40);
}
.page-content .medal-prize,
main.content-area .medal-prize {
    background:   rgba(147,51,234,0.12);
    color:        #7c28c8;
    border-color: rgba(147,51,234,0.40);
}
.page-content .medal-me,
main.content-area .medal-me {
    background:   var(--c-primary);
    color:        #ffffff;
}
/* liststand — name column: larger, bolder so player/team name stands out */
table.liststand .col-name,
table.liststand .col-name a {
    font-size:   15px !important;
    font-weight: 600 !important;
}
/* Keep sidebar compact (narrower widget) */
.sidebar-right table.liststand .col-name,
.sidebar-right table.liststand .col-name a {
    font-size: 13px !important;
}

/* Stand tbl prize row on white */
.page-content .stand-tbl tbody tr.rank-prize td,
main.content-area .stand-tbl tbody tr.rank-prize td {
    background: rgba(147,51,234,0.06);
}
.page-content .stand-tbl tbody tr.rank-prize .st-rank-num,
main.content-area .stand-tbl tbody tr.rank-prize .st-rank-num {
    color: #7c28c8;
}
/* st-rank-num (plain rank # in stand tables): use text-dim var which is dark in white context */
.page-content .st-rank-num,
main.content-area .st-rank-num {
    color: rgba(24,16,10,0.52);
}

/* ══════════════════════════════════════════════════════════════════════════════
   WK 2026 — Polish pass (third pass)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Left sidebar: widen to match right sidebar (~300px) ── */
:root {
    --col-l: 260px;
}

/* ── Card outer border: remove white-appearing border ── */
.card {
    border: none;
}

/* ── Reduce page-content horizontal padding to prevent table overflow on stand ── */
.page-content {
    padding-left: 10px;
    padding-right: 10px;
}

/* ── card--compact: use same header height/size as regular cards ── */
.card--compact .card-header {
    padding: 8px 16px;
    font-size: 13px;
    letter-spacing: 1.4px;
}

/* ── Stats-header: grid layout — icon | title+subtitle | btn ── */
/* page-content padding is 26px 20px in WK2026 (reduced from 30px), update margins */
.stats-header {
    margin-left: -20px;
    margin-right: -20px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "icon title btn"
        "icon sub   btn";
    column-gap: 12px;
    row-gap: 0;
    border-radius: 0;
    align-items: center;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
}
.stats-icon {
    grid-area: icon;
    font-size: 30px;
    line-height: 1;
    align-self: center;
    display: flex;
    align-items: center;
}
.stats-title    { grid-area: title; margin: 0; align-self: end;   line-height: 1.1; }
.stats-subtitle { grid-area: sub;   font-size: 12px; align-self: start; margin-top: 2px; }

/* ── btn-back inside stats-header: span both rows + white style ── */
.stats-header .btn-back {
    grid-area: btn;
    align-self: center;
    margin-left: 0;
    background:   rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.28);
    color:        #ffffff;
}
.stats-header .btn-back:hover {
    background:   rgba(255,255,255,0.22);
    border-color: rgba(255,255,255,0.50);
    color:        #ffffff;
}

/* ── <strong> and <b> text: dark + bold in white-card context ── */
.page-content strong,
.page-content b,
main.content-area strong,
main.content-area b {
    color: var(--c-text);
    font-weight: 700;
}

/* ── toernooi_info: consistent team row layout ── */
/* Hover: blue tint matching prog-match */
tr.team-row:hover { background: rgba(17,37,86,0.05); }

/* Dedicated rank+count column — fixed width, centered */
.ti-rank-cell {
    vertical-align: middle;
    text-align: right;
    padding: 8px 6px;
    white-space: nowrap;
    width: 72px;
}
.ti-rank-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
/* Debut label same style as ti-coach */
.ti-debut {
    font-size: 11px;
    color: var(--c-text-dim);
    font-style: italic;
}
/* WC trophies now inline in ti-meta — allow wrapping */
.ti-meta { flex-wrap: wrap; }

/* ── toernooi_programma: day card list + grid alignment for match rows ── */
.prog-wrap { display: flex; flex-direction: column; gap: 16px; }

.prog-flag {
    width: 20px;
    height: 14px;
    border-radius: 2px;
    vertical-align: middle;
    object-fit: cover;
    flex-shrink: 0;
}
.prog-match {
    display: grid;
    grid-template-columns: 54px auto 1fr minmax(80px, 140px) 20px;
    /* [badge] [time] [teams] [location] [arrow] */
    align-items: center;
    gap: 6px 8px;
    flex-wrap: unset;
}
.prog-match--no-loc {
    grid-template-columns: 54px auto 1fr 20px;
}
.prog-teams {
    display: grid;
    grid-template-columns: 1fr 58px 1fr;
    align-items: center;
    gap: 0 6px;
    flex: unset;
    flex-wrap: unset;
}
.prog-team:first-child {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    text-align: right;
}
.prog-team:last-child {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    text-align: left;
}
.prog-score,
.prog-vs {
    text-align: center;
}
.prog-loc {
    text-align: right;
    margin-left: 0;
    color: rgba(24,16,10,0.48);
}
.prog-time {
    opacity: unset;
    color: rgba(24,16,10,0.48);
    text-align: center;
}
.prog-team {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
/* secondary meta text in cards: voorspellingen + poll stemmen */
.nm-pred-info,
.nm-no-pred,
.nm-datum,
.nm-locatie {
    color: rgba(24,16,10,0.48);
}
.poll-result-votes,
.poll-total {
    color: rgba(24,16,10,0.48);
    font-size: 11px;
}
@media (max-width: 600px) {
    .prog-match {
        grid-template-columns: 54px 44px 1fr;
    }
    .prog-loc { grid-column: 1 / -1; text-align: left; }
}

/* ── stadiums: country-stats text white on dark card-header ── */
.card-header .stad-country-stats { color: rgba(255,255,255,0.65); }

/* ── team_detail: stad-metric gold/silver variants (WK titles) ── */
.stad-metric--gold   { border-color: rgba(200,150,12,0.30) !important; background: rgba(255,200,0,0.08) !important; box-shadow: inset 0 3px 0 rgba(200,150,12,0.55) !important; }
.stad-metric--silver { border-color: rgba(140,140,145,0.28) !important; background: rgba(180,180,180,0.06) !important; box-shadow: inset 0 3px 0 rgba(140,140,145,0.48) !important; }
.stad-metric-val--gold   { color: #b8860b !important; }
.stad-metric-val--silver { color: #808088 !important; }

/* ── team_detail: WK-deelnames legend border for light theme ── */
.td-appearances-legend { border-top-color: rgba(0,0,0,0.08) !important; }

/* ── prog fixtures: badge (defined inline in toernooi_programma, needs global rule) ── */
.prog-badge {
    display: inline-block;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    min-width: 46px;
    text-align: center;
}

/* ── prog fixtures: win highlight ── */
.prog-team--win { color: var(--c-win, #27a85f) !important; font-weight: 800; }

/* ══════════════════════════════════════════════════════════════════════════════
   WK 2026 — Card header images (fourth pass)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── card-header: flex to support icon images ── */
.card-header { display: flex; align-items: center; gap: 10px; }
.card-hdr-img {
    height: 32px;
    width: auto;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.32));
}
.card--compact .card-hdr-img { height: 26px; }

/* ── vp-group-card-header: flex to support icon images ── */
.vp-group-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
}
.vp-group-card-header .card-hdr-img { height: 36px; }

/* ── stats-header flex variant: for headers without btn-back ── */
.stats-header--flex {
    display: flex !important;
    align-items: center;
    gap: 14px;
    grid-template-columns: unset;
    grid-template-areas: none;
}
.stats-header--flex .stats-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.stats-header--flex .stats-title   { margin: 0; align-self: flex-start; }
.stats-header--flex .stats-subtitle { margin-top: 0; }

/* ══════════════════════════════════════════════════════════════════════════════
   WK 2026 — user_voorspellen polish (fifth pass)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Slicer tabs: active state – drop the teal ring, use WK orange glow ── */
.page-content .slicer-btn.active,
main.content-area .slicer-btn.active,
.card .slicer-btn.active {
    box-shadow: 0 2px 10px rgba(255,98,0,0.32);
}

/* ── Pool pills: active uses WK-blue ring, not teal ── */
.page-content .pool-pill.active,
main.content-area .pool-pill.active {
    box-shadow: 0 0 0 2px rgba(17,37,86,0.25);
}

/* ── pred-table: visible row separators on white background ── */
table.pred-table th {
    background:          rgba(17,37,86,0.07);
    color:               var(--c-primary);
    border-bottom-color: rgba(17,37,86,0.14);
}
table.pred-table td {
    border-bottom-color: rgba(17,37,86,0.14);
    color:               var(--c-text);
}
table.pred-table tr:nth-child(even) {
    background: rgba(17,37,86,0.06);
}

/* ── vp-match-row hover: WK blue instead of teal ── */
.vp-match-row:hover td {
    background: rgba(17,37,86,0.06) !important;
}

/* ── vp-click-btn: chevron › style matching prog-arrow ── */
.vp-click-btn {
    background: none;
    border: none;
    color: var(--c-accent);
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    padding: 0 2px;
}
.vp-match-row:hover .vp-click-btn {
    background: none;
    border: none;
    color: var(--c-accent);
}

/* ── pred-stepper: wider input so bold glyph isn't clipped at the right edge ── */

/* ── KO team select: allow it to fill available column width ── */
.pred-ko-select {
    max-width:  none;
    width:      100%;
    box-sizing: border-box;
}

/* ── Dubbel badge: readable on white background ── */
/* Unselected: muted dark text, subtle border */
.pred-dubbel-label {
    color:        rgba(24,16,10,0.45);
    background:   rgba(17,37,86,0.04);
    border-color: rgba(17,37,86,0.20);
}
/* Hover: accent orange tint with dark text */
.pred-dubbel-label:hover {
    color:        var(--c-primary);
    background:   rgba(255,98,0,0.10);
    border-color: rgba(255,98,0,0.45);
}
/* Active / checked: solid orange, white text */
.dubbel-radio:checked + .pred-dubbel-label,
.pred-dubbel-label.pred-dubbel-on {
    background:   var(--c-accent);
    color:        #fff;
    border-color: var(--c-accent);
    box-shadow:   0 2px 8px rgba(255,98,0,0.35);
}
/* vp-dubbel static badge (locked row): same solid orange + white */
.vp-dubbel {
    background:   var(--c-accent);
    color:        #fff;
    border-color: var(--c-accent);
}

/* ── Next-group navigation button (pool group slicer) ── */
.vp-next-group-btn {
    display:       block;
    margin:        16px auto 12px;
    padding:       10px 28px;
    background:    var(--c-primary);
    color:         #ffffff;
    border:        none;
    border-radius: 8px;
    font-size:     14px;
    font-weight:   700;
    cursor:        pointer;
    transition:    background 0.15s;
    letter-spacing: 0.03em;
}
.vp-next-group-btn:hover {
    background: var(--c-primary-dk, #0b1c44);
}

/* ══════════════════════════════════════════════════════════════════════════════
   WK 2026 — Tricolor separator bar (between header image and nav)
   Orange / White / Navy — WK2026 brand palette
   ══════════════════════════════════════════════════════════════════════════════ */

/* Expand the app-shell grid to add a row for the tricolor bar */
.app-shell {
    grid-template-rows: auto 5px var(--nav-h) 1fr auto;
}
.app-shell > .tricolor-bar { grid-row: 2; }
.app-shell > .site-nav     { grid-row: 3; }
.app-shell > .main-wrap    { grid-row: 4; }
.app-shell > .site-footer  { grid-row: 5; }

.tricolor-bar {
    height: 5px;
    background: linear-gradient(to right,
        #E8431A 0%     33.33%,
        #2B8C38 33.33% 66.66%,
        #1E6EA0 66.66% 100%
    );
    flex-shrink: 0;
}

/* ── Bonus questions: wider label, narrower answer dropdown ── */
.bonus-label {
    flex: 5 1 0;
    min-width: 0;
}
.bonus-input {
    flex: 2 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.bonus-input select {
    max-width: 160px;
    width: 100%;
    box-sizing: border-box;
}

/* ── Bonus question: bigger title, clearly smaller muted tip ── */
.stat-title {
    font-size: 15px;
    font-weight: 600;
}
.stat-tip {
    font-size: 11px;
    font-style: italic;
    color: var(--c-text-dim, #888);
    margin-top: 4px;
    opacity: 0.85;
}
.stat-avg-below {
    display: block;
    text-align: center;
    font-size: 11px;
    font-style: italic;
    color: var(--c-text-dim, #888);
    margin-top: 4px;
    opacity: 0.85;
}