#wrapper {
    /*overflow-x: hidden;*/
}

#sidebar-wrapper {
    height: 100%;
    width: 68px;
    position: fixed;
    top: 56px;
    z-index: 1000;
    /* overflow-y: auto; */
    background-color: #003264;
    /* max-width: 5.5rem;
    left: 50%; 
    transform: translateX(-50%);
    position: fixed;
    z-index: 999999;
    overflow-y: auto;
    background-color: var(--dark);
    border-radius: 7px; */
    
}

#mobile_bottom_bar .btn-group .dropdown-item-container {
    flex-direction: column;
    position: fixed !important;
    bottom: 50px;

    background-color:#fff;

    top: unset !important;
    transform: none !important;
    border: 1px solid #ccc;
}
#mobile_bottom_bar .btn-group > div {
    transform: none !important;
    border: none !important;    
    background-color: transparent;
    will-change: unset !important;
}
#mobile_bottom_bar .dropdown-item {
    white-space: normal;
}
#mobile_bottom_bar .btn-group .dropdown-item-container  {
    display: flex !important;
}
/*
 * `sidebar_topbar_actions.html` opens Bootstrap+Popper dropdowns (Glossary,
 * Language, Account) from the rail. The rail's `.sidebar-content-menu-list`
 * has `overflow: hidden` so an `position: absolute` menu gets clipped to
 * the 60px rail width. Forcing `position: fixed` lets the menu escape the
 * clip while Popper's inline `transform: translate3d(...)` still anchors
 * it to the right of the trigger (translate works the same against the
 * viewport, since the trigger's bounding-rect coords are viewport-relative).
 * Never override `transform` here — that would strip Popper's positioning.
 */
#sidebar-wrapper .dropdown-menu {
    position: fixed !important;
    padding: 0 0 0 0 !important;
    z-index: 10002;
}

#sidebar-wrapper .dropdown-content-container > div  {
    /* transform: none !important; */
    overflow-y: scroll;
    max-height: 65vh;
    position: fixed !important;
    left: 72px !important;   
    border-radius: 12px;
    background-color: #fff;
    
}

#sidebar-wrapper .mainmenu_link {
    transition: 250ms;
    border-radius: 0;
    position: relative;
    padding: 8px 0;
    color: #90caf9;
}

#sidebar-wrapper .mainmenu_link:hover {
    text-decoration: none;
}

#sidebar-wrapper .hover-enabled .sidemenu-bucket-label {
    display: none;
}

#sidebar-wrapper .hover-enabled:hover .sidemenu-bucket-label {
    display: inline-block;
}

/* .sidebar-margin{
    margin-top:5rem;
} */


@media (max-width: 991px) {
    .dropdown_item_group  {
        animation: dropdownAnimation 150ms ease;
    }
#sidebar_mobile_overlay{
        height: 100%;
        width: 100%;
        background-color: rgba(0,0,0,0.3);
        position: fixed;
        left: 0;
        top: 0;
        z-index: 1052;

    }
     #sidebar-wrapper {
        min-width: 7rem;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        margin-top: 7rem;
        display: none;
        height: 80vh;
        border-radius: 7px;
    }
   
    
    .sidebar-item{
        width: 100% !important;
    }
    .subMenu{
        width: 180px !important;
        top: 0 !important;   
        animation: toggleOpacityWidth 250ms linear;
    }
.subMenu  > * {
animation: toggleOpacity 250ms linear;
}
    .dropdown-content-container-items-heading {
        font-size: 0.7rem;
    }
    #sidebar-wrapper .dropdown-content-container > div{
        min-height: 80vh;
        left: 65px !important;
        
    }
    .dropdown-content-container .subMenu{
        width: 180px;
        
    }
    .dropdown-container-content-width{
        width:135px !important;
    }
    .dropdown-content-container > div{
        left: 50%  !important;
        transform: translateX(-50%) !important;
    }
    .mainmenu_link .sidemenu-bucket-label, .mainmenu_link .sidemenu-bucket-icons{
        color: #000000 !important;
    }
    #sidebar-wrapper{
        background-color: #ffffff !important;
    }
    .sidebar-dropdown-submenu-icons{
        color: #000000 !important;
    }
}
#sidebar-wrapper .list-group {
    /*width: 17rem;*/
}
@media (min-width: 991px) {
    #sidebar_mobile_overlay {
        display: none !important;
    }
   #sidebar-wrapper .dropdown_item_group {
        display: flex !important;
    }
    #sidebar-wrapper .dropdown-content-container{
        animation: popupAnimation 200ms ease;
    }
    #sidebar-wrapper .dropdown-content-container > div {
        box-shadow: 0 1px 5px rgb(0 0 0 / 20%), 0 2px 2px rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%);
    }
}
#sidebar-wrapper .list-group.list-group-root {
    padding: 0;
    overflow: hidden;
}

#sidebar-wrapper .list-group.list-group-root .list-group {
    margin-bottom: 0;
}

#sidebar-wrapper .list-group.list-group-root .list-group-item {
    padding: 1rem 1.5rem;
    border-radius: 0;
    border-width: 1px 0 0 0;
}
#sidebar-wrapper .list-group.list-group-root .list-group-item .fas {
    margin-right: 1.2rem !important;
    font-size: 1.2rem;
}
#sidebar-wrapper .list-group.list-group-root .list-group-item .fab {
    margin-right: 1.2rem !important;
    font-size: 1.2rem;
}
#sidebar-wrapper .list-group.list-group-root .list-group-item .far {
    margin-right: 1.2rem !important;
    font-size: 1.2rem;
}



#sidebar-wrapper .list-group.list-group-root > .list-group-item:first-child {
    border-top-width: 0;
}

#sidebar-wrapper .list-group.list-group-root > .list-group > .list-group-item {
    padding-left: 2rem;
    font-size: 0.8rem;
}

#sidebar-wrapper
    .list-group.list-group-root
    > .list-group
    > .list-group
    > .list-group-item {
    padding-left: 1rem;
}

#sidebar-wrapper .list-group .list-group-item {
    color: var(--light);
    background-color: inherit;
    border: none;
    text-decoration: none;
}

#sidebar-wrapper .list-group .list-group-item:hover {
    font-weight: 500;
}

#sidebar-wrapper .list-group .list-group-item.active {
    font-weight: 600;
    background-color: var(--secondary);
}

#page-content-wrapper {
    margin-top: 4.2rem !important;
}


@media (min-width: 720px) {
    #page-content-wrapper {
        margin-left: 4.5rem;
    }
    #sidebar-wrapper {
        margin-left: 0;
        top: 56px;
    }

    #page-content-wrapper {
        min-width: 0;
    }
}

#sidebar-wrapper .mainmenu_link.active-bucket {
    color: #ffffff;
}

/*.mainmenu_link.active-bucket .sidemenu-bucket-label,*/
/*.mainmenu_link.active-bucket .sidemenu-bucket-icons{*/
/*    color: #0277bd;*/
/*}*/

.mainmenu_link .sidemenu-bucket-icons{
    font-size: 20px;
    line-height: 1;
    display: block;
    margin: 0 auto;
}

.sidemenu-bucket-label {
    font-size: 10px;
    line-height: 1;
    margin-top: 4px;
}

.hover-enabled .sidemenu-bucket-label {
    display: none;
}

.hover-enabled:hover .sidemenu-bucket-label {
    display: inline-block;
}

.active-bucket .sidemenu-bucket-label {
    display: inline-block !important;
}

#mainmenu_link_home .sidemenu-bucket-label {
    display: inline-block;
}

@keyframes toggleOpacity {
    0%{
opacity: 0;

    }
    30% {
        opacity: 0.1;
    }
    100% {
        opacity: 1;
    }
}
@keyframes toggleOpacityWidth {
0% {
    opacity: 0;
    max-width: 112px;
}
30% {
    opacity: 1;
    max-width: 112px;
}
100% {
    width: 180px;
    max-width: 180px;
}
}
@keyframes dropdownAnimation {
    0% {        
        height: 0px ;
        overflow: hidden ;

    }
    100% {
        
        height: 65px;
        overflow: hidden ;
    }
}

@keyframes popupAnimation {
    0% {
        scale: 0.3;
    }
    100% {
        scale: 1;
    }
}

div.scrollmenu {
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
    color: #000000;
  display: inline-block;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  background-color: var(--light);
}

/* CORE.FEATURES.USE_APP2_FRONTEND2 — left-only mode: topbar hidden, sidebar items
   relocated to the bottom of the rail to mirror frontend2 (/app2/) layout.
   Visual dimensions match frontend2: 60px rail (`w-15`) + bg-blue-950 +
   white surface for the second sidebar. The bg color matches Tailwind 4's
   default `--color-blue-950` (oklch(0.282 0.091 267.935)) so the rail navy
   is identical across Quasar / Bootstrap / frontend2. */
.use-app2-frontend2 #sidebar-wrapper {
  /*
   * Pin the rail to the left edge of the viewport at EVERY viewport size.
   * The legacy `@media (max-width: 991px)` block above (~line 115) turns
   * the rail into a centered, hidden, white drawer for the pre-app2
   * mobile UX. In app2 mode we want the same fixed 60px navy rail across
   * desktop, tablet, and phone — so every legacy mobile property is
   * overridden here with `!important`.
   */
  top: 0 !important;
  left: 0 !important;
  width: 60px !important;
  min-width: 60px !important;
  height: 100% !important;
  margin-top: 0 !important;
  transform: none !important;
  border-radius: 0 !important;
  background-color: oklch(0.282 0.091 267.935) !important;
  display: flex !important;
  flex-direction: column;
  padding: 8px 0;
  /*
   * `overflow: visible` so the `data-tooltip` CSS pseudo-elements and the
   * rail dropdown menus can escape the 60px width and render to the right
   * of the rail. Setting `overflow-y: auto` (former value) made the CSS
   * spec collapse the implicit `overflow-x: visible` to `auto`, clipping
   * the tooltips. The rail rarely has more icons than fit the viewport;
   * if it ever does, fix by reducing the icon size — never by clipping
   * the row, which silently breaks every tooltip and dropdown.
   */
  overflow: visible;
}
.use-app2-frontend2 #sidebar-content,
.use-app2-frontend2 #sidebar-content > .sidebar-content-menu-list,
.use-app2-frontend2 #sidebar-content > .sidebar-content-menu-list > div {
  width: 100%;
}
/* Stretch the rail's flex chain to the full viewport height so
   `tw:mt-auto` on `sidebar_topbar_actions` can push the Help / Profile
   buttons to the bottom of the rail (matches frontend2's SideRail). */
.use-app2-frontend2 #sidebar-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.use-app2-frontend2 #page-content-wrapper {
  /* Navbar is hidden in app2 mode, so we drop the legacy 56px top margin
     that compensated for it. A small `padding-top` keeps page content from
     sitting flush against the viewport edge — matches the breathing room
     the frontend2 (`/app2/`) shell gets from PrimeVue's section spacing. */
  margin-top: 0 !important;
  padding-top: 16px !important;
}
.use-app2-frontend2 .sidebar-content-menu-list {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  /*
   * Override Bootstrap's `.overflow-hidden` utility applied inline in
   * `app_page_base.html`. Same reason as `#sidebar-wrapper` above —
   * clipping here hides the `data-tooltip` pseudo-elements and the
   * rail dropdown menus, which need to render past the 60px rail width.
   */
  overflow: visible !important;
}
.use-app2-frontend2 .sidebar-topbar-actions {
  margin-top: auto;
}
.use-app2-frontend2 .sidebar-topbar-actions.mobile {
  margin-top: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
}