:root {
    /* Ruimte op een basis van 4px, en de breedte van de leeskolom. Overgenomen van de conceptsite
       passie4sports.uitkomst.ai: die leest prettiger doordat de inhoud niet over de volle breedte
       uitrekt en de afstanden meeschalen met het scherm. */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 64px;
    --s-9: 96px;
    --wrap: 1200px;
}

html, body {
    font-family: var(--font-body, 'Helvetica Neue', Helvetica, Arial, sans-serif);
    font-style: var(--font-body-style, normal);
    background: var(--c-surface, #f7f5f0);
    color: var(--c-text, #1b1a17);
    margin: 0;
}

h1, h2, h3 {
    font-family: var(--font-heading, Arial, sans-serif);
    margin: 0;
}

a, .btn-link {
    /* Linkkleur is een donkerder variant van de primaire kleur, zodat tekstlinks ook op een
       witte kaart voldoende contrast houden (zie ThemeCssBuilder.LinkColor). */
    color: var(--c-link, #a35c00);
}

/* --- Klantlayout (CustomerLayout) --- */
.customer-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.customer-topbar {
    height: 64px;
    background: var(--c-card, #fff);
    border-bottom: 1px solid #e6e1d8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
}

.customer-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
}

.customer-brand-badge {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--c-primary, #f16c03);
    color: var(--c-primary-contrast, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 13px;
}

.customer-brand-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 18px;
}

.customer-nav {
    display: flex;
    align-items: center;
    gap: 22px;
    font-size: 14px;
}

.customer-nav a {
    text-decoration: none;
    font-weight: 600;
    color: var(--c-text, #1b1a17);
}

.customer-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
    padding: 0 0 var(--s-8) 0;
}

/* Elk blok op een klantpagina staat in dezelfde kolom van maximaal 1200px. */
.customer-content > * {
    width: 100%;
    max-width: var(--wrap);
    align-self: center;
    box-sizing: border-box;
    padding-inline: var(--s-5);
}

/* Kopbanden lopen van rand tot rand; hun inhoud lijnt uit op diezelfde kolom. */
.customer-content > .hero,
.customer-content > .landing-hero,
.customer-content > .landing-hero-light,
.customer-content > .flow-header {
    max-width: none;
    margin: 0;
    padding-inline: max(var(--s-5), (100% - var(--wrap)) / 2);
}

/* --- Landingspagina (/) --- */
.landing-head {
    margin-bottom: 24px;
}

.landing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.landing-card {
    background: var(--c-card, #fff);
    border: 1px solid #e6e1d8;
    border-top: 4px solid var(--club-color, #e6e1d8);
    border-radius: var(--radius, 12px);
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    text-align: center;
}

.landing-card-logo {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    object-fit: contain;
}

.landing-card-logo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 20px;
}

.landing-card-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 15px;
}

.landing-card-fullname {
    font-size: 12px;
}

.landing-card-city {
    font-size: 13px;
}

.vereniging-sport-group {
    margin-bottom: 28px;
}

.vereniging-sport-group h2 {
    font-size: 20px;
    margin-bottom: 12px;
}

/* --- Landingspagina (/) v2 --- */
.landing-hero {
    background: var(--c-primary, #f16c03);
    color: var(--c-primary-contrast, #fff);
    padding-block: var(--s-8) var(--s-7);
}

/* Lichte variant voor de landingspagina: rustiger, met het shirt als blikvanger rechts. */
.landing-hero-light {
    background: var(--c-surface, #f7f5f0);
    color: var(--c-text, #1b1a17);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 460px;
    gap: var(--s-7);
    align-items: center;
    padding-block: var(--s-8) var(--s-7);
}

.landing-hero-light .landing-eyebrow {
    color: var(--c-link, #a35c00);
    opacity: 1;
}

.landing-hero-light .landing-hero-text h1 {
    font-size: 50px;
    max-width: 680px;
}

.landing-hero-light .landing-hero-text p {
    color: #4a4640;
    opacity: 1;
    font-size: 18px;
}

.landing-hero-light .btn-primary-lg {
    background: var(--c-primary, #f16c03);
    color: var(--c-primary-contrast, #fff);
    height: 52px;
    font-size: 16px;
}

.landing-hero-light .btn-secondary-lg {
    height: 52px;
    font-size: 16px;
    border: 1px solid #ccc5b8;
}

.landing-hero-light .landing-hero-checks {
    color: var(--c-muted, #6f6a62);
    opacity: 1;
    list-style: none;
    margin: 0;
    padding: 8px 0 0 0;
}

.landing-hero-light .landing-hero-checks li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.landing-hero-light .landing-hero-checks svg {
    color: #1a7f4b;
    flex-shrink: 0;
}

.landing-kit-card {
    background: var(--c-card, #fff);
    border: 1px solid #e6e1d8;
    border-radius: 16px;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 10px 30px rgba(27, 26, 23, 0.06);
}

.landing-kit-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 15px;
}

.landing-kit-head .muted {
    font-weight: 400;
    font-size: 12px;
}

.landing-kit-previews {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.landing-kit-svg {
    width: 100%;
    height: auto;
}

.landing-kit-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: var(--c-surface, #f7f5f0);
    border-radius: 10px;
    font-size: 14px;
}

.landing-kit-amount {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 700;
}

.landing-kit-amount small {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--c-muted, #6f6a62);
}

@media (max-width: 980px) {
    .landing-hero-light {
        grid-template-columns: minmax(0, 1fr);
    }

    .landing-hero-light .landing-hero-text h1 {
        font-size: 38px;
    }
}

.landing-hero-text {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 760px;
}

.landing-eyebrow {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--c-primary-contrast, #fff);
    opacity: 0.9;
}

.landing-eyebrow-dark {
    /* Op de donkere band moet dit de heldere primaire kleur zijn, niet de donkere linkvariant. */
    color: var(--c-primary, #f39314);
    opacity: 1;
}

.landing-hero-text h1 {
    font-size: 44px;
    line-height: 1.1;
    font-weight: 700;
}

.landing-hero-text p {
    margin: 0;
    font-size: 17px;
    line-height: 1.5;
    opacity: 0.95;
    max-width: 640px;
}

.landing-hero-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    padding-top: 4px;
}

.btn-primary-lg, .btn-secondary-lg {
    display: inline-flex;
    align-items: center;
    height: 48px;
    padding: 0 22px;
    border-radius: var(--radius, 8px);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
}

.btn-primary-lg {
    background: var(--c-text, #1b1a17);
    color: #fff;
    border: none;
}

.btn-secondary-lg {
    background: #fff;
    color: var(--c-text, #1b1a17);
    border: 1px solid rgba(0,0,0,0.15);
}

.landing-hero-checks {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    padding-top: 8px;
    font-size: 14px;
    opacity: 0.95;
}

.landing-section {
    padding: 48px 0;
}

.landing-section h2 {
    font-size: 28px;
    margin-bottom: 20px;
}

.landing-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.landing-step {
    background: var(--c-card, #fff);
    border: 1px solid #e6e1d8;
    border-radius: var(--radius, 12px);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.landing-step-num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--c-primary, #f16c03);
    color: var(--c-primary-contrast, #fff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
}

.landing-step-title {
    font-weight: 600;
    font-size: 16px;
}

.landing-p4s {
    background: #1b1a17;
    color: #fff;
    border-radius: var(--radius, 16px);
    padding: 36px 40px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 32px;
    align-items: center;
}

.landing-p4s-text {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.landing-p4s-text h2 {
    font-size: 26px;
    line-height: 1.2;
}

.landing-p4s-text p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    /* Dit blok heeft een vaste donkere achtergrond, dus vaste lichte tekstkleur. */
    color: #d9d5cf;
}

.landing-p4s-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.landing-p4s-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px;
    background: #2c2b2a;
    border-radius: 10px;
}

.landing-p4s-stat span:first-child {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 700;
}

.landing-p4s-stat span:last-child {
    font-size: 12px;
    color: #a9a5a0;
}

.landing-audience-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

.landing-audience-card {
    background: var(--c-card, #fff);
    border: 1px solid #e6e1d8;
    border-radius: var(--radius, 12px);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.landing-audience-card h3 {
    font-size: 19px;
}

.landing-audience-card a {
    font-weight: 600;
    text-decoration: none;
    margin-top: auto;
}

.landing-search-panel {
    background: var(--c-card, #fff);
    border: 1px solid #e6e1d8;
    border-radius: var(--radius, 16px);
    padding: 28px 32px;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.landing-search-row {
    display: flex;
    gap: 10px;
}

.landing-search-input {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    height: 52px;
    border: 1px solid #ccc5b8;
    border-radius: var(--radius, 8px);
    padding: 0 16px 0 46px;
    font-size: 16px;
    font-family: inherit;
    background-color: var(--c-card, #fff);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236f6a62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>");
    background-repeat: no-repeat;
    background-position: 16px center;
}

.landing-search-input:focus {
    outline: none;
    border-color: var(--c-primary, #f16c03);
    box-shadow: 0 0 0 3px rgba(241, 108, 3, 0.15);
}

.landing-search-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.landing-search-panel h2 {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 700;
    margin: 0;
}

.club-picker {
    position: relative;
}

.club-picker-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 20;
    background: var(--c-card, #fff);
    border: 1px solid #e6e1d8;
    border-radius: var(--radius, 8px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    display: flex;
    flex-direction: column;
    max-height: 360px;
    overflow-y: auto;
}

.club-picker-empty {
    padding: 12px 14px;
    font-size: 14px;
    color: var(--c-muted, #6f6a62);
}

.club-picker-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    text-decoration: none;
    color: inherit;
}

.club-picker-option:hover, .club-picker-option.highlighted {
    background: var(--c-surface, #f7f5f0);
}

.club-picker-logo {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: contain;
    flex-shrink: 0;
}

.club-picker-logo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-heading);
}

.club-picker-text {
    display: flex;
    flex-direction: column;
}

.club-picker-name {
    font-size: 14px;
    font-weight: 500;
}

.club-picker-city {
    font-size: 12px;
    color: var(--c-muted, #6f6a62);
}

.club-picker-missing {
    text-align: left;
    padding: 12px 14px;
    border: none;
    border-top: 1px solid #e6e1d8;
    background: var(--c-surface, #f7f5f0);
    color: var(--c-primary, #f16c03);
    font-weight: 600;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
}

.club-picker-request-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid #e6e1d8;
}

.club-picker-request-title {
    font-weight: 600;
    font-size: 14px;
}

.landing-popular {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    font-size: 13px;
}

.landing-chip {
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--c-surface, #f7f5f0);
    border: 1px solid #e6e1d8;
    text-decoration: none;
    color: inherit;
    font-weight: 600;
}

.landing-chip:hover {
    border-color: var(--c-primary, #f16c03);
    color: inherit;
}

.landing-all-link {
    font-weight: 600;
    text-decoration: none;
    margin-left: 6px;
}

/* --- Operatorlayout (OperatorLayout, donker Passie4Sports-thema) --- */
.operator-shell {
    min-height: 100vh;
    display: flex;
    background: var(--c-surface, #f5f3ef);
    color: var(--c-text, #1b1a17);
}

.operator-sidebar {
    width: 220px;
    /* De zijbalk blijft de donkere merkbalk van Passie4Sports (wit logo), ook bij een licht
       paginathema. Daarom eigen kleuren, niet de themavariabelen. */
    background: #1b1a17;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    padding: 24px 0;
    border-right: 1px solid #2c2b2a;
    flex-shrink: 0;
}

.operator-brand {
    padding: 0 20px 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.operator-brand img {
    width: 150px;
    height: auto;
}

.operator-brand-sub {
    font-size: 11px;
    color: #a9a5a0;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.operator-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
}

.operator-nav a {
    padding: 10px 20px;
    color: #c9c5bf;
    text-decoration: none;
    border-left: 3px solid transparent;
}

.operator-nav a:hover {
    color: #ffffff;
}

.operator-nav a.active {
    background: #2c2b2a;
    color: #ffffff;
    font-weight: 600;
    border-left-color: var(--c-primary, #f39314);
}

/* Aantal ongelezen berichten naast het menu-item. */
.operator-nav-teller {
    display: inline-block;
    min-width: 18px;
    padding: 0 5px;
    margin-left: 6px;
    border-radius: 9px;
    background: var(--c-primary, #f39314);
    color: #1b1a17;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* --- Postvak /operator/berichten --- */
.bericht-lijst {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bericht {
    background: var(--c-card, #ffffff);
    border: 1px solid var(--c-border, #e6e1d8);
    border-radius: var(--radius, 10px);
    overflow: hidden;
}

.bericht.is-open {
    border-color: var(--c-accent, #F16C03);
}

/* De hele regel is de knop die het bericht opent: een los pijltje is een klein doel en zegt niets. */
.bericht-kop {
    width: 100%;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) minmax(0, 200px) 130px;
    align-items: baseline;
    gap: 12px;
    padding: 12px 16px;
    background: none;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
    color: inherit;
}

.bericht-status {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--c-accent, #F16C03);
    font-weight: 700;
}

.bericht-onderwerp {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bericht.is-nieuw .bericht-onderwerp {
    font-weight: 600;
}

.bericht-aan,
.bericht-datum {
    color: var(--c-muted, #6f6a62);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bericht-body {
    padding: 0 16px 16px;
    border-top: 1px solid var(--c-border, #e6e1d8);
}

.bericht-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 12px 0;
    color: var(--c-muted, #6f6a62);
    font-size: 13px;
}

.bericht-tekst {
    margin: 0 0 14px;
    padding: 14px 16px;
    background: var(--c-surface, #f5f3ef);
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.bericht-acties {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 720px) {
    /* Op een telefoon staan onderwerp, ontvanger en datum onder elkaar in plaats van in vier kolommen. */
    .bericht-kop {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }
}

/* Uitloggen staat onderaan de zijbalk, weg bij de navigatie: het is geen scherm waar je heen gaat. */
.operator-uitloggen {
    margin-top: auto;
    padding: 20px;
}

.operator-uitloggen button {
    background: none;
    border: 1px solid #45423d;
    border-radius: 8px;
    color: #c9c5bf;
    font-family: inherit;
    font-size: 13px;
    padding: 7px 12px;
    cursor: pointer;
}

.operator-uitloggen button:hover {
    color: #ffffff;
    border-color: #6f6a62;
}

.operator-content {
    flex: 1;
    padding: 26px 32px;
    min-width: 0;
}

.soon-panel {
    max-width: 32rem;
    margin: 4rem auto;
    text-align: center;
}

.soon-panel a {
    color: var(--c-primary);
}

/* --- Start.dc.html: klant-startpagina (/c/{slug}) --- */
.hero {
    background: var(--c-primary, #f16c03);
    color: var(--c-primary-contrast, #fff);
    padding-block: var(--s-7);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
}

.hero-text {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 720px;
}

.hero-text h1 {
    font-size: 40px;
    line-height: 1.05;
}

.hero-text p {
    margin: 0;
    font-size: 16px;
    opacity: 0.92;
}

.hero-stats {
    display: flex;
    gap: 28px;
    font-size: 14px;
    opacity: 0.92;
}

.hero-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hero-stat-value {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 700;
}

.start-grid {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 32px;
    padding: 32px 0;
}

.team-panel, .package-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.team-number-select {
    height: 44px;
    border: 1px solid #ccc5b8;
    border-radius: var(--radius, 8px);
    background: var(--c-card, #fff);
    color: var(--c-text);
    font-family: inherit;
    font-size: 15px;
    padding: 0 12px;
}

.hint {
    font-size: 13px;
    color: var(--c-muted, #6f6a62);
}

.jaarlaag-groups {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.jaarlaag-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.jaarlaag-group-label {
    font-size: 12px;
    color: var(--c-muted, #6f6a62);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.jaarlaag-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.jaarlaag-chip {
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    background: var(--c-card, #fff);
    color: var(--c-text, #1b1a17);
    border: 1px solid #e6e1d8;
    font-family: inherit;
    cursor: pointer;
}

.jaarlaag-chip.selected {
    background: var(--c-text, #1b1a17);
    color: #fff;
    border-color: var(--c-text, #1b1a17);
}

.team-list-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.muted {
    color: var(--c-muted, #6f6a62);
}

.error-text {
    color: #b91c1c;
}

.package-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.package-card {
    background: var(--c-card, #fff);
    border: 1px solid #e6e1d8;
    border-radius: var(--radius, 12px);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
}

.package-card.featured {
    border: 2px solid var(--c-primary, #f16c03);
}

.package-badge {
    position: absolute;
    top: -12px;
    left: 24px;
    background: var(--c-primary, #f16c03);
    color: var(--c-primary-contrast, #fff);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
}

.package-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.package-name {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 700;
    /* Altijd ruimte voor twee regels: "Craft Team Pack Complete" breekt en "Craft Team Pack Pro"
       niet, waardoor de prijs en de kiesknop op de drie kaarten niet op één lijn stonden.
       In regelhoogtes (lh) en niet in em, want em rekent met de tekengrootte en niet met de
       regelafstand; dat gaf tweeënvijftig pixels waar twee regels zesenzestig zijn. */
    min-height: 2lh;
}

.package-subtitle {
    font-size: 13px;
    color: var(--c-muted, #6f6a62);
}

.package-price {
    font-family: var(--font-heading);
    font-size: 34px;
    font-weight: 700;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.package-price-unit {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--c-muted, #6f6a62);
}

.package-sub {
    font-size: 13px;
    color: var(--c-muted, #6f6a62);
}

.package-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 14px;
}

.package-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.package-item-text {
    display: flex;
    flex-direction: column;
}

.package-item-name {
    font-size: 14px;
    font-weight: 500;
}

.package-item-color {
    font-size: 12px;
    color: var(--c-muted, #6f6a62);
}

.btn-choose {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 18px;
    margin-top: auto;
    border-radius: var(--radius, 8px);
    border: 1px solid #ccc5b8;
    background: var(--c-card, #fff);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--c-text);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.btn-choose:hover {
    border-color: var(--c-primary, #f16c03);
}

.btn-choose-primary {
    border: 1px solid var(--c-primary, #1b1a17);
    background: var(--c-primary, #1b1a17);
    color: var(--c-primary-contrast, #fff);
}

/* Terugknop: zelfde maat als de hoofdknop, maar rustig, met een pijl ervoor. */
.btn-back {
    margin-top: 0;
    color: var(--c-muted, #6f6a62);
}

.btn-back::before {
    content: "\2190";
    margin-right: 8px;
}

/* Kleine secundaire knop binnen een kaart, bijvoorbeeld "Verwijderen". */
.btn-small {
    height: 34px;
    padding: 0 12px;
    margin-top: 0;
    font-size: 13px;
}

/* Onderbalk van een stap in de bestelflow: terug links, verder rechts. */
.step-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 8px;
}

.team-order-cta {
    background: var(--c-card, #fff);
    border: 1px solid #e6e1d8;
    border-radius: var(--radius, 12px);
    padding: 18px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.cta-title {
    display: block;
    font-weight: 600;
    font-size: 15px;
}

.cta-sub {
    display: block;
    font-size: 13px;
    color: var(--c-muted, #6f6a62);
}

/* --- Main.dc.html: bestelpagina (/c/{slug}/bestellen/{orderId}) --- */
.order-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    padding-top: 8px;
}

.order-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-card {
    background: var(--c-card, #fff);
    border: 1px solid #e6e1d8;
    border-radius: var(--radius, 10px);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-card h3 {
    font-size: 16px;
}

.form-card label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
}

.form-card label {
    font-weight: 600;
}

.form-card input, .form-card select {
    height: 44px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ccc5b8;
    border-radius: var(--radius, 8px);
    padding: 0 12px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    background: var(--c-card, #fff);
    color: var(--c-text, #1b1a17);
}

.form-card input:focus, .form-card select:focus {
    outline: none;
    border-color: var(--c-primary, #f16c03);
    box-shadow: 0 0 0 3px rgba(241, 108, 3, 0.15);
}

.form-card input[type="checkbox"] {
    height: 18px;
    width: 18px;
    flex: 0 0 auto;
}

.place-btn {
    height: 48px;
    align-self: flex-start;
    padding: 0 26px;
}

/* --- Spelersstap --- */
.squad-toolbar {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    padding: 12px 0;
}

.squad-toolbar label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--c-muted, #6f6a62);
}

.squad-toolbar select {
    height: 40px;
    border: 1px solid #ccc5b8;
    border-radius: var(--radius, 8px);
    padding: 0 10px;
    font-family: inherit;
}

.squad-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--c-card, #fff);
    border: 1px solid #e6e1d8;
    border-radius: var(--radius, 10px);
    overflow: hidden;
}

.squad-table th, .squad-table td {
    text-align: left;
    padding: 8px 12px;
    font-size: 14px;
    border-bottom: 1px solid #eee9e0;
}

.squad-table input, .squad-table select {
    height: 40px;
    border: 1px solid #ccc5b8;
    border-radius: 6px;
    padding: 0 8px;
    font-family: inherit;
    font-size: 14px;
    width: 110px;
    background: var(--c-card, #fff);
    color: var(--c-text, #1b1a17);
}

.squad-table .size-select {
    width: 150px;
}

.squad-table input:focus, .squad-table select:focus {
    outline: none;
    border-color: var(--c-primary, #f16c03);
}

.squad-actions {
    gap: 12px;
    flex-wrap: wrap;
}

.squad-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: var(--c-card, #fff);
    border: 1px solid #e6e1d8;
    border-radius: var(--radius, 10px);
    margin-top: 12px;
    font-weight: 600;
}

.squad-total-amount {
    font-family: var(--font-heading);
    font-size: 22px;
}

.squad-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
}

/* --- Overzichtstap --- */
.overzicht-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 8px 0;
}

.overzicht-card {
    background: var(--c-card, #fff);
    border: 1px solid #e6e1d8;
    border-radius: var(--radius, 10px);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.overzicht-card h3 {
    font-size: 16px;
    margin-bottom: 4px;
}

.overzicht-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding: 4px 0;
    border-bottom: 1px solid #f0ede6;
}

.overzicht-total {
    grid-column: span 2;
}

.overzicht-total-row {
    font-weight: 700;
    font-size: 18px;
    border-bottom: none;
}

.order-preview {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    background: var(--c-card, #fff);
    border: 1px solid #e6e1d8;
    border-radius: var(--radius, 12px);
    padding: 20px;
}

.preview-card {
    border: 1px solid #e6e1d8;
    border-radius: var(--radius, 10px);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.preview-card.featured {
    border: 2px solid var(--c-primary, #f16c03);
}

.preview-label {
    font-size: 13px;
    font-weight: 600;
}

.placed-panel {
    max-width: 860px;
    margin: 24px auto 48px auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* --- Bestelflow stepper (Main.dc.html) --- */
.order-stepper {
    display: flex;
    align-items: center;
    padding: 8px 0 24px 0;
}

.order-stepper-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.order-stepper-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #ddd7cc;
    color: #9b958b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
}

.order-stepper-dot.done {
    background: var(--c-primary, #f16c03);
    border-color: var(--c-primary, #f16c03);
    color: var(--c-primary-contrast, #fff);
}

.order-stepper-dot.current {
    background: var(--c-text, #1b1a17);
    border-color: var(--c-text, #1b1a17);
    color: #fff;
}

.order-stepper-label {
    font-size: 14px;
    color: #9b958b;
}

.order-stepper-label.current {
    font-weight: 600;
    color: var(--c-text, #1b1a17);
}

.order-stepper-line {
    width: 56px;
    height: 2px;
    background: #ddd7cc;
    margin: 0 14px;
}

.order-stepper-line.done {
    background: var(--c-primary, #f16c03);
}

/* --- Sponsorstap (Main.dc.html) --- */
.sponsor-card {
    background: var(--c-card, #fff);
    border: 1px solid #e6e1d8;
    border-radius: var(--radius, 10px);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sponsor-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sponsor-card-title {
    font-weight: 600;
    font-size: 15px;
}

.sponsor-card-mode {
    display: flex;
    gap: 8px;
}

.mode-chip {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    background: #ffffff;
    border: 1px solid #e6e1d8;
    font-family: inherit;
    cursor: pointer;
}

.mode-chip.selected {
    background: var(--c-text, #1b1a17);
    color: #fff;
    border-color: var(--c-text, #1b1a17);
}

.sponsor-logo-row {
    font-size: 13px;
    color: var(--c-muted, #6f6a62);
}

.sponsor-logo-thumb-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sponsor-logo-thumb {
    max-height: 72px;
    max-width: 160px;
    object-fit: contain;
}

.sponsor-add-card {
    border-left: 4px solid var(--c-primary, #f16c03);
    gap: 14px;
}

.sponsor-add-card h3 {
    font-family: var(--font-heading);
    font-size: 17px;
}

.sponsor-add-card .btn-choose {
    align-self: flex-start;
}

.form-card label.sponsor-visible-toggle {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
}

.sponsor-visible-toggle > span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* --- MijnBestellingen.dc.html: /mijn --- */
.mijn-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 18px;
}

.mijn-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 32px;
    align-items: start;
}

.mijn-orders {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.mijn-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.order-card {
    background: var(--c-card, #fff);
    border: 1px solid #e6e1d8;
    border-left: 4px solid var(--club-color, #e6e1d8);
    border-radius: var(--radius, 12px);
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.order-card-flag {
    border-top-color: #f0b48a;
    border-right-color: #f0b48a;
    border-bottom-color: #f0b48a;
}

.order-card-clickable {
    cursor: pointer;
}

.order-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.order-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.order-number {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 20px;
}

.status-pill {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eee9e0;
    color: #6f6a62;
}

.status-Placed {
    background: #fde9db;
    color: #a13b00;
}

.status-Confirmed {
    background: #e3f3ea;
    color: #1a7f4b;
}

.status-InProduction, .status-Shipped {
    background: #fde9db;
    color: #a13b00;
}

.status-Delivered {
    background: #eee9e0;
    color: #6f6a62;
}

.status-Cancelled {
    background: #f6d7d7;
    color: #b91c1c;
}

.order-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.status-track {
    display: flex;
    align-items: center;
    padding: 4px 0;
}

.status-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--c-muted, #6f6a62);
    flex: 1;
    white-space: nowrap;
}

.status-step:not(:last-child)::after {
    content: "";
    flex: 1;
    height: 2px;
    background: #ddd7cc;
    margin: 0 12px;
}

.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #ccc5b8;
    background: #fff;
    flex-shrink: 0;
}

.status-step-done {
    color: var(--c-text);
    font-weight: 600;
}

.status-step-done .status-dot {
    background: var(--c-primary, #f16c03);
    border-color: var(--c-primary, #f16c03);
}

.extra-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid #eee9e0;
    border-radius: var(--radius, 10px);
    font-size: 14px;
}

/* --- Vandaag.dc.html / Operator.dc.html: donker operatorthema --- */
.vandaag-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 18px;
}

.muted-i {
    color: var(--c-muted, #6f6a62);
    font-style: var(--font-body-style, normal);
    font-size: 14px;
}

.btn-op {
    height: 40px;
    padding: 0 16px;
    border-radius: var(--radius, 4px);
    border: 1px solid #3a3835;
    background: transparent;
    color: var(--c-text, #1b1a17);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.btn-op-primary {
    height: 36px;
    padding: 0 14px;
    border-radius: var(--radius, 4px);
    border: none;
    background: #ffffff;
    color: #1b1a17;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    /* Ook als link bruikbaar, net als .btn-op-secondary: zonder dit werd een <a> met deze klasse een
       onderstreepte tekstlink tussen twee knoppen. */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.alert-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}

.alert-heading {
    font-size: 12px;
    color: var(--c-muted, #6f6a62);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
}

.alert-row {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    border-radius: var(--radius, 4px);
    border: 1px solid var(--c-border, #e6e1d8);
    border-left: 3px solid #8a7a5a;
    background: var(--c-card, #ffffff);
}

/* Urgentie zit in het streepje links en een klein bolletje, niet in een vlak kleurvlak. */
.alert-Critical {
    border-left-color: #c4563f;
}

.alert-Warning {
    border-left-color: #b8871a;
}

.alert-Info {
    border-left-color: #4a4640;
}

.alert-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #8a7a5a;
}

.alert-Critical .alert-dot {
    background: #c4563f;
}

.alert-Warning .alert-dot {
    background: #b8871a;
}

.alert-Info .alert-dot {
    background: #4a4640;
}

.alert-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-grow: 1;
}

.alert-title {
    font-size: 14px;
    font-weight: 600;
}

.alert-msg {
    font-size: 13px;
    color: var(--c-muted, #6f6a62);
}

.alert-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.btn-op-secondary {
    height: 36px;
    padding: 0 14px;
    border-radius: var(--radius, 4px);
    border: 1px solid var(--c-border, #cfc9bf);
    background: transparent;
    color: var(--c-text, #1b1a17);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.vandaag-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) 300px;
    gap: 16px;
}

.op-panel {
    background: var(--c-card, #ffffff);
    border: 1px solid var(--c-border, #e6e1d8);
    border-radius: var(--radius, 4px);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.op-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.op-task-row, .op-delivery-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--c-surface, #f5f3ef);
    border-radius: var(--radius, 4px);
    font-size: 13px;
}

.op-task-title {
    font-weight: 600;
    font-size: 14px;
}

.op-task-sub {
    color: var(--c-muted, #6f6a62);
}

.op-team-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.op-team-role {
    font-weight: 600;
    font-size: 13px;
    color: var(--c-muted, #6f6a62);
}

.delivery-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.delivery-ok {
    background: #7bd39a;
}

.delivery-warning {
    background: #f39314;
}

.delivery-critical {
    background: #d23c2a;
}

/* --- Operator.dc.html: /operator/bestellingen --- */
.orders-layout {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 0;
    margin: -26px -32px;
    min-height: calc(100vh - 0px);
}

.orders-list-pane {
    background: var(--c-card, #fff);
    border-right: 1px solid #2c2b2a;
    display: flex;
    flex-direction: column;
    padding: 24px 0;
}

.orders-list-head {
    padding: 0 20px 12px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.orders-filter {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.orders-filter select {
    height: 36px;
    border-radius: var(--radius, 4px);
    border: 1px solid #3a3835;
    background: var(--c-surface, #f5f3ef);
    color: var(--c-text);
    font-family: inherit;
    padding: 0 10px;
}

.order-row {
    padding: 14px 20px;
    border-left: 3px solid transparent;
    border-top: 1px solid var(--c-border, #e6e1d8);
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    background: none;
    text-align: left;
    width: 100%;
    color: inherit;
    font-family: inherit;
}

.order-row.selected {
    border-left-color: var(--c-primary, #f16c03);
    background: rgba(243, 147, 20, 0.08);
}

.order-row-head {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    font-size: 15px;
}

.order-detail-pane {
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.order-detail-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.order-detail-actions {
    display: flex;
    gap: 8px;
}

.op-status-track {
    display: flex;
    align-items: center;
    background: var(--c-card, #fff);
    border: 1px solid var(--c-border, #e6e1d8);
    border-radius: var(--radius, 10px);
    padding: 14px 20px;
}

.op-status-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--c-muted, #6f6a62);
    flex: 1;
}

.op-status-step:not(:last-child)::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #2c2b2a;
    margin: 0 14px;
}

.op-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #3a3835;
    flex-shrink: 0;
}

.op-status-step-done .op-status-dot {
    background: var(--c-primary, #f16c03);
    border-color: var(--c-primary, #f16c03);
}

.op-status-step-done {
    color: var(--c-text);
    font-weight: 600;
}

.order-detail-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.op-card {
    background: var(--c-card, #fff);
    border: 1px solid var(--c-border, #e6e1d8);
    border-radius: var(--radius, 10px);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vereniging-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

/* De kaart is zelf de link naar de clubpagina: elke kaart heeft daardoor precies dezelfde regels en
   dus dezelfde hoogte, en er valt niet mis te klikken tussen twee knoppen. */
.vereniging-card {
    background: var(--c-card, #ffffff);
    border: 1px solid var(--c-border, #e6e1d8);
    border-radius: var(--radius, 10px);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: inherit;
    text-decoration: none;
}

.vereniging-card:hover,
.vereniging-card:focus-visible {
    border-color: var(--c-accent, #F16C03);
}

.vereniging-kop {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.vereniging-naam {
    font-family: var(--font-heading);
    font-size: 15px;
    line-height: 20px;
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Eén regel per gegeven, afgekapt in plaats van omgebroken: een club met drie sporten mag de kaart
   niet hoger maken dan een club met een. */
.vereniging-regel {
    color: var(--c-muted, #6f6a62);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vereniging-cta {
    margin-top: 10px;
    color: var(--c-accent, #F16C03);
    font-weight: 600;
    font-size: 14px;
}

.vereniging-cta::after {
    content: " →";
}

/* --- Clubpagina /operator/verenigingen/{slug} --- */
.op-terug {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--c-muted, #6f6a62);
    font-size: 14px;
}

.op-terug::before {
    content: "← ";
}

.club-kop {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.club-kop-tekst {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.club-kop-acties {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.club-sectie {
    font-family: var(--font-heading);
    font-size: 18px;
    margin-top: 8px;
}

.club-sectie-uitleg {
    margin: 4px 0 12px;
    max-width: 70ch;
}

.jaarlagen-sport-card {
    margin-bottom: 16px;
}

.jaarlagen-table {
    width: 100%;
    border-collapse: collapse;
}

.jaarlagen-table th, .jaarlagen-table td {
    text-align: left;
    padding: 8px 10px;
    font-size: 14px;
    border-bottom: 1px solid #2c2b2a;
}

.jaarlagen-table input {
    background: var(--c-surface, #f5f3ef);
    color: var(--c-text, #1b1a17);
    border: 1px solid var(--c-border, #e6e1d8);
    border-radius: 6px;
    padding: 4px 8px;
}

.vereniging-logo {
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 8px;
    object-fit: contain;
    background: #fff;
}

.vereniging-logo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 18px;
}

.stock-table {
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
    gap: 8px;
    font-size: 14px;
}

.stock-table-head {
    color: var(--c-muted, #6f6a62);
    font-weight: 600;
    font-size: 13px;
    padding-bottom: 6px;
    border-bottom: 1px solid #2c2b2a;
}

.stock-ok {
    color: #1a7f4b;
    font-weight: 600;
}

.stock-low {
    color: #a13b00;
    font-weight: 600;
}

/* --- Thema.dc.html: /operator/thema --- */
.thema-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.thema-grid {
    display: grid;
    grid-template-columns: 420px minmax(0, 1fr);
    gap: 24px;
}

.thema-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.thema-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
}

.thema-form input, .thema-form select {
    height: 40px;
    border: 1px solid #3a3835;
    border-radius: var(--radius, 4px);
    background: var(--c-surface, #f5f3ef);
    color: var(--c-text);
    padding: 0 10px;
    font-family: inherit;
}

.thema-color-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.thema-section-label {
    font-size: 12px;
    color: var(--c-muted, #6f6a62);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 6px;
}

.thema-contrast-warn {
    font-size: 13px;
    color: #a35c00;
}

.thema-contrast-ok {
    font-size: 13px;
    color: #1a7f4b;
}

.thema-preview-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.thema-preview {
    border: 1px solid var(--c-border, #e6e1d8);
    border-radius: var(--radius, 4px);
    padding: 1.5rem;
    flex-grow: 1;
}

.thema-preview-card {
    padding: 1rem;
    margin-bottom: 1rem;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* Blazor-foutbalk: standaard verborgen, wordt door Blazor getoond bij een echte circuit-fout. */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 12px 20px;
    background: #fff3d6;
    color: #8a5a00;
    border-top: 1px solid #e8c77a;
    font-size: 14px;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
}

#blazor-error-ui .reload {
    color: inherit;
    font-weight: 600;
    margin-left: 8px;
}

/* --- Werklijst.dc.html: /operator/werklijst --- */
.werklijst-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 18px;
}

.werklijst-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 18px;
}

.werklijst-filters select,
.werklijst-filters input[type="text"],
.werklijst-filters input[type="search"] {
    height: 36px;
    border-radius: var(--radius, 4px);
    border: 1px solid #3a3835;
    background: var(--c-surface, #f5f3ef);
    color: var(--c-text);
    font-family: inherit;
    padding: 0 10px;
}

/* Het zoekveld stond op de standaardbreedte van de browser (ongeveer 190px) omdat alleen de select
   was opgemaakt; het mag de overgebleven ruimte op de regel pakken. */
.werklijst-filters input[type="text"],
.werklijst-filters input[type="search"] {
    flex: 1 1 200px;
    min-width: 0;
}

.werklijst-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.werklijst-group {
    margin-bottom: 14px;
}

.werklijst-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--c-surface, #f5f3ef);
    border-radius: var(--radius, 4px);
}

.werklijst-row-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 200px;
}

.werklijst-row-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.werklijst-row-meta select {
    height: 32px;
    border-radius: var(--radius, 4px);
    border: 1px solid #3a3835;
    background: var(--c-card, #fff);
    color: var(--c-text);
    font-family: inherit;
    padding: 0 8px;
}

.werklijst-row-actions {
    display: flex;
    gap: 6px;
}

.werklijst-due-overdue {
    color: #a13b00;
    font-weight: 600;
    font-size: 13px;
}

.werklijst-block-form {
    display: flex;
    gap: 6px;
    width: 100%;
    margin-top: 6px;
}

.werklijst-block-form input {
    flex: 1;
    height: 36px;
    border-radius: var(--radius, 4px);
    border: 1px solid #3a3835;
    background: var(--c-card, #fff);
    color: var(--c-text);
    font-family: inherit;
    padding: 0 10px;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    float: right;
    padding: 0 8px;
}

.customer-brand-logo {
    height: 36px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
}

/* --- Voorraad.dc.html: /operator/voorraad --- */
.voorraad-notice {
    background: var(--c-card, #fff);
    border: 1px solid var(--c-border, #e6e1d8);
    border-left: 3px solid #8a7a5a;
    border-radius: var(--radius, 4px);
    padding: 10px 14px;
    font-size: 13px;
    color: var(--c-muted, #6f6a62);
    margin-bottom: 18px;
}

.voorraad-table.stock-table {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) repeat(4, minmax(0, 1fr));
    align-items: center;
    padding: 6px 0;
}

/* --- Team.dc.html: /operator/team --- */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.team-card-head h3 {
    font-size: 15px;
    margin-bottom: 2px;
}

.team-role-row {
    margin-top: 8px;
}

.team-role-row select {
    width: 100%;
    height: 36px;
    border-radius: var(--radius, 4px);
    border: 1px solid #3a3835;
    background: var(--c-surface, #f5f3ef);
    color: var(--c-text);
    font-family: inherit;
    padding: 0 10px;
}

.team-invite-card {
    margin-bottom: 20px;
}

.team-invite-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.team-invite-form input, .team-invite-form select {
    height: 36px;
    border-radius: var(--radius, 4px);
    border: 1px solid #3a3835;
    background: var(--c-surface, #f5f3ef);
    color: var(--c-text);
    font-family: inherit;
    padding: 0 10px;
}

.team-invite-form input[type="text"], .team-invite-form input[type="email"] {
    flex: 1;
    min-width: 160px;
}

.team-roles-explainer h3 {
    margin-bottom: 10px;
}

.team-roles-table {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr) minmax(0, 2fr);
    padding: 8px 0;
    align-items: start;
}


.landing-p4s-logo {
    width: 150px;
    height: auto;
    margin-bottom: 4px;
}

/* --- Topbalk: leverancier rechts, altijd zichtbaar --- */
.customer-nav {
    display: flex;
    align-items: center;
    gap: 22px;
}

.customer-supplier {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--c-muted, #6f6a62);
    text-decoration: none;
}

.customer-supplier-pill {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    /* Het logo is bijna zwart met een oranje accent en heeft een transparante achtergrond.
       Op een donkere pil viel het weg, dus hier een lichte ondergrond. */
    background: #fff;
    border: 1px solid #e6e1d8;
}

.customer-supplier-pill img {
    height: 20px;
    width: auto;
}

/* --- Voettekst --- */
.customer-footer {
    background: #1b1a17;
    color: #d9d5cf;
    padding: 32px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    font-size: 13px;
}

.customer-footer-brand {
    display: flex;
    align-items: center;
    gap: 16px;
}

.customer-footer-brand img {
    height: 34px;
    width: auto;
}

.customer-footer-brand span {
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #a9a5a0;
}

.customer-footer-links {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
}

.customer-footer a {
    color: #ffffff;
    text-decoration: none;
}

.customer-footer a:hover {
    color: var(--c-primary, #f39314);
}

/* =====================================================================
   Meeschalen met het scherm

   De opmaak hierboven gaat uit van een breed scherm: vaste tweekolomsroosters
   (320px + rest), pakketten naast elkaar in drieën en tabellen op volle breedte.
   Op een telefoon liepen die kolommen over elkaar heen. Hieronder klappen ze in,
   in twee stappen: tablet (<= 900px) en telefoon (<= 640px). Alleen breedte-
   eigenschappen, zodat de vormgeving zelf op één plek blijft staan.
   ===================================================================== */

@media (max-width: 1100px) {
    .package-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vandaag-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .landing-p4s {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    .customer-content {
        gap: var(--s-4);
    }

    .hero,
    .landing-hero,
    .landing-hero-light {
        padding-block: var(--s-6);
    }

    /* Twee kolommen naar één: team + pakket, formulier + voorbeeld, en de operatorschermen. */
    .start-grid,
    .order-grid,
    .overzicht-grid,
    .mijn-grid,
    .orders-layout,
    .thema-grid,
    .order-detail-columns,
    .vandaag-grid,
    .landing-hero-light {
        grid-template-columns: minmax(0, 1fr);
    }

    .start-grid {
        gap: 24px;
    }

    .order-grid {
        gap: 24px;
    }

    /* Anders maakt deze kaart een impliciete tweede kolom aan en blijft alles naast elkaar staan. */
    .overzicht-total {
        grid-column: auto;
    }

    .package-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* De aanbevolen kaart springt niet meer uit de rij als er maar één kolom is. */
    .package-card.featured {
        transform: none;
    }

    .hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .hero-stats {
        gap: 20px;
    }
}

@media (max-width: 640px) {
    .hero,
    .landing-hero,
    .landing-hero-light {
        padding-block: var(--s-5);
    }

    .customer-content > * {
        padding-inline: var(--s-4);
    }

    .customer-content > .hero,
    .customer-content > .landing-hero,
    .customer-content > .landing-hero-light,
    .customer-content > .flow-header {
        padding-inline: var(--s-4);
    }

    .customer-topbar {
        height: auto;
        min-height: 60px;
        padding: 10px 16px;
        gap: 10px;
    }

    .customer-brand-name {
        font-size: 16px;
    }

    .customer-nav {
        gap: 12px;
        font-size: 13px;
    }

    /* "Geleverd door" past er niet meer naast; het logo blijft staan. */
    .customer-supplier > span:first-child {
        display: none;
    }

    .customer-content {
        gap: var(--s-4);
    }

    .customer-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .customer-footer-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .landing-hero-light .landing-hero-text h1 {
        font-size: 30px;
    }

    .landing-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .landing-hero-actions .btn-primary-lg,
    .landing-hero-actions .btn-secondary-lg {
        text-align: center;
    }

    .landing-steps,
    .landing-audience-grid,
    .landing-p4s-stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero h1 {
        font-size: 26px;
    }

    /* De keuzelijst met verenigingen mag nooit breder zijn dan het scherm. */
    .club-picker-dropdown {
        max-width: 100%;
    }

    .preview-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .step-actions,
    .squad-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .step-actions .btn-choose,
    .squad-actions .btn-choose,
    .place-btn {
        width: 100%;
        align-self: stretch;
    }

    .squad-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .squad-toolbar select {
        width: 100%;
    }

    /* Spelerstabel wordt een lijst met kaarten: op 390px past een tabel met vijf
       kolommen niet, en horizontaal schuiven werkt slecht bij invoervelden. */
    .squad-table thead {
        display: none;
    }

    .squad-table,
    .squad-table tbody,
    .squad-table tr,
    .squad-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .squad-table tr {
        border-bottom: 1px solid #eee9e0;
        padding: 10px 12px;
    }

    .squad-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border-bottom: none;
        padding: 6px 0;
    }

    .squad-table td::before {
        content: attr(data-label);
        font-size: 13px;
        font-weight: 600;
        color: var(--c-muted, #6f6a62);
    }

    .squad-table td:empty {
        display: none;
    }

    .squad-table input,
    .squad-table select,
    .squad-table .size-select {
        width: 60%;
    }

    .squad-table .btn-choose {
        width: 100%;
    }

    /* Hier stond een min-width van 560px op .stock-table, met een .table-scroll-wikkel die het
       schuiven moest opvangen. Die wikkel is nooit in de opmaak gezet, dus de tabellen duwden de
       hele pagina 180 tot 200 pixels breder dan het scherm. De rastertabellen stapelen nu met hun
       kolomkop per waarde (zie onderaan dit bestand), dus zowel de min-width als de dode
       .table-scroll zijn weg. */

    .jaarlaag-chip {
        padding: 10px 14px;
        font-size: 14px;
    }

    .order-stepper {
        gap: 4px;
    }

    .order-stepper-label:not(.current) {
        display: none;
    }

    .order-stepper-line {
        min-width: 8px;
    }

    /* Statusbalk op /mijn: onder elkaar in plaats van een rij die het scherm uit loopt. */
    .status-track {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .status-step {
        flex: none;
        white-space: normal;
    }

    .status-step:not(:last-child)::after {
        display: none;
    }

    .team-grid,
    .vereniging-grid,
    .thema-color-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- Clublijst onder het zoekveld op de landingspagina --- */
.landing-clubs-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-top: 18px;
    font-size: 14px;
}

.landing-clubs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.landing-club {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e6e1d8;
    border-radius: var(--radius, 10px);
    background: var(--c-card, #fff);
    text-decoration: none;
    color: var(--c-text, #1b1a17);
}

.landing-club:hover {
    border-color: var(--c-primary, #f16c03);
}

.landing-club-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex: 0 0 auto;
}

.landing-club-logo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.landing-club-name {
    font-weight: 600;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Teamkeuze als kaart, zodat stap 1 dezelfde vorm heeft als de pakketkaarten in stap 2. */
.team-card {
    background: var(--c-card, #fff);
    border: 1px solid #e6e1d8;
    border-radius: var(--radius, 12px);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* --- Overzichtstap: twee kolommen, links wat je koos, rechts hoe het eruitziet en wat het kost --- */
.overzicht-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    padding: 8px 0 24px 0;
    align-items: start;
}

.overzicht-kolom {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.overzicht-wijzig {
    align-self: flex-start;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
}

.overzicht-prijs .overzicht-row span:last-child {
    white-space: nowrap;
}

.overzicht-row .hint {
    display: block;
}

/* --- Bevestigingspagina --- */
.placed-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: var(--c-card, #fff);
    border: 1px solid #e6e1d8;
    border-radius: var(--radius, 12px);
    padding: 24px;
}

.placed-head h1 {
    font-size: 28px;
    margin-bottom: 6px;
}

.placed-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #1f7a3d;
    color: #fff;
}

.placed-nummer {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 0 4px;
}

.placed-nummer-waarde {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
}

.placed-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 20px;
    align-items: start;
}

.placed-samenvatting,
.placed-preview,
.placed-stappen {
    background: var(--c-card, #fff);
    border: 1px solid #e6e1d8;
    border-radius: var(--radius, 12px);
    padding: 20px;
}

.placed-stappen ol {
    margin: 10px 0 0 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.placed-stappen li strong {
    display: block;
    font-size: 15px;
}

/* --- Kleine losse elementen uit de sponsor- en spelersstap --- */
.sponsor-cost-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--c-card, #fff);
    border: 1px solid #e6e1d8;
    border-left: 4px solid var(--c-primary, #f16c03);
    border-radius: var(--radius, 10px);
    padding: 12px 16px;
    margin-bottom: 4px;
    font-size: 14px;
}

.sponsor-cost-amount {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 18px;
}

.sponsor-add-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.package-sponsor-note {
    font-size: 12px;
    color: var(--c-muted, #6f6a62);
}

.squad-total-uitleg {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Demo-knop: hoort zichtbaar anders te zijn dan een echte knop, want hij hoort niet in productie. */
.btn-demo {
    border-style: dashed;
    color: var(--c-muted, #6f6a62);
    margin-top: 0;
}

@media (max-width: 900px) {
    .overzicht-layout,
    .placed-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- Leverancierslogo op donkere vlakken --------------------------------------------------
   passie4sports-logo.png is donkergrijs met oranje op een transparante achtergrond. Op de zwarte
   voettekst en in de donkere Passie4Sports-band was daar niets van te zien. Een lichte chip eronder
   houdt de huisstijlkleuren intact, in tegenstelling tot een filter dat alles wit maakt. --- */
.customer-footer-brand img,
.landing-p4s-logo {
    background: #fff;
    border-radius: 8px;
    padding: 8px 12px;
    box-sizing: content-box;
}

.landing-p4s-logo {
    width: 132px;
}

/* --- Kopband van een bestelstap (FlowHeader) ----------------------------------------------
   Donker blok met een oranje streep eronder, met de club als label, de titel van de stap en de
   stepper erin. Geeft de flow dezelfde ruggengraat als de conceptsite van Passie4Sports. --- */
.flow-header {
    background: var(--c-text, #1b1a17);
    color: #fff;
    border-bottom: 3px solid var(--c-primary, #f16c03);
    padding-block: var(--s-7) var(--s-5);
}

.flow-header-inner {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.flow-header h1 {
    font-size: clamp(26px, 3.2vw, 40px);
    line-height: 1.06;
    max-width: 24ch;
}

.flow-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-primary, #f16c03);
}

.flow-eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--c-primary, #f16c03);
    flex: none;
}

.flow-intro {
    max-width: 62ch;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
}

/* De stepper staat nu op een donkere ondergrond en moet daar leesbaar blijven. */
.flow-header .order-stepper {
    padding: var(--s-3) 0 0 0;
}

.flow-header .order-stepper-dot {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.35);
    color: rgba(255, 255, 255, 0.75);
}

.flow-header .order-stepper-dot.done {
    background: var(--c-primary, #f16c03);
    border-color: var(--c-primary, #f16c03);
    color: #fff;
}

.flow-header .order-stepper-dot.current {
    background: #fff;
    border-color: #fff;
    color: var(--c-text, #1b1a17);
}

.flow-header .order-stepper-label {
    color: rgba(255, 255, 255, 0.6);
}

.flow-header .order-stepper-label.current {
    color: #fff;
}

.flow-header .order-stepper-line {
    background: rgba(255, 255, 255, 0.25);
}

.flow-header .order-stepper-line.done {
    background: var(--c-primary, #f16c03);
}

/* --- Meelopende hulpkolom (FlowSidebar) --------------------------------------------------- */
.flow-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--s-6);
    align-items: start;
}

.flow-side {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    position: sticky;
    top: var(--s-5);
}

.flow-side-card {
    background: var(--c-card, #fff);
    border: 1px solid #e6e1d8;
    border-radius: var(--radius, 12px);
    padding: var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.flow-side-card-dark {
    background: var(--c-text, #1b1a17);
    border-color: var(--c-text, #1b1a17);
    color: #fff;
}

.flow-side-card-dark p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    margin: 0;
}

.flow-side-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-muted, #6f6a62);
}

.flow-side-card-dark .flow-side-label {
    color: var(--c-primary, #f16c03);
}

.flow-side-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}

.flow-side-steps li {
    display: flex;
    gap: var(--s-3);
    align-items: flex-start;
}

.flow-side-steps strong {
    display: block;
    font-size: 14px;
}

.flow-side-num {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    color: var(--c-primary, #f16c03);
    flex: none;
    min-width: 24px;
}

.flow-side-contact {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.flow-side-contact .btn-choose {
    width: 100%;
    margin-top: 0;
}

.flow-side-ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}

@media (max-width: 900px) {
    .flow-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .flow-side {
        position: static;
    }
}

/* Bladerbare beelden op de pakketkaart: laat zien wát je krijgt, te beginnen in de clubkleuren. */
/* De artikelen van het pakket: het eerste stuk groot, de rest als strip eronder. Verving een
   bladerbare reeks waarin het eerste beeld altijd dezelfde tekening was, waardoor elk pakket er
   hetzelfde uitzag. Vaste hoogte, zodat de drie kaarten even hoog blijven bij vier of zeven
   artikelen. */
.kit-vak {
    background: var(--c-surface, #f7f5f0);
    border-radius: var(--radius, 10px);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Staand vak: de productfoto's van Craft zijn 720 bij 900, dus in een liggend vak bleef er veel wit
   naast staan en werd het kledingstuk klein. */
.kit-hoofd {
    height: 190px;
    background: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
}

/* Vast raster van vier kolommen met ruimte voor twee rijen, ook als er maar vier artikelen zijn.
   Met een vrij uitlopende strip kreeg het Pro-pakket (zeven artikelen) drie rijen en de andere twee,
   waardoor alles eronder een halve regel verschoof. */
.kit-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    min-height: 104px;
    align-content: start;
}

.kit-bijschrift {
    font-size: 12px;
    color: var(--c-muted, #6f6a62);
    text-align: center;
    min-height: 16px;
}

.kit-tegel {
    width: auto;
    aspect-ratio: 1 / 1;
    background: #fff;
    border: 2px solid transparent;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    cursor: pointer;
}

.kit-tegel:hover {
    border-color: var(--c-border, #e6e1d8);
}

.kit-tegel.is-gekozen {
    border-color: var(--c-primary, #f16c03);
}

/* contain, niet cover: een shirt mag niet bijgesneden worden tot een lap stof. */
.kit-beeld {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.kit-hoofd svg,
.kit-tegel svg {
    width: 100%;
    height: 100%;
}

/* --- Kruimelpad in de topbalk -------------------------------------------------------------
   Op een clubpagina wees het logo naar diezelfde clubpagina, waardoor er geen weg terug was naar
   Cluborder. Nu staat links "Cluborder / <club>", met de club nog steeds als het gezicht. --- */
.customer-brand-bar {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-width: 0;
}

.customer-home {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    text-decoration: none;
    color: var(--c-muted, #6f6a62);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.customer-home:hover {
    color: var(--c-text, #1b1a17);
}

.customer-brand-badge-small {
    width: 26px;
    height: 26px;
    font-size: 10px;
}

.customer-brand-sep {
    color: #ccc5b8;
}

@media (max-width: 640px) {
    /* Op een telefoon blijft het bolletje staan als weg terug, de naam gaat eruit. */
    .customer-home > span:last-child {
        display: none;
    }

    .customer-brand-sep {
        display: none;
    }
}

/* Wat er precies in een pakket zit, in de woorden van Passie4Sports zelf. */
.package-description {
    margin: var(--s-2) 0 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--c-muted, #6f6a62);
    /* Ruimte voor vijf regels: de omschrijving van Complete is twee regels korter dan die van Basic
       en Pro, waardoor de streep en de artikellijst eronder op verschillende hoogtes begonnen. */
    min-height: 5lh;
}

/* ---------------------------------------------------------------------------
   Pakketbeheer (/operator/pakketten)
   Sjablonen per sport, en per vereniging wat zij daarvan erft of overschrijft.
   Regels zijn kaarten in plaats van een tabel, zodat ze op een telefoon onder
   elkaar passen zonder horizontaal te schuiven.
   --------------------------------------------------------------------------- */

.pak-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--c-border, #e6e1d8);
    flex-wrap: wrap;
}

.pak-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 14px;
    font: inherit;
    color: var(--c-muted, #6f6a62);
    cursor: pointer;
}

.pak-tab.is-active {
    color: var(--c-text, #1b1a17);
    border-bottom-color: var(--c-primary, #f16c03);
    font-weight: 600;
}

.pak-toolbar {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.pak-clubkiezer {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    min-width: 220px;
}

.pak-notice {
    background: rgba(241, 108, 3, 0.1);
    border-left: 3px solid var(--c-primary, #f16c03);
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 16px;
}

.pak-lijst {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pak-regel {
    border: 1px solid var(--c-border, #e6e1d8);
    border-radius: var(--radius, 10px);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pak-regel.is-verborgen {
    opacity: 0.55;
}

.pak-regel-hoofd {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.pak-prijs {
    margin-left: auto;
    font-weight: 600;
    white-space: nowrap;
}

.pak-regel-sub {
    color: var(--c-muted, #6f6a62);
    font-size: 14px;
}

.pak-regel-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--c-muted, #6f6a62);
}

.pak-regel-acties {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.pak-badge {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.pak-badge-erf { background: #eceae5; color: #55504a; }
.pak-badge-eigen { background: rgba(241, 108, 3, 0.15); color: #8a3d00; }
.pak-badge-uit { background: #e6e1d8; color: #6f6a62; }
.pak-badge-tip { background: var(--c-primary, #f16c03); color: #fff; }
.pak-badge-let { background: #fdf3e3; color: #7a5a1e; align-self: flex-start; white-space: normal; }

.pak-edit {
    margin-bottom: 20px;
    border-color: var(--c-primary, #f16c03);
}

.pak-scope {
    font-size: 13px;
    color: var(--c-muted, #6f6a62);
    margin: 0;
}

.pak-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.pak-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
}

.pak-form-wide {
    grid-column: 1 / -1;
}

.pak-form input[type="text"],
.pak-form input:not([type]),
.pak-form input[type="number"],
.pak-form select,
.pak-form textarea,
.pak-clubkiezer select {
    background: var(--c-surface, #f5f3ef);
    color: var(--c-text, #1b1a17);
    border: 1px solid var(--c-border, #e6e1d8);
    border-radius: 6px;
    padding: 8px 10px;
    font: inherit;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.pak-check {
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
}

.pak-check input {
    width: auto;
    flex: none;
}

.pak-prijshint {
    background: var(--c-surface, #f5f3ef);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 13px;
}

.pak-artikelen {
    border: 1px solid var(--c-border, #e6e1d8);
    border-radius: 8px;
    padding: 12px 14px;
}

.pak-artikelen legend {
    font-size: 13px;
    font-weight: 600;
    padding: 0 6px;
}

.pak-artikel-groep {
    margin-bottom: 10px;
}

.pak-artikel-groep h4 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-muted, #6f6a62);
    margin: 0 0 4px;
}

.pak-artikel-groep .pak-check {
    display: flex;
    font-size: 14px;
    padding: 2px 0;
}

.pak-acties {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .pak-prijs {
        margin-left: 0;
    }

    .pak-regel-acties button {
        flex: 1 1 auto;
    }
}

/* ---------------------------------------------------------------------------
   Bestellingenscherm (/operator/bestellingen)
   Een regel begint met vereniging en team en noemt het pakket; zoeken en filteren
   staan erboven. De statusknoppen dragen een uitleg van de volgende stap.
   --------------------------------------------------------------------------- */

.orders-zoek {
    height: 36px;
    width: 100%;
    border-radius: var(--radius, 4px);
    border: 1px solid #3a3835;
    background: var(--c-surface, #f5f3ef);
    color: var(--c-text);
    font-family: inherit;
    padding: 0 10px;
    box-sizing: border-box;
}

.orders-filter select {
    flex: 1 1 140px;
    min-width: 0;
}

.order-row-pakket {
    font-size: 14px;
}

.order-step-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-align: left;
    line-height: 1.25;
}

.order-step-uitleg {
    font-size: 12px;
    font-weight: 400;
    opacity: 0.8;
}

.order-detail-actions {
    flex-wrap: wrap;
}

.op-card-breed {
    grid-column: 1 / -1;
}

.op-note-invoer {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.op-note-invoer textarea {
    flex: 1 1 260px;
    min-width: 0;
    background: var(--c-surface, #f5f3ef);
    color: var(--c-text, #1b1a17);
    border: 1px solid var(--c-border, #e6e1d8);
    border-radius: 6px;
    padding: 8px 10px;
    font: inherit;
    resize: vertical;
}

.op-note {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 0;
    border-top: 1px solid var(--c-border, #e6e1d8);
    font-size: 14px;
}

.op-note.is-opmerking {
    border-left: 3px solid var(--c-primary, #f16c03);
    padding-left: 10px;
}

.op-note-kop {
    display: flex;
    gap: 8px;
    align-items: baseline;
    flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------
   Operatorschermen op telefoonformaat
   De zijbalk van 220px liet op een telefoon van 390px maar 170px over voor de
   inhoud, waardoor /operator, werklijst, voorraad, jaarlagen, team, verenigingen
   en bestellingen buiten het scherm liepen. Onder 900px wordt de zijbalk een
   liggende, schuifbare balk boven de pagina.
   --------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .operator-shell {
        flex-direction: column;
    }

    .operator-sidebar {
        width: 100%;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 8px 0;
        border-right: none;
        border-bottom: 1px solid #2c2b2a;
        position: sticky;
        top: 0;
        z-index: 20;
    }

    .operator-brand {
        padding: 0 14px;
        flex-direction: row;
        align-items: center;
        flex-shrink: 0;
    }

    .operator-brand img {
        width: 96px;
    }

    /* "Team- en workwear specialist" past niet naast de navigatie en zegt hier niets. */
    .operator-brand-sub {
        display: none;
    }

    .operator-nav {
        flex-direction: row;
        gap: 0;
        flex: 1;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .operator-nav::-webkit-scrollbar {
        display: none;
    }

    .operator-nav a {
        padding: 8px 12px;
        white-space: nowrap;
        border-left: none;
        border-bottom: 3px solid transparent;
    }

    .operator-nav a.active {
        border-left-color: transparent;
        border-bottom-color: var(--c-primary, #f39314);
    }

    .operator-content {
        padding: 18px 16px;
    }

    /* De bestellijst hangt met negatieve marges aan de rand van de inhoud; die moeten
       meelopen met de kleinere padding, anders steekt de lijst buiten het scherm. */
    .orders-layout {
        margin: -18px -16px;
        min-height: 0;
    }

    .orders-list-pane {
        border-right: none;
        border-bottom: 1px solid #2c2b2a;
        padding: 16px 0;
    }

    .order-detail-pane {
        padding: 18px 16px;
    }

    .vandaag-head,
    .werklijst-head,
    .orders-list-head {
        flex-wrap: wrap;
    }
}

@media (max-width: 640px) {
    .operator-content {
        padding: 14px 12px;
    }

    .orders-layout {
        margin: -14px -12px;
    }

    .order-detail-pane,
    .orders-list-pane {
        padding-inline: 0;
    }

    .order-detail-pane {
        padding: 14px 12px;
    }

    .op-card,
    .op-panel {
        padding: 14px 14px;
    }

    /* Kolomkoppen naast elk getal zetten in plaats van een raster van vier kolommen
       dat op 390px in stukken breekt. */
    .stock-table {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .stock-table span:nth-child(4) {
        display: none;
    }

    .op-task-row,
    .op-delivery-row,
    .werklijst-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .werklijst-row-actions,
    .werklijst-row-meta {
        flex-wrap: wrap;
    }

    .order-detail-actions button {
        flex: 1 1 100%;
    }
}

/* Een tabel kan niet afbreken; laat hem binnen zijn eigen kaart schuiven in plaats van
   de hele pagina breder te maken. */
.op-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.op-table-scroll > table {
    min-width: 520px;
}

/* Melding dat de spelerslijst tussentijds bewaard is. Bewust rustig: het is een bevestiging,
   geen waarschuwing, en hij staat naast de knoppen boven de tabel. */
.squad-bewaard {
    margin-left: auto;
    font-size: 13px;
    color: var(--c-muted, #6f6a62);
    align-self: center;
}

.squad-bewaard.is-bezig {
    opacity: 0.6;
}

@media (max-width: 640px) {
    .squad-bewaard {
        margin-left: 0;
        width: 100%;
    }
}

@media (max-width: 640px) {
    /* Zes kolommen voorraad en drie kolommen rolbeschrijving passen niet naast elkaar op 390px en
       maakten de hele pagina 180 tot 200 pixels te breed. Onder elkaar zetten met de kolomkop ervoor,
       dezelfde aanpak als de spelerstabel in de klantflow. */
    .voorraad-table.stock-table,
    .team-roles-table.stock-table {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
        padding: 10px 0;
        border-bottom: 1px solid var(--c-border, #e6e1d8);
    }

    .voorraad-table.stock-table > span[data-label],
    .team-roles-table.stock-table > span[data-label] {
        display: flex;
        gap: 8px;
        justify-content: space-between;
        align-items: baseline;
    }

    .voorraad-table.stock-table > span[data-label]::before,
    .team-roles-table.stock-table > span[data-label]::before {
        content: attr(data-label);
        font-size: 13px;
        font-weight: 600;
        color: var(--c-muted, #6f6a62);
        flex: none;
    }

    /* De kolomkoppenrij zegt niets meer als elke waarde zijn eigen kop draagt. */
    .voorraad-table.stock-table-head,
    .team-roles-table.stock-table-head {
        display: none;
    }
}

@media (max-width: 640px) {
    /* Vijf statusstappen naast elkaar vragen ruim 560px; op een telefoon lopen ze over de rand.
       Ze breken nu af over twee regels, zonder het verbindingsstreepje dat dan nergens heen loopt. */
    .op-status-track {
        flex-wrap: wrap;
        gap: 8px 14px;
        padding: 12px 14px;
    }

    .op-status-step {
        flex: 0 0 auto;
        min-width: 0;
    }

    .op-status-step:not(:last-child)::after {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   Offerte (/operator/bestellingen/{id}/offerte en het blok op /mijn/bestellingen/{id})
   Zelfde kolommen als op papier: artikel, omschrijving, aantal, prijs, korting,
   btw, totaal. Op een telefoon stapelen de cellen met hun kolomkop ervoor.
   --------------------------------------------------------------------------- */

.of-tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.of-tabel th,
.of-tabel td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--c-border, #e6e1d8);
    vertical-align: top;
}

.of-tabel th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-muted, #6f6a62);
}

.of-tabel .of-num {
    text-align: right;
}

.of-tabel td .muted-i {
    display: block;
    font-size: 12px;
}

.of-tabel input {
    background: var(--c-surface, #f5f3ef);
    color: var(--c-text, #1b1a17);
    border: 1px solid var(--c-border, #e6e1d8);
    border-radius: 6px;
    padding: 6px 8px;
    font: inherit;
    width: 100%;
    box-sizing: border-box;
}

.of-tabel .of-kort {
    width: 5.5rem;
    text-align: right;
}

.of-kop .pak-form {
    margin-bottom: 4px;
}

.of-verstuurd {
    background: var(--c-surface, #f5f3ef);
    border-radius: 6px;
    padding: 10px 14px;
    margin: 0;
    font-size: 14px;
}

.of-totalen .overzicht-row {
    max-width: 30rem;
    margin-left: auto;
}

.of-vergelijk {
    font-size: 13px;
    color: var(--c-muted, #6f6a62);
    border-top: 1px solid var(--c-border, #e6e1d8);
    padding-top: 10px;
}

.of-acties {
    margin-bottom: 24px;
}

/* Klantkant: de offerte plus het akkoord. */
.of-klant {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.of-akkoordblok {
    border-top: 1px solid var(--c-border, #e6e1d8);
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.of-akkoordblok label,
.of-afwijzen label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
}

.of-akkoordblok input,
.of-afwijzen input {
    background: var(--c-surface, #f5f3ef);
    color: var(--c-text, #1b1a17);
    border: 1px solid var(--c-border, #e6e1d8);
    border-radius: 6px;
    padding: 10px 12px;
    font: inherit;
    width: 100%;
    box-sizing: border-box;
}

.of-akkoordknoppen,
.of-afwijzen {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.of-afwijzen {
    flex-direction: column;
    align-items: stretch;
}

.of-akkoord {
    font-weight: 600;
}

@media (max-width: 640px) {
    .of-tabel thead {
        display: none;
    }

    .of-tabel tr {
        display: block;
        border-bottom: 1px solid var(--c-border, #e6e1d8);
        padding: 8px 0;
    }

    .of-tabel td {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        align-items: center;
        border: none;
        padding: 4px 0;
        text-align: left;
    }

    .of-tabel td::before {
        content: attr(data-label);
        font-size: 13px;
        font-weight: 600;
        color: var(--c-muted, #6f6a62);
        flex: none;
    }

    .of-tabel td:not([data-label]) {
        justify-content: flex-end;
    }

    .of-tabel .of-kort,
    .of-tabel input {
        width: 55%;
    }

    .of-totalen .overzicht-row {
        max-width: none;
    }
}

/* Sportbalk boven de sjablonen: één sport per keer in plaats van negen lijsten onder elkaar. */
.pak-sportbalk {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.pak-sportchip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--c-border, #e6e1d8);
    background: var(--c-card, #fff);
    color: var(--c-text, #1b1a17);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.pak-sportchip:hover {
    border-color: var(--c-primary, #f16c03);
}

.pak-sportchip.is-active {
    background: var(--c-primary, #f16c03);
    border-color: var(--c-primary, #f16c03);
    color: #fff;
    font-weight: 600;
}

.pak-sportchip-aantal {
    font-size: 12px;
    opacity: 0.7;
}

/* ---------------------------------------------------------------------------
   Bestellingen als werklijst (/operator/bestellingen)
   Was een smalle lijst naast een detailpaneel. Met vijftig bestellingen is dat te
   weinig context, dus nu een volle tabel met sorteren, filteren, paginering en
   bulkacties; het detail heeft een eigen pagina.
   --------------------------------------------------------------------------- */

.best-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 16px;
}

.best-filters select,
.best-zoek {
    height: 38px;
    border-radius: var(--radius, 6px);
    border: 1px solid var(--c-border, #e6e1d8);
    background: var(--c-card, #fff);
    color: var(--c-text, #1b1a17);
    font: inherit;
    padding: 0 10px;
}

.best-zoek {
    flex: 1 1 280px;
    min-width: 0;
}

.best-bulk {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: rgba(241, 108, 3, 0.1);
    border-left: 3px solid var(--c-primary, #f16c03);
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 14px;
}

.best-tabel-kaart {
    padding: 0;
    overflow: hidden;
}

.best-tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.best-tabel th,
.best-tabel td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--c-border, #e6e1d8);
    vertical-align: top;
}

.best-tabel th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-muted, #6f6a62);
    white-space: nowrap;
    background: var(--c-surface, #f5f3ef);
    position: sticky;
    top: 0;
    z-index: 1;
}

.best-tabel .best-num {
    text-align: right;
    white-space: nowrap;
}

.best-tabel .best-kies {
    width: 34px;
}

.best-tabel tr.is-gekozen {
    background: rgba(241, 108, 3, 0.07);
}

.best-tabel tbody tr:hover {
    background: var(--c-surface, #f5f3ef);
}

.best-link {
    color: inherit;
    text-decoration: none;
    display: block;
}

.best-link:hover {
    color: var(--c-primary, #f16c03);
}

.best-tabel td .muted-i {
    display: block;
    font-size: 12px;
}

.best-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eceae5;
    color: #55504a;
    font-size: 12px;
    white-space: nowrap;
}

.best-status-QuoteRequested,
.best-status-Placed { background: #fdf3e3; color: #7a5a1e; }
.best-status-QuoteSent { background: #e8f0fb; color: #24507f; }
.best-status-InProduction,
.best-status-Shipped { background: rgba(241, 108, 3, 0.15); color: #8a3d00; }
.best-status-Delivered { background: #e4f4ea; color: #1a7f4b; }
.best-status-Cancelled { background: #f6e7e7; color: #8a2a2a; }

.best-te-laat {
    color: #a13b00;
    font-weight: 600;
}

.best-paging {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    margin: 16px 0 24px;
}

@media (max-width: 900px) {
    /* Tien kolommen passen niet op een telefoon; elke rij wordt een kaartje met de kolomkop
       voor de waarde, dezelfde aanpak als de voorraad- en offertetabellen. */
    .best-tabel thead {
        display: none;
    }

    .best-tabel tr {
        display: block;
        border-bottom: 1px solid var(--c-border, #e6e1d8);
        padding: 10px 12px;
    }

    .best-tabel td {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        border: none;
        padding: 3px 0;
    }

    .best-tabel td::before {
        content: attr(data-label);
        font-size: 13px;
        font-weight: 600;
        color: var(--c-muted, #6f6a62);
        flex: none;
    }

    .best-tabel td[data-label=""]::before {
        content: none;
    }

    .best-tabel .best-num {
        text-align: right;
    }
}

.squad-toevoegen {
    display: flex;
    margin-top: var(--s-3);
}