/* report.css — Rapport year view: switcher, summary tiles, month table,
   missed-deal analysis. Reuses .kpi and .posts__table from the shared layers. */

.report { display: flex; flex-direction: column; gap: var(--space-4); }

/* ---- head ---- */
.page-head--report { align-items: flex-start; flex-wrap: wrap; gap: var(--space-3); }
.report__headline { display: flex; flex-direction: column; gap: 2px; }
.report__subtitle { margin: 0; font-size: var(--text-label); }
.report__controls { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

.report__yearnav { display: flex; align-items: center; gap: var(--space-2); }
.report__year {
  font-size: var(--text-figure); font-weight: 700; min-width: 76px;
  text-align: center; font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.report__yearnav .calendar__nav[disabled] { opacity: 0.3; cursor: default; }

.report__yearpicks { display: inline-flex; gap: 2px; background: var(--surface-2); padding: 3px; border-radius: var(--radius-badge); }
.report__yearpick {
  padding: 5px 12px; border-radius: 5px; font-size: var(--text-label);
  font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums;
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.report__yearpick:hover { color: var(--text); }
.report__yearpick.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

/* ---- geldstroom panel ----
   Three columns on one time axis: money in, money owed on finished work, money
   the rest of the year still owes her. Not a tile grid — the columns have to
   read left to right as a sequence, which a reflowing auto-fit grid destroys the
   moment it wraps. minmax(240px, 1fr) with a hard 1-column fallback below. */
.report__flow { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.flow__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }

.flow__col {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-2);
  border-radius: var(--radius-card);
  border-top: 3px solid var(--text-subtle);
  min-width: 0;
}
.flow__col--realised { border-top-color: var(--phase-realised); }
.flow__col--ontheway { border-top-color: var(--phase-ontheway); }
.flow__col--expected { border-top-color: var(--phase-expected); }

.flow__head { display: flex; flex-direction: column; gap: 2px; }
.flow__phase {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.flow__phase--realised { color: var(--phase-realised); }
.flow__phase--ontheway { color: var(--phase-ontheway); }
.flow__phase--expected { color: var(--phase-expected); }
.flow__caption { font-size: 12px; color: var(--text-subtle); }

.flow__rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
/* label / count / value — the count column is sized to its content so the
   amounts stay right-aligned with each other across rows. */
.flow__row {
  display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-2);
  align-items: baseline; font-size: var(--text-label);
}
.flow__row-label { color: var(--text-muted); min-width: 0; overflow-wrap: anywhere; }
.flow__row-count { color: var(--text-subtle); font-size: 12px; font-variant-numeric: tabular-nums; }
.flow__row-value { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.flow__row.is-zero .flow__row-value { color: var(--text-subtle); font-weight: 500; }
/* Work she has let slip is the one row here that asks for an action. */
.flow__row--warn .flow__row-label,
.flow__row--warn .flow__row-value { color: var(--warning); }

.flow__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2);
  border-top: 1px solid var(--border-strong); padding-top: var(--space-3); margin-top: auto;
}
.flow__total-label { font-size: 12px; color: var(--text-muted); }
/* Same clamp as .kpi__value: a five-figure total must shrink, never spill. */
.flow__total-value {
  font-size: clamp(18px, 1.2vw + 11px, 22px);
  font-variant-numeric: tabular-nums; line-height: 1.2; overflow-wrap: anywhere;
}
/* Product and tegenfactuur value sitting in the same phase — the annotation the
   Barterwaarde tile never had. */
.flow__noncash { font-size: 12px; color: var(--text-subtle); overflow-wrap: anywhere; }

.flow__foot {
  margin: 0; padding-top: var(--space-2);
  font-size: var(--text-label); font-weight: 600; color: var(--text-muted);
}
.flow__aside { margin: 0; font-size: 12px; color: var(--text-subtle); }

/* ---- overdue strip ---- */
.report__overdue {
  padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3);
  border-left: 3px solid var(--warning);
}
.report__overdue-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.report__overdue-head h2 { color: var(--warning); }
.report__overdue-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
/* age / what / date / value. The age leads, because it is the whole signal:
   three months stalled is a different problem from three days. */
.report__overdue-item {
  display: grid; grid-template-columns: 5.5rem 1fr auto auto;
  gap: var(--space-3); align-items: baseline;
  font-size: var(--text-label); padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.report__overdue-item:last-child { border-bottom: 0; padding-bottom: 0; }
.report__overdue-age { font-weight: 700; color: var(--warning); font-variant-numeric: tabular-nums; }
.report__overdue-what { min-width: 0; overflow-wrap: anywhere; }
.report__overdue-date { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.report__overdue-value { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- summary tiles ----
   Six fixed columns gave each tile ~160px of usable width, which a figure like
   "€ 12.345,67" at 26px simply does not fit into — the value ran under the tile
   beside it. auto-fit reflows to as many tiles as actually fit instead. */
/* 215px, matching .finance__kpis. At 190 a five-figure amount broke mid-number
   ("€ 25.000,0 / 0") once auto-fit packed five tiles into 1024 — the same
   figures render on both pages, so the tracks that hold them have to agree. */
.report__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: var(--space-3); }

/* ---- month table ---- */
.report__months { padding: var(--space-5); }
.report__table tfoot td {
  font-weight: 700; border-top: 2px solid var(--border-strong);
  padding-top: var(--space-3); font-variant-numeric: tabular-nums;
}
.report__table td.col-num, .report__table th.col-num { font-variant-numeric: tabular-nums; }
.report__month-name { text-transform: capitalize; }
.report__miss { color: var(--status-not-selected); }
/* A dash for "nothing here" — quiet, so real figures carry the row. */
.report__table td.is-zero { color: var(--text-subtle); }

/* Past / now / future, so twelve rows read as a timeline. Without this a figure
   for November looks exactly like a figure for March — one is a fact and the
   other is a plan. Kept to weight and a rule rather than a background wash: the
   rows still have to be scannable as a table. */
.report__month--now td { background: var(--status-planned-bg); font-weight: 600; }
.report__month--now .report__month-name::after {
  content: ' · nu'; font-weight: 500; color: var(--text-subtle); font-size: 12px;
}
.report__month--future td { color: var(--text-muted); }
.report__month--future .report__month-name { font-style: italic; }

/* ---- missed deals ---- */
.report__missed { display: flex; flex-direction: column; gap: var(--space-4); }
.page-head--sub { margin-top: var(--space-2); }
.page-head--sub .page-head__title { font-size: var(--text-heading); }
.report__reasons { padding: var(--space-5); }
.report__reason-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.report__reason { display: flex; flex-direction: column; gap: 5px; }
.report__reason-head { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-label); }
.report__reason-label { color: var(--text-muted); }
.report__reason-value { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.report__reason-track { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.report__reason-fill {
  height: 100%; width: 0; border-radius: 999px; background: var(--status-not-selected);
  transition: width var(--duration-normal) var(--ease);
}

.report__missed-table { padding: var(--space-5); }
.report__client { font-weight: 600; }
/* Free-text notes are the one column allowed to wrap — everything else in this
   table is short, and letting it stretch would squeeze the money column. */
.report__notes { color: var(--text-muted); max-width: 280px; white-space: normal; }

.pill--reason {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--status-not-selected-bg); color: var(--status-not-selected);
}
.pill--reason-empty { background: var(--surface-2); color: var(--text-subtle); font-weight: 500; }

/* ---- responsive ---- */
@media (max-width: 767px) {
  .report__controls { width: 100%; justify-content: space-between; }
  .report__year { font-size: var(--text-heading); min-width: 60px; }
  .report__notes { max-width: none; }

  /* Same card-per-row treatment the invoice table gets on mobile. */
  .report__months thead, .report__missed-table thead { display: none; }
  .report__months table, .report__months tbody, .report__months tr, .report__months td,
  .report__missed-table table, .report__missed-table tbody, .report__missed-table tr,
  .report__missed-table td { display: block; }
  .report__months tr, .report__missed-table tr {
    border: 1px solid var(--border); border-radius: var(--radius-card);
    margin-bottom: var(--space-2); padding: var(--space-2);
  }
  .report__months td, .report__missed-table td { display: flex; justify-content: space-between; gap: var(--space-3); }
  .report__months td::before, .report__missed-table td::before {
    content: attr(data-label); font-weight: 600; color: var(--text-muted); font-size: 12px;
  }
  .report__table tfoot td { border-top: none; }
}

@media (max-width: 374px) {
  /* auto-fit's 190px floor still overflows the narrowest phones. */
  .report__tiles { grid-template-columns: 1fr; }
}