/* ============================================================================
   VRYNO TOP MENU LAYOUT
   ============================================================================
   The surface for the horizontal menu that assets/js/vryno-topmenu.js builds
   when Theme Customizer > Select Layout is set to Top Menu.

   Two jobs. Take the left rail out of the layout -- the theme reserves
   --sidenav-width for it on .page-wrapper and .navbar-header, and both have to
   give that space back. And draw the bar itself in the theme's own vocabulary:
   the same 28px control height, the same icon size and the same accent as the
   toolbar above a list, so the product still reads as one thing in this layout.

   Everything here is scoped to body.vr-topmenu-on, so the Default and Hover
   View layouts are untouched by this file.
============================================================================ */

:root {
    --vr-tm-h: 42px;
}

/* ------------------------------------------------------- reclaim the rail */

body.vr-topmenu-on .sidebar,
body.vr-topmenu-on #sidebar,
body.vr-topmenu-on .sidebar-logo {
    display: none !important;
}

body.vr-topmenu-on .page-wrapper,
body.vr-topmenu-on .navbar-header {
    margin-left: 0 !important;
}

/* The collapse toggle folds a rail that is no longer there. */
body.vr-topmenu-on #toggle_btn,
body.vr-topmenu-on #toggle_btn2 {
    display: none !important;
}

/* ------------------------------------------------------------------ the bar */

.vr-topmenu {
    position: sticky;
    top: var(--topbar-height, 56px);
    z-index: 999;
    background: var(--topbar-bg, #fff);
    border-bottom: 1px solid var(--border-color);
    padding: 0 1.25rem;
}

.vr-topmenu-list {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    height: var(--vr-tm-h);
    flex-wrap: nowrap;
    /* Not hidden: a submenu hangs below its item and would be clipped. The
       row is kept to one line by the overflow pass in the JS, which hides
       what does not fit rather than relying on the container to crop it. */
    overflow: visible;
}

.vr-topmenu-list > li {
    flex: 0 0 auto;
}

.vr-topmenu-list > li[hidden] {
    display: none !important;
}

.vr-topmenu-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 28px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    color: var(--gray-600);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.vr-topmenu-link:hover {
    background: var(--light);
    color: var(--heading-color);
}

/* The page you are on, marked the way the rail marks it. */
.vr-topmenu-link.active {
    background: var(--primary-transparent);
    color: var(--primary);
    font-weight: 600;
}

/* A count carried over from the rail (My Work's 7). */
.vr-topmenu-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
}

/* ---------------------------------------------------------- the pinned set

   The rail groups these under a "PINNED" heading. A row has no room for a
   heading, so the group is stated instead: one tinted segment, a pin mark in
   front of it, and a rule after it. That is what tells someone these four are
   their pins and the rest is the module's menu. */

.vr-topmenu-pins {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px 2px 2px;
    border-radius: 10px;
    background: var(--vr-tm-pin-bg, rgba(99, 91, 197, .06));
    border: 1px solid var(--border-color);
}

.vr-topmenu-pins-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 7px;
    color: var(--primary);
    font-size: 14px;
    cursor: default;
}

/* Inside the segment the links sit tighter -- they are one thing. */
.vr-topmenu-pins .vr-topmenu-link {
    height: 24px;
    padding: 0 8px;
}

.vr-topmenu-sep {
    width: 1px;
    height: 20px;
    margin: 0 8px;
    background: var(--border-color);
    flex-shrink: 0;
}

/* --------------------------------------------------------- managing pins

   The rail's "PINNED" heading carries a Customize button; the bar has no
   heading, so the same affordance sits at the end of the pinned segment. */

.vr-topmenu-manage {
    display: inline-flex;
    align-items: center;
    margin-left: 2px;
}

.vr-topmenu-manage-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--gray-500);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.vr-topmenu-manage-btn:hover,
.vr-topmenu-manage-btn[aria-expanded="true"] {
    background: var(--white);
    color: var(--primary);
}

.vr-topmenu-pinpanel {
    min-width: 236px;
}

.vr-topmenu-pinpanel-head {
    padding: 6px 10px 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--gray-500);
}

/* A long module menu would otherwise run off the bottom of the window. */
.vr-topmenu-pinpanel-list {
    max-height: 400px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.vr-topmenu-pinrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--gray-600);
    font-size: 13px;
    text-align: left;
    line-height: 1.2;
    cursor: pointer;
}

.vr-topmenu-pinrow:hover {
    background: var(--light);
    color: var(--heading-color);
}

.vr-topmenu-pinrow > i {
    flex-shrink: 0;
    font-size: 15px;
    opacity: .45;
}

.vr-topmenu-pinrow:hover > i {
    opacity: 1;
}

/* Already on the bar: the row states it, and its action is to take it off. */
.vr-topmenu-pinrow.is-pinned {
    color: var(--heading-color);
    font-weight: 500;
}

.vr-topmenu-pinrow.is-pinned > i {
    color: var(--primary);
    opacity: 1;
}

/* ------------------------------------------------------------ submenus

   An item that has children in the rail keeps them here, as a menu that opens
   on hover. Opening is CSS rather than Bootstrap's dropdown JS: hover is the
   behaviour asked for, and a plugin that toggles on click would fight it.
   :focus-within is what keeps it reachable from the keyboard. */

.vr-topmenu-has-sub {
    position: relative;
}

.vr-topmenu-caret {
    font-size: 12px;
    line-height: 1;
    opacity: .55;
    margin-left: -1px;
    flex-shrink: 0;
}

.vr-topmenu-sub {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 2px;
    min-width: 190px;
}

.vr-topmenu-has-sub:hover > .vr-topmenu-sub,
.vr-topmenu-has-sub:focus-within > .vr-topmenu-sub {
    display: block;
}

/* The gap between the item and its menu would close the menu on the way
   down, so the item's box is extended to cover it. */
.vr-topmenu-has-sub::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 8px;
}

.vr-topmenu-has-sub:hover > .vr-topmenu-link {
    background: var(--light);
    color: var(--heading-color);
}

/* A submenu near the right edge opens leftward instead of off the page. */
.vr-topmenu-has-sub.vr-topmenu-sub-left > .vr-topmenu-sub {
    left: auto;
    right: 0;
}

/* A parent's children in the "..." menu are set in under it. */
.vr-topmenu .vr-topmenu-subitem {
    padding-left: 24px;
    font-size: 12.5px;
    color: var(--gray-500);
}

/* ------------------------------------------------------------- the overflow */

.vr-topmenu-more > .vr-topmenu-link {
    padding: 0 8px;
}

.vr-topmenu .dropdown-menu {
    min-width: 200px;
}

.vr-topmenu .vr-topmenu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    font-size: 13px;
    padding: 7px 10px;
}

.vr-topmenu .vr-topmenu-item.active {
    background: var(--primary-transparent);
    color: var(--primary);
    font-weight: 600;
}

/* The bottom app strip keeps a 200px hole where the rail used to be. */
body.vr-topmenu-on .vr-module-strip,
body.vr-topmenu-on .vp-strip {
    padding-left: 0 !important;
}

/* --------------------------------------------------------------- the stack

   Two sticky bars in a column: the topbar keeps the top, the menu sits under
   it, and a list view's own toolbar -- which pins itself with
   vryno-sticky-head.js -- has to clear both. */

body.vr-topmenu-on .navbar-header.nav-bottom,
body.vr-topmenu-on .vr-sticky-sub {
    top: calc(var(--topbar-height, 56px) + var(--vr-tm-h));
}

/* ------------------------------------------------------------------ narrow */

@media (max-width: 767.98px) {
    .vr-topmenu {
        padding: 0 .75rem;
    }

    /* On a phone the rail is a drawer rather than a column, so this layout
       has nothing to reclaim and the menu would only crowd the screen. */
    body.vr-topmenu-on .sidebar,
    body.vr-topmenu-on #sidebar {
        display: flex !important;
    }

    .vr-topmenu {
        display: none;
    }
}