/* ========== SIDEBAR BASE STYLES ========== */
aside.left,
aside.right {
  position: fixed;
  top: 60px; /* adjust if your header height changes */
  width: 260px;
  height: calc(100% - 60px);
  background: #1f2937;
  color: #fff;
  overflow-y: auto;
  transition: transform 0.3s ease-in-out;
  z-index: 999;
}

/* Left Sidebar */
aside.left {
  left: 0;
}

/* Right Sidebar */
aside.right {
  right: 0;
}

/* Hide both sidebars on mobile initially */
@media (max-width: 768px) {
  aside.left {
    transform: translateX(-100%);
  }

  aside.right {
    transform: translateX(100%);
  }

  aside.left.active {
    transform: translateX(0);
  }

  aside.right.active {
    transform: translateX(0);
  }

  /* Toggle Buttons */
  .toggle-btn {
    background: #111827;
    color: #fff;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    margin-right: 8px;
    display: inline-block;
  }

  .header-left {
    display: flex;
    align-items: center;
  }
}

/* On larger screens, always show both sidebars */
@media (min-width: 769px) {
  aside.left,
  aside.right {
    transform: none !important;
    position: static;
    width: 220px;
  }

  .toggle-btn {
    display: none;
  }
}