.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))
}

.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 vristo-static-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 {
    --pnl-card-bg: #ffffff;
    --pnl-card-border: rgba(0, 0, 0, 0.08);
    --pnl-card-bg-nested: #f4f5f7;
}

.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);
}

/* 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-urgent {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    background-color: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.pnl-badge-amber {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    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 {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    background-color: rgba(52, 211, 153, 0.14);
    color: #34d399;
}

.pnl-badge-info {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    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 {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    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 {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    background-color: rgba(226, 160, 63, 0.12);
    color: #e2a03f;
}

.pnl-badge-secondary {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    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 {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    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: 380px;
    background: var(--pnl-card-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: 18px 20px;
    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__close {
    color: #e2a03f;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

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

.pnl-drawer__body {
    padding: 20px;
    overflow-y: auto;
    flex: 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;
}

.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 vristo-static-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
vristo-static-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;
}

/* 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;
}

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;
}