.darkmode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 10px;
}
.darkmode-toggle label {
    font-size: 14px;
    color: #ccc;
}
.darkmode-toggle input[type="checkbox"] {
    display: none;
}
.darkmode-toggle .slider {
    position: relative;
    width: 40px;
    height: 20px;
    background-color: #666;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s;
}
.darkmode-toggle .slider:before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: #ccc;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.3s;
}
.darkmode-toggle input:checked + .slider {
    background-color: #6fb3df;
}
.darkmode-toggle input:checked + .slider:before {
    transform: translateX(20px);
}

/* Existing dark mode styles */
body.darkmode {
    background: #282828;
    color: #ffffff;
}

/* Ensure previews adapt to dark mode */
body.darkmode .post_preview,
body.darkmode .lastpost_preview {
    color: #ffffff !important; /* White text in dark mode */
    background: transparent; /* Match body background */
}

/* Base styles for previews (light mode) */
.post_preview,
.lastpost_preview {
    color: #000000; /* Black text in light mode */
    margin-top: 5px;
    width: 100%;
    clear: both;
}

.lastpost_preview {
    padding: 5px 20px;
}

/* Ensure links in previews adapt */
body.darkmode .post_preview a,
body.darkmode .lastpost_preview a {
    color: #ffffff !important; /* White links in dark mode */
    text-decoration: none; /* Optional: remove underline */
}

.post_preview a,
.lastpost_preview a {
    color: #000000; /* Black links in light mode */
    text-decoration: none; /* Optional: remove underline */
}

/* Thread title links */
body.darkmode .threadbit_title a {
    color: #ffffff !important; /* White in dark mode */
}

.threadbit_title a {
    color: #000000; /* Black in light mode */
    text-decoration: none; /* Optional: match preview style */
}

/* Author username links */
body.darkmode .author a {
    color: #ffffff !important; /* White in dark mode */
}

.author a {
    color: #000000; /* Black in light mode */
    text-decoration: none; /* Optional: match preview style */
}

/* Navigation styles */
body.darkmode .navigation {
    color: #ffffff !important; /* White text in dark mode */
    background: transparent; /* Match body background */
}

body.darkmode .navigation a {
    color: #ffffff !important; /* White links in dark mode */
    text-decoration: none; /* Optional: match other styles */
}

.navigation {
    color: #000000; /* Black text in light mode */
    background: transparent; /* Match body background */
}

.navigation a {
    color: #000000; /* Black links in light mode */
    text-decoration: none; /* Optional: match other styles */
}

/* Reflected symbol styles */
body.darkmode .reflected-symbol {
    color: #ffffff !important; /* White in dark mode */
}

/* Button styles */
body.darkmode .button,
body.darkmode .new_thread_button,
body.darkmode .btn-primary {
    color: #ffffff !important; /* White text in dark mode */
    background-color: #3a3a3a !important; /* Darker background in dark mode */
}

.button,
.new_thread_button,
.btn-primary {
    color: #ffffff !important; /* White text in light mode */
    background-color: #223a73; /* Dark blue background in light mode */
    padding: 5px 10px;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
}

/* Ensure register and btn classes don't override */
.register,
.btn {
    color: #ffffff !important; /* White text for consistency */
}

/* Small button adjustments */
.btn-sm {
    padding: 3px 8px;
    font-size: 12px;
}
.user_image {
    width: unset;
    height: 32px;
    vertical-align: middle;
    margin-left: 5px;
}
.lastpost_user_image {
    width: unset;
    height: 20px;
    vertical-align: middle;
    margin-left: 5px;
}
body.darkmode .user_image,
body.darkmode .lastpost_user_image {
    filter: brightness(1.2);
}