/* Dark mode activation - applies when 'dark' class is on html or body */
body.dark {
    color-scheme: dark;
}

/* Background colors */
body.dark body {
    background-color: #0a0a0a;
    color: #e5e5e5;
}

body.dark .bg-white {
    background-color: #1a1a1a !important;
}

body.dark.bg-gray-50 {
    background-color: #0f0f0f !important;
    color: #e5e5e5;
}

body.dark .bg-gray-50 {
    background-color: #0f0f0f !important;
}

body.dark .bg-gray-100 {
    background-color: #1f1f1f !important;
}

body.dark .bg-gray-200 {
    background-color: #2a2a2a !important;
}

body.dark .bg-gray-900 {
    background-color: #000000 !important;
}

/* Text colors */
body.dark .text-gray-900 {
    color: #ffffff !important;
}

body.dark .text-gray-800 {
    color: #f0f0f0 !important;
}

body.dark .text-gray-700 {
    color: #d4d4d4 !important;
}

body.dark .text-gray-600 {
    color: #a3a3a3 !important;
}

body.dark .text-gray-500 {
    color: #737373 !important;
}

body.dark .text-gray-400 {
    color: #525252 !important;
}

/* Border colors */
body.dark .border-gray-200 {
    border-color: #2a2a2a !important;
}

body.dark .border-gray-300 {
    border-color: #3a3a3a !important;
}

body.dark .divide-gray-200>*+* {
    border-color: #2a2a2a !important;
}

/* Primary color - Green theme */
body.dark .bg-indigo-600,
body.dark .bg-purple-600,
body.dark .bg-blue-600 {
    background-color: #14e531 !important;
    color: #000000 !important;
}

body.dark .hover\:bg-indigo-700:hover,
body.dark .hover\:bg-purple-700:hover,
body.dark .hover\:bg-blue-700:hover {
    background-color: #10b526 !important;
}

body.dark .text-indigo-600,
body.dark .text-purple-600,
body.dark .text-blue-600 {
    color: #14e531 !important;
}

body.dark .hover\:text-indigo-700:hover,
body.dark .hover\:text-indigo-600:hover {
    color: #10b526 !important;
}

body.dark .border-indigo-600 {
    border-color: #14e531 !important;
}

/* Gradient backgrounds with green/black theme */
body.dark .gradient-bg {
    background: linear-gradient(135deg, #14e531 0%, #000000 100%) !important;
}

body.dark .popular-badge {
    background: linear-gradient(135deg, #14e531 0%, #000000 100%) !important;
    color: #ffffff !important;
}

/* Accent colors for icons/badges */
body.dark .bg-indigo-100,
body.dark .bg-blue-100 {
    background-color: rgba(20, 229, 49, 0.1) !important;
}

body.dark .bg-indigo-50 {
    background-color: rgba(20, 229, 49, 0.05) !important;
}

body.dark .text-indigo-100 {
    color: rgba(20, 229, 49, 0.8) !important;
}

body.dark .bg-purple-100 {
    background-color: rgba(20, 229, 49, 0.15) !important;
}

body.dark .text-purple-600 {
    color: #14e531 !important;
}

body.dark .bg-green-100 {
    background-color: rgba(20, 229, 49, 0.1) !important;
}

body.dark .text-green-600 {
    color: #14e531 !important;
}

body.dark .bg-orange-100 {
    background-color: rgba(255, 154, 0, 0.1) !important;
}

body.dark .text-orange-600 {
    color: #ff9a00 !important;
}

body.dark .bg-yellow-100 {
    background-color: rgba(255, 214, 0, 0.1) !important;
}

body.dark .text-yellow-600 {
    color: #ffd600 !important;
}

/* Form inputs */
body.dark input[type="text"],
body.dark input[type="email"],
body.dark input[type="password"],
body.dark input[type="tel"],
body.dark textarea,
body.dark select {
    background-color: #1a1a1a !important;
    border-color: #3a3a3a !important;
    color: #e5e5e5 !important;
}

body.dark input::placeholder,
body.dark textarea::placeholder {
    color: #737373 !important;
}

body.dark input:focus,
body.dark textarea:focus,
body.dark select:focus {
    border-color: #14e531 !important;
    ring-color: #14e531 !important;
}

/* Buttons */
body.dark .bg-black {
    background-color: #000000 !important;
    color: #ffffff !important;
}

body.dark .hover\:bg-gray-800:hover {
    background-color: #1a1a1a !important;
}

body.dark .hover\:bg-gray-50:hover {
    background-color: #2a2a2a !important;
}

body.dark .hover\:bg-gray-100:hover {
    background-color: #2a2a2a !important;
}

/* Shadows */
body.dark .shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(20, 229, 49, 0.05) !important;
}

body.dark .shadow {
    box-shadow: 0 1px 3px 0 rgba(20, 229, 49, 0.1), 0 1px 2px -1px rgba(20, 229, 49, 0.1) !important;
}

body.dark .shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(20, 229, 49, 0.1), 0 8px 10px -6px rgba(20, 229, 49, 0.1) !important;
}

body.dark .shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(20, 229, 49, 0.25) !important;
}

/* Cards hover effects */
body.dark .card-hover:hover {
    box-shadow: 0 20px 25px -5px rgba(20, 229, 49, 0.2) !important;
}

/* Modal backdrop */
body.dark .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

/* Navigation */
body.dark nav {
    background-color: #000000 !important;
    border-bottom: 1px solid #2a2a2a;
}

/* Tables */
body.dark table {
    border-color: #2a2a2a !important;
}

body.dark thead {
    background-color: #1a1a1a !important;
}

body.dark tbody tr:hover {
    background-color: #1f1f1f !important;
}

/* Specific component overrides */
body.dark .bg-blue-50 {
    background-color: rgba(20, 229, 49, 0.05) !important;
}

body.dark .border-blue-100 {
    border-color: rgba(20, 229, 49, 0.2) !important;
}

body.dark .bg-green-100 {
    background-color: rgba(20, 229, 49, 0.1) !important;
}

body.dark .text-green-500 {
    color: #14e531 !important;
}

/* Stats and badges */
body.dark .bg-indigo-700 {
    background-color: #10b526 !important;
}

body.dark .hover\:bg-indigo-800:hover {
    background-color: #0d9620 !important;
}

/* Alert/Info boxes */
body.dark .bg-blue-50 {
    background-color: rgba(20, 229, 49, 0.05) !important;
    border-color: rgba(20, 229, 49, 0.2) !important;
}

/* Checkbox and Radio */
body.dark input[type="checkbox"],
body.dark input[type="radio"] {
    border-color: #3a3a3a !important;
}

body.dark input[type="checkbox"]:checked,
body.dark input[type="radio"]:checked {
    background-color: #14e531 !important;
    border-color: #14e531 !important;
}

/* File upload area */
body.dark .border-dashed {
    border-color: #3a3a3a !important;
}

/* Scrollbars (for webkit browsers) */
body.dark ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

body.dark ::-webkit-scrollbar-track {
    background: #1a1a1a;
}

body.dark ::-webkit-scrollbar-thumb {
    background: #3a3a3a;
    border-radius: 6px;
}

body.dark ::-webkit-scrollbar-thumb:hover {
    background: #14e531;
}

/* Selection */
body.dark ::selection {
    background-color: #14e531;
    color: #000000;
}

/* Links */
body.dark a:not(.bg-indigo-600):not(.bg-gray-900):not(.bg-white) {
    color: #14e531;
}

body.dark a:not(.bg-indigo-600):not(.bg-gray-900):not(.bg-white):hover {
    color: #10b526;
}

/* Social login buttons - keep original colors */
body.dark button svg[viewBox="0 0 24 24"] path[fill="#4285F4"],
body.dark button svg[viewBox="0 0 24 24"] path[fill="#34A853"],
body.dark button svg[viewBox="0 0 24 24"] path[fill="#FBBC05"],
body.dark button svg[viewBox="0 0 24 24"] path[fill="#EA4335"],
body.dark button svg[viewBox="0 0 24 24"] path[fill="#1877F2"] {
    opacity: 0.9;
}

/* Toggle switch for dark mode (optional addition) */
.dark-mode-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    background-color: #14e531;
    color: #000000;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(20, 229, 49, 0.3);
    transition: all 0.3s ease;
    border: 2px solid #fff;
}

.dark-mode-toggle:hover {
    background-color: #10b526;
    transform: scale(1.1);
}

body.dark .dark-mode-toggle {
    background-color: #1a1a1a;
    color: #14e531;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}

/* Ensure proper contrast for important text
body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark h6 {
    color: #14e531;
} */

/* Loading states */
body.dark .animate-pulse {
    background-color: #2a2a2a !important;
}

body.dark .text-black {
    color: rgb(249 250 251);
}