: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;
    /* Zonder dit weigert een flex-item te krimpen tot onder de breedte van zijn inhoud, en dan loopt
       de clubnaam op een smalle telefoon over de navigatie ernaast heen in plaats van in te korten. */
    min-width: 0;
}

.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;
    flex-shrink: 0;
}

.customer-brand-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 18px;
    /* Zelfde reden als hierboven: dit is het stuk dat daadwerkelijk over "Andere vereniging" heen
       liep. Nu krimpt de naam mee en breekt hij af met puntjes in plaats van te overlappen. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.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;
    }
}

/* Wie er is ingelogd, plus uitloggen, boven de navigatie. Onderaan de zijbalk viel dit bij een lange
   pagina buiten beeld, en dan is niet te zien of je nog ingelogd bent. */
.operator-account {
    /* Naam boven de knop: de zijbalk is 220 pixels breed, en naast elkaar werd "Ingelogd als passie"
       afgekapt tot "Ingelogd als pa...". */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 0 20px 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid #2c2b2a;
}

.operator-account-naam {
    font-size: 12px;
    color: #a9a5a0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.operator-account 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;
    width: 100%;
    box-sizing: border-box;
    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;
}

.team-number-select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

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

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

/* Teamkeuze als lopende zin: "Ik bestel voor [jaarlaag] team [nummer]", twee velden onder elkaar
   i.p.v. naast elkaar. Op 390px staat elk veld op volle breedte, op een groter scherm nooit breder
   dan 390px zodat de zin leesbaar blijft. */
.team-choice {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 390px;
}

.team-choice-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text, #1b1a17);
}

.team-choice-confirm {
    font-size: 15px;
    margin: 0;
}

.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;
}

/* Wat er in het pakket zit, onder de pakketregel (punt 3): opsomming zonder bedrag, want dat bedrag
   staat al op de pakketregel erboven verrekend. Kleiner en gedempt zodat het duidelijk ondergeschikt
   oogt aan de bedragregels eromheen. */
.pakket-inhoud {
    margin: 0 0 4px 0;
    padding-left: 20px;
    font-size: 13px;
    color: var(--c-muted, #6f6a62);
}

.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 {
    /* Vast vak in plaats van alleen een max-breedte/-hoogte: zonder een echte breedte en hoogte doet
       object-fit: contain niets (een los max-height/max-width laat een <img> toch gewoon zijn eigen
       verhouding volgen), en varieerde de miniatuur van 18px breed voor een hoog logo tot 160px breed
       voor een liggend logo -- op een lijst met meerdere sponsors oogde dat rommelig. Nu past elk logo,
       ongeacht de verhouding, netjes en gecentreerd in hetzelfde vak.
    */
    width: 160px;
    height: 72px;
    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;
}

.status-OnHold {
    background: #fff0ce;
    color: #784d00;
}

.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;
}

/* Eén kaart per bestelling, met de meldingen erin. De kleur van de rand is die van de zwaarste
   melding in de kaart. */
.alert-card {
    border: 1px solid var(--c-border, #e6e1d8);
    border-left: 3px solid #8a7a5a;
    border-radius: var(--radius, 4px);
    background: var(--c-card, #ffffff);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.alert-card.alert-Critical {
    border-left-color: #c4563f;
}

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

.alert-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.alert-card-kop {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-grow: 1;
    min-width: 0;
}

/* Eén melding binnen de kaart: stip, tekst, en de knop om hem weg te zetten. */
.alert-melding {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 6px;
    background: var(--c-surface, #f5f3ef);
}

.alert-melding .alert-msg {
    flex-grow: 1;
    min-width: 0;
}

.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"] {
    /* 44px: op een iPad (1024x768/768x1024) was 36px te krap om zonder mikken te raken. */
    height: 44px;
    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 {
    /* Was 32px: samen met de knoppen ernaast (36px) het krapste raakvlak op de werklijst. */
    height: 44px;
    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;
    align-items: center;
    gap: 8px;
}

.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: 44px;
    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. */

    .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;
}

/* Staat nu bovenaan placed-head, boven de titel, in plaats van als los regeltje eronder: het
   bestelnummer mag net zo groot binnenkomen als de status zelf (punt 2). display:block zet hem op
   een eigen regel boven de h1 in plaats van er (als span) tegenaan te schurken. */
.placed-nummer-waarde {
    display: block;
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 2px;
}

.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;
}

/* De persoonlijke link op de bevestiging (punt 2): link en kopieerknop naast elkaar op een breed
   scherm, onder elkaar zodra ze niet meer naast elkaar passen (dezelfde flex-wrap-aanpak als elders
   in dit bestand voor twee elementen op één regel). */
.placed-link-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* --- 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%;
}

/* Het samengestelde beeld: kleding naast elkaar in gelijke cellen, teamartikelen als kleinere rij
   eronder. Vult de volledige .kit-hoofd. */
.kit-compositie {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Dezelfde rij kleding, twee keer gebruikt: groot als onderdeel van .kit-compositie, en als losse
   mini-versie die de hele .kit-tegel vult in de strip (zie het bijschrift in KitPreview.razor).
   grid-template-rows: minmax(0, 1fr) is nodig, anders sizet de grid-rij zichzelf op de langste foto
   (de broek, 428x1200) in plaats van op de beschikbare hoogte: dan groeide de broek dwars door de
   teamrij eronder heen. */
.kit-compositie-kleding,
.kit-compositie-mini {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 6px;
    min-height: 0;
}

.kit-compositie-kleding {
    flex: 1;
}

.kit-compositie-mini {
    width: 100%;
    height: 100%;
}

/* Onderkant gelijk, ondanks dat jas (750x1000), broek (428x1200) en rugzak (1200x1200) alle drie een
   andere verhouding hebben: elke cel is even hoog, het beeld erin krimpt naar zijn eigen verhouding
   en zakt naar de onderkant van de cel. */
.kit-compositie-cel {
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.kit-compositie-cel img,
.kit-compositie-cel svg {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.kit-compositie-team {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px;
}

.kit-compositie-teamitem {
    width: 26px;
    height: 100%;
}

.kit-compositie-team-label {
    font-size: 10px;
    color: var(--c-muted, #6f6a62);
    white-space: nowrap;
}

/* --- 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 {
    /* .op-card staat op display:flex, en zijn kinderen krijgen daardoor standaard de volle breedte
       (align-items: stretch). Zodra een kind een auto-marge op de dwarse as krijgt (hier margin-left,
       om de rij naar rechts te duwen) telt die stretch niet meer mee en valt het kind terug op zijn
       eigen inhoudsbreedte. Dan heeft .overzicht-row zelf (display:flex, justify-content:space-between)
       geen ruimte meer om label en bedrag uit elkaar te zetten, en plakken ze aan elkaar vast
       ("Offertebedrag€1527,82"). width:100% zet de breedte weer expliciet vast, zodat max-width de rij
       nog steeds afkapt op 30rem maar de rij daarbinnen wel zijn volle breedte krijgt. */
    width: 100%;
    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-refresh {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.werkorder-editor {
    max-width: 1100px;
    margin: 16px auto;
    padding: 16px;
    border: 1px solid var(--c-border, #e6e1d8);
    border-radius: 12px;
}

.werkorder-editor > summary {
    cursor: pointer;
    font-weight: 600;
    min-height: 44px;
    align-content: center;
}

.best-tabel td:last-child a {
    white-space: nowrap;
}

.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;
    }

    .op-table-scroll > table.best-tabel,
    .best-tabel tbody {
        display: block;
        width: 100%;
        min-width: 0;
    }

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

    .best-tabel td {
        display: block;
        position: relative;
        text-align: right;
        border: none;
        padding: 3px 0 3px 110px;
        min-height: 26px;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .best-tabel td::before {
        content: attr(data-label);
        font-size: 13px;
        font-weight: 600;
        color: var(--c-muted, #6f6a62);
        position: absolute;
        left: 0;
        text-align: left;
        max-width: 100px;
    }

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

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

    .best-tabel .best-kies {
        width: auto;
        padding-left: 0;
        text-align: left;
    }

    .best-tabel .best-status {
        white-space: normal;
    }
}

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

/* Datum per stap op /bestelling/{token} (docs/09-bestelproces-plan.md, Blok 6): de bestaande
   .status-step toont alleen een label, dus het label en de datum staan hier onder elkaar in plaats van
   naast elkaar. */
.status-step-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.status-step-date {
    font-size: 11px;
    font-weight: 400;
    color: var(--c-muted, #6f6a62);
}

/* ---------------------------------------------------------------------------
   Werklijst: tikformaat, nieuwe taak, werkvolgordewaarschuwing (docs/09, blok 5)
   .btn-op-primary/.btn-op-secondary zelf blijven ongemoeid (die worden op elk
   operatorscherm gebruikt); deze regels verhogen het raakvlak alleen binnen de
   werklijst, waar op een iPad "Gereed" en "Blokkeren" vroeger 36px hoog waren en
   pal naast elkaar stonden.
   --------------------------------------------------------------------------- */
.werklijst-row-actions .btn-op-primary,
.werklijst-row-actions .btn-op-secondary,
.werklijst-block-form .btn-op-primary,
.werklijst-block-form .btn-op-secondary,
.werklijst-head-acties .btn-op-primary,
.werklijst-group-acties .btn-op-secondary,
.werklijst-nieuwe-taak .btn-op-primary {
    min-height: 44px;
}

/* Blokkeren staat los van Gereed/Starten met een verticale lijn en extra ruimte: twee acties met heel
   verschillende gevolgen mogen niet even ver van je duim af liggen. */
.werklijst-actie-risico {
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid var(--c-border, #cfc9bf);
}

.werklijst-head-acties {
    display: flex;
    align-items: center;
    gap: 14px;
}

.werklijst-group-acties {
    display: flex;
    align-items: center;
    gap: 10px;
}

.werklijst-nieuwe-taak {
    margin-bottom: 18px;
}

.werklijst-nieuwe-taak-velden {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
}

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

.werklijst-nieuwe-taak-velden input[type="text"] {
    flex: 1 1 220px;
    min-width: 0;
}

/* Niet-blokkerende melding: een taak op Gereed zetten terwijl een eerdere stap nog openstaat mag,
   maar verdient wel een duidelijk signaal. Amber, niet rood: het is geen foutmelding. */
.werklijst-warning {
    color: #7a5a10;
    background: #fbf1dd;
    border: 1px solid #e8cf9a;
    border-radius: var(--radius, 4px);
    padding: 8px 12px;
    font-size: 14px;
}

/* ---------------------------------------------------------------------------
   Werkorder (printbare werkbon per bestelling, docs/09 blok 5)
   Eigen, kale pagina (WerkorderLayout, geen operatorzijbalk) plus dit blok: het
   schermbeeld is een simpele lijst, het printbeeld zet 'm op A4 en verbergt de
   knoppenbalk. Twee vangrails in plaats van één, want een medewerker kan deze
   pagina ook per ongeluk vanaf het scherm afdrukken zonder de printknop.
   --------------------------------------------------------------------------- */
.werkorder-acties {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px;
}

.werkorder {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 16px 32px;
    font-family: inherit;
    color: #1b1a17;
}

.werkorder-kop {
    border-bottom: 2px solid #1b1a17;
    padding-bottom: 12px;
    margin-bottom: 20px;
}

.werkorder-kop h1 {
    margin: 0 0 6px;
    font-size: 22px;
}

.werkorder-kop-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
}

.werkorder-sectie {
    margin-bottom: 22px;
}

.werkorder-sectie h2 {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

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

.werkorder-tabel th,
.werkorder-tabel td {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid #cfc9bf;
}

.werkorder-voetnoot {
    margin-top: 24px;
    font-size: 12px;
}

@media print {
    /* Alles wat geen picklijst is verdwijnt: de printknop zelf heeft niets te zoeken op papier, en dit
       verbergt ook meteen de operator- of klantnavigatie mocht deze view ooit ergens binnen die chrome
       gerenderd worden. */
    .werkorder-noprint,
    .operator-sidebar,
    .customer-topbar {
        display: none !important;
    }

    @page {
        size: A4;
        margin: 14mm;
    }

    /* De witte achtergrond zelf (html én body, anders blijft het beige vlak van --c-surface achter de
       inhoud staan) zet WerkorderLayout.razor al neer via HeadContent, zowel op scherm als in print;
       hier dus niet nog eens overschrijven. */

    .werkorder {
        max-width: none;
        margin: 0;
        padding: 0;
    }

    /* Eén artikel- of spelersrij die over een paginagrens knipt is onleesbaar op papier. */
    .werkorder-tabel tr {
        break-inside: avoid;
    }
}

/* ---------------------------------------------------------------------------
   Operatornavigatie op 768px breed (staand tablet, gemeten met Playwright)
   De bestaande @media(max-width:900px)-regel hierboven maakt van de zijbalk een
   liggende, schuifbare balk en verbergt de scrollbalk (scrollbar-width:none).
   Op 768px is de balk 485px breed maar de navigatie 835px: "Pakketten",
   "Verenigingen", "Jaarlagen", "Team" en "Huisstijl" vallen buiten beeld zonder
   dat er iets op het scherm verraadt dat er meer te vinden is. Deze nieuwe regel
   wijzigt die eerdere regel niet (die blijft van een ander bestandsonderdeel),
   maar wint door zijn latere plek in het bestand en zet er een dunne, zichtbare
   schuifbalk voor terug: het bekende signaal dat een strook meer inhoud heeft.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .operator-nav {
        scrollbar-width: thin;
    }

    .operator-nav::-webkit-scrollbar {
        display: block;
        height: 4px;
    }

    .operator-nav::-webkit-scrollbar-thumb {
        background: rgba(245, 243, 239, 0.4);
        border-radius: 2px;
    }
}

/* ---------------------------------------------------------------------------
   Operatornavigatie op 390px breed (telefoon, gemeten met Playwright)
   Op 768px hierboven is een dunne schuifbalk genoeg signaal dat er meer te
   vinden is, maar op een telefoon van 390px is de balk zo krap dat na
   "Vandaag" alleen nog een afgekapte "W" van "Werklijst" zichtbaar is: de
   schuifbalk verraadt dan niet dat er nog meer items verborgen zitten, en
   niemand veegt daar blind naar op de tast. Deze regel wijzigt de eerdere
   regels niet, maar wint door zijn latere plek in het bestand: onder 480px
   klapt de navigatie om naar meerdere regels in plaats van te scrollen, zodat
   alle items zonder te vegen bereikbaar zijn. De zwarte merkbalk zelf (logo,
   achtergrondkleur) blijft ongewijzigd.
   --------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .operator-sidebar {
        flex-wrap: wrap;
    }

    .operator-nav {
        flex-basis: 100%;
        flex-wrap: wrap;
        justify-content: center;
        overflow-x: visible;
    }

    .operator-nav a {
        padding: 6px 10px;
    }
}

/* Sponsorstap: bestandsveld altijd zichtbaar, en facturatiegegevens per sponsor
   (docs/09-bestelproces-plan.md, blok 2). Het bestandsveld had eerder geen eigen
   stijl nodig (het stond al in .sponsor-card), maar het label eromheen wel.
   --------------------------------------------------------------------------- */
.sponsor-logo-upload-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
}

.sponsor-billing {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid #e6e1d8;
}

.sponsor-billing-label {
    font-weight: 600;
    font-size: 14px;
}

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

.sponsor-billing-grid label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
}

.sponsor-billing-grid input {
    height: 40px;
    box-sizing: border-box;
    border: 1px solid #ccc5b8;
    border-radius: var(--radius, 8px);
    padding: 0 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    background: var(--c-card, #fff);
    color: var(--c-text, #1b1a17);
}

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

@media (max-width: 640px) {
    .sponsor-billing-grid {
        grid-template-columns: 1fr;
    }
}

/* Facturatiegegevens in het sponsorblok van het operatorscherm: vier regels onder
   elkaar, net zo compact als de andere op-task-row-teksten in dat blok. */
.sponsor-billing-op {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid #e6e1d8;
}

/* Bedrag per sponsor (i.p.v. één totaal over alle plekken samen), overzichtstap. */
.sponsor-amount {
    font-weight: 700;
}

/* Blok 3: "Bewaren en later verder" op het overzicht van de bestelflow.
   Naast de terugknop staan nu twee acties in plaats van één; deze groepeert ze
   rechts zodat "Teambestelling plaatsen" het hoofddoel blijft en "Bewaren" er
   rustig naast staat, in plaats van ertussenin zoals .step-actions se eigen
   justify-content:space-between met drie kinderen zou doen.
   --------------------------------------------------------------------------- */
.step-actions-right {
    display: flex;
    align-items: center;
    /* Minstens 16px tussen "Bewaren en later verder" en de plaatsknop: te dicht op elkaar liet het lezen
       als één keuze, terwijl het gevolg heel verschillend is (Blok 3, punt 3). */
    gap: var(--s-4, 16px);
}

/* De bewaarlink draagt een sleutel van ~43 tekens; zonder word-break loopt hij op
   een smal scherm uit de kaart. */
.bewaar-link {
    word-break: break-all;
}

@media (max-width: 640px) {
    /* Zelfde reden als de .step-actions-regel eerder in dit bestand: twee knoppen
       met lange tekst naast elkaar passen niet op 390px, en .btn-choose breekt zijn
       tekst niet af (white-space: nowrap). */
    .step-actions-right {
        /* column-reverse: de plaatsknop staat in de opmaak na de bewaarknop, maar hoort op een smal
           scherm bovenaan te staan (Blok 3, punt 3). */
        flex-direction: column-reverse;
        align-items: stretch;
        width: 100%;
    }
}

/* Besteldetail: op wacht, leverdatum, orderregels, spelers zoeken (docs/09,
   blok 4). Hergebruikt .op-card/.op-task-row/.btn-op* uit dit bestand; deze
   regels voegen alleen toe wat er nog niet was.
   --------------------------------------------------------------------------- */
.op-onhold-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: #fbf1dd;
    border: 1px solid #e8cf9a;
    border-left: 4px solid #b8871a;
    border-radius: var(--radius, 4px);
    padding: 12px 16px;
    margin-bottom: 16px;
}

.op-onhold-banner div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.best-onhold {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fbf1dd;
    color: #7a5a10;
    border: 1px solid #e8cf9a;
    font-size: 12px;
    white-space: nowrap;
}

/* Eén klein formulier dat inline opent onder een knop (op wacht zetten, leverdatum, een orderregel
   wijzigen, een speler een andere maat geven...). Steeds dezelfde vorm, dus één regel in plaats van een
   losse klasse per plek waar zo'n formulier voorkomt. */
.op-inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
    padding: 10px 12px;
    background: var(--c-surface, #f5f3ef);
    border-radius: var(--radius, 4px);
}

.op-inline-form textarea {
    min-width: 0;
    background: var(--c-card, #fff);
    color: var(--c-text, #1b1a17);
    border: 1px solid var(--c-border, #e6e1d8);
    border-radius: 6px;
    padding: 8px 10px;
    font: inherit;
    resize: vertical;
}

.op-inline-form input[type="text"],
.op-inline-form input[type="number"],
.op-inline-form input[type="date"],
.op-inline-form select {
    height: 44px;
    min-width: 0;
    background: var(--c-card, #fff);
    color: var(--c-text, #1b1a17);
    border: 1px solid var(--c-border, #e6e1d8);
    border-radius: 6px;
    padding: 0 10px;
    font: inherit;
}

/* Flex bases size controls across the horizontal form row, never vertically inside a label. */
.op-inline-form > textarea {
    flex: 1 1 100%;
}

.op-inline-form > input[type="number"] {
    flex: 0 1 90px;
}

.op-inline-form > input[type="text"] {
    flex: 1 1 200px;
}

.op-inline-form-acties {
    display: flex;
    gap: 8px;
    flex: 1 1 100%;
}

/* Eén orderregel als kaartje: aantal, prijs en de acties eronder, in plaats van een raster met vaste
   kolommen dat op 390px breed in stukken breekt. */
.regel-kaart {
    padding: 10px 12px;
    background: var(--c-surface, #f5f3ef);
    border-radius: var(--radius, 4px);
    margin-bottom: 8px;
}

.regel-kaart-kop {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 6px;
}

.regel-kaart-acties {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

/* Verwijderen staat los van Wijzig/Uitleveren, zelfde reden als .werklijst-actie-risico hierboven: een
   verwijdering heeft heel andere gevolgen dan de knoppen ervoor en verdient geen plek pal ernaast. */
.regel-kaart-risico {
    margin-left: 4px;
    padding-left: 10px;
    border-left: 1px solid var(--c-border, #cfc9bf);
}

.speler-row {
    flex-wrap: wrap;
}

.spelers-zoek {
    height: 44px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 8px;
    background: var(--c-card, #fff);
    color: var(--c-text, #1b1a17);
    border: 1px solid var(--c-border, #e6e1d8);
    border-radius: 6px;
    padding: 0 12px;
    font: inherit;
}

/* Tikformaat: dezelfde norm als de werklijst hierboven (44px), nu ook voor de nieuwe knoppen op het
   besteldetail (Wijzig/Uitleveren/Verwijder per orderregel, Wijzig maat per speler, Bewaren/Annuleren in
   elk inline formulier, en Van wacht halen in de banner). */
.regel-kaart-acties .btn-op-secondary,
.op-inline-form-acties .btn-op-primary,
.op-inline-form-acties .btn-op-secondary,
.speler-row .btn-op-secondary,
.op-onhold-banner .btn-op-primary {
    min-height: 44px;
}