/* =========================================================================
   public/css/reports.css — v4.0.0, owner A6. The Reports page (reports.js).
   Tokens only (defined in index.html). Width rules are `@media screen` only,
   so index.html's print block lays the table out as a plain table on paper.
   The cohort table: Resident · Current Stage / Progress · Stage 1, 2, 3, 5, 6 ·
   Status · Record — a fixed column model that fits the 1280 px desktop and
   scrolls inside its own labelled region below that (name pinned), stacked
   into one card per resident on a phone.
   ========================================================================= */
.reportspage{min-width:0}
.reportbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);margin:0 0 var(--space-3)}
.reportmeta{margin:0 0 var(--space-4)}
.reportspage .vcount{font-variant-numeric:tabular-nums}
.reportspage .footnote{max-width:60rem}
.dlerror .notice{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3)}

.roster.t-reports th{white-space:normal;vertical-align:bottom}
.roster.t-reports td{vertical-align:top;overflow-wrap:break-word}
.roster.t-reports .rname{display:block;font-weight:600}
.roster.t-reports .pgy{display:block;margin-top:1px}
.roster.t-reports .stagebadge{white-space:normal}
.roster.t-reports .stagename{display:block;margin-top:2px;line-height:1.4}
.roster.t-reports .progline{display:block;margin-top:var(--space-1);font-size:var(--fs-sm)}
.roster.t-reports .pill{white-space:normal;max-width:100%}
.roster.t-reports td.actions .btnlink{white-space:nowrap}
/* a stage cell: ✓ / ◐ / — (the non-colour channel), then that stage's own counts */
.gate-cell .gmark{display:inline-block;min-width:1.1em;font-weight:700;color:var(--text-muted);font-size:var(--fs-md);line-height:1.2}
.gate-cell .gmark.met{color:var(--success)}
.gate-cell .gmark.ready{color:var(--primary)}
.gate-cell .gdetail{display:block;margin-top:2px;font-size:var(--fs-xs);color:var(--text-muted);line-height:1.45}

@media screen and (min-width:600px){
  .roster.t-reports{table-layout:fixed;min-width:60rem}
  .roster.t-reports :is(th,td){padding-left:var(--space-2);padding-right:var(--space-2);overflow-wrap:anywhere}
  .roster.t-reports :is(th,td):first-child{padding-left:var(--space-4)}
  .roster.t-reports th:nth-child(2){width:8rem}
  .roster.t-reports th:nth-child(n+3):nth-child(-n+7){width:6.5rem}
  .roster.t-reports th:nth-child(8){width:7rem}
  .roster.t-reports th:nth-child(9){width:5.75rem}
}
@media screen and (min-width:600px) and (max-width:1279.98px){
  .roster.t-reports th:first-child,.roster.t-reports td:first-child{position:sticky;left:0;z-index:2;
    background:var(--surface);border-right:1px solid var(--border)}
  .roster.t-reports th:first-child{z-index:3;background:var(--surface-2)}
}
@media screen and (max-width:599.98px){
  .reportbar a.btnlink{flex:1 1 100%}
  .roster.t-reports{display:block;padding:var(--space-2)}
  .roster.t-reports thead{display:none}
  .roster.t-reports tbody{display:block}
  .roster.t-reports tr{display:block;background:var(--surface-2);border:1px solid var(--border);
    border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);margin-bottom:var(--space-2)}
  .roster.t-reports tr:last-child{margin-bottom:0}
  .roster.t-reports td{display:block;width:auto;border:0;padding:var(--space-1) 0;text-align:left;min-width:0}
  .roster.t-reports td+td{border-top:1px solid var(--border)}
  .roster.t-reports td[data-label]::before{content:attr(data-label);display:block;font-size:var(--fs-2xs);font-weight:600;
    text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-bottom:1px}
  .roster.t-reports td[data-label="Resident"]::before{content:none}
  .roster.t-reports td.actions .btnlink{width:100%}
}
@media print{
  .reportbar,.dlerror,.progpick{display:none!important}
  .roster.t-reports{min-width:0!important;table-layout:auto!important;font-size:8pt}
  .roster.t-reports :is(th,td){padding:3pt 4pt!important;overflow-wrap:anywhere}
  .roster.t-reports th:first-child,.roster.t-reports td:first-child{position:static!important}
  .gate-cell .gmark{print-color-adjust:exact;-webkit-print-color-adjust:exact}
}