/* ==================================================================
   Wrapper <select> + botão "+"
   ==================================================================
   Usado quando um <select> precisa de um botão de ação ao lado
   (ex.: abrir modal para cadastrar/editar items que populam o select).
   - Tom Select envolve <select> em <div class="ts-wrapper"> — por isso
     `flex: 1 1 auto` precisa cobrir tanto .form-select quanto .ts-wrapper.
   - `.btn.btn-add-inline` (specificity 0,2,0) é obrigatório para bater
     o padding default de `.btn` (0,1,0) do Tabler — sem isso o botão
     fica mais alto que o <select> e `align-items: stretch` o estica. */
.select-com-add {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.select-com-add > .form-select,
.select-com-add > .ts-wrapper {
    flex: 1 1 auto;
    min-width: 0;
}
.btn.btn-add-inline {
    flex: 0 0 auto;
    width: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.btn.btn-add-inline svg { display: block; }

/* ==================================================================
   Tags Input — entrada de múltiplos termos como badges
   ==================================================================
   Permite digitar texto e, ao pressionar vírgula ou Enter, transformar
   em badge. Backspace com input vazio remove a última badge. O valor
   real fica em um <input type="hidden"> espelhado (CSV) — o widget
   visual só atualiza esse hidden, sem alterar o backend. */
.tags-input {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    cursor: text;
    min-height: calc(1.4285714em + 0.875rem + 2px);
    /* Espaçamento vertical entre linhas quando os badges quebram. */
    row-gap: 6px;
}
.tags-input.is-invalid {
    border-color: var(--tblr-danger);
}
.tags-input .tag-item {
    background: var(--tblr-primary, #6f9b22);
    color: #fff;
    border-radius: 3px;
    padding: 0.125rem 0.5rem;
    font-size: 0.8125rem;
    display: inline-flex;
    align-items: center;
    line-height: 1.3;
    /* Espaço entre badge e o próximo badge (ou o input) — usamos margin
       em vez de `gap` no pai pois `gap` em flex pode ser engolido por
       overrides do form-control em alguns navegadores. */
    margin-right: 8px;
    column-gap: 6px;
}
.tags-input .tag-item .tag-remove {
    background: transparent;
    border: 0;
    color: inherit;
    font-size: 1rem;
    padding: 0;
    line-height: 1;
    cursor: pointer;
    opacity: 0.85;
}
.tags-input .tag-item .tag-remove:hover {
    opacity: 1;
}
.tags-input .tag-input-typing {
    /* `min-width: 240px` garante espaço para o placeholder completo
       ("Digite e pressione vírgula ou Enter…"). Quando os badges ocupam
       a linha, o flex-wrap empurra o input para uma nova linha (largura
       cheia), preservando a legibilidade do placeholder. */
    flex: 1 1 240px;
    min-width: 240px;
    border: 0;
    outline: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font-size: inherit;
}

/* Configurações do Quill */
.ql-size-small {
    font-size: 10px; /* Tamanho pequeno */
}

.ql-size-large {
    font-size: 24px; /* Tamanho grande */
}

.ql-size-huge {
    font-size: 36px; /* Tamanho enorme */
}

/* Thumbnails de Imagens */
#thumbnailsContainer img {
    width: 100px;
    height: auto;
    padding: 5px;
    border: 1px solid #ddd;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}

#thumbnailsContainer img:hover {
    transform: scale(1.1);
}

/* Aumenta tamanho da tabela */
.tabela-maior table {
    min-width: 1920px; /* Ajuste este valor conforme necessário */
}

/* ==================================================================
   <select> / <option> — comportamento consistente em ambos os temas
   ==================================================================
   Motivação: <option> é renderizado pelo SO em Chrome/Firefox/Edge e
   ignora o data-bs-theme do body por padrão, além de o <select> exibir
   caret de texto (I-beam) em alguns navegadores. Aqui forçamos:
   - cursor pointer e caret invisível em TODOS os <select>;
   - fundo e cor consistentes da opção selecionada exibida na caixa;
   - cores corretas da lista (<option>) em claro e escuro (com !important
     porque alguns navegadores só respeitam com prioridade elevada);
   - destaque visual consistente em :checked/:hover.
   Observação: o dropdown do Safari é um controle nativo e pode ignorar
   CSS — nesses casos a alternativa é usar Tom Select (já carregado). */
select,
.form-select {
    cursor: pointer;
    caret-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
select option,
.form-select option {
    cursor: pointer;
    padding: 0.35rem 0.5rem;
}

/* ----- Tema claro (explícito para não herdar tema do SO) ----- */
[data-bs-theme=light] select option,
[data-bs-theme=light] .form-select option,
html:not([data-bs-theme=dark]) body:not([data-bs-theme=dark]) select option,
html:not([data-bs-theme=dark]) body:not([data-bs-theme=dark]) .form-select option {
    background-color: #ffffff !important;
    color: #1e293b !important;
}
[data-bs-theme=light] select option:checked,
[data-bs-theme=light] .form-select option:checked,
html:not([data-bs-theme=dark]) body:not([data-bs-theme=dark]) select option:checked,
html:not([data-bs-theme=dark]) body:not([data-bs-theme=dark]) .form-select option:checked {
    background-color: #e2e8f0 !important;
    color: #1e293b !important;
}

/* ----- Tema escuro ----- */
[data-bs-theme=dark] select,
[data-bs-theme=dark] .form-select {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}
[data-bs-theme=dark] select option,
[data-bs-theme=dark] .form-select option {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}
[data-bs-theme=dark] select option:checked,
[data-bs-theme=dark] .form-select option:checked,
[data-bs-theme=dark] select option:hover,
[data-bs-theme=dark] .form-select option:hover {
    background-color: #273548 !important;
    color: #e2e8f0 !important;
}
[data-bs-theme=dark] select optgroup,
[data-bs-theme=dark] .form-select optgroup {
    background-color: #1e293b !important;
    color: #94a3b8 !important;
}

/* ==================================================================
   Tom Select — overrides de tema
   ==================================================================
   Os selects com .form-select são convertidos em Tom Select pelo
   utilitarios.js. Esse componente renderiza caixa e dropdown com
   <div class="ts-*">, NÃO usa <option>, então as regras acima não o
   alcançam. Aqui tratamos o visual em claro e escuro. */

/* ----- Base (ambos os temas) ----- */
.ts-wrapper.form-select,
.ts-wrapper.form-control {
    padding: 0;  /* o Tom Select já controla o padding interno */
}
.ts-control {
    cursor: pointer !important;
}
.ts-control > input {
    caret-color: auto;  /* caret só no input de busca interno */
}

/* ----- Tema escuro ----- */
[data-bs-theme=dark] .ts-wrapper .ts-control,
[data-bs-theme=dark] .ts-wrapper.single .ts-control,
[data-bs-theme=dark] .ts-wrapper.multi .ts-control {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}
[data-bs-theme=dark] .ts-wrapper.focus .ts-control,
[data-bs-theme=dark] .ts-wrapper.input-active .ts-control {
    border-color: #64748b !important;
    box-shadow: 0 0 0 0.25rem rgba(100, 116, 139, 0.25) !important;
}
[data-bs-theme=dark] .ts-control > input,
[data-bs-theme=dark] .ts-control > input::placeholder {
    color: #e2e8f0 !important;
}
[data-bs-theme=dark] .ts-control > input::placeholder {
    color: #64748b !important;
}
[data-bs-theme=dark] .ts-control .item {
    color: #e2e8f0 !important;
}
[data-bs-theme=dark] .ts-wrapper.multi .ts-control > .item {
    background: #273548 !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

[data-bs-theme=dark] .ts-dropdown {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}
[data-bs-theme=dark] .ts-dropdown .option,
[data-bs-theme=dark] .ts-dropdown [data-selectable] {
    color: #e2e8f0 !important;
    background-color: transparent !important;
}
[data-bs-theme=dark] .ts-dropdown .active,
[data-bs-theme=dark] .ts-dropdown [data-selectable].active {
    background-color: #334155 !important;
    color: #ffffff !important;
}
[data-bs-theme=dark] .ts-dropdown .selected,
[data-bs-theme=dark] .ts-dropdown [data-selectable].selected {
    background-color: #273548 !important;
    color: #e2e8f0 !important;
}
[data-bs-theme=dark] .ts-dropdown .optgroup-header {
    background-color: #1e293b !important;
    color: #94a3b8 !important;
    border-bottom-color: #334155 !important;
}
[data-bs-theme=dark] .ts-dropdown .no-results,
[data-bs-theme=dark] .ts-dropdown .create {
    color: #94a3b8 !important;
}
[data-bs-theme=dark] .ts-dropdown .divider {
    background-color: #334155 !important;
}

/* Setinha caret do Tom Select — espelha o comportamento do Tabler */
[data-bs-theme=dark] .ts-wrapper.single .ts-control::after {
    border-top-color: #94a3b8 !important;
}

/* ========================================================================
   CAMPO VISUALIZAR — leitura de registros (rótulo + valor) sem inputs.
   ======================================================================== */
.campo-visualizar {
    display: block;
    min-height: calc(1.5em + 0.875rem + 2px);
    padding: 0.4375rem 0.75rem;
    font-size: 0.875rem;
    color: #1e293b;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    line-height: 1.5;
    word-break: break-word;
}

.campo-visualizar-tags {
    display: flex;
    flex-wrap: wrap;
    row-gap: 6px;
    padding: 0.4375rem 0.75rem;
    min-height: calc(1.5em + 0.875rem + 2px);
}

.tag-readonly {
    display: inline-flex;
    align-items: center;
    background-color: #e0e7ff;
    color: #3730a3;
    border-radius: 999px;
    padding: 2px 12px;
    font-size: 0.8125rem;
    line-height: 1.5;
    margin-right: 8px;
}

[data-bs-theme=dark] .campo-visualizar {
    color: #e2e8f0;
    background-color: #1e293b;
    border-color: #334155;
}

[data-bs-theme=dark] .tag-readonly {
    background-color: #312e81;
    color: #c7d2fe;
}

/* ========================================================================
   MATRIZ DE CARGOS E PERMISSÕES — sub-divisórias por categoria
   ======================================================================== */
.tabela-permissoes tr.linha-categoria > td {
    background-color: #f1f5f9;
    border-top: 2px solid #cbd5e1;
    padding-top: 10px;
    padding-bottom: 8px;
}
.tabela-permissoes tr.linha-categoria strong {
    letter-spacing: 0.04em;
}
.tabela-permissoes tr.linha-categoria .btn-marcar-categoria {
    padding: 1px 10px;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* Chevron e título da categoria — toggle expand/collapse */
.tabela-permissoes tr.linha-categoria .btn-toggle-categoria {
    color: #64748b;
    line-height: 1;
    text-decoration: none;
}
.tabela-permissoes tr.linha-categoria .btn-toggle-categoria:hover {
    color: #1e293b;
}
.tabela-permissoes tr.linha-categoria .icon-chevron {
    transition: transform 0.18s ease;
}
.tabela-permissoes tr.linha-categoria.collapsed .icon-chevron {
    transform: rotate(-90deg);
}
.tabela-permissoes tr.linha-categoria .categoria-titulo-clicavel {
    cursor: pointer;
    user-select: none;
}
.tabela-permissoes tr.linha-categoria .categoria-titulo-clicavel:hover {
    color: #1e293b;
}

[data-bs-theme=dark] .tabela-permissoes tr.linha-categoria .btn-toggle-categoria {
    color: #94a3b8;
}
[data-bs-theme=dark] .tabela-permissoes tr.linha-categoria .btn-toggle-categoria:hover {
    color: #e2e8f0;
}
[data-bs-theme=dark] .tabela-permissoes tr.linha-categoria .categoria-titulo-clicavel:hover {
    color: #e2e8f0;
}

[data-bs-theme=dark] .tabela-permissoes tr.linha-categoria > td {
    background-color: #1e293b;
    border-top-color: #334155;
}

/* ─── Sidebar: identidade do tenant + usuário logado ──────────────────────
   Bloco compacto que aparece abaixo da logomarca no .navbar-brand-cliente.
   Mostra Nome do Box (configurado em Variáveis de Sistema) na linha 1 e
   Primeiro Nome + Cargo na linha 2. Usa texto truncado em todas as linhas
   para nunca quebrar a sidebar em larguras estreitas (mobile / lg-).
*/
.brand-identidade {
    width: 100%;
    margin-top: 10px;
    padding: 10px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.25;
    text-align: left;
}

.brand-identidade__box,
.brand-identidade__usuario {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
}

.brand-identidade__icon {
    flex-shrink: 0;
    opacity: 0.7;
}

.brand-identidade__nome {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #ffffff;
    overflow: hidden;
}

.brand-identidade__usuario {
    margin-top: 4px;
    font-size: 11px;
    opacity: 0.78;
}

.brand-identidade__user-nome {
    overflow: hidden;
    font-weight: 500;
}

.brand-identidade__cargo {
    display: inline-block;
    margin-left: auto;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(169, 203, 92, 0.18);
    color: #c8d3a8;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Em telas estreitas (sidebar comprimida do Tabler), reduz padding e fontes
   um pouco para acomodar bem o conteúdo. */
@media (max-width: 575.98px) {
    .brand-identidade {
        padding: 8px 10px;
        margin-top: 8px;
    }
    .brand-identidade__nome {
        font-size: 12px;
    }
    .brand-identidade__cargo {
        font-size: 9px;
        padding: 1px 6px;
    }
}

/* =============================================================================
   Header responsivo — mobile top bar (< lg)
   -----------------------------------------------------------------------------
   Layout desejado em mobile:
     [ LOGO ]  ......................................  [ ☰ HAMBURGER ]
   Logo à ESQUERDA, hamburger à DIREITA, MESMA linha. Bloco "BOX DO RODRIGO
   + PROPRIETÁRIO" some da top bar (a versão `.brand-identidade--mobile`
   aparece dentro do sidebar colapsado quando o operador abre).

   Em desktop (≥ lg), o Tabler já trata `.navbar-vertical` como sidebar
   expandida lateral — nesse caso a logo fica em cima e a identidade abaixo,
   como sempre foi. As regras abaixo são SÓ para o ponto de quebra mobile.
   ============================================================================= */
@media (max-width: 991.98px) {
    /* Container do topo. `position: relative` é a âncora pra que o
       hamburger fique absoluto no canto superior direito.
       Padding ZERO à direita aqui — o espaço pro hamburger é reservado
       só no .navbar-brand-cliente, deixando o #sidebar-menu livre pra
       ocupar 100% da largura visual. */
    aside.navbar.navbar-vertical > .container-fluid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        padding: 6px 0 !important;
        position: relative !important;
        min-height: 56px;
    }
    /* Logo: à esquerda, ocupa toda a top bar exceto o lugar do hamburger.
       O padding-right reserva ~56px pro botão flutuante sem afetar o
       resto do menu lá embaixo. */
    aside.navbar.navbar-vertical .navbar-brand-cliente {
        width: 100% !important;
        flex: 0 0 100% !important;
        flex-direction: row !important;
        align-items: center;
        padding: 4px 56px 4px 10px !important;
        margin: 0 !important;
        order: 0;
    }
    aside.navbar.navbar-vertical .navbar-brand-cliente .logo-link {
        display: inline-flex !important;
        align-items: center;
        line-height: 0;
    }
    aside.navbar.navbar-vertical .navbar-brand-cliente .navbar-brand-image {
        height: 44px !important;
        width: auto !important;
        max-width: calc(100vw - 90px) !important;
        object-fit: contain;
    }
    /* Identidade INLINE no topo NÃO aparece em mobile — quem cumpre é a
       cópia `--mobile` dentro do sidebar colapsado. */
    aside.navbar.navbar-vertical .brand-identidade--desktop {
        display: none !important;
    }
    /* Hamburger: ABSOLUTO no canto superior direito do container.
       Fica fixo em y=10px independente do estado do menu — abrir/fechar
       não muda sua posição porque ele saiu do fluxo do flexbox. */
    aside.navbar.navbar-vertical .navbar-toggler {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        margin: 0 !important;
        z-index: 5;
    }
    /* Identidade DENTRO do menu colapsado: aparece no topo, antes do menu. */
    aside.navbar.navbar-vertical #sidebar-menu .brand-identidade--mobile {
        display: block;
        margin: 0 0 10px 0;
        border-top: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
        padding: 12px 14px;
        background: rgba(255, 255, 255, 0.02);
    }
    /* Menu colapsado: garante largura cheia do sidebar — Bootstrap às vezes
       deixa `flex-basis: auto` que reduz o conteúdo. */
    aside.navbar.navbar-vertical #sidebar-menu {
        flex-basis: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    aside.navbar.navbar-vertical #sidebar-menu .navbar-nav {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    /* Itens do menu mobile: padding vertical generoso pra dar área de toque
       confortável (44px+ alvo de toque). Horizontal alinha com o resto do
       sidebar e estende até a borda direita. */
    aside.navbar.navbar-vertical #sidebar-menu .nav-item {
        width: 100%;
    }
    aside.navbar.navbar-vertical #sidebar-menu .nav-link {
        padding: 14px 16px !important;
        width: 100%;
    }
    /* Dropdown filhos (sub-itens dentro de Cadastro, Financeiro etc.)
       ganham também respiro vertical, mas um pouco menor que o nível raiz
       pra preservar hierarquia visual. */
    aside.navbar.navbar-vertical #sidebar-menu .dropdown-menu .dropdown-item {
        padding: 12px 16px 12px 44px !important;
    }
}

/* Em desktop (≥ lg), restaura o layout vertical original do sidebar:
   logo grande centralizada no topo + bloco de identidade (BOX + USUÁRIO)
   empilhado abaixo. Antes esses estilos viviam em `style="..."` inline
   no template; movidos pra cá pra ficarem consistentes com o resto. */
@media (min-width: 992px) {
    .brand-identidade--mobile {
        display: none !important;
    }
    aside.navbar.navbar-vertical .navbar-brand-cliente {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 12px 0;
        margin: 0;
    }
    aside.navbar.navbar-vertical .navbar-brand-cliente .logo-link {
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 0;
    }
    aside.navbar.navbar-vertical .navbar-brand-cliente .navbar-brand-image {
        display: block;
        height: 80px;
        width: auto;
        max-width: 90%;
        margin: 0;
        object-fit: contain;
    }
}

/* =============================================================================
   Painel de Estoque — accordion mobile da listagem de produtos
   -----------------------------------------------------------------------------
   No mobile (< lg), a tabela é substituída por uma lista de cards
   colapsáveis (.estoque-card-item). Cabeçalho sempre visível mostra
   nome + alerta + qtd na unidade comercial + custo médio + chevron.
   Clique expande pra mostrar saldo base, mínimo, código e ações.
   ============================================================================= */
.estoque-mobile {
    margin-top: 6px;
}

.estoque-card-item {
    background: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    margin-bottom: 8px;
    overflow: hidden;
}

.estoque-card-header {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 12px 14px;
    color: inherit;
    cursor: pointer;
}
.estoque-card-header:focus {
    outline: 2px solid var(--tblr-primary, #0d6efd);
    outline-offset: -2px;
}

.estoque-card-titulo-linha {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.estoque-card-nome {
    flex: 1 1 auto;
    font-size: 0.95rem;
    line-height: 1.3;
    color: var(--tblr-body-color);
}

.estoque-card-badge-area {
    flex-shrink: 0;
}
.estoque-card-badge-area .badge {
    font-size: 10px;
    padding: 4px 8px;
}

.estoque-card-metricas {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--tblr-secondary, #adb5bd);
}

.estoque-card-qty {
    font-weight: 400;
    font-size: 1rem;
    color: var(--tblr-body-color);
}

.estoque-card-divisor {
    opacity: 0.4;
}

.estoque-card-custo {
    font-weight: 400;
    font-size: 1rem;
    color: var(--tblr-body-color);
}

.estoque-card-chevron {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    transition: transform 0.18s ease;
    color: var(--tblr-secondary);
}
/* Bootstrap não tem state class natural pra "abrir/fechar" no botão;
   usamos aria-expanded que o data-bs-toggle controla automaticamente. */
.estoque-card-header[aria-expanded="true"] .estoque-card-chevron {
    transform: rotate(180deg);
}

.estoque-card-corpo {
    border-top: 1px solid var(--tblr-border-color);
    background: rgba(0, 0, 0, 0.02);
}
[data-bs-theme="dark"] .estoque-card-corpo {
    background: rgba(255, 255, 255, 0.02);
}

.estoque-card-detalhe {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 12px;
    margin: 12px 14px;
    font-size: 0.875rem;
}
.estoque-card-detalhe dt {
    color: var(--tblr-secondary);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    align-self: center;
}
.estoque-card-detalhe dd {
    margin: 0;
    color: var(--tblr-body-color);
}

.estoque-card-acoes {
    padding: 0 14px 12px 14px;
}

/* =============================================================================
   Modal "Lotes do Produto" — KPIs compactos em mobile
   -----------------------------------------------------------------------------
   Os 3 cards (Saldo total, Custo médio, Lotes ativos) usam col-4 mesmo
   em mobile — ficam lado a lado, com fonte/padding reduzidos para caber
   bem em telas estreitas. Em desktop, vão pra col-md-4 igual antes.
   ============================================================================= */
.modal-lotes-kpis .kpi-valor {
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.1;
}
@media (max-width: 575.98px) {
    .modal-lotes-kpis .card-body {
        padding: 10px 8px;
    }
    .modal-lotes-kpis .kpi-valor {
        font-size: 1.25rem;
    }
    .modal-lotes-kpis .text-uppercase {
        font-size: 10px;
        letter-spacing: 0.02em;
    }
}
@media (min-width: 576px) and (max-width: 991.98px) {
    .modal-lotes-kpis .kpi-valor {
        font-size: 1.35rem;
    }
}

/* =============================================================================
   Modal "Lotes do Produto" — cards mobile (substituem a tabela em < lg)
   -----------------------------------------------------------------------------
   Cada lote vira um card com cabeça (código + situação), grid de detalhes
   chave/valor e 3 botões de ação distribuídos em grid (Ver / Editar / Excluir).
   ============================================================================= */
.lotes-mobile-card {
    background: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    margin-bottom: 10px;
    overflow: hidden;
}

.lotes-mobile-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--tblr-border-color);
    background: rgba(0, 0, 0, 0.02);
}
[data-bs-theme="dark"] .lotes-mobile-card-head {
    background: rgba(255, 255, 255, 0.02);
}
.lotes-mobile-card-head strong {
    font-size: 0.95rem;
}
.lotes-mobile-card-head .badge {
    font-size: 10px;
    padding: 4px 8px;
}

.lotes-mobile-card-detalhe {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 14px;
    margin: 12px 14px;
    font-size: 0.875rem;
}
.lotes-mobile-card-detalhe dt {
    color: var(--tblr-secondary);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    align-self: center;
}
.lotes-mobile-card-detalhe dd {
    margin: 0;
    color: var(--tblr-body-color);
}

.lotes-mobile-card-acoes {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    padding: 10px 14px 14px 14px;
}
.lotes-mobile-card-acoes .btn {
    padding: 8px 4px;
    font-size: 0.825rem;
    min-height: 40px;
}

/* =============================================================================
   Paginação responsiva — pareada com `.paginacao-wrapper` no template
   -----------------------------------------------------------------------------
   Desktop: contador à esquerda, paginação à direita (linha única, justify-between).
   Mobile: empilha — contador centralizado em cima, paginação centralizada
     embaixo, com botões maiores (44px de alvo de toque, padrão iOS/Material).
   ============================================================================= */
.paginacao-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.paginacao-contador {
    flex: 1 1 auto;
}
.paginacao-lista {
    flex: 0 0 auto;
}

@media (max-width: 767.98px) {
    .paginacao-wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .paginacao-contador {
        text-align: center;
        order: 0;
    }
    .paginacao-lista {
        order: 1;
        justify-content: center;
    }
    /* Botões maiores no mobile — área de toque confortável (≥ 44px). */
    .paginacao-lista .page-link {
        min-width: 44px;
        min-height: 44px;
        padding: 10px 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.95rem;
    }
    /* Setas mais visíveis. */
    .paginacao-lista .page-link svg {
        width: 20px;
        height: 20px;
    }
}

/* =============================================================================
   Listagem de Pedidos — accordion mobile (substitui a tabela em < lg)
   -----------------------------------------------------------------------------
   Cabeçalho sempre visível agrupa as 3 informações que o operador no
   balcão precisa pra decidir rápido:
     1. Código do pedido + status operacional
     2. Cliente + data
     3. Valor total + status financeiro
   Expansão revela vendedor e botões de ação (Entregar / Comprovante /
   Detalhes) em grid 2 colunas.
   ============================================================================= */
.pedido-card-item {
    background: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    margin-bottom: 8px;
    overflow: hidden;
}
.pedido-card-header {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 12px 14px;
    color: inherit;
    cursor: pointer;
}
.pedido-card-header:focus {
    outline: 2px solid var(--tblr-primary, #0d6efd);
    outline-offset: -2px;
}
.pedido-card-topo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.pedido-card-codigo {
    color: var(--tblr-primary, #0d6efd);
    font-size: 0.95rem;
    flex-shrink: 0;
}
.pedido-card-topo .badge {
    font-size: 10px;
    padding: 4px 8px;
    flex-shrink: 0;
}
.pedido-card-chevron {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    transition: transform 0.18s ease;
    color: var(--tblr-secondary);
}
.pedido-card-header[aria-expanded="true"] .pedido-card-chevron {
    transform: rotate(180deg);
}
.pedido-card-cliente {
    font-size: 0.9rem;
    line-height: 1.3;
    margin-bottom: 6px;
    color: var(--tblr-body-color);
}
.pedido-card-financeiro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.pedido-card-valor {
    font-size: 1rem;
}
.pedido-card-financeiro .badge {
    font-size: 10px;
    padding: 4px 8px;
}
.pedido-card-corpo {
    border-top: 1px solid var(--tblr-border-color);
    background: rgba(0, 0, 0, 0.02);
}
[data-bs-theme="dark"] .pedido-card-corpo {
    background: rgba(255, 255, 255, 0.02);
}
.pedido-card-detalhe {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 12px;
    margin: 12px 14px;
    font-size: 0.875rem;
}
.pedido-card-detalhe dt {
    color: var(--tblr-secondary);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    align-self: center;
}
.pedido-card-detalhe dd {
    margin: 0;
    color: var(--tblr-body-color);
}
.pedido-card-acoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 6px;
    padding: 0 14px 14px 14px;
}
.pedido-card-acoes .btn {
    padding: 8px 4px;
    font-size: 0.825rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Seleção em massa no card mobile de pedido. O checkbox é absoluto no
   topo-esquerdo (não reestrutura o accordion); o header recebe padding-left
   só nos cards selecionáveis pra abrir espaço sem sobrepor o código. */
.pedido-card-item--selecionavel {
    position: relative;
}
.pedido-card-check {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    margin: 0;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.pedido-card-check .form-check-input {
    width: 1.2rem;
    height: 1.2rem;
    margin: 0;
}
/* Indenta só a 1ª linha (código) pra abrir espaço ao checkbox — cliente e
   valor seguem com a largura cheia, importante em telas estreitas. */
.pedido-card-item--selecionavel .pedido-card-topo {
    padding-left: 30px;
}

/* =============================================================================
   Listagem de Movimentações de Estoque — accordion mobile (substitui a tabela em < lg)
   -----------------------------------------------------------------------------
   Cabeça sempre visível: data + hora à esquerda, badge de tipo à direita,
   produto e código do lote na linha de baixo + chevron. Detalhes
   (quantidade, motivo, pedido, observações, usuário) expandem ao toque.
   ============================================================================= */
.mov-card-item {
    background: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    margin-bottom: 8px;
    overflow: hidden;
}
.mov-card-header {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 12px 14px;
    color: inherit;
    cursor: pointer;
}
.mov-card-header:focus {
    outline: 2px solid var(--tblr-primary, #0d6efd);
    outline-offset: -2px;
}
.mov-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.mov-card-meta .badge {
    font-size: 10px;
    padding: 4px 8px;
    flex-shrink: 0;
}
.mov-card-produto {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 0.9rem;
    line-height: 1.3;
}
.mov-card-produto strong {
    flex: 1 1 auto;
}
.mov-card-chevron {
    flex-shrink: 0;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    transition: transform 0.18s ease;
    color: var(--tblr-secondary);
}
.mov-card-header[aria-expanded="true"] .mov-card-chevron {
    transform: rotate(180deg);
}
.mov-card-corpo {
    border-top: 1px solid var(--tblr-border-color);
    background: rgba(0, 0, 0, 0.02);
}
[data-bs-theme="dark"] .mov-card-corpo {
    background: rgba(255, 255, 255, 0.02);
}
.mov-card-detalhe {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 12px;
    margin: 12px 14px;
    font-size: 0.875rem;
}
.mov-card-detalhe dt {
    color: var(--tblr-secondary);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    align-self: center;
}
.mov-card-detalhe dd {
    margin: 0;
    color: var(--tblr-body-color);
}

/* =============================================================================
   Listagem de Beneficiamento — accordion mobile (substitui a tabela em < lg)
   -----------------------------------------------------------------------------
   Cabeça compacta sempre visível: #ID + data + fluxo "Origem → Destino"
   numa linha inline + chevron. Detalhes (quantidade, custo, lote,
   executor) expandem ao toque. Mesmo padrão de
   .estoque-card-item / .lotes-mobile-card.
   ============================================================================= */
.benef-card-item {
    background: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    margin-bottom: 8px;
    overflow: hidden;
}

.benef-card-header {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 12px 14px;
    color: inherit;
    cursor: pointer;
}
.benef-card-header:focus {
    outline: 2px solid var(--tblr-primary, #0d6efd);
    outline-offset: -2px;
}

.benef-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.benef-card-fluxo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.9rem;
    line-height: 1.3;
}
.benef-card-origem {
    color: var(--tblr-body-color);
    flex: 0 1 auto;
}
.benef-card-fluxo-arrow {
    color: var(--tblr-secondary);
    flex-shrink: 0;
}
.benef-card-destino {
    color: var(--tblr-success, #198754);
    font-weight: 700;
    flex: 1 1 auto;
}
.benef-card-chevron {
    flex-shrink: 0;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    transition: transform 0.18s ease;
    color: var(--tblr-secondary);
}
.benef-card-header[aria-expanded="true"] .benef-card-chevron {
    transform: rotate(180deg);
}

.benef-card-corpo {
    border-top: 1px solid var(--tblr-border-color);
    background: rgba(0, 0, 0, 0.02);
}
[data-bs-theme="dark"] .benef-card-corpo {
    background: rgba(255, 255, 255, 0.02);
}

.benef-card-detalhe {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 12px;
    margin: 12px 14px;
    font-size: 0.875rem;
}
.benef-card-detalhe dt {
    color: var(--tblr-secondary);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    align-self: center;
}
.benef-card-detalhe dd {
    margin: 0;
    color: var(--tblr-body-color);
}

/* =============================================================================
   Painel de Estoque — botões de ação (Nova Entrada, Lançar Perda, etc.)
   -----------------------------------------------------------------------------
   No mobile (< lg) o grid responsivo já organiza:
     linha 1: Nova Entrada (col-12)
     linha 2: Lançar Perda + Lançar Ajuste (col-6 cada)
     linha 3: Beneficiamento + Movimentações (col-6 cada)
   Aqui só padronizamos a altura e o padding pra todas as opções ficarem
   alinhadas e com área de toque confortável no celular.
   ============================================================================= */
@media (max-width: 991.98px) {
    .acoes-estoque .btn {
        min-height: 48px;
        padding-top: 10px;
        padding-bottom: 10px;
        white-space: normal;       /* permite quebra em "Beneficiamento" se necessário */
        line-height: 1.25;
    }
}

/* =============================================================================
   Hamburger SEM transformar em X quando o menu abre
   -----------------------------------------------------------------------------
   Por default o Tabler aplica `rotate(45deg) + opacity:0` no
   .navbar-toggler-icon quando aria-expanded=true, virando 3 linhas em X.
   Visualmente parece "botão de fechar" — esquisito porque o próprio
   botão também é o que fecha o menu. Override pra deixar o hamburger
   contínuo: 3 linhas sempre. O click do hamburger continua sendo
   toggle (abre se fechado, fecha se aberto) via Bootstrap collapse.
   ============================================================================= */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    transform: none !important;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
    top: -0.45em !important;
    transform: none !important;
    opacity: 1 !important;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
    bottom: -0.45em !important;
    opacity: 1 !important;
    transform: none !important;
}

/* =============================================================================
   Select de Plano de Contas — cabeçalhos não selecionáveis
   -----------------------------------------------------------------------------
   Usado pela macro `sistema/macros/select_plano_conta.html`. Marca contas-pai
   (categorias com filhos) como cabeçalho visual: aparecem no dropdown mas não
   são clicáveis. O browser pinta `<option disabled>` cinza-pálido por default;
   nossa regra deixa elas com contraste melhor (negrito + cor secundária forte
   + opacidade cheia), respeitando light e dark mode via tokens do Tabler.
   ============================================================================= */
option.plano-conta-cabecalho {
    font-weight: 700;
    color: var(--tblr-secondary, #495057);
    background-color: var(--tblr-bg-surface-secondary, rgba(0, 0, 0, 0.03));
    opacity: 1;            /* anula o fade de option:disabled em alguns browsers */
    font-style: normal;
    letter-spacing: 0.02em;
}

/* =============================================================================
   Linha vencida em listagens (A Receber, A Pagar etc.)
   -----------------------------------------------------------------------------
   Substitui o `table-danger` do Bootstrap, que no Tabler dark gera um rosa
   pálido sem contraste com o texto cinza. Aqui aplicamos:
     - Light mode: fundo levemente avermelhado, ainda legível.
     - Dark mode: fundo escuro com tom vermelho-acinzentado + borda lateral
       vermelha viva pra sinalizar alerta sem queimar a vista do operador.
   ============================================================================= */
tr.linha-vencida > td {
    background-color: #fff1f2 !important;       /* light: rose-50 */
    border-bottom-color: #fecdd3 !important;
}
tr.linha-vencida > td:first-child {
    box-shadow: inset 4px 0 0 0 #dc2626;        /* faixa vermelha à esquerda */
}

[data-bs-theme="dark"] tr.linha-vencida > td {
    background-color: rgba(220, 38, 38, 0.10) !important;   /* red-600 @ 10% */
    border-bottom-color: rgba(220, 38, 38, 0.22) !important;
    color: #fecaca;                              /* red-200 — texto legível */
}
[data-bs-theme="dark"] tr.linha-vencida > td:first-child {
    box-shadow: inset 4px 0 0 0 #ef4444;        /* red-500 — vivo no dark */
}
/* Texto "muted" dentro da linha vencida (Consumidor Final, datas) ganha
   um tom mais alaranjado pra preservar contraste sem virar invisível. */
[data-bs-theme="dark"] tr.linha-vencida .text-muted {
    color: #fdba74 !important;                  /* orange-300 */
}

/* Estado "ocultar enquanto não há dados / carregando" do modal de Estoque
   Reservado. Separado das classes responsivas para que o JS possa toggar
   visibilidade SEM colidir com o `d-none d-lg-block` que cuida do breakpoint.
   `!important` garante prioridade sobre `d-lg-block` (Bootstrap também usa
   `!important`); como este arquivo carrega depois, vence por ordem-fonte. */
.er-oculto {
    display: none !important;
}

/* =============================================================================
   Modal Estoque Reservado em Rascunhos — accordion mobile
   -----------------------------------------------------------------------------
   Em ≥ lg a tabela tradicional segue. Em < lg substituímos pelo accordion:
   cabeçalho compacto com Produto + status + quantidade reservada na primeira
   linha (sempre visível) e os 5 detalhes (lote, vendedor, cliente, pedido,
   data) + botão "Liberar reserva" expandem ao toque. Mesma estrutura de
   .mov-card-item / .pedido-card-item / .benef-card-item.
   ============================================================================= */
.estoque-reservado-card-item {
    background: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    margin-bottom: 8px;
    overflow: hidden;
}
.estoque-reservado-card-header {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 12px 14px;
    color: inherit;
    cursor: pointer;
}
.estoque-reservado-card-header:focus {
    outline: 2px solid var(--tblr-primary, #0d6efd);
    outline-offset: -2px;
}
.estoque-reservado-card-topo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}
.estoque-reservado-card-produto {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
    font-size: 0.95rem;
}
.estoque-reservado-card-topo .badge {
    font-size: 10px;
    padding: 4px 8px;
    flex-shrink: 0;
}
.estoque-reservado-card-chevron {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    transition: transform 0.18s ease;
    color: var(--tblr-secondary);
}
.estoque-reservado-card-header[aria-expanded="true"] .estoque-reservado-card-chevron {
    transform: rotate(180deg);
}
.estoque-reservado-card-qtd {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--tblr-body-color);
    line-height: 1.3;
}
.estoque-reservado-card-corpo {
    border-top: 1px solid var(--tblr-border-color);
    background: rgba(0, 0, 0, 0.02);
}
[data-bs-theme="dark"] .estoque-reservado-card-corpo {
    background: rgba(255, 255, 255, 0.02);
}
.estoque-reservado-card-detalhe {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 12px;
    margin: 12px 14px;
    font-size: 0.875rem;
}
.estoque-reservado-card-detalhe dt {
    color: var(--tblr-secondary);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    align-self: center;
}
.estoque-reservado-card-detalhe dd {
    margin: 0;
    color: var(--tblr-body-color);
    word-break: break-word;
}

/* =============================================================================
   Carrinho do PDV — accordion mobile (substitui a tabela em < lg)
   -----------------------------------------------------------------------------
   Diferença vs. outros card-items: o cabeçalho tem DOIS botões lado a lado —
   o toggle (expande o card) à esquerda ocupando a maior parte, e o botão
   "Remover" (✕) sempre visível à direita, pra ação rápida sem precisar
   expandir. Bootstrap collapse pega só o toggle; o remover é sibling.
   ============================================================================= */
.carrinho-card-item {
    background: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    margin-bottom: 8px;
    overflow: hidden;
}
.carrinho-card-header-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
}
.carrinho-card-toggle {
    flex: 1 1 auto;
    min-width: 0;             /* permite truncamento dentro do flex */
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.carrinho-card-toggle:focus {
    outline: 2px solid var(--tblr-primary, #0d6efd);
    outline-offset: 2px;
    border-radius: 4px;
}
.carrinho-card-topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 2px;
}
.carrinho-card-produto {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
    font-size: 0.95rem;
    line-height: 1.25;
}
.carrinho-card-total {
    flex-shrink: 0;
    font-size: 0.95rem;
    color: var(--tblr-body-color);
}
.carrinho-card-resumo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.85rem;
}
.carrinho-card-chevron {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    transition: transform 0.18s ease;
    color: var(--tblr-secondary);
}
.carrinho-card-toggle[aria-expanded="true"] .carrinho-card-chevron {
    transform: rotate(180deg);
}
.carrinho-card-remover {
    flex-shrink: 0;
    align-self: center;
}
.carrinho-card-corpo {
    border-top: 1px solid var(--tblr-border-color);
    background: rgba(0, 0, 0, 0.02);
}
[data-bs-theme="dark"] .carrinho-card-corpo {
    background: rgba(255, 255, 255, 0.02);
}
.carrinho-card-detalhe {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 12px;
    margin: 10px 12px;
    font-size: 0.85rem;
}
.carrinho-card-detalhe dt {
    color: var(--tblr-secondary);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    align-self: center;
}
.carrinho-card-detalhe dd {
    margin: 0;
    color: var(--tblr-body-color);
    word-break: break-word;
}

/* =============================================================================
   Detalhe de Pedido — título compacto (código + badges) e botões em grid
   -----------------------------------------------------------------------------
   Mobile: código grande na 1ª linha, badges menores que NÃO herdam o tamanho
   gigante da `.page-title`. Em desktop, tudo inline.
   ============================================================================= */
.pedido-titulo-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    line-height: 1.2;
}
.pedido-codigo {
    flex-shrink: 0;
}
.pedido-badge-status {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.35em 0.7em;
    letter-spacing: 0.02em;
    line-height: 1.4;
    vertical-align: middle;
    /* Reseta tudo que pudesse herdar da `.page-title` (h2): */
    text-transform: none;
}
@media (max-width: 575.98px) {
    .pedido-titulo-row {
        font-size: 1.35rem;
    }
    .pedido-badge-status {
        font-size: 0.7rem;
        padding: 0.3em 0.6em;
    }
}

/* =============================================================================
   Detalhe de Pedido — listagem de Itens (accordion mobile)
   -----------------------------------------------------------------------------
   Header de cada item tem o toggle (expande) + botão de ação rápida (Devolver
   ou Separar) lado a lado, similar ao .carrinho-card-item. Detalhes (qtd,
   preço unit., devolução, observações) ficam no corpo colapsável.
   ============================================================================= */
.pedido-item-card {
    background: var(--tblr-bg-surface);
    border-bottom: 1px solid var(--tblr-border-color);
    overflow: hidden;
}
.pedido-item-card:first-child {
    border-top: 1px solid var(--tblr-border-color);
}
.pedido-item-header-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 10px 14px;
}
.pedido-item-toggle {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.pedido-item-toggle:focus {
    outline: 2px solid var(--tblr-primary, #0d6efd);
    outline-offset: 2px;
    border-radius: 4px;
}
.pedido-item-topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 2px;
}
.pedido-item-produto {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
    font-size: 0.95rem;
    line-height: 1.25;
}
.pedido-item-total {
    flex-shrink: 0;
    font-size: 0.95rem;
}
.pedido-item-resumo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.85rem;
}
.pedido-item-chevron {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    transition: transform 0.18s ease;
    color: var(--tblr-secondary);
}
.pedido-item-toggle[aria-expanded="true"] .pedido-item-chevron {
    transform: rotate(180deg);
}
.pedido-item-acao {
    flex-shrink: 0;
    align-self: center;
    min-width: 110px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pedido-item-corpo {
    border-top: 1px solid var(--tblr-border-color);
    background: rgba(0, 0, 0, 0.02);
}
[data-bs-theme="dark"] .pedido-item-corpo {
    background: rgba(255, 255, 255, 0.02);
}
.pedido-item-detalhe {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 12px;
    margin: 10px 14px;
    font-size: 0.85rem;
}
.pedido-item-detalhe dt {
    color: var(--tblr-secondary);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    align-self: start;
    padding-top: 2px;
}
.pedido-item-detalhe dd {
    margin: 0;
    color: var(--tblr-body-color);
    word-break: break-word;
}
.pedido-resumo-mobile {
    padding: 14px 14px 16px;
    border-top: 1px solid var(--tblr-border-color);
    background: rgba(0, 0, 0, 0.02);
}
[data-bs-theme="dark"] .pedido-resumo-mobile {
    background: rgba(255, 255, 255, 0.02);
}

/* =============================================================================
   Detalhe de Pedido — listagem de Formas de Pagamento (accordion mobile)
   ============================================================================= */
.pedido-pag-card {
    background: var(--tblr-bg-surface);
    border-bottom: 1px solid var(--tblr-border-color);
    overflow: hidden;
}
.pedido-pag-card:first-child {
    border-top: 1px solid var(--tblr-border-color);
}
.pedido-pag-toggle {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 10px 14px;
    color: inherit;
    cursor: pointer;
}
.pedido-pag-toggle:focus {
    outline: 2px solid var(--tblr-primary, #0d6efd);
    outline-offset: -2px;
}
.pedido-pag-topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}
.pedido-pag-resumo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.85rem;
}
.pedido-pag-resumo .badge {
    font-size: 0.7rem;
    padding: 0.35em 0.7em;
}
.pedido-pag-chevron {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    transition: transform 0.18s ease;
    color: var(--tblr-secondary);
}
.pedido-pag-toggle[aria-expanded="true"] .pedido-pag-chevron {
    transform: rotate(180deg);
}
.pedido-pag-corpo {
    border-top: 1px solid var(--tblr-border-color);
    background: rgba(0, 0, 0, 0.02);
}
[data-bs-theme="dark"] .pedido-pag-corpo {
    background: rgba(255, 255, 255, 0.02);
}
.pedido-pag-detalhe {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 12px;
    margin: 10px 14px;
    font-size: 0.85rem;
}
.pedido-pag-detalhe dt {
    color: var(--tblr-secondary);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    align-self: center;
}
.pedido-pag-detalhe dd {
    margin: 0;
    color: var(--tblr-body-color);
    word-break: break-word;
}

/* =============================================================================
   Listagens de CRUD — accordion mobile genérico (substitui `table-mobile-md`)
   -----------------------------------------------------------------------------
   Aplicado a Produtos, Fornecedores, Clientes, Colaboradores (e quaisquer
   outras listagens CRUD futuras). Antes o sistema usava `table-mobile-md` do
   Tabler, que empilhava cada célula numa linha vertical com label acima e
   valor abaixo — feio e pouco escaneável. Agora cada registro vira card com
   cabeça compacta (código/nome + chevron + badge "Inativo" só se aplicável)
   e detalhes expandem ao toque.

   Convenção HTML mínima:
     <div class="crud-card-item">
       <button class="crud-card-header" data-bs-toggle="collapse" ...>
         <div class="crud-card-topo">
           <span class="crud-card-codigo">CODE</span>
           <span class="badge crud-card-badge">Inativo</span>   ← opcional
           <span class="crud-card-chevron"><svg .../></span>
         </div>
         <div class="crud-card-nome">Nome do registro</div>
       </button>
       <div class="collapse crud-card-corpo" id="...">
         <dl class="crud-card-detalhe">
           <dt>Label</dt><dd>Valor</dd>
           ...
         </dl>
         <div class="crud-card-acoes">
           <a class="btn ... flex-fill">Editar</a>
           <a class="btn ... flex-fill">Excluir</a>
         </div>
       </div>
     </div>
   ============================================================================= */
.crud-card-item {
    background: var(--tblr-bg-surface);
    border-bottom: 1px solid var(--tblr-border-color);
    overflow: hidden;
}
.crud-card-item:first-child {
    border-top: 1px solid var(--tblr-border-color);
}
.crud-card-header {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 12px 14px;
    color: inherit;
    cursor: pointer;
}
.crud-card-header:focus {
    outline: 2px solid var(--tblr-primary, #0d6efd);
    outline-offset: -2px;
}
.crud-card-topo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.crud-card-codigo {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tblr-secondary);
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
.crud-card-badge {
    font-size: 0.7rem;
    padding: 0.3em 0.6em;
    flex-shrink: 0;
}
.crud-card-chevron {
    flex-shrink: 0;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    transition: transform 0.18s ease;
    color: var(--tblr-secondary);
}
.crud-card-header[aria-expanded="true"] .crud-card-chevron {
    transform: rotate(180deg);
}
.crud-card-nome {
    font-size: 1rem;
    font-weight: 600;
    color: var(--tblr-body-color);
    word-break: break-word;
    line-height: 1.3;
}
.crud-card-corpo {
    border-top: 1px solid var(--tblr-border-color);
    background: rgba(0, 0, 0, 0.02);
}
[data-bs-theme="dark"] .crud-card-corpo {
    background: rgba(255, 255, 255, 0.02);
}
.crud-card-detalhe {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 12px;
    margin: 12px 14px;
    font-size: 0.875rem;
}
.crud-card-detalhe dt {
    color: var(--tblr-secondary);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    align-self: center;
}
.crud-card-detalhe dd {
    margin: 0;
    color: var(--tblr-body-color);
    word-break: break-word;
}
.crud-card-acoes {
    display: flex;
    gap: 8px;
    padding: 8px 14px 14px;
    flex-wrap: wrap;
}
.crud-card-acoes .btn {
    min-height: 40px;          /* WCAG touch-target em mobile */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}