/* Dark Mode Styles */
[data-theme="dark"] {
    --primary-color: #3b82f6;
    --primary-dark: #2563eb;
    --secondary-color: #94a3b8;
    --accent-color: #fbbf24;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-light: #64748b;
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --border-color: #475569;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
}

/* Auto dark mode based on system preference */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --primary-color: #3b82f6;
        --primary-dark: #2563eb;
        --secondary-color: #94a3b8;
        --accent-color: #fbbf24;
        --text-primary: #f1f5f9;
        --text-secondary: #cbd5e1;
        --text-light: #64748b;
        --bg-primary: #0f172a;
        --bg-secondary: #1e293b;
        --bg-tertiary: #334155;
        --border-color: #475569;
        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
        --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
    }
}

/* Dark mode specific overrides */
[data-theme="dark"] .navbar {
    background: rgba(15, 23, 42, 0.95);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

[data-theme="dark"] .floating-element {
    opacity: 0.2;
}

[data-theme="dark"] .image-placeholder {
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .news-item,
[data-theme="dark"] .publication-item,
[data-theme="dark"] .project-card,
[data-theme="dark"] .misc-item,
[data-theme="dark"] .timeline-content,
[data-theme="dark"] .experience-content {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .detail-item {
    background: var(--bg-tertiary);
}

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

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

[data-theme="dark"] .filter-btn {
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .filter-btn:hover,
[data-theme="dark"] .filter-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

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

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

/* Smooth transitions for theme switching */
body,
.navbar,
.hero,
.section,
.news-item,
.publication-item,
.project-card,
.misc-item,
.timeline-content,
.experience-content,
.detail-item,
.tag,
.link-btn,
.filter-btn,
.footer,
.social-link {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Theme toggle button states */
[data-theme="dark"] .theme-toggle i.fa-moon {
    display: none;
}

[data-theme="dark"] .theme-toggle i.fa-sun {
    display: inline-block;
}

[data-theme="light"] .theme-toggle i.fa-sun {
    display: none;
}

[data-theme="light"] .theme-toggle i.fa-moon {
    display: inline-block;
}

/* Dark mode scrollbar */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 12px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 6px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--text-light);
}

/* Dark mode selection */
[data-theme="dark"] ::selection {
    background: var(--primary-color);
    color: white;
}

/* Dark mode focus states */
[data-theme="dark"] .btn:focus,
[data-theme="dark"] .nav-link:focus,
[data-theme="dark"] .theme-toggle:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Dark mode hover effects */
[data-theme="dark"] .news-item:hover,
[data-theme="dark"] .publication-item:hover,
[data-theme="dark"] .project-card:hover,
[data-theme="dark"] .misc-item:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
}

[data-theme="dark"] .detail-item:hover {
    background: var(--bg-secondary);
    border-color: var(--primary-color);
}

/* Dark mode form elements */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Dark mode code blocks */
[data-theme="dark"] code,
[data-theme="dark"] pre {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

/* Dark mode blockquotes */
[data-theme="dark"] blockquote {
    border-left-color: var(--primary-color);
    background: var(--bg-secondary);
}

/* Dark mode tables */
[data-theme="dark"] table {
    background: var(--bg-secondary);
}

[data-theme="dark"] th,
[data-theme="dark"] td {
    border-color: var(--border-color);
}

[data-theme="dark"] th {
    background: var(--bg-tertiary);
}

/* Dark mode hr */
[data-theme="dark"] hr {
    border-color: var(--border-color);
}

/* Dark mode mark */
[data-theme="dark"] mark {
    background: var(--accent-color);
    color: var(--bg-primary);
}

/* Dark mode abbr */
[data-theme="dark"] abbr {
    border-bottom-color: var(--primary-color);
}

/* Dark mode kbd */
[data-theme="dark"] kbd {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Dark mode small */
[data-theme="dark"] small {
    color: var(--text-light);
}

/* Dark mode strong */
[data-theme="dark"] strong {
    color: var(--text-primary);
}

/* Dark mode em */
[data-theme="dark"] em {
    color: var(--text-secondary);
}

/* Dark mode del */
[data-theme="dark"] del {
    color: var(--text-light);
}

/* Dark mode ins */
[data-theme="dark"] ins {
    background: var(--accent-color);
    color: var(--bg-primary);
}

/* Dark mode sub and sup */
[data-theme="dark"] sub,
[data-theme="dark"] sup {
    color: var(--text-light);
}

/* Dark mode time */
[data-theme="dark"] time {
    color: var(--text-light);
}

/* Dark mode var */
[data-theme="dark"] var {
    color: var(--accent-color);
}

/* Dark mode samp */
[data-theme="dark"] samp {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

/* Dark mode cite */
[data-theme="dark"] cite {
    color: var(--text-light);
}

/* Dark mode q */
[data-theme="dark"] q {
    color: var(--text-secondary);
}

/* Dark mode dfn */
[data-theme="dark"] dfn {
    color: var(--primary-color);
}

/* Dark mode address */
[data-theme="dark"] address {
    color: var(--text-secondary);
}

/* Dark mode bdo */
[data-theme="dark"] bdo {
    color: var(--text-primary);
}

/* Dark mode bdi */
[data-theme="dark"] bdi {
    color: var(--text-primary);
}

/* Dark mode ruby */
[data-theme="dark"] ruby {
    color: var(--text-primary);
}

/* Dark mode rt */
[data-theme="dark"] rt {
    color: var(--text-light);
}

/* Dark mode rp */
[data-theme="dark"] rp {
    color: var(--text-light);
}

/* Dark mode wbr */
[data-theme="dark"] wbr {
    color: var(--text-primary);
}

/* Dark mode meter */
[data-theme="dark"] meter {
    background: var(--bg-tertiary);
}

[data-theme="dark"] meter::-webkit-meter-bar {
    background: var(--bg-tertiary);
}

[data-theme="dark"] meter::-webkit-meter-optimum-value {
    background: var(--primary-color);
}

[data-theme="dark"] meter::-webkit-meter-suboptimum-value {
    background: var(--accent-color);
}

[data-theme="dark"] meter::-webkit-meter-even-less-good-value {
    background: #ef4444;
}

/* Dark mode progress */
[data-theme="dark"] progress {
    background: var(--bg-tertiary);
}

[data-theme="dark"] progress::-webkit-progress-bar {
    background: var(--bg-tertiary);
}

[data-theme="dark"] progress::-webkit-progress-value {
    background: var(--primary-color);
}

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

/* Dark mode datalist */
[data-theme="dark"] datalist {
    color: var(--text-primary);
}

/* Dark mode output */
[data-theme="dark"] output {
    color: var(--text-primary);
}

/* Dark mode canvas */
[data-theme="dark"] canvas {
    border: 1px solid var(--border-color);
}

/* Dark mode embed */
[data-theme="dark"] embed {
    border: 1px solid var(--border-color);
}

/* Dark mode iframe */
[data-theme="dark"] iframe {
    border: 1px solid var(--border-color);
}

/* Dark mode object */
[data-theme="dark"] object {
    border: 1px solid var(--border-color);
}

/* Dark mode param */
[data-theme="dark"] param {
    color: var(--text-primary);
}

/* Dark mode source */
[data-theme="dark"] source {
    color: var(--text-primary);
}

/* Dark mode track */
[data-theme="dark"] track {
    color: var(--text-primary);
}

/* Dark mode video */
[data-theme="dark"] video {
    border: 1px solid var(--border-color);
}

/* Dark mode audio */
[data-theme="dark"] audio {
    border: 1px solid var(--border-color);
}

/* Dark mode map */
[data-theme="dark"] map {
    border: 1px solid var(--border-color);
}

/* Dark mode area */
[data-theme="dark"] area {
    color: var(--text-primary);
}

/* Dark mode svg */
[data-theme="dark"] svg {
    border: 1px solid var(--border-color);
}

/* Dark mode math */
[data-theme="dark"] math {
    color: var(--text-primary);
}

/* Dark mode annotation */
[data-theme="dark"] annotation {
    color: var(--text-primary);
}

/* Dark mode semantics */
[data-theme="dark"] semantics {
    color: var(--text-primary);
}

/* Dark mode mtext */
[data-theme="dark"] mtext {
    color: var(--text-primary);
}

/* Dark mode mn */
[data-theme="dark"] mn {
    color: var(--text-primary);
}

/* Dark mode mo */
[data-theme="dark"] mo {
    color: var(--text-primary);
}

/* Dark mode mi */
[data-theme="dark"] mi {
    color: var(--text-primary);
}

/* Dark mode mspace */
[data-theme="dark"] mspace {
    color: var(--text-primary);
}

/* Dark mode mrow */
[data-theme="dark"] mrow {
    color: var(--text-primary);
}

/* Dark mode mfrac */
[data-theme="dark"] mfrac {
    color: var(--text-primary);
}

/* Dark mode msqrt */
[data-theme="dark"] msqrt {
    color: var(--text-primary);
}

/* Dark mode mroot */
[data-theme="dark"] mroot {
    color: var(--text-primary);
}

/* Dark mode msub */
[data-theme="dark"] msub {
    color: var(--text-primary);
}

/* Dark mode msup */
[data-theme="dark"] msup {
    color: var(--text-primary);
}

/* Dark mode msubsup */
[data-theme="dark"] msubsup {
    color: var(--text-primary);
}

/* Dark mode munder */
[data-theme="dark"] munder {
    color: var(--text-primary);
}

/* Dark mode mover */
[data-theme="dark"] mover {
    color: var(--text-primary);
}

/* Dark mode munderover */
[data-theme="dark"] munderover {
    color: var(--text-primary);
}

/* Dark mode mtable */
[data-theme="dark"] mtable {
    color: var(--text-primary);
}

/* Dark mode mtr */
[data-theme="dark"] mtr {
    color: var(--text-primary);
}

/* Dark mode mtd */
[data-theme="dark"] mtd {
    color: var(--text-primary);
}

/* Dark mode maction */
[data-theme="dark"] maction {
    color: var(--text-primary);
}

/* Dark mode menclose */
[data-theme="dark"] menclose {
    color: var(--text-primary);
}

/* Dark mode mfenced */
[data-theme="dark"] mfenced {
    color: var(--text-primary);
}

/* Dark mode mphantom */
[data-theme="dark"] mphantom {
    color: var(--text-primary);
}

/* Dark mode mpadded */
[data-theme="dark"] mpadded {
    color: var(--text-primary);
}

/* Dark mode mstyle */
[data-theme="dark"] mstyle {
    color: var(--text-primary);
}

/* Dark mode merror */
[data-theme="dark"] merror {
    color: var(--text-primary);
}

/* Dark mode mspace */
[data-theme="dark"] mspace {
    color: var(--text-primary);
}

/* Dark mode mphantom */
[data-theme="dark"] mphantom {
    color: var(--text-primary);
}

/* Dark mode mpadded */
[data-theme="dark"] mpadded {
    color: var(--text-primary);
}

/* Dark mode mstyle */
[data-theme="dark"] mstyle {
    color: var(--text-primary);
}

/* Dark mode merror */
[data-theme="dark"] merror {
    color: var(--text-primary);
}

/* Dark mode mspace */
[data-theme="dark"] mspace {
    color: var(--text-primary);
}

/* Dark mode mphantom */
[data-theme="dark"] mphantom {
    color: var(--text-primary);
}

/* Dark mode mpadded */
[data-theme="dark"] mpadded {
    color: var(--text-primary);
}

/* Dark mode mstyle */
[data-theme="dark"] mstyle {
    color: var(--text-primary);
}

/* Dark mode merror */
[data-theme="dark"] merror {
    color: var(--text-primary);
}