:root {
    --bs-primary: #1C5A99;
    --bs-primary-rgb: 28, 90, 153;
    --bs-link-color: #1C5A99;
    --bs-link-hover-color: #0f4070;
    /* Independente do --bs-primary (usado nos botões) — precisa ser um
       tom mais escuro que o fundo do sidebar (#0A2A52), não mais claro,
       pra marcar o item ativo sem disparar tanto quanto um azul vivo. */
    --sidebar-active-bg: #123C6D;
}

.btn-primary {
    background-color: #1C5A99 !important;
    border-color: #1C5A99 !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #0f4070 !important;
    border-color: #0f4070 !important;
}

.btn-outline-primary {
    color: #1C5A99 !important;
    border-color: #1C5A99 !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:active {
    background-color: #1C5A99 !important;
    border-color: #1C5A99 !important;
    color: #fff !important;
}

.text-primary { color: #1C5A99 !important; }
.bg-primary { background-color: #1C5A99 !important; }
.border-primary { border-color: #1C5A99 !important; }
.badge.bg-primary { background-color: #1C5A99 !important; }

.form-check-input:checked {
    background-color: #1C5A99 !important;
    border-color: #1C5A99 !important;
}

.page-item.active .page-link {
    background-color: #1C5A99 !important;
    border-color: #1C5A99 !important;
    color: #fff !important;
    border-radius: 0.25rem !important;
}

.page-link {
    color: #1C5A99 !important;
}

.page-link:hover {
    color: #0f4070 !important;
}

.page-item:first-child .page-link { border-radius: 0.25rem 0 0 0.25rem !important; }
.page-item:last-child .page-link { border-radius: 0 0.25rem 0.25rem 0 !important; }

.switch-lg .form-check-input {
    width: 55px;  /* largura do switch */
    height: 32.59px; /* altura igual aos inputs normais */
    margin-top: -0.5rem; /* remove margem superior */
}

.switch-md .form-check-input {
    width: 45px;  /* largura do switch */
    height: 26px; /* altura igual aos inputs normais */
    margin-top: -6; /* remove margem superior */
}


/* Campos desabilitados com fundo cinza */
input[readonly]:not(.flatpickr-input):not([class*="flatpickr"]), select[disabled] {
    background-color: #e9ecef !important;
    opacity: 1;
}

/* Flatpickr inputs devem ter fundo branco */
input.flatpickr-input,
input[class*="flatpickr"] {
    background-color: #fff !important;
}

.form-check-input[disabled] {
    background-color: #e9ecef !important;
    opacity: 1;
    border-color: #dee2e6 !important;
}

.form-check-input[disabled]:checked {
    background-color: #AFB1B3 !important;
    border-color: #AFB1B3 !important;
}

/* Dropdown fix - ensure proper Bootstrap dropdown behavior */
.dropdown-menu {
    z-index: 1050;
    transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.dropdown-toggle {
    cursor: pointer;
}

.dropdown-toggle:focus {
    outline: none;
    box-shadow: none;
}

/* Reduzir padding do card-footer da paginação */
.card-footer {
    padding: 0.5rem 1rem;
}

/* === FILTER CARD COMPONENT === */
/* Card de filtros padronizado para todas as páginas de listagem */
.filter-card {
    border: 1px solid #0A2A52 !important;
}

.filter-card .card-header {
    background-color: #0A2A52;
    padding: 4px;
    border: none;
}

.filter-card .card-body {
    padding: 1rem;
}

/* Form dentro do filter card */
.filter-card .filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 1rem;
}

/* Botão de busca no filter card */
.filter-card .filter-actions {
    margin-left: auto;
    display: flex;
    gap: 0.5rem;
}

/* Campos de filtro responsivos */
.filter-field {
    min-width: 120px;
}

.filter-field-sm {
    flex: 0 0 auto;
    width: auto;
    min-width: 80px;
}

.filter-field-md {
    flex: 0 0 auto;
    width: auto;
    min-width: 150px;
}

.filter-field-lg {
    flex: 1 1 auto;
    min-width: 200px;
}

/* === DOWNLOAD BUTTON COMPONENT === */
/* Estilos para botões de download com spinner sincronizado */

.download-btn {
    position: relative;
    transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
}

.download-btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.download-btn:disabled {
    cursor: not-allowed;
    pointer-events: none;
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
}

.download-btn.downloading {
    opacity: 0.7;
}

/* Animação do spinner */
.download-btn .fa-spinner {
    animation: fa-spin 1s infinite linear;
    color: var(--bs-primary);
}

/* Melhora a visibilidade durante o download */
.download-btn:disabled i {
    opacity: 0.9;
}

/* Feedback visual adicional */
.download-btn:disabled::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 2px solid var(--bs-primary);
    border-radius: var(--bs-border-radius);
    opacity: 0.3;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.1;
        transform: scale(1.05);
    }
}

/* Estados hover e focus melhorados */
.download-btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.download-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
}

/* Indicador visual adicional para downloads grandes */
.download-btn.large-file-download::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #fd7e14;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.download-btn.large-file-download.downloading::after {
    opacity: 1;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

/* Responsividade para dispositivos móveis */
@media (max-width: 768px) {
    .download-btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }
}

/* === FOOTER COMPONENT === */
/* Footer styling for proper positioning at bottom of main content */

footer[role="contentinfo"] {
    margin-top: auto;
    background-color: #fff;
    border-top: 1px solid #dee2e6;
    padding: 1rem 0;
}

footer .footer {
    padding: 0.5rem 0;
    background-color: transparent;
    border: none;
}

/* Estados de erro (opcional para futuro uso) */
.download-btn.error {
    border-color: #dc3545;
    color: #dc3545;
}

.download-btn.error:hover {
    background-color: #dc3545;
    color: white;
}

/* === ACTIVE STATUS COMPONENTS === */
/* Estilos globais para campos is_active em formulários e filtros */


/* Estilos para botões de histórico */
.user-history-btn,
.group-history-btn,
.company-history-btn {
    cursor: pointer;
}

.content {
    padding: 1.5rem 1.5rem 1.5rem;
}

@media(min-width:992px) {
    .content {
        padding: 1rem 3rem 3rem;
    }
}

/* === BREADCRUMB COMPONENT === */
/* Estilos para breadcrumb de navegação */

.breadcrumb {
    font-size: 0.80rem;
}

.auth-logo-link img {
    opacity: 0.4;
    filter: grayscale(100%);
    transition: opacity 0.2s, filter 0.2s;
}

.auth-logo-link:hover img {
    opacity: 1;
    filter: grayscale(0%);
}

.breadcrumb-item a {
    color: #1C5A99 !important;
}

/* === FIXED LAYOUT === */
/* Sidebar e navbar fixos, scroll padrão do browser */

.wrapper {
    overflow: visible;
}

.main {
    overflow: visible;
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: visible !important;
}

/* Barra de rolagem do sidebar sempre visível, não só durante o scroll ativo
   (padrão do SimpleBar/tema). Quando um dropdown com muitos sublinks é
   aberto (ex.: Cadastros) e passa da altura da tela, sem essa pista visual
   permanente o usuário não percebe que dá pra rolar e alguns links ficam
   fora da tela sem explicação — principalmente em monitores menores. */
.sidebar .simplebar-track.simplebar-vertical {
    width: 6px;
    opacity: 1 !important;
}

.sidebar .simplebar-scrollbar:before {
    opacity: 0.4 !important;
    background: #fff !important;
}

/* Rodapé do sidebar — só a logo (iniciais/Sair foram pro avatar do navbar,
   ver navbar.html e #navbar-user-avatar abaixo). Fica fora do simplebar,
   fixo no fundo; some inteiro quando o sidebar está colapsado (largura de
   74px não cabe a logo com texto) — ver bloco "SIDEBAR COLAPSADO". */
#sidebar-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.75rem 1rem;
    background: #0A2A52;
    text-align: center;
}

#sidebar-footer img {
    max-width: 100%;
    height: 28px;
}

.sidebar,
.sidebar-content,
.sidebar-brand,
.sidebar-link,
a.sidebar-link,
.sidebar-link:hover,
a.sidebar-link:hover,
.sidebar-nav,
.simplebar-content-wrapper,
.simplebar-content {
    background: #0A2A52 !important;
}

/* Busca do menu dentro do próprio sidebar (filtra a árvore ao digitar, ver
   sidebar-search.js) — mesma paleta do sidebar, não a caixa branca padrão
   do Bootstrap. */
#sidebar-search-item .input-group-text,
#sidebar-search-input {
    background: var(--sidebar-active-bg) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

#sidebar-search-input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

#sidebar-search-input:focus {
    box-shadow: none !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}

.sidebar-search-hidden {
    display: none !important;
}

/* Respiro entre o cabeçalho (wordmark) e a lista — sem isso a busca e o
   Dashboard ficavam colados embaixo da logo. padding-top/bottom reservam
   espaço pro .sidebar-brand e #sidebar-footer, que ficam fora da área
   com scroll (simplebar) — sem isso, os primeiros/últimos itens do menu
   ficavam escondidos atrás dessas faixas fixas ao rolar (bug real,
   confirmado testando). Importante: tem que ser padding, não margin —
   margem de um último filho não entra no scrollHeight do container
   (comportamento padrão do navegador), então um vão com margin não
   tinha efeito nenhum no scroll. 100px cobre com folga tanto a altura do
   wordmark expandido (~90px) quanto do "K" colapsado (~94px, a fonte
   maior dele pesa mais no line-height). */
.sidebar-nav {
    padding-top: 100px;
    padding-bottom: 60px;
}

/* Cabeçalho do sidebar (wordmark) fixo no topo, fora do simplebar — os
   itens do menu rolam por baixo dele, ele nunca sai do lugar (mesmo
   espírito do #sidebar-footer, só que no topo). Padding assimétrico
   (mais em cima) em vez de centralizar por flex — empurra o texto pro
   fundo da faixa sem mudar o alinhamento à esquerda padrão do bloco. */
.sidebar-brand {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: block;
    padding: 1.9rem 1.5rem 1.15rem 1.5rem;
    background: #0A2A52;
}

/* Wordmark "Logistik" — mesma tipografia da tela de login (Montserrat
   bold, maiúsculas, letter-spacing), mas tudo branco (lá é azul+laranja)
   pra combinar com o fundo do sidebar. */
#sidebar-brand-wordmark,
#sidebar-brand-wordmark-icon {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
}

#sidebar-brand-wordmark {
    font-size: 1.7rem;
}

#sidebar-brand-wordmark-icon {
    font-size: 1.9rem;
}

.sidebar-item.active > .sidebar-link,
.sidebar-item.active .sidebar-link:hover {
    background: var(--sidebar-active-bg) !important;
    border-left-color: #ffffff !important;
}

.sidebar-link i,
.sidebar-link svg,
a.sidebar-link i,
a.sidebar-link svg {
    color: rgba(255, 255, 255, 0.85) !important;
}

.sidebar-link,
a.sidebar-link {
    color: rgba(255, 255, 255, 0.85) !important;
}

.sidebar-item:not(.active) > .sidebar-link:hover,
.sidebar-item:not(.active) > a.sidebar-link:hover {
    background: var(--sidebar-active-bg) !important;
}

/* :not(.collapsed) — o CONTÊINER do submenu inline (jornada normal, aberto
   via Bootstrap collapse) fica azul igual ao resto do sidebar, sem "caixa"
   visualmente destacada; já o flyout que aparece no hover quando o sidebar
   tá colapsado (ver "SIDEBAR COLAPSADO" no fim do arquivo) fica branco,
   porque as cores de texto dele (#6c757d/#518be1, vindas do AdminKit) foram
   pensadas pra fundo claro. Os `.sidebar-link` de dentro NÃO entram aqui —
   precisam continuar livres pra receber o fundo de active/hover normal
   (regras lá em cima), senão o item selecionado/hover nunca aparece
   colorido enquanto o sidebar está aberto. */
.sidebar:not(.collapsed) .sidebar-nav > .sidebar-item > .sidebar-dropdown {
    background: #0A2A52 !important;
}

.sidebar:not(.collapsed) .sidebar-nav > .sidebar-item > .sidebar-dropdown .sidebar-link,
.sidebar:not(.collapsed) .sidebar-nav > .sidebar-item > .sidebar-dropdown a.sidebar-link {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.85rem !important;
}

.sidebar:not(.collapsed) .sidebar-nav > .sidebar-item > .sidebar-dropdown .sidebar-link:hover {
    color: #fff !important;
}

.main > header {
    position: sticky;
    top: 0;
    z-index: 999;
}

/* Continuidade visual entre sidebar e header: uma faixa azul reta (mesma
   cor do sidebar, #0A2A52) ao longo do topo do header. Canto reto onde
   encontra o sidebar — pedido do usuário pra harmonizar melhor com o resto
   do layout (versão anterior tinha uma curva ali, ver histórico do git).
   Só no desktop (min-width: 992px): abaixo disso o sidebar do AdminKit vira
   off-canvas (escondido por padrão). */
@media (min-width: 992px) {
    .main > header {
        border-top: 16px solid #0A2A52;
    }
}

.btn-xs {
    padding: 0.1rem 0.4rem;
    font-size: 0.7rem;
    line-height: 1.3;
    border-radius: 0.2rem;
}

/* === NAVBAR === */

/* Busca de menu — destaque num navbar branco (fundo neutro, senão fica
   invisível), ícone de lupa do lado direito. */
#nav-search .input-group {
    height: 40px;
}

#nav-search .form-control,
#nav-search .input-group-text {
    height: 40px;
    background-color: #eef1f5;
    border: 1px solid #dee2e6;
}

#nav-search .form-control {
    border-right: none;
    border-radius: 8px 0 0 8px !important;
    padding-left: 16px;
    font-size: 0.95rem;
}

#nav-search .input-group-text {
    border-left: none;
    border-radius: 0 8px 8px 0 !important;
    padding-right: 16px;
    color: #6c757d;
}

#nav-search .form-control:focus {
    background-color: #fff;
    box-shadow: none;
}

#nav-search:focus-within .form-control,
#nav-search:focus-within .input-group-text {
    border-color: var(--bs-primary);
    background-color: #fff;
}

#nav-search #nav-search-results {
    border-radius: 8px;
    margin-top: 6px;
    padding: 6px;
}

#nav-search #nav-search-results .dropdown-item {
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
}

.sidebar-toggle .hamburger,
.sidebar-toggle .hamburger:before,
.sidebar-toggle .hamburger:after {
    background: #1C5A99;
}

.sidebar-toggle:hover .hamburger,
.sidebar-toggle:hover .hamburger:before,
.sidebar-toggle:hover .hamburger:after {
    background: #0f4070;
}

.nav-icon {
    color: #1C5A99 !important;
}

.nav-icon:hover,
.nav-icon[aria-expanded="true"] {
    color: #0f4070 !important;
}

/* Avatar de iniciais no navbar (menu de Perfil/Sair) — cores invertidas
   em relação ao círculo que existia no rodapé do sidebar: fundo azul,
   iniciais brancas (lá era fundo branco, iniciais azuis). */
#navbar-user-avatar {
    width: 32px;
    height: 32px;
    background: #1C5A99;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: -0.03em;
    flex-shrink: 0;
}

/* === BARRA DE SELEÇÃO EM LOTE ===

   Componente global (navbar.html + bulk-select.js): quando uma tela com
   seleção em lote (checkbox por linha) tem ao menos uma marcada, o navbar
   branco vira a barra de ação contextual — mesmo azul do item ativo do
   sidebar (--sidebar-active-bg), não o azul mais escuro do fundo do
   sidebar — em vez de abrir um bloco novo empurrando o layout. Cada tela
   só fornece seu próprio <form> de ação (ex.: #freeflowBulkForm em
   freeflow_list.html); initBulkSelect() move esse form pra dentro de
   #selection-bar-actions e alterna a classe abaixo conforme o número de
   linhas marcadas.

   Hamburger (sidebar-toggle) e o grupo notificação/avatar (navbar-collapse)
   somem nesse modo — só sobra o X de cancelar seleção e as ações da tela.
   Escondido aqui por CSS (não via classe .d-none no JS) porque
   `.navbar-expand .navbar-collapse` do Bootstrap já é
   `display: flex !important` com a mesma especificidade que `.d-none`;
   só um seletor mais específico garante a prioridade de forma confiável. */
.navbar-bg.selection-mode {
    background: var(--sidebar-active-bg) !important;
}

.navbar-bg.selection-mode .navbar-collapse,
.navbar-bg.selection-mode .sidebar-toggle {
    display: none !important;
}

/* Sem isso o navbar encolhe alguns pixels no modo seleção: os controles da
   barra (botão btn-sm, ícone do X) são mais baixos que o conteúdo normal do
   navbar (.nav-icon: font-size 1.5rem, line-height 1.4, padding .1rem —
   2.3rem de altura total), então o conteúdo da página "sobe" um pouquinho
   quando a barra substitui o navbar-collapse. min-height replica essa
   altura pra o navbar nunca mudar de tamanho entre os dois modos. */
.selection-bar {
    color: #fff;
    min-height: 2.3rem;
}

.selection-bar-close {
    color: #fff !important;
    font-size: 1.1rem;
    text-decoration: none !important;
}

.selection-bar-close:hover {
    opacity: 0.8;
}

/* === NOTIFICAÇÕES (bell) === */
#notif-list {
    /* ~5 itens (76px cada) — espaço vazio se tiver menos, scroll se tiver mais */
    height: 380px;
    overflow-y: auto;
}

.notif-item {
    background: #fff;
    transition: background .12s ease-in-out;
}

.notif-item.notif-unread {
    background: #f0f5fb;
}

.notif-item:hover {
    background: #e3edf9;
}

.notif-toast-card:hover {
    background: #f8f9fb !important;
    box-shadow: 0 .3rem 1rem rgba(0,0,0,.12);
}

/* === SIDEBAR COLAPSADO (faixa só de ícones) === */
/* Reaproveita as regras do layout "Compact" do AdminKit (adminkit.css,
   antes só ativas via <body data-sidebar-layout="compact">, sempre ligado)
   religadas em #sidebar.collapsed — mesma classe que o toggle do tema já
   alterna (adminkit.js, .js-sidebar-toggle). Só desktop: abaixo de 992px
   ".collapsed" já tem outro significado (revela o overlay mobile). */
@media (min-width: 992px) {
    .sidebar.collapsed {
        margin-left: 0 !important;
    }

    .sidebar.collapsed[data-simplebar],
    .sidebar.collapsed [data-simplebar] {
        width: 74px;
    }

    .sidebar.collapsed .sidebar-nav > .sidebar-item .sidebar-link span,
    .sidebar.collapsed .sidebar-nav > .sidebar-item > .sidebar-dropdown,
    .sidebar.collapsed .sidebar-nav > .sidebar-item > .sidebar-link:after,
    .sidebar.collapsed .sidebar-nav > .sidebar-item > .sidebar-link:before,
    .sidebar.collapsed .sidebar-user {
        display: none;
    }

    .sidebar.collapsed.sidebar {
        max-width: 74px;
        min-width: 74px;
        z-index: 5;
    }

    .sidebar.collapsed .sidebar-brand {
        text-align: center;
    }

    /* Troca pro ícone "G" quando colapsado — a logo completa (com o nome)
       não cabe na faixa de 74px. Ver .sidebar-brand-text/.sidebar-brand-icon
       logo abaixo pra altura igual nos dois estados. */
    .sidebar.collapsed .sidebar-brand-text {
        display: none;
    }

    .sidebar.collapsed .sidebar-brand-icon {
        display: block;
    }

    /* Sem espaço pra caixa de busca na faixa de 74px só com ícones. */
    .sidebar.collapsed #sidebar-search-item {
        display: none;
    }

    /* Colapsado não sobra espaço pra logo do rodapé (74px) — some inteiro,
       pedido do usuário. */
    .sidebar.collapsed #sidebar-footer {
        display: none;
    }

    .sidebar.collapsed .simplebar-horizontal,
    .sidebar.collapsed .simplebar-vertical {
        visibility: hidden !important;
    }

    .sidebar.collapsed .simplebar-content-wrapper,
    .sidebar.collapsed .simplebar-height-auto-observer-wrapper,
    .sidebar.collapsed .simplebar-mask,
    .sidebar.collapsed .simplebar-wrapper {
        overflow: visible !important;
    }

    .sidebar.collapsed .sidebar-dropdown.collapsing {
        height: auto;
        overflow: visible;
        transition: none;
    }

    .sidebar.collapsed .sidebar-item {
        position: relative;
    }

    /* Flyout: submenu vira popup branco à direita do ícone no hover
       (fundo/cores definidos aqui; cor azul do submenu inline normal fica
       reservada a :not(.collapsed), ver bloco lá em cima). */
    .sidebar.collapsed .sidebar-nav > .sidebar-item > .sidebar-dropdown {
        background: #fff;
        border-radius: .3rem;
        box-shadow: 0 .5rem 3rem .5rem rgba(0, 0, 0, .05);
        overflow: visible;
        padding: .5rem 0;
        position: absolute;
        top: 0;
        left: 86px;
        width: 220px;
        z-index: 1;
    }

    .sidebar.collapsed .sidebar-nav > .sidebar-item > .sidebar-dropdown:before {
        content: "";
        height: 100%;
        position: absolute;
        top: 0;
        width: 16px;
        left: -16px;
    }

    .sidebar.collapsed .sidebar-nav > .sidebar-item > .sidebar-dropdown > .sidebar-item .sidebar-link {
        color: #6c757d;
        padding: .5rem 1.5rem;
    }

    .sidebar.collapsed .sidebar-nav > .sidebar-item > .sidebar-dropdown > .sidebar-item .sidebar-link:hover {
        color: #518be1;
    }

    .sidebar.collapsed .sidebar-nav > .sidebar-item > .sidebar-dropdown > .sidebar-item .sidebar-link:before {
        left: -10px;
    }

    .sidebar.collapsed .sidebar-nav > .sidebar-item > .sidebar-dropdown .sidebar-dropdown .sidebar-link {
        padding: .5rem 1.5rem .5rem 2.5rem;
    }

    .sidebar.collapsed .sidebar-nav > .sidebar-item > .sidebar-dropdown .sidebar-dropdown .sidebar-dropdown .sidebar-link {
        padding: .5rem 1.5rem .5rem 3.5rem;
    }

    .sidebar.collapsed .sidebar-dropdown [data-bs-toggle="collapse"]:after {
        top: .9rem;
    }

    .sidebar.collapsed .sidebar-dropdown [aria-expanded="true"]:after,
    .sidebar.collapsed .sidebar-dropdown [data-bs-toggle="collapse"]:not(.collapsed):after {
        top: 1.1rem;
    }

    .sidebar.collapsed .sidebar-nav > .sidebar-item:hover > .sidebar-dropdown {
        display: block;
    }
}