/* Lexivo — Emma's Tax Law */
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Hanken+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Brand */
  --navy: #0E3F63;
  --navy-800: #0B324F;
  --marine: #1A6AA3;
  --marine-300: #7FB2D6;
  --ember: #F0653F;
  --ember-600: #D9512C;
  --ember-100: #FCE7DF;
  --ink: #07223A;
  --paper: #F5F7FA;
  --cloud: #EAEFF4;
  --line: #E0E7EE;
  --line-2: #CDD8E2;
  --steel: #5C6C7C;
  --slate: #33485A;
  --white: #FFFFFF;
  --rood: #FF1E10;
  --ok: #1F9E6E;
  --ok-bg: #E4F4EC;
  --warn: #E0A21A;
  --warn-bg: #FBF1D8;
  --wait: #7C6CC4;
  --wait-bg: #ECE9F8;
  /* Legacy aliases */
  --groen: var(--navy);
  --midgroen: var(--marine);
  --zand: var(--paper);
  --roze: var(--ember-100);
  --wit: var(--white);
  --rand: var(--line);
  /* Typography */
  --display: 'Schibsted Grotesk', -apple-system, system-ui, sans-serif;
  --body: 'Hanken Grotesk', -apple-system, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  /* Shadows */
  --schaduw: 0 1px 2px rgba(7,34,58,.06), 0 1px 1px rgba(7,34,58,.04);
  --schaduw-md: 0 4px 14px rgba(7,34,58,.08), 0 1px 3px rgba(7,34,58,.05);
  --radius: 12px;
  --radius-lg: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--body); background: var(--paper); color: var(--ink); font-size: 14px; line-height: 1.5; }
h1,h2,h3,h4,h5,h6 { font-family: var(--display); }
a { color: var(--marine); text-decoration: none; }
svg { stroke-linecap: round; stroke-linejoin: round; }
.nav svg, .main-met-nav svg { stroke-width: 1.7; }

/* ── Navigatie ──────────────────────────────────────────────────────────── */
.nav { background: var(--ink); color: var(--paper); position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; height: 60px; display: flex; align-items: center; gap: 2rem; }
.nav-logo { display: flex; align-items: baseline; gap: .5rem; }
.nav-logo-tekst { font-size: 1.25rem; font-weight: 700; color: var(--zand); letter-spacing: -.5px; }
.nav-logo-sub { font-size: .7rem; color: var(--midgroen); font-weight: 500; }
.nav-links { display: flex; gap: .25rem; flex: 1; }
.nav-link { display: flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border-radius: 8px; font-size: .8rem; font-weight: 500; color: rgba(253,245,227,.75); transition: all .15s; }
.nav-link:hover { background: rgba(255,255,255,.1); color: var(--zand); }
.nav-link.actief { background: rgba(255,255,255,.15); color: var(--zand); }
.nav-acties { display: flex; align-items: center; gap: .5rem; margin-left: auto; }

/* Meldingen */
.melding-wrapper { position: relative; }
.melding-btn { position: relative; background: none; border: none; color: var(--zand); cursor: pointer; padding: .5rem; border-radius: 8px; display: flex; align-items: center; }
.melding-btn:hover { background: rgba(255,255,255,.1); }
.melding-teller { position: absolute; top: 2px; right: 2px; background: var(--rood); color: #fff; font-size: .65rem; font-weight: 700; border-radius: 10px; min-width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; padding: 0 3px; }
.melding-panel { position: absolute; right: 0; top: calc(100% + 8px); width: 360px; background: var(--wit); border-radius: var(--radius-lg); box-shadow: 0 10px 25px rgba(14,63,99,.15); border: 1px solid var(--rand); overflow: hidden; z-index: 200; }
.melding-kop { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; border-bottom: 1px solid var(--rand); }
.melding-kop strong { font-size: .875rem; }
.melding-item { display: block; width: 100%; text-align: left; padding: .75rem 1rem; border-bottom: 1px solid var(--rand); cursor: pointer; background: none; border-left: none; border-right: none; border-top: none; transition: background .1s; }
.melding-item:hover { background: var(--zand); }
.melding-item.ongelezen { background: rgba(26,106,163,.05); }
.melding-ongelezen-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--midgroen); display: inline-block; margin-right: .5rem; flex-shrink: 0; }
.melding-klantnaam { font-size: .7rem; font-weight: 600; color: var(--midgroen); margin-bottom: 2px; }
.melding-bericht { font-size: .8rem; color: var(--groen); }
.melding-tijd { font-size: .7rem; color: rgba(14,63,99,.5); margin-top: 2px; }
.melding-leeg { padding: 2rem; text-align: center; color: rgba(14,63,99,.4); font-size: .875rem; }

/* Profiel */
.profiel-wrapper { position: relative; }
.profiel-btn { background: none; border: none; color: var(--zand); cursor: pointer; padding: .5rem .75rem; border-radius: 8px; display: flex; align-items: center; gap: .5rem; font-family: inherit; }
.profiel-btn:hover { background: rgba(255,255,255,.1); }
.profiel-naam { font-size: .8rem; font-weight: 500; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--midgroen); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; flex-shrink: 0; }
.profiel-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 200px; background: var(--wit); border-radius: var(--radius); box-shadow: var(--schaduw-md); border: 1px solid var(--rand); overflow: hidden; z-index: 200; }
.profiel-info { padding: .75rem 1rem; border-bottom: 1px solid var(--rand); }
.profiel-info strong { display: block; font-size: .875rem; }
.profiel-info small { color: rgba(14,63,99,.6); font-size: .75rem; }
.profiel-uitloggen { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; color: var(--rood); font-size: .875rem; transition: background .1s; }
.profiel-uitloggen:hover { background: rgba(255,30,16,.05); }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.main-met-nav { max-width: 1280px; margin: 0 auto; padding: 1.5rem; }
.main-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }

/* ── Typografie ──────────────────────────────────────────────────────────── */
.pagina-titel { font-size: 1.5rem; font-weight: 700; letter-spacing: -.3px; }
.pagina-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.tekst-grijs { color: rgba(14,63,99,.5); }
.tekst-rood { color: var(--rood); }
.italic { font-style: italic; }

/* ── Kaart ───────────────────────────────────────────────────────────────── */
.kaart { background: var(--wit); border-radius: 16px; border: 1px solid var(--line); padding: 20px; box-shadow: var(--schaduw); }
.kaart-titel { font-size: .9rem; font-weight: 700; margin-bottom: .75rem; }
.kaart-kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }

/* ── Knoppen ─────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1rem; border-radius: 8px; font-family: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; border: none; transition: all .15s; text-decoration: none; }
.btn-sm { padding: .35rem .7rem; font-size: .75rem; }
.btn-blok { width: 100%; justify-content: center; }
.btn-primair { background: var(--navy); color: #fff; }
.btn-primair:hover { background: var(--navy-800); }
.btn-secundair { background: #fff; color: var(--navy); border: 1px solid var(--line-2); }
.btn-secundair:hover { background: var(--cloud); }
.btn-groen { background: var(--midgroen); color: #fff; }
.btn-groen:hover { background: #5a8f4a; }
.btn-gevaar { background: var(--rood); color: #fff; }
.btn-gevaar:hover { background: #cc1800; }
.btn-accent { background: var(--ember); color: #fff; }
.btn-accent:hover { background: var(--ember-600); }
.btn-quiet { background: transparent; color: var(--slate); border: 1px solid transparent; }
.btn-quiet:hover { background: var(--cloud); }
.btn-link { background: none; border: none; color: var(--midgroen); font-family: inherit; font-size: .8rem; cursor: pointer; padding: 0; }
.btn-link:hover { color: var(--groen); }
.btn-icon { background: none; border: none; color: rgba(14,63,99,.5); cursor: pointer; padding: .25rem; border-radius: 6px; display: flex; align-items: center; }
.btn-icon:hover { background: rgba(14,63,99,.08); color: var(--groen); }

/* ── Formulierelementen ──────────────────────────────────────────────────── */
.input, .select, .textarea { width: 100%; padding: .5rem .75rem; border-radius: 10px; border: 1px solid var(--line-2); background: var(--wit); color: var(--groen); font-family: inherit; font-size: .875rem; transition: border-color .15s, box-shadow .15s; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--marine); box-shadow: 0 0 0 3px rgba(26,106,163,.15); }
.textarea { resize: vertical; }
.veld { display: flex; flex-direction: column; gap: .4rem; }
.veld label { font-size: .8rem; font-weight: 600; color: var(--groen); }
.veld-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.veld-vol { grid-column: 1 / -1; }
.formulier-acties { display: flex; gap: .75rem; margin-top: 1rem; justify-content: flex-end; }
.form-acties-klein { display: flex; gap: .5rem; margin-top: .5rem; }
.checkbox-label { display: flex; align-items: center; gap: .5rem; cursor: pointer; font-size: .875rem; }
.checkbox-label input { width: 16px; height: 16px; accent-color: var(--groen); }
.checkbox-groep { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .6rem; border-radius: 20px; font-size: .7rem; font-weight: 600; }
.badge-betalingsregeling { background: rgba(26,106,163,.2); color: var(--groen); }
.badge-bezwaar { background: rgba(254,163,199,.4); color: var(--groen); }
.badge-verzoek { background: rgba(245,158,11,.15); color: #92400e; }
.badge-kopie_aangiften { background: rgba(59,130,246,.12); color: #1e40af; }
.badge-omzetting { background: rgba(139,92,246,.12); color: #5b21b6; }
.badge-open { background: var(--cloud); color: var(--steel); border-radius: 999px; }
.badge-lopend { background: #E5F0F8; color: var(--marine); border-radius: 999px; }
.badge-afgerond { background: var(--ok-bg); color: var(--ok); border-radius: 999px; }
.badge-laag { background: rgba(14,63,99,.08); color: var(--groen); border-radius: 999px; }
.badge-middel { background: rgba(245,158,11,.15); color: #92400e; border-radius: 999px; }
.badge-hoog { background: var(--ember-100); color: var(--ember-600); border-radius: 999px; }
.badge-datum { background: rgba(14,63,99,.06); color: var(--groen); }
.badge-rol { background: rgba(26,106,163,.15); color: var(--groen); }
.badge-inactief { background: rgba(14,63,99,.08); color: rgba(14,63,99,.5); padding: .15rem .5rem; border-radius: 10px; font-size: .7rem; }
.dossier-badges { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }

/* ── Login ───────────────────────────────────────────────────────────────── */
.login-wrap { width: 100%; max-width: 380px; }
.login-logo { text-align: center; margin-bottom: 2rem; }
.login-logo h1 { font-size: 2.5rem; font-weight: 700; letter-spacing: -1px; }
.login-logo p { color: var(--midgroen); font-weight: 500; }
.login-kaart { padding: 2rem; }
.login-kaart h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: 1.25rem; }
.login-form { display: flex; flex-direction: column; gap: .75rem; }
.reset-link { display: block; text-align: center; margin-top: .75rem; }
.fout-banner { background: rgba(255,30,16,.1); border: 1px solid rgba(255,30,16,.2); border-radius: 8px; padding: .75rem 1rem; color: var(--rood); font-size: .875rem; margin-bottom: .75rem; }

/* ── Dashboard / Dossier lijst ───────────────────────────────────────────── */
.urgentie-banner { display: flex; align-items: center; gap: .4rem; color: var(--rood); font-size: .8rem; font-weight: 600; margin-top: .3rem; }
.filter-balk { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: 1.5rem; }
.zoek-wrap { position: relative; flex: 1; min-width: 200px; }
.zoek-wrap svg { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: rgba(14,63,99,.4); pointer-events: none; }
.zoek-input { width: 100%; padding: .5rem .75rem .5rem 2.5rem; border-radius: 10px; border: 1px solid var(--line-2); background: var(--wit); color: var(--groen); font-family: inherit; font-size: .875rem; transition: border-color .15s, box-shadow .15s; }
.zoek-input:focus { outline: none; border-color: var(--marine); box-shadow: 0 0 0 3px rgba(26,106,163,.15); }
.filter-knoppen { display: flex; border-radius: 8px; border: 1px solid var(--line-2); overflow: hidden; background: var(--wit); }
.filter-knop { padding: .4rem .8rem; font-family: inherit; font-size: .8rem; font-weight: 500; cursor: pointer; border: none; background: none; color: rgba(14,63,99,.6); transition: all .15s; }
.filter-knop:hover { background: rgba(14,63,99,.05); color: var(--groen); }
.filter-knop.actief { background: var(--groen); color: var(--zand); }
.select-filter { padding: .4rem .75rem; border-radius: 8px; border: 1px solid var(--line-2); background: var(--wit); color: var(--groen); font-family: inherit; font-size: .8rem; }
.select-filter:focus { outline: none; border-color: var(--groen); }

.dossier-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.dossier-kaart { display: flex; flex-direction: column; gap: .6rem; background: var(--wit); border-radius: 14px; border: 1px solid var(--rand); padding: 1.1rem; box-shadow: var(--schaduw); cursor: pointer; transition: all .15s; }
.dossier-kaart:hover { box-shadow: var(--schaduw-md); border-color: var(--marine); transform: translateY(-1px); }
.dossier-urgent { border-left: 4px solid var(--rood); }
.dossier-kaart-kop { display: flex; align-items: flex-start; justify-content: space-between; }
.dossier-naam { font-weight: 700; font-size: .875rem; line-height: 1.3; color: var(--groen); }
.dossier-stap { font-size: .75rem; color: rgba(14,63,99,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dossier-meta { display: flex; align-items: center; gap: .75rem; font-size: .7rem; color: rgba(14,63,99,.5); flex-wrap: wrap; }
.meta-rechts { margin-left: auto; }

.voortgang-wrap { display: flex; flex-direction: column; gap: .3rem; }
.voortgang-labels { display: flex; justify-content: space-between; font-size: .7rem; color: rgba(14,63,99,.6); }
.voortgang-balk { height: 6px; background: rgba(14,63,99,.1); border-radius: 10px; overflow: hidden; }
.voortgang-vulling { height: 100%; background: linear-gradient(90deg, var(--marine), var(--ember)); border-radius: 10px; transition: width .3s; }
.voortgang-pct { font-size: .8rem; font-weight: 700; }

.leeg-staat { grid-column: 1/-1; text-align: center; padding: 4rem 2rem; color: rgba(14,63,99,.4); display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.leeg-staat p { font-weight: 500; }
.leeg-staat-klein { text-align: center; padding: 2rem; color: rgba(14,63,99,.4); display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.geen-resultaten { text-align: center; color: rgba(14,63,99,.5); padding: 1rem; font-size: .875rem; }

/* ── Nieuw dossier ───────────────────────────────────────────────────────── */
.formulier-wrap { max-width: 680px; }
.zoek-formulier { display: flex; gap: .75rem; margin-bottom: 1rem; }
.zoek-rij { display: flex; gap: .75rem; width: 100%; }
.zoek-rij .input { flex: 1; }
.zoekresultaten { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }
.zoekresultaat { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-radius: var(--radius); border: 1px solid var(--rand); cursor: pointer; background: var(--wit); text-align: left; transition: all .15s; width: 100%; }
.zoekresultaat:hover { border-color: var(--midgroen); background: rgba(26,106,163,.05); }
.zoekresultaat-icoon { width: 36px; height: 36px; border-radius: 50%; background: rgba(14,63,99,.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.zoekresultaat strong { display: block; font-size: .875rem; color: var(--groen); }
.zoekresultaat small { color: rgba(14,63,99,.5); font-size: .75rem; }
.klant-geselecteerd { display: flex; align-items: center; justify-content: space-between; background: rgba(26,106,163,.1); border-radius: 8px; padding: .75rem 1rem; margin-bottom: 1rem; }
.klant-geselecteerd strong { display: block; font-size: .875rem; }
.klant-geselecteerd small { color: rgba(14,63,99,.5); font-size: .75rem; }

.extra-velden { display: none; }
.extra-velden.zichtbaar { display: flex; flex-direction: column; gap: .4rem; }

/* ── Dossier detail ──────────────────────────────────────────────────────── */
.terug-link { margin-bottom: 1rem; }
.terug-link a { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: rgba(14,63,99,.6); transition: color .15s; }
.terug-link a:hover { color: var(--groen); }
.dossier-acties { display: flex; gap: .5rem; align-items: center; }

.detail-grid { display: flex; gap: 1.25rem; align-items: flex-start; }
.detail-kolom-links { flex: 35; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.detail-kolom-rechts { flex: 65; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
@media (max-width: 900px) { .detail-grid { flex-direction: column; } }
.detail-kolom { display: flex; flex-direction: column; gap: 1rem; }

.klant-info { display: flex; flex-direction: column; gap: .35rem; }
.klant-naam { font-weight: 700; font-size: .95rem; }
.klant-veld { font-size: .8rem; color: rgba(14,63,99,.7); display: flex; gap: .5rem; margin: 0; }
.klant-veld span { color: rgba(14,63,99,.4); min-width: 70px; font-size: .75rem; }
.klant-veld-wrap { display: flex; align-items: flex-start; gap: .3rem; }
.klant-veld-wrap .klant-veld { flex: 1; }
.klant-edit-btn { flex-shrink: 0; background: none; border: none; cursor: pointer; padding: .1rem .2rem; color: #cbd5e1; line-height: 1; border-radius: 3px; }
.klant-edit-btn:hover { color: var(--groen); background: #f0fdf4; }
.klant-veld-inline-edit { padding: .4rem 0 .3rem; }
.override-stip { color: #3b82f6; font-size: .55rem; margin-left: .25rem; vertical-align: super; }
.klant-sub { margin-top: .25rem; }

.info-lijst { display: flex; flex-direction: column; gap: .5rem; }
.info-lijst div { display: flex; justify-content: space-between; gap: .5rem; font-size: .8rem; }
.info-lijst dt { color: rgba(14,63,99,.5); flex-shrink: 0; }
.info-lijst dd { font-weight: 500; text-align: right; }
.link-groen { color: var(--midgroen); }
.link-groen:hover { color: var(--groen); }

.actieve-stap-label { font-size: .8rem; color: rgba(14,63,99,.7); margin-bottom: .75rem; }

/* Stappenplan */
.stappen-lijst { display: flex; flex-direction: column; gap: .25rem; }
.stap { display: flex; align-items: flex-start; gap: .75rem; padding: .6rem; border-radius: 10px; transition: background .1s; }
.stap-actief { background: rgba(240,101,63,.08); border-left: 3px solid var(--ember); }
.stap-voltooid { opacity: .55; }
.stap-toekomst { opacity: .35; }
.stap-overgeslagen { opacity: .55; background: rgba(100,116,139,.05); border-left: 3px solid #94a3b8; }
.stap-icoon { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.stap-actief .stap-icoon { background: var(--ember); color: var(--white); }
.stap-voltooid .stap-icoon { background: var(--midgroen); color: #fff; }
.stap-toekomst .stap-icoon { background: rgba(14,63,99,.12); color: var(--groen); }
.stap-overgeslagen .stap-icoon { background: #94a3b8; color: #fff; }
.stap-inhoud { flex: 1; min-width: 0; }
.stap-label { font-size: .8rem; font-weight: 500; line-height: 1.35; }
.stap-rol { font-size: .7rem; color: rgba(14,63,99,.5); display: block; }
.stap-reminder { font-size: .7rem; color: #92400e; }

/* Tijdlijn */
.tijdlijn { display: flex; flex-direction: column; }
.tijdlijn-item { display: flex; gap: .75rem; padding-bottom: 1rem; }
.tijdlijn-icoon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tijdlijn-brief_uitgaand, .tijdlijn-email_bd { background: rgba(26,106,163,.12); color: var(--groen); }
.tijdlijn-brief_inkomend { background: rgba(59,130,246,.12); color: #1e40af; }
.tijdlijn-telefoon_bd { background: rgba(245,158,11,.15); color: #92400e; }
.tijdlijn-notitie { background: var(--zand); color: rgba(14,63,99,.5); }
.tijdlijn-document_definitief { background: rgba(14,63,99,.1); color: var(--groen); }
.tijdlijn-document_concept, .tijdlijn-concept_brief { background: rgba(14,63,99,.06); color: var(--midgroen); }
.tijdlijn-inhoud { flex: 1; }
.tijdlijn-meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .25rem; }
.tijdlijn-type { font-size: .7rem; font-weight: 600; color: var(--midgroen); }
.tijdlijn-datum { font-size: .7rem; color: rgba(14,63,99,.5); }
.tijdlijn-gebruiker { font-size: .7rem; color: rgba(14,63,99,.5); }
.tijdlijn-tekst { font-size: .825rem; color: var(--groen); }
.vervolgactie { display: flex; align-items: flex-start; gap: .4rem; margin-top: .4rem; background: rgba(245,158,11,.1); border-radius: 6px; padding: .4rem .6rem; font-size: .75rem; color: #92400e; }
.vervolgactie-afgerond { background: rgba(26,106,163,.1); color: var(--midgroen); }

/* Slide panel */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 150; }
.slide-panel { position: fixed; right: 0; top: 0; height: 100vh; width: 420px; background: var(--zand); box-shadow: -4px 0 20px rgba(0,0,0,.12); z-index: 200; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.slide-panel-kop { display: flex; align-items: center; justify-content: space-between; }
.slide-panel-kop h3 { font-size: 1rem; font-weight: 700; }
.vervolgactie-velden { background: rgba(245,158,11,.08); border-radius: 10px; padding: 1rem; display: flex; flex-direction: column; gap: .75rem; border: 1px solid rgba(245,158,11,.25); }

/* ── Stand van zaken ─────────────────────────────────────────────────────── */
#svzWeergave p { font-size: .875rem; white-space: pre-wrap; }

/* ── Gebruikers ──────────────────────────────────────────────────────────── */
.gebruikers-lijst { display: flex; flex-direction: column; gap: 1rem; max-width: 800px; }
.gebruiker-kaart { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.gebruiker-info { display: flex; align-items: center; gap: 1rem; }
.avatar-groot { width: 44px; height: 44px; border-radius: 50%; background: var(--groen); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 700; flex-shrink: 0; }
.avatar-inactief { background: rgba(14,63,99,.3); }
.gebruiker-naam-rij { display: flex; align-items: center; gap: .5rem; margin-bottom: .2rem; }
.gebruiker-acties { display: flex; gap: .5rem; flex-wrap: wrap; }
.rol-badges { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .3rem; }
.bewerken-panel { margin-top: -.5rem; border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; border-top: 1px dashed var(--rand); }

/* ── Type-specifieke velden ──────────────────────────────────────────────── */
.aanslagen-lijst { margin-top: .5rem; display: flex; flex-direction: column; gap: .35rem; }
.aanslag { background: rgba(14,63,99,.04); border-radius: 6px; padding: .4rem .6rem; font-size: .75rem; }

/* ── Klanten ─────────────────────────────────────────────────────────────── */
.klanten-grid { display: flex; flex-direction: column; gap: .5rem; max-width: 700px; }
.klant-kaart { display: flex; align-items: center; gap: 1rem; background: var(--wit); border-radius: var(--radius); border: 1px solid var(--rand); padding: .875rem 1rem; box-shadow: var(--schaduw); cursor: pointer; transition: all .15s; text-decoration: none; color: inherit; }
.klant-kaart:hover { border-color: var(--midgroen); box-shadow: var(--schaduw-md); transform: translateX(2px); }
.klant-avatar { width: 40px; height: 40px; border-radius: 50%; background: rgba(14,63,99,.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--groen); }
.klant-kaart-info { flex: 1; min-width: 0; }
.klant-kaart-naam { display: block; font-weight: 600; font-size: .875rem; color: var(--groen); }
.klant-kaart-nr { font-size: .75rem; color: rgba(14,63,99,.5); }
.klant-kaart-meta { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.klant-kaart-totaal { font-size: .75rem; color: rgba(14,63,99,.5); }

/* Stap voltooien knop */
.stap-voltooien-btn { display: block; width: 100%; margin-top: .5rem; font-size: .8rem; }

/* Inline bewerk-formulier in type-kaart */
.bewerk-form { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--rand); }

/* ── Stand van zaken ────────────────────────────────────────────────────── */
.svz-volgende-actie { background: rgba(14,63,99,.05); border-left: 3px solid var(--midgroen); border-radius: 0 6px 6px 0; padding: .6rem .8rem; margin-bottom: .75rem; }
.svz-label { font-size: .7rem; font-weight: 600; color: var(--midgroen); text-transform: uppercase; letter-spacing: .5px; display: block; margin-bottom: .2rem; }
.svz-stap { font-size: .875rem; font-weight: 600; color: var(--groen); line-height: 1.4; }
.svz-rol { font-size: .75rem; color: rgba(14,63,99,.5); }
.svz-notities { font-size: .875rem; color: var(--groen); line-height: 1.6; white-space: pre-wrap; }
.veld-label { display: block; font-size: .8rem; font-weight: 600; color: var(--groen); margin-bottom: .4rem; }

/* ── Profiel menu links ─────────────────────────────────────────────────── */
.profiel-menu-link { display: flex; align-items: center; gap: .5rem; padding: .5rem .875rem; font-size: .8rem; color: var(--groen); text-decoration: none; transition: background .1s; }
.profiel-menu-link:hover { background: var(--zand); }
.profiel-menu-scheider { border-top: 1px solid var(--rand); margin: .25rem 0; }

/* ── Mijn taken vandaag ─────────────────────────────────────────────────── */
.mijn-taken-sectie { margin-bottom: 2rem; }
.sectie-titel { font-size: .9rem; font-weight: 700; color: var(--ember); font-family: var(--display); margin-bottom: .75rem; text-transform: uppercase; letter-spacing: .5px; }
.taken-lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; }
.taak-kaart { display: block; background: var(--wit); border: 1px solid var(--rand); border-radius: 14px; padding: .875rem 1rem; box-shadow: var(--schaduw); transition: all .15s; text-decoration: none; color: inherit; }
.taak-kaart:hover { border-color: var(--marine); box-shadow: var(--schaduw-md); transform: translateY(-1px); }
.taak-urgent { border-color: rgba(255,30,16,.3); }
.taak-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.taak-stap { font-size: .8rem; font-weight: 600; color: var(--groen); line-height: 1.3; margin-bottom: .25rem; }
.taak-dossier { font-size: .75rem; color: rgba(14,63,99,.6); margin-bottom: .35rem; }
.taak-deadline { font-size: .7rem; display: flex; align-items: center; gap: .3rem; }

/* ── Bijlagen in tijdlijn ────────────────────────────────────────────────── */
.tijdlijn-bijlagen { margin-top: .4rem; display: flex; flex-direction: column; gap: .25rem; }

/* ── Document live-preview ──────────────────────────────────────────────── */
.ph-leeg { background: #fef3c7; border-bottom: 1.5px dashed #f59e0b; color: #92400e; padding: 0 2px; border-radius: 2px; min-width: 2em; display: inline-block; outline: none; cursor: text; }
.ph-leeg:focus { background: #fef9c3; outline: 2px solid #f59e0b; outline-offset: 1px; }
.ph-gevuld { border-bottom: 1.5px solid #86efac; color: #1e293b; padding: 0 2px; border-radius: 2px; min-width: 2em; display: inline-block; outline: none; cursor: text; }
.ph-gevuld:focus { background: #f0fdf4; outline: 2px solid #22c55e; outline-offset: 1px; }
.brief-p { margin: .4em 0; }
.keuze-blok { background: #f0fdf4; border-left: 3px solid var(--groen); padding: .3em .6em; border-radius: 0 4px 4px 0; color: #1e293b; }
.badge-verouderd { display: inline-block; font-size: .7rem; font-weight: 600; color: #92400e; background: #fef3c7; border: 1px solid #f59e0b; border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.badge-concept { display: inline-block; font-size: .7rem; font-weight: 600; color: #1e40af; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.bijlage-link { display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; color: var(--midgroen); text-decoration: none; }
.bijlage-link:hover { text-decoration: underline; }
.bijlage-link-inline { color: var(--midgroen); text-decoration: underline; text-underline-offset: 2px; font-weight: 500; }
.bijlage-link-inline:hover { color: var(--groen); }

/* ── Bestand input ───────────────────────────────────────────────────────── */
.input-bestand { display: block; width: 100%; font-size: .8rem; padding: .4rem 0; color: var(--groen); }

/* ── Formulierpagina (profiel, instellingen) ─────────────────────────────── */
.form-pagina { max-width: 560px; }
.form-kaart { padding: 1.5rem; }
.succes-banner { background: rgba(26,106,163,.12); color: #1a5c18; border: 1px solid rgba(26,106,163,.3); border-radius: 8px; padding: .6rem 1rem; font-size: .85rem; margin-bottom: 1rem; }
.veld-rij { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.veld-sectie-kop { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--ember); margin: 1rem 0 .5rem; }
.naam-voorbeeld { background: rgba(14,63,99,.04); border-radius: 8px; padding: .6rem .875rem; margin-top: .5rem; font-size: .8rem; display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.naam-voorbeeld-label { color: rgba(14,63,99,.5); white-space: nowrap; }
.naam-voorbeeld-waarde { font-weight: 600; color: var(--groen); }

/* ── Gevaarzone ──────────────────────────────────────────────────────────── */
.gevaarzone { margin-top: 2.5rem; border: 1px solid rgba(255,30,16,.2); border-radius: var(--radius-lg); background: rgba(255,30,16,.03); padding: 1.25rem 1.5rem; }
.gevaarzone-inhoud { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.gevaarzone-inhoud strong { display: block; font-size: .875rem; color: var(--rood); margin-bottom: .25rem; }
.gevaarzone-inhoud p { font-size: .8rem; color: rgba(14,63,99,.6); max-width: 500px; }

/* ── Instellingen tabs ───────────────────────────────────────────────────── */
.tabs-nav { display: flex; gap: .25rem; border-bottom: 2px solid var(--rand); margin-bottom: 1.5rem; }
.tab-nav-knop { display: inline-flex; align-items: center; gap: .4rem; padding: .6rem 1.1rem; border: none; background: none; font-family: inherit; font-size: .8rem; font-weight: 600; color: rgba(14,63,99,.5); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; border-radius: 6px 6px 0 0; transition: all .15s; }
.tab-nav-knop:hover { color: var(--groen); background: rgba(14,63,99,.04); }
.tab-nav-knop.actief { color: var(--groen); border-bottom-color: var(--groen); }
.tab-inhoud { display: none; }
.tab-inhoud.actief { display: block; }
.tab-toelichting { font-size: .825rem; color: rgba(14,63,99,.6); margin-bottom: 1.5rem; line-height: 1.6; }

/* ── Instellingen sectie ─────────────────────────────────────────────────── */
.instelling-sectie { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; box-shadow: var(--schaduw); }
.instelling-sectie-kop { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.instelling-sectie-titel { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.instelling-sectie-acties { display: flex; gap: .5rem; align-items: center; }
.source-label { font-size: .7rem; font-weight: 600; padding: .15rem .55rem; border-radius: 10px; }
.source-db { background: rgba(26,106,163,.15); color: #1a5c18; }
.source-code { background: rgba(14,63,99,.08); color: rgba(14,63,99,.55); }

/* ── Stap tabel ──────────────────────────────────────────────────────────── */
.stap-tabel-wrap { overflow-x: auto; }
.stap-tabel { width: 100%; border-collapse: collapse; font-size: .8rem; }
.stap-tabel thead th { padding: .4rem .5rem; text-align: left; font-size: .7rem; font-weight: 600; color: rgba(14,63,99,.5); border-bottom: 2px solid var(--rand); white-space: nowrap; }
.stap-tabel tbody tr { border-bottom: 1px solid rgba(14,63,99,.06); transition: background .1s; }
.stap-tabel tbody tr:hover { background: rgba(14,63,99,.02); }
.stap-tabel tbody td { padding: .45rem .5rem; vertical-align: middle; }
.stap-tabel .input, .stap-tabel .select { padding: .35rem .55rem; font-size: .78rem; }
.stap-nr-cel { color: rgba(14,63,99,.45); font-size: .75rem; font-weight: 600; text-align: center; width: 2.5rem; }
.cel-center { text-align: center; }
.stap-knoppen { display: flex; gap: .25rem; justify-content: flex-end; }
.btn-rij { background: none; border: none; cursor: pointer; padding: .25rem; border-radius: 5px; color: rgba(14,63,99,.45); display: inline-flex; align-items: center; transition: all .12s; }
.btn-rij:hover { background: rgba(14,63,99,.08); color: var(--groen); }
.btn-rij:active { transform: scale(.88); }
.btn-rij-gevaar:hover { background: rgba(255,30,16,.08); color: var(--rood); }
.btn-rij[disabled] { opacity: .4; cursor: not-allowed; pointer-events: none; }
.stap-tabel-footer { padding: .6rem 0 0; }
.inline-melding { font-size: .75rem; color: rgba(14,63,99,.5); padding: .35rem .5rem; font-style: italic; }

/* ── Accordion (placeholders) ────────────────────────────────────────────── */
.accordion-knop { display: flex; align-items: center; justify-content: space-between; width: 100%; background: rgba(14,63,99,.04); border: 1px solid var(--rand); border-radius: var(--radius); padding: .7rem 1rem; font-family: inherit; font-size: .85rem; font-weight: 600; color: var(--groen); cursor: pointer; transition: all .15s; text-align: left; }
.accordion-knop:hover { background: rgba(14,63,99,.07); }
.accordion-knop[aria-expanded="true"] { border-radius: var(--radius) var(--radius) 0 0; }
.accordion-pijl { transition: transform .2s; flex-shrink: 0; }
.accordion-knop[aria-expanded="true"] .accordion-pijl { transform: rotate(180deg); }
.accordion-inhoud { border: 1px solid var(--rand); border-top: none; border-radius: 0 0 var(--radius) var(--radius); padding: 1rem 1.25rem; background: var(--wit); }

/* ── Placeholder categorieën & chips ──────────────────────────────────────── */
.placeholder-cat { border: 1px solid var(--rand); border-radius: 8px; margin-bottom: .35rem; overflow: hidden; }
.placeholder-cat-kop { display: flex; align-items: center; justify-content: space-between; padding: .45rem .75rem; background: rgba(14,63,99,.025); cursor: pointer; user-select: none; gap: .5rem; }
.placeholder-cat-kop:hover { background: rgba(14,63,99,.055); }
.placeholder-cat-titel { font-size: .8rem; font-weight: 600; color: var(--groen); }
.placeholder-cat-acties { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.placeholder-cat-pijl { transition: transform .18s; flex-shrink: 0; color: rgba(14,63,99,.4); }
.placeholder-cat-inhoud { padding: .5rem .75rem; }
.placeholder-groep { margin-bottom: .75rem; }
.placeholder-groep strong { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--midgroen); margin-bottom: .4rem; }
.placeholder-lijst { display: flex; flex-wrap: wrap; gap: .35rem; }
.placeholder-chip { display: inline-block; background: rgba(14,63,99,.06); border: 1px solid rgba(14,63,99,.12); border-radius: 6px; padding: .2rem .55rem; font-size: .72rem; font-family: monospace; color: var(--groen); cursor: pointer; transition: all .12s; }
.placeholder-chip:hover { background: rgba(26,106,163,.18); border-color: var(--midgroen); }

/* ── Toast notificaties ──────────────────────────────────────────────────── */
.toast { position: fixed; bottom: 1.5rem; right: 1.5rem; padding: .75rem 1.25rem; border-radius: var(--radius); font-size: .85rem; font-weight: 500; box-shadow: 0 4px 16px rgba(0,0,0,.15); z-index: 1000; display: flex; align-items: center; gap: .5rem; max-width: 360px; animation: toast-in .25s ease; }
.toast-succes { background: #1a5c18; color: #fff; }
.toast-fout { background: var(--rood); color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ── Ongedaan maken knop (subtiel, ghost) ────────────────────────────────── */
.btn-ongedaan { background: none; border: none; padding: 0; margin-top: .2rem; font-size: .75rem; color: #999; cursor: pointer; display: block; }
.btn-ongedaan:hover { color: #555; text-decoration: underline; }

/* ── Utility ─────────────────────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── Statusbadge ─────────────────────────────────────────────────────────── */
.badge-status { display: inline-block; padding: .3rem .75rem; border-radius: 20px; font-size: .78rem; font-weight: 600; letter-spacing: .02em; }
.badge-status-rood { background: #fde8e8; color: #c0392b; border: 1px solid #f5c6c6; }
.badge-status-oranje { background: #fef3e2; color: #b8600a; border: 1px solid #fbd9a5; }
.badge-status-blauw { background: #e8f0fe; color: #1a56db; border: 1px solid #c3d9fc; }
.badge-status-groen { background: #e6f4e6; color: #1a5c18; border: 1px solid #b6d9b6; }
.badge-status-paars { background: #f3e8ff; color: #6b21a8; border: 1px solid #d8b4fe; }

/* ── Volgende actie blok ─────────────────────────────────────────────────── */
.volgende-actie-blok { display: flex; flex-direction: column; gap: .15rem; background: rgba(14,63,99,.04); border-left: 3px solid var(--midgroen); border-radius: 0 6px 6px 0; padding: .35rem .75rem; }
.volgende-actie-kop { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--midgroen); }
.volgende-actie-stap { font-size: .85rem; font-weight: 600; color: var(--groen); }
.volgende-actie-meta { font-size: .75rem; color: #64748b; }

/* ── Audit trail stap_log items ──────────────────────────────────────────── */
.tijdlijn-stap-log { opacity: .75; padding-bottom: .6rem; }
.tijdlijn-stap-log-icoon { width: 20px; height: 20px; border-radius: 50%; background: #e2e8f0; color: #64748b; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.tijdlijn-stap-log-tekst { font-size: .78rem; color: #64748b; padding-top: .1rem; }
.tijdlijn-stap-log-meta { color: #94a3b8; }

/* ── Veld hulpklassen ────────────────────────────────────────────────── */
.veld-groep { display: flex; flex-direction: column; gap: .2rem; margin-bottom: .5rem; }
.veld-groep:last-child { margin-bottom: 0; }

/* ── Entiteit kaarten ────────────────────────────────────────────────── */
.entiteit-sectie { margin-bottom: 1.5rem; }
.entiteit-sectie-titel { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--midgroen); margin-bottom: .6rem; }
.entiteit-kaarten { display: flex; flex-wrap: wrap; gap: .75rem; }
.entiteit-kaart { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius); padding: 1rem; flex: 1; min-width: 220px; max-width: 320px; }
.entiteit-kaart-kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.entiteit-kaart-naam { font-size: .85rem; font-weight: 600; color: var(--groen); }
.entiteit-toggle { display: flex; align-items: center; gap: .4rem; font-size: .75rem; color: #64748b; cursor: pointer; user-select: none; }
.entiteit-toggle input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--midgroen); cursor: pointer; }
.entiteit-velden { display: flex; flex-direction: column; gap: .5rem; }
.entiteit-veld { display: flex; flex-direction: column; gap: .2rem; }
.entiteit-veld label { font-size: .68rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .03em; }
.entiteit-veld input { padding: .35rem .6rem; border: 1px solid var(--rand); border-radius: 6px; font-size: .8rem; font-family: inherit; color: var(--groen); background: var(--zand); width: 100%; }
.entiteit-veld input:focus { outline: none; border-color: var(--midgroen); background: var(--wit); }
.entiteit-veld-rij { display: flex; gap: .5rem; }
.entiteit-veld-rij .entiteit-veld { flex: 1; }
.entiteit-opslaan { margin-top: .75rem; width: 100%; }

/* ── Structuurdiagram ─────────────────────────────────────────────────── */
.structuur-diagram { display: flex; align-items: center; gap: 0; flex-wrap: wrap; margin-top: .5rem; }
.structuur-knoop { background: var(--wit); border: 1.5px solid var(--rand); border-radius: 8px; padding: .3rem .6rem; font-size: .75rem; font-weight: 600; color: var(--groen); white-space: nowrap; }
.structuur-knoop-klant { background: rgba(26,106,163,.1); border-color: var(--midgroen); }
.structuur-pijl { display: flex; flex-direction: column; align-items: center; padding: 0 .25rem; font-size: .65rem; color: #94a3b8; white-space: nowrap; }
.structuur-pijl-lijn { font-size: 1rem; line-height: 1; color: #cbd5e1; }
.structuur-klant { background: rgba(26,106,163,.1); border-color: var(--midgroen); }
.structuur-sub { display: block; font-size: .65rem; font-weight: 400; color: #64748b; margin-top: .1rem; }
.structuur-pijl-pct { font-size: .65rem; color: #64748b; }
.structuur-ioo { background: #fef8e7; border-color: #fbd9a5 !important; }
.entiteit-in-oprichting-velden, .entiteit-opgericht-velden { margin-top: .75rem; }

/* Verticale structuurvisualisatie */
.structuur-diagram-v { display: flex; flex-direction: column; align-items: center; gap: 0; }
.structuur-cirkel { width: 44px; height: 44px; border-radius: 50%; background: #0C4409; color: #fff; display: flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 700; letter-spacing: .03em; }
.structuur-pijl-v { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .2rem 0; color: #64748b; font-size: .7rem; }
.structuur-pijl-lijn-v { width: 1.5px; height: 16px; background: #cbd5e1; }
.structuur-pijl-pct-v { font-size: .68rem; color: #64748b; }
.structuur-blok { width: 100%; border: 1.5px solid var(--midgroen); border-radius: 8px; padding: .4rem .65rem; font-size: .82rem; color: var(--groen); background: #fff; text-align: center; }
.structuur-blok-ioo { background: #fef8e7; border-color: #fbd9a5 !important; }
.structuur-blok-huidig { border-width: 2.5px; background: rgba(26,106,163,.08); }
.structuur-cirkel-huidig { outline: 2.5px solid rgba(14,63,99,.3); outline-offset: 3px; }

/* AdminPulse koppeling in entiteit */
.entiteit-ap-gekoppeld { background: rgba(26,106,163,.07); border: 1px solid rgba(26,106,163,.25); border-radius: 6px; padding: .5rem .65rem; margin-top: .5rem; }
.entiteit-ap-zoek { margin-top: .5rem; }
.entiteit-ap-resultaat { padding: .35rem .5rem; border-radius: 5px; cursor: pointer; font-size: .82rem; }
.entiteit-ap-resultaat:hover { background: rgba(26,106,163,.1); }

/* Mappen */
.map-sectie { border: 1px solid var(--rand); border-radius: 6px; margin-bottom: .4rem; overflow: hidden; }
.map-header { display: flex; align-items: center; gap: .4rem; padding: .45rem .65rem; font-size: .82rem; font-weight: 600; color: var(--groen); cursor: pointer; list-style: none; background: #f8fafc; }
.map-header::-webkit-details-marker { display: none; }
.map-verwijder-btn { margin-left: auto; background: none; border: none; color: #94a3b8; font-size: 1rem; cursor: pointer; line-height: 1; padding: 0 .2rem; }
.map-verwijder-btn:hover { color: #ef4444; }
.map-inhoud { padding: .5rem .65rem; }
.map-bestanden { display: flex; flex-direction: column; gap: .2rem; margin-bottom: .5rem; }
.map-bestand-rij { display: flex; align-items: center; gap: .3rem; padding: .2rem 0; border-bottom: 1px solid #f1f5f9; }
.entiteit-toggle { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: #64748b; cursor: pointer; user-select: none; margin-top: .25rem; }
.entiteit-toggle input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--midgroen); cursor: pointer; }
.detail-kolom-entiteiten { max-width: 360px; flex-shrink: 0; }

/* Bel-gids BD */
.bd-belgids { margin-bottom: 1.5rem; border-left: 3px solid var(--navy); }
.bd-belgids-kop { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.bd-belgids-kop h3 { font-size: .95rem; font-weight: 700; color: var(--navy); margin: 0; }
.bd-stappen { display: flex; flex-direction: column; gap: .85rem; }
.bd-stap { display: flex; align-items: flex-start; gap: .75rem; }
.bd-nr { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: #fff; font-size: .72rem; font-weight: 700; flex-shrink: 0; margin-top: .1rem; }
.bd-stap-inhoud { flex: 1; }
.bd-stap-titel { font-size: .78rem; font-weight: 600; color: var(--slate); margin: 0 0 .35rem; text-transform: uppercase; letter-spacing: .04em; }
.bd-waarde-rij { display: flex; align-items: center; gap: .5rem; margin-bottom: .25rem; flex-wrap: wrap; }
.bd-label { font-size: .78rem; color: var(--slate); min-width: 90px; }
.bd-waarde-rij strong { font-size: .93rem; color: var(--ink); }
.bd-tel { font-size: 1.1rem; font-weight: 700; color: var(--navy); text-decoration: none; }
.bd-tel:hover { text-decoration: underline; }
.bd-ext { font-size: 1.1rem; font-weight: 700; color: var(--ember); }
.bd-sub { font-size: .78rem; color: var(--slate); }
.bd-kopieer { background: none; border: 1px solid var(--line-2); border-radius: 5px; padding: 2px 5px; cursor: pointer; color: var(--slate); display: flex; align-items: center; }
.bd-kopieer:hover { background: var(--surface); color: var(--navy); }
.bd-ontbreekt { font-size: .83rem; color: var(--slate); font-style: italic; }
.bd-aanslag-rij { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.bd-aanslag-input { max-width: 180px; font-size: .9rem; }
.bd-geen-aanslag-label { display: flex; align-items: center; gap: .4rem; font-size: .83rem; color: var(--slate); cursor: pointer; margin-top: .25rem; }
.bd-geen-aanslag-label input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--ember); cursor: pointer; }
.bd-schuldenoverzicht-blok { margin-top: .75rem; padding: .75rem; background: rgba(240,101,63,.06); border: 1px solid rgba(240,101,63,.2); border-radius: 10px; }
.bd-info { font-size: .82rem; color: #7c3a1e; margin: 0 0 .6rem; line-height: 1.5; }

/* Aanslagen tabel */
.aanslag-tabel-wrap { overflow-x: auto; margin-bottom: .5rem; }
.aanslag-tabel { width: 100%; border-collapse: collapse; font-size: .83rem; }
.aanslag-tabel th { font-size: .72rem; font-weight: 600; color: var(--slate); text-transform: uppercase; letter-spacing: .04em; padding: .3rem .5rem; border-bottom: 1.5px solid var(--rand); text-align: left; }
.aanslag-tabel td { padding: .4rem .5rem; border-bottom: 1px solid var(--rand); color: var(--ink); vertical-align: middle; }
.aanslag-tabel tr:last-child td { border-bottom: none; }
.aanslag-tabel tr:hover td { background: #f8fafc; }

/* Dossier aanslagen blok */
.dossier-aanslagen-rij { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; border-bottom: 1px solid var(--rand); font-size: .83rem; }
.dossier-aanslagen-rij:last-of-type { border-bottom: none; }
.dossier-aanslagen-bedrag { font-weight: 700; color: var(--ink); }
.dossier-aanslagen-meta { color: var(--slate); font-size: .76rem; }