/* Global Turbo UI tweaks */

.turbo-progress-bar {
  height: 4px;
  background-color: var(--bs-primary, #0d6efd);
  z-index: 9999;
}

turbo-frame[aria-busy="true"] {
  cursor: progress;
  opacity: 0.75;
  transition: opacity 120ms ease-in-out;
}

turbo-frame[aria-busy="true"] > * {
  pointer-events: none;
}

/* 
 * BeOEE Sidebar Surgical Fix (Condensed Menu UX)
 * - Adds a "bridge" pseudo-element to prevent accidental mouseleave.
 * - Targets ONLY the gap to avoid blocking submenu interactions.
 * - Uses .beoee-hover-intent class to control the closing delay.
 */
html[data-sidenav-size="condensed"] .leftside-menu .side-nav .side-nav-item,
html[data-sidenav-size="sm-hover-active"] .leftside-menu .side-nav .side-nav-item {
    position: relative;
}

/* The Bridge: invisibly covers the 10-15px gap between icon and flyout */
html[data-sidenav-size="condensed"] .leftside-menu .side-nav .side-nav-item:hover:after,
html[data-sidenav-size="sm-hover-active"] .leftside-menu .side-nav .side-nav-item:hover:after {
    content: "";
    position: absolute;
    top: 0;
    left: 100%; 
    width: 15px; /* Narrower bridge to avoid overlap with menu content */
    height: 100%;
    z-index: 1; /* Low z-index: enough to bridge but below menu interactive content */
}

/* 
 * Override theme's display: none !important to allow JS-controlled delay.
 * We force display: block when our intent class is present.
 */
html[data-sidenav-size="condensed"] .leftside-menu .side-nav .side-nav-item.beoee-hover-intent > .collapse,
html[data-sidenav-size="condensed"] .leftside-menu .side-nav .side-nav-item.beoee-hover-intent > .collapsing,
html[data-sidenav-size="sm-hover-active"] .leftside-menu .side-nav .side-nav-item.beoee-hover-intent > .collapse,
html[data-sidenav-size="sm-hover-active"] .leftside-menu .side-nav .side-nav-item.beoee-hover-intent > .collapsing {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/*
 * Condensed theme hides submenu <ul> with display:none!important unless :hover.
 * Mirror the theme's :hover styles when JS keeps .beoee-hover-intent applied.
 */
html[data-sidenav-size="condensed"]:not([data-layout=topnav]) .wrapper .leftside-menu .side-nav .side-nav-item.beoee-hover-intent > .collapse,
html[data-sidenav-size="condensed"]:not([data-layout=topnav]) .wrapper .leftside-menu .side-nav .side-nav-item.beoee-hover-intent > .collapsing,
html[data-sidenav-size="sm-hover-active"]:not([data-layout=topnav]) .wrapper .leftside-menu .side-nav .side-nav-item.beoee-hover-intent > .collapse,
html[data-sidenav-size="sm-hover-active"]:not([data-layout=topnav]) .wrapper .leftside-menu .side-nav .side-nav-item.beoee-hover-intent > .collapsing {
    display: block !important;
    -webkit-transition: none !important;
    transition: none !important;
}

html[data-sidenav-size="condensed"]:not([data-layout=topnav]) .wrapper .leftside-menu .side-nav .side-nav-item.beoee-hover-intent > .collapse > ul,
html[data-sidenav-size="condensed"]:not([data-layout=topnav]) .wrapper .leftside-menu .side-nav .side-nav-item.beoee-hover-intent > .collapsing > ul,
html[data-sidenav-size="sm-hover-active"]:not([data-layout=topnav]) .wrapper .leftside-menu .side-nav .side-nav-item.beoee-hover-intent > .collapse > ul,
html[data-sidenav-size="sm-hover-active"]:not([data-layout=topnav]) .wrapper .leftside-menu .side-nav .side-nav-item.beoee-hover-intent > .collapsing > ul {
    display: block !important;
    left: var(--ct-leftbar-width-sm);
    position: absolute;
    background: var(--ct-menu-bg);
    -webkit-box-shadow: var(--ct-box-shadow);
    box-shadow: var(--ct-box-shadow);
    width: calc(var(--ct-leftbar-width) - var(--ct-leftbar-width-sm));
    padding: 10px 0;
    z-index: 2;
}

html[data-sidenav-size="condensed"]:not([data-layout=topnav]) .wrapper .leftside-menu .side-nav .side-nav-item.beoee-hover-intent .side-nav-link,
html[data-sidenav-size="sm-hover-active"]:not([data-layout=topnav]) .wrapper .leftside-menu .side-nav .side-nav-item.beoee-hover-intent .side-nav-link {
    position: relative;
    color: #fff;
    background: var(--ct-menu-condensed-link-bg);
    width: var(--ct-leftbar-width);
}

html[data-sidenav-size="condensed"]:not([data-layout=topnav]) .wrapper .leftside-menu .side-nav .side-nav-item.beoee-hover-intent .side-nav-link span,
html[data-sidenav-size="sm-hover-active"]:not([data-layout=topnav]) .wrapper .leftside-menu .side-nav .side-nav-item.beoee-hover-intent .side-nav-link span {
    visibility: visible;
}

html[data-sidenav-size="condensed"]:not([data-layout=topnav]) .wrapper .leftside-menu .side-nav .side-nav-item.beoee-hover-intent .side-nav-link span:not(.badge),
html[data-sidenav-size="sm-hover-active"]:not([data-layout=topnav]) .wrapper .leftside-menu .side-nav .side-nav-item.beoee-hover-intent .side-nav-link span:not(.badge) {
    margin-left: var(--ct-menu-item-padding-x);
}

html[data-sidenav-size="condensed"]:not([data-layout=topnav]) .wrapper .leftside-menu .side-nav .side-nav-item.beoee-hover-intent > .collapse > ul li.beoee-hover-intent > .collapse,
html[data-sidenav-size="condensed"]:not([data-layout=topnav]) .wrapper .leftside-menu .side-nav .side-nav-item.beoee-hover-intent > .collapse > ul li.beoee-hover-intent > .collapsing,
html[data-sidenav-size="condensed"]:not([data-layout=topnav]) .wrapper .leftside-menu .side-nav .side-nav-item.beoee-hover-intent > .collapsing > ul li.beoee-hover-intent > .collapse,
html[data-sidenav-size="condensed"]:not([data-layout=topnav]) .wrapper .leftside-menu .side-nav .side-nav-item.beoee-hover-intent > .collapsing > ul li.beoee-hover-intent > .collapsing,
html[data-sidenav-size="sm-hover-active"]:not([data-layout=topnav]) .wrapper .leftside-menu .side-nav .side-nav-item.beoee-hover-intent > .collapse > ul li.beoee-hover-intent > .collapse,
html[data-sidenav-size="sm-hover-active"]:not([data-layout=topnav]) .wrapper .leftside-menu .side-nav .side-nav-item.beoee-hover-intent > .collapse > ul li.beoee-hover-intent > .collapsing,
html[data-sidenav-size="sm-hover-active"]:not([data-layout=topnav]) .wrapper .leftside-menu .side-nav .side-nav-item.beoee-hover-intent > .collapsing > ul li.beoee-hover-intent > .collapse,
html[data-sidenav-size="sm-hover-active"]:not([data-layout=topnav]) .wrapper .leftside-menu .side-nav .side-nav-item.beoee-hover-intent > .collapsing > ul li.beoee-hover-intent > .collapsing {
    display: block !important;
    height: auto !important;
    -webkit-transition: none !important;
    transition: none !important;
}

html[data-sidenav-size="condensed"]:not([data-layout=topnav]) .wrapper .leftside-menu .side-nav .side-nav-item.beoee-hover-intent > .collapse > ul li.beoee-hover-intent > .collapse > ul,
html[data-sidenav-size="condensed"]:not([data-layout=topnav]) .wrapper .leftside-menu .side-nav .side-nav-item.beoee-hover-intent > .collapse > ul li.beoee-hover-intent > .collapsing > ul,
html[data-sidenav-size="condensed"]:not([data-layout=topnav]) .wrapper .leftside-menu .side-nav .side-nav-item.beoee-hover-intent > .collapsing > ul li.beoee-hover-intent > .collapse > ul,
html[data-sidenav-size="condensed"]:not([data-layout=topnav]) .wrapper .leftside-menu .side-nav .side-nav-item.beoee-hover-intent > .collapsing > ul li.beoee-hover-intent > .collapsing > ul,
html[data-sidenav-size="sm-hover-active"]:not([data-layout=topnav]) .wrapper .leftside-menu .side-nav .side-nav-item.beoee-hover-intent > .collapse > ul li.beoee-hover-intent > .collapse > ul,
html[data-sidenav-size="sm-hover-active"]:not([data-layout=topnav]) .wrapper .leftside-menu .side-nav .side-nav-item.beoee-hover-intent > .collapse > ul li.beoee-hover-intent > .collapsing > ul,
html[data-sidenav-size="sm-hover-active"]:not([data-layout=topnav]) .wrapper .leftside-menu .side-nav .side-nav-item.beoee-hover-intent > .collapsing > ul li.beoee-hover-intent > .collapse > ul,
html[data-sidenav-size="sm-hover-active"]:not([data-layout=topnav]) .wrapper .leftside-menu .side-nav .side-nav-item.beoee-hover-intent > .collapsing > ul li.beoee-hover-intent > .collapsing > ul {
    display: block !important;
    position: absolute !important;
    top: 0;
    left: calc(var(--ct-leftbar-width) - var(--ct-leftbar-width-sm));
    width: calc(var(--ct-leftbar-width) - var(--ct-leftbar-width-sm));
    z-index: 2;
}