/* v2 styles: portfolio (owner W2-PORT). Port of prototype product/portfolio.css, scoped under .dp-v2. */

/* Search heading and input as the prototype's #portfolio: 20px regular h5, 250px transparent input */
.dp-v2 .portfolio-page .dp-search-heading {
  margin-bottom: 1.25rem;
  font-size: 20px;
  font-weight: 400;
  color: var(--dp-fg);
}

/* The input takes a quarter of the search form, as the prototype's 25% column. */
.dp-v2 .portfolio-page .dp-search-heading + div form > .flex-shrink-1 {
  width: 25%;
}

.dp-v2 .portfolio-page .dp-search-heading + div input[type='search'] {
  width: 100%;
  background-color: transparent;
  border-radius: var(--dp-radius);
}

.dp-v2 .portfolio-page .dp-search-heading + div form .btn-light {
  padding-left: 24px;
  padding-right: 24px;
}

/* Tabs: underline style comes from .nav-underline; keep full-width tabs readable */
.dp-v2 .portfolio-page .nav-underline .nav-link {
  color: var(--dp-muted-fg);
  background: transparent;
}

.dp-v2 .portfolio-page .nav-underline .nav-link.active {
  color: var(--dp-accent-fg);
  font-weight: 600;
}

/* Table: the shared list look, .dp-table-list in tables.css. */

/* Year chips and the "+" add chip */
.dp-v2 .portfolio-page .year-add-btn {
  min-width: 24px;
  height: 24px;
  padding: 0 0.4rem;
  font-size: 0.75rem;
}

/* DataTables chrome rendered by the portfolio table */
.dp-v2 .portfolio-dt-chrome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  color: var(--dp-muted-fg);
}

.dp-v2 .portfolio-dt-chrome label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
}

.dp-v2 .portfolio-dt-chrome select,
.dp-v2 .portfolio-dt-chrome input[type='search'] {
  height: 32px;
  border: 1px solid var(--dp-input-border);
  border-radius: var(--dp-radius-ctl);
  padding: 0 0.5rem;
  background: var(--dp-card);
}

.dp-v2 .portfolio-dt-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--dp-muted-fg);
}

.dp-v2 .portfolio-dt-foot .paginate_button {
  display: inline-block;
  min-width: 2rem;
  padding: 0.25rem 0.55rem;
  margin-left: 0.15rem;
  border: 1px solid var(--dp-border);
  background: var(--dp-card);
  color: var(--dp-accent-fg);
  border-radius: var(--dp-radius-ctl);
  cursor: pointer;
}

.dp-v2 .portfolio-dt-foot .paginate_button.current {
  background: var(--dp-muted);
  border-color: var(--dp-muted);
  color: var(--dp-fg);
  font-weight: 600;
}

.dp-v2 .portfolio-dt-foot .paginate_button.disabled {
  opacity: 0.45;
  cursor: default;
}

/* Add / edit investee and create disclosure forms */
/* Add investee and Create disclosure forms, as the prototype's #portfolio/add and
   create-disclosure page: back link and title on the page, the form alone in a card,
   both at Bootstrap's .container width. */
/* Bootstrap's .container width cap (1320px) stays, centred, as in the prototype. */
.dp-v2 .portfolio-form {
  margin-top: 24px !important;
  padding: 24px !important;
  /* no page panel: the v1 .container is white with an 8px radius (static/css/styles.css) */
  background: transparent;
  border-radius: 0;
}

.dp-v2 .portfolio-form > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  margin-bottom: 16px !important;
  font-size: 14px;
  font-weight: 500;
  color: var(--dp-fg);
}

.dp-v2 .portfolio-form > h3 {
  margin: 16px 0 24px !important;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--dp-fg);
}

.dp-v2 .portfolio-form-card {
  padding: 20px 24px;
  background: var(--dp-card);
  border: 1px solid var(--dp-border);
  border-radius: 10px;
}

/* One 16px rhythm between fields and headings; a .row keeps its own gutter
   (its -16px top margin and the columns' 16px cancel out). */
.dp-v2 .portfolio-form-card > form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dp-v2 .portfolio-form-card > form > :not(.row) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.dp-v2 .portfolio-form-card > form > .d-flex:last-child {
  padding-top: 8px;
}

.dp-v2 .portfolio-form-card .form-label {
  margin-bottom: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--dp-fg);
}

.dp-v2 .portfolio-form-card .form-control,
.dp-v2 .portfolio-form-card .form-select:not(.ts-wrapper) {
  height: 38px;
  padding: 6px 16px;
  font-size: 16px;
  line-height: 24px;
  background-color: transparent;
  border-radius: var(--dp-radius);
}

.dp-v2 .portfolio-form-card input[type='file'].form-control {
  padding: 0 16px 0 0;
  line-height: 36px;
}

.dp-v2 .portfolio-form-card h5 {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--dp-fg);
}

.dp-v2 .portfolio-form-card .btn {
  padding-left: 24px;
  padding-right: 24px;
}

/* ── Round 3 (D1): Portfolio as the prototype ─────────────────────────── */

/* Three KPI cards in a row, Total / Active / Invited (Lite beta round 2,
   answer 4), 40px under the subtitle (the margin collapses with the header's).
   Each card is the prototype's `#portfolio` KPI card: a third of the row (its
   col-md-4 in a g-3 row), value above the label, 22px x 24.4px inside, 20px
   value; full width below 768px. */
.dp-v2 .portfolio-page .portfolio-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}

.dp-v2 .portfolio-page .portfolio-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: calc((100% - 2rem) / 3);
  padding: 22px 24.4px;
  background: var(--dp-card);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius);
}

@media (max-width: 767.98px) {
  .dp-v2 .portfolio-page .portfolio-kpi {
    width: 100%;
  }
}

.dp-v2 .portfolio-page .portfolio-kpi__value {
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  color: var(--dp-fg);
}

/* The prototype's `#portfolio` KPI label: upper-case 11px, 0.04em
   tracking, in the text colour (round 4, 7b). */
.dp-v2 .portfolio-page .portfolio-kpi__label {
  font-size: 11px;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dp-fg);
}

/* Search row: the button sits at the right end. */
.dp-v2 .portfolio-page .dp-search-heading + div > .btn {
  flex-shrink: 0;
  margin-left: auto;
}

/* The page has its own search row: hide DataTables' "Show N entries" and
   "Search:" (CSS only, scoped to this page's table wrapper). */
.dp-v2 .portfolio-page .dataTables_wrapper .dataTables_length,
.dp-v2 .portfolio-page .dataTables_wrapper .dataTables_filter {
  display: none;
}

/* Status (Lite beta column): same chip shape as the year chips. */
.dp-v2 .portfolio-page .dp-table .badge.dp-status {
  font-size: 0.75rem;
  font-weight: 500;
}

/* Year chips keep the status signal of the old markup (round 4, R3-7), in
   the new palette: completed = teal tint, started = the amber of the
   Disclosures "In progress" year chip (disclosures.css, .dp-status-progress),
   any other state = muted grey. The state is `dp-year-chip-<entry.state>`,
   the same three states the flag-off classes are chosen from. The transparent
   border keeps every chip the size of the bordered amber one. */
.dp-v2 .portfolio-page .badge.dp-year-chip {
  --year-chip-bg: var(--dp-muted);
  --year-chip-fg: var(--dp-muted-fg);
  --year-chip-border: transparent;
  min-width: 2.75rem;
  background: var(--year-chip-bg);
  color: var(--year-chip-fg);
  border: 1px solid var(--year-chip-border);
  font-size: 0.75rem;
  font-weight: 500;
}

.dp-v2 .portfolio-page .badge.dp-year-chip-completed {
  --year-chip-bg: var(--dp-accent);
  --year-chip-fg: var(--dp-accent-fg);
}

.dp-v2 .portfolio-page .badge.dp-year-chip-started {
  --year-chip-bg: var(--dp-warning-bg);
  --year-chip-fg: var(--dp-warning-fg);
  --year-chip-border: var(--dp-warning-border);
}

.dp-v2 .portfolio-page a:hover .badge.dp-year-chip {
  background: color-mix(in srgb, var(--year-chip-bg) 70%, var(--year-chip-fg) 30%);
}

/* The 24px square "+" chip, should a "+" appear in a year cell. */
.dp-v2 .portfolio-page .year-add-btn {
  width: 24px;
  min-width: 24px;
  height: 24px;
  padding: 0;
  border-radius: var(--dp-radius-ctl);
  background: var(--dp-accent);
  color: var(--dp-accent-fg);
  border: 0;
}

/* Actions: the shared 28px outline icon buttons (.btn-outline-secondary.btn-icon.btn-sm), black as the prototype. */
.dp-v2 .portfolio-page .dp-table td > * + * {
  margin-left: .25rem;
}

/* Add investee form: section headings stay dark (E1). */
.dp-v2 .portfolio-form h5.text-primary,
.dp-v2 .portfolio-form h5.text-muted {
  color: var(--dp-fg) !important;
}

/* Selects (Tom Select) at the inputs' 38px / 16px. */
.dp-v2 .portfolio-form-card .ts-wrapper.single .ts-control {
  min-height: 38px;
  padding: 6px 16px;
  font-size: 16px;
  line-height: 24px;
  border-radius: var(--dp-radius);
  background-color: transparent;
}

/* ── dph-21 Funds layer ───────────────────────────────────────────────── */

/* Investee Management "Funds" column: one outlined chip per Fund, as the
   prototype's `.fc`; "No fund" muted. */
.dp-v2 .portfolio-page .badge.dp-fund-chip {
  background: transparent;
  color: var(--dp-accent-fg);
  border: 1px solid var(--dp-accent-fg);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.dp-v2 .portfolio-page .badge.dp-fund-chip-none {
  color: var(--dp-muted-fg);
  border-color: var(--dp-border);
}

/* Investee form "Funds" field: name, then the two optional years, per row. */
.dp-v2 .portfolio-form-card .investee-funds__name {
  min-width: 10rem;
}

.dp-v2 .portfolio-form-card .investee-funds__year.form-control {
  height: 32px;
  padding: 4px 10px;
  font-size: 14px;
}

.dp-v2 .portfolio-form-card .badge.investee-funds__optional {
  background: var(--dp-muted);
  color: var(--dp-muted-fg);
  border-radius: 999px;
  font-weight: 500;
}

/* Fund form investee list: the other Funds sit at the right, muted. */
.dp-v2 .portfolio-form-card .fund-members__item:last-child {
  border-bottom: 0 !important;
}