/*
  Tema visual novo do LemeSoft (light + dark), carregado por último (depois de
  custom.css) - a intenção original era ganhar o empate de especificidade contra o
  CSS do Berry só pela ordem de carregamento, mas isso não bastou na prática (o
  usuário confirmou que o arquivo carrega, mas nada muda visualmente - há algo em
  22k linhas de Berry, ou num <style> injetado por algum componente Blazor, com
  especificidade igual ou maior que não foi possível isolar). Por isso todo valor
  visual aqui usa !important: garante que este arquivo vence sempre, sem precisar
  caçar/mexer no CSS do Berry (que continua controlando posicionamento, layout,
  responsividade - só a cor/sombra/raio é forçada por cima).

  Estratégia de tokens continua a mesma: --leme-* são os tokens de verdade
  (cor/raio/sombra); [data-pc-theme="dark"] só redefine os tokens, não repete seletor.
*/

:root {
  /* ---- tokens (light, default) ---- */
  --leme-bg: #f4f6f9;
  --leme-surface: #ffffff;
  --leme-surface-2: #f8fafc;
  --leme-border: #e5e9f0;
  --leme-border-strong: #d7dce5;
  --leme-text: #1c2434;
  --leme-text-2: #5b6478;
  --leme-text-muted: #8a91a3;
  --leme-primary: #2f6feb;
  --leme-primary-dark: #1f57c9;
  --leme-primary-bg: #eaf1ff;
  --leme-success: #12875a;
  --leme-success-dark: #0c6e49;
  --leme-success-bg: #e5f7ee;
  --leme-danger: #d64545;
  --leme-danger-dark: #c23a3a;
  --leme-danger-bg: #fdecec;
  --leme-amber: #b6790a;
  --leme-amber-bg: #fdf3e2;
  --leme-teal: #0e8a8a;
  --leme-teal-bg: #e3f4f4;
  --leme-radius: 10px;
  --leme-shadow-sm: 0 1px 2px rgba(20, 24, 40, .05);
  --leme-shadow-md: 0 4px 16px rgba(20, 24, 40, .08);
  --leme-highlight-gradient: linear-gradient(135deg, #eef4ff, #f4f0ff);
  --leme-highlight-border: #dde6fb;
}

[data-pc-theme="dark"] {
  /* ---- tokens (dark) - mesma família azul/slate, não é inversão pura ---- */
  --leme-bg: #10131a;
  --leme-surface: #171b24;
  --leme-surface-2: #1d222d;
  --leme-border: #262c3a;
  --leme-border-strong: #333b4c;
  --leme-text: #e6e9f0;
  --leme-text-2: #aab0c0;
  --leme-text-muted: #7d8494;
  --leme-primary: #5b8def;
  --leme-primary-dark: #7ea2f2;
  --leme-primary-bg: #182236;
  --leme-success: #28c58a;
  --leme-success-dark: #3ddf9f;
  --leme-success-bg: #122a20;
  --leme-danger: #f16565;
  --leme-danger-dark: #f58080;
  --leme-danger-bg: #2e1518;
  --leme-amber: #e0a233;
  --leme-amber-bg: #2e2410;
  --leme-teal: #2dd4d4;
  --leme-teal-bg: #123030;
  --leme-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --leme-shadow-md: 0 4px 16px rgba(0, 0, 0, .45);
  --leme-highlight-gradient: linear-gradient(135deg, #1b2744, #251f3f);
  --leme-highlight-border: #34406b;
}

/* ================= tipografia ================= */
/* site.css define "body, button, input, select, textarea" com Open Sans (sem
   !important) - repete a mesma lista de seletores aqui pra garantir que ela some
   por completo, não só o <body>. Maior mudança perceptível de "cara nova" de
   longe - cor sozinha não é suficiente pra ler como um tema diferente. */

body, button, input, select, textarea,
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--leme-text) !important;
  font-weight: 700 !important;
}

/* ================= body / cards ================= */

html, body {
  background-color: var(--leme-bg) !important;
  color: var(--leme-text) !important;
}

.pc-container, .pc-content {
  background-color: var(--leme-bg) !important;
}

.page-box,
.card {
  background-color: var(--leme-surface) !important;
  border: 1px solid var(--leme-border) !important;
  border-radius: var(--leme-radius) !important;
  box-shadow: var(--leme-shadow-sm) !important;
}

/* .page-box-compact (site.css) já existe pra telas onde o min-height quase de tela
   cheia do .page-box padrão (calc(100vh - 220px), pensado pra manter a paginação
   perto do rodapé mesmo com poucos resultados) deixaria um vão vazio enorme com
   poucos itens (ex.: lista com 1 resultado só) - usado nas listas de venda
   (SaleListBase.razor). Sem NENHUM min-height, a paginação ficaria colada direto
   embaixo de uma única linha, parecendo apertado - esse mínimo modesto (bem menor
   que o antigo) só evita esse extremo, sem reservar quase a tela toda.*/
.page-box-compact .table-responsive {
  min-height: 240px;
}

.card {
  margin-bottom: 18px;
}

.card:last-child {
  margin-bottom: 0;
}

.page-box h3,
.page-title {
  color: var(--leme-text) !important;
}

.page-title-subtext {
  color: var(--leme-text-muted);
  font-size: 12.5px;
  margin-top: 4px;
}

.breadcrumb-page,
.breadcrumb-page .breadcrumb-item a {
  color: var(--leme-text-muted) !important;
}

/* Item atual (a página em que você está, sem link) fica mais escuro que os
   anteriores, igual ao mockup - herdava o mesmo cinza claro dos links. */
.breadcrumb-page .breadcrumb-item.active {
  color: var(--leme-text-2) !important;
  font-weight: 500;
}

/* Era 16px (site.css) - mockup usa 6px, respiro bem mais justo entre breadcrumb e título.
   O <ol class="breadcrumb"> do Bootstrap por dentro do <nav class="breadcrumb-page">
   tem seu PRÓPRIO margin-bottom:1rem (16px) somando por cima - zera esse aqui, só o
   <nav> de fora carrega os 6px. */
.breadcrumb-page {
  margin-bottom: 6px !important;
}

/* Separador vira "/" (mockup) em vez da seta SVG padrão do Bootstrap. */
.breadcrumb-page .breadcrumb-item + .breadcrumb-item::before {
  content: "/" !important;
  color: var(--leme-text-muted) !important;
}

.breadcrumb-page .breadcrumb {
  margin-bottom: 0 !important;
}

/* ================= stat cards (PageHeader do SaleFormBase) ================= */

.info-box {
  background-color: var(--leme-surface) !important;
  border: 1px solid var(--leme-border) !important;
  border-radius: var(--leme-radius) !important;
  box-shadow: var(--leme-shadow-sm) !important;
  padding: 14px 16px !important;
}

.info-box:hover {
  box-shadow: var(--leme-shadow-md) !important;
}

.info-title {
  color: var(--leme-text-muted) !important;
  font-size: 11.5px !important;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600 !important;
}

.info-value {
  color: var(--leme-text) !important;
  font-size: 18px !important;
}

/* Card de destaque (Total) - gradiente sutil, token pra funcionar em light/dark sem
   repetir a regra toda (ver definição de --leme-highlight-gradient no :root e em
   [data-pc-theme="dark"]). */
.info-box.info-box-highlight {
  background: var(--leme-highlight-gradient) !important;
  border-color: var(--leme-highlight-border) !important;
}

.info-box.info-box-highlight .info-value {
  font-size: 22px !important;
  color: var(--leme-primary-dark) !important;
}

/* ================= campos de formulário ================= */
/* LemeSelect/LemeTextField/LemeNumeric renderizam form-control/form-select puro -
   cor é hardcoded no Berry, então precisa de override explícito. */

.form-control,
.form-select {
  color: var(--leme-text) !important;
  background-color: var(--leme-surface) !important;
  border: 1px solid var(--leme-border-strong) !important;
  border-radius: 8px !important;
}

.form-control:focus,
.form-select:focus {
  color: var(--leme-text) !important;
  background-color: var(--leme-surface) !important;
  border-color: var(--leme-primary) !important;
  box-shadow: 0 0 0 3px var(--leme-primary-bg) !important;
}

.form-control:disabled,
.form-select:disabled {
  background-color: var(--leme-surface-2) !important;
  color: var(--leme-text-muted) !important;
}

/* Prefixo/sufixo (R$, %) do LemeNumeric usa .input-group-text do Bootstrap, que por
   padrão tem fundo cinza (#eceff1) diferente do input - cria a "caixinha" cinza
   grudada. Troca o fundo/borda pra bater com o input do lado, aí lê como texto
   discreto dentro do mesmo campo, sem caixa separada. */
.input-group-text {
  background-color: var(--leme-surface) !important;
  border-color: var(--leme-border-strong) !important;
  color: var(--leme-text-muted) !important;
  font-weight: 600 !important;
}

.input-group:focus-within .input-group-text {
  border-color: var(--leme-primary) !important;
}

/* Ícone/texto "dentro" do input: a versão anterior usava .input-group, que mesmo
   com cor igualada ainda lia como "duas caixas" grudadas (cada uma com o próprio
   border-radius pleno, já que o .form-control{border-radius:8px !important} global
   desfaz o corte de canto que o Bootstrap faz nos elementos do meio de um
   input-group). Trocado por um único input com o texto/ícone sobreposto por cima -
   estrutura igual ao mockup (.input-prefix/.input-suffix), sem nenhuma borda extra.
   Nasceu no LemeNumeric (R$/%) mas o nome "numeric" ficou genérico - reaproveitado
   por LemeDocument (check/x do CPF/CNPJ), LemeZipCode (lupa do CEP) e LemeTextField
   (AdornmentIcon), então cobre "input" e "textarea". */
.leme-numeric-wrap {
  position: relative;
}

.leme-numeric-wrap.has-prefix input,
.leme-numeric-wrap.has-prefix textarea {
  padding-left: 30px !important;
}

.leme-numeric-wrap.has-suffix input,
.leme-numeric-wrap.has-suffix textarea {
  padding-right: 28px !important;
}

.leme-numeric-adornment {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--leme-text-muted);
  font-weight: 600;
  pointer-events: none;
}

.leme-numeric-adornment.prefix {
  left: 10px;
}

.leme-numeric-adornment.suffix {
  right: 10px;
}

/* LemeZipCode: a lupa é um botão de verdade (dispara a busca do CEP), não só
   decoração - reverte o pointer-events:none acima e zera a aparência padrão de
   <button> pra continuar parecendo um ícone solto dentro do input. */
.leme-numeric-adornment.is-button {
  pointer-events: auto;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
}

.leme-numeric-adornment.is-button:hover {
  color: var(--leme-primary);
}

.form-check-input {
  background-color: var(--leme-surface) !important;
  border-color: var(--leme-border-strong) !important;
}

.form-check-input:checked {
  background-color: var(--leme-primary) !important;
  border-color: var(--leme-primary) !important;
}

.form-check.form-switch .form-check-input {
  background-color: var(--leme-border-strong) !important;
}

/* O app troca de tema via [data-pc-theme], mas o --bs-body-color (usado por
   .form-check-label) só é redefinido pelo Bootstrap dentro de
   [data-bs-theme=dark], atributo que esse app nunca seta - a variável fica
   travada no valor claro (#212529) mesmo com o body já certo, deixando o
   texto dos switches/checkboxes ilegível no escuro. */
.form-check-label {
  color: var(--leme-text) !important;
}

.app-field-label {
  color: var(--leme-text-2) !important;
}

/* ================= botões ================= */

.btn-primary {
  background-color: var(--leme-primary) !important;
  border-color: var(--leme-primary) !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
  background-color: var(--leme-primary-dark) !important;
  border-color: var(--leme-primary-dark) !important;
}

.btn-success {
  background-color: var(--leme-success) !important;
  border-color: var(--leme-success) !important;
}

.btn-success:hover,
.btn-success:active,
.btn-success:focus {
  background-color: var(--leme-success-dark) !important;
  border-color: var(--leme-success-dark) !important;
}

.btn-danger {
  background-color: var(--leme-danger) !important;
  border-color: var(--leme-danger) !important;
}

.btn-danger:hover,
.btn-danger:active,
.btn-danger:focus {
  background-color: var(--leme-danger-dark) !important;
  border-color: var(--leme-danger-dark) !important;
}

/* .btn-outline-primary incluído de propósito: usado hoje pra "Voltar"/"Filtros"/
   Editar em tabela, mas no mockup toda ação secundária é neutra (fundo branco, borda
   cinza) - só existe UM botão "gritando" (azul sólido) por tela. Restilizar aqui em
   vez de trocar a classe em ~30 arquivos - mesmo resultado visual, sem mexer em
   markup nenhum. Fundo é var(--leme-surface) (branco), não transparente - esses
   botões ficam soltos no fundo cinza da página (fora do page-box), então precisam de
   um branco de verdade pra aparecer como pill, igual ao mockup. */
.btn-outline-secondary,
.btn-outline-primary {
  color: var(--leme-text-2) !important;
  border-color: var(--leme-border-strong) !important;
  background-color: var(--leme-surface) !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:active,
.btn-outline-secondary:focus,
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary:focus {
  color: var(--leme-text) !important;
  background-color: var(--leme-surface-2) !important;
  border-color: var(--leme-border-strong) !important;
}

.btn-icon {
  color: var(--leme-text-2) !important;
}

.btn-icon:hover {
  background-color: var(--leme-surface-2) !important;
}

/* ================= tabela (LemeTable) ================= */

.table {
  color: var(--leme-text) !important;
  --bs-table-color: var(--leme-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--leme-border);
  --bs-table-hover-color: var(--leme-text);
  --bs-table-hover-bg: var(--leme-surface-2);
}

.table > :not(caption) > * > * {
  border-bottom-color: var(--leme-border) !important;
}

/* Padrão do mockup: toda tabela tem uma borda no topo separando ela do que
   vem antes (toolbar de filtros, card-header etc). Quando o elemento
   imediatamente anterior já tem border-bottom E fica colado (Class="mt-0",
   ex. SimilarProducts.razor), essa borda dobraria em cima da outra - nesse
   caso removemos o border-bottom de lá em vez de tirar essa daqui, pra manter
   uma fonte única (a tabela) pra essa linha. */
.table-responsive {
  border-top: 1px solid var(--leme-border);
}

.table thead th {
  background-color: var(--leme-surface-2) !important;
  color: var(--leme-text-muted) !important;
  border-bottom: 1px solid var(--leme-border) !important;
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .04em;
  font-weight: 700 !important;
  padding: 11px 16px !important;
}

/* Padrão do mockup pra TODAS as tabelas do sistema (não só Similar/Equivalente
   - !important pra vencer o --bs-table-cell-padding-y do .table-sm usado pelo
   LemeTable com Dense="true", que é a maioria das listas). */
.table tbody td {
  padding: 13px 16px !important;
}

.table-hover > tbody > tr:hover > * {
  background-color: var(--leme-surface-2) !important;
  color: var(--leme-text) !important;
}

/* ================= dropdown (LemeActionsMenu) ================= */

.dropdown-menu {
  color: var(--leme-text) !important;
  background-color: var(--leme-surface) !important;
  border: 1px solid var(--leme-border) !important;
  box-shadow: var(--leme-shadow-md) !important;
}

.dropdown-item {
  color: var(--leme-text-2) !important;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item:active {
  color: var(--leme-primary-dark) !important;
  background-color: var(--leme-primary-bg) !important;
}

/* .dropdown-item (acima) e o .text-danger do Bootstrap são os dois de uma classe
   só com !important - o .dropdown-item ganhava por vir depois no arquivo, apagando
   o vermelho de itens perigosos (ex.: "Excluir" com Danger="true" em
   LemeActionsMenuItem). Seletor composto pra garantir que o vermelho sempre vence. */
.dropdown-item.text-danger {
  color: var(--leme-danger) !important;
}

.dropdown-item.text-danger:hover,
.dropdown-item.text-danger:focus,
.dropdown-item.text-danger:active {
  color: var(--leme-danger-dark) !important;
  background-color: var(--leme-danger-bg) !important;
}

/* .dropdown-menu (Berry/Bootstrap) usa 0.65rem de padding vertical POR ITEM e
   fonte 0.875rem por padrão - some com a margem do divisor (0.5rem) e o menu
   "..." fica bem mais espaçoso/grande que o mockup em qualquer tela do app (é a
   mesma variável do Bootstrap, então mexendo aqui cobre todo mundo, não só este
   menu). Valores abaixo batem com o mockup (padding:8px 10px;font-size:13px). */
.dropdown-menu {
  --bs-dropdown-item-padding-y: 8px;
  --bs-dropdown-item-padding-x: 12px;
  --bs-dropdown-font-size: 13px;
  --bs-dropdown-divider-margin-y: 6px;
}

/* A variável acima (--bs-dropdown-divider-margin-y) não bastou: existe um "hr {
   margin-top:2rem !important; margin-bottom:1.2rem !important; }" genérico em
   custom.css (feito pra divisores de conteúdo de página) que vazava pro <hr> do
   dropdown e ganhava por causa do !important - minha regra não tinha !important
   pra competir. Seletor de classe (.dropdown-divider) + !important garante que
   ganha, já que tem mais especificidade que o "hr" sozinho. */
.dropdown-divider {
  margin: 6px 0 !important;
}

/* ================= paginação (LemePagination) ================= */

.page-link {
  background-color: var(--leme-surface) !important;
  border-color: var(--leme-border-strong) !important;
  color: var(--leme-text-2) !important;
}

.page-link:hover {
  background-color: var(--leme-surface-2) !important;
  color: var(--leme-text) !important;
}

.page-item.active .page-link {
  background-color: var(--leme-primary) !important;
  border-color: var(--leme-primary) !important;
  color: #ffffff !important;
}

.page-item.disabled .page-link {
  background-color: var(--leme-surface) !important;
  border-color: var(--leme-border) !important;
  color: var(--leme-text-muted) !important;
}

/* ================= badges de situação ================= */

.badge.bg-success { background-color: var(--leme-success) !important; }
.badge.bg-danger { background-color: var(--leme-danger) !important; }
.badge.bg-warning { background-color: var(--leme-amber) !important; }
.badge.bg-secondary { background-color: var(--leme-text-muted) !important; }
.badge.bg-primary { background-color: var(--leme-primary) !important; }
.badge.bg-info { background-color: #0e8a8a !important; }

/* ================= sidebar / header ================= */

.pc-sidebar {
  background-color: var(--leme-surface) !important;
  border-right: 1px solid var(--leme-border) !important;
}

.pc-header {
  background-color: var(--leme-surface) !important;
  border-bottom: 1px solid var(--leme-border) !important;
  color: var(--leme-text-2) !important;
}

.pc-head-link {
  color: var(--leme-text-2) !important;
}

.pc-sidebar .pc-navbar > .pc-item > .pc-link {
  color: var(--leme-text-2) !important;
}

.pc-sidebar .pc-navbar > .pc-item:hover:not(.active) > .pc-link {
  color: var(--leme-primary) !important;
}

/* O <NavLink> do Blazor põe a classe "active" no próprio <a> (pc-link) quando a rota
   bate, não no <li class="pc-item"> pai como o Berry original esperava - por isso o
   seletor certo é .pc-link.active, não .pc-item.active > .pc-link (que nunca bate
   nesta aplicação). Cobre tanto os itens de primeiro nível quanto os de submenu. */
.pc-sidebar .pc-navbar .pc-link.active {
  background-color: var(--leme-primary-bg) !important;
  color: var(--leme-primary-dark) !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}

.pc-sidebar .pc-navbar .pc-link.active .pc-micon i {
  color: var(--leme-primary-dark) !important;
}

/* Menu mais compacto, como o .nav-item dos mockups. */
.pc-sidebar .pc-link {
  padding: 9px 12px !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
}

.pc-sidebar .pc-micon {
  margin-right: 10px !important;
  width: 16px !important;
  height: 16px !important;
}

.pc-sidebar .pc-micon i {
  font-size: 14px !important;
}

/* Ícones do menu (fas fa-*, ver NavMenu.razor) - preenchidos e um pouco maiores que
   os Tabler usados no resto do app, como pedido. */
.pc-sidebar .pc-micon i.fas {
  font-size: 16px !important;
}

/* Respiro da seta do accordion - estava colada na borda direita do menu. */
.pc-sidebar .pc-arrow {
  margin-right: 4px !important;
}

.pc-sidebar .pc-caption {
  padding: 16px 12px 6px !important;
}

.pc-sidebar .pc-caption label,
.pc-sidebar .pc-caption span:not(.badge) {
  color: var(--leme-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .06em;
  font-size: 11px !important;
  font-weight: 600 !important;
}

/* O Berry desenha uma linha vertical + bolinha conectando os itens do submenu
   (efeito "árvore") - o mockup não tem isso, é indentação simples. Remove a linha/
   bolinha e dá um padding-left próprio pros itens do submenu (em vez do padding
   genérico de 9px 12px acima, que "colava" tudo sem indentação nenhuma - o
   .pc-submenu .pc-link original do Berry tinha padding-left:60px, mas sem
   !important, então o !important genérico de cima estava vencendo). */
.pc-sidebar .pc-navbar > .pc-item .pc-submenu:after,
.pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-item > .pc-link:after {
  display: none !important;
}

.pc-sidebar .pc-navbar > .pc-item .pc-submenu {
  padding: 2px 0;
}

.pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-link {
  padding: 9px 12px 9px 34px !important;
}

.pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-item + .pc-item {
  margin-top: 2px;
}

.pc-sidebar .m-header {
  padding: 10px 16px !important;
}

.pc-sidebar .m-header img.logo {
  max-height: 34px !important;
  width: auto !important;
}

/* ================= barra de filtro inline das listas (poucos campos, sem modal) =================
   Fica dentro do .page-box, acima da LemeTable - mesmo espírito do ".toolbar" do
   mockup: faixa cinza colada no topo do MESMO box da tabela (não um card à
   parte "jogado" ali), com só uma linha divisória entre filtro e tabela.
   .page-box tem padding próprio (25px, 10px no topo) - a margem negativa
   cancela isso, fazendo a barra encostar nas bordas do box. O espaço que
   sobrava entre a barra e a tabela NÃO era gap do flex (.page-content não tem
   gap nenhum) - era o "mt-5"/"mt-3" que LemeTable/LemeTableEditable colocam
   por padrão no próprio wrapper (fixado via parâmetro Class, mesmo padrão já
   usado pra outras tabelas nesta sessão) - cada tela passa Class="mt-0 ..."
   quando quer a tabela colada embaixo de alguma coisa, como aqui. */
.leme-list-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background-color: var(--leme-surface-2);
  padding: 14px 25px;
  margin: -10px -25px 0 -25px;
  border-radius: var(--leme-radius) var(--leme-radius) 0 0;
}

.leme-list-toolbar-field {
  min-width: 0;
}

/* Sangra a LemeTable/LemeTableEditable pros lados também (Class="mt-0
   leme-list-table-bleed"), pra ela ocupar 100% da largura do .page-box em vez
   de ficar com a margem de 25px do box nas laterais - mesma lógica da barra
   de filtro acima, só que sem precisar cancelar o topo (a tabela não é o
   primeiro filho do box). */
.leme-list-table-bleed {
  margin-left: -25px;
  margin-right: -25px;
}

/* Bootstrap só define overflow-x:auto em .table-responsive, sem overflow-y
   explícito - por padrão dos navegadores (spec CSS), quando um eixo do
   overflow não é "visible" o outro deixa de ser "visible" de verdade e vira
   "auto" também. Isso por si só já cortaria visualmente o menu "..."
   (LemeActionsMenu) quando ele abre pra baixo e não cabe dentro da altura do
   wrapper - corrigido aqui. MAS não bastou sozinho: o dropdown é posicionado
   via Popper (Bootstrap), que decide ONDE abrir com base no espaço
   disponível dentro do boundary mais próximo com overflow não-visible - como
   `.table-responsive` ainda tem overflow-x:auto, o Popper continua
   enxergando ele como boundary e simplesmente não abre o menu pra fora dele,
   não importa o overflow-y. Por isso o `min-height` abaixo (mesmo valor já
   usado em `.page-box-compact .table-responsive`, sequência 76): dá altura
   de sobra dentro do próprio boundary pro Popper ter onde posicionar o menu,
   mesmo com a tabela tendo só 1-2 linhas. */
.table-responsive {
  overflow-y: visible !important;
}

.leme-list-table-bleed .table-responsive {
  min-height: 240px;
}

/* Chip clicável (ex.: Ativos/Inativos) - substitui o LemeSwitch na barra de
   filtro inline, mesmo visual dos chips "Situação/Vendedor" do mockup em vez
   de um toggle solto no meio dos campos de texto. */
.leme-toggle-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  border-radius: 20px;
  border: 1px solid var(--leme-border-strong);
  background-color: var(--leme-surface);
  color: var(--leme-text-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.12s;
}

.leme-toggle-chip .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
}

.leme-toggle-chip:hover {
  background-color: var(--leme-surface-2);
}

.leme-toggle-chip.is-active {
  background-color: var(--leme-primary-bg);
  border-color: var(--leme-primary-bg);
  color: var(--leme-primary-dark);
}

.leme-toggle-chip.is-active:hover {
  background-color: var(--leme-primary-bg);
  filter: brightness(0.97);
}

.leme-list-toolbar .spacer {
  flex: 1;
}

/* ================= chips de filtro ativo (LemeFilterChips) ================= */

/* Quando existe (renderização condicional, só com filtro ativo), fica logo
   abaixo de .leme-list-toolbar - mesmo fundo/sangria lateral dela, pra ler
   como uma continuação da barra de filtro (mesmo bloco cinza) em vez de um
   elemento solto colado nela. margin-bottom 0 pra continuar encostando na
   tabela embaixo, igual a barra sozinha já encosta (mesma lógica de
   .leme-list-table-bleed logo abaixo). */
.leme-filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  background-color: var(--leme-surface-2);
  margin: 0 -25px 0 -25px;
  padding: 0 25px 14px 25px;
}

.leme-filter-chips .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--leme-primary-bg) !important;
  color: var(--leme-primary-dark) !important;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
}

.leme-filter-chips .chip [role="button"] {
  display: inline-flex;
  cursor: pointer;
  font-size: 10px;
  opacity: .8;
}

.leme-filter-chips .chip [role="button"]:hover {
  opacity: 1;
}

/* Divisor de seção dentro de formulários grandes (ex.: "Endereço" em
   BranchForm/CompanyProfilePage, "Segurança" em ProfilePage) - substitui o
   `<hr/><h3>` cru usado antes, sem precisar de componente novo. */
.leme-form-section {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--leme-text) !important;
  padding-bottom: 10px;
  margin: 8px 0 18px;
  border-bottom: 1px solid var(--leme-border);
}

.leme-form-section i {
  color: var(--leme-primary) !important;
  font-size: 16px;
}

/* Upload de avatar/logo (Perfil, "Minha Empresa", Filial, Empresa) - clique
   na própria imagem/placeholder em vez de um botão "Selecionar foto" à
   parte (o LemeFileUpload por baixo já cobre o elemento inteiro com um
   <input type=file> invisível). Antes vivia em ProfilePage.razor.css/
   CompanyProfilePage.razor.css (CSS "scoped" do Blazor) - parou de valer
   quando o HTML da imagem passou a ser renderizado dentro do componente
   compartilhado BranchForm (sequência 101), já que CSS scoped só se aplica
   ao HTML do PRÓPRIO componente, não ao de um filho - por isso a caixa da
   imagem ficava sem nenhum estilo em Filial/Empresa (e em "Minha Empresa"
   também, depois da troca). Centralizado aqui, global, pros dois casos
   (ProfilePage renderiza direto; BranchForm renderiza como filho). */
.leme-avatar-upload {
  position: relative !important;
  width: 250px !important;
  height: 250px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

.leme-avatar-upload .profile-image-preview {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.leme-avatar-upload .profile-image-placeholder {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border: 2px dashed var(--leme-border-strong) !important;
  color: var(--leme-text-muted) !important;
  font-size: 13px !important;
  background-color: var(--leme-surface-2) !important;
  box-sizing: border-box !important;
}

/* Ícone "sem imagem" desenhado à mão (SVG inline, não é <img>) - garante que
   nunca aparece o ícone de imagem quebrada do navegador, já que não depende
   de nenhum arquivo/URL sendo carregado. */
.leme-avatar-placeholder-icon {
  width: 40px !important;
  height: 40px !important;
}

.leme-avatar-upload .leme-avatar-overlay {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: rgba(20, 24, 40, .6) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  opacity: 0 !important;
  transition: opacity .15s ease !important;
}

.leme-avatar-upload:hover .leme-avatar-overlay {
  opacity: 1 !important;
}

/* Badge de contagem no botão "Mais filtros" (quantos filtros avançados,
   além do campo principal já visível na barra, estão ativos no momento). */
.leme-badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 10px;
  background-color: var(--leme-primary);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  margin-left: 2px;
}

/* ================= status pill (LemeStatusBadge) ================= */

.status-pill {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 4px 11px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.status-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
}

.status-pill.status-success { background-color: var(--leme-success-bg) !important; color: var(--leme-success) !important; }
.status-pill.status-danger { background-color: var(--leme-danger-bg) !important; color: var(--leme-danger) !important; }
.status-pill.status-warning { background-color: var(--leme-amber-bg) !important; color: var(--leme-amber) !important; }
/* status-info tinha a MESMA cor de status-primary (os dois usavam
   --leme-primary-bg/-dark) - "Aberto" (Primary) e "Emitido" (Info) ficavam com o
   mesmo azul, dando a impressão de "tudo fica azul". Info agora usa um teal
   próprio, distinto do primary. */
.status-pill.status-info { background-color: var(--leme-teal-bg) !important; color: var(--leme-teal) !important; }
.status-pill.status-primary { background-color: var(--leme-primary-bg) !important; color: var(--leme-primary-dark) !important; }

/* ================= tamanho do menu/header (igual aos mockups: 236px/60px) =================
   O Berry acopla essas medidas em vários seletores (sidebar, header, container de
   conteúdo, rodapé) - todos sobrescritos juntos aqui pra não desalinhar. Descartados
   de propósito: .page-header/.sticky-action/variantes RTL/.pc-header .m-header -
   confirmado que nenhuma dessas classes é usada em nenhum .razor do projeto. */

.pc-sidebar {
  width: 236px !important;
}

/* O botão de hambúrguer (ToggleDesktopSidebar) colapsa o menu adicionando a classe
   .pc-sidebar-hide (mecanismo do Berry, width:0 sem !important) - como a regra de
   236px acima usa !important, ela ganhava sempre e o menu parava de fechar. Repete
   aqui com !important também, pra especificidade (duas classes) decidir de novo. */
.pc-sidebar.pc-sidebar-hide {
  width: 0 !important;
}

.pc-sidebar.pc-sidebar-hide ~ .pc-header {
  left: 0 !important;
}

.pc-sidebar.pc-sidebar-hide ~ .pc-footer,
.pc-sidebar.pc-sidebar-hide ~ .pc-container {
  margin-left: 0 !important;
}

.pc-sidebar .m-header {
  height: 60px !important;
}

.pc-sidebar .navbar-content {
  height: calc(100vh - 60px) !important;
  display: flex;
  flex-direction: column;
}

.pc-sidebar .pc-navbar {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
}

/* Configuração/Admin fixos no rodapé do menu, como no mockup (margin-top:auto
   empurra o resto do grupo - ver o <li class="pc-bottom-anchor"> em NavMenu.razor). */
.pc-sidebar .pc-navbar > .pc-item.pc-bottom-anchor {
  margin-top: auto !important;
}

.pc-header {
  min-height: 60px !important;
  left: 236px !important;
}

.pc-header .pc-h-item {
  min-height: 60px !important;
}

.pc-container {
  top: 60px !important;
  margin-left: 236px !important;
  min-height: calc(100vh - 121px) !important;
}

.pc-footer {
  margin-left: 236px !important;
  margin-top: 60px !important;
}
.status-pill.status-secondary { background-color: var(--leme-surface-2) !important; color: var(--leme-text-muted) !important; }

/* ================= marca/logo (MainLayout.razor) ================= */

.leme-brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #6c4fd1, #8f74e8);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.leme-brand-name {
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--leme-text) !important;
  letter-spacing: .2px;
}

/* ================= header: botões de ícone e perfil (estilo mockup) =================
   Berry usa "chips" coloridos (fundo roxo/azul claro) pros botões do header - o
   mockup usa um botão neutro com borda fina. Base já tem o tamanho/raio certo
   (34px/8px), só troca a cor. */

.pc-header .pc-head-link.head-link-secondary {
  background-color: var(--leme-surface) !important;
  border: 1px solid var(--leme-border) !important;
  color: var(--leme-text-2) !important;
}

.pc-header .pc-head-link.head-link-secondary > i {
  color: var(--leme-text-2) !important;
  font-size: 16px !important;
}

.pc-header .pc-head-link.head-link-secondary:hover {
  background-color: var(--leme-surface-2) !important;
  color: var(--leme-text) !important;
}

.pc-header .pc-head-link.head-link-secondary:hover > i {
  color: var(--leme-text) !important;
}

/* Bolinha de notificação (só visual por enquanto, não há back-end de notificações
   ainda - pedido explícito de deixar o ícone igual ao mockup). */
.leme-badge-dot {
  position: relative;
}

.leme-badge-dot::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--leme-danger);
  border: 2px solid var(--leme-surface);
}

/* Perfil do usuário - de "chip" azul de largura fixa (92px) pra pill neutra que
   cresce com o nome, como o .user-chip do mockup. */
.pc-header .header-user-profile .pc-head-link {
  width: auto !important;
  height: auto !important;
  border-radius: 20px !important;
  padding: 4px 12px 4px 4px !important;
  background-color: var(--leme-surface-2) !important;
  gap: 9px;
}

.pc-header .header-user-profile .pc-head-link:hover {
  background-color: var(--leme-border) !important;
}

.pc-header .header-user-profile .pc-head-link > span {
  color: var(--leme-text) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.leme-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--leme-primary);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

/* ================= arredondamento global dos botões ================= */

.btn {
  --bs-btn-border-radius: 8px !important;
  border-radius: 8px !important;
}

/* ================= altura padrão de inputs/botões (38px) =================
   Já usávamos isso só dentro dos modais centralizados (Buscar produto, Buscar
   venda) - agora é o padrão em todo o sistema. "textarea" fica de fora (senão
   os campos multi-linha, ex. Observações, ficariam achatados em 38px); botões
   pequenos (".btn-sm", ações de linha de tabela) e os fantasmas circulares
   (".btn-icon") também ficam de fora - continuam do tamanho deles. Qualquer
   exceção específica (ex. ".card-header .btn", menor de propósito) precisa
   vir DEPOIS desse bloco no arquivo e com especificidade igual ou maior pra
   conseguir sobrescrever. */
.form-control:not(textarea),
.form-select {
  height: 38px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: 13.5px !important;
}

.btn:not(.btn-icon):not(.btn-sm) {
  /* height explícito em vez de só padding - line-height do Bootstrap (1.5)
     some com o padding pra um total maior que o esperado. */
  height: 38px !important;
  padding: 0 16px !important;
  font-size: 13.5px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ================= largura do conteúdo central (igual ao mockup) =================
   .pc-container continua esticando cheio (margin-left:236px pra desviar da sidebar,
   margin-right:20px) - só o .pc-content de dentro (onde @Body renderiza) ganha
   max-width e centraliza. Em telas largas sobra fundo cinza (--leme-bg) dos dois
   lados do conteúdo, igual ao mockup. */
.pc-container .pc-content {
  max-width: 1200px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ================= tela de Orçamento/Venda: cards "Dados da venda" e "Itens" ================= */

.card-header {
  background-color: var(--leme-surface) !important;
  border-bottom: 1px solid var(--leme-border) !important;
  padding: 12px 20px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* Botão dentro do cabeçalho do card fica menor, senão fica mais alto que o
   título e desalinha a linha - mockup usa um botão pequeno aqui. ":not(.btn-icon)"
   sobe a especificidade pra empatar com o padrão global de 38px (acima) e,
   por vir depois no arquivo, vencer o empate - senão o botão herdaria os 38px
   de altura do padrão geral, que é grande demais pra caber no cabeçalho. */
.card-header .btn:not(.btn-icon) {
  height: auto !important;
  padding: 6px 11px !important;
  font-size: 12.5px !important;
}

/* Usado quando o card-header é seguido, colado (sem margem), por uma tabela
   (ex. SimilarProducts.razor com LemeTable Class="mt-0") - a tabela já tem
   border-top (.table-responsive) fazendo essa linha, então o border-bottom
   daqui dobraria a borda. */
.card-header-flush {
  border-bottom: none !important;
}

.card-header h3 {
  margin: 0;
  font-size: 14.5px !important;
  font-weight: 700;
  color: var(--leme-text);
  display: flex;
  align-items: center;
  gap: 4px;
}

.card-header h3 i {
  color: var(--leme-primary);
}

.card-header .card-sub {
  color: var(--leme-text-muted);
  font-size: 12.5px;
  font-weight: 400;
  margin-left: 6px;
}

/* Stepper de quantidade (-/+ ao redor do número), como o mockup. */
.qty-stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--leme-border-strong);
  border-radius: 8px;
  overflow: hidden;
  width: 100px;
}

.qty-stepper button {
  width: 26px;
  height: 32px;
  border: none;
  background: var(--leme-surface-2);
  color: var(--leme-text-2);
  cursor: pointer;
  font-size: 13px;
  flex-shrink: 0;
}

.qty-stepper button:hover {
  background: var(--leme-border);
}

.qty-stepper input {
  border: none !important;
  width: 44px;
  text-align: center;
  height: 32px;
  font-size: 13px;
  font-weight: 600;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Rodapé de totais (Subtotal/Desconto/Total) abaixo da tabela de itens. */
.items-footer {
  display: flex;
  justify-content: flex-end;
  padding: 16px 20px;
  border-top: 1px solid var(--leme-border);
  background-color: var(--leme-surface-2);
  /* É o último elemento dentro do .card - sem isso o fundo cinza (quadrado) vazava
     por cima do canto arredondado do card embaixo. */
  border-radius: 0 0 var(--leme-radius) var(--leme-radius);
}

/* Rodapé fixo de ações (Voltar/Salvar) no fim do card - igual ao mockup
   (.sticky-actions). "position:sticky;bottom:0" faz ele ficar "grudado" no fim
   da área visível ENQUANTO ainda está dentro do .card (rola junto até acabar o
   conteúdo do card, aí some) - por isso parece "flutuar" durante o scroll mas
   vira parte natural do fim do card quando chega no final. border-radius só
   embaixo pelo mesmo motivo do .items-footer acima (é o último elemento do
   .card, senão o fundo quadrado vazaria por cima do canto arredondado). */
.sticky-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  background-color: var(--leme-surface);
  border-top: 1px solid var(--leme-border);
  border-radius: 0 0 var(--leme-radius) var(--leme-radius);
}

/* Campo de preço na tabela de itens - LemeNumeric é width:100% por padrão (correto
   nos formulários normais), mas dentro da célula estava esticando até preencher a
   coluna inteira, bem maior que o stepper de quantidade ao lado. Largura fixa igual
   ao mockup (.price-input{width:104px}). */
.price-cell {
  width: 110px;
}

.totals-box {
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.totals-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--leme-text-2);
}

.totals-row.grand {
  font-size: 16px;
  font-weight: 700;
  color: var(--leme-text);
  padding-top: 8px;
  border-top: 1px solid var(--leme-border-strong);
}

/* ================= modal "Pesquisar produto" (ProductsSearch) ================= */

/* Escopado com ".product-search-drawer" (Class="product-search-drawer" em
   ProductsSearch.razor) - esse padding assimétrico (quase colado à direita) é
   pensado pra caber a barra de rolagem da tabela, não faz sentido em outros
   modais centralizados (ex.: SaleConversionDrawer, que é só um formulário
   comum e deve manter o padding simétrico padrão). */
.leme-drawer-centered.product-search-drawer .leme-drawer-content {
  /* Menos inset que o padrão dos outros drawers (px-4 py-3 ps-5 pe-5 do
     Bootstrap = 1rem vertical / 3rem horizontal) - e assimétrico, igual ao
     mockup: mais respiro à esquerda (onde começa o texto da 1ª coluna), quase
     colado à direita (onde fica a barra de scroll da tabela). !important porque
     .ps-5/.pe-5/.py-3 do Bootstrap já vêm com !important - sem isso meu padding
     nunca vencia, o inset real continuava o antigo (48px), por isso o "vazamento"
     nas laterais da barra cinza e o espaço grande sobrando ao redor da tabela. */
  padding: 16px 8px 16px 24px !important;
}

.product-search-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  /* Sangra o padding do .leme-drawer-content acima pra virar uma faixa cinza de
     ponta a ponta, separada do header branco - igual ao mockup (.filter-toolbar). */
  margin: -16px -8px 16px -24px;
  padding: 16px 24px;
  background-color: var(--leme-surface-2);
  border-bottom: 1px solid var(--leme-border);
}

.product-search-toolbar > .app-field {
  flex: 1 1 180px;
}

.product-search-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.product-search-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.product-search-count {
  font-size: 12.5px;
  color: var(--leme-text-muted);
  white-space: nowrap;
  padding-top: 2px;
}

.product-search-count b {
  color: var(--leme-text);
}

.product-search-table-wrap {
  max-height: 46vh;
  overflow-y: auto;
}

.product-search-table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Ação "Adicionar ao orçamento" (LemeIconButton sem Outlined = .btn-icon, cor
   fantasma padrão) - .btn-icon usa !important pra cor, então text-success do
   Bootstrap seria ignorado; precisa de override específico aqui. */
.product-search-table-wrap .btn-icon.text-success {
  color: var(--leme-success) !important;
}

.product-search-table-wrap .btn-icon.text-success:hover {
  background-color: var(--leme-success-bg) !important;
}

/* Tamanho de 38px de inputs/botões dentro do modal agora vem do padrão global
   (acima, perto de .btn{border-radius}) - generalizado nesta sequência,
   antes era só aqui dentro do drawer centralizado. */

/* Menu "..." (LemeActionsMenu/dropdown Bootstrap) abrindo atrás das linhas
   seguintes da tabela - a tabela tem overflow-y:auto (scroll interno), e o
   dropdown-menu padrão (z-index:1000 via variável do Bootstrap) fica sendo
   pintado dentro dessa mesma pilha; reforça acima de qualquer linha/th sticky
   (thead th usa z-index:2) pra garantir que o menu sempre aparece por cima. */
.product-search-table-wrap .dropdown-menu.show {
  z-index: 1060 !important;
}

/* ================= LemeRightDrawerPanel (drawer lateral / modal centralizado) =================
   Estava como <style> dentro do próprio componente .razor - movido pra cá porque o
   componente é parte do código compilado (só atualiza com rebuild+restart do processo),
   enquanto este arquivo é estático (atualiza só com F5) - mais fácil de depurar/garantir
   que a versão certa está valendo. */

.leme-drawer-backdrop {
  position: fixed !important;
  /* top/left/right/bottom explícitos em vez do shorthand "inset" - se algo na
     cascata sobrescrever só uma das quatro bordas (ex.: um "bottom:auto" solto
     em outro lugar) o shorthand "inset" perde só aquele lado e o elemento passa
     a ter altura definida pelo próprio conteúdo (encolhe até caber o modal, em
     vez de cobrir a viewport inteira) - foi exatamente esse o sintoma relatado
     (fundo escurecido cobre até a altura do modal e para, o rodapé normal da
     página aparece sem escurecer logo abaixo, e o modal fica "baixo" porque o
     flex centraliza dentro dessa caixa pequena, não da tela toda). */
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(0, 0, 0, 0.35);
  z-index: 1040;
  animation: leme-drawer-fade-in 0.2s ease-out;
}

/* .leme-drawer-backdrop e .leme-drawer são IRMÃOS no HTML (LemeRightDrawerPanel.razor
   renderiza os dois <div> um atrás do outro, o painel não fica DENTRO do backdrop) -
   um "display:flex;align-items:center" aqui nunca centralizava nada porque o backdrop
   não tem filho nenhum (é só a camada escura de clique-pra-fechar). Isso ficou parado
   aqui sem efeito desde que esse modo "Centered" foi criado - a centralização de
   verdade agora é feita na própria ".leme-drawer.leme-drawer-centered" via
   position:fixed + top/left:50% + transform (ver abaixo), que não depende de relação
   pai-filho nenhuma. */

.leme-drawer {
  position: fixed !important;
  top: 0;
  right: 0;
  height: 100vh;
  background: var(--leme-surface, #fff);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15);
  z-index: 1050;
  display: flex;
  flex-direction: column;
  animation: leme-drawer-slide-in 0.25s ease-out;
}

/* Centralização real - .leme-drawer-centered NÃO é filho do backdrop (são irmãos,
   ver comentário acima), então não dá pra centralizar via flex do pai. Em vez disso,
   o próprio painel fica position:fixed e usa o truque top:50%+left:50%+
   transform:translate(-50%,-50%), que centraliza no viewport sem depender de
   nenhuma relação pai-filho. */
.leme-drawer.leme-drawer-centered {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  max-height: 88vh;
  /* Sem overflow:hidden, um .leme-drawer-content muito alto (ex.: tabela de
     resultados sem paginação aplicada ainda) estourava o max-height sem ser
     clipado - o excesso "vazava" visualmente abaixo da viewport, dando a
     impressão de que o modal "abre lá embaixo" e precisa rolar a página
     (em vez de rolar só o conteúdo interno). */
  overflow: hidden !important;
  border-radius: var(--leme-radius, 10px);
  box-shadow: var(--leme-shadow-md, 0 8px 24px rgba(0, 0, 0, 0.15));
  animation: leme-drawer-scale-in 0.2s ease-out;
}

.leme-drawer-header {
  background: var(--leme-surface-2, #EEF2F6);
  border-bottom: 1px solid var(--leme-border, #e2e6ea);
  flex-shrink: 0;
}

.leme-drawer-centered .leme-drawer-header {
  border-radius: var(--leme-radius, 10px) var(--leme-radius, 10px) 0 0;
  /* No modo modal, só a barra de filtros é cinza (destaque) - o header (título +
     fechar) fica branco, igual o resto do corpo, como no mockup (.modal-head não
     tem fundo próprio, só .filter-toolbar tem). */
  background: var(--leme-surface, #fff);
}

.leme-drawer-header h6,
.leme-drawer-header h5 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--leme-text, #1D3557);
  margin-bottom: 0;
}

.leme-drawer-centered .leme-drawer-header h6,
.leme-drawer-centered .leme-drawer-header h5 {
  /* Mockup usa 16px pro título do modal - bem menor que o padrão dos outros
     drawers (que continuam 1.35rem, não mexido). */
  font-size: 16px;
}

.leme-drawer-content {
  flex: 1;
  /* Sem min-height:0, um flex item por padrão não encolhe abaixo do tamanho
     intrínseco do próprio conteúdo (min-height:auto implícito) - o
     overflow-y:auto abaixo nunca chegava a ativar. */
  min-height: 0 !important;
  overflow-y: auto;
}

.leme-drawer-footer {
  background: var(--leme-surface-2, #EEF2F6);
  border-top: 1px solid var(--leme-border, #e2e6ea);
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.leme-drawer-centered .leme-drawer-footer {
  border-radius: 0 0 var(--leme-radius, 10px) var(--leme-radius, 10px);
  /* No modo centralizado (modal) o rodapé é só a linha divisória, sem o fundo
     cinza que os drawers laterais usam pra destacar a barra de ações - aqui só
     tem paginação, não precisa do mesmo destaque. */
  background: var(--leme-surface, #fff);
}

.leme-drawer-content .app-field-label {
  font-weight: 700;
  color: var(--leme-text, #1D3557);
}

@keyframes leme-drawer-slide-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes leme-drawer-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Usado só por .leme-drawer-centered, que agora centraliza via
   transform:translate(-50%,-50%) - uma animação de "transform" substitui o valor
   inteiro da propriedade durante a execução, então precisa incluir o translate de
   novo aqui, senão o modal "pula" pra fora do centro só durante os 0.2s da entrada. */
@keyframes leme-drawer-scale-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.97); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ================= tela de Produto (ProductPage) ================= */

.form-section {
  padding: 20px;
  border-bottom: 1px solid var(--leme-border);
}

.form-section:last-child {
  border-bottom: none;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--leme-text);
  margin: 0 0 16px;
}

.section-title i {
  color: var(--leme-primary);
  font-size: 12.5px;
}

.empty-state {
  padding: 56px 20px;
  text-align: center;
  color: var(--leme-text-muted);
}

.empty-state i {
  font-size: 28px;
  margin-bottom: 12px;
  color: var(--leme-border-strong);
  display: block;
}

.empty-state-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--leme-text-2);
  margin-bottom: 4px;
}

.empty-state-description {
  font-size: 13px;
}

/* ================= abas (LemeTabs/LemeTabPanel) =================
   Bootstrap nav-tabs "caixa" padrão trocado pelo visual do mockup - sublinhado
   colorido no item ativo, sem borda/fundo de aba. Compartilhado por
   ProductPage.razor e ClientPage.razor (único outro uso de LemeTabs hoje). */

.nav-tabs {
  display: flex !important;
  /* LemeTabs.razor tem "mt-3" fixo no markup (16px) - pensado pra quando as
     abas ficam soltas direto na página; aqui dentro de um .card sobrava um
     vão no topo que o mockup não tem (aba colada na borda de cima do card). */
  margin-top: 0 !important;
  border-bottom: 1px solid var(--leme-border) !important;
  padding: 0 20px !important;
  gap: 4px !important;
}

.nav-tabs .nav-item {
  margin-bottom: 0 !important;
}

.nav-tabs .nav-link {
  /* inline-flex, não flex - "flex" sozinho gera uma caixa de bloco (largura
     cheia do <li>), o que empurrava cada aba pra ocupar a largura inteira e
     empilhar uma embaixo da outra em vez de ficar lado a lado. */
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 13px 14px !important;
  margin: 0 0 -1px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--leme-text-muted) !important;
  background: transparent !important;
}

/* .me-1 do ícone (padrão dos outros ícones do app) vira redundante com o
   gap:7px acima - zera pra não somar os dois espaçamentos. */
.nav-tabs .nav-link i.me-1 {
  margin-right: 0 !important;
}

.nav-tabs .nav-link:hover {
  color: var(--leme-text-2) !important;
}

.nav-tabs .nav-link.active {
  color: var(--leme-primary) !important;
  border-bottom-color: var(--leme-primary) !important;
}

.tab-content {
  padding: 0 !important;
}

/* ================= tela de Login (split-screen) =================
   Layout próprio (não os presets v1/v2 do Berry - vêm com carrossel/decoração
   de demo irrelevante pra esse app). Cores do painel de marca tiradas da
   própria arte do mascote (navy #103364 / azul claro #93c7d9), não dos tokens
   --leme-primary do resto do app - marca e paleta de UI são coisas distintas. */
.leme-login {
  display: flex;
  min-height: 100vh;
}

.leme-login-brand {
  flex: 1 1 45%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 40px;
  background: radial-gradient(circle at 50% 40%, #1c4a8a 0%, #0f2a52 45%, #0a1c38 100%);
  position: relative;
  overflow: hidden;
}

/* Mesma marca da sidebar (.leme-brand-mark/.leme-brand-name), só maior - pra
   ficar consistente com o resto do app em vez de usar uma logo separada. */
.leme-login-brand-mark {
  width: 84px;
  height: 84px;
  border-radius: 20px;
  background: linear-gradient(135deg, #6c4fd1, #8f74e8);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  position: relative;
  z-index: 1;
}

.leme-login-brand-name {
  font-weight: 700;
  font-size: 30px;
  color: #ffffff;
  letter-spacing: 0.2px;
  position: relative;
  z-index: 1;
}

.leme-login-tagline {
  margin: 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 1;
}

@media (max-width: 991.98px) {
  .leme-login-brand {
    display: none;
  }
}

.leme-login-form-panel {
  flex: 1 1 55%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--leme-bg);
  padding: 24px;
}

.leme-login-form-inner {
  width: 100%;
  max-width: 380px;
}

/* ================= cards de módulo (Admin/Configurações/Relatórios) =================
   Cada seção da tela (ex. "Minha Conta"/"Administração do Sistema") é um <div class="row">
   separado - o h-100 do ModuleCard.razor só iguala a altura dos cards DENTRO da mesma
   row (stretch padrão do flex do Bootstrap), não entre seções diferentes nem quando uma
   row só tem 1 card. min-height fixo garante que todo card fique com o mesmo tamanho
   independente de ter 1 ou 2 linhas de descrição, em qualquer lugar da tela. */
.module-card {
  min-height: 132px !important;
}
