/* BF 360 — kit visual compartilhado (temas ESCURO + CLARO, estilo BF Holding).
   Toda a escala vive em tokens: :root define o tema ESCURO (padrão — a marca
   BF Holding é sóbria e escura) e html[data-theme="light"] o INVERTE. A troca é
   feita por static/js/theme.js (persistida em localStorage, aplicada antes do
   1º paint pelo boot inline do base.html). Uma só fonte de verdade para
   superfícies, bordas e texto — evitando a proliferação de cinzas quase-
   idênticos que denunciava falta de acabamento.

   Além dos tokens semânticos, mapeamos aqui a paleta do Tailwind usada nos
   templates — os cinzas (neutral-*, white) e os matizes de status usados como
   TEXTO (emerald/amber/sky/violet/red/orange/indigo/cyan, shades 200–400) —
   para canais RGB em --tw-* (formato "R G B", que permite opacidade via o
   placeholder <alpha-value> no tailwind.config do base.html). No escuro os
   --tw-* valem exatamente os valores originais do Tailwind (zero mudança
   visual); no claro escurecem para manter contraste sobre fundo claro. Assim
   ~800 classes viram de tema sem uma única edição no HTML.

   O acento white label do cliente entra via --client-primary (base.html, por
   request), com --client-primary-text como cor sobre o acento; no claro o
   branding.py deriva um fallback seguro quando o acento é claro demais. */

:root {
    color-scheme: dark;

    /* ── Superfícies (do fundo para o topo) ────────────────────── */
    --bg:             #060606; /* canvas, body, sidebar, topbar */
    --surface-1:      #0e0e0e; /* cards */
    --surface-2:      #141414; /* modais, popovers, elementos elevados */
    --surface-inset:  #0a0a0a; /* campos, thead de tabela, blocos rebaixados */
    --bg-translucent: rgba(6, 6, 6, 0.9); /* topbar sticky (backdrop-blur) */

    /* ── Bordas ─────────────────────────────────────────────────── */
    --border:               #1d1d1d; /* padrão: cards, tabelas, chrome */
    --border-soft:          #161616; /* divisórias internas de tabela */
    --border-strong:        #2a2a2a; /* controles: input, .btn-secondary */
    --border-strong-hover:  #3a3a3a;

    /* ── Texto (alinhado ao token do brand) ─────────────────────── */
    --text-strong: #f5f5f5; /* títulos / valores em destaque */
    --text:        #d0d0d0; /* corpo */
    --text-muted:  #8a8a8a; /* secundário (labels, subtítulos) */
    --text-faint:  #6b6b6b; /* mudo decorativo (—, microcopy) */

    /* ── Overlays translúcidos (invertem no claro: filme claro → escuro) ── */
    --overlay-hover:  rgba(255, 255, 255, 0.05); /* hover de botões/links/menu  */
    --overlay-active: rgba(255, 255, 255, 0.08); /* :active                     */
    --overlay-row:    rgba(255, 255, 255, 0.025);/* hover de linha de tabela    */
    --hairline:       rgba(255, 255, 255, 0.08); /* borda de <code>             */
    --selection:      rgba(255, 255, 255, 0.15);

    /* ── Chrome diverso ─────────────────────────────────────────── */
    --placeholder:      #525252;
    --scrollbar:        #2a2a2a;
    --scrollbar-hover:  #3a3a3a;
    --glow:             rgba(255, 255, 255, 0.05); /* bloom radial de login/erro */
    --chart-grid:       rgba(255, 255, 255, 0.06); /* grades/eixos do Chart.js   */
    --card-shadow:      0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.02);
    --code-bg:          #141414; /* <code> inline: elevado sobre o card no escuro */

    /* ── Paleta Tailwind mapeada (canais "R G B" p/ opacidade <alpha-value>) ──
       Escuro = valores nativos do Tailwind: nenhuma mudança visual. */
    --tw-white: 255 255 255;
    --tw-neutral-100: 245 245 245;
    --tw-neutral-200: 229 229 229;
    --tw-neutral-300: 212 212 212;
    --tw-neutral-400: 163 163 163;
    --tw-neutral-500: 115 115 115;
    --tw-neutral-600: 82 82 82;
    --tw-neutral-700: 64 64 64;

    --tw-emerald-200: 167 243 208; --tw-emerald-300: 110 231 183; --tw-emerald-400: 52 211 153;
    --tw-amber-200:   253 230 138; --tw-amber-300:   252 211 77;  --tw-amber-400:   251 191 36;
    --tw-sky-200:     186 230 253; --tw-sky-300:     125 211 252; --tw-sky-400:     56 189 248;
    --tw-violet-200:  221 214 254; --tw-violet-300:  196 181 253; --tw-violet-400:  167 139 250;
    --tw-red-200:     254 202 202; --tw-red-300:     252 165 165; --tw-red-400:     248 113 113;
    --tw-orange-200:  254 215 170; --tw-orange-300:  253 186 116; --tw-orange-400:  251 146 60;
    --tw-indigo-400:  129 140 248; --tw-cyan-400:    34 211 238;
}

/* ── Tema CLARO — inverte a escala mantendo a mesma linguagem sóbria ──────── */
html[data-theme="light"] {
    color-scheme: light;

    --bg:             #f5f5f6;
    --surface-1:      #ffffff;
    --surface-2:      #ffffff;
    --surface-inset:  #f1f1f3;
    --bg-translucent: rgba(245, 245, 246, 0.85);

    --border:               #e6e6ea;
    --border-soft:          #eeeef1;
    --border-strong:        #d6d6dc;
    --border-strong-hover:  #c2c2ca;

    --text-strong: #17171a;
    --text:        #3c3c42;
    --text-muted:  #6a6a72;
    --text-faint:  #9a9aa2;

    --overlay-hover:  rgba(0, 0, 0, 0.045);
    --overlay-active: rgba(0, 0, 0, 0.07);
    --overlay-row:    rgba(0, 0, 0, 0.022);
    --hairline:       rgba(0, 0, 0, 0.08);
    --selection:      rgba(0, 0, 0, 0.10);

    --placeholder:      #a1a1aa;
    --scrollbar:        #d2d2d8;
    --scrollbar-hover:  #b6b6be;
    --glow:             rgba(17, 17, 24, 0.04);
    --chart-grid:       rgba(17, 17, 24, 0.08);
    --card-shadow:      0 1px 2px rgba(17, 17, 24, 0.06), 0 1px 3px rgba(17, 17, 24, 0.05);
    --code-bg:          #ececef; /* rebaixado sobre o card branco no claro */

    /* Rampa comprimida no topo: 500 (texto secundário mais usado) passa AA
       4.5:1 sobre --bg/card; 600 (microcopy) fica ~3.9:1. */
    --tw-white: 24 24 27;   /* text-white → ink escuro · bg-white/5 → filme escuro */
    --tw-neutral-100: 24 24 28;
    --tw-neutral-200: 34 34 39;
    --tw-neutral-300: 60 60 66;
    --tw-neutral-400: 90 90 98;
    --tw-neutral-500: 104 104 112;
    --tw-neutral-600: 126 126 134;
    --tw-neutral-700: 168 168 176;

    --tw-emerald-200: 6 95 70;   --tw-emerald-300: 4 120 87;   --tw-emerald-400: 4 120 87;
    --tw-amber-200:   146 64 14; --tw-amber-300:   180 83 9;   --tw-amber-400:   180 83 9;
    --tw-sky-200:     7 89 133;  --tw-sky-300:     3 105 161;  --tw-sky-400:     3 105 161;
    --tw-violet-200:  91 33 182; --tw-violet-300:  109 40 217; --tw-violet-400:  109 40 217;
    --tw-red-200:     153 27 27; --tw-red-300:     185 28 28;  --tw-red-400:     185 28 28;
    --tw-orange-200:  154 52 18; --tw-orange-300:  194 65 12;  --tw-orange-400:  194 65 12;
    --tw-indigo-400:  67 56 202; --tw-cyan-400:    14 116 144;
}

[x-cloak] { display: none !important; }

::selection { background: var(--selection); }

/* ── Alternador de tema (topbar / páginas públicas) ──────────────
   Mostra o ícone da AÇÃO: no escuro → sol (ir p/ claro); no claro → lua. */
[data-theme-toggle] .icon-moon { display: none; }
[data-theme-toggle] .icon-sun  { display: block; }
html[data-theme="light"] [data-theme-toggle] .icon-sun  { display: none; }
html[data-theme="light"] [data-theme-toggle] .icon-moon { display: block; }

/* ── Marcas BF (PNGs brancos monocromáticos) no tema CLARO ────────
   Os marks são desenhados em branco para o canvas escuro; no claro sumiriam.
   invert(0.96) leva o branco ao near-black da marca (#0A0A0A) preservando o
   alpha. Escopado ao claro → a home (forçada escura) nunca é afetada. Logos de
   tenant (marca_cliente) não casam com este seletor e ficam intactos. */
html[data-theme="light"] img[src$="bf-mark.png"],
html[data-theme="light"] img[src$="bf-holding-logo.png"] {
    filter: invert(0.96);
}

/* ── Foco de teclado visível e on-brand ──────────────────────────
   Botões e links de ação do kit dependiam do outline default do browser,
   apagado no tema escuro. Um único anel de acento cobre toda a navegação. */
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-danger:focus-visible,
.btn-ghost:focus-visible,
.btn-ghost-danger:focus-visible,
.sidebar-link:focus-visible,
.focus-ring:focus-visible {
    outline: 2px solid var(--client-primary);
    outline-offset: 2px;
}

/* ── Sidebar ─────────────────────────────────────────── */
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.5rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    transition: background-color 0.15s, color 0.15s;
}
.sidebar-link:hover { background: var(--overlay-hover); color: var(--text-strong); }
.sidebar-link-active, .sidebar-link-active:hover {
    background: var(--overlay-active);
    color: var(--text-strong);
    box-shadow: inset 2px 0 0 0 var(--client-primary);
}
.sidebar-link svg { width: 1.25rem; height: 1.25rem; flex: none; }

/* ── Botões ──────────────────────────────────────────── */
.btn-primary, .btn-secondary, .btn-danger, .btn-ghost, .btn-ghost-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.5rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background-color 0.15s, color 0.15s, opacity 0.15s, border-color 0.15s;
    cursor: pointer;
}
.btn-primary { background: var(--client-primary); color: var(--client-primary-text); }
.btn-primary:hover { opacity: 0.88; }
.btn-primary:active { opacity: 0.78; }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-secondary { background: transparent; color: var(--text); border: 1px solid var(--border-strong); }
.btn-secondary:hover { background: var(--overlay-hover); border-color: var(--border-strong-hover); }
.btn-secondary:active { background: var(--overlay-active); }
.btn-danger { background: #991b1b; color: #ffffff; }
.btn-danger:hover { background: #b91c1c; }
.btn-danger:active { background: #7f1717; }
.btn-danger:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-ghost { color: var(--text-muted); }
.btn-ghost:hover { background: var(--overlay-hover); color: var(--text-strong); }
/* Ação destrutiva discreta (ex.: "Excluir") — sem cor inline no HTML. */
.btn-ghost-danger { color: rgb(var(--tw-red-400)); }
.btn-ghost-danger:hover { background: rgba(248, 113, 113, 0.08); color: rgb(var(--tw-red-300)); }

/* ── Formulários ─────────────────────────────────────── */
.input, .select {
    display: block;
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid var(--border-strong);
    background: var(--surface-inset);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--text-strong);
    transition: border-color 0.15s, outline-color 0.15s, background-color 0.15s;
}
.input::placeholder { color: var(--placeholder); }
.input:focus, .select:focus {
    outline: 1px solid var(--client-primary);
    outline-offset: -1px;
    border-color: transparent;
}
.select option { background: var(--surface-2); color: var(--text-strong); }
.label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-muted);
}

/* ── Entrada de código (MFA/OTP) — dígitos segmentados ───
   As caixas ficam SOBRE o canvas (`--bg`) nas telas de auth, não sobre um card —
   por isso usam `--surface-2` (mais clara que o fundo) + borda forte + sombra,
   senão somem no escuro. E são FLEXÍVEIS (`flex:1` + `max-width`): 6 caixas nunca
   estouram a largura no mobile (encolhem juntas). `.is-filled` marca a preenchida. */
.otp-input {
    flex: 1 1 0;
    min-width: 0;
    max-width: 3.25rem;
    height: 3.5rem;
    text-align: center;
    font-size: 1.375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-strong);
    border-radius: 0.625rem;
    border: 1px solid var(--border-strong-hover);
    background: var(--surface-2);
    box-shadow: var(--card-shadow);
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.15s, outline-color 0.15s, background-color 0.15s;
}
.otp-input:focus {
    outline: 2px solid var(--client-primary);
    outline-offset: -1px;
    border-color: transparent;
}
.otp-input.is-filled { border-color: var(--client-primary); }
.otp-input:disabled { opacity: 0.5; }
@media (max-width: 380px) {
    .otp-input { height: 3.1rem; font-size: 1.15rem; border-radius: 0.5rem; }
}

/* ── Passos (stepper) do fluxo de configuração do MFA ──── */
.mfa-step { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 500; color: var(--text-faint); }
.mfa-step-num {
    display: flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; flex: none;
    border-radius: 9999px;
    border: 1px solid var(--border-strong);
    font-size: 0.75rem; font-weight: 600;
    color: var(--text-muted);
    background: var(--surface-inset);
}
.mfa-step.is-active { color: var(--text-strong); }
.mfa-step.is-active .mfa-step-num {
    background: var(--client-primary); color: var(--client-primary-text);
    border-color: transparent;
}
.mfa-step.is-done .mfa-step-num {
    color: rgb(var(--tw-emerald-400));
    border-color: rgba(52, 211, 153, 0.4);
}

/* ── Cards e tabelas ─────────────────────────────────── */
.card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    /* Profundidade sutil e on-brand: separa do canvas sem brilho/neon. */
    box-shadow: var(--card-shadow);
}
.table-base { width: 100%; text-align: left; }
.table-base thead th {
    padding: 0.75rem 1rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    background: var(--surface-inset);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.table-base tbody td {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--text);
    border-bottom: 1px solid var(--border-soft);
}
.table-base tbody tr:last-child td { border-bottom: none; }
.table-base tbody tr:hover { background: var(--overlay-row); }

/* Envolva tabelas largas com <div class="table-scroll"> para rolagem
   horizontal em telas estreitas (em vez de cortar colunas). */
.table-scroll { overflow-x: auto; }

/* ── Código inline ───────────────────────────────────── */
code {
    background: var(--code-bg);
    border: 1px solid var(--hairline);
    border-radius: 0.375rem;
    padding: 0.1rem 0.35rem;
    font-size: 0.85em;
    color: var(--text);
}

/* ── Animações da landing pública (home) ─────────────────────────
   Utilitários genéricos, sóbrios e discretos — sem neon. Acionados por
   static/js/home.js (reveal/count-up) ou por classe direta. Tudo respeita
   prefers-reduced-motion mais abaixo. */

/* Reveal-on-scroll: começa levemente abaixo e transparente; .is-visible
   (adicionada pelo IntersectionObserver) traz para o lugar. Escopado a
   html.js (classe adicionada por script inline no base.html): sem JS o
   conteúdo permanece visível em vez de sumir para sempre. */
html.js [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
html.js [data-reveal].is-visible { opacity: 1; transform: none; }
/* Escalonamento opcional dentro de uma grade revelada. */
[data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal-delay="3"] { transition-delay: 0.24s; }
[data-reveal-delay="4"] { transition-delay: 0.32s; }
[data-reveal-delay="5"] { transition-delay: 0.40s; }

/* Card que "levanta" no hover — feedback tátil para a grade de recursos. */
.card-lift { transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.card-lift:hover {
    transform: translateY(-3px);
    border-color: var(--border-strong);
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.8);
}

/* Barras do mock do hero: nascem da base. .bars-grow (adicionada ao revelar)
   leva cada barra à sua altura final (--h). */
.mock-bar {
    height: 0;
    transition: height 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.bars-grow .mock-bar { height: var(--h); }

/* Aurora sutil de fundo — respiração lenta de luz monocromática. */
@keyframes bf-aurora {
    0%, 100% { opacity: 0.55; transform: translate3d(0, 0, 0) scale(1); }
    50%      { opacity: 0.9;  transform: translate3d(0, -12px, 0) scale(1.06); }
}
.aurora { animation: bf-aurora 9s ease-in-out infinite; }

/* Ponto "ao vivo" pulsante (status verde). */
@keyframes bf-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.7); }
}
.live-dot { animation: bf-pulse 1.8s ease-in-out infinite; }

/* Brilho que varre a borda do CTA final. */
@keyframes bf-sheen {
    0%   { transform: translateX(-120%); }
    60%, 100% { transform: translateX(220%); }
}
.sheen::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.06) 50%, transparent 70%);
    transform: translateX(-120%);
    animation: bf-sheen 6s ease-in-out infinite;
    pointer-events: none;
}

/* Transição do ticker de transações (troca de item a cada ciclo). */
.ticker-item { transition: opacity 0.4s ease, transform 0.4s ease; }

@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
    .mock-bar { height: var(--h); transition: none; }
    .aurora, .live-dot, .sheen::after { animation: none; }
    .card-lift:hover { transform: none; }
}

/* ── Scrollbar discreta ──────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }

/* ── Mapa Leaflet (área de logs de segurança) ────────────
   O Leaflet injeta popup/controles brancos fixos — reancorar nos tokens de tema
   para não furar o escuro. Os tiles são raster externo (CARTO), só o chrome do
   mapa é estilizado aqui. */
.leaflet-container { font: inherit; background: var(--surface-inset); }
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: var(--card-shadow);
}
.leaflet-popup-content { margin: 10px 12px; }
.leaflet-bar a,
.leaflet-bar a:hover {
    background: var(--surface-1);
    color: var(--text);
    border-color: var(--border);
}
.leaflet-control-attribution {
    background: var(--bg-translucent) !important;
    color: var(--text-faint);
}
.leaflet-control-attribution a { color: var(--text-muted); }