/* ============================================
   LAGER-MODUL — CSS
   Phase 26 — Inventory Management
   ============================================ */

/* Seiten-Layout */
.lager-page {
  padding: var(--space-xl);
  max-width: 1400px;
}

.lager-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-xl);
  gap: var(--space-md);
}

.lager-page-header h1 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

/* Loading / Error */
.lager-loading,
.lager-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-2xl);
  color: var(--color-text-muted);
  font-size: var(--font-size-lg);
}

.lager-error { color: var(--color-error); }

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* KPI-Karten */
.lager-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

@media (max-width: 1100px) { .lager-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .lager-kpi-grid { grid-template-columns: 1fr; } }

.lager-kpi {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
}

.lager-kpi--warning { border-left: 3px solid var(--color-warning); }

.lager-kpi__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}

.lager-kpi__icon--primary { background: color-mix(in srgb, var(--color-primary) 12%, transparent); color: var(--color-primary); }
.lager-kpi__icon--success { background: color-mix(in srgb, var(--color-success) 12%, transparent); color: var(--color-success); }
.lager-kpi__icon--info    { background: color-mix(in srgb, var(--color-info) 12%, transparent);    color: var(--color-info); }
.lager-kpi__icon--warning { background: color-mix(in srgb, var(--color-warning) 12%, transparent); color: var(--color-warning); }

.lager-kpi__value {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}

.lager-kpi__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Dashboard Grid */
.lager-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

@media (max-width: 900px) { .lager-dashboard-grid { grid-template-columns: 1fr; } }

/* Karten-Header */
.lager-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

.lager-card-header h3 {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

/* Tabelle */
.lager-table-wrap { overflow-x: auto; }

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

.lager-table th {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  border-bottom: 2px solid var(--color-border);
  white-space: nowrap;
}

.lager-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  color: var(--color-text);
}

.lager-table tbody tr:hover { background: color-mix(in srgb, var(--color-primary) 4%, transparent); }
.lager-table tbody tr:last-child td { border-bottom: none; }
.lager-table--compact td, .lager-table--compact th { padding: var(--space-xs) var(--space-md); }
.lager-table-row--warning td { background: color-mix(in srgb, var(--color-warning) 6%, transparent); }

.lager-table-meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

/* SKU Badge */
.lager-sku {
  font-family: monospace;
  font-size: var(--font-size-xs);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--color-primary);
  padding: 2px 6px;
  border-radius: var(--radius-md);
}

/* Kategorie-Punkt */
.lager-kat-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 4px;
}

/* Badges */
.lager-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: 600;
  white-space: nowrap;
}

.lager-badge--success { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); }
.lager-badge--error   { background: color-mix(in srgb, var(--color-error) 15%, transparent);   color: var(--color-error); }
.lager-badge--warning { background: color-mix(in srgb, var(--color-warning) 15%, transparent); color: var(--color-warning); }
.lager-badge--info    { background: color-mix(in srgb, var(--color-info) 15%, transparent);    color: var(--color-info); }

/* Filter-Zeile */
.lager-filter-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* Bewegungs-Liste (Dashboard) */
.lager-bewegung-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.lager-bewegung-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.lager-bewegung-item:last-child { border-bottom: none; }

.lager-bewegung-item__left {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.lager-bewegung-item__name {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
}

.lager-bewegung-item__meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.lager-bewegung-item__menge {
  font-weight: 700;
  font-size: var(--font-size-base);
}

.lager-bewegung-item__menge--pos { color: var(--color-success); }
.lager-bewegung-item__menge--neg { color: var(--color-error); }

/* Kategorie-Grid (Dashboard) */
.lager-kategorie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-md);
}

.lager-kategorie-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.lager-kategorie-item__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}

.lager-kategorie-item__name {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.lager-kategorie-item__meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Leere Zustände */
.lager-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
  color: var(--color-text-muted);
  gap: var(--space-md);
  text-align: center;
}

.lager-empty p { margin: 0; font-size: var(--font-size-base); }

.lager-empty-small {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* Karten-Grid (Lieferanten) */
.lager-karten-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md);
}

.lager-lieferant-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.lager-lieferant-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.lager-lieferant-card__name {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-text);
}

.lager-lieferant-card__kontakt {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.lager-lieferant-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.lager-lieferant-card__body > div {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.lager-lieferant-card__body a { color: var(--color-secondary); text-decoration: none; }
.lager-lieferant-card__body a:hover { text-decoration: underline; }

.lager-lieferant-card__footer {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-sm);
}

/* Kategorien-Zeile (Einstellungen) */
.lager-kat-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.lager-kat-row:last-child { border-bottom: none; }

/* Toast */
.lager-toast {
  position: fixed;
  bottom: var(--space-xl);
  right: var(--space-xl);
  z-index: 9999;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: 500;
  box-shadow: var(--shadow-md);
  animation: lager-toast-in 0.2s ease;
}

.lager-toast--success { background: var(--color-success); color: white; }
.lager-toast--error   { background: var(--color-error);   color: white; }

@keyframes lager-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}