.zb-frontend {
    --zb-blue: var(--bllt-blue, #173f67);
    --zb-navy: var(--bllt-navy, #0b2034);
    --zb-light-blue: var(--bllt-light-blue, #b9dcf3);
    --zb-light-blue-soft: var(--bllt-light-blue-soft, #e8f4fb);
    --zb-red: var(--bllt-red, #c72c35);
    --zb-ink: var(--bllt-ink, #14283b);
    --zb-line: var(--bllt-line, #d7e0e7);
    color: var(--zb-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    min-width: 0;
}

.zb-frontend *, .zb-frontend *::before, .zb-frontend *::after { box-sizing: border-box; }
.zb-frontend h2 { color: var(--zb-navy); font-size: clamp(1.6rem, 3vw, 2.15rem); line-height: 1.15; margin: 0 0 18px; }
.zb-frontend h3 { color: var(--zb-navy); font-size: 1.2rem; line-height: 1.3; margin: 30px 0 10px; }
.zb-frontend h4 { color: var(--zb-navy); font-size: 1rem; margin: 20px 0 8px; }
.zb-frontend :focus-visible { outline: 3px solid var(--zb-red); outline-offset: 2px; }

.zb-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 28px;
}

.zb-nav a {
    align-items: center;
    background: #fff;
    border: 1px solid var(--zb-line);
    border-radius: 8px;
    color: var(--zb-navy);
    display: inline-flex;
    font-size: .9rem;
    font-weight: 750;
    justify-content: center;
    min-height: 44px;
    padding: 9px 14px;
    text-align: center;
    text-decoration: none;
}

.zb-nav a:hover { background: var(--zb-light-blue-soft); border-color: var(--zb-light-blue); color: var(--zb-navy); }
.zb-nav a.is-active { background: var(--zb-blue); border-color: var(--zb-blue); box-shadow: inset 0 -3px var(--zb-red); color: #fff; }
.zb-frontend form { margin-bottom: 20px; }
.zb-frontend select { background-color: #fff; border: 1px solid var(--zb-line); border-radius: 8px; color: var(--zb-ink); min-height: 44px; }
.zb-table-wrap {
    background: #fff;
    border: 1px solid var(--zb-line);
    border-radius: 10px;
    margin-bottom: 24px;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.zb-frontend .zb-table {
    background: #fff;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--zb-ink);
    margin: 0;
    min-width: max-content;
    width: 100%;
}

.zb-frontend .zb-table th {
    background: var(--zb-navy);
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, .16);
    color: #fff;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .025em;
    padding: 10px 12px;
    text-align: left;
    white-space: nowrap;
}

.zb-frontend .zb-table th:last-child { border-right: 0; }
.zb-frontend .zb-table td {
    background: #fff;
    border: 0;
    border-bottom: 1px solid var(--zb-line);
    padding: 9px 12px;
    vertical-align: top;
    white-space: nowrap;
}
.zb-frontend .zb-table tbody tr:last-child td { border-bottom: 0; }
.zb-frontend .zb-table tr:nth-child(even) td { background: #f7f9fb; }
.zb-frontend .zb-table tbody tr:hover td { background: var(--zb-light-blue-soft); }
.zb-frontend .zb-table tr.table-success td { background: #d1e7dd; }
.zb-frontend .zb-table tr.table-success:hover td { background: #c5dfd2; }

.zb-wide-page main.bllt-container { width: min(calc(100% - 40px), 1500px); }
.zb-wide-page .content-layout { grid-template-columns: minmax(0, 4fr) minmax(220px, 1fr); }

.zb-baanindeling { font-size: 14px; }
.zb-baanindeling table { width: 100%; }
.zb-baanindeling th, .zb-baanindeling td { max-width: 45px; min-width: 35px; overflow-wrap: break-word; padding: 6px; text-align: center; vertical-align: middle; }
.zb-baanindeling th.speler-kop, .zb-baanindeling td.speler { max-width: 200px; text-align: left; white-space: nowrap; width: 160px; }
.zb-baanindeling th.datum-kop { font-size: 12px; font-weight: 700; line-height: 1.1; white-space: normal; }

@media (max-width: 768px) {
    .zb-wide-page main.bllt-container { width: min(calc(100% - 28px), 1500px); }
    .zb-wide-page .content-layout { grid-template-columns: 1fr; }
    .zb-baanindeling table { font-size: 12px; }
    .zb-baanindeling th.speler-kop, .zb-baanindeling td.speler { font-size: 11px; }
    .zb-table-wrap::after {
        color: #607286;
        content: "Veeg horizontaal voor meer kolommen →";
        display: block;
        font-size: .75rem;
        left: 0;
        padding: 7px 10px;
        position: sticky;
        width: max-content;
    }
}

@media (max-width: 560px) {
    .zb-nav { grid-template-columns: 1fr; }
}