/* Workspace sizing is owned here, after the visual/component styles.
   Frames use remaining space; content scrolls; controls never shrink.
   Compact windows use document scrolling instead of clipping fixed panels. */
@media screen {
  main > .page.active { overflow-y: auto !important; }

  main > .page.active > .panel,
  main > .page.active > .commerce-layout-panel,
  main .report-view-panel,
  main .page#settings-section-audit > .panel,
  main .page#settings-section-staff > .staff-panel {
    overflow-y: auto !important;
  }

  main :is(.panel, .setting-card, .commerce-orders-panel) > :is(
    .toolbar, .panel-title, .product-toolbar, .product-brand-tabs,
    .commerce-toolbar, .commerce-order-tabs, .commerce-summary,
    .audit-filterbar, .document-toolbar-simple, .document-more-filters
  ) { flex-shrink: 0; }

  main :is(.pagination, .gift-card-pagination) {
    flex: 0 0 auto;
    height: auto;
    min-height: 38px;
    flex-wrap: wrap;
    white-space: nowrap;
    overflow: visible;
    margin-bottom: 0;
  }
  main :is(.pagination, .gift-card-pagination) > * { flex-shrink: 0; }

  /* A dashboard contains several independent panels, so the page scrolls. */
  main > #dashboard.active { display: block !important; }
  main #dashboard :is(.dashboard-overview, .today-panel) { position: static; }

  /* Grid rows must fit their cards instead of shrinking and hiding rows. */
  main #inbound .inventory-board-grid {
    grid-auto-rows: max-content;
    align-items: start;
    align-content: start;
    padding-bottom: 2px;
  }
  main #inbound .inventory-board-group {
    height: auto;
    min-height: max-content;
    overflow: visible;
  }

  main > #commerce-layout.active { padding-bottom: 2px !important; }
  main .page#commerce-layout > .commerce-layout-panel {
    padding: 0 !important;
    margin: 0;
  }
  main .page#commerce-layout .commerce-layout-workspace {
    display: flex;
    height: auto !important;
    min-height: 0;
    flex: 1 1 0;
    flex-direction: column;
    align-items: stretch;
    overflow: visible;
  }
  main .page#commerce-layout .commerce-layout-inline-editor {
    width: 100%;
    height: auto;
    min-height: 0;
    flex: 1 1 0;
    overflow: auto;
  }
  main .page#commerce-layout .commerce-layout-inline-editor > .scroll-tabs {
    position: relative;
    flex: 0 0 auto;
  }
  main .page#commerce-layout .commerce-layout-editor-body {
    display: flex !important;
    flex-direction: column;
    height: auto !important;
    min-height: 0;
    flex: 1 1 0;
    overflow: auto !important;
    padding: 16px 20px;
  }
  main .page#commerce-layout .commerce-layout-editor-body > .layout-dialog-panel.active {
    width: 100%;
    min-height: 0;
    height: auto;
    flex: 0 0 auto;
  }

  /* Product and gift-card workspaces pass remaining height to one list. */
  main .page#commerce-layout .layout-dialog-panel:is([data-layout-panel="products"], [data-layout-panel="materials"]).active {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
  }
  main .page#commerce-layout .layout-product-manager-top,
  main .page#commerce-layout .gift-card-workspace-tabs { flex: 0 0 auto; }
  main .page#commerce-layout .layout-product-picker {
    height: auto !important;
    min-height: 120px !important;
    max-height: none !important;
    flex: 1 1 0;
    overflow: auto;
    grid-auto-rows: max-content;
    align-content: start;
    padding: 0 2px 2px;
    scrollbar-gutter: stable;
  }
  main .page#commerce-layout .layout-product-group {
    height: auto;
    min-height: max-content;
    overflow: visible;
  }
  main .page#commerce-layout .gift-card-workspace-panel.active {
    min-height: 0;
    height: auto;
    flex: 1 1 0;
    overflow: auto;
  }
  main .page#commerce-layout .gift-card-workspace-panel[data-gift-card-workspace-panel="accounts"] > .layout-gift-card-management,
  main .page#commerce-layout .gift-card-settings-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
  }
  main .page#commerce-layout .gift-card-management-table {
    height: auto !important;
    min-height: 120px !important;
    max-height: none !important;
    flex: 1 1 0;
    overflow: auto;
  }
  main .page#commerce-layout .gift-card-filterbar { flex-wrap: wrap; }

  /* Settings tabs and their cards share the available height, not vh offsets. */
  main .page#settings > .settings-section.active:has(> .settings-card-tabs) {
    display: flex;
    flex-direction: column;
    overflow: auto;
  }
  main .page#settings :is(.settings-inline-tabs, .settings-card-tabs, .settings-section-head) { flex: 0 0 auto; }
  main .page#settings > .settings-section.active > .settings-grid:has(> .settings-card-panel) {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 0;
  }
  main .page#settings .settings-grid > .settings-card-panel:not([hidden]) {
    display: flex;
    flex-direction: column;
    min-height: 0 !important;
    height: auto !important;
    flex: 1 1 0;
    overflow: auto;
  }
  main .page#settings .settings-card-panel :is(.setting-list, .table-wrap) {
    min-height: 100px;
    max-height: none !important;
    flex: 1 1 0;
    overflow: auto;
  }
  main .page#settings :is(.audit-table, .staff-panel > .paged-table) { min-height: 100px !important; }
  main .report-view-panel > .panel-title { flex: 0 0 auto; }
  main .report-view-panel > .table-wrap { min-height: 100px !important; }
}

/* Short/zoomed and narrow windows need one reachable document bottom.
   Preserve horizontal table scrolling, but remove nested vertical limits. */
@media screen and (max-height: 650px), screen and (max-width: 1100px) {
  html, body { height: auto; min-height: 100%; overflow: auto; }
  main { display: block; height: auto; min-height: 100dvh; overflow: visible; }
  main > .page.active {
    display: block !important;
    height: auto !important;
    min-height: calc(100dvh - 36px) !important;
    max-height: none !important;
    overflow: visible !important;
  }
  main > .page.active > :is(.panel, .commerce-layout-panel),
  main :is(.report-view-panels, .report-view-panel, .commerce-tab-panel),
  main .page#settings > .settings-section.active,
  main .page#settings .settings-section > .panel,
  main .page#settings .settings-card-panel:not([hidden]),
  main .page#commerce-layout :is(.commerce-layout-workspace, .commerce-layout-inline-editor, .commerce-layout-editor-body),
  main .page#commerce-layout .layout-dialog-panel.active,
  main .page#commerce-layout .gift-card-workspace-panel.active,
  main .page#commerce-layout :is(.layout-gift-card-management, .gift-card-settings-card),
  main :is(#outbound-form, .outbound-workspace-grid, .outbound-info-column, .outbound-items-column) {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
  }
  main .page.active :is(.table-wrap, .paged-table, .setting-list, .inventory-board-grid, .layout-product-picker, #outbound-items) {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
  }
  main .page#commerce-layout .layout-product-picker { overflow: visible; }
  main .page#commerce-layout .commerce-layout-extra-settings:empty { display: none; }
  main .page#settings > .settings-section.active > .settings-grid { flex: 0 0 auto; }
  .sidebar { max-height: 100dvh; overflow-y: auto; }
  .sidebar nav, .sidebar .menu-order-controls { flex-shrink: 0; }
}