/*
 * AICS Desktop Resize + Route Style Safety v1 — 25 Aug 2026
 * Presentation only. No controller/model/data/permission/database changes.
 *
 * Rule:
 * - Desktop/laptop (fine pointer) keeps directory table mode when the browser is
 *   narrowed; the table becomes horizontally scrollable instead of switching to
 *   duplicate mobile-card markup.
 * - Touch/coarse-pointer devices retain the existing mobile-card behaviour.
 * - Route-aware layout loading guarantees extracted page CSS is present before
 *   these final overrides are evaluated.
 */

/* Desktop/laptop resized narrow: dual-render directories stay in table mode. */
@media (hover: hover) and (pointer: fine) {
  .aics-ui-v2 .aics-directory .aics-directory-mobile-list,
  #participantListSection .participant-mobile-list,
  #staffListSection .staff-mobile-list {
    display: none !important;
  }

  .aics-ui-v2 .aics-directory .aics-directory-table-wrap,
  #participantListSection .participant-list-wrap,
  #staffListSection .staff-table-scroll {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
  }

  /* Preserve readable desktop columns and let the wrapper own horizontal scroll. */
  #participantListSection .compact-participant-table {
    width: 100% !important;
    min-width: 1055px !important;
    display: table !important;
  }

  #staffListSection .staff-table,
  #staffListSection table.staff-table,
  #staffListSection .staff-table-scroll > table {
    min-width: 1640px !important;
  }
}

/* True touch/mobile devices continue to use the existing mobile cards. */
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
  #participantListSection .participant-list-wrap,
  #staffListSection .staff-table-scroll {
    display: none !important;
  }

  #participantListSection .participant-mobile-list,
  #staffListSection .staff-mobile-list {
    display: grid !important;
  }
}

/* Keyboard/focus users can see which horizontal region owns scrolling. */
.aics-ui-v2 .aics-directory-table-wrap:focus-visible,
#participantListSection .participant-list-wrap:focus-visible,
#staffListSection .staff-table-scroll:focus-visible {
  outline: 3px solid rgba(106, 40, 117, .24);
  outline-offset: 2px;
}