/* ============================================================
   Workspace Sidebar — Responsive & Mobile styles
   ============================================================ */

/* ── Backdrop (mobile drawer) ──────────────────────────────── */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
}

/* ── Mobile top bar ────────────────────────────────────────── */
.mobile-top-bar {
  display: none;
  align-items: center;
  gap: 12px;
  height: var(--ws-mobile-topbar-height);
  padding: 0 12px;
  background: var(--ws-sidebar-bg);
  border-bottom: 1px solid var(--ws-sidebar-border);
  flex-shrink: 0;
}

.mobile-hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  color: var(--text-primary, #f0f6fc);
  font-size: 18px;
  cursor: pointer;
}

.mobile-top-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary, #f0f6fc);
}

.mobile-top-project {
  margin-left: auto;
  font-size: 12px;
  color: var(--ws-sidebar-text-muted);
}

/* ============================================================
   Responsive
   ============================================================ */

/* Tablet: collapsed by default */
@media (min-width: 768px) and (max-width: 1023px) {
  .workspace-sidebar:not([data-sidebar-state="expanded"]) {
    width: var(--ws-sidebar-width-collapsed);
  }
  .workspace-sidebar:not([data-sidebar-state="expanded"]) .sidebar-inner {
    width: var(--ws-sidebar-width-collapsed);
  }
  .workspace-sidebar:not([data-sidebar-state="expanded"]) .sidebar-label {
    opacity: 0;
    width: 0;
  }
}

/* Mobile: sidebar = drawer overlay */
@media (max-width: 767px) {
  .workspace-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 100vh;
    z-index: 200;
    overflow: visible;
  }

  .sidebar-inner {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 300ms ease;
    z-index: 201;
  }

  .workspace-sidebar.drawer-open .sidebar-inner {
    transform: translateX(0);
  }

  .workspace-sidebar.drawer-open .sidebar-backdrop {
    display: block;
  }

  /* Always show labels in mobile drawer */
  .workspace-sidebar .sidebar-label {
    opacity: 1 !important;
    width: auto !important;
  }

  /* Show mobile top bar */
  .mobile-top-bar {
    display: flex;
  }

  /* Hide sidebar toggle in mobile (hamburger replaces it) */
  .sidebar-toggle-btn {
    display: none;
  }
}

/* Desktop: hide mobile top bar */
@media (min-width: 768px) {
  .mobile-top-bar {
    display: none;
  }
}