/**
 * CollegePips Theme for GAP Kit
 * ═══════════════════════════════════════════════════════════════════════════
 * تم رسمی کالج‌پیپس: تیره خنثی + برند قرمز.
 * این فایل توکن‌های تم تیره‌ی gap-kit را با پالت کالج‌پیپس بازتعریف می‌کند
 * و یوتیلیتی‌های رنگی گمشده را اضافه می‌کند تا قالب‌ها هیچ style درون‌خطی نداشته باشند.
 *
 * ⚠️ عمداً بیرون از vendor/gap-kit-package/ قرار دارد تا با به‌روزرسانی
 *    gap-kit توسط طراح سایت پاک نشود.
 *
 * ⚠️ باید همیشه *بعد از* gap-kit لود شود (وابستگی: 'gap-kit').
 *
 * پالت (تعیین‌شده توسط کارفرما):
 *   #232323  rgb(35,35,35)    پس‌زمینه‌ی اصلی (تیره‌ترین)
 *   #2F2F2F  rgb(47,47,47)    سطح کارت‌ها
 *   #383838  rgb(56,56,56)    جدول، فرم، ورودی، مودال
 *   #D9D9D9  rgb(217,217,217) عنوان‌ها
 *   #BEBEC3  rgb(190,190,195) متن بدنه
 *   #ff003c                   برند
 */

/* ═══════════════════════════════════════════════════════════════════════════
 * ۱. توکن‌های تم تیره
 *
 * سه سلکتور لازم است چون کدبیس هر سه الگو را دارد:
 *   .gap-root .gap-dark   → صفحات ادمین (تودرتو)
 *   .gap-root.gap-dark    → قالب‌های فرانت (یک عنصر)  ← در gap-kit پشتیبانی نمی‌شود
 *   .gap-dark             → چند صفحه‌ی ادمین بدون والد gap-root ← در gap-kit پشتیبانی نمی‌شود
 *
 * gap-kit فقط `.gap-root .gap-dark` را تعریف کرده، برای همین دو الگوی دیگر
 * تم روشن می‌گرفتند. این بلوک هر سه را پوشش می‌دهد.
 * ═══════════════════════════════════════════════════════════════════════════ */

.gap-root .gap-dark,
.gap-root.gap-dark,
.gap-dark {
  /* ── پس‌زمینه‌ها ── */
  --bg-body: #232323;
  --bg-surface: #2f2f2f;
  --bg-surface-hover: #383838;
  --bg-surface-alt: #383838;
  --bg-elevated: #383838;
  --bg-sidebar: #232323;
  --bg-sidebar-hover: #2f2f2f;
  --bg-overlay: rgba(0, 0, 0, 0.72);
  --bg-input: #383838;
  --bg-skeleton: #383838;
  --bg-tooltip: #383838;
  --bg-item: rgba(255, 0, 60, 0.07);

  /* ── متن ── (کنتراست روی #2f2f2f: 9.5 / 7.2 / 5.6 / 3.5) */
  --text-heading: #d9d9d9;
  --text-body: #bebec3;
  --text-muted: #9e9ea6;
  --text-faint: #82828a;
  --text-inverse: #232323;
  --text-on-primary: #ffffff;
  --text-link: #ff5c7a;
  --text-link-hover: #ff8fa3;

  /* ── خطوط ── */
  --border-default: rgba(255, 255, 255, 0.10);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.18);
  --border-focus: rgba(255, 0, 60, 0.55);
  --border-input: rgba(255, 255, 255, 0.14);

  /* ── برند قرمز ── */
  --brand-primary: #ff003c;
  --brand-primary-hover: #ff3361;
  --brand-primary-active: #cc0030;
  --brand-primary-subtle: rgba(255, 0, 60, 0.12);
  --brand-accent: #ff6b35;
  --brand-accent-hover: #ff8a5c;
  --brand-gradient: linear-gradient(135deg, #ff003c, #b30027);
  --brand-gradient-subtle: linear-gradient(135deg, rgba(255,0,60,0.14), rgba(179,0,39,0.06));

  /* ── بج‌ها ── */
  --badge-primary-bg: rgba(255, 0, 60, 0.16);
  --badge-primary-text: #ff8fa3;
  --badge-success-bg: rgba(34, 197, 94, 0.16);
  --badge-success-text: #4ade80;
  --badge-danger-bg: rgba(239, 68, 68, 0.16);
  --badge-danger-text: #fca5a5;
  --badge-warning-bg: rgba(234, 179, 8, 0.16);
  --badge-warning-text: #facc15;
  --badge-info-bg: rgba(59, 130, 246, 0.16);
  --badge-info-text: #93c5fd;
  --badge-accent-bg: rgba(255, 107, 53, 0.16);
  --badge-accent-text: #ffab8a;

  /* ── فوکوس و اسکرول‌بار ── */
  --ring-focus: 0 0 0 3px rgba(255, 0, 60, 0.35);
  --shadow-glow: 0 0 0 3px rgba(255, 0, 60, 0.25);
  --scrollbar-thumb: #4a4a4a;
  --scrollbar-track: #2f2f2f;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ۲. سازگاری عقب‌رو
 *
 * توکن `--text-primary` در gap-kit **وجود ندارد** ولی در ۱۰ نقطه از کد ما
 * استفاده شده (class-admin-settings.php، class-tool-catalog.php).
 * تا وقتی آن نقاط پاک‌سازی شوند، اینجا نگاشتش می‌کنیم تا متن نامرئی نشود.
 * TODO: بعد از فاز ۴ حذف شود.
 * ═══════════════════════════════════════════════════════════════════════════ */

.gap-root .gap-dark,
.gap-root.gap-dark,
.gap-dark {
  --text-primary: var(--text-heading);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ۳. یوتیلیتی‌های رنگ متن
 *
 * gap-kit فقط `.text-white` دارد و هیچ کلاس رنگی معنایی ندارد.
 * بدون این‌ها حذف style درون‌خطی از قالب‌ها ممکن نیست.
 * ═══════════════════════════════════════════════════════════════════════════ */

.gap-text-heading { color: var(--text-heading); }
.gap-text-body    { color: var(--text-body); }
.gap-text-muted   { color: var(--text-muted); }
.gap-text-faint   { color: var(--text-faint); }
.gap-text-brand   { color: var(--brand-primary); }
.gap-text-link    { color: var(--text-link); }
.gap-text-success { color: var(--badge-success-text); }
.gap-text-danger  { color: var(--badge-danger-text); }
.gap-text-warning { color: var(--badge-warning-text); }
.gap-text-info    { color: var(--badge-info-text); }
.gap-text-inverse { color: var(--text-inverse); }

/* ═══════════════════════════════════════════════════════════════════════════
 * ۴. یوتیلیتی‌های پس‌زمینه و خط
 * ═══════════════════════════════════════════════════════════════════════════ */

.gap-bg-body        { background: var(--bg-body); }
.gap-bg-surface     { background: var(--bg-surface); }
.gap-bg-surface-alt { background: var(--bg-surface-alt); }
.gap-bg-elevated    { background: var(--bg-elevated); }
.gap-bg-input       { background: var(--bg-input); }

.gap-border         { border: 1px solid var(--border-default); }
.gap-border-subtle  { border: 1px solid var(--border-subtle); }
.gap-border-b       { border-bottom: 1px solid var(--border-subtle); }
.gap-border-t       { border-top: 1px solid var(--border-subtle); }

/* ═══════════════════════════════════════════════════════════════════════════
 * ۵. یوتیلیتی‌های چیدمان گمشده
 *
 * gap-kit `w-full` دارد ولی بدون box-sizing؛ الگوی رایج در قالب‌های ما
 * `width:100%; box-sizing:border-box;` است.
 * ═══════════════════════════════════════════════════════════════════════════ */

.gap-w-full   { width: 100%; box-sizing: border-box; }
.gap-h-auto   { height: auto; }
.gap-relative { position: relative; }
.gap-hidden   { display: none; }
.gap-block    { display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
 * ۵.۱ پوسته‌ی صفحه‌ی ادمین
 *
 * هر شش صفحه‌ی includes/admin/ همین بلوک را عیناً به‌صورت style درون‌خطی تکرار
 * می‌کردند، و همگی `id="gap-root"` داشتند — یعنی چند عنصر با یک id در یک صفحه،
 * که HTML نامعتبر است و هر querySelector/‏getElementById را غیرقابل‌پیش‌بینی می‌کند.
 * ═══════════════════════════════════════════════════════════════════════════ */

.gap-page-shell {
  padding: 24px;
  margin-top: 15px;
  background: var(--bg-body);
  color: var(--text-heading);
  border-radius: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ۵.۲ کارت — کلاسی که gap-kit ندارد و ما از سمت خودمان می‌دهیم (F-023)
 *
 * gap-kit فقط `gap-kpi-card` و `gap-stats-card` دارد؛ کارت عمومی ندارد.
 * کد ما در ۹ نقطه `gap-card` نوشته بود که تا امروز **هیچ تعریفی نداشت** و
 * فقط چون کنارش `gap-bg-surface gap-border p-6 rounded-xl` هم نوشته شده بود
 * چیزی دیده می‌شد. یعنی هر کارت جدید باید چهار کلاس را دوباره تکرار می‌کرد.
 *
 * 🔴 چرا `:where()`: ویژگی‌مندی (specificity) صفر می‌دهد، پس هر کلاس یوتیلیتی
 * که کنارش نوشته شود — مثل `gap-bg-surface-alt` در my-licenses.php:189 —
 * همچنان برنده است. یعنی این بلوک هیچ ظاهر موجودی را عوض نمی‌کند، فقط
 * کارت‌های بدون یوتیلیتی را از حالت «نامرئی» درمی‌آورد.
 * ═══════════════════════════════════════════════════════════════════════════ */

:where(.gap-card) {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  padding: 24px;
  box-sizing: border-box;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.gap-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
}

:where(.gap-card-muted) {
  background: var(--bg-surface-alt);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
}

:where(.gap-card-brand) {
  background: linear-gradient(135deg, rgba(255, 0, 60, 0.12) 0%, rgba(35, 35, 35, 0.95) 100%);
  border: 1px solid rgba(255, 0, 60, 0.35);
  box-shadow: 0 4px 20px rgba(255, 0, 60, 0.12);
}

.gap-room-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid var(--border-default);
  font-size: 26px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ── استایل نوار قیمت فشرده نوبیتکس با به‌روزرسانی زنده ── */
.gap-root .nobitex-ticker,
.nobitex-ticker {
  direction: rtl !important;
  overflow: hidden !important;
  border: 1px solid var(--border-default) !important;
  border-radius: 14px !important;
  background: var(--bg-surface-alt) !important;
  padding: 12px 16px !important;
  margin-bottom: 24px !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.gap-root .nobitex-ticker-track,
.nobitex-ticker-track {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-around !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  animation: none !important;
  padding-left: 0 !important;
  width: 100% !important;
  white-space: normal !important;
}

.gap-root .nobitex-ticker-item,
.nobitex-ticker-item {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 10px !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-heading) !important;
  margin: 0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

.gap-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.gap-card-title {
  color: var(--text-heading);
  font-weight: 700;
  font-size: 1rem;
  margin: 0;
}

.gap-card-desc {
  color: var(--text-muted);
  font-size: .875rem;
  line-height: 1.9;
  margin: 0;
}

.gap-card-body   { color: var(--text-body); }

.gap-card-footer {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ۵.۳ شبکه‌ی واکنش‌گرای کارت‌ها — موبایل، تبلت، دسکتاپ
 *
 * موبایل یک ستون · از ۷۶۸px دو ستون · از ۱۰۲۴px سه ستون.
 * بدون این، هر صفحه‌ای مجبور بود `grid md:grid-cols-2 lg:grid-cols-3` را
 * تکرار کند و gap-kit اصلاً `lg:grid-cols-*` ندارد.
 * ═══════════════════════════════════════════════════════════════════════════ */

.gap-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .gap-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .gap-cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gap-cards-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gap-cards-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gap-cards-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ۵.۴ دکمه‌ی ثانویه
 *
 * `gap-btn-secondary` در ۳ نقطه‌ی کد استفاده شده ولی در gap-kit وجود ندارد.
 * gap-kit فقط primary / ghost / danger دارد، و پایه‌ی `.gap-root .gap-btn`
 * صریحاً `border-color:#0000` می‌گذارد — یعنی این دکمه‌ها امروز **بدون
 * پس‌زمینه و بدون حاشیه** رندر می‌شوند و کاربر نمی‌فهمد دکمه‌اند.
 *
 * سلکتور دو سطحی است تا با ویژگی‌مندی `.gap-root .gap-btn` برابر شود و چون
 * این فایل بعد از gap-kit لود می‌شود، برنده باشد.
 * ═══════════════════════════════════════════════════════════════════════════ */

.gap-root .gap-btn-secondary,
.gap-dark .gap-btn-secondary,
.gap-btn-secondary {
  background: var(--bg-surface-alt);
  color: var(--text-heading);
  border-color: var(--border-default);
  text-decoration: none;
}

.gap-root .gap-btn-secondary:hover,
.gap-dark .gap-btn-secondary:hover,
.gap-btn-secondary:hover {
  background: var(--bg-item);
  border-color: var(--border-focus);
  color: var(--text-heading);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ۵.۵ حالت خالی — «در دسترس نیست»
 *
 * قانون پروژه: اگر داده نیست، عدد نساز. پس هر صفحه به یک جعبه‌ی خالیِ آبرومند
 * نیاز دارد. بدون این کلاس، هر ایجنت یک `style=` می‌نویسد.
 * ═══════════════════════════════════════════════════════════════════════════ */

.gap-empty {
  background: var(--bg-surface-alt);
  border: 1px dashed var(--border-default);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  box-sizing: border-box;
}

.gap-empty-title {
  color: var(--text-heading);
  font-weight: 700;
  margin: 0 0 6px;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ۶. فونت نیتیو
 * ═══════════════════════════════════════════════════════════════════════════ */

.gap-root,
.gap-dark {
  font-family: "Anjoman", "Vazirmatn", system-ui, -apple-system, sans-serif;
}

.gap-root code,
.gap-root .font-mono,
.gap-dark code,
.gap-dark .font-mono {
  font-family: "Fira Code", ui-monospace, monospace;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ۷. اددان تم تیره برای صفحه‌های دوره (gcm-tutor + Tutor LMS)
 *
 * 🔴 چرا این بخش اضافه شد (۱۶/۰۸/۱۴۰۵ — گزارش کارفرما):
 *   «ظاهر صفحاتش از gcm-tutor تنظیم می‌شد … ولی دارک شدنش هنوز مرتب نیست.
 *    بعضی متن‌ها سیاهه و یا زشته.»
 *
 * علت دقیق: این فایل تم فقط روی صفحه‌های خودِ ما enqueue می‌شد (شورت‌کدها،
 * CPTها و اسلاگ‌های ثبت‌شده). صفحه‌ی درس/دوره‌ی Tutor هیچ‌کدام نیست، پس
 * پالت تیره‌ی ما آنجا اصلاً بارگذاری نمی‌شد و متن‌ها با رنگ پیش‌فرض روشنِ
 * خودِ gcm-tutor (مشکی) روی پس‌زمینه‌ی تیره می‌افتادند.
 *
 * 🥇 قانون طلایی رعایت شده: **هیچ فایلی در gcm-tutor یا tutor/tutor-pro
 * عوض نشده.** این فقط یک لایه‌ی override از سمت ماست — اگر آن پلاگین‌ها
 * آپدیت شوند، این بخش دست‌نخورده می‌ماند.
 *
 * ⚠️ همه‌ی قواعد زیر داخل `.gcm-dark-scope` محدود شده‌اند تا اگر روزی
 * کارفرما بخواهد بخشی روشن بماند، فقط کلاس را برندارد. این کلاس را
 * REF_Cyber_GAP_Loader::enqueue_course_theme() روی <body> می‌گذارد.
 * ═══════════════════════════════════════════════════════════════════════════ */

.gcm-dark-scope .gcm-plans-wrapper,
.gcm-dark-scope .gcm-plan-card,
.gcm-dark-scope .gcm-locked-content,
.gcm-dark-scope .gcm-locked-overlay,
.gcm-dark-scope .gcm-locked-item,
.gcm-dark-scope .gcm-modal-container,
.gcm-dark-scope .gcm-tree-topic,
.gcm-dark-scope .gcm-user-service-item,
.gcm-dark-scope .gcm-empty-state {
  background-color: var(--bg-surface);
  border-color: var(--border-default);
  color: var(--text-body);
}

/* عنوان‌ها — بیشترین موردی که کارفرما «سیاه» دید همین‌ها بودند. */
.gcm-dark-scope .gcm-plan-card-title,
.gcm-dark-scope .gcm-access-title,
.gcm-dark-scope .gcm-locked-message,
.gcm-dark-scope .gcm-modal-header,
.gcm-dark-scope .gcm-modal-title,
.gcm-dark-scope .gcm-tree-title,
.gcm-dark-scope .gcm-tree-topic-header,
.gcm-dark-scope .gcm-tree-sub-topic-title,
.gcm-dark-scope .gcm-minimal-title,
.gcm-dark-scope .gcm-table-title,
.gcm-dark-scope .gcm-services-label {
  color: var(--text-heading);
}

.gcm-dark-scope .gcm-plan-card-description,
.gcm-dark-scope .gcm-access-subtitle,
.gcm-dark-scope .gcm-modal-body,
.gcm-dark-scope .gcm-modal-message,
.gcm-dark-scope .gcm-minimal-desc,
.gcm-dark-scope .gcm-table-desc,
.gcm-dark-scope .gcm-plan-features,
.gcm-dark-scope .gcm-plan-features li,
.gcm-dark-scope .gcm-tree-item {
  color: var(--text-body);
}

.gcm-dark-scope .gcm-minimal-info,
.gcm-dark-scope .gcm-tree-type-badge,
.gcm-dark-scope .gcm-services-inline {
  color: var(--text-muted);
}

/* ویژگی‌های در دسترس / غیرقابل‌دسترس */
.gcm-dark-scope .gcm-plan-features li.available {
  color: var(--badge-success-text);
}
.gcm-dark-scope .gcm-plan-features li.unavailable {
  color: var(--text-faint);
}

/* قیمت و برند */
.gcm-dark-scope .gcm-plan-card-pricing,
.gcm-dark-scope .gcm-minimal-price,
.gcm-dark-scope .gcm-table-price {
  color: var(--brand-primary);
}

/* نشان‌ها */
.gcm-dark-scope .gcm-status-active,
.gcm-dark-scope .gcm-badge-active,
.gcm-dark-scope .gcm-text-success {
  color: var(--badge-success-text);
}
.gcm-dark-scope .gcm-status-inactive {
  color: var(--text-muted);
}
.gcm-dark-scope .gcm-plan-badge {
  background-color: var(--brand-primary);
  color: var(--text-heading);
}

/* دکمه‌ها */
.gcm-dark-scope .gcm-btn-primary {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--text-heading);
}
.gcm-dark-scope .gcm-btn-secondary {
  background-color: var(--bg-surface-alt);
  border-color: var(--border-default);
  color: var(--text-body);
}
.gcm-dark-scope .gcm-btn-disabled,
.gcm-dark-scope .gcm-btn:disabled {
  background-color: var(--bg-surface-alt);
  border-color: var(--border-subtle);
  color: var(--text-faint);
}

/* قفل و پوشش */
.gcm-dark-scope .gcm-lock-icon,
.gcm-dark-scope .gcm-lock-icon-large,
.gcm-dark-scope .gcm-feature-icon,
.gcm-dark-scope .gcm-tree-icon {
  color: var(--brand-primary);
}

.gcm-dark-scope .gcm-modal-close,
.gcm-dark-scope .gcm-modal-close-btn {
  color: var(--text-muted);
  background: transparent;
}

/* جداکننده‌ها */
.gcm-dark-scope .gcm-modal-header,
.gcm-dark-scope .gcm-modal-footer,
.gcm-dark-scope .gcm-tree-topic-header,
.gcm-dark-scope .gcm-tree-sub-topic-header,
.gcm-dark-scope .gcm-access-header {
  border-color: var(--border-default);
}

/* ── Tutor LMS: عناصری که gcm-tutor کنترلشان نمی‌کند ── */
.gcm-dark-scope .tutor-card,
.gcm-dark-scope .tutor-course-topic,
.gcm-dark-scope .tutor-accordion-item,
.gcm-dark-scope .tutor-accordion-item-header,
.gcm-dark-scope .tutor-accordion-item-body {
  background-color: var(--bg-surface);
  border-color: var(--border-default);
  color: var(--text-body);
}

.gcm-dark-scope .tutor-color-black,
.gcm-dark-scope .tutor-fs-5,
.gcm-dark-scope .tutor-fs-6,
.gcm-dark-scope .tutor-course-name,
.gcm-dark-scope .tutor-accordion-item-header {
  color: var(--text-heading);
}

.gcm-dark-scope .tutor-color-secondary,
.gcm-dark-scope .tutor-color-muted {
  color: var(--text-muted);
}