/* ============================================================
   TEMA CENTRALIZADO — Sistema Zeus
   ------------------------------------------------------------
   Mudar o tema = editar SÓ as variáveis aqui em :root.
   No futuro: adicionar mais variáveis (cores de botão, texto,
   bordas, etc) e criar temas alternativos via body.tema-claro,
   body.tema-padrao, etc.

   Tema atual: DARK AZUL
   ============================================================ */

:root {
    /* Fundo principal sistema do body / topo / áreas neutras */
    --bg-body:      #161c32;

    /* Fundo da grade tabela de dados é do menu (DataTable wrapper, processing, etc) */
    --bg-datagrid:  #1d213a;

    /* Cor de destaque contorno da tabela "global" (rodapés de totais, badges fortes) */
    --accent-global: #242b48;

    /* Zebra — alternância ao redor de --bg-datagrid pra dar relevo:
       odd (ímpar) levemente mais escura, par (par) levemente mais clara. */
    --bg-zebra-odd: #181d34;/*não esta sendo rodado*/
    --bg-zebra:     #1f253f;

    /* Cabeçalho (thead) de todas as tabelas */
    --bg-thead:     #232a47;

    /* Rodapé (tfoot) das tabelas padrão (não-financeiras) */
    --bg-tfoot:     #3a4570;

    /* Inputs (modais, swal, filtros, create) */
    --bg-input:        rgb(20, 22, 31); /* fundo padrão do input */
    --bg-input-focus:  rgb(10, 10, 10); /* fundo ao receber foco */
    --border-input:    #3a4570;         /* borda padrão do input */
    --border-focus:    #007bff;         /* borda azul de foco (consistente em todo o sistema) */

    /* Botões interativos genéricos (paginação, etc) */
    --bg-btn:          #3a4570;
    --bg-btn-hover:    #4a5685;
    --border-btn:      #4a5685;

    /* Menus dropdown (perfil do usuário no topo, submenus laterais) */
    --bg-menu:         #232a47;

    /* Menu lateral (.zxv) — pode ajustar sem afetar tabelas */
    --bg-menu-lateral: #1d213a;

    /* Caixa do filtro (.mostraFiltro / fieldset / .caixafield / .window) */
    --bg-filtro:       #232a47;

    /* Borda global — utility .border, fieldsets, mostraFiltro, caixafield, etc */
    --border-global:   #3a4570;

    /* Ícones de ação na tabela (.btn-icon) */
    --icon-delete:        #e74c3c;  /* vermelho — excluir */
    --icon-delete-hover:  #c0392b;
    --icon-edit:          #2ecc71;  /* verde — editar */
    --icon-edit-hover:    #27ae60;
    --icon-entrada:       #3498db;  /* azul — renovar/histórico */
    --icon-entrada-hover: #2980b9;
    --icon-alert:         #f39c12;  /* laranja — alerta/sino */
    --icon-alert-hover:   #e67e22;

    /* Tipografia de modais de informação (read-only — ex: #simpleModal) */
    --text-modal-label:   #d4af37;  /* dourado champanhe — rótulos */
    --text-modal-value:   #cfd6e3;  /* branco-azulado suave — valores */

    /* ──────── BOTÕES ────────────────────────────────────────────
       TODOS os botões compartilham --bg-btn no fundo e --border-btn na borda.
       Trocar essas duas variáveis muda TODOS os botões do sistema de uma vez.
       Os hovers são SEMÂNTICOS (cor forte por ação): verde=salvar,
       amarelo=cancelar, vermelho=excluir. */

    /* Hovers semânticos — tons suaves que harmonizam com o tema escuro */
    --btn-hover-salvar:   #52a874;   /* verde suave    — .btn-roxo / Confirm OK */
    --btn-hover-cancelar: #d4a418;   /* amarelo mostarda — .btn-laranja / Cancel */
    --btn-hover-excluir:  #c75c52;   /* vermelho coral  — .btn-vermelho / Confirm destrutivo */
    --btn-hover-info:     #4a8fbf;   /* azul suave     — .btn-azul */
    --btn-hover-padrao:   #c8543b;   /* laranja-vermelho suave — .btn-padrao */

    /* Estado hover/focus dos botões — texto, borda interna e ring externo */
    --btn-hover-text:     #000;                  /* cor do texto no hover */
    --btn-hover-border:   #000;                  /* borda interna preta no hover */
    --btn-hover-ring:     var(--border-focus);   /* anel azul externo no hover (box-shadow) */

    /* Options de <select> (dropdown aberto) */
    --bg-option:          var(--bg-input);       /* fundo padrão da option */
    --text-option:        #fff;                  /* texto padrão da option */
    --bg-option-hover:    var(--border-focus);   /* fundo ao passar mouse / selecionado */
    --text-option-hover:  #fff;                  /* texto ao passar mouse */

    /* Toggle (switch) — Status / Codigo / etc */
    --toggle-on:          #6d9e6d;               /* verde quando ativo */

    /* Botão da tela de login */
    --bg-login-btn:       #6d9e6d;               /* fundo do botão entrar (legado) */

    /* ──────── PALETA DA TELA DE LOGIN (azul-noite + ciano lightning) ──────
       Tom dominante extraído da imagem do Zeus (fundo escuro azulado),
       com destaque ciano dos raios pra acentos. Estas vars são lidas
       APENAS dentro de .base-login (ver override em login.blade.php).
       Mudar AQUI muda a paleta inteira do login de uma vez. */
    /* ───────── PALETA TELA DE LOGIN — GLASS DARK + DOURADO ─────────
       Combina com a imagem tela_login.svg: céu noturno preto + raio dourado
       Zeus + chamas. Preto translúcido faz "glass" sobre o SVG e o dourado
       combina com a marca/raio do Zeus. */
    --login-bg-btn:          rgba(0, 0, 0, .40);           /* preto translúcido — cor base */
    --login-bg-input:        var(--login-bg-btn);          /* IDÊNTICO ao botão */
    --login-bg-input-focus:  rgba(0, 0, 0, .55);           /* mais sólido no foco — legibilidade */
    --login-border-input:    rgba(212, 175, 55, .50);      /* borda dourada translúcida (Zeus) */
    --login-border-focus:    var(--zeus-gold);             /* dourado champanhe sólido no foco */

    --login-border-btn:      rgba(212, 175, 55, .50);      /* mesma borda dourada do input */
    --login-btn-hover-bg:    rgba(212, 175, 55, 0.30);     /* dourado translúcido 30% no hover */
    --login-btn-hover-text:  #fff;                         /* branco — legível sobre dourado translúcido */

    --login-text-link:       #ffd54f;                      /* link dourado claro pra contrastar */
    --login-text-label:      #f5e6c4;                      /* label dourado-cream (warm white) */

    /* Ícones SVG do topo de cada módulo (.bg-title .icon) — identidade visual */
    --icon-modulo-cadastro:    #A383FF;          /* roxo     — Cadastro (Cliente/Plano/etc) */
    --icon-modulo-venda:       #F66648;          /* laranja  — Venda */
    --icon-modulo-compra:      #FDFF83;          /* amarelo  — Compra */
    --icon-modulo-estoque:     #DC6FEE;          /* rosa     — Estoque */
    --icon-modulo-financeiro:  #03DA73;          /* verde    — Financeiro */
    --icon-modulo-pdv:         #3ada03;          /* verde claro — PDV */
    --icon-modulo-loja:        #f78527;          /* laranja  — Loja */
    --icon-modulo-producao:    #8AC6E9;          /* azul claro — Produção */

    /* Cores de texto (uso geral) */
    --text-light:         #fff;                  /* texto branco principal */
    --text-muted:         #ddd;                  /* texto cinza claro (labels, secundário) */
    --text-link:          var(--btn-hover-salvar); /* links e ações destacadas */

    /* Tela de login (fundo de partículas + card glass) */
    --bg-login-gradient:  linear-gradient(135deg, #0f0c29 0%, #1a1a4e 50%, #24243e 100%);
    /* Card de login: azul cerúleo translúcido (extraído do fundo do vídeo Zeus,
       tom mais vivo/saturado que combina com os raios ciano).
       ┌──────────────────────────────────────────────────────────┐
       │  AJUSTE A TRANSPARÊNCIA → último número (0.0 a 1.0):     │
       │    1.0   = 100% sólido (não vê o vídeo atrás)            │
       │    0.85  = atual (vê levemente o vídeo)                  │
       │    0.70  = mais transparente (vídeo bem visível)         │
       │    0.50  = bem transparente (texto começa a perder leg.) │
       └──────────────────────────────────────────────────────────┘ */
    --bg-card-glass:      rgba(26, 61, 95, 0.85);     /* #1A3D5F @ 85% — azul cerúleo */

    /* Alertas / mensagens de erro */
    --bg-alert-error:     rgba(220, 53, 69, 0.15);
    --border-alert-error: rgba(220, 53, 69, 0.5);
    --text-alert-error:   #f87171;

    /* Partículas do fundo da tela de login (lidas via JS em login.blade.php) */
    --particles-color:        #ffffff;
    --particles-line-color:   #87e9a2;

    /* Animação do Zeus na tela de login (foto + glow + sparks) */
    --zeus-gold:              #d4af37;          /* dourado champanhe */
    --zeus-glow:              rgba(212, 175, 55, .55);
    --zeus-bolt-color:        #4dd0ff;          /* azul-elétrico dos raios */
    --zeus-bolt-glow:         rgba(77, 208, 255, .7);
}

/* ============================================================
   TEMA CLARO — Override das variáveis acima.
   ------------------------------------------------------------
   Ativa adicionando classe `tema-claro` no <html> (via tema.js).
   Estratégia: redefinir as mesmas variáveis com tons claros
   mantendo a SEMÂNTICA (botão hover continua verde p/ salvar etc).

   Login/Esqueci/Redefinir NÃO seguem este tema — eles têm vídeo
   Zeus dourado de fundo e usam paleta própria (--login-*).
   ============================================================ */
html.tema-claro {
    /* Fundos */
    --bg-body:           #e2e8f0;            /* slate-200 — canvas com mais contraste pro menu gelo */
    --bg-datagrid:       #f5f7fa;            /* gelo — mesma cor do menu lateral pra uniformidade */
    --accent-global:     #d8dee9;
    --bg-zebra-odd:      #f5f8fc;            /* zebra ímpar (mais clara) */
    --bg-zebra:          #ffffff;            /* zebra par (branca) */
    --bg-thead:          #dfe6f0;            /* cabeçalho das tabelas */
    --bg-tfoot:          #c8d1e0;            /* rodapé das tabelas */

    /* Inputs */
    --bg-input:          #ffffff;
    --bg-input-focus:    #f0f6fd;
    --border-input:      #c5cbd6;
    --border-focus:      #007bff;            /* azul de foco — mesmo do dark p/ consistência */

    /* Botões */
    --bg-btn:            #e3e8f0;
    --bg-btn-hover:      #d4dae3;
    --border-btn:        #b8c0cc;

    /* Menus dropdown + filtros */
    --bg-menu:           #ffffff;
    --bg-filtro:         #f5f8fc;

    /* Menu lateral (.zxv) — tom gelo suave, não branco puro
       (descansa a vista e harmoniza com --bg-body) */
    --bg-menu-lateral:   #f5f7fa;

    /* Borda global */
    --border-global:     #d4dae3;

    /* Ícones de ação — mesmas cores semânticas (escurecidas levemente p/ contraste em branco) */
    --icon-delete:        #d63031;
    --icon-delete-hover:  #a52a2a;
    --icon-edit:          #27ae60;
    --icon-edit-hover:    #1e8449;
    --icon-entrada:       #2980b9;
    --icon-entrada-hover: #1f618d;
    --icon-alert:         #e67e22;
    --icon-alert-hover:   #ca6f1e;

    /* Modal info (label dourado + valor) — escurece p/ ler em fundo claro */
    --text-modal-label:   #8b6914;            /* dourado escurecido */
    --text-modal-value:   #1a2332;

    /* Hovers semânticos dos botões — texto branco fica melhor em fundo colorido */
    --btn-hover-text:     #fff;
    --btn-hover-border:   #fff;

    /* Options de <select> */
    --bg-option:          #ffffff;
    --text-option:        #1a2332;
    --bg-option-hover:    var(--border-focus);
    --text-option-hover:  #fff;

    /* Cores de texto — invertem (escuro em fundo claro) */
    --text-light:         #1a2332;            /* "light" agora é o texto principal escuro */
    --text-muted:         #5a6478;
    --text-link:          var(--btn-hover-salvar);

    /* Partículas mais visíveis em fundo claro */
    --particles-color:        #007bff;

    /* Ícones SVG dos módulos — versões mais escuras/saturadas pra ler em fundo branco.
       (As do dark são pastéis claras, perdem força em fundo claro.) */
    --icon-modulo-cadastro:    #6f42c1;   /* roxo profundo */
    --icon-modulo-venda:       #d63031;   /* vermelho-laranja */
    --icon-modulo-compra:      #b8860b;   /* dourado escuro (era amarelo claro) */
    --icon-modulo-estoque:     #b333c9;   /* magenta */
    --icon-modulo-financeiro:  #16a05a;   /* verde escuro */
    --icon-modulo-pdv:         #2e8b15;   /* verde médio */
    --icon-modulo-loja:        #cc6500;   /* laranja queimado */
    --icon-modulo-producao:    #1f7eb2;   /* azul aço */
}

/* ═══════════════════════════════════════════════════════════════════
   PATCHES TEMA CLARO — Itens que precisam ajuste fino além das vars
   ───────────────────────────────────────────────────────────────────
   A maioria das cores agora usa var(--text-light) (#fff em dark,
   #1a2332 em claro). Esta seção só ajusta o que NÃO é controlado
   automaticamente pelas vars (sombras, opacidades, bordas raras).
   ═══════════════════════════════════════════════════════════════════ */

html.tema-claro body { background: var(--bg-body); color: var(--text-light); }
html.tema-claro .conteudo { background: var(--bg-body); }

/* Sidebar ganha sombra suave em fundo claro pra demarcar a borda */
html.tema-claro .menu-lateral { box-shadow: 0 0 12px rgba(0, 0, 0, .08); }

/* Ícones SVG genéricos do menu (stroke hardcoded em style.css L113-114) */
html.tema-claro .icon { stroke: var(--text-light) !important; }
html.tema-claro .icon path { stroke: var(--text-light) !important; }

/* Bordas de separadores entre submenus precisam ficar visíveis */
html.tema-claro .submenu > ul > li,
html.tema-claro .submenu .subcat ul li { border-bottom-color: var(--border-global); }

/* ───────────────────────────────────────────────────────────────────
   DASH CARDS no tema claro — design moderno tipo Stripe/Linear:
   fundo branco neutro + faixa colorida na BORDA ESQUERDA + texto escuro.
   Cada variante (dash-azul, dash-vermelho, etc) só muda --card-accent.
   ─────────────────────────────────────────────────────────────────── */

/* Base — substitui gradiente colorido por bg branco + stripe */
html.tema-claro .dash-card,
html.tema-claro .dash-card-wide,
html.tema-claro .Venda.home .dash-card,
html.tema-claro .Venda.home .dash-card-wide {
    background: var(--bg-datagrid) !important;
    color: var(--text-light) !important;
    border-left: 5px solid var(--card-accent, #94a3b8);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08) !important;
}
html.tema-claro .dash-card:hover,
html.tema-claro .dash-card-wide:hover,
html.tema-claro .Venda.home .dash-card:hover,
html.tema-claro .Venda.home .dash-card-wide:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, .12) !important;
}

/* Variantes — cada uma só define a cor da listra (--card-accent) */
html.tema-claro .dash-azul,
html.tema-claro .Venda.home .dash-azul,
html.tema-claro .dash-azul-saldo,
html.tema-claro .Venda.home .dash-azul-saldo            { --card-accent: #2563eb; }   /* azul */
html.tema-claro .dash-vermelho,
html.tema-claro .Venda.home .dash-vermelho,
html.tema-claro .dash-vermelho-saldo,
html.tema-claro .Venda.home .dash-vermelho-saldo        { --card-accent: #dc2626; }   /* vermelho */
html.tema-claro .dash-amarelo,
html.tema-claro .Venda.home .dash-amarelo               { --card-accent: #d97706; }   /* âmbar */
html.tema-claro .dash-verde-ativo,
html.tema-claro .Venda.home .dash-verde-ativo,
html.tema-claro .dash-verde-fat,
html.tema-claro .Venda.home .dash-verde-fat             { --card-accent: #16a34a; }   /* verde */
html.tema-claro .dash-rosa,
html.tema-claro .Venda.home .dash-rosa                  { --card-accent: #db2777; }   /* rosa-magenta */
html.tema-claro .dash-laranja-venc,
html.tema-claro .Venda.home .dash-laranja-venc          { --card-accent: #ea580c; }   /* laranja escuro */
html.tema-claro .dash-laranja,
html.tema-claro .Venda.home .dash-laranja               { --card-accent: #f97316; }   /* laranja */
html.tema-claro .dash-roxo,
html.tema-claro .Venda.home .dash-roxo                  { --card-accent: #7c3aed; }   /* roxo */
html.tema-claro .dash-laranja-vencidas,
html.tema-claro .Venda.home .dash-laranja-vencidas      { --card-accent: #be185d; }   /* magenta escuro */

/* Títulos das wide cards (ex: "Vence Hoje", "Painel Financeiro") — preto sólido */
html.tema-claro .dash-card-wide .titulo-caixa,
html.tema-claro .Venda.home .dash-card-wide .titulo-caixa {
    color: var(--text-light) !important;
    font-weight: 700;
}

/* Valores (h1 e h4) — TODOS na cor da listra do card pra destaque visual.
   Vale pros R$ X,XX dos cards financeiros (h4) e pros contadores (h1). */
html.tema-claro .dash-card h1,
html.tema-claro .dash-card h4,
html.tema-claro .dash-card-wide .grid-item h1,
html.tema-claro .Venda.home .dash-card h1,
html.tema-claro .Venda.home .dash-card h4,
html.tema-claro .Venda.home .dash-card-wide .grid-item h1 {
    color: var(--card-accent, var(--text-light)) !important;
    font-weight: 700;
}
/* Small (rótulos / títulos secundários) — preto sólido pra contraste forte em fundo branco */
html.tema-claro .dash-card small,
html.tema-claro .dash-card .dash-sub,
html.tema-claro .dash-card-wide .grid-item small,
html.tema-claro .Venda.home .dash-card small,
html.tema-claro .Venda.home .dash-card-wide .grid-item small {
    color: var(--text-light) !important;
    font-weight: 600;
}

/* Variantes de card pequeno (dash-azul, dash-vermelho, etc) — valor h1 usa
   a cor da LISTRA esquerda (--card-accent) pra dar identidade visual. */
html.tema-claro .Venda.home .dash-azul       h1,
html.tema-claro .Venda.home .dash-vermelho   h1,
html.tema-claro .Venda.home .dash-amarelo    h1,
html.tema-claro .Venda.home .dash-verde-ativo h1,
html.tema-claro .Venda.home .dash-laranja-venc .grid-item h1,
html.tema-claro .Venda.home .dash-laranja      .grid-item h1,
html.tema-claro .Venda.home .dash-verde-fat    .grid-item h1,
html.tema-claro .Venda.home .dash-roxo         .grid-item h1 {
    color: var(--card-accent, var(--text-light)) !important;
}

/* Ícones do header do card herdam a cor accent (visual identidade) */
html.tema-claro .dash-card .dash-icon,
html.tema-claro .dash-card-wide .dash-icon,
html.tema-claro .Venda.home .dash-card .dash-icon,
html.tema-claro .Venda.home .dash-card-wide .dash-icon {
    color: var(--card-accent, var(--text-muted)) !important;
}



/* Caixas escuras dentro dos cards-wide (Saldos por banco, Vence Hoje, Top 5,
   Alertas, etc) — usa --bg-body (mais escuro que o card gelo) pra criar
   contraste visível dentro do card. */
html.tema-claro .dash-card-wide div[style*="background:rgba(0,0,0"] {
    background: var(--bg-body) !important;
    border: 1px solid var(--border-global);
    border-radius: 8px;
}

/* Grid-items internos (caixinhas das cards Vencimento próximos 3 dias, Recarga 3 dias) */
html.tema-claro .dash-card-wide .grid-item,
html.tema-claro .Venda.home .dash-card-wide .grid-item {
    background: var(--bg-body) !important;
    border: 1px solid var(--border-global);
    border-radius: 8px;
}
/* Todos os textos internos (table, td, span, div) na cor da listra do card */
html.tema-claro .dash-card-wide div[style*="background:rgba(0,0,0"] table,
html.tema-claro .dash-card-wide div[style*="background:rgba(0,0,0"] td,
html.tema-claro .dash-card-wide div[style*="background:rgba(0,0,0"] tr,
html.tema-claro .dash-card-wide div[style*="background:rgba(0,0,0"] span,
html.tema-claro .dash-card-wide div[style*="background:rgba(0,0,0"] > div,
html.tema-claro .dash-card-wide div[style*="background:rgba(0,0,0"] > div > div {
    color: var(--card-accent, var(--text-light)) !important;
    border-bottom-color: var(--border-global) !important;
    border-top-color: var(--border-global) !important;
}

/* Gráficos (.dash-chart) — mesmo padrão: bg gelo + listra colorida + relevo interno */
html.tema-claro .Venda.home .dash-chart,
html.tema-claro .dash-chart {
    background: var(--bg-datagrid) !important;
    border: 1px solid var(--border-global) !important;
    border-left: 5px solid var(--card-accent, #94a3b8) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08) !important;
    padding: 14px !important;
}

/* Canvas interno do gráfico — relevo (área embutida) com bg mais escuro
   pra destacar a área de desenho do chart dentro do card gelo. */
html.tema-claro .Venda.home .dash-chart canvas,
html.tema-claro .dash-chart canvas {
    background: var(--bg-body) !important;
    border: 1px solid var(--border-global);
    border-radius: 8px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .06);
    padding: 8px;
    box-sizing: border-box;
}

/* Títulos dos gráficos (.tabela-responsiva .h5) e títulos genéricos do dashboard */
html.tema-claro .Venda.home .tabela-responsiva .h5,
html.tema-claro .tabela-responsiva .h5,
html.tema-claro .tabela-responsiva span.h5,
html.tema-claro .Venda.home .tabela-responsiva span.h5,
html.tema-claro .dash-title h1,
html.tema-claro .Venda.home .dash-title h1 {
    color: var(--text-light) !important;
}
/* Ícone SVG dentro dos títulos dos gráficos (usa stroke="currentColor") */
html.tema-claro .tabela-responsiva .h5 .icon,
html.tema-claro .tabela-responsiva .h5 .icon path {
    stroke: var(--text-light) !important;
    color: var(--text-light) !important;
}
html.tema-claro .Venda.home .dash-chart-verde,
html.tema-claro .dash-chart-verde         { --card-accent: #16a34a; }
html.tema-claro .Venda.home .dash-chart-vermelho,
html.tema-claro .dash-chart-vermelho      { --card-accent: #dc2626; }
html.tema-claro .Venda.home .dash-chart-roxo,
html.tema-claro .dash-chart-roxo          { --card-accent: #7c3aed; }
html.tema-claro .Venda.home .dash-chart-amarelo,
html.tema-claro .dash-chart-amarelo       { --card-accent: #d97706; }

/* Modais — usam --bg-thead por padrão; aqui forçam --bg-datagrid (gelo)
   pra ficar uniforme com cards e frame-form no tema claro. */
html.tema-claro .modal-cadastro-rapido .modal-content,
html.tema-claro #simpleModal .modal-content,
html.tema-claro .modal-plano-tabela .modal-content {
    background-color: var(--bg-datagrid) !important;
}

/* ─── Canvas interno dos gráficos no TEMA ESCURO (default) ───
   Adiciona o card interno (área embutida) que os outros temas já têm.
   Bg mais escuro que o card + leve sombra inset → efeito de profundidade. */
.Venda.home .dash-chart canvas,
.dash-chart canvas {
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35);
    padding: 8px;
    box-sizing: border-box;
}
.Venda.home .dash-chart,
.dash-chart {
    padding: 14px !important;
}

/* ════════════════════════════════════════════════════════════════════
   TEMA ÔNIX — Variante DARK do tema escuro com cards no estilo flat
   ────────────────────────────────────────────────────────────────────
   Igual ao tema escuro padrão (mantém todas as vars dark), MAS:
   - Cards usam visual "white+stripe" (estilo Stripe/Linear) em dark
   - Borda esquerda colorida, bg neutro, texto branco
   ════════════════════════════════════════════════════════════════════ */

/* Cards básicos e wide — bg neutro dark + listra colorida à esquerda */
html.tema-onix .dash-card,
html.tema-onix .dash-card-wide,
html.tema-onix .Venda.home .dash-card,
html.tema-onix .Venda.home .dash-card-wide {
    background: var(--bg-thead) !important;
    color: var(--text-light) !important;
    border-left: 5px solid var(--card-accent, #94a3b8);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .25) !important;
}
html.tema-onix .dash-card:hover,
html.tema-onix .dash-card-wide:hover,
html.tema-onix .Venda.home .dash-card:hover,
html.tema-onix .Venda.home .dash-card-wide:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, .35) !important;
}

/* Variantes — mesmas cores accent do tema claro */
html.tema-onix .dash-azul,
html.tema-onix .Venda.home .dash-azul,
html.tema-onix .dash-azul-saldo,
html.tema-onix .Venda.home .dash-azul-saldo            { --card-accent: #2563eb; }
html.tema-onix .dash-vermelho,
html.tema-onix .Venda.home .dash-vermelho,
html.tema-onix .dash-vermelho-saldo,
html.tema-onix .Venda.home .dash-vermelho-saldo        { --card-accent: #dc2626; }
html.tema-onix .dash-amarelo,
html.tema-onix .Venda.home .dash-amarelo               { --card-accent: #d97706; }
html.tema-onix .dash-verde-ativo,
html.tema-onix .Venda.home .dash-verde-ativo,
html.tema-onix .dash-verde-fat,
html.tema-onix .Venda.home .dash-verde-fat             { --card-accent: #16a34a; }
html.tema-onix .dash-rosa,
html.tema-onix .Venda.home .dash-rosa                  { --card-accent: #db2777; }
html.tema-onix .dash-laranja-venc,
html.tema-onix .Venda.home .dash-laranja-venc          { --card-accent: #ea580c; }
html.tema-onix .dash-laranja,
html.tema-onix .Venda.home .dash-laranja               { --card-accent: #f97316; }
html.tema-onix .dash-roxo,
html.tema-onix .Venda.home .dash-roxo                  { --card-accent: #7c3aed; }
html.tema-onix .dash-laranja-vencidas,
html.tema-onix .Venda.home .dash-laranja-vencidas      { --card-accent: #be185d; }

/* Títulos dos wide cards — texto branco */
html.tema-onix .dash-card-wide .titulo-caixa,
html.tema-onix .Venda.home .dash-card-wide .titulo-caixa {
    color: var(--text-light) !important;
    font-weight: 700;
}

/* Valores h1/h4 — cor da listra do card (igual claro) */
html.tema-onix .dash-card h1,
html.tema-onix .dash-card h4,
html.tema-onix .dash-card-wide .grid-item h1,
html.tema-onix .Venda.home .dash-card h1,
html.tema-onix .Venda.home .dash-card h4,
html.tema-onix .Venda.home .dash-card-wide .grid-item h1 {
    color: var(--card-accent, var(--text-light)) !important;
    font-weight: 700;
}
html.tema-onix .Venda.home .dash-azul       h1,
html.tema-onix .Venda.home .dash-vermelho   h1,
html.tema-onix .Venda.home .dash-amarelo    h1,
html.tema-onix .Venda.home .dash-verde-ativo h1,
html.tema-onix .Venda.home .dash-laranja-venc .grid-item h1,
html.tema-onix .Venda.home .dash-laranja      .grid-item h1,
html.tema-onix .Venda.home .dash-verde-fat    .grid-item h1,
html.tema-onix .Venda.home .dash-roxo         .grid-item h1 {
    color: var(--card-accent, var(--text-light)) !important;
}

/* Small (labels) — cinza claro suave */
html.tema-onix .dash-card small,
html.tema-onix .dash-card .dash-sub,
html.tema-onix .dash-card-wide .grid-item small,
html.tema-onix .Venda.home .dash-card small,
html.tema-onix .Venda.home .dash-card-wide .grid-item small {
    color: var(--text-muted) !important;
    font-weight: 600;
}

/* Ícone do card — cor da listra (identidade visual) */
html.tema-onix .dash-card .dash-icon,
html.tema-onix .dash-card-wide .dash-icon,
html.tema-onix .Venda.home .dash-card .dash-icon,
html.tema-onix .Venda.home .dash-card-wide .dash-icon {
    color: var(--card-accent, var(--text-muted)) !important;
}

/* Grid-items internos (caixinhas dentro dos cards largos) */
html.tema-onix .dash-card-wide .grid-item,
html.tema-onix .Venda.home .dash-card-wide .grid-item {
    background: var(--bg-body) !important;
    border: 1px solid var(--border-global);
    border-radius: 8px;
}

/* Caixas escuras com overlay (Saldos por banco, Vence Hoje, etc) */
html.tema-onix .dash-card-wide div[style*="background:rgba(0,0,0"] {
    background: var(--bg-body) !important;
    border: 1px solid var(--border-global);
    border-radius: 8px;
}
html.tema-onix .dash-card-wide div[style*="background:rgba(0,0,0"] table,
html.tema-onix .dash-card-wide div[style*="background:rgba(0,0,0"] td,
html.tema-onix .dash-card-wide div[style*="background:rgba(0,0,0"] tr,
html.tema-onix .dash-card-wide div[style*="background:rgba(0,0,0"] span,
html.tema-onix .dash-card-wide div[style*="background:rgba(0,0,0"] > div,
html.tema-onix .dash-card-wide div[style*="background:rgba(0,0,0"] > div > div {
    color: var(--card-accent, var(--text-light)) !important;
    border-bottom-color: var(--border-global) !important;
    border-top-color: var(--border-global) !important;
}

/* Gráficos (.dash-chart) — bg neutro + listra colorida */
html.tema-onix .Venda.home .dash-chart,
html.tema-onix .dash-chart {
    background: var(--bg-thead) !important;
    border: 1px solid var(--border-global) !important;
    border-left: 5px solid var(--card-accent, #94a3b8) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .25) !important;
    padding: 14px !important;
}
html.tema-onix .Venda.home .dash-chart canvas,
html.tema-onix .dash-chart canvas {
    background: var(--bg-body) !important;
    border: 1px solid var(--border-global);
    border-radius: 8px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .15);
    padding: 8px;
    box-sizing: border-box;
}
html.tema-onix .Venda.home .dash-chart-verde,
html.tema-onix .dash-chart-verde         { --card-accent: #16a34a; }
html.tema-onix .Venda.home .dash-chart-vermelho,
html.tema-onix .dash-chart-vermelho      { --card-accent: #dc2626; }
html.tema-onix .Venda.home .dash-chart-roxo,
html.tema-onix .dash-chart-roxo          { --card-accent: #7c3aed; }
html.tema-onix .Venda.home .dash-chart-amarelo,
html.tema-onix .dash-chart-amarelo       { --card-accent: #d97706; }