/* Alert — 5 types × 4 styles = 24 Figma variants
 *
 * Figma: frame 2542:5858 (Affino AI Design System)
 *
 * Type axis  (colour family): Info / Success / Danger / Warning / Neutral
 * Style axis (layout):
 *   - Default  : rounded card, header row + optional <ul> body + optional CTA button
 *   - CTA      : rounded card, single-row icon + text + CTA button (+ close).
 *                Stacks on mobile (text above CTA) via @container (max-width: 767px)
 *                — the .alert is a container-type context, so it reflows on its own width.
 *   - Floating : pill (radius-full), "New" badge + message + arrow icon
 *   - Fixed    : full-width bar, 3px top border, no radius
 *
 * Tokens — every type uses its semantic `--ao-{surface,text,border}-{type}` set;
 * Danger maps to the `error` namespace. CTA button bg is contextually overridden
 * to the type's surface colour (Case B — Button stays primary-blue elsewhere).
 *
 * Width is consumer-controlled (100% of parent); Figma's 720px / 320px frame
 * widths are layout artifacts.
 */

/* ── Base wrapper ─────────────────────────────────── */

.alert {
  display: flex;
  flex-direction: column;
  gap: var(--ao-spacing-4);
  width: 100%;
  padding: var(--ao-spacing-4) var(--ao-spacing-5);
  border: 1px solid var(--ao-border-info);
  container-type: inline-size;
  border-radius: var(--ao-radius-md);
  background-color: var(--ao-surface-info-soft);
  color: var(--ao-text-info);
  font-family: var(--ao-font-body);
  /* Figma binds `min-h-[48px]` (raw, not a token) on the wrapper. We drop
   * it here because `container-type: inline-size` on the alert causes
   * Chromium to resolve the intrinsic block-size as if the element had no
   * children — turning `min-height` into an effective `max-height` and
   * clipping content. Content always exceeds 48px in practice (any
   * variant with a 32px button or wrapped text + 24px padding + 2px
   * border lands at ≥58px), so the floor is moot. */
}

/* ── Header row (icon + title/body + close) ───── */

.alert__header {
  display: flex;
  align-items: center;
  gap: var(--ao-spacing-3);
  width: 100%;
}

.alert__icon,
.alert__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: inherit;
}

/* Both rendering paths: `[data-lucide]` covers the chrome, where the Lucide
 * runtime swaps an <i> placeholder in; `> svg` covers surfaces that render the
 * sprite server side instead (login carries no Lucide runtime). Without the svg
 * selector a server-rendered icon has no size and paints at its intrinsic
 * dimensions. Added for TASK-403384. */
.alert__icon [data-lucide],
.alert__close [data-lucide],
.alert__icon > svg,
.alert__close > svg {
  width: var(--ao-icon-size-sm);
  height: var(--ao-icon-size-sm);
}

.alert__close {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.alert__text {
  flex: 1;
  min-width: 0;
  font-size: var(--ao-font-fixed-xs);
  line-height: var(--ao-leading-md);
  color: inherit;
}

.alert__text p {
  margin: 0;
}

.alert__title {
  font-weight: var(--ao-font-bold);
}

.alert__title + .alert__message {
  font-weight: var(--ao-font-medium);
}

/* Links inside an alert take the alert's own colour, bold — never base.css's brand link colour,
 * which reads as a different message (designer, 2026-10-05: the failed-Save summary's field links).
 * Hover keeps the colour and underlines, so the link still reads as one. (figmaTest f10e83c92, ported TASK-542331) */
.alert a,
.alert a:hover {
  color: inherit;
  font-weight: var(--ao-font-bold);
}

.alert__message {
  font-weight: var(--ao-font-medium);
}

/* ── Body block (Default style — list + CTA) ───── */

.alert__body {
  display: flex;
  flex-direction: column;
  gap: var(--ao-spacing-4);
  width: 100%;
}

.alert__list {
  margin: 0;
  padding-left: var(--ao-spacing-6);
  font-size: var(--ao-font-fixed-xs);
  line-height: var(--ao-leading-md);
  color: inherit;
}

.alert__list li {
  font-weight: var(--ao-font-regular);
}

/* ── Type variants (colour palette) ────────────── */

.alert--info {
  background-color: var(--ao-surface-info-soft);
  border-color: var(--ao-border-info);
  color: var(--ao-text-info);
}

.alert--success {
  background-color: var(--ao-surface-success-soft);
  border-color: var(--ao-border-success);
  color: var(--ao-text-success);
}

.alert--danger {
  background-color: var(--ao-surface-error-soft);
  border-color: var(--ao-border-error);
  color: var(--ao-text-error);
}

.alert--warning {
  background-color: var(--ao-surface-warning-soft);
  border-color: var(--ao-border-warning);
  color: var(--ao-text-warning);
}

.alert--neutral {
  background-color: var(--ao-surface-neutral-soft);
  border-color: var(--ao-border-neutral);
  color: var(--ao-text-neutral);
}

/* ── Style: CTA (single-row inline CTA button) ── */
/* Visual difference vs Default: no body block; CTA button sits in the
 * header row between text and close. Mobile stacks. */

/* Wrapper centers the (single) paragraph vertically when content is
 * shorter than min-height. Figma binds `justify-center` on the CTA root
 * (e.g. node 4168:5316). Default style stays top-aligned. */
.alert--cta {
  justify-content: center;
}

.alert--cta .alert__header {
  align-items: center;
  /* CTA gap between icon | text-area | close = --ao-spacing-4 (12px).
   * Default style uses --ao-spacing-3 (8px) — kept on the base rule. */
  gap: var(--ao-spacing-4);
}

.alert--cta .alert__text {
  line-height: var(--ao-leading-sm);
}

.alert--cta .alert__cta-area {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: var(--ao-spacing-3);
}

@container (max-width: 767px) {
  .alert--cta .alert__header {
    align-items: flex-start;
  }
  .alert--cta .alert__icon {
    /* 2px optical pad to align the 16px icon to the title baseline when the
     * header switches to flex-start. Figma binds `--ao-spacing-0.5` (no
     * matching semantic token exists) — treated as an optical exception. */
    padding-top: 2px;
  }
  .alert--cta .alert__cta-area {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ao-spacing-4);
  }
}

/* ── Style: Floating (pill) ───────────────────── */

.alert--floating {
  flex-direction: row;
  align-items: center;
  gap: var(--ao-spacing-3);
  padding: var(--ao-spacing-2) var(--ao-spacing-4) var(--ao-spacing-2) var(--ao-spacing-2);
  border-radius: var(--ao-radius-full);
}

.alert__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--ao-spacing-7);
  padding: 0 var(--ao-spacing-3);
  background-color: var(--ao-surface-info);
  border-radius: var(--ao-radius-full);
  color: var(--ao-text-invert);
  font-family: var(--ao-font-title);
  font-weight: var(--ao-font-semibold);
  font-size: var(--ao-font-fixed-xxs);
  line-height: var(--ao-leading-md);
  flex-shrink: 0;
}

.alert--floating .alert__text {
  font-size: var(--ao-font-fixed-xxs);
  line-height: var(--ao-leading-md);
}

.alert--floating.alert--success .alert__badge { background-color: var(--ao-surface-success); }
.alert--floating.alert--neutral .alert__badge { background-color: var(--ao-surface-neutral); }

.alert--floating .alert__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: inherit;
}

.alert--floating .alert__arrow [data-lucide] {
  width: var(--ao-icon-size-sm);
  height: var(--ao-icon-size-sm);
}

/* ── Style: Fixed (full-width bar, top border) ── */

.alert--fixed {
  border: none;
  border-top: 3px solid var(--ao-border-info);
  border-radius: 0;
}

.alert--fixed.alert--success { border-top-color: var(--ao-border-success); }
.alert--fixed.alert--danger { border-top-color: var(--ao-border-error); }
.alert--fixed.alert--warning { border-top-color: var(--ao-border-warning); }
.alert--fixed.alert--neutral { border-top-color: var(--ao-border-neutral); }

/* ── Case B: CTA button bg follows the Type ───── */
/* Code Connect maps the inline button to btn--primary btn--sm, but Figma
 * paints its bg with the type's --ao-surface-{type} (5 different colours).
 * Scoped here per parent type so the base Button stays primary-blue. */

.alert .alert__cta-btn,
.alert--info .alert__cta-btn {
  background-color: var(--ao-surface-info);
  border-color: transparent;
  align-self: flex-start;
}

.alert--success .alert__cta-btn { background-color: var(--ao-surface-success); }
.alert--danger .alert__cta-btn { background-color: var(--ao-surface-error); }
.alert--warning .alert__cta-btn { background-color: var(--ao-surface-warning); }
.alert--neutral .alert__cta-btn { background-color: var(--ao-surface-neutral); }