/* =============================================================================
   BUAMS AI new-ui — ALERTS
   Spec: /frontend_design.md §F.4

   Inline page-level messaging. Every variant carries a leading icon as well as
   colour (spec §F.3) — the icon is supplied by the Blade component so it also
   survives greyscale printing.

   Alerts are for persistent page state. Transient confirmation goes to a toast;
   field validation goes inline next to the field. Never mix the three.
   ============================================================================= */

.bui-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--bui-space-3);
  padding: var(--bui-space-3) var(--bui-space-4);
  margin-bottom: var(--bui-space-5);
  border: 1px solid transparent;
  border-radius: var(--bui-radius-md);
  font-size: var(--bui-text-sm);
  line-height: var(--bui-lh-normal);
}

.bui-alert-icon {
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 1.05rem;
  line-height: var(--bui-lh-normal);
}

.bui-alert-content {
  flex: 1 1 auto;
  min-width: 0;
}

.bui-alert-title {
  margin-bottom: var(--bui-space-1);
  font-size: var(--bui-text-sm);
  font-weight: var(--bui-fw-bold);
}

.bui-alert-close {
  flex-shrink: 0;
  width: var(--bui-space-6);
  height: var(--bui-space-6);
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--bui-radius-sm);
  color: inherit;
  opacity: .6;
  cursor: pointer;
  transition: opacity var(--bui-transition);
}

.bui-alert-close:hover {
  opacity: 1;
}

.bui-alert-close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 1px;
  opacity: 1;
}

/* ── Variants ─────────────────────────────────────────────────────────────── */
.bui-alert-success {
  background: var(--bui-success-bg);
  border-color: rgba(21, 127, 79, .28);
  color: #0E5334;
}

.bui-alert-success .bui-alert-icon { color: var(--bui-success); }

.bui-alert-warning {
  background: var(--bui-warning-bg);
  border-color: rgba(161, 98, 7, .28);
  color: #6E4305;
}

.bui-alert-warning .bui-alert-icon { color: var(--bui-warning); }

.bui-alert-danger {
  background: var(--bui-danger-bg);
  border-color: rgba(180, 35, 24, .28);
  color: #7F1810;
}

.bui-alert-danger .bui-alert-icon { color: var(--bui-danger); }

.bui-alert-info {
  background: var(--bui-info-bg);
  border-color: rgba(23, 92, 211, .24);
  color: #123F92;
}

.bui-alert-info .bui-alert-icon { color: var(--bui-info); }

/* Brand-toned informational alert — used for tenant/context notices where a
   semantic colour would wrongly imply a status. */
.bui-alert-brand {
  background: var(--bui-primary-50);
  border-color: var(--bui-primary-200);
  color: var(--bui-primary-900);
}

.bui-alert-brand .bui-alert-icon { color: var(--bui-primary-700); }

@media (max-width: 575.98px) {
  .bui-alert {
    padding: var(--bui-space-3);
  }
}