/*
 * Poolbaas Visual Foundation V1
 * ------------------------------------------
 * Eén doorlopende sportomgeving.
 *
 * Doelen:
 * - minder losse kaarten;
 * - minder kaarten binnen kaarten;
 * - hiërarchie via ruimte, typografie en lijnen;
 * - consistente oppervlakken en interacties;
 * - mobiele leesbaarheid behouden.
 */


/* ========================================================
   1. DESIGNTOKENS
   ======================================================== */

:root {
    --pbv1-canvas: #f5f3f7;
    --pbv1-canvas-deep: #efecf3;

    --pbv1-surface: #ffffff;
    --pbv1-surface-soft: rgba(255, 255, 255, 0.58);
    --pbv1-surface-muted: rgba(51, 32, 83, 0.045);

    --pbv1-text: #2f2148;
    --pbv1-text-strong: #26183f;
    --pbv1-text-muted: rgba(47, 33, 72, 0.62);
    --pbv1-text-faint: rgba(47, 33, 72, 0.44);

    --pbv1-brand: #553281;
    --pbv1-brand-strong: #3d205f;
    --pbv1-brand-soft: rgba(85, 50, 129, 0.09);

    --pbv1-positive: #14724a;
    --pbv1-warning: #a56613;
    --pbv1-danger: #a13c47;

    --pbv1-line: rgba(49, 31, 79, 0.12);
    --pbv1-line-soft: rgba(49, 31, 79, 0.075);
    --pbv1-line-strong: rgba(49, 31, 79, 0.2);

    --pbv1-radius-xs: 6px;
    --pbv1-radius-sm: 9px;
    --pbv1-radius-md: 13px;
    --pbv1-radius-lg: 18px;

    --pbv1-shadow-focus:
        0 0 0 3px rgba(85, 50, 129, 0.13);

    --pbv1-shadow-raised:
        0 10px 30px rgba(34, 21, 54, 0.07);

    --pbv1-content:
        min(100% - 32px, 1180px);

    --pbv1-reading:
        min(100%, 780px);

    --pbv1-section-gap:
        clamp(30px, 5vw, 58px);

    --pbv1-row-gap:
        clamp(14px, 2vw, 22px);

    --pbv1-fast: 140ms;
    --pbv1-normal: 220ms;
    --pbv1-slow: 360ms;

    --pbv1-ease:
        cubic-bezier(0.2, 0.72, 0.2, 1);
}


/* ========================================================
   2. DOORLOPEND CANVAS
   ======================================================== */

html {
    background: var(--pbv1-canvas);
}

body {
    background:
        radial-gradient(
            circle at 15% -10%,
            rgba(104, 67, 153, 0.08),
            transparent 32rem
        ),
        linear-gradient(
            180deg,
            var(--pbv1-canvas) 0%,
            #f8f7f9 55%,
            var(--pbv1-canvas) 100%
        );
    color: var(--pbv1-text);
    font-family:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

.main-content,
.shell.main-content {
    width: var(--pbv1-content);
    max-width: 1180px;
}

body :where(
    .pk4-page,
    .pah-page,
    .pbf5-page,
    .psf5-page,
    .ppc3-page,
    .pmv3-page,
    .pbn-page,
    .pav2-page
) {
    color: var(--pbv1-text);
}

body :where(
    .pk4-page,
    .pah-page,
    .pbf5-page,
    .psf5-page,
    .ppc3-page,
    .pmv3-page,
    .pbn-page,
    .pav2-page
) :where(
    h1,
    h2,
    h3,
    h4
) {
    color: var(--pbv1-text-strong);
    text-wrap: balance;
}

body :where(
    .pk4-page,
    .pah-page,
    .pbf5-page,
    .psf5-page,
    .ppc3-page,
    .pmv3-page,
    .pbn-page,
    .pav2-page
) h1 {
    letter-spacing: -0.045em;
}

body :where(
    .pk4-page,
    .pah-page,
    .pbf5-page,
    .psf5-page,
    .ppc3-page,
    .pmv3-page,
    .pbn-page,
    .pav2-page
) h2 {
    letter-spacing: -0.025em;
}


/* ========================================================
   3. UNIFORME INTERACTIES
   ======================================================== */

body :where(
    .pk4-page,
    .pah-page,
    .pbf5-page,
    .psf5-page,
    .ppc3-page,
    .pmv3-page,
    .pbn-page,
    .pav2-page
) :where(
    a,
    button,
    input,
    select,
    textarea,
    summary
) {
    transition:
        color var(--pbv1-fast) var(--pbv1-ease),
        background-color var(--pbv1-fast) var(--pbv1-ease),
        border-color var(--pbv1-fast) var(--pbv1-ease),
        opacity var(--pbv1-fast) var(--pbv1-ease),
        transform var(--pbv1-fast) var(--pbv1-ease),
        box-shadow var(--pbv1-fast) var(--pbv1-ease);
}

body :where(
    .pk4-page,
    .pah-page,
    .pbf5-page,
    .psf5-page,
    .ppc3-page,
    .pmv3-page,
    .pbn-page,
    .pav2-page
) :where(
    a,
    button,
    input,
    select,
    textarea,
    summary
):focus-visible {
    outline: none;
    box-shadow: var(--pbv1-shadow-focus);
}

body :where(
    .pk4-page,
    .pah-page,
    .pbf5-page,
    .psf5-page,
    .ppc3-page,
    .pmv3-page,
    .pbn-page,
    .pav2-page
) :where(
    button,
    [class*="button"],
    [class*="action"]
) {
    border-radius: var(--pbv1-radius-sm);
}


/* ========================================================
   4. HERO'S WORDEN PAGINAKOPPEN
   ======================================================== */

body :where(
    .pk4-hero,
    .pah-hero,
    .pbf5-header,
    .psf5-header,
    .ppc3-hero,
    .pmv3-hero,
    .pbn-hero
) {
    position: relative;
    overflow: visible;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body :where(
    .pah-hero,
    .pbf5-header,
    .psf5-header,
    .ppc3-hero,
    .pmv3-hero,
    .pbn-hero
) {
    padding-right: 0;
    padding-left: 0;
    background: transparent !important;
}

body :where(
    .pah-hero,
    .pbf5-header,
    .psf5-header,
    .ppc3-hero,
    .pmv3-hero,
    .pbn-hero
)::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: var(--pbv1-line);
}

body .pk4-hero {
    box-shadow: none !important;
}


/* ========================================================
   5. GENERIEKE SECTIEHIËRARCHIE
   ======================================================== */

body :where(
    .pk4-panel,
    .pah-section,
    .ppc3-panel,
    .pmv3-section,
    .pbn-inbox
) {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

body :where(
    .pk4-panel,
    .ppc3-panel,
    .pmv3-section
) {
    padding-right: 0;
    padding-left: 0;
}

body :where(
    .pk4-panel,
    .ppc3-panel,
    .pmv3-section
)
+ :where(
    .pk4-panel,
    .ppc3-panel,
    .pmv3-section
) {
    margin-top: var(--pbv1-section-gap);
    padding-top: var(--pbv1-section-gap);
    border-top: 1px solid var(--pbv1-line) !important;
}


/* ========================================================
   6. KANTOOR — GEEN KAARTENBINNENKAARTEN
   ======================================================== */

body .pk4-page {
    display: grid;
    gap: var(--pbv1-section-gap);
}

body .pk4-page :where(
    .pk4-hero__content,
    .pk4-hero__details,
    .pk4-hero__watermark,
    .pk4-live-card__header,
    .pk4-live-card__fixture,
    .pk4-live-card__impact,
    .pk4-live-card__footer
) {
    box-shadow: none !important;
}

body .pk4-rank-card {
    border: 1px solid rgba(255, 255, 255, 0.17) !important;
    border-radius: var(--pbv1-radius-md) !important;
    box-shadow: none !important;
    background: rgba(255, 255, 255, 0.095) !important;
}

body .pk9-stand-card {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

body :where(
    .pk4-upcoming-v3__card,
    .pk4-result-card
) {
    display: grid;
    border: 0 !important;
    border-bottom:
        1px solid var(--pbv1-line-soft) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

body :where(
    .pk4-upcoming-v3__card,
    .pk4-result-card
):last-child {
    border-bottom: 0 !important;
}

body :where(
    .pk4-upcoming-v3__card,
    .pk4-result-card
):hover {
    background:
        var(--pbv1-surface-muted) !important;
    transform: none !important;
}

body :where(
    .pk4-result-card__date,
    .pk4-result-card__footer
) {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}


/* ========================================================
   7. MIJN SPEL
   ======================================================== */

body .pah-page {
    display: grid;
    gap: var(--pbv1-section-gap);
}

body :where(
    .pah-hero__copy,
    .pah-hero__week,
    .pah-summary
) {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body .pah-hero__week {
    border-left:
        1px solid rgba(255, 255, 255, 0.2) !important;
}

body .pah-summary {
    padding:
        0 0 var(--pbv1-row-gap) !important;
    background: transparent !important;
    border-bottom:
        1px solid var(--pbv1-line) !important;
}


/* ========================================================
   8. VOORSPELLEN — WEDSTRIJDEN ALS RIJEN
   ======================================================== */

body .pbf5-page {
    display: grid;
    gap: var(--pbv1-section-gap);
}

body .pbf5-page :where(
    .pbf5-open,
    .pbf5-closed
) {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

body .pbf5-page :where(
    .pbf5-match,
    .pbf5-closed-card
) {
    border: 0 !important;
    border-bottom:
        1px solid var(--pbv1-line-soft) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

body .pbf5-page :where(
    .pbf5-match,
    .pbf5-closed-card
):last-child {
    border-bottom: 0 !important;
}

body .pbf5-page :where(
    .pbf5-closed-card__meta,
    .pbf5-closed-card__fixture,
    .pbf5-closed-card__score
) {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

body .pbf5-card-error {
    border-radius: var(--pbv1-radius-xs) !important;
    box-shadow: none !important;
}

body .pbf5-savebar {
    border:
        1px solid var(--pbv1-line) !important;
    border-radius: var(--pbv1-radius-md) !important;
    box-shadow: var(--pbv1-shadow-raised) !important;
}


/* ========================================================
   9. KLASSEMENT — STATISTIEKEN ALS STRIP
   ======================================================== */

body .psf5-page {
    display: grid;
    gap: var(--pbv1-section-gap);
}

body .psf5-page :where(
    .psf5-winner-card,
    .psf5-personal-card
) {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

body .psf5-personal-card {
    padding:
        var(--pbv1-row-gap) 0 !important;
    border-top:
        1px solid var(--pbv1-line) !important;
    border-bottom:
        1px solid var(--pbv1-line) !important;
}

body .psf5-page :where(
    .psf5-personal-card__points,
    .psf5-personal-card__gap
) {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

body .psf5-stat {
    position: relative;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

body .psf5-stat:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 16%;
    right: 0;
    bottom: 16%;
    width: 1px;
    background: var(--pbv1-line-soft);
}

body .psf5-page :where(
    ol,
    .psf5-ranking,
    .psf5-table
) {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}


/* ========================================================
   10. PROFIEL — DOORLOPEND DOSSIER
   ======================================================== */

body .ppc3-page {
    display: grid;
    gap: 0;
}

body .ppc3-panel {
    padding:
        var(--pbv1-section-gap) 0 !important;
    border-top:
        1px solid var(--pbv1-line) !important;
}

body .ppc3-panel:first-of-type {
    border-top: 0 !important;
}

body .ppc3-page :where(
    article,
    [class*="stat"],
    [class*="metric"]
) {
    box-shadow: none !important;
}

body .ppc3-page details.ppc3-panel {
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
}


/* ========================================================
   11. WEDSTRIJD — DATA ALS DOORLOPEND VERHAAL
   ======================================================== */

body .pmv3-page {
    display: grid;
    gap: var(--pbv1-section-gap);
}

body .pmv3-viewer-card {
    border: 0 !important;
    border-top:
        1px solid var(--pbv1-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

body .pmv3-viewer-card:first-child {
    border-top: 0 !important;
}

body .pmv3-page :where(
    article,
    [class*="statistics"],
    [class*="summary"]
) {
    box-shadow: none !important;
}


/* ========================================================
   12. MELDINGEN — INBOX IN PLAATS VAN KAARTEN
   ======================================================== */

body .pbn-page {
    display: grid;
    gap: var(--pbv1-section-gap);
}

body .pbn-inbox {
    overflow: hidden;
}

body .pbn-inbox article {
    border: 0 !important;
    border-bottom:
        1px solid var(--pbv1-line-soft) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

body .pbn-inbox article:last-child {
    border-bottom: 0 !important;
}

body .pbn-inbox article:hover {
    background:
        var(--pbv1-surface-muted) !important;
}


/* ========================================================
   13. AUTH — ÉÉN FORMULIER, GEEN KAARTKOP
   ======================================================== */

body.pb-auth-v2-body .pav2-page {
    border-radius: var(--pbv1-radius-lg);
    box-shadow: var(--pbv1-shadow-raised);
    background: var(--pbv1-surface);
}

body.pb-auth-v2-body .pav2-card {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.pb-auth-v2-body .pav2-card-head {
    padding-bottom: var(--pbv1-row-gap);
    border-bottom:
        1px solid var(--pbv1-line-soft);
}

body.pb-auth-v2-body .pav2-card-head > span {
    border-radius: var(--pbv1-radius-sm);
    box-shadow: none;
}


/* ========================================================
   14. STATUSSEN EN BADGES
   ======================================================== */

body :where(
    .pk4-page,
    .pah-page,
    .pbf5-page,
    .psf5-page,
    .ppc3-page,
    .pmv3-page,
    .pbn-page
) :where(
    [class*="status"],
    [class*="badge"],
    [class*="pill"]
) {
    box-shadow: none !important;
}


/* ========================================================
   15. MOBIEL
   ======================================================== */

@media (max-width: 720px) {
    :root {
        --pbv1-content:
            min(100% - 18px, 1180px);

        --pbv1-section-gap:
            32px;

        --pbv1-row-gap:
            16px;
    }

    body {
        font-size: 15px;
    }

    body :where(
        .pah-hero,
        .pbf5-header,
        .psf5-header,
        .ppc3-hero,
        .pmv3-hero,
        .pbn-hero
    ) {
        padding-top: 10px;
        padding-bottom: 24px;
    }

    body .pah-hero__week {
        border-left: 0 !important;
        border-top:
            1px solid rgba(255, 255, 255, 0.18) !important;
    }

    body .psf5-stat:not(:last-child)::after {
        top: auto;
        right: 10%;
        bottom: 0;
        left: 10%;
        width: auto;
        height: 1px;
    }

    body.pb-auth-v2-body .pav2-page {
        overflow: hidden;
        border-radius: var(--pbv1-radius-md);
    }
}


/* ========================================================
   16. REDUCED MOTION
   ======================================================== */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    body :where(
        .pk4-page,
        .pah-page,
        .pbf5-page,
        .psf5-page,
        .ppc3-page,
        .pmv3-page,
        .pbn-page,
        .pav2-page
    ) *,
    body :where(
        .pk4-page,
        .pah-page,
        .pbf5-page,
        .psf5-page,
        .ppc3-page,
        .pmv3-page,
        .pbn-page,
        .pav2-page
    ) *::before,
    body :where(
        .pk4-page,
        .pah-page,
        .pbf5-page,
        .psf5-page,
        .ppc3-page,
        .pmv3-page,
        .pbn-page,
        .pav2-page
    ) *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}