/* ----------------------------------------
   Alerts — unified, dismissible flash messages.

   Used by Django messages framework (rendered via templates/includes/messages.html)
   and any one-off in-page alert. Design goals:

   - One row, content + close button on a single flex axis.
   - Close button vertically centered for free (no absolute positioning).
   - Status accent via a leading "pip" — the dot encodes severity at a glance
     without coloring the entire surface aggressively.
   - Token-driven colors. No hardcoded hex.
   - Fade-in on appear, no bouncing.
   ---------------------------------------- */

.messages-container {
  display: flex;
  flex-direction: column;
  gap: var(--varial-space-sm, 0.5rem);
  margin-bottom: var(--varial-space-md, 1rem);
}

/* Reset Bootstrap's default block layout for our usage. */
.alert.alert-varial {
  display: flex;
  align-items: center;
  gap: var(--varial-space-md, 1rem);
  padding: 0.625rem 0.875rem 0.625rem 1rem;
  margin-bottom: 0;
  border: 1px solid transparent;
  border-radius: var(--varial-radius-md, 0.375rem);
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.4;
  animation: varial-alert-in 180ms ease-out;
}

/* Status pip — a small filled circle at the leading edge. */
.alert-varial::before {
  content: "";
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}

.alert-varial .alert-body {
  flex: 1 1 auto;
  min-width: 0;
}

/* Inline close button — vertically centered by the parent flex container,
   no absolute positioning, no Bootstrap pe-5 padding hack required.
   Bootstrap's `.alert-dismissible .btn-close` sets position:absolute +
   top/right so the button overlays the alert instead of sitting in flow;
   left in place, a tall alert (e.g. a banner with a wrapped multi-line
   message) clips the button against the alert's own edge instead of it
   staying centered. `.alert.alert-varial.alert-dismissible` (3 classes) is
   the more specific of the two so this always wins, regardless of
   stylesheet load order. */
.alert.alert-varial.alert-dismissible {
  padding-right: 0.875rem;
}

.alert.alert-varial .btn-close {
  flex: 0 0 auto;
  position: static;
  top: auto;
  right: auto;
  padding: 0.375rem;
  margin: 0;
  background-size: 0.625rem;
  opacity: 0.55;
  transition: opacity 120ms ease;
}

.alert-varial .btn-close:hover,
.alert-varial .btn-close:focus {
  opacity: 0.9;
}

/* Severity palettes — token-driven, subtle backgrounds, full-strength pip. */
.alert-varial.alert-success {
  color: var(--varial-success, #059669);
  background: color-mix(in srgb, var(--varial-success, #059669) 8%, white);
  border-color: color-mix(in srgb, var(--varial-success, #059669) 28%, white);
}

.alert-varial.alert-danger,
.alert-varial.alert-error {
  color: var(--varial-danger, #DC2626);
  background: color-mix(in srgb, var(--varial-danger, #DC2626) 8%, white);
  border-color: color-mix(in srgb, var(--varial-danger, #DC2626) 28%, white);
}

.alert-varial.alert-warning {
  color: var(--varial-warning, #F59E0B);
  background: color-mix(in srgb, var(--varial-warning, #F59E0B) 10%, white);
  border-color: color-mix(in srgb, var(--varial-warning, #F59E0B) 32%, white);
}

.alert-varial.alert-info,
.alert-varial.alert-debug {
  color: var(--varial-info, #0EA5E9);
  background: color-mix(in srgb, var(--varial-info, #0EA5E9) 8%, white);
  border-color: color-mix(in srgb, var(--varial-info, #0EA5E9) 28%, white);
}

.alert-varial.alert-secondary {
  color: var(--varial-gray-700, #4B4843);
  background: var(--varial-bg, #FAF8F2);
  border-color: var(--varial-border, #E7E0CC);
}

/* Body text — slightly darker than the accent for readability. */
.alert-varial .alert-body {
  color: var(--varial-text-default, #111827);
}

/* ── Dark mode ─────────────────────────────────────────────────────
   The light palettes mix the accent into white, which on the dark page
   renders as a glaring near-white panel. Re-mix into the dark surface and
   lift the accent text so each severity stays legible and on-theme. */
[data-bs-theme="dark"] .alert-varial.alert-success {
  color: color-mix(in srgb, var(--varial-success) 55%, white);
  background: color-mix(in srgb, var(--varial-success) 16%, var(--varial-bg-subtle));
  border-color: color-mix(in srgb, var(--varial-success) 40%, var(--varial-bg-subtle));
}

[data-bs-theme="dark"] .alert-varial.alert-danger,
[data-bs-theme="dark"] .alert-varial.alert-error {
  color: color-mix(in srgb, var(--varial-danger) 55%, white);
  background: color-mix(in srgb, var(--varial-danger) 16%, var(--varial-bg-subtle));
  border-color: color-mix(in srgb, var(--varial-danger) 40%, var(--varial-bg-subtle));
}

[data-bs-theme="dark"] .alert-varial.alert-warning {
  color: color-mix(in srgb, var(--varial-warning) 60%, white);
  background: color-mix(in srgb, var(--varial-warning) 16%, var(--varial-bg-subtle));
  border-color: color-mix(in srgb, var(--varial-warning) 40%, var(--varial-bg-subtle));
}

[data-bs-theme="dark"] .alert-varial.alert-info,
[data-bs-theme="dark"] .alert-varial.alert-debug {
  color: color-mix(in srgb, var(--varial-info) 60%, white);
  background: color-mix(in srgb, var(--varial-info) 16%, var(--varial-bg-subtle));
  border-color: color-mix(in srgb, var(--varial-info) 40%, var(--varial-bg-subtle));
}

[data-bs-theme="dark"] .alert-varial.alert-secondary {
  color: var(--varial-gray-300, #D6D2C8);
  background: var(--varial-bg-subtle);
  border-color: var(--varial-border);
}

[data-bs-theme="dark"] .alert-varial .alert-body {
  color: var(--varial-gray-700);
}

@keyframes varial-alert-in {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Auto-dismiss fade-out — driven by JS adding [data-dismissing]. */
.alert-varial[data-dismissing="true"] {
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 200ms ease, transform 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .alert.alert-varial,
  .alert-varial[data-dismissing="true"] {
    animation: none;
    transition: none;
  }
}

/* ----------------------------------------
   Banners — persistent, non-dismissible-by-default notices (email verify,
   wizard lock, impersonation-adjacent states). Same severity palette as
   `.alert-varial` above, but a wider layout: leading icon (not just the pip),
   wrapping message, and one or more action buttons on the trailing edge.

   Rendered via `templates/includes/_banner.html` — see styleguide.html
   "Alerts & Banners" section for variants and the stacking rule. Do not
   hand-roll a new persistent-notice pattern; extend this one.
   ---------------------------------------- */
/* The leading pip is redundant next to the banner's own icon — drop it. */
.banner.alert-varial::before {
  display: none;
}

.banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--varial-space-md, 1rem);
  margin: 0 0 var(--varial-space-md, 1rem);
}

/* Banners render back-to-back (e.g. messages + email-verify) with no wrapper
   between them — collapse the gap so consecutive banners read as a single
   stacked group rather than each carrying its own full margin. */
.banner + .banner {
  margin-top: calc(-1 * var(--varial-space-md, 1rem) + var(--varial-space-sm, 0.5rem));
}

.banner-icon {
  flex: 0 0 auto;
  font-size: 1rem;
  opacity: 0.9;
}

.banner-body {
  flex: 1 1 auto;
  min-width: 12rem;
}

.banner-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--varial-space-sm, 0.5rem);
}