/* Dark Mode Styles */

/* Dark Mode Color Variables */
.dark-mode {
    --light-bg: #0a0e27;
    --text-dark: #e4e4e7;
    --border-color: rgba(255, 255, 255, 0.1);
    --text-light: #e4e4e7;
}

/* Navigation Dark Mode */
.dark-mode .navbar {
    background: rgba(10, 14, 39, 0.98);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.dark-mode .nav-link {
    color: #e4e4e7;
}

.dark-mode .hamburger span {
    background: #e4e4e7;
}

/* Hero Dark Mode */
.dark-mode .hero {
    background: linear-gradient(135deg, rgba(31, 71, 136, 0.08), rgba(0, 212, 255, 0.05));
}

.dark-mode .hero-subtitle {
    color: #00d4ff;
}

.dark-mode .hero-description {
    color: #999;
}

/* About Dark Mode */
.dark-mode .about {
    background: #0f1533;
}

.dark-mode .about-text {
    color: #aaa;
}

.dark-mode .stat-item {
    background: rgba(0, 212, 255, 0.08);
}

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

.dark-mode .image-container {
    background: linear-gradient(135deg, rgba(31, 71, 136, 0.15), rgba(0, 212, 255, 0.1));
    border-color: rgba(255, 255, 255, 0.1);
}

/* Skills Dark Mode */
.dark-mode .skills {
    background: rgba(0, 212, 255, 0.02);
}

.dark-mode .skill-category {
    background: #1a1f3a;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.dark-mode .skill-category:hover {
    box-shadow: 0 15px 40px rgba(0, 212, 255, 0.2);
}

.dark-mode .skill-name {
    color: #e4e4e7;
}

.dark-mode .skill-bar {
    background: rgba(255, 255, 255, 0.05);
}

.dark-mode .feature {
    background: rgba(0, 212, 255, 0.1);
    color: #00d4ff;
}

/* Experience Dark Mode */
.dark-mode .experience {
    background: #0f1533;
}

.dark-mode .timeline-marker {
    background: #0a0e27;
    border-color: #1f4788;
}

.dark-mode .timeline-content {
    background: #1a1f3a;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

.dark-mode .timeline-content h3 {
    color: #00d4ff;
}

.dark-mode .timeline-content .company {
    color: #00d4ff;
}

.dark-mode .timeline-content .date {
    color: #666;
}

.dark-mode .experience-list li {
    color: #aaa;
}

/* Projects Dark Mode */
.dark-mode .projects {
    background: rgba(0, 212, 255, 0.02);
}

.dark-mode .project-card {
    background: #1a1f3a;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.dark-mode .project-card:hover {
    box-shadow: 0 20px 50px rgba(0, 212, 255, 0.2);
}

.dark-mode .project-content h3 {
    color: #e4e4e7;
}

.dark-mode .project-description {
    color: #aaa;
}

.dark-mode .feature {
    background: rgba(0, 212, 255, 0.15);
}

/* Achievements Dark Mode */
.dark-mode .achievements {
    background: #0f1533;
}

.dark-mode .achievement-card {
    background: rgba(0, 212, 255, 0.08);
}

.dark-mode .achievement-card:hover {
    background: rgba(0, 212, 255, 0.12);
}

.dark-mode .achievement-card h3 {
    color: #e4e4e7;
}

.dark-mode .achievement-card p {
    color: #999;
}

.dark-mode .achievement-icon {
    color: #00d4ff;
}

/* Contact Dark Mode */
.dark-mode .contact {
    background: linear-gradient(135deg, rgba(31, 71, 136, 0.08), rgba(0, 212, 255, 0.05));
}

.dark-mode .contact-info h3 {
    color: #00d4ff;
}

.dark-mode .contact-info > p {
    color: #999;
}

.dark-mode .contact-item .label {
    color: #e4e4e7;
}

.dark-mode .contact-item a,
.dark-mode .contact-item p {
    color: #999;
}

.dark-mode .contact-item i {
    color: #00d4ff;
}

/* Form Dark Mode */
.dark-mode .form-group input,
.dark-mode .form-group textarea {
    background: #1a1f3a;
    border-color: rgba(255, 255, 255, 0.1);
    color: #e4e4e7;
}

.dark-mode .form-group input::placeholder,
.dark-mode .form-group textarea::placeholder {
    color: #666;
}

.dark-mode .form-group input:focus,
.dark-mode .form-group textarea:focus {
    border-color: #00d4ff;
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
}

.dark-mode .form-group label {
    background: #0a0e27;
    color: #00d4ff;
}

.dark-mode .form-status.success {
    background: rgba(40, 167, 69, 0.2);
    color: #66bb6a;
    border-color: #66bb6a;
}

.dark-mode .form-status.error {
    background: rgba(220, 53, 69, 0.2);
    color: #ef5350;
    border-color: #ef5350;
}

/* Footer Dark Mode */
.dark-mode .footer {
    background: #0a0e27;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-mode .footer-links a:hover {
    color: #00d4ff;
}

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

.dark-mode ::-webkit-scrollbar-track {
    background: #0a0e27;
}

.dark-mode ::-webkit-scrollbar-thumb {
    background: rgba(0, 212, 255, 0.3);
    border-radius: 5px;
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 212, 255, 0.5);
}

/* Selection Dark Mode */
.dark-mode ::selection {
    background: rgba(0, 212, 255, 0.3);
    color: #e4e4e7;
}

.dark-mode ::-moz-selection {
    background: rgba(0, 212, 255, 0.3);
    color: #e4e4e7;
}

/* Link Colors Dark Mode */
.dark-mode a {
    color: #00d4ff;
}

.dark-mode a:hover {
    color: #fff;
}

/* Button Dark Mode */
.dark-mode .btn-secondary {
    color: #00d4ff;
    border-color: #00d4ff;
}

.dark-mode .btn-secondary:hover {
    background: #1f4788;
    border-color: #1f4788;
}

/* Tooltip Dark Mode */
.dark-mode [data-tooltip]::after {
    background: #1a1f3a;
    color: #e4e4e7;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-mode [data-tooltip]::before {
    border-top-color: #1a1f3a;
}

/* Code Block Dark Mode */
.dark-mode code,
.dark-mode pre {
    background: #1a1f3a;
    color: #00d4ff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Transition for Dark Mode */
body.dark-mode * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Theme Toggle Button Animation */
.theme-toggle {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle:hover {
    background: rgba(0, 212, 255, 0.1);
}

/* Dark Mode Specific Animations */
.dark-mode @keyframes fadeIn {
    from {
        opacity: 0;
        color: #0a0e27;
    }
    to {
        opacity: 1;
        color: #e4e4e7;
    }
}

/* Text Shadow Dark Mode */
.dark-mode .hero-title {
    text-shadow: 0 2px 10px rgba(0, 212, 255, 0.3);
}

.dark-mode .section-title {
    text-shadow: 0 2px 8px rgba(0, 212, 255, 0.2);
}

/* Border Colors Dark Mode */
.dark-mode input:focus,
.dark-mode textarea:focus {
    border-color: #00d4ff;
}

/* Hover Effects Dark Mode */
.dark-mode .nav-link:hover {
    color: #00d4ff;
}

.dark-mode .social-links a:hover {
    background: #00d4ff;
    color: #0a0e27;
}

.dark-mode .social-links-large a:hover {
    background: #00d4ff;
    color: #0a0e27;
}

/* Card Shadows Dark Mode */
.dark-mode .skill-category:hover,
.dark-mode .project-card:hover,
.dark-mode .achievement-card:hover {
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.2);
}

/* Gradient Dark Mode */
.dark-mode .hero::before {
    background: linear-gradient(180deg, transparent, rgba(10, 14, 39, 0.8));
}

/* Loading Spinner Dark Mode */
.dark-mode .spinner {
    border: 3px solid rgba(0, 212, 255, 0.1);
    border-top: 3px solid #00d4ff;
}

/* Progress Bar Dark Mode */
.dark-mode .progress-bar {
    background: rgba(255, 255, 255, 0.1);
}

.dark-mode .progress-fill {
    background: linear-gradient(90deg, #1f4788, #00d4ff);
}