/* Toggle Button */
.mutyun-darkmode-toggle-li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
}
.mutyun-darkmode-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2em;
    padding: 0;
    line-height: 1;
    color: inherit;
    transition: transform 0.2s;
}
.mutyun-darkmode-toggle-btn:hover {
    transform: scale(1.1);
}
.mutyun-darkmode-toggle-btn:focus {
    outline: none;
}

/* Icon Switching */
html:not(.mutyun-dark-mode) .mutyun-dm-icon-sun { display: none; }
html.mutyun-dark-mode .mutyun-dm-icon-moon { display: none; }

/* =========================================
   Dark Mode Styles
   ========================================= */

/* Body & Main Defaults */
html.mutyun-dark-mode body {
    background-color: #121212 !important; /* Slightly darker than container usually */
    color: var(--mutyun-dm-text) !important;
}

html.mutyun-dark-mode body a:not(#move-page-home):not(#move-comments):not(#move-page-comment):not(#move-page-footer) {
    color: var(--mutyun-dm-link) !important;
}

/* Cocoon & General Containers */
html.mutyun-dark-mode body #header-container,
html.mutyun-dark-mode body #navi,
html.mutyun-dark-mode body #content,
html.mutyun-dark-mode body #main,
html.mutyun-dark-mode body #sidebar,
html.mutyun-dark-mode body #footer,
html.mutyun-dark-mode body .wrap,
html.mutyun-dark-mode body .entry-card,
html.mutyun-dark-mode body .widget,
html.mutyun-dark-mode body .author-box,
html.mutyun-dark-mode body .related-entry-card,
html.mutyun-dark-mode body .comment-area,
html.mutyun-dark-mode body .comment-list,
html.mutyun-dark-mode body .pagination,
html.mutyun-dark-mode body .page-numbers,
html.mutyun-dark-mode body .pager-links,
html.mutyun-dark-mode body input[type="text"],
html.mutyun-dark-mode body input[type="email"],
html.mutyun-dark-mode body input[type="password"],
html.mutyun-dark-mode body textarea {
    background-color: var(--mutyun-dm-bg) !important;
    color: var(--mutyun-dm-text) !important;
    border-color: #444 !important;
    box-shadow: none !important;
}

/* Fix specific container backgrounds */
html.mutyun-dark-mode body .white-box,
html.mutyun-dark-mode body .breadcrumb {
    background-color: var(--mutyun-dm-bg) !important;
}

/* Typography */
html.mutyun-dark-mode body h1,
html.mutyun-dark-mode body h2,
html.mutyun-dark-mode body h3,
html.mutyun-dark-mode body h4,
html.mutyun-dark-mode body h5,
html.mutyun-dark-mode body h6,
html.mutyun-dark-mode body .entry-card-content,
html.mutyun-dark-mode body .entry-title,
html.mutyun-dark-mode body .widget-title,
html.mutyun-dark-mode body .author-name {
    color: var(--mutyun-dm-text) !important;
}

/* Navigation specific */
html.mutyun-dark-mode body #navi .menu-header > li > a {
    color: var(--mutyun-dm-text) !important;
}
html.mutyun-dark-mode body #navi .menu-header > li > a:hover {
    background-color: rgba(255,255,255,0.1) !important;
}

/* Submenus */
html.mutyun-dark-mode body .sub-menu,
html.mutyun-dark-mode body .children {
    background-color: var(--mutyun-dm-bg) !important;
    border-color: #444 !important;
}

/* Header/Navi transparency if needed */
html.mutyun-dark-mode body #header,
html.mutyun-dark-mode body .header-in,
html.mutyun-dark-mode body .navi-in {
    background: transparent !important;
}

/* Cards Hover */
html.mutyun-dark-mode body .entry-card:hover,
html.mutyun-dark-mode body a.entry-card-wrap:hover {
    background-color: rgba(255,255,255,0.05) !important;
}

/* Code Blocks & Pre */
html.mutyun-dark-mode body pre,
html.mutyun-dark-mode body code {
    background-color: #2d2d2d !important;
    color: #f8f8f2 !important;
    border: 1px solid #444;
}

/* Tables */
html.mutyun-dark-mode body table,
html.mutyun-dark-mode body th,
html.mutyun-dark-mode body td {
    border-color: #444 !important;
    background-color: var(--mutyun-dm-bg) !important;
    color: var(--mutyun-dm-text) !important;
}
html.mutyun-dark-mode body th {
    background-color: #252525 !important;
}
html.mutyun-dark-mode body tr:nth-child(2n) td {
    background-color: rgba(255,255,255,0.02) !important;
}

/* Blockquotes */
html.mutyun-dark-mode body blockquote {
    background-color: #252525 !important;
    border-left-color: #666 !important;
    color: #ccc !important;
}

/* Comments */
html.mutyun-dark-mode body .comment-body {
    border-bottom: 1px solid #444 !important;
}
html.mutyun-dark-mode body .comment-reply-link,
html.mutyun-dark-mode body .comment-edit-link {
    color: var(--mutyun-dm-link) !important;
}

/* Buttons */
html.mutyun-dark-mode body .btn:not(#toggle-button),
html.mutyun-dark-mode body button:not(.go-to-top-button):not(#toggle-button),
html.mutyun-dark-mode body input[type="submit"] {
    background-color: #333 !important;
    color: #eee !important;
    border: 1px solid #555 !important;
}
html.mutyun-dark-mode body .btn:not(#toggle-button):hover,
html.mutyun-dark-mode body button:not(.go-to-top-button):not(#toggle-button):hover,
html.mutyun-dark-mode body input[type="submit"]:hover {
    background-color: #444 !important;
}

/* Specific overrides for nested links in Cocoon move buttons */
html.mutyun-dark-mode body #move-page-prev a,
html.mutyun-dark-mode body #move-page-next a {
    color: inherit !important;
}

/* Scrollbar (Chrome/Safari) */
html.mutyun-dark-mode body::-webkit-scrollbar {
    width: 12px;
}
html.mutyun-dark-mode body::-webkit-scrollbar-track {
    background: #121212;
}
html.mutyun-dark-mode body::-webkit-scrollbar-thumb {
    background-color: #444;
    border-radius: 6px;
    border: 3px solid #121212;
}