/* -------------------------------------------------------------------------- */
/* Sidebar Component                                                          */
/* -------------------------------------------------------------------------- */

:root {
  --sidebar-width: 250px;
  --sidebar-top-offset: 0.75rem;
  --sidebar-radius: 0;
  --sidebar-item-padding-x: 0.35rem;
  --sidebar-main-item-padding-x: 0.35rem;
  --sidebar-submenu-item-padding-x: 0.35rem;
  --sidebar-item-padding-y: 0.66rem;
  --sidebar-item-gap: 0;
  --sidebar-icon-column: 1.55rem;
  --sidebar-icon-size: 1rem;
  --sidebar-separator-width: 1px;
  --sidebar-separator-height: 1.2rem;
  --sidebar-label-padding-start: 0;
  --sidebar-main-label-padding-start: 0.58rem;
  --sidebar-submenu-label-padding-start: 0.04rem;
  --sidebar-header-color: #3f556f;
  --sidebar-header-space-top: 1rem;
  --sidebar-header-space-bottom: 0.3rem;
  --sidebar-header-padding-start: 0.5rem;
  --sidebar-font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sidebar-font-size: 0.94rem;
  --sidebar-heading-size: 0.78rem;
  --sidebar-line-height: 1.35;
  --sidebar-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sidebar-motion-fast: 180ms;
  --sidebar-motion-base: 260ms;
  --sidebar-shell-blur: 0;
  --sidebar-surface: #f7f9fc;
  --sidebar-surface-strong: #ffffff;
  --sidebar-surface-muted: #f3f6fa;
  --sidebar-border: #d6dee8;
  --sidebar-border-strong: #c2cedb;
  --sidebar-text: #223043;
  --sidebar-text-muted: #5c6f84;
  --sidebar-icon: #60758c;
  --sidebar-hover-bg: #edf3fb;
  --sidebar-hover-text: #173b67;
  --sidebar-active-bg: #e6f0fb;
  --sidebar-active-text: #0f3d78;
  --sidebar-active-shadow: none;
  --sidebar-badge-bg: transparent;
  --sidebar-badge-text: #0f6b43;
  --sidebar-scrollbar: rgba(124, 142, 162, 0.38);
  --sidebar-scrollbar-hover: rgba(93, 111, 132, 0.56);
  --sidebar-item-separator: #e2e8f0;
  --sidebar-rail: #0f5fc6;
  --sidebar-rail-soft: rgba(15, 95, 198, 0.1);
  --sidebar-submenu-max-height: min(72vh, 42rem);
}

[data-bs-theme="dark"] {
  --sidebar-surface: #0f1722;
  --sidebar-surface-strong: #131e2c;
  --sidebar-surface-muted: #172434;
  --sidebar-border: #273548;
  --sidebar-border-strong: #32455c;
  --sidebar-text: #e3edf8;
  --sidebar-text-muted: #9fb0c3;
  --sidebar-icon: #a8b8cb;
  --sidebar-hover-bg: #1b2d44;
  --sidebar-hover-text: #f5f9ff;
  --sidebar-active-bg: #203854;
  --sidebar-active-text: #ffffff;
  --sidebar-active-shadow: none;
  --sidebar-badge-bg: transparent;
  --sidebar-badge-text: #8de1b7;
  --sidebar-scrollbar: rgba(148, 163, 184, 0.24);
  --sidebar-scrollbar-hover: rgba(148, 163, 184, 0.4);
  --sidebar-item-separator: #223245;
  --sidebar-rail: #6fb0ff;
  --sidebar-rail-soft: rgba(111, 176, 255, 0.14);
  --sidebar-header-color: #c6d8eb;
}

.sidebar {
  width: var(--sidebar-width);
  font-family: var(--sidebar-font-family);
  background: var(--sidebar-surface) !important;
  border-right: 1px solid var(--sidebar-border) !important;
  -webkit-backdrop-filter: blur(var(--sidebar-shell-blur));
  backdrop-filter: blur(var(--sidebar-shell-blur));
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--sidebar-scrollbar) transparent;
}

.sidebar .pt-3.pb-2 {
  padding-inline: 0.5rem;
}

.sidebar .navbar-nav {
  gap: 0.45rem !important;
  padding-right: 0 !important;
}

.sidebar-card {
  width: 100% !important;
  margin-bottom: 0 !important;
  background: var(--sidebar-surface-strong) !important;
  border: 1px solid var(--sidebar-border) !important;
  border-radius: var(--sidebar-radius) !important;
  box-shadow: none !important;
  overflow: hidden;
}

.sidebar-card + .sidebar-card {
  margin-top: 0.05rem !important;
}

.sidebar-card.has-active-route {
  position: sticky;
  top: var(--sidebar-top-offset);
  z-index: 3;
  box-shadow: none !important;
  border-color: var(--sidebar-border-strong) !important;
  background: color-mix(in srgb, var(--sidebar-active-bg) 22%, var(--sidebar-surface-strong)) !important;
}

.sidebar-home-link,
.sidebar .navbar .nav-item .nav-link,
.sidebar-card .nav-link,
.sidebar-card .dropdown-toggle {
  position: relative;
  display: grid !important;
  grid-template-columns: var(--sidebar-icon-column) var(--sidebar-separator-width) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--sidebar-item-gap);
  min-height: 46px;
  width: 100%;
  gap: 0 !important;
  padding: 0.68rem var(--sidebar-main-item-padding-x) !important;
  border-radius: 0 !important;
  color: var(--sidebar-text) !important;
  border-inline-start: 3px solid transparent;
  font-weight: 600;
  font-size: var(--sidebar-font-size);
  line-height: var(--sidebar-line-height);
  text-align: left;
  transition:
    background-color var(--sidebar-motion-fast) var(--sidebar-ease),
    color var(--sidebar-motion-fast) var(--sidebar-ease),
    border-color var(--sidebar-motion-fast) var(--sidebar-ease);
}

.sidebar-home-link::before,
.sidebar .navbar .nav-item .nav-link::before,
.sidebar-card .nav-link::before,
.sidebar-card .dropdown-toggle::before,
.sidebar .dropdown-menu .dropdown-item::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  width: var(--sidebar-separator-width);
  height: var(--sidebar-separator-height);
  background: var(--sidebar-item-separator);
  justify-self: start;
  align-self: center;
}

.sidebar .navbar .nav-item .nav-link i,
.sidebar .dropdown-menu .dropdown-item i,
.sidebar .dropdown-toggle::after {
  color: var(--sidebar-icon) !important;
  transition:
    color var(--sidebar-motion-fast) var(--sidebar-ease),
    transform var(--sidebar-motion-base) var(--sidebar-ease);
}

.sidebar .nav-link i,
.sidebar .dropdown-menu .dropdown-item i {
  display: inline-flex !important;
  grid-column: 1;
  grid-row: 1;
  align-items: center;
  justify-content: flex-start;
  width: var(--sidebar-icon-column);
  min-width: var(--sidebar-icon-column);
  font-size: var(--sidebar-icon-size);
  line-height: 1;
  opacity: 1;
}

.sidebar .dropdown-toggle i,
.sidebar-home-link i {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: var(--sidebar-icon-column);
  height: var(--sidebar-icon-column);
  flex: 0 0 var(--sidebar-icon-column);
}

.sidebar .navbar .navbar-nav .nav-link:hover,
.sidebar .navbar .nav-item .nav-link:hover,
.sidebar .navbar .nav-item.active-dropdown > .nav-link,
.sidebar-card .nav-link:hover {
  background: var(--sidebar-hover-bg) !important;
  color: var(--sidebar-hover-text) !important;
  box-shadow: none !important;
}

.sidebar .navbar .navbar-nav .nav-link.active,
.sidebar .navbar .nav-item .nav-link.active,
.sidebar-home-link.active,
.sidebar-card .nav-link.active,
.sidebar .dropdown-menu .dropdown-item.active {
  background: var(--sidebar-active-bg) !important;
  color: var(--sidebar-active-text) !important;
  font-weight: 600;
  border-inline-start-color: var(--sidebar-rail) !important;
}

.sidebar-home-link.active::before,
.sidebar .navbar .navbar-nav .nav-link.active::before,
.sidebar .navbar .nav-item .nav-link.active::before,
.sidebar-card .nav-link.active::before,
.sidebar .navbar .nav-item.active-dropdown > .nav-link::before,
.sidebar .dropdown-menu .dropdown-item.active::before,
.sidebar-card .dropdown-toggle.sidebar-state-active::before {
  background: color-mix(in srgb, var(--sidebar-rail) 26%, var(--sidebar-item-separator)) !important;
}

.sidebar .navbar .navbar-nav .nav-link:hover i,
.sidebar .navbar .nav-item .nav-link:hover i,
.sidebar .navbar .nav-item.active-dropdown > .nav-link i,
.sidebar .navbar .navbar-nav .nav-link.active i,
.sidebar .navbar .nav-item .nav-link.active i,
.sidebar .dropdown-menu .dropdown-item:hover i,
.sidebar .dropdown-menu .dropdown-item.active i {
  color: currentColor !important;
}

.sidebar .navbar .nav-item.dropdown .dropdown-menu,
.sidebar .dropdown-menu {
  position: static !important;
  display: block;
  min-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  max-height: 0;
  transition:
    max-height var(--sidebar-motion-base) var(--sidebar-ease),
    opacity var(--sidebar-motion-fast) linear,
    visibility 0s linear var(--sidebar-motion-base);
}

.sidebar .nav-item.is-open > .dropdown-menu,
.sidebar .dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  max-height: var(--sidebar-submenu-max-height);
  overflow-y: auto;
  padding: 0.18rem 0 1rem !important;
  background: var(--sidebar-surface-muted) !important;
  scroll-padding-block-end: 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--sidebar-scrollbar) transparent;
}

.sidebar:not(.is-ready) .dropdown-menu {
  transition: none !important;
}

.sidebar .dropdown-header {
  display: block;
  width: 100%;
  margin: var(--sidebar-header-space-top) 0 var(--sidebar-header-space-bottom);
  padding: 0;
  padding-inline-start: var(--sidebar-header-padding-start);
  color: var(--sidebar-header-color) !important;
  font-size: var(--sidebar-heading-size);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: var(--sidebar-line-height);
  text-align: left;
}

.sidebar .dropdown-divider,
.sidebar .divider {
  margin: 0 !important;
  width: 100%;
  border-top: 1px solid var(--sidebar-border) !important;
  border-color: var(--sidebar-border) !important;
  opacity: 1;
}

.sidebar .dropdown-menu .dropdown-item {
  position: relative;
  display: grid !important;
  grid-template-columns: var(--sidebar-icon-column) var(--sidebar-separator-width) minmax(0, 1fr) auto;
  align-items: center !important;
  justify-content: flex-start !important;
  column-gap: var(--sidebar-item-gap);
  gap: 0;
  min-height: 44px;
  margin: 0;
  padding: var(--sidebar-item-padding-y) var(--sidebar-submenu-item-padding-x) !important;
  border-radius: 0 !important;
  color: var(--sidebar-text) !important;
  border: 0 !important;
  border-inline-start: 3px solid transparent !important;
  font-size: var(--sidebar-font-size);
  font-weight: 500;
  line-height: var(--sidebar-line-height);
  text-align: left;
  transition:
    background-color var(--sidebar-motion-fast) var(--sidebar-ease),
    color var(--sidebar-motion-fast) var(--sidebar-ease),
    border-color var(--sidebar-motion-fast) var(--sidebar-ease);
}

.sidebar .dropdown-menu .dropdown-item + .dropdown-item {
  border-top: 1px solid var(--sidebar-item-separator) !important;
}

.sidebar .dropdown-menu .dropdown-item:hover,
.sidebar .dropdown-menu .dropdown-item:focus,
.sidebar .dropdown-menu .dropdown-item.active {
  background: var(--sidebar-hover-bg) !important;
  color: var(--sidebar-hover-text) !important;
}

.sidebar .dropdown-menu .dropdown-item.active {
  background: var(--sidebar-active-bg) !important;
  border-inline-start-color: var(--sidebar-rail) !important;
}

.sidebar .dropdown-menu .dropdown-item > span {
  grid-column: 3;
  grid-row: 1;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: none !important;
  padding-inline-start: var(--sidebar-submenu-label-padding-start);
  text-align: left !important;
}

.sidebar .dropdown-menu .dropdown-item i {
  width: var(--sidebar-icon-column);
  min-width: var(--sidebar-icon-column);
  justify-content: flex-start;
  text-align: center;
}

.sidebar-home-link > span,
.sidebar .nav-link > span,
.sidebar .dropdown-toggle > span {
  grid-column: 3;
  grid-row: 1;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  padding-inline-start: var(--sidebar-main-label-padding-start);
  text-align: left;
}

.sidebar .dropdown-toggle.sidebar-state-active {
  background: var(--sidebar-active-bg) !important;
  border-inline-start-color: var(--sidebar-rail) !important;
}

.sidebar .dropdown-toggle::after {
  grid-column: 4;
  grid-row: 1;
  justify-self: end;
  margin-inline-start: 0;
}

.sidebar [data-sidebar-toggle]:focus-visible,
.sidebar .dropdown-menu .dropdown-item:focus-visible,
.sidebar-home-link:focus-visible,
.navbar .sidebar-toggler:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.55);
  outline-offset: 2px;
}

.sidebar .nav-item.active-dropdown > [data-sidebar-toggle]::after {
  transform: rotate(-180deg);
}

.sidebar::-webkit-scrollbar,
.sidebar .dropdown-menu::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.sidebar::-webkit-scrollbar-thumb,
.sidebar .dropdown-menu::-webkit-scrollbar-thumb {
  background: var(--sidebar-scrollbar);
  border-radius: 999px;
}

.sidebar:hover::-webkit-scrollbar-thumb,
.sidebar .dropdown-menu:hover::-webkit-scrollbar-thumb {
  background: var(--sidebar-scrollbar-hover);
}

@media (max-width: 991.98px) {
  .sidebar {
    width: var(--sidebar-width) !important;
    margin-left: calc(var(--sidebar-width) * -1);
  }

  .sidebar.show {
    margin-left: 0 !important;
  }

  .sidebar-card.has-active-route {
    position: relative;
    top: auto;
  }

  .sidebar .nav-item.is-open > .dropdown-menu,
  .sidebar .dropdown-menu.show {
    max-height: min(68vh, 34rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .sidebar .nav-link,
  .sidebar .dropdown-toggle,
  .sidebar .dropdown-menu,
  .sidebar .dropdown-item,
  .navbar .sidebar-toggler {
    transition: none !important;
    animation: none !important;
  }
}