/* ==========================================================================
   drawer-action-rail.css — Premium-Aktionen-Seitenleiste im Drawer (V4)

   Konsument: web/js/components/drawers/_shared/drawer-action-rail.js

   Auf Desktop/Tablet (>=600px, Hover-fähig) ziehen die "overflowable"
   Header-Aktionen (alles ausser Bearbeiten-Stift, Hero-CTA, Schliessen) in
   eine vertikale Leiste am rechten Drawer-Rand — dauerhaft sichtbar statt in
   einer engen Icon-Zeile. Ein Chevron klappt ein beschriftetes, gruppiertes
   Panel als In-Drawer-Overlay auf (kein Layout-Sprung). Auf <600px baut das JS
   die Rail ab und der bestehende Header-"..."-Overflow uebernimmt (Mobile).

   Design-Vokabular bewusst an die linke Nav-Rail angelehnt (layout.css:
   .nav-rail-item / .nav-rail-group-head): 40px-Zeilen, 20px-Icons, --space-3-
   Gap, 14px/500-Labels, 11px/700-Caps-Sektionsköpfe, --ease-decelerate-Motion.
   Nur die Farbwelt ist invertiert — die Nav-Rail ist dunkel (weisse Icons),
   dieses Panel liegt auf heller Drawer-Fläche (Brand-getintete Icons).

   Self-scoped (Gate check:css-scope): alle Regeln haengen an .drawer-action-rail
   / .dar-panel / .dar-tip-popup. Shell-Bausteine (.drawer-mid-Wrap, Header-
   Ausblendung, Readonly-Freigabe) liegen in shared-drawer.css.
   ========================================================================== */

/* ── Die Leiste (collapsed default) ─────────────────────────────────────── */
.drawer-action-rail {
  flex: 0 0 52px;
  width: 52px;
  align-self: stretch;
  border-left: 1px solid var(--lod-gray-200);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) 0;
  z-index: 2; /* ueber dem Body, unter dem Panel */
}

/* Icon-Button in der Rail — 40px-Pill wie .nav-rail-item, zentriert in 52px. */
.drawer-action-rail .dar-btn,
.drawer-action-rail .dar-toggle {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  color: var(--lod-gray-500);
  background: transparent;
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background var(--duration-fast) var(--ease-soft), color var(--duration-fast) var(--ease-soft);
}
.drawer-action-rail .dar-btn:hover,
.drawer-action-rail .dar-toggle:hover {
  background: var(--lod-gray-100);
  color: var(--lod-darkblue);
}
.drawer-action-rail .dar-btn:focus-visible,
.drawer-action-rail .dar-toggle:focus-visible {
  outline: none;
  box-shadow: var(--lod-shadow-focus);
}
.drawer-action-rail .dar-btn img,
.drawer-action-rail .dar-toggle img {
  width: 20px;
  height: 20px;
  /* Fluent-Icons sind originaer dunkelblau → auf Brand-Navy tinten (crisp statt
     ausgewaschenes Grau). Recipe wie .nrt-icon img (nav-rail-tooltip.css). */
  filter: invert(13%) sepia(15%) saturate(1200%) hue-rotate(190deg) brightness(95%);
  opacity: 0.72;
  transition: opacity var(--duration-fast) var(--ease-soft);
}
.drawer-action-rail .dar-btn:hover img,
.drawer-action-rail .dar-toggle:hover img { opacity: 1; }
.drawer-action-rail .dar-btn.is-danger:hover {
  background: var(--status-danger-soft, color-mix(in srgb, var(--lod-danger) 8%, transparent));
  color: var(--lod-danger);
}
.drawer-action-rail .dar-btn.is-danger:hover img {
  filter: none;
  opacity: 0.9;
}

/* Der Chevron-Toggle sitzt oben, optisch als Kopf der Rail. */
.drawer-action-rail .dar-toggle img { opacity: 0.85; }

/* Gruppen-Trenner zwischen Aktions-Clustern (analog .nav-rail-group-Divider). */
.drawer-action-rail .dar-sep {
  width: 22px;
  height: 1px;
  background: var(--lod-gray-200);
  margin: var(--space-1) 0;
  flex-shrink: 0;
}

/* ── Das ausgeklappte Panel (In-Drawer-Overlay, kein Reflow) ────────────── */
.dar-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 280px;
  /* Kappt das Overlay auf 88% der Drawer-Breite bzw. 92vw (schmale Drawer /
     Viewport-Schutz). min() macht die Deckelung viewport-relativ. */
  max-width: min(88%, 92vw);
  background: var(--color-surface);
  border-left: 1px solid var(--lod-gray-200);
  box-shadow: -18px 0 42px -14px color-mix(in srgb, var(--lod-darkblue-900) 28%, transparent);
  z-index: 4;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: dar-panel-in var(--duration-spring) var(--ease-decelerate);
}
@keyframes dar-panel-in {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.dar-panel.is-closing {
  animation: dar-panel-out var(--motion-exit) var(--ease-exit) forwards;
}
@keyframes dar-panel-out {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(20px); opacity: 0; }
}

.dar-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2-5) var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--lod-gray-100);
  flex-shrink: 0;
}
.dar-panel-title {
  font-family: var(--lod-font-display);
  font-size: var(--font-size-base);
  font-weight: var(--fw-bold);
  color: var(--lod-darkblue-700);
  letter-spacing: 0.01em;
}
.dar-panel-close {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  color: var(--lod-gray-500);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--duration-fast) var(--ease-soft), color var(--duration-fast) var(--ease-soft);
}
.dar-panel-close:hover { background: var(--lod-gray-100); color: var(--lod-darkblue); }
.dar-panel-close:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); }
.dar-panel-close img { width: 18px; height: 18px; opacity: 0.8; }

.dar-panel-scroll {
  overflow-y: auto;
  padding: var(--space-2);
  flex: 1;
  min-height: 0;
}

/* Sektions-Kopf — Vokabular von .nav-rail-group-head (11px/700 Caps, muted).
   Trennlinie oben trennt Gruppen (entfaellt beim ersten Block). */
.dar-group-label {
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps, 0.08em);
  color: var(--lod-gray-500);
}
.dar-group-label + * { margin-top: 0; }
.dar-group-label:not(:first-child) {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--lod-gray-100);
}

/* Panel-Eintrag — Icon-CHIP + EINZEILIGER Titel (wie Nav-Rail aufgeklappt).
   Bewusst KEINE Beschreibung im Panel: der 34px-Chip bestimmt so jede Zeilen-
   höhe → alle Zeilen exakt gleich hoch, ruhiger Rhythmus. Die Beschreibung lebt
   in der Hover-Karte der collapsed Rail. */
.dar-panel-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 44px;
  padding: var(--space-1-5) var(--space-2);
  border-radius: var(--radius-md);
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  transition: background var(--duration-fast) var(--ease-soft);
}
.dar-panel-item:hover { background: var(--lod-gray-50); }
.dar-panel-item:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); }

/* Icon-Chip — gerundeter Container in Brand-Optik (wie .nrt-icon der Hover-Karte). */
.dar-panel-item .dar-item-ico {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  display: grid;
  place-items: center;
  transition: background var(--duration-fast) var(--ease-soft);
}
.dar-panel-item .dar-item-ico img {
  width: 19px;
  height: 19px;
  filter: invert(13%) sepia(15%) saturate(1200%) hue-rotate(190deg) brightness(95%);
  opacity: 0.85;
}
.dar-panel-item:hover .dar-item-ico {
  background: color-mix(in srgb, var(--lod-darkblue) 9%, var(--color-bg-subtle));
}

/* Titel: eine Zeile, Ellipsis bei Überlänge (Volltext in aria-label + Hover-Karte). */
.dar-panel-item .dar-item-title {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--lod-darkblue-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dar-panel-item.is-danger .dar-item-title { color: var(--lod-danger); }
.dar-panel-item.is-danger .dar-item-ico { background: var(--status-danger-soft, color-mix(in srgb, var(--lod-danger) 8%, transparent)); }
.dar-panel-item.is-danger .dar-item-ico img { filter: none; opacity: 0.85; }
.dar-panel-item.is-danger:hover { background: var(--status-danger-soft, color-mix(in srgb, var(--lod-danger) 8%, transparent)); }

/* Gestaffelter Reveal (Nav-Rail-Motion): Kopf + Items faden mit leichtem
   Slide gestaffelt ein, sobald das Panel geoeffnet wird (.dar-open am
   .drawer-mid). --dar-i (pro Element vom JS gesetzt) staffelt die Delays. */
.drawer-mid.dar-open .dar-group-label,
.drawer-mid.dar-open .dar-panel-item {
  animation: dar-item-in var(--duration-normal) var(--ease-decelerate) backwards;
  animation-delay: calc(70ms + var(--dar-i, 0) * 26ms);
}
@keyframes dar-item-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Premium-Hover-Karte auf den collapsed Rail-Icons ───────────────────── */
/* Body-appended via Popover-SSOT (wie nav-rail-tooltip). Reuse der .nrt-card-
   Bausteine, damit die Karte identisch zum linken Menue wirkt. */
.dar-tip-popup.app-popover {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-tooltip);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 0;
  overflow: hidden;
  z-index: var(--z-tooltip);
  animation: lod-fade-slide-in var(--duration-quick) var(--ease-out-soft);
  pointer-events: auto;
}

/* Reduced-Motion: keine Reveal-/Slide-Animationen. */
@media (prefers-reduced-motion: reduce) {
  .dar-panel,
  .drawer-mid.dar-open .dar-group-label,
  .drawer-mid.dar-open .dar-panel-item,
  .dar-tip-popup.app-popover { animation: none; }
}