/* frontend/containers/Sidebar/Sidebar.css */
.sidebar {
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  display: flex;
  overflow: hidden;
  flex-direction: column;
  width: 320px;
  min-width: 280px;
}

.sidebar-header {
  border-bottom: 1px solid var(--border);
  padding: 20px 16px 14px;
}

.sidebar-header h1 {
  color: var(--text-brand);
  margin-bottom: 4px;
  font-size: 18px;
  font-weight: 700;
}

.sidebar-header p {
  color: var(--text-dim);
  font-size: 12px;
}

.sidebar-list {
  overflow-y: auto;
  flex: 1;
  padding: 8px 0;
}

.sidebar-archive-header {
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-faint);
  display: flex;
  cursor: pointer;
  user-select: none;
  justify-content: space-between;
  align-items:  center;
  padding: 8px 16px 4px;
  font-size: 10px;
  font-weight: 700;
}

.sidebar-archive-header:hover {
  color: var(--text-dim);
}

.sidebar-chevron {
  transition: transform .2s;
  font-size: 10px;
}

.sidebar-archive-header.collapsed .sidebar-chevron {
  transform: rotate(-90deg);
}

.sidebar-archive-body.hidden {
  display: none;
}

@media (width <= 640px) {
  .sidebar {
    position: fixed;
    z-index: 100;
    box-shadow: none;
    width: 300px;
    transition: transform .25s;
    inset: 0 auto 0 0;
    transform: translateX(-100%);
  }

  .sidebar.open {
    transform: translateX(0);
  }
}