@charset "UTF-8";

/*
|--------------------------------------------------------------------------
| الملف: public_html/assets/css/shared/components/alerts.css
| الوصف:
|   أنماط التنبيهات والرسائل والحالات العامة المشتركة في المنصة.
|
| الهدف:
|   - توحيد شكل رسائل النجاح، التحذير، الخطأ، والمعلومات.
|   - توفير بنية مرنة للأيقونة، العنوان، النص، الإجراءات، والإغلاق.
|   - دعم التنبيهات الثابتة والناعمة والمحددة بإطار أو خلفية.
|   - دعم الاستجابة للشاشات المختلفة.
|
| القواعد:
|   - هذا الملف خاص بمكونات alerts فقط.
|   - لا توضع فيه أنماط صفحات.
|   - لا توضع فيه أنماط layout عامة.
|   - يعتمد على tokens.css و base.css.
|--------------------------------------------------------------------------
*/

/* -------------------------------------------------------------------------
 * Base Alert
 * ---------------------------------------------------------------------- */
.alert {
  --alert-local-bg: var(--color-bg-surface);
  --alert-local-border: var(--color-border-default);
  --alert-local-text: var(--color-text-primary);
  --alert-local-muted: var(--color-text-secondary);
  --alert-local-title: var(--color-text-primary);
  --alert-local-icon: var(--color-icon-primary);
  --alert-local-shadow: none;
  --alert-local-radius: var(--alert-radius);
  --alert-local-padding-x: var(--alert-padding-x);
  --alert-local-padding-y: var(--alert-padding-y);

  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  width: 100%;
  padding: var(--alert-local-padding-y) var(--alert-local-padding-x);
  color: var(--alert-local-text);
  background-color: var(--alert-local-bg);
  border: var(--border-width-1) solid var(--alert-local-border);
  border-radius: var(--alert-local-radius);
  box-shadow: var(--alert-local-shadow);
}

.alert > * {
  min-width: 0;
}

.alert--shadow {
  --alert-local-shadow: var(--shadow-sm);
}

.alert--compact {
  --alert-local-padding-x: var(--space-4);
  --alert-local-padding-y: var(--space-3);

  gap: var(--space-3);
}

.alert--spacious {
  --alert-local-padding-x: var(--space-5);
  --alert-local-padding-y: var(--space-5);

  gap: var(--space-4);
}

.alert--rounded-sm {
  --alert-local-radius: var(--radius-md);
}

.alert--rounded-lg {
  --alert-local-radius: var(--radius-xl);
}

/* -------------------------------------------------------------------------
 * Alert Parts
 * ---------------------------------------------------------------------- */
.alert__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  min-width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.125rem;
  color: var(--alert-local-icon);
  flex-shrink: 0;
}

.alert__icon svg,
.alert__icon img {
  width: 100%;
  height: 100%;
}

.alert__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.alert__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
}

.alert__title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  color: var(--alert-local-title);
}

.alert__text {
  margin: 0;
  color: var(--alert-local-muted);
}

.alert__text > *:last-child {
  margin-bottom: 0;
}

.alert__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.alert__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-1);
}

.alert__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  padding: 0;
  color: var(--alert-local-icon);
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background-color var(--duration-fast) var(--easing-in-out),
    color var(--duration-fast) var(--easing-in-out),
    box-shadow var(--duration-fast) var(--easing-in-out);
}

.alert__close:hover {
  background-color: rgba(15, 23, 42, 0.06);
}

.alert__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
}

.alert__close svg,
.alert__close img {
  width: 1rem;
  height: 1rem;
}

/* -------------------------------------------------------------------------
 * Accent Styles
 * ---------------------------------------------------------------------- */
.alert--left-accent {
  border-inline-start-width: var(--border-width-4);
}

.alert--top-accent {
  border-top-width: var(--border-width-4);
}

.alert--borderless {
  border-color: transparent;
}

.alert--soft {
  --alert-local-shadow: none;
}

.alert--solid {
  color: var(--color-text-inverse);
}

.alert--solid .alert__title,
.alert--solid .alert__text,
.alert--solid .alert__meta,
.alert--solid .alert__close,
.alert--solid .alert__icon {
  color: inherit;
}

.alert--solid .alert__close:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

/* -------------------------------------------------------------------------
 * Semantic Variants
 * ---------------------------------------------------------------------- */
.alert--info {
  --alert-local-bg: var(--color-bg-info);
  --alert-local-border: var(--color-border-info);
  --alert-local-text: var(--color-info-900);
  --alert-local-muted: var(--color-info-800);
  --alert-local-title: var(--color-info-900);
  --alert-local-icon: var(--color-icon-info);
}

.alert--success {
  --alert-local-bg: var(--color-bg-success);
  --alert-local-border: var(--color-border-success);
  --alert-local-text: var(--color-success-900);
  --alert-local-muted: var(--color-success-800);
  --alert-local-title: var(--color-success-900);
  --alert-local-icon: var(--color-icon-success);
}

.alert--warning {
  --alert-local-bg: var(--color-bg-warning);
  --alert-local-border: var(--color-border-warning);
  --alert-local-text: var(--color-warning-900);
  --alert-local-muted: var(--color-warning-800);
  --alert-local-title: var(--color-warning-900);
  --alert-local-icon: var(--color-icon-warning);
}

.alert--danger,
.alert--error {
  --alert-local-bg: var(--color-bg-danger);
  --alert-local-border: var(--color-border-danger);
  --alert-local-text: var(--color-danger-900);
  --alert-local-muted: var(--color-danger-800);
  --alert-local-title: var(--color-danger-900);
  --alert-local-icon: var(--color-icon-danger);
}

.alert--brand {
  --alert-local-bg: var(--color-bg-brand-soft);
  --alert-local-border: var(--color-border-brand);
  --alert-local-text: var(--color-brand-900);
  --alert-local-muted: var(--color-brand-800);
  --alert-local-title: var(--color-brand-900);
  --alert-local-icon: var(--color-icon-brand);
}

/* -------------------------------------------------------------------------
 * Solid Semantic Variants
 * ---------------------------------------------------------------------- */
.alert--solid.alert--info {
  --alert-local-bg: var(--color-info-600);
  --alert-local-border: var(--color-info-600);
}

.alert--solid.alert--success {
  --alert-local-bg: var(--color-success-600);
  --alert-local-border: var(--color-success-600);
}

.alert--solid.alert--warning {
  --alert-local-bg: var(--color-warning-600);
  --alert-local-border: var(--color-warning-600);
}

.alert--solid.alert--danger,
.alert--solid.alert--error {
  --alert-local-bg: var(--color-danger-600);
  --alert-local-border: var(--color-danger-600);
}

.alert--solid.alert--brand {
  --alert-local-bg: var(--color-brand-600);
  --alert-local-border: var(--color-brand-600);
}

/* -------------------------------------------------------------------------
 * Outline Variants
 * ---------------------------------------------------------------------- */
.alert--outline {
  background-color: transparent;
}

.alert--outline.alert--info {
  --alert-local-border: var(--color-info-300);
  --alert-local-text: var(--color-info-900);
  --alert-local-muted: var(--color-info-800);
  --alert-local-title: var(--color-info-900);
  --alert-local-icon: var(--color-icon-info);
}

.alert--outline.alert--success {
  --alert-local-border: var(--color-success-300);
  --alert-local-text: var(--color-success-900);
  --alert-local-muted: var(--color-success-800);
  --alert-local-title: var(--color-success-900);
  --alert-local-icon: var(--color-icon-success);
}

.alert--outline.alert--warning {
  --alert-local-border: var(--color-warning-300);
  --alert-local-text: var(--color-warning-900);
  --alert-local-muted: var(--color-warning-800);
  --alert-local-title: var(--color-warning-900);
  --alert-local-icon: var(--color-icon-warning);
}

.alert--outline.alert--danger,
.alert--outline.alert--error {
  --alert-local-border: var(--color-danger-300);
  --alert-local-text: var(--color-danger-900);
  --alert-local-muted: var(--color-danger-800);
  --alert-local-title: var(--color-danger-900);
  --alert-local-icon: var(--color-icon-danger);
}

/* -------------------------------------------------------------------------
 * Inline Alert
 * ---------------------------------------------------------------------- */
.alert-inline {
  --alert-inline-color: var(--color-text-secondary);
  --alert-inline-icon: var(--color-icon-muted);

  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
  color: var(--alert-inline-color);
}

.alert-inline__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  min-width: 1rem;
  height: 1rem;
  margin-top: 0.1rem;
  color: var(--alert-inline-icon);
  flex-shrink: 0;
}

.alert-inline__icon svg,
.alert-inline__icon img {
  width: 100%;
  height: 100%;
}

.alert-inline__text {
  min-width: 0;
}

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

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

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

.alert-inline--danger,
.alert-inline--error {
  --alert-inline-color: var(--color-danger-800);
  --alert-inline-icon: var(--color-icon-danger);
}

/* -------------------------------------------------------------------------
 * Status Notice
 * ---------------------------------------------------------------------- */
.notice {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  color: var(--color-text-secondary);
  background-color: var(--color-bg-surface-muted);
  border: var(--border-width-1) dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
}

.notice__title {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semi-bold);
  color: var(--color-text-primary);
}

.notice__text {
  margin: 0;
}

/* -------------------------------------------------------------------------
 * Alert Stack
 * ---------------------------------------------------------------------- */
.alert-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.alert-stack--compact {
  gap: var(--space-3);
}

.alert-stack--spacious {
  gap: var(--space-5);
}

/* -------------------------------------------------------------------------
 * Dismissible State
 * ---------------------------------------------------------------------- */
.alert.is-dismissible {
  padding-inline-end: calc(var(--alert-local-padding-x) + 2.25rem);
}

.alert.is-dismissible > .alert__close {
  position: absolute;
  top: var(--space-3);
  inset-inline-end: var(--space-3);
}

/* -------------------------------------------------------------------------
 * With Actions
 * ---------------------------------------------------------------------- */
.alert--with-actions .alert__content {
  gap: var(--space-3);
}

/* -------------------------------------------------------------------------
 * Toast-like Static Variant
 * ---------------------------------------------------------------------- */
.alert--toast {
  max-width: 32rem;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

/* -------------------------------------------------------------------------
 * Responsive Refinements
 * ---------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .alert {
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .alert__header {
    flex-direction: column;
    align-items: stretch;
  }

  .alert__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .alert__actions > * {
    width: 100%;
  }

  .alert.is-dismissible {
    padding-inline-end: var(--space-4);
    padding-top: calc(var(--space-4) + 1.5rem);
  }

  .alert.is-dismissible > .alert__close {
    top: var(--space-2);
    inset-inline-end: var(--space-2);
  }

  .alert--toast {
    max-width: 100%;
  }
}

@media (min-width: 768px) {
  .alert__actions--end {
    justify-content: flex-end;
  }

  .alert__actions--between {
    justify-content: space-between;
  }
}

/* -------------------------------------------------------------------------
 * Reduced Motion
 * ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .alert,
  .alert__close {
    transition: none !important;
  }
}