/* Dark Mode Styles */
:root {
    --dark-bg: #222;
    --dark-card: #333;
    --dark-text: #e4e4e4;
    --dark-border: #444;
    --dark-input: #444;
    --dark-input-text: #fff;
    --dark-btn-default: #555;
    --dark-hover: rgba(255, 255, 255, 0.1);
}

body.dark-mode {
    background-color: var(--dark-bg);
    color: var(--dark-text);
}

/* Navbar */
body.dark-mode .navbar-dark {
    background-color: #111 !important;
}

/* Cards */
body.dark-mode .card {
    background-color: var(--dark-card);
    border-color: var(--dark-border);
}

body.dark-mode .card-header {
    background-color: rgba(0, 0, 0, 0.2);
    border-color: var(--dark-border);
}

body.dark-mode .list-group-item {
    background-color: var(--dark-card);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

/* Jumbotron/hero unit */
body.dark-mode .jumbotron, 
body.dark-mode .bg-light {
    background-color: var(--dark-card) !important;
    color: var(--dark-text);
}

/* Tables */
body.dark-mode .table {
    color: var(--dark-text);
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.15);
}

body.dark-mode .table-hover tbody tr:hover {
    background-color: var(--dark-hover);
}

body.dark-mode .table thead th {
    border-color: var(--dark-border);
}

body.dark-mode .table td, 
body.dark-mode .table th {
    border-color: var(--dark-border);
}

/* Forms */
body.dark-mode .form-control {
    background-color: var(--dark-input);
    border-color: var(--dark-border);
    color: var(--dark-input-text);
}

body.dark-mode .custom-file-label {
    background-color: var(--dark-input);
    border-color: var(--dark-border);
    color: var(--dark-input-text);
}

body.dark-mode .form-text {
    color: #aaa;
}

/* Modals */
body.dark-mode .modal-content {
    background-color: var(--dark-card);
    border-color: var(--dark-border);
}

body.dark-mode .modal-header, 
body.dark-mode .modal-footer {
    border-color: var(--dark-border);
}

/* Buttons */
body.dark-mode .btn-outline-secondary {
    color: #ddd;
    border-color: #777;
}

body.dark-mode .btn-outline-secondary:hover {
    background-color: #555;
    border-color: #777;
    color: #fff;
}

/* Alerts */
body.dark-mode .alert-info {
    background-color: #2d4659;
    color: #d3e3ee;
    border-color: #4a7495;
}

body.dark-mode .alert-success {
    background-color: #285f40;
    color: #d4edda;
    border-color: #3d9463;
}

body.dark-mode .alert-danger {
    background-color: #5f2a2a;
    color: #f8d7da;
    border-color: #944242;
}

body.dark-mode .alert-warning {
    background-color: #5f4d29;
    color: #fff3cd;
    border-color: #947c3e;
}

/* Footer */
body.dark-mode footer {
    background-color: #111 !important;
    color: var(--dark-text);
}

body.dark-mode footer a {
    color: #62c3e3;
}

body.dark-mode footer a:hover {
    color: #9ad7ec;
}

/* Dark mode toggle */
.dark-mode-toggle {
    display: inline-flex;
    align-items: center;
    margin-right: 15px;
}

.dark-mode-toggle .toggle-label {
    margin-right: 5px;
    color: rgba(255, 255, 255, 0.5);
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 20px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .toggle-slider {
    background-color: #2196F3;
}

input:checked + .toggle-slider:before {
    transform: translateX(20px);
}