/*
|--------------------------------------------------------------------------
| Topbar do layout vertical_transparent
|--------------------------------------------------------------------------
|
| Continuidade visual da sidebar, mantendo os controles nativos do Backpack.
|
*/

.kpf-topbar {
    --kpf-topbar-bg: #031f46;
    --kpf-topbar-bg-end: #073563;
    --kpf-topbar-text: rgb(240 247 253 / 90%);
    --kpf-topbar-hover: rgb(255 255 255 / 10%);
    min-height: 4rem;
    color: var(--kpf-topbar-text);
    background: linear-gradient(100deg, var(--kpf-topbar-bg), var(--kpf-topbar-bg-end)) !important;
    border: 0 !important;
    border-bottom: 1px solid rgb(255 255 255 / 8%) !important;
    box-shadow: 0 8px 24px rgb(3 31 70 / 10%);
}

html[data-bs-theme="dark"] .kpf-topbar {
    --kpf-topbar-bg: #031f46;
    --kpf-topbar-bg-end: #062b52;
    --kpf-topbar-text: rgb(240 247 253 / 92%);
}

.kpf-topbar > .container-fluid,
.kpf-topbar > .container-xl {
    min-height: 4rem;
}

.kpf-topbar .navbar-nav {
    align-items: center;
    gap: .35rem;
}

.kpf-topbar-provider-select {
    align-items: center;
    margin-right: .25rem;
}

.kpf-topbar-provider-select .select2-container {
    width: 230px !important;
    border: 0 !important;
    border-radius: 999px !important;
}

.kpf-topbar-provider-select .select2-container .select2-selection--single {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgb(255 255 255 / 24%) !important;
    border-radius: 999px !important;
    background: rgb(255 255 255 / 97%) !important;
    box-shadow: 0 4px 12px rgb(0 0 0 / 10%) !important;
}

.kpf-topbar-provider-select .select2-container .select2-selection--single .select2-selection__rendered {
    width: 100% !important;
    padding: 0 2rem 0 .85rem !important;
    color: #1f2937 !important;
    font-size: .8rem;
    font-weight: 700;
    line-height: 30px !important;
}

.kpf-topbar-provider-select .select2-container .select2-selection--single .select2-selection__arrow {
    top: 0 !important;
    right: .4rem !important;
    height: 30px !important;
}

.kpf-topbar-provider-select .select2-container--focus .select2-selection--single,
.kpf-topbar-provider-select .select2-container--open .select2-selection--single {
    border-radius: 999px !important;
    border-color: rgb(255 255 255 / 48%) !important;
    box-shadow: 0 0 0 2px rgb(255 255 255 / 14%), 0 4px 12px rgb(0 0 0 / 10%) !important;
}

.kpf-topbar .nav-link,
.kpf-topbar button.nav-link {
    min-height: 2.5rem;
    padding: .4rem .65rem !important;
    border-radius: .7rem;
    color: var(--kpf-topbar-text) !important;
    transition: color .16s ease, background-color .16s ease;
}

.kpf-topbar .nav-link:hover,
.kpf-topbar .nav-link:focus,
.kpf-topbar button.nav-link:hover,
.kpf-topbar button.nav-link:focus {
    color: #fff !important;
    background: var(--kpf-topbar-hover) !important;
}

.kpf-topbar .nav-link > .d-none.d-xl-block > div:first-child {
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
}

.kpf-topbar .nav-link .text-muted {
    color: rgb(203 226 248 / 72%) !important;
    font-size: .68rem;
    font-weight: 500;
}

.kpf-topbar .backpack-avatar-menu-container {
    color: #031f46;
    background: #f2c94c;
    font-weight: 800;
}

.kpf-topbar .dropdown-menu {
    margin-top: .55rem;
    padding: .45rem;
    border: 1px solid var(--tblr-border-color);
    border-radius: .85rem;
    color: var(--tblr-body-color);
    background: var(--tblr-bg-surface);
    box-shadow: 0 14px 34px rgb(15 23 42 / 16%);
}

.kpf-topbar .dropdown-item {
    min-height: 2.4rem;
    padding: .55rem .7rem;
    border-radius: .55rem;
    color: var(--tblr-body-color);
    font-size: .8rem;
    font-weight: 600;
}

.kpf-topbar .dropdown-item:hover,
.kpf-topbar .dropdown-item:focus {
    color: var(--tblr-primary);
    background: rgba(var(--tblr-primary-rgb), .1);
}

.kpf-topbar .dropdown-divider {
    border-color: var(--tblr-border-color);
}

@media print {
    .kpf-topbar {
        display: none !important;
    }
}