/*
 * =============================================================
 * icori.css -  iCORI Application Styles
 * =============================================================
 *
 * PURPOSE
 * -------
 * Styles specific to the iCORI application. Not part of the
 * Massachusetts Design System or the shared xfact template.
 *
 * DEPENDENCIES
 * ------------
 * Must be loaded after xfact-mds.css and xfact-custom-style.css.
 * =============================================================
 */


/* =============================================================
   STICKY NAV BAR - anchor offset
   =============================================================
   The nav bar pins to the top of the viewport at every width while
   everything above it (state banner, utility nav, site header)
   scrolls away; see Section 49 in xfact-mds.css for the sticky
   rule itself.

   Keep in-page anchors - including the "Skip to main content"
   link - from landing underneath the pinned bar. --icori-nav-h is
   measured by the nav controller in base.html.
   ============================================================= */

html {
  scroll-padding-top: var(--icori-nav-h, 0px);
}


/* =============================================================
   HEADINGS
   ============================================================= */

/* Pairs with .mds-heading-2xs (xfact-mds.css) on the same element for the
   canonical MDS "Heading 2XS" typography - this class only tightens the
   bottom margin for this page's tighter section spacing. Unlike .xf-h2, no
   decorative accent-bar ::after, since that's iCORI's own embellishment
   rather than an MDS pattern. */
.icori-section-heading {
  margin: 0 0 var(--space-4);
}

@media (max-width: 480px) {
  .icori-section-heading {
    font-size: var(--type-size-base);
  }
}


/* =============================================================
   NOTICE SPACING
   ============================================================= */

/* Vertical gap around a homepage notice box (Consent Request Account /
   Important information) relative to the surrounding table. Deliberately
   its own class rather than baked into .shared-accounts-msg - that class is
   also used on welcome.html at a different margin (1.5rem, below a two-
   column layout), so changing its value here would leak into that page. */
/*.icori-homepage-notice {*/
/*  margin: 3rem 0 0 0;*/
/*  max-width: 100%;*/
/*}*/


/* =============================================================
   BUTTONS
   ============================================================= */

/* Cart page H1 - suppress default title bar bottom margin */
.icori-cart-header {
  margin-bottom: 0;
}


/* Cancel button icon - override MDS white filter; grey bg needs dark icon */
.xf-btn--cancel img {
  filter: brightness(0);
}

/* iCORI cart button - duckling yellow with dark text/icon */
.icori-cart-btn {
  background-color: var(--color-duckling-yellow);
  border-color: var(--color-duckling-yellow);
  color: var(--color-black);
  font-size: var(--type-size-md);
  font-weight: 500;
}

.icori-cart-btn:hover {
  background-color: #d9ae0f;
  border-color: #d9ae0f;
  color: var(--color-black);
}

.icori-cart-btn img {
  filter: none;
  width: 1.2em;
  height: 1.2em;
}

/* margin-left:auto lives on the wrapper, not the button, so the button's
   own box is unaffected by what pushes it to the far right of the bar. */
.icori-cart-btn-wrap {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: auto;
}


/* Full-width button - spans its container, text/icon centered */
.icori-btn--full {
  width: 100%;
  justify-content: center;
}

/* xf-btn-group with a form-wrapped button (e.g. "Send email again" in the
   consent DUPLICATE result). The vendor rule `.xf-btn-group > .mds-btn { flex:1 }`
   only reaches direct-child buttons, so the bare <a> siblings grew/shrank to
   equal thirds while the button nested in a POST <form> stayed content-sized.
   Wrapping the button in a plain flex item (`form { flex:1 }`) still under-sized
   it, because the extra box nests the button one level away from the group's
   flex distribution. Instead take the form's box OUT of the layout with
   `display:contents` so its submit button becomes a *direct* flex child of the
   group (the form element still submits - only its box is removed), then give
   that button the same `flex:1`. Now all three controls are true flex siblings
   and size identically.
   `!important` is required only to beat the templates' legacy inline
   `style="display:inline"` on these forms (a non-important inline style loses
   to an important stylesheet rule); it serves no purpose once the form is a
   flex-group child, so this neutralizes it app-wide without touching markup. */
.xf-btn-group > form {
  display: contents !important;
}
.xf-btn-group > form > .mds-btn {
  flex: 1;
}


/* =============================================================
   FOOTER
   ============================================================= */

/* DCJIS legal disclaimer in the footer */
.icori-footer-legal {
  font-size: var(--type-size-sm);
  line-height: 1.5;
  color: #6b7280;
  max-width: 100%;
  margin: 0.75rem 0;
  text-align: left;
}


/* =============================================================
   RESULTS TABLE - column filter row
   ============================================================= */

#results-filter-row th {
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  background-color: var(--color-bg-secondary, #f3f4f6);
  border-bottom: 1px solid var(--color-border, #d1d5db);
}

#results-filter-row .custom-datatable-toolbar__search-input {
  font-size: var(--type-size-xs, 0.75rem);
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  padding-left: var(--space-7, 1.75rem);
  width: 100%;
  min-width: 0;
}

#results-filter-row select.custom-datatable-toolbar__search-input {
  padding-left: var(--space-2, 0.5rem);
}

#results-filter-row .custom-datatable-toolbar__search-icon {
  width: 0.875rem;
  height: 0.875rem;
}


/* =============================================================
   RESULT BADGES
   ============================================================= */

/* Matches the MDS Badge component (Figma node 740-8660 / 740-8662): flex-centered,
   uniform 8px padding, 4px radius (MDS's "radius-sm" - iCORI's own --radius-sm is a
   different 2px step, see --radius-md below), semibold 14px, 1px letter-spacing, and
   a 1px border in the variant color (the old fill-only badges had none). Sized to
   width:100% of the (fixed-width, table-layout:fixed) Result column instead of
   inline-block-to-content, so every row's badge renders the same width regardless of
   which variant's text is longer. */
.icori-result-badge {
  /* Deliberately NOT white-space:nowrap - table-layout:fixed gives this
     column a fixed width, but doesn't clip overflow; forcing one line here
     let text that doesn't fit spill visually into the Details column
     instead of wrapping inside its own cell. Wrapping is the safety net -
     --col-result is sized wide enough that it shouldn't be needed in
     practice (see icori.css's --col-* block), but a column this narrow
     should degrade to two lines, not overlap its neighbor. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  max-width: 100%;
  font-size: var(--type-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  line-height: 1;
}

.icori-result-badge--criminal {
  background-color: #fef9e8;
  border-color: #ddb118;
  color: #141414;
}

.icori-result-badge--no-cori {
  background-color: var(--color-bay-blue-100);
  border-color: var(--color-primary-border);
  color: var(--color-primary-deep);
}

/* =============================================================
   CONSENT HISTORY - scoped overrides for badge and button consistency.
   Both .mds-badge and .mds-btn size to content by default, producing
   uneven columns when the label text lengths differ. These rules fix
   that by enforcing a shared min-width within .consent-history-table
   without affecting any other page that uses those classes.
   ============================================================= */

/* Status badges: Active / Expired / Revoked - equal width, centred text */
.consent-history-table .mds-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.75rem;   /* comfortably fits "REVOKED" at --type-size-sm */
  padding: var(--space-2) var(--space-3);
}

/* Action buttons: Perform CORI / Resend request / Review / Deactivate -
   equal width so the Actions column doesn't shift between row types.
   mds-btn already provides inline-flex + gap:space-2 for the icon. */
.consent-history-table .mds-btn {
  min-width: 9.5rem;    /* wide enough for "Resend request" + icon */
  justify-content: center;
}

/* 17853: CRA view of the three Sent-requests tables (with the Client organization column). Same
   approach as the CRA results table: table-layout: fixed with per-table column widths (Open and
   Declined in % summing to 100%; Accepted below), and headers wrap inside their cells. Free text
   wraps at word boundaries; a word too long for its column (a long email) breaks only then, and
   emails break after "@" (template <wbr>). Desktop only - card mode (<=1035px) lays the cells out
   itself. Non-CRA tables keep auto layout. */
@media (min-width: 1036px) {
  .consent-history-table--grid { table-layout: fixed; }
  .consent-history-table--grid thead th { white-space: normal; }
  .consent-history-table--grid td { overflow-wrap: break-word; }

  /* Open: No | Request date/time | Individual | Account email | Client organization */
  .consent-history-table--open th.ch-no     { width: 6%; }
  .consent-history-table--open th.ch-date   { width: 16%; }
  .consent-history-table--open th.ch-person { width: 22%; }
  .consent-history-table--open th.ch-email  { width: 30%; }
  .consent-history-table--open th.ch-client { width: 26%; }

  /* Declined: ... | Client organization | Actions */
  .consent-history-table--declined th.ch-no      { width: 6%; }
  .consent-history-table--declined th.ch-date    { width: 14%; }
  .consent-history-table--declined th.ch-person  { width: 18%; }
  .consent-history-table--declined th.ch-email   { width: 24%; }
  .consent-history-table--declined th.ch-client  { width: 20%; }
  .consent-history-table--declined th.ch-actions { width: 18%; }

  /* Accepted (8 columns): fixed-content columns get fixed widths - Status fits the one-line
     "No longer a client" badge, Actions the "Resend request" button - and Individual, Account
     email and Client organization (no width) share the rest equally. */
  .consent-history-table--accepted th.ch-no      { width: 3.75rem; }
  .consent-history-table--accepted th.ch-date,
  .consent-history-table--accepted th.ch-end     { width: 7.5rem; }
  .consent-history-table--accepted th.ch-status  { width: 14rem; }
  .consent-history-table--accepted th.ch-actions { width: 11.5rem; }
}
@media (min-width: 1036px) and (max-width: 1279px) {
  /* .custom-datatable doubled up: beats the later .custom-datatable th/td padding (same file). */
  .custom-datatable.consent-history-table--grid thead th,
  .custom-datatable.consent-history-table--grid tbody td {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  /* Accepted with the narrower 0.5rem cell padding: same columns, 1rem less each. */
  .consent-history-table--accepted th.ch-no      { width: 2.75rem; }
  .consent-history-table--accepted th.ch-date,
  .consent-history-table--accepted th.ch-end     { width: 6.5rem; }
  .consent-history-table--accepted th.ch-status  { width: 13rem; }
  .consent-history-table--accepted th.ch-actions { width: 10.5rem; }
}

/* Empty-state placeholder for the Result/Actions cells of a still-Pending
   request - a plain dash instead of leaving the cell fully blank. Status
   already shows "Pending" for the row, so this deliberately doesn't repeat
   that word here. */
.icori-cell-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-disabled);
}


/* =============================================================
   WELCOME PAGE
   ============================================================= */

/* Shared accounts warning - sits above the login callouts in the right
   column now, not a full-width row below the grid, so the spacing it needs
   is below itself rather than above. */
.shared-accounts-msg {
  margin-bottom: 1.5rem;
}

.icori-action-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-link);
  font-size: var(--type-size-base);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.icori-action-link:hover {
  color: var(--color-text-link-hover);
}

.icori-action-link:active {
  color: var(--color-bay-blue-active);
}

.icori-action-link--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.icori-action-link img {
  flex-shrink: 0;
}

.icori-action-link svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Toolbar action-link label: visible text on desktop; hidden down to an
   icon-only square button on mobile (see icori-responsive.css), matching
   the MDS outline Icon Button component. The element stays in the DOM (not
   removed) purely for the desktop-visible copy - the aria-label on each
   control (not this text) supplies the accessible name at every width so
   hiding it on mobile doesn't strip the button's name. */

/* Vertical divider between toolbar action links (Download selected / View
   all requests / Expand all) - a plain rule, not another link, so no hover
   state or focus stop. */
.xf-toolbar-divider {
  width: 1px;
  align-self: stretch;
  background-color: var(--color-border);
}

/* "Expand all" reuses .icori-action-link but is a <button> (it has no href
   to navigate to), which carries browser-default border/background/padding
   - reset those without touching the class's own font-size/weight (a type+
   class selector like this outranks the plain-class rule above, so a
   `font: inherit` shorthand here would silently win and undo them).
   font-family is the one font property still worth resetting: unlike text
   elements, <button> doesn't inherit it from the page by default - it uses
   the browser's system UI font, which renders visibly heavier/lighter than
   Noto Sans even at the same numeric font-weight. */
button.icori-action-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
}


/* =============================================================
   ACCOUNT TYPE QUESTIONS
   ============================================================= */

.icori-account-type-question {
  padding-top: 1rem;
}

.icori-account-type-question fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.icori-account-type-question legend {
  font-weight: var(--font-weight-bold, 700);
  font-size: var(--type-size-base, 1rem);
  color: var(--color-text-primary, #1a1a1a);
  padding: 0;
}

.icori-account-type-question__subtypes {
  margin-left: 3rem;
}

.icori-confirm-subsection {
  margin-left: 2.5rem;
}

.icori-radio-sub-description {
  padding-left: calc(20px + var(--space-3, 0.75rem));
}


/* =============================================================
   ACCOUNT TYPE SELECTION CARDS
   Card-grid replacement for the legacy Yes/No account-type
   questions. Each card is a checkbox-selectable option: a hidden
   native checkbox drives a custom box (top-left) and a selected
   highlight applied via the JS-toggled .is-selected class (kept
   off :has() for broader browser + 508 support).
   ============================================================= */

.icori-type-card-grid__label {
  display: block;
  font-weight: var(--font-weight-bold, 700);
  font-size: var(--type-size-base, 1rem);
  color: var(--color-text-primary, #1a1a1a);
  margin-top: var(--space-6, 1.5rem);
  margin-bottom: var(--space-3, 0.75rem);
}

.icori-type-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5, 1.25rem);
}

.icori-type-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2, 0.5rem);
  height: 100%;
  padding: var(--space-5, 1.25rem);
  padding-top: calc(var(--space-5, 1.25rem) + 1.5rem);
  border: 1px solid var(--color-border, #cccccc);
  border-radius: var(--radius-md, 8px);
  background-color: var(--color-bg-primary, #ffffff);
  cursor: pointer;
  transition: border-color var(--transition-fast, 0.15s),
              box-shadow var(--transition-fast, 0.15s),
              background-color var(--transition-fast, 0.15s);
}

.icori-type-card:hover {
  border-color: var(--color-accent, #388557);
  box-shadow: var(--shadow-md);
}

/* Selected state (class toggled by JS) */
.icori-type-card.is-selected {
  border-color: var(--color-accent, #388557);
  box-shadow: inset 0 0 0 1px var(--color-accent, #388557);
  background-color: var(--color-success-light, #e9f7ed);
}

/* --- Hidden native checkbox --- */
.icori-type-card__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Custom checkbox box (top-left) --- */
.icori-type-card__check {
  position: absolute;
  top: var(--space-4, 1rem);
  left: var(--space-4, 1rem);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border-dark, #767676);
  border-radius: var(--radius-xs, 4px);
  background-color: var(--color-white, #ffffff);
  transition: background-color var(--transition-fast, 0.15s),
              border-color var(--transition-fast, 0.15s);
}

.icori-type-card__check::after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M10.28 2.22a.75.75 0 0 1 0 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 1 1 1.06-1.06L4.25 7.19l4.97-4.97a.75.75 0 0 1 1.06 0z' fill='%23FFFFFF'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: opacity var(--transition-fast, 0.15s);
}

.icori-type-card__input:checked + .icori-type-card__check {
  background-color: var(--color-accent, #388557);
  border-color: var(--color-accent, #388557);
}

.icori-type-card__input:checked + .icori-type-card__check::after {
  opacity: 1;
}

/* Keyboard focus ring on the card */
.icori-type-card__input:focus-visible + .icori-type-card__check {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 2px;
}

/* --- NEW badge (top-right) --- */
.icori-type-card__badge {
  position: absolute;
  top: var(--space-4, 1rem);
  right: var(--space-4, 1rem);
}

/* --- Icon --- */
.icori-type-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent, #388557);
  margin-top: var(--space-2, 0.5rem);
  margin-bottom: var(--space-1, 0.25rem);
}

.icori-type-card__icon svg {
  width: 44px;
  height: 44px;
  display: block;
}

/* --- Text --- */
.icori-type-card__title {
  font-weight: var(--font-weight-bold, 700);
  font-size: var(--type-size-base, 1rem);
  color: var(--color-text-primary, #1a1a1a);
  line-height: var(--line-height-snug, 1.3);
}

.icori-type-card__desc {
  font-size: var(--type-size-sm, 0.875rem);
  color: var(--color-text-secondary, #4a4a4a);
  line-height: var(--line-height-normal, 1.5);
}

@media (max-width: 900px) {
  .icori-type-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .icori-type-card-grid {
    grid-template-columns: 1fr;
  }
}


/* =============================================================
   TABLE SORT HEADER - button reset
   xf-table__sort-header is styled for <a> elements; iCORI uses
   <button> which carries browser-default border/background/padding.
   ============================================================= */

.xf-table thead th button.xf-table__sort-header {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: var(--type-size-base);
  font-weight: var(--font-weight-semibold);
}


/* =============================================================
   COLOR OVERRIDES - iCORI uses Berkshires Green where xfact-
   custom-style.css now defaults to --color-primary (Bay Blue).
   ============================================================= */

/* Site header app name */
.mds-site-header__name {
  color: var(--color-berkshires-green);
}

/* Page title bar background */
.xf-page-title {
  background-color: var(--color-berkshires-green);
}

/* H2 accent underline */
.xf-h2::after {
  background-color: var(--color-berkshires-green);
}

/* Data table header row - gray background with dark text */
.xf-table thead th {
  background-color: var(--color-bg-tertiary);
  border-bottom: 2px solid var(--color-border);
  color: var(--color-text-primary);
}

/* Sort header button - dark text on gray header, turns bay-blue on hover (matches custom-datatable) */
.xf-table thead th .xf-table__sort-header {
  color: var(--color-text-primary);
}

.xf-table thead th .xf-table__sort-header:hover {
  color: var(--color-primary);
  opacity: 1;
}

/* Sort icon arrows follow the sort header text color */
.xf-table__sort-icon span:first-child {
  border-bottom-color: currentColor;
}

.xf-table__sort-icon span:last-child {
  border-top-color: currentColor;
}

/* Step indicator complete step - Berkshires Green */
.mds-step-indicator__step--complete .mds-step-indicator__bar {
  background-color: var(--color-berkshires-green);
}


/* =============================================================
   STEP INDICATOR - MDS overrides
   ============================================================= */

.mds-step-indicator {
  margin: var(--space-5) 0 0 0;
}

.mds-step-indicator__bar {
  height: 8px;
}

.mds-step-indicator__step--active .mds-step-indicator__bar {
  background-color: var(--color-berkshires-green);
}



.icori-required-field-indicator {
  padding-bottom: 20px;
}

.icori-required-field-indicator--has-content-above {
  margin-top: 1rem;
}


/* =============================================================
   CART PANEL ACCORDION
   ============================================================= */

.icori-cart-panel {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--transition-fast);
  margin-bottom: var(--space-3);
}

.icori-cart-panel:hover {
  box-shadow: var(--shadow-md);
}

.icori-cart-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-secondary);
  cursor: pointer;
  gap: var(--space-4);
  transition: background-color var(--transition-fast);
  user-select: none;
  text-align: left;
  border: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

.icori-cart-panel__header:hover {
  background-color: var(--color-bg-tertiary, #e5e7eb);
}

.icori-cart-panel__meta {
  flex: 1;
  min-width: 0;
  font-weight: var(--font-weight-semibold);
  color: var(--color-bay-blue);
}

.icori-cart-panel__right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.icori-cart-panel__price {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.icori-cart-panel__chevron {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.icori-cart-panel--open .icori-cart-panel__chevron {
  transform: rotate(180deg);
}

.icori-cart-panel__body {
  display: none;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
}

.icori-cart-panel--open .icori-cart-panel__body {
  display: block;
}

.icori-detail-field {
  display: flex;
  flex-direction: column;
}

/* 17866: the column flex's default align-items: stretch widened status badges to the full
   cell; keep them sized to their text. */
.icori-detail-field > .mds-badge {
  align-self: flex-start;
}

.icori-detail-field__label {
  font-size: var(--type-size-sm);
  color: var(--color-text-secondary);
}

.icori-detail-field__value {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.icori-account-label {
  display: block;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.icori-account-field {
  display: block;
}

/* Cart item body - details on top, action buttons in a right-aligned row below */
.icori-cart-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.icori-cart-item__details {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem 1.5rem;
}

.icori-cart-item__actions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: var(--space-2);
}

.icori-cart-item__actions .mds-btn {
  justify-content: center;
  /* Equal-width pair in the desktop row. Button sizing (height/padding/font)
     comes from the --md modifier in the markup, consistent with the app's other
     --md buttons (e.g. results "Apply filters"). Mobile overrides to width:100%. */
  min-width: 7.5rem;
}

/* Edit: outline-primary icon is white by MDS default - override to black, white on hover */
.icori-cart-item__actions .mds-btn--outline-primary img {
  filter: brightness(0);
}

.icori-cart-item__actions .mds-btn--outline-primary:hover img,
.icori-cart-item__actions .mds-btn--outline-primary:active img {
  filter: brightness(0) invert(1);
}


/* =============================================================
   CART TOTAL BAR
   ============================================================= */

.icori-cart-total {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  padding: 0.25rem 0.5rem;
  background: var(--color-bay-blue);
  margin-bottom: 1.5rem;
}

.icori-cart-total span {
  color: var(--color-text-inverse);
}

.icori-cart-total__label {
  font-weight: var(--font-weight-semibold);
  font-size: 1rem;
}

.icori-cart-total__amount {
  font-weight: var(--font-weight-bold);
  font-size: 1rem;
}


/* =============================================================
   VERIFY-SUBMIT
   ============================================================= */

.icori-terms-readonly {
  margin-top: 20px;
}

.icori-terms-list {
  list-style-type: decimal;
  padding-left: 1.5rem;
  margin: 0;
}

.icori-terms-list > li {
  margin-bottom: 0.75rem;
}

.icori-terms-list--secondary {
  list-style-type: lower-alpha;
  padding-left: 1.5rem;
  margin-top: 0.5rem;
}

.icori-checkbox--full-width {
  max-width: 100%;
}

.icori-checkbox--full-width .mds-checkbox__label {
  max-width: none;
}


/* =============================================================
   VERIFY ORDER
   ============================================================= */

/* Order details header grid - name, login ID, request count */
.icori-order-meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem 1.5rem;
  padding: 1rem;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
  margin-bottom: 1.5rem;
}

.icori-field-subnote {
  font-size: 0.875rem;
  color: #6b7280;
}

.icori-indigency-subfields {
  margin-bottom: 2rem;
  padding-left: 2rem;
}

/* Sub-section text matches its parent question's text size (base), not the
   smaller 0.875rem the sub-field paragraphs/labels carry inline. !important
   overrides those inline font-size declarations. Compact inline inputs in the
   Q2 sentence keep their own small size (set on the input, not targeted here). */
.icori-indigency-subfields,
.icori-indigency-subfields p,
.icori-indigency-subfields label,
.icori-indigency-subfields input,
.icori-indigency-subfields select,
.icori-indigency-subfields textarea {
  font-size: var(--type-size-base) !important;
}

.icori-aoi-label {
  font-weight: 600;
}


/* =============================================================
   ORGANIZATION ACCOUNT
   ============================================================= */

.org-name-label {
  font-weight: var(--font-weight-semibold);
  font-size: var(--type-size-md);
}


/* Session timeout modal now uses standard mds-modal classes from xfact-mds.css */

.icori-disabled {
    opacity: 0.4;
    pointer-events: none;
}
.icori-disabled .mds-checkbox__label,
.icori-disabled .mds-radio__label,
.icori-disabled .icori-account-type-question__helper {
    color: #767676;
}

.icori-registration-section {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

#affidavitSection {
  padding-top: 0;
}

.icori-section-description {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0 0 0.5rem;
  grid-column: 1 / -1;
}

#accountReasons-container {
  border: none !important;
}

.mds-file-upload__dropzone {
  max-width: 285px !important;
  padding: var(--space-4) var(--space-4) !important;
}


/* =============================================================
   ERROR MESSAGE BOX
   ============================================================= */

.icori-error-box {
  padding: var(--space-4) var(--space-5);
  border: 2px solid var(--color-danger-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-danger-light);
  color: var(--color-text-primary);
}

/* =============================================================
   ALERT COMPONENT  (.icori-alert)
   Flex row: an icon (.icori-alert__icon) beside a body
   (.icori-alert__body) holding a heading (.icori-alert__heading)
   and optional content (.icori-alert__content). Used across the
   registration flows for field-validation and RMV/IDV errors.
   These classes were referenced by ~22 templates but had no CSS
   definition, so every such alert rendered unstyled/invisible.
   ============================================================= */

.icori-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-4) var(--space-5);
  border: 2px solid var(--color-danger-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-danger-light);
  color: var(--color-text-primary);
}

.icori-alert--error {
  border-color: var(--color-danger-border);
  background-color: var(--color-danger-light);
}

.icori-alert--warning {
  border-color: var(--color-warning-border);
  background-color: var(--color-warning-light);
}

.icori-alert__icon {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.125rem;
}

.icori-alert__body {
  flex: 1 1 auto;
  min-width: 0;
}

.icori-alert__heading {
  margin: 0;
  font-weight: 600;
  color: var(--color-danger-red-900, var(--color-danger));
}

.icori-alert--warning .icori-alert__heading {
  color: var(--color-warning-text);
}

.icori-alert__content {
  margin: 0.5rem 0 0;
  /*padding-left: 1.25rem;*/
}

.icori-alert__content li {
  margin-bottom: 0.25rem;
}

/* IDV verification banner */
.icori-idv-banner {
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    border-left: 4px solid #ffc107;
    border-radius: 4px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
}
.icori-idv-banner__message {
    margin: 0;
    font-size: 0.9375rem;
    color: #664d03;
}
.icori-idv-banner__link {
    font-weight: 600;
    color: #0d6efd;
    text-decoration: underline;
    margin-left: 0.25rem;
}
.icori-idv-banner__link:hover {
    color: #0a58ca;
}

/* =============================================================
   Results page - header action buttons, Filters & sort panel,
   and expandable rows. Desktop styles live here; the ≤768px card
   behavior is in icori-responsive.css.
   ============================================================= */

/* When the title bar carries action buttons, center them on the title's
   visual midline and hold them off its diagonal right edge. The base bar uses
   align-items:self-start, and the <h1>'s default vertical margins make the flex
   bar taller than the visible green field - so top-aligned, the buttons sit low
   and read as misaligned. Centering the bar puts title and buttons on one line;
   the column-gap adds separation from the title's 28px clip-path slant.
   column-gap (not a button margin) keeps the ≤767px stacked layout unaffected,
   since it only spaces horizontal flex siblings. Scoped with :has so ordinary
   title bars (no actions) keep the base self-start behavior. */
.xf-page-title-bar:has(> .xf-page-title-bar__actions) {
    align-items: center;
    column-gap: var(--space-6);
}
/* Zero the title's bottom margin here: flexbox centers the *margin box*, and the
   h1 carries a 16px bottom margin (top 0), so centering alone would still leave
   the green field riding ~8px above the buttons. Removing it makes the title's
   margin box equal its visible box so both truly share a centerline. Spacing
   below the bar is owned by .xf-page-title-bar's own margin-bottom. */
.xf-page-title-bar:has(> .xf-page-title-bar__actions) > .xf-page-title {
    margin-bottom: 0;
}

/* Title-bar action buttons (Download selected / Refresh results).
   Natural height with a leading icon, vertically centered beside the title -
   matching the cart page's "Empty cart" action rather than a stretched, full-
   height block. Square corners are shared with that button. The ≤767px stacked
   layout lives in icori-responsive.css. */
.xf-page-title-bar__actions {
    display: flex;
    align-items: center;
    align-self: center;
    gap: var(--space-2);
}
.xf-page-title-bar__action {
    height: auto;
    border-radius: 0;
}

/* Refresh (outline-accent): its icon defaults to white via `.mds-btn img`,
   invisible on the transparent button. Tint it to the accent green (#388557)
   to match the button's text; restore white on hover when the fill flips. */
.xf-page-title-bar__action.mds-btn--outline-accent img {
    filter: brightness(0) saturate(100%) invert(43%) sepia(18%)
            saturate(1096%) hue-rotate(93deg) brightness(93%) contrast(89%);
}
.xf-page-title-bar__action.mds-btn--outline-accent:hover img {
    filter: brightness(0) invert(1);
}

/* Right-aligned toolbar holding the "Expand all / Collapse all" toggle above the
   results table (results-list.html). On mobile the button stacks full-width
   (see icori-responsive.css), matching the title-bar action buttons. */
.results-detail-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--space-2);
}

/* Table action bar above the homepage results table: select-all + live
   selection count on the left, bulk download / view-all / expand-all on the
   right - mirrors MIRCS's resultsHead__bar/pendingActionbar pattern. On
   mobile the two halves stack (see icori-responsive.css), matching the
   title-bar action buttons.

   Sticky only on mobile (see the ≤767px override in icori-responsive.css,
   which also carries the ::before/::after pinned-state mechanics) - on
   desktop the bar stays in normal flow. */
.results-table-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}
.results-table-toolbar__select {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-left: 0.8rem;
}
.results-table-toolbar__count {
    font-size: var(--type-size-base);
    color: var(--color-text-secondary);
}
.results-table-toolbar__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-right: 0.8rem;
}
.xf-table-check {
    width: 18px;
    height: 18px;
    margin: 0;
    vertical-align: middle;
    cursor: pointer;
    accent-color: var(--color-primary);
    flex-shrink: 0;
}

/* Toolbar button icons are inline <svg fill="currentColor">, not <img>, so
   they track the button's own text color exactly (blue at rest, white on
   hover/active via .mds-btn--outline-primary above) with no filter guessing
   needed to hit a specific color. */
.xf-table-toolbar-btn svg {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
}

/* Match MIRCS's .mds-toolbar-btn sizing (table.css) on top of iCORI's
   .mds-btn--outline-primary/--md - color, border, background, and the
   hover/active/disabled states all already match; only the size/type
   values below differ from the standard --md button. */
.xf-table-toolbar-btn {
    min-height: 43px;
    padding: var(--space-2) var(--space-6); /* 8px 24px */
    font-weight: 500;
    font-size: 1rem; /* 16px */
    border-radius: var(--radius-md); /* 8px */
}

/* Expand-all/Collapse-all button: "Collapse all" is wider than "Expand all",
   so swapping the label text alone shrinks/grows the button and shifts the
   toolbar layout. Stack both strings in the same grid cell (one hidden) so
   the button always sizes to the wider label, regardless of which is
   showing - no guessed min-width to keep in sync with the copy or font. */
.xf-toggle-all-label-stack {
    display: grid;
}
.xf-toggle-all-label-stack > * {
    grid-area: 1 / 1;
}
.xf-toggle-all-label-stack > [aria-hidden="true"] {
    visibility: hidden;
}

/* Expand-all's caret flips to point "up" once every row is expanded - same
   affordance as each row's own Show/Hide chevron (.results-expander__icon). */
#toggle-all-details-icon {
    transition: transform 0.2s ease;
}
#toggle-all-details[aria-expanded="true"] #toggle-all-details-icon {
    transform: rotate(180deg);
}

/* ---- Expandable rows -------------------------------------------------------
   Each record is a main row plus an adjacent .results-detail row. The chevron
   toggles .is-expanded on the main row, revealing the detail. Same mechanism on
   desktop and in the ≤768px card view (card overrides live in the responsive
   stylesheet). */
.results-row__toggle,
.results-row__toggle-head {
    width: 1%;              /* shrink-to-fit; sits just left of the Actions column */
    white-space: nowrap;
    text-align: left;
}

/* Icon-button tooltips inside a datatable: the vendor .mds-icon-btn[aria-label]
   ::before tooltip is absolutely positioned and nowrap, but the datatable
   wrapper sets overflow-x:auto - which forces overflow-y to auto too, clipping
   the tooltip (cut off in card view) and letting its width trigger a horizontal
   scrollbar on desktop. Suppress it so in-table icon buttons carry no hover
   tooltip; their aria-label still names them for assistive tech. */
.custom-datatable .mds-icon-btn[aria-label]::before {
    content: none;
}
/* Visual chrome (border/bg/color/hover/focus) comes from the .mds-btn /
   .mds-btn--sm / .mds-btn--outline-accent classes now on this button - see
   homepage.html / results-list.html. Only the icon rotation and the
   constant-width text label are specific to the expander. */
/* "Show"/"Hide" render at slightly different pixel widths, which otherwise
   shifts the whole button (and the shrink-to-fit .results-row__toggle column)
   by a few px when the label swaps on toggle - min-width pins it to the wider
   of the two so the button's width stays constant open or closed. Pinned on
   the verb span specifically, since it's the only part of the label that
   actually changes text (the "Details" noun is static - see
   .results-expander__noun below, hidden above the mobile breakpoint so
   desktop reads just "Show"/"Hide"; icori-responsive.css hides it). */
.results-expander__text { display: inline-block; text-align: left; }
.results-expander__verb { display: inline-block; min-width: 2.75em; }
.results-expander__icon {
    display: block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.results-expander[aria-expanded="true"] .results-expander__icon {
    transform: rotate(180deg);
}

.results-detail { display: none; }
.results-row.is-expanded + .results-detail { display: table-row; }
.results-detail > td {
    padding: var(--space-4) var(--space-5);
    background-color: var(--color-gray-50);
    border-top: 1px solid var(--color-gray-200);
    box-shadow: inset 3px 0 0 var(--color-accent); /* subtle accent rail */
}
.results-detail__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: var(--space-4) var(--space-6);
}
.results-detail__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    /* The detail cell is a colspan cell = the row's last child, so it inherits
       `white-space: nowrap` from `.xf-table td:last-child`. Restore normal
       wrapping here so a label or value that is genuinely wider than its
       (now reflowed) field can still wrap instead of overflowing the card /
       table edge. Fields size themselves via the auto-fill grid above, so in
       the normal case nothing here needs to wrap. */
    white-space: normal;
}
.results-detail__label {
    font-size: var(--type-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    /* text-transform: uppercase; */
    letter-spacing: 0.04em;
}
.results-detail__value {
    font-size: var(--type-size-base);
    color: var(--color-text-primary);
    /* Safety net for a pathologically long unbreakable token (an email login
       ID normally fits the 16rem field). Such a token has a min-content width
       equal to the whole token; overflow-wrap: anywhere lets it break inside
       its field rather than spilling past the card / table edge.
       NOTE: the detail cell is a colspan cell = the row's last child, so it
       inherits `white-space: nowrap` from `.xf-table td:last-child`. nowrap
       suppresses ALL soft-wrap opportunities, so overflow-wrap/word-break are
       inert until white-space: normal (on .results-detail__item) restores
       wrapping. */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}


/* =============================================================
   REQUEST FORM GRID
   Shared by the single / edit / batch request forms. Desktop is a
   dense 4-column grid; cells set their own span via grid-column.
   Responsive collapse (4 -> 2 -> 1 col) lives in icori-responsive.css.
   ============================================================= */
.icori-request-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem 1.5rem;
}

/* =============================================================
   ACCOUNT FORM GRID
   Edit-account forms (individual / organization). Desktop is a
   3-column grid; cells span via grid-column and .icori-grid-full.
   Reuses the request-grid responsive collapse (see icori-responsive.css).
   ============================================================= */
.icori-account-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem 1.5rem;
}

.icori-account-grid--2col {
    grid-template-columns: repeat(2, 1fr);
}

.icori-account-grid--4col {
    grid-template-columns: repeat(4, 1fr);
}

/* =============================================================
   READONLY FORM INPUTS (IDV-locked fields)
   MDS only styles :disabled inputs; readonly text inputs need the
   same visual treatment so Socure-verified fields look locked.
   cursor:default (not not-allowed) preserves text selection so
   the user can still copy their pre-filled address / phone / DOB.
   ============================================================= */
.mds-text-input[readonly],
.mds-phone-input[readonly] {
    background-color: var(--color-gray-100);
    border-color: var(--color-border);
    color: var(--color-text-disabled);
    cursor: default;
    opacity: 1;
}

/* =============================================================
   HOMEPAGE TABLE - MDS retheme (trial run, scoped via .xf-table--mds)
   Ports the MDS Table look from MIRCS's table.css (header fill,
   8px-radius hairline border, fixed row heights, zebra striping,
   sortable-header hover/active states) onto the existing .xf-table
   markup. Scoped to this one modifier class so the other 7 pages
   still on plain .xf-table are unaffected pending review.
   ============================================================= */
.xf-table-wrapper.xf-table--mds {
    /* ─── SINGLE SOURCE OF TRUTH for column widths ───────────────────────
       Both the table's <th> widths below AND .results-detail__grid's
       grid-template-columns read these same custom properties, so the two
       layouts can never drift apart - no separately-tuned magic numbers to
       keep in sync, and nothing to re-tune if a column's proportion ever
       changes: edit the value once here. All 7 are plain percentages
       summing to exactly 100% (no rem/% unit mix) - a table in
       table-layout:fixed resolves column percentages against the table's
       own width the same predictable way CSS Grid resolves track
       percentages against the grid container's width, so the same numbers
       land in the same place in both. A mixed fixed-rem + percentage set
       doesn't sum to a guaranteed 100% and each layout mode is then free to
       redistribute the shortfall differently - that mismatch, not a wrongicon in the accordion - we need that back and it needs to be
       ratio, was the actual cause of the drift. Holds at any viewport
       width, not just 1440 - percentages, not px. */
    --col-num:     6%;   /* checkbox + No. (one column) */
    --col-date:    18%;  /* Date/time */
    --col-subject: 17%;  /* Subject */
    --col-status:  15%;  /* Status - widened so Result isn't crowded against it */
    --col-details: 14%;  /* Details - widened so its toggle button isn't crowded against Actions */
    --col-result:  18%;  /* Result - wide enough for "CRIMINAL HISTORY" / "NO AVAILABLE CORI" on one line at ~1440px, widened further for even spacing off Status */
    --col-actions: 12%;  /* Actions */
    border-color: #dcdcdc;
    border-radius: 8px;
    margin-bottom: 3rem;
}

/* Fixed column widths - without this, columns auto-size to each row's actual
   content (a long Subject name or Status value shifts that column), so the
   .results-detail__grid below (which reads the same --col-* variables) could
   only ever line up with ONE row's particular content by coincidence.
   table-layout:fixed pins every column to the same width regardless of data,
   the same technique canonical MDS's own table.css uses for this reason. */
.xf-table.xf-table--mds { table-layout: fixed; }
.xf-table--mds th:nth-child(1) { width: var(--col-num); }
.xf-table--mds th:nth-child(2) { width: var(--col-date); }
.xf-table--mds th:nth-child(3) { width: var(--col-subject); }
.xf-table--mds th:nth-child(4) { width: var(--col-status); }
.xf-table--mds th:nth-child(5) { width: var(--col-details); }
.xf-table--mds th:nth-child(6) { width: var(--col-result); }
.xf-table--mds th:nth-child(7) { width: var(--col-actions); }

/* 17853: CRA view adds a Client column after Subject (8 columns). Same all-percentage
   approach as above (must sum to 100%); every column after Subject shifts one child. */
.xf-table.xf-table--mds.has-client-col {
    --col-num:     6%;
    --col-date:    14%;
    --col-subject: 12%;
    --col-client:  17%;  /* "Client organization" header on one line from ~1200px; wraps below */
    --col-status:  10%;
    --col-details: 11%;
    --col-result:  18%;  /* same as the 7-column table, so result badges keep one line */
    --col-actions: 12%;
}
.xf-table.xf-table--mds.has-client-col th:nth-child(4) { width: var(--col-client); }
.xf-table.xf-table--mds.has-client-col th:nth-child(5) { width: var(--col-status); }
.xf-table.xf-table--mds.has-client-col th:nth-child(6) { width: var(--col-details); }
.xf-table.xf-table--mds.has-client-col th:nth-child(7) { width: var(--col-result); }
.xf-table.xf-table--mds.has-client-col th:nth-child(8) { width: var(--col-actions); }

/* Checkbox + row number share one left-aligned column (not two centered
   ones) - checkbox first, count beside it. Scoped to tr.results-row
   specifically (not just "tbody td:nth-child(1)") - the .results-detail
   row's single colspan="7" <td> is ALSO child #1 of its own row, and
   display:flex on a <td> breaks its table-cell role (and with it, the
   grid-alignment math below that depends on that <td> staying a normal
   table cell), which is what was garbling the expanded row layout. */
.xf-table--mds tbody tr.results-row > td:nth-child(1) {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.xf-table--mds thead th {
    height: 53px;
    padding: 0 1rem;
    background-color: #e6e6e6;
    border-bottom: 1px solid #dcdcdc;
}

.xf-table--mds tbody td {
    height: 68px;
    padding: 0 1rem;
}

/* The Download button is inline content in this cell (only card mode turns
   the cell itself into a flex container), so a plain td's default left/start
   alignment is what it gets otherwise. At the desktop 12% column width the
   button nearly fills the cell either way, so this was never visible there -
   but the squeeze tiers (icori-responsive.css) widen this column well past
   what the button needs, and left-aligned there reads as a stray gap on the
   right rather than a deliberately placed action. Scoped to :has(.mds-btn) -
   only the populated state gets right-aligned; the empty "..." placeholder
   (no result yet) stays left-aligned like every other column's empty state
   (see Result's own :not(:has(...)) split further down). Unconditional (not
   scoped to a breakpoint) so it holds at every width the column might end
   up at. */
.xf-table--mds tbody td[data-label="Actions"]:has(.mds-btn) {
    text-align: right;
}

/* Zebra by RECORD, not by raw <tr> - each record is a .results-row followed
   by its own .results-detail row (1:1, always paired), so striping in fours
   keeps a record's two rows on the same color: positions 1-2 tinted,
   3-4 white, 5-6 tinted, etc. */
.xf-table--mds tbody tr:nth-child(4n+1),
.xf-table--mds tbody tr:nth-child(4n+2) { background-color: #ffffff; }
.xf-table--mds tbody tr:nth-child(4n+3),
.xf-table--mds tbody tr:nth-child(4n)   { background-color: #f7f7f7; }
/* The border lives on the <tr> itself (.xf-table tbody tr, xfact-custom-style.css)
   - overriding border-bottom on the <td> instead doesn't win: border-collapse
   conflict resolution picks the widest explicit border at that edge, so the
   row's 1px beats the cell's "none" regardless of specificity. Override the
   same element/property the base rule sets instead.
   .results-detail is also display:none when collapsed but still the actual
   last <tr> in the DOM, so :last-child alone would strip the border off an
   invisible row while leaving it on the .results-row that's really showing
   as the last row on screen - catch that case explicitly too. */
.xf-table--mds tbody tr:last-child { border-bottom: none; }
.xf-table--mds tbody tr.results-row:has(+ tr.results-detail:last-child) { border-bottom: none; }

/* The detail row reads as a second level of its OWN row, not a separate
   striped row: no fixed tint/rail/divider - it just inherits the parent
   .results-row's zebra color showing through from the <tr> above. */
.xf-table--mds .results-detail > td {
    background-color: transparent;
    border-top: none;
    box-shadow: none;
    /* No padding-left/right here - the grid below defines all 7 columns
       itself (an empty first track standing in for the checkbox+No. column),
       so it's positioned by its own grid-template-columns, not by a
       manually-computed td offset. */
    padding-left: 0;
    padding-right: 0;
    position: relative;
}
/* Inset divider between the row and its detail content - a separate
   pseudo-element rather than a border on .results-detail__grid, because
   that grid must now span the td's full width for the column math above to
   hold (see the "single source of truth" note). Insets to the same edges
   the earlier standalone version used: starts where the checkbox column
   ends (+ the Date/time column's own left padding), stops short of the
   right edge by the same var(--space-5) the td used to pad itself with. */
.xf-table--mds .results-detail > td::before {
    content: "";
    display: block;
    height: 1px;
    background-color: var(--color-gray-200);
    margin: 0 var(--space-5) 0 calc(var(--col-num) + 1rem);
}

/* Detail fields reflow by their own width rather than being pinned to the
   table's --col-* column tracks. An earlier approach mirrored those tracks so
   each field lined up under its header, but the narrow tracks (--col-num 6%,
   --col-details 14%, --col-actions 12%) were too small for wide values like an
   email login ID, forcing the label and value to break mid-word/mid-token
   inside a ~125px cell. auto-fill + minmax lets each field claim a comfortable
   width and wrap to the next row AS A WHOLE FIELD when space runs out, so
   labels and values stay intact on one line in the normal case. The empty
   checkbox-spacer div (hidden below) only existed to align the first field to
   the --col-num track, so it's no longer needed. */
.xf-table--mds .results-detail__grid {
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    /* No column-gap - each .results-detail__item carries its own 1rem side
       padding instead. */
    gap: var(--space-4) 0;
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}
.xf-table--mds .results-detail__grid > [aria-hidden="true"] {
    display: none;
}

/* Each field gets the SAME 1rem horizontal padding as its table column
   (.xf-table--mds tbody td { padding: 0 1rem }), so label/value text starts
   at the same inset from the column edge as the row above, for every column
   - not just the first (whose alignment was previously baked into the td's
   own padding-left, one-off and not shared with the rest). */
.xf-table--mds .results-detail__item {
    padding: 0 1rem;
}

/* No row hover - matches canonical MDS (rows aren't clickable, only the
   per-row action buttons are interactive) and avoids a two-tone flash when
   hovering one half of an expanded row+detail pair that's meant to read as
   a single unified block. */

/* Sortable header hover/active - matches the MDS gray-400/gray-500 steps. */
.xf-table--mds thead th:has(.custom-datatable__sort-header):hover { background-color: #dcdcdc; }
.xf-table--mds thead th[aria-sort] { background-color: #cccccc; }
.xf-table--mds thead th[aria-sort]:hover { background-color: #cccccc; }

/* The clickable/hoverable target should be the FULL column, not just the
   text+icon - strip the <th>'s own padding and let the button itself fill
   the cell edge-to-edge, carrying that padding instead, so the pointer
   cursor and click area cover the whole header. */
.xf-table--mds thead th:has(.custom-datatable__sort-header) {
    padding: 0;
    cursor: pointer;
}
.xf-table--mds .custom-datatable__sort-header {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 1rem;
}

/* Sort icon - the exact PrimeVue DataTable glyphs MIRCS's table.js injects
   into .mds-table__sort (unsorted double-arrow / single asc / single desc
   arrow). Rendered via CSS mask instead of inline SVG per column/state, so
   color follows the header text's current/hover color for free. */
.xf-table--mds .mds-table__sort {
    display: inline-flex;
    width: 14px; height: 14px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: 14px 14px; mask-size: 14px 14px;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M5.64515 3.61291C5.47353 3.61291 5.30192 3.54968 5.16644 3.4142L3.38708 1.63484L1.60773 3.4142C1.34579 3.67613 0.912244 3.67613 0.650309 3.4142C0.388374 3.15226 0.388374 2.71871 0.650309 2.45678L2.90837 0.198712C3.17031 -0.0632236 3.60386 -0.0632236 3.86579 0.198712L6.12386 2.45678C6.38579 2.71871 6.38579 3.15226 6.12386 3.4142C5.98837 3.54968 5.81676 3.61291 5.64515 3.61291Z'/><path d='M3.38714 14C3.01681 14 2.70972 13.6929 2.70972 13.3226V0.677419C2.70972 0.307097 3.01681 0 3.38714 0C3.75746 0 4.06456 0.307097 4.06456 0.677419V13.3226C4.06456 13.6929 3.75746 14 3.38714 14Z'/><path d='M10.6129 14C10.4413 14 10.2697 13.9368 10.1342 13.8013L7.87611 11.5432C7.61418 11.2813 7.61418 10.8477 7.87611 10.5858C8.13805 10.3239 8.5716 10.3239 8.83353 10.5858L10.6129 12.3652L12.3922 10.5858C12.6542 10.3239 13.0877 10.3239 13.3497 10.5858C13.6116 10.8477 13.6116 11.2813 13.3497 11.5432L11.0916 13.8013C10.9561 13.9368 10.7845 14 10.6129 14Z'/><path d='M10.6129 14C10.2426 14 9.93552 13.6929 9.93552 13.3226V0.677419C9.93552 0.307097 10.2426 0 10.6129 0C10.9833 0 11.2904 0.307097 11.2904 0.677419V13.3226C11.2904 13.6929 10.9832 14 10.6129 14Z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M5.64515 3.61291C5.47353 3.61291 5.30192 3.54968 5.16644 3.4142L3.38708 1.63484L1.60773 3.4142C1.34579 3.67613 0.912244 3.67613 0.650309 3.4142C0.388374 3.15226 0.388374 2.71871 0.650309 2.45678L2.90837 0.198712C3.17031 -0.0632236 3.60386 -0.0632236 3.86579 0.198712L6.12386 2.45678C6.38579 2.71871 6.38579 3.15226 6.12386 3.4142C5.98837 3.54968 5.81676 3.61291 5.64515 3.61291Z'/><path d='M3.38714 14C3.01681 14 2.70972 13.6929 2.70972 13.3226V0.677419C2.70972 0.307097 3.01681 0 3.38714 0C3.75746 0 4.06456 0.307097 4.06456 0.677419V13.3226C4.06456 13.6929 3.75746 14 3.38714 14Z'/><path d='M10.6129 14C10.4413 14 10.2697 13.9368 10.1342 13.8013L7.87611 11.5432C7.61418 11.2813 7.61418 10.8477 7.87611 10.5858C8.13805 10.3239 8.5716 10.3239 8.83353 10.5858L10.6129 12.3652L12.3922 10.5858C12.6542 10.3239 13.0877 10.3239 13.3497 10.5858C13.6116 10.8477 13.6116 11.2813 13.3497 11.5432L11.0916 13.8013C10.9561 13.9368 10.7845 14 10.6129 14Z'/><path d='M10.6129 14C10.2426 14 9.93552 13.6929 9.93552 13.3226V0.677419C9.93552 0.307097 10.2426 0 10.6129 0C10.9833 0 11.2904 0.307097 11.2904 0.677419V13.3226C11.2904 13.6929 10.9832 14 10.6129 14Z'/></svg>");
    color: var(--color-text-secondary, #707070);
}
.xf-table--mds .mds-table__sort--asc {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3.63435 0.19871C3.57113 0.135484 3.49887 0.0903226 3.41758 0.0541935C3.255 -0.0180645 3.06532 -0.0180645 2.90274 0.0541935C2.82145 0.0903226 2.74919 0.135484 2.68597 0.19871L0.427901 2.45677C0.165965 2.71871 0.165965 3.15226 0.427901 3.41419C0.689836 3.67613 1.12338 3.67613 1.38532 3.41419L2.48726 2.31226V13.3226C2.48726 13.6929 2.79435 14 3.16467 14C3.535 14 3.84209 13.6929 3.84209 13.3226V2.31226L4.94403 3.41419C5.07951 3.54968 5.25113 3.6129 5.42274 3.6129C5.59435 3.6129 5.76597 3.54968 5.90145 3.41419C6.16338 3.15226 6.16338 2.71871 5.90145 2.45677L3.64338 0.19871H3.63435ZM13.7685 13.3226C13.7685 12.9523 13.4615 12.6452 13.0911 12.6452H7.22016C6.84984 12.6452 6.54274 12.9523 6.54274 13.3226C6.54274 13.6929 6.84984 14 7.22016 14H13.0911C13.4615 14 13.7685 13.6929 13.7685 13.3226ZM7.22016 8.58064C6.84984 8.58064 6.54274 8.27355 6.54274 7.90323C6.54274 7.5329 6.84984 7.22581 7.22016 7.22581H9.47823C9.84855 7.22581 10.1556 7.5329 10.1556 7.90323C10.1556 8.27355 9.84855 8.58064 9.47823 8.58064H7.22016ZM7.22016 5.87097H7.67177C8.0421 5.87097 8.34919 5.56387 8.34919 5.19355C8.34919 4.82323 8.0421 4.51613 7.67177 4.51613H7.22016C6.84984 4.51613 6.54274 4.82323 6.54274 5.19355C6.54274 5.56387 6.84984 5.87097 7.22016 5.87097ZM11.2847 11.2903H7.22016C6.84984 11.2903 6.54274 10.9832 6.54274 10.6129C6.54274 10.2426 6.84984 9.93548 7.22016 9.93548H11.2847C11.655 9.93548 11.9621 10.2426 11.9621 10.6129C11.9621 10.9832 11.655 11.2903 11.2847 11.2903Z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3.63435 0.19871C3.57113 0.135484 3.49887 0.0903226 3.41758 0.0541935C3.255 -0.0180645 3.06532 -0.0180645 2.90274 0.0541935C2.82145 0.0903226 2.74919 0.135484 2.68597 0.19871L0.427901 2.45677C0.165965 2.71871 0.165965 3.15226 0.427901 3.41419C0.689836 3.67613 1.12338 3.67613 1.38532 3.41419L2.48726 2.31226V13.3226C2.48726 13.6929 2.79435 14 3.16467 14C3.535 14 3.84209 13.6929 3.84209 13.3226V2.31226L4.94403 3.41419C5.07951 3.54968 5.25113 3.6129 5.42274 3.6129C5.59435 3.6129 5.76597 3.54968 5.90145 3.41419C6.16338 3.15226 6.16338 2.71871 5.90145 2.45677L3.64338 0.19871H3.63435ZM13.7685 13.3226C13.7685 12.9523 13.4615 12.6452 13.0911 12.6452H7.22016C6.84984 12.6452 6.54274 12.9523 6.54274 13.3226C6.54274 13.6929 6.84984 14 7.22016 14H13.0911C13.4615 14 13.7685 13.6929 13.7685 13.3226ZM7.22016 8.58064C6.84984 8.58064 6.54274 8.27355 6.54274 7.90323C6.54274 7.5329 6.84984 7.22581 7.22016 7.22581H9.47823C9.84855 7.22581 10.1556 7.5329 10.1556 7.90323C10.1556 8.27355 9.84855 8.58064 9.47823 8.58064H7.22016ZM7.22016 5.87097H7.67177C8.0421 5.87097 8.34919 5.56387 8.34919 5.19355C8.34919 4.82323 8.0421 4.51613 7.67177 4.51613H7.22016C6.84984 4.51613 6.54274 4.82323 6.54274 5.19355C6.54274 5.56387 6.84984 5.87097 7.22016 5.87097ZM11.2847 11.2903H7.22016C6.84984 11.2903 6.54274 10.9832 6.54274 10.6129C6.54274 10.2426 6.84984 9.93548 7.22016 9.93548H11.2847C11.655 9.93548 11.9621 10.2426 11.9621 10.6129C11.9621 10.9832 11.655 11.2903 11.2847 11.2903Z'/></svg>");
}
.xf-table--mds .mds-table__sort--desc {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M4.93953 10.5858L3.83759 11.6877V0.677419C3.83759 0.307097 3.53049 0 3.16017 0C2.78985 0 2.48275 0.307097 2.48275 0.677419V11.6877L1.38082 10.5858C1.11888 10.3239 0.685331 10.3239 0.423396 10.5858C0.16146 10.8477 0.16146 11.2813 0.423396 11.5432L2.68146 13.8013C2.74469 13.8645 2.81694 13.9097 2.89823 13.9458C2.97952 13.9819 3.06985 14 3.16017 14C3.25049 14 3.33178 13.9819 3.42211 13.9458C3.5034 13.9097 3.57565 13.8645 3.63888 13.8013L5.89694 11.5432C6.15888 11.2813 6.15888 10.8477 5.89694 10.5858C5.63501 10.3239 5.20146 10.3239 4.93953 10.5858ZM13.0957 0H7.22468C6.85436 0 6.54726 0.307097 6.54726 0.677419C6.54726 1.04774 6.85436 1.35484 7.22468 1.35484H13.0957C13.466 1.35484 13.7731 1.04774 13.7731 0.677419C13.7731 0.307097 13.466 0 13.0957 0ZM7.22468 5.41935H9.48275C9.85307 5.41935 10.1602 5.72645 10.1602 6.09677C10.1602 6.4671 9.85307 6.77419 9.48275 6.77419H7.22468C6.85436 6.77419 6.54726 6.4671 6.54726 6.09677C6.54726 5.72645 6.85436 5.41935 7.22468 5.41935ZM7.6763 8.12903H7.22468C6.85436 8.12903 6.54726 8.43613 6.54726 8.80645C6.54726 9.17677 6.85436 9.48387 7.22468 9.48387H7.6763C8.04662 9.48387 8.35372 9.17677 8.35372 8.80645C8.35372 8.43613 8.04662 8.12903 7.6763 8.12903ZM7.22468 2.70968H11.2892C11.6595 2.70968 11.9666 3.01677 11.9666 3.3871C11.9666 3.75742 11.6595 4.06452 11.2892 4.06452H7.22468C6.85436 4.06452 6.54726 3.75742 6.54726 3.3871C6.54726 3.01677 6.85436 2.70968 7.22468 2.70968Z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M4.93953 10.5858L3.83759 11.6877V0.677419C3.83759 0.307097 3.53049 0 3.16017 0C2.78985 0 2.48275 0.307097 2.48275 0.677419V11.6877L1.38082 10.5858C1.11888 10.3239 0.685331 10.3239 0.423396 10.5858C0.16146 10.8477 0.16146 11.2813 0.423396 11.5432L2.68146 13.8013C2.74469 13.8645 2.81694 13.9097 2.89823 13.9458C2.97952 13.9819 3.06985 14 3.16017 14C3.25049 14 3.33178 13.9819 3.42211 13.9458C3.5034 13.9097 3.57565 13.8645 3.63888 13.8013L5.89694 11.5432C6.15888 11.2813 6.15888 10.8477 5.89694 10.5858C5.63501 10.3239 5.20146 10.3239 4.93953 10.5858ZM13.0957 0H7.22468C6.85436 0 6.54726 0.307097 6.54726 0.677419C6.54726 1.04774 6.85436 1.35484 7.22468 1.35484H13.0957C13.466 1.35484 13.7731 1.04774 13.7731 0.677419C13.7731 0.307097 13.466 0 13.0957 0ZM7.22468 5.41935H9.48275C9.85307 5.41935 10.1602 5.72645 10.1602 6.09677C10.1602 6.4671 9.85307 6.77419 9.48275 6.77419H7.22468C6.85436 6.77419 6.54726 6.4671 6.54726 6.09677C6.54726 5.72645 6.85436 5.41935 7.22468 5.41935ZM7.6763 8.12903H7.22468C6.85436 8.12903 6.54726 8.43613 6.54726 8.80645C6.54726 9.17677 6.85436 9.48387 7.22468 9.48387H7.6763C8.04662 9.48387 8.35372 9.17677 8.35372 8.80645C8.35372 8.43613 8.04662 8.12903 7.6763 8.12903ZM7.22468 2.70968H11.2892C11.6595 2.70968 11.9666 3.01677 11.9666 3.3871C11.9666 3.75742 11.6595 4.06452 11.2892 4.06452H7.22468C6.85436 4.06452 6.54726 3.75742 6.54726 3.3871C6.54726 3.01677 6.85436 2.70968 7.22468 2.70968Z'/></svg>");
}
.xf-table--mds thead th[aria-sort] .mds-table__sort { color: var(--color-text-primary, #141414); }

/* Header hover is a background cue only (matches canonical MDS) - cancel the
   sort-header's text/icon color change onto blue that .custom-datatable__sort-header
   applies globally elsewhere. */
.xf-table--mds .custom-datatable__sort-header:hover { color: inherit; opacity: 1; }

/* Kill the leftover Bay-Blue rule below the header row (xfact-custom-style.css's
   .xf-table thead tr border-bottom) - the th-level 1px #dcdcdc hairline above is
   the only header boundary canonical MDS draws. */
.xf-table--mds thead tr { border-bottom: none; }

/* Show/Hide details toggle - neutral gray outline, not the accent color
   .mds-btn--outline-accent supplies by default. */
.results-expander {
    border-width: 1px;
    border-color: var(--color-bay-blue);
    border-radius: var(--radius-sm);
    background-color: var(--color-white);
    color: var(--color-bay-blue);
    line-height: 1;
}
.results-expander:hover {
    background-color: var(--color-bay-blue-100);
    border-color: var(--color-bay-blue);
    color: var(--color-bay-blue);
}
.results-expander:active {
    background-color: var(--color-gray-100);
    border-color: var(--color-gray-400);
    color: var(--color-text-primary);
}
/* Open state - persistent green tint so the toggle reads as "on". */
.results-expander[aria-expanded="true"] {
    background-color: var(--color-bay-blue-light);
    border-color: var(--color-bay-blue);
    color: var(--color-bay-blue);
}
.results-expander[aria-expanded="true"]:hover {
    background-color: var(--color-bay-blue);
    border-color: var(--color-bay-blue);
    color: var(--color-text-inverse);
}

/* No line between a row and its own expanded detail - the detail row keeps
   its border-bottom (from the base .xf-table tbody tr rule) to mark the end
   of the pair instead. */
.xf-table--mds .results-row.is-expanded { border-bottom: none; }

/* =============================================================
   RESULTS TABLE - #results-table layout and detail overrides
   The results page uses custom-datatable (not xf-table--mds).
   Fixed layout + column width vars match the detail grid to
   the header columns. Detail row gets column-matched grid,
   transparent bg (inherits zebra striping), and divider line.
   ============================================================= */

/* Results table: paired rows - stripe in fours.
   Odd records white; even records tinted. */
#results-table tbody tr:nth-child(4n+1),
#results-table tbody tr:nth-child(4n+2) { background-color: #ffffff; }
#results-table tbody tr:nth-child(4n+3),
#results-table tbody tr:nth-child(4n)   { background-color: #f7f7f7; }

/* Remove bottom border from expanded row on desktop */
@media (min-width: 768px) {
  #results-table .results-row.is-expanded { border-bottom: none; }
}

#results-table tbody tr:last-child { border-bottom: none; }
#results-table tbody tr.results-row:has(+ tr.results-detail:last-child) { border-bottom: none; }

/* Column widths - single source of truth for <th> and detail grid */
#results-table {
    table-layout: fixed;
    --col-num:     6%;
    --col-date:    18%;
    --col-subject: 17%;
    --col-status:  15%;
    --col-details: 14%;
    --col-result:  18%;
    --col-actions: 12%;
}
#results-table th:nth-child(1) { width: var(--col-num); }
#results-table th:nth-child(2) { width: var(--col-date); }
#results-table th:nth-child(3) { width: var(--col-subject); }
#results-table th:nth-child(4) { width: var(--col-status); }
#results-table th:nth-child(5) { width: var(--col-details); }
#results-table th:nth-child(6) { width: var(--col-result); }
#results-table th:nth-child(7) { width: var(--col-actions); }

/* 17853: CRA view adds a Client column after Subject (8 columns). Same all-percentage
   approach as above (must sum to 100%); every column after Subject shifts one child. */
#results-table.has-client-col {
    --col-num:     6%;
    --col-date:    14%;
    --col-subject: 12%;
    --col-client:  17%;  /* "Client organization" header on one line from ~1200px; wraps below */
    --col-status:  10%;
    --col-details: 11%;
    --col-result:  18%;  /* same as the 7-column table, so result badges keep one line */
    --col-actions: 12%;
}
#results-table.has-client-col th:nth-child(4) { width: var(--col-client); }
#results-table.has-client-col th:nth-child(5) { width: var(--col-status); }
#results-table.has-client-col th:nth-child(6) { width: var(--col-details); }
#results-table.has-client-col th:nth-child(7) { width: var(--col-result); }
#results-table.has-client-col th:nth-child(8) { width: var(--col-actions); }
/* Client names are free text (one long word can exceed the narrow track) - wrap inside the cell. */
#results-table td[data-label="Client organization"],
.xf-table.xf-table--mds td[data-label="Client organization"] { overflow-wrap: anywhere; }
/* "Client organization" header: the 17% track above fits it on one line at normal desktop widths.
   Narrower, it wraps to two lines inside its own cell (the base th nowrap would push it into the
   neighboring headers), with the sort icon kept beside the last word. */
#results-table.has-client-col thead th:nth-child(4),
.xf-table.xf-table--mds.has-client-col thead th:nth-child(4) { white-space: normal; }
#results-table.has-client-col thead th:nth-child(4) .custom-datatable__sort-header,
.xf-table.xf-table--mds.has-client-col thead th:nth-child(4) .custom-datatable__sort-header { text-align: left; line-height: 1.2; padding-right: 0.5rem; }
.has-client-col thead th:nth-child(4) .mds-table__sort { flex-shrink: 0; }

/* Checkbox + row number share the No. column - flex them with a gap so the
   spacing matches the homepage table (xf-table--mds has the same rule). */
#results-table tbody tr.results-row > td:nth-child(1) {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Detail cell: strip vendor padding, transparent bg (inherits row stripe) */
#results-table .results-detail > td {
    height: auto;
    padding: 0;
    background-color: transparent;
    border-top: none;
    box-shadow: none;
    position: relative;
}
#results-table .results-detail > td::before {
    content: "";
    display: block;
    height: 1px;
    background-color: var(--color-gray-200);
    margin: 0 var(--space-5) 0 calc(var(--col-num) + 1rem);
}

/* Detail fields reflow by their own width instead of mirroring the 7 column
   tracks - see the .xf-table--mds grid above for the rationale (the narrow
   column tracks cramped wide values and forced mid-token wrapping). */
#results-table .results-detail__grid {
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--space-4) 0;
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}
#results-table .results-detail__grid > [aria-hidden="true"] {
    display: none;
}

#results-table .results-detail__item {
    padding: 0 1rem;
}

/* Global [hidden] reset - xfact-mds.css display rules can override the
   browser UA [hidden] rule; this restores expected behavior. */
[hidden] { display: none !important; }


/* =============================================================
   UNIFORM TABLE STYLE - custom-datatable
   Ports the .xf-table--mds MDS retheme (above) to ALL
   custom-datatable tables across the application using their
   existing class structure - no HTML changes needed in any of
   the 14+ table pages. Overrides vendor defaults from
   xfact-mds.css / xfact-custom-style.css which load earlier.
   ============================================================= */

/* --- Wrapper border: match the homepage's subtler border color --- */
.custom-datatable-wrapper { border-color: var(--color-border-subtle); }

/* --- Row hover: off - clean, distraction-free rows like the homepage --- */
.custom-datatable tbody tr:hover { background-color: inherit; }

/* --- Header row --- */
.custom-datatable thead tr { border-bottom: none; }
.custom-datatable thead th {
    height: 53px;
    padding: 0 1rem;
    background-color: #e6e6e6;
    border-bottom: 1px solid #dcdcdc;
    font-size: var(--type-size-base);
    font-weight: var(--font-weight-semibold, 600);
}

/* Sortable columns: strip th padding so the button fills the cell edge-to-edge */
.custom-datatable thead th:has(.custom-datatable__sort-header) { padding: 0; cursor: pointer; }
.custom-datatable .custom-datatable__sort-header {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 1rem;
}

/* Hover/active: background shift only - cancel the blue text/icon color change */
.custom-datatable thead th:has(.custom-datatable__sort-header):hover { background-color: #dcdcdc; }
.custom-datatable thead th[aria-sort]                                  { background-color: #cccccc; }
.custom-datatable thead th[aria-sort]:hover                            { background-color: #cccccc; }
.custom-datatable .custom-datatable__sort-header:hover                 { color: inherit; opacity: 1; }

/* --- Body cells --- */
.custom-datatable tbody td {
    height: 68px;
    padding: 0 1rem;
    font-size: var(--type-size-base);
}

/* Empty-state row - beat the vendor .custom-datatable tbody td { text-align:left;
   padding:...; height:68px } which outranks .xf-table__empty alone. */
.custom-datatable tbody td.xf-table__empty,
.xf-table--mds tbody td.xf-table__empty {
    text-align: center;
    height: auto;
    padding: 1.5rem 0;
}

/* --- Zebra striping (one row per record, most tables) --- */
.custom-datatable tbody tr:nth-child(odd)  { background-color: #ffffff; }
.custom-datatable tbody tr:nth-child(even) { background-color: #f7f7f7; }

/* Results table striping: see the #results-table block above for the
   correct white-first paired-row (4n) rules. */


/* =============================================================
   FILTER FIELD OVERRIDES - search inputs
   The MDS base (xfact-mds.css) targets input[type="text"];
   the results filter uses type="search" which needs the same
   styles plus a magnifying-glass background icon and native
   clear-button suppression.
   ============================================================= */

.mds-tablefilters__field input[type="search"] {
  width: 100%;
  min-height: 2.625rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  font-size: var(--type-size-sm);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23707070'><path d='M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem 1rem;
  padding-right: 2.125rem;
  -webkit-appearance: none; appearance: none;
}
.mds-tablefilters__field input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.mds-tablefilters__field input[type="search"]:focus {
  outline: 2px solid var(--color-focus-light);
  outline-offset: 1px;
}
.mds-input-clear-wrap.is-filled input[type="search"] { background-image: none; }


/* =============================================================
   DATEPICKER CLEAR BUTTON - positional override
   The clear button sits between the input and the calendar
   dropdown inside the composite p-datepicker flex row.
   ============================================================= */

.p-datepicker .mds-input-clear {
  position: static;
  transform: none;
  flex: 0 0 auto;
  width: 1.75rem;
  height: auto;
  border: 1px solid var(--color-gray-200);
  border-left: none;
  border-right: none;
  border-radius: 0;
  background: var(--color-bg-primary);
}
.p-datepicker .mds-input-clear svg { width: 0.875rem; height: 0.875rem; }
.p-datepicker--error .p-datepicker-input,
.p-datepicker--error .p-datepicker-dropdown { border-color: var(--color-border-danger); }


/* =============================================================
   FILTER SELECT OVERRIDES - .p-select inside filter panels
   Tighter sizing to match the filter field height.
   ============================================================= */

.mds-tablefilters .p-select {
  min-height: 2.625rem !important;
  align-items: center;
  padding-right: 0.25rem;
}
.mds-tablefilters .p-select-label {
  font-size: var(--type-size-sm) !important;
  min-height: 2.625rem;
}
.mds-tablefilters .p-select-dropdown { width: 1.625rem; }
.mds-tablefilters .mds-select-clear { width: 1.375rem; margin-right: 0; }
.mds-tablefilters .p-select-overlay { width: 100%; max-width: 100%; }


/* ================================================================
   Sort icon glyphs - mds-table__sort spans in .custom-datatable
   CSS-mask SVGs matching PrimeVue DataTable sort icons.
   Three states: neutral (both arrows), ascending, descending.
   ================================================================ */

.custom-datatable .mds-table__sort {
    display: inline-flex;
    width: 14px; height: 14px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: 14px 14px; mask-size: 14px 14px;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M5.64515 3.61291C5.47353 3.61291 5.30192 3.54968 5.16644 3.4142L3.38708 1.63484L1.60773 3.4142C1.34579 3.67613 0.912244 3.67613 0.650309 3.4142C0.388374 3.15226 0.388374 2.71871 0.650309 2.45678L2.90837 0.198712C3.17031 -0.0632236 3.60386 -0.0632236 3.86579 0.198712L6.12386 2.45678C6.38579 2.71871 6.38579 3.15226 6.12386 3.4142C5.98837 3.54968 5.81676 3.61291 5.64515 3.61291Z'/><path d='M3.38714 14C3.01681 14 2.70972 13.6929 2.70972 13.3226V0.677419C2.70972 0.307097 3.01681 0 3.38714 0C3.75746 0 4.06456 0.307097 4.06456 0.677419V13.3226C4.06456 13.6929 3.75746 14 3.38714 14Z'/><path d='M10.6129 14C10.4413 14 10.2697 13.9368 10.1342 13.8013L7.87611 11.5432C7.61418 11.2813 7.61418 10.8477 7.87611 10.5858C8.13805 10.3239 8.5716 10.3239 8.83353 10.5858L10.6129 12.3652L12.3922 10.5858C12.6542 10.3239 13.0877 10.3239 13.3497 10.5858C13.6116 10.8477 13.6116 11.2813 13.3497 11.5432L11.0916 13.8013C10.9561 13.9368 10.7845 14 10.6129 14Z'/><path d='M10.6129 14C10.2426 14 9.93552 13.6929 9.93552 13.3226V0.677419C9.93552 0.307097 10.2426 0 10.6129 0C10.9833 0 11.2904 0.307097 11.2904 0.677419V13.3226C11.2904 13.6929 10.9832 14 10.6129 14Z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M5.64515 3.61291C5.47353 3.61291 5.30192 3.54968 5.16644 3.4142L3.38708 1.63484L1.60773 3.4142C1.34579 3.67613 0.912244 3.67613 0.650309 3.4142C0.388374 3.15226 0.388374 2.71871 0.650309 2.45678L2.90837 0.198712C3.17031 -0.0632236 3.60386 -0.0632236 3.86579 0.198712L6.12386 2.45678C6.38579 2.71871 6.38579 3.15226 6.12386 3.4142C5.98837 3.54968 5.81676 3.61291 5.64515 3.61291Z'/><path d='M3.38714 14C3.01681 14 2.70972 13.6929 2.70972 13.3226V0.677419C2.70972 0.307097 3.01681 0 3.38714 0C3.75746 0 4.06456 0.307097 4.06456 0.677419V13.3226C4.06456 13.6929 3.75746 14 3.38714 14Z'/><path d='M10.6129 14C10.4413 14 10.2697 13.9368 10.1342 13.8013L7.87611 11.5432C7.61418 11.2813 7.61418 10.8477 7.87611 10.5858C8.13805 10.3239 8.5716 10.3239 8.83353 10.5858L10.6129 12.3652L12.3922 10.5858C12.6542 10.3239 13.0877 10.3239 13.3497 10.5858C13.6116 10.8477 13.6116 11.2813 13.3497 11.5432L11.0916 13.8013C10.9561 13.9368 10.7845 14 10.6129 14Z'/><path d='M10.6129 14C10.2426 14 9.93552 13.6929 9.93552 13.3226V0.677419C9.93552 0.307097 10.2426 0 10.6129 0C10.9833 0 11.2904 0.307097 11.2904 0.677419V13.3226C11.2904 13.6929 10.9832 14 10.6129 14Z'/></svg>");
    color: var(--color-text-secondary, #707070);
}
.custom-datatable .mds-table__sort--asc {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3.63435 0.19871C3.57113 0.135484 3.49887 0.0903226 3.41758 0.0541935C3.255 -0.0180645 3.06532 -0.0180645 2.90274 0.0541935C2.82145 0.0903226 2.74919 0.135484 2.68597 0.19871L0.427901 2.45677C0.165965 2.71871 0.165965 3.15226 0.427901 3.41419C0.689836 3.67613 1.12338 3.67613 1.38532 3.41419L2.48726 2.31226V13.3226C2.48726 13.6929 2.79435 14 3.16467 14C3.535 14 3.84209 13.6929 3.84209 13.3226V2.31226L4.94403 3.41419C5.07951 3.54968 5.25113 3.6129 5.42274 3.6129C5.59435 3.6129 5.76597 3.54968 5.90145 3.41419C6.16338 3.15226 6.16338 2.71871 5.90145 2.45677L3.64338 0.19871H3.63435ZM13.7685 13.3226C13.7685 12.9523 13.4615 12.6452 13.0911 12.6452H7.22016C6.84984 12.6452 6.54274 12.9523 6.54274 13.3226C6.54274 13.6929 6.84984 14 7.22016 14H13.0911C13.4615 14 13.7685 13.6929 13.7685 13.3226ZM7.22016 8.58064C6.84984 8.58064 6.54274 8.27355 6.54274 7.90323C6.54274 7.5329 6.84984 7.22581 7.22016 7.22581H9.47823C9.84855 7.22581 10.1556 7.5329 10.1556 7.90323C10.1556 8.27355 9.84855 8.58064 9.47823 8.58064H7.22016ZM7.22016 5.87097H7.67177C8.0421 5.87097 8.34919 5.56387 8.34919 5.19355C8.34919 4.82323 8.0421 4.51613 7.67177 4.51613H7.22016C6.84984 4.51613 6.54274 4.82323 6.54274 5.19355C6.54274 5.56387 6.84984 5.87097 7.22016 5.87097ZM11.2847 11.2903H7.22016C6.84984 11.2903 6.54274 10.9832 6.54274 10.6129C6.54274 10.2426 6.84984 9.93548 7.22016 9.93548H11.2847C11.655 9.93548 11.9621 10.2426 11.9621 10.6129C11.9621 10.9832 11.655 11.2903 11.2847 11.2903Z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3.63435 0.19871C3.57113 0.135484 3.49887 0.0903226 3.41758 0.0541935C3.255 -0.0180645 3.06532 -0.0180645 2.90274 0.0541935C2.82145 0.0903226 2.74919 0.135484 2.68597 0.19871L0.427901 2.45677C0.165965 2.71871 0.165965 3.15226 0.427901 3.41419C0.689836 3.67613 1.12338 3.67613 1.38532 3.41419L2.48726 2.31226V13.3226C2.48726 13.6929 2.79435 14 3.16467 14C3.535 14 3.84209 13.6929 3.84209 13.3226V2.31226L4.94403 3.41419C5.07951 3.54968 5.25113 3.6129 5.42274 3.6129C5.59435 3.6129 5.76597 3.54968 5.90145 3.41419C6.16338 3.15226 6.16338 2.71871 5.90145 2.45677L3.64338 0.19871H3.63435ZM13.7685 13.3226C13.7685 12.9523 13.4615 12.6452 13.0911 12.6452H7.22016C6.84984 12.6452 6.54274 12.9523 6.54274 13.3226C6.54274 13.6929 6.84984 14 7.22016 14H13.0911C13.4615 14 13.7685 13.6929 13.7685 13.3226ZM7.22016 8.58064C6.84984 8.58064 6.54274 8.27355 6.54274 7.90323C6.54274 7.5329 6.84984 7.22581 7.22016 7.22581H9.47823C9.84855 7.22581 10.1556 7.5329 10.1556 7.90323C10.1556 8.27355 9.84855 8.58064 9.47823 8.58064H7.22016ZM7.22016 5.87097H7.67177C8.0421 5.87097 8.34919 5.56387 8.34919 5.19355C8.34919 4.82323 8.0421 4.51613 7.67177 4.51613H7.22016C6.84984 4.51613 6.54274 4.82323 6.54274 5.19355C6.54274 5.56387 6.84984 5.87097 7.22016 5.87097ZM11.2847 11.2903H7.22016C6.84984 11.2903 6.54274 10.9832 6.54274 10.6129C6.54274 10.2426 6.84984 9.93548 7.22016 9.93548H11.2847C11.655 9.93548 11.9621 10.2426 11.9621 10.6129C11.9621 10.9832 11.655 11.2903 11.2847 11.2903Z'/></svg>");
}
.custom-datatable .mds-table__sort--desc {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M4.93953 10.5858L3.83759 11.6877V0.677419C3.83759 0.307097 3.53049 0 3.16017 0C2.78985 0 2.48275 0.307097 2.48275 0.677419V11.6877L1.38082 10.5858C1.11888 10.3239 0.685331 10.3239 0.423396 10.5858C0.16146 10.8477 0.16146 11.2813 0.423396 11.5432L2.68146 13.8013C2.74469 13.8645 2.81694 13.9097 2.89823 13.9458C2.97952 13.9819 3.06985 14 3.16017 14C3.25049 14 3.33178 13.9819 3.42211 13.9458C3.5034 13.9097 3.57565 13.8645 3.63888 13.8013L5.89694 11.5432C6.15888 11.2813 6.15888 10.8477 5.89694 10.5858C5.63501 10.3239 5.20146 10.3239 4.93953 10.5858ZM13.0957 0H7.22468C6.85436 0 6.54726 0.307097 6.54726 0.677419C6.54726 1.04774 6.85436 1.35484 7.22468 1.35484H13.0957C13.466 1.35484 13.7731 1.04774 13.7731 0.677419C13.7731 0.307097 13.466 0 13.0957 0ZM7.22468 5.41935H9.48275C9.85307 5.41935 10.1602 5.72645 10.1602 6.09677C10.1602 6.4671 9.85307 6.77419 9.48275 6.77419H7.22468C6.85436 6.77419 6.54726 6.4671 6.54726 6.09677C6.54726 5.72645 6.85436 5.41935 7.22468 5.41935ZM7.6763 8.12903H7.22468C6.85436 8.12903 6.54726 8.43613 6.54726 8.80645C6.54726 9.17677 6.85436 9.48387 7.22468 9.48387H7.6763C8.04662 9.48387 8.35372 9.17677 8.35372 8.80645C8.35372 8.43613 8.04662 8.12903 7.6763 8.12903ZM7.22468 2.70968H11.2892C11.6595 2.70968 11.9666 3.01677 11.9666 3.3871C11.9666 3.75742 11.6595 4.06452 11.2892 4.06452H7.22468C6.85436 4.06452 6.54726 3.75742 6.54726 3.3871C6.54726 3.01677 6.85436 2.70968 7.22468 2.70968Z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M4.93953 10.5858L3.83759 11.6877V0.677419C3.83759 0.307097 3.53049 0 3.16017 0C2.78985 0 2.48275 0.307097 2.48275 0.677419V11.6877L1.38082 10.5858C1.11888 10.3239 0.685331 10.3239 0.423396 10.5858C0.16146 10.8477 0.16146 11.2813 0.423396 11.5432L2.68146 13.8013C2.74469 13.8645 2.81694 13.9097 2.89823 13.9458C2.97952 13.9819 3.06985 14 3.16017 14C3.25049 14 3.33178 13.9819 3.42211 13.9458C3.5034 13.9097 3.57565 13.8645 3.63888 13.8013L5.89694 11.5432C6.15888 11.2813 6.15888 10.8477 5.89694 10.5858C5.63501 10.3239 5.20146 10.3239 4.93953 10.5858ZM13.0957 0H7.22468C6.85436 0 6.54726 0.307097 6.54726 0.677419C6.54726 1.04774 6.85436 1.35484 7.22468 1.35484H13.0957C13.466 1.35484 13.7731 1.04774 13.7731 0.677419C13.7731 0.307097 13.466 0 13.0957 0ZM7.22468 5.41935H9.48275C9.85307 5.41935 10.1602 5.72645 10.1602 6.09677C10.1602 6.4671 9.85307 6.77419 9.48275 6.77419H7.22468C6.85436 6.77419 6.54726 6.4671 6.54726 6.09677C6.54726 5.72645 6.85436 5.41935 7.22468 5.41935ZM7.6763 8.12903H7.22468C6.85436 8.12903 6.54726 8.43613 6.54726 8.80645C6.54726 9.17677 6.85436 9.48387 7.22468 9.48387H7.6763C8.04662 9.48387 8.35372 9.17677 8.35372 8.80645C8.35372 8.43613 8.04662 8.12903 7.6763 8.12903ZM7.22468 2.70968H11.2892C11.6595 2.70968 11.9666 3.01677 11.9666 3.3871C11.9666 3.75742 11.6595 4.06452 11.2892 4.06452H7.22468C6.85436 4.06452 6.54726 3.75742 6.54726 3.3871C6.54726 3.01677 6.85436 2.70968 7.22468 2.70968Z'/></svg>");
}
.custom-datatable thead th[aria-sort] .mds-table__sort { color: var(--color-text-primary, #141414); }

/* ================================================================
   Filter count chip ("Clear all X") - interactive enhancements
   on top of the MDS base styles in xfact-mds.css.
   ================================================================ */
.mds-filters__count { cursor: pointer;}
.mds-filters__count:hover { background-color: rgba(255,255,255,0.5); border-color: var(--color-gray-400); }
.mds-filters__count:hover .mds-filters__count-clear { color: var(--color-text-primary); }
.mds-filters__count-clear svg { width: 0.875rem; height: 0.875rem; }

/* ================================================================
   Registration — disabled button tooltip
   ================================================================ */
.icori-btn-tooltip-wrap {
    position: relative;
    display: inline-block;
}
.icori-btn-tooltip {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: #333;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    pointer-events: none;
    z-index: 10;
}
.icori-btn-tooltip-wrap:has(button:disabled):hover .icori-btn-tooltip {
    display: block;
}

/* Inline info-icon tooltip — shows immediately on hover, no delay */
.icori-info-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: help;
    vertical-align: middle;
}
.icori-info-tip__bubble {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    white-space: normal;
    background: #333;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.4;
    pointer-events: none;
    z-index: 100;
}
.icori-info-tip:hover .icori-info-tip__bubble {
    display: block;
}

.mds-btn-group--fixed > .mds-btn {
    flex: 0 0 200px;
}

#continueBtn {
    width: 200px;
}

.icori-inline-edit-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    font-size: 1rem;
    font-weight: normal;
    color: var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
}
.icori-inline-edit-link:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------------------
   Full-page loading overlay (see #icori-loading-overlay in layout/base.html)
   Dark translucent scrim over the whole viewport with the MDS loader centered.
   Shown while a navigation or in-place results fetch is in flight.
   ------------------------------------------------------------------ */
.icori-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    cursor: progress;
}
.icori-loading-overlay[hidden] {
    display: none;
}
.icori-loading-overlay .mds-loader__spinner--css {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
}