/* kit: standaard-opmaak van de registratie-kit */
/* Eén vormtaal voor de meegeleverde pagina's (beheer, mijn gegevens, wachtwoord, activeren):
   alleen design-systeem-tokens, dus elk project krijgt 'm in z'n eigen look. */
.kit-pagina { display: flex; flex-direction: column; gap: var(--space-8); padding-top: var(--space-2); }
.kit-pagina .kit-kop { max-width: 46rem; }
.kit-pagina .kit-eyebrow { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-primary); }
.kit-pagina .kit-titel { margin: 0 0 var(--space-3); font-family: var(--font-heading); font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-text-heading); }
.kit-pagina .kit-lead { margin: 0; max-width: 40rem; font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-text-secondary); }
.kit-pagina .kit-paneel { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); min-width: 0; }
.kit-pagina .kit-paneel-primair { border-top: 3px solid var(--color-primary); }
.kit-pagina .kit-voet { margin: 0; font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--color-text-muted); }
.kit-pagina .kit-vrij { margin: 0; }
/* Een formulier of lijst ín een paneel is geen tweede kaart. */
.kit-pagina .kit-paneel .inline-form { margin: 0; max-width: none; padding: 0; background: none; border: 0; box-shadow: none; }
.kit-pagina .inline-form-title { font-size: var(--text-lg); margin-bottom: var(--space-4); }
.kit-pagina .view { gap: var(--space-4); }
.kit-pagina .vh-title h1 { font-size: var(--text-xl); }

/* Beheer: de gebruikers zijn het werk (breed), registreren en de rollen staan ernaast. */
.kit-beheer .kit-raster { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); align-items: start; }
.kit-beheer .kit-zij { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.kit-beheer .kit-hoofd .table-wrap { box-shadow: var(--shadow-md); }

/* Mijn gegevens en wachtwoord: op de as van de app, één rustig paneel met uitleg ernaast. */
.kit-account .kit-raster { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 36rem) minmax(14rem, 18rem); align-items: start; }
.kit-account .kit-uitleg { margin: 0; padding-top: var(--space-2); font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--color-text-secondary); }

/* Activeren: je komt uit een mail en hebt één taak — een gerichte kolom, kop en formulier op één as. */
.kit-activeren { max-width: 34rem; margin-inline: auto; text-align: left; }
.kit-activeren .kit-kop { max-width: none; }
/* Eén formulier op z'n eigen pagina: de paginakop zegt al wat het is — geen tweede titel erboven. */
.kit-account .inline-form-title, .kit-activeren .inline-form-title { display: none; }

@media (max-width: 900px) {
  .kit-pagina { gap: var(--space-6); }
  .kit-beheer .kit-raster, .kit-account .kit-raster { grid-template-columns: 1fr; }
}
/* landing: Centre Court. Een uitnodiging in gebroken wit en diep groen, met lijnwerk in goud. Geen gradients, geen beeld; de baan is getekend met randen. */
.landing-logo-banner { display: none; }
.cc { display: flex; flex-direction: column; gap: 0; margin-top: calc(-1 * var(--space-6)); padding-bottom: 0; }
.cc p { margin: 0; max-width: none; }
.cc h1, .cc h2, .cc h3 { margin: 0; }

/* De kop: een groen vlak van rand tot rand met een dunne gouden kaderlijn. */
.cc-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: center; padding: var(--space-12) 0; color: #F7F4EC; background: #1F3D2B; box-shadow: 0 0 0 100vmax #1F3D2B; clip-path: inset(0 -100vmax); }
.cc-hero::after { content: ""; position: absolute; inset: var(--space-3) 0; border: 1px solid #B89B5E; border-inline: 0; pointer-events: none; }
.cc .cc-datum { margin-bottom: var(--space-4); font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: #D9C58F; }
.cc .cc-titel { font-family: var(--font-heading); font-size: min(13vw, 4.75rem); font-weight: 600; line-height: 1; letter-spacing: var(--tracking-tight); color: #FDFBF7; }
.cc .cc-thema { margin-top: var(--space-2); font-family: var(--font-heading); font-size: var(--text-2xl); font-style: italic; font-weight: 500; color: #D9C58F; }
.cc .cc-intro { max-width: 30rem; margin-top: var(--space-6); font-size: var(--text-lg); line-height: var(--leading-relaxed); color: #DCE7DF; }

/* De baan van boven: zijlijnen, dubbelspellijnen, net en servicelijnen. Alleen randen. */
.cc-baan { position: relative; width: 100%; max-width: 18rem; aspect-ratio: 78 / 36; border: 1px solid #D9C58F; justify-self: start; }
.cc-baan > span { position: absolute; display: block; }
.cc-baan-vulling { top: 11%; left: 50%; width: 23%; height: 39%; background: #B89B5E; }
.cc-baan-binnen { inset: 11% 0; border-block: 1px solid #D9C58F; }
.cc-baan-net { top: -6%; bottom: -6%; left: 50%; border-left: 2px solid #D9C58F; }
.cc-baan-service { top: 11%; bottom: 11%; border-left: 1px solid #D9C58F; }
.cc-baan-service-l { left: 27%; }
.cc-baan-service-r { left: 73%; }
.cc-baan-midden { top: 50%; left: 27%; right: 27%; border-top: 1px solid #D9C58F; }

/* De feiten: vier kolommen met haarlijnen ertussen. */
.cc-feiten { display: grid; grid-template-columns: minmax(0, 1fr); margin: var(--space-12) 0; padding: 0; list-style: none; border-bottom: 1px solid #B89B5E; }
.cc-feiten li { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-5) 0; border-top: 1px solid #B89B5E; color: var(--color-text-secondary); font-size: var(--text-base); }
.cc-feiten li:first-child { border-top: 0; }
.cc-feiten strong { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 600; line-height: var(--leading-snug); color: var(--color-text-heading); }
.cc .cc-label { font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-muted); }

/* Secties: een kop met een haarlijn, daaronder rustig leesbare tekst. */
.cc-sectie { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding-block: var(--space-12); border-top: 1px solid #B89B5E; }
.cc-band { border-top: 0; box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); background: var(--band); }
.cc-lichtgroen { --band: #E4ECE6; }
.cc-paars { --band: #4B2A4F; }
.cc-sectie h2::before { content: ""; display: block; width: 3rem; height: 3px; margin-bottom: var(--space-4); background: #B89B5E; }
.cc-inhoud { display: grid; gap: var(--space-5); min-width: 0; max-width: 42rem; }
.cc .cc-sectie h2 { font-family: var(--font-heading); font-size: var(--text-3xl); line-height: var(--leading-tight); color: var(--color-text-heading); }
.cc .cc-inhoud > p { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--color-text); }

/* Het programma: genummerde rijen met romeinse cijfers. */
.cc-rijen { counter-reset: rij; margin: 0; padding: 0; list-style: none; }
.cc-rijen li { counter-increment: rij; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: var(--space-4); padding: var(--space-5) 0; border-bottom: 1px solid var(--color-border); }
.cc-rijen li::before { content: counter(rij, upper-roman); grid-row: 1 / span 2; font-family: var(--font-heading); font-size: var(--text-xl); font-style: italic; font-weight: 600; color: #7A6330; }
.cc .cc-rijen h3 { font-family: var(--font-heading); font-size: var(--text-xl); color: var(--color-text-heading); }
.cc .cc-rijen p { margin-top: var(--space-1); color: var(--color-text-secondary); line-height: var(--leading-relaxed); }
.cc .cc-slot { font-family: var(--font-heading); font-size: var(--text-xl); font-style: italic; color: var(--color-text-heading); }

/* Inschrijven: de echte lijst als één rustige baan met de enige volle knop van de pagina. */
.cc .mock-landing-screen { margin: 0; }
.cc-inschrijf .view { gap: 0; }
.cc-inschrijf .view-head, .cc-inschrijf .toolbar { display: none; }
.cc-inschrijf .empty-state { padding: var(--space-4) 0; text-align: left; color: var(--color-text); }
.cc-inschrijf .empty-state p { margin-left: 0; color: inherit; }
.cc-inschrijf .table-wrap { overflow: visible; padding: var(--space-5) var(--space-6); background: var(--color-bg-surface); border: 1px solid var(--color-border); border-top: 2px solid #B89B5E; border-radius: var(--radius-sm); box-shadow: none; }
.cc .cc-inschrijf .data-table { display: block; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.cc .cc-inschrijf .data-table tbody { display: block; background: transparent; border: 0; box-shadow: none; }
.cc .cc-inschrijf .data-table tbody tr, .cc .cc-inschrijf .data-table tbody tr:hover { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
.cc .cc-inschrijf .data-table tbody td { display: block; width: auto; padding: 0; background: transparent; border: 0; }
.cc .cc-inschrijf .data-table tbody td::before { content: none; }
.cc .cc-inschrijf .data-table td.cell-primary { flex: 1 1 100%; font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 600; line-height: var(--leading-snug); color: var(--color-text-heading); }
/* De sluitingsdatum staat al in de tekst erboven; de rij is alleen naam en knop. */
.cc .cc-inschrijf .data-table td[data-bind-cell="sluitingsdatum"] { display: none; }
.cc-inschrijf .data-table thead { display: none; }
.cc .cc-inschrijf .data-table td.cell-actions { flex: 0 0 auto; }
.cc .cc-inschrijf .row-actions { display: flex; opacity: 1; visibility: visible; }
.cc .cc-inschrijf .data-table .row-actions .btn-row, .cc .cc-inschrijf .data-table tbody tr:hover .row-actions .btn-row { min-height: 3rem; padding: var(--space-3) var(--space-8); font-size: var(--text-base); font-weight: 600; letter-spacing: var(--tracking-wide); color: var(--color-text-on-primary); background: var(--color-primary); border: 1px solid var(--color-primary); border-radius: var(--radius-md); }
.cc .cc-inschrijf .data-table .row-actions .btn-row:hover { background: var(--color-primary-bright); border-color: var(--color-primary-bright); }
.cc .cc-inschrijf .data-table .row-actions .btn-row:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

/* Over het toernooi: het scherm blijft geplaatst, maar toont alleen wat nergens anders op de pagina staat. */
.cc-over .inline-form { margin: 0; max-width: none; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.cc .cc-over .inline-form-title { display: none; }
.cc .cc-over .detail-list { display: block; margin: 0; }
.cc .cc-over .detail-list > .detail-row { display: none; }
.cc .cc-over .detail-list > .detail-row:has([data-bind-cell="aantalplekken"]) { display: flex; gap: .35em; padding: 0; font-size: var(--text-base); color: var(--color-text-secondary); background: none; border: 0; }
.cc .cc-over .detail-row dt, .cc .cc-over .detail-row dd { margin: 0; font: inherit; letter-spacing: 0; text-transform: none; color: inherit; }
.cc .cc-over .detail-row dt::after { content: ":"; }

@media (min-width: 48rem) {
  .cc { gap: 0; }
  .cc-sectie { grid-template-columns: 14rem minmax(0, 1fr); gap: var(--space-8); }
  .cc-hero { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--space-12); padding: var(--space-20) 0; }
  .cc-baan { justify-self: end; }
  .cc-feiten { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cc-feiten li { padding: var(--space-6) var(--space-6); border-top: 0; border-left: 1px solid #B89B5E; }
  .cc-feiten li:first-child { padding-left: 0; border-left: 0; }
  .cc .cc-inschrijf .data-table tbody tr, .cc .cc-inschrijf .data-table tbody tr:hover { flex-wrap: nowrap; }
  .cc .cc-inschrijf .data-table td.cell-primary { flex: 1 1 auto; }
}
@media (max-width: 48rem) {
  .cc { gap: 0; margin-top: calc(-1 * var(--space-4)); }
  .cc-inschrijf .table-wrap { padding: var(--space-4); }
  .cc .cc-inschrijf .data-table td.cell-actions { flex: 1 1 100%; margin-top: var(--space-2); padding: 0; }
  .cc .cc-inschrijf .data-table .row-actions .btn-row { width: 100%; }
}
/* Op de uitnodiging is Inschrijven de enige volle knop; Inloggen wijkt. */
.app-header:has(~ * .cc) .persona-login { color: var(--color-text-heading); background: transparent; border: 1px solid var(--color-border-strong); box-shadow: none; }
/* Deze app heeft geen themakeuze in de kop: de schakelaar blijft weg op elke pagina. */
.app-header .theme-toggle { display: none; }

/* De avond op aubergine: crème tekst, gouden cijfers. */
.cc .cc-paars h2, .cc .cc-paars h3 { color: #FDFBF7; }
.cc .cc-paars .cc-rijen li { border-bottom-color: #B89B5E; }
.cc .cc-paars .cc-rijen li::before { color: #D9C58F; }
.cc .cc-paars .cc-rijen p { color: #E7D9E9; }
.cc .cc-paars .cc-rijen li:last-child { border-bottom: 0; }
.cc-contact { border-top: 0; }
.cc .cc-inschrijf .data-table .row-actions .btn-row:hover { background: #4B2A4F; border-color: #4B2A4F; }
@media (min-width: 48rem) { .cc-sectie { padding-block: var(--space-16); } }

/* De inschrijflade en de meldingen in Centre Court: een gouden kaderlijn bovenaan, koppen in de schreefletter, meldingen in diep groen. */
.drawer { border-top: 2px solid #B89B5E; background: var(--color-bg-surface); }
.drawer-head { padding-block: var(--space-6); border-bottom: 1px solid #B89B5E; }
.drawer-head h2, .drawer-head h3 { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 600; color: var(--color-text-heading); }
.drawer-foot { border-top: 1px solid #B89B5E; }
.toast { color: #F7F4EC; background: #1F3D2B; border: 1px solid #B89B5E; border-radius: var(--radius-sm); }
.toast.is-error { background: #9B2226; border-color: #9B2226; color: #FFFFFF; }
.toast-stack { width: calc(100vw - 2rem); max-width: 34rem; align-items: stretch; }
.toast { width: 100%; }
/* Voorlopig geen Inloggen-knop op de landing; /login en de knop op andere pagina's blijven. */
.app-header:has(~ * .cc) .persona-login { display: none; }
/* Beheer in Centre Court: rustig en werkgericht. Gouden haarlijn onder de schermkoppen, een gouden bovenrand op kaarten en lijsten, de actiekolom op hetzelfde vlak als de rij. */
.data-table, .drawer, .form-card, dialog { --mock-tabel-grond: var(--color-bg-surface); }
.data-table th.th-actions { background: var(--color-bg-subtle); }
.view-head { padding-bottom: var(--space-3); border-bottom: 1px solid #B89B5E; }
.view-head .vh-title h1, .view-head .vh-title h2 { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 600; color: var(--color-text-heading); }
.form-card, .inline-form { border-top: 2px solid #B89B5E; }
.cc-inschrijf .table-wrap { border-top: 2px solid #B89B5E; }
.data-table th { padding-inline: var(--space-3); letter-spacing: .1em; }
.data-table td { padding-inline: var(--space-3); }
/* Brede lijsten passen in het beheerkader: kolomkoppen mogen afbreken, cellen krijgen minder zijruimte en lange adressen breken. */
.data-table th { padding-inline: var(--space-2); white-space: normal; letter-spacing: .06em; }
.data-table td { padding-inline: var(--space-2); font-size: var(--text-sm); }
.data-table td.cell-actions, .data-table th.th-actions { overflow-wrap: normal; padding-inline: var(--space-2); }
.data-table td[data-bind-cell="email"], .data-table td[data-bind-cell="emaildubbelpartner"] { min-width: 12rem; overflow-wrap: anywhere; }

.data-table td.cell-primary .cel-klem { min-width: 14ch; }

/* landing: aantal plekken niet tonen (besluit modelleur 13-11) */
.cc .cc-over .detail-list > .detail-row:has([data-bind-cell="aantalplekken"]) { display: none; }