:root {
  --grad: linear-gradient(100deg, #F69220, #EB2027);
  --ink: #1a1a1a;
  --line: #e6e6e9;
  --muted: #8a8a92;
  --bg: #f6f6f8;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Poppins, system-ui, sans-serif; color: var(--ink); background: var(--bg); }

/* Generieke verberg-klasse: .modal-overlay.hidden en .login-gate.hidden bestonden al apart, maar
   het koppelcode-modal (pairStepForm/pairStepCode) heeft twee stappen binnen dezelfde kaart en
   had geen eigen regel. Zonder deze algemene regel bleven beide stappen zichtbaar, gestapeld. */
.hidden { display: none; }

.topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 28px; background: #fff; border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; font-size: 20px; }
.brand span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tabs { display: flex; gap: 6px; }
.tab { border: none; background: transparent; font: inherit; font-weight: 600; padding: 8px 18px; border-radius: 999px; cursor: pointer; color: var(--muted); }
.tab.active { background: var(--grad); color: #fff; }

main { padding: 24px 28px; max-width: 1200px; margin: 0 auto; }
.tabpane { display: none; }
.tabpane.active { display: block; }
.pane-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.pane-head h1 { font-size: 24px; }

.btn { border: none; background: var(--grad); color: #fff; font: inherit; font-weight: 600; padding: 10px 20px; border-radius: 10px; cursor: pointer; }
.btn.ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn.small { padding: 7px 14px; font-size: 14px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:active { transform: translateY(1px); }

.layout { display: grid; grid-template-columns: 320px 1fr; gap: 20px; align-items: start; }
.list { display: flex; flex-direction: column; gap: 10px; }
.list.wide { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; cursor: pointer; }
.card:hover { border-color: #d4d4da; }
.card.selected { border-color: #EB2027; box-shadow: 0 0 0 2px rgba(235,32,39,.15); }
/* overflow-wrap: een eventnaam typt de eigenaar zelf in en kan een lang woord zonder spaties zijn
   (300 tekens is voorgekomen); zonder deze regel duwt zo'n woord de kaart breder dan de kolom. */
.card h3 { font-size: 16px; margin-bottom: 4px; overflow-wrap: anywhere; }
.card .meta { font-size: 13px; color: var(--muted); }
.badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.badge.unclaimed { background: #fff3e0; color: #d2691e; }
.badge.active { background: #e6f6ec; color: #1a8a4a; }
.badge.retired { background: #eee; color: #888; }
.badge.draft { background: #eef; color: #5560d0; }
.badge.ready { background: #e6f6ec; color: #1a8a4a; }
.badge.done { background: #eee; color: #888; }

.detail { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.detail h2 { font-size: 20px; margin-bottom: 16px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 5px; }
.field input[type=text], .field input[type=email], .field input[type=date], .field input[type=number], .field select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; font: inherit;
}
.row { display: flex; gap: 14px; flex-wrap: wrap; }
.row .field { flex: 1; min-width: 140px; }
.switch { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 8px 0; }
.switch input { width: 18px; height: 18px; accent-color: #EB2027; }
/* Printervakjes (2026-09-28): drie klikbare kaarten i.p.v. een <select>, zelfde radiogroep-patroon
   als een echte radio-input maar visueel als kaart. .printer-mode-opt-sub laat het label z'n eigen
   hoogte kiezen; de brand-gradient rand+vulling op :has(input:checked) geeft dezelfde herkenbare
   actieve staat als .tab.active en .status-chip.active elders in het dashboard. Uitsluitend
   :has() gebruikt, geen aparte .selected-klasse: die werd enkel bij het inladen gezet en bleef na
   een klik op een ander vakje staan (WebKit/Chrome ondersteunen :has() ruim lang genoeg, sinds
   voorjaar 2022, om hier zonder fallback op te vertrouwen). */
.printer-mode-options { display: flex; gap: 10px; }
/* .field label { display:block } hierboven (specificiteit 0,1,1) zou anders winnen van een kale
   .printer-mode-opt (0,1,0): dit is ook een <label>, binnen een .field. De geneste selector hier
   (0,2,0) wint met zekerheid, in plaats van te vertrouwen op declaratievolgorde. */
.printer-mode-options .printer-mode-opt {
  position: relative; flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px; cursor: pointer; background: #fff;
}
.printer-mode-opt:hover { border-color: #d4d4da; }
.printer-mode-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.printer-mode-opt:has(input:focus-visible) { outline: 2px solid #EB2027; outline-offset: 2px; }
.printer-mode-opt:has(input:checked) {
  border-color: transparent; background: var(--grad);
}
.printer-mode-opt:has(input:checked) .printer-mode-opt-label,
.printer-mode-opt:has(input:checked) .printer-mode-opt-sub { color: #fff; }
.printer-mode-opt-label { font-size: 14px; font-weight: 600; }
.printer-mode-opt-sub { font-size: 12px; color: var(--muted); }
@media (max-width: 560px) {
  .printer-mode-options { flex-direction: column; }
}

.section-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 20px 0 10px; }
.assign-list, .tpl-list { display: flex; flex-direction: column; gap: 8px; }
.assign-row, .tpl-row { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; }
.muted { color: var(--muted); }
.err-inline { color: #e02424; font-size: 13px; margin-top: 6px; }
/* Groter aanraakvlak voor de datumvelden (N1, 2026-09-24): een gewone datuminput is smal genoeg
   dat je makkelijk naast het kalendericoontje tikt. Padding en min-height maken het hele veld
   raakbaar; het klikken zelf opent de kalender via input.showPicker() in app.js. */
.field input[type=date] { min-height: 48px; padding: 12px 14px; cursor: pointer; }
.date-written { font-size: 13px; color: var(--muted); margin-top: 6px; }

/* Eigen datumkiezer (Dylan, 2026-09-28), zie public/datumkiezer.js: vervangt het native
   type=date-veld hierboven op het eventformulier. .dk-wrap staat na het (verborgen) datumveld in
   dezelfde .field, en erft dus gewoon de breedte van dat veld: op een smal scherm is de popover
   daardoor automatisch even breed als het veld en blijft ze binnen het scherm. */
.dk-wrap { position: relative; }
.dk-trigger {
  display: flex; align-items: center; gap: 9px; width: 100%; min-height: 48px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; background: #fff;
  font: inherit; color: var(--ink); cursor: pointer; text-align: left;
}
.dk-trigger:hover { border-color: #d4d4da; }
.dk-trigger:focus-visible { outline: 2px solid #EB2027; outline-offset: 1px; }
.dk-icon { flex: 0 0 auto; color: var(--muted); }
.dk-trigger-text { flex: 1; }
.dk-trigger-text.dk-trigger-empty { color: var(--muted); }

/* position: fixed en de breedte/positie via datumkiezer.js (positioneer()): het dashboard schaalt
   de linkerkolom (.layout, 320px vast) niet mee naar smalle schermen, dus het veld eronder kan
   smaller zijn dan een bruikbare kalender. Vast tegen het viewport gepositioneerd blijft de
   popover altijd volledig in beeld in plaats van half achter de rand te verdwijnen. */
.dk-popover {
  position: fixed; z-index: 50;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
}
.dk-pop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dk-pop-title { font-size: 14px; font-weight: 600; }
.dk-nav {
  border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 16px; line-height: 1;
  width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
}
.dk-nav:hover { border-color: #d4d4da; }
.dk-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.dk-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dk-day {
  position: relative; border: none; background: transparent; font: inherit; font-size: 14px; color: var(--ink);
  min-height: 36px; min-width: 36px; border-radius: 9px; cursor: pointer;
}
.dk-day:hover:not(.dk-day-disabled) { background: var(--bg); }
.dk-day:focus-visible { outline: 2px solid #EB2027; outline-offset: 1px; }
.dk-day-muted { color: var(--muted); opacity: .55; }
.dk-day-today { box-shadow: inset 0 0 0 2px #EB2027; font-weight: 600; }
.dk-day-inrange { background: rgba(235,32,39,.1); border-radius: 0; }
.dk-day-selected { background: var(--grad); color: #fff; font-weight: 600; box-shadow: none; }
.dk-day-disabled { color: var(--muted); opacity: .35; cursor: not-allowed; }
.dk-pop-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dk-msg { font-size: 12px; color: #e02424; margin-top: 8px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip-row-datum { align-items: center; margin: -4px 0 16px; }
.chip-label { font-size: 13px; color: var(--muted); margin-right: 4px; }
.chip {
  border: 1px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-size: 13px;
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
}
.chip:hover { border-color: #d4d4da; }
.chip:active { transform: translateY(1px); }
.detail-actions { margin-top: 22px; display: flex; gap: 10px; }
/* Flex-items krimpen standaard niet onder hun eigen inhoud, dus zonder min-width:0
   puilde deze rij uit de kaart in plaats van mee te schalen. */
.claim-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.claim-form input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; min-width: 0; }
.claim-form input[name=number] { flex: 0 0 60px; }
.claim-form input[name=name] { flex: 1 1 110px; }
.claim-form .btn { flex: 0 0 auto; }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 12px 22px; border-radius: 10px; opacity: 0; transition: opacity .3s; }
.toast.show { opacity: 1; }

.purged-note { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.link-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.link-row input { flex: 1; min-width: 120px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; }

/* Foto's inklappen (2026-09-27): de sectie zelf staat standaard dicht, met enkel de
   samenvattingsregel plus de klantlink/download altijd in beeld (foto-sectie-acties), zie
   fotoSectieHtml in app.js. .chevron draait mee met aria-expanded, geen los icoonlettertype nodig. */
.foto-sectie-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 4px; }
.foto-sectie-toggle {
  display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: #fff;
  color: var(--ink); font: inherit; font-weight: 600; font-size: 14px; padding: 8px 14px;
  border-radius: 10px; cursor: pointer;
}
.foto-sectie-toggle:hover { border-color: #d4d4da; }
.foto-sectie-toggle .chevron { display: inline-block; transition: transform .15s ease; color: var(--muted); }
.foto-sectie-toggle[aria-expanded="true"] .chevron { transform: rotate(90deg); }
.foto-sectie-acties { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.foto-sectie-acties .link-row { flex: 1 1 220px; }
.foto-sectie-body { margin-top: 12px; }

/* Sessierijen binnen de geopende "Foto's"-sectie: elke rij heeft een eigen chevron en klapt pas bij
   het openen zijn fotoraster (met per-foto ×) in de DOM. De thumbnail laadt met loading="lazy" en
   staat enkel op de rij zelf, niet nog eens in het geopende raster: dat toont de volledige sessie. */
.sessies-lijst { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.foto-sessie-rij { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.foto-sessie-rij-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px; }
.foto-sessie-toggle {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; border: none; background: transparent;
  color: var(--ink); font: inherit; font-size: 14px; padding: 4px; cursor: pointer; text-align: left;
}
.foto-sessie-toggle .chevron { display: inline-block; flex: 0 0 auto; color: var(--muted); transition: transform .15s ease; }
.foto-sessie-toggle[aria-expanded="true"] .chevron { transform: rotate(90deg); }
.foto-sessie-thumb { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 6px; overflow: hidden; background: #f0f0f2; }
.foto-sessie-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-sessie-info { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foto-sessie-body { padding: 0 10px 10px; }
.foto-sessie-body:not([hidden]) { border-top: 1px solid var(--line); padding-top: 10px; }

/* Plat fotoraster (Task 14): geen kaart per sessie meer, gewoon alle foto's van het event na
   elkaar, op tijd gesorteerd. Klikken op een foto opent #photoModal (hieronder) in plaats van
   ergens naartoe te navigeren, vandaar <button> in plaats van <a>. Het strookje krijgt een
   herkenbaar smaller/hoger vak plus een label, net als op de klantgalerij. */
.photo-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-bottom: 12px; }
.photo-raster .shot { position: relative; display: block; border: none; padding: 0; margin: 0; background: #f0f0f2; border-radius: 8px; overflow: hidden; cursor: pointer; }
.photo-raster .shot img { width: 100%; display: block; aspect-ratio: 3/4; object-fit: cover; }
.photo-raster .shot.strip { grid-row: span 2; }
.photo-raster .shot.strip img { aspect-ratio: 2/6; }
.photo-raster .strip-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 999px; pointer-events: none; }
.photo-more { margin-bottom: 12px; }

/* GDPR-verwijdering (2026-09-27): klein kruisje rechtsboven op elke tegel, geen aparte hover-only
   knop op desktop EN mobiel tegelijk moeten kunnen (een touch-toestel heeft geen hover), dus altijd
   zichtbaar maar klein en subtiel in plaats van enkel bij :hover. */
.photo-raster .photo-del { position: absolute; top: 4px; right: 4px; z-index: 1; width: 22px; height: 22px; line-height: 22px; text-align: center; padding: 0; border: none; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 15px; cursor: pointer; }
.photo-raster .photo-del:hover { background: #e02424; }
.photo-raster .photo-del:disabled { opacity: .5; cursor: not-allowed; }

.modal-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.6); padding: 20px; }
.modal-overlay.hidden { display: none; }
.modal-card { position: relative; background: #fff; border-radius: 16px; padding: 22px; width: 100%; max-width: 420px; max-height: 88vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.modal-close { position: absolute; top: 8px; right: 10px; border: none; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: var(--muted); padding: 6px; }
.modal-photo { width: 100%; display: block; border-radius: 10px; margin-bottom: 12px; background: #f0f0f2; }
.modal-card .meta { font-size: 13px; color: var(--muted); margin-bottom: 12px; }

.login-gate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--grad); }
.login-gate.hidden { display: none; }
.login-card { background: #fff; border-radius: 16px; padding: 30px 34px; width: 320px; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.login-card .brand { font-size: 20px; margin-bottom: 4px; }
.login-card input { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; }

/* Template editor */
.ed-actions { display: flex; gap: 10px; align-items: center; }
.editor-main { display: grid; grid-template-columns: 1fr 280px; gap: 20px; padding: 20px 28px; max-width: 1300px; margin: 0 auto; }
.editor-stage-wrap { display: flex; justify-content: center; align-items: flex-start; }
.editor-stage { position: relative; box-shadow: 0 10px 40px rgba(0,0,0,.18); overflow: hidden; }
.ed-overlay { pointer-events: none; user-select: none; }
.ed-box { position: absolute; box-sizing: border-box; cursor: move; display: flex; align-items: center; justify-content: center; }
.ed-photo { border: 2px dashed rgba(235,32,39,.9); background: rgba(235,32,39,.12); }
.ed-text { border: 1px dashed rgba(0,0,0,.5); background: rgba(255,255,255,.15); }
.ed-label { font-size: 12px; font-weight: 600; color: #EB2027; background: rgba(255,255,255,.85); padding: 2px 6px; border-radius: 4px; pointer-events: none; }
.ed-text-content { font-size: 13px; pointer-events: none; text-shadow: 0 1px 2px rgba(0,0,0,.4); white-space: nowrap; }
.ed-box.flash { outline: 3px solid #F69220; }
.ed-handle { position: absolute; right: -6px; bottom: -6px; width: 14px; height: 14px; background: #EB2027; border: 2px solid #fff; border-radius: 50%; cursor: nwse-resize; }
.editor-panel { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px; height: fit-content; }
.editor-panel h2 { font-size: 18px; margin-bottom: 8px; }
.el-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.el-row { font-size: 13px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.el-row:hover { border-color: #d4d4da; }
.el-row.sel { border-color: #EB2027; background: rgba(235,32,39,.06); }
.ed-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Status van het opslaan, vlak naast de knop. Stond vroeger onderaan het zijpaneel in kleine grijze
   letters, waardoor het leek alsof Opslaan niets deed. */
.save-status { font-size: 13px; font-weight: 600; color: var(--muted); }
.save-status.ok { color: #0f7b3f; }
.save-status.err { color: #c81e1e; }
.switch.inline { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 13px; }
.btn.danger { background: #e02424; width: 100%; margin-top: 6px; }
.ed-box { user-select: none; }
.ed-box.ed-image img { width: 100%; height: 100%; object-fit: fill; display: block; }
.ed-img-missing { display: flex; align-items: center; justify-content: center; color: #999; font-size: 12px; background: repeating-linear-gradient(45deg,#f0f0f0,#f0f0f0 8px,#e8e8e8 8px,#e8e8e8 16px); }
.field input[type=color] { width: 100%; height: 38px; padding: 2px; border: 1px solid var(--line); border-radius: 9px; }
.editor-panel .row { gap: 10px; }

/* ---------------- Fase 5/2 (koppelen en boothstatus), 2026-09-24 ---------------- */
.pair-code-big { font-size: 44px; font-weight: 700; letter-spacing: .08em; text-align: center; font-variant-numeric: tabular-nums; margin: 10px 0; }
.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; flex: 0 0 auto; }
.status-dot.groen { background: #1a8a4a; }
.status-dot.oranje { background: #d2691e; }
.status-dot.rood { background: #e02424; }
.booth-card-head { display: flex; align-items: center; gap: 2px; }
.health-reasons { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; color: #b3441c; }
.health-reasons.rood li { color: #c81e1e; }
.health-reasons li { margin-bottom: 2px; }
.health-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; font-size: 12px; color: var(--muted); margin-top: 8px; }
.today-tomorrow { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 18px; }
.today-tomorrow h2 { font-size: 14px; margin-bottom: 10px; }
.tt-row { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 0; border-top: 1px solid var(--line); }
.tt-row:first-of-type { border-top: none; }
.tt-flag { color: #c81e1e; font-weight: 600; }
.tt-ok { color: #1a8a4a; }

/* ---------------- Statusfilter, prullenbak en de rest van dashboard-eventbeheer, 2026-09-25 ---------------- */
.event-filter-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.event-filter-row .chip-row { margin-top: 0; }
/* .hidden (display:none) staat bovenaan dit bestand en heeft dezelfde specificiteit als .chip-row
   (display:flex, verderop gedefinieerd): bij een gelijke specificiteit wint de regel die later in
   het bestand staat, dus zonder deze uitzondering bleef #statusFilterChips zichtbaar in de
   prullenbak-weergave ondanks de "hidden"-klasse die app.js erop zet. */
#statusFilterChips.hidden { display: none; }
.status-chip.active { background: var(--grad); color: #fff; border-color: transparent; }
.chip-count { font-size: 11px; opacity: .8; }
.card.trash-card { cursor: default; }
/* Geen .card-scope: dezelfde tag staat ook in het blok "Vandaag en morgen" (.tt-row), niet enkel
   op de eventkaart. Zonder deze correctie miste de marge daar, en liep de naam tegen de boothtag aan. */
.booth-tag { display: inline-block; font-size: 11px; color: var(--muted); margin-left: 6px; }
.trash-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }

/* "Staat klaar op" live-paneel na "Nu naar de booths sturen" (item 5) */
.push-panel { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-top: 10px; }
.push-row { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 5px 0; }
.push-row .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.push-row .dot.klaar { background: #1a8a4a; }
.push-row .dot.wacht { background: #d2691e; }
.push-row .dot.offline { background: #e02424; }

/* Drafts-opruimlijst: naam, datum, checkbox */
.drafts-row { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; }
.drafts-row .drafts-meta { color: var(--muted); font-size: 12px; margin-left: auto; }

/* ---------------- Printshop: bestellingen en instellingen (2026-09-25) ---------------- */
.badge.wacht_op_betaling { background: #fff3e0; color: #d2691e; }
.badge.betaald { background: #e6f6ec; color: #1a8a4a; }
.badge.geprint { background: #eef; color: #5560d0; }
.badge.verzonden { background: #e6f6ec; color: #1a8a4a; }
.badge.geannuleerd { background: #fde8e8; color: #c81e1e; }
.badge.verlopen { background: #eee; color: #888; }
.order-status-chip.active { background: var(--grad); color: #fff; border-color: transparent; }
.order-summary { display: flex; flex-direction: column; gap: 2px; }
.order-summary .num { font-weight: 700; }
.order-address { font-size: 14px; line-height: 1.5; }
.order-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; margin: 12px 0; }
/* contain, niet cover: bij het inpakken moet je de hele foto zien, ook de randen van een liggende pose. */
.order-photos img { width: 100%; aspect-ratio: 3/4; object-fit: contain; border-radius: 6px; background: #f0f0f2; }
.order-photos .strip { grid-row: span 2; }
.order-photos .strip img { aspect-ratio: 2/6; }
/* GDPR-verwijdering (2026-09-27): plaatshouder voor een besteld item waarvan de foto intussen weg
   is, in plaats van een kapotte <img>. */
.order-photo-deleted { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; aspect-ratio: 3/4; border-radius: 6px; background: #f0f0f2; color: var(--muted); font-size: 12px; padding: 6px; }
/* Orderafhandeling (2026-09-29, punt C): volgnummer + sessietijd onder elke gekozen foto. */
.order-photo-nr { display: block; font-size: 11px; color: var(--muted); text-align: center; margin-top: 2px; }
.order-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.pkg-row { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; }
.pkg-row:hover { border-color: #d4d4da; }
.pkg-row .pkg-meta { color: var(--muted); font-size: 12px; margin-left: auto; text-align: right; }
.pkg-row.inactive { opacity: .55; }

/* ---------------- Koppelingen (2026-09-29, compleet) ---------------- */
.koppel-summary { display: flex; flex-direction: column; gap: 8px; }
.koppel-summary-row { display: flex; align-items: center; gap: 10px; font-size: 14px; flex-wrap: wrap; }
.badge.ok { background: #e6f6ec; color: #1a8a4a; }
.badge.nok { background: #fde8e8; color: #c81e1e; }
.badge.test { background: #fff3e0; color: #d2691e; }
.mode-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; margin: 10px 0 16px; }
.mode-btn { border: none; background: transparent; font: inherit; font-weight: 600; font-size: 13px; padding: 7px 18px; border-radius: 999px; cursor: pointer; color: var(--muted); }
.mode-btn.active { background: var(--grad); color: #fff; }
.stripe-mode-block { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
.stripe-mode-block h4 { font-size: 14px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.checklist { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; list-style: none; }
.checklist-item { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; padding: 6px 8px; border-radius: 8px; background: #f6f6f8; }
.checklist-item .mark { flex: 0 0 auto; font-weight: 700; }
.checklist-item.ok .mark { color: #1a8a4a; }
.checklist-item.nok .mark { color: #c81e1e; }
.checklist-item.na .mark { color: var(--muted); }
.checklist-item a { color: inherit; text-decoration: underline; }
.copy-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0; }
.copy-row code { background: #f0f0f2; border-radius: 6px; padding: 4px 8px; font-size: 12px; word-break: break-all; }
.howto-block { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin: 10px 0 18px; }
.howto-block summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.howto-block ol { margin: 10px 0 0 18px; font-size: 13px; line-height: 1.7; color: var(--ink); }
.stripe-warn { background: #fff3e0; border: 1px solid #f0c98a; border-radius: 14px; padding: 14px 16px; margin-bottom: 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.stripe-warn p { flex: 1; min-width: 200px; font-size: 14px; }
@media (max-width: 390px) {
  .koppel-summary-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .mode-switch { width: 100%; justify-content: center; }
  .copy-row code { max-width: 100%; }
}

/* Instellingen (30/09/2026): twee kaarten naast elkaar in drie groepen i.p.v. een lange kolom van
   kaarten met elk een eigen breedte. De groepskop en brede kaarten lopen over beide kolommen. */
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.settings-groep { grid-column: 1 / -1; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 12px 0 -6px; }
.settings-groep:first-child { margin-top: 0; }
.settings-kaart { min-width: 0; }
.settings-breed { grid-column: 1 / -1; }
.koppel-status { padding: 16px 22px; }
.stripe-modi, .stripe-webhook { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.stripe-modi .stripe-mode-block { margin-bottom: 0; height: 100%; }
.stripe-modi { margin-bottom: 14px; }
@media (max-width: 900px) {
  .settings-grid, .stripe-modi, .stripe-webhook { grid-template-columns: 1fr; }
}

/* Op een telefoon paste de rij tabbladen (588px) niet naast het merk: de hele pagina schoof
   zijwaarts. Merk op de eerste regel, tabbladen eronder over de volle breedte, horizontaal
   swipebaar in plaats van de pagina te verbreden. Staat bewust onderaan het bestand: de
   standaardregels (.layout e.a.) hebben dezelfde specificiteit en zouden hem anders overschrijven. */
@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
  .tabs { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; padding: 8px 14px; }
  /* Lijst en detail onder elkaar i.p.v. naast elkaar (320px + detail paste niet op 390px). */
  .layout { grid-template-columns: 1fr; }
  /* Templaterij (naam + Bewerken + Verwijderen) en booth-toewijzing mogen afbreken: op 390px
     was de templaterij 8px te breed en schoof het geopende event zijwaarts. */
  .assign-row, .tpl-row { flex-wrap: wrap; }
}