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

/* De keuze particulier/zakelijk bij het aanmelden. Kiest iemand particulier, dan hebben de
   bedrijfsvelden geen betekenis en verdwijnen ze -- een leeg veld met het woord
   "Bedrijfsnaam" erboven laat een huiseigenaar twijfelen of hij hier wel goed zit.

   Bewust met :has() en niet met JavaScript: valt de opmaak weg, dan staan de velden er
   gewoon en zijn ze leeg te laten. De server controleert ze toch alleen bij 'zakelijk', dus
   zonder CSS is het lelijker maar niet stuk. Een JS-oplossing zou zonder script juist een
   verplicht ogend veld tonen dat niemand kan wegklikken. */
.klanttype .zakelijk-velden { margin-top: 14px; }
.klanttype:has(input[value="particulier"]:checked) .zakelijk-velden { display: none; }
.klanttype .scan-opties { display: flex; flex-direction: column; gap: 2px; }
.klanttype .scan-optie { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.klanttype .scan-optie input { margin: 3px 0 0; width: auto; flex: none; }
.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}