/* Dark Mode Styles */
body.dark-mode {
    background-color: #1a1a1a;
    color: #e0e0e0;
}

body.dark-mode .body-content {
    background-color: #1a1a1a;
}

/* Dark mode for navbar */
body.dark-mode .navbar {
    background-color: #2d2d2d;
    border-color: #3d3d3d;
}

body.dark-mode .navbar-inverse {
    background-color: #2d2d2d;
    border-color: #3d3d3d;
}

body.dark-mode .navbar-inverse .navbar-nav > li > a {
    color: #e0e0e0;
}

body.dark-mode .navbar-inverse .navbar-nav > li > a:hover,
body.dark-mode .navbar-inverse .navbar-nav > li > a:focus {
    color: #ffffff;
    background-color: #3d3d3d;
}

body.dark-mode .navbar-inverse .navbar-toggle {
    border-color: #555;
}

body.dark-mode .navbar-inverse .navbar-toggle:hover,
body.dark-mode .navbar-inverse .navbar-toggle:focus {
    background-color: #3d3d3d;
}

body.dark-mode .navbar-inverse .navbar-toggle .icon-bar {
    background-color: #e0e0e0;
}

/* Dark mode for navbar logo - add subtle glow */
body.dark-mode .navbar-header img {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
    transition: filter 0.3s ease;
}

body.dark-mode .navbar-header a:hover img {
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.5));
}

/* Dark mode for footer */
body.dark-mode footer {
    color: #e0e0e0;
    background-color: #1a1a1a;
}

/* Dark mode for footer images - add subtle glow instead of white background */
body.dark-mode footer img {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
    transition: filter 0.3s ease, transform 0.2s ease;
}

body.dark-mode footer a:hover img {
    transform: scale(1.05);
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.5));
}

/* Dark mode for all content images - add subtle glow */
body.dark-mode img {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.25));
    transition: filter 0.3s ease;
}

body.dark-mode img:hover {
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.4));
}

body.dark-mode footer a {
    color: #4da6ff !important;
}

body.dark-mode footer hr {
    border-color: #3d3d3d;
}

/* Dark mode for tables */
body.dark-mode .grid {
    background-color: #2d2d2d;
    border-color: #3d3d3d;
    color: #e0e0e0;
}

body.dark-mode .grid td, 
body.dark-mode .grid th {
    border-color: #3d3d3d;
}

body.dark-mode .grid thead, 
body.dark-mode .grid th a, 
body.dark-mode .grid th a:link, 
body.dark-mode .grid th a:visited {
    background-color: #0066cc;
    color: #ffffff;
}

body.dark-mode .grid-alternating-row {
    background-color: #242424;
}

body.dark-mode .grid-row-style {
    background-color: #2d2d2d;
}

/* Dark mode for Bootstrap tables */
body.dark-mode table {
    background-color: #2d2d2d;
    color: #e0e0e0;
}

body.dark-mode table thead {
    background-color: #0066cc;
    color: #ffffff;
}

body.dark-mode table tbody tr {
    background-color: #2d2d2d;
}

body.dark-mode table tbody tr:nth-child(even) {
    background-color: #242424;
}

body.dark-mode table td,
body.dark-mode table th {
    border-color: #3d3d3d;
}

/* Dark mode for Bootstrap components */
body.dark-mode .panel {
    background-color: #2d2d2d;
    border-color: #3d3d3d;
    color: #e0e0e0;
}

body.dark-mode .panel-heading {
    background-color: #3d3d3d;
    border-color: #4d4d4d;
    color: #e0e0e0;
}

body.dark-mode .panel-body {
    background-color: #2d2d2d;
}

body.dark-mode .well {
    background-color: #2d2d2d;
    border-color: #3d3d3d;
    color: #e0e0e0;
}

/* Dark mode for form elements */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
    background-color: #2d2d2d;
    color: #e0e0e0;
    border-color: #3d3d3d;
}

body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
    background-color: #353535;
    color: #e0e0e0;
    border-color: #0066cc;
}

/* Dark mode toggle button */
.dark-mode-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #2d2d2d;
    border: 2px solid #3d3d3d;
    color: #e0e0e0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    z-index: 1000;
}

.dark-mode-toggle:hover {
    transform: scale(1.1);
    background-color: #3d3d3d;
}

body.dark-mode .dark-mode-toggle {
    background-color: #4da6ff;
    border-color: #66b3ff;
    color: #ffffff;
}

/* Dark mode for links */
body.dark-mode a {
    color: #4da6ff;
}

body.dark-mode a:hover,
body.dark-mode a:focus {
    color: #66b3ff;
}

/* Dark mode for headings */
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: #e0e0e0;
}

/* Dark mode for article columns */
body.dark-mode article {
    -webkit-column-rule: 1px dotted #3d3d3d;
    -moz-column-rule: 1px dotted #3d3d3d;
    column-rule: 1px dotted #3d3d3d;
}

/* Dark mode for code blocks */
body.dark-mode pre,
body.dark-mode code {
    background-color: #2d2d2d;
    color: #e0e0e0;
    border-color: #3d3d3d;
}

/* Smooth transitions for theme change */
body,
.navbar,
footer,
.grid,
table,
.panel,
.well,
input,
select,
textarea {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}