/* TraderMap — componentes base (Documento 09, secao 5).
   Depende de tokens.css. Vocabulario de classes: tm-{componente}[-variante]. */

/* 5.1 — Botoes */
.tm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--radius-control);
    border: 1px solid transparent;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.tm-btn--block {
    display: flex;
    width: 100%;
}

.tm-btn--primary {
    background: var(--color-accent);
    color: #fff;
}

.tm-btn--primary:hover {
    background: var(--color-accent-hover);
}

.tm-btn--secondary {
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-text);
}

.tm-btn--secondary:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.tm-btn--danger {
    background: var(--color-negative);
    color: #fff;
}

.tm-btn--danger:hover {
    filter: brightness(0.92);
}

.tm-btn--text {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    padding: 4px 0;
    text-decoration: underline;
    font-size: 13px;
}

.tm-btn--text:hover {
    color: var(--color-accent);
}

/* 5.2 — Cards. Ajuste visual pos-passo-14 (pedido do usuario): borda sutil
   como limite principal do card, sem a sombra generica de antes (que
   competia visualmente com o resto da pagina) — --shadow-elevated
   continua existindo pra elemento flutuante de verdade (.tm-notif-panel,
   .tm-mais-panel, etc, que precisam de profundidade por nao estarem no
   fluxo normal da pagina). */
.tm-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--space-3);
}

/* Card de KPI (Dashboard, Relatorios) com icone identificador no canto —
   mesmo padrao visual de referencia levantado na modernizacao do visual
   (tela de login pedida pelo usuario). O icone e so decorativo (repete a
   ideia do label ao lado); .tm-stat-card-icon aceita qualquer variante de
   cor de --color-accent/positive/etc via style inline no caso a caso. */
.tm-stat-card {
    position: relative;
    padding-right: 60px;
}

.tm-stat-card-icon {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent-tag-bg);
    color: var(--color-accent);
}

.tm-stat-card-icon .tm-icon svg {
    width: 18px;
    height: 18px;
}

/* Variantes de cor do icone do KPI, para nao deixar todo card na mesma
   cor de accent (visual identificado como "monocromatico" pelo usuario na
   modernizacao do visual) — reaproveita os mesmos tokens semanticos que ja
   existem para badge (positive/negative/warning), agora tambem de forma
   decorativa. */
.tm-stat-card-icon--positive {
    background: color-mix(in srgb, var(--color-positive) 15%, transparent);
    color: var(--color-positive);
}

.tm-stat-card-icon--negative {
    background: color-mix(in srgb, var(--color-negative) 15%, transparent);
    color: var(--color-negative);
}

.tm-stat-card-icon--warning {
    background: color-mix(in srgb, var(--color-warning) 15%, transparent);
    color: var(--color-warning);
}

.tm-stat-card-icon--critical {
    background: color-mix(in srgb, var(--color-critical) 15%, transparent);
    color: var(--color-critical);
}

.tm-stat-card-icon--neutral {
    background: color-mix(in srgb, var(--color-neutral-info) 15%, transparent);
    color: var(--color-neutral-info);
}

.tm-stat-card-icon--accent {
    background: var(--color-accent-tag-bg);
    color: var(--color-accent);
}

.tm-stat-card-icon--teal {
    background: color-mix(in srgb, var(--color-teal) 15%, transparent);
    color: var(--color-teal);
}

.tm-stat-card-icon--roxo {
    background: color-mix(in srgb, var(--color-roxo) 15%, transparent);
    color: var(--color-roxo);
}

/* Dourado da marca — pedido do usuario: icone-chave de destaque (ex: taxa
   de acerto), mesmo padrao das variantes categoricas acima. */
.tm-stat-card-icon--gold {
    background: color-mix(in srgb, var(--color-gold) 18%, transparent);
    color: var(--color-gold);
}

/* Card de KPI "v2" — usado no Dashboard (pedido do usuario: visual "parecendo
   view interna", com uma imagem de referencia de dashboard SaaS mais
   elegante). Diferenca do .tm-stat-card mais antigo (icone absoluto no canto,
   sobrepondo o texto): aqui o icone fica numa linha propria, ao lado do
   rotulo — sem sobreposicao, sem precisar do padding-right compensatorio.
   Mantido como classe nova (nao uma reescrita do .tm-stat-card) porque
   .tm-stat-card-icon tambem e reaproveitado "solto" (position:static via
   style inline) em .tm-form-header de varias telas de cadastro — mudar o
   comportamento base quebraria esses usos. */
.tm-kpi-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tm-kpi-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tm-kpi-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--color-accent-tag-bg);
    color: var(--color-accent);
}

.tm-kpi-card__icon .tm-icon svg {
    width: 16px;
    height: 16px;
}

.tm-kpi-card__icon--positive { background: color-mix(in srgb, var(--color-positive) 15%, transparent); color: var(--color-positive); }
.tm-kpi-card__icon--negative { background: color-mix(in srgb, var(--color-negative) 15%, transparent); color: var(--color-negative); }
.tm-kpi-card__icon--warning { background: color-mix(in srgb, var(--color-warning) 15%, transparent); color: var(--color-warning); }
/* Categoricas (Documento 09 nao tinha isso — pedido do usuario, direcao
   "A — sinalizacao por categoria"): accent/teal/roxo sao decorativas, sem
   ligacao com bom/ruim, diferente das 3 semanticas acima. */
.tm-kpi-card__icon--accent { background: var(--color-accent-tag-bg); color: var(--color-accent); }
.tm-kpi-card__icon--teal { background: color-mix(in srgb, var(--color-teal) 15%, transparent); color: var(--color-teal); }
.tm-kpi-card__icon--roxo { background: color-mix(in srgb, var(--color-roxo) 15%, transparent); color: var(--color-roxo); }
/* Dourado da marca — pedido do usuario: icone-chave de destaque (ex: taxa
   de acerto), mesmo padrao das variantes categoricas acima. */
.tm-kpi-card__icon--gold { background: color-mix(in srgb, var(--color-gold) 18%, transparent); color: var(--color-gold); }

.tm-kpi-card__label {
    font-size: 13px;
    color: var(--color-text-secondary);
}

/* Cabecalho de secao dentro de um .tm-card (titulo + legenda opcional a
   direita) — formaliza o "h3 com margin-top:0 + texto secundario logo
   abaixo" que se repetia via style="" em cada bloco do Dashboard (mesmo
   criterio ja usado pro .tm-page-subtitle no passo 13). */
.tm-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.tm-section-header h3 {
    margin: 0;
}

.tm-section-header__hint {
    margin: 2px 0 0;
}

.tm-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

/* Painel recuado dentro de um .tm-card (Documento 09 nao previa isso —
   introduzido pra substituir um card aninhado dentro de outro card, que
   duplicava borda+sombra e ficava visualmente carregado). Usa
   --color-bg-subtle (ver tokens.css). */
.tm-subcard {
    background: var(--color-bg-subtle);
    border-radius: var(--radius-control);
    padding: var(--space-2);
}

/* Pedido do usuario: "Mapa do Pregão" e "Impacto por Mercado" do Panorama
   de Mercado (rotulo + valor por tile) — grade de .tm-subcard (mesmo
   painel recuado acima, dentro do tm-card do relatorio), NAO .tm-kpi-grid/
   .tm-kpi-card (esse par e' pra card de TOPO de pagina, com sombra/borda
   propria; aninhado dentro de outro .tm-card duplicaria a moldura, o
   mesmo problema que o comentario acima ja registra). Reaproveita
   .tm-kpi-card__label pro rotulo pequeno de cada tile. */
.tm-kv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-2);
}

.tm-kv-grid .tm-subcard {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Pedido do usuario: "melhor e pior horário" e "maiores altas/baixas" do
   Dashboard pareciam um único card grande com os dados alinhados nos
   cantos, não dois cards separados — .tm-mini-card da esse limite visual
   (fundo levemente tingido + borda na cor do sinal), reaproveitavel nos
   dois lugares em vez de duas soluções pontuais. */
.tm-mini-card {
    border-radius: var(--radius-control);
    padding: var(--space-2);
    background: var(--color-bg-subtle);
    border: 1px solid transparent;
}

.tm-mini-card--positive {
    background: color-mix(in srgb, var(--color-positive) 8%, var(--color-bg-subtle));
    border-color: color-mix(in srgb, var(--color-positive) 30%, transparent);
}

.tm-mini-card--negative {
    background: color-mix(in srgb, var(--color-negative) 8%, var(--color-bg-subtle));
    border-color: color-mix(in srgb, var(--color-negative) 30%, transparent);
}

/* Pedido do usuario: feed de noticias financeiras/de bolsas do mundo no
   Dashboard, embaixo do calendario economico (ver
   App\Services\Mercado\NoticiasMercadoService) — lista simples, um item
   por noticia, sem moldura de card dentro de card (mesmo criterio do
   .tm-subcard acima). */
.tm-noticias-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.tm-noticia-item {
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}

.tm-noticia-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.tm-noticia-item-titulo {
    color: var(--color-text);
    font-weight: 500;
    text-decoration: none;
}

.tm-noticia-item-titulo:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

.tm-noticia-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: 4px;
    font-size: 12px;
}

.tm-noticia-resumo {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* Pedido do usuario: mapa de calor (treemap) das acoes do Ibovespa no
   Dashboard, atualizado junto com as cotacoes. O layout (posicao/tamanho
   de cada bloco, proporcional ao peso da acao no indice) vem pronto do
   servidor (App\Support\Treemap, calculado no comando agendado) como
   percentuais 0-100 — aqui e' so' posicionamento absoluto dentro de um
   container com aspect-ratio fixo (ver config('mercado.heatmap_largura'/
   'heatmap_altura'), mesma proporcao usada no calculo do lado do PHP,
   senao os blocos saem "esticados": a area em % de cada um continua
   correta, so a "quadratude" visual piora se as proporcoes divergirem
   muito). Cor de cada bloco (--color-positive/--color-negative, tingido
   com color-mix — inline, calculado no servidor junto do layout) segue o
   mesmo principio de .tm-badge/.tm-mini-card acima: tinta sobre a
   superficie, nunca preenchimento solido — so que aqui a intensidade da
   tinta varia com o tamanho da variacao do dia, nao e fixa. */
.tm-heatmap {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 2;
    background: var(--color-bg-subtle);
    border-radius: var(--radius-control);
    overflow: hidden;
}

.tm-heatmap-tile {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0 2px;
    overflow: hidden;
    outline: 1.5px solid var(--color-surface);
    outline-offset: -0.75px;
    cursor: default;
}

.tm-heatmap-tile-ticker {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.1;
    /* Pedido do usuario: o ticker nunca some, mesmo no bloco menor do
       mapa de calor — se nao couber inteiro, trunca com "…" em vez de
       estourar o bloco (overflow:hidden ja' existe em .tm-heatmap-tile). */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Bloco pequeno demais pra caber ticker + % (ver 'compacto' em
   CotacoesB3Service::montarMapaCalor) — só a % some, o ticker fica
   sozinho com fonte menor pra ter mais chance de caber sem truncar. */
.tm-heatmap-tile-ticker--compacto {
    font-size: 9px;
}

.tm-heatmap-tile-var {
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1.1;
}

/* Proporcao mais alta (menos "paisagem") em telas estreitas — os mesmos
   ~80 blocos, mais apertados horizontalmente numa tela de celular, ficam
   ilegiveis numa faixa 2,5:1 baixinha; mais altura da mais espaco vertical
   pra cada linha do treemap "respirar". A matematica do layout (calculada
   uma vez so, pro aspect-ratio 2,5:1 do desktop) nao muda — os blocos so
   ficam visualmente menos quadrados nessa largura, tradeoff aceito em
   troca de legibilidade. */
@media (max-width: 640px) {
    .tm-heatmap {
        aspect-ratio: 4 / 5;
    }

    .tm-heatmap-tile-ticker,
    .tm-heatmap-tile-var {
        font-size: 9px;
    }
}

/* Card de destaque da nota final (tela de resultado do encerramento) — a
   borda superior reforça a mesma cor da faixa de nota (Trade::faixasNota()),
   ligando visualmente numero grande + badge + moldura numa unica leitura de
   cor, em vez do card neutro que existia antes. */
.tm-nota-hero {
    text-align: center;
    border-top: 3px solid var(--color-border);
}

.tm-nota-hero--positive { border-top-color: var(--color-positive); }
.tm-nota-hero--accent { border-top-color: var(--color-accent); }
.tm-nota-hero--neutral { border-top-color: var(--color-neutral-info); }
.tm-nota-hero--warning { border-top-color: var(--color-warning); }
.tm-nota-hero--critical { border-top-color: var(--color-critical); }

/* Avatar com iniciais — usado onde antes so havia o nome em texto (rodape
   do menu lateral, autor/cliente em listas). Cor unica (tom do accent),
   nao por hash do nome — mais simples e consistente com .tm-badge--accent. */
.tm-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-accent-tag-bg);
    color: var(--color-accent);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
}

.tm-avatar--sm {
    width: 24px;
    height: 24px;
    font-size: 11px;
}

.tm-avatar--lg {
    width: 44px;
    height: 44px;
    font-size: 16px;
}

/* Cabecalho de formulario de cadastro/edicao (Contas, Carteiras,
   Corretoras, Estrategias, Ativos) — antes era so um <h1> solto; reaproveita
   .tm-stat-card-icon (ja existe) com o mesmo icone do item correspondente no
   menu lateral, ligando visualmente o formulario ao modulo. */
.tm-form-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--space-3);
}

.tm-form-header h1 {
    margin: 0;
}

/* Celula "avatar + nome" em tabela (Contas, Corretoras, Carteiras,
   Estrategias) — formaliza o padrao repetido em vez de style="" inline em
   cada view (mesmo criterio ja usado para .tm-page-subtitle etc, Documento
   09, secao 13). */
.tm-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 5.3 — Badges (nota, status, desvios) */
.tm-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.8;
    white-space: nowrap;
}

.tm-badge--positive {
    background: color-mix(in srgb, var(--color-positive) 15%, transparent);
    color: var(--color-positive);
}

.tm-badge--negative {
    background: color-mix(in srgb, var(--color-negative) 15%, transparent);
    color: var(--color-negative);
}

.tm-badge--warning {
    background: color-mix(in srgb, var(--color-warning) 15%, transparent);
    color: var(--color-warning);
}

.tm-badge--critical {
    background: color-mix(in srgb, var(--color-critical) 15%, transparent);
    color: var(--color-critical);
}

.tm-badge--accent {
    background: var(--color-accent-tag-bg);
    color: var(--color-accent);
}

.tm-badge--neutral {
    background: color-mix(in srgb, var(--color-neutral-info) 15%, transparent);
    color: var(--color-neutral-info);
}

/* Nota comportamental — pedido do usuario: destaque visual equivalente ao
   do resultado financeiro, gradiente continuo vermelho->dourado->verde
   proporcional ao valor exato (nao mais 5 bandas fixas). --tm-nota-fill
   ja' vem resolvido (color-mix) via style inline, calculado em
   tm-nota-badge.blade.php a partir do valor exato da nota — aqui so'
   aplica. Preenchimento solido (nao o tingido ~15% das outras variantes de
   badge) de proposito: e' o unico badge do sistema com esse tratamento,
   pra realmente se destacar dos demais. */
.tm-badge--nota-gradiente {
    background: var(--tm-nota-fill);
    color: #fff;
    font-weight: 600;
}

/* Quando a nota aparece como o valor "hero" de um card de KPI (Dashboard),
   ganha o mesmo peso visual do numero ao lado (resultado financeiro) em
   vez do tamanho padrao de badge de tabela/lista — mesmo componente, so'
   escalado pelo contexto (.tm-stat-value), sem duplicar HTML/classe nova
   na view. */
.tm-stat-value .tm-badge--nota-gradiente {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.3;
    padding: 2px 16px;
}

/* Pontinho de status dentro do badge (visual de referencia levantado na
   modernizacao do visual: "pill" com marcador colorido antes do texto, ex:
   "● Lida"/"● Ativo"). Puramente decorativo via ::before em currentColor —
   nao precisa de nenhuma mudanca de HTML nos ~11 lugares que ja usam
   .tm-badge, herda a cor certa automaticamente de qualquer variante. Opt-in
   via .tm-badge--dot para nao alterar badges que ja tem seu proprio icone
   (ex: nota-badge com numero, que fica mais limpo sem o pontinho). */
.tm-badge--dot::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* Pedido do usuario: classificacao de impacto do "Panorama de Mercado"
   (App\Support\ClassificadorImpacto) — 4 niveis (CRITICO/ALTO/MEDIO/BAIXO)
   por potencial de volatilidade, distinto da importancia economica crua
   da BiQuote (essa continua com .tm-badge--critical/warning/positive nas
   3 faixas, ver panorama-mercado.blade.php mais abaixo na pagina). Sem
   token de cor novo: CRITICO reaproveita o mesmo tratamento solido que ja
   existia pra "Alta" importancia, ALTO reaproveita --color-warning cheio,
   MEDIO e' o mesmo tom numa tinta bem mais fraca (gradacao dentro da
   mesma familia quente), BAIXO reaproveita a tinta neutra. */
.tm-badge--impacto-critico {
    background: var(--color-critical);
    color: #fff;
}

.tm-badge--impacto-alto {
    background: color-mix(in srgb, var(--color-warning) 18%, transparent);
    color: var(--color-warning);
}

.tm-badge--impacto-medio {
    background: color-mix(in srgb, var(--color-warning) 8%, transparent);
    color: var(--color-warning);
}

.tm-badge--impacto-baixo {
    background: color-mix(in srgb, var(--color-neutral-info) 15%, transparent);
    color: var(--color-neutral-info);
}

/* Abas com sublinhado (Relatorios, Documento 08 secao 12) — antes eram
   .tm-btn empilhados (funcional, mas pesado visualmente para navegacao
   entre 4 visualizacoes da mesma tela). Padrao mais leve, comum em
   produtos modernos: linha inteira com borda inferior, aba ativa com
   sublinhado na cor de accent. */
.tm-tabs {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.tm-tabs a {
    display: inline-flex;
    align-items: center;
    padding: 10px 2px;
    margin-bottom: -1px;
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.tm-tabs a:hover {
    color: var(--color-accent);
}

.tm-tabs a.is-active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

/* Segmented control — alternativa visual a um grupo pequeno de radio
   buttons (Direcao Compra/Venda, Classificacao legitima/desvio, Sim/Nao),
   que antes eram so <input type="radio"> nus com o rotulo do lado, sem
   nenhum destaque visual de qual opcao ja esta selecionada. O <input> em si
   continua no DOM (acessivel, funciona com teclado/leitor de tela e
   submete o form normalmente) so fica visualmente oculto — quem "parece"
   um botao e o <label> irmao logo em seguida, estilizado via
   input:checked + label. */
.tm-segmented {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tm-segmented input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* Especificidade proposital ".tm-segmented .tm-segmented-option" (2
   classes), nao so ".tm-segmented-option" (1 classe): a regra generica
   ".tm-field label" (components.css, secao 5.5) tem especificidade
   classe+elemento e ganharia de uma unica classe, quebrando o
   display:inline-flex (viraria bloco empilhado) — bug real pego antes de
   testar, comparando especificidade das duas regras. */
.tm-segmented .tm-segmented-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: var(--radius-control);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0;
    cursor: pointer;
    user-select: none;
}

.tm-segmented .tm-segmented-option:hover {
    border-color: var(--color-text-tertiary);
}

.tm-segmented input:focus-visible + .tm-segmented-option {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Estado "marcado" padrão, sem variante semantica (positive/negative/warning)
   — usado por grupos onde as opcoes nao tem sentido de "bom"/"ruim" (ex:
   fonte da importacao ProfitChart/MetaTrader). Regra colocada ANTES das
   variantes abaixo de proposito: mesma especificidade (3 classes + 1
   elemento), entao a ordem no arquivo decide — as variantes, vindas depois,
   vencem em quem tiver a classe --positive/--negative/--warning; quem so tem
   .tm-segmented-option (sem variante) usa so esta regra. Bug real corrigido:
   antes desta regra, .tm-segmented-option sem variante ficava visualmente
   identica marcada ou nao. */
.tm-segmented input:checked + .tm-segmented-option {
    background: color-mix(in srgb, var(--color-accent) 15%, transparent);
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.tm-segmented input:checked + .tm-segmented-option--positive {
    background: color-mix(in srgb, var(--color-positive) 15%, transparent);
    color: var(--color-positive);
    border-color: var(--color-positive);
}

.tm-segmented input:checked + .tm-segmented-option--negative {
    background: color-mix(in srgb, var(--color-negative) 15%, transparent);
    color: var(--color-negative);
    border-color: var(--color-negative);
}

.tm-segmented input:checked + .tm-segmented-option--warning {
    background: color-mix(in srgb, var(--color-warning) 15%, transparent);
    color: var(--color-warning);
    border-color: var(--color-warning);
}

/* 5.5 — Inputs e formularios */
.tm-field {
    margin-bottom: var(--space-2);
}

.tm-field label {
    display: block;
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}

/* Bug real corrigido: esta regra tambem pegava <input type="checkbox">
   e <input type="radio"> soltos dentro de um .tm-field (ex: checklist da
   estrategia no cadastro de trade, "Sentimentos" no Encerramento, toggle
   "ativo" nos formularios de admin) — width:100%+padding+border
   transformava o checkbox nativo numa caixa retangular enorme, o oposto
   de um checkbox. :not() exclui os dois tipos, que devem manter o
   tamanho/aparencia nativa do navegador. Radio dentro de .tm-segmented
   ja escapava disso por especificidade maior
   (.tm-segmented input[type="radio"], ver acima) — este fix cobre os
   casos SEM esse wrapper. */
.tm-field input:not([type="checkbox"]):not([type="radio"]),
.tm-field select,
.tm-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 15px;
}

.tm-field input:not([type="checkbox"]):not([type="radio"]):focus,
.tm-field select:focus,
.tm-field textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-bg);
}

/* Checklist da estrategia pra marcar no cadastro/encerramento do trade
   (resources/views/trades/create.blade.php) — cada item e' um checkbox +
   descricao. Sem isso, o item herdava .tm-field label (color secundario,
   font-size de "dica"), errado pra conteudo que o usuario preenche de
   verdade, nao uma legenda. Nome deliberadamente diferente de
   .tm-checklist-list/.tm-checklist-row (estrategias/_checklist.blade.php)
   — aquele e' o EDITOR do checklist (arrastar, remover item), este e' só
   MARCAR os itens já cadastrados numa entrada. */
.tm-checklist-marcar {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tm-checklist-marcar label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: var(--radius-control);
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text);
    cursor: pointer;
    transition: background 0.15s;
}

.tm-checklist-marcar label:hover {
    background: var(--color-bg-subtle);
}

.tm-checklist-marcar input[type="checkbox"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--color-accent);
}

/* Input com icone a esquerda (usado na tela de login/registro). Generico o
   suficiente para reaproveitar em qualquer .tm-field que precise. */
.tm-input-icon-wrap {
    position: relative;
}

.tm-input-icon-wrap .tm-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-tertiary);
    pointer-events: none;
}

.tm-input-icon-wrap .tm-icon svg {
    width: 16px;
    height: 16px;
}

/* Especificidade: precisa vencer ".tm-field input:not([type="checkbox"]):not([type="radio"])"
   (secao 5.5, "padding: 10px 12px") pois todo input aqui esta dentro de um
   .tm-field. Sem isso o padding-left volta a 12px e o texto digitado fica
   por baixo do icone (email/cadeado) — bug reportado na tela de login. */
.tm-field .tm-input-icon-wrap input:not([type="checkbox"]):not([type="radio"]),
.tm-input-icon-wrap input {
    padding-left: 38px;
}

.tm-field-hint {
    font-size: 12px;
    color: var(--color-text-tertiary);
    margin-top: 4px;
}

/* Combobox de busca de usuario (assets/js/tm-user-search.js) — pedido do
   usuario: select comum inviavel com milhares de cadastros. Popup
   flutuante sobre o resto da pagina (mesma ideia visual de .tm-notif-panel,
   Documento 09), lista de botoes (nao <li>/<a>, ja que a selecao e' via
   JS, nao navegacao). */
.tm-user-search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-elevated);
    z-index: 30;
}

.tm-user-search-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    cursor: pointer;
    font-family: var(--font-body);
    color: var(--color-text);
}

.tm-user-search-item:last-child {
    border-bottom: none;
}

.tm-user-search-item strong {
    font-size: 14px;
    font-weight: 500;
}

.tm-user-search-item span {
    font-size: 12px;
    color: var(--color-text-secondary);
}

.tm-user-search-item:hover,
.tm-user-search-item.is-active {
    background: var(--color-accent-bg);
}

.tm-user-search-empty {
    padding: 12px;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.tm-error {
    color: var(--color-negative);
    font-size: 13px;
    margin-top: 4px;
}

.tm-form-actions {
    display: flex;
    gap: var(--space-1);
    align-items: center;
}

/* 5.4 — Tabelas / listas. Em mobile viram cards empilhados (Documento 08, 1.1). */
.tm-table-wrap {
    overflow-x: auto;
}

.tm-table {
    width: 100%;
    border-collapse: collapse;
}

.tm-table th {
    text-align: left;
    font-size: 13px;
    color: var(--color-text-secondary);
    font-weight: 500;
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border);
}

.tm-table td {
    padding: 12px;
    border-bottom: 1px solid var(--color-border);
    font-size: 14px;
}

/* Zebra striping leve (ajuste visual pos-passo-14, pedido do usuario) —
   antes do hover na cascata, pra ele continuar ganhando por ordem quando
   os dois se aplicam na mesma linha. */
.tm-table tbody tr:nth-child(even) {
    background: var(--color-bg-subtle);
}

.tm-table tbody tr:hover {
    background: var(--color-accent-bg);
}

.tm-table .tm-col-actions {
    text-align: right;
    white-space: nowrap;
}

/* Botoes de acao da tabela (Editar/Excluir/Ver etc.) — antes eram links de
   texto crus (sublinhado azul do navegador, sem nenhum estado de hover
   proprio), o que o usuario reportou como "simples texto com links".
   Padrao novo: icone + tooltip (title=""), no mesmo vocabulario visual dos
   demais botoes-de-icone do sistema (.tm-theme-toggle, .tm-topbar-icon-btn)
   — so menor, porque cabe varios lado a lado numa celula de tabela. */
.tm-table-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tm-table-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-control);
    border: 1px solid transparent;
    background: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    text-decoration: none;
    flex-shrink: 0;
}

.tm-table-action-btn .tm-icon svg {
    width: 16px;
    height: 16px;
}

.tm-table-action-btn:hover {
    background: var(--color-accent-bg);
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.tm-table-action-btn--danger:hover {
    background: color-mix(in srgb, var(--color-negative) 15%, transparent);
    color: var(--color-negative);
    border-color: var(--color-negative);
}

/* Pedido do usuario: botoes de acao com aparencia melhor na listagem de
   Usuarios do admin — hoje sao ate 5 por linha (assinatura, comprovantes
   de aceite, entrar-como, promover/rebaixar admin), icones soltos sem
   moldura nenhuma (so' aparecia borda no hover) ficavam dificeis de ler
   como "isto e um botao clicavel" de tao discretos. Escopado a
   .tm-admin-acoes (so' esta tela) de proposito — .tm-table-action-btn
   sozinho continua com o visual padrao (mais discreto) em todo o resto
   do app (Estrategias, Trades, Importacao, etc.), onde funciona bem. */
.tm-admin-acoes {
    gap: 6px;
}

.tm-admin-acoes .tm-table-action-btn {
    border-color: var(--color-border);
    background: var(--color-surface);
}

.tm-admin-acoes .tm-table-action-btn:hover {
    background: var(--color-accent-bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.tm-admin-acoes .tm-table-action-btn--danger {
    border-color: color-mix(in srgb, var(--color-negative) 35%, var(--color-border));
}

/* 5.4.1 — Extrato da conta com "cara" de extrato bancario (contas/extrato.blade.php).
   Pedido do usuario: agrupar as movimentacoes por dia, com o saldo do dia em
   destaque no cabecalho de cada grupo -- igual extrato de banco de verdade,
   nao so uma tabela corrida com uma coluna "Data" repetida linha a linha. */
.tm-statement {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.tm-statement-day {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
}

.tm-statement-day__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-1);
    padding: 12px var(--space-2);
    background: var(--color-bg-subtle);
    border-bottom: 1px solid var(--color-border);
}

.tm-statement-day__date {
    font-weight: 600;
    text-transform: capitalize;
}

.tm-statement-day__balance {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.tm-statement-day__balance strong {
    font-size: 15px;
}

/* Dentro do grupo do dia a tabela ja tem contexto (o dia esta no cabecalho
   acima), entao remove a borda/padding extra do .tm-card que .tm-table
   normalmente ganharia -- e tira o zebra striping padrao, que brigava
   visualmente com o cabecalho do dia. */
.tm-statement-table th,
.tm-statement-table td {
    padding: 10px var(--space-2);
}

.tm-statement-table tbody tr:nth-child(even) {
    background: none;
}

/* Separa visualmente as acoes de consulta/navegacao (assinatura,
   comprovantes, entrar-como) da acao que muda nivel de acesso
   (promover/remover admin) — a mais sensivel do grupo, nao deveria ficar
   colada nas outras sem nenhuma pausa visual. */
.tm-admin-acoes-divisor {
    width: 1px;
    align-self: stretch;
    background: var(--color-border);
    margin: 2px 2px;
}

/* Documento 09, 5.4 — "numeros sempre alinhados a direita". Escopado a
   .tm-table (nao ao .tm-num global) porque .tm-num tambem e usado em
   valores de destaque fora de tabela (ex: cards de KPI), onde right-align
   nao se aplica. */
.tm-table .tm-num {
    text-align: right;
}

@media (max-width: 640px) {
    .tm-table thead {
        display: none;
    }

    .tm-table, .tm-table tbody, .tm-table tr, .tm-table td {
        display: block;
        width: 100%;
    }

    .tm-table tr {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-card);
        margin-bottom: var(--space-2);
        padding: var(--space-1) var(--space-2);
    }

    .tm-table td {
        border-bottom: none;
        padding: 6px 0;
        display: flex;
        justify-content: space-between;
        gap: var(--space-2);
        text-align: left;
    }

    .tm-table td::before {
        content: attr(data-label);
        color: var(--color-text-secondary);
        font-size: 13px;
    }

    .tm-table .tm-col-actions {
        justify-content: flex-end;
    }

    .tm-table .tm-col-actions::before {
        content: none;
    }
}

/* Documento 08, 1.1 — "Formularios longos (Fechamento do Trade, com suas 3
   secoes): em mobile, cada secao fica em um accordion/step". Implementado
   com <details>/<summary> nativo (sem JS, teclado/leitor de tela de graca)
   em vez de so no mobile — cada secao comeca aberta (open), entao nada
   fica escondido por padrao; o usuario so recolhe o que ja preencheu pra
   reduzir rolagem. Usado dentro de um .tm-card, por isso o summary reusa a
   tipografia de .tm-card h3 em vez de vir do proprio <details>. */
.tm-card details > summary {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 18px;
    color: var(--color-text);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.tm-card details > summary::-webkit-details-marker {
    display: none;
}

.tm-card details > summary::after {
    content: '';
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--color-text-tertiary);
    border-bottom: 2px solid var(--color-text-tertiary);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}

.tm-card details[open] > summary::after {
    transform: rotate(-135deg);
}

.tm-card details > summary + * {
    margin-top: var(--space-2);
}

/* Ajuste visual pos-passo-14 (pedido do usuario): estado vazio/aviso
   rebaixado — borda tracejada + tom neutro, pra nao competir em peso
   visual com card de dado real (que ficou com borda solida + acento de
   cor). Continua sem alterar HTML/logica, so' a moldura. */
.tm-empty-state {
    text-align: center;
    padding: var(--space-4) var(--space-2);
    color: var(--color-text-secondary);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-card);
}

/* Icone decorativo generico ("caixa vazia") acima do texto — antes era so
   texto puro nas ~20 telas que usam .tm-empty-state. Aplicado via
   mask-image (nao background-image) para poder colorir com
   --color-text-tertiary e acompanhar o tema claro/escuro, em vez de fixar
   uma cor no SVG; um unico ajuste aqui cobre as 20 telas sem editar
   nenhuma. */
.tm-empty-state::before {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto var(--space-2);
    background-color: var(--color-text-tertiary);
    opacity: 0.5;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-5 9 5v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9Z'%3E%3C/path%3E%3Cpath d='M3 9l9 5 9-5'%3E%3C/path%3E%3Cpath d='M12 14v6'%3E%3C/path%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-5 9 5v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9Z'%3E%3C/path%3E%3Cpath d='M3 9l9 5 9-5'%3E%3C/path%3E%3Cpath d='M12 14v6'%3E%3C/path%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* ===== Central de ajuda (pedido do usuario) ===== */

/* Hub (ajuda/index.blade.php) — grid de cards, 1 por tema. */
.tm-ajuda-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-2);
}

.tm-ajuda-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}

.tm-ajuda-card:hover {
    border-color: var(--color-accent);
}

.tm-ajuda-card h3 {
    margin: 0;
    font-size: 15px;
}

.tm-ajuda-card p {
    margin: 0;
    font-size: 13px;
    color: var(--color-text-secondary);
}

/* Artigo de um tema (ajuda/{slug}.blade.php) — largura de leitura, nao a
   largura cheia do conteudo (texto corrido fica ruim de ler muito largo). */
.tm-ajuda-article {
    max-width: 720px;
}

.tm-ajuda-article h2 {
    margin-top: var(--space-4);
}

.tm-ajuda-article h2:first-child {
    margin-top: 0;
}

.tm-ajuda-voltar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-text-secondary);
    text-decoration: none;
    margin-bottom: var(--space-2);
}

.tm-ajuda-voltar:hover {
    color: var(--color-accent);
}

/* Pedido do usuario nesta sessao: removidas as screenshots dos artigos
   (so' video do tema a partir de agora) — .tm-ajuda-imagem/--placeholder
   que existiam aqui (moldura tracejada, mesmo principio de
   .tm-empty-state) ficaram sem nenhum uso, removidas junto.

   Video — mesma moldura tracejada que o placeholder de imagem tinha, ao
   final do artigo (resumo em movimento do tema inteiro, nao de um passo
   so). */
.tm-ajuda-video {
    margin: var(--space-3) 0;
}

.tm-ajuda-video video {
    display: block;
    width: 100%;
    border-radius: var(--radius-card);
    border: 1px solid var(--color-border);
    background: #000;
}

/* Embed do YouTube — wrapper com aspect-ratio 16:9 pra iframe responsivo
   (iframe nao tem largura/altura intrinsecas como <video>). */
.tm-ajuda-video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-card);
    border: 1px solid var(--color-border);
    background: #000;
    overflow: hidden;
}

.tm-ajuda-video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.tm-ajuda-video-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: var(--space-5) var(--space-2);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-card);
    color: var(--color-text-tertiary);
    font-size: 13px;
}

.tm-ajuda-video-placeholder .tm-icon svg {
    width: 32px;
    height: 32px;
    opacity: 0.6;
}

/* Contrato/Termos/Privacidade (pedido do usuario: assinatura obrigatoria
   no primeiro acesso + reassinatura a cada versao nova) — reaproveita
   .tm-ajuda-article como container de prosa, mas os 3 documentos legais
   sao o 1º conteudo do projeto com h3, lista, blockquote e tabela dentro
   dele (os artigos de ajuda ate agora so usavam h2/p/imagem/video), daqui
   as regras que faltavam. */
.tm-ajuda-article h3 {
    margin-top: var(--space-3);
    margin-bottom: 4px;
}

.tm-ajuda-article ul,
.tm-ajuda-article ol {
    padding-left: 20px;
    margin: var(--space-2) 0;
}

.tm-ajuda-article li {
    margin-bottom: 6px;
}

.tm-ajuda-article blockquote {
    margin: var(--space-2) 0;
    padding: 10px 14px;
    border-left: 3px solid var(--color-accent);
    background: var(--color-bg-subtle);
    border-radius: 0 var(--radius-control) var(--radius-control) 0;
    color: var(--color-text-secondary);
}

.tm-ajuda-article blockquote p {
    margin: 0;
}

.tm-doc-legal-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    font-weight: 600;
}

.tm-doc-legal-corpo {
    /* Bug real corrigido: herdava max-width:720px de .tm-ajuda-article
       (pensado pra artigo de ajuda, texto corrido estreito) — pedido do
       usuario: documento legal usa a largura toda disponivel, sem essa
       limitacao. */
    max-width: none;
    max-height: 480px;
    overflow-y: auto;
    padding-right: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    padding: var(--space-2) var(--space-3);
}

/* Sem scroll interno na leitura avulsa (Central de Ajuda) — so' faz
   sentido limitar altura na tela de aceite, onde varios documentos
   inteiros ficam empilhados na mesma pagina. */
.tm-doc-legal-corpo--livre {
    max-height: none;
    border: none;
    padding: 0;
}

.tm-doc-legal-aceite {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
    font-weight: 600;
    cursor: pointer;
}

.tm-doc-legal-aceite input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--color-accent);
}

/* Editor de checklist (Documento 08, secao 8.2) — lista reordenavel por
   arrastar (drag handle), usada no cadastro/edicao de Estrategia. */
.tm-checklist-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--space-1);
}

.tm-checklist-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tm-checklist-row.is-dragging {
    opacity: 0.4;
}

.tm-checklist-handle {
    cursor: grab;
    color: var(--color-text-tertiary);
    flex-shrink: 0;
    display: flex;
    touch-action: none;
}

.tm-checklist-handle:active {
    cursor: grabbing;
}

.tm-checklist-row input[type="text"] {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 14px;
}

.tm-checklist-row input[type="text"]:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-bg);
}

.tm-checklist-remove {
    background: none;
    border: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
    flex-shrink: 0;
    padding: 4px;
    display: flex;
}

.tm-checklist-remove:hover {
    color: var(--color-negative);
}

/* 5.6 — Paginacao. Nao prevista no Documento 09 (que nunca definiu essa
   tela); a view "tailwind" padrao do $paginator->links() do Laravel usava
   classes Tailwind sem nenhum efeito aqui (Documento 01, secao 2 — sem
   Tailwind no projeto), ficando visualmente crua. View propria em
   resources/views/vendor/pagination/tradermap.blade.php. */
.tm-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.tm-pagination-info {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.tm-pagination-list {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tm-pagination-link,
.tm-pagination-current,
.tm-pagination-dots,
.tm-pagination-disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: var(--radius-control);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    color: var(--color-text);
}

.tm-pagination-link:hover {
    background: var(--color-accent-bg);
    color: var(--color-accent);
}

.tm-pagination-current {
    background: var(--color-accent);
    color: #fff;
    cursor: default;
}

.tm-pagination-dots,
.tm-pagination-disabled {
    color: var(--color-text-tertiary);
    cursor: default;
}

.tm-pagination-disabled .tm-icon {
    opacity: 0.5;
}

.tm-pagination-arrow .tm-icon svg {
    width: 16px;
    height: 16px;
}

.tm-pagination-arrow--next .tm-icon svg {
    transform: scaleX(-1);
}

/* Grafico de linha (x-tm-line-chart via Chart.js, assets/js/charts.js) —
   Chart.js precisa de um container com altura definida pra saber o quanto
   desenhar (responsive:true + maintainAspectRatio:false olham o tamanho
   do elemento pai, nao do <canvas> em si). */
.tm-chart-container {
    position: relative;
    width: 100%;
    height: 220px;
}

/* Entrada suave dos cards do Dashboard (pedido do usuario: "mais bonito,
   elegante e atraente") — so a entrada inicial da pagina, staggered por
   ordem no HTML via --tm-fade-delay (definido inline por card). Reduced
   motion desliga a animacao (acessibilidade), o conteudo so aparece direto
   no estado final. */
@media (prefers-reduced-motion: no-preference) {
    .tm-fade-in-up {
        animation: tm-fade-in-up 0.5s ease-out backwards;
        animation-delay: var(--tm-fade-delay, 0s);
    }
}

@keyframes tm-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Icone "(?)" de ajuda contextual pra metrica/sigla tecnica (win rate, SQN,
   IRRF...) — ver components/tm-info.blade.php. So o circulo em si; a
   explicacao em texto e' o title nativo do <span>, nao um balao custom. */
.tm-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 5px;
    border-radius: 50%;
    border: 1px solid var(--color-text-tertiary);
    color: var(--color-text-tertiary);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    cursor: help;
    user-select: none;
    vertical-align: middle;
}

.tm-info-icon:hover,
.tm-info-icon:focus-visible {
    border-color: var(--color-accent);
    color: var(--color-accent);
    outline: none;
}