/*
 |----------------------------------------------------------------------------
 | Venture Signal — tema do produto
 |----------------------------------------------------------------------------
 |
 | Carregado DEPOIS do build do Velzon (ver layouts/head-css). Sobrescreve os
 | tokens --vz-* em vez de recompilar o SCSS: mantém a mudança contida e
 | reversível. A marca (marinho, azul-petróleo, ciano) entra aqui.
 |
 | Papéis das cores (ver a proposta de UX):
 |   marinho  #163a5f  títulos, texto forte, nota alta
 |   petróleo #0d7c94  AÇÃO: botão primário, links, item ativo
 |   ciano    #22c7dc  só destaque: barra do item ativo, progresso
 | Verde e vermelho vivem só em estado (sucesso/erro), nunca na nota.
 */

:root {
    /* Marca */
    --radar-navy: #163a5f;
    --radar-teal: #0d7c94;
    --radar-teal-strong: #0a6478;
    --radar-cyan: #22c7dc;
    --radar-teal-soft: #d7f0f4;
    --radar-teal-soft-ink: #0a5f72;

    /* Estado */
    --radar-ok-bg: #dcf5e7;   --radar-ok-ink: #1b6b3a;
    --radar-warn-bg: #fdf0d5; --radar-warn-ink: #8a5a00;
    --radar-err-bg: #fde2e1;  --radar-err-ink: #a12622;

    /* Ação primária = petróleo (antes era o mesmo navy do secundário) */
    --vz-primary: #0d7c94 !important;
    --vz-primary-rgb: 13, 124, 148 !important;
    --vz-primary-text-emphasis: #0a6478 !important;
    --vz-link-color: #0d7c94 !important;
    --vz-link-color-rgb: 13, 124, 148 !important;
    --vz-link-hover-color: #0a6478 !important;

    /* Títulos em marinho */
    --vz-heading-color: #163a5f !important;
}

/*
 | Escada de superfícies — é a MESMA do kit (CLAUDE.md, L0..L2), e a que a
 | proposta desenha. A página é o nível mais claro e o card sobe um degrau:
 |
 |   L0 #ffffff  página / conteúdo
 |   L1 #f3f5f8  card, sidebar, topbar
 |   L2 #e7eaef  cabeçalho de tabela, etiqueta, ícone de ferramenta
 |
 | Não inverta (página cinza + card branco): além de contrariar a escada
 | documentada, o card deixa de se destacar do fundo e a tela achata.
 |
 | Tudo aqui é do tema CLARO e vive sob `:root:not([data-bs-theme="dark"])`.
 | Sem esse escopo o valor claro venceria o escuro: `dark-mode.css` declara a
 | versão dark em `[data-bs-theme="dark"]` — mesma especificidade, mesmo
 | elemento — e este arquivo carrega DEPOIS, então ganharia a ordem de fonte
 | mesmo com `!important` do outro lado. O tema escuro ficava com fundo claro.
 */
:root:not([data-bs-theme="dark"]) {
    --vz-body-bg: #ffffff;
    --vz-body-bg-rgb: 255, 255, 255;
    --vz-header-bg: #f3f5f8;
    --vz-vertical-menu-bg: #f3f5f8;
}

/*
 | Card = L1 (#f3f5f8) com borda, sem sombra.
 |
 | ATENÇÃO: `--vz-card-bg` é declarada DENTRO da regra `.card` do Bootstrap
 | (`var(--vz-secondary-bg)`), então redefini-la no `:root` não surte efeito
 | nenhum — a declaração local sempre vence. E o tema ainda força `border: 0`
 | no `.card`. Por isso a correção mora aqui, no próprio seletor, e repete
 | background/border explicitamente em vez de confiar só no token.
 */
.card { border-width: 1px !important; border-style: solid !important; box-shadow: none !important; border-radius: 4px; }
.card > .card-header { background-color: transparent; border-bottom: 1px solid var(--vz-card-border-color); }

:root:not([data-bs-theme="dark"]) .card {
    --vz-card-bg: #f3f5f8;
    --vz-card-border-color: #e3e7ec;
    --vz-card-cap-bg: transparent;
    background-color: #f3f5f8;
    border-color: #e3e7ec !important;
}

[data-bs-theme="dark"] .card {
    --vz-card-border-color: var(--kit-d-hover);
    border-color: var(--kit-d-hover) !important;
}

/* Cabeçalho de tabela é L2 */
:root:not([data-bs-theme="dark"]) .table-light { --vz-table-bg: #e7eaef !important; --vz-table-color: #3d4b5c !important; }

/* Raio de 4px nos controles, como no desenho */
.btn, .form-control, .form-select, .alert { border-radius: 4px; }

/*
 | Barra lateral
 |
 | A proposta desenha o menu como uma coluna cinza-fria de 240px sobre conteúdo
 | branco, com quatro itens de primeiro nível (cada um com ícone) e o item ativo
 | em branco com uma barra ciano. O Velzon entrega tudo isso por token, então
 | aqui é só troca de token — nada de reescrever o componente.
 */
:root { --vz-vertical-menu-width: 240px; }

:root:not([data-bs-theme="dark"]) {
    --vz-vertical-menu-item-color: #3d4b5c;
    --vz-vertical-menu-item-hover-color: #163a5f;
    --vz-vertical-menu-item-active-color: #163a5f;
    --vz-vertical-menu-item-active-bg: #ffffff;
}

:root:not([data-bs-theme="dark"]) .app-menu.navbar-menu { border-right: 1px solid #e3e7ec; }
[data-bs-theme="dark"] .app-menu.navbar-menu { border-right: 1px solid var(--kit-d-hover); }

.navbar-menu .navbar-nav .nav-item > .nav-link.menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin: 1px 12px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
}

:root:not([data-bs-theme="dark"]) .navbar-menu .navbar-nav .nav-item > .nav-link.menu-link:hover {
    background-color: #e7eaef;
    color: var(--radar-navy);
}
[data-bs-theme="dark"] .navbar-menu .navbar-nav .nav-item > .nav-link.menu-link:hover {
    background-color: var(--kit-d-hover);
}

/* Item ativo: um degrau acima do menu + a barra ciano — o único uso do ciano
   na navegação. No claro sobe para branco; no escuro, para a superfície.
   A barra é um ::after com raio próprio (pílula), não um `box-shadow: inset`:
   o inset herda o raio do item (4px) e sai praticamente reto. Usa ::after
   porque o ::before já é do tema (o traço dos sub-itens). */
.navbar-menu .navbar-nav .nav-item > .nav-link.menu-link { position: relative; }
.navbar-menu .navbar-nav .nav-item > .nav-link.menu-link.active::after {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 5px;
    width: 3px;
    border-radius: 999px;
    background: var(--radar-cyan);
}
:root:not([data-bs-theme="dark"]) .navbar-menu .navbar-nav .nav-link.active {
    background-color: #ffffff;
    color: var(--radar-navy);
}
[data-bs-theme="dark"] .navbar-menu .navbar-nav .nav-link.active {
    background-color: var(--kit-d-raised);
}

/* O ícone vem do <x-icon> com 15px inline; a proposta usa 18px */
.navbar-menu .navbar-nav .nav-item > .nav-link.menu-link > svg,
.navbar-menu .navbar-nav .nav-item > .nav-link.menu-link > i:not(.sidebar-toggle-icon) {
    width: 18px !important;
    height: 18px !important;
    margin-right: 0 !important;
    flex-shrink: 0;
}

/* O rodapé (Créditos, Configurações) usa a mesma régua da lista */
.app-menu .sidebar-footer { background-color: var(--vz-vertical-menu-bg); }
:root:not([data-bs-theme="dark"]) .app-menu .sidebar-footer { border-top: 1px solid #e3e7ec; }
[data-bs-theme="dark"] .app-menu .sidebar-footer { border-top: 1px solid var(--kit-d-hover); }

/*
 | Botões: primário e secundário PRECISAM ser distinguíveis.
 |
 | O `custom.min.css` do kit fixa `--vz-btn-bg: #053c5e !important` nos DOIS —
 | primário e secundário saem exatamente iguais, que é o problema levantado na
 | revisão de UX. Como lá tem `!important`, aqui também precisa: sem isso o
 | token perde mesmo carregando depois.
 |
 |   primário    petróleo sólido  = a ação da tela
 |   secundário  branco com borda = ação esporádica, não compete pela atenção
 */
.btn-primary {
    --vz-btn-color: #fff !important;
    --vz-btn-bg: #0d7c94 !important;
    --vz-btn-border-color: #0d7c94 !important;
    --vz-btn-hover-color: #fff !important;
    --vz-btn-hover-bg: #0a6478 !important;
    --vz-btn-hover-border-color: #0a6478 !important;
    --vz-btn-active-color: #fff !important;
    --vz-btn-active-bg: #0a6478 !important;
    --vz-btn-active-border-color: #0a6478 !important;
}

:root:not([data-bs-theme="dark"]) .btn-secondary {
    --vz-btn-color: #163a5f !important;
    --vz-btn-bg: #ffffff !important;
    --vz-btn-border-color: #cbd3db !important;
    --vz-btn-hover-color: #163a5f !important;
    --vz-btn-hover-bg: #e7eaef !important;
    --vz-btn-hover-border-color: #cbd3db !important;
    --vz-btn-active-color: #163a5f !important;
    --vz-btn-active-bg: #e7eaef !important;
    --vz-btn-active-border-color: #cbd3db !important;
}

[data-bs-theme="dark"] .btn-primary {
    --vz-btn-bg: #0d7c94 !important;
    --vz-btn-border-color: #0d7c94 !important;
    --vz-btn-hover-bg: #22c7dc !important;
    --vz-btn-hover-border-color: #22c7dc !important;
    --vz-btn-hover-color: #06222b !important;
}
[data-bs-theme="dark"] .btn-secondary {
    --vz-btn-color: #e6edf5 !important;
    --vz-btn-bg: var(--kit-d-raised) !important;
    --vz-btn-border-color: var(--kit-d-hover) !important;
    --vz-btn-hover-color: #e6edf5 !important;
    --vz-btn-hover-bg: var(--kit-d-hover) !important;
    --vz-btn-hover-border-color: var(--kit-d-hover) !important;
    --vz-btn-active-bg: var(--kit-d-hover) !important;
    --vz-btn-active-color: #e6edf5 !important;
    --vz-btn-active-border-color: var(--kit-d-hover) !important;
}

/*
 | Nota da ideia — UMA cor só, mais escura conforme sobe. Nota é grandeza:
 | não usa a escala semântica (sucesso/aviso/erro). Antes, as melhores ideias
 | apareciam em amarelo/vermelho, a cor de erro.
 */
/* Altura fixa + align-self: dentro de um flex/td o badge esticava na vertical
   e virava um bloco alto ao lado do título, em vez da pastilha da proposta. */
.radar-score { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; min-width: 34px; height: 24px; padding: 0 7px; border-radius: 4px; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.radar-score-0 { background: #e7eaef; color: #5b6b7c; }
.radar-score-1 { background: var(--radar-teal-soft); color: var(--radar-teal-soft-ink); }
.radar-score-2 { background: var(--radar-teal); color: #fff; }
.radar-score-3 { background: var(--radar-navy); color: #fff; }

/* Chip de estágio/estado: cor + ícone, nunca só a cor */
.radar-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.radar-chip svg, .radar-chip i { font-size: 12px; }
.radar-chip-explorando { background: #e7eaef; color: #3d4b5c; }
.radar-chip-validando  { background: var(--radar-teal-soft); color: var(--radar-teal-soft-ink); }
.radar-chip-construindo{ background: var(--radar-ok-bg); color: var(--radar-ok-ink); }
.radar-chip-parado     { background: var(--radar-warn-bg); color: var(--radar-warn-ink); }
.radar-chip-descartado { background: var(--radar-err-bg); color: var(--radar-err-ink); }
.radar-chip-ok         { background: var(--radar-ok-bg); color: var(--radar-ok-ink); }
.radar-chip-fila       { background: var(--radar-warn-bg); color: var(--radar-warn-ink); }
.radar-chip-erro       { background: var(--radar-err-bg); color: var(--radar-err-ink); }

/* Faixa de sugestão (aconselha, não trava) */
.radar-hint { background: var(--radar-teal-soft); border: 1px solid #b6e2ea; border-radius: 4px; }
.radar-hint-ink { color: var(--radar-teal-soft-ink); }

/* Barra de progresso fininha com o ciano */
.radar-progress { height: 6px; background: #e7eaef; border-radius: 999px; overflow: hidden; }
.radar-progress > span { display: block; height: 100%; background: var(--radar-cyan); border-radius: 999px; }

/* Passos do projeto */
.radar-step-num { width: 28px; height: 28px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.radar-step-num.on { background: var(--radar-teal); color: #fff; }
.radar-step-num.off { background: #e7eaef; color: #5b6b7c; }

/*
 | Toggle de status binário (ativo/inativo).
 |
 | Regra do CLAUDE.md que ainda não existia em lugar nenhum: ligado é VERDE,
 | desligado é cinza — nunca a cor primária, que aqui virava um navy idêntico
 | ao dos botões e não dizia "ligado". Escopado em `.form-switch` para não
 | pintar checkbox e radio comuns (o painel de decisão usa radio).
 */
.form-switch .form-check-input:checked {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
}
.form-switch .form-check-input:not(:checked) {
    background-color: #d6d8db !important;
    border-color: #adb5bd !important;
}
[data-bs-theme="dark"] .form-switch .form-check-input:checked {
    background-color: #2fb344 !important;
    border-color: #2fb344 !important;
}
[data-bs-theme="dark"] .form-switch .form-check-input:not(:checked) {
    background-color: #3b3f48 !important;
    border-color: #4a4f58 !important;
}

/* Aba ativa: sublinhado ciano (o realce da marca), rótulo em marinho.
   Sem o !important o tema devolve o navy do custom.min.css. */
.nav-tabs-custom .nav-link.active {
    border-bottom-color: var(--radar-cyan) !important;
    color: var(--radar-navy) !important;
}

/* Card "chapa branca": sobe um degrau sobre o card cinza. Usado no stepper
   (mapa da tela) e no painel de decisão (a ação que fecha o projeto). */
:root:not([data-bs-theme="dark"]) .card.radar-card-plain { background-color: #ffffff; }
[data-bs-theme="dark"] .card.radar-card-plain { background-color: var(--kit-d-raised); }

/* Ferramenta em destaque na fase atual */
.radar-tool-row { border-bottom: 1px solid var(--vz-border-color); }
/* A ferramenta que o produto sugere agora sobe um degrau — é o destaque
   da fase, sem travar nenhuma das outras. */
:root:not([data-bs-theme="dark"]) .radar-tool-row-on { background: #ffffff; }
[data-bs-theme="dark"] .radar-tool-row-on { background: var(--kit-d-raised); }
.radar-tool-row:last-child { border-bottom: 0; }
.radar-tool-ic { width: 34px; height: 34px; border-radius: 6px; background: #e7eaef; color: var(--radar-navy); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Contador ao lado do item de menu (5 novas, 2 p/ decidir) */
.radar-navcount { margin-left: auto; background: var(--radar-teal-soft); color: var(--radar-teal-soft-ink); font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; line-height: 1.5; white-space: nowrap; }
/* Saldo de créditos no rodapé: pílula neutra, não um contador de trabalho */
.radar-navcount-plain { background: #ffffff; color: var(--radar-navy); border: 1px solid #dfe3e8; }

/* Abas segmentadas (Ideias): pílula branca sobre trilho cinza, com o número
   junto do rótulo. Substitui as abas sublinhadas do tema nessa tela. */
.radar-seg { display: inline-flex; background: #e7eaef; border-radius: 4px; padding: 3px; gap: 2px; }
.radar-seg a { padding: 6px 12px; border-radius: 3px; color: #3d4b5c; font-weight: 500; font-size: 13px; text-decoration: none; white-space: nowrap; }
.radar-seg a:hover { color: var(--radar-navy); }
.radar-seg a.active { background: #ffffff; color: var(--radar-navy); font-weight: 600; }
.radar-seg a .n { color: var(--radar-teal-soft-ink); }
.radar-seg a.active .n { color: var(--radar-teal-soft-ink); }

/* Cartão aninhado dentro de um card (projeto no Início) e faixas de rodapé:
   sobem um degrau em relação ao card. Nunca use `bg-white`/#fff direto — some
   no tema escuro. */
.radar-subcard { border-radius: 4px; border: 1px solid var(--vz-border-color); }
:root:not([data-bs-theme="dark"]) .radar-subcard,
:root:not([data-bs-theme="dark"]) .radar-strip { background: #ffffff; border-color: #e3e7ec; }
[data-bs-theme="dark"] .radar-subcard,
[data-bs-theme="dark"] .radar-strip { background: var(--kit-d-raised); border-color: var(--kit-d-hover); }

/* Etiqueta neutra (categoria, tipo de fonte) */
.radar-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 4px; background: #e7eaef; color: #3d4b5c; font-size: 11px; font-weight: 600; white-space: nowrap; }

/* Anel de "ainda lendo": o mesmo giro fino da proposta, sem virar spinner do BS */
.radar-ring { width: 14px; height: 14px; border-radius: 999px; border: 2px solid var(--radar-cyan); border-right-color: transparent; display: inline-block; animation: radar-spin 1s linear infinite; flex-shrink: 0; }
@keyframes radar-spin { to { transform: rotate(360deg); } }

/* Passo do projeto: barra de progresso curta à direita do rótulo */
.radar-step-bar { width: 56px; height: 6px; background: #e7eaef; border-radius: 999px; overflow: hidden; flex-shrink: 0; }
.radar-step-bar > span { display: block; height: 100%; background: var(--radar-teal); }

/* Opção de decisão: rótulo com borda que acende quando marcada */
.radar-choice { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #dfe3e8; border-radius: 4px; background: #f3f5f8; cursor: pointer; margin: 0; }
.radar-choice:hover { border-color: #cbd3db; }
.radar-choice input { margin: 0; }
.radar-choice:has(input:checked) { border-color: var(--radar-teal); background: var(--radar-teal-soft); font-weight: 600; color: var(--radar-teal-soft-ink); }

[data-bs-theme="dark"] {
    --vz-primary: #22c7dc !important;
    --vz-primary-rgb: 34, 199, 220 !important;
    --vz-link-color: #4fd6e6 !important;
    --vz-link-hover-color: #7ee2ee !important;
    --vz-heading-color: #e6edf5 !important;

    /*
     | "Texto forte" inverte no escuro.
     |
     | As views escrevem `color: var(--radar-navy)` direto no style (título de
     | ideia, nome de projeto, rótulo de ferramenta). Redefinir a variável aqui
     | conserta TODAS de uma vez — sem isso o marinho fica sobre o fundo escuro
     | e o texto some. Quem usa o marinho como FUNDO precisa de regra própria
     | logo abaixo, porque a variável agora é clara.
     */
    --radar-navy: #e6edf5;
    --radar-teal-soft: #123e49;
    --radar-teal-soft-ink: #7fdcea;
    --radar-ok-bg: #10331f;   --radar-ok-ink: #6ede9d;
    --radar-warn-bg: #33280d; --radar-warn-ink: #e8bf63;
    --radar-err-bg: #3a1a19;  --radar-err-ink: #f0908b;
}

/* Usos do marinho como FUNDO (a variável virou clara acima) */
[data-bs-theme="dark"] .radar-score-0 { background: #27313f; color: #9fb0c0; }
[data-bs-theme="dark"] .radar-score-1 { background: #123e49; color: #7fdcea; }
[data-bs-theme="dark"] .radar-score-2 { background: #0d7c94; color: #fff; }
[data-bs-theme="dark"] .radar-score-3 { background: #22c7dc; color: #06222b; }
[data-bs-theme="dark"] .radar-tool-ic { background: #27313f; color: #cfe6f2; }

/* Superfícies L2/L3 dos componentes do Radar no escuro */
[data-bs-theme="dark"] .radar-tag { background: var(--kit-d-raised); color: #b7c4d2; }
[data-bs-theme="dark"] .radar-chip-explorando { background: var(--kit-d-raised); color: #b7c4d2; }
[data-bs-theme="dark"] .radar-seg { background: var(--kit-d-raised); }
[data-bs-theme="dark"] .radar-seg a { color: #b7c4d2; }
[data-bs-theme="dark"] .radar-seg a.active { background: var(--kit-d-hover); color: #e6edf5; }
[data-bs-theme="dark"] .radar-progress,
[data-bs-theme="dark"] .radar-step-bar { background: var(--kit-d-hover); }
[data-bs-theme="dark"] .radar-step-num.off { background: var(--kit-d-hover); color: #9fb0c0; }
[data-bs-theme="dark"] .radar-choice { background: var(--kit-d-raised); border-color: var(--kit-d-hover); }
[data-bs-theme="dark"] .radar-choice:has(input:checked) { background: #123e49; border-color: var(--radar-teal); color: #7fdcea; }
[data-bs-theme="dark"] .radar-hint { background: #123e49; border-color: #1c5a6b; }
[data-bs-theme="dark"] .radar-navcount-plain { background: var(--kit-d-raised); color: #e6edf5; border-color: var(--kit-d-hover); }
[data-bs-theme="dark"] .radar-tool-row { border-bottom-color: var(--kit-d-hover); }