:root {
    --bg: #F2F7FD;
    --surface: #FFFFFF;
    --surface-2: #EAF2FC;
    --ink: #14233B;
    --ink-soft: #5A6B82;
    --border: #D3E1F3;
    --teal: #2F7BE8;
    --teal-deep: #1D4FA8;
    --teal-tint: #E6F1FF;
    --sage: #7CB7FB;
    --amber: #B9822F;
    --amber-tint: #FBF0DC;
    --red: #A8402F;
    --red-tint: #F7E4DF;
    --green: #3D7A52;
    --green-tint: #E4F0E5;
    --focus: #2F7BE8;
    --font-head: "Newsreader", Georgia, serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  }
  /* Site blijft altijd beige/wit — geen automatische donkere modus meer. */
  :root[data-theme="dark"] {
    --bg: #12191A;
    --surface: #1A2323;
    --surface-2: #22302E;
    --ink: #ECEAE3;
    --ink-soft: #A9B3AC;
    --border: #33413E;
    --teal: #C7A374;
    --teal-deep: #E4C79A;
    --teal-tint: #2E271C;
    --sage: #B9A47A;
    --amber: #E0AC5C;
    --amber-tint: #35301C;
    --red: #E28273;
    --red-tint: #3A2420;
    --green: #7FBE93;
    --green-tint: #1E3324;
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  /* Veiligheidsnet tegen horizontaal scrollen van de HELE pagina op smalle (mobiele) schermen —
     zonder dit kon 1 te-brede rij (bv. de header-balk met naam/rol/knoppen) de hele <body> breder
     maken dan het scherm, waardoor alles (inclusief de tabbladen eronder) heen-en-weer "schoof"
     en je naar rechts moest scrollen om de rest te zien. */
  html, body { overflow-x: hidden; width: 100%; }
  body {
    background: var(--bg);
    color: var(--ink);
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    min-height: 100vh;
  }
  .app-bg-video {
    display: none;
    position: fixed; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: -2;
  }
  .app-bg-overlay {
    position: fixed; inset: 0;
    z-index: -1;
    background: linear-gradient(160deg, #EAF3FF 0%, #F7FAFF 55%, #E3EEFC 100%);
  }
  /* pz-plan-design: rustiger, moderner uiterlijk voor Planning (functies blijven ongewijzigd). Verwijder dit blok om terug te gaan. */
  #planPrTabs, #planTabs { background: var(--surface-2); padding: 4px; border-radius: 14px; width: fit-content; max-width: 100%; }
  #planPrTabs button, #planTabs button { border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--ink-soft) !important; border-radius: 10px !important; font-weight: 600 !important; padding: 8px 16px !important; max-width: none !important; white-space: nowrap; flex: 0 0 auto !important; }
  #planPrTabs button.primary, #planTabs button.primary { background: #fff !important; color: var(--teal-deep) !important; box-shadow: 0 1px 4px rgba(20,35,59,.16) !important; }
  #planBar { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; gap: 10px !important; }
  #planBar button.ghost, #planEditorBar button.ghost, #planEditorBar summary { background: #fff !important; border: 1px solid var(--border) !important; border-radius: 10px !important; color: var(--ink) !important; font-weight: 600 !important; }
  #planBar button.primary, #planEditorBar button.primary { border-radius: 10px !important; box-shadow: 0 2px 8px rgba(47,123,232,.28) !important; }
  #planLabel { font-family: var(--font-head); font-size: 17px; color: var(--teal-deep); }
  #planGrid.table-scroll { background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 4px 18px rgba(20,50,100,.07); overflow-x: auto; }
  #planGrid table { font-size: 13.5px !important; }
  #planGrid thead th { background: #F4F8FE !important; color: var(--ink-soft); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 12px 4px !important; border-bottom: 1px solid var(--border) !important; }
  #planGrid thead th:first-child { padding-left: 14px !important; }
  #planGrid tbody td { border-top: 1px solid #EDF2F9 !important; border-left-color: #EDF2F9 !important; }
  #planGrid tbody td:first-child { padding-left: 14px !important; color: var(--ink); }
  #planGrid tbody tr:nth-child(even) td:not(.plan-cell) { background: #FBFDFF !important; }
  #planGrid td.plan-cell { transition: background .12s; }
  #planGrid td.plan-cell:hover { background: #EEF5FF !important; }
  #planGrid td.plan-cell > div:last-child { opacity: .45; }
  #planGrid td.plan-cell:hover > div:last-child { opacity: 1; color: var(--teal) !important; }
  .wrap {
    max-width: 980px;
    margin: 0 auto;
    padding: 28px 20px 12px;
  }
  header.top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    padding-bottom: 20px;
  }
  header.top .brand h1 {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 27px;
    margin: 0 0 3px;
    color: var(--teal-deep, var(--teal));
    letter-spacing: 0.3px;
  }
  header.top .brand p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 13px;
    letter-spacing: 0.2px;
    text-transform: uppercase;
  }
  .sync {
    font-size: 12.5px;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    /* GEEN white-space:nowrap hier — dat werd ook door de tekst in #roleLabel geërfd (inline
       spans erven white-space van hun ouder) en hield die ene naam/rol/praktijk-tekst daardoor
       als ÉÉN onbreekbare regel, ook al mocht de rest van deze balk al wel naar een nieuwe regel.
       Bij een lange naam of praktijknaam op een smal scherm duwde die ene span dan alsnog de
       hele pagina breder dan het scherm. */
  }
  .sync > * { white-space: nowrap; }
  #roleLabel { white-space: normal; overflow-wrap: anywhere; }
  .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; }
  .dot.off { background: var(--red); }

  .nav-menu-btn {
    display: none; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
    font-family: ui-sans-serif, system-ui, sans-serif; font-size: 16px; font-weight: 700; color: var(--teal-deep, var(--teal));
    background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 12px; padding: 13px 16px; margin: 0 0 12px; cursor: pointer;
  }
  nav.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--border);
  }
  nav.tabs button {
    appearance: none;
    border: none;
    background: none;
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-soft);
    padding: 10px 14px 12px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
  }
  nav.tabs button:hover { color: var(--ink); }
  nav.tabs button.active { color: var(--teal-deep, var(--teal)); border-bottom-color: var(--teal); }
  nav.tabs button:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }
  nav.tabs.categories button {
    font-size: 13px;
    padding: 8px 11px 10px;
    white-space: nowrap;
  }
  .nav-badge {
    display: inline-block; background: var(--red); color: #fff; font-size: 10.5px; font-weight: 700;
    border-radius: 10px; padding: 1px 6px; margin-left: 4px; vertical-align: 2px;
  }
  @media (max-width: 640px) {
    nav.tabs.categories button { font-size: 12px; padding: 7px 8px 9px; }
  }
  .nav-more-toggle {
    color: var(--ink-soft);
  }
  .nav-more-toggle.active-parent { color: var(--teal-deep, var(--teal)); border-bottom-color: var(--teal); }
  .nav-more-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    background: var(--surface, #fff);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    padding: 6px;
    display: flex;
    flex-direction: column;
    min-width: 220px;
  }
  #navMoreMenu button {
    text-align: left;
    white-space: nowrap;
    border-bottom: none;
    border-radius: 6px;
    padding: 9px 10px;
  }
  #navMoreMenu button:hover { background: var(--surface-2, #f2f2ee); }
  #navMoreMenu button.active { background: var(--surface-2, #f2f2ee); }
  nav.tabs.subtabs {
    margin: -12px 0 22px;
    border-bottom: none;
    background: var(--surface-2);
    border-radius: 8px;
    padding: 4px;
    gap: 2px;
  }
  nav.tabs.subtabs button {
    font-size: 13px;
    padding: 7px 12px;
    border-radius: 6px;
    border-bottom: none;
  }
  nav.tabs.subtabs button.active {
    background: var(--surface);
    color: var(--teal-deep, var(--teal));
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  }

  section.view { display: none; }
  section.view.active { display: block; }
  .hidden { display: none !important; }

  .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 1px 2px rgba(28,38,36,0.04), 0 6px 18px -12px rgba(28,38,36,0.10);
  }
  .card h2 {
    font-family: var(--font-head);
    font-size: 19px;
    font-weight: 600;
    margin: 0 0 4px;
    letter-spacing: 0.1px;
  }
  .card .sub { color: var(--ink-soft); font-size: 13.5px; margin: 0 0 18px; }

  .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
  @media (max-width: 640px) { .grid2, .grid3 { grid-template-columns: 1fr; } }

  label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 5px; }
  input, select {
    width: 100%;
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: 14.5px;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    color: var(--ink);
  }
  .field { margin-bottom: 14px; }
  .hint { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }

  button.primary {
    appearance: none;
    border: none;
    background: var(--teal);
    color: #fff;
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-weight: 600;
    font-size: 14.5px;
    padding: 11px 20px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(20,63,59,0.10);
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
  }
  button.primary:hover { background: var(--teal-deep, var(--teal)); box-shadow: 0 2px 6px rgba(20,63,59,0.18); }
  button.primary:active { transform: translateY(1px); }
  button.primary:disabled { opacity: 0.5; cursor: default; box-shadow: none; }
  button.ghost {
    appearance: none;
    border: 1px solid var(--border);
    background: none;
    color: var(--ink-soft);
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: 12.5px;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  }
  button.ghost:hover { color: var(--red); border-color: var(--red); }
  .ghost.armed { background: var(--red); border-color: var(--red); color: #fff; }

  /* Quick check */
  .verdict {
    border-radius: 9px;
    padding: 18px 20px;
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .verdict.go { background: var(--green-tint); }
  .verdict.stop { background: var(--red-tint); }
  .verdict.unknown { background: var(--surface-2); }
  .verdict .icon { font-size: 26px; line-height: 1; }
  .verdict .text .big { font-family: var(--font-head); font-weight: 600; font-size: 18px; margin: 0 0 2px; }
  .verdict.go .big { color: var(--green); }
  .verdict.stop .big { color: var(--red); }
  .verdict.unknown .big { color: var(--ink-soft); }
  .verdict .text .small { font-size: 13px; color: var(--ink-soft); }

  .stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
  @media (max-width: 640px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
  .stat { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 13px 15px; }
  .stat .label { font-size: 11.5px; color: var(--ink-soft); font-weight: 600; margin-bottom: 4px; }
  .stat .value { font-size: 19px; font-weight: 600; font-family: var(--font-head); }
  .stat .value.warn { color: var(--red); }
  .stat .value.ok { color: var(--green); }

  /* Table */
  .table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; margin-top: 14px; }
  table { border-collapse: collapse; width: 100%; min-width: 760px; font-size: 13.5px; }
  th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
  th { background: var(--surface-2); font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--ink-soft); font-weight: 600; position: sticky; top: 0; }
  tbody tr { transition: background 0.1s ease; }
  tbody tr:hover td { background: var(--surface-2); }
  tbody tr:last-child td { border-bottom: none; }
  tr.warn-row td { background: var(--amber-tint); }
  tr.stop-row td { background: var(--red-tint); }
  /* Log Afwezigheidssysteem: naam links en "Verwijder" rechts blijven zichtbaar bij horizontaal scrollen */
  #logTableWrap .table-scroll th.stk-l, #logTableWrap .table-scroll td.stk-l { position: sticky; left: 0; z-index: 2; background: #fff; box-shadow: 2px 0 4px rgba(0,0,0,.06); }
  #logTableWrap .table-scroll th.stk-r, #logTableWrap .table-scroll td.stk-r { position: sticky; right: 0; z-index: 2; background: #fff; box-shadow: -2px 0 4px rgba(0,0,0,.06); }
  #logTableWrap .table-scroll th.stk-l, #logTableWrap .table-scroll th.stk-r { background: #eaf1fb; }
  #logTableWrap tr.warn-row td.stk-l, #logTableWrap tr.warn-row td.stk-r { background: var(--amber-tint); }
  #logTableWrap tr.stop-row td.stk-l, #logTableWrap tr.stop-row td.stk-r { background: var(--red-tint); }
  td.num { text-align: right; font-variant-numeric: tabular-nums; }
  select.inline, input.inline {
    font-size: 13px;
    padding: 5px 6px;
    border-radius: 5px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink);
    min-width: 108px;
  }
  .totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
  .total-box { border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; background: var(--surface-2); }
  .total-box .label { font-size: 11px; color: var(--ink-soft); font-weight: 600; }
  .total-box .value { font-size: 18px; font-weight: 600; margin-top: 2px; font-family: var(--font-head); }
  .total-box.grand { background: var(--teal-tint); border-color: var(--teal); }
  .total-box.grand .value { color: var(--teal-deep, var(--teal)); }
  .total-box.amber { background: var(--amber-tint); border-color: var(--amber); }
  .total-box.amber .value { color: var(--amber); }
  .toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .bill-praktijk-block { margin-bottom: 18px; }
  .bill-praktijk-block h3 { font-family: var(--font-head); font-size: 15px; font-weight: 600; margin: 0 0 8px; color: var(--teal-deep, var(--teal)); }
  .bill-grand-total { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
  .bill-grand-total .total-box.grand { flex: 1; }

  .pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
  }
  .pill.green { background: var(--green-tint); color: var(--green); }
  .pill.red { background: var(--red-tint); color: var(--red); }
  .pill.amber { background: var(--amber-tint); color: var(--amber); }
  .pill.neutral { background: var(--surface-2); color: var(--ink-soft); }

  .empty { padding: 34px 20px; text-align: center; color: var(--ink-soft); font-size: 14px; }

  ul.rules { margin: 0; padding-left: 18px; }
  ul.rules li { margin-bottom: 8px; }
  .steps { counter-reset: step; list-style: none; margin: 0; padding: 0; }
  .steps li {
    counter-increment: step;
    position: relative;
    padding: 0 0 16px 34px;
    margin-bottom: 2px;
  }
  .steps li::before {
    content: counter(step);
    position: absolute;
    left: 0; top: 0;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--teal-tint);
    color: var(--teal-deep, var(--teal));
    font-weight: 700;
    font-size: 12.5px;
    display: flex; align-items: center; justify-content: center;
  }
  .steps li:last-child { padding-bottom: 0; }

  .toast {
    position: fixed;
    bottom: 22px; left: 50%; transform: translateX(-50%);
    background: var(--teal-deep, var(--teal));
    color: #fff;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 50;
  }
  .toast.show { opacity: 1; }

  .foot-note { font-size: 12px; color: var(--ink-soft); margin-top: 10px; }

  .welcome-banner {
    background: var(--teal-tint);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 12px 18px;
    margin-bottom: 18px;
    font-size: 14.5px;
    color: var(--ink);
  }
  .welcome-banner strong { color: var(--teal-deep, var(--teal)); }

  .dash-item {
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 14px 16px;
    margin-bottom: 12px;
    background: var(--surface);
  }
  .dash-item.done { background: var(--green-tint); border-color: var(--green); }
  .dash-meta { font-size: 12px; color: var(--ink-soft); margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 6px 10px; }
  .dash-text { font-size: 14.5px; margin: 0 0 10px; white-space: pre-wrap; }
  .dash-attachments { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
  .dash-attachments img { max-width: 160px; max-height: 130px; border-radius: 7px; border: 1px solid var(--border); display: block; }
  .dash-attachments a.file-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; padding: 7px 11px; border: 1px solid var(--border); border-radius: 7px;
    text-decoration: none; color: var(--ink); background: var(--surface-2);
  }
  .dash-attachments a.file-link:hover { border-color: var(--teal); color: var(--teal-deep, var(--teal)); }
  .dash-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .dash-completed-note { font-size: 12.5px; color: var(--green); font-weight: 600; }
  .dash-completed-by { font-size: 12px; color: var(--ink-soft); margin-top: 8px; }
  button.dash-complete {
    appearance: none; border: 1px solid var(--teal); background: var(--surface); color: var(--teal-deep, var(--teal));
    font-family: ui-sans-serif, system-ui, sans-serif; font-weight: 600; font-size: 13px; padding: 7px 13px; border-radius: 7px; cursor: pointer;
  }
  button.dash-complete:hover { background: var(--teal-tint); }
  button.dash-complete.is-done { background: var(--green); border-color: var(--green); color: #fff; }

  .dash-comments { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); }
  .dash-comment-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 7px 0; }
  .dash-comment-naam { font-size: 12.5px; font-weight: 700; color: var(--teal-deep, var(--teal)); margin-right: 8px; }
  .dash-comment-time { font-size: 11px; color: var(--ink-soft); }
  .dash-comment-text { margin: 3px 0 0; font-size: 13.5px; white-space: pre-wrap; }
  .dash-comment-empty { font-size: 12.5px; color: var(--ink-soft); padding: 4px 0; }
  .dash-comment-del { border: none; background: none; color: var(--ink-soft); cursor: pointer; font-size: 12px; padding: 2px 6px; flex: none; }
  .dash-comment-del:hover { color: var(--red); }
  .dash-comment-form { display: flex; gap: 8px; margin-top: 8px; }
  .dash-comment-input {
    flex: 1; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 13.5px; padding: 8px 10px;
    border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--ink);
  }
  button.dash-comment-submit { padding: 8px 14px; font-size: 13px; flex: none; }

  /* In de iOS-app begint de webview al ONDER de statusbalk (contentInset: automatic).
     Dan hoeven we de veilige zone bovenaan niet nog eens op te tellen: dat gaf een lege strook. */
  html.cap-native body::before { display: none !important; }
  html.cap-native .auth-gate { padding-top: 20px !important; }
  html.cap-native #appRoot .wrap, html.cap-native .wrap { padding-top: 14px !important; }

  /* ---------- Auth gate ---------- */
  .auth-gate {
    position: fixed; inset: 0; z-index: 200;
    background: var(--bg);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    padding-top: calc(env(safe-area-inset-top, 0px) + 20px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
    overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .auth-gate > .auth-card { margin: auto; flex: none; }
  html { background: var(--bg); }
  .auth-bg-video {
    display: none;
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
  }
  .auth-bg-overlay {
    position: absolute; inset: 0;
    z-index: 0;
    background: linear-gradient(160deg, #DCEBFF 0%, #F4F8FF 55%, #CFE2FB 100%);
  }
  .auth-card {
    position: relative; z-index: 1;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 40px 34px;
    max-width: 380px; width: 100%;
    text-align: center;
    box-shadow: 0 1px 3px rgba(28,38,36,0.06), 0 24px 48px -20px rgba(28,38,36,0.22);
  }
  .auth-mark { font-size: 32px; margin-bottom: 8px; }
  .auth-card h1 { font-family: var(--font-head); font-size: 23px; font-weight: 600; margin: 0 0 5px; color: var(--teal-deep, var(--teal)); letter-spacing: 0.2px; }
  .auth-sub { color: var(--ink-soft); font-size: 13px; margin: 0 0 24px; letter-spacing: 0.2px; }
  .auth-roles { display: flex; flex-direction: column; gap: 9px; }
  .auth-role-btn {
    display: flex; align-items: center; gap: 12px;
    width: 100%;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--ink);
    padding: 14px 16px;
    border-radius: 10px;
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
  }
  .auth-role-btn:hover { border-color: var(--teal); background: var(--teal-tint); transform: translateY(-1px); }
  .auth-role-icon {
    font-size: 17px;
    width: 34px; height: 34px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface); border-radius: 8px; border: 1px solid var(--border);
  }
  .auth-code-step { text-align: left; margin-top: 4px; }
  .auth-code-step label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
  .auth-code-step input {
    width: 100%; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 15px;
    padding: 10px 12px; border: 1px solid var(--border); border-radius: 7px;
    background: var(--surface); color: var(--ink);
  }
  .auth-error { color: var(--red); font-size: 12.5px; margin: 10px 0 0; text-align: center; }
  .auth-code-step button.ghost { width: 100%; }
  @media (max-width: 480px) {
    .auth-card { padding: 26px 20px; border-radius: 14px; max-width: 340px; }
    .auth-mark { font-size: 26px; margin-bottom: 6px; }
    .auth-card h1 { font-size: 19px; }
    .auth-sub { font-size: 12px; margin-bottom: 16px; }
    .auth-roles { gap: 7px; }
    .auth-role-btn { padding: 10px 12px; font-size: 13px; gap: 9px; border-radius: 9px; }
    .auth-role-icon { font-size: 14px; width: 27px; height: 27px; border-radius: 7px; }
  }
  .auth-logout {
    font-size: 12px; color: var(--ink-soft); background: none; border: 1px solid var(--border);
    border-radius: 6px; padding: 5px 10px; cursor: pointer; white-space: nowrap;
  }
  .auth-logout:hover { color: var(--red); border-color: var(--red); }

  td.paid-no, td.paid-no-date { color: var(--red); font-weight: 600; }
  td.paid-yes-flag { color: var(--green); font-weight: 600; }
  td.attest-open { color: var(--amber); font-weight: 600; }
  td.attest-klaar { color: var(--green); font-weight: 600; }

  /* ---------- Klachtenopvolging (scoped, namespaced vars/selectors) ---------- */
  .ko-root {
    --ko-bg: var(--surface-2);
    --ko-surface: var(--surface);
    --ko-surface-2: var(--surface-2);
    --ko-border: var(--border);
    --ko-text: var(--ink);
    --ko-text-muted: var(--ink-soft);
    --ko-primary: var(--teal);
    --ko-primary-dark: var(--teal-deep, var(--teal));
    --ko-primary-tint: var(--teal-tint);
    --ko-unresolved: var(--amber);
    --ko-unresolved-bg: var(--amber-tint);
    --ko-resolved: var(--green);
    --ko-resolved-bg: var(--green-tint);
    --ko-danger: var(--red);
    --ko-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.06);
    --ko-radius: 10px;
    display: block;
    font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.45;
    background: var(--ko-bg);
    color: var(--ko-text);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--ko-border);
  }

  .ko-root a { color: var(--ko-primary-dark); }
  .ko-root .app { display: flex; min-height: 540px; }
  .ko-root .sidebar {
    width: 250px; flex-shrink: 0;
    background: var(--ko-surface);
    border-right: 1px solid var(--ko-border);
    padding: 24px 20px;
    display: flex; flex-direction: column; gap: 28px;
  }
  .ko-root .brand { display: flex; align-items: center; gap: 10px; }
  .ko-root .brand-mark {
    width: 34px; height: 34px; border-radius: 8px;
    background: var(--ko-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 16px;
  }
  .ko-root .brand-text { font-weight: 600; font-size: 15px; line-height: 1.2; }
  .ko-root .brand-text span { display:block; font-weight: 400; font-size: 12px; color: var(--ko-text-muted); }
  .ko-root .filter-group { display: flex; flex-direction: column; gap: 8px; }
  .ko-root .filter-label { font-size: 12px; font-weight: 600; color: var(--ko-text-muted); margin-bottom: 2px; }
  .ko-root .chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
  .ko-root .chip {
    border: 1px solid var(--ko-border); background: var(--ko-surface); color: var(--ko-text);
    padding: 6px 12px; border-radius: 999px; font-size: 13px; cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
  }
  .ko-root .chip:hover { border-color: var(--ko-primary); }
  .ko-root .chip.active { background: var(--ko-primary); border-color: var(--ko-primary); color: #fff; }
  .ko-root .stat-block { background: var(--ko-surface-2); border-radius: var(--ko-radius); padding: 14px 16px; margin-top: auto; }
  .ko-root .stat-num { font-size: 26px; font-weight: 700; color: var(--ko-primary-dark); line-height: 1; }
  .ko-root .stat-label { font-size: 12px; color: var(--ko-text-muted); margin-top: 4px; }
  .ko-root .main { flex: 1; padding: 28px 32px; min-width: 0; }
  .ko-root .main-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
  .ko-root .main-header h1 { font-size: 21px; margin: 0; font-weight: 600; }
  .ko-root .main-header p { margin: 2px 0 0; color: var(--ko-text-muted); font-size: 13px; }
  .ko-root .btn { border: none; border-radius: 8px; padding: 10px 16px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: filter .12s ease, background .12s ease; }
  .ko-root .btn-primary { background: var(--ko-primary); color: #fff; }
  .ko-root .btn-primary:hover { filter: brightness(1.08); }
  .ko-root .btn-secondary { background: var(--ko-surface-2); color: var(--ko-text); }
  .ko-root .btn-secondary:hover { filter: brightness(0.97); }
  .ko-root .btn-danger { background: transparent; color: var(--ko-danger); border: 1px solid var(--ko-danger); }
  .ko-root .btn-danger:hover { background: var(--ko-danger); color: #fff; }
  .ko-root .btn-ghost { background: transparent; color: var(--ko-primary-dark); padding: 6px 10px; }
  .ko-root .btn:disabled { opacity: .5; cursor: not-allowed; }
  .ko-root .search-row { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
  .ko-root .search-input {
    flex: 1; min-width: 200px; padding: 10px 14px; border: 1px solid var(--ko-border);
    border-radius: 8px; background: var(--ko-surface); color: var(--ko-text); font-size: 14px; font-family: inherit;
  }
  .ko-root .search-input:focus, .ko-root select:focus, .ko-root input:focus, .ko-root textarea:focus { outline: 2px solid var(--ko-primary); outline-offset: 1px; }
  .ko-root .list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
  .ko-root .month-header { font-size: 12.5px; font-weight: 700; color: var(--ko-text-muted); padding: 10px 4px 2px; text-transform: capitalize; }
  .ko-root .month-header:first-child { padding-top: 0; }
  .ko-root .row-card {
    background: var(--ko-surface); border: 1px solid var(--ko-border); border-left: 4px solid var(--ko-border);
    border-radius: var(--ko-radius); padding: 14px 16px; display: grid;
    grid-template-columns: 1.3fr 1fr 1.6fr 0.9fr 1fr auto; gap: 14px; align-items: center; cursor: pointer;
    transition: box-shadow .12s ease, transform .12s ease;
  }
  .ko-root .row-card:hover { box-shadow: var(--ko-shadow); }
  .ko-root .row-card.resolved { border-left-color: var(--ko-resolved); }
  .ko-root .row-card.unresolved { border-left-color: var(--ko-unresolved); }
  .ko-root .rc-name { font-weight: 600; }
  .ko-root .rc-sub { font-size: 12.5px; color: var(--ko-text-muted); margin-top: 2px; }
  .ko-root .rc-praktijk {
    font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
    background: var(--ko-primary-tint); color: var(--ko-primary-dark); display: inline-block; width: fit-content;
  }
  .ko-root .rc-klacht { color: var(--ko-text); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .ko-root .rc-manager { font-size: 13px; }
  .ko-root .rc-status { font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; text-align: center; }
  .ko-root .rc-status.ja { background: var(--ko-resolved-bg); color: var(--ko-resolved); }
  .ko-root .rc-status.nee { background: var(--ko-unresolved-bg); color: var(--ko-unresolved); }
  .ko-root .rc-attach { font-size: 12px; color: var(--ko-text-muted); display: flex; align-items: center; gap: 4px; }
  .ko-root .empty-state { text-align: center; padding: 60px 20px; color: var(--ko-text-muted); background: var(--ko-surface); border: 1px dashed var(--ko-border); border-radius: var(--ko-radius); }
  .ko-root .empty-state h3 { color: var(--ko-text); margin-bottom: 6px; }
  .ko-root .overlay { position: fixed; inset: 0; background: rgba(10, 20, 20, 0.35); display: none; z-index: 40; }
  .ko-root .overlay.open { display: block; }
  .ko-root .drawer {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100vw);
    background: var(--ko-surface); box-shadow: -8px 0 24px rgba(0,0,0,0.15);
    transform: translateX(100%); transition: transform .2s ease; z-index: 50;
    display: flex; flex-direction: column; overflow: hidden;
  }
  .ko-root .drawer.open { transform: translateX(0); }
  .ko-root .drawer-header { padding: 18px 22px; border-bottom: 1px solid var(--ko-border); display: flex; align-items: center; justify-content: space-between; }
  .ko-root .drawer-header h2 { margin: 0; font-size: 17px; }
  .ko-root .drawer-body { padding: 20px 22px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 16px; }
  .ko-root .drawer-footer { padding: 16px 22px; border-top: 1px solid var(--ko-border); display: flex; justify-content: space-between; gap: 10px; }
  .ko-root .field { display: flex; flex-direction: column; gap: 5px; }
  .ko-root .field label { font-size: 12.5px; font-weight: 600; color: var(--ko-text-muted); }
  .ko-root .field input, .ko-root .field select, .ko-root .field textarea {
    padding: 9px 11px; border: 1px solid var(--ko-border); border-radius: 8px;
    background: var(--ko-surface); color: var(--ko-text); font-size: 14px; font-family: inherit;
  }
  .ko-root .field textarea { resize: vertical; min-height: 60px; }
  .ko-root .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .ko-root .segmented { display: flex; border: 1px solid var(--ko-border); border-radius: 8px; overflow: hidden; width: fit-content; }
  .ko-root .segmented button { border: none; background: var(--ko-surface); color: var(--ko-text); padding: 8px 18px; font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
  .ko-root .segmented button + button { border-left: 1px solid var(--ko-border); }
  .ko-root .segmented button.active.ja { background: var(--ko-resolved-bg); color: var(--ko-resolved); }
  .ko-root .segmented button.active.nee { background: var(--ko-unresolved-bg); color: var(--ko-unresolved); }
  .ko-root .section-title { font-size: 13px; font-weight: 700; color: var(--ko-primary-dark); margin: 4px 0 -6px; }
  .ko-root .attach-list { display: flex; flex-direction: column; gap: 8px; }
  .ko-root .attach-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--ko-border); border-radius: 8px; background: var(--ko-surface-2); }
  .ko-root .attach-icon { width: 30px; height: 30px; border-radius: 6px; background: var(--ko-primary-tint); color: var(--ko-primary-dark); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
  .ko-root .attach-meta { flex: 1; min-width: 0; }
  .ko-root .attach-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ko-root .attach-sub { font-size: 11.5px; color: var(--ko-text-muted); }
  .ko-root .attach-actions { display: flex; gap: 4px; }
  .ko-root .icon-btn { border: none; background: transparent; cursor: pointer; color: var(--ko-text-muted); padding: 4px 6px; border-radius: 6px; font-size: 13px; }
  .ko-root .icon-btn:hover { background: var(--ko-border); color: var(--ko-text); }
  .ko-root .upload-zone { border: 1.5px dashed var(--ko-border); border-radius: 10px; padding: 18px; text-align: center; color: var(--ko-text-muted); font-size: 13px; cursor: pointer; transition: border-color .12s ease, background .12s ease; }
  .ko-root .upload-zone:hover, .ko-root .upload-zone.dragover { border-color: var(--ko-primary); background: var(--ko-primary-tint); }
  .ko-root .upload-hint { font-size: 11.5px; margin-top: 4px; }
  .ko-root .upload-status { font-size: 12.5px; color: var(--ko-primary-dark); min-height: 16px; }
  .ko-root .upload-error { color: var(--ko-danger); font-size: 12.5px; }
  .ko-root .ko-toast {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    background: var(--ko-text); color: var(--ko-bg);
    padding: 10px 18px; border-radius: 8px; font-size: 13.5px;
    box-shadow: var(--ko-shadow); z-index: 100; opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  .ko-root .ko-toast.show { opacity: 1; }
  @media (max-width: 860px) {
    .ko-root .app { flex-direction: column; }
    .ko-root .sidebar { width: 100%; flex-direction: row; align-items: center; overflow-x: auto; padding: 14px 16px; gap: 16px; }
    .ko-root .stat-block { display:none; }
    .ko-root .filter-group { flex-direction: row; align-items: center; gap: 8px; }
    .ko-root .main { padding: 18px; }
    .ko-root .row-card { grid-template-columns: 1fr; }
    .ko-root .drawer { width: 100%; }
    .ko-root .field-row { grid-template-columns: 1fr; }
  }

  /* ---------- Kasstaat (scoped, namespaced vars/selectors) ---------- */
  .ks-root {
    --ks-paper: var(--surface-2);
    --ks-surface: var(--surface);
    --ks-ink: var(--ink);
    --ks-muted: var(--ink-soft);
    --ks-line: var(--border);
    --ks-line-strong: var(--border);
    --ks-teal: var(--teal);
    --ks-teal-dark: var(--teal-deep, var(--teal));
    --ks-teal-tint: var(--teal-tint);
    --ks-amber: var(--amber);
    --ks-amber-tint: var(--amber-tint);
    --ks-danger: var(--red);
    --ks-danger-tint: var(--red-tint);
    --ks-focus: var(--teal);
    display: block;
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.45;
    background: var(--ks-paper);
    color: var(--ks-ink);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--ks-line);
  }
  .ks-root .wrap { max-width: none; margin: 0 auto; padding: 18px 14px 40px; }
  .ks-root header.top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
  .ks-root header.top h1 { font-size: 19px; font-weight: 700; margin: 0; letter-spacing: -0.01em; font-family: ui-sans-serif, system-ui, sans-serif; }
  .ks-root header.top .sub { color: var(--ks-muted); font-size: 12.5px; }
  .ks-root .card { background: var(--ks-surface); border: 1px solid var(--ks-line); border-radius: 6px; padding: 16px; margin-bottom: 14px; }
  .ks-root .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px; }
  .ks-root .field-row.field-row-3 { grid-template-columns: 1fr 1fr 1fr; }
  .ks-root label { display: block; font-size: 11.5px; color: var(--ks-muted); font-weight: 500; margin-bottom: 4px; }
  .ks-root .ks-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; align-items: center; }
  .ks-root .ks-tab {
    display: flex; align-items: center; gap: 8px;
    border: 1px solid var(--ks-line-strong); background: var(--ks-surface); color: var(--ks-muted);
    padding: 7px 8px 7px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--font-body);
  }
  .ks-root .ks-tab.active { background: var(--ks-teal-tint); color: var(--ks-teal-dark); border-color: var(--ks-teal); }
  .ks-root .ks-tab .ks-tab-close { border: none; background: none; color: inherit; opacity: 0.6; font-size: 12px; cursor: pointer; padding: 2px 4px; border-radius: 50%; }
  .ks-root .ks-tab .ks-tab-close:hover { opacity: 1; background: rgba(0,0,0,0.08); }
  .ks-root .ks-tab-add {
    border: 1px dashed var(--ks-line-strong); background: none; color: var(--ks-muted);
    padding: 7px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--font-body);
  }
  .ks-root .ks-tab-add:hover { border-color: var(--ks-teal); color: var(--ks-teal); }
  .ks-root .segmented { display: flex; border: 1px solid var(--ks-line-strong); border-radius: 6px; overflow: hidden; width: fit-content; }
  .ks-root .segmented button { border: none; background: var(--ks-surface); color: var(--ks-ink); padding: 9px 18px; font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: ui-sans-serif, system-ui, sans-serif; }
  .ks-root .segmented button + button { border-left: 1px solid var(--ks-line-strong); }
  .ks-root .segmented button.active.correct { background: var(--green-tint); color: var(--green); }
  .ks-root .segmented button.active.fout { background: var(--red-tint); color: var(--red); }
  .ks-root .bc-history-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--ks-line); font-size: 13px; }
  .ks-root .bc-history-item:last-child { border-bottom: none; }
  .ks-root .bc-pill { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 12px; }
  .ks-root .bc-pill.correct { background: var(--green-tint); color: var(--green); }
  .ks-root .bc-pill.fout { background: var(--red-tint); color: var(--red); }
  .ks-root .bc-praktijk-block { margin-bottom: 16px; }
  .ks-root .bc-praktijk-block h3 { font-family: var(--font-head); font-size: 14.5px; font-weight: 600; margin: 0 0 8px; color: var(--ks-teal-dark); }
  .ks-root .bc-grand-total { margin-bottom: 14px; }
  .ks-root input[type=text], .ks-root input[type=date], .ks-root input[type=number], .ks-root select {
    width: 100%; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 15px; padding: 9px 10px;
    border: 1px solid var(--ks-line-strong); border-radius: 4px; background: var(--ks-surface); color: var(--ks-ink);
  }
  .ks-root input:focus, .ks-root select:focus, .ks-root button:focus-visible { outline: 2px solid var(--ks-focus); outline-offset: 1px; }
  .ks-root .status-pill { display: inline-block; font-size: 11.5px; padding: 2px 9px; border-radius: 20px; font-weight: 600; border: 1px solid var(--ks-line-strong); color: var(--ks-muted); }
  .ks-root .status-pill.signed { color: var(--ks-teal-dark); background: var(--ks-teal-tint); border-color: var(--ks-teal); }
  .ks-root .table-scroll { overflow-x: auto; border: 1px solid var(--ks-line); border-radius: 6px; margin-top: 12px; }
  /* Compacter gemaakt (kleinere lettergrootte/padding/breedtes) zodat meer kolommen van de
     Kasstaat-tabel (Patiënten & Betalingen) in één scherm passen zonder opzij te moeten
     scrollen — was eerder te breed om alles ineens te zien. */
  .ks-root table.rows { width: 100%; border-collapse: collapse; min-width: 520px; font-size: 12.5px; }
  .ks-root table.rows th { text-align: left; font-size: 10px; font-weight: 600; color: var(--ks-muted); padding: 6px 5px; border-bottom: 1px solid var(--ks-line-strong); background: var(--ks-teal-tint); white-space: nowrap; }
  .ks-root table.rows td { padding: 3px 4px; border-bottom: 1px solid var(--ks-line); vertical-align: top; }
  .ks-root table.rows td.naam, .ks-root table.rows td.behandeling, .ks-root table.rows td.bon { padding-top: 6px; }
  .ks-root table.rows tr:last-child td { border-bottom: none; }
  .ks-root table.rows input[type=text], .ks-root table.rows input[type=number], .ks-root table.rows select { padding: 4px 5px; font-size: 12px; min-width: 68px; }
  .ks-root table.rows td.naam input { min-width: 105px; }
  .ks-root table.rows td.behandeling input { min-width: 85px; }
  .ks-root table.rows td.bon input { min-width: 45px; }
  .ks-root table.rows td.bedrag input { min-width: 62px; text-align: right; }
  .ks-root table.rows td.type select { min-width: 55px; }
  .history-item .amt { white-space: nowrap; }
  .history-item > div:first-child { flex-wrap: wrap; row-gap: 8px; }
  .history-item > div:first-child > div:first-child { flex: 1 1 180px; min-width: 0; }
  .history-item > div:first-child > div:last-child { flex: 0 0 auto; margin-left: auto; }
  /* Eerdere kasstaten: bedrag nooit meer verticaal */
  @media (max-width: 700px) {
    .ks-root table.rows thead th:first-child, .ks-root table.rows td.naam { position: sticky; left: 0; z-index: 3; width: 132px; min-width: 132px; max-width: 132px; box-sizing: border-box; background: #fff; box-shadow: 2px 0 5px rgba(0,0,0,.12); }
    .ks-root table.rows thead th:first-child { z-index: 4; background: #eaf1fb; }
    .ks-root table.rows td.naam input, .ks-root table.rows td.naam select { min-width: 0 !important; width: 100% !important; box-sizing: border-box; }
    .ks-root table.rows td.naam input { min-height: 40px; }
  }

  /* Telefoon: de kolom "Patiënt naam" blijft links vastzitten terwijl je opzij scrolt, zodat je altijd
     ziet bij wie het bedrag hoort. (Verwijder dit blok om terug te gaan.) */
  @media (max-width: 700px) {
    .ks-root table.rows thead th:first-child, .ks-root table.rows td.naam { position: sticky; left: 0; z-index: 3; width: 132px; min-width: 132px; max-width: 132px; box-sizing: border-box; background: #fff; box-shadow: 2px 0 5px rgba(0,0,0,.12); }
    .ks-root table.rows thead th:first-child { z-index: 4; background: var(--ks-teal-tint, #eaf1fb); }
    .ks-root table.rows td.naam input, .ks-root table.rows td.naam select { min-width: 0 !important; width: 100% !important; box-sizing: border-box; }
    .ks-root table.rows td.naam input { min-height: 40px; }
  }
  .ks-root .rdb-hint { font-size: 10.5px; color: var(--ks-amber); margin-top: 2px; }
  .ks-root .row-remove { border: none; background: none; color: var(--ks-danger); cursor: pointer; font-size: 17px; padding: 4px 6px; line-height: 1; }
  .ks-root .row-empty { color: var(--ks-muted); font-size: 13px; padding: 16px; text-align: center; }
  .ks-root .toolbar { display: flex; gap: 8px; margin: 10px 0 4px; flex-wrap: wrap; }
  .ks-root button { font-family: ui-sans-serif, system-ui, sans-serif; font-weight: 600; font-size: 13.5px; padding: 9px 14px; border-radius: 5px; border: 1px solid var(--ks-line-strong); background: var(--ks-surface); color: var(--ks-ink); cursor: pointer; }
  .ks-root button.primary { background: var(--ks-teal); border-color: var(--ks-teal); color: #fff; }
  .ks-root button.primary:hover { background: var(--ks-teal-dark); border-color: var(--ks-teal-dark); }
  .ks-root button.ghost { background: transparent; }
  .ks-root button:disabled { opacity: 0.45; cursor: not-allowed; }
  .ks-root button.small { padding: 6px 10px; font-size: 12.5px; }
  .ks-root .totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 14px; }
  .ks-root .total-box { border: 1px solid var(--ks-line); border-radius: 6px; padding: 10px 12px; background: var(--ks-paper); }
  .ks-root .total-box .label { font-size: 11px; color: var(--ks-muted); font-weight: 600; }
  .ks-root .total-box .value { font-size: 18px; font-weight: 600; margin-top: 2px; }
  .ks-root .total-box.grand { background: var(--ks-teal-tint); border-color: var(--ks-teal); }
  .ks-root .total-box.grand .value { color: var(--ks-teal-dark); }
  .ks-root .total-box.amber { background: var(--ks-amber-tint); border-color: var(--ks-amber); }
  .ks-root .total-box.amber .value { color: var(--ks-amber); }
  .ks-root .sig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .ks-root .sig-block { display: flex; flex-direction: column; gap: 6px; }
  .ks-root .sig-canvas-wrap { border: 1px dashed var(--ks-line-strong); border-radius: 6px; background: var(--ks-surface); touch-action: none; position: relative; }
  .ks-root canvas.sigpad { display: block; width: 100%; height: 110px; touch-action: none; border-radius: 6px; }
  .ks-root .sig-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 46px; }
  .ks-root .sig-label { font-size: 12.5px; font-weight: 600; }
  .ks-root .history-item { display: flex; justify-content: space-between; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--ks-line); cursor: pointer; gap: 8px; }
  .ks-root .history-item:last-child { border-bottom: none; }
  .ks-root .history-item:hover { background: var(--ks-teal-tint); }
  .ks-root .history-item .who { font-weight: 600; font-size: 13.5px; }
  .ks-root .history-item .meta { font-size: 11.5px; color: var(--ks-muted); }
  .ks-root .history-item .amt { font-size: 13.5px; }
  .ks-root .note { font-size: 12px; color: var(--ks-muted); margin-top: 6px; }
  .ks-root .banner { font-size: 13px; padding: 9px 12px; border-radius: 5px; margin-bottom: 12px; border: 1px solid var(--ks-line-strong); }
  .ks-root .banner.warn { background: var(--ks-amber-tint); border-color: var(--ks-amber); color: var(--ks-amber); }
  .ks-root .banner.err { background: var(--ks-danger-tint); border-color: var(--ks-danger); color: var(--ks-danger); }
  .ks-root .banner.ok { background: var(--ks-teal-tint); border-color: var(--ks-teal); color: var(--ks-teal-dark); }
  .ks-root .hidden { display: none !important; }
  .ks-root section h2, .ks-root h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ks-muted); margin: 0 0 10px; font-weight: 600; }
  .ks-root .attach-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--ks-line); border-radius: 8px; background: var(--ks-paper); }
  .ks-root .attach-icon { width: 30px; height: 30px; border-radius: 6px; background: var(--ks-teal-tint); color: var(--ks-teal-dark); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
  .ks-root .attach-meta { flex: 1; min-width: 0; }
  .ks-root .attach-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ks-root .attach-sub { font-size: 11.5px; color: var(--ks-muted); }
  .ks-root .attach-actions { display: flex; gap: 4px; }
  .ks-root .icon-btn { border: none; background: transparent; cursor: pointer; color: var(--ks-muted); padding: 4px 6px; border-radius: 6px; font-size: 13px; text-decoration: none; }
  .ks-root .icon-btn:hover { background: var(--ks-line); color: var(--ks-ink); }
  @media (max-width: 520px) {
    .ks-root .field-row { grid-template-columns: 1fr; }
    .ks-root .totals { grid-template-columns: 1fr 1fr; }
    .ks-root .sig-grid { grid-template-columns: 1fr; }
  }
  @media print {
    .ks-root { background: #fff; }
    .ks-root .no-print { display: none !important; }
    .ks-root .card { border: 1px solid #999; box-shadow: none; }
  }

  /* ---------- Facturenregister (scoped; exact colors/typography from the source artifact) ---------- */
  .fr-root {
    --fr-paper: #EAF3FF;
    --fr-paper-alt: #DCEBFF;
    --fr-card: #FFFFFF;
    --fr-ink: #14233B;
    --fr-ink-soft: #5A6B82;
    --fr-line: #C9DEF8;
    --fr-teal: #2F7BE8;
    --fr-teal-deep: #1D4FA8;
    --fr-amber: #A8622A;
    --fr-amber-bg: #FBEEE1;
    --fr-green: #2E6B4F;
    --fr-green-bg: #E6F1EA;
    --fr-red: #A6373A;
    --fr-focus: #0E5C55;
    display: block;
    background: var(--fr-paper);
    color: var(--fr-ink);
    font-family: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
    -webkit-font-smoothing: antialiased;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--fr-line);
  }
  :root[data-theme="dark"] .fr-root {
    --fr-paper: #181A16;
    --fr-paper-alt: #20221C;
    --fr-card: #21231D;
    --fr-ink: #EDEFE7;
    --fr-ink-soft: #9CA091;
    --fr-line: #3A3D34;
    --fr-teal: #5FCABF;
    --fr-teal-deep: #8FE0D6;
    --fr-amber: #E3A374;
    --fr-amber-bg: #3A2B1C;
    --fr-green: #8FCBAA;
    --fr-green-bg: #1E332A;
    --fr-red: #E48A8C;
  }

  .fr-root .wrap { max-width: 960px; margin: 0 auto; padding: 28px 20px 80px; }
  #view-overdracht .ks-root { max-width: 960px; margin: 0 auto; }
  #view-overdracht .ks-root .wrap { max-width: none; margin: 0; }

  .fr-root header {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px;
    border-bottom: 2px solid var(--fr-ink); padding-bottom: 14px; margin-bottom: 6px;
  }
  .fr-root h1 { font-size: 1.7rem; font-weight: 600; margin: 0; letter-spacing: 0.01em; }
  .fr-root .tagline {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem; color: var(--fr-ink-soft); text-transform: uppercase; letter-spacing: 0.08em;
  }

  .fr-root .tabs { display: flex; gap: 6px; margin: 18px 0 0; flex-wrap: wrap; }
  .fr-root .tab {
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 0.95rem; font-weight: 600; padding: 10px 20px 9px;
    border: 1px solid var(--fr-line); border-bottom: none; border-radius: 8px 8px 0 0;
    background: var(--fr-paper-alt); color: var(--fr-ink-soft); cursor: pointer; position: relative; top: 1px;
  }
  .fr-root .tab.active { background: var(--fr-card); color: var(--fr-teal-deep); border-color: var(--fr-ink); border-bottom: 1px solid var(--fr-card); }
  .fr-root .panel { background: var(--fr-card); border: 1px solid var(--fr-ink); border-radius: 0 8px 8px 8px; padding: 22px 22px 8px; }

  .fr-root .subtabs {
    display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--fr-line); padding-bottom: 0;
    font-family: ui-sans-serif, system-ui, sans-serif; flex-wrap: wrap;
  }
  .fr-root .subtab {
    font-size: 0.85rem; font-weight: 600; padding: 9px 4px 10px; margin-right: 18px;
    background: none; border: none; color: var(--fr-ink-soft); cursor: pointer;
    border-bottom: 2px solid transparent;
  }
  .fr-root .subtab.active { color: var(--fr-teal); border-bottom-color: var(--fr-teal); }
  .plan-chip { position: relative; transition: box-shadow .12s; }
  .plan-chip:hover { box-shadow: 0 2px 8px rgba(0,0,0,.18); z-index: 3; }
  .plan-chip .pc-act { display: none; position: absolute; top: 2px; right: 2px; gap: 3px; }
  .plan-chip:hover .pc-act { display: flex; }
  .plan-chip .pc-act span { background: rgba(255,255,255,.92); border: 1px solid rgba(0,0,0,.15); border-radius: 5px; padding: 0 4px; font-size: 11px; line-height: 16px; cursor: pointer; color: #1c2624; }
  .plan-chip .pc-act span:hover { background: #fff; }
  @media (max-width: 640px) {
    .fr-root .wrap { padding: 14px 12px 80px; }
    .fr-root h1 { font-size: 1.35rem; }
    .fr-root header { padding-bottom: 10px; gap: 2px; }
    .fr-root .tagline { font-size: 0.62rem; letter-spacing: 0.04em; }
    .fr-root .tabs { display: flex; flex-wrap: nowrap; gap: 6px; margin-top: 12px; }
    .fr-root .tab { flex: 1 1 0; min-width: 0; padding: 9px 4px 8px; font-size: 0.82rem; text-align: center; }
    .fr-root .panel { padding: 14px 12px 8px; border-radius: 8px; }
    /* fr-tab-los: op de telefoon staat de praktijk-knop los van het kader eronder (geen dubbele rand) */
    .fr-root .tab { border-bottom: 1px solid var(--fr-line); border-radius: 8px; top: 0; margin-bottom: 10px; }
    .fr-root .tab.active { border-bottom: 1px solid var(--fr-ink); }
    .fr-root .subtabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border-bottom: none; margin-bottom: 14px; }
    .fr-root .subtab { margin: 0; padding: 10px 6px; border: 1px solid var(--fr-line); border-radius: 8px; background: var(--fr-paper-alt); font-size: 0.82rem; text-align: center; }
    .fr-root .subtab.active { background: var(--fr-teal); color: #fff; border-color: var(--fr-teal); }
  }

  .fr-root .summary {
    display: flex; flex-wrap: wrap; gap: 28px; padding-bottom: 18px; margin-bottom: 16px;
    border-bottom: 1px solid var(--fr-line); font-family: ui-sans-serif, system-ui, sans-serif;
  }
  .fr-root .stat .label { font-size: 0.68rem; color: var(--fr-ink-soft); text-transform: uppercase; letter-spacing: 0.07em; }
  .fr-root .stat .value { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.25rem; font-weight: 600; margin-top: 2px; }
  .fr-root .stat.negative .value { color: var(--fr-red); }

  .fr-root .toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin-bottom: 14px; font-family: ui-sans-serif, system-ui, sans-serif;
  }
  .fr-root select {
    font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.85rem; padding: 6px 8px;
    border: 1px solid var(--fr-line); border-radius: 6px; background: var(--fr-card); color: var(--fr-ink);
  }
  .fr-root .add-btn {
    font-family: ui-sans-serif, system-ui, sans-serif; font-weight: 600; font-size: 0.9rem;
    background: var(--fr-teal); color: var(--fr-paper); border: none; border-radius: 7px; padding: 11px 18px;
    cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  }
  .fr-root .add-btn:hover { background: var(--fr-teal-deep); }
  .fr-root .add-btn:disabled { opacity: 0.5; cursor: default; }
  .fr-root .add-btn svg { width: 16px; height: 16px; }
  .fr-root .add-btn.ghost { background: none; color: var(--fr-teal); border: 1px solid var(--fr-teal); }

  .fr-root .rows { border-top: 1px solid var(--fr-line); margin-top: 14px; }
  .fr-root .row {
    display: grid; grid-template-columns: 52px 1.4fr 1fr 100px 120px 128px 32px; gap: 12px; align-items: center;
    padding: 12px 0; border-bottom: 1px solid var(--fr-line); font-family: ui-sans-serif, system-ui, sans-serif;
  }
  .fr-root .row.staff-row { grid-template-columns: 52px 1.4fr 100px 100px 128px 32px; }
  @media (max-width: 760px) {
    .fr-root .row {
      grid-template-columns: 44px 1fr auto;
      grid-template-areas: "thumb vendor del" "thumb cat del" "thumb date del" "thumb amount del" "thumb status del";
      row-gap: 4px; padding: 14px 0;
    }
    .fr-root .row .thumb { grid-area: thumb; }
    .fr-root .row .f-vendor { grid-area: vendor; }
    .fr-root .row .f-cat { grid-area: cat; }
    .fr-root .row .f-date { grid-area: date; }
    .fr-root .row .f-amount { grid-area: amount; }
    .fr-root .row .f-status { grid-area: status; }
    .fr-root .row .f-del { grid-area: del; align-self: center; }
    .fr-root .row.staff-row { grid-template-areas: "thumb vendor del" "thumb cat del" "thumb amount del" "thumb status del"; }
  }
  .fr-root .thumb {
    width: 44px; height: 44px; border-radius: 6px; object-fit: cover; border: 1px solid var(--fr-line);
    background: var(--fr-paper-alt); cursor: zoom-in; display: flex; align-items: center; justify-content: center;
    color: var(--fr-ink-soft);
  }
  .fr-root .thumb svg { width: 18px; height: 18px; }
  .fr-root .thumb.clickable { cursor: pointer; }
  .fr-root .row input, .fr-root .row select {
    width: 100%; border: 1px solid transparent; background: transparent; color: var(--fr-ink); font-family: inherit;
    font-size: 0.88rem; padding: 5px 6px; border-radius: 5px;
  }
  .fr-root .row input:hover, .fr-root .row select:hover { border-color: var(--fr-line); }
  .fr-root .row input:focus, .fr-root .row select:focus { outline: none; border-color: var(--fr-focus); background: var(--fr-paper-alt); }
  .fr-root .f-amount input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-align: right; font-weight: 600; }
  .fr-root .f-date input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.82rem; }

  .fr-root .status-btn {
    display: flex; align-items: center; gap: 6px; justify-content: center; font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: 0.78rem; font-weight: 600; padding: 7px 10px; border-radius: 16px; border: 1px solid transparent;
    cursor: pointer; width: 100%;
  }
  .fr-root .status-btn.paid { background: var(--fr-green-bg); color: var(--fr-green); }
  .fr-root .status-btn.unpaid { background: var(--fr-amber-bg); color: var(--fr-amber); }
  .fr-root .status-btn svg { width: 13px; height: 13px; }

  .fr-root .photo-btn {
    border: none; background: none; color: var(--fr-ink-soft); cursor: pointer; padding: 6px; border-radius: 6px; display: flex;
  }
  .fr-root .photo-btn:hover { color: var(--fr-teal); background: var(--fr-paper-alt); }
  .fr-root .photo-btn svg { width: 16px; height: 16px; }

  .fr-root .del-btn { border: none; background: none; color: var(--fr-ink-soft); cursor: pointer; padding: 6px; border-radius: 6px; display: flex; transition: background 0.15s, color 0.15s; }
  .fr-root .del-btn:hover { color: var(--fr-red); background: var(--fr-paper-alt); }
  .fr-root .del-btn.confirming { background: var(--fr-red); color: #fff; }
  .fr-root .del-btn svg { width: 16px; height: 16px; }

  .fr-root .reading {
    font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.82rem; color: var(--fr-teal);
    display: flex; align-items: center; gap: 6px;
  }
  .fr-root .reading .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fr-teal); animation: frPulse 1.1s ease-in-out infinite; }
  @keyframes frPulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

  .fr-root .empty { font-family: ui-sans-serif, system-ui, sans-serif; color: var(--fr-ink-soft); font-size: 0.9rem; padding: 36px 0; text-align: center; }

  .fr-root .note { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.76rem; color: var(--fr-ink-soft); margin: 18px 0 6px; line-height: 1.5; }

  .fr-root .banner {
    font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.82rem; background: var(--fr-amber-bg); color: var(--fr-amber);
    border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; display: none;
  }
  .fr-root .banner.show { display: block; }

  .fr-root .lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.75); display: none; align-items: center; justify-content: center; z-index: 150; padding: 24px; }
  .fr-root .lightbox.show { display: flex; }
  .fr-root .lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }

  .fr-root .overview-row {
    display: grid; grid-template-columns: 90px 1fr 1fr 1fr 110px; gap: 12px; align-items: center;
    padding: 10px 0; border-bottom: 1px solid var(--fr-line); font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: 0.86rem;
  }
  .fr-root .overview-row.head { font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fr-ink-soft); }
  .fr-root .overview-row .num { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-align: right; }
  .fr-root .overview-row.current { background: rgba(201,162,39,0.12); border-radius: 6px; }
  .fr-root .overview-row .net.positive { color: var(--fr-green); font-weight: 600; }
  .fr-root .overview-row .net.negative { color: var(--fr-red); font-weight: 600; }
  .fr-root .overview-status {
    font-size: 0.75rem; font-weight: 700; padding: 4px 10px; border-radius: 14px; text-align: center;
  }
  .fr-root .overview-status.positive { background: var(--fr-green-bg); color: var(--fr-green); }
  .fr-root .overview-status.negative { background: var(--fr-amber-bg); color: var(--fr-red); }
  @media (max-width: 640px) {
    .fr-root .overview-row { grid-template-columns: 60px 1fr 1fr; font-size: 0.78rem; row-gap: 2px; }
    .fr-root .overview-row > div:nth-child(4), .fr-root .overview-row > div:nth-child(5) { grid-column: 2 / span 2; }
  }

  .fr-root input[type=file] { display: none; }

  .fr-root .fr-print-header { font-family: ui-sans-serif, system-ui, sans-serif; }
  .fr-root .fr-print-header h2 { margin: 0 0 2px; font-size: 1.15rem; }
  .fr-root .fr-print-header .sub { color: var(--fr-ink-soft); font-size: 0.85rem; margin-bottom: 14px; }

  @media print {
    body.fr-printing-overview * { visibility: hidden; }
    body.fr-printing-overview #frOverviewView,
    body.fr-printing-overview #frOverviewView * { visibility: visible; }
    body.fr-printing-overview #frOverviewView { position: absolute; left: 0; top: 0; width: 100%; padding: 0 16px; }
    body.fr-printing-overview #frOverviewPrintBtn { display: none !important; }
    body.fr-printing-overview #frOverviewPrintHeader { display: block !important; }
    body.fr-printing-overview .note { display: none !important; }
  }

  /* ---------- Voorraad (scoped chat-style inventory assistant) ---------- */
  .vr-root {
    --vr-bg: var(--surface-2);
    --vr-panel: var(--surface);
    --vr-border: var(--border);
    --vr-text: var(--ink);
    --vr-muted: var(--ink-soft);
    --vr-accent: var(--teal);
    --vr-accent-2: var(--teal-deep, var(--teal));
    --vr-accent-fg: #ffffff;
    --vr-danger: var(--red);
    --vr-danger-bg: var(--red-tint);
    --vr-warn-bg: var(--amber-tint);
    --vr-warn-text: var(--amber);
    --vr-ok-bg: var(--green-tint);
    --vr-ok-text: var(--green);
    --vr-bubble-user: var(--teal);
    --vr-bubble-user-fg: #ffffff;
    --vr-bubble-bot: var(--surface-2);
    --vr-bubble-bot-fg: var(--ink);
    --vr-radius: 14px;
    display: block;
    background: var(--vr-bg);
    color: var(--vr-text);
    font-family: var(--font-body);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--vr-border);
    position: relative;
    height: 640px;
    display: flex;
    flex-direction: column;
  }
  .vr-root .vr-header {
    padding: 12px 16px; background: var(--vr-panel); border-bottom: 1px solid var(--vr-border);
    display: flex; align-items: center; gap: 10px; flex: none;
  }
  .vr-root .vr-logo { font-size: 22px; }
  .vr-root .vr-header h1 { font-size: 15px; margin: 0; line-height: 1.2; font-family: var(--font-body); }
  .vr-root .vr-sub { font-size: 11px; color: var(--vr-muted); margin: 0; }
  .vr-root .vr-spacer { flex: 1; }
  .vr-root .vr-icon-btn {
    border: 1px solid var(--vr-border); background: var(--vr-panel); color: var(--vr-text);
    border-radius: 10px; padding: 7px 10px; font-size: 13px; cursor: pointer; white-space: nowrap; font-family: var(--font-body);
  }
  .vr-root .vr-lowbadge {
    position: absolute; top: -6px; right: -6px; background: var(--vr-danger); color: #fff;
    font-size: 10px; font-weight: 700; border-radius: 10px; padding: 1px 5px; line-height: 1.4;
    display: none; pointer-events: none;
  }
  .vr-root .vr-lowbadge.show { display: block; }
  .vr-root .vr-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
  .vr-root #vrChat { flex: 1; overflow-y: auto; padding: 14px 12px 8px; display: flex; flex-direction: column; gap: 10px; }
  .vr-root .vr-msg { max-width: 88%; padding: 10px 13px; border-radius: var(--vr-radius); font-size: 14px; line-height: 1.4; white-space: pre-wrap; word-wrap: break-word; }
  .vr-root .vr-msg.vr-user { align-self: flex-end; background: var(--vr-bubble-user); color: var(--vr-bubble-user-fg); border-bottom-right-radius: 4px; }
  .vr-root .vr-msg.vr-bot { align-self: flex-start; background: var(--vr-bubble-bot); color: var(--vr-bubble-bot-fg); border-bottom-left-radius: 4px; }
  .vr-root .vr-msg.vr-system { align-self: center; background: transparent; color: var(--vr-muted); font-size: 12px; text-align: center; max-width: 100%; }
  .vr-root .vr-msg img.vr-thumb { display: block; max-width: 160px; border-radius: 10px; margin-bottom: 6px; }
  .vr-root .vr-msg .vr-low-item { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--vr-border); }
  .vr-root .vr-msg .vr-low-item:last-child { border-bottom: none; }
  .vr-root .vr-propose {
    align-self: flex-start; max-width: 92%; background: var(--vr-panel); border: 1px solid var(--vr-border);
    border-radius: var(--vr-radius); padding: 12px; font-size: 14px;
  }
  .vr-root .vr-propose img { max-width: 140px; border-radius: 10px; display: block; margin-bottom: 8px; }
  .vr-root .vr-propose label { display: block; font-size: 11px; color: var(--vr-muted); margin-top: 8px; margin-bottom: 3px; }
  .vr-root .vr-propose input[type=text], .vr-root .vr-propose input[type=number] {
    width: 100%; padding: 8px 9px; border: 1px solid var(--vr-border); border-radius: 8px;
    background: var(--vr-bg); color: var(--vr-text); font-size: 14px; font-family: var(--font-body);
  }
  .vr-root .vr-propose .vr-row { display: flex; gap: 8px; margin-top: 12px; }
  .vr-root .vr-propose button {
    flex: 1; padding: 9px 10px; border-radius: 9px; border: 1px solid var(--vr-border);
    font-size: 13px; cursor: pointer; background: var(--vr-bg); color: var(--vr-text); font-family: var(--font-body);
  }
  .vr-root .vr-propose button.vr-confirm { background: var(--vr-accent); color: var(--vr-accent-fg); border-color: var(--vr-accent); font-weight: 600; }
  .vr-root #vrTyping { align-self: flex-start; font-size: 13px; color: var(--vr-muted); padding: 2px 12px; display: none; flex: none; }
  .vr-root #vrComposer {
    border-top: 1px solid var(--vr-border); background: var(--vr-panel); padding: 10px; flex: none;
    display: flex; gap: 8px; align-items: flex-end;
  }
  .vr-root #vrComposer textarea {
    flex: 1; resize: none; max-height: 90px; min-height: 40px; padding: 10px 12px;
    border: 1px solid var(--vr-border); border-radius: 20px; background: var(--vr-bg); color: var(--vr-text);
    font-size: 14px; font-family: var(--font-body); line-height: 1.3;
  }
  .vr-root #vrComposer button#vrSendBtn {
    border: none; background: var(--vr-accent); color: var(--vr-accent-fg); border-radius: 50%;
    width: 42px; height: 42px; font-size: 17px; cursor: pointer; flex-shrink: 0;
  }
  .vr-root #vrComposer button:disabled { opacity: .5; }
  .vr-root .vr-secondary { background: var(--vr-bg); color: var(--vr-text); border: 1px solid var(--vr-border); border-radius: 50%; width: 42px; height: 42px; font-size: 17px; cursor: pointer; flex-shrink: 0; }
  .vr-root .vr-quickrow { display: flex; gap: 8px; padding: 8px 12px; overflow-x: auto; flex: none; }
  .vr-root .vr-quickrow button {
    flex-shrink: 0; border: 1px solid var(--vr-border); background: var(--vr-panel); color: var(--vr-text);
    border-radius: 16px; padding: 7px 12px; font-size: 12.5px; cursor: pointer; white-space: nowrap; font-family: var(--font-body);
  }
  .vr-root #vrOverlay { position: absolute; inset: 0; background: rgba(0,0,0,.4); display: none; z-index: 10; }
  .vr-root #vrOverlay.show { display: block; }
  .vr-root #vrDrawer {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 88%); background: var(--vr-panel);
    z-index: 11; transform: translateX(100%); transition: transform .22s ease; display: flex; flex-direction: column;
    border-left: 1px solid var(--vr-border);
  }
  .vr-root #vrDrawer.open { transform: translateX(0); }
  .vr-root #vrDrawerSearch { margin: 10px 12px; padding: 9px 11px; border: 1px solid var(--vr-border); border-radius: 10px; background: var(--vr-bg); color: var(--vr-text); font-size: 13px; font-family: var(--font-body); }
  .vr-root #vrDrawerList { flex: 1; overflow-y: auto; padding: 0 10px 10px; }
  .vr-root .vr-invrow { display: flex; align-items: center; gap: 8px; padding: 9px 6px; border-bottom: 1px solid var(--vr-border); }
  .vr-root .vr-invrow .vr-name { flex: 1; font-size: 12.5px; line-height: 1.3; }
  .vr-root .vr-invrow .vr-id { color: var(--vr-muted); font-size: 11px; }
  .vr-root .vr-invrow .vr-qty { width: 44px; text-align: center; font-weight: 700; font-size: 13px; padding: 4px 2px; border-radius: 6px; }
  .vr-root .vr-invrow .vr-qty.low { background: var(--vr-danger-bg); color: var(--vr-danger); }
  .vr-root .vr-invrow input.vr-thr { width: 38px; font-size: 11px; padding: 3px; border: 1px solid var(--vr-border); border-radius: 6px; background: var(--vr-bg); color: var(--vr-text); text-align: center; }
  .vr-root .vr-thrlabel { font-size: 10px; color: var(--vr-muted); }
  .vr-root #vrAttachPreview { display: none; align-items: center; gap: 8px; padding: 8px 12px; background: var(--vr-panel); border-top: 1px solid var(--vr-border); flex: none; }
  .vr-root #vrAttachPreview.show { display: flex; }
  .vr-root #vrAttachPreview img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; }
  .vr-root #vrAttachPreview .vr-hint { flex: 1; font-size: 12px; color: var(--vr-muted); }
  .vr-root #vrAttachPreview .vr-rm { background: none; border: none; font-size: 16px; color: var(--vr-muted); cursor: pointer; padding: 4px 8px; }
  .vr-root #vrFileInput { display: none; }
  .vr-root #vrAttachWrap { position: relative; }
  .vr-root #vrAttachMenu {
    position: absolute; bottom: 52px; left: 0; background: var(--vr-panel); border: 1px solid var(--vr-border);
    border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.18); padding: 6px; display: none; flex-direction: column;
    gap: 2px; min-width: 220px; z-index: 6;
  }
  .vr-root #vrAttachMenu.show { display: flex; }
  .vr-root #vrAttachMenu button {
    display: flex; align-items: center; gap: 10px; text-align: left; background: none; border: none;
    padding: 10px; border-radius: 8px; font-size: 13.5px; color: var(--vr-text); cursor: pointer; font-family: var(--font-body);
  }
  .vr-root #vrAttachMenu button:active { background: var(--vr-bg); }
  .vr-root #vrAttachMenu .vr-emoji { font-size: 18px; width: 22px; text-align: center; }
  .vr-root #vrAttachMenu .vr-lbl { display: flex; flex-direction: column; }
  .vr-root #vrAttachMenu .vr-lbl small { color: var(--vr-muted); font-weight: 400; font-size: 11px; }
  .vr-root .vr-invoice-card { align-self: flex-start; max-width: 94%; background: var(--vr-panel); border: 1px solid var(--vr-border); border-radius: var(--vr-radius); padding: 12px; font-size: 13.5px; }
  .vr-root .vr-invoice-card img { max-width: 140px; border-radius: 10px; display: block; margin-bottom: 8px; }
  .vr-root .vr-invoice-row { display: flex; gap: 6px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--vr-border); }
  .vr-root .vr-invoice-row:last-of-type { border-bottom: none; }
  .vr-root .vr-invoice-row input[type=text] { flex: 1; min-width: 0; padding: 7px 8px; border: 1px solid var(--vr-border); border-radius: 7px; background: var(--vr-bg); color: var(--vr-text); font-size: 13px; }
  .vr-root .vr-invoice-row input[type=number] { width: 50px; padding: 7px 4px; border: 1px solid var(--vr-border); border-radius: 7px; background: var(--vr-bg); color: var(--vr-text); font-size: 13px; text-align: center; }
  .vr-root .vr-invoice-row select { max-width: 100px; font-size: 11px; padding: 5px; border-radius: 7px; border: 1px solid var(--vr-border); background: var(--vr-bg); color: var(--vr-text); }
  .vr-root .vr-invoice-card .vr-row { display: flex; gap: 8px; margin-top: 12px; }
  .vr-root .vr-invoice-card button.vr-act { flex: 1; padding: 9px 10px; border-radius: 9px; border: 1px solid var(--vr-border); font-size: 13px; cursor: pointer; background: var(--vr-bg); color: var(--vr-text); font-family: var(--font-body); }
  .vr-root .vr-invoice-card button.vr-act.vr-confirm { background: var(--vr-accent); color: var(--vr-accent-fg); border-color: var(--vr-accent); font-weight: 600; }
  .vr-root .vr-removerow { background: none; border: none; color: var(--vr-muted); font-size: 16px; cursor: pointer; padding: 0 4px; }
  @media (max-width: 480px) {
    .vr-root { height: 76vh; }
  }

  /* ===== Mobiele weergave (telefoon / iOS-app) ===== */
  @media (max-width: 700px) {
    html, body { overflow-x: hidden; max-width: 100%; }
    #appRoot .wrap, .wrap { padding-top: calc(env(safe-area-inset-top, 0px) + 14px); padding-left: 14px; padding-right: 14px; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 120px); }
    /* Geneste .wrap-blokken binnen een pagina (Facturenregister, Voorraad, ...) hoeven de veilige
       zone en de grote onderruimte van de hoofdpagina NIET nog eens te krijgen: dat gaf lege vlakken. */
    section.view .wrap { padding: 8px 0 24px !important; }
    /* De bovenste .wrap (titelbalk + menuknop) reserveerde 120px onderruimte: dat gaf een groot leeg vlak
       tussen het menu en de pagina. Die ruimte (voor de chatbubbel) hoort onderaan de hele pagina. */
    #appRoot > .wrap { padding-bottom: 0 !important; }
    #appRoot { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 100px); }
    header.top { flex-wrap: wrap; gap: 8px; }
    header.top .sync, header.top > div { max-width: 100%; flex-wrap: wrap; }
    html, body { overflow-x: hidden; width: 100%; position: relative; }
    .wrap { overflow-x: clip; }
    /* Hoofdmenu op de telefoon: één "☰ Menu"-knop; tik erop en alle onderdelen staan onder elkaar */
    .nav-menu-btn { display: flex !important; }
    nav.tabs.categories { display: none; flex-direction: column; flex-wrap: nowrap; gap: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface, #fff); margin: 0 0 16px; padding: 4px; max-height: 70vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    nav.tabs.categories.mob-open { display: flex; }
    nav.tabs.categories button { width: 100%; text-align: left; font-size: 15px; padding: 13px 14px; border-bottom: 1px solid var(--border); border-radius: 0; }
    nav.tabs.categories button.active { background: var(--teal-tint, #f2efe6); border-bottom-color: var(--border); border-radius: 8px; }
    nav.tabs.categories .nav-more-wrap { display: block !important; width: 100%; position: static !important; }
    nav.tabs.categories #navMoreToggle { display: none !important; }
    nav.tabs.categories .nav-more-menu { display: flex !important; flex-direction: column; position: static !important; box-shadow: none; border: none; padding: 0; margin: 0; width: 100%; min-width: 0; background: transparent; }
    nav.tabs.categories .nav-more-menu button { width: 100%; }
    nav.tabs.subtabs { flex-wrap: wrap; overflow-x: visible; margin-left: 0; margin-right: 0; padding: 0; margin-bottom: 18px; }
    nav.tabs.subtabs button { flex: none; }
    input, select, textarea { max-width: 100%; min-width: 0; box-sizing: border-box; font-size: 16px; }
    input[type=date], input[type=time], input[type=datetime-local] { width: 100%; min-width: 0; -webkit-appearance: none; appearance: none; min-height: 40px; }
    .field-row, .field-row.field-row-3, .ks-root .field-row, .ks-root .field-row.field-row-3, .ko-root .field-row, .grid2, .grid3 { grid-template-columns: 1fr !important; }
    .field-row > div, .grid2 > div, .grid3 > div { min-width: 0; }
    .card { max-width: 100%; padding-left: 14px; padding-right: 14px; box-sizing: border-box; }
    .card, .ks-root, .fr-root { overflow-wrap: anywhere; }
    .toolbar { flex-wrap: wrap; }
    .toolbar button { max-width: 100%; white-space: normal; }
    /* Klachtenopvolging: filterbalk onder elkaar i.p.v. smalle kolommen */
    .ko-root .sidebar { flex-direction: column !important; align-items: stretch !important; overflow-x: visible !important; gap: 14px !important; }
    .ko-root .filter-group { flex-direction: column !important; align-items: stretch !important; gap: 6px !important; }
    .ko-root .chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
    .ko-root .chip { white-space: nowrap; writing-mode: horizontal-tb; }
    .ko-root .brand-text, .ko-root .filter-label { writing-mode: horizontal-tb; word-break: normal; overflow-wrap: normal; }
    #view-complaints, #view-overdracht { padding-left: 0 !important; padding-right: 0 !important; }
    /* balk achter de statusbalk, zodat tabs niet onder de klok doorschuiven */
    body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: var(--bg, #f6f4ef); z-index: 99998; }
    /* Facturenregister > Inkomsten: elke rij als kaartje met labels */
    #frIncomeRows > .row:first-child { display: none !important; }
    #frIncomeRows > .row.staff-row { grid-template-columns: 1fr 1fr !important; gap: 8px 10px !important; padding: 12px !important; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; background: var(--surface, #fff); }
    #frIncomeRows > .row.staff-row { grid-template-areas: none !important; }
    #frIncomeRows > .row.staff-row > * { grid-area: auto !important; min-width: 0; }
    #frIncomeRows > .row.staff-row > div:nth-child(1), #frIncomeRows > .row.staff-row > div:nth-child(8) { grid-column: 1 / -1; }
    #frIncomeRows > .row.staff-row > div:nth-child(8) { text-align: left !important; font-size: 15px; }
    #frIncomeRows > .row.staff-row > div:nth-child(9) { grid-column: 1 / -1; justify-self: end; }
    #frIncomeRows > .row.staff-row > div:nth-child(n+2):nth-child(-n+8)::before { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 2px; }
    #frIncomeRows > .row.staff-row > div:nth-child(2)::before { content: "Rol"; }
    #frIncomeRows > .row.staff-row > div:nth-child(3)::before { content: "Datum"; }
    #frIncomeRows > .row.staff-row > div:nth-child(4)::before { content: "Omzet"; }
    #frIncomeRows > .row.staff-row > div:nth-child(5)::before { content: "Labo (kost)"; }
    #frIncomeRows > .row.staff-row > div:nth-child(6)::before { content: "Implantaten (kost)"; }
    #frIncomeRows > .row.staff-row > div:nth-child(7)::before { content: "%"; }
    #frIncomeRows > .row.staff-row > div:nth-child(8)::before { content: "Praktijkinkomen"; }
    .fr-root .stat-row, .fr-root .stats { grid-template-columns: 1fr 1fr !important; }
    /* Gesloten zijpanelen (klachten / voorraad) buiten beeld laten staan maakt de pagina op iOS breder */
    .ko-root .drawer:not(.open), .vr-root #vrDrawer:not(.open) { display: none !important; }
    #fcWidget { right: 12px !important; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important; }
    /* Prijslijst van een labo: op de telefoon als kaartjes onder elkaar i.p.v. 4 kolommen */
    #laboSendInfoPriceWrap { overflow-x: visible; border: none; }
    #laboSendInfoPriceWrap table, #laboSendInfoPriceWrap tbody, #laboSendInfoPriceWrap tr, #laboSendInfoPriceWrap td { display: block; width: 100%; min-width: 0; box-sizing: border-box; }
    #laboSendInfoPriceWrap thead { display: none; }
    #laboSendInfoPriceWrap tr { background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
    #laboSendInfoPriceWrap td { border: none !important; padding: 2px 0 !important; font-size: 14px; white-space: normal; }
    #laboSendInfoPriceWrap td:nth-child(1) { font-weight: 700; font-size: 15px; }
    #laboSendInfoPriceWrap td:nth-child(2) { color: var(--teal-deep, var(--teal)); font-weight: 700; }
    #laboSendInfoPriceWrap td:nth-child(3):not(:empty)::before { content: "Levertijd: "; color: var(--ink-soft); }
    #laboSendInfoPriceWrap td:nth-child(4) { color: var(--ink-soft); font-size: 13px; }
    #laboSendInfoPriceWrap td:empty { display: none; }
  }