/* KasaFlow – App-spezifische Ergänzungen (nur Tokens aus tokens.css, keine Inline-Styles nötig) */

/* Toast: Nachrichtentext füllt die Zeile (ersetzt das Inline-Style im Styleguide-Skript) */
.lg-toast__msg { flex: 1; }

/* Ansichten */
.kf-view { display: flex; flex-direction: column; gap: var(--space-4); }
.kf-card-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.kf-chart { min-height: 240px; }
.kf-chart-box { width: 100%; }
.kf-muted { color: var(--color-text-muted); font-size: var(--text-sm); }
.kf-loading { padding: var(--space-8); text-align: center; color: var(--color-text-muted); }
.kf-bar { height: 8px; border-radius: var(--radius-full); background: var(--color-divider); overflow: hidden; }
.kf-bar__fill { height: 100%; width: 0; background: var(--color-primary); border-radius: var(--radius-full); }

/* Login */
.kf-login { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-4); }
.kf-login__card { width: min(420px, 100%); padding: var(--space-8); }
.kf-login__brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); font-weight: var(--weight-semibold); }
.kf-login__form { display: flex; flex-direction: column; gap: var(--space-4); }
.kf-login__form[hidden] { display: none; }
.kf-login__error { min-height: 1.25em; margin-top: var(--space-3); }
.kf-login__theme { position: fixed; top: var(--space-4); right: var(--space-4); }
.kf-code-input { letter-spacing: 0.4em; text-align: center; font-size: var(--text-lg); font-variant-numeric: tabular-nums; }

@media (max-width: 639px) {
  .kf-login__card { padding: var(--space-6); }
}

/* Kennzahlen: Textwerte („nicht ermittelbar“) dürfen umbrechen */
.kf-kpi__value--text { font-size: var(--text-lg); white-space: normal; }

/* Alert-Inhalt füllt die Zeile neben dem Symbol; Button erhält Abstand */
.kf-alert__content { flex: 1; min-width: 0; }
.kf-alert__content .lg-btn { margin-top: var(--space-3); }

/* Ring mit Legende */
.kf-ring { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.kf-ring__svg { max-width: 220px; }
.kf-ring__legend { justify-content: center; }

/* Hinweise */
.kf-section-title { font-size: var(--text-md); font-weight: var(--weight-semibold); margin-bottom: var(--space-3); }
.kf-signals__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.kf-signals .lg-badge { margin-right: var(--space-1); }
.kf-disclaimer { margin-top: var(--space-4); }

/* Positionstabelle */
.kf-sort {
  font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit;
  background: none; border: 0; padding: 0; cursor: pointer;
  border-radius: var(--radius-xs);
}
.kf-sort:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.kf-asset__name { font-weight: var(--weight-medium); }
.lg-table td .lg-badge { margin-top: var(--space-1); }

/* Strategie-Formular und Datenansicht */
.kf-form { display: flex; flex-direction: column; gap: var(--space-4); }
.kf-section { display: flex; flex-direction: column; gap: var(--space-3); }
.kf-section .kf-section-title { margin-bottom: 0; }
.kf-messages { display: flex; flex-direction: column; gap: var(--space-3); }
.kf-messages:empty, .kf-sum-warning:empty, .kf-status:empty { display: none; }
.kf-status { color: var(--color-success); font-weight: var(--weight-medium); font-size: var(--text-sm); }
.kf-target-list { display: flex; flex-direction: column; gap: var(--space-3); }
.kf-target-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 9rem) auto; gap: var(--space-3); align-items: start; }
.kf-target-head { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: var(--weight-medium); }
.kf-target-row > .lg-btn { align-self: start; }
.kf-section > .lg-btn { align-self: flex-start; }
.kf-sum { font-size: var(--text-sm); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
.kf-rules { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.kf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.kf-actions .lg-btn .lg-spinner { width: 16px; height: 16px; border-width: 2px; }
.kf-run { flex-wrap: wrap; }

@media (max-width: 639px) {
  .kf-target-row { grid-template-columns: minmax(0, 1fr) minmax(0, 6.5rem); }
  .kf-target-row > .lg-btn { grid-column: 1 / -1; justify-self: start; }
  .kf-target-head { display: none; }
}