/* Boekhouding — design tokens follow Arcavo 2.14+ (besluit Deel D punt 10). Geist self-hosted (OFL). */
@font-face { font-family: Geist; src: url("../fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  --bg: #FFFFFF; --sidebar: #F7F7F5; --card: #FFFFFF; --border: #E7E7E4; --border-soft: #F1F1EE; --border-input: #E1E1DD;
  --hover: #EFEFEC; --active: #EAEAE7; --field: #FFFFFF;
  --text: #18191A; --text-2: #3F4341; --muted: #5B5F5C; --faint: #6E726F;
  --accent: #135C46; --accent-hover: #0D4535; --accent-light: #EEF4F1; --on-accent: #FFFFFF;
  --warn-text: #8A4B0E; --warn-bg: #FBF4EA; --warn-border: #F1E2CC;
  --block-text: #B42318; --block-bg: #FDF3F2; --block-border: #F2D3CF;
  --ok-text: #135C46; --ok-bg: #EEF4F1;
  --rail: #232826; --rail-text: #B9C1BD; --rail-active: #2E9A72; --rail-hover: #2C322F;
  --panel: #D6E3DC; --panel-line: #BFD1C7; --panel-text-2: #3F4A45; --panel-strong: #A9C2B5; --panel-hover: rgba(255,255,255,.35);
  --radius: 8px; --radius-s: 6px;
  --sans: Geist, 'Helvetica Neue', Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111312; --sidebar: #181B1A; --card: #181B1A; --border: #262B29; --border-soft: #1D2120; --border-input: #2F3532;
    --hover: #1F2422; --active: #262B29; --field: #181B1A;
    --text: #ECEEEC; --text-2: #C9CECB; --muted: #9AA19D; --faint: #858C88;
    --accent: #5FB394; --accent-hover: #7CC6AA; --accent-light: #17251F; --on-accent: #0B1310;
    --warn-text: #E3A35B; --warn-bg: #2A2217; --warn-border: #3D3220;
    --block-text: #F08A7E; --block-bg: #2B1A18; --block-border: #4A2A26;
    --ok-text: #5FB394; --ok-bg: #17251F;
    --rail: #0A0C0B; --rail-text: #A3ACA7; --rail-hover: #161A18;
    --panel: #18231E; --panel-line: #29392F; --panel-text-2: #A7B7AE; --panel-strong: #3A5144; --panel-hover: rgba(255,255,255,.04);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111312; --sidebar: #181B1A; --card: #181B1A; --border: #262B29; --border-soft: #1D2120; --border-input: #2F3532;
  --hover: #1F2422; --active: #262B29; --field: #181B1A; --text: #ECEEEC; --text-2: #C9CECB; --muted: #9AA19D; --faint: #858C88;
  --accent: #5FB394; --accent-hover: #7CC6AA; --accent-light: #17251F; --on-accent: #0B1310; --warn-text: #E3A35B; --warn-bg: #2A2217; --warn-border: #3D3220;
  --block-text: #F08A7E; --block-bg: #2B1A18; --block-border: #4A2A26; --ok-text: #5FB394; --ok-bg: #17251F; --rail: #0A0C0B; --rail-text: #A3ACA7; --rail-hover: #161A18; --panel: #18231E; --panel-line: #29392F; --panel-text-2: #A7B7AE; --panel-strong: #3A5144; --panel-hover: rgba(255,255,255,.04); color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 var(--sans); font-variant-numeric: tabular-nums; }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 16px; }
h2 { font-size: 15px; font-weight: 600; margin: 0 0 8px; } h3 { font-size: 14px; font-weight: 600; margin: 0 0 6px; }
.muted { color: var(--muted); } .faint { color: var(--faint); font-size: 13px; } .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.neg { color: var(--block-text); }

/* shell: black rail left (desktop), tab bar bottom (mobile) */
.shell { display: flex; min-height: 100vh; }
.content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.rail { background: var(--rail); color: var(--rail-text); display: flex; flex-direction: column; align-items: center; padding: 12px 0 8px; position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: none; }
.rail .brand { color: #fff; font-weight: 600; font-size: 12px; letter-spacing: .02em; margin-bottom: 14px; text-align: center; }
.rail nav { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 0 8px; }
.rail a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 8px; color: var(--rail-text); font-size: 10px; min-height: 44px; }
.rail a:hover { background: var(--rail-hover); text-decoration: none; color: #fff; }
.rail a.active { color: #fff; } .rail a.active svg { background: var(--rail-active); border-radius: 999px; padding: 4px; color: #fff; }
.rail svg { width: 20px; height: 20px; padding: 3px; box-sizing: content-box; }
.rail .foot { margin-top: auto; padding-top: 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; flex-shrink: 0; }
.rail .avatar { width: 32px; height: 32px; border-radius: 999px; background: #4A534F; color: #E4E8E6; display: grid; place-items: center; font-weight: 600; }
.rail .logout { background: none; border: 0; color: var(--rail-text); cursor: pointer; font: inherit; font-size: 11px; min-height: 44px; }
.main { padding: 24px 32px 48px; max-width: 1100px; width: 100%; flex: 1 1 auto; }
.side-panel { width: 340px; flex-shrink: 0; background: var(--panel); position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 18px 20px 32px; display: flex; flex-direction: column; gap: 24px; color: var(--text); }
.panel-section { display: flex; flex-direction: column; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 6px; }
.panel-head h2 { font-size: 13px; font-weight: 600; margin: 0; } .panel-head a { font-size: 13px; color: var(--accent-hover); }
.panel-count { font-weight: 400; color: var(--panel-text-2); }
.panel-row { display: flex; flex-direction: column; gap: 1px; padding: 10px 0; border-top: 1px solid var(--panel-line); color: var(--text); text-decoration: none; }
.panel-section .panel-row:last-of-type, .panel-section .panel-kv:last-of-type { border-bottom: 1px solid var(--panel-line); }
a.panel-row:hover { text-decoration: none; background: var(--panel-hover); }
.panel-title { font-size: 14px; } .panel-meta { font-size: 12px; color: var(--panel-text-2); }
.panel-empty { margin: 0; padding: 10px 0; font-size: 13px; color: var(--panel-text-2); border-top: 1px solid var(--panel-line); }
.panel-kv { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--panel-line); font-size: 13px; }
.panel-kv span:first-child { color: var(--panel-text-2); } .panel-kv span:last-child { text-align: right; }
.panel-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 10px; } .panel-actions .btn { background: var(--field); border-color: var(--panel-strong); }
.signal.panel-row { position: relative; padding-left: 16px; } .signal.panel-row::before { content: ""; position: absolute; left: 0; top: 17px; width: 6px; height: 6px; border-radius: 3px; background: var(--accent); }
.signal.panel-row.blocking::before { background: var(--block-text); } .signal.panel-row.warning::before { background: var(--warn-text); }
@media (max-width: 1200px) { .shell { flex-wrap: wrap; } .content { flex: 1 1 calc(100% - 84px); } .side-panel { width: auto; height: auto; position: static; flex: 1 1 100%; margin-left: 84px; padding: 24px 32px 40px; } }
.topbar { display: none; }
.tabbar { display: none; }
.badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--rail-active); color: #fff; font-size: 11px; line-height: 18px; text-align: center; margin-left: 4px; }
@media (max-width: 900px) {
  .shell { display: block; } .rail { display: none; } .side-panel { display: none; }
  .topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top)); background: var(--rail); color: #fff; position: sticky; top: 0; z-index: 20; }
  .topbar a { color: #fff; font-weight: 600; }
  .main { padding: 16px 16px calc(80px + env(safe-area-inset-bottom)); }
  .tabbar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--card); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); z-index: 20; }
  .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; min-height: 56px; color: var(--muted); font-size: 11px; }
  .tabbar a.active { color: var(--accent); } .tabbar svg { width: 24px; height: 24px; }
  h1 { font-size: 20px; }
}

/* sections: thin line above, no shadows (Arcavo 2.14) */
.section { border-top: 1px solid var(--border); padding: 16px 0 20px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.kpi { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 8px; }
.kpi > div { border-top: 1px solid var(--border); padding-top: 10px; } .kpi .label { font-size: 12px; color: var(--muted); } .kpi .value { font-size: 20px; font-weight: 600; }
.card { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; background: var(--card); }

/* tables */
table.data { width: 100%; border-collapse: collapse; }
table.data th { text-align: left; font-weight: 500; color: var(--muted); font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
table.data td { padding: 8px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
table.data tr:hover td { background: var(--hover); }
table.data th.num, table.data td.num { text-align: right; }
@media (max-width: 700px) { table.data .hide-m { display: none; } }

/* work queue items */
.item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid var(--border-soft); align-items: start; }
.item .meta { font-size: 12px; color: var(--muted); } .item .actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500; border: 1px solid var(--border); color: var(--text-2); background: var(--sidebar); }
.chip-warn { color: var(--warn-text); background: var(--warn-bg); border-color: var(--warn-border); }
.chip-block { color: var(--block-text); background: var(--block-bg); border-color: var(--block-border); }
.chip-ok { color: var(--ok-text); background: var(--ok-bg); border-color: transparent; }
.chip-accent { color: var(--accent); background: var(--accent-light); border-color: transparent; }
.notice { padding: 10px 14px; border-radius: var(--radius-s); border: 1px solid var(--border); margin: 0 0 12px; }
.notice-warn { color: var(--warn-text); background: var(--warn-bg); border-color: var(--warn-border); }
.notice-block { color: var(--block-text); background: var(--block-bg); border-color: var(--block-border); }
.notice-ok { color: var(--ok-text); background: var(--ok-bg); border-color: transparent; }
.flashes { margin-bottom: 12px; } .flash { padding: 10px 14px; border-radius: var(--radius-s); border: 1px solid var(--border); margin-bottom: 6px; }
.flash-success { color: var(--ok-text); background: var(--ok-bg); border-color: transparent; } .flash-error { color: var(--block-text); background: var(--block-bg); border-color: var(--block-border); }
.flash-warning { color: var(--warn-text); background: var(--warn-bg); border-color: var(--warn-border); }

/* buttons & forms (≥44px on touch) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 6px 14px; border-radius: var(--radius-s); border: 1px solid var(--border-input); background: var(--card); color: var(--text); font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--hover); text-decoration: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .btn-primary:hover { background: var(--accent-hover); }
.btn-danger { color: var(--block-text); border-color: var(--block-border); } .btn-sm { min-height: 32px; padding: 4px 10px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 900px) { .btn { min-height: 44px; } .btn-sm { min-height: 40px; } }
form.inline { display: inline; } .form-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
label { font-size: 13px; color: var(--text-2); font-weight: 500; }
input, select, textarea { font: inherit; color: var(--text); background: var(--field); border: 1px solid var(--border-input); border-radius: var(--radius-s); padding: 8px 10px; min-height: 40px; width: 100%; }
textarea { min-height: 80px; } input[type=checkbox] { width: auto; min-height: 0; }
.form-grid { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.actions-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .filters a { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-2); font-size: 13px; } .filters a.active { background: var(--accent-light); color: var(--accent); border-color: transparent; }
pre.content { background: var(--sidebar); border: 1px solid var(--border); border-radius: var(--radius-s); padding: 10px; overflow: auto; font-size: 12px; max-height: 400px; }
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; } dl.kv dt { color: var(--muted); } dl.kv dd { margin: 0; }
.doc-frame { width: 100%; height: 70vh; border: 1px solid var(--border); border-radius: var(--radius-s); background: #fff; }
.checklist li { list-style: none; padding: 6px 0; border-bottom: 1px solid var(--border-soft); } .checklist ul { padding: 0; margin: 0; }
.ok::before { content: "✓ "; color: var(--ok-text); } .nok::before { content: "✗ "; color: var(--block-text); }
.auth-main { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--sidebar); }
.auth-card { width: 100%; max-width: 400px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.auth-card h1 { font-size: 20px; margin: 0; } .auth-card form { display: flex; flex-direction: column; gap: 12px; } .auth-card .btn { min-height: 40px; width: 100%; }
.auth-card .form-row { margin: 0; } .auth-card p { margin: 0; }
.auth-brand { display: flex; align-items: center; gap: 12px; } .auth-brand img { border-radius: 10px; }
.brand-name { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; } .brand-sub { font-size: 11px; color: var(--faint); letter-spacing: .04em; text-transform: uppercase; }
.rail .brand img { display: block; border-radius: 8px; }
.chat { display: flex; flex-direction: column; gap: 12px; } .chat .q { font-weight: 500; } .chat .a { white-space: pre-wrap; border-left: 2px solid var(--accent); padding-left: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.htmx-request .spinner { display: inline; } .spinner { display: none; }

/* Mobile overrides (after the component rules so they win at equal specificity). */
@media (max-width: 900px) {
  .item { grid-template-columns: 1fr; } .item .actions { justify-content: flex-start; width: 100%; }
  .item .actions input, .item .actions select { flex: 1; min-width: 0; width: auto; }
  .kpi { grid-template-columns: 1fr 1fr; }
  .grid { grid-template-columns: 1fr; }
}