/* =========================================
   HRFlex Modal Components
   Modern modal styling for ModalPopupExtender
   Complements hrflex.dashboard.css

   All class names are independent — no dependency
   on legacy CSS files. extjs.css and yui-datatable.css
   were deleted 2026-09-20; ModalPopup.css survives only
   for .modalBackground, which AppraisalClient.master
   still names as a ModalPopupExtender BackgroundCssClass.
   ========================================= */

/* ─── OVERLAY ─── */

.hrm-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: var(--hr-slate-900);
  background: rgba(15, 23, 42, 0.75);
  z-index: 100000 !important;
}

.hrm-overlay--fixed {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
}

/* Stacked modal — opens on top of another modal (e.g. document viewer from details) */
.hrm-overlay--stacked {
  z-index: 100010 !important;
}

/* Chained with .hrm-modal (not a bare class) so specificity — not source order —
   decides the tie against the base .hrm-modal rule below, which also sets
   z-index !important. Both are declared here; a bare .hrm-modal--stacked rule
   placed before .hrm-modal in the cascade loses to it despite the higher value,
   since equal-specificity !important rules resolve by source order. */
.hrm-modal.hrm-modal--stacked {
  z-index: 100011 !important;
}

/* ─── MODAL PANEL ─── */

.hrm-modal {
  background: var(--hr-bg-white);
  border-radius: 8px;
  z-index: 100001 !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15),
              0 0 0 1px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  font-family: var(--hr-font-body);
}

.hrm-modal--xs {
  width: 550px;
}

.hrm-modal--sm {
  width: 700px;
}

.hrm-modal--md {
  width: 800px;
}

.hrm-modal--lg {
  width: 950px;
}

.hrm-modal--xl {
  width: 1050px;
}

.hrm-modal--xxl {
  width: 1250px;
}

.hrm-modal--xs,
.hrm-modal--sm,
.hrm-modal--md,
.hrm-modal--lg,
.hrm-modal--xl,
.hrm-modal--xxl {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0;
}

.hrm-modal--dragging {
  top: var(--hrm-drag-top) !important;
  left: var(--hrm-drag-left) !important;
  transform: none !important;
}

/* ─── HEADER ─── */

.hrm-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--hr-bg-surface);
  border-bottom: 1px solid var(--hr-border-light);
  font-size: var(--hr-text-md);
  font-weight: 600;
  color: var(--hr-text-default);
}

.hrm-modal__header--draggable {
  cursor: move;
}

  .hrm-modal__header i:not(.hrm-modal__close i) {
    color: var(--hr-accent);
    margin-right: 6px;
  }

/* Say Congrats (ucHighlightActions): the recipient's photo beside the title. */
.hr-congrat__title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.hrm-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: transparent;
  color: var(--hr-text-muted);
  font-size: var(--hr-text-md);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  text-decoration: none;
  position: static;
  border: none;
}

  .hrm-modal__close:hover {
    background: var(--hr-danger-light);
    color: var(--hr-danger-hover);
    text-decoration: none;
  }

.hrm-modal__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ─── BODY ─── */

.hrm-modal__body {
  padding: 16px;
  background: var(--hr-bg-white);
  max-height: 70vh;
  overflow-y: auto;
}

.hrm-modal__body--dark {
  background: var(--hr-gray-600);
}

/* Review modal that contains nedv-jumpto sticky nav.
   padding-top: 0 eliminates the gap between the modal header and
   the sticky jump nav where scrolling content would bleed through. */
.hrm-modal__body--nedv {
  padding-top: 0;
}

/* ─── SPLIT BODY (two-column: scrollable reference + sticky action) ─── */
/* Usage:
   <div class="hrm-modal__body hrm-modal__body--split">
     <div class="hrm-modal__ref">...scrollable details...</div>
     <div class="hrm-modal__action">...sticky action panel...</div>
   </div>
   The footer is removed; action buttons live inside __action panel.    */

.hrm-modal__body--split {
  display: flex;
  gap: 0;
  padding: 0;
  max-height: 75vh;
  overflow: hidden;
}

.hrm-modal__ref {
  flex: 1;
  padding: 0 16px 16px 16px; /* top: 0 so nedv-jumpto sticky nav sits flush — no bleed gap on scroll */
  overflow-y: auto;
  border-right: 1px solid var(--hr-border-light);
  min-width: 0;
}

.hrm-modal__action {
  flex: 0 0 330px; /* fixed width; 330px keeps a decision row ("Decline" + "Approve 10 days") on ONE line inside the 16px padding */
  padding: 16px;
  display: flex;
  flex-direction: column;
  background: var(--hr-bg-surface);
  overflow-y: auto;
}

.hrm-modal__action-buttons {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
}

/* The decision buttons share the row, on one line. */
.hrm-modal__action-buttons > .hr-btn {
  flex: 1 1 auto;
}

/* Document viewer panel in a split modal layout (equal-width sibling of __ref).
   Use inside .hrm-modal__body--split when the right side embeds a PDF/file viewer
   rather than a form action panel. */
.hrm-modal__doc {
  flex: 1;
  overflow: hidden;
  background: var(--hr-nav-bg);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Doc-focus variant: pins the left form panel to a fixed narrow width so the
   document viewer gets the bulk of the available space (~810px in a --xxl modal).
   Apply as a second class on the split body:
     class="hrm-modal__body hrm-modal__body--split hrm-modal__body--doc-focus" */
.hrm-modal__body--doc-focus .hrm-modal__ref {
  flex: 0 0 675px;
}

/* Doc-first variant: the document IS the decision (a returned file being checked before it is
   accepted), so the body takes its full 75vh instead of the height of the details beside it, and
   the details column is narrow. Use INSTEAD of --doc-focus. Without it a short details column
   squashed the viewer to 350px in an 889px window (PortalCaseReview, measured 2026-10-24).
     class="hrm-modal__body hrm-modal__body--split hrm-modal__body--doc-first" */
.hrm-modal__body--doc-first {
  height: 75vh;
}

/* The details column carries the decision at its foot (no footer bar), and the two columns are told
   apart by their backgrounds alone - the white column against the grey viewer. No column rule, and
   the empty viewer drops its own card border: it IS the pane. (Owner, 2026-10-25: "too many borders".) */
.hrm-modal__body--doc-first .hrm-modal__ref {
  flex: 0 0 360px;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-right: 0;
}

.hrm-modal__body--doc-first .hrm-modal__doc {
  background: var(--hr-gray-50);
}

.hrm-modal__body--doc-first .hrm-modal__doc > .hr-empty-viewer {
  border: 0;
  border-radius: 0;
}

/* The reason a returned document gives the candidate: a plain label over the box, no card. */
.hrm-doc-reason {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 20px;
}

.hrm-doc-reason__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--hr-text-sm);
  font-weight: 600;
  color: var(--hr-text-default);
}

.hrm-doc-reason > .hrm-textarea {
  width: 100%;
  box-sizing: border-box;
}

/* ─── CHECKLIST PREVIEW ───
   A list of tasks shown before it is assigned (PortalCaseEdit's "See the tasks"), grouped by how each
   is answered - the kind and its count named ONCE over its group, each row only the title, the
   instruction the candidate will read, and the exception marked (Optional). Owner, 2026-10-25: "the
   modal can be richer", then "richer but crowded" (a kind, number and icon on every row). */
.hrm-checklist-preview__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  color: var(--hr-text-muted);
  font-size: var(--hr-text-sm);
}

.hrm-checklist-preview__group {
  margin-top: 20px;
}

.hrm-checklist-preview__group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hr-border);
  color: var(--hr-text-default);
  font-size: var(--hr-text-sm);
  font-weight: 700;
}

.hrm-checklist-preview__group-head > i {
  color: var(--hr-accent-text);
}

.hrm-checklist-preview__count {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 9999px;
  background: var(--hr-bg-surface);
  color: var(--hr-text-muted);
  font-size: var(--hr-text-xs);
  font-weight: 600;
  text-align: center;
}

.hrm-checklist-preview {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hrm-checklist-preview__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0 10px 24px;
}

.hrm-checklist-preview__item + .hrm-checklist-preview__item {
  border-top: 1px solid var(--hr-border-light);
}

.hrm-checklist-preview__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: var(--hr-text-sm);
  color: var(--hr-text-default);
}

.hrm-checklist-preview__text > strong {
  font-weight: 600;
}

.hrm-checklist-preview__text > span {
  color: var(--hr-text-muted);
  font-size: var(--hr-text-xs);
  line-height: 1.5;
}

.hrm-checklist-preview__item > .hr-status-pill,
.hrm-checklist-preview__summary > .hr-status-pill {
  flex: 0 0 auto;
  font-size: var(--hr-text-xs);
  padding: 1px 10px;
}

/* The note says how the copied list behaves; Close stays on the right. Doubled class: a later
   `.hrm-modal__footer` rule (flex-end) loads after this one at equal specificity. */
.hrm-modal__footer.hrm-checklist-preview__footer {
  justify-content: space-between;
  color: var(--hr-text-muted);
  font-size: var(--hr-text-xs);
}

/* Make iframe / empty-viewer fill the doc panel height via flex stretch */
.hrm-modal__doc > iframe,
.hrm-modal__doc > object {
  flex: 1;
  min-height: 0;
  height: 100% !important;
}
.hrm-modal__doc > .hr-empty-viewer {
  flex: 1;
  min-height: 0;
}

.hrm-modal--no-doc .hrm-modal__body--split {
  max-height: calc(100vh - 120px);
}

.hrm-modal--no-doc .hrm-modal__doc {
  padding: 16px;
  background: var(--hr-bg-surface);
}

.hrm-doc-empty {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 24px;
  text-align: center;
  color: var(--hr-text-body);
  background: var(--hr-bg-white);
  border: 1px dashed var(--hr-border-strong);
  border-radius: 8px;
}

.hrm-doc-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 12px;
  color: var(--hr-warning-dark);
  background: var(--hr-warning-light);
  border: 1px solid var(--hr-warning-border);
  border-radius: 8px;
  font-size: var(--hr-text-2xl);
}

.hrm-doc-empty strong {
  color: var(--hr-text-default);
  font-family: var(--hr-font-heading);
  font-size: var(--hr-text-md);
  font-weight: 700;
  line-height: 1.35;
}

.hrm-doc-empty span:not(.hrm-doc-empty__icon) {
  max-width: 260px;
  margin-top: 4px;
  color: var(--hr-text-muted);
  font-size: var(--hr-text-sm);
  line-height: 1.5;
}

.hrm-doc-preview-img {
  max-width: 100%;
  max-height: 600px;
}

/* Stacked grade assignment — label above controls, full width for grade names */
.hrm-grade-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hrm-grade-stack__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hrm-grade-stack__label {
  font-size: var(--hr-text-xs);
  font-weight: 600;
  color: var(--hr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.hrm-grade-stack__controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Non-band grade selects fill the remaining row width */
.hrm-grade-stack__controls .hr-filter-bar__select:not(.hrm-band-select) {
  flex: 1;
  min-width: 0;
}
.hrm-grade-stack__grade-name {
  flex: 1;
  font-size: var(--hr-text-sm);
  font-weight: 500;
  color: var(--hr-text-default);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hrm-band-select {
  width: 110px !important;
  flex: 0 0 110px !important;
}

/* Long-form justification / notes text block */
.hrm-justification-text {
  font-size: var(--hr-text-sm);
  color: var(--hr-text-secondary);
  line-height: 1.65;
  white-space: pre-line;
}

/* Decision section that should grow to fill remaining action-panel height */
.hrm-approval-section--grow {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.hrm-approval-section--grow .hrm-approval-section__content {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.hrm-approval-section--grow .hrm-approval-section__content textarea {
  flex: 1;
  resize: none;
}

/* ─── ACTION PANEL SUMMARY CARD ─── */

.hrm-action-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

/* Modifier for a 5-card summary (adds Earned to Available/Utilized/Applied/Approved) —
   3 columns keeps card width in line with the 2-col default instead of stretching thin. */
.hrm-action-summary--cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.hrm-action-summary__card {
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--hr-border-light);
  background: var(--hr-bg-white);
}

.hrm-action-summary__label {
  font-size: var(--hr-text-xs);
  font-weight: 500;
  color: var(--hr-text-muted);
  margin-bottom: 2px;
}

.hrm-action-summary__value {
  font-size: var(--hr-text-lg);
  font-weight: 600;
  color: var(--hr-text-default);
}

.hrm-action-summary__value--success { color: var(--hr-success-hover); }
.hrm-action-summary__value--danger  { color: var(--hr-danger-hover); }
.hrm-action-summary__value--full    { grid-column: 1 / -1; }

/* ─── DETAIL TABLE (key-value pairs) ─── */
/* Legacy — kept for existing read-only detail grids (e.g. GvDetail).
   For editable form fields, prefer .hrm-form-grid below. */

.hrm-detail-table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}

  .hrm-detail-table td {
    padding: 7px 10px;

  }

.hrm-detail-table__label {
  font-weight: 600;
  text-align: right;
  color: var(--hr-text-body);
  white-space: nowrap;
  width: 1%;
  padding-right: 12px;

}

.hrm-detail-table__label--top {
  vertical-align: top;
}

.hrm-detail-table__section-title {
  font-weight: 600;
  font-size: var(--hr-text-base);
  color: var(--hr-text-muted);
  margin-bottom: 4px;
}

/* ─── INLINE FORM GRID (modern replacement for detail-table in forms) ─── */
/* Usage:
   <div class="hrm-form-grid">
     <label class="hrm-form-grid__label">Name</label>
     <div class="hrm-form-grid__field"><asp:TextBox ... /></div>
   </div>
   Default: 2-column (label auto + input 1fr).
   Add --cols-2 for a 4-column layout (2 label+input pairs per row).
   Add --cols-3 for a 6-column layout (3 pairs per row).
*/

.hrm-form-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px 16px;
  align-items: center;
}

.hrm-form-grid--approval-meta {
  gap: 10px 18px;
  padding: 12px 0;
  border-top: 1px solid var(--hr-border);
}

.hrm-form-grid--approval-meta:first-child {
  border-top: none;
}

.hrm-form-grid--approval-meta .hrm-form-grid__field {
  color: var(--hr-text-secondary);
  line-height: 1.45;
}

.hrm-form-grid--cols-2 {
  grid-template-columns: auto 1fr auto 1fr;
}

.hrm-form-grid--cols-2 > .hrm-form-grid__label:nth-child(4n+3) {
  padding-left: 24px;
}

/*
  Use hrm-form-grid__label--col1 on a left-column label in a --cols-2 grid
  when a __heading divider before it shifts the nth-child(4n+3) count,
  causing the padding intended for right-column labels to land on a left-column label.
  Three-class specificity wins over the two-class+pseudo-class nth-child rule.
*/
.hrm-form-grid--cols-2 > .hrm-form-grid__label.hrm-form-grid__label--col1 {
  padding-left: 0;
  grid-column: 1;
}

/*
  The companion to --col1. Any full-width child (a __heading divider or a
  __pair--full block) is a single grid child, so it shifts the nth-child count
  by one and swaps which labels the 4n+3 rule lands on. --col1 clears the
  indent that wrongly landed on a left-column label; --col2 restores the one a
  right-column label lost. Use them in pairs — fixing only the false positive
  leaves the right column flush against the previous field.
*/
.hrm-form-grid--cols-2 > .hrm-form-grid__label.hrm-form-grid__label--col2 {
  padding-left: 24px;
  grid-column: 3;
}

/* The column classes also PIN the label to its column (2026-10-25). Auto-placement alone re-flows every later
   item when a pair is hidden by script (display: none takes its two cells with it), so after the cycle form's
   "Comments Required At" pair every left label slid into the right column and back. Pinned, a hidden pair leaves
   its row half empty and nothing moves; the field after a pinned label still auto-places into the next cell. */

.hrm-form-grid--cols-3 {
  grid-template-columns: auto 1fr auto 1fr auto 1fr;
}

/* 3-column before/after layout: label | current value | new input */
.hrm-form-grid--before-after {
  grid-template-columns: auto 1fr 1fr;
}

.hrm-form-grid--before-after > .hrm-form-grid__col-header {
  font-size: var(--hr-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hr-text-subtle);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--hr-border);
}

/* Field spanning both value columns (e.g., Remarks textarea) */
.hrm-form-grid--before-after .hrm-form-grid__field--span2 {
  grid-column: 2 / 4;
}

.hrm-form-grid--cols-3 > .hrm-form-grid__label:nth-child(6n+3),
.hrm-form-grid--cols-3 > .hrm-form-grid__label:nth-child(6n+5) {
  padding-left: 24px;
}

.hrm-form-grid__label {
  font-weight: 600;
  color: var(--hr-text-body);
  white-space: nowrap;
  font-size: var(--hr-text-base);
}

.hrm-form-grid__field {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

/*
  A <select> sizes itself to its WIDEST OPTION, and a flex item's default
  min-width:auto stops it shrinking below that -- so one long option pushes the
  select past its grid column and puts a horizontal scrollbar on the whole modal.
  The __field above already sets min-width:0 on itself; the select needs its own.

  Found on the beneficiary guardian block, where "Legal Representative
  (Incapacity)" made the Appointed As select 240px inside a 204px column.
  Scoped to selects INSIDE a form-grid field, where a fixed column width is what
  they have to respect -- not to .hrm-select / .hr-filter-bar__select globally,
  because a select in a filter bar has no such column and is meant to size to
  its content.

  Purely a clamp: it can only prevent an overflow, never cause one.
*/
.hrm-form-grid__field > .hrm-select,
.hrm-form-grid__field > .hr-filter-bar__select {
  min-width: 0;
  max-width: 100%;
}

.hrm-exit-reason {
  display: grid;
  grid-template-columns: minmax(120px, 160px) minmax(0, 1fr);
  gap: 12px 18px;
  align-items: start;
  margin-top: 16px;
  margin-bottom: 14px;
  padding: 12px 14px;
  background: var(--hr-bg-surface);
  border: 1px solid var(--hr-border);
  border-radius: 8px;
}

.hrm-exit-reason__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-top: 2px;
  color: var(--hr-text-body);
  font-size: var(--hr-text-base);
  font-weight: 700;
  line-height: 1.45;
  white-space: nowrap;
}

.hrm-exit-reason__label i {
  color: var(--hr-accent);
  font-size: var(--hr-text-sm);
}

.hrm-exit-reason__body {
  min-width: 0;
  max-height: 104px;
  overflow-y: auto;
  color: var(--hr-text-default);
  font-size: var(--hr-text-base);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.hrm-exit-reason__body p {
  margin: 0 0 8px;
}

.hrm-exit-reason__body p:last-child {
  margin-bottom: 0;
}

/* Inputs and selects stretch to fill the field cell */
.hrm-form-grid__field > .hr-filter-bar__input,
.hrm-form-grid__field > .hr-filter-bar__select {
  flex: 1;
  min-width: 0;
}

/* A value the dialog shows but cannot change reads as one (work item 2564: Self Appraisal and
   Manager Levels, fixed when the cycle starts). The generic --readonly rule in hrflex.page.css
   loses to hrflex.dashboard.css's base input rule, imported later at equal specificity, so the box
   rendered white like the editable ones beside it. Direct children only: a read-only date picker
   sits inside a date group, which hrflex.dashboard.css already styles. */
.hrm-form-grid__field > .hr-filter-bar__input--readonly {
  background: var(--hr-bg-subtle);
  cursor: default;
}

/* Compact variant: dropdown/input does NOT stretch — useful when a field cell
   contains a short-choice dropdown + button (e.g., engagement type + Next).
   The control takes its natural width; excess space is left blank. */
.hrm-form-grid__field--compact > .hr-filter-bar__input,
.hrm-form-grid__field--compact > .hr-filter-bar__select {
  flex: 0 1 auto;
  min-width: 160px;
  max-width: 260px;
}

/* Date-group (input + calendar trigger) fills the cell */
.hrm-form-grid__field > .hr-filter-bar__date-group {
  flex: 1;
}

/* Multiline textareas fill full width and allow vertical resize */
.hrm-form-grid__field > textarea.hr-filter-bar__input,
.hrm-form-grid__field--span2 > textarea.hr-filter-bar__input {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  resize: vertical;
}

/* A grid/scroll wrapper (e.g. .hr-performance-planning__scroll around an
   hf:HRFlexGrid) is a block-level child, so without a grow rule it shrinks
   to its content width instead of filling the field cell. */
.hrm-form-grid__field > .hr-performance-planning__scroll,
.hrm-form-grid__field > .hrm-modal__scroll-section {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
}

/* Validators never stretch — they sit beside their input */
.hrm-form-grid__field > .hr-validator {
  flex: 0 0 auto;
  align-self: center;
}

/* Neither does a --narrow input. The modifier sets `width: 84px` and says in its own comment that
   the point is to STOP the box growing, but width loses to `flex: 1 1 0%` from the rule above, so
   inside this flex row a deliberately narrow field stretched the full column — a 3-character day
   count in a 626px box. The modifier still works unaided in .hr-filter-bar__group, its designed
   home, where nothing grants flex-grow; this restores its stated intent in the one context that
   overrode it. */
.hrm-form-grid__field > .hr-filter-bar__input--narrow {
  flex: 0 0 auto;
}

/* A PAIR of short thresholds on ONE line ("<= [ ]  >= [ ]" with the info tip after): the stretch rule above
   would give both boxes flex: 1 in a 181px dialog cell, squeezing the first to nothing and wrapping the second
   (the cycle dialogs' Comments Required At, 2026-10-25). Signs instead of the words, 60px boxes (three digits and
   a point), nothing wraps; each box carries its words in aria-label. */
.hrm-form-grid__field--pair {
  flex-wrap: nowrap;
  gap: 4px;
}
.hrm-form-grid__field--pair > span { white-space: nowrap; font-size: var(--hr-text-md, 15px); line-height: 1; }
.hrm-form-grid__field--pair > .hr-filter-bar__input { flex: 0 0 56px; width: 56px; min-width: 0; padding-left: 7px; padding-right: 7px; }
.hrm-form-grid__field--pair > .hr-filter-bar__input + span { margin-left: 4px; }

/* Inline computed-value hint beside an input (e.g., live "Ends: <date>" preview) */
.hrm-form-grid__hint {
  flex: 0 0 auto;
  font-size: var(--hr-text-xs);
  color: var(--hr-text-muted);
  white-space: nowrap;
}

/* ── Input group: adjacent selects/inputs render as one joined control ──
   Use for parent-child linked controls (e.g., Grade + Band).
   Wrap the selects in .hrm-form-grid__field-group inside a .hrm-form-grid__field */

.hrm-form-grid__field-group {
  display: flex;
  flex: 1;
  min-width: 0;
}

.hrm-form-grid__field-group > .hr-filter-bar__select,
.hrm-form-grid__field-group > .hr-filter-bar__input {
  flex: 1;
  min-width: 0;
}

.hrm-form-grid__field-group > .hr-filter-bar__select:not(:first-child),
.hrm-form-grid__field-group > .hr-filter-bar__input:not(:first-child) {
  margin-left: -1px;
  border-radius: 0 4px 4px 0;
  border-left-color: var(--hr-text-subtle);
}

.hrm-form-grid__field-group > .hr-filter-bar__select:first-child,
.hrm-form-grid__field-group > .hr-filter-bar__input:first-child {
  border-radius: 4px 0 0 4px;
}

.hrm-form-grid__field-group > .hr-filter-bar__select:only-child,
.hrm-form-grid__field-group > .hr-filter-bar__input:only-child {
  border-radius: 4px;
}

/* A combobox-enhanced select stops being a direct child of the group: hrflex.combobox.js wraps it
   in a <span class="hr-combobox"> and clips the native <select> out of the flow, so all four rules
   above stop matching it. Worse, `.hr-combobox` is `width: 100%`, which in this flex row claims the
   whole width and squeezes its sibling to min-content — measured 2026-09-10 on NewHireEdit's
   Grade/Band pair, the band select rendered 18px wide, chevron only. Same flex terms as a plain
   select, and the joined-edge radii restated on the trigger, which is what actually draws the
   border. Applies to every Grade+Band / Pay Grade+Step pair once the first half becomes a combobox. */
.hrm-form-grid__field-group > .hr-combobox {
  flex: 1;
  min-width: 0;
  width: auto;
}

.hrm-form-grid__field-group > .hr-combobox:not(:first-child) {
  margin-left: -1px;
}

.hrm-form-grid__field-group > .hr-combobox:first-child .hr-combobox__trigger {
  border-radius: 4px 0 0 4px;
}

.hrm-form-grid__field-group > .hr-combobox:not(:first-child) .hr-combobox__trigger {
  border-radius: 0 4px 4px 0;
}

.hrm-form-grid__field-group > .hr-combobox:only-child .hr-combobox__trigger {
  border-radius: 4px;
}

/* Bring focused/hovered control to front so its border isn't hidden */
.hrm-form-grid__field-group > .hr-filter-bar__select:focus,
.hrm-form-grid__field-group > .hr-filter-bar__select:hover,
.hrm-form-grid__field-group > .hr-filter-bar__input:focus,
.hrm-form-grid__field-group > .hr-filter-bar__input:hover {
  position: relative;
  z-index: 1;
}

.hrm-form-grid__field--full {
  grid-column: 1 / -1;
}

/* A LABELLED full-width field is a row pair: the label in the label track, the field across
   every track after it. --full alone dropped the field to its own row and left the label alone
   above it, out of line with every other label (140 such pairs in 71 pages and controls, 2026-10-22). Both
   children stay where they are, so the nth-child(4n+3) count every --cols-2 grid's --col1/--col2
   fixes rely on does not move, which wrapping each pair in a __pair--full would have shifted.
   The label always starts its row, so it never takes the right-column indent. An UNLABELLED
   __field--full (no __label right before it) still spans the whole row. */
.hrm-form-grid > .hrm-form-grid__label:has(+ .hrm-form-grid__field--full) {
  grid-column: 1;
}

.hrm-form-grid--cols-2 > .hrm-form-grid__label:has(+ .hrm-form-grid__field--full),
.hrm-form-grid--cols-3 > .hrm-form-grid__label:has(+ .hrm-form-grid__field--full) {
  padding-left: 0;
}

.hrm-form-grid > .hrm-form-grid__label + .hrm-form-grid__field--full {
  grid-column: 2 / -1;
}

/* Stack a field's children instead of running them along one line. The base
   __field is a flex ROW that wraps, so a tall child (an image preview) and its
   control land side by side whenever the column happens to be wide enough and
   wrap when it is not — the layout changes shape with the label widths around
   it. Use this wherever the vertical order is the intended one, e.g. a passport
   preview above its file picker. Pair it with __label--top so the label aligns
   with the first child rather than the middle of the stack. */
.hrm-form-grid__field--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  /* The grid centres its items, so a short stacked field floats in the middle of
     a row made tall by the field opposite it -- while __label--top has already
     pinned its label to the top. Top-align the field to match its own label. */
  align-self: start;
}

/* A field-group inside a stacked field must take the whole cell. The stack sets
   align-items:flex-start, which on the cross axis shrinks the group to its content
   width — so the selects it holds would stop matching the grade rows above it.
   width:100%, not flex, because in a column container flex sizes the OTHER axis. */
.hrm-form-grid__field--stack > .hrm-form-grid__field-group {
  width: 100%;
}

/* In a stack the gap owns the spacing. The preview carries its own top/bottom
   margin for the inline case, which here would double the gap and push the image
   below the label that __label--top is aligning to it. */
.hrm-form-grid__field--stack > .hr-passport-preview {
  margin-top: 0;
  margin-bottom: 0;
}

/* Dependent sub-field: sits in the value column (column 2) only,
   visually anchored under the driving dropdown above it.
   The label column (column 1) is implicitly blank for this row.
   Use on a wrapper div whose visibility is JS-controlled. */
.hrm-form-grid__field-sub {
  grid-column: 2;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
  flex-wrap: wrap;
}

/* Individual sub-field item inside .hrm-form-grid__field-sub */
.hrm-carry-sub {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.hrm-carry-sub__lbl {
  font-size: var(--hr-text-xs);
  font-weight: 600;
  color: var(--hr-text-subtle);
  white-space: nowrap;
}

.hrm-carry-sub__row {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Carry-over reveal panels — hidden until the policy dropdown selects a matching
   type. JS toggles the --active modifier (see FinancialYr.aspx updateCarryOverFields).
   Class toggle instead of inline style keeps show/hide out of the markup. */
.hrm-carry-reveal {
  display: none;
}

.hrm-carry-reveal.hrm-carry-reveal--active {
  display: flex;
}

/* Section heading inside form grids — lightweight inline divider.
   Spans full grid width. Use between logical field groups.
   Unlike hrm-column-label (card-like), this is subtle: just a border-bottom
   with small uppercase text so it doesn't compete with the data. */

.hrm-form-grid__heading {
  grid-column: 1 / -1;
  font-size: var(--hr-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--hr-text-muted);
  border-bottom: 1px solid var(--hr-border);
  padding-bottom: 4px;
  margin-top: 8px;
}

/* ─── DISCLOSURE ───
   A native <details> holding settings most people never change, closed until opened
   (Modify Assessment Details on AppraisalStartUp.aspx, work item 2564). A rounded BOX round
   the whole section, summary included, so it reads as one group whether open or closed
   (owner, 2026-11-11 - this replaced the same day's "hairline above the summary, no box").
   What made the first boxed version too busy was the box PLUS a rule under the summary
   (10 structural lines in one dialog): the summary carries no rule, and the group headings
   inside keep their divider so the groups do not run together. A page that must keep it open
   across a postback renders the open attribute from a hidden field the toggle event writes. */

.hrm-disclosure {
  margin-top: 16px;
  padding: 0 14px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
}

.hrm-disclosure__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 10px 0;
  cursor: pointer;
  list-style: none;
}

.hrm-disclosure__summary::-webkit-details-marker {
  display: none;
}

.hrm-disclosure__summary::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f054";
  font-size: var(--hr-text-xs);
  color: var(--hr-text-muted);
  width: 12px;
  transition: transform 0.15s ease;
}

.hrm-disclosure[open] > .hrm-disclosure__summary::before {
  transform: rotate(90deg);
}

.hrm-disclosure__summary:hover .hrm-disclosure__title {
  color: var(--hr-accent);
}

.hrm-disclosure__summary:focus-visible {
  outline: 2px solid var(--hr-accent);
  outline-offset: 2px;
}

.hrm-disclosure__title {
  font-weight: 600;
  color: var(--hr-text-body);
}

.hrm-disclosure__hint {
  font-size: var(--hr-text-sm);
  color: var(--hr-text-muted);
}

.hrm-disclosure__body {
  padding-bottom: 14px;
}

.hrm-disclosure .hrm-form-grid__heading {
  margin-top: 16px;
}

/* A --cols-2 grid whose pairs are hidden and shown by script, left to REFLOW: the base rule
   indents the right-hand label by nth-child(4n+3), which counts hidden pairs and headings, so
   after any hidden pair it indents a left-hand label instead. Here every field keeps the gap
   on its own right edge, wherever the pair lands. (The pinned alternative, __label--col1/2,
   leaves a hole per hidden pair - wrong where the OKR model hides most of a group.) */
.hrm-form-grid--cols-2.hrm-form-grid--reflow > .hrm-form-grid__label:nth-child(4n+3) {
  padding-left: 0;
}

.hrm-form-grid--cols-2.hrm-form-grid--reflow > .hrm-form-grid__field {
  padding-right: 16px;
}

/* ─── PERMISSION PICKER ───
   A list of grantable permissions, each a checkbox plus an hr-info-tip carrying the
   consequence of granting it.

   The descriptions are deliberately NOT printed inline. There are seventeen options and
   each needs a sentence before anybody can tick it honestly; printed out, that is a wall
   of text which gets scrolled past, and the checkbox — the only thing the user is here to
   operate — stops being findable. The tip is the component this estate already uses for
   exactly that trade, and it binds by delegation on document, so it survives the async
   postback that re-renders this modal.

   Two things this must not do, both learned by doing them:
   .hrm-form-grid__field is a FLEX ROW, so a field holding more than one block needs a
   wrapper that fills it — otherwise the heading, the wildcard panel and every option line
   up side by side. And .hr-checkbox-list is itself a two-column GRID, which is right for
   bare checkbox+label pairs and wrong for anything with more inside it. */

.hr-scope-list {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

/* Two up wherever the modal is wide enough for it. .hr-checkbox-list already sizes with
   auto-fill, but it measures the space it is GIVEN — and inside a flex field that came out
   at roughly a third of the modal, so every option got its own row and the right-hand two
   thirds sat empty. The width:100% above is what makes auto-fill see the real width. */
.hr-scope-list__options {
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 8px 12px;
  align-content: start;
}

/* A group heading always starts its own band, so the two columns read down within a
   group rather than across a boundary. */
.hr-scope-list__options > .hrm-form-grid__heading {
  grid-column: 1 / -1;
}

/* No border on the option itself. Seventeen boxed rows under five ruled headings is more
   lines than content, and the grid gap already separates them; the hover wash is enough to
   show which row the pointer will toggle. */
.hr-scope-option {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 6px 8px;
  border-radius: var(--hr-radius-sm);
  transition: background-color 0.15s ease;
}

.hr-scope-option:hover {
  background: var(--hr-bg-subtle);
}

/* The label carries .hr-checkbox-list's custom box in ::before, so it keeps its own
   padding-left; all this does is let it take the card's remaining width. */
.hr-scope-option > label {
  min-width: 0;
  flex: 1 1 auto;
}

/* The grandfathered "grant everything" permission, shown only on a key that already has
   it. Set apart from the catalogue below because it is a decision to withdraw, not one of
   the options to pick — but kept neutral: it is a state to review, not a warning. */
.hr-scope-wildcard {
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--hr-bg-subtle);
  border: 1px solid var(--hr-border);
  border-radius: var(--hr-radius-sm);
}

/* It holds ONE option, so it must not inherit the two-up auto-fill grid: at full width that
   put the single row in a ~280px column and wrapped the label across two lines with most of
   the panel empty beside it. The class is still wanted for the custom checkbox on the label. */
.hr-scope-wildcard .hr-checkbox-list {
  grid-template-columns: 1fr;
}

/* ─── COLUMN LABEL ─── */

.hrm-column-label {
  display: inline-block;
  padding: 4px 10px;
  background: var(--hr-bg-inset);
  border-left: 3px solid var(--hr-accent);
  border-radius: 4px;

  font-weight: 600;
  color: var(--hr-text-default);
}

/* ─── SCROLLABLE SECTION ─── */

.hrm-scroll-section {
  max-height: 150px;
  overflow-y: auto;
  border: 1px solid var(--hr-border-light);
  border-radius: 4px;
  margin-top: 12px;
}

/* ─── FORM SELECT ─── */

.hrm-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;
}

  .hrm-select:focus {
    border-color: var(--hr-accent);
    box-shadow: 0 0 0 2px var(--hr-shadow-accent);
  }

/* ─── SCROLL SECTION ─── */

.hrm-modal__scroll-section {
  overflow-y: auto;
  max-height: 200px;
  margin-bottom: 8px;
}

.hrm-modal__scroll-section--xs {
  max-height: 50px;
}

.hrm-modal__scroll-section--sm {
  max-height: 100px;
}

.hrm-modal__scroll-section--lg {
  max-height: 400px;
}

/* ─── FOOTER ─── */

.hrm-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  background: var(--hr-bg-surface);
  border-top: 1px solid var(--hr-border-light);
}

/* ─── PINNED STRIP (between body and footer) ─── */
/* Content that must stay in view while .hrm-modal__body scrolls: a secret shown
   exactly once, or a refusal the user has to read before the footer buttons mean
   anything. It sits OUTSIDE the body's overflow, so it neither scrolls out of
   reach nor pushes the footer off screen. Introduced for ManageApiKeys.aspx, whose
   generated key sat at the bottom of a 70vh scroll area and was routinely missed. */
.hrm-modal__pinned {
  padding: 12px 16px;
  background: var(--hr-bg-surface);
  border-top: 1px solid var(--hr-border-light);
}

/* The footer draws its own top border. Two adjacent bordered strips read as one
   double rule, so the strip immediately before the footer gives that edge up
   rather than the footer losing a border it needs when no strip is rendered. */
.hrm-modal__pinned + .hrm-modal__footer {
  border-top: none;
}

/* A modal that carries pinned strips must bound its TOTAL height. .hrm-modal__body's
   70vh cap is viewport-relative while the header, strips and footer around it are fixed
   pixels, so the sum overflows any viewport shorter than ~830px: the header clips off the
   top and the footer buttons drop below the fold (measured at 889px - modal 938px tall,
   Save unreachable). Bounding the panel and letting the body flex keeps the body's 70vh
   upper bound where there is room, and lets it SHRINK where there is not, so the header
   and the footer buttons stay reachable at every height. */
.hrm-modal--pinned {
  display: flex;
  flex-direction: column;
  max-height: 92vh;
}

.hrm-modal--pinned > .hrm-modal__body {
  flex: 1 1 auto;
  min-height: 0;
}

.hrm-modal__pinned-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: var(--hr-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--hr-text-muted);
}

/* ─── TEXTAREA ─── */

.hrm-textarea {
  width: 100%;
  padding: 8px 10px;
  font-size: var(--hr-text-sm);
  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;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

  .hrm-textarea:focus {
    border-color: var(--hr-accent);
    box-shadow: 0 0 0 2px var(--hr-shadow-accent);
  }

.hrm-textarea--tall  { height: 120px; }
.hrm-textarea--short { height: 50px; }

/* ─── FILE UPLOAD ─── */

.hrm-file-upload {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: var(--hr-text-sm);
  font-weight: 600;
  color: var(--hr-text-body);
  background: var(--hr-bg-subtle);
  border: 1px dashed var(--hr-border-strong);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

  .hrm-file-upload:hover {
    background: var(--hr-border);
    border-color: var(--hr-text-subtle);
  }

  .hrm-file-upload i {
    color: var(--hr-accent);
  }

.hrm-file-upload__name {
  font-size: var(--hr-text-sm);
  color: var(--hr-text-muted);
  margin-left: 8px;
}

/* ─── LOADING OVERLAY ─── */

/* ─── APPROVAL SECTIONS (ucRequestApproval) ─── */

.hrm-approval-section {
  margin-top: 16px;
}

.hrm-approval-section__heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--hr-text-sm);
  font-weight: 600;
  color: var(--hr-text-secondary);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hr-border-light);
  margin-bottom: 0;
}

.hrm-approval-section__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  font-size: var(--hr-text-xs);
  flex-shrink: 0;
}

.hrm-approval-section__icon--changes {
  background: var(--hr-accent-light);
  color: var(--hr-accent);
}

.hrm-approval-section__icon--history {
  background: var(--hr-icon-violet-bg-soft);
  color: var(--hr-icon-violet-accent);
}

.hrm-approval-section__icon--attachment {
  background: var(--hr-icon-amber-bg);
  color: var(--hr-icon-amber-text);
}

.hrm-approval-section__icon--comment {
  background: var(--hr-success-light);
  color: var(--hr-success-hover);
}

.hrm-approval-section__content {
  padding-top: 12px;
}

.hrm-approval-section__content--scroll {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--hr-bg-subtle);
  border-top: none;
  border-radius: 0 0 6px 6px;
}

/* ─── REVIEW PANEL (approval comments + supporting documents) ─── */

.hrm-review-panel {
  margin-top: 10px;
  margin-bottom: 12px;
  border: 1px solid var(--hr-accent-border);
  border-radius: 8px;
  background: var(--hr-bg-white);
  overflow: hidden;
}

.hrm-review-panel__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--hr-bg-surface);
  border-bottom: 1px solid var(--hr-border);
}

.hrm-review-panel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: var(--hr-accent-light);
  color: var(--hr-accent);
  flex-shrink: 0;
}

.hrm-review-panel__summary-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.hrm-review-panel__eyebrow {
  font-size: var(--hr-text-xs);
  font-weight: 700;
  color: var(--hr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hrm-review-panel__title {
  font-size: var(--hr-text-md);
  font-weight: 600;
  color: var(--hr-text-default);
  line-height: 1.35;
}

.hrm-review-panel__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 12px;
  padding: 12px;
}

.hrm-review-panel__section {
  margin-top: 0;
  min-width: 0;
}

.hrm-comment-list,
.hrm-document-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
}

.hrm-comment {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.hrm-comment__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--hr-accent-light);
  color: var(--hr-blue-700);
  font-size: var(--hr-text-xs);
  font-weight: 700;
  line-height: 1;
}

.hrm-comment__body {
  min-width: 0;
  padding: 8px 10px;
  background: var(--hr-bg-white);
  border: 1px solid var(--hr-border);
  border-radius: 6px;
}

.hrm-comment__text {
  color: var(--hr-text-secondary);
  font-size: var(--hr-text-base);
  line-height: 1.5;
}

.hrm-comment__meta,
.hrm-document-row__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  color: var(--hr-text-muted);
  font-size: var(--hr-text-xs);
  line-height: 1.35;
}

.hrm-comment__meta i,
.hrm-document-row__meta i {
  color: var(--hr-text-subtle);
}

.hrm-comment__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--hr-border-strong);
}

.hrm-document-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  background: var(--hr-bg-white);
  border: 1px solid var(--hr-border);
  border-radius: 6px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.hrm-document-row:hover {
  background: var(--hr-bg-surface);
  border-color: var(--hr-accent-border);
}

.hrm-document-row__icon {
  width: 34px;
  height: 34px;
  padding: 7px;
  border: 1px solid var(--hr-accent-border);
  border-radius: 6px;
  background: var(--hr-accent-light);
  box-sizing: border-box;
  flex-shrink: 0;
  cursor: pointer;
}

.hrm-document-row__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hrm-document-row__name {
  max-width: 100%;
  color: var(--hr-accent);
  font-size: var(--hr-text-base);
  font-weight: 600;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hrm-document-row__name:hover {
  color: var(--hr-accent-hover);
  text-decoration: underline;
}

.hrm-empty-note {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px;
  color: var(--hr-text-muted);
  font-size: var(--hr-text-sm);
  background: var(--hr-bg-surface);
  border: 1px dashed var(--hr-border-strong);
  border-radius: 6px;
}

.hrm-empty-note i {
  color: var(--hr-text-subtle);
  flex-shrink: 0;
}

/* ─── DECISION CONTEXT (compact approval evidence without nested cards) ─── */

.hrm-decision-context {
  margin: 14px 0 12px;
  padding: 12px 0;
/*  border-top: 1px solid var(--hr-border);*/
  border-bottom: 1px solid var(--hr-border);
}

.hrm-decision-context__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 18px 24px;
}

.hrm-decision-context__grid--single {
  grid-template-columns: minmax(0, 1fr);
}

.hrm-decision-context > .hrm-context-item + .hrm-decision-context__grid,
.hrm-decision-context > .hrm-decision-context__grid + .hrm-decision-context__grid {
  margin-top: 12px;
}

.hrm-decision-context .hrm-approval-section {
  margin-top: 0;
  min-width: 0;
}

.hrm-decision-context .hrm-approval-section__heading {
  gap: 7px;
  padding-bottom: 0;
  border-bottom: none;
  color: var(--hr-text-secondary);
}

.hrm-decision-context .hrm-approval-section__icon {
  width: 24px;
  height: 24px;
}

.hrm-decision-context .hrm-approval-section__content {
  padding-top: 8px;
}

.hrm-decision-context .hrm-approval-section__content--scroll {
  max-height: 155px;
  overflow-y: auto;
  border: none;
  border-radius: 0;
}

/* Compact decision summary used by authorization modals with document context. */
.hrm-decision-brief {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: var(--hr-bg-surface);
  border: 1px solid var(--hr-border);
  border-radius: 8px;
}

.hrm-decision-brief .hr-profile {
  gap: 12px;
  padding: 0;
  border-bottom: none;
}

.hrm-decision-brief .hr-profile__photo .hr-avatar.hr-avatar--2xl,
.hrm-decision-brief .hr-profile__photo img {
  width: 64px;
  height: 64px;
  font-size: var(--hr-text-xl);
}

.hrm-decision-brief .hr-profile__details {
  gap: 2px;
}

.hrm-decision-brief .hr-profile__name {
  font-size: var(--hr-text-md);
  line-height: 1.25;
}

.hrm-decision-brief .hr-profile__row {
  font-size: var(--hr-text-sm);
}

.hrm-decision-brief__metric span {
  color: var(--hr-text-muted);
  font-size: var(--hr-text-xs);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hrm-decision-brief__status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hr-border-light);
}

.hrm-decision-brief__status-row > span {
  color: var(--hr-text-muted);
  font-size: var(--hr-text-xs);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hrm-decision-brief__metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--hr-border-light);
}

.hrm-decision-brief__metric {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.hrm-decision-brief__metric strong {
  min-width: 0;
  color: var(--hr-text-default);
  font-size: var(--hr-text-sm);
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.hrm-decision-comment {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: var(--hr-bg-white);
  border: 1px solid var(--hr-border);
  border-radius: 8px;
}

.hrm-decision-comment .hrm-form-grid {
  gap: 8px;
}

.hrm-context-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hrm-context-list--timeline {
  position: relative;
  gap: 2px;
}

.hrm-context-list--timeline .hrm-context-item {
  position: relative;
  border-top: none;
  padding: 6px 0 12px;
}

.hrm-context-list--timeline .hrm-context-item:first-child {
  padding-top: 0;
}

.hrm-context-list--timeline .hrm-context-item::before {
  content: "";
  position: absolute;
  top: 28px;
  bottom: -10px;
  left: 12px;
  width: 2px;
  background: var(--hr-border-light);
}

.hrm-context-list--timeline .hrm-context-item:last-child::before {
  display: none;
}

.hrm-context-list--timeline .hrm-context-item__marker {
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 4px var(--hr-bg-white);
}

.hrm-context-item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--hr-border-light);
}

.hrm-context-item:first-child {
  border-top: none;
  padding-top: 0;
}

.hrm-context-item__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--hr-accent-light);
  color: var(--hr-accent);
  font-size: var(--hr-text-xs);
  font-weight: 700;
  line-height: 1;
}

.hrm-context-item__body {
  min-width: 0;
}

.hrm-context-item__title {
  display: block;
  color: var(--hr-text-default);
  font-size: var(--hr-text-base);
  font-weight: 600;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hrm-context-item__text {
  color: var(--hr-text-secondary);
  font-size: var(--hr-text-base);
  line-height: 1.45;
}

.hrm-context-item__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  color: var(--hr-text-muted);
  font-size: var(--hr-text-xs);
}

/* Approval-trail status markers — promoted from hrflex.leave-approval.css so any module's
   approval timeline (training, etc.) can use them without pulling a module-specific sheet.
   Keep values in sync with hrflex.leave-approval.css. */
.hrm-context-item--current {
  margin: 0 -10px;
  padding: 8px 10px 12px;
  border-radius: 8px;
  background: var(--hr-accent-light);
}

/* In a timeline, `.hrm-context-list--timeline .hrm-context-item` (more specific) zeroes the side padding that offsets the
   -10px bleed above, so the highlight's edge ran flush against its pill and its marker hung outside the column. Put the
   10px back, and move that item's connector with its marker (12px + 10px). */
.hrm-context-list--timeline .hrm-context-item--current {
  padding-left: 10px;
  padding-right: 10px;
}

.hrm-context-list--timeline .hrm-context-item--current::before {
  left: 22px;
}

.hrm-context-item__marker--success {
  background: var(--hr-success-lighter);
  color: var(--hr-success-hover);
}

.hrm-context-item__marker--pending {
  background: var(--hr-accent);
  color: var(--hr-text-inverse);
}

.hrm-context-item__marker--danger {
  background: var(--hr-danger-light);
  color: var(--hr-danger-dark);
}

.hrm-context-item__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.hrm-context-item__meta i {
  color: var(--hr-text-subtle);
}

.hrm-context-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--hr-border-strong);
}

.hrm-context-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 4px 0;
  color: var(--hr-text-muted);
  font-size: var(--hr-text-sm);
}

.hrm-context-empty i {
  color: var(--hr-text-subtle);
  flex-shrink: 0;
}

/* ─── ATTACHMENT (approval modal) ─── */

.hrm-approval-attachment {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-top: 0;
  background: var(--hr-bg-surface);
  border: 1px solid var(--hr-bg-subtle);
  border-top: none;
  border-radius: 0 0 6px 6px;
}

.hrm-approval-attachment__file-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--hr-accent-light);
  color: var(--hr-accent);
  font-size: var(--hr-text-md);
  text-decoration: none;
  transition: background 0.15s ease;
  flex-shrink: 0;
}

  .hrm-approval-attachment__file-btn:hover {
    background: var(--hr-blue-100);
    text-decoration: none;
  }

.hrm-approval-attachment__file-icon {
  pointer-events: none;
}

.hrm-approval-attachment__link {
  font-size: var(--hr-text-sm);
  color: var(--hr-accent);
  font-weight: 500;
  text-decoration: none;
}

  .hrm-approval-attachment__link:hover {
    color: var(--hr-accent-hover);
    text-decoration: underline;
  }

  .hrm-approval-attachment__link--disabled {
    color: var(--hr-text-subtle);
    font-weight: 400;
    cursor: default;
  }

  .hrm-approval-attachment__link--disabled:hover {
    text-decoration: none;
    color: var(--hr-text-subtle);
  }

.hrm-approval-attachment__photo-btns {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.hrm-approval-attachment__photo-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: var(--hr-text-xs);
  font-weight: 500;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.15s ease;
}

.hrm-approval-attachment__photo-btn--new {
  background: var(--hr-success-light);
  color: var(--hr-success-hover);
}

  .hrm-approval-attachment__photo-btn--new:hover {
    background: var(--hr-success-border);
    text-decoration: none;
  }

.hrm-approval-attachment__photo-btn--old {
  background: var(--hr-orange-light);
  color: var(--hr-danger-darker);
}

  .hrm-approval-attachment__photo-btn--old:hover {
    background: var(--hr-icon-orange-chip);
    text-decoration: none;
  }

.hrm-loading-overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 10;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  font-size: var(--hr-text-sm);
  font-weight: 600;
  color: var(--hr-text-body);
}

  .hrm-loading-overlay--active {
    display: flex;
  }

/* ─── UPLOAD ZONE (dark file drop/preview area inside modals) ─── */

.hr-upload-zone {
  border-radius: 4px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
}

.hr-upload-zone > * {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.hr-upload-zone__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
}

/* ─── MODAL TABS ────────────────────────────────────────────────────────────── */

/* Body variant: sizes to tallest tab's content; capped at 82vh on small viewports.
   No fixed height — grid stacking (below) keeps all tabs the same height without flicker. */
.hrm-modal__body--tabs {
  padding: 0;
  max-height: 82vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Identity strip — always visible above tabs */
.hrm-modal__identity {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--hr-accent-light);
  border-bottom: 1px solid var(--hr-accent-border);
  flex-shrink: 0;
}

.hrm-modal__identity > i {
  font-size: var(--hr-text-2xl);
  color: var(--hr-accent);
  flex-shrink: 0;
}

.hrm-modal__identity-staffno {
  font-family: var(--hr-font-heading);
  font-size: var(--hr-text-md);
  font-weight: 700;
  color: var(--hr-blue-800);
  background: var(--hr-blue-100);
  border: 1px solid var(--hr-blue-300);
  border-radius: 4px;
  padding: 2px 8px;
  white-space: nowrap;
}

.hrm-modal__identity-hint {
  font-size: var(--hr-text-xs);
  color: var(--hr-text-body);
  line-height: 1.4;
}

/* Tabs container */
.hrm-tabs {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Tab navigation bar */
.hrm-tabs__nav {
  display: flex;
  border-bottom: 2px solid var(--hr-border);
  background: var(--hr-bg-surface);
  padding: 0 16px;
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.hrm-tabs__nav::-webkit-scrollbar {
  display: none;
}

/* Individual tab button */
.hrm-tab__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  background: transparent;
  font-family: var(--hr-font-body);
  font-size: var(--hr-text-xs);
  font-weight: 500;
  color: var(--hr-text-muted);
  cursor: pointer;
  white-space: nowrap;
  /* Pinned, not inherited: a <button> tab takes the host's body line-height, and the Reporting
     master's 1.43 made every strip there 1.5px taller than the JobProfileAdmin baseline
     (measured 2026-09-17 on Organogram and IntegrationFiles: 39.1px vs 37.6px). */
  line-height: normal;
  text-decoration: none;          /* tabs are often asp:LinkButton anchors */
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  outline: none;
}

.hrm-tab__btn:hover {
  color: var(--hr-text-secondary);
  background: var(--hr-bg-subtle);
  text-decoration: none;
}

.hrm-tab__btn:focus-visible {
  box-shadow: inset 0 0 0 2px var(--hr-accent);
  border-radius: 4px 4px 0 0;
}

.hrm-tab__btn--active {
  color: var(--hr-accent-hover);
  border-bottom-color: var(--hr-accent-hover);
  font-weight: 600;
}

.hrm-tab__btn i {
  font-size: var(--hr-text-xs);
  opacity: 0.85;
}

/* A count of what needs attention on a tab ("Documents 2"). The number only; what it counts goes
   in an hr-sr-only span beside it, since a bare number in a tab name says nothing to a screen
   reader. First use: PortalCaseReview (2026-10-24). */
.hrm-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--hr-warning-lighter);
  color: var(--hr-warning-text);
  font-size: var(--hr-text-3xs);
  font-weight: 700;
  line-height: 1;
}

/* Locked/disabled tab (e.g. a step that must be completed before this tab unlocks) */
.hrm-tab__btn--disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* Content area: CSS grid so all panels stack in the same cell.
   The cell auto-sizes to the tallest panel — zero height flicker on tab switch.
   Padding lives on each panel so inactive panels still contribute their full height. */
.hrm-tabs__content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  align-items: start;
}

/* Tab panels — all stacked in the same grid cell.
   visibility:hidden keeps them in layout (so the grid knows their height)
   but makes them invisible and removes them from keyboard/pointer interaction. */
.hrm-tab__panel {
  grid-area: 1 / 1;
  padding: 20px 24px 16px;
  visibility: hidden;
  pointer-events: none;
}

.hrm-tab__panel--active {
  visibility: visible;
  pointer-events: auto;
}

/* Minimum-height variant: for server-rendered tabs where only the active panel
   exists in the DOM (e.g. WebForms MultiView postback tabs). Grid-stacking
   above can't equalize heights without all panels present, so this holds a FLOOR
   under the content area instead, which is what stops a short tab collapsing the
   page and throwing the tab strip down the screen on a switch.
   Sized to comfortably fit the tallest natural tab (document viewer + comments).
   It does not cap anything: a tab with more content than this simply grows, and
   the document viewer keeps its own internal scroll (unavoidable for a tall PDF).
   A tab set whose panels differ by far more than this wants --auto plus a
   page-scoped floor instead — see .hr-redeployment-workflow in hrflex.page.css. */
.hrm-tabs--fixed .hrm-tabs__content {
  /* MIN-height, not height. .hrm-tabs__content carries `flex: 1` above, so its flex-basis is 0%
     - and flex-basis beats `height` on a flex item's main axis. This rule declared `height: 530px`
     from the day it was written and never once took effect; the modifier looked like it pinned the
     tab area and did nothing at all (found 2026-08-21, measured on msExitMgmt/Admin/AllRequests:
     Resignation Letter 510px against Feedback and CheckList at 566px). What actually held those two
     up was the --hrm-fixed-tab-height variable below, read by .hrm-modal__tab-fill - which is why
     the gap was small enough to go unnoticed. A floor, not a cap: nothing here may clip a tab whose
     content is genuinely taller. */
  min-height: 530px;
  --hrm-fixed-tab-height: 530px;
}

/* Auto-height variant: for full-page tab sets (not modal ones) whose panels differ
   wildly in height — e.g. a short progress dashboard alongside a long analytics one.
   The grid-stacking above sizes the content area to the tallest panel, which on a page
   leaves hundreds of pixels of dead space under the shorter tab, so this collapses
   inactive panels out of layout instead and lets the page grow naturally.
   Charts inside a collapsed panel initialise on first reveal — HRFlexEChart already
   waits for its element to have width before calling echarts.init. */
.hrm-tabs--auto .hrm-tabs__content {
  display: block;
  overflow-y: visible;
}

.hrm-tabs--auto .hrm-tab__panel {
  display: none;
  visibility: visible;
  pointer-events: auto;
}

.hrm-tabs--auto .hrm-tab__panel--active {
  display: block;
}

.hrm-modal__tab-fill {
  display: flex;
  flex-direction: column;
  min-height: var(--hrm-fixed-tab-height, 530px);
}

.hrm-modal__tab-fill > .hrm-modal__scroll-section {
  flex: 1 1 auto;
  max-height: none;
}

/* Full-width label+field pair inside a 2-column form grid.
   Uses CSS subgrid so the label column inherits the outer grid's
   auto-sized track — keeping it perfectly aligned with other rows. */
.hrm-form-grid__pair--full {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: start;
}

.hrm-form-grid__pair--full > .hrm-form-grid__label {
  grid-column: 1;
}

.hrm-form-grid__pair--full > .hrm-form-grid__field {
  grid-column: 2 / -1;
}

/* A full-width pair whose field is ONE line (a select, a text box) centres its label the way an
   ordinary grid row does. The base pair top-aligns for multi-line fields (pair those with
   __label--top); used alone on a single-line field it sat its label 6px above the box's middle,
   out of line with the paired rows beside it (msPerformancePlanning/Home.aspx KPI dialog). */
.hrm-form-grid__pair--full.hrm-form-grid__pair--center {
  align-items: center;
}

/* A server-toggled block of label+field pairs inside a form grid (an asp:Panel
   that shows some rows only in Add mode). The Panel renders a div, which would
   otherwise be ONE grid cell holding every pair; display:contents lifts its
   children into the grid so their labels share the outer label column.
   Visible=False renders nothing, so the hidden state needs no rule. */
.hrm-form-grid__contents {
  display: contents;
}

/* Read-only record context shown above a modal's form grid (Edit mode). */
.hrm-modal__body > .hr-form-section + .hrm-form-grid {
  margin-top: 16px;
}

/* Top-align a label (for multiline fields) */
.hrm-form-grid__label--top {
  align-self: start;
  padding-top: 5px;
}

/* ── Tab validation error indicators ──
   Shown when client-side validation fails on fields inside a tab panel.
   refreshTabErrors() in hrflex.page.js injects/removes these dynamically. */

/* Inactive errored tab: red label + icon */
.hrm-tab__btn--has-error:not(.hrm-tab__btn--active) {
  color: var(--hr-danger-hover);
}

/* Active errored tab: keep blue underline (user sees inline errors), just badge */
.hrm-tab__btn--active.hrm-tab__btn--has-error .hrm-tab__error-badge {
  background: var(--hr-danger-hover);
}

/* Error count badge */
.hrm-tab__error-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--hr-danger-hover);
  color: var(--hr-text-inverse);
  font-size: var(--hr-text-2xs);
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  margin-left: 2px;
  animation: hrTabBadgeIn 0.15s ease;
}

@keyframes hrTabBadgeIn {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.hr-upload-zone__hint {
  color: var(--hr-border-strong);
  padding-top: 10px;
}

.hr-upload-zone__preview {
  padding: 5px;
  width: 100%;
}

.hr-upload-zone__preview-frame {
  max-height: 281px;
  overflow: hidden;
}

.hr-upload-zone__meta {
  padding: 10px 0;
  text-align: left;
}

.hr-upload-zone__filename {
  color: var(--hr-border-strong);
}

.hr-upload-zone__remove {
  float: right;
}

.hr-upload-zone__iframe {
  border: none;
}

/* ─── ATTACHMENT ROW (inline icon + link for viewing attached documents) ─── */

.hr-attachment-row {
  padding: 8px 0;
}

/* ─── MODAL DETAIL GRID (change-tracking: field / old value / new value) ─── */
/* Used in ucRequestApproval for showing before/after field values */

.hr-modal-detail-grid {
  width: 100%;
  border-collapse: collapse;
}

  .hr-modal-detail-grid th {
    font-size: var(--hr-text-sm);
    font-weight: 600;
    color: var(--hr-text-body);
    text-align: left;
    padding: 8px 10px;
    background: var(--hr-bg-surface);
    border-bottom: 2px solid var(--hr-border-light);
    white-space: nowrap;
  }

  .hr-modal-detail-grid td {
    font-size: var(--hr-text-sm);
    padding: 8px 10px;
    border-bottom: 1px solid var(--hr-bg-subtle);
    color: var(--hr-text-secondary);
  }

  .hr-modal-detail-grid tr:hover td {
    background: var(--hr-bg-surface);
  }

.hr-modal-detail-grid--field-label {
  font-weight: 600;
  color: var(--hr-accent);
  white-space: nowrap;
  text-align: right;
  width: 1%;
}

.hr-modal-detail-grid--old-value {
  color: var(--hr-warning-dark);
}

.hr-modal-detail-grid--new-value {
  color: var(--hr-success-hover);
}

/* ─── MODAL FORM CONTROLS ─── */
/* Labels, inputs, textareas and validation inside modal bodies */

.hr-modal-form__group {
  margin-bottom: 16px;
}

.hr-modal-form__label {
  display: block;
  font-size: var(--hr-text-sm);
  font-weight: 600;
  color: var(--hr-text-body);
  margin-bottom: 6px;
}

.hr-modal-form__input {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  font-size: var(--hr-text-base);
  font-family: inherit;
  border: 1px solid var(--hr-border-light);
  border-radius: 6px;
  background: var(--hr-bg-white);
  color: var(--hr-text-default);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}

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

.hr-password-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 4px;
  border-radius: 6px;
  background: var(--hr-bg-subtle);
  border: 1px solid var(--hr-border-light);
  color: var(--hr-text-muted);
  font-size: var(--hr-text-sm);
  line-height: 1.5;
}

  .hr-password-hint i {
    color: var(--hr-accent);
    margin-top: 2px;
  }

textarea.hr-modal-form__input {
  height: auto;
  min-height: 60px;
  padding: 8px 10px;
  line-height: 1.5;
  resize: vertical;
}

/* hr-modal-form__validation — RETIRED, use hr-validator from hrflex.validator.css */

/* ─── RESPONSIVE: 2/3-column grids collapse to single column ─── */

@media (max-width: 768px) {
  .hrm-decision-context__grid {
    grid-template-columns: 1fr;
  }

  .hrm-decision-brief__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hrm-review-panel__grid {
    grid-template-columns: 1fr;
  }

  .hrm-form-grid--cols-2 {
    grid-template-columns: auto 1fr;
  }

  .hrm-form-grid--cols-2 > .hrm-form-grid__label:nth-child(4n+3),
  .hrm-form-grid--cols-2 > .hrm-form-grid__label.hrm-form-grid__label--col2 {
    padding-left: 0;
  }
  /* One column of pairs here: the pinned columns above would open a third track. */
  .hrm-form-grid--cols-2 > .hrm-form-grid__label.hrm-form-grid__label--col1,
  .hrm-form-grid--cols-2 > .hrm-form-grid__label.hrm-form-grid__label--col2 {
    grid-column: auto;
  }

  .hrm-form-grid--cols-3 {
    grid-template-columns: auto 1fr;
  }

  .hrm-form-grid--cols-3 > .hrm-form-grid__label:nth-child(6n+3),
  .hrm-form-grid--cols-3 > .hrm-form-grid__label:nth-child(6n+5) {
    padding-left: 0;
  }

  .hrm-exit-reason {
    grid-template-columns: 1fr;
  }
}
/* ─── SESSION EXPIRY WARNING POPUP ─── */

/* Overlay: flex-centered so the popup floats above everything */
/* Hidden by default; JS adds --active class to show (never use inline display toggle
   because !important display:flex would beat style="display:none"). */
.hr-session-warn-overlay {
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200000 !important; /* above all other modals */
}

.hr-session-warn-overlay.hr-session-warn--active {
  display: flex;
}

/* Modal panel — fixed width, centered by overlay flex */
.hr-session-warn {
  width: 360px;
  animation: hrSwFadeIn 0.2s ease;
}

@keyframes hrSwFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Body: column-flex, centered content */
.hr-session-warn__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 24px 20px;
  text-align: center;
}

.hr-session-warn__msg {
  color: var(--hr-text-body);
  font-size: var(--hr-text-md, 14px);
  line-height: 1.5;
  margin: 0;
}

/* Countdown ring */
.hr-session-warn__ring-wrap {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.hr-session-warn__ring {
  width: 80px;
  height: 80px;
  transform: rotate(-90deg); /* arc originates from the top (12 o'clock) */
  display: block;
}

.hr-session-warn__ring-track {
  fill: none;
  stroke: var(--hr-border);
  stroke-width: 6;
}

.hr-session-warn__ring-arc {
  fill: none;
  stroke: var(--hr-accent);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.85s linear, stroke 0.3s ease;
}

.hr-session-warn__ring-arc--urgent {
  stroke: var(--hr-danger); /* red in final 30 seconds */
}

/* Countdown number — centred over the ring */
.hr-session-warn__count {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--hr-text-2xl);
  font-weight: 700;
  color: var(--hr-text-default);
  font-family: var(--hr-font-body, 'DM Sans', sans-serif);
  line-height: 1;
}

.hr-session-warn__count--urgent {
  color: var(--hr-danger-hover);
}

/* Footer modifier: center-align buttons (default is flex-end) */
.hrm-modal__footer--centered {
  justify-content: center;
}

/* A footer item pinned to the start edge (e.g. a data-source attribution) while the rest stay at the end. */
.hrm-modal__footer-start {
  margin-right: auto;
}
/* ── KPI Input Option Builder ─────────────────────────────────────── */

/* Column-stack wrapper — needed because hrm-form-grid__field is display:flex
   (row direction). Without this, header/rows/button/hint sit side-by-side. */
.hr-kpi-option__builder {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.hr-kpi-option__header,
.hr-kpi-option__row {
  display: grid;
  grid-template-columns: 1fr 130px 32px;
  gap: 6px;
  align-items: center;
}
.hr-kpi-option__header {
  font-size: var(--hr-text-xs);
  font-weight: 600;
  color: var(--hr-text-muted);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hr-border);
  margin-bottom: 6px;
}
.hr-kpi-option__row {
  margin-bottom: 4px;
}
.hr-kpi-option__val {
  font-family: var(--hr-font-mono);
}
.hr-kpi-option__remove {
  width: 28px;
  height: 28px;
  border: 1px solid var(--hr-danger-border);
  background: var(--hr-bg-white);
  border-radius: 4px;
  color: var(--hr-danger);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--hr-text-xs);
  flex-shrink: 0;
}
.hr-kpi-option__remove:hover {
  background: var(--hr-danger-light);
  border-color: var(--hr-danger);
}
.hr-kpi-option__hint {
  font-size: var(--hr-text-xs);
  color: var(--hr-text-muted);
  margin-top: 6px;
  margin-bottom: 0;
}

/* Compact input widths — for number / code fields inside hrm-form-grid__field--compact */
.hr-input--sm { width:  80px; }
.hr-input--md { width: 120px; }
/* Full-width input — for textareas/inputs outside an hrm-form-grid (which normally sets width) */
.hr-input--full { width: 100%; }


/* ─── LIST BUILDER (step-entry modal layout) ─── */

/* Flex row: list occupies remaining width, action buttons sit to the right */
.hrm-list-builder {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 8px;
}

/* The list/select element stretches to fill available space */
.hrm-list-builder__list {
  flex: 1;
  min-width: 0;
  font-family: var(--hr-font-mono);
}

/* Vertical stack of reorder/delete action icons */
.hrm-list-builder__controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
}

/* Right-aligned row for the "Add Step" / submit button */
.hrm-list-builder__add-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

/* Scrollable container for CheckBoxList in modals (e.g., category selection) */
.hrm-checkbox-scroll {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--hr-border, #e2e8f0);
  border-radius: 6px;
  padding: 8px 12px;
}

/* ─── FIELDSET (titled section card inside a form modal) ─── */
/* Groups related fields under an icon + uppercase kicker with an optional
   right-aligned hint. Stack several to give a long form a scannable spine.
   <div class="hrm-fieldset">
     <div class="hrm-fieldset__head">
       <span class="hrm-fieldset__title"><i class="fas fa-..."></i> Title</span>
       <span class="hrm-fieldset__hint">One-sentence helper.</span>
     </div>
     ...fields...
   </div> */

.hrm-fieldset {
  border: 1px solid var(--hr-border-light);
  border-radius: 8px;
  padding: 12px 14px 14px;
  background: var(--hr-bg-white);
}

.hrm-fieldset + .hrm-fieldset {
  margin-top: 12px;
}

.hrm-fieldset__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--hr-border-light);
}

.hrm-fieldset__title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--hr-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--hr-text-default);
  white-space: nowrap;
}

.hrm-fieldset__title i {
  color: var(--hr-accent);
}

.hrm-fieldset__hint {
  font-size: var(--hr-text-xs);
  color: var(--hr-text-muted);
  text-align: right;
  min-width: 0;
}

/* ─── METRIC FIELDS (equal-width labeled inputs across one line) ─── */
/* For short numeric/choice fields that read as a set (counts, durations,
   visibility choices). Label sits above its control; optional unit suffix
   beside the input and a muted helper line below. */

.hrm-metric-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 12px 14px;
}

.hrm-metric {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.hrm-metric__lbl {
  font-size: var(--hr-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--hr-text-subtle);
  white-space: nowrap;
}

.hrm-metric__ctl {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.hrm-metric__ctl > .hr-filter-bar__input,
.hrm-metric__ctl > .hr-filter-bar__select {
  flex: 1;
  min-width: 0;
  width: auto;
}

.hrm-metric__unit {
  flex: 0 0 auto;
  font-size: var(--hr-text-xs);
  color: var(--hr-text-muted);
  white-space: nowrap;
}

.hrm-metric__help {
  font-size: var(--hr-text-xs);
  color: var(--hr-text-muted);
  line-height: 1.45;
}

/* ─── TOGGLE CARDS (checkbox + description as a selectable card) ─── */
/* Each card wraps one asp:CheckBox (hr-checkbox) and a muted description.
   A checked card tints so active requirements read at a glance. */

.hrm-toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 10px;
}

.hrm-toggle-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--hr-bg-surface);
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.hrm-toggle-card:hover {
  border-color: var(--hr-accent);
}

.hrm-toggle-card:has(input[type="checkbox"]:checked) {
  background: var(--hr-accent-light);
  border-color: var(--hr-accent-border);
}

.hrm-toggle-card .hr-checkbox label {
  font-weight: 600;
  color: var(--hr-text-default);
}

.hrm-toggle-card__desc {
  padding-left: 26px;
  font-size: var(--hr-text-xs);
  color: var(--hr-text-muted);
  line-height: 1.45;
}

/* ─── CANDIDATE SELECTION CARD (search-and-select inside scheduling modal) ─── */

.hr-candidate-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--hr-accent-light);
  border: 1px solid var(--hr-accent-border);
  border-radius: 8px;
  margin: 8px 0;
}

.hr-candidate-card__avatar {
  font-size: var(--hr-text-3xl);
  color: var(--hr-accent);
  line-height: 1;
  flex-shrink: 0;
}

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

.hr-candidate-card__name {
  font-size: var(--hr-text-md);
  font-weight: 600;
  color: var(--hr-text-default);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hr-candidate-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--hr-text-xs);
  color: var(--hr-text-body);
}

.hr-candidate-card__id {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ─── GRADE BREAKDOWN BAND LIST (ManageScoringModels breakdown modal) ─── */

.hr-grade-list {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 4px;
}

.hr-grade-row > td {
  background: var(--hr-bg-surface);
  border-top: 1px solid var(--hr-border);
  border-bottom: 1px solid var(--hr-border);
  padding: 8px 10px;
  vertical-align: middle;
  transition: background 0.12s, border-color 0.12s;
}

.hr-grade-row > td:first-child {
  border-left: 1px solid var(--hr-border);
  border-radius: 6px 0 0 6px;
  padding-left: 12px;
}

.hr-grade-row > td:last-child {
  border-right: 1px solid var(--hr-border);
  border-radius: 0 6px 6px 0;
  padding-right: 8px;
}

.hr-grade-row:hover > td {
  background: var(--hr-accent-light);
  border-color: var(--hr-accent-border);
}

.hr-grade-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 28px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: var(--hr-text-base);
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--hr-blue-100);
  color: var(--hr-blue-700);
  font-family: var(--hr-font-mono);
  white-space: nowrap;
}

.hr-grade-badge--high { background: var(--hr-success-border); color: var(--hr-success-dark); }
.hr-grade-badge--mid  { background: var(--hr-blue-100); color: var(--hr-blue-700); }
.hr-grade-badge--warn { background: var(--hr-warning-lighter); color: var(--hr-warning-text); }
.hr-grade-badge--low  { background: var(--hr-danger-light); color: var(--hr-danger-darker); }

.hr-grade-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hr-grade-range__val {
  font-size: var(--hr-text-base);
  font-weight: 600;
  color: var(--hr-text-body);
  min-width: 34px;
  font-family: var(--hr-font-mono);
}

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

.hr-grade-range__track {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--hr-border);
  position: relative;
  overflow: hidden;
  min-width: 60px;
}

.hr-grade-range__fill {
  position: absolute;
  top: 0;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #60a5fa, #3b82f6);
}

.hr-grade-empty {
  padding: 20px 16px;
  text-align: center;
  color: var(--hr-text-muted);
  font-size: var(--hr-text-base);
}

.hr-grade-empty i {
  display: block;
  font-size: var(--hr-text-2xl);
  color: var(--hr-border-strong);
  margin-bottom: 6px;
}

/* ─── HERO CARD (modal summary banner — msLeave/Admin/FinancialYr.aspx) ─── */

.hrm-hero {
  background: var(--hr-bg-surface);
  border: 1px solid var(--hr-border);
  border-radius: 10px;
  padding: 18px 20px;
}

.hrm-hero__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

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

.hrm-hero__title i {
  color: var(--hr-accent);
  margin-right: 8px;
}

.hrm-hero__badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.hrm-hero__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  font-size: var(--hr-text-xs);
  color: var(--hr-text-muted);
}

.hrm-hero__meta-mid {
  font-weight: 600;
  color: var(--hr-text-secondary);
}

.hrm-hero__footnote {
  margin-top: 10px;
  font-size: var(--hr-text-xs);
  color: var(--hr-text-subtle);
}

/* ---------------------------------------------------------------------------
   Case conversation thread (roadmap F3)

   A message list, which nothing in the design system already does: hrm-detail-table
   is label+value, hr-callout is a single notice, and the leave timeline is a
   calendar. Lives here because the thread only ever renders inside a modal, and
   hrflex.modal.css is the single source of truth for modal CSS.

   --internal marks an HR-only note. The employee-facing page never queries one, so
   this styling exists for the agent's view of the same thread: the visual
   difference is a second line of defence, not the mechanism - the filtering
   happens in SQL.
   --------------------------------------------------------------------------- */
.hrm-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.hrm-thread__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--hr-bg-subtle);
  border-left: 3px solid var(--hr-border);
  border-radius: 6px;
}

.hrm-thread__item--internal {
  background: var(--hr-warning-lighter);
  border-left-color: var(--hr-warning-border);
}

.hrm-thread__meta {
  font-size: var(--hr-text-xs);
  font-weight: 600;
  color: var(--hr-text-muted);
}

.hrm-thread__text {
  font-size: var(--hr-text-sm);
  color: var(--hr-text-default);
  white-space: pre-wrap;
}