/* Globale Variablen für dieses Bauteil */
:host {
  --sidebar-width-expanded: 200px;
  --sidebar-width-collapsed: 96px;
  --sidebar-padding: 1rem;
  --sidebar-margin: 1rem;
  --transition-speed: 0.35s;
  --transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 1. Der Sidebar-Container */
.sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* Reduzierter Abstand */
  width: var(--sidebar-width-expanded);
  height: calc(100vh - 4rem - 46px);

  padding: var(--sidebar-padding);
  padding-top:0;
  /* border: 1px solid var(--color-border); */
  /* border-radius: var(--border-radius-md); */
  transition: width var(--transition-speed) var(--transition-ease);
  /* background-color: var(--color-surface); */
}

/* ======================================================= */
/* --- HEADER & SEPARATER BUTTON WURDEN ENTFERNT       --- */
/* ======================================================= */

/* 2. Navigation */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
   flex-grow: 1;

  /* NEU: Fügt eine vertikale Scrollleiste hinzu, falls der Inhalt überläuft */
  overflow-y: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  border-radius: var(--border-radius-md);
  text-decoration: none;
  font-weight: 500;
  color: var(--color-text-light);
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.nav-item:hover {
  background-color: var(--color-surface);
  color: var(--color-text);
}
.nav-item.active {
  background: var(--color-body-bg-active);
  color: var(--color-text);

  box-shadow: var(--box-shadow-sm);
}
.nav-item app-icon {
  font-size: 1.25rem;
  width: 32px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  background-color: transparent;
  transition: background-color 0.2s;
}
.nav-item span {
  white-space: nowrap;
  clip-path: inset(0 0 0 0);
  margin-left: 0.75rem;
  transition: clip-path 0.3s var(--transition-ease),
    margin-left 0.3s var(--transition-ease);
  position: relative;
  z-index: 1;
}

/* 3. Stile für den eingeklappten Zustand (.collapsed) */
.sidebar.collapsed {
  width: var(--sidebar-width-collapsed);
}

/* WICHTIG: Zentriert das Icon, wenn der Text weg ist, und entfernt den Leerraum */
.sidebar.collapsed .nav-item {
  /* justify-content: center; */
}

.sidebar.collapsed .nav-item span {
  clip-path: inset(0 100% 0 0);
  /* margin-left: -20px; Dieser Wert muss raus er*/
  pointer-events: none;
}

/* 4. Zustandsabhängige Hintergrundfarben für das Icon */
.nav-item:hover app-icon {
  background: transparent;
}
.nav-item.active app-icon {
  background: transparent;
}