
:root {
  --select-bg: rgba(255,255,255,.05);
  --select-text: var(--text);
  --select-border: var(--line);
  --panel-accent: rgba(56,189,248,.12);
  --panel-accent-2: rgba(167,139,250,.12);
  --sidebar-grad-start: rgba(15,23,42,.82);
  --sidebar-grad-end: rgba(17,24,39,.92);
  --topbar-grad-start: rgba(15,23,42,.28);
  --topbar-grad-end: rgba(17,24,39,.12);
  --kpi-grad-start: rgba(56,189,248,.16);
  --kpi-grad-end: rgba(167,139,250,.10);
}

body.theme-light {
  --bg: #f3f6fb;
  --panel: #ffffff;
  --panel-2: #eef3f9;
  --line: #d8e0ea;
  --text: #0f172a;
  --muted: #5b6b80;
  --accent: #0ea5e9;
  --accent-2: #0284c7;
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
  --shadow: 0 18px 40px rgba(15, 23, 42, .08);
  --select-bg: #ffffff;
  --select-text: #0f172a;
  --select-border: #cfd8e3;
  --panel-accent: rgba(14,165,233,.10);
  --panel-accent-2: rgba(99,102,241,.10);
  --sidebar-grad-start: rgba(255,255,255,.95);
  --sidebar-grad-end: rgba(238,243,249,.92);
  --topbar-grad-start: rgba(255,255,255,.82);
  --topbar-grad-end: rgba(238,243,249,.68);
  --kpi-grad-start: rgba(14,165,233,.14);
  --kpi-grad-end: rgba(99,102,241,.10);
}

:root {
  --bg: #0f172a;
  --panel: #111827;
  --panel-2: #1f2937;
  --line: #243245;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --accent: #38bdf8;
  --accent-2: #0ea5e9;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --radius: 18px;
  --shadow: 0 18px 40px rgba(15, 23, 42, .28);
}
* { box-sizing: border-box; min-width: 0; }
html { overflow-x: hidden; }
body { margin: 0; font-family: Inter, Arial, sans-serif; background: linear-gradient(180deg, #0b1220 0%, #111827 100%); color: var(--text); overflow-x: hidden; }
body.theme-light { background: linear-gradient(180deg, #f5f8fc 0%, #eef3f9 100%); color: var(--text); }
body.theme-light .sidebar { background: rgba(255,255,255,.88); }
body.theme-light .nav-item { background: rgba(15,23,42,.02); }
body.theme-light .nav-item:hover,
body.theme-light .nav-item.is-active { background: rgba(14,165,233,.10); }
body.theme-light .card,
body.theme-light .setup-card { background: rgba(255,255,255,.96); }
body.theme-light .topbar__search { background: #fff; }
body.theme-light .mini-pill,
body.theme-light .chip,
body.theme-light .toolbar-pill,
body.theme-light .status-pill { background: rgba(15,23,42,.03); }
a { color: inherit; text-decoration: none; }
p, li, span { line-height: 1.45; }
button, input { font: inherit; }
.app-shell { display: grid; grid-template-columns: minmax(240px, 280px) minmax(0, 1fr); min-height: 100vh; width: 100%; }
.sidebar { padding: 24px 18px; border-right: 1px solid var(--line); background: linear-gradient(180deg, var(--sidebar-grad-start), var(--sidebar-grad-end)); backdrop-filter: blur(12px); }
.sidebar__brand { display:flex; gap:14px; align-items:center; margin-bottom: 24px; }
.sidebar__logo, .avatar { width: 42px; height: 42px; border-radius: 14px; display:grid; place-items:center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #03111d; font-weight: 800; flex: 0 0 auto; }
.sidebar__brand h1 { margin:0; font-size: 1rem; }
.sidebar__brand p, .sidebar__meta p, .card__meta, .muted-paragraph { margin: 4px 0 0; color: var(--muted); font-size: .92rem; }
.sidebar__nav { display:flex; flex-direction:column; gap:8px; margin-bottom: 18px; }
.sidebar__section-label, .eyebrow { color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 700; }
.nav-item { padding: 12px 14px; border: 1px solid transparent; border-radius: 14px; background: rgba(255,255,255,.02); }
.nav-item:hover, .nav-item.is-active { border-color: rgba(56,189,248,.35); background: linear-gradient(135deg, rgba(56,189,248,.16), rgba(167,139,250,.12)); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.nav-item__label { display:block; font-weight:700; }
.nav-item__caption { display:block; color: var(--muted); font-size:.87rem; margin-top: 3px; }
.notification-stack { display:flex; flex-wrap: wrap; gap:8px; margin-top:12px; }
.mini-pill, .chip, .toolbar-pill { display:inline-flex; align-items:center; gap:6px; padding: 7px 10px; border-radius:999px; border:1px solid var(--line); background: rgba(255,255,255,.03); color: var(--text); font-size:.84rem; max-width: 100%; }
.mini-pill--warning { border-color: rgba(245,158,11,.35); }
.mini-pill--success { border-color: rgba(34,197,94,.35); }
.main-shell { display:flex; flex-direction:column; min-width:0; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:20px; padding: 22px 28px; border-bottom:1px solid var(--line); flex-wrap: wrap; background: linear-gradient(180deg, var(--topbar-grad-start), var(--topbar-grad-end)); }
.topbar__status-row { display:flex; align-items:center; gap:10px; color: var(--muted); flex-wrap: wrap; }
.dot { width:6px; height:6px; border-radius:50%; background: var(--success); }
.topbar__search { flex:1 1 320px; min-width: 220px; max-width: 640px; border:1px solid var(--line); background: rgba(255,255,255,.03); border-radius: 14px; color: var(--muted); padding: 13px 14px; }
.topbar__actions { display:flex; align-items:center; gap:10px; flex-wrap: wrap; justify-content: flex-end; }
.page-shell { padding: clamp(18px, 2vw, 28px); display:flex; flex-direction:column; gap:22px; width: 100%; max-width: 100%; }
.page-header { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; flex-wrap: wrap; }
.page-header h2 { margin: 6px 0; font-size: 2rem; }
.page-header p { margin:0; color: var(--muted); max-width: 780px; }
.card, .setup-card { background: rgba(15,23,42,.66); border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card { padding: 20px; position: relative; overflow: hidden; }
.card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--accent), rgba(167,139,250,.95), rgba(34,197,94,.85)); opacity: .9; }
.kpi-grid { display:grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap:16px; }
.kpi-grid--four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.kpi-grid--three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.kpi-grid--two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.kpi-card { display:flex; flex-direction:column; gap:10px; background: linear-gradient(135deg, var(--kpi-grad-start), var(--kpi-grad-end)); border-radius: 16px; padding: 14px; }
.kpi-card__value, .tile-card__value { font-size: clamp(1.25rem, 2vw, 1.65rem); font-weight: 800; letter-spacing: -.02em; }
.content-grid { display:grid; gap:16px; }
.content-grid--home { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(280px, .8fr); }
.content-grid--today, .content-grid--analysis, .content-grid--reports, .content-grid--platform { grid-template-columns: repeat(3, minmax(0,1fr)); }
.content-grid--imports, .content-grid--settings { grid-template-columns: repeat(2, minmax(0,1fr)); }
.panel, .inspector { display:flex; flex-direction:column; gap:16px; }
.panel__header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap: wrap; }
.stat-list, .attention-list, .timeline-list, .insight-stack, .button-stack, .list-grid, .wizard-strip, .table-simple { display:flex; flex-direction:column; gap:12px; }
.filter-list { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:12px; align-items:stretch; }
.stat-row, .timeline-item, .list-card__row, .table-simple__row, .transaction-table__head, .transaction-row, .toolbar-row, .budget-card__header, .budget-card__metrics, .table-simple__inline { display:flex; gap:12px; justify-content:space-between; align-items:center; }
.attention-item, .timeline-item, .table-simple__row, .list-card, .budget-card, .tile-card, .source-card { border:1px solid var(--line); border-radius: 14px; padding: 14px; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)); }
.insight-box { border:1px solid var(--line); border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:8px; }
.bullet-list { margin:0; padding-left: 18px; color: var(--muted); }
.bullet-list li + li { margin-top:8px; }
.workspace-layout { display:grid; gap:16px; grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(300px, 340px); align-items: start; }
.workspace-layout--wide { grid-template-columns: minmax(200px, 240px) minmax(0, 1.65fr) minmax(300px, 360px); }
.workspace-panel { min-width:0; }
.filter-item { width:100%; min-width:0; min-height:100%; border:1px solid var(--line); background: rgba(255,255,255,.02); color: var(--text); padding: 12px 14px; border-radius: 14px; display:flex; justify-content:space-between; align-items:center; gap:10px; cursor:pointer; }
.filter-item.is-active { border-color: rgba(56,189,248,.35); background: rgba(56,189,248,.1); }
.transaction-table { display:flex; flex-direction:column; gap:10px; overflow-x: auto; max-width: 100%; }
.transaction-table__head, .transaction-row { display:grid; grid-template-columns: minmax(90px, .9fr) minmax(120px, 1.1fr) minmax(150px, 1.4fr) minmax(110px, .9fr) minmax(90px, .8fr) minmax(90px, .8fr); gap:12px; align-items:center; min-width: 0; }
.transaction-table__head { color: var(--muted); font-size:.86rem; padding: 0 6px; }
.transaction-row { padding: 12px 10px; border:1px solid var(--line); border-radius:14px; background: rgba(255,255,255,.02); min-width: 0; }
.transaction-row > * { min-width: 0; overflow-wrap: anywhere; }
.transaction-row.is-selected, .list-card.is-selected { border-color: rgba(56,189,248,.35); background: rgba(56,189,248,.08); }
.transaction-row__status { grid-column: 1 / -1; display:flex; gap:8px; flex-wrap: wrap; }
.inspector-metric { display:flex; justify-content:space-between; align-items:center; padding:14px; border-radius:14px; border:1px solid var(--line); background: rgba(255,255,255,.02); }
.inspector-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
.inspector-grid > div, .surface-box { border:1px solid var(--line); border-radius:14px; padding:14px; background: rgba(255,255,255,.02); }
.inspector-block { display:flex; flex-direction:column; gap:10px; }
.tile-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:16px; }
.tile-grid--two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.tile-grid--three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.tile-card { display:flex; flex-direction:column; gap:8px; }
.tile-card--compact strong { font-size: 1rem; }
.budget-card-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px; }
.budget-card { display:flex; flex-direction:column; gap:14px; }
.budget-card__metrics { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; align-items:stretch; }
.budget-card__metrics > div { border:1px solid var(--line); border-radius:12px; padding:10px 12px; display:flex; flex-direction:column; gap:6px; }
.timeline-list--vertical .timeline-event { display:grid; grid-template-columns: 120px 1fr; gap:16px; padding: 12px 0; border-bottom:1px solid rgba(148,163,184,.12); }
.timeline-list--vertical .timeline-event:last-child { border-bottom:0; }
.timeline-event__time { color: var(--muted); }
.table-simple__row--stack { align-items:flex-start; flex-direction:column; }
.button { border:1px solid var(--line); background: rgba(255,255,255,.03); color: var(--text); border-radius: 12px; padding: 11px 14px; cursor:pointer; max-width: 100%; }
.button--ghost { background: transparent; }
.button--primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#07121d; font-weight: 700; border-color: transparent; }
.button-stack { display:flex; flex-direction:column; gap:10px; }
.button-stack--horizontal { flex-direction:row; flex-wrap: wrap; }
.setup-shell { min-height:100vh; display:grid; place-items:center; padding:32px; }
.setup-card { width:min(860px, 100%); padding: 28px; }
.setup-form { display:flex; flex-direction:column; gap:20px; }
.setup-steps { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; margin-bottom: 20px; }
.setup-step { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; border:1px solid var(--line); background: rgba(255,255,255,.02); color: var(--muted); }
.setup-step.is-active { border-color: rgba(56,189,248,.35); background: rgba(56,189,248,.10); color: var(--text); }
.setup-step.is-done { border-color: rgba(34,197,94,.35); }
.setup-step__index { width:30px; height:30px; border-radius:999px; display:grid; place-items:center; background: rgba(255,255,255,.06); font-weight: 700; }
.form-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px; }
.form-grid label { display:flex; flex-direction:column; gap:8px; color: var(--muted); }
.form-grid__full { grid-column: 1 / -1; }
input[type="text"], input[type="password"], input[type="number"] { width:100%; border:1px solid var(--line); background: rgba(255,255,255,.03); color: var(--text); border-radius: 12px; padding: 12px 14px; }
.checkbox-row { flex-direction:row !important; align-items:center; }
.alert { border-radius: 14px; padding: 14px 16px; margin-bottom:16px; }
.alert--error { border:1px solid rgba(239,68,68,.35); background: rgba(239,68,68,.12); }
.alert--success { border:1px solid rgba(34,197,94,.35); background: rgba(34,197,94,.12); }
.alert--warning { border:1px solid rgba(245,158,11,.35); background: rgba(245,158,11,.12); }
.link-arrow { color: var(--accent); }
select, input[type="email"], input[type="file"], textarea { width:100%; border:1px solid var(--line); background: rgba(255,255,255,.03); color: var(--text); border-radius: 12px; padding: 12px 14px; }
form label span { display:block; margin-bottom:8px; color: var(--muted); }
.form-stack { display:flex; flex-direction:column; gap:12px; }
.transaction-row { text-decoration:none; color:inherit; }
.filter-form { display:grid; grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(150px,1fr)) auto; gap:12px; align-items:end; }
.form-error { display:block; color:#fca5a5; font-size:.84rem; margin-top:6px; }
.field-hint { color: var(--muted); font-size:.82rem; }
.pagination { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:12px; flex-wrap: wrap; }
.pagination__links { display:flex; gap:8px; flex-wrap:wrap; }
.table-list { display:flex; flex-direction:column; gap:10px; }
.grid-two { display:grid; grid-template-columns: minmax(0,1.35fr) minmax(320px,380px); gap:16px; align-items: start; }
.metric-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
.status-pill { display:inline-flex; padding:6px 10px; border-radius:999px; border:1px solid var(--line); font-size:.82rem; }
.status-pill--success { border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.12); }
.status-pill--warning { border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.12); }
.status-pill--danger { border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.12); }
.status-pill--info { border-color: rgba(59,130,246,.35); background: rgba(59,130,246,.12); }
img.payment-logo { height: 22px; max-width: 56px; object-fit: contain; vertical-align: middle; }
.sample-table { width:100%; border-collapse: collapse; display: block; overflow-x: auto; }
.sample-table thead, .sample-table tbody { width: 100%; }
.sample-table th, .sample-table td { padding:10px 12px; border-bottom:1px solid rgba(148,163,184,.12); text-align:left; white-space: nowrap; }
.sample-table th { color: var(--muted); font-size:.84rem; }
.surface-box + .surface-box { margin-top: 12px; }
.form-section-title { margin: 0 0 6px; font-size: 1rem; }

@media (max-width: 1400px) {
  .workspace-layout { grid-template-columns: 220px minmax(0,1fr); }
  .workspace-panel--inspector { grid-column: 1 / -1; }
}

@media (max-width: 1200px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { display:none; }
  .workspace-layout,
  .content-grid--home,
  .content-grid--today,
  .content-grid--analysis,
  .content-grid--reports,
  .content-grid--platform,
  .content-grid--settings,
  .content-grid--imports,
  .tile-grid,
  .budget-card-grid,
  .kpi-grid,
  .kpi-grid--four,
  .kpi-grid--three,
  .kpi-grid--two,
  .grid-two,
  .filter-form,
  .setup-steps { grid-template-columns: 1fr; }
  .transaction-table__head,
  .transaction-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .topbar { flex-direction:column; align-items:stretch; }
}

@media (max-width: 768px) {
  .page-shell { padding: 18px; }
  .topbar { padding: 18px; }
  .transaction-table__head,
  .transaction-row,
  .inspector-grid,
  .form-grid,
  .metric-grid,
  .budget-card__metrics { grid-template-columns: 1fr; }
}

@media (max-width: 1600px) { .workspace-layout--wide { grid-template-columns: minmax(180px,220px) minmax(0,1.45fr) minmax(280px,340px); } }

.chart-card{display:flex;flex-direction:column;gap:12px}.chart-svg{width:100%;height:220px}.chart-axis{stroke:rgba(148,163,184,.45);stroke-width:1}.chart-line{stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.chart-line--primary{stroke:#38bdf8}.chart-line--secondary{stroke:#a78bfa}.chart-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.9rem;color:#cbd5e1}.legend-dot{display:inline-block;width:10px;height:10px;border-radius:999px;margin-right:6px;background:#38bdf8}.legend-dot--primary,.legend-dot--1{background:#38bdf8}.legend-dot--secondary,.legend-dot--2{background:#a78bfa}.legend-dot--3{background:#34d399}.legend-dot--4{background:#f59e0b}.legend-dot--5{background:#fb7185}.chart-label-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(22px,1fr));gap:8px;font-size:.75rem;color:#94a3b8}.donut-layout{display:grid;grid-template-columns:minmax(180px,220px) 1fr;gap:20px;align-items:center}.donut-svg{width:100%;max-width:220px;height:auto}.donut-track{fill:none;stroke:rgba(148,163,184,.18);stroke-width:16}.donut-segment{fill:none;stroke-width:16;transform:rotate(-90deg);transform-origin:80px 80px}.donut-segment--1{stroke:#38bdf8}.donut-segment--2{stroke:#a78bfa}.donut-segment--3{stroke:#34d399}.donut-segment--4{stroke:#f59e0b}.donut-segment--5{stroke:#fb7185}.donut-label{font-size:1.35rem;fill:#f8fafc;font-weight:700}.donut-subtitle{font-size:.72rem;fill:#94a3b8}.chart-list{display:flex;flex-direction:column;gap:10px}.chart-list__row{display:flex;justify-content:space-between;gap:12px}.bar-chart,.compare-chart{display:flex;align-items:flex-end;gap:14px;min-height:170px;padding-top:10px}.bar-chart__item,.compare-chart__group{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;min-width:0}.bar-chart__bar{width:100%;max-width:34px;border-radius:12px 12px 4px 4px;background:linear-gradient(180deg,#38bdf8,#0f172a)}.compare-chart__bars{display:flex;align-items:flex-end;gap:8px;height:140px}.compare-chart__bar{width:18px;border-radius:10px 10px 4px 4px}.compare-chart__bar--primary{background:linear-gradient(180deg,#38bdf8,#0f172a)}.compare-chart__bar--secondary{background:linear-gradient(180deg,#a78bfa,#1e1b4b)}.horizontal-bars{display:flex;flex-direction:column;gap:12px}.horizontal-bars__row{display:grid;grid-template-columns:minmax(120px,180px) 1fr auto;gap:12px;align-items:center}.horizontal-bars__track{height:12px;border-radius:999px;background:rgba(148,163,184,.18);overflow:hidden}.horizontal-bars__fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#38bdf8,#a78bfa)}
@media (max-width: 900px){.donut-layout{grid-template-columns:1fr}.horizontal-bars__row{grid-template-columns:1fr}.bar-chart,.compare-chart{overflow-x:auto;padding-bottom:8px}}

.inline-filter{display:flex;align-items:center;gap:.75rem}.inline-filter select{min-width:180px;padding:.6rem .75rem;border:1px solid #d6dbe4;border-radius:10px;background:#fff}

.chart-point{stroke:#0f172a;stroke-width:1.5}.chart-point--primary{fill:#38bdf8}.chart-point--secondary{fill:#a78bfa}.empty-state{padding:18px;border:1px dashed rgba(148,163,184,.35);border-radius:14px;color:#94a3b8;background:rgba(15,23,42,.18)}


.chart-shell{display:flex;flex-direction:column;gap:12px}
.chart-enhanced{display:flex;flex-direction:column;gap:12px;min-height:320px}
.chart-enhanced__title{font-size:.9rem;color:#94a3b8}
.chart-svg--enhanced{width:100%;height:280px;display:block;overflow:visible}
.chart-grid-line{stroke:rgba(148,163,184,.12);stroke-width:1}
.chart-grid-label{fill:#94a3b8;font-size:11px}
.chart-axis-label{fill:#94a3b8;font-size:11px}


/* View hardening */
img, svg, canvas { max-width: 100%; height: auto; }
main, section, article, aside, form, div { min-width: 0; }
.page-shell > * { min-width: 0; }
.page-header > *, .panel > *, .card > *, .workspace-panel > * { min-width: 0; }
.page-header form, .panel__header form { max-width: 100%; }
label { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
input, select, textarea { width: 100%; max-width: 100%; min-width: 0; padding: 12px 14px; border: 1px solid var(--select-border); border-radius: 12px; background: var(--select-bg); color: var(--select-text); }
select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 42px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) calc(50% - 3px), calc(100% - 14px) calc(50% - 3px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
select:hover, input:hover, textarea:hover { border-color: rgba(56,189,248,.45); }
select:focus, input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(56,189,248,.18); }
textarea { min-height: 120px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted); }
select option { color: #111827; background: #ffffff; }
body.theme-light select option { color: #0f172a; background: #ffffff; }
body.theme-light .tabbar { background: rgba(255,255,255,.7); border-color: var(--line); }
body.theme-light .tabbar__link { color: var(--muted); }
body.theme-light .tabbar__link.is-active { background: #ffffff; color: var(--text); border-color: var(--line); }
.theme-toggle { min-width: 124px; }
form { min-width: 0; }
.button, .chip, .mini-pill, .toolbar-pill, .status-pill { overflow-wrap: anywhere; }
.table-simple__row, .list-card__row, .timeline-item, .toolbar-row, .budget-card__header, .table-simple__inline, .pagination { flex-wrap: wrap; }
.table-simple__row > *, .list-card__row > *, .timeline-item > *, .toolbar-row > * { min-width: 0; overflow-wrap: anywhere; }
.card, .setup-card, .panel, .workspace-panel { overflow: hidden; }
.surface-box, .inspector-grid > div, .budget-card__metrics > div, .attention-item, .timeline-item, .table-simple__row, .list-card, .budget-card, .tile-card, .source-card, .insight-box { overflow-wrap: anywhere; }
.content-grid--home { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(300px, .9fr); }
.content-grid--today, .content-grid--analysis, .content-grid--reports, .content-grid--platform { grid-template-columns: repeat(3, minmax(260px,1fr)); }
.content-grid--imports, .content-grid--settings { grid-template-columns: repeat(2, minmax(320px,1fr)); }
.kpi-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.kpi-grid--four, .kpi-grid--three, .kpi-grid--two, .tile-grid, .tile-grid--two, .tile-grid--three, .budget-card-grid, .metric-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid-two { grid-template-columns: minmax(0,1.45fr) minmax(320px,420px); }
.workspace-layout { grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(320px, 380px); }
.workspace-layout--wide { grid-template-columns: minmax(200px, 250px) minmax(0, 1.7fr) minmax(320px, 400px); }
.transaction-table { overflow: auto; padding-bottom: 4px; }
.transaction-table__head, .transaction-row { min-width: 860px; }
.transaction-row__status { padding-top: 2px; }
.sample-table { display: block; width: 100%; overflow: auto; }
.sample-table table, .sample-table thead, .sample-table tbody, .sample-table tr { min-width: max-content; }
.filter-form { grid-template-columns: minmax(170px, 1.1fr) minmax(160px,1fr) minmax(160px,1fr) minmax(160px,1fr) minmax(140px,.9fr) auto; }
.inline-filter { flex-wrap: wrap; justify-content: flex-end; }
.inline-filter select { min-width: 200px; max-width: 100%; }
.button-stack--horizontal { align-items: stretch; }
.button-stack--horizontal > * { max-width: 100%; }
.chart-card, .chart-shell, .chart-enhanced { min-width: 0; }
.chart-svg, .chart-svg--enhanced { min-height: 240px; }
.horizontal-bars__row { min-width: 0; }
.topbar__search { display: flex; align-items: center; }
.topbar__search::before { content: "Zoeken"; opacity: .72; }
.checkbox-row { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.checkbox-row input { width: auto; }

@media (max-width: 1500px) {
  .workspace-layout--wide { grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); }
  .workspace-panel--filters { grid-column: 1 / -1; }
}

@media (max-width: 1320px) {
  .content-grid--home,
  .content-grid--today,
  .content-grid--analysis,
  .content-grid--reports,
  .content-grid--platform,
  .content-grid--imports,
  .content-grid--settings,
  .grid-two,
  .workspace-layout,
  .workspace-layout--wide { grid-template-columns: 1fr; }
  .workspace-panel--table,
  .workspace-panel--inspector,
  .workspace-panel--filters { grid-column: auto; }
}

@media (max-width: 1100px) {
  .filter-form { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .topbar__actions { justify-content: flex-start; }
}

@media (max-width: 900px) {
  .transaction-table__head, .transaction-row { min-width: 700px; }
  .page-header { align-items: stretch; }
}

@media (max-width: 640px) {
  .page-shell { padding: 14px; gap: 16px; }
  .card { padding: 16px; }
  .filter-form, .setup-steps { grid-template-columns: 1fr; }
  .transaction-table__head, .transaction-row { min-width: 620px; }
  .inline-filter { justify-content: stretch; }
  .inline-filter select { min-width: 0; width: 100%; }
  .topbar__search { min-width: 0; }
}


/* Global view enrichment + zoom hardening */
.app-shell { grid-template-columns: minmax(220px, 244px) minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; align-self: start; min-height: 100vh; overflow: auto; }
.topbar { position: sticky; top: 0; z-index: 10; background: rgba(11,18,32,.86); backdrop-filter: blur(14px); }
.topbar__search { max-width: 520px; min-width: 0; width: min(100%, 520px); }
.page-shell { width: min(100%, 1680px); margin: 0 auto; }
.grid-two { grid-template-columns: minmax(0, 1.25fr) minmax(320px, 420px); }
.workspace-layout { grid-template-columns: minmax(220px, 240px) minmax(0, 1.1fr) minmax(320px, 360px); }
.workspace-layout--wide { grid-template-columns: minmax(220px, 240px) minmax(0, 1.35fr) minmax(320px, 380px); }
.content-grid--home { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(320px, .95fr); }
.content-grid--today, .content-grid--analysis, .content-grid--reports, .content-grid--platform, .content-grid--settings, .content-grid--imports { grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); }
.tile-grid, .budget-card-grid, .metric-grid { grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.view-strip { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:16px; }
.view-strip__card { padding:16px 18px; border:1px solid var(--line); border-radius:14px; background: rgba(255,255,255,.02); display:flex; flex-direction:column; gap:8px; }
.view-strip__card strong { font-size: 1.08rem; }
.quick-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap:12px; }
.quick-link { display:flex; flex-direction:column; gap:6px; padding:14px; border:1px solid var(--line); border-radius:14px; background: rgba(255,255,255,.02); min-height: 100%; }
.quick-link:hover { border-color: rgba(56,189,248,.35); background: rgba(56,189,248,.08); }
.quick-link small { color: var(--muted); }
.info-list { display:flex; flex-direction:column; gap:10px; }
.info-row { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.badge-row { display:flex; gap:8px; flex-wrap:wrap; }
.sticky-actions { position: sticky; top: 96px; }
.panel-scroll { max-height: min(72vh, 920px); overflow: auto; padding-right: 4px; }
.form-stack .button-stack--horizontal { padding-top: 4px; }
.table-list, .table-simple, .timeline-list, .filter-list { min-width: 0; }
.table-list .list-card, .table-simple__row, .timeline-item, .filter-item, .quick-link, .view-strip__card { overflow: hidden; }
@media (max-width: 1700px) {
  .workspace-layout, .workspace-layout--wide { grid-template-columns: 1fr; }
  .workspace-panel--filters, .workspace-panel--table, .workspace-panel--inspector { grid-column: auto; }
  .sticky-actions { position: static; }
}
@media (max-width: 1480px) {
  .content-grid--home, .grid-two { grid-template-columns: 1fr; }
  .transaction-table__head, .transaction-row { min-width: 780px; }
}
@media (max-width: 1320px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { display:none; }
}
@media (max-width: 900px) {
  .topbar { position: static; }
  .page-shell { width: 100%; }
}

/* Stable layout correction */
.app-shell { grid-template-columns: 260px minmax(0,1fr); align-items: stretch; }
.sidebar { position: static; min-height: auto; height: auto; overflow: visible; }
.main-shell { min-width: 0; width: 100%; }
.topbar { position: static; z-index: auto; background: transparent; backdrop-filter: none; }
.page-shell { width: 100%; max-width: 100%; margin: 0; }
.card, .panel, .workspace-panel, .setup-card { overflow: visible; }
.table-list .list-card, .table-simple__row, .timeline-item, .filter-item, .quick-link, .view-strip__card { overflow: visible; }
.sticky-actions { position: static; top: auto; }
.panel-scroll { max-height: none; overflow: visible; padding-right: 0; }
.workspace-layout,
.workspace-layout--wide { grid-template-columns: minmax(220px,260px) minmax(0,1fr) minmax(300px,360px); align-items: start; }
.content-grid--home { grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(280px,340px); }
.content-grid--today,
.content-grid--analysis,
.content-grid--reports,
.content-grid--platform,
.content-grid--settings,
.content-grid--imports { grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); }
.grid-two { grid-template-columns: minmax(0,1.2fr) minmax(320px,380px); }
.filter-form { grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); align-items: end; }
.topbar__actions,
.page-header,
.panel__header,
.toolbar-row,
.table-simple__inline,
.stat-row,
.list-card__row,
.table-simple__row,
.timeline-item,
.budget-card__header { align-items: flex-start; }
.transaction-table { display: block; overflow-x: auto; overflow-y: visible; }
.transaction-table__head,
.transaction-row { min-width: 880px; }
.transaction-row { align-items: start; }
.transaction-row__status { grid-column: 1 / -1; display: flex; flex-wrap: wrap; }
.sample-table { overflow-x: auto; }
.sample-table table { width: max-content; min-width: 100%; }
.view-strip,
.quick-grid,
.kpi-grid,
.tile-grid,
.budget-card-grid,
.metric-grid { grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); }
.inline-filter { justify-content: flex-start; }
.inline-filter select { min-width: 180px; }
img, svg, canvas { display: block; }
.chart-card, .chart-shell, .chart-enhanced { overflow: hidden; }
.chart-svg, .chart-svg--enhanced { width: 100%; height: 260px; }

@media (max-width: 1500px) {
  .workspace-layout,
  .workspace-layout--wide { grid-template-columns: 1fr; }
}

@media (max-width: 1320px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .content-grid--home,
  .grid-two { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .content-grid--today,
  .content-grid--analysis,
  .content-grid--reports,
  .content-grid--platform,
  .content-grid--settings,
  .content-grid--imports,
  .view-strip,
  .quick-grid,
  .kpi-grid,
  .tile-grid,
  .budget-card-grid,
  .metric-grid,
  .filter-form,
  .grid-two { grid-template-columns: 1fr; }
  .transaction-table__head,
  .transaction-row { min-width: 720px; }
}

@media (max-width: 640px) {
  .page-shell { padding: 14px; }
  .card { padding: 16px; }
  .transaction-table__head,
  .transaction-row { min-width: 640px; }
}


/* Tabbed workspaces */
.tabbar { display:flex; flex-wrap:wrap; gap:12px; margin: 18px 0 22px; padding: 8px; border:1px solid var(--line); border-radius:18px; background: rgba(15,23,42,.38); }
.tabbar--spaced { margin-top: 0; }
.tabbar__link { position:relative; display:inline-flex; align-items:center; justify-content:center; min-height:44px; gap:8px; padding:12px 16px; border:1px solid transparent; border-radius:12px; background: transparent; color: var(--muted); text-decoration:none; font-weight:700; transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; }
.tabbar__link:hover { color: var(--text); background: rgba(255,255,255,.04); border-color: rgba(148,163,184,.22); }
.tabbar__link.is-active { color: var(--text); background: linear-gradient(180deg, rgba(56,189,248,.22), rgba(56,189,248,.10)); border-color: rgba(56,189,248,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(56,189,248,.12); }
.tab-panel { display:flex; flex-direction:column; gap:18px; min-width:0; }
.tab-panel + .tab-panel { margin-top: 0; }
.tab-split { display:grid; grid-template-columns: minmax(0,1.35fr) minmax(320px,.85fr); gap:18px; align-items:start; }
.tab-split--wide { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.tab-stack { display:flex; flex-direction:column; gap:18px; }
@media (max-width: 1200px) { .tab-split, .tab-split--wide { grid-template-columns: 1fr; } }

.tab-panel[hidden]{display:none !important;}
.tabbar + .tab-panel{margin-top:0;}
@media (max-width: 768px){.tabbar{gap:8px;padding:6px}.tabbar__link{flex:1 1 calc(50% - 8px);padding:10px 12px}}


/* Page enrichment */
.view-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:16px}
.view-strip__card{display:flex;flex-direction:column;gap:8px;padding:16px 18px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.02);min-width:0}
.view-strip__card strong{font-size:1.02rem}
.info-list,.summary-list{display:flex;flex-direction:column;gap:10px}
.info-row,.summary-row{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid rgba(148,163,184,.12)}
.info-row:last-child,.summary-row:last-child{border-bottom:none}
.metric-callout{padding:16px 18px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(56,189,248,.08),rgba(255,255,255,.02))}
.metric-callout__label{display:block;color:var(--muted);margin-bottom:8px}
.metric-callout__value{font-size:1.45rem;font-weight:700}
.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.quick-link{display:flex;flex-direction:column;gap:8px;padding:16px 18px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.02);color:inherit;text-decoration:none}
.quick-link:hover{border-color:rgba(56,189,248,.38);background:rgba(56,189,248,.06)}
.progress-list{display:flex;flex-direction:column;gap:12px}
.progress-item{display:flex;flex-direction:column;gap:8px;padding:14px 0;border-bottom:1px solid rgba(148,163,184,.12)}
.progress-item:last-child{border-bottom:none}
.progress-item__row{display:flex;justify-content:space-between;gap:14px;align-items:center}
.progress-track{height:10px;border-radius:999px;background:rgba(148,163,184,.16);overflow:hidden}
.progress-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#38bdf8,#a78bfa)}
.dual-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.mini-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.mini-kpi{padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.mini-kpi span{display:block;color:var(--muted);font-size:.82rem;margin-bottom:6px}
.mini-kpi strong{font-size:1.02rem}
.section-stack{display:flex;flex-direction:column;gap:16px}
.panel-note{color:var(--muted);font-size:.92rem;line-height:1.5}
.badge-row{display:flex;gap:8px;flex-wrap:wrap}
.empty-note{padding:12px 0;color:var(--muted)}
@media (max-width: 900px){
  .view-strip,.quick-grid,.dual-list,.mini-kpis{grid-template-columns:1fr}
}

/* Page-specific structures */
.page-shell > .page-header {
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 18px 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
}
.page-shell > .page-header .inline-filter,
.page-shell > .page-header .button-stack,
.page-shell > .page-header form { align-self: start; }
.page-shell > .tabbar {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.02);
  width: 100%;
  max-width: 100%;
}
.page-shell > .tab-panel { width: 100%; }
.page-shell > .tab-panel > * { width: 100%; }
.page-shell > .tab-panel .workspace-layout { width: 100%; }
.page-shell > .tab-panel .workspace-layout--stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.page-shell > .tab-panel .workspace-layout--stack > * { min-width: 0; }
.page-shell > .tab-panel .workspace-panel--full { width: 100%; }
.page-shell > .tab-panel .workspace-panel--table .transaction-table { width: 100%; }
.page-shell > .tabbar + .tab-panel,
.page-shell > .tabbar + .view-strip,
.page-shell > .tabbar + .workspace-layout { margin-top: 2px; }

.page-home .page-header { background: radial-gradient(circle at top left, rgba(56,189,248,.18), transparent 45%), rgba(255,255,255,.02); }
.page-home .content-grid--home { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(300px, .9fr); }
.page-home .view-strip { display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap:14px; }
.page-home .kpi-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.page-home .content-grid--home > *:first-child { min-height: 100%; }

.page-vandaag .page-header { background: radial-gradient(circle at top right, rgba(34,197,94,.16), transparent 45%), rgba(255,255,255,.02); }
.page-vandaag .view-strip { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:14px; }
.page-vandaag .dual-list { display:grid; grid-template-columns: 1.2fr .8fr; gap:16px; }
.page-vandaag .mini-kpis { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; }
.page-vandaag .mini-kpi { border:1px solid var(--line); border-radius:16px; padding:14px; background:rgba(255,255,255,.02); display:flex; flex-direction:column; gap:6px; }

.page-transacties .page-header { background: radial-gradient(circle at top left, rgba(245,158,11,.14), transparent 45%), rgba(255,255,255,.02); }
.page-transacties .view-strip { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:14px; }
.page-transacties .workspace-layout--wide { grid-template-columns: minmax(230px, 260px) minmax(0, 1.65fr) minmax(320px, 360px); }
.page-transacties .filter-form { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px; }
.page-transacties .transaction-table { gap:12px; }

.page-import-banken .page-header { background: radial-gradient(circle at top left, rgba(139,92,246,.16), transparent 45%), rgba(255,255,255,.02); }
.page-import-banken .view-strip { display:grid; grid-template-columns: 1.1fr 1fr .9fr; gap:14px; }
.page-import-banken .surface-box + .surface-box { margin-top: 14px; }
.page-import-banken .sample-table { width:100%; border-collapse: collapse; }
.page-import-banken .sample-table th, .page-import-banken .sample-table td { border-bottom:1px solid rgba(148,163,184,.12); padding:10px 8px; text-align:left; }

.page-vaste-lasten .page-header { background: radial-gradient(circle at top right, rgba(239,68,68,.14), transparent 42%), rgba(255,255,255,.02); }
.page-vaste-lasten .view-strip { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px; }
.page-vaste-lasten .workspace-layout--wide { grid-template-columns: minmax(220px, 250px) minmax(0, 1.5fr) minmax(320px, 360px); }

.page-budgetten .page-header { background: radial-gradient(circle at top center, rgba(59,130,246,.16), transparent 45%), rgba(255,255,255,.02); }
.page-budgetten .view-strip { display:grid; grid-template-columns: 1.1fr 1fr 1fr; gap:14px; }
.page-budgetten .progress-list { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
.page-budgetten .workspace-layout--wide { grid-template-columns: minmax(0, 1.45fr) minmax(320px, .9fr); }

.page-analyse .page-header { background: radial-gradient(circle at top center, rgba(16,185,129,.16), transparent 45%), rgba(255,255,255,.02); }
.page-analyse .grid-two { display:grid; grid-template-columns: 1.15fr .85fr; gap:16px; }
.page-analyse .view-strip { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:14px; }

.page-rapportages .page-header { background: radial-gradient(circle at top left, rgba(234,179,8,.16), transparent 45%), rgba(255,255,255,.02); }
.page-rapportages .view-strip { display:grid; grid-template-columns: 1fr 1fr .9fr; gap:14px; }
.page-rapportages .grid-two { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }

.page-controle .page-header { background: radial-gradient(circle at top left, rgba(249,115,22,.14), transparent 45%), rgba(255,255,255,.02); }
.page-controle .tile-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.page-controle .quick-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; }
.page-controle .quick-link { border:1px solid var(--line); border-radius:16px; padding:14px; background:rgba(255,255,255,.02); display:flex; flex-direction:column; gap:8px; }

.page-accounts .page-header { background: radial-gradient(circle at top right, rgba(14,165,233,.14), transparent 45%), rgba(255,255,255,.02); }
.page-accounts .view-strip { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px; }
.page-accounts .grid-two { display:grid; grid-template-columns: 1fr .9fr; gap:16px; }

.page-categorieen .page-header { background: radial-gradient(circle at top center, rgba(168,85,247,.18), transparent 45%), rgba(255,255,255,.02); }
.page-categorieen .view-strip { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:14px; }
.page-categorieen .grid-two { display:grid; grid-template-columns: 1fr .9fr; gap:16px; }

.page-gebruikers .page-header { background: radial-gradient(circle at top left, rgba(236,72,153,.14), transparent 45%), rgba(255,255,255,.02); }
.page-gebruikers .kpi-grid--three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.page-gebruikers .grid-two { display:grid; grid-template-columns: 1.05fr .95fr; gap:16px; }

.page-instellingen .page-header { background: radial-gradient(circle at top right, rgba(100,116,139,.22), transparent 45%), rgba(255,255,255,.02); }
.page-instellingen .view-strip { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:14px; }
.page-instellingen .tab-split { display:grid; grid-template-columns: 1.2fr .8fr; gap:16px; }

.page-platform .page-header { background: radial-gradient(circle at top center, rgba(45,212,191,.16), transparent 45%), rgba(255,255,255,.02); }
.page-platform .view-strip { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:14px; }
.page-platform .table-list { display:grid; gap:12px; }

.page-planner .page-header { background: radial-gradient(circle at top left, rgba(6,182,212,.16), transparent 45%), rgba(255,255,255,.02); }
.page-planner .view-strip { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:14px; }
.page-planner .grid-two { display:grid; grid-template-columns: 1fr .9fr; gap:16px; }

.page-scenarios .page-header { background: radial-gradient(circle at center left, rgba(251,146,60,.14), transparent 45%), rgba(255,255,255,.02); }
.page-scenarios .view-strip { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:14px; }
.page-scenarios .grid-two { display:grid; grid-template-columns: 1fr .9fr; gap:16px; }

.page-doelen .page-header { background: radial-gradient(circle at center right, rgba(34,197,94,.14), transparent 45%), rgba(255,255,255,.02); }
.page-doelen .view-strip { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:14px; }
.page-doelen .grid-two { display:grid; grid-template-columns: 1fr .9fr; gap:16px; }

.page-review-oplossen .page-header { background: radial-gradient(circle at top left, rgba(244,63,94,.16), transparent 45%), rgba(255,255,255,.02); }
.page-review-oplossen .view-strip { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px; }
.page-review-oplossen .workspace-layout--wide { grid-template-columns: minmax(210px, 240px) minmax(0, 1.5fr) minmax(320px, 360px); }

@media (max-width: 1180px) {
  .page-shell > .tabbar { width:100%; }
  .page-home .content-grid--home,
  .page-vandaag .dual-list,
  .page-analyse .grid-two,
  .page-rapportages .grid-two,
  .page-budgetten .workspace-layout--wide,
  .page-transacties .workspace-layout--wide,
  .page-vaste-lasten .workspace-layout--wide,
  .page-review-oplossen .workspace-layout--wide,
  .page-accounts .grid-two,
  .page-categorieen .grid-two,
  .page-gebruikers .grid-two,
  .page-instellingen .tab-split,
  .page-planner .grid-two,
  .page-scenarios .grid-two,
  .page-doelen .grid-two,
  .page-budgetten .progress-list,
  .page-transacties .filter-form,
  .page-controle .quick-grid { grid-template-columns: 1fr; }
  .page-home .view-strip,
  .page-vandaag .view-strip,
  .page-import-banken .view-strip,
  .page-vaste-lasten .view-strip,
  .page-budgetten .view-strip,
  .page-analyse .view-strip,
  .page-rapportages .view-strip,
  .page-controle .tile-grid,
  .page-accounts .view-strip,
  .page-categorieen .view-strip,
  .page-instellingen .view-strip,
  .page-platform .view-strip,
  .page-planner .view-strip,
  .page-scenarios .view-strip,
  .page-doelen .view-strip,
  .page-review-oplossen .view-strip { grid-template-columns: 1fr; }
}


.crud-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem;
    margin: 0 0 1rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 1rem;
    background: rgba(15, 23, 42, 0.04);
}
.crud-toolbar__meta {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 16rem;
}
.crud-toolbar__eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}
.crud-toolbar__mode {
    font-size: 1rem;
    color: #0f172a;
}
.crud-toolbar__text {
    color: #475569;
    font-size: 0.92rem;
}
.crud-toolbar__actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}
.crud-toolbar__form { display: inline-flex; }
.button--danger {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fecaca;
}
.button--danger:hover {
    background: #fecaca;
}

.context-note{margin:12px 0 0;color:#94a3b8;line-height:1.55;font-size:.94rem}


/* Readable theme toggle and select controls */
.topbar__actions { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.theme-toggle {
  display:inline-flex; align-items:center; justify-content:space-between; gap:12px;
  min-width: 182px; min-height: 48px; padding: 8px 10px 8px 14px;
  border: 1px solid var(--select-border);
  background: linear-gradient(135deg, rgba(56,189,248,.14), rgba(167,139,250,.14));
  color: var(--select-text);
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(15,23,42,.12);
}
.theme-toggle__label { font-size: .92rem; white-space: nowrap; }
.theme-toggle__switch {
  width: 54px; height: 30px; border-radius: 999px; position: relative; flex: 0 0 auto;
  background: linear-gradient(90deg, rgba(100,116,139,.55), rgba(51,65,85,.75));
  border: 1px solid rgba(148,163,184,.28);
  transition: background .2s ease, border-color .2s ease;
}
.theme-toggle__thumb {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 999px;
  background: linear-gradient(180deg, #ffffff, #dbeafe);
  box-shadow: 0 4px 10px rgba(15,23,42,.22);
  transition: transform .22s ease;
}
.theme-toggle[aria-pressed="true"] {
  background: linear-gradient(135deg, rgba(250,204,21,.18), rgba(56,189,248,.14));
  border-color: rgba(14,165,233,.35);
}
.theme-toggle[aria-pressed="true"] .theme-toggle__switch {
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
  border-color: rgba(56,189,248,.45);
}
.theme-toggle[aria-pressed="true"] .theme-toggle__thumb { transform: translateX(24px); background: linear-gradient(180deg, #ffffff, #fef3c7); }
.theme-toggle:hover { border-color: rgba(56,189,248,.55); box-shadow: 0 12px 28px rgba(15,23,42,.18); }
.theme-toggle:focus { outline:none; box-shadow: 0 0 0 3px rgba(56,189,248,.18), 0 12px 28px rgba(15,23,42,.18); }
body.theme-light .theme-toggle { background: linear-gradient(135deg, rgba(99,102,241,.10), rgba(14,165,233,.10)); }
body.theme-light .theme-toggle[aria-pressed="true"] { background: linear-gradient(135deg, rgba(250,204,21,.18), rgba(14,165,233,.14)); }


select,
input[type="email"],
input[type="file"],
textarea,
input[type="text"],
input[type="number"],
input[type="date"],
input[type="password"] {
  background-color: var(--select-bg) !important;
  color: var(--select-text) !important;
}

select {
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--select-bg) 94%, #ffffff 6%), color-mix(in srgb, var(--select-bg) 100%, #000000 0%)),
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%) !important;
  background-position: 0 0, calc(100% - 20px) calc(50% - 3px), calc(100% - 14px) calc(50% - 3px) !important;
  background-size: 100% 100%, 6px 6px, 6px 6px !important;
  background-repeat: no-repeat !important;
}

body:not(.theme-light) select {
  background-color: #162031 !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}
body:not(.theme-light) input,
body:not(.theme-light) textarea {
  background-color: #162031 !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}
body.theme-light select,
body.theme-light input,
body.theme-light textarea {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}
select option,
select optgroup {
  background: #ffffff !important;
  color: #111827 !important;
}
@supports selector(select:open) {
  body:not(.theme-light) select:open {
    background-color: #162031 !important;
    color: #f8fafc !important;
  }
}


.topbar--minimal { justify-content: flex-end; align-items: center; padding: 18px 28px 10px; border-bottom: 0; }
.topbar__spacer { display: none; }
.topbar__actions--minimal { width: 100%; justify-content: flex-end; }
.topbar--minimal .theme-toggle { min-width: 182px; }
@media (max-width: 900px) {
  .topbar--minimal { padding: 16px 18px 8px; }
  .topbar__actions--minimal { justify-content: flex-end; }
}


body.theme-light .card::before { opacity: .95; }
body.theme-light .kpi-card { box-shadow: inset 0 1px 0 rgba(255,255,255,.65); }
body.theme-light .attention-item, body.theme-light .timeline-item, body.theme-light .table-simple__row, body.theme-light .list-card, body.theme-light .budget-card, body.theme-light .tile-card, body.theme-light .source-card { background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96)); }
body.theme-light .mini-pill--warning { background: rgba(245,158,11,.10); }
body.theme-light .mini-pill--success { background: rgba(34,197,94,.10); }
body:not(.theme-light) .mini-pill--warning { background: rgba(245,158,11,.10); }
body:not(.theme-light) .mini-pill--success { background: rgba(34,197,94,.10); }
body:not(.theme-light) .card { background: linear-gradient(180deg, rgba(17,24,39,.92), rgba(15,23,42,.86)); }
body.theme-light .topbar--minimal { background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(238,243,249,.72)); }
body:not(.theme-light) .topbar--minimal { background: linear-gradient(180deg, rgba(15,23,42,.34), rgba(17,24,39,.12)); }


@media (max-width: 768px) {
  .filter-list { grid-template-columns: 1fr; }
}


.chart-enhanced__detail-list{display:flex;flex-direction:column;gap:8px}

.chart-enhanced__detail-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-right:30px}
.chart-enhanced__detail-header strong{display:block;font-size:1rem;line-height:1.2}
.chart-enhanced__detail-header span{display:block;font-size:.78rem;line-height:1.35;color:#94a3b8;max-width:44ch}
.chart-enhanced__section-title{font-size:.78rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:#94a3b8;margin-bottom:10px}
.chart-enhanced__compare-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.chart-enhanced__compare-column,.chart-enhanced__events-block,.chart-enhanced__difference-block{padding:14px 14px 12px;border-radius:16px;border:1px solid rgba(148,163,184,.18);background:rgba(148,163,184,.08)}
.chart-enhanced__metric{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:14px;background:rgba(15,23,42,.26);border:1px solid rgba(148,163,184,.12)}
.chart-enhanced__metric + .chart-enhanced__metric{margin-top:10px}
.chart-enhanced__metric span{font-size:.73rem;line-height:1.2;color:#94a3b8}
.chart-enhanced__metric strong{font-size:1rem;line-height:1.2;color:inherit}
.chart-enhanced__metric small{font-size:.72rem;line-height:1.35;opacity:.8}
.chart-enhanced__metric--accent{border-color:rgba(96,165,250,.32);background:rgba(59,130,246,.12)}
.chart-enhanced__events-block,.chart-enhanced__difference-block{margin-top:2px}
.chart-enhanced__events-list{display:flex;flex-direction:column;gap:10px}
.chart-enhanced__event-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:14px;background:rgba(15,23,42,.24);border:1px solid rgba(148,163,184,.12)}
.chart-enhanced__event-row strong{display:block;font-size:.92rem;line-height:1.25}
.chart-enhanced__event-row small{display:block;margin-top:3px;font-size:.72rem;line-height:1.35;color:#94a3b8}
.chart-enhanced__event-row span:last-child{font-weight:700;white-space:nowrap}
.chart-enhanced__difference-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.chart-enhanced__empty{padding:12px 14px;border-radius:14px;border:1px dashed rgba(148,163,184,.22);color:#94a3b8;background:rgba(148,163,184,.05)}
body.theme-light .chart-enhanced__compare-column,
body.theme-light .chart-enhanced__events-block,
body.theme-light .chart-enhanced__difference-block{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.96));border-color:rgba(148,163,184,.2)}
body.theme-light .chart-enhanced__metric{background:rgba(248,250,252,.88)}
body.theme-light .chart-enhanced__metric--accent{background:rgba(219,234,254,.8);border-color:rgba(96,165,250,.34)}
body.theme-light .chart-enhanced__event-row{background:rgba(248,250,252,.9)}
@media (max-width: 900px){
  .chart-enhanced__popover{min-width:min(100%,calc(100% - 20px));max-width:min(100%,calc(100% - 20px));padding:14px 14px 12px}
  .chart-enhanced__compare-grid,.chart-enhanced__difference-grid{grid-template-columns:1fr}
  .chart-enhanced__detail-header{flex-direction:column;padding-right:24px}
}
.chart-enhanced__detail-header strong{display:block;font-size:.96rem;line-height:1.25}
.chart-enhanced__detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px}
.chart-enhanced__detail-card{display:flex;flex-direction:column;justify-content:flex-start;gap:4px;padding:10px 12px;border-radius:14px;background:rgba(148,163,184,.10);border:1px solid rgba(148,163,184,.18);min-height:72px}
.chart-enhanced__detail-card span{font-size:.74rem;line-height:1.2;color:#94a3b8}
.chart-enhanced__detail-card strong{font-size:.95rem;line-height:1.2}
.chart-enhanced__detail-card small{font-size:.72rem;line-height:1.25;opacity:.72}
body.theme-light .chart-enhanced__detail-card{background:rgba(148,163,184,.08)}
.chart-svg--enhanced [data-chart-point-hit]{cursor:pointer;outline:none;pointer-events:all}.chart-svg--enhanced .chart-point-group{cursor:pointer}.chart-svg--enhanced .chart-point-group > circle:last-child{transition:filter .14s ease,stroke-width .14s ease,opacity .14s ease}
.chart-svg--enhanced [data-chart-point-hit]:hover + circle,.chart-svg--enhanced [data-chart-point-hit]:focus + circle{opacity:1;stroke-width:2.2;filter:drop-shadow(0 0 0.35rem rgba(148,163,184,.35))}


.panel--wide{width:100%}
.forecast-breakdown-stack{display:flex;flex-direction:column;gap:10px}
.forecast-breakdown-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.forecast-breakdown-grid--two-rows{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.forecast-breakdown-card{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:16px;border:1px solid rgba(148,163,184,.18);background:rgba(148,163,184,.08);min-height:84px;justify-content:space-between}
.forecast-breakdown-card span{font-size:.78rem;line-height:1.32;color:#94a3b8}
.forecast-breakdown-card strong{font-size:1.02rem;line-height:1.18;color:inherit}
body.theme-light .forecast-breakdown-card{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.96));border-color:rgba(148,163,184,.22)}


.chart-enhanced--forecast-wide{width:100%}
.chart-enhanced--forecast-wide .chart-svg--forecast-fill{width:100%;height:360px;display:block}
@media (max-width: 960px){
  .chart-enhanced--forecast-wide .chart-svg--forecast-fill{height:300px}
}
@media (max-width: 1280px){
  .forecast-breakdown-grid--two-rows{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width: 760px){
  .forecast-breakdown-grid--two-rows{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 520px){
  .forecast-breakdown-grid--two-rows{grid-template-columns:1fr}
}

.chart-enhanced{position:relative;overflow:visible}
.chart-enhanced__popover{position:absolute;z-index:30;min-width:min(520px,calc(100% - 24px));max-width:min(820px,calc(100% - 24px));padding:16px 18px 14px;border-radius:18px;background:rgba(15,23,42,.96);border:1px solid rgba(148,163,184,.26);box-shadow:0 22px 55px rgba(2,6,23,.42);backdrop-filter:blur(14px)}
body.theme-light .chart-enhanced__popover{background:rgba(255,255,255,.97);box-shadow:0 18px 40px rgba(15,23,42,.18)}
.chart-enhanced__popover[hidden]{display:none !important}
.chart-enhanced__popover::after{content:'';position:absolute;left:50%;width:14px;height:14px;background:inherit;border-right:1px solid rgba(148,163,184,.26);border-bottom:1px solid rgba(148,163,184,.26);transform:translateX(-50%) rotate(45deg)}
.chart-enhanced__popover[data-position='top']::after{bottom:-8px}
.chart-enhanced__popover[data-position='bottom']::after{top:-8px;transform:translateX(-50%) rotate(225deg)}
.chart-enhanced__popover-close{position:absolute;top:10px;right:10px;width:28px;height:28px;border:none;border-radius:999px;background:rgba(148,163,184,.16);color:inherit;font-size:1rem;cursor:pointer}
.chart-enhanced__popover-content{display:flex;flex-direction:column;gap:10px;padding-right:18px}
.chart-svg--enhanced [data-chart-point-hit].is-active + circle{opacity:1;stroke-width:2.4;filter:drop-shadow(0 0 0.45rem rgba(148,163,184,.4))}

.chart-enhanced--forecast-wide{padding-bottom:10px}.chart-enhanced--forecast-wide .chart-axis-label{font-size:.68rem}


.chart-enhanced__inner{position:relative;width:100%}
.chart-enhanced--forecast-wide{padding-bottom:18px}
.chart-enhanced--forecast-wide .chart-axis-label{font-size:.66rem;letter-spacing:.01em}
.chart-svg--enhanced .chart-axis-label{pointer-events:none}
.chart-svg--enhanced [data-chart-point-hit]{cursor:pointer;pointer-events:all}
.chart-svg--enhanced [data-chart-point-hit]:focus-visible + circle{opacity:1;stroke-width:2.4;filter:drop-shadow(0 0 0.45rem rgba(148,163,184,.4))}
.chart-enhanced__popover{pointer-events:auto}


.month-rules-strip{display:grid;grid-template-columns:repeat(12,minmax(220px,1fr));gap:12px;overflow-x:auto;padding:0 2px 8px;scrollbar-width:thin;scrollbar-color:rgba(148,163,184,.65) rgba(15,23,42,.18)}
.month-rules-strip::-webkit-scrollbar{height:10px}
.month-rules-strip::-webkit-scrollbar-track{background:rgba(15,23,42,.18);border-radius:999px}
.month-rules-strip::-webkit-scrollbar-thumb{background:linear-gradient(90deg,rgba(96,165,250,.78),rgba(148,163,184,.78));border-radius:999px;border:2px solid rgba(15,23,42,.08)}
.month-rules-strip::-webkit-scrollbar-thumb:hover{background:linear-gradient(90deg,rgba(59,130,246,.9),rgba(148,163,184,.92))}
body.theme-light .month-rules-strip{scrollbar-color:rgba(71,85,105,.55) rgba(148,163,184,.18)}
body.theme-light .month-rules-strip::-webkit-scrollbar-track{background:rgba(148,163,184,.18)}
body.theme-light .month-rules-strip::-webkit-scrollbar-thumb{background:linear-gradient(90deg,rgba(37,99,235,.72),rgba(100,116,139,.72));border-color:rgba(255,255,255,.6)}
body.theme-light .month-rules-strip::-webkit-scrollbar-thumb:hover{background:linear-gradient(90deg,rgba(29,78,216,.84),rgba(71,85,105,.82))}
.month-rule-card{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));min-width:220px}
.month-rule-card strong{font-size:.96rem}
.month-rule-card__metrics{display:flex;flex-direction:column;gap:8px;font-size:.88rem;color:var(--muted)}
.forecast-support-grid{align-items:start}
.budget-reserve-list{display:flex;flex-direction:column;gap:12px}
.budget-reserve-card{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02))}
.budget-reserve-card__top{display:flex;justify-content:space-between;gap:12px;align-items:center}
.budget-reserve-card__top span{font-size:.82rem;color:var(--muted)}
.budget-reserve-card__metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.budget-reserve-card__metrics div{display:flex;flex-direction:column;gap:4px}
.budget-reserve-card__metrics span{font-size:.78rem;color:var(--muted)}
.budget-reserve-card__metrics strong{font-size:.92rem;line-height:1.25}
body.theme-light .month-rule-card,body.theme-light .budget-reserve-card{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.96))}
@media (max-width: 900px){.budget-reserve-card__metrics{grid-template-columns:1fr}}


.planner-calendar { display:grid; gap:10px; }
.planner-calendar__weekdays,
.planner-calendar__week { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px; }
.planner-calendar__weekdays span { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); padding:0 4px; }
.planner-day { position:relative; min-height:118px; border:1px solid rgba(148,163,184,.22); background:rgba(15,23,42,.24); border-radius:18px; padding:12px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-align:left; color:inherit; }
.planner-day.is-outside { opacity:.45; }
.planner-day.is-today { border-color:rgba(34,197,94,.45); box-shadow:0 0 0 1px rgba(34,197,94,.18) inset; }
.planner-day.has-events { border-color:rgba(56,189,248,.36); }
.planner-day__label { font-weight:700; }
.planner-day__count, .planner-day__net, .planner-day__meta-line { font-size:12px; color:var(--text-muted); }
.planner-day__count--muted { margin-top:auto; }
.planner-day__meta-lines { display:flex; flex-direction:column; gap:4px; margin-top:auto; }
.planner-day__tooltip { position:absolute; left:12px; top:calc(100% + 8px); width:min(320px, calc(100vw - 64px)); background:rgba(15,23,42,.98); color:#fff; border:1px solid rgba(148,163,184,.28); border-radius:14px; padding:12px; box-shadow:0 18px 40px rgba(2,6,23,.35); display:none; z-index:30; }
.planner-day__tooltip strong { display:block; margin-bottom:8px; }
.planner-day__tooltip span { display:block; font-size:13px; line-height:1.45; margin-top:4px; }
.planner-day:hover .planner-day__tooltip,
.planner-day:focus-visible .planner-day__tooltip { display:block; }
@media (max-width: 980px) {
  .planner-calendar__weekdays,
  .planner-calendar__week { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

.page-mobiel-dashboard .sidebar__nav .nav-item.is-active{box-shadow:0 0 0 1px rgba(96,165,250,.28) inset}
.page-header--mobile-dashboard{align-items:flex-start;gap:12px}
.mobile-dashboard{display:flex;flex-direction:column;gap:16px}
.mobile-dashboard__view-actions{display:flex;justify-content:flex-start}
.mobile-dashboard__month-filter{width:100%}
.mobile-dashboard__month-filter select{width:100%}
.mobile-dashboard__hero-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mobile-dashboard__hero-card,.mobile-dashboard__status-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px}
.mobile-dashboard__hero-card span,.mobile-dashboard__status-card span{font-size:.78rem;line-height:1.3;color:var(--muted)}
.mobile-dashboard__hero-card strong{font-size:1.18rem;line-height:1.15}
.mobile-dashboard__status-card strong{font-size:1rem;line-height:1.2}
.mobile-dashboard__status-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mobile-dashboard__status-grid--forecast{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:12px}
.mobile-dashboard__status-card--compact{border:1px solid var(--line);border-radius:16px;background:rgba(148,163,184,.08)}
.mobile-dashboard__panel{overflow:hidden}
.mobile-dashboard__quick-links{display:grid;grid-template-columns:1fr;gap:10px}
.mobile-dashboard__event-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.mobile-dashboard__event-item{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line)}
.mobile-dashboard__event-item:first-child{border-top:1px solid var(--line)}
.mobile-dashboard__event-item strong{display:block;font-size:.92rem;line-height:1.25}
.mobile-dashboard__event-item small{display:block;margin-top:4px;color:var(--muted)}
.mobile-dashboard__event-item span{font-weight:700;white-space:nowrap}
.mobile-dashboard__split-grid{align-items:start}
body.theme-light .mobile-dashboard__status-card--compact{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.96))}
@media (max-width: 900px){
  .page-mobiel-dashboard .sidebar{display:none}
  .page-mobiel-dashboard .app-shell{grid-template-columns:1fr}
  .page-mobiel-dashboard .main-shell{min-width:0}
  .page-mobiel-dashboard .page-shell{padding:14px}
  .page-mobiel-dashboard .topbar{padding:12px 14px 0}
}
@media (max-width: 640px){
  .mobile-dashboard__hero-grid,.mobile-dashboard__status-grid,.mobile-dashboard__status-grid--forecast{grid-template-columns:1fr}
  .mobile-dashboard__event-item{flex-direction:column}
}


.schema-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.schema-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.65); backdrop-filter: blur(3px); }
.schema-modal__dialog { position: relative; width: min(760px, 100%); background: var(--panel, #0f172a); color: var(--text, #e5e7eb); border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 24px; padding: 1.25rem; box-shadow: 0 28px 80px rgba(15,23,42,.35); display: grid; gap: 1rem; }
.schema-modal__header { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.schema-modal__details { background: rgba(15,23,42,.35); border: 1px solid rgba(148,163,184,.18); border-radius: 16px; padding: .875rem; white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: auto; }
body.light-mode .schema-modal__dialog { background: #ffffff; color: #0f172a; }
body.light-mode .schema-modal__details { background: rgba(241, 245, 249, 0.9); }

.settings-overview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:18px}.settings-overview-card{padding:18px;border-radius:20px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:8px;border:1px solid var(--line)}.settings-overview-card strong{font-size:1.15rem;line-height:1.15}.settings-overview-card p{margin:0;color:var(--muted);line-height:1.45}.settings-panel{display:grid;gap:18px}.settings-hero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.9fr);gap:16px}.settings-hero-card,.settings-summary-card{padding:18px;border-radius:22px}.settings-hero-card strong,.settings-summary-card strong{font-size:1.2rem;line-height:1.15}.settings-hero-card p{margin:8px 0 0;color:var(--muted);line-height:1.5}.settings-summary-list{display:grid;gap:10px;margin-top:10px}.settings-summary-list div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid var(--line)}.settings-summary-list div:first-child{border-top:0;padding-top:0}.settings-summary-list span{color:var(--muted);text-align:right}.settings-field-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}.settings-field-card{padding:18px;border-radius:22px;border:1px solid var(--line)}.settings-field-form{display:grid;gap:14px}.settings-field-card__header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.settings-field-card__header p{margin:6px 0 0;color:var(--muted);line-height:1.45}.settings-field-card__meta{font-size:.72rem;color:var(--muted);padding:6px 10px;border-radius:999px;background:rgba(148,163,184,.12);white-space:nowrap}.settings-field-card__body{display:grid;gap:12px}.settings-field{display:grid;gap:8px}.settings-field span{font-size:.82rem;color:var(--muted)}.settings-field-card__footer{display:flex;justify-content:flex-end}.settings-switch{display:flex;align-items:center;gap:12px;cursor:pointer}.settings-switch input{position:absolute;opacity:0;pointer-events:none}.settings-switch__track{position:relative;width:52px;height:30px;border-radius:999px;background:rgba(148,163,184,.28);transition:background .2s ease}.settings-switch__thumb{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 3px 10px rgba(15,23,42,.22);transition:transform .2s ease}.settings-switch input:checked + .settings-switch__track{background:rgba(34,197,94,.72)}.settings-switch input:checked + .settings-switch__track .settings-switch__thumb{transform:translateX(22px)}.settings-switch__label{font-weight:600}.settings-manual-card{padding:18px;border-radius:22px}.settings-manual-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end}.settings-manual-actions{display:flex;justify-content:flex-end}.body.theme-light .settings-field-card__meta{background:rgba(148,163,184,.1)}
@media (max-width: 900px){.settings-hero-grid{grid-template-columns:1fr}.settings-manual-grid{grid-template-columns:1fr}.settings-field-grid{grid-template-columns:1fr}}
.health-modal { position: fixed; inset: 0; z-index: 1190; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.health-modal__backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.58); backdrop-filter: blur(3px); }
.health-modal__dialog { position: relative; width: min(860px, 100%); max-height: min(88vh, 920px); overflow: auto; background: var(--panel, #0f172a); color: var(--text, #e5e7eb); border: 1px solid rgba(148,163,184,.2); border-radius: 24px; padding: 1.25rem; box-shadow: 0 28px 80px rgba(15,23,42,.35); display: grid; gap: 1rem; }
.health-modal__header { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.health-modal__list { display:grid; gap: .9rem; }
.health-modal__card { border:1px solid rgba(148,163,184,.18); border-radius: 18px; padding: 1rem; display:grid; gap:.75rem; background: rgba(15,23,42,.25); }
.health-modal__card--warning { border-color: rgba(245, 158, 11, .45); }
.health-modal__card--error { border-color: rgba(239, 68, 68, .45); }
.health-modal__card--success { border-color: rgba(34, 197, 94, .45); }
.health-modal__card-header { display:flex; justify-content:space-between; gap: 1rem; }
.health-modal__card-header p { margin:.35rem 0 0; color: var(--muted, #94a3b8); }
.health-modal__details { background: rgba(15,23,42,.35); border:1px solid rgba(148,163,184,.18); border-radius:14px; padding:.875rem; color: var(--muted, #94a3b8); }
body.light-mode .health-modal__dialog { background:#fff; color:#0f172a; }
body.light-mode .health-modal__card { background: rgba(241,245,249,.8); }
body.light-mode .health-modal__details { background: rgba(241,245,249,.95); }


.compensation-calculator__results{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:8px}.calc-kpi{padding:14px 16px;border:1px solid var(--line);border-radius:18px;display:grid;gap:6px;background:rgba(148,163,184,.08)}.calc-kpi span{font-size:.8rem;color:var(--muted)}.calc-kpi strong{font-size:1.1rem}.calc-kpi--accent{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.08)}.compensation-chart{display:grid;gap:10px}.compensation-chart__bar{display:flex;height:18px;border-radius:999px;overflow:hidden;background:rgba(148,163,184,.14)}.compensation-chart__segment{display:block;height:100%}.compensation-chart__segment--bonus{background:rgba(59,130,246,.8)}.compensation-chart__segment--vacation{background:rgba(16,185,129,.8)}.compensation-chart__segment--tax{background:rgba(244,63,94,.78)}.compensation-chart__legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;font-size:.85rem;color:var(--muted)}.compensation-chart__legend strong{display:block;color:var(--text)}@media (max-width:900px){.compensation-calculator__results,.compensation-chart__legend{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:640px){.compensation-calculator__results,.compensation-chart__legend{grid-template-columns:1fr}}

body.has-mobile-nav-open{overflow:hidden}
.topbar__brandline{display:flex;align-items:center;gap:12px;min-width:0}
.topbar__context{display:flex;flex-direction:column;gap:2px;color:var(--muted)}
.topbar__context strong{color:var(--text);font-size:.96rem;line-height:1.2}
.topbar__context span{font-size:.82rem;line-height:1.3}
.mobile-nav-toggle{display:none;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);cursor:pointer}
.mobile-nav-toggle__icon,.mobile-nav-toggle__icon::before,.mobile-nav-toggle__icon::after{display:block;width:18px;height:2px;border-radius:999px;background:currentColor;content:''}
.mobile-nav-toggle__icon{position:relative}
.mobile-nav-toggle__icon::before{position:absolute;left:0;top:-6px}
.mobile-nav-toggle__icon::after{position:absolute;left:0;top:6px}
.mobile-nav{position:fixed;inset:0;z-index:1180;display:none}
.mobile-nav.is-open{display:block}
.mobile-nav__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.64);backdrop-filter:blur(4px)}
.mobile-nav__sheet{position:relative;margin-left:auto;width:min(360px,calc(100vw - 20px));height:100%;padding:18px 16px 22px;display:flex;flex-direction:column;gap:18px;background:linear-gradient(180deg,var(--sidebar-grad-start),var(--sidebar-grad-end));border-left:1px solid var(--line);box-shadow:-14px 0 40px rgba(2,6,23,.34);overflow:auto}
.mobile-nav__header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.mobile-nav__content{display:flex;flex-direction:column;gap:16px}
.mobile-nav__meta{padding-top:6px}
.summary-row--stack{align-items:flex-start;flex-direction:column}
.summary-row--stack strong,.summary-row--stack span,.summary-row--stack small{display:block}
.summary-row--stack small{color:var(--muted);line-height:1.45}
.inbox-list{display:grid;gap:14px}
.inbox-card{display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02))}
.inbox-card--danger{border-color:rgba(239,68,68,.28);background:linear-gradient(180deg,rgba(239,68,68,.10),rgba(255,255,255,.02))}
.inbox-card--warning{border-color:rgba(245,158,11,.30);background:linear-gradient(180deg,rgba(245,158,11,.10),rgba(255,255,255,.02))}
.inbox-card--success{border-color:rgba(34,197,94,.28);background:linear-gradient(180deg,rgba(34,197,94,.10),rgba(255,255,255,.02))}
.inbox-card--info{border-color:rgba(59,130,246,.28);background:linear-gradient(180deg,rgba(59,130,246,.10),rgba(255,255,255,.02))}
.inbox-card__row{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.inbox-card__meta{font-size:.86rem;color:var(--muted)}
.inbox-card__actions{display:flex;justify-content:flex-start}
body.theme-light .inbox-card{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.96))}
body.theme-light .inbox-card--danger{background:linear-gradient(180deg,rgba(254,242,242,.98),rgba(255,255,255,.98))}
body.theme-light .inbox-card--warning{background:linear-gradient(180deg,rgba(255,251,235,.98),rgba(255,255,255,.98))}
body.theme-light .inbox-card--success{background:linear-gradient(180deg,rgba(240,253,244,.98),rgba(255,255,255,.98))}
body.theme-light .inbox-card--info{background:linear-gradient(180deg,rgba(239,246,255,.98),rgba(255,255,255,.98))}
.page-start .page-header{background:radial-gradient(circle at top left,rgba(56,189,248,.18),transparent 42%),rgba(255,255,255,.02)}
.page-forecast .page-header{background:radial-gradient(circle at top right,rgba(14,165,233,.18),transparent 42%),rgba(255,255,255,.02)}
.page-inbox .page-header{background:radial-gradient(circle at top left,rgba(249,115,22,.16),transparent 42%),rgba(255,255,255,.02)}
.page-bankimport .page-header,.page-loonstrook .page-header{background:radial-gradient(circle at top center,rgba(59,130,246,.16),transparent 44%),rgba(255,255,255,.02)}
.page-automatiseringen .page-header{background:radial-gradient(circle at top right,rgba(34,197,94,.16),transparent 42%),rgba(255,255,255,.02)}
.page-start .view-strip,.page-forecast .view-strip,.page-bankimport .view-strip,.page-loonstrook .view-strip,.page-automatiseringen .view-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
.page-inbox .workspace-layout--wide{grid-template-columns:minmax(0,1.45fr) minmax(320px,.85fr)}
.page-automatiseringen .settings-field-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.page-automatiseringen .transaction-table__head,.page-automatiseringen .transaction-row{grid-template-columns:minmax(120px,1fr) minmax(90px,.8fr) minmax(220px,1.45fr) minmax(140px,.95fr) minmax(110px,.9fr)}
@media (max-width: 1200px){
  .mobile-nav-toggle{display:inline-flex}
  .topbar--minimal{justify-content:space-between;flex-direction:row;align-items:center}
}
@media (max-width: 900px){
  .topbar__context{display:none}
  .mobile-nav__sheet{width:min(340px,calc(100vw - 12px))}
  .page-start .view-strip,.page-forecast .view-strip,.page-bankimport .view-strip,.page-loonstrook .view-strip,.page-automatiseringen .view-strip{grid-template-columns:1fr}
  .page-inbox .workspace-layout--wide{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .inbox-card__row{flex-direction:column}
}
.page-mailcentrum .page-header{background:radial-gradient(circle at top left,rgba(59,130,246,.16),transparent 42%),radial-gradient(circle at top right,rgba(14,165,233,.12),transparent 38%),rgba(255,255,255,.02)}
.mail-shell{display:grid;grid-template-columns:minmax(220px,260px) minmax(320px,.95fr) minmax(420px,1.15fr);gap:16px;align-items:start}
.mail-pane{min-height:680px;display:flex;flex-direction:column;overflow:hidden}
.mail-pane__section{padding:18px 18px 0}
.mail-pane__section:last-child{padding-bottom:18px}
.mail-folder-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.mail-folder{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:rgba(15,23,42,.18);color:var(--text);text-decoration:none}
.mail-folder:hover{border-color:rgba(96,165,250,.34);transform:translateY(-1px)}
.mail-folder.is-active{background:linear-gradient(180deg,rgba(56,189,248,.18),rgba(37,99,235,.12));border-color:rgba(56,189,248,.4)}
.mail-folder__label{font-weight:600}
.mail-folder__count{font-size:.85rem;color:var(--muted)}
.mail-server-card{border-top:1px solid var(--line);padding-top:18px}
.mail-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
.mail-list{display:flex;flex-direction:column;gap:10px;padding:0 18px 18px;overflow:auto}
.mail-row{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:18px;border:1px solid var(--line);background:rgba(15,23,42,.18);color:var(--text);text-decoration:none}
.mail-row:hover{border-color:rgba(59,130,246,.38);transform:translateY(-1px)}
.mail-row.is-active{background:linear-gradient(180deg,rgba(56,189,248,.14),rgba(37,99,235,.08));border-color:rgba(56,189,248,.4)}
.mail-row.is-unread{box-shadow:0 0 0 1px rgba(248,113,113,.18) inset}
.mail-row__header,.mail-row__footer{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mail-row__header strong,.mail-row__subject{min-width:0}
.mail-row__subject{display:flex;align-items:center;gap:8px;font-weight:700}
.mail-row__star{color:#fbbf24;font-weight:800}
.mail-row p{margin:0;color:var(--muted)}
.mail-reader,.mail-compose{display:flex;flex-direction:column;gap:16px;padding:18px}
.mail-reader__header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.mail-meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;padding:14px;border:1px solid var(--line);border-radius:18px;background:rgba(15,23,42,.14)}
.mail-meta-grid strong{display:block;margin-top:4px}
.mail-reader__body{margin:0;padding:18px;border:1px solid var(--line);border-radius:18px;background:rgba(15,23,42,.14);white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;line-height:1.6}
.field-error{display:block;color:#fca5a5;margin-top:6px;font-size:.85rem}
.page-mailcentrum .view-strip{margin-bottom:18px}
@media (max-width: 1440px){
  .mail-shell{grid-template-columns:minmax(220px,240px) minmax(280px,.9fr) minmax(360px,1fr)}
}
@media (max-width: 1180px){
  .mail-shell{grid-template-columns:1fr}
  .mail-pane{min-height:auto}
  .mail-list{max-height:none}
}
