/* ============================================================
   HỌC HÓA THÔNG MINH — Dark / Light Mode
   Kích hoạt bằng html[data-theme="dark"] hoặc body.theme-dark
   ============================================================ */
html[data-theme="dark"],
body.theme-dark {
  --paper: #15161A;
  --paper-2: #1C1D22;
  --paper-tint: #262430;
  --ink: #EDEBE6;
  --ink-soft: #C9C3B8;
  --ink-faint: #A39D93;
  --muted: #A3ABBC;
  --line: #2B2C33;
  --line-strong: rgba(255, 255, 255, 0.35);
  --shadow-hard: 5px 5px 0 #000000;
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.4);
  --electron-tint: #32265C;
  --chloro-tint: #163024;
  --citrine-tint: #3A2E0B;
  --litmus-tint: #3C1828;
  --sky-tint: #152B45;
}

html[data-theme="dark"] body,
body.theme-dark {
  background: var(--paper);
  color: var(--ink);
}

/* ---------- Nút chuyển theme ---------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 2px solid var(--ink);
  background: var(--paper-tint);
  color: var(--ink);
  border-radius: 999px;
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.2s ease;
  -webkit-user-select: none;
  user-select: none;
}
.theme-toggle:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--ink);
}
.theme-toggle:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}
.theme-toggle .ti {
  font-size: 15px;
  line-height: 1;
}
.theme-toggle--small {
  padding: 8px 12px;
  font-size: 12px;
  border-width: 1.5px;
}

/* ---------- Hình ảnh/thẻ khi dark mode ---------- */
html[data-theme="dark"] img,
html[data-theme="dark"] svg {
  filter: none;
}
html[data-theme="dark"] .card-paper,
html[data-theme="dark"] .paper-card {
  background: var(--paper-2);
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .level-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .panel {
  background: var(--paper-2);
}
html[data-theme="dark"] .feature-card p,
html[data-theme="dark"] .level-card p {
  color: var(--ink-soft);
}
html[data-theme="dark"] .feature-card:hover {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}

/* ---------- Bảng tuần hoàn: ô pastel sáng trên nền tối gây chói — darken + chữ rõ ---------- */
html[data-theme="dark"] .pt-cell{ background:#2A2B33; border-color:#3E3F4A; }
html[data-theme="dark"] .pt-cell:hover{ border-color:#fff; }
html[data-theme="dark"] .pt-cell .z{ color:#C7C1B5; }
html[data-theme="dark"] .pt-cell .sym{ color:#EDEBE6; }
html[data-theme="dark"] .pt-cell .nm{ color:#C7C1B5; }
html[data-theme="dark"] .pt-cell.cat-phi-kim{ background:#32265C; }
html[data-theme="dark"] .pt-cell.cat-kim-loai-chuyen-tiep{ background:#163024; }
html[data-theme="dark"] .pt-cell.cat-kim-loai-kiem{ background:#3C1828; }
html[data-theme="dark"] .pt-cell.cat-kim-loai-kiem-tho{ background:#3A2E0B; }
html[data-theme="dark"] .pt-cell.cat-halogen{ background:#152B45; }
html[data-theme="dark"] .pt-cell.cat-khi-hiem{ background:#2E2450; }
html[data-theme="dark"] .pt-cell.cat-a-kim{ background:#3F2A14; }
html[data-theme="dark"] .pt-cell.cat-kim-loai-yeu{ background:#1E3527; }
html[data-theme="dark"] .pt-cell.cat-kim-loai-dat-hiem,
html[data-theme="dark"] .pt-cell.cat-kim-loai-actini{ background:#401A2B; }
html[data-theme="dark"] .pt-cell.cat-khac{ background:#2A2B33; }

/* Ô tìm kiếm bảng tuần hoàn: nền trắng chói trên nền tối + placeholder chìm */
html[data-theme="dark"] .pt-search{ background:#2A2B33; color:#EDEBE6; border-color:#3E3F4A; }
html[data-theme="dark"] .pt-search::placeholder{ color:#9CA3AF; }
html[data-theme="dark"] .pt-search:focus{ border-color:#5B78E8; }

/* ---------- Form fields dark mode ---------- */
html[data-theme="dark"] .form-control{ background:#22232A; border-color:#44454F; color:#EDEBE6; }
html[data-theme="dark"] .form-control:focus{ border-color:#5B78E8; background:#1E1F25; }
html[data-theme="dark"] .form-control::placeholder{ color:#9CA3AF; }
html[data-theme="dark"] .chat-input-area textarea{ background:#22232A; border-color:#44454F; color:#EDEBE6; }
html[data-theme="dark"] .chat-input-area textarea::placeholder{ color:#9CA3AF; }
html[data-theme="dark"] .form-panel .form-control{ border-color:#44454F; background:#22232A; color:#EDEBE6; }

/* Lesson cards & detail dark mode */
html[data-theme="dark"] .lesson-card{ background:#22232A; border-color:#3E3F4A; }
html[data-theme="dark"] .lesson-card:hover{ border-color:#5B78E8; box-shadow:0 10px 24px rgba(0,0,0,.4); }
html[data-theme="dark"] .lesson-card .topic-tag{ color:#4BD18F; }
html[data-theme="dark"] .lesson-card h3{ color:#EDEBE6; }
html[data-theme="dark"] .lesson-meta b{ color:#4BD18F; }
html[data-theme="dark"] .lesson-body p,
html[data-theme="dark"] .lesson-body ul,
html[data-theme="dark"] .lesson-body ol{ color:#D8D3C8; }
html[data-theme="dark"] .lesson-body th{ background:#2A2B33; }

/* ---------- Chữ chìm dưới nền: tăng tương phản toàn cục trong dark mode ---------- */
html[data-theme="dark"] .muted,
html[data-theme="dark"] [style*="--muted"] {
  color: var(--muted) !important;
}
html[data-theme="dark"] .text-faint,
html[data-theme="dark"] [style*="--ink-faint"] {
  color: var(--ink-faint) !important;
}

/* Dark mode chỉ dùng khi user chọn (localStorage/DB) — không theo system */

/* ---------- Global dark: mọi input/textarea/select trắng trong card/form ---------- */
html[data-theme="dark"] input[type="text"]:not(.form-control),
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] textarea:not(.form-control),
html[data-theme="dark"] select:not(.form-control) {
  background: #22232A;
  color: #EDEBE6;
  border-color: #44454F;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #9CA3AF; }

/* Leaderboard dark */
html[data-theme="dark"] .lb-table{ background:#22232A; border-color:#3E3F4A; }
html[data-theme="dark"] .lb-table tr{ border-bottom-color:#33343F; }
html[data-theme="dark"] .lb-table td{ color:#EDEBE6; }
html[data-theme="dark"] .lb-table td.name{ font-weight:700; }
html[data-theme="dark"] .lb-table tr.me{ background:#3A3212; }
html[data-theme="dark"] .podium-card{ background:#22232A; border-color:#3E3F4A; }
html[data-theme="dark"] .podium-card.first{ background:#3A3212; border-color:#E8A927; }
html[data-theme="dark"] .lb-table td.rank{ color:#9CA3AF; }

/* Dashboard & onboarding dark */
html[data-theme="dark"] .progress-track{ background:rgba(255,255,255,.14); }
html[data-theme="dark"] .ai-head .icn{ background:#2A2B33; }
html[data-theme="dark"] .ai-actions .btn{ background:#2A2B33; border-color:#3E3F4A; color:#EDEBE6; }
html[data-theme="dark"] .ai-actions .btn:hover{ background:#35363F; }
html[data-theme="dark"] .stat-card{ background:#22232A; border-color:#3E3F4A; color:#EDEBE6; }
html[data-theme="dark"] .stat-card .sl{ color:#B7B1A6; }
html[data-theme="dark"] .stat-card.accent{ background:#4B33C4; }

/* News cards dark */
html[data-theme="dark"] a.card{ background:#22232A; border-color:#3E3F4A; color:#EDEBE6; }
html[data-theme="dark"] a.card h3{ color:#EDEBE6; }
html[data-theme="dark"] a.card:hover{ border-color:#5B78E8; }