/* ═══════════════════════════════════════════════════════════════
   icons.css — سیستم واحد مقیاس‌گذاری آیکون‌ها (v1)
   بارگذاری: بعد از elegant.css (آخرین لایه — اولویت نهایی)
   اصل: همه اندازه‌ها em (نسبت به فونت المان) — بدون px
   ═══════════════════════════════════════════════════════════════ */

/* ── [0] توکن‌های مقیاس ───────────────────────────────────────────
   XL 1.75em  → آیکون‌های قهرمان (خالی‌بودن صفحه، اینفو بزرگ)
   LG 1.4em   → عنوان صفحه (page-title)
   MD 1em     → سرتیترهای بخش (h3) و آیکون داخل دکمه اصلی
   SM 0.85em  → دکمه‌های کوچک، لینک‌های عملیاتی، بج‌ها
   XS 0.7em   → متادیتا (تاریخ، زمان، شمارنده‌های فرعی)           */
:root{
  --ic-xl: 1.75em;
  --ic-lg: 1.4em;
  --ic-md: 1em;
  --ic-sm: 0.85em;
  --ic-xs: 0.7em;
}

/* ── [1] پایه: بازنویسی امن روی همه لایه‌های قبلی ────────────────
   یک‌بار برای همیشه: آیکون = 1em و هیچ‌جا بزرگ‌تر نمی‌شود مگر
   با کلاس صریح. جلوی آیکون‌های ۳۴/۵۴px خودسرانه گرفته می‌شود.   */
.icon{
  width: var(--ic-md) !important;
  height: var(--ic-md) !important;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: inline-block;
  vertical-align: -0.14em;   /* هم‌ترازی نوری با متن */
  flex-shrink: 0;
}

/* کلاس‌های اندازه صریح (برای موارد خاص) */
.icon-xl{ width: var(--ic-xl) !important; height: var(--ic-xl) !important; }
.icon-lg{ width: var(--ic-lg) !important; height: var(--ic-lg) !important; }
.icon-md{ width: var(--ic-md) !important; height: var(--ic-md) !important; }
.icon-sm{ width: var(--ic-sm) !important; height: var(--ic-sm) !important; }
.icon-xs{ width: var(--ic-xs) !important; height: var(--ic-xs) !important; }

/* ── [2] بافت‌ها ────────────────────────────────────────────────── */

/* ۲.۱ عنوان صفحه: LG، هم‌تراز با متن، بدون جعبه گرادیانی سنگین */
.page-title{
  display: flex; align-items: center; gap: .5rem;
}
.page-title > .icon{
  width: var(--ic-lg) !important; height: var(--ic-lg) !important;
  padding: .3em !important;
  border-radius: .45em;
  background: var(--gradient-primary);
  color: #fff;
  box-shadow: var(--shadow-primary-sm);
}

/* ۲.۲ سرتیتر بخش (h3): MD — هم‌خانواده متن */
h3 .icon, h3.flex .icon{ width: var(--ic-md) !important; height: var(--ic-md) !important; }

/* ۲.۳ دکمه: MD داخل دکمه معمولی، SM داخل btn-sm/xs — با تنفس */
.btn .icon{
  width: var(--ic-md) !important; height: var(--ic-md) !important;
  margin-inline-start: -2px;
}
.btn-sm .icon, .btn-xs .icon{
  width: var(--ic-sm) !important; height: var(--ic-sm) !important;
}
.btn{ gap: .45em; }            /* نفس آیکون و متن */
.btn-sm{ gap: .35em; }
.btn-xs{ gap: .3em; }

/* ۲.۴ فیلدهای فرم: آیکون داخل .input بدون تغییر عرض فیلد */
.input-icon{ position: relative; }
.input-icon .icon{
  position: absolute; inset-inline-start: .7em; top: 50%;
  transform: translateY(-50%);
  width: var(--ic-sm) !important; height: var(--ic-sm) !important;
  color: var(--gray-400); pointer-events: none;
}
.input-icon .input{ padding-inline-start: 2.2em; }

/* ۲.۵ لینک‌های عملیاتی جدول‌ها: XS-SM — سبک */
.link-action .icon{ width: var(--ic-xs) !important; height: var(--ic-xs) !important; margin-inline-end: .25em; }

/* ۲.۶ بج‌ها: XS — هرگز نباید از متن بج بزرگ‌تر شود */
.badge .icon{ width: var(--ic-xs) !important; height: var(--ic-xs) !important; }

/* ۲.۷ متادیتا (تاریخ/زمان/شمارنده): XS */
.field-hint .icon, .text-xs .icon, .muted-count .icon{
  width: var(--ic-xs) !important; height: var(--ic-xs) !important;
}

/* ۲.۸ هشدارها (alert): MD با رنگ خود آلارم — هم‌تراز عمودی */
.alert{ display: flex; align-items: flex-start; gap: .6em; }
.alert .alert-icon{
  width: var(--ic-md) !important; height: var(--ic-md) !important;
  margin-top: .15em; color: inherit;
}

/* ۲.۹ جعبه‌های راهنما (help-box): SM — فرعی‌اند */
.help-box .icon{ width: var(--ic-sm) !important; height: var(--ic-sm) !important; }

/* ۲.۱۰ جدول‌ها: آیکون داخل سلول = SM */
.table .icon{ width: var(--ic-sm) !important; height: var(--ic-sm) !important; }

/* ۲.۱۱ حالت خالی: XL ولی محدود به ۴۸px سقف مطلق */
.empty-state .icon{
  width: min(var(--ic-xl), 48px) !important;
  height: min(var(--ic-xl), 48px) !important;
  padding: 0 !important;
  color: var(--gray-300);
}

/* ── [3] سایدبار و ناوبری ──────────────────────────────────────── */
.sidebar-brand-icon{
  width: 34px; height: 34px; border-radius: .5em;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12);
}
.sidebar-brand-icon .icon{ width: 1.25em !important; height: 1.25em !important; }
.sidebar-link .icon{ width: var(--ic-md) !important; height: var(--ic-md) !important; }
.sidebar-link .chev{ width: .8em !important; height: .8em !important; }
.sidebar-user .icon{ width: var(--ic-md) !important; height: var(--ic-md) !important; }

/* ── [4] کاشی‌های آمار (stat-card) ─────────────────────────────── */
.stat-card{ display: flex; align-items: center; gap: .6em; }
.stat-card .tile-ico{
  width: 32px; height: 32px; border-radius: .55em;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--stat-color, var(--color-primary)) 12%, transparent);
  color: var(--stat-color, var(--color-primary));
}
.stat-card .tile-ico .icon{ width: var(--ic-md) !important; height: var(--ic-md) !important; }

/* ── [5] فوتر: XS — فرعی‌ترین لایه ─────────────────────────────── */
footer .icon, .app-footer .icon{ width: var(--ic-xs) !important; height: var(--ic-xs) !important; }
.sp-close .icon{ width: var(--ic-sm) !important; height: var(--ic-sm) !important; }

/* ── [6] دکمه‌های آیکونی مربعی (icon-btn) ──────────────────────── */
.icon-btn{
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2em; height: 2.2em; border-radius: .5em;
  padding: 0;
}
.icon-btn .icon{ width: var(--ic-sm) !important; height: var(--ic-sm) !important; }

/* ── [7] ریسپانسیو: موبایل کمی جمع‌تر ──────────────────────────── */
@media (max-width: 640px){
  :root{ --ic-lg: 1.3em; --ic-xl: 1.6em; }
  .page-title > .icon{ padding: .25em !important; }
}

/* ── [8] کاهش حرکت ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .icon{ transition: none !important; }
}