/* ── Canoniek designsysteem (gedeeld met Liquiditeitsbegroting) ────────
       Bron: design/vue-app/src/styles/app.css. Eén indigo-accent (--primary).
       De oude iOS-tokennamen blijven als alias bestaan (onderaan dit blok),
       zodat bestaande markup ongewijzigd blijft werken. */
    :root {
      --canvas: #eceef4; --surface: #ffffff; --surface-2: #f5f6fb; --surface-3: #eef0f7;
      --ink: #14161d; --ink-soft: #3c4150; --muted: #646b7a; --line: #e7e9f1; --line-strong: #d4d8e4;
      --primary: #5b5bd6; --on-primary: #ffffff;
      --primary-soft: color-mix(in srgb, var(--primary) 11%, var(--surface));
      --primary-strong: color-mix(in srgb, var(--primary) 82%, #000);
      --income-ink: #0f9d6b; --income-soft: #e7f6ef;
      --expense-ink: #e0364f; --expense-soft: #fdecef;
      --cash-ink: #2f6bd8; --amber: #9a5b00;
      --cat-1: #5b5bd6; --cat-2: #14b8a6; --cat-3: #e9a127; --cat-4: #ec5a72; --cat-5: #8b5cf6; --cat-6: #3aa0e8;
      --shadow-sm: 0 1px 2px rgba(18,20,40,.04), 0 2px 7px rgba(18,20,40,.05);
      --shadow-md: 0 6px 22px rgba(18,20,40,.09);
      --shadow-lg: 0 20px 54px rgba(18,20,40,.18);
      --r-lg: 16px; --r-md: 11px; --r-sm: 8px; --r-pill: 999px;
      --gap: 18px; --pad: 20px; --content-pad: 30px;

      /* ── Type-, spacing- & radius-schaal (design-taak 2, 2026-06-19) ──
         Bron: design/Design-Visuals.dc.html. Vervangt op termijn de ~15 ad-hoc
         lettergroottes; mapping in docs/design-tokens.md. Nog GEEN massale
         vervanging hier — dat is taak 4 (scherm voor scherm). Additief: zolang
         niets deze tokens gebruikt verandert er visueel niets. */
      --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-lg: 16px;
      --text-xl: 20px; --text-2xl: 26px; --text-3xl: 34px;
      --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
      color-scheme: light;

      /* ── Alias-laag: oude iOS-namen → canoniek (niets breken) ──
         DEPRECATION-SHIM (design-taak 3, 2026-06-19). Codemod heeft het gebruik
         van --accent(-soft) / --card(-2) / --panel(-2/-3) / --fg / --text in
         styles.css + js/** vervangen door de canonieke namen (--primary[-soft] /
         --surface[-2] / --ink). Die regels hebben nu 0 gebruik-hits en mogen in een
         latere opschoonronde verwijderd worden; ze blijven voorlopig staan als shim
         (defensief, mocht opgeslagen/externe markup ze nog noemen).
         De overige aliassen (--label*, --sep*, --fill*, --green*, --red*, --orange*,
         --indigo*, --shadow*, --bg, --sidebar, --ok) zijn nog actief in gebruik — een
         bredere sweep is een aparte vervolgtaak. De color-mix-aliassen (--label-3,
         --sep-2, --orange-soft, --indigo-soft, --amber-soft) hebben geen 1:1
         canonieke naam en blijven sowieso bestaan. */
      --bg: var(--canvas);
      --card: var(--surface);
      --card-2: var(--surface-2);
      --sidebar: var(--surface);
      --label: var(--ink);
      --label-2: var(--muted);
      --label-3: color-mix(in srgb, var(--muted) 62%, transparent);
      --sep: var(--line);
      --sep-2: color-mix(in srgb, var(--line) 60%, transparent);
      --fill: var(--surface-3);
      --fill-2: var(--surface-2);
      --accent: var(--primary);
      --accent-soft: var(--primary-soft);
      --green: var(--income-ink);     --green-soft: var(--income-soft);
      --red: var(--expense-ink);      --red-soft: var(--expense-soft);
      --orange: var(--amber);         --orange-soft: color-mix(in srgb, var(--amber) 16%, var(--surface));
      --indigo: var(--cat-5);         --indigo-soft: color-mix(in srgb, var(--cat-5) 16%, var(--surface));
      --shadow: var(--shadow-md);     --shadow-pop: var(--shadow-lg);
      --radius-card: var(--r-lg);     --radius-control: var(--r-md);

      /* legacy-namen uit de oudere app */
      --panel: var(--surface); --panel-2: var(--surface-2); --panel-3: var(--surface-2);
      --text: var(--ink); --fg: var(--ink);
      --amber-soft: color-mix(in srgb, var(--amber) 16%, var(--surface));
      --ok: var(--income-ink);

      font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    html[data-theme="dark"] {
      --canvas: #0b0d13; --surface: #161922; --surface-2: #11141c; --surface-3: #1d212c;
      --ink: #eef1f7; --ink-soft: #c4cad7; --muted: #8a91a3; --line: #242a36; --line-strong: #333a49;
      --on-primary: #ffffff;
      --primary-soft: color-mix(in srgb, var(--primary) 22%, var(--surface));
      --primary-strong: color-mix(in srgb, var(--primary) 70%, #fff);
      --income-ink: #34d399; --income-soft: #0f2a22;
      --expense-ink: #fb6f86; --expense-soft: #33161d;
      --cash-ink: #6aa3f5; --amber: #f0a83a;
      --cat-1: #7d7df0; --cat-2: #2dd4bf; --cat-3: #f0b54a; --cat-4: #f56e85; --cat-5: #a78bfa; --cat-6: #5bb4f5;
      --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 8px 26px rgba(0,0,0,.5); --shadow-lg: 0 24px 60px rgba(0,0,0,.6);
      color-scheme: dark;
    }

    * { box-sizing: border-box; }
    /* Herstel: het HTML `hidden`-attribuut wordt overreden door expliciete display-regels (bv. .month-stepper { display:flex }).
       Deze reset zorgt dat hidden altijd prevaleert, zodat updateTopbar() de maandfilter correct verbergt. */
    [hidden] { display: none !important; }

    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-thumb {
      background: var(--fill);
      border-radius: 8px;
      border: 2px solid transparent;
      background-clip: content-box;
    }
    @keyframes pop { from { opacity: 0; transform: scale(.96) translateY(4px); } to { opacity: 1; transform: none; } }
    @keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      letter-spacing: 0;
      font-size: 15px;
      line-height: 1.45;
    }

    button,
    input,
    select,
    textarea {
      font: inherit;
      font-family: inherit;
    }

    /* FB5b-9 (2026-06-18): knop-uniformiteit qua KLEUR. De neutrale knop kreeg dezelfde grijze vulling +
       sterkere rand als .mini (was: witte --card-vulling), zodat full-size secundaire acties (bv. "Kopieer
       naar volgende maand", "Bulk-PDF → werkmap", dialoog-annuleren) dezelfde kleur hebben als de inline
       .mini-acties. Eén neutrale kleur app-breed; .primary = indigo, .danger = rood. Alleen de grootte
       verschilt nog tussen full-size en .mini. Context-knoppen (.nav-item/.seg/.month-stepper/.data-menu/
       .icon-btn/.ghost) overschrijven hun eigen achtergrond en blijven ongemoeid. */
    button {
      border: 1px solid var(--line-strong);
      background: var(--fill-2);
      color: var(--ink);
      min-height: 36px;
      padding: 0 13px;
      border-radius: var(--radius-control);
      cursor: pointer;
      font-size: 13.5px;
      font-weight: 600;
      transition: background .12s, border-color .12s, opacity .12s;
    }

    button:hover { background: var(--fill); border-color: var(--line-strong); }

    button.primary {
      background: var(--primary);
      border-color: transparent;
      color: var(--on-primary, #fff);
      box-shadow: 0 4px 14px var(--primary-soft);
    }
    /* App-brede toetsenbord-focus: alleen bij Tab-navigatie, niet bij muisklik. */
    a:focus-visible,
    button:focus-visible,
    select:focus-visible,
    [data-action]:focus-visible,
    [tabindex]:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
      border-radius: 6px;
    }
    button.primary:hover { background: var(--primary); opacity: .92; }

    button.ghost {
      border-color: transparent;
      background: transparent;
    }
    button.ghost:hover { background: var(--fill-2); }

    button.danger {
      color: var(--red);
      border-color: transparent;
      background: var(--red-soft);
    }
    button.danger:hover { background: var(--red-soft); opacity: .85; }

    input,
    select,
    textarea {
      width: 100%;
      min-height: 36px;
      border: 1px solid var(--sep);
      background: var(--surface);
      color: var(--ink);
      border-radius: var(--radius-control);
      padding: 8px 11px;
    }
    input:focus,
    select:focus,
    textarea:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px var(--primary-soft);
    }

    /* Vinkjes/radio's vallen buiten de generieke veld-styling hierboven (anders rekt een
       checkbox uit tot een volledig 100%-breed tekstveld — bv. de Branded app-opt-in). */
    input[type="checkbox"],
    input[type="radio"] {
      width: auto;
      min-height: 0;
      padding: 0;
      margin: 0;
      accent-color: var(--primary);
      cursor: pointer;
    }

    textarea {
      min-height: 68px;
      resize: vertical;
    }

    /* N14: persoonsvelden (naam/afkorting/e-mail) zijn inline bewerkbaar; geef ze een
       zichtbare affordance zodat duidelijk is dat je erin kunt typen (hover + focus). */
    .person-field {
      border: 1px solid transparent;
      background: transparent;
      border-radius: 7px;
      padding: 3px 7px;
      margin-left: -7px;
      min-height: 0;
      cursor: text;
      transition: background .15s, border-color .15s;
    }
    .person-field:hover { background: var(--fill); border-color: var(--sep-2); }
    .person-field:focus { background: var(--surface); border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); outline: none; }

    label {
      display: grid;
      gap: 6px;
      color: var(--label-2);
      font-size: 12.5px;
      font-weight: 600;
    }

    /* Bedragen: tabulaire cijfers + niet afbreken (overal toepasbaar) */
    .num, td.number, th.number, .summary-cell strong, .stat strong {
      font-family: "IBM Plex Mono", ui-monospace, monospace;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.01em;
      white-space: nowrap;
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    th,
    td {
      border-bottom: 1px solid var(--sep-2);
      padding: 10px 12px;
      vertical-align: middle;
      text-align: left;
    }
    tbody tr:last-child td { border-bottom: none; }

    th {
      color: var(--label-2);
      font-size: 12px;
      font-weight: 650;
      letter-spacing: 0.2px;
      background: var(--fill-2);
    }

    td.number,
    th.number {
      text-align: right;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }

    /* ── App-shell: iPad-zijbalk links + hoofdkolom rechts ─────────────── */
    .app-shell {
      height: 100vh;
      display: flex;
      overflow: hidden;
      background: var(--bg);
    }

    /* Zijbalk */
    .sidebar {
      width: 236px;
      flex: 0 0 236px;
      background: var(--sidebar);
      border-right: 1px solid var(--sep);
      display: flex;
      flex-direction: column;
      height: 100vh;
      overflow-y: auto;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 20px 18px 14px;
    }

    .brand-mark {
      width: 34px;
      height: 34px;
      flex: none;
      border-radius: 9px;
      background: #fff;
      display: grid;
      place-items: center;
      overflow: hidden;
      box-shadow: 0 4px 12px var(--primary-soft);
    }

    .brand-mark img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 2px;
      box-sizing: border-box;
    }

    .brand h1 {
      margin: 0;
      font-size: 16px;
      font-weight: 650;
      letter-spacing: -0.2px;
      line-height: 1.15;
    }

    .brand span {
      color: var(--label-2);
      font-size: 11.5px;
    }

    .side-group {
      padding: 0 12px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .side-group + .side-group { margin-top: 6px; }
    .side-sep { height: 1px; background: var(--sep); margin: 10px 18px; }
    .side-label {
      font-size: 11px;
      font-weight: 650;
      color: var(--label-2);
      text-transform: uppercase;
      letter-spacing: 0.4px;
      padding: 8px 11px 4px;
    }

    /* Hoofdkolom */
    .main {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      height: 100vh;
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 20;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 16px;
      padding: 16px 28px 14px;
      background: var(--bg);
      border-bottom: 1px solid var(--sep);
    }
    .topbar .crumb {
      font-size: 12.5px;
      font-weight: 600;
      color: var(--label-2);
      letter-spacing: 0.3px;
      text-transform: uppercase;
    }
    .topbar h1 {
      margin: 0;
      font-size: 28px;
      font-weight: 700;
      letter-spacing: -0.5px;
    }
    /* FB-08: titelblok als kolom zodat de datumfilter ONDER de titel staat (en niet full-width uitrekt). */
    .topbar > div:first-child {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
    }

    .top-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    /* FB-05: autosave-status in de header. */
    .save-status {
      font-size: 12px;
      font-weight: 600;
      padding: 3px 9px;
      border-radius: 7px;
      white-space: nowrap;
      transition: opacity .15s;
    }
    .save-status.saving { color: var(--label-2); background: var(--fill); }
    .save-status.saved  { color: var(--green, #28A745); background: color-mix(in srgb, var(--green, #28A745) 12%, transparent); }

    /* Identiteit rechtsboven — tekstblok (naam boven rol), gevolgd door de ronde profielfoto rechtsbuiten.
       Layout naar het Microsoft-topbar-voorbeeld: schone tekst (geen pill) + foto met presence-dot. */
    .top-identity {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      line-height: 1.25;
      white-space: nowrap;
      max-width: 220px;
    }
    .top-identity[hidden] { display: none; }
    .top-identity .ti-name {
      font-weight: 650;
      font-size: 13px;
      color: var(--label);
      max-width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .top-identity .ti-role { color: var(--label-2); font-size: 11.5px; }

    /* Ronde profielfoto rechtsbuiten met groen presence-bolletje (cut-out via topbar-achtergrond). */
    .top-avatar { position: relative; width: 34px; height: 34px; flex: 0 0 auto; }
    .top-avatar[hidden] { display: none; }
    .top-avatar .avatar { width: 34px; height: 34px; font-size: 12px; border-radius: 50%; }
    .top-avatar .presence {
      position: absolute;
      right: -1px;
      bottom: -1px;
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: var(--green);
      border: 2px solid var(--bg);
      box-sizing: border-box;
    }
    @media (max-width: 640px) {
      .top-identity { display: none; }
    }

    /* Maand-stepper (segmented) */
    .month-stepper {
      display: flex;
      align-items: center;
      background: var(--fill);
      border-radius: 9px;
      padding: 3px;
      gap: 2px;
    }
    /* Topbar-titel + kruimel verborgen: de zichtbare titel staat nu in de content-kop (#pageHead).
       De elementen blijven in de DOM (gevuld door updateTopbar) zodat de smoke-tests groen blijven. */
    #topCrumb, #topTitle { display: none; }
    /* Paginakop: titel + actie/filterbalk (terug · periode · actie). */
    /* Zelfde breedte/uitlijning als .page-pad zodat de balk netjes boven de content valt. */
    .page-head { max-width: 1200px; margin: 0 auto 16px; padding-inline: 28px; }
    .page-title { margin: 0 0 12px; font-size: 25px; font-weight: 760; letter-spacing: -.02em; color: var(--label); }
    .action-bar-back { display: flex; align-items: center; }
    .action-bar-back:not(:empty) { margin-right: 1px; padding-right: 11px; border-right: 1px solid var(--sep); }
    .action-bar-backbtn { white-space: nowrap; }
    /* Actie- & filterbalk: terug + periode links, primaire actie rechts. */
    .action-bar {
      display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
      padding: 10px 12px; margin: 0;
      background: var(--surface); border: 1px solid var(--sep);
      border-radius: 12px; box-shadow: var(--shadow-sm, 0 1px 2px rgba(18,20,40,.05));
    }
    .action-bar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
    /* Ronde 8 (2026-06-18): zoekbalk + Wis per pagina in de witte actiebalk (gevuld door updateTopbar).
       Vult de ruimte tussen periode en de primaire actie; leeg → verborgen zodat de gap niet meetelt. */
    .action-bar-search { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; min-width: 160px; }
    .action-bar-search:empty { display: none; }
    .action-bar-search .ios-search { flex: 1; min-width: 140px; }
    .action-bar .month-stepper { background: var(--surface); border: 1px solid var(--line-strong); }
    .action-bar-add { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
    .month-stepper button {
      border: none;
      background: transparent;
      color: var(--label);
      width: 30px;
      height: 30px;
      min-height: 30px;
      border-radius: 7px;
      padding: 0;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .month-stepper button:hover { background: var(--surface); }
    /* Aan de rand van de gevulde maanden: knop uitgeschakeld (je mag niet naar een lege maand bladeren). */
    .month-stepper button:disabled { opacity: .3; cursor: default; pointer-events: none; }
    .month-stepper .ms-label {
      min-width: 130px;
      text-align: center;
      font-size: 14px;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
    }

    .icon-btn {
      border: 1px solid var(--sep);
      background: var(--surface);
      color: var(--label);
      width: 36px;
      height: 36px;
      min-height: 36px;
      padding: 0;
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: var(--shadow);
    }
    .icon-btn:hover { background: var(--fill-2); }

    .content {
      flex: 1;
      min-height: 0;
      overflow: auto;
      min-width: 0;
    }

    /* Sidebar-nav items */
    .nav-row {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .nav-item {
      position: relative;
      display: flex;
      align-items: center;
      gap: 11px;
      border: none;
      background: transparent;
      color: var(--label);
      cursor: pointer;
      padding: 9px 11px;
      border-radius: 9px;
      font-size: 14.5px;
      font-weight: 550;
      text-align: left;
      width: 100%;
      min-height: 0;
    }
    .nav-item:hover { background: var(--fill-2); }
    .nav-item.active {
      background: var(--primary-soft);
      color: var(--primary);
      font-weight: 650;
    }
    .nav-item svg { flex: 0 0 auto; }
    /* Rood bolletje met aantal openstaande concepten op het Facturen-menu-item (zie openConceptCount). De
       badge wordt rechts in de rij gedrukt; in de smalle (icon-only) zijbalk verankert hij rechtsboven het icoon. */
    .nav-badge {
      margin-left: auto; flex: none; min-width: 18px; height: 18px; padding: 0 5px;
      border-radius: 9px; background: var(--red, #ef4444); color: #fff;
      font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
    }

    /* Account-kaart onderaan zijbalk */
    /* ── Sync-status — Punt 14: vast linksonder in beeld, subtiel (los van de zijbalk) ── */
    #syncBar {
      position: fixed;
      left: 12px;
      bottom: 12px;
      z-index: 80;
      width: auto;
      max-width: 260px;
      padding: 0;
    }
    .sync-bar {
      background: color-mix(in srgb, var(--surface) 88%, transparent);
      backdrop-filter: blur(6px);
      border: 1px solid var(--sep);
      border-radius: 11px;
      padding: 9px 11px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 12px;
      box-shadow: var(--shadow);
    }
    /* Compacte, subtiele pill voor de normale "Verbonden"-status (één regel). */
    .sync-bar.sync-bar--mini {
      flex-direction: row;
      align-items: center;
      gap: 8px;
      padding: 5px 10px;
      border-radius: 999px;
      opacity: 0.72;
      transition: opacity 0.15s ease;
    }
    .sync-bar.sync-bar--mini:hover { opacity: 1; }
    .sync-bar--mini .sync-mini-text { color: var(--label-2); font-weight: 600; }
    .sync-bar--mini .sync-mini-sync {
      width: auto; min-height: 0; padding: 1px 6px; font-size: 12px;
      border-radius: 7px; background: transparent; border: none; color: var(--label-2);
      cursor: pointer;
    }
    .sync-bar--mini .sync-mini-sync:hover { background: var(--fill); color: var(--label); }
    .sync-bar-row {
      display: flex;
      align-items: center;
      gap: 7px;
      color: var(--label-2);
    }
    .sync-bar-dot {
      width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
      background: var(--label-3);
    }
    .sync-bar-dot.ready  { background: var(--green); }
    .sync-bar-dot.needs  { background: var(--orange); animation: sync-pulse 1.4s ease-in-out infinite; }
    .sync-bar-dot.error  { background: var(--red, #ef4444); }
    @keyframes sync-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
    .sync-bar button {
      width: 100%; font-size: 12px; padding: 5px 10px; min-height: 0;
      border-radius: 8px;
    }
    .sync-bar button.primary { font-weight: 600; }

    .account-card {
      padding: 14px;
    }
    .account-card .ac-inner {
      background: var(--surface);
      border: 1px solid var(--sep);
      border-radius: 13px;
      padding: 11px 12px;
      display: flex;
      flex-direction: column;
      gap: 9px;
      box-shadow: var(--shadow);
    }
    .avatar {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: var(--primary-soft);
      color: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 650;
      font-size: 12px;
      flex: 0 0 auto;
    }
    /* Entra-profielfoto in een avatar: vult de cirkel, verbergt de initialen. Geen foto/consent → geen
       has-photo en dus blijft de initialen-avatar gewoon staan (fail-safe). */
    .avatar.has-photo {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      color: transparent;
    }

    .panel {
      background: var(--surface);
      border: 1px solid var(--sep);
      border-radius: var(--radius-card);
      box-shadow: var(--shadow);
    }

    .month-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    /* #stats: oude altijd-zichtbare KPI-balk — in het redesign zit dit in
       het Overzicht-dashboard; element blijft bestaan maar wordt verborgen. */
    #stats { display: none; }

    .stat {
      background: var(--surface);
      border: 1px solid var(--sep);
      border-radius: var(--radius-card);
      padding: 16px 17px;
      box-shadow: var(--shadow);
    }

    .stat small {
      color: var(--label-2);
      display: block;
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 8px;
    }

    .stat strong {
      display: block;
      font-size: 23px;
      font-weight: 700;
      letter-spacing: -0.7px;
      line-height: 1.1;
    }

    /* Klanten master-detail */
    .workspace {
      display: flex;
      height: 100%;
      min-height: 0;
    }
    /* N19: het `hidden`-attribuut (UA: display:none) verliest het van `.workspace{display:flex}`.
       Met een hogere-specificiteit-regel verbergt hidden de workspace écht op management-views,
       anders lekt de Klanten-master-detail onder korte beheerpagina's door. */
    .workspace[hidden] { display: none; }
    .cust-list-col {
      width: 300px;
      flex: 0 0 300px;
      border-right: 1px solid var(--sep);
      display: flex;
      flex-direction: column;
      background: var(--bg);
      overflow: hidden;
    }
    .cust-editor-col {
      flex: 1;
      min-width: 0;
      overflow: auto;
    }
    .workspace.invoice-only .cust-list-col { display: none !important; }
    .cust-editor-inner {
      max-width: 1100px;
      padding: 20px 24px 50px;
    }
    /* v0.254.0: in de factuurdetail (invoice-only) lijnt de paneelinhoud uit met de gedeelde paginakop
       (#pageHead → .page-head): zelfde max-breedte, centrering en horizontale padding, zodat de inhoud netjes
       links onder de balk met de terugknop begint i.p.v. iets naar links te schuiven. */
    .workspace.invoice-only .cust-editor-inner {
      max-width: 1200px;
      margin-inline: auto;
      padding-left: 28px;
      padding-right: 28px;
    }

    /* Management-pagina's content-padding — B8: gecentreerd op brede schermen */
    .page-pad {
      padding: 24px 28px 44px;
      max-width: 1200px;
      width: 100%;
      margin-inline: auto;
      box-sizing: border-box;
    }

    .panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 0 0 16px;
    }

    .panel-header h2 {
      margin: 0;
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.4px;
    }
    /* v0.252.0: factuurdetail-titel = de paginatitel (klant · periode) in de gedeelde kop. Het periode-deel
       lichter/dunner, zodat de klantnaam de nadruk houdt. Eén kop, gelijk aan de andere schermen. */
    .page-title-sub {
      font-weight: 400;
      color: var(--label-2);
      letter-spacing: 0;
    }
    .section-title {
      margin: 0;
      font-size: 16px;
      font-weight: 650;
      letter-spacing: -0.2px;
      line-height: 1.25;
    }

    .panel-body {
      display: grid;
      gap: 16px;
    }

    .search-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      min-height: 22px;
      border-radius: 999px;
      padding: 2px 9px;
      font-size: 11.5px;
      font-weight: 700;
      white-space: nowrap;
    }

    .badge.done {
      background: var(--green-soft);
      color: var(--green);
    }

    .badge.draft {
      background: var(--orange-soft);
      color: var(--orange);
    }

    .badge.admin {
      background: var(--primary-soft);
      color: var(--primary);
    }

    /* "Geen factuur"-status (Facturen-lijst): neutraal grijs, duidelijk anders dan concept/goedgekeurd. */
    .badge.neutral {
      background: var(--fill-2, rgba(120,120,128,.12));
      color: var(--label-2, #6b7280);
    }
    /* "Geen factuur"-regel in de maandtabel: gedempt maar klikbaar (opent de detail om de markering terug
       te zetten naar concept). */
    .no-invoice-row > td { color: var(--label-2, #6b7280); }
    .no-invoice-row.clickable { cursor: pointer; }
    .no-invoice-row.clickable:hover { background: var(--surface, rgba(120,120,128,.06)); }

    /* Delta-badge (canoniek): maand-op-maand-verandering op KPI's */
    .delta {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      padding: 2px 7px 2px 5px;
      border-radius: 999px;
      font-size: 11.5px;
      font-weight: 700;
      font-family: "IBM Plex Mono", ui-monospace, monospace;
    }
    .delta.good { color: var(--income-ink); background: var(--income-soft); }
    .delta.bad  { color: var(--expense-ink); background: var(--expense-soft); }

    .invoice-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 150px 160px;
      gap: 12px;
      align-items: end;
    }

    .invoice-title p {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
    }

    .panel-breadcrumb {
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 3px;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .panel-breadcrumb .bc-customer {
      font-weight: 600;
      color: var(--ink);
    }

    .summary-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
      gap: 11px;
    }

    .management-grid {
      display: grid;
      gap: 14px;
    }

    .role-checks {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
    }

    .role-checks label {
      display: inline-flex;
      align-items: center;
      grid-template-columns: auto 1fr;
      gap: 6px;
      min-height: 28px;
      font-size: 12px;
      color: var(--ink);
    }

    .role-checks input {
      width: auto;
      min-height: auto;
    }

    .audit-list {
      display: grid;
      gap: 8px;
      max-height: 260px;
      overflow: auto;
    }

    .audit-item {
      border: 1px solid var(--line);
      background: var(--surface-2);
      border-radius: 8px;
      padding: 9px 10px;
    }

    .audit-item strong {
      display: block;
      font-size: 12px;
      margin-bottom: 3px;
    }

    .audit-item span {
      color: var(--muted);
      font-size: 12px;
    }

    .summary-cell {
      border: 1px solid var(--sep);
      background: var(--surface);
      border-radius: 14px;
      padding: 13px 14px;
      box-shadow: var(--shadow);
    }

    .summary-cell small {
      display: block;
      color: var(--label-2);
      font-size: 12px;
      font-weight: 600;
      margin-bottom: 5px;
    }

    .summary-cell strong {
      font-size: 18px;
      font-weight: 700;
    }

    .summary-cell.total {
      background: linear-gradient(150deg, var(--primary), var(--indigo));
      border-color: transparent;
      box-shadow: 0 6px 20px var(--primary-soft);
    }
    .summary-cell.total small { color: rgba(255, 255, 255, 0.85); }
    .summary-cell.total strong { color: #fff; }

    /* FB4-13: kolomkoppen boven de afrekenrijen van de Totaalberekening. */
    .license-breakdown thead th {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--label-3, var(--muted));
      border-bottom: 1px solid var(--sep);
      padding-bottom: 4px;
    }

    /* FB5-5/8 (2026-06-18): elk blok onder de Totaalberekening ook als eigen REGEL in de afrekenlijst,
       met een dunne neutrale accentrand links — subtiel onderscheid tussen de blokken. De rand komt op
       de eerste cel (label) van de rij; een lichte bovenrand scheidt de blok-subtotalen optisch van de
       licentie-afrekening erboven. (Categoriekleuren bewust verwijderd — neutrale weergave.) */
    .license-breakdown tr.bd-block th:first-child,
    .license-breakdown tr.bd-block td:first-child {
      border-left: 3px solid var(--line-strong);
      padding-left: 9px;
    }
    .license-breakdown tr.bd-block:first-of-type > * { border-top: 1px solid var(--sep); padding-top: 8px; }

    /* Feedbackronde 6 (2026-06-18): ook het licentie-afrekenblok (de rijen vóór de blok-subtotalen)
       krijgt een neutrale accentrand links, zodat het hele blok met licentieregels — net als de blokken
       eronder — een lijntje links heeft. (Categoriekleuren bewust verwijderd — neutrale weergave.) */
    .license-breakdown tbody tr th:first-child,
    .license-breakdown tbody tr td:first-child {
      border-left: 3px solid var(--line-strong);
      padding-left: 9px;
    }

    /* Feedbackronde 6 (2026-06-18): elke factuur-accordeon sluit af met dezelfde grijze subtotaalbalk —
       label links, bedrag rechts uitgelijnd — zodat alle uitklaps (licenties, groei/dossiers, support,
       branded app, peppol, overige) er hetzelfde uitzien. */
    .acc-subtotal {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      background: var(--fill-2);
      border: 1px solid var(--sep);
      border-radius: 10px;
      padding: 10px 14px;
      margin-top: 2px;
    }
    .acc-subtotal-label { font-size: 13px; font-weight: 600; color: var(--label-2); }
    .acc-subtotal-label small { font-weight: 400; }
    .acc-subtotal-amount {
      margin-left: auto;
      font-size: 15px;
      font-weight: 700;
      color: var(--label);
      text-align: right;
      white-space: nowrap;
    }

    /* FB (2026-06-23): gedempte notitieregel onder de subtotaalbalken van een accordeon (bv. "Netto per
       licentie" in het Licenties-blok). Lichter dan .acc-subtotal: geen achtergrond/rand, kleiner, muted. */
    .acc-note {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 6px 14px 2px;
      font-size: 12px;
      font-style: italic;
      color: var(--label-2);
    }
    .acc-note .num { font-style: normal; white-space: nowrap; }

    /* Feedbackronde 6 (2026-06-18): het startsaldo supporturen is geen invoer meer maar een grijze,
       read-only regel (het eindsaldo van de vorige maand). Ronde 8 (2026-06-18): alleen het LABEL (linker
       cel) grijs; de rechter (waarde)cel blijft wit, gelijk aan de cellen eronder. */
    .support-start-row th {
      background: var(--fill-2);
      color: var(--label-2);
    }

    /* FB5-10 (2026-06-18): een goedgekeurde factuur is alleen-lezen tot hij teruggezet wordt naar concept.
       De data-secties worden licht gedimd en de invoervelden uitgeschakeld (zie invoiceDetail.render). */
    .invoice-body.is-approved-locked { opacity: .96; }
    .invoice-body.is-approved-locked input:disabled,
    .invoice-body.is-approved-locked textarea:disabled,
    .invoice-body.is-approved-locked select:disabled { background: var(--fill-2); cursor: not-allowed; }
    /* Een goedgekeurde factuur is alleen-lezen — de bewerk-knoppen (Wis/Toevoegen/Plakken/opmaak)
       worden al uitgeschakeld (disabled) door de lock-lus in invoiceDetail.render, maar bleven zichtbaar als
       (schijnbaar) actieve knop. Een uitgeschakelde knop heeft hier geen functie, dus we verbergen hem helemaal.
       De bedienknoppen (Terug naar concept e.d.) staan buiten .invoice-body en blijven dus staan. */
    .invoice-body.is-approved-locked button:disabled { display: none; }
    /* v0.255.0: gekleurde statusregel bovenin de factuur-body. Basis + twee varianten: groen (goedgekeurd/
       alleen-lezen) en oranje (concept). Vervangt de losse status-chip + "✓ Goedgekeurd"-tekst. */
    .status-note {
      display: flex; align-items: center; gap: 8px;
      color: var(--label-2);
      border: 1px solid var(--sep); border-radius: 10px;
      padding: 8px 12px; font-size: 12.5px; margin-bottom: 12px;
    }
    .status-note.approved-lock-note { background: var(--green-soft, rgba(34,197,94,.12)); }
    .status-note.concept-note {
      background: var(--orange-soft, rgba(245,158,11,.12));
      border-color: color-mix(in srgb, var(--orange) 40%, transparent);
    }
    /* Factuur-diff t.o.v. de vorige factuur (read-only). Kleur volgt de richting van het verschil:
       hoger = oranje (let op), lager = blauw, ongewijzigd = groen. */
    .status-note.change-diff-note { background: var(--fill-2, rgba(120,120,128,.08)); }
    .status-note.change-diff-note.diff-up   { background: var(--orange-soft, rgba(245,158,11,.12)); border-color: color-mix(in srgb, var(--orange) 40%, transparent); }
    .status-note.change-diff-note.diff-down { background: rgba(59,130,246,.12); border-color: color-mix(in srgb, #3b82f6 40%, transparent); }
    .status-note.change-diff-note.diff-same { background: var(--green-soft, rgba(34,197,94,.12)); }
    .status-note.change-diff-note .num { font-variant-numeric: tabular-nums; }
    /* Punt 3 (2026-06-23): op de klantkaart is de status-balk een DIRECTE .section > div, waardoor de
       grid-regel (.section > div { display:grid }) .status-note { display:flex } overschreef → het icoon en de
       tekst kwamen op aparte grid-rijen (de balk was "2 regels hoog"). Hogere specificiteit forceert hier flex,
       zodat icoon + tekst op één regel staan (op de factuur zit de balk in .invoice-body en speelde dit niet). */
    .section > div.status-note { display: flex; align-items: center; gap: 8px; }
    /* v0.259.0: goedgekeurde jaarinstellingen op de klantkaart zijn alleen-lezen — zelfde behandeling als een
       goedgekeurde factuur-body. De invoervelden worden uitgeschakeld (zie applyApprovedSettingsLock) en de
       ↺-reset-knopjes (button.mini) hebben dan geen functie meer → verbergen. */
    .settings-body.is-approved-locked { opacity: .96; }
    .settings-body.is-approved-locked input:disabled,
    .settings-body.is-approved-locked textarea:disabled,
    .settings-body.is-approved-locked select:disabled { background: var(--fill-2); cursor: not-allowed; }
    .settings-body.is-approved-locked button.mini:disabled { display: none; }
    /* De bewerk-balk boven het blok (Goedkeuren / Terug naar concept) staat los van de velden. */
    /* Punt 4 (2026-06-23): de balk is een directe .section > div, dus de grid-regel (.section > div) won
       anders van .inline-actions.start. Forceer hier links uitlijnen zodat Goedkeuren/Terug links staan. */
    .section > div.settings-approval-bar { display: flex; justify-content: flex-start; margin-bottom: 10px; }
    .settings-approval-bar { margin-bottom: 10px; }
    /* Punt 3 (2026-06-23): klantkaart — jaar-accordeon: houd de jaar-titel + status-chip (Concept/Goedgekeurd)
       op één regel. Op een smaller venster kon de kop over twee regels uitwaaieren (de chip leek dan "twee
       regels hoog"). De titel kort nu af i.p.v. door te lopen; de chips blijven naast elkaar op één regel. */
    .section > header[data-action="toggleCustomerDetailYear"] { flex-wrap: nowrap; }
    .section > header[data-action="toggleCustomerDetailYear"] .section-title {
      min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .section > header[data-action="toggleCustomerDetailYear"] .tag-row { flex: 0 0 auto; flex-wrap: nowrap; }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(130px, 1fr));
      gap: 12px;
      align-items: end; /* FB-11: inputs onderaan uitlijnen ook als een labeltekst over 2 regels wrapt */
    }
    /* FB-11: elk veld als kolom met de invoer onderaan, zodat over kolommen heen alles netjes uitlijnt. */
    .form-grid > label {
      display: flex;
      flex-direction: column;
      gap: 4px;
      height: 100%;
    }
    .form-grid > label > .field-input { margin-top: auto; }
    /* Veldnaam + ⓘ + standaard/afwijkend-vlag op ÉÉN regel (niet elk op een eigen flex-rij). */
    .field-head {
      display: inline-flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 0 2px;
      line-height: 1.3;
    }

    .field-input {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .field-input input,
    .field-input select {
      flex: 1 1 auto;
      min-width: 0;
    }
    .field-input input:focus,
    .field-input select:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px var(--primary-soft);
      outline: none;
    }
    .field-input input[type="checkbox"] { accent-color: var(--primary); }
    .field-input input[type="number"] { font-variant-numeric: tabular-nums; }
    /* AL-2/AL-3 (2026-06-18): generieke terugknop-balk, op elke beheerpagina links-boven. */
    .page-back { margin: 0 0 10px; }
    /* Hybride maandafsluiting (Facturen-lijst): afgeleide voortgang + expliciete bevestiging. */
    .month-close {
      display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
      padding: 12px 14px; border: 1px solid var(--sep); border-radius: 10px;
      background: var(--fill-2, var(--fill)); margin-bottom: 4px;
    }
    .month-close.ready { border-color: var(--primary); }
    .month-close.done { border-color: var(--green, #16a34a); background: var(--green-soft, rgba(22,163,74,.08)); }
    .month-close-info { display: flex; flex-direction: column; gap: 3px; flex: 1 1 220px; min-width: 0; }
    .month-close-info .muted { font-size: 12px; }
    .month-close-info > strong { font-size: 13.5px; }
    .month-close .month-close-bar {
      height: 6px; border-radius: 999px; background: var(--fill); overflow: hidden; margin-top: 4px; max-width: 320px;
    }
    .month-close .month-close-bar > span { display: block; height: 100%; background: var(--primary); border-radius: 999px; transition: width .2s; }
    .month-close > button { flex: 0 0 auto; margin-left: auto; }
    .month-close > button[disabled] { opacity: .5; cursor: not-allowed; }
    /* Punt 2: toelichting waarom de maand nog niet afgesloten kan worden. */
    .month-close-hint { font-size: 12px; color: var(--orange, #d97706); }
    /* Maandafsluiting-stepper (2026-06-19): ‹/› flankeren de banner van de huidige openstaande maand. */
    .month-close-slider { display: flex; align-items: stretch; gap: 8px; margin-bottom: 4px; }
    .month-close-slider > .month-close { flex: 1 1 auto; margin-bottom: 0; }
    .month-close-arrow {
      flex: 0 0 auto; align-self: center;
      width: 34px; height: 34px; padding: 0;
      font-size: 20px; line-height: 1; border-radius: 999px;
    }
    .month-close-arrow[disabled] { opacity: .35; cursor: default; }
    /* Carousel-puntjes onder de stepper: tonen hoeveel maanden er nog openstaan (alleen bij >1). */
    .month-close-dots { display: flex; justify-content: center; align-items: center; gap: 7px; margin: 6px 0 2px; }
    .month-close-dot {
      flex: 0 0 auto; box-sizing: border-box;
      width: 8px; height: 8px; min-width: 0; min-height: 0; padding: 0;
      border: none; border-radius: 999px; appearance: none;
      background: var(--line-strong, #d4d8e4); cursor: pointer;
      transition: transform .15s, background .15s;
    }
    .month-close-dot:hover { background: var(--label-3, #9aa0ad); }
    .month-close-dot.active { background: var(--primary); transform: scale(1.35); }
    /* KL-6 (2026-06-18): jaarinstellingen in twee omkaderde blokken (Licenties / Support). */
    .settings-block {
      border: 1px solid var(--sep);
      border-radius: 10px;
      padding: 12px 14px;
      margin-bottom: 12px;
      background: var(--bg-elevated, var(--surface, transparent));
    }
    .settings-block-head {
      display: flex; align-items: center; gap: 9px;
      font-weight: 680; font-size: 15px; letter-spacing: -.01em;
      color: var(--label); margin: 0 0 14px; padding-bottom: 12px;
      border-bottom: 1px solid var(--sep);
    }
    .settings-block-head::before {
      content: ""; flex: 0 0 auto;
      width: 4px; height: 15px; border-radius: 2px;
      background: var(--line-strong); /* neutraal — categoriekleuren bewust verwijderd */
    }
    /* FB6 (2026-06-18): support-velden twee per rij. */
    .settings-block .form-grid.cols-2 { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
    /* FB6 (2026-06-18): blok-waarschuwing (chip) — bv. support-inkoop hoger dan de max. voorraad. */
    .settings-block-warn {
      display: flex; align-items: flex-start; gap: 8px;
      margin: 0 0 12px; padding: 8px 10px;
      font-size: 12.5px; line-height: 1.4; color: var(--label-2);
      background: var(--orange-soft, rgba(245, 158, 11, .12));
      border: 1px solid var(--orange, #f59e0b); border-radius: 8px;
    }
    .settings-block-warn .warn-chip {
      flex: 0 0 auto;
      font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
      color: #fff; background: var(--orange, #f59e0b);
      padding: 2px 7px; border-radius: 999px;
    }
    /* KL-7: vinkjes binnen een veld consistent uitlijnen (niet scheef t.o.v. de invoervelden). */
    .field-checkboxes .field-input { min-height: 36px; }
    .cb-row { display: flex; align-items: center; gap: 8px; font-weight: 400; margin: 0; }
    .cb-row input[type="checkbox"] { flex: 0 0 auto; width: auto; min-height: 0; margin: 0; }
    /* TR-3 (2026-06-18): €-prefix vóór een bedrag-veld; display-only, telt niet als invoer. */
    .euro-prefix {
      flex: 0 0 auto;
      /* FB4-4: vaste breedte zodat een leeg prefix-vakje (veld zonder €) evenveel ruimte inneemt en de
         invoervelden mét en zónder €-teken netjes onder elkaar uitlijnen. */
      width: 12px;
      text-align: left;
      color: var(--label-3);
      font-size: 13px;
      user-select: none;
    }
    .field-flag {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: .04em;
      color: var(--muted);
      font-weight: 600;
      margin-left: 4px;
    }
    /* FB-punt 6: "Afwijkend" als duidelijk zichtbare badge op een EIGEN regel, direct boven het
       invoerveld (binnen .field-head, dus tussen het label en de input). flex-basis:100% forceert de
       regelafbreking in de inline-flex .field-head. */
    .field-flag.dev {
      flex-basis: 100%;
      display: flex;
      align-items: center;
      gap: 7px;
      width: auto;
      margin: 6px 0 0 0;
      padding: 0;
      border-radius: 0;
      background: none;
    }
    .field-flag.dev > strong {
      font-size: 9.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .05em;
      color: var(--amber);
      background: color-mix(in srgb, var(--amber) 16%, transparent);
      border-radius: 999px;
      padding: 2px 8px;
    }
    .field-flag-std {
      font-size: 11.5px;
      font-weight: 500;
      text-transform: none;
      letter-spacing: 0;
      color: var(--muted);
    }
    /* Item 17: ⓘ-toelichting bij velden (pop-up via native title). */
    .help-tip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 15px;
      height: 15px;
      margin-left: 5px;
      font-size: 11px;
      line-height: 1;
      color: var(--label-2);
      cursor: help;
      opacity: .7;
      transition: opacity .12s, color .12s;
      vertical-align: middle;
    }
    .help-tip:hover,
    .help-tip:focus {
      opacity: 1;
      color: var(--primary);
      outline: none;
    }
    .mini.ghost {
      background: transparent;
      border: 1px solid var(--line-strong);
      color: var(--muted);
      flex: 0 0 auto;
    }

    .source-list {
      display: grid;
      gap: 6px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 10px;
      background: var(--surface-2);
    }
    .source-row {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      padding: 4px 2px;
    }
    .source-row .source-period {
      min-width: 130px;
      font-weight: 600;
    }

    .two-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .section {
      border: 1px solid var(--sep);
      border-radius: var(--radius-card);
      overflow: hidden;
      background: var(--surface);
      box-shadow: var(--shadow);
    }

    .section > header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      border-bottom: 1px solid var(--sep);
      background: var(--surface);
    }

    .section > div {
      padding: 14px 16px;
      display: grid;
      gap: 12px;
    }

    /* Accordion: kop met chevron; inklapbaar via .collapsed */
    .section > header.acc-head {
      cursor: pointer;
      user-select: none;
    }
    .acc-head .acc-chevron {
      transition: transform .18s ease;
      color: var(--label-3);
      flex: 0 0 auto;
      margin-left: auto;
    }
    .section.collapsed > header { border-bottom: none; }
    .section.collapsed > div,
    .section.collapsed > .details-body { display: none; }
    .section.collapsed .acc-chevron { transform: rotate(-90deg); }
    .acc-head .acc-title-wrap {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .inline-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
    }

    .mini {
      min-height: 30px;
      padding: 0 11px;
      font-size: 12px;
      /* UI-1 (2026-06-18): grijze vulling + sterkere rand zodat de actieknoppen niet "wit op wit" wegvallen
         op de witte kaarten. De .primary/.danger/.ghost-varianten overschrijven achtergrond/rand hieronder. */
      background: var(--fill-2);
      border-color: var(--line-strong);
    }
    .mini:hover { background: var(--fill); border-color: var(--line-strong); }

    .muted {
      color: var(--muted);
    }

    .empty {
      color: var(--label-3);
      padding: 22px;
      text-align: center;
      border: 1px dashed var(--sep);
      border-radius: 12px;
      background: var(--fill-2);
      font-size: 14px;
    }

    /* B7 — Staten: skeleton-loader, inline fout, read-only-indicator */
    /* Laden (skeleton): shimmer-animatie op lege inhoud-blokken */
    @keyframes skeleton-shimmer {
      0%   { background-position: -200% center; }
      100% { background-position:  200% center; }
    }
    .skeleton {
      border-radius: 6px;
      background: linear-gradient(90deg, var(--fill) 25%, var(--fill-2) 50%, var(--fill) 75%);
      background-size: 200% 100%;
      animation: skeleton-shimmer 1.4s ease infinite;
      color: transparent !important;
      user-select: none;
    }
    .skeleton-line { height: 14px; width: 60%; border-radius: 6px; }
    .skeleton-line.wide { width: 90%; }
    .skeleton-line.short { width: 35%; }

    /* Fout (inline hint): rood tekst onder een veld */
    .field-error {
      color: var(--red, #ef4444);
      font-size: 12px;
      margin-top: 4px;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    /* Read-only indicator: gedempt badge naast een sectiontitel */
    .badge-readonly {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      font-weight: 600;
      color: var(--label-3);
      background: var(--fill-2);
      border: 1px solid var(--sep);
      border-radius: 6px;
      padding: 2px 8px;
      vertical-align: middle;
      margin-left: 8px;
    }

    /* Niet-bewerkbare velden zien er in de HELE app uit als 'niet editable': rol-/berekening-vergrendelde
       velden (readonly/disabled) én alle datavelden wanneer de app alleen-lezen is (.is-locked, gezet door
       applyReadonlyLock). Gedempte vulling + gedempte tekst + 'not-allowed'-cursor. !important overrulet
       eventuele inline-styles op losse velden. */
    input[readonly], textarea[readonly],
    input:disabled, select:disabled, textarea:disabled,
    input.is-locked, select.is-locked, textarea.is-locked {
      background-color: var(--fill-2) !important;
      color: var(--label-3) !important;
      -webkit-text-fill-color: var(--label-3); /* Safari rendert disabled-tekst anders onleesbaar */
      cursor: not-allowed !important;
      border-color: var(--sep) !important;
      box-shadow: none !important;
      opacity: 1;
    }
    /* Inline-bewerkbare tekst (editableText/uiText) die vergrendeld is: bewerk-pen verbergen + niet klikbaar. */
    .editable-field.is-locked { pointer-events: none; cursor: default; }
    .editable-field.is-locked .edit-trigger { display: none; }
    /* Vrije-tekst-editor (factuur) in alleen-lezen. */
    .free-text-editor[contenteditable="false"] {
      background-color: var(--fill-2);
      color: var(--label-3);
      cursor: not-allowed;
    }

    /* ── Nieuwe iOS-componenten ─────────────────────────────────────────── */
    /* Segmented control */
    .seg {
      display: inline-flex;
      background: var(--fill);
      border-radius: 9px;
      padding: 3px;
      gap: 2px;
    }
    .seg button {
      border: none;
      background: transparent;
      color: var(--label);
      min-height: 30px;
      padding: 0 14px;
      border-radius: 7px;
      font-size: 13.5px;
      font-weight: 600;
    }
    .seg button:hover { background: transparent; }
    .seg button.on {
      background: var(--surface);
      color: var(--label);
      box-shadow: var(--shadow-sm);
    }
    .seg.accent button.on { color: var(--primary); }

    /* ── Detail-drawer (canoniek): rechter paneel voor toevoegen/bewerken ──
       Werkt op een draft-kopie in state; sluiten via knop of achtergrondklik
       verwerpt niet-opgeslagen wijzigingen (gedrag in de actie-laag). */
    @keyframes slidein { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
    .drawer-backdrop {
      position: fixed; inset: 0; z-index: 90;
      background: rgba(12, 14, 22, .42);
      display: flex; justify-content: flex-end;
      animation: fade .18s ease;
    }
    .drawer {
      width: min(480px, 94vw); height: 100%;
      display: flex; flex-direction: column;
      background: var(--surface);
      border-left: 1px solid var(--line);
      box-shadow: var(--shadow-lg);
      animation: slidein .22s cubic-bezier(.4, 0, .2, 1);
    }
    .drawer-head {
      display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
      padding: 18px var(--pad);
      border-bottom: 1px solid var(--line);
    }
    .drawer-head h3 { font-size: 17px; margin: 0; }
    .drawer-head p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }
    .drawer-close {
      flex: 0 0 auto; min-height: 0; width: 30px; height: 30px; padding: 0;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 50%; font-size: 16px; line-height: 1;
    }
    .drawer-body { flex: 1; overflow-y: auto; padding: var(--pad); display: flex; flex-direction: column; gap: 18px; }
    .drawer-foot {
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      padding: 14px var(--pad);
      border-top: 1px solid var(--line);
      background: var(--surface-2);
    }
    .drawer-foot .right { display: flex; gap: 9px; }

    /* iOS-toggle */
    .ios-toggle {
      position: relative;
      display: inline-flex;
      align-items: center;
      width: 46px;
      height: 28px;
      flex: 0 0 auto;
    }
    .ios-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
    .ios-toggle .track {
      width: 46px; height: 28px; border-radius: 999px;
      background: var(--fill); transition: background .18s; pointer-events: none;
    }
    .ios-toggle .knob {
      position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
      border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm);
      transition: transform .18s; pointer-events: none;
    }
    .ios-toggle input:checked ~ .track { background: var(--primary); }
    .ios-toggle input:checked ~ .knob { transform: translateX(18px); }
    /* Schakelaar met tekstlabel (bv. "Mijn/Alle klanten" of "Mijn/Alle facturen") */
    .switch-field {
      display: inline-flex; align-items: center; gap: 9px;
      cursor: pointer; user-select: none;
    }
    .switch-field .switch-label {
      font-size: 13px; font-weight: 600; color: var(--label-2); white-space: nowrap;
    }
    /* KL-3: schakelaar met bijschrift dat beide opties benoemt (Mijn / Alle), actieve geaccentueerd. */
    .switch-field.has-options { flex-direction: column; align-items: flex-end; gap: 3px; }
    .switch-field .switch-options {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 11.5px; color: var(--label-3); white-space: nowrap;
    }
    .switch-field .switch-options .on { color: var(--label); font-weight: 700; }
    .switch-field .switch-options .sep { opacity: .5; }
    /* FB7 (2026-06-18): opt-in-toggles in de klantinstellingen — volle breedte, links uitgelijnd
       (toggle + label), de ↺-reset rechts. Vervangt de oude checkbox-velden in het raster. */
    .settings-block .settings-toggle {
      display: flex; width: 100%; gap: 10px; align-items: center;
      margin: 2px 0 12px; cursor: pointer;
    }
    .settings-block .settings-toggle .switch-label { white-space: normal; }
    .settings-block .settings-toggle > .mini { margin-left: auto; }

    /* Grouped rij-lijst (chevron-rijen) */
    .grouped {
      background: var(--surface);
      border: 1px solid var(--sep);
      border-radius: var(--radius-card);
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    .grouped-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 11px 16px;
      border-top: 1px solid var(--sep-2);
      cursor: pointer;
      text-align: left;
      width: 100%;
      background: transparent;
      border-left: none; border-right: none; border-bottom: none;
      color: var(--label);
      min-height: 0;
    }
    .grouped-row:first-child { border-top: none; }
    .grouped-row:hover { background: var(--fill-2); }

    /* KPI-kaart stip + accent-swatch */
    .kpi-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
    .am-chip { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:6px; font-size:11px; font-weight:650; margin-right:6px; vertical-align:middle; }
    .accent-swatch {
      width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
      border: 2px solid transparent; padding: 0; min-height: 0;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .accent-swatch.on { border-color: var(--label); }

    /* Data-popover (⋯-menu) */
    .menu-overlay { position: fixed; inset: 0; z-index: 40; }
    .data-menu {
      position: absolute; top: 60px; right: 28px; width: 244px;
      background: var(--surface); border: 1px solid var(--sep);
      border-radius: 14px; box-shadow: var(--shadow-pop);
      padding: 6px; animation: pop .14s ease; z-index: 41;
      max-height: calc(100vh - 76px); overflow-y: auto;
    }
    .data-menu .dm-label {
      font-size: 11px; font-weight: 650; color: var(--label-2);
      text-transform: uppercase; letter-spacing: 0.4px; padding: 8px 10px 4px;
    }
    .data-menu button {
      width: 100%; display: flex; align-items: center; gap: 10px;
      border: none; background: transparent; color: var(--label);
      padding: 9px 10px; border-radius: 9px; font-size: 14.5px;
      text-align: left; font-weight: 500; min-height: 0;
    }
    .data-menu button:hover { background: var(--fill-2); }
    .data-menu button.danger { color: var(--red); }
    .data-menu button.danger:hover { background: var(--red-soft); }
    .data-menu .dm-sep { height: 1px; background: var(--sep); margin: 6px 8px; }

    /* Meldingen-belletje + paneel */
    .bell-btn { position: relative; }
    .bell-btn.has-unread { color: var(--primary); }
    .bell-badge {
      position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px;
      padding: 0 4px; border-radius: 9px; background: var(--red, #ef4444); color: #fff;
      font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center;
      box-shadow: 0 0 0 2px var(--surface);
    }
    .notif-menu {
      position: absolute; top: 60px; right: 28px; width: 320px; max-height: 70vh; overflow: auto;
      background: var(--surface); border: 1px solid var(--sep);
      border-radius: 14px; box-shadow: var(--shadow-pop);
      padding: 6px; animation: pop .14s ease; z-index: 41;
    }
    .notif-head { padding: 8px 10px 6px; font-size: 14px; color: var(--label); }
    .notif-item { padding: 9px 10px; border-radius: 9px; display: flex; align-items: flex-start; gap: 8px; }
    .notif-item + .notif-item { border-top: 1px solid var(--sep); }
    .notif-item.unread { background: var(--fill-2); }
    .notif-body { flex: 1; min-width: 0; }
    .notif-text { font-size: 13.5px; color: var(--label); font-weight: 500; }
    .notif-meta { font-size: 11.5px; color: var(--label-3); margin-top: 2px; }
    .notif-del {
      flex: none; display: inline-flex; align-items: center; justify-content: center;
      width: 26px; height: 26px; padding: 0; border: none; border-radius: 7px;
      background: transparent; color: var(--label-3); cursor: pointer; transition: background .12s, color .12s;
    }
    .notif-del:hover { background: var(--red, #ef4444); color: #fff; }

    /* Toelichting-knop (ⓘ) bij de aantallen in Totalen → Voortgang */
    .tbl-info-btn {
      display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
      width: 18px; height: 18px; padding: 0; border: none; border-radius: 50%;
      background: transparent; color: var(--label-3); cursor: pointer; transition: background .12s, color .12s;
    }
    .tbl-info-btn:hover { background: var(--primary); color: #fff; }

    /* Totalen → Voortgang: aantallen op regel 1, statusmarkeringen (✓/ⓘ/geen-factuur) uitgelijnd op regel 2. */
    .prog-cell { white-space: nowrap; }
    .prog-cell .prog-frac { display: block; }
    .prog-cell .prog-meta { display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; margin-top: 3px; }
    .prog-cell .prog-meta .badge { padding: 1px 6px; font-size: 11px; }
    /* "Geen factuur"-badge: doorgestreepte cirkel + aantal. */
    .ni-badge {
      display: inline-flex; align-items: center; gap: 3px;
      padding: 1px 6px; border-radius: 999px;
      background: var(--fill-2, rgba(120,120,128,.12)); color: var(--label-2, #6b7280);
      font-size: 11px; font-weight: 700; line-height: 1;
    }
    .ni-badge svg { display: block; }
    .notif-empty { padding: 14px 10px; font-size: 13px; color: var(--label-3); text-align: center; }

    /* Maandkiezer */
    .month-stepper .ms-label { cursor: pointer; border-radius: 6px; transition: background .12s; }
    .month-stepper .ms-label:hover { background: var(--surface); }
    .month-picker-menu {
      position: fixed; top: 8px;
      left: 12px;
      width: 288px;
      background: var(--surface); border: 1px solid var(--sep);
      border-radius: 16px; box-shadow: var(--shadow-pop);
      padding: 10px; animation: pop .14s ease; z-index: 41;
    }
    .mp-year-nav {
      display: flex; align-items: center; justify-content: space-between;
      padding: 2px 2px 8px;
    }
    .mp-year-nav button {
      border: none; background: transparent; color: var(--label);
      width: 32px; height: 32px; min-height: 32px; border-radius: 8px;
      font-size: 17px; display: flex; align-items: center; justify-content: center;
      cursor: pointer;
    }
    .mp-year-nav button:hover { background: var(--fill); }
    .mp-year-label {
      font-size: 15px; font-weight: 700; color: var(--label);
      font-variant-numeric: tabular-nums;
    }
    .mp-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px;
    }
    .mp-cell {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 3px; padding: 8px 4px 7px; border-radius: 10px;
      cursor: pointer; border: none; background: transparent;
      color: var(--label); font-size: 13.5px; font-weight: 500;
      transition: background .1s;
    }
    .mp-cell:hover { background: var(--fill); }
    .mp-cell.mp-current {
      background: var(--primary); color: #fff; font-weight: 700;
    }
    .mp-cell.mp-current:hover { background: var(--primary); }
    .mp-dot {
      width: 5px; height: 5px; border-radius: 50%;
      background: var(--primary);
    }
    .mp-cell.mp-current .mp-dot { background: rgba(255,255,255,0.7); }

    .ios-search {
      display: flex; align-items: center; gap: 8px;
      background: var(--fill); border-radius: 10px; padding: 8px 11px;
    }
    .ios-search input {
      border: none; background: transparent; outline: none; box-shadow: none;
      color: var(--label); font-size: 14px; width: 100%; min-height: 0; padding: 0;
    }
    .ios-search input:focus { box-shadow: none; }

    .info-line {
      display: flex; align-items: center; gap: 6px;
      font-size: 11.5px; color: var(--label-3);
    }

    .cust-row:hover { background: var(--fill-2) !important; }
    .cust-row.selected:hover { background: var(--surface) !important; }
    /* A11y-fix: toggle-knop in eerste kolom ziet er uit als tekst (inline, transparant). */
    .row-toggle-btn {
      background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit;
      cursor: pointer; text-align: left; width: 100%;
    }

    details {
      border: 1px solid var(--sep);
      border-radius: var(--radius-card);
      background: var(--surface);
      overflow: hidden;
      box-shadow: var(--shadow);
    }

    summary {
      cursor: pointer;
      padding: 14px 16px;
      font-weight: 650;
      font-size: 16px;
      letter-spacing: -0.2px;
      background: var(--surface);
    }

    details > .details-body {
      padding: 14px 16px;
      display: grid;
      gap: 12px;
      border-top: 1px solid var(--sep);
    }

    .admin-totals {
      display: grid;
      gap: 8px;
    }

    .total-row {
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: 10px;
      align-items: center;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface-2);
    }

    .total-row--grand {
      border-color: var(--primary, #4a90d9);
      background: var(--surface-2, var(--surface-2));
      margin-top: 4px;
    }

    .month-completion-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 16px;
      background: var(--surface-2);
      border: 1px solid var(--line);
      border-radius: 8px;
      margin-bottom: 12px;
    }
    .month-completion-bar.mc-done {
      border-color: var(--ok, #4caf50);
      background: color-mix(in srgb, var(--ok, #4caf50) 8%, var(--surface-2));
    }
    .mc-status { display: flex; flex-direction: column; min-width: 140px; }
    .mc-label { font-weight: 600; }
    .mc-note {
      flex: 1;
      resize: none;
      height: 36px;
      padding: 6px 8px;
      font: inherit;
      font-size: 0.9em;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: var(--bg);
      color: var(--ink);
    }

    .nowrap {
      white-space: nowrap;
    }

    #printArea {
      display: none;
    }

    .person-form-row {
      display: grid;
      grid-template-columns: 1fr 1fr auto auto;
      gap: 10px;
      align-items: end;
      padding: 12px 14px;
      background: var(--primary-soft);
      border: 1px solid var(--primary);
      border-radius: 8px;
    }
    /* UX-2: klant-koppeling-veld in het toevoeg-formulier — over de volle breedte op een eigen rij. */
    .person-form-customers {
      grid-column: 1 / -1;
      display: grid;
      gap: 4px;
    }
    .person-form-customers select { width: 100%; }
    /* UX-2 (2026-06-16): klant-koppeling als duidelijke checkbox-lijst i.p.v. een Ctrl/Cmd-multiselect
       (die wekte de indruk dat maar één klant koppelbaar was). Scrollt bij veel klanten. */
    .pfc-label { font-size: 12px; color: var(--label-2); }
    .pfc-checklist {
      display: grid;
      gap: 2px;
      max-height: 168px;
      overflow-y: auto;
      padding: 6px 8px;
      border: 1px solid var(--sep-2);
      border-radius: 8px;
      background: var(--bg);
    }
    .pfc-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      padding: 3px 4px;
      border-radius: 6px;
      cursor: pointer;
    }
    .pfc-item:hover { background: var(--fill); }
    .pfc-item input { flex: 0 0 auto; margin: 0; width: auto; min-height: 0; padding: 0; }

    /* UX-3: klant-koppeling-uitklap bij een medewerker — subtiel (geen kaart-look) en netjes uitgelijnd
       onder de naam, zonder dat knoppen buiten de kaart vallen. Overschrijft de generieke details/summary. */
    details.person-links {
      border: none;
      background: transparent;
      border-radius: 0;
      box-shadow: none;
      overflow: visible;
      margin-left: 50px; /* lijnt uit onder de naamtekst (avatar 38px + 12px gap) */
    }
    details.person-links > summary {
      padding: 2px 0;
      background: transparent;
      font-weight: 600;
      font-size: 13px;
      color: var(--label-2);
      letter-spacing: 0;
      user-select: none;
    }
    .person-links-body {
      margin-top: 6px;  /* design-taak 4: was 8px maar template overschreef altijd met inline 6px */
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .person-link-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap; /* knoppen wrappen i.p.v. buiten de kaart te vallen op smalle schermen */
    }
    .person-link-row .pl-name {
      flex: 1 1 140px;
      min-width: 0; /* laat de naam krimpen i.p.v. de knop weg te duwen */
      font-size: 13.5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .person-link-row .mini { flex: 0 0 auto; }
    .person-link-add {
      margin-top: 4px;
      padding-top: 8px;
      border-top: 1px solid var(--sep-2);
    }
    .person-link-add select {
      flex: 1 1 160px;
      min-width: 0;
      font-size: 13px;
    }

    .extra-page-section textarea {
      min-height: 140px;
      font-family: monospace;
      font-size: 12px;
    }

    .editable-field {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 6px;
      padding: 1px 4px;
      background: var(--primary-soft);
      border: 1px dashed var(--primary);
    }

    .edit-trigger {
      font-size: 13px;
      min-height: 22px;
      padding: 0 6px;
      border-color: var(--primary);
      background: var(--primary-soft);
      color: var(--primary);
      font-weight: 600;
    }

    .edit-trigger:hover {
      background: var(--primary);
      color: #fff;
    }

    .inline-edit-input {
      width: auto;
      min-width: 120px;
      min-height: 28px;
      padding: 2px 6px;
      font-size: inherit;
    }

    /* Tekst-bewerkmodus: minder ruis. De inline-bewerkbare TEKST-spans (t()) krijgen geen permanent
       gekleurd vlak meer — alleen een subtiele stippel-onderlijn; het vlak + het potlood verschijnen
       pas bij hover. Zo blijft het scherm rustig terwijl elke tekst nog steeds aanwijsbaar is. De
       losse data-veld-knoppen (.editable-field zónder .editable-text) houden hun eigen ✎-knop. */
    .editable-field.editable-text {
      background: transparent;
      border: 1px dashed transparent;
      border-bottom-color: var(--primary);
      cursor: text;
      transition: background .1s ease, border-color .1s ease;
    }
    .editable-field.editable-text:hover,
    .editable-field.editable-text:focus-within {
      background: var(--primary-soft);
      border-color: var(--primary);
    }
    .editable-field.editable-text .edit-trigger {
      opacity: 0;
      width: 0;
      padding: 0;
      overflow: hidden;
      transition: opacity .1s ease;
    }
    .editable-field.editable-text:hover .edit-trigger {
      opacity: 1;
      width: auto;
      padding: 0 4px;
    }

    .free-text-toolbar {
      display: flex;
      gap: 4px;
      margin-bottom: 6px;
      flex-wrap: wrap;
    }

    .free-text-toolbar button {
      min-height: 26px;
      padding: 0 8px;
      font-size: 12px;
      line-height: 1;
    }

    .free-text-editor {
      min-height: 80px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 8px 10px;
      background: var(--surface);
      color: var(--label);
      outline: none;
      font-size: 14px;
      line-height: 1.5;
    }

    .free-text-editor:focus {
      border-color: var(--primary);
    }

    .free-text-editor img {
      max-width: 100%;
      height: auto;
    }

    /* #10 — interne notitie (intern-only, niet op PDF). Volle breedte, verticaal schaalbaar. */
    .internal-note {
      width: 100%;
      min-height: 48px;
      resize: vertical;
    }

    /* #4 — factuurhistorie-tijdlijn op de klantkaart: bedragstaafje krijgt vaste kolombreedte. */
    .timeline-bar-cell { width: 40%; min-width: 90px; }

    /* #2 — omzet-dashboard: KPI-kaarten + omzet-per-maand staafjes. */
    .kpi-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 12px;
      margin-bottom: 4px;
    }
    .kpi-card {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--surface);
    }
    .kpi-card small { color: var(--label-2); font-size: 12px; }
    .kpi-card strong { font-size: 22px; line-height: 1.1; color: var(--label); }
    .kpi-trend { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; }
    .kpi-trend.up   { color: var(--ok, #1a8a4f); }
    .kpi-trend.down { color: var(--danger, #c4314b); }
    .kpi-trend.flat { color: var(--label-3); font-weight: 500; }
    .dash-months { display: flex; flex-direction: column; gap: 6px; }
    .dash-mrow { display: flex; align-items: center; gap: 10px; }
    .dash-mrow.sel .dash-mlabel { font-weight: 700; color: var(--label); }
    .dash-mlabel { width: 34px; flex: 0 0 34px; font-size: 12px; color: var(--label-2); text-transform: capitalize; }
    .dash-mamount { width: 90px; flex: 0 0 90px; text-align: right; font-size: 13px; }
    .dash-mamount.dim { color: var(--label-3); }
    /* Forecast (run-rate-projectie): geprojecteerde maanden onderscheiden van echte omzet. */
    .dash-mrow.proj .dash-mlabel { color: var(--label-3); font-style: italic; }
    .dash-proj-tag { flex: 0 0 auto; font-size: 10px; line-height: 1; text-transform: uppercase; letter-spacing: .04em;
      color: var(--cat-4, #9333ea); background: color-mix(in srgb, var(--cat-4, #c084fc) 16%, transparent);
      border-radius: 6px; padding: 3px 6px; }
    .dash-forecast-note { font-size: 11.5px; margin-top: 10px; }

    /* #8 / v0.256.2 — factuur-voorbeeld (indicatief) als brede POP-UP (modal). Was een smalle zijbalk (420px)
       waardoor de A4 van 794px sterk samengeperst werd; nu een modale pop-up zodat de PDF op (bijna) ware
       grootte leesbaar is. Hergebruikt de app-modal-stijl; ".in" staat al in de HTML (geen JS-fade nodig). */
    /* Compound-selectors (.app-modal*.invoice-preview-*) zodat deze overrides de generieke .app-modal-regels
       winnen ongeacht de bronvolgorde (gelijke enkel-klasse-specificiteit zou anders de latere .app-modal pakken). */
    .app-modal-overlay.invoice-preview-overlay { align-items: flex-start; padding: 24px 16px; overflow: auto; }
    .app-modal.invoice-preview-modal {
      width: min(860px, 96vw); max-height: 92vh; padding: 16px;
      display: flex; flex-direction: column; gap: 10px;
    }
    .invoice-preview-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
    .invoice-preview-close { margin-left: auto; white-space: nowrap; }
    .invoice-preview-scroll {
      flex: 1 1 auto; min-height: 0; overflow: auto;
      border-radius: 10px; background: var(--fill-2, #f5f5f7); padding: 14px;
    }
    /* Override van de off-screen capture-stijl (pdf.js): in de preview zichtbaar, op (bijna) ware A4-breedte,
       gecentreerd, met relatieve positionering zodat het CONCEPT-watermerk binnen het vlak blijft. */
    .invoice-preview-modal .pdf-capture {
      position: relative; left: auto; top: auto;
      width: 794px; max-width: 100%; margin: 0 auto;
      padding: 32px; overflow: hidden;
      background: #fff; border: 1px solid var(--line); border-radius: 8px;
    }

    .settings-header-row {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .import-area {
      display: grid;
      gap: 12px;
    }

    .import-area textarea {
      min-height: 120px;
      font-family: monospace;
      font-size: 12px;
    }

    /* Combobox: vervangt selects met >10 opties door een zoek-/typeahead-veld */
    .combo {
      position: relative;
      display: block;
    }

    .combo-input {
      width: 100%;
    }

    #loginOverlay {
      position: fixed; inset: 0; z-index: 200;
      /* Basis MOET dekkend zijn (var(--primary-soft) is semi-transparant) — anders schijnt de app-data
         door de bovenkant van de overlay heen. Solid --bg eronder, accent-tint als image erbovenop. */
      background-color: var(--bg);
      background-image: radial-gradient(120% 120% at 50% 0%, var(--primary-soft) 0%, transparent 55%);
      display: flex; align-items: center; justify-content: center;
      padding: 20px;
    }
    #loginOverlay[hidden] { display: none; }

    /* UX-4: laad-waiter tijdens het inlezen van de data na (stille) Microsoft-login. */
    #loadingOverlay {
      position: fixed; inset: 0; z-index: 250;
      display: flex; align-items: center; justify-content: center;
      background: color-mix(in srgb, var(--bg) 72%, transparent);
      backdrop-filter: blur(2px);
    }
    #loadingOverlay[hidden] { display: none; }
    .loading-card {
      display: flex; align-items: center; gap: 14px;
      background: var(--surface); border: 1px solid var(--sep);
      border-radius: 14px; padding: 18px 22px; box-shadow: var(--shadow-pop);
      font-size: 14px; font-weight: 600; color: var(--label);
    }
    /* AL-3 (2026-06-18): laad-overlay met voortgangsbalk + fase-/detailtekst i.p.v. alleen een cirkeltje. */
    .loading-card .loading-body { display: grid; gap: 8px; min-width: 240px; }
    .loading-track {
      height: 6px; background: var(--fill-2); border-radius: 999px; overflow: hidden;
    }
    .loading-bar { height: 100%; width: 0; background: var(--primary); border-radius: 999px; transition: width .25s ease; }
    .loading-bar.indeterminate { width: 40%; animation: loadingIndet 1.1s ease-in-out infinite; }
    @keyframes loadingIndet { 0% { margin-left: -42%; } 100% { margin-left: 102%; } }
    @media (prefers-reduced-motion: reduce) { .loading-bar.indeterminate { animation-duration: 2.4s; } }
    .loading-detail { font-size: 12px; font-weight: 400; color: var(--label-2); min-height: 15px; }
    .loading-card .spinner {
      width: 22px; height: 22px; flex: 0 0 auto;
      border: 3px solid var(--sep);
      border-top-color: var(--primary);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    @media (prefers-reduced-motion: reduce) { .loading-card .spinner { animation-duration: 2s; } }

    .login-card {
      background: var(--surface); border: 1px solid var(--sep);
      border-radius: 22px; padding: 32px;
      width: 100%; max-width: 380px; box-shadow: var(--shadow-pop);
      display: grid; gap: 16px;
    }
    .login-card h2 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.4px; }
    .login-card .sub { margin: 0; color: var(--label-2); font-size: 13px; }
    .login-step { display: grid; gap: 12px; }
    .login-step[hidden] { display: none; }
    .login-error { color: var(--red); font-size: 13px; min-height: 18px; }
    .secret-box {
      background: var(--surface-2); border: 1px solid var(--line);
      border-radius: 8px; padding: 12px; font-family: monospace;
      font-size: 15px; letter-spacing: 3px; word-break: break-all;
      user-select: all; text-align: center;
    }
    .pw-form-row { display: grid; gap: 12px; }
    .totp-status { font-size: 12px; color: var(--muted); }
    .totp-status.ok { color: var(--green); }

    @media (max-width: 1100px) {
      /* Master-detail stapelt; tabellen scrollen horizontaal */
      .workspace { flex-direction: column; height: auto; }
      .cust-list-col {
        width: 100%; flex: 0 0 auto; border-right: none;
        border-bottom: 1px solid var(--sep); max-height: 320px;
      }
      .page-pad { padding: 20px 18px 40px; }
      .page-head { padding-inline: 18px; } /* volgt de smallere content-padding */
      .workspace.invoice-only .cust-editor-inner { padding-left: 18px; padding-right: 18px; } /* idem als .page-head */
    }

    @media (max-width: 860px) {
      .sidebar { width: 64px; flex: 0 0 64px; }
      .sidebar .brand h1,
      .sidebar .brand span,
      .sidebar .nav-item span,
      .sidebar .side-label,
      .sidebar .account-card .ac-text { display: none; }
      .nav-item { justify-content: center; padding: 9px; }
      /* Icon-only zijbalk: bolletje rechtsboven het icoon i.p.v. los aan het rij-einde. */
      .sidebar .nav-badge {
        position: absolute; top: 2px; right: 6px; margin: 0;
        min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px;
        box-shadow: 0 0 0 2px var(--surface);
      }
      .account-card .ac-inner { align-items: center; }
      .topbar h1 { font-size: 22px; }
      .topbar { padding: 14px 16px 12px; }
    }

    @media (max-width: 640px) {
      .form-grid,
      .two-grid,
      .invoice-head {
        grid-template-columns: 1fr !important;
      }
    }

    /* Tabel-kaarten horizontaal scrollbaar op smal */
    .table-scroll { overflow-x: auto; }
    .table-scroll table { min-width: 640px; }

    @media print {
      body {
        background: #ffffff;
      }

      .app-shell {
        display: none;
      }

      /* v0.256.4: drijvende UI (toast-snackbars, o.a. "Opslaan…") staat buiten .app-shell en zou anders
         mee de PDF/afdruk in lekken. Expliciet verbergen bij printen. */
      .toast-stack {
        display: none !important;
      }

      #printArea {
        display: block;
      }

      @page {
        size: A4;
        margin: 16mm;
      }

      .print-page {
        font-family: Arial, "Helvetica Neue", sans-serif;
        color: #111827;
        font-size: 11pt;
      }

      /* v0.256.3: forceer dat achtergrondkleuren (grijze tabelkoppen, concept-/spec-badge, watermerk) ook
         echt in de PDF/afdruk terechtkomen. Browsers laten achtergronden standaard weg ("Achtergrondafbeeldingen"
         uit), waardoor de export afweek van het voorbeeld op het scherm. Met print-color-adjust:exact komt de
         "Export PDF"-uitvoer overeen met de pop-up. */
      .print-page,
      .print-page * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }

      /* Eenvoudige bijlage-kop */
      .print-title {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        border-bottom: 2px solid #111827;
        padding-bottom: 11px;
        margin-bottom: 20px;
      }

      .print-title h1 {
        margin: 0;
        font-size: 17pt;
        font-weight: 800;
        letter-spacing: -0.3px;
      }

      .print-title .print-subtitle {
        margin: 2px 0 0;
        font-size: 9.5pt;
        color: #6b7280;
        font-weight: normal;
      }

      /* Concept-badge rechts in kop */
      .print-concept-badge {
        background: #fff7ed;
        color: #c2410c;
        border: 1px solid #fdba74;
        border-radius: 6px;
        font-size: 9pt;
        font-weight: 700;
        padding: 3px 10px;
        white-space: nowrap;
        align-self: flex-start;
      }

      /* A13: document-type-markering (neutraal grijs) — dit is een specificatie, geen factuur */
      .print-spec-badge {
        background: #f3f4f6;
        color: #374151;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        font-size: 9pt;
        font-weight: 700;
        padding: 3px 10px;
        white-space: nowrap;
        align-self: flex-start;
        letter-spacing: 0.3px;
        text-transform: uppercase;
      }

      /* Achtergrondwatermerk bij concept */
      .print-concept-watermark {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-24deg);
        font-size: 96pt;
        font-weight: 900;
        color: rgba(17,24,39,.06);
        pointer-events: none;
        z-index: 0;
        white-space: nowrap;
      }

      /* print-meta / print-kpis niet meer in gebruik */
      .print-meta,
      .print-kpis {
        display: none;
      }

      /* Tabellen */
      .print-page table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 16px;
        page-break-inside: avoid;
      }

      /* v0.256.4: de issue-lijst als één geheel houden — past hij niet meer onder de andere blokken, dan
         schuift het hele blok naar de volgende pagina i.p.v. losse rijen onderaan af te kappen/splitsen. */
      .print-issues {
        break-inside: avoid;
        page-break-inside: avoid;
      }

      .print-page thead tr {
        background: #f3f4f6;
      }

      .print-page thead th {
        text-align: left;
        font-size: 10.5pt;
        font-weight: 700;
        padding: 7px 10px;
        border-bottom: 1.5px solid #d1d5db;
        color: #111827;
      }

      .print-page thead th.number {
        font-size: 9pt;
        color: #6b7280;
        font-weight: 600;
        width: 130px;
      }

      .print-page tbody td {
        font-size: 10pt;
        padding: 6px 10px;
        border-bottom: 1px solid #eceef1;
      }

      .print-page tbody td.muted {
        color: #6b7280;
      }

      /* Subtotaalrij */
      .print-page tbody tr.subtotal td {
        font-weight: 700;
        border-top: 1.5px solid #9ca3af;
        border-bottom: none;
        padding: 8px 10px;
      }

      /* Subtotaal-label rechts uitlijnen (in lijn met 'Totaal' onderaan): het label
         beslaat de eerste twee kolommen (colspan="2") en eindigt zo direct vóór de
         bedrag-kolom, net als het woord 'Totaal' vóór het eindbedrag. */
      .print-page tbody tr.subtotal td[colspan] {
        text-align: right;
      }

      .print-page .number {
        text-align: right;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
      }

      /* Totaalregel vóór Issues */
      .print-total {
        display: flex;
        justify-content: flex-end;
        border-top: 2px solid #111827;
        padding-top: 12px;
        margin-bottom: 22px;
        margin-top: 4px;
      }

      .print-total span {
        font-size: 15pt;
        font-weight: 800;
      }

      /* Footer: paginanummer rechts, optionele AM-opmerking links */
      .print-footer {
        margin-top: 28px;
        border-top: 1px solid #d1d5db;
        color: #6b7280;
        font-size: 8.5pt;
        padding-top: 10px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
      }

      .print-footer .print-page-nr {
        margin-left: auto;
      }
    }

    /* --- OneDrive-werkmap + multi-user lock (item 1) --- */
    #workfolderGroup button { width: 100%; margin-top: 4px; }
    #workfolderStatus { word-break: break-word; line-height: 1.35; }
    #workfolderStatus.is-ready  { color: var(--green); }
    #workfolderStatus.is-error  { color: var(--red); }
    #workfolderStatus.needs-reconnect { color: var(--amber); }
    .lock-banner {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 12px;
      padding: 10px 14px;
      border-radius: 10px;
      background: var(--amber-soft);
      color: var(--amber);
      border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent);
      font-weight: 650;
      font-size: 13px;
    }
    .locked-readonly { opacity: 0.6; }

    /* A04-1: modusbanner — toont blijvend dat je lokaal (niet-gedeeld) werkt */
    /* FB-E: 'display:flex' overruled het [hidden]-attribuut → een lege amber balk bleef staan zodra de
       banner verborgen werd (renderModeBanner zet hidden=true + innerHTML=""). Expliciet onderdrukken. */
    .mode-banner[hidden] { display: none; }
    .mode-banner {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 16px;
      padding: 11px 14px;
      border-radius: 12px;
      background: var(--amber-soft);
      border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent);
      font-size: 13px;
      color: var(--label);
    }
    .mode-banner .mode-banner-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--amber); flex: 0 0 auto;
    }
    .mode-banner .mode-banner-text { flex: 1; line-height: 1.4; }
    .mode-banner .mode-banner-text strong { color: var(--amber); }
    .mode-banner button { flex: 0 0 auto; }
    /* Simulatie-banner: accent (blauw) i.p.v. amber, zodat "je simuleert" duidelijk anders oogt dan alleen-lezen. */
    .mode-banner.sim-banner {
      background: var(--primary-soft);
      border-color: color-mix(in srgb, var(--primary) 45%, transparent);
    }
    .mode-banner.sim-banner .mode-banner-dot { background: var(--primary); }
    .mode-banner.sim-banner .mode-banner-text strong { color: var(--primary); }

    /* A15: in-app modals & toasts (vervangen native alert/confirm/prompt) */
    .app-modal-overlay {
      position: fixed; inset: 0; z-index: 1000;
      display: flex; align-items: center; justify-content: center;
      background: rgba(0, 0, 0, 0.32);
      opacity: 0; transition: opacity 0.16s ease;
    }
    .app-modal-overlay.in { opacity: 1; }
    .app-modal {
      background: var(--surface); color: var(--label);
      width: min(420px, 92vw); border-radius: 16px; padding: 20px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
      transform: scale(0.96); transition: transform 0.16s ease;
    }
    .app-modal-overlay.in .app-modal { transform: scale(1); }
    .app-modal-title { margin: 0 0 6px; font-size: 17px; font-weight: 650; }
    .app-modal-msg {
      margin: 0 0 16px; font-size: 14px; color: var(--label-2);
      white-space: pre-line; line-height: 1.45;
    }
    .app-modal-wide { width: min(640px, 94vw); }
    .app-modal-input {
      width: 100%; margin: 0 0 16px; padding: 9px 11px;
      border: 1px solid var(--sep); border-radius: 10px; font-size: 14px;
      background: var(--surface); color: var(--label);
    }
    .app-modal-textarea {
      resize: vertical; min-height: 120px; line-height: 1.4;
      font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
      white-space: pre; overflow-wrap: normal; tab-size: 8;
    }
    .app-modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

    /* FB-G — release notes ("Wat is er nieuw") */
    .rn-scroll { max-height: min(60vh, 460px); overflow: auto; margin: 4px 0 16px; }
    .rn-entry { padding: 10px 0; border-top: 1px solid var(--sep-2); }
    .rn-entry:first-child { border-top: 0; padding-top: 0; }
    .rn-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
    .rn-version { font-weight: 650; font-size: 14px; }
    .rn-date { font-size: 12px; color: var(--label-3); }
    .rn-list { margin: 0; padding-left: 18px; }
    .rn-list li { font-size: 13.5px; color: var(--label-2); line-height: 1.5; }

    /* Werkinstructie — klikbare inhoudsopgave bovenaan de modal */
    .howto-nav {
      display: flex; flex-wrap: wrap; gap: 6px;
      margin: 4px 0 4px; padding-bottom: 14px;
      border-bottom: 1px solid var(--sep-2);
    }
    .howto-nav-item {
      font-size: 12.5px; font-weight: 600; line-height: 1.2;
      padding: 5px 11px; border-radius: 999px; cursor: pointer;
      background: var(--field, rgba(120,120,128,0.12)); color: var(--label-2);
      border: 1px solid var(--sep);
    }
    .howto-nav-item:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

    /* N18 — stappen-indicator nieuwe-klant-wizard */
    .wizard-steps { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 2px; }  /* design-taak 4: align+mb uit inline */
    .wizard-step {
      font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
      background: var(--field, rgba(120,120,128,0.12)); color: var(--label-2);
      border: 1px solid var(--sep);
    }
    .wizard-step.active { background: var(--primary); color: #fff; border-color: var(--primary); }
    .wizard-step.done { color: var(--primary); border-color: var(--primary); }

    .toast-stack {
      position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
      z-index: 1100; display: flex; flex-direction: column; gap: 8px;
      align-items: center; pointer-events: none;
    }
    .app-toast {
      pointer-events: auto; max-width: min(440px, 92vw);
      padding: 11px 16px; border-radius: 12px;
      font-size: 13.5px; line-height: 1.4; white-space: pre-line;
      color: #fff; background: #333;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
      opacity: 0; transform: translateY(8px);
      transition: opacity 0.18s ease, transform 0.18s ease; cursor: pointer;
    }
    .app-toast.in { opacity: 1; transform: translateY(0); }
    .app-toast.leaving { opacity: 0; transform: translateY(8px); }
    .app-toast.info { background: var(--primary); }
    .app-toast.success { background: #16a34a; }
    .app-toast.warn { background: #b45309; }
    .app-toast.error { background: #c0362c; }
    /* Snackbar met actieknop (bv. collega-wijziging → "Vernieuwen"). */
    .app-toast.with-action { display: flex; align-items: center; gap: 12px; }
    .app-toast .app-toast-text { flex: 1 1 auto; }
    .app-toast .app-toast-action {
      flex: 0 0 auto; cursor: pointer;
      background: rgba(255, 255, 255, 0.22); color: #fff;
      border: 0; border-radius: 8px; padding: 5px 12px;
      font-size: 13px; font-weight: 600; white-space: nowrap;
    }
    .app-toast .app-toast-action:hover { background: rgba(255, 255, 255, 0.34); }

    /* ── Design-taak 4 (2026-06-19): inline-styles → klassen, EXACTE waarden (visueel
       identiek; geen schaal-normalisatie). Per scherm uitgebreid. ── */
    .mt-2 { margin-top: var(--space-2); }                 /* 8px (= --space-2) */
    .m-0 { margin: 0; }
    .field-hint { margin: 8px 0 0; font-size: 12.5px; }   /* kleine muted hint onder een control */
    .field-label { display: block; margin-bottom: 6px; }  /* losstaand label boven een control */
    #profileInfoMsg { margin-top: 6px; font-size: 13px; } /* opslaan-bevestiging profielscherm */

    /* audit-scherm (design-taak 4) — exacte waarden, tokens waar 1:1. */
    .flex-wrap { flex-wrap: wrap; }
    .ml-2 { margin-left: var(--space-2); }   /* 8px */
    .mt-10 { margin-top: 10px; }             /* off-grid (geen token) */
    .audit-skeleton-stack { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) 0; } /* 8px / 12px */
    .audit-loading-note { font-size: var(--text-xs); color: var(--label-3); margin-top: var(--space-1); }           /* 12px / 4px */
    .audit-archive-row { display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); } /* 12px */
    .section > header.section-head-wrap { gap: var(--space-2); flex-wrap: wrap; }  /* 8px; overschrijft base-gap 12px */

    /* customerDetail-scherm (design-taak 4) — exacte waarden; tokens waar 1:1. */
    .badge.badge-muted { background: var(--fill); color: var(--label-3); }  /* gedempte/historie-badge */
    .ml-auto { margin-left: auto; }
    .clickable { cursor: pointer; }
    .acc-intro { padding: 0 14px; margin: 0; }            /* uitleg-paragraaf boven instellingen-accordeon */
    .panel-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }  /* knoppenrij in panel-header (8px) */
    .note-tight { font-size: 12.5px; margin: 4px 0 0; }   /* compacte muted-noot */

    /* invoiceList-scherm (design-taak 4) — exacte waarden; tokens waar 1:1. */
    .italic { font-style: italic; }
    .th-sort { cursor: pointer; user-select: none; white-space: nowrap; }   /* klikbare sorteerkop */
    .sel-cell { width: 36px; text-align: center; padding-right: 0; }        /* #9 selecteer-kolom (checkbox) */
    .sel-cell input[type="checkbox"] { cursor: pointer; vertical-align: middle; }
    .row-lead { display: flex; align-items: center; gap: 10px; }            /* avatar + naam (10px) */
    .cell-sub { font-size: 11.5px; }                                        /* subregel onder klantnaam */
    .filter-bar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }  /* 12px */

    /* Telling-chips boven een lijst/tabel (countChips-helper). Eén uniform jasje voor alle lijst-schermen:
       een statische teller-chip of — waar een filter zinvol is — een klikbare chip. */
    .count-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .count-chip {
      display: inline-flex; align-items: baseline; gap: 5px;
      min-height: 28px; padding: 4px 11px;
      border-radius: 999px;
      border: 1px solid var(--line-strong);
      background: var(--fill-2);
      color: var(--label, var(--ink-soft));
      font-size: 12.5px; font-weight: 500; white-space: nowrap;
    }
    .count-chip .cc-n { font-weight: 700; color: var(--ink); }
    button.count-chip { cursor: pointer; transition: border-color .12s, background .12s; }
    button.count-chip:hover { background: var(--fill); border-color: var(--primary); }
    .count-chip.on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
    .count-chip.on .cc-n { color: var(--primary); }
    .count-chip.cc-draft .cc-n { color: var(--orange); }
    .count-chip.cc-done .cc-n { color: var(--green); }
    .count-chip.on.cc-draft .cc-n, .count-chip.on.cc-done .cc-n { color: var(--primary); }

    /* settings-scherm (design-taak 4) — exacte waarden; compound-selectors waar base wordt overschreven. */
    .section.section-accent { border: 2px solid var(--primary); margin-bottom: 4px; }  /* uitgelichte (nieuw-model) sectie */
    .section.bg-fill2 { background: var(--fill-2); }                                    /* read-only rekenregels-kaart */
    .section-title.sm { font-size: 13px; }                                             /* subsectie-kop */
    .inline-actions.start { justify-content: flex-start; }
    .section > div.cm-form-body { gap: 14px; }                  /* calc-model-formulier: gap 14 i.p.v. base 12 */
    .section > div.rules-body { padding: 12px 16px; gap: 10px; } /* rekenregels-lijst */
    .req { color: var(--primary); }                             /* verplicht-veld-asterisk */
    .nowrap { white-space: nowrap; }
    .tag-row { display: inline-flex; align-items: center; gap: var(--space-2); margin-left: auto; }
    .history-toggle-wrap { padding: 0 2px 4px; }
    .btn-block { width: 100%; justify-content: center; }
    .sub-note { margin: 0 0 8px; font-size: 12.5px; }
    .rule-row { display: flex; align-items: flex-start; gap: var(--space-2); font-size: 13.5px; color: var(--label-2); }

    /* persons-scherm (design-taak 4) — exacte waarden; generieke klassen scoped gehouden. */
    .person-edit { padding: 12px 14px; }
    .person-name-cell { display: inline-flex; align-items: center; gap: var(--space-2); width: 100%; }
    .edit-cell { background: var(--fill); padding: 0; }
    .person-roles-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
    .role-checks .role-check-label { gap: 5px; font-size: 12.5px; }  /* overschrijft .role-checks label (0,1,1) */
    .person-links-divider { border-top: 1px solid var(--sep); margin-top: 12px; padding-top: 10px; }
    .inline-gap-6 { display: inline-flex; gap: 6px; }
    .scroll-x { overflow-x: auto; }
    .mb-10 { margin-bottom: 10px; }
    .fs-12 { font-size: 12.5px; }
    .fs-13 { font-size: 13px; }

    /* totals-scherm (design-taak 4) — exacte waarden; hergebruik .section-head-wrap/.scroll-x. */
    .section-subtitle { margin: 0 0 6px; font-size: 12.5px; }   /* alleen in totals; 4× zelfde font */
    .mt-16 { margin-top: 16px; }
    .flex-1 { flex: 1; }
    .bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
    .bar-label { flex: 0 0 170px; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bar-label.dim { color: var(--label-2); }
    .bar-amount { font-size: 12.5px; font-weight: 650; min-width: 96px; text-align: right; }
    .inline-actions.gap-6 { gap: 6px; }
    .mb-12 { margin: 0 0 12px; }
    .mb-4 { margin-bottom: 4px; }
    .note-li { margin: 2px 0; font-size: 13px; }
    .note-list { margin: 0 0 12px; padding-left: 18px; }
    .note-list.tight { margin: 0; }
    .note-p { margin: 0 0 6px; font-size: 12px; }
    .fs-08em { font-size: 0.8em; }
    .pad-x-14 { padding: 0 14px; }
    .cleanup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 14px 8px; }
    .cleanup-note { padding: 0 14px 4px; font-size: 12px; }
    .pad-cleanup-foot { padding: 0 14px 14px; display: flex; align-items: center; gap: 12px; }
    /* "Concept facturen"-uitklap: aantal als klikbare disclosure met de betrokken klanten eronder. */
    .concept-count { display: inline-block; }
    .concept-count > summary { cursor: pointer; list-style: none; font-variant-numeric: tabular-nums; }
    .concept-count > summary::-webkit-details-marker { display: none; }
    .concept-count > summary::after { content: " ▸"; color: var(--label-3); }
    .concept-count[open] > summary::after { content: " ▾"; }
    .concept-cust-list { margin: 6px 0 0; padding-left: 18px; text-align: left; font-weight: 400; }
    .concept-cust-list li { white-space: nowrap; }
    .concept-hint { padding: 6px 14px 0; font-size: 12px; }

    /* overview-scherm (design-taak 4) — exacte waarden; dynamische styles (balkhoogte,
       conic-gradient, cur-conditionele kleur) blijven inline. color:var(--label-2) == .muted. */
    .kpi-head { display: flex; align-items: center; gap: var(--space-2); color: var(--label-2); font-size: 13px; font-weight: 600; }
    .kpi-head.between { justify-content: space-between; }
    .kpi-sub { min-height: 18px; font-size: 12.5px; color: var(--label-2); margin-top: 3px; }
    .kpi-value { font-size: 23px; margin-top: 8px; }
    .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
    .month-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; height: 100%; justify-content: flex-end; }
    .month-bar { width: 100%; border-radius: 6px 6px 3px 3px; }
    .month-bar-label { font-size: 11px; }
    .panel.chart-card { padding: 18px 20px 14px; }
    .panel.status-card { padding: 18px 20px; display: flex; flex-direction: column; }
    .chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
    .chart-sub { font-size: 12.5px; color: var(--label-2); }
    .chart-legend { font-size: 12px; color: var(--label-2); display: flex; align-items: center; gap: 6px; }
    .legend-dot { width: 9px; height: 9px; border-radius: 3px; background: var(--primary); }  /* chart-legenda (enige gebruik) */
    .chart-bars { display: flex; align-items: flex-end; gap: 10px; height: 170px; padding-top: 14px; }
    .status-sub { font-size: 12.5px; color: var(--label-2); margin-bottom: 14px; }
    .status-row { display: flex; align-items: center; gap: 18px; }
    .donut { position: relative; width: 104px; height: 104px; flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
    .donut-inner { width: 74px; height: 74px; border-radius: 50%; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .donut-num { font-size: 22px; font-weight: 700; }
    .donut-of { font-size: 10.5px; color: var(--label-2); }
    .status-legend { display: flex; flex-direction: column; gap: 11px; flex: 1; }
    .legend-item { display: flex; align-items: center; gap: 9px; }
    .legend-sq { width: 10px; height: 10px; border-radius: 3px; }
    .legend-sq.green { background: var(--green); }
    .legend-sq.amber { background: var(--cat-3); }
    .legend-title { font-size: 13.5px; font-weight: 600; }
    .legend-count { font-size: 11.5px; color: var(--label-2); }
    .ov-divider { height: 1px; background: var(--sep); margin: 16px 0 12px; }
    .per-am-title { font-size: 13px; font-weight: 600; color: var(--label-2); margin-bottom: 8px; }
    .am-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
    .am-amount { font-size: 12.5px; font-weight: 600; color: var(--label-2); min-width: 84px; text-align: right; }
    .row-main { flex: 1; min-width: 0; }
    .row-name { font-size: 14.5px; font-weight: 600; }
    .row-sub { font-size: 12px; color: var(--label-2); }
    .row-amt { font-size: 14px; font-weight: 650; }
    .row-amt.fixed { min-width: 84px; text-align: right; }
    .row-rank { font-size: 13px; font-weight: 700; color: var(--label-3); width: 18px; }
    .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
    .list-head { padding: 15px 18px 11px; display: flex; align-items: center; justify-content: space-between; }
    .list-head-plain { padding: 15px 18px 11px; }
    .dashboard-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; margin-top: 16px; }
    .mt-18 { margin-top: 18px; }

    /* invoiceDetail-scherm (design-taak 4) — exacte waarden; dynamische cursor/badge blijven (deels) inline. */
    .th-note { font-weight: 400; font-style: italic; }
    .mt-6 { margin-top: 6px; }
    .detail-meta-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
    .detail-meta-text { font-size: 13.5px; font-weight: 600; color: var(--label-2); }
    .noinvoice-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--label-2); }
    .cb-inline { width: auto; min-height: 0; }
    /* Punt 8 (2026-06-23): paneeltitel (klant · periode) in de "invoices"-master-detail, die geen gedeelde
       paginakop heeft. Zelfde toon als de paginakop op de losse factuurpagina. */
    .invoice-panel-title { margin: 2px 0 12px; }
    .invoice-panel-title h2 { margin: 0; font-size: 18px; font-weight: 700; }
    .month-state-line { margin-bottom: 14px; }
    .month-state-line.flow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
    .details-body.empty-invoice-state { text-align: center; padding: 32px 16px; }
    .m-0-16 { margin: 0 0 16px; }
    .export-flag { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
    /* v0.255.1: export-historie als uitklap. De generieke details/summary-kaart (wit kader, padding 14/16,
       grote vette tekst) wordt hier overschreven. De samenvattingsrij en de uitgeklapte regels krijgen DEZELFDE
       horizontale padding, zodat de tekst netjes ín de uitklap past en niet tegen de rand valt.
       v0.256.1: de samenvattingschip ("✓ Geëxporteerd N×") + chevron staan nu RECHTS uitgelijnd in de balk,
       zodat de chip onder de "Export PDF"-knop (rechtsboven) valt. flex-end (i.p.v. space-between) houdt de
       chip ook bij het uitklappen aan de rechterkant (geen sprong). */
    .export-details { margin-bottom: 14px; }
    .export-details > summary {
      display: flex; align-items: center; justify-content: flex-end; gap: 10px;
      cursor: pointer; list-style: none; padding: 10px 14px;
      background: transparent; font: inherit; font-weight: 500;
    }
    .export-details > summary::-webkit-details-marker { display: none; }
    /* Chevron VÓÓR de badge (::before), zodat de badge zelf tegen de rechterrand komt — recht onder de knop. */
    .export-details > summary::before { content: "▾"; color: var(--label-2); font-size: 12px; transition: transform .15s ease; }
    .export-details[open] > summary::before { transform: rotate(180deg); }
    /* v0.254.0: volledige (meervoudige) export-historie — per export datum · persoon · type. Dezelfde
       horizontale padding als de summary + een scheidingslijn, zodat de regels uitgelijnd binnen de kaart staan. */
    .export-details > .export-list { margin: 0; padding: 10px 14px; border-top: 1px solid var(--sep); }
    .export-list { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 6px; }
    .export-item { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--label-2); flex-wrap: wrap; }
    .export-item .export-when { font-variant-numeric: tabular-nums; }
    .export-item .export-by { font-weight: 600; }
    .export-kind { text-transform: lowercase; }
    .badge.badge-soft { background: var(--fill); color: var(--label-2); }
    .actions-inline { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; }
    .mb-16 { margin-bottom: 16px; }

    /* app.js (design-taak 4) — gedeelde + scoped klassen. renderPrintInvoice (PDF) blijft inline. */
    .bulk-progress-card { pointer-events: auto; background: var(--surface); border: 1px solid var(--sep); border-radius: 14px; box-shadow: var(--shadow-pop); padding: 14px 16px; width: 100%; max-width: 520px; }
    .bulk-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
    .bulk-progress-label { font-size: 13.5px; font-weight: 650; }
    .btn-compact { min-height: 0; padding: 3px 10px; }
    .bulk-progress-track { height: 8px; border-radius: 6px; background: var(--fill); overflow: hidden; }
    .bulk-progress-fill { height: 100%; background: var(--primary); transition: width .15s; }
    .col-span { grid-column: 1 / -1; }
    .checkbox-row { display: flex; align-items: center; gap: 8px; flex-direction: row; margin-top: 12px; font-size: 13.5px; }
    .note-hint { font-size: 12px; margin: 8px 0 0; }
    .prefix-safe-hint { display: block; margin-top: 4px; font-size: 11.5px; color: var(--orange); }
    .mp-spacer { width: 5px; height: 5px; }

    /* app.js sync-balk (design-taak 4) */
    .sync-err { font-size: 11px; color: var(--red); }
    .sync-bar .sync-btn { font-size: 11px; padding: 3px 8px; min-height: 0; margin-top: 2px; }  /* overschrijft .sync-bar button (0,1,1) */
    .sync-bar .sync-btn.first { margin-top: 4px; }
    .sync-meta { font-size: 11px; color: var(--label-3); }
    .fw-600 { font-weight: 600; }
    .text-red { color: var(--red); }

    /* app.js klantenlijst-rijen (design-taak 4) — .cust-list-row scoped (NIET op gedeelde .cust-row). */
    .backlink-wrap { padding: 4px 6px 8px; }
    .btn-block-start { width: 100%; justify-content: flex-start; }
    .archtoggle-wrap { padding: 0 6px 8px; }
    .cust-list-row { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 11px; margin-bottom: 2px; }
    .cust-row.selected { background: var(--surface); box-shadow: var(--shadow); }
    .archived-row { opacity: .75; }
    .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cust-name { font-size: 14.5px; font-weight: 600; }
    .cust-sub { font-size: 11.5px; color: var(--label-2); }
    .mini-dash { font-size: 10px; color: var(--label-3); }
    .badge.badge-mini { font-size: 10px; min-height: 18px; padding: 1px 7px; }
    /* Overige-regel: omschrijving-input + "overgenomen"-badge naast elkaar in de cel. */
    .other-label-cell { display: flex; align-items: center; gap: 6px; }
    .other-label-cell input { flex: 1 1 auto; min-width: 0; }
    .text-orange { color: var(--orange); }
    .cust-amt-col { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
    .cust-amt { font-size: 13.5px; font-weight: 650; }

    /* app.js new-invoice-form (design-taak 4) */
    .note-12 { font-weight: 400; font-size: 12px; }
    .wizard-step { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
    .wizard-dot { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
    .dim-4 { opacity: .4; }
    .inline-actions.spread { justify-content: space-between; }
    .mt-4 { margin-top: 4px; }
    .flex-gap-8 { display: flex; gap: 8px; }

    /* customers-scherm (design-taak 4) — veel hergebruik; enkele scoped. */
    .note-mb8 { margin: 0 0 8px; font-size: 12px; }
    .note-228 { margin: 2px 0 8px; font-size: 12px; }
    .cust-edit-body { padding: 12px 14px; }
    .cust-edit-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
    .cust-year-divider { border-top: 1px solid var(--sep); margin-top: 12px; padding-top: 12px; }
    /* v0.259.0: de titel/knop-rij (Goedkeuren + Toon jaar) zat vlak tegen de eronder volgende status-balk
       (concept/goedgekeurd) aan, waardoor de knop er visueel overheen leek te vallen. Vaste tussenruimte. */
    .cust-year-divider > .flex-between-wrap { margin-bottom: 10px; }
    /* Punt 3 (2026-06-23): titel + status-chip op één regel in de inline klantkaart (Klanten-lijst). */
    .cust-year-title { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
    .flex-between-wrap { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
    .year-select-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--label-2); }
    .select-narrow { width: auto; min-width: 78px; }