/* ============================================================
   BLOCK — alert-banner.css
   Clickable amber alert strip for the dashboard. Used to
   surface the number of overdue invoices.

   Usage:
     <a href="/invoices?status=overdue" class="alert-banner">
       <span class="alert-banner-icon">…</span>
       <span class="alert-banner-text">2 overdue invoices — €680</span>
       <span class="alert-banner-arrow">…</span>
     </a>
   ============================================================ */

.alert-banner {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-s) var(--space-m);
  border-radius: 8px;
  background-color: var(--color-warning-bg);
  color: var(--color-warning-text);
  font-size: var(--step--1);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.alert-banner:hover {
  background-color: oklch(from var(--color-warning-bg) calc(l - 0.03) c h);
}

.alert-banner-icon {
  flex-shrink: 0;
  font-size: var(--step-1);
}

.alert-banner-text {
  flex: 1;
}

.alert-banner-arrow {
  flex-shrink: 0;
  font-size: var(--step-0);
}