/* ==========================================================================
   ERP WEB PRO — Tema escuro
   --------------------------------------------------------------------------
   Ativado por `data-theme="dark"` no <html>. Como toda a interface usa os
   tokens de public/css/ui/tokens.css, a maior parte das cores muda sozinha;
   aqui ficam (1) os tokens escuros e (2) as exceções para regras legadas do
   AdminLTE/Bootstrap/tema antigo que têm cores fixas com !important.

   Ordem de carregamento: tokens -> base -> layout -> components -> utilities
   -> theme (este arquivo).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
html[data-theme="dark"] {
    color-scheme: dark;

    /* Superfícies */
    --erp-bg: #0b1220;
    --erp-bg-sunken: #070d18;
    --erp-surface: #121a2b;
    --erp-surface-muted: #182234;
    --erp-surface-hover: #1c2740;

    /* Bordas */
    --erp-border: #243146;
    --erp-border-strong: #35475f;
    --erp-divider: #1d293d;

    /* Texto */
    --erp-text: #e9eff9;
    --erp-text-soft: #c8d3e2;
    --erp-text-muted: #9aabc0;
    --erp-text-faint: #74869c;

    /* Ação */
    --erp-primary: #3b82f6;
    --erp-primary-hover: #2f74e8;
    --erp-primary-active: #1d4ed8;
    --erp-primary-soft: rgba(59, 130, 246, 0.16);
    --erp-primary-soft-2: rgba(59, 130, 246, 0.3);

    --erp-success: #34d399;
    --erp-success-hover: #10b981;
    --erp-success-soft: rgba(52, 211, 153, 0.14);

    --erp-warning: #fbbf24;
    --erp-warning-hover: #f59e0b;
    --erp-warning-soft: rgba(251, 191, 36, 0.14);

    --erp-danger: #f87171;
    --erp-danger-hover: #ef4444;
    --erp-danger-soft: rgba(248, 113, 113, 0.14);

    --erp-info: #38bdf8;
    --erp-info-hover: #0ea5e9;
    --erp-info-soft: rgba(56, 189, 248, 0.14);

    --erp-neutral: #94a3b8;
    --erp-neutral-hover: #cbd5e1;
    --erp-neutral-soft: rgba(148, 163, 184, 0.14);

    /* Sombras mais profundas em fundo escuro */
    --erp-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --erp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
    --erp-shadow: 0 2px 4px rgba(0, 0, 0, 0.35), 0 12px 28px -16px rgba(0, 0, 0, 0.7);
    --erp-shadow-lg: 0 8px 16px -8px rgba(0, 0, 0, 0.5), 0 24px 48px -24px rgba(0, 0, 0, 0.8);
    --erp-ring: 0 0 0 3px rgba(59, 130, 246, 0.35);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
html[data-theme="dark"] ::selection {
    background: rgba(59, 130, 246, 0.35);
    color: #f8fbff;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: #33475f;
}

html[data-theme="dark"] a {
    color: #7db2ff;
}

html[data-theme="dark"] a:hover,
html[data-theme="dark"] a:focus {
    color: #a5c8ff;
}

html[data-theme="dark"] code {
    color: #fca5a5;
    background: rgba(248, 113, 113, 0.14);
}

/* --------------------------------------------------------------------------
   3. Shell legado (AdminLTE com cores fixas + !important)
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .skin-blue-light .main-sidebar,
html[data-theme="dark"] .main-sidebar,
html[data-theme="dark"] .sidebar {
    background: var(--erp-surface) !important;
    border-right: 1px solid var(--erp-border) !important;
}

html[data-theme="dark"] .skin-blue-light .sidebar-menu > li > a:hover,
html[data-theme="dark"] .skin-blue-light .sidebar-menu > li.active > a,
html[data-theme="dark"] .skin-blue-light .sidebar-menu > li.menu-open > a {
    color: var(--erp-text) !important;
    background: var(--erp-surface-muted) !important;
}

html[data-theme="dark"] .skin-blue-light .sidebar-menu > li.active > a {
    color: #9cc4ff !important;
    background: var(--erp-primary-soft) !important;
}

html[data-theme="dark"] .skin-blue-light .sidebar-menu > li > .treeview-menu,
html[data-theme="dark"] .sidebar-menu .treeview-menu,
html[data-theme="dark"] .sidebar-menu .treeview-menu > li {
    background: transparent !important;
}

html[data-theme="dark"] .content-wrapper {
    background: var(--erp-bg) !important;
}

html[data-theme="dark"] .main-footer {
    background: transparent !important;
    border-top: 1px solid var(--erp-border) !important;
    color: var(--erp-text-muted) !important;
}

/* --------------------------------------------------------------------------
   4. Componentes legados com fundo branco fixo
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .list-group-item {
    color: var(--erp-text-soft);
    background: var(--erp-surface);
    border-color: var(--erp-divider);
}

html[data-theme="dark"] .list-group-item.active {
    color: var(--erp-primary);
    background: var(--erp-primary-soft);
    border-color: var(--erp-primary-soft-2);
}

html[data-theme="dark"] .modal-content {
    background: var(--erp-surface);
    color: var(--erp-text-soft);
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    border-color: var(--erp-divider);
}

html[data-theme="dark"] .modal-footer {
    background: var(--erp-surface-muted);
}

html[data-theme="dark"] .breadcrumb {
    background: transparent;
}

html[data-theme="dark"] .well,
html[data-theme="dark"] .thumbnail {
    background: var(--erp-surface-muted);
    border-color: var(--erp-border);
}

html[data-theme="dark"] .bg-white {
    background: var(--erp-surface) !important;
    color: var(--erp-text-soft) !important;
}

html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td {
    background: rgba(255, 255, 255, 0.02);
}

html[data-theme="dark"] .table-hover > tbody > tr:hover > td {
    background: var(--erp-surface-hover);
}

html[data-theme="dark"] .dataTables_scrollBody,
html[data-theme="dark"] .dataTables_scrollHead {
    background: var(--erp-surface);
}

html[data-theme="dark"] .datepicker,
html[data-theme="dark"] .daterangepicker {
    background: var(--erp-surface);
    border-color: var(--erp-border);
    color: var(--erp-text-soft);
}

html[data-theme="dark"] .daterangepicker .calendar-table {
    background: var(--erp-surface);
    border-color: var(--erp-border);
}

html[data-theme="dark"] .daterangepicker td.off,
html[data-theme="dark"] .daterangepicker td.off.in-range,
html[data-theme="dark"] .daterangepicker td.off.start-date,
html[data-theme="dark"] .daterangepicker td.off.end-date {
    background: var(--erp-surface-muted);
    color: var(--erp-text-faint);
}

html[data-theme="dark"] .daterangepicker .drp-buttons {
    border-top-color: var(--erp-border);
}

/* SweetAlert (usado em confirmações) */
html[data-theme="dark"] .swal-modal {
    background: var(--erp-surface);
}

html[data-theme="dark"] .swal-title,
html[data-theme="dark"] .swal-text,
html[data-theme="dark"] .swal-content {
    color: var(--erp-text-soft);
}

html[data-theme="dark"] .swal-button--cancel {
    background: var(--erp-surface-muted);
    color: var(--erp-text-soft);
}

/* Editor de texto (summernote / tinyMCE) */
html[data-theme="dark"] .note-editor,
html[data-theme="dark"] .note-editable {
    background: var(--erp-surface) !important;
    color: var(--erp-text-soft) !important;
    border-color: var(--erp-border) !important;
}

html[data-theme="dark"] .dropzone {
    background: var(--erp-surface);
    border-color: var(--erp-border-strong);
}

/* --------------------------------------------------------------------------
   5. Botões sólidos: fundo mais escuro para manter texto branco legível
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-info {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-info:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

html[data-theme="dark"] .btn-success {
    background: #15803d;
    border-color: #15803d;
    color: #fff;
}

html[data-theme="dark"] .btn-success:hover {
    background: #166534;
    border-color: #166534;
}

html[data-theme="dark"] .btn-warning {
    background: #b45309;
    border-color: #b45309;
    color: #fff;
}

html[data-theme="dark"] .btn-warning:hover {
    background: #92400e;
    border-color: #92400e;
}

html[data-theme="dark"] .btn-danger {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
}

html[data-theme="dark"] .btn-danger:hover {
    background: #991b1b;
    border-color: #991b1b;
}

html[data-theme="dark"] .btn.btn-default {
    color: var(--erp-text-soft);
    background: var(--erp-surface);
    border-color: var(--erp-border-strong);
}

/* --------------------------------------------------------------------------
   6. Alertas, etiquetas e avisos
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .alert-success {
    background: rgba(52, 211, 153, 0.12);
    border-color: rgba(52, 211, 153, 0.3);
    border-left-color: var(--erp-success);
    color: #a7f3d0;
}

html[data-theme="dark"] .alert-info {
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.3);
    border-left-color: var(--erp-info);
    color: #bae6fd;
}

html[data-theme="dark"] .alert-warning {
    background: rgba(251, 191, 36, 0.12);
    border-color: rgba(251, 191, 36, 0.3);
    border-left-color: var(--erp-warning);
    color: #fde68a;
}

html[data-theme="dark"] .alert-danger {
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.3);
    border-left-color: var(--erp-danger);
    color: #fecaca;
}

html[data-theme="dark"] .label-default,
html[data-theme="dark"] .badge-default {
    color: var(--erp-text-soft);
    background: var(--erp-neutral-soft);
}

html[data-theme="dark"] .label-primary,
html[data-theme="dark"] .badge-primary {
    color: #9cc4ff;
    background: rgba(59, 130, 246, 0.2);
}

html[data-theme="dark"] .label-success,
html[data-theme="dark"] .badge-success {
    color: #86efac;
    background: rgba(52, 211, 153, 0.18);
}

html[data-theme="dark"] .label-warning,
html[data-theme="dark"] .badge-warning {
    color: #fde68a;
    background: rgba(251, 191, 36, 0.18);
}

html[data-theme="dark"] .label-danger,
html[data-theme="dark"] .badge-danger {
    color: #fecaca;
    background: rgba(248, 113, 113, 0.18);
}

html[data-theme="dark"] .label-info,
html[data-theme="dark"] .badge-info {
    color: #bae6fd;
    background: rgba(56, 189, 248, 0.18);
}

/* Etiquetas com bg-* herdadas do tema antigo */
html[data-theme="dark"] .label.bg-green,
html[data-theme="dark"] .badge.bg-green,
html[data-theme="dark"] .label.bg-light-green,
html[data-theme="dark"] .badge.bg-light-green {
    color: #86efac !important;
    background: rgba(52, 211, 153, 0.18) !important;
}

html[data-theme="dark"] .label.bg-red,
html[data-theme="dark"] .badge.bg-red {
    color: #fecaca !important;
    background: rgba(248, 113, 113, 0.18) !important;
}

html[data-theme="dark"] .label.bg-yellow,
html[data-theme="dark"] .badge.bg-yellow {
    color: #fde68a !important;
    background: rgba(251, 191, 36, 0.18) !important;
}

html[data-theme="dark"] .label.bg-aqua,
html[data-theme="dark"] .badge.bg-aqua,
html[data-theme="dark"] .label.bg-blue,
html[data-theme="dark"] .badge.bg-blue {
    color: #bae6fd !important;
    background: rgba(56, 189, 248, 0.18) !important;
}

/* --------------------------------------------------------------------------
   7. PDV
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .pos-form-actions {
    background: var(--erp-surface) !important;
    border-top-color: var(--erp-border);
}

html[data-theme="dark"] .pos-header {
    background: var(--erp-surface);
    border-bottom-color: var(--erp-border);
}

html[data-theme="dark"] .pos-form-actions #total_payable {
    color: #86efac !important;
    background: rgba(52, 211, 153, 0.14);
    border-color: rgba(52, 211, 153, 0.3);
}

html[data-theme="dark"] .pos-form-actions .pos-express-finalize[data-pay_method="cash"] {
    background: #15803d !important;
    border-color: #15803d !important;
}

/* --------------------------------------------------------------------------
   8. Autenticação
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .erp-auth {
    background: var(--erp-bg);
}

html[data-theme="dark"] .erp-auth__card {
    background: var(--erp-surface);
    border-color: var(--erp-border);
}

html[data-theme="dark"] .erp-auth__main {
    background: var(--erp-bg);
}

html[data-theme="dark"] .erp-auth__top-text {
    color: var(--erp-text-muted);
}

/* --------------------------------------------------------------------------
   9. Elementos de gráficos e mídia
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .apexcharts-text,
html[data-theme="dark"] .apexcharts-legend-text,
html[data-theme="dark"] .apexcharts-title-text {
    fill: var(--erp-text-muted) !important;
    color: var(--erp-text-muted) !important;
}

html[data-theme="dark"] .apexcharts-gridline {
    stroke: var(--erp-divider) !important;
}

/* --------------------------------------------------------------------------
   10. Gráficos (Highcharts) — SVG aceita CSS, então funciona também para
   gráficos já renderizados quando o tema é alternado.
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .highcharts-background,
html[data-theme="dark"] .highcharts-plot-background {
    fill: transparent !important;
}

html[data-theme="dark"] .highcharts-title,
html[data-theme="dark"] .highcharts-subtitle,
html[data-theme="dark"] .highcharts-axis-title {
    fill: var(--erp-text) !important;
}

html[data-theme="dark"] .highcharts-axis-labels text,
html[data-theme="dark"] .highcharts-axis-labels span {
    fill: var(--erp-text-muted) !important;
    color: var(--erp-text-muted) !important;
}

html[data-theme="dark"] .highcharts-legend-item text,
html[data-theme="dark"] .highcharts-legend-item span {
    fill: var(--erp-text-soft) !important;
    color: var(--erp-text-soft) !important;
}

html[data-theme="dark"] .highcharts-legend-item-hidden text {
    fill: var(--erp-text-faint) !important;
}

html[data-theme="dark"] .highcharts-grid-line {
    stroke: var(--erp-divider) !important;
}

html[data-theme="dark"] .highcharts-axis-line,
html[data-theme="dark"] .highcharts-tick {
    stroke: var(--erp-border-strong) !important;
}

html[data-theme="dark"] .highcharts-tooltip-box {
    fill: var(--erp-surface) !important;
    stroke: var(--erp-border) !important;
}

html[data-theme="dark"] .highcharts-tooltip text {
    fill: var(--erp-text-soft) !important;
}

html[data-theme="dark"] .highcharts-no-data text {
    fill: var(--erp-text-muted) !important;
}

/* Barra de rolagem */
html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: transparent;
}

/* --------------------------------------------------------------------------
   11. Correções identificadas na auditoria de contraste do tema escuro
   -------------------------------------------------------------------------- */
/* Menu lateral: cores fixas do skin antigo */
html[data-theme="dark"] .sidebar-menu > li > a,
html[data-theme="dark"] .sidebar-menu > li > a > span,
html[data-theme="dark"] .sidebar-menu > li > a > .pull-right-container,
html[data-theme="dark"] .sidebar-menu .treeview-menu > li > a {
    color: var(--erp-text-soft) !important;
}

html[data-theme="dark"] .sidebar-menu > li.active > a,
html[data-theme="dark"] .sidebar-menu > li.active > a > span,
html[data-theme="dark"] .sidebar-menu > li.active > a > i,
html[data-theme="dark"] .sidebar-menu > li.menu-open > a,
html[data-theme="dark"] .sidebar-menu > li.menu-open > a > span {
    color: #9cc4ff !important;
}

html[data-theme="dark"] .sidebar-menu > li > a > i {
    color: var(--erp-text-faint) !important;
}

html[data-theme="dark"] .sidebar-menu .treeview-menu > li.active > a,
html[data-theme="dark"] .sidebar-menu .treeview-menu > li > a:hover {
    color: #9cc4ff !important;
}

/* Linhas zebradas da tabela (Bootstrap aplica a cor na <tr>) */
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: transparent !important;
}

/* Rodapé */
html[data-theme="dark"] .main-footer {
    background: var(--erp-bg) !important;
    color: var(--erp-text-muted) !important;
}

/* Configurações: painel de abas com fundo branco fixo */
html[data-theme="dark"] .pos-tab-container,
html[data-theme="dark"] .pos-tab {
    background-color: transparent !important;
    border-color: var(--erp-border) !important;
}

/* Cabeçalhos internos de painel que usavam branco */
html[data-theme="dark"] .nav-tabs-custom > .nav-tabs > li.active > a {
    background: var(--erp-surface);
    border-color: transparent;
}

html[data-theme="dark"] .pos-tab-content,
html[data-theme="dark"] .pos-tab-content > .box,
html[data-theme="dark"] .pos-tab .box {
    background-color: transparent !important;
}

/* Botões com classes bg-* antigas: tons escuros para texto branco */
html[data-theme="dark"] .btn.bg-purple,
html[data-theme="dark"] .btn.bg-navy,
html[data-theme="dark"] .btn.bg-teal {
    color: #fff !important;
    background: #1e3a8a !important;
    border-color: #1e3a8a !important;
}

html[data-theme="dark"] .btn.bg-maroon {
    color: #fff !important;
    background: #9f1239 !important;
    border-color: #9f1239 !important;
}

html[data-theme="dark"] .btn.bg-green,
html[data-theme="dark"] .btn.bg-olive {
    color: #fff !important;
    background: #15803d !important;
    border-color: #15803d !important;
}

html[data-theme="dark"] .btn.bg-red {
    color: #fff !important;
    background: #b91c1c !important;
    border-color: #b91c1c !important;
}

html[data-theme="dark"] .btn.bg-yellow,
html[data-theme="dark"] .btn.bg-orange {
    color: #fff !important;
    background: #b45309 !important;
    border-color: #b45309 !important;
}

html[data-theme="dark"] .btn.bg-aqua,
html[data-theme="dark"] .btn.bg-blue,
html[data-theme="dark"] .btn.bg-light-blue {
    color: #fff !important;
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
}

/* PDV: botão de pagamento múltiplo usa --erp-text como fundo (claro no dark) */
html[data-theme="dark"] .pos-form-actions #pos-finalize {
    color: #fff !important;
    background: #334155 !important;
    border-color: #334155 !important;
}

/* Abas internas (AdminLTE .nav-tabs-custom força #444) */
html[data-theme="dark"] .nav-tabs-custom > .nav-tabs > li > a,
html[data-theme="dark"] .nav-tabs > li > a {
    color: var(--erp-text-muted) !important;
}

html[data-theme="dark"] .nav-tabs-custom > .nav-tabs > li.active > a,
html[data-theme="dark"] .nav-tabs > li.active > a {
    color: #9cc4ff !important;
}

/* Abas e painéis que o AdminLTE pinta de branco */
html[data-theme="dark"] .nav-tabs-custom > .tab-content,
html[data-theme="dark"] .tab-content,
html[data-theme="dark"] .nav-tabs-custom > .tab-content > .tab-pane {
    background-color: transparent !important;
}

/* Adornos de input e botões de upload que ficavam brancos */
html[data-theme="dark"] .input-group-addon,
html[data-theme="dark"] .input-group-text {
    background: var(--erp-surface-muted) !important;
    border-color: var(--erp-border-strong) !important;
    color: var(--erp-text-faint) !important;
}

html[data-theme="dark"] .btn-file,
html[data-theme="dark"] .file-input .btn-file {
    background: var(--erp-surface-muted) !important;
    color: var(--erp-text-soft) !important;
    border-color: var(--erp-border-strong) !important;
}