/* Ajustes de interface da tela de Investimentos (issue #64).

   Fica em arquivo proprio de proposito: o main.css e compartilhado por todas
   as paginas e qualquer mexida la reverbera em Financas/Moto. Aqui so vive o
   que e especifico desta tela. Todas as cores saem de tokens do DESIGN.md
   (--primary, --error, --muted, --border, --surface) — nenhum valor cru novo.

   Carregado depois do main.css, entao especificidade igual ja vence. */

/* ---------------------------------------------------------------------------
   1. Acoes em icone (lapis / lixeira)

   Antes as tabelas tinham botoes de texto "Editar"/"Excluir" que empurravam a
   largura da coluna e desalinhavam a linha. Agora sao alvos quadrados de
   tamanho fixo: a coluna "Acoes" para de variar de largura conforme o rotulo.
--------------------------------------------------------------------------- */
.inv-acoes {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
}

.btn-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  border-radius: 8px;
  cursor: pointer;
  line-height: 0;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-icone svg {
  width: 16px;
  height: 16px;
  display: block;
  /* currentColor mantem o icone coerente com o estado do botao (hover, dark,
     danger) sem precisar de uma variante de arquivo por tema. */
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.btn-icone:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--primary-strong);
}

.btn-icone:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.btn-icone:disabled {
  opacity: 0.55;
  cursor: progress;
}

.btn-icone.danger {
  color: var(--error);
  background: color-mix(in srgb, var(--error) 10%, transparent);
  border-color: color-mix(in srgb, var(--error) 34%, transparent);
}

.btn-icone.danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--error) 20%, transparent);
}

/* No tema escuro a cor de erro pura some no fundo da linha; a mesma correcao
   que o main.css ja aplica ao .btn-acao. */
:root[data-theme='dark'] .btn-icone.danger,
:root[data-bs-theme='dark'] .btn-icone.danger {
  color: #ff8a7a;
  border-color: color-mix(in srgb, var(--error) 55%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .btn-icone.danger {
    color: #ff8a7a;
    border-color: color-mix(in srgb, var(--error) 55%, transparent);
  }
}

/* Alvo confortavel em tela de toque, igual ao .btn-acao. */
@media (pointer: coarse) {
  .btn-icone { width: 40px; height: 40px; }
  .btn-icone svg { width: 18px; height: 18px; }
}

/* A coluna de acoes nao deve quebrar nem esticar: largura minima para caber
   os icones e nada mais. */
.inv-col-acoes { width: 1%; white-space: nowrap; text-align: right; }

/* ---------------------------------------------------------------------------
   2. Lista de corretoras — o "Editar" desalinhado

   O .stat-list usa space-between: com dois botoes soltos direto no <li>, o
   flex distribuia o espaco entre nome, Editar e Excluir e cada linha ficava
   com o Editar num ponto diferente. Envolvendo as acoes num .inv-acoes elas
   viram UM item flex, ancorado a direita e centralizado verticalmente com o
   texto.
--------------------------------------------------------------------------- */
.inv-lista-corretoras li {
  gap: 0.75rem;
  min-height: 44px;
}

.inv-lista-corretoras .inv-corretora-nome {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex: 1 1 auto;
  min-width: 0;
}

.inv-lista-corretoras .inv-corretora-nome > strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inv-lista-corretoras .inv-acoes { flex: 0 0 auto; }

/* ---------------------------------------------------------------------------
   3. Formulario de Ativos

   Era um .row (flexbox) com cinco campos de larguras diferentes que quebravam
   em qualquer largura de tela, deixando o botao "Adicionar" orfao no meio da
   segunda linha. Vira grid explicito: campos em colunas iguais e a acao
   sempre no fim, alinhada a base.
--------------------------------------------------------------------------- */
/* Este form vive dentro de uma coluna do .grid-2, entao a largura util e ~metade
   da tela. `auto-fit` decidia o numero de colunas pelo container mas os ajustes
   por @media olham o VIEWPORT — os dois discordavam e sobrava campo esticado no
   fim da linha. Duas colunas fixas resolvem: Ticker|Nome, Classe|Moeda,
   Cotacao|Adicionar. Cada linha fecha certinho. */
.inv-form-ativo {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  margin-bottom: 1.25rem;
}

.inv-form-ativo .field-actions .btn-primary { width: 100%; }

/* Uma coluna no celular: dois campos lado a lado em 360px viram dois campos
   ilegiveis. */
@media (max-width: 560px) {
  .inv-form-ativo { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   4. Posicoes legiveis

   A tabela de posicoes empilha numero em cima de numero. Duas correcoes:
   tabular-nums para os digitos alinharem em coluna, e um sub-rotulo discreto
   que diz o que cada numero e quando a tabela rola horizontal e o cabecalho
   sai de vista.
--------------------------------------------------------------------------- */
.inv-posicoes .num,
.inv-operacoes .num,
.inv-ativos .num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.inv-posicoes .inv-ticker { display: block; font-weight: 700; }
.inv-posicoes .inv-sub,
.inv-ativos .inv-sub {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.1rem;
}

/* Resultado: valor e percentual em linhas separadas, para o percentual nao
   colar no valor e virar uma sopa de digitos. */
.inv-posicoes .inv-resultado-valor { display: block; font-weight: 600; }
.inv-posicoes .inv-resultado-pct { display: block; font-size: 0.8rem; opacity: 0.85; }

/* Zebra leve: em tabela larga com rolagem horizontal, a linha e o principal
   guia de leitura. */
.inv-posicoes tbody tr:nth-child(even),
.inv-operacoes tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--border) 22%, transparent);
}

/* Etiqueta do tipo de operacao no historico. */
.inv-side {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid var(--border);
  color: var(--muted);
  white-space: nowrap;
}
.inv-side-compra {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 34%, transparent);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.inv-side-venda {
  color: var(--error);
  border-color: color-mix(in srgb, var(--error) 34%, transparent);
  background: color-mix(in srgb, var(--error) 8%, transparent);
}
:root[data-theme='dark'] .inv-side-venda,
:root[data-bs-theme='dark'] .inv-side-venda { color: #ff8a7a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .inv-side-venda { color: #ff8a7a; }
}

/* ---------------------------------------------------------------------------
   5. Paginacao do historico

   O historico carregava 100 operacoes de uma vez numa tabela sem fim. Agora
   sao 25 por pagina, com contador e "Carregar mais".
--------------------------------------------------------------------------- */
.inv-paginacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.inv-paginacao[hidden] { display: none; }

.inv-paginacao .inv-contador {
  font-size: 0.85rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .inv-paginacao { justify-content: center; }
  .inv-paginacao .btn-outline { width: 100%; }
}