/**
 * module-x.css — استایل موتور ماژول‌های واردشده (modules/*)
 * فقط برای کلاس‌های پیشوند mi- (module interface). بدون تداخل با admin-panel.css.
 * پیشوند اجباری: همه‌ی قواعد از .mi-* شروع می‌شوند تا افزودن ماژول جدید CSS جدید نطلبد.
 */

/* ---------- وضعیت اتصال ---------- */
.mi-status {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted, var(--color-text-muted, #5A6B7B));
  white-space: nowrap;
}
.mi-status--ok { color: var(--color-success, var(--color-primary, #357A1B)); }
.mi-status--err { color: var(--color-danger, #b5463f); }
.mi-status--muted { color: var(--color-text-subtle, var(--color-text-subtle, #64748B)); }

/* ---------- سربرگ موجودیت ---------- */
.mi-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3, 12px);
  justify-content: space-between;
  margin-bottom: var(--space-4, 16px);
}
.mi-head__title { display: flex; align-items: center; gap: var(--space-2, 8px); flex-wrap: wrap; }
.mi-head__title h2 { margin: 0; font-size: var(--text-xl, 20px); font-weight: 800; color: var(--color-text, var(--color-text, #1A222B)); }
.mi-head__title > i { color: var(--color-primary, var(--color-primary, #357A1B)); }
.mi-head__title code {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-subtle, var(--color-text-subtle, #64748B));
  background: var(--color-surface-sunken, var(--color-surface-sunken, #F6F8FA));
  border: 1px solid var(--color-border, var(--color-border, #E9EDF0));
  border-radius: var(--radius-sm, 8px);
  padding: 1px 6px;
}
.mi-head__actions { display: flex; align-items: center; gap: var(--space-2, 8px); flex-wrap: wrap; }

/* ---------- جستجو و فیلترها ---------- */
.mi-search {
  position: relative;
  display: flex;
  align-items: center;
}
.mi-search i {
  position: absolute;
  inset-inline-start: 10px;
  font-size: 12px;
  color: var(--color-text-subtle, var(--color-text-subtle, #64748B));
  pointer-events: none;
}
.mi-search input {
  font-family: inherit;
  font-size: var(--text-sm, 13px);
  height: 34px;
  min-width: 200px;
  padding: 0 10px 0 30px;
  border: 1px solid var(--color-border, var(--color-border, #E9EDF0));
  border-radius: var(--radius-sm, 8px);
  background: var(--color-surface, #fff);
  color: var(--color-text, var(--color-text, #1A222B));
}
[dir="rtl"] .mi-search input { padding: 0 30px 0 10px; }
.mi-search input:focus { outline: none; border-color: var(--color-primary, var(--color-primary, #357A1B)); }

.mi-filter {
  font-family: inherit;
  font-size: var(--text-sm, 13px);
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--color-border, var(--color-border, #E9EDF0));
  border-radius: var(--radius-sm, 8px);
  background: var(--color-surface, #fff);
  color: var(--color-text, var(--color-text, #1A222B));
  max-width: 190px;
}
.mi-filter:focus { outline: none; border-color: var(--color-primary, var(--color-primary, #357A1B)); }

/* ---------- کارت‌های نمای کلی ---------- */
.mi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--space-3, 12px);
}
.mi-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: start;
  font-family: inherit;
  padding: var(--space-4, 16px);
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, var(--color-border, #E9EDF0));
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(28, 37, 33, .04));
  cursor: pointer;
  transition: transform var(--duration-fast, 160ms) var(--ease, ease),
              box-shadow var(--duration-fast, 160ms) var(--ease, ease),
              border-color var(--duration-fast, 160ms) var(--ease, ease);
}
.mi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md, 0 2px 8px rgba(28, 37, 33, .06));
  border-color: var(--color-border-strong, #d3dbd6);
}
.mi-card:focus-visible { outline: 2px solid var(--color-primary, var(--color-primary, #357A1B)); outline-offset: 2px; }
.mi-card__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm, 8px);
  background: var(--color-primary-soft, var(--brand-soft, #F1F9E7));
  color: var(--color-primary, var(--color-primary, #357A1B));
  font-size: 15px;
}
.mi-card__title { font-size: var(--text-base, 15px); font-weight: 800; color: var(--color-text, var(--color-text, #1A222B)); margin-top: 6px; }
.mi-card__key code {
  font-size: 11px;
  color: var(--color-text-subtle, var(--color-text-subtle, #64748B));
  background: none;
  border: none;
  padding: 0;
}
.mi-card__count { font-size: var(--text-2xl, 26px); font-weight: 800; color: var(--color-primary, var(--color-primary, #357A1B)); margin-top: 6px; font-variant-numeric: tabular-nums; }
.mi-card__note { font-size: var(--text-xs, 12px); color: var(--color-text-muted, var(--color-text-muted, #5A6B7B)); }

/* ---------- فرم داخل مودال ---------- */
.mi-form-wrap { width: 100%; }

/* ---------- بنر اطلاع‌رسانی منبع ---------- */
.mi-banner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4, 16px);
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--space-4, 16px);
  margin-bottom: var(--space-4, 16px);
  background: var(--color-primary-soft, var(--brand-soft, #F1F9E7));
  border: 1px solid var(--neon-line, var(--brand-line, #CFEFAE));
  border-radius: var(--radius-md, 12px);
  font-size: var(--text-sm, 13px);
  line-height: var(--leading-normal, 1.7);
  color: var(--color-text, var(--color-text, #1A222B));
}
.mi-banner__text { flex: 1 1 320px; }
.mi-banner__text code,
.mi-banner code {
  font-size: 11.5px;
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--neon-line, var(--brand-line, #CFEFAE));
  border-radius: 5px;
  padding: 1px 5px;
}
.mi-banner__src { flex: 0 1 340px; }

.mi-source {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-xs, 12px);
}
.mi-source th,
.mi-source td {
  padding: 5px 8px;
  border-bottom: 1px dashed var(--neon-line, var(--brand-line, #CFEFAE));
  text-align: start;
  vertical-align: top;
}
.mi-source th { color: var(--color-text-muted, var(--color-text-muted, #5A6B7B)); font-weight: 700; white-space: nowrap; width: 46%; }
.mi-source tr:last-child th,
.mi-source tr:last-child td { border-bottom: none; }

/* ---------- قابلیت‌های منبع ---------- */
.mi-caps {
  margin-bottom: var(--space-5, 24px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, var(--color-border, #E9EDF0));
  border-radius: var(--radius-md, 12px);
}
.mi-caps ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
}
.mi-caps li {
  font-size: var(--text-xs, 12px);
  color: var(--color-text-muted, var(--color-text-muted, #5A6B7B));
  background: var(--color-surface-sunken, var(--color-surface-sunken, #F6F8FA));
  border: 1px solid var(--color-border, var(--color-border, #E9EDF0));
  border-radius: 999px;
  padding: 3px 10px;
}

/* ---------- واکنش‌گرا ---------- */
@media (max-width: 720px) {
  .mi-head__actions { width: 100%; }
  .mi-search { flex: 1 1 100%; }
  .mi-search input { width: 100%; min-width: 0; }
  .mi-filter { max-width: none; flex: 1 1 40%; }
  .mi-banner { flex-direction: column; }
}