/* ==========================================================================
 empty-state.css — Empty-State-V2 (Leer/Fehler/Berechtigungs-Platzhalter)

 Konsument: web/js/components/lists/empty-state.js (window.EmptyState)

 Varianten: .empty-state--error/--locked/--empty/--inline.
 Compat-Aliases: .mt-empty/-error, .gast-empty/-stamm-empty,
 .wissen-empty, .anfr-empty-state, .app-board-empty/-error,
 .app-phase-picker-empty/-error — geben dem Bestand den
 V2-Look ohne Markup-Aenderung. Neuer Code ruft
 EmptyState.* direkt.

 Aus web/styles/empty-state.css verschoben in
 die Mirror-Topologie zu web/js/components/lists/.
 ========================================================================== */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3, 12px);
  padding: var(--space-8, 32px) var(--space-4, 16px);
  text-align: center;
  color: var(--color-text-muted);
}

.empty-state .es-ico {
  opacity: 0.5;
  margin-bottom: var(--space-1, 4px);
}
.empty-state .es-ico .ui-ico img {
  width: 40px;
  height: 40px;
}

.empty-state .es-title {
  font-size: var(--fs-body, 14px);
  font-weight: var(--fw-semibold, 600);
  color: var(--color-text-primary);
  line-height: 1.4;
  max-width: 480px;
}
.empty-state .es-title strong {
  font-weight: var(--fw-semibold, 600);
}

.empty-state .es-msg {
  font-size: var(--fs-caption, 13px);
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 420px;
}

.empty-state .es-actions {
  display: flex;
  gap: var(--space-2, 8px);
  margin-top: var(--space-2, 8px);
}

/* ── Variant: error — etwas mehr visuelle Dringlichkeit ───────────────────── */
.empty-state--error .es-title {
  color: var(--status-ueberfaellig);
}

/* ── Variant: locked — Lock-Icon-Akzent in Brand-Blau, sonst neutral ──────── */
.empty-state--locked .es-ico {
  opacity: 0.6;
}

/* ── Variant: empty — kompakter wenn ohne Icon ────────────────────────────── */
.empty-state--empty:not(:has(.es-ico)) {
  padding: var(--space-6, 24px) var(--space-4, 16px);
}

/* ── Inline-Variant fuer kleine Container (Cards, Drawer-Listen) ──────────── */
.empty-state--inline {
  padding: var(--space-4, 16px) var(--space-3, 12px);
  gap: var(--space-2, 8px);
}
.empty-state--inline .es-ico .ui-ico img { width: 24px; height: 24px; }
.empty-state--inline .es-title { font-size: var(--fs-caption, 13px); }
.empty-state--inline .es-msg { font-size: var(--font-size-xs, 12px); }

/* ── Compat-Aliases ───────────────────────────────────────────────────────────
   Damit Bestand (mt-empty/mt-error/gast-empty/wissen-empty/anfr-empty-state/
   app-board-empty/app-board-error/app-phase-picker-empty/error) ohne Touch den
   V2-Look bekommt. Neuer Code geht ueber EmptyState.* — diese Aliases
   stehen explizit als "noch zu migrieren" markiert. Deshalb liegen die
   Original-CSS-Bloecke der Klassen in base.css/components.css/wissen.css/
   anfragen.css auf den jeweiligen Files; die Aliases hier ueberschreiben
   nur die Optik, nicht das Markup.
   ──────────────────────────────────────────────────────────────────────────── */
.mt-empty,
.mt-error,
.gast-empty,
.wissen-empty,
.anfr-empty-state,
.gast-stamm-empty,
.app-board-empty,
.app-board-error,
.app-phase-picker-empty,
.app-phase-picker-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  padding: var(--space-6, 24px) var(--space-4, 16px);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--fs-caption, 13px);
  line-height: 1.5;
}
.mt-error,
.app-board-error,
.app-phase-picker-error {
  color: var(--status-ueberfaellig);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 599px) {
  .empty-state { padding: var(--space-6, 24px) var(--space-3, 12px); }
  .empty-state .es-title { max-width: 280px; font-size: var(--fs-caption, 13px); }
  .empty-state .es-msg { max-width: 280px; }
}
@media (min-width: 600px) and (max-width: 999px) {
  .empty-state { padding: var(--space-6, 24px) var(--space-4, 16px); }
  .empty-state .es-title { max-width: 360px; }
  .empty-state .es-msg { max-width: 360px; }
}
@media (min-width: 1000px) and (max-width: 1399px) {
  .empty-state { padding: var(--space-7, 28px) var(--space-4, 16px); }
  .empty-state .es-title { max-width: 400px; }
  .empty-state .es-msg { max-width: 400px; }
}