/* responsive.css — tablet + mobile overrides. Desktop-first; nothing removed,
   presentation adapts. Breakpoints: tablet 768–1199, mobile < 768. */

/* ============ Tablet (768–1199px) ============ */
@media (max-width: 1199px) {
  .view { padding: var(--space-4); }

  .posts__filter-grid { grid-template-columns: 1fr 1fr 1fr; }
  .posts__search { grid-column: 1 / -1; }

  .posts__table-wrap { overflow-x: auto; }
  /* Keep the taller cells — the rows needed the breathing room — but give back
     the horizontal padding, which is scarce here and only widens the scroll. */
  .posts__table th, .posts__table td { padding: 12px var(--space-3); }

  .calendar__cell { min-height: 96px; }
  /* Five KPIs in a hard two-column grid left the last one alone in a half-empty
     row. auto-fit packs them and still gives each card room for a six-figure
     amount. */
  .finance__kpis { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
  /* .finance__splits is auto-fit now and collapses to one column on its own
     once a doughnut and its legend no longer fit side by side. */

  /* Geldstroom: three columns into one row of ~200px each puts "Gefactureerd,
     wacht op betaling" over four lines and squeezes the amount beside it. The
     realised column holds a single row, so it pairs with Onderweg above the
     wider Verwacht column rather than all three shrinking together. */
  .flow__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow__col--expected { grid-column: 1 / -1; }
}

/* ============ Mobile (< 768px) ============ */
@media (max-width: 767px) {
  :root { --topnav-height: 52px; }

  /* Top bar keeps brand + settings + logout; main nav moves to the bottom. */
  .topnav__links { display: none; }
  .topnav__actions .btn--primary { display: none; } /* "Nieuw" lives in bottomnav */
  .topnav__inner { padding: 0 var(--space-4); gap: var(--space-3); }

  /* Bottom navigation */
  .bottomnav {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
    height: var(--bottomnav-height);
    background: var(--surface); border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .bottomnav__link {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: var(--tap-min); color: var(--text-muted); font-size: 11px;
  }
  .bottomnav__link:hover { text-decoration: none; }
  .bottomnav__link.is-active { color: var(--elke); }
  .bottomnav__icon { font-size: 18px; }
  .bottomnav__new { color: var(--elke); font-weight: 600; }

  .view { padding: var(--space-3) var(--space-3) calc(var(--bottomnav-height) + var(--space-4)); }

  /* Filters collapse behind a toggle */
  .posts__filter-toggle { display: inline-flex; }
  .posts__filters { display: none; }
  .posts__filters.is-open { display: block; }
  .posts__filter-grid { grid-template-columns: 1fr; }

  /* Table -> card list (data-label pattern) */
  .posts__table thead { display: none; }
  .posts__table, .posts__table tbody, .posts__table tr, .posts__table td { display: block; }
  .posts__table-wrap { border: none; background: transparent; box-shadow: none; overflow: visible; }
  .posts__row {
    background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--border-strong);
    border-radius: var(--radius-card); margin-bottom: var(--space-3); padding: var(--space-3);
    box-shadow: var(--shadow-sm);
  }
  .account-accent-elke.posts__row { border-left-color: var(--elke); }
  .account-accent-sunkissed.posts__row { border-left-color: var(--sunkissed); }
  .account-accent-mood.posts__row { border-left-color: var(--mood); }
  .posts__row td { border: none !important; padding: 5px 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .posts__row td::before {
    content: attr(data-label); font-size: 12px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.03em;
  }
  .posts__row td:first-child::before { display: none; }
  .posts__row td:first-child::before { content: none; }
  .account-accent-elke td:first-child::before,
  .account-accent-sunkissed td:first-child::before,
  .account-accent-mood td:first-child::before { content: none; }
  .col-check { position: absolute; }
  .posts__row { position: relative; }
  .col-title { align-items: flex-start; }
  .col-num { justify-content: space-between; }
  .col-actions, .col-status, .col-briefing { justify-content: flex-end; }
  .status-select { max-width: none; }

  .posts__totals { flex-direction: column; gap: var(--space-2); }

  /* Calendar compact */
  .calendar__cell { min-height: 70px; padding: 3px; }
  .calendar__chips .calendar__chip:nth-child(n+3) { display: none; }
  /* The title goes, the colour and the tick stay: at 46px the two questions a
     cell can still answer are "gaat deze dag hieraan op?" and "is het al
     gebeurd?", and both survive without a word of text. */
  .calendar__chip-title { display: none; }
  .calendar__chip-mark { margin-left: 0; }

  /* The legend stacks its two groups rather than wrapping mid-group, so "Kleur"
     and "Vorm" never end up describing each other's swatches. */
  .calendar__legend { flex-direction: column; gap: var(--space-3); }
  .calendar__month { font-size: var(--text-heading); min-width: 0; }
  .calendar__nav { width: var(--tap-min); height: var(--tap-min); }
  .calendar__head-actions .btn--primary { display: none; }
  .calendar__weekday { padding: 6px 4px; font-size: 10px; }

  /* Geldstroom stacks. The phase chip on each column header keeps the sequence
     legible once left-to-right is no longer available to carry it. */
  .flow__cols { grid-template-columns: 1fr; }
  .flow__col--expected { grid-column: auto; }
  .flow__col { padding: var(--space-3); }
  /* `margin-top: auto` pushes the total to the card bottom in a row of equal
     columns; stacked, there is no slack to absorb and it just adds a gap. */
  .flow__total { margin-top: 0; }

  /* Overdue rows: age above, the rest beneath. A four-column grid at 375px put
     the client name in a 60px well. */
  .report__overdue-item { grid-template-columns: 1fr auto; row-gap: 2px; }
  .report__overdue-age { grid-column: 1 / -1; }
  .report__overdue-date { grid-column: 1; }
  .report__overdue-value { grid-column: 2; }
  .report__overdue-what { grid-column: 1 / -1; }

  /* Finance */
  .finance__kpis { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .kpi__value { font-size: 20px; }
  /* Two KPI tiles per row at 375px leaves ~160px: the chip and a label like
     "Nog te ontvangen" cannot share a line. Stack them. */
  .kpi__top { flex-direction: column; align-items: flex-start; gap: 2px; }
  .finance__accounts { grid-template-columns: 1fr; }
  .finance__splits { grid-template-columns: 1fr; }
  .finance__chart-body { height: 260px; }
  .finance__chart-body--sm { height: 200px; }
  .finance__chart-head { flex-wrap: wrap; }
  .finance__invoice-row td { display: flex; justify-content: space-between; }
  .finance__invoices thead { display: none; }
  .finance__invoices table, .finance__invoices tbody, .finance__invoice-row, .finance__invoices td { display: block; }
  .finance__invoice-row { border: 1px solid var(--border); border-radius: var(--radius-card); margin-bottom: var(--space-2); padding: var(--space-2); }
  .finance__invoices td::before { content: attr(data-label); font-weight: 600; color: var(--text-muted); font-size: 12px; }

  /* Maandoverzicht as a card list.
     The `data-label` text was already being emitted, but a block cell with a
     right-aligned value renders it as "Nog te leveren€ 4.200,00" — the label and
     the figure with nothing between them. Flex splits them, and the row becomes a
     card so eight labelled lines read as one month rather than a running list.
     Found by reading a 375px screenshot; no assertion was ever going to see it. */
  .report__table tbody tr {
    display: block; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-card);
    margin-bottom: var(--space-3); padding: var(--space-3);
  }
  .report__table td, .report__table tfoot td {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--space-3); padding: 4px 0; border: none;
  }
  .report__table td::before {
    color: var(--text-muted); font-weight: 600; font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.03em; text-align: left;
  }
  /* A full-width tint on a card row reads as a selection, not as "this month". */
  .report__month--now { border-left: 3px solid var(--phase-ontheway); }
  .report__month--now td { background: transparent; }
  .report__table tfoot { display: block; }
  .report__table tfoot tr {
    display: block; padding: var(--space-3);
    border: 1px solid var(--border-strong); border-radius: var(--radius-card);
  }
  .report__table tfoot td { padding-top: 4px; }

  /* Settings */
  .settings__grid { grid-template-columns: 1fr; }

  /* Right panels (day detail + modal) become full-screen bottom sheets */
  .panel {
    width: 100%; max-width: none; top: auto; height: 92vh;
    border-left: none; border-top-left-radius: var(--radius-card); border-top-right-radius: var(--radius-card);
    transform: translateY(100%);
  }
  .panel.is-open { transform: translateY(0); }

  /* PDF viewer full-bleed */
  .pdfviewer__frame { height: 80vh; }

  /* Ensure tap targets */
  .iconbtn { width: var(--tap-min); height: var(--tap-min); }
  .btn--sm { min-height: 36px; }
}

/* ============ Small phones (≤ 374px) ============ */
@media (max-width: 374px) {
  .calendar__cell { min-height: 58px; }
  .finance__kpis { grid-template-columns: 1fr; }
}