/*
    Q4 branded specific
*/

:root [data-sidebar=brand], [data-sidebar=brand] {
    --bs-sidebar-dark-menu-item-color: #d9d9d9;
    --bs-sidebar-dark-menu-item-active-color: #fff;
    --bs-sidebar-menu-item-active-color: #fff;
    --bs-bg-brand-colour: #f88622;
    --bs-bg-brand-colour-light: rgba(248,134,34,0.15);
    /* future training tables */
    --booking-accent: #f59e0b; /* calendar badge top border & day number */
    --booking-accent-dark: #a56a18; /* day number text */
    --booking-header-bg: #f59e0b; /* thead background (amber/warning) */
}

/* New Materia left rail — brand the sidebar background (Q4 orange).
   Consumed by #sidebar in materia.custom.css. White foreground is the default. */
:root {
    --cms-sidebar-bg: #f88622;
}

.page-loader {
    background-color: rgba(248,134,34,0.95);
}

.loader-item span {
    color: #FFF;
}

.navbar-brand-box {
    background-color: #fff;
}

body[data-sidebar=brand] {
    background-color: #F88622 !important
}

    body[data-sidebar=brand] .vertical-menu {
        background-color: #F88622;
        border-color: #F88622
    }

@media (min-width:992px) {
    body[data-sidebar=brand] .vertical-menu::before {
        background-color: #F88622
    }
}

body[data-sidebar=brand] .vertical-menu .vertical-menu-btn {
    color: rgba(255,255,255,.8)
}

@media (min-width:992px) {
    body[data-sidebar=brand] .hamburger-icon span {
        background-color: var(--bs-sidebar-dark-menu-item-color);
    }
}

body[data-sidebar=brand] .navbar-brand-box {
    background-color: #F88622
}

body[data-sidebar=brand] #sidebar-menu ul li.menu-title {
    color: rgba(255,255,255,.7)
}

body[data-sidebar=brand] #sidebar-menu ul li a {
    color: rgba(255,255,255,.7)
}

    body[data-sidebar=brand] #sidebar-menu ul li a .nav-icon {
        fill: rgba(255,255,255,.7)
    }

    body[data-sidebar=brand] #sidebar-menu ul li a:hover {
        color: #fff
    }

        body[data-sidebar=brand] #sidebar-menu ul li a:hover .nav-icon {
            fill: #fff
        }

body[data-sidebar=brand] #sidebar-menu ul li ul.sub-menu li a {
    color: rgba(255,255,255,.6)
}

    body[data-sidebar=brand] #sidebar-menu ul li ul.sub-menu li a:before {
        border-color: rgba(255,255,255,.6)
    }

    body[data-sidebar=brand] #sidebar-menu ul li ul.sub-menu li a:hover {
        color: #fff
    }

        body[data-sidebar=brand] #sidebar-menu ul li ul.sub-menu li a:hover:before {
            background-color: #fff;
            border-color: #fff
        }

body[data-sidebar=brand] #sidebar-menu ul li .badge {
    background-color: #fff
}

body[data-sidebar=brand] #sidebar-menu ul li.mm-active {
    color: #fff !important
}

    body[data-sidebar=brand] #sidebar-menu ul li.mm-active > a {
        background: 0 0;
        color: #fff !important
    }

        body[data-sidebar=brand] #sidebar-menu ul li.mm-active > a::before {
            background-color: var(--bs-sidebar-dark-menu-item-active-color)
        }

        body[data-sidebar=brand] #sidebar-menu ul li.mm-active > a .nav-icon {
            fill: #fff !important
        }

    body[data-sidebar=brand] #sidebar-menu ul li.mm-active .mm-show .mm-active > a {
        color: #fff !important
    }

        body[data-sidebar=brand] #sidebar-menu ul li.mm-active .mm-show .mm-active > a:before {
            border-color: #fff !important;
            background-color: #fff !important
        }

body[data-sidebar=brand] .sidebar-footer .main-title {
    color: rgba(255,255,255,.8)
}

body[data-sidebar=brand] .sidebar-footer p {
    color: rgba(255,255,255,.5)
}

body[data-sidebar=brand][data-topbar=light] .navbar-brand-box {
    background-color: #F88622
}

body[data-sidebar=brand][data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > a {
    background-color: #e28e44;
    color: #fff
}

    body[data-sidebar=brand][data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > a .nav-icon {
        fill: #fff
    }

body[data-sidebar=brand][data-sidebar-size=sm] .vertical-menu #sidebar-menu ul li.mm-active .active {
    color: var(--bs-sidebar-menu-item-active-color) !important
}

body[data-sidebar=brand][data-sidebar-size=sm] .vertical-menu #sidebar-menu ul li ul.sub-menu li a:hover {
    color: var(--bs-sidebar-menu-item-active-color)
}

body[data-sidebar=brand][data-sidebar-size=sm] .vertical-menu #sidebar-menu ul li ul.sub-menu li.mm-active {
    color: var(--bs-sidebar-menu-item-active-color) !important
}

    body[data-sidebar=brand][data-sidebar-size=sm] .vertical-menu #sidebar-menu ul li ul.sub-menu li.mm-active > a {
        color: var(--bs-sidebar-menu-item-active-color) !important
    }

        body[data-sidebar=brand][data-sidebar-size=sm] .vertical-menu #sidebar-menu ul li ul.sub-menu li.mm-active > a i {
            color: var(--bs-sidebar-menu-item-active-color) !important
        }

body[data-sidebar=brand][data-sidebar-size=sm] .vertical-menu .sidebar-footer {
    display: none
}

body[data-sidebar=brand][data-sidebar-size=sm] .hamburger-icon span {
    background-color: var(--bs-sidebar-menu-item-color)
}

:root [data-sidebar=brand], [data-bs-theme=light] [data-sidebar=brand] {
    --bs-sidebar-dark-menu-item-color: #f3f3f3
}

th.gridjs-th-sort:not(:has(button.gridjs-sort-neutral)) {
    /* The header is sticky (fixedHeader), so it needs an OPAQUE background or rows scroll
       through it. --bs-bg-brand-colour-light is a 15%-alpha tint, so paint it as a gradient
       layer over an opaque base matching the normal header (custom.css th.gridjs-th #e4e6e7).
       Keeps the subtle brand highlight on the sorted column without the see-through. */
    background-color: #e4e6e7;
    background-image: linear-gradient(var(--bs-bg-brand-colour-light), var(--bs-bg-brand-colour-light));
}

.user-profile-img .overlay-content {
    background: rgba(248,134,34, .3);
}

/* Organisation brand-header panel — Q4 brand tint.
   Overrides the neutral fallback in materia.custom.css: that rule only tints when
   --bs-bg-brand-colour is in scope (it isn't on this page), so the brand colour is
   set literally here. */
.org-brand-header {
    background-color: #f4f5f7;
    background-image: linear-gradient(135deg, rgba(248, 134, 34, 0.16), rgba(248, 134, 34, 0.04));
}