/* ══════════════════════════════════════════════════════════════════════════
   LoD.RefreshBanner — „Es gibt Neues"-Pille ueber einer Liste
   ──────────────────────────────────────────────────────────────────────────
   Erscheint NUR bei Fremdaenderungen (Poll in SectionRefresh). Eigene Aktionen
   aktualisieren die Liste direkt und ohne Pille.

   Layout-neutral: absolut positioniert, damit das Ein-/Ausblenden die Liste
   darunter nicht verschiebt. Der Host bekommt die Positionierungs-Ebene ueber
   .lod-refresh-banner-host — gesetzt vom JS, aber nur wenn er static war.

   Self-scoped (web/CLAUDE.md § Modul-CSS): alle Regeln haengen an der eigenen
   Wurzelklasse .lod-refresh-banner, an keinem Section-/Shell-Vorfahren.
   Montage + Verhalten: web/js/ui/refresh-banner.js
   ══════════════════════════════════════════════════════════════════════════ */

.lod-refresh-banner-host { position: relative; }

.lod-refresh-banner {
  position: absolute;
  top: var(--space-3);
  left: 50%;
  /* Lokaler z-index innerhalb des Section-Containers — bewusst KEIN globaler
     Token (tokens.css § z-index: Sticky-Elemente innerhalb eines Tab-Containers
     nutzen die lokale Skala 1/2/5/10/80). 10 liegt ueber Listen-Sticky-Koepfen (5),
     unter der Section-Toolbar (80). */
  z-index: 10;

  display: inline-flex;
  /* Die Pille traegt selbst `app-scope` (refresh-banner.js: sonst greift der
     Button-Reset nicht, wenn der Host ausserhalb eines app-scope-Baums haengt).
     Damit erbt sie aber auch die Layout-Wurzel `.app-scope { flex-direction:
     column; width:100%; height:100% }` — ohne diese drei Zeilen wird aus der
     Pille ein Kasten ueber die volle Hostbreite und -hoehe mit untereinander
     gestapeltem Icon/Text/Knopf. Gleiche Neutralisierung wie bei .pauf-lkp &
     Co. `display` gewinnt ohnehin ueber die Ladereihenfolge, die drei hier
     nicht — .app-scope deklariert sie, diese Regel bisher nicht. */
  flex-direction: row;
  width: auto;
  height: auto;
  align-items: center;
  gap: var(--space-2);
  max-width: calc(100% - var(--space-8, 32px));
  padding: var(--space-1-5) var(--space-1-5) var(--space-1-5) var(--space-3);

  border: 1px solid var(--color-border);
  border-radius: var(--radius-circular);
  background: var(--color-surface);
  box-shadow: var(--shadow-16);

  /* Startzustand: leicht angehoben + unsichtbar. translateX(-50%) muss in JEDEM
     transform-Zustand mitlaufen, sonst springt die Pille beim Einfahren aus der
     Mitte nach rechts. */
  opacity: 0;
  transform: translateX(-50%) translateY(-8px);
  transition:
    opacity   var(--duration-normal) var(--ease-enter),
    transform var(--duration-normal) var(--ease-enter);
}

.lod-refresh-banner.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.lod-refresh-banner-ico {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--brand-default);
}
.lod-refresh-banner-ico .ui-ico img { width: 16px; height: 16px; }

.lod-refresh-banner-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Der „Aktualisieren"-Knopf ist ein .btn-primary-sm aus primitives/button.css —
   kein eigener Style. Hier nur die Pillen-Rundung, damit er in die runde Huelle
   passt, und der Busy-Zustand waehrend des Nachladens. Beides mit der eigenen
   Modul-Wurzelklasse praefixt (nicht mit .app-scope), sonst gewinnt der
   Ein-Klassen-Reset. Siehe web/CLAUDE.md § .app-scope. */
.lod-refresh-banner .btn-primary-sm {
  flex: 0 0 auto;
  border-radius: var(--radius-circular);
}
.lod-refresh-banner .btn-primary-sm.is-busy {
  opacity: 0.6;
  cursor: default;
}

.lod-refresh-banner .lod-refresh-banner-x {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: var(--radius-circular);
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--duration-quick) var(--ease-standard);
}
.lod-refresh-banner .lod-refresh-banner-x:hover { background: var(--color-bg-hover); }
.lod-refresh-banner .lod-refresh-banner-x .ui-ico img { width: 14px; height: 14px; }

/* Erfolgs-Ton: nach einem Fremd-Abschluss (z.B. Freigabe durch Kollegen).
   Nur der Icon-Akzent wechselt — die Pille bleibt neutral, damit sie nicht
   wie eine Erfolgsmeldung fuer eine EIGENE Aktion gelesen wird. */
.lod-refresh-banner.is-success .lod-refresh-banner-ico { color: var(--status-success-fg); }

/* ── Tablet (600–999px) ─────────────────────────────────────────────────── */
@media (max-width: 999px) {
  .lod-refresh-banner {
    max-width: calc(100% - var(--space-4));
    padding-left: var(--space-2-5);
  }
}

/* ── Mobile (<600px) ────────────────────────────────────────────────────────
   Volle Breite statt zentrierter Pille: bei 360px CSS-Breite bleibt von einer
   mittigen Pille nach Icon + Button kaum Text uebrig. Randlos angedockt liest
   sich der Hinweis wie eine Systemzeile — und die Auslassungspunkte fallen weg. */
@media (max-width: 599px) {
  .lod-refresh-banner {
    left: var(--space-2);
    right: var(--space-2);
    max-width: none;
    transform: translateY(-8px);
    border-radius: var(--radius-lg);
    justify-content: space-between;
  }
  .lod-refresh-banner.is-visible { transform: translateY(0); }
  .lod-refresh-banner-text { white-space: normal; }
}

/* prefers-reduced-motion: base.css dreht die Dauern global herunter. Hier
   reicht das — die Pille erscheint dann hart statt gleitend, bleibt aber
   vollstaendig lesbar und bedienbar. Kein Sonderfall noetig. */