/* =========================
   TERMINAL-X DARK THEME
   iOS + Cyberpunk Dark Mode
   ========================= */

/* Dark Mode Toggle - iOS Style */
.dark-mode-toggle {
    position: relative;
    width: 60px;
    height: 32px;
    background: linear-gradient(135deg, #2c3e50, #34495e);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-mode-toggle.active {
    background: linear-gradient(135deg, #667eea, #764ba2);
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.3),
                inset 0 2px 4px rgba(255, 255, 255, 0.1);
}

.dark-mode-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #ffffff, #f8f9fa);
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.dark-mode-toggle.active::after {
    transform: translateX(28px);
    background: linear-gradient(135deg, #ffffff, #e8eaf6);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Dark Mode Base Styles */
body.dark-mode {
    background: linear-gradient(135deg, #0a0a0a, #1a1a2e);
    color: #e8eaf6;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Dark Mode Navigation */
body.dark-mode .navbar {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(26, 26, 46, 0.9));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
                0 0 20px rgba(102, 126, 234, 0.1);
    border-bottom: 1px solid rgba(102, 126, 234, 0.2);
}

body.dark-mode .navbar-brand {
    color: #667eea !important;
    text-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
}

body.dark-mode .navbar-nav .nav-link {
    color: #b8bcc8 !important;
    transition: all 0.3s ease;
}

body.dark-mode .navbar-nav .nav-link:hover {
    color: #667eea !important;
    background: rgba(102, 126, 234, 0.1);
    text-shadow: 0 0 5px rgba(102, 126, 234, 0.3);
}

/* Dark Mode Cards */
body.dark-mode .card-inner {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(26, 26, 46, 0.8));
    color: #e8eaf6;
    border: 1px solid rgba(102, 126, 234, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
                0 0 20px rgba(102, 126, 234, 0.1);
}

body.dark-mode .card-title {
    color: #ffffff;
    text-shadow: 0 0 5px rgba(102, 126, 234, 0.3);
}

body.dark-mode .card-text {
    color: #b8bcc8;
}

/* Dark Mode Forms */
body.dark-mode .form-control {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(26, 26, 46, 0.6));
    border: 1px solid rgba(102, 126, 234, 0.3);
    color: #e8eaf6;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body.dark-mode .form-control:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2),
                0 0 20px rgba(102, 126, 234, 0.3);
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(26, 26, 46, 0.7));
}

body.dark-mode .form-control::placeholder {
    color: rgba(184, 188, 200, 0.4);
}

body.dark-mode .form-label {
    color: #b8bcc8;
}

/* Dark Mode Buttons */
body.dark-mode .btn-primary {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #ffffff;
    border: 1px solid rgba(102, 126, 234, 0.3);
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
}

body.dark-mode .btn-primary:hover {
    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.5),
                0 0 30px rgba(102, 126, 234, 0.3);
    transform: translateY(-2px);
}

body.dark-mode .btn-secondary {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: #e8eaf6;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .btn-secondary:hover {
    background: linear-gradient(135deg, #34495e, #2c3e50);
    box-shadow: 0 8px 30px rgba(44, 62, 80, 0.4);
}

body.dark-mode .btn-cyber {
    background: linear-gradient(135deg, #00d4ff, #ff00ff);
    color: #ffffff;
    border: 1px solid rgba(0, 212, 255, 0.3);
    animation: cyberGlow 2s ease-in-out infinite alternate;
}


/* Dark Mode Dropdowns */
body.dark-mode .dropdown-menu {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(26, 26, 46, 0.9));
    border: 1px solid rgba(102, 126, 234, 0.2);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4),
                0 0 30px rgba(102, 126, 234, 0.2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

body.dark-mode .dropdown-item {
    color: #e8eaf6;
    transition: all 0.3s ease;
}

body.dark-mode .dropdown-item:hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
    color: #667eea;
    text-shadow: 0 0 5px rgba(102, 126, 234, 0.3);
}

body.dark-mode .dropdown-divider {
    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.3), transparent);
}

/* Dark Mode Modals */
body.dark-mode .modal {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

body.dark-mode .modal-content {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(26, 26, 46, 0.9));
    color: #e8eaf6;
    border: 1px solid rgba(102, 126, 234, 0.2);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
                0 0 40px rgba(102, 126, 234, 0.2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

body.dark-mode .modal-title {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
}

body.dark-mode .modal-close {
    color: rgba(184, 188, 200, 0.4);
}

body.dark-mode .modal-close:hover {
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.1);
    text-shadow: 0 0 5px rgba(231, 76, 60, 0.3);
}

/* Dark Mode Alerts */
body.dark-mode .alert {
    border: none;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

body.dark-mode .alert-success {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.9), rgba(39, 174, 96, 0.9));
    color: #ffffff;
    border: 1px solid rgba(46, 204, 113, 0.3);
    box-shadow: 0 4px 20px rgba(46, 204, 113, 0.3);
}

body.dark-mode .alert-danger {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.9), rgba(192, 57, 43, 0.9));
    color: #ffffff;
    border: 1px solid rgba(231, 76, 60, 0.3);
    box-shadow: 0 4px 20px rgba(231, 76, 60, 0.3);
}

body.dark-mode .alert-warning {
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.9), rgba(243, 156, 18, 0.9));
    color: #ffffff;
    border: 1px solid rgba(241, 196, 15, 0.3);
    box-shadow: 0 4px 20px rgba(241, 196, 15, 0.3);
}

body.dark-mode .alert-info {
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.9), rgba(41, 128, 185, 0.9));
    color: #ffffff;
    border: 1px solid rgba(52, 152, 219, 0.3);
    box-shadow: 0 4px 20px rgba(52, 152, 219, 0.3);
}

/* Dark Mode Badges */
body.dark-mode .badge-primary {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.9), rgba(118, 75, 162, 0.9));
    color: #ffffff;
    border: 1px solid rgba(102, 126, 234, 0.3);
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
}

body.dark-mode .badge-success {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.9), rgba(39, 174, 96, 0.9));
    color: #ffffff;
    border: 1px solid rgba(46, 204, 113, 0.3);
    box-shadow: 0 2px 10px rgba(46, 204, 113, 0.3);
}

body.dark-mode .badge-danger {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.9), rgba(192, 57, 43, 0.9));
    color: #ffffff;
    border: 1px solid rgba(231, 76, 60, 0.3);
    box-shadow: 0 2px 10px rgba(231, 76, 60, 0.3);
}

body.dark-mode .badge-warning {
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.9), rgba(243, 156, 18, 0.9));
    color: #ffffff;
    border: 1px solid rgba(241, 196, 15, 0.3);
    box-shadow: 0 2px 10px rgba(241, 196, 15, 0.3);
}

body.dark-mode .badge-cyber {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.9), rgba(255, 0, 255, 0.9));
    color: #ffffff;
    border: 1px solid rgba(0, 212, 255, 0.3);
    animation: cyberBadgeGlow 2s ease-in-out infinite alternate;
}


/* Dark Mode Footer */
body.dark-mode .footer {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(26, 26, 46, 0.9));
    color: #b8bcc8;
    border-top: 1px solid rgba(102, 126, 234, 0.2);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3);
}

/* Dark Mode Hero Section */
body.dark-mode .hero-section {
    background: linear-gradient(135deg, #1a1a2e, #0a0a0a);
    color: #ffffff;
    box-shadow: inset 0 0 50px rgba(102, 126, 234, 0.1);
}

body.dark-mode .hero-section h1 {
    color: #ffffff;
    text-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
}

body.dark-mode .hero-section p {
    color: #b8bcc8;
}

/* Dark Mode Content Wrapper */
body.dark-mode .content-wrapper {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(26, 26, 46, 0.8));
    color: #e8eaf6;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

/* Dark Mode Headings */
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: #ffffff;
    text-shadow: 0 0 5px rgba(102, 126, 234, 0.3);
}

/* Dark Mode Text Colors */
body.dark-mode .text-muted {
    color: rgba(184, 188, 200, 0.6) !important;
}

body.dark-mode .text-primary {
    color: #667eea !important;
    text-shadow: 0 0 5px rgba(102, 126, 234, 0.3);
}

body.dark-mode .text-secondary {
    color: #b8bcc8 !important;
}

body.dark-mode .text-success {
    color: #2ecc71 !important;
    text-shadow: 0 0 5px rgba(46, 204, 113, 0.3);
}

body.dark-mode .text-danger {
    color: #e74c3c !important;
    text-shadow: 0 0 5px rgba(231, 76, 60, 0.3);
}

body.dark-mode .text-warning {
    color: #f39c12 !important;
    text-shadow: 0 0 5px rgba(241, 196, 15, 0.3);
}

body.dark-mode .text-info {
    color: #3498db !important;
    text-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
}

body.dark-mode .text-light {
    color: #e8eaf6 !important;
}

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

body.dark-mode .text-white {
    color: #ffffff !important;
}

/* Dark Mode Cyberpunk Colors */
body.dark-mode .text-cyber {
    color: #00d4ff !important;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

body.dark-mode .text-neon {
    color: #ff00ff !important;
    text-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
}

body.dark-mode .text-metallic {
    color: #c0c0c0 !important;
    text-shadow: 0 0 5px rgba(192, 192, 192, 0.3);
}

/* Dark Mode Borders */
body.dark-mode .border {
    border-color: rgba(102, 126, 234, 0.2) !important;
}

body.dark-mode .border-primary {
    border-color: #667eea !important;
    box-shadow: 0 0 5px rgba(102, 126, 234, 0.3);
}

body.dark-mode .border-secondary {
    border-color: rgba(184, 188, 200, 0.3) !important;
}

body.dark-mode .border-success {
    border-color: #2ecc71 !important;
    box-shadow: 0 0 5px rgba(46, 204, 113, 0.3);
}

body.dark-mode .border-danger {
    border-color: #e74c3c !important;
    box-shadow: 0 0 5px rgba(231, 76, 60, 0.3);
}

body.dark-mode .border-warning {
    border-color: #f39c12 !important;
    box-shadow: 0 0 5px rgba(241, 196, 15, 0.3);
}

body.dark-mode .border-info {
    border-color: #3498db !important;
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
}

body.dark-mode .border-light {
    border-color: rgba(184, 188, 200, 0.3) !important;
}

body.dark-mode .border-dark {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

body.dark-mode .border-white {
    border-color: #ffffff !important;
}

/* Dark Mode Cyberpunk Borders */
body.dark-mode .border-cyber {
    border-color: #00d4ff !important;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

body.dark-mode .border-neon {
    border-color: #ff00ff !important;
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.3);
}

body.dark-mode .border-metallic {
    border-color: #c0c0c0 !important;
    box-shadow: 0 0 5px rgba(192, 192, 192, 0.3);
}

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

body.dark-mode ::-webkit-scrollbar-track {
    background: linear-gradient(135deg, #0a0a0a, #1a1a2e);
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.3);
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #764ba2, #667eea);
    box-shadow: 0 0 15px rgba(102, 126, 234, 0.5);
}

/* Dark Mode Animations */
body.dark-mode .hover-lift:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4),
                0 0 30px rgba(102, 126, 234, 0.2);
}

body.dark-mode .hover-glow:hover {
    box-shadow: 0 0 30px rgba(102, 126, 234, 0.4);
}

body.dark-mode .cyber-glow {
    animation: cyberGlowDark 2s ease-in-out infinite;
}

/* Dark Mode Transitions */
body.dark-mode *,
body.dark-mode *::before,
body.dark-mode *::after {
    transition: background-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                border-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Dark Mode Print Styles */
@media print {
    body.dark-mode {
        background: #ffffff !important;
        color: #000000 !important;
    }
    
    body.dark-mode .navbar,
    body.dark-mode .footer {
        background: #ffffff !important;
        color: #000000 !important;
    }
    
    body.dark-mode .card-inner {
        background: #ffffff !important;
        color: #000000 !important;
        border: 1px solid #000000;
    }
    
    body.dark-mode .btn {
        background: #ffffff !important;
        color: #000000 !important;
        border: 1px solid #000000;
    }
    
    /* Remove all animations and effects for print */
    body.dark-mode * {
        animation: none !important;
        transition: none !important;
        text-shadow: none !important;
        box-shadow: none !important;
    }
}

/* Dark Mode Accessibility */
@media (prefers-reduced-motion: reduce) {
    body.dark-mode *,
    body.dark-mode *::before,
    body.dark-mode *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
    
    body.dark-mode .cyber-glow {
        animation: none !important;
        box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
    }
    
    body.dark-mode .dark-mode-toggle {
        transition: none !important;
    }
}

/* Dark Mode High Contrast */
@media (prefers-contrast: high) {
    body.dark-mode {
        background: #000000;
        color: #ffffff;
    }
    
    body.dark-mode .card-inner {
        background: #000000;
        border: 2px solid #ffffff;
    }
    
    body.dark-mode .btn {
        border: 2px solid #ffffff;
    }
    
    body.dark-mode .form-control {
        background: #000000;
        border: 2px solid #ffffff;
        color: #ffffff;
    }
}

/* Dark Mode Specific Fixes */
body.dark-mode .icon {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(184, 188, 200, 0.1));
    color: #e8eaf6;
}

body.dark-mode .icon:hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
    color: #667eea;
}

body.dark-mode .toggle {
    background: linear-gradient(135deg, #2c3e50, #34495e);
}

body.dark-mode .toggle.active {
    background: linear-gradient(135deg, #667eea, #764ba2);
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.4);
}

body.dark-mode .progress {
    background: linear-gradient(135deg, #2c3e50, #34495e);
}

body.dark-mode .progress-bar {
    background: linear-gradient(90deg, #667eea, #764ba2);
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.4);
}

body.dark-mode .spinner {
    border-color: rgba(102, 126, 234, 0.2);
    border-top-color: #667eea;
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.3);
}

body.dark-mode .spinner-cyber {
    border-top-color: #00d4ff;
    border-right-color: #ff00ff;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.4);
}