@charset "UTF-8";

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

/* -------------------------------------------------------------------------
 * Base Error State
 * ---------------------------------------------------------------------- */
.error-state {
  --error-bg: transparent;
  --error-border: transparent;
  --error-shadow: none;
  --error-radius: var(--radius-2xl);
  --error-padding-x: var(--space-6);
  --error-padding-y: var(--space-8);
  --error-max-width: 50rem;

  --error-icon-size: 4.75rem;
  --error-icon-color: var(--color-icon-danger);
  --error-icon-bg: var(--color-bg-danger);

  --error-code-color: var(--color-danger-700);
  --error-title-color: var(--color-text-primary);
  --error-text-color: var(--color-text-secondary);
  --error-detail-bg: var(--color-bg-surface-muted);
  --error-detail-border: var(--color-border-default);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  width: 100%;
  max-width: var(--error-max-width);
  margin-inline: auto;
  padding: var(--error-padding-y) var(--error-padding-x);
  text-align: center;
  color: var(--error-text-color);
  background:
    linear-gradient(180deg, rgba(255,255,255,.985) 0%, rgba(246,250,253,.985) 100%);
  background-color: var(--error-bg);
  border: var(--border-width-1) solid var(--error-border);
  border-radius: var(--error-radius);
  box-shadow: var(--error-shadow);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.error-state > * {
  min-width: 0;
}

.error-state::before,
.error-state::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: .6;
  z-index: 0;
}

.error-state::before {
  width: 14rem;
  height: 14rem;
  inset: -4.5rem auto auto -4.5rem;
  background: radial-gradient(circle, rgba(8,58,91,.08) 0%, rgba(8,58,91,0) 72%);
}

.error-state::after {
  width: 12rem;
  height: 12rem;
  inset: auto -3rem -3rem auto;
  background: radial-gradient(circle, rgba(8,58,91,.06) 0%, rgba(8,58,91,0) 74%);
}

/* -------------------------------------------------------------------------
 * Parts
 * ---------------------------------------------------------------------- */
.error-state__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--error-icon-size);
  height: var(--error-icon-size);
  color: var(--error-icon-color);
  background:
    linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.28) 100%),
    var(--error-icon-bg);
  border: 1px solid rgba(255,255,255,.68);
  border-radius: var(--radius-full);
  flex-shrink: 0;
  box-shadow:
    0 16px 34px rgba(8, 38, 61, .12),
    inset 0 1px 0 rgba(255,255,255,.52);
  position: relative;
  z-index: 1;
}

.error-state__media svg,
.error-state__media img {
  width: 50%;
  height: 50%;
}

.error-state__image {
  display: block;
  max-width: min(100%, 18rem);
  height: auto;
  margin-inline: auto;
}

.error-state__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.error-state__code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 10.5rem;
  min-height: 4.5rem;
  margin: 0;
  padding: .85rem 1.6rem;
  color: var(--error-code-color);
  font-size: clamp(2.2rem, 1.7rem + 2.8vw, 4.8rem);
  font-weight: var(--font-weight-extra-bold);
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(238,245,251,.96) 100%);
  border: 1px solid rgba(191, 208, 226, .9);
  border-radius: 1.5rem;
  box-shadow:
    0 16px 36px rgba(8, 38, 61, .10),
    inset 0 1px 0 rgba(255,255,255,.82);
}

.error-state__title {
  margin: 0;
  color: var(--error-title-color);
  font-size: clamp(2rem, 1.55rem + 1.1vw, 2.8rem);
  font-weight: var(--font-weight-extra-bold);
  line-height: 1.3;
  letter-spacing: -.01em;
}

.error-state__text {
  max-width: min(var(--content-reading-width), 44rem);
  margin: 0;
  color: var(--error-text-color);
  font-size: clamp(1rem, .95rem + .22vw, 1.125rem);
  line-height: 2;
}

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

.error-state__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  margin-top: var(--space-2);
}

.error-state__actions .btn {
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background-color .18s ease;
}

.error-state__actions .btn:hover,
.error-state__actions .btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(8, 38, 61, .10);
}

.error-state__details {
  width: 100%;
  max-width: min(var(--content-reading-width), 44rem);
  margin-top: var(--space-3);
  padding: var(--space-5);
  text-align: start;
  background:
    linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(247,250,253,.96) 100%);
  background-color: var(--error-detail-bg);
  border: var(--border-width-1) solid var(--error-detail-border);
  border-radius: var(--radius-xl);
  box-shadow:
    0 10px 22px rgba(8, 38, 61, .04),
    inset 0 1px 0 rgba(255,255,255,.5);
}

.error-state__details-title {
  margin: 0 0 var(--space-2);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.error-state__details-text {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 2;
}

.error-state__list {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.error-state__list li {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 2;
}

/* -------------------------------------------------------------------------
 * Surface Variants
 * ---------------------------------------------------------------------- */
.error-state--boxed {
  --error-bg: var(--color-bg-surface);
  --error-border: rgba(191, 208, 226, .88);
  --error-shadow: 0 24px 52px rgba(8, 38, 61, .10);
}

.error-state--soft {
  --error-bg: var(--color-bg-danger);
  --error-border: transparent;
  --error-shadow: 0 14px 30px rgba(8, 38, 61, .06);
}

.error-state--muted {
  --error-bg: var(--color-bg-surface-muted);
  --error-border: transparent;
}

.error-state--shadow {
  --error-shadow: 0 18px 42px rgba(8, 38, 61, .10);
}

.error-state--bordered {
  --error-border: var(--color-border-default);
}

.error-state--compact {
  --error-padding-x: var(--space-4);
  --error-padding-y: var(--space-6);
  --error-icon-size: 3.25rem;
  gap: var(--space-3);
}

.error-state--compact .error-state__code {
  min-width: 8rem;
  min-height: 3.75rem;
  padding: .7rem 1.2rem;
  font-size: clamp(1.7rem, 1.4rem + 1.2vw, 3rem);
  border-radius: 1.2rem;
}

.error-state--spacious {
  --error-padding-x: var(--space-8);
  --error-padding-y: var(--space-12);
  --error-icon-size: 5.25rem;
  gap: var(--space-6);
}

.error-state--spacious .error-state__code {
  min-width: 12rem;
  min-height: 5rem;
}

.error-state--narrow {
  --error-max-width: 38rem;
}

.error-state--wide {
  --error-max-width: 64rem;
}

/* -------------------------------------------------------------------------
 * Semantic Variants
 * ---------------------------------------------------------------------- */
.error-state--danger,
.error-state--error {
  --error-icon-color: var(--color-icon-danger);
  --error-icon-bg: var(--color-bg-danger);
  --error-code-color: var(--color-danger-700);
}

.error-state--warning {
  --error-icon-color: var(--color-icon-warning);
  --error-icon-bg: var(--color-bg-warning);
  --error-code-color: var(--color-warning-700);
}

.error-state--info {
  --error-icon-color: var(--color-icon-info);
  --error-icon-bg: var(--color-bg-info);
  --error-code-color: var(--color-info-700);
}

.error-state--brand {
  --error-icon-color: var(--color-icon-brand);
  --error-icon-bg: var(--color-bg-brand-soft);
  --error-code-color: var(--color-brand-700);
}

/* -------------------------------------------------------------------------
 * Context Variants
 * ---------------------------------------------------------------------- */
.error-state--page {
  --error-bg: var(--color-bg-surface);
  --error-border: rgba(191, 208, 226, .86);
  --error-shadow: 0 28px 64px rgba(8, 38, 61, .12);
  --error-padding-x: clamp(1.75rem, 1.15rem + 1.4vw, 3.5rem);
  --error-padding-y: clamp(2.5rem, 1.7rem + 2.2vw, 4.75rem);
  min-height: min(76vh, 48rem);
}

.error-state--page .error-state__code {
  margin-bottom: var(--space-1);
}

.error-state--section {
  min-height: 18rem;
}

.error-state--card {
  --error-bg: transparent;
  --error-border: transparent;
  --error-padding-x: var(--space-4);
  --error-padding-y: var(--space-6);
  min-height: 14rem;
}

.error-state--table {
  --error-padding-x: var(--space-4);
  --error-padding-y: var(--space-8);
  min-height: 12rem;
}

.error-state--inline {
  --error-padding-x: 0;
  --error-padding-y: 0;
  --error-bg: transparent;
  --error-border: transparent;
  --error-shadow: none;
  --error-icon-size: 2.75rem;
  --error-max-width: 100%;
  gap: var(--space-3);
}

.error-state--inline .error-state__code {
  min-width: 0;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: clamp(1.15rem, 1rem + .35vw, 1.4rem);
}

.error-state--inline::before,
.error-state--inline::after,
.error-state--card::before,
.error-state--card::after,
.error-state--table::before,
.error-state--table::after {
  display: none;
}

/* -------------------------------------------------------------------------
 * Horizontal Variant
 * ---------------------------------------------------------------------- */
.error-state--horizontal {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: start;
  max-width: 100%;
}

.error-state--horizontal .error-state__content {
  align-items: flex-start;
}

.error-state--horizontal .error-state__meta,
.error-state--horizontal .error-state__actions {
  justify-content: flex-start;
}

.error-state--horizontal .error-state__list {
  text-align: start;
}

/* -------------------------------------------------------------------------
 * Special Error Cases
 * ---------------------------------------------------------------------- */
.error-state--403 {
  --error-icon-color: var(--color-warning-700);
  --error-icon-bg: var(--color-bg-warning);
  --error-code-color: var(--color-warning-700);
}

.error-state--404 {
  --error-icon-color: var(--color-icon-info);
  --error-icon-bg: var(--color-bg-info);
  --error-code-color: var(--color-info-700);
}

.error-state--419 {
  --error-icon-color: var(--color-icon-warning);
  --error-icon-bg: var(--color-bg-warning);
  --error-code-color: var(--color-warning-700);
}

.error-state--500,
.error-state--503 {
  --error-icon-color: var(--color-icon-danger);
  --error-icon-bg: var(--color-bg-danger);
  --error-code-color: var(--color-danger-700);
}

/* -------------------------------------------------------------------------
 * Retry / Recovery Variant
 * ---------------------------------------------------------------------- */
.error-state--recoverable .error-state__details {
  background-color: var(--color-bg-surface-soft);
}

.error-state--recoverable .error-state__title {
  color: var(--color-text-primary);
}

/* -------------------------------------------------------------------------
 * Restricted / Forbidden
 * ---------------------------------------------------------------------- */
.error-state--restricted {
  --error-icon-color: var(--color-warning-700);
  --error-icon-bg: var(--color-bg-warning);
  --error-code-color: var(--color-warning-700);
}

/* -------------------------------------------------------------------------
 * Table Cell Friendly Wrapper
 * ---------------------------------------------------------------------- */
.error-state-cell {
  padding: var(--space-8) var(--space-4);
}

.error-state-cell .error-state {
  --error-padding-x: 0;
  --error-padding-y: 0;
  --error-bg: transparent;
  --error-border: transparent;
  --error-shadow: none;
  --error-max-width: 100%;
  --error-icon-size: 3rem;
}

.error-state-cell .error-state__code {
  min-width: 0;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: clamp(1.35rem, 1.1rem + .4vw, 1.7rem);
}

.error-state-cell .error-state::before,
.error-state-cell .error-state::after {
  display: none;
}

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

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

.error-state-stack--spacious {
  gap: var(--space-6);
}

/* -------------------------------------------------------------------------
 * Expandable Technical Details
 * ---------------------------------------------------------------------- */
.error-state__technical {
  width: 100%;
  max-width: min(var(--content-reading-width), 44rem);
  text-align: start;
}

.error-state__technical summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semi-bold);
  cursor: pointer;
  transition: color .18s ease;
}

.error-state__technical summary:hover {
  color: var(--color-text-primary);
}

.error-state__technical summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
  border-radius: var(--radius-sm);
}

.error-state__technical-body {
  margin-top: var(--space-3);
  padding: var(--space-4);
  overflow: auto;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.9;
  background:
    linear-gradient(180deg, rgba(255,255,255,.84) 0%, rgba(247,250,253,.96) 100%);
  background-color: var(--error-detail-bg);
  border: var(--border-width-1) solid var(--error-detail-border);
  border-radius: var(--radius-xl);
  -webkit-overflow-scrolling: touch;
}

/* -------------------------------------------------------------------------
 * Responsive Refinements
 * ---------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .error-state {
    --error-padding-x: var(--space-4);
    --error-padding-y: var(--space-6);
    --error-icon-size: 3.9rem;
    gap: var(--space-3);
  }

  .error-state__code {
    min-width: 8.2rem;
    min-height: 3.9rem;
    padding: .7rem 1.1rem;
    font-size: clamp(1.9rem, 1.45rem + 2.5vw, 3rem);
    border-radius: 1.25rem;
  }

  .error-state__title {
    font-size: clamp(1.5rem, 1.28rem + .8vw, 1.9rem);
  }

  .error-state__text {
    font-size: var(--font-size-sm);
    line-height: 1.9;
  }

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

  .error-state__actions > * {
    width: 100%;
  }

  .error-state--horizontal {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .error-state--horizontal .error-state__content {
    align-items: center;
  }

  .error-state--horizontal .error-state__meta,
  .error-state--horizontal .error-state__actions {
    justify-content: center;
  }

  .error-state--horizontal .error-state__list {
    text-align: center;
  }

  .error-state__details,
  .error-state__technical,
  .error-state__technical-body {
    max-width: 100%;
  }

  .error-state--page {
    min-height: 55vh;
  }

  .error-state--spacious {
    --error-padding-x: var(--space-5);
    --error-padding-y: var(--space-8);
    --error-icon-size: 4.25rem;
  }
}

@media (min-width: 768px) {
  .error-state__actions--start {
    justify-content: flex-start;
  }

  .error-state__actions--end {
    justify-content: flex-end;
  }

  .error-state__actions--between {
    justify-content: space-between;
  }
}

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