:root {
  --bg: #f4f7f9;
  --surface: #fff;
  --soft: #edf5f8;
  --text: #1b1464;
  --muted: #516a7a;
  --line: #d6e2e8;
  --green: #29abe2;
  --blue: #1b1464;
  --yellow: #f15a24;
  --red: #c94422;
  --ink: #1b1464;
  --shadow: 0 18px 45px rgba(27, 20, 100, .10);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { background: var(--bg); color: var(--text); font-family: Inter, "Segoe UI", Arial, sans-serif; margin: 0; }
body.auth-locked { background: #fff; }
body.auth-locked > header, body.auth-locked > main { display: none; }
button, input, select, textarea { font: inherit; }
button { background: var(--ink); border: 0; border-radius: 7px; color: #fff; cursor: pointer; min-height: 38px; padding: 0 14px; }
.ghost { background: #e7ece9; color: var(--ink); }
.danger { color: var(--red); }
.muted { color: var(--muted); font-size: 13px; }

.topbar { align-items: center; background: #1b1464; color: #fff; display: flex; justify-content: space-between; min-height: 104px; padding: 22px 32px; }
.topbar p, .topbar h1, h2, h3, p { margin: 0; }
.topbar p, .eyebrow { color: var(--muted); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
.topbar p { color: #b9dff1; }
.topbar h1 { font-size: 30px; }
.top-actions { display: flex; gap: 10px; }
.auth-status { align-self: center; color: #b9dff1; font-size: 13px; font-weight: 700; }
main { display: grid; gap: 18px; margin: 0 auto; max-width: 1460px; padding: 24px 28px 42px; }
.view-nav { display: flex; gap: 8px; }
.view-tab { background: #e7ece9; color: var(--ink); }
.view-tab.active { background: var(--ink); color: #fff; }
.view-section { display: none; }
body[data-view="dashboard"] .view-dashboard,
body[data-view="progress"] .view-progress,
body[data-view="invoices"] .view-invoices,
body[data-view="help"] .view-help,
body[data-view="admin"] .view-admin { display: block; }
body[data-view="dashboard"] .kpis,
body[data-view="progress"] .kpis { display: grid; }
body[data-view="invoices"] .view-shared,
body[data-view="help"] .view-shared,
body[data-view="admin"] .view-shared { display: none; }
body[data-view="dashboard"] .controls,
body[data-view="invoices"] .controls { grid-template-columns: minmax(280px, 420px); }
body[data-view="dashboard"] .controls label:nth-child(n+2),
body[data-view="dashboard"] #newGrant,
body[data-view="invoices"] .controls label:nth-child(n+2),
body[data-view="invoices"] #newGrant { display: none; }
body[data-view="help"] .controls { display: none; }
body[data-view="admin"] .controls { display: none; }

.controls { align-items: end; display: grid; gap: 12px; grid-template-columns: 1fr 190px minmax(220px, 1.2fr) auto; }
label { color: var(--muted); display: grid; font-size: 13px; font-weight: 650; gap: 6px; }
input, select, textarea { border: 1px solid var(--line); border-radius: 7px; color: var(--text); min-height: 38px; padding: 8px 10px; width: 100%; }
input[readonly] { background: #f2f5f3; color: var(--muted); cursor: not-allowed; }
textarea { resize: vertical; }

.panel, .kpis article { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.panel { padding: 18px; }
.panel-head { align-items: center; display: flex; gap: 16px; justify-content: space-between; margin-bottom: 16px; }
.panel-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.panel h2 { font-size: 20px; margin-top: 3px; }
.project-panel { border-left: 5px solid var(--green); }
.facts, .kpis, .status-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.status-cards { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.facts div, .kpis article, .status-card { background: var(--soft); border-radius: 7px; min-height: 86px; padding: 14px; }
.status-card { min-height: 72px; padding: 12px; }
.facts span, .kpis span, .status-card span { color: var(--muted); display: block; font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.facts strong, .kpis strong, .status-card strong { display: block; font-size: 23px; line-height: 1.1; }
.status-card strong { font-size: 21px; }
.kpis article { background: var(--surface); min-height: 104px; }
.grid-two { display: grid; gap: 18px; grid-template-columns: 1fr; }
body[data-view="progress"] .progress-stack { display: grid; gap: 18px; grid-template-columns: 1fr; }
.dashboard-tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 18px; }
.dashboard-tiles article, .analytics-grid article { background: var(--soft); border-radius: 8px; padding: 14px; }
.dashboard-tiles article.clickable, .action-block li.clickable, .status-card.clickable { cursor: pointer; transition: transform 140ms ease, box-shadow 140ms ease; }
.dashboard-tiles article.clickable:hover, .action-block li.clickable:hover, .status-card.clickable:hover { box-shadow: 0 10px 24px rgba(32,48,43,.13); transform: translateY(-1px); }
.dashboard-tiles span, .dashboard-tiles small { color: var(--muted); display: block; font-size: 12px; font-weight: 700; }
.dashboard-tiles strong { display: block; font-size: 22px; line-height: 1.1; margin: 7px 0; }
.analytics-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
.analytics-grid h3 { font-size: 15px; margin-bottom: 12px; }
.wide-chart { grid-column: 1 / -1; }
.chart-bars { display: grid; gap: 13px; }
.chart-row { display: grid; gap: 7px; }
.chart-label { display: flex; gap: 10px; justify-content: space-between; }
.chart-label span { color: var(--muted); font-size: 12px; }
.chart-meta { color: var(--muted); display: flex; flex-wrap: wrap; font-size: 12px; gap: 12px; }
.stack-track { background: #dfe7e3; border-radius: 999px; height: 18px; overflow: hidden; position: relative; }
.stack { display: block; height: 100%; left: 0; position: absolute; top: 0; }
.requested-stack { background: rgba(53,111,168,.42); }
.awarded-stack { background: var(--green); }
.large-funnel { display: grid; gap: 10px; }
.large-funnel .funnel-row { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) 140px; }
.dashboard-commission { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 18px; }
.commission-overview { display: grid; gap: 16px; }
.commission-title { color: var(--text); font-size: 15px; font-weight: 800; margin: 10px 0 6px; }
.commission-hero { align-items: center; display: grid; gap: 18px; grid-template-columns: 132px minmax(0, 1fr); }
.commission-ring { align-items: center; background: conic-gradient(var(--green) calc(var(--pct) * 1%), #dfe7e3 0); border-radius: 50%; display: flex; height: 132px; justify-content: center; width: 132px; }
.commission-ring span { align-items: center; background: #fff; border-radius: 50%; display: grid; font-size: 22px; font-weight: 900; height: 86px; justify-items: center; line-height: 1.05; padding: 12px; text-align: center; width: 86px; }
.commission-ring small { color: var(--muted); font-size: 11px; font-weight: 700; }
.commission-metrics { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(116px, 1fr)); }
.commission-metrics div { background: #fff; border: 1px solid var(--line); border-radius: 8px; min-height: 90px; padding: 14px 12px; }
.commission-metrics span { color: var(--muted); display: block; font-size: 12px; font-weight: 750; line-height: 1.25; margin-bottom: 8px; min-height: 30px; }
.commission-metrics strong { display: block; font-size: 18px; line-height: 1.1; white-space: nowrap; }
.commission-bars { display: grid; gap: 8px; }
.commission-row { align-items: center; display: grid; gap: 12px; grid-template-columns: minmax(132px, 170px) minmax(90px, 1fr) minmax(104px, auto); }
.commission-row span { font-size: 13px; line-height: 1.25; }
.commission-track { background: #dfe7e3; border-radius: 999px; height: 18px; overflow: hidden; }
.commission-row i { background: linear-gradient(90deg, var(--green), var(--blue)); border-radius: 999px; display: block; height: 100%; }
.commission-row strong { font-size: 14px; line-height: 1.1; text-align: right; white-space: nowrap; }
.invoice-commission { border-top: 1px solid var(--line); margin-bottom: 16px; margin-top: 22px; padding-top: 22px; }

.pill, .status-pill { border-radius: 999px; display: inline-flex; font-size: 12px; font-weight: 750; min-height: 26px; padding: 6px 10px; }
.pill { background: var(--soft); color: var(--ink); }
.funnel { display: grid; gap: 10px; }
.funnel-row { align-items: center; display: grid; gap: 12px; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) 140px; }
.funnel-track { background: #dfe7e3; border-radius: 999px; height: 26px; overflow: hidden; }
.funnel-fill { background: linear-gradient(90deg, var(--green), var(--blue)); border-radius: inherit; display: block; height: 100%; min-width: 4px; }
.red-fill { background: var(--red); }
.blue-fill { background: var(--blue); }
.funnel-row strong { text-align: right; white-space: nowrap; }

.actions { display: grid; gap: 12px; grid-template-columns: 1fr; }
.action-block { border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.action-block h3 { font-size: 15px; margin-bottom: 10px; }
.action-block ul { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.action-block li { background: #f7faf9; border: 0; border-radius: 7px; color: var(--text); display: flex; gap: 10px; justify-content: space-between; min-height: 42px; padding: 9px 10px; text-align: left; width: 100%; }
.action-block li span { color: var(--muted); font-size: 12px; text-align: right; }
.filter-note { align-items: center; background: #fff8ea; border: 1px solid #efd79d; border-radius: 8px; display: none; gap: 10px; justify-content: space-between; padding: 10px 12px; }
.filter-note.active { display: flex; }

.status-pill.toegekend { background: #dff1e9; color: #1f6a58; }
.status-pill.gedeeltelijk-toegekend { background: #e9f4d8; color: #587018; }
.status-pill.afgewezen { background: #f7e0dd; color: var(--red); }
.status-pill.ingediend { background: #e1ebf7; color: #245f9a; }
.status-pill.in-behandeling { background: #fff2c8; color: #8a5a00; }
.status-pill.nog-niet-ingediend { background: #ece7fb; color: #6045a8; }
.status-pill.open { background: #ebece8; color: #56625d; }
.status-pill { justify-content: center; min-width: 136px; text-align: center; white-space: nowrap; }
.table-wrap { overflow: auto; }
table { border-collapse: collapse; min-width: 1080px; table-layout: fixed; width: 100%; }
th, td { border-bottom: 1px solid var(--line); padding: 12px 10px; text-align: left; vertical-align: top; }
th { color: var(--muted); font-size: 12px; text-transform: uppercase; }
td { font-size: 14px; }
td:nth-child(4), td:nth-child(6), td:nth-child(7), th:nth-child(4), th:nth-child(6), th:nth-child(7) { text-align: right; }
.row-actions { text-align: right; }
td:nth-child(5), th:nth-child(5) { width: 170px; }
.month-filters { display: grid; gap: 8px; grid-template-columns: repeat(12, minmax(72px, 1fr)); margin-bottom: 12px; }
.month-chip { background: var(--soft); color: var(--ink); display: grid; gap: 2px; min-height: 48px; padding: 7px 6px; text-align: center; }
.month-chip.active { background: var(--green); color: #fff; }
.month-chip.has-open:not(.active) { box-shadow: inset 0 -3px 0 var(--yellow); }
.month-chip small { font-size: 10px; line-height: 1.2; }

.client-report { display: grid; gap: 14px; line-height: 1.5; }
.client-report .closing-text { margin-top: 14px; }
.client-summary { display: grid; gap: 10px; grid-template-columns: repeat(4, 1fr); }
.client-summary div { background: var(--soft); border-radius: 7px; padding: 12px; }
.client-summary span { display: block; margin-bottom: 6px; }
.client-summary strong { display: block; }
.client-report ul { margin: 0; padding-left: 18px; }

dialog { border: 0; border-radius: 8px; box-shadow: 0 28px 90px rgba(0, 0, 0, .28); max-width: 900px; width: calc(100% - 28px); }
dialog::backdrop { background: rgba(16, 24, 22, .55); }
#authDialog { border-radius: 0; box-shadow: none; max-width: none; min-height: 100vh; padding: 0; width: 100vw; }
#authDialog::backdrop { background: #fff; }
#authDialog form { margin: 0 auto; max-width: 940px; min-height: 100vh; padding: 34px 24px 44px; }
.auth-brand { display: grid; gap: 34px; justify-items: center; margin: 0 auto 68px; text-align: center; }
.auth-brand img { display: block; max-height: 230px; max-width: min(100%, 980px); object-fit: contain; width: 100%; }
.auth-brand p { color: #f15a24; font-size: 16px; font-weight: 850; letter-spacing: .24em; text-transform: uppercase; }
.dialog-head, .dialog-actions { align-items: center; display: flex; justify-content: space-between; }
.icon { background: transparent; color: var(--text); min-height: 32px; padding: 0 10px; }
.form-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); margin: 18px 0; }
.span-2 { grid-column: 1 / -1; }
.check { align-items: center; color: var(--text); display: flex; flex-direction: row; gap: 9px; }
.check input { min-height: auto; width: auto; }
.import-panel { display: grid; gap: 16px; margin-top: 16px; max-width: 780px; }
.upload-box { background: var(--soft); border: 1px dashed var(--green); border-radius: 8px; padding: 14px; }
.auth-flow { display: grid; gap: 14px; margin-top: 0; }
.auth-flow section { display: grid; gap: 12px; }
.auth-copy { display: grid; gap: 12px; margin-bottom: 10px; }
.auth-copy p { line-height: 1.55; }
.auth-flow a { color: #f15a24; font-weight: 800; }
.mfa-qr { align-items: center; background: var(--soft); border-radius: 8px; display: flex; justify-content: center; min-height: 180px; padding: 14px; }
.mfa-qr img, .mfa-qr svg { display: block; max-height: 180px; max-width: 180px; }
.admin-layout, .admin-form { display: grid; gap: 12px; }
.admin-form { align-items: end; grid-template-columns: minmax(240px, 1fr) 180px auto; }
.help-content { display: grid; gap: 18px; }
.help-content > p { line-height: 1.55; max-width: 820px; }
.help-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.help-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.help-grid article, .help-steps { background: var(--soft); border-radius: 8px; padding: 14px; }
.help-grid h3, .help-steps h3 { font-size: 16px; margin-bottom: 7px; }
.help-grid p, .help-steps li { line-height: 1.45; }
.help-steps ol { margin: 10px 0 0; padding-left: 22px; }
.help-dialog-content { margin: 18px 0; }

@media (max-width: 980px) {
  .topbar, .top-actions { align-items: stretch; flex-direction: column; }
  .controls, .facts, .kpis, .grid-two, .status-cards, .client-summary, .form-grid, .dashboard-tiles, .analytics-grid, .month-filters, .commission-hero, .commission-metrics, .help-grid, .help-grid.compact, .admin-form { grid-template-columns: 1fr; }
  main { padding: 18px 14px 32px; }
}

@media (min-width: 981px) and (max-width: 1250px) {
  .analytics-grid { grid-template-columns: 1fr; }
  .status-cards { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .commission-metrics { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
}