/*
 * Fixes/overrides for the vertical sidebar (Views/Shared/Sections/Menu/_VerticalMenu.cshtml)
 * that the vendored core.css / theme-default.css don't quite cover for our markup:
 *  - breathing room above the brand row and above the menu list
 *  - the collapse toggle rendering as a true circle (it was stretching into an
 *    oval because our icon carried the generic .menu-icon spacing meant for
 *    icons followed by label text)
 *  - page content padding-left when the menu is collapsed (core.css only ever
 *    sets padding-left for the *expanded* width, never the collapsed one, so
 *    content sat underneath the collapsed rail)
 */

/* Brand wordmark: size it to match the 28px logo mark next to it, and split
   into the same two-tone treatment as the logo/home-page wordmark - "Docs"
   in near-black, "Analytics" in the brand purple. */
.app-brand-text {
    font-size: 1.375rem;
    line-height: 28px;
}

.app-brand-text .text-brand-docs {
    color: #1E2337;
}

.app-brand-text .text-brand-analytics {
    color: #696CFF;
}

/* Widen the expanded sidebar slightly (core.css ships 16.25rem; even with
   "Doc" abbreviated instead of "Document(s)", the longest labels - "Current
   Issued Docs", "Physical Doc History" - still clip by a few px at the
   vendor default, so this bumps it to the smallest width that fits them)
   and restore spacing between a submenu item's icon and its label text
   (core.css deliberately zeroes .menu-sub .menu-icon's margin-right, which
   reads as the icon and text being crammed together). */
.menu-vertical,
.menu-vertical .menu-block,
.menu-vertical .menu-inner > .menu-item,
.menu-vertical .menu-inner > .menu-header {
    width: 17rem;
}

@media (min-width: 1200px) {
    .layout-menu-fixed:not(.layout-menu-collapsed) .layout-page,
    .layout-menu-fixed-offcanvas:not(.layout-menu-collapsed) .layout-page {
        padding-left: 17rem;
    }
}

.menu-sub .menu-icon {
    margin-right: 0.5rem;
}

.layout-menu .app-brand {
    position: relative;
    overflow: visible;
    margin-top: 2.5rem !important;
    margin-bottom: 0.75rem;
}

.layout-menu .menu-inner-shadow + .menu-inner,
.layout-menu .menu-inner {
    margin-top: 0.5rem;
}

/* `main.js` toggles Bootstrap's `.d-block` (display: block !important) on
   this element on hover-with-delay (see wwwroot/js/main.js) to reveal it in
   the collapsed rail. `!important` beats our own `display: flex` below
   regardless of selector specificity, so on hover the button silently
   drops out of flex mode and the icon loses its centering, appearing to
   jump. Centering the icon itself via absolute positioning sidesteps the
   conflict entirely - it stays centered no matter what `display` the
   button ends up with. */
.layout-menu .app-brand .layout-menu-toggle {
    inset-inline-start: auto;
    right: -1.1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    margin: 0;
}

.layout-menu .app-brand .layout-menu-toggle i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.1rem;
    height: 1.1rem;
    font-size: 1.1rem;
    margin: 0;
    line-height: 1;
}

@media (min-width: 1200px) {
    .layout-menu-fixed.layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) .layout-page {
        padding-left: 5.25rem;
    }

    /* core.css positions .navbar-detached via `width` + auto margins on a
       fixed-position box (left/right both pinned to the viewport edge) -
       that combination lets the browser silently re-solve `left` in a way
       that does NOT match .layout-page's own padding-left for our markup
       (confirmed by measuring against the page content below it: it drifts
       ~42px short on the collapsed rail, though the expanded case happens to
       come out right). Setting left/right explicitly for both states sidesteps
       that resolution entirely - it's unambiguous and matches the content
       column below it pixel for pixel. */
    .layout-navbar-fixed:not(.layout-menu-collapsed) .layout-navbar.navbar-detached {
        left: calc(17rem + 1.625rem) !important;
        right: 1.625rem !important;
        width: auto !important;
        margin: 1rem 0 0 !important;
    }
    .layout-navbar-fixed.layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) .layout-navbar.navbar-detached {
        left: calc(5.25rem + 1.625rem) !important;
        right: 1.625rem !important;
        width: auto !important;
        margin: 1rem 0 0 !important;
    }
}