/* reports/module.css: the six report screens.
   Every row's tracks live here, never inline: an inline grid-template-columns
   beats the 760px media query that collapses list rows to one column. */

.report-toolbar{ margin-top:4px; }
.report-range-label{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-soft); }
.report-range-label input{ width:auto; }
.report-range-hint{ margin:0; }

.report-chart-panel{ margin:16px 0; }
/* Chart.js sizes to its container, and one with no height collapses to nothing. */
.report-chart{ position:relative; height:260px; }

/* The .row.rpt-N grids moved to core.css: the Back Office and the portal use them too. */
.row.report-rate-row{ padding-top:4px; padding-bottom:4px; }
.row.report-rate-row > div:first-child{ padding-left:14px; }

/* The ageing bands are a sequence, not metric cards: six hold one row. */
.ageing-strip{ display:grid; grid-template-columns:repeat(auto-fit, minmax(104px, 1fr)); gap:8px; margin:16px 0; }
.ageing-band{ border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; background:var(--paper-raised); border-top:3px solid var(--line-strong); }
.ageing-band.tone-sage{ border-top-color:var(--sage); }
.ageing-band.tone-mustard{ border-top-color:var(--mustard); }
.ageing-band.tone-brick{ border-top-color:var(--brick); }
.ageing-band-label{ font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted); }
.ageing-band-value{ font-size:18px; font-weight:600; margin-top:4px; font-variant-numeric:tabular-nums; }

@media (max-width:760px){
  .report-toolbar .btn.small{ min-height:32px; }
  .row.report-rate-row > div:first-child{ padding-left:0; }
}

/* Funnel: why deals were lost, a bar against the most common reason. */
.row.rpt-lost{ grid-template-columns:minmax(0,1.6fr) minmax(0,2fr) 60px; align-items:center; }
.rpt-lost-bar{ height:10px; border-radius:3px; background:var(--brick); min-width:4px; }