/**
 * ONYX Shell — Sidebar-Layout (Hub, Team, Admin)
 */
:root {
  --onyx-nav-w: var(--admin-nav-w, 64px);
  --onyx-nav-w-expanded: var(--admin-nav-w-expanded, 240px);
}

.app.onyx-shell {
  display: flex;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.sidebar.onyx-nav-panel,
.sidebar.admin-nav-panel {
  width: var(--onyx-nav-w);
  min-width: var(--onyx-nav-w);
  max-width: var(--onyx-nav-w-expanded);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: hsl(var(--sidebar-background));
  border-right: 1px solid hsl(var(--sidebar-border));
  transition: width 0.2s ease, min-width 0.2s ease;
  overflow: hidden;
}

html.onyx-nav-expanded .sidebar.onyx-nav-panel,
html.onyx-admin-nav-expanded .sidebar.admin-nav-panel {
  width: var(--onyx-nav-w-expanded);
  min-width: var(--onyx-nav-w-expanded);
}

.onyx-nav-head,
.admin-nav-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 10px;
  border-bottom: 1px solid hsl(var(--sidebar-border));
  min-height: 56px;
  flex-shrink: 0;
}

.onyx-nav-hamburger,
.admin-nav-hamburger {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: 1px solid hsl(var(--sidebar-border));
  border-radius: 8px;
  background: transparent;
  color: hsl(var(--sidebar-foreground));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.onyx-nav-hamburger svg,
.admin-nav-hamburger svg {
  width: 18px;
  height: 18px;
}

.onyx-nav-brand-link,
.admin-nav-brand-link,
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}

/* Logo darf NIEMALS die ganze Seite füllen */
.onyx-nav-brand-link img,
.admin-nav-brand-link img,
.sidebar-brand img {
  width: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 8px;
}

.onyx-nav-head-text,
.admin-nav-head-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition: opacity 0.15s ease;
}

html.onyx-nav-expanded .onyx-nav-head-text,
html.onyx-admin-nav-expanded .admin-nav-head-text {
  opacity: 1;
  width: auto;
}

.onyx-nav-brand,
.admin-nav-brand {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
}

.onyx-nav-sub,
.admin-nav-sub {
  font-size: 10px;
  color: hsl(var(--shell-muted-foreground));
  white-space: nowrap;
}

.sidebar-nav .snav-item span:not(.badge-count),
.sidebar-nav .snav-section {
  opacity: 0;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

html.onyx-nav-expanded .sidebar-nav .snav-item span:not(.badge-count),
html.onyx-nav-expanded .sidebar-nav .snav-section,
html.onyx-admin-nav-expanded .sidebar-nav .snav-item span:not(.badge-count),
html.onyx-admin-nav-expanded .sidebar-nav .snav-section {
  opacity: 1;
  width: auto;
}

.sidebar-nav .snav-item {
  justify-content: center;
  padding-left: 12px;
  padding-right: 12px;
}

html.onyx-nav-expanded .sidebar-nav .snav-item,
html.onyx-admin-nav-expanded .sidebar-nav .snav-item {
  justify-content: flex-start;
  padding-left: 10px;
  padding-right: 10px;
}

.sidebar-user .user-info {
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition: opacity 0.15s ease;
}

html.onyx-nav-expanded .sidebar-user .user-info,
html.onyx-admin-nav-expanded .sidebar-user .user-info {
  opacity: 1;
  width: auto;
}

.sidebar-user {
  flex-shrink: 0;
}