.peer:checked~.peer-checked\:border-warning {
    --tw-border-opacity: 1;
    border-color: rgb(226 160 63/var(--tw-border-opacity))
}

.peer:checked~.peer-checked\:bg-warning {
    --tw-bg-opacity: 1;
    background-color: rgb(226 160 63/var(--tw-bg-opacity))
}

.peer:checked~.peer-checked\:bg-warning\/10 {
    background-color: #e2a03f99
}

.peer:checked~.peer-checked\:before\:bg-warning:before {
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: rgb(226 160 63/var(--tw-bg-opacity))
}

.catalog-active-toggle::before {
    background-image: url('../images/close.svg');
}

.peer:checked~.catalog-active-toggle::before {
    background-image: url('../images/checked.svg');
}

.divider {
    border-top: 1px solid #3b3f5c;
    padding: 0;
    list-style: none;
}

.border-l-\[\#4468fd\] {
    --tw-border-opacity: 1;
    border-left-color: rgb(177, 132, 64);
}

/* Gaps do CSS estático do Vristo (ver skill ui-vristo-css-limits) usados na identidade visual
"âmbar" do painel (topbar + dashboard geral): nenhuma destas combinações existe no style.css
pré-compilado, mesmo sendo classes Tailwind válidas. */

.tracking-wide {
    letter-spacing: 0.025em;
}

.tracking-wider {
    letter-spacing: 0.05em;
}

.tracking-widest {
    letter-spacing: 0.1em;
}

.ce-icon-btn:hover {
    color: #e2a03f !important;
}

.ce-hover-amber:hover {
    color: #e2a03f !important;
    border-color: #e2a03f !important;
}

/* Sistema de "cartão premium" do Dashboard Geral (pnl-*): reproduz o contraste de elevação e os
raios grandes de um design de referência do cliente, sem depender de utilitários Tailwind que não
existem neste tema estático (rounded-2xl, hover:-translate-y-1, bg-gradient-to-br, group-hover:scale-110
— nenhum confirmado no style.css). Escopo deliberadamente restrito às telas que pedem esse visual
(hoje: Dashboard Geral) — não redefine `.panel` globalmente para não afetar o resto do painel. */

:root {
    /* Plus Jakarta Sans substituiu Nunito em 04/10/2026, conforme o padrão visual aprovado. */
    --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
    --pnl-canvas: #0b0f17;
    --pnl-card-bg: #ffffff;
    --pnl-card-border: rgba(0, 0, 0, 0.08);
    --pnl-card-bg-nested: #f4f5f7;
    --pnl-surface-bg: #131b2e;
    --pnl-surface-raised: #171f31;
    --pnl-control-bg: #0e1522;
    --pnl-text-primary: #e7ebf3;
    --pnl-text-secondary: #8490a7;
    --pnl-text-muted: #888ea8;
    --pnl-border: #253149;
    --pnl-amber-primary: #f5a900;
    --pnl-green-primary: #26d69b;
    --pnl-red-primary: #ff646e;
    --pnl-blue-primary: #5c9dff;
    --pnl-focus-ring: rgba(245, 169, 0, 0.1);
    --pnl-hover-surface: rgba(255, 255, 255, 0.025);
}

.font-plus-jakarta {
    font-family: var(--font-sans) !important;
}

.dark {
    /* mesmo tom da barra de topo (dark:bg-[#0e1726] em default-header.blade.php) */
    --pnl-card-bg: #0e1726;
    --pnl-card-border: rgba(255, 255, 255, 0.06);
    /* um degrau mais claro que --pnl-card-bg, pra dar contraste de elevação a um card dentro de
    outro (ver .pnl-card--nested/.pnl-surface--nested) */
    --pnl-card-bg-nested: #1a2436;
}

/* .pnl-surface: mesma superfície visual (fundo/borda/raio), sem a elevação de hover — para
seções/contêineres passivos (tabela, lista de atalhos), onde levantar o card inteiro ao passar o
mouse por cima ficaria estranho. .pnl-card adiciona a elevação por cima, para cartões compactos
que representam uma unidade só de informação (métricas, KPIs, anúncios). */
.pnl-surface {
    background-color: var(--pnl-card-bg) !important;
    border: 1px solid var(--pnl-card-border);
    border-radius: 16px;
}

/* Variante com cantos e respiro maiores (cartões grandes/poucos por tela, ex: página de Perfil) —
não mexe no .pnl-surface padrão usado nas telas de listagem/tabela, mais compactas. */
.pnl-surface--lg {
    border-radius: 24px !important;
    padding: 1.5rem !important;
}

.pnl-card {
    background-color: var(--pnl-card-bg) !important;
    border: 1px solid var(--pnl-card-border);
    border-radius: 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Cartão aninhado dentro de outro .pnl-surface/.pnl-card (ex: os cards de opção dentro de uma aba
da tela de Configurações) — usa --pnl-card-bg-nested em vez de --pnl-card-bg pra não ficar da
mesma cor do card pai (sem isso os dois se fundiam visualmente, sem contraste de profundidade).
Precisa vir DEPOIS de .pnl-card/.pnl-surface no arquivo: como as duas regras usam !important com
a mesma especificidade (uma classe), quem aparece por último no CSS vence — declarada antes, esta
regra perdia silenciosamente para .pnl-card nos cards que combinam as duas classes (ex: Bling,
Usuários), fazendo-os voltarem ao tom escuro padrão em vez do tom aninhado mais claro. */
.pnl-card--nested,
.pnl-surface--nested {
    background-color: var(--pnl-card-bg-nested) !important;
}

/* Hover mantém só o box-shadow — pedido explícito do cliente pra tirar a borda colorida por
variante (amber/success/danger/etc.) que aparecia no hover; a borda continua sempre a cor padrão
do card, em qualquer variante. */
.pnl-card:hover {
    box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.25);
}

/* Verde/vermelho vibrantes pedidos pelo cliente (referência), em vez do success/danger padrão do
tema Vristo (mais opaco/coral) — escopados a este dashboard, sem mudar os badges de status usados
no resto do sistema (ex: status de pedido). */
.pnl-success-text {
    color: #34d399 !important;
}

.pnl-success-bg {
    background-color: rgba(52, 211, 153, 0.12) !important;
}

.pnl-success-dot {
    background-color: #34d399 !important;
}

.pnl-danger-text {
    color: #ef4444 !important;
}

.pnl-danger-bg {
    background-color: rgba(239, 68, 68, 0.12) !important;
}

.pnl-danger-dot {
    background-color: #ef4444 !important;
}

.pnl-info-text {
    color: #38bdf8 !important;
}

.pnl-info-bg {
    background-color: rgba(56, 189, 248, 0.16) !important;
}

.pnl-amber-bg {
    background-color: rgba(226, 160, 63, 0.18) !important;
}

/* Selos de ícone dos cards de KPI: mais saturados que um simples bg-X/10, pra não ficar "apagado"
— usa as cores vibrantes (.pnl-danger-*/.pnl-info-*/.pnl-success-*) em vez do danger/info opacos
do tema Vristo. */
.pnl-icon-badge--danger {
    background-color: rgba(239, 68, 68, 0.18);
    color: #ef4444;
}

.pnl-icon-badge--amber {
    background-color: rgba(226, 160, 63, 0.2);
    color: #e2a03f;
}

/* Selo com o mesmo gradiente sólido do .pnl-avatar + ícone escuro por cima — usado no card de
Perfil (lista de E-mail/Usuário/Empresa/Membro Desde), pedido explícito do cliente por referência
de imagem, mais vívido que o .pnl-icon-badge--amber padrão (que é só uma tinta translúcida). */
.pnl-icon-badge--amber-solid {
    background: linear-gradient(135deg, #f59e0b, #fb923c);
    color: #0b0f19;
}

/* Brilho decorativo sutil no canto superior direito do card — usado no card de Perfil pra
aproximar do efeito "glass-panel" com glow da referência do cliente. */
.pnl-surface--glow {
    background-image: radial-gradient(circle at top right, rgba(226, 160, 63, 0.12), transparent 60%);
}

.pnl-icon-badge--info {
    background-color: rgba(56, 189, 248, 0.18);
    color: #38bdf8;
}

.pnl-icon-badge--success {
    background-color: rgba(52, 211, 153, 0.18);
    color: #34d399;
}

/* Caixa "Precisa de atenção hoje" — fundo levemente inset dentro do card do Fluxo de Produção,
selo "Urgente" e linhas com hover, seguindo a referência do cliente. */
.pnl-attn-box {
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid var(--pnl-card-border);
    border-radius: 12px;
    padding: 12px;
}

.dark .pnl-attn-box {
    background: rgba(0, 0, 0, 0.25);
}

/* Ação de visualização do pedido no cabeçalho dos cards "Em Espera": mantém o
ícone agrupado ao número, mas evita que ele fique colado à borda ou com área de
clique menor que os demais comandos do painel. */
.pnl-attn-order-actions {
    padding-right: 2px;
}

.pnl-attn-view {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(226, 160, 63, 0.28);
    border-radius: 8px;
    background: rgba(226, 160, 63, 0.08);
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.pnl-attn-view:hover {
    border-color: rgba(226, 160, 63, 0.58);
    background: rgba(226, 160, 63, 0.18);
    transform: translateY(-1px);
}

/* Botão "Produzir" dos tickets Em Espera: fundo levemente destacado do card + borda sutil visível,
diferente do .pnl-ad-btn (que fica neutro até o hover) porque aqui o cliente pediu um botão já
visível por padrão, só acendendo âmbar no hover. */
.pnl-produce-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pnl-produce-btn:hover {
    background-color: #e2a03f;
    border-color: #e2a03f;
    color: #0b0f19 !important;
}

.pnl-badge,
.pnl-badge-urgent,
.pnl-badge-amber,
.pnl-badge-success,
.pnl-badge-info,
.pnl-badge-danger,
.pnl-badge-primary,
.pnl-badge-warning,
.pnl-badge-secondary,
.pnl-badge-dark {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
}

.pnl-badge-urgent {
    font-size: 10px;
    background-color: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.pnl-badge-amber {
    background-color: rgba(226, 160, 63, 0.12);
    color: #e2a03f;
}

/* Selo verde "Ativo"/"Conectado" para recursos já disponíveis (ex: cards de Configurações que
levam a uma tela real), no mesmo padrão pílula do .pnl-badge-amber. */
.pnl-badge-success {
    background-color: rgba(52, 211, 153, 0.14);
    color: #34d399;
}

.pnl-badge-info {
    background-color: rgba(56, 189, 248, 0.16);
    color: #38bdf8;
}

/* Selo vermelho "Inativo"/estado negativo, mesmo padrão pílula dos demais .pnl-badge-*. */
.pnl-badge-danger {
    background-color: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

/* Aliases para os nomes de cor "crus" que já vêm dos arquivos de lang (sale/sale.php,
catalog/items.php, etc.) — "primary" e "warning" apontam pro mesmo âmbar do tema (ver
.badge-outline-primary/-warning em style.css, que já usam o mesmo hex). Mantém
pnl-badge-{{ $color }} funcionando direto nas views, sem remapear cada uma. */
.pnl-badge-primary,
.pnl-badge-warning {
    background-color: rgba(226, 160, 63, 0.12);
    color: #e2a03f;
}

.pnl-badge-secondary {
    background-color: rgba(167, 139, 250, 0.16);
    color: #a78bfa;
}

/* "dark" no Vristo é um cinza-chumbo quase invisível em fundo escuro (usado só pra texto em
fundo claro) — aqui uso um cinza claro equivalente, legível no tema escuro do painel. */
.pnl-badge-dark {
    background-color: rgba(148, 163, 184, 0.16);
    color: #94a3b8;
}

.pnl-attn-row {
    padding: 6px 8px;
    border-radius: 8px;
    transition: background-color 0.15s ease;
}

.dark .pnl-attn-row:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.pnl-attn-row:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

/* Gaveta lateral de filtros (protótipo) — mesmo conceito do "Template Customizer" do Vristo
(default-theme-customiser.blade.php, desativado), com o botão flutuante amber do resto do painel. */
.pnl-filter-fab {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fbbf24, #e2a03f);
    color: #0b0f19;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px -8px rgba(226, 160, 63, 0.6);
    z-index: 40;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.pnl-filter-fab:hover {
    transform: scale(1.08);
}

.pnl-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 49;
}

.pnl-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    right: -420px;
    width: 100%;
    max-width: 420px;
    background: var(--pnl-surface-bg);
    z-index: 50;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.2);
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

.pnl-drawer--open {
    right: 0;
}

.pnl-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background-color: rgba(14, 21, 34, 0.6);
    border-bottom: 1px solid var(--pnl-card-border);
    flex-shrink: 0;
}

.pnl-drawer__header h4 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.pnl-drawer__heading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.pnl-drawer__icon {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(245, 169, 0, 0.2);
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--pnl-amber-primary);
    background-color: rgba(245, 169, 0, 0.1);
}

.pnl-drawer__subtitle {
    margin: 2px 0 0;
    color: var(--pnl-text-secondary);
    font-size: 11px;
    line-height: 1.35;
}

.pnl-drawer__close {
    color: #e2a03f;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.pnl-drawer__close:hover {
    opacity: 1;
}

.pnl-drawer__body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.pnl-drawer__footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
    padding: 20px;
    border-top: 1px solid var(--pnl-border);
    background-color: rgba(14, 21, 34, 0.8);
}

.receivables-drawer-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.receivables-drawer-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.receivables-drawer-field label {
    color: var(--pnl-text-primary);
    font-size: 12px;
    font-weight: 600;
}

.receivables-drawer-field .form-input,
.receivables-drawer-field .form-select {
    width: 100%;
    min-height: 38px;
    border-radius: 12px;
    background-color: var(--pnl-control-bg) !important;
    border-color: var(--pnl-border) !important;
    color: var(--pnl-text-primary) !important;
    font-size: 12px;
}

.receivables-drawer-field .form-input:focus,
.receivables-drawer-field .form-select:focus {
    border-color: var(--pnl-amber-primary) !important;
}

.receivables-columns-trigger {
    align-items: center;
    border-top: 1px solid var(--pnl-border);
    color: var(--pnl-text-primary);
    display: flex;
    font-size: 12px;
    font-weight: 600;
    gap: 10px;
    margin-top: 2px;
    padding: 16px 0 0;
    text-align: left;
    transition: color 150ms ease;
    width: 100%;
}

.receivables-columns-trigger:hover,
.receivables-columns-trigger:focus-visible {
    color: var(--pnl-amber-primary);
}

.receivables-columns-trigger__icon {
    align-items: center;
    color: var(--pnl-amber-primary);
    display: inline-flex;
    justify-content: center;
}

.receivables-columns-trigger__chevron {
    color: var(--pnl-text-secondary);
    margin-left: auto;
    transition: transform 150ms ease;
}

.receivables-columns-modal-backdrop {
    align-items: center;
    background: rgba(0, 0, 0, 0.68);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 1rem;
    position: fixed;
    z-index: 70;
}

.pnl-inline-error {
    color: #dc3545;
    display: block;
    font-size: 12px;
    line-height: 1.45;
    margin-top: 4px;
}

[aria-invalid="true"].form-input,
[aria-invalid="true"].form-select,
[aria-invalid="true"].form-textarea {
    border-color: #dc3545 !important;
}

/* O fundo dos modais do painel preserva o conteúdo da página, mas o desfoca. */
.fixed.inset-0[class*="bg-black/"],
.fixed.inset-0[class*="bg-[black]/"],
.receivables-columns-modal-backdrop {
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
}

.receivables-columns-modal {
    background: var(--pnl-surface-bg);
    border: 1px solid var(--pnl-border);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.36);
    max-height: min(720px, calc(100vh - 2rem));
    max-width: 426px;
    overflow: hidden;
    width: 100%;
}

.receivables-columns-modal__header,
.receivables-columns-modal__footer {
    align-items: center;
    display: flex;
    gap: 12px;
    padding: 16px 22px;
}

.receivables-columns-modal__header {
    border-bottom: 1px solid var(--pnl-border);
    justify-content: space-between;
}

.receivables-columns-modal__title-wrap {
    align-items: center;
    display: flex;
    gap: 10px;
    min-width: 0;
}

.receivables-columns-modal__icon {
    align-items: center;
    background: rgba(245, 169, 0, 0.12);
    border: 1px solid rgba(245, 169, 0, 0.3);
    border-radius: 7px;
    color: var(--pnl-amber-primary);
    display: inline-flex;
    flex: 0 0 32px;
    height: 32px;
    justify-content: center;
}

.receivables-columns-modal__header h2 {
    color: var(--pnl-text-primary);
    font-size: 15px;
    font-weight: 700;
    margin: 0;
}

.receivables-columns-modal__close {
    align-items: center;
    background: var(--pnl-control-bg);
    border: 1px solid var(--pnl-border);
    border-radius: 8px;
    color: var(--pnl-text-secondary);
    display: inline-flex;
    height: 32px;
    justify-content: center;
    transition: color 150ms ease, border-color 150ms ease;
    width: 32px;
}

.receivables-columns-modal__close:hover,
.receivables-columns-modal__close:focus-visible {
    border-color: var(--pnl-amber-primary);
    color: var(--pnl-amber-primary);
}

.receivables-columns-modal__body {
    max-height: 500px;
    overflow-y: auto;
    padding: 22px;
}

.receivables-columns-modal__description {
    color: var(--pnl-text-secondary);
    font-size: 12px;
    line-height: 1.45;
    margin: 0 0 14px;
}

.receivables-columns-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.receivables-column-option {
    align-items: center;
    background: var(--pnl-control-bg);
    border: 1px solid var(--pnl-border);
    border-radius: 11px;
    color: var(--pnl-text-primary);
    cursor: pointer;
    display: flex;
    font-size: 12px;
    font-weight: 600;
    justify-content: space-between;
    min-height: 38px;
    padding: 0 12px;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.receivables-column-option:hover {
    background: var(--pnl-surface-raised);
    border-color: rgba(245, 169, 0, 0.55);
}

.receivables-column-option .form-checkbox {
    accent-color: var(--pnl-amber-primary);
    height: 16px;
    margin: 0;
    width: 16px;
}

.receivables-columns-modal__warning {
    color: var(--pnl-red-primary);
    font-size: 11px;
    margin: 10px 0 0;
}

.receivables-columns-modal__footer {
    border-top: 1px solid var(--pnl-border);
    justify-content: flex-end;
}

.receivables-columns-modal__footer .btn {
    min-height: 36px;
    white-space: nowrap;
}

.receivables-columns-modal__footer .btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

@media (max-width: 480px) {
    .receivables-columns-modal-backdrop {
        align-items: flex-end;
        padding: 0;
    }

    .receivables-columns-modal {
        border-radius: 14px 14px 0 0;
        max-height: calc(100vh - 1rem);
    }

    .receivables-columns-modal__header,
    .receivables-columns-modal__body,
    .receivables-columns-modal__footer {
        padding-left: 18px;
        padding-right: 18px;
    }
}

.receivables-date-input-wrap {
    position: relative;
}

.receivables-date-input-wrap .form-input {
    padding-right: 40px;
}

.receivables-date-input-wrap input[type='date']::-webkit-calendar-picker-indicator {
    opacity: 0;
    cursor: pointer;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.receivables-date-icon {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    color: var(--pnl-amber-primary);
    pointer-events: none;
}

.receivables-filter-summary {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
    padding: 16px;
    border: 1px solid var(--pnl-border);
    border-radius: 12px;
    background-color: var(--pnl-control-bg);
}

.receivables-filter-summary__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.receivables-filter-summary__label {
    align-items: center;
    display: inline-flex;
    color: var(--pnl-text-secondary);
    font-size: 12px;
}

.receivables-filter-summary__icon {
    align-items: center;
    background: rgba(245, 169, 0, 0.1);
    border: 1px solid rgba(245, 169, 0, 0.32);
    border-radius: 11px;
    color: var(--pnl-amber-primary);
    display: inline-flex;
    flex: 0 0 40px;
    height: 40px;
    justify-content: center;
}

.receivables-filter-summary__content > strong {
    color: var(--pnl-amber-primary);
    font-size: 20px;
    line-height: 1;
}

.pnl-icon-badge {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.pnl-card:hover .pnl-icon-badge {
    transform: scale(1.1);
}

.pnl-ad-card {
    border: 2px dashed var(--pnl-card-border);
    border-radius: 16px;
    background: linear-gradient(160deg, var(--pnl-card-bg), transparent 130%);
    transition: border-color 0.2s ease;
}

.dark .pnl-ad-card {
    background: linear-gradient(160deg, #161e2e, #0b0f19);
}

.pnl-ad-card:hover {
    border-color: rgba(245, 158, 11, 0.5);
}

.pnl-ad-btn {
    background: rgba(148, 163, 184, 0.14);
    border-radius: 10px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.pnl-ad-btn:hover {
    background-color: #e2a03f;
    color: #0b0f19 !important;
}

/* Reskin dos painéis suspensos do cabeçalho e do menu horizontal (Dashboard/Cadastros/Vendas/
Estoque/Financeiro): cantos maiores e um tom de fundo mais neutro no dark, pedido explícito do
cliente pra bater com a referência visual dele. O hover em âmbar dos itens já existia no tema
(rgb(226 160 63) / #e2a03f1a) — não precisou mexer. */
.dropdown ul,
.horizontal-menu ul.sub-menu {
    border-radius: 12px;
    overflow: hidden;
}

.dark .dropdown ul,
.dark .horizontal-menu ul.sub-menu {
    background-color: #161e2e !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Botões de ação do cabeçalho (acesso rápido, notificações, ajuda, configurações): quadrados com
canto de 10px em vez de círculos, seguindo a referência. */
.pnl-topbar-btn {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}

.pnl-topbar {
    border: 1px solid var(--pnl-card-border);
}

.dark .pnl-topbar-btn {
    background-color: #1f2937 !important;
}

.dark .pnl-topbar-btn:hover {
    background-color: #374151 !important;
}

.pnl-topbar-btn--accent:hover {
    background-color: #e2a03f !important;
    color: #0b0f19 !important;
}

.pnl-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.pnl-avatar__dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #34d399;
    border: 2px solid var(--pnl-card-bg);
}

.pnl-icon-badge--neutral {
    background-color: rgba(148, 163, 184, 0.12);
    color: #94a3b8;
}

.dark .pnl-icon-badge--neutral {
    background-color: rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
}

/* Selo neutro com ícone âmbar (card de Perfil): seletor composto pra vencer a cor cinza de
.pnl-icon-badge--neutral independente da ordem no arquivo (mesma técnica já usada em
.pnl-action-btn.pnl-icon-badge--success/--info). */
.pnl-icon-badge--neutral.text-warning {
    color: #e2a03f;
}

/* text-2xs não existe no CSS estático do tema (o menor tamanho nomeado é .text-xs, 12px) — usado
para textos secundários que precisam ficar menores que isso, ex: descrição de página. */
.text-2xs {
    font-size: 11px;
    line-height: 1rem;
}

.text-3xs {
    font-size: 10px;
    line-height: 0.875rem;
}

.pnl-section-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
}

/* Trilho único do seletor de tema — um único "botão" visual dividido em 3 segmentos, em vez de
3 botões soltos lado a lado (pedido explícito do cliente: "parecem 3 botões feios"). */
.pnl-theme-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding: 3px;
    border-radius: 12px;
    background-color: rgba(148, 163, 184, 0.08);
    border: 1px solid var(--pnl-card-border);
}

.pnl-theme-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 7px 4px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    background-color: transparent;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.pnl-theme-btn--active {
    background-color: #e2a03f !important;
    color: #0b0f19 !important;
}

.pnl-plan-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(226, 160, 63, 0.4);
    background-color: rgba(226, 160, 63, 0.1);
    color: #e2a03f;
    font-size: 12px;
    font-weight: 700;
}

.pnl-badge-pro {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background-color: rgba(226, 160, 63, 0.15);
    color: #e2a03f;
    text-transform: uppercase;
}

.pnl-search-input {
    border-radius: 10px !important;
}

.dark .pnl-search-input {
    background-color: #111827 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark .pnl-search-input:focus {
    border-color: #e2a03f !important;
}

.pnl-avatar {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    color: #0b0f19;
    background: linear-gradient(135deg, #f59e0b, #fb923c);
}

/* Cabeçalho e card de ajuda do painel "Atalhos Úteis" (sidebar do Dashboard Geral). */

.pnl-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #e2a03f;
    background: rgba(226, 160, 63, 0.12);
    border-radius: 999px;
    padding: 4px 12px;
}

.pnl-group-icon {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(226, 160, 63, 0.12);
    color: #e2a03f;
    flex-shrink: 0;
}

.pnl-chevron {
    margin-left: auto;
    opacity: 0.4;
    flex-shrink: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.pnl-shortcut-link:hover .pnl-chevron {
    opacity: 1;
    transform: translateX(2px);
}

.pnl-help-card {
    display: flex;
    border: 1px solid var(--pnl-card-border);
    border-radius: 14px;
    padding: 16px;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.pnl-help-card:hover {
    border-color: rgba(226, 160, 63, 0.4);
    background-color: rgba(226, 160, 63, 0.04);
}

.pnl-help-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(226, 160, 63, 0.12);
    color: #e2a03f;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* BUG REAL (não cache): o tema tem uma regra própria, mais específica que uma simples .text-warning
numa svg solta — `.dark.horizontal .nav-item a div:first-child svg { color: #ffffff80 }` (style.css
linha ~2736) — que sempre vencia e deixava os ícones do menu horizontal brancos 50% transparentes
(parecendo cinza), mesmo com a classe text-warning aplicada. Sobrepõe aqui com um seletor igualmente
específico + a classe, então nem precisaria de !important, mas deixo por clareza. */
.horizontal .nav-item a div:first-child svg.text-warning,
.dark.horizontal .nav-item a div:first-child svg.text-warning,
.horizontal .dark .nav-item a div:first-child svg.text-warning {
    color: #e2a03f !important;
}

/* Botão de ação em ícone (tabelas da Dashboard de Produção): sem caixa/fundo, só o ícone colorido,
acendendo um fundo âmbar sutil no hover como feedback — pedido explícito do cliente pra tirar o
fundo cinza sólido que ficava "feio" no estado normal. Todos os ícones de ação usam o mesmo padrão
(cor warning + hover âmbar compartilhado). */
.pnl-action-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background-color: transparent;
}

.pnl-plan-card {
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.pnl-plan-card:hover {
    transform: translateY(-2px);
}

.pnl-plan-card--current {
    border-color: rgba(226, 160, 63, 0.55) !important;
    box-shadow: 0 12px 28px -18px rgba(226, 160, 63, 0.65);
}

.pnl-plan-card__ribbon {
    position: absolute;
    top: 12px;
    right: -34px;
    padding: 4px 34px;
    transform: rotate(35deg);
    background: #e2a03f;
    color: #0b0f19;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.pnl-billing-toggle {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--pnl-card-border);
    border-radius: 14px;
    background: var(--pnl-card-bg-nested);
    box-shadow: 0 8px 20px -16px rgba(15, 23, 42, 0.8);
}

.pnl-billing-toggle__option {
    display: inline-flex;
    min-width: 118px;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    border: 0;
    border-radius: 10px;
    padding: 8px 18px;
    background: transparent;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.pnl-billing-toggle__option small {
    font-size: 10px;
    font-weight: 600;
    opacity: .75;
}

.pnl-billing-toggle__option:hover {
    color: #e2a03f;
}

.pnl-billing-toggle__option.is-active {
    background: #e2a03f;
    color: #0b0f19;
    box-shadow: 0 6px 14px -8px rgba(226, 160, 63, 0.9);
}

body:not(.dark) .pnl-billing-toggle {
    background: #f1f5f9;
    border-color: rgba(30, 48, 78, 0.12);
}

body:not(.dark) .pnl-billing-toggle__option {
    color: #64748b;
}

body:not(.dark) .pnl-billing-toggle__option.is-active {
    color: #0b0f19;
}

/* Ações legadas de tabelas de detalhe ainda usam si-icon-btn. Mantém todos os ícones de ação
 * no mesmo âmbar da Produção, inclusive quando o template não declara text-warning. */
.si-icon-btn {
    color: #e2a03f !important;
}

.si-icon-btn--danger:hover {
    color: #ef4444 !important;
}

body:not(.dark) .si-icon-btn {
    color: #b7791f !important;
}

/* Item de atalho (ex: "Atalhos para Relatórios"): fundo neutro, acende borda âmbar no hover —
seguindo a referência do cliente (bg-gray-900/80 hover:bg-gray-800 border border-gray-800). */
.pnl-shortcut-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-radius: 12px;
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--pnl-card-border);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pnl-shortcut-item:hover {
    background-color: rgba(0, 0, 0, 0.32);
    border-color: rgba(226, 160, 63, 0.35);
}

/* Estado ativo do menu vertical de Configurações — mesma cor de acento das outras seleções do
sistema premium, mas como classe própria em vez de `!bg-warning/10` porque essa combinação
específica não existe no CSS estático do tema (ver skill ui-vristo-css-limits). */
.pnl-shortcut-item--active {
    background-color: rgba(226, 160, 63, 0.12) !important;
    border-color: rgba(226, 160, 63, 0.4) !important;
}

/* bg-dark\/20 não existe no CSS estático do tema (só bg-dark sem fração — ver skill
ui-vristo-css-limits) — usado no badge de status de pagamento da Dashboard de Produção
(class="badge bg-{cor}/20 text-{cor}", pedido explícito do cliente). */
.bg-dark\/20 {
    background-color: rgba(59, 63, 92, 0.2);
}

/* Estados preenchidos usados nos valores da tabela de vendas. O tema Vristo é estático e não
possui todas as combinações bg-{cor}/20 que são geradas dinamicamente pela view. */
.bg-success\/20 {
    background-color: rgba(0, 171, 85, 0.2) !important;
}

.bg-warning\/20 {
    background-color: rgba(226, 160, 63, 0.2) !important;
}

.bg-danger\/20 {
    background-color: rgba(231, 81, 90, 0.2) !important;
}

.bg-info\/20 {
    background-color: rgba(33, 150, 243, 0.2) !important;
}

/* Mantém as linhas de todas as listagens DataTable com a mesma densidade compacta da fila de
produção. O seletor do DataTable vem depois do utilitário table-compact, por isso o !important é
necessário. */
table.dataTable-table tbody tr td,
table.dataTable-table thead tr th {
    padding: .5rem .75rem !important;
}

/* Texto comum das listagens segue o padrão claro da Produção; links e badges mantêm suas
cores próprias declaradas nos elementos internos. */
table.table-compact tbody tr td,
table.table-compact thead tr th {
    color: #ffffff;
}

/* Os cards de ordens e transações das faturas compartilham uma grade; fixa a mesma altura
 * vertical nas linhas mesmo quando apenas a tabela de transações possui um botão de ação. */
.invoice-payments-grid table.table-compact tbody tr {
    height: 32px !important;
}

.invoice-payments-grid table.table-compact tbody tr td {
    height: 32px !important;
    padding: 4px 12px !important;
    vertical-align: middle !important;
}

/* Os cards de pagamentos usam o texto neutro padrão mesmo com a regra geral de tabelas compactas. */
.invoice-payments-grid table.table-compact tbody tr td.text-white-dark {
    color: #888ea8 !important;
}

.invoice-payments-grid table.table-compact tbody tr td .si-icon-btn {
    height: 24px !important;
    width: 24px !important;
}

/* Aumenta os ícones dos cards sem alterar a altura fixa das linhas. */
.invoice-payments-grid table.table-compact tbody tr td .pnl-action-btn svg {
    height: 16px;
    width: 16px;
}

/* Evita que o flex-1 crie uma faixa vazia abaixo da última linha dos cards. */
.invoice-payments-grid > .panel > .table-responsive {
    flex: 0 0 auto;
}

/* Os cards iniciais da fatura mantêm a largura atual, mas reduzem o respiro vertical. */
.invoice-header-summary-card {
    padding-bottom: 0.5rem !important;
    padding-top: 1rem !important;
}

.invoice-footer-grid {
    align-items: start;
}

.invoice-financial-card {
    align-self: start;
}

.invoice-observations-content {
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}

.invoice-observations-card {
    height: 264px;
}

.invoice-production-card {
    padding: 1rem !important;
}

.invoice-production-stage {
    border: 1px solid var(--pnl-card-border) !important;
    min-height: 124px;
}

.invoice-production-stage__label {
    color: var(--pnl-text-muted);
    font-weight: 700;
}

.invoice-production-stage__planned {
    border-color: var(--pnl-card-border);
    color: var(--pnl-text-muted);
}

.invoice-production-stage__planned span:last-child {
    color: var(--pnl-text-muted);
    font-style: italic;
}

.invoice-production-stage--success { border-color: rgba(16, 185, 129, 0.7) !important; }
.invoice-production-stage--success .invoice-production-stage__label { color: var(--pnl-green-primary); }
.invoice-production-stage--info { border-color: rgba(14, 165, 233, 0.7) !important; }
.invoice-production-stage--info .invoice-production-stage__label { color: var(--pnl-blue-primary); }
.invoice-production-stage--warning { border-color: rgba(245, 158, 11, 0.7) !important; }
.invoice-production-stage--warning .invoice-production-stage__label { color: var(--pnl-amber-primary); }
.invoice-production-stage--muted {
    border-color: #000 !important;
    opacity: 1;
}

.invoice-add-item-button {
    align-items: center;
    box-shadow: none !important;
    color: var(--pnl-card-bg) !important;
    display: inline-flex;
    font-size: 12px;
    font-weight: 600;
    height: 34px !important;
    line-height: 1 !important;
    min-height: 34px;
    padding: 0 0.75rem;
    border-radius: 8px;
}

.invoice-add-item-button svg {
    color: inherit !important;
}

.invoice-header-control {
    align-items: center;
    background-color: var(--pnl-surface-raised) !important;
    border: 1px solid var(--pnl-border) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    color: var(--pnl-text-primary) !important;
    display: inline-flex;
    font-size: 12px !important;
    font-weight: 600;
    gap: 0.45rem;
    height: 34px;
    justify-content: center;
    padding: 0 0.75rem !important;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.invoice-header-control:hover,
.invoice-header-control:focus-visible {
    background-color: var(--pnl-control-bg) !important;
    border-color: var(--pnl-amber-primary) !important;
    color: var(--pnl-text-primary) !important;
}

.invoice-production-schedule-control {
    border-color: var(--pnl-amber-primary) !important;
    color: var(--pnl-amber-primary) !important;
}

.invoice-production-schedule-control:hover,
.invoice-production-schedule-control:focus-visible {
    background-color: transparent !important;
    border-color: var(--pnl-amber-primary) !important;
    color: var(--pnl-amber-primary) !important;
}

.invoice-production-status-control {
    background-color: transparent !important;
}

.invoice-production-status-control:hover,
.invoice-production-status-control:focus-visible {
    background-color: transparent !important;
}

.invoice-production-status-control--warning,
.invoice-production-status-control--primary {
    border-color: var(--pnl-amber-primary) !important;
    color: var(--pnl-amber-primary) !important;
}

.invoice-production-status-control--info {
    border-color: var(--pnl-blue-primary) !important;
    color: var(--pnl-blue-primary) !important;
}

.invoice-production-status-control--secondary {
    border-color: #a78bfa !important;
    color: #a78bfa !important;
}

.invoice-production-status-control--dark {
    border-color: #94a3b8 !important;
    color: #94a3b8 !important;
}

/* Melhora a leitura das linhas de itens sem aumentar sua altura: o padding existente permanece
 * e a altura da linha é preservada pela mesma proporção de line-height. */
.si-items-table tbody td,
.si-items-table tbody td .text-xs {
    font-size: 13px;
    line-height: 1.25;
}

/* No tema claro, o texto das tabelas precisa acompanhar o fundo claro. A regra fica no
 * escopo do painel e mantém links, badges e ações com suas cores próprias nos elementos filhos. */
body:not(.dark) .main-container > :not(.site) table.table-compact tbody tr td,
body:not(.dark) .main-container > :not(.site) table.table-compact thead tr th {
    color: #1f2937;
}

/* A mesma correção vale para tabelas de detalhes e relatórios que não usam table-compact. */
body:not(.dark) .main-container > :not(.site) table tbody tr td,
body:not(.dark) .main-container > :not(.site) table thead tr th,
body:not(.dark) .main-container > :not(.site) table tfoot tr th {
    color: #1f2937;
}

/* Alguns parciais antigos declaram text-white diretamente dentro da célula. Nas listagens
 * compactas, o tema white precisa trocar essa cor sem afetar relatórios de superfície escura. */
body:not(.dark) .main-container table.table-compact .text-white {
    color: #1f2937 !important;
}

/* Datas e nomes renderizados dentro das células também precisam trocar o branco do padrão dark.
 * Essas classes aparecem nos templates de DataTables e no dashboard de produção. */
body:not(.dark) .main-container table .dark\:text-white-light,
body:not(.dark) .main-container table .dark\:text-white,
body:not(.dark) .main-container table .text-white-light {
    color: #1f2937 !important;
}

/* Entrega da tabela de Vendas: data principal escura e prazo em âmbar com contraste suficiente
 * no fundo branco. No tema dark, as cores existentes continuam valendo. */
body:not(.dark) .main-container .sales-dashboard-table .dark\:text-white-light {
    color: #172033 !important;
}

body:not(.dark) .main-container .sales-dashboard-table .text-white {
    color: #172033 !important;
}

body:not(.dark) .main-container .sales-dashboard-table .text-warning {
    color: #b7791f !important;
}

/* Camada de acabamento do tema white: superfícies claras, separação suave e controles legíveis.
 * O tema escuro mantém os valores definidos acima e não recebe estas sobreposições. */
body:not(.dark) header > .shadow-sm {
    box-shadow: none !important;
}

body:not(.dark).horizontal .horizontal-menu {
    box-shadow: none !important;
}

/* Menu horizontal principal: tamanho consolidado conforme o padrão visual do painel. */
.horizontal-menu .nav-link {
    font-size: 14px;
}

.horizontal-menu ul.sub-menu a {
    font-size: 13px;
}

body:not(.dark) .main-container .pnl-card:hover {
    box-shadow: 0 12px 24px -14px rgba(15, 23, 42, 0.28);
}

body:not(.dark) .main-container .pnl-table-header {
    background-color: rgba(241, 245, 249, 0.9);
    border-bottom-color: rgba(30, 48, 78, 0.1);
}

body:not(.dark) .main-container .pnl-shortcut-item {
    background-color: rgba(241, 245, 249, 0.72);
    border-color: rgba(30, 48, 78, 0.1);
}

body:not(.dark) .main-container .pnl-shortcut-item:hover {
    background-color: rgba(226, 160, 63, 0.08);
}

body:not(.dark) .pnl-topbar-btn {
    background-color: #f8fafc !important;
    border: 1px solid rgba(30, 48, 78, 0.1);
    color: #475569;
}

body:not(.dark) .pnl-topbar-btn:hover {
    background-color: rgba(226, 160, 63, 0.1) !important;
    border-color: rgba(226, 160, 63, 0.35);
    color: #b7791f;
}

body:not(.dark) .pnl-search-input {
    background-color: #f8fafc !important;
    border-color: rgba(30, 48, 78, 0.14) !important;
    color: #172033 !important;
}

body:not(.dark) .pnl-search-input:focus {
    border-color: #e2a03f !important;
}

body:not(.dark) .pnl-theme-track {
    background-color: #f1f5f9;
    border-color: rgba(30, 48, 78, 0.12);
}

body:not(.dark) .pnl-theme-btn {
    color: #64748b;
}

body:not(.dark) .pnl-drawer {
    box-shadow: -10px 0 30px rgba(15, 23, 42, 0.14);
}

/* Bug real do tema (não é gap-fill): .badge-outline-dark usa border/texto rgb(59 63 92) — quase a
mesma cor do fundo escuro do painel (#0e1726/#0b0f19), ficando praticamente ilegível no modo
escuro até passar o mouse. Afeta vários status "neutros" do sistema (Finalizada, Pago, Retirado,
Concluído etc. — qualquer status com 'color' => 'dark' nos arquivos de lang). Sobrepõe só o modo
escuro com um tom cinza-claro legível, mantendo a intenção "neutro" (sem virar colorido). */
.dark .badge-outline-dark {
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: rgba(255, 255, 255, 0.75) !important;
}

/* min-w-0 não existe no CSS estático do tema — necessário pra .truncate funcionar dentro de um
flex item (sem isso o item não encolhe abaixo do tamanho do conteúdo e o texto quebra a linha em
vez de truncar), usado no nome do cliente dos tickets "Em Espera" da Dashboard de Produção. */
.min-w-0 {
    min-width: 0px;
}

/* Faixa de cabeçalho das tabelas por etapa da Dashboard de Produção: quebra o padding do .panel
(1.25rem) pra estender de ponta a ponta, com fundo inset escuro — seguindo a referência do cliente
(bg-gray-900/80 px-4 py-3 border-b). */
.pnl-table-header {
    margin: -1.25rem -1.25rem 1.25rem;
    padding: 8px 16px;
    background-color: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--pnl-card-border);
    border-radius: 16px 16px 0 0;
}


/* Mesma correção de overflow acima (era pro NiceSelect, removido do projeto), agora pro Tom
Select: libera o overflow-hidden dos modais só enquanto o dropdown está aberto, senão a lista fica
cortada pela altura "natural" do painel. */
.panel:has(.ts-wrapper.dropdown-active) {
    overflow: visible;
}

/* Tom Select — tema escuro/claro alinhado aos tokens de .form-input já usados no projeto
(rgb(18 30 50)/rgb(23 38 60)/rgb(136 142 168), foco em âmbar #e2a03f). Select padrão de todo o
sistema (substituiu o NiceSelect, que tinha bugs reais de hover/clique/overflow). */
.ts-wrapper.single {
    --ts-pr-min: 1rem;
}

/* Filtros de listas longas inicializados pelo TomSelect devem ocupar a largura do campo original,
 * sem herdar a borda dupla de .form-select. */
select.tom-select-filter + .ts-wrapper {
    width: 100%;
    min-width: 0;
}

.ts-wrapper.single .ts-control {
    background-color: #fff;
    border-color: #e0e6ed;
    border-radius: 6px;
    padding: 8px 12px;
    min-height: 40px;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: rgb(14 23 38);
}

.dark .ts-wrapper.single .ts-control {
    background-color: #121e32;
    border-color: #17263c;
    color: #888ea8;
}

.ts-wrapper.single.focus .ts-control {
    border-color: #e2a03f !important;
    box-shadow: none !important;
}

.ts-control input {
    color: inherit !important;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
}

.ts-dropdown [data-selectable] {
    font-size: .875rem;
    line-height: 1.25rem;
}

.dark .ts-control input::placeholder {
    color: #506690;
}

.ts-dropdown {
    border-radius: 8px;
    overflow: hidden;
    z-index: 50;
}

.dark .ts-dropdown {
    background-color: #121e32;
    border-color: #17263c;
    color: #888ea8;
}

.dark .ts-dropdown .ts-dropdown-content {
    background-color: #121e32;
}

.dark .ts-dropdown [data-selectable],
.dark .ts-dropdown .optgroup-header {
    color: #888ea8;
}

.ts-dropdown .active {
    background-color: #e2a03f !important;
    color: #0b0f19 !important;
}

.dark .ts-dropdown .ts-input,
.dark .ts-dropdown input {
    background-color: #0e1726;
    color: #e0e6ec;
    border-color: #17263c;
}

/* Menu responsivo: abaixo de lg (1024px) o .horizontal-menu sai da barra e vira painel lateral,
aberto pelo botão hambúrguer do cabeçalho ($store.app.sidebar → body.toggle-sidebar). O header é
sticky com z-index próprio, então o painel só fica acima do overlay se o header subir junto; a
sombra larga do painel faz o escurecimento (o overlay do layout só captura o clique). */
/* .pnl-topbar-btn força display:flex, então o lg:hidden do tema não esconderia o hambúrguer. */
.pnl-mobile-menu__head {
    display: none;
}

@media (min-width: 1024px) {
    .pnl-topbar-btn.pnl-menu-toggle {
        display: none !important;
    }
}

@media (max-width: 1023.98px) {
    body.toggle-sidebar {
        overflow: hidden;
    }

    body.toggle-sidebar header {
        z-index: 55 !important;
    }

    body.toggle-sidebar .horizontal-menu.pnl-mobile-menu {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 55;
        width: min(300px, 85vw);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0 12px 24px;
        background-color: #fff;
        border-right: 1px solid rgba(30, 48, 78, 0.1);
        box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.55) !important;
    }

    body.dark.toggle-sidebar .horizontal-menu.pnl-mobile-menu {
        background-color: #0e1726;
        border-right-color: rgba(255, 255, 255, 0.08);
    }

    .horizontal-menu.pnl-mobile-menu > li + li {
        margin: 0 !important;
    }

    .pnl-mobile-menu .pnl-mobile-menu__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        z-index: 1;
        margin: 0 -12px 8px !important;
        padding: 12px;
        background-color: inherit;
        border-bottom: 1px solid rgba(30, 48, 78, 0.1);
    }

    .dark .pnl-mobile-menu .pnl-mobile-menu__head {
        border-bottom-color: rgba(255, 255, 255, 0.08);
    }

    .pnl-mobile-menu .nav-link {
        justify-content: space-between;
        min-height: 44px;
        font-size: 14px;
    }

    .pnl-mobile-menu .nav-link .right_arrow svg {
        transition: transform 0.2s ease;
    }

    .pnl-mobile-menu > li.is-open > .nav-link .right_arrow svg {
        transform: rotate(-90deg);
    }

    /* Sem hover em tela de toque: o submenu entra no fluxo e só abre com .is-open. */
    .horizontal-menu.pnl-mobile-menu > li.nav-item > ul.sub-menu,
    .horizontal-menu.pnl-mobile-menu > li.nav-item:hover > ul.sub-menu {
        position: static;
        display: none;
        min-width: 0;
        margin: 2px 0 6px;
        padding: 4px 0;
        box-shadow: none !important;
        border: 0 !important;
        background-color: transparent !important;
    }

    .horizontal-menu.pnl-mobile-menu > li.nav-item.is-open > ul.sub-menu {
        display: block;
    }

    .pnl-mobile-menu ul.sub-menu a {
        min-height: 40px;
        padding-left: 2.25rem !important;
        font-size: 13px;
        border-radius: 8px;
    }
}

/* Cabeçalho em telas pequenas: menos respiro para caber hambúrguer, logo, busca e ações. */
@media (max-width: 639.98px) {
    .pnl-topbar {
        gap: 8px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .pnl-topbar > div:last-child {
        gap: 6px;
    }

    .pnl-topbar > div:last-child > * {
        margin: 0 !important;
    }

    /* Dropdowns de 260–350px ancorados no botão estouravam a tela à esquerda: no celular eles
    ocupam a largura do cabeçalho (.pnl-topbar é relative). */
    .pnl-topbar .dropdown,
    .pnl-topbar .pnl-topbar-search {
        position: static !important;
    }

    .pnl-topbar .dropdown > ul {
        top: calc(100% + 4px) !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
    }
}

/* ===========================================================================
   Páginas index (cadastros com listagem) — skill cde-frontend-pagina-index.
   Extraído de Caixas e Bancos (financial/account). Cabeçalho, seção e tabela
   usam as mesmas medidas de Contas a Receber; a barra lateral é exclusiva das
   páginas index.
   =========================================================================== */
.pnl-index-page {
    color: var(--pnl-text-muted);
    font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif;
    margin: -0.75rem;
    min-height: 0;
}

.pnl-index-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.75rem;
}

@media (min-width: 768px) {
    .pnl-index-grid {
        display: block;
        min-height: 0;
    }

    .pnl-index-grid > .pnl-index-rail {
        height: 0;
        width: 72px;
    }

    .pnl-index-grid > .pnl-index-content {
        margin-left: 72px;
    }

    .pnl-index-grid > .pnl-index-rail--expanded {
        width: 256px;
    }

    .pnl-index-grid > .pnl-index-rail--expanded + .pnl-index-content {
        margin-left: 256px;
    }
}

/* Barra lateral fixa abaixo do cabeçalho + menu horizontal. */
.pnl-index-sidebar {
    background: var(--pnl-card-bg);
    border: 1px solid var(--pnl-card-border);
    bottom: 0;
    display: flex;
    flex-direction: column;
    left: 0;
    overflow: hidden;
    position: fixed;
    top: calc(3.5rem + 3.75rem);
    transition: width 180ms ease, background-color 180ms ease;
    z-index: 30;
}

.pnl-index-sidebar--collapsed {
    align-items: center;
    width: 72px;
}

.pnl-index-sidebar--expanded {
    width: 256px;
}

.pnl-index-sidebar__top-action {
    left: 0;
    position: fixed;
    top: calc(3.5rem + 0.75rem);
    transition: width 180ms ease, background-color 150ms ease;
    width: 72px;
    z-index: 31;
}

.pnl-index-sidebar__top-action > * {
    align-items: center;
    display: inline-flex;
    height: 36px;
    justify-content: center;
    margin: 0;
    padding: 0;
    width: 100%;
}

.pnl-index-rail--collapsed .pnl-index-sidebar__top-action > * {
    font-size: 0;
    gap: 0;
}

.pnl-index-sidebar__top-action svg {
    height: 18px;
    width: 18px;
}

.pnl-index-rail--expanded .pnl-index-sidebar__top-action {
    width: 256px;
}

.pnl-index-sidebar__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 1rem;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem;
    width: 100%;
}

.pnl-index-sidebar__section {
    border-top: 1px solid var(--pnl-border);
    padding-top: 1rem;
}

.pnl-index-sidebar__section:first-child {
    border-top: 0;
    padding-top: 0;
}

.pnl-index-sidebar__label {
    color: var(--pnl-text-primary);
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.pnl-index-sidebar__description {
    color: var(--pnl-text-secondary);
    font-size: 0.6875rem;
    margin-top: 0.35rem;
}

.pnl-index-sidebar__collapse {
    align-items: center;
    background: var(--pnl-control-bg);
    border: 1px solid var(--pnl-border);
    color: var(--pnl-text-secondary);
    display: inline-flex;
    flex-shrink: 0;
    height: 28px;
    justify-content: center;
    margin: auto 0.75rem 0.75rem;
    min-height: 28px;
    padding: 0;
    transition: border-color 150ms ease, color 150ms ease;
    width: 36px;
}

.pnl-index-sidebar__collapse svg {
    height: 14px;
    width: 14px;
}

.pnl-index-sidebar--collapsed .pnl-index-sidebar__collapse {
    margin-left: auto;
    margin-right: auto;
}

.pnl-index-sidebar--expanded .pnl-index-sidebar__collapse {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
    width: calc(100% - 1.5rem);
}

.pnl-index-sidebar__collapse:hover,
.pnl-index-sidebar__collapse:focus-visible {
    border-color: var(--pnl-amber-primary);
    color: var(--pnl-amber-primary);
}

/* Cabeçalho: mesmas medidas de Contas a Receber. */
.pnl-index-header {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.pnl-index-header-description,
.pnl-index-header-title {
    flex: 1 1 auto;
    min-width: 0;
}

.pnl-index-header-title {
    color: var(--pnl-text-primary);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 2rem;
    margin: 0;
}

.pnl-index-header-description {
    color: var(--pnl-text-muted);
    font-size: 13px;
    margin: 0;
}

.pnl-index-header-breadcrumbs {
    display: flex;
    flex-shrink: 0;
    font-size: 13px;
    gap: 0.5rem;
    padding-top: 0.125rem;
}

.pnl-index-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

@media (min-width: 640px) {
    .pnl-index-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 0.2rem;
    }

    .pnl-index-header-description { grid-column: 1; grid-row: 1; }
    .pnl-index-header-breadcrumbs { grid-column: 2; grid-row: 1; justify-self: end; }
    .pnl-index-header-title { grid-column: 1; grid-row: 2; }
    .pnl-index-header-actions { grid-column: 2; grid-row: 2; justify-self: end; }
}

@media (max-width: 639px) {
    .pnl-index-header { align-items: stretch; flex-direction: column; }
    .pnl-index-header-breadcrumbs { order: 3; }
    .pnl-index-header-title { order: 2; }
    .pnl-index-header-actions { order: 4; width: 100%; }
    .pnl-index-header-actions > * { flex: 1; justify-content: center; }
}

/* Botão Filtros do cabeçalho (gatilho do x-user.filter-drawer). */
.pnl-index-filter-action {
    align-items: center;
    background-color: var(--pnl-surface-raised);
    border: 1px solid var(--pnl-border);
    border-radius: 8px;
    color: var(--pnl-amber-primary);
    display: inline-flex;
    font-size: 12px;
    font-weight: 500;
    gap: 0.5rem;
    height: 34px;
    justify-content: center;
    padding: 0 0.75rem;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.pnl-index-filter-action:hover,
.pnl-index-filter-action:focus-visible {
    background-color: var(--pnl-surface-raised);
    border-color: var(--pnl-amber-primary);
}

/* Ação de exportação alinhada ao botão compacto de filtros do cabeçalho. */
.pnl-index-export-action {
    align-items: center;
    background-color: #151d32;
    border: 1px solid #2b3a58;
    box-shadow: none;
    border-radius: 8px;
    color: #f5f7fb;
    font-size: 12px;
    font-weight: 600;
    height: 34px;
    justify-content: center;
    padding: 0 0.75rem;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.pnl-index-export-action svg {
    color: var(--pnl-amber-primary);
    flex-shrink: 0;
}

.pnl-index-export-action:hover,
.pnl-index-export-action:focus-visible {
    background-color: #1b2740;
    border-color: var(--pnl-amber-primary);
    box-shadow: none;
    color: #ffffff;
}

/* Gaveta de filtros dentro das páginas index. */
.pnl-index-page .pnl-drawer__body {
    padding-top: 2rem;
}

.pnl-index-page .receivables-columns-trigger {
    margin-top: 1rem;
}

.pnl-index-summary__metrics {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pnl-index-summary__metric {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.pnl-index-summary__metric strong {
    color: var(--pnl-amber-primary);
    font-size: 1.25rem;
    line-height: 1;
}

.pnl-index-summary__metric--balance strong {
    color: var(--pnl-blue-primary);
    font-size: 0.875rem;
}

/* Seção da tabela e faixa de título (mesmo ajuste de Contas a Receber). */
.pnl-index-section {
    overflow: hidden;
    padding: 1.25rem;
}

.pnl-index-section > .pnl-table-header {
    margin-bottom: 0.5rem;
    min-height: 36px;
    padding: 5px 12px;
}

.pnl-index-section > .pnl-table-header h3 {
    line-height: 1.15;
}

/* Tabela (DataTable) com a densidade de Contas a Receber. */
.pnl-index-table-wrap {
    overflow-x: auto;
}

.pnl-index-table-wrap .dataTable-top {
    margin-bottom: 0;
}

.pnl-index-table {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 680px;
    width: 100% !important;
}

.pnl-index-table thead th {
    background: var(--pnl-control-bg);
    border-bottom: 1px solid var(--pnl-border);
    color: var(--pnl-text-muted) !important;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.1;
    padding: 0.35rem 0.65rem !important;
    text-transform: uppercase;
}

.pnl-index-table tbody td {
    border-bottom: 1px solid var(--pnl-border);
    color: var(--pnl-text-muted) !important;
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem !important;
}

.pnl-index-table tbody tr:hover td {
    background: var(--pnl-hover-surface);
}

.pnl-index-page .dataTable-top,
.pnl-index-page .dataTable-bottom {
    align-items: center;
    color: var(--pnl-text-muted);
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
}

.pnl-index-page .dataTable-bottom {
    border-top: 1px solid var(--pnl-border);
    margin-top: 0.25rem;
    padding-top: 0.5rem;
}

/* Listagens index mantêm o rodapé próximo à última linha, sem o espaço padrão
 * extra do DataTable que deixa tabelas pequenas visualmente altas. */
.pnl-index-page .dataTable-container {
    margin-bottom: 0;
}

.pnl-index-page .dataTable-selector,
.pnl-index-page .dataTable-input {
    background: var(--pnl-control-bg);
    border: 1px solid var(--pnl-border);
    border-radius: 7px;
    color: var(--pnl-text-primary);
    min-height: 32px;
}

.pnl-index-page .dataTable-input {
    padding: 0.35rem 0.55rem;
}

.pnl-index-page .dataTable-pagination a,
.pnl-index-page .dataTable-pagination button {
    color: var(--pnl-text-muted);
}

.pnl-index-page .dataTable-pagination .active a,
.pnl-index-page .dataTable-pagination .active button,
.pnl-index-page .dataTable-pagination a:hover,
.pnl-index-page .dataTable-pagination button:hover {
    background: var(--pnl-amber-primary);
    color: var(--pnl-canvas);
}

/* No celular a barra lateral sai do modo fixo e vira um bloco acima do conteúdo. */
@media (max-width: 767px) {
    .pnl-index-sidebar__top-action {
        padding: 0.75rem 0.75rem 0;
        position: static;
        width: auto !important;
    }

    .pnl-index-rail--collapsed .pnl-index-sidebar__top-action > * {
        font-size: inherit;
        gap: 0.5rem;
    }

    .pnl-index-sidebar {
        align-items: stretch;
        border-radius: 16px;
        margin: 0.75rem 0.75rem 0;
        position: static;
        width: auto !important;
    }
}

/* Página index sem ação principal nem atalhos (ex.: Auditoria): sem barra lateral. */
@media (min-width: 768px) {
    .pnl-index-grid--no-rail > .pnl-index-content {
        margin-left: 0;
    }
}

/* Barra lateral com várias ações principais (ex. Transações: Entrada, Saída, Transferência).
 * Os botões ficam empilhados no topo; recolhida mostra só os ícones, e a barra desce para não
 * ficar por baixo deles. Uso: <div class="pnl-index-action-stack"> no slot action. */
.pnl-index-sidebar__top-action > .pnl-index-action-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: auto;
}

.pnl-index-action-stack > * {
    align-items: center;
    display: inline-flex;
    height: 36px;
    justify-content: center;
    margin: 0;
    padding: 0;
    width: 100%;
}

.pnl-index-action-stack > .pnl-index-action-button {
    box-shadow: none !important;
    color: var(--pnl-card-bg) !important;
}

.pnl-index-rail--collapsed .pnl-index-action-stack > * {
    font-size: 0;
    gap: 0;
}

@media (min-width: 768px) {
    .pnl-index-rail:has(.pnl-index-action-stack) .pnl-index-sidebar {
        /* topo das ações + 3 botões de 36px + 2 espaços de 6px + respiro */
        top: calc(3.5rem + 0.75rem + 120px + 0.75rem);
    }

}

@media (max-width: 767px) {
    .pnl-index-rail--collapsed .pnl-index-action-stack > * {
        font-size: inherit;
        gap: 0.5rem;
    }
}

/* Campos de filtro: Tom Select dentro da gaveta com o mesmo visual de .form-input/.form-select
 * da gaveta (38px, raio 12px, fundo de controle, texto 12px, foco âmbar). */
.receivables-drawer-field .ts-wrapper {
    min-width: 0;
    width: 100%;
}

.receivables-drawer-field .ts-wrapper.single .ts-control {
    background-color: var(--pnl-control-bg) !important;
    border: 1px solid var(--pnl-border) !important;
    border-radius: 12px;
    box-shadow: none !important;
    color: var(--pnl-text-primary) !important;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    min-height: 38px;
    padding: 8px 36px 8px 12px;
    width: 100%;
}

.receivables-drawer-field .ts-wrapper.single.focus .ts-control,
.receivables-drawer-field .ts-wrapper.single.dropdown-active .ts-control {
    border-color: var(--pnl-amber-primary) !important;
}

/* O CSS do Tom Select não desenha a seta no modo single: seta à direita, vira ao abrir. */
.receivables-drawer-field .ts-wrapper.single .ts-control::after {
    border-bottom: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    content: '';
    height: 7px;
    opacity: .75;
    pointer-events: none;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-65%) rotate(45deg);
    transition: transform .15s ease;
    width: 7px;
}

.receivables-drawer-field .ts-wrapper.single.dropdown-active .ts-control::after {
    transform: translateY(-25%) rotate(225deg);
}

.receivables-drawer-field .ts-control input {
    font-size: 12px !important;
}

.receivables-drawer-field .ts-control input::placeholder {
    color: var(--pnl-text-muted);
}

.receivables-drawer-field .ts-dropdown {
    background-color: var(--pnl-control-bg);
    border: 1px solid var(--pnl-border);
    border-radius: 12px;
    color: var(--pnl-text-primary);
    margin-top: 6px;
}

.receivables-drawer-field .ts-dropdown [data-selectable] {
    font-size: 12px;
    padding: 8px 12px;
}

.receivables-drawer-field .ts-dropdown .active {
    background-color: rgba(245, 169, 0, 0.12);
    color: var(--pnl-amber-primary);
}

.receivables-drawer-field .ts-dropdown .ts-dropdown-content {
    max-height: 260px;
}

/* Ícone do calendário legível no fundo escuro dos campos de data. */
.receivables-drawer-field input[type="date"] {
    color-scheme: dark;
}

/* Filtros fora da gaveta (barra de painéis, NF-e, saldo de estoque...): mesmo visual dos campos
 * da gaveta. Use .pnl-filter-control no input/select e .pnl-filter-label no rótulo. */
.pnl-filter-control.form-input,
.pnl-filter-control.form-select {
    background-color: var(--pnl-control-bg) !important;
    border-color: var(--pnl-border) !important;
    border-radius: 12px;
    color: var(--pnl-text-primary) !important;
    font-size: 12px;
    min-height: 38px;
}

.pnl-filter-control.form-input:focus,
.pnl-filter-control.form-select:focus {
    border-color: var(--pnl-amber-primary) !important;
}

input[type="date"].pnl-filter-control {
    color-scheme: dark;
}

.pnl-filter-label {
    color: var(--pnl-text-primary);
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
}

/* Toasts de retorno: várias mensagens de validação chegam separadas por quebra de linha. */
.swal2-popup.swal2-toast .swal2-title {
    white-space: pre-line;
}

/* Atalhos da barra lateral (slot nav de x-user.index-sidebar + x-user.index-sidebar-item).
 * Ícone + nome; recolhida, só o ícone centralizado (nome no title). Ex.: Compras. */
.pnl-index-sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0.875rem 0.875rem 0;
    width: 100%;
}

.pnl-index-nav-btn {
    align-items: center;
    border-radius: 12px;
    color: var(--pnl-text-secondary);
    display: flex;
    font-size: 12px;
    font-weight: 500;
    height: 40px;
    justify-content: flex-start;
    padding: 0 0.75rem;
    transition: background-color 150ms ease, color 150ms ease;
    width: 100%;
}

.pnl-index-nav-btn:hover,
.pnl-index-nav-btn:focus-visible {
    background-color: var(--pnl-surface-raised);
    color: var(--pnl-text-primary);
}

.pnl-index-nav-btn__icon {
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    transition: transform 150ms ease;
    width: 24px;
}

.pnl-index-nav-btn:hover .pnl-index-nav-btn__icon {
    transform: scale(1.1);
}

.pnl-index-nav-btn__label {
    margin-left: 0.5rem;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pnl-index-nav-divider {
    border-color: rgba(37, 49, 73, 0.6);
    margin: 0.25rem 0;
}

.pnl-index-sidebar--collapsed .pnl-index-sidebar__nav {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.pnl-index-sidebar--collapsed .pnl-index-nav-btn {
    justify-content: center;
    padding: 0;
}

.pnl-index-sidebar--collapsed .pnl-index-nav-btn__label {
    display: none;
}

/* Botões acima da barra lateral (ação principal ou pilha de ações): texto e ícone na cor do
 * fundo do card, sem sombra, em todas as telas index. Regra do Renan (2026-10-17). */
.pnl-index-sidebar__top-action > .btn,
.pnl-index-sidebar__top-action > .pnl-index-action-stack > .btn {
    box-shadow: none !important;
    color: var(--pnl-card-bg) !important;
}


/* Modais e avisos (x-user.notifications) no padrão "SISTEMA DE MODAL" do Renan: cartão escuro
 * arredondado, cabeçalho com ícone, corpo e rodapé com Cancelar + ação. tone amber ou danger. */
.swal2-container.cde-modal-backdrop {
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    background: rgba(0, 0, 0, 0.7) !important;
}

/* Status de produção na fatura: cartão compacto inspirado na referência operacional. */
.invoice-production-modal {
    background: rgba(3, 8, 20, 0.78) !important;
    color: #e8edf8;
    font-family: var(--font-sans);
}

.invoice-production-modal__position {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 24px 16px;
}

.invoice-production-modal__card {
    background: #0e1729;
    border: 1px solid #1c5275;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
    padding: 24px;
    width: min(100%, 512px);
}

.invoice-production-modal__header,
.invoice-production-modal__heading,
.invoice-production-modal__step summary,
.invoice-production-modal__check-item,
.invoice-production-modal__pickup {
    align-items: center;
    display: flex;
}

.invoice-production-modal__header {
    border-bottom: 1px solid #263449;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 18px;
}

.invoice-production-modal__heading { align-items: flex-start; gap: 10px; min-width: 0; }
.invoice-production-modal__heading > svg { color: #58a6ff; flex: none; margin-top: 2px; }
.invoice-production-modal__heading h2 { color: #f7f9fd; font-size: 16px; font-weight: 800; line-height: 1.4; }
.invoice-production-modal__heading p { color: #aebbd0; font-size: 12px; line-height: 1.5; }
.invoice-production-modal__heading p span { color: #88bffc; }
.invoice-production-modal__close { background: #1b263a; border: 1px solid #31415a; border-radius: 8px; color: #c3d0e0; flex: none; font-size: 23px; height: 32px; line-height: 1; width: 32px; }

.invoice-production-modal__summary {
    background: #101a2e;
    border: 1px solid #263651;
    border-radius: 12px;
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 20px;
    padding: 14px;
}

.invoice-production-modal__summary span { color: #98a7be; display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.invoice-production-modal__summary strong { color: #f3f6fb; display: block; font-size: 12px; line-height: 1.45; margin-top: 2px; }
.invoice-production-modal__badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.invoice-production-modal__badge { background: #3d311c; border: 1px solid #a46a06; border-radius: 8px; color: #ffd045; font-size: 12px; font-weight: 700; padding: 4px 9px; }
.invoice-production-modal__badge.is-complete { background: #153a33; border-color: #247e65; color: #7ee3ba; }
.invoice-production-modal__steps { display: grid; gap: 8px; }
.invoice-production-modal__step { background: #101a2d; border: 1px solid #24334a; border-radius: 11px; padding: 0 12px; }
.invoice-production-modal__step.is-current { background: #281b1b; border-color: #87360d; }
.invoice-production-modal__step summary { color: #d9e2ef; cursor: pointer; font-size: 12px; font-weight: 700; gap: 10px; justify-content: space-between; list-style: none; min-height: 41px; }
.invoice-production-modal__step summary::-webkit-details-marker { display: none; }
.invoice-production-modal__step.is-current summary { color: #ffe07c; }
.invoice-production-modal__step-time { color: #ffc400; font-size: 11px; font-weight: 700; text-align: right; }
.invoice-production-modal__responsible { color: #aebbd0; font-size: 12px; padding: 0 0 10px; }
.invoice-production-modal__step-form { border-top: 1px solid #293a52; padding: 4px 0 12px; }
.invoice-production-modal__step-form label { color: #cad4e1; }
.invoice-production-modal__step-form .form-select { background-color: #111e33; border-color: #344660; color: #edf2f9; }
.invoice-production-modal__step-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.invoice-production-modal__pickup-form { margin-top: 24px; }
.invoice-production-modal__pickup { background: #f5a000; border: 0; border-radius: 11px; box-shadow: 0 8px 18px rgba(245, 160, 0, .2); color: #111827; font-size: 12px; font-weight: 800; gap: 8px; justify-content: center; min-height: 44px; width: 100%; }
.invoice-production-modal__pickup:hover { background: #ffb323; }
.invoice-production-modal__checklist { margin-top: 22px; }
.invoice-production-modal__checklist h3 { color: #bec9d9; font-size: 11px; font-weight: 800; margin-bottom: 9px; text-transform: uppercase; }
.invoice-production-modal__checklist-grid { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.invoice-production-modal__check-item { background: #101a2d; border: 1px solid #26354d; border-radius: 9px; color: #cbd5e3; font-size: 12px; gap: 8px; min-height: 42px; padding: 8px 10px; text-align: left; width: 100%; }
.invoice-production-modal__check-item svg { color: #ffc400; flex: none; }
.invoice-production-modal__check-item.is-complete svg { color: #67d5ae; }
.invoice-production-modal__check-item:hover { border-color: #5886b7; }
.invoice-production-modal button:focus-visible,
.invoice-production-modal summary:focus-visible { outline: 2px solid #58a6ff; outline-offset: 2px; }

@media (max-width: 540px) {
    .invoice-production-modal__card { padding: 18px; }
    .invoice-production-modal__summary { gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .invoice-production-modal__step summary { align-items: flex-start; flex-direction: column; gap: 2px; justify-content: center; padding: 7px 0; }
}

.swal2-popup.cde-modal {
    background: var(--pnl-surface-bg) !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
    color: var(--pnl-text-primary);
    font-family: var(--font-sans);
    overflow: hidden;
    padding: 0 !important;
    text-align: left;
    width: min(32rem, calc(100vw - 2rem)) !important;
}

/* O SweetAlert monta o popup em grid e reserva uma coluna para o X, o que encurtava o cabeçalho.
 * Aqui o popup vira bloco e o X fica sobreposto no canto do cabeçalho. */
.swal2-popup.cde-modal {
    display: block !important;
    position: relative;
}

.swal2-popup.cde-modal--danger {
    border-color: rgba(255, 100, 110, 0.3);
}

.swal2-popup.cde-modal--in {
    animation: cde-modal-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cde-modal-in {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Seletor reforçado: o tema aplica `:is([dir=ltr] .swal2-popup .swal2-html-container)` com
 * padding-right 2.5rem !important (espaço do X), o que cortava o cabeçalho antes da borda. */
.swal2-popup.cde-modal .swal2-html-container.cde-modal__html {
    color: var(--pnl-text-primary);
    font-size: 14px;
    font-weight: 400;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left;
}

.cde-modal__header {
    align-items: center;
    background: rgba(23, 31, 49, 0.3);
    border-bottom: 1px solid var(--pnl-border);
    display: flex;
    gap: 0.75rem;
    padding: 1.5rem 3.5rem 1.5rem 1.5rem;
}

.cde-modal--danger .cde-modal__header {
    background: rgba(255, 100, 110, 0.05);
}

.cde-modal__icon {
    align-items: center;
    background: rgba(245, 169, 0, 0.1);
    border: 1px solid rgba(245, 169, 0, 0.3);
    border-radius: 12px;
    color: var(--pnl-amber-primary);
    display: inline-flex;
    flex-shrink: 0;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.cde-modal--danger .cde-modal__icon {
    background: rgba(255, 100, 110, 0.1);
    border-color: rgba(255, 100, 110, 0.3);
    color: var(--pnl-red-primary);
}

.cde-modal__title {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
}

.cde-modal__subtitle {
    color: var(--pnl-text-muted);
    font-size: 12px;
    margin: 0.125rem 0 0;
}

.cde-modal--danger .cde-modal__subtitle {
    color: rgba(255, 100, 110, 0.8);
}

.cde-modal__content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem 1.5rem 0;
}

.cde-modal .cde-modal__label {
    color: var(--pnl-text-secondary);
    display: block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.05em;
    margin: 0 0 0.5rem;
    text-transform: uppercase;
}

.cde-modal__item {
    background: var(--pnl-canvas);
    border: 1px solid rgba(37, 49, 73, 0.5);
    border-radius: 12px;
    color: var(--pnl-text-primary);
    font-weight: 500;
    padding: 0.75rem;
}

.cde-modal__note {
    color: var(--pnl-text-muted);
    font-size: 13px;
    margin: 0;
}

.cde-modal__alert {
    align-items: flex-start;
    background: rgba(255, 100, 110, 0.1);
    border: 1px solid rgba(255, 100, 110, 0.2);
    border-radius: 16px;
    color: var(--pnl-text-primary);
    display: flex;
    gap: 0.75rem;
    line-height: 1.6;
    padding: 1rem;
}

.cde-modal__alert > svg {
    color: var(--pnl-red-primary);
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.cde-modal__alert strong {
    color: #fff;
}

/* Campos montados no corpo do modal (excluir por ID, clonar). */
.cde-modal__field-input {
    background: var(--pnl-canvas);
    border: 1px solid var(--pnl-border);
    border-radius: 12px;
    color: #fff;
    font-size: 14px;
    height: 46px;
    outline: none;
    padding: 0 1rem;
    width: 100%;
}

.cde-modal__field-input[readonly] {
    color: var(--pnl-text-secondary);
    cursor: default;
}

.cde-modal__field-input:not([readonly]):focus {
    border-color: var(--pnl-amber-primary);
    box-shadow: 0 0 0 1px var(--pnl-amber-primary);
}

.cde-modal--danger .cde-modal__field-input:not([readonly]):focus {
    border-color: var(--pnl-red-primary);
    box-shadow: 0 0 0 1px var(--pnl-red-primary);
}

.cde-modal__field-input--code {
    color: #fff !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.cde-modal__copy {
    display: flex;
    gap: 0.5rem;
}

.cde-modal__copy-btn {
    align-items: center;
    background: var(--pnl-surface-raised);
    border: 1px solid var(--pnl-border);
    border-radius: 12px;
    color: var(--pnl-text-secondary);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 500;
    gap: 0.375rem;
    padding: 0 0.875rem;
}

.cde-modal__copy-btn:hover {
    color: #fff;
}

.cde-modal__copy-btn.is-copied {
    border-color: var(--pnl-green-primary);
    color: var(--pnl-green-primary);
}

.cde-modal__copy-btn.is-copied span {
    font-size: 0;
}

.cde-modal__copy-btn.is-copied span::after {
    content: "Copiado";
    font-size: 13px;
}

/* Campo do modal (confirmação da exclusão, justificativa do estorno). */
.swal2-popup.cde-modal .swal2-input-label.cde-modal__label {
    justify-content: flex-start;
    margin: 1.25rem 1.5rem 0.5rem;
}

.swal2-popup.cde-modal .swal2-input.cde-modal__input {
    background: var(--pnl-canvas) !important;
    border: 1px solid var(--pnl-border) !important;
    border-radius: 12px;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 14px;
    height: 46px;
    margin: 0 1.5rem;
    padding: 0.75rem 1rem;
    width: calc(100% - 3rem);
}

.swal2-popup.cde-modal .swal2-input.cde-modal__input:focus {
    border-color: var(--pnl-amber-primary) !important;
    box-shadow: 0 0 0 1px var(--pnl-amber-primary) !important;
}

.swal2-popup.cde-modal--danger .swal2-input.cde-modal__input:focus {
    border-color: var(--pnl-red-primary) !important;
    box-shadow: 0 0 0 1px var(--pnl-red-primary) !important;
}

.swal2-popup.cde-modal .swal2-validation-message.cde-modal__validation {
    background: transparent;
    color: var(--pnl-red-primary);
    font-size: 12px;
    justify-content: flex-start;
    margin: 0.5rem 1.5rem 0;
    padding: 0;
}

.swal2-popup.cde-modal .swal2-validation-message.cde-modal__validation::before {
    display: none;
}

.swal2-popup.cde-modal .cde-modal__actions {
    background: rgba(23, 31, 49, 0.2);
    border-top: 1px solid var(--pnl-border);
    gap: 0.75rem;
    justify-content: flex-end;
    margin: 1.5rem 0 0 !important;
    padding: 1.5rem;
    width: 100%;
}

.cde-modal__btn {
    align-items: center;
    border-radius: 12px;
    /* !important: o SweetAlert grava display:inline-block inline no botão, o que empilhava
     * o ícone em cima do texto. */
    display: inline-flex !important;
    flex-direction: row;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500;
    gap: 0.5rem;
    margin: 0 !important;
    padding: 0.625rem 1.25rem;
    transition: background-color 150ms ease, color 150ms ease, opacity 150ms ease;
}

/* Respeita botões que o SweetAlert ocultou, mesmo com o inline-flex do tema. */
.swal2-popup.cde-modal .cde-modal__btn[style*="display: none"] {
    display: none !important;
}

.cde-modal__btn--ghost {
    background: var(--pnl-surface-raised);
    color: var(--pnl-text-secondary);
}

.cde-modal__btn--ghost:hover {
    background: var(--pnl-border);
    color: #fff;
}

.cde-modal__btn--amber {
    background: var(--pnl-amber-primary);
    box-shadow: 0 10px 15px -3px rgba(245, 169, 0, 0.2);
    color: var(--pnl-canvas);
    font-weight: 600;
}

.cde-modal__btn--amber:hover {
    background: rgba(245, 169, 0, 0.9);
}

.cde-modal__btn--danger {
    background: var(--pnl-red-primary);
    box-shadow: 0 10px 15px -3px rgba(255, 100, 110, 0.2);
    color: #fff;
    font-weight: 600;
}

.cde-modal__btn--danger:hover {
    background: rgba(255, 100, 110, 0.9);
}

.cde-modal__btn:disabled,
.cde-modal__btn[disabled] {
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.5;
}

.cde-modal__btn--danger:disabled {
    background: rgba(255, 100, 110, 0.4);
}

.swal2-popup .swal2-close.cde-modal__close {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    justify-content: center;
    margin: 0;
    position: absolute !important;
    z-index: 2;
    color: var(--pnl-text-muted);
    font-family: var(--font-sans);
    font-size: 1.5rem;
    height: 2.25rem;
    right: 1rem;
    top: 1.5rem;
    width: 2.25rem;
}

.swal2-popup .swal2-close.cde-modal__close:hover {
    background: var(--pnl-surface-raised);
    color: #fff;
}

@media (max-width: 480px) {
    .swal2-popup.cde-modal .cde-modal__actions {
        flex-direction: column-reverse;
    }

    .cde-modal__btn {
        justify-content: center;
        width: 100%;
    }
}

/* Avisos (toast) no padrão "Alerts with icon" do Vristo: faixa de 56px na cor do tipo com o ícone
 * branco, texto com título forte na cor do tipo. Pausa ao passar o mouse; barra de tempo embaixo.
 * Mesmo visual do componente x-user.alert (alertas fixos dentro da página). */
/* Cor padrão fica num seletor simples para que os modificadores --success/--danger (abaixo, mesma
 * especificidade) consigam trocá-la. */
.cde-toast,
.cde-alert {
    --cde-tone: var(--pnl-blue-primary);
}

.swal2-popup.swal2-toast.cde-toast,
.cde-alert {
    background: var(--pnl-surface-bg) !important;
    border: 1px solid var(--cde-tone);
    border-radius: 12px;
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6) !important;
    overflow: hidden;
    padding: 0 !important;
}

.swal2-popup.swal2-toast.cde-toast {
    display: block !important;
    max-width: min(26rem, calc(100vw - 2rem));
    width: auto !important;
}

/* Sucesso usa a mesma cor do selo "Ativo" das tabelas (.pnl-badge-success). */
.cde-toast--success, .cde-alert--success { --cde-tone: #34d399; }
.cde-toast--warning, .cde-alert--warning { --cde-tone: var(--pnl-amber-primary); }
.cde-toast--danger, .cde-alert--danger { --cde-tone: var(--pnl-red-primary); }
.cde-toast--info, .cde-alert--info { --cde-tone: var(--pnl-blue-primary); }

.swal2-popup.swal2-toast.cde-toast .swal2-html-container {
    margin: 0 !important;
    padding: 0 !important;
}

.cde-toast__body,
.cde-alert {
    align-items: stretch;
    display: flex;
    text-align: left;
}

.cde-toast__icon,
.cde-alert__icon {
    align-items: center;
    background: var(--cde-tone);
    color: #fff;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    width: 56px;
}

.cde-toast--warning .cde-toast__icon,
.cde-alert--warning .cde-alert__icon {
    color: var(--pnl-canvas);
}

.cde-toast__text,
.cde-alert__text {
    background: color-mix(in srgb, var(--cde-tone) 10%, transparent);
    color: var(--pnl-text-primary);
    flex: 1 1 auto;
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
    padding: 0.875rem 2.75rem 0.875rem 1rem;
    white-space: pre-line;
}

.cde-toast__text strong,
.cde-alert__text strong {
    color: var(--cde-tone);
    font-weight: 700;
    margin-right: 0.25rem;
}

.swal2-popup .swal2-close.cde-toast__close,
.cde-alert__close {
    align-items: center;
    border-radius: 8px;
    color: var(--pnl-text-muted);
    display: inline-flex;
    font-family: var(--font-sans);
    font-size: 1.25rem;
    height: 1.75rem;
    justify-content: center;
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    width: 1.75rem;
}

.swal2-popup .swal2-close.cde-toast__close:hover,
.cde-alert__close:hover {
    color: #fff;
}

.cde-toast__progress {
    background: var(--cde-tone) !important;
    opacity: 0.6;
}

/* Alerta fixo na página (x-user.alert). */
.cde-alert {
    box-shadow: none !important;
    position: relative;
}

/* Menu do topo em colunas (mega menu): Cadastros e Financeiro abrem um painel com grupos lado a
 * lado, cada um com título. No desktop é grid; no menu lateral do celular os grupos empilham. */
.horizontal-menu ul.sub-menu--mega .sub-menu__group > ul {
    display: block;
    position: static;
}

.horizontal-menu ul.sub-menu--mega .sub-menu__title {
    color: #0e1726;
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.25rem 1rem 0.5rem;
    text-transform: uppercase;
}

.dark .horizontal-menu ul.sub-menu--mega .sub-menu__title {
    color: var(--pnl-text-primary);
}

/* Desktop: os submenus abrem no clique (horizontalMenu em alpine-components.js marca .is-open), não
 * no hover, e descem como painel logo abaixo da barra do topo. O <li> fica static para o painel se
 * posicionar pela .pnl-topbar; o JS calcula o left alinhado ao item clicado sem sair da tela. */
@media (min-width: 1024px) {
    .horizontal-menu.pnl-mobile-menu > li.nav-item {
        position: static !important;
    }

    .horizontal-menu.pnl-mobile-menu > li.nav-item:hover > ul.sub-menu {
        display: none;
    }

    .horizontal-menu.pnl-mobile-menu > li.nav-item > ul.sub-menu {
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
        min-width: 220px;
        padding: 0.75rem 0.5rem;
        top: calc(100% + 6px);
    }

    .horizontal-menu.pnl-mobile-menu > li.nav-item.is-open > ul.sub-menu {
        display: block;
    }

    .horizontal-menu.pnl-mobile-menu > li.nav-item.is-open > ul.sub-menu--mega {
        display: grid;
        gap: 0.5rem 1.5rem;
        grid-auto-columns: minmax(200px, 1fr);
        grid-auto-flow: column;
        padding: 1.25rem 1rem;
    }

    .horizontal-menu.pnl-mobile-menu ul.sub-menu a {
        border-radius: 8px;
        white-space: nowrap;
    }

    .horizontal-menu.pnl-mobile-menu > li.nav-item.is-open > .nav-link {
        background-color: rgba(226, 160, 63, 0.12);
        border-radius: 10px;
        color: #e2a03f;
    }

    .horizontal-menu.pnl-mobile-menu > li.nav-item.is-open > .nav-link .right_arrow svg {
        transform: rotate(-90deg);
    }

    .horizontal-menu.pnl-mobile-menu .nav-link .right_arrow svg {
        transition: transform 0.2s ease;
    }
}

@media (max-width: 1023.98px) {
    .pnl-mobile-menu ul.sub-menu--mega .sub-menu__title {
        color: var(--pnl-text-secondary);
        font-size: 11px;
        padding: 0.75rem 0 0.25rem 2.25rem;
    }
}

/* Avisos da importação/exportação com o Bling (x-user.bling-errors), acima da tabela. */
.pnl-bling-errors {
    background-color: rgba(231, 81, 90, 0.08);
    border: 1px solid rgba(231, 81, 90, 0.45);
    border-radius: 16px;
    color: var(--pnl-text-secondary);
    padding: 14px 18px;
}

.pnl-bling-errors__head {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.pnl-bling-errors__head strong {
    color: #e7515a;
    font-size: 14px;
}

.pnl-bling-errors__close {
    border-radius: 8px;
    color: var(--pnl-text-secondary);
    padding: 4px;
}

.pnl-bling-errors__close:hover {
    color: #e7515a;
}

.pnl-bling-errors__list {
    font-size: 13px;
    line-height: 1.5;
    list-style: disc;
    margin-top: 8px;
    max-height: 220px;
    overflow-y: auto;
    overflow-wrap: anywhere;
    padding-left: 1.25rem;
}

.pnl-bling-errors__list li + li {
    margin-top: 4px;
}

/* Texto de apoio das opções nos modais do Bling (listagem de produtos). */
.pnl-bling-modal__hint {
    color: var(--pnl-text-secondary);
    display: block;
    font-size: 12px;
    font-weight: 400;
    margin-top: 2px;
}

/* Coluna numérica (valores) nas tabelas index renderizadas no servidor, ex. NF-e. */
.pnl-index-table .pnl-index-num {
    font-variant-numeric: tabular-nums;
}

/* Ação principal dentro de um <form> (ex. Importar do Bling em NF-e de Saídas): o botão recebe o mesmo
 * tamanho, cor e comportamento recolhido (só ícone) de um botão filho direto de __top-action. */
.pnl-index-sidebar__top-action > form > .btn {
    align-items: center;
    box-shadow: none !important;
    color: var(--pnl-card-bg) !important;
    display: inline-flex;
    height: 36px;
    justify-content: center;
    margin: 0;
    padding: 0;
    width: 100%;
}

.pnl-index-rail--collapsed .pnl-index-sidebar__top-action > form > .btn {
    font-size: 0;
    gap: 0;
}

@media (max-width: 767px) {
    .pnl-index-rail--collapsed .pnl-index-sidebar__top-action > form > .btn {
        font-size: inherit;
        gap: 0.5rem;
    }
}

/* Botões da gaveta de filtros e dos modais (colunas, Bling): sem a sombra colorida que o Vristo põe em
 * .btn-warning e nas outras cores. */
.pnl-drawer__footer .btn,
.receivables-columns-modal__footer .btn {
    box-shadow: none !important;
}

/* Tabela index com títulos e células centralizados (ex. Vendas). Conteúdos em flex dentro da célula também
 * usam justify-center/items-center na própria marcação. */
.pnl-index-table--center thead th,
.pnl-index-table--center tbody td {
    text-align: center !important;
}

.pnl-index-table--center thead th > a {
    justify-content: center;
}

/* Colunas que continuam à esquerda numa tabela centralizada (Id e Nome em Vendas): o script da página marca
 * o título e as células dessas colunas com .pnl-cell-start, refeito a cada atualização do DataTable. */
.pnl-index-table--center thead th.pnl-cell-start,
.pnl-index-table--center tbody td.pnl-cell-start {
    text-align: left !important;
}

/* Card "Busca Rápida" dos painéis, no padrão de Contas a Receber (receivables/index-metrics). */
.pnl-quick-search {
    min-height: 8rem;
}

.pnl-quick-search__icon {
    height: 28px;
    width: 28px;
}

.pnl-quick-search__helper {
    border-top: 1px solid var(--pnl-border);
    color: var(--pnl-text-muted);
    font-size: 0.6875rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}

/* Campos globais (Renan, 2026-10-18): todo input, select e textarea do painel segue o visual dos
 * filtros da gaveta (raio 12px, texto 12px, 38px de altura, foco âmbar). No tema escuro, também o
 * fundo de controle e a borda dos filtros; no claro, as cores continuam as do tema. Para um campo
 * novo, basta usar form-input / form-select / form-textarea: não repita estas regras na página. */
.form-input,
.form-select,
.form-textarea,
.form-multiselect {
    border-radius: 12px;
    font-size: 12px;
}

.form-input,
.form-select {
    min-height: 38px;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.form-multiselect:focus {
    border-color: var(--pnl-amber-primary) !important;
}

.dark .form-input,
.dark .form-select,
.dark .form-textarea,
.dark .form-multiselect {
    background-color: var(--pnl-control-bg) !important;
    border-color: var(--pnl-border) !important;
    color: var(--pnl-text-primary) !important;
}

.dark .form-input:focus,
.dark .form-select:focus,
.dark .form-textarea:focus,
.dark .form-multiselect:focus {
    border-color: var(--pnl-amber-primary) !important;
}

.dark .form-input::placeholder,
.dark .form-textarea::placeholder {
    color: var(--pnl-text-muted);
}

.dark input[type="date"].form-input,
.dark input[type="datetime-local"].form-input,
.dark input[type="month"].form-input,
.dark input[type="time"].form-input {
    color-scheme: dark;
}

/* Campos desabilitados ou somente leitura continuam distinguíveis. */
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Tom Select (selects com busca) no mesmo visual em qualquer tela. */
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control {
    border-radius: 12px;
    font-size: 12px;
    min-height: 38px;
}

.dark .ts-wrapper .ts-control {
    background-color: var(--pnl-control-bg) !important;
    border-color: var(--pnl-border) !important;
    box-shadow: none !important;
    color: var(--pnl-text-primary) !important;
}

.ts-wrapper.focus .ts-control,
.ts-wrapper.dropdown-active .ts-control {
    border-color: var(--pnl-amber-primary) !important;
}

.ts-wrapper .ts-control input {
    font-size: 12px !important;
}

.dark .ts-dropdown {
    background-color: var(--pnl-control-bg);
    border: 1px solid var(--pnl-border);
    border-radius: 12px;
    color: var(--pnl-text-primary);
}

.ts-dropdown [data-selectable] {
    font-size: 12px;
}

.dark .ts-dropdown .active {
    background-color: rgba(245, 169, 0, 0.12);
    color: var(--pnl-amber-primary);
}

/* O Tom Select copia as classes do <select> (form-select) para o .ts-wrapper: sem isto, o wrapper
 * ganhava borda, fundo e seta próprios e aparecia uma caixa dentro da outra (modal de Produção). */
.ts-wrapper.form-select,
.ts-wrapper.form-input,
.dark .ts-wrapper.form-select,
.dark .ts-wrapper.form-input {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    min-height: 0;
    padding: 0 !important;
}

.ts-wrapper.single .ts-control {
    font-weight: 600;
    line-height: 20px;
    padding: 8px 36px 8px 12px;
}

/* Seta do select com busca (o CSS do Tom Select não desenha no modo single); vira ao abrir. */
.ts-wrapper.single .ts-control::after {
    border-bottom: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    content: '';
    height: 7px;
    opacity: .75;
    pointer-events: none;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-65%) rotate(45deg);
    transition: transform .15s ease;
    width: 7px;
}

.ts-wrapper.single.dropdown-active .ts-control::after {
    transform: translateY(-25%) rotate(225deg);
}

/* Campos com prefixo/sufixo (ex.: "R$" + valor): o lado colado ao prefixo continua reto e o
 * prefixo ganha o mesmo raio de 12px do campo. */
.form-input.rounded-l-none,
.form-input.ltr\:rounded-l-none,
.form-select.rounded-l-none {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

.form-input.rounded-r-none,
.form-input.ltr\:rounded-r-none,
.form-select.rounded-r-none {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

.flex > :has(+ .form-input.rounded-l-none),
.flex > :has(+ .form-input.ltr\:rounded-l-none) {
    border-bottom-left-radius: 12px;
    border-top-left-radius: 12px;
    min-height: 38px;
}

.form-input.rounded-r-none + *,
.form-input.ltr\:rounded-r-none + * {
    border-bottom-right-radius: 12px;
    border-top-right-radius: 12px;
    min-height: 38px;
}

.dark .flex > :has(+ .form-input.rounded-l-none),
.dark .flex > :has(+ .form-input.ltr\:rounded-l-none),
.dark .form-input.rounded-r-none + *,
.dark .form-input.ltr\:rounded-r-none + * {
    border-color: var(--pnl-border);
}

/* Botão sem a sombra colorida do tema (ex.: ação principal dos modais). */
.btn.pnl-btn-flat,
.btn.pnl-btn-flat:hover {
    box-shadow: none !important;
}

/* ==================================================================================================
 * Padrão de tabelas (modelo: Contas a Receber) — script em components/user/table-tools.blade.php.
 * Cabeçalho ordenável com setinha (↕ neutra, ↑/↓ âmbar na coluna ativa), ícone "?" de ajuda com
 * tooltip e formatação de valores pendentes (.pnl-money).
 * ================================================================================================== */
.pnl-th-sort,
.dataTable-sorter {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit !important;
    cursor: pointer;
    display: inline-flex !important;
    font: inherit;
    gap: 0.35rem;
    padding: 0 !important;
    text-transform: inherit;
    transition: color 150ms ease;
    width: auto !important;
}

.pnl-th-sort:hover,
.pnl-th-sort:focus-visible,
.dataTable-sorter:hover,
.dataTable-sorter:focus-visible {
    color: var(--pnl-text-primary) !important;
}

/* Setinha dos DataTables: troca os triângulos do tema pela mesma seta de Contas a Receber. */
.dataTable-sorter::before {
    display: none !important;
}

.dataTable-sorter::after,
.pnl-sort-indicator {
    border: 0 !important;
    color: var(--pnl-text-muted);
    font-size: 0.75rem;
    height: auto !important;
    line-height: 1;
    opacity: 0.65;
    position: static !important;
    width: auto !important;
}

.dataTable-sorter::after {
    content: '↕' !important;
    order: 99;
}

th.asc .dataTable-sorter::after {
    color: var(--pnl-amber-primary);
    content: '↑' !important;
    opacity: 1;
}

th.desc .dataTable-sorter::after {
    color: var(--pnl-amber-primary);
    content: '↓' !important;
    opacity: 1;
}

.pnl-sort-indicator.is-active {
    color: var(--pnl-amber-primary);
    opacity: 1;
}

/* Colunas centralizadas: o botão do título acompanha o alinhamento da coluna. */
.pnl-index-table--center thead th:not(.pnl-cell-start) .pnl-th-sort,
.pnl-index-table--center thead th:not(.pnl-cell-start) .dataTable-sorter {
    justify-content: center;
}

.pnl-help-icon {
    align-items: center;
    border: 1px solid currentColor;
    border-radius: 999px;
    cursor: help;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.625rem;
    font-weight: 700;
    height: 0.9rem;
    justify-content: center;
    line-height: 1;
    opacity: 0.75;
    text-transform: none;
    width: 0.9rem;
}

/* Valores em dinheiro: pendente em vermelho; saldo a favor / já pago em verde entre parênteses. */
/* Mesma fonte do painel (Plus Jakarta Sans), como Contas a Pagar/Receber; só os números com largura fixa. */
.pnl-money {
    font-family: var(--font-sans);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pnl-money--pending {
    color: var(--pnl-red-primary) !important;
    cursor: help;
    font-weight: 600;
}

.pnl-money--settled {
    color: var(--pnl-green-primary) !important;
    cursor: help;
    font-weight: 600;
}

/* Central de Ajuda e Suporte (Configurações → Tickets, view user/setting/ticket/index). Classes hc-*
próprias porque grid de módulos, hero e modais usam combinações que o style.css estático do Vristo não
tem (ver skill ui-vristo-css-limits). Mesmas variáveis pnl-* do painel; tema claro no fim do bloco. */
.hc-page {
    --hc-surface: var(--pnl-card-bg);
    --hc-border: var(--pnl-card-border);
    --hc-control: var(--pnl-control-bg);
    --hc-text: var(--pnl-text-primary);
    --hc-muted: var(--pnl-text-secondary);
    --hc-amber: var(--pnl-amber-primary);
    --hc-amber-soft: rgba(245, 169, 0, 0.12);
    --hc-amber-line: rgba(245, 169, 0, 0.3);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    font-family: var(--font-sans);
}

.hc-page [hidden] {
    display: none !important;
}

body.hc-modal-open {
    overflow: hidden;
}

.hc-icon-box {
    align-items: center;
    background: var(--hc-amber-soft);
    border: 1px solid var(--hc-amber-line);
    border-radius: 12px;
    color: var(--hc-amber);
    display: inline-flex;
    flex: 0 0 44px;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.hc-icon-box--sm {
    border-radius: 8px;
    flex-basis: 32px;
    height: 32px;
    width: 32px;
}

.hc-link-btn {
    background: none;
    border: 0;
    color: var(--hc-amber);
    font-size: 12px;
    font-weight: 600;
    padding: 0;
}

.hc-link-btn:hover {
    text-decoration: underline;
}

/* Hero */
.hc-hero {
    background: linear-gradient(180deg, var(--pnl-surface-raised) 0%, var(--hc-surface) 100%);
    border: 1px solid var(--hc-border);
    border-radius: 24px;
    overflow: hidden;
    padding: 2.5rem 1.5rem;
    position: relative;
}

.hc-hero__glow {
    background: radial-gradient(circle, rgba(245, 169, 0, 0.16) 0%, rgba(245, 169, 0, 0) 70%);
    height: 360px;
    pointer-events: none;
    position: absolute;
    right: -120px;
    top: -160px;
    width: 360px;
}

.hc-hero__content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 760px;
    position: relative;
}

.hc-eyebrow {
    align-items: center;
    align-self: flex-start;
    background: var(--hc-amber-soft);
    border: 1px solid var(--hc-amber-line);
    border-radius: 999px;
    color: var(--hc-amber);
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    gap: 6px;
    padding: 4px 12px;
}

.hc-hero__title {
    color: var(--hc-text);
    font-size: 1.875rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
}

.hc-hero__title span {
    color: var(--hc-amber);
}

.hc-hero__text {
    color: var(--hc-muted);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    max-width: 620px;
}

.hc-search {
    align-items: center;
    background: var(--hc-control);
    border: 1px solid var(--pnl-border);
    border-radius: 14px;
    display: flex;
    gap: 8px;
    padding: 6px 6px 6px 14px;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.hc-search:focus-within {
    border-color: var(--hc-amber);
    box-shadow: 0 0 0 3px var(--pnl-focus-ring);
}

.hc-search__icon {
    color: var(--hc-muted);
    flex-shrink: 0;
}

.hc-search__input {
    background: transparent;
    border: 0;
    color: var(--hc-text);
    flex: 1 1 auto;
    font-size: 14px;
    min-width: 0;
    outline: none;
    padding: 8px 0;
}

.hc-search__input::placeholder {
    color: var(--hc-muted);
}

.hc-search__btn {
    border-radius: 10px;
    flex-shrink: 0;
}

.hc-tags {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hc-tags__label {
    color: var(--hc-muted);
    font-size: 12px;
}

.hc-tag {
    background: var(--hc-control);
    border: 1px solid var(--pnl-border);
    border-radius: 999px;
    color: var(--hc-muted);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    transition: color 150ms ease, border-color 150ms ease;
}

.hc-tag:hover,
.hc-tag:focus-visible {
    border-color: var(--hc-amber);
    color: var(--hc-amber);
}

/* Barra de ação */
.hc-action {
    align-items: center;
    background: var(--hc-surface);
    border: 1px solid var(--hc-border);
    border-radius: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    padding: 1.25rem;
}

.hc-action__info {
    align-items: center;
    display: flex;
    gap: 14px;
    min-width: 0;
}

.hc-action__title,
.hc-section-title {
    color: var(--hc-text);
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.hc-action__text,
.hc-section-text {
    color: var(--hc-muted);
    font-size: 13px;
    margin: 2px 0 0;
}

.hc-action__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hc-count {
    background: var(--hc-amber);
    border-radius: 999px;
    color: #0e1726;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    min-width: 20px;
    padding: 4px 6px;
    text-align: center;
}

/* Módulos e perguntas frequentes */
.hc-section-header {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.hc-modules {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
}

.hc-module {
    background: var(--hc-surface);
    border: 1px solid var(--hc-border);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: border-color 200ms ease;
}

.hc-module:hover {
    border-color: var(--hc-amber-line);
}

.hc-module__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 1.25rem 1.25rem 0.75rem;
}

.hc-module__top {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.hc-module__count {
    background: var(--hc-control);
    border: 1px solid var(--pnl-border);
    border-radius: 999px;
    color: var(--hc-muted);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
}

.hc-module__title {
    color: var(--hc-text);
    font-size: 15px;
    font-weight: 700;
    margin: 4px 0 0;
}

.hc-module__summary {
    color: var(--hc-muted);
    font-size: 12.5px;
    line-height: 1.5;
    margin: 0;
}

.hc-faq {
    border-top: 1px solid var(--pnl-border);
    display: flex;
    flex-direction: column;
    margin-top: 4px;
}

.hc-faq__item {
    border-bottom: 1px solid var(--pnl-border);
}

.hc-faq__item:last-child {
    border-bottom: 0;
}

.hc-faq__question {
    align-items: center;
    background: none;
    border: 0;
    color: var(--hc-text);
    display: flex;
    font-size: 13px;
    font-weight: 600;
    gap: 10px;
    justify-content: space-between;
    padding: 10px 0;
    text-align: left;
    width: 100%;
}

.hc-faq__question:hover,
.hc-faq__item.is-open .hc-faq__question {
    color: var(--hc-amber);
}

.hc-faq__question svg {
    flex-shrink: 0;
    transition: transform 200ms ease;
}

.hc-faq__item.is-open .hc-faq__question svg {
    transform: rotate(180deg);
}

.hc-faq__answer {
    color: var(--hc-muted);
    font-size: 12.5px;
    line-height: 1.6;
    padding: 0 0 12px;
}

.hc-faq__answer p {
    margin: 0 0 8px;
}

.hc-faq__answer p:last-child {
    margin-bottom: 0;
}

.hc-module__footer {
    align-items: center;
    border-top: 1px solid var(--pnl-border);
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 12px 1.25rem;
}

.hc-module__help {
    align-items: center;
    background: var(--hc-amber-soft);
    border: 1px solid var(--hc-amber-line);
    border-radius: 8px;
    color: var(--hc-amber);
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    gap: 6px;
    padding: 6px 12px;
    transition: background-color 150ms ease, color 150ms ease;
}

.hc-module__help:hover {
    background: var(--hc-amber);
    color: #0e1726;
}

.hc-empty {
    align-items: center;
    background: var(--hc-surface);
    border: 1px dashed var(--pnl-border);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 2rem 1rem;
    text-align: center;
}

.hc-empty__title {
    color: var(--hc-text);
    font-weight: 700;
    margin: 0;
}

.hc-empty__text {
    color: var(--hc-muted);
    font-size: 13px;
    margin: 0;
}

/* Modais (mesmo visual de .receivables-columns-modal) */
.hc-modal {
    align-items: center;
    background: rgba(0, 0, 0, 0.68);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 1rem;
    position: fixed;
    z-index: 70;
}

.hc-modal__dialog {
    background: var(--pnl-surface-bg);
    border: 1px solid var(--pnl-border);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.36);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 2rem);
    max-width: 560px;
    overflow: hidden;
    width: 100%;
}

.hc-modal__dialog--lg {
    max-width: 720px;
}

.hc-modal__header,
.hc-modal__footer {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 16px 22px;
}

.hc-modal__header {
    border-bottom: 1px solid var(--pnl-border);
}

.hc-modal__footer {
    border-top: 1px solid var(--pnl-border);
    flex-wrap: wrap;
}

.hc-modal__title-wrap {
    align-items: center;
    display: flex;
    gap: 10px;
    min-width: 0;
}

.hc-modal__header h2 {
    color: var(--pnl-text-primary);
    font-size: 15px;
    font-weight: 700;
    margin: 0;
}

.hc-modal__close {
    align-items: center;
    background: var(--pnl-control-bg);
    border: 1px solid var(--pnl-border);
    border-radius: 8px;
    color: var(--pnl-text-secondary);
    display: inline-flex;
    flex: 0 0 32px;
    height: 32px;
    justify-content: center;
    transition: color 150ms ease, border-color 150ms ease;
    width: 32px;
}

.hc-modal__close:hover,
.hc-modal__close:focus-visible {
    border-color: var(--pnl-amber-primary);
    color: var(--pnl-amber-primary);
}

.hc-modal__body {
    overflow-y: auto;
    padding: 22px;
}

.hc-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hc-modal__actions,
.hc-modal__footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.hc-modal__footer-text {
    color: var(--pnl-text-secondary);
    font-size: 12px;
}

/* Lista de tickets */
.hc-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.hc-filter__item {
    border: 1px solid var(--hc-border);
    border-radius: 999px;
    color: var(--hc-muted);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
}

.hc-filter__item:hover,
.hc-filter__item.is-active {
    background: var(--hc-amber-soft);
    border-color: var(--hc-amber-line);
    color: var(--pnl-amber-primary);
}

.hc-tickets {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hc-ticket {
    align-items: center;
    background: var(--hc-control);
    border: 1px solid var(--hc-border);
    border-radius: 10px;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 12px 14px;
    transition: border-color 150ms ease;
}

.hc-ticket:hover {
    border-color: var(--pnl-amber-primary);
}

.hc-ticket__main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.hc-ticket__id {
    color: var(--pnl-amber-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    font-weight: 700;
}

.hc-ticket__subject {
    color: var(--hc-text);
    font-size: 13.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hc-ticket__meta {
    color: var(--hc-muted);
    font-size: 11.5px;
}

.hc-tickets__empty {
    color: var(--hc-muted);
    font-size: 13px;
    margin: 0;
    padding: 1.5rem 0;
    text-align: center;
}

/* Conversa do ticket */
.hc-chat {
    height: min(720px, calc(100vh - 2rem));
}

.hc-chat__heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.hc-chat__tags,
.hc-chat__header-actions {
    align-items: center;
    display: flex;
    gap: 8px;
}

.hc-chat__timeline {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    padding: 20px 22px;
}

.hc-chat__row {
    display: flex;
    justify-content: flex-start;
}

.hc-chat__row--mine {
    justify-content: flex-end;
}

.hc-chat__bubble {
    background: var(--hc-control);
    border: 1px solid var(--hc-border);
    border-radius: 14px 14px 14px 4px;
    max-width: 80%;
    padding: 10px 14px;
}

.hc-chat__row--mine .hc-chat__bubble {
    background: var(--hc-amber-soft);
    border-color: var(--hc-amber-line);
    border-radius: 14px 14px 4px 14px;
}

.hc-chat__author {
    color: var(--pnl-blue-primary);
    font-size: 11.5px;
    font-weight: 700;
    margin-bottom: 4px;
}

.hc-chat__row--mine .hc-chat__author {
    color: var(--pnl-amber-primary);
}

.hc-chat__author span {
    color: var(--hc-muted);
    font-weight: 400;
    margin-left: 6px;
}

.hc-chat__text {
    color: var(--hc-text);
    font-size: 13px;
    line-height: 1.55;
    margin: 0;
    white-space: pre-line;
}

.hc-chat__reply {
    align-items: flex-end;
    border-top: 1px solid var(--hc-border);
    display: flex;
    gap: 10px;
    padding: 14px 22px;
}

.hc-chat__reply textarea {
    flex: 1 1 auto;
    resize: vertical;
}

.hc-chat__error {
    padding: 0 22px 12px;
}

@media (min-width: 640px) {
    .hc-hero {
        padding: 3rem 2.5rem;
    }

    .hc-hero__title {
        font-size: 2.25rem;
    }

    .hc-modules {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .hc-modules {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 639px) {
    .hc-action__buttons,
    .hc-action__buttons .btn {
        width: 100%;
    }

    .hc-search__btn {
        display: none;
    }

    .hc-chat__bubble {
        max-width: 92%;
    }
}

/* Tema claro: as superfícies da página seguem --pnl-card-bg; só texto e controles precisam trocar. */
body:not(.dark) .hc-page {
    --hc-control: #f4f5f7;
    --hc-text: #0e1726;
    --hc-muted: #5b6478;
}

body:not(.dark) .hc-hero {
    background: linear-gradient(180deg, #fff8e8 0%, var(--hc-surface) 100%);
}

body:not(.dark) .hc-search,
body:not(.dark) .hc-tag,
body:not(.dark) .hc-module__count,
body:not(.dark) .hc-faq,
body:not(.dark) .hc-faq__item,
body:not(.dark) .hc-module__footer,
body:not(.dark) .hc-empty {
    border-color: rgba(0, 0, 0, 0.1);
}

/* Central de Ajuda: hero compacto + coluna de cards ao lado (acesso remoto, tickets, base de
conhecimento). O acesso remoto é só visual por enquanto (recurso futuro). */
.hc-top {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
}

.hc-top .hc-hero {
    padding: 1.75rem 1.5rem;
}

.hc-top .hc-hero__content {
    gap: 0.85rem;
    max-width: none;
}

.hc-top .hc-hero__title {
    font-size: 1.625rem;
}

.hc-side {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hc-side-card--wide {
    grid-column: 1 / -1;
}

.hc-side-card {
    background: var(--hc-surface);
    border: 1px solid var(--hc-border);
    border-radius: 16px;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 1rem 1.15rem;
    text-align: left;
    transition: border-color 200ms ease;
}

.hc-side-card--action:hover,
.hc-side-card--action:focus-visible {
    border-color: var(--hc-amber-line);
}

.hc-side-card__label {
    color: var(--hc-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.hc-side-card__value {
    color: var(--hc-text);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
}

.hc-side-card__value small {
    color: var(--hc-amber);
    font-size: 13px;
    font-weight: 700;
}

.hc-side-card__meta {
    color: var(--hc-muted);
    font-size: 11.5px;
    line-height: 1.45;
}

@media (min-width: 640px) {
    .hc-top .hc-hero {
        padding: 2rem 2rem;
    }

    .hc-top .hc-hero__title {
        font-size: 1.875rem;
    }
}

@media (min-width: 1280px) {
    .hc-top {
        grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    }
}

@media (max-width: 479px) {
    .hc-side {
        grid-template-columns: minmax(0, 1fr);
    }
}

.hc-remote {
    background: var(--hc-surface);
    border: 1px solid var(--hc-border);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 1.25rem;
}

.hc-remote__top {
    align-items: flex-start;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.hc-remote__title-wrap {
    align-items: center;
    display: flex;
    gap: 10px;
}

.hc-remote__icon {
    align-items: center;
    background: rgba(38, 214, 155, 0.12);
    border: 1px solid rgba(38, 214, 155, 0.3);
    border-radius: 8px;
    color: var(--pnl-green-primary);
    display: inline-flex;
    flex: 0 0 34px;
    height: 34px;
    justify-content: center;
}

.hc-remote__title {
    color: var(--hc-text);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
    margin: 0;
    text-transform: uppercase;
}

.hc-remote__subtitle {
    color: var(--pnl-blue-primary);
    font-size: 12px;
    margin: 2px 0 0;
}

.hc-remote__badge {
    background: var(--hc-surface);
    border: 1px solid var(--pnl-border);
    border-radius: 999px;
    color: var(--hc-muted);
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
}

.hc-remote__text {
    color: var(--hc-muted);
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}

.hc-remote__footer {
    align-items: center;
    border-top: 1px solid var(--pnl-border);
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding-top: 14px;
}

.hc-remote__soon {
    color: var(--hc-amber);
    font-size: 11px;
    font-weight: 700;
}

.hc-switch {
    align-items: center;
    cursor: not-allowed;
    display: inline-flex;
    gap: 10px;
    margin: 0;
}

.hc-switch input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.hc-switch__track {
    background: var(--pnl-border);
    border-radius: 999px;
    flex-shrink: 0;
    height: 22px;
    position: relative;
    width: 40px;
}

.hc-switch__track::after {
    background: #ffffff;
    border-radius: 50%;
    content: "";
    height: 16px;
    left: 3px;
    position: absolute;
    top: 3px;
    width: 16px;
}

.hc-switch__label {
    color: var(--hc-text);
    font-size: 13px;
    font-weight: 700;
}

body:not(.dark) .hc-remote,
body:not(.dark) .hc-remote__badge,
body:not(.dark) .hc-remote__footer {
    border-color: rgba(0, 0, 0, 0.1);
}

body:not(.dark) .hc-switch__track {
    background: #cbd2dc;
}

/* Central de Ajuda: páginas "Meus tickets" (ticket/list) e conversa do ticket (ticket/show). */
.hc-panel {
    background: var(--hc-surface);
    border: 1px solid var(--hc-border);
    border-radius: 16px;
    padding: 1.25rem;
}

.hc-panel__header,
.hc-panel__footer {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
}

.hc-panel__header {
    margin-bottom: 14px;
}

.hc-panel__header .hc-filter {
    margin-bottom: 0;
}

.hc-panel__footer {
    border-top: 1px solid var(--hc-border);
    margin-top: 14px;
    padding-top: 14px;
}

.hc-panel__meta {
    color: var(--hc-muted);
    font-size: 12px;
}

.hc-panel__pager {
    display: flex;
    gap: 8px;
}

.hc-filter__item span {
    margin-left: 4px;
    opacity: 0.75;
}

.hc-ticket__side {
    align-items: center;
    color: var(--hc-muted);
    display: flex;
    flex-shrink: 0;
    gap: 10px;
}

.hc-tickets__empty {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hc-tickets__empty p {
    margin: 0;
}

.hc-chat-panel {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 260px);
    min-height: 420px;
    padding: 0;
}

.hc-back-link {
    align-self: flex-start;
}

body:not(.dark) .hc-page {
    --hc-border: rgba(0, 0, 0, 0.1);
}

/* Detalhes do contato (contact/individual/show): versão compacta — perfil numa faixa, 5 KPIs,
pedidos em abas + gráfico lado a lado. Classes cshow-* para poderem ser reaproveitadas em Contatos CNPJ. */
.cshow-page {
    --cshow-surface: var(--pnl-card-bg);
    --cshow-border: var(--pnl-card-border);
    --cshow-text: var(--pnl-text-primary);
    --cshow-muted: var(--pnl-text-secondary);
    display: flex;
    flex-direction: column;
    font-family: var(--font-sans);
    gap: 1rem;
}

.cshow-page [hidden] {
    display: none !important;
}

.cshow-profile,
.cshow-kpi,
.cshow-card {
    background: var(--cshow-surface);
    border: 1px solid var(--cshow-border);
    border-radius: 16px;
}

.cshow-profile {
    padding: 0.75rem 1rem;
}

.cshow-profile__top {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
}

.cshow-profile__identity {
    align-items: center;
    display: flex;
    gap: 10px;
    min-width: 0;
}

.cshow-avatar {
    align-items: center;
    background: color-mix(in srgb, var(--pnl-amber-primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--pnl-amber-primary) 35%, transparent);
    border-radius: 10px;
    color: var(--pnl-amber-primary);
    display: inline-flex;
    flex: 0 0 40px;
    font-size: 14px;
    font-weight: 800;
    height: 40px;
    justify-content: center;
    position: relative;
}

.cshow-avatar__dot {
    background: var(--pnl-red-primary);
    border: 2px solid var(--cshow-surface);
    border-radius: 50%;
    bottom: -3px;
    height: 11px;
    position: absolute;
    right: -3px;
    width: 11px;
}

.cshow-avatar__dot.is-active {
    background: var(--pnl-green-primary);
}

.cshow-profile__name-wrap {
    min-width: 0;
}

.cshow-profile__name-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cshow-profile__name {
    color: var(--cshow-text);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0;
}

.cshow-profile__meta {
    color: var(--cshow-muted);
    font-size: 11.5px;
    margin: 1px 0 0;
}

.cshow-profile__crumbs a {
    color: var(--pnl-blue-primary);
}

.cshow-profile__crumbs a:hover {
    text-decoration: underline;
}

.cshow-tag {
    background: var(--pnl-control-bg);
    border: 1px solid var(--pnl-border);
    border-radius: 6px;
    color: var(--cshow-muted);
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 7px;
}

.cshow-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cshow-actions form {
    display: inline-flex;
}

.cshow-action {
    align-items: center;
    background: var(--pnl-surface-raised);
    border: 1px solid var(--pnl-border);
    border-radius: 8px;
    color: var(--cshow-text);
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    gap: 5px;
    height: 30px;
    padding: 0 10px;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.cshow-action:hover,
.cshow-action:focus-visible {
    border-color: var(--pnl-amber-primary);
}

.cshow-action--success {
    background: color-mix(in srgb, var(--pnl-green-primary) 10%, transparent);
    border-color: color-mix(in srgb, var(--pnl-green-primary) 40%, transparent);
    color: var(--pnl-green-primary);
}

.cshow-action--info {
    background: color-mix(in srgb, var(--pnl-blue-primary) 10%, transparent);
    border-color: color-mix(in srgb, var(--pnl-blue-primary) 40%, transparent);
    color: var(--pnl-blue-primary);
}

.cshow-action--amber {
    background: color-mix(in srgb, var(--pnl-amber-primary) 10%, transparent);
    border-color: color-mix(in srgb, var(--pnl-amber-primary) 40%, transparent);
    color: var(--pnl-amber-primary);
}

.cshow-action--success:hover,
.cshow-action--info:hover,
.cshow-action--amber:hover {
    border-color: currentColor;
}

.cshow-info {
    border-top: 1px solid var(--pnl-border);
    display: grid;
    gap: 12px 24px;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    margin: 10px 0 0;
    padding-top: 10px;
}

.cshow-info__item {
    min-width: 0;
}

.cshow-info dt {
    color: var(--cshow-muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cshow-info dd {
    color: var(--cshow-text);
    font-size: 13px;
    font-weight: 700;
    margin: 3px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cshow-kpis {
    display: grid;
    gap: 0.875rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cshow-kpi {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0.85rem 1rem;
}

.cshow-kpi__label {
    color: var(--cshow-muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cshow-kpi__value {
    color: var(--cshow-muted);
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.cshow-kpi__value--success { color: var(--pnl-green-primary); }
.cshow-kpi__value--danger { color: var(--pnl-red-primary); }
.cshow-kpi__value--amber { color: var(--pnl-amber-primary); }

.cshow-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
}

.cshow-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1rem 1.25rem;
}

.cshow-card__header {
    align-items: center;
    border-bottom: 1px solid var(--pnl-border);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    padding-bottom: 12px;
}

.cshow-card__title {
    color: var(--cshow-text);
    font-size: 13.5px;
    font-weight: 800;
    margin: 0;
}

.cshow-card__total {
    color: var(--cshow-muted);
    font-size: 12.5px;
}

.cshow-card__total strong {
    color: var(--cshow-text);
}

.cshow-tabs {
    display: flex;
    gap: 8px;
}

.cshow-tab {
    background: var(--pnl-control-bg);
    border: 1px solid var(--pnl-border);
    border-radius: 8px;
    color: var(--cshow-muted);
    font-size: 12.5px;
    font-weight: 700;
    padding: 5px 12px;
    transition: color 150ms ease, border-color 150ms ease;
}

.cshow-tab:hover,
.cshow-tab.is-active {
    background: color-mix(in srgb, var(--pnl-amber-primary) 12%, transparent);
    border-color: color-mix(in srgb, var(--pnl-amber-primary) 45%, transparent);
    color: var(--pnl-amber-primary);
}

.cshow-table-wrap {
    overflow-x: auto;
}

.cshow-table {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 520px;
    width: 100%;
}

.cshow-page .cshow-table thead th {
    background: transparent;
    border-bottom: 1px solid var(--pnl-border);
    color: var(--cshow-muted) !important;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 12px 8px 10px;
    text-align: left;
    text-transform: uppercase;
}

.cshow-page .cshow-table tbody td {
    border-bottom: 1px solid var(--pnl-border);
    color: var(--cshow-muted) !important;
    font-size: 13px;
    padding: 10px 8px;
}

.cshow-page .cshow-table tbody tr:last-child td {
    border-bottom: 0;
}

.cshow-page .cshow-table tbody tr:hover td {
    background: var(--pnl-hover-surface);
}

.cshow-page .cshow-table .is-right { text-align: right; }
.cshow-page .cshow-table .is-center { text-align: center; }

.cshow-page .cshow-table .cshow-table__id {
    color: var(--cshow-text) !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700;
}

.cshow-page .cshow-table .cshow-table__money {
    color: var(--cshow-text) !important;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.cshow-page .cshow-table .cshow-table__empty {
    padding: 1.5rem 8px;
    text-align: center;
}

.cshow-table__view {
    background: var(--pnl-control-bg);
    border: 1px solid var(--pnl-border);
    border-radius: 6px;
    color: var(--cshow-text);
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
}

.cshow-table__view:hover {
    border-color: var(--pnl-amber-primary);
    color: var(--pnl-amber-primary);
}

.cshow-table__note {
    color: var(--cshow-muted);
    font-size: 11.5px;
    margin: 10px 0 0;
}

.cshow-chart {
    margin-top: 10px;
    min-height: 280px;
}

@media (min-width: 768px) {
    .cshow-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .cshow-kpis {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .cshow-grid {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    }
}

body:not(.dark) .cshow-page {
    --cshow-text: #0e1726;
    --cshow-muted: #5b6478;
}

body:not(.dark) .cshow-tag,
body:not(.dark) .cshow-tab,
body:not(.dark) .cshow-table__view,
body:not(.dark) .cshow-action:not(.cshow-action--success):not(.cshow-action--info):not(.cshow-action--amber) {
    background: #f4f5f7;
    border-color: rgba(0, 0, 0, 0.1);
}

body:not(.dark) .cshow-info,
body:not(.dark) .cshow-card__header,
body:not(.dark) .cshow-page .cshow-table thead th,
body:not(.dark) .cshow-page .cshow-table tbody td {
    border-color: rgba(0, 0, 0, 0.08);
}

/* Dashboard Geral: card "Pedidos por Etapa" (linhas em caixas com ponto colorido e número à direita). */
.pnl-stage-card {
    padding: 0.875rem;
}

.pnl-stage-card:hover {
    box-shadow: none;
}

.pnl-stage-card__header {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    margin-bottom: 0.625rem;
}

.pnl-stage-card__title {
    align-items: center;
    color: var(--pnl-text-primary);
    display: flex;
    font-size: 15px;
    font-weight: 800;
    gap: 8px;
    margin: 0;
}

.pnl-stage-card__title svg {
    color: var(--pnl-amber-primary);
}

.pnl-stage-card__total {
    color: var(--pnl-text-secondary);
    font-size: 12.5px;
}

.pnl-stage-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pnl-stage-row {
    align-items: center;
    background: var(--pnl-canvas);
    border: 1px solid var(--pnl-border);
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
}

.pnl-stage-row__label {
    align-items: center;
    color: var(--pnl-text-primary);
    display: flex;
    font-size: 13px;
    font-weight: 500;
    gap: 10px;
}

.pnl-stage-row__dot {
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    height: 9px;
    width: 9px;
}

.pnl-stage-row__dot--danger { background: var(--pnl-red-primary); }
.pnl-stage-row__dot--amber { background: var(--pnl-amber-primary); }
.pnl-stage-row__dot--info { background: var(--pnl-blue-primary); }
.pnl-stage-row__dot--success { background: var(--pnl-green-primary); }

.pnl-stage-row__count {
    color: var(--pnl-text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 14px;
    font-weight: 800;
}

/* Rótulo e número na cor da etapa e na fonte do painel, como a lista "Atenção" do mesmo dashboard. */
.pnl-stage-row__label {
    font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
}

.pnl-stage-row__count {
    font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pnl-stage-row--danger .pnl-stage-row__label,
.pnl-stage-row--danger .pnl-stage-row__count,
body:not(.dark) .pnl-stage-row--danger .pnl-stage-row__label,
body:not(.dark) .pnl-stage-row--danger .pnl-stage-row__count { color: var(--pnl-red-primary); }

.pnl-stage-row--amber .pnl-stage-row__label,
.pnl-stage-row--amber .pnl-stage-row__count,
body:not(.dark) .pnl-stage-row--amber .pnl-stage-row__label,
body:not(.dark) .pnl-stage-row--amber .pnl-stage-row__count { color: var(--pnl-amber-primary); }

.pnl-stage-row--info .pnl-stage-row__label,
.pnl-stage-row--info .pnl-stage-row__count,
body:not(.dark) .pnl-stage-row--info .pnl-stage-row__label,
body:not(.dark) .pnl-stage-row--info .pnl-stage-row__count { color: var(--pnl-blue-primary); }

.pnl-stage-row--success .pnl-stage-row__label,
.pnl-stage-row--success .pnl-stage-row__count,
body:not(.dark) .pnl-stage-row--success .pnl-stage-row__label,
body:not(.dark) .pnl-stage-row--success .pnl-stage-row__count { color: var(--pnl-green-primary); }

body:not(.dark) .pnl-stage-row {
    background: #f4f5f7;
    border-color: rgba(0, 0, 0, 0.08);
}

body:not(.dark) .pnl-stage-card__title,
body:not(.dark) .pnl-stage-row__label,
body:not(.dark) .pnl-stage-row__count {
    color: #0e1726;
}

/* Campos de data (flatpickr do tema, x-user.date-picker): calendário nas cores do painel, âmbar no lugar do verde-água. */
.flatpickr-calendar,
.dark .flatpickr-calendar {
    background: var(--pnl-card-bg);
    border: 1px solid var(--pnl-card-border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
    font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif;
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
    display: none;
}

.flatpickr-calendar .flatpickr-months .flatpickr-month,
.flatpickr-calendar .flatpickr-current-month,
.flatpickr-calendar .flatpickr-months .flatpickr-monthDropdown-months,
.flatpickr-calendar .flatpickr-months input.cur-year,
.dark .flatpickr-calendar .flatpickr-months .flatpickr-monthDropdown-months,
.dark .flatpickr-calendar .flatpickr-months input.cur-year {
    color: var(--pnl-text-primary);
    fill: var(--pnl-text-primary);
    font-weight: 700;
}

.flatpickr-calendar .flatpickr-months .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month,
.dark .flatpickr-calendar .flatpickr-months .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
    background: var(--pnl-card-bg);
}

.flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month svg,
.dark .flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg,
.dark .flatpickr-calendar .flatpickr-months .flatpickr-next-month svg {
    fill: var(--pnl-text-muted);
}

.flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--pnl-amber-primary);
}

.flatpickr-calendar span.flatpickr-weekday {
    color: var(--pnl-text-muted);
    font-weight: 600;
}

.flatpickr-calendar .flatpickr-day,
.dark .flatpickr-calendar .flatpickr-day {
    border-radius: 8px;
    color: var(--pnl-text-primary);
}

.flatpickr-calendar .flatpickr-day:hover,
.flatpickr-calendar .flatpickr-day:focus,
.dark .flatpickr-calendar .flatpickr-day:hover {
    background: var(--pnl-hover-surface);
    border-color: transparent;
}

.flatpickr-calendar .flatpickr-day.prevMonthDay,
.flatpickr-calendar .flatpickr-day.nextMonthDay,
.flatpickr-calendar .flatpickr-day.flatpickr-disabled,
.dark .flatpickr-calendar .flatpickr-day.prevMonthDay,
.dark .flatpickr-calendar .flatpickr-day.nextMonthDay,
.dark .flatpickr-calendar .flatpickr-day.flatpickr-disabled {
    color: var(--pnl-text-muted);
    opacity: 0.45;
}

.flatpickr-calendar .flatpickr-day.today,
.dark .flatpickr-calendar .flatpickr-day.today {
    border-color: var(--pnl-amber-primary);
}

.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.endRange,
.flatpickr-calendar .flatpickr-day.selected:hover,
.dark .flatpickr-calendar .flatpickr-day.selected,
.dark .flatpickr-calendar .flatpickr-day.startRange,
.dark .flatpickr-calendar .flatpickr-day.endRange {
    background: var(--pnl-amber-primary);
    border-color: var(--pnl-amber-primary);
    color: #0e1726;
    font-weight: 700;
}

.flatpickr-calendar .flatpickr-day.inRange,
.dark .flatpickr-calendar .flatpickr-day.inRange {
    background: rgba(245, 158, 11, 0.16);
    border-color: transparent;
    box-shadow: none;
}

body:not(.dark) .flatpickr-calendar {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}

body:not(.dark) .flatpickr-calendar .flatpickr-day,
body:not(.dark) .flatpickr-calendar .flatpickr-current-month,
body:not(.dark) .flatpickr-calendar .flatpickr-months .flatpickr-monthDropdown-months,
body:not(.dark) .flatpickr-calendar .flatpickr-months input.cur-year {
    color: #0e1726;
}

.pnl-employee-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .75rem;
}

@media (max-width: 1150px) {
    .pnl-employee-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .pnl-employee-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    .pnl-employee-metrics {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Campo visível (altInput) desabilitado com o mesmo visual do input original. */
.flatpickr-input.form-input[disabled],
.flatpickr-input.form-input:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}