:root {
    --bat-background-image: url('/static/img/bg-light.png');
    --bat-background-filter: brightness(1.3) contrast(0.8);
    --bat-background-overlay: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.7) 0%,
            rgba(255, 255, 255, 0.4) 20%,
            rgba(255, 255, 255, 0.4) 80%,
            rgba(255, 255, 255, 0.7) 100%
    );
}

html {
    scrollbar-gutter: stable;
}

html[data-bs-theme="dark"] {
    --bat-background-image: url('/static/img/bg-dark.png');
    --bat-background-filter: none;
    --bat-background-overlay: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.7) 0%,
            rgba(0, 0, 0, 0.4) 20%,
            rgba(0, 0, 0, 0.4) 80%,
            rgba(0, 0, 0, 0.7) 100%
    );
}

body {
    position: relative;
    z-index: 0;
}

body::before {
    content: "";
    inset: 0;
    z-index: -2;

    background: var(--bat-background-image) repeat left top;
    background-size: 102px 102px;

    filter: var(--bat-background-filter);
}

body::after {
    content: "";
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background: var(--bat-background-overlay);
}

body::before,
body::after {
    position: fixed;
}

:is(.offcanvas, .offcanvas-sm, .offcanvas-md, .offcanvas-lg, .offcanvas-xl, .offcanvas-xxl):is(.show, .showing, .hiding)::before,
:is(.offcanvas, .offcanvas-sm, .offcanvas-md, .offcanvas-lg, .offcanvas-xl, .offcanvas-xxl):is(.show, .showing, .hiding)::after {
    content: "";
    display: var(--bat-offcanvas-background-display, none);
    position: absolute;
    inset: 0;
    pointer-events: none;
}

:is(.offcanvas, .offcanvas-sm, .offcanvas-md, .offcanvas-lg, .offcanvas-xl, .offcanvas-xxl):is(.show, .showing, .hiding)::before {
    z-index: -2;
    background: var(--bat-background-image) repeat left top;
    background-size: 102px 102px;
    filter: var(--bat-background-filter);
}

:is(.offcanvas, .offcanvas-sm, .offcanvas-md, .offcanvas-lg, .offcanvas-xl, .offcanvas-xxl):is(.show, .showing, .hiding)::after {
    z-index: -1;
    background: var(--bat-background-overlay);
}

.offcanvas:is(.show, .showing, .hiding) {
    --bat-offcanvas-background-display: block;
    isolation: isolate;
    overflow: hidden;
    background: transparent;
}

@media (max-width: 575.98px) {
    .offcanvas-sm:is(.show, .showing, .hiding) {
        --bat-offcanvas-background-display: block;
        isolation: isolate;
        overflow: hidden;
        background: transparent;
    }
}

@media (max-width: 767.98px) {
    .offcanvas-md:is(.show, .showing, .hiding) {
        --bat-offcanvas-background-display: block;
        isolation: isolate;
        overflow: hidden;
        background: transparent;
    }
}

@media (max-width: 991.98px) {
    .offcanvas-lg:is(.show, .showing, .hiding) {
        --bat-offcanvas-background-display: block;
        isolation: isolate;
        overflow: hidden;
        background: transparent;
    }
}

@media (max-width: 1199.98px) {
    .offcanvas-xl:is(.show, .showing, .hiding) {
        --bat-offcanvas-background-display: block;
        isolation: isolate;
        overflow: hidden;
        background: transparent;
    }
}

@media (max-width: 1399.98px) {
    .offcanvas-xxl:is(.show, .showing, .hiding) {
        --bat-offcanvas-background-display: block;
        isolation: isolate;
        overflow: hidden;
        background: transparent;
    }
}

.card {
    --bs-card-bg: rgba(var(--bs-body-bg-rgb), 0.7);
    backdrop-filter: blur(1px);

    box-shadow:
            0 8px 24px rgba(0, 0, 0, 0.18);
}

@media (max-width: 991.98px) {
    .bat-navbar-body {
        align-items: stretch;
        flex-direction: column;
    }

    .bat-navbar-body .navbar-nav,
    .bat-navbar-body .nav-item {
        width: 100%;
    }

    .bat-navbar-body .nav-item.dropdown {
        display: flex;
        align-items: stretch;
        flex-direction: column;
    }

    .bat-navbar-body .nav-item.dropdown > .dropdown-toggle {
        flex: 0 0 auto;
        width: 100%;
    }

    .bat-navbar-body .dropdown-menu {
        align-self: stretch;
        position: static !important;
        inset: auto !important;
        transform: none !important;
        float: none;
        width: 100%;
        margin: 0;
        padding: .125rem 0 .25rem 1rem;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .bat-navbar-body .dropdown-item {
        color: var(--bs-body-color);
    }
}

/* -------------- status colors */
.status-pending {
    --status-color: #c4a56b;
}

.status-active {
    --status-color: #5c995c;
}

.status-disabled {
    --status-color: #8a929b;
}

.status-expired {
    --status-color: #a74848;
}

.status-started {
    --status-color: #6d6dd9;
}

.status-completed {
    --status-color: #5c995c;
}

.status-cancelled {
    --status-color: #c67f55;
}

.status-unhonoured {
    --status-color: #a74848;
}

.bi[class*="status-"] {
    color: var(--status-color);
}
[class*="status-"] {
    color: var(--status-color);
}