/*
 * Resume.ie Dark Mode System
 * Include via: <link rel="stylesheet" href="dark-mode.css">
 *              <script src="dark-mode.js"></script>
 *
 * Adds a 🌙/☀️ toggle button to the topbar automatically.
 * Stores preference in localStorage.
 */

/* ============================================
   DARK MODE OVERRIDES
   Applied when body has class "dark"
   ============================================ */

body.dark {
  --green: #10b981;
  --green-dark: #059669;
  --green-light: rgba(16, 185, 129, 0.08);
  --gold: #f59e0b;
  --gold-light: rgba(245, 158, 11, 0.08);
  --dark: #f1f5f9;
  --blue: #60a5fa;
  --purple: #a78bfa;

  background: #0f1419;
  color: #e2e8f0;
}

/* Topbar */
body.dark .topbar {
  background: #1a2028;
  border-bottom-color: #2d3748;
}
body.dark .topbar-nav a,
body.dark .topbar-links a,
body.dark .topbar .skip {
  color: #94a3b8;
}

/* Cards, panels, forms */
body.dark .cv-panel,
body.dark .rg-card,
body.dark .option-card,
body.dark .permit-card,
body.dark .board-card,
body.dark .story-card,
body.dark .feature-card,
body.dark .price-card,
body.dark .stat-card,
body.dark .sum-card,
body.dark .analysis-card,
body.dark .entry-card,
body.dark .entry-form,
body.dark .q-card,
body.dark .res-card,
body.dark .detail-card,
body.dark .checker,
body.dark .simulator,
body.dark .strategy,
body.dark .mood-chart,
body.dark .notif,
body.dark .profile-form,
body.dark .link-card,
body.dark .cc,
body.dark .ben-item,
body.dark .step-card,
body.dark .script-box {
  background: #1a2028;
  border-color: #2d3748;
  color: #e2e8f0;
}

/* Specific unread notif state */
body.dark .notif.unread {
  background: rgba(16, 185, 129, 0.06);
  border-color: rgba(16, 185, 129, 0.15);
}

/* Text colors */
body.dark h1, body.dark h2, body.dark h3, body.dark h4,
body.dark .ec-date, body.dark .bc-info h3,
body.dark .role-info h2, body.dark .sc-info h3 {
  color: #f1f5f9;
}

body.dark p, body.dark .step-content p,
body.dark .bc-desc, body.dark .q-content p,
body.dark .ec-section p, body.dark .sc-quote,
body.dark .detail-card p, body.dark .change-list li {
  color: #cbd5e1;
}

body.dark .step-sub, body.dark .role-sub,
body.dark .bc-tip, body.dark .result-count,
body.dark .disclaimer, body.dark .hero p,
body.dark .page-hero p, body.dark .page-header p {
  color: #94a3b8;
}

/* Inputs and textareas */
body.dark input, body.dark select, body.dark textarea,
body.dark .field input, body.dark .field select,
body.dark .field textarea, body.dark .sim-field input,
body.dark .sim-field select, body.dark .search-bar input {
  background: #0f1419;
  border-color: #2d3748;
  color: #e2e8f0;
}
body.dark input::placeholder, body.dark textarea::placeholder {
  color: #4a5568;
}

/* Buttons - outline variants */
body.dark .btn-outline, body.dark .filter-btn,
body.dark .role-tab, body.dark .bc-actions .track {
  background: #1a2028;
  border-color: #2d3748;
  color: #94a3b8;
}
body.dark .filter-btn.active, body.dark .role-tab.active {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}

/* Tags and pills */
body.dark .skill-pill, body.dark .kw.kept,
body.dark .q-tag.cat, body.dark .company-chip,
body.dark .sc-tag.senior {
  background: #2d3748;
  color: #94a3b8;
}

/* Background sections */
body.dark .cv-panel-header, body.dark .tpl-info,
body.dark .sim-result, body.dark .metric,
body.dark .strat-card, body.dark .bc-tip {
  background: #0f1419;
}

/* Social stats */
body.dark .social-stats {
  background: #1a2028;
  border-color: #2d3748;
}

/* Mood chart bars already use inline colors, fine in dark mode */

/* Timeline line */
body.dark .timeline::before {
  background: #2d3748;
}
body.dark .step-dot {
  background: #1a2028;
  border-color: #2d3748;
}

/* Footer */
body.dark .footer {
  background: #0a0e13;
}

/* Scrollbar */
body.dark::-webkit-scrollbar {
  width: 8px;
}
body.dark::-webkit-scrollbar-track {
  background: #0f1419;
}
body.dark::-webkit-scrollbar-thumb {
  background: #2d3748;
  border-radius: 4px;
}

/* Tabs */
body.dark .tabs {
  border-bottom-color: #2d3748;
}
body.dark .tab {
  color: #64748b;
}
body.dark .tab.active {
  color: var(--green);
  border-bottom-color: var(--green);
}

/* Progress dots */
body.dark .progress-dot {
  border-color: #2d3748;
  background: #1a2028;
  color: #64748b;
}
body.dark .progress-line {
  background: #2d3748;
}

/* Sample/quote boxes */
body.dark .sample, body.dark .sc-quote {
  background: rgba(16, 185, 129, 0.04);
  border-left-color: var(--green);
  color: #cbd5e1;
}

/* Toast */
body.dark .toast {
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

/* Hero sections with dark backgrounds stay the same */

/* Dark mode toggle button */
.dark-toggle {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1.5px solid #e0dcd4;
  background: #fff;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}
.dark-toggle:hover {
  border-color: #0d6b4e;
}
body.dark .dark-toggle {
  border-color: #2d3748;
  background: #1a2028;
}