/* ════════════════════════════════════════════════════════════════
   THEMES — Overrides do dark/light mode e correções de inline styles
   nkFinance: dark é o padrão. Aqui ficam:
   1. Ajustes para classes legadas (body.dark)
   2. Light mode (html[data-theme="light"])
   3. Patches para modais dinâmicos com cores hardcoded em JS
   ════════════════════════════════════════════════════════════════ */

/* ── COMPATIBILIDADE body.dark ─────────────────────────────────── */
/* body.dark herda :root (sem overrides necessários no nkFinance) */

/* ── LIGHT MODE (overrides) ────────────────────────────────────── */
html[data-theme="light"] body { background: var(--bg); color: var(--n1); }

html[data-theme="light"] .nav { background: var(--card); border-color: var(--border-n); }
html[data-theme="light"] .nav-brand { color: var(--n1); }
html[data-theme="light"] .hamburger span { background: var(--primary); }

html[data-theme="light"] .sidebar { background: var(--card); border-color: var(--border-n); }
html[data-theme="light"] .sidebar-item { color: var(--n2); }
html[data-theme="light"] .sidebar-item:hover { background: rgba(139,105,20,.06); color: var(--n1); }
html[data-theme="light"] .sidebar-item.active {
  background: linear-gradient(90deg, rgba(139,105,20,.10), transparent);
  color: var(--primary);
  border-left-color: var(--primary);
}

html[data-theme="light"] .stat,
html[data-theme="light"] .card,
html[data-theme="light"] .modal {
  background: var(--card) !important;
  border-color: var(--border-n) !important;
}
html[data-theme="light"] .stat-value { color: var(--n1); }
html[data-theme="light"] .stat-label,
html[data-theme="light"] .stat-sub { color: var(--n3); }

html[data-theme="light"] .tbl-wrap { background: var(--card); border-color: var(--border-n); }
html[data-theme="light"] thead th { background: var(--bg2); border-color: var(--border-n); color: var(--n3); }
html[data-theme="light"] tbody tr { border-color: var(--border-n); }
html[data-theme="light"] tbody tr:hover { background: rgba(212,175,55,.06); }
html[data-theme="light"] tbody td { color: var(--n1); }

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  background: var(--card);
  border-color: var(--border-n);
  color: var(--n1);
}
html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(139,105,20,.15);
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: var(--n4); }
html[data-theme="light"] input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--card) inset !important;
  -webkit-text-fill-color: var(--n1) !important;
}

html[data-theme="light"] .mhdr,
html[data-theme="light"] .mfooter { border-color: var(--border-n) !important; }
html[data-theme="light"] .mtitle,
html[data-theme="light"] .mbody { color: var(--n1); }
html[data-theme="light"] .mclose { color: var(--n3); border-color: var(--border-n); }
html[data-theme="light"] .mclose:hover { background: rgba(139,105,20,.06); }
html[data-theme="light"] .msec { color: var(--primary); border-color: var(--border-n); }
html[data-theme="light"] .parc-row { border-color: var(--border-n); }
html[data-theme="light"] .lbl { color: var(--n3); }

html[data-theme="light"] .pill {
  background: var(--card);
  border-color: var(--border-n);
  color: var(--n3);
}
html[data-theme="light"] .pill:hover { border-color: var(--primary); color: var(--n1); }
html[data-theme="light"] .pill.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}

html[data-theme="light"] .btn-g { color: var(--n2); border-color: var(--border-n); }
html[data-theme="light"] .btn-g:hover { background: rgba(139,105,20,.06); border-color: var(--primary); color: var(--n1); }

html[data-theme="light"] .sim-cell { background: var(--card); border-color: var(--border-n); color: var(--n2); }
html[data-theme="light"] .sim-cell.highlight,
html[data-theme="light"] .sim-cell.total-col {
  background: rgba(139,105,20,.10);
  color: var(--primary);
}
html[data-theme="light"] .sim-header { background: var(--bg2); color: var(--primary); }

html[data-theme="light"] .info-box,
html[data-theme="light"] .warn-box,
html[data-theme="light"] .emp-tipo-desc {
  background: rgba(139,105,20,.06);
  color: var(--n2);
  border-color: var(--border);
  border-left-color: var(--primary);
}

html[data-theme="light"] .gsearch-box { background: var(--card); }
html[data-theme="light"] .gsearch-row { border-color: var(--border-n); }
html[data-theme="light"] .gsearch-row input { color: var(--n1); }
html[data-theme="light"] .gsearch-item { border-color: var(--border-n); }
html[data-theme="light"] .gsearch-item:hover { background: rgba(212,175,55,.08); }

html[data-theme="light"] #bottom-nav { background: var(--card); border-color: var(--border-n); }
html[data-theme="light"] .bnav-item { color: var(--n3); }
html[data-theme="light"] .bnav-item.active { color: var(--primary); }

html[data-theme="light"] .nav-user {
  background: rgba(139,105,20,.04);
  color: var(--n2);
  border-color: var(--border-n);
}

html[data-theme="light"] .login-card {
  background: radial-gradient(ellipse at 50% 0%, #FFFCF2 0%, #FAFAF7 60%, #F5F4ED 100%);
}
html[data-theme="light"] .login-field input {
  background: rgba(250,247,237,.8) !important;
  color: var(--n1) !important;
  -webkit-text-fill-color: var(--n1) !important;
  border-color: rgba(139,105,20,.25);
}

/* ── DARK MODE — MODAIS DINÂMICOS (inline styles) ──────────────── */
/* JS antigo cria modais com background:#fff e color:#374151 hardcoded.
   Esses overrides fixam isso pra ficar no tema dark sem alterar JS. */
body.dark .client-view-modal-inner,
body.dark #client-view-modal > div,
body.dark [id^="confirm-pay-"] > div,
body.dark [id^="import-preview-modal"] > div,
.mbd > div,
#client-view-modal > div,
[id^="confirm-pay-"] > div,
[id^="import-preview-modal"] > div {
  background: var(--card) !important;
  color: var(--n1) !important;
  border-color: var(--border) !important;
}

body.dark #client-view-modal > div *,
body.dark [id^="confirm-pay-"] > div *,
#client-view-modal > div *,
[id^="confirm-pay-"] > div * {
  border-color: var(--border) !important;
}

/* Backgrounds hardcoded (#fff, #F9FAFB, etc) */
#client-view-modal div[style*="background:#fff"],
#client-view-modal div[style*="background: #fff"],
[id^="confirm-pay-"] div[style*="background:#fff"],
[id^="import-preview-modal"] div[style*="background:#fff"] {
  background: var(--card) !important;
  color: var(--n1) !important;
}
#client-view-modal div[style*="background:#F9FAFB"],
#client-view-modal div[style*="background:#FAFAFA"],
#client-view-modal div[style*="background:#F3F4F6"],
#client-view-modal div[style*="background:#EFF6FF"] {
  background: var(--card2) !important;
}
#client-view-modal div[style*="border:1px solid #E5E7EB"] {
  border-color: var(--border) !important;
}

/* Cores de texto hardcoded */
#client-view-modal span[style*="color:#6B7280"],
#client-view-modal span[style*="color:var(--n4)"],
#client-view-modal div[style*="color:var(--n4)"],
#client-view-modal div[style*="color:var(--n3)"],
#client-view-modal div[style*="color:#374151"] {
  color: var(--n3) !important;
}
#client-view-modal div[style*="color:var(--n1)"],
#client-view-modal div[style*="color:var(--n2)"],
#client-view-modal span[style*="color:var(--n2)"] {
  color: var(--n1) !important;
}
#client-view-modal div[style*="background:#E5E7EB"] {
  background: var(--card3) !important;
}

/* Parcela rows com cores semânticas */
#parc-modal .mbody div[style*="background:#FAFAFA"],
#parc-modal .mbody div[style*="background:#F9FAFB"] {
  background: var(--card2) !important;
}
#parc-modal .mbody div[style*="background:#F0FDF4"] {
  background: rgba(16,185,129,.10) !important;
}
#parc-modal .mbody div[style*="background:#FEF2F2"] {
  background: rgba(239,68,68,.10) !important;
}