/* Layer 2 — UI Contract: Atoms (design-system.md بخش ۴).
   BEM + پیشوند insight- (بخش ۱۰)؛ فقط Logical Properties (بخش ۶)؛ فقط زیر کلاس ریشه خودش
   Selector می‌نویسد (بدون Selector عمومی Tag، بخش ۱۰). مصرف‌کننده --bs-*/--insight-*،
   هرگز مقدار خام رنگ/Radius. Import بعد از Bootstrap Vendor‌شده و قبل از CSS شرطی هر
   زیرسیستم (ترتیب بخش ۱۰). */

.insight-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Button ---------- */
/* min-height:44px طبق قانون سخت Accessibility (design-system.md بخش ۵) کم نمی‌شود — فقط
   Padding افقی و اندازه فونت کاهش پیدا کرد تا دکمه نسبت به متن داخلش کوچک‌تر/جمع‌وجورتر
   به نظر برسد، طبق بازخورد صریح کاربر («دکمه‌ها خیلی بزرگه»، نه برعکس). */
.insight-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--insight-space-1, .25rem);
  min-height: 44px;
  padding-inline: var(--insight-space-2, .5rem);
  padding-block: var(--insight-space-1, .25rem);
  border-radius: var(--bs-border-radius);
  border: 1px solid transparent;
  font-weight: 700;
  font-size: .78rem;
  line-height: 1.3;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
}
.insight-button:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}
.insight-button[disabled],
.insight-button[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}
/* Hover هر Variant تیره: تیره‌تر شدن همون رنگ پایه با color-mix (دقیقاً همون الگویی که
   Bootstrap واقعی برای .btn-primary تولید می‌کند — shift-color سمت مشکی)، نه پرش به یک رنگ
   دیگر پالت. طبق بازخورد کاربر ۲۰۲۶-۰۸-۰۸: Hover دکمه «ذخیره» قبلاً روی Primary-2 (Sapphire،
   خانواده رنگ دیگر) می‌رفت که در نگاه اول رنگ بیرون از پالت به نظر می‌رسید. */
.insight-button--primary { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.insight-button--primary:hover { background: color-mix(in srgb, var(--bs-primary) 84%, #000); border-color: color-mix(in srgb, var(--bs-primary) 80%, #000); }
.insight-button--secondary { background: transparent; border-color: var(--bs-border-color); color: var(--bs-body-color); }
.insight-button--secondary:hover { background: var(--bs-tertiary-bg); }
.insight-button--neutral { background: var(--bs-tertiary-bg); border-color: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.insight-button--danger { background: var(--bs-danger); border-color: var(--bs-danger); color: #fff; }
.insight-button--danger:hover { background: color-mix(in srgb, var(--bs-danger) 84%, #000); border-color: color-mix(in srgb, var(--bs-danger) 80%, #000); }
.insight-button--accent { background: var(--bs-accent); border-color: var(--bs-accent); color: #fff; }
.insight-button--accent:hover { background: color-mix(in srgb, var(--bs-accent) 84%, #000); border-color: color-mix(in srgb, var(--bs-accent) 80%, #000); }
.insight-button--accent-2 { background: var(--bs-accent-2); border-color: var(--bs-accent-2); color: #fff; }
.insight-button--accent-2:hover { background: color-mix(in srgb, var(--bs-accent-2) 84%, #000); border-color: color-mix(in srgb, var(--bs-accent-2) 80%, #000); }
.insight-button--ocean { background: var(--bs-ocean); border-color: var(--bs-ocean); color: #fff; }
.insight-button--ocean:hover { background: color-mix(in srgb, var(--bs-ocean) 84%, #000); border-color: color-mix(in srgb, var(--bs-ocean) 80%, #000); }
.insight-button--ghost { background: transparent; border-color: transparent; color: var(--bs-primary); }
.insight-button--ghost:hover { background: var(--bs-tertiary-bg); }
.insight-button--link { background: transparent; border-color: transparent; color: var(--bs-primary); min-height: auto; padding: 0; text-decoration: underline; }
.insight-button--sm { min-height: 36px; padding-inline: var(--insight-space-1, .25rem); font-size: .72rem; }
.insight-button--lg { min-height: 52px; padding-inline: var(--insight-space-3, .75rem); font-size: .88rem; }
.insight-button--icon-only { padding-inline: var(--insight-space-2, .5rem); aspect-ratio: 1; }
.insight-button__label { display: inline-block; }

/* ---------- Field (wrapper for Input/Textarea/Select — Molecule Form Field re-uses this) ---------- */
.insight-field { display: flex; flex-direction: column; gap: var(--insight-space-1, .25rem); }
.insight-field__label { font-size: .85rem; font-weight: 700; color: var(--bs-body-color); }
.insight-field__required { color: var(--bs-danger); }
.insight-field__help { margin: 0; font-size: .8rem; color: var(--bs-secondary-color); }
.insight-field__error { margin: 0; font-size: .8rem; color: var(--bs-danger); }
.insight-field__success { margin: 0; font-size: .8rem; color: var(--bs-success); }
.insight-field--invalid .insight-field__control { border-color: var(--bs-danger); }
.insight-field--valid .insight-field__control { border-color: var(--bs-success); }

/* ---------- Input / Textarea / Select ---------- */
.insight-input,
.insight-select {
  min-height: 44px;
  width: 100%;
  padding-inline: var(--insight-space-3, .75rem);
  padding-block: var(--insight-space-1, .25rem);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  font: inherit;
  font-size: .9rem;
  text-align: start;
}
.insight-input::placeholder { color: var(--bs-secondary-color); opacity: .8; }
.insight-input:focus,
.insight-select:focus {
  outline: 2px solid var(--bs-primary);
  outline-offset: 1px;
  border-color: var(--bs-primary);
}
textarea.insight-input { min-height: 96px; padding-block: var(--insight-space-3, .75rem); resize: vertical; }
/* خنثی‌سازی نشانگر بومی :invalid مرورگر (فایرفاکس/سافاری روی فیلد required خالی، پیش از
   Submit، یک Glow/Outline قرمز سیستمی بیرون از پالت پروژه اضافه می‌کنند) — طبق بازخورد کاربر
   ۲۰۲۶-۰۸-۰۸ («رنگ فیلدهای الزامی از پالت استاندارد تبعیت نمی‌کند»). نمایش خطا فقط با
   `.insight-field--invalid` (کلاس خودمان، رنگ var(--bs-danger)) انجام می‌شود. */
.insight-input:invalid,
.insight-select:invalid,
.insight-input:-moz-ui-invalid,
.insight-select:-moz-ui-invalid { box-shadow: none; }
/* حالت Disabled — طبق ممیزی Task #97 (۲۰۲۶-۰۸-۰۸): قبلاً فقط دکمه [disabled] داشت؛ Input/
   Select هیچ استایلی نداشتند و ظاهر پیش‌فرض خام مرورگر می‌گرفتند (core.js حین ارسال Async
   فرم دقیقاً همین Attribute را روی فیلدها می‌گذارد — یک حالت واقعاً در تولید، نه فرضی). */
.insight-input:disabled,
.insight-select:disabled { opacity: .6; cursor: not-allowed; background: var(--bs-tertiary-bg); }
.insight-input[readonly] { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }
/* File Input — ظاهر بومی مرورگر (دکمه + نام فایل) با استایل‌های متنی معمولی هماهنگ نیست؛
   طبق فهرست Forms (Task #99). */
.insight-input[type="file"] { padding-block: var(--insight-space-2, .5rem); cursor: pointer; }
.insight-input[type="file"]::file-selector-button {
  margin-inline-end: var(--insight-space-3, .75rem);
  padding: .35rem .75rem;
  border: 0;
  border-radius: var(--bs-border-radius-sm);
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.insight-input[type="file"]::file-selector-button:hover { background: color-mix(in srgb, var(--bs-tertiary-bg) 80%, #000); }

/* ---------- Input Group (Prefix/Suffix، طبق فهرست Forms Task #99) ---------- */
.insight-input-group { display: flex; align-items: stretch; }
.insight-input-group .insight-input,
.insight-input-group .insight-select { border-radius: 0; }
.insight-input-group__addon:first-child + .insight-input,
.insight-input-group__addon:first-child + .insight-select { border-start-start-radius: var(--bs-border-radius); border-end-start-radius: var(--bs-border-radius); }
.insight-input-group > .insight-input:first-child,
.insight-input-group > .insight-select:first-child { border-start-start-radius: var(--bs-border-radius); border-end-start-radius: var(--bs-border-radius); }
.insight-input-group > .insight-input:last-child,
.insight-input-group > .insight-select:last-child,
.insight-input-group > .insight-input-group__addon:last-child { border-start-end-radius: var(--bs-border-radius); border-end-end-radius: var(--bs-border-radius); }
.insight-input-group__addon {
  display: flex; align-items: center; padding-inline: var(--insight-space-3, .75rem);
  background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color);
  color: var(--bs-secondary-color); font-size: .85rem; white-space: nowrap;
}
.insight-input-group__addon:first-child { border-inline-end: 0; border-start-start-radius: var(--bs-border-radius); border-end-start-radius: var(--bs-border-radius); }
.insight-input-group__addon:last-child { border-inline-start: 0; border-start-end-radius: var(--bs-border-radius); border-end-end-radius: var(--bs-border-radius); }
.insight-input-group .insight-input { border-radius: 0; }

/* ---------- Checkbox / Radio / Switch ---------- */
/* min-height:44px (ناحیه لمسی، طبق قانون سخت Accessibility) دست‌نخورده ماند؛ فقط اندازه
   بصری خودِ Control/Switch و متن Label کمی جمع‌وجورتر شد. */
.insight-choice { display: inline-flex; align-items: center; gap: var(--insight-space-2, .5rem); min-height: 44px; }
.insight-choice__control { width: 18px; height: 18px; accent-color: var(--bs-primary); cursor: pointer; }
/* Focus/Disabled — طبق ممیزی Task #97: قبلاً هیچ‌کدام تعریف نشده بود (فقط رفتار پیش‌فرض
   مرورگر)، برخلاف Input/Select/Button که Focus Ring یکسان var(--bs-primary) دارند. */
.insight-choice__control:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.insight-choice__control:disabled { opacity: .6; cursor: not-allowed; }
.insight-choice:has(.insight-choice__control:disabled) .insight-choice__label { opacity: .6; cursor: not-allowed; }
.insight-choice__label { cursor: pointer; font-size: .85rem; color: var(--bs-body-color); }
/* عنوان + توضیح دو‌خطی (فهرست مجوز/دسترسی) — ابعاد/تراز از .access-check قدیمی پورت شد،
   طبق Task #102 (Production Migration)، تا با insight_checkbox(..., ['label_html' => ...])
   جایگزین شود، نه با یک کلاس CSS موازی مصرف‌نشده از کتابخانه. */
.insight-choice--described { align-items: flex-start; min-height: 0; }
.insight-choice--described .insight-choice__control { margin-block-start: 3px; flex-shrink: 0; }
.insight-choice--described .insight-choice__label { display: grid; gap: .1rem; }
.insight-choice--described .insight-choice__label small { font-weight: 400; color: var(--bs-secondary-color); }
.insight-choice--switch .insight-choice__control {
  appearance: none;
  width: 34px;
  height: 19px;
  border-radius: 999px;
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  position: relative;
  transition: background-color .18s ease;
}
.insight-choice--switch .insight-choice__control::after {
  content: "";
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  transition: inset-inline-start .18s ease;
}
.insight-choice--switch .insight-choice__control:checked { background: var(--bs-primary); border-color: var(--bs-primary); }
.insight-choice--switch .insight-choice__control:checked::after { inset-inline-start: 19px; }

/* ---------- Badge / Status Pill ---------- */
.insight-badge {
  display: inline-flex;
  align-items: center;
  padding-inline: var(--insight-space-2, .5rem);
  padding-block: .2rem;
  border-radius: var(--insight-radius-sm, var(--bs-border-radius-sm));
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.6;
}
.insight-badge--neutral { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.insight-badge--success { background: var(--bs-success-bg-subtle, var(--bs-success)); color: var(--bs-success-text-emphasis, #fff); }
.insight-badge--warning { background: var(--bs-warning-bg-subtle, var(--bs-warning)); color: var(--bs-warning-text-emphasis, #fff); }
.insight-badge--danger { background: var(--bs-danger-bg-subtle, var(--bs-danger)); color: var(--bs-danger-text-emphasis, #fff); }
.insight-badge--info { background: var(--bs-info-bg-subtle, var(--bs-info)); color: var(--bs-info-text-emphasis, #fff); }

/* ---------- Icon ---------- */
.insight-icon { width: 1.15em; height: 1.15em; flex: 0 0 auto; vertical-align: -0.2em; }
[dir="rtl"] .insight-icon--directional { transform: scaleX(-1); }

/* ---------- Spinner ---------- */
/* gap اضافه شد: در استفاده فعلی برچسب Screen-reader-only است (نامرئی)، ولی اگه یک
   زیرسیستم بعداً برچسب قابل‌مشاهده کنار Spinner گذاشت، بدون این gap آیکون و متن به هم
   می‌چسبند. */
.insight-spinner { display: inline-flex; align-items: center; justify-content: center; gap: var(--insight-space-2, .5rem); }
.insight-spinner__visual {
  width: 1.2em;
  height: 1.2em;
  border: 2px solid var(--bs-tertiary-bg);
  border-inline-start-color: var(--bs-primary);
  border-radius: 50%;
  animation: insight-spin .8s linear infinite;
}
.insight-spinner--sm .insight-spinner__visual { width: .9em; height: .9em; }
.insight-spinner--lg .insight-spinner__visual { width: 1.6em; height: 1.6em; }
.insight-spinner__label { font-size: .85rem; color: var(--bs-secondary-color); }
@keyframes insight-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .insight-spinner__visual { animation-duration: 2s; }
}

/* ---------- Avatar ---------- */
.insight-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  font-weight: 700;
  overflow: hidden;
  object-fit: cover;
}
.insight-avatar--sm { width: 28px; height: 28px; font-size: .75rem; }
.insight-avatar--lg { width: 56px; height: 56px; font-size: 1.25rem; }