/*
 * PRODS — camada de componentes.
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * ONDE ESTE ARQUIVO ENTRA
 *
 * `prods-brand.css` resolve a PALETA: quais cores o produto usa e por quê.
 * Este arquivo resolve a LINGUAGEM: como um título de página, um estado, um
 * indicador e uma tela vazia se parecem — sempre do mesmo jeito, em qualquer
 * módulo.
 *
 * Carregado depois da marca, pelo mesmo gancho (`config/backpack/ui.php`).
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * ⚠️ ADITIVO, NÃO SUBSTITUTIVO
 *
 * As classes novas levam o prefixo `prods-`. Nada aqui reescreve `.table`,
 * `.form-group`, `.card` ou `.btn` de forma genérica — esses seletores também
 * renderizam a Ordem de Produção, que é ÁREA CONGELADA nesta refatoração (ver
 * docs/ux/PROTECTED_PRODUCTION_ORDER.md).
 *
 * As únicas regras que alcançam telas existentes estão na seção "Correções
 * globais", são três, e cada uma corrige um defeito declarado na auditoria —
 * não é redesenho.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. TOKENS
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /*
     * Escala de estado — UM significado, UMA cor, em todo o produto.
     *
     * ⚠️ A cor nunca é o único sinal (WCAG 1.4.1): todo badge que usa estes
     * tokens carrega texto, e os de atenção e erro ganham também um ponto —
     * ver `.prods-badge`. Este é um sistema de chão de fábrica, operado sob
     * luz forte e por quem pode não distinguir verde de vermelho.
     */
    --prods-st-neutro-bg: #eceef1;
    --prods-st-neutro-fg: #4a5765;
    --prods-st-andamento-bg: #e2ecf6;
    --prods-st-andamento-fg: #1c4f7c;
    --prods-st-atencao-bg: #fdf1d8;
    --prods-st-atencao-fg: #7a5410;
    --prods-st-ok-bg: #d9f2ea;
    --prods-st-ok-fg: #0a6350;
    --prods-st-erro-bg: #fbe2e2;
    --prods-st-erro-fg: #8d2020;

    /* Tipografia — uma escala só, para telas CRUD e telas próprias. */
    --prods-fs-titulo: 1.5rem;
    --prods-fs-secao: 1.0625rem;
    --prods-fs-corpo: 0.875rem;
    --prods-fs-apoio: 0.8125rem;

    /* Espaçamento. */
    --prods-gap: 1rem;
    --prods-gap-sm: 0.5rem;
    --prods-gap-lg: 1.5rem;

    --prods-radius: 0.5rem;
    --prods-borda: var(--prods-nevoa, #e6e9ed);

    /*
     * ⚠️ Texto de apoio: #666F79, e não um cinza mais claro.
     *
     * Os primeiros valores, escolhidos "por parecerem discretos", reprovavam no
     * contraste — o número zero saía a 2,56:1, contra os 4,5:1 que o WCAG AA
     * pede. Discrição não pode custar legibilidade num sistema operado em tela
     * de chão de fábrica, sob luz forte.
     *
     * ⚠️ E o cálculo tem de ser feito contra o FUNDO REAL, medido na página.
     *
     * O fundo do painel não é branco: é #EBEDEF. Dois valores anteriores
     * passaram no cálculo teórico contra #FFF e reprovaram quando medidos no
     * navegador, sobre o cinza que o CoreUI de fato pinta atrás do conteúdo.
     *
     * Este é o mais claro que passa nos dois: 4,61:1 sobre o painel e 5,41:1
     * sobre branco. A hierarquia continua evidente — o grafite do texto
     * principal está em 15,98:1.
     */
    --prods-apoio: #626b75;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. CABEÇALHO DE PÁGINA
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * O produto tinha duas tipografias: as telas CRUD com um <h1> de ~40px e as
 * telas próprias (BPF, CQ, Rastreabilidade) com um título de 14px cinza. As
 * telas mais valiosas eram as que menos pareciam importantes.
 *
 * `.prods-page-header` é a forma única. O componente Blade
 * <x-prods.page-header> a usa; a seção "Correções globais" alinha o <h1> do
 * Backpack à mesma escala.
 */

.prods-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--prods-gap);
    margin-bottom: var(--prods-gap-lg);
}

.prods-page-header__titulo {
    font-size: var(--prods-fs-titulo);
    font-weight: 600;
    line-height: 1.25;
    color: var(--prods-grafite, #16232e);
    margin: 0;
}

.prods-page-header__subtitulo {
    font-size: var(--prods-fs-apoio);
    color: var(--prods-apoio);
    margin: 0.25rem 0 0;
    max-width: 70ch;
}

.prods-page-header__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--prods-gap-sm);
}

.prods-section-title {
    font-size: var(--prods-fs-secao);
    font-weight: 600;
    color: var(--prods-grafite, #16232e);
    margin: 0 0 var(--prods-gap-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. BADGES DE ESTADO
   ═══════════════════════════════════════════════════════════════════════════ */

.prods-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    background: var(--prods-st-neutro-bg);
    color: var(--prods-st-neutro-fg);
}

.prods-badge--andamento { background: var(--prods-st-andamento-bg); color: var(--prods-st-andamento-fg); }
.prods-badge--atencao   { background: var(--prods-st-atencao-bg);   color: var(--prods-st-atencao-fg); }
.prods-badge--ok        { background: var(--prods-st-ok-bg);        color: var(--prods-st-ok-fg); }
.prods-badge--erro      { background: var(--prods-st-erro-bg);      color: var(--prods-st-erro-fg); }

/*
 * ⚠️ O ponto não é enfeite: é o segundo sinal.
 *
 * Atenção e erro são os dois estados que fazem alguém agir. Distingui-los só
 * por matiz deixaria de fora quem tem deficiência de visão de cores — cerca de
 * 8% dos homens. O ponto some no `forced-colors`, onde o sistema já garante o
 * contraste.
 */
.prods-badge--atencao::before,
.prods-badge--erro::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

/*
 * Booleano de configuração — discreto de propósito.
 *
 * ⚠️ Não usa a escala de estado: "Ativo: Não" é uma escolha do cadastro, não
 * uma pendência. Ver o cabeçalho de crud/columns/boolean.blade.php.
 */
.prods-bool {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--prods-apoio);
}

.prods-bool--sim { color: #4a5765; }

.prods-bool i { font-size: 1rem; line-height: 1; }

/* Ausência de dado nunca é um estado; é a falta dele. */
.prods-sem-dado {
    font-size: var(--prods-fs-apoio);
    font-style: italic;
    color: var(--prods-apoio);
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. ESTADO VAZIO
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * "Nenhum dado cadastrado na tabela" aparecia em mais de vinte telas. Não diz o
 * que é aquilo, por que importa, nem o que fazer.
 *
 * ⚠️ Nos módulos regulatórios o texto importa mais que a estética: uma tela de
 * Não conformidades vazia não pode sugerir que está tudo em ordem. O componente
 * <x-prods.empty-state> aceita `tom="regulatorio"`, que troca a moldura e o
 * texto — ausência de registro é ausência de registro, não conformidade.
 */

.prods-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--prods-gap-sm);
    padding: 3rem 1.5rem;
    border: 1px dashed var(--prods-borda);
    border-radius: var(--prods-radius);
    background: #fbfcfd;
}

/*
 * ⚠️ Este cinza claro é aceitável porque o ícone é DECORATIVO.
 *
 * Ele é `aria-hidden` e não carrega informação: o título e o texto abaixo dizem
 * tudo. O critério de contraste do WCAG vale para texto e para componentes que
 * transmitem significado — não para ornamento que, se sumisse, não faria falta.
 */
.prods-empty__icone {
    font-size: 2rem;
    line-height: 1;
    color: #b3bcc6;
}

.prods-empty__titulo {
    font-size: var(--prods-fs-secao);
    font-weight: 600;
    color: var(--prods-grafite, #16232e);
    margin: 0;
}

.prods-empty__texto {
    font-size: var(--prods-fs-corpo);
    color: var(--prods-apoio);
    margin: 0;
    max-width: 52ch;
}

.prods-empty--regulatorio {
    border-style: solid;
    border-color: #e4d5ab;
    background: #fffdf6;
}

.prods-empty--regulatorio .prods-empty__icone { color: #b08c30; }

/*
 * O estado vazio instalado dentro da célula do DataTables.
 *
 * A `td.dataTables_empty` traz padding e centralização próprios, e a moldura do
 * componente já é a moldura — duas bordas concêntricas ficariam ruidosas.
 */
/*
 * ⚠️ `white-space: normal` é obrigatório aqui.
 *
 * A tabela do Backpack carrega a classe `nowrap`, que impede a quebra de linha
 * nas células — sensato para uma coluna de dados, fatal para um parágrafo: o
 * texto do estado vazio saía numa linha só e era cortado na borda da tela.
 */
.prods-empty-cell {
    padding: 0 !important;
    background: transparent;
    white-space: normal !important;
    text-align: center;
}

.prods-empty-cell .prods-empty {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.prods-empty-cell .prods-empty--regulatorio {
    background: #fffdf6;
    border-top: 2px solid #e4d5ab;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. CARTÕES DE INDICADOR
   ═══════════════════════════════════════════════════════════════════════════ */

.prods-cards {
    display: grid;
    /*
     * ⚠️ `auto-fit`, e não `auto-fill`.
     *
     * Com `auto-fill`, um painel de três cartões numa tela larga deixava uma
     * quarta coluna fantasma e os cartões ficavam estreitos à esquerda, com um
     * vão à direita. `auto-fit` colapsa a faixa vazia e distribui a largura
     * entre os cartões que existem — o que importa quando a permissão do
     * usuário recorta quantos blocos ele vê.
     */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--prods-gap);
    /*
     * ⚠️ Altura natural, e não esticada.
     *
     * Com o padrão `stretch`, todos os cartões ganhavam a altura do maior — o
     * de Produção, que tem a barra de etapas — e os outros três abriam com um
     * vão de duzentos pixels entre o conteúdo e o link do rodapé. Um cartão
     * majoritariamente vazio parece um cartão sem dados.
     */
    align-items: start;
}

.prods-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--prods-borda);
    border-radius: var(--prods-radius);
    padding: var(--prods-gap);
    gap: 0.875rem;
    min-width: 0;
    /*
     * A faixa de acento no topo. Fica no `border-top` e não num pseudo-elemento
     * para não competir com o `border-radius` do cartão.
     */
    border-top: 3px solid var(--prods-borda);
}

/*
 * ⚠️ O acento identifica o ASSUNTO, não a gravidade.
 *
 * É o que dá ao painel a leitura periférica — "o bloco da qualidade é este" —
 * sem depender de ler o título. Por isso são matizes de identidade, e não a
 * escala de estado: um cartão de Boas Práticas não fica vermelho porque tem
 * pendência; quem carrega gravidade é o número dentro dele.
 */
/*
 * O cartão principal ocupa duas colunas quando há largura para isso.
 *
 * ⚠️ Não é hierarquia decorativa: Produção carrega três números MAIS a barra de
 * etapas, e os outros carregam duas ou três linhas. Numa grade de colunas
 * iguais, ou ele fica apertado ou os outros abrem um vão de duzentos pixels.
 *
 * ⚠️ Só a partir de 1200px. Abaixo disso, duas colunas para um cartão deixariam
 * os demais estreitos demais — e num tablet a grade já colapsa para uma coluna
 * de qualquer forma.
 */
@media (min-width: 1200px) {
    .prods-card--destaque { grid-column: span 2; }
}

.prods-card--producao   { border-top-color: #47657f; }
.prods-card--qualidade  { border-top-color: var(--prods-verde, #00b894); }
.prods-card--bpf        { border-top-color: #8a6bbf; }
.prods-card--integracao { border-top-color: #c98a2e; }

.prods-card__topo {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
}

.prods-card__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--prods-radius);
    background: #f2f5f8;
    color: #47657f;
    font-size: 1.125rem;
    flex: 0 0 auto;
}

.prods-card--qualidade  .prods-card__icone { background: #e4f5f0; color: #0a6350; }
.prods-card--bpf        .prods-card__icone { background: #f0ebf8; color: #5e4a86; }
.prods-card--integracao .prods-card__icone { background: #fbf1de; color: #8a5f14; }

.prods-card__cabecalho { min-width: 0; }

.prods-card__titulo {
    font-size: var(--prods-fs-corpo);
    font-weight: 700;
    color: var(--prods-grafite, #16232e);
    margin: 0;
}

.prods-card__nota {
    font-size: 0.75rem;
    color: var(--prods-apoio);
    margin: 0.1rem 0 0;
}

.prods-card__corpo { flex: 1 1 auto; }

/*
 * "Nada pendente" — o módulo é usado, foi apurado, e está limpo.
 *
 * ⚠️ Diferente de "sem dados registrados", que é itálico e cinza. Aqui o verde
 * é honesto: houve verificação. Lá não houve, e afirmar tranquilidade seria
 * mentira por omissão.
 */
.prods-card__ordem {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--prods-fs-apoio);
    font-weight: 600;
    color: var(--prods-st-ok-fg);
}

.prods-card__ordem i { font-size: 1rem; }

/*
 * "3 indicadores apurados, sem pendência" — o rastro dos zeros recolhidos.
 *
 * ⚠️ Discreto, mas presente. Sem esta linha, um cartão com um único problema
 * pareceria um cartão que só sabe medir uma coisa.
 */
.prods-metrics__limpos {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
    color: var(--prods-st-ok-fg);
}

.prods-metrics__limpos i { font-size: 0.9rem; }

.prods-card__rodape {
    padding-top: 0.75rem;
    border-top: 1px solid var(--prods-borda);
    font-size: var(--prods-fs-apoio);
}

/* Uma métrica: rótulo à esquerda, número à direita. */
.prods-metric {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--prods-gap-sm);
    padding: 0.3rem 0;
}

.prods-metric__rotulo {
    font-size: var(--prods-fs-apoio);
    color: #55606d;
    min-width: 0;
}

/*
 * Número grande e tabular: no chão de fábrica se lê de longe, e alinhamento
 * decimal evita comparar 9 com 10 pela largura.
 */
.prods-metric__valor {
    font-size: 1.125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--prods-grafite, #16232e);
    flex: 0 0 auto;
}

.prods-metric__valor--atencao { color: var(--prods-st-atencao-fg); }
.prods-metric__valor--erro    { color: var(--prods-st-erro-fg); }
.prods-metric__valor--zero    { color: var(--prods-apoio); font-weight: 600; }

/* Um número que é link para a lista que o originou. */
a.prods-card__link {
    font-size: var(--prods-fs-apoio);
    font-weight: 600;
    text-decoration: none;
}

a.prods-card__link:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════════
   5b. BARRA DE ETAPAS
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * ⚠️ As quatro cores são uma PROGRESSÃO, não a escala de estado.
 *
 * Etapa do processo não é situação: "Pesagem" não é pior nem melhor que
 * "Envase". Reaproveitar aqui o vermelho de erro ou o verde de aprovado faria a
 * barra dizer que uma etapa é um problema. A progressão vai do claro ao escuro,
 * na ordem do processo — e a única etapa que empresta cor da escala de estado é
 * "Aguardando CQ", porque essa É uma espera, e é a que precisa de decisão.
 */
.prods-flow { margin-top: 0.75rem; }

.prods-flow__barra {
    display: flex;
    height: 0.5rem;
    border-radius: 999px;
    overflow: hidden;
    background: var(--prods-st-neutro-bg);
    gap: 2px;
}

.prods-flow__faixa { display: block; min-width: 4px; }

.prods-flow__faixa--0, .prods-flow__marca--0 { background: #b9c6d2; }
.prods-flow__faixa--1, .prods-flow__marca--1 { background: #7d99b3; }
.prods-flow__faixa--2, .prods-flow__marca--2 { background: #47657f; }
.prods-flow__faixa--3, .prods-flow__marca--3 { background: var(--prods-st-atencao-fg); }

.prods-flow__legenda {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
}

.prods-flow__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0;
    font-size: var(--prods-fs-apoio);
}

.prods-flow__marca {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 2px;
    flex: 0 0 auto;
}

.prods-flow__rotulo { color: #55606d; flex: 1 1 auto; min-width: 0; }

.prods-flow__valor {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--prods-grafite, #16232e);
}

.prods-flow__valor--zero { color: var(--prods-apoio); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════════
   5c. FAIXA DE ATENÇÃO
   ═══════════════════════════════════════════════════════════════════════════ */

.prods-strip {
    display: flex;
    gap: 0.875rem;
    align-items: flex-start;
    padding: 1rem 1.25rem;
    border-radius: var(--prods-radius);
    border: 1px solid;
    margin-bottom: var(--prods-gap);
}

.prods-strip--atencao {
    background: var(--prods-st-atencao-bg);
    border-color: #e6d3a3;
    color: var(--prods-st-atencao-fg);
}

.prods-strip--erro {
    background: var(--prods-st-erro-bg);
    border-color: #eec3c3;
    color: var(--prods-st-erro-fg);
}

.prods-strip__marca {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
    margin-top: 0.4rem;
}

.prods-strip__corpo { flex: 1 1 auto; min-width: 0; }

.prods-strip__titulo {
    font-weight: 700;
    font-size: var(--prods-fs-corpo);
    margin: 0 0 0.5rem;
}

/* Lista de registros dentro da faixa. */
.prods-strip__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.prods-strip__linha {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    font-size: var(--prods-fs-apoio);
}

.prods-strip__linha a {
    font-weight: 700;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.prods-strip__linha a:hover { border-bottom-width: 2px; }

.prods-strip__meta { opacity: 0.85; }

/* ═══════════════════════════════════════════════════════════════════════════
   5d. LINHAS REPETÍVEIS
   ═══════════════════════════════════════════════════════════════════════════ */

.prods-repeater__rolagem {
    /*
     * ⚠️ A rolagem é do CONTAINER, não da página.
     *
     * Um repetidor com seis colunas não cabe num tablet em retrato. Sem esta
     * caixa, a página inteira ganharia rolagem horizontal e o menu sairia da
     * tela junto.
     */
    overflow-x: auto;
    border: 1px solid var(--prods-borda);
    border-radius: var(--prods-radius);
    background: #fff;
}

.prods-repeater__tabela {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: var(--prods-fs-apoio);
}

.prods-repeater__tabela th {
    text-align: left;
    font-weight: 600;
    color: #55606d;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--prods-borda);
    white-space: nowrap;
    background: #f8fafb;
}

.prods-repeater__tabela td {
    padding: 0.45rem 0.75rem;
    border-bottom: 1px solid #f0f2f5;
    vertical-align: middle;
}

.prods-repeater__tabela tr:last-child td { border-bottom: 0; }

.prods-repeater__obrigatorio { color: var(--prods-st-erro-fg); }

.prods-repeater__acao-col { width: 2.5rem; text-align: center; }

.prods-repeater__remover {
    border: 0;
    background: transparent;
    color: var(--prods-apoio);
    line-height: 1;
    padding: 0.35rem;
    border-radius: 4px;
    cursor: pointer;
}

.prods-repeater__remover:hover:not(:disabled) {
    color: var(--prods-st-erro-fg);
    background: var(--prods-st-erro-bg);
}

/*
 * ⚠️ Desabilitado, e não escondido.
 *
 * O botão da última linha fica inerte porque um repetidor vazio parece um
 * formulário quebrado. Escondê-lo faria a coluna de ações piscar entre existir
 * e não existir conforme se acrescentam linhas.
 */
.prods-repeater__remover:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.prods-repeater__remover:focus-visible {
    outline: 2px solid var(--prods-verde, #00b894);
    outline-offset: 1px;
}

/* Alvo de toque adequado em tablet — é onde se cadastra no chão de fábrica. */
@media (pointer: coarse) {
    .prods-repeater__remover { min-width: 44px; min-height: 44px; }
    .prods-repeater__tabela td { padding: 0.6rem 0.75rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. AVISOS
   ═══════════════════════════════════════════════════════════════════════════ */

.prods-nota {
    border: 1px solid var(--prods-borda);
    border-left: 3px solid var(--prods-ardosia, #253a4d);
    border-radius: var(--prods-radius);
    background: #f7f9fb;
    padding: 0.875rem 1rem;
    font-size: var(--prods-fs-apoio);
    color: #4a5765;
}

.prods-nota strong { color: var(--prods-grafite, #16232e); }

.prods-nota--atencao {
    border-left-color: #d9a441;
    background: #fffdf6;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. BARRA DE CONTEXTO — a empresa ativa
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * O PRODS é multiempresa fail-closed e a interface não dizia de qual empresa
 * eram os dados na tela. Num SaaS, isso é condição para errar.
 */
.prods-empresa {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--prods-fs-apoio);
    font-weight: 600;
    color: var(--prods-ardosia, #253a4d);
    max-width: 32ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prods-empresa__marca {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--prods-verde, #00b894);
    flex: 0 0 auto;
}

/* Configurações da Empresa ainda em branco — é pendência, não identidade. */
.prods-empresa--pendente {
    color: var(--prods-st-atencao-fg);
    font-style: italic;
}

.prods-empresa--pendente .prods-empresa__marca {
    background: var(--prods-st-atencao-fg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. CORREÇÕES GLOBAIS
   ═══════════════════════════════════════════════════════════════════════════

   ⚠️ As três regras desta seção alcançam TODAS as listagens do painel,
   inclusive a da Ordem de Produção. São correções de defeito, não redesenho:
   nenhuma altera markup, coluna, botão, permissão ou comportamento. Ver
   "a camada global" em docs/ux/PROTECTED_PRODUCTION_ORDER.md.
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * 8.1 — `text-capitalize` quebrava o português.
 *
 * `crud/list.blade.php` aplica `.text-capitalize` ao <h1>, e o CSS maiúsculiza
 * TODA palavra: "Ordens De Produção", "Configurações Da Empresa", "Lotes De
 * Materiais". Preposição em português é minúscula.
 *
 * A correção é aqui, e não no template, de propósito: `list.blade.php` renderiza
 * também a listagem da OP, e o acordo é não editar o que a OP usa. Uma regra de
 * CSS resolve sem tocar em arquivo nenhum de tela.
 */
/*
 * ⚠️ `!important` aqui não é preguiça.
 *
 * O utilitário `.text-capitalize` do Bootstrap é declarado com `!important`, e
 * uma regra normal — por mais específica que seja — perde para ele. A única
 * forma de vencer sem editar `list.blade.php` (que renderiza também a listagem
 * da OP, área congelada) é responder com a mesma arma.
 *
 * Os dados já estão certos: o arquivo de tradução diz "Ordens de Produção".
 * Quem estragava era a folha de estilo.
 */
.header-operation h1.text-capitalize,
h1[bp-section="page-heading"],
.breadcrumb-item.text-capitalize {
    text-transform: none !important;
}

.header-operation h1,
h1[bp-section="page-heading"] {
    font-size: var(--prods-fs-titulo);
    font-weight: 600;
    line-height: 1.25;
    color: var(--prods-grafite, #16232e);
}

/* A contagem de registros é apoio, não manchete. */
#datatable_info_stack {
    font-size: var(--prods-fs-apoio);
    color: var(--prods-apoio);
}

/*
 * 8.2 — O cabeçalho da tabela vinha repetido no rodapé.
 *
 * O <tfoot> do DataTables duplica o <thead> em toda listagem, inclusive nas de
 * uma linha. Não é filtro, não é totalizador: é o mesmo texto de novo.
 *
 * ⚠️ Escondido por CSS, não removido: o DataTables usa as células do <tfoot>
 * para calcular a largura das colunas. Removê-lo do DOM desalinharia a tabela.
 */
#crudTable tfoot { display: none; }

/*
 * 8.3 — A inicial no avatar do usuário precisa ser legível.
 *
 * O tema pinta o círculo com o verde antigo do template (#00A65A) e escreve a
 * inicial em branco por cima: 3,18:1, abaixo dos 4,5:1 do WCAG AA. É a única
 * coisa que identifica quem está logado.
 *
 * ⚠️ `!important` porque o tema declara a cor num atributo `style` inline, em
 * `menu_user_dropdown.blade.php`. A alternativa seria editar o arquivo do tema,
 * que volta ao original a cada `vendor:publish`.
 *
 * A ardósia da marca dá 7,5:1 com branco — o mesmo valor já documentado em
 * prods-brand.css para as ações primárias.
 */
.backpack-avatar-menu-container {
    background-color: var(--prods-ardosia, #253a4d) !important;
}

/*
 * 8.4 — Foco visível também nas linhas da tabela.
 *
 * A marca já define foco para campos e botões. Links dentro da tabela ficavam
 * de fora, o que quebra a navegação por teclado justamente onde há mais links.
 */
#crudTable a:focus-visible,
.prods-card a:focus-visible {
    outline: 2px solid var(--prods-verde, #00b894);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. RESPONSIVO E ACESSIBILIDADE
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * Tablet: alvos de toque com pelo menos 44px, que é a recomendação de tamanho
 * mínimo. Vale para os componentes novos — as telas operacionais da OP não são
 * tocadas nesta fase.
 */
@media (pointer: coarse) {
    .prods-card__link,
    .prods-empty .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

@media (max-width: 575.98px) {
    .prods-page-header { flex-direction: column; }
    .prods-cards { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .prods-card,
    .prods-badge { transition: none; }
}

/* Impressão: o que é moldura não vai para o papel. */
@media print {
    .prods-page-header__acoes,
    .prods-card__link { display: none; }
    .prods-card { border-color: #999; break-inside: avoid; }
}