/* ============================================================================
   SidebarEmbed — Standalone embeddable sidebar styles.
   Companion to header-embed.css. Uses the same --he-* design tokens.
   All values in rem (ZERO px). Dark theme by default.
   ============================================================================ */

/* --- Sidebar Token Extensions --- */
:root {
  --he-sidebar-width: 16rem;
  --he-sidebar-collapsed-width: 0rem;
  --he-icon-blue-glow: rgba(59, 130, 246, 0.20);
  --he-icon-green-glow: rgba(34, 197, 94, 0.20);
  --he-icon-purple-glow: rgba(168, 85, 247, 0.20);
  --he-icon-amber-glow: rgba(245, 158, 11, 0.20);
  --he-icon-rose-glow: rgba(244, 63, 94, 0.20);
  --he-icon-teal-glow: rgba(20, 184, 166, 0.20);
  /* Extended hues (base + glow) — keep in sync with icon_defaults.HUES */
  --he-icon-indigo: #6366f1; --he-icon-indigo-glow: rgba(99, 102, 241, 0.20);
  --he-icon-orange: #f97316; --he-icon-orange-glow: rgba(249, 115, 22, 0.20);
  --he-icon-cyan:   #06b6d4; --he-icon-cyan-glow:   rgba(6, 182, 212, 0.20);
  --he-icon-pink:   #ec4899; --he-icon-pink-glow:   rgba(236, 72, 153, 0.20);
}

/* ============================================================================
   SIDEBAR CONTAINER
   ============================================================================ */

.he-sidebar {
  position: fixed;
  top: 3.75rem;                /* Below Bar 1 (he-header) */
  left: 0;
  bottom: 0;
  width: var(--he-sidebar-width);
  background: var(--he-bg);
  border-right: 0.0625rem solid var(--he-border);
  display: flex;
  flex-direction: column;
  z-index: 998;
  overflow: hidden;
  transition: transform 0.25s ease;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  box-sizing: border-box;
}

/* When context bar (Bar 2) is present, shift sidebar down */
.he-sidebar.he-sidebar--with-context {
  top: 6.25rem;                /* 3.75rem header + 2.5rem context bar */
}

/* Push page content right when sidebar is visible (desktop only) */
.he-sidebar-active-body {
  margin-left: var(--he-sidebar-width) !important;
}

/* ============================================================================
   SIDEBAR HEADER (search)
   ============================================================================ */

.he-sidebar-header {
  padding: 0.75rem;
  border-bottom: 0.0625rem solid var(--he-border);
  flex-shrink: 0;
}

.he-sidebar-search-wrap {
  position: relative;
}

.he-sidebar-search {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2rem;
  border-radius: var(--he-radius);
  border: 0.0625rem solid var(--he-border);
  background: var(--he-bg-elevated);
  color: var(--he-text-primary);
  font-size: 0.8125rem;
  font-family: inherit;
  outline: none;
  transition: border-color var(--he-transition);
  box-sizing: border-box;
}

.he-sidebar-search::placeholder {
  color: var(--he-text-muted);
}

.he-sidebar-search:focus {
  border-color: var(--he-accent);
}

.he-sidebar-search-icon {
  position: absolute;
  left: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--he-text-muted);
  font-size: 0.75rem;
  pointer-events: none;
}

/* ============================================================================
   SIDEBAR NAV (scrollable area)
   ============================================================================ */

.he-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--he-bg-hover) transparent;
}

.he-sidebar-nav::-webkit-scrollbar {
  width: 0.375rem;
}

.he-sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--he-bg-hover);
  border-radius: 999rem;
}

/* ============================================================================
   CATEGORY (expandable section)
   ============================================================================ */

.he-sidebar-category {
  margin-bottom: 0.25rem;
}

.he-sidebar-cat-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  min-height: 2.75rem;
  border-radius: var(--he-radius);
  cursor: pointer;
  transition: all var(--he-transition);
  border: none;
  background: none;
  width: 100%;
  font-family: inherit;
  text-align: left;
}

.he-sidebar-cat-header:hover {
  background: var(--he-bg-hover);
}

.he-sidebar-cat-icon {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--he-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.06),
              0 0.125rem 0.5rem -0.25rem currentColor;
  transition: transform var(--he-transition), box-shadow var(--he-transition);
}

.he-sidebar-cat-header:hover .he-sidebar-cat-icon {
  transform: scale(1.08);
}

/* Colored category icons */
.he-sidebar-cat-icon[data-color="blue"]   { color: var(--he-icon-blue);   background: var(--he-icon-blue-glow); }
.he-sidebar-cat-icon[data-color="green"]  { color: var(--he-icon-green);  background: var(--he-icon-green-glow); }
.he-sidebar-cat-icon[data-color="purple"] { color: var(--he-icon-purple); background: var(--he-icon-purple-glow); }
.he-sidebar-cat-icon[data-color="amber"]  { color: var(--he-icon-amber);  background: var(--he-icon-amber-glow); }
.he-sidebar-cat-icon[data-color="rose"]   { color: var(--he-icon-rose);   background: var(--he-icon-rose-glow); }
.he-sidebar-cat-icon[data-color="teal"]   { color: var(--he-icon-teal);   background: var(--he-icon-teal-glow); }
.he-sidebar-cat-icon[data-color="indigo"] { color: var(--he-icon-indigo); background: var(--he-icon-indigo-glow); }
.he-sidebar-cat-icon[data-color="orange"] { color: var(--he-icon-orange); background: var(--he-icon-orange-glow); }
.he-sidebar-cat-icon[data-color="cyan"]   { color: var(--he-icon-cyan);   background: var(--he-icon-cyan-glow); }
.he-sidebar-cat-icon[data-color="pink"]   { color: var(--he-icon-pink);   background: var(--he-icon-pink-glow); }

.he-sidebar-cat-name {
  flex: 1;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--he-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.he-sidebar-cat-chevron {
  font-size: 0.625rem;
  color: var(--he-text-muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

/* Expanded state */
.he-sidebar-category.expanded .he-sidebar-cat-chevron {
  transform: rotate(180deg);
}

.he-sidebar-cat-apps {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.he-sidebar-category.expanded .he-sidebar-cat-apps {
  max-height: 62.5rem;
}

/* ============================================================================
   APP LINK (individual navigation item)
   ============================================================================ */

.he-sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.4375rem 0.625rem 0.4375rem 2.75rem;
  min-height: 2.75rem;
  border-radius: var(--he-radius-sm);
  color: var(--he-text-secondary);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 400;
  cursor: pointer;
  transition: all var(--he-transition);
  position: relative;
  border: none;
  background: none;
  width: 100%;
  font-family: inherit;
  text-align: left;
}

.he-sidebar-link:hover {
  background: var(--he-bg-hover);
  color: var(--he-text-primary);
  transform: translateX(0.125rem);
}

.he-sidebar-link:hover .he-sidebar-link-icon {
  color: var(--he-text-primary);
}

.he-sidebar-link--active {
  background: var(--he-accent-glow);
  color: var(--he-accent);
  font-weight: 500;
}

/* Active indicator bar */
.he-sidebar-link--active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.375rem;
  bottom: 0.375rem;
  width: 0.1875rem;
  border-radius: 999rem;
  background: var(--he-accent);
}

.he-sidebar-link-icon {
  font-size: 0.8125rem;
  width: 1rem;
  text-align: center;
  flex-shrink: 0;
  color: var(--he-text-muted);
  transition: color var(--he-transition);
}

.he-sidebar-link--active .he-sidebar-link-icon {
  color: var(--he-accent);
}

.he-sidebar-link-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================================
   FLAT LIST (unauthenticated, from appMenus — no categories)
   ============================================================================ */

.he-sidebar-flat .he-sidebar-link {
  padding-left: 0.75rem;
}

/* ============================================================================
   MOBILE SIDEBAR (off-canvas)
   ============================================================================ */

.he-sidebar-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 997;
}

.he-sidebar-backdrop.open {
  display: block;
}

.he-sidebar-drawer-open {
  overflow: hidden;
}

@media (max-width: 48rem) {
  .he-sidebar {
    width: min(var(--he-sidebar-width), calc(100vw - 2rem));
    max-height: calc(100dvh - 3.75rem);
    transform: translateX(-100%);
    box-shadow: var(--he-shadow);
  }

  .he-sidebar.he-sidebar--with-context {
    max-height: calc(100dvh - 6.25rem);
  }

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

  .he-sidebar-nav {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }

  /* Don't push content on mobile */
  .he-sidebar-active-body {
    margin-left: 0 !important;
  }
}

@media (min-width: 48.0625rem) {
  .he-sidebar-backdrop {
    display: none !important;
  }
}

/* ============================================================================
   LIGHT THEME OVERRIDES
   ============================================================================ */

[data-theme="light"] .he-sidebar {
  background: #ffffff;
  border-right-color: #e2e8f0;
}

[data-theme="light"] .he-sidebar-search {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #0f172a;
}

[data-theme="light"] .he-sidebar-cat-name {
  color: #64748b;
}

[data-theme="light"] .he-sidebar-link {
  color: #475569;
}

[data-theme="light"] .he-sidebar-link:hover {
  background: #f1f5f9;
  color: #0f172a;
}

[data-theme="light"] .he-sidebar-link--active {
  background: rgba(59, 130, 246, 0.08);
  color: #3b82f6;
}

/* Light theme glow overrides */
[data-theme="light"] {
  --he-icon-blue-glow: rgba(59, 130, 246, 0.12);
  --he-icon-green-glow: rgba(34, 197, 94, 0.12);
  --he-icon-purple-glow: rgba(168, 85, 247, 0.12);
  --he-icon-amber-glow: rgba(245, 158, 11, 0.12);
  --he-icon-rose-glow: rgba(244, 63, 94, 0.12);
  --he-icon-teal-glow: rgba(20, 184, 166, 0.12);
  --he-icon-indigo-glow: rgba(99, 102, 241, 0.12);
  --he-icon-orange-glow: rgba(249, 115, 22, 0.12);
  --he-icon-cyan-glow: rgba(6, 182, 212, 0.12);
  --he-icon-pink-glow: rgba(236, 72, 153, 0.12);
}

[data-theme="light"] .he-sidebar-cat-icon {
  box-shadow: inset 0 0 0 0.0625rem rgba(0, 0, 0, 0.06),
              0 0.125rem 0.5rem -0.25rem currentColor;
}

/* ============================================================================
   EMPTY STATE
   ============================================================================ */

.he-sidebar-empty {
  padding: 1.5rem 0.75rem;
  text-align: center;
  color: var(--he-text-muted);
  font-size: 0.8125rem;
}