/* ============================================================
   SYB Kantoorbeheersysteem — basis CSS (Fase 1A)
   1-op-1 afgeleid van BRANDKIT SYB/brandkit.html + tokens.css.
   Alleen fundament: tokens, typografie, placeholder. De volledige
   app-layout (sidebar e.d.) komt in latere fasen.
   ============================================================ */

:root {
  /* Notion-clean palet (2026-06-06): rustige, monochrome grijzen met
     SYB-oranje als enige accent. Tokennamen ongewijzigd zodat de hele
     app meekantelt; alleen de waarden zijn neutraler/lichter gemaakt.
     'taupe' is nu een neutraal grijs i.p.v. warm beige. */
  --antraciet:      #37352F;   /* primaire tekst (Notion near-black) */
  --antraciet-deep: #2B2A27;
  --steengrijs:     #6A6864;   /* secundaire tekst (iets donkerder = beter leesbaar) */
  --taupe:          #807E79;   /* labels, tertiaire tekst, sfeer */
  --taupe-light:    #E7E6E3;   /* borders, dunne lijnen */
  --lichtgrijs:     #F7F7F5;   /* app-canvas + subtiele hover */
  --wit:            #FFFFFF;   /* cards, witvlak */
  --accent:         #E05A28;   /* SYB-oranje — enige accentkleur */
  --accent-hover:   #C94E24;

  /* Aliassen conform CLAUDE.md §3.3-naamgeving */
  --syb-dark:    var(--antraciet);
  --syb-beige:   var(--taupe);
  --syb-light:   var(--lichtgrijs);
  --syb-white:   var(--wit);
  --syb-success: #4A7C59;
  --syb-warning: #C0833A;
  --syb-danger:  #A04545;
  --syb-info:    #3A6EA8;

  /* Notion-clean: één schreefloos lettertype overal. De namen
     'serif'/'display' blijven bestaan maar wijzen nu óók naar Inter,
     zodat bestaande verwijzingen automatisch schreefloos worden. */
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-serif:   var(--font-sans);
  --font-display: var(--font-sans);

  --radius: 6px;
  --card-shadow: none;          /* Notion is plat — geen kaartschaduw */
  --transition: 0.15s ease;
  /* color-bridge rustkleur primaire CTA (brandkit §5) — geen nieuwe
     kleur, alias op de buurkleur lichtgrijs. */
  --cta-bg: var(--lichtgrijs);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--antraciet);
  background: var(--lichtgrijs);
  line-height: 1.6;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--antraciet);
  line-height: 1.2;
}

/* De oude italic-serif-bijzin wordt in Notion-stijl een rustige
   grijze normaal-cursieve toevoeging (geen sierletter meer). */
h1 em, h2 em { font-style: normal; font-weight: 400; color: var(--taupe); }

p { color: var(--steengrijs); line-height: 1.7; }

.label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--taupe);
}

/* --- Placeholder-pagina (Fase 1A) --- */
.placeholder-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.placeholder-card {
  background: var(--wit);
  border: 1px solid var(--taupe-light);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: 56px;
  max-width: 560px;
  text-align: center;
}

.placeholder-card .wm {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 64px;
  letter-spacing: 1px;
  line-height: 1;
  margin-bottom: 28px;
  color: var(--antraciet);
}

.placeholder-card .wm span { color: var(--accent); }

.placeholder-card h1 {
  font-size: 30px;
  margin: 14px 0 16px;
}

.placeholder-card p { margin: 0 auto; max-width: 44ch; }

.placeholder-card .meta {
  margin-top: 32px;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--taupe);
}

/* ============================================================
   Fase 1C — login, app-shell (lichte sidebar), formulieren
   Brandkit licht-first: uitsluitend witte/lichtgrijze vlakken,
   antraciet = tekst, taupe = sfeer/lijnen, oranje = enige actie.
   ============================================================ */

a { color: var(--accent); }

/* --- Login-pagina --- */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.auth-card {
  background: var(--wit);
  border: 1px solid var(--taupe-light);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: 48px 48px 40px;
  width: 100%;
  max-width: 420px;
  text-align: center;
}

/* Woordmerk uit de brandkit (img/syb-wordmark.svg) — vervangt het
   oude tekst-logo op login/2FA/foutpagina's. */
.auth-card .wm-logo {
  height: 46px;
  width: auto;
  display: inline-block;
}

.auth-card h1 { font-size: 26px; margin: 10px 0 24px; }

.auth-card .meta {
  margin-top: 28px;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--taupe);
}

/* --- Formuliervelden --- */
form { text-align: left; }

.veld { margin-bottom: 18px; }

.veld label {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--steengrijs);
  margin-bottom: 6px;
}

.veld input {
  width: 100%;
  padding: 10px 13px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 400;
  color: var(--antraciet);
  background: var(--wit);
  border: 1px solid var(--taupe-light);
  border-radius: 8px;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.veld input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.veld-fout {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--syb-danger);
}

/* Solide actie-knop (brandkit §5 .btn-solid): vol oranje, Inter 600 */
.btn-solid {
  display: inline-block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 18px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.1px;
  color: var(--wit);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--transition);
}

.btn-solid:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* --- Flash-/foutmeldingen --- */
.alert {
  padding: 11px 15px;
  margin-bottom: 18px;
  font-size: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--taupe-light);
  background: var(--wit);
}

.alert-fout {
  color: var(--syb-danger);
  border-color: var(--syb-danger);
  background: #fbf3f3;
}

.alert-info {
  color: var(--syb-info);
  border-color: var(--syb-info);
  background: #f2f6fb;
}

/* ============================================================
   App-shell — herontwerp 2026-06-06 (Notion/Linear-stijl frame)
   Rustige zijbalk met iconen + secties, zwevende topbar en een
   gecentreerde content-canvas met ruime witruimte.
   ============================================================ */
:root {
  --sidebar-bg: #FBFBFA;     /* zijbalk net iets warmer dan wit */
  --canvas:     #F8F8F7;     /* content-achtergrond */
  --hover:      rgba(55, 53, 47, 0.055);
  --active:     rgba(55, 53, 47, 0.09);
  --shadow-sm:  0 1px 2px rgba(15, 15, 15, 0.05);
  --shadow-md:  0 6px 24px rgba(15, 15, 15, 0.09);
  --ring:       0 0 0 3px rgba(224, 90, 40, 0.16);
}

body { background: var(--canvas); }

.app { display: flex; min-height: 100vh; }

/* --- Zijbalk --- */
.sidebar {
  width: 256px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--taupe-light);
}

.sidebar-head { padding: 14px 12px 6px; }

.workspace {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 8px;
  text-decoration: none;
  transition: background var(--transition);
}
.workspace:hover { background: var(--hover); }
.workspace-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
}
.workspace-name { display: flex; flex-direction: column; line-height: 1.2; }
.workspace-name strong { font-size: 14px; font-weight: 600; color: var(--antraciet); }
.workspace-name span { font-size: 11px; color: var(--taupe); }

/* Zoekbalk */
.sidebar-search { padding: 6px 12px 8px; }
.search-wrap { position: relative; }
.search-wrap svg {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--taupe);
  pointer-events: none;
}
.sidebar-search input {
  width: 100%;
  padding: 7px 10px 7px 30px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--antraciet);
  background: var(--wit);
  border: 1px solid var(--taupe-light);
  border-radius: 8px;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.sidebar-search input::placeholder { color: var(--taupe); }
.sidebar-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

/* Navigatie met iconen + secties */
.nav {
  flex: 1;
  overflow-y: auto;
  padding: 4px 10px 14px;
  display: flex;
  flex-direction: column;
}
.nav-group { margin-top: 16px; }
.nav-group:first-child { margin-top: 4px; }
.nav-group-label {
  padding: 4px 10px;
  margin-bottom: 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--taupe);
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  margin: 1px 0;
  font-size: 14px;
  font-weight: 450;
  color: var(--steengrijs);
  text-decoration: none;
  border-radius: 7px;
  transition: background var(--transition), color var(--transition);
}
.nav-item .nav-ic {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--taupe);
  transition: color var(--transition);
}
.nav-item:hover { background: var(--hover); color: var(--antraciet); }
.nav-item:hover .nav-ic { color: var(--steengrijs); }
.nav-item.is-active { background: var(--active); color: var(--antraciet); font-weight: 600; }
.nav-item.is-active .nav-ic { color: var(--accent); }

.nav-scheiding { height: 1px; background: var(--taupe-light); margin: 10px; }

/* Gebruikerskaart onderaan */
.sidebar-foot { border-top: 1px solid var(--taupe-light); padding: 8px; }
.user-card { display: flex; align-items: center; gap: 10px; padding: 6px 6px; border-radius: 8px; }
.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--antraciet);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.user-meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.user-naam {
  font-size: 13px;
  font-weight: 600;
  color: var(--antraciet);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-rol { font-size: 11px; text-transform: capitalize; color: var(--taupe); }
.logout-form { margin: 0 0 0 auto; }
.btn-uitloggen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--taupe);
  background: transparent;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.btn-uitloggen:hover { background: var(--hover); color: var(--syb-danger); }

/* --- Main + zwevende topbar --- */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 52px;
  padding: 0 28px;
  background: rgba(248, 248, 247, 0.8);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--taupe-light);
}
.topbar-titel { font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--antraciet); }
.topbar-right { font-size: 12.5px; color: var(--taupe); }

/* --- Content-canvas (gecentreerd, ruim) --- */
.content {
  flex: 1;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 36px 28px 72px;
}

/* --- Kaart --- */
.kaart {
  background: var(--wit);
  border: 1px solid var(--taupe-light);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  padding: 24px 26px;
  max-width: 640px;
}

.kaart h1 { font-size: 20px; margin: 2px 0 12px; }

.kaart .meta {
  margin-top: 22px;
  font-size: 12px;
  letter-spacing: 0.3px;
  color: var(--taupe);
}

/* Zijbalk inklappen op smal scherm (desktop is primair, §12B). */
@media (max-width: 760px) {
  .app { flex-direction: column; }
  .sidebar {
    width: 100%;
    height: auto;
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--taupe-light);
  }
  .nav { overflow: visible; }
  .content { padding: 22px 16px 56px; }
}

/* ============================================================
   Fase 2 — Klanten & dossier
   Brandkit-conform: licht-first, oranje = enige actiekleur,
   taupe = sfeer/lijnen, Playfair koppen, Inter body.
   ============================================================ */

.kaart-breed { max-width: 100%; }

/* --- Paginakop (label + titel + actie) --- */
.paginakop {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.paginakop h1 { font-size: 25px; font-weight: 700; margin-top: 5px; }
.kop-acties { display: flex; align-items: center; gap: 14px; }

.badge-rij { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.terug-link {
  font-size: 13px;
  color: var(--steengrijs);
  text-decoration: none;
  white-space: nowrap;
}
.terug-link:hover { color: var(--accent); }

/* --- Primaire pagina-CTA: solide oranje actieknop --- */
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.1px;
  color: var(--wit);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background var(--transition), border-color var(--transition);
}
.btn-cta:hover,
.btn-cta:focus {
  color: var(--wit);
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* Neutrale (secundaire) variant — witte knop met dunne rand.
   Knopdiscipline: oranje is gereserveerd voor de éne hoofdactie per
   scherm; statusovergangen, navigatie en rij-acties zijn neutraal. */
.btn-cta.btn-neutraal,
.btn-solid.btn-neutraal {
  color: var(--antraciet);
  background: var(--wit);
  border-color: var(--taupe-light);
}
.btn-cta.btn-neutraal:hover,
.btn-solid.btn-neutraal:hover { background: var(--hover); border-color: var(--taupe); }

.btn-compact { width: auto; padding: 9px 16px; margin-top: 0; }

/* --- Tabs per rechtsvorm --- */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--taupe-light);
  margin-bottom: 20px;
}

.tab {
  padding: 10px 18px;
  font-size: 14px;
  color: var(--steengrijs);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transition), border-color var(--transition);
}
.tab:hover { color: var(--antraciet); }
.tab.is-active {
  color: var(--antraciet);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

.tab-telling {
  display: inline-block;
  min-width: 20px;
  padding: 1px 7px;
  margin-left: 4px;
  font-size: 11px;
  text-align: center;
  color: var(--steengrijs);
  background: var(--lichtgrijs);
  border: 1px solid var(--taupe-light);
  border-radius: 999px;
}

/* --- Zoekbalk --- */
.zoek {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.zoek input[type="text"] {
  flex: 1;
  padding: 10px 14px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--antraciet);
  background: var(--wit);
  border: 1px solid var(--taupe-light);
  border-radius: 8px;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.zoek input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}
.zoek-wis { font-size: 13px; color: var(--steengrijs); text-decoration: none; }
.zoek-wis:hover { color: var(--accent); }

/* --- Datatabel --- */
.tabel { width: 100%; border-collapse: collapse; }
.tabel th {
  text-align: left;
  padding: 9px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--taupe);
  border-bottom: 1px solid var(--taupe-light);
}
.tabel td {
  padding: 13px 14px;
  font-size: 14px;
  color: var(--steengrijs);
  border-bottom: 1px solid var(--taupe-light);
  /* Mixed-content rijen (badge + getal + tekst + invoerveld) op één
     hoogte centreren i.p.v. op de tekst-baseline — anders staat een
     badge/input nét niet gelijk met de cijfers ernaast. */
  vertical-align: middle;
}
.tabel tbody tr:last-child td { border-bottom: none; }
.tabel tbody tr { cursor: pointer; transition: background var(--transition); }
.tabel tbody tr:hover { background: var(--hover); }
.tabel-link {
  color: var(--antraciet);
  font-weight: 500;
  text-decoration: none;
}
.tabel-link:hover { color: var(--accent); }

.leeg { color: var(--steengrijs); font-style: italic; padding: 18px 2px; }

/* --- Badges --- */
.badge {
  display: inline-block;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: var(--steengrijs);
  background: var(--lichtgrijs);
  border: 1px solid var(--taupe-light);
  border-radius: 999px;
  /* Nooit over meerdere regels breken — anders wordt een pil met
     border-radius 999px in een smalle (tabel)kolom een cirkel. */
  white-space: nowrap;
}
.badge-rv { color: var(--antraciet); background: var(--wit); }
.badge-starter {
  color: var(--accent);
  background: #fdf1ec;
  border-color: rgba(224, 90, 40, 0.35);
}
.badge-actief {
  color: var(--syb-success);
  background: #eef4f0;
  border-color: rgba(74, 124, 89, 0.35);
}
.badge-inactief { color: var(--steengrijs); }
.badge-uitstel {
  color: var(--syb-warning);
  background: #f8f1e8;
  border-color: rgba(192, 131, 58, 0.35);
}
.badge-notitie { text-transform: capitalize; }
.badge-suppletie {
  color: var(--syb-info);
  background: #ecf1f7;
  border-color: rgba(58, 110, 168, 0.35);
}

/* --- Formulier --- */
.form-sectie {
  padding: 22px 0;
  border-bottom: 1px solid var(--taupe-light);
}
.form-sectie:last-of-type { border-bottom: none; }
.form-sectie-titel {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--antraciet);
  margin-bottom: 14px;
}
/* Tweede en volgende sectiekop binnen dezelfde kaart krijgt lucht +
   een dunne scheidingslijn erboven. */
.kaart .form-sectie-titel ~ .form-sectie-titel,
.gegevens + .form-sectie-titel,
form + .form-sectie-titel,
.tijdlijn + .form-sectie-titel,
table + .form-sectie-titel {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--taupe-light);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 24px;
}
.veld-breed { grid-column: 1 / -1; }

.veld select,
.veld textarea,
.zoek select {
  width: 100%;
  padding: 10px 13px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 400;
  color: var(--antraciet);
  background: var(--wit);
  border: 1px solid var(--taupe-light);
  border-radius: 8px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.veld select:focus,
.veld textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}
.veld textarea { resize: vertical; }

.veld-check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--steengrijs);
}
.veld-check input {
  width: auto;
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.form-acties {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 22px;
}
.form-acties .btn-solid { width: auto; }

/* --- Dossier-layout --- */
.dossier {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}
.dossier-main { display: flex; flex-direction: column; gap: 24px; }
.dossier-rail { display: flex; flex-direction: column; gap: 24px; }
.dossier .kaart { max-width: 100%; }

/* Property-lijst: nette rijen met dunne scheidingslijnen (Notion-stijl).
   Label gedempt links, waarde rechts; elke rij een hairline erboven. */
.gegevens {
  display: grid;
  grid-template-columns: minmax(150px, 40%) 1fr;
  gap: 0 20px;
  margin-bottom: 2px;
}
.gegevens dt {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--steengrijs);
  padding: 9px 0;
  border-top: 1px solid var(--taupe-light);
}
.gegevens dd {
  font-size: 13.5px;
  color: var(--antraciet);
  padding: 9px 0;
  border-top: 1px solid var(--taupe-light);
}
/* Eerste rij zonder bovenlijn. */
.gegevens > :nth-child(1),
.gegevens > :nth-child(2) { border-top: none; }
.gegevens dd a { font-weight: 500; }
.gegevens dd a:hover { text-decoration: underline; }

.hint { font-size: 12.5px; color: var(--steengrijs); margin-bottom: 14px; line-height: 1.55; }

/* --- Dossier-hero (klant-avatar + naam) --- */
.dossier-kop { align-items: center; }
.dossier-hero { display: flex; align-items: center; gap: 16px; }
.dossier-avatar {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--antraciet);
  color: #fff;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* --- Snelkoppelingen-lijst in de rail (iconen + chevron) --- */
.snel-lijst { display: flex; flex-direction: column; }
.snel-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  margin: 0 -10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--antraciet);
  font-size: 13.5px;
  font-weight: 500;
  transition: background var(--transition);
}
.snel-item:hover { background: var(--hover); }
.snel-item .snel-ic { width: 18px; height: 18px; color: var(--taupe); flex-shrink: 0; transition: color var(--transition); }
.snel-item:hover .snel-ic { color: var(--accent); }
.snel-item .snel-chev { margin-left: auto; color: var(--taupe); width: 16px; height: 16px; }

/* --- Modulelijst (per rechtsvorm, CLAUDE.md §3.4) --- */
.module-lijst { list-style: none; }
.module-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--taupe-light);
}
.module-item:last-child { border-bottom: none; }
.module-item a { color: var(--antraciet); text-decoration: none; }
.module-item a:hover { color: var(--accent); }
.module-item span { color: var(--steengrijs); }
.module-item.is-actief {
  font-weight: 500;
  border-left: 3px solid var(--accent);
  padding-left: 10px;
  margin-left: -13px;
}
.binnenkort {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--taupe);
}

/* --- Tijdlijn / notities --- */
/* Notitieformulier gebruikt nu de gedeelde .form-grid/.veld-stijl
   (consistent met de compliance-secties, Fase 2B). */
.notitie-form { margin-bottom: 24px; }

.tijdlijn { list-style: none; }
.tijdlijn-item {
  padding: 14px 0 14px 18px;
  border-left: 2px solid var(--taupe-light);
  position: relative;
}
.tijdlijn-item::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 18px;
  width: 9px;
  height: 9px;
  background: var(--taupe);
  border-radius: 50%;
}
.tijdlijn-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.tijdlijn-datum { font-size: 12px; color: var(--steengrijs); }
.tijdlijn-auteur {
  font-size: 12px;
  color: var(--taupe);
  margin-left: auto;
}
.tijdlijn-tekst { color: var(--antraciet); white-space: pre-wrap; }

/* --- Flash 'info' (bestond nog niet expliciet) --- */
.alert-info { color: var(--syb-info); }

/* --- Fase 2B: compliance-dossier (WWFT/UBO/machtigingen/opdracht) --- */
.btn-tekst-gevaar {
  background: none;
  border: none;
  color: var(--syb-danger);
  font: inherit;
  cursor: pointer;
  padding: 4px 0;
  text-decoration: underline;
}
.btn-tekst-gevaar:hover { color: #7e3636; }
/* Neutrale tekst-knop — voor inline acties als "Heropenen". */
.btn-tekst {
  background: none;
  border: none;
  color: var(--syb-info);
  font: inherit;
  cursor: pointer;
  padding: 4px 0;
  text-decoration: underline;
  margin-right: 8px;
}
.btn-tekst:hover { color: #265182; }
.inline-form { display: inline; }
.ubo-form { margin-bottom: 8px; }
/* Machtiging-rij: velden naast elkaar, wrap op smal scherm */
.rij-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
}
.rij-form select,
.rij-form input {
  width: auto;
  padding: 8px 10px;
  border: 1px solid var(--taupe);
  border-radius: 6px;
}
.rij-form .btn-compact { margin-left: 4px; }

/* --- Fase 3D: mapping-editor --- */
/* Gele "nog ongemapt"-balk (brandkit --syb-warning, §3.3). */
.alert-waarschuwing {
  color: var(--syb-warning);
  border-color: var(--syb-warning);
  background: #f8f1e8;
}
/* Ongemapte rekeningen lichtgeel gemarkeerd (CLAUDE.md Fase 3D). */
.tabel tr.ongemapt-rij { background: #fbf4e8; }
.tabel tr.ongemapt-rij:hover { background: #f6ecda; }
.sug-hint {
  font-size: 12px;
  color: var(--steengrijs);
  margin: 2px 0 0;
}
.sug-hint strong { color: var(--syb-warning); }
/* Inline bewerken in een tabelrij: compacte velden (hergebruikt
   .rij-form-stijl, maar binnen een cel). */
.map-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.map-form select,
.map-form input[type="text"] {
  width: auto;
  padding: 7px 9px;
  font-size: 13px;
  border: 1px solid var(--taupe-light);
  border-radius: 6px;
  background: var(--wit);
}
.map-form .veld-check { margin: 0; }
.filter-balk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.filter-balk .pill {
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--taupe-light);
  color: var(--steengrijs);
  text-decoration: none;
}
.filter-balk .pill.is-active {
  color: var(--wit);
  background: var(--accent);
  border-color: var(--accent);
}

/* --- Fase 3E: documentbeheer & aanlevering --- */
.aanlevering-blok {
  border: 1px solid var(--taupe-light);
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 14px;
  background: var(--lichtgrijs);
}
.checklijst { list-style: none; margin: 10px 0; padding: 0; }
.checklijst li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
}
.checkknop {
  background: none;
  border: none;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  color: var(--steengrijs);
  padding: 0;
}
.checkknop.is-ontvangen { color: var(--syb-success); }
.item-ontvangen { color: var(--steengrijs); text-decoration: line-through; }

/* --- Klantdossier: sub-navigatie (tabbalk) --- */
/* Licht-first, brandkit: Inter 500, geen hoofdletters, oranje alleen
   als subtiele actieve-indicator (2px onderlijn). */
.dossier-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  border-bottom: 1px solid var(--taupe-light);
  margin: 4px 0 24px;
}
.dossier-tab {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--steengrijs);
  text-decoration: none;
  padding: 10px 2px;
  margin-bottom: -1px;            /* onderlijn valt op de containerrand */
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.dossier-tab:hover { color: var(--antraciet); }
.dossier-tab.is-actief {
  color: var(--antraciet);
  border-bottom-color: var(--accent);
}
.dossier-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .dossier { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .paginakop { flex-direction: column; align-items: flex-start; }
  .dossier-tabs { gap: 6px 16px; }
}

/* ============================================================
   Fase 4 — Jaarrekening-workflow
   ============================================================ */

/* Stappenbalk: licht-first, accent alleen voor de actieve stap. */
.stepper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.stepper .step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--wit);
  border: 1px solid var(--taupe-light);
  border-radius: var(--radius);
  color: var(--steengrijs);
  text-decoration: none;
  font-size: 13px;
  transition: border-color var(--transition), color var(--transition);
}
.stepper .step:hover { color: var(--antraciet); }
.stepper .step .step-nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--lichtgrijs);
  color: var(--steengrijs);
  font-weight: 600;
  font-size: 12px;
}
.stepper .step.is-done { color: var(--antraciet); }
.stepper .step.is-done .step-nr {
  background: var(--syb-success);
  color: var(--wit);
}
.stepper .step.is-actief {
  border-color: var(--accent);
  color: var(--antraciet);
}
.stepper .step.is-actief .step-nr {
  background: var(--accent);
  color: var(--wit);
}
.stepper .step:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* KPI-boxen (kerncijfers). */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 18px 0 26px;
}
.kpi {
  background: var(--wit);
  border: 1px solid var(--taupe-light);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
}
.kpi span {
  display: block;
  font-size: 12px;
  color: var(--steengrijs);
  margin-bottom: 6px;
}
.kpi strong {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--antraciet);
}

/* Twee kolommen (W&V naast balans). */
.twee-koloms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 12px;
}

/* Cijfertabellen: rechtslijnende bedragen, totaalregels. */
.tabel .num, .tabel th.num { text-align: right; white-space: nowrap; }
.tabel-cijfers tbody tr { cursor: default; }
.tabel-cijfers tbody tr:hover { background: transparent; }
.tabel-cijfers .rij-totaal td {
  font-weight: 600;
  color: var(--antraciet);
  border-top: 2px solid var(--taupe-light);
}
.bedrag-ok { color: var(--syb-success); }
.bedrag-fout { color: var(--syb-danger); }

/* Saldoloze rekeningen: getoond voor traceerbaarheid, maar gedempt
   zodat de aandacht naar de relevante (saldo-)rekeningen gaat. */
.tabel tbody tr.rij-gedempt { color: var(--steengrijs); opacity: 0.6; }
.tabel tbody tr.rij-gedempt:hover { background: transparent; }

/* Statusbadges jaarrekening. */
.jr-status { color: var(--antraciet); background: var(--lichtgrijs); }
.jr-status-definitief,
.jr-status-gearchiveerd { color: var(--syb-success); background: #eaf1ec; }
.jr-status-concept { color: var(--syb-warning); background: #f7efe2; }
.jr-status-wachten { color: var(--steengrijs); }

/* Statusbadges BTW-aangifte (Fase 6A). */
.btw-status { color: var(--antraciet); background: var(--lichtgrijs); }
.btw-status-ingediend { color: var(--syb-success); background: #eaf1ec; }
.btw-status-concept { color: var(--syb-warning); background: #f7efe2; }
.btw-status-te_laat { color: #ffffff; background: var(--syb-danger); }
.btw-status-open { color: var(--steengrijs); }
/* Tijdvak-label (bv. "Q2 (apr–jun)") niet midden in het label afbreken. */
.tijdvak-cel { white-space: nowrap; }

/* Statusbadges IB-aangifte (Fase 6G). Hetzelfde patroon als BTW. */
.ib-status { color: var(--antraciet); background: var(--lichtgrijs); }
.ib-status-ingediend { color: var(--syb-success); background: #eaf1ec; }
.ib-status-concept { color: var(--syb-warning); background: #f7efe2; }
.ib-status-te_laat { color: #ffffff; background: var(--syb-danger); }
.ib-status-open { color: var(--steengrijs); }

/* Compacte cijferinvoer in BTW-formulier (Fase 6A). */
/* Losse invoervelden in cijfertabellen/kaarten (buiten .veld). Kregen
   in 6A nooit de Notion-stijl en vielen terug op kale browser-inputs;
   2026-06-06 rechtgetrokken — zelfde rand/padding/focus als .veld input. */
.invoer-cijfer,
.invoer-notitie {
  font-family: var(--font-sans);
  color: var(--antraciet);
  background: var(--wit);
  border: 1px solid var(--taupe-light);
  border-radius: 8px;
  box-sizing: border-box;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.invoer-cijfer {
  width: 150px;
  max-width: 100%;
  padding: 8px 11px;
  font-size: 14px;
  font-weight: 500;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.invoer-notitie {
  width: 100%;
  padding: 10px 13px;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
}
.invoer-cijfer:focus,
.invoer-notitie:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}
/* Ingediende (readonly) aangifte: velden gedempt zodat duidelijk is
   dat ze niet bewerkbaar zijn zonder heropenen. */
.invoer-cijfer:read-only,
.invoer-notitie:read-only {
  background: var(--lichtgrijs);
  color: var(--steengrijs);
  cursor: not-allowed;
}

/* Losse <select> in een paginakop-actie (bv. jaar-switcher op het
   BTW-jaaroverzicht) — dezelfde stijl als .veld select, compacter. */
.kop-acties select {
  padding: 8px 12px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--antraciet);
  background: var(--wit);
  border: 1px solid var(--taupe-light);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.kop-acties select:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }

/* Statusbadges Overige werkzaamheden (Fase 6H). Drie statussen
   (open/in_behandeling/afgerond) — geen 'te_laat' want er is geen
   harde deadline op deze module. */
.ow-status { color: var(--antraciet); background: var(--lichtgrijs); }
.ow-status-open { color: var(--steengrijs); }
.ow-status-in_behandeling { color: var(--syb-warning); background: #f7efe2; }
.ow-status-afgerond { color: var(--syb-success); background: #eaf1ec; }

/* Statusbadges Facturatie (Fase 6B). */
.fact-status { color: var(--antraciet); background: var(--lichtgrijs); }
.fact-status-te_factureren { color: var(--syb-warning); background: #f7efe2; }
.fact-status-gefactureerd { color: var(--syb-success); background: #eaf1ec; }
.fact-status-vervallen { color: var(--steengrijs); }

/* Statusbadges Aanslag-opvolging (Fase 6E). ontvangen=neutraal,
   akkoord=groen, bezwaar=oranje (in behandeling), afgehandeld=blauw
   (afgesloten). Teruggaaf-bedragen in succes-groen. */
.aanslag-status { color: var(--antraciet); background: var(--lichtgrijs); }
.aanslag-status-ontvangen { color: var(--steengrijs); }
.aanslag-status-akkoord { color: var(--syb-success); background: #eaf1ec; }
.aanslag-status-bezwaar { color: var(--syb-warning); background: #f7efe2; }
.aanslag-status-afgehandeld { color: var(--syb-info); background: #f2f6fb; }
.bedrag-teruggaaf { color: var(--syb-success); }

/* Drie tegels boven de werklijst (Fase 6B). */
.facturatie-tegels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0 0 16px;
}
.kaart-tegel { padding: 18px 20px; }
.kaart-tegel .kaart-cijfer,
.kaart-tegel-link .kaart-cijfer {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 8px 0 0;
  color: var(--antraciet);
  font-variant-numeric: tabular-nums;
}
.kaart-tegel-link {
  display: block;
  text-decoration: none;
  color: inherit;
  margin-top: 12px;
  max-width: 320px;
  transition: border-color var(--transition), box-shadow var(--transition),
    transform var(--transition);
}
.kaart-tegel-link:hover {
  border-color: var(--taupe);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
/* Zichtbare focus voor toetsenbordnavigatie op alle klikbare kaarten/rijen. */
.kaart-tegel-link:focus-visible,
.alert-rij:focus-visible,
.snel-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Dashboard (Fase 6J) — alert-lijst (§9.4) + module-tegel-grid. */
.dashboard-becon {
  font-size: 12px;
  color: var(--steengrijs);
  margin: 0 0 18px;
}
.dashboard-sectie { margin-bottom: 28px; }
.dashboard-sectie > .label { margin-bottom: 10px; }

.dashboard-alerts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.alert-rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: var(--wit);
  border: 1px solid var(--taupe-light);
  border-left-width: 3px;
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--transition), transform var(--transition);
}
.alert-rij:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.alert-tekst { flex: 1; min-width: 0; }
.alert-rij .titel {
  display: block;
  font-weight: 600;
  color: var(--antraciet);
}
.alert-rij .hint { margin: 2px 0 0; }
.alert-aantal {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 9px;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--steengrijs);
  background: var(--lichtgrijs);
  border-radius: 999px;
}
.alert-chev { flex: none; width: 18px; height: 18px; color: var(--taupe); }
/* Telling-pill kleurt mee met de urgentie. */
.alert-rood   .alert-aantal { color: var(--syb-danger);  background: #FBECEC; }
.alert-oranje .alert-aantal { color: var(--syb-warning); background: #FAF1E6; }
.alert-geel   .alert-aantal { color: #7E6410;            background: #FAF4E1; }
/* Linker-rand kleurt de urgentie (rood → oranje → geel). */
.alert-rood   { border-left-color: var(--syb-danger); }
.alert-oranje { border-left-color: var(--syb-warning); }
.alert-geel   { border-left-color: #C9A227; }

.dashboard-tegels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.dashboard-tegels .kaart-tegel-link { max-width: none; margin-top: 0; }

/* ---- Dashboard-herontwerp: begroeting-hero, urgentie, lege staat, tegel-icoon ---- */
.dash-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}
.dash-groet { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.dash-sub { margin-top: 6px; font-size: 14px; color: var(--steengrijs); }
.dash-becon-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: 10px 14px;
  background: var(--wit);
  border: 1px solid var(--taupe-light);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.dash-becon-chip .label { margin: 0; }
.dash-becon-chip strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--antraciet);
  font-variant-numeric: tabular-nums;
}

.sectie-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.sectie-kop .label { margin: 0; }
.urg-telling { display: flex; gap: 6px; }
.urg {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.2px;
}
.urg-rood   { color: var(--syb-danger);  background: #FBECEC; }
.urg-oranje { color: var(--syb-warning); background: #FAF1E6; }
.urg-geel   { color: #7E6410;            background: #FAF4E1; }

/* Lege staat signalen */
.dash-leeg { display: flex; align-items: center; gap: 18px; max-width: 100%; }
.dash-leeg h2 { font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.dash-leeg p { font-size: 14px; }
.dash-leeg-ic {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #EAF1EC;
  color: var(--syb-success);
}
.dash-leeg-ic svg { width: 24px; height: 24px; }

/* Module-tegel: icoon bovenaan, kleurt mee op hover */
.tegel-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--lichtgrijs);
  color: var(--steengrijs);
}
.tegel-ic svg { width: 20px; height: 20px; }
.kaart-tegel-link:hover .tegel-ic { background: #FBEEE7; color: var(--accent); }

@media (max-width: 640px) {
  .dash-hero { flex-direction: column; }
  .dash-becon-chip { align-items: flex-start; }
}

/* ===========================================================
   Command center: KPI-balk + twee kolommen (nu doen / agenda)
   =========================================================== */
.kpi-balk {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}
.kpi-kaart {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;       /* KPI's zijn links naar hun lijst */
  transition: border-color var(--transition), box-shadow var(--transition);
  background: var(--wit);
  border: 1px solid var(--taupe-light);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
}
.kpi-label { font-size: 12px; font-weight: 500; color: var(--steengrijs); }
.kpi-waarde {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--antraciet);
  font-variant-numeric: tabular-nums;
}
.kpi-bij { font-size: 12px; color: var(--taupe); }
/* Te laat > 0 → kaart kleurt subtiel rood zodat het meteen opvalt. */
.kpi-rood { border-color: rgba(160, 69, 69, 0.35); background: #FCF4F4; }
.kpi-rood .kpi-waarde { color: var(--syb-danger); }

.cc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 28px;
  align-items: start;
}

/* Lijst van rijen in één kaart met dunne scheidingslijnen. */
.cc-lijst {
  background: var(--wit);
  border: 1px solid var(--taupe-light);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.cc-rij {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-top: 1px solid var(--taupe-light);
  text-decoration: none;
  color: inherit;
  transition: background var(--transition);
}
.cc-rij:first-child { border-top: none; }
.cc-rij:hover { background: var(--hover); }
.cc-rij:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--hover); }
.cc-rij-laat { border-left: 3px solid var(--syb-danger); }

.cc-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.cc-titel {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--antraciet);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cc-klant {
  font-size: 12px;
  color: var(--steengrijs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Soort-chip (te-laat-kolom) */
.cc-soort {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  padding: 3px 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  border-radius: 6px;
  background: var(--lichtgrijs);
  color: var(--steengrijs);
}
.cc-soort-btw     { background: #E6EEF7; color: #2C5C92; }
.cc-soort-ib      { background: #EFEAF7; color: #4A3D73; }
.cc-soort-aanslag { background: #F7EDDE; color: #9A6A2E; }

.cc-laat-badge {
  flex: none;
  font-size: 11.5px;
  font-weight: 700;
  color: #8E2F2F;
  background: #F6DADA;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Datum-chip (agenda-kolom) */
.cc-datum {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 46px;
  padding: 5px 0;
  border-radius: 8px;
  background: var(--lichtgrijs);
  line-height: 1.05;
}
.cc-dag { font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--steengrijs); }
.cc-dagnr { font-size: 17px; font-weight: 700; color: var(--antraciet); font-variant-numeric: tabular-nums; }
.cc-mnd { font-size: 10px; text-transform: uppercase; color: var(--steengrijs); }
.cc-rel { flex: none; font-size: 12px; color: var(--steengrijs); white-space: nowrap; }

/* Lege staat in een kolom */
.cc-leeg { display: flex; align-items: center; gap: 12px; padding: 18px; }
.cc-leeg p { font-size: 13.5px; margin: 0; }
.cc-leeg-ic {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #EAF1EC;
  color: var(--syb-success);
}
.cc-leeg-ic svg { width: 18px; height: 18px; }

.urg-rustig { color: var(--steengrijs); background: var(--lichtgrijs); }

@media (max-width: 860px) {
  .cc-grid { grid-template-columns: 1fr; }
}

/* ===========================================================
   Werkstroom-overzicht (mijnkantoor-stijl plannerweergave)
   =========================================================== */
.ws-telling { display: flex; flex-wrap: wrap; gap: 6px; }
.urg-klaar { color: #3A6B4A; background: #EAF1EC; }

.ws-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 18px;
}
.ws-filter { display: flex; flex-direction: column; gap: 5px; }
.ws-filter > span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--taupe);
}
.ws-filter select {
  padding: 8px 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--antraciet);
  background: var(--wit);
  border: 1px solid var(--taupe-light);
  border-radius: 8px;
  min-width: 160px;
}
.ws-filter select:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.ws-filters .zoek-wis { padding-bottom: 9px; }

/* Raster in een kaart; horizontaal scrollbaar bij veel kolommen. */
.ws-wrap {
  background: var(--wit);
  border: 1px solid var(--taupe-light);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}
.ws-tabel { width: 100%; border-collapse: collapse; }
.ws-tabel th, .ws-tabel td { border-bottom: 1px solid var(--taupe-light); }
.ws-tabel tbody tr:last-child td { border-bottom: none; }

.ws-klant-kop, .ws-proces-kop {
  padding: 12px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--taupe);
  text-align: left;
  white-space: nowrap;
  background: var(--wit);
}
.ws-proces-kop { text-align: center; }
.ws-proces { display: block; color: var(--antraciet); font-size: 12px; }
.ws-proces-jaar { display: block; font-weight: 500; color: var(--taupe); }

/* Eerste kolom (klant) blijft staan bij horizontaal scrollen. */
.ws-klant-kop, .ws-klant {
  position: sticky;
  left: 0;
  background: var(--wit);
  z-index: 1;
}
.ws-klant {
  padding: 10px 14px;
  min-width: 210px;
  border-right: 1px solid var(--taupe-light);
}
.ws-tabel tbody tr:hover .ws-klant { background: var(--lichtgrijs); }
.ws-klant-link {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--antraciet);
  text-decoration: none;
}
.ws-klant-link:hover { color: var(--accent); }
.ws-klant-rv { font-size: 11.5px; color: var(--steengrijs); }

.ws-cel-td { padding: 7px 8px; text-align: center; }
.ws-cel {
  display: block;
  padding: 6px 4px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
}
a.ws-cel:hover { filter: brightness(0.96); }
a.ws-cel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ws-klaar   { background: #EAF1EC; color: #336046; }
.ws-bezig   { background: #FAF1E6; color: #8A5A1E; }
.ws-open    { background: #EDECE8; color: #54534E; }
.ws-te_laat { background: #F6DADA; color: #8E2F2F; }
.ws-nvt     { background: transparent; color: var(--taupe); font-weight: 400; }

/* Legenda onder het raster */
.ws-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--steengrijs);
}
.ws-legenda-item { display: inline-flex; align-items: center; gap: 7px; }
.ws-stip { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.ws-stip-klaar   { background: #9CC3A8; }
.ws-stip-bezig   { background: #E0B877; }
.ws-stip-open    { background: #D7D5D0; }
.ws-stip-te_laat { background: #D98C8C; }
.ws-stip-nvt     { background: transparent; border: 1px solid var(--taupe-light); }

/* Inline bedrag- en actie-formulieren in de werklijst (Fase 6B). */
.bedrag-inline {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
}
.actie-inline {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-right: 8px;
}
.invoer-ref {
  width: 110px;
}
.acties-cel { white-space: nowrap; }

/* Stapnavigatie onderaan. */
.stap-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--taupe-light);
}
.stap-nav form { margin: 0; }
.stap-nav .btn-solid, .stap-nav .btn-cta { width: auto; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  background: var(--lichtgrijs);
  padding: 1px 5px;
  border-radius: 3px;
}

@media (max-width: 900px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .twee-koloms { grid-template-columns: 1fr; }
  .stepper .step .step-label { display: none; }
}

/* --- Desinvesteringsbijtelling-detail (5A-iv-3-bis) ---------------- */
.bijtelling-detail { margin-top: 12px; }
.bijtelling-detail > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--syb-info);
  padding: 8px 0;
}
.bijtelling-detail[open] > summary { color: var(--antraciet); }

/* --- Bulk-opslag (5A-iv-3-vervolg): sticky knop boven én onderaan ----
   Eén "Alle wijzigingen opslaan"-knop scheelt veel klikken vergeleken
   met een per-rij-knop, en — door het bovenste exemplaar sticky te
   maken — blijft de actie zichtbaar terwijl je naar beneden scrollt. */
.bulk-acties {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 12px 0;
}
.bulk-acties-top {
  position: sticky;
  top: 0;
  background: var(--wit);
  z-index: 5;
  border-bottom: 1px solid var(--taupe-light);
  margin-bottom: 8px;
}

/* --- Brugstaat-view (CLAUDE.md 5A-iv-3) --------------------------------
   Leesmodus standaard: rubriek als label, geen dropdowns. Bewerk-modus
   (toggle 'Mapping bewerken') toont dropdowns + bulk-opslag-knop.
   Beginsaldo-bron-tag (JRNNNN of XAF) en aansluit-fout-markering op het
   beginsaldo maken continuïteits-issues direct zichtbaar. */
.brugstaat-kop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
}
.brugstaat-modus { display: flex; gap: 12px; }

.brugstaat thead th { font-size: 11px; }
.brugstaat .brugstaat-groep-kop th {
  background: var(--lichtgrijs);
  font-size: 12px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding-top: 14px;
}
.brugstaat .brugstaat-rij select { font-size: 12px; max-width: 320px; }

.brugstaat-bron {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 6px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: var(--steengrijs);
  background: var(--lichtgrijs);
  border-radius: 999px;
}
.aansluit-fout {
  color: var(--syb-danger);
  text-decoration: underline wavy var(--syb-danger);
  text-underline-offset: 3px;
}
.rubriek-label {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 4px;
  border-left: 3px solid var(--taupe-light);
  background: var(--wit);
  color: var(--antraciet);
}
.rubriek-label.herkomst-vorig_jaar { border-left-color: var(--syb-success); }
.rubriek-label.herkomst-centraal   { border-left-color: var(--syb-info); }
.rubriek-label.herkomst-handmatig  { border-left-color: var(--syb-warning); }
.rubriek-label.herkomst-suggestie  { border-left-color: var(--syb-warning); background: #fbf4e8; }
.rubriek-label.herkomst-ongemapt   {
  border-left-color: var(--syb-danger);
  color: var(--syb-danger);
  background: #f6ebeb;
}

.herkomst-tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3px;
  border-radius: 999px;
  border: 1px solid var(--taupe-light);
  color: var(--steengrijs);
  background: var(--wit);
  white-space: nowrap;
}
.herkomst-vorig_jaar {
  color: var(--syb-success);
  background: #eef4f0;
  border-color: rgba(74, 124, 89, 0.35);
}
.herkomst-centraal {
  color: var(--syb-info);
  background: #eaf1f8;
  border-color: rgba(58, 110, 168, 0.35);
}
.herkomst-handmatig {
  color: var(--syb-warning);
  background: #f8f1e8;
  border-color: rgba(192, 131, 58, 0.35);
}
.herkomst-suggestie {
  color: var(--syb-warning);
  background: #fbf4e8;
  border-color: rgba(192, 131, 58, 0.5);
}
.herkomst-ongemapt {
  color: var(--syb-danger);
  background: #f6ebeb;
  border-color: rgba(160, 69, 69, 0.4);
}

/* --- Fase 5B: sectie-toggles + periode-keuze op workflow stap 6. --- */
.toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 24px;
  margin-bottom: 14px;
}
.toggle-rij {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 14px;
  color: var(--antraciet);
}
.toggle-rij input[type="checkbox"] {
  accent-color: var(--syb-info);
  width: 16px;
  height: 16px;
}
.form-rij {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.form-rij label {
  font-size: 13px;
  color: var(--taupe);
  min-width: 140px;
}
.form-rij select {
  flex: 0 0 220px;
  padding: 8px 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--antraciet);
  background: var(--wit);
  border: 1px solid var(--taupe-light);
  border-radius: var(--radius);
}

/* --- Planning-module (Fase 6I) ------------------------------------- */

/* Status-badges: dezelfde semantiek als BTW/IB, plus 'gepland' (neutraal)
   en 'afgerond' (groen). 'te_laat' rood — meest urgente blok. */
.planning-status { color: var(--antraciet); background: var(--lichtgrijs); }
.planning-status-gepland { color: var(--steengrijs); }
.planning-status-open { color: var(--steengrijs); }
.planning-status-concept { color: var(--syb-warning); background: #f7efe2; }
.planning-status-te_laat { color: #ffffff; background: var(--syb-danger); }
.planning-status-afgerond { color: var(--syb-success); background: #eaf1ec; }

/* Doorlooptijd-signaal: oranje accent — net iets minder hard dan
   te_laat (rode deadline-overschrijding) maar wel zichtbaar. */
.badge-doorlooptijd {
  color: #ffffff;
  background: var(--syb-warning);
}

/* Klikbare rij in de lijstview (zelfde patroon als overige_ww). */
.rij-klikbaar { cursor: pointer; }
.rij-klikbaar:hover { background: #fafaf8; }

/* Maandplanning-staafdiagram (§9.6). 12 tegels in een grid die op
   smal scherm 6, 4 of 2 kolommen wordt. */
.maandplanning-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
  margin-top: 16px;
}
.maand-tegel {
  border: 1px solid var(--taupe-light);
  border-radius: var(--radius);
  padding: 10px 8px;
  background: var(--wit);
  text-align: center;
}
.maand-label {
  font-size: 11px;
  color: var(--steengrijs);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}
.maand-staaf {
  height: 6px;
  background: var(--lichtgrijs);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.maand-staaf-vul {
  height: 100%;
  background: var(--syb-success);
  transition: width 0.2s ease;
}
.maand-cijfers {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.maand-percentage {
  font-family: var(--font-display, "Playfair Display", serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--antraciet);
}
@media (max-width: 1100px) {
  .maandplanning-grid { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 700px) {
  .maandplanning-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Strakke lijst zonder bullets — gebruikt door snooze-overzicht. */
.lijst-strak {
  list-style: none;
  padding: 0;
  margin: 0;
}
.lijst-strak li {
  padding: 4px 0;
  border-bottom: 1px solid var(--taupe-light);
}
.lijst-strak li:last-child { border-bottom: none; }

/* ============================================================
   Klantenlijst (herontwerp 2026-06-06) — Notion-clean rij-lijst
   in dezelfde familie als het command-center-dashboard en het
   dossier: één witte kaart met dunne scheidingslijnen, een
   avatar per klant, twee tekstregels en status rechts. Vervangt
   de oude bordered <table> zodat de lijst aanvoelt als de rest.
   Hergebruikt .cc-lijst/.cc-rij/.cc-tekst/.cc-titel/.cc-klant.
   ============================================================ */

/* Toolbar boven de lijst: telling links, eventueel actie rechts. */
.lijst-meta {
  font-size: 12.5px;
  color: var(--taupe);
  margin: 0 2px 10px;
}

/* Avatar met initialen — maat tussen user-avatar (30) en
   dossier-avatar (52); zelfde antraciet/wit als elders. */
.klant-avatar {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--antraciet);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* Naam + kleine kwalificatie-badges op één regel; naam ellipset. */
.klant-naam-rij {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.klant-naam-rij .cc-titel { flex: 0 1 auto; min-width: 0; }
.klant-naam-rij .badge { flex: none; }

/* Status-badge rechts houdt vaste breedte; chevron als affordance. */
.klant-rij .badge-actief,
.klant-rij .badge-inactief { flex: none; }

.lijst-chev {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--taupe-light);
  transition: color var(--transition), transform var(--transition);
}
.cc-rij:hover .lijst-chev { color: var(--steengrijs); transform: translateX(2px); }

/* Lege staat: gecentreerde kaart met neutraal icoon. */
.lijst-leeg {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 48px 26px;
}
.lijst-leeg-ic {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--lichtgrijs);
  color: var(--taupe);
}
.lijst-leeg-ic svg { width: 22px; height: 22px; }
.lijst-leeg p { color: var(--steengrijs); margin: 0; font-size: 14px; }
.lijst-leeg .zoek-wis { margin-top: 2px; }

/* Op smal scherm: verberg de verantwoordelijke in de meta-regel via
   de tweede ·-groep is niet triviaal in Jinja; we laten de regel
   gewoon ellipsen (cc-klant heeft al overflow:hidden). De avatar en
   status blijven; chevron mag weg op heel smal. */
@media (max-width: 600px) {
  .lijst-chev { display: none; }
}

/* Saldo-bedrag rechts in een BTW-werklijstrij (rechts uitgelijnd,
   tabellarisch zodat bedragen netjes onder elkaar staan). */
.btw-saldo {
  flex: none;
  min-width: 96px;
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  color: var(--antraciet);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.btw-saldo.is-leeg { color: var(--taupe-light); font-weight: 400; }

/* Werklijst-rij met acties (planning e.a.): de rij is een <div
   class="cc-rij">, de klikbare hoofdinhoud een <a class="cc-hoofdlink">
   en acties (kleine forms/knoppen) staan er als broertjes naast —
   een <form> mag immers niet ín een <a>. */
.cc-hoofdlink {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}
.cc-acties {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cc-acties .actie-inline { display: inline-flex; align-items: center; }

/* Selects ín tabellen (brugstaat-bewerkmodus, inline mapping,
   bron-aanschaf-dropdown): zonder dit vallen ze terug op kale
   browser-defaults — zelfde gotcha als losse .invoer-* inputs. */
.tabel select {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--antraciet);
  background: var(--wit);
  border: 1px solid var(--taupe-light);
  border-radius: 8px;
  padding: 6px 9px;
  max-width: 100%;
}
.tabel select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

/* --- Facturatie-werklijst: uitlijning inline-forms in de tabel --- */
/* Cellen netjes verticaal centreren; de datum-hint onder een badge
   krijgt geen losse paragraaf-marge meer (rijen even hoog). */
.tabel td { vertical-align: middle; }
.tabel td .hint { margin: 3px 0 0; }

/* Bedragveld compacter zodat de Bedrag-kolom niet uitdijt. */
.bedrag-inline .invoer-cijfer { width: 104px; }

/* Acties gestapeld i.p.v. alles op één regel — voorkomt dat de
   tabel breder wordt dan het canvas en knoppen verspringen. */
.acties-cel { white-space: normal; }
.acties-stapel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.acties-stapel .actie-inline { margin-right: 0; }

/* Totaalregel was alleen gestyled binnen .tabel-cijfers; de
   facturatie-tabel gebruikt .tabel — zelfde opmaak nu generiek. */
.tabel tfoot .rij-totaal td {
  font-weight: 600;
  color: var(--antraciet);
  border-top: 2px solid var(--taupe-light);
  border-bottom: none;
}

/* ==========================================================================
   Batch 3 (Fase 7A/7B/7C/7D + 5C/5D) — prognoses, KvK, archief,
   rapportage, instellingen-tabs.
   ========================================================================== */

/* cc-soort-varianten voor de nieuwe werklijsten. */
.cc-soort-prognose { background: #E8F1EA; color: #3C6647; }
.cc-soort-kvk      { background: #EDEFE6; color: #5C6133; }
.cc-soort-archief  { background: #EFEDEA; color: var(--steengrijs); }

/* Prognose-status (concept=geel, definitief=groen — zelfde semantiek
   als BTW/IB). */
.prognose-status-concept    { color: var(--syb-warning); background: #f7efe2; }
.prognose-status-definitief { color: var(--syb-success); background: #eaf1ec; }

/* KvK-deponering-status (§5.18). */
.kvk-status-niet_gedeponeerd { color: var(--steengrijs); }
.kvk-status-voorbereid       { color: var(--syb-warning); background: #f7efe2; }
.kvk-status-ingediend        { color: var(--syb-success); background: #eaf1ec; }
.kvk-status-te-laat          { color: var(--syb-danger); background: #f6eaea; }

/* Werkdruk-indicator (7B). */
.workload { font-weight: 600; }
.workload-groen  { color: var(--syb-success); background: #eaf1ec; }
.workload-oranje { color: var(--syb-warning); background: #f7efe2; }
.workload-rood   { color: var(--syb-danger); background: #f6eaea; }

/* Statische cc-rij (geen anchor — archief met actieknoppen). */
.cc-rij-statisch { cursor: default; }
.cc-rij-statisch:hover { background: transparent; }

/* Berekende-winst-regel op het prognose-formulier. */
.prognose-winst-regel {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0 2px;
  margin-top: 6px;
  border-top: 1px solid var(--lijn);
  font-size: 14px;
}
.prognose-winst-regel strong { font-size: 16px; }

/* Tab-navigatie instellingen (7D) — querystring-tabs, geen JS. */
.tab-balk {
  display: flex;
  gap: 2px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--taupe-light);
}
.tab-item {
  padding: 8px 14px;
  font-size: 13.5px;
  color: var(--steengrijs);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transition), border-color var(--transition);
}
.tab-item:hover { color: var(--syb-dark); }
.tab-item.is-actief {
  color: var(--syb-dark);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

/* Gebruikerskaart-link (eigen wachtwoord) — geen anker-opmaak. */
a.user-meta { text-decoration: none; color: inherit; border-radius: 4px; }
a.user-meta:hover .user-naam { text-decoration: underline; }

/* Snelkoppeling-knop in het dossier (exportpakket-POST): button die
   eruitziet als een .snel-item-anker. Een form mag niet in een anchor,
   zelfde reden als .cc-acties. */
.snel-form { display: block; }
.snel-item-knop {
  width: 100%;
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* ===========================================================================
   Batch 4 — sessie 1 (Fase 8A/8B offertes + Fase 9 interne taken)
   =========================================================================== */

/* Offerte-status (§5.25): concept=geel, verzonden=info-blauw,
   ondertekend=groen, afgewezen=rood, verlopen=steengrijs. */
.offerte-status-concept     { color: var(--syb-warning); background: #f7efe2; }
.offerte-status-verzonden   { color: var(--syb-info); background: #e8eef6; }
.offerte-status-ondertekend { color: var(--syb-success); background: #eaf1ec; }
.offerte-status-afgewezen   { color: var(--syb-danger); background: #f6eaea; }
.offerte-status-verlopen    { color: var(--steengrijs); }

/* cc-lijst-chips voor offertes en interne taken. */
.cc-soort-offerte { background: #E9EDF4; color: #3A547E; }
.cc-soort-taak    { background: #EFEDEA; color: var(--steengrijs); }

/* Prioriteit-accent op de taak-chip (alleen urgent/hoog kleuren). */
.cc-soort-taak.prioriteit-urgent { background: #f6eaea; color: var(--syb-danger); }
.cc-soort-taak.prioriteit-hoog   { background: #f7efe2; color: var(--syb-warning); }

/* Interne-taak-status (§5.29). */
.it-status-open           { color: var(--steengrijs); }
.it-status-in_behandeling { color: var(--syb-warning); background: #f7efe2; }
.it-status-afgerond       { color: var(--syb-success); background: #eaf1ec; }

/* Prospect-badge (§5.4 — offerte-traject, nog geen klant). */
.badge-prospect { color: var(--syb-info); background: #e8eef6; }

/* Sidebar-badge: aantal open interne taken van de gebruiker (Fase 9). */
.nav-badge {
  margin-left: auto;
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 9px;
  background: var(--syb-warning);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}

/* Inline-hint achter een checkbox-label (klant-formulier prospect). */
.hint-inline { color: var(--steengrijs); font-size: 12px; }

/* Rode accent-tekst (te-late deadline in de takenlijst). */
.tekst-gevaar { color: var(--syb-danger); }

/* ============================================================
   Native form-controls (UX-batch 2026-06-11) — selects, file-
   uploads, checkboxes en date-inputs trekken mee in de huisstijl
   zodat er geen rauwe browser-widgets meer tussen de kaarten staan.
   ============================================================ */

/* Selects: eigen chevron i.p.v. de browser-pijl. :not([multiple])
   tilt de specificiteit naar (0,1,1) zodat deze regel — als laatste
   in het blad — wint van eerdere `background:`-shorthands zoals in
   .veld select, die background-image anders op none zetten. */
select:not([multiple]) {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--wit);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  padding-right: 32px;
}

/* Checkboxes en radio's: accentkleur + vaste maat. */
input[type="checkbox"],
input[type="radio"] {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* File-upload: de native "Choose File"-knop als nette secundaire
   knop in de vormtaal van .btn-neutraal. */
input[type="file"] {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--steengrijs);
}
input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 8px 14px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--antraciet);
  background: var(--wit);
  border: 1px solid var(--taupe-light);
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
input[type="file"]::file-selector-button:hover {
  background: var(--hover);
  border-color: var(--taupe);
}

/* Date-inputs: kalender-icoon iets terughoudender. */
input[type="date"] {
  color-scheme: light;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.55;
  cursor: pointer;
}

/* Dossier-rail "Openstaand werk": compacte taakrijen met deadline. */
.rail-taken { display: flex; flex-direction: column; }
.rail-taak {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--taupe-light);
  text-decoration: none;
}
.rail-taak:last-child { border-bottom: none; }
.rail-taak-tekst {
  font-size: 13px;
  color: var(--antraciet);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rail-taak:hover .rail-taak-tekst { color: var(--accent); }
.rail-taak-deadline {
  flex-shrink: 0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--steengrijs);
}
.rail-voetnoot {
  margin-top: 10px;
  font-size: 12px;
  color: var(--steengrijs);
}

/* KPI-kaarten zijn klikbaar — subtiele hover als affordance. */
a.kpi-kaart:hover { border-color: var(--taupe); }

/* Dashboard-herontwerp 2026-06-11: hoofdgrid 3:2 — links "Nu doen",
   rechts de vooruitblik (agenda + signalen gestapeld). */
.dash-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 28px;
}
.dash-zij { display: flex; flex-direction: column; gap: 24px; }
.dash-meer { margin-top: 10px; font-size: 13px; }
@media (max-width: 1100px) {
  .dash-grid { grid-template-columns: 1fr; }
}

/* Positieve KPI ("Afgerond in <maand>") — groen accent. */
.kpi-groen { border-color: rgba(74, 124, 89, 0.35); background: #F3F8F4; }
.kpi-groen .kpi-waarde { color: var(--syb-success); }

/* Voortgangsblok dashboard (2026-06-11): jaarbalk + 12 maand-staven.
   Bewust hoger dan de oude 3px-progressbar van de maandplanning —
   het verschil tussen 35% en 93% moet in één oogopslag zichtbaar zijn. */
.voortgang-kaart { margin-bottom: 28px; }
.voortgang-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.badge-schema-ok { background: #EAF3ED; color: var(--syb-success); }
.badge-schema-achter { background: #FCF4F4; color: var(--syb-danger); }

.voortgang-balk {
  height: 8px;
  margin-top: 10px;
  background: var(--lichtgrijs);
  border: 1px solid var(--taupe-light);
  border-radius: 999px;
  overflow: hidden;
}
.voortgang-vulling {
  display: block;
  height: 100%;
  background: var(--syb-success);
  border-radius: 999px;
  transition: width 300ms ease;
}
.voortgang-tekst {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--steengrijs);
}

.voortgang-maanden {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
  margin-top: 16px;
}
.vm-kolom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}
.vm-staaf {
  display: flex;
  align-items: flex-end;          /* vulling groeit van onderaf */
  width: 100%;
  height: 48px;
  background: var(--lichtgrijs);
  border: 1px solid var(--taupe-light);
  border-radius: 5px;
  overflow: hidden;
}
.vm-vulling {
  display: block;
  width: 100%;
  background: var(--syb-success);
  border-radius: 4px 4px 0 0;
}
.vm-vulling-achter { background: var(--syb-danger); }
.vm-label {
  font-size: 11px;
  color: var(--steengrijs);
}
.vm-label-achter { color: var(--syb-danger); font-weight: 600; }
.vm-huidig .vm-staaf { border-color: var(--antraciet); }
.vm-huidig .vm-label { color: var(--antraciet); font-weight: 600; }
.vm-kolom:hover .vm-staaf { border-color: var(--taupe); }

/* Optioneel-inklapblok (BTW-bedragen e.d.): native <details> in de
   kaart-vormtaal. Gesloten inputs worden gewoon meegestuurd. */
details.optioneel-blok { margin-bottom: 18px; }
details.optioneel-blok > summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 16px;
  background: var(--wit);
  border: 1px solid var(--taupe-light);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--antraciet);
  list-style: none;
}
details.optioneel-blok > summary::-webkit-details-marker { display: none; }
details.optioneel-blok > summary::before {
  content: "▸";
  font-size: 11px;
  color: var(--steengrijs);
}
details.optioneel-blok[open] > summary { margin-bottom: 14px; }
details.optioneel-blok[open] > summary::before { content: "▾"; }
details.optioneel-blok > summary:hover { border-color: var(--taupe); }
.optioneel-blok-hint {
  font-weight: 400;
  font-size: 12.5px;
  color: var(--steengrijs);
}

/* Chevron-link naast cc-acties (BTW-lijst): zelfde plek als de
   chevron in een klikbare rij, maar als los navigatie-element. */
.cc-navlink { display: inline-flex; align-items: center; }

/* ==========================================================================
   Brugstaat-werkblad (besluit 2026-06-12) — rubriceren & controleren in
   één scherm. Vastgepinde controle-voet, filterchips, te-rubriceren-lijst.
   ========================================================================== */

.paginakop-acties { display: flex; gap: 8px; align-items: center; }

.werkblad-openstaand { border-left: 3px solid var(--syb-warning, #c0833a); }
.werkblad-openstaand-kop {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; margin-bottom: 8px;
}
.werkblad-openstaand-kop form { margin: 0; }
.werkblad-rij-actie { text-align: right; white-space: nowrap; }

.werkblad-kaart { padding-bottom: 0; }
.werkblad-filters {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-bottom: 12px;
}
.werkblad-filters input[type="search"] {
  max-width: 220px; padding: 6px 10px;
}
.werkblad-bron-uitleg { flex-basis: 100%; margin: 0; }

.werkblad-chips { display: inline-flex; gap: 6px; }
.werkblad-chips .chip {
  border: 1px solid #e8e3dc; background: #fff; border-radius: 999px;
  padding: 4px 12px; font-size: 13px; cursor: pointer; color: inherit;
}
.werkblad-chips .chip:hover { background: #f4f3f1; }
.werkblad-chips .chip-actief {
  background: var(--antraciet, #2e2e2e); color: #fff;
  border-color: var(--antraciet, #2e2e2e);
}

.werkblad-tabel select { max-width: 240px; }
.werkblad-ib select { max-width: 170px; }
.werkblad-gb { white-space: nowrap; font-variant-numeric: tabular-nums; }
.werkblad-rij-open td { background: #fdf8ef; }

/* Vastgepinde controle-voet: blijft onderin beeld tijdens scrollen. */
.werkblad-voet {
  position: sticky; bottom: 0; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: #fff; border-top: 1px solid #e8e3dc;
  padding: 12px 0; margin-top: 4px;
}
.werkblad-totalen {
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
  font-size: 14px;
}
.werkblad-totalen strong { font-variant-numeric: tabular-nums; }
.werkblad-evenwicht {
  border-radius: 999px; padding: 3px 10px; font-size: 13px;
  font-weight: 600;
}
.evenwicht-ok { background: #e8f0ea; color: var(--syb-success, #4a7c59); }
.evenwicht-fout { background: #f6e7e7; color: var(--syb-danger, #a04545); }
.evenwicht-open { background: #f7efe2; color: var(--syb-warning, #c0833a); }

/* --- Upload-sleepvak (saldibalans/XAF, jaarrekening-workflow stap 1) --- */
.upload-dropzone {
  display: block;
  margin-top: 16px;
  padding: 28px 24px;
  border: 1.5px dashed var(--taupe-light);
  border-radius: 6px;
  background: var(--lichtgrijs);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.upload-dropzone strong {
  display: block;
  color: var(--antraciet);
  font-weight: 600;
  margin-bottom: 4px;
}
.upload-dropzone span {
  color: var(--steengrijs);
  font-size: 13px;
}
.upload-dropzone input[type="file"] {
  /* Visueel verborgen, wel bereikbaar via het label (toetsenbord). */
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.upload-dropzone:hover,
.upload-dropzone:focus-within,
.upload-dropzone.is-dragover {
  border-color: var(--accent);
  background: var(--wit);
}