/* attention-banner.css — Dashboard AttentionBanner

 Quelle: extrahiert aus dashboard.css ("AttentionBanner"-Block, Inhalt 1:1.

 Konsumenten: web/js/domain/dashboard/attention-banner.js — rendert Liste
 aktiver Engpaesse mit Bar + Beheben-CTA. Sitzt INSIDE einer Standard-
 .dash-card; Header kommt aus .dash-card-head (im Shell-Block in
 dashboard.css).
 ========================================================================== */

/* Banner sitzt INSIDE der Standard-.dash-card (Border kommt vom Card-Container).
   Eigenes Styling: Section-Head-Optik + Bar + CTA. */
.attention-banner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.attention-banner.is-empty { display: none; }

.attention-banner .ab-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.attention-banner .ab-row {
  display: grid;
  grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3-5);
  padding: 0;
}
.attention-banner .ab-row-bar {
  height: 8px;
  background: var(--color-border-light);
  border-radius: var(--radius-circular);
  overflow: hidden;
  order: 1;
}
.attention-banner .ab-row-bar-fill {
  height: 100%;
  background: var(--status-warning-fg);
  border-radius: var(--radius-circular);
  transition: width var(--duration-relaxed) var(--ease-soft);
}
.attention-banner .ab-row-label {
  font-size: 13px;
  color: var(--color-text-primary);
  order: 2;
  min-width: 0;
}
.attention-banner .ab-row-label strong {
  font-weight: var(--fw-semibold, 600);
  color: var(--status-warning-fg);
}
.attention-banner .ab-row-cta {
  appearance: none;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 5px var(--space-3);
  font-size: 12px;
  color: var(--color-text-primary);
  font-weight: var(--fw-medium, 500);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  white-space: nowrap;
  transition: border-color var(--duration-quick) var(--ease-soft), background var(--duration-quick) var(--ease-soft), color var(--duration-quick) var(--ease-soft);
  font-family: inherit;
  order: 3;
  justify-self: end;
}
.attention-banner .ab-row-cta:focus-visible {
  outline: 2px solid var(--lod-turquoise);
  outline-offset: -2px;
}
.attention-banner .ab-row-cta:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
  background: var(--color-bg-muted);
}
.attention-banner .ab-row-cta img { opacity: 0.6; }

@media (max-width: 999px) {
  .attention-banner .ab-row {
    grid-template-columns: 1fr auto;
    gap: var(--space-2);
  }
  .attention-banner .ab-row-bar { grid-column: 1 / -1; }
}