/* Gedeelde Summa-onderdelen (25 september 2026, op gebruikersverzoek: "1 design moet
   leidend zijn"). De maten komen van Vandaag: omzetkaart (24px, zachte schaduw),
   Openstaand/Te laat (18px tegels), sectiekaarten (18px, schreeftitel 22/24px) en
   "Omzet per maand". Nieuwe klassen, zodat oudere schermregels er niet op ingrijpen. */

.summa-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.summa-side, .summa-main { display: grid; gap: 12px; align-content: start; min-width: 0; }
.summa-side > [hidden], .summa-main > [hidden], .summa-groups > [hidden] { display: none; }

/* Hoofdkaart = de omzetkaart van Vandaag */
.summa-hero {
  display: grid; gap: 12px; min-width: 0; margin: 0; padding: 20px 18px;
  border: 1px solid color-mix(in srgb, var(--line) 45%, transparent); border-radius: 24px;
  background: linear-gradient(135deg, var(--paper), color-mix(in srgb, var(--paper) 70%, var(--canvas)));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink);
}
.summa-hero [hidden] { display: none; }
.summa-hero-label { color: var(--muted); font: 500 12px/1.4 Figtree, sans-serif; }
.summa-hero-value {
  display: block; min-width: 0; margin: 0; color: var(--ink);
  font: 400 clamp(38px, 11vw, 50px)/1.1 var(--font-display); letter-spacing: -.06em;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.summa-hero-context { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; color: var(--muted); font: 400 12px/1.45 Figtree, sans-serif; }
.summa-hero-context > span:not(.summa-badge) { min-width: 0; overflow-wrap: anywhere; }
.summa-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px;
  background: var(--surface-soft); color: var(--muted); font: 650 12px/1.2 Figtree, sans-serif; white-space: nowrap;
}
.summa-badge.is-good { background: var(--green-soft); color: var(--green); }
.summa-badge.is-attention { background: var(--amber-soft); color: var(--amber); }
.summa-badge.is-late { background: var(--danger-soft); color: var(--danger); }
/* Klikbare telling (27 sep 2026): dezelfde badge met een pijltje; leidt naar de lijst waar het om gaat
   (Uitgaven → Controle, Facturen → Te laat, Inzichten → Btw). Klikvlak minstens 44px hoog. */
button.summa-badge.is-link {
  position: relative; min-height: 0; margin: 0; padding: 6px 7px 6px 10px; gap: 3px; border: 0; box-shadow: none;
  font: 650 12px/1.2 Figtree, sans-serif; text-align: left; cursor: pointer;
}
button.summa-badge.is-link::after { content: ''; position: absolute; inset: -9px 0; }
button.summa-badge.is-link .summa-icon { --icon-size: 14px; flex: none; width: 14px; height: 14px; }
/* Hover (28 sep 2026, gebruikerskeuze "6 · Puls" uit het speelveld): het label groeit opbouwend naar 106% met een
   veertje, het pijltje schuift 2px mee en zolang je erop blijft loopt er elke 1,6 s een zachte ring naar buiten in de
   kleur van het label (--badge-puls; te laat = rood, zie signal.css). Toetsenbordfocus doet hetzelfde. Indrukken = 98%.
   Met "minder beweging": geen groei en geen ring, alleen een lichte tint. */
@keyframes summa-badge-puls {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--badge-puls, currentColor) 55%, transparent); }
  100% { box-shadow: 0 0 0 11px color-mix(in srgb, var(--badge-puls, currentColor) 0%, transparent); }
}
button.summa-badge.is-link { transition: transform .38s cubic-bezier(.34, 1.56, .64, 1), background-color .2s ease; }
button.summa-badge.is-link::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
button.summa-badge.is-link .summa-icon { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
button.summa-badge.is-link:is(:hover, :focus-visible) { transform: scale(1.06); }
button.summa-badge.is-link:is(:hover, :focus-visible)::before { animation: summa-badge-puls 1.6s cubic-bezier(.2, .7, .2, 1) infinite; }
button.summa-badge.is-link:is(:hover, :focus-visible) .summa-icon { transform: translateX(2px); }
button.summa-badge.is-link:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) {
  button.summa-badge.is-link, button.summa-badge.is-link .summa-icon { transition: none; }
  button.summa-badge.is-link:is(:hover, :focus-visible), button.summa-badge.is-link:is(:hover, :focus-visible) .summa-icon { transform: none; }
  button.summa-badge.is-link:is(:hover, :focus-visible)::before { animation: none; }
}
button.summa-badge.is-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.summa-progress { display: block; margin-top: 4px; }
.summa-progress-label { display: block; margin-bottom: 7px; text-align: right; font: 400 14px/1.4 Figtree, sans-serif; color: var(--ink); }
.summa-progress-track { display: block; height: 10px; overflow: hidden; border-radius: 999px; background: var(--surface-soft); }
.summa-progress-track > i { display: block; width: 0; height: 100%; border-radius: inherit; background: color-mix(in srgb, var(--green) 70%, var(--paper)); }
.summa-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 2px 0 0; }
.summa-pair > div { min-width: 0; }
.summa-pair > div:last-child { text-align: right; }
.summa-pair dt { color: var(--muted); font: 400 10px/1.5 Figtree, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.summa-pair dd { margin: 4px 0 0; color: var(--ink); font: 400 clamp(21px, 2.4vw, 28px)/1.2 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* Tegels = Openstaand / Te laat op Vandaag */
.summa-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.summa-tile {
  display: grid; align-content: start; gap: 5px; min-width: 0; min-height: 104px; padding: 14px;
  border: 1px solid var(--line); border-radius: 18px; background: var(--paper); color: var(--ink);
}
.summa-tile > span { color: var(--muted); font: 600 13px/1.5 Figtree, sans-serif; }
.summa-tile > strong {
  max-width: 100%; font: 400 clamp(22px, 6.2vw, 30px)/1.15 var(--font-display); letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.summa-tile > small { color: var(--muted); font: 600 12px/1.5 Figtree, sans-serif; overflow-wrap: anywhere; }

/* Sectiekaart = de kaarten onder de KPI's op Vandaag */
.summa-card {
  display: block; min-width: 0; margin: 0; padding: 18px;
  border: 1px solid var(--line); border-radius: 18px; background: var(--paper); color: var(--ink);
}
.summa-card[hidden] { display: none; }
.summa-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
.main .summa-card-title, .summa-card-title { margin: 0; font-weight: 400; min-width: 0; color: var(--ink); font: 400 22px/1.15 var(--font-display); letter-spacing: -.035em; overflow-wrap: anywhere; }
.summa-card-sum { flex: none; max-width: 55%; color: var(--ink); font: 400 20px/1.2 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.summa-card-sub { margin: 4px 0 0; color: var(--muted); font: 400 13px/1.45 Figtree, sans-serif; overflow-wrap: anywhere; }
.summa-card-head + .summa-row, .summa-card-sub + .summa-row,
.summa-card-head + .summa-disclosure, .summa-card-sub + .summa-disclosure { margin-top: 6px; }

/* Grafiek = "Omzet per maand" op Vandaag */
.summa-card .summa-chart { display: flex; align-items: flex-end; gap: 9px; height: 104px; margin: 10px 0 0; }
.summa-card .summa-chart .studio-chart-column { min-width: 0; }
.summa-card .summa-chart .studio-chart-value { font: 400 12px/1.55 Figtree, sans-serif; color: var(--muted); }
.summa-card .summa-chart .studio-chart-track i { background: var(--chart-bar); border-radius: 4px 4px 0 0; }
.summa-card .summa-chart .studio-chart-column.is-current i { background: var(--accent); }
.summa-card .summa-chart small { font: 400 12px/1.55 Figtree, sans-serif; color: var(--muted); }
.summa-card .summa-chart .is-current small { color: var(--ink); font-weight: 650; }
.summa-chart-note { display: block; margin-top: 12px; color: var(--muted); font: 400 12px/1.5 Figtree, sans-serif; }
.summa-chart-note:empty { display: none; }

/* Gegroepeerde lijst: kaarten met regels, dunne lijnen tussen de regels */
.summa-groups { display: grid; gap: 12px; min-width: 0; }
.summa-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.summa-row + .summa-row, .summa-disclosure + .summa-disclosure, .summa-disclosure-body > .summa-row { border-top: 1px solid var(--line); }
.summa-row-main {
  display: flex; flex: 1 1 auto; align-items: center; gap: 12px; min-width: 0; width: 100%; min-height: 62px;
  margin: 0; padding: 10px 0; border: 0; border-radius: 0; background: transparent; color: var(--ink);
  box-shadow: none; font: inherit; text-align: left; cursor: default; list-style: none;
}
button.summa-row-main, summary.summa-row-main { cursor: pointer; }
button.summa-row-main:hover, summary.summa-row-main:hover { background: transparent; }
button.summa-row-main:hover .summa-row-text strong, summary.summa-row-main:hover .summa-row-text strong { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.summa-row-main:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
summary.summa-row-main::-webkit-details-marker { display: none; }
.summa-row-text { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.summa-row-text strong { color: var(--ink); font: 600 15px/1.35 Figtree, sans-serif; overflow-wrap: anywhere; }
.summa-row-text small { color: var(--muted); font: 400 13px/1.4 Figtree, sans-serif; overflow-wrap: anywhere; }
.summa-row-end { display: grid; justify-items: end; gap: 2px; flex: 0 0 auto; max-width: 62%; min-width: 0; text-align: right; }
.summa-row-value { color: var(--ink); font: 400 20px/1.2 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.summa-row-state { color: var(--muted); font: 400 12px/1.35 Figtree, sans-serif; overflow-wrap: anywhere; }
.summa-row-state.is-late { color: var(--danger); font-weight: 600; }
.summa-row-state.is-attention { color: var(--amber); font-weight: 600; }
.summa-row-chevron { flex: 0 0 16px; width: 16px; height: 16px; color: var(--ink); transition: transform .15s ease; }
.summa-disclosure[open] > summary .summa-row-chevron { transform: rotate(90deg); }
.summa-disclosure-body { padding: 0 0 4px 12px; border-left: 2px solid var(--line); margin: 0 0 10px 2px; }
.summa-row .invoice-actions-menu { flex: none; }
.summa-more {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px;
  margin: 0; padding: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent;
  color: var(--ink); font: 600 14px/1.3 Figtree, sans-serif; text-align: left; box-shadow: none; cursor: pointer;
}
.summa-more:hover { text-decoration: underline; text-underline-offset: 3px; background: transparent; }
.summa-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .summa-row-chevron { transition: none; } }

/* Desktop: overzicht links, lijst rechts */
@media (min-width: 721px) {
  .summa-hero { padding: 24px; }
  .summa-tile { padding: 18px 20px; min-height: 112px; }
  .summa-card { padding: 22px 24px 18px; }
  .main .summa-card-title, .summa-card-title { font-size: 24px; }
  .summa-card .summa-chart { gap: 12px; height: 116px; margin-top: 16px; }
  .summa-card .summa-chart :is(.studio-chart-value, small) { font-size: 13px; }
}
@media (min-width: 1200px) {
  /* 26 sep 2026: 440px, zodat de vier keuzechips op elke pagina naast elkaar passen. */
  .summa-layout { grid-template-columns: minmax(360px, 440px) minmax(0, 1fr); gap: 28px; align-items: start; }
  .summa-hero-value { font-size: 50px; }
  .summa-row-value { font-size: 22px; }
}

/* Uren: oudere regels op #workInvoiceNotes (lijstopmaak) gelden niet voor de kaart. */
#workView #workInvoiceNotes.summa-card { display: block; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); overflow: visible; }
#workView #workInvoiceNotes.summa-card[hidden] { display: none; }
@media (min-width: 721px) { #workView #workInvoiceNotes.summa-card { padding: 22px 24px 18px; } }
.summa-card .summa-chart .studio-chart-value { overflow: hidden; white-space: nowrap; text-align: center; }
.summa-card .summa-chart .studio-chart-value[hidden] { display: block; visibility: hidden; }
@media (max-width: 359px) {
  .summa-card .summa-chart { gap: 5px; }
  .summa-card .summa-chart :is(.studio-chart-value, small) { font-size: 11px; }
}

/* Uitgaven (stap 2): gewone rij (label + bedrag), acties onder een regel, verborgen regels. */
.summa-row[hidden] { display: none; }
.summa-row.is-plain .summa-row-main { min-height: 52px; padding: 8px 0; }
.summa-row-label { color: var(--ink); font: 400 15px/1.4 Figtree, sans-serif; overflow-wrap: anywhere; }
.summa-row:has(> .summa-row-actions) { flex-wrap: wrap; }
.summa-row-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; margin: -2px 0 0; padding: 0 0 14px; }
.summa-action {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 40px; margin: 0; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink);
  font: 600 13px/1.2 Figtree, sans-serif; box-shadow: none; cursor: pointer; white-space: normal; text-align: center;
}
.summa-action:hover { background: var(--hover); }
.summa-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.summa-action.is-primary { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.summa-action.is-primary:hover { opacity: .9; background: var(--ink); }
.summa-action .summa-icon { flex: 0 0 16px; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.summa-action:disabled { opacity: .55; cursor: default; }
.summa-action.is-completing { opacity: .55; }
@media (max-width: 720px) { .summa-action { min-height: 44px; } }
.summa-card-sub-attention { color: var(--amber); }
.summa-row-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; overflow-wrap: anywhere; }

/* Facturen (stap 3): tabs als segmentbediening in de hoofdkaart, zoals bij Inzichten. */
.summa-segment {
  display: grid; grid-template-columns: repeat(4, minmax(0, auto)); gap: 2px; min-width: 0; margin: 0 0 6px; padding: 4px;
  border-radius: 999px; background: var(--surface-soft);
}
.summa-tab {
  display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 40px; margin: 0; padding: 0 8px;
  border: 0; border-radius: 999px; background: transparent; color: var(--muted); box-shadow: none;
  font: 500 13px/1.2 Figtree, sans-serif; white-space: nowrap; cursor: pointer; transform: none;
}
.summa-tab:hover { background: color-mix(in srgb, var(--paper) 55%, transparent); color: var(--ink); }
.summa-tab.is-active, .summa-tab.is-active:hover { background: var(--paper); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 12%, transparent); }
.summa-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.summa-tab-label b { color: var(--muted); font-weight: 500; }
.summa-tab-data[hidden] { display: none; }
#invoicesView [data-invoice-filter="overdue"]:has(#invoiceKpiOverdue:not(.is-zero)) .summa-tab-label > span { color: var(--danger); }
.invoice-hero .invoice-kpi-focus { display: grid; gap: 12px; min-width: 0; }
.invoice-hero #invoiceKpiFocusAmount.is-late { color: var(--danger); }
.summa-group.is-late .summa-card-sum { color: var(--danger); }
@media (max-width: 720px) { .summa-tab { min-height: 44px; } }
@media (max-width: 359px) { .summa-segment { gap: 0; } .summa-tab { padding: 0 4px; font-size: 12px; } }

/* Uit je bank (25 september): terugkerende transacties als groep, groepsactie na een overzicht. */
.bank-group[hidden] { display: none; }
.bank-group + .bank-group, .bank-group + .summa-row, .summa-row + .bank-group { border-top: 1px solid var(--line); }
.bank-group-members { margin-top: 0; }
.bank-recent-title { margin: 6px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.bank-batch-row .summa-action { flex: none; }
.bank-group-choice { display: grid; gap: 10px; min-width: 0; margin: 18px 0 0; padding: 0; border: 0; }
.bank-group-choice legend { margin: 0 0 8px; padding: 0; color: var(--ink); font: 600 14px/1.4 Figtree, sans-serif; }
.bank-group-option { padding: 12px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; }
.bank-group-option:has(input:checked) { border-color: var(--ink); }
.bank-group-option[hidden], .bank-group-category[hidden] { display: none; }
.bank-group-option span, .bank-group-item span { display: grid; gap: 2px; min-width: 0; }
.bank-group-option strong, .bank-group-item strong { font: 600 14px/1.35 Figtree, sans-serif; }
.bank-group-option small, .bank-group-item small { color: var(--muted); font: 400 12px/1.4 Figtree, sans-serif; }
.bank-group-category { display: grid; gap: 6px; margin: -2px 0 2px 12px; transition: opacity .15s ease; }
.bank-group-category.is-muted { opacity: .5; }
.bank-group-list { max-height: min(36vh, 320px); margin-top: 14px; padding: 0 12px; overflow: auto; border: 1px solid var(--line); border-radius: 14px; }
.bank-group-item { margin: 0; padding: 10px 0; cursor: pointer; }
.bank-group-option { margin: 0; align-items: flex-start; }
.bank-group-option > span, .bank-group-item > span, .bank-group-category > span { margin: 0; }
.bank-group-option > input, .bank-group-item > input { flex: none; margin: 2px 0 0; }
.bank-group-item + .bank-group-item { border-top: 1px solid var(--line); }
.bank-group-item .bank-group-item-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; overflow-wrap: anywhere; }
.bank-group-dialog .bank-group-hint { margin-top: 14px; }
.bank-group-dialog .bank-group-list { margin-top: 8px; }
.bank-group-dialog .reset-dialog-actions { flex-wrap: wrap; align-items: center; }
.bank-group-dialog .bank-group-total { flex: 1 0 100%; margin: 0; color: var(--ink); font: 600 13px/1.4 Figtree, sans-serif; }
@media (prefers-reduced-motion: reduce) { .bank-group-category { transition: none; } }

/* Inzichten (stap 4, 25 september 2026): hoofdkaart met de tabs als segmentbediening, per tab
   label + groot bedrag + twee waarden, tegels, maandkaart, grafiek zoals "Omzet per maand". */
#moneyView .money-layout { margin-top: 4px; }
#moneyView .money-hero-body { display: grid; gap: 12px; min-width: 0; }
#moneyView .money-hero-body[hidden], #moneyView .money-panel[hidden] { display: none; }
#moneyView .money-hero .summa-segment { margin: 0; }
#moneyView .money-hero-warning { justify-self: start; max-width: 100%; margin: 0; white-space: normal; background: var(--amber-soft); color: var(--amber); }
#moneyView .money-hero-warning.is-overdue { background: var(--danger-soft); color: var(--danger); }
#moneyView .money-hero-warning[hidden] { display: none; }
#moneyView .money-panel { display: grid; gap: 12px; min-width: 0; }

/* Tegels: Belasting en Doelen openen hun inhoud over de volle breedte. */
#moneyView .money-tile { display: block; padding: 0; min-height: 0; }
#moneyView .money-tile > summary {
  position: relative; display: grid; align-content: start; gap: 5px; min-height: 104px; padding: 14px 34px 14px 14px;
  list-style: none; cursor: pointer; border-radius: inherit;
}
#moneyView .money-tile > summary::-webkit-details-marker { display: none; }
#moneyView .money-tile > summary > span { color: var(--muted); font: 600 13px/1.5 Figtree, sans-serif; }
#moneyView .money-tile > summary > strong { color: var(--ink); font: 400 clamp(20px, 5.4vw, 26px)/1.15 var(--font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#moneyView .money-tile > summary > small { color: var(--muted); font: 600 12px/1.5 Figtree, sans-serif; overflow-wrap: anywhere; }
#moneyView .money-tile > summary > .summa-row-chevron { position: absolute; top: 16px; right: 14px; }
#moneyView .money-tile > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#moneyView .money-tile[open] { grid-column: 1 / -1; }
#moneyView .money-tile[open] > summary > .summa-row-chevron { transform: rotate(90deg); }
#moneyView .money-tile > section { margin: 0 14px 14px; padding: 14px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }

/* Maandkaart: titel = de maand, keuze als één pil rechts. */
#moneyView .money-month-card .summa-card-head { align-items: center; flex-wrap: wrap; }
#moneyView .money-month-picker {
  display: inline-flex; align-items: center; gap: 0; flex: none; height: 40px; margin: 0; padding: 0 4px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
}
#moneyView .money-month-picker button {
  display: grid; place-items: center; width: 32px; height: 32px; min-height: 0; margin: 0; padding: 0;
  border: 0; border-radius: 999px; background: transparent; color: var(--ink); box-shadow: none;
}
#moneyView .money-month-picker button:disabled { opacity: .35; }
#moneyView .money-month-picker button .summa-icon { width: 16px; height: 16px; }
#moneyView .money-month-picker select {
  width: auto; min-width: 0; height: 32px; min-height: 0; margin: 0; padding: 0 4px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink); font: 600 13px/1.2 Figtree, sans-serif; box-shadow: none; appearance: none; text-align: center;
}
#moneyView .money-month-picker :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#moneyView .money-month-rows { display: block; margin: 8px 0 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
#moneyView .money-month-rows > .summa-row { justify-content: space-between; gap: 12px; min-height: 52px; margin: 0; padding: 8px 0; border-radius: 0; background: transparent; }
#moneyView .money-month-rows > .summa-row::before, #moneyView .money-month-rows > .summa-row::after { content: none; }
#moneyView .money-month-rows .is-profit .summa-row-label { font-weight: 600; }
#moneyView .money-month-rows .is-negative .summa-row-value { color: var(--muted); }
#moneyView .money-margin { flex: none; color: var(--muted); font: 400 12px/1.4 Figtree, sans-serif; text-align: right; }
#moneyView .money-margin strong { color: var(--ink); font: 600 14px/1.4 Figtree, sans-serif; }
#moneyView .money-margin[hidden] { display: none; }

/* Grafieken: exact de Vandaag-grafiek; in de winstgrafiek is een maand een knop. */
#moneyView .money-chart { width: auto; padding: 0; border: 0; background: transparent; }
#moneyView .money-chart button.studio-chart-column {
  margin: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; color: inherit; box-shadow: none;
  font: inherit; min-height: 0; cursor: pointer; appearance: none;
}
#moneyView .money-chart button.studio-chart-column:hover i { opacity: .85; }
#moneyView .money-chart button.studio-chart-column:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#moneyView .money-chart .studio-chart-track i.is-loss { background: transparent; border: 1px dashed var(--muted); border-bottom: 0; }
#moneyView .money-chart.is-empty { display: block; height: auto; }
#moneyView .money-chart .empty { margin: 8px 0 0; color: var(--muted); font: 400 13px/1.45 Figtree, sans-serif; }
#moneyView .legend { display: none !important; }

/* Belasting: urencriterium en registraties als gewone regels. */
#moneyView .money-hours-row {
  display: flex; width: 100%; min-height: 0; margin: 0; padding: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0;
  background: transparent; color: var(--ink); box-shadow: none; text-align: left; font: inherit; cursor: pointer;
}
#moneyView .money-hours-row:hover { background: transparent; }
#moneyView .money-hours-row:hover .summa-row-text strong { text-decoration: underline; text-underline-offset: 3px; }
#moneyView .money-hours-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#moneyView .money-hours-row.is-complete .money-hours-state { color: var(--green); font-weight: 600; }
#moneyView .money-hours-row.is-attention .money-hours-state { color: var(--amber); font-weight: 600; }
#moneyView .money-hours-row.is-on-track .money-hours-state { color: var(--ink); font-weight: 600; }
#moneyView .money-register > summary { padding: 0; min-height: 44px; }
#moneyView .money-register[open] > summary .summa-row-chevron { transform: rotate(90deg); }
#moneyView .money-register .money-tax-contributions { margin-top: 8px; }
#moneyView .money-register-note { display: block; margin-top: 10px; color: var(--muted); font: 400 12px/1.5 Figtree, sans-serif; }

/* Btw: kwartalen als regels; rood alleen bij een verlopen aangifte. */
#moneyView .money-quarter-list { margin-top: 6px; }
#moneyView .money-quarter { display: flex; flex-wrap: wrap; margin: 0; padding: 0; border-radius: 0; background: transparent; box-shadow: none; border-left: 0; border-right: 0; border-bottom: 0; }
#moneyView .money-quarter:first-child { border-top: 0; }
#moneyView .money-quarter .summa-row-text small.is-overdue { color: var(--danger); font-weight: 600; }
#moneyView .money-quarter-state.is-overdue { color: var(--danger); font-weight: 600; }
#moneyView .money-quarter-state.is-attention { color: var(--amber); font-weight: 600; }
#moneyView .money-quarter-state.is-settled { color: var(--green); }
#moneyView .money-quarter-actions { margin: -2px 0 0; padding: 0 0 14px; border: 0; }

/* Jaarkeuze in de paginakop: dezelfde witte pil als Filters/Sorteren. */
#moneyView .insights-page-head .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#moneyView #moneyYear {
  flex: none; width: auto; height: 40px; min-height: 0; margin: 0; padding: 0 30px 0 14px; border: 1px solid var(--line); border-radius: 999px;
  background-color: var(--paper); color: var(--ink); font: 600 13px/1.2 Figtree, sans-serif; box-shadow: none;
}
@media (min-width: 721px) {
  #moneyView .money-tile > summary { min-height: 112px; padding: 18px 40px 18px 20px; }
  #moneyView .money-tile > summary > .summa-row-chevron { top: 20px; right: 18px; }
  #moneyView .money-tile > section { margin: 0 20px 18px; }
}

/* Oudere Inzichten-regels hangen aan #moneyPanelProfit; de nieuwe kaarten zetten ze terug. */
#moneyView #moneyPanelProfit.money-panel { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
#moneyView #moneyPanelProfit #moneyMonth.money-month-select {
  position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0;
}
#moneyView .money-month-picker { position: relative; }
#moneyView .summa-card > .summa-row:not(.money-hours-row) { justify-content: space-between; gap: 12px; min-height: 52px; }
#moneyView .summa-card-title + .summa-row, #moneyView .summa-card-sub + .money-quarter-list { margin-top: 6px; }

/* Inhoud van de tegels Belasting en Doelen, in dezelfde vormtaal (geen icoontjes op regels). */
#moneyView .money-tile .money-pot-card, #moneyView .money-tile .money-buddy-goals { display: block; color: var(--ink); }
#moneyView .money-tile .money-pot-copy { display: grid; gap: 10px; padding: 0; background: transparent; }
#moneyView .money-tile .money-pot-label { color: var(--muted); font: 400 10px/1.5 Figtree, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
#moneyView .money-tile #moneyPotTitle, #moneyView .money-tile .money-buddy-goals-head h3 { margin: 0; color: var(--ink); font: 400 22px/1.2 var(--font-display); letter-spacing: -.035em; }
#moneyView .money-tile #moneyPotRemaining { display: none; }
#moneyView .money-tile #moneyPotMessage { margin: 0; color: var(--muted); font: 400 13px/1.5 Figtree, sans-serif; }
#moneyView .money-tile #moneyPotGauge {
  display: block; width: auto; height: auto; margin: 2px 0 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; aspect-ratio: auto;
}
#moneyView .money-tile #moneyPotGauge::before { content: none; }
#moneyView .money-tile #moneyPotGauge > div { display: flex; justify-content: flex-end; gap: 4px; position: static; inset: auto; background: none; color: var(--ink); font: 400 14px/1.4 Figtree, sans-serif; }
#moneyView .money-tile #moneyPotGauge > div strong { font: 600 14px/1.4 Figtree, sans-serif; color: var(--ink); }
#moneyView .money-tile #moneyPotGauge > div span { color: var(--muted); font-size: 13px; }
#moneyView .money-tile #moneyPotGauge::after {
  content: ""; display: block; height: 10px; margin-top: 7px; border-radius: 999px;
  background: linear-gradient(to right, color-mix(in srgb, var(--green) 70%, var(--paper)) var(--pot-fill, 0%), var(--surface-soft) var(--pot-fill, 0%));
}
#moneyView .money-tile .money-pot-values { display: grid; gap: 0; margin: 0; }
#moneyView .money-tile .money-pot-values > * {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; margin: 0; padding: 8px 0;
  border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; color: var(--ink); text-align: left; font: inherit;
}
#moneyView .money-tile .money-pot-values span { color: var(--ink); font: 400 14px/1.4 Figtree, sans-serif; }
#moneyView .money-tile .money-pot-values strong { color: var(--ink); font: 400 18px/1.2 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
#moneyView .money-tile .money-pot-value-button { cursor: pointer; }
#moneyView .money-tile .money-pot-value-button:hover span { text-decoration: underline; text-underline-offset: 3px; }
#moneyView .money-tile .money-pot-actions { margin: 0; }
#moneyView .money-tile :is(#moneyPotConfirmButton, #moneyPotSaveButton, #moneyBuddyAddButton, #moneyPotEditCancel) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; min-height: 40px; margin: 0; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); box-shadow: none; font: 600 13px/1.2 Figtree, sans-serif;
}
#moneyView .money-tile :is(#moneyPotConfirmButton, #moneyPotSaveButton) { border-color: var(--ink); background: var(--ink); color: var(--paper); }
#moneyView .money-tile #moneyPotConfirmButton[hidden] { display: none; }
#moneyView .money-tile .money-pot-editor { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 0; padding: 0; background: none; border: 0; }
#moneyView .money-tile .money-pot-editor[hidden] { display: none; }
#moneyView .money-tile .money-pot-editor label { flex: 1 1 160px; margin: 0; }
#moneyView .money-tile :is(.money-pot-note, .money-buddy-disclaimer) { display: block; margin: 0; color: var(--muted); font: 400 12px/1.5 Figtree, sans-serif; }
#moneyView .money-tile .money-buddy-goals { display: grid; gap: 12px; padding: 0; border: 0; background: none; }
#moneyView .money-tile .money-buddy-goals-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0; padding: 0; border: 0; }
#moneyView .money-tile .money-buddy-goals-head small { display: block; margin-top: 4px; color: var(--muted); font: 400 13px/1.45 Figtree, sans-serif; }
#moneyView .money-tile .money-buddy-goals-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; border: 0; background: none; }
#moneyView .money-tile .money-buddy-goals-summary[hidden] { display: none; }
#moneyView .money-tile .money-buddy-goals-summary > div { display: grid; gap: 4px; padding: 0; border: 0; background: none; }
#moneyView .money-tile .money-buddy-goals-summary span { color: var(--muted); font: 400 10px/1.5 Figtree, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
#moneyView .money-tile .money-buddy-goals-summary strong { color: var(--ink); font: 400 18px/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
#moneyView .money-tile .money-buddy-goals-summary .is-negative strong { color: var(--muted); }
#moneyView .money-tile .money-buddy-goals-list { display: block; margin: 0; padding: 0; border: 0; }
#moneyView .money-tile .money-buddy-empty { display: block; margin: 0; padding: 0; color: var(--muted); font: 400 13px/1.45 Figtree, sans-serif; text-align: left; }
#moneyView .money-tile .money-buddy-goal-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; gap: 4px 12px; width: 100%; min-height: 62px; margin: 0; padding: 10px 0;
  border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); box-shadow: none; text-align: left; font: inherit; cursor: pointer;
}
#moneyView .money-tile .money-buddy-goal-icon { display: none; }
#moneyView .money-tile .money-buddy-goal-copy { display: grid; gap: 2px; min-width: 0; }
#moneyView .money-tile .money-buddy-goal-copy strong { font: 600 15px/1.35 Figtree, sans-serif; overflow-wrap: anywhere; }
#moneyView .money-tile .money-buddy-goal-copy small { color: var(--muted); font: 400 13px/1.4 Figtree, sans-serif; }
#moneyView .money-tile .money-buddy-goal-status { color: var(--muted); font: 400 12px/1.35 Figtree, sans-serif; background: none; padding: 0; }
#moneyView .money-tile .money-buddy-goal-status.is-complete { color: var(--green); font-weight: 600; }
#moneyView .money-tile .money-buddy-goal-progress { grid-column: 1 / -1; display: block; height: 6px; overflow: hidden; border-radius: 999px; background: var(--surface-soft); }
#moneyView .money-tile .money-buddy-goal-progress > i { display: block; height: 100%; border-radius: inherit; background: color-mix(in srgb, var(--green) 70%, var(--paper)); }
#moneyView .money-tile .money-buddy-goal-chevron { grid-column: 3; grid-row: 1; width: 16px; height: 16px; }
/* Registraties belastingpot: gewone regels met acties eronder. */
#moneyView .money-register .money-tax-contribution-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 10px 0; border: 0; border-top: 1px solid var(--line); background: none; }
#moneyView .money-register .money-pot-history-copy strong { display: block; font: 600 15px/1.35 Figtree, sans-serif; }
#moneyView .money-register .money-pot-history-copy small { display: block; color: var(--muted); font: 400 13px/1.4 Figtree, sans-serif; }
#moneyView .money-register .money-pot-history-amount { font: 400 20px/1.2 var(--font-display); letter-spacing: -.03em; }
#moneyView .money-register .money-pot-history-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
#moneyView .money-register :is(.money-pot-history-actions, .money-pot-history-editor) button {
  min-height: 40px; margin: 0; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); box-shadow: none; font: 600 13px/1.2 Figtree, sans-serif;
}
#moneyView .money-register .money-pot-history-editor { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
#moneyView .money-register .money-pot-history-editor[hidden] { display: none; }
#moneyView .money-register .empty { margin: 8px 0 0; color: var(--muted); font: 400 13px/1.45 Figtree, sans-serif; }
@media (max-width: 720px) { #moneyView .money-tile :is(#moneyPotConfirmButton, #moneyPotSaveButton, #moneyBuddyAddButton, #moneyPotEditCancel), #moneyView .money-register button { min-height: 44px; } }
#moneyView .money-tile #moneyPotGauge > div { width: auto; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
#moneyView .money-tile #moneyPotGauge > div :is(strong, span) { display: inline; margin: 0; }
#moneyView .money-tile .money-pot-values { grid-template-columns: minmax(0, 1fr); }
#moneyView .money-tile .money-pot-values > * { border-right: 0; }
#moneyView .money-tile .money-pot-values :is(span, strong) { display: inline; margin: 0; }
#moneyView .money-tile .money-buddy-disclaimer { padding: 0; border: 0; }
#moneyView .money-tile #moneyPotGauge > div { width: 100%; max-width: none; }
#moneyView .money-tile .money-pot-values { border: 0; border-radius: 0; background: transparent; overflow: visible; }
/* De maandkeuze blijft voor schermlezers en toetsenbord; oudere breedteregels mogen hem niet zichtbaar maken. */
#moneyView #moneyMonth.money-month-select { width: 1px !important; height: 1px !important; min-width: 0 !important; max-width: 1px !important; }
#moneyView .money-tile .money-pot-values > * { flex-wrap: wrap; white-space: normal; min-width: 0; }
#moneyView .money-tile .money-pot-values span { min-width: 0; overflow-wrap: anywhere; }
#moneyView .money-client-list { margin-top: 6px; }

/* ======================================================================
   Overzicht in één oogopslag (26 september 2026, op gebruikersverzoek)
   ====================================================================== */

/* Lijsten: één kaart met kleine tussenkopjes (groep + totaal), op elke breedte. Zelfde
   groepen, regels, volgorde en "Nog …"-knoppen; alleen de kaartranden per groep vervallen. */
.summa-groups:has(> .summa-group) {
  gap: 0; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper);
}
.summa-groups > .summa-group { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.summa-groups > .summa-group:not([hidden]) ~ .summa-group { margin-top: 18px; }
.summa-groups > .summa-group > .summa-card-head { align-items: baseline; }
.main .summa-groups > .summa-group .summa-card-title, .summa-groups > .summa-group .summa-card-title, .summa-subhead {
  color: var(--muted); font: 600 11px/1.4 Figtree, sans-serif; letter-spacing: .08em; text-transform: uppercase;
}
.summa-groups > .summa-group .summa-card-sum { max-width: 60%; color: var(--ink); font: 600 13px/1.4 Figtree, sans-serif; letter-spacing: 0; }
.summa-groups > .summa-group.is-late :is(.summa-card-title, .summa-card-sum) { color: var(--danger); }
.summa-card-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.summa-groups > .summa-group .summa-card-heading > .summa-card-sub { margin: 0; font: 400 12px/1.4 Figtree, sans-serif; letter-spacing: 0; text-transform: none; }
.summa-groups > .summa-group > :is(.summa-card-head, .summa-card-sub) + :is(.summa-row, .summa-disclosure) { margin-top: 6px; border-top: 1px solid var(--line); }
.summa-subhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 18px 0 0; padding: 0 0 6px; border-bottom: 1px solid var(--line); }
.summa-subhead strong { color: var(--ink); font: 600 13px/1.4 Figtree, sans-serif; letter-spacing: 0; text-transform: none; }
@media (min-width: 721px) { .summa-groups:has(> .summa-group) { padding: 22px 24px 18px; } }

/* Ingeklapte overzichtsregel (mobiel): "Per opdrachtgever · GGNet +1 · € 10.018,82 ›". Tik = volledige kaart. */
.summa-fold { display: none; }
@media (max-width: 720px) {
  .summa-card.summa-foldable { padding: 12px 16px; }
  .summa-foldable:not(.is-open) > :not(.summa-fold) { display: none; }
  .summa-foldable.is-open > .summa-card-head { display: none; }
  .summa-foldable.is-open > .summa-fold { margin-bottom: 4px; }
  .summa-fold {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; margin: 0; padding: 0;
    border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  }
  .summa-fold:hover { background: transparent; }
  .summa-fold:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
  .summa-fold-text { display: grid; gap: 1px; flex: 1 1 auto; min-width: 0; }
  .summa-fold-label { color: var(--muted); font: 600 12px/1.4 Figtree, sans-serif; }
  .summa-fold-text strong { overflow: hidden; color: var(--ink); font: 600 15px/1.35 Figtree, sans-serif; white-space: nowrap; text-overflow: ellipsis; }
  .summa-fold-text strong i { color: var(--muted); font-style: normal; font-weight: 400; }
  .summa-fold-text small { overflow: hidden; color: var(--muted); font: 400 13px/1.4 Figtree, sans-serif; white-space: nowrap; text-overflow: ellipsis; }
  .summa-fold .summa-row-value { flex: none; }
  .summa-fold .summa-row-chevron { transition: transform .15s ease; }
  .summa-foldable.is-open > .summa-fold .summa-row-chevron { transform: rotate(90deg); }
}

/* Samenvattingsbalk (mobiel): bij het scrollen blijven het hoofdbedrag en de groep in beeld. */
.summa-sticky { display: none; }
@media (max-width: 720px) {
  .summa-sticky {
    position: fixed; z-index: 45; top: 0; left: 0; right: 0; display: grid; padding: calc(8px + env(safe-area-inset-top)) 16px 0;
    border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--canvas) 90%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--muted);
    transform: translateY(-100%); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .18s ease, opacity .18s ease, visibility .18s;
    cursor: pointer;
  }
  .summa-sticky.is-visible { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
  .summa-sticky-main { display: flex; align-items: baseline; gap: 10px; min-width: 0; min-height: 34px; padding-bottom: 8px; }
  .summa-sticky-label { flex: none; font: 600 13px/1.3 Figtree, sans-serif; }
  .summa-sticky-value { min-width: 0; overflow: hidden; color: var(--ink); font: 400 20px/1.1 var(--font-display); letter-spacing: -.03em; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
  .summa-sticky .summa-badge { flex: none; margin-left: auto; padding: 3px 8px; font-size: 11px; }
  .summa-sticky-group { padding: 6px 0 7px; border-top: 1px solid var(--line); font: 600 11px/1.4 Figtree, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
  .summa-sticky-group.is-late { color: var(--danger); }
  .summa-sticky-group:empty { display: none; }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) { .summa-sticky { transition: none; } }

/* Compacte mobiele maat, op alle vijf tabbladen gelijk (ook Vandaag). Klikvlakken blijven ≥ 44px;
   gewone tekst houdt zijn grootte. */
@media (max-width: 720px) {
  .summa-hero, .main #todayView #todayRevenuePanel, .main #todayView #todayRevenuePanel:hover, .main #todayView #todayRevenuePanel:active { padding: 16px; }
  .summa-hero { gap: 8px; }
  .summa-hero-value, .main #todayView #todayRevenuePanel #todayMobileRevenue { font-size: clamp(34px, 10vw, 50px); }
  .summa-pair { margin-top: 0; }
  .summa-pair dd { font-size: 19px; }
  .summa-segment { padding: 3px; }
  .summa-card, .summa-groups:has(> .summa-group) { padding: 14px 16px; }
  .main .summa-card-title, .summa-card-title { font-size: 20px; }
  .summa-row-main { min-height: 52px; padding: 8px 0; }
  .summa-row-value { font-size: 18px; }
  .summa-tile, .main #todayView .today-receivable-kpi { min-height: 92px; padding: 12px 14px; }
  /* Ingeklapt heeft het aandachtspuntenblok geen eigen kader: de regel zelf is de kaart (volle breedte). */
  .main #todayView :is(.studio-rhythm, #todayFocusPanel:not(.is-collapsed), #todayModernUpcoming, #todayFinancialSummary) { padding: 14px 16px; }
  /* Komt eraan: de regel heeft zelf al onderruimte; samen gelijk aan de andere kaarten. */
  .main #todayView #todayModernUpcoming { padding-bottom: 6px; }
  /* Lijstregels: de detailregel op één regel; de volledige tekst staat in het detailscherm. */
  .summa-groups .summa-row-text > small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
}

/* Uren (mobiel): diensten, werkdagen en indirecte uren als één regel in de hoofdkaart in plaats van twee tegels. */
.summa-hero-stats { display: none; margin: 0; color: var(--muted); font: 400 13px/1.45 Figtree, sans-serif; }
.summa-hero-stats b { color: var(--ink); font-weight: 600; }
@media (max-width: 720px) {
  #workView .work-tiles { display: none; }
  #workView .summa-hero-stats { display: block; }
}

/* Inzichten (mobiel): Belasting en Doelen als twee korte regels in één kaart; open over de volle breedte. */
@media (max-width: 720px) {
  #moneyView .money-tiles[data-money-content="profit"] {
    grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper);
  }
  #moneyView .money-tiles[data-money-content="profit"] > .money-tile { border: 0; border-radius: 0; background: transparent; }
  #moneyView .money-tiles[data-money-content="profit"] > .money-tile + .money-tile { border-top: 1px solid var(--line); }
  #moneyView .money-tiles[data-money-content="profit"] > .money-tile > summary { min-height: 56px; padding: 10px 28px 10px 0; gap: 1px; }
  #moneyView .money-tiles[data-money-content="profit"] > .money-tile > summary > span { font: 600 12px/1.4 Figtree, sans-serif; }
  #moneyView .money-tiles[data-money-content="profit"] > .money-tile > summary > strong { font: 600 15px/1.35 Figtree, sans-serif; letter-spacing: 0; }
  #moneyView .money-tiles[data-money-content="profit"] > .money-tile > summary > small { font: 400 13px/1.4 Figtree, sans-serif; }
  #moneyView .money-tiles[data-money-content="profit"] > .money-tile > summary > .summa-row-chevron { top: 50%; right: 0; margin-top: -8px; }
  #moneyView .money-tiles[data-money-content="profit"] > .money-tile > section { margin: 0 0 14px; }
}
/* Inzichten: de grafiek staat in de maandkaart, onder een tussenkopje (zelfde stijl als in de lijsten). */
#moneyView .money-month-card .summa-subhead { margin-top: 16px; }
#moneyView .money-month-card .summa-subhead .money-margin { font: 400 12px/1.4 Figtree, sans-serif; letter-spacing: 0; text-transform: none; }
#moneyView .money-month-card #moneyCostsNote[hidden] { display: none; }

/* ======================================================================
   Keuzechips (26 september 2026, gebruikerskeuze uit vier ontwerpen)
   De vier keuzes bovenin de hoofdkaart (Facturen: Open · Te laat · Ontvangen · Alle; Inzichten:
   Winst · Omzet · Belasting · Btw) als losse pillen; de gekozen pil is donker gevuld. Zelfde knoppen,
   rollen en pijltjestoetsen. Past de rij niet (smalle iPhone), dan scrollt hij opzij met een zachte
   vervaging aan de kant waar nog meer staat; de gekozen chip schuift altijd in beeld.
   ====================================================================== */
.summa-hero { --hero-pad-x: 18px; }
@media (min-width: 721px) { .summa-hero { --hero-pad-x: 24px; } }
@media (max-width: 720px) { .summa-hero { --hero-pad-x: 16px; } }
:is(#invoicesView, #moneyView) .summa-hero .summa-segment {
  display: flex; flex-wrap: nowrap; gap: 8px; min-width: 0; margin: -3px calc(-1 * var(--hero-pad-x)) 2px; padding: 3px var(--hero-pad-x);
  border-radius: 0; background: transparent; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scrollbar-width: none; scroll-padding-inline: var(--hero-pad-x);
}
:is(#invoicesView, #moneyView) .summa-hero .summa-segment::-webkit-scrollbar { display: none; }
:is(#invoicesView, #moneyView) .summa-hero .summa-segment.has-more-end { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
:is(#invoicesView, #moneyView) .summa-hero .summa-segment.has-more-start { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px); mask-image: linear-gradient(90deg, transparent, #000 44px); }
:is(#invoicesView, #moneyView) .summa-hero .summa-segment.has-more-start.has-more-end {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent);
}
:is(#invoicesView, #moneyView) .summa-hero .summa-tab {
  position: relative; flex: none; gap: 6px; min-height: 38px; height: 38px; padding: 0 15px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink);
  font: 500 14px/1.2 Figtree, sans-serif; box-shadow: none;
}
/* Klikvlak 44px hoog, ook al is de pil 38px. */
:is(#invoicesView, #moneyView) .summa-hero .summa-tab::after { content: ""; position: absolute; inset: -3px 0; }
:is(#invoicesView, #moneyView) .summa-hero .summa-tab:hover { background: var(--hover); color: var(--ink); }
:is(#invoicesView, #moneyView) .summa-hero .summa-tab:is(.is-active, [aria-selected="true"]), :is(#invoicesView, #moneyView) .summa-hero .summa-tab:is(.is-active, [aria-selected="true"]):hover {
  border-color: var(--ink); background: var(--ink); color: var(--paper); font-weight: 600; box-shadow: none;
}
:is(#invoicesView, #moneyView) .summa-hero .summa-tab .summa-tab-label b { color: inherit; font-weight: 500; opacity: .55; }
:is(#invoicesView, #moneyView) .summa-hero .summa-tab:is(.is-active, [aria-selected="true"]) .summa-tab-label b { opacity: .7; }
:is(#invoicesView, #moneyView) .summa-hero .summa-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Te laat: een rode stip in plaats van rode tekst, alleen als er echt iets te laat is. */
#invoicesView .summa-hero [data-invoice-filter="overdue"]:has(#invoiceKpiOverdue:not(.is-zero)) .summa-tab-label > span { color: inherit; }
#invoicesView .summa-hero [data-invoice-filter="overdue"]:has(#invoiceKpiOverdue:not(.is-zero)) .summa-tab-label::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--danger); vertical-align: 1px;
}
@media (max-width: 720px) { :is(#invoicesView, #moneyView) .summa-hero .summa-tab { min-height: 38px; } }
@media (max-width: 359px) { :is(#invoicesView, #moneyView) .summa-hero .summa-segment { gap: 6px; } :is(#invoicesView, #moneyView) .summa-hero .summa-tab { padding: 0 12px; font-size: 13px; } }
/* Computer: dezelfde ene rij, iets compacter zodat de vier keuzes naast elkaar passen. */
@media (min-width: 721px) {
  :is(#invoicesView, #moneyView) .summa-hero .summa-segment { gap: 6px; }
  :is(#invoicesView, #moneyView) .summa-hero .summa-tab { padding: 0 12px; font-size: 13px; }
}

/* Kilometers op Uren (26 september 2026): kaart met maandgrafiek, ontbrekende afstanden (amber)
   en dezelfde uitleg-disclosure als "Hoe wordt dit geteld?" op Vandaag. */
.work-km-missing { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin-top: 10px; padding: 10px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; color: var(--ink); font: 500 13px/1.35 Figtree, sans-serif; text-align: left; cursor: pointer; }
.work-km-missing[hidden] { display: none; }
.work-km-missing > i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.work-km-missing > span { flex: 1; min-width: 0; }
.work-km-missing b { font-weight: 600; }
.work-km-missing > .summa-icon { flex: none; width: 18px; height: 18px; color: var(--muted); }
.work-km-info { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 8px; }
.work-km-info > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--muted); font-size: 13px; cursor: pointer; list-style: none; }
.work-km-info > summary::-webkit-details-marker { display: none; }
.work-km-info > summary::before { content: 'i'; display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1px solid currentColor; border-radius: 50%; font-size: 10px; font-weight: 600; line-height: 1; }
.work-km-info p { margin: 6px 0 0; font-size: 13px; line-height: 1.45; }
/* Kilometers als kosten (27 sep 2026): wat aftrekbaar is, of amber wat nog nodig is. */
.work-km-cost { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin-top: 10px; padding: 10px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; color: var(--ink); font: 500 14px/1.35 Figtree, sans-serif; text-align: left; cursor: pointer; }
.work-km-cost[hidden] { display: none; }
.work-km-cost-text { display: grid; flex: 1; gap: 2px; min-width: 0; }
.work-km-cost-text strong { font-weight: 600; }
.work-km-cost-text small { color: var(--muted); font-size: 13px; font-weight: 400; }
.work-km-cost.is-attention .work-km-cost-text strong::before { content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 8px 1px 0; border-radius: 50%; background: var(--amber); }
.work-km-cost > b { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.work-km-cost > b[hidden] { display: none; }
.work-km-cost > .summa-icon { flex: none; width: 18px; height: 18px; color: var(--muted); }
.settings-vehicle { min-width: 0; margin: 18px 0 0; padding: 0; border: 0; }
.settings-vehicle legend { padding: 0; }
.settings-vehicle legend strong, .settings-vehicle legend small { display: block; }
.settings-vehicle legend strong { font-size: 14px; }
.settings-vehicle legend small { margin-top: 2px; color: var(--muted); font-size: 13px; }
/* Zelfde vlak als de instellingen erboven: zacht vlak, 12px afronding, gekozen keuze met inktrand. */
.settings-vehicle .review-owner-option { min-height: 44px; margin-top: 8px; padding: 12px 14px; border: 1px solid transparent; border-radius: 12px; background: var(--surface-soft); box-shadow: none; }
.settings-vehicle .review-owner-option:has(input:checked) { border-color: var(--ink); background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--ink); }
.settings-vehicle .review-owner-option input { accent-color: var(--ink); }
/* Tekst zoals .settings-choice-list .setting-label (styles.css); "label > span" maakt anders alles grijs en 650. */
.settings-content-panel .settings-vehicle .review-owner-option > span { margin: 0; color: var(--ink); font-size: 14px; font-weight: 400; }
.settings-vehicle .review-owner-option strong { color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.35; }
.settings-vehicle .review-owner-option small { margin-top: 4px; color: var(--muted); font-size: 13px; font-weight: 400; line-height: 1.45; }
@media (min-width: 721px) {
  .settings-vehicle .review-owner-option small { font-size: 14px; }
}
@media (max-width: 720px) {
  .settings-vehicle .review-owner-option strong { font-size: 13px; }
  .settings-vehicle .review-owner-option small { font-size: 11px; }
}

/* Uitleg-rondje (27 sep 2026, gebruikersverzoek): een kleine schuine i naast een naam; tikken klapt de uitleg
   eronder open en vult het rondje. Zelfde teken als "Hoe wordt dit geteld?" op Uren. Klikvlak 44px. */
.summa-info { position: relative; display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; min-width: 0; min-height: 0; margin: 0 0 0 8px; padding: 0; border: 1.5px solid var(--muted); border-radius: 50%; background: transparent; box-shadow: none; color: var(--muted); font: italic 600 11px/1 var(--font-display); cursor: pointer; }
.summa-info::after { content: ''; position: absolute; inset: -12px; }
.summa-info[aria-expanded="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.summa-info:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.summa-info-text { display: grid; gap: 6px; margin: 0; padding: 0 14px 14px; color: var(--muted); font: 400 13.5px/1.5 Figtree, system-ui, sans-serif; }
.summa-info-text[hidden] { display: none; }
.summa-info-text b, .summa-info-lines b { color: var(--ink); font-weight: 600; }
.summa-info-lines { display: grid; gap: 4px; }
.summa-info-lines > span { display: block; }