/* ==========================================================================
   Tema — Inventário GoAlt
   --------------------------------------------------------------------------
   Carregado DEPOIS do app.css. O app.css não é alterado: este arquivo
   redefine as variáveis dele e corrige os pontos onde a cor está chumbada.
   Para desligar o tema, remova a linha que o carrega no App.razor.

   Direção: instrumento de precisão. Base quase preta, amarelo como sinal,
   malha técnica de fundo, números em monoespaçada, movimento apenas na
   entrada e no foco.

   NÃO usar @layer aqui: regras dentro de uma camada perdem para regras sem
   camada, e o app.css não usa camadas. Envolver este arquivo em @layer faz o
   tema inteiro ser ignorado. A precedência vem da ordem de carregamento —
   este arquivo entra depois do app.css no App.razor.
   ========================================================================== */


/* ── Fontes (servidas pelo próprio app, sem CDN) ── */
@font-face {
    font-family: 'Space Grotesk';
    src: url('fontes/space-grotesk-var.woff2') format('woff2-variations');
    font-weight: 300 700;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Mono';
    src: url('fontes/ibm-plex-mono-400.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Mono';
    src: url('fontes/ibm-plex-mono-600.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

/* Ângulo registrado: sem @property o navegador não sabe interpolar um ângulo
   dentro de um gradiente, e a borda giratória não animaria. */
@property --angulo {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@property --preenchimento {
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: false;
}

/* ── base ────────────────────────────────────────────── */
/* ── Paleta ──
   Um único amarelo declarado uma vez; os tons derivados saem de
   color-mix, então trocar --sinal reequilibra o site inteiro. */
:root {
    --sinal: #72B3E2;          /* 3º azul da barra do logo; 6,56:1 sobre o card — texto, links, item ativo */
    --serie: #2B7ABF;          /* 2º azul da barra do logo; 3,29:1 sobre o card — preenchimento de barra (marca gráfica, mínimo 3:1) */
    --tinta-sobre-sinal: #0D233D;

    --preto: #081627;
    --bg-page: #0D233D;
    --card-bg: #142842;
    --elevado: #1B3457;

    --border: color-mix(in oklab, var(--sinal) 6%, #2A3F63);
    --borda-forte: color-mix(in oklab, var(--sinal) 14%, #35527E);

    --text-main: #e7eaf2;
    --text-muted: #A3ADC2;
    /* Vermelho de risco legível sobre o navy: o #dc3545 do Bootstrap dá 3,29:1
       como texto, e o #E5484D dos POIs, 3,80. Este é um passo mais claro. */
    --perigo: #F27278;
    --text-fraco: #8F99B0;

    --sinal-fraco: color-mix(in oklab, var(--sinal) 12%, transparent);
    --sinal-medio: color-mix(in oklab, var(--sinal) 28%, transparent);

    --sidebar-bg: var(--preto);
    --sidebar-text: var(--text-muted);
    --sidebar-active: var(--sinal);
    --sidebar-hover-bg: var(--sinal-fraco);
    --sidebar-section-label: var(--text-fraco);
    --accent: var(--sinal);
    --accent-hover: color-mix(in oklab, var(--sinal) 80%, white);

    /* Curva com leve ultrapassagem: dá peso físico ao movimento sem
       parecer elástico de brinquedo. */
    --curva: linear(0, 0.036, 0.14, 0.3, 0.5, 0.7, 0.86, 0.964, 1.014, 1.021, 1.012, 1.003, 1);
    --curva-suave: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Fallback: se o navegador engasgar no linear(), usa uma curva comum. */
@supports not (transition-timing-function: linear(0, 1)) {
    :root { --curva: cubic-bezier(0.22, 0.61, 0.36, 1); }
}

body {
    background: var(--bg-page);
    color: var(--text-main);
    font-family: 'Space Grotesk', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Duas camadas de fundo, ambas fixas e inertes ao ponteiro:
   1) malha técnica de 32px, esmaecida por máscara radial
   2) clarão frio no canto superior esquerdo
   Juntas tiram o aspecto de retângulo chapado sem virar decoração. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(1200px 700px at 18% 0%, #000 0%, transparent 78%);
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(900px 400px at 20% -10%, color-mix(in oklab, var(--sinal) 5%, transparent), transparent 70%),
        radial-gradient(700px 500px at 95% 8%, rgba(60, 120, 255, 0.05), transparent 70%);
}

/* Levanta o conteúdo acima das camadas de fundo do body.
   A .sidebar fica FORA desta regra de propósito: o app.css a define como
   position:fixed, e sobrescrever para relative a devolve ao fluxo — ela passa
   a ocupar 240px enquanto o main já tem margin-left:240px, dobrando o
   deslocamento. Ela já é posicionada e já tem z-index próprio. */
.page, .content {
    position: relative;
    z-index: 1;
}

h1, h2, h3, .page-title {
    text-wrap: balance;
    letter-spacing: -0.025em;
    font-weight: 700;
}

::selection {
    background: var(--sinal);
    color: var(--tinta-sobre-sinal);
}

:focus-visible {
    outline: 2px solid var(--sinal);
    outline-offset: 2px;
    border-radius: 3px;
}

* {
    scrollbar-width: thin;
    scrollbar-color: #29313f transparent;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
    background: #29313f;
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #3a4457; background-clip: content-box; }

/* ── superficie ────────────────────────────────────────────── */
.card-panel {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent 120px),
        var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: none;
}

/* Painel principal: fio de luz no topo, do jeito que aparelho de medição
   tem. É uma linha de 1px, não uma sombra colorida. */
.card-panel::before {
    content: '';
    display: block;
    height: 1px;
    margin: -1px -1px 0;
    border-radius: 12px 12px 0 0;
    background: linear-gradient(90deg, transparent, var(--sinal-medio) 18%, transparent 55%);
}

.modal-overlay {
    background: rgba(3, 4, 7, 0.74);
    backdrop-filter: blur(3px) saturate(0.8);
}

.modal-panel {
    background: var(--card-bg);
    border-left: 1px solid var(--borda-forte);
    box-shadow: -30px 0 80px rgba(0, 0, 0, 0.6);
}

.modal-panel-header, .modal-panel-footer { border-color: var(--border); }
.btn-close-panel { color: var(--text-muted); }

/* ── dados ────────────────────────────────────────────── */
.page-subtitle { color: var(--text-muted); }

/* Rótulo pequeno: mono, caixa alta, muito espaçado. Separa etiqueta de
   conteúdo pela forma da letra em vez de por mais uma cor. */
.stat-label,
.nav-section-label,
.table thead th {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.67rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-fraco);
}

/* tabular-nums alinha as colunas de dígitos entre linhas: é o detalhe
   que faz a tabela parecer medição e não texto corrido. */
.stat-value, .table td, .table-footer {
    font-variant-numeric: tabular-nums;
}

.stat-box {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.25s var(--curva-suave);
}

.stat-box::after {
    content: '';
    position: absolute;
    inset: 0 auto auto 0;
    width: 36px;
    height: 2px;
    background: var(--sinal);
}

.stat-box:hover { border-color: var(--borda-forte); }

.stat-value {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 1.55rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--text-main);
}

.table {
    color: var(--text-main);
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-main);
    --bs-table-hover-color: var(--text-main);
    --bs-table-hover-bg: var(--sinal-fraco);
    --bs-table-border-color: var(--border);
}

.table thead th {
    background: transparent;
    border-bottom: 1px solid var(--borda-forte);
}

.table td { border-color: rgba(255, 255, 255, 0.04); }

.table-footer {
    color: var(--text-fraco);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.74rem;
    border-top: 1px solid var(--border);
}

.loading-state, .empty-state {
    color: var(--text-fraco);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
}

/* ── navegacao ────────────────────────────────────────────── */

/* Correção de duas regras herdadas do MainLayout.razor.css, que é boilerplate
   do template Blazor e nunca foi limpo:
     1) .sidebar { position: sticky; width: 250px } — mantém a barra no fluxo.
        Como o app.css já dá margin-left:240px ao main, o deslocamento dobrava:
        o conteúdo começava em 490px em vez de 240px.
     2) .sidebar { background-image: gradiente azul→roxo } — o fundo padrão do
        template, que aparecia por cima do tema.
   CSS isolado usa seletor de atributo e por isso tem especificidade maior que
   qualquer seletor de classe daqui; só !important alcança. A alternativa seria
   editar o MainLayout.razor.css, que é arquivo compartilhado. */
.sidebar {
    position: fixed !important;
    width: var(--sidebar-width) !important;
    height: 100vh !important;
    background-image: none !important;
    background-color: var(--preto) !important;
    border-right: 1px solid var(--border);
}

/* O mesmo boilerplate impõe padding assimétrico ao article via !important
   (2rem à esquerda, 1.5rem à direita). Normaliza. */
.content {
    padding: 2rem 2.25rem !important;
}

.sidebar-header {
    padding: 1.35rem 1.15rem 1.15rem;
    border-bottom: 1px solid var(--border);
}

.sidebar-brand {
    color: var(--text-main);
    font-size: 1rem;
    letter-spacing: -0.02em;
    gap: 0.55rem;
}

/* O ícone da marca é o emoji 📦 escrito no NavMenu. font-size:0 esconde o nó
   de texto e o ::after desenha um sinal gráfico no lugar — assim a marca
   deixa de ser emoji sem precisar editar o NavMenu.razor, que é do colega. */
.sidebar-brand-icon {
    font-size: 0;
    width: 25px;
    height: 25px;
    flex: none;
    display: inline-grid;
    place-items: center;
    border-radius: 6px;
    background: var(--sinal);
    box-shadow: 0 0 20px color-mix(in oklab, var(--sinal) 26%, transparent);
}

.sidebar-brand-icon::after {
    content: '';
    width: 11px;
    height: 11px;
    border: 2px solid var(--tinta-sobre-sinal);
    border-radius: 2px;
    clip-path: polygon(0 0, 100% 0, 100% 58%, 58% 100%, 0 100%);
}

.nav-section-label {
    padding-inline: 1.15rem;
    margin-top: 1.15rem;
    margin-bottom: 0.3rem;
}

.nav-item { padding-inline: 0.6rem; }

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.62rem;
    padding: 0.42rem 0.75rem;
    font-size: 0.83rem;
    border-radius: 5px;
    transition: color 0.18s var(--curva-suave), background-color 0.18s var(--curva-suave);
}

/* O ícone herda currentColor, então acompanha a cor do item sem regra de cor
   própria. Só a opacidade separa repouso de destaque. */
.nav-link .icone {
    flex: none;
    opacity: 0.62;
    transition: opacity 0.18s var(--curva-suave);
}

.nav-link:hover .icone { opacity: 0.9; }
.nav-link.active .icone { opacity: 1; }

.nav-link:hover {
    background: rgba(255, 255, 255, 0.035) !important;
    color: var(--text-main) !important;
}

.nav-link.active {
    background: var(--sinal-fraco) !important;
    color: var(--sinal) !important;
    box-shadow: inset 2px 0 0 var(--sinal);
    border-radius: 0 5px 5px 0;
    font-weight: 600;
}

/* ── formulario ────────────────────────────────────────────── */
.form-control, .form-select {
    background: var(--preto);
    border-color: var(--border);
    color: var(--text-main);
    transition: border-color 0.2s var(--curva-suave), box-shadow 0.2s var(--curva-suave);
}

.form-control::placeholder { color: var(--text-fraco); }

.form-control:focus, .form-select:focus {
    background: var(--preto);
    color: var(--text-main);
    border-color: var(--sinal);
    box-shadow: 0 0 0 3px var(--sinal-fraco);
}

.form-label { color: var(--text-muted); }

/* O app.css fixa color:#fff no .btn-primary; sobre amarelo ficaria
   ilegível, então a tinta vira quase preta. */
.btn-primary {
    background: var(--sinal);
    border-color: var(--sinal);
    color: var(--tinta-sobre-sinal);
    font-weight: 600;
    transition: filter 0.18s var(--curva-suave), box-shadow 0.18s var(--curva-suave);
}

.btn-primary:hover, .btn-primary:focus {
    background: var(--sinal);
    border-color: var(--sinal);
    color: var(--tinta-sobre-sinal);
    filter: brightness(1.12);
    box-shadow: 0 0 24px color-mix(in oklab, var(--sinal) 26%, transparent);
}

.btn-secondary, .btn-outline-secondary {
    background: transparent;
    border-color: var(--border);
    color: var(--text-muted);
    transition: color 0.18s, border-color 0.18s, background-color 0.18s;
}

.btn-secondary:hover, .btn-outline-secondary:hover {
    border-color: var(--borda-forte);
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.035);
}

/* ══════════════════════════════════════════════════════════════════════════
   Bootstrap que ficou no tema claro
   ══════════════════════════════════════════════════════════════════════════

   O bootstrap.min.css é a build de modo claro, e o app.css nasceu junto com
   ela. As telas de cadastro usam essas utilitárias direto no markup, então
   sem as regras abaixo elas pintam texto quase preto sobre fundo azul — o
   contraste medido chegava a 1,04:1, ou seja, invisível.

   Cada regra aqui existe por uma medição, não por gosto. */

/* .text-muted do Bootstrap é rgba(33,37,41,.75): 1,04:1 sobre o card. É o que
   deixava código, bairro e tipo de mídia ilegíveis na lista de pontos.
   O !important é obrigatório — a utilitária do Bootstrap também usa. */
.text-muted { color: var(--text-muted) !important; }

/* O app.css pintava a linha de branco (#f8faff) no hover, herança do tema
   claro. Com o texto quase branco, passar o mouse apagava a linha inteira
   (1,15:1). Quem pinta o hover é o Bootstrap, nas células, e ele leva cor e
   fundo juntos — por isso aqui a linha só sai da frente. */
.table tbody tr:hover { background: transparent; }

/* Outline do Bootstrap sobre navy: primary 3,30:1, danger 3,29:1. Ambos abaixo
   do mínimo de 4,5 para texto. */
.btn-outline-primary {
    background: transparent;
    border-color: color-mix(in oklab, var(--sinal) 45%, transparent);
    color: var(--sinal);
}

.btn-outline-primary:hover, .btn-outline-primary:focus {
    background: var(--sinal);
    border-color: var(--sinal);
    color: var(--tinta-sobre-sinal);
}

.btn-outline-danger {
    background: transparent;
    border-color: color-mix(in oklab, var(--perigo) 45%, transparent);
    color: var(--perigo);
}

.btn-outline-danger:hover, .btn-outline-danger:focus {
    background: var(--perigo);
    border-color: var(--perigo);
    color: var(--tinta-sobre-sinal);
}

.text-danger { color: var(--perigo) !important; }

/* Botão desativado (as setas da paginação na primeira página) volta ao
   #6c757d do Bootstrap por causa de .btn:disabled, que ganha das regras
   acima. Desativado não precisa passar em contraste, mas 3,17:1 é apagado
   demais para dizer "existe, só não dá agora". */
.btn:disabled, .btn.disabled {
    color: var(--text-fraco);
    border-color: var(--border);
    background: transparent;
    opacity: 0.75;
}

/* Campo desabilitado: o Bootstrap troca o fundo por um cinza claro e mantém a
   cor do texto, que aqui é quase branca — some. (Acontece no select de cidade
   enquanto nenhuma UF foi escolhida.) */
.form-control:disabled, .form-select:disabled {
    background: var(--elevado);
    border-color: var(--border);
    color: var(--text-muted);
    opacity: 1;
}

/* Caixas de marcação vinham brancas com borda cinza, do tema claro. */
.form-check-input {
    background-color: var(--preto);
    border-color: var(--borda-forte);
}

.form-check-input:checked {
    background-color: var(--sinal);
    border-color: var(--sinal);
}

.form-check-input:focus {
    border-color: var(--sinal);
    box-shadow: 0 0 0 3px var(--sinal-fraco);
}

.form-check-label { color: var(--text-muted); }

/* Etiqueta "Modal" era branco sobre ciano: 1,96:1. Com tinta navy, 8,09. */
.badge.bg-info { color: var(--tinta-sobre-sinal); }

/* Alertas do Bootstrap são caixas claras (rosa e amarelo pastel). Legíveis
   por dentro, mas de outro tema — sobre a página navy parecem erro de
   carregamento. Aqui viram caixa escura com a tinta do próprio estado. */
.alert {
    background: var(--card-bg);
    border-color: var(--border);
    color: var(--text-main);
}

.alert-danger {
    border-color: color-mix(in oklab, var(--perigo) 35%, var(--border));
    color: var(--perigo);
}

.alert-warning {
    border-color: color-mix(in oklab, #DC9D41 35%, var(--border));
    color: #DC9D41;
}

#blazor-error-ui {
    background: var(--sinal);
    color: var(--tinta-sobre-sinal);
}

/* ── movimento ────────────────────────────────────────────── */
/* Uma sequência de entrada, encenada. Não vinte microinterações soltas. */
@keyframes surge {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.page-header, .card-panel, .stat-box {
    animation: surge 0.5s var(--curva) both;
}

.stat-box:nth-child(1) { animation-delay: 0.04s; }
.stat-box:nth-child(2) { animation-delay: 0.09s; }
.stat-box:nth-child(3) { animation-delay: 0.14s; }
.stat-box:nth-child(4) { animation-delay: 0.19s; }
.card-panel { animation-delay: 0.16s; }

/* Quem pediu menos movimento no sistema recebe menos movimento. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Seletor de área no topo do menu ──
   Separação de navegação entre análises e cadastros. Não é controle de
   acesso: as rotas continuam abertas até existir autenticação. */
.area-seletor {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    margin: 0.7rem 0.6rem 0.2rem;
    padding: 2px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 7px;
}

.area {
    background: none;
    border: none;
    border-radius: 5px;
    padding: 0.36rem 0.2rem;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-fraco);
    cursor: pointer;
    transition: color 0.16s, background-color 0.16s;
}

.area:hover:not(.ativa) { color: var(--text-muted); }

.area.ativa {
    background: var(--sinal);
    color: var(--tinta-sobre-sinal);
}

/* ==========================================================================
   IMPRESSÃO / CAPTURA
   --------------------------------------------------------------------------
   Uma página paisagem com o painel inteiro. O fundo escuro é mantido de
   propósito: a captura deve sair igual ao que está na tela, senão deixa de
   servir para mostrar a análise a outra pessoa.
   ========================================================================== */
@media print {
    @page {
        size: A4 landscape;
        margin: 6mm;
    }

    /* Sem isto o navegador remove fundos e a captura sai branca. */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Fora da captura: navegação, controles e o que não é análise. */
    .sidebar,
    .botao-camera,
    .limpar-tudo,
    .zoom,
    .botao-info,
    #blazor-error-ui { display: none !important; }

    main { margin-left: 0 !important; }
    .content { padding: 0 !important; }

    body::before, body::after { display: none !important; }

    /* Os filtros continuam visíveis: sem eles a captura não diz a que recorte
       os números pertencem. Só perdem o comportamento de barra fixa. */
    .barra-filtros {
        position: static !important;
        backdrop-filter: none !important;
        break-inside: avoid;
    }

    .painel, .indicador, .grade > * { break-inside: avoid; }

    /* Tudo numa página só. */
    .painel-visao { height: auto !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   Mapa em tela cheia
   ══════════════════════════════════════════════════════════════════════════

   Precisa estar aqui, e não no CSS da Visão geral, por duas razões:

   1) .content tem z-index: 1 e position: relative (logo acima neste arquivo),
      o que cria um contexto de empilhamento. Qualquer z-index de um filho —
      inclusive 60 ou 99999 — fica confinado a ele e nunca passa por cima da
      barra lateral. Quem tem que subir é o .content inteiro.
   2) O CSS da página é isolado e não alcança a .sidebar, que vive no
      MainLayout.

   A classe entra no body pelo mapa.js quando a tela cheia abre. */
body.mapa-cheio .content { z-index: 70; }
body.mapa-cheio .sidebar { display: none; }

/* O article mantém a margem da barra lateral mesmo com ela escondida; zerar
   evita a faixa vazia à esquerda do mapa. */
body.mapa-cheio .content { padding: 0 !important; }
body.mapa-cheio main { margin-left: 0 !important; }

/* Sem rolagem enquanto o mapa ocupa a tela. */
body.mapa-cheio { overflow: hidden; }