@charset "UTF-8";

body.dark-mode {
    background-color: var(--gray);
    color: var(--white);
}

body.dark-mode a {
    color: var(--white) !important;
}

body.dark-mode .bg-light {
    background-color: var(--gray) !important;
}

body.dark-mode .text-dark {
    color: var(--white) !important;
}

body.dark-mode .navbar,
body.dark-mode .offcanvas,
body.dark-mode .card,
body.dark-mode .header-wrap {
    background-color: var(--gray) !important;
    color: var(--white) !important;
    box-shadow: 0 0.5rem 1rem rgba(255, 255, 255, 0.15) !important;
}

body.dark-mode .shadow {
    box-shadow: 0 0.25rem 1rem rgba(255, 255, 255, 0.15) !important;
}

body.dark-mode .navbar i,
body.dark-mode .offcanvas i,
body.dark-mode .card i,
body.dark-mode .header-wrap i,
body.dark-mode .dark-mode-toggle i {
    color: var(--white) !important;
}

body.dark-mode .btn-close {
    filter: invert(1);
}

.dark-mode-logo {
    display: none;
}

body.dark-mode .light-mode-logo {
    display: none;
}

body.dark-mode .dark-mode-logo,
body .light-mode-logo {
    display: block;
    margin: 0 auto;
}

body.dark-mode .col {
    display: flex;
    justify-content: center;
    align-items: center;
}

body.dark-mode .accordion-body {
    background-color: var(--gray) !important;
    color: var(--white) !important;
}

body.dark-mode input, body.dark-mode .form-control:disabled, body.dark-mode select, body.dark-mode .form-check-input {
    color: var(--white) !important;
    background-color: var(--gray) !important;
}


/*
 * Dark mode toggle button
 */

.dark-mode-toggle {
    width: 40px;
    height: 20px;
    background-color: #888;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3px;
    transition: background-color 0.3s ease-in-out;
}

.dark-mode-toggle i {
    color: var(--white);
    font-size: 14px;
}

.toggle-thumb {
    content: "";
    width: 16px;
    height: 16px;
    background-color: var(--white);
    border-radius: 50%;
    position: absolute;
    top: 2px;
    transition: left 0.3s ease-in-out;
}

.dark-mode-toggle .toggle-thumb {
    left: 2px;
}

.dark-mode-toggle.checked .toggle-thumb {
    left: 22px;
}

/* Dark mode styles for tables */

body.dark-mode table, body.dark-mode .table>:not(caption)>*>* {
    background-color: var(--gray);
    color: var(--white);
}

body.dark-mode table thead {
    background-color: var(--gray) !important;
    color: var(--white) !important;
}

body.dark-mode table tbody tr {
    background-color: var(--gray) !important;
    color: var(--white) !important;
}

body.dark-mode table tbody tr:nth-child(even) {
    background-color: var(--gray) !important;
}

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

body.dark-mode .active > .page-link, body.dark-mode .page-link.active {
    background-color: var(--primary);
    border-color: var(--primary);
}

body.dark-mode .page-link {
    background-color: var(--gray);
}

body.dark-mode .page-link:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

body.dark-mode .select2-container--default .select2-selection--multiple {
    background-color: var(--gray) !important;
    color: var(--white) !important;
}

body.dark-mode .select2-results__option--selectable {
    background-color: var(--gray) !important;
    color: var(--white) !important;
}

body.dark-mode .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable, body.dark-mode .select2-container--default .select2-results__option--selected, body.dark-mode .dropdown-menu button:hover {
    background-color: var(--primary) !important;
    color: var(--white) !important;
}

body.dark-mode .dropdown-menu, body.dark-mode .dropdown-menu button {
    background-color: var(--gray) !important;
    color: var(--white) !important;
}