/* Reports only. Explicit rows prevent legacy chart and number-layout rules
   from placing the category label and track in the same grid cell. */
@media (max-width: 950px) {
  body #reports {
    --report-gap: 16px;
    --report-pad: 16px;
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
  }
  body #reports .reportgrid,
  body #reports .financial-pane.on { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--report-gap); }
  body #reports .panel { padding: var(--report-pad); min-width: 0; }
  body #reports .head { align-items: flex-start; flex-wrap: wrap; margin-bottom: 16px; }
  body #reports .head h2 { font-size: 18px; line-height: 1.4; }
  body #reports .report-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
  body #reports .report-tab { min-height: 44px; padding: 10px 8px; white-space: normal; line-height: 1.4; }
  body #reports .report-tab.on { background: var(--b); color: white; }
  body #reports .report-toolbar { margin: 0; }
  body #reports .report-filter-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: stretch; }
  body #reports .report-filter-row label,
  body #reports .activity-filters label { display: grid; gap: 6px; min-width: 0; }
  body #reports input, body #reports select, body #reports .btn { box-sizing: border-box; max-width: 100%; min-height: 44px; font: inherit; }
  body #reports input, body #reports select { width: 100%; min-width: 0; font-size: 16px; }
  body #reports .report-filter-row > [hidden] { display: none; }
  body #reports .report-export-status, body #reports .report-period-note { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
  body #reports .report-period-note { margin-bottom: 0; }
  body #reports .report-summary { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0; }
  body #reports .report-summary > .metric { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-height: 0; padding: 14px 16px; border-top-width: 1px; border-inline-start: 3px solid var(--metric-accent, var(--b)); background: var(--p); }
  body #reports .report-summary .value { margin: 0; font-size: 24px; line-height: 1.35; text-align: right; font-variant-numeric: tabular-nums; }
  body #reports #reportIncome { color: var(--g); }
  body #reports #reportExpenses { color: var(--r); }
  body #reports .bars { display: grid; gap: 0; }
  body #reports #bars > .barrow { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 8px; gap: 8px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--line); }
  body #reports #bars > .barrow:first-child { padding-top: 0; }
  body #reports #bars > .barrow:last-child { border-bottom: 0; padding-bottom: 0; }
  body #reports #bars > .barrow > span { grid-column: 1; grid-row: 1; display: flex; align-items: center; min-width: 0; line-height: 1.5; font-size: 14px; overflow-wrap: anywhere; }
  body #reports #bars > .barrow > b { grid-column: 1; grid-row: 2; justify-self: stretch; min-width: 0; max-width: 100%; font-size: 17px; line-height: 1.5; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
  body #reports #bars > .barrow > .bar { grid-column: 1; grid-row: 3; width: 100%; height: 8px; min-width: 0; margin: 0; border-radius: 8px; }
  body #reports .bar-record-icon { flex: 0 0 24px; }
  body #reports .metric .value { max-width: 100%; }
  body #reports .activity-filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  body #reports .activity-filters .btn { white-space: normal; }
  body #reports .activity-table { min-width: 0; width: 100%; }
  body #reports .activity-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  body #reports .activity-table tbody, body #reports .activity-table tr { display: block; width: 100%; }
  body #reports .activity-table tbody tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  body #reports .activity-table td { display: block; box-sizing: border-box; min-width: 0; width: 100%; padding: 4px 0; border: 0; white-space: normal; overflow-wrap: anywhere; font-size: 14px; }
  body #reports .activity-table td::before { display: block; color: var(--muted); font-size: 12px; }
  body #reports .activity-table td:nth-child(1)::before { content: 'Date and time'; }
  body #reports .activity-table td:nth-child(2)::before { content: 'Action'; }
  body #reports .activity-table td:nth-child(3)::before { content: 'Area'; }
  body #reports .activity-table td:nth-child(4)::before { content: 'Details'; }
  body #reports .activity-table td:nth-child(5)::before { content: 'Source'; }
  body #reports .activity-table td[colspan]::before { content: none; }
  body #reports .empty { padding: 24px 8px; line-height: 1.6; }
}