/* --- Toggle Button Styles --- */
.dms-toggle {
    background: #2a2a2a;
    border: 1px solid #3f3f3f;
    border-radius: 50%;
    cursor: pointer;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.dms-toggle:hover {
    background-color: #3f3f3f;
    transform: scale(1.1);
}

.dms-toggle svg {
    color: #f1f1f1;
    transition: opacity 0.3s ease;
}

/* Hide moon by default */
.dms-toggle .dms-moon {
    display: none;
}

/* --- Core Dark Mode Styles --- */
/* The !important rule is added to forcefully override theme styles. */
body.dark-mode {
    background-color: #121212 !important;
    color: #f1f1f1 !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* When in dark mode, hide sun icon and show moon */
body.dark-mode .dms-toggle .dms-sun {
    display: none;
}
body.dark-mode .dms-toggle .dms-moon {
    display: block;
}

/* --- Generic Element Styling --- */
body.dark-mode a {
    color: #bb86fc !important; /* A nice purple accent for links */
}
body.dark-mode a:hover {
    color: #d1b3ff !important;
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, 
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
    color: #ffffff !important;
}

/* --- Theme-Specific Overrides (EXAMPLES) --- */
/* You must inspect your site and add forceful rules like these */

/* Example: Change header background */
body.dark-mode .site-header {
    background-color: #1e1e1e !important;
    border-bottom: 1px solid #3f3f3f !important;
}

/* Example: Change content area and widget backgrounds */
body.dark-mode .content-area,
body.dark-mode .widget,
body.dark-mode article,
body.dark-mode .entry-content {
    background-color: #1e1e1e !important;
    border-color: #3f3f3f !important;
}

/* Example: Forcefully style form inputs */
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode textarea {
    background-color: #2a2a2a !important;
    color: #f1f1f1 !important;
    border: 1px solid #3f3f3f !important;
}

/* Example: Invert images that are simple icons (use with care) */
body.dark-mode img.icon {
    filter: invert(1) hue-rotate(180deg) !important;
}