/* SocialHub Theme System - Light/Dark Mode Support */

/* Dark mode overrides */
[data-theme="dark"] {
  --card-bg: #1f2937;
  --text: #f9fafb;
  --muted: #9ca3af;
  --shadow: 0 12px 30px rgba(0,0,0,0.3);
}

[data-theme="dark"] body {
  background-color: #111827 !important;
  color: var(--text) !important;
}

[data-theme="dark"] .card,
[data-theme="dark"] .card-soft {
  background-color: var(--card-bg) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow) !important;
}

[data-theme="dark"] .text-muted {
  color: var(--muted) !important;
}

[data-theme="dark"] .navbar.bg-primary {
  background-color: #1e293b !important;
}

[data-theme="dark"] .form-control {
  background-color: #374151 !important;
  border-color: #4b5563 !important;
  color: var(--text) !important;
}

[data-theme="dark"] .form-control:focus {
  background-color: #374151 !important;
  border-color: #6366f1 !important;
  color: var(--text) !important;
  box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25) !important;
}

[data-theme="dark"] .btn-outline-secondary {
  color: var(--muted) !important;
  border-color: #4b5563 !important;
}

[data-theme="dark"] .btn-outline-secondary:hover {
  background-color: #374151 !important;
  border-color: #6b7280 !important;
  color: var(--text) !important;
}

[data-theme="dark"] .nav-pills .nav-link {
  color: var(--muted) !important;
}

[data-theme="dark"] .nav-pills .nav-link.active {
  background-color: #6366f1 !important;
  color: white !important;
}

[data-theme="dark"] .alert-secondary {
  background-color: #374151 !important;
  border-color: #4b5563 !important;
  color: var(--text) !important;
}

[data-theme="dark"] .bg-light {
  background-color: #374151 !important;
}

[data-theme="dark"] .border-bottom {
  border-color: #4b5563 !important;
}

/* Theme toggle button styling */
.theme-toggle {
  background: none;
  border: 1px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.9);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.theme-toggle:hover {
  background-color: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.5);
  color: white;
}

[data-theme="dark"] .theme-toggle {
  border-color: rgba(156,163,175,0.5);
  color: #9ca3af;
}

[data-theme="dark"] .theme-toggle:hover {
  background-color: rgba(156,163,175,0.1);
  border-color: #9ca3af;
  color: #f9fafb;
}