/* O admin do Django usa variáveis CSS (--border-color, --body-bg) que o Jazzmin
   não define, porque substitui a folha base. As regras que dependem delas — a
   borda do select2 do autocomplete, por exemplo — ficam com cor inválida e
   somem. Definir aqui conserta essas regras na origem, além das nossas. */
:root {
    --border-color: #ced4da;
    --body-bg: var(--bs-body-bg, #fff);
    --body-fg: var(--bs-body-color, #212529);
}

.main-sidebar, .sidebar {
    background-color: #001F3F !important;
}

.brand-link {
    background-color: #001F3F !important;
}

.wrapper, .content-wrapper {
    background-color: var(--bs-tertiary-bg, #f4f6f9);
}

#jazzy-navbar{
    background-color: #001F3F !important;
    color: white !important;
}

#jazzy-sidebar{
    background-color: #001F3F !important;
    color: white !important;
}

#jazzy-sidebar .nav-link {
    color: #ffffff !important;
}

#jazzy-sidebar .nav-link:hover {
    color: #007bff !important;
}

#jazzy-sidebar .nav-link.active {
    color: #ffffff !important;
}

#jazzy-sidebar .nav-link:focus {
    color: #ffffff !important;
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: #ffffff !important;
}

.navbar-nav {
    --bs-nav-link-color: #fff !important;
    --bs-nav-link-hover-color: #3399f3 !important;
    --bs-nav-link-disabled-color: #0000004d !important;
}

.app-footer > .float-end {
    display: none !important;
}


.bg-body-secondary {
    --bs-bg-opacity: 1;
    background-color: #ffffff !important;
}

.nca-alternar-tema { text-align: left; margin-top: .3rem; }
.nca-link-manual i { font-size: 1.2rem; }

[data-bs-theme="dark"] .wrapper,
[data-bs-theme="dark"] .content-wrapper,
[data-bs-theme="dark"] .app-main,
[data-bs-theme="dark"] .app-content,
[data-bs-theme="dark"] .bg-body-secondary {
    background-color: #212529 !important;
    color: #dee2e6;
}

[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .select2-dropdown {
    background-color: #343a40;
    color: #dee2e6;
    border-color: #495057;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-row select,
[data-bs-theme="dark"] .inline-group select,
[data-bs-theme="dark"] fieldset.module select,
[data-bs-theme="dark"] .related-widget-wrapper select,
[data-bs-theme="dark"] .select2-container .select2-selection {
    background-color: #343a40;
    color: #dee2e6;
    border-color: #495057 !important;
}

[data-bs-theme="dark"] .nca-tabela thead th {
    color: #dee2e6;
    background: #343a40;
    border-color: #495057;
}

[data-bs-theme="dark"] .nca-tabela tbody td {
    border-color: #495057;
}

[data-bs-theme="dark"] .nca-tabela tbody tr.nca-linha-ruim {
    background: #3a2525;
}

[data-bs-theme="dark"] .nca-alternar-tema {
    color: #dee2e6;
}

[data-bs-theme="dark"] .nca-alternar-tema:hover,
[data-bs-theme="dark"] .nca-alternar-tema:focus {
    color: #fff;
    background-color: rgba(255, 255, 255, .1);
}



@media (min-width: 992px) {
    body:not(.sidebar-collapse) .app-wrapper {
        grid-template-columns: 250px 1fr !important;
    }
    body.sidebar-collapse .app-wrapper {
        grid-template-columns: 0 1fr !important;
    }
    .app-sidebar {
        max-width: 250px !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }
}

@media (max-width: 991px) {
    body .app-wrapper {
        grid-template-rows: auto 1fr auto !important;
    }

    .app-header, #jazzy-navbar {
        height: max-content !important;
        max-height: 80px !important;
    }
}



/* --------------------------------------------------------------------------
   Largura dos campos nos formulários de cadastro.

   O admin dimensiona cada input pela classe do tipo do campo — vTextField sai
   com 20 caracteres, vURLField com 100, vIntegerField estreito — e a coluna
   fica com as bordas desalinhadas e o conteúdo cortado. Aqui todos passam a
   ocupar a coluna do Jazzmin (.form-group > .row > .col-sm-9), com um teto
   para não esticarem em tela larga.

   Os seletores usam .form-group porque é a estrutura que o Jazzmin gera;
   .form-row é do admin padrão e não existe nestas telas.
   -------------------------------------------------------------------------- */

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="url"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group select,
.form-group textarea,
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="url"],
.form-row input[type="password"],
.form-row input[type="number"],
.form-row select,
.form-row textarea {
    width: 100% !important;
    max-width: 36rem !important;
    box-sizing: border-box;
}

/* Campos de valor não ganham nada em ficar largos, e alinhados à direita
   ficam mais fáceis de comparar. */
.form-group input[type="number"],
.form-group input.vIntegerField,
.form-group input[name$="_minutes"],
.form-group input[name$="_tokens"] {
    max-width: 12rem !important;
    text-align: right;
}

/* Checkbox é a exceção: esticá-lo deixaria um alvo de clique gigante. */
.form-group input[type="checkbox"],
.form-row input[type="checkbox"] {
    width: auto !important;
    max-width: none !important;
}

/* Dentro de um inline a régua é a coluna, não a largura fixa. */
.inline-group .form-row input[type="text"],
.inline-group .form-row select,
.inline-group td input[type="text"],
.inline-group td select,
.inline-group td textarea {
    max-width: 100%;
    width: 100%;
}

/* Largura automática: com table-layout fixed as colunas são divididas em
   partes iguais e o seletor de usuário sai truncado, ainda que sobre espaço
   ao lado. */
.inline-group table {
    table-layout: auto;
    width: 100%;
}

/* Linhas compactas, conteúdo encostado à esquerda e alinhado pelo topo — sem
   isso os campos flutuam no meio de uma linha alta por causa do textarea. */
.inline-group .tabular td,
.inline-group .tabular th {
    padding: 0.35rem 0.5rem;
    vertical-align: top;
    text-align: left;
}

.inline-group .tabular td p,
.inline-group .tabular td .help-block,
.inline-group .tabular td .form-group {
    margin-bottom: 0;
}

/* A primeira coluna só guarda o link de edição; sem limite ela empurra as
   demais para a direita. */
.inline-group .tabular td.original {
    width: 1%;
    white-space: nowrap;
    padding-right: 0;
}

/* Os ícones de atalho ficam na mesma linha do campo, e não abaixo dele. */
.inline-group .related-widget-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
}

/* Um textarea de observação não precisa de mais que duas linhas visíveis. */
.inline-group td textarea {
    min-height: 2.6rem;
    height: 2.6rem;
}

/* Colunas de marcar, como Remover, ficam estreitas e centradas. */
.inline-group .tabular td.delete,
.inline-group .tabular th.column-DELETE {
    width: 1%;
    white-space: nowrap;
    text-align: center;
}


/* --------------------------------------------------------------------------
   Borda nos selects.

   O tema desenha borda em input e textarea, mas deixa o select só com a seta —
   dentro de um inline, onde ele fica ao lado de campos com borda, parece que
   não há campo ali.
   -------------------------------------------------------------------------- */

.form-row select,
.inline-group select,
fieldset.module select,
.related-widget-wrapper select {
    border: 1px solid #ced4da !important;
    border-radius: 0.25rem;
    background-color: #fff;
    padding: 0.25rem 0.5rem;
    min-height: calc(1.5em + 0.5rem + 2px);
}

/* Sem o foco visível, quem navega por teclado perde o rastro do campo. */
.form-row select:focus,
.inline-group select:focus,
fieldset.module select:focus {
    border-color: #80bdff !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    outline: none;
}

/* A altura do textarea dentro do inline precisa vencer a regra do tema, que
   usa a classe do próprio campo. */
.inline-group td textarea,
.inline-group textarea.vLargeTextField,
.inline-group td .vLargeTextField {
    min-height: 2.6rem !important;
    height: 2.6rem !important;
}


/* --------------------------------------------------------------------------
   Campos de segredo e áreas de JSON.
   -------------------------------------------------------------------------- */

/* O botão de ver/ocultar (custom_admin.js) entra ao lado do campo, e não
   embaixo. */
.nca-secret-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 32rem;
}

.nca-secret-wrapper input.nca-secret {
    flex: 1 1 auto;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.02em;
}

.nca-secret-wrapper .nca-ver-segredo {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Os mapeamentos são JSON longo: uma caixa baixa obriga a rolar dentro de um
   campo que já rola com a página. */
.form-row textarea[name^="es_mapping"],
fieldset.module textarea[name^="es_mapping"] {
    min-height: 14rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
}


/* --------------------------------------------------------------------------
   Borda no select2 (campos com autocomplete_fields).

   Aqui o <select> real fica escondido e quem aparece é um <span> do select2 —
   por isso a regra de borda do select não surtia efeito. O tema do admin
   desenha esse span sem borda, e ao lado de campos com borda ele some.
   -------------------------------------------------------------------------- */

/* Sem prefixo de tema: o Jazzmin inicializa com select2({width:'100%'}) e não
   passa theme, então o container sai como --default — e não o
   --admin-autocomplete que o Django usaria sozinho. */
.select2-container .select2-selection {
    border: 1px solid #ced4da !important;
    border-radius: 0.25rem !important;
    min-height: calc(1.5em + 0.5rem + 2px) !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    line-height: calc(1.5em + 0.5rem) !important;
    padding-left: 0.5rem;
}

.select2-container .select2-selection--single .select2-selection__arrow {
    height: calc(1.5em + 0.5rem + 2px) !important;
}

.select2-container--open .select2-selection,
.select2-container--focus .select2-selection {
    border-color: #80bdff !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* O select2 calcula a largura em JS e costuma sair curto dentro de um inline. */
.inline-group .select2-container,
.form-group .select2-container {
    max-width: 36rem;
}

/* ---------------------------------------------------------------------------
   Telas de Insights: tabelas de leitura.

   Ficam aqui, e não num <style> por template, porque a pílula de aderência e a
   bolinha de estado aparecem em quatro telas — duplicá-las garantia que uma
   ficaria para trás numa mudança de paleta.

   Os três estados (bom/atenção/ruim) são decididos no servidor por
   `cor_da_aderencia`, a partir dos limiares do settings. O CSS só os pinta.
   --------------------------------------------------------------------------- */

.nca-tabela { font-size: .8125rem; }

/* O cabeçalho precisa de um fundo próprio.

   Sem ele o cinza do texto era a única diferença entre título e dado, e numa
   tabela de nomes em caixa alta — a de agentes — isso não chega a ser uma
   diferença: a primeira linha lia como mais um registro. O fundo também é o que
   ancora o cabeçalho quando a tabela rola dentro do cartão. */
.nca-tabela thead th {
    font-weight: 600;
    font-size: .6875rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6b7280;
    background: #f7f8fa;
    border-top: none;
    border-bottom: 1px solid #e5e7eb;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

/* Na tabela que rola dentro do cartão o cabeçalho fica preso no topo: são 33
   perguntas, e sem isto a coluna do número perde o nome na segunda rolagem. */
/* Cabeçalho preso no topo de qualquer tabela que role dentro do cartão: sem
   isto a coluna perde o nome na segunda rolagem. O fundo vem de `thead th`. */
.nca-rolagem-10 .nca-tabela thead th { position: sticky; top: 0; z-index: 1; }

/* Uma altura só para todo painel de lista: campanhas e agentes da HOME, script
   e agentes do lote. O que passar disso rola.

   **Uma altura, e não uma contagem de linhas por tabela.** A medida nasceu como
   "dez linhas" e virou duas alturas, porque a tabela do script tem o padding
   mais apertado que a de agentes. O resultado foi um vão branco: os dois
   cartões ficam lado a lado com `h-100`, o mais alto manda na linha, e a tabela
   mais baixa parava antes do fim do próprio cartão. Com uma altura só, a tabela
   compacta cabe mais linhas na mesma caixa — que é exatamente o que ser
   compacta deveria significar.

   A altura é a soma das medidas reais da tabela arejada, e não um número
   redondo. Duas parcelas:

   - o cabeçalho, que entra na conta porque é `sticky` DENTRO da área de
     rolagem: ele ocupa o topo o tempo todo. Sem somá-lo, as dez linhas viram
     nove e um pedaço, que é o erro que a medição pegou.
   - as dez linhas, com os .6rem de padding em cima e embaixo da
     `.nca-tabela-arejada`, o texto de .8125rem com a entrelinha 1.5 do
     Bootstrap, e 1px de divisória.

   Mudar qualquer um desses valores e esquecer daqui muda a altura sem ninguém
   perceber — por isso os fatores estão escritos, e não resolvidos.

   `max-height`, e não `height`: com uma campanha só, altura fixa deixaria 400px
   de vazio dentro da área de rolagem, com barra e tudo. Os cartões seguem
   alinhados pelo `h-100`, e o vazio fica fora da tabela. */
.nca-rolagem-10 {
    max-height: calc((1rem + 1.5 * .6875rem + 1px)
                     + 10 * (1.2rem + 1.5 * .8125rem + 1px));
    overflow-y: auto;
}

.nca-tabela tbody td {
    padding-top: .45rem;
    padding-bottom: .45rem;
    vertical-align: middle;
    border-top: 1px solid #f1f2f4;
}

/* Linhas mais altas para a tabela que tem poucas.
   A de agentes vem com oito linhas ao lado de uma de 33 perguntas: no aperto
   padrão ela ficava espremida no topo com meio cartão vazio embaixo. O aperto
   existe para tabela longa, onde cada pixel por linha custa uma rolagem. */
.nca-tabela-arejada tbody td { padding-top: .6rem; padding-bottom: .6rem; }
.nca-tabela-arejada thead th,
.nca-tabela-arejada tbody td { padding-left: .75rem; padding-right: .75rem; }

/* A linha inteira ganha um fundo levíssimo quando a pergunta vai mal: o olho
   acha a linha antes de ler o número. */
.nca-tabela tbody tr.nca-linha-ruim { background: #fdf3f3; }
.nca-tabela tbody tr.nca-linha-ruim td:first-child { color: #c0392b; font-weight: 600; }

/* Ícone de download do relatório. Verde do produto, e cresce um pouco no hover
   — o alvo tem 16px e a linha da tabela é apertada. */
.nca-baixar { color: #12805c; font-size: 1.05rem; }
.nca-baixar:hover { color: #0f6b4d; }

/* Contagens: o zero fica apagado para o número que importa saltar. */
.nca-sim { color: #12805c; font-weight: 600; }
.nca-nao { color: #c0392b; font-weight: 600; }
.nca-zero { color: #c3c7cd; font-weight: 400; }

/* Pílula de aderência. Fundo tingido em vez de cor chapada: é um valor de
   leitura, não um alerta. */
.nca-pilula {
    display: inline-block;
    padding: .1rem .45rem;
    border-radius: .35rem;
    font-weight: 600;
    font-size: .75rem;
    white-space: nowrap;
}
.nca-pilula-bom     { background: #e6f4ef; color: #0f6b4d; }
.nca-pilula-atencao { background: #fdf3d6; color: #8a6d00; }
.nca-pilula-ruim    { background: #fbe9e7; color: #b03024; }

/* Bolinha de estado ao lado do percentual. Mesmo corte dos cartões do topo
   (NCA_ADERENCIA_BOA), calculado no servidor para os dois não divergirem.

   As três moravam em <style> repetido na HOME e na tela do lote, e só a `ruim`
   estava aqui — então a tabela de agentes, que é a terceira a usá-las, teria de
   ganhar uma quarta cópia. */
.nca-ponto { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%;
             margin-right: .4rem; vertical-align: middle; }
.nca-ponto-bom     { background: #12805c; }
.nca-ponto-atencao { background: #f7bd19; }
.nca-ponto-ruim    { background: #c0392b; }

/* As `.nca-valor-*`, que pintavam o próprio percentual, saíram: a cor mora na
   bolinha e no ícone, e o número ficou neutro em toda tela. Onde as duas
   conviviam — a tabela de agentes — a mesma informação era dada duas vezes, e
   era justamente onde o amarelo obrigava a usar um segundo tom para o texto ser
   legível. Com o número neutro, o problema deixa de existir. */


/* ---------------------------------------------------------------------------
   Tela de login.

   O `.login-logo` do AdminLTE já centraliza o conteúdo, mas o logo da Robbu é
   mais largo que a caixa de login: sem limite ele começa na borda esquerda e
   transborda para a direita, e o que se vê é um logo deslocado em relação ao
   card. Caber na caixa é o que o faz de fato centralizar.
   --------------------------------------------------------------------------- */
.login-logo img,
.register-logo img { max-width: 100%; height: auto; }


/* ---------------------------------------------------------------------------
   Cartão de performance e rótulo de métrica.

   Nasceram no detalhe da interação e passaram a valer também na página do
   lote — mesma pergunta, recortes diferentes. Ficam aqui para as duas telas
   não divergirem na próxima mexida.
   --------------------------------------------------------------------------- */
/* 12px em caixa alta. Os dois vizinhos foram testados na tela e descartados.

   A 10px o rótulo virava letra miúda — o tamanho em que se põe aviso legal, não
   o nome do número que está logo abaixo. A 13px a caixa alta teria de sair
   junto, porque ela é o recurso que dá presença a texto pequeno e em texto
   grande faz o contrário; sem ela o card perde o ar de painel e o rótulo passa
   a disputar a leitura com o próprio número.

   12px lê de longe e continua um degrau abaixo. O que mantém a hierarquia é o
   tom claro e o contraste de caixa, não o tamanho.

   O tracking é curto de propósito: `.06em` fazia sentido a 10px, onde a letra
   precisa de ar; a 12px ele só alarga "Problemas na chamada" até a borda. */
.nca-rotulo { font-size:.75rem; letter-spacing:.04em; text-transform:uppercase;
              color:#8b93a7; font-weight:600; line-height:1.4; }
.nca-barra { height:.35rem; border-radius:.2rem; background:#eceef1; overflow:hidden; }
.nca-barra > span { display:block; height:100%; }
.nca-metrica { font-size:1.6rem; font-weight:700; line-height:1; }
.nca-metrica-menor { font-size:1.35rem; font-weight:700; line-height:1; }

/* Ícone do cartão: cinza quando a contagem é zero, na cor do estado quando não.
   Acender todos faria a tela virar alarme e tirar o peso de onde ele importa.

   É o ícone que carrega a cor, e não o número — o contrário do que estava. No
   número, o amarelo de atenção mede 1.71:1 sobre branco e precisava de contorno
   para ser lido; aqui a cor acompanha uma forma que já diferencia os cartões,
   então ela pode ser viva sem precisar ser legível sozinha. */
.nca-icone-cartao { color:#aeb4c0; margin-right:.35rem; font-size:1rem;
                    vertical-align:-.1em; }
.nca-icone-bom     { color:#12805c; }
.nca-icone-atencao { color:#e0a800; }
.nca-icone-ruim    { color:#c0392b; }

/* Cabeçalhos de painel, no mesmo quadradinho nas três telas. As quatro últimas
   nasceram no <style> do detalhe; a tela do lote passou a usá-las e voltar a
   copiá-las lá dentro daria dois lugares para mudar a mesma cor. */
.nca-icone-grafico     { background:#e8eefb; color:#2d6cb5; }
.nca-icone-lotes       { background:#eef0f2; color:#5b6472; }
.nca-icone-ranking     { background:#e6f4ef; color:#12805c; }
.nca-icone-ia          { background:#f0e9fb; color:#7a4fc0; }
.nca-icone-nuvem       { background:#e6f4ef; color:#12805c; }
.nca-icone-transcricao { background:#e8eefb; color:#2d6cb5; }
.nca-icone-auditoria   { background:#fff1e6; color:#e0761b; }
.nca-icone-falha       { background:#fbe9e7; color:#c0392b; }

/* As duas métricas do cartão de performance ocupam a altura toda, distribuídas.
   Com tamanhos diferentes e o conteúdo preso ao topo, sobrava um vão branco no
   pé do cartão e o silêncio parecia um dado de segunda categoria. */
.nca-performance .nca-metrica-menor { font-size:1.6rem; }
/* As duas métricas dividem a altura que sobra abaixo do título, com folga entre
   elas. Antes o conteúdo ficava preso ao topo e sobrava um vão branco no pé. */
.nca-performance { display:flex; flex-direction:column; }
.nca-performance-dados { flex:1; display:flex; flex-direction:column;
                         justify-content:space-evenly; gap:.5rem; padding-top:.75rem; }

/* O quadradinho do ícone de cabeçalho.
   Estava só no <style> da tela de detalhe, então na HOME os ícones saíam sem
   fundo e colados no título — que é o espaço que faltava. */
.nca-icone { display:inline-block; width:1.35rem; height:1.35rem; line-height:1.35rem;
             text-align:center; border-radius:.3rem; margin-right:.45rem;
             background:#e8eefb; color:#2d6cb5; font-size:.7rem; vertical-align:middle; }

/* O número em "atenção" é amarelo de verdade, contornado de escuro.
   O vivo sobre branco mede 1.71:1 e sozinho quase some; o contorno escuro
   devolve a legibilidade sem trocar a cor por outra. É o inverso do que se faz
   normalmente — pinta-se a borda, não o miolo — e funciona porque aqui a cor é
   informação: ela diz que o número está na faixa de atenção.

   Restou só na aderência e na taxa de silêncio do cartão de performance: são os
   dois números da tela sem um símbolo ao lado para carregar a cor. Em todo o
   resto ela foi para o ícone ou para a bolinha, e o número ficou neutro.

   `!important` no color porque a cor do estado chega inline, do servidor. */
.nca-metrica-atencao {
    color: #f7bd19 !important;
    -webkit-text-stroke: .5px #8a6d00;
    paint-order: stroke fill;
}