/* DIYvar home page — valuation table, folder rows, intro card.
   Shared split-layout rules (.workspace-split*, .workspace-col-*,
   .workspace-snapshot-card, the combined-table shadow) live in
   components/workspace-split.css — the Prices landing page uses the same
   shapes. */

.var-hero-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-left: 1.5rem;
}

.btn-position-manager-cta {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 3.5rem;
  padding: 0.625rem 1rem;
  border: 2px solid var(--varial-primary, #1B3AA0);
  border-radius: 0.375rem;
  background: var(--varial-bg, #FAF8F2);
  color: var(--varial-primary, #1B3AA0);
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow:
    0 6px 0 0 rgba(27, 58, 160, 0.55),
    0 8px 12px 0 rgba(0, 0, 0, 0.2);
  transform: translateY(0);
  transition:
    box-shadow 0.08s ease,
    transform 0.08s ease,
    background-color 0.08s ease,
    border-color 0.08s ease,
    color 0.08s ease;
}

.btn-position-manager-cta:hover,
.btn-position-manager-cta:focus-visible {
  color: var(--varial-primary, #1B3AA0);
  border-color: var(--varial-primary, #1B3AA0);
  background: var(--varial-gray-100, #F3F1EB);
  box-shadow:
    0 6px 0 0 rgba(27, 58, 160, 0.55),
    0 10px 16px 0 rgba(0, 0, 0, 0.28);
  transform: translateY(-2px);
  text-decoration: none;
}

.btn-position-manager-cta:active {
  color: var(--varial-primary, #1B3AA0);
  border-color: var(--varial-primary, #1B3AA0);
  background: var(--varial-gray-200, #E8E4D8);
  box-shadow:
    0 2px 0 0 rgba(27, 58, 160, 0.55),
    0 3px 6px 0 rgba(0, 0, 0, 0.16);
  transform: translateY(4px);
}


/* ── Retro 3D "New Valuation" button — token-driven retro-green palette ── */
.btn-new-forecast {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--varial-bg, #FAF8F2);
  background: var(--varial-retro-green, #16A34A);
  border: none;
  border-radius: 0.375rem;
  padding: 0.75rem 1.5rem;
  box-shadow:
    0 6px 0 0 var(--varial-retro-green-shadow, #0D6B30),
    0 8px 12px 0 rgba(0, 0, 0, 0.25);
  transform: translateY(0);
  transition: box-shadow 0.08s ease, transform 0.08s ease, background 0.08s ease;
  cursor: pointer;
  white-space: nowrap;
}

@media (max-width: 991.98px) {
  .var-hero-actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}
.btn-new-forecast:hover {
  background: var(--varial-retro-green-hover, #15803D);
  color: var(--varial-bg, #FAF8F2);
  box-shadow:
    0 6px 0 0 var(--varial-retro-green-shadow, #0D6B30),
    0 10px 16px 0 rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}
.btn-new-forecast:active {
  background: var(--varial-retro-green-active, #14532D);
  color: var(--varial-bg, #FAF8F2);
  box-shadow:
    0 2px 0 0 var(--varial-retro-green-shadow, #0D6B30),
    0 3px 6px 0 rgba(0, 0, 0, 0.2);
  transform: translateY(4px);
}

/* ── Team / Personal tabs (same pattern as Spot) ── */
#team-tabs .nav-link {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--varial-gray-600, #57534E);
  border-color: transparent;
  padding: 0.4rem 1rem;
}
#team-tabs .nav-link:hover {
  color: var(--varial-primary, #1B3AA0);
  border-color: transparent;
  background: rgba(27, 58, 160, 0.05);
}
#team-tabs .nav-link.active {
  color: var(--varial-white, #fff);
  background-color: var(--varial-primary, #1B3AA0);
  border-color: var(--varial-primary, #1B3AA0);
  border-radius: 0.375rem 0.375rem 0 0;
}

/* ── Position Manager CTA ── */
.var-position-manager-cta {
  border-color: var(--varial-border, #E8E4D8);
  background:
    linear-gradient(
      135deg,
      var(--varial-gray-50, #FAFAF7) 0%,
      var(--varial-bg, #FAF8F2) 60%,
      var(--varial-gray-100, #F3F1EB) 100%
    );
  box-shadow: var(--varial-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
}

.var-position-manager-badge {
  color: var(--varial-primary, #1B3AA0);
  background-color: var(--varial-bg, #FAF8F2);
  border: 1px solid var(--varial-border, #E8E4D8);
}

.var-position-manager-kicker {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--varial-gray-600, #57534E);
}

.var-position-manager-copy {
  max-width: 42rem;
}

.var-position-manager-button {
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  .var-position-manager-button {
    width: 100%;
    justify-content: center;
  }
}

/* ── Table header — quiet label row, not a filled 90s banner (matches
   spot-home.css's .table-forecast treatment) — sized close to the row text
   (0.8125rem) rather than a big size drop; case/weight/colour carry the
   "this is a header" signal instead. ── */
.table-valuation thead th {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--varial-gray-500, #78716C);
  padding: 0.4rem 0.75rem;
  background-color: transparent;
  border-bottom: 1px solid var(--varial-border, #E8E4D8);
  white-space: nowrap;
}

/* Sort hover: darken on light background (matches spot-home.css's
   .table-forecast treatment — without this scoped override, the table falls
   back to the generic th.sortable:hover blue further down this file). */
.table-valuation thead th.sortable:hover {
  color: var(--varial-gray-800, #211F1C);
  cursor: pointer;
}

.table-valuation thead th .sort-icon {
  opacity: 0.45;
}

.table-valuation thead th.sortable:hover .sort-icon {
  opacity: 0.9;
}

.table-valuation thead th:first-child {
  padding-left: var(--vrl-table-section-left-gutter, 0.875rem);
}
.table-valuation thead th.col-name {
  padding-left: 0.5rem;
}

/* ── Data rows ──
   Also applies to tfoot (the demo/promoted rows, see _demo_rows.html) —
   without it those rows fall back to Bootstrap's default cell padding/height
   and their action icons read as a different size next to the tbody rows'. */
.table-valuation tbody td,
.table-valuation tfoot td {
  font-size: 0.8125rem;
  vertical-align: middle;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  line-height: 1.2;
}

.table-valuation tbody tr.draggable-valuation > td,
.table-valuation tfoot tr > td {
  height: var(--vrl-file-row-height, 1.75rem);
}

/* Keep RHS action controls on a consistent visual rail, with room to
   breathe off the card's right edge rather than hugging it flush. */
.table-valuation td:last-child {
  padding-right: var(--vrl-list-actions-right-gutter, 1rem);
}

.list-workspace .table-valuation:not(.table-position) thead th.col-actions {
  padding-right: var(--vrl-list-actions-right-gutter, 1rem);
}

/* ── Action button sizing — matches spot-home.css's .table-forecast
   treatment so the Prices and Valuations row icons read as the same size. ── */
.table-valuation td:last-child .btn-icon {
  width: calc(var(--varial-space-lg, 1.5rem) + var(--varial-space-xs, 0.25rem));
  height: calc(var(--varial-space-lg, 1.5rem) + var(--varial-space-xs, 0.25rem));
  padding: 0;
}
.table-valuation td:last-child .btn-icon i {
  font-size: 0.75rem;
}

/* ── Unavailable action — clearly muted ── */
.table-valuation .btn-icon.btn-outline-secondary.disable {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* ── Kebab (ellipsis) row-actions toggle ── */
.table-valuation .forecast-actions-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--varial-gray-600, #57534E);
  border-radius: 0.25rem;
  line-height: 1;
}
.table-valuation .forecast-actions-toggle:hover,
.table-valuation .forecast-actions-toggle:focus {
  color: var(--varial-primary, #1B3AA0);
  background-color: var(--varial-gray-100, #F3F1EB);
}
.table-valuation .forecast-actions-toggle i {
  font-size: 0.875rem;
}
.table-valuation .forecast-actions-menu .dropdown-menu {
  min-width: 13rem;
}

/* ── Truncation helper for created-by ── */
.table-valuation .cell-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}

/* Prevent action dropdown clipping inside responsive table wrappers on desktop. */
@media (min-width: 992px) {
  .table-responsive.table-actions-unclipped {
    overflow: visible;
  }
}

/* ── Drag handle (visible on row hover) ── */
.drag-handle {
  cursor: grab;
  color: var(--varial-gray-400, #A8A29E);
  opacity: 0;
  transition: opacity 0.15s ease;
}
tr:hover .drag-handle {
  opacity: 1;
}
.table-valuation .draggable-valuation {
  cursor: default;
}

/* ── Locked Varial Valuations rows — coming-soon muted appearance ── */
.table-valuation tr.vrl-row-locked td {
  opacity: 0.65;
}

/* ── Align columns across the stacked Valuations + Varial Valuations tables ──
   They are independent <table>s, so auto-layout sizes each one's columns to its
   own content — the Name search box widens the flat-list Name column and the
   headers drift out of line. A shared fixed layout (same col classes, same
   hidden-on-mobile columns) makes the two header rows line up at every width.
   Scoped away from the Positions table (.table-position). */
.list-workspace .table-valuation:not(.table-position) {
  table-layout: fixed;
}
.list-workspace .table-valuation:not(.table-position) .ws-star-cell {
  width: 2.5rem;
}
.list-workspace .table-valuation:not(.table-position) .col-name {
  width: 35%;
}
.list-workspace .table-valuation:not(.table-position) .col-status {
  width: 12%;
}
.list-workspace .table-valuation:not(.table-position) .col-created-by {
  width: 18%;
}
.list-workspace .table-valuation:not(.table-position) .col-created {
  width: 12%;
}
.list-workspace .table-valuation:not(.table-position) .col-actions {
  width: 12.5rem;
}

/* ── Hero actions: form must not break the flex row ── */
.page-hero-actions form {
  display: contents;
}

/* ── Sortable column headers ── */
th.sortable {
  cursor: pointer;
  user-select: none;
}
th.sortable:hover {
  color: var(--varial-primary, #1B3AA0);
}
.sort-icon {
  font-size: 0.5rem;
  color: var(--varial-gray-400, #A8A29E);
  vertical-align: middle;
}
th.sortable[aria-sort="ascending"] .sort-icon,
th.sortable[aria-sort="descending"] .sort-icon {
  color: var(--varial-primary, #1B3AA0);
}

/* ── Drop indicators for drag reorder ── */
tr.drop-above td {
  box-shadow: inset 0 2px 0 0 var(--varial-primary, #1B3AA0);
}
tr.drop-below td {
  box-shadow: inset 0 -2px 0 0 var(--varial-primary, #1B3AA0);
}

@media (max-width: 767.98px) {
  .table-valuation .cell-truncate {
    max-width: 100%;
  }
}

/* ── Feature valuation card (mirrors spot-home.css's .favourite-forecast-*) ── */
.feature-valuation-meta {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.feature-valuation-name {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--varial-gray-900, #1C1917);
  margin: 0 0 0.25rem;
}
.feature-valuation-sub {
  font-size: 0.8125rem;
  color: var(--varial-gray-500, #78716C);
  margin: 0 0 1rem;
}
.feature-valuation-preview {
  width: fit-content;
  margin: -0.5rem 0 0.75rem;
  padding: 0.2rem 0.4rem;
  border-radius: 0.2rem;
  background: var(--varial-gray-100, #F3F1EB);
  color: var(--varial-gray-600, #57534E);
  font-size: 0.6875rem;
  font-weight: 600;
}
.feature-valuation-open {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--varial-primary, #1B3AA0);
  text-decoration: none;
  margin-top: auto;
}
.feature-valuation-open:hover {
  text-decoration: underline;
}

/* The narrow column's own "Expected earnings" figure — compact, since it shares the column
   with the name/sub-line/link above and below it (unlike the wide column's KPI tiles,
   sized for empty space of their own). */
.feature-valuation-meta .feature-valuation-stat {
  margin: 0.25rem 0 1rem;
}
.feature-valuation-meta .feature-valuation-stat-value {
  font-size: 1.5rem;
}

.feature-valuation-stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--varial-gray-500, #78716C);
  margin-bottom: 0.35rem;
}
.feature-valuation-stat-value {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--varial-gray-900, #1C1917);
}
.feature-valuation-range,
.feature-valuation-price-basis {
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--varial-gray-600, #57534E);
}
.feature-valuation-range {
  margin-top: 0.35rem;
}
.feature-valuation-price-basis {
  margin: 0 0 1rem;
}
.feature-valuation-price-basis span {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--varial-gray-500, #78716C);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* The feature graphic is an interval comparison, not a miniature version of the full risk
   diagnostic. Its small key establishes the three marks before the eye reaches the rows. */
.feature-valuation-chart-frame {
  height: 100%;
  min-height: 220px;
  display: flex;
  flex-direction: column;
}
.feature-valuation-chart-key {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  min-height: 1.25rem;
  padding: 0 0.25rem;
  color: var(--varial-gray-500, #78716C);
  font-size: 0.6875rem;
  font-weight: 600;
}
.feature-valuation-chart-key--chart {
  /* Keep the legend in the reserved card-height allowance. The base key's
     wrapping flex row remains usable on narrow cards without consuming a row
     of vertical space for every scenario. */
  display: flex;
  gap: 0.35rem 0.75rem;
  margin: 0;
  padding: 0;
}
.feature-valuation-chart-key span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.feature-valuation-chart-key i {
  display: inline-block;
  width: 1.25rem;
  border-radius: 999px;
  background: var(--varial-primary, #1B3AA0);
}
.feature-valuation-key-range { height: 0.5rem; opacity: 0.35; }
.feature-valuation-key-core { height: 0.25rem; opacity: 0.78; }
.feature-valuation-key-expected {
  width: 0.55rem !important;
  height: 0.55rem;
  border-radius: 0 !important;
  transform: rotate(45deg);
}
.feature-valuation-key-scenario {
  width: 0.15rem !important;
  height: 0.9rem;
  border-radius: 0 !important;
}
.feature-valuation-key-scenario[data-scenario-index="0"] { background: var(--chart-scenario-2, #F59E0B); }
.feature-valuation-key-scenario[data-scenario-index="1"] { background: var(--chart-scenario-3, #16A34A); }
.feature-valuation-key-scenario[data-scenario-index="2"] { background: var(--chart-scenario-4, #FF4D6D); }
.feature-valuation-key-scenario[data-scenario-index="3"] { background: var(--chart-scenario-5, #9333EA); }
.feature-valuation-key-scenario[data-scenario-index="4"] { background: var(--chart-scenario-6, #0284C7); }
.feature-valuation-key-scenario[data-scenario-index="5"] { background: var(--chart-scenario-7, #F97316); }
.feature-valuation-key-scenario[data-scenario-index="6"] { background: var(--chart-scenario-1, #2563EB); }
.feature-valuation-chart-heading {
  padding: 0 0.25rem 0.4rem;
}
.feature-valuation-chart-heading h3 {
  margin: 0;
  color: var(--varial-gray-800, #292524);
  font-size: 0.8125rem;
  font-weight: 700;
}
.feature-valuation-chart-heading p {
  margin: 0.15rem 0 0;
  color: var(--varial-gray-500, #78716C);
  font-size: 0.6875rem;
}

/* Uses the remaining card height below the key. A min-height keeps the intervals legible on a
   short viewport, while flex avoids a fixed graphic height inside a resizable workspace row. */
.feature-valuation-chart {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}
.feature-valuation-coming-soon {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  padding: 1rem;
}
.feature-valuation-coming-soon p {
  margin: 0;
  color: var(--varial-gray-500, #78716C);
  font-size: 0.875rem;
}

/* Keep every asset on its own horizontal row. For a large book this card grows with the
   chart and the normal page scroll takes over, instead of transposing labels into a cramped
   x-axis or trapping another internal scrollbar in the workspace. */
.workspace-split:has(.feature-valuation-card) {
  height: auto;
  min-height: calc(100vh - 5rem);
}
/* Preserve the Value-it/list workspace's original half-viewport allocation. Only the feature
   card beneath it is allowed to add height, so an expanded chart extends the page downward
   instead of pulling the top workspace up to its natural-content height. */
.workspace-split:has(.feature-valuation-card) > .workspace-split-row:first-child {
  flex: 0 0 calc(50vh - 4rem - 0.5px);
}
.feature-valuation-card {
  /* The feature card owns the lower half of the workspace at minimum, but its
     content must set the flex base size. A fixed half-viewport basis lets the
     card body outgrow its parent and spill into the page footer. */
  flex: 1 0 auto;
  min-height: calc(50vh - 4rem - 0.5px);
}
.feature-valuation-card .card-body {
  /* Keep the baseline graphic height proportional to the position count; the
     card itself expands from its row's content when a column needs more room. */
  min-height: max(23rem, calc(var(--feature-valuation-rows, 0) * 2rem + 9rem));
}
/* The shared snapshot workspace allows its row to shrink so tables can scroll.
   A feature valuation has no internal scroller: its complete chart, legend and
   metadata must determine the card height. Restore the row's content minimum
   so the card expands around it (the template no longer forces a percentage
   height on this row). */
.feature-valuation-card .card-body > .row {
  min-height: auto;
}
.feature-valuation-card .workspace-col-narrow,
.feature-valuation-card .workspace-col-wide {
  height: auto;
}
.feature-valuation-chart-frame {
  /* Fill the available lower card for ordinary books, but reserve 2rem for
     each plotted row when the book is larger than that viewport allocation. */
  min-height: max(20rem, calc(var(--feature-valuation-rows, 0) * 2rem + 3rem));
}
.feature-valuation-chart {
  flex: 1 0 auto;
  min-height: calc(var(--feature-valuation-rows, 0) * 2rem + 1rem);
}

@media (max-width: 991.98px) {
  .workspace-split:has(.feature-valuation-card) > .workspace-split-row:first-child {
    flex: 0 0 auto;
  }
}

@media (max-width: 767.98px) {
  .feature-valuation-stat-value {
    font-size: 1.75rem;
  }
}