/* Offcanvas panel */
.offcanvas-menu {
  width: var(--menu-width);
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  background-color: var(--colorBackgroundBWL);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  transform: translateX(-100%);
  transition: transform var(--transition-speed) ease-in-out;
  z-index: 1100;
  display: flex;
  flex-direction: column;
}

/* otevřené */


.offcanvas-menu.open {
  transform: translateX(0);
}


/* Backdrop */
.offcanvas-backdrop-custom {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity var(--transition-speed) ease-in-out;
  z-index: 1050;
  pointer-events: none;
}

.offcanvas-backdrop-custom.show {
  opacity: 1;
  pointer-events: auto;
}

/* Hlavní menu a submenu */
.main-menu,
.submenu-list {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  transition: transform var(--transition-speed) ease-in-out;
}

/* hlavní menu start */
.main-menu {
  transform: translateX(0);
  /*padding: 0 1rem; /* Bootstrap padding */
}
.main-menu li {
    border-bottom: 1px solid var(--menuBoxShadowColor);
    padding: 0 1rem;
}
.offcanvas-menu, .offcanvas-menu h6 { font-weight: bold; }

.offcanvas-header {
    height:50px;
    background-color: var(--colorPrimary);
    
}

/* submenu start (vpravo) */
.submenu-list {
  transform: translateX(100%);
  background-color: var(--submenu-bg);
  box-shadow: inset -1px 0 0 var(--menuBoxShadowColor);
}

.submenu-title{
    padding: 0.25rem 1rem;
    color: var(--colorSecondary);
    border-bottom: 1px solid var(--colorPrimary) !important;
}
.submenu-list li{
    padding-left: 2.2rem;
    
    border-bottom: 1px solid var(--menuBoxShadowColor);
}

/* aktivní submenu */
.submenu-list.active {
  transform: translateX(0);
}

/* hlavní menu při otevření submenu */
.main-menu.hide {
  transform: translateX(-100%);
}

/* hlavička offcanvas */
.offcanvas-header {
  padding: 0.75rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #dee2e6;
}

/* tlačítka submenu zpět */
.submenu-list .back-button {
  border: none;
  background: none;
  font-size: 1.25rem;

}
.submenu-list .back-button i, .open-submenu i{
      color: var(--colorSecondary);
}