/* =========================================
   HRFlex Dashboard Components
   Stats Cards & Filter Bar
   Complements hrflex.grid.css
   ========================================= */

/* ─── STATS PANEL (responsive grid) ─── */

.hr-stats-panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding-top: 12px;
  margin-bottom: 12px;
}

@media (max-width: 900px) {
  .hr-stats-panel {
    grid-template-columns: 1fr;
  }
}

/* Modifier for 4-card stat panels — keeps all cards on one row on desktop */
.hr-stats-panel--4col {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .hr-stats-panel--4col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .hr-stats-panel--4col {
    grid-template-columns: 1fr;
  }
}

/* ─── STAT CARD ─── */

.hr-stat-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 20px 20px 24px;
  background: var(--hr-bg-white);
  border: 1px solid var(--hr-border-light);
  border-radius: 12px;
  box-shadow: 0 1px 2px var(--hr-shadow-sm);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}

.hr-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--hr-shadow-lg);
}

/* left accent bar */
  .hr-stat-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
  }

  .hr-stat-card--orange::before { background: var(--hr-warning); }
  .hr-stat-card--blue::before   { background: var(--hr-accent); }
  .hr-stat-card--slate::before  { background: var(--hr-text-muted); }

/* icon circle */
.hr-stat-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: var(--hr-text-xl);
}

  .hr-stat-card--orange .hr-stat-card__icon {
    background: var(--hr-warning-lighter);
    color: var(--hr-warning-hover);
  }

  .hr-stat-card--blue .hr-stat-card__icon {
    background: var(--hr-blue-100);
    color: var(--hr-accent-hover);
  }

  .hr-stat-card--slate .hr-stat-card__icon {
    background: var(--hr-bg-subtle);
    color: var(--hr-text-body);
  }

/* card body. Top-aligned while the icon stays centred: the cards in a row share one
   height, so a card whose description fits on one line, beside one that wraps to two,
   centred its label and figure 8px lower than its neighbours' (Travel & Expense
   Dashboard "History", 2026-10-22). Cards whose text runs the same height do not move. */
.hr-stat-card__body {
  flex: 1;
  min-width: 0;
  align-self: flex-start;
}

.hr-stat-card__label {
  font-size: var(--hr-text-xs);
  font-weight: 600;
  color: var(--hr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.hr-stat-card__value {
  font-size: var(--hr-text-2xl);
  font-weight: 700;
  color: var(--hr-text-default);
  line-height: 1.2;
  margin-bottom: 2px;
}

  .hr-stat-card__value a {
    color: inherit;
    text-decoration: none;
  }

.hr-stat-card__desc {
  font-size: var(--hr-text-xs);
  color: var(--hr-text-subtle);
}

/* ─── FILTER BAR ─── */

.hr-filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  background: var(--hr-bg-surface);
  border: 1px solid var(--hr-border-light);
  border-radius: 0;
  margin-bottom: 12px;
  font-size: var(--hr-text-base);
}

.hr-filter-bar__group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
}

.hr-filter-bar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* ImageButton exports (input[type="image"]) in filter bars — constrain to
   match the 30px button height; opacity fade on hover instead of border/shadow
   since there is no button chrome to style. */
.hr-filter-bar input[type="image"] {
  height: 30px;
  width: auto;
  cursor: pointer;
  border-radius: 4px;
  opacity: 1;
  transition: opacity 0.15s ease;
  vertical-align: middle;
}

.hr-filter-bar input[type="image"]:hover {
  opacity: 0.8;
}

/* inputs & selects */
.hr-filter-bar__input,
.hr-filter-bar__select {
  height: 30px;
  padding: 0 8px;
  font-size: var(--hr-text-base);
  font-family: inherit;
  border: 1px solid var(--hr-border-light);
  border-radius: 4px;
  background: var(--hr-bg-white);
  color: var(--hr-text-default);
  outline: none;
  transition: border-color 0.15s ease;
  box-sizing: border-box;
}

  .hr-filter-bar__input:focus,
  .hr-filter-bar__select:focus {
    border-color: var(--hr-accent);
    box-shadow: 0 0 0 2px var(--hr-shadow-accent);
  }

/* Combobox-enhanced selects (hrflex.combobox.js wraps the <select> in a
   .hr-combobox span) must sit side by side like the native selects they
   replace. .hr-combobox defaults to width:100% for form-grid cells; inside the
   wrapping flex row of a filter bar that resolves to a full-width flex item, so
   every enhanced dropdown wrapped onto its own line. */
.hr-filter-bar .hr-combobox {
  width: auto;
  min-width: 170px;
  max-width: 260px;
}

/* The option PANEL is sized to the trigger — hrflex.combobox.js `_position` writes
   `panel.style.width = trigger rect width` — so the 170px floor above is also the width of the
   option list, and a long option wraps inside it. Measured 2026-09-11 on CourseLessons.aspx: the
   course list's longest title is 72 characters and rendered over THREE lines in a 170px panel,
   with the placeholder itself wrapping to two.

   Reach for this whenever the OPTIONS are long, not when the selected value is — the trigger
   ellipsises its value and never needed the room. `min-width` is what does the work here: the
   wrapper is `width: auto` around a `width: 100%` trigger whose content cannot push it, so it
   always resolves to its floor; `max-width` is restated only because min-width outranks an
   inherited max-width and leaving the 260px above would read as a contradiction.

   The modifier goes on the <select> in markup; `_build` carries it onto the wrapper. */
.hr-filter-bar .hr-combobox--wide {
  min-width: 360px;
  max-width: 420px;
}

/* The base .hr-filter-bar__input above sets NO width, so an input with no modifier
   falls back to the HTML default `size` — measured at 137px of content box. That is
   about 20 characters, and it is why a filter bar's search box was clipping its own
   placeholder on 17 screens: they all say something like "Search name, staff no, role,
   designation or group", which needs 290px. Reach for one of the three below whenever
   the placeholder is longer than roughly twenty characters. */

/* The filter bar's search box. One modifier rather than --wide on some and --xtrawide
   on others, because they are all the same control doing the same job, and a row of
   search boxes that are three different widths across the product looks like an
   accident.

   320px, not 300px: the widest placeholder in use measures 290px of TEXT, and
   min-width is a BORDER-box measurement here (box-sizing: border-box on the base
   rule), so 8px of padding each side and 1px of border each side come out of it.
   300px leaves 282px of content and still clipped by 8px — measured, not guessed. */
.hr-filter-bar__input--search {
  min-width: 320px;
}

.hr-filter-bar__input--wide {
  min-width: 240px;
}

.hr-filter-bar__input--xtrawide {
  min-width: 360px;
}

.hr-filter-bar__input--uppercase {
  text-transform: uppercase;
}

/* The other end of the scale from the three above. With no modifier an input falls back to the
   HTML default `size`, measured at 154px of border box — which is right for a name or a code and
   absurd for a two- or three-character number. A threshold, a percentage, a day count or an age
   holds at most four digits, and a bar full of 154px boxes spends horizontal room the rest of the
   filter needs. Width, not min-width: the point is to STOP it growing, and the three modifiers
   above deliberately use min-width because their job is the opposite. */
.hr-filter-bar__input--narrow {
  width: 84px;
  min-width: 0;
}

.hr-filter-bar__input::placeholder {
    color: var(--hr-text-placeholder);
  }

  .hr-filter-bar__input:disabled,
  .hr-filter-bar__select:disabled {
    background: var(--hr-bg-subtle);
    color: var(--hr-text-subtle);
    cursor: not-allowed;
    border-color: var(--hr-border);
  }

/* ─── MULTILINE (textarea) ─── */
/* Auto-applies when TextMode="MultiLine" renders a <textarea>
   with the hr-filter-bar__input class. Overrides the fixed
   single-line height and adds proper vertical padding so text
   does not hug the top edge.                                   */

textarea.hr-filter-bar__input {
  height: auto;
  min-height: 50px;
  padding: 8px 10px;
  line-height: 1.5;
  resize: vertical;
  box-sizing: border-box;
}

/* ─── FILE UPLOAD ─── */
/* Auto-applies to <input type="file"> with the hr-filter-bar__file
   class. Styles the native file input and its browse button to match
   the HRFlex design system while preserving full asp:FileUpload
   server-side functionality.                                        */

.hr-filter-bar__file {
  font-size: var(--hr-text-base);
  font-family: inherit;
  color: var(--hr-text-body);
  background: var(--hr-bg-white);
  border: 1px solid var(--hr-border-light);
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

  .hr-filter-bar__file:hover {
    border-color: var(--hr-accent);
  }

  .hr-filter-bar__file:focus {
    border-color: var(--hr-accent);
    box-shadow: 0 0 0 3px var(--hr-shadow-accent);
  }

  .hr-filter-bar__file::file-selector-button {
    font-size: var(--hr-text-base);
    font-family: inherit;
    font-weight: 500;
    color: var(--hr-text-secondary);
    background: var(--hr-bg-subtle);
    border: none;
    border-right: 1px solid var(--hr-border-light);
    padding: 6px 14px;
    margin-right: 10px;
    border-radius: 5px 0 0 5px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
  }

  .hr-filter-bar__file:hover::file-selector-button {
    background: var(--hr-accent);
    color: var(--hr-text-inverse);
    border-right-color: var(--hr-accent);
  }

/* ─── DATE-PICKER GROUP (input + calendar icon as one unit) ─── */

.hr-filter-bar__date-group {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

  .hr-filter-bar__date-group .hr-filter-bar__input--readonly {
    width: 110px;
    background: var(--hr-bg-subtle);
    color: var(--hr-text-body);
    cursor: default;
    border-right: none;
    border-radius: 4px 0 0 4px;
  }

    .hr-filter-bar__date-group .hr-filter-bar__input--readonly:focus {
      border-color: var(--hr-border-light);
      box-shadow: none;
    }

  .hr-filter-bar__date-group img {
    height: 30px;
    width: auto;
    padding: 4px 6px;
    background: var(--hr-bg-inset);
    border: 1px solid var(--hr-border-light);
    border-left: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.15s ease;
  }

    .hr-filter-bar__date-group img:hover {
      background: var(--hr-border-strong);
    }

  /* A PopCalendar with Enabled="False" renders its trigger span WITHOUT the onclick an enabled one carries
     (and its own greyed icon), so it looked and hovered exactly like a working button. Show it inert: the
     read-only box's own fill, no hover, a not-allowed cursor. Never opacity - the border is the IMG's own, so
     fading the image fades the border too and the button loses its outline beside an enabled one. */
  .hr-filter-bar__date-group span:not([onclick]) > img,
  .hr-filter-bar__date-group span:not([onclick]) > img:hover {
    cursor: not-allowed;
    background: var(--hr-bg-subtle);
  }

.hr-filter-bar__label {
  font-size: var(--hr-text-base);
  font-weight: 600;
  color: var(--hr-text-body);
  white-space: nowrap;
  line-height: 30px;
}

/* primary action button */
.hr-filter-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 14px;
  font-size: var(--hr-text-base);
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
  color: var(--hr-text-inverse);
  box-sizing: border-box;
}

  .hr-filter-bar__btn--primary {
    background: var(--hr-accent-hover);
  }

    .hr-filter-bar__btn--primary:hover {
      background: var(--hr-blue-700);
      color: var(--hr-text-inverse);
      text-decoration: none;
    }

/* Excel icon inside filter bar export buttons. The <img> is sized to align
   with the 12px icon glyphs used by Font Awesome in adjacent buttons. */
.hr-btn-excel-icon {
  height: 15px;
  width: auto;
  vertical-align: middle;
}

/* Icon-only square variant — for export/utility buttons where space is at a
   premium. Overrides the default horizontal padding so the button is exactly
   30×30px and the icon is centred. Always pair with hr-filter-bar__btn--outline. */
.hr-filter-bar__btn--icon-only {
  width: 30px;
  padding: 0;
  justify-content: center;
}

@media (max-width: 900px) {
  .hr-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .hr-filter-bar__group {
    flex-direction: column;
    align-items: stretch;
  }

  .hr-filter-bar__input,
  .hr-filter-bar__select {
    width: 100%;
  }

  .hr-filter-bar__actions {
    margin-left: 0;
    justify-content: flex-end;
  }
}

/* ─── EMPLOYEE SEARCH CONTROL (eSearch.ascx) ───────────────── */
/* Reusable employee search bar — renders flat flex items that
   integrate seamlessly inside hr-filter-bar__group containers.  */

/* When a filter-bar group contains eSearch, top-align all items
   so sibling buttons stay level with the search row instead of
   centering against eSearch's full column height (checkbox +
   validation rows can make it taller than 30px).               */
.hr-filter-bar__group:has(.hr-esearch) {
  align-items: flex-end;
}

.hr-esearch {
  display: flex;
  flex-direction: column;
}

.hr-esearch__row {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* Connected input group — fuses search input, criteria dropdown,
   and search button into a single toolbar-like control.           */
.hr-esearch__input-group {
  display: inline-flex;
  align-items: center;
}

  .hr-esearch__input-group > * {
    border-radius: 0;
    position: relative;
  }

  /* Merge borders — overlap by 1px so adjacent items share a border */
  .hr-esearch__input-group > *:not(:first-child) {
    margin-left: -1px;
  }

  .hr-esearch__input-group > :first-child {
    border-radius: 4px 0 0 4px;
  }

  .hr-esearch__input-group > :last-child {
    border-radius: 0 4px 4px 0;
  }

  /* Focused / hovered item shows on top so its border ring isn't hidden */
  .hr-esearch__input-group > *:focus,
  .hr-esearch__input-group > *:hover {
    z-index: 1;
  }

  /* Search button inherits standard --outline styling so it doesn't
     compete with page-level primary/outline buttons.                 */

.hr-esearch__results-wrap {
  position: relative;
}

.hr-esearch__results {
  min-width: 280px;
}

.hr-esearch__badge {
  position: absolute;
  top: -6px;
  right: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 8px;
  height: 16px;
  padding: 0 5px;
  font-size: var(--hr-text-2xs);
  font-weight: 700;
  color: var(--hr-text-inverse);
  background: var(--hr-accent);
  border-radius: 8px;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--hr-bg-surface);
  z-index: 1;
}

  .hr-esearch__badge:empty {
    display: none;
  }

.hr-esearch__checkbox {
  font-size: var(--hr-text-xs);
  color: var(--hr-gray-700);
  white-space: nowrap;
  margin-bottom: 4px;
  background: var(--hr-gray-100);
  border: 1px solid var(--hr-border-light);
  border-radius: 6px;
  padding: 3px 10px 3px 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
}

  .hr-esearch__checkbox:hover {
    background: var(--hr-border-light);
    border-color: var(--hr-gray-300);
  }

  .hr-esearch__checkbox input[type="checkbox"] {
    accent-color: var(--hr-accent);
    margin-right: 4px;
    vertical-align: middle;
    cursor: pointer;
  }

  .hr-esearch__checkbox label {
    cursor: pointer;
    line-height: 1;
  }

.hr-esearch__spinner {
  color: var(--hr-accent);
  font-size: var(--hr-text-lg);
}

/* Out of flow on purpose. .hr-filter-bar__group:has(.hr-esearch) aligns to flex-end, so a
   sibling button - the Go/Load control on 62 pages - bottom-aligns to .hr-esearch. Left in
   flow, this message grows that box by 17px the moment a search fails validation and drops the
   button out of line with the very row it belongs to (measured on RedeploymentAdmin and
   PayDetails, 2026-08-21: row 324-354, button 341-371). Transient feedback should not relayout
   the toolbar around it. It renders in the gap below the filter bar rather than pushing it
   open; nowrap keeps it on one line so it cannot grow into the content underneath. */
.hr-esearch {
  position: relative;
}

.hr-esearch__validation {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 2px;
  white-space: nowrap;
}

.hr-esearch__validation:empty {
  display: none;
}

.hr-esearch__error {
  font-size: var(--hr-text-xs);
  font-weight: 600;
  color: var(--hr-danger-hover);
}

/* ─── PAGE CONTENT WRAPPER ─── */

.hr-page-content {
  background: var(--hr-bg-surface);
  padding: 12px 16px 16px;
  min-height: calc(100vh - 200px);
}

/* ─── PAGE HEADER BAR (section divider) ─── */

.hr-page-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--hr-bg-subtle);
  border-left: 3px solid var(--hr-accent);
  border-radius: 4px;
  margin-top: 12px;
  font-size: var(--hr-text-base);
  font-weight: 600;
  color: var(--hr-text-default);
}

.hr-page-header__icon {
  color: var(--hr-accent);
  font-size: var(--hr-text-base);
}

.hr-page-header__title {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

/* ─── KPI CARD ─── */

.hr-kpi-card {
  background: var(--hr-bg-white);
  border: 1px solid var(--hr-bg-subtle);
  border-radius: 14px;
  padding: 18px;
  height: 140px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  margin-top: 8px;
}

.hr-kpi-card--green { border-left: 3px solid var(--hr-success); }
.hr-kpi-card--red   { border-left: 3px solid var(--hr-danger-hover); }
.hr-kpi-card--amber { border-left: 3px solid var(--hr-warning); }

.hr-kpi-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hr-kpi-card__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--hr-bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

  .hr-kpi-card__icon svg {
    width: 20px;
    height: 20px;
    color: var(--hr-text-body);
  }

.hr-kpi-card__label {
  font-size: var(--hr-text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--hr-text-muted);
}

.hr-kpi-card__value {
  font-size: var(--hr-text-2xl);
  font-weight: 700;
  color: var(--hr-text-strong);
}

/* ─── KPI TREND BADGE ─── */

.hr-kpi-trend {
  font-size: var(--hr-text-sm);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hr-kpi-trend--up {
  background: var(--hr-success-faint);
  color: var(--hr-success);
}

.hr-kpi-trend--down {
  background: var(--hr-danger-faint);
  color: var(--hr-danger-hover);
}

.hr-kpi-trend--neutral {
  background: var(--hr-bg-subtle);
  color: var(--hr-text-muted);
}

/* ─── MINI STAT ─── */

.hr-mini-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--hr-gray-50);
  border-radius: 12px;
  border: 1px solid var(--hr-bg-subtle);
}

.hr-mini-stat--exception {
  background: var(--hr-danger-lighter);
  border-color: var(--hr-danger-light);
}

.hr-mini-stat__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--hr-bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

  .hr-mini-stat__icon svg {
    width: 18px;
    height: 18px;
    color: var(--hr-text-body);
  }

.hr-mini-stat--exception .hr-mini-stat__icon {
  background: var(--hr-rose-100);
}

  .hr-mini-stat--exception .hr-mini-stat__icon svg {
    color: var(--hr-danger-hover);
  }

.hr-mini-stat__label {
  font-size: var(--hr-text-sm);
  font-weight: 600;
  color: var(--hr-text-muted);
  text-transform: uppercase;
}

.hr-mini-stat__value {
  font-size: var(--hr-text-xl);
  font-weight: 700;
  color: var(--hr-text-strong);
}

.hr-mini-stat--exception .hr-mini-stat__value {
  color: var(--hr-danger-dark);
}

/* ─── TAB BAR ───────────────────────────────────────────────────────────────
   Retired: .hr-tab-bar / .hr-tab-bar__item duplicated the underline-tab
   component below. All pages now use the single canonical tab system —
   .hrm-tabs__nav + .hrm-tab__btn / .hrm-tab__btn--active (hrflex.modal.css).
   ─────────────────────────────────────────────────────────────────────────── */

/* danger button variant */

.hr-filter-bar__btn--danger {
  background: var(--hr-danger-hover);
}

  .hr-filter-bar__btn--danger:hover {
    background: var(--hr-danger-dark);
    color: var(--hr-text-inverse);
    text-decoration: none;
  }

/* danger outline button variant */

.hr-filter-bar__btn--danger-outline {
  background: var(--hr-danger-lighter);
  border: 1px solid var(--hr-danger-border);
  color: var(--hr-danger-hover);
}

  .hr-filter-bar__btn--danger-outline:hover {
    background: var(--hr-danger-light);
    border-color: var(--hr-danger-hover);
    color: var(--hr-danger-dark);
    text-decoration: none;
  }

  .hr-filter-bar__btn--danger-outline:active {
    background: var(--hr-danger-light);
  }

/* outline button variant – secondary actions (e.g. LinkButtons with icon + text) */

/* The 30px partner to .hr-btn--muted, same values. RunPayrollDraft swaps its tranche
   button between enabled and disabled-looking states FROM CODE-BEHIND, and without this it
   had to drop to the 34px hr-btn scale to find a muted treatment - which put a 34px button
   next to a 30px input every time the period was mid-run. */
.hr-filter-bar__btn--muted {
  background: var(--hr-bg-subtle);
  color: var(--hr-text-muted);
  cursor: not-allowed;
}

  .hr-filter-bar__btn--muted:hover {
    background: var(--hr-bg-subtle);
  }

.hr-filter-bar__btn--outline {
  background: transparent;
  border: 1px solid var(--hr-border-strong);
  color: var(--hr-text-secondary);
}

  .hr-filter-bar__btn--outline:hover {
    background: var(--hr-bg-subtle);
    border-color: var(--hr-text-subtle);
    color: var(--hr-text-default);
    text-decoration: none;
  }

  .hr-filter-bar__btn--outline:active {
    background: var(--hr-bg-inset);
  }

  .hr-filter-bar__btn--outline i {
    font-size: var(--hr-text-xs);
  }

/* ─── REPORT HOME CARD GRID ─── */
/* Flattens the DataList <table> into a CSS grid of cards */

.hr-report-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 20px;
  border: none !important;
}

.hr-report-grid > tbody,
.hr-report-grid > tbody > tr {
  display: contents;
}

.hr-report-grid > tbody > tr > td {
  display: flex;
}

@media (max-width: 1024px) {
  .hr-report-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .hr-report-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── REPORT CARD ─── */

.hr-report-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: var(--hr-bg-white);
  border-radius: 12px;
  border: 1px solid var(--hr-border);
  box-shadow: 0 1px 3px var(--hr-shadow-xs), 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  cursor: pointer;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  animation: reportCardIn 0.4s ease both;
}

.hr-report-card:hover {
  transform: translateY(-2px);
  border-color: var(--hr-accent);
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* stagger entrance per row (DataList renders table cells sequentially) */
.hr-report-grid > tbody > tr > td:nth-child(1) .hr-report-card { animation-delay: 0s; }
.hr-report-grid > tbody > tr > td:nth-child(2) .hr-report-card { animation-delay: 0.06s; }
.hr-report-grid > tbody > tr > td:nth-child(3) .hr-report-card { animation-delay: 0.12s; }
.hr-report-grid > tbody > tr:nth-child(2) > td .hr-report-card { animation-delay: 0.15s; }
.hr-report-grid > tbody > tr:nth-child(3) > td .hr-report-card { animation-delay: 0.22s; }
.hr-report-grid > tbody > tr:nth-child(4) > td .hr-report-card { animation-delay: 0.28s; }
.hr-report-grid > tbody > tr:nth-child(5) > td .hr-report-card { animation-delay: 0.34s; }

@keyframes reportCardIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* icon container */
.hr-report-card__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--hr-accent-light), #dbeafe);
  border-radius: 12px;
  transition: transform 0.25s ease;
}

.hr-report-card:hover .hr-report-card__icon {
  transform: scale(1.08);
}

.hr-report-card__img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.hr-report-card__icon i {
  font-size: var(--hr-text-2xl);
  color: var(--hr-accent);
}

/* card body */
.hr-report-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.hr-report-card__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--hr-font-heading);
  font-size: var(--hr-text-lg);
  font-weight: 600;
  color: var(--hr-text-default) !important;
  text-decoration: none !important;
  margin-bottom: 6px;
  transition: color 0.2s ease;
}

/* navigation arrow — slides in on hover */
.hr-report-card__title::after {
  content: '\2192';
  display: inline-block;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  font-size: var(--hr-text-md);
}

.hr-report-card:hover .hr-report-card__title {
  color: var(--hr-accent) !important;
}

.hr-report-card:hover .hr-report-card__title::after {
  opacity: 1;
  transform: translateX(0);
}

.hr-report-card__desc {
  display: block;
  font-family: var(--hr-font-body);
  font-size: var(--hr-text-md);
  color: var(--hr-neutral-600);
  line-height: 1.6;
}

.hr-report-card__meta {
  display: block;
  font-family: var(--hr-font-body);
  font-size: var(--hr-text-sm);
  color: var(--hr-text-subtle);
  margin-top: auto;
  padding-top: 8px;
}

.hr-report-card__meta i {
  margin-right: 4px;
}

/* ─── UNIFIED ACTION BUTTONS (hr-btn) ──────────────────────
   Context-free button system for modals, toolbars, cards —
   anywhere that isn't the 30px-constrained filter bar.
   Variants mirror hr-filter-bar__btn--* so the palette is
   consistent app-wide.                                      */

/* data-icon, for controls that cannot hold an <i> icon child.

   TWO HALVES, because one mechanism cannot serve both element types:

   * <a> and <button> take the ::before rule below.
   * <input> -- which is what asp:Button renders -- is a REPLACED element and paints no
     generated content at all, so ::before shows nothing on one. getComputedStyle still
     reports the `content`, which is how 625 controls across 279 files carried a data-icon
     that never appeared. Verified in the browser 2026-08-19 on
     msPerformanceTracking/MyTasks.aspx: "Submit for Approval" (asp:Button, data-icon)
     rendered bare while "Add to List" (asp:LinkButton with an <i>) rendered its glyph.
     For those, initButtonIcons() in hrflex.page.js puts the codepoint in the input's own
     value and the font rule below resolves it. */
.hr-btn[data-icon]::before,
.hr-filter-bar__btn[data-icon]::before,
.hr-dropdown-menu__item[data-icon]::before,
.btn[data-icon]::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  margin-right: 6px;
  content: attr(data-icon);
}


.hr-btn[data-icon][data-icon-style="regular"]::before,
.hr-filter-bar__btn[data-icon][data-icon-style="regular"]::before,
.hr-dropdown-menu__item[data-icon][data-icon-style="regular"]::before,
.btn[data-icon][data-icon-style="regular"]::before {
  font-weight: 400;
}

.hr-btn[data-icon][data-icon-style="brands"]::before,
.hr-filter-bar__btn[data-icon][data-icon-style="brands"]::before,
.hr-dropdown-menu__item[data-icon][data-icon-style="brands"]::before,
.btn[data-icon][data-icon-style="brands"]::before {
  font-family: 'Font Awesome 5 Brands';
  font-weight: 400;
}

/* The <input> half of data-icon. Font Awesome carries no Latin glyphs, so naming it first
   sends the label on to the body face and resolves only the U+Fxxx codepoint that
   initButtonIcons() prepended to the value.

   No font-weight here on purpose: CSS font matching for a requested 600 -- which is what
   .hr-btn already asks for -- picks 900 in a family that ships 400 and 900, so the icon
   renders SOLID while the label keeps the weight the design system chose. Forcing 900
   would draw the same icon and make every button label heavy. The consequence is that
   data-icon-style="regular" also resolves to solid on an <input>; the outline face needs a
   400 request, which would lighten the label. */
input[data-icon] {
  font-family: 'Font Awesome 5 Free', var(--hr-font-heading), sans-serif;
}

input[data-icon][data-icon-style="brands"] {
  font-family: 'Font Awesome 5 Brands', var(--hr-font-heading), sans-serif;
}

/* An asp:Button used as a dropdown-menu row (e.g. BtnRecompute in PayGradeItems.aspx)
   renders <input type="submit">, which carries its own UA chrome and center-aligned
   text that .hr-dropdown-menu__item's flex/transparent rules don't fully reset. */
.hr-dropdown-menu__item[type="submit"] {
  -webkit-appearance: none;
  appearance: none;
  justify-content: flex-start;
  font-size: var(--hr-text-sm, 12px);
  text-align: left;
}

.hr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 20px;
  font-size: var(--hr-text-base);
  font-weight: 600;
  font-family: var(--hr-font-heading, inherit);
  color: var(--hr-text-inverse);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.15s ease;
}

  .hr-btn:hover {
    transform: translateY(-1px);
    text-decoration: none;
  }

  .hr-btn:active {
    transform: translateY(0);
  }

  .hr-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
  }

/* Primary — affirmative: approve, save, submit, view, load */
.hr-btn--primary {
  background: var(--hr-accent-hover);
}

  .hr-btn--primary:hover {
    background: var(--hr-blue-700);
    color: var(--hr-text-inverse);
  }

/* Danger — destructive: decline, reject, delete */
.hr-btn--danger {
  background: var(--hr-danger-hover);
}

  .hr-btn--danger:hover {
    background: var(--hr-danger-dark);
    color: var(--hr-text-inverse);
  }

/* Outline — secondary: cancel, export, back */
.hr-btn--outline {
  background: transparent;
  border: 1px solid var(--hr-border-strong);
  color: var(--hr-text-secondary);
}

  .hr-btn--outline:hover {
    background: var(--hr-bg-subtle);
    border-color: var(--hr-text-subtle);
    color: var(--hr-text-default);
  }

/* Muted — non-interactive placeholder: action gated behind an unmet prerequisite */
.hr-btn--muted {
  background: var(--hr-bg-subtle);
  color: var(--hr-text-muted);
  cursor: not-allowed;
}

  .hr-btn--muted:hover {
    background: var(--hr-bg-subtle);
    color: var(--hr-text-muted);
    transform: none;
  }

/* Small — a real button that has to sit INSIDE a grid row.

   `.hr-btn` is sized for a form footer or a toolbar: 34px tall, 20px of side
   padding, `--hr-text-base`. A grid is set in `--hr-text-sm` on 10px cell
   padding, so a full-size button is taller than the row it sits in — it stretches
   the row and reads as a control that wandered in from another page rather than
   as part of the record.

   §6 says grid row actions are icon-only, and this modifier is NOT a licence to
   ignore that. It exists for the deliberate exceptions the rule already allows —
   a column whose single call-to-action IS the information (msBalancedScoreCard's
   "Appraise" / "Set KPIs" column), where the label has to stay visible. Those
   buttons take `--sm` so they scale with the grid text instead of dominating it.

   Height is 26px against the row's ~27px of laid-out text + padding, so the row
   keeps its natural height. */
.hr-btn--sm {
  height: 26px;
  padding: 0 12px;
  gap: 5px;
  font-size: var(--hr-text-sm);
  border-radius: 5px;
}

/* One width for every call-to-action in a grid's action column, so "View", "Appraise"
   and "Review KPIs" line up as a column instead of a ragged edge (Bola, 2026-09-26).
   Sized to the widest label the BSC landing can show ("Review KPIs" + icon 116px, "Self
   Appraisal" 110px, measured at --sm); rem so it scales with the text - the root here is
   13px, so 9.25rem is ~120px. Labels centre (the base .hr-btn is inline-flex /
   justify-content: center). */
.hr-btn--row-action {
  min-width: 9.25rem;
}

/* =========================================
   Pension Dashboard
   ========================================= */

/* --- LAYOUT --- */
.hr-pension-dashboard {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hr-pension-dashboard__header {
  margin-bottom: 4px;
}

.hr-pension-dashboard__title {
  font-family: var(--hr-font-heading);
  font-size: var(--hr-text-xl);
  font-weight: 700;
  color: var(--hr-text-default);
  margin: 0 0 4px 0;
}

.hr-pension-dashboard__subtitle {
  font-size: var(--hr-text-sm);
  color: var(--hr-text-muted);
  margin: 0;
}

/* --- STAT CARDS (4-column for pension) --- */
.hr-pension-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 1100px) {
  .hr-pension-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .hr-pension-stats { grid-template-columns: 1fr; }
}

.hr-stat-card--green::before { background: var(--hr-success-bright); }
.hr-stat-card--purple::before { background: var(--hr-icon-violet-accent); }

.hr-stat-card--green .hr-stat-card__icon {
  background: var(--hr-success-lighter);
  color: var(--hr-success);
}

.hr-stat-card--purple .hr-stat-card__icon {
  background: var(--hr-icon-violet-bg);
  color: var(--hr-icon-violet-text);
}

/* A figure that is falling short (a planning period's pace when completion trails the time gone). */
.hr-stat-card--red::before { background: var(--hr-danger); }

.hr-stat-card--red .hr-stat-card__icon {
  background: var(--hr-danger-light);
  color: var(--hr-danger-text);
}

.hr-stat-card__trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--hr-text-xs);
  font-weight: 500;
}

.hr-stat-card__trend--up {
  color: var(--hr-success);
}

.hr-stat-card__trend--down {
  color: var(--hr-danger-hover);
}

.hr-stat-card__trend--neutral {
  color: var(--hr-text-muted);
}

/* --- TWO-COLUMN BODY --- */
.hr-pension-body {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 20px;
  align-items: start;
}

@media (max-width: 1000px) {
  .hr-pension-body { grid-template-columns: 1fr; }
}

/* --- CARD CONTAINER (shared by sections) --- */
.hr-pension-card {
  background: var(--hr-bg-white);
  border: 1px solid var(--hr-border-light);
  border-radius: 12px;
  box-shadow: 0 1px 2px var(--hr-shadow-sm);
  overflow: hidden;
}

.hr-pension-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
}

.hr-pension-card__body {
  padding: 0 20px 16px;
}

.hr-pension-card__title {
  font-family: var(--hr-font-heading);
  font-size: var(--hr-text-md);
  font-weight: 600;
  color: var(--hr-text-default);
}

.hr-pension-card__link {
  font-size: var(--hr-text-xs);
  font-weight: 500;
  color: var(--hr-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hr-pension-card__link:hover {
  color: var(--hr-accent-hover);
  text-decoration: none;
}

/* --- UPCOMING PAYMENTS TABLE --- */
.hr-pension-payments {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--hr-text-sm);
}

.hr-pension-payments th {
  text-align: left;
  padding: 8px 20px;
  font-size: var(--hr-text-xs);
  font-weight: 600;
  color: var(--hr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--hr-bg-subtle);
}

.hr-pension-payments td {
  padding: 12px 20px;
  color: var(--hr-text-secondary);
  border-bottom: 1px solid var(--hr-bg-surface);
}

.hr-pension-payments tr:last-child td {
  border-bottom: none;
}

.hr-pension-payments__batch {
  font-weight: 600;
  color: var(--hr-text-default);
}

.hr-pension-payments__amount {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --- STATUS BADGE --- */
/* Retired 2026-09-13: run status on the pension dashboard is an hr-status-pill through
   msPension/PensionStatusPill.vb (copilot 1 -- one pill system). */

/* --- ACTIVITY FEED --- */
.hr-pension-activity {
  list-style: none;
  margin: 0;
  padding: 0 20px 16px;
}

.hr-pension-activity__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hr-bg-subtle);
}

.hr-pension-activity__item:last-child {
  border-bottom: none;
}

.hr-pension-activity__text {
  flex: 1;
  min-width: 0;
}

.hr-pension-activity__action {
  font-size: var(--hr-text-sm);
  font-weight: 600;
  color: var(--hr-text-default);
  display: block;
}

.hr-pension-activity__desc {
  font-size: var(--hr-text-xs);
  color: var(--hr-text-muted);
  display: block;
  margin-top: 2px;
}

.hr-pension-activity__time {
  font-size: var(--hr-text-xs);
  color: var(--hr-text-subtle);
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 2px;
}

/* --- NOTIFICATIONS --- */
.hr-pension-notifications {
  list-style: none;
  margin: 0;
  padding: 0 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hr-pn {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border-radius: 8px;
  position: relative;
}

.hr-pn--success {
  background: var(--hr-success-light);
}

.hr-pn--warning {
  background: var(--hr-warning-light);
}

.hr-pn--error {
  background: var(--hr-danger-lighter);
}

.hr-pn--info {
  background: var(--hr-accent-light);
}

.hr-pn__icon {
  flex-shrink: 0;
  font-size: var(--hr-text-md);
  margin-top: 2px;
}

.hr-pn--success .hr-pn__icon { color: var(--hr-success); }
.hr-pn--warning .hr-pn__icon { color: var(--hr-warning-hover); }
.hr-pn--error .hr-pn__icon   { color: var(--hr-danger-hover); }
.hr-pn--info .hr-pn__icon    { color: var(--hr-accent-hover); }

.hr-pn__body {
  flex: 1;
  min-width: 0;
}

.hr-pn__title {
  font-size: var(--hr-text-sm);
  font-weight: 600;
  color: var(--hr-text-default);
  display: block;
}

.hr-pn__message {
  font-size: var(--hr-text-xs);
  color: var(--hr-text-body);
  display: block;
  margin-top: 2px;
  line-height: 1.4;
}

.hr-pn__time {
  font-size: var(--hr-text-xs);
  color: var(--hr-text-subtle);
  white-space: nowrap;
  flex-shrink: 0;
}

.hr-pn__unread {
  width: 8px;
  height: 8px;
  background: var(--hr-accent);
  border-radius: 50%;
  position: absolute;
  top: 12px;
  right: 12px;
}

/* --- QUICK ACTIONS --- */
.hr-pension-quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 12px 12px;
}

.hr-pension-quick-action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--hr-bg-surface);
  border: 1px solid var(--hr-border-light);
  border-radius: 8px;
  font-size: var(--hr-text-sm);
  font-weight: 500;
  color: var(--hr-text-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.hr-pension-quick-action:hover {
  background: var(--hr-accent-light);
  border-color: var(--hr-blue-300);
  color: var(--hr-blue-700);
  text-decoration: none;
}

.hr-pension-quick-action i {
  font-size: var(--hr-text-md);
  color: var(--hr-accent);
  width: 20px;
  text-align: center;
}

/* --- EMPTY STATE --- */
.hr-pension-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  text-align: center;
  color: var(--hr-text-subtle);
  gap: 8px;
}

.hr-pension-empty__icon {
  font-size: var(--hr-text-2xl);
  color: var(--hr-border-strong);
}

.hr-pension-empty__text {
  font-size: var(--hr-text-sm);
  color: var(--hr-text-muted);
  max-width: 300px;
  line-height: 1.5;
}

/* --- LEFT COLUMN STACK --- */
.hr-pension-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* --- RIGHT COLUMN STACK --- */
.hr-pension-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}


/* ─── INSIGHT DASHBOARD LAYOUT ──────────────────────────────────────────────
   Generic grid and section primitives for insight/analytics pages.
   These are reusable across any dashboard-style page.
─────────────────────────────────────────────────────────────────────────── */

.hr-dash-grid {
  display: grid;
  gap: 16px;
  margin-bottom: 24px;
}

.hr-dash-grid--2 { grid-template-columns: repeat(2, 1fr); }
.hr-dash-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hr-dash-grid--4 { grid-template-columns: repeat(4, 1fr); }
.hr-dash-grid--1-3 { grid-template-columns: 1fr 3fr; align-items: start; }
.hr-dash-grid--summary { margin-bottom: 0; }

@media (max-width: 1180px) {
  .hr-dash-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .hr-dash-grid--1-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .hr-dash-grid--2,
  .hr-dash-grid--3,
  .hr-dash-grid--4 {
    grid-template-columns: 1fr;
  }
}

/* ─── INSIGHT OVERVIEW HEADER ─── */

.hr-insight-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.hr-insight-header__title {
  font-size: var(--hr-text-lg);
  font-weight: 700;
  color: var(--hr-text-default);
}

.hr-insight-header__stat {
  background: var(--hr-bg-white);
  border: 1px solid var(--hr-bg-subtle);
  border-radius: 10px;
  padding: 10px 20px;
  text-align: center;
  min-width: 160px;
}

.hr-insight-header__stat-label {
  font-size: var(--hr-text-xs);
  color: var(--hr-text-muted);
  margin-bottom: 2px;
}

.hr-insight-header__stat-value {
  font-size: var(--hr-text-2xl);
  font-weight: 700;
  color: var(--hr-text-strong);
  display: block;
}

/* ─── METRIC PROGRESS ROW ─── */

.hr-metric-row { margin-bottom: 4px; }

.hr-metric-row__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.hr-metric-row__label {
  font-size: var(--hr-text-sm);
  color: var(--hr-text-body);
}

.hr-metric-row__value {
  font-size: var(--hr-text-sm);
  font-weight: 600;
}

.hr-metric-row__value--success { color: var(--hr-success); }
.hr-metric-row__value--primary { color: var(--hr-accent-hover); }
.hr-metric-row__value--warning { color: var(--hr-warning-hover); }
.hr-metric-row__value--danger  { color: var(--hr-danger-hover); }

/* ─── PROGRESS BAR ─── */

.hr-progress {
  height: 8px;
  background: var(--hr-bg-subtle);
  border-radius: 999px;
  overflow: hidden;
}

.hr-progress__fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}

.hr-progress__fill--success { background: var(--hr-success); }
.hr-progress__fill--primary { background: var(--hr-accent-hover); }
.hr-progress__fill--warning { background: var(--hr-warning-hover); }
.hr-progress__fill--danger  { background: var(--hr-danger-hover); }

/* Row-level cascade: more reliable if fill class is missing or overridden */
.hr-metric-row--success .hr-progress__fill { background: var(--hr-success); }
.hr-metric-row--primary .hr-progress__fill { background: var(--hr-accent-hover); }
.hr-metric-row--warning .hr-progress__fill { background: var(--hr-warning-hover); }
.hr-metric-row--danger  .hr-progress__fill { background: var(--hr-danger-hover); }

/* ─── KPI CARD MODIFIERS ─── */

/* Auto-height card — overrides the fixed 140px when content varies */
.hr-kpi-card--auto { height: auto; min-height: 120px; }

.hr-kpi-card__subtext {
  font-size: var(--hr-text-xs);
  color: var(--hr-text-subtle);
  margin-top: 6px;
}

/* Horizontal icon+label group inside a card body */
.hr-kpi-card-horiz-group {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

/* Icon colour variants */
.hr-kpi-card__icon--amber { background: var(--hr-warning-light); color: var(--hr-warning-hover); }
.hr-kpi-card__icon--primary { background: var(--hr-accent-light); color: var(--hr-accent-hover); }

.hr-kpi-card__icon i { font-size: var(--hr-text-xl); }

.hr-mini-stat__icon i { font-size: var(--hr-text-lg); color: var(--hr-text-body); }

/* ─── CHART SECTION CARD ─── */

.hr-chart-section {
  background: var(--hr-bg-white);
  border: 1px solid var(--hr-bg-subtle);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
}

.hr-chart-section__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hr-bg-subtle);
}

.hr-chart-section__title {
  font-size: var(--hr-text-md);
  font-weight: 600;
  color: var(--hr-text-default);
  display: flex;
  align-items: center;
  gap: 8px;
}

.hr-chart-section__subtitle {
  font-size: var(--hr-text-xs);
  color: var(--hr-text-subtle);
  margin-top: 4px;
}

/* `.hr-ajax-overlay` lived here and was used by three UpdateProgress templates
   (AppraisalInsights, MyLeaveHistory, TrainingInsights). It was a second, near
   duplicate of the blocking wait indicator, at z-index 9999 — under every modal
   layer. All three now use `.hr-busy` in hrflex.page.css. */