/* HexHunting — gedeelde stijl.
   Donker thema, mobiel eerst, vaste navigatiebalk onderin zoals in een app. */

:root {
    --bg: #0B0F17;
    --paneel: #131A26;
    --paneel-rand: #232C3D;
    --tekst: #E8EAF0;
    --tekst-zwak: #8A93A6;
    --oranje: #F5A623;
    --groen: #34D399;
    --rood: #F87171;
    --blauw: #60A5FA;
    --nav-hoogte: 62px;
}

/* In de App Store-app verzorgt iOS zelf de tabnavigatie. */
html.hh-native-ios { --nav-hoogte: 0px; }
html.hh-native-ios .bottomnav { display: none !important; }
html.hh-native-ios .paneel { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--tekst);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
}

a { color: var(--oranje); }

/* ---------- Kopbalk ---------- */
.kopbalk {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: calc(env(safe-area-inset-top) + 0.7rem) 1rem 0.7rem;
    background: rgba(11, 15, 23, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--paneel-rand);
}

.kopbalk-naam {
    font-weight: 700;
    letter-spacing: -0.02em;
    text-decoration: none;
    color: var(--tekst);
}

.kopbalk-titel {
    color: var(--tekst-zwak);
    font-size: 0.85rem;
    margin-left: auto;
}

/* ---------- Taalkiezer ---------- */
.taalkiezer { display: flex; gap: 0.25rem; }
.taalknop {
    font-size: 1.05rem;
    line-height: 1;
    padding: 0.3rem 0.35rem;
    border-radius: 8px;
    text-decoration: none;
    opacity: 0.45;
    filter: grayscale(0.6);
}
.taalknop.actief { opacity: 1; filter: none; background: rgba(245, 166, 35, 0.14); }

/* ---------- Inhoud ---------- */
.paneel {
    max-width: 640px;
    margin: 0 auto;
    padding: 1.25rem 1rem calc(var(--nav-hoogte) + env(safe-area-inset-bottom) + 1.5rem);
}

h1 { font-size: 1.5rem; margin: 0 0 1rem; letter-spacing: -0.02em; }
h2 { font-size: 1.05rem; margin: 1.8rem 0 0.6rem; }
p { line-height: 1.6; }

.auth-paneel {
    max-width: 420px;
    margin: 0 auto;
    padding: 2rem 1.25rem calc(var(--nav-hoogte) + 2rem);
}

.kaart {
    background: var(--paneel);
    border: 1px solid var(--paneel-rand);
    border-radius: 14px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.kaart h2 { margin-top: 0; }

/* ---------- Formulieren ---------- */
label {
    display: block;
    margin-bottom: 0.9rem;
    font-size: 0.85rem;
    color: var(--tekst-zwak);
}

input[type=text], input[type=email], input[type=password], input[type=file], input[type=datetime-local], select {
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--paneel-rand);
    background: var(--paneel);
    color: var(--tekst);
    font-size: 1rem;
}

input:focus, select:focus { outline: 2px solid var(--oranje); outline-offset: 1px; }
.auth-onthouden { display: flex; align-items: center; gap: .65rem; margin: .2rem 0 0; color: var(--tekst); cursor: pointer; }
.auth-onthouden input { width: 19px; height: 19px; flex: 0 0 19px; margin: 0; accent-color: #38bdf8; }
.auth-onthouden-uitleg { font-size: .77rem; color: var(--tekst-zwak); margin: .2rem 0 1rem; }

button, .knop {
    display: inline-block;
    width: 100%;
    padding: 0.85rem 1rem;
    border: none;
    border-radius: 10px;
    background: var(--oranje);
    color: #101010;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    margin-bottom: 0.5rem;
}

.knop-secundair, button.knop-secundair {
    background: transparent;
    color: var(--tekst);
    border: 1px solid var(--paneel-rand);
}

.knop-gevaar, button.knop-gevaar { background: var(--rood); color: #180A0A; }

label.keuze {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    color: var(--tekst);
    line-height: 1.5;
}
label.keuze input { width: auto; margin: 0.15rem 0 0; flex-shrink: 0; }

.inline-formulier { margin-top: 0.6rem; }

/* ---------- Meldingen ---------- */
.melding {
    padding: 0.8rem 0.9rem;
    border-radius: 10px;
    font-size: 0.88rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}
.melding-fout { background: rgba(248, 113, 113, 0.12); border: 1px solid rgba(248, 113, 113, 0.35); }
.melding-succes { background: rgba(52, 211, 153, 0.12); border: 1px solid rgba(52, 211, 153, 0.35); }

.melding-uitklapbaar summary {
    cursor: pointer;
    list-style: none;
}
.melding-uitklapbaar summary::-webkit-details-marker { display: none; }
.melding-uitklapbaar summary::after {
    content: '▸';
    float: right;
    transition: transform 0.15s ease;
}
.melding-uitklapbaar[open] summary::after { transform: rotate(90deg); }
.verdachte-lijst {
    margin: 0.7rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.82rem;
    line-height: 1.6;
}

.klein-grijs { color: var(--tekst-zwak); font-size: 0.85rem; line-height: 1.6; }
.klein-grijs a { color: var(--oranje); }

/* ---------- Statistiektegels ---------- */
.tegels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}
.tegel {
    background: var(--paneel);
    border: 1px solid var(--paneel-rand);
    border-radius: 12px;
    padding: 0.8rem 0.5rem;
    text-align: center;
}
.tegel-getal { display: block; font-size: 1.35rem; font-weight: 700; color: var(--oranje); }
.tegel-label { display: block; font-size: 0.7rem; color: var(--tekst-zwak); margin-top: 0.2rem; line-height: 1.3; }

/* ---------- Tabbladen ---------- */
.tabs {
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
    padding-bottom: 0.4rem;
    margin-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
}
.tabs a {
    flex: 0 0 auto;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--paneel-rand);
    color: var(--tekst-zwak);
    text-decoration: none;
    font-size: 0.85rem;
    white-space: nowrap;
}
.tabs a.actief { background: var(--oranje); color: #101010; border-color: transparent; font-weight: 600; }

/* ---------- Klassementen ---------- */
.klassement-lijst { list-style: none; padding: 0; margin: 0 0 1rem; }
.klassement-rij {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.2rem;
    border-bottom: 1px solid var(--paneel-rand);
}
.klassement-rij.ik { background: rgba(245, 166, 35, 0.08); border-radius: 8px; padding-left: 0.5rem; }
.klassement-positie {
    width: 1.8rem;
    text-align: center;
    color: var(--tekst-zwak);
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
}
.klassement-rij:nth-child(1) .klassement-positie { color: var(--oranje); font-weight: 700; }
.klassement-naam { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.klassement-gebied .klassement-naam { white-space: normal; }
.klassement-gebied .klassement-naam small { display: block; color: var(--tekst-zwak); font-size: .75rem; margin-top: .2rem; }
.gebied-grafiek { width: 100%; height: auto; max-height: 290px; }
.klassement-waarde { font-weight: 700; color: var(--oranje); font-variant-numeric: tabular-nums; }
.klassement-detail { font-size: 0.72rem; color: var(--tekst-zwak); display: block; }
.klassement-leeg { color: var(--tekst-zwak); font-size: 0.9rem; padding: 1rem 0; }
.klassement-deelregel {
    display: flex;
    justify-content: flex-end;
    margin: .15rem 0 .45rem;
}
.klassement-deelregel .deelknop {
    min-height: 40px;
    padding: .45rem .65rem;
}
.erelijst-periode-kop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .7rem;
    margin: 1.8rem 0 .6rem;
}
.erelijst-periode-kop h2 { min-width: 0; margin: 0; }
.erelijst-periode-kop .deelknop {
    flex: 0 0 auto;
    min-height: 40px;
    padding: .45rem .65rem;
}

@media (max-width: 520px) {
    .klassement-deelregel .deelknop { font-size: .74rem; }
    .erelijst-periode-kop .deelknop { font-size: .74rem; }
}

/* ---------- Delen en activiteitsoogst ---------- */
.deelknop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: auto;
    min-height: 44px;
    margin: 0;
    padding: .55rem .72rem;
    border: 1px solid rgba(125, 211, 252, .24);
    border-radius: 12px;
    background: rgba(56, 189, 248, .10);
    color: #dff5ff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
    font-size: .78rem;
    white-space: nowrap;
}
.deelknop svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.deelknop:active { transform: scale(.97); }
.deelknop:disabled { opacity: .6; cursor: wait; }
.deelkaart-acties { display: flex; align-items: stretch; gap: .45rem; min-width: 0; max-width: 100%; }
.deelkaart-acties .deelknop { flex: 1 1 auto; width: auto; min-width: 0; }
.deelkaart-opslaan {
    flex: 0 1 auto;
    min-height: 44px;
    padding: .45rem .7rem;
    border: 1px solid rgba(125, 211, 252, .35);
    border-radius: 12px;
    background: rgba(3, 24, 43, .65);
    color: #dff5ff;
    font-size: .75rem;
    font-weight: 650;
    line-height: 1.2;
    white-space: normal;
    cursor: pointer;
}
.deelkaart-opslaan:disabled { opacity: .6; cursor: wait; }
.activiteit-oogst-voet .deelkaart-acties,
.oogst-popup-acties .deelkaart-acties { width: 100%; }
.activiteit-oogst-voet .deelkaart-acties .deelknop,
.oogst-popup-acties .deelkaart-acties .deelknop { width: auto; }
.oogst-popup-acties .deelkaart-opslaan { min-height: 48px; }
.klassement-rij .deelknop { flex: 0 0 auto; padding: .5rem; }
.klassement-rij .deelknop span { display: none; }

.activiteiten-lijst { display: grid; gap: .7rem; }
.activiteit-oogst {
    padding: .9rem;
    border: 1px solid rgba(148, 207, 255, .14);
    border-radius: 16px;
    background: rgba(3, 17, 31, .38);
}
.activiteit-oogst-kop,
.activiteit-oogst-voet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}
.activiteit-oogst-voet { flex-wrap: wrap; }
.activiteit-oogst-naam {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 720;
}
.activiteit-oogst-sport {
    flex: 0 0 auto;
    padding: .28rem .5rem;
    border-radius: 999px;
    color: #9edfff;
    background: rgba(56, 189, 248, .10);
    font-size: .7rem;
}
.activiteit-oogst-cijfers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
    margin: .8rem 0;
}
.activiteit-oogst-cijfer strong { display: block; color: #eaf9ff; font-size: 1.05rem; }
.activiteit-oogst-cijfer span { display: block; color: var(--tekst-zwak); font-size: .75rem; line-height: 1.3; }
.activiteit-oogst-meta { min-width: 0; color: var(--tekst-zwak); font-size: .75rem; }
.activiteit-oogst-status { color: #fbbf24; font-size: .8rem; margin: .6rem 0 0; }

.deelmelding {
    position: fixed;
    z-index: 9999;
    left: 50%;
    bottom: calc(var(--nav-hoogte) + env(safe-area-inset-bottom) + 1.5rem);
    max-width: calc(100% - 2rem);
    padding: .7rem 1rem;
    border: 1px solid rgba(125, 211, 252, .24);
    border-radius: 999px;
    background: rgba(4, 18, 33, .94);
    color: #eaf9ff;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .38);
    transform: translate(-50%, 18px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    font-size: .82rem;
}
.deelmelding.zichtbaar { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Nieuwsfeed ---------- */
.feed { list-style: none; padding: 0; margin: 0; }
.feed li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--paneel-rand);
    font-size: 0.9rem;
    line-height: 1.45;
}
.feed-icoon { flex-shrink: 0; font-size: 1.1rem; }
.feed-tijd { display: block; color: var(--tekst-zwak); font-size: 0.72rem; margin-top: 0.15rem; }
.feed .verlies { color: var(--rood); }
.feed .winst { color: var(--groen); }

/* ---------- Tekstpagina's ---------- */
.tekstpagina h2 { color: var(--tekst); font-size: 1rem; margin-top: 1.8rem; }
.tekstpagina p { font-size: 0.9rem; line-height: 1.7; }
.tekstlijst { list-style: disc; padding-left: 1.2rem; }
.tekstlijst li { font-size: 0.9rem; line-height: 1.6; padding: 0.25rem 0; }

.tabel-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tekst-tabel { width: 100%; border-collapse: collapse; font-size: 0.8rem; margin-top: 0.5rem; white-space: nowrap; }
.tekst-tabel th, .tekst-tabel td {
    text-align: left;
    padding: 0.45rem 0.4rem;
    border-bottom: 1px solid var(--paneel-rand);
    vertical-align: top;
}
.tekst-tabel th { color: var(--tekst-zwak); font-weight: 600; }

/* ---------- Voortgang ---------- */
.voortgangsbalk {
    height: 10px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    margin: 0.8rem 0;
}
.voortgangsbalk span { display: block; height: 100%; background: var(--oranje); transition: width 0.3s ease; }

/* ---------- Sync-status ---------- */
.status { font-size: 0.78rem; padding: 0.1rem 0.45rem; border-radius: 999px; }
.status-klaar { background: rgba(52, 211, 153, 0.16); color: var(--groen); }
.status-bezig { background: rgba(96, 165, 250, 0.16); color: var(--blauw); }
.status-wachtend { background: rgba(255, 255, 255, 0.08); color: var(--tekst-zwak); }
.status-mislukt { background: rgba(248, 113, 113, 0.16); color: var(--rood); }

/* ---------- Footer ---------- */
.site-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    align-items: center;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--paneel-rand);
    font-size: 0.75rem;
}
.site-footer a { color: var(--tekst-zwak); text-decoration: none; }
.strava-vermelding { margin-left: auto; color: var(--tekst-zwak); letter-spacing: 0.03em; }

/* ---------- Vaste navigatie onderin ---------- */
.bottomnav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 900;
    display: flex;
    background: rgba(11, 15, 23, 0.96);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--paneel-rand);
    padding-bottom: env(safe-area-inset-bottom);
}
.bottomnav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.5rem 0.2rem 0.55rem;
    color: var(--tekst-zwak);
    text-decoration: none;
    min-height: var(--nav-hoogte);
}
.bottomnav a.actief { color: var(--oranje); }
.bottomnav-icoon { font-size: 1.15rem; line-height: 1; }
.bottomnav-label { font-size: 0.65rem; }

@media (min-width: 700px) {
    .tegels { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   Glassy blue redesign — helder, modern en rustig
   ============================================================ */
:root {
    --bg: #06111f;
    --paneel: rgba(15, 42, 68, 0.58);
    --paneel-rand: rgba(148, 207, 255, 0.16);
    --tekst: #f5faff;
    --tekst-zwak: #a9bfd3;
    --oranje: #38bdf8;
    --groen: #2dd4bf;
    --rood: #fb7185;
    --blauw: #60a5fa;
    --nav-hoogte: 72px;
    --gloed: 0 18px 55px rgba(2, 132, 199, 0.15);
}

html { background: #06111f; }
body {
    min-height: 100%;
    background:
        radial-gradient(circle at 15% -10%, rgba(14, 165, 233, 0.22), transparent 34rem),
        radial-gradient(circle at 105% 28%, rgba(37, 99, 235, 0.16), transparent 32rem),
        linear-gradient(155deg, #071827 0%, #06111f 46%, #081728 100%);
    background-attachment: fixed;
}

a { color: #7dd3fc; }

.kopbalk {
    padding: calc(env(safe-area-inset-top) + 0.8rem) 1rem 0.8rem;
    background: rgba(4, 18, 33, 0.7);
    border-bottom: 1px solid rgba(148, 207, 255, 0.13);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
}

.kopbalk-naam {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    background: linear-gradient(120deg, #fff, #7dd3fc);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.kopbalk-titel { color: #8fb1cc; font-size: 0.8rem; }
.taalknop { border: 1px solid transparent; }
.taalknop.actief { background: rgba(56,189,248,.13); border-color: rgba(125,211,252,.18); }

.paneel { max-width: 720px; padding: 1.4rem 1rem calc(var(--nav-hoogte) + env(safe-area-inset-bottom) + 2rem); }
.auth-paneel { padding-top: 2.4rem; }
h1 { font-size: clamp(1.55rem, 5vw, 2.15rem); font-weight: 780; letter-spacing: -0.04em; }
h2 { letter-spacing: -0.018em; }

.kaart,
.tegel {
    background: linear-gradient(145deg, rgba(24, 59, 91, 0.68), rgba(10, 31, 51, 0.5));
    border: 1px solid rgba(148, 207, 255, 0.16);
    box-shadow: var(--gloed), inset 0 1px 0 rgba(255,255,255,.055);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    backdrop-filter: blur(18px) saturate(135%);
}
.kaart { border-radius: 22px; padding: 1.15rem; margin-bottom: 0.9rem; }
.tegel { border-radius: 18px; padding: 1rem 0.55rem; }
.tegel-getal { color: #7dd3fc; font-size: 1.55rem; }
.tegel-label { color: #9eb7cc; font-size: 0.72rem; }

input[type=text], input[type=email], input[type=password], input[type=file], input[type=datetime-local], select {
    min-height: 48px;
    background: rgba(3, 17, 31, 0.6);
    border: 1px solid rgba(148, 207, 255, 0.18);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
input:focus, select:focus { outline: 2px solid rgba(56,189,248,.75); border-color: transparent; }

button, .knop {
    min-height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, #38bdf8, #2563eb);
    color: #fff;
    box-shadow: 0 10px 28px rgba(14,165,233,.22), inset 0 1px 0 rgba(255,255,255,.22);
}
.knop-secundair, button.knop-secundair {
    background: rgba(56,189,248,.08);
    border-color: rgba(125,211,252,.22);
    color: #dff5ff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.tabs { gap: .5rem; }
.tabs a { padding: .55rem .95rem; border-color: rgba(148,207,255,.16); background: rgba(15,42,68,.35); }
.tabs a.actief { background: linear-gradient(135deg, #38bdf8, #2563eb); color: #fff; box-shadow: 0 8px 22px rgba(14,165,233,.2); }
.klassement-rij.ik { background: rgba(56,189,248,.1); }
.klassement-rij:nth-child(1) .klassement-positie,
.klassement-waarde,
.klein-grijs a { color: #7dd3fc; }
.voortgangsbalk span { background: linear-gradient(90deg, #2dd4bf, #38bdf8); }

.bottomnav {
    left: max(.65rem, env(safe-area-inset-left));
    right: max(.65rem, env(safe-area-inset-right));
    bottom: max(.55rem, env(safe-area-inset-bottom));
    padding: .3rem;
    border: 1px solid rgba(148,207,255,.17);
    border-radius: 22px;
    background: rgba(4, 18, 33, 0.78);
    -webkit-backdrop-filter: blur(24px) saturate(155%);
    backdrop-filter: blur(24px) saturate(155%);
    box-shadow: 0 16px 46px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
}
.bottomnav a { min-height: 58px; padding: .45rem .15rem; border-radius: 17px; transition: color .18s ease, background .18s ease, transform .18s ease; }
.bottomnav a.actief { color: #e9f9ff; background: linear-gradient(145deg, rgba(56,189,248,.22), rgba(37,99,235,.14)); }
.bottomnav a:active { transform: scale(.96); }
.bottomnav-icoon { display: grid; place-items: center; width: 24px; height: 24px; }
.bottomnav-icoon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bottomnav-label { font-size: .68rem; font-weight: 560; letter-spacing: .005em; }

@media (min-width: 760px) {
    .bottomnav { left: 50%; right: auto; width: min(620px, calc(100% - 2rem)); transform: translateX(-50%); }
    .kaart { padding: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

.taal-instellingen { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin: .8rem 0 1rem; }
.taal-keuze { margin: 0; }
.taal-keuze input { position: absolute; opacity: 0; pointer-events: none; }
.taal-keuze span {
    display: flex; align-items: center; justify-content: center; min-height: 52px;
    padding: .7rem; border-radius: 15px; color: var(--tekst-zwak);
    background: rgba(3,17,31,.48); border: 1px solid rgba(148,207,255,.16);
    cursor: pointer;
}
.taal-keuze input:checked + span { color: #fff; border-color: #38bdf8; background: rgba(56,189,248,.16); box-shadow: inset 0 0 0 1px rgba(56,189,248,.18); }
.taal-keuze input:focus-visible + span { outline: 2px solid #7dd3fc; outline-offset: 2px; }

/* ---------- Nieuwe-oogst pop-up ---------- */
.oogst-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: grid;
    place-items: end center;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
    background: rgba(2, 8, 18, .62);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity .18s ease;
}
.oogst-popup-overlay.zichtbaar { opacity: 1; }
.oogst-popup-overlay.sluit { opacity: 0; }
.oogst-popup {
    position: relative;
    width: min(100%, 520px);
    overflow: hidden;
    padding: 1.35rem;
    border: 1px solid rgba(148, 207, 255, .24);
    border-radius: 26px;
    background:
        radial-gradient(circle at 85% 0%, rgba(56,189,248,.25), transparent 14rem),
        linear-gradient(145deg, rgba(15,42,68,.98), rgba(5,22,38,.98));
    box-shadow: 0 28px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
    transform: translateY(24px) scale(.985);
    transition: transform .22s ease;
}
.oogst-popup-overlay.zichtbaar .oogst-popup { transform: translateY(0) scale(1); }
.oogst-popup::after {
    content: '⬡';
    position: absolute;
    right: -1.1rem;
    top: 2.8rem;
    font-size: 8rem;
    line-height: 1;
    color: rgba(125,211,252,.07);
    pointer-events: none;
}
.oogst-popup-sluit {
    position: absolute;
    z-index: 2;
    top: .75rem;
    right: .75rem;
    width: 42px;
    min-height: 42px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(148,207,255,.17);
    border-radius: 50%;
    background: rgba(3,17,31,.52);
    color: #dff5ff;
    box-shadow: none;
    font-size: 1.55rem;
    font-weight: 400;
}
.oogst-popup-kicker {
    margin-bottom: .45rem;
    color: #7dd3fc;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .11em;
}
.oogst-popup-titel { margin: 0 3rem .25rem 0; font-size: clamp(1.65rem, 7vw, 2.25rem); color: #fff; }
.oogst-popup-naam { max-width: calc(100% - 1rem); font-size: 1rem; font-weight: 720; color: #dff5ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oogst-popup-meta { margin-top: .25rem; color: var(--tekst-zwak); font-size: .78rem; }
.oogst-popup-cijfers {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
    margin: 1.1rem 0 .8rem;
}
.oogst-popup-cijfer {
    min-width: 0;
    padding: .8rem .55rem;
    border: 1px solid rgba(148,207,255,.13);
    border-radius: 16px;
    background: rgba(3,17,31,.38);
    text-align: center;
}
.oogst-popup-cijfer strong { display: block; color: #fff; font-size: clamp(1.2rem, 6vw, 1.65rem); line-height: 1.1; overflow: hidden; text-overflow: ellipsis; }
.oogst-popup-cijfer span { display: block; margin-top: .3rem; color: #9eb7cc; font-size: .68rem; line-height: 1.2; }
.oogst-popup-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.oogst-popup-chip { padding: .33rem .55rem; border-radius: 999px; background: rgba(148,207,255,.09); color: #b9d6ea; font-size: .72rem; }
.oogst-popup-chip.buit { background: rgba(45,212,191,.12); color: #77eadb; }
.oogst-popup-acties { position: relative; z-index: 1; display: grid; grid-template-columns: .9fr 1.25fr; gap: .55rem; }
.oogst-popup-acties .knop,
.oogst-popup-acties .deelknop { width: 100%; min-height: 48px; margin: 0; }
.oogst-popup-deel { background: linear-gradient(135deg, #38bdf8, #2563eb); border-color: transparent; color: #fff; font-weight: 700; }

/* ---------- Instelling voor oogst-e-mail ---------- */
.melding-instelling { margin: 0; }
.schakelaar-regel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 .9rem;
    color: var(--tekst);
}
.schakelaar-regel > span:first-child { min-width: 0; }
.schakelaar-regel strong { display: block; font-size: .9rem; }
.schakelaar-regel small { display: block; margin-top: .25rem; color: var(--tekst-zwak); line-height: 1.45; }
.schakelaar { position: relative; flex: 0 0 52px; width: 52px; height: 30px; }
.schakelaar input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.schakelaar > span {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(148,207,255,.18);
    border-radius: 999px;
    background: rgba(3,17,31,.7);
    transition: background .18s ease, border-color .18s ease;
}
.schakelaar > span::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    left: 2px;
    top: 2px;
    border-radius: 50%;
    background: #d7e8f5;
    box-shadow: 0 2px 8px rgba(0,0,0,.35);
    transition: transform .18s ease;
}
.schakelaar input:checked + span { background: linear-gradient(135deg,#2dd4bf,#38bdf8); border-color: transparent; }
.schakelaar input:checked + span::after { transform: translateX(22px); background: #fff; }
.schakelaar input:focus-visible + span { outline: 2px solid #7dd3fc; outline-offset: 3px; }
.compact-knop { width: auto; min-width: 120px; margin: 0; padding-inline: 1rem; }

/* Mobiele correcties voor de activiteitsoogst: lange namen en deelknoppen
   mogen nooit meer over elkaar heen vallen. */
@media (max-width: 480px) {
    .activiteit-oogst-kop { align-items: flex-start; }
    .activiteit-oogst-sport { max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .activiteit-oogst-voet { align-items: stretch; }
    .activiteit-oogst-meta { width: 100%; }
    .activiteit-oogst-voet .deelknop { width: 100%; }
    .oogst-popup-acties { grid-template-columns: 1fr; }
    .oogst-popup { padding: 1.2rem; }
}

/* ============================================================
   Persoonlijk dashboard + mobiele Account-fix (13-09-2026)
   ============================================================ */
html, body { max-width: 100%; overflow-x: hidden; }
.paneel { width: 100%; min-width: 0; }
.paneel > * { min-width: 0; }

.dashboard { margin: .15rem 0 1.15rem; }
.dashboard-sectie-kop,
.dashboard-blok-kop,
.dashboard-doel-kop {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .8rem;
}
.dashboard-sectie-kop { margin: 0 0 .75rem; }
.dashboard-sectie-kop h2,
.dashboard-blok-kop h2 { margin: 0; }
.dashboard-kicker {
    display: block;
    margin-bottom: .15rem;
    color: #7dd3fc;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.dashboard-bijgewerkt {
    flex: 0 0 auto;
    padding-bottom: .1rem;
    color: #7898b1;
    font-size: .68rem;
    white-space: nowrap;
}
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
    margin-bottom: .85rem;
}
.dashboard-stat {
    min-width: 0;
    min-height: 112px;
    padding: .85rem;
    border: 1px solid rgba(148, 207, 255, .15);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(20, 51, 79, .78), rgba(8, 28, 47, .58));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
.dashboard-stat-accent {
    background: linear-gradient(145deg, rgba(14, 116, 144, .35), rgba(37, 99, 235, .22));
    border-color: rgba(125, 211, 252, .28);
}
.dashboard-stat-rang {
    background: linear-gradient(145deg, rgba(109, 40, 217, .20), rgba(14, 116, 144, .18));
}
.dashboard-stat-label,
.dashboard-stat-sub {
    display: block;
    color: #91acc1;
    font-size: .71rem;
    line-height: 1.25;
}
.dashboard-stat-getal {
    display: block;
    min-width: 0;
    margin: .34rem 0 .18rem;
    color: #f3fbff;
    font-size: clamp(1.45rem, 8vw, 2rem);
    line-height: 1;
    letter-spacing: -.045em;
    overflow-wrap: anywhere;
}
.dashboard-blok { padding: 1rem; }
.dashboard-blok + .dashboard-blok { margin-top: .8rem; }
.dashboard-blok h2 { font-size: 1rem; }
.dashboard-trend {
    flex: 0 1 auto;
    max-width: 58%;
    color: #91acc1;
    font-size: .66rem;
    line-height: 1.25;
    text-align: right;
}
.dashboard-trend.positief { color: #6ee7b7; }
.dashboard-trend.negatief { color: #fca5a5; }
.dashboard-mini-grid,
.dashboard-record-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    margin-top: .8rem;
}
.dashboard-mini,
.dashboard-record {
    min-width: 0;
    padding: .7rem;
    border: 1px solid rgba(148, 207, 255, .10);
    border-radius: 14px;
    background: rgba(3, 17, 31, .34);
}
.dashboard-mini strong,
.dashboard-record strong {
    display: block;
    min-width: 0;
    color: #eaf9ff;
    font-size: 1.15rem;
    line-height: 1.05;
    overflow-wrap: anywhere;
}
.dashboard-mini span,
.dashboard-record > span {
    display: block;
    margin-top: .28rem;
    color: #8fa9bd;
    font-size: .68rem;
    line-height: 1.28;
}
.dashboard-mini-tekst strong { font-size: .96rem; line-height: 1.15; }
.dashboard-record small {
    display: -webkit-box;
    min-height: 2.35em;
    margin-top: .38rem;
    overflow: hidden;
    color: #7898b1;
    font-size: .65rem;
    line-height: 1.18;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
}
.dashboard-voetnoot {
    margin: .7rem 0 0;
    color: #7898b1;
    font-size: .68rem;
    line-height: 1.4;
}
.dashboard-doel { margin-top: .8rem; }
.dashboard-doel-kop { align-items: center; }
.dashboard-doel-kop span,
.dashboard-doel-rang span {
    color: #91acc1;
    font-size: .72rem;
}
.dashboard-doel-kop strong { font-size: .78rem; color: #dff5ff; }
.dashboard-progress {
    height: 9px;
    margin: .5rem 0 .4rem;
    overflow: hidden;
    border: 1px solid rgba(148, 207, 255, .13);
    border-radius: 999px;
    background: rgba(3, 17, 31, .65);
}
.dashboard-progress span {
    display: block;
    height: 100%;
    min-width: 2px;
    border-radius: inherit;
    background: linear-gradient(90deg, #2dd4bf, #38bdf8);
}
.dashboard-doel small {
    color: #7898b1;
    font-size: .66rem;
}
.dashboard-doel-rang {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: .7rem;
    padding-top: .8rem;
    border-top: 1px solid rgba(148,207,255,.10);
}
.dashboard-doel-rang > div:first-child strong,
.dashboard-cluster strong {
    display: block;
    margin-top: .2rem;
    color: #eaf9ff;
    font-size: .92rem;
    line-height: 1.25;
}
.dashboard-cluster {
    min-width: 72px;
    padding: .55rem .65rem;
    border-radius: 12px;
    background: rgba(56,189,248,.08);
    text-align: center;
}
.dashboard-cluster span { display: block; font-size: .61rem; }
.dashboard-cluster strong { font-size: 1.2rem; }

/* Activiteitsoogst: nooit horizontaal buiten het scherm. */
.activiteiten-lijst,
.activiteit-oogst,
.activiteit-oogst-kop,
.activiteit-oogst-cijfers,
.activiteit-oogst-voet { min-width: 0; max-width: 100%; }
.activiteiten-lijst { width: 100%; }
.activiteit-oogst {
    width: 100%;
    overflow: hidden;
    padding: .82rem;
}
.activiteit-oogst-kop { flex-wrap: wrap; }
.activiteit-oogst-naam {
    flex: 1 1 12rem;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.22;
}
.activiteit-oogst-cijfer {
    min-width: 0;
    padding: .58rem .62rem;
    border-radius: 12px;
    background: rgba(3,17,31,.30);
}
.activiteit-oogst-cijfer strong {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 1.08rem;
}
.activiteit-oogst-meta {
    max-width: 100%;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.activiteit-oogst-voet .deelknop {
    max-width: 100%;
    min-width: 0;
    min-height: 42px;
    margin-bottom: 0;
}
.activiteit-oogst-voet .deelknop span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.deelkaart-route-keuze {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .65rem;
    border: 1px solid rgba(125, 211, 252, .22);
    border-radius: .75rem;
    background: rgba(13, 41, 66, .65);
    color: #d5ecf8;
    font-size: .83rem;
    cursor: pointer;
}
.deelkaart-route-keuze input { width: 1.1rem; height: 1.1rem; accent-color: #22d3ee; }
.deelkaart-route-keuze span { display: grid; gap: .15rem; line-height: 1.3; }
.deelkaart-route-keuze small { color: #acc4d4; font-size: .74rem; }

/* De zwevende navigatie blijft binnen de iPhone-viewport en iets compacter. */
.bottomnav {
    max-width: calc(100vw - 1.3rem);
    overflow: hidden;
}
.bottomnav a { min-width: 0; min-height: 54px; }
.bottomnav-label { font-size: .64rem; white-space: nowrap; }

@media (min-width: 600px) {
    .dashboard-grid-kern { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .dashboard-mini-grid,
    .dashboard-record-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .paneel { padding-left: .8rem; padding-right: .8rem; }
    .kaart { padding: 1rem; }
    .dashboard-bijgewerkt { display: none; }
    .dashboard-stat { min-height: 104px; padding: .76rem; }
    .dashboard-stat-getal { font-size: clamp(1.35rem, 8vw, 1.8rem); }
    .dashboard-blok-kop { align-items: flex-start; }
    .dashboard-trend { max-width: 52%; }

    .activiteit-oogst-cijfers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .45rem;
        margin: .7rem 0;
    }
    .activiteit-oogst-cijfer:nth-child(3) { grid-column: 1 / -1; }
    .activiteit-oogst-kop { align-items: flex-start; }
    .activiteit-oogst-naam { flex-basis: 100%; }
    .activiteit-oogst-sport {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .activiteit-oogst-voet {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: .55rem;
        align-items: stretch;
    }
    .activiteit-oogst-meta,
    .activiteit-oogst-voet .deelknop { width: 100%; }
    .activiteit-oogst-voet .deelknop { padding: .48rem .65rem; }

    .bottomnav { padding: .25rem; border-radius: 20px; }
    .bottomnav a { min-height: 52px; padding: .35rem .1rem; border-radius: 15px; }
    .bottomnav-icoon svg { width: 21px; height: 21px; }
}

@media (max-width: 360px) {
    .dashboard-stat { min-height: 98px; padding: .68rem; }
    .dashboard-stat-label,
    .dashboard-stat-sub,
    .dashboard-mini span,
    .dashboard-record > span { font-size: .64rem; }
    .dashboard-doel-rang { grid-template-columns: minmax(0, 1fr); }
    .dashboard-cluster { width: 100%; }
    .bottomnav-label { font-size: .59rem; }
}

/* ============================================================
   Badges — persoonlijke vitrine
   ============================================================ */
.badges-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.1rem;
    padding: 1.15rem;
    border: 1px solid rgba(125, 211, 252, .22);
    border-radius: 24px;
    background:
        radial-gradient(circle at 88% 8%, rgba(45, 212, 191, .18), transparent 9rem),
        linear-gradient(145deg, rgba(15, 79, 111, .7), rgba(16, 36, 72, .64));
    box-shadow: var(--gloed), inset 0 1px 0 rgba(255,255,255,.08);
}
.badges-hero h1 { margin: 0; }
.verkend-records-acties { display: flex; flex-wrap: wrap; gap: .65rem; margin: .4rem 0 1.4rem; }
.verkend-records-acties a { width: auto; display: inline-flex; align-items: center; min-height: 44px; padding: .6rem .8rem; border: 1px solid rgba(125,211,252,.25); border-radius: 12px; color: #b7eaff; text-decoration: none; font-size: .8rem; font-weight: 700; background: rgba(10,42,66,.7); }
.verkend-records-acties a:focus-visible { outline: 3px solid #7dd3fc; outline-offset: 2px; }
.badges-hero p { margin: .48rem 0 0; color: #a9c4d8; font-size: .84rem; line-height: 1.45; }
.badges-teller {
    display: grid;
    place-items: center;
    min-width: 88px;
    min-height: 88px;
    padding: .65rem;
    border: 1px solid rgba(94, 234, 212, .3);
    border-radius: 50%;
    background: rgba(3, 31, 49, .48);
    text-align: center;
}
.badges-teller strong { color: #eafffb; font-size: 1.55rem; letter-spacing: -.06em; line-height: 1; }
.badges-teller strong small { color: #7fb7ce; font-size: .72rem; letter-spacing: 0; }
.badges-teller span { margin-top: .18rem; color: #8ad8d6; font-size: .63rem; font-weight: 750; text-transform: uppercase; letter-spacing: .065em; }
.badges-sectie { margin: 1.45rem 0; }
.badges-sectie-kop { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .7rem; }
.badges-sectie-kop h2 { margin: 0; font-size: 1.1rem; }
.persoonlijke-records,
.sportrecords-grid,
.badge-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .62rem; }
.persoonlijk-record,
.sportrecord,
.badge {
    min-width: 0;
    border: 1px solid rgba(148, 207, 255, .14);
    background: rgba(7, 29, 48, .58);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.persoonlijk-record { padding: .82rem; border-radius: 17px; }
.persoonlijk-record-link { display: block; color: inherit; text-decoration: none; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.persoonlijk-record-link:hover, .persoonlijk-record-link:focus-visible { border-color: rgba(125,211,252,.48); background: rgba(17,63,95,.78); outline: none; transform: translateY(-2px); }
.persoonlijk-record span { display: block; min-height: 2.25em; color: #8fa9bd; font-size: .68rem; line-height: 1.18; }
.persoonlijk-record strong { display: block; margin: .22rem 0 .32rem; color: #eefbff; font-size: 1.2rem; letter-spacing: -.04em; line-height: 1.05; overflow-wrap: anywhere; }
.persoonlijk-record small,
.sportrecord small { display: block; overflow: hidden; color: #7898b1; font-size: .64rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.sportrecord { padding: .92rem; border-radius: 18px; }
.sportrecord h3 { margin: 0 0 .65rem; color: #e9f9ff; font-size: .95rem; }
.sportrecord > div { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding: .4rem 0; border-top: 1px solid rgba(148,207,255,.09); }
.sportrecord > div span { color: #8fa9bd; font-size: .66rem; }
.sportrecord > div strong { color: #dcf8ff; font-size: .9rem; white-space: nowrap; }
.sportrecord-actie { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .48rem 0; border-top: 1px solid rgba(148,207,255,.10); color: inherit; text-decoration: none; }.sportrecord-actie span { display: flex; align-items: center; gap: .3rem; color: #8fa9bd; font-size: .66rem; }.sportrecord-actie span small { color: #5fbedd; font-size: .55rem; }.sportrecord-actie strong { color: #dcf8ff; font-size: .9rem; white-space: nowrap; }.sportrecord-actie:hover strong, .sportrecord-actie:focus-visible strong { color: #7dd3fc; }.sportrecord-actie:focus-visible { outline: 2px solid #7dd3fc; outline-offset: 3px; border-radius: 8px; }
.sportrecord small { margin-top: .55rem; }
.badge-groep { margin-top: 1.2rem; }
.badge-groep > h3 { margin: 0 0 .55rem; color: #98b6cb; font-size: .75rem; font-weight: 760; letter-spacing: .075em; text-transform: uppercase; }
.badge { display: grid; grid-template-columns: 45px minmax(0, 1fr); gap: .68rem; min-height: 132px; padding: .76rem; border-radius: 18px; }
.badge-embleem { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(125,211,252,.22); border-radius: 15px; background: linear-gradient(145deg, rgba(14,116,144,.35), rgba(37,99,235,.2)); color: #d8fbff; font-size: 1rem; font-weight: 850; }
.badge h4 { margin: 0; color: #eaf9ff; font-size: .83rem; line-height: 1.18; }
.badge p { margin: .27rem 0 .5rem; color: #91acc1; font-size: .67rem; line-height: 1.32; }
.badge-status { display: block; color: #7898b1; font-size: .62rem; line-height: 1.2; }
.badge-status-verdiend { color: #74e3c7; }
.badge-voortgang { height: 5px; margin: .48rem 0 .3rem; overflow: hidden; border-radius: 999px; background: rgba(148,207,255,.12); }
.badge-voortgang span { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: linear-gradient(90deg, #2dd4bf, #38bdf8); }
.badge-gesloten { opacity: .62; }
.badge-gesloten .badge-embleem { filter: grayscale(1); background: rgba(80, 104, 122, .14); color: #99a8b4; }
.badge-verdiend { border-color: rgba(94,234,212,.23); background: linear-gradient(145deg, rgba(11, 69, 77, .62), rgba(11, 37, 58, .56)); }

/* Zes korte tabs blijven ook op een smalle iPhone rustig en aantikbaar. */
@media (max-width: 560px) {
    .bottomnav a { min-width: 0; padding-inline: .04rem; }
    .bottomnav-label { font-size: .56rem; letter-spacing: 0; }
    .badges-hero { padding: 1rem; }
    .badges-teller { min-width: 76px; min-height: 76px; }
    .badges-teller strong { font-size: 1.32rem; }
    .badge { grid-template-columns: 39px minmax(0, 1fr); gap: .5rem; padding: .68rem; }
    .badge-embleem { width: 37px; height: 37px; border-radius: 13px; font-size: .86rem; }
}
@media (min-width: 600px) {
    .persoonlijke-records { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sportrecords-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .badge-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 340px) {
    .bottomnav-label { font-size: .51rem; }
    .badges-hero { grid-template-columns: 1fr; }
    .badges-teller { justify-self: start; border-radius: 18px; min-width: 95px; min-height: 70px; }
}

/* ---------- Teams ---------- */
.teams-kop, .team-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: .1rem 0 1rem; }
.teams-kop h1, .team-hero h1 { margin: 0; }
.teams-kop p, .team-hero p { margin: .42rem 0 0; color: #9eb7cc; font-size: .84rem; line-height: 1.42; }
.teams-kop .knop { flex: 0 0 auto; min-height: 40px; padding: .6rem .75rem; font-size: .75rem; }
.team-mijn { display: grid; grid-template-columns: 7px minmax(0,1fr) auto; gap: .9rem; align-items: center; }
.team-mijn h2 { margin: 0; }.team-mijn p { margin: .25rem 0 0; color: #9eb7cc; font-size: .8rem; }.team-mijn .knop { min-height: 40px; padding: .55rem .8rem; }
.team-kleur { width: 7px; align-self: stretch; border-radius: 99px; }
.team-formulier { display: grid; gap: .75rem; }.team-formulier label { display: grid; gap: .3rem; color: #aac3d5; font-size: .75rem; font-weight: 700; }.team-formulier input[type=color] { width: 74px; min-height: 42px; padding: .15rem; border-radius: 11px; }.team-formulier button { justify-self: start; margin: .25rem 0 0; }
.team-join { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .6rem; }.team-join button { min-height: 48px; margin: 0; }
.teams-ranglijst, .teams-openbaar { margin: 1.35rem 0; }.teams-ranglijst h2, .teams-openbaar h2 { margin-bottom: .32rem; }
.team-punt { display: inline-block; width: .56rem; height: .56rem; margin-right: .38rem; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255,255,255,.06); }
.teams-doorlink { margin: -.1rem 0 1rem; }.teams-doorlink a { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .55rem; padding: .78rem .9rem; border: 1px solid rgba(94,234,212,.22); border-radius: 17px; background: linear-gradient(135deg, rgba(13,83,92,.48), rgba(12,43,68,.48)); color: #e9fbff; text-decoration: none; }.teams-doorlink span { color: #6ee7d0; font-size: 1.3rem; }.teams-doorlink strong { font-size: .86rem; }.teams-doorlink small { grid-column: 2; color: #9eb7cc; font-size: .66rem; }.teams-doorlink b { grid-column: 3; grid-row: 1 / span 2; color: #7dd3fc; font-size: 1.3rem; }
.team-hero { align-items: center; padding: 1.15rem; border: 1px solid color-mix(in srgb, var(--teamkleur) 44%, transparent); border-radius: 23px; background: linear-gradient(135deg, color-mix(in srgb, var(--teamkleur) 24%, #08223a), rgba(8,31,51,.7)); }.team-hero-merk { display: grid; flex: 0 0 auto; place-items: center; width: 54px; height: 54px; border-radius: 19px; background: var(--teamkleur); color: #06111f; font-size: 1.7rem; font-weight: 900; }.team-hero div { min-width: 0; flex: 1; }
.team-score-kaarten { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .55rem; margin: .9rem 0; }.team-score-kaarten article { min-width: 0; padding: .78rem; border: 1px solid rgba(148,207,255,.13); border-radius: 17px; background: rgba(7,29,48,.58); }.team-score-kaarten span, .team-score-kaarten small { display: block; color: #8fa9bd; font-size: .64rem; line-height: 1.22; }.team-score-kaarten strong { display: block; margin: .35rem 0 .25rem; color: #ebfbff; font-size: 1rem; line-height: 1.05; overflow-wrap: anywhere; }
.team-uitnodiging code { display: block; width: max-content; max-width: 100%; margin: .75rem 0; padding: .6rem .8rem; border: 1px dashed rgba(125,211,252,.42); border-radius: 12px; color: #e8fbff; font-size: 1.05rem; font-weight: 850; letter-spacing: .1em; }.team-uitnodiging small { color: #8fa9bd; font-size: .72rem; line-height: 1.35; }.team-rol { color: #74e3c7; font-weight: 700; }.team-spelregels li { margin: .5rem 0; color: #a9bfd3; font-size: .82rem; line-height: 1.4; }.team-verlaat { margin: 1rem 0; }.teams-openbaar .sportrecord p { min-height: 2.6em; margin: .15rem 0 .55rem; color: #9eb7cc; font-size: .72rem; line-height: 1.3; }.teams-openbaar .sportrecord form { margin-top: .65rem; }.teams-openbaar .sportrecord button { min-height: 38px; margin: 0; padding: .45rem .65rem; font-size: .72rem; }
@media (max-width: 560px) { .teams-kop { align-items: flex-start; }.teams-kop .knop { display: none; }.team-mijn { grid-template-columns: 6px minmax(0,1fr); }.team-mijn .knop { grid-column: 2; justify-self: start; }.team-score-kaarten { grid-template-columns: repeat(3,minmax(0,1fr)); gap: .4rem; }.team-score-kaarten article { padding: .62rem; }.team-score-kaarten strong { font-size: .85rem; }.team-hero { align-items: flex-start; padding: .95rem; }.team-hero-merk { width: 44px; height: 44px; border-radius: 15px; font-size: 1.3rem; }.team-join { grid-template-columns: 1fr; }.team-join button { width: 100%; } }

/* Strakkere mobiele team-instroom: rustige velden, geen zwevende checkbox. */
.team-start { padding: 1rem; }
.team-kaart-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; margin-bottom: .95rem; }
.team-kaart-kop h2 { margin: 0; }.team-kaart-kop p { margin: .3rem 0 0; }.team-kaart-kop > span { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border: 1px solid rgba(94,234,212,.24); border-radius: 13px; color: #83eadc; background: rgba(45,212,191,.08); font-size: 1.15rem; }
.team-formulier { gap: .85rem; }.team-velden { display: grid; gap: .7rem; }.team-formulier label:not(.team-privacy) { display: grid; gap: .35rem; color: #b5cede; font-size: .72rem; font-weight: 750; }.team-formulier label em { color: #6f91a9; font-size: .62rem; font-style: normal; font-weight: 600; }.team-formulier input[type=text] { width: 100%; min-height: 46px; box-sizing: border-box; border-color: rgba(148,207,255,.19); background: rgba(2,16,30,.66); color: #edfaff; box-shadow: none; }.team-formulier input[type=text]::placeholder { color: #6e8da3; opacity: 1; }
.team-opties { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: .65rem; align-items: stretch; }.team-kleur-keuze { padding: .6rem; border: 1px solid rgba(148,207,255,.14); border-radius: 14px; background: rgba(3,17,31,.34); }.team-kleur-keuze > span { color: #9fb9cc; font-size: .62rem; }.team-kleur-keuze input[type=color] { width: 100%; height: 30px; min-height: 30px; margin-top: .28rem; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.team-formulier .team-privacy { position: relative; display: grid !important; grid-template-columns: 40px minmax(0,1fr); gap: .65rem; align-items: center; padding: .62rem .72rem; border: 1px solid rgba(148,207,255,.14); border-radius: 14px; background: rgba(3,17,31,.34); cursor: pointer; }.team-privacy > input { position: absolute; width: 1px; height: 1px; opacity: 0; }.team-toggle { width: 38px; height: 22px; border: 1px solid rgba(148,207,255,.25); border-radius: 999px; background: #203a50; transition: background .18s ease; }.team-toggle::after { content: ''; display: block; width: 16px; height: 16px; margin: 2px; border-radius: 50%; background: #cfe4ef; transition: transform .18s ease; }.team-privacy input:checked + .team-toggle { border-color: transparent; background: linear-gradient(135deg,#2dd4bf,#38bdf8); }.team-privacy input:checked + .team-toggle::after { transform: translateX(16px); background: #fff; }.team-privacy input:focus-visible + .team-toggle { outline: 2px solid #7dd3fc; outline-offset: 3px; }.team-privacy strong { display: block; color: #e5f8ff; font-size: .75rem; }.team-privacy small { display: block; margin-top: .12rem; color: #7898b1; font-size: .62rem; line-height: 1.25; }
.team-formulier button { width: 100%; min-height: 48px; margin: .1rem 0 0; }
@media (min-width: 600px) { .team-velden { grid-template-columns: 1fr 1fr; } .team-formulier button { width: auto; min-width: 180px; } }

/* --- Strava-merkregels ------------------------------------------------------
   De "Connect with Strava"-knop en de "Powered by Strava"-vermelding zijn
   voorgeschreven door Strava. Kleur #FC4C02 is hun oranje; niet aanpassen. */
.strava-connect {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}
.strava-connect img {
    display: block;
    height: 48px;
    width: auto;
}
.strava-connect-submit {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-appearance: none;
    appearance: none;
}
.strava-connect-submit img { pointer-events: none; }
.strava-connect.is-uitgeschakeld {
    opacity: 0.48;
    filter: grayscale(0.35);
    cursor: not-allowed;
}
.strava-toestemming-acties {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 1rem;
}
.strava-view-link {
    color: #FC5200;
    font-weight: 700;
}
/* Terugval zolang het officiële beeldmerk nog niet op de server staat */
.strava-connect-terugval {
    background: #FC4C02;
    color: #fff;
    font-weight: 600;
    padding: 0.7rem 1.1rem;
    border-radius: 6px;
    font-size: 0.95rem;
}
.strava-connect-terugval .strava-connect-merk {
    font-weight: 800;
    letter-spacing: 0.06em;
}

/* Erelijst-knop: bewust los van .knop-secundair, die is elders expres heel
   subtiel (glassy) en verzandt hier tussen een <h1> en tabbladen in iets dat
   meer op een titel lijkt dan op een knop. Compacte pil, duidelijk goud
   accent (past bij het trofee-emoji), niet de volle breedte. */
.knop-erelijst {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: auto;
    background: rgba(251, 191, 36, 0.16);
    border: 1px solid rgba(251, 191, 36, 0.5);
    color: #fde68a;
    box-shadow: 0 6px 18px rgba(251, 191, 36, 0.14);
}
.knop-erelijst:active { background: rgba(251, 191, 36, 0.28); }


/* ============================================================
   Golden Hexes — popup en dashboardblok (de kaartlaag zelf staat
   in assets/kaart.css, want die pagina laadt een eigen stylesheet)
   ============================================================ */
.golden-popup {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    text-align: center;
    padding: 1.1rem 1rem 1rem;
    margin-bottom: 1rem;
    border-radius: 16px;
    border: 1px solid rgba(251, 191, 36, 0.55);
    background: linear-gradient(160deg, rgba(251, 191, 36, 0.20), rgba(251, 191, 36, 0.06));
    box-shadow: 0 10px 30px rgba(251, 191, 36, 0.18);
    animation: golden-binnenkomst 0.5s ease-out;
}
@keyframes golden-binnenkomst {
    from { opacity: 0; transform: translateY(-8px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .golden-popup { animation: none; }
}
.golden-popup-icoon { font-size: 1.8rem; line-height: 1; }
.golden-popup-titel { font-size: 1.05rem; color: #FDE68A; }
.golden-popup-punten { font-size: 1.5rem; font-weight: 800; color: #FFE300; }
.golden-popup-datum { font-size: 0.75rem; color: var(--tekst-zwak); }
.golden-popup-sluiten {
    position: absolute;
    top: 0.35rem;
    right: 0.5rem;
    width: auto;
    padding: 0.2rem 0.5rem;
    background: none;
    border: none;
    color: var(--tekst-zwak);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}
.dashboard-golden .dashboard-mini strong { color: #FFE300; }

/* ---------- Import en uitnodigingen ---------- */

/* Voortgangsbalk van een lopende bulk-import. */
.voortgangsbalk {
    height: 10px;
    margin: .6rem 0;
    border-radius: 999px;
    background: var(--paneel-rand);
    overflow: hidden;
}
.voortgangsbalk span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #2D8CFF, #34D399);
    transition: width .4s ease;
}

/* Het veld met de uitnodigingslink: breed, leesbaar en in één tik te selecteren. */
.kopieerveld {
    width: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .82rem;
}

/* Statuslabel van een importbatch waarvan de bestanden al bekend waren. */
.status-dubbel { background: rgba(255, 255, 255, 0.08); color: var(--tekst-zwak); }

/* Opvallend uitlegblok op de registratiepagina: wie zich aanmeldt moet vóór
   het invullen weten dat hij zijn activiteiten zelf gaat uploaden. */
.waarschuwing-blok {
    margin: 1rem 0;
    padding: .9rem 1rem;
    border: 1px solid rgba(45, 140, 255, .35);
    border-radius: 16px;
    background: rgba(45, 140, 255, .1);
}
.waarschuwing-blok h2 { margin: 0 0 .5rem; font-size: .95rem; }
.waarschuwing-blok p { margin: 0 0 .5rem; font-size: .88rem; line-height: 1.5; }
.waarschuwing-blok p:last-child { margin-bottom: 0; }

/* ---------- Eenduidige scoreopbouw en scoregrafieken ---------- */
.dashboard-stat-link { display:block; color:inherit; text-decoration:none; transition:transform .16s ease,border-color .16s ease; }
.dashboard-stat-link:active { transform:scale(.985); }
.dashboard-stat-link:focus-visible { outline:2px solid #7dd3fc; outline-offset:2px; }
.score-link { min-width:3rem; padding:.45rem .2rem; border-radius:10px; text-align:right; text-decoration:underline; text-decoration-color:rgba(125,211,252,.35); text-underline-offset:.2rem; }
.score-link:focus-visible { outline:2px solid #7dd3fc; outline-offset:2px; }
.score-terug { color:#9bdcff; text-decoration:none; font-size:.82rem; }
.score-kop { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin:.5rem 0 1rem; }
.score-kop h1 { margin:.12rem 0; }
.score-kop p { margin:0; color:var(--tekst-zwak); }
.score-hoofdtotaal { color:#7dd3fc; font-size:clamp(2rem,12vw,3.5rem); line-height:1; letter-spacing:-.055em; font-variant-numeric:tabular-nums; }
.score-hoofdtotaal.negatief,.score-formule-totaal .negatief,.score-delta.negatief { color:#f87171; }
.score-samenvatting h2,.score-verloop h2 { margin-bottom:.2rem; }
.score-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; margin-top:.9rem; }
.score-grid article { min-width:0; min-height:92px; padding:.78rem; border:1px solid rgba(148,207,255,.14); border-radius:15px; background:rgba(3,17,31,.38); }
.score-grid span,.score-grid small { display:block; color:#91acc1; font-size:.7rem; line-height:1.3; }
.score-grid strong { display:block; margin:.34rem 0 .15rem; color:#dff7ff; font-size:1.18rem; font-variant-numeric:tabular-nums; }
.score-grid .score-eerste-hex { border-color:rgba(56,189,248,.38); background:rgba(14,116,144,.13); }
.score-grid .score-eerste-hex strong { color:#7dd3fc; }
.score-grid .score-golden { border-color:rgba(250,204,21,.30); background:rgba(202,138,4,.09); }
.score-grid .score-golden strong { color:#fde047; }
.score-grid .score-verlies strong { color:#fca5a5; }
.score-formule-totaal { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:.7rem; padding:.75rem .2rem 0; border-top:1px solid rgba(148,207,255,.14); }
.score-formule-totaal span { color:#91acc1; font-size:.78rem; }
.score-formule-totaal strong { color:#7dd3fc; font-size:1.35rem; font-variant-numeric:tabular-nums; }
.score-grafiek-kaart { overflow:hidden; }
.score-grafiek-kop { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.score-grafiek-kop h2 { margin:0 0 .2rem; }
.score-grafiek-kop p { margin:0; }
.score-grafiek-eindstand { flex:0 0 auto; color:#7dd3fc; font-size:1.35rem; font-weight:800; font-variant-numeric:tabular-nums; }
.score-grafiek-eindstand.negatief { color:#f87171; }
.score-grafiek-tabs { display:flex; gap:.42rem; margin:.95rem -.15rem .65rem; padding:.15rem .15rem .35rem; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.score-grafiek-tabs::-webkit-scrollbar { display:none; }
.score-grafiek-tabs a { flex:0 0 auto; min-height:38px; display:inline-flex; align-items:center; justify-content:center; padding:.5rem .75rem; border:1px solid rgba(125,211,252,.22); border-radius:999px; color:#a9c0d2; font-size:.78rem; font-weight:650; line-height:1; text-decoration:none; }
.score-grafiek-tabs a.actief { border-color:transparent; background:linear-gradient(135deg,#38bdf8,#2563eb); color:#fff; box-shadow:0 7px 20px rgba(37,99,235,.28); }
.score-grafiek-tabs a:focus-visible { outline:2px solid #7dd3fc; outline-offset:2px; }
.score-grafiek-uitleg { margin:.25rem 0 .3rem; color:#91acc1; font-size:.78rem; line-height:1.45; }
.score-grafiek-canvas { position:relative; margin:.15rem -.35rem 0; }
.score-grafiek-canvas svg { display:block; width:100%; height:auto; overflow:visible; cursor:crosshair; touch-action:manipulation; }
.score-grafiek-raster { stroke:rgba(148,207,255,.12); stroke-width:1; vector-effect:non-scaling-stroke; }
.score-grafiek-gebied { pointer-events:none; }
.score-grafiek-lijn { fill:none; stroke:#38bdf8; stroke-width:3; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; pointer-events:none; }
.score-grafiek-punt { fill:#08233b; stroke:#7dd3fc; stroke-width:3; vector-effect:non-scaling-stroke; cursor:pointer; transition:fill .14s ease; }
.score-grafiek-punt:hover,.score-grafiek-punt:focus,.score-grafiek-punt.actief { fill:#e0f2fe; stroke:#38bdf8; outline:none; }
.score-grafiek-x,.score-grafiek-y { fill:#7898b1; font-size:12px; font-family:inherit; }
.score-grafiek-selectie { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:44px; margin:-.2rem .35rem 0; padding:.55rem .7rem; border:1px solid rgba(125,211,252,.14); border-radius:12px; background:rgba(3,17,31,.42); }
.score-grafiek-selectie span { color:#91acc1; font-size:.78rem; }
.score-grafiek-selectie strong { color:#dff7ff; font-size:.88rem; font-variant-numeric:tabular-nums; }
.dashboard-score-grafiek .dashboard-blok-kop { align-items:flex-start; }
.dashboard-score-grafiek .dashboard-blok-kop p { margin:.2rem 0 0; }
.dashboard-score-grafiek .dashboard-blok-kop>a { flex:0 0 auto; color:#8ddcff; font-size:.74rem; text-decoration:none; }
.dashboard-score-grafiek .score-grafiek-canvas { margin-top:.35rem; }
.dashboard-score-grafiek .score-grafiek-selectie { margin-top:-.55rem; }
.score-activiteiten { list-style:none; padding:0; margin:.8rem 0 0; }
.score-activiteit { padding:.85rem 0; border-bottom:1px solid rgba(148,207,255,.13); }
.score-activiteit:last-child { border-bottom:0; }
.score-activiteit-kop { display:flex; align-items:flex-start; justify-content:space-between; gap:.8rem; }
.score-activiteit-kop>div { min-width:0; }
.score-activiteit-kop a,.score-activiteit-kop strong { display:block; overflow:hidden; color:#edfaff; font-size:.88rem; font-weight:700; text-decoration:none; text-overflow:ellipsis; white-space:nowrap; }
.score-activiteit-kop small { display:block; margin-top:.18rem; color:#7898b1; font-size:.68rem; }
.score-delta { flex:0 0 auto; color:#6ee7b7; font-size:1rem; font-weight:800; font-variant-numeric:tabular-nums; }
.score-activiteit>p { margin:.55rem 0 .35rem; color:#a8bfd0; font-size:.72rem; line-height:1.45; }
.score-stand { display:flex; align-items:center; justify-content:flex-end; gap:.4rem; color:#7898b1; font-size:.68rem; }
.score-stand strong { color:#c8e9f7; font-variant-numeric:tabular-nums; }
@media (max-width:480px) {
    .score-kop { align-items:flex-start; }
    .score-hoofdtotaal { font-size:2.25rem; }
    .score-grid article { min-height:84px; padding:.68rem; }
    .score-grafiek-kop { align-items:center; }
    .score-grafiek-eindstand { font-size:1.15rem; }
    .score-grafiek-tabs a { min-height:36px; padding:.48rem .68rem; font-size:.74rem; }
    .score-grafiek-y { font-size:11px; }
}
@media (prefers-reduced-motion:reduce) { .score-grafiek-punt { transition:none; } }
.app-view-intro {
    position: relative;
    overflow: hidden;
    margin: .25rem 0 1rem;
    padding: 1.15rem 1.25rem;
    border: 1px solid rgba(133, 208, 255, .27);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(35, 91, 132, .42), rgba(12, 29, 48, .6) 58%, rgba(19, 44, 75, .5));
    box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 12px 30px rgba(0, 0, 0, .12);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
}
.app-view-intro::after {
    content: '';
    position: absolute;
    right: -1.7rem;
    top: -2.4rem;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(57, 191, 255, .24), transparent 70%);
    pointer-events: none;
}
.app-view-intro h1 { position: relative; margin: .25rem 0 0; font-size: clamp(1.3rem, 6vw, 1.85rem); }
.app-view-eyebrow { color: #92dafa; font-size: .68rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }

/* Deelkaart: houd delen en afbeelding bewaren bij elkaar op kleine schermen. */
.activiteit-oogst-voet .deelkaart-acties,
.oogst-popup-acties .deelkaart-acties { width: 100%; min-width: 0; }
.activiteit-oogst-voet .deelkaart-acties .deelknop,
.oogst-popup-acties .deelkaart-acties .deelknop { flex: 1 1 auto; width: auto; min-width: 0; }
.deelkaart-acties .deelkaart-opslaan { max-width: 55%; }
.erelijst-periode-kop { flex-wrap: wrap; }