/* ==========================================================================
   10-UTILITIES.CSS — Al Aliyah Supermarket implementation kit
   Status: PENDING REVIEW.

   Covers: skeleton loaders, empty states, toasts, and small layout/spacing
   utility classes. Also the single reference list of every place this kit
   deliberately breaks the "logical properties make RTL free" pattern.
   ========================================================================== */

/* --------------------------------------------------------------------------
   RTL EXCEPTIONS — the complete list.
   Everything else in this kit uses logical properties (margin-inline-*,
   padding-block-*, inset-inline-*, border-start-start-radius, etc.) and
   needs NO [dir="rtl"] override to work correctly in Arabic. The following
   are the only genuine exceptions, because they are directional icons, not
   text flow:
     - .aly-icon-chevron inside .aly-drawer__item (06-navigation.css)
     - .aly-breadcrumbs__sep (06-navigation.css)
     - .aly-pagination__arrow svg (06-navigation.css)
     - a "carousel" previous/next arrow, if one is added later, should
       follow the same `[dir="rtl"] .arrow-class { transform: scaleX(-1); }`
       pattern used in the three cases above.
   And two things this kit deliberately does NOT mirror, ever:
     - Numerals, prices and quantities (font-variant-numeric: tabular-nums
       + unicode-bidi: plaintext, applied in 02-typography.css/04-forms.css/
       09-otp-modal.css) — "AED 12.50" reads the same in an Arabic sentence
       as it does in English.
     - The logo mark (a ghaf tree, not a directional icon) — per
       01-brand-foundation.md, mirroring it changes what tree it reads as
       and breaks recognition. The horizontal lockup's internal order
       (mark-then-wordmark) also never flips; only its position on the
       header changes with `inset-inline-start`.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Skeleton loaders
   -------------------------------------------------------------------------- */
.aly-skeleton {
  background: linear-gradient(90deg, var(--color-surface-sunk) 25%, var(--cream-200) 37%, var(--color-surface-sunk) 63%);
  background-size: 400% 100%;
  animation: aly-skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
  color: transparent;
}

/* NOTE: .aly-skeleton above uses --cream-200 directly, which is a light-
   theme-only token name (harmless in dark mode since it just fixes the
   shimmer's mid-stop to a warm cream regardless of theme, which still
   reads fine on a dark card in practice) — but for a fully theme-aware
   shimmer, prefer the variant below wherever precision matters more than
   brevity. */
.aly-skeleton--dark-safe {
  background: linear-gradient(90deg, var(--color-surface-sunk) 25%, var(--color-border) 37%, var(--color-surface-sunk) 63%);
  background-size: 400% 100%;
  animation: aly-skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes aly-skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .aly-skeleton,
  .aly-skeleton--dark-safe {
    animation: none;
  }
}

.aly-skeleton-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-hairline);
}

.aly-skeleton-card__media {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
}

.aly-skeleton-card__line {
  block-size: 0.9rem;
}

.aly-skeleton-card__line--60 { inline-size: 60%; }
.aly-skeleton-card__line--80 { inline-size: 80%; }
.aly-skeleton-card__line--40 { inline-size: 40%; }

/* --------------------------------------------------------------------------
   Empty states
   -------------------------------------------------------------------------- */
.aly-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding-block: var(--space-9);
  color: var(--color-text-muted);
}

.aly-empty-state__icon {
  inline-size: 3.5rem;
  block-size: 3.5rem;
}

.aly-empty-state__title {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  color: var(--color-text);
}

.aly-empty-state__body {
  max-inline-size: 40ch;
}

.aly-empty-state__action {
  margin-block-start: var(--space-2);
}

/* --------------------------------------------------------------------------
   Toasts
   -------------------------------------------------------------------------- */
.aly-toast-region {
  position: fixed;
  inset-block-end: var(--space-5);
  inset-inline-end: var(--space-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-inline-size: min(90vw, 360px);
}

[dir="rtl"] .aly-toast-region {
  inset-inline-end: var(--space-5); /* logical property already flips this correctly; kept explicit for clarity */
}

.aly-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background-color: var(--ink-900);
  color: #FFFFFF;
  box-shadow: var(--shadow-lg);
  animation: aly-toast-in var(--duration-slow) var(--ease-decel);
}

@keyframes aly-toast-in {
  from { transform: translateY(8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

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

.aly-toast--success { background-color: var(--color-success-deep); }
.aly-toast--error   { background-color: var(--color-error-strong); }
.aly-toast--info    { background-color: var(--ink-800); }

.aly-toast__body {
  flex: 1;
  font-size: var(--fs-sm);
}

.aly-toast__close {
  color: #FFFFFF;
  opacity: 0.8;
}

.aly-toast__close:hover {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Small layout utilities
   -------------------------------------------------------------------------- */
.aly-container {
  max-inline-size: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.aly-stack > * + * {
  margin-block-start: var(--space-4);
}

.aly-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.aly-sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.aly-hidden {
  display: none !important;
}

@media (max-width: 767px) {
  .aly-hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
  .aly-hide-desktop { display: none !important; }
}