/* ============================================================
   MIV8 — Dark Theme overrides v2
   Aplica quando <html data-theme="dark">
   Cobre todas as classes com #fff hardcoded.
   ============================================================ */

html[data-theme="dark"] {
  --gray-dark: #000000;
  --gray-ink: #F4F4F5;
  --gray-1: #E4E4E7;
  --gray-2: #A1A1AA;
  --gray-3: #71717A;
  --gray-4: #2A2A2A;
  --gray-5: #1A1A1A;
  --gray-6: #0A0A0A;

  --red-bg: #3F1212;
  --amber-bg: #3F2E0A;
  --blue-bg: #0F1F3F;
  --purple-bg: #2A0F3F;
  --orange-bg: #3F1E0A;
  --pink-bg: #3F0F2A;
  --indigo-bg: #15103F;
  --teal-bg: #0A2F2A;
  --green-tint: #0F2A14;
  --green-bg: #0A1F0E;
}

/* ============================================================
   TODOS os elementos com #fff hardcoded recebem fundo escuro.
   Usa !important pra ganhar da regra original do <style> inline.
   ============================================================ */

html[data-theme="dark"] .login-box,
html[data-theme="dark"] .content-header,
html[data-theme="dark"] .card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .city-card,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .benef-card,
html[data-theme="dark"] .loja-card,
html[data-theme="dark"] .emp-seg-card {
  background: #141414 !important;
  border-color: var(--gray-4) !important;
  color: var(--gray-ink);
}

/* Stat-card accent (verde gigante) preserva gradiente */
html[data-theme="dark"] .stat-card.accent {
  background: linear-gradient(135deg, var(--green-dark), var(--green)) !important;
  color: #fff !important;
  border-color: var(--green-dark) !important;
}

/* Labels e numbers dos stat-cards precisam ficar legiveis */
html[data-theme="dark"] .stat-card-label {
  color: var(--gray-2) !important;
}
html[data-theme="dark"] .stat-card-value {
  color: var(--gray-ink) !important;
}
html[data-theme="dark"] .stat-card-sub {
  color: var(--gray-3) !important;
}

/* Stat-card.accent sobrescreve para texto branco */
html[data-theme="dark"] .stat-card.accent .stat-card-label {
  color: rgba(255,255,255,0.75) !important;
}
html[data-theme="dark"] .stat-card.accent .stat-card-value {
  color: #fff !important;
}
html[data-theme="dark"] .stat-card.accent .stat-card-sub {
  color: rgba(255,255,255,0.85) !important;
}

/* Cabecalhos e textos de card */
html[data-theme="dark"] .card h1,
html[data-theme="dark"] .card h2,
html[data-theme="dark"] .card h3,
html[data-theme="dark"] .card h4,
html[data-theme="dark"] .content-header h1,
html[data-theme="dark"] .content-header h2 {
  color: var(--gray-ink);
}

html[data-theme="dark"] .card p,
html[data-theme="dark"] .card-header p,
html[data-theme="dark"] .content-header p {
  color: var(--gray-2);
}

/* ============================================================
   Inputs / textareas / selects no tema dark
   ============================================================ */

html[data-theme="dark"] .login-input,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: #1A1A1A !important;
  color: var(--gray-ink) !important;
  border-color: var(--gray-4) !important;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
  border-color: var(--green) !important;
  outline: none !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--gray-3);
}

/* ============================================================
   Tabelas
   ============================================================ */

html[data-theme="dark"] table {
  background: transparent !important;
  color: var(--gray-ink);
}

html[data-theme="dark"] thead th {
  background: #1A1A1A !important;
  color: var(--gray-1);
  border-color: var(--gray-4);
}

html[data-theme="dark"] tbody td {
  border-color: var(--gray-4);
  color: var(--gray-ink);
}

html[data-theme="dark"] tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* ============================================================
   Tela de login: gradiente do fundo
   ============================================================ */

html[data-theme="dark"] .login-screen {
  background: radial-gradient(
                ellipse 80% 60% at 20% 20%,
                rgba(34, 197, 94, 0.08),
                transparent 60%),
              #050505 !important;
}

/* ============================================================
   Botoes ghost
   ============================================================ */

html[data-theme="dark"] .btn-ghost {
  color: var(--gray-1) !important;
  border-color: var(--gray-4) !important;
  background: transparent !important;
}
html[data-theme="dark"] .btn-ghost:hover {
  background: var(--gray-5) !important;
}

/* ============================================================
   Modais
   ============================================================ */

html[data-theme="dark"] .modal-overlay {
  background: rgba(0, 0, 0, 0.75);
}

html[data-theme="dark"] .modal-close {
  background: var(--gray-5) !important;
  color: var(--gray-1) !important;
}

/* ============================================================
   Sidebar (ja era escura no light, fica preto puro no dark)
   ============================================================ */

html[data-theme="dark"] .sidebar {
  background: #000000 !important;
  border-right: 1px solid var(--gray-4);
}

/* ============================================================
   Scrollbar
   ============================================================ */

html[data-theme="dark"] ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #0A0A0A;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #2A2A2A;
  border-radius: 5px;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #3A3A3A;
}
