/* ─── SIDEBAR — standalone stylesheet ──────────────────────────────────────
   Self-contained so any page can link this without needing main.css.
   Only scopes to .sidebar, .nav-*, .soon-*, and .app-layout.
   Body display / direction must be set by the host page.
──────────────────────────────────────────────────────────────────────────── */

:root {
  --sidebar-bg:          #172b1b;
  --sidebar-bg-hover:    #1e3a24;
  --sidebar-active:      #2a5232;
  --sidebar-border:      rgba(255,255,255,.08);
  --sidebar-muted:       rgba(255,255,255,.4);
  --sidebar-w:           232px;
  --sidebar-w-collapsed: 60px;
  --sidebar-brand-vivid: #3a7d44;
  --sidebar-t:           200ms ease;
}

/* ── Fixed panel ── */
.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  z-index: 200;
  transition: width var(--sidebar-t);
  overflow: hidden;
  flex-shrink: 0;
}
.sidebar.collapsed { width: var(--sidebar-w-collapsed); }

/* ── Logo row ── */
.sidebar-logo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  height: 58px;
  border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}
.sidebar-brand-mark {
  width: 28px; height: 28px;
  display: none;
  place-items: center;
  flex-shrink: 0;
}
.sidebar.collapsed .sidebar-brand-mark {
  display: grid;
}
.sidebar-wordmark {
  height: 22px;
  width: auto;
  display: block;
  flex-shrink: 0;
  transition: opacity var(--sidebar-t), width var(--sidebar-t);
}
.sidebar.collapsed .sidebar-wordmark { opacity: 0; width: 0; }

.sidebar-toggle {
  background: none; border: none;
  color: var(--sidebar-muted);
  cursor: pointer; padding: 6px;
  border-radius: 6px;
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: color var(--sidebar-t), background var(--sidebar-t);
}
.sidebar-toggle:hover { color: #fff; background: var(--sidebar-bg-hover); }

/* ── Nav ── */
.sidebar-nav {
  flex: 1;
  overflow-y: auto; overflow-x: hidden;
  padding: 10px 8px;
  scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar { display: none; }

.nav-group { margin-bottom: 2px; }

.nav-group-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 10px;
  border-radius: 8px;
  background: none; border: none;
  cursor: pointer;
  color: var(--sidebar-muted);
  font-family: 'Inter', sans-serif;
  font-size: .72rem; font-weight: 600; letter-spacing: .07em;
  transition: all var(--sidebar-t);
  white-space: nowrap;
}
.nav-group-header:hover { background: var(--sidebar-bg-hover); color: #fff; }
.nav-group-header.active { color: #fff; }

.nav-group-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.nav-icon {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  flex-shrink: 0; border-radius: 6px;
  transition: background var(--sidebar-t);
}
.nav-group-header.active .nav-icon,
.nav-group-header:hover .nav-icon { background: rgba(255,255,255,.1); }

.nav-label {
  white-space: nowrap; overflow: hidden;
  transition: opacity var(--sidebar-t), width var(--sidebar-t);
}
.sidebar.collapsed .nav-label { opacity: 0; width: 0; pointer-events: none; }

.nav-chevron {
  flex-shrink: 0;
  transition: transform var(--sidebar-t), opacity var(--sidebar-t);
}
.sidebar.collapsed .nav-chevron { opacity: 0; width: 0; }
.nav-group-header.open .nav-chevron { transform: rotate(180deg); }

/* Sub-items */
.nav-sub {
  max-height: 0; overflow: hidden;
  transition: max-height 250ms ease;
}
.nav-sub.open { max-height: 500px; }
.sidebar.collapsed .nav-sub { max-height: 0; }

.nav-sub-item {
  display: block;
  padding: 7px 12px 7px 48px;
  font-size: .82rem;
  color: var(--sidebar-muted);
  text-decoration: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--sidebar-t);
  white-space: nowrap;
  border: none; background: none;
  width: 100%; text-align: left;
  font-family: 'Inter', sans-serif;
}
.nav-sub-item:hover { color: #fff; background: var(--sidebar-bg-hover); }
.nav-sub-item.active {
  color: #fff;
  background: var(--sidebar-active);
  font-weight: 500;
}
.nav-sub-item.soon {
  cursor: default;
  display: flex; align-items: center; gap: 8px;
  opacity: .55;
}
.nav-sub-item.soon:hover { background: none; color: var(--sidebar-muted); }

.soon-badge {
  font-size: .62rem; font-weight: 600;
  padding: 1px 6px; border-radius: 10px;
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.6);
  letter-spacing: .04em; text-transform: uppercase;
}

/* ── Footer ── */
.sidebar-footer {
  padding: 10px 8px;
  border-top: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}
.sidebar-footer-btn {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  background: none; border: none;
  color: var(--sidebar-muted);
  cursor: pointer; border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  transition: all var(--sidebar-t);
  white-space: nowrap;
  text-decoration: none;
}
.sidebar-footer-btn:hover { background: var(--sidebar-bg-hover); color: #fff; }

/* ── App content area ── */
.app-layout {
  margin-left: var(--sidebar-w);
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  transition: margin-left var(--sidebar-t);
}
.sidebar.collapsed ~ .app-layout { margin-left: var(--sidebar-w-collapsed); }