/* Dark Mode Toggle Button */
.dark-mode-toggle {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    border: none !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    cursor: pointer !important;
    z-index: 9999 !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #333 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.dark-mode-toggle:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
}

.dark-mode-toggle .sun-icon,
.dark-mode-toggle .moon-icon {
    transition: all 0.3s ease !important;
    width: 20px !important;
    height: 20px !important;
}

.dark-mode-toggle .moon-icon {
    display: none !important;
}

/* Dark Mode Styles - Improved Color Scheme */
body.dark-mode {
    background-color: #0f0f23 !important;
    color: #e8e8e8 !important;
}

body.dark-mode * {
    border-color: #2a2a3a !important;
}

/* Dark mode for main content */
body.dark-mode .site-header,
body.dark-mode header {
    background-color: #1a1a2e !important;
    border-bottom: 1px solid #2a2a3a !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .site-title a,
body.dark-mode .site-description {
    color: #ffffff !important;
}

body.dark-mode .main-navigation {
    background-color: #1a1a2e !important;
}

body.dark-mode .main-navigation a {
    color: #e8e8e8 !important;
}

body.dark-mode .main-navigation a:hover {
    color: #64b5f6 !important;
    background-color: #2a2a3a !important;
}

/* Dark mode for posts */
body.dark-mode .post,
body.dark-mode article {
    background-color: #1a1a2e !important;
    color: #e8e8e8 !important;
    border: 1px solid #2a2a3a !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

body.dark-mode .post-title a,
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;
}

body.dark-mode .post-meta {
    color: #b0b0b0 !important;
}

body.dark-mode .post-content {
    color: #e8e8e8 !important;
}

body.dark-mode .post-content p {
    color: #d0d0d0 !important;
}

/* Dark mode for sidebar */
body.dark-mode .sidebar,
body.dark-mode aside {
    background-color: #1a1a2e !important;
    color: #e8e8e8 !important;
}

body.dark-mode .widget {
    background-color: #2a2a3a !important;
    border: 1px solid #3a3a4a !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

body.dark-mode .widget-title {
    color: #ffffff !important;
    border-bottom: 2px solid #64b5f6 !important;
}

/* Dark mode for footer */
body.dark-mode .site-footer {
    background-color: #1a1a2e !important;
    color: #b0b0b0 !important;
    border-top: 1px solid #2a2a3a !important;
}

/* Dark mode for forms */
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="url"],
body.dark-mode input[type="password"],
body.dark-mode textarea,
body.dark-mode select {
    background-color: #2a2a3a !important;
    color: #e8e8e8 !important;
    border: 1px solid #3a3a4a !important;
}

body.dark-mode input[type="text"]:focus,
body.dark-mode input[type="email"]:focus,
body.dark-mode input[type="url"]:focus,
body.dark-mode input[type="password"]:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    border-color: #64b5f6 !important;
    box-shadow: 0 0 0 2px rgba(100, 181, 246, 0.2) !important;
    background-color: #3a3a4a !important;
}

/* Dark mode for buttons */
body.dark-mode .button,
body.dark-mode button {
    background-color: #64b5f6 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(100, 181, 246, 0.3) !important;
}

body.dark-mode .button:hover,
body.dark-mode button:hover {
    background-color: #42a5f5 !important;
    box-shadow: 0 4px 12px rgba(100, 181, 246, 0.4) !important;
}

/* Dark mode for links */
body.dark-mode a {
    color: #64b5f6 !important;
}

body.dark-mode a:hover {
    color: #42a5f5 !important;
    text-decoration: underline !important;
}

/* Dark mode for cards */
body.dark-mode .card {
    background-color: #1a1a2e !important;
    border: 1px solid #2a2a3a !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

/* Dark mode for tables */
body.dark-mode table {
    background-color: #1a1a2e !important;
    color: #e8e8e8 !important;
}

body.dark-mode th,
body.dark-mode td {
    border-color: #2a2a3a !important;
}

body.dark-mode tr:nth-child(even) {
    background-color: #2a2a3a !important;
}

body.dark-mode tr:hover {
    background-color: #3a3a4a !important;
}

/* Dark mode toggle button in dark mode */
body.dark-mode .dark-mode-toggle {
    background: rgba(26, 26, 46, 0.95) !important;
    color: #ffffff !important;
    border: 1px solid #2a2a3a !important;
}

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

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

/* Dark mode for reading progress bar */
body.dark-mode #reading-progress-bar {
    background: linear-gradient(90deg, #64b5f6 0%, #42a5f5 100%) !important;
}

/* Dark mode for site content */
body.dark-mode .site-content {
    background-color: #0f0f23 !important;
}

/* Dark mode for navigation menu */
body.dark-mode #primary-menu li a {
    color: #e8e8e8 !important;
}

body.dark-mode #primary-menu li a:hover {
    color: #64b5f6 !important;
    background-color: #2a2a3a !important;
}

/* Dark mode for mobile menu */
body.dark-mode .mobile-menu-toggle span {
    background-color: #e8e8e8 !important;
}