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

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