/* ======================================================================
   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;
}

/* ===== تم روشن: متن سفیدِ داخل پس‌زمینه‌های روشن/شفاف دیده نمی‌شد ===== */
html[data-theme="light"] .text-white:not(.btn):not(.badge):not([class*="bg-"]):not(.swal2-toast):not(.toast *) {
  color: var(--text-primary) !important;
}
html[data-theme="light"] .card .text-white,
html[data-theme="light"] .modal-body .text-white,
html[data-theme="light"] .table .text-white {
  color: var(--text-primary) !important;
}
html[data-theme="light"] .card .bg-primary .text-white,
html[data-theme="light"] .card .bg-success .text-white,
html[data-theme="light"] .card .bg-danger .text-white,
html[data-theme="light"] .card .bg-info .text-white,
html[data-theme="light"] .card .bg-warning .text-white,
html[data-theme="light"] .card .bg-dark .text-white,
html[data-theme="light"] .card .btn .text-white,
html[data-theme="light"] .card .badge.text-white {
  color: #fff !important;
}
html[data-theme="light"] .text-white-50 { color: var(--text-muted) !important; }
html[data-theme="light"] [style*="color: #fff"]:not(.btn):not(.badge):not([class*="bg-"]),
html[data-theme="light"] [style*="color:#fff"]:not(.btn):not(.badge):not([class*="bg-"]),
html[data-theme="light"] [style*="color: white"]:not(.btn):not(.badge):not([class*="bg-"]) {
  color: var(--text-primary) !important;
}

/* =====================================================================
   رنگ‌بندی ملایم و خوانا برای بج‌ها و دکمه‌های کوچکِ جدول‌ها
   (پس‌زمینه‌ی کم‌رنگ + متن و کادرِ هم‌رنگ). دکمه‌های اصلیِ بزرگ (ثبت/ذخیره) پررنگ می‌مانند.
   ===================================================================== */
html .badge.bg-primary, html .badge.badge-primary,
html .btn-sm.btn-primary, html .table .btn.btn-primary, html .btn-action.btn-primary {
  background-color: color-mix(in srgb, var(--primary) 15%, transparent) !important;
  color: var(--primary) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 38%, transparent) !important;
  box-shadow: none !important;
}
html .btn-sm.btn-primary:hover, html .table .btn.btn-primary:hover, html .btn-action.btn-primary:hover {
  background-color: color-mix(in srgb, var(--primary) 28%, transparent) !important;
  color: var(--primary) !important;
}
html .badge.bg-success, html .badge.badge-success,
html .btn-sm.btn-success, html .table .btn.btn-success, html .btn-action.btn-success {
  background-color: color-mix(in srgb, var(--success) 15%, transparent) !important;
  color: var(--success) !important;
  border: 1px solid color-mix(in srgb, var(--success) 38%, transparent) !important;
  box-shadow: none !important;
}
html .btn-sm.btn-success:hover, html .table .btn.btn-success:hover, html .btn-action.btn-success:hover {
  background-color: color-mix(in srgb, var(--success) 28%, transparent) !important;
  color: var(--success) !important;
}
html .badge.bg-danger, html .badge.badge-danger,
html .btn-sm.btn-danger, html .table .btn.btn-danger, html .btn-action.btn-danger {
  background-color: color-mix(in srgb, var(--danger) 15%, transparent) !important;
  color: var(--danger) !important;
  border: 1px solid color-mix(in srgb, var(--danger) 38%, transparent) !important;
  box-shadow: none !important;
}
html .btn-sm.btn-danger:hover, html .table .btn.btn-danger:hover, html .btn-action.btn-danger:hover {
  background-color: color-mix(in srgb, var(--danger) 28%, transparent) !important;
  color: var(--danger) !important;
}
html .badge.bg-warning, html .badge.badge-warning,
html .btn-sm.btn-warning, html .table .btn.btn-warning, html .btn-action.btn-warning {
  background-color: color-mix(in srgb, var(--warning) 15%, transparent) !important;
  color: var(--warning) !important;
  border: 1px solid color-mix(in srgb, var(--warning) 38%, transparent) !important;
  box-shadow: none !important;
}
html .btn-sm.btn-warning:hover, html .table .btn.btn-warning:hover, html .btn-action.btn-warning:hover {
  background-color: color-mix(in srgb, var(--warning) 28%, transparent) !important;
  color: var(--warning) !important;
}
html .badge.bg-info, html .badge.badge-info,
html .btn-sm.btn-info, html .table .btn.btn-info, html .btn-action.btn-info {
  background-color: color-mix(in srgb, var(--info) 15%, transparent) !important;
  color: var(--info) !important;
  border: 1px solid color-mix(in srgb, var(--info) 38%, transparent) !important;
  box-shadow: none !important;
}
html .btn-sm.btn-info:hover, html .table .btn.btn-info:hover, html .btn-action.btn-info:hover {
  background-color: color-mix(in srgb, var(--info) 28%, transparent) !important;
  color: var(--info) !important;
}
html .badge.bg-secondary, html .badge.badge-secondary,
html .btn-sm.btn-secondary, html .table .btn.btn-secondary {
  background-color: color-mix(in srgb, var(--text-muted) 16%, transparent) !important;
  color: var(--text-secondary) !important;
  border: 1px solid color-mix(in srgb, var(--text-muted) 35%, transparent) !important;
  box-shadow: none !important;
}
html .badge { font-weight: 600; padding: 0.35em 0.65em; }

/* ============================================================
   Sweet Alert — ظاهر یکدست در کل سیستم (رنگ‌ها از تم فعلی، آیکون‌ها از رنگ‌های معنایی)
   توجه: رنگ‌های inline قدیمی (مثل #1b2e4b) با !important بازنویسی می‌شوند.
   ============================================================ */
.swal2-container { z-index: 20000 !important; }
.swal2-popup {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border);
    border-radius: 12px !important;
    box-shadow: var(--shadow-md, 0 10px 30px rgba(0,0,0,.35)) !important;
    font-family: inherit !important;
    direction: rtl;
}
.swal2-title, .swal2-html-container, .swal2-content { color: var(--text-primary) !important; font-family: inherit !important; font-weight: normal !important; }
.swal2-popup.swal2-toast { padding: .7rem 1rem !important; align-items: center; }
.swal2-popup.swal2-toast .swal2-title { font-size: .95rem !important; margin: 0 .6rem !important; }
.swal2-popup.swal2-toast .swal2-html-container { font-size: .82rem !important; margin: .2rem .6rem !important; color: var(--text-secondary) !important; }
.swal2-timer-progress-bar { background: var(--primary) !important; }
.swal2-input, .swal2-textarea, .swal2-select {
    background: var(--bg-input) !important; color: var(--text-primary) !important; border: 1px solid var(--border) !important;
}
.swal2-styled { border-radius: 8px !important; font-family: inherit !important; box-shadow: none !important; }
.swal2-styled.swal2-confirm { background-color: var(--primary); color: #fff; }
.swal2-styled.swal2-cancel { background-color: var(--bg-surface-2); color: var(--text-primary); border: 1px solid var(--border); }
.swal2-styled.swal2-deny { background-color: var(--danger); color: #fff; }

/* آیکون‌ها: رنگ معنایی (و همراه با پالتِ کوررنگی کاربر) */
.swal2-icon { background: transparent !important; }
.swal2-icon.swal2-success { border-color: color-mix(in srgb, var(--success) 35%, transparent) !important; color: var(--success) !important; }
.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--success) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: color-mix(in srgb, var(--success) 30%, transparent) !important; }
.swal2-icon.swal2-success [class^='swal2-success-circular-line'], .swal2-icon.swal2-success .swal2-success-fix { background: transparent !important; }
.swal2-icon.swal2-error { border-color: var(--danger) !important; color: var(--danger) !important; }
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: var(--danger) !important; }
.swal2-icon.swal2-warning { border-color: var(--warning) !important; color: var(--warning) !important; }
.swal2-icon.swal2-info { border-color: var(--info) !important; color: var(--info) !important; }
.swal2-icon.swal2-question { border-color: var(--primary) !important; color: var(--primary) !important; }

/* ============================================================
   ایندکس‌ها در دسکتاپ: ارتفاع صفحه ثابت، بدنه‌ی جدول اسکرول می‌شود
   و سرستون‌ها (thead) همیشه دیده می‌شوند. (ارتفاع از useFixedHeight ست می‌شود)
   ============================================================ */
@media (min-width: 992px) {
    .bi-widget.bi-fixed { display: flex; flex-direction: column; overflow: hidden; }
    .bi-widget.bi-fixed > * { flex: 0 0 auto; }
    .bi-widget.bi-fixed > .bi-scroll { flex: 1 1 auto; min-height: 0; overflow: auto !important; }
    .bi-widget.bi-fixed > .bi-scroll > table { margin-bottom: 0 !important; }
    .bi-widget.bi-fixed > .bi-scroll thead th {
        position: sticky; top: 0; z-index: 3;
        background-color: var(--bg-surface-2) !important;
        box-shadow: 0 2px 0 var(--border);
    }
    .bi-widget.bi-fixed > style { display: none; }
}

/* ایندکس‌ها: حذف فاصله‌های اضافه‌ی بالای جدول تا رکوردهای بیشتری دیده شود */
.bi-row.layout-top-spacing { margin-top: 0 !important; }
.bi-row .layout-spacing { padding-bottom: 0 !important; margin-bottom: 0 !important; }
.bi-widget .bi-head { min-height: 0; }
.bi-widget .bi-head .td-btn { width: 32px !important; height: 32px !important; }
.bi-widget .bi-head h4:empty { display: none; }
.bi-widget .table { margin-bottom: .5rem !important; }

/* =====================================================================
   ظاهرِ حرفه‌ای (Pro skin) — نسخه‌ی ۱
   - تمِ «طلایی» (پیش‌تر توکن نداشت) به‌صورتِ کامل تعریف شد
   - کارت‌ها، جدول‌ها، دکمه‌ها و فرم‌ها: سایه‌ی لایه‌ای، گوشه‌هایِ نرم، حرکتِ ملایم
   ===================================================================== */

/* --- تمِ طلایی: مشکیِ گرم + طلایی --- */
html[data-theme="gold"] {
  --primary: #d9b23f;
  --primary-rgb: 217, 178, 63;
  --primary-hover: #ecc65a;
  --primary-soft: rgba(217, 178, 63, 0.13);
  --accent-gold: #d9b23f;
  --accent-gold-soft: rgba(217, 178, 63, 0.15);

  --success: #34d399;
  --warning: #f59e0b;
  --danger: #f87171;
  --info: #60a5fa;

  /* مشکیِ خنثی (بدونِ رنگِ قهوه‌ای)؛ طلایی فقط برایِ تأکید */
  --bg-body: #080808;
  --bg-sidebar: #0c0c0c;
  --bg-header: #0e0e0e;
  --bg-surface: #131313;
  --bg-surface-2: #1b1b1a;
  --bg-surface-hover: #242422;
  --bg-input: #161616;

  --border: #2a2a28;
  --border-strong: #403d33;

  --text-primary: #f3f1ea;
  --text-secondary: #c4c0b4;
  --text-muted: #8f8b80;
  --text-on-primary: #17130a;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.55);
  --shadow-md: 0 8px 22px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.65);

  color-scheme: dark;
}
/* درخششِ پس‌زمینه در تمِ طلایی خیلی ملایم‌تر (تا مشکی قهوه‌ای نشود) */
html[data-theme="gold"] body {
  background-image:
    radial-gradient(900px 420px at 88% -8%, rgba(217, 178, 63, 0.05), transparent 70%);
}

/* --- شعاع‌ها و سایه‌هایِ نرم‌تر (همه‌ی تم‌ها) --- */
:root, html[data-theme] {
  --radius-md: 12px;
  --radius-lg: 18px;
}
html[data-theme="dark"] {
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 8px 22px rgba(0, 0, 0, 0.32);
}
html[data-theme="light"] {
  --shadow-sm: 0 1px 2px rgba(20, 30, 60, 0.06), 0 1px 1px rgba(20, 30, 60, 0.04);
  --shadow-md: 0 8px 22px rgba(20, 30, 60, 0.09);
}

/* --- پس‌زمینه: درخششِ بسیار ملایم از رنگِ برند --- */
body {
  background-image:
    radial-gradient(900px 420px at 88% -8%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 70%),
    radial-gradient(700px 360px at 4% 105%, color-mix(in srgb, var(--primary) 6%, transparent), transparent 70%);
  background-attachment: fixed;
}

/* --- کارت‌ها --- */
.widget-content-area,
.card,
.widget-content {
  border-radius: var(--radius-md) !important;
  border-color: color-mix(in srgb, var(--border) 90%, transparent) !important;
  box-shadow: var(--shadow-sm), inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent);
  transition: box-shadow .22s ease, border-color .22s ease, transform .22s ease;
}
.dash-grid > .dash-widget:not(.editing):hover .widget-content,
.dash-grid > .dash-widget:not(.editing):hover .widget-content-area {
  box-shadow: var(--shadow-md), inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
  border-color: color-mix(in srgb, var(--primary) 32%, var(--border)) !important;
}

/* --- عنوان‌ها --- */
h4, h5 { letter-spacing: -0.1px; }
.widget-content h6, .widget-content-area h6 { font-weight: 600; }

/* --- جدول‌ها: سرستونِ سبک‌تر، ردیف‌هایِ راحت‌تر --- */
.table thead th {
  font-size: .76rem;
  letter-spacing: .2px;
  padding-top: .7rem !important;
  padding-bottom: .7rem !important;
  border-bottom: 1px solid var(--border-strong) !important;
}
.table tbody td {
  padding-top: .6rem !important;
  padding-bottom: .6rem !important;
  font-variant-numeric: tabular-nums;
}
.table tbody tr { transition: background-color .15s ease; }
.table tbody tr:last-child td { border-bottom: 0 !important; }
.table-responsive { border-radius: var(--radius-md); }

/* --- دکمه‌ها --- */
.btn { transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease; }
.btn:active { transform: translateY(1px); }
.btn-primary:not(.btn-sm) { box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 32%, transparent); }
.btn:focus-visible, a:focus-visible, button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 70%, transparent);
  outline-offset: 2px;
}

/* --- فرم‌ها --- */
.form-control, .form-select, select, textarea,
input[type="text"], input[type="number"], input[type="password"], input[type="email"] {
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:hover, .form-select:hover { border-color: var(--border-strong) !important; }

/* --- بج‌ها --- */
html .badge { border-radius: 999px; letter-spacing: 0; }

/* --- اسکرول‌بار --- */
::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: padding-box; }


/* =====================================================================
   عمق و حالتِ سه‌بعدیِ ملایم (Soft 3D)
   سطح‌هایِ ارتفاع (elevation): هرچه عنصر مهم‌تر، سایه‌ی لایه‌ایِ بزرگ‌تر + لبه‌یِ نورِ بالا
   ===================================================================== */
html[data-theme="dark"] {
  --elev-1: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.4), 0 4px 10px -2px rgba(0,0,0,.35);
  --elev-2: inset 0 1px 0 rgba(255,255,255,.07), 0 2px 4px rgba(0,0,0,.35), 0 12px 26px -8px rgba(0,0,0,.6);
  --elev-3: inset 0 1px 0 rgba(255,255,255,.10), 0 4px 8px rgba(0,0,0,.4), 0 22px 40px -12px rgba(0,0,0,.7);
  --card-sheen: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 55%);
}
html[data-theme="gold"] {
  --elev-1: inset 0 1px 0 rgba(255,236,170,.07), 0 1px 2px rgba(0,0,0,.6), 0 4px 10px -2px rgba(0,0,0,.5);
  --elev-2: inset 0 1px 0 rgba(255,236,170,.10), 0 2px 4px rgba(0,0,0,.5), 0 12px 26px -8px rgba(0,0,0,.75);
  --elev-3: inset 0 1px 0 rgba(255,236,170,.14), 0 4px 8px rgba(0,0,0,.5), 0 22px 40px -12px rgba(0,0,0,.85), 0 0 0 1px rgba(217,178,63,.16);
  --card-sheen: linear-gradient(180deg, rgba(255,236,170,.05), rgba(255,255,255,0) 55%);
}
html[data-theme="light"] {
  --elev-1: inset 0 1px 0 #fff, 0 1px 2px rgba(20,30,60,.08), 0 4px 10px -2px rgba(20,30,60,.08);
  --elev-2: inset 0 1px 0 #fff, 0 2px 4px rgba(20,30,60,.07), 0 12px 26px -8px rgba(20,30,60,.18);
  --elev-3: inset 0 1px 0 #fff, 0 4px 8px rgba(20,30,60,.08), 0 22px 40px -12px rgba(20,30,60,.26);
  --card-sheen: linear-gradient(180deg, #ffffff, #f7f9fd);
}

/* کارت‌ها: سطحِ بالاآمده با لبه‌یِ نور */
.widget-content-area,
.card,
.widget-content {
  background-image: var(--card-sheen);
  box-shadow: var(--elev-1) !important;
}
.dash-grid > .dash-widget .widget-content,
.dash-grid > .dash-widget .widget-content-area {
  box-shadow: var(--elev-2) !important;
}
.dash-grid > .dash-widget:not(.editing):hover .widget-content,
.dash-grid > .dash-widget:not(.editing):hover .widget-content-area {
  box-shadow: var(--elev-3) !important;
  transform: translateY(-3px);
}

/* مودال و منوهایِ بازشو: بالاترین ارتفاع */
.modal-content, .dropdown-menu, .swal2-popup { box-shadow: var(--elev-3) !important; }

/* نوار بالا و سایدبار: سایه‌یِ جداکننده برایِ حسِ لایه‌ای بودن */
.header-container { box-shadow: 0 8px 22px -12px rgba(0,0,0,.55), inset 0 -1px 0 var(--border) !important; }
#sidebar { box-shadow: -10px 0 26px -16px rgba(0,0,0,.55); }

/* دکمه‌یِ اصلی: برجسته با لبه‌یِ نور و فشردن */
.btn-primary:not(.btn-sm) {
  background-image: linear-gradient(180deg, color-mix(in srgb, #fff 18%, transparent), transparent 55%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -2px 0 rgba(0,0,0,.18),
    0 6px 14px -2px color-mix(in srgb, var(--primary) 40%, transparent);
}
.btn-primary:not(.btn-sm):hover { transform: translateY(-1px); }
.btn-primary:not(.btn-sm):active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.3), 0 2px 6px -2px color-mix(in srgb, var(--primary) 40%, transparent);
}

/* فیلدهایِ ورودی: حالتِ فرورفته */
.form-control, .form-select, select, textarea,
input[type="text"], input[type="number"], input[type="password"], input[type="email"] {
  box-shadow: inset 0 2px 4px rgba(0,0,0,.18), 0 1px 0 color-mix(in srgb, #fff 5%, transparent) !important;
}
.form-control:focus, .form-select:focus {
  box-shadow: inset 0 1px 3px rgba(0,0,0,.2), 0 0 0 3px var(--primary-soft) !important;
}

/* بج‌هایِ گرد: لبه‌یِ نورِ ریز */
html .badge { box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }

/* کاهشِ حرکت برایِ کسانی که در سیستم‌عامل غیرفعال کرده‌اند */
@media (prefers-reduced-motion: reduce) {
  .dash-grid > .dash-widget:not(.editing):hover .widget-content,
  .dash-grid > .dash-widget:not(.editing):hover .widget-content-area { transform: none; }
}

/* ==========================================================
   Soft 3D — سایدبار و نوار بالا
   ========================================================== */

/* ---------- نوار بالا ---------- */
.header-container {
  box-shadow: 0 1px 0 var(--border), 0 8px 24px -10px rgba(0,0,0,.45) !important;
  background-image: var(--card-sheen) !important;
}
.header.navbar .navbar-item .nav-item > .nav-link {
  width: 40px; height: 40px;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: background .2s, box-shadow .2s, transform .2s, color .2s, border-color .2s;
}
.header.navbar .navbar-item .nav-item > .nav-link:hover,
.header.navbar .navbar-item .nav-item.show > .nav-link {
  background: var(--bg-surface-2);
  border-color: var(--border);
  color: var(--primary);
  box-shadow: var(--elev-1);
  transform: translateY(-1px);
}
.header.navbar .navbar-item .nav-item > .nav-link:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.35);
}
.user-profile-dropdown .dropdown-menu,
.theme-menu,
.header .dropdown-menu {
  border-radius: 14px !important;
  box-shadow: var(--elev-3) !important;
  background-image: var(--card-sheen);
}
.header .dropdown-menu .dropdown-item { border-radius: 10px; margin: 2px 6px; transition: background .2s, transform .2s; }
.header .dropdown-menu .dropdown-item:hover { transform: translateX(-2px); }

/* ---------- سایدبار ---------- */
#sidebar {
  background-image: linear-gradient(180deg, rgba(255,255,255,.025), transparent 160px) !important;
  box-shadow: -1px 0 0 var(--border), -14px 0 34px -14px rgba(0,0,0,.55) !important;
}
.sidebar-brand-header {
  background-image: var(--card-sheen) !important;
  box-shadow: 0 1px 0 var(--border), 0 10px 22px -12px rgba(0,0,0,.6) !important;
  position: relative; z-index: 2;
}
.sidebar-brand-header img { filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)); }

/* آیتم‌ها به‌شکل قرص‌های نرم */
#sidebar .menu > a.dropdown-toggle,
#sidebar .submenu li > a,
#sidebar .submenu li.sub-submenu > a {
  margin: 3px 10px;
  border-radius: 12px !important;
  border: 1px solid transparent;
  transition: background .2s, box-shadow .2s, transform .2s, border-color .2s, color .2s;
}
#sidebar .menu > a.dropdown-toggle:hover,
#sidebar .submenu li > a:hover {
  background: var(--bg-surface-2) !important;
  border-color: var(--border);
  box-shadow: var(--elev-1);
  transform: translateX(-2px);
}
#sidebar .menu > a.dropdown-toggle .sidebar-icon,
#sidebar .submenu li > a .sidebar-icon {
  width: 32px !important; height: 32px !important;
  line-height: 32px;
  font-size: 15px !important;
  border-radius: 10px;
  background: var(--bg-surface-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 2px 5px rgba(0,0,0,.35);
  margin-left: 10px;
}
#sidebar .submenu li > a .sidebar-icon { width: 28px !important; height: 28px !important; line-height: 28px; font-size: 13px !important; }

/* آیتم فعال: قرصِ برجسته با درخششِ رنگِ اصلی */
#sidebar .submenu li a.active,
#sidebar .menu > a.active,
#sidebar .menu > a.dropdown-toggle.active {
  background-image: linear-gradient(135deg, var(--primary-soft), transparent 85%) !important;
  border-color: color-mix(in srgb, var(--primary) 40%, transparent) !important;
  box-shadow: var(--elev-1), 0 8px 18px -10px color-mix(in srgb, var(--primary) 60%, transparent) !important;
}
#sidebar .submenu li a.active .sidebar-icon,
#sidebar .menu > a.active .sidebar-icon {
  background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 85%, #fff 15%), var(--primary));
  color: var(--text-on-primary) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 10px -2px color-mix(in srgb, var(--primary) 60%, transparent);
}

/* زیرمنوها: قابِ گودِ ملایم */
#sidebar .menu > ul.submenu {
  margin: 2px 10px 6px;
  border-radius: 14px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.28);
  padding: 4px 0 !important;
}
#sidebar .submenu li > a { margin: 3px 6px; }

/* در تمِ طلایی همه‌ی رنگ‌های لایه‌ها به طلایی یکدست شوند */
html[data-theme="gold"] #sidebar .menu > a.dropdown-toggle,
html[data-theme="gold"] #sidebar .menu > ul.submenu > li > a,
html[data-theme="gold"] #sidebar .menu > ul.submenu > li.sub-submenu > a,
html[data-theme="gold"] #sidebar .sub-submenu > ul.submenu > li > a { border-right-color: color-mix(in srgb, var(--primary) 55%, transparent); }
html[data-theme="gold"] #sidebar .menu > a.dropdown-toggle .sidebar-icon,
html[data-theme="gold"] #sidebar .menu > ul.submenu > li > a .sidebar-icon,
html[data-theme="gold"] #sidebar .sub-submenu > ul.submenu > li > a .sidebar-icon { color: var(--primary); }
html[data-theme="gold"] #sidebar .menu > ul.submenu,
html[data-theme="gold"] #sidebar .sub-submenu > ul.submenu { background-color: rgba(0,0,0,.28); }

/* تمِ روشن: سایه‌ها ملایم‌تر */
html[data-theme="light"] .header-container { box-shadow: 0 1px 0 var(--border), 0 8px 22px -12px rgba(20,30,60,.18) !important; }
html[data-theme="light"] #sidebar { box-shadow: -1px 0 0 var(--border), -12px 0 30px -16px rgba(20,30,60,.2) !important; background-image: none !important; }
html[data-theme="light"] #sidebar .menu > a.dropdown-toggle .sidebar-icon,
html[data-theme="light"] #sidebar .submenu li > a .sidebar-icon { box-shadow: inset 0 1px 0 #fff, 0 2px 5px rgba(20,30,60,.14); }
html[data-theme="light"] #sidebar .menu > ul.submenu { box-shadow: inset 0 2px 6px rgba(20,30,60,.1); }

@media (prefers-reduced-motion: reduce) {
  #sidebar .menu > a.dropdown-toggle:hover, #sidebar .submenu li > a:hover,
  .header.navbar .navbar-item .nav-item > .nav-link:hover, .header .dropdown-menu .dropdown-item:hover { transform: none; }
}

/* ==========================================================
   اصلاح‌ها (دور دوم): آیکون‌های نوار بالا + هایلایتِ سایدبار
   ========================================================== */

/* آیکون‌های پیام و پروفایل همیشه با اندازه‌ی ثابت دیده شوند */
.header.navbar .navbar-item .nav-item > .nav-link {
  min-width: 40px; min-height: 40px;
  width: auto; height: auto;
  padding: 0 !important;
  flex-shrink: 0;
}
.header.navbar .navbar-item .nav-item > .nav-link > svg,
.header.navbar .navbar-item .nav-item > .nav-link svg.feather {
  width: 22px !important; height: 22px !important;
  min-width: 22px; min-height: 22px;
  flex-shrink: 0; display: block !important;
  opacity: 1 !important; visibility: visible !important;
  color: inherit;
}
.header.navbar .navbar-item .nav-item > .nav-link.dropdown-toggle::after { display: none !important; }

/* هایلایت سایدبار: بدون پس‌زمینه‌ی پررنگ؛ کارتِ ظریفِ دور آیکون */
#sidebar#sidebar .menu > a.active,
#sidebar#sidebar .menu > a.dropdown-toggle.active,
#sidebar#sidebar .submenu li a.active,
#sidebar#sidebar .menu > ul.submenu > li > a.active,
#sidebar#sidebar .sub-submenu > ul.submenu > li > a.active {
  background: transparent !important;
  background-image: none !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
  color: var(--text-primary) !important;
  font-weight: 700;
}
#sidebar#sidebar .menu > a.active .sidebar-icon,
#sidebar#sidebar .submenu li a.active .sidebar-icon {
  background: var(--bg-surface) !important;
  color: var(--primary) !important;
  border: 1.5px solid var(--primary);
  border-radius: 10px;
  box-shadow: 0 0 0 3px var(--primary-soft), 0 3px 8px -2px color-mix(in srgb, var(--primary) 45%, transparent) !important;
}

/* ---------- ۶-ب) سایه‌ی نرمِ یکدست برایِ همه‌ی پنل‌ها (کلاس‌هایِ سفارشیِ ماژول‌ها) ---------- */
div[class$="-card"], div[class*="-card "], section[class*="-card"],
.rp-card, .rx-card, .rp-typecard, .p-card, .sec-card, .lx-card, .lb-card, .size-panel, .pick-box,
.designer-bar, .dash-tabs, .pc-sub-box {
  box-shadow: var(--shadow-sm);
}
.rp-typecard:hover, .rx-card:hover { box-shadow: var(--shadow-md); }
.rp-card:not(.kd-edge), .rx-card:not(.kd-edge) {
  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--primary) 7%, transparent), transparent 64px);
}

/* ---------- ۶-ج) یکدست‌سازیِ سربرگ و تب‌هایِ صفحاتِ فهرستی (حضور‌وغیاب و ...) ---------- */
.layout-px-spacing .layout-spacing > .d-flex.justify-content-between > h5:first-child {
  position: relative; padding-inline-start: 12px; font-weight: 700; color: var(--text-primary) !important;
}
.layout-px-spacing .layout-spacing > .d-flex.justify-content-between > h5:first-child::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 12%; bottom: 12%; width: 4px; border-radius: 4px; background: var(--primary);
}
.layout-px-spacing .nav-tabs { border-bottom: 1px solid var(--border) !important; gap: 4px; }
.layout-px-spacing .nav-tabs .nav-link {
  color: var(--text-secondary) !important; background: transparent !important; border: none !important;
  border-bottom: 2px solid transparent !important; border-radius: 10px 10px 0 0 !important; padding: .55rem 1rem; transition: background .2s, color .2s;
}
.layout-px-spacing .nav-tabs .nav-link:hover { background: var(--bg-surface-2) !important; color: var(--text-primary) !important; }
.layout-px-spacing .nav-tabs .nav-link.active {
  color: var(--primary) !important; font-weight: 600;
  background: color-mix(in srgb, var(--primary) 10%, transparent) !important; border-bottom-color: var(--primary) !important;
}

/* ---------- ۶-د) سربرگِ ایندکس‌ها بشکند نه فشرده شود؛ اسکرولِ جدول هم‌رنگِ تم ---------- */
.bi-head { flex-wrap: wrap; gap: 10px; }
.bi-head > .d-flex { flex-wrap: wrap; justify-content: flex-end; }
.bi-scroll { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.bi-scroll::-webkit-scrollbar-track { background: transparent !important; }

/* ---------- ۶-ه) رنگِ وضعیت برایِ ردیف‌ها و کارت‌ها + کارتیِ موبایلِ جدول‌هایِ تنخواه ---------- */
.pc-mcard, .cx-cardify tbody tr, .pc-cardify tbody tr { --c: var(--primary); }
.pc-mcard:has(.pc-st-pending), tr:has(.cx-b-on_hold), tr:has(.cx-b-pending), tr:has(.pc-st-pending) { --c: var(--warning); }
.pc-mcard:has(.pc-st-approved), tr:has(.cx-b-active), tr:has(.cx-b-in_progress), tr:has(.pc-st-approved) { --c: var(--info); }
.pc-mcard:has(.pc-st-rejected), tr:has(.cx-b-cancelled), tr:has(.pc-st-rejected) { --c: var(--danger); }
.pc-mcard:has(.pc-st-settled), tr:has(.cx-b-done), tr:has(.pc-st-settled) { --c: var(--success); }
tr:has(.cx-b-planned) { --c: var(--text-muted); }

/* نوارِ رنگیِ لبه‌یِ راستِ ردیفِ جدول (دسکتاپ) */
.cx-table tbody tr:has(.cx-badge) > td:first-child, .pc-table tbody tr:has(.pc-badge) > td:first-child { box-shadow: inset -3px 0 0 var(--c, transparent); }

.pc-mcard { position: relative; overflow: hidden; box-shadow: var(--shadow-sm); padding-top: 14px !important;
  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--c) 10%, transparent), transparent 56px); }
.pc-mcard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--c); }

/* آکاردئون با <details> */
details.cx-acc > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; margin: 0; }
details.cx-acc > summary::-webkit-details-marker { display: none; }
details.cx-acc > summary::after { content: "\f078"; font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome; font-weight: 900; font-size: 11px; color: var(--text-muted); transition: transform .2s; }
details.cx-acc[open] > summary::after { transform: rotate(180deg); }
details.cx-acc[open] > summary { margin-bottom: 10px; }

@media (max-width: 767px) {
  .pc-cardify, .pc-cardify tbody, .pc-cardify tfoot { display: block; }
  .pc-cardify { min-width: 0 !important; }
  .pc-table-wrap:has(.pc-cardify) { border: none !important; box-shadow: none !important; background: transparent !important; overflow: visible !important; }
  .pc-cardify thead { display: none; }
  .pc-cardify tbody tr, .pc-cardify tfoot tr {
    display: block; position: relative; overflow: hidden; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px;
    margin-bottom: 10px; padding: 8px 12px 4px; box-shadow: var(--shadow-sm);
    background-image: linear-gradient(to bottom, color-mix(in srgb, var(--c, var(--primary)) 10%, transparent), transparent 56px);
  }
  .pc-cardify tbody tr::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--c); }
  .pc-cardify td { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left !important; padding: 6px 0 !important; border-bottom: 1px dashed var(--border) !important; background: transparent !important; }
  .pc-cardify td:last-child { border-bottom: none !important; }
  .pc-cardify td::before { content: attr(data-label); flex: 0 0 auto; max-width: 42%; color: var(--text-secondary); font-size: 12px; font-weight: 600; text-align: right; }
  .pc-cardify td[data-label=""]::before { display: none; }
  .pc-cardify td[data-label=""] { justify-content: flex-end; }
  .pc-cardify td.cx-span { display: block; text-align: center !important; }
  .pc-cardify td.cx-span::before { display: none; }
  .cx-cardify tbody tr, .cx-table.cx-cardify tbody tr { position: relative; overflow: hidden; background-image: linear-gradient(to bottom, color-mix(in srgb, var(--c) 10%, transparent), transparent 56px); }
  .cx-table.cx-cardify tbody tr::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--c); }
}

/* نوارِ لبه‌یِ راستِ ردیف فقط در دسکتاپ؛ در کارتِ موبایل روی متن نیفتد */
@media (max-width: 767px) {
  .cx-table tbody tr > td:first-child, .pc-table tbody tr > td:first-child { box-shadow: none !important; }
}