/* genehmigungen-badge.css — "Zu genehmigen"-Topbar-Dropdown (Rows).

   Das Panel selbst nutzt die gemeinsame .notif-dropdown-Basis
   (topbar-dropdowns.css). Hier nur die Antrags-Zeilen im
   #genehmigungen-dropdown-list. Konsument: web/js/ui/genehmigungen-badge.js.

   Un-scoped (Topbar liegt nicht in .app-scope) → die Aktions-Buttons nutzen die
   GLOBALEN base.css-Klassen (.btn .btn-primary/.btn-secondary .btn-sm), der
   Typ-Tag die lokale .gen-item-tag. */

.gen-list {
  display: flex;
  flex-direction: column;
}

.gen-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}
.gen-item:last-child { border-bottom: none; }

.gen-item-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2-5);
  min-width: 0;
}

.gen-item-avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.gen-item-nameblock {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: var(--radius-sm);
}
/* Drilldown-Affordance nur, wenn die Akte auch geoeffnet werden darf
   (data-gen-akte gesetzt → --drill vom JS ergaenzt). */
.gen-item-nameblock--drill { cursor: pointer; }
.gen-item-nameblock--drill:hover .gen-item-name { color: var(--brand-default); }
.gen-item-nameblock--drill:focus-visible {
  outline: 2px solid var(--lod-turquoise);
  outline-offset: 2px;
}

.gen-item-name {
  font-weight: var(--fw-semibold);
  color: var(--lod-fg-1);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  line-height: 1.25;
}

.gen-item-meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.gen-item-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Typ-/Storno-Tag — un-scoped Nachbau von .pill-tag (pill.css lebt nur unter
   .app-scope). Caps-Stil, LoD-Darkblue-Signatur; Storno als Amber-Warnung. */
.gen-item-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-px) var(--space-1-5);
  border-radius: var(--radius-xs);
  color: var(--lod-darkblue);
  background: var(--lod-darkblue-50);
  white-space: nowrap;
}
.gen-item-tag--storno {
  color: var(--lod-amber-700);
  background: var(--lod-amber-50);
}

/* Exit-Animation: entschiedene Zeile gleitet raus (LoD.motion.animateOut setzt
   .is-closing, wartet auf animationend). Accelerate-Easing = Exit-Sprache. */
.gen-item.is-closing {
  animation: genItemOut var(--duration-normal) var(--ease-exit) forwards;
  pointer-events: none;
}
@keyframes genItemOut {
  to { opacity: 0; transform: translateX(16px); max-height: 0; padding-top: 0; padding-bottom: 0; }
}

/* Deep-Link-Fokus: kurz hervorgehobene Zeile, wenn die Genehmigungs-Mail/Glocke
   ?antrag=<id> mitgibt (genehmigungen-badge.js _genHighlightItem). Spiegelt das
   Highlight-Muster von .ia-item--highlight (Mein-Bereich-Antragsliste). */
.gen-item--highlight {
  box-shadow: inset 0 0 0 2px var(--color-brand-accent);
  background: var(--color-brand-bg-subtle, rgba(0, 120, 212, 0.08));
  transition: box-shadow var(--duration-slow) var(--ease-soft), background var(--duration-slow) var(--ease-soft);
}

/* Mobile-Sheet (<600px): Buttons volle Breite als Daumen-Ziel. */
@media (max-width: 599px) {
  .gen-item-actions { width: 100%; }
  .gen-item-actions .btn { flex: 1 1 0; }
}