/*
 wlkns-dev-standards
 UI Components – Tables, Lists, Alerts & Toasts
 Version: v1.0

 Zweck:
 Erweiterung der Component-Bibliothek für typische Admin-UIs.
 Fokus: Tabellen, Listen, Alerts, Toasts.
*/

/* =========================
   Tables
   ========================= */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

thead {
  background: var(--color-bg);
}

thead th {
  text-align: left;
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-weight: 500;
}

tbody td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

tbody tr:hover {
  background: var(--color-bg);
}

/* =========================
   Lists
   ========================= */

.list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.list-item {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.list-item-title {
  font-weight: 500;
}

.list-item-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* =========================
   Alerts
   ========================= */

.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  border: 1px solid transparent;
}

.alert.success {
  background: rgba(22, 163, 74, 0.1);
  border-color: var(--color-success);
  color: var(--color-success);
}

.alert.warning {
  background: rgba(217, 119, 6, 0.1);
  border-color: var(--color-warning);
  color: var(--color-warning);
}

.alert.error {
  background: rgba(220, 38, 38, 0.1);
  border-color: var(--color-error);
  color: var(--color-error);
}

/* =========================
   Toasts
   ========================= */

.toast {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  min-width: 260px;

  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);

  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.toast.success {
  border-left: 4px solid var(--color-success);
}

.toast.warning {
  border-left: 4px solid var(--color-warning);
}

.toast.error {
  border-left: 4px solid var(--color-error);
}