/* ==========================================================================
   Investments — the sheet of the artefact whose key is `investment`.

   One sheet for the whole screen, in the order it draws it: the head and the note of the phase, the actions above the
   list, the eight figures, the sentence of the origins, the filter, the table, the confirmation of a deletion and the
   duplicate check.

   **Every class here is one this screen renders.** Nothing of a shared piece is re-declared: `layout.css` owns the page
   head, `forms.css` owns the fields and the buttons, `dialogs.css` owns the dialog host and its frame, `definitions.css`
   owns the definition field and its inline translation, and `feedback.css` owns the alert, the loading indicator, the
   empty state and the notifications. The artefact template §0.9 fixes the other half of that rule: a missing style is
   added to the sheet that already owns the pattern — this one — and never to a new sheet and never as a static inline
   style.

   The cascade order is fixed in `index.html`, where this sheet is linked after the shared ones.
   ========================================================================== */

/* ---- The page (InvestmentPage.razor) ----
   El marco de la pagina —la leyenda y su contenido a 2 px— no se declara aqui: es el de los catorce artefactos y vive
   en `layout.css`. */

/* The anchor the screen's own page objects address the heading by. It carries no rule of its own — the head is drawn by
   `layout.css` whatever a screen passes here — and it is declared because the gate reads the class the markup draws. */
.investment-page__title {
  margin: 0;
}

/* Why the write controls are absent, when the reason is the phase. */
.investment-page__note {
  max-width: 90ch;
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-primary-soft);
  border: var(--border-width) solid var(--color-primary-border);
  border-radius: var(--radius-sm);
  color: var(--color-primary-strong);
  font-size: var(--font-size-sm);
}

.investment-page__recovery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

/* `DEC-090` point 3: the action that adds a row lives above the list. */
.investment-page__list-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

/* Responsive collection presentation. The table remains available for comparison; cards are the readable default. */
.investment-cards {
  /* The row of four is the shared pattern of the Cards view: .collection-cards. */
  outline: none;
}

/* The buttons of the card, in the last line of it: the row is the one every card wears, and the taxable mark is a
   reading a writer may change, so it shares that line and is pushed to the opposite end of it (DEC-045). */
.investment-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.investment-card__taxable {
  margin-right: auto;
}

/* The amount is the figure the row is about, so it closes the line of the head from the other end. */
.investment-card__total {
  margin-left: auto;
  color: var(--color-text);
  font-size: var(--font-size-lg);
}

/* The description keeps the clamp this artefact needs — the control under it opens it whole — and takes the size of
   the text of a card like every other one, instead of a step of its own. */
.investment-card__description {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.investment-card__description--expanded {
  display: block;
  overflow: visible;
}

.investment-card__details {
  align-self: flex-start;
  min-height: 40px;
  padding: 0 var(--space-xs);
  color: var(--color-primary);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  font: inherit;
  cursor: pointer;
}

.investment-card__details:hover,
.investment-card__details:focus-visible {
  background: var(--color-primary-soft);
}

.investment-card__taxable {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  gap: var(--space-2xs);
  color: var(--color-text);
}

@media (max-width: 47.99rem) {
  .investment-card__details,
  .investment-card__taxable {
    min-height: 44px;
  }

  .investment-card__actions {
    width: 100%;
  }
}

/* The eight figures of the active screen's own row of cards. They are records and not controls: four of them are
   buttons there, and none is here, because a filter by a category code is a value of a list no route publishes. */
.investment-page__figures {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.investment-figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-2xs) var(--space-sm);
  background: var(--color-primary-soft);
  border: var(--border-width) solid var(--color-primary-border);
  border-radius: var(--radius-sm);
  color: var(--color-primary-strong);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.investment-figure__label {
  color: var(--color-text-muted);
}

.investment-figure__value {
  font-weight: var(--font-weight-semibold);
}

/* The names of the origins could not be read, or only some of them could: the rows are drawn with the word the server
   stored in them, and the loss is said instead of hidden. */
.investment-page__origins {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.investment-page__origins-note {
  max-width: 90ch;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* The filter: the shared row of chips and the sentence that says what it is. The row wraps by itself, so the container
   no longer caps its width — that cap was the width of the dropdown this screen used to draw (`DEC-067`, `DEC-071`) —
   and the sentence keeps the measure the other notes of a screen have. */
.investment-page__filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

/* The sentence that says what the filter is: a control of this screen over the list that arrived whole. */
.investment-page__filter-note {
  max-width: 90ch;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.investment-page__summary {
  margin: 0;
  color: var(--color-text-muted);
}

/* **The summary of the list, above the cards and the table**, which the owner asked for on 2026-09-27 with the active
   screen as the model («mirar app vieja… ese resumen lo ponemos arriba de la tabla/cards»): the eight figures the server
   computes, as tiles that wrap, each one a label and its amount. It is a description list because that is what it is —
   names and values — and the amounts use the tabular figures of the design system so the columns line up. */
.investment-page__figures {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  margin: 0 0 var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface-muted);
  border: var(--border-default);
  border-radius: var(--radius-sm);
}

.investment-figure {
  min-width: 0;
}

.investment-figure__label {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.investment-figure__value {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-semibold);
}

/* The foot of the table is the server's own total of the whole list, and this sentence says so: the figure does not move
   with the filter, which only narrows what is drawn. */
.investment-page__total-note {
  max-width: 90ch;
  margin: var(--space-2xs) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ---- The table: the one view of the list (InvestmentTable.razor) ---- */
.investment-table__wrapper {
  overflow-x: auto;
}

.investment-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
}

.investment-table__caption {
  padding: var(--space-xs) 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-align: left;
}

.investment-table th,
.investment-table td {
  padding: var(--space-xs) var(--space-sm);
  border-bottom: var(--border-default);
  text-align: left;
  vertical-align: top;
}

.investment-table thead th {
  background: var(--color-surface-muted);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

/* The two factors and the amounts are read as numbers: right-aligned and in the tabular figures of the design system. */
.investment-table__number {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* What the row is, and under it the origin it came from. The nature left this cell on 2026-09-27 — the owner sent it to
   its own column («eso debe ir en la columna») — so the cell holds the text and one fact and nothing else. */
.investment-table__description {
  min-width: 0;
  overflow-wrap: anywhere;
}

.investment-table__origin,
.investment-table__nature {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* The nature is a value of the row, so its column is as narrow as its two words and never breaks them. */
.investment-table__col-nature {
  width: 90px;
}

.investment-table__nature {
  white-space: nowrap;
}

/* **The code of the row**, which is the first column: the letter of its category and the consecutive the server
   gave it (`M-7`). It is read as a code, so it is drawn in the mono face the other listings use for theirs. */
.investment-table__col-ref {
  width: 90px;
}

.investment-table__ref {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.investment-table__category,
.investment-table__status {
  white-space: nowrap;
}

.investment-table__unit {
  white-space: nowrap;
}


.investment-table__taxable {
  text-align: center;
}

.investment-table__actions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: var(--space-2xs);
}

.investment-table__row:hover {
  background: var(--color-surface-muted);
}

/* The foot carries the server's total of the whole list, which is not the sum of the rows above it. */
.investment-table__foot {
  background: var(--color-surface-muted);
}

.investment-table__foot-label {
  text-align: right;
}


/* ---- The confirmation of a deletion (DeleteInvestmentDialog.razor) ---- */
.investment-delete__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin: 0 0 var(--space-sm);
}

.investment-delete__total {
  font-weight: var(--font-weight-semibold);
}

/* What the deletion is and what it is not: the row is deleted logically and the artefact item it came from keeps
   existing (BR-305). */
.investment-delete__cascade {
  max-width: 90ch;
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface-muted);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ---- The duplicate check of the server (InvestmentDuplicates.razor) ---- */
.investment-duplicates {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--color-surface);
  border: var(--border-default);
  border-radius: var(--radius-lg);
}

.investment-duplicates__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
}

.investment-duplicates__title {
  margin: 0;
  font-size: var(--font-size-lg);
}

.investment-duplicates__note {
  max-width: 90ch;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* An answer the server could not read is not «the list is clean»: it is drawn as its own state. */
.investment-duplicates__unreadable {
  max-width: 90ch;
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-accent-soft);
  border: var(--border-width) solid var(--color-accent-border);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
  font-size: var(--font-size-sm);
}

.investment-duplicates__pairs {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.investment-duplicates__pair {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface-muted);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
}

.investment-duplicates__what {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin: 0;
  overflow-wrap: anywhere;
}

.investment-duplicates__and {
  color: var(--color-text-muted);
}

.investment-duplicates__why {
  max-width: 90ch;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.investment-duplicates__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.investment-duplicates__clean {
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-success-soft);
  border: var(--border-width) solid var(--color-success-border);
  border-radius: var(--radius-sm);
  color: var(--color-secondary-strong);
  font-size: var(--font-size-sm);
}