/* WK 2026 Pool - Stylesheet */
:root {
    --green:      #1a7c3e;
    --green-dark: #125c2d;
    --gold:       #f0c040;
    --bg:         #0f1923;
    --surface:    #1c2b37;
    --surface2:   #243444;
    --text:       #e8f0f7;
    --muted:      #8ba0b0;
    --border:     #2e4455;
    --red:        #e05252;
    --radius:     10px;
    --shadow:     0 4px 20px rgba(0,0,0,.4);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    /* Prevent text scaling on iOS rotation */
    -webkit-text-size-adjust: 100%;
}

.container { max-width: 960px; margin: 0 auto; padding: 0 16px; }

/* ===== HEADER ===== */
.site-header {
    background: var(--green-dark);
    border-bottom: 3px solid var(--gold);
    padding: 10px 0;
    position: sticky; top: 0; z-index: 100;
}
.site-header .container {
    display: flex; align-items: center;
    justify-content: space-between; gap: 8px;
}
.site-header h1 { font-size: 1.15rem; color: var(--gold); letter-spacing: .5px; white-space: nowrap; }
.site-header nav { display: flex; gap: 4px; }
.site-header nav a {
    color: var(--text); text-decoration: none; font-size: .88rem;
    padding: 6px 12px; border-radius: 6px; transition: background .2s;
    white-space: nowrap;
}
.site-header nav a:hover { background: rgba(255,255,255,.1); }

/* ===== FOOTER ===== */
.site-footer {
    text-align: center; padding: 24px 0;
    color: var(--muted); font-size: .85rem; margin-top: 40px;
    border-top: 1px solid var(--border);
    word-break: break-all;
}
.site-footer a { color: var(--muted); }

/* ===== CARDS ===== */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    margin: 20px 0;
    box-shadow: var(--shadow);
}
.card-success { border-color: var(--green); }
.card-info    { border-color: var(--gold); }
.card h2 { margin-bottom: 12px; font-size: 1.3rem; }
.card h3 { margin-bottom: 10px; font-size: 1.1rem; }
.card p  { margin-bottom: 12px; }

/* ===== BUTTONS ===== */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 18px; height: 44px;
    border-radius: 8px; border: none; cursor: pointer;
    font-size: .95rem; font-weight: 600; text-decoration: none;
    transition: opacity .2s, transform .1s;
    white-space: nowrap;
}
.btn:hover  { opacity: .85; }
.btn:active { transform: scale(.97); }
.btn-primary  { background: var(--green); color: #fff; }
.btn-secondary{ background: var(--surface2); color: var(--text); border: 1px solid var(--border); }
.btn-sm       { height: 36px; padding: 0 12px; font-size: .85rem; }
.btn-lg       { height: 52px; padding: 0 32px; font-size: 1.05rem; }
.btn-copy     { background: var(--surface2); color: var(--text); border: 1px solid var(--border); }
.btn-success  { background: rgba(26,124,62,.25); color: #5ddb8e; border-color: rgba(26,124,62,.4); }
.btn-danger   { background: rgba(224,82,82,.15); color: #e8787a; border-color: rgba(224,82,82,.3); }
.btn.active   { background: var(--green); color: #fff; }

/* ===== FORMS ===== */
.form-group { margin: 16px 0; }
.form-group label { display: block; font-weight: 600; margin-bottom: 6px; }
.form-group small { color: var(--muted); font-size: .82rem; margin-top: 4px; display: block; }

/* font-size: 16px prevents iOS zoom on focus */
input[type=text], input[type=password], input[type=number], select, textarea {
    background: var(--surface2); color: var(--text);
    border: 1px solid var(--border); border-radius: 7px;
    padding: 10px 14px; font-size: 16px; width: 100%;
    min-height: 48px;
    transition: border-color .2s;
}
input:focus, select:focus { outline: none; border-color: var(--green); }
select { appearance: auto; }

/* ===== ALERTS ===== */
.alert {
    padding: 12px 16px; border-radius: 8px; margin: 12px 0; font-size: .9rem;
}
.alert-error   { background: rgba(224,82,82,.15);  border: 1px solid var(--red); }
.alert-warning { background: rgba(240,192,64,.1);  border: 1px solid var(--gold); color: var(--gold); }
.alert-success { background: rgba(26,124,62,.2);   border: 1px solid var(--green); }
.alert-info    { background: var(--surface2); border: 1px solid var(--border); }

/* ===== MAGIC LINK ===== */
.magic-link-box { display: flex; gap: 8px; margin: 16px 0; flex-wrap: wrap; }
.magic-link-box input { flex: 1; min-width: 0; font-size: 13px; font-family: monospace; }
.magic-link-box .btn  { flex-shrink: 0; }

/* ===== REGISTER FORM ===== */
.register-form .btn { width: 100%; margin-top: 8px; }

/* ===== PARTICIPANT BAR ===== */
.participant-bar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; padding: 12px 16px; margin: 16px 0;
}
.participant-name  { font-weight: 700; font-size: 1rem; flex: 1; min-width: 0; }
.participant-score { color: var(--gold); font-size: .95rem; white-space: nowrap; }
.participant-score small { color: var(--muted); margin-left: 4px; }

/* ===== TABS ===== */
.tabs {
    display: flex; gap: 0; margin-bottom: 0;
    border-bottom: 2px solid var(--border);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab-btn {
    flex: 1; min-width: 90px;
    background: none; border: none; color: var(--muted);
    padding: 12px 8px; cursor: pointer; font-size: .92rem;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    transition: color .2s; white-space: nowrap;
}
.tab-btn:hover  { color: var(--text); }
.tab-btn.active { color: var(--gold); border-bottom-color: var(--gold); font-weight: 700; }
@keyframes tab-pulse { 0%,100% { color: var(--muted); } 50% { color: #e8787a; } }
.tab-btn-alert { animation: tab-pulse 2s ease-in-out infinite; border-bottom-color: #e8787a; }
.tab-btn-alert.active { animation: none; }
.tab-content { display: none; padding: 16px 0; }
.tab-content.active { display: block; }
.hint { color: var(--muted); font-size: .85rem; margin-bottom: 14px; }

/* ===== PHASE HEADERS ===== */
.phase-header {
    font-weight: 700; color: var(--gold);
    margin: 20px 0 10px;
    text-transform: uppercase; font-size: .8rem; letter-spacing: .5px;
    padding: 6px 12px; background: var(--surface); border-radius: 6px;
    border-left: 3px solid var(--gold);
}
.group-header {
    color: var(--muted); font-weight: 700; font-size: .75rem;
    text-transform: uppercase; letter-spacing: 1px;
    margin: 14px 0 4px; padding-left: 4px;
}

/* ===== MATCH LIST ===== */
.match-list { display: flex; flex-direction: column; gap: 3px; }

.match-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 12px; row-gap: 4px;
    align-items: center;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; padding: 10px 12px;
    transition: background .15s;
}
.match-row:hover { background: var(--surface2); }
.match-row.match-finished { opacity: .82; }
.match-row.match-locked   { opacity: .88; }
.match-row.pred-exact     { border-left: 3px solid #5ddb8e; }
.match-row.pred-winner    { border-left: 3px solid var(--gold); }
.match-row.pred-wrong     { border-left: 3px solid #e8787a; }

.match-teams {
    grid-column: 1; grid-row: 1;
    display: flex; align-items: center; gap: 6px;
    font-size: .9rem;
}
.team      { font-weight: 600; }
.team.home { flex: 1; text-align: right; }
.team.away { flex: 1; text-align: left; }
.vs        { color: var(--muted); font-size: .75rem; flex-shrink: 0; }

.match-time {
    grid-column: 1; grid-row: 2;
    color: var(--muted); font-size: .78rem;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}

.prediction-inputs {
    grid-column: 2; grid-row: 1 / 3;
    display: flex; align-items: center; gap: 5px;
    align-self: center;
}

/* Score inputs — large touch targets */
.score-input {
    width: 52px; height: 48px;
    text-align: center; padding: 4px;
    font-size: 1.1rem; font-weight: 700;
    -moz-appearance: textfield;
}
.score-input::-webkit-outer-spin-button,
.score-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.score-sep { color: var(--muted); font-weight: 700; font-size: 1.1rem; }

.score-display .pred-score {
    font-weight: 700; font-size: .95rem;
    padding: 6px 10px; border-radius: 6px;
    white-space: nowrap;
}
.pred-score.exact  { background: rgba(26,124,62,.3);  color: #5ddb8e; }
.pred-score.winner { background: rgba(240,192,64,.15); color: var(--gold); }
.pred-score.wrong  { background: rgba(224,82,82,.15);  color: #e8787a; }
.no-pred { color: var(--muted); }

.pts-badge {
    font-size: .78rem; font-weight: 700;
    padding: 2px 7px; border-radius: 10px;
    white-space: nowrap;
}
.pts-badge.pts-exact  { background: rgba(26,124,62,.25);  color: #5ddb8e; }
.pts-badge.pts-winner { background: rgba(240,192,64,.15); color: var(--gold); }
.pts-badge.pts-wrong  { background: rgba(224,82,82,.12);  color: #e8787a; }

/* Save indicator */
.save-indicator { font-size: .85rem; min-width: 14px; }
.save-indicator.saving { color: var(--muted); }
.save-indicator.saved  { color: #5ddb8e; }
.save-indicator.error  { color: var(--red); }

/* ===== BADGES ===== */
.badge {
    display: inline-block; padding: 2px 8px; border-radius: 12px;
    font-size: .72rem; font-weight: 700; white-space: nowrap;
}
.badge-finished { background: rgba(26,124,62,.25); color: #5ddb8e; }
.badge-locked   { background: rgba(224,82,82,.2);  color: #e8787a; }
.badge-paid     { background: rgba(26,124,62,.2);  color: #5ddb8e; font-weight: 700; }

.btn-icon {
    background: none; border: none; cursor: pointer;
    color: var(--muted); font-size: .85rem; padding: 2px 4px;
    border-radius: 4px; line-height: 1; transition: color .15s;
    vertical-align: middle;
}
.btn-icon:hover { color: var(--gold); }

/* ===== GROUPS GRID ===== */
.groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px; margin-top: 12px;
}
.group-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px;
}
.group-card h4     { color: var(--gold); margin-bottom: 10px; font-size: .95rem; }
.group-card label  { display: block; margin-bottom: 8px; font-size: .82rem; color: var(--muted); }
.group-card select { font-size: 15px; min-height: 44px; }

/* ===== CHAMPION ===== */
.champion-card {
    background: var(--surface); border: 1px solid var(--gold);
    border-radius: var(--radius); padding: 24px; text-align: center;
}
.champion-card h3   { font-size: 1.25rem; margin-bottom: 12px; }
.champion-select-input {
    width: 100%; max-width: 340px;
    margin: 14px auto; display: block;
    font-size: 16px; min-height: 48px;
}

/* Champion early bird points bar */
.champion-points-bar {
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: 8px; padding: 14px 16px; margin: 14px 0; text-align: left;
}
.points-now  { display: block; margin-bottom: 10px; font-size: .92rem; }
.pts-value   { color: var(--gold); font-size: 1.05rem; }
.points-scale {
    display: flex; gap: 4px; flex-wrap: wrap; align-items: center;
}
.scale-item {
    padding: 4px 10px; border-radius: 20px; font-size: .78rem; font-weight: 700;
    background: var(--surface); border: 1px solid var(--border); color: var(--muted);
    transition: background .2s;
}
.scale-item.active {
    background: var(--gold); color: #1a1a1a; border-color: var(--gold);
}

/* ===== LEADERBOARD ===== */
.leaderboard-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.leaderboard-table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.leaderboard-table th {
    background: var(--surface2); padding: 10px 10px;
    text-align: left; font-size: .78rem; text-transform: uppercase;
    color: var(--muted); border-bottom: 2px solid var(--border);
    white-space: nowrap;
}
.leaderboard-table td { padding: 12px 10px; border-bottom: 1px solid var(--border); }
.leaderboard-table tr:hover td  { background: var(--surface2); }
.leaderboard-table tr.self-row td { background: rgba(26,124,62,.12); }
.leaderboard-table tr.gold td   { background: rgba(240,192,64,.07); }
.rank   { font-weight: 700; color: var(--muted); font-size: .9rem; }
.medal  { font-size: 1.2rem; }
.name   { font-weight: 600; }
.pts    { font-weight: 700; color: var(--gold); font-size: 1rem; }
.you-badge    { font-size: .72rem; color: var(--green); font-weight: 700; margin-left: 4px; }
.scoring-legend { color: var(--muted); font-size: .8rem; margin-top: 12px; line-height: 1.8; }

/* ===== PRIJZENPOT ===== */
.pot-card {
    margin-top: 24px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px 20px;
}
.pot-header {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 2px;
}
.pot-title { font-weight: 700; font-size: 1rem; }
.pot-total { font-size: 1.6rem; font-weight: 800; color: var(--gold); }
.pot-sub   { font-size: .78rem; color: var(--muted); margin-bottom: 14px; }
.pot-prizes { display: flex; flex-direction: column; gap: 8px; }
.pot-prize {
    display: flex; align-items: center; gap: 10px;
    background: var(--surface2); border-radius: 8px; padding: 10px 14px;
}
.pot-medal  { font-size: 1.3rem; flex-shrink: 0; }
.pot-label  { flex: 1; font-size: .9rem; font-weight: 600; }
.pot-label small { font-weight: 400; }
.pot-amount { font-size: 1.1rem; font-weight: 800; color: var(--gold); white-space: nowrap; }
.pot-pct    { font-size: .75rem; color: var(--muted); min-width: 32px; text-align: right; }

/* ===== ADMIN ===== */
.stats-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr));
    gap: 12px; margin: 16px 0;
}
.stat-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 18px; text-align: center;
}
.stat-num   { display: block; font-size: 2rem; font-weight: 700; color: var(--gold); }
.stat-label { color: var(--muted); font-size: .82rem; }
.admin-section {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 18px; margin: 14px 0;
}
.admin-section h3 { margin-bottom: 10px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.admin-table th {
    background: var(--surface2); padding: 8px 10px;
    text-align: left; color: var(--muted); border-bottom: 2px solid var(--border);
    font-size: .78rem; text-transform: uppercase; white-space: nowrap;
}
.admin-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.admin-table tr:hover td { background: var(--surface2); }
.inline-form { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.inline-form input[type=number] { width: 50px; min-height: 36px; text-align: center; padding: 4px; font-size: 14px; }
.filter-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }

/* ===== UTILITIES ===== */
.muted { color: var(--muted); }
code {
    font-family: monospace; background: var(--surface2);
    padding: 2px 6px; border-radius: 4px; font-size: .82rem;
    word-break: break-all;
}

/* ===== RESPONSIVE — 480px ===== */
@media (max-width: 480px) {
    .container { padding: 0 12px; }

    /* Header compact */
    .site-header h1 { font-size: 1rem; }
    .site-header nav a { padding: 6px 8px; font-size: .82rem; }

    /* Cards */
    .card { padding: 16px; }

    /* Match rows — stacked layout op kleine schermen */
    .match-row {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 6px;
        padding: 10px;
    }
    .match-teams   { grid-column: 1; grid-row: 1; }
    .match-time    { grid-column: 1; grid-row: 2; }
    .prediction-inputs {
        grid-column: 1; grid-row: 3;
        justify-content: center;
    }

    /* Grotere score inputs op touch */
    .score-input { width: 60px; height: 52px; font-size: 1.2rem; }

    /* Tabs — gelijkmatig verdeeld */
    .tab-btn { font-size: .85rem; padding: 10px 4px; }

    /* Participant bar compact */
    .participant-bar { padding: 10px 12px; gap: 8px; }
    .participant-name { font-size: .95rem; }

    /* Groups — 2 kolommen op phone */
    .groups-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .group-card { padding: 10px; }

    /* Champion select full width */
    .champion-select-input { max-width: 100%; }
    .champion-card { padding: 16px; }

    /* Leaderboard: verberg minder belangrijke kolommen */
    .hide-sm { display: none; }
    .leaderboard-table td, .leaderboard-table th { padding: 10px 8px; }

    /* Magic link stacked */
    .magic-link-box { flex-direction: column; }
    .magic-link-box .btn { width: 100%; }

    /* Phase header kleiner */
    .phase-header { margin: 14px 0 8px; }
}

/* ===== RESPONSIVE — 360px (kleine telefoons) ===== */
@media (max-width: 360px) {
    .site-header h1 { font-size: .9rem; }
    .groups-grid { grid-template-columns: 1fr 1fr; }
    .tab-btn { min-width: 70px; font-size: .8rem; }
}