/* TraderMap — telas de autenticacao (login/registro).
   Depende de tokens.css/base.css/components.css (carregar antes).
   Layout split-screen: painel de marca (esquerda, sempre escuro,
   independente do tema claro/escuro do usuario — e conteudo institucional,
   nao dado do usuario) + formulario (direita, respeita o tema). Modernizacao
   do visual pedida pelo usuario, com base na tela de login do VeriCom
   (referencia visual levantada em conversa, sem reaproveitar paleta/marca
   deles — mantida a identidade Azul Profundo do TraderMap).

   .tm-auth-shell--solo (registro): pedido do usuario pra tela de cadastro
   nao ter mais a divisao com o painel de marca, ficando so' com o
   formulario centralizado — visualmente diferente do login (que continua
   split), nao so' uma variacao de cor. Reaproveita a mesma logo/estrutura
   que ja existia pro colapso mobile do split (.tm-auth-mobile-logo), so'
   forcada a aparecer em qualquer largura em vez de so' abaixo de 900px. */
.tm-auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.tm-auth-shell--solo {
    grid-template-columns: 1fr;
}

.tm-auth-brand {
    /* Painel institucional, sempre escuro — nao segue o alternador de tema
       claro/escuro do usuario (nao e dado do usuario, e apresentacao fixa
       da marca). Por isso define aqui um dourado proprio (--tm-auth-gold),
       em vez de usar var(--color-warning) direto: esse token muda de valor
       conforme o tema (mais escuro no tema claro, pensado para contraste
       sobre fundo claro) e ficaria apagado sobre este fundo azul-marinho
       sempre escuro. */
    --tm-auth-gold: #E0A83E;
    --tm-auth-green: #3FCB82;
    --tm-auth-blue: #6C9CCB;

    position: relative;
    display: flex;
    align-items: center;
    background: linear-gradient(155deg, var(--tm-azul-900), var(--tm-azul-700) 65%, var(--tm-azul-600));
    color: #fff;
    padding: var(--space-5) var(--space-4);
    overflow: hidden;
}

.tm-auth-brand::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 85% 8%, rgba(255, 255, 255, 0.10), transparent 45%),
        radial-gradient(circle at 8% 92%, color-mix(in srgb, var(--tm-auth-gold) 25%, transparent), transparent 50%);
    pointer-events: none;
}

.tm-auth-brand-inner {
    position: relative;
    max-width: 440px;
    margin: 0 auto;
}

.tm-auth-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 18px;
    color: #fff;
    text-decoration: none;
    margin-bottom: var(--space-4);
}

/* Marca (logo de verdade — ver .tm-logo-img em base.css) do painel de
   marca do login. Painel e' sempre navy (.tm-auth-brand, "sempre escuro")
   — logo-sem-fundo.png (fundo transparente) contrasta contra o navy sem
   precisar de variante especifica. */
.tm-auth-logo .tm-icon {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
}

.tm-auth-brand h1 {
    /* Explicito (nao herdar o h1 global de base.css): a tela de login e' a
       referencia de identidade que o resto do app passou a seguir nesta
       sessao — ela mesma nao muda, continua em --font-heading (Lora),
       diferente do h1 "hero" do app (ver base.css) que virou
       --font-display (DM Serif Display). */
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 32px;
    line-height: 1.25;
    color: #fff;
    margin-bottom: var(--space-2);
}

.tm-auth-highlight {
    color: var(--tm-auth-gold);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--tm-auth-gold) 50%, transparent);
    text-underline-offset: 4px;
}

.tm-auth-brand > .tm-auth-brand-inner > p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: var(--space-4);
}

.tm-auth-benefits {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.tm-auth-benefits li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.tm-auth-benefit-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

/* Uma cor por beneficio em vez de um unico tom translucido repetido —
   quebra o azul/branco monocromatico do painel, sem sair da paleta
   ja definida (variaveis locais do proprio painel, ver .tm-auth-brand). */
.tm-auth-benefit-icon--gold {
    background: color-mix(in srgb, var(--tm-auth-gold) 22%, transparent);
    color: var(--tm-auth-gold);
}

.tm-auth-benefit-icon--green {
    background: color-mix(in srgb, var(--tm-auth-green) 22%, transparent);
    color: var(--tm-auth-green);
}

.tm-auth-benefit-icon--blue {
    background: color-mix(in srgb, var(--tm-auth-blue) 22%, transparent);
    color: var(--tm-auth-blue);
}

.tm-auth-benefit-icon svg {
    width: 16px;
    height: 16px;
}

.tm-auth-benefits strong {
    display: block;
    font-size: 14px;
    color: #fff;
    margin-bottom: 2px;
}

/* Bug real corrigido: era ".tm-auth-benefits span" (seletor generico por
   elemento) — pegava tambem o <span class="tm-icon"> do icone de cada
   beneficio (x-tm-icon renderiza como <span>), sobrescrevendo o
   "display:inline-flex" que centraliza o SVG (base.css) para "block",
   descentralizando o desenho dentro da moldura .tm-auth-benefit-icon.
   Corrigido com classe explicita em vez de depender do elemento <span>. */
.tm-auth-benefit-desc {
    display: block;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.65);
}

.tm-auth-form-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
    background: var(--color-bg);
}

.tm-auth-form-box {
    width: 100%;
    max-width: 380px;
}

/* Escondida por padrao (so' aparece no colapso mobile do split, media query
   abaixo, ou sempre em .tm-auth-shell--solo — ver comentario no topo do
   arquivo) — por isso o estilo completo fica definido aqui, e as duas
   excecoes so' viram "display: inline-flex". */
.tm-auth-mobile-logo {
    display: none;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 18px;
    color: var(--color-text);
    text-decoration: none;
    margin-bottom: var(--space-3);
}

/* Marca (logo de verdade — ver .tm-logo-img em base.css) do cabecalho
   mobile das telas de autenticacao. Pagina fica sempre no tema claro
   (data-theme="light" fixo, ver comentario em auth/login.blade.php) —
   logo-sem-fundo.png (fundo transparente) contrasta contra o fundo claro
   sem precisar de variante especifica. */
.tm-auth-mobile-logo .tm-icon {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
}

.tm-auth-shell--solo .tm-auth-mobile-logo {
    display: inline-flex;
}

.tm-auth-eyebrow {
    margin-bottom: var(--space-2);
}

.tm-auth-form-box h2 {
    margin-bottom: 4px;
}

.tm-auth-form-box > p.tm-text-secondary {
    margin-bottom: var(--space-3);
}

.tm-auth-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    margin-bottom: var(--space-2);
}

.tm-auth-remember {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-secondary);
}

.tm-auth-trust {
    margin-top: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
    text-align: center;
}

.tm-auth-trust-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-text-tertiary);
}

.tm-auth-trust-badge .tm-icon svg {
    width: 14px;
    height: 14px;
    color: var(--color-positive);
}

/* Forca da senha (pedido do usuario: exigir e mostrar em tempo real cada
   requisito atendido) — so' na tela de registro. JS liga/desliga .is-met
   por requisito e ajusta a barra (assets/js/tm-password-strength.js); o
   requisito de verdade e' sempre o do servidor
   (AuthController::regrasSenha()), isto aqui e' so' reforco de UX. */
.tm-password-strength {
    margin-top: var(--space-1);
}

.tm-password-strength-bar {
    height: 4px;
    border-radius: 2px;
    background: var(--color-border);
    overflow: hidden;
    margin-bottom: 6px;
}

.tm-password-strength-fill {
    height: 100%;
    width: 0%;
    border-radius: 2px;
    background: var(--color-negative);
    transition: width 0.2s ease, background-color 0.2s ease;
}

.tm-password-strength-fill.is-media {
    background: var(--color-warning);
}

.tm-password-strength-fill.is-forte {
    background: var(--color-positive);
}

.tm-password-strength-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-tertiary);
    margin-bottom: 8px;
}

.tm-password-requisitos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
}

.tm-password-requisitos li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-text-tertiary);
    transition: color 0.2s ease;
}

.tm-password-requisitos li .tm-icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid var(--color-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.tm-password-requisitos li .tm-icon svg {
    width: 9px;
    height: 9px;
}

.tm-password-requisitos li.is-met {
    color: var(--color-positive);
}

.tm-password-requisitos li.is-met .tm-icon {
    color: #fff;
    border-color: var(--color-positive);
    background: var(--color-positive);
}

@media (max-width: 420px) {
    .tm-password-requisitos {
        grid-template-columns: 1fr;
    }
}

.tm-auth-footer {
    text-align: center;
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-top: var(--space-3);
}

/* Bug real corrigido: "Sair" (verificar-email.blade.php) precisa ser um
   <form>/POST (logout, nao um link GET) — <form> e' block-level por
   padrao, entao caia pra uma linha propria em vez de fluir junto do
   texto "Não é Fulano?" como os <a> dos outros rodapes de auth fazem,
   parecendo "sem estilo". display:inline no form + botao estilizado
   igual a um link (mesma cor de --color-accent que .tm-auth-footer a
   usa via a global do base.css) resolve os dois problemas de uma vez. */
.tm-auth-footer-form {
    display: inline;
}

.tm-auth-footer-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--color-accent);
    text-decoration: underline;
    cursor: pointer;
}

.tm-auth-footer-link:hover {
    color: var(--color-accent-hover);
}

@media (max-width: 900px) {
    .tm-auth-shell {
        grid-template-columns: 1fr;
    }

    .tm-auth-brand {
        display: none;
    }

    .tm-auth-mobile-logo {
        display: inline-flex;
    }
}