/* ============================================
   AsilMedia v2 — Sidebar
   ============================================ */

.sidebar__header {
  padding: var(--sp-5) var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar__logo { display: flex; align-items: center; }
.sidebar__logo img { height: 40px; width: auto; }

.sidebar__close {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  color: var(--text-muted); cursor: pointer; background: none; border: none;
}

@media (min-width: 1024px) { .sidebar__close { display: none; } }

/* Navigation */
.sidebar__nav { flex: 1; padding: var(--sp-2) 0; }

.sidebar__item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  color: var(--text-secondary); font-size: var(--fs-sm); font-weight: var(--fw-medium);
  text-decoration: none; border-left: 3px solid transparent;
  transition: all var(--duration-fast) var(--ease-out); cursor: pointer;
}

.sidebar__item:hover { color: var(--text-primary); background: var(--bg-hover); }

.sidebar__item.active {
  color: var(--accent); background: var(--accent-glow);
  border-left-color: var(--accent);
}

.sidebar__item .icon { width: 20px; height: 20px; flex-shrink: 0; }
.sidebar__item-arrow {
  margin-left: auto; width: 16px; height: 16px;
  transition: transform var(--duration-fast) var(--ease-out);
}

/* Expandable */
.sidebar__sub { display: none; padding-left: var(--sp-2); }
.sidebar__item--expandable.is-expanded .sidebar__sub { display: block; }
.sidebar__item--expandable.is-expanded .sidebar__item-arrow { transform: rotate(180deg); }

.sidebar__sub-item {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-6);
  font-size: var(--fs-sm); color: var(--text-secondary); text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.sidebar__sub-item:hover { color: var(--accent); }
.sidebar__sub-item.active { color: var(--accent); font-weight: var(--fw-semibold); }
.sidebar__sub-item .icon { width: 16px; height: 16px; }

.sidebar__divider { height: 1px; background: var(--border); margin: var(--sp-2) var(--sp-4); }

.sidebar__footer {
  padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); margin-top: auto;
}