/*
 * Contador de pendências no item "Minhas Pendências" da sidebar.
 *
 * O valor vem de pending-bell.init.js, que já consulta o endpoint consolidado
 * para o sininho do topbar — este badge só reaproveita o mesmo dado, sem
 * requisição nem consulta adicional.
 *
 * Visível apenas quando há pendência: o JS aplica/remove .is-visible. Sem
 * style inline, para não repetir o padrão do badge do topbar.
 */

.sidebar-pending-badge {
    display: none;
}

.sidebar-pending-badge.is-visible {
    display: inline-block;
    margin-left: 6px;
    padding: 0.2em 0.45em;
    font-size: 10px;
    line-height: 1;
    vertical-align: middle;
}

/*
 * Sidebar recolhida (.vertical-collpsed — o typo é do tema).
 *
 * O tema esconde TODO <span> do item nesse estado e só revela no hover
 * (display:none / display:inline). O contador precisa fugir dessa regra: é
 * justamente no trilho recolhido que ele tem de chamar atenção. Fica sobreposto
 * ao ícone, como o badge do sininho no topbar.
 */
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li > a {
    position: relative;
}

.vertical-collpsed .vertical-menu #sidebar-menu > ul > li > a .sidebar-pending-badge.is-visible {
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 32px;
    margin-left: 0;
    padding: 0.15em 0.35em;
    font-size: 9px;
}

/*
 * No hover a sidebar recolhida expande e o rótulo reaparece: o contador volta
 * ao fluxo normal, senão ficaria sobreposto ao texto.
 */
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a .sidebar-pending-badge.is-visible {
    position: static;
    margin-left: 6px;
    padding: 0.2em 0.45em;
    font-size: 10px;
}