// =============================================================================
//  Admin sidebar
//
//  Denser, quieter navigation: small uppercase group labels, compact rows, a
//  rounded brand pill for the current page, count badges pushed to the right
//  edge, and a guide line down each open submenu so nesting is readable at a
//  glance. Colour comes from Bilipoa's own palette — the only job of colour
//  here is to mark where you are.
// =============================================================================

$sb-radius: 9px;
$sb-row-min: 36px;

.navbar-vertical {

    // --- Group labels ------------------------------------------------------
    .navbar-vertical-label-wrapper {
        margin-top: 1rem !important;
        margin-bottom: 0.25rem !important;
    }

    .navbar-vertical-label {
        font-size: 0.63rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--bs-secondary-color);
        opacity: 0.85;
    }

    // The divider beside the label is redundant once the label is this quiet.
    .navbar-vertical-divider {
        opacity: 0.35;
    }

    // --- Rows --------------------------------------------------------------
    .nav-link {
        display: flex;
        align-items: center;
        min-height: $sb-row-min;
        padding: 5px 10px;
        margin-bottom: 1px;
        font-size: 0.82rem;
        font-weight: 500;
        line-height: 1.15;
        color: var(--bs-body-color);
        border-radius: $sb-radius;
        transition: background-color 0.13s ease, color 0.13s ease;

        &:hover {
            color: var(--bs-emphasis-color);
            background: rgba(var(--bs-emphasis-color-rgb), 0.05);
        }
    }

    .nav-link-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        flex: 0 0 auto;
        color: var(--bs-secondary-color);
        transition: color 0.13s ease, transform 0.18s ease;

        i {
            font-size: 0.95rem;
        }
    }

    // Small nudge on hover — enough to feel responsive, not enough to distract.
    .nav-link:hover .nav-link-icon {
        color: var(--bs-emphasis-color);
        transform: translateX(2px);
    }

    .nav-link-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    // --- Current page ------------------------------------------------------
    // A filled pill rather than a left border: it reads clearly at this row
    // height and keeps the icon, label and badge on one visual object.
    //
    // The selector deliberately mirrors the theme's own
    // `.navbar-vertical .navbar-nav .nav-item .nav-link.active` chain — a
    // shorter one loses on specificity and the pill silently never paints.
    .navbar-nav .nav-item .nav-link.active {
        color: #fff;
        background: var(--bs-primary);
        font-weight: 600;

        &:hover {
            color: #fff;
            background: var(--bs-primary);
        }

        .nav-link-icon,
        &:hover .nav-link-icon {
            color: #fff;
            transform: none;
        }

        .badge {
            color: #fff;
            background: rgba(255, 255, 255, 0.22);
            border-color: rgba(255, 255, 255, 0.28);
        }
    }

    // --- Count badges ------------------------------------------------------
    .nav-link .badge {
        margin-left: auto;
        padding: 1px 6px;
        font-size: 0.62rem;
        font-weight: 600;
        line-height: 1.45;
        border: 1px solid var(--bs-border-color);
        border-radius: 100px;
    }

    // --- Expand / collapse caret -------------------------------------------
    .dropdown-indicator::after {
        margin-left: auto;
        opacity: 0.5;
        transition: transform 0.18s ease;
    }

    .dropdown-indicator:not(.collapsed)::after {
        opacity: 0.9;
    }

    // --- Submenus ----------------------------------------------------------
    // A hairline runs down the group with a dot per child, so it is obvious
    // which rows belong to the open parent.
    .navbar-nav .nav.collapse,
    .navbar-nav .nav.collapsing {
        position: relative;
        margin-bottom: 2px;

        &::before {
            content: '';
            position: absolute;
            top: 2px;
            bottom: 8px;
            left: 19px;
            width: 1px;
            background: var(--bs-border-color);
        }

        .nav-link {
            position: relative;
            padding-left: 34px;
            min-height: 32px;
            font-size: 0.8rem;
            font-weight: 400;

            &::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 19px;
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: var(--bs-border-color);
                transform: translate(-50%, -50%);
                transition: background-color 0.13s ease;
            }

            &:hover::before {
                background: var(--bs-secondary-color);
            }
        }

        // Child rows keep the dot marker instead of a full pill, so an open
        // parent group does not end up with two competing highlights.
        .nav-item .nav-link.active {
            color: var(--bs-primary);
            background: rgba(var(--bs-primary-rgb), 0.09);
            font-weight: 600;

            &::before {
                background: var(--bs-primary);
            }
        }
    }
}

// -----------------------------------------------------------------------------
//  Collapsed rail
//  Falcon shrinks the sidebar to icons; drop the decorations that only make
//  sense with labels visible.
// -----------------------------------------------------------------------------

.navbar-vertical-collapsed .navbar-vertical {
    .nav-link .badge,
    .navbar-nav .nav.collapse::before,
    .navbar-nav .nav.collapse .nav-link::before {
        display: none;
    }

    .nav-link:hover .nav-link-icon {
        transform: none;
    }
}