/* ============================================================
 * Report builder — condensed filter → generate → results pattern.
 * A reusable shell for the report screens (pages/report/*): a compact
 * primary filter (When + Where) with an "Advanced filters" disclosure,
 * Generate / Reset actions, an empty placeholder, and a results card
 * that integrates the summary as metric tiles above the table. After
 * generating, the filter collapses to a one-line summary bar.
 * See docs/design.md → Pattern: Report builder.
 * ============================================================ */

/* ---------- FILTER CARD (expanded) ---------- */
.ng-report-filter {
  --ng-report-label-w: 64px;   /* row label column — shared by labels + the advanced toggle indent */
  --ng-report-field-h: 40px;   /* form-control height (_forms.css) — used to vertically centre the row label */
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-4);
}
.ng-report-filter__eyebrow {
  margin: 0 0 var(--space-4);
  font-family: var(--font-family-display);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

/* ---------- FIELD ROWS (When / Where / Who / Status / By) ---------- */
/* The label is pinned in a left gutter (absolute) and the row is padded by that
   gutter, so the fields flow in a single column block. When a row has more fields
   than fit, the overflow wraps onto a new line that starts at the SAME left grid
   line as the fields above — never back under the label — keeping the columns
   aligned and the spacing balanced on narrow screens. */
.ng-report-row {
  position: relative;
  display: flex;
  align-items: flex-start;   /* top-align so a grown multi-select extends downward
                                without re-centring (and shifting) its 40px siblings or
                                falling out of line with the pinned label */
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding-left: calc(var(--ng-report-label-w) + var(--space-2));
}
.ng-report-row:last-child { margin-bottom: 0; }
.ng-report-row__label {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--ng-report-label-w);
  height: var(--ng-report-field-h);   /* match the first field so the label stays centred */
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* A field wraps one select2 / date input. Primary (When / Where) fields render as
   standard form fields; advanced fields render as chip-pills (see below). */
.ng-report-field {
  flex: 0 0 220px;     /* fixed width so every chip/field is the same size and the
                          columns align across rows (they wrap on narrow screens) */
  min-width: 0;        /* flex default is min-width:auto, which lets a select2's
                          content min-size stretch the field past its 220px basis —
                          pin to 0 so every column is exactly the same width */
  max-width: 100%;
}
/* A double-width field for long option text (e.g. the Payments Cycle select, whose
   options carry cycle + name + location). Spans two normal columns + the row gap. */
.ng-report-field--wide { flex-basis: calc(2 * 220px + var(--space-2)); }

/* ---------- FIELDS ----------
   Primary fields (When / Where) keep the standard form-field look — the cream box,
   border, radius + the global select2 styling all come from _forms.css. We only make
   the field fill its column and re-pin the multi-select placeholder inset to the
   .form-control value: select2's inline search escapes the rendered's padding on
   focus/blur, which butted the label against the box edge. The rendered's LEFT padding
   is 0 globally, so pinning the inset on the search field keeps it stable. */
.ng-report-field .select2-container { width: 100% !important; }
.ng-report-field .select2-selection--multiple .select2-search--inline .select2-search__field {
  padding-left: var(--space-3) !important;   /* 12px — stable across focus/blur */
  min-width: 0 !important;                   /* let the inline search shrink so a chip + the
                                                search share one line; otherwise its 67px min
                                                pushed the search onto a 2nd line, grew the box
                                                and left the single chip top-aligned, not centred */
}
/* Centre the chip in the 40px box: drop select2's asymmetric top margin (it offset the chip)
   and space any wrapped chip rows with a row-gap on the flex rendered instead.
   Vertical padding keeps wrapped pills off the box border (choice margins are zeroed
   below; left inset still comes from each choice's margin-left — see _forms.css #499).
   Matches .form-control's padding-block (--space-2 / 8px). */
.ng-report-field .select2-selection--multiple .select2-selection__rendered {
  row-gap: var(--space-1);
  column-gap: var(--space-1);
  padding-top: var(--space-2) !important;    /* 8px — defeat global padding: 0 … !important */
  padding-bottom: var(--space-2) !important;
}
.ng-report-field .select2-selection--multiple .select2-selection__choice {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Advanced fields (Who / Status / Delivered by) render as chip-pills instead — a
   subtle tint + AA boundary, vs the cream form fields above. */
.ng-report-advanced .ng-report-field .select2-selection--single,
.ng-report-advanced .ng-report-field .select2-selection--multiple {
  background: var(--color-chip-bg) !important;
  border: var(--border-width-emphasis) solid var(--color-filter-border) !important;
}
.ng-report-advanced .ng-report-field .select2-selection--single {
  border-radius: var(--radius-full) !important;
}
.ng-report-advanced .ng-report-field .select2-selection--multiple {
  border-radius: var(--radius-lg) !important;   /* grows for selected chips */
}
/* A select carrying the `.select2-multiple` contract posts an ARRAY even when it
   renders single — the organisation filter is exactly that (one `all` option, no
   `multiple` attribute; `collectFilters()` wraps its scalar in `[value]`). Left on
   the pill radius it is the odd shape out the moment a real multi-select sits
   beside it in the same row, as on the Update Activity report's "By" row. Match
   the multi silhouette so a row never shows two different outlines for controls
   that behave identically. Select2 keeps the source <select> as the container's
   previous sibling, which is what makes this targetable in CSS. */
.ng-report-advanced .ng-report-field .select2-multiple + .select2-container .select2-selection--single {
  border-radius: var(--radius-lg) !important;
}

/* ---------- ADVANCED DISCLOSURE ---------- */
.ng-report-advanced-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 38px;
  margin-top: var(--space-3);
  margin-left: calc(var(--ng-report-label-w) + var(--space-2));   /* align with the fields, not the labels */
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  color: var(--color-text-default);
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard);
}
.ng-report-advanced-toggle:hover { background: var(--color-bg-raised); border-color: var(--color-border-strong); }
.ng-report-advanced-toggle:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: 2px; }
.ng-report-advanced-toggle__hint { color: var(--color-text-faint); font-weight: var(--font-weight-regular); }
.ng-report-advanced-toggle__caret {
  width: 14px; height: 14px; margin-left: var(--space-1);
  background-color: currentColor;
  -webkit-mask: var(--ng-icon-caret-down, url(/img/icons/phosphor/caret-down.svg)) center / contain no-repeat;
          mask: var(--ng-icon-caret-down, url(/img/icons/phosphor/caret-down.svg)) center / contain no-repeat;
  transition: transform var(--motion-base) var(--ease-standard);
}
.ng-report-advanced-toggle[aria-expanded="true"] .ng-report-advanced-toggle__caret { transform: rotate(180deg); }

.ng-report-advanced {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}
.ng-report-advanced[hidden] { display: none; }

/* ---------- ACTIONS ---------- */
.ng-report-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

/* ---------- COLLAPSED FILTER SUMMARY BAR ---------- */
.ng-report-filterbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}
.ng-report-filterbar[hidden] { display: none; }
.ng-report-filterbar__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); flex: 1 1 auto; min-width: 0; }
.ng-report-chip {
  display: inline-block;
  box-sizing: border-box;
  min-height: 26px;
  max-width: 100%;
  height: auto;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-chip-bg);
  border: 1px solid var(--color-border-default);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-base);
  color: var(--color-text-default);
  white-space: normal;
  overflow-wrap: anywhere;
}
.ng-report-chip__key { color: var(--color-text-faint); }
.ng-report-chip--empty { background: transparent; border-color: transparent; color: var(--color-text-faint); padding-left: 0; }
.ng-report-filterbar__edit {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 34px; padding: 0 var(--space-4);
  border: 1px solid var(--color-border-default); border-radius: var(--radius-md);
  background: var(--color-bg-surface); color: var(--color-text-default);
  font-family: var(--font-family-display); font-weight: var(--font-weight-medium); font-size: var(--font-size-sm);
  cursor: pointer; flex: 0 0 auto;
}
.ng-report-filterbar__edit:hover { background: var(--color-bg-raised); border-color: var(--color-border-strong); }
.ng-report-filterbar__edit:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: 2px; }

/* ---------- EMPTY ZONE ---------- */
.ng-report-empty {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
}
.ng-report-empty[hidden] { display: none; }

/* ---------- RESULTS CARD ---------- */
.ng-report-results {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
}
.ng-report-results[hidden] { display: none; }
.ng-report-results__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.ng-report-results__title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-strong);
}

/* integrated summary — infographic metric tiles above the table.
   VALUE-FIRST VERTICAL LOCKUP: a small tinted icon badge on top, then the number
   on its own full-width line, then the label beneath. Two reasons it's stacked,
   not the old icon-beside-number row:
   1. The number is TOP-ANCHORED (icon has a fixed height, content is flex-start),
      so every tile's value sits on the same line regardless of how many lines its
      label wraps to — the old center-aligned row let a 1-line vs 4-line label
      shove the number up/down, misaligning the row.
   2. The number gets the WHOLE card width instead of sharing it with the icon, so
      large currency sums fit without the shrink-to-fit crushing them to tiny. */
.ng-report-stats {
  display: grid;
  /* auto-FILL (not auto-fit): keep the empty tracks so a single tile holds the small
     card width and stays left-aligned, instead of stretching across the whole row. */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.ng-report-stat {
  display: flex;
  flex-direction: column;          /* value-first stack (see note above) */
  align-items: flex-start;         /* top-anchor: keeps every value on a shared line */
  gap: var(--space-3);
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}
.ng-report-stat__icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-bg-sunken);
  color: var(--color-text-muted);
  font-size: 19px;
}
/* full width so the number can use the whole tile (not shrink-to-fit content width). */
.ng-report-stat__body { display: flex; flex-direction: column; min-width: 0; width: 100%; }
.ng-report-stat__value {
  font-family: var(--font-family-display);   /* Figtree — match the dashboard stat cards */
  font-size: 28px;                           /* full-width headroom for currency sums; ngFitStats only nudges it down when truly compressed */
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  color: var(--color-text-strong);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;                       /* stay on one line; refinements.js (ngFitStats) shrinks the
                                                font-size to fit a narrow/compressed tile rather than wrapping */
  overflow: hidden;                          /* safety clip before the shrink runs */
}
.ng-report-stat__label {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}
/* Per-metric accent on the icon badge — soft brand tints, infographic but restrained. */
.ng-report-stat--navy .ng-report-stat__icon { background: var(--color-navy-100); color: var(--color-navy-700); }
.ng-report-stat--rust .ng-report-stat__icon { background: var(--color-rust-100); color: var(--color-rust-700); }
.ng-report-stat--sage .ng-report-stat__icon { background: var(--color-sage-100); color: var(--color-sage-700); }

/* ---------- DOWNLOAD MODAL ----------
   Refines the report export modal (base .modal token styling lives in _chrome.css). */
.ng-download-modal .modal-content { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.ng-download-modal .modal-header { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border-subtle); }
.ng-download-modal .modal-title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-strong);
}
.ng-download-modal .modal-body { padding: var(--space-5); }
.ng-download-modal .modal-body .form-group { margin-bottom: var(--space-4); }
.ng-download-modal .modal-body .form-group:last-child { margin-bottom: 0; }
.ng-download-modal .modal-body label {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-default);
  margin-bottom: var(--space-2);
}
.ng-download-modal__pii {
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.ng-download-modal__pii-head {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-default);
}
.ng-download-modal__pii-head .fa { color: var(--color-rust-500); }
.ng-download-modal__pii-note {
  margin: var(--space-1) 0 var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.ng-download-modal .modal-footer { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border-subtle); }
/* Vertical form layout — labels block-above (override Metronic's horizontal-form
   .control-label float/right-align), fields full-width, checkbox lists in a row. */
.ng-download-modal .modal-body .control-label {
  display: block;
  float: none;
  width: auto;
  text-align: left;
  padding-top: 0;
}
.ng-download-modal .modal-body .form-control,
.ng-download-modal .modal-body .select2-container { width: 100% !important; }
.ng-download-modal .mt-checkbox-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-1);
}

/* Close affordance. Metronic renders .close as a tiny 9px background-image with
   float:none + text-indent:-10000px, so it lands top-left and barely visible.
   Override to a clean, AA-sized × pinned to the top-right of the header. */
.ng-download-modal .modal-header { position: relative; }
.ng-download-modal .modal-header .modal-title { padding-right: var(--space-7); }
.ng-download-modal .close {
  position: absolute;
  top: 50%;
  right: var(--space-5);
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  color: var(--color-text-muted);
  opacity: 1;
  border-radius: var(--radius-md);
  text-indent: 0 !important;             /* defeat vendor -10000px */
  background-image: none !important;     /* defeat vendor remove-icon png */
  transition: color 120ms ease, background-color 120ms ease;
}
.ng-download-modal .close::before { content: "\00d7"; }   /* × — markup is empty */
.ng-download-modal .close:hover,
.ng-download-modal .close:focus {
  color: var(--color-text-strong);
  background-color: var(--color-bg-sunken);
}

/* the results table sits flush below the stats */
.ng-report-results > .table { margin-bottom: 0; }

/* Pivot preview shows the full grid — no paging/info chrome. Collapse the empty
   DataTables footer row so the tfoot total sits flush. */
.dataTables_wrapper:has(table.ng-pivot-table) > .row:last-child {
  display: none !important;
}

/* ---------- PAYMENT SUMMARY PIVOT TABLE ----------
   Wide cycles-across / geography-down grid. Phase-1 readability: alternating
   cycle bands in the BODY only (header stays the uniform table band),
   tabular numerals, muted em-dash for zero cells, default table density.
   Specificity + !important beat _data-display.css transparent cell surfaces. */
table.ng-pivot-table.table.dataTable > tbody > tr > td.ng-pivot-num,
table.ng-pivot-table.table.dataTable > tfoot > tr > td.ng-pivot-num {
  font-variant-numeric: tabular-nums;
}
table.ng-pivot-table.table.dataTable > tbody > tr > td .ng-pivot-empty {
  color: var(--color-text-faint) !important;
}
table.ng-pivot-table.table.dataTable > tbody > tr > td.ng-pivot-geo .ng-pivot-location__primary {
  display: block;
  color: var(--color-text-default);
}
/* 11px / 1.3 sit deliberately below the type scale (--font-size-xs is 12px, and
   the tightest line-height token is 1.35). The parent line of a pivot cell is a
   breadcrumb under the unit name in a grid that is already 33 columns wide at
   the cycle cap; the smallest scale step still wraps it. Dense-grid exception,
   not a drift. */
table.ng-pivot-table.table.dataTable > tbody > tr > td.ng-pivot-geo .ng-pivot-location__secondary {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.3;
}
/* Province group title — sunken band before each province at district/LLG/ward. */
table.ng-pivot-table.table.dataTable > tbody > tr.ng-pivot-spacer > td {
  padding: var(--space-4) var(--space-4) !important;   /* 16px — uniform on every title row */
  line-height: 1.3;
  border-top: 1px solid var(--color-border-subtle) !important;
  border-bottom: none !important;
}
table.ng-pivot-table.table.dataTable > tbody > tr.ng-pivot-spacer:first-child > td {
  border-top: none !important;
}
table.ng-pivot-table.table.dataTable > tbody > tr.ng-pivot-spacer .ng-pivot-province-heading {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
table.ng-pivot-table.table.dataTable > tbody > tr.ng-pivot-spacer .ng-pivot-province-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard);
}
table.ng-pivot-table.table.dataTable > tbody > tr.ng-pivot-spacer .ng-pivot-province-toggle:hover {
  background-color: var(--color-bg-sunken);
  border-color: var(--color-border-strong);
  color: var(--color-text-strong);
}
table.ng-pivot-table.table.dataTable > tbody > tr.ng-pivot-spacer .ng-pivot-province-toggle:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}
table.ng-pivot-table.table.dataTable > tbody > tr.ng-pivot-spacer .ng-pivot-province-toggle .fa {
  font-size: 12px;
  line-height: 1;
  transition: transform var(--motion-fast) var(--ease-standard);
}
table.ng-pivot-table.table.dataTable > tbody > tr.ng-pivot-spacer.is-collapsed .ng-pivot-province-toggle .fa {
  transform: rotate(-90deg);
}
table.ng-pivot-table.table.dataTable > tbody > tr.ng-pivot-spacer .ng-pivot-province-title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-strong);
}
/* Expanded: hide header totals visually but keep cells painted (visibility:hidden
   on a td suppresses its background — the row reads white to the right). */
table.ng-pivot-table.table.dataTable > tbody > tr.ng-pivot-spacer:not(.is-collapsed) > td.ng-pivot-province-summary {
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  visibility: visible !important;
}
table.ng-pivot-table.table.dataTable > tbody > tr.ng-pivot-spacer:not(.is-collapsed) > td.ng-pivot-province-summary * {
  display: none !important;
}
table.ng-pivot-table.table.dataTable > tbody > tr.ng-pivot-spacer.is-collapsed > td.ng-pivot-province-summary {
  font-weight: var(--font-weight-semibold);
}
/* Province subtotal — end of each geographic section when expanded. */
table.ng-pivot-table.table.dataTable > tbody > tr.ng-pivot-province-total > td {
  padding-top: var(--space-3) !important;
  padding-bottom: var(--space-3) !important;
  border-top: 1px solid var(--color-border-default) !important;
}
table.ng-pivot-table.table.dataTable > tbody > tr.ng-pivot-province-total .ng-pivot-province-total-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
}
table.ng-pivot-table.table.dataTable > tbody > tr.ng-pivot-province-total > td.ng-pivot-total {
  font-weight: var(--font-weight-semibold);
}
/* Header — one flat band; pivot cycle/total classes must not tint thead cells. */
table.ng-pivot-table.table.dataTable > thead > tr > th.ng-pivot-geo,
table.ng-pivot-table.table.dataTable > thead > tr > th.ng-pivot-cycle--odd,
table.ng-pivot-table.table.dataTable > thead > tr > th.ng-pivot-cycle--even,
table.ng-pivot-table.table.dataTable > thead > tr > th.ng-pivot-total {
  background-color: var(--color-bg-app) !important;
}
table.ng-pivot-table.table.dataTable > thead > tr > th.ng-pivot-total--lead {
  border-left: 2px solid var(--color-border-strong) !important;   /* beat the no-vertical-border table rule */
}
/* Body — light alternating cycle pairs on data rows only (not province chrome). */
table.ng-pivot-table.table.dataTable > tbody > tr:not(.ng-pivot-spacer):not(.ng-pivot-province-total) > td.ng-pivot-cycle--odd {
  background-color: var(--color-bg-raised) !important;
}
table.ng-pivot-table.table.dataTable > tbody > tr:not(.ng-pivot-spacer):not(.ng-pivot-province-total) > td.ng-pivot-cycle--even {
  background-color: var(--color-bg-surface) !important;
}
table.ng-pivot-table.table.dataTable > tbody > tr:not(.ng-pivot-spacer):not(.ng-pivot-province-total) > td.ng-pivot-total {
  background-color: var(--color-bg-raised) !important;
  font-weight: var(--font-weight-semibold);
}
table.ng-pivot-table.table.dataTable > tbody > tr:not(.ng-pivot-spacer):not(.ng-pivot-province-total) > td.ng-pivot-total--lead {
  border-left: 2px solid var(--color-border-strong) !important;
}
/* Province header — sunken band in both states (beats _data-display transparent tbody).
   Last in the pivot block so it wins any stray body-band rules above. */
table.ng-pivot-table.table.dataTable > tbody > tr.ng-pivot-spacer {
  background-color: var(--color-bg-sunken) !important;
}
table.ng-pivot-table.table.dataTable > tbody > tr.ng-pivot-spacer > td,
table.ng-pivot-table.table.dataTable > tbody > tr.ng-pivot-spacer > td.ng-pivot-geo,
table.ng-pivot-table.table.dataTable > tbody > tr.ng-pivot-spacer > td.ng-pivot-province-summary,
table.ng-pivot-table.table.dataTable > tbody > tr.ng-pivot-spacer > td.ng-pivot-cycle--odd,
table.ng-pivot-table.table.dataTable > tbody > tr.ng-pivot-spacer > td.ng-pivot-cycle--even,
table.ng-pivot-table.table.dataTable > tbody > tr.ng-pivot-spacer > td.ng-pivot-total {
  background-color: var(--color-bg-sunken) !important;
}
/* Collapsed header — cycle stripes on the visible summary cells only. */
table.ng-pivot-table.table.dataTable > tbody > tr.ng-pivot-spacer.is-collapsed > td.ng-pivot-cycle--odd {
  background-color: var(--color-bg-raised) !important;
}
table.ng-pivot-table.table.dataTable > tbody > tr.ng-pivot-spacer.is-collapsed > td.ng-pivot-cycle--even {
  background-color: var(--color-bg-surface) !important;
}
table.ng-pivot-table.table.dataTable > tbody > tr.ng-pivot-spacer.is-collapsed > td.ng-pivot-total {
  background-color: var(--color-bg-raised) !important;
}
table.ng-pivot-table.table.dataTable > tbody > tr.ng-pivot-spacer.is-collapsed > td.ng-pivot-geo {
  background-color: var(--color-bg-sunken) !important;
}
/* Province subtotal — cycle striping; tr + every td must be painted explicitly
   (same pattern as the spacer header — a lone td background leaves the rest white).
   Geo column matches data rows (surface); numeric cells follow cycle odd/even bands. */
table.ng-pivot-table.table.dataTable > tbody > tr.ng-pivot-province-total {
  background-color: var(--color-bg-surface) !important;
}
table.ng-pivot-table.table.dataTable > tbody > tr.ng-pivot-province-total > td,
table.ng-pivot-table.table.dataTable > tbody > tr.ng-pivot-province-total > td.ng-pivot-geo,
table.ng-pivot-table.table.dataTable > tbody > tr.ng-pivot-province-total > td.ng-pivot-province-summary,
table.ng-pivot-table.table.dataTable > tbody > tr.ng-pivot-province-total > td.ng-pivot-cycle--odd,
table.ng-pivot-table.table.dataTable > tbody > tr.ng-pivot-province-total > td.ng-pivot-cycle--even,
table.ng-pivot-table.table.dataTable > tbody > tr.ng-pivot-province-total > td.ng-pivot-total {
  visibility: visible !important;
}
table.ng-pivot-table.table.dataTable > tbody > tr.ng-pivot-province-total > td.ng-pivot-geo {
  background-color: var(--color-bg-surface) !important;
}
table.ng-pivot-table.table.dataTable > tbody > tr.ng-pivot-province-total > td.ng-pivot-cycle--odd,
table.ng-pivot-table.table.dataTable > tbody > tr.ng-pivot-province-total > td.ng-pivot-province-summary.ng-pivot-cycle--odd,
table.ng-pivot-table.table.dataTable > tbody > tr.ng-pivot-province-total > td.ng-pivot-total {
  background-color: var(--color-bg-raised) !important;
}
table.ng-pivot-table.table.dataTable > tbody > tr.ng-pivot-province-total > td.ng-pivot-cycle--even,
table.ng-pivot-table.table.dataTable > tbody > tr.ng-pivot-province-total > td.ng-pivot-province-summary.ng-pivot-cycle--even {
  background-color: var(--color-bg-surface) !important;
}
table.ng-pivot-table.table.dataTable > tbody > tr.ng-pivot-province-total > td.ng-pivot-total--lead {
  border-left: 2px solid var(--color-border-strong) !important;
}
/* Footer — flat summary band, no per-cycle tinting. */
table.ng-pivot-table.table.dataTable > tfoot > tr > td {
  background-color: var(--color-bg-sunken) !important;
}
table.ng-pivot-table.table.dataTable > tfoot > tr > td.ng-pivot-total {
  font-weight: var(--font-weight-semibold);
}
table.ng-pivot-table.table.dataTable > tfoot > tr > td.ng-pivot-total--lead {
  border-left: 2px solid var(--color-border-strong) !important;
}

/* ---------- UPDATE ACTIVITY REPORT (issue 887) ----------
   The update report has to explain itself more than the other report screens:
   its headline number depends on which of four dates it counted by, so the
   basis hint and the "this basis narrows the population" notice are part of the
   data, not decoration. */

/* Explanatory line under a control (what the chosen date basis means). */
.ng-report-hint {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-snug);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}

/* Same line used as a caption *under* a row of stat cards rather than under a
   control: pulls up into the gap the card row leaves below itself, so the hint
   reads as belonging to the tiles above it instead of floating between rows. */
.ng-report-hint--under-stats {
  margin-top: calc(var(--space-2) * -1);
}

/* Shown when the chosen basis silently excludes rows (any basis except
   "submitted" — those columns are nullable). Without it, a narrower total
   reads as missing data rather than as a deliberate filter. */
.ng-report-notice {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-snug);
  color: var(--color-warning-700);
  background: var(--color-warning-50);
  border-left: var(--border-width-emphasis) solid var(--color-warning-500);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-3);
}

/* Status / category breakdowns beside the stat strip. */
.ng-report-breakdowns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-bottom: var(--space-4);
}
.ng-report-breakdown { flex: 1 1 260px; min-width: 0; }
.ng-report-breakdown__title {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
}
.ng-report-breakdown__list { list-style: none; margin: 0; padding: 0; }
.ng-report-breakdown__list > li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-1) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-default);
  border-bottom: 1px solid var(--color-border-subtle);
}
.ng-report-breakdown__list > li:last-child { border-bottom: 0; }
.ng-report-breakdown__count {
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* Sub-label on a stat tile: distinguishes "updates" from "records changed",
   which are different numbers and the whole point of showing both. */
.ng-report-stat__hint {
  display: block;
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-snug);
  color: var(--color-text-faint);
  margin-top: var(--space-1);
}