/* Dark Mode Styles */
body.dark-mode {
    --primary-color: #5c9ce6;
    --secondary-color: #51cf66;
    --accent-color: #ff6b6b;
    --text-color: #e9ecef;
    --text-light: #ced4da;
    --bg-color: #0d1117;
    --bg-secondary: #161b22;
    --bg-card: #21262d;
    --border-color: #30363d;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.4);
}

body.dark-mode .navbar {
    background-color: rgba(13, 17, 23, 0.95);
}

body.dark-mode .nav-logo h2 {
    color: var(--primary-color);
}

body.dark-mode .nav-link {
    color: var(--text-color);
}

body.dark-mode .nav-link:hover {
    color: var(--primary-color);
}

body.dark-mode .bar {
    background-color: var(--text-color);
}

body.dark-mode .hero {
    background: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
}

/* Keep the pattern visible in dark mode with adjusted color */
body.dark-mode .hero::before {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%235c9ce6' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

body.dark-mode .greeting {
    color: var(--text-light);
}

body.dark-mode .name {
    color: var(--primary-color);
}

body.dark-mode .typing-text {
    color: var(--secondary-color);
}

body.dark-mode .hero-subtitle {
    color: var(--text-light);
}

body.dark-mode .btn-outline {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

body.dark-mode .btn-outline:hover {
    background-color: var(--primary-color);
    color: var(--bg-color);
}

body.dark-mode .social-link {
    background-color: rgba(92, 156, 230, 0.15);
    color: var(--primary-color);
}

body.dark-mode .social-link:hover {
    background-color: var(--primary-color);
    color: var(--bg-color);
}

body.dark-mode .profile-image {
    border-color: var(--bg-card);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

body.dark-mode .profile-image:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
}

body.dark-mode .section-title {
    color: var(--text-color);
}

body.dark-mode .section-title::after {
    background-color: var(--primary-color);
}

body.dark-mode .about {
    background-color: var(--bg-secondary);
}

body.dark-mode .about-text p {
    color: var(--text-light);
}

body.dark-mode .info-item {
    background-color: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

body.dark-mode .timeline::before {
    background-color: var(--border-color);
}

body.dark-mode .timeline-dot {
    background-color: var(--primary-color);
    border-color: var(--bg-color);
}

body.dark-mode .timeline-content {
    background-color: var(--bg-card);
    box-shadow: var(--shadow-md);
}

body.dark-mode .timeline-date {
    color: var(--primary-color);
    font-weight: 600;
}

body.dark-mode .timeline-content h3 {
    color: var(--text-color);
}

body.dark-mode .timeline-content h4 {
    color: var(--text-light);
    font-weight: 500;
}

body.dark-mode .timeline-content ul li {
    color: var(--text-light);
    line-height: 1.6;
}

body.dark-mode .timeline-content ul li::before {
    color: var(--primary-color);
}

body.dark-mode .skills {
    background-color: var(--bg-secondary);
}

body.dark-mode .filter-btn {
    border-color: var(--border-color);
    color: var(--text-color);
    font-weight: 500;
}

body.dark-mode .filter-btn.active,
body.dark-mode .filter-btn:hover {
    background-color: var(--primary-color);
    color: var(--bg-color);
    border-color: var(--primary-color);
}

body.dark-mode .skills-category h3 {
    color: var(--text-color);
}

body.dark-mode .skill-name {
    color: var(--text-color);
}

body.dark-mode .skill-level {
    color: var(--primary-color);
}

body.dark-mode .skill-bar {
    background-color: var(--border-color);
}

body.dark-mode .skill-progress {
    background-color: var(--primary-color);
}

body.dark-mode .skill-details {
    color: var(--text-light);
}

body.dark-mode .project-card {
    background-color: var(--bg-card);
    box-shadow: var(--shadow-md);
}

body.dark-mode .project-card:hover {
    box-shadow: var(--shadow-lg);
}

body.dark-mode .project-image {
    background-color: var(--bg-secondary);
}

body.dark-mode .project-placeholder {
    color: var(--text-light);
}

body.dark-mode .project-title {
    color: var(--text-color);
}

body.dark-mode .project-description {
    color: var(--text-light);
}

body.dark-mode .tech-tag {
    background-color: rgba(92, 156, 230, 0.2);
    color: var(--primary-color);
    font-weight: 500;
}

body.dark-mode .project-link {
    color: var(--primary-color);
}

body.dark-mode .project-link:hover {
    color: #7cc5ff;
}

body.dark-mode .contact {
    background-color: var(--bg-secondary);
}

body.dark-mode .contact-info h3 {
    color: var(--text-color);
}

body.dark-mode .contact-info p {
    color: var(--text-light);
}

body.dark-mode .contact-item i {
    color: var(--primary-color);
}

body.dark-mode .contact-item a {
    color: var(--text-color);
}

body.dark-mode .contact-item a:hover {
    color: var(--primary-color);
}

body.dark-mode .contact-form {
    background-color: var(--bg-card);
    box-shadow: var(--shadow-md);
}

body.dark-mode .form-group input,
body.dark-mode .form-group textarea {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-color);
}

body.dark-mode .form-group input:focus,
body.dark-mode .form-group textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(92, 156, 230, 0.2);
}

body.dark-mode .form-group input::placeholder,
body.dark-mode .form-group textarea::placeholder {
    color: var(--text-light);
}

body.dark-mode .footer {
    background-color: #010409;
    color: var(--text-color);
}

/* Dark Mode Theme Toggle Animation */
body.dark-mode .theme-toggle {
    background-color: var(--secondary-color);
}

body.dark-mode .theme-toggle:hover {
    background-color: #40c057;
}

/* Smooth transitions for theme switching */
body,
.navbar,
.hero,
.about,
.skills,
.projects,
.contact,
.footer,
.btn,
.social-link,
.timeline-content,
.project-card,
.contact-form,
.form-group input,
.form-group textarea {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Custom scrollbar for dark mode */
body.dark-mode::-webkit-scrollbar {
    width: 10px;
}

body.dark-mode::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

body.dark-mode::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 5px;
}

body.dark-mode::-webkit-scrollbar-thumb:hover {
    background: var(--text-light);
}