/*
 * Error Messages UI Components
 *
 * Standardized error message UI components for validation errors, API errors,
 * and system errors. Includes dismissible alerts and inline field errors.
 *
 * Components:
 * - .alert: Base alert container with variants (error, warning, success, info)
 * - .alert-dismissible: Alerts that can be closed by the user
 * - .field-error: Inline field-level validation errors
 * - .error-summary: Summary of all form validation errors
 * - .system-error: Full-page or modal system error display
 *
 * Usage with design tokens from design-tokens.css and design-system.css
 */

@layer components {

/* ============================================
 * BASE ALERT COMPONENT
 * ============================================ */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: 8px;
  border: 1px solid;
  font-size: 0.875rem;
  line-height: 1.5;
  position: relative;
}

  /* Fade out animation for dismissal */
  .alert.dismissing {
    animation: alert-fade-out 0.2s ease-out forwards;
  }

  html[data-theme="dark"] .alert {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .alert {
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }
  }

  @media (prefers-contrast: more) {
.alert {
    border-width: 2px
}
  }

  @media (prefers-reduced-motion: reduce) {
    .alert.dismissing {
      animation: none;
    }
  }

.alert-icon {
  flex-shrink: 0;
  inline-size: 20px;
  block-size: 20px;
  margin-block-start: 1px;
}

.alert-content {
  flex: 1;
  min-inline-size: 0;
}

.alert-title {
  font-weight: 600;
  margin-block-end: var(--space-1);
}

.alert-message {
  margin: 0;
}

  .alert-message + .alert-message {
    margin-block-start: var(--space-1);
  }

/* Alert actions (buttons/links within the alert) */
.alert-actions {
  display: flex;
  gap: var(--space-2);
  margin-block-start: var(--space-2);
}

.alert-link {
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

  .alert-link:hover {
    text-decoration: none;
  }

/* ============================================
 * ALERT VARIANTS (with scoped custom properties)
 *
 * Each variant defines scoped --alert-* variables that
 * child elements consume. Dark mode overrides only need
 * to redefine the variables on the parent selector.
 * ============================================ */

/* Error Alert */
.alert-error {
  --alert-bg: var(--color-status-error-bg);
  --alert-border: var(--color-status-error-border);
  --alert-text: var(--color-status-error-text);
  --alert-icon: var(--color-error-500);
  --alert-link: var(--color-error-700);
  --alert-link-hover: var(--color-status-error-text);
  --alert-dismiss: var(--color-status-error-action);
  --alert-dismiss-hover-bg: transparent;

  background-color: var(--alert-bg);
  border-color: var(--alert-border);
  color: var(--alert-text);
}

/* Warning Alert */
.alert-warning {
  --alert-bg: var(--color-status-warning-bg);
  --alert-border: var(--color-status-warning-border);
  --alert-text: var(--color-warning-800);
  --alert-icon: var(--color-warning-500);
  --alert-link: var(--color-status-warning-text);
  --alert-link-hover: var(--color-warning-800);
  --alert-dismiss: var(--color-status-warning-text);
  --alert-dismiss-hover-bg: transparent;

  background-color: var(--alert-bg);
  border-color: var(--alert-border);
  color: var(--alert-text);
}

/* Success Alert */
.alert-success {
  --alert-bg: var(--color-status-success-bg);
  --alert-border: var(--color-status-success-border);
  --alert-text: var(--color-status-success-text);
  --alert-icon: var(--color-success-500);
  --alert-link: var(--color-success-700);
  --alert-link-hover: var(--color-status-success-text);
  --alert-dismiss: var(--color-status-success-action);
  --alert-dismiss-hover-bg: transparent;

  background-color: var(--alert-bg);
  border-color: var(--alert-border);
  color: var(--alert-text);
}

/* Info Alert */
.alert-info {
  --alert-bg: var(--color-bg-accent);
  --alert-border: var(--color-status-info-border);
  --alert-text: var(--color-primary-800);
  --alert-icon: var(--color-text-link);
  --alert-link: var(--color-text-accent);
  --alert-link-hover: var(--color-primary-800);
  --alert-dismiss: var(--color-text-accent-bright);
  --alert-dismiss-hover-bg: transparent;

  background-color: var(--alert-bg);
  border-color: var(--alert-border);
  color: var(--alert-text);
}

/* Shared alert child selectors using scoped variables */
.alert-error .alert-title,
.alert-warning .alert-title,
.alert-success .alert-title,
.alert-info .alert-title {
  color: var(--alert-text);
}

.alert-error .alert-icon,
.alert-warning .alert-icon,
.alert-success .alert-icon,
.alert-info .alert-icon {
  color: var(--alert-icon);
}

.alert-error .alert-link,
.alert-warning .alert-link,
.alert-success .alert-link,
.alert-info .alert-link {
  color: var(--alert-link);
}

.alert-error .alert-link:hover,
.alert-warning .alert-link:hover,
.alert-success .alert-link:hover,
.alert-info .alert-link:hover {
  color: var(--alert-link-hover);
}

.alert-error .alert-dismiss-btn,
.alert-warning .alert-dismiss-btn,
.alert-success .alert-dismiss-btn,
.alert-info .alert-dismiss-btn {
  color: var(--alert-dismiss);
}

.alert-error .alert-dismiss-btn:hover,
.alert-warning .alert-dismiss-btn:hover,
.alert-success .alert-dismiss-btn:hover,
.alert-info .alert-dismiss-btn:hover {
  background-color: var(--alert-dismiss-hover-bg);
}

/* ============================================
 * DISMISSIBLE ALERTS
 * ============================================ */

.alert-dismissible {
  padding-inline-end: var(--space-10);
}

/* stylelint-disable-next-line no-descending-specificity */
.alert-dismiss-btn {
  position: absolute;
  inset-block-start: var(--space-3);
  right: var(--space-3);
  padding: var(--space-1);
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s ease, background-color 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

  /* stylelint-disable-next-line no-descending-specificity */
  .alert-dismiss-btn:hover {
    opacity: 1;
    background-color: var(--color-hover-moderate);
  }

  /* stylelint-disable-next-line no-descending-specificity */
  .alert-dismiss-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-focus-ring);
  }

  .alert-dismiss-btn svg {
    inline-size: 16px;
    block-size: 16px;
  }

  @media (prefers-reduced-motion: reduce) {
.alert-dismiss-btn {
    transition: none
}
  }

@keyframes alert-fade-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* ============================================
 * INLINE FIELD ERRORS
 * ============================================ */

.field-error {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-status-error-action);
  font-size: 0.8125rem;
  margin-block-start: var(--space-1);
}

  html[data-theme="dark"] .field-error {
    color: var(--color-error-400);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .field-error {
      color: var(--color-error-400);
    }
  }

  @media (prefers-contrast: more) {
.field-error {
    font-weight: 500
}
  }

.field-error-icon {
  flex-shrink: 0;
  inline-size: 14px;
  block-size: 14px;
}

/* Input with error state */
.input-error,
input.input-error,
select.input-error,
textarea.input-error {
  border-color: var(--color-error-500);
  box-shadow: 0 0 0 1px var(--color-error-500);
}

  .input-error:focus {
    border-color: var(--color-error-500);
    box-shadow: 0 0 0 3px var(--color-error-alpha-20);
  }

/* Input Error Dark Mode */
html[data-theme="dark"] .input-error,
html[data-theme="dark"] input.input-error,
html[data-theme="dark"] select.input-error,
html[data-theme="dark"] textarea.input-error {
  border-color: var(--color-error-500);
  box-shadow: 0 0 0 1px var(--color-error-500);
}

html[data-theme="dark"] .input-error:focus {
  box-shadow: 0 0 0 3px var(--color-error-alpha-30);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .input-error,
  html:not([data-theme]) input.input-error,
  html:not([data-theme]) select.input-error,
  html:not([data-theme]) textarea.input-error {
    border-color: var(--color-error-500);
    box-shadow: 0 0 0 1px var(--color-error-500);
  }

  html:not([data-theme]) .input-error:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3);
  }
}

/* Field group with error */
.field-group-error {
  border-inline-start: 3px solid var(--color-error-500);
  padding-inline-start: var(--space-3);
}

  .field-group-error label {
    color: var(--color-error-700);
  }

/* ============================================
 * ERROR SUMMARY
 * Form validation error summary at top of form
 * ============================================ */

.error-summary {
  --_err-border: var(--color-error-200);
  --_err-link: var(--color-error-700);
  --_err-link-hover: var(--color-status-error-text);

  background-color: var(--color-status-error-bg);
  border: 1px solid var(--_err-border);
  border-radius: 8px;
  padding: var(--space-4);
  margin-block-end: var(--space-6);
}

.error-summary-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-3);
}

.error-summary-icon {
  flex-shrink: 0;
  inline-size: 20px;
  block-size: 20px;
  color: var(--color-error-500);
}

.error-summary-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-status-error-text);
  margin: 0;
}

  html[data-theme="dark"] .error-summary-title {
    color: var(--color-error-300);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .error-summary-title {
      color: var(--color-error-300);
    }
  }

.error-summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

  .error-summary-list li {
    position: relative;
    padding-inline-start: var(--space-4);
    color: var(--color-error-700);
    font-size: 0.875rem;
    line-height: 1.6;
  }

    .error-summary-list li::before {
      content: "\2022";
      position: absolute;
      inset-inline-start: var(--space-1);
      color: var(--color-error-400);
    }

    .error-summary-list li + li {
      margin-block-start: var(--space-1);
    }

  .error-summary-list a {
    color: var(--_err-link);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

    .error-summary-list a:hover {
      color: var(--_err-link-hover);
      text-decoration: none;
    }

/* ============================================
 * SYSTEM ERROR DISPLAY
 * For full-page or modal system errors
 * ============================================ */

.system-error {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  max-inline-size: 500px;
  margin: 0 auto;
}

.system-error-icon {
  inline-size: 64px;
  block-size: 64px;
  color: var(--color-error-400);
  margin: 0 auto var(--space-6);
}

  html[data-theme="dark"] .system-error-icon {
    color: var(--color-error-500);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .system-error-icon {
      color: var(--color-error-500);
    }
  }

.system-error-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-3);
}

  html[data-theme="dark"] .system-error-title {
    color: var(--color-slate-100);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .system-error-title {
      color: var(--color-slate-100);
    }
  }

.system-error-message {
  font-size: 1rem;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-6);
  line-height: 1.6;
}

  html[data-theme="dark"] .system-error-message {
    color: var(--color-slate-400);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .system-error-message {
      color: var(--color-slate-400);
    }
  }

.system-error-code {
  display: inline-block;
  background-color: var(--color-bg-tertiary);
  color: var(--color-text-strong);
  padding: var(--space-1) var(--space-3);
  border-radius: 4px;
  font-family: var(--font-family-mono, ui-monospace, monospace);
  font-size: 0.8125rem;
  margin-block-end: var(--space-6);
}

  html[data-theme="dark"] .system-error-code {
    background-color: var(--color-slate-800);
    color: var(--color-slate-300);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .system-error-code {
      background-color: var(--color-slate-800);
      color: var(--color-slate-300);
    }
  }

.system-error-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
}

  @media (width >= 480px) {
.system-error-actions {
    flex-direction: row;
    justify-content: center
}
  }

/* ============================================
 * API ERROR DISPLAY
 * For API/network error feedback
 * ============================================ */

.api-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-8) var(--space-4);
  background-color: var(--color-bg-subtle);
  border: 1px solid var(--color-neutral-200);
  border-radius: 8px;
}

  html[data-theme="dark"] .api-error {
    background-color: var(--color-slate-800);
    border-color: var(--color-border-dark);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .api-error {
      background-color: var(--color-slate-800);
      border-color: var(--color-border-dark);
    }
  }

.api-error-icon {
  inline-size: 48px;
  block-size: 48px;
  color: var(--color-error-400);
  margin-block-end: var(--space-4);
}

  html[data-theme="dark"] .api-error-icon {
    color: var(--color-error-500);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .api-error-icon {
      color: var(--color-error-500);
    }
  }

.api-error-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}

  html[data-theme="dark"] .api-error-title {
    color: var(--color-slate-100);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .api-error-title {
      color: var(--color-slate-100);
    }
  }

.api-error-message {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-4);
  text-align: center;
  max-inline-size: 300px;
}

  html[data-theme="dark"] .api-error-message {
    color: var(--color-slate-400);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .api-error-message {
      color: var(--color-slate-400);
    }
  }

.api-error-retry {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* ============================================
 * TOAST NOTIFICATIONS
 * For temporary notification messages
 * ============================================ */

.toast-container {
  position: fixed;
  inset-block-start: var(--space-4);
  right: var(--space-4);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-inline-size: 400px;
  pointer-events: none;
}

  .toast-container > * {
    pointer-events: auto;
  }

  /* Mobile responsive positioning */
  @media (width <= 480px) {
.toast-container {
    left: var(--space-4);
    right: var(--space-4);
    max-inline-size: none
}
  }

.toast {
  box-shadow: var(--shadow-lg);
  animation: toast-slide-in 0.3s ease-out;
}

  /* Toast slide-out animation for dismissal */
  .toast.toast-dismissing {
    animation: toast-slide-out 0.3s ease-in forwards;
  }

  /* Mobile responsive animations */
  @media (width <= 480px) {
.toast {
    animation: toast-slide-in-mobile 0.3s ease-out

    /* Mobile responsive dismissing animation */
}

    .toast.toast-dismissing {
      animation: toast-slide-out-mobile 0.3s ease-in forwards;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .toast,
    .toast.toast-dismissing {
      animation: none;
    }
  }

  html[data-theme="dark"] .toast {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .toast {
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    }
  }

@keyframes toast-slide-in {
  from {
    opacity: 0;
    transform: translateX(100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toast-slide-in-mobile {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toast-slide-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

@keyframes toast-slide-out-mobile {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-100%);
  }
}

/* ============================================
 * COMPACT ALERT VARIANT
 * For smaller inline notifications
 * ============================================ */

.alert-compact {
  padding: var(--space-2) var(--space-3);
  font-size: 0.8125rem;
}

  .alert-compact .alert-icon {
    inline-size: 16px;
    block-size: 16px;
  }

  .alert-compact .alert-title {
    font-size: 0.8125rem;
  }

  .alert-compact.alert-dismissible {
    padding-inline-end: var(--space-8);
  }

  /* stylelint-disable-next-line no-descending-specificity */
  .alert-compact .alert-dismiss-btn {
    inset-block-start: var(--space-2);
    right: var(--space-2);
  }

/* ============================================
 * ACCESSIBILITY
 * ============================================ */

/* Screen reader only text */
.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================
 * DARK MODE STYLES
 *
 * Alert variants use scoped --alert-* variables,
 * so each variant only needs a single html[data-theme="dark"] override
 * block to redefine its variables.
 * ============================================ */

/* Alert variant dark mode overrides */
html[data-theme="dark"] .alert-error {
  --alert-bg: var(--color-error-900);
  --alert-border: var(--color-error-700);
  --alert-text: var(--color-error-200);
  --alert-icon: var(--color-error-400);
  --alert-link: var(--color-error-300);
  --alert-link-hover: var(--color-error-200);
  --alert-dismiss-hover-bg: var(--color-error-alpha-20);
}

html[data-theme="dark"] .alert-warning {
  --alert-bg: var(--color-warning-900);
  --alert-border: var(--color-warning-700);
  --alert-text: var(--color-warning-200);
  --alert-icon: var(--color-warning-400);
  --alert-link: var(--color-warning-300);
  --alert-link-hover: var(--color-warning-200);
  --alert-dismiss-hover-bg: var(--color-warning-alpha-20);
}

html[data-theme="dark"] .alert-success {
  --alert-bg: var(--color-green-900);
  --alert-border: var(--color-green-800);
  --alert-text: var(--color-success-200);
  --alert-icon: var(--color-success-400);
  --alert-link: var(--color-success-300);
  --alert-link-hover: var(--color-success-200);
  --alert-dismiss-hover-bg: var(--color-green-alpha-20);
}

html[data-theme="dark"] .alert-info {
  --alert-bg: var(--color-blue-900);
  --alert-border: var(--color-blue-700);
  --alert-text: var(--color-primary-200);
  --alert-icon: var(--color-primary-400);
  --alert-link: var(--color-primary-300);
  --alert-link-hover: var(--color-primary-200);
  --alert-dismiss-hover-bg: var(--color-blue-alpha-20);
}

/* Error summary dark mode */
html[data-theme="dark"] .error-summary {
  --_err-border: var(--color-error-alpha-30);
  --_err-link: var(--color-error-300);
  --_err-link-hover: var(--color-error-200);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .alert-error {
    --alert-bg: var(--color-error-900);
    --alert-border: var(--color-error-700);
    --alert-text: var(--color-error-200);
    --alert-icon: var(--color-error-400);
    --alert-link: var(--color-error-300);
    --alert-link-hover: var(--color-error-200);
    --alert-dismiss-hover-bg: var(--color-error-alpha-20);
  }

  html:not([data-theme]) .alert-warning {
    --alert-bg: var(--color-warning-900);
    --alert-border: var(--color-warning-700);
    --alert-text: var(--color-warning-200);
    --alert-icon: var(--color-warning-400);
    --alert-link: var(--color-warning-300);
    --alert-link-hover: var(--color-warning-200);
    --alert-dismiss-hover-bg: var(--color-warning-alpha-20);
  }

  html:not([data-theme]) .alert-success {
    --alert-bg: var(--color-green-900);
    --alert-border: var(--color-green-800);
    --alert-text: var(--color-success-200);
    --alert-icon: var(--color-success-400);
    --alert-link: var(--color-success-300);
    --alert-link-hover: var(--color-success-200);
    --alert-dismiss-hover-bg: var(--color-green-alpha-20);
  }

  html:not([data-theme]) .alert-info {
    --alert-bg: var(--color-blue-900);
    --alert-border: var(--color-blue-700);
    --alert-text: var(--color-primary-200);
    --alert-icon: var(--color-primary-400);
    --alert-link: var(--color-primary-300);
    --alert-link-hover: var(--color-primary-200);
    --alert-dismiss-hover-bg: var(--color-blue-alpha-20);
  }

  html:not([data-theme]) .error-summary {
    --_err-border: var(--color-error-alpha-30);
    --_err-link: var(--color-error-300);
    --_err-link-hover: var(--color-error-200);
  }
}

} /* @layer components */