/*
 * Poolbaas Visual Correction V2
 * Mobiele structurele reparaties voor Kantoor en Stand.
 */


/* ========================================================
   GLOBALE OVERFLOW EN DOCKRUIMTE
   ======================================================== */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    padding-bottom:
        calc(118px + env(safe-area-inset-bottom)) !important;
}

.main-content,
.shell.main-content {
    overflow: visible;
}


/* ========================================================
   KANTOOR — HERO BINNEN VIEWPORT
   ======================================================== */

body .pk4-page {
    width: 100%;
    max-width: 100%;
}

body .pk4-hero {
    width: 100% !important;
    max-width: 100% !important;

    min-height: 0 !important;
    height: auto !important;

    margin-right: 0 !important;
    margin-left: 0 !important;

    padding:
        clamp(26px, 6vw, 42px)
        clamp(20px, 5vw, 42px)
        clamp(24px, 5vw, 38px) !important;

    box-sizing: border-box !important;
}

body .pk4-hero__content {
    width: 100%;
    max-width: 100%;
}

body .pk4-hero h1 {
    max-width: 100%;
    font-size:
        clamp(2.4rem, 10vw, 4.5rem) !important;
    line-height: 0.96 !important;
}

body .pk4-hero__details {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
}

body .pk4-hero__action {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;
    box-sizing: border-box !important;

    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 20px !important;
    padding-left: 20px !important;
}


/* ========================================================
   KANTOOR — COMPACTERE SECTIES
   ======================================================== */

body .pk4-page {
    gap: 22px !important;
}

body .pk4-page > section,
body .pk4-page > article,
body .pk4-page > header {
    min-height: 0 !important;
}

body .pk4-page :where(
    .pk4-panel,
    .pk4-results,
    .pk4-activity,
    .pk4-stand,
    .pk9-stand
) {
    min-height: 0 !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

body .pk4-page :where(
    .pk4-panel,
    .pk4-results,
    .pk4-activity
)
+ :where(
    .pk4-panel,
    .pk4-results,
    .pk4-activity
) {
    margin-top: 0 !important;
}


/* ========================================================
   KANTOOR — KOMENDE WEDSTRIJDEN
   ======================================================== */

body .pk4-page :has(
    > .pk4-upcoming-v3__card
) {
    width: 100% !important;
    max-width: 100% !important;

    margin-right: 0 !important;
    margin-left: 0 !important;
    padding: 0 !important;

    scroll-padding-inline: 0;
}

body .pk4-upcoming-v3__card {
    flex:
        0 0 min(82vw, 330px) !important;

    width:
        min(82vw, 330px) !important;

    min-width:
        min(82vw, 330px) !important;

    max-width:
        min(82vw, 330px) !important;

    box-sizing: border-box !important;

    padding:
        16px 14px !important;
}

body .pk4-upcoming-v3__card :where(
    [class*="fixture"],
    [class*="teams"],
    [class*="main"]
) {
    min-width: 0 !important;
}

body .pk4-upcoming-v3__card :where(
    [class*="team"],
    [class*="club"]
) {
    min-width: 0 !important;
    max-width: 44% !important;
}

body .pk4-upcoming-v3__card :where(
    [class*="name"],
    h3,
    strong
) {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


/* ========================================================
   KANTOOR — STAND EN RESULTATEN
   ======================================================== */

body .pk9-stand-card {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

body .pk4-results {
    overflow: visible !important;
}

body .pk4-results :where(
    [class*="grid"],
    [class*="list"],
    [class*="track"]
) {
    display: grid !important;
    grid-template-columns: 1fr !important;

    width: 100% !important;
    max-width: 100% !important;

    overflow: visible !important;
    gap: 0 !important;

    transform: none !important;
}

body .pk4-result-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    padding:
        18px 0 !important;

    transform: none !important;
}

body .pk4-result-card :where(
    [class*="fixture"],
    [class*="teams"],
    [class*="main"]
) {
    width: 100% !important;
    max-width: 100% !important;
}


/* ========================================================
   STAND — BOVENKANT COMPACTER
   ======================================================== */

body .psf5-page {
    gap: 20px !important;
}

body .psf5-header {
    padding-bottom: 16px !important;
}

body .psf5-header__status {
    margin-top: 18px !important;
    padding-top: 18px !important;
    padding-bottom: 0 !important;
}

body .psf5-page :where(
    .psf5-tabs,
    [role="tablist"],
    nav[class*="tab"]
) {
    display: grid !important;
    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    width: 100% !important;

    padding: 0 !important;
    gap: 0 !important;

    border: 0 !important;
    border-bottom:
        1px solid var(--pbv1-line) !important;

    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

body .psf5-page :where(
    [role="tab"],
    .psf5-tab,
    button[class*="tab"]
) {
    min-height: 64px !important;

    padding:
        12px 8px !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

body .psf5-page :where(
    [role="tab"][aria-selected="true"],
    .psf5-tab.is-active,
    button[class*="tab"].is-active
) {
    border-bottom:
        3px solid var(--pbv1-brand) !important;
}


/* ========================================================
   STAND — VOORTGANG
   ======================================================== */

body .psf5-page :where(
    .psf5-progress,
    .psf5-progress-card,
    .psf5-progress-panel,
    [class*="progress"]
) {
    min-height: 0 !important;

    margin: 0 !important;
    padding:
        18px 0 !important;

    border: 0 !important;
    border-bottom:
        1px solid var(--pbv1-line) !important;

    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}


/* ========================================================
   STAND — RANGLIJST ALS TABELRIJEN
   ======================================================== */

body .psf5-page :where(
    .psf5-ranking,
    .psf5-ranking-list,
    .psf5-standings,
    ol[class*="ranking"],
    ol[class*="standing"]
) {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

body .psf5-page :where(
    .psf5-ranking-row,
    .psf5-standing-row,
    .psf5-player-row,
    li[class*="psf5-"],
    article[class*="psf5-"][class*="row"]
) {
    position: relative;

    display: grid !important;
    grid-template-columns:
        52px minmax(0, 1fr) 64px !important;

    align-items: center !important;
    gap: 12px !important;

    width: 100% !important;
    min-height: 86px !important;

    margin: 0 !important;
    padding:
        14px 0 !important;

    border: 0 !important;
    border-bottom:
        1px solid var(--pbv1-line-soft) !important;

    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

body .psf5-page :where(
    .psf5-ranking-row,
    .psf5-standing-row,
    .psf5-player-row,
    li[class*="psf5-"],
    article[class*="psf5-"][class*="row"]
).is-me {
    background:
        linear-gradient(
            90deg,
            var(--pbv1-brand-soft),
            transparent 70%
        ) !important;

    box-shadow:
        inset 4px 0 0 var(--pbv1-brand) !important;
}

body .psf5-page :where(
    .psf5-ranking-row,
    .psf5-standing-row,
    .psf5-player-row,
    li[class*="psf5-"],
    article[class*="psf5-"][class*="row"]
) :where(
    [class*="avatar"],
    [class*="points"],
    [class*="score"],
    [class*="rank"]
) {
    border-radius:
        var(--pbv1-radius-sm) !important;
    box-shadow: none !important;
}

body .psf5-page :where(
    .psf5-stat,
    [class*="psf5-stat"]
) {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}


/* ========================================================
   MOBIEL
   ======================================================== */

@media (max-width: 720px) {
    body {
        padding-bottom:
            calc(
                126px
                + env(safe-area-inset-bottom)
            ) !important;
    }

    body .pk4-hero {
        margin-inline: 0 !important;

        padding:
            28px 20px
            24px !important;
    }

    body .pk4-hero h1 {
        font-size:
            clamp(2.5rem, 11vw, 3.65rem) !important;
    }

    body .pk4-hero__action {
        min-height: 54px !important;
        font-size: 1rem !important;
    }

    body .pk4-page :has(
        > .pk4-upcoming-v3__card
    ) {
        margin-inline: 0 !important;
    }

    body .pk4-result-card {
        padding:
            16px 0 !important;
    }

    body .psf5-page :where(
        .psf5-ranking-row,
        .psf5-standing-row,
        .psf5-player-row,
        li[class*="psf5-"],
        article[class*="psf5-"][class*="row"]
    ) {
        grid-template-columns:
            46px minmax(0, 1fr) 58px !important;

        gap: 10px !important;
        min-height: 80px !important;
    }
}


/* ========================================================
   REDUCED MOTION
   ======================================================== */

@media (prefers-reduced-motion: reduce) {
    body .pk4-page :has(
        > .pk4-upcoming-v3__card
    ) {
        scroll-snap-type: none !important;
    }
}


/* === POOLBAAS VISUAL REPAIR V3 START === */

/*
 * Gerichte reparatie:
 * - Laatste uitslagen opnieuw als compacte wedstrijdrijen.
 * - Ranglijst zonder grote buitenkaart.
 * - Week/algemeen-navigatie echt vlak.
 */


/* ========================================================
   KANTOOR — LAATSTE UITSLAGEN HERSTELLEN
   ======================================================== */

body .pk4-results {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
}

body .pk4-results-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    align-items: stretch !important;

    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;

    gap: 0 !important;

    overflow: visible !important;
    transform: none !important;
}

body .pk4-result-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows:
        auto auto auto auto !important;

    align-content: start !important;
    align-items: stretch !important;
    gap: 10px !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: auto !important;

    margin: 0 !important;
    padding:
        18px 0 !important;

    overflow: visible !important;

    border: 0 !important;
    border-bottom:
        1px solid var(
            --pbv1-line-soft,
            rgba(49, 31, 79, 0.075)
        ) !important;

    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;

    transform: none !important;
}

body .pk4-result-card:last-child {
    border-bottom: 0 !important;
}

body .pk4-result-card__date {
    display: block !important;

    min-height: 0 !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;

    color:
        var(--pbv1-text-muted, rgba(47, 33, 72, 0.62)) !important;

    font-size: 0.75rem !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    text-align: left !important;
}

body .pk4-result-fixture {
    display: grid !important;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr) !important;

    grid-template-rows: auto !important;

    align-items: center !important;
    gap: 12px !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
}

body .pk4-result-team {
    display: grid !important;
    grid-template-columns:
        42px minmax(0, 1fr) !important;

    align-items: center !important;
    justify-items: start !important;
    gap: 10px !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    min-height: 0 !important;
    height: auto !important;
}

body .pk4-result-team:last-child {
    grid-template-columns:
        minmax(0, 1fr) 42px !important;
    text-align: right !important;
}

body .pk4-result-team:last-child
.pk4-result-logo {
    grid-column: 2;
    grid-row: 1;
}

body .pk4-result-team:last-child > strong {
    grid-column: 1;
    grid-row: 1;
}

body .pk4-result-logo {
    display: grid !important;
    place-items: center !important;

    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    border:
        1px solid var(
            --pbv1-line,
            rgba(49, 31, 79, 0.12)
        ) !important;

    border-radius:
        var(--pbv1-radius-sm, 9px) !important;

    background:
        var(--pbv1-surface, #fff) !important;
}

body .pk4-result-logo img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    padding: 5px !important;
    object-fit: contain !important;
}

body .pk4-result-team > strong {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;

    overflow: hidden !important;

    color:
        var(--pbv1-text-strong, #26183f) !important;

    font-size: 0.88rem !important;
    font-weight: 850 !important;
    line-height: 1.22 !important;

    text-overflow: ellipsis !important;
    white-space: normal !important;
}

body .pk4-result-score {
    display: flex !important;

    min-width: 72px !important;
    min-height: 48px !important;
    height: auto !important;

    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    margin: 0 !important;
    padding: 8px 12px !important;

    border: 0 !important;
    border-radius:
        var(--pbv1-radius-sm, 9px) !important;

    box-shadow: none !important;
    background:
        var(--pbv1-brand-soft, rgba(85, 50, 129, 0.09)) !important;

    color:
        var(--pbv1-brand-strong, #3d205f) !important;
}

body .pk4-result-score span {
    font-size: 1.18rem !important;
    font-weight: 950 !important;
    line-height: 1 !important;
}

body .pk4-result-score i {
    font-size: 0.82rem !important;
    font-style: normal !important;
}

body .pk4-result-card__footer {
    display: flex !important;
    grid-template-columns: none !important;

    min-height: 0 !important;
    height: auto !important;

    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;

    margin: 0 !important;
    padding:
        10px 0 0 !important;

    border: 0 !important;
    border-top:
        1px solid var(
            --pbv1-line-soft,
            rgba(49, 31, 79, 0.075)
        ) !important;

    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;

    text-align: left !important;
}

body .pk4-result-card__footer > span,
body .pk4-result-card__footer > strong {
    font-size: 0.76rem !important;
    line-height: 1.25 !important;
}

body .pk4-result-card__footer
> strong.is-exact {
    min-height: 26px !important;
    padding:
        0 10px !important;

    border-radius: 999px !important;

    font-size: 0.68rem !important;
}

body .pk4-result-practice {
    display: block !important;

    min-height: 0 !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 0.63rem !important;
    line-height: 1.25 !important;
    text-align: left !important;
}


/* ========================================================
   STAND — WEEK/ALGEMEEN ECHT VLAK
   ======================================================== */

body .psf5-page
nav:has(
    a[href*="view=week"]
):has(
    a[href*="view=overall"]
) {
    display: grid !important;
    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 0 !important;

    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-bottom:
        1px solid var(
            --pbv1-line,
            rgba(49, 31, 79, 0.12)
        ) !important;

    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

body .psf5-page
nav:has(
    a[href*="view=week"]
):has(
    a[href*="view=overall"]
) > a {
    position: relative;

    display: grid !important;
    min-width: 0 !important;
    min-height: 68px !important;

    place-content: center !important;
    gap: 3px !important;

    margin: 0 !important;
    padding:
        12px 8px !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;

    color:
        var(--pbv1-text-muted, rgba(47, 33, 72, 0.62)) !important;

    text-align: center !important;
}

body .psf5-page
nav:has(
    a[href*="view=week"]
):has(
    a[href*="view=overall"]
) > a::after {
    content: "";

    position: absolute;
    right: 28%;
    bottom: -1px;
    left: 28%;

    height: 3px;

    border-radius: 999px;
    background: transparent;
}

body .psf5-page
nav:has(
    a[href*="view=week"]
):has(
    a[href*="view=overall"]
) > a.is-active {
    color:
        var(--pbv1-brand-strong, #3d205f) !important;
}

body .psf5-page
nav:has(
    a[href*="view=week"]
):has(
    a[href*="view=overall"]
) > a.is-active::after {
    right: 8%;
    left: 8%;
    background:
        var(--pbv1-brand, #553281);
}


/* ========================================================
   STAND — RANGLIJST ZONDER BUITENKAART
   ======================================================== */

body .psf5-page section:has(> ol) {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding:
        24px 0 0 !important;

    overflow: visible !important;

    border: 0 !important;
    border-top:
        1px solid var(
            --pbv1-line,
            rgba(49, 31, 79, 0.12)
        ) !important;

    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

body .psf5-page section:has(> ol)
> :where(header, div):first-child {
    margin:
        0 0 12px !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

body .psf5-page section:has(> ol) > ol {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    list-style: none !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

body .psf5-page section:has(> ol)
> ol > li {
    width: 100% !important;
    max-width: 100% !important;

    min-height: 0 !important;
    height: auto !important;

    margin: 0 !important;
    padding:
        17px 0 !important;

    border: 0 !important;
    border-bottom:
        1px solid var(
            --pbv1-line-soft,
            rgba(49, 31, 79, 0.075)
        ) !important;

    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

body .psf5-page section:has(> ol)
> ol > li:last-child {
    border-bottom: 0 !important;
}

body .psf5-page section:has(> ol)
> ol > li.is-me {
    padding-right: 10px !important;
    padding-left: 12px !important;

    box-shadow:
        inset 4px 0 0
        var(--pbv1-brand, #553281) !important;

    background:
        linear-gradient(
            90deg,
            var(
                --pbv1-brand-soft,
                rgba(85, 50, 129, 0.09)
            ),
            transparent 78%
        ) !important;
}

body .psf5-page section:has(> ol)
.psf5-stat {
    min-height: 0 !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}


/* ========================================================
   MOBIEL
   ======================================================== */

@media (max-width: 720px) {
    body .pk4-result-card {
        gap: 9px !important;
        padding:
            16px 0 !important;
    }

    body .pk4-result-fixture {
        grid-template-columns:
            minmax(0, 1fr)
            66px
            minmax(0, 1fr) !important;

        gap: 8px !important;
    }

    body .pk4-result-team,
    body .pk4-result-team:last-child {
        display: grid !important;
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        gap: 6px !important;
        text-align: center !important;
    }

    body .pk4-result-team:last-child
    .pk4-result-logo,
    body .pk4-result-team:last-child > strong {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    body .pk4-result-logo {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
    }

    body .pk4-result-team > strong {
        min-height: 2.35em !important;

        font-size: 0.72rem !important;
        line-height: 1.18 !important;
        text-align: center !important;

        display: -webkit-box !important;

        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;

        line-clamp: 2;
    }

    body .pk4-result-score {
        min-width: 66px !important;
        min-height: 46px !important;
        padding:
            8px 7px !important;
    }

    body .pk4-result-card__footer {
        flex-wrap: wrap !important;
        padding-top: 9px !important;
    }

    body .pk4-result-card__footer
    > strong.is-exact {
        margin-left: auto !important;
    }

    body .psf5-page section:has(> ol) {
        padding-top: 20px !important;
    }

    body .psf5-page section:has(> ol)
    > ol > li {
        padding:
            15px 0 !important;
    }
}


/* ========================================================
   REDUCED MOTION
   ======================================================== */

@media (prefers-reduced-motion: reduce) {
    body .psf5-page
    nav:has(
        a[href*="view=week"]
    ):has(
        a[href*="view=overall"]
    ) > a::after {
        transition: none !important;
    }
}

/* === POOLBAAS VISUAL REPAIR V3 END === */