/* Ported from hris.ifc.ge (origin/main, wwwroot/css/navigation-pane.css, as of commit 77e65fa), which ported it from
   gepha-geo/stock (commits 90bee0b9 / WEB-569 and b35a87a6). It relies on app-header.css, which folds the header bar
   into the tab row, exactly as in hris. One difference, marked "personalized-health:": --app-nav-top is the pane's
   measured top (navigation-pane.js) rather than a per-theme constant, so the open section still lines up if
   anything is ever put back above the pane. */

/* The navigation pane, a width the user drags (the splitter), and an icon rail instead of nothing when collapsed.

   XAF's pane (.xaf-sidebar, a DevExpress accordion) is a fixed 270px, and collapsing it hides it outright
   (.collapse-toggle .sidebar { display: none !important }). This file changes both, on XAF's own DOM, the
   accordion is never replaced, so navigation, security and the selected-item highlight stay XAF's:

     · expanded, the pane is as wide as --app-nav-pane-w: --app-nav-w, the width navigation-pane.js remembers
       per browser, clamped here to 200px … min(480px, 40% of the window), so a narrowed window shrinks the pane
       with it; the grip on its right edge is the script's handle;
     · collapsed, it stays as a --app-nav-rail-w strip showing only the top-level groups' icons (the caption is
       the script's tooltip). Clicking one opens THAT group's section beside the rail, over the page, under a
       header with its icon, caption and a close button; the rail stays as it is.

   ── How the section is built ────────────────────────────────────────────────────────────────────────────
   The section is the group's own body (.dxbl-accordion-group-body, the accordion's container of its children),
   taken out of the rail with position: fixed and laid beside it. The script lets the icon's click through to
   the accordion when the group is closed, so the accordion expands it; it marks the group data-app-nav-open and
   sets .app-nav-flyout on <html> (Blazor never re-renders that element, so it cannot drop the class).
   position: fixed escapes the rail's scroll viewer and XAF's overflow: hidden on .xaf-nav-item, because no
   ancestor between them has a transform, filter or containment (checked on DevExpress 26.1.5, one would trap the
   section inside the 36px rail). The header is the script's own element, fixed above it.

   ── Selectors ────────────────────────────────────────────────────────────────────────────────────────────
   A top-level group is .xaf-navmenu > dxbl-accordion > .dxbl-accordion-items-container > .xaf-nav-item, its
   header the .dxbl-group-header. A top-level item with no children would carry an a.dxbl-accordion-item-content
   instead; this app has none today (its top level is "Default" and "Reports"), and the :is(…) alternatives are a
   safeguard, so one added later shows as an icon instead of a run of unstyled text in the 36px rail. The
   accordion's filter row is its .dxbl-accordion-filter group. Read from DevExpress 26.1.5 with the ribbon
   turned off (Program.cs); after an upgrade, check the rail still shows one icon per group, and that a group's
   section opens beside it.

   ── State and scope ─────────────────────────────────────────────────────────────────────────────────────
   Everything is inside min-width: 576px: below it XAF's pane is an overlay drawer (.xaf-sidebar is
   d-none d-sm-flex) and .collapse-toggle means OPEN, so neither the width nor the rail applies there. */

:root {
    --app-nav-w: 270px;
    --app-nav-pane-w: clamp(200px, var(--app-nav-w), min(480px, 40vw));
    --app-nav-rail-w: 36px;
    /* XAF's navigation icon width (DevExpress 26.1.5); the expanded pane centres it in the rail's width. */
    --app-nav-icon-w: 16px;
    /* personalized-health: where the pane starts, from the top of the window. navigation-pane.js overwrites this on
       <html> with the pane's measured top (Fluent's .5rem top margin included); 0px is only the value before the
       script runs, when no section can be open anyway. hris keeps a per-theme constant here instead. */
    --app-nav-top: 0px;
    --app-nav-surface: var(--dxds-color-surface-neutral-default-rest, var(--bs-body-bg));
}

.app-nav-resize-handle,
.app-nav-flyout-header {
    display: none;
}

@media (min-width: 576px) {
    /* ── The width ─────────────────────────────────────────────────────────────────────────────────────── */
    .app:not(.collapse-toggle) .xaf-sidebar {
        width: var(--app-nav-pane-w);
        min-width: var(--app-nav-pane-w);
        position: relative;
    }

    /* The handle: a 9px strip straddling the pane's right edge with a grip pill in its middle. */
    .app:not(.collapse-toggle) .xaf-sidebar > .app-nav-resize-handle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        bottom: 0;
        right: -5px;
        width: 9px;
        z-index: 5;
        cursor: col-resize;
        touch-action: none;
        user-select: none;
    }
    .app-nav-resize-handle > span {
        width: 4px;
        height: 64px;
        border-radius: 2px;
        background: rgba(128, 128, 128, .45);
    }
    .app-nav-resize-handle:hover > span,
    .app-nav-resizing .app-nav-resize-handle > span {
        background: rgba(128, 128, 128, .9);
    }
    /* While dragging, the cursor stays a resize cursor over the page and nothing gets text-selected. */
    html.app-nav-resizing,
    html.app-nav-resizing * {
        cursor: col-resize !important;
        user-select: none !important;
    }

    /* ── The rail ──────────────────────────────────────────────────────────────────────────────────────── */
    /* Three classes and !important outrank XAF's .collapse-toggle .sidebar { display: none !important }. */
    .app.collapse-toggle .xaf-sidebar {
        display: flex !important;
        width: var(--app-nav-rail-w);
        min-width: var(--app-nav-rail-w);
    }
    /* ── The top-level groups, in both states ──────────────────────────────────────────────────────────── */
    /* No chevron in front of a top-level group: every one of them is a group, so it says nothing (nested
       sub-groups keep theirs, where it tells a group from a view). Zero width like the rail's captions, so its
       line height still sizes the row. The icon gets the same left margin in both states, the one that centres
       it in the rail, so on « / » it does not move; only the captions come and go. That puts a group's
       icon a little left of its children's, which is intended. */
    .xaf-sidebar .xaf-navmenu > dxbl-accordion > .dxbl-accordion-items-container > .xaf-nav-item > :is(.dxbl-group-header, .dxbl-accordion-item-content) :is(.dxbl-group-expand-btn, .dxbl-accordion-group-expand-btn-container, .dxbl-accordion-item-indent) {
        flex: 0 0 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-left-width: 0 !important;
        border-right-width: 0 !important;
        overflow: hidden;
        visibility: hidden;
    }
    .xaf-sidebar .xaf-navmenu > dxbl-accordion > .dxbl-accordion-items-container > .xaf-nav-item > :is(.dxbl-group-header, .dxbl-accordion-item-content),
    .xaf-sidebar .xaf-navmenu > dxbl-accordion > .dxbl-accordion-items-container > .xaf-nav-item > .dxbl-group-header > .dxbl-accordion-item-content {
        justify-content: flex-start;
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
    .xaf-sidebar .xaf-navmenu > dxbl-accordion > .dxbl-accordion-items-container > .xaf-nav-item > :is(.dxbl-group-header, .dxbl-accordion-item-content) .xaf-nav-menu-item-icon {
        margin-left: calc((var(--app-nav-rail-w) - var(--app-nav-icon-w)) / 2) !important;
    }

    /* The rail is the pane with zero-width captions, not a layout of its own: every element that gives an
       expanded row its height stays in the flow, so each icon cell keeps that row's height, border, radius and y
       position, and only the width changes on « / ». Nothing below may set a vertical size, padding or
       margin. In particular the filter row is made invisible rather than removed, so the first group starts where
       it does under the Filter box, and closed bodies are collapsed to nothing rather than display: none, so the
       accordion's row gap between a header and its body is the same in both states. */
    .app.collapse-toggle .xaf-sidebar .dxbl-accordion-filter {
        visibility: hidden;
        overflow: hidden;
        pointer-events: none;
    }
    .app.collapse-toggle .xaf-sidebar > .about-info {
        display: none !important;
    }
    /* The accordion animates a body's height inline, hence the !important. */
    .app.collapse-toggle .xaf-sidebar .xaf-navmenu > dxbl-accordion > .dxbl-accordion-items-container > .xaf-nav-item > .dxbl-accordion-group-body {
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
        visibility: hidden;
    }
    /* The caption: zero width, but still there, so its line height still sizes the row (the chevron and indent
       already are, in both states, above). */
    .app.collapse-toggle .xaf-sidebar .xaf-navmenu > dxbl-accordion > .dxbl-accordion-items-container > .xaf-nav-item > :is(.dxbl-group-header, .dxbl-accordion-item-content) .dxbl-accordion-item-text-container {
        flex: 0 0 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-left-width: 0 !important;
        border-right-width: 0 !important;
        overflow: hidden;
        visibility: hidden;
        /* At zero width a caption would wrap word by word and grow the row; on one line it keeps its height. */
        white-space: nowrap;
    }
    /* Horizontal only: nothing beside the icon takes room, so its left margin (above) centres it in the cell. */
    .app.collapse-toggle .xaf-sidebar .xaf-navmenu > dxbl-accordion > .dxbl-accordion-items-container > .xaf-nav-item > :is(.dxbl-group-header, .dxbl-accordion-item-content),
    .app.collapse-toggle .xaf-sidebar .xaf-navmenu > dxbl-accordion > .dxbl-accordion-items-container > .xaf-nav-item > .dxbl-group-header > .dxbl-accordion-item-content {
        gap: 0 !important;
        padding-right: 0 !important;
        margin-right: 0 !important;
        cursor: pointer;
    }
    .app.collapse-toggle .xaf-sidebar .xaf-navmenu > dxbl-accordion > .dxbl-accordion-items-container > .xaf-nav-item > :is(.dxbl-group-header, .dxbl-accordion-item-content):hover,
    html.app-nav-flyout .app.collapse-toggle .xaf-sidebar .xaf-navmenu > dxbl-accordion > .dxbl-accordion-items-container > .xaf-nav-item[data-app-nav-open] > .dxbl-group-header {
        background: rgba(127, 127, 127, .22) !important;
    }
    /* The pane's own icon, at the pane's size; the gap before the caption goes. */
    .app.collapse-toggle .xaf-sidebar .xaf-navmenu > dxbl-accordion > .dxbl-accordion-items-container > .xaf-nav-item > :is(.dxbl-group-header, .dxbl-accordion-item-content) .xaf-nav-menu-item-icon {
        margin-right: 0 !important;
    }
    /* The group holding the open view gets a bar on its left edge, the rail's version of the highlight. Only
       while a tab is open: XAF keeps the last item selected after the last tab closes, and a bar then would
       point at a view that is gone. */
    .app.collapse-toggle:has(.xaf-tabbed-mdi > dxbl-tab-list [role="tab"]) .xaf-sidebar .xaf-navmenu > dxbl-accordion > .dxbl-accordion-items-container > .xaf-nav-item:has(.dxbl-active) > :is(.dxbl-group-header, .dxbl-accordion-item-content) {
        box-shadow: inset 3px 0 0 var(--bs-primary, #0d6efd);
    }

    /* ── The section beside the rail ───────────────────────────────────────────────────────────────────── */
    /* Both parts sit over the page (above the header bar's z-index 20, app-header.css) with the pane's width. The
       pane is transparent over the body's colour; over the page they need their own: Fluent's surface token, the
       Bootstrap body colour for the classic themes, mixed a little transparent, so the page shows faintly through,
       and blurred behind, so the page's text does not compete with the menu's. */
    html.app-nav-flyout .app.collapse-toggle .xaf-sidebar > .app-nav-flyout-header,
    html.app-nav-flyout .app.collapse-toggle .xaf-sidebar .xaf-navmenu > dxbl-accordion > .dxbl-accordion-items-container > .xaf-nav-item[data-app-nav-open] > .dxbl-accordion-group-body {
        position: fixed;
        left: var(--app-nav-rail-w);
        width: var(--app-nav-pane-w);
        z-index: 25;
        /* Solid first: a browser without color-mix drops the next line, and a transparent section is unreadable. */
        background-color: var(--app-nav-surface);
        background-color: color-mix(in srgb, var(--app-nav-surface) 75%, transparent);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        box-shadow: 6px 0 12px -6px rgba(0, 0, 0, .45);
    }
    /* DevExpress gives the scroll viewer and each accordion group position: relative + z-index: 0, each a
       stacking context, which would keep the section's z-index inside the rail and paint it under the page. */
    html.app-nav-flyout .app.collapse-toggle .xaf-sidebar > dxbl-scroll-viewer,
    html.app-nav-flyout .app.collapse-toggle .xaf-sidebar .xaf-navmenu > dxbl-accordion > .dxbl-accordion-items-container > .xaf-nav-item[data-app-nav-open] {
        z-index: auto !important;
    }
    /* The header: the group's icon and caption, and the close button, as tall as the tab row it covers. */
    html.app-nav-flyout .app.collapse-toggle .xaf-sidebar > .app-nav-flyout-header {
        display: flex;
        align-items: center;
        gap: 8px;
        top: var(--app-nav-top);
        height: var(--app-tab-row-h, 42px);
        padding: 0 4px 0 12px;
        border-bottom: 1px solid rgba(127, 127, 127, .25);
        font-weight: 600;
    }
    .app-nav-flyout-icon {
        width: 16px;
        height: 16px;
        flex: 0 0 auto;
    }
    .app-nav-flyout-caption {
        flex: 1 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* × drawn like the « / » toggle: the theme's text colour through a mask (Lucide x, ISC licence). */
    .app-nav-flyout-close {
        flex: 0 0 auto;
        width: var(--app-nav-toggle-size, 24px);
        height: var(--app-nav-toggle-size, 24px);
        padding: 0;
        border: 0;
        border-radius: 3px;
        background: transparent;
        color: inherit;
        opacity: .7;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background-color .15s, opacity .15s;
    }
    .app-nav-flyout-close:hover {
        opacity: 1;
        background: rgba(127, 127, 127, .22);
    }
    .app-nav-flyout-close::before {
        content: "";
        width: 16px;
        height: 16px;
        background-color: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
    }
    /* The section: the open group's body, below the header to the window's foot, scrolling on its own. The
       accordion animates a body's height inline, hence the !important on height and overflow. */
    html.app-nav-flyout .app.collapse-toggle .xaf-sidebar .xaf-navmenu > dxbl-accordion > .dxbl-accordion-items-container > .xaf-nav-item[data-app-nav-open] > .dxbl-accordion-group-body {
        display: block !important;
        top: calc(var(--app-nav-top) + var(--app-tab-row-h, 42px));
        bottom: 0;
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        padding: 4px 0 !important;
        visibility: visible;
    }
}

/* The AppifySheets logo, pinned at the foot of the pane (from hris): an element navigation-pane.js adds as the pane's
   last child; the click is the delegated listener in _Host.cshtml. app-header.css hides XAF's header logo, which has
   no room in the folded header bar. Not shown below 576px: there XAF's own header, logo included, is the layout. */
.app-nav-logo {
    display: none;
}

@media (min-width: 576px) {
    /* The accordion is the pane's flexible part and the logo its fixed foot, so a short window scrolls the
       accordion above the logo instead of pushing the logo off the pane (min-height: 0 lets a flex child shrink
       below its content, which is what makes it scroll). */
    .xaf-sidebar > dxbl-scroll-viewer {
        flex: 1 1 auto;
        min-height: 0;
    }

    /* The logo is drawn as a mask filled with currentColor, as site.css does for the header logo, so it follows
       the theme's text colour. Expanded: as wide as the pane allows, up to the header's 180px, left-aligned. */
    .xaf-sidebar > .app-nav-logo {
        display: block;
        flex: 0 0 auto;
        width: min(180px, calc(100% - 24px));
        height: 50px;
        margin: 8px 12px;
        background-color: currentColor;
        -webkit-mask: url('../images/AppifySheets_Logo.svg') left center / contain no-repeat;
        mask: url('../images/AppifySheets_Logo.svg') left center / contain no-repeat;
        cursor: pointer;
        opacity: .85;
    }
    .xaf-sidebar > .app-nav-logo:hover,
    .xaf-sidebar > .app-nav-logo:focus-visible {
        opacity: 1;
    }

    /* The rail: the same image scaled down to the rail's width (less 4px of margin each side) and centred. The
       whole wordmark is small at this size; the tooltip names it. */
    .app.collapse-toggle .xaf-sidebar > .app-nav-logo {
        width: calc(var(--app-nav-rail-w) - 8px);
        height: 20px;
        margin: 8px 4px;
        -webkit-mask-position: center;
        mask-position: center;
    }
}

/* How far an item sits in from its group (from hris). XAF's accordion gives every item a slot for an expand chevron,
   and a leaf keeps that slot as an invisible, disabled button. With the top-level groups' chevrons removed above,
   that empty slot pushed a leaf's icon about 37px to the right of its group's icon, which read as a column of its
   own rather than as the group's children. The empty slot is dropped for leaves only (a real sub-group keeps its
   chevron), and the padding is set so a leaf's icon sits one small step, about 20px, in from the group's.
   aria-level is the accordion's own depth attribute; this app's menu has only level 2 today, level 3 is covered in
   case a nested group is added. */
.xaf-sidebar .dxbl-accordion-item-content:is([aria-level="2"], [aria-level="3"]) > .dxbl-accordion-group-expand-btn-container:has(> .dxbl-invisible) {
    display: none;
}

.xaf-sidebar .dxbl-accordion-item-content[aria-level="2"]:has(> .dxbl-accordion-group-expand-btn-container > .dxbl-invisible) {
    padding-left: 26px;
}

.xaf-sidebar .dxbl-accordion-item-content[aria-level="3"]:has(> .dxbl-accordion-group-expand-btn-container > .dxbl-invisible) {
    padding-left: 42px;
}