/* MUTemplate v6.4.0 - Dark Mode */
:root {
    --mu-bg: #ffffff;
    --mu-text: #222222;
    --mu-card-bg: #ffffff;
    --mu-border: #e5e5e5;
    --mu-header-bg: #ffffff;
    --mu-meta: #777777;
}

body.dark-mode {
    --mu-bg: #121212;
    --mu-text: #e0e0e0;
    --mu-card-bg: #1e1e1e;
    --mu-border: #2d2d2d;
    --mu-header-bg: #1a1a1a;
    --mu-meta: #a0a0a0;
    background-color: var(--mu-bg) !important;
    color: var(--mu-text) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark-mode .wrapper-outer,
body.dark-mode #wrapper,
body.dark-mode .inner-wrapper,
body.dark-mode .container,
body.dark-mode .content,
body.dark-mode #sidebar,
body.dark-mode .post-listing,
body.dark-mode .single_post,
body.dark-mode article {
    background-color: var(--mu-card-bg) !important;
    color: var(--mu-text) !important;
    border-color: var(--mu-border) !important;
}

body.dark-mode .main-nav,
body.dark-mode header,
body.dark-mode .theme-header {
    background-color: var(--mu-header-bg) !important;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode .post-title,
body.dark-mode .entry-title {
    color: #f0f0f0 !important;
}

body.dark-mode .post-meta,
body.dark-mode .post-date,
body.dark-mode .meta {
    color: var(--mu-meta) !important;
}

body.dark-mode a {
    color: #8ab4f8;
}

body.dark-mode .widget,
body.dark-mode .widget-container {
    background-color: var(--mu-card-bg) !important;
    border-color: var(--mu-border) !important;
}

body.dark-mode .footer-bottom,
body.dark-mode footer {
    background-color: #0a0a0a !important;
}

/* Dark Mode Toggle Button */
.mu-dark-toggle {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #222;
    color: #fff;
    border: 2px solid #444;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}

.mu-dark-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}

body.dark-mode .mu-dark-toggle {
    background: #f0f0f0;
    color: #222;
    border-color: #ddd;
}

.mu-dark-toggle .icon-sun { display: none; }
.mu-dark-toggle .icon-moon { display: block; }
body.dark-mode .mu-dark-toggle .icon-sun { display: block; }
body.dark-mode .mu-dark-toggle .icon-moon { display: none; }

@media (max-width: 768px) {
    .mu-dark-toggle {
        bottom: 80px;
        width: 45px;
        height: 45px;
    }
}