/* Geld (V2). App.razor (KERN, bevroren) moet hier nog naar linken — zie docs/besluiten-nacht/vervolg-geld.md. */

.oh-formula-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 16px;
    padding: 1rem;
}

.oh-formula-term {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
}

.oh-formula-value {
    font-size: 20px;
    white-space: nowrap;
}

.oh-formula-label {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.oh-formula-op {
    font: 500 20px/1.5 var(--oh-mono);
    color: var(--mud-palette-text-secondary);
    min-width: 1ch;
}

.oh-formula-result .oh-formula-value {
    font-weight: 700;
}

/* kassabon (onder 600 px): operator in een eigen kolom links, uitkomst onder een streep */
.oh-formula-strip.oh-kassabon {
    display: grid;
    grid-template-columns: 1.5ch 1fr;
    gap: 8px 12px;
    align-items: baseline;
}

.oh-kassabon .oh-formula-value {
    font-size: 18px;
}

.oh-kassabon .oh-formula-eq,
.oh-kassabon .oh-formula-result {
    border-top: 1px solid var(--mud-palette-divider);
    padding-top: 8px;
}

.oh-formula-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1rem 1rem;
}

.oh-money-legend {
    display: flex;
    gap: 1rem;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

.oh-money-swatch, .oh-money-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.oh-money-dot {
    background: var(--mud-palette-warning);
    margin-left: 4px;
}

.oh-money-filled {
    background: var(--mud-palette-primary);
}

.oh-money-grid-wrap {
    overflow: auto;
    max-width: 100%;
}

table.oh-money-grid {
    border-collapse: collapse;
    width: auto;
    min-width: 100%;
}

.oh-money-grid thead th {
    position: sticky;
    top: 0;
    background: var(--oh-blad-kop);
    z-index: 2;
    padding: 0.35rem 0.75rem;
    min-width: 112px;
    text-align: right;
    white-space: nowrap;
    font-weight: 500;
}

.oh-money-grid tbody tr {
    border-top: 1px solid var(--oh-blad-lijn);
}

.oh-money-label-col {
    position: sticky;
    left: 0;
    background: var(--oh-kaart);
    z-index: 1;
    min-width: 200px;
    text-align: left;
    font-family: "Roboto", sans-serif;
    padding: 0.25rem 0.75rem 0.25rem 0.25rem;
}

.oh-money-grid thead .oh-money-label-col {
    background: var(--oh-blad-kop);
    z-index: 3;
}

.oh-money-cell {
    height: 32px;
    padding: 0.25rem 0.75rem;
    text-align: right;
    position: relative;
    cursor: pointer;
    white-space: nowrap;
}

@media (max-width: 599.98px) {
    .oh-money-label-col {
        min-width: 128px;
        max-width: 160px;
        white-space: normal;
    }
}

.oh-money-cell-filled {
    color: var(--mud-palette-primary);
}

.oh-money-cell-error {
    color: var(--mud-palette-error);
}

/* Celverwijzing (B1, B5…): tekst2 (TextSecondary, 60 %), niet text-disabled (38 %): dat haalde 4,5:1 niet in licht en donker. */
.oh-money-cellref {
    display: block;
    font-size: 0.65rem;
    color: var(--mud-palette-text-secondary);
}

.oh-mono {
    font-family: "Roboto Mono", monospace;
    font-variant-numeric: tabular-nums;
}

/* Geldkaart: wissel Plaatje | Optelsom en de staafgrafiek (feat/push-voorkeuren, STIJLGIDS §4 "Getallen als plaatje"). */
.oh-money-summary-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.oh-chart { display: flex; flex-direction: column; gap: 10px; }
.oh-chart-row { display: grid; grid-template-columns: 88px 1fr auto; align-items: center; gap: 8px; }
.oh-chart-rowlabel { font-size: .875rem; color: var(--mud-palette-text-secondary); }
.oh-chart-bar { width: 100%; height: 28px; display: block; }
.oh-chart-track { fill: var(--oh-blad-kop); }
.oh-chart-total { font-size: .875rem; color: var(--mud-palette-text-primary); white-space: nowrap; }
.oh-chart-s1 { fill: var(--oh-grafiek-1); background: var(--oh-grafiek-1); }
.oh-chart-s2 { fill: var(--oh-grafiek-2); background: var(--oh-grafiek-2); }
.oh-chart-s3 { fill: var(--oh-grafiek-3); background: var(--oh-grafiek-3); }
.oh-chart-s4 { fill: var(--oh-grafiek-4); background: var(--oh-grafiek-4); }
.oh-chart-s5 { fill: var(--oh-grafiek-5); background: var(--oh-grafiek-5); }
.oh-chart-legend { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 16px; }
.oh-chart-legend li { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: .875rem; color: var(--mud-palette-text-primary); }
.oh-chart-legend li.oh-chart-result .oh-chart-label { font-weight: 600; }
.oh-chart-swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.oh-chart-label { flex: 1 1 auto; min-width: 0; }
.oh-chart-note { color: var(--mud-palette-text-secondary); }
@media (max-width: 599.98px) {
    .oh-chart-row { grid-template-columns: 1fr auto; }
    .oh-chart-row .oh-chart-bar { grid-column: 1 / -1; grid-row: 2; }
}

/* ---- Geldstroom (27-9-2026, STIJLGIDS §4 "Sankey"): alleen thematokens, dus het app-thema wint. ---- */
.oh-sk-c-eigen,.oh-sk-c-verbouwing{--sk:var(--mud-palette-secondary)}
.oh-sk-c-hypotheek,.oh-sk-c-koop{--sk:var(--mud-palette-primary)}
.oh-sk-c-overig-bron,.oh-sk-c-overig{--sk:var(--mud-palette-info)}
.oh-sk-c-subsidie{--sk:var(--mud-palette-success)}
.oh-sk-c-kk{--sk:var(--mud-palette-warning)}
.oh-sk-c-tekort{--sk:var(--mud-palette-error)}
.oh-sk-c-over,.oh-sk-c-totaal{--sk:var(--mud-palette-text-secondary)}


.oh-flow{display:flex;flex-direction:column;gap:16px}
.oh-flow-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.oh-flow-toolbar .oh-flow-segment{margin-left:auto}
@media (max-width:599.98px){.oh-flow-toolbar .oh-flow-segment{margin-left:0}}
.oh-flow-segment .mud-button-root{text-transform:none;letter-spacing:.01em;min-height:32px}
.oh-flow-status{display:flex;flex-wrap:wrap;gap:8px}
.oh-flow-status:empty{display:none}
.oh-flow-chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:4px 12px;border-radius:14px;font-size:13px;line-height:1.35}
.oh-flow-chip-warn{background:color-mix(in srgb,var(--mud-palette-warning) 10%,var(--mud-palette-background));color:var(--oh-warning-tekst)}
.oh-flow-chip-info{background:color-mix(in srgb,var(--mud-palette-info) 8%,var(--mud-palette-background));color:var(--oh-info-tekst)}
.oh-flow-chip-ok{background:color-mix(in srgb,var(--mud-palette-success) 8%,var(--mud-palette-background));color:var(--mud-palette-text-primary)}
.oh-flow-chip-ok .mud-icon-root{color:var(--mud-palette-success)}
.mud-paper .oh-flow-chip-warn{background:color-mix(in srgb,var(--mud-palette-warning) 10%,var(--oh-kaart))}
.mud-paper .oh-flow-chip-info{background:color-mix(in srgb,var(--mud-palette-info) 8%,var(--oh-kaart))}
.mud-paper .oh-flow-chip-ok{background:color-mix(in srgb,var(--mud-palette-success) 8%,var(--oh-kaart))}

.oh-flow-card-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:16px 16px 8px}
.oh-flow-card-tools{display:flex;flex-wrap:wrap;gap:8px}
.oh-flow-legend{display:flex;flex-wrap:wrap;gap:4px 16px;padding:8px 16px 16px;font-size:12px;color:var(--mud-palette-text-secondary)}
.oh-flow-legend > span{display:inline-flex;align-items:center;gap:6px}
.oh-flow-swatch{display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--sk);flex:none}
.oh-flow-swatch.oh-sk-proposed{background:repeating-linear-gradient(45deg,var(--sk) 0 2px,transparent 2px 5px);box-shadow:inset 0 0 0 1px var(--sk)}
.oh-flow-swatch.oh-sk-expected{background:transparent;border:1.5px dashed var(--sk)}
.oh-flow-swatch-paid{background:linear-gradient(to right,var(--mud-palette-primary) 50%,color-mix(in srgb,var(--mud-palette-primary) 30%,transparent) 50%)}
.oh-flow-missing-note{display:block;color:var(--mud-palette-text-secondary)}

.oh-flow-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px 16px;align-items:end}
.oh-flow-kpi{display:flex;flex-direction:column;gap:2px;font-size:15px}
.oh-flow-kpi-label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mud-palette-text-secondary)}
.oh-flow-kpi-link{font-size:14px}

/* Sankey */
.oh-sk{padding:0 8px}
.oh-sk-scroll{margin:0 -8px;padding:0 8px}
.oh-sk-svg{display:block;width:100%;height:auto;overflow:visible}
.oh-sk-band{fill:var(--sk);fill-opacity:.3;transition:d 450ms ease,fill-opacity 150ms}
.oh-sk-link{cursor:pointer;outline:none}
.oh-sk-link:hover .oh-sk-band{fill-opacity:.48}
.oh-sk-link:focus-visible .oh-sk-band{stroke:var(--mud-palette-primary);stroke-width:2}
.oh-sk-proposed .oh-sk-band{fill-opacity:1}
.oh-sk-link.oh-sk-proposed:hover .oh-sk-band{fill-opacity:.8}
.oh-sk-hatch-bg{fill:var(--sk);fill-opacity:.16}
.oh-sk-hatch-line{stroke:var(--sk);stroke-width:2.5;stroke-opacity:.6}
.oh-sk-expected .oh-sk-band{fill-opacity:.08;stroke:var(--sk);stroke-width:1.5;stroke-dasharray:5 4}
.oh-sk-actual .oh-sk-link:not(.oh-sk-proposed) .oh-sk-band{fill-opacity:.18}
.oh-sk-paid{fill:var(--sk);fill-opacity:.72;pointer-events:none}
.oh-sk-node{cursor:pointer}
.oh-sk-rect{fill:var(--sk)}
.oh-sk-expected .oh-sk-rect{fill-opacity:.2;stroke:var(--sk);stroke-width:1.5;stroke-dasharray:3 2}
.oh-sk-synthetic.oh-sk-c-tekort .oh-sk-rect{stroke:var(--sk);stroke-width:1.5;stroke-dasharray:3 2}
.oh-sk-actual .oh-sk-rect{fill-opacity:.4}
.oh-sk-rect-paid{fill:var(--sk)}
.oh-sk-label{font:12px "Roboto",system-ui,sans-serif;fill:var(--mud-palette-text-primary);paint-order:stroke;stroke:var(--oh-kaart);
  stroke-width:4px;stroke-linejoin:round;pointer-events:none}
.oh-sk-name{font-weight:500}
.oh-sk-amount{fill:var(--mud-palette-text-secondary);font-variant-numeric:tabular-nums}
.oh-sk-hint{color:var(--mud-palette-text-secondary)}
.oh-sk-empty{padding:16px;color:var(--mud-palette-text-secondary)}

/* Overzicht (P&L-tabel) */
.oh-flow-tables{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding:0 0 8px}
.oh-flow-table-card.mud-paper{box-shadow:none;border-top:1px solid var(--mud-palette-divider);border-radius:0}
.oh-flow-table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
.oh-flow-table thead th{position:sticky;top:64px;z-index:2;background:var(--oh-kaart);font-size:12px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mud-palette-text-secondary);text-align:left;padding:10px 12px;border-bottom:1px solid var(--mud-palette-divider)}
@media (max-width:599.98px){.oh-flow-table thead th{top:104px}}
.oh-flow-table tbody th,.oh-flow-table tbody td,.oh-flow-table tfoot th,.oh-flow-table tfoot td{padding:8px 12px;border-bottom:1px solid var(--mud-palette-divider);
  text-align:left;font-weight:400;vertical-align:top}
.oh-flow-table .oh-flow-col-num{text-align:right;white-space:nowrap}
.oh-flow-table thead .oh-flow-col-num{text-align:right}
.oh-flow-level-0 th,.oh-flow-level-0 td{font-weight:500}
.oh-flow-table tbody tr:hover{background:var(--oh-hover)}
.oh-flow-total th,.oh-flow-total td{font-weight:700;border-bottom:0}
.oh-flow-name{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.oh-flow-toggle{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin:-2px 0;padding:0;border:0;
  border-radius:12px;background:none;color:inherit;cursor:pointer}
.oh-flow-toggle:hover{background:var(--oh-hover)}
.oh-flow-toggle:focus-visible{outline:2px solid var(--mud-palette-primary);outline-offset:2px}
.oh-flow-toggle-spacer{display:inline-block;width:24px}
.oh-flow-chevron{transition:transform 150ms}
.oh-flow-open{transform:rotate(90deg)}
.oh-flow-sub{display:block;margin:2px 0 0 46px;font-size:12px;font-weight:400;color:var(--mud-palette-text-secondary)}
.oh-flow-badge{display:inline-block;font-size:11px;font-weight:500;line-height:18px;padding:0 8px;border-radius:9px;white-space:nowrap;
  background:color-mix(in srgb,var(--mud-palette-info) 8%,var(--oh-kaart));color:var(--oh-info-tekst)}
.oh-flow-badge-expected{background:color-mix(in srgb,var(--mud-palette-success) 8%,var(--oh-kaart));color:var(--mud-palette-text-primary)}
.oh-flow-missing .oh-flow-label{color:var(--mud-palette-text-secondary)}
.oh-flow-over{color:var(--oh-warning-tekst)}

/* Bronnen / Uitgaven met balken, maandlasten, samenvatting */
.oh-flow-bars-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.oh-flow-bars{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.oh-flow-bar-title{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 8px;margin-bottom:8px}
.oh-flow-bar-total{font-weight:500}
.oh-flow-bar-row{padding:6px 0}
.oh-flow-bar-text{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:14px}
.oh-flow-bar-label{min-width:0}
.oh-flow-bar-track{position:relative;height:8px;margin:4px 0 2px;border-radius:4px;background:var(--oh-blad-kop);overflow:hidden}
.oh-flow-bar{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--sk)}
.oh-flow-bar.oh-sk-proposed{background:repeating-linear-gradient(45deg,var(--sk) 0 3px,color-mix(in srgb,var(--sk) 30%,transparent) 3px 6px)}
.oh-flow-bar.oh-sk-expected{background:color-mix(in srgb,var(--sk) 22%,transparent);outline:1.5px dashed var(--sk);outline-offset:-1.5px}
.oh-flow-bar.oh-flow-bar-plan{background:color-mix(in srgb,var(--sk) 32%,transparent)}
.oh-flow-bar-paid{height:100%;border-radius:4px;background:var(--sk)}
.oh-flow-bar-meta{font-size:12px;color:var(--mud-palette-text-secondary)}
.oh-flow-monthly-total{padding-top:8px;margin-top:4px;border-top:1px solid var(--mud-palette-divider);font-weight:500}
.oh-flow-summary-link{font-size:14px}
.oh-flow-stack-row{margin:8px 0 12px}
.oh-flow-stack{display:flex;gap:2px;height:12px;margin:6px 0;border-radius:6px;overflow:hidden}
.oh-flow-stack-part{min-width:3px;background:var(--sk)}
.oh-flow-stack-part.oh-sk-proposed{background:repeating-linear-gradient(45deg,var(--sk) 0 3px,color-mix(in srgb,var(--sk) 30%,transparent) 3px 6px)}
.oh-flow-stack-legend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--mud-palette-text-secondary)}
.oh-flow-stack-legend > span{display:inline-flex;align-items:center;gap:6px}

/* Werkelijk: betalingen, bouwdepot, subsidies */
.oh-ledger-list{list-style:none;margin:0;padding:0}
.oh-ledger-row{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid var(--mud-palette-divider)}
.oh-ledger-subsidies .oh-ledger-row{padding:12px 0}
.oh-ledger-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.oh-ledger-title{font-weight:500}
.oh-ledger-meta{font-size:12px;color:var(--mud-palette-text-secondary)}
.oh-ledger-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.oh-ledger-amount{font-weight:500}
.oh-ledger-status .mud-button-root{text-transform:none;letter-spacing:.01em}
.oh-ledger-proposed{background:repeating-linear-gradient(45deg,transparent 0 10px,var(--oh-hover) 10px 14px)}
.oh-ledger-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px 16px;padding:0 16px 16px}
.oh-ledger-form-actions{grid-column:1/-1;display:flex;gap:8px}
.oh-ledger-totals{display:flex;flex-wrap:wrap;gap:16px;padding:12px 16px;border-top:1px solid var(--mud-palette-divider);font-weight:500}
.oh-ledger-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:0 0 8px}
.oh-ledger-kv dt{font-size:12px;color:var(--mud-palette-text-secondary)}
.oh-ledger-kv dd{margin:0;font-size:16px}
.oh-ledger-depot-bar{height:12px}
.oh-ledger-depot-paid{background:var(--sk)}
.oh-ledger-review{margin-bottom:16px}
@media (max-width:599.98px){
  .oh-ledger-row{flex-direction:column}
  .oh-ledger-side{flex-direction:row;flex-wrap:wrap;align-items:center}
}

/* Geldstroom interactief (27-9): aanwijzen/kiezen licht op wat verbonden is, de rest dimt; vloeiende overgangen; live
   gewijzigd kort gemarkeerd. Alles uit onder prefers-reduced-motion. */
.oh-sk-node{transition:transform 450ms ease,opacity 200ms;cursor:pointer}
.oh-sk-link{transition:opacity 200ms}
.oh-sk-rect,.oh-sk-rect-paid{transition:height 450ms ease}
.oh-sk-paid{transition:d 450ms ease}
.oh-sk-node,.oh-sk-link{animation:oh-sk-in 350ms ease both}
@keyframes oh-sk-in{from{opacity:0}}
.oh-sk-drill{cursor:zoom-in}
.oh-sk.oh-flow-selecting [data-flow-key]:not(.oh-flow-sel){opacity:.28}
.oh-sk-link.oh-flow-sel .oh-sk-band{fill-opacity:.5}
.oh-flow-hovering .oh-sk [data-flow-key]:not(.oh-flow-hl){opacity:.22}
.oh-flow-hovering .oh-sk [data-flow-key].oh-flow-hl{opacity:1}
.oh-sk-link.oh-flow-hl .oh-sk-band{fill-opacity:.52}
.oh-sk-node.oh-flow-changed .oh-sk-rect{animation:oh-sk-pulse 1.2s ease 3}
.oh-sk-link.oh-flow-changed .oh-sk-band{animation:oh-sk-glow 1.2s ease 3}
@keyframes oh-sk-pulse{50%{stroke:var(--mud-palette-warning);stroke-width:4px}}
@keyframes oh-sk-glow{50%{fill-opacity:.75}}
.oh-flow-row{cursor:pointer}
.oh-flow-table tbody tr.oh-flow-hl,.oh-flow-table tbody tr.oh-flow-sel{background:var(--oh-actief)}
.oh-flow-bar-row{cursor:pointer;margin:0 -8px;padding:6px 8px;border-radius:4px}
.oh-flow-bar-row.oh-flow-hl,.oh-flow-bar-row.oh-flow-sel{background:var(--oh-actief)}
.oh-flow-row.oh-flow-changed,.oh-flow-bar-row.oh-flow-changed{animation:oh-flow-flash 2.4s ease}
@keyframes oh-flow-flash{0%,40%{background:color-mix(in srgb,var(--mud-palette-warning) 18%,transparent)}}
.oh-sk-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:0 8px 8px;font-size:14px;color:var(--mud-palette-text-secondary)}
.oh-sk-crumb{padding:4px 6px;border:0;border-radius:4px;background:none;color:var(--mud-palette-primary);font:inherit;cursor:pointer}
.oh-sk-crumb:hover{background:var(--oh-hover)}
.oh-sk-crumb:focus-visible{outline:2px solid var(--mud-palette-primary);outline-offset:2px}
.oh-sk-crumb-current{padding:4px 6px;color:var(--mud-palette-text-primary);font-weight:500}
.oh-sk-detail{min-height:40px;margin:8px 8px 0;font-size:14px;line-height:1.45;color:var(--mud-palette-text-primary)}
.oh-sk-detail p{margin:0}
.oh-sk-detail-status{font-size:13px;color:var(--mud-palette-text-secondary)}
.oh-sk-detail-links{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin-top:4px}
.oh-flow-tip{position:fixed;z-index:1500;max-width:340px;padding:8px 12px;border-radius:4px;background:var(--mud-palette-surface);
  color:var(--mud-palette-text-primary);box-shadow:var(--oh-elev3);font:13px/1.45 "Roboto",system-ui,sans-serif;white-space:pre-line;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .oh-sk-band,.oh-sk-paid,.oh-sk-node,.oh-sk-link,.oh-sk-rect,.oh-sk-rect-paid,.oh-flow-chevron{transition:none}
  .oh-sk-node,.oh-sk-link,.oh-sk-node.oh-flow-changed .oh-sk-rect,.oh-sk-link.oh-flow-changed .oh-sk-band,.oh-flow-row.oh-flow-changed,.oh-flow-bar-row.oh-flow-changed{animation:none}
}