/* Dark Mode Styles */

/* Base dark mode styles for the HTML element */
.dark {
    color-scheme: dark;
}

/* Body and background colors */
.dark body {
    background-color: #121212;
    color: #e0e0e0;
}

/* Headers */
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
    color: #ffffff;
}

/* Background colors */
.dark .bg-white {
    background-color: #1e1e1e !important;
}

.dark .bg-gray-50 {
    background-color: #121212 !important;
}

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

.dark .bg-gray-200 {
    background-color: #252525 !important;
}

.dark .bg-gray-300 {
    background-color: #374151 !important;
}

.dark .bg-gray-800 {
    background-color: #1f2937 !important;
}

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

/* Text colors */
.dark .text-gray-600,
.dark .text-gray-700,
.dark .text-gray-800,
.dark .text-gray-900,
.dark .text-secondary {
    color: #d0d0d0 !important;
}

.dark .text-gray-500 {
    color: #9ca3af !important;
}

.dark .text-gray-400 {
    color: #9ca3af !important;
}

.dark .text-gray-300 {
    color: #d1d5db !important;
}

.dark .text-gray-100 {
    color: #f3f4f6 !important;
}

/* Border colors */
.dark .border-gray-100,
.dark .border-gray-200 {
    border-color: #2d2d2d !important;
}

.dark .border-gray-300 {
    border-color: #4b5563 !important;
}

/* Shadow adjustments */
.dark .shadow-sm,
.dark .shadow,
.dark .shadow-md,
.dark .shadow-lg,
.dark .shadow-xl {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important;
}

/* Inputs and form elements */
.dark input,
.dark textarea,
.dark select {
    background-color: #252525 !important;
    color: #e0e0e0 !important;
    border-color: #3d3d3d !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: #8c8c8c !important;
}

.dark input:focus,
.dark textarea:focus,
.dark select:focus {
    border-color: var(--primary-color, #0F9D58) !important;
}

/* Cards and containers */
.dark .card,
.dark .container-bg {
    background-color: #252525 !important;
    border-color: #3d3d3d !important;
}

/* Portfolio specific styles */
.dark .filter-btn {
    background-color: #2d2d2d !important;
    border-color: #3d3d3d !important;
    color: #d0d0d0 !important;
}

.dark .filter-btn.active {
    background-color: var(--primary-color, #0F9D58) !important;
    color: #ffffff !important;
}

.dark .view-toggle-btn {
    background-color: #2d2d2d !important;
    border-color: #3d3d3d !important;
    color: #d0d0d0 !important;
}

.dark .view-toggle-btn.active {
    background-color: var(--primary-color, #0F9D58) !important;
    color: #ffffff !important;
}

.dark .project-card {
    background-color: #252525 !important;
    border-color: #3d3d3d !important;
}

/* Navigation and header */
.dark header {
    background-color: #1a1a1a !important;
    border-color: #2d2d2d !important;
}

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

.dark .nav-link {
    color: #d0d0d0 !important;
}

.dark .nav-link:hover,
.dark .nav-link.active {
    color: var(--primary-color, #0F9D58) !important;
}

/* Mobile menu */
.dark #mobileMenu {
    background-color: #1a1a1a !important;
    border-color: #2d2d2d !important;
}

/* Footer */
.dark footer {
    background-color: #111111 !important;
}

/* Dark mode toggle button */
.dark #themeToggle {
    background-color: #2d2d2d !important;
    border-color: #3d3d3d !important;
}

/* Filter section */
.dark .py-8.bg-white {
    background-color: rgba(30, 30, 30, 0.95) !important;
    border-color: #2d2d2d !important;
}

/* Custom primary color elements with opacity */
.dark .bg-primary\/5 {
    background-color: rgba(15, 157, 88, 0.05) !important;
}

.dark .bg-primary\/10 {
    background-color: rgba(15, 157, 88, 0.1) !important;
}

.dark .bg-primary\/20 {
    background-color: rgba(15, 157, 88, 0.2) !important;
}

/* Chatbot */
.dark .chat-container {
    background-color: #1e1e1e !important;
    border-color: #3d3d3d !important;
}

.dark .chat-messages {
    background-color: #252525 !important;
}

.dark .chat-message-user {
    background-color: #0F9D58 !important;
}

.dark .chat-message-bot {
    background-color: #2d2d2d !important;
}

.dark .chat-input {
    background-color: #252525 !important;
    border-color: #3d3d3d !important;
}

/* Prevent flash of unstyled content when loading page */
.transition-theme {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Enhanced Dark Mode Styles for Home and About Pages */

/* Hero Sections */
.dark .hero-section {
    background-color: #1a1a1a !important;
}

.dark .bg-gradient-to-br {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
}

.dark .bg-gradient-to-br.from-gray-50 {
    background: linear-gradient(135deg, #121212 0%, #1a1a1a 100%) !important;
}

.dark .bg-gradient-to-br.from-white {
    background: linear-gradient(135deg, #1a1a1a 0%, #252525 100%) !important;
}

/* Counter Boxes and Statistics */
.dark .counter-box {
    background-color: #252525 !important;
    border-color: #3d3d3d !important;
}

.dark .stats-card {
    background-color: #252525 !important;
    border-color: #3d3d3d !important;
}

/* Tech Badges */
.dark .tech-badge {
    background-color: #2d2d2d !important;
    color: #d0d0d0 !important;
    border-color: #3d3d3d !important;
}

.dark .bg-blue-100 {
    background-color: rgba(59, 130, 246, 0.2) !important;
}

.dark .text-blue-800 {
    color: #93c5fd !important;
}

.dark .bg-green-100 {
    background-color: rgba(34, 197, 94, 0.2) !important;
}

.dark .text-green-800 {
    color: #86efac !important;
}

.dark .bg-purple-100 {
    background-color: rgba(147, 51, 234, 0.2) !important;
}

.dark .text-purple-800 {
    color: #c4b5fd !important;
}

.dark .bg-orange-100 {
    background-color: rgba(249, 115, 22, 0.2) !important;
}

.dark .text-orange-800 {
    color: #fdba74 !important;
}

.dark .bg-yellow-100 {
    background-color: rgba(234, 179, 8, 0.2) !important;
}

.dark .text-yellow-800 {
    color: #fde047 !important;
}

.dark .bg-red-100 {
    background-color: rgba(239, 68, 68, 0.2) !important;
}

.dark .text-red-800 {
    color: #fca5a5 !important;
}

/* GitHub Repositories Section */
.dark .repo-card {
    background-color: #252525 !important;
    border-color: #3d3d3d !important;
}

/* About Page Specific Styles */
.dark .bg-white.rounded-xl,
.dark .bg-white.rounded-2xl,
.dark .bg-white.rounded-3xl {
    background-color: #252525 !important;
    border-color: #3d3d3d !important;
}

.dark .text-gray-900 {
    color: #f3f4f6 !important;
}

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

/* Mission and Vision Cards */
.dark .bg-gradient-to-br.from-primary {
    background: linear-gradient(135deg, #0F9D58 0%, rgba(15, 157, 88, 0.8) 100%) !important;
}

.dark .bg-gradient-to-br.from-accent {
    background: linear-gradient(135deg, #34D399 0%, rgba(52, 211, 153, 0.8) 100%) !important;
}

/* Floating Contact Button */
.dark #floatingContactBtn {
    background-color: #0F9D58 !important;
    box-shadow: 0 10px 15px -3px rgba(15, 157, 88, 0.4), 0 4px 6px -2px rgba(15, 157, 88, 0.2) !important;
}

/* Scroll to Top Button */
.dark #scrollToTop {
    background-color: #0F9D58 !important;
    box-shadow: 0 10px 15px -3px rgba(15, 157, 88, 0.4), 0 4px 6px -2px rgba(15, 157, 88, 0.2) !important;
}

/* Testimonials */
.dark .testimonial-wrapper {
    background-color: #252525 !important;
    border-color: #3d3d3d !important;
}

.dark .testimonial-dot {
    background-color: #4b5563 !important;
}

.dark .testimonial-dot.active {
    background-color: #0F9D58 !important;
}

/* Portfolio Section */
.dark .portfolio-card {
    background-color: #252525 !important;
    border-color: #3d3d3d !important;
}

/* Service Cards */
.dark .service-card {
    background-color: #252525 !important;
    border-color: #3d3d3d !important;
}

/* Achievement Cards */
.dark .achievement-card {
    background-color: #252525 !important;
    border-color: #3d3d3d !important;
}

/* Gradient Backgrounds in Dark Mode */
.dark .bg-gradient-to-br.from-gray-50.to-white {
    background: linear-gradient(135deg, #121212 0%, #1a1a1a 100%) !important;
}

.dark .bg-gradient-to-br.from-white.via-gray-50 {
    background: linear-gradient(135deg, #1a1a1a 0%, #121212 50%, #1a1a1a 100%) !important;
}

/* Buttons */
.dark .btn-primary {
    background: linear-gradient(135deg, #0F9D58 0%, #34a853 100%) !important;
    color: white !important;
}

.dark .btn-secondary {
    background-color: #2d2d2d !important;
    color: #0F9D58 !important;
    border-color: #0F9D58 !important;
}

.dark .btn-secondary:hover {
    background-color: #0F9D58 !important;
    color: white !important;
}

/* Mobile Menu */
.dark .mobile-menu {
    background-color: #1a1a1a !important;
    border-color: #2d2d2d !important;
}

/* Feature Icons and Boxes */
.dark .feature-box {
    background-color: #252525 !important;
    border-color: #3d3d3d !important;
}

/* Contact Section */
.dark .contact-card {
    background-color: rgba(37, 37, 37, 0.95) !important;
    border-color: #3d3d3d !important;
}

/* Form Elements in Dark Mode */
.dark .form-input {
    background-color: #252525 !important;
    border-color: #3d3d3d !important;
    color: #e0e0e0 !important;
}

.dark .form-input:focus {
    border-color: #0F9D58 !important;
    box-shadow: 0 0 0 3px rgba(15, 157, 88, 0.1) !important;
}

/* Loading States */
.dark .animate-pulse {
    background-color: #3d3d3d !important;
}

/* Hover States */
.dark .hover\:bg-gray-50:hover {
    background-color: #252525 !important;
}

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

/* Opacity Backgrounds */
.dark .bg-opacity-10 {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.dark .bg-opacity-15 {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

.dark .bg-opacity-20 {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Social Media Icons */
.dark .social-icon {
    background-color: #2d2d2d !important;
    color: #d0d0d0 !important;
    border-color: #3d3d3d !important;
}

.dark .social-icon:hover {
    background-color: #0F9D58 !important;
    color: white !important;
}

/* Code Blocks */
.dark pre {
    background-color: #1e1e1e !important;
    border-color: #3d3d3d !important;
}

.dark code {
    background-color: #252525 !important;
    color: #f8f8f2 !important;
}

/* Dividers */
.dark hr {
    border-color: #3d3d3d !important;
}

.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: #3d3d3d !important;
}

/* Tables */
.dark table {
    background-color: #252525 !important;
}

.dark th {
    background-color: #2d2d2d !important;
    color: #f3f4f6 !important;
    border-color: #3d3d3d !important;
}

.dark td {
    border-color: #3d3d3d !important;
    color: #e0e0e0 !important;
}

/* Badge and Pill Elements */
.dark .badge {
    background-color: #2d2d2d !important;
    color: #d0d0d0 !important;
    border-color: #3d3d3d !important;
}

/* Specific Background Patterns */
.dark .bg-grid-pattern {
    background-image: radial-gradient(circle, #3d3d3d 1px, transparent 1px) !important;
}

/* About Page Profile Card */
.dark .profile-card {
    background-color: #252525 !important;
    border-color: #3d3d3d !important;
}

/* CTA Sections */
.dark .cta-section {
    background-color: #1a1a1a !important;
}

/* Enhanced backdrop blur for dark mode */
.dark .backdrop-blur-sm {
    backdrop-filter: blur(4px) !important;
    background-color: rgba(26, 26, 26, 0.8) !important;
}

.dark .backdrop-blur-md {
    backdrop-filter: blur(12px) !important;
    background-color: rgba(26, 26, 26, 0.9) !important;
}