/* ===== SiteNav — shared sidebar menu (Controls/SiteNav.ascx, OD-97) =====
   Only styles the menu itself. The sidebar column (width, background, border, sticky
   position) belongs to the host master.

   Colours are custom properties with the light defaults below. A host overrides them on
   an ancestor of the menu, e.g.  .om-sidebar { --nav-accent: #8a1c2b; }  */

:root {
    --nav-bg: #ffffff;
    --nav-border: #d8dee4;
    --nav-accent: #007F97;
    --nav-accent-text: #00606f;
    --nav-text: #36414c;
    --nav-head-text: #1c2b36;
    --nav-group-text: #6b7a85;
    --nav-ctx-text: #8a97a1;
    --nav-empty-text: #77898f;
    --nav-tool-text: #43585f;
    --nav-chev: #8a949e;
    --nav-hover-bg: #f0f3f6;
    --nav-link-hover-bg: #eef4f6;
    --nav-active-bg: #e0f0f3;
    --nav-pin: #c2cad0;
    --nav-msg-text: #8a5a10;
    --nav-msg-bg: #faf0de;
}

/* independent of the host's base font (Site5.css uses .80em, SiteModern.css 14px) */
.site-nav {
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 14px;
}

    .site-nav,
    .site-nav * {
        box-sizing: border-box;
    }

/* stays visible while the menu scrolls underneath it */
.nav-search {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--nav-bg);
}

    .nav-search input {
        width: 100%;
        border: 1px solid var(--nav-border);
        border-radius: 8px;
        padding: 7px 10px;
        font-size: 13px;
        outline: none;
        margin-bottom: 10px;
    }

        .nav-search input:focus {
            border-color: var(--nav-accent);
        }

/* expand all / collapse all */
.nav-tools {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.nav-tool {
    flex: 1 1 auto;
    background: var(--nav-bg);
    border: 1px solid var(--nav-border);
    border-radius: 6px;
    padding: 5px 6px;
    font: inherit;
    font-size: 11.5px;
    color: var(--nav-tool-text);
    cursor: pointer;
}

    .nav-tool:hover {
        background: var(--nav-hover-bg);
    }

/* short notice, e.g. the pin limit */
.nav-msg {
    display: none;
    font-size: 11.5px;
    color: var(--nav-msg-text);
    background: var(--nav-msg-bg);
    border-radius: 6px;
    padding: 6px 8px;
    margin-bottom: 8px;
}

/* one menu row: caption on the left, pin star on the right */
.nav-item {
    display: flex;
    align-items: flex-start;
}

    .nav-item .nav-link {
        flex: 1 1 auto;
        min-width: 0;
    }

.nav-pin {
    flex: 0 0 auto;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 8px 6px;
    color: var(--nav-pin);
    opacity: 0;
}

.nav-item:hover .nav-pin,
.nav-pin:focus {
    opacity: 1;
}

.nav-pin.pinned {
    opacity: 1;
    color: var(--nav-accent);
}

.nav-pinned .nav-head {
    color: var(--nav-accent-text);
}

.nav-link {
    display: block;
    padding: 7px 10px;
    border-radius: 6px;
    color: var(--nav-text);
    text-decoration: none;
    font-size: 12.5px;
    /* long captions wrap instead of being cut off; the full text is also in the title attribute */
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.35;
}

    .nav-link:hover {
        background: var(--nav-link-hover-bg);
        color: var(--nav-accent-text);
    }

    .nav-link.active {
        background: var(--nav-active-bg);
        color: var(--nav-accent-text);
        font-weight: 600;
    }

.nav-home {
    font-weight: 600;
    margin-bottom: 4px;
}

.nav-section {
    margin-top: 6px;
}

.nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 8px 10px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--nav-head-text);
    cursor: pointer;
    border-radius: 6px;
    text-align: left;
}

    .nav-head:hover {
        background: var(--nav-hover-bg);
    }

    .nav-head .chev {
        color: var(--nav-chev);
        font-size: 10px;
        transition: transform 0.15s ease;
        transform: rotate(-90deg);
    }

.nav-section.open .nav-head .chev {
    transform: rotate(0deg);
}

.nav-items {
    display: none;
    padding-left: 8px;
}

.nav-section.open .nav-items,
.nav-list.searching .nav-items {
    display: block;
}

.nav-group {
    font-size: 13.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--nav-group-text);
    padding: 8px 10px 2px 10px;
}

/* control captions sit indented under their MENU_GROUP_NAME.
   Scoped to .nav-items so the top-level Home link keeps its own alignment. */
.nav-items .nav-link {
    padding-left: 22px;
}

/* menu (and group) name under a search result; hidden the rest of the time */
.nav-ctx {
    display: none;
}

.nav-list.searching .nav-link .nav-ctx {
    display: block;
    font-size: 11px;
    color: var(--nav-ctx-text);
    margin-top: 1px;
}

.nav-empty {
    display: none;
    font-size: 12.5px;
    color: var(--nav-empty-text);
    padding: 10px;
}