/* ==========================================================================
   Bookhouder — the Overzicht screen (Phase 100, B · Vandaag), index.html only:
   Te doen, Vastgemaakt (Resultaat + "Zo is de klantbetaling verdeeld",
   Resultaat per maand, Omzet, Uitgaven, Projecten, Brandstof & belasting,
   Bedrijf 10 %, Geldstroom) and Hoogtepunten — every figure from
   buildOverzichtModel (overzicht.js), every piece a ui.js / charts.js builder.
   Charts: one linear scale each, fills from tokens. Tokens only.
   Its own sheet so the other pages never download it; a component a second
   page starts to use moves to style.css with that use (master plan F-j).
   ========================================================================== */

/* --- The title's focus ring, the section-head link and the Hoogtepunt hues (the shared
   B components — title line, section heads, tappable cards, big numbers, composition bar,
   legend, bars, charts, tones, widget and Hoogtepunt cards — are in style.css since P103) --- */
/* After an in-page screen change the title takes the focus (tabindex="-1"): a ring only for keyboard users. */
.large-title__heading:focus { outline: none; }
.large-title__heading:focus-visible { border-radius: 6px; box-shadow: 0 0 0 3px var(--ring); }
.section-head__link { color: var(--primary-text); font-size: var(--font-subhead); font-weight: 500; text-decoration: none; }
.section-head__link:hover { text-decoration: underline; }
#hi-projecten { --chart-hue: var(--primary); }
#hi-brandstof { --chart-hue: var(--accent-2); }

/* --- The screen's layout: Te doen, the Vastgemaakt grid, the Resultaat card, the Projecten list --- */
.todo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
/* Narrow desktop (iPad portrait included): three columns leave no room for a card's header. */
@media (min-width: 821px) and (max-width: 1099px) {
  .todo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .todo-grid > .todo:last-child { grid-column: span 2; }
}
.todo__big { margin: var(--space-1) 0 0; font-size: 1.875rem; line-height: 1.05; }
.todo__sub { margin: 6px 0 var(--space-3); color: var(--muted); font-size: var(--font-small); line-height: 1.35; }
.todo__cta { display: inline-flex; align-items: center; gap: 4px; align-self: flex-end; height: 30px; margin-top: auto; padding: 0 12px 0 14px; border-radius: 15px; background: var(--primary-weak); color: var(--primary-text); font-size: 0.875rem; font-weight: 600; }
.widget-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.widget--l, .widget--m { grid-column: span 2; }
#w-maanden .widget__viz { margin-top: 10px; }
#w-geldstroom .widget__viz { flex: 1 1 100%; }
/* Polish: 16px between the cards from 821px, as in Te doen (was 12px up to 1099px);
   four columns once each is ≥ 220px wide — 1200px with the 240px sidebar (at 1100
   they were 195px: "Bedrijf 10 %" wrapped, the legend cut "Projectkosten"). */
/* (The Hoogtepunten half of this 821px gap rule moved to style.css with the Hoogtepunt card, P103 C1.) */
@media (min-width: 821px) { .widget-grid { gap: var(--space-4); } }
@media (min-width: 1200px) {
  .widget-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(180px, auto); }
  .widget--l { grid-row: span 2; }
}
.verdeling__head { display: flex; justify-content: space-between; gap: var(--space-2); margin: var(--space-4) 0 7px; color: var(--muted); font-size: var(--font-small); }
.verdeling__head b { color: var(--text); font-weight: 600; }
.verdeling__open { display: flex; align-items: center; gap: 10px; margin: var(--space-3) 0; padding: 10px 12px; border-radius: 12px; background: var(--warning-weak); }
.verdeling__open-text { margin: 0; color: var(--text); font-size: var(--font-small); line-height: 1.3; }
.verdeling__open-pct { display: block; color: var(--muted); }
.verdeling__open .big-num { margin-left: auto; font-size: 1.375rem; }
.resultaat__foot { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin: auto 0 0; padding-top: var(--space-3); border-top: 1px solid var(--border); }
.resultaat__cel { display: flex; flex-direction: column; gap: 1px; }
.resultaat__cel[hidden] { display: none; }
.resultaat__cel dt { color: var(--muted); font-size: var(--font-small); }
.resultaat__cel dd { margin: 0; font-size: 1.125rem; }
.plist { margin-top: var(--space-2); }
.plist__row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto 6rem; align-items: center; gap: 10px; min-height: 31px; border-top: 1px solid var(--border); color: inherit; font-size: 0.875rem; text-decoration: none; }
.plist__row:first-child { border-top: 0; }
.plist__row:hover .plist__title { color: var(--primary-text); }
.plist__row:focus-visible { outline: none; border-radius: 6px; box-shadow: 0 0 0 3px var(--ring); }
/* Polish (m11, B): an orange ring (half filled: deels), a green check-circle once settled. */
.plist__status { position: relative; width: 14px; height: 14px; border: 2px solid var(--accent-2); border-radius: 50%; }
.plist__status--partial { background: linear-gradient(90deg, transparent 50%, var(--accent-2) 50%); }
.plist__status--settled { border-color: var(--positive); }
.plist__status--settled::after { content: ""; position: absolute; top: 1px; left: 3.5px; width: 3px; height: 6px; border: solid var(--positive); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.plist__title { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.plist__date { color: var(--muted); font-size: var(--font-tiny); white-space: nowrap; }
.plist__amount { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.plist__meer { display: block; padding-top: var(--space-2); color: var(--primary-text); font-size: var(--font-small); font-weight: 500; text-decoration: none; }
.plist__leeg { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--font-small); }
#w-omzet { --chart-hue: var(--primary); }
#w-uitgaven { --chart-hue: var(--hue-uitgaven); }
/* Polish (m11, B): the Brandstof & belasting legend stacks. */
#w-brandbel .legend, #uitgaven-brandbel .legend { grid-template-columns: max-content; gap: 6px; margin: 0; }
@media (hover: none), (max-width: 820px) { .plist__row { min-height: 2.75rem; } }
@media (max-width: 820px) {
  .todo-grid { display: flex; gap: var(--space-3); margin: 0 calc(-1 * var(--space-4)); padding: 0 var(--space-4) 2px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--space-4); scrollbar-width: none; }
  .todo-grid::-webkit-scrollbar { display: none; }
  .todo-grid > .todo { flex: 0 0 272px; scroll-snap-align: start; }
}
@media (max-width: 600px) {
  /* Two-up only for Omzet | Uitgaven (as B's phone); the other small cards need the width. */
  #w-bedrijf, #w-geldstroom { grid-column: span 2; }
  .plist__row { grid-template-columns: 18px minmax(0, 1fr) 6rem; }
  .plist__date { display: none; }
}
@media (max-width: 520px) {
  .todo-grid { margin: 0 calc(-1 * var(--space-3)); padding: 0 var(--space-3) 2px; scroll-padding: 0 var(--space-3); }
}

/* --- Phase 102: the Uitgaven screen (index.html#uitgaven, B · Vandaag) ---------
   The Per maand table (current month bold, selected month tinted, zeros muted),
   the selected month's expenses as the ledger's own rows with a soort glyph tile,
   Uitgaven per soort and Brandstof & belasting — every figure from
   buildUitgavenModel (overzicht.js). Index-only like the Overzicht, so in this
   sheet. Soort tones by soortKey (vandaag.js); Brandstof / Belasting are P100's. The soort
   glyphs and tones themselves are in style.css (P103 C1). */
.uitgaven-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.uitgaven-kolom { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); min-width: 0; }
@media (min-width: 1200px) { .uitgaven-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* With amounts from € 100.000,00 (dashboard.js data-grote-bedragen) the Per maand
   columns no longer fit half of 1200–1439px: one column there. */
@media (min-width: 1200px) and (max-width: 1439px) { #uitgaven-scherm[data-grote-bedragen] .uitgaven-grid { grid-template-columns: minmax(0, 1fr); } }
.uitgaven-leeg { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--font-small); }
.maandtabel-wrap { margin-top: var(--space-2); overflow-x: auto; }
.maandtabel { width: 100%; border-collapse: collapse; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.maandtabel th, .maandtabel td { height: 36px; padding: 0 0 0 var(--space-3); text-align: right; white-space: nowrap; }
.maandtabel thead th { height: auto; padding-top: 6px; padding-bottom: 8px; color: var(--muted); font-size: var(--font-tiny); font-weight: 600; }
.maandtabel th:first-child, .maandtabel td:first-child { padding-left: 0; text-align: left; }
.maandtabel tbody > tr > *, .maandtabel tfoot > tr > * { border-top: 1px solid var(--border); }
.maandtabel tbody th { font-weight: 400; }
.maandtabel tbody tr { cursor: pointer; }
.maandtabel tbody tr:hover { background: var(--surface-hover); }
.maandtabel tbody tr.is-sel { background: var(--primary-weak); }
.maandtabel tr.is-cur > * { font-weight: 600; }
.maandtabel .is-zero { color: var(--muted); }
.maandtabel tfoot > tr > * { border-top-color: var(--border-strong); font-weight: 700; }
.maandtabel__maand { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.maandtabel__maand:focus-visible { outline: none; border-radius: 6px; box-shadow: 0 0 0 3px var(--ring); }
.uitgaven-lijst { display: block; width: 100%; margin-top: var(--space-1); }
.uitgaven-lijst > tbody { display: block; }
.uitgaven-lijst .expense-row { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; grid-template-areas: "glyph titel bedrag meer" "glyph datum bedrag meer"; align-items: center; column-gap: 12px; min-height: 62px; padding: var(--space-2) 0; border-radius: 10px; }
.uitgaven-lijst .backlog-row.expense-row { background: transparent; }
.uitgaven-lijst .backlog-row.expense-row:hover { background: var(--surface-hover); }
.uitgaven-lijst .backlog-row.expense-row:hover > td { box-shadow: none; }
.uitgaven-lijst .expense-row + .expense-row::before { content: ""; position: absolute; top: 0; right: 0; left: 52px; height: 1px; background: var(--border); }
.uitgaven-lijst td { padding: 0; border: 0; }
.uitgaven-lijst__glyph { grid-area: glyph; }
.uitgaven-lijst .expense-row__title { grid-area: titel; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; font-size: var(--font-subhead); }
.uitgaven-lijst .expense-row__title-text { order: -1; flex: 1 1 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uitgaven-lijst .row-kind { max-width: 100%; margin-right: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uitgaven-lijst .expense-row__notes { flex: 1 1 100%; min-width: 0; overflow: hidden; color: var(--muted); font-size: var(--font-small); text-overflow: ellipsis; white-space: nowrap; }
.uitgaven-lijst .expense-row__date { grid-area: datum; color: var(--muted); font-size: var(--font-small); }
.uitgaven-lijst .expense-row__amount { grid-area: bedrag; color: var(--text); font-size: var(--font-subhead); white-space: nowrap; }
.uitgaven-lijst .backlog-row__actions { grid-area: meer; width: auto; }
.soort-balk { margin-top: 14px; }
/* One grid for every soort row (subgrid): the share and amount columns grow to the
   longest value (up to € 9.999.999,99) and stay aligned; the name gives way. */
.soortlijst { display: grid; grid-template-columns: 10px minmax(0, 1fr) minmax(3rem, auto) minmax(6rem, auto); column-gap: 10px; margin-top: var(--space-3); }
.soortlijst__rij { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; min-height: 34px; border-top: 1px solid var(--border); font-size: 0.875rem; }
.soortlijst__rij:first-child { border-top: 0; }
.soortlijst__naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soortlijst__pct { color: var(--muted); font-size: var(--font-small); text-align: right; font-variant-numeric: tabular-nums; }
.soortlijst__bedrag { font-weight: 600; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* A long total keeps its unit ("140 uitgaven", "in 2026") on the next line rather than
   leaving the card. */
.uitgaven-kolom .widget__big { white-space: normal; }
.uitgaven-kolom .big-num__unit { display: inline-block; margin-left: 0.35em; white-space: nowrap; }
/* The phone toolbar: Vaste lasten is a round icon like print and ＋ (the name stays in
   its aria-label). Below 375px the large title goes under the bar (style.css). */
@media (max-width: 820px) {
  .topbar #uitgaven-vast { width: 2.75rem; min-width: 2.75rem; height: 2.75rem; padding: calc((2.75rem - 2.125rem) / 2); border: 0; border-radius: 50%; background: var(--primary-weak); background-clip: content-box; color: var(--primary-text); }
  .topbar__vast-label { display: none; }
}
@media (max-width: 374px) {
  /* The Overzicht's Uitgaven card is a link now: its label (+ chevron) no longer fits
     half the width, so Omzet and Uitgaven stack like the other small cards. */
  #w-omzet, #w-uitgaven { grid-column: span 2; }
}
@media (hover: none), (max-width: 820px) { .maandtabel tbody > tr > * { height: 2.75rem; } }
@media (max-width: 600px) {
  .maandtabel { font-size: var(--font-small); }
  .maandtabel th, .maandtabel td { padding-left: var(--space-2); }
  .soortlijst { grid-template-columns: 10px minmax(0, 1fr) minmax(2.5rem, auto) minmax(5.5rem, auto); column-gap: 8px; }
  .uitgaven-lijst .expense-row { column-gap: 10px; }
}
/* ≤440px Aantal goes (the month's count stays in the list card, the year's in the
   title line), so Maand and the three amounts fit a 360px phone without scrolling;
   below 360px the table scrolls inside its card. */
@media (max-width: 440px) {
  .maandtabel tr > :nth-child(2) { display: none; }
  .maandtabel th, .maandtabel td { padding-left: 6px; }
  /* The month list on a phone: the title and its chips get the first line (beside ⋯);
     the date and the amount share the second, the amount reaching under ⋯ — so with
     a 5-digit amount at 320px neither is squeezed into a few letters. */
  .uitgaven-lijst .expense-row { grid-template-columns: 32px minmax(0, 1fr) auto auto; grid-template-areas: "glyph titel titel meer" "glyph datum bedrag bedrag"; column-gap: 8px; }
  .uitgaven-lijst .soort-glyph { width: 32px; height: 32px; border-radius: 9px; }
  .uitgaven-lijst .soort-glyph::after { inset: 7px; }
  .uitgaven-lijst .expense-row + .expense-row::before { left: 40px; }
  .uitgaven-lijst .expense-row__amount { text-align: right; }
  /* From € 100.000,00 the table steps down to 12px, so it still fits a 360px phone. */
  #uitgaven-scherm[data-grote-bedragen] .maandtabel { font-size: var(--font-tiny); }
}

/* --- Polish 2: the Overzicht on paper ------------------------------------------
   A4 is 717px wide, so the ≤820px carousel applied and clipped the third Te-doen
   card: three columns, nothing scrolls. (The bars and dots keep their colours on paper:
   that rule is with the shared components in style.css, P103 C1.) */
@media print {
  .todo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; overflow: visible; }
}