/* File: static/css/dark-mode.css */
/* Crisis Prevention Platform - Dark Mode Fixes */

:root.dark {
  --color-primary: #f8fafc;
  --color-secondary: #cbd5e1;
  --color-accent: #60a5fa;
  --color-success: #10b981;
  --color-warning: #fbbf24;
  --color-danger: #f87171;
  
  --color-dark-primary: #0f172a;
  --color-dark-secondary: #1e293b;
  --color-dark-card: #334155;
  --color-dark-border: #475569;
  
  --shadow-dark-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-dark-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --shadow-dark-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  --shadow-dark-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
}

/* Dark mode base styles */
.dark body {
  background-color: var(--color-dark-primary);
  color: var(--color-primary);
}

/* Dark mode text fixes */
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
  color: var(--color-primary) !important;
}

.dark p {
  color: var(--color-secondary) !important;
}

/* FIXED: Dark mode toggle visibility */
.dark #dark-mode-toggle,
.dark #mobile-dark-toggle {
  background: var(--color-dark-card) !important;
  color: var(--color-primary) !important;
}

.dark #dark-mode-toggle:hover,
.dark #mobile-dark-toggle:hover {
  background: var(--color-accent) !important;
  color: var(--color-dark-primary) !important;
}

/* FIXED: Consulting cards text visibility */
.dark .pricing-card {
  background: var(--color-dark-secondary) !important;
  border-color: var(--color-dark-border) !important;
}

.dark .pricing-card h3 {
  color: var(--color-primary) !important;
}

.dark .pricing-card .text-4xl {
  color: var(--color-accent) !important;
}

.dark .pricing-card p {
  color: var(--color-secondary) !important;
}

.dark .pricing-card li {
  color: var(--color-secondary) !important;
}

.dark .pricing-card .text-gray-600 {
  color: var(--color-secondary) !important;
}

.dark .pricing-card .text-gray-700 {
  color: var(--color-primary) !important;
}

/* FIXED: All dark text on dark backgrounds */
.dark .text-gray-600 {
  color: var(--color-secondary) !important;
}

.dark .text-gray-700 {
  color: var(--color-primary) !important;
}

.dark .text-primary {
  color: var(--color-primary) !important;
}

/* Dark mode buttons */
.dark .btn-primary {
  background: var(--color-accent) !important;
  color: var(--color-dark-primary) !important;
}

.dark .btn-secondary {
  border-color: var(--color-accent) !important;
  color: var(--color-accent) !important;
}

.dark .btn-secondary:hover {
  background: var(--color-accent) !important;
  color: var(--color-dark-primary) !important;
}

/* Dark mode cards */
.dark .card, .dark .bg-white {
  background: var(--color-dark-secondary) !important;
  color: var(--color-primary) !important;
}

.dark .bg-light-bg {
  background: var(--color-dark-secondary) !important;
}

/* Dark mode forms */
.dark .form-input {
  background: var(--color-dark-secondary) !important;
  border-color: var(--color-dark-border) !important;
  color: var(--color-primary) !important;
}

.dark .form-input:focus {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1) !important;
}

/* Dark mode navigation */
.dark header {
  background: var(--color-dark-secondary) !important;
  border-bottom-color: var(--color-dark-border) !important;
}

.dark .nav-link {
  color: var(--color-secondary) !important;
}

.dark .nav-link:hover {
  color: var(--color-accent) !important;
}

/* Dark mode footer */
.dark footer {
  background: var(--color-dark-primary) !important;
  border-top: 1px solid var(--color-dark-border) !important;
}

/* Dark mode modals */
.dark .modal-content {
  background: var(--color-dark-secondary) !important;
  color: var(--color-primary) !important;
}

/* Dark mode hero section */
.dark .gradient-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%) !important;
}

/* Dark mode feature sections */
.dark .bg-gray-50 {
  background: var(--color-dark-secondary) !important;
}

.dark .bg-blue-50 {
  background: rgba(96, 165, 250, 0.1) !important;
}

/* Ensure all text is visible in dark mode */
.dark * {
  border-color: var(--color-dark-border);
}

.dark .text-black {
  color: var(--color-primary) !important;
}

.dark .border-gray-200 {
  border-color: var(--color-dark-border) !important;
}

.dark .border-gray-300 {
  border-color: var(--color-dark-border) !important;
}