/*
 * 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.
 *
 * Geometry and colors come from the Figma "Side nav" frame
 * (file aQYCo8agBMU7jXQWZtKETk, node 123:2288). The type stays on the app's
 * Hind face rather than the mockup's Inter so the sidebar matches the rest
 * of the product.
 *
 * 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 {
    --shield-nav-width: 268px;
    --shield-nav-bg: #001523;
    --shield-nav-fg: #f7f9fb;
    --shield-nav-active: #2a313a;
    /* Hover deliberately matches the selected state rather than being a lighter tint. */
    --shield-nav-hover: #2a313a;
    --shield-nav-border: #404954;
    --shield-nav-radius: 8px;

    background-color: var(--shield-nav-bg);
    width: var(--shield-nav-width);
    max-width: var(--shield-nav-width);
    flex: 0 0 var(--shield-nav-width);
    padding: 0;
    overflow: hidden;
    position: relative;
}

/* Desktop rail. The width lives on #sidebar because that is the flex item the
   page lays out against; NavMenu only raises the toggle. */
#sidebar.shield-sidebar-collapsed {
    --shield-nav-width: 72px;
}

/* 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 the nav toggle shows it */
@media (max-width: 991.98px) {
    /* Above .right-side, which is a flex item with z-index 1 (z-index applies to
       flex items even while position is static), and below MudBlazor dialogs. */
    #sidebar {
        position: absolute;
        top: 60px;
        z-index: 1045;
    }

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

/* The content area butts straight up against the rail — no rounded corner and no
   negative overlap, which only existed to tuck that corner over the sidebar.
   Overridden here rather than in style.css, which is synced across all products. */
.right-side {
    margin-left: 0;
    border-radius: 0;
}

/* Dismiss layer behind the floating mobile sidebar (see #sidebar z-index above) */
.shield-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background-color: rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 450px) {
    #sidebar:not(.shield-sidebar-collapsed) {
        --shield-nav-width: 240px;
    }
}

/* Every row is sized off a fixed rail width, so the nav cannot inherit whatever
   box model the surrounding page happens to set. */
.shield-nav,
.shield-nav *,
.shield-nav *::before,
.shield-nav *::after {
    box-sizing: border-box;
}

.shield-nav {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    color: var(--shield-nav-fg);
}

/* Logo row */

.shield-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 24px 24px 8px;
    flex-shrink: 0;
}

.shield-nav-logo {
    height: 32px;
    width: auto;
    flex-shrink: 0;
}

.shield-nav-panel-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 4px;
    flex-shrink: 0;
    cursor: pointer;
}

.shield-nav-panel-toggle:hover {
    background: var(--shield-nav-hover);
}

.shield-nav-panel-toggle img {
    width: 24px;
    height: 24px;
    display: block;
}

/* Scroll region — keeps the user block pinned to the bottom */

.shield-nav-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* 12 here + 12 on the row keeps the icon at x=24 while giving the selected pill
       more clearance from the window edge than the design's 8. */
    padding: 0 12px;
}

/* MudNavMenu dark-theme overrides */

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

/* MudNavGroup nests its children through MudCollapse
   (.mud-collapse-container > .mud-collapse-wrapper > .mud-collapse-wrapper-inner).
   That chain shrink-wraps the nested list to its longest label, which would make
   the sub-rows narrower than the 252px the design gives every row. */
#sidebar .mud-collapse-container,
#sidebar .mud-collapse-wrapper,
#sidebar .mud-collapse-wrapper-inner,
#sidebar .mud-nav-group,
#sidebar .mud-nav-group .mud-navmenu {
    width: 100%;
    min-width: 0;
}

/* All nav links — top-level links AND group header buttons.
   Children inside a NavGroup get overridden further down.

   Figma row: 252x58, icon box at x=16, label at x=48, rows flush with no gaps.
   MudBlazor's own margin:2px/4px would break that rhythm, so it is zeroed. */
#sidebar .mud-nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--shield-nav-fg) !important;
    background: transparent;
    border: 0;
    border-radius: var(--shield-nav-radius);
    font-size: 18px;
    line-height: 25.2px;
    font-weight: 500;
    padding: 16px 12px !important;
    padding-inline-start: 12px !important;
    padding-inline-end: 12px !important;
    margin: 0 !important;
    min-height: 58px;
    transition: background-color 140ms cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none !important;
    width: 100%;
}

#sidebar .mud-nav-link:hover {
    background: var(--shield-nav-hover) !important;
}

#sidebar .mud-nav-link.active {
    background: var(--shield-nav-active) !important;
}

/* Inner content wrapper inside a nav link — flex so the icon and label
   children space via gap.

   MudBlazor ships margin-inline-start:12px here. The design instead puts the
   label exactly 8px after the icon box, and the row's own gap already supplies
   that, so the margin has to go or every label sits 12px off and the group
   header (whose icon is a ::before, outside this wrapper) stops lining up with
   the plain links. */
#sidebar .mud-nav-link-text {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
    width: auto;
}

/* Expand chevron inside the group header. */
#sidebar .mud-nav-link-expand-icon {
    font-size: 20px;
    width: 20px;
    height: 20px;
    margin-left: auto;
    flex-shrink: 0;
    color: var(--shield-nav-fg) !important;
    fill: var(--shield-nav-fg) !important;
}

/* Wi-Fi icon prepended to the Network Security group header */
#sidebar .shield-nav-group-network > .mud-nav-link::before {
    content: "";
    background-image: url("/images/nav/nav-network-security.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* Sub-items: child .mud-nav-link inside the nested navmenu of a group.
   Figma row: 252x47, icon box at x=48, label at x=76. The inline-start override
   is needed because MudBlazor indents nested links by depth (36/48/60/72px). */
#sidebar .mud-nav-group .mud-navmenu .mud-nav-link {
    padding: 12px 12px 12px 44px !important;
    padding-inline-start: 44px !important;
    padding-inline-end: 12px !important;
    min-height: 47px;
    font-size: 16px !important;
    line-height: 22.4px !important;
    font-weight: 500 !important;
}

/* Optical vertical centring.

   Centring the label's line box is not the same as centring the letters in it:
   Hind leaves more room under the baseline than above the caps, so a perfectly
   centred box renders text that sits ~0.1em high against a centred icon. This
   nudge moves the glyphs, not the layout, so row heights stay on the Figma grid.
   Applied to the label span for links, and to the text wrapper for the group
   header, whose icon is a ::before and so sits outside that wrapper. */
#sidebar .shield-nav-label,
#sidebar .shield-nav-group-network > .mud-nav-link > .mud-nav-link-text {
    position: relative;
    top: 0.1em;
}

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

.shield-nav-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: block;
}

.shield-nav-icon-lg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: block;
}

/* Signed-in user, pinned to the bottom */

.shield-nav-user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 16px;
    flex-shrink: 0;
    border-top: 1px solid var(--shield-nav-border);
}

.shield-nav-user-identity {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--shield-nav-fg);
    text-decoration: none;
}

.shield-nav-avatar {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: block;
}

.shield-nav-avatar-photo {
    border-radius: 50%;
    object-fit: cover;
}

.shield-nav-user-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.shield-nav-user-name,
.shield-nav-user-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shield-nav-user-name {
    font-size: 16px;
    line-height: 22.4px;
    font-weight: 500;
}

.shield-nav-user-email {
    font-size: 14px;
    line-height: 19.6px;
    font-weight: 400;
}

.shield-nav-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    flex-shrink: 0;
    cursor: pointer;
}

.shield-nav-logout img {
    width: 20px;
    height: 20px;
    display: block;
}

/* Collapsed rail — icons only, labels hidden.
   Figma: 72 wide, header 72x66.25 with the logo 56x22.25 at x=8, rows 56x56 at
   x=8, bottom block 72x56. Every row is 56 rather than the expanded 58. */

/* One click anywhere expands: a transparent sheet over the whole rail, rendered
   only while collapsed so it can never swallow clicks in the expanded menu. */
.shield-nav-expand-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

/* Height is pinned so swapping the logo for the taller panel icon on hover cannot
   reflow the rail. Figma's collapsed header is 66.25 tall. */
#sidebar.shield-sidebar-collapsed .shield-nav-header {
    justify-content: center;
    padding: 24px 8px 20px;
    height: 66.25px;
    overflow: hidden;
}

/* Hovering the collapsed rail swaps the mark for the panel icon: the rail is one
   big expand target, and this is what says so. */
#sidebar.shield-sidebar-collapsed .shield-nav-expand-hint {
    display: none;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

#sidebar.shield-sidebar-collapsed .shield-nav:hover .shield-nav-logo {
    display: none;
}

#sidebar.shield-sidebar-collapsed .shield-nav:hover .shield-nav-expand-hint {
    display: block;
}

/* flex-[1_0_0] in the design: the mark fills the 56px between the 8px gutters. */
#sidebar.shield-sidebar-collapsed .shield-nav-logo {
    width: 100%;
    height: auto;
    flex: 1 0 0;
    min-width: 0;
}

#sidebar.shield-sidebar-collapsed .shield-nav-label {
    display: none;
}

#sidebar.shield-sidebar-collapsed .mud-nav-link {
    justify-content: center;
    min-height: 56px;
}

/* Figma draws this rule as a 2px inside stroke, so the block stays 56 tall.
   A real border-top would add to that and push the rail to 58. */
#sidebar.shield-sidebar-collapsed .shield-nav-user {
    justify-content: center;
    height: 56px;
    padding: 16px;
    border-top: 0;
    box-shadow: inset 0 2px 0 var(--shield-nav-border);
}

/* Stands in for the NavGroup header, which has no room for its sub-items here. */
.shield-nav-collapsed-group,
.shield-nav-user-avatar-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px;
    border: 0;
    background: transparent;
    border-radius: var(--shield-nav-radius);
    cursor: pointer;
}

.shield-nav-user-avatar-button {
    padding: 0;
}

.shield-nav-collapsed-group:hover,
.shield-nav-user-avatar-button:hover {
    background: var(--shield-nav-hover);
}

#sidebar .shield-nav-collapsed-group.shield-nav-collapsed-active {
    background: var(--shield-nav-active);
}

#sidebar.shield-sidebar-collapsed .shield-nav-avatar {
    width: 24px;
    height: 24px;
}