/* ── Sidebar Submenu ─────────────────────────────────────────────────────── */

/* Toggle link — arrow icon */
.menu-link.submenu-toggle {
  cursor: pointer;
}

.submenu-arrow {
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
  margin-left: auto;
  transition: transform 0.25s ease;
  opacity: 0.5;
}

.submenu-open > .submenu-toggle .submenu-arrow {
  transform: rotate(180deg);
}

/* Submenu list */
.submenu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.submenu-open > .submenu-list {
  max-height: 300px;
}

/* Submenu items */
.submenu-link {
  display: block;
  padding: 7px 16px 7px 56px;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--color-text-placeholder);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
  position: relative;
}

.submenu-link::before {
  content: '';
  position: absolute;
  left: 30px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-text-placeholder);
  opacity: 0.3;
  transition: opacity 0.15s, background 0.15s;
}

.submenu-link:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-secondary);
}

.submenu-link:hover::before {
  opacity: 0.6;
}

.submenu-link.active {
  color: var(--color-text-primary);
  font-weight: 500;
}

.submenu-link.active::before {
  background: var(--green_arrow_color);
  opacity: 1;
}

/* ── Collapsed sidebar: fully hide submenu ──────────────────────────────── */

.sidebar.collapsed .submenu-arrow {
  display: none;
}

.sidebar.collapsed .submenu-list {
  display: none !important;
}

.sidebar.collapsed .has-submenu .submenu-toggle {
  justify-content: center;
  padding: 0;
  height: 48px;
  border-left: none;
  background: none !important;
  position: relative;
}