/* Kasadmin thema (16-10-2026)
 *
 * Eén laag design-tokens bovenop Bootstrap 5.3, geladen na kasadmin.css.
 * Richting: rustig en neutraal (grijs en zwart), kleur alleen waar een
 * bedrag of status iets betekent. Tokens overgenomen van het
 * EasyAdmin-voorbeeld; geen html of css van dat template.
 *
 * Secties:
 *   1. Lettertype (Inter Variable, zelf gehost; latin-ext voor Turks en ₺)
 *   2. Tokens op :root (kleur, radius, schaduw, focus)
 *   3. Componenten die Bootstrap met vaste kleuren compileert
 *      (knoppen, formulieren, navbar, kaarten, tabellen)
 *   4. Browser-vlakken (selectie, focusring)
 */

/* 1. Lettertype
   ---------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 2. Tokens
   ----------------------------------------------------------------
   Zinc-grijzen: achtergrond #fafafa, vlak #fff, rand #e4e4e7, tekst
   #3f3f46, kop en hoofdactie #18181b, gedempt #71717a. Semantisch:
   plus/voldaan #0a863e, min/probleem #dc2626, aandacht #ca8a04. */
:root,
[data-bs-theme="light"] {
  --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-size: .9375rem;
  --bs-body-bg: #fafafa;
  --bs-body-bg-rgb: 250, 250, 250;
  --bs-body-color: #3f3f46;
  --bs-body-color-rgb: 63, 63, 70;
  --bs-heading-color: #18181b;
  --bs-secondary-color: #71717a;
  --bs-secondary-color-rgb: 113, 113, 122;
  --bs-secondary-bg: #e4e4e7;
  --bs-secondary-bg-rgb: 228, 228, 231;
  --bs-tertiary-color: #a1a1aa;
  --bs-tertiary-bg: #f4f4f5;
  --bs-tertiary-bg-rgb: 244, 244, 245;
  --bs-emphasis-color: #18181b;
  --bs-border-color: #e4e4e7;
  --bs-border-color-translucent: #e4e4e7;
  --bs-border-radius: .5rem;
  --bs-border-radius-sm: .375rem;
  --bs-border-radius-lg: .625rem;
  --bs-border-radius-xl: .75rem;
  --bs-box-shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
  --bs-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .07), 0 2px 4px -2px rgba(0, 0, 0, .07);
  --bs-box-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .08), 0 4px 6px -4px rgba(0, 0, 0, .08);
  --bs-focus-ring-color: rgba(24, 24, 27, .15);
  --bs-code-color: #52525b;

  --bs-link-color: #18181b;
  --bs-link-color-rgb: 24, 24, 27;
  --bs-link-hover-color: #52525b;
  --bs-link-hover-color-rgb: 82, 82, 91;

  --bs-primary: #18181b;
  --bs-primary-rgb: 24, 24, 27;
  --bs-primary-text-emphasis: #18181b;
  --bs-primary-bg-subtle: #f4f4f5;
  --bs-primary-border-subtle: #d4d4d8;
  --bs-secondary: #71717a;
  --bs-secondary-rgb: 113, 113, 122;
  --bs-secondary-text-emphasis: #3f3f46;
  --bs-secondary-bg-subtle: #f4f4f5;
  --bs-secondary-border-subtle: #e4e4e7;
  --bs-light: #fafafa;
  --bs-light-rgb: 250, 250, 250;
  --bs-light-bg-subtle: #fafafa;
  --bs-dark: #18181b;
  --bs-dark-rgb: 24, 24, 27;
  --bs-success: #0a863e;
  --bs-success-rgb: 10, 134, 62;
  --bs-success-text-emphasis: #0a6b32;
  --bs-success-bg-subtle: #d8f6e3;
  --bs-success-border-subtle: #a7e9c0;
  --bs-danger: #dc2626;
  --bs-danger-rgb: 220, 38, 38;
  --bs-danger-text-emphasis: #b91c1c;
  --bs-danger-bg-subtle: #fee2e2;
  --bs-danger-border-subtle: #fca5a5;
  --bs-warning: #ca8a04;
  --bs-warning-rgb: 202, 138, 4;
  --bs-warning-text-emphasis: #854d0e;
  --bs-warning-bg-subtle: #fef9c3;
  --bs-warning-border-subtle: #fde68a;
  /* Info is neutraal: een mededeling, geen kleur. */
  --bs-info: #71717a;
  --bs-info-rgb: 113, 113, 122;
  --bs-info-text-emphasis: #3f3f46;
  --bs-info-bg-subtle: #f4f4f5;
  --bs-info-border-subtle: #e4e4e7;

  /* kasadmin.css */
  --ka-radius: .5rem;
  --ka-muted: #71717a;
  --ka-status-goed: #0a863e;
  --ka-status-bijna: #ca8a04;
  --ka-status-niet: #dc2626;
  --ka-status-info: #71717a;
}

body { -webkit-font-smoothing: antialiased; }
h1, h2, h3, .h1, .h2, .h3, .page-title { letter-spacing: -.01em; }

/* 3. Componenten
   ----------------------------------------------------------------
   Bootstrap compileert knop-, formulier- en tabelkleuren als vaste
   waarden; die zetten we hier per component om. Vier knopstijlen
   (afspraak 28): primary gevuld zwart, outline-primary zwarte rand,
   outline-secondary grijze rand, (outline-)danger rood. */
.btn { --bs-btn-font-size: .9375rem; --bs-btn-font-weight: 500; }
.btn-sm, .btn-group-sm > .btn { --bs-btn-font-size: .8125rem; }
.btn-primary {
  --bs-btn-bg: #18181b;
  --bs-btn-border-color: #18181b;
  --bs-btn-hover-bg: #3f3f46;
  --bs-btn-hover-border-color: #3f3f46;
  --bs-btn-active-bg: #52525b;
  --bs-btn-active-border-color: #52525b;
  --bs-btn-disabled-bg: #18181b;
  --bs-btn-disabled-border-color: #18181b;
  --bs-btn-focus-shadow-rgb: 24, 24, 27;
}
.btn-outline-primary {
  --bs-btn-color: #18181b;
  --bs-btn-border-color: #18181b;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #18181b;
  --bs-btn-hover-border-color: #18181b;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #3f3f46;
  --bs-btn-active-border-color: #3f3f46;
  --bs-btn-disabled-color: #18181b;
  --bs-btn-disabled-border-color: #18181b;
  --bs-btn-focus-shadow-rgb: 24, 24, 27;
}
.btn-secondary {
  --bs-btn-bg: #3f3f46;
  --bs-btn-border-color: #3f3f46;
  --bs-btn-hover-bg: #52525b;
  --bs-btn-hover-border-color: #52525b;
  --bs-btn-active-bg: #27272a;
  --bs-btn-active-border-color: #27272a;
  --bs-btn-disabled-bg: #3f3f46;
  --bs-btn-disabled-border-color: #3f3f46;
  --bs-btn-focus-shadow-rgb: 63, 63, 70;
}
.btn-outline-secondary {
  --bs-btn-color: #18181b;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #d4d4d8;
  --bs-btn-hover-color: #18181b;
  --bs-btn-hover-bg: #f4f4f5;
  --bs-btn-hover-border-color: #d4d4d8;
  --bs-btn-active-color: #18181b;
  --bs-btn-active-bg: #e4e4e7;
  --bs-btn-active-border-color: #d4d4d8;
  --bs-btn-disabled-color: #71717a;
  --bs-btn-disabled-border-color: #e4e4e7;
  --bs-btn-focus-shadow-rgb: 24, 24, 27;
}
/* Gekozen filter (aria/active) in een groep outline-knoppen: zwart gevuld. */
.btn-outline-secondary.active {
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #18181b;
  --bs-btn-active-border-color: #18181b;
}
.btn-danger {
  --bs-btn-bg: #dc2626;
  --bs-btn-border-color: #dc2626;
  --bs-btn-hover-bg: #b91c1c;
  --bs-btn-hover-border-color: #b91c1c;
  --bs-btn-active-bg: #991b1b;
  --bs-btn-active-border-color: #991b1b;
  --bs-btn-disabled-bg: #dc2626;
  --bs-btn-disabled-border-color: #dc2626;
  --bs-btn-focus-shadow-rgb: 220, 38, 38;
}
.btn-outline-danger {
  --bs-btn-color: #b91c1c;
  --bs-btn-border-color: #fca5a5;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #dc2626;
  --bs-btn-hover-border-color: #dc2626;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #b91c1c;
  --bs-btn-active-border-color: #b91c1c;
  --bs-btn-disabled-color: #b91c1c;
  --bs-btn-disabled-border-color: #fca5a5;
  --bs-btn-focus-shadow-rgb: 220, 38, 38;
}
.btn-link { --bs-btn-color: #18181b; --bs-btn-hover-color: #52525b; }

/* Formulieren: iets donkerder rand dan kaarten, zwarte focus. */
.form-control, .form-select {
  font-size: .9375rem;
  border-color: #d4d4d8;
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: #18181b;
  box-shadow: 0 0 0 .25rem rgba(24, 24, 27, .12);
}
.form-check-input:checked {
  background-color: #18181b;
  border-color: #18181b;
}
.form-control::placeholder { color: #a1a1aa; }

/* Navbar: wit vlak met onderrand; actief item lichtgrijs. */
.navbar {
  --bs-navbar-color: #3f3f46;
  --bs-navbar-hover-color: #18181b;
  --bs-navbar-active-color: #18181b;
  --bs-navbar-toggler-border-color: #e4e4e7;
  background: #fff;
  border-bottom: 1px solid var(--bs-border-color);
}
.navbar-nav .nav-link { font-weight: 500; }
.navbar-nav .nav-link.active {
  background: #f4f4f5;
  color: #18181b;
}

/* Kaarten en dropdowns: rand plus zweem. */
.card {
  --bs-card-border-color: #e4e4e7;
  --bs-card-border-radius: .625rem;
  --bs-card-inner-border-radius: calc(.625rem - 1px);
  --bs-card-cap-bg: transparent;
  box-shadow: var(--bs-box-shadow-sm);
}
.dropdown-menu {
  --bs-dropdown-border-color: #e4e4e7;
  box-shadow: var(--bs-box-shadow);
}
.dropdown-item.active, .dropdown-item:active {
  --bs-dropdown-link-active-bg: #f4f4f5;
  --bs-dropdown-link-active-color: #18181b;
}

/* Tabellen: gedempte koppen, lichte rijlijnen, hover grijs. */
.table {
  --bs-table-border-color: #e4e4e7;
  --bs-table-hover-bg: #f4f4f5;
  --bs-table-striped-bg: #fafafa;
}
.table > thead th {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #71717a;
}
.table-light { --bs-table-bg: #fafafa; --bs-table-color: #71717a; }
.money { font-variant-numeric: tabular-nums; }
.money.neg { color: #dc2626; }

/* Badges en pills: geen volle vulling, zachte tint (afspraak 28). */
.badge { font-weight: 600; }

/* Paginering, tabs en lijsten die primary gebruiken. */
.nav-tabs { --bs-nav-tabs-link-active-color: #18181b; --bs-nav-tabs-border-color: #e4e4e7; }
.nav-pills { --bs-nav-pills-link-active-bg: #18181b; }
.page-link { --bs-pagination-color: #18181b; --bs-pagination-hover-color: #18181b; --bs-pagination-active-bg: #18181b; --bs-pagination-active-border-color: #18181b; --bs-pagination-focus-color: #18181b; }
.list-group { --bs-list-group-active-bg: #18181b; --bs-list-group-active-border-color: #18181b; --bs-list-group-border-color: #e4e4e7; }
.progress { --bs-progress-bar-bg: #18181b; }
.alert { --bs-alert-border-radius: .625rem; }
.modal-content { --bs-modal-border-color: #e4e4e7; --bs-modal-border-radius: .75rem; }

/* 4. Browser-vlakken
   ---------------------------------------------------------------- */
::selection { background: #e4e4e7; color: #18181b; }
:focus-visible { outline: 2px solid #18181b; outline-offset: 2px; }
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible { outline: none; }

/* 5. Shell: sidebar (lg en breder) en bovenbalk plus onderbalk (telefoon)
   ----------------------------------------------------------------
   Eén menu (components/sidenav.html) is op desktop een zwevende, plakkende
   kolom en op telefoons een uitschuifpaneel (Bootstrap offcanvas-lg).
   De onderbalk (components/tabbar.html) staat vast onderaan. */
body { padding-bottom: 5rem; }
.ka-shell { display: flex; align-items: flex-start; gap: 1.25rem; padding: 1.25rem; min-height: 100vh; }
.ka-main { flex: 1 1 auto; min-width: 0; }
.ka-main > main { padding-top: 0 !important; }

.ka-brand { display: flex; align-items: center; gap: .625rem; font-weight: 600; font-size: 1rem; color: #18181b; text-decoration: none; }
.ka-brand:hover { color: #18181b; }
.ka-brand-mark { width: 2rem; height: 2rem; border-radius: .5rem; background: #18181b; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9375rem; }

.ka-sidebar { --bs-offcanvas-width: 18rem; }
.ka-sidebar-card { display: flex; flex-direction: column; gap: .125rem; width: 100%; }
.ka-sidebar-card > .ka-brand { padding: .25rem .625rem 1rem; margin-bottom: .375rem; border-bottom: 1px solid #e4e4e7; }
.ka-nav { display: flex; flex-direction: column; gap: .125rem; }
.ka-nav-link { display: flex; align-items: center; gap: .625rem; min-height: 2.5rem; padding: .5rem .625rem; border-radius: .5rem; color: #3f3f46; font-weight: 500; text-decoration: none; }
.ka-nav-link .bi { width: 1.25rem; text-align: center; font-size: 1.0625rem; color: #71717a; }
.ka-nav-link:hover { background: #f4f4f5; color: #18181b; }
.ka-nav-link.active { background: #f4f4f5; color: #18181b; }
.ka-nav-link.active .bi { color: #18181b; }
.ka-nav-group { padding: .875rem .625rem .25rem; font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #71717a; }

.ka-sidebar-foot { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid #e4e4e7; }
.ka-user { display: flex; align-items: center; gap: .625rem; width: 100%; padding: .5rem .625rem; border: 0; border-radius: .5rem; background: transparent; color: #18181b; text-align: left; font: inherit; }
.ka-user:hover { background: #f4f4f5; }
.ka-user-avatar { width: 2rem; height: 2rem; border-radius: 999px; background: #f4f4f5; color: #18181b; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .8125rem; flex: 0 0 2rem; }
.ka-user-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.ka-user-name { font-size: .875rem; font-weight: 500; }
.ka-user-rol { font-size: .75rem; color: #71717a; }
.ka-sidebar-foot .dropdown-menu { min-width: 14rem; }

.ka-topbar { display: flex; align-items: center; gap: .25rem; height: 3.5rem; margin: 0 -.75rem 1rem; padding: 0 .75rem 0 .25rem; background: #fff; border-bottom: 1px solid #e4e4e7; }
.ka-topbar-btn { width: 2.75rem; height: 2.75rem; border: 0; border-radius: .5rem; background: transparent; color: #3f3f46; font-size: 1.375rem; display: inline-flex; align-items: center; justify-content: center; }
.ka-topbar-btn:hover { background: #f4f4f5; color: #18181b; }

.ka-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: .25rem .25rem calc(.5rem + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #e4e4e7; }
.ka-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .125rem; min-height: 3rem; border: 0; background: transparent; color: #71717a; font-size: .6875rem; font-weight: 500; text-decoration: none; white-space: nowrap; overflow: hidden; }
.ka-tab .bi { font-size: 1.375rem; line-height: 1; }
.ka-tab.active { color: #18181b; font-weight: 600; }

@media (min-width: 992px) {
  .ka-sidebar { position: sticky; top: 1.25rem; flex: 0 0 16rem; max-height: calc(100vh - 2.5rem); overflow-y: auto; }
  .ka-sidebar .offcanvas-body { display: block; }
  .ka-sidebar-card { box-sizing: border-box; padding: .75rem; background: #fff; border: 1px solid #e4e4e7; border-radius: .75rem; box-shadow: 0 4px 12px -2px rgba(0, 0, 0, .08), 0 2px 4px -1px rgba(0, 0, 0, .04); }
}
@media (max-width: 991.98px) {
  body { padding-bottom: 5.5rem; }
  .ka-shell { display: block; padding: 0; min-height: 0; }
  .ka-main > main { padding-top: 0 !important; }
  .ka-toasts { bottom: 4.5rem !important; }
}
/* Telefoon: invoervelden minimaal 16px, anders zoomt iOS Safari in bij focus
   en schuift de vaste onderbalk mee het beeld in. */
@media (max-width: 767.98px) {
  .form-control, .form-select, .form-control-sm, .form-select-sm { font-size: 1rem; }
}

/* 6. Componenten: tabs en KPI-tegel
   ----------------------------------------------------------------
   Eén tabstijl voor schermdelen: onderstreept, zonder kader
   (Rapportages, Rekeningen, Diagnose, Data & backup, batch-review).
   Eén KPI-tegel: label grijs, getal zwart en groot, toelichting klein;
   kleur op het getal alleen met betekenis (text-success/-danger). */
.nav-tabs {
  --bs-nav-tabs-border-width: 0;
  --bs-nav-tabs-link-hover-border-color: transparent;
  --bs-nav-tabs-link-active-bg: transparent;
  --bs-nav-tabs-link-active-border-color: transparent;
  --bs-nav-link-color: #71717a;
  --bs-nav-link-hover-color: #18181b;
  --bs-nav-link-padding-x: .875rem;
  --bs-nav-link-padding-y: .5rem;
  --bs-nav-link-font-weight: 500;
  border-bottom: 1px solid #e4e4e7;
  gap: .125rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.nav-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { border-bottom-color: #d4d4d8; }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
  color: #18181b;
  font-weight: 600;
  border-bottom-color: #18181b;
}
.nav-tabs .nav-link.disabled { color: #a1a1aa; }

.ka-kpi {
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: .625rem;
  box-shadow: var(--bs-box-shadow-sm);
  padding: .875rem 1rem;
  min-width: 0;
}
.ka-kpi-label { font-size: .8125rem; color: #71717a; }
.ka-kpi-value { font-size: 1.375rem; font-weight: 600; color: #18181b; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.ka-kpi-sub { font-size: .75rem; color: #71717a; margin-top: .125rem; }
/* Stappenbalk afschriften: klaar groen, actief zwart omkaderd, later grijs. */
.ka-step { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-radius: .5rem; border: 1px solid transparent; font-size: .8125rem; color: #71717a; background: #f4f4f5; }
.ka-step-dot { display: inline-flex; align-items: center; justify-content: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; font-size: .75rem; font-weight: 500; color: #fff; background: #a1a1aa; }
.ka-step-done { background: #d8f6e3; color: #18181b; }
.ka-step-done .ka-step-dot { background: #0a863e; }
.ka-step-active { background: #fff; color: #18181b; border-color: #18181b; font-weight: 500; }
.ka-step-active .ka-step-dot { background: #18181b; }

/* Sidebar scrolt op een laag venster, maar zonder zichtbare balk. */
.ka-sidebar { scrollbar-width: none; }
.ka-sidebar::-webkit-scrollbar { display: none; }

/* 7. Mobiel
   ----------------------------------------------------------------
   Een scrollende tabel mag de pagina niet breder maken: absoluut
   gepositioneerde kinderen (visually-hidden) blijven binnen de wrapper. */
.table-responsive { position: relative; }

/* 8. Telefoon: tabel wordt lijst
   ----------------------------------------------------------------
   Onder md verliezen deze tabellen hun kolommen. Twee vormen:
   - `.tx-table` (transacties): elke rij een blok met datum en bedrag op
     regel 1, boeking op regel 2, omschrijving op regel 3, acties op
     regel 4; bron en kolomkoppen verdwijnen.
   - `.table-stack` (algemeen): elke rij een blok; elke cel een regel
     "label: waarde" via `data-label`; de cel met `.stack-title` wordt de
     kop van het blok. Cellen zonder label en zonder inhoud verdwijnen. */
@media (max-width: 767.98px) {
  .tx-table thead, .tx-table tr.tx-row > td.tx-bron { display: none; }
  .tx-table, .tx-table tbody, .tx-table tfoot { display: block; }
  .tx-table tr.tx-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: .75rem;
    row-gap: .125rem;
    padding: .625rem 0;
    border-bottom: 1px solid #e4e4e7;
  }
  .tx-table tr.tx-row > td { display: block; padding: 0; border: 0; min-width: 0; background: transparent; box-shadow: none; }
  .tx-table td.tx-datum { grid-column: 1; grid-row: 1; font-size: .75rem; color: #71717a; }
  .tx-table td.tx-bedrag { grid-column: 2; grid-row: 1; text-align: right; }
  .tx-table td.tx-boeking { grid-column: 1 / -1; grid-row: 2; white-space: normal; font-size: .8125rem; line-height: 1.4; }
  .tx-table td.tx-omschrijving { grid-column: 1 / -1; grid-row: 3; max-width: none !important; min-width: 0 !important; }
  .tx-table td.tx-acties { grid-column: 1 / -1; grid-row: 4; text-align: right; padding-top: .25rem; }
  .tx-table td.tx-acties:empty { display: none; }
  .tx-table tr.tx-split-row { display: flex; flex-wrap: wrap; gap: .25rem .75rem; padding: .25rem 0 .5rem 1rem; border-bottom: 1px solid #e4e4e7; }
  .tx-table tr.tx-split-row > td { display: block; padding: 0; border: 0; }
  .tx-table tr.tx-split-row > td:empty { display: none; }
  .tx-table tfoot tr { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .75rem; padding: .5rem 0; }
  .tx-table tfoot td { display: block; padding: 0; border: 0; }
  .tx-table tbody tr:not(.tx-row):not(.tx-split-row) { display: block; }
  .tx-table tbody tr:not(.tx-row):not(.tx-split-row) > td { display: block; }

  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tfoot, .table-stack tr, .table-stack td, .table-stack th { display: block; }
  .table-stack tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5rem; padding: .5rem 0 .625rem; border-bottom: 1px solid #e4e4e7; }
  .table-stack td, .table-stack th { flex: 0 0 100%; display: flex; justify-content: flex-end; align-items: baseline; gap: 1rem; padding: .125rem 0; border: 0; text-align: right; background: transparent; }
  .table-stack td[data-label]::before { content: attr(data-label); flex: 0 0 auto; margin-right: auto; color: #71717a; font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-align: left; }
  .table-stack td.stack-title { flex: 0 1 auto; order: -1; display: block; text-align: left; color: #18181b; font-weight: 500; font-size: .9375rem; padding-bottom: .25rem; }
  .table-stack td:not([data-label]):not(.stack-title):empty { display: none; }
  .table-stack td.d-none { display: none !important; }
  .table-stack caption { display: block; }
}

/* 9. Grafiek in de tab Babamlar (familiescherm, 16-10-2026)
   ----------------------------------------------------------------
   Staven als SVG van de server: uitgegeven donker, nog in de kas licht,
   maandbudget als stippellijn. Een staaf is aan te tikken (lira-bedrag
   onder de grafiek); het vlak eromheen maakt het tikdoel groter. */
.ka-grafiek text { fill: #71717a; font-size: 10px; }
.ka-grafiek line.budget, .ka-legenda line.budget { stroke: #71717a; stroke-width: 1; stroke-dasharray: 4 3; }
.ka-legenda { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.ka-legenda svg { margin-right: .375rem; vertical-align: middle; }
.ka-legenda rect.kas { fill: #d4d4d8; }
.ka-staaf { cursor: pointer; outline: none; }
.ka-staaf rect.vlak { fill: transparent; }
.ka-staaf rect.uit { fill: #18181b; }
.ka-staaf rect.kas { fill: #d4d4d8; }
.ka-staaf:focus-visible rect.vlak, .ka-staaf.actief rect.vlak { fill: rgba(24, 24, 27, .06); }