/*
|--------------------------------------------------------------------------
| Sidebar Backpack — estrutura visual KPF
|--------------------------------------------------------------------------
|
| Adapta a composição do KPF University sem alterar os itens, permissões ou
| rotas deste projeto. As cores ficam isoladas em tokens para permitir ajustes
| posteriores sem modificar a estrutura do componente.
|
*/

.kpf-sidebar-layout {
    --kpf-sidebar-width: 17rem;
}

.kpf-sidebar {
    --kpf-sidebar-bg: #031f46;
    --kpf-sidebar-hover: rgb(255 255 255 / 10%);
    --kpf-sidebar-active: #2f80ed;
    --kpf-sidebar-text: rgb(240 247 253 / 90%);
    --kpf-sidebar-text-strong: #ffffff;
    --kpf-sidebar-muted: rgb(203 226 248 / 82%);
    --kpf-sidebar-separator: rgb(255 255 255 / 10%);
    --tblr-navbar-bg: var(--kpf-sidebar-bg);
    --tblr-navbar-border-color: transparent;
    --tblr-navbar-color: var(--kpf-sidebar-text);
    --tblr-navbar-active-color: var(--kpf-sidebar-text-strong);
    color: var(--kpf-sidebar-text);
    background: var(--kpf-sidebar-bg) !important;
    border: 0 !important;
    box-shadow: none !important;
    font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

html[data-bs-theme="dark"] .kpf-sidebar {
    --kpf-sidebar-bg: #031f46;
    --kpf-sidebar-hover: rgb(255 255 255 / 8%);
    --kpf-sidebar-active: #2f80ed;
    --kpf-sidebar-text: rgb(240 247 253 / 90%);
    --kpf-sidebar-muted: rgb(203 226 248 / 82%);
    --kpf-sidebar-separator: rgb(148 163 184 / 14%);
}

/* Mantém a composição nos dois templates verticais usados pelo projeto. */
html body.kpf-sidebar-layout:is([bp-layout="vertical-dark"], [bp-layout="vertical-transparent"]) > .page > aside.kpf-sidebar {
    background: var(--kpf-sidebar-bg) !important;
    border: 0 !important;
    box-shadow: none !important;
}

.kpf-sidebar .navbar-brand {
    width: 100%;
    height: auto;
    min-height: 7rem;
    max-height: none !important;
    margin: 0 !important;
    padding: 1.5rem !important;
    border: 0 !important;
    overflow: visible !important;
    text-align: left;
}

.kpf-sidebar .navbar-brand a,
.kpf-sidebar .navbar-brand a:hover {
    display: block;
    width: 100%;
    color: var(--kpf-sidebar-text-strong) !important;
    overflow: visible;
}

.kpf-sidebar-brand {
    display: flex;
    align-items: center;
    width: 100%;
    gap: .75rem;
}

.kpf-sidebar-brand-mark {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: .75rem;
    background: rgb(255 255 255 / 9%);
}

.kpf-sidebar-brand-mark img {
    width: 1.65rem;
    height: 1.65rem;
    margin: 0 !important;
    object-fit: contain;
}

.kpf-sidebar-brand-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .2rem;
    line-height: 1;
}

.kpf-sidebar-brand-copy strong {
    color: var(--kpf-sidebar-text-strong);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.kpf-sidebar-brand-copy small {
    color: var(--kpf-sidebar-muted);
    font-size: .665rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.kpf-sidebar .navbar-nav {
    gap: .25rem;
}

.kpf-sidebar .nav-item {
    width: 100%;
    margin: 0 !important;
}

.kpf-sidebar .nav-link,
.kpf-sidebar .dropdown-item {
    display: flex;
    align-items: center;
    width: 100%;
    height: 2.75rem;
    min-height: 2.75rem;
    gap: .75rem;
    margin: 0;
    padding: 0 .8125rem;
    border: 0 !important;
    border-radius: .4375rem;
    color: var(--kpf-sidebar-text) !important;
    background: transparent !important;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.2;
    transform: none !important;
    transition: color .17s ease, background-color .17s ease;
}

.kpf-sidebar .nav-link:hover,
.kpf-sidebar .dropdown-item:hover,
.kpf-sidebar[data-menu-theme="dark"] .nav-link:hover,
.kpf-sidebar[data-menu-theme="dark"] .dropdown-item:hover {
    color: var(--kpf-sidebar-text-strong) !important;
    background: var(--kpf-sidebar-hover) !important;
}

.kpf-sidebar .nav-link.active,
.kpf-sidebar .dropdown-item.active,
.kpf-sidebar .nav-item.active > .nav-link {
    color: var(--kpf-sidebar-text-strong) !important;
    background: var(--kpf-sidebar-active) !important;
    border-left: 0 !important;
    box-shadow: none !important;
}

html body.kpf-sidebar-layout:is([bp-layout="vertical-dark"], [bp-layout="vertical-transparent"]) > .page > aside.kpf-sidebar .nav-link,
html body.kpf-sidebar-layout:is([bp-layout="vertical-dark"], [bp-layout="vertical-transparent"]) > .page > aside.kpf-sidebar .dropdown-item {
    border-radius: .4375rem;
}

html body.kpf-sidebar-layout:is([bp-layout="vertical-dark"], [bp-layout="vertical-transparent"]) > .page > aside.kpf-sidebar .nav-link.active,
html body.kpf-sidebar-layout:is([bp-layout="vertical-dark"], [bp-layout="vertical-transparent"]) > .page > aside.kpf-sidebar .dropdown-item.active,
html body.kpf-sidebar-layout:is([bp-layout="vertical-dark"], [bp-layout="vertical-transparent"]) > .page > aside.kpf-sidebar .nav-item.active > .nav-link {
    background: var(--kpf-sidebar-active) !important;
    border-left: 0 !important;
    border-radius: .4375rem;
    box-shadow: none !important;
}

.kpf-sidebar .nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    min-width: 1.25rem;
    height: 1.25rem;
    color: currentColor !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
}

.kpf-sidebar .nav-link > span,
.kpf-sidebar .dropdown-item > span {
    min-width: 0;
}

.kpf-sidebar .nav-link.active:not(.dropdown-toggle)::before,
.kpf-sidebar .nav-link.active:not(.dropdown-toggle)::after,
.kpf-sidebar .dropdown-item.active::before,
.kpf-sidebar .dropdown-item.active::after,
.kpf-sidebar .nav-item::before,
.kpf-sidebar .nav-item::after {
    display: none !important;
    content: none !important;
}

.kpf-sidebar .nav-separator {
    margin: .75rem .7rem;
    border-color: var(--kpf-sidebar-separator);
}

.kpf-sidebar .dropdown-menu {
    position: relative;
    margin: .3rem .15rem .55rem !important;
    padding: .35rem !important;
    border: 1px solid rgb(255 255 255 / 5%) !important;
    border-radius: .7rem;
    background: rgb(255 255 255 / 3.5%) !important;
    box-shadow: none !important;
}

.kpf-sidebar .dropdown-menu .dropdown-item {
    height: 2.5rem;
    min-height: 2.5rem;
    gap: .6rem;
    padding: 0 .65rem !important;
    font-size: .85rem;
    font-weight: 600;
}

html body.kpf-sidebar-layout:is([bp-layout="vertical-dark"], [bp-layout="vertical-transparent"]) > .page > aside.kpf-sidebar .navbar-collapse .dropdown-menu .dropdown-item {
    color: var(--kpf-sidebar-text) !important;
    font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: .85rem !important;
    font-weight: 600 !important;
    letter-spacing: 0;
}

html body.kpf-sidebar-layout:is([bp-layout="vertical-dark"], [bp-layout="vertical-transparent"]) > .page > aside.kpf-sidebar .navbar-collapse .dropdown-menu .dropdown-item:hover {
    color: #fff !important;
    background: rgb(255 255 255 / 8%) !important;
}

html body.kpf-sidebar-layout:is([bp-layout="vertical-dark"], [bp-layout="vertical-transparent"]) > .page > aside.kpf-sidebar .navbar-collapse .dropdown-menu .dropdown-item.active {
    color: #fff !important;
    background: rgb(47 128 237 / 28%) !important;
    box-shadow: inset 2px 0 0 #69a8ff !important;
}

.kpf-sidebar .dropdown-menu .dropdown-item .nav-icon {
    width: 1.1rem;
    min-width: 1.1rem;
    height: 1.1rem;
    opacity: .82;
    font-size: 1.05rem !important;
}

.kpf-sidebar .dropdown-menu .dropdown-item:hover .nav-icon,
.kpf-sidebar .dropdown-menu .dropdown-item.active .nav-icon {
    opacity: 1;
}

html body.kpf-sidebar-layout:is([bp-layout="vertical-dark"], [bp-layout="vertical-transparent"]) > .page > aside.kpf-sidebar .navbar-collapse .dropdown-menu .dropdown-header {
    margin: .55rem 0 .3rem;
    padding: 0 .8rem !important;
    color: var(--kpf-sidebar-muted);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.kpf-sidebar .navbar-collapse .dropdown-toggle {
    padding: 0 .8125rem !important;
}

.kpf-sidebar .navbar-collapse .dropdown-toggle::after {
    margin-left: auto;
    padding-right: 0;
    color: currentColor;
    opacity: .65;
    transition: transform .17s ease;
}

.kpf-sidebar .navbar-collapse .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

.kpf-sidebar .navbar-collapse .dropdown-toggle[aria-expanded="true"] {
    color: #fff !important;
    background: rgb(255 255 255 / 7%) !important;
}

.kpf-sidebar .backpack-avatar-menu-container {
    color: #0d3b66;
    background: #f2c94c;
}

@media (min-width: 992px) {
    .kpf-sidebar-layout .kpf-sidebar.navbar-vertical {
        width: var(--kpf-sidebar-width);
        min-width: var(--kpf-sidebar-width);
        max-width: var(--kpf-sidebar-width);
        height: 100vh;
        min-height: 100vh;
    }

    .kpf-sidebar-layout:is([bp-layout="vertical-dark"], [bp-layout="vertical-transparent"]) .page-wrapper {
        margin-left: var(--kpf-sidebar-width);
    }

    .kpf-sidebar > .container-fluid {
        display: flex;
        height: 100vh;
        min-height: 100vh;
        flex-direction: column;
        flex-wrap: nowrap;
        padding: 0 !important;
    }

    .kpf-sidebar .navbar-brand {
        flex: 0 0 auto;
    }

    .kpf-sidebar .navbar-collapse {
        display: flex !important;
        width: 100%;
        height: 0;
        min-height: 0;
        flex: 1 1 0 !important;
        flex-direction: column;
        align-items: stretch;
        border: 0 !important;
        background: transparent !important;
        overflow: hidden;
    }

    .kpf-sidebar .navbar-collapse > .navbar-nav {
        display: flex;
        width: 100%;
        height: auto;
        min-height: 0;
        flex: 0 1 auto;
        flex-direction: column;
        padding: 0 .875rem 1.5rem !important;
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-color: rgb(255 255 255 / 18%) transparent;
        scrollbar-width: thin;
    }
}

@media (max-width: 991.98px) {
    .kpf-sidebar {
        box-shadow: 0 8px 24px rgb(3 26 48 / 18%) !important;
    }

    .kpf-sidebar .navbar-brand {
        min-height: 0;
        padding: 0 !important;
    }
}