/*
 * Identidade visual do site www.bigadv.com.br aplicada ao painel.
 *
 * Fonte dos tokens: /home/bigadvsite/public_html/themes/user/bigadv/css/site.css
 * (variáveis --azul, --aqua, --laranja, --borda, --fundo). Mantenha em sincronia
 * se o site mudar.
 *
 * Princípio: as telas de acesso (login, cadastro, senha) usam a linguagem do
 * site — fundo navy, tag aqua, CTA laranja — porque são a ponte entre o site e o
 * produto. Dentro do painel o visual é sóbrio: fundo, bordas, cards e menu
 * seguem o site, e o laranja fica restrito à ação principal da página
 * (botões primários do cabeçalho da página e o envio dos formulários de acesso).
 *
 * Carregado DEPOIS de brand.css e ui.css (ordem em AppServiceProvider).
 */

:root {
    --bigadv-azul: #222A5A;
    --bigadv-azul2: #252F64;
    --bigadv-cinza: #4f5c73;
    --bigadv-borda: #e8edf5;
    --bigadv-fundo: #f7f8fb;
    --bigadv-aqua: #62D5D0;
    --bigadv-aqua2: #A2DBD0;
    --bigadv-laranja: #D14400;
    --bigadv-sombra: 0 10px 30px rgba(10, 45, 88, .06);
    --bigadv-sombra-forte: 0 22px 55px rgba(9, 45, 92, .18);
}

/* ============================================================ BASE */

.fi-body:not(.dark *) { background-color: var(--bigadv-fundo); }

.fi-header-heading { font-weight: 600; letter-spacing: -.015em; }
.fi-header-heading:not(.dark *) { color: var(--bigadv-azul); }

/* ============================================================ BOTÃO LARANJA
   Mesmo comportamento do .btn.azul do site: laranja, e navy ao passar o mouse.
   Variáveis --bg/--hover-bg são as que o próprio .fi-btn do Filament consome. */

.fi-simple-page .fi-btn.fi-color-primary:not(.fi-outlined),
.fi-header-actions-ctn .fi-btn.fi-color-primary:not(.fi-outlined),
.fi-btn.fi-color-accent:not(.fi-outlined) {
    --bg: var(--bigadv-laranja);
    --text: #fff;
    --hover-bg: var(--bigadv-azul);
    --hover-text: #fff;
    --dark-bg: var(--bigadv-laranja);
    --dark-text: #fff;
    --dark-hover-bg: #e2570f;
    --dark-hover-text: #fff;
    background-color: var(--bg);
    color: var(--text);
    border-radius: .625rem;
    font-weight: 600;
    box-shadow: 0 12px 26px rgba(209, 68, 0, .22);
    transition: background-color .2s ease, transform .2s ease;
}

.fi-simple-page .fi-btn.fi-color-primary:not(.fi-outlined):hover,
.fi-header-actions-ctn .fi-btn.fi-color-primary:not(.fi-outlined):hover,
.fi-btn.fi-color-accent:not(.fi-outlined):hover {
    background-color: var(--hover-bg);
    color: var(--hover-text);
    transform: translateY(-1px);
}

.dark .fi-simple-page .fi-btn.fi-color-primary:not(.fi-outlined):hover,
.dark .fi-header-actions-ctn .fi-btn.fi-color-primary:not(.fi-outlined):hover,
.dark .fi-btn.fi-color-accent:not(.fi-outlined):hover { background-color: var(--dark-hover-bg); }

.fi-simple-page .fi-btn.fi-color-primary .fi-icon,
.fi-header-actions-ctn .fi-btn.fi-color-primary:not(.fi-outlined) .fi-icon { color: #fff; }

/* ============================================================ SUPERFÍCIES
   Cards do site: borda #e8edf5, raio 8–10px, sombra azulada suave. */

.fi-section:not(.fi-section-not-contained):not(.dark *),
.fi-ta-ctn:not(.dark *),
.fi-wi-stats-overview-stat:not(.dark *),
.fi-simple-main:not(.dark *) {
    --tw-ring-color: var(--bigadv-borda);
    box-shadow: 0 0 0 1px var(--bigadv-borda), var(--bigadv-sombra);
}

.fi-section:not(.fi-section-not-contained),
.fi-ta-ctn,
.fi-wi-stats-overview-stat { border-radius: .75rem; }

.fi-section-header-heading { font-weight: 600; }
.fi-section-header-heading:not(.dark *) { color: var(--bigadv-azul); }

/* ============================================================ BARRA SUPERIOR */

.fi-topbar:not(.dark *) {
    background-color: rgba(255, 255, 255, .96);
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 var(--bigadv-borda);
}

/* ============================================================ MENU LATERAL
   Item ativo como as abas do site (.tabBtns button.on): navy com texto branco,
   ícone em aqua. */

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: var(--bigadv-azul);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label { color: #fff; }

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-icon { color: var(--bigadv-aqua); }

.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background-color: rgba(98, 213, 208, .14); }

.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label { color: #fff; }

.fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover .fi-sidebar-item-label:not(.dark *) {
    color: var(--bigadv-laranja);
}

.fi-sidebar-group-label {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.fi-sidebar-group-label:not(.dark *) { color: var(--bigadv-azul); }

/* ============================================================ TELAS DE ACESSO
   Login: fundo do hero do site (gradiente navy sobre a foto) em tela cheia,
   discurso em branco à esquerda, card branco à direita.
   Cadastro e senha: faixa navy no topo e o card sobreposto. */

.fi-body:has(.bigadv-hero) {
    background:
        linear-gradient(90deg, rgba(34, 42, 90, .95), rgba(34, 42, 90, .82) 50%, rgba(34, 42, 90, .55)),
        url(/images/brand/hero-bg.webp) center / cover no-repeat fixed,
        var(--bigadv-azul);
}

.fi-body:has(.fi-simple-layout):not(:has(.bigadv-hero)):not(.dark *) {
    background:
        linear-gradient(135deg, var(--bigadv-azul), var(--bigadv-azul2)) top / 100% 15rem no-repeat,
        var(--bigadv-fundo);
}

.fi-body:has(.fi-simple-layout):not(:has(.bigadv-hero)):where(.dark, .dark *) {
    background:
        linear-gradient(135deg, var(--bigadv-azul), var(--bigadv-azul2)) top / 100% 15rem no-repeat,
        var(--gray-950);
}

.fi-simple-main {
    border-radius: 1rem;
}

.fi-body:has(.bigadv-hero) .fi-simple-main { box-shadow: var(--bigadv-sombra-forte); }

/* Discurso do login em branco, como o hero do site. */
.bigadv-hero__tag {
    display: inline-block;
    margin-bottom: 1rem;
    padding: .375rem .75rem;
    border-radius: 999px;
    background-color: var(--bigadv-aqua);
    color: var(--bigadv-azul);
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.fi-body .bigadv-hero__title,
.dark .bigadv-hero__title {
    color: #fff;
    font-weight: 600;
    letter-spacing: -.02em;
}

.fi-body .bigadv-hero__lead,
.dark .bigadv-hero__lead { color: #dce8f8; }

.fi-body .bigadv-hero__points strong,
.dark .bigadv-hero__points strong { color: #fff; }

.fi-body .bigadv-hero__points span:last-child,
.dark .bigadv-hero__points span:last-child { color: #cbdaef; }

.fi-body .bigadv-hero__icon,
.dark .bigadv-hero__icon {
    background-color: rgba(98, 213, 208, .16);
    color: var(--bigadv-aqua);
}

.fi-body .bigadv-hero__note,
.dark .bigadv-hero__note {
    border-color: rgba(255, 255, 255, .16);
    color: #aebcd6;
}

/* Abaixo de 1024px o discurso empilha acima do card: dá respiro ao fim dele. */
@media (max-width: 1023px) {
    /* No celular o login vem primeiro; o discurso fica logo abaixo do card. */
    .fi-simple-layout:has(.bigadv-hero) { display: flex; flex-direction: column; }
    .fi-simple-layout:has(.bigadv-hero) > .bigadv-hero { order: 2; padding-top: 2.5rem; }
    .bigadv-hero { padding-bottom: 2rem; }
    .fi-body:has(.bigadv-hero) { background-attachment: scroll; }
}

@media (min-width: 1024px) {
    .bigadv-hero__title { font-size: 2.25rem; line-height: 1.12; }
    .bigadv-hero__lead { font-size: 1rem; }
}

/* Links de texto das telas de acesso ("Esqueceu a senha?", "Criar conta"). */
.fi-simple-page .fi-link.fi-color-primary:not(.dark *) { color: var(--bigadv-laranja); }