/*
 * AICS Global Scroll Standard v1 — 25 Aug 2026
 * Presentation only. No workflow, data, permission, route or database changes.
 *
 * Permanent rule:
 * - Browser/page vertical scrolling remains native at the side.
 * - When authenticated content genuinely exceeds the available width, horizontal
 *   scrolling is available at the bottom instead of clipping or crushing content.
 * - Standard table/wide-data wrappers always scroll horizontally when required.
 * - Future wide components should use .aics-scroll-x / .aics-scroll-both or the
 *   established .table-wrap convention rather than custom overflow rules.
 */

html {
  overflow-y: auto;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  max-width: none !important;
  overflow-x: auto !important;
  overflow-y: visible;
}

/* Undo historic authenticated-shell clipping. */
.app-shell {
  min-width: 100%;
}

.app-shell > .main {
  min-width: 0;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.app-shell > .main > .content {
  min-width: 0;
  max-width: none !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

/*
 * Common wide-data containers. This catches current AICS wrappers without
 * requiring page-by-page CSS. It does not force a width: scrollbars appear only
 * when the contained content actually exceeds the available width.
 */
.content :where(
  .table-wrap,
  .table-responsive,
  .responsive-table,
  .aics-table-shell,
  .aics-data-table-wrap,
  .aics-directory-table-wrap,
  .aics-report-table-wrap,
  .ac-scroll,
  .page-links,
  .aics-scroll-x,
  .aics-scroll-both,
  [data-aics-scroll-x],
  [data-aics-scroll-both],
  [class*="table-wrap"],
  [class*="table-scroll"]
) {
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: visible;
  scroll-behavior: smooth;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

/* Utility classes for future modules. */
.aics-scroll-x,
[data-aics-scroll-x] {
  overflow-x: auto !important;
  overflow-y: visible;
}

.aics-scroll-y,
[data-aics-scroll-y] {
  overflow-y: auto !important;
  overflow-x: visible;
}

.aics-scroll-both,
[data-aics-scroll-both] {
  overflow: auto !important;
}

/* Keep data tables readable; wrappers own horizontal overflow. */
.content :where(
  .table-wrap,
  .table-responsive,
  .responsive-table,
  .aics-table-shell,
  .aics-data-table-wrap,
  .aics-directory-table-wrap,
  .aics-report-table-wrap,
  .ac-scroll,
  [class*="table-wrap"],
  [class*="table-scroll"]
) > table {
  max-width: none;
}

/*
 * If a legacy card contains an unwrapped direct table, allow that card to become
 * the horizontal scroll owner instead of silently clipping the table.
 */
@supports selector(:has(*)) {
  .content :where(.card, .panel, .section-card):has(> table) {
    overflow-x: auto !important;
    overflow-y: visible !important;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
  }
}

/* AICS scrollbar treatment — visible but unobtrusive on Windows/Chrome/Edge. */
html,
.app-shell > .main,
.content :where(
  .table-wrap,
  .table-responsive,
  .responsive-table,
  .aics-table-shell,
  .aics-data-table-wrap,
  .aics-directory-table-wrap,
  .aics-report-table-wrap,
  .ac-scroll,
  .page-links,
  .aics-scroll-x,
  .aics-scroll-y,
  .aics-scroll-both,
  [data-aics-scroll-x],
  [data-aics-scroll-y],
  [data-aics-scroll-both],
  [class*="table-wrap"],
  [class*="table-scroll"]
) {
  scrollbar-color: #8e5698 #f4edf6;
  scrollbar-width: auto;
}

.app-shell > .main::-webkit-scrollbar,
.content :where(
  .table-wrap,
  .table-responsive,
  .responsive-table,
  .aics-table-shell,
  .aics-data-table-wrap,
  .aics-directory-table-wrap,
  .aics-report-table-wrap,
  .ac-scroll,
  .page-links,
  .aics-scroll-x,
  .aics-scroll-y,
  .aics-scroll-both,
  [data-aics-scroll-x],
  [data-aics-scroll-y],
  [data-aics-scroll-both],
  [class*="table-wrap"],
  [class*="table-scroll"]
)::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.app-shell > .main::-webkit-scrollbar-track,
.content :where(
  .table-wrap,
  .table-responsive,
  .responsive-table,
  .aics-table-shell,
  .aics-data-table-wrap,
  .aics-directory-table-wrap,
  .aics-report-table-wrap,
  .ac-scroll,
  .page-links,
  .aics-scroll-x,
  .aics-scroll-y,
  .aics-scroll-both,
  [data-aics-scroll-x],
  [data-aics-scroll-y],
  [data-aics-scroll-both],
  [class*="table-wrap"],
  [class*="table-scroll"]
)::-webkit-scrollbar-track {
  background: #f4edf6;
  border-radius: 999px;
}

.app-shell > .main::-webkit-scrollbar-thumb,
.content :where(
  .table-wrap,
  .table-responsive,
  .responsive-table,
  .aics-table-shell,
  .aics-data-table-wrap,
  .aics-directory-table-wrap,
  .aics-report-table-wrap,
  .ac-scroll,
  .page-links,
  .aics-scroll-x,
  .aics-scroll-y,
  .aics-scroll-both,
  [data-aics-scroll-x],
  [data-aics-scroll-y],
  [data-aics-scroll-both],
  [class*="table-wrap"],
  [class*="table-scroll"]
)::-webkit-scrollbar-thumb {
  background: #8e5698;
  border: 3px solid #f4edf6;
  border-radius: 999px;
}

.app-shell > .main::-webkit-scrollbar-thumb:hover,
.content :where(
  .table-wrap,
  .table-responsive,
  .responsive-table,
  .aics-table-shell,
  .aics-data-table-wrap,
  .aics-directory-table-wrap,
  .aics-report-table-wrap,
  .ac-scroll,
  .page-links,
  .aics-scroll-x,
  .aics-scroll-y,
  .aics-scroll-both,
  [data-aics-scroll-x],
  [data-aics-scroll-y],
  [data-aics-scroll-both],
  [class*="table-wrap"],
  [class*="table-scroll"]
)::-webkit-scrollbar-thumb:hover {
  background: #6a2875;
}

/* Touch devices may auto-hide native scrollbars; scrolling remains enabled. */
@media (hover: none) and (pointer: coarse) {
  .app-shell > .main,
  .content :where(
    .table-wrap,
    .table-responsive,
    .responsive-table,
    .aics-table-shell,
    .aics-data-table-wrap,
    .aics-directory-table-wrap,
    .aics-report-table-wrap,
    .ac-scroll,
    .page-links,
    .aics-scroll-x,
    .aics-scroll-both,
    [data-aics-scroll-x],
    [data-aics-scroll-both],
    [class*="table-wrap"],
    [class*="table-scroll"]
  ) {
    -webkit-overflow-scrolling: touch;
  }
}

@media (prefers-reduced-motion: reduce) {
  html,
  .app-shell > .main,
  .content :where(.aics-scroll-x, .aics-scroll-y, .aics-scroll-both, [class*="table-wrap"], [class*="table-scroll"]) {
    scroll-behavior: auto;
  }
}