/* ============================================================
   LIBRARY-TEAM-STATUS — Status-Pill (Toast) und Responsive Layout.
   ============================================================ */


/* ── Status-Pill (Toast unten rechts) ──────────────────────────── */
.lib-team-status {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 14px 10px 14px;
  border-radius: 14px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border);
  box-shadow:
    0 18px 40px rgba(0,0,0,.42),
    0 4px 14px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.04);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.005em;
  pointer-events: auto;
  animation: libStatusIn .28s cubic-bezier(.2,.85,.25,1.05);
  transition: opacity .25s ease, transform .25s ease;
  will-change: transform, opacity;
  max-width: min(420px, calc(100vw - 56px));
}
.lib-team-status.hidden { display: none; }
.lib-team-status.is-leaving {
  animation: libStatusOut .22s cubic-bezier(.4,.0,1,1) forwards;
}
.lib-team-status .lib-team-status-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}
.lib-team-status .lib-team-status-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lib-team-status .lib-team-status-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 4px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.lib-team-status .lib-team-status-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Status-Varianten */
.lib-team-status.is-saving {
  border-color: rgba(249,115,22,.4);
  background: linear-gradient(180deg, rgba(249,115,22,.08), rgba(249,115,22,.02)), var(--bg-elevated);
}
.lib-team-status.is-saving .lib-team-status-icon {
  background: rgba(249,115,22,.14);
  color: #fb923c;
}
.lib-team-status.is-saving .lib-team-status-spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(249,115,22,.25);
  border-top-color: #fb923c;
  border-radius: 50%;
  animation: libStatusSpin .8s linear infinite;
}

.lib-team-status.is-success {
  border-color: rgba(34,197,94,.4);
  background: linear-gradient(180deg, rgba(34,197,94,.10), rgba(34,197,94,.02)), var(--bg-elevated);
  color: var(--text-primary);
}
.lib-team-status.is-success .lib-team-status-icon {
  background: rgba(34,197,94,.18);
  color: #4ade80;
}

.lib-team-status.is-error {
  border-color: rgba(239,68,68,.4);
  background: linear-gradient(180deg, rgba(239,68,68,.12), rgba(239,68,68,.02)), var(--bg-elevated);
  color: var(--text-primary);
}
.lib-team-status.is-error .lib-team-status-icon {
  background: rgba(239,68,68,.18);
  color: #f87171;
}

@keyframes libStatusIn {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes libStatusOut {
  from { opacity: 1; transform: translateY(0)    scale(1); }
  to   { opacity: 0; transform: translateY(8px)  scale(.97); }
}
@keyframes libStatusSpin {
  to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
  .lib-team-status {
    right: 12px;
    left: 12px;
    bottom: 12px;
    max-width: none;
    justify-content: flex-start;
  }
}

@media (max-width: 1280px) {
  .lib-team-workspace {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .lib-team-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .lib-team-hero,
  .lib-team-section-head,
  .lib-team-pb-head,
  .lib-team-brand-card {
    flex-direction: column;
  }

  .lib-team-overview-grid,
  .lib-team-workspace,
  .lib-team-add-row {
    grid-template-columns: 1fr;
  }

  .lib-team-member-row {
    grid-template-columns: 1fr;
  }

  .lib-team-topbar {
    width: 100%;
    justify-content: stretch;
  }

  .lib-team-topbar > * {
    flex: 1 1 auto;
  }
}