/* ==========================================================================
   Sidebar — PEGMENT Design System

   Component:  <pg-sidebar>  (Web Component, defined in js/pg-layout.js)
               <pg-topbar>   (Web Component, defined in js/pg-layout.js)

   Dependencies:
     - css/variables.css  (design tokens)
     - css/typography.css (type scale)
     - https://cdn.workpeg.com/icons/icons.css      (Tabler icon font)
     - js/pg-avatar.js    (<pg-avatar> web component)

   Layout structure:
     ┌────────┬─────────────────────────────┐
     │        │  ┌───────────────────────┐  │
     │        │  │  pg-topbar (48px)     │  │
     │        │  │  [empty]    [icons]   │  │
     │ pg-    │  ├───────────────────────┤  │
     │ sidebar│  │                       │  │
     │ (full  │  │  pg-main              │  │
     │ height)│  │  (scrollable)         │  │
     │        │  │                       │  │
     │        │  └───────────────────────┘  │
     └────────┴─────────────────────────────┘

   The sidebar spans the full viewport height. The topbar sits above the
   main content area only, not above the sidebar.

   Version: 4.1.0
   ========================================================================== */

/* ═══════════════════════════════════════════════════════════════════════
   SHELL LAYOUT — Structural CSS (moved from pg-layout.js)
   ═══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── pg-sidebar host ──────────────────────────────────────────────────── */
pg-sidebar {
  display: block;
  flex-shrink: 0;
}

/* ── Sidebar root ────────────────────────────────────────────────────── */
.pg-sidebar {
  width: var(--pg-sidebar-width, 250px);
  background: var(--color-surface-sunken2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  z-index: 20;
  height: 100vh;
  transition: width 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 6px 6px;
}

.pg-sidebar.is-collapsed {
  width: var(--pg-sidebar-collapsed, 58px);
}

/* ═══════════════════════════════════════════════════════════════════════
   TOP ZONE: Logo + Toggle on same line, divider, then navs
   ═══════════════════════════════════════════════════════════════════════ */
.pg-sidebar-top {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

/* Logo + toggle row */
.pg-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 18px;
  padding:0px 2px 0 8px;
}
/* Collapsed: hide logo, show only toggle centered */
.pg-sidebar.is-collapsed .pg-sidebar-header {
  justify-content: center;
  padding: 0px;
}
.pg-sidebar.is-collapsed .pg-logo {
  display: none;
}

/* Sidebar toggle button */
.pg-sidebar-toggle {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-icon-primary);
  background: transparent;
  border: none;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.18s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.pg-sidebar-toggle:hover {
  background: var(--color-bg-active);
  color: var(--color-text-primary);
}
.pg-sidebar-toggle .ti {
  display: block;
  pointer-events: none;
  --icon-size: 20px;
}

/* Horizontal line below logo/toggle */
.pg-sidebar-divider {
  height: 1px;
  background: var(--color-border-subtle);
}

/* 32px gap between line bottom and nav top */
.pg-top-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pg-topbar-left-main {
  display: flex;
  align-items: center;
  gap: 8px
}

/* ═══════════════════════════════════════════════════════════════════════
   TOPBAR
   ═══════════════════════════════════════════════════════════════════════ */
pg-topbar {
  display: block;
}

.pg-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  gap: 12px;
}

.pg-topbar-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}

.pg-topbar-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.pg-topbar-title {
  font-size: var(--text-label-lg-size, 14px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pg-topbar-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--radius-sm, 4px);
  background: var(--color-surface-sunken2);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.pg-topbar-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-icon-primary);
  flex-shrink: 0;
}
.pg-topbar-back:hover {
  background: var(--color-bg-active);
}

.pg-topbar-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pg-topbar-tab {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: var(--radius-sm, 4px);
  font-size: 12px;
  color: var(--color-text-secondary);
}
.pg-topbar-tab.is-active {
  background: var(--color-surface-sunken2);
  color: var(--color-text-primary);
}

.pg-topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.pg-chrome-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-icon-primary);
}
.pg-chrome-btn:hover {
  background: var(--color-bg-active);
}

/* Collapsed: no 32px gap, nav starts immediately below toggle */
.pg-sidebar.is-collapsed .pg-top-nav {
  padding-top: 4px;
  align-items: center;
}

/* ── Logo ────────────────────────────────────────────────────────────── */
.pg-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  overflow: hidden;
}

.pg-logo-mark {
  width: 22px;
  height: 22px;
  background: var(--color-brand-primary);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pg-logo-mark span {
  font-size: 11px;
  font-weight: 800;
  color: var(--color-brand-on-primary);
  letter-spacing: -0.05em;
}

.pg-logo-word {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-text-primary);
  white-space: nowrap;
  transition: opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.pg-sidebar.is-collapsed .pg-logo-word {
  opacity: 0;
  pointer-events: none;
}

/* Logo images (light/dark, full vs mark) */
.pg-logo-img {
  display: none;
  max-height: 16px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.pg-logo-img--mark {
  max-width: 22px;
}
.pg-logo-img--full.pg-logo-img--light {
  display: block;
}
.pg-sidebar.is-collapsed .pg-logo-img--full.pg-logo-img--light {
  display: none;
}
.pg-sidebar.is-collapsed .pg-logo-img--mark.pg-logo-img--light {
  display: block;
}

@media (prefers-color-scheme: dark) {
  .pg-logo-img--full.pg-logo-img--light {
    display: none;
  }
  .pg-logo-img--full.pg-logo-img--dark {
    display: block;
  }
  .pg-sidebar.is-collapsed .pg-logo-img--full.pg-logo-img--dark {
    display: none;
  }
  .pg-sidebar.is-collapsed .pg-logo-img--mark.pg-logo-img--light {
    display: none;
  }
  .pg-sidebar.is-collapsed .pg-logo-img--mark.pg-logo-img--dark {
    display: block;
  }
}

html.dark .pg-logo-img--full.pg-logo-img--light {
  display: none;
}
html.dark .pg-logo-img--full.pg-logo-img--dark {
  display: block;
}
html.dark .pg-sidebar.is-collapsed .pg-logo-img--full.pg-logo-img--dark {
  display: none;
}
html.dark .pg-sidebar.is-collapsed .pg-logo-img--mark.pg-logo-img--light {
  display: none;
}
html.dark .pg-sidebar.is-collapsed .pg-logo-img--mark.pg-logo-img--dark {
  display: block;
}

html.light .pg-logo-img--full.pg-logo-img--light {
  display: block;
}
html.light .pg-logo-img--full.pg-logo-img--dark {
  display: none;
}
html.light .pg-sidebar.is-collapsed .pg-logo-img--full.pg-logo-img--light {
  display: none;
}
html.light .pg-sidebar.is-collapsed .pg-logo-img--mark.pg-logo-img--dark {
  display: none;
}
html.light .pg-sidebar.is-collapsed .pg-logo-img--mark.pg-logo-img--light {
  display: block;
}

/* ── Top nav items (below logo, gap 2px) ────────────────────────────── */
.pg-top-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   MIDDLE ZONE: Scrollable Nav Sections
   ═══════════════════════════════════════════════════════════════════════ */
.pg-sidebar-mid {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  border-top: 1px solid var(--color-border-subtle);
  scrollbar-width: thin;
   margin-top: 12px;
   padding-top: 16px;
  scrollbar-color: rgba(128, 128, 128, 0.2) transparent;
}
.pg-sidebar-mid::-webkit-scrollbar {
  width: 3px;
}
.pg-sidebar-mid::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.2);
  border-radius: 3px;
}

/* ── Section titles ──────────────────────────────────────────────────── */
.pg-nav-sec {
  display: flex;
  gap: 4px;
  font-size: var(--text-label-sm-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--text-label-sm-line-height);
  color: var(--color-text-tertiary);
  padding: 8px 8px 4px;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1),
              max-height 0.18s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  max-height: 28px;
}
.pg-sidebar.is-collapsed .pg-nav-sec {
  opacity: 0;
  max-height: 0;
  /* padding-top: 0; */
  padding-bottom: 0;
}

/* ── Nav sections container ──────────────────────────────────────────── */
.pg-nav-sections {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════
   NAV ITEMS (shared by top and middle zones)
   ═══════════════════════════════════════════════════════════════════════ */
.pg-nav-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 0px 12px;
  height: 36px;
  width: 100% !important;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 450;
  line-height: 16px;
  white-space: nowrap;
  overflow: visible;
  background: transparent;
  border: none;
  font-family: var(--font-base);
  width: 100%;
  text-align: left;
  transition: background 0.18s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  text-decoration: none;
}
.pg-nav-item:hover {
  background: var(--color-bg-active);
  color: var(--color-text-primary);
}
.pg-nav-item.is-active {
  background: var(--color-bg-active);
  color: var(--color-text-primary);
}

/* Submenu indicator */
.pg-nav-item.has-submenu {
  justify-content: space-between;
}
.pg-nav-arrow {
  flex-shrink: 0;
  color: var(--color-text-tertiary);
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.pg-nav-item:hover .pg-nav-arrow {
  color: var(--color-text-primary);
}

.pg-nav-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-icon-primary);
}
.pg-nav-icon .ti {
  --icon-size: 18px;
}
.pg-nav-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: var(--text-label-lg-size);
  color: var(--color-text-primary);
}
.pg-sidebar.is-collapsed .pg-nav-label {
  opacity: 0;
  display: none;
}

/* ── Nav item (CLOSED state) ────────────────────────────────────────── */
.pg-sidebar.is-collapsed .pg-nav-item {
  padding: 8px 8px;
  justify-content: center;
  gap: 0;
  width: 32px;
}
.pg-sidebar.is-collapsed .pg-nav-icon {
  width: 16px;
  height: 16px;
}
.pg-sidebar.is-collapsed .pg-nav-icon .ti {
  --icon-size: 16px;
}

/* Tooltip in collapsed state */
.pg-sidebar.is-collapsed .pg-nav-item:hover::after {
  content: attr(title);
  position: fixed;
  left: calc(var(--pg-sidebar-collapsed, 52px) + 10px);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-medium);
  color: var(--color-text-primary);
  font-size: 11.5px;
  font-weight: 500;
  padding: 4px 9px;
  border-radius: var(--radius);
  white-space: nowrap;
  pointer-events: none;
  z-index: 400;
  box-shadow: var(--shadow-md);
}

/* ═══════════════════════════════════════════════════════════════════════
   BOTTOM ZONE: User Profile / Workspace Switcher
   Separated from middle by border-top.
   ═══════════════════════════════════════════════════════════════════════ */
.pg-sidebar-bot {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 4px 4px;
  gap: 1px;
}

/* ── User profile row ────────────────────────────────────────────────── */
.pg-user-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius);
  cursor: pointer;
  overflow: hidden;
  transition: background 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.pg-user-row.is-collapsed {
    justify-content: center;
}

.pg-user-row:hover {
  background: var(--color-surface-sunken);
}
.pg-user-row.is-active {
  background: var(--color-surface-sunken);
}

/* Workspace trigger variant (many workspaces) */
.pg-user-row.pg-ws-trigger {
  padding: 6px 8px;
}

.pg-user-details {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.pg-sidebar.is-collapsed .pg-user-details {
  opacity: 0;
  display: none;
  justify-content: center;
}
.pg-user-name {
  font-size: var(--text-label-lg-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--text-label-md-line-height);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pg-user-company {
  font-size: var(--text-label-md-size);
  font-weight: var(--font-weight-normal);
  line-height: var(--text-label-xs-line-height);
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pg-user-expand {
  flex-shrink: 0;
  color: var(--color-text-tertiary);
  transition: opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.pg-sidebar.is-collapsed .pg-user-expand {
  opacity: 0;
  display: none;
}
.pg-user-row.popup-open .pg-user-expand {
  transform: rotate(180deg);
}

/* ── More actions (many workspaces mode) ─────────────────────────────── */
.pg-more-actions {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0 4px;
}
.pg-sidebar.is-collapsed .pg-more-actions {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   DROPDOWN ACTIONS (used in sidebar bottom and floating dropdowns)
   ═══════════════════════════════════════════════════════════════════════ */
.pg-dropdown-action {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0px 9px;
  border-radius: var(--radius);
  font-size: var(--text-body-md-size);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background 0.18s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pg-dropdown-action:hover {
  background: var(--color-surface-sunken2);
  color: var(--color-text-primary);
}
.pg-dropdown-action.is-active {
  background: var(--color-surface-sunken2);
  color: var(--color-text-primary);
}
.pg-dropdown-action--danger {
  color: var(--color-critical-icon);
}
.pg-dropdown-action--danger:hover {
  background: rgba(232, 120, 120, 0.07);
  color: var(--color-critical-icon);
}
.pg-dropdown-action.has-submenu {
  justify-content: space-between;
}
.pg-dropdown-action.has-submenu > span {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pg-dropdown-action .pg-nav-arrow,
.pg-dropdown-action.has-submenu .ti-chevron-right {
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}
.pg-dropdown-action:hover .pg-nav-arrow,
.pg-dropdown-action:hover .ti-chevron-right {
  color: var(--color-text-primary);
}

/* ═══════════════════════════════════════════════════════════════════════
   FLOATING DROPDOWN (appears to the right of sidebar)
   ═══════════════════════════════════════════════════════════════════════ */
.pg-dropdown-floating {
  animation: pg-dropdown-in 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  z-index: 300;
}
@keyframes pg-dropdown-in {
  from {
    opacity: 0;
    transform: translateX(-4px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.pg-dropdown-content {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border-subtle);
  padding: 8px;
  gap: 4px;
  background: var(--color-bg-default);
  border-radius: var(--radius-lg);
}

.pg-dropdown-floating.pg-dropdown-above {
  box-shadow: 0px 24px 48px -12px #0000002E;
  animation: pg-dropdown-up 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  width: 250px;
}
@keyframes pg-dropdown-up {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pg-dropdown-label {
  font-size: var(--text-label-xs-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════
   DROPDOWN ACTIVE BUSINESS TRIGGER ROW (for >3 workspaces mode)
   ═══════════════════════════════════════════════════════════════════════ */

.pg-dropdown-action.pg-ws-trigger-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.pg-dropdown-action.pg-ws-trigger-row:hover {
  background: var(--color-surface-sunken);
}
.pg-dropdown-action.pg-ws-trigger-row .pg-ws-meta {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}
.pg-dropdown-action.pg-ws-trigger-row .pg-ws-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}
.pg-dropdown-action.pg-ws-trigger-row .pg-ws-plan {
  font-size: 11px;
  color: var(--color-text-tertiary);
  line-height: 1.35;
  white-space: nowrap;
}
.pg-dropdown-action.pg-ws-trigger-row .pg-ws-chevron {
  flex-shrink: 0;
  color: var(--color-text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════════
   WORKSPACE LIST (inside dropdowns)
   ═══════════════════════════════════════════════════════════════════════ */
.pg-ws-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  max-height: 115px !important;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(128, 128, 128, 0.15) transparent;
  --fade-size: 32px;
}
.pg-ws-list::-webkit-scrollbar {
  width: 3px;
}
.pg-ws-list::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.15);
  border-radius: 3px;
}

.pg-ws-list.has-overflow {
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - var(--fade-size)), transparent 100%);
  mask-image: linear-gradient(to bottom, black calc(100% - var(--fade-size)), transparent 100%);
}
.pg-ws-list.has-overflow.at-bottom {
  -webkit-mask-image: none;
  mask-image: none;
}

/* Workspace item */
.pg-ws-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.pg-ws-item:hover {
  background: var(--color-surface-sunken2);
}
.pg-ws-item.is-active {
  background: var(--color-surface-sunken2);
}

/* Grip icon */
.pg-ws-grip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-icon-primary);
  width: 14px;
  height: 14px;
  cursor: grab;
  margin-right: -4px;
}
.pg-ws-grip .ti {
  --icon-size: 14px;
}

/* Workspace meta — name + plan */
.pg-ws-meta {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.pg-ws-name {
  font-size: 12px;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 14px;
}

.pg-ws-name.is-active {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

.pg-ws-plan {
  font-size: 11px;
  color: var(--color-text-tertiary);
  line-height: 14px;
  white-space: nowrap;
}

/* Checkmark */
.pg-ws-check {
  flex-shrink: 0;
  color: var(--color-icon-primary);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pg-ws-item.is-active .pg-ws-check {
  opacity: 1;
}
.pg-ws-check .ti {
  --icon-size: 14px;
}

/* Divider */
.pg-ws-divider {
  height: 1px;
  background: var(--color-border-subtle);
  margin: 6px 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   NAV ACTION ICONS (appear on hover, on the RIGHT side of nav item)
   ═══════════════════════════════════════════════════════════════════════ */
.pg-nav-actions {
  display: none;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding-left: 8px;
  opacity: 0;
  transform: translateX(4px);
  transition: opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Show action icons on hover */
.pg-nav-item:hover .pg-nav-actions {
  opacity: 1;
  transform: translateX(0);
  display: flex;
}

/* Active state: keep action icons visible */
.pg-nav-item.is-active .pg-nav-actions {
  opacity: 1;
  transform: translateX(0);
}

/* Individual action icon button */
.pg-nav-action {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-icon-secondary);
  background: transparent;
  border: none;
  padding: 0;
  transition: background 0.18s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
}
.pg-nav-action:hover {
  background: var(--color-bg-active);
  color: var(--color-text-primary);
}
.pg-nav-action .ti {
  --icon-size: 14px;
  pointer-events: none;
}

/* Ensure action icons container doesn't block hover on parent */
.pg-nav-actions {
  pointer-events: none;
}
.pg-nav-actions .pg-nav-action {
  pointer-events: auto;
}

/* In collapsed state, hide action icons (no room) */
.pg-sidebar.is-collapsed .pg-nav-actions {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   COLLAPSIBLE NAV SECTIONS
   ═══════════════════════════════════════════════════════════════════════ */

/* Section header row (title + chevron) */
.pg-nav-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 8px 4px;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.pg-nav-section-header:hover {
  opacity: 0.7;
}
.pg-sidebar.is-collapsed .pg-nav-section-header {
  display: none;
}

/* Section title inside header */
.pg-nav-section-header .pg-nav-sec {
  padding: 0;
  max-height: none;
  transition: none;
}

/* Chevron toggle on section header */
.pg-nav-section-chevron {
  flex-shrink: 0;
  color: var(--color-text-tertiary);
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}
.pg-nav-section-chevron .ti {
  --icon-size: 14px;
}

/* Rotate chevron when section is collapsed */
.pg-nav-section.is-collapsed .pg-nav-section-chevron {
  transform: rotate(-90deg);
}

/* Section content (nav items) */
.pg-nav-section-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  max-height: 2000px;
  opacity: 1;
  transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1),
              margin 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Collapsed state: hide content */
.pg-nav-section.is-collapsed .pg-nav-section-content {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  pointer-events: none;
}

/* In collapsed sidebar, hide section headers and show items directly */
.pg-sidebar.is-collapsed .pg-nav-section-content {
  max-height: none;
  opacity: 1;
  pointer-events: auto;
}