/* ============================================
   TOOLS DARK MODE OVERRIDE
   Loaded AFTER bpc-premium.css on all tool pages.
   Handles tool-specific selectors that bpc-premium misses.
   ============================================ */

/* --- Global body fix for tools --- */
body {
  background: #0A0A0A !important;
  color: #F5F5F5 !important;
}

/* --- White containers → dark --- */
.tool-container,
.calculator-card,
.calc-card,
.result-card,
.results-card,
.results-container,
.zone-card,
.info-card,
.info-box,
.info-panel,
.method-card,
.science-card,
.how-it-works,
.faq-card,
.feature-card,
.premium-card,
.section-card,
.content-card,
.explanation-card,
.education-card,
.usage-card,
.scenario-card,
.glossary-card,
.zones-card,
.profile-card,
.analysis-card,
.input-card,
.protocol-card,
.card,
.panel,
.box {
  background: #141414 !important;
  color: #F5F5F5 !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* --- Specific white bg overrides (inline styles) --- */
[style*="background: white"],
[style*="background: #fff"],
[style*="background: #ffffff"],
[style*="background: #F8FAFC"],
[style*="background: #f8fafc"],
[style*="background-color: white"],
[style*="background-color: #fff"],
[style*="background-color: #ffffff"] {
  background: #141414 !important;
  color: #F5F5F5 !important;
}

/* --- Headers inside tools --- */
.tool-header,
.page-header {
  background: #050505 !important;
  color: #fff !important;
}

/* --- Inputs & form elements --- */
input, select, textarea {
  background: #1A1A1A !important;
  color: #F5F5F5 !important;
  border-color: rgba(255,255,255,0.12) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(255,255,255,0.4) !important;
}

input:focus, select:focus, textarea:focus {
  border-color: rgba(220,38,38,0.5) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(220,38,38,0.15) !important;
}

/* --- Labels & text --- */
label {
  color: rgba(255,255,255,0.8) !important;
}

h1, h2, h3, h4 {
  color: #FFFFFF !important;
}

/* --- Muted text --- */
.text-muted,
.subtitle,
.description,
small,
.help-text,
.hint {
  color: rgba(255,255,255,0.6) !important;
}

/* --- Tables --- */
table {
  border-color: rgba(255,255,255,0.08) !important;
}

th {
  background: #1A1A1A !important;
  color: rgba(255,255,255,0.8) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

td {
  border-color: rgba(255,255,255,0.06) !important;
}

tr:hover td {
  background: rgba(255,255,255,0.04) !important;
}

/* --- Borders --- */
hr {
  border-color: rgba(255,255,255,0.08) !important;
}

/* --- Range sliders --- */
input[type="range"] {
  background: transparent !important;
}

/* --- Tabs & toggles --- */
.tab, .toggle-btn {
  background: #1A1A1A !important;
  color: rgba(255,255,255,0.6) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

.tab.active, .toggle-btn.active {
  background: #DC2626 !important;
  color: #fff !important;
}

/* --- Tooltips --- */
.tooltip {
  background: #1A1A1A !important;
  color: #F5F5F5 !important;
  border-color: rgba(255,255,255,0.1) !important;
}

/* --- Code blocks --- */
code, pre {
  background: #1A1A1A !important;
  color: #F5F5F5 !important;
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0A0A0A; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* --- Login containers: keep light --- */
.login-container {
  background: white !important;
  color: #0F172A !important;
}

.login-container *:not(a) {
  color: #0F172A !important;
}

.login-container p,
.login-container .login-subtitle {
  color: #64748B !important;
}

.login-container a {
  color: #DC2626 !important;
}

.login-container input {
  background: #F8FAFC !important;
  color: #0F172A !important;
  border-color: #E2E8F0 !important;
}