/* ============================================================================
   Components - Alerts
   system/components/alerts.css

   Status banners with icon + title + message. Four severities.

   See sibling alerts.md.
   ============================================================================ */

.gm .gm-alert {
  display: flex;
  gap: var(--gm-space-4);
  padding: var(--gm-space-4) var(--gm-space-5);
  border-radius: var(--gm-radius-md);
  border: 1px solid;
  background: var(--gm-bg-elevated);
  align-items: flex-start;
}

.gm .gm-alert-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gm .gm-alert-icon svg {
  width: 100%;
  height: 100%;
}

.gm .gm-alert-body {
  flex: 1;
  min-width: 0;
}
.gm .gm-alert-title {
  font-size: var(--gm-fs-base);
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--gm-text-primary);
}
.gm .gm-alert-message {
  font-size: var(--gm-fs-sm);
  color: var(--gm-text-secondary);
  line-height: var(--gm-lh-base);
}

/* Severities */
.gm .gm-alert-info {
  border-color: rgba(159, 225, 203, 0.35);
  background: rgba(93, 202, 165, 0.08);
}
.gm .gm-alert-info .gm-alert-icon { color: var(--gm-info); }

.gm .gm-alert-success {
  border-color: rgba(93, 202, 165, 0.4);
  background: rgba(93, 202, 165, 0.1);
}
.gm .gm-alert-success .gm-alert-icon { color: var(--gm-success); }

.gm .gm-alert-warning {
  border-color: rgba(245, 124, 0, 0.4);
  background: rgba(245, 124, 0, 0.08);
}
.gm .gm-alert-warning .gm-alert-icon { color: var(--gm-warning); }
.gm .gm-alert-warning .gm-alert-title { color: var(--gm-warning); }

.gm .gm-alert-danger {
  border-color: rgba(252, 165, 165, 0.4);
  background: rgba(252, 165, 165, 0.08);
}
.gm .gm-alert-danger .gm-alert-icon { color: var(--gm-danger); }
.gm .gm-alert-danger .gm-alert-title { color: var(--gm-danger); }