/*
 * Shield-specific navigation sidebar styles.
 *
 * Loaded after style.css. Overrides shared #sidebar geometry and adds
 * MudNavMenu dark-theme rules. Do not move these into style.css — that
 * file is synced across products.
 *
 * MudBlazor v7 NavGroup structure:
 *   .mud-nav-group
 *     > button.mud-nav-link            <- group header
 *     > .mud-navgroup-collapse
 *         > ul.mud-navmenu
 *             > .mud-nav-item
 *                 > .mud-nav-link      <- child link
 */

#sidebar {
    background-color: #162438;
    width: 224px;
    max-width: 224px;
    flex: 0 0 224px;
    padding: 22px 12px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

/* Desktop: override Bootstrap's d-lg-block (display:block) with flex */
@media (min-width: 992px) {
    #sidebar {
        display: flex !important;
        flex-direction: column;
        height: 100vh;
        position: sticky;
        top: 0;
    }
}

/* Mobile: position over content when Bootstrap toggle shows it */
@media (max-width: 991.98px) {
    #sidebar {
        position: absolute;
        top: 60px;
        z-index: 2;
    }

    #sidebar.show {
        display: flex !important;
        flex-direction: column;
        height: auto;
    }
}

@media screen and (max-width: 450px) {
    #sidebar {
        flex: 0 0 200px;
        max-width: 200px;
        width: 200px;
    }
}

/* Shield sidebar logo */
.shield-logo-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    margin-bottom: 24px;
    flex-shrink: 0;
}

.shield-logo-img {
    height: 26px;
    width: auto;
    filter: brightness(0) invert(1);
}

.shield-logo-tag {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    font-family: "Hind", sans-serif;
}

/* MudNavMenu dark-theme overrides */

#sidebar .mud-navmenu {
    padding: 0 !important;
}

/* All nav links — top-level links AND group header buttons.
   Children inside a NavGroup get overridden further down. */
#sidebar .mud-nav-link {
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, 0.65) !important;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 400;
    padding: 8px 12px !important;
    transition: all 140ms cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 1px;
    text-decoration: none !important;
    width: 100%;
}

#sidebar .mud-nav-link:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #fff !important;
}

#sidebar .mud-nav-link.active {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    font-weight: 500;
}

/* Inner content wrapper inside a nav link — flex so the FA icon and
   label children space via gap. */
#sidebar .mud-nav-link-text {
    display: flex;
    align-items: center;
    gap: 9px;
}

/* Expand chevron icon inside the group header. */
#sidebar .mud-nav-link-expand-icon {
    font-size: 16px;
    width: 16px;
    height: 16px;
    margin-left: auto;
    color: rgba(255, 255, 255, 0.45) !important;
    fill:  rgba(255, 255, 255, 0.45) !important;
}


/* FA wifi icon prepended to the Network Security group header */
#sidebar .shield-nav-group-network > .mud-nav-link::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f1eb";
    font-size: 14px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
    align-self: center;
}

/* Sub-items: child .mud-nav-link inside the nested navmenu of a group */
#sidebar .mud-nav-group .mud-navmenu .mud-nav-link {
    padding: 5px 12px 5px 28px !important;
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-weight: 400 !important;
    border-radius: 6px !important;
    margin-bottom: 0 !important;
    border: 1px solid transparent !important;
    gap: 8px;
}

#sidebar .mud-nav-group .mud-navmenu .mud-nav-link:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

#sidebar .mud-nav-group .mud-navmenu .mud-nav-link.active {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    font-weight: 500 !important;
}

#sidebar .mud-nav-group .mud-navmenu .shield-nav-icon {
    font-size: 14px;
    width: 16px;
}

/* Network Security group header brightens when a child route is active */
#sidebar .shield-nav-group-active > .mud-nav-link {
    color: #fff !important;
}

#sidebar .shield-nav-group-active > .mud-nav-link::before {
    color: #fff;
}

/* FA icon shared styling for child content icons */
.shield-nav-icon {
    font-size: 14px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

/* Divider between top and bottom nav groups */
.shield-divider {
    border-color: rgba(255, 255, 255, 0.1) !important;
    margin: 8px 4px !important;
    opacity: 1 !important;
}