/* ==========================================================================
   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;
}

/* Busy-Zustand auf dem Rail-Knopf. Der Spinner der .btn-loading-SSOT (base.css)
   blendet nur `.ui-ico` aus — die Rail traegt ihr <img> ohne diesen Wrapper, das
   Icon stuende sonst unter dem Spinner. Der Rail-Knopf ist der Stellvertreter
   fuer das im Rail-Modus ausgeblendete Header-Original (siehe
   LoD.registerStandIns in utils/confirm.js). */
.drawer-action-rail .dar-btn.btn-loading img { visibility: hidden; }
.dar-panel .dar-panel-item.btn-loading .dar-item-ico { visibility: hidden; }

/* 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.

   Praefix `.dar-panel` ist Pflicht (0,2,0): der globale Reset
   `.app-scope button { border:none; background:none; padding:0 }` (0,1,1) schlaegt
   sonst das `padding` dieser Regel. Folge (gemessen 28.07. im Vision-Tenant-Drawer):
   `padding: 0` statt 6/8 px — der Icon-Chip klebte am Panel-Rand, nur die 9 px
   Panel-Polsterung standen noch zwischen Kante und Inhalt. `min-height` ueberlebte,
   deshalb blieb die Zeilenhoehe richtig und der Fehler unauffaellig. */
.dar-panel .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;
}

/* Zeile mit Untermenü (data-action-menu): der Chevron zeigt in die Richtung, in
   die das Untermenü aufgeht — nach LINKS, weil das Panel am rechten Drawer-Rand
   klebt. Ohne diese Ankündigung liest sich die Zeile wie eine Sofort-Aktion, und
   das aufgehende Menü wirkt wie ein Fehler. */
.dar-panel-item .dar-item-chev {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
}
.dar-panel-item .dar-item-chev img {
  width: 16px;
  height: 16px;
  filter: invert(13%) sepia(15%) saturate(1200%) hue-rotate(190deg) brightness(95%);
  opacity: 0.4;
  transition: opacity var(--duration-fast) var(--ease-soft), transform var(--duration-fast) var(--ease-soft);
}
.dar-panel-item:hover .dar-item-chev img,
.dar-panel-item.is-open .dar-item-chev img {
  opacity: 0.9;
  transform: translateX(-2px);
}

/* Solange das Untermenü offen ist, bleibt sichtbar, WOHER es kommt (der Anker
   liegt links daneben). Deutlicher getönt als :hover — die Maus ist längst im
   Menü, die Zeile muss ohne Zeiger gehalten aussehen. */
.dar-panel .dar-panel-item.is-open {
  background: color-mix(in srgb, var(--lod-darkblue) 7%, transparent);
}
.dar-panel-item.is-open .dar-item-ico {
  background: color-mix(in srgb, var(--lod-darkblue) 9%, var(--color-bg-subtle));
}
.dar-panel-item.is-open .dar-item-title { color: var(--lod-darkblue); }

.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 — die Panel-Optik
   selbst kommt aus `.app-popover--karte` (popover-menu.css), gesetzt in
   drawer-action-rail.js. Hier bleibt nichts Panel-Eigenes uebrig. */

/* Nach einem Header-Rebuild (refreshHeader nach jedem Speichern/Statuswechsel)
   wird ein offenes Panel wiederhergestellt — dann NICHT erneut auffahren: das
   Panel stand aus Sicht des Nutzers die ganze Zeit da. */
/* :not(.is-closing), sonst schluckt diese Regel die Exit-Animation (gleiche
   Spezifitaet, spaeter in der Datei). */
.dar-panel.is-restored:not(.is-closing) { animation: none; }
.drawer-mid.dar-open .dar-panel.is-restored .dar-group-label,
.drawer-mid.dar-open .dar-panel.is-restored .dar-panel-item { animation: none; }

/* Reduced-Motion: keine Reveal-/Slide-Animationen. */
/* Reduced-Motion fuer die Hover-Karte selbst deckt `.app-popover--karte` ab
   (popover-menu.css) — hier nur noch die Rail-eigenen Reveal-Animationen. */
@media (prefers-reduced-motion: reduce) {
  .dar-panel,
  .drawer-mid.dar-open .dar-group-label,
  .drawer-mid.dar-open .dar-panel-item { animation: none; }
}