/* ============================================================
   GWG Command Center — polimento do layout v2 (Tailwind) no
   modo escuro. Carregado por base_v2.html após o tailwind.css.
   Tudo escopado em .dark para ser opt-in via #themeToggleV2.
   Marca navy/petróleo mantida; acento ciano-azul.
   ============================================================ */

:root { --cc-accent: #38bdf8; --cc-accent-2: #22d3ee; --cc-glow: rgba(56,189,248,0.30); }

/* ---- Modo DIURNO: fundo principal escurecido ~8% (#f8fafc -> #e4e6e8) p/ menos
   brilho. Escopado em html:not(.dark) p/ não afetar o modo escuro. ------------- */
html:not(.dark) body { background-color: #e4e6e8 !important; }

/* ---- Fundo geral com brilho radial (clima de painel) ------ */
html.dark body {
  background:
    radial-gradient(1100px 700px at 80% -8%, rgba(56,189,248,0.10), transparent 60%),
    radial-gradient(900px 620px at -6% 18%, rgba(45,90,143,0.20), transparent 55%),
    #0a0e1a !important;
  color: #e8eef9;
}
html.dark .content-area { background: transparent !important; }
html.dark .main-wrapper-v2 { background: transparent; }

/* ---- Sidebar (já é navy; reforça contorno + item ativo) ---- */
html.dark .sidebar-v2 {
  background: linear-gradient(180deg, #0e1730 0%, #0a1020 100%) !important;
  border-right: 1px solid rgba(255,255,255,0.06);
  box-shadow: 8px 0 30px rgba(0,0,0,0.35);
}
/* item de navegação ativo: barra + brilho de acento */
html.dark .sidebar-v2 a.is-active,
html.dark .sidebar-v2 a.active,
html.dark .sidebar-v2 a[aria-current="page"] {
  position: relative;
  background: linear-gradient(90deg, rgba(56,189,248,0.18), rgba(56,189,248,0.03)) !important;
  color: #7dd3fc !important;
  border-left-color: var(--cc-accent) !important;
  box-shadow: inset 0 0 0 1px rgba(56,189,248,0.22);
}
html.dark .sidebar-v2 a.is-active::before,
html.dark .sidebar-v2 a.active::before,
html.dark .sidebar-v2 a[aria-current="page"]::before {
  content: ""; position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--cc-accent), var(--cc-accent-2));
  box-shadow: 0 0 12px 1px var(--cc-glow);
}

/* ---- Footer (estava bg-white sem variante dark) ----------- */
html.dark .footer-v2 {
  background: #0a0e1a !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  color: #8595b5 !important;
}

/* ---- Topbar (glass escuro) -------------------------------- */
html.dark .topbar-v2 {
  background: rgba(14,21,40,0.72) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: #e8eef9;
}
html.dark .topbar-v2 .ph,
html.dark .topbar-v2 a { color: #aebbd4; }
html.dark .topbar-v2 a:hover { color: #fff; }

/* ---- Cards (Tailwind já dá dark:bg-surface-800; +profundid.) */
html.dark .card-3d,
html.dark [class*="bg-white"].rounded-xl,
html.dark [class*="bg-white"].rounded-2xl {
  /* cards ~3% mais claros no escuro (Wilson) — antes #14203a/#111a30 */
  background: linear-gradient(180deg, #1a2640 0%, #17203a 100%) !important;
  border-color: rgba(255,255,255,0.07) !important;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,0.6) !important;
}
html.dark .card-3d:hover,
html.dark a.group:hover [class*="bg-white"],
html.dark a.group.block:hover {
  border-color: rgba(56,189,248,0.45) !important;
  box-shadow: 0 18px 42px -16px rgba(0,0,0,0.7), 0 0 0 1px rgba(56,189,248,0.22),
              0 0 26px -6px var(--cc-glow) !important;
}

/* realça números das métricas com leve brilho */
html.dark .text-surface-900,
html.dark [class*="dark:text-surface-100"] { text-shadow: 0 0 18px rgba(56,189,248,0.10); }

/* ---- Botão de tema (topbar) ------------------------------- */
.theme-toggle-v2 {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--surface-300, #cbd5e1); background: transparent;
  color: #475569; cursor: pointer; transition: all .18s; font-size: 1.05rem;
}
.theme-toggle-v2:hover { background: rgba(0,0,0,0.04); }
html.dark .theme-toggle-v2 {
  border-color: rgba(56,189,248,0.35); color: var(--cc-accent);
  background: rgba(56,189,248,0.08);
}
html.dark .theme-toggle-v2:hover { background: rgba(56,189,248,0.16); }

/* ---- Scrollbar ------------------------------------------- */
html.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
html.dark ::-webkit-scrollbar-track { background: #0a0e1a; }
html.dark ::-webkit-scrollbar-thumb { background: #25324f; border-radius: 10px; border: 2px solid #0a0e1a; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #34466b; }

/* ============================================================
   REMAPEAMENTO DA GRADE DE CORES NO ESCURO
   Corrige elementos que usam a escala clara do Tailwind/Bootstrap
   SEM variante dark: (fundos claros, texto escuro invisível,
   inputs, tabelas, dropdowns, botões claros). Tudo sob html.dark.
   ============================================================ */

/* ---- Fundos claros -> superfícies escuras ----------------- */
html.dark .bg-surface-50,
html.dark .bg-surface-100,
html.dark .bg-gray-50,
html.dark .bg-gray-100,
html.dark .bg-slate-50,
html.dark .bg-slate-100,
html.dark .bg-light { background-color: #121a2e !important; }

html.dark .bg-surface-200,
html.dark .bg-gray-200,
html.dark .bg-slate-200 { background-color: #1c2740 !important; }

/* ---- Texto escuro -> claro legível ------------------------ */
html.dark .text-surface-900,
html.dark .text-surface-800,
html.dark .text-gray-900,
html.dark .text-gray-800,
html.dark .text-slate-900,
html.dark .text-slate-800,
html.dark .text-dark,
html.dark .text-black { color: #e8eef9 !important; }

html.dark .text-surface-700,
html.dark .text-surface-600,
html.dark .text-gray-700,
html.dark .text-gray-600,
html.dark .text-slate-700,
html.dark .text-slate-600 { color: #aebbd4 !important; }

html.dark .text-surface-500,
html.dark .text-surface-400,
html.dark .text-gray-500,
html.dark .text-gray-400,
html.dark .text-muted { color: #8595b5 !important; }

/* ---- Bordas claras -> sutis ------------------------------- */
html.dark .border-surface-100,
html.dark .border-surface-200,
html.dark .border-surface-300,
html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300,
html.dark .border-slate-100,
html.dark .border-slate-200 { border-color: rgba(255,255,255,0.08) !important; }

/* ---- Inputs / selects / textareas ------------------------- */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.dark select,
html.dark textarea,
html.dark .form-control,
html.dark .form-select {
  background-color: #0d1424 !important;
  border-color: #2a3656 !important;
  color: #eaf1ff !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: #5f6f92 !important; }
html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus,
html.dark .form-control:focus {
  border-color: var(--cc-accent) !important;
  box-shadow: 0 0 0 .2rem rgba(56,189,248,0.18) !important;
}

/* ---- Componentes Bootstrap (base_v2 carrega bootstrap) ---- */
html.dark .card { background-color: #121a2e !important; border-color: rgba(255,255,255,0.08) !important; color: #e8eef9; }
html.dark .table { color: #e8eef9; --bs-table-bg: transparent; --bs-table-color: #e8eef9; --bs-table-border-color: #25324f; }
html.dark .table thead th { color: #8595b5; border-color: #25324f; }
html.dark .table td, html.dark .table th { border-color: #25324f; }
html.dark .table-hover tbody tr:hover > * { background-color: rgba(56,189,248,0.06); color: #fff; }
html.dark .dropdown-menu { background-color: #121a2e; border: 1px solid rgba(255,255,255,0.08); }
html.dark .dropdown-item { color: #cbd5e1; }
html.dark .dropdown-item:hover, html.dark .dropdown-item:focus { background-color: #1c2740; color: #fff; }
html.dark .modal-content { background-color: #121a2e; color: #e8eef9; border: 1px solid rgba(255,255,255,0.08); }
html.dark .modal-header, html.dark .modal-footer { border-color: rgba(255,255,255,0.08); }
html.dark .list-group-item { background-color: transparent; color: #e8eef9; border-color: rgba(255,255,255,0.07); }
html.dark .nav-tabs { border-color: rgba(255,255,255,0.08); }
html.dark .nav-tabs .nav-link { color: #aebbd4; }
html.dark .nav-tabs .nav-link.active { background-color: #121a2e; color: #fff; border-color: rgba(255,255,255,0.08) rgba(255,255,255,0.08) #121a2e; }

/* ---- Botões claros ---------------------------------------- */
html.dark .btn-light,
html.dark .btn-outline-secondary,
html.dark .btn-outline-dark {
  background-color: #1c2740 !important;
  color: #e8eef9 !important;
  border-color: #2a3656 !important;
}
html.dark .btn-light:hover,
html.dark .btn-outline-secondary:hover,
html.dark .btn-outline-dark:hover { background-color: #25324f !important; color: #fff !important; }

/* ---- Divisores / hr --------------------------------------- */
html.dark hr { border-color: rgba(255,255,255,0.08); opacity: 1; }

/* ---- Estados vazios / placeholders de widget -------------- */
html.dark .bg-white\/50,
html.dark .bg-white\/60,
html.dark .bg-white\/70 { background-color: rgba(18,26,46,0.6) !important; }

/* ============================================================
   Overrides por-página com cores fixas claras (extra_css).
   Ex.: calendário da Agenda Comercial (comercial_agenda.html).
   ============================================================ */
html.dark .calendar-container { background: #121a2e !important; box-shadow: 0 10px 30px -12px rgba(0,0,0,0.6) !important; }
html.dark .calendar-header { background: #1c2740 !important; color: #aebbd4 !important; }
html.dark .calendar-day { border-color: rgba(255,255,255,0.08) !important; color: #e8eef9 !important; }
html.dark .calendar-day:hover { background: rgba(56,189,248,0.12) !important; border-color: var(--cc-accent) !important; }
html.dark .calendar-day.other-month { background: #0e1626 !important; color: #5a6c90 !important; }
html.dark .calendar-day.today { background: rgba(56,189,248,0.16) !important; border-color: var(--cc-accent) !important; }
html.dark .calendar-day-number { color: #e8eef9 !important; }
html.dark .visita-card { background: #16213b !important; color: #e8eef9 !important; }

/* Cabeçalho/corpo de card Bootstrap (usado na Agenda e outras) */
html.dark .card-header { background-color: #16213b !important; border-color: rgba(255,255,255,0.08) !important; color: #e8eef9 !important; }
html.dark .card-body { color: #e8eef9; }
html.dark .card-footer { background-color: #16213b !important; border-color: rgba(255,255,255,0.08) !important; }

/* Skeleton/loading em tom escuro */
html.dark .skeleton { background: linear-gradient(90deg, #121a2e 0%, #1c2740 50%, #121a2e 100%) !important; }

/* Caixinhas brancas soltas dentro do conteúdo (ex.: bg-white inline no
   resultado da visita). Escopado em .content-area p/ não afetar topbar/footer.
   :not(.rounded-xl):not(.rounded-2xl) preserva o gradiente dos cards. */
html.dark .content-area .bg-white:not(.rounded-xl):not(.rounded-2xl):not(.card-3d) {
  background-color: #16213b !important;
}

/* ============================================================
   Kanban (Gestão de Atividades / Cobranças) + tabelas com
   variantes de cor do Bootstrap + tints claros genéricos.
   ============================================================ */
html.dark .kanban-col { background: #0f1626 !important; border-color: rgba(255,255,255,0.07) !important; }
html.dark .kanban-card { background: #16213b !important; color: #e8eef9 !important; border-color: rgba(255,255,255,0.08) !important; box-shadow: 0 6px 18px -8px rgba(0,0,0,0.6) !important; }

/* Variantes de linha do Bootstrap (table-danger/warning/etc.) */
html.dark .table-danger  > *, html.dark tr.table-danger  > * { background-color: rgba(239,68,68,0.16) !important;  color: #fecaca !important; }
html.dark .table-warning > *, html.dark tr.table-warning > * { background-color: rgba(245,158,11,0.16) !important; color: #fde68a !important; }
html.dark .table-success > *, html.dark tr.table-success > * { background-color: rgba(16,185,129,0.16) !important; color: #a7f3d0 !important; }
html.dark .table-info    > *, html.dark tr.table-info    > * { background-color: rgba(56,189,248,0.16) !important; color: #bae6fd !important; }
html.dark .table-primary > *, html.dark tr.table-primary > * { background-color: rgba(59,130,246,0.16) !important; color: #bfdbfe !important; }
html.dark .table-secondary > *, html.dark tr.table-secondary > * { background-color: rgba(148,163,184,0.16) !important; color: #e2e8f0 !important; }
html.dark .table-light   > *, html.dark tr.table-light   > * { background-color: #16213b !important; color: #e8eef9 !important; }

/* Tints claros -50 (status/callouts) -> translúcidos no escuro */
html.dark .bg-red-50, html.dark .bg-rose-50      { background-color: rgba(239,68,68,0.12) !important; }
html.dark .bg-orange-50, html.dark .bg-amber-50  { background-color: rgba(245,158,11,0.12) !important; }
html.dark .bg-yellow-50                          { background-color: rgba(234,179,8,0.12) !important; }
html.dark .bg-green-50, html.dark .bg-emerald-50 { background-color: rgba(16,185,129,0.12) !important; }
html.dark .bg-teal-50, html.dark .bg-cyan-50, html.dark .bg-sky-50 { background-color: rgba(56,189,248,0.12) !important; }
html.dark .bg-blue-50, html.dark .bg-indigo-50   { background-color: rgba(59,130,246,0.12) !important; }
html.dark .bg-purple-50, html.dark .bg-violet-50, html.dark .bg-pink-50 { background-color: rgba(168,85,247,0.12) !important; }

/* Alerts do Bootstrap em tom escuro translúcido */
html.dark .alert-danger  { background-color: rgba(239,68,68,0.12) !important;  border-color: rgba(239,68,68,0.3) !important;  color: #fecaca !important; }
html.dark .alert-warning { background-color: rgba(245,158,11,0.12) !important; border-color: rgba(245,158,11,0.3) !important; color: #fde68a !important; }
html.dark .alert-success { background-color: rgba(16,185,129,0.12) !important; border-color: rgba(16,185,129,0.3) !important; color: #a7f3d0 !important; }
html.dark .alert-info, html.dark .alert-primary { background-color: rgba(56,189,248,0.12) !important; border-color: rgba(56,189,248,0.3) !important; color: #bae6fd !important; }