.app-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: $sidebar-width;
  height: 100vh;
  background-color: var(--menu-bg);
  border-right: 1px solid var(--header-border-color);
  z-index: 103;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  .main-sidebar-header {
    height: $header-height;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.25rem;
    border-bottom: 1px solid var(--header-border-color);

    .header-logo {
      display: inline-flex;
      align-items: center;
      justify-content: center;

      img {
        max-height: 2rem;
        max-width: 140px;
        width: auto;
        height: auto;
        object-fit: contain;
        display: none;
      }

      .desktop-logo {
        display: block;
      }

      .desktop-dark,
      .toggle-logo,
      .toggle-dark {
        display: none !important;
      }
    }
  }

  .main-sidebar {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 0;

    &::-webkit-scrollbar {
      width: 4px;
    }
    &::-webkit-scrollbar-thumb {
      background-color: #e2e8f0;
      border-radius: 4px;
    }
  }

  .main-menu {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .slide__category {
    font-size: 0.65rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    padding: 0.75rem 1.5rem 0.25rem;
  }

  .slide {
    padding: 0.15rem 1rem;
    list-style: none;
  }

  .side-menu__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    color: var(--menu-prime-color);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s ease-in-out;

    .side-menu__icon {
      width: 20px;
      height: 20px;
      color: #64748b;
      fill: #64748b;
      flex-shrink: 0;
      transition: color 0.15s ease-in-out;
    }

    .side-menu-doublemenu__icon {
      width: 14px;
      height: 14px;
      color: #94a3b8;
      fill: #94a3b8;
      margin-right: 0.25rem;
    }

    .side-menu__label {
      flex: 1;
    }

    .side-menu__angle {
      font-size: 1rem;
      transition: transform 0.2s ease;
      color: #94a3b8;
    }

    &:hover {
      background-color: rgba(43, 82, 64, 0.08);
      color: var(--primary-color);

      .side-menu__icon,
      .side-menu__angle,
      .side-menu-doublemenu__icon {
        color: var(--primary-color);
        fill: var(--primary-color);
      }
    }

    &.active {
      background-color: rgba(43, 82, 64, 0.12);
      color: var(--primary-color);
      font-weight: 600;

      .side-menu__icon,
      .side-menu__angle,
      .side-menu-doublemenu__icon {
        color: var(--primary-color);
        fill: var(--primary-color);
      }
    }
  }

  .slide.has-sub {
    &.open,
    &.active {
      > .side-menu__item .side-menu__angle {
        transform: rotate(90deg);
      }

      > .slide-menu {
        display: block;
      }
    }

    > .slide-menu {
      display: none;
      list-style: none;
      padding: 0.25rem 0 0.25rem 1.75rem;
      margin: 0;

      .side-menu__item {
        font-size: 0.8125rem;
        padding: 0.45rem 0.75rem;
        font-weight: 400;
        border-radius: 6px;
        transition: all 0.15s ease-in-out;

        &.active {
          color: var(--primary-color);
          font-weight: 600;
          background-color: rgba(43, 82, 64, 0.12);

          .side-menu-doublemenu__icon {
            color: var(--primary-color);
            fill: var(--primary-color);
          }
        }

        &:hover {
          color: var(--primary-color);
          background-color: rgba(43, 82, 64, 0.06);

          .side-menu-doublemenu__icon {
            color: var(--primary-color);
            fill: var(--primary-color);
          }
        }
      }

      .side-menu__label1 {
        display: none;
      }
    }
  }

  .doublemenu_slide-menu,
  .doublemenu_bottom-menu,
  .slide-left,
  .slide-right {
    display: none !important;
  }
}

@media (max-width: 991.98px) {
  .app-sidebar {
    transform: translateX(-100%);
  }

  html[data-toggled="open"] .app-sidebar {
    transform: translateX(0);
  }
}

@media (min-width: 992px) {
  html[data-toggled="close"] {
    .app-sidebar {
      width: $sidebar-collapsed-width;
      transform: none !important;
      overflow: visible;

      .main-sidebar-header {
        padding: 0 0.5rem;
        justify-content: center;

        .header-logo {
          .desktop-logo,
          .desktop-dark,
          .toggle-dark {
            display: none !important;
          }
          .toggle-logo {
            display: block !important;
            max-height: 2.25rem;
            max-width: 2.25rem;
            margin: 0 auto;
          }
        }
      }

      .main-sidebar {
        overflow: visible;
        padding: 0.75rem 0;
      }

      .slide__category {
        padding: 0.65rem 0.5rem;
        text-align: center;
        position: relative;

        .category-name {
          display: none;
        }

        &::after {
          content: "";
          display: block;
          height: 1px;
          background: var(--default-border);
          margin: 0 0.5rem;
          opacity: 0.8;
        }
      }

      .slide {
        padding: 0.2rem 0.65rem;
        position: relative;
      }

      .side-menu__item {
        justify-content: center;
        padding: 0.65rem 0;
        gap: 0;
        position: relative;

        .side-menu__label,
        .side-menu__angle {
          display: none !important;
        }

        .side-menu__icon {
          width: 22px;
          height: 22px;
          margin: 0 auto;
        }

        #sidebar-redemption-badge {
          position: absolute;
          top: 6px;
          right: 12px;
          width: 9px;
          height: 9px;
          min-width: 9px;
          border: 2px solid var(--menu-bg);
          box-sizing: content-box;
        }
      }

      .slide.has-sub {
        position: relative;

        > .slide-menu {
          display: none !important;
        }

        &:hover > .slide-menu {
          display: block !important;
          position: absolute;
          left: 100%;
          top: 0;
          min-width: 14rem;
          background: var(--custom-white);
          border: 1px solid var(--default-border);
          border-radius: 0.65rem;
          box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
          padding: 0.5rem;
          z-index: 1050;
          animation: slideMenuFlyout 0.15s cubic-bezier(0.16, 1, 0.3, 1);

          &::before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: -10px;
            width: 10px;
          }

          .side-menu__label1 {
            display: block;
            padding: 0.5rem 0.75rem;
            font-weight: 700;
            font-size: 0.8125rem;
            color: var(--default-text-color);
            border-bottom: 1px solid var(--default-border);
            margin-bottom: 0.35rem;
            background: #f8fafc;
            border-radius: 6px 6px 0 0;
          }

          .slide {
            padding: 0.1rem 0;
          }

          .side-menu__item {
            justify-content: flex-start;
            padding: 0.5rem 0.75rem;
            text-align: left;
            gap: 0.5rem;
            border-radius: 6px;

            .side-menu-doublemenu__icon {
              display: inline-block;
            }
          }
        }
      }

      .slide:not(.has-sub) {
        position: relative;

        &:hover::after {
          content: attr(data-menu-title);
          position: absolute;
          left: calc(100% + 8px);
          top: 50%;
          transform: translateY(-50%);
          background: #0f172a;
          color: #ffffff;
          padding: 0.35rem 0.65rem;
          font-size: 0.75rem;
          font-weight: 500;
          white-space: nowrap;
          border-radius: 6px;
          pointer-events: none;
          z-index: 1050;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          animation: sidebarTooltipIn 0.15s ease-out;
        }
      }
    }
  }
}

html[data-theme-mode="dark"] {
  .app-sidebar .main-sidebar-header .header-logo {
    .desktop-logo,
    .toggle-logo,
    .toggle-dark {
      display: none !important;
    }
    .desktop-dark {
      display: block !important;
    }
  }

  &[data-toggled="close"] {
    .app-sidebar .main-sidebar-header .header-logo {
      .desktop-logo,
      .desktop-dark,
      .toggle-logo {
        display: none !important;
      }
      .toggle-dark {
        display: block !important;
        max-height: 2.25rem;
        max-width: 2.25rem;
        margin: 0 auto;
      }
    }

    .app-sidebar .slide.has-sub:hover > .slide-menu {
      background: #1e293b;
      border-color: #334155;

      .side-menu__label1 {
        background: #0f172a;
        border-bottom-color: #334155;
        color: #f8fafc;
      }
    }
  }
}

@keyframes slideMenuFlyout {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes sidebarTooltipIn {
  from {
    opacity: 0;
    transform: translate(-4px, -50%);
  }
  to {
    opacity: 1;
    transform: translate(0, -50%);
  }
}