/* Dark Mode Styles */
:root {
    --primary-color: #2c3e50;
    --secondary-color: #3498db;
    --text-color: #3c3e41;
    --background-color: #ECF0F3;
    --card-background: #ffffff;
    --border-color: #e0e0e0;
    --hover-color: #3498db;
}

:root[data-theme="dark"] {
    --text-color: #ecf0f1;
    --background-color: #2c3e50;
    --card-background: #34495e;
    --border-color: #34495e;
}

[data-theme="dark"] {
    background-color: var(--background-color);
    color: var(--text-color);
}

[data-theme="dark"] .shade_box,
[data-theme="dark"] .feature_item .inner,
[data-theme="dark"] .portfolio_item .inner,
[data-theme="dark"] .contact-form-wrapper,
[data-theme="dark"] .modal-content {
    background: rgba(44, 62, 80, 0.38);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .feature_item .inner,
[data-theme="dark"] .portfolio_item .inner,
[data-theme="dark"] .resume-tabs .nav-link,
[data-theme="dark"] .contact-form-wrapper,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu {
    background-color: var(--card-background);
    border-color: var(--border-color);
}

[data-theme="dark"] .btn_primary {
    background-color: var(--secondary-color);
    color: var(--text-color);
}

[data-theme="dark"] .btn_primary:hover {
    background-color: var(--hover-color);
}

[data-theme="dark"] .section-title h2 {
    color: var(--text-color);
}

[data-theme="dark"] .contact-form input,
[data-theme="dark"] .contact-form textarea {
    background-color: var(--background-color);
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] .contact-form input:focus,
[data-theme="dark"] .contact-form textarea:focus {
    border-color: var(--secondary-color);
}

[data-theme="dark"] .progress-bar {
    background-color: var(--secondary-color);
}


body.dark-mode .portfolio_item .inner {
    background-color: var(--card-background) !important;
    border-color: var(--border-color) !important;
}

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

body.dark-mode .resume-tabs .nav-link.active {
    background-color: var(--secondary-color) !important;
    color: var(--text-color) !important;
}

body.dark-mode .progress-bar {
    background-color: var(--secondary-color) !important;
}

body.dark-mode .contact-form-wrapper {
    background-color: var(--card-background) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .contact-form input,
body.dark-mode .contact-form textarea {
    background-color: var(--background-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

body.dark-mode .contact-form input:focus,
body.dark-mode .contact-form textarea:focus {
    background-color: var(--background-color) !important;
    border-color: var(--secondary-color) !important;
    color: var(--text-color) !important;
}

body.dark-mode .template-branding img {
    filter: brightness(0) invert(1);
}

body.dark-mode .social_links a {
    color: var(--text-color) !important;
}

body.dark-mode .social_links a:hover {
    color: var(--secondary-color) !important;
}

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

body.dark-mode .footer a {
    color: var(--text-color) !important;
}

body.dark-mode .footer a:hover {
    color: var(--secondary-color) !important;
}

/* Add dark mode class to modals */
body.dark-mode .modal-content {
    background-color: var(--card-background) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .modal-content .modal-header {
    border-bottom-color: var(--border-color) !important;
}

body.dark-mode .modal-content .modal-footer {
    border-top-color: var(--border-color) !important;
}

/* Add dark mode class to tooltips */
body.dark-mode .tooltip {
    background-color: var(--card-background) !important;
    border-color: var(--border-color) !important;
}

/* Add dark mode class to dropdowns */
body.dark-mode .dropdown-menu {
    background-color: var(--card-background) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .dropdown-item {
    color: var(--text-color) !important;
}

body.dark-mode .dropdown-item:hover {
    background-color: var(--secondary-color) !important;
    color: var(--text-color) !important;
}