/* Comprehensive Dark Mode Styling */

/* Global Dark Mode Styles */
body.dark-mode {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 50%, var(--primary-dark) 100%);
  color: var(--text-primary);
}

body.dark-mode * {
  color: inherit;
}

/* Force all text to be light colored - override any dark text */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: var(--text-primary) !important;
}

body.dark-mode p,
body.dark-mode span,
body.dark-mode div:not(.cta-button):not(.btn-primary):not(.auth-button) {
  color: var(--text-secondary) !important;
}

/* Override any CSS variables that might cause dark text */
body.dark-mode [style*="color: var(--text-primary)"] {
  color: var(--text-primary) !important;
}

body.dark-mode [style*="color: var(--text-secondary)"] {
  color: var(--text-secondary) !important;
}

body.dark-mode [style*="color: #212529"],
body.dark-mode [style*="color: #6c757d"],
body.dark-mode [style*="color: #495057"],
body.dark-mode [style*="color: #343a40"],
body.dark-mode [style*="color: #2c3e50"] {
  color: var(--text-primary) !important;
}

/* Preserve PinoyHub logo color (don't touch) - but improve other navigation */
body.dark-mode .nav-links a:not(.logo):not(.logo-text) {
  color: var(--text-secondary) !important;
}

/* Navigation Styles */
body.dark-mode .header {
  background: var(--bg-glass);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-color);
}

body.dark-mode .nav-links a {
  color: var(--text-secondary);
  transition: color 0.3s ease;
}

body.dark-mode .nav-links a:hover,
body.dark-mode .nav-links a.active {
  color: var(--secondary-color);
}

/* Hero Section */
body.dark-mode .hero {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 50%, var(--accent-color) 100%);
}

body.dark-mode .hero h1,
body.dark-mode .hero p {
  color: var(--text-primary);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Cards and Containers - Comprehensive */
body.dark-mode .card,
body.dark-mode .settings-card,
body.dark-mode .profile-preview-card,
body.dark-mode .event-card,
body.dark-mode .business-card,
body.dark-mode .service-card,
body.dark-mode .forum-card,
body.dark-mode [style*="background: var(--bg-card"],
body.dark-mode [style*="background-color: var(--bg-card"],
body.dark-mode [style*="background: #ffffff"],
body.dark-mode [style*="background-color: #ffffff"],
body.dark-mode [style*="background: white"],
body.dark-mode [style*="background-color: white"],
body.dark-mode [style*="border: 1px solid var(--border-light"] {
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
  border-radius: var(--radius-lg) !important;
}

body.dark-mode .card h3,
body.dark-mode .card h4,
body.dark-mode .settings-card h3,
body.dark-mode .profile-preview-card h3 {
  color: var(--text-primary);
}

body.dark-mode .card p,
body.dark-mode .settings-card p {
  color: var(--text-secondary);
}

/* About Page Specific Cards - Force dark theme */
body.dark-mode #about-section [style*="text-align: center"],
body.dark-mode #about-section [style*="padding: 1.5rem"],
body.dark-mode #about-section [style*="background: var(--bg-card"],
body.dark-mode #about-section [style*="border-radius: 8px"],
body.dark-mode .about-content [style*="text-align: center"],
body.dark-mode .about-content [style*="padding: 1.5rem"],
body.dark-mode .about-content [style*="background: var(--bg-card"],
body.dark-mode .about-content [style*="border-radius: 8px"],
body.dark-mode .about-content div[style*="grid-template-columns"] > div {
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
  color: var(--text-primary) !important;
}

/* About page grid cards */
body.dark-mode .about-content div[style*="grid-template-columns"] > div h4 {
  color: var(--text-primary) !important;
}

body.dark-mode .about-content div[style*="grid-template-columns"] > div p {
  color: var(--text-secondary) !important;
}

/* About page icons */
body.dark-mode .about-content div[style*="grid-template-columns"] > div i {
  color: var(--secondary-color) !important;
}

/* Form Elements */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  transition: all 0.3s ease;
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
  border-color: var(--secondary-color);
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1);
  outline: none;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: var(--text-muted);
}

/* Form Labels */
body.dark-mode label {
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-sm);
  display: block;
}

body.dark-mode .form-hint {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

/* Checkboxes */
body.dark-mode .checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--text-secondary);
}

body.dark-mode .checkbox-label input[type="checkbox"] {
  margin-right: var(--space-sm);
  width: 18px;
  height: 18px;
  accent-color: var(--secondary-color);
}

/* Buttons */
body.dark-mode .cta-button,
body.dark-mode .btn-primary {
  background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-dark) 100%);
  color: white;
  border: none;
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
  transition: all 0.3s ease;
}

body.dark-mode .cta-button:hover,
body.dark-mode .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
}

body.dark-mode .btn-secondary {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 2px solid var(--border-color);
  transition: all 0.3s ease;
}

body.dark-mode .btn-secondary:hover {
  background: var(--bg-tertiary);
  border-color: var(--secondary-color);
  color: var(--text-primary);
}

/* Profile Modal */
body.dark-mode .modal,
body.dark-mode .modal-content {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

body.dark-mode .modal-header {
  border-bottom: 1px solid var(--border-color);
}

body.dark-mode .modal-close {
  color: var(--text-muted);
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  transition: color 0.3s ease;
}

body.dark-mode .modal-close:hover {
  color: var(--secondary-color);
}

/* Profile Avatar */
body.dark-mode .user-avatar {
  border: 3px solid var(--border-color);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

body.dark-mode .user-role {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

body.dark-mode .user-role.admin {
  background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-dark) 100%);
  color: white;
}

body.dark-mode .user-role.moderator {
  background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-dark) 100%);
  color: white;
}

/* Footer */
body.dark-mode footer {
  background: var(--bg-glass) !important;
  backdrop-filter: blur(10px) !important;
  border-top: 1px solid var(--border-color);
}

body.dark-mode footer h3,
body.dark-mode footer p,
body.dark-mode footer a {
  color: var(--text-footer);
}

body.dark-mode footer a:hover {
  color: var(--secondary-color);
}

/* Notifications */
body.dark-mode .notification {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

body.dark-mode .notification.success {
  border-left: 4px solid var(--success-color);
}

body.dark-mode .notification.warning {
  border-left: 4px solid var(--warning-color);
}

body.dark-mode .notification.error {
  border-left: 4px solid var(--error-color);
}

/* Loading States */
body.dark-mode .loading-spinner {
  color: var(--text-secondary);
}

body.dark-mode .loading-spinner i {
  color: var(--secondary-color);
}

/* Search and Filters */
body.dark-mode .search-container {
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
}

body.dark-mode .search-input {
  background: transparent;
  color: var(--text-primary);
  border: none;
}

body.dark-mode .search-input::placeholder {
  color: var(--text-muted);
}

/* Tables */
body.dark-mode table {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
}

body.dark-mode th {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-bottom: 2px solid var(--border-color);
}

body.dark-mode td {
  border-bottom: 1px solid var(--border-light);
  color: var(--text-secondary);
}

body.dark-mode tr:hover {
  background: var(--bg-secondary);
}

/* Error Messages */
body.dark-mode .error-message {
  background: rgba(220, 53, 69, 0.1);
  border: 1px solid var(--error-color);
  color: var(--error-light);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

/* Success Messages */
body.dark-mode .success-message {
  background: rgba(40, 167, 69, 0.1);
  border: 1px solid var(--success-color);
  color: var(--success-light);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

/* Links */
body.dark-mode a {
  color: var(--secondary-color);
  transition: color 0.3s ease;
}

body.dark-mode a:hover {
  color: var(--secondary-light);
  text-decoration: underline;
}

/* Scrollbars */
body.dark-mode ::-webkit-scrollbar {
  width: 8px;
}

body.dark-mode ::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

body.dark-mode ::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: var(--radius-sm);
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: var(--border-dark);
}

/* Comprehensive White Background Override */
body.dark-mode [style*="background: #ffffff"],
body.dark-mode [style*="background-color: #ffffff"],
body.dark-mode [style*="background: white"],
body.dark-mode [style*="background-color: white"],
body.dark-mode [style*="background: #fff"],
body.dark-mode [style*="background-color: #fff"],
body.dark-mode [style*="background-color:#ffffff"],
body.dark-mode [style*="background-color:#fff"],
body.dark-mode [style*="background-color:white"],
body.dark-mode [style*="background:#ffffff"],
body.dark-mode [style*="background:#fff"],
body.dark-mode [style*="background:white"] {
  background: var(--bg-tertiary) !important;
  background-color: var(--bg-tertiary) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Comprehensive Dark Text Override - catch all dark colors */
body.dark-mode [style*="color: #000000"],
body.dark-mode [style*="color: #000"],
body.dark-mode [style*="color: black"],
body.dark-mode [style*="color: #212529"],
body.dark-mode [style*="color: #343a40"],
body.dark-mode [style*="color: #495057"],
body.dark-mode [style*="color: #6c757d"],
body.dark-mode [style*="color: #2c3e50"],
body.dark-mode [style*="color: #34495e"],
body.dark-mode [style*="color:#000000"],
body.dark-mode [style*="color:#000"],
body.dark-mode [style*="color:black"],
body.dark-mode [style*="color:#212529"],
body.dark-mode [style*="color:#343a40"],
body.dark-mode [style*="color:#495057"],
body.dark-mode [style*="color:#6c757d"],
body.dark-mode [style*="color:#2c3e50"],
body.dark-mode [style*="color:#34495e"] {
  color: var(--text-primary) !important;
}

/* Special handling for small/secondary text */
body.dark-mode small,
body.dark-mode .text-muted,
body.dark-mode [style*="color: var(--text-muted)"],
body.dark-mode [style*="color: #6c757d"],
body.dark-mode [style*="font-size: 0.9rem"] {
  color: var(--text-muted) !important;
}

/* Ensure icons maintain good visibility */
body.dark-mode i.fas,
body.dark-mode i.far,
body.dark-mode i.fab,
body.dark-mode .fa {
  color: var(--secondary-color) !important;
}

/* Additional catch-all for any remaining styling issues */
body.dark-mode * {
  /* Remove any conflicting text shadows that might make text hard to read */
  text-shadow: none !important;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode .hero h1,
body.dark-mode .hero p {
  /* Re-add text shadow only for hero elements */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* CRITICAL: Profile Settings Layout Override - Must stay at end of file */
/* Override all responsive breakpoints for profile settings */
#profile-settings-section .profile-settings-content {
  display: grid !important;
  grid-template-columns: 2fr 1fr !important;
  gap: 2rem !important;
  align-items: start !important;
}

@media (min-width: 641px) {
  #profile-settings-section .profile-settings-content {
    display: grid !important;
    grid-template-columns: 2fr 1fr !important;
  }
}

@media (max-width: 768px) and (min-width: 641px) {
  #profile-settings-section .profile-settings-content {
    display: grid !important;
    grid-template-columns: 2fr 1fr !important;
  }
}

@media (max-width: 767px) and (min-width: 641px) {
  #profile-settings-section .profile-settings-content {
    display: grid !important;
    grid-template-columns: 2fr 1fr !important;
  }
}

/* Only allow single column on very small screens */
@media (max-width: 640px) {
  #profile-settings-section .profile-settings-content {
    grid-template-columns: 1fr !important;
  }
}