/* Ergänzungen zu Unfold: Startseite und Berichte. Farben über Unfold-Variablen, damit Hell/Dunkel passt. */

.erp-stack { display: flex; flex-direction: column; gap: 24px; }
.erp-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.erp-grid-2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.erp-h2 { font-size: 15px; font-weight: 600; color: var(--color-base-900); margin: 0 0 12px; }
.dark .erp-h2 { color: var(--color-base-100); }

/* Kennzahlen */
.erp-kpi { display: flex; align-items: center; gap: 16px; }
.erp-kpi-icon {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--color-primary-50); color: var(--color-primary-700);
}
.dark .erp-kpi-icon { background: color-mix(in oklab, var(--color-primary-500) 20%, transparent); color: var(--color-primary-300); }
.erp-kpi-wert { font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--color-base-900); font-variant-numeric: tabular-nums; }
.dark .erp-kpi-wert { color: var(--color-base-100); }
.erp-kpi-titel { font-size: 13px; color: var(--color-base-500); }
.erp-kpi-warn .erp-kpi-icon { background: var(--color-orange-100); color: var(--color-orange-700); }
.dark .erp-kpi-warn .erp-kpi-icon { background: color-mix(in oklab, var(--color-orange-500) 20%, transparent); color: var(--color-orange-300); }

/* Monatskarten je Standort */
.erp-monat { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
             padding: 12px 0; border-top: 1px solid var(--color-base-200); }
.erp-monat:first-child { border-top: 0; padding-top: 0; }
.dark .erp-monat { border-color: var(--color-base-800); }
.erp-monat-name { font-weight: 600; color: var(--color-base-900); }
.dark .erp-monat-name { color: var(--color-base-100); }
.erp-monat-anzahl { font-size: 13px; color: var(--color-base-500); }
.erp-aktionen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Buttons */
.erp-btn {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 500;
  border: 1px solid var(--color-base-200); color: var(--color-base-700); background: #fff;
  transition: background .15s, border-color .15s;
}
.erp-btn:hover { border-color: var(--color-primary-600); color: var(--color-primary-700); }
.erp-btn .material-symbols-outlined { font-size: 18px; }
.erp-btn-primary { background: var(--color-primary-600); border-color: var(--color-primary-600); color: #fff; }
.erp-btn-primary:hover { background: var(--color-primary-700); border-color: var(--color-primary-700); color: #fff; }
.dark .erp-btn { background: var(--color-base-900); border-color: var(--color-base-700); color: var(--color-base-200); }
.dark .erp-btn-primary { background: var(--color-primary-600); border-color: var(--color-primary-600); color: #fff; }

/* Schnellzugriff */
.erp-schnell { display: flex; align-items: center; gap: 12px; font-weight: 500; color: var(--color-base-800); }
.dark .erp-schnell { color: var(--color-base-100); }
.erp-schnell .material-symbols-outlined { color: var(--color-primary-600); }

/* Berichte: Monat x Standort */
.erp-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.erp-tabelle th, .erp-tabelle td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--color-base-200); vertical-align: middle; }
.dark .erp-tabelle th, .dark .erp-tabelle td { border-color: var(--color-base-800); }
.erp-tabelle th { font-weight: 600; color: var(--color-base-900); background: var(--color-base-50); }
.dark .erp-tabelle th { color: var(--color-base-100); background: color-mix(in oklab, var(--color-base-50) 3%, transparent); }
.erp-tabelle tr.erp-aktuell td { background: var(--color-primary-50); }
.dark .erp-tabelle tr.erp-aktuell td { background: color-mix(in oklab, var(--color-primary-500) 12%, transparent); }
.erp-badge { display: inline-block; min-width: 24px; padding: 1px 8px; border-radius: 999px; text-align: center;
             font-size: 12px; font-weight: 600; background: var(--color-base-100); color: var(--color-base-700); }
.erp-badge-voll { background: var(--color-primary-100); color: var(--color-primary-800); }
.dark .erp-badge { background: var(--color-base-800); color: var(--color-base-200); }
.erp-scroll { overflow-x: auto; }
.erp-hinweis { color: var(--color-base-500); font-size: 13px; margin: 0 0 16px; }

/* Handy: Kennzahlen zweispaltig, Berichtstabelle als Karten untereinander */
@media (max-width: 700px) {
  .erp-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .erp-kpi { flex-direction: column; align-items: flex-start; gap: 8px; }
  .erp-kpi-wert { font-size: 22px; }
  .erp-tabelle thead { display: none; }
  .erp-tabelle, .erp-tabelle tbody, .erp-tabelle tr, .erp-tabelle td { display: block; width: 100%; }
  .erp-tabelle tr { border-bottom: 1px solid var(--color-base-200); padding: 8px 0; }
  .erp-tabelle td { border: 0; padding: 4px 12px; }
  .erp-tabelle td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; color: var(--color-base-500); margin-bottom: 4px; }
}

/* Formulare: Beschriftung über dem Feld, Felder einer Zeile (Tupel in fieldsets) nebeneinander */
@media (min-width: 1024px) {
  #content-main .field-row:has(> .field-line ~ .field-line) { display: flex; }
  #content-main .field-row > .field-line { flex: 1 1 0; min-width: 0; flex-direction: column !important;
                                            align-items: stretch !important; gap: 6px; }
  #content-main .field-row > .field-line > div:first-child { width: auto !important; min-width: 0 !important;
                                                              height: auto !important; line-height: 1.4 !important; }
  #content-main .field-row > .field-line + .field-line { border-left: 1px dashed var(--color-base-200); }
  .dark #content-main .field-row > .field-line + .field-line { border-left-color: var(--color-base-800); }
}