/* Dark Mode Styles */
body {
  transition: background-color 0.3s, color 0.3s;
}

/* Navbar Logo Avatar Styles */
#navbarLogo,
#profileAvatar {
  transition: all 0.3s ease;
  max-height: 50px;
}

#navbarLogo:hover,
#profileAvatar:hover {
  transform: scale(1.05);
}

.dark-mode {
  background: #121212 !important;
  color: #ffffff !important;
}

.dark-mode .dashboard-navbar,
.dark-mode .profile-navbar {
  background: #1e1e1e !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .navbar-left .app-logo {
  color: #4caf50 !important;
}

.dark-mode .theme-toggle {
  background: #333 !important;
  color: #ffffff !important;
}

.dark-mode .theme-toggle:hover {
  background: #4caf50 !important;
}

.dark-mode .user-avatar img {
  border-color: #4caf50 !important;
}

.dark-mode .welcome-section {
  background: linear-gradient(135deg, #2e7d32 0%, #ff9800 100%) !important;
}

.dark-mode .progress-section {
  background: #1e1e1e !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .progress-header h2 {
  color: #ffffff !important;
}

.dark-mode .progress-bar-container {
  background: #333 !important;
}

.dark-mode .dashboard-card {
  background: #1e1e1e !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .dashboard-card h3 {
  color: #ffffff !important;
}

.dark-mode .dashboard-card p {
  color: #b0b0b0 !important;
}

.dark-mode .card-action {
  color: #4caf50 !important;
}

.dark-mode .dashboard-card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4) !important;
}

.dark-mode .dashboard-card:hover .card-action {
  color: #ff9800 !important;
}

/* Login Page Dark Mode */
.dark-mode #login-page {
  background: #121212 !important;
}

.dark-mode .login-container {
  background: #1e1e1e !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .login-container header h1 {
  color: #4caf50 !important;
}

.dark-mode .form-group label {
  color: #ffffff !important;
}

.dark-mode .form-group input {
  background: #333 !important;
  border-color: #555 !important;
  color: #ffffff !important;
}

.dark-mode .form-group input:focus {
  border-color: #4caf50 !important;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2) !important;
}

.dark-mode .login-container button[type="submit"] {
  background: #4caf50 !important;
}

.dark-mode .login-container button[type="submit"]:hover {
  background: #45a049 !important;
}

.dark-mode .login-links a {
  color: #4caf50 !important;
}

/* Signup Page Dark Mode */
.dark-mode #signup-page {
  background: linear-gradient(135deg, #121212 0%, #1a1a1a 100%) !important;
}

.dark-mode .profile-card {
  background: #1e1e1e !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .profile-header h1 {
  color: #4caf50 !important;
}

.dark-mode .profile-header p {
  color: #b0b0b0 !important;
}

.dark-mode .profile-avatar {
  border-color: #4caf50 !important;
}

.dark-mode .change-photo-btn {
  background: #ff9800 !important;
  color: #000000 !important;
}

.dark-mode .change-photo-btn:hover {
  background: #f57c00 !important;
}

.dark-mode .delete-photo-btn {
  background: #ff5252 !important;
  color: #ffffff !important;
}

.dark-mode .delete-photo-btn:hover {
  background: #ff1744 !important;
}

.dark-mode .form-group input,
.dark-mode .form-group select {
  background: #333 !important;
  border-color: #555 !important;
  color: #ffffff !important;
}

.dark-mode .form-group input:focus,
.dark-mode .form-group select:focus {
  border-color: #4caf50 !important;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2) !important;
}

.dark-mode .theme-label {
  background: #333 !important;
  border-color: #555 !important;
  color: #b0b0b0 !important;
}

.dark-mode .theme-option input[type="radio"]:checked + .theme-label {
  border-color: #4caf50 !important;
  background: rgba(76, 175, 80, 0.1) !important;
  color: #4caf50 !important;
}

.dark-mode .save-btn,
.dark-mode .savethemebtn,
.dark-mode .updatepasswordBtn {
  background: linear-gradient(135deg, #4caf50 0%, #ff9800 100%) !important;
}

.dark-mode .cancel-btn {
  background: #333 !important;
  color: #b0b0b0 !important;
  border-color: #555 !important;
}

.dark-mode .cancel-btn:hover {
  background: #444 !important;
  color: #ffffff !important;
}

.dark-mode .edit-profile-section {
  background: #121212 !important;
}

/* Leaderboard Dark Mode */
.dark-mode #leaderboard {
  background: #121212 !important;
}

.dark-mode table {
  background: #1e1e1e !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode th {
  background: #333 !important;
  color: #ffffff !important;
}

.dark-mode td {
  color: #ffffff !important;
  border-bottom-color: #333 !important;
}

.dark-mode tbody tr:hover {
  background: #2a2a2a !important;
}

/* Footer Dark Mode */
.dark-mode footer#footer {
  background: #1e1e1e !important;
  color: #ffffff !important;
  border-top-color: #333 !important;
}

.dark-mode footer#footer nav ul li a,
.dark-mode #footer #socials a {
  color: #ffffff !important;
}

.dark-mode .footer-quote {
  color: #b0b0b0 !important;
}

/* Sparkles Dark Mode */
.dark-mode .sparkle {
  opacity: 0.8 !important;
}

/* Avatar Upload Modal Dark Mode */
.dark-mode .avatar-crop-modal {
  background: rgba(0, 0, 0, 0.95) !important;
}

.dark-mode .modal-content {
  background: #1e1e1e !important;
}

.dark-mode .modal-header h3 {
  color: #4caf50 !important;
}

.dark-mode .modal-header {
  border-bottom-color: #333 !important;
}

.dark-mode .modal-footer {
  background: #2a2a2a !important;
}

.dark-mode .modal-body {
  background: #1e1e1e !important;
}

.dark-mode .cropper-container-wrapper {
  background: #2a2a2a !important;
}

.dark-mode .crop-btn {
  background: #4caf50 !important;
  color: white !important;
}

.dark-mode .crop-btn:hover {
  background: #ff9800 !important;
  color: #000000 !important;
}

.dark-mode .file-info-text {
  color: #b0b0b0 !important;
}

.dark-mode .file-info-text .file-name {
  color: #ffffff !important;
}

.dark-mode .upload-status-text {
  color: #b0b0b0 !important;
}

.dark-mode .upload-status-text.success {
  color: #4caf50 !important;
}

.dark-mode .upload-status-text.error {
  color: #ff5252 !important;
}

/* Preview Modal Dark Mode */
.dark-mode .avatar-preview-modal {
  background: rgba(0, 0, 0, 0.95) !important;
}

.dark-mode .preview-close-btn {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #333 !important;
}

.dark-mode .preview-close-btn:hover {
  background: white !important;
}

/* verse date */
.dark-mode .verse-date {
  color: #ffffff ;
}

/* todays verse dark mode */
.dark-mode .verse-card,
.dark-mode .moral-card,
.dark-mode .reflection-card,
.dark-mode .challenge-card {
  background: #1e1e1e !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}


.dark-mode .moral-card h3{
  color: #feca57;
}

.dark-mode .reflection-card h3{
  color: #48dbfb;
}




.dark-mode .verse-card h2,
.dark-mode .moral-card p,
.dark-mode .reflection-card p,
.dark-mode .challenge-card p
 {
  color: #ffffff !important;
}


/* navcard dark mode */

.dark-mode .nav-card {
  background: #1e1e1e !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}


.dark-mode .nav-card p{
  color: #fff;
}
/* games dark mode */
.dark-mode .game-card {
  background: #1e1e1e !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}


/* leaderboard dark mode styles */

 .dark-mode .stat-card {
  background: #1e1e1e !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .stat-label {
  color: #fff;
}


.dark-mode .leaderboard-table{
  background: #1e1e1e;
  
  border: 2px solid #fff;
}

.dark-mode .leaderboard-table p{
  color: #fff;
}
/* .dark-mode .spinner {
  border: 4px solid #4caf50;
} */

/* =============================================
   Support page dark mode
   ============================================= */
.dark-mode .support-nav {
  background: #1e1e1e !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .support-nav .nav-links a {
  color: #e0e0e0 !important;
}

.dark-mode .support-nav .nav-links a:hover,
.dark-mode .support-nav .nav-links a.active {
  color: #4caf50 !important;
}

.dark-mode .hamburger {
  color: #ffffff !important;
}

.dark-mode .support-hero-tagline {
  color: #b0b0b0 !important;
}

.dark-mode .donate-card {
  background: #1e1e1e !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
  border-color: #333 !important;
}

.dark-mode .donate-card h2 {
  color: #ffffff !important;
}

.dark-mode .donate-card p {
  color: #b0b0b0 !important;
}

.dark-mode .amount-btn,
.dark-mode .currency-btn {
  background: #333 !important;
  color: #e0e0e0 !important;
  border-color: #444 !important;
}

.dark-mode .amount-btn:hover,
.dark-mode .currency-btn:hover:not(:disabled) {
  border-color: #4caf50 !important;
  color: #4caf50 !important;
}

.dark-mode .amount-btn.active,
.dark-mode .currency-btn.active {
  background: #4caf50 !important;
  color: #ffffff !important;
  border-color: #4caf50 !important;
}

.dark-mode .amount-custom,
.dark-mode .donate-input {
  background: #2a2a2a !important;
  border-color: #444 !important;
  color: #ffffff !important;
}

.dark-mode .amount-custom::placeholder,
.dark-mode .donate-input::placeholder {
  color: #888 !important;
}

.dark-mode .currency-label,
.dark-mode .rate-display {
  color: #b0b0b0 !important;
}

.dark-mode .section-heading {
  color: #ffffff !important;
}

.dark-mode .number-card {
  background: #1e1e1e !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .number-value {
  color: #4caf50 !important;
}

.dark-mode .number-label {
  color: #b0b0b0 !important;
}

.dark-mode .activity-item {
  color: #e0e0e0 !important;
  border-bottom-color: #333 !important;
}

.dark-mode .activity-note {
  color: #b0b0b0 !important;
}

.dark-mode .credits-tiers .tier {
  background: #1e1e1e !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.dark-mode .tier-name {
  color: #ffffff !important;
}

.dark-mode .tier-desc {
  color: #b0b0b0 !important;
}

.dark-mode .credits-intro {
  color: #b0b0b0 !important;
}

.dark-mode .support-footer-cta {
  background: #1e1e1e !important;
}

.dark-mode .support-footer-cta p {
  color: #b0b0b0 !important;
}