/*
 * Formulario: rotulo e campo so leitura, em todo o sistema (divergencia 799); rotulo de
 * checkbox habilitado (1035); os niveis de aba da nota fiscal (1040), com o contador e o ponto
 * (1041); a linha rotulo/valor dos totais da nota fiscal (1043).
 *
 * Decisao do usuario em 13/09/2026, na `Transferência entre depósitos de Estoque`: o
 * `.form-label` do tema (peso 500, `gray-800`, 1.05 rem) pesava como negrito, e os sete
 * campos `readonly` da tela eram iguais aos digitaveis. As duas regras valem para todas
 * as telas — uma so aqui geraria inconsistencia.
 *
 * `:disabled` NAO entra: e outro estado, e o tema ja o desenha em `gray-200` com texto
 * `gray-500`. `form-control-plaintext` tambem fica de fora — e o campo que se desenha
 * como texto (o bloco resumo daquela tela), sem fundo nem borda.
 *
 * Sem cor literal: tudo sai de `--bs-gray-*`, entao o modo escuro vem pronto do Metronic.
 */

.form-label {
    font-weight: 400;
    font-size: 0.95rem;
    color: var(--bs-gray-700);
    margin-bottom: 0.35rem;
}

.form-control[readonly]:not(.form-control-plaintext) {
    background-color: var(--bs-gray-100);
    border-color: var(--bs-gray-200);
    color: var(--bs-gray-700);
}

/*
 * Rotulo de checkbox e radio habilitado na cor do texto (divergencia 1035).
 *
 * O tema pinta **todo** `.form-check-label` de `gray-500` (`style.bundle.css:2648`) — o
 * mesmo tom que o desabilitado ganha somando `opacity: .5` (`:2643`). Habilitado e
 * desabilitado ficavam quase iguais: no `Cabeçalho` da nota fiscal a pendente (editavel) e a
 * emitida (travada) pareciam a mesma tela. No VCL o `TCheckBox` habilitado tem texto preto e
 * o desabilitado, cinza.
 *
 * Habilitado vai para `gray-800`; o desabilitado volta ao `gray-500` do tema, com a opacidade
 * de la (a regra do bundle continua valendo). Sistema inteiro, nenhuma view muda. Os estados
 * de validacao (`is-valid`/`is-invalid`, `:3043`/`:3133`) tem especificidade maior e ficam.
 */
.form-check-label {
    color: var(--bs-gray-800);
}

.form-check-input:disabled ~ .form-check-label,
.form-check-input[disabled] ~ .form-check-label {
    color: var(--bs-gray-500);
}

/*
 * Secao, bloco resumo e saldo de lookup (divergencias 798 e 805).
 *
 * Nasceram na `Transferência entre depósitos de Estoque` (798), como `<style>` da propria
 * view; a `Entrada e Saída de Itens` (805) e a segunda tela com o mesmo desenho, entao as
 * tres classes sobem para ca (secao 3 do `CLAUDE.md`: compartilha-se o que dois lugares
 * usam). Sao o molde do formulario de movimento redesenhado:
 *
 *   .form-secao    titulo de grupo em caixa alta, com a linha embaixo
 *   .form-resumo   bloco `gray-100` de campos so leitura desenhados como texto
 *                  (`form-control-plaintext`, para o `data-lookup-campo` seguir escrevendo em `.value`)
 *   .form-saldo    a linha curta de saldo abaixo de um lookup (`Estoque Atual: <b>...</b>`)
 *
 * Sem cor literal, como as regras acima.
 */

.form-secao {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bs-gray-500);
    border-bottom: 1px solid var(--bs-gray-200);
    padding-bottom: 0.4rem;
    margin-bottom: 1.1rem;
}

.form-resumo {
    background-color: var(--bs-gray-100);
    border-radius: var(--bs-border-radius);
    padding: 0.9rem 1.1rem;
}

.form-resumo .form-label {
    font-size: 0.8rem;
    color: var(--bs-gray-500);
    margin-bottom: 0.15rem;
}

.form-resumo .form-control-plaintext {
    padding: 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--bs-gray-800);
}

.form-saldo {
    font-size: 0.85rem;
    color: var(--bs-gray-600);
    margin-top: 0.35rem;
}

.form-saldo b {
    color: var(--bs-gray-800);
    font-weight: 600;
}

/*
 * Abas: um desenho por nivel (divergencia 1040, prancha 05 do plano complementar de
 * usabilidade da nota fiscal).
 *
 * A nota fiscal empilha ate quatro `TPageControl` (`pgcNotaFiscal` > `PageControl1`; na janela
 * do item, `Dados dos Produtos`... > `IPI`... > `IS`/`IBS e CBS` > `IBS UF`...), e todos saiam
 * com o mesmo sublinhado do `nav-line-tabs` — nao se via onde um nivel acabava e o outro
 * comecava, e as 11 abas do primeiro quebravam em duas linhas em 1680 px. Tres classes,
 * **opt-in**, ao lado do `nav nav-tabs nav-line-tabs` que o `<ul>` ja tem (tira-la devolve o
 * desenho do tema):
 *
 *   .abas-nivel-1   botoes numa faixa `gray-100`; a aba ativa em `--bs-primary`
 *   .abas-nivel-2   o sublinhado do tema, um tamanho menor
 *   .abas-nivel-3   pilulas pequenas `gray-100`; a ativa em azul a 12%
 *
 * So aparencia: titulo, ordem, quantidade, `href` e `data-bs-toggle` sao os do `.dfm` e quem
 * troca a aba continua sendo o Bootstrap. Hoje so a nota fiscal liga as classes; a NFS-e ficou
 * com os niveis do Delphi por decisao de 18/09/2026, e outra tela pede a sua autorizacao.
 *
 * Especificidade: o hover do tema e `.nav-line-tabs .nav-item .nav-link:hover:not(.disabled)`
 * (0,5,0, `style.bundle.css:29097`); daqui sai 0,6,0 no hover e na ativa, sem `!important` —
 * o anel de foco por teclado (abaixo, 838) continua vencendo nos tres desenhos. O tamanho da
 * letra fica na `.nav-link`: o `fs-*` do `<ul>` so chegaria por heranca.
 *
 * Sem cor literal: `--bs-gray-*`, `--bs-primary`, `--bs-primary-rgb` e `--bs-primary-inverse`,
 * entao o modo escuro vem pronto.
 */

.nav.abas-nivel-1 {
    border-bottom: 0;
    gap: 0.45rem;
    flex-wrap: wrap;
    padding: 0.5rem;
    background-color: var(--bs-gray-100);
    border-radius: 0.75rem;
}

.nav.abas-nivel-1 .nav-item {
    margin-bottom: 0;
}

.nav.abas-nivel-1 .nav-item .nav-link {
    margin: 0;
    padding: 0.45rem 0.72rem;
    border: 1px solid var(--bs-gray-300);
    border-radius: 0.6rem;
    background-color: var(--bs-body-bg);
    color: var(--bs-gray-800);
    font-size: 0.9rem;
    font-weight: 500;
}

.nav.abas-nivel-1 .nav-item .nav-link:not(.active):hover {
    border: 1px solid var(--bs-primary);
    background-color: var(--bs-body-bg);
    color: var(--bs-primary);
}

.nav.abas-nivel-1 .nav-item .nav-link.active,
.nav.abas-nivel-1 .nav-item .nav-link.active:hover {
    border: 1px solid var(--bs-primary);
    background-color: var(--bs-primary);
    color: var(--bs-primary-inverse);
    box-shadow: 0 3px 8px rgba(var(--bs-primary-rgb), 0.25);
}

.nav.abas-nivel-2 {
    margin-top: 0.25rem;
    padding-left: 0.25rem;
}

.nav.abas-nivel-2 .nav-item .nav-link {
    font-size: 0.9rem;
    padding-top: 0.35rem;
    padding-bottom: 0.55rem;
}

.nav.abas-nivel-3 {
    border-bottom: 0;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.nav.abas-nivel-3 .nav-item {
    margin-bottom: 0;
}

.nav.abas-nivel-3 .nav-item .nav-link {
    margin: 0;
    padding: 0.3rem 0.75rem;
    border: 0;
    border-radius: 2rem;
    background-color: var(--bs-gray-100);
    color: var(--bs-gray-700);
    font-size: 0.85rem;
}

.nav.abas-nivel-3 .nav-item .nav-link:not(.active):hover {
    border: 0;
    background-color: var(--bs-gray-200);
    color: var(--bs-primary);
}

.nav.abas-nivel-3 .nav-item .nav-link.active,
.nav.abas-nivel-3 .nav-item .nav-link.active:hover {
    border: 0;
    background-color: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
    font-weight: 600;
}

/*
 * A aba diz o que tem dentro (divergencia 1041, prancha 06 do mesmo plano): o contador de
 * linhas da aba de grade (`badge badge-light-primary ... aba-contador`, do servidor) e o ponto
 * da aba que tem informacao (`.aba-ponto`, do `alpha-form.js`, `data-abas-ponto`). O titulo da
 * aba nao muda — os dois vem depois dele.
 *
 * Sobre o botao azul da aba ativa do nivel 1 o `badge-light-primary` some no fundo: ali o
 * contador e o ponto passam a `--bs-primary-inverse`.
 */
.aba-ponto {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 0.5rem;
    border-radius: 50%;
    background-color: var(--bs-primary);
    vertical-align: middle;
}

/*
 * O ponto de atencao de prazo (divergencia 1277, U10 da analise do pedido): a aba `Itens` do pedido com algum item ja
 * fora da `Previsão de Entrega` — o tom `Atrasado` da 9.12 (`--bs-orange`, o mesmo da badge `badge-orange`).
 */
.aba-ponto.aba-ponto-atrasado {
    background-color: var(--bs-orange);
}

.nav.abas-nivel-1 .nav-item .nav-link.active .aba-contador {
    background-color: var(--bs-primary-inverse);
    color: var(--bs-primary);
}

.nav.abas-nivel-1 .nav-item .nav-link.active .aba-ponto {
    background-color: var(--bs-primary-inverse);
}

/*
 * Alteracao nao salva na aba (divergencia 1252, D15 do plano do formulario da nota): o ponto
 * laranja que o `alpha-saida.js` poe no link da aba de cada campo alterado e nao gravado, no modo
 * abas (`data-pergunta-saida-aba`). Mesmo tamanho do `.aba-ponto` (informacao), cor de atencao e um
 * anel do fundo para nao sumir sobre o botao azul da aba ativa do nivel 1.
 */
.aba-naosalvo {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 0.4rem;
    border-radius: 50%;
    background-color: var(--bs-warning);
    box-shadow: 0 0 0 2px rgba(var(--bs-warning-rgb), 0.25);
    vertical-align: middle;
}

.nav.abas-nivel-1 .nav-item .nav-link.active .aba-naosalvo {
    box-shadow: 0 0 0 2px var(--bs-body-bg);
}

/*
 * Linha rotulo/valor de total apurado (divergencia 1043, prancha 09 do mesmo plano).
 *
 * Nasceu no quadro `Totais` da `Pesquisa Nota Fiscal` (`Views/Shared/_TotaisNotaFiscal.cshtml`,
 * 02/09/2026), como `<style>` do parcial; a aba `Totais` do formulario da nota
 * (`NotasFiscais/_Totais.cshtml`) e o segundo consumidor, entao as quatro classes sobem para ca
 * (secao 3 do `CLAUDE.md`). O total que o sistema apura e nunca se digita sai como texto, nao
 * como caixa de digitacao `readonly`:
 *
 *   .totais-linha        rotulo a esquerda, valor a direita, separador tracejado embaixo
 *   .totais-linha-forte  o rotulo em caixa alta do `.dfm` (`VALOR TOTAL DA NF`): fundo `gray-100`
 *   .totais-rotulo       o texto do rotulo
 *   .totais-valor        o numero, tabular (as casas alinham de uma linha para a outra)
 *
 * A cor do valor (zero esmaecido em `text-gray-500`, o resto `text-gray-800`) e o negrito do
 * rotulo forte sao utilitarios do tema na propria marcacao. O quadro preso da listagem
 * (`.totais-fixo`) compacta as quatro no `<style>` do parcial, com seletor mais forte.
 * Sem cor literal: o modo escuro vem pronto.
 */
.totais-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0.25rem;
    border-bottom: 1px dashed var(--bs-gray-300);
}

.totais-linha:last-child {
    border-bottom: 0;
}

.totais-linha-forte {
    background: var(--bs-gray-100);
    border-bottom-color: transparent;
    border-radius: 0.475rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.totais-rotulo {
    font-size: 0.925rem;
    color: var(--bs-gray-700);
}

.totais-valor {
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/*
 * Anel de foco por teclado, em todo controle (divergencia 838).
 *
 * Decisao do usuario em 21/09/2026: "Eu nunca consigo saber onde o cursor de alteracao esta
 * [...] via tab, eu me perco." O Metronic 8.3.2 nao desenha anel nenhum:
 *
 *   - `.form-control:focus` / `.form-select:focus` saem do bundle com
 *     `box-shadow: false, 0 0 0 0.25rem rgba(...)` — `$input-box-shadow: false` em
 *     `components/_variables.scss:583` passa pelo mixin do Bootstrap, que so filtra `null`
 *     e `none`. Valor invalido, o navegador descarta a declaracao inteira; sobra `outline: 0`
 *     e a borda indo de `gray-300` para `gray-400` (#DBDFE9 -> #C4CADA);
 *   - `.btn` leva `outline: none !important` e `box-shadow: none` com especificidade 0,6,0
 *     (`components/buttons/_base.scss:10-15`); `$btn-focus-box-shadow: none`;
 *   - `.form-check-input` e o `.select2-selection` do lookup: `box-shadow: none`, so borda.
 *
 * `:focus-visible`, nao `:focus`: o anel aparece so quando o foco chegou pelo teclado —
 * clique de mouse continua como hoje. `--bs-focus-ring-width` e `--bs-focus-ring-color` ja
 * estao no `:root` do tema (0.25rem, primario a 25%), entao sem cor literal e o modo escuro
 * vem pronto. Os `!important` sao para vencer o `outline`/`box-shadow` do `.btn` acima e o
 * `outline: none !important` do skin do Select2 — sem eles a regra perde para o tema.
 *
 * Lista fechada de seletores, de proposito: um `:focus-visible` universal alcancaria modal,
 * SweetAlert e o `body`. Controle novo que nao e nenhum dos sete entra aqui: a barra dos
 * `Totais` no celular (`.totais-barra`, `_TotaisNotaFiscal.cshtml`, 09/10/2026).
 */

.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.select2-container--bootstrap5 .select2-selection:focus-visible,
.btn:focus-visible,
.page-link:focus-visible,
.nav-link:focus-visible,
.totais-barra:focus-visible {
    outline: 0 !important;
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color) !important;
}