/* ============================================================
   ELEVATE - Square UI theme (Zerostatic-inspired)
   Aplica um redesign leve, plano, minimalista em todo o app SEM
   tocar nos outros CSSs. Se algo quebrar visualmente, basta remover
   o <link> desse arquivo no index.html e volta ao dark violeta.
   ============================================================ */

/* ---------- 1. Import Inter font ---------- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

/* ---------- 2. Redefinir as CSS variables ---------- */
:root {
  color-scheme: light !important;

  /* Cores neutras do tema (branco/preto puro pra referencia interna) */
  --sq-white: #ffffff;
  --sq-black: #0b0b0f;

  /* Backgrounds */
  --bg:        #ffffff !important;
  --surface-1: #f9fafb !important;
  --surface-2: #f3f4f6 !important;
  --surface-3: #e5e7eb !important;

  /* Purple palette (mantida pra brand mas mais discreta) */
  --purple-900: #4c1d95 !important;
  --purple-700: #6d28d9 !important;
  --primary:    #6d28d9 !important;
  --primary-2:  #7c3aed !important;
  --primary-dim: rgba(109, 40, 217, 0.08) !important;
  --primary-glow: rgba(109, 40, 217, 0.14) !important;

  /* Borders */
  --border:        #e5e7eb !important;
  --border-hover:  #d1d5db !important;
  --border-bright: #c4b5fd !important;

  /* Typography */
  --ink:   #111827 !important;
  --ink-2: #374151 !important;
  --muted: #6b7280 !important;

  /* Semantic */
  --success:     #16a34a !important;
  --success-dim: rgba(22, 163, 74, 0.10) !important;
  --warning:     #d97706 !important;
  --warning-dim: rgba(217, 119, 6, 0.10) !important;
  --danger:      #dc2626 !important;
  --danger-dim:  rgba(220, 38, 38, 0.08) !important;
  --sale:        #16a34a !important;
  --sale-dim:    rgba(22, 163, 74, 0.10) !important;

  /* Shadow (achatadas) */
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.04), 0 1px 3px rgba(17, 24, 39, 0.06) !important;
  --shadow-md: 0 4px 6px rgba(17, 24, 39, 0.05), 0 10px 15px rgba(17, 24, 39, 0.08) !important;
  --shadow-lg: 0 20px 25px rgba(17, 24, 39, 0.08), 0 8px 10px rgba(17, 24, 39, 0.05) !important;
  --glow:      none !important;

  /* Sidebar/radius */
  --sidebar-w: 240px !important;
  --radius:    8px !important;
  --radius-sm: 6px !important;
  --radius-pill: 999px !important;

  /* Cores condicionais reutilizadas nos overrides */
  --sq-panel-bg:   #ffffff;
  --sq-body-bg:    #ffffff;
  --sq-input-bg:   #ffffff;
}

/* ---------- 2b. DARK MODE - Square UI dark (flat, minimalista) ---------- */
:root[data-theme="dark"] {
  color-scheme: dark !important;

  --bg:        #0b0b0f !important;
  --surface-1: #14141b !important;
  --surface-2: #1c1c26 !important;
  --surface-3: #2a2a36 !important;

  --purple-900: #6d28d9 !important;
  --purple-700: #7c3aed !important;
  --primary:    #a78bfa !important;
  --primary-2:  #c4b5fd !important;
  --primary-dim: rgba(167, 139, 250, 0.10) !important;
  --primary-glow: rgba(167, 139, 250, 0.15) !important;

  --border:        #26262f !important;
  --border-hover:  #3a3a45 !important;
  --border-bright: rgba(167, 139, 250, 0.35) !important;

  --ink:   #f4f4f5 !important;
  --ink-2: #d4d4d8 !important;
  --muted: #a1a1aa !important;

  --success:     #4ade80 !important;
  --success-dim: rgba(74, 222, 128, 0.10) !important;
  --warning:     #fbbf24 !important;
  --warning-dim: rgba(251, 191, 36, 0.10) !important;
  --danger:      #f87171 !important;
  --danger-dim:  rgba(248, 113, 113, 0.10) !important;
  --sale:        #4ade80 !important;
  --sale-dim:    rgba(74, 222, 128, 0.10) !important;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.40) !important;
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.35), 0 10px 15px rgba(0, 0, 0, 0.45) !important;
  --shadow-lg: 0 20px 25px rgba(0, 0, 0, 0.50), 0 8px 10px rgba(0, 0, 0, 0.40) !important;

  --sq-panel-bg:  #14141b;
  --sq-body-bg:   #0b0b0f;
  --sq-input-bg:  #14141b;
}

/* ---------- 3. Base body ---------- */
html { background: #ffffff; }
body {
  background: #ffffff !important;
  color: var(--ink) !important;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif !important;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}
body::before, body::after {
  display: none !important;
}

/* Remove todo blur / halo / gradiente violeta do fundo */
.finance-halo, .fv-halo, [class*="halo"], [class*="glow"] {
  display: none !important;
}

/* ---------- 4. Sidebar ---------- */
.sidebar {
  background: #ffffff !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: none !important;
}
.sidebar-brand,
.sidebar-brand-text,
.sidebar h1 {
  color: var(--ink) !important;
  background: none !important;
  -webkit-text-fill-color: var(--ink) !important;
}
.sidebar-nav .nav-item {
  color: var(--ink-2) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  padding: 9px 12px !important;
  font-weight: 500 !important;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.sidebar-nav .nav-item:hover {
  background: var(--surface-1) !important;
  color: var(--ink) !important;
}
.sidebar-nav .nav-item.active {
  background: var(--surface-2) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
  font-weight: 600 !important;
}
.sidebar-nav .nav-item svg { opacity: 0.7 !important; }
.sidebar-nav .nav-item.active svg { opacity: 1 !important; color: var(--primary) !important; }

.nav-badge {
  background: var(--surface-2) !important;
  color: var(--ink-2) !important;
  border-radius: 999px !important;
  padding: 2px 8px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  border: 1px solid var(--border) !important;
}

.sidebar-status, .status-dot, .status-label {
  color: var(--muted) !important;
}
.status-dot { background: var(--success) !important; }
.sidebar-user, .sidebar-user-email {
  color: var(--ink-2) !important;
  border-color: var(--border) !important;
}
.sidebar-user-logout {
  color: var(--muted) !important;
  border: 1px solid var(--border) !important;
  background: #ffffff !important;
  border-radius: 6px !important;
}
.sidebar-user-logout:hover { color: var(--danger) !important; border-color: var(--danger) !important; }

/* ---------- 5. Main content ---------- */
.main-content, .view, main {
  background: #ffffff !important;
  color: var(--ink) !important;
}

/* ---------- 6. Header text ---------- */
h1, h2, h3, h4, h5, .view-header h1, .fv-title {
  color: var(--ink) !important;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  background: none !important;
  -webkit-text-fill-color: var(--ink) !important;
}
h1 { font-size: 26px !important; }
.eyebrow, .fv-eyebrow, .muted, .fv-sub {
  color: var(--muted) !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
}

/* ---------- 7. Cards / surfaces ---------- */
.card, .stat-card, .lead-focus, .preview-panel, .search-bar,
.history-panel, .batch-wrap, .fv-card, .fv-panel,
.aud-card, .aud-section, .audit-overall, .audit-form,
.sdr-card, .sdr-period, .assign-runs, .assign-panel,
.metas-table, .call-modal, .modal-frame,
article.aud-card, article.sdr-card {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow-sm) !important;
  color: var(--ink) !important;
}

/* Stat cards ficam com um pouco de destaque colorido no valor */
.stat-value {
  color: var(--ink) !important;
  font-weight: 800 !important;
}
.stat-card--warning .stat-value { color: var(--warning) !important; }
.stat-card--purple  .stat-value { color: var(--primary) !important; }
.stat-card--success .stat-value { color: var(--success) !important; }
.stat-label {
  color: var(--muted) !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
}

/* ---------- 8. Buttons ---------- */
.btn, button.btn {
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  transition: background 120ms, border-color 120ms, transform 120ms, box-shadow 120ms;
}
.btn--primary, button.btn--primary, .btn--scan, .metas-btn, .audit-pdf-btn {
  background: var(--primary) !important;
  color: #ffffff !important;
  border: 1px solid var(--primary) !important;
  box-shadow: none !important;
}
.btn--primary:hover, .btn--scan:hover, .metas-btn:hover, .audit-pdf-btn:hover {
  background: var(--purple-700) !important;
  border-color: var(--purple-700) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm) !important;
}
.btn--ghost, button.btn--ghost, .panel-btn {
  background: #ffffff !important;
  color: var(--ink-2) !important;
  border: 1px solid var(--border) !important;
}
.btn--ghost:hover, .panel-btn:hover {
  background: var(--surface-1) !important;
  border-color: var(--border-hover) !important;
  color: var(--ink) !important;
}

/* ---------- 9. Inputs / selects ---------- */
input[type="text"], input[type="url"], input[type="email"],
input[type="password"], input[type="number"], input[type="search"],
select, textarea,
.search-field input, .audit-field input, .metas-input, .assign-select {
  background: #ffffff !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
}
input:focus, select:focus, textarea:focus,
.search-field input:focus, .audit-field input:focus,
.metas-input:focus, .assign-select:focus {
  outline: 2px solid rgba(109, 40, 217, 0.25) !important;
  outline-offset: 1px;
  border-color: var(--primary) !important;
}
label { color: var(--ink-2) !important; }
.search-field label, .audit-field label {
  color: var(--muted) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}

/* ---------- 10. Chips / filters ---------- */
.chip, .filters .chip, .buscas24h-tab {
  background: #ffffff !important;
  color: var(--ink-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.chip:hover, .buscas24h-tab:hover {
  background: var(--surface-1) !important;
  color: var(--ink) !important;
  border-color: var(--border-hover) !important;
}
.chip.chip--active, .buscas24h-tab.active {
  background: var(--primary) !important;
  color: #ffffff !important;
  border-color: var(--primary) !important;
}
.chip.chip--active:hover, .buscas24h-tab.active:hover {
  background: var(--purple-700) !important;
  border-color: var(--purple-700) !important;
  color: #ffffff !important;
}

/* ---------- 11. Kanban ---------- */
.kb-col, .kb-column, .kb-card, .kanban-column, .kanban-card {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-sm) !important;
}
.kb-col-hdr, .kanban-column-header {
  color: var(--ink-2) !important;
  border-bottom: 1px solid var(--border) !important;
}
.kb-card-title, .kanban-card-title { color: var(--ink) !important; }
.kb-card small, .kanban-card small { color: var(--muted) !important; }

/* ---------- 12. Admin panel tabs ---------- */
.admin-tabs {
  border-bottom: 1px solid var(--border) !important;
}
.admin-tab {
  color: var(--muted) !important;
  background: transparent !important;
}
.admin-tab:hover {
  color: var(--ink) !important;
  background: var(--surface-1) !important;
}
.admin-tab.active {
  color: var(--primary) !important;
  background: var(--surface-1) !important;
  border-bottom: 2px solid var(--primary) !important;
}

/* ---------- 13. Metas table ---------- */
.metas-table {
  background: #ffffff !important;
}
.metas-table th {
  background: var(--surface-1) !important;
  color: var(--muted) !important;
  border-bottom: 1px solid var(--border) !important;
}
.metas-table td {
  color: var(--ink) !important;
  border-bottom: 1px solid var(--border) !important;
}
.metas-td-sdr { color: var(--ink) !important; }
.metas-table tbody tr:hover { background: var(--surface-1) !important; }
.metas-input {
  background: #ffffff !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}
.metas-input--dirty { border-color: var(--warning) !important; background: rgba(217, 119, 6, 0.05) !important; }
.metas-input--saved { border-color: var(--success) !important; background: rgba(22, 163, 74, 0.05) !important; }

/* ---------- 14. Assign leads ---------- */
.assign-run {
  background: #ffffff !important;
  border-color: var(--border) !important;
  color: var(--ink-2) !important;
}
.assign-run:hover {
  background: var(--surface-1) !important;
  border-color: var(--border-hover) !important;
  color: var(--ink) !important;
}
.assign-run.active {
  background: var(--surface-2) !important;
  border-color: var(--primary) !important;
  color: var(--ink) !important;
}
.assign-run-title { color: var(--ink) !important; }
.assign-run-meta { color: var(--muted) !important; }
.assign-lead-row {
  background: #ffffff !important;
  border-color: var(--border) !important;
  color: var(--ink-2) !important;
}
.assign-lead-name { color: var(--ink) !important; }
.assign-lead-meta { color: var(--muted) !important; }
.assign-lead-phone { color: var(--primary) !important; }
.assign-count { color: var(--muted) !important; }
.assign-count strong { color: var(--primary) !important; }
.assign-toolbar { border-top-color: var(--border) !important; }
.assign-panel-hdr { border-bottom-color: var(--border) !important; }
.assign-runs h3, .assign-panel h3 { color: var(--ink) !important; }

/* ---------- 15. SDR cards ---------- */
.sdr-card {
  background: #ffffff !important;
  border-color: var(--border) !important;
}
.sdr-card-hdr { border-bottom-color: var(--border) !important; }
.sdr-card-hdr h3 { color: var(--ink) !important; }
.sdr-role-pill {
  background: var(--primary-dim) !important;
  color: var(--primary) !important;
}
.sdr-period {
  background: var(--surface-1) !important;
  border-color: var(--border) !important;
}
.sdr-period-hdr { color: var(--muted) !important; }
.sdr-metric-hdr { color: var(--ink-2) !important; }
.sdr-metric-hdr strong { color: var(--ink) !important; }
.sdr-metric-target { color: var(--muted) !important; }
.sdr-bar { background: var(--surface-3) !important; }
.sdr-bar-fill { background: var(--primary) !important; }
.sdr-bar-fill--warn { background: var(--warning) !important; }
.sdr-bar-fill--danger { background: var(--danger) !important; }
.sdr-bar-fill--done { background: var(--success) !important; }

/* ---------- 16. Audit view ---------- */
.audit-overall {
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.05), rgba(109, 40, 217, 0.02)) !important;
  border-color: var(--border) !important;
}
.audit-overall-url { color: var(--ink) !important; }
.audit-overall-label { color: var(--muted) !important; }
.aud-card, .aud-section {
  background: #ffffff !important;
  border-color: var(--border) !important;
}
.aud-card-hdr strong { color: var(--ink) !important; }
.aud-card-desc { color: var(--muted) !important; }
.aud-card-level { color: var(--ink-2) !important; }
.aud-section-hdr { border-bottom-color: var(--border) !important; }
.aud-section-hdr h3 { color: var(--ink) !important; }
.aud-section-meta { color: var(--muted) !important; }
.aud-bar { background: var(--surface-3) !important; }
.aud-bar-fill { background: var(--primary) !important; }
.aud-bar-label { color: var(--ink-2) !important; }
.aud-bar-val { color: var(--muted) !important; }
.aud-check {
  background: var(--surface-1) !important;
  border-color: var(--border) !important;
}
.aud-check-hdr strong { color: var(--ink) !important; }
.aud-cat {
  background: var(--surface-2) !important;
  color: var(--muted) !important;
}
.aud-value {
  background: var(--primary-dim) !important;
  color: var(--primary) !important;
}
.aud-detail { color: var(--muted) !important; }
.aud-fix {
  background: var(--primary-dim) !important;
  border-left-color: var(--primary) !important;
  color: var(--ink-2) !important;
}
.aud-fix strong { color: var(--primary) !important; }

/* ---------- 17. Empty states / muted panels ---------- */
.admin-empty, .sdr-empty, .audit-empty, .focus-empty,
.panel-empty, .batch-empty {
  background: var(--surface-1) !important;
  color: var(--muted) !important;
  border: 1px dashed var(--border) !important;
}
.focus-empty p { color: var(--muted) !important; }

/* ---------- 18. Focus area (lead detail on leads/prospectar view) ---------- */
.lead-focus, .preview-panel {
  background: #ffffff !important;
  border-color: var(--border) !important;
}
.panel-hdr {
  background: var(--surface-1) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--ink-2) !important;
}
.panel-body--site { background: #ffffff !important; }
.data-cell {
  background: var(--surface-1) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
}
.data-cell small { color: var(--muted) !important; }
.data-cell strong { color: var(--ink) !important; }

/* ---------- 19. Focus/prospect big call buttons ---------- */
.call-btn-big {
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 14px 20px !important;
  border: 1px solid transparent !important;
  transition: background 120ms, transform 120ms, box-shadow 120ms;
}
.call-btn-big--yes {
  background: var(--success) !important;
  color: #ffffff !important;
  border-color: var(--success) !important;
}
.call-btn-big--yes:hover, .call-btn-big--yes:focus-visible {
  background: #15803d !important;
  border-color: #15803d !important;
}
.call-btn-big--no {
  background: var(--danger) !important;
  color: #ffffff !important;
  border-color: var(--danger) !important;
}
.call-btn-big--no:hover {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
}
.call-btn-big--busy {
  background: var(--warning) !important;
  color: #ffffff !important;
  border-color: var(--warning) !important;
}
.call-btn-big--busy:hover {
  background: #b45309 !important;
  border-color: #b45309 !important;
}

/* Batch card contatado no light mode */
.batch-card--contacted {
  background: var(--surface-2) !important;
  opacity: 0.6 !important;
  filter: grayscale(0.5) !important;
}
:root[data-theme="dark"] .batch-card--contacted {
  background: var(--surface-1) !important;
  opacity: 0.45 !important;
  filter: grayscale(0.6) !important;
}

/* ---------- 20. Batch mini-cards ---------- */
.batch-scroll {
  background: transparent !important;
}
.batch-card {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  color: var(--ink) !important;
  border-radius: 6px !important;
  box-shadow: var(--shadow-sm) !important;
}
.batch-card:hover { border-color: var(--border-hover) !important; }
.batch-card.batch-card--active {
  border-color: var(--primary) !important;
  background: var(--surface-1) !important;
}

/* ---------- 21. Auth overlay ---------- */
.auth-overlay {
  background: rgba(249, 250, 251, 0.85) !important;
  backdrop-filter: blur(6px);
}
.auth-card {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-lg) !important;
  border-radius: 12px !important;
}
.auth-card h2, .auth-card label { color: var(--ink) !important; }
.auth-card input { background: #ffffff !important; color: var(--ink) !important; border-color: var(--border) !important; }
.auth-card .btn { background: var(--primary) !important; color: #fff !important; }

/* ---------- 22. Modais ---------- */
.modal-frame, .modal {
  background: #ffffff !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-lg) !important;
}
.modal-header {
  border-bottom: 1px solid var(--border) !important;
}
.modal-header h2 { color: var(--ink) !important; }
.modal-close {
  color: var(--muted) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}
.modal-close:hover { color: var(--danger) !important; background: var(--surface-1) !important; }
dialog::backdrop {
  background: rgba(17, 24, 39, 0.4) !important;
  backdrop-filter: blur(3px);
}

/* ---------- 23. Toasts ---------- */
.admin-toast {
  background: var(--success) !important;
  color: #ffffff !important;
  box-shadow: var(--shadow-md) !important;
  border-radius: 8px !important;
}
.admin-toast--err { background: var(--danger) !important; }

/* ---------- 24. Socio/Admin badge ---------- */
.socio-badge {
  background: var(--primary) !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
}

/* ---------- 25. Financeiro (finance-v3.css tem estilos proprios) ---------- */
.fv, .fv-card, .fv-panel, .fv-header {
  background: #ffffff !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}
.fv-title { color: var(--ink) !important; }
.fv-eyebrow, .fv-sub { color: var(--muted) !important; }

/* ---------- 26. CRM Pipeline header/stats ---------- */
.crm-header, .crm-stats {
  background: transparent !important;
}
.crm-stats .stat-card {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
}

/* ---------- 27. Follow-up columns ---------- */
[class*="follow-up"], [class*="perdido"], [class*="atrasado"] {
  color: inherit !important;
}

/* ---------- 28. Scrollbars ---------- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-hover) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-hover);
  border-radius: 999px;
  border: 2px solid #ffffff;
}
*::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* ---------- 29. History panel ---------- */
.history-panel, .history-list, .history-item {
  background: #ffffff !important;
  border-color: var(--border) !important;
  color: var(--ink-2) !important;
}
.history-item:hover { background: var(--surface-1) !important; }

/* ---------- 30. View header spacing ---------- */
.view-header .eyebrow {
  color: var(--primary) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
}

/* ============================================================
   DARK MODE - overrides pros hardcoded #ffffff em superficies
   Aplicado apenas quando <html data-theme="dark">
   ============================================================ */

:root[data-theme="dark"] html,
html[data-theme="dark"] { background: var(--bg) !important; }

:root[data-theme="dark"] body {
  background: var(--bg) !important;
  color: var(--ink) !important;
}

:root[data-theme="dark"] .sidebar {
  background: var(--sq-panel-bg) !important;
  border-right: 1px solid var(--border) !important;
}
:root[data-theme="dark"] .sidebar-user-logout,
:root[data-theme="dark"] .btn--ghost,
:root[data-theme="dark"] .panel-btn {
  background: var(--sq-panel-bg) !important;
  color: var(--ink-2) !important;
}
:root[data-theme="dark"] .btn--ghost:hover,
:root[data-theme="dark"] .panel-btn:hover {
  background: var(--surface-2) !important;
  color: var(--ink) !important;
}

:root[data-theme="dark"] .main-content,
:root[data-theme="dark"] .view,
:root[data-theme="dark"] main {
  background: var(--bg) !important;
  color: var(--ink) !important;
}

/* Cards / panels */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .stat-card,
:root[data-theme="dark"] .lead-focus,
:root[data-theme="dark"] .preview-panel,
:root[data-theme="dark"] .search-bar,
:root[data-theme="dark"] .history-panel,
:root[data-theme="dark"] .batch-wrap,
:root[data-theme="dark"] .fv-card,
:root[data-theme="dark"] .fv-panel,
:root[data-theme="dark"] .aud-card,
:root[data-theme="dark"] .aud-section,
:root[data-theme="dark"] .audit-form,
:root[data-theme="dark"] .sdr-card,
:root[data-theme="dark"] .assign-runs,
:root[data-theme="dark"] .assign-panel,
:root[data-theme="dark"] .metas-table,
:root[data-theme="dark"] .modal-frame,
:root[data-theme="dark"] .modal,
:root[data-theme="dark"] .auth-card,
:root[data-theme="dark"] .kb-col,
:root[data-theme="dark"] .kb-column,
:root[data-theme="dark"] .kb-card,
:root[data-theme="dark"] .kanban-column,
:root[data-theme="dark"] .kanban-card,
:root[data-theme="dark"] .batch-card,
:root[data-theme="dark"] .history-list,
:root[data-theme="dark"] .history-item,
:root[data-theme="dark"] .assign-run,
:root[data-theme="dark"] .assign-lead-row {
  background: var(--sq-panel-bg) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
}

/* Financeiro no tema escuro: o finance-v3.css ja e dark por design e pinta
   o proprio fundo. Sem esta regra, .fv e .fv-header herdam o branco forcado
   na secao 25 e o titulo (color: var(--ink), que no dark e claro) fica
   branco-sobre-branco, ilegivel. .fv-card e .fv-panel ja eram tratados. */
:root[data-theme="dark"] .fv,
:root[data-theme="dark"] .fv-header {
  background: transparent !important;
}

:root[data-theme="dark"] .sdr-period {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
}

:root[data-theme="dark"] .aud-check {
  background: var(--surface-1) !important;
  border-color: var(--border) !important;
}
:root[data-theme="dark"] .aud-cat {
  background: var(--surface-2) !important;
  color: var(--muted) !important;
}
:root[data-theme="dark"] .data-cell,
:root[data-theme="dark"] .metas-input,
:root[data-theme="dark"] .assign-select,
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="url"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] input[type="search"],
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background: var(--sq-input-bg) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}

:root[data-theme="dark"] .chip,
:root[data-theme="dark"] .buscas24h-tab {
  background: var(--sq-panel-bg) !important;
  color: var(--ink-2) !important;
  border-color: var(--border) !important;
}
:root[data-theme="dark"] .chip:hover,
:root[data-theme="dark"] .buscas24h-tab:hover {
  background: var(--surface-2) !important;
  color: var(--ink) !important;
}

:root[data-theme="dark"] .panel-hdr,
:root[data-theme="dark"] .panel-body--site {
  background: var(--surface-1) !important;
  color: var(--ink-2) !important;
}

:root[data-theme="dark"] .metas-table th {
  background: var(--surface-1) !important;
}

:root[data-theme="dark"] .metas-input--dirty {
  background: rgba(251, 191, 36, 0.08) !important;
}
:root[data-theme="dark"] .metas-input--saved {
  background: rgba(74, 222, 128, 0.08) !important;
}

:root[data-theme="dark"] .audit-overall {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.10), rgba(167, 139, 250, 0.03)) !important;
  border-color: var(--border) !important;
}

:root[data-theme="dark"] .admin-empty,
:root[data-theme="dark"] .sdr-empty,
:root[data-theme="dark"] .audit-empty,
:root[data-theme="dark"] .focus-empty,
:root[data-theme="dark"] .panel-empty,
:root[data-theme="dark"] .batch-empty {
  background: var(--surface-1) !important;
  color: var(--muted) !important;
  border-color: var(--border) !important;
}

:root[data-theme="dark"] .auth-overlay {
  background: rgba(11, 11, 15, 0.85) !important;
}
:root[data-theme="dark"] dialog::backdrop {
  background: rgba(0, 0, 0, 0.6) !important;
}

/* Scrollbar dark */
:root[data-theme="dark"] *::-webkit-scrollbar-thumb {
  background: var(--border-hover);
  border-color: var(--sq-body-bg);
}

/* ---------- Theme toggle button styles ---------- */
.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  background: transparent !important;
  color: var(--muted) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer;
  font-family: inherit !important;
  transition: background 120ms, color 120ms, border-color 120ms;
  margin: 8px 0;
}
.theme-toggle:hover {
  background: var(--surface-1) !important;
  color: var(--ink) !important;
  border-color: var(--border-hover) !important;
}
.theme-toggle svg { width: 14px; height: 14px; flex-shrink: 0; }
.theme-toggle .theme-toggle-icon-dark { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-toggle-icon-light { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-toggle-icon-dark  { display: inline-block; }