/* Kasboek: Excel voor de boekhouder (venster) en Kasboek > Jaar in Barts kleuren (Arthur 19/10/2026).
   assets/js/tabs/kasboek-export.js. Barts kleuren komen als bronkleur binnen (xls_kleuren.json) en
   worden hier zachter gemengd met de kaart, zodat de cijfers leesbaar blijven. In het donkere thema (UX fase 4)
   mengen ze met de donkere kaart, iets sterker, en is de tekst licht. */
:root, [data-theme] {
  --kbj-grond: var(--surface);
  --kbj-tekst: var(--text);
  --kbj-record: var(--p-excel-groen);
  --kbj-dicht: var(--p-excel-rood);
  --kbj-top: var(--p-blauw-mid);
  --kbj-meng: 22%;
  --kbx-grond: var(--surface);
  --kbx-weg: var(--err-bg);
}
:root[data-theme="dark"], [data-theme="dark"] { --kbj-meng: 38%; }

/* ---------- Jaar: Barts groen (beste maand ooit) en rood (dicht) ---------- */
.xl-jaar td.kbj-record { background: color-mix(in srgb, var(--kbj-record) var(--kbj-meng), var(--kbj-grond));
  box-shadow: inset 3px 0 0 var(--kbj-record); color: var(--kbj-tekst); }
.xl-jaar td.kbj-dicht { background: color-mix(in srgb, var(--kbj-dicht) var(--kbj-meng), var(--kbj-grond));
  box-shadow: inset 3px 0 0 var(--kbj-dicht); color: var(--kbj-tekst); }
.xl-jaar td.kbj-dicht:empty::after { content: "dicht"; font-size:var(--t-xs); font-style: italic; color: var(--kbj-tekst); opacity: .75; }
.xl-jaar thead th { font-weight: 700; }
.xl-jaar td.kbj-top { background: color-mix(in srgb, var(--kbj-top) var(--kbj-meng), var(--kbj-grond));
  box-shadow: inset 3px 0 0 var(--kbj-top); color: var(--kbj-tekst); }
.kbj-legende i.kbj-top { background: color-mix(in srgb, var(--kbj-top) var(--kbj-meng), var(--kbj-grond)); box-shadow: inset 3px 0 0 var(--kbj-top); }
.kbj-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 10px; font-size:var(--t-s); color: var(--text-2); }
.kbj-legende span { display: inline-flex; align-items: center; gap: 6px; }
.kbj-legende i { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.kbj-legende i.kbj-record { background: color-mix(in srgb, var(--kbj-record) var(--kbj-meng), var(--kbj-grond)); box-shadow: inset 3px 0 0 var(--kbj-record); }
.kbj-legende i.kbj-dicht { background: color-mix(in srgb, var(--kbj-dicht) var(--kbj-meng), var(--kbj-grond)); box-shadow: inset 3px 0 0 var(--kbj-dicht); }
.kbj-grafiek { width: 100%; height: 380px; margin: 6px 0 4px; }
@media (max-width: 640px) { .kbj-grafiek { height: 300px; } }
/* Uren & lonen > Jaar (Arthur 21/10): de bron per periode boven de grafiek */
.xl-pj-bron { margin: 4px 0 8px; }
.xl-pj-bron ul { margin: 2px 0 6px; padding-left: 18px; }
.xl-pj-bron p { margin: 2px 0; }

/* ---------- het venster ---------- */
body.kbx-open { overflow: hidden; }
.kbx-scherm { position: fixed; inset: 0; z-index: 1500; background: rgba(28, 24, 18, .45); display: flex; align-items: stretch; justify-content: center; padding: 18px; }
.kbx-paneel { position: relative; background: var(--kbx-grond); color: var(--text); border-radius: var(--r-l, 12px); box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
  width: min(1400px, 100%); display: flex; flex-direction: column; overflow: hidden; }
.kbx-paneel > .loading, .kbx-paneel > .note { margin: 20px; }
.kbx-kop { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.kbx-kop h2 { margin: 0; font-size:var(--t-l); display: inline-flex; align-items: center; gap: 8px; }
.kbx-maand { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; }
.kbx-mtitel { min-width: 9.5em; text-align: center; }
.kbx-mkies { max-width: 11em; }
.kbx-dicht { margin-left: auto; }
.kbx-lijf { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(270px, 330px) 1fr; }
.kbx-keuze { overflow: auto; padding: 12px 14px; border-right: 1px solid var(--line); }
.kbx-voorbeeld { overflow: hidden; padding: 12px 14px; display: flex; flex-direction: column; min-width: 0; }
.kbx-voorbeeld h3 { margin: 0 0 8px; font-size:var(--t-base); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.kbx-blok { margin-bottom: 16px; }
.kbx-blok h3 { margin: 0 0 4px; font-size:var(--t-ml); }
.kbx-blok .t-meta { margin: 0 0 6px; }
.kbx-kols { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.kbx-kols li { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-3); cursor: grab; }
.kbx-kols li.uit { opacity: .62; background: transparent; }
.kbx-kols li.sleept { opacity: .4; }
.kbx-kols li.doel { border-color: var(--brand-deep); box-shadow: 0 -3px 0 var(--brand); }
.kbx-kols label { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; cursor: pointer; }
.kbx-greep { color: var(--text-faint); display: inline-flex; }
.kbx-greep svg { width: 16px; height: 16px; }
.kbx-stip { width: 10px; height: 10px; border-radius: 2px; background: var(--kk); border: 1px solid rgba(0, 0, 0, .25); flex: none; }
.kbx-deel { font-size:var(--t-xs); color: var(--text-3); border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; white-space: nowrap; }
.kbx-pijlen { display: inline-flex; gap: 2px; }
.kbx-pijlen button { min-width: 28px; min-height: 28px; padding: 0 4px; }
.kbx-vink { display: flex; align-items: center; gap: 8px; padding: 3px 0; cursor: pointer; }
.kbx-dagkop { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.kbx-dagen { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 4px; margin-top: 4px; }
.kbx-dag { display: flex; align-items: center; gap: 4px; font-size:var(--t-s); padding: 2px 4px; border-radius: 6px; background: var(--surface-3); cursor: pointer; white-space: nowrap; }
.kbx-dag.leeg { color: var(--text-faint); background: transparent; }
.kbx-celuit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.kbx-blad { display: flex; flex-direction: column; min-height: 0; flex: 1; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--raised); color: var(--text-strong); padding: 10px; }
.kbx-bladkop { display: flex; flex-direction: column; margin-bottom: 8px; font-size:var(--t-m); }
.kbx-bladkop strong { font-size:var(--t-base); }
.kbx-wrap { flex: 1; min-height: 120px; overflow: auto; }
.kbx-tabel { border-collapse: collapse; font-size:var(--t-s); font-variant-numeric: tabular-nums; }
.kbx-tabel th, .kbx-tabel td { border: 1px solid var(--steen-licht); padding: 3px 7px; white-space: nowrap; }
.kbx-tabel thead th { position: sticky; top: 0; z-index: 1; background: color-mix(in srgb, var(--kk, var(--steen-licht)) 55%, var(--raised)); font-weight: 700; text-align: center; }
.kbx-tabel thead th:nth-child(-n+2) { background: var(--steen-licht); }
.kbx-tabel .r { text-align: right; }
.kbx-cel { cursor: pointer; }
.kbx-cel:hover, .kbx-cel:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.kbx-celweg { color: var(--steen); text-decoration: line-through; background: repeating-linear-gradient(135deg, var(--kbx-weg) 0 6px, transparent 6px 12px); }
.kbx-tot td, .kbx-tot th { font-weight: 700; border-top: 2px solid var(--zwart); border-bottom: 3px double var(--zwart); text-align: left; }
.kbx-tot td { text-align: right; }
.kbx-weg { margin: 6px 0 0; }
.kbx-sam { margin-top: 10px; border-collapse: collapse; font-size:var(--t-m); }
.kbx-sam td { padding: 2px 10px 2px 0; }
.kbx-pop { position: absolute; z-index: 5; background: var(--raised); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: var(--shadow-pop); padding: 4px; }
.kbx-pop button { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.kbx-pop button.gevaar { color: var(--wijn); }

.kbx-voet { border-top: 1px solid var(--line); padding: 10px 16px; display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: center; }
.kbx-std { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kbx-doe { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.kbx-waarom { grid-column: 1 / -1; margin: 0; text-align: right; }
.kbx-log { grid-column: 1 / -1; margin: 0; padding: 0; list-style: none; font-size:var(--t-s); color: var(--text-2); }
.kbx-log li { display: flex; align-items: center; gap: 6px; }
.kbx-log svg { width: 14px; height: 14px; }

@media (max-width: 860px) {
  .kbx-scherm { padding: 0; }
  .kbx-paneel { border-radius: 0; overflow: auto; }
  .kbx-lijf { display: flex; flex-direction: column; }
  .kbx-keuze { border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; }
  .kbx-voorbeeld { overflow: visible; }
  .kbx-wrap { max-height: 60vh; }
  .kbx-voet { grid-template-columns: 1fr; position: sticky; bottom: 0; background: var(--kbx-grond); }
  .kbx-doe { justify-content: stretch; }
  .kbx-doe button { flex: 1; }
  .kbx-waarom { text-align: left; }
}
/* Kasboek > Jaar: tussenstand van de lopende maand (Bart 25/10) */
.xl-tussen { margin: 8px 0 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.xl-tussen .tblwrap { margin-top: 6px; }
.xl-tussen-t th, .xl-tussen-t td { white-space: nowrap; }