/* ═══════════════════════════════════════════════════════════════════════════
   guide-pages.css — Dark Theme for Item History Guide Pages
   Applied to: item-history-guides, electrical-service-panel-history,
   electrical-wiring-history, hvac-system-history, water-heater-history,
   major-appliances-history, tv-history, computer-history
   ═══════════════════════════════════════════════════════════════════════════
   Override the inline <style> light-background rules to work on the dark site.
   These rules use !important only where needed to win over inline <style>. */

/* ── Page body & containers ─────────────────────────────────────────────── */
body {
  background: #0b1326;
  color: #dae2fd;
}
.guide-container,
.guides-container {
  color: #dae2fd;
}
.guide-container section > p,
.guide-container > p {
  color: #c8d5e8;
}
.guide-container h2 {
  color: #ffffff;
}
.guide-container section ul li,
.guide-container section ol li {
  color: #c8d5e8;
}
.guide-container section ul strong,
.guide-container section ol strong {
  color: #f0f4ff;
}

/* ── Safety / context disclaimer boxes ─────────────────────────────────── */
.safety-disclaimer {
  background: rgba(245, 158, 11, 0.12) !important;
  border-left-color: #f59e0b !important;
  color: #fde68a !important;
}
.safety-disclaimer strong { color: #fcd34d !important; }

.context-note {
  background: rgba(68, 229, 194, 0.08) !important;
  border-left-color: #44e5c2 !important;
  color: #c8f0e8 !important;
}
.context-note strong { color: #44e5c2 !important; }

/* ── Timeline accordion cards ───────────────────────────────────────────── */
.timeline-era {
  background: #112236 !important;
  border-color: rgba(68, 229, 194, 0.2) !important;
}
.timeline-era[open] {
  border-color: #44e5c2 !important;
  box-shadow: 0 4px 16px rgba(68, 229, 194, 0.12) !important;
}
.timeline-era summary {
  background: #0f1d30 !important;
  color: #dae2fd !important;
}
.timeline-era summary:hover { background: #162840 !important; }
.timeline-era summary::after {
  border-right-color: #64748b !important;
  border-bottom-color: #64748b !important;
}

.era-badge {
  background: rgba(68, 229, 194, 0.15) !important;
  color: #44e5c2 !important;
}

/* ── Timeline content area (the main culprit — was missing background) ─── */
.timeline-content {
  background: #112236 !important;
  color: #c8d5e8 !important;
  border-top-color: rgba(68, 229, 194, 0.15) !important;
}
.timeline-content h3 { color: #ffffff !important; }
.timeline-content h4 { color: #f0f4ff !important; }
.timeline-content strong { color: #f0f4ff !important; }
.timeline-content ul li,
.timeline-content ol li { color: #c8d5e8 !important; }

/* ── Feature / highlight boxes ─────────────────────────────────────────── */
.feature-box {
  background: rgba(68, 229, 194, 0.08) !important;
  border-left-color: #44e5c2 !important;
  color: #c8f0e8 !important;
}
.feature-box strong { color: #44e5c2 !important; }

/* ── Visual reference grid cards ────────────────────────────────────────── */
.visual-card {
  background: #0f1d30 !important;
  border-color: rgba(68, 229, 194, 0.2) !important;
  color: #dae2fd !important;
}
.visual-card strong { color: #ffffff !important; }

/* ── Brand cards (electrical service panel page) ────────────────────────── */
.brand-card,
.brands-section .brand-card {
  background: #0f1d30 !important;
  border-color: rgba(68, 229, 194, 0.2) !important;
}
.brand-card h4 { color: #ffffff !important; }
.brand-card p  { color: #9ab0c8 !important; }

/* ── Wiring comparison cards (electrical wiring page) ───────────────────── */
.wiring-card {
  background: #112236 !important;
  border-color: rgba(68, 229, 194, 0.2) !important;
}
.wiring-card h3,
.wiring-card h4 { color: #ffffff !important; }
.wiring-card p,
.wiring-card li { color: #c0cfe8 !important; }
.wiring-concern { color: #f59e0b !important; }

/* Era label badge inside wiring cards */
.wiring-era {
  background: rgba(68, 229, 194, 0.15) !important;
  color: #44e5c2 !important;
  border-color: transparent !important;
}

/* ── Documentation checklist ────────────────────────────────────────────── */
.doc-checklist,
.documentation-checklist {
  background: #112236 !important;
  border-color: rgba(68, 229, 194, 0.2) !important;
}
.doc-checklist h3,
.documentation-checklist h3 { color: #ffffff !important; }
.doc-checklist li,
.documentation-checklist li { color: #c8d5e8 !important; }
.doc-checklist li::before,
.documentation-checklist li::before { color: #44e5c2 !important; }
.doc-checklist p,
.documentation-checklist p { color: #9ab0c8 !important; }

/* ── FAQ section ─────────────────────────────────────────────────────────── */
.faq-question {
  background: #112236 !important;
  color: #dae2fd !important;
}
.faq-question:hover { background: #162840 !important; }
.faq-answer {
  background: #0d1a2e !important;
  color: #c0cfe8 !important;
  border-left-color: #44e5c2 !important;
}

/* ── Inline table styles (visual clues tables) ───────────────────────────── */
table { border-collapse: collapse; width: 100%; }
table tr[style*="background: #f8fafc"],
table tr[style*="background:#f8fafc"] {
  background: #0f1d30 !important;
}
table th[style*="color: #0f172a"],
table th { color: #dae2fd !important; background: #0f1d30 !important; }
table td { color: #c0cfe8 !important; border-color: rgba(255,255,255,0.1) !important; }
table tr:nth-child(even) td { background: rgba(255,255,255,0.02) !important; }
table tr:hover td { background: rgba(68,229,194,0.04) !important; }

/* ── Related tools / cross-link section (inline style override) ──────────── */
section[style*="background: #f0f9ff"],
div[style*="background: #f0f9ff"],
section[style*="background:#f0f9ff"] {
  background: rgba(68, 229, 194, 0.06) !important;
  border-color: rgba(68, 229, 194, 0.25) !important;
}
section[style*="background: #f0f9ff"] h3,
div[style*="background: #f0f9ff"] h3 { color: #44e5c2 !important; }
section[style*="background: #f0f9ff"] a,
div[style*="background: #f0f9ff"] a { color: #44e5c2 !important; }
section[style*="background: #f0f9ff"] li,
div[style*="background: #f0f9ff"] li { color: #c8d5e8 !important; }

/* Also handle any remaining inline paragraph style blocks */
p[style*="color: #64748b"],
p[style*="color:#64748b"] { color: #8899aa !important; }

/* ── Item History Guides landing page ───────────────────────────────────── */
.guides-intro {
  background: #112236 !important;
  border-color: rgba(68, 229, 194, 0.2) !important;
  color: #c8d5e8 !important;
}
.guides-intro h2 { color: #ffffff !important; }

.guide-card {
  background: #112236 !important;
  border-color: rgba(68, 229, 194, 0.2) !important;
  color: #dae2fd !important;
}
.guide-card:hover {
  border-color: #44e5c2 !important;
  box-shadow: 0 4px 16px rgba(68, 229, 194, 0.15) !important;
}
.guide-card h3 { color: #ffffff !important; }
.guide-card p  { color: #9ab0c8 !important; }
.guide-card-link { color: #44e5c2 !important; }

.guides-section-title {
  color: #dae2fd !important;
  border-bottom-color: rgba(68, 229, 194, 0.2) !important;
}

.status-available {
  background: rgba(68, 229, 194, 0.15) !important;
  color: #44e5c2 !important;
}
.status-coming {
  background: rgba(255, 255, 255, 0.07) !important;
  color: #64748b !important;
}

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */
.breadcrumb { color: #64748b !important; }
.breadcrumb a { color: #44e5c2 !important; }

/* ── General text inside any light-bg containers ───────────────────────── */
[style*="color: #334155"] { color: #c8d5e8 !important; }
[style*="color: #0f172a"] { color: #ffffff !important; }
[style*="color: #0c4a6e"] { color: #dae2fd !important; }
[style*="color: #64748b"] { color: #8899aa !important; }
[style*="background: #f8fafc"],
[style*="background:#f8fafc"],
[style*="background: #ffffff"],
[style*="background:#ffffff"],
[style*="background: #f0f9ff"],
[style*="background:#f0f9ff"] {
  /* Note: specific rules above take precedence; this is a catch-all */
}

/* ── Mobile responsiveness ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .visual-card { font-size: 0.85rem; }
  .timeline-content { padding: 16px !important; }
  .doc-checklist, .documentation-checklist { padding: 14px !important; }
  .faq-answer, .faq-question { padding: 12px 14px !important; }
}