:root { --primary-color: #6B2C91; --header-height: 190px; }
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f4f6f8;
    color: #222;
}

h1 {
    margin: 0;
    padding: 25px 40px 5px;
    background-color: var(--primary-color);
    color: white;
}

h2 {
    margin: 0;
    padding: 5px 40px 25px;
    background-color: var(--primary-color);
    color: white;
    font-size: 18px;
    font-weight: normal;
}

h3 {
    margin-left: 40px;
    margin-top: 35px;
}

p {
    margin-left: 40px;
}

hr {
    display: none;
}

button {
    padding: 14px 22px;
    margin: 10px 5px;
    border: none;
    border-radius: 6px;
    background-color: var(--primary-color);
    color: white;
    font-size: 16px;
    cursor: pointer;
}

button:first-of-type {
    margin-left: 40px;
}

button:hover {
    background-color: var(--primary-color);
}
/* Tickets en scanner sluiten aan op de bestaande Wilhelmina-kleuren. */
* { box-sizing: border-box; }
article { margin: 20px 40px; padding: 20px; background: white; border: 1px solid #d7dfe8; border-radius: 10px; }
article h3, article p { margin-left: 0; }
form { margin: 24px 40px; }
input, select { padding: 12px; font: inherit; max-width: 100%; border: 1px solid #8596aa; border-radius: 5px; }
details { padding: 12px 0; }
summary { cursor: pointer; padding: 12px 0; font-weight: bold; }
button:disabled { opacity: .55; cursor: default; }
#melding:empty { display: none; }
.ticketlijst { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr)); gap: 20px; }
.ticket { padding: 24px; border: 2px solid var(--primary-color); border-radius: 12px; text-align: center; background: white; break-inside: avoid; }
.ticket h3 { color: var(--primary-color); margin: 16px 0; font-size: 24px; }
.ticket p { margin: 12px 0; }
.ticket-merk { color: var(--primary-color); font-size: 13px; font-weight: bold; letter-spacing: 1px; }
.ticketnummer { display: block; overflow-wrap: anywhere; font-family: monospace; font-size: 14px; }
.ticket-qr { width: 320px; max-width: 100%; height: auto; display: block; margin: 12px auto; }
.ticket-status { font-weight: bold; }
#scannerWeergave { margin: 24px 40px; max-width: 850px; }
#scannerWeergave h2 { padding: 18px; margin-bottom: 20px; border-radius: 8px; }
#scannerWeergave p { margin-left: 0; }
#scannerWeergave label { display: block; margin: 12px 0; }
#scannerConcert { width: 100%; }
#scannerWeergave button, .ticket button { margin-left: 0; min-height: 48px; }
#scannerVideo { width: 100%; max-height: 440px; background: #111; border-radius: 8px; }
.scan-resultaat { padding: 20px; margin: 18px 0; border: 3px solid; border-radius: 10px; overflow-wrap: anywhere; }
.scan-resultaat h3 { margin: 0 0 12px; font-size: 26px; }
.scan-resultaat.geldig { background: #d9f7e4; color: #064d26; border-color: #167345; }
.scan-resultaat.gebruikt { background: #fff0ca; color: #694400; border-color: #a66b00; }
.scan-resultaat.fout { background: #ffe2e2; color: #850f19; border-color: #ad2330; }
.scan-resultaat.bezig { background: #f4f0f7; color: var(--primary-color); border-color: var(--primary-color); }
#tokenFormulier { margin: 0; }
@media (max-width:600px) {
 h1 { padding: 20px 16px 8px; font-size: 28px; }
 body > h2 { padding: 8px 16px 20px; }
 body > h3, body > p { margin-left: 16px; margin-right: 16px; }
 body > button, body > button:first-of-type { margin: 6px 8px; padding: 14px; }
 article, form, #scannerWeergave { margin: 16px; }
 article { padding: 14px; }
 .ticket { padding: 14px; }
 form input, form select { width: 100%; }
 .scan-resultaat h3 { font-size: 23px; }
}
@media print {
 @page { size: A4 portrait; margin: 10mm; }
 body { background: white; }
 /* Hidden branches must not contribute height or pagination. */
 body *:not(.print-ticket):not(.print-ticket *):not(:has(.print-ticket)) { display: none !important; }
 /* Keep the path to the selected ticket, without order/grid wrapper boxes. */
 body *:has(.print-ticket) { display: contents !important; }
 .print-ticket, .print-ticket * { visibility: visible; }
 .print-ticket { position: fixed; inset: 0; height: 148mm; width: 105mm; max-width: 105mm; margin: auto; padding: 5mm; }
 .print-ticket button { display: none; }
 .ticket-qr { width: 80mm; }
}

/* De header blijft in de normale documentstroom: geen vaste spacer nodig. */
html { scroll-padding-top: calc(var(--header-height) + 12px); }
.app-header { position: sticky; top: 0; z-index: 20; background: var(--primary-color); color: white; box-shadow: 0 3px 10px #0002; }
.header-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 40px 10px; }
.app-brand { min-width: 0; }
.app-header h1 { padding: 0; font-size: 30px; line-height: 1.2; background: transparent; }
.app-subtitle { margin: 5px 0 0; font-size: 16px; }
.app-nav { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 40px 14px; }
.app-nav button, .app-nav button:first-of-type { margin: 0; border: 1px solid #ffffff80; padding: 10px 16px; min-height: 44px; }
.app-nav button:hover, .menu-knop:hover { background: #ffffff20; }
.app-nav button[aria-current="page"] { color: var(--primary-color); background: white; border-color: white; font-weight: bold; }
.actieve-sectie { padding: 10px 40px; font-size: 18px; font-weight: bold; background: #00000018; border-top: 1px solid #ffffff40; line-height: 1.3; }
.menu-knop { display: none; }
.welkomsttekst { margin: 20px 40px; color: #555; }
#hoofdInhoud { min-width: 0; }
/* Eén zichtbare sectietitel in de sticky header, ook bij dynamische overzichten. */
#concertenOverzicht > h2, #bezoekersOverzicht > h2, #aanmeldFormulier > h2, #nieuwConcertFormulier > h2, #scannerWeergave > h2 { display: none; }
button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
input, select, summary, button { scroll-margin-block: 12px; }
input[type="file"] { width: 100%; }
@media (max-width:700px) {
 .header-top { padding: 10px 16px 8px; gap: 12px; }
 .app-header h1 { font-size: 21px; }
 .app-subtitle { font-size: 12px; line-height: 1.3; max-width: 34ch; }
 .menu-knop, .menu-knop:first-of-type { display: block; flex-shrink: 0; margin: 0; padding: 8px 12px; min-height: 44px; border: 1px solid #ffffff80; }
 .app-header:not(.menu-open) .app-nav { display: none; }
 .app-nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 8px 16px 12px; max-height: calc(100dvh - 150px); overflow-y: auto; }
 .app-nav button { padding: 10px 6px; font-size: 14px; overflow-wrap: anywhere; }
 .actieve-sectie { padding: 8px 16px; font-size: 16px; }
 .welkomsttekst { margin: 16px; font-size: 14px; }
}
@media print {
 html { scroll-padding-top: 0; }
 .app-header, .welkomsttekst, #melding { display: none !important; }
 .print-ticket { box-shadow: none; }
}

/* Instelbare huisstijl. Functionele scanstatuskleuren blijven ongewijzigd. */
:root { --primary-ink: #ffffff; --accent-color: #6B2C91; }
h1,h2,button,.app-header { color: var(--primary-ink); }
.app-header h1 { color: inherit; }
.app-nav button[aria-current="page"] { color: var(--accent-color); }
.ticket h3,.ticket-merk,.scan-resultaat.bezig { color: var(--accent-color); }
.vereniging-logo { object-fit: contain; background: white; border-radius: 6px; }
#headerLogo { width: 64px; height: 64px; flex-shrink: 0; }
#headerLogo[hidden],#previewLogo[hidden] { display: none; }
.ticket-logo { display:block; max-width:130px; max-height:70px; margin:0 auto 12px; }
#instellingenWeergave { max-width:1100px; }
#instellingenFormulier h3,#instellingenFormulier p { margin-left:0; }
.instellingen-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr));gap:20px; }
.instellingen-grid label,.kleurvelden label { display:flex;flex-direction:column;gap:8px; }
.instellingen-grid input { width:100%; }
fieldset { min-width:0; margin:24px 0;padding:18px;border:1px solid #c5bdcc;border-radius:8px; }
legend { font-weight:bold; }
.kleurvelden { display:flex;align-items:end;gap:20px;flex-wrap:wrap; }
input[type="color"] { width:80px;height:48px;padding:4px;cursor:pointer; }
.kleurvak,.kleurvak:first-of-type { width:44px;height:44px;min-height:44px;padding:0;margin:12px 8px 0 0;border:2px solid #777;border-radius:50%; }
#huisstijlPreview { margin:24px 0;padding:24px;border-radius:8px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;overflow-wrap:anywhere; }
#huisstijlPreview strong { font-size:22px; }
#huisstijlPreview span { flex-basis:100%; }
#previewLogo { width:80px;height:80px;object-fit:contain;background:white; }
#instellingenStatus { min-height:24px;font-weight:bold; }
#dashboardWeergave { margin:24px 40px; }
#dashboardWeergave h3,#dashboardWeergave p { margin-left:0; }
.dashboard-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px; }
.dashboard-grid article { margin:0; }
.dashboard-grid strong { font-size:32px;color:var(--accent-color); }
@media(max-width:700px) {
 .instellingen-grid { grid-template-columns:1fr; }
 #headerLogo { width:40px;height:40px; }
 .header-top { gap:8px; }
 #dashboardWeergave { margin:16px; }
 #instellingenFormulier { margin:16px; }
 #instellingenFormulier button { margin-left:0; }
}

.app-brand { flex: 1; overflow-wrap: anywhere; }

/* Dashboard per concert */
.dashboard-keuze { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.dashboard-keuze label { font-weight:bold; }
.dashboard-keuze select { min-width:0; max-width:100%; flex:1; }
.dashboard-grid strong { font-size:clamp(22px,3vw,32px); overflow-wrap:anywhere; }
.dashboard-uitleg { color:#555; font-size:14px; line-height:1.5; }
.dashboard-waarschuwing { color:#850f19; font-weight:bold; }
.dashboard-concertlijst { list-style:none; padding:0; margin:0; }
.dashboard-concertknop,.dashboard-concertknop:first-of-type { display:grid; grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr)); gap:16px; align-items:center; width:100%; margin:0 0 8px; padding:14px 16px; text-align:left; background:white; color:#222; border:1px solid #ccc; }
.dashboard-concertknop small { display:block; margin-top:5px; color:#555; }
.dashboard-concertknop span { overflow-wrap:anywhere; }
.dashboard-concertknop[aria-pressed="true"] { border:2px solid var(--accent-color); padding:13px 15px; }
.dashboard-concertknop:hover { background:#f1f1f1; }
@media(max-width:700px) { .dashboard-concertknop { grid-template-columns:1fr 1fr; gap:10px; font-size:14px; } .dashboard-concertknop > span:first-child { grid-column:1 / -1; } }

/* Contextuele navigatie en veilige archiefbevestiging */
.sub-nav {display:flex;flex-wrap:wrap;gap:8px;padding:12px 40px;background:#00000018;border-top:1px solid #ffffff40;}
.sub-nav[hidden],.sub-nav button[hidden],.actieve-sectie[hidden] {display:none;}
.sub-nav button,.sub-nav button:first-of-type {margin:0;min-height:44px;padding:12px 16px;border:1px solid #ffffff80;background:transparent;}
.sub-nav button[aria-current="page"] {background:white;color:var(--accent-color);font-weight:bold;}
.verwijder-dialoog {box-sizing:border-box;width:calc(100% - 32px);max-width:620px;border:2px solid var(--accent-color);border-radius:12px;padding:24px;max-height:90dvh;overflow:auto;}
.verwijder-dialoog::backdrop {background:#0009;}
.verwijder-dialoog h2 {padding:12px;border-radius:6px;}
.verwijder-dialoog p {margin:16px 0;line-height:1.5;}
.verwijder-dialoog input {display:block;width:100%;margin:12px 0;}
.verwijder-dialoog button {margin:8px 8px 0 0;}
.verwijder-dialoog button:disabled {opacity:.45;cursor:not-allowed;}
@media(max-width:700px){.sub-nav{padding:10px 16px;gap:6px;}.sub-nav button{font-size:14px;padding:10px;}.verwijder-dialoog{padding:16px;}}

.bestelling-filter {display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:24px 40px;}
.bestelling-filter label {font-weight:bold;}
.bestelling-filter select {flex:1;min-width:0;max-width:100%;}
@media(max-width:700px){.bestelling-filter{margin:16px;}}

/* Vast A6-ticket op A4; uitsluitend de fysieke afdruk. */
@media print {
 .print-ticket { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.2mm; font-size:9pt; line-height:1.2; }
 .print-ticket > * { flex-shrink:0; max-width:100%; }
 .print-ticket h3 { font-size:14pt; line-height:1.15; margin:1mm 0; overflow-wrap:anywhere; }
 .print-ticket p { margin:0; overflow-wrap:anywhere; }
 .print-ticket .ticket-merk { font-size:8pt; }
 .print-ticket .ticketnummer { font-size:7pt; }
 .print-ticket .ticket-logo { width:auto; height:12mm; max-width:35mm; max-height:12mm; margin:0 auto; }
 .print-ticket .ticket-qr { width:50mm; height:50mm; max-width:50mm; margin:2mm auto; }
}

/* Login and account controls do not alter the established print layout. */
@media screen {
 body.signed-out > header, body.signed-out > main {display:none!important;}
 body:not(.signed-out) > #authScherm {display:none;}
 .auth-scherm {max-width:440px;margin:5vh auto;padding:24px;background:white;border-radius:12px;}
 .auth-scherm label,.gebruiker-form label {display:block;margin:12px 0;}
 .auth-scherm input,.gebruiker-form input,.gebruiker-form select {display:block;width:100%;box-sizing:border-box;}
 .account-balk {padding:8px clamp(16px,3.2vw,40px);display:flex;align-items:center;gap:16px;}
 .bestelling[hidden],[hidden] {display:none!important;}
 #bestellingZoek {width:100%;box-sizing:border-box;margin:8px 0 18px;}
}

/* Gedeelde schermmarges voor beide bestellingsoverzichten. Print blijft ongewijzigd. */
@media screen {
 .bestelling-filter,.bestelling-zoeken {margin:20px 40px;display:flex;flex-direction:column;align-items:stretch;gap:8px;}
 .bestelling-filter label,.bestelling-zoeken label {margin:0;font-weight:bold;}
 .bestelling-filter select,#bestellingZoek {width:100%;max-width:100%;min-width:0;margin:0;min-height:48px;}
 #scanModus {width:100%;min-height:48px;}
 @media(max-width:700px){.bestelling-filter,.bestelling-zoeken{margin:16px;}}
}