/* DIYvar home page — valuation table, folder rows, intro card */

:root {
  --vrl-table-section-left-gutter: 0.875rem;
  --vrl-file-row-height: 1.9rem;
}

.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;
  }
}

/* ── Valuation card — shadow to lift off page background ── */
.card:has(> .card-header + .card-body .table-valuation) {
  box-shadow: var(--varial-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
  border-color: var(--varial-border, #E8E4D8);
}

.card:has(> .card-header + .card-body .table-valuation) > .card-header {
  padding-left: var(--vrl-table-section-left-gutter, 0.875rem);
  padding-right: var(--vrl-table-section-left-gutter, 0.875rem);
}

/* ── Table header — padding + sizing ── */
.table-valuation thead th {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--varial-gray-700, #44403C);
  padding: 0.375rem 0.75rem;
  background-color: var(--varial-gray-100, #F3F1EB);
  border-bottom: 2px solid var(--varial-border, #E8E4D8);
  white-space: nowrap;
}

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

/* ── Data rows ── */
.table-valuation tbody 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 {
  height: var(--vrl-file-row-height, 1.9rem);
}

/* ── Action button sizing ── */
.table-valuation td:last-child .btn-icon {
  width: 1.5rem;
  height: 1.5rem;
  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: 26%;
}
.list-workspace .table-valuation:not(.table-position) .col-actions {
  width: 10%;
}

/* ── 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%;
  }
}