/* Design tokens: "papier & inkt". Alle kleuren in de app komen hier vandaan (contrast gecontroleerd, WCAG 2.2 AA).
   accept = alleen akkoord/geboekt + primaire knop; attention = alleen "vraagt aandacht"; error = alleen echte fouten. */
:root {
  --paper: #F7F6F2;        /* werkvlak */
  --surface: #FFFFFF;      /* kaarten, tabellen */
  --ink: #14201B;          /* sidebar, primaire tekst (15,5:1 op papier) */
  --ink-muted: #46534D;    /* secundaire tekst (7,5:1) */
  --ink-subtle: #66726C;   /* labels, hulptekst (4,6:1 op papier, 5,0:1 op wit) */
  --line: #E4E2DC;
  --line-strong: #CFCCC4;
  --accept: #2F6B4F;  --accept-hover: #25563F;  --accept-bg: #E5F0E9;  --accept-ink: #1E4D37;
  --attention: #9A4B09; --attention-bg: #FDF1DC; --attention-ink: #7A3E0B; --attention-line: #F0C98A;
  --error: #B42318;   --error-bg: #FBE4E2;   --error-ink: #8F1D1D;   --error-line: #F2B8B2;
  --neutral-bg: #EEEDE8; --neutral-ink: #46534D;
  --focus: #2F6B4F;

  --fs-12: 12px; --fs-14: 14px; --fs-16: 16px; --fs-20: 20px; --fs-24: 24px; --fs-32: 32px;
  --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-24: 24px; --sp-32: 32px; --sp-48: 48px; --sp-64: 64px;
  --r-6: 6px; --r-10: 10px;

  /* oude namen (bestaande CSS) wijzen naar de tokens */
  --moss: var(--accept); --moss-d: var(--accept-hover); --moss-l: var(--accept-bg); --muted: var(--ink-subtle);
}
html { font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
body { background: var(--paper) !important; color: var(--ink); font-size: var(--fs-14); }
.num, .tnum, td.num, .fld.num, time { font-variant-numeric: tabular-nums; }
.fld.num { font-family: inherit; }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* testversie-banner: leesbaar, 14px */
.testbanner { background: #FDF6E7; border-bottom: 1px solid var(--attention-line); color: var(--attention-ink);
  font-size: var(--fs-14); text-align: center; padding: 6px 16px; }

/* zijbalk: inkt, inactief gedempt, actief licht vlak binnen de zijbalk */
.sidebar { background: var(--ink); }
.sidebar a.nav, .sidebar button.nav { color: #93A39B; font-size: var(--fs-14); }
.sidebar a.nav:hover, .sidebar button.nav:hover { background: rgba(255,255,255,.06); color: #E6EDE9; }
.sidebar a.nav.active { background: rgba(255,255,255,.10); color: #FFFFFF; font-weight: 500; }
.sidebar .count { background: var(--accept); color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.sidebar .label { display: flex; flex-direction: column; min-width: 0; }
.exact-state { display: flex; align-items: center; gap: 6px; font-size: var(--fs-12); color: #93A39B; font-weight: 400; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #93A39B; flex: none; }
.dot.ok { background: #5FBF8F; }   /* op de donkere zijbalk; altijd met tekst ernaast */
.dot.bad { background: #F0A35E; }
.sidebar a.nav:focus-visible, .sidebar button.nav:focus-visible { outline: 2px solid #E6EDE9; outline-offset: -2px; }

/* ------------------------------------------------------------ documenttabel (Vandaag, Controleren, Inbox, Archief) */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 1200px; margin: 0 auto; }
.doctable { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-10); overflow: hidden; }
.dt-head, .dt-row { display: grid; grid-template-columns: var(--dt-cols, minmax(0, 2.2fr) 130px 140px minmax(0, 2fr) 110px);
  align-items: center; column-gap: var(--sp-16); padding: 0 var(--sp-16); }
.doctable:has(.dt-sel) .dt-head, .doctable:has(.dt-sel) .dt-row { --dt-cols: 28px minmax(0, 2.2fr) 130px 140px minmax(0, 2fr) 110px; }
.dt-head { font-size: var(--fs-12); color: var(--ink-subtle); padding-top: var(--sp-12); padding-bottom: var(--sp-8); border-bottom: 1px solid var(--line); }
.dt-row { position: relative; min-height: 60px; padding-top: var(--sp-8); padding-bottom: var(--sp-8); border-bottom: 1px solid var(--line); }
.dt-row:last-child { border-bottom: 0; }
.dt-row:hover { background: #FAFAF7; }
.dt-row:focus-within { background: #FAFAF7; box-shadow: inset 3px 0 0 var(--accept); }
.dt-supplier { display: flex; flex-direction: column; min-width: 0; }
.dt-link { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-link::after { content: ""; position: absolute; inset: 0; }   /* hele rij klikbaar */
.dt-link:focus-visible { outline: none; }
.dt-nr { font-size: var(--fs-12); color: var(--ink-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-date { color: var(--ink-muted); }
.dt-amount { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.dt-credit { font-size: var(--fs-12); color: var(--ink-subtle); }
.dt-status { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.dt-reason { font-size: var(--fs-12); color: var(--ink-subtle); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-act { text-align: right; }
.dt-action { color: var(--accept); font-weight: 500; position: relative; z-index: 1; }
.dt-row:hover .dt-action { text-decoration: underline; }
.dt-sel { position: relative; z-index: 1; }
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-12); font-weight: 500; padding: 2px 8px; border-radius: var(--r-6); white-space: nowrap; }
.badge.accept { background: var(--accept-bg); color: var(--accept-ink); }
.badge.attention { background: var(--attention-bg); color: var(--attention-ink); }
.badge.error { background: var(--error-bg); color: var(--error-ink); }
.badge.neutral { background: var(--neutral-bg); color: var(--neutral-ink); }
.empty-state { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-10); padding: var(--sp-48) var(--sp-24); text-align: center; }
.es-title { font-size: var(--fs-16); font-weight: 500; }
.es-text { color: var(--ink-muted); margin-top: var(--sp-4); }
.empty-state .btn-primary { margin-top: var(--sp-16); }
.btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--accept); color: #fff; font-weight: 500;
  padding: 9px 16px; border-radius: var(--r-6); border: 0; cursor: pointer; text-decoration: none; font-size: var(--fs-14); }
.btn-primary:hover { background: var(--accept-hover); }
.btn-primary[disabled] { opacity: .55; cursor: not-allowed; }
.btn-outline { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); color: var(--ink); font-weight: 500;
  padding: 8px 15px; border-radius: var(--r-6); border: 1px solid var(--line-strong); cursor: pointer; text-decoration: none; font-size: var(--fs-14); }
.btn-outline:hover { background: #FAFAF7; }
.btn-text { background: none; border: 0; padding: 8px 4px; color: var(--ink-muted); cursor: pointer; font-size: var(--fs-14); text-decoration: underline; text-underline-offset: 3px; }
.btn-text.danger { color: var(--error); }

/* ------------------------------------------------------------ Vandaag */
.hero { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-10); padding: var(--sp-32);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-16); }
.hero-title { font-size: var(--fs-24); font-weight: 600; letter-spacing: -0.01em; }
.hero-title .tnum { font-size: var(--fs-32); }
.hero-mail { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); }
.hero-mail .addr { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-6); padding: 6px 10px; user-select: all; }
.text-muted { color: var(--ink-muted); }
.btn-outline.sm { padding: 5px 10px; font-size: var(--fs-12); }
.attn { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-10); }
.attn-row { display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-12) var(--sp-16); color: var(--attention-ink); border-bottom: 1px solid var(--line); }
.attn-row:last-child { border-bottom: 0; }
.attn-row.err { color: var(--error-ink); }
.attn-row:hover { background: #FAFAF7; }
.attn-go { margin-left: auto; font-size: var(--fs-12); font-weight: 500; }
.banner { display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-12) var(--sp-16); border-radius: var(--r-10); }
.banner.error { background: var(--error-bg); color: var(--error-ink); border: 1px solid var(--error-line); }
.banner-act { margin-left: auto; font-weight: 500; white-space: nowrap; }
.statusline { color: var(--ink-muted); font-size: var(--fs-14); }
.section-title { font-size: var(--fs-14); font-weight: 600; color: var(--ink-muted); margin-bottom: var(--sp-8); }
.list-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-12); justify-content: space-between; }
.link { color: var(--accept); font-weight: 500; }
.link.muted { color: var(--ink-muted); font-weight: 400; }
.banner.ok { background: var(--accept-bg); color: var(--accept-ink); border: 1px solid #C5DCCD; }

/* ------------------------------------------------------------ Controleren */
.split.review { gap: var(--sp-24); }
@media (min-width: 1024px) { .split.review { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); } }
.review-top { display: flex; align-items: center; gap: var(--sp-12); }
.progress-txt { font-weight: 500; color: var(--ink-muted); }
.pager { display: flex; gap: var(--sp-8); }
.is-off { opacity: .45; cursor: default; }
.keys-btn { margin-left: auto; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-muted); font-weight: 600; }
.toast { display: flex; align-items: center; gap: var(--sp-8); background: var(--accept-bg); color: var(--accept-ink); border: 1px solid #C5DCCD;
  border-radius: var(--r-10); padding: var(--sp-12) var(--sp-16); font-weight: 500; }
.proposal { padding: var(--sp-24); display: flex; flex-direction: column; gap: var(--sp-16); }
.prop-head { display: flex; align-items: center; gap: var(--sp-12); justify-content: space-between; min-width: 0; }
.prop-title { font-size: var(--fs-20); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-12) var(--sp-16); }
.prop-grid .wide { grid-column: span 2; }
.prop-grid dt { font-size: var(--fs-12); color: var(--ink-subtle); }
.prop-grid dd { font-size: var(--fs-14); color: var(--ink); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }
.prop-grid dd.strong { font-weight: 600; font-size: var(--fs-16); }
.muted-s { color: var(--ink-subtle); font-size: var(--fs-12); }
.why { background: var(--paper); border-radius: var(--r-6); padding: var(--sp-12); color: var(--ink-muted); }
.why-l { display: block; font-size: var(--fs-12); color: var(--ink-subtle); margin-bottom: 2px; }
.note { border-radius: var(--r-6); padding: var(--sp-8) var(--sp-12); font-size: var(--fs-14); border: 1px solid transparent; }
.note ul { margin-top: 4px; padding-left: 16px; list-style: disc; }
.note.ok { background: var(--accept-bg); color: var(--accept-ink); border-color: #C5DCCD; }
.note.attention { background: var(--attention-bg); color: var(--attention-ink); border-color: var(--attention-line); }
.note.error { background: var(--error-bg); color: var(--error-ink); border-color: var(--error-line); }
.note.neutral { background: var(--neutral-bg); color: var(--neutral-ink); }
.prop-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-12); padding-top: var(--sp-8); border-top: 1px solid var(--line); }
.edit-pane { display: none; }
.review-col.editing .edit-pane { display: flex; }
.review-col.editing .prop-actions .btn-primary { opacity: .55; }
.edit-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-12); }
.dialog { border: 1px solid var(--line); border-radius: var(--r-10); padding: var(--sp-24); width: min(440px, calc(100vw - 32px)); color: var(--ink); }
.dialog::backdrop { background: rgba(20, 32, 27, .35); }
.dlg-title { font-size: var(--fs-16); font-weight: 600; margin-bottom: var(--sp-4); }
.reasons { display: flex; flex-direction: column; gap: var(--sp-8); margin: var(--sp-16) 0; }
.reasons label { display: flex; align-items: center; gap: var(--sp-8); }
.dlg-actions { display: flex; justify-content: flex-end; gap: var(--sp-12); margin-top: var(--sp-16); }
.danger-outline { color: var(--error); border-color: var(--error-line); }
.keys { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-8) var(--sp-16); margin: var(--sp-16) 0; }
kbd { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: var(--fs-12); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; background: var(--paper); }
.hero.done { align-items: center; }
.mt-2 { margin-top: 8px; }

/* ------------------------------------------------------------ Inbox */
.inbox-top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--sp-16); }
@media (max-width: 900px) { .inbox-top { grid-template-columns: 1fr; } }
.inbox-upload { padding: var(--sp-16); }
.inbox-mail { padding: var(--sp-16); display: flex; flex-direction: column; gap: var(--sp-8); align-items: flex-start; }
.inbox-mail .addr { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-6); padding: 6px 10px; max-width: 100%; overflow-wrap: anywhere; user-select: all; }
.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: var(--sp-24);
  border: 2px dashed var(--line-strong); border-radius: var(--r-10); cursor: pointer; background: var(--paper); text-align: center; }
.dropzone:hover, .dropzone.border-moss-600 { border-color: var(--accept); background: var(--accept-bg); }
.upload-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); margin-top: var(--sp-12); }
.tabs { display: flex; gap: var(--sp-4); border-bottom: 1px solid var(--line); }
.tab { padding: var(--sp-8) var(--sp-12); color: var(--ink-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab .tnum { color: var(--ink-subtle); font-size: var(--fs-12); margin-left: 4px; }
.tab.on { color: var(--ink); border-bottom-color: var(--ink); font-weight: 500; }
.steps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--fs-12); color: var(--ink-subtle); }
.steps .st { display: inline-flex; align-items: center; gap: 5px; }
.steps .st + .st::before { content: "→"; color: var(--line-strong); margin-right: 5px; }
.steps .st.done { color: var(--accept-ink); }
.steps .st.done span:first-child::before { content: "✓ "; }
.steps .st.warn { color: var(--attention-ink); }
.steps .st.active { color: var(--ink); font-weight: 500; }

/* ------------------------------------------------------------ responsief */
.tabbar, .pdf-toggle { display: none; }
@media (max-width: 1023px) {
  .split.review { display: flex; flex-direction: column; }
  .review-col { order: -1; }                      /* voorstel boven, factuur eronder */
  .pdf-toggle { display: inline-flex; }
  .pdfpane { display: none; position: static; height: 75vh; }
  .pdfpane.show { display: block; }
}
@media (max-width: 767px) {
  .app, .app.collapsed { grid-template-columns: 1fr; }
  .sidebar { display: none !important; }
  .content { padding: var(--sp-16) var(--sp-16) 96px; }
  .topbar { padding: 0 var(--sp-16); }
  .topbar .who span:last-child { display: none; }
  .tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
    background: var(--ink); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .tabbar a, .tabbar summary { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #93A39B; font-size: 11px;
    padding: 6px 2px; border-radius: 8px; list-style: none; cursor: pointer; }
  .tabbar summary::-webkit-details-marker { display: none; }
  .tabbar .on { color: #fff; background: rgba(255,255,255,.10); }
  .tabbar .ico { width: 22px; height: 22px; }
  .tabbar b { color: #fff; font-weight: 600; }
  .tabbar .more { position: relative; }
  .more-menu { position: absolute; right: 4px; bottom: calc(100% + 8px); background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-10); box-shadow: 0 8px 24px rgba(0,0,0,.18); min-width: 200px; padding: 6px; display: flex; flex-direction: column; }
  .more-menu a, .more-menu button { color: var(--ink); padding: 10px 12px; border-radius: 6px; text-align: left; background: none; border: 0; font-size: var(--fs-14); width: 100%; }
  .more-menu a:hover, .more-menu button:hover { background: var(--paper); }

  /* tabel wordt een kaartlijst: leverancier + bedrag, daaronder status + datum */
  .dt-head { display: none; }
  .dt-row, .doctable:has(.dt-sel) .dt-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "sup amt" "st date";
    row-gap: 6px; padding: var(--sp-12) var(--sp-16); }
  .doctable:has(.dt-sel) .dt-row { grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-areas: "sel sup amt" "sel st date"; }
  .dt-sel { grid-area: sel; }
  .dt-supplier { grid-area: sup; } .dt-amount { grid-area: amt; } .dt-status { grid-area: st; } .dt-date { grid-area: date; text-align: right; font-size: var(--fs-12); align-self: start; }
  .dt-act { display: none; }

  .hero { padding: var(--sp-24) var(--sp-16); }
  .hero-title { font-size: var(--fs-20); }
  .prop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* primaire knop altijd bereikbaar */
  .prop-actions { position: sticky; bottom: 72px; background: var(--surface); padding: var(--sp-12) 0; z-index: 5; }
  .review-top { flex-wrap: wrap; }
  .inbox-mail .addr { font-size: var(--fs-12); }
}