/* Workspace split layout — shared by the Prices (Spot) and Valuations (VAR)
   landing pages: an intro/CTA card (narrow) beside a combined list-workspace
   table (wide), a divider, then a "feature" snapshot card below in the same
   narrow/wide shape. Extracted out of spot-home.css once VAR needed the same
   shape (css-layer-collision-ratchet — one definition, not two). */

:root {
  --vrl-table-section-left-gutter: 0.875rem;
}

/* ── Vertical split — the CTA/table row and the feature-snapshot row each
   take half the available screen height, rather than the page growing tall
   with the table's natural size. Table rows fill and scroll inside their own
   half instead of pushing it taller. Height target is the container's
   content box minus its own top/bottom padding (2 x py-3) and the footer's
   box — measured empirically (not derivable from tokens alone, since the
   footer's height isn't one), so re-check with devtools if the footer or
   container padding ever change. ── */
.workspace-split {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: calc(100vh - 5rem);
}
.workspace-split-row {
  flex: 1 1 0;
  min-height: 0;
}
.workspace-split-divider {
  flex: 0 0 auto;
  width: 100%;
  margin: 0;
  border: none;
  border-top: 1px solid var(--varial-border, #E8E4D8);
}
.workspace-split-row .card {
  flex: 1 1 auto;
  min-height: 0;
}
.workspace-split-row .workspace-table-mount {
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* Unwraps the shared list-workspace shell's own spacing box (list_base.html's
   `.list-section.mb-4`) rather than fighting its !important margin utility —
   with no box of its own, .card.list-workspace becomes the direct flex child
   and fills the mount exactly, matching the CTA card's height. */
.workspace-split-row .workspace-table-mount .list-section {
  display: contents;
}
.workspace-split-row .workspace-table-mount .card.list-workspace {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.workspace-split-row .workspace-table-mount .card-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.workspace-split-row .workspace-table-mount .table-responsive {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Feature-snapshot card (Spot's Feature forecast, VAR's Feature valuation) —
   same flex-fill treatment as the table above: header stays natural height,
   the body (and the row/columns inside it) fill everything below it. */
.workspace-snapshot-card {
  display: flex;
  flex-direction: column;
  box-shadow: var(--varial-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
  border-color: var(--varial-border, #E8E4D8);
}
.workspace-snapshot-card .card-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.workspace-snapshot-card .card-body > .row,
.workspace-snapshot-card .card-body > .tab-content {
  flex: 1 1 auto;
  min-height: 0;
}

/* 1/5 + 4/5 columns — Bootstrap's 12-col grid has no native fifths. Explicit
   height:100% (not just align-items:stretch on the row) because the wide
   column's own child sizes itself with height:100% too
   (.workspace-table-mount below) — stretch alone doesn't reliably give a flex
   item a *definite* height for a percentage-height descendant to resolve
   against, so the column sizes to its content before stretch applies and the
   table below never gets capped: the row grows to fit every item instead of
   scrolling internally. min-height:0 clears the browser's content-based
   automatic minimum so the explicit height can actually shrink the column. */
.workspace-col-narrow {
  flex: 0 0 20%;
  max-width: 20%;
  min-height: 0;
  height: 100%;
}
.workspace-col-wide {
  flex: 0 0 80%;
  max-width: 80%;
  min-height: 0;
  height: 100%;
}

/* ── Combined list-workspace card — shadow to lift off the page background,
   and align the card-header's padding with the table's own gutter. Keys off
   the card-header itself (not a product-specific table class), so it applies
   to any product's combined table. ── */
.card.list-workspace:has(> .card-header) {
  box-shadow: var(--varial-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
  border-color: var(--varial-border, #E8E4D8);
}
.workspace-split {
  /* One shared right rail for the create CTA, Actions heading, and the
     rightmost row button in the paired Price-it / Value-it workspaces. */
  --vrl-list-actions-right-gutter: 1rem;
}
.card.list-workspace:has(> .card-header) > .card-header {
  padding-left: var(--vrl-table-section-left-gutter, 0.875rem);
  padding-right: var(--vrl-list-actions-right-gutter, 1rem);
}
.workspace-snapshot-card > .card-header {
  padding-left: var(--vrl-table-section-left-gutter, 0.875rem);
  padding-right: var(--vrl-table-section-left-gutter, 0.875rem);
}

@media (max-width: 991.98px) {
  .workspace-split {
    height: auto;
  }
  .workspace-split-row {
    flex: 0 0 auto;
  }
  .workspace-col-narrow,
  .workspace-col-wide {
    flex: 0 0 100%;
    max-width: 100%;
  }
}