/* Codex design system — huisstijl volgens specificatie hoofdstuk 22.4 (Definitief).
   Bordeaux met oker/goud accent. Warm, waardig, strak-zakelijk.
   Deze stylesheet is het fundament voor de Fase 1-schermen (nieuwe bouw naar spec). */

:root {
  /* Palet B "marine & perkament" (SPECS §2.5). De variabelenamen komen uit Codex en
     blijven staan: hernoemen raakt honderden regels zonder dat er iets van verandert.
     Wat je ziet is het aiacta-palet; alleen de namen herinneren nog aan de herkomst. */
  --bordeaux-deep:   #26467A; /* zijbalk, navigatie */
  --bordeaux-bright: #26467A; /* primaire knoppen, actieve status */
  --bordeaux-darker: #182F55; /* koppelingen, iconen, hover */
  --gold:            #7A5A1E; /* accenten, spaarzaam */
  --ink:             #1B222B; /* lopende tekst */
  --cream:           #F7F7F5; /* achtergrond */
  --paper:           #FFFFFF; /* kaarten */

  /* Status */
  --status-green:    #2F6F4E;
  --status-gold:     #8A5B06;
  --status-alert:    #A33232;

  /* Afgeleid */
  --line:            #D9D9D2;
  --muted:           #5C6673;
  --gold-soft:       #E9E9E4;
  --green-soft:      #E7F1EA;

  --radius:          8px;     /* rechte hoeken met subtiele afronding */
  --radius-sm:       6px;
  --shadow:          0 1px 3px rgba(22, 41, 43, 0.08);
  --sidebar-w:       232px;

  --font-serif: Georgia, "Times New Roman", "Iowan Old Style", serif;
  --font-sans:  "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.55;
}

/* Koppen: serif, extra-bold — gezag en degelijkheid. */
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 700; color: var(--ink); line-height: 1.2; margin: 0 0 0.4em; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }

a { color: var(--bordeaux-darker); }

.eyebrow { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.muted { color: var(--muted); }

/* ---------- App-layout: bordeaux zijbalk + hoofdvlak ---------- */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: none;
  background: var(--bordeaux-deep);
  color: #F3E7DA;
  display: flex;
  flex-direction: column;
  padding: 22px 0;
}
.sidebar .brand {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: #fff;
  padding: 0 22px;
}
.sidebar .brand .dot { color: var(--gold); }
.sidebar .brand-logo { display: block; padding: 20px 22px 4px; }
.sidebar .brand-logo img { display: block; width: 116px; height: 116px; margin: 0 auto; }
.sidebar .brand-sub { padding: 2px 22px 26px; font-size: 0.62rem; letter-spacing: 0.14em; color: #C9A9A0; text-transform: uppercase; }
@media (max-width: 780px) {
  .sidebar .brand-logo { padding: 4px 8px; }
  .sidebar .brand-logo img { width: 52px; height: 52px; }
}
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 22px;
  color: #E7D3C8; text-decoration: none; font-size: 0.95rem;
  border-left: 3px solid transparent;
}
.sidebar nav a:hover { background: rgba(255,255,255,0.05); color: #fff; }
.sidebar nav a.active { background: rgba(184,134,47,0.14); border-left-color: var(--gold); color: #fff; font-weight: 600; }
.sidebar .whoami { margin-top: auto; padding: 18px 22px 0; font-size: 0.8rem; color: #C9A9A0; }
.sidebar .whoami strong { color: #fff; display: block; font-size: 0.95rem; }

.main { flex: 1; min-width: 0; padding: 28px 34px; }
/* De uitgang terug naar de website, rechtsboven op elke pagina van het ingelogde deel.
   Het zijmenu klapt op een telefoon dicht achter de hamburgerknop, dus de link daarin is
   dan onvindbaar — zonder deze knop is er geen zichtbare weg terug. */
.app-uitgang { display: flex; justify-content: flex-end; margin-bottom: 12px; position: relative; z-index: 2; }

/* MAAR NIET IN DE APP. De APK is een webview zonder adresbalk en zonder tabbladen; wie
   daar op "naar de website" tikt, staat op de publieke site zonder enige weg terug — de
   telefoon-terugknop gaat één stap terug en dan zit je weer vast. Dezelfde knop die op een
   telefoon in de browser de enige uitgang is, is in de app dus juist de val.

   De klasse wordt gezet door het regeltje in de <head> van login.html, de dashboardschil
   (server.js) en de beheerschil (routes/admin.js): een Android-webview meldt zich met
   "; wv)" in zijn User-Agent, en een van het beginscherm gestarte PWA met display-mode
   standalone. */
html.in-app .app-uitgang { display: none; }
html.in-app .uit-app { display: none; }

/* De knop stond hier half onzichtbaar (Erik, 16-08-2026), en dat had één oorzaak: het
   koepelpaneel eronder trekt zichzelf met `margin:-24px -16px` omhóóg, dus deze knop ligt
   precies op de naad tussen het crème van de site en het zwart van het dashboard. Met de
   donkerblauwe tekst van .btn-ghost was de linkerhelft leesbaar en de rechterhelft niet.

   Vandaar een knop die op béíde ondergronden werkt in plaats van op één: een gevulde
   donkere pil met lichte tekst en een eigen rand. Op crème leest hij als een donkere chip,
   op zwart als een lichte omlijnde knop. Een kleur zoeken die op allebei "nét kan" was het
   alternatief, en dat is precies hoe dit de eerste keer misging. */
.btn-uitgang { background: #1D242D; color: #E9EEF4; border: 1.5px solid #3A4552; }
.btn-uitgang:hover { background: #2A323C; color: #fff; border-color: #6C7A8A; }

.main-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.main-head h1 { margin-bottom: 2px; }

/* ---------- Knoppen ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bordeaux-bright); color: #fff;
  border: none; cursor: pointer; text-decoration: none;
  font-family: var(--font-sans); font-size: 0.92rem; font-weight: 600;
  padding: 10px 18px; border-radius: var(--radius-sm);
  transition: background 0.15s ease;
}
.btn:hover { background: var(--bordeaux-deep); }
.btn-ghost { background: transparent; color: var(--bordeaux-darker); border: 1.5px solid var(--line); }
.btn-ghost:hover { background: var(--gold-soft); color: var(--ink); }
.btn-gold { background: var(--gold); }
.btn-gold:hover { background: #9C6F22; }
.btn-sm { padding: 7px 13px; font-size: 0.85rem; }
.link-btn { background: none; border: none; color: var(--bordeaux-darker); cursor: pointer; font: inherit; font-weight: 600; padding: 0; }

/* ---------- Kaarten ---------- */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; }

/* Statuskaart met gekleurde links-rand */
.statuscard { display: flex; align-items: center; gap: 14px; border-left: 5px solid var(--status-green); }
.statuscard.attention { border-left-color: var(--status-gold); }
.statuscard.alert { border-left-color: var(--status-alert); }
.statuscard .sc-body { flex: 1; }
.statuscard .sc-body strong { font-family: var(--font-serif); }

/* ---------- Badges ---------- */
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; }
.badge-verified { background: var(--green-soft); color: var(--status-green); text-transform: uppercase; }
.badge-wait { background: var(--gold-soft); color: #8A6420; }
.badge-count { background: var(--bordeaux-deep); color: #fff; border-radius: 6px; min-width: 22px; text-align: center; }

/* In-app klantcontact: menubadge (aantal ongelezen) + chatbubbels met history */
.nav-badge { display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; background: var(--gold); color: #FFFFFF; border-radius: 999px; font-size: 0.72rem; font-weight: 700; line-height: 18px; text-align: center; vertical-align: middle; }
.chat { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 20px; }
.bubble { max-width: 80%; padding: 10px 14px; border-radius: 14px; font-size: 0.94rem; line-height: 1.5; box-shadow: 0 1px 2px rgba(0,0,0,.05); overflow-wrap: anywhere; }
.bubble .bmeta { display: block; font-size: 0.72rem; opacity: .72; margin-top: 5px; }
.bubble.them { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.bubble.me { align-self: flex-end; background: var(--bordeaux-deep); color: #fff; border-bottom-right-radius: 4px; }
.bubble.me .bmeta { opacity: .82; }
.bubble.callback { align-self: flex-start; background: var(--gold-soft); color: #7a5a12; border: 1px solid var(--gold); }
.supportrow.is-unread { border-color: var(--gold); border-left-width: 5px; background: #EDF6F5; }
.card.is-unread { border-left: 5px solid var(--gold); background: #EDF6F5; }
.card.is-unread:target, .supportrow.is-unread:target { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Segment-knoppen: radio-opties als knoppenrij naast elkaar (bijv. berichttype) */
.segbtns { display: flex; gap: 10px; flex-wrap: wrap; }
.segbtn { flex: 1 1 0; min-width: 104px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 10px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font-weight: 600; cursor: pointer; transition: border-color .12s, background .12s, color .12s; }
.segbtn:hover { border-color: var(--gold); }
.segbtn input { position: absolute; opacity: 0; width: 0; height: 0; }
.segbtn:has(input:checked) { background: var(--bordeaux-deep); border-color: var(--bordeaux-deep); color: #fff; }
.segbtn:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Uitklap-contactkiezer (uitvaart: klik knop → contactenlijst → klik contact = toegevoegd) */
.uv-picker > summary { list-style: none; cursor: pointer; display: inline-flex; }
.uv-picker > summary::-webkit-details-marker { display: none; }
.uv-picker[open] > summary { margin-bottom: 4px; }
.uv-picklist { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; max-height: 320px; overflow-y: auto; }
.uv-pickitem { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: #fff; border: none; border-bottom: 1px solid var(--line); padding: 11px 13px; cursor: pointer; font: inherit; color: var(--ink); }
.uv-pickitem:last-child { border-bottom: none; }
.uv-pickitem:hover { background: var(--cream); }
.uv-pickitem .avatar { flex: none; }

/* Nette keuze-opties (bijv. ontgrendelmoment testament) */
.uv-opt { display: flex; gap: 11px; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px; padding: 13px 15px; cursor: pointer; font-weight: 400; transition: border-color .12s, background .12s; }
.uv-opt:hover { border-color: var(--gold); }
.uv-opt > input[type=radio] { width: 18px; height: 18px; flex: none; margin: 2px 0 0; accent-color: var(--bordeaux-deep); cursor: pointer; }
.uv-opt:has(input[type=radio]:checked) { border-color: var(--bordeaux-deep); background: #fbf3ee; }
.uv-opt .uv-opt-body { flex: 1; }
.uv-opt .uv-opt-sub { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- Tijdlijn ---------- */
.timeline { display: flex; flex-direction: column; gap: 12px; }
.tl-item { display: flex; gap: 14px; align-items: flex-start; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.tl-icon { flex: none; width: 40px; height: 40px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--gold-soft); color: var(--bordeaux-darker); font-size: 1.1rem; }
.tl-body { flex: 1; min-width: 0; }
.tl-body .kind { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.tl-body .title { font-family: var(--font-serif); font-weight: 700; font-size: 1.02rem; margin: 1px 0; }
.tl-body .meta { font-size: 0.82rem; color: var(--muted); }

/* ---------- Dierbaren-lijst ---------- */
.people { display: flex; flex-direction: column; gap: 8px; }
.person { display: flex; align-items: center; gap: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; cursor: pointer; }
.person.active { border-color: var(--bordeaux-bright); box-shadow: 0 0 0 1px var(--bordeaux-bright); }
.person .avatar { width: 34px; height: 34px; border-radius: var(--radius-sm); display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--bordeaux-bright); }
.person .avatar.gold { background: var(--gold); }
.person .p-name { flex: 1; line-height: 1.15; }
.person .p-name small { color: var(--muted); }

/* ---------- Formulieren ---------- */
label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 5px; }
input, select, textarea {
  width: 100%; padding: 10px 12px; font-family: inherit; font-size: 0.95rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184,134,47,0.18); }
.field { margin-bottom: 16px; }

/* ---------- Auth-schermen (gecentreerd op crème) ---------- */
/* Kaart altijd exact gecentreerd: breedte binnen de wrap-padding (nooit 94vw +
   padding samen breder dan het scherm), en svh zodat de verticale centrering op
   telefoons klopt ondanks de meeschuivende adresbalk. */
.auth-wrap { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 24px 16px; }
.auth-card { width: min(460px, 100%); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 34px; }
@media (max-width: 480px) {
  .auth-wrap { padding: 14px 10px; }
  .auth-card { padding: 24px 18px; }
}
.auth-card .brand { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 700; color: var(--bordeaux-deep); }
.auth-card .brand .dot { color: var(--gold); }

/* Registratie-wizard */
.wizard-card { width: min(680px, 100%); }
.wizard-brand { text-align: center; font-family: var(--font-serif); font-size: 1.7rem; font-weight: 700; color: var(--bordeaux-deep); margin-bottom: 22px; }
.wizard-brand .dot { color: var(--gold); }
.stepper { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; }
.step { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.82rem; padding: 0 6px; }
.step .num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #DCE5E4; color: var(--muted); font-weight: 700; font-size: 0.78rem; }
.step.active { color: var(--ink); font-weight: 600; }
.step.active .num { background: var(--bordeaux-bright); color: #fff; }
.step.done .num { background: var(--status-green); color: #fff; }
.wizard-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; }
.form-error { background: #FBE9E7; color: #12807F; border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 16px; font-size: 0.9rem; }

/* Contact-kiezer (bericht aanmaken) */
.contact-list { display: grid; gap: 10px; }
.contact-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.contact-card .avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--bordeaux-bright); color: #fff; font-weight: 700; flex: none; }
.contact-card:has(input:checked) { border-color: var(--bordeaux-bright); box-shadow: 0 0 0 1px var(--bordeaux-bright); background: var(--gold-soft); }

/* Cadeaushop (hoofdstuk 11) */
.shop-banner { background: var(--gold-soft); border: 1px solid #E8D5A8; border-radius: var(--radius); padding: 12px 16px; margin-bottom: 18px; color: #7A5A17; font-weight: 600; }
.dash-banner { display: flex; align-items: center; justify-content: center; text-align: center; gap: 10px; background: var(--gold-soft); border: 2.5px solid var(--bordeaux-deep); border-radius: var(--radius); padding: 13px 16px; margin-bottom: 20px; color: #7A5A17; font-weight: 700; }
.dash-banner #dbtext { transition: opacity .35s ease; }
.shop-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.shop-row { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper); box-shadow: var(--shadow); display: flex; flex-direction: column; }
/* Vierkante productfoto met net kader — niet over de volle breedte */
.shop-row .top { background: var(--cream); display: grid; place-items: center; padding: 16px; }
.shop-row .top .shop-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; border-radius: var(--radius-sm); }
.shop-row .top .shop-emoji { width: 100%; aspect-ratio: 1 / 1; display: grid; place-items: center; font-size: 2.6rem; }
.shop-row .bottom { flex: 1; }
/* Admin-lijst: vierkante thumbnail links naast de productinfo */
.shopadmin-card { padding: 0; overflow: hidden; display: flex; align-items: stretch; position: relative; }
.shopadmin-card .drag-handle { position: absolute; top: 6px; left: 6px; z-index: 2; cursor: grab; color: var(--muted); font-size: 1.1rem; line-height: 1; padding: 2px 4px; border-radius: 4px; background: rgba(255,255,255,0.7); user-select: none; }
.shopadmin-card .drag-handle:active { cursor: grabbing; }
.shopadmin-card.dragging { opacity: 0.5; outline: 2px dashed var(--gold); }
.shopadmin-top { position: relative; width: 104px; flex: none; aspect-ratio: 1 / 1; display: grid; place-items: center; background: var(--gold-soft); }
.shopadmin-top .shop-img { width: 100%; height: 100%; object-fit: cover; }
.shopadmin-top .shop-emoji { font-size: 1.9rem; }
.shopadmin-flag { position: absolute; top: 6px; right: 6px; }
.shopadmin-body { flex: 1; }
.shop-imgedit { display: flex; gap: 16px; align-items: flex-start; }
.shop-imgprev { width: 140px; height: 140px; flex: none; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--cream); display: grid; place-items: center; overflow: hidden; }
.shop-imgprev img { width: 100%; height: 100%; object-fit: cover; }
.shop-imgprev .shop-emoji { font-size: 2.2rem; }
.shop-row .bottom { padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.shop-row .price { color: var(--bordeaux-bright); font-weight: 700; }
.shop-row h3 { margin: 0 0 2px; }
/* Opslagindicator in de zijbalk (hoofdstuk 14.1) */
.storage { margin-top: 18px; padding: 0 22px; }
.storage .eyebrow { color: #C9A9A0; }
.storage .bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.15); margin: 6px 0; overflow: hidden; }
.storage .bar span { display: block; height: 100%; background: var(--gold); }
.storage small { color: #C9A9A0; }
.storage-buy { display: inline-block; margin-top: 10px; font-size: 0.78rem; font-weight: 600; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,0.12); color: #F3E8DC; border: 1px solid rgba(255,255,255,0.22); text-decoration: none; }
.storage-buy:hover { background: rgba(255,255,255,0.2); color: #fff; }

/* Admin accounts zoeken (hoofdstuk 15.4) */
.acct-search { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; }
.acct-search select { flex: 0 0 auto; }
.acct-search input { flex: 1 1 280px; }
.acct-list { display: grid; max-height: 62vh; overflow-y: auto; }
.acct-row { display: flex; align-items: center; gap: 14px; padding: 12px 6px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: background .12s; }
.acct-row:last-child { border-bottom: none; }
.acct-row:hover { background: var(--cream); }
.acct-av { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--bordeaux-deep); color: #fff; display: grid; place-items: center; font-family: var(--font-serif); font-weight: 700; }
.acct-name { font-weight: 600; flex: 0 0 30%; min-width: 120px; }
.acct-email { color: var(--muted); font-size: 0.9rem; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-tags { flex: none; display: flex; gap: 4px; align-items: center; }
.acct-chev { color: var(--gold); font-size: 1.3rem; flex: none; }
.acct-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.acct-stats { color: var(--muted); font-size: 0.82rem; white-space: nowrap; flex: 0 0 auto; }
.person-vid { color: var(--muted); font-size: 0.82rem; white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 720px) { .acct-email, .acct-stats { display: none; } .acct-name { flex: 1; } }

/* Contacten & personenlijst (hoofdstuk 5/6) */
.person-list { display: grid; }
.person-item { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.person-item:last-child { border-bottom: none; }
.person-item .person-row { flex: 1; border-bottom: none; }
.person-row { display: flex; align-items: center; gap: 14px; padding: 13px 6px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: background .12s; }
.person-row:last-child { border-bottom: none; }
.person-row:hover { background: var(--cream); }
.person-del { margin: 0; flex: none; }
.person-del button { background: none; border: none; cursor: pointer; font-size: 1.05rem; padding: 8px 10px; border-radius: var(--radius-sm); opacity: 0.55; transition: opacity .12s, background .12s; }
.person-del button:hover { opacity: 1; background: rgba(192,57,43,0.10); }
.person-avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--bordeaux-deep); color: #fff; display: grid; place-items: center; font-family: var(--font-serif); font-weight: 700; }
.person-name { font-weight: 600; flex: 1; }
.person-rel { color: var(--muted); font-size: 0.88rem; }
.person-chev { color: var(--gold); font-size: 1.3rem; line-height: 1; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
@media (max-width: 620px) { .row2, .row3 { grid-template-columns: 1fr; } }

/* Admin bannerboodschappen (hoofdstuk 14.2) */
.banner-list { display: grid; gap: 10px; }
.banner-row { display: flex; align-items: center; gap: 12px; margin: 0; }
.banner-row input[name="text"] { flex: 1; }
.banner-active { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; white-space: nowrap; margin: 0; }

/* Codex-assistent (hoofdstuk 18) */
/* De Codex-assistent staat rechtsonder: de plek waar mensen een hulpknop verwachten. */
#codex-assist { position: fixed; right: 22px; bottom: 22px; z-index: 200; }
.pa-fab { border: none; background: none; cursor: pointer; padding: 0; width: 112px; filter: drop-shadow(0 8px 18px rgba(60,25,15,.35)); transition: transform .15s; }
.pa-fab img { width: 112px; height: auto; display: block; }
.pa-fab:hover { transform: translateY(-3px) scale(1.03); }
/* Vaste breedte (géén max-width): in de smalle assistent-container kromp de ballon
   anders tot een smalle strook van honderden pixels hoog, die knoppen op de pagina
   eronder onklikbaar maakte. */
.pa-balloon { position: absolute; bottom: 124px; right: 0; background: var(--paper); border: 1.5px solid var(--bordeaux-deep); color: var(--ink); padding: 10px 30px 10px 14px; border-radius: 14px; font-size: .9rem; font-weight: 600; width: 230px; box-sizing: border-box; box-shadow: 0 8px 22px -8px rgba(60,25,15,.4); cursor: pointer; }
.pa-balloon:hover { background: var(--cream); }
.pa-balloon::after { content: ""; position: absolute; right: 30px; bottom: -9px; width: 16px; height: 16px; background: var(--paper); border-right: 1.5px solid var(--bordeaux-deep); border-bottom: 1.5px solid var(--bordeaux-deep); transform: rotate(45deg); }
.pa-balloon-x { position: absolute; top: 2px; right: 2px; width: 24px; height: 24px; display: grid; place-items: center; background: none; border: none; font-size: 1.15rem; color: var(--muted); cursor: pointer; line-height: 1; border-radius: 50%; }
.pa-balloon-x:hover { background: var(--cream); color: var(--bordeaux-bright); }
.pa-panel { position: absolute; bottom: 124px; right: 0; width: 340px; max-width: calc(100vw - 44px); background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 60px -20px rgba(60,25,15,.55); display: flex; flex-direction: column; overflow: hidden; }
#codex-assist [hidden] { display: none !important; }
.pa-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--bordeaux-deep); color: #F3E8DC; }
.pa-head-av { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--bordeaux-bright); }
.pa-head-t { flex: 1; } .pa-head-t strong { font-family: var(--font-serif); }
.pa-sub { font-size: .74rem; color: #D9B8A2; }
.pa-tts, .pa-close { background: rgba(255,255,255,.14); border: none; color: #fff; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: .95rem; }
.pa-tts:hover, .pa-close:hover { background: rgba(255,255,255,.26); }
.pa-msgs { flex: 1; overflow-y: auto; max-height: 46vh; min-height: 180px; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--cream); }
.pa-msg { max-width: 84%; padding: 9px 13px; border-radius: 14px; font-size: .9rem; line-height: 1.45; white-space: pre-wrap; }
.pa-msg.bot { background: var(--paper); border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 4px; }
.pa-msg.user { background: var(--bordeaux-bright); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.pa-input { display: flex; align-items: center; gap: 8px; padding: 10px; border-top: 1px solid var(--line); background: var(--paper); }
.pa-input input { flex: 1; border: 1px solid var(--line); border-radius: 20px; padding: 9px 14px; font-size: .9rem; }
.pa-mic, .pa-send { flex: none; width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer; font-size: 1rem; }
.pa-mic { background: var(--cream); color: var(--bordeaux-bright); }
.pa-mic.rec { background: var(--status-alert); color: #fff; animation: recpulse 1s infinite; }
.pa-send { background: var(--bordeaux-bright); color: #fff; }
/* Versleepbare assistent: fab niet laten scrollen tijdens slepen; paneel klapt om
   naar beneden wanneer de assistent bovenin het scherm is gezet */
.pa-fab { touch-action: none; }
#codex-assist.pa-below .pa-panel, #codex-assist.pa-below .pa-balloon { bottom: auto; top: 124px; }
#codex-assist.pa-left .pa-panel, #codex-assist.pa-left .pa-balloon { right: auto; left: 0; }
@media (max-width: 600px){ #codex-assist { right: 14px; bottom: 14px; } .pa-fab, .pa-fab img { width: 84px; } .pa-balloon, .pa-panel { bottom: 96px; } #codex-assist.pa-below .pa-panel, #codex-assist.pa-below .pa-balloon { bottom: auto; top: 96px; } }

/* Taalkiezer in de zijbalk (meertaligheid) */
.langpick { display: flex; align-items: center; gap: 8px; margin: 16px 22px 0; flex-wrap: wrap; }
.langpick .globe { opacity: 0.7; font-size: 1rem; margin-right: 2px; }
.langpick .flag { display: inline-flex; align-items: center; text-decoration: none; opacity: 0.6; transition: opacity .15s; border-radius: 3px; }
.langpick .flag:hover { opacity: 1; }
.langpick .flag.active { opacity: 1; box-shadow: 0 0 0 2px var(--gold); }
.langpick .flagimg { width: 24px; height: 16px; display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,0.3); }
.langpick .flagcode { display: inline-block; min-width: 22px; text-align: center; font-size: 0.68rem; font-weight: 700; color: #F3E8DC; padding: 3px 5px; border-radius: 4px; background: rgba(255,255,255,0.15); }
/* Taalkiezer in de app-zijbalk: knop + doorzoekbare dropdown */
.langdd { position: relative; margin: 16px 18px 0; }
.langdd-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); border-radius: 8px; color: #F3E8DC; cursor: pointer; font: inherit; font-size: 0.85rem; }
.langdd-btn:hover { background: rgba(255,255,255,0.14); }
.langdd-btn .flagimg { width: 22px; height: 15px; border-radius: 2px; }
.langdd-cur { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.langdd-panel { position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; z-index: 60; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 8px; }
.langdd-panel input { width: 100%; margin-bottom: 6px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; font: inherit; font-size: 0.85rem; }
.langdd-list { max-height: 260px; overflow-y: auto; }
.langdd-opt { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 6px; text-decoration: none; color: var(--ink); font-size: 0.88rem; }
.langdd-opt:hover { background: var(--cream); }
.langdd-opt.active { background: var(--cream); font-weight: 700; }
.langdd-opt .flagimg { width: 22px; height: 15px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.12); }
.langdd-opt .flagcode { display: inline-block; min-width: 22px; text-align: center; font-size: 0.66rem; font-weight: 700; padding: 2px 4px; border-radius: 4px; background: var(--cream); }

/* Admin talen-raster */
.lang-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.lang-opt { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 10px; background: var(--cream); border-radius: var(--radius-sm); font-weight: 500; }

/* In-browser opname (video/audio) */
.recorder { border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 14px; background: var(--cream); }
.recorder [hidden] { display: none !important; }
.rec-preview { width: 100%; max-width: 420px; aspect-ratio: 4 / 3; background: #1c1310; border-radius: var(--radius-sm); display: block; margin-bottom: 10px; }
.rec-audiobox { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); font-weight: 600; color: var(--muted); }
.rec-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--muted); flex: none; }
.rec-audiobox.recording { color: var(--status-alert); }
.rec-audiobox.recording .rec-dot { background: var(--status-alert); animation: recpulse 1s ease-in-out infinite; }
@keyframes recpulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .rec-audiobox.recording .rec-dot { animation: none; } }
.rec-audio { width: 100%; max-width: 420px; margin-bottom: 10px; }
.rec-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rec-start { background: var(--status-alert); border-color: var(--status-alert); }
.rec-start:hover { background: #a52f22; }
.rec-status { font-size: 0.85rem; }
.msg-media { display: block; width: 100%; max-width: 480px; margin: 12px 0 6px; border-radius: var(--radius-sm); background: #1c1310; }
audio.msg-media { background: transparent; }

/* Berichtenlijst (hoofdstuk 6) */
.msg-list { display: grid; }
.msg-row { display: flex; align-items: center; gap: 14px; padding: 13px 4px; border-bottom: 1px solid var(--line); }
.msg-row:last-child { border-bottom: none; }
.msg-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--cream); display: grid; place-items: center; font-size: 1.2rem; }
/* min-width:0 + wrap: lange namen/badges mogen de rij nooit breder maken dan het
   scherm (mobiel schoof de hele pagina anders horizontaal heen en weer). */
.msg-main { flex: 1; min-width: 0; }
.msg-main .muted { overflow-wrap: anywhere; }
.msg-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.msg-top strong { overflow-wrap: anywhere; }
.msg-act { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 600px) {
  .msg-row { flex-wrap: wrap; }
  .msg-act { width: 100%; margin-left: 54px; justify-content: flex-start; gap: 16px; }
}

/* Uitvaartplanning (hoofdstuk 9) */
.uv-radio { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.uv-blocks { display: grid; gap: 4px; margin-bottom: 14px; }
.uv-block { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.uv-block:last-child { border-bottom: none; }
.uv-newblock { border-top: 1px dashed var(--line); padding-top: 14px; }

/* Admin Shop settings (hoofdstuk 15.2) */
.shopadmin-grid { display: grid; gap: 14px; }
.shopadmin-card { padding: 0; overflow: hidden; }
.shopadmin-card.is-inactive { opacity: 0.6; }
.shopadmin-top { background: var(--gold-soft); display: flex; align-items: center; justify-content: center; gap: 10px; padding: 26px; font-size: 1.8rem; }
.shopadmin-body { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; }
.price-chip { display: inline-block; margin-top: 6px; padding: 3px 10px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-sm); font-weight: 600; font-size: 0.9rem; }

/* Medewerkers & rechten (hoofdstuk 15.5) */
.staff-list { display: grid; gap: 4px; }
.staff-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.staff-list .staff-row:last-child { border-bottom: none; }
.staff-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.badge-role { background: var(--gold-soft); color: #7a5a12; text-transform: none; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.perm-opt { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; background: var(--cream); border-radius: var(--radius-sm); font-weight: 500; cursor: pointer; }
.perm-opt input { margin: 0; }

/* Wallet-tab (hoofdstuk 14.4) */
.walletcard { background: linear-gradient(135deg, var(--bordeaux-deep), var(--bordeaux-darker)); color: #F7E9DC; border: none; }
.walletcard .eyebrow { color: #D9B8A2 !important; }
.wallet-balance { font-family: var(--font-serif); font-size: 2.4rem; font-weight: 700; color: #fff; margin: 4px 0 2px; }
.walletcard .btn { background: var(--gold); border-color: var(--gold); color: #FFFFFF; }
.walletcard .btn:hover { background: #a9761f; border-color: #a9761f; }
.walletcard .muted { color: #D9B8A2 !important; }
.topup-opt { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 12px; background: rgba(255,255,255,0.10); border-radius: var(--radius-sm); font-weight: 600; color: #F7E9DC; cursor: pointer; }
.topup-opt input[type="number"] { width: 72px; }
.wallet-table { width: 100%; border-collapse: collapse; }
.wallet-table th { text-align: left; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 4px 8px 10px; border-bottom: 1px solid var(--line); }
.wallet-table td { padding: 12px 8px; border-bottom: 1px solid var(--line); }
.wallet-table tbody tr:last-child td { border-bottom: none; }

.btn-large { padding: 13px 26px; font-size: 1rem; }
.home-cols { display: grid; grid-template-columns: 250px 1fr; gap: 24px; align-items: start; }
.inline-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.inline-form input[type="text"], .inline-form input[type="email"] { flex: 1 1 160px; }
.inline-form input[type="number"] { width: 80px; }
.inline-form label { margin: 0; font-weight: 600; }
.buddies { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 8px; }
.buddy { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--cream); border-radius: var(--radius-sm); }
.buddy form { margin: 0; }
.eyebrow { display: block; }

/* Uitleg-animatie embed (Hoe het werkt) */
.uitleg-embed, .kluis-embed { max-width: 900px; aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px -30px rgba(78,30,34,.5); }
.uitleg-embed iframe, .kluis-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Digitale kluis */
.vault-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.vault-card { display: flex; flex-direction: column; gap: 4px; padding: 20px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--paper); text-decoration: none; color: inherit; box-shadow: 0 1px 3px rgba(22,41,43,.05); transition: box-shadow .15s, transform .15s; }
.vault-card:hover { box-shadow: 0 10px 24px -14px rgba(78,30,34,.4); transform: translateY(-2px); }
.vault-card .vault-ic { font-size: 1.8rem; }
.vault-card .vault-name { font-weight: 700; }
.vault-card .vault-meta { font-size: .85rem; color: var(--muted); }
.vault-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vault-items li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.vault-items .vi-name { flex: 1; font-weight: 600; }
.vault-items .vi-lock { color: var(--gold); }
.kluis-factors { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.kluis-factors li { line-height: 1.5; }
.kluis-warn { margin-top: 16px; background: rgba(184,134,47,.08); border: 1px solid rgba(184,134,47,.45); border-radius: 10px; padding: 14px 16px; line-height: 1.55; }
.vault-items li { display: block; }
.vi-row { display: flex; align-items: center; gap: 10px; }
.vi-row .vi-name { flex: 1; }
.vi-body { display: none; margin: 10px 0 0; padding: 12px 14px; background: var(--cream); border: 1px solid var(--line); border-radius: 8px;
  white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: .95rem; }
.btn-sm { padding: 5px 12px; font-size: .85rem; }
.vi-media { margin: 10px 0 0; }
.vi-media audio { width: 100%; }
.vi-media video { width: 100%; border-radius: 8px; background: #000; }
.vault-prog { height: 8px; border-radius: 5px; background: var(--cream); border: 1px solid var(--line); overflow: hidden; }
.vault-prog > span { display: block; height: 100%; width: 0; background: var(--gold); transition: width .15s; }
/* Extra identiteiten (e-mail/telefoon) */
.id-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.id-chip { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.id-chip .id-val { flex: 1; font-weight: 600; word-break: break-all; }
.id-chip .id-acct { font-size: .78rem; color: var(--status-green, #2e7d32); font-weight: 600; white-space: nowrap; }
.id-chip .id-del { border: none; background: none; color: var(--muted); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.id-chip .id-del:hover { color: var(--status-alert); }
.id-chip .id-mk { background: none; border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; font-size: 0.72rem; color: var(--muted); cursor: pointer; font-family: inherit; white-space: nowrap; }
.id-chip .id-mk:hover { border-color: var(--gold); color: var(--ink); background: var(--cream); }
/* AI-schrijfassistent (hfdst 6.3): inklapbaar hulppaneel bij het tekstveld */
.wh-box { margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--cream); }
.wh-box > summary { padding: 11px 14px; cursor: pointer; font-weight: 600; color: var(--bordeaux-deep); list-style: none; }
.wh-box > summary::-webkit-details-marker { display: none; }
.wh-box > summary::before { content: '▸ '; color: var(--gold); }
.wh-box[open] > summary::before { content: '▾ '; }
.wh-body { padding: 4px 14px 14px; }
.wh-body textarea { background: #fff; }
/* Opname-limietindicator: vult richting de maximale opnamegrootte (500 MB) */
.rec-limit { height: 8px; background: var(--cream); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin: 8px 0; }
.rec-limit span { display: block; height: 100%; width: 0; background: var(--gold); transition: width .4s; }
.rec-limit.warn span { background: var(--status-alert, #B23A34); }
/* Upload-indicator: overlay met voortgangsbalk bij (video-)uploads */
#upOverlay { position: fixed; inset: 0; background: rgba(22,41,43,.55); display: grid; place-items: center; z-index: 9999; }
#upOverlay .up-box { background: var(--paper, #EDF6F5); border-radius: 14px; padding: 26px 30px; width: min(420px, 90vw); box-shadow: 0 24px 60px -30px rgba(0,0,0,.6); text-align: center; }
#upOverlay .up-title { font-weight: 700; color: var(--bordeaux-deep); margin-bottom: 14px; font-size: 1.05rem; }
#upOverlay .up-bar { height: 12px; background: var(--cream, #FFFFFF); border-radius: 999px; overflow: hidden; border: 1px solid var(--line, #E7DDCF); }
#upOverlay .up-bar span { display: block; height: 100%; width: 0; background: var(--gold, #12807F); transition: width .2s; }
#upOverlay .up-pct { margin-top: 10px; font-weight: 600; }
#upOverlay .up-note { margin-top: 6px; font-size: .82rem; color: var(--muted); }
/* Paginering-in-de-pagina (data-paginate): balk boven de lijst met paginanummers */
.pgr { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.pgr-label { font-size: 0.82rem; color: var(--muted); margin-right: 4px; }
.pgr-btn { min-width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink);
  font-family: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.pgr-btn:hover { border-color: var(--gold); background: var(--cream); }
.pgr-btn.is-on { background: var(--gold); border-color: var(--gold); color: #FFFFFF; }
.id-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.id-add select { padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-family: inherit; }
.id-add input { flex: 1; min-width: 200px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; }
/* Dashboard: inkomend buddy-verzoek + meldingen */
.buddy-req { border-left: 4px solid var(--gold); display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.buddy-req .br-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.dash-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-left: 4px solid var(--bordeaux-deep, #0E6867); margin-bottom: 14px; }
.seal-code input { width: 100%; box-sizing: border-box; font-family: "Consolas","SF Mono",ui-monospace,monospace; font-size: 1.3rem;
  letter-spacing: .12em; text-align: center; padding: 16px; border: 2px dashed var(--gold); border-radius: 10px; background: var(--cream); color: var(--bordeaux-deep); font-weight: 700; }
.pp-hint { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 13px 15px; background: rgba(184,134,47,.09);
  border: 1px solid rgba(184,134,47,.4); border-radius: 10px; font-size: .92rem; line-height: 1.55; }
.pp-hint > span { flex: 1; }
.seal-check { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; padding: 14px 16px; background: var(--cream);
  border: 1px solid var(--line); border-radius: 10px; font-weight: 500; line-height: 1.5; cursor: pointer; }
.seal-check input { margin: 2px 0 0; width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--bordeaux, #0E6867); cursor: pointer; }
.seal-check span { flex: 1; }
@media print {
  .sidebar, .main-head a, #regenBtn, #copyBtn, #printBtn, #sealBtn, #confirmSaved, .perm-opt, .seal-check { display: none !important; }
  .app, .main { display: block; margin: 0; }
  .seal-card { border: none; box-shadow: none; }
}
/* Looker Studio-rapport embed (Google-statistieken) */
.looker-embed { width: 100%; height: calc(100vh - 190px); min-height: 460px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.looker-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Telefoon- en landvelden met doorzoekbare dropdown */
.phone-field, .country-field { position: relative; display: flex; gap: 8px; }
.country-field { display: block; }
.phone-field .pf-cc { display: inline-flex; align-items: center; gap: 4px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--cream); font-weight: 600; color: var(--ink); cursor: pointer; white-space: nowrap; }
.phone-field .pf-num { flex: 1; }
.country-field .cf-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); cursor: pointer; text-align: left; font-size: 1rem; }
.country-field .cf-ph { color: var(--muted); }
.pf-caret { color: var(--muted); font-size: 0.8rem; }
.pf-pop { position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: 0 12px 30px -12px rgba(78,30,34,0.4); padding: 8px; max-width: 340px; }
.pf-pop[hidden] { display: none; }
.pf-search { width: 100%; margin-bottom: 6px; box-sizing: border-box; }
.pf-list { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; }
.pf-item { padding: 9px 10px; border-radius: var(--radius-sm); cursor: pointer; display: flex; justify-content: space-between; gap: 10px; font-size: 0.95rem; }
.pf-item:hover { background: var(--cream); }
.pf-dial { color: var(--muted); font-variant-numeric: tabular-nums; }

/* Bestellingen — medewerker doorzetten naar partner (hfdst 11 / 15.2) */
.order-list { display: grid; gap: 14px; }
.order-card { padding: 16px 18px; }
.order-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.order-head .kind { font-weight: 700; color: var(--bordeaux-bright); }
.order-to { color: var(--ink); font-size: 0.92rem; margin-top: 2px; }
.order-when { font-size: 0.9rem; color: var(--muted); white-space: nowrap; }
.order-note { margin: 10px 0 6px; font-style: italic; color: var(--ink); }
.order-files { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.order-files a { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 600; text-decoration: none; color: var(--bordeaux-bright); }
.order-forward { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.order-forward select { flex: 1 1 220px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
/* Landfilter met vlaggen in accountzoeken (hfdst 15.4) */
.country-flags { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.country-flag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; text-decoration: none; color: var(--ink); font-size: 0.88rem; font-weight: 600; }
.country-flag:hover { border-color: var(--bordeaux-bright); }
.country-flag.active { background: var(--bordeaux-deep); border-color: var(--bordeaux-deep); color: #F7E9DC; }
.country-flag .flag { width: 20px; height: 14px; border-radius: 2px; overflow: hidden; display: inline-block; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); }
.country-flag .flag svg { display: block; width: 100%; height: 100%; }
.country-flag .count { opacity: 0.7; font-weight: 500; }

/* Uitloggen en Beheer in de navigatiebalk: alleen op mobiel (op desktop staan ze in het whoami-blok) */
.nav-logout { display: none; margin: 0; }
.nav-admin { display: none; }
.nav-logout button { background: none; border: none; color: #E7D3C8; font: inherit; font-size: 0.95rem; padding: 11px 16px; white-space: nowrap; cursor: pointer; border-left: 3px solid transparent; }
.nav-logout button:hover { background: rgba(255,255,255,0.05); color: #fff; }
.nav-mobile-only { display: none !important; }
/* Hamburger-knop: alleen zichtbaar op mobiel */
.nav-burger { display: none; background: none; border: 1.5px solid rgba(255,255,255,0.45); color: #fff; font-family: var(--font-sans); font-size: 1rem; font-weight: 600; padding: 8px 14px; border-radius: 8px; cursor: pointer; }
.nav-burger:hover { background: rgba(255,255,255,0.08); }

@media (max-width: 780px) {
  .home-cols { grid-template-columns: 1fr; }
  .app { flex-direction: column; }
  .sidebar { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 8px 14px; }
  .sidebar .brand-sub, .sidebar .whoami { display: none; }
  .sidebar nav, .sidebar .storage, .sidebar .langpick { display: none; }
  .nav-burger { display: inline-flex; align-items: center; }
  .sidebar.open nav { display: flex; flex-direction: column; width: 100%; order: 10; padding: 10px 0 4px; }
  .sidebar.open nav a { padding: 12px 10px; font-size: 1.02rem; border-left: none; border-radius: 8px; }
  .sidebar.open .storage { display: block; width: 100%; order: 11; }
  .sidebar.open .langpick { display: flex; width: 100%; order: 12; margin: 12px 0 4px; }
  .nav-logout { display: block; }
  .sidebar.open nav a.nav-admin { display: block; }
  .nav-mobile-only { display: block !important; white-space: nowrap; }
  .main { padding: 18px; }
  /* iOS zoomt automatisch (en blijvend) in op invoervelden kleiner dan 16px —
     op mobiel dus altijd minstens 16px, over alle veld-stijlen heen. */
  input, select, textarea { font-size: 16px !important; }
  /* Tikdoelen: kleine knoppen krijgen op mobiel een vingervriendelijk raakvlak. */
  .btn-sm, .link-btn { padding: 10px 14px; }
}

/* Snelkeuzeknoppen op het dashboard (nieuw bericht / cadeau) */
.quick-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-top: 14px; }
.quick-act {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 22px 14px; border: none; border-radius: 14px;
  background: var(--bordeaux-bright); text-decoration: none; color: #fff;
  font-weight: 600; text-align: center; box-shadow: 0 2px 8px rgba(78,30,34,0.18);
  transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
}
.quick-act:hover { background: var(--bordeaux-deep); box-shadow: 0 5px 16px rgba(78,30,34,0.28); transform: translateY(-2px); color: #fff; }
.quick-act .qa-icon { font-size: 1.9rem; line-height: 1; }

/* Stap-voor-stap berichtenwizard */
.wiz-dots { display: flex; gap: 8px; justify-content: center; margin: 0 0 18px; }
.wdot { width: 38px; height: 7px; border-radius: 4px; background: var(--line); transition: background 0.2s; }
.wdot.done { background: var(--gold); }
.wdot.active { background: var(--bordeaux-bright); }
.opt-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 14px; }
.opt-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 20px 14px; border: 2px solid var(--line); border-radius: 14px; background: #fff;
  cursor: pointer; text-align: center; font-weight: 400;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.opt-card input { position: absolute; opacity: 0; pointer-events: none; }
.opt-card .qa-icon { font-size: 1.8rem; line-height: 1; }
.opt-card .muted { font-size: 0.82rem; }
.opt-card:hover { border-color: var(--gold); }
.opt-card.sel, .opt-card:has(input:checked) {
  border-color: var(--bordeaux-bright); background: rgba(150,56,46,0.05);
  box-shadow: 0 3px 12px rgba(78,30,34,0.12);
}
.wiz-sum { margin-top: 10px; }
.sum-row { display: flex; gap: 14px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); }
.sum-row .k { flex: 0 0 110px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
.sum-row .v { flex: 1; }
.sum-row .sum-edit { font-size: 0.85rem; white-space: nowrap; }

/* Grote, duidelijke opnameknoppen (video/audio) */
.rec-big { padding: 16px 32px; font-size: 1.25rem; font-weight: 700; border-radius: 12px; }

/* Belscherm AI-evenbeeld (Skype-stijl, in huisstijl) */
.call-wrap { max-width: 620px; margin: 18px auto 0; }
.call-card {
  background: radial-gradient(120% 130% at 50% 15%, #8A3A3C 0%, #0E6867 45%, #0E6867 100%);
  border-radius: 20px; padding: 44px 28px 30px; text-align: center; color: #F3E7DA;
  box-shadow: 0 30px 70px -34px rgba(46,20,22,.7);
  display: flex; flex-direction: column; align-items: center;
}
.call-avatar {
  border-radius: 50%; overflow: hidden; background: var(--gold-soft);
  border: 4px solid var(--gold); box-shadow: 0 14px 40px -14px rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.call-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.call-avatar-init { font-family: var(--font-serif); font-weight: 700; color: #0E6867; }
.call-avatar.listening { animation: call-pulse-gold 2s ease-in-out infinite; }
.call-avatar.speaking { animation: call-pulse-green 1.2s ease-in-out infinite; }
@keyframes call-pulse-gold { 0%,100% { box-shadow: 0 0 0 0 rgba(184,134,47,.55); } 50% { box-shadow: 0 0 0 16px rgba(184,134,47,0); } }
@keyframes call-pulse-green { 0%,100% { box-shadow: 0 0 0 0 rgba(75,122,74,.65); } 50% { box-shadow: 0 0 0 16px rgba(75,122,74,0); } }
.call-name { font-family: var(--font-serif); font-weight: 700; font-size: 1.9rem; color: #FFF7EE; margin-top: 18px; }
.call-ai { font-size: 0.82rem; color: #E4C7BC; margin-top: 4px; }
.call-status { min-height: 1.4em; margin-top: 18px; font-size: 1rem; color: #DEEFED; }
.call-btns { display: flex; gap: 22px; align-items: center; margin-top: 22px; }
.call-btn {
  width: 68px; height: 68px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px -8px rgba(0,0,0,.55); transition: transform .12s, filter .12s;
}
.call-btn:hover { transform: scale(1.07); filter: brightness(1.08); }
.call-green { background: #3E8C3C; }
.call-red { background: #C0392B; }
.call-txt {
  width: 46px; height: 46px; background: rgba(255,255,255,.14); color: #F3E7DA;
  font-weight: 700; font-size: 1rem; border: 1.5px solid rgba(255,255,255,.35);
}
.call-txt.on { background: var(--gold); color: #FFFFFF; border-color: var(--gold); }
.call-info { font-size: 0.8rem; color: #D9BFB4; margin: 18px 0 0; }
.call-info a { color: #DEEFED; }
@media (max-width: 520px) { .call-card { padding: 30px 16px 24px; } .call-btn { width: 60px; height: 60px; } }

/* Jarvis-dashboard: tegels met ministatistieken */
.jv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.jv-tile {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 18px 16px; text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow); transition: border-color .15s, box-shadow .15s, transform .15s;
}
.jv-tile:hover { border-color: var(--gold); box-shadow: 0 6px 18px -6px rgba(78,30,34,.25); transform: translateY(-2px); }
.jv-ico { font-size: 1.7rem; line-height: 1; margin-bottom: 4px; }
.jv-kop { font-family: var(--font-serif); font-weight: 700; font-size: 1.05rem; line-height: 1.25; }
.jv-sub { font-size: 0.72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--gold); }
.jv-mini { font-size: 0.78rem; color: var(--muted); margin-top: 6px; }
.jv-alert {
  position: absolute; top: 12px; right: 12px; min-width: 22px; height: 22px; padding: 0 6px;
  background: var(--status-alert); color: #fff; border-radius: 999px;
  font-size: 0.75rem; font-weight: 700; line-height: 22px; text-align: center;
}

/* Koppelingenkaarten: duidelijke open/dicht-indicator */
.jv-kop-card summary::-webkit-details-marker { display: none; }
.jv-kop-card summary:hover { background: var(--cream); border-radius: 8px; }
.jv-caret { color: var(--gold); font-size: 1.1rem; transition: transform .15s; flex: none; }
.jv-kop-card[open] .jv-caret { transform: rotate(90deg); }

/* Prijzenoverzicht "Alle prijzen op een rij" (Prijzen- en Premium-pagina) */
.prijs-grid-ai { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px; align-items: stretch; max-width: 960px; margin-inline: auto; }
.prijs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.prijs-panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); overflow: hidden; }
.prijs-panel-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--cream); border-bottom: 2px solid var(--gold); font-family: var(--font-serif); font-size: 1.02rem; font-weight: 700; color: var(--bordeaux-deep); }
.prijs-rij { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.prijs-panel > .prijs-rij:last-child { border-bottom: none; }
.pr-label { font-size: 0.92rem; min-width: 0; }
.pr-sub { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 1px; }
.pr-bedrag { font-weight: 700; color: var(--bordeaux-bright); white-space: nowrap; font-size: 0.95rem; text-align: right; }
.pr-per { font-weight: 400; color: var(--muted); font-size: 0.78rem; }
.prijs-tussenkop { padding: 12px 16px 4px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); background: var(--paper); }

/* Prijstegel: dezelfde vorm in de app én op de website (zie public/home.css), zodat
   wie op de site kiest en later in zijn wallet terugkomt hetzelfde blok ziet. */
.prijstegel { display: flex; flex-direction: column; gap: 6px; text-align: center;
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 1px 3px rgba(22, 41, 43, .05); padding: 18px 14px; }
.prijstegel.is-goud { border-color: var(--gold); }
.prijstegel .pt-titel { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bordeaux-bright); }
.prijstegel .pt-prijs { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; color: var(--bordeaux-bright); }
.prijstegel .pt-per { font-size: 0.8rem; font-weight: 400; color: var(--muted); }
.prijstegel .pt-note { font-size: 0.82rem; color: var(--muted); }
.prijs-kop2 { font-family: var(--font-serif); color: var(--bordeaux-deep); font-size: 1.5rem; margin: 34px 0 6px; text-align: center; }
.prijs-kop3 { font-family: var(--font-serif); color: var(--bordeaux-deep); font-size: 1.2rem; margin: 26px 0 4px; text-align: center; }

/* Route-stap die nog te kiezen valt: het hele blok is een link naar de Wallet.
   Een subtiele beweging bij hover maakt duidelijk dat er iets gebeurt als je klikt. */
.stapkaart { transition: transform .15s, box-shadow .15s; }
.stapkaart:hover { transform: translateY(-2px); }
.stapkaart:hover .card { border-color: var(--gold); box-shadow: 0 14px 30px -18px rgba(78,30,34,.45); }

/* Statusbalk boven een prijsblok: overal in het account dezelfde vorm, zodat groen
   altijd hetzelfde betekent — dit account neemt deze dienst af. */
.prijstegel-wrap { display: flex; flex-direction: column; height: 100%; }
.prijstegel-wrap > .prijstegel { flex: 1; }
.prijs-balk { text-align: center; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 6px 8px; border-radius: 16px 16px 0 0;
  background: var(--status-green); color: #fff; }
.prijs-balk + .prijstegel { border-radius: 0 0 16px 16px; border-color: var(--status-green); }
.prijstegel.is-actief .pt-prijs { color: var(--status-green); }


/* Terug naar de website: bij Codex is de site de werkplek, dit scherm alleen het
   account. De link staat daarom bovenaan het menu en valt op. */
.sidebar nav .nav-site { color: var(--gold); font-weight: 600; }

/* Bannerlink: valt op als link, maar blijft rustig in de balk. */
.dash-banner a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }


/* Bannerrotatie: elke boodschap is een eigen element, zodat een klik altijd naar de
   bestemming gaat die je op dat moment ziet. */
.db-rol{flex:1;min-width:0;}
.db-item{transition:opacity .3s ease;}
.dash-banner a.db-item{color:inherit;text-decoration:underline;text-underline-offset:3px;}
.dash-banner a.db-item:hover{opacity:.85;}

/* Woordenboekregels in Beheer: één regel per woord, zodat je er snel doorheen leest. */
.wb-rij { display:flex; align-items:center; gap:8px; margin:0 0 6px; flex-wrap:wrap; }
.wb-rij input, .wb-rij select { padding:5px 8px; font-size:.9rem; }
.wm-staart{opacity:.72;font-weight:400}
/* Woordmerk-varianten. De helper woordmerk() in merk.js zet de klasse; de opmaak staat
   hier, zodat er nergens een inline stijl met een merknaam in een template belandt. */
.wm-groot{font-family:Georgia,serif;font-size:1.6rem;font-weight:700;color:var(--accent,#26467A);display:block;text-align:center}
.wm-op-donker{font-family:Georgia,serif;font-size:1.2rem;font-weight:700;color:#fff}

/* ===========================================================================
   HET KOEPELDASHBOARD
   Donkere grond, en alle kleur komt van de systemen zelf. Dat is geen stijlkeuze
   maar een eis: hier staan tien systeemkleuren tegelijk in beeld, en een luide
   merkkleur zou met elke lijn en elk staafje vechten.
   =========================================================================== */
.koepel{--k-grond:#0E1116;--k-vlak:#161B22;--k-hoog:#1D242D;--k-lijn:#2A323C;
        --k-inkt:#E9EEF4;--k-zacht:#9DAAB9;--k-flauw:#6C7A8A;--k-merk:#A492FF;
        background:var(--k-grond);color:var(--k-inkt);margin:-24px -16px;padding:24px 16px 56px;
        min-height:100vh;font-variant-numeric:tabular-nums}
.koepel h1{font-size:1.7rem;font-weight:750;letter-spacing:-.02em;margin:0;color:var(--k-inkt)}
.koepel h2{font-size:1.02rem;font-weight:700;letter-spacing:-.01em;margin:0 0 4px;color:var(--k-inkt)}
.koepel .muted{color:var(--k-flauw);font-size:.86rem}
.koepel .eyebrow{font-family:ui-monospace,'Cascadia Mono',Menlo,monospace;font-size:.66rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--k-flauw);margin:0 0 5px}
.koepel-kop{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:18px}

/* De systeemkiezer. De kleurstip is de legenda — daarom is er geen aparte legenda. */
.kiezer{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.kies{display:inline-flex;align-items:center;gap:7px;background:var(--k-vlak);
  border:1px solid var(--k-lijn);border-radius:999px;padding:6px 13px;font-size:.83rem;
  color:var(--k-zacht);text-decoration:none;white-space:nowrap}
.kies:hover{border-color:var(--k-merk);color:var(--k-inkt)}
.kies.is-aan{background:var(--k-hoog);border-color:var(--k-merk);color:var(--k-inkt);font-weight:640}
.kies i{width:9px;height:9px;border-radius:50%;display:block;flex:0 0 auto}
.kiezer-klein .kies{padding:5px 11px;font-size:.78rem}

/* Meldingen over systemen die niet meedoen. Bovenaan, want ze maken elk cijfer
   eronder onvolledig. */
.melding{border-radius:9px;padding:11px 15px;margin-bottom:12px;font-size:.87rem;line-height:1.5}
.melding-stuk{background:#331A1D;border:1px solid #7A3038;color:#F0B9BE}
.melding-los{background:var(--k-vlak);border:1px solid var(--k-lijn);color:var(--k-zacht)}

.kentallen{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:11px;margin-bottom:20px}
.kental{background:var(--k-vlak);border:1px solid var(--k-lijn);border-radius:11px;padding:14px 16px}
.kental-label{display:block;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--k-flauw);margin-bottom:5px}
.kental-waarde{display:block;font-size:1.55rem;font-weight:740;letter-spacing:-.02em;color:var(--k-inkt)}
/* Een streepje is geen nul. Het betekent "wij weten het niet", en dat hoort ook
   visueel anders te zijn dan een echt cijfer. */
.kental-waarde.is-leeg{color:var(--k-flauw);font-weight:600}
.kental-waarde i{font-style:normal;font-size:.8rem;color:var(--k-zacht);margin-left:3px}
.kental-hint{display:block;font-size:.74rem;color:var(--k-flauw);margin-top:3px}

.koepel-rij{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.blok{background:var(--k-vlak);border:1px solid var(--k-lijn);border-radius:12px;
  padding:17px 19px 19px;margin-bottom:14px}

.staven{margin-top:12px;display:flex;flex-direction:column;gap:9px}
.staaf-rij{display:grid;grid-template-columns:minmax(96px,auto) 1fr minmax(64px,auto);
  align-items:center;gap:11px}
.staaf-naam{display:inline-flex;align-items:center;gap:7px;font-size:.83rem;
  color:var(--k-zacht);text-decoration:none;white-space:nowrap}
.staaf-naam:hover{color:var(--k-inkt)}
.staaf-naam i{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.staaf-spoor{height:8px;background:var(--k-hoog);border-radius:999px;overflow:hidden}
.staaf-spoor span{display:block;height:100%;border-radius:999px}
.staaf-waarde{font-size:.84rem;text-align:right;color:var(--k-inkt);font-weight:620}
.staaf-waarde.is-leeg{color:var(--k-flauw);font-weight:400;font-size:.76rem}

.lijngrafiek{width:100%;height:auto;margin-top:10px;overflow:visible}
.lijngrafiek .basislijn{stroke:#2A323C;stroke-width:1}
.lijngrafiek .as{fill:#6C7A8A;font-size:10px;text-anchor:middle;
  font-family:ui-monospace,'Cascadia Mono',Menlo,monospace}

.systeemtabel{margin-top:12px;display:flex;flex-direction:column}
.systeemrij{display:grid;grid-template-columns:3px minmax(110px,1.4fr) minmax(84px,1fr) minmax(120px,1fr) minmax(70px,auto) minmax(80px,auto);
  align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--k-lijn);
  text-decoration:none;color:var(--k-zacht);font-size:.86rem}
.systeemrij:first-child{border-top:0}
.systeemrij:hover{color:var(--k-inkt)}
.systeemrij .rail{height:22px;border-radius:2px;display:block}
.sr-naam{font-weight:650;color:var(--k-inkt)}
.sr-beheerder{font-family:ui-monospace,'Cascadia Mono',Menlo,monospace;font-size:.72rem;color:var(--k-flauw)}
.sr-stand{display:inline-flex;align-items:center;gap:6px;font-size:.8rem}
.sr-cijfer{text-align:right;font-weight:600}
.stip{width:7px;height:7px;border-radius:50%;background:var(--k-flauw);display:block;flex:0 0 auto}
.stip-ok{background:#3FD07E;box-shadow:0 0 0 3px rgba(63,208,126,.15)}
.stip-stuk{background:#E2646F;box-shadow:0 0 0 3px rgba(226,100,111,.15)}

@media (max-width:640px){
  .systeemrij{grid-template-columns:3px 1fr auto;row-gap:4px}
  .sr-beheerder,.sr-stand{display:none}
}

/* De schermbalk van het dashboard. */
.schermen{display:flex;gap:2px;margin:0 0 16px;border-bottom:1px solid var(--k-lijn);flex-wrap:wrap}
.schermen a{padding:9px 15px;font-size:.87rem;color:var(--k-zacht);text-decoration:none;
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.schermen a:hover{color:var(--k-inkt)}
.schermen a.is-aan{color:var(--k-inkt);font-weight:650;border-bottom-color:var(--k-merk)}

/* Tabellen. Breed materiaal schuift binnen zijn eigen kader, zodat de pagina zelf nooit
   zijwaarts gaat schuiven — dat is op een telefoon het verschil tussen bruikbaar en niet. */
.tabelwrap{overflow-x:auto;margin-top:12px;-webkit-overflow-scrolling:touch}
.ktabel{border-collapse:collapse;width:100%;font-size:.85rem;min-width:520px}
.ktabel th{text-align:left;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--k-flauw);font-weight:700;padding:0 12px 8px 0;white-space:nowrap}
.ktabel td{padding:9px 12px 9px 0;border-top:1px solid var(--k-lijn);color:var(--k-zacht);vertical-align:top}
.ktabel th.r,.ktabel td.r{text-align:right;padding-right:0}
.ktabel tbody tr:hover td{color:var(--k-inkt)}
.tstip{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:7px;flex:0 0 auto}
.tcode{font-family:ui-monospace,'Cascadia Mono',Menlo,monospace;font-size:.68rem;color:var(--k-flauw);margin-left:5px}
.pos{font-weight:650;color:var(--k-inkt)}
.pos-top{color:#7FE0A8}

/* Het prognosescherm: het enige scherm van het dashboard dat iets verandert. */
.prognose-blok{padding-bottom:8px}
.pb-kop{display:flex;align-items:center;gap:11px;margin-bottom:4px}
.pb-kop .rail{width:3px;height:20px;border-radius:2px;display:block;flex:0 0 auto}
.pb-kop h2{margin:0;flex:1}
.pb-nu{font-size:.92rem;font-weight:660;color:var(--k-inkt);font-variant-numeric:tabular-nums}
.prognose-uitleg{background:var(--k-vlak);border:1px solid var(--k-lijn);border-left:3px solid var(--k-merk);
  border-radius:10px;padding:16px 20px;margin:0 0 16px}
.prognose-uitleg p{margin:0 0 .7em;font-size:.9rem}
.prognose-uitleg p:last-child{margin-bottom:0}

.schuif{margin:14px 0 4px}
.schuif label{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:.85rem;color:var(--k-zacht);margin-bottom:6px}
.schuif output{font-size:1rem;font-weight:700;color:var(--k-inkt);font-variant-numeric:tabular-nums}
.schuif input[type=range]{width:100%;-webkit-appearance:none;appearance:none;background:transparent;height:22px}
.schuif input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:var(--k-hoog)}
.schuif input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:18px;height:18px;border-radius:50%;background:var(--kleur,#7B61FF);margin-top:-6px;
  border:2px solid var(--k-grond);cursor:pointer}
.schuif input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:var(--k-hoog)}
.schuif input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;
  background:var(--kleur,#7B61FF);border:2px solid var(--k-grond);cursor:pointer}
.schuif input[type=range]:focus-visible{outline:2px solid var(--k-merk);outline-offset:3px}
.schuif-grens{display:block;font-family:ui-monospace,'Cascadia Mono',Menlo,monospace;
  font-size:.66rem;color:var(--k-flauw);margin-top:2px}
.prognose-opslaan{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:20px 0 8px}
.melding-ok{background:#16301F;border:1px solid #2F6B47;color:#9BE0B8}

/* Dagrapporten en communicatie. Kaarten in plaats van tabelrijen: een rapport heeft een
   toelichting die je moet kunnen lezen, en dat past niet in een cel. */
.rapport{background:var(--k-vlak);border:1px solid var(--k-lijn);border-radius:10px;
  padding:14px 16px;margin-bottom:10px;border-left:3px solid var(--k-lijn)}
.rapport.alert{border-left-color:#E2646F}
.rapport.warn{border-left-color:#E0B368}
.rapport.is-open{border-left-color:var(--k-merk)}
.rap-kop{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:5px}
.rap-sys{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:640;color:var(--k-inkt)}
.rap-sys i{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.rap-meta{font-family:ui-monospace,'Cascadia Mono',Menlo,monospace;font-size:.68rem;
  letter-spacing:.05em;color:var(--k-flauw)}
.rapport h3{margin:0 0 7px;font-size:.97rem;font-weight:660;color:var(--k-inkt)}
.rap-details{margin:0 0 9px;font-family:ui-monospace,'Cascadia Mono',Menlo,monospace;
  font-size:.78rem;line-height:1.55;color:var(--k-zacht);white-space:pre-wrap;word-break:break-word;
  background:var(--k-grond);border:1px solid var(--k-lijn);border-radius:7px;padding:10px 12px;
  max-height:240px;overflow:auto}
.rap-voet{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.rap-ai{font-family:ui-monospace,'Cascadia Mono',Menlo,monospace;font-size:.68rem;color:var(--k-flauw)}
.rap-voet .btn{background:transparent;border:1px solid var(--k-lijn);color:var(--k-zacht);
  border-radius:7px;padding:5px 12px;font-size:.8rem;cursor:pointer}
.rap-voet .btn:hover{border-color:var(--k-merk);color:var(--k-inkt)}

/* Ontvangers van de aankoopmeldingen. */
.ontv{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:10px;
  padding:10px 0;border-top:1px solid var(--k-lijn)}
.ontv:first-of-type{border-top:0}
.ontv.is-uit .ontv-waarde{color:var(--k-flauw);text-decoration:line-through}
.ontv-waarde{font-size:.9rem;color:var(--k-inkt);word-break:break-all}
.ontv-stand{font-family:ui-monospace,'Cascadia Mono',Menlo,monospace;font-size:.68rem;
  letter-spacing:.06em;color:var(--k-flauw);white-space:nowrap}
.ontv .btn{background:transparent;border:1px solid var(--k-lijn);color:var(--k-zacht);
  border-radius:7px;padding:4px 11px;font-size:.78rem;cursor:pointer;white-space:nowrap}
.ontv .btn:hover{border-color:var(--k-merk);color:var(--k-inkt)}
.ontv .btn-weg:hover{border-color:#E2646F;color:#F0B9BE}
.ontv-nieuw{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.ontv-nieuw input{background:var(--k-grond);border:1px solid var(--k-lijn);border-radius:7px;
  padding:8px 12px;color:var(--k-inkt);font-size:.88rem;min-width:190px;flex:1 1 190px}
.ontv-nieuw input:focus{outline:2px solid var(--k-merk);outline-offset:1px;border-color:var(--k-merk)}
.ontv-nieuw .btn{flex:0 0 auto}
@media (max-width:620px){.ontv{grid-template-columns:1fr auto;row-gap:6px}.ontv-stand{grid-column:1/-1}}

/* MOTH7R. Het oog is het enige sierlijke element in dit dashboard, en dat is bewust:
   dit is de plek waar je met iemand praat in plaats van naar cijfers kijkt. */
.moth-blok{padding-bottom:18px}
.moth-kop{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.moth-kop h2{margin:0}
.moth-kop > div:nth-child(2){flex:1;min-width:200px}
.moth-oog{width:34px;height:34px;border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle at 50% 50%, #2A323C 0 42%, #1D242D 43% 100%);
  border:1px solid var(--k-lijn);position:relative;transition:box-shadow .4s}
.moth-oog::after{content:"";position:absolute;inset:34%;border-radius:50%;
  background:var(--k-flauw);transition:background .4s, box-shadow .4s}
.moth-oog.is-wakker{box-shadow:0 0 0 4px rgba(123,97,255,.12)}
.moth-oog.is-wakker::after{background:var(--k-merk);box-shadow:0 0 10px rgba(123,97,255,.9)}

.moth-gesprek{background:var(--k-grond);border:1px solid var(--k-lijn);border-radius:10px;
  padding:14px 16px;min-height:120px;max-height:420px;overflow:auto;margin-bottom:12px}
.moth-gesprek:empty::before{content:"Nog geen gesprek.";color:var(--k-flauw);font-size:.86rem}
.moth-regel{margin-bottom:14px}
.moth-regel:last-child{margin-bottom:0}
.moth-wie{display:block;font-family:ui-monospace,'Cascadia Mono',Menlo,monospace;
  font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--k-flauw);margin-bottom:3px}
.moth-regel p{margin:0;font-size:.92rem;line-height:1.6;color:var(--k-inkt)}
.moth-regel.user p{color:var(--k-zacht)}
.moth-bron{display:block;font-size:.72rem;color:var(--k-flauw);margin-top:4px;font-style:italic}
.moth-vraag{display:flex;gap:9px;flex-wrap:wrap}
.moth-vraag input{flex:1 1 240px;background:var(--k-grond);border:1px solid var(--k-lijn);
  border-radius:8px;padding:10px 14px;color:var(--k-inkt);font-size:.92rem}
.moth-vraag input:focus{outline:2px solid var(--k-merk);outline-offset:1px;border-color:var(--k-merk)}
.moth-klein{margin-top:9px;font-size:.8rem}

.ai-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:11px;margin-top:16px}
.ai-kaart{background:var(--k-vlak);border:1px solid var(--k-lijn);border-radius:10px;overflow:hidden;display:flex}
.ai-rail{width:3px;flex:0 0 auto}
.ai-in{padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.ai-naam{font-family:ui-monospace,'Cascadia Mono',Menlo,monospace;font-size:.86rem;
  font-weight:700;color:var(--k-inkt);letter-spacing:.03em}
.ai-sys{font-size:.84rem;color:var(--k-zacht)}
.ai-meta{font-size:.7rem;color:var(--k-flauw);text-transform:uppercase;letter-spacing:.08em;margin-top:3px}
.ai-stand{font-size:.7rem;color:var(--k-flauw);margin-top:5px}
.ai-stand.is-aan{color:#7FE0A8}
.moth-handelingen{margin-top:12px;padding-left:1.1em}
.moth-handelingen li{margin-bottom:.45em;font-size:.88rem;color:var(--k-zacht)}
.moth-handelingen code{background:var(--k-hoog);border:1px solid var(--k-lijn);border-radius:5px;
  padding:1px 6px;font-size:.82em;color:var(--k-inkt)}

.ai-vraag{margin-top:9px;align-self:flex-start}
.btn-stil{background:transparent;border-color:var(--k-lijn);color:var(--k-flauw)}
.btn-stil:hover{color:var(--k-inkt);border-color:var(--k-zacht)}

/* De bevestigingskaart. Bewust opvallend: dit is het enige moment waarop er iets
   verandert in een productiesysteem, en dat hoort niet weg te vallen in het gesprek. */
.moth-doen{margin-top:9px;background:var(--k-hoog);border:1px solid var(--k-merk);
  border-left:3px solid var(--k-merk);border-radius:8px;padding:11px 13px}
.moth-doen.is-gedaan{border-color:#2F6B4A;border-left-color:#7FE0A8}
.moth-doen.is-mis{border-color:#7A3A3A;border-left-color:#E08A8A}
.moth-doen-wat{margin:0 0 4px;font-size:.9rem;font-weight:600;color:var(--k-inkt)}
.moth-doen-uitleg{margin:0;font-size:.8rem;color:var(--k-flauw);line-height:1.5}
.moth-doen-knoppen{display:flex;gap:8px;margin-top:9px}

/* Realtime en de vlaggen. */
.vlag{display:inline-flex;width:20px;height:14px;overflow:hidden;border-radius:2px;
  box-shadow:0 0 0 1px rgba(255,255,255,.14);vertical-align:middle;flex:0 0 auto}
.vlag svg{width:100%;height:100%;display:block}
.rt-ip{font-family:ui-monospace,'Cascadia Mono',Menlo,monospace;font-size:.78rem;
  color:var(--k-zacht);background:var(--k-hoog);border:1px solid var(--k-lijn);
  border-radius:5px;padding:1px 6px;white-space:nowrap}
.rt-pad{display:inline-block;max-width:230px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;vertical-align:bottom;color:var(--k-zacht)}
.rt-waar{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--k-flauw)}
.rt-waar.is-in{color:#7FE0A8}

/* Het aantal achter een landknop, en achter een blokkop. Een filter dat vertelt hoeveel
   er achter zit, scheelt tien keer klikken om erachter te komen dat het leeg is. */
.kies-tel{margin-left:7px;font-size:.72rem;font-weight:700;color:var(--k-flauw);
  background:var(--k-grond);border-radius:20px;padding:1px 7px}
.kies.is-aan .kies-tel{color:var(--k-inkt);background:rgba(0,0,0,.25)}
.kiezer-landen{flex-wrap:wrap}
.blok-tel{font-size:.78rem;font-weight:700;color:var(--k-flauw);background:var(--k-hoog);
  border:1px solid var(--k-lijn);border-radius:20px;padding:1px 9px;margin-left:8px;
  vertical-align:middle}

/* Kopjes in het zijmenu. Met twaalf dashboardschermen plus de accountitems eronder is één
   ononderbroken rij links niet meer te scannen. */
.sidebar .nav-kop{display:block;font-family:ui-monospace,'Cascadia Mono',Menlo,monospace;
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.38);
  margin:16px 0 5px;padding:0 2px}
.sidebar .nav-kop:first-of-type{margin-top:10px}

/* Per beheerder: wat je zou zien als je bij dat platform zelf inlogt. */
.bh-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;margin-top:14px}
.bh-kaart{background:var(--k-vlak);border:1px solid var(--k-lijn);border-radius:11px;overflow:hidden;display:flex}
.bh-kaart.heeft-aandacht{border-color:#7A5A2A}
.bh-kaart.is-los{opacity:.62}
.bh-kaart.is-stuk{border-color:#7A3A3A}
.bh-rail{width:3px;flex:0 0 auto}
.bh-in{padding:13px 15px 14px;display:flex;flex-direction:column;gap:10px;min-width:0;flex:1}
.bh-kop{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.bh-kop b{font-family:ui-monospace,'Cascadia Mono',Menlo,monospace;font-size:.86rem;
  letter-spacing:.03em;color:var(--k-inkt)}
.bh-kop span{font-size:.84rem;color:var(--k-zacht)}
.bh-badge{margin-left:auto;font-style:normal;font-size:.7rem;font-weight:700;color:#F0C878;
  background:rgba(240,200,120,.14);border:1px solid #7A5A2A;border-radius:20px;padding:1px 8px}
.bh-rustig{margin-left:auto;font-style:normal;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.08em;color:#7FE0A8}
.bh-fout{margin:0;font-size:.86rem;color:#E08A8A;line-height:1.5}
.bh-rustig-uitleg{margin:0;font-size:.84rem;color:var(--k-flauw);line-height:1.5}

.bh-cijfers{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:8px;
  border-top:1px solid var(--k-lijn);border-bottom:1px solid var(--k-lijn);padding:9px 0}
.bh-cijfers span{display:flex;flex-direction:column;gap:2px;min-width:0}
.bh-cijfers i{font-style:normal;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--k-flauw)}
.bh-cijfers b{font-size:.94rem;color:var(--k-inkt);font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis}

.bh-titel{display:block;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--k-flauw);margin-bottom:5px}
.bh-punt,.bh-logregel{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:.84rem;min-width:0}
.bh-tekst,.bh-logregel span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--k-zacht)}
.bh-tijd{font-size:.7rem;color:var(--k-flauw);white-space:nowrap;font-variant-numeric:tabular-nums}
.bh-niveau{width:6px;height:6px;border-radius:50%;flex:0 0 auto;background:var(--k-flauw)}
.bh-niveau.n-warn{background:#F0C878}
.bh-niveau.n-error,.bh-niveau.n-alert{background:#E08A8A}
.bh-niveau.n-info{background:#7FA8C9}
.bh-meer{display:inline-block;font-size:.78rem;margin-top:4px;color:var(--k-merk)}
.bh-log{border-top:1px solid var(--k-lijn);padding-top:9px}
.bh-voet{margin-top:auto;display:flex;gap:12px;flex-wrap:wrap;padding-top:9px;
  border-top:1px solid var(--k-lijn);font-size:.78rem}
.bh-voet a{color:var(--k-merk)}

/* De staafgrafieken van het statistiekenscherm. */
.staafgrafiek{width:100%;height:auto;display:block;margin-top:10px}
.staafgrafiek .grid{stroke:var(--k-lijn);stroke-width:1}
.staafgrafiek .as{font-size:9.5px;fill:var(--k-flauw)}
.staafgrafiek .staaftotaal{font-size:9px;fill:var(--k-zacht);font-weight:700}
.legenda{display:flex;gap:14px;flex-wrap:wrap;margin-top:9px;font-size:.78rem;color:var(--k-zacht)}
.legenda span{display:inline-flex;align-items:center;gap:6px}
.legenda i{width:11px;height:11px;border-radius:3px;display:inline-block;flex:0 0 auto}

/* ---------- Websiteoverzicht ----------
   Eén regel per site met vier soorten getallen naast elkaar. De tabel is breed en dat is niet te
   vermijden: het gaat om vergelijken, en vergelijken doe je op één regel. Daarom rolt hij op een
   smal scherm horizontaal in plaats van de kolommen op elkaar te duwen — een tabel waarvan de
   kolommen onder elkaar staan, is geen tabel meer. */
.tabelrol{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabel-websites{width:100%;border-collapse:collapse;font-size:.92rem;min-width:900px}
/* De dashboardset (--k-*), niet die van de publieke site. Deze tabel staat in .koepel, en
   var(--line) (#D9D9D2) en var(--muted) (#5C6673) zijn daar respectievelijk te fel en
   onleesbaar. Gecorrigeerd 23-08-2026. */
.tabel-websites th{text-align:left;font-weight:600;color:var(--k-flauw);padding:8px 12px;border-bottom:1px solid var(--k-lijn);white-space:nowrap;background:transparent}
.tabel-websites td{padding:11px 12px;border-bottom:1px solid var(--k-tabel-lijn);vertical-align:middle}
.tabel-websites th.r,.tabel-websites td.r{text-align:right}
.tabel-websites tr:last-child td{border-bottom:0}
.tabel-websites a{color:var(--k-inkt);text-decoration:none;font-weight:600}
.tabel-websites a:hover{color:var(--k-merk)}
.tabel-websites a:hover{text-decoration:underline}

/* De landen in één cel. Vlag, naam en aantal blijven bij elkaar; bij vijf landen naast elkaar is
   dat het verschil tussen lezen en puzzelen. */
.landen-cel{min-width:240px}
.landwoord{display:inline-flex;align-items:center;gap:4px;margin:0 9px 3px 0;white-space:nowrap;cursor:default}
.landwoord svg{width:17px;height:13px;border-radius:2px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.landwoord strong{font-variant-numeric:tabular-nums}
.lw-rest{font-size:.86rem;margin-left:2px}

/* Groei in kleur, maar niet schreeuwend: het staat achter een getal en mag dat getal niet
   overstemmen. */
.groei-op{color:#2E7D52;font-size:.85rem;font-weight:600}
.groei-af{color:#B3443F;font-size:.85rem;font-weight:600}
.chip-grijs{display:inline-block;margin-left:7px;padding:1px 8px;border-radius:999px;background:var(--line);color:var(--muted);font-size:.74rem;font-weight:600;vertical-align:middle}

/* ---------- Het klantdashboard: werk links, zusters rechts ----------
   Twee kolommen op een breed scherm, onder elkaar op een telefoon. De rail is 320 px: breed genoeg
   voor een domeinnaam plus de regel eronder, smal genoeg om het werk niet te verdringen.

   Onder de 1040 px klapt hij onder de inhoud. Niet weglaten: op een telefoon is de rail vaak juist
   het enige nieuwe op dit scherm. */
.dash { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
@media (max-width: 1040px) { .dash { grid-template-columns: minmax(0, 1fr); } }

/* De werklijst. Elke regel is een handeling, geen mededeling — vandaar de knop rechts. */
.taak { display: flex; align-items: flex-start; gap: 15px; border-left: 5px solid var(--status-gold); }
.taak.alert { border-left-color: var(--status-alert); }
.taak-body { flex: 1; min-width: 0; }
.taak-kop { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 3px; }
.taak-kop strong { font-family: var(--font-serif); font-size: 1.05rem; }
.taak-termijn { font-size: .78rem; font-weight: 700; letter-spacing: .03em; color: var(--status-gold); }
.taak.alert .taak-termijn { color: var(--status-alert); }

/* Het dossier in getallen. Het getal eerst en groot: dat is wat je scant. */
.dossierrij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 620px) { .dossierrij { grid-template-columns: minmax(0, 1fr); } }
.dossierkaart { display: flex; align-items: center; gap: 14px; }
.dossier-getal { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 700; line-height: 1; min-width: 62px; }
.dossierkaart strong { font-family: var(--font-serif); font-size: .98rem; display: block; }

/* De rail. */
.rail { min-width: 0; }
.rail-kop h2 { font-size: 1.12rem; margin: 6px 0; }
.rail-kop p { margin: 0; font-size: .88rem; line-height: 1.5; }
.rail-kopje { margin: 18px 0 8px 2px; }
.zusterlijst { display: flex; flex-direction: column; gap: 9px; }

/* Eén zustertegel. De kleurstip is het snelste onderscheid bij vijftien merken die allemaal op
   -ia of -pas eindigen — en de naam staat er gewoon bij, want kleur mag nooit de enige drager zijn. */
.zuster {
  display: flex; align-items: flex-start; gap: 11px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 13px 15px;
  text-decoration: none; color: inherit;
  transition: border-color .15s ease;
}
.zuster:hover { border-color: var(--bordeaux-bright); }
.zuster-stip { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; }
.zuster-body { flex: 1; min-width: 0; }
.zuster-naam { font-family: var(--font-serif); font-size: .95rem; font-weight: 700; display: block; }
/* De regel die zegt waarom dit systeem geldt. Goud, want hij is het enige op de tegel dat de lezer
   iets vertelt dat hij nog niet wist. */
.zuster-geldt { font-size: .82rem; color: var(--gold); font-weight: 600; line-height: 1.4; display: block; margin-top: 2px; }

.rail-koepel { border-left: 5px solid var(--gold); margin-top: 16px; }
.rail-koepel strong { font-family: var(--font-serif); font-size: .98rem; display: block; margin-bottom: 3px; }
.rail-koepel .muted { font-size: .86rem; line-height: 1.5; display: block; margin-bottom: 11px; }

/* De blogbewaking op het websiteoverzicht, en de knop om nu opnieuw te meten.
   ------------------------------------------------------------------------------------------------
   Kleuren gemeten, niet geschat: bruin op zandkleur haalt 6,36 : 1 en donkerrood op lichtroze
   6,45 : 1. De eis is 4,5. Een waarschuwing die je moet zoeken, is geen waarschuwing. */
.chip-oranje,
.chip-rood{display:inline-block;margin-left:7px;padding:1px 8px;border-radius:999px;
  font-size:.74rem;font-weight:600;vertical-align:middle;white-space:nowrap}
.chip-oranje{background:#FBEBD2;color:#7A4A12}
.chip-rood{background:#F8DEDC;color:#8C2F2A}

.meetbalk{display:flex;align-items:center;gap:12px;margin:0 0 14px}

/* ---- De koepelrijen in de tabel "Per website" (herindeling, augustus 2026) ----
   Een kopregel tussen de rijen in plaats van acht losse tabellen: de kolommen blijven daardoor
   uitgelijnd over alle koepels heen, en dat is precies waarvoor je die tabel opslaat. */
/* EIGEN KLASSENAAM. `koepel-rij` is elders een grid-<div>; op een <tr> maakte die regel
   de rij stuk. En de kleuren komen nu uit de dashboardset (--k-*): met var(--cream) stond er
   een wit vlak van #F7F7F5 midden op een scherm van #0E1116. */
.koepel{--k-tabel-lijn:#232A33}
.tabel-websites{color:var(--k-zacht)}
.tabel-websites tbody tr:hover td{background:rgba(255,255,255,.025)}

.tabel-websites .koepel-kop-rij td{
  background:var(--k-hoog);
  padding:13px 12px;
  border-top:1px solid var(--k-lijn);
  border-bottom:1px solid var(--k-lijn);
  color:var(--k-inkt);
  /* De kop hoort een band te zijn, geen kaart: hij scheidt twee groepen rijen en moet niet
     zelf om aandacht vragen. */
  font-size:.9rem;
}
.tabel-websites .koepel-kop-rij:first-child td{border-top:0}
.tabel-websites .koepel-kop-rij strong{color:var(--k-inkt);font-weight:650;letter-spacing:-.005em}
.tabel-websites .koepel-kop-rij:hover td{background:var(--k-hoog)}

.koepel-punt{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:9px;
  vertical-align:middle;box-shadow:0 0 0 3px rgba(255,255,255,.05)}
.koepel-merk{font-size:.8rem;color:var(--k-zacht);margin-left:9px;font-variant-numeric:normal}
.koepel-bereik-klein{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--k-flauw);
  border:1px solid var(--k-lijn);border-radius:99px;padding:2px 9px;margin-left:9px;white-space:nowrap}
/* Rechts uitlijnen zonder float: een float in een tabelcel gaat bij de eerste smalle kolom
   over de rand heen. */
.koepel-aantal{float:none;font-size:.78rem;color:var(--k-flauw);margin-left:10px}
.tabel-websites .koepel-kop-rij td{display:table-cell}
.tabel-websites .koepel-kop-rij td > .koepel-aantal{float:right;margin-top:2px}

/* ---------- Scherm AI-assistent ---------- */
/* De opdracht en de meting naast elkaar. De standen zijn drie kleuren en niet vijf: zodra een
   overzicht meer standen heeft dan iemand uit het hoofd kent, wordt het weer gelezen als tekst. */
.koepel .ai-houding{background:var(--k-vlak);border:1px solid var(--k-lijn);border-left:3px solid var(--k-merk);
  border-radius:9px;padding:14px 18px;margin-bottom:22px}
.koepel .ai-houding p:last-child{margin:0;color:var(--k-zacht);font-size:.92rem;line-height:1.6;max-width:76ch}

.koepel .ai-groep{margin-top:30px}
.koepel .ai-groep h2{font-size:1.05rem;margin:0 0 12px;color:var(--k-inkt)}
.koepel .ai-taken{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.koepel .ai-taak{background:var(--k-vlak);border:1px solid var(--k-lijn);border-radius:10px;
  padding:14px 16px;display:flex;flex-direction:column;gap:7px}
/* De stand zit in een streep links, niet in de achtergrond: een gekleurd vlak per kaart maakt het
   raster onrustig, een streep leest in één blik. */
.koepel .ai-taak.stand-draait{border-left:3px solid #2F6B47}
.koepel .ai-taak.stand-deels{border-left:3px solid #7A5B1F}
.koepel .ai-taak.stand-nog-niet{border-left:3px solid #7A3038}
.koepel .ai-taak-kop{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.koepel .ai-taak h3{font-size:.94rem;margin:0;color:var(--k-inkt);font-weight:600}
.koepel .ai-taak p{margin:0;font-size:.86rem;color:var(--k-zacht);line-height:1.55}
.koepel .ai-beperking{color:var(--k-flauw)!important}
.koepel .ai-beperking strong{color:var(--k-zacht)}
.koepel .ai-stand{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
  color:var(--k-flauw)}
.koepel .ai-meting{font-size:.76rem;color:var(--k-flauw);margin-top:2px}
.koepel .ai-meting.is-oud{color:#D9A441}
.koepel .ai-meting.is-leeg{color:var(--k-flauw);font-style:italic}

.koepel .ai-tabel{width:100%;border-collapse:collapse;font-size:.88rem}
.koepel .ai-tabel th{text-align:left;padding:9px 14px;font-size:.72rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--k-flauw);background:var(--k-hoog);border-bottom:1px solid var(--k-lijn)}
.koepel .ai-tabel td{padding:10px 14px;border-bottom:1px solid var(--k-lijn);vertical-align:top;color:var(--k-zacht)}
.koepel .ai-tabel tr:last-child td{border-bottom:none}
.koepel .ai-naam{color:var(--k-inkt);white-space:nowrap;font-weight:500}
.koepel .ai-stip{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px}
.koepel .ai-punten{font-size:.82rem;line-height:1.5}
.koepel .ai-pil{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.75rem;white-space:nowrap}
.koepel .ai-pil.is-goed{background:#16301F;color:#9BE0B8}
.koepel .ai-pil.is-let{background:#3A2E12;color:#E5C77A}
.koepel .ai-pil.is-stil{background:#331A1D;color:#F0B9BE}
.koepel .tabelbox{overflow-x:auto;border:1px solid var(--k-lijn);border-radius:10px;background:var(--k-vlak)}

/* De samenvatting bovenaan het AI-scherm. Hij staat er omdat de takenlijst anders pas na
   tweeënzestig tabelrijen begon en dus onvindbaar was -- gemeld 23-08-2026. */
.koepel .ai-samenvatting{display:flex;flex-direction:column;gap:14px;margin:22px 0 6px}
.koepel .ai-tel{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;
  background:var(--k-lijn);border:1px solid var(--k-lijn);border-radius:10px;overflow:hidden}
.koepel .ai-tel > div{background:var(--k-vlak);padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.koepel .ai-tel b{font-size:1.7rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:var(--k-inkt)}
.koepel .ai-tel span{font-size:.78rem;color:var(--k-flauw);line-height:1.35}
.koepel .ai-tel .g b{color:#7BD3A0} .koepel .ai-tel .a b{color:#E5C77A} .koepel .ai-tel .r b{color:#F0A8AE}
.koepel .ai-sprong{display:flex;flex-wrap:wrap;gap:7px}
.koepel .ai-sprong a{border:1px solid var(--k-lijn);border-radius:999px;padding:5px 13px;
  font-size:.8rem;color:var(--k-zacht);text-decoration:none;background:var(--k-vlak)}
.koepel .ai-sprong a:hover{color:var(--k-inkt);border-color:var(--k-merk)}
.koepel .ai-groep{scroll-margin-top:18px}
.koepel .ai-per-systeem{margin-top:34px;padding-top:26px;border-top:1px solid var(--k-lijn)}
.koepel .ai-uitleg{color:var(--k-zacht);font-size:.88rem;margin:0 0 12px}

/* Boven de 7.000 pagina's ineens kan Google een site als spam beoordelen (besluit Erik,
   23-08-2026). Vandaar dat het indexeerbare aantal opvalt zodra het daar overheen gaat --
   een grens die je pas ziet als je hem al overschreden hebt, is geen grens. */
.koepel .idx-teveel{color:#E5A25A;font-weight:600}
.koepel .idx-teveel::after{content:"!";margin-left:4px;font-size:.8em;opacity:.8}
/* Een bewust geremde site: het cijfer is laag met reden, niet uit achterstand. Een klein
   open blokje ernaast, geen alarmkleur -- dit is een keuze en geen probleem. */
.koepel .idx-rem{color:var(--k-zacht)}
.koepel .idx-rem::after{content:"";}
.koepel .gsc-ja{color:#7BD3A0;font-size:.82rem}
.koepel .gsc-nee{color:var(--k-flauw);font-size:.82rem}
.koepel .moth-wakker{font-size:.78rem;color:var(--k-flauw)}

/* ---------- De lijngrafiek (Vindbaarheid en AI-vindbaarheid) ----------
   Kale SVG, geen bibliotheek. Zie lib/lijngrafiek.js voor het waarom; kort gezegd: een lijn is een
   polyline, en tweehonderd kilobyte binnenhalen om er vier te tekenen is een afhankelijkheid die
   over een jaar zijn eigen beveiligingsmeldingen krijgt.

   preserveAspectRatio="none" in de SVG rekt de grafiek op tot de breedte van zijn kolom. Dat mag
   hier: er staan geen ronde vormen of tekst in de tekening zelf die daaronder zouden lijden -- de
   labels staan er als losse tekstregels naast, en die schalen mee zonder scheef te trekken. */
.lijngrafiek{margin:12px 0 0}
.lijngrafiek svg{width:100%;height:220px;display:block}
.lijngrafiek .lg-raster{stroke:var(--k-lijn);stroke-width:1}
.lijngrafiek .lg-as{font-size:10px;fill:var(--k-flauw)}
.lg-legenda{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:.78rem;color:var(--k-zacht)}
.lg-item{display:inline-flex;align-items:center;gap:6px}
.lg-item i{width:11px;height:3px;border-radius:2px;display:inline-block;flex:0 0 auto}
.lg-item b{color:var(--k-tekst);font-variant-numeric:tabular-nums}

/* De knoppenrijen boven een grafiek: welke website, welke korrel (dag/week/maand/jaar).
   Links en geen formulier: zo is elke stand een eigen adres dat je kunt bewaren of doorsturen. */
.knoppenrij{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0}
.knoppenrij .knop{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
  border:1px solid var(--k-lijn);background:var(--k-vlak);color:var(--k-zacht);
  font-size:.82rem;text-decoration:none;line-height:1.5}
.knoppenrij .knop:hover{border-color:var(--k-merk);color:var(--k-tekst)}
.knoppenrij .knop.aan{background:var(--k-merk);border-color:var(--k-merk);color:#fff;font-weight:600}
.knoppenrij .knop.aan .tstip{box-shadow:0 0 0 1px rgba(255,255,255,.6)}

/* Het volledigheidsbalkje op het tabblad Bedrijfsprofielen. Een balkje én een getal: een balkje
   alleen is tussen twee rijen niet te vergelijken, een getal alleen valt bij het doorbladeren niet
   op. */
.volbalk{display:inline-block;width:52px;height:7px;border-radius:99px;background:var(--line);
  overflow:hidden;vertical-align:middle;margin-right:6px}
.volbalk i{display:block;height:100%;background:var(--gold);border-radius:99px}