/*
 * Telas leves (docs/11-tela-leve.md): o mesmo visual das telas de hoje (docs/08-padrao-do-sistema.md §3), num CSS
 * próprio, sem o CSS interno do Filament, para uma atualização dele não desarrumar estas telas. As cores são as
 * variáveis que o layout declara a partir de App\Support\Visual\Paletas (--primary-*, --gray-*, --destaque-*,
 * --danger-*...), as mesmas do painel. Modo escuro com light-dark() na própria regra.
 *
 * Regras da casa: este arquivo tem o que toda tela leve usa, e cada tipo de tela tem o seu, como o JavaScript
 * (cadastro.css: a pesquisa e o formulário); nada de CSS por tela, atributo style ou !important. Componentes "ef-*"
 * reutilizáveis. Teto por arquivo conferido por teste (tests/Unit/OrcamentoDosArquivosDoPainelTest.php).
 */

/* ==== 1. Base ==== */

:root {
    --ef-marinho: #0a3246;
    --ef-petroleo: #0a3046;
    --ef-linha: light-dark(var(--gray-200), rgb(255 255 255 / 0.1));
    --ef-sombra: 0 1px 2px rgb(10 50 70 / 0.06);
    --ef-fundo-painel: light-dark(#fff, var(--gray-900));
    --ef-texto: light-dark(var(--gray-950), #fff);
    --ef-texto-2: light-dark(var(--gray-500), var(--gray-400));
    --ef-topo: 3.25rem;
    --ef-menu: 15.5rem;
    color-scheme: light;
}

:root.dark {
    color-scheme: dark;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* O texto miúdo com 80% do tamanho, como a base do painel (a nota embaixo dos totais da posição de estoque). */
small {
    font-size: 80%;
}

/* Como a base do painel: as partes da data sem o recuo do navegador e as setas do número na altura do campo (uma
   regra para cada parte, porque o navegador descarta a regra inteira se não conhecer uma delas). */
::-webkit-datetime-edit {
    display: inline-flex;
    padding-block: 0;
}

::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
}

::-webkit-datetime-edit-year-field {
    padding-block: 0;
}

::-webkit-datetime-edit-month-field {
    padding-block: 0;
}

::-webkit-datetime-edit-day-field {
    padding-block: 0;
}

::-webkit-datetime-edit-hour-field {
    padding-block: 0;
}

::-webkit-datetime-edit-minute-field {
    padding-block: 0;
}

::-webkit-datetime-edit-second-field {
    padding-block: 0;
}

::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
}

::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
}

::-webkit-inner-spin-button {
    height: auto;
}

::-webkit-outer-spin-button {
    height: auto;
}

body {
    margin: 0;
    min-height: 100dvh;
    background: light-dark(var(--gray-50), var(--gray-950));
    color: var(--ef-texto);
    font-family: 'Segoe UI', ui-sans-serif, system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd {
    margin: 0;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    margin: 0;
    color: inherit;
    font: inherit;
}

button {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

/* Escondido até o Alpine iniciar (x-cloak) ou pelo atributo hidden. O seletor repetido vence as classes simples (como
   .ef-botao) sem precisar de !important. */
[x-cloak][x-cloak],
[hidden][hidden] {
    display: none;
}

svg.ef-icone {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
}

svg.ef-icone--p {
    width: 1rem;
    height: 1rem;
}

svg.ef-icone--g {
    width: 1.5rem;
    height: 1.5rem;
}

.ef-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

:focus-visible {
    outline: 2px solid var(--primary-600);
    outline-offset: 2px;
}

/* ==== 2. Barra superior (petróleo), menu lateral em três estágios e conteúdo ==== */

.ef-topo {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    height: var(--ef-topo);
    padding: 0 1rem;
    background: var(--ef-petroleo);
    color: #fff;
}

.ef-topo__inicio {
    display: flex;
    align-items: center;
    margin-inline-end: 1.5rem;
}

.ef-topo__botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin: -0.375rem;
    border-radius: 0.375rem;
    color: rgb(255 255 255 / 0.85);
}

.ef-topo__botao:hover {
    background: rgb(255 255 255 / 0.1);
    color: #fff;
}

.ef-topo__marca {
    display: flex;
    margin-inline-start: 0.75rem;
}

.ef-topo__marca img {
    height: 2.25rem;
}

.ef-topo__fim {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-inline-start: auto;
}

.ef-filial {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ef-filial__rotulo {
    display: none;
    color: rgb(255 255 255 / 0.6);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ef-filial select {
    width: 12rem;
    height: 1.875rem;
    padding: 0.3125rem 2rem 0.3125rem 0.75rem;
    border: 0;
    border-radius: 0.375rem;
    background: rgb(255 255 255 / 0.05) var(--ef-seta) no-repeat right 0.5rem center / 1.5em;
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.16);
    color: #fff;
    font-size: 0.875rem;
    line-height: 1.25rem;
    appearance: none;
    color-scheme: dark;
}

.ef-filial__vazio {
    color: var(--danger-300);
    font-size: 0.875rem;
}

/* Pesquisa da barra superior (a pesquisa geral do painel). */
.ef-busca-geral {
    position: relative;
}

.ef-busca-geral__campo {
    display: flex;
    align-items: center;
    width: 11rem;
    height: 1.875rem;
    border-radius: 0.375rem;
    background: rgb(255 255 255 / 0.05);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.16);
    color: var(--gray-400);
}

.ef-busca-geral__campo:focus-within {
    box-shadow: 0 0 0 1px var(--primary-500), 0 0 0 4px color-mix(in oklab, var(--primary-500) 22%, transparent);
}

.ef-busca-geral__campo > svg {
    margin-inline: 0.75rem 0;
}

.ef-busca-geral__campo input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0.3125rem 0.75rem 0.3125rem 0.5rem;
    border: 0;
    outline: none;
    background: transparent;
    color: #fff;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color-scheme: dark;
}

.ef-busca-geral__campo input::placeholder {
    color: var(--gray-400);
}

.ef-busca-geral__campo input::-webkit-search-cancel-button {
    display: none;
}

.ef-busca-geral__limpar {
    display: flex;
    margin-inline-end: 0.5rem;
    color: var(--gray-400);
}

.ef-busca-geral__resultados {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 40;
    width: min(24rem, calc(100vw - 2rem));
    max-height: 24rem;
    overflow-y: auto;
    border-radius: 0.5rem;
    background: var(--ef-fundo-painel);
    box-shadow: 0 0 0 1px var(--ef-linha), 0 10px 24px rgb(10 50 70 / 0.14);
    color: var(--ef-texto);
}

.ef-busca-geral__grupo {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--ef-linha);
    background: light-dark(var(--gray-50), var(--gray-800));
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: capitalize;
}

.ef-busca-geral__item {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--ef-linha);
    outline: none;
}

.ef-busca-geral__item:hover,
.ef-busca-geral__item:focus-visible {
    background: light-dark(var(--gray-50), rgb(255 255 255 / 0.05));
}

.ef-busca-geral__titulo {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
}

.ef-busca-geral__detalhe {
    color: var(--ef-texto-2);
    font-size: 0.875rem;
}

.ef-busca-geral__vazio {
    padding: 1rem;
    color: var(--ef-texto-2);
    font-size: 0.875rem;
}

@media (min-width: 96rem) {
    .ef-busca-geral__campo {
        width: 16rem;
    }
}

@media (max-width: 39.99rem) {
    .ef-busca-geral__campo {
        width: 6.5rem;
    }
}

.ef-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: #09212f;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* Menu lateral: completo (15,5rem, com os nomes), só ícones (4rem) ou oculto; abaixo de 1024 px, abre por cima. */
.ef-menu {
    position: fixed;
    top: var(--ef-topo);
    bottom: 0;
    left: 0;
    z-index: 20;
    width: var(--ef-menu);
    padding: 0.75rem 0.5rem;
    overflow-y: auto;
    background: var(--ef-fundo-painel);
    box-shadow: inset -1px 0 0 var(--ef-linha);
    scrollbar-color: transparent transparent;
    scrollbar-width: thin;
}

.ef-menu:hover {
    scrollbar-color: rgb(96 115 130 / 0.4) transparent;
}

.ef-menu__grupos {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.ef-menu__grupo {
    position: relative;
}

.ef-menu__modulo {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    color: var(--ef-texto-2);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: start;
    text-transform: uppercase;
}

.ef-menu__modulo svg {
    width: 1.25rem;
    height: 1.25rem;
    color: light-dark(var(--gray-400), var(--gray-500));
}

.ef-menu__telas {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin-top: 0.125rem;
}

.ef-menu__tela {
    position: relative;
    display: block;
    padding: 0.3125rem 0.5rem 0.3125rem 2.375rem;
    border-radius: 0.375rem;
    color: light-dark(var(--gray-700), var(--gray-200));
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    text-wrap: balance;
}

.ef-menu__tela:hover,
.ef-menu__tela:focus-visible {
    background: light-dark(var(--gray-100), rgb(255 255 255 / 0.05));
}

.ef-menu__tela--ativa {
    background: light-dark(var(--primary-50), rgb(255 255 255 / 0.06));
    color: light-dark(var(--primary-700), var(--primary-300));
    font-weight: 600;
}

.ef-menu__tela--ativa::before {
    content: '';
    position: absolute;
    inset-block: 0.375rem;
    inset-inline-start: 1rem;
    width: 0.1875rem;
    border-radius: 999px;
    background: light-dark(var(--primary-600), var(--primary-400));
}

.ef-menu__seta {
    width: 1.25rem;
    height: 1.25rem;
    margin-inline-start: auto;
    color: var(--gray-400);
    transition: rotate 0.15s;
}

.ef-menu__grupo--recolhido .ef-menu__seta {
    rotate: -90deg;
}

/* Só ícones (o estágio fica no elemento raiz desde o início, sem piscar): um botão por módulo, que abre a lista das
   telas ao lado. */
[data-menu='icones'] .ef-menu {
    width: 4rem;
    padding-inline: 0;
    scrollbar-width: none;
}

[data-menu='icones'] .ef-menu__grupos {
    align-items: center;
}

[data-menu='icones'] .ef-menu__modulo {
    width: 2.375rem;
    height: 2.375rem;
    justify-content: center;
    padding: 0.4375rem;
}

[data-menu='icones'] .ef-menu__modulo svg {
    width: 1.5rem;
    height: 1.5rem;
}

[data-menu='icones'] .ef-menu__modulo:hover,
[data-menu='icones'] .ef-menu__grupo--aberto .ef-menu__modulo {
    background: light-dark(var(--gray-100), rgb(255 255 255 / 0.05));
}

[data-menu='icones'] .ef-menu__grupo--ativo .ef-menu__modulo {
    background: light-dark(var(--primary-50), rgb(255 255 255 / 0.06));
}

[data-menu='icones'] .ef-menu__grupo--ativo .ef-menu__modulo svg {
    color: light-dark(var(--primary-600), var(--primary-400));
}

[data-menu='icones'] .ef-menu__nome,
[data-menu='icones'] .ef-menu__seta,
[data-menu='icones'] .ef-menu__telas,
.ef-menu__grupo--recolhido .ef-menu__telas {
    display: none;
}

/* Só ícones: a lista do módulo abre ao lado do ícone (a posição vem do clique). */
.ef-menu__voo-titulo {
    display: none;
    padding: 0.5rem 0.625rem 0.25rem;
    color: var(--ef-texto-2);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

[data-menu='icones'] .ef-menu__grupo--aberto .ef-menu__telas {
    position: fixed;
    z-index: 40;
    display: flex;
    min-width: 14rem;
    margin: 0;
    padding: 0.25rem;
    border-radius: 0.5rem;
    background: var(--ef-fundo-painel);
    box-shadow: 0 0 0 1px var(--ef-linha), 0 10px 24px rgb(10 50 70 / 0.14);
}

[data-menu='icones'] .ef-menu__grupo--aberto .ef-menu__voo-titulo {
    display: block;
}

[data-menu='icones'] .ef-menu__grupo--aberto .ef-menu__tela {
    padding-inline-start: 0.625rem;
}

[data-menu='icones'] .ef-menu__grupo--aberto .ef-menu__tela--ativa::before {
    display: none;
}

/* A página termina 16px abaixo do conteúdo, como a do painel. */
.ef-conteudo {
    min-width: 0;
    margin-inline-start: var(--ef-menu);
    padding: 0 0.75rem 1rem;
}

/* Faixa de aviso (a NFC-e em contingência, o certificado perto de vencer, o estoque pendente da nota). */
.ef-faixa-aviso {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background: light-dark(var(--warning-50), rgb(245 158 11 / 0.12));
    box-shadow: 0 0 0 1px light-dark(var(--warning-200), rgb(245 158 11 / 0.3));
    color: light-dark(var(--warning-800), var(--warning-300));
    font-size: 0.875rem;
    font-weight: 500;
}

.ef-faixa-aviso .ef-icone {
    flex: none;
}

/* Vermelha: o que impede o trabalho ou vence logo, como a do painel. */
.ef-faixa-aviso--urgente {
    background: light-dark(var(--danger-50), rgb(239 68 68 / 0.12));
    box-shadow: 0 0 0 1px light-dark(var(--danger-200), rgb(239 68 68 / 0.3));
    color: light-dark(var(--danger-800), var(--danger-300));
}

.ef-conteudo > .ef-faixa-aviso {
    margin-top: 0.75rem;
}

[data-menu='icones'] .ef-conteudo {
    margin-inline-start: 4rem;
}

[data-menu='oculto'] .ef-menu {
    display: none;
}

[data-menu='oculto'] .ef-conteudo {
    margin-inline-start: 0;
}

.ef-fundo-do-menu {
    display: none;
}

@media (max-width: 63.99rem) {
    .ef-conteudo,
    [data-menu] .ef-conteudo {
        margin-inline-start: 0;
    }

    [data-menu] .ef-menu {
        display: none;
        width: var(--ef-menu);
        box-shadow: 0 10px 24px rgb(10 50 70 / 0.2);
    }

    [data-menu-aberto] .ef-menu {
        display: block;
    }

    [data-menu-aberto] .ef-fundo-do-menu {
        position: fixed;
        inset: var(--ef-topo) 0 0;
        z-index: 19;
        display: block;
        background: rgb(9 33 47 / 0.4);
    }

    /* Como o Filament abaixo de 1024px: só o botão do menu, sem o recuo do computador, e sem o logotipo. */
    .ef-topo__botao {
        margin-inline-start: 0;
    }

    .ef-topo__marca {
        display: none;
    }
}

@media (min-width: 96rem) {
    .ef-filial__rotulo {
        display: inline;
    }

    .ef-filial select {
        width: 15rem;
    }
}

@media (max-width: 39.99rem) {
    .ef-filial select {
        width: 8.5rem;
    }
}

/* ==== 3. Cabeçalho da tela (faixa branca, presa embaixo da barra superior) e botões ==== */

.ef-cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0 -0.75rem 0.625rem;
    padding: 0.5rem 0.75rem;
    background: var(--ef-fundo-painel);
    box-shadow: 0 1px 0 var(--ef-linha);
}

@media (min-width: 64rem) {
    .ef-cabecalho {
        position: sticky;
        top: var(--ef-topo);
        z-index: 15;
    }
}

.ef-cabecalho__titulo {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
}

.ef-cabecalho h1 {
    color: light-dark(var(--ef-marinho), #fff);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.75rem;
}

/* A linha embaixo do título ("Filial 4 - ..."), alinhada com o texto dele, como a de hoje. */
/* Na largura do subtítulo de hoje (42rem), depois do ícone do título; sem o ícone (o movimento de caixa), sem o recuo. */
.ef-cabecalho__subtitulo {
    max-width: calc(42rem + 2.625rem);
    margin-top: 0.5rem;
    padding-inline-start: 2.625rem;
    color: light-dark(var(--gray-600), var(--gray-400));
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.ef-cabecalho__titulo:not(:has(.ef-titulo-icone)) + .ef-cabecalho__subtitulo {
    max-width: 42rem;
    padding-inline-start: 0;
}

.ef-titulo-icone {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    background: light-dark(var(--primary-50), rgb(255 255 255 / 0.06));
    box-shadow: inset 0 0 0 1px light-dark(var(--primary-200), rgb(255 255 255 / 0.1));
    color: light-dark(var(--primary-600), var(--primary-400));
}

.ef-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

/* Na pesquisa, Recentes e Exportar vêm antes de Novo; nos outros modos, Recentes fica no fim (docs/08 §4.2). */
.ef-barra__primeiro {
    order: -2;
}

.ef-barra__segundo {
    order: -1;
}

.ef-botao {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-height: 2rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    background: light-dark(#fff, rgb(255 255 255 / 0.05));
    box-shadow: 0 0 0 1px light-dark(var(--gray-300), rgb(255 255 255 / 0.16));
    color: light-dark(var(--ef-marinho), #fff);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    white-space: nowrap;
}

.ef-botao:hover {
    background: light-dark(var(--gray-50), rgb(255 255 255 / 0.1));
}

.ef-botao > svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--gray-500);
}

.ef-botao:disabled {
    cursor: default;
    opacity: 0.7;
}

/* A ação principal da tela, a única em laranja. */
.ef-botao--principal {
    background: var(--destaque-600);
    box-shadow: none;
    color: #fff;
    font-weight: 500;
}

.ef-botao--principal:hover {
    background: var(--destaque-700);
}

.ef-botao--principal > svg {
    color: #fff;
}

/* Botões de cor (turquesa, verde, vermelho), como os de dentro das abas. */
.ef-botao--primario,
.ef-botao--sucesso,
.ef-botao--perigo-cheio {
    box-shadow: none;
    font-weight: 500;
}

.ef-botao--primario,
.ef-botao--perigo-cheio {
    color: #fff;
}

.ef-botao--primario {
    background: var(--primary-600);
}

.ef-botao--primario:hover {
    background: var(--primary-500);
}

/* O verde do Filament: fundo claro com texto escuro. */
.ef-botao--sucesso {
    background: light-dark(var(--success-400), var(--success-600));
    color: light-dark(var(--success-900), #fff);
}

.ef-botao--sucesso:hover {
    background: light-dark(var(--success-300), var(--success-700));
    color: light-dark(var(--success-800), #fff);
}

.ef-botao--sucesso > svg {
    color: inherit;
}

.ef-botao--perigo-cheio {
    background: var(--danger-600);
}

.ef-botao--perigo-cheio:hover {
    background: var(--danger-500);
}

.ef-botao--primario > svg,
.ef-botao--perigo-cheio > svg {
    color: #fff;
}

/* Excluir na barra: vermelho só no contorno. */
.ef-botao--perigo {
    box-shadow: inset 0 0 0 1px light-dark(var(--danger-300), var(--danger-800));
    color: light-dark(var(--danger-700), var(--danger-400));
}

.ef-botao--perigo:hover {
    background: light-dark(var(--danger-50), rgb(255 255 255 / 0.05));
}

/* O ícone do botão de contorno vermelho ("Cancelar o título") na cor do texto, como o do Filament. */
.ef-botao--perigo > svg {
    color: inherit;
}

/* A pendência na barra (o estoque da nota): laranja no contorno; na janela, o botão cheio. */
.ef-botao--alerta {
    box-shadow: inset 0 0 0 1px light-dark(var(--warning-300), var(--warning-800));
    color: light-dark(var(--warning-700), var(--warning-400));
}

.ef-botao--alerta:hover {
    background: light-dark(var(--warning-50), rgb(255 255 255 / 0.05));
}

.ef-botao--alerta > svg {
    color: inherit;
}

.ef-botao--alerta-cheio {
    background: var(--warning-600);
    box-shadow: none;
    color: #fff;
    font-weight: 500;
}

.ef-botao--alerta-cheio:hover {
    background: var(--warning-500);
}

/* Tecla de atalho no botão ("Gravar F6"); some no celular. */
.ef-atalho {
    margin-inline-start: 0.125rem;
    padding: 0 0.3125rem;
    border-radius: 0.25rem;
    background: color-mix(in oklab, currentColor 12%, transparent);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.125rem;
}

@media (max-width: 39.99rem) {
    .ef-atalho {
        display: none;
    }
}

.ef-botao-icone {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin: -0.375rem;
    border-radius: 0.375rem;
    color: light-dark(var(--gray-500), var(--gray-400));
}

.ef-botao-icone:hover {
    color: light-dark(var(--gray-600), var(--gray-300));
}

.ef-link-perigo {
    color: light-dark(var(--danger-700), var(--danger-300));
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
}

.ef-link-perigo:hover {
    text-decoration: underline;
}

/* ==== 4. Menus suspensos (recentes, usuário, filtros, colunas) ==== */

.ef-suspenso {
    position: relative;
}

/* Entre o cabeçalho da página (15) e a barra do topo (30), como os painéis suspensos do Filament: com a página rolada,
   a barra do topo fica por cima do painel. */
.ef-suspenso__painel {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 25;
    min-width: 14rem;
    max-width: calc(100vw - 1rem);
    padding: 0.25rem;
    border-radius: 0.375rem;
    background: var(--ef-fundo-painel);
    /* A sombra e o contorno dos painéis suspensos do Filament (filtros, colunas, recentes). */
    box-shadow: 0 0 0 1px light-dark(rgb(9 33 47 / 0.05), rgb(255 255 255 / 0.1)), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    color: var(--ef-texto);
}

.ef-suspenso__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem;
    border-radius: 0.375rem;
    color: light-dark(var(--gray-700), var(--gray-200));
    font-size: 0.875rem;
    line-height: 1.25rem;
    text-align: start;
    white-space: nowrap;
}

.ef-suspenso__item:hover,
.ef-suspenso__item:focus-visible {
    background: light-dark(var(--gray-50), rgb(255 255 255 / 0.05));
    outline: none;
}

/* A lista de um botão (os recentes), como a do Filament: 14rem de largura, um pixel entre os itens e o texto longo
   cortado com reticências. */
.ef-suspenso__painel--lista {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1px;
    width: 14rem;
}

.ef-suspenso__painel--lista .ef-suspenso__item {
    overflow: hidden;
    border-radius: 0.25rem;
}

.ef-suspenso__rotulo {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ef-suspenso__item > svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--gray-400);
}

.ef-suspenso__divisa {
    margin: 0.25rem -0.25rem;
    border-top: 1px solid var(--ef-linha);
}

.ef-suspenso__temas {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem 0;
}

.ef-suspenso__tema {
    display: flex;
    flex: 1;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 0.375rem;
    color: var(--gray-400);
}

.ef-suspenso__tema:hover {
    background: light-dark(var(--gray-50), rgb(255 255 255 / 0.05));
}

.ef-suspenso__tema--ativo {
    background: light-dark(var(--gray-50), rgb(255 255 255 / 0.05));
    color: var(--primary-600);
}

/* Painel de filtros e de colunas, ao lado dos botões da pesquisa. */
.ef-suspenso__painel--largo {
    width: 20rem;
    padding: 1.5rem;
}

/* O link do cabeçalho ("Limpar filtros") na linha do título, como o de hoje (no painel, ele fica na linha de 24px). */
.ef-suspenso__cabecalho {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.ef-suspenso__titulo {
    color: light-dark(var(--gray-950), #fff);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
}

.ef-suspenso__campos {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.ef-suspenso__rodape {
    margin-top: 1rem;
}

/* Painel de colunas como o do Filament. */
.ef-marcar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: light-dark(var(--gray-950), #fff);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
}

.ef-marcar + .ef-marcar {
    margin-top: 1.5rem;
}

.ef-marcar input {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    background: light-dark(#fff, rgb(255 255 255 / 0.05)) center / 100% no-repeat;
    box-shadow: 0 0 0 1px light-dark(color-mix(in oklab, var(--gray-950) 10%, transparent), rgb(255 255 255 / 0.2)), 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    appearance: none;
}

.ef-marcar input:checked {
    background-color: light-dark(var(--primary-600), var(--primary-500));
    background-image: var(--ef-marca);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

.ef-marcar input:disabled:checked {
    background-color: light-dark(var(--gray-400), var(--gray-600));
}

.ef-marcar input:focus-visible {
    outline: 2px solid var(--primary-600);
    outline-offset: 0;
}

/* ==== 5. Campos (filtros e formulários) ==== */

.ef-campo {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.ef-rotulo {
    color: light-dark(var(--gray-800), var(--gray-200));
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.42857;
}

/* O asterisco não aumenta a linha do rótulo. */
sup {
    position: relative;
    top: -0.5em;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}

.ef-rotulo sup {
    color: var(--danger-600);
    font-weight: 500;
}

.ef-entrada {
    display: flex;
    align-items: stretch;
    min-width: 0;
    border-radius: 0.375rem;
    background: light-dark(#fff, rgb(255 255 255 / 0.05));
    box-shadow: 0 0 0 1px light-dark(var(--gray-300), rgb(255 255 255 / 0.16));
}

.ef-entrada:focus-within {
    box-shadow: 0 0 0 1px var(--primary-500), 0 0 0 4px color-mix(in oklab, var(--primary-500) 22%, transparent);
}

.ef-entrada--erro,
.ef-entrada--erro:focus-within {
    box-shadow: 0 0 0 1px var(--danger-600);
}

.ef-entrada--bloqueada {
    background: light-dark(var(--gray-100), transparent);
    box-shadow: 0 0 0 1px var(--ef-linha);
}

.ef-entrada > input,
.ef-entrada > select,
.ef-entrada > textarea {
    flex: 1;
    width: 100%;
    min-width: 0;
    height: 1.875rem;
    padding: 0.3125rem 0.75rem;
    border: 0;
    border-radius: 0.375rem;
    outline: none;
    background: transparent;
    color: var(--ef-texto);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

/* Sem o desenho do sistema, como o campo do Filament: as setas do campo de número no cinza dele. */
.ef-entrada > input {
    appearance: none;
}

/* O campo de arquivos da janela (o XML da compra): o botão de escolher no cinza dos botões, o nome do arquivo ao lado. */
.ef-entrada--arquivo > input {
    height: auto;
    padding: 0.25rem;
    font-size: 0.875rem;
    cursor: pointer;
}

.ef-entrada--arquivo > input::file-selector-button {
    margin-inline-end: 0.75rem;
    padding: 0.3125rem 0.75rem;
    border: 0;
    border-radius: 0.375rem;
    background: light-dark(var(--gray-100), rgb(255 255 255 / 0.08));
    color: light-dark(var(--gray-800), var(--gray-100));
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

/* Área de texto na altura do Filament: linhas de 24px e mais 10px. */
.ef-entrada > textarea {
    height: auto;
    line-height: 1.5rem;
    resize: vertical;
}

.ef-entrada > select {
    padding-inline-end: 2rem;
    background: var(--ef-seta) no-repeat right 0.5rem center / 1.5em;
    appearance: none;
}

.ef-entrada > input::placeholder,
.ef-entrada > textarea::placeholder {
    color: var(--gray-400);
}

.ef-entrada > input:disabled,
.ef-entrada > select:disabled,
.ef-entrada > textarea:disabled {
    color: light-dark(var(--gray-500), var(--gray-400));
    cursor: default;
    opacity: 1;
}

.ef-entrada__prefixo,
.ef-entrada__sufixo {
    display: flex;
    flex: none;
    align-items: center;
    padding: 0 0.75rem;
    color: var(--gray-400);
}

/* Ícone antes do texto, como o do Filament: 12px antes e 8px depois. */
.ef-entrada__prefixo {
    padding-inline-end: 0.5rem;
}

.ef-entrada__prefixo + input {
    padding-inline-start: 0;
}

.ef-entrada__sufixo {
    border-inline-start: 1px solid var(--ef-linha);
}

.ef-entrada__acao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin: -0.375rem;
    border-radius: 0.375rem;
    color: light-dark(var(--primary-600), var(--primary-400));
}

.ef-entrada__acao:hover {
    color: light-dark(var(--primary-500), var(--primary-300));
}

.ef-num {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Combo com busca (resources/js/leve/combo.js): um botão que parece campo, a lista abre embaixo com uma busca. */
.ef-combo {
    position: relative;
    align-items: center;
}

/* 36px, a seta e o X como no select com busca do Filament. */
.ef-combo__botao {
    flex: 1;
    min-width: 0;
    height: 2.25rem;
    padding: 0.3125rem 2rem 0.3125rem 0.75rem;
    background: var(--ef-seta) no-repeat right 0.5rem center / 1.5em;
    outline: none;
    font-size: 0.875rem;
    line-height: 1.25rem;
    text-align: start;
}

.ef-combo--limpavel .ef-combo__botao {
    padding-inline-end: 3.5rem;
}

.ef-combo__botao:disabled {
    color: light-dark(var(--gray-500), var(--gray-400));
    cursor: default;
}

.ef-combo__texto {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ef-combo__texto--vazio {
    color: var(--gray-400);
}

.ef-combo__limpar {
    position: absolute;
    top: 50%;
    right: 2rem;
    display: flex;
    translate: 0 -50%;
    color: var(--gray-500);
}

.ef-combo__limpar:hover {
    color: var(--gray-600);
}

/* A lista como a do select de hoje: 15rem no máximo, com a busca colada no alto ao rolar, o anel de 5% e a sombra
   grande; as opções com 1px entre elas e a marcada (pelo teclado ou pelo mouse) no cinza mais claro. */
.ef-combo__lista {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    z-index: 30;
    width: 100%;
    min-width: 12rem;
    max-height: 15rem;
    overflow-y: auto;
    border-radius: 0.375rem;
    background: var(--ef-fundo-painel);
    box-shadow: 0 0 0 1px light-dark(color-mix(in oklab, var(--gray-950) 5%, transparent), rgb(255 255 255 / 0.1)), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.ef-combo__lista:has(.ef-combo__busca) {
    scroll-padding-top: 1.9375rem;
}

.ef-combo__busca {
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid light-dark(var(--gray-100), rgb(255 255 255 / 0.05));
    background: var(--ef-fundo-painel);
}

.ef-combo__busca input {
    width: 100%;
    height: 1.875rem;
    padding: 0.3125rem 0.75rem;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--ef-texto);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.ef-combo__busca input::placeholder {
    color: var(--gray-400);
}

.ef-combo__lista ul {
    display: grid;
    gap: 1px;
    padding: 0.25rem;
}

.ef-combo__lista li {
    padding: 0.5rem;
    border-radius: 0.25rem;
    color: var(--ef-texto);
    font-size: 0.875rem;
    line-height: 1.25rem;
    cursor: pointer;
}

.ef-combo__lista li:hover,
.ef-combo__lista li[aria-selected='true'] {
    background: light-dark(var(--gray-50), rgb(255 255 255 / 0.05));
}

.ef-combo__resumo {
    padding: 0.5rem 0.75rem;
    color: light-dark(var(--gray-500), var(--gray-400));
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.ef-ajuda {
    color: light-dark(var(--gray-600), var(--gray-400));
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.ef-erro {
    color: var(--danger-600);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

/* ==== 6. Avisos (canto de baixo, à direita) e janelas ==== */

.ef-avisos {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: min(24rem, calc(100vw - 2rem));
    pointer-events: none;
}

/* Dentro da janela aberta (layout.js põe o quadro nela): logo abaixo da caixa, no fluxo da janela, para não cobrir os
   botões dela em tela baixa (o celular deitado). */
.ef-janela > .ef-avisos {
    position: static;
    grid-row: 3;
    align-self: start;
    margin-top: 0.75rem;
}

/* Como o aviso de hoje (Filament\Notifications): os cantos de 8px, a sombra grande, o ícone de 20px, o texto 2px abaixo
   dele e o X num botão de 36px que avança sobre a margem. */
.ef-aviso {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 0.5rem;
    background: var(--ef-fundo-painel);
    box-shadow: 0 0 0 1px light-dark(color-mix(in oklab, var(--gray-950) 5%, transparent), rgb(255 255 255 / 0.1)), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    pointer-events: auto;
}

.ef-aviso > svg {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
}

.ef-aviso--sucesso > svg {
    color: var(--success-400);
}

.ef-aviso--alerta > svg {
    color: var(--warning-400);
}

.ef-aviso--erro > svg {
    color: var(--danger-400);
}

.ef-aviso--info > svg {
    color: var(--info-400);
}

.ef-aviso__texto {
    flex: 1;
    min-width: 0;
    margin-top: 0.125rem;
}

.ef-aviso__titulo {
    color: light-dark(var(--gray-950), #fff);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
}

.ef-aviso__detalhe {
    margin-top: 0.25rem;
    color: light-dark(var(--gray-500), var(--gray-400));
    font-size: 0.875rem;
    line-height: 1.25rem;
}

/* O botão do aviso ("Imprimir o recibo"), como a ação de link das notificações de hoje. */
.ef-aviso__acao {
    display: inline-block;
    margin-top: 0.75rem;
    color: light-dark(var(--primary-600), var(--primary-400));
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
}

.ef-aviso__acao:hover {
    text-decoration: underline;
}

.ef-aviso__fechar {
    display: flex;
    flex: none;
    align-self: flex-start;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin: -0.5rem;
    border-radius: 0.5rem;
    color: var(--gray-500);
}

.ef-aviso__fechar:hover {
    color: light-dark(var(--gray-600), var(--gray-400));
}

.ef-aviso__fechar svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Janela como a do painel: a caixa a 1/4 da altura livre, o X e a largura pelo tipo. O <dialog> cobre a tela. */
.ef-janela {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    padding: 1rem;
    border: 0;
    background: transparent;
    color: var(--ef-texto);
}

.ef-janela[open] {
    display: grid;
    grid-template-rows: 1fr auto 3fr;
    justify-items: center;
}

.ef-janela::backdrop {
    background: color-mix(in oklab, var(--gray-950) 50%, transparent);
}

.ef-janela__caixa {
    position: relative;
    grid-row: 2;
    width: 100%;
    max-width: 56rem;
    border-radius: 0.5rem;
    background: var(--ef-fundo-painel);
    box-shadow: 0 0 0 1px light-dark(color-mix(in oklab, var(--gray-950) 5%, transparent), rgb(255 255 255 / 0.1)), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.ef-janela--larga .ef-janela__caixa {
    max-width: 64rem;
}

.ef-janela__fechar {
    position: absolute;
    top: 0.625rem;
    inset-inline-end: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    color: light-dark(var(--gray-500), var(--gray-400));
}

.ef-janela__fechar:hover {
    color: light-dark(var(--gray-600), var(--gray-300));
}

.ef-janela__cabecalho {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 1.5rem 0;
}

/* O título longo quebra antes do X (no celular, cobria o fim da primeira linha; rodada 21, VE-R21-F4). */
.ef-janela__fechar + .ef-janela__cabecalho {
    padding-inline-end: 3.5rem;
}

.ef-janela__titulo {
    color: light-dark(var(--ef-marinho), #fff);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
}

.ef-janela__texto {
    margin-top: 0.5rem;
    color: light-dark(var(--gray-500), var(--gray-400));
    font-size: 0.875rem;
    line-height: 1.25rem;
}

/* Sem rolagem própria, como a de hoje: quem rola é a janela, e o cabeçalho da tabela fica preso no alto dela. */
.ef-janela__corpo {
    padding: 1.5rem;
}

.ef-janela__rodape {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0 1.5rem 1.5rem;
}

.ef-janela__cabecalho + .ef-janela__rodape {
    padding-top: 1.5rem;
}

.ef-janela__rodape .ef-botao {
    flex: 1;
}

/* Janela com campos: os botões à esquerda, do tamanho do texto. */
.ef-janela__rodape--inicio .ef-botao {
    flex: none;
}

.ef-janela__campos {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.ef-campo--recuado {
    margin-inline-end: 0.875rem;
}

/* Confirmação: ícone em cima, centralizada, como as do painel. */
.ef-janela--confirmar .ef-janela__caixa {
    max-width: 28rem;
    text-align: center;
}

.ef-janela--confirmar .ef-janela__cabecalho {
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.ef-janela__icone {
    display: flex;
    padding: 0.75rem;
    border-radius: 999px;
    background: light-dark(var(--danger-100), color-mix(in oklab, var(--danger-500) 20%, transparent));
    color: light-dark(var(--danger-600), var(--danger-400));
}

.ef-janela__icone--neutro {
    background: light-dark(var(--gray-100), rgb(255 255 255 / 0.05));
    color: var(--gray-500);
}

.ef-janela__icone--alerta {
    background: light-dark(var(--warning-100), color-mix(in oklab, var(--warning-500) 20%, transparent));
    color: light-dark(var(--warning-600), var(--warning-400));
}

/* Na cor de destaque (o laranja do "Aplicar" da atualização de preço em lote), como a pergunta de hoje. */
.ef-janela__icone--destaque {
    background: light-dark(var(--destaque-100), color-mix(in oklab, var(--destaque-500) 20%, transparent));
    color: light-dark(var(--destaque-600), var(--destaque-400));
}

/* Tabela densa (histórico, títulos, crédito). */
.ef-grade {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
}

/* O cabeçalho fica por cima das linhas que rolam por baixo dele (e dos botões delas), como o de hoje. */
.ef-grade th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.4375rem 0.625rem;
    border-bottom: 1px solid var(--ef-linha);
    background: var(--ef-fundo-painel);
    color: light-dark(var(--gray-600), var(--gray-300));
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.ef-grade td {
    padding: 0.3125rem 0.625rem;
    border-bottom: 1px solid light-dark(var(--gray-100), rgb(255 255 255 / 0.08));
    vertical-align: top;
    white-space: nowrap;
}

.ef-grade .ef-grade__principal {
    width: 100%;
    min-width: 14rem;
    white-space: normal;
}

.ef-grade .ef-grade__num {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.ef-vazio {
    padding: 1.5rem 0;
    color: var(--gray-500);
    text-align: center;
}

/* Os totais, como os de hoje: o rodapé da nota e os da posição de estoque (o rótulo pequeno em cima do valor; o principal
   maior, no azul da casa). */
.ef-totais {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin: 0;
}

.ef-totais > div {
    display: flex;
    flex-direction: column;
}

.ef-totais dt {
    color: var(--gray-500);
    font-size: 0.75rem;
    line-height: 1.5;
}

.ef-totais dd {
    margin: 0;
    color: light-dark(var(--gray-950), var(--gray-100));
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    line-height: 1.5rem;
}

/* O texto pequeno ao lado do total (o valor das entradas do kardex), no cinza e sem o negrito, como o do painel. */
.ef-totais small {
    color: var(--gray-500);
    font-weight: 400;
}

.ef-totais__principal dd {
    color: light-dark(var(--ef-marinho), var(--primary-300));
    font-size: 1.5rem;
    line-height: 1.75rem;
}

/* A seta das listas (a do Filament) e a marca da caixa de marcar. */
:root {
    --ef-marca: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
    --ef-seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
}