/* =========================================================
   HEXAGON ASSETS - SIDEBAR FINAL
   ========================================================= */

:root {
  --dc-sidebar-bg: #07142a;
  --dc-sidebar-bg-2: #0a1c39;
  --dc-sidebar-panel: rgba(255, 255, 255, 0.06);
  --dc-sidebar-panel-hover: rgba(255, 255, 255, 0.1);
  --dc-sidebar-border: rgba(255, 255, 255, 0.08);
  --dc-sidebar-text: #d9e4ff;
  --dc-sidebar-text-soft: #b8c6e3;
  --dc-sidebar-text-muted: #90a2c7;
  --dc-sidebar-active: #2563eb;
  --dc-sidebar-active-2: #1d4ed8;
  --dc-sidebar-active-text: #ffffff;
  --dc-sidebar-line: rgba(87, 125, 188, 0.28);
}

/* main sidebar */
.app-sidebar.dc-sidebar {
  background:
    radial-gradient(
      circle at top left,
      rgba(37, 99, 235, 0.18),
      transparent 22%
    ),
    linear-gradient(180deg, #07142a 0%, #081731 48%, #0a1c39 100%) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

/* brand */
.dc-sidebar-brand {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.4rem 0.65rem;
  background: rgba(255, 255, 255, 0.02);
}

.dc-brand-link {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0.45rem;
  text-decoration: none;
}

.dc-brand-logo-wrap {
  width: 42px;
  height: 42px;
  min-width: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.04)
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dc-brand-image {
  max-height: 28px !important;
  width: auto !important;
}

.dc-brand-text {
  font-family: "Inter", "Source Sans 3", sans-serif;
  color: #ffffff !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1px;
}

/* menu */
.dc-sidebar .sidebar-wrapper {
  padding-top: 0.35rem;
}

.dc-sidebar-menu {
  gap: 0.28rem;
}

/* parent and child same alignment base */
.dc-nav-link {
  display: flex !important;
  align-items: center;
  gap: 0.72rem;
  min-height: 42px;
  padding: 0.58rem 0.72rem !important;
  border-radius: 12px;
  color: var(--dc-sidebar-text-soft) !important;
  border: 1px solid transparent;
  transition: all 0.18s ease-in-out;
}

.dc-nav-link p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  margin: 0 !important;
  font-family: "Inter", "Source Sans 3", sans-serif;
  font-size: 0.87rem;
  font-weight: 600;
  line-height: 1.2;
}

/* parent */
.dc-parent-link {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.055),
    rgba(255, 255, 255, 0.03)
  );
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.dc-parent-link:hover {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.09),
    rgba(255, 255, 255, 0.045)
  );
  color: #ffffff !important;
  transform: translateX(2px);
}

.dc-parent-link.active {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.16),
    rgba(255, 255, 255, 0.08)
  );
  border-color: rgba(255, 255, 255, 0.09);
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* icon box */
.dc-nav-icon,
.dc-child-marker {
  width: 30px;
  height: 30px;
  min-width: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.07),
    rgba(255, 255, 255, 0.03)
  );
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #dbe7ff;
  font-size: 0.82rem;
  line-height: 1;
}

.dc-nav-icon i,
.dc-child-marker i {
  display: inline-block;
  font-size: 0.82rem;
  line-height: 1;
  color: inherit;
}

.dc-parent-link:hover .dc-nav-icon,
.dc-parent-link.active .dc-nav-icon,
.dc-child-link:hover .dc-child-marker,
.dc-child-link.active .dc-child-marker {
  background: linear-gradient(
    135deg,
    rgba(37, 99, 235, 0.26),
    rgba(59, 130, 246, 0.16)
  );
  color: #ffffff;
  border-color: rgba(96, 165, 250, 0.24);
}

/* arrow */
.dc-sidebar .nav-arrow {
  font-size: 0.8rem;
  color: var(--dc-sidebar-text-muted);
  transition:
    transform 0.18s ease,
    color 0.18s ease;
}

.dc-sidebar .menu-open > .dc-parent-link .nav-arrow {
  transform: rotate(90deg);
  color: #ffffff;
}

/* child tree */
.dc-treeview {
  position: relative;
  margin-top: 0.35rem !important;
  margin-left: 0.55rem;
  padding-left: 0.85rem;
}

.dc-treeview::before {
  content: "";
  position: absolute;
  top: 0.25rem;
  bottom: 0.45rem;
  left: 0.38rem;
  width: 1px;
  background: linear-gradient(
    180deg,
    rgba(103, 146, 221, 0.38),
    rgba(255, 255, 255, 0.03)
  );
}

/* child item */
.dc-child-link {
  min-height: 38px;
  padding: 0.46rem 0.62rem !important;
  margin-bottom: 0.12rem;
  border-radius: 10px;
  color: #c5d2ec !important;
}

.dc-child-link:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff !important;
  transform: translateX(2px);
}

.dc-child-link.active {
  background: linear-gradient(
    90deg,
    rgba(37, 99, 235, 0.22),
    rgba(37, 99, 235, 0.08)
  );
  border-color: rgba(96, 165, 250, 0.18);
  color: #ffffff !important;
}

.dc-child-link p {
  font-size: 0.83rem;
  font-weight: 600;
  justify-content: flex-start;
}

/* active page left glow */
.dc-child-link.active::before,
.dc-parent-link.active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #60a5fa, #2563eb);
}

/* prevent icon hidden by inherited styles */
.dc-sidebar .nav-icon,
.dc-sidebar .nav-icon.fas,
.dc-sidebar .nav-icon i,
.dc-sidebar .dc-child-marker i,
.dc-sidebar .dc-nav-icon i {
  opacity: 1 !important;
  visibility: visible !important;
}

/* scrollbar polish */
.dc-sidebar .os-scrollbar-handle {
  background: rgba(255, 255, 255, 0.18) !important;
}

/* mobile */
@media (max-width: 991.98px) {
  .dc-brand-text {
    font-size: 0.96rem !important;
  }

  .dc-nav-link {
    min-height: 40px;
    padding: 0.54rem 0.66rem !important;
  }

  .dc-nav-link p {
    font-size: 0.84rem;
  }

  .dc-child-link p {
    font-size: 0.81rem;
  }

  .dc-nav-icon,
  .dc-child-marker {
    width: 28px;
    height: 28px;
    min-width: 28px;
    font-size: 0.78rem;
  }

  .dc-nav-icon i,
  .dc-child-marker i {
    font-size: 0.78rem;
  }
}