/* ======================================================================
   theme-system.css
   سیستمِ طراحیِ جدیدِ سامانه‌ی یکپارچه‌ی کیهان: توکن‌های رنگ/تایپوگرافی/سایه،
   پشتیبانیِ تمِ روز/شب (از طریق [data-theme] روی <html>)، و override هایی
   روی کلاس‌های پرکاربردِ قالبِ CORK/Bootstrap تا کل برنامه بدون نیاز به
   تغییرِ تک‌تکِ صفحات، هم رنگِ جدید بگیرد و هم بینِ دو تم سوییچ کند.
   این فایل باید بعد از bootstrap.min.css و structure.css لود شود.
   ====================================================================== */

/* ---------- ۱) فونت فارسیِ یکدست (وزیرمتن، self-hosted) ---------- */
@font-face {
  font-family: 'Vazirmatn';
  src: url('/fonts/vazirmatn/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('/fonts/vazirmatn/Vazirmatn-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('/fonts/vazirmatn/Vazirmatn-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('/fonts/vazirmatn/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('/fonts/vazirmatn/Vazirmatn-ExtraBold.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ---------- ۲) توکن‌های رنگ: حالتِ شب (پیش‌فرض) ---------- */
:root,
html[data-theme="dark"] {
  /* برند */
  --primary: #4f6ef7;
  --primary-rgb: 79, 110, 247;
  --primary-hover: #3f5ce0;
  --primary-soft: rgba(79, 110, 247, 0.14);
  --accent-gold: #d4af37;
  --accent-gold-soft: rgba(212, 175, 55, 0.16);

  /* وضعیت */
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #38bdf8;

  /* سطوح/پس‌زمینه */
  --bg-body: #0b1120;
  --bg-sidebar: #0f172a;
  --bg-header: #111a2e;
  --bg-surface: #141b2d;
  --bg-surface-2: #1b2436;
  --bg-surface-hover: #202a40;
  --bg-input: #171f32;

  /* مرز */
  --border: #26324a;
  --border-strong: #35435f;

  /* متن */
  --text-primary: #e7ebf3;
  --text-secondary: #aab4c7;
  --text-muted: #8893a8;
  --text-on-primary: #ffffff;

  /* سایه و شعاع */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.35);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  color-scheme: dark;
}

/* ---------- ۳) توکن‌های رنگ: حالتِ روز ---------- */
html[data-theme="light"] {
  --primary: #3f5ce0;
  --primary-rgb: 63, 92, 224;
  --primary-hover: #2f49c4;
  --primary-soft: rgba(63, 92, 224, 0.10);
  --accent-gold: #b8882c;
  --accent-gold-soft: rgba(184, 136, 44, 0.12);

  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
  --info: #0284c7;

  --bg-body: #f3f5fa;
  --bg-sidebar: #ffffff;
  --bg-header: #ffffff;
  --bg-surface: #ffffff;
  --bg-surface-2: #eef1f7;
  --bg-surface-hover: #e7ebf3;
  --bg-input: #ffffff;

  --border: #e2e7f0;
  --border-strong: #cdd5e3;

  --text-primary: #1b2436;
  --text-secondary: #4b5670;
  --text-muted: #6b7690;
  --text-on-primary: #ffffff;

  --shadow-sm: 0 1px 2px rgba(20, 30, 60, 0.06);
  --shadow-md: 0 6px 18px rgba(20, 30, 60, 0.08);
  --shadow-lg: 0 14px 36px rgba(20, 30, 60, 0.12);

  color-scheme: light;
}

/* ---------- ۴) تایپوگرافیِ یکدست ---------- */
html, body {
  font-family: 'Vazirmatn', Tahoma, 'Segoe UI', sans-serif !important;
}
body {
  background-color: var(--bg-body) !important;
  color: var(--text-primary) !important;
  font-size: 14px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Vazirmatn', Tahoma, sans-serif !important;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0;
}
h5 { font-weight: 600; }
small, .text-muted { color: var(--text-muted) !important; }
a { color: var(--primary); }
a:hover { color: var(--primary-hover); }
::selection { background: var(--primary-soft); }

/* اسکرول‌بارِ یکدست */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ---------- ۵) پوسته/ساختارِ اصلی (سایدبار/هدر) ---------- */
#sidebar,
.sidebar-wrapper #sidebar,
.sidebar-theme #sidebar {
  background: var(--bg-sidebar) !important;
  border-left: 1px solid var(--border);
}
.mini-sidebar { background-color: var(--bg-sidebar) !important; }
.sidebar-brand-header { border-bottom: 1px solid var(--border); }
#sidebar .menu > a,
#sidebar .dropdown-toggle { color: var(--text-secondary) !important; }
#sidebar .menu a.active,
#sidebar .dropdown-toggle.active,
#sidebar a:hover { color: var(--text-primary) !important; }
#sidebar .menu ul { background: transparent; }

.header-container { background: var(--bg-header) !important; border-bottom: 1px solid var(--border); }
.header.navbar { background: var(--bg-header) !important; box-shadow: none; }

/* ---------- ۶) کارت‌ها/ویجت‌ها ---------- */
.widget-content-area,
.card,
.widget-content {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm);
  color: var(--text-primary);
}
.card-header, .card-footer { background-color: transparent !important; border-color: var(--border) !important; }

/* ---------- ۷) دکمه‌ها ---------- */
.btn { border-radius: var(--radius-sm); font-weight: 600; }
.btn-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--text-on-primary) !important;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}
.btn-outline-primary {
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.btn-outline-primary:hover {
  background-color: var(--primary) !important;
  color: var(--text-on-primary) !important;
}
.btn-success { background-color: var(--success) !important; border-color: var(--success) !important; }
.btn-danger  { background-color: var(--danger)  !important; border-color: var(--danger)  !important; }
.btn-warning { background-color: var(--warning) !important; border-color: var(--warning) !important; }

/* ---------- ۸) فرم‌ها ---------- */
.form-control, .form-select, select, textarea,
input[type="text"], input[type="number"], input[type="password"], input[type="email"] {
  background-color: var(--bg-input) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-sm) !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-soft) !important;
}
.form-control::placeholder { color: var(--text-muted) !important; }
label, .form-label { color: var(--text-secondary); font-weight: 500; }

/* ---------- ۹) جدول‌ها (BaseIndex و مشابه) ---------- */
/* نکته‌ی مهم: کامپوننتِ .table بوت‌استرپ ۵ پس‌زمینه‌ی خودش را از متغیرهای
   داخلیِ --bs-table-bg/--bs-table-color می‌گیرد (که قالبِ تیره‌ی قبلی مقداردهی
   کرده)، نه مستقیماً از background-color/color. اگر این متغیرها خنثی نشوند،
   حتی با ست‌کردنِ color روی خودِ .table، پس‌زمینه همچنان تیرهِ قدیمی می‌ماند و
   نتیجه می‌شود نوشته‌ی تیره روی پس‌زمینه‌ی تیره (کنتراستِ نزدیکِ صفر). */
table, .table {
  --bs-table-bg: transparent !important;
  --bs-table-color: var(--text-primary) !important;
  --bs-table-striped-bg: var(--bg-surface-2) !important;
  --bs-table-striped-color: var(--text-primary) !important;
  --bs-table-active-bg: var(--bg-surface-hover) !important;
  --bs-table-active-color: var(--text-primary) !important;
  --bs-table-hover-bg: var(--bg-surface-hover) !important;
  --bs-table-hover-color: var(--text-primary) !important;
  background-color: transparent !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}
.table > :not(caption) > * > * {
  background-color: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
}
.table thead th {
  background-color: var(--bg-surface-2) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border) !important;
  font-weight: 600;
  /* توجه: قبلاً اینجا position: sticky بود تا هدر حینِ اسکرولِ جدول ثابت
     بماند، ولی همراهِ overflow-auto روی والدِ .table-responsive باعثِ یک
     باگِ شناخته‌شده‌ی Chrome می‌شد: ردیفِ اولِ tbody بعد از آپدیتِ جدول تا یک
     forced repaint (مثلِ هاورکردن) تقریباً نامرئی رندر می‌شد. عمداً sticky
     برگردانده نشد. */
}
.table td, .table th { border-color: var(--border) !important; }
.table-hover tbody tr:hover,
.table-hover tbody tr:hover > * { background-color: var(--bg-surface-hover) !important; }
.table-hover tbody tr:hover { background-color: var(--bg-surface-hover) !important; }

/* ---------- ۱۰) بج‌ها ---------- */
.badge.bg-primary, .badge.badge-primary { background-color: var(--primary) !important; }
.badge.bg-success, .badge.badge-success { background-color: var(--success) !important; }
.badge.bg-danger,  .badge.badge-danger  { background-color: var(--danger)  !important; }
.badge.bg-warning, .badge.badge-warning { background-color: var(--warning) !important; color: #1b2436 !important; }
.badge.bg-info,    .badge.badge-info    { background-color: var(--info)    !important; }
.badge.bg-dark     { background-color: var(--bg-surface-2) !important; color: var(--text-primary) !important; border: 1px solid var(--border); }
.badge.bg-secondary{ background-color: var(--border-strong) !important; color: var(--text-primary) !important; }

/* ---------- ۱۱) عمومیِ تیره/روشنِ بوت‌استرپ که در صفحاتِ Vue زیاد استفاده شده ---------- */
.bg-dark   { background-color: var(--bg-surface) !important; }
.text-light{ color: var(--text-primary) !important; }
.border-secondary { border-color: var(--border) !important; }
.bg-secondary { background-color: var(--bg-surface-2) !important; }

/* ---------- ۱۲) دراپ‌داون/مودال ---------- */
.dropdown-menu {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
  border-radius: var(--radius-md) !important;
}
.dropdown-item { color: var(--text-secondary) !important; }
.dropdown-item:hover { background-color: var(--bg-surface-hover) !important; color: var(--text-primary) !important; }
/* نکته‌ی مهم: در structure.css (فایلِ قالبِ اصلیِ CORK) یک انتخاب‌گرِ
   بسیار اختصاصی‌تر وجود دارد:
   .navbar .navbar-item .nav-item.user-profile-dropdown .dropdown-menu .dropdown-item a
   که رنگِ متن را به‌صورتِ ثابت #e0e6ed (تقریباً سفید، مناسبِ پس‌زمینه‌ی
   همیشه‌تیرهِ قالبِ قدیم) ست می‌کند. چون این انتخاب‌گر از نظرِ اختصاصیت
   (specificity) از قانونِ بالا و از قانونِ خودِ Navbar.vue قوی‌تر است، بدونِ
   !important همچنان برنده می‌شود و روی پس‌زمینه‌ی روشن، متن را عملاً نامرئی
   می‌کند. برای همین مستقیماً خودِ <a> داخلِ dropdown-item را هم با !important
   هدف قرار می‌دهیم تا در هر دو تم درست رنگ بگیرد. */
.dropdown-item a,
.dropdown-item > a {
  color: var(--text-secondary) !important;
}
.dropdown-item a:hover,
.dropdown-item > a:hover {
  color: var(--text-primary) !important;
}
.modal-content {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}
.modal-header, .modal-footer { border-color: var(--border) !important; }

/* ---------- ۱۳) صفحه‌بندی (pagination) ---------- */
.pagination .page-link {
  background-color: var(--bg-surface) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}
.pagination .page-item.active .page-link {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--text-on-primary) !important;
}

/* ---------- ۱۴) سوییچِ تمِ روز/شب در نوار بالا ---------- */
.theme-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px;
}
.theme-toggle-wrap .theme-icon {
  width: 18px; height: 18px;
  color: var(--text-secondary);
}

/* ---------- ۱۵) صفحه‌ی ورود (Login) در تمِ روز ---------- */
/* form-2.css رنگ‌های صفحه‌ی ورود (پس‌زمینه/متن) را به‌صورت کاملاً ثابت
   (هگزِ مستقیم، نه متغیر) تعریف کرده تا همیشه تیره باشد. این بخش فقط وقتی
   تمِ روز فعال است (html[data-theme="light"]) همان رنگ‌های ثابت را با
   توکن‌های روشنِ همین فایل بازنویسی می‌کند تا صفحه‌ی ورود هم با سوییچِ تم
   هماهنگ شود؛ در حالتِ تمِ تیره (پیش‌فرض) رفتارِ قبلی/همیشگیِ form-2.css
   دست‌نخورده باقی می‌ماند. */
html[data-theme="light"] .form-form .form-container .form-content {
  background: var(--bg-surface) !important;
  box-shadow: var(--shadow-md) !important;
}
html[data-theme="light"] .form-form .form-container .form-content h1,
html[data-theme="light"] .form-form .form-form-wrap h1 .brand-name,
html[data-theme="light"] .form-form .form-form-wrap .user-meta p,
html[data-theme="light"] .form-form .form-form-wrap form .field-wrapper .logged-in-user-name {
  color: var(--text-primary) !important;
}
html[data-theme="light"] .form-form .form-container .form-content > p,
html[data-theme="light"] .form-form .form-form-wrap p.signup-link.register {
  color: var(--text-muted) !important;
}
html[data-theme="light"] .form-form .form-form-wrap p.signup-link,
html[data-theme="light"] .form-form .form-form-wrap form .field-wrapper label,
html[data-theme="light"] .form-form .form-form-wrap form .field-wrapper.toggle-pass p,
html[data-theme="light"] .form-form .form-form-wrap form .field-wrapper a.forgot-pass-link {
  color: var(--text-secondary) !important;
}
html[data-theme="light"] .form-form .form-form-wrap form .field-wrapper input {
  background-color: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
}
html[data-theme="light"] .form-form .form-form-wrap form .field-wrapper svg:not(.feather-eye),
html[data-theme="light"] .form-form .form-form-wrap form .field-wrapper svg.feather-eye {
  color: var(--text-muted) !important;
}
html[data-theme="light"] .form-form .form-form-wrap form .social a {
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}