/*------------------------------------------------------------------
DARK MODE STYLES
-------------------------------------------------------------------*/

/* CSS Custom Properties for Light and Dark Modes */
:root {
    /* Light Mode Colors (Default) */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f8f8;
    --bg-pattern: rgba(255, 255, 255, 0.05);
    --text-primary: #000000;
    --text-secondary: #333333;
    --text-muted: #666666;
    --border-color: #e0e0e0;
    --card-bg: #ffffff;
    --card-shadow: rgba(0, 0, 0, 0.1);
    --nav-bg: rgba(255, 255, 255, 0.95);
    --nav-text: #000000;
    --input-bg: #ffffff;
    --input-border: #cccccc;
    --loader-bg: #ffffff;
    --overlay-bg: rgba(0, 0, 0, 0.8);
    --skill-bar-bg: #f0f0f0;
    --testimonial-overlay: rgba(255, 255, 255, 0.9);
}

/* Dark Mode Colors */
[data-theme="dark"] {
    --bg-primary: #0f0f0f;
    --bg-secondary: #1a1a1a;
    --bg-pattern: rgba(255, 255, 255, 0.02);
    --text-primary: #e0e0e0;
    --text-secondary: #c0c0c0;
    --text-muted: #888888;
    --border-color: #333333;
    --card-bg: #1e1e1e;
    --card-shadow: rgba(0, 0, 0, 0.5);
    --nav-bg: rgba(20, 20, 20, 0.95);
    --nav-text: #e0e0e0;
    --input-bg: #2a2a2a;
    --input-border: #444444;
    --loader-bg: #1a1a1a;
    --overlay-bg: rgba(0, 0, 0, 0.9);
    --skill-bar-bg: #2a2a2a;
    --testimonial-overlay: rgba(0, 0, 0, 0.85);
}

/* Auto-detect system preference */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-primary: #0f0f0f;
        --bg-secondary: #1a1a1a;
        --bg-pattern: rgba(255, 255, 255, 0.02);
        --text-primary: #e0e0e0;
        --text-secondary: #c0c0c0;
        --text-muted: #888888;
        --border-color: #333333;
        --card-bg: #1e1e1e;
        --card-shadow: rgba(0, 0, 0, 0.5);
        --nav-bg: rgba(20, 20, 20, 0.95);
        --nav-text: #e0e0e0;
        --input-bg: #2a2a2a;
        --input-border: #444444;
        --loader-bg: #1a1a1a;
        --overlay-bg: rgba(0, 0, 0, 0.9);
        --skill-bar-bg: #2a2a2a;
        --testimonial-overlay: rgba(0, 0, 0, 0.85);
    }
}

/* Apply CSS Variables to Elements */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

#pattern {
    background-color: var(--bg-pattern);
}

/* Navigation */
#mainNav {
    background-color: var(--nav-bg);
    color: var(--nav-text);
}

#mainNav .navbar-brand,
#mainNav .nav li button {
    color: var(--nav-text);
}

.menu-mobile {
    background-color: var(--bg-secondary);
}

.menu-mobile .nav li button {
    color: var(--text-primary);
}

/* Loader */
.loader {
    background-color: var(--loader-bg);
}

.loader-logo {
    color: var(--text-primary);
}

/* Cards and Sections */
.skill,
.post,
.panel {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

.panel-heading {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

/* Forms */
input[type="text"],
input[type="email"],
textarea {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--input-border);
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
textarea::placeholder {
    color: var(--text-muted);
}

/* Skill Bars */
.bar-graph .main-layer {
    background-color: var(--skill-bar-bg);
}

/* Testimonials Overlay */
.testimonials-over-image {
    background-color: var(--testimonial-overlay);
}

/* Dark Mode Toggle Button */
.dark-mode-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    background-color: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px var(--card-shadow);
}

.dark-mode-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px var(--card-shadow);
}

/* Mobile Responsive - Move toggle to bottom-center to avoid menu button overlap */
@media (max-width: 991px) {
    .dark-mode-toggle {
        top: auto;
        bottom: 20px;
        right: 50%;
        transform: translateX(50%);
        width: 45px;
        height: 45px;
        font-size: 20px;
    }

    .dark-mode-toggle:hover {
        transform: translateX(50%) scale(1.1);
    }
}

@media (max-width: 480px) {
    .dark-mode-toggle {
        bottom: 15px;
        right: 50%;
        transform: translateX(50%);
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .dark-mode-toggle:hover {
        transform: translateX(50%) scale(1.1);
    }
}

/* Additional Dark Mode Overrides */

/* Text colors */
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
li,
a {
    color: inherit;
}

/* Links */
a:hover,
a:focus {
    color: var(--text-secondary);
}

/* Sections with specific backgrounds */
.aboutme,
.work,
.blog,
.contact {
    background-color: var(--bg-secondary);
}

/* Author section */
.section-author-image-2 {
    background-color: var(--bg-secondary);
}

.section-author-image-2 h2,
.section-author-image-2 h3,
.section-author-image-2 p,
.section-author-image-2 span,
.section-author-image-2 label {
    color: var(--text-primary);
}

/* Contact Information List - About Me Section */
.aboutme ul li label {
    background-color: var(--input-bg);
    color: var(--text-primary);
}

.aboutme ul li span {
    color: var(--text-primary);
}

/* Dark mode specific overrides for contact info */
[data-theme="dark"] .aboutme ul li label {
    background-color: #2a2a2a;
    color: #e0e0e0;
}

[data-theme="dark"] .aboutme ul li span {
    color: #e0e0e0;
}

/* Download resume link */
.aboutme a {
    color: var(--text-primary);
}

[data-theme="dark"] .aboutme a {
    color: #4a9eff;
}

[data-theme="dark"] .aboutme a:hover {
    color: #6bb3ff;
}

/* Skills section */
.skills {
    background-color: var(--bg-primary);
}

.skills h3,
.skills h4,
.skills h5,
.skills p {
    color: var(--text-primary);
}

/* Services section */
.services {
    background-color: var(--bg-secondary);
}

.services h3,
.services h4,
.services h5,
.services p {
    color: var(--text-primary);
}

.media-heading {
    color: var(--text-primary);
}

/* Work/Gallery section */
.item-content h4,
.item-content p {
    color: var(--text-primary);
}

/* Blog posts */
.post {
    border-color: var(--border-color);
}

.post h5,
.post p,
.post-quote h3,
.post-quote p {
    color: var(--text-primary);
}

.post-date {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Contact section */
.contact h3,
.contact h4,
.contact p,
.contact label {
    color: var(--text-primary);
}

/* Footer */
footer {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

footer p,
footer a {
    color: var(--text-primary);
}

/* Panel/Accordion styles */
.panel-default {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

.panel-default>.panel-heading {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.panel-body {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

/* Experience/Education sections */
.experience .job,
.experience p {
    color: var(--text-primary);
}

/* Pie charts */
.percentage,
.percentage-title {
    color: var(--text-primary);
}

/* Homepage messages */
.messages h2 {
    color: var(--text-primary);
}

/* Smooth transitions for theme switching */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Preserve animations and transforms */
.css3Animate,
.css3AnimateSlow {
    transition: all 0.3s ease;
}

/* Dark mode specific adjustments for images */
[data-theme="dark"] img {
    opacity: 0.9;
}

[data-theme="dark"] img:hover {
    opacity: 1;
}

/* Adjust loader for dark mode */
[data-theme="dark"] .loader {
    background-color: var(--bg-primary);
}

[data-theme="dark"] #loader-circle {
    border-color: var(--text-primary);
}

/* Adjust background slider for dark mode */
[data-theme="dark"] #backSlider {
    opacity: 0.3;
}

[data-theme="dark"] .backSliderOver {
    background: var(--bg-primary);
}

/* Mobile Menu Dark Mode Fixes */
[data-theme="dark"] .menu-mobile {
    background: rgba(15, 15, 15, 0.95);
}

[data-theme="dark"] .menu-mobile a {
    color: #e0e0e0;
}

[data-theme="dark"] .menu-mobile ul li button {
    color: #e0e0e0;
}

[data-theme="dark"] .menu-mobile ul li button:hover {
    color: #ffffff;
}

/* Mobile Menu Close Button */
[data-theme="dark"] #menuMobileClose {
    color: #e0e0e0;
}

[data-theme="dark"] #menuMobileClose:hover {
    color: #ffffff;
}

/* Mobile Menu Open Button - ensure visibility */
[data-theme="dark"] #menuMobileOpen {
    color: #e0e0e0;
}

[data-theme="dark"] #menuMobileOpen:hover {
    color: #ffffff;
}

/* Navigation Dark Mode Improvements */
[data-theme="dark"] .lightNav a,
[data-theme="dark"] .lightNav button {
    color: #e0e0e0;
}

[data-theme="dark"] .darkNav a,
[data-theme="dark"] .darkNav button {
    color: #e0e0e0;
}

[data-theme="dark"] .darkNav ul li button .line {
    background: #e0e0e0;
}

[data-theme="dark"] .lightNav ul li button .line {
    background: #e0e0e0;
}

/* Mobile Specific Readability Fixes */
@media (max-width: 991px) {

    /* Ensure homepage messages are visible */
    [data-theme="dark"] .homepage .messages h2 {
        color: #e0e0e0;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    }

    /* About Me section on mobile */
    [data-theme="dark"] .aboutme h2,
    [data-theme="dark"] .aboutme h3,
    [data-theme="dark"] .aboutme h4,
    [data-theme="dark"] .aboutme h5 {
        color: #e0e0e0;
    }

    /* Work section gallery items */
    [data-theme="dark"] .work .item-content {
        background-color: rgba(26, 26, 26, 0.95);
    }

    [data-theme="dark"] .work .item-content h4,
    [data-theme="dark"] .work .item-content p {
        color: #e0e0e0;
    }

    /* Blog section */
    [data-theme="dark"] .blog h2,
    [data-theme="dark"] .blog h3,
    [data-theme="dark"] .blog h4,
    [data-theme="dark"] .blog h5,
    [data-theme="dark"] .blog p {
        color: #e0e0e0;
    }

    /* Contact form on mobile */
    [data-theme="dark"] .contact input,
    [data-theme="dark"] .contact textarea {
        background-color: #2a2a2a;
        color: #e0e0e0;
        border-color: #444;
    }

    [data-theme="dark"] .contact input::placeholder,
    [data-theme="dark"] .contact textarea::placeholder {
        color: #888;
    }

    /* Buttons on mobile */
    [data-theme="dark"] .contact button[type="submit"] {
        background-color: #4a9eff;
        color: #ffffff;
        border-color: #4a9eff;
    }

    [data-theme="dark"] .contact button[type="submit"]:hover {
        background-color: #6bb3ff;
        border-color: #6bb3ff;
    }

    /* Round logo visibility */
    [data-theme="dark"] .round-logo {
        color: #e0e0e0;
        border-color: #e0e0e0;
    }

    /* Ensure all text in sections is readable */
    [data-theme="dark"] .pt-page {
        color: #e0e0e0;
    }

    /* Filter buttons in work section */
    [data-theme="dark"] #filters button {
        background-color: #2a2a2a;
        color: #e0e0e0;
        border-color: #444;
    }

    [data-theme="dark"] #filters button.checked,
    [data-theme="dark"] #filters button:hover {
        background-color: #4a9eff;
        color: #ffffff;
        border-color: #4a9eff;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {

    /* Ensure text is large enough and readable */
    [data-theme="dark"] body {
        font-size: 14px;
    }

    /* Contact info labels on small screens */
    [data-theme="dark"] .aboutme ul li label {
        font-size: 11px;
    }

    [data-theme="dark"] .aboutme ul li span {
        font-size: 12px;
    }
}