/**
 * idf-app-sidebar — App-Sidebar für apps-v2
 *
 * Markup: `_shared/blocks/app-sidebar/idf-app-sidebar.php`
 * JS:     `_shared/blocks/app-sidebar/idf-app-sidebar.js`
 * Voraussetzung: `_shared/tokens/design-tokens/idf-tokens.css` ist vorher geladen.
 *
 * Layout-Konzept:
 *   - Sidebar position:fixed, links, full-height, Brand-Rot Background.
 *   - data-state="collapsed" (Default) → Breite var(--idf-sidebar-w-collapsed)
 *   - data-state="expanded"            → Breite var(--idf-sidebar-w-expanded)
 *   - body bekommt `padding-left: var(--idf-sidebar-w)` — ein Wert, der
 *     je nach State umschaltet (siehe :root unten + body-Selektor).
 *
 * Vertikale Icon-Linie:
 *   Sidebar 60 px breit, Padding 12 px → Logo-Signet-Mitte bei x=30
 *   (= Sidebar-Mitte). Modul-Icons, Avatar und Bottom-Toggle stehen
 *   alle auf dieser x=30-Linie. Im expanded liegt Logo-Signet weiter
 *   links anchored (Padding 12 → Mitte bei 12+18=30, gleich wie
 *   collapsed) — das Logo wandert beim Toggle nicht.
 *
 * Toggle wandert je nach State:
 *   - collapsed: Toggle unten (im User-Block, anstelle des Logouts)
 *   - expanded:  Toggle oben (rechts neben Logo), Logout unten
 *   Im DOM existieren beide Toggles, das CSS blendet je nach State
 *   den jeweils unpassenden aus.
 *
 * Audit L5/#201 (L-E8): --shadow-lg-Fallback auf den exakten Token-Wert
 * normalisiert (Regel 17); render-identisch, das Token laedt auf jeder Seite.
 */

:root {
  --idf-sidebar-w-collapsed: 60px;
  --idf-sidebar-w-expanded: 240px;
  --idf-sidebar-w: var(--idf-sidebar-w-collapsed);
}

html[data-sidebar-state="expanded"] {
  --idf-sidebar-w: var(--idf-sidebar-w-expanded);
}

body {
  padding-left: var(--idf-sidebar-w);
  transition: padding-left var(--motion-medium, 150ms) var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1));
}

/* === Container ============================================================ */

.idf-app-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--idf-sidebar-w);
  display: flex;
  flex-direction: column;
  background: var(--primary, #c8134b);
  color: var(--white, #fff);
  z-index: var(--z-sticky, 10);
  overflow: hidden;
  transition: width var(--motion-medium, 150ms) var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1));
}

.idf-app-sidebar[data-state="expanded"] {
  width: var(--idf-sidebar-w-expanded);
}

/* Während des Ziehens in der Expanded-Zone: Transitions aus, damit die Breite
   dem Cursor 1:1 folgt. Das JS nimmt die Klasse in der Snap-Zone wieder ab →
   dann greifen die Transitions und die Sidebar gleitet weich in die schmale
   Ansicht (statt hart auf 60 px zu springen). */
html.idf-sidebar-resizing .idf-app-sidebar,
html.idf-sidebar-resizing body,
html.idf-sidebar-resizing .idf-app-sidebar-logo,
html.idf-sidebar-resizing .idf-app-sidebar-group-items {
  transition: none !important;
}

/* Bewegungsreduktion respektieren: keine Breiten-/Höhen-Animationen. */
@media (prefers-reduced-motion: reduce) {
  body,
  .idf-app-sidebar,
  .idf-app-sidebar-logo,
  .idf-app-sidebar-group-items,
  .idf-app-sidebar-group-chevron {
    transition: none;
  }
}

/* === Top: Logo + Toggle =================================================== */

/* Top-Container immer flex-direction: row, justify-content: space-between.
   Im collapsed ist der Top-Toggle versteckt → Logo füllt den Platz mit
   Padding 12 LR allein und sitzt automatisch zentriert (12 + 36 + 12 = 60).
   Im expanded sind Logo + Toggle nebeneinander, Logo links, Toggle rechts. */
.idf-app-sidebar-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3, 12px);
  border-bottom: 1px solid color-mix(in srgb, var(--white) 18%, transparent);
  min-height: 60px;
}

/* Logo-Wrapper: links anchored im Wrapper (justify-content: flex-start),
   Wrapper-Width animiert smooth zwischen 36 und 180 px. Crop wächst
   nach rechts heraus. */
.idf-app-sidebar-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  height: 36px;
  overflow: hidden;
  transition: width var(--motion-medium, 150ms) var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1));
}
.idf-app-sidebar-logo img {
  height: 36px;
  width: auto;
  display: block;
  /* Logo wird in der Weiß-Variante geladen
     (_shared/tokens/assets/logos/idf_logo_quer_2026_1_JM_weiss.svg) — kein
     CSS-Filter-Hack mehr nötig. */
  max-width: none;
}

.idf-app-sidebar[data-state="collapsed"] .idf-app-sidebar-logo {
  width: 36px;
}
.idf-app-sidebar[data-state="expanded"] .idf-app-sidebar-logo {
  width: 180px;
}

/* === Resize-Griff (rechte Kante) ==========================================
   Ein Anfasser über die volle Höhe an der rechten Kante. Im Ruhezustand
   zurückhaltend; sobald die Maus über der Sidebar ist, tritt der Grip in der
   vertikalen Mitte hervor, direkt am Griff kommt zusätzlich die Kantenlinie.
   Der Cursor (col-resize) signalisiert die Ziehbarkeit. Position ist konstant
   (immer rechts) — löst das „mal oben, mal unten" der früheren Toggle-Buttons ab. */
.idf-app-sidebar-resizer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 8px;
  z-index: var(--z-sticky, 10);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  cursor: col-resize;
  touch-action: none; /* Pointer-Drag nicht als Scroll deuten */
}
/* dünne vertikale Kantenlinie am äußersten Rand */
.idf-app-sidebar-resizer::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2px;
  background: transparent;
  transition: background var(--motion-base, 120ms);
}
.idf-app-sidebar-resizer:hover::before,
.idf-app-sidebar-resizer:focus-visible::before,
html.idf-sidebar-resizing .idf-app-sidebar-resizer::before {
  background: color-mix(in srgb, var(--white) 55%, transparent);
}
/* Grip-Indikator in der vertikalen Mitte (der eigentliche „Anfasser").
   Dreistufig: ruhend zurückhaltend, auf Sidebar-Hover deutlich sichtbar
   (Discoverability, die Maus muss nicht erst die 8-px-Kante treffen),
   direkt am Griff / Fokus / beim Ziehen voll weiß. */
.idf-app-sidebar-resizer-grip {
  width: 4px;
  height: 40px;
  margin-right: 1px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--white) 22%, transparent);
  transition: background var(--motion-base, 120ms);
}
/* Maus irgendwo über der Sidebar → Griff tritt hervor. */
.idf-app-sidebar:hover .idf-app-sidebar-resizer-grip {
  background: color-mix(in srgb, var(--white) 55%, transparent);
}
/* Direkt am Griff, Fokus oder während des Ziehens → voll. Alle Selektoren
   mind. so spezifisch wie die Sidebar-Hover-Regel und danach notiert, damit
   sie gewinnen (die Resizing-Regel trägt dafür .idf-app-sidebar-resizer). */
.idf-app-sidebar-resizer:hover .idf-app-sidebar-resizer-grip,
.idf-app-sidebar-resizer:focus-visible .idf-app-sidebar-resizer-grip,
html.idf-sidebar-resizing .idf-app-sidebar-resizer .idf-app-sidebar-resizer-grip {
  background: var(--white, #fff);
}
/* Fokus: der weiße Kantenstreifen (::before) dient als sichtbarer Indikator. */
.idf-app-sidebar-resizer:focus-visible {
  outline: none;
}

/* === Nav (Modul-Liste) ====================================================
   Items nehmen die volle Sidebar-Breite ein, Nav-Container hat kein
   horizontales Padding. Im expanded sorgt Item-Padding-Left=20 dafür,
   dass die Icon-Mitte bei x=30 liegt (12 nav-padding wäre dezelebriert,
   hier 0 + 20 padding = 20 + 10 icon-half = 30). Im collapsed übernimmt
   justify-content: center die Zentrierung — Icon-Mitte ebenfalls bei 30. */
.idf-app-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
  padding: var(--space-3, 12px) 0;
  flex: 1 1 auto;
  overflow-y: auto;
}

/* Hover signalisiert nur über Color-Stärke (faded → fully white).
   Active-State behält den dezenten Background-Streifen als Standort-
   Marker; ohne border-radius, weil Item full-width ist. */
.idf-app-sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  height: 44px;
  padding: 0 var(--space-3, 12px) 0 var(--space-5, 20px);
  color: color-mix(in srgb, var(--white) 75%, transparent);
  font-size: var(--font-base, 1rem);
  font-weight: var(--weight-medium, 500);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--motion-base, 120ms), color var(--motion-base, 120ms);
  cursor: pointer;
}
.idf-app-sidebar-nav-item:hover {
  color: var(--white, #fff);
}
.idf-app-sidebar-nav-item.is-active {
  background: color-mix(in srgb, var(--white) 18%, transparent);
  color: var(--white, #fff);
}
.idf-app-sidebar-nav-item.is-disabled {
  color: color-mix(in srgb, var(--white) 40%, transparent);
  cursor: not-allowed;
}
.idf-app-sidebar-nav-item.is-disabled:hover {
  color: color-mix(in srgb, var(--white) 40%, transparent);
}

.idf-app-sidebar-nav-icon {
  width: 20px;
  text-align: center;
  font-size: 16px;
  flex-shrink: 0;
}

.idf-app-sidebar-nav-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.idf-app-sidebar[data-state="collapsed"] .idf-app-sidebar-nav-item {
  justify-content: center;
  padding: 0;
}
.idf-app-sidebar[data-state="collapsed"] .idf-app-sidebar-nav-label {
  display: none;
}

/* === Nav-Gruppen (Akkordeon) ==============================================
   Jede Rubrik (Operativ, Inventar, …) ist ein Akkordeon: ein Header-Button
   (Rubrik-Icon + Label + Chevron) klappt seine Modul-Liste auf/zu.

   - Expanded: Header sichtbar, Items je nach `.is-open` ein-/ausgeblendet.
   - Collapsed: nur die Rubrik-Icons sichtbar (wie eine Icon-Leiste), die
     Modul-Items komplett versteckt. Klick auf ein Rubrik-Icon klappt die
     Sidebar aus und öffnet die Gruppe (Logik in idf-app-sidebar.js). */

.idf-app-sidebar-group {
  display: flex;
  flex-direction: column;
}

/* Header sieht aus wie ein Nav-Item, ist aber ein <button> (full-width,
   transparenter Reset). Padding-Left=20 → Icon-Mitte bei x=30 wie die
   Nav-Items. Chevron rechtsbündig (margin-left:auto). */
.idf-app-sidebar-group-header {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  width: 100%;
  height: 44px;
  padding: 0 var(--space-3, 12px) 0 var(--space-5, 20px);
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--white) 75%, transparent);
  font-size: var(--font-base, 1rem);
  font-weight: var(--weight-medium, 500);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--motion-base, 120ms);
}
.idf-app-sidebar-group-header:hover {
  color: var(--white, #fff);
}

.idf-app-sidebar-group-chevron {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11px;
  transition: transform var(--motion-base, 120ms);
}
.idf-app-sidebar-group.is-open .idf-app-sidebar-group-chevron {
  transform: rotate(180deg);
}

/* Aktive Gruppe (enthält das aktuelle Modul): Header voll weiß, damit
   im expanded klar ist, wo man steht. */
.idf-app-sidebar-group.is-active-group > .idf-app-sidebar-group-header {
  color: var(--white, #fff);
}

/* Modul-Liste der Gruppe: weiche Auf-/Zu-Animation über grid-template-rows
   (0fr → 1fr). Der Outer ist das animierte Grid, der Inner (overflow:hidden,
   min-height:0) faltet die Items sauber zusammen. Kein max-height-Magic-Wert
   nötig — die Höhe ergibt sich aus dem Content. */
.idf-app-sidebar-group-items {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--motion-medium, 150ms) var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1));
}
.idf-app-sidebar-group.is-open .idf-app-sidebar-group-items {
  grid-template-rows: 1fr;
}
.idf-app-sidebar-group-items-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
}

/* Gruppen-Kinder eingerückt + eine Spur kleiner → klare Hierarchie unter
   dem Header. Icon-Mitte rückt von x=30 auf x=42. */
.idf-app-sidebar-group-items .idf-app-sidebar-nav-item {
  padding-left: var(--space-8, 32px);
  font-size: var(--font-md, 0.875rem);
}

/* — Collapsed: Icon-Leiste — */
.idf-app-sidebar[data-state="collapsed"] .idf-app-sidebar-group-header {
  justify-content: center;
  padding: 0;
}
.idf-app-sidebar[data-state="collapsed"] .idf-app-sidebar-group-header .idf-app-sidebar-nav-label,
.idf-app-sidebar[data-state="collapsed"] .idf-app-sidebar-group-chevron {
  display: none;
}
/* Modul-Items im collapsed immer versteckt — Klick aufs Rubrik-Icon
   klappt erst aus (überstimmt `.is-open`). */
.idf-app-sidebar[data-state="collapsed"] .idf-app-sidebar-group-items {
  display: none;
}
/* Aktive Rubrik im collapsed als Standort-Marker (analog is-active-Item). */
.idf-app-sidebar[data-state="collapsed"] .idf-app-sidebar-group.is-active-group .idf-app-sidebar-group-header {
  background: color-mix(in srgb, var(--white) 18%, transparent);
  color: var(--white, #fff);
}

/* === Quick-Actions ======================================================== */

.idf-app-sidebar-quick {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  padding: var(--space-3, 12px) var(--space-3, 12px);
  border-top: 1px solid color-mix(in srgb, var(--white) 18%, transparent);
}

/* === User-Block unten =====================================================
   Im expanded: Avatar links + Username + Logout rechts (row-Layout).
   Im collapsed: Avatar oben + Bottom-Toggle drunter (column-Layout),
   Username und Logout sind ausgeblendet. */
.idf-app-sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px);
  border-top: 1px solid color-mix(in srgb, var(--white) 18%, transparent);
  flex-shrink: 0;
}

.idf-app-sidebar-user-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--white, #fff);
  color: var(--primary, #c8134b);
  font-size: var(--font-md, 0.875rem);
  font-weight: var(--weight-bold, 700);
  letter-spacing: 0.04em;
  overflow: hidden; /* hält das Akteur-Foto im Kreis */
}

/* Akteur-Foto im User-Block (füllt den Kreis). */
.idf-app-sidebar-user-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Klickbarer Avatar (eigenes Akteur-Profil öffnen). */
.idf-app-sidebar-user-avatar.is-clickable { cursor: pointer; }
.idf-app-sidebar-user-avatar.is-clickable:hover {
  box-shadow: 0 0 0 2px var(--primary, #c8134b);
}

.idf-app-sidebar-user-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-md, 0.875rem);
  font-weight: var(--weight-medium, 500);
  color: var(--white, #fff);
}

.idf-app-sidebar-logout {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--white) 75%, transparent);
  cursor: pointer;
  transition: color var(--motion-base, 120ms);
}
.idf-app-sidebar-logout:hover {
  color: var(--white, #fff);
}
.idf-app-sidebar-logout i {
  font-size: 16px;
}

.idf-app-sidebar[data-state="collapsed"] .idf-app-sidebar-user {
  flex-direction: column;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px);
}
.idf-app-sidebar[data-state="collapsed"] .idf-app-sidebar-user-name,
.idf-app-sidebar[data-state="collapsed"] .idf-app-sidebar-logout {
  display: none;
}

/* === Mobile =============================================================== */

@media (max-width: 720px) {
  body {
    padding-left: 0;
  }
  .idf-app-sidebar {
    transform: translateX(-100%);
  }
  .idf-app-sidebar[data-state="expanded"] {
    transform: translateX(0);
    box-shadow: var(--shadow-lg, 0 10px 40px rgba(0, 0, 0, 0.25));
  }
  /* Kein Breite-Ziehen auf Mobile — hier gilt das Off-Canvas-Muster. */
  .idf-app-sidebar-resizer {
    display: none;
  }
}