/* ============================================================
   SHELL — SHAPE LIST
   ============================================================

   .shell--list marks a page whose main content is a scrollable
   table/list that must fit exactly one viewport below the sticky
   chrome. Body scrolls internally; window does not (or scrolls
   only a tiny amount to reveal the footer below the fold).

   Applied to `.workspace-content` via `_list_page.html.twig` or
   direct class on `.scrollable-table-container` ancestor.
   ============================================================ */

/* List-shape containers flex-fill the remaining space below the sticky
   chrome. Using flex (instead of the old position:sticky + fixed height)
   sizes the container to EXACTLY what's available — which means the
   container never overflows its ancestors, and body.scrollHeight stays
   equal to main-wrapper.height + footer.height (no "phantom scroll" past
   the sticky range of the wrapper). Ancestors must form an unbroken
   flex-column chain so flex:1 cascades down to the container. */
body > .main-wrapper:has(.shell--list),
body > .main-wrapper:has(.scrollable-table-container--page-primary),
.l-wrapper .main-wrapper:has(.shell--list),
.l-wrapper .main-wrapper:has(.scrollable-table-container--page-primary) {
  display: flex !important;
  flex-direction: column !important;
}

body > .main-wrapper:has(.shell--list) > .workspace-content,
body > .main-wrapper:has(.shell--list) > .workspace-content > .workspace-form-panel,
body > .main-wrapper:has(.shell--list) > .workspace-content > .workspace-form-panel > .workspace-form-panel__body,
body > .main-wrapper:has(.scrollable-table-container--page-primary) > .workspace-content,
body > .main-wrapper:has(.scrollable-table-container--page-primary) > .workspace-content > .workspace-form-panel,
body > .main-wrapper:has(.scrollable-table-container--page-primary) > .workspace-content > .workspace-form-panel > .workspace-form-panel__body,
.l-wrapper .main-wrapper:has(.shell--list) > .workspace-content,
.l-wrapper .main-wrapper:has(.shell--list) > .workspace-content > .workspace-form-panel,
.l-wrapper .main-wrapper:has(.shell--list) > .workspace-content > .workspace-form-panel > .workspace-form-panel__body,
.l-wrapper .main-wrapper:has(.scrollable-table-container--page-primary) > .workspace-content,
.l-wrapper .main-wrapper:has(.scrollable-table-container--page-primary) > .workspace-content > .workspace-form-panel,
.l-wrapper .main-wrapper:has(.scrollable-table-container--page-primary) > .workspace-content > .workspace-form-panel > .workspace-form-panel__body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
}

/* Direct children of workspace-form-panel__body stay at natural height
   (add form, empty state, static text). Only the wrapper that actually
   contains a page-primary table flex-grows to fill remaining space. */
.workspace-form-panel__body:has(.scrollable-table-container--page-primary) > * {
  flex: 0 0 auto;
  min-height: 0;
}

.workspace-form-panel__body:has(.scrollable-table-container--page-primary) > .scrollable-table-container--page-primary,
.workspace-form-panel__body:has(.scrollable-table-container--page-primary) > *:has(> .scrollable-table-container--page-primary) {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Some public/cabinet list pages render the page-root `.list-page.shell--list`
   directly under `.workspace-content` instead of inside a workspace-form-panel.
   Those routes still need the same flex-column clamp so the table shell can
   size to the viewport and keep pagination pinned. */
.workspace-content > .list-page.shell--list,
.workspace-content > [class*="col-"] > .list-page.shell--list,
.workspace-content > .row > [class*="col-"] > .list-page.shell--list,
.workspace-content > [class*="col-"] > .vkr > .list-page.shell--list,
.workspace-form-panel__body > .list-page.shell--list,
.workspace-content-page:has(.list-page.shell--list),
.workspace-content-page__body > .list-page.shell--list {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

@media (min-width: 1181px) {
  .main-wrapper[data-shell-shape="list"] .list-page.shell--list,
  .workspace-content.shell--list .list-page.shell--list,
  .wrapAdminContent.shell--list .list-page.shell--list,
  .main-wrapper[data-shell-shape="list"] > .workspace-content > *:has(.list-page.shell--list),
  .main-wrapper[data-shell-shape="list"] > .wrapAdminContent > *:has(.list-page.shell--list),
  .workspace-content.shell--list > *:has(.list-page.shell--list),
  .wrapAdminContent.shell--list > *:has(.list-page.shell--list),
  .main-wrapper[data-shell-shape="list"] > .workspace-content > *:has(.scrollable-table-container--page-primary),
  .main-wrapper[data-shell-shape="list"] > .wrapAdminContent > *:has(.scrollable-table-container--page-primary),
  .workspace-content.shell--list > *:has(.scrollable-table-container--page-primary),
  .wrapAdminContent.shell--list > *:has(.scrollable-table-container--page-primary) {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
}

.workspace-content > [class*="col-"]:has(> .list-page.shell--list),
.workspace-content > [class*="col-"]:has(> .vkr > .list-page.shell--list),
.workspace-content > [class*="col-"] > .vkr:has(> .list-page.shell--list),
.workspace-content > .row > [class*="col-"]:has(> .list-page.shell--list),
.workspace-form-panel__body > [class*="col-"]:has(> .list-page.shell--list),
.workspace-content-page:has(.list-page.shell--list) > .workspace-content-page__body {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.shell--list.scrollable-table-container,
.shell--list .scrollable-table-container,
.scrollable-table-container--page-primary,
.list-page.shell--list > .scrollable-table-container,
.list-page > .scrollable-table-container,
.workspace-form-panel__body > .list-page > .scrollable-table-container,
.workspace-content-page__body > .list-page > .scrollable-table-container {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
  background: var(--ed-white) !important;
}

/* Fallback chrome-height var — still used by any leftover rules that
   want the sum of top-chrome + panel header for vertical math. */
.workspace-form-panel__body {
  --shell-chrome-h: calc(var(--shell-top-h) + var(--ed-panel-header-h, 63px));
}

/* Inline tables (nested within detail/tab content) keep natural flow. */
.scrollable-table-container--inline {
  height: auto !important;
  max-height: none !important;
  display: block !important;
}

/* Toolbar stays in normal flow so page-level scrolling can move it away. */
.scrollable-table-container:not(.scrollable-table-container--inline) > .scrollable-table-toolbar {
  position: static !important;
  top: auto !important;
  z-index: 19 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(10px) !important;
  flex-shrink: 0 !important;
  border-bottom: none !important;
}

/* Hide toolbar when it has no meaningful content */
.scrollable-table-toolbar:not(:has(.toolbar-row)):not(:has(.list-inline-form-shell)) {
  display: none !important;
}

/* Body scrolls internally only for list-shape (viewport-pinned) containers. */
.shell--list.scrollable-table-container > .scrollable-table-body,
.shell--list .scrollable-table-container > .scrollable-table-body,
.scrollable-table-container--page-primary > .scrollable-table-body,
.list-page.shell--list > .scrollable-table-container > .scrollable-table-body,
.list-page > .scrollable-table-container > .scrollable-table-body,
.workspace-form-panel__body > .list-page > .scrollable-table-container > .scrollable-table-body,
.workspace-content-page__body > .list-page > .scrollable-table-container > .scrollable-table-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  background: var(--ed-white) !important;
  scrollbar-gutter: stable;
  scrollbar-color: rgba(17, 24, 39, 0.35) rgba(17, 24, 39, 0.08);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch !important;
}

/* Short result sets: the table stays at its natural height. Empty space
   below the last row is part of the scrollable-table-body and already
   inherits its white background (rule above) — no row stretching, no
   grey band. */
.scrollable-table-container:not(.scrollable-table-container--inline) > .scrollable-table-body > table {
  width: 100%;
  border-collapse: collapse;
  background: var(--ed-white);
  vertical-align: top;
}

/* Sticky thead inside body */
.scrollable-table-thead {
  position: sticky !important;
  top: 0 !important;
  background: var(--ed-bg, #f9fafb) !important;
  z-index: 5 !important;
}

/* Footer (pagination) — flex-shrink so it stays visible */
.scrollable-table-container:not(.scrollable-table-container--inline) > .scrollable-table-footer {
  flex-shrink: 0 !important;
  background: var(--ed-white, #fff) !important;
  border-top: 1px solid var(--ed-border, #e5e7eb) !important;
}