/* =====================================================================
   Persian Shop :: UI Enhancement Layer
   ---------------------------------------------------------------------
   لایه بهبود رابط کاربری — بعد از همه فایل‌های CSS لود می‌شود تا
   بدون دست‌کاری فایل‌های پایه، تجربه بصری را ارتقا دهد.
   قواعد: فقط transform/opacity انیمیت می‌شوند، همیشه
   prefers-reduced-motion رعایت می‌شود، کنتراست WCAG AA حفظ می‌شود.
   ===================================================================== */

/* ---------- 1. UI Enhancement: توکن‌های تعاملی ---------- */
:root {
  /* سایه‌های چندلایه برای عمق واقعی‌تر (Dribbble shadow layering) */
  --sh-card: 0 1px 2px rgba(39,48,67,.04), 0 4px 12px rgba(39,48,67,.05);
  --sh-card-hover: 0 2px 4px rgba(39,48,67,.05), 0 10px 24px rgba(39,48,67,.09);
  --sh-raised: 0 1px 2px rgba(39,48,67,.06), 0 8px 20px rgba(39,48,67,.08), 0 20px 44px rgba(39,48,67,.07);
  /* حلقه فوکوس توپر که روی دکمه‌های پر هم دیده می‌شود */
  --focus-ring: 0 0 0 3px var(--c-white), 0 0 0 6px var(--mm-primary-400);
}

/* ---------- 2. UI Enhancement: اسکرول‌بار مدرن ---------- */
* { scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--c-ink-300) 78%, transparent) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--c-ink-300) 78%, transparent);
  border-radius: var(--r-full);
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--c-ink-400); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ---------- 3. UI Enhancement: کتابخانه انیمیشن ---------- */
@keyframes ui-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-slide-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ui-scale-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@keyframes ui-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

/* ورودی نرم محتوای اصلی هر صفحه (فقط بار اول) */
main#main > .container > *:not(.skeleton) { animation: ui-slide-up .38s var(--mm-ease) both; }
main#main > .container > *:nth-child(2) { animation-delay: .05s; }
main#main > .container > *:nth-child(3) { animation-delay: .09s; }
main#main > .container > *:nth-child(n+4) { animation-delay: .12s; }
main#admin-content > * { animation: ui-slide-up .34s var(--mm-ease) both; }
main#admin-content > *:nth-child(2) { animation-delay: .04s; }
main#admin-content > *:nth-child(n+3) { animation-delay: .08s; }

/* ---------- 4. UI Enhancement: حالت‌های کامل دکمه ---------- */
.btn { box-shadow: 0 1px 2px rgba(39,48,67,.05); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* disabled واقعی: کم‌رنگ + ممنوع + بدون سایه */
.btn[disabled], .btn:disabled, .btn.is-disabled {
  opacity: .5; cursor: not-allowed; box-shadow: none; transform: none !important; filter: grayscale(.35);
}
.btn--ghost { background: var(--c-white); box-shadow: 0 1px 2px rgba(39,48,67,.04); }
.btn--ghost:hover { box-shadow: var(--sh-card); }
.icon-btn { position: relative; }
.icon-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- 5. UI Enhancement: فرم‌های حرفه‌ای ---------- */
.input, .select, .textarea { box-shadow: 0 1px 2px rgba(39,48,67,.03) inset; }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--mm-primary-50), 0 1px 2px rgba(39,48,67,.05);
}
/* validation: قرمز + بج خطا؛ سبز در حالت تایید */
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--c-danger-500) !important;
  box-shadow: 0 0 0 3px var(--c-danger-50);
}
.field.is-valid .input, .field.is-valid .select { border-color: var(--c-success-500); box-shadow: 0 0 0 3px var(--c-success-50); }
.field__error { display: flex; align-items: center; gap: 4px; font-weight: 600; }
.field__error::before { content: '⚠'; font-size: .85em; }
/* فلش سفارشی select */
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235a6478' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left var(--sp-3) center;
  padding-inline-end: var(--sp-3);
}
[dir="rtl"] .select { background-position: left var(--sp-3) center; }

/* ---------- 6. UI Enhancement: کارت‌ها با hover elevation ---------- */
.card, .admin-panel { transition: box-shadow .22s var(--mm-ease), border-color .22s var(--mm-ease), transform .22s var(--mm-ease); }
.card:hover { box-shadow: var(--sh-card-hover); }
.admin-panel { box-shadow: var(--sh-card); }
.product-card, .mk-card { transition: box-shadow .25s var(--mm-ease), transform .25s var(--mm-ease), border-color .25s var(--mm-ease); }
.product-card:hover, .mk-card:hover { box-shadow: var(--sh-card-hover); }

/* ---------- 7. UI Enhancement: toast با آیکون و دکمه بستن ---------- */
.toast {
  display: flex; align-items: center; gap: var(--sp-2);
  min-width: 220px; max-width: 360px;
  padding: var(--sp-3) var(--sp-4);
  color: #fff; font-weight: 500;
  animation: toast-in .22s var(--mm-ease);
}
.toast::before { font-size: 1.05em; flex: 0 0 auto; }
.toast--success::before { content: '✓'; }
.toast--error::before   { content: '✕'; }
.toast--info::before    { content: 'ℹ'; }
.toast--success { background: var(--c-success-700); }
.toast--error   { background: var(--c-danger-600); }
.toast--info    { background: var(--c-ink-800); }
.toast__close {
  margin-inline-start: auto; border: 0; background: transparent; color: #fff;
  width: 26px; height: 26px; border-radius: var(--r-sm);
  cursor: pointer; opacity: .75; font-size: 14px; line-height: 1; flex: 0 0 auto;
}
.toast__close:hover { opacity: 1; background: rgba(255,255,255,.14); }

/* ---------- 8. UI Enhancement: حالت خالی جذاب‌تر ---------- */
.empty { animation: ui-scale-in .4s var(--mm-ease) both; }
.empty__art { transition: transform .3s var(--mm-ease); }
.empty:hover .empty__art { transform: translateY(-4px); }

/* ---------- 9. UI Enhancement: اسکلتون غنی‌تر ---------- */
.skeleton { animation: shimmer 1.4s ease-in-out infinite; }

/* ---------- 10. UI Enhancement: ردیف جدول با لحن بیشتر ---------- */
.table tbody tr { transition: background-color var(--transition), box-shadow var(--transition); }
.table tbody tr:hover { background: color-mix(in oklab, var(--mm-primary-50) 55%, var(--c-white)); }

/* ---------- 11. UI Enhancement: برای پرکاربردها ---------- */
.product-card__quick, .mk-card__save { transition: opacity .18s var(--mm-ease), transform .18s var(--mm-ease), background-color .18s var(--mm-ease); }
.pagination a, .pagination span { transition: border-color var(--transition), color var(--transition), background-color var(--transition); }
.nav__link, .side-nav__link, .footer__link { transition: color .18s var(--mm-ease), background-color .18s var(--mm-ease); }

/* ---------- 12. UI Enhancement: احترام به reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  main#main > .container > *, main#admin-content > *, .empty { animation: none; }
  .card, .product-card, .mk-card, .btn, .empty__art { transition: none; }
  .toast { animation: none; }
}