/* kpi-legend.css — Kennzahl-Legende (KpiLegend, js/domain/dashboard/kpi-legend.js).
 * Premium-Info-Popover „Was bedeuten diese Kennzahlen?" — geteilt von Team-
 * Scorecard und Mein-Tag-KPI-Strip. Self-scoped: .kpi-legend (Karte) und
 * .kpi-legend-popup (Panel) setzt das Modul-JS selbst; das Panel haengt via
 * Popover-SSOT am body, daher sind die Selektoren NICHT .app-scope-gescoped. */

/* Panel: weiche Karte statt Default-Popover — Breite hier (viewport-sicher),
 * nicht per JS-maxWidth, damit schmale Viewports nie rechts abschneiden. */
.kpi-legend-popup.app-popover {
  width: min(400px, calc(100vw - 16px));
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-tooltip);
  z-index: var(--z-tooltip);
  animation: lod-fade-slide-in var(--duration-quick) var(--ease-out-soft);
}

/* Karte als Spalte mit fixem Kopf — bei langen Legenden scrollt nur der Body. */
.kpi-legend {
  display: flex;
  flex-direction: column;
  max-height: min(560px, 72vh);
}

.kpi-legend-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}
.kpi-legend-head-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  background: var(--tone-info-soft);
}
.kpi-legend-title {
  font-size: var(--font-size-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

.kpi-legend-body {
  overflow-y: auto;
  padding: var(--space-1) 0 var(--space-2);
}

.kpi-legend-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2-5) var(--space-4);
}
.kpi-legend-row + .kpi-legend-row { border-top: 1px solid var(--color-border-light); }
.kpi-legend-label {
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  color: var(--lod-darkblue);
}
.kpi-legend-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* Ton-Pillen unter dem Text (z.B. Ampel-Schwellen der Score-Erklaerung). */
.kpi-legend-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5);
  margin-top: var(--space-1);
}
.kpi-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
}
.kpi-legend-chip[data-tone="neutral"] { background: var(--lod-gray-100); color: var(--lod-gray-700); }
.kpi-legend-chip[data-tone="success"] { background: var(--tone-success-soft); color: var(--tone-success-text); }
.kpi-legend-chip[data-tone="warning"] { background: var(--tone-warn-soft); color: var(--tone-warn-text); }
.kpi-legend-chip[data-tone="danger"]  { background: var(--tone-danger-soft); color: var(--tone-danger-text); }
.kpi-legend-chip-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-circular);
  background: currentColor;
}

/* Notebook/Tablet: etwas weniger Hoehe, damit das Panel nie am Toolbar-Trigger klebt. */
@media (max-width: 1399px) {
  .kpi-legend { max-height: min(520px, 68vh); }
}
@media (max-width: 999px) {
  .kpi-legend { max-height: 64vh; }
}
/* Mobile: volle Breite (minus Rand), kompaktere Innenabstaende. */
@media (max-width: 599px) {
  .kpi-legend-popup.app-popover { width: calc(100vw - 16px); }
  .kpi-legend { max-height: 60vh; }
  .kpi-legend-head { padding: var(--space-2-5) var(--space-3); }
  .kpi-legend-row { padding: var(--space-2) var(--space-3); }
}