/*
 * Shared Keytos side-navigation shell.
 *
 * Link it from a client's index.html as
 *   <link href="_content/KeytosUIShared/css/navbar.css" rel="stylesheet" />
 * after css/style.css and before any product-specific navbar.css.
 *
 * Geometry and colors come from the Figma "Side nav" frame
 * (file aQYCo8agBMU7jXQWZtKETk, node 123:2288): a dark rail 268px wide that
 * collapses to a 72px icon rail, with the signed-in user pinned to the bottom.
 * Type stays on each app's own face rather than the mockup's Inter so the sidebar
 * matches the rest of the product.
 *
 * This file owns everything that is not product-specific: the #sidebar geometry,
 * the MudNavMenu dark-theme overrides, the responsive behaviour and the collapsed
 * rail. A product adds only what differs — its group-header icons, or a different
 * logo treatment in the collapsed rail (see Shield's navbar.css). Keep those in the
 * product's own file; keep anything two products would share here.
 *
 * These rules deliberately do NOT live in style.css: that file is synced across
 * every client by scripts/sync_styles.py, so this #sidebar geometry would land on
 * products that have not adopted this nav.
 *
 * Markup contract (see any adopting product's NavMenu.razor):
 *   #sidebar[.kt-sidebar-collapsed]
 *     > .kt-nav
 *         > button.kt-nav-expand-overlay     (collapsed only)
 *         > .kt-nav-header                   .kt-nav-logo / .kt-nav-logo-mark
 *         > .kt-nav-scroll > MudNavMenu       rows carry .kt-nav-fa|.kt-nav-icon
 *                                             + .kt-nav-label
 *         > .kt-nav-user
 *
 * MudBlazor v9 NavGroup structure:
 *   .mud-nav-group
 *     > button.mud-nav-link            <- group header (TitleContent renders
 *                                         inside its .mud-nav-link-text)
 *     > .mud-navgroup-collapse
 *         > ul.mud-navmenu
 *             > .mud-nav-item
 *                 > .mud-nav-link      <- child link
 */

#sidebar {
    --kt-nav-width: 268px;
    --kt-nav-bg: #001523;
    --kt-nav-fg: #f7f9fb;
    --kt-nav-active: #2a313a;
    /* Hover deliberately matches the selected state rather than being a lighter tint. */
    --kt-nav-hover: #2a313a;
    --kt-nav-border: #404954;
    --kt-nav-radius: 8px;

    background-color: var(--kt-nav-bg);
    width: var(--kt-nav-width);
    max-width: var(--kt-nav-width);
    flex: 0 0 var(--kt-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.kt-sidebar-collapsed {
    --kt-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) */
.kt-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(.kt-sidebar-collapsed) {
        --kt-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. */
.kt-nav,
.kt-nav *,
.kt-nav *::before,
.kt-nav *::after {
    box-sizing: border-box;
}

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

/* Logo row */

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

/* The expanded rail's mark. */
.kt-nav-logo {
    height: 32px;
    width: auto;
    flex-shrink: 0;
}

/* Optional square mark for the collapsed rail, for products whose logo is a wide
   wordmark that would be unreadable scaled into a 56px box. Products that scale
   their logo instead simply omit this element and re-show .kt-nav-logo while
   collapsed (see Shield's navbar.css). */
.kt-nav-logo-mark {
    display: none;
    height: 32px;
    width: auto;
    flex-shrink: 0;
}

.kt-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;
}

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

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

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

.kt-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(--kt-nav-fg) !important;
    background: transparent;
    border: 0;
    border-radius: var(--kt-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(--kt-nav-hover) !important;
}

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

/* Inner content wrapper inside a nav link — flex so the icon and label
   children space via gap. It also wraps MudNavGroup's TitleContent, which is why
   a group header built that way needs no separate icon rule.

   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 a 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. MudBlazor's default arrow is a filled
   triangle, so the groups pass ExpandIcon="" — that renders an empty span and the
   Fluent chevron the design uses is drawn here from the shared SVG. Painted on
   MudBlazor's own element rather than a pseudo-element so its rotate-on-expand
   class still applies. */
#sidebar .mud-nav-link-expand-icon {
    font-size: 20px;
    width: 20px;
    height: 20px;
    margin-left: auto;
    flex-shrink: 0;
    background-image: url("../images/nav/nav-chevron-down.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}

/* 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:
   the faces we ship leave 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. */
#sidebar .kt-nav-label {
    position: relative;
    top: 0.1em;
}

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

/* Exported SVG row icons. */

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

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

/* Font Awesome row icons, for products whose menu predates an icon design. Boxed
   to the same squares the design gives its SVGs so the labels line up whichever
   kind of glyph a row uses. The glyph is set a couple of px under the box: Font
   Awesome draws to the em box, not to the icon's ink bounds, so matching sizes
   outright renders it visibly larger than the equivalent SVG.

   Qualified with #sidebar because Font Awesome's stylesheet is a CDN link loaded
   after this file, and its .fa-solid rules (display: inline-block, width: 1.25em)
   tie with a bare class selector on specificity and win on order — which sizes the
   box off the font instead of the design and shifts every label a couple of px. */
#sidebar .kt-nav-fa,
#sidebar .kt-nav-fa-sm {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#sidebar .kt-nav-fa {
    width: 24px;
    height: 24px;
    font-size: 18px;
}

#sidebar .kt-nav-fa-sm {
    width: 20px;
    height: 20px;
    font-size: 15px;
}

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

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

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

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

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

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

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

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

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

.kt-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;
}

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

/* Collapsed rail — icons only, labels hidden.
   Figma: 72 wide, header 72x66.25 with the logo 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. */
.kt-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 mark for the taller panel icon on hover cannot
   reflow the rail. Figma's collapsed header is 66.25 tall. */
#sidebar.kt-sidebar-collapsed .kt-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.kt-sidebar-collapsed .kt-nav-expand-hint {
    display: none;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

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

#sidebar.kt-sidebar-collapsed .kt-nav-logo-mark {
    display: block;
}

/* Hides whichever of the two the product actually shows while collapsed. */
#sidebar.kt-sidebar-collapsed .kt-nav:hover .kt-nav-logo,
#sidebar.kt-sidebar-collapsed .kt-nav:hover .kt-nav-logo-mark {
    display: none;
}

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

/* Collapsed rows show the icon only, but the label is the link's accessible name —
   display:none would drop it from the accessibility tree and leave a screen reader
   with a row of unlabelled icons. So it is taken out of the visual flow and left
   in the tree instead. Absolute positioning also keeps the row centred on its
   icon, which is what justify-content below is for. */
#sidebar.kt-sidebar-collapsed .kt-nav-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

#sidebar.kt-sidebar-collapsed .mud-nav-link {
    justify-content: center;
}

/* Rows are 56 collapsed rather than the expanded 58. */
#sidebar.kt-sidebar-collapsed .mud-nav-link,
#sidebar.kt-sidebar-collapsed .mud-nav-group .mud-navmenu .mud-nav-link {
    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.kt-sidebar-collapsed .kt-nav-user {
    justify-content: center;
    height: 56px;
    padding: 16px;
    border-top: 0;
    box-shadow: inset 0 2px 0 var(--kt-nav-border);
}

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

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

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

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

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