/* =========================================================
   LEO DISTRICT 404A2 - DARK MODE
   ========================================================= */

:root {
    --dm-bg: #121212;
    --dm-bg-secondary: #1b1b1b;
    --dm-card: #202020;
    --dm-card-hover: #292929;
    --dm-text: #f1f1f1;
    --dm-text-muted: #b8b8b8;
    --dm-border: #383838;
    --dm-input: #242424;
    --dm-shadow: rgba(0, 0, 0, 0.35);

    /* Keep the Leo/Lions identity colours */
    --dm-primary: #c8102e;
    --dm-secondary: #ffc72c;
}

/* ---------- Main page ---------- */

html.dark-mode,
html.dark-mode body {
    background-color: var(--dm-bg) !important;
    color: var(--dm-text) !important;
}

/* ---------- Text ---------- */

html.dark-mode body,
html.dark-mode p,
html.dark-mode span,
html.dark-mode div,
html.dark-mode li,
html.dark-mode td,
html.dark-mode th {
    color: var(--dm-text);
}

html.dark-mode .text-dark {
    color: var(--dm-text) !important;
}

html.dark-mode .text-muted {
    color: var(--dm-text-muted) !important;
}

/* ---------- Links ---------- */

html.dark-mode a {
    color: #ffd54f;
}

html.dark-mode a:hover {
    color: #ffffff;
}

/* ---------- Navbar ---------- */

html.dark-mode .navbar,
html.dark-mode header,
html.dark-mode .top-header,
html.dark-mode .main-header {
    background-color: #151515 !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .navbar-light .navbar-nav .nav-link,
html.dark-mode .navbar .nav-link {
    color: #eeeeee !important;
}

html.dark-mode .navbar-light .navbar-nav .nav-link:hover,
html.dark-mode .navbar .nav-link:hover {
    color: #ffc72c !important;
}

html.dark-mode .navbar-toggler {
    border-color: #555 !important;
}

html.dark-mode .navbar-toggler-icon {
    filter: invert(1);
}

/* ---------- Cards ---------- */

html.dark-mode .card,
html.dark-mode .card-body,
html.dark-mode .card-header,
html.dark-mode .card-footer {
    background-color: var(--dm-card) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .card:hover {
    background-color: var(--dm-card-hover) !important;
}

/* ---------- Sections ---------- */

html.dark-mode section,
html.dark-mode .section,
html.dark-mode .bg-light,
html.dark-mode .bg-white {
    background-color: var(--dm-bg) !important;
    color: var(--dm-text) !important;
}

/* ---------- Tables ---------- */

html.dark-mode .table {
    color: var(--dm-text) !important;
    background-color: var(--dm-card) !important;
}

html.dark-mode .table td,
html.dark-mode .table th {
    border-color: var(--dm-border) !important;
}

html.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #252525 !important;
    color: var(--dm-text) !important;
}

html.dark-mode .table-hover > tbody > tr:hover > * {
    background-color: #303030 !important;
}

/* ---------- Forms ---------- */

html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select,
html.dark-mode .form-control,
html.dark-mode .form-select {
    background-color: var(--dm-input) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
    color: #999 !important;
}

html.dark-mode input:focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus,
html.dark-mode .form-control:focus,
html.dark-mode .form-select:focus {
    background-color: #292929 !important;
    color: #ffffff !important;
    border-color: var(--dm-secondary) !important;
    box-shadow: 0 0 0 .2rem rgba(255, 199, 44, .15) !important;
}

/* ---------- Dropdowns ---------- */

html.dark-mode .dropdown-menu {
    background-color: #202020 !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .dropdown-item {
    color: var(--dm-text) !important;
}

html.dark-mode .dropdown-item:hover {
    background-color: #303030 !important;
    color: #ffc72c !important;
}

/* ---------- Modals ---------- */

html.dark-mode .modal-content {
    background-color: #202020 !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .modal-header,
html.dark-mode .modal-footer {
    border-color: var(--dm-border) !important;
}

/* ---------- Alerts ---------- */

html.dark-mode .alert {
    border-color: var(--dm-border);
}

html.dark-mode .alert-light {
    background-color: #252525 !important;
    color: var(--dm-text) !important;
}

/* ---------- Breadcrumb ---------- */

html.dark-mode .breadcrumb {
    background-color: transparent !important;
}

html.dark-mode .breadcrumb-item,
html.dark-mode .breadcrumb-item.active {
    color: var(--dm-text-muted) !important;
}

/* ---------- Borders ---------- */

html.dark-mode .border,
html.dark-mode .border-top,
html.dark-mode .border-bottom,
html.dark-mode .border-start,
html.dark-mode .border-end {
    border-color: var(--dm-border) !important;
}

/* ---------- Footer ---------- */

html.dark-mode footer,
html.dark-mode .footer {
    background-color: #0d0d0d !important;
    color: var(--dm-text) !important;
}

html.dark-mode footer p,
html.dark-mode footer span,
html.dark-mode footer li {
    color: #cccccc !important;
}

html.dark-mode footer a {
    color: #ffc72c !important;
}

/* ---------- Buttons ---------- */

html.dark-mode .btn-light {
    background-color: #303030 !important;
    color: #ffffff !important;
    border-color: #444 !important;
}

html.dark-mode .btn-outline-dark {
    color: #ffffff !important;
    border-color: #666 !important;
}

html.dark-mode .btn-outline-dark:hover {
    background-color: #ffffff !important;
    color: #111 !important;
}

/* ---------- Images ---------- */

html.dark-mode img {
    /* Don't excessively dim normal website images */
    opacity: .96;
}

/* ---------- Smooth transition ---------- */

body,
.navbar,
.card,
footer,
section,
input,
textarea,
select,
.form-control,
.form-select,
.dropdown-menu {
    transition:
        background-color .25s ease,
        color .25s ease,
        border-color .25s ease;
}


/* =========================================================
   DARK MODE TOGGLE BUTTON
   ========================================================= */

.dark-mode-toggle {
    width: 42px;
    height: 42px;

    border: 1px solid rgba(255,255,255,.2);
    border-radius: 50%;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: transparent;
    color: inherit;

    cursor: pointer;

    font-size: 18px;

    transition: all .25s ease;
}

.dark-mode-toggle:hover {
    background: rgba(255,255,255,.1);
    transform: rotate(12deg);
}

html.dark-mode .dark-mode-toggle {
    color: #ffc72c;
    border-color: #555;
}