/* ============================================================
   Aportize - IR sobre ações e FIIs
   Carregar depois de chrome.css, calculator.css e ledger.css.
   Requer <main class="wrap calculator-page ledger-page st-page">.

   Só o que é específico desta página mora aqui: a linha de mês
   com três compartimentos, as duas tabelas e o rateio do
   prejuízo. Todo o resto vem de ledger.css.
   ============================================================ */

/* ---------- Linha de mês ---------- */

/* A linha do livro-razão de cripto é uma grade de campos soltos.
   Aqui ela tem três blocos empilhados, então vira flex e as áreas
   herdadas ficam inertes. */
.st-page .st-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  padding-bottom: 20px;
}

.st-page .st-row__head {
  display: flex;
  align-items: end;
  gap: 10px;
}

.st-page .st-row__head .field--month { flex: 1 1 0; min-width: 0; }
.st-page .st-row__head .field--year { flex: 0 1 110px; min-width: 0; }

.st-page .st-row__head .remove-button {
  flex: none;
  align-self: center;
  margin-left: auto;
}

/* ---------- Os três compartimentos ---------- */

.st-page .st-buckets {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.st-page .st-bucket {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--surface);
}

.st-page .st-bucket__legend {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  float: none;          /* legend dentro de grid: evita o float herdado */
  width: 100%;
  margin: 0 0 2px;
  padding: 0;
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* A alíquota fica ao lado do nome, sem virar outra linha de texto. */
.st-page .st-bucket__rate {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0;
}

.st-page .field-label__hint {
  color: var(--muted);
  font-size: 0.75rem;
  opacity: 0.8;
}

.st-page .st-row__withholding {
  max-width: 260px;
}

/* ---------- Tabelas ---------- */

.st-page .st-label--darf {
  display: block;
  margin-top: 32px;
}

.st-page .st-cell--bucket {
  color: var(--text-secondary);
  white-space: nowrap;
}

.st-page .st-cell--note {
  color: var(--muted);
  font-size: 0.8125rem;
}

/* ---------- Prejuízo por compartimento ---------- */

/* O total do resumo não diz onde o prejuízo está preso, e essa é a
   informação que decide a próxima venda. */
.st-page .st-loss-split {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  list-style: none;
}

.st-page .st-loss-split li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  color: var(--muted);
  font-size: 0.875rem;
}

.st-page .st-loss-split strong {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.st-page .st-pending {
  max-width: 68ch;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.6;
}

/* ---------- Tablet e desktop ---------- */

@media (min-width: 640px) {
  .st-page .st-buckets {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .st-page .st-row__head .field--month { flex: 0 1 200px; }
}