/* ============================================================
 * NextGen MIS — Cards
 * ------------------------------------------------------------
 * Turns Metronic portlets and Bootstrap-3 panels into clean,
 * contemporary cards that float on the tinted app background:
 *   - rounded corners, subtle shadow, hairline border
 *   - consistent light card headers (no heavy green bars)
 *   - removes the single big white box behind filter + table
 * ============================================================ */

/* ---------- PORTLET → CARD ---------- */
.portlet,
.portlet.light,
.portlet.box,
.portlet.bordered,
.portlet.light.bordered {
  background: var(--color-bg-surface) !important;
  /* ONE consistent card outline everywhere. Metronic's .bordered uses a cooler
     #e7ecf1 stroke (and out-specifies .portlet.light) — list it here so EVERY
     internal card matches the Beneficiary Registry card's --card-border. */
  border: var(--card-border) !important;
  border-top: var(--card-border) !important;     /* kill Metronic coloured top border on .box */
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow);
  padding: var(--content-padding) !important;        /* 30px — matches the container */
  margin-bottom: var(--content-padding) !important;  /* consistent gap between cards */
}
/* No trailing gap below the last card in a pane (avoids the "large bottom" space) */
.page-content > .portlet:last-child,
.page-content > .row:last-child,
.page-content > .row:last-child > [class*="col-"] > .portlet:last-child {
  margin-bottom: 0 !important;
}

/* Portlet title row → clean card header */
.portlet > .portlet-title,
.portlet.light > .portlet-title,
.portlet.box > .portlet-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 0 !important;
  margin: 0 0 var(--space-4) 0 !important;
  padding: 0 0 var(--space-3) 0 !important;
  border-bottom: 1px solid var(--color-border-subtle) !important;
  background: transparent !important;     /* remove any coloured header bar */
  color: var(--color-text-strong) !important;
}

/* Metronic puts a clearfix ::before/::after on .portlet-title; inside our flex
   title they act as flex items, so justify-content:space-between CENTRED a lone
   caption (e.g. the dashboard "Beneficiary Status" chart title). Remove them so
   captions sit flush-left and any actions/tabs still push to the right. */
.portlet > .portlet-title::before,
.portlet > .portlet-title::after,
.portlet.light > .portlet-title::before,
.portlet.light > .portlet-title::after,
.portlet.box > .portlet-title::before,
.portlet.box > .portlet-title::after {
  content: none !important;
  display: none !important;
}

/* ---------- DASHBOARD STAT CARDS (.widget-thumb) ----------
   Align the dashboard stat tiles with the Beneficiary Registry card style:
   token radius/shadow/border instead of the inline #ddd 10px box, and the
   Figtree display font instead of the (removed-from-screen) Century Gothic. */
.widget-thumb {
  border-radius: var(--card-radius) !important;
  border: var(--card-border) !important;
  box-shadow: var(--card-shadow) !important;
  background: var(--color-bg-surface) !important;
  padding: var(--space-5) !important;
  text-align: left !important;            /* title + stat read as a left-aligned column */
}
.widget-thumb .widget-thumb-heading {
  font-family: var(--font-family-display) !important;
  letter-spacing: 0 !important;
  font-size: var(--font-size-lg) !important;   /* a touch larger (was md/14.5px) */
  font-weight: var(--font-weight-semibold) !important;
  line-height: var(--line-height-snug) !important;
  color: var(--color-text-muted) !important;
  text-align: left !important;
  margin: 0 0 var(--space-2) 0 !important;
}
.widget-thumb .widget-thumb-body-stat {
  display: block;                         /* so refinements.js can fit-to-width */
  white-space: nowrap;                    /* "K 5,177,760.00" stays one line, never wraps the K off */
  font-family: var(--font-family-display) !important;
  font-weight: var(--font-weight-bold) !important;
  font-size: 34px !important;             /* MAX headline size; refinements.js shrinks long currency to fit */
  line-height: 1.1 !important;
  color: var(--color-text-strong) !important;
}

/* ---------- DASHBOARD CARDS (.dashboard-stat-card / .dashboard-chart-card) ----------
   The ECharts dashboards (applicant + beneficiary) use these classes, not
   .widget-thumb. Bring them onto the flat design-system card — they shipped as a
   bespoke inline <style> with a faint drop shadow, #fff and a 6px radius; moved
   out of pages/dashboard/partials/style.blade.php into the refinements layer. */
.dashboard-stat-card,
.dashboard-chart-card {
  background: var(--color-bg-surface);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);            /* flat — no drop shadow */
  padding: var(--space-5);
  height: 100%;
}

.dashboard-stat-card .stat-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-3);
  row-gap: 2px;
  align-items: start;
  margin-bottom: var(--space-3);
}
.dashboard-chart-card .chart-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.dashboard-stat-card .stat-title {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
  color: var(--color-text-muted);
}
.dashboard-stat-card .stat-sublabel {
  grid-column: 1 / -1;
  grid-row: 2;
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-faint);
}
.dashboard-stat-card .stat-badge {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  background: var(--color-bg-sunken);
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  padding: 3px var(--space-2);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.dashboard-stat-card .stat-value {
  font-family: var(--font-family-display);
  font-size: 30px;
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  color: var(--color-text-strong);
}

/* Graduation-forecast KPI cards double as the window selector: clickable, with
   the active window mirrored by the tabs below them. */
.forecast-stat-card {
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.forecast-stat-card:hover {
  border-color: var(--color-border-strong);
}
.forecast-stat-card.is-active {
  border-color: var(--color-brand-secondary);
  background: var(--color-brand-secondary-soft);
}
.dashboard-chart-card .chart-title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-strong);
  margin: 0 0 2px 0;
}
.dashboard-chart-card .chart-subtitle {
  font-size: var(--font-size-xs);
  color: var(--color-text-faint);
}
.dashboard-chart-card .chart-body { min-height: 240px; }
/* .dashboard-chart-card--fit — for a card with no fixed-height chart canvas
   (e.g. the .ng-breakdown list): drop the 240px floor so the card's height
   tracks its content instead of reserving space for an ECharts canvas. */
.dashboard-chart-card--fit .chart-body { min-height: 0; }

/* ---------- RANKED BREAKDOWN LIST (.ng-breakdown) ----------
   A lightweight horizontal-bar list for "X by category" inside a
   .dashboard-chart-card — the flat, no-charting-library counterpart to the
   ECharts cards. Used by the enrolment-batch dashboard (eligible applicants by
   province). Each row is a grid: label | proportional track | value. The value
   is real text beside the bar, so the track can be aria-hidden and the figure
   still reaches assistive tech. */
.ng-breakdown__row {
  display: grid;
  grid-template-columns: minmax(96px, 168px) 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}
.ng-breakdown__row + .ng-breakdown__row { border-top: 1px solid var(--color-stroke-subtle); }
.ng-breakdown__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-sm);
  color: var(--color-text-default);
}
.ng-breakdown__track {
  position: relative;
  height: 8px;
  border-radius: 999px;                 /* pill — a shape constant, not a token dup */
  background: var(--color-bg-sunken);
  overflow: hidden;
}
.ng-breakdown__bar {
  display: block;
  height: 100%;
  min-width: 3px;                        /* a non-zero count is always visible */
  border-radius: inherit;
  background: var(--color-brand-secondary);
  transition: width var(--motion-fast) var(--ease-standard);
}
.ng-breakdown__value {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-md);
  color: var(--color-text-strong);
  font-variant-numeric: tabular-nums;    /* figures align across rows */
}
.ng-breakdown__empty {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.ng-breakdown__empty > i { color: var(--color-brand-secondary); }

/* Dashboard chart wells — a FIXED ASPECT RATIO box so the chart can never
   squash: width comes from the column, height follows the ratio, and Chart.js
   (maintainAspectRatio:false) fills the box. Columns wrap responsively. */
.chart-container {
  position: relative !important;
  width: 100%;
  height: 320px;            /* fixed so every chart card matches height (no excess space) */
}
.chart-container > canvas { width: 100% !important; height: 100% !important; }
/* Pie wells are a centred SQUARE (same height as the others) so the pie is a
   circle, not stretched across the wide card. */
.chart-container:has(> canvas[id^="pie"]) {
  width: 320px;
  max-width: 100%;
  margin-inline: auto;
}
@media (max-width: 767px) {
  .chart-container { height: 280px; }
  .chart-container:has(> canvas[id^="pie"]) { width: 280px; }
}

/* ---------- DASHBOARD ROW LAYOUT (equal heights + responsive) ----------
   Bootstrap-3 columns are floated, so cards in a row don't match height. Flex
   the dashboard rows so columns stretch to the tallest and the cards fill them.
   Scoped via :has() to rows that actually hold dashboard cards (charts or stat
   tiles) so other pages are untouched.

   The side-by-side flex is gated to md+ (≥992px) — the breakpoint where
   Bootstrap's col-md-* place cards in a row. Below md the columns stack (or go
   2-up via col-sm-*) full-width; flexing them there would hold a col-md-8 at
   content width and leave dead space beside it. The 32px vertical row gap
   (column margin-bottom) is kept at every width so stacked cards stay separated.

   Gutter math (md+) so the gap between adjacent cards matches the outer page
   padding (var(--content-padding) = 32px): row -16px each side + column +16px
   each side = 32px between adjacent card edges. Bootstrap's default 15/15
   gutters are kept on non-dashboard pages — these overrides are scoped via :has(). */
.page-content .row:has(.chart-container) > [class*="col-"],
.page-content .row:has(.widget-thumb) > [class*="col-"],
.page-content .row:has(.dashboard-stat-card) > [class*="col-"],
.page-content .row:has(.ng-pipeline-stage) > [class*="col-"],
.page-content .row:has(.dashboard-chart-card) > [class*="col-"] {
  margin-bottom: var(--space-8);   /* 32px row gap — every width */
}
.page-content .row:has(.dashboard-stat-card) > [class*="col-"] {
  min-width: 260px;
}

@media (min-width: 992px) {
  .page-content .row:has(.chart-container),
  .page-content .row:has(.widget-thumb),
  .page-content .row:has(.dashboard-stat-card),
  .page-content .row:has(.ng-pipeline-stage),
  .page-content .row:has(.dashboard-chart-card) {
    display: flex;
    flex-wrap: wrap;
    margin-left:  calc(-1 * var(--space-4)) !important;
    margin-right: calc(-1 * var(--space-4)) !important;
  }
  .page-content .row:has(.chart-container) > [class*="col-"],
  .page-content .row:has(.widget-thumb) > [class*="col-"],
  .page-content .row:has(.dashboard-stat-card) > [class*="col-"],
  .page-content .row:has(.ng-pipeline-stage) > [class*="col-"],
  .page-content .row:has(.dashboard-chart-card) > [class*="col-"] {
    display: flex;
    flex-direction: column;
    padding-left:  var(--space-4) !important;
    padding-right: var(--space-4) !important;
  }
  .page-content .row:has(.chart-container) > [class*="col-"] > .portlet,
  .page-content .row:has(.widget-thumb) > [class*="col-"] > .widget-thumb,
  .page-content .row:has(.dashboard-stat-card) > [class*="col-"] > .dashboard-stat-card,
  .page-content .row:has(.ng-pipeline-stage) > [class*="col-"] > .ng-pipeline-stage,
  .page-content .row:has(.dashboard-chart-card) > [class*="col-"] > .dashboard-chart-card {
    flex: 1 1 auto;                /* fill the stretched column → equal heights */
    margin-bottom: 0 !important;
  }
}

/* Portlet body sits flush inside the card padding */
.portlet > .portlet-body,
.portlet.light > .portlet-body {
  padding: 0 !important;
  background: transparent !important;
}

/* Portlet actions (buttons/toolbar in the header) align right */
.portlet > .portlet-title > .actions,
.portlet.light > .portlet-title > .actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
}

/* Colour-variant portlet boxes (green/blue/red headers) → neutral card header.
   Covers both Metronic spellings: `.portlet.box.blue` and the hyphenated
   `.portlet-blue` used on the beneficiary detail page. */
.portlet.box.green > .portlet-title,
.portlet.box.blue > .portlet-title,
.portlet.box.red > .portlet-title,
.portlet.box.yellow > .portlet-title,
.portlet-green > .portlet-title,
.portlet-blue > .portlet-title,
.portlet-red > .portlet-title,
.portlet-yellow > .portlet-title,
.portlet.green,
.portlet.blue,
.portlet.red,
.portlet-green,
.portlet-blue,
.portlet-red,
.portlet-yellow {
  background: var(--color-bg-surface) !important;
  border-color: var(--color-border-subtle) !important;
}
.portlet.box.green > .portlet-title > .caption,
.portlet.box.blue > .portlet-title > .caption,
.portlet.box.red > .portlet-title > .caption,
.portlet-green > .portlet-title > .caption,
.portlet-blue > .portlet-title > .caption,
.portlet-red > .portlet-title > .caption,
.portlet-yellow > .portlet-title > .caption {
  color: var(--color-text-strong) !important;
}

/* Portlet caption text */
.portlet > .portlet-title > .caption,
.portlet.light > .portlet-title > .caption,
.portlet > .portlet-title > .caption > .caption-subject {
  font-family: var(--font-family-display) !important;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-lg) !important;
  letter-spacing: 0;
  color: var(--color-text-strong) !important;
  padding: 0;
}
.portlet > .portlet-title > .caption > i {
  color: var(--color-brand-secondary);
  font-size: var(--font-size-md);
  margin-right: var(--space-2);
}
/* Red pill rendered after a portlet caption to flag a wholly new or removed
   record section (update review). Same visual language as the per-field
   .ng-detail-grid__tag — section-level instead of field-level, so a brand-new
   record isn't drowned in one highlight per field. */
.ng-caption-tag {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 1px 7px;
  border-radius: var(--radius-full);
  background: var(--color-feedback-danger);
  color: var(--color-text-inverse);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  line-height: 1.5;
  vertical-align: middle;
}

/* ---------- BOOTSTRAP-3 PANEL → CARD (remove heavy green heading) ---------- */
.panel,
.panel-default {
  background: var(--color-bg-surface) !important;
  border: var(--card-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow);
  margin-bottom: var(--space-5);
}

.panel-default > .panel-heading,
.panel > .panel-heading {
  background: transparent !important;          /* was sage/#617e6c green */
  color: var(--color-text-strong) !important;
  border-bottom: 1px solid var(--color-border-subtle) !important;
  border-top-left-radius: var(--card-radius);
  border-top-right-radius: var(--card-radius);
  padding: var(--space-4) var(--space-5) !important;
  font-family: var(--font-family-display) !important;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-md);
}
.panel-default > .panel-heading a,
.panel > .panel-heading a { color: var(--color-text-strong) !important; }

.panel-body { padding: var(--space-5) !important; }

.panel-default > .panel-footer,
.panel > .panel-footer {
  background: var(--color-bg-raised) !important;
  border-top: 1px solid var(--color-border-subtle) !important;
  border-bottom-left-radius: var(--card-radius);
  border-bottom-right-radius: var(--card-radius);
}

/* ---------- NOTE / WELL → soft surface ---------- */
.note {
  border-radius: var(--radius-lg);
  border-width: 1px;
}
.well {
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: none;
}

/* ---------- NESTED PANELS → FLATTENED (no boxes-within-boxes) ---------- */
/* List pages wrap a filter <div class="panel panel-default"> AND the table inside
   one portlet card. Flatten the inner panel so the filter integrates cleanly into
   the single card above the table — no nested box, no heavy heading. */
.portlet .panel,
.portlet .panel-default,
.portlet-body .panel,
.portlet-body .panel-default {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 0 var(--space-4) 0 !important;
}
.portlet .panel > .panel-heading,
.portlet-body .panel > .panel-heading {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--color-border-subtle) !important;
  padding: 0 0 var(--space-2) 0 !important;
  margin-bottom: var(--space-3) !important;
  font-family: var(--font-family-display) !important;
  font-size: var(--font-size-xs) !important;
  font-weight: var(--font-weight-semibold) !important;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-uppercase);
  color: var(--color-text-muted) !important;
}
.portlet .panel > .panel-body,
.portlet-body .panel > .panel-body {
  padding: 0 !important;
  background: transparent !important;
}

/* ---------- BALANCED FILTER BAR (label-on-top) ----------
   #form-filter is the shared filter-form id across 12 list pages. Turn the tall
   stacked form-horizontal into a clean wrapping bar: each field is a labelled
   column (label above control), columns flow left-to-right and wrap. Much more
   balanced + far shallower. Data-entry forms don't use this id, so untouched. */
#form-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-3);   /* tighter — more fields per line */
}
#form-filter > .form-group {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 2px var(--space-2);
  margin: 0 !important;
}
#form-filter .control-label {
  flex: 1 1 100%;                /* label sits on its own line above the field(s) */
  width: auto !important;
  float: none !important;
  margin: 0 0 3px 0 !important;
  padding: 0 !important;
  text-align: left !important;
  font-size: var(--font-size-xs) !important;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted) !important;
}
#form-filter > .form-group > div[class*="col-"] {
  width: 160px !important;              /* compact, consistent field width */
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
#form-filter .form-control { width: 100% !important; }
#form-filter .select2-container { width: 100% !important; min-width: 150px; }

/* Search + Reset: a purposeful action group anchored to the right of the bar,
   aligned to the bottom of the field row (no longer floating). */
#form-filter .form-actions {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  margin: 0 0 0 auto !important;        /* push to the far right */
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  align-self: flex-end;
}
#form-filter .form-actions .row {
  display: flex;
  gap: var(--space-2);
  margin: 0 !important;
}
#form-filter .form-actions div[class*="col-"] {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  gap: var(--space-2);
}
/* Both action buttons: drop legacy .mr-5 spacing + the inline width:80px, and
   match the 40px field/button height so the Search (green) + Reset (outline)
   pair reads as a balanced group, consistent with the Beneficiary Registry. */
#form-filter .form-actions .btn {
  margin: 0 !important;
  width: auto !important;
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* ---------- REPORT FILTERS (sectioned form-horizontal) ----------
   The report screens reuse #form-filter but as a NATIVE Bootstrap form-horizontal
   grid (label.col-md-2 + field.col-md-3, grouped in a .form-body with WHEN/WHERE/
   WHO section titles). The flat-list balanced-bar rules above don't suit it and
   were stripping the label's column (width:auto/float:none) so labels overlapped
   the fields. Detect the report form via its .form-body and restore the native
   grid; field controls keep the global 40px styling, so they read consistently. */
#form-filter:has(.form-body) {
  display: block !important;          /* undo the balanced-bar flex */
}
#form-filter:has(.form-body) .control-label {
  flex: 0 1 auto !important;
  float: left !important;
  width: 16.6666667% !important;      /* col-md-2 */
  text-align: right !important;
  margin: 0 !important;
  padding: 10px 15px 0 0 !important;  /* vertical-align with the 40px field */
  font-size: var(--font-size-sm) !important;
  font-weight: var(--font-weight-medium) !important;
  color: var(--color-text-default) !important;
}
#form-filter:has(.form-body) .form-group {
  margin-bottom: var(--space-3);
}
/* Stack label above field on smaller screens (Bootstrap md breakpoint). */
@media (max-width: 991px) {
  #form-filter:has(.form-body) .control-label {
    float: none !important;
    width: 100% !important;
    text-align: left !important;
    padding: 0 0 4px 0 !important;
  }
}

/* ---------- CLEAN FILTER BAR (.ng-filter markup) ----------
   Controlled flex layout — each field is a labelled column (label on top),
   columns flow left→right and wrap; actions sit right after the fields. */
.ng-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-4);
}
.ng-filter__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ng-filter__field > .control-label {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  float: none !important;
  text-align: left !important;
  font-size: var(--font-size-xs) !important;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted) !important;
}
.ng-filter__field > .form-control {
  width: 210px !important;
}
.ng-filter__group {
  display: flex;
  gap: var(--space-2);
}
.ng-filter__group > .form-control,
.ng-filter__group > .select2-container,
/* out-specify the legacy `#form-filter .select2-container { width:100% }` that the
   .ng-filter markup also inherits — wider so "Select a province"/"Select a
   district" placeholders aren't clipped. */
#form-filter .ng-filter__group > .form-control,
#form-filter .ng-filter__group > .select2-container {
  width: 188px !important;
}
.ng-filter__actions {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
}

/* Primary "Search" action — strong brand-green button with a search icon */
#filter-submit,
.btn#filter-submit {
  display: inline-flex !important;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-4) !important;
  background-color: var(--color-brand-secondary-hover) !important;  /* darker green resting (AA) */
  border: 1px solid var(--color-brand-secondary-hover) !important;
  color: #fff !important;
  font-family: var(--font-family-display) !important;
  font-weight: var(--font-weight-semibold) !important;
  border-radius: var(--radius-md) !important;
}
#filter-submit::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url(/img/icons/phosphor/magnifying-glass.svg) center / contain no-repeat;
          mask: url(/img/icons/phosphor/magnifying-glass.svg) center / contain no-repeat;
}
#filter-submit:hover,
#filter-submit:focus {
  background-color: var(--color-brand-secondary-active) !important;   /* sage-800 darker hover, white ~9:1 (AA) */
  border-color: var(--color-brand-secondary-active) !important;
  color: #fff !important;
}
/* Reset = quiet secondary */
#filter-reset,
.btn#filter-reset {
  min-height: 40px;
  padding: 0 var(--space-4) !important;
  display: inline-flex !important;
  align-items: center;
  background-color: transparent !important;
  border: 1px solid var(--color-border-default) !important;
  color: var(--color-text-default) !important;
  border-radius: var(--radius-md) !important;
}
#filter-reset:hover,
#filter-reset:focus {
  background-color: var(--color-bg-sunken) !important;
  border-color: var(--color-border-strong) !important;
  color: var(--color-text-strong) !important;
}

/* ---------- COLLAPSIBLE FILTER PANEL ---------- */
.portlet .panel > .panel-heading.ng-collapsible {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  user-select: none;
}
/* Show/Hide toggle (label set by refinements.js + chevron ::after) reads as a
   single quiet control pinned to the right of the heading. The label and
   chevron share one muted treatment and light up together on hover/focus. */
.ng-collapse-label {
  margin-left: auto;
  margin-right: calc(-1 * var(--space-1));   /* tighten the gap to the chevron */
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-muted);
  transition: color var(--motion-fast) var(--ease-standard);
}
.portlet .panel > .panel-heading.ng-collapsible::after {
  content: "";
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  background-color: var(--color-text-muted);
  -webkit-mask: url(/img/icons/phosphor/caret-down.svg) center / contain no-repeat;
          mask: url(/img/icons/phosphor/caret-down.svg) center / contain no-repeat;
  transition: transform var(--motion-fast) var(--ease-standard),
              background-color var(--motion-fast) var(--ease-standard);
}
.portlet .panel.ng-collapsed > .panel-heading.ng-collapsible::after {
  transform: rotate(-90deg);
}
/* Hover / keyboard focus: the whole heading reads as interactive, label +
   chevron shift to brand. */
.portlet .panel > .panel-heading.ng-collapsible:hover,
.portlet .panel > .panel-heading.ng-collapsible:focus-visible {
  background-color: var(--color-bg-raised);
}
.portlet .panel > .panel-heading.ng-collapsible:hover .ng-collapse-label,
.portlet .panel > .panel-heading.ng-collapsible:focus-visible .ng-collapse-label {
  color: var(--color-brand-secondary-hover);   /* brand green (was navy) */
}
.portlet .panel > .panel-heading.ng-collapsible:hover::after,
.portlet .panel > .panel-heading.ng-collapsible:focus-visible::after {
  background-color: var(--color-brand-secondary-hover);   /* brand green (was navy) */
}
.portlet .panel.ng-collapsed > .panel-body,
.portlet .panel.ng-collapsed > .panel-footer {
  display: none !important;
}
/* Collapsed filter: drop the heading's divider line so the panel is condensed. */
.portlet .panel.ng-collapsed > .panel-heading.ng-collapsible {
  border-bottom: none !important;
}

/* Boxless search/filter — integrated directly above the table (no card chrome) */
.ng-search-panel,
.portlet .panel.ng-search-panel {
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 0 var(--space-3) 0 !important;
}
.ng-search-panel > .panel-heading {
  border-bottom: none !important;
  padding: 0 0 var(--space-3) 0 !important;
  border-radius: 0 !important;
}
.ng-search-panel > .panel-body { padding: 0 !important; }
.ng-search-panel.ng-collapsed > .panel-heading { padding-bottom: 0 !important; }

/* Active-filter count chip in the filter heading ("N filters applied") */
.ng-filter-count {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  margin-left: var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-brand-secondary-hover);   /* sage-700: white text ~6.5:1 (was sage-600 = 4.42, just under AA) */
  color: #fff;
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.01em;
  line-height: 1.4;
  white-space: nowrap;
}
/* × on the lozenge to reset all filters */
.ng-filter-count__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: var(--space-2);
  margin-right: -2px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
  transition: background var(--motion-fast) var(--ease-standard), opacity var(--motion-fast) var(--ease-standard);
}
.ng-filter-count__clear:hover { background: rgba(255, 255, 255, 0.25); opacity: 1; }

/* ---------- LIST TOOLBAR (primary "Add" + filter row on ONE line) ----------
   Used on list screens (e.g. Updates) so the primary action sits left and the
   filter fields + Search/Reset sit inline to the right (no more wrapped second
   row). Replicable: wrap the toolbar in .ng-list-toolbar with an add form and a
   .ng-list-toolbar__filter form. */
.ng-list-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.ng-list-toolbar > .form-inline { margin: 0; }
.ng-list-toolbar__filter {
  margin-left: auto;            /* push the filter group to the right */
  float: none !important;       /* defeat legacy .pull-right */
}

/* Generic filter form-inline tidy (legacy list pages that haven't moved to
   .ng-filter yet — e.g. List of Applicants). Lay the controls out in a single
   consistent flex row with even gaps and aligned heights instead of the old
   float/pull-right scatter, so they read like the Beneficiary Registry. */
.portlet .form-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}
.portlet .form-inline.pull-right {
  float: none !important;
  justify-content: flex-end;
}
.portlet .form-inline .form-group {
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
/* Even, predictable control widths in legacy filters */
.portlet .form-inline .form-control,
.portlet .form-inline .select2-container {
  width: auto !important;
  min-width: 180px;
}

/* ---------- LIST-FILTER PANEL — FOOTER ----------
   partials/list-filter-panel-styles.blade.php sets a banded grey fill +
   border-top on .panel-footer that reads as a separate region under the
   form. Strip the fill and the divider so the actions row sits as a
   continuation of the form, and close the gap to the fields above.
   Force flex right-alignment so the rightmost button's right edge lands
   pixel-flush with the rightmost field's right edge — the partial's
   text-align: right leaves inline-block whitespace artifacts that visibly
   shy the buttons a few pixels inboard of the field column. */
.list-filter-panel .panel-footer {
  background: transparent !important;
  border-top: 0 !important;
  /* Match panel-body's horizontal padding so the rightmost button's right edge
     lands pixel-flush with the rightmost field's right edge — standalone
     panels keep var(--space-5) here to match panel-body's var(--space-5)
     padding. The override below zeroes both for the nested-in-portlet case. */
  padding: 0 var(--space-5) var(--space-5) var(--space-5) !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: var(--space-2);
}
/* Nested-in-portlet: the panel-body padding gets zeroed by the high-specificity
   nested-panel rule (lines 281-285), so the rightmost field's visible edge sits
   at the panel's inner edge. Mirror it on the footer here so buttons stay flush
   with the field column right edge in that context too. */
.portlet .list-filter-panel > .panel-footer,
.portlet-body .list-filter-panel > .panel-footer {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.list-filter-panel .list-filter-footer .btn + .btn {
  margin-left: 0 !important;  /* the flex container gap above owns inter-button spacing now */
}

/* The legacy #form-filter rules below (lines ~292+) turn the form into a
   flex-wrap container — that was the OLD filter pattern (pre-develop's
   .list-filter-panel refactor) where fields flowed left-to-right as a
   balanced bar. The new .list-filter-panel pattern REUSES the same
   #form-filter id but wants a vanilla block-level form so the inner
   Bootstrap-3 .row + .col-md-4 grid flows to the panel's full width.
   Strip the legacy flex behaviour inside .list-filter-panel. */
.list-filter-panel #form-filter {
  display: block !important;
  gap: 0 !important;
}
.list-filter-panel #form-filter .select2-container {
  min-width: 0 !important;  /* legacy 150px floor would push cols wider than their grid share */
}

/* ============================================================
 * APPLICATION PIPELINE DASHBOARD (US-I1.1)
 * ------------------------------------------------------------
 * Server-rendered pipeline page: a GET filter bar, per-stage
 * cards, and a static stage-aging bar list. Built on the same
 * flat card language as .dashboard-stat-card; only the pieces
 * the existing dashboards don't have live here.
 * ============================================================ */

/* ---------- FILTER BAR ---------- */
.ng-pipeline-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  margin-bottom: var(--content-padding);
}
.ng-pipeline-filter__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.ng-pipeline-filter__field label {
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-uppercase);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.ng-pipeline-filter__field .form-control {
  min-width: 180px;
}
.ng-pipeline-filter__reset {
  align-self: flex-end;
  padding: 7px 4px;
  font-size: var(--font-size-sm);
  color: var(--color-link);
}

/* ---------- PER-STAGE CARD ---------- */
.ng-pipeline-stage {
  position: relative;
  height: 100%;
  background: var(--color-bg-surface);
  border: var(--card-border);
  border-top: 3px solid var(--color-border-strong);
  border-radius: var(--card-radius);
  padding: var(--space-4);
  margin-bottom: var(--content-padding);
}
.ng-pipeline-stage__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}
.ng-pipeline-stage__heading {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-strong);
}
.ng-pipeline-stage__heading small {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-faint);
}
/* Time-scope chip (ALL-TIME / year) — mirrors .dashboard-stat-card .stat-badge. */
.ng-pipeline-stage__badge {
  flex: none;
  background: var(--color-bg-sunken);
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  padding: 3px var(--space-2);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.ng-pipeline-stage__count {
  margin-top: var(--space-2);
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-3xl);
  line-height: 1.1;
  color: var(--color-text-strong);
}
.ng-pipeline-stage__rows {
  margin-top: var(--space-3);
}
.ng-pipeline-stage__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  border-top: 1px solid var(--color-border-subtle);
  font-size: var(--font-size-sm);
}
.ng-pipeline-stage__k { color: var(--color-text-faint); }
.ng-pipeline-stage__v {
  font-family: var(--font-family-data);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-default);
}
.ng-pipeline-stage__v--ok   { color: var(--color-feedback-success); }
.ng-pipeline-stage__v--warn { color: var(--color-feedback-warning); }
.ng-pipeline-stage__v--bad  { color: var(--color-feedback-danger); }

/* Stage accents — top border keys each card to its pipeline stage. */
.ng-pipeline-stage--draft   { border-top-color: var(--color-neutral-400); }
.ng-pipeline-stage--submit  { border-top-color: var(--color-info-500); }
.ng-pipeline-stage--edit    { border-top-color: var(--color-warning-500); }
.ng-pipeline-stage--approve { border-top-color: var(--color-success-500); }
.ng-pipeline-stage--archive { border-top-color: var(--color-danger-500); }
/* Post-approval "Awaiting First Payment" card. It sits beyond the reg_status
   pipeline (payments-side), but renders like the other stage cards — a neutral
   top edge, no wash, no tag — so the strip reads as one uniform family. */
.ng-pipeline-stage--pay { border-top-color: var(--color-border-strong); }

/* ---------- STAGE AGING (static bars) ---------- */
.ng-pipeline-aging__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-2) 0;
}
.ng-pipeline-aging__lbl {
  flex: none;
  width: 96px;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.ng-pipeline-aging__track {
  flex: 1;
  height: 18px;
  background: var(--color-bg-sunken);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.ng-pipeline-aging__fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-sm);
}
.ng-pipeline-aging__val {
  flex: none;
  width: 72px;
  text-align: right;
  font-family: var(--font-family-data);
  font-size: var(--font-size-sm);
  color: var(--color-text-default);
}