/*
 * nav-sidebar.css
 * Styles for the NavSidebar drill-in navigation component.
 *
 * Requires: theme-terracotta-workshop.css (or equivalent providing the
 * CSS custom properties: --color-*, --font-*, --space-*, --radius-*,
 * --border-*, --shadow-*, --duration-*, --ease-*)
 *
 * Class naming: "preview-" prefix has been removed from the original source.
 * nav-sidebar      → was .preview-sidebar
 * nav-sidebar-header → was .preview-sidebar-header
 * nav-back         → was .preview-back
 * nav-filters      → was .preview-sidebar-footer
 * nav-nav          → was .preview-nav
 * nav-item         → was .pnav-item
 * nav-icon         → was .pnav-icon
 * nav-name         → was .pnav-name
 * nav-chevron      → was .pnav-chevron
 * nav-header       → was .pnav-header
 */

/* ── SIDEBAR SHELL ── */
.nav-sidebar {
  width: 280px;
  flex-shrink: 0;
  background: var(--color-surface-card);
  border-right: 1px solid var(--color-border-subtle);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── HEADER (title + back button) ── */
.nav-sidebar-header {
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border-subtle);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.nav-sidebar-header h2 {
  font-family: var(--font-heading);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
  margin: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── BACK BUTTON ── */
.nav-back {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color var(--duration-fast), background var(--duration-fast);
}

.nav-back:hover {
  color: var(--color-primary);
  background: var(--color-surface-sunken);
}

/* ── SCROLLABLE NAV LIST ── */
.nav-nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-xs) 0;
}

/* ── NAV ITEMS ── */
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 6px var(--space-md);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--color-text-body);
  transition: background var(--duration-fast);
  user-select: none;
}

.nav-item:hover {
  background: var(--color-surface-sunken);
}

.nav-item.active {
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface-card));
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}

.nav-item.folder {
  font-weight: var(--font-weight-medium);
}

/* Icon inside a nav item */
.nav-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.nav-item.active .nav-icon {
  color: var(--color-primary);
}

.nav-item.folder .nav-icon {
  color: var(--color-secondary);
}

/* Item label */
.nav-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Chevron for folders */
.nav-chevron {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* Indent helpers — depth 1-4 */
.nav-indent-1 { padding-left: calc(var(--space-md) + 16px); }
.nav-indent-2 { padding-left: calc(var(--space-md) + 32px); }
.nav-indent-3 { padding-left: calc(var(--space-md) + 48px); }
.nav-indent-4 { padding-left: calc(var(--space-md) + 64px); }

/* ── SECTION HEADERS ──
 * Decorative label for grouping items (from type:'header' nodes)
 */
.nav-header {
  padding: var(--space-md) var(--space-md) var(--space-xs);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  font-family: var(--font-heading);
}

/* ── FILTER CHIPS ──
 * Toggle buttons in the sidebar footer for filtering by article status.
 */
.nav-filters {
  flex-shrink: 0;
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.filter-chip {
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-family: var(--font-body);
  cursor: pointer;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface-card);
  color: var(--color-text-muted);
  transition: all var(--duration-fast);
  display: flex;
  align-items: center;
  gap: 4px;
}

.filter-chip:hover {
  border-color: var(--color-border-default);
}

.filter-chip.active {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}

/* Color dot inside filter chip */
.filter-chip .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.filter-chip .dot-published { background: var(--color-status-success); }
.filter-chip .dot-draft     { background: var(--color-border-default); }
.filter-chip .dot-review    { background: var(--color-status-warning); }