/* ================================================
   TEMA COMERC ALTERNÁVEL (claro = default / escuro via html[data-theme="dark"])
   Identidade do relatório + paleta amigável a daltônicos (Okabe-Ito nos gráficos)
   Carregado por último (zz_) — redefine o design system quando dark.
   ================================================ */

html[data-theme="dark"] {
  --comerc-green: #a4ce4e;
  --comerc-green-dark: #7bb43f;
  --comerc-green-light: #b5e856;
  --comerc-green-lighter: rgba(164, 206, 78, .18);
  --comerc-dark-green: #34c06a;
  --comerc-light-green: #2fb39a;

  --comerc-black: #eaf3ec;            /* "texto forte" vira tinta clara */
  --comerc-dark-gray: #cfe0d3;
  --comerc-gray: #9bb3a5;
  --comerc-gray-light: #6f8a7c;
  --comerc-light-gray: #26392e;       /* bordas */
  --comerc-very-light: #172a20;       /* superfícies alternadas */
  --comerc-white: #13201a;            /* superfícies principais */

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .35);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .4);
  --shadow-lg: 0 8px 20px rgba(0, 0, 0, .45);
  --shadow-xl: 0 12px 28px rgba(0, 0, 0, .5);

  --theme-bg: #0c130f;
  --theme-panel: #13201a;
  --theme-panel2: #172a20;
  --theme-line: #26392e;
  --theme-ink: #eaf3ec;
  --theme-mut: #9bb3a5;
  --theme-dim: #6f8a7c;
}

/* tokens do tema CLARO (mesma identidade do relatório, em cores claras) */
:root {
  --theme-bg: #f2f5f0;
  --theme-panel: #ffffff;
  --theme-panel2: #f4f7f2;
  --theme-line: #dde5d8;
  --theme-ink: #16241b;
  --theme-mut: #5d6f63;
  --theme-dim: #8da294;
  --theme-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}

/* ---------- casca CLARA (default): glow verde suave + superfícies refinadas */
html:not([data-theme="dark"]), html:not([data-theme="dark"]) body {
  background:
    radial-gradient(1100px 520px at 82% -8%, rgba(148, 214, 0, .10), transparent 60%),
    radial-gradient(900px 480px at -5% 4%, rgba(47, 179, 154, .07), transparent 55%),
    var(--theme-bg) !important;
  background-attachment: fixed !important;
  color: var(--theme-ink);
}
html:not([data-theme="dark"]) .content-card,
html:not([data-theme="dark"]) .card,
html:not([data-theme="dark"]) .stat-card {
  background: linear-gradient(180deg, #ffffff, #fcfdfb) !important;
  border: 1px solid var(--theme-line) !important;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(22, 36, 27, .06);
}
html:not([data-theme="dark"]) .stat-card h3,
html:not([data-theme="dark"]) .stat-card .h3 {
  color: #6BA800 !important; font-family: var(--theme-serif);
}
html:not([data-theme="dark"]) .text-muted { color: var(--theme-mut) !important; }
html:not([data-theme="dark"]) hr { border-color: var(--theme-line); opacity: 1; }
html:not([data-theme="dark"]) .theme-table .dash-spreadsheet-container td {
  background-color: var(--theme-panel); color: var(--theme-ink);
  border-color: var(--theme-line);
}
html:not([data-theme="dark"]) .theme-table .dash-spreadsheet-container tr:nth-child(odd) td {
  background-color: var(--theme-panel2);
}
html:not([data-theme="dark"]) .nav-tabs .nav-link.active {
  color: #6BA800 !important;
}
html:not([data-theme="dark"]) .alert-warning {
  background: rgba(232, 194, 103, .18) !important; color: #8a6d1d !important;
  border-color: rgba(232, 194, 103, .5) !important;
}

/* ---------- casca (só dark) ---------- */
html[data-theme="dark"], html[data-theme="dark"] body {
  background:
    radial-gradient(1100px 520px at 82% -8%, rgba(164, 206, 78, .10), transparent 60%),
    radial-gradient(900px 480px at -5% 4%, rgba(47, 179, 154, .08), transparent 55%),
    var(--theme-bg) !important;
  background-attachment: fixed !important;
  color: var(--theme-ink);
}

/* títulos serif nos dois temas (identidade do relatório) */
h1, h2 { font-family: var(--theme-serif); }

html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 {
  color: var(--theme-ink);
}
html[data-theme="dark"] body, html[data-theme="dark"] p,
html[data-theme="dark"] label, html[data-theme="dark"] li { color: var(--theme-ink); }
html[data-theme="dark"] .text-muted { color: var(--theme-mut) !important; }
html[data-theme="dark"] hr { border-color: var(--theme-line); opacity: 1; }

/* superfícies */
html[data-theme="dark"] .content-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .offcanvas {
  background: linear-gradient(180deg, var(--theme-panel2), var(--theme-panel)) !important;
  border: 1px solid var(--theme-line) !important;
  color: var(--theme-ink) !important;
}
html[data-theme="dark"] .stat-card h3, html[data-theme="dark"] .stat-card .h3 {
  color: var(--comerc-green) !important; font-family: var(--theme-serif);
}
html[data-theme="dark"] .section-header { color: var(--theme-ink); border-color: var(--theme-line); }
html[data-theme="dark"] .section-header i { color: var(--comerc-green); }

/* navbar */
html[data-theme="dark"] .navbar, html[data-theme="dark"] nav.navbar {
  background: linear-gradient(180deg, rgba(164, 206, 78, .07), transparent), #0e1813 !important;
  border-bottom: 1px solid var(--theme-line) !important;
}
html[data-theme="dark"] .navbar .nav-link,
html[data-theme="dark"] .navbar .dropdown-toggle { color: var(--theme-mut) !important; }
html[data-theme="dark"] .navbar .nav-link:hover { color: var(--comerc-green) !important; }
html[data-theme="dark"] .dropdown-item { color: var(--theme-ink) !important; }
html[data-theme="dark"] .dropdown-item:hover { background: rgba(164, 206, 78, .12) !important; }
html[data-theme="dark"] .dropdown-divider { border-color: var(--theme-line); }

/* inputs / dropdowns (react-select v1) */
html[data-theme="dark"] .Select-control,
html[data-theme="dark"] .Select-menu-outer,
html[data-theme="dark"] .Select-menu,
html[data-theme="dark"] .Select.is-open > .Select-control,
html[data-theme="dark"] .Select.is-focused > .Select-control {
  background: var(--theme-panel2) !important;
  border-color: var(--theme-line) !important;
  color: var(--theme-ink) !important;
}
html[data-theme="dark"] .Select-value-label,
html[data-theme="dark"] .Select-placeholder,
html[data-theme="dark"] .Select-input > input { color: var(--theme-ink) !important; }
html[data-theme="dark"] .Select--multi .Select-value {
  background: rgba(164, 206, 78, .15) !important;
  border-color: var(--theme-line) !important; color: var(--theme-ink) !important;
}
html[data-theme="dark"] .Select-arrow { border-top-color: var(--comerc-green) !important; }
html[data-theme="dark"] .VirtualizedSelectOption { background: var(--theme-panel2); color: var(--theme-ink); }
html[data-theme="dark"] .VirtualizedSelectFocusedOption { background: rgba(164, 206, 78, .15); }
html[data-theme="dark"] input.form-control,
html[data-theme="dark"] textarea.form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .DateInput, html[data-theme="dark"] .DateInput_input,
html[data-theme="dark"] .SingleDatePickerInput, html[data-theme="dark"] .DateRangePickerInput {
  background: var(--theme-panel2) !important; color: var(--theme-ink) !important;
  border-color: var(--theme-line) !important;
}

/* botões */
html[data-theme="dark"] .btn-outline-secondary, html[data-theme="dark"] .btn-light {
  color: var(--theme-mut) !important; border-color: var(--theme-line) !important;
  background: transparent !important;
}
html[data-theme="dark"] .btn-outline-secondary:hover, html[data-theme="dark"] .btn-light:hover {
  background: rgba(164, 206, 78, .12) !important; color: var(--theme-ink) !important;
}
html[data-theme="dark"] .btn-success, html[data-theme="dark"] .comerc-btn {
  background: var(--comerc-green) !important; border-color: var(--comerc-green) !important;
  color: #0c130f !important; font-weight: 700;
}

/* tabs bootstrap */
html[data-theme="dark"] .nav-tabs { border-color: var(--theme-line); }
html[data-theme="dark"] .nav-tabs .nav-link { color: var(--theme-mut); }
html[data-theme="dark"] .nav-tabs .nav-link.active {
  background: var(--theme-panel) !important; color: var(--comerc-green) !important;
  border-color: var(--theme-line) var(--theme-line) var(--theme-panel) !important;
}

/* subabas dcc.Tabs (react-tabs / custom-tab / classes default do Dash):
   o style.css crava cinza/branco com !important — sobrescreve aqui (carrega depois) */
html[data-theme="dark"] .react-tabs__tab,
html[data-theme="dark"] .custom-tab,
html[data-theme="dark"] .tab-container .tab,
html[data-theme="dark"] div[role="tab"] {
  background-color: var(--theme-panel2) !important;
  color: var(--theme-mut) !important;
  border-color: var(--theme-line) !important;
}
html[data-theme="dark"] .react-tabs__tab--selected,
html[data-theme="dark"] .custom-tab--selected,
html[data-theme="dark"] .tab-container .tab--selected,
html[data-theme="dark"] div[role="tab"][aria-selected="true"] {
  background-color: var(--theme-panel) !important;
  color: var(--comerc-green) !important;
  border-bottom: 4px solid var(--comerc-green) !important;
  font-weight: 700;
}
html[data-theme="dark"] .react-tabs__tab:hover:not(.react-tabs__tab--selected),
html[data-theme="dark"] .custom-tab:hover:not(.custom-tab--selected) {
  color: var(--theme-ink) !important;
  background-color: rgba(164, 206, 78, .10) !important;
}
html[data-theme="dark"] .react-tabs__tab-list,
html[data-theme="dark"] .Tabs, html[data-theme="dark"] .tab-container {
  background-color: transparent !important;
  border-color: var(--theme-line) !important;
}

/* títulos dentro de cards (style.css usa --comerc-dark-gray / bootstrap herda escuro) */
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .card h4, html[data-theme="dark"] .card h5,
html[data-theme="dark"] .card h6,
html[data-theme="dark"] .home-card h6, html[data-theme="dark"] .hero-card h5 {
  color: var(--theme-ink);
}
html[data-theme="dark"] .hero-card { background: var(--theme-panel) !important; }

/* DataTable: fallback de tema SEM !important — formatação condicional inline
   (heatmaps, semáforos) tem precedência e continua funcionando */
html[data-theme="dark"] .theme-table .dash-spreadsheet-container td {
  background-color: var(--theme-panel); color: var(--theme-ink);
  border-color: var(--theme-line);
}
html[data-theme="dark"] .theme-table .dash-spreadsheet-container tr:nth-child(odd) td {
  background-color: var(--theme-panel2);
}

/* esconde o seletor interno de colunas (Toggle Columns) em TODAS as tabelas */
.show-hide { display: none !important; }
.show-hide-menu { display: none !important; }

/* hover de linha: o default claro vaza por baixo das células TRANSLÚCIDAS
   (heatmap de deltas) e vira faixa branca no escuro — realce sutil por tema */
html[data-theme="dark"] .dash-spreadsheet .dash-data-table tbody tr:hover,
html[data-theme="dark"] .dash-spreadsheet-inner table tbody tr:hover {
  background-color: rgba(164, 206, 78, .07) !important;
}
html:not([data-theme="dark"]) .dash-spreadsheet .dash-data-table tbody tr:hover,
html:not([data-theme="dark"]) .dash-spreadsheet-inner table tbody tr:hover {
  background-color: rgba(148, 214, 0, .08) !important;
}

/* style.css usa --comerc-black como FUNDO escuro nestes seletores; no dark a
   var vira tinta clara -> faixas lavadas ("título zuado"). Fundo dark fixo: */
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .comerc-table th,
html[data-theme="dark"] .dash-spreadsheet .dash-header .dash-cell {
  background: linear-gradient(135deg, #0e1813 0%, #13201a 100%) !important;
  color: var(--theme-ink) !important;
  border-bottom: 2px solid var(--comerc-green) !important;
}
html[data-theme="dark"] .footer {
  background: linear-gradient(180deg, rgba(164, 206, 78, .06), transparent), #0e1813 !important;
  color: var(--theme-mut) !important;
  border-top: 1px solid var(--theme-line) !important;
}
html[data-theme="dark"] .footer * { color: var(--theme-mut) !important; }
.theme-table .dash-spreadsheet-container th {
  background-color: #0e1813 !important; color: #9bb3a5 !important;
  border-bottom: 2px solid var(--comerc-green, #94D600) !important;
  text-transform: uppercase; font-size: 11px; letter-spacing: .06em;
}
html[data-theme="dark"] .dash-table-tooltip {
  background: #0e1813 !important; color: var(--theme-ink) !important;
  border: 1px solid var(--theme-line) !important;
}

/* tabelas html/bootstrap */
html[data-theme="dark"] table.table, html[data-theme="dark"] .table { color: var(--theme-ink); }
html[data-theme="dark"] .table > :not(caption) > * > * {
  background: transparent; color: inherit; border-color: var(--theme-line);
}

/* alerts */
html[data-theme="dark"] .alert-warning { background: rgba(232, 194, 103, .14) !important; color: #e8c267 !important; border-color: rgba(232, 194, 103, .4) !important; }
html[data-theme="dark"] .alert-secondary { background: var(--theme-panel2) !important; color: var(--theme-mut) !important; border-color: var(--theme-line) !important; }
html[data-theme="dark"] .alert-info { background: rgba(47, 179, 154, .14) !important; color: #2fb39a !important; border-color: rgba(47, 179, 154, .4) !important; }
html[data-theme="dark"] .alert-danger { background: rgba(226, 100, 95, .15) !important; color: #e2645f !important; border-color: rgba(226, 100, 95, .4) !important; }

/* spinner / links / scrollbar */
html[data-theme="dark"] .spinner-border { color: var(--comerc-green) !important; }
html[data-theme="dark"] a { color: var(--comerc-green); }
html[data-theme="dark"] a:hover { color: var(--comerc-green-light); }
html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--theme-bg); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--theme-line); border-radius: 6px; }

/* botão de tema (navbar) */
#theme-toggle {
  border: 1px solid var(--theme-line); border-radius: 999px;
  background: transparent; color: var(--theme-mut);
  width: 34px; height: 34px; line-height: 1; cursor: pointer;
}
#theme-toggle:hover { color: var(--comerc-green); border-color: var(--comerc-green); }

/* página Automação EAR: herda o tema global (CSS antigo dela foi absorvido) */
html[data-theme="dark"] .aear-page { background: transparent; box-shadow: none; }