/* ============================================================
   Sidenav — two-tone, #e7e7ff lavender on white.

   The sidebar body is white. A closed section is a white
   card with the section's icon in purple. The open section's
   title becomes a pale lavender header, and its entries sit in a white
   panel joined to it; the current page is a tinted row inside that
   panel. Everything is driven by the --sn-* tokens below, which flip
   for dark mode, so the theme's menu colour setting no longer applies
   to this sidebar.

   Loaded after app.min.css and app-rail.css (see _HeadCSS.cshtml) so
   its rules win the cascade at equal specificity. Row structure applies
   to the expanded sizes; the condensed, compact and sm-hover rails keep
   the theme's icon-only layout. */

:root {
    /* #e7e7ff is the hue. The header uses it as is with dark purple text; icons
       and text that sit on white use the deeper purples so they stay readable. */
    --sn-body: #ffffff;          /* sidebar background */
    --sn-card: #ffffff;          /* closed section card, open panel */
    --sn-card-line: #d6d6f5;     /* card hairline — carries the cards on white */
    --sn-head: #e7e7ff;          /* open section header */
    --sn-head-text: #3c3489;
    --sn-head-soft: rgba(119, 126, 221, 0.18);
    --sn-ink: #777edd;           /* icons on closed cards, active entry icon */
    --sn-ink-strong: #534ab7;    /* active entry text */
    --sn-title: #1f2937;         /* closed section wording */
    --sn-text: #2d2d3f;          /* entry text */
    --sn-text-muted: #8b8bb0;    /* entry icons, carets */
    --sn-tint: #f0f0fd;          /* hover and active row */
    --sn-rule: rgba(119, 126, 221, 0.3);
    --sn-radius: 8px;
    --sn-row: 36px;
}

html[data-bs-theme=dark] {
    --sn-body: var(--highdmin-menu-bg, #1f2937);
    --sn-card: #26323f;
    --sn-card-line: #3f3f6a;
    --sn-head: #534ab7;
    --sn-head-text: #ffffff;
    --sn-head-soft: rgba(255, 255, 255, 0.18);
    --sn-ink: #afa9ec;
    --sn-ink-strong: #cecbf6;
    --sn-title: #e5ecf2;
    --sn-text: #d5e0e6;
    --sn-text-muted: #9c9cc0;
    --sn-tint: rgba(119, 126, 221, 0.2);
    --sn-rule: rgba(175, 169, 236, 0.22);
}

/* ---- Sidebar surface ----------------------------------------- */

.sidenav-menu,
.sidenav-menu .sidebar-support {
    background: var(--sn-body);
}

.sidenav-menu .logo {
    border-bottom-color: var(--sn-card-line);
}

/* The "Scroll down for more" strip at the foot of the list takes the
   sidebar's own hue rather than the theme primary. */
.sidenav-menu .sidebar-scroll-hint {
    background: rgba(119, 126, 221, 0.9);
    color: #ffffff;
}

.sidenav-menu .side-nav {
    gap: 0;
    padding: 6px 0 12px;
}

.sidenav-menu .side-nav.side-nav-section-list {
    display: block;
    padding: 4px 0;
    margin: 0;
    gap: 0;
}

.sidenav-menu .side-nav.side-nav-section-list > .side-nav-item {
    padding: 0 6px;
    margin-bottom: 1px;
}

/* ---- Section titles ------------------------------------------ */

/* Closed: a white card. The theme makes titles inert (pointer-events:
   none) and shouts them in small caps; this is a row with the section's
   icon and name in teal, sentence case. */
.side-nav .side-nav-title.side-nav-section {
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 10px 0;
    padding: 0 8px 0 10px;
    min-height: 38px;
    border-radius: var(--sn-radius);
    background: var(--sn-card);
    box-shadow: 0 0 0 1px var(--sn-card-line);
    opacity: 1;
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--sn-title);
    white-space: nowrap;
    transition: background-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.side-nav .side-nav-title.side-nav-section:hover,
.side-nav .side-nav-title.side-nav-section:focus-visible {
    background: var(--sn-tint);
    color: var(--sn-title);
    outline: none;
}

/* The icon is the one touch of colour on a closed card. */
.side-nav .side-nav-section .side-nav-section-ico {
    flex: 0 0 auto;
    width: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--sn-ink);
}

.side-nav .side-nav-section[aria-expanded="true"] .side-nav-section-ico {
    color: var(--sn-head-text);
}

.side-nav .side-nav-section .side-nav-section-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.side-nav .side-nav-section .side-nav-section-arrow {
    flex: 0 0 auto;
    font-size: 1rem;
    line-height: 1;
    color: var(--sn-text-muted);
    transition: transform 0.18s ease, color 0.14s ease;
}

.side-nav .side-nav-section:hover .side-nav-section-arrow {
    color: var(--sn-ink);
}

/* Open: the card becomes a solid teal header, square at the bottom so
   the white panel beneath joins it into one block. */
.side-nav .side-nav-title.side-nav-section[aria-expanded="true"] {
    margin-top: 8px;
    background: var(--sn-head);
    color: var(--sn-head-text);
    box-shadow: none;
    border-radius: var(--sn-radius) var(--sn-radius) 0 0;
}

.side-nav .side-nav-title.side-nav-section[aria-expanded="true"]:hover {
    background: var(--sn-head);
    color: var(--sn-head-text);
}

.side-nav .side-nav-section[aria-expanded="true"] .side-nav-section-arrow {
    transform: rotate(180deg);
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--sn-head-soft);
    color: var(--sn-head-text);
}

/* ---- Folding ------------------------------------------------- */

/* The body folds as one block: a grid row from 0fr to 1fr animates to
   the content's own height, and the clip hides the entries meanwhile. */
.sidenav-menu .side-nav > .side-nav-section-body {
    display: grid;
    grid-template-rows: 0fr;
    padding: 0;
    margin: 0 10px;
    opacity: 0;
}

.sidenav-menu.sn-animate .side-nav > .side-nav-section-body {
    transition: grid-template-rows 0.2s ease, opacity 0.16s ease;
}

.sidenav-menu .side-nav > .side-nav-section-body.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
}

.sidenav-menu .side-nav-section-clip {
    min-height: 0;
    overflow: hidden;
}

/* The white panel under an open header. */
.sidenav-menu .side-nav > .side-nav-section-body.is-open .side-nav-section-clip {
    background: var(--sn-card);
    border-radius: 0 0 var(--sn-radius) var(--sn-radius);
    box-shadow: 0 0 0 1px var(--sn-card-line);
    margin-bottom: 2px;
}

/* A divider inside a section: a short hairline. */
.sidenav-menu .side-nav-item.side-nav-divider {
    padding: 4px 12px;
}

.sidenav-menu .side-nav-item.side-nav-divider > div {
    height: 1px;
    background: var(--sn-rule);
}

@media (prefers-reduced-motion: reduce) {
    .sidenav-menu.sn-animate .side-nav > .side-nav-section-body { transition: none; }
    .side-nav .side-nav-section .side-nav-section-arrow { transition: none; }
}

/* The condensed rail hides section titles altogether, so there is nothing
   to expand from — every body stays open and unframed there. */
html[data-sidenav-size="condensed"]:not([data-layout="topnav"]) .sidenav-menu .side-nav > .side-nav-section-body,
html[data-sidenav-size="sm-hover"]:not([data-layout="topnav"]) .sidenav-menu:not(:hover) .side-nav > .side-nav-section-body {
    grid-template-rows: 1fr;
    opacity: 1;
    margin: 0;
}

html[data-sidenav-size="condensed"]:not([data-layout="topnav"]) .sidenav-menu .side-nav-section-clip,
html[data-sidenav-size="sm-hover"]:not([data-layout="topnav"]) .sidenav-menu:not(:hover) .side-nav-section-clip {
    overflow: visible;
    background: none;
    box-shadow: none;
}

/* ---- Entries (expanded sizes only) --------------------------- */

html:not([data-sidenav-size="condensed"]):not([data-sidenav-size="compact"]):not([data-sidenav-size="sm-hover"]) .sidenav-menu .side-nav > .side-nav-item > .side-nav-link {
    position: relative;
    min-height: var(--sn-row);
    padding: 0 8px 0 10px;
    gap: 10px;
    border-radius: var(--sn-radius);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--sn-text);
    transition: background-color 0.12s ease, color 0.12s ease;
}

html:not([data-sidenav-size="condensed"]):not([data-sidenav-size="compact"]):not([data-sidenav-size="sm-hover"]) .sidenav-menu .side-nav > .side-nav-item > .side-nav-link .menu-icon {
    flex: 0 0 auto;
    width: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sn-text-muted);
    transition: color 0.12s ease;
}

html:not([data-sidenav-size="condensed"]):not([data-sidenav-size="compact"]):not([data-sidenav-size="sm-hover"]) .sidenav-menu .side-nav > .side-nav-item > .side-nav-link .menu-icon i {
    font-size: 1.05rem;
    line-height: 1;
}

html:not([data-sidenav-size="condensed"]):not([data-sidenav-size="compact"]):not([data-sidenav-size="sm-hover"]) .sidenav-menu .side-nav > .side-nav-item > .side-nav-link .menu-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

html:not([data-sidenav-size="condensed"]):not([data-sidenav-size="compact"]):not([data-sidenav-size="sm-hover"]) .sidenav-menu .side-nav > .side-nav-item > .side-nav-link:hover,
html:not([data-sidenav-size="condensed"]):not([data-sidenav-size="compact"]):not([data-sidenav-size="sm-hover"]) .sidenav-menu .side-nav > .side-nav-item > .side-nav-link:focus-visible {
    background: var(--sn-tint);
    color: var(--sn-ink-strong);
    outline: none;
}

html:not([data-sidenav-size="condensed"]):not([data-sidenav-size="compact"]):not([data-sidenav-size="sm-hover"]) .sidenav-menu .side-nav > .side-nav-item > .side-nav-link:hover .menu-icon {
    color: var(--sn-ink);
}

/* The current page: a teal-tinted row with teal text and icon. */
html:not([data-sidenav-size="condensed"]):not([data-sidenav-size="compact"]):not([data-sidenav-size="sm-hover"]) .sidenav-menu .side-nav > .side-nav-item.active > .side-nav-link,
html:not([data-sidenav-size="condensed"]):not([data-sidenav-size="compact"]):not([data-sidenav-size="sm-hover"]) .sidenav-menu .side-nav > .side-nav-item > .side-nav-link.active {
    background: var(--sn-tint);
    color: var(--sn-ink-strong);
    font-weight: 600;
}

html:not([data-sidenav-size="condensed"]):not([data-sidenav-size="compact"]):not([data-sidenav-size="sm-hover"]) .sidenav-menu .side-nav > .side-nav-item.active > .side-nav-link .menu-icon,
html:not([data-sidenav-size="condensed"]):not([data-sidenav-size="compact"]):not([data-sidenav-size="sm-hover"]) .sidenav-menu .side-nav > .side-nav-item > .side-nav-link.active .menu-icon {
    color: var(--sn-ink);
}

/* ---- Sub-menus ----------------------------------------------- */

html:not([data-sidenav-size="condensed"]):not([data-sidenav-size="compact"]):not([data-sidenav-size="sm-hover"]) .sidenav-menu .side-nav .sub-menu {
    position: relative;
    margin: 2px 0 4px 19px;
    padding-left: 11px;
    border-left: 1px solid var(--sn-rule);
}

html:not([data-sidenav-size="condensed"]):not([data-sidenav-size="compact"]):not([data-sidenav-size="sm-hover"]) .sidenav-menu .side-nav .sub-menu .side-nav-item .side-nav-link {
    position: relative;
    min-height: 32px;
    padding: 0 8px 0 10px;
    border-radius: var(--sn-radius);
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--sn-text);
    transition: background-color 0.12s ease, color 0.12s ease;
}

html:not([data-sidenav-size="condensed"]):not([data-sidenav-size="compact"]):not([data-sidenav-size="sm-hover"]) .sidenav-menu .side-nav .sub-menu .side-nav-item .side-nav-link:hover {
    background: var(--sn-tint);
    color: var(--sn-ink-strong);
}

html:not([data-sidenav-size="condensed"]):not([data-sidenav-size="compact"]):not([data-sidenav-size="sm-hover"]) .sidenav-menu .side-nav .sub-menu .side-nav-item .side-nav-link.active {
    background: var(--sn-tint);
    color: var(--sn-ink-strong);
    font-weight: 600;
}

html:not([data-sidenav-size="condensed"]):not([data-sidenav-size="compact"]):not([data-sidenav-size="sm-hover"]) .sidenav-menu .side-nav .sub-menu .side-nav-item .side-nav-link.active::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    border-radius: 2px;
    background: var(--sn-ink);
}

/* ---- Trailing marks (badge, lock, supplier eye, caret) --------- */

.side-nav .side-nav-link .badge {
    margin-left: auto;
    font-size: 0.66rem;
    font-weight: 600;
    padding: 0.22em 0.5em;
}

.side-nav .side-nav-link .supplier-code-info {
    margin-left: auto;
    font-size: 0.82rem;
    opacity: 0.85;
    color: var(--bs-success, #198754);
}

.side-nav .side-nav-link .ri-lock-line {
    font-size: 0.85rem;
    color: var(--sn-text-muted);
}

.side-nav .side-nav-link .menu-arrow {
    font-size: 0.95rem;
    color: var(--sn-text-muted);
}

.side-nav .side-nav-link:hover .menu-arrow,
.side-nav .side-nav-link[aria-expanded="true"] .menu-arrow {
    color: var(--sn-ink);
}

/* ---- Condensed / compact rails: keep text readable on the wash ---- */

html[data-sidenav-size="condensed"]:not([data-layout="topnav"]) .sidenav-menu .side-nav-link,
html[data-sidenav-size="compact"]:not([data-layout="topnav"]) .sidenav-menu .side-nav-link,
html[data-sidenav-size="sm-hover"]:not([data-layout="topnav"]) .sidenav-menu:not(:hover) .side-nav-link {
    color: var(--sn-text);
}