/* ================================================================
   mds-responsive.css - Responsive overrides for xfact-mds.css
   ================================================================
   Breakpoints:
     @media (max-width: 1024px)  - Tablet
     @media (max-width: 767px)   - Mobile mode (matches the design-system
                                   767|768 boundary: xfact-mds.css flips the
                                   nav to hamburger, tables to cards, layout
                                   to single-column, etc. at max-width:767)
     @media (max-width: 480px)   - Small mobile
   The heading-scale tier below stays at 1024/480 because xfact-mds.css owns
   the 768px heading step itself (vendor, read-only).

   This file contains ONLY overrides - rules that change at one
   or more of the three breakpoints above.  Load it AFTER
   xfact-mds.css.
   ================================================================ */


/* ================================================================
   Section 1: Base - Typography & Container
   ================================================================ */

/* Heading scale is partially handled in xfact-mds.css at 768px.
   Add the 1024px tier and tighten the 480px tier further. */

@media (max-width: 1024px) {
  h1 { font-size: var(--type-size-4xl); }   /* 40px */
  h2 { font-size: var(--type-size-3xl); }   /* 32px */
  h3 { font-size: var(--type-size-2xl); }   /* 28px */
}

@media (max-width: 480px) {
  h1 { font-size: var(--type-size-2xl); }   /* 28px */
  h2 { font-size: var(--type-size-xl); }    /* 24px */
  h3 { font-size: var(--type-size-lg); }    /* 20px */
  h4 { font-size: var(--type-size-md); }    /* 18px */
  h5 { font-size: var(--type-size-base); }  /* 16px */
  h6 { font-size: var(--type-size-sm); }    /* 14px */
}

/* Container padding already handled in xfact-mds.css.
   Extra safety for very small screens. */
@media (max-width: 480px) {
  .mds-container {
    padding: 0 var(--space-3);
  }
}


/* ================================================================
   Section 2: Badge
   ================================================================ */

/* Badges are inline and naturally wrap - no breakpoint overrides
   required.  The max-width: 20ch cap prevents overflow already. */


/* ================================================================
   Section 3: Breadcrumbs
   ================================================================ */

/* xfact-mds.css already handles 767px (xs font) and 1023px
   (reduced padding).  Cover the explicit 1024px and 480px tiers. */

@media (max-width: 1024px) {
  .mds-breadcrumb {
    padding: var(--space-2) 0;
  }
}

@media (max-width: 480px) {
  .mds-breadcrumb {
    padding: var(--space-1) 0;
    font-size: var(--type-size-xs);
  }

  /* Tighten the separator chevron */
  .mds-breadcrumb__item + .mds-breadcrumb__item::before {
    margin: 0 var(--space-1);
  }
}


/* ================================================================
   Section 4: Button
   ================================================================ */

/* Large buttons become full-width on small mobile */
@media (max-width: 480px) {
  .mds-btn--full-width-mobile {
    width: 100%;
    justify-content: center;
  }

  /* Shrink large-size buttons slightly */
  .mds-btn--lg {
    padding: var(--space-2) var(--space-4);
    font-size: var(--type-size-sm);
    min-height: 40px;
  }
}


/* ================================================================
   Section 5: Button Group
   ================================================================ */

/* xfact-mds.css already stacks at 479px and wraps at 480–767px.
   Add the 767px tier: allow wrapping on large mobile. */

@media (max-width: 767px) {
  .mds-btn-group {
    flex-wrap: wrap;
  }
}

/* Explicit 480px full-width (complements xfact-mds.css 479px rule) */
@media (max-width: 480px) {
  .mds-btn-group {
    flex-direction: column;
    width: 100%;
  }

  .mds-btn-group > .mds-btn {
    width: 100%;
    justify-content: center;
  }
}


/* ================================================================
   Section 6: Callout Link
   ================================================================ */

/* 2-col grid → 1-col at 767px (tablet breakpoint) */
@media (max-width: 767px) {
  .mds-callout-container {
    grid-template-columns: 1fr;
  }
}

/* xfact-mds.css handles 480px (column direction + min-width 100%) */


/* ================================================================
   Section 7: Card Interactive
   ================================================================ */

/* Grid breakdowns are already in xfact-mds.css.
   Enforce min-width 0 at 767px for 2-col grid edge case. */

@media (max-width: 767px) {
  .mds-card-interactive {
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .mds-card-interactive {
    max-width: 100%;
  }

  .mds-card-interactive__content {
    padding: var(--space-4);
  }

  .mds-card-interactive__heading {
    font-size: var(--type-size-md);
  }
}


/* ================================================================
   Section 8: Card Shell
   ================================================================ */

@media (max-width: 767px) {
  .mds-card-shell {
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .mds-card-shell {
    max-width: 100%;
  }

  .mds-card-shell__content {
    padding: var(--space-4);
  }
}


/* ================================================================
   Section 9: Card Static
   ================================================================ */

@media (max-width: 767px) {
  .mds-card-static {
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .mds-card-static {
    max-width: 100%;
  }

  .mds-card-static__content {
    padding: var(--space-4);
  }

  .mds-card-static__links {
    padding: var(--space-3) var(--space-4);
  }
}


/* ================================================================
   Section 10: Checkbox
   ================================================================ */

/* Horizontal layout stacks at 480px (handled in xfact-mds.css).
   Loosen max-width of legend on tablet. */

@media (max-width: 767px) {
  .mds-checkbox-group__legend {
    max-width: none;
  }
}

@media (max-width: 480px) {
  .mds-checkbox-group__legend {
    font-size: var(--type-size-sm);
  }
}


/* ================================================================
   Section 11: Chip
   ================================================================ */

/* xfact-mds.css handles 480px.  Tighten gap at 767px. */

@media (max-width: 767px) {
  .mds-chip-group {
    gap: var(--space-2);
  }
}


/* ================================================================
   Section 12: Container Button Group
   ================================================================ */

/* xfact-mds.css handles 480px.  Add tablet wrap. */

@media (max-width: 767px) {
  .mds-button-group--horizontal {
    flex-wrap: wrap;
  }

  .mds-button-group__btn {
    flex: 1 1 auto;
  }
}

@media (max-width: 480px) {
  /* Vertical stack when horizontal group is too narrow */
  .mds-button-group--horizontal {
    flex-direction: column;
    width: 100%;
  }

  .mds-button-group--horizontal .mds-button-group__btn {
    margin-left: 0;
    margin-top: -2px;
    border-radius: 0;
    width: 100%;
  }

  .mds-button-group--horizontal .mds-button-group__btn:first-child {
    margin-top: 0;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }

  .mds-button-group--horizontal .mds-button-group__btn:last-child {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
  }
}


/* ================================================================
   Section 13: Date Input
   ================================================================ */

/* xfact-mds.css already handles 375px (wraps month to full width)
   and 480px (max-width: 100%).
   Add 767px tier: ensure full width on large mobile. */

@media (max-width: 767px) {
  .mds-date-group {
    max-width: 100%;
  }
}

/* Slightly tighter sub-field sizing on small mobile */
@media (max-width: 480px) {
  .mds-date-field--month {
    min-width: 100px;
  }

  .mds-date-select,
  .mds-date-number-input {
    font-size: var(--type-size-sm);
    padding: var(--space-2) var(--space-3);
  }

  .mds-date-select {
    padding-right: calc(var(--space-3) + 16px);
  }
}

/* General select full-width on mobile */
@media (max-width: 480px) {
  .mds-select {
    max-width: 100%;
  }
}


/* ================================================================
   Section 14: Decorative Link
   ================================================================ */

/* xfact-mds.css handles 480px for --button variant.
   On small mobile, button-style decorative link fills width. */

@media (max-width: 480px) {
  .mds-decorative-link--button {
    width: 100%;
    justify-content: center;
  }
}


/* ================================================================
   Section 15: Details Toggle
   ================================================================ */

/* xfact-mds.css handles 480px.  No additional overrides needed. */


/* ================================================================
   Section 16: File Upload
   ================================================================ */

/* xfact-mds.css handles 480px.  Add 767px full-width. */

@media (max-width: 767px) {
  .mds-file-upload {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .mds-file-upload__dropzone {
    padding: var(--space-6) var(--space-3);
  }

  .mds-file-upload__text {
    font-size: var(--type-size-sm);
  }
}


/* ================================================================
   Section 17: Footer
   ================================================================ */

/* xfact-mds.css covers 767px mobile and 1023px/768px tablet grid.
   Add 1024px tablet breakpoint and 480px small-mobile refinements. */

@media (max-width: 1024px) {
  .mds-footer__main--full {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

  .mds-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .mds-footer__main--full {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .mds-footer__inner {
    padding: var(--space-6) var(--space-4);
  }

  .mds-footer__description {
    max-width: none;
  }
}

@media (max-width: 480px) {
  .mds-footer__inner {
    padding: var(--space-4) var(--space-3);
  }

  .mds-footer__main {
    gap: var(--space-6);
    margin-bottom: var(--space-6);
  }

  .mds-footer__legal {
    flex-direction: column;
    gap: var(--space-2);
  }

  /* Remove pipe separators on small mobile - they read oddly in a column */
  .mds-footer__legal-link + .mds-footer__legal-link::before {
    display: none;
  }

  .mds-footer__site-name {
    font-size: var(--type-size-xs);
  }

  .mds-footer__seal img,
  .mds-footer__seal svg {
    width: 36px;
    height: 36px;
  }
}


/* ================================================================
   Section 18: Form Intro
   ================================================================ */

/* xfact-mds.css handles 480px.  Add 767px. */

@media (max-width: 767px) {
  .mds-form-intro {
    max-width: 100%;
  }

  .mds-form-intro__title {
    font-size: var(--type-size-lg);
  }
}

@media (max-width: 480px) {
  .mds-form-intro__title {
    font-size: var(--type-size-md);
  }

  .mds-form-intro__title-row {
    gap: var(--space-2);
    margin-bottom: var(--space-3);
  }
}


/* ================================================================
   Section 19: Icon Button
   ================================================================ */

/* Touch targets: ensure 44×44 on all mobile viewports */
@media (max-width: 767px) {
  .mds-icon-btn {
    width: 44px;
    height: 44px;
  }
}


/* ================================================================
   Section 20: Inline Link
   ================================================================ */

/* Inline links wrap naturally.  No structural overrides needed. */


/* ================================================================
   Section 21: Inline Message
   ================================================================ */

/* xfact-mds.css handles 480px (tighter padding).
   Add 767px: reduce horizontal padding slightly. */

@media (max-width: 767px) {
  .mds-inline-message {
    padding: var(--space-3) var(--space-4);
  }
}

@media (max-width: 480px) {
  .mds-inline-message {
    gap: var(--space-2);
    padding: var(--space-3);
  }

  .mds-inline-message__heading {
    font-size: var(--type-size-sm);
  }
}


/* ================================================================
   Section 22: Input Group
   ================================================================ */

/* xfact-mds.css handles 480px.  Add 767px. */

@media (max-width: 767px) {
  .mds-input-group-wrapper {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .mds-input-group-wrapper {
    min-width: 0;
  }

  .mds-input-group__input {
    font-size: var(--type-size-sm);
  }

  .mds-input-group__left-btn,
  .mds-input-group__right-btn {
    padding: var(--space-2);
    font-size: var(--type-size-xs);
  }
}


/* ================================================================
   Section 23: Lists
   ================================================================ */

/* xfact-mds.css handles 480px font size reduction.
   Adjust indent for very small screens. */

@media (max-width: 480px) {
  .mds-list-unordered > li {
    padding-left: calc(var(--space-4) + 8px);
  }

  .mds-list-ordered > li {
    padding-left: calc(var(--space-5) + 4px);
  }
}


/* ================================================================
   Section 24: Loader
   ================================================================ */

/* Loader scales down on small mobile */
@media (max-width: 480px) {
  .mds-loader--xl .mds-loader__spinner,
  .mds-loader--xl .mds-loader__spinner--css {
    width: 4.5rem;
    height: 4.5rem;
  }

  .mds-loader--lg .mds-loader__spinner,
  .mds-loader--lg .mds-loader__spinner--css {
    width: 3rem;
    height: 3rem;
  }
}


/* ================================================================
   Section 25: Modal
   ================================================================ */

/* Figma shows: narrow viewport → modal fills width, buttons stack
   vertically (primary on top).  xfact-mds.css handles 480px.
   Add 767px tier for intermediate sizing. */

@media (max-width: 767px) {
  .mds-modal {
    max-width: calc(100vw - var(--space-8));
    padding: var(--space-6);
  }

  .mds-modal-overlay {
    padding: var(--space-3);
  }
}

@media (max-width: 480px) {
  /* Full viewport width with no side gaps on smallest screens */
  .mds-modal-overlay {
    padding: var(--space-2);
    align-items: flex-end;   /* sheet-from-bottom on phone */
  }

  .mds-modal {
    max-width: 100%;
    padding: var(--space-5) var(--space-4);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    max-height: 90vh;
  }

  .mds-modal__actions {
    flex-direction: column;
    gap: var(--space-2);
  }

  .mds-modal__actions .mds-modal__btn {
    width: 100%;
  }

  .mds-modal__title {
    font-size: var(--type-size-md);
  }
}


/* ================================================================
   Section 26: Modal Shell
   ================================================================ */

@media (max-width: 767px) {
  .mds-modal-shell {
    max-width: calc(100vw - var(--space-8));
    padding: var(--space-6);
  }

  .mds-modal-shell-overlay {
    padding: var(--space-3);
  }
}

@media (max-width: 480px) {
  .mds-modal-shell-overlay {
    padding: var(--space-2);
    align-items: flex-end;
  }

  .mds-modal-shell {
    max-width: 100%;
    padding: var(--space-4) var(--space-4);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    max-height: 90vh;
  }
}


/* ================================================================
   Section 27: Pagination
   ================================================================ */

/* xfact-mds.css already shows mobile select at ≤480px and desktop
   numbered pagination at ≥481px.
   At 767px, reduce padding on pager buttons to conserve space. */

@media (max-width: 767px) {
  .mds-pagination {
    max-width: 100%;
  }

  .mds-pagination__pager {
    padding: var(--space-1);
  }

  .mds-pagination__link {
    min-width: 1.75rem;
    height: 1.75rem;
    padding: var(--space-1);
  }
}


/* ================================================================
   Section 28: Password Input
   ================================================================ */

/* xfact-mds.css handles 480px.  Add 767px. */

@media (max-width: 767px) {
  .mds-password-group {
    max-width: 100%;
  }
}


/* ================================================================
   Section 29: Phone Input
   ================================================================ */

/* xfact-mds.css handles 480px.  Add 767px. */

@media (max-width: 767px) {
  .mds-phone-group {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  /* Ensure dropdown doesn't overflow viewport */
  .mds-phone-country-dropdown {
    min-width: 200px;
    max-width: calc(100vw - var(--space-8));
  }
}


/* ================================================================
   Section 30: Popover
   ================================================================ */

/* xfact-mds.css handles 480px (fills width, resets left/right).
   No additional overrides needed. */


/* ================================================================
   Section 31: Popup Menu
   ================================================================ */

/* xfact-mds.css handles 480px.  No additional overrides needed. */


/* ================================================================
   Section 32: Radio Button
   ================================================================ */

/* xfact-mds.css handles 480px.  Match checkbox changes. */

@media (max-width: 767px) {
  .mds-radio-group__legend {
    max-width: none;
  }
}

@media (max-width: 480px) {
  .mds-radio-group__legend {
    font-size: var(--type-size-sm);
  }

  .mds-radio {
    max-width: 100%;
  }
}


/* ================================================================
   Section 33: Scrollbar
   ================================================================ */

/* On touch devices, native scrollbars are preferred.
   Thin them down on narrow viewports. */

@media (max-width: 767px) {
  .mds-scrollable::-webkit-scrollbar {
    width: 8px;
  }

  .mds-scrollable--horizontal::-webkit-scrollbar {
    height: 8px;
  }
}


/* ================================================================
   Section 34: Site Header
   ================================================================ */

/* xfact-mds.css handles 767px (column stack) and 479px (tighter
   padding + smaller name).
   Add 1024px tier and explicit 480px alignment. */

@media (max-width: 1024px) {
  .mds-site-header__inner {
    gap: var(--space-3);
  }

  .mds-site-header__name {
    font-size: var(--type-size-md);
  }

  /* Utility items can wrap on tablet */
  .mds-site-header__utility {
    flex-wrap: wrap;
  }
}

@media (max-width: 767px) {
  .mds-site-header__inner {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-3) var(--space-4);
    gap: var(--space-3);
  }

  .mds-site-header__actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .mds-site-header__search {
    width: 100%;
  }

  .mds-site-header__search-input {
    flex: 1;
    min-width: 0;
  }

  .mds-site-header__utility {
    width: 100%;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
}

@media (max-width: 480px) {
  .mds-site-header__inner {
    padding: var(--space-3);
  }

  .mds-site-header__seal {
    width: 32px;
    height: 32px;
  }

  .mds-site-header__seal img,
  .mds-site-header__seal svg {
    width: 32px;
    height: 32px;
  }

  .mds-site-header__name {
    font-size: var(--type-size-base);
  }

  .mds-site-header__subname {
    font-size: var(--type-size-xs);
  }

  .mds-site-header__utility-link {
    font-size: var(--type-size-xs);
    padding: var(--space-1) var(--space-2);
  }
}


/* ================================================================
   Section 35: Sitewide Alert
   ================================================================ */

/* xfact-mds.css handles 479px (padding tightening + block display
   for title/text).  Add 767px padding adjustment. */

@media (max-width: 767px) {
  .mds-sitewide-alert__single {
    padding: var(--space-3) var(--space-4);
  }

  .mds-sitewide-alert__header {
    padding: var(--space-3) var(--space-4);
  }

  .mds-sitewide-alert__single-inner,
  .mds-sitewide-alert__header-inner {
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .mds-sitewide-alert__single {
    padding: var(--space-3);
  }

  .mds-sitewide-alert__header {
    padding: var(--space-3);
  }

  .mds-sitewide-alert__list-item {
    padding: var(--space-3);
  }

  .mds-sitewide-alert__heading {
    white-space: normal;
  }
}


/* ================================================================
   Section 36: State Banner
   ================================================================ */

/* xfact-mds.css handles 699px column stacking and 768px inner
   padding. Tighten for 480px. */

@media (max-width: 480px) {
  .mds-state-banner__inner {
    padding: var(--space-1) var(--space-3);
  }

  .mds-state-banner__text {
    font-size: var(--type-size-xs);
  }

  .mds-state-banner__toggle {
    font-size: var(--type-size-xs);
    padding: var(--space-1);
  }

  /* Horizontal only - the info columns own the vertical padding. */
  .mds-state-banner__dropdown {
    padding: 0 var(--space-3);
  }
}


/* ================================================================
   Section 37: Step Indicator
   ================================================================ */

/* xfact-mds.css already implements the full three-tier swap:
   desktop (≥769px) → tablet (481–768px) → mobile (≤480px).
   These are structural display:none / display:flex toggles.

   Additional spacing refinements per Figma: */

@media (max-width: 767px) {
  /* Tablet variant: tighten font */
  .mds-step-indicator--tablet .mds-step-indicator__info {
    font-size: var(--type-size-xs);
    gap: var(--space-3);
  }
}

@media (max-width: 480px) {
  /* Mobile variant: tighten bar max-width */
  .mds-step-indicator--mobile .mds-step-indicator__bar-track {
    max-width: 160px;
  }

  .mds-step-indicator--mobile .mds-step-indicator__current {
    font-size: var(--type-size-xs);
  }

  .mds-step-indicator--mobile .mds-step-indicator__next {
    font-size: var(--type-size-xs);
  }
}


/* ================================================================
   Section 38: Switch
   ================================================================ */

/* xfact-mds.css handles 480px (full width + space-between).
   No additional overrides needed. */


/* ================================================================
   Section 39: Tab
   ================================================================ */

/* xfact-mds.css handles 767px (accordion mode).
   Figma tab-9.png shows accordion triggers with chevron.
   Add 480px adjustments for accordion panel padding. */

@media (max-width: 480px) {
  .mds-tabs__accordion-trigger {
    padding: var(--space-3);
    font-size: var(--type-size-sm);
  }

  .mds-tabs__panel {
    padding: var(--space-3);
  }
}

/* On tablet, allow tab list to scroll horizontally (already set via
   overflow-x: auto on the list - ensure nowrap). */
@media (max-width: 1024px) {
  .mds-tabs__list {
    flex-wrap: nowrap;
  }

  .mds-tabs__tab {
    flex-shrink: 0;
  }
}


/* ================================================================
   Section 40: Text Area
   ================================================================ */

/* xfact-mds.css handles 480px (min-width: 100%).
   Add 767px. */

@media (max-width: 767px) {
  .mds-text-area {
    min-width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .mds-text-area {
    font-size: var(--type-size-sm);
    padding: var(--space-2) var(--space-3);
    min-height: 80px;
  }
}


/* ================================================================
   Section 41: Text Input
   ================================================================ */

/* xfact-mds.css handles 480px (max-width: 100%).
   Add 767px. */

@media (max-width: 767px) {
  .mds-form-group {
    max-width: 100%;
  }

  .mds-text-input {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .mds-form-group {
    min-width: 0;
    margin-bottom: var(--space-4);
  }

  .mds-text-input {
    font-size: var(--type-size-sm);
    padding: var(--space-2) var(--space-3);
  }
}


/* ================================================================
   Section 42: Tooltip
   ================================================================ */

/* xfact-mds.css handles 480px (wrapping + max-width).
   No additional overrides needed. */


/* ================================================================
   Section 43: Utility Navigation Banner
   ================================================================ */

/* xfact-mds.css handles 767px (flex-wrap) and 479px (smaller font,
   tighter padding).
   Add 1024px tier. */

@media (max-width: 1024px) {
  .mds-utility-nav__items {
    gap: var(--space-3);
  }
}

@media (max-width: 767px) {
  .mds-utility-nav__inner {
    min-height: 48px;
    padding: 0 var(--space-3);
  }

  .mds-utility-nav__menu-btn {
    min-height: 44px;
    padding: var(--space-2);
  }
}

@media (max-width: 480px) {
  .mds-utility-nav__inner {
    padding: 0 var(--space-3);
    flex-wrap: wrap;
    gap: var(--space-1);
    min-height: 44px;
  }

  .mds-utility-nav__items {
    gap: var(--space-1);
    flex-wrap: wrap;
  }

  .mds-utility-nav__link {
    font-size: var(--type-size-xs);
    padding: var(--space-1) var(--space-1);
  }

  .mds-utility-nav__icon {
    width: 20px;
    height: 20px;
  }
}


/* ================================================================
   Section 44: Data Table (xFact Custom Component)
   ================================================================ */

/* xfact-mds.css handles 1024px (toolbar column stack), 767px
   (edge-to-edge), and 480px (card layout option).
   Add compact header treatment at tablet. */

@media (max-width: 1024px) {
  .custom-datatable thead th {
    font-size: var(--type-size-xs);
    padding: var(--space-2) var(--space-3);
    white-space: nowrap;
  }

  .custom-datatable tbody td {
    font-size: var(--type-size-xs);
    padding: var(--space-2) var(--space-3);
  }

  .custom-datatable-footer__start {
    font-size: var(--type-size-xs);
  }

  .custom-datatable-footer__range {
    font-size: var(--type-size-xs);
  }
}

@media (max-width: 767px) {
  /* Toolbar: stack search above action buttons */
  .custom-datatable-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  .custom-datatable-toolbar__search {
    max-width: none;
  }

  .custom-datatable-toolbar__end {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  /* Footer: stack and center all three rows */
  .custom-datatable-footer {
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
  }

  .custom-datatable-footer .mds-pagination {
    width: 100%;
    justify-content: center;
  }

  .custom-datatable-footer__start {
    justify-content: center;
    font-size: var(--type-size-sm);
  }

  .custom-datatable-footer__range {
    text-align: center;
    font-size: var(--type-size-sm);
  }

  /* Restore the closing border on card-mode rows - the JS marks the last
     visible row with .xf-pg-last-row to suppress the desktop double-border,
     but each card needs its full border box on mobile. */
  .xf-table--mds tbody tr.xf-pg-last-row {
    border-bottom: 1px solid #dcdcdc !important;
  }

  .icori-homepage-notice {
    margin: 2rem 0 !important;
  }
}

/* Card/stack layout for the card-mobile variant.
   xfact-mds.css only enables this at <=480px ("Small mobile"), but the site
   switches to its mobile layout (hamburger nav) at max-width:767px. That left
   the 481-767px band with mobile nav but horizontally-scrolling tables.
   Promote the stack to the full <=767px range so tables stack on the exact
   same 767|768 boundary the rest of the design system flips on (nav, layout,
   header, etc.). Rules mirror the vendor card-mobile block (xfact-mds.css
   Section 19) so the appearance is identical; they merely apply across a wider
   breakpoint. */
@media (max-width: 767px) {
  /* In card mode each row is its own bordered card, so the wrapper must not
     draw its own frame - AND it must not use the vendor edge-to-edge full-bleed
     that the scrolling-table variant relies on (xfact-mds.css Section 18:
     negative --space-4 margins + width:calc(100% + --space-4*2), which cancel
     the .xf-layout page gutter so a scrolling table touches both screen edges).
     For stacked cards that full-bleed is wrong - the cards should sit within
     the same left/right padding as the rest of the page. Cancel the margins and
     restore the normal content width.
     NB: the wrapper is the PARENT of the card-mobile table, so it is matched
     with :has(), not a descendant selector (the old descendant form never
     matched, leaving the full-bleed in place). */
  .custom-datatable-wrapper:has(.custom-datatable--card-mobile) {
    border: none;
    background: transparent;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }

  .custom-datatable--card-mobile thead {
    display: none;
  }

  .custom-datatable--card-mobile tbody tr {
    display: block;
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-2);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg-primary);
  }

  .custom-datatable--card-mobile tbody tr:last-child {
    border-bottom: 1px solid var(--color-gray-200);
    margin-bottom: 0;
  }

  .custom-datatable--card-mobile tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--space-1) 0;
    border: none;
    font-size: var(--type-size-sm);
    text-align: right;
  }

  .custom-datatable--card-mobile tbody td::before {
    content: attr(data-label);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-align: left;
    margin-right: var(--space-4);
    flex-shrink: 0;
    font-size: var(--type-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  /* The vendor rules treat the final column as an actions cell (right-align
     + a top separator line). That is wrong for data-only tables - e.g.
     manage-account's last column is "Changed by" - and for empty cells it
     leaves a lone label floating right. Reset last-child to the plain
     key/value layout: a single label (empty value) then stays left, and no
     stray separator line appears above a data column. */
  .custom-datatable--card-mobile tbody td:last-child {
    justify-content: space-between;
    padding-top: var(--space-1);
    margin-top: 0;
    border-top: none;
  }

  /* Re-apply the full-width, right-aligned actions treatment ONLY to genuine
     action cells that actually contain a control (:has(> *)). An empty action
     cell - e.g. the current user's own row where the View button is hidden -
     is not matched, so its label stays left with no separator. */
  .custom-datatable--card-mobile tbody td[data-label="Actions"]:has(> *),
  .custom-datatable--card-mobile tbody td[data-label="Action"]:has(> *) {
    justify-content: flex-end;
    padding-top: var(--space-2);
    margin-top: var(--space-1);
    border-top: 1px solid var(--color-gray-100);
  }

  /* Empty-state / full-span rows (e.g. "No records found") span every
     column via a single colspan <td>. In card mode they should read as a
     plain centered message, not a labeled key/value row. Override the
     generic card <td> (flex + data-label ::before) and the last-child
     actions treatment (flex-end + top border). */
  .custom-datatable--card-mobile tbody td[colspan] {
    display: block;
    text-align: center;
    border-top: none;
    margin-top: 0;
    padding-top: var(--space-3);
  }

  .custom-datatable--card-mobile tbody td[colspan]::before {
    content: none;
  }
}

@media (max-width: 480px) {
  .custom-datatable-toolbar__count {
    font-size: var(--type-size-xs);
  }
}


/* ================================================================
   Section 45: Navigation Bar (xFact Custom Component)
   ================================================================ */

/* xfact-mds.css already implements hamburger collapse at 767px and
   tablet padding at 1024px.
   Add 480px small-mobile refinements. */

/* ----------------------------------------------------------------
   Sub-menu tab bars (consent history "Sent / Received requests",
   account-management tabs).

   These render as <nav class="xf-nav"> with the list as a DIRECT
   child and have no server-rendered `.xf-nav__inner` wrapper or
   `.xf-nav__hamburger`. A small script in base.html enhances them at
   runtime - it adds the `xf-nav--sub` class, gives the list an id, and
   injects a hamburger toggle - so they collapse into a mobile dropdown
   instead of vanishing (the shared mobile rule hides `.xf-nav__list`
   expecting a hamburger that these bars did not have).

   The sub-menu lives inside the padded content column, not the
   full-width header, so the nav's negative-margin "bleed to viewport
   edge" must be reset for the panel to align to the nav.
   ---------------------------------------------------------------- */
@media (max-width: 767px) {
  .xf-nav--sub .xf-nav__list {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .xf-nav__inner {
    padding: 0 var(--space-3);
  }

  .xf-nav__hamburger {
    padding: var(--space-2) 0;
    font-size: var(--type-size-sm);
  }

  /* Mobile menu items: use base font */
  .xf-nav__link {
    font-size: var(--type-size-sm);
    padding: var(--space-3) var(--space-4);
  }
}


/* ================================================================
   Section 46: Page Layouts (xFact Custom Component)
   ================================================================ */

/* xfact-mds.css handles 767px (sidebar stacks) and 768–1024px
   (reduced sidebar).  Tighten padding on small mobile. */

@media (max-width: 480px) {
  .xf-layout {
    padding: var(--space-4) var(--space-3);
  }

  .xf-layout__sidebar {
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-3);
  }
}


/* ================================================================
   Section 47: Side Navigation (xFact Custom Component)
   ================================================================ */

/* xfact-mds.css handles 767px.  No additional overrides needed for
   the three required breakpoints. */


/* ================================================================
   Section 48: Site Header Sub-name (xFact Custom Component)
   ================================================================ */

@media (max-width: 480px) {
  .mds-site-header__subname {
    font-size: var(--type-size-xs);
    letter-spacing: 0.04em;
  }
}


/* ================================================================
   Section 49: Navigation Bar (MDS Core Component)
   ================================================================ */

/* xfact-mds.css implements the 767px hamburger collapse and the
   slide-in overlay panel. Tighten the gutter on small mobile so 56px
   rows keep their tap target while the label has room to wrap.

   No width / negative-margin bleed for .mds-nav__list here: the mobile
   panel is pinned to the viewport with left/right: 0, so it already
   spans the full width regardless of the bar's gutter. */

@media (max-width: 480px) {
  .mds-nav__inner {
    padding: 0 var(--space-3);
  }

  .mds-nav__hamburger {
    padding: var(--space-2) 0;
    font-size: var(--type-size-sm);
  }
}

/* No tablet (768–1024px) gutter override: .mds-site-header__inner keeps
   its var(--space-8) horizontal padding across that band, and the nav
   must stay aligned with the brand above it. */