/* Dark Mode CSS */

/* Dark mode variables override */
:root.dark-mode {
    /* Color scheme */
    --primary-color: #5A8AFF; /* Slightly lighter blue for dark mode */
    --primary-dark: #4A6FFF; /* Original primary becomes the dark in dark mode */
    --secondary-color: #8EAFE0; /* Lighter secondary for dark mode */
    --accent-color: #20E65A; /* Brighter accent for dark mode */
    --text-color: #E0E0E0; /* Light text for dark mode */
    --text-light: #A0A0A0; /* Medium gray text for dark mode */
    --light-bg: #1E1E1E; /* Dark background for sections that were light */
    --white: #121212; /* Main dark background */
    --dark-bg: #0D1117; /* Even darker background */
    --border-color: #333333; /* Darker borders for dark mode */
    --success-color: #30D799; /* Brighter success color */
    --warning-color: #FFC857; /* Brighter warning color */
    --error-color: #FF6B6B; /* Brighter error color */
    
    /* Shadows - darker for dark mode */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6);
}

/* Dark mode toggle button */
.dark-mode-toggle {
    position: fixed;
    top: 90px;
    right: 20px;
    z-index: 999;
    width: 45px;
    height: 45px;
    background-color: var(--primary-color);
    color: var(--white);
    border-radius: var(--radius-full);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
    border: none;
}

.dark-mode-toggle:hover {
    background-color: var(--primary-dark);
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.dark-mode-toggle i {
    font-size: 1.2rem;
}

/* Specific dark mode adjustments */
:root.dark-mode .header {
    background-color: var(--white);
    border-bottom: 1px solid var(--border-color);
}

:root.dark-mode .hamburger span {
    background-color: var(--text-color);
}

:root.dark-mode .nav-links a {
    color: var(--text-color);
}

:root.dark-mode .nav-links.active {
    background-color: var(--white);
}

:root.dark-mode .logo a {
    color: var(--primary-color);
}

:root.dark-mode h1, 
:root.dark-mode h2, 
:root.dark-mode h3, 
:root.dark-mode h4, 
:root.dark-mode h5, 
:root.dark-mode h6 {
    color: var(--secondary-color);
}

:root.dark-mode .hero {
    background-image: linear-gradient(rgba(13, 17, 23, 0.8), rgba(13, 17, 23, 0.9)), url('../images/hero-background.jpg');
}

/* Project cards in dark mode */
:root.dark-mode .project-card {
    background-color: var(--dark-bg);
    border: 1px solid var(--border-color);
}

:root.dark-mode .project-tags span {
    background-color: var(--light-bg);
    color: var(--text-color);
}

:root.dark-mode .project-metrics {
    background-color: var(--light-bg);
    border: 1px solid var(--border-color);
}

:root.dark-mode .metric-value {
    color: var(--success-color);
}

:root.dark-mode .metric-label {
    color: var(--text-light);
}

:root.dark-mode .achievement-badge {
    background: linear-gradient(135deg, var(--success-color), #20a849);
}

/* Form elements in dark mode */
:root.dark-mode input,
:root.dark-mode textarea,
:root.dark-mode select {
    background-color: var(--dark-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

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

/* Contact section in dark mode */
:root.dark-mode .contact {
    background-color: var(--dark-bg);
}

:root.dark-mode .contact-info,
:root.dark-mode .contact-form {
    color: var(--text-color);
}

:root.dark-mode .opportunity-focus {
    background-color: var(--light-bg);
    border-left-color: var(--success-color);
}

:root.dark-mode .opportunity-focus h4 {
    color: var(--secondary-color);
}

:root.dark-mode .opportunity-focus li {
    color: var(--text-color);
}

:root.dark-mode .contact-details {
    color: var(--text-color);
}

/* Footer in dark mode */
:root.dark-mode .footer {
    background-color: var(--dark-bg);
}

/* About section in dark mode */
:root.dark-mode .about {
    background-color: var(--dark-bg);
}

:root.dark-mode .about-image img {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

:root.dark-mode .about-details {
    color: var(--text-color);
}

/* Social links in dark mode */
:root.dark-mode .social-link {
    background-color: var(--dark-bg);
    color: var(--primary-color);
}

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

/* Skills section in dark mode */
:root.dark-mode .skill-bar {
    background-color: var(--border-color);
}

/* Tables in dark mode */
:root.dark-mode table {
    border-color: var(--border-color);
}

:root.dark-mode th, 
:root.dark-mode td {
    border-color: var(--border-color);
}

:root.dark-mode tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Scrollbar styling for dark mode */
:root.dark-mode::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

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

:root.dark-mode::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 6px;
}

:root.dark-mode::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Images in dark mode */
:root.dark-mode img:not([src*=".svg"]) {
    filter: brightness(0.8) contrast(1.2);
}

:root.dark-mode img.photo, 
:root.dark-mode img.portrait, 
:root.dark-mode img[src*="photo"], 
:root.dark-mode img[src*="portrait"] {
    filter: brightness(0.9);
}

/* Code blocks in dark mode */
:root.dark-mode pre, 
:root.dark-mode code {
    background-color: #2d2d2d;
    color: #e0e0e0;
    border: 1px solid #444;
}

/* Back to top button in dark mode */
:root.dark-mode .back-to-top-btn {
    background-color: var(--primary-color);
}

:root.dark-mode .back-to-top-btn:hover {
    background-color: var(--primary-dark);
}

/* Project detail page adjustments */
:root.dark-mode .project-hero {
    background-color: var(--dark-bg);
}

:root.dark-mode .project-nav {
    border-bottom: 1px solid var(--border-color);
}

:root.dark-mode .project-card-info {
    background-color: var(--light-bg);
}

:root.dark-mode .sidebar-section {
    background-color: var(--light-bg);
}

:root.dark-mode .tech-tag {
    background-color: var(--dark-bg);
}

:root.dark-mode .related-project {
    border-bottom: 1px solid var(--border-color);
}

/* Lightbox in dark mode */
:root.dark-mode .lightbox-content img {
    border: 5px solid var(--dark-bg);
}

:root.dark-mode .lightbox-close:hover {
    background-color: var(--primary-color);
}

/* Location & Expertise Section in dark mode */
:root.dark-mode .location-expertise {
    background: linear-gradient(135deg, var(--dark-bg) 0%, var(--light-bg) 100%);
}

:root.dark-mode .expertise-card {
    background-color: var(--light-bg);
    border: 1px solid var(--border-color);
}

:root.dark-mode .expertise-icon {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
}

:root.dark-mode .government-focus {
    background-color: var(--light-bg);
    border: 1px solid var(--border-color);
}

:root.dark-mode .vps-content p {
    background-color: var(--dark-bg);
    border-left-color: var(--primary-color);
}

/* Certifications Section in dark mode */
:root.dark-mode .certifications {
    background-color: var(--dark-bg);
}

:root.dark-mode .cert-item {
    background-color: var(--light-bg);
    border: 1px solid var(--border-color);
}

:root.dark-mode .cert-badge {
    background-color: var(--dark-bg);
    border: 1px solid var(--border-color);
}

:root.dark-mode .cert-info h4 {
    color: var(--secondary-color);
}

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

:root.dark-mode .cert-status.completed {
    background: rgba(76, 175, 80, 0.2);
    color: var(--success-color);
}

:root.dark-mode .cert-status.in-progress {
    background: rgba(90, 138, 255, 0.2);
    color: var(--primary-color);
}

:root.dark-mode .verify-link {
    color: var(--primary-color);
}

:root.dark-mode .verify-link:hover {
    color: var(--secondary-color);
}

:root.dark-mode .cert-category h3 {
    color: var(--secondary-color);
    border-bottom-color: var(--success-color);
}

/* Azure accent in dark mode */
:root.dark-mode .azure-accent {
    color: #5A8AFF !important;
}

:root.dark-mode .azure-bg {
    background: rgba(90, 138, 255, 0.1);
    border-color: #5A8AFF;
}

/* ML accent in dark mode */
:root.dark-mode .ml-accent {
    color: #20E65A !important;
}

/* Google accent in dark mode */
:root.dark-mode .google-accent {
    color: #5A8AFF !important;
}