/* Dark Mode Implementation for Future 2021 Theme */

body.dark-mode {
    background-color: #1e1e1e;
    color: #e0e0e0;
}

body.dark-mode input, 
body.dark-mode select, 
body.dark-mode textarea {
    color: #e0e0e0;
}

body.dark-mode strong, 
body.dark-mode b,
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;
}

/* Header Overrides */
body.dark-mode #header {
    background-color: #2d2d2d;
    border-bottom-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 5px 6px -6px rgba(0, 0, 0, 0.5);
}

body.dark-mode #header .main ul li {
    border-left-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode #header .logo {
    color: #ffffff;
}

body.dark-mode #header .dropdown {
    border-left-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode #header .dropdown li ul,
body.dark-mode #header .dropdown ul li:hover > ul,
body.dark-mode #header .dropdown li:hover > ul,
body.dark-mode .dropdown ul,
body.dark-mode .dropdown li ul {
    background-color: #333333 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .page-toc {
    background-color: #2d2d2d;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0.45rem 1rem -0.7rem rgba(0, 0, 0, 0.5);
}

body.dark-mode #header .dropdown li ul li a:hover,
body.dark-mode .dropdown li ul li a:hover {
    color: #ffffff !important;
    background-color: #444444 !important;
}

/* Menu / Sidebar Overrides */
body.dark-mode #menu {
    background-color: #252525;
}

body.dark-mode #menu .links li {
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* Post / Article Overrides */
body.dark-mode .post {
    background-color: #2d2d2d;
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .post > header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .post > header .meta {
    border-left-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .post > header .meta > * {
    border-left-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .post > footer {
    border-top-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .post .published {
    color: #b0b0b0;
}

/* Mini Post Overrides */
body.dark-mode .mini-post {
    background-color: #2d2d2d;
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .mini-post header {
    background-color: #2d2d2d;
}

/* Sidebar Overrides */
body.dark-mode #sidebar > section {
    border-top-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode #sidebar .links li {
    border-top-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode #sidebar #footer .copyright {
    color: #888888;
}

/* Search Form */
body.dark-mode form.search:before {
    color: #b0b0b0;
}

/* Buttons */
body.dark-mode .button {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    color: #ffffff !important;
}

body.dark-mode .button:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Form Elements */
body.dark-mode input[type="text"],
body.dark-mode input[type="password"],
body.dark-mode input[type="email"],
body.dark-mode input[type="tel"],
body.dark-mode select,
body.dark-mode textarea {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    color: #e0e0e0;
}

body.dark-mode input[type="checkbox"] + label,
body.dark-mode input[type="radio"] + label {
    color: #e0e0e0;
}

body.dark-mode input[type="checkbox"] + label:before,
body.dark-mode input[type="radio"] + label:before {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode input[type="checkbox"]:checked + label:before,
body.dark-mode input[type="radio"]:checked + label:before {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #1e1e1e;
}

/* Code and Blockquotes */
body.dark-mode blockquote {
    border-left-color: rgba(255, 255, 255, 0.2);
    color: #b0b0b0;
}

body.dark-mode code {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #f0f0f0;
}

body.dark-mode pre code {
    background-color: #121212;
}

/* Tables */
body.dark-mode table tbody tr {
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode table tbody tr:nth-child(2n+1) {
    background-color: rgba(255, 255, 255, 0.03);
}

body.dark-mode table th {
    color: #ffffff;
}

body.dark-mode table thead {
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

/* Misc */
body.dark-mode hr {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .heading {
    background-color: #2d2d2d;
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .pagination li a,
body.dark-mode .pagination li span {
    border-color: rgba(255, 255, 255, 0.1);
    background-color: transparent;
}

body.dark-mode .pagination li a:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode #back-to-top {
    background-color: #333333;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body.dark-mode ul.alt li {
    border-top-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode ul.posts li {
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* Portfolio Overrides */
body.dark-mode .portfolio_container .title {
    color: #ffffff;
}

body.dark-mode .portfolio_content-overlay {
    background: rgba(0, 0, 0, 0.8);
}

/* Logo Image Fix removed as per user request */

/* Plugin Overrides */
body.dark-mode .search-item {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .label-circle {
    background: #ff4d8d;
    color: #ffffff;
}

body.dark-mode .notices {
    background-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .floating-icon,
body.dark-mode #back-to-top {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

body.dark-mode .floating-icon:hover,
body.dark-mode #back-to-top:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

/* Mobile Menu Overrides */
body.dark-mode #titleBar {
    background-color: #2d2d2d;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode #titleBar .title {
    color: #ffffff;
}

body.dark-mode #titleBar .toggle:before {
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0.125em 0 0 #2d2d2d, 0 0.25em 0 0 rgba(255, 255, 255, 0.1), 0 0.375em 0 0 #2d2d2d, 0 0.5em 0 0 rgba(255, 255, 255, 0.1);
}