/* Layer 2 — UI Contract: Molecules (design-system.md بخش ۴). */

/* ---------- Search Box ---------- */
.insight-search-box {
  display: flex;
  align-items: center;
  gap: var(--insight-space-2, .5rem);
  min-height: 44px;
  padding-inline: var(--insight-space-3, .75rem);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-body-bg);
}
.insight-search-box .insight-icon { color: var(--bs-secondary-color); }
.insight-search-box__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  color: var(--bs-body-color);
}
@media (max-width: 576px) { .insight-search-box { width: 100%; } }

/* ---------- Filter Chip ---------- */
.insight-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--insight-space-1, .25rem);
  padding-inline-start: var(--insight-space-3, .75rem);
  padding-inline-end: var(--insight-space-1, .25rem);
  padding-block: .2rem;
  border-radius: 999px;
  background: var(--bs-tertiary-bg);
  font-size: .8rem;
  color: var(--bs-body-color);
}
.insight-filter-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--bs-secondary-color);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.insight-filter-chip__remove:hover { background: var(--bs-secondary-bg); color: var(--bs-body-color); }

/* ---------- Stat/KPI Card ----------
   ردیف Flex (Logical، جهت‌مستقل): __body سمت شروع، آیکون اختیاری سمت پایان — طبق بازخورد
   کاربر ۲۰۲۶-۰۸-۰۸، جایگزین Positioning مطلق قبلی (که با margin فیزیکی روی برچسب در RTL از
   سمت نادرست فاصله می‌گرفت). «بدون آیکون» (بدون Class تغییر) دقیقاً همون چیزیه که Card-List
   استفاده می‌کند — یک Component، دو Variant رسمی، نه دو طراحی جدا. */
.insight-stat-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--insight-space-3, .75rem);
  padding: var(--insight-space-4, 1rem);
  border-radius: var(--bs-border-radius-lg);
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  box-shadow: var(--insight-shadow);
  text-decoration: none;
}
.insight-stat-card__body { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.insight-stat-card--link { transition: border-color .15s ease, box-shadow .15s ease; }
.insight-stat-card--link:hover, .insight-stat-card--link:focus-visible { border-color: var(--bs-primary); box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb, 31, 2, 123), .15); }
.insight-stat-card__label { margin: 0; font-size: .8rem; color: var(--bs-secondary-color); }
.insight-stat-card__value { margin: 0; font-size: 1.5rem; font-weight: 800; color: var(--bs-body-color); display: flex; align-items: baseline; gap: var(--insight-space-1, .25rem); }
.insight-stat-card__unit { font-size: .9rem; font-weight: 500; color: var(--bs-secondary-color); }
.insight-stat-card__trend { display: inline-block; width: .7em; height: .7em; }
.insight-stat-card__trend--up { color: var(--bs-success); }
.insight-stat-card__trend--down { color: var(--bs-danger); }
/* آیکون رنگی گوشه — اقتباس از الگوی «Small Box» AdminLTE v4 (بخش ۲۷). اندازه از ۴۰px به ۳۶px
   کاهش یافت تا نسبت به بلوک متن (برچسب کوچک + عدد) کمتر غالب باشد (بازخورد «تناسب اندازه»). */
.insight-stat-card__icon { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; }
.insight-stat-card__icon .insight-icon { width: 1.05em; height: 1.05em; }
.insight-stat-card__icon--primary { background: color-mix(in srgb, var(--bs-primary) 14%, var(--bs-body-bg)); color: var(--bs-primary); }
.insight-stat-card__icon--accent { background: color-mix(in srgb, var(--bs-accent) 14%, var(--bs-body-bg)); color: var(--bs-accent); }
.insight-stat-card__icon--ocean { background: color-mix(in srgb, var(--bs-ocean) 14%, var(--bs-body-bg)); color: var(--bs-ocean); }
.insight-stat-card__icon--success { background: var(--bs-success-bg-subtle, color-mix(in srgb, var(--bs-success) 14%, var(--bs-body-bg))); color: var(--bs-success); }
.insight-stat-card__icon--warning { background: var(--bs-warning-bg-subtle, color-mix(in srgb, var(--bs-warning) 14%, var(--bs-body-bg))); color: var(--bs-warning); }
.insight-stat-card__icon--danger { background: var(--bs-danger-bg-subtle, color-mix(in srgb, var(--bs-danger) 14%, var(--bs-body-bg))); color: var(--bs-danger); }
@media (max-width: 576px) { .insight-stat-card { width: 100%; } }

/* ---------- Tier Card (طبق بازخورد کاربر ۲۰۲۶-۰۸-۰۸): کارت رتبه‌بندی رنگی چندسطری عمومی؛
   Country Tier Card ماژول MI مستقیماً همین Component را با داده کشور صدا می‌زند. رنگ هر
   Tone از --insight-tier-* در tokens.css می‌آید — هیچ رنگ موردی/جدید بیرون از Token. */
.insight-tier-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: var(--insight-space-2, .5rem); width: 100%; }
.insight-tier-card { border-radius: var(--bs-border-radius); padding: var(--insight-space-2, .5rem) var(--insight-space-1, .25rem); text-align: center; }
.insight-tier-card span { display: block; font-size: .65rem; font-weight: 700; }
.insight-tier-card b { display: block; font-size: 1.05rem; font-weight: 800; line-height: 1.2; }
.insight-tier-card small { display: block; font-size: .6rem; opacity: .8; }
.insight-tier-card--a-plus { background: var(--insight-tier-a-plus-bg); color: var(--insight-tier-a-plus-text); }
.insight-tier-card--a { background: var(--insight-tier-a-bg); color: var(--insight-tier-a-text); }
.insight-tier-card--b-plus { background: var(--insight-tier-b-plus-bg); color: var(--insight-tier-b-plus-text); }
.insight-tier-card--c { background: var(--insight-tier-c-bg); color: var(--insight-tier-c-text); }
.insight-tier-card--na { background: var(--insight-tier-na-bg); color: var(--insight-tier-na-text); }

/* ---------- Task #98: Design System Library Expansion (بنچمارک AdminLTE v4) ---------- */

/* ---------- Card (پایه عمومی Header/Body/Footer) ---------- */
.insight-card { border-radius: var(--bs-border-radius-lg); background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); box-shadow: var(--insight-shadow); overflow: hidden; }
.insight-card__header { padding: var(--insight-space-3, .75rem) var(--insight-space-4, 1rem); border-bottom: 1px solid var(--bs-border-color); font-weight: 700; }
.insight-card__body { padding: var(--insight-space-4, 1rem); }
.insight-card__footer { padding: var(--insight-space-3, .75rem) var(--insight-space-4, 1rem); border-top: 1px solid var(--bs-border-color); }
.insight-card--accent-primary { border-inline-start: 4px solid var(--bs-primary); }
.insight-card--accent-accent { border-inline-start: 4px solid var(--bs-accent); }
.insight-card--accent-success { border-inline-start: 4px solid var(--bs-success); }
.insight-card--accent-warning { border-inline-start: 4px solid var(--bs-warning); }
.insight-card--accent-danger { border-inline-start: 4px solid var(--bs-danger); }
/* --link — عیناً همان رفتار Hover/Focus مستند‌شده .insight-stat-card--link، نه یک الگوی تازه. */
.insight-card--link { display: block; color: inherit; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
.insight-card--link:hover, .insight-card--link:focus-visible { border-color: var(--bs-primary); box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb, 31, 2, 123), .15); }

/* ---------- Info Box ---------- */
.insight-info-box { display: flex; align-items: center; gap: var(--insight-space-3, .75rem); padding: var(--insight-space-3, .75rem); border-radius: var(--bs-border-radius-lg); background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); box-shadow: var(--insight-shadow); }
.insight-info-box__icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--bs-border-radius); display: grid; place-items: center; }
.insight-info-box__icon--primary { background: color-mix(in srgb, var(--bs-primary) 14%, var(--bs-body-bg)); color: var(--bs-primary); }
.insight-info-box__icon--accent { background: color-mix(in srgb, var(--bs-accent) 14%, var(--bs-body-bg)); color: var(--bs-accent); }
.insight-info-box__icon--ocean { background: color-mix(in srgb, var(--bs-ocean) 14%, var(--bs-body-bg)); color: var(--bs-ocean); }
.insight-info-box__icon--success { background: var(--bs-success-bg-subtle); color: var(--bs-success); }
.insight-info-box__icon--warning { background: var(--bs-warning-bg-subtle); color: var(--bs-warning); }
.insight-info-box__icon--danger { background: var(--bs-danger-bg-subtle); color: var(--bs-danger); }
.insight-info-box__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.insight-info-box__label { font-size: .78rem; color: var(--bs-secondary-color); }
.insight-info-box__value { font-size: 1.15rem; font-weight: 800; color: var(--bs-body-color); }

/* ---------- Progress ---------- */
.insight-progress-wrap { display: flex; flex-direction: column; gap: .3rem; width: 100%; }
.insight-progress__label { display: flex; align-items: center; justify-content: space-between; font-size: .8rem; color: var(--bs-secondary-color); }
.insight-progress__label b { color: var(--bs-body-color); }
.insight-progress { width: 100%; height: 8px; border-radius: 999px; background: var(--bs-tertiary-bg); overflow: hidden; }
.insight-progress__bar { height: 100%; border-radius: inherit; transition: width .3s ease; }
.insight-progress__bar--primary { background: var(--bs-primary); }
.insight-progress__bar--accent { background: var(--bs-accent); }
.insight-progress__bar--success { background: var(--bs-success); }
.insight-progress__bar--warning { background: var(--bs-warning); }
.insight-progress__bar--danger { background: var(--bs-danger); }

/* ---------- Chip ---------- */
.insight-chip { display: inline-flex; align-items: center; padding-inline: var(--insight-space-2, .5rem); padding-block: .2rem; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.insight-chip--neutral { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.insight-chip--primary { background: color-mix(in srgb, var(--bs-primary) 12%, var(--bs-body-bg)); color: var(--bs-primary); }
.insight-chip--accent { background: color-mix(in srgb, var(--bs-accent) 12%, var(--bs-body-bg)); color: var(--bs-accent); }

/* ---------- Loading State ---------- */
.insight-loading-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--insight-space-3, .75rem); padding: var(--insight-space-5, 1.5rem); min-height: 160px; color: var(--bs-secondary-color); }
.insight-loading-state__message { margin: 0; font-size: .85rem; }

/* ---------- Skeleton ---------- */
.insight-skeleton { display: inline-block; background: linear-gradient(90deg, var(--bs-tertiary-bg) 25%, var(--bs-border-color) 37%, var(--bs-tertiary-bg) 63%); background-size: 400% 100%; animation: insight-skeleton-shimmer 1.4s ease infinite; }
.insight-skeleton--text { width: 100%; height: .9em; border-radius: var(--bs-border-radius-sm); }
.insight-skeleton--circle { width: 40px; height: 40px; border-radius: 50%; }
.insight-skeleton--rect { width: 100%; height: 100px; border-radius: var(--bs-border-radius); }
@keyframes insight-skeleton-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .insight-skeleton { animation: none; } }

/* ---------- Chart Contract (طبق Task #99 — Container/Adapter) + Chart Adapter واقعی (طبق تسک
   #۱۱۲ و ADR-0016: Chart.js 4.5.1) ---------- */
.insight-chart-wrap { display: flex; flex-direction: column; gap: var(--insight-space-2, .5rem); width: 100%; }
.insight-chart__title { margin: 0; font-size: .9rem; font-weight: 700; color: var(--bs-body-color); }
.insight-chart { display: flex; align-items: center; justify-content: center; width: 100%; border-radius: var(--bs-border-radius-lg); background: var(--bs-tertiary-bg); border: 1px dashed var(--bs-border-color); }
.insight-chart__placeholder { font-size: .8rem; color: var(--bs-secondary-color); }
.insight-chart.is-rendered { display: block; background: none; border: 0; }
.insight-chart.is-rendered .insight-chart__placeholder { display: none; }
/* Canvas Chart.js باید یک والد با اندازه صریح داشته باشد تا responsive:true/maintainAspectRatio:false
   درست کار کند؛ ارتفاع صریح خودِ insight_chart() (Inline style) روی .insight-chart تعیین می‌شود،
   این فقط ۱۰۰٪ همان فضا را پر می‌کند. dir="ltr" (تنظیم‌شده در JS) برای ایزوله‌سازی محور/عدد است؛
   برچسب‌های فارسی داخل Canvas مستقل از این Attribute درست رسم می‌شوند. */
.insight-chart__canvas-wrap { position: relative; width: 100%; height: 100%; }

/* ---------- Sparkline (تنها نمودار واقعاً رسم‌شده، بدون کتابخانه) ---------- */
.insight-sparkline { display: flex; align-items: flex-end; gap: 2px; height: 32px; width: 100%; }
.insight-sparkline__bar { flex: 1 1 0; min-width: 2px; border-radius: 1px 1px 0 0; }
.insight-sparkline__bar--primary { background: var(--bs-primary); }
.insight-sparkline__bar--accent { background: var(--bs-accent); }
.insight-sparkline__bar--success { background: var(--bs-success); }

/* ---------- Toast (single) ---------- */
.insight-toast {
  display: flex;
  align-items: center;
  gap: var(--insight-space-2, .5rem);
  padding-inline: var(--insight-space-3, .75rem);
  padding-block: var(--insight-space-2, .5rem);
  border-radius: var(--bs-border-radius);
  box-shadow: var(--insight-shadow);
  font-size: .82rem;
  color: #fff;
}
.insight-toast--success { background: var(--bs-success); }
.insight-toast--error { background: var(--bs-danger); }
.insight-toast--warning { background: var(--bs-warning); color: var(--bs-body-color); }
.insight-toast--info { background: var(--bs-secondary-color); }
@media (max-width: 576px) { .insight-toast { width: 100%; } }

/* ---------- Alert (طبق فهرست رسمی Componentهای وابسته به JS بوت‌استرپ) ---------- */
.insight-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--insight-space-2, .5rem);
  padding-inline: var(--insight-space-4, 1rem);
  padding-block: var(--insight-space-3, .75rem);
  border: 1px solid transparent;
  border-radius: var(--bs-border-radius);
  font-size: .85rem;
  line-height: 1.7;
}
.insight-alert--success { background: var(--bs-success-bg-subtle, #e7f7ef); color: var(--bs-success-text-emphasis, var(--bs-success)); border-color: var(--bs-success-border-subtle, transparent); }
.insight-alert--warning { background: var(--bs-warning-bg-subtle, #fff4d8); color: var(--bs-warning-text-emphasis, var(--bs-warning)); border-color: var(--bs-warning-border-subtle, transparent); }
.insight-alert--danger { background: var(--bs-danger-bg-subtle, #fdecec); color: var(--bs-danger-text-emphasis, var(--bs-danger)); border-color: var(--bs-danger-border-subtle, transparent); }
.insight-alert--info { background: var(--bs-info-bg-subtle, #eef6fd); color: var(--bs-info-text-emphasis, var(--bs-info)); border-color: var(--bs-info-border-subtle, transparent); }
.insight-alert__body { display: flex; align-items: flex-start; gap: var(--insight-space-2, .5rem); min-width: 0; flex: 1 1 auto; }
.insight-alert__icon { flex: 0 0 auto; margin-block-start: .1rem; }
.insight-alert__close { border: 0; background: transparent; font-size: 1.1rem; line-height: 1; cursor: pointer; color: inherit; opacity: .65; min-width: 44px; min-height: 44px; flex: 0 0 auto; }
.insight-alert__close:hover { opacity: 1; }