/*!
 * Sina-BPMS — Base theme stylesheet
 * فایل پایه‌ی تم سینا — بازطراحی بر اساس قالب «پروژه‌یار» (فاز UI-1)
 *
 * قواعد کار با این فایل:
 *   • هیچ رنگی را مستقیم در تمپلیت ننویسید؛ همیشه از توکن‌های --sina-* استفاده کنید.
 *   • کامپوننت‌های مشترک (کارت، کارت آماری، چیپ، آواتار، تایم‌لاین، کانبان و ...)
 *     در بخش ۱۶ همین فایل تعریف شده‌اند — در تمپلیت فقط کلاسشان را بگذارید.
 *   • تم تاریک با [data-theme="dark"] روی <html> کار می‌کند و هم‌زمان
 *     data-bs-theme هم ست می‌شود تا کامپوننت‌های خود بوت‌استرپ ۵.۳ هم تاریک شوند.
 */

/* ============================================================================
 * ۱. توکن‌ها — رنگ، تایپوگرافی، فاصله، شعاع، سایه
 * ========================================================================= */
:root {
  /* ---- رنگ‌های برند (پالت پروژه‌یار) ---- */
  --sina-primary:        #7c3aed;
  --sina-primary-rgb:    124, 58, 237;
  --sina-primary-50:     #f6f2ff;
  --sina-primary-100:    #ede4ff;
  --sina-primary-200:    #d9c7fd;
  --sina-primary-500:    #7c3aed;
  --sina-primary-600:    #6d28d9;
  --sina-primary-700:    #5b21b6;
  --sina-primary-800:    #4c1d95;

  --sina-secondary:      #ec4899;   /* صورتی */
  --sina-secondary-rgb:  236, 72, 153;
  --sina-secondary-100:  #fde7f3;
  --sina-secondary-500:  #ec4899;
  --sina-secondary-700:  #be185d;

  --sina-success:        #14b8a6;   /* فیروزه‌ای */
  --sina-success-rgb:    20, 184, 166;
  --sina-success-100:    #d9f6f2;
  --sina-success-700:    #0d9488;

  --sina-warning:        #f97316;   /* نارنجی */
  --sina-warning-rgb:    249, 115, 22;
  --sina-warning-100:    #ffedd5;
  --sina-warning-700:    #c2410c;

  --sina-danger:         #ef4444;
  --sina-danger-rgb:     239, 68, 68;
  --sina-danger-100:     #fde4e4;
  --sina-danger-700:     #b91c1c;

  --sina-info:           #3b82f6;
  --sina-info-rgb:       59, 130, 246;
  --sina-info-100:       #e0edfe;
  --sina-info-700:       #1d4ed8;

  --sina-accent-yellow:  #facc15;
  --sina-accent-blue:    #3b82f6;
  --sina-accent-teal:    #14b8a6;
  --sina-accent-pink:    #ec4899;
  --sina-accent-orange:  #f97316;

  /* ---- خاکستری‌ها (با ته‌مایه‌ی بنفش) ---- */
  --sina-gray-50:        #faf9fd;
  --sina-gray-100:       #f2f0f9;
  --sina-gray-200:       #e5e1f0;
  --sina-gray-300:       #cdc7de;
  --sina-gray-400:       #a9a2c0;
  --sina-gray-500:       #8a84a3;
  --sina-gray-600:       #635c7d;
  --sina-gray-700:       #4a4363;
  --sina-gray-800:       #2b2440;
  --sina-gray-900:       #1a1530;

  /* ---- هیت‌مپ (معنایی — عمداً از پالت برند جداست) ---- */
  --sina-hm-green:       #14b8a6;
  --sina-hm-yellow:      #facc15;
  --sina-hm-orange:      #f97316;
  --sina-hm-red:         #ef4444;
  --sina-hm-gray:        #a9a2c0;

  /* ---- سطوح و متن — حالت روشن ---- */
  --sina-bg:             #f4f2fb;
  --sina-bg-card:        #ffffff;
  --sina-bg-elevated:    #ffffff;
  --sina-bg-soft:        #faf9fd;
  --sina-bg-sidebar:     #7c3aed;
  --sina-text:           #2b2440;
  --sina-text-muted:     #8a84a3;
  --sina-text-soft:      #a9a2c0;
  --sina-border:         rgba(124, 58, 237, 0.10);
  --sina-border-strong:  rgba(124, 58, 237, 0.22);
  --sina-grid:           rgba(43, 36, 64, 0.08);

  /* ---- گرادیان‌ها ---- */
  --sina-sidebar-grad:   linear-gradient(180deg, #7c3aed 0%, #a855f7 55%, #ec4899 100%);
  --sina-grad-purple:    linear-gradient(135deg, #7c3aed, #a855f7);
  --sina-grad-pink:      linear-gradient(135deg, #ec4899, #f472b6);
  --sina-grad-orange:    linear-gradient(135deg, #f97316, #fbbf24);
  --sina-grad-teal:      linear-gradient(135deg, #0d9488, #2dd4bf);
  --sina-grad-blue:      linear-gradient(135deg, #2563eb, #60a5fa);
  --sina-grad-brand:     linear-gradient(135deg, #7c3aed, #ec4899);

  /* ---- تایپوگرافی ---- */
  --sina-font-base:      "Vazirmatn", Tahoma, "Segoe UI", Arial, sans-serif;
  --sina-font-mono:      Consolas, "Courier New", monospace;
  --sina-fs-xs:          0.75rem;
  --sina-fs-sm:          0.875rem;
  --sina-fs-base:        1rem;
  --sina-fs-md:          1.0625rem;
  --sina-fs-lg:          1.125rem;
  --sina-fs-xl:          1.25rem;
  --sina-fs-2xl:         1.5rem;
  --sina-fs-3xl:         1.875rem;
  --sina-fs-4xl:         2.25rem;
  --sina-line-height:    1.7;
  --sina-letter-spacing: 0;

  /* ---- فاصله ---- */
  --sina-space-1:        0.25rem;
  --sina-space-2:        0.5rem;
  --sina-space-3:        0.75rem;
  --sina-space-4:        1rem;
  --sina-space-5:        1.25rem;
  --sina-space-6:        1.5rem;
  --sina-space-8:        2rem;
  --sina-space-10:       2.5rem;
  --sina-space-12:       3rem;
  --sina-space-16:       4rem;

  /* ---- شعاع (قالب پروژه‌یار گردتر است) ---- */
  --sina-radius-sm:      0.5rem;     /*  8px */
  --sina-radius:         0.75rem;    /* 12px */
  --sina-radius-md:      0.875rem;   /* 14px */
  --sina-radius-lg:      1.125rem;   /* 18px */
  --sina-radius-xl:      1.375rem;   /* 22px — شعاع کارت اصلی */
  --sina-radius-2xl:     1.5rem;     /* 24px */
  --sina-radius-pill:    9999px;

  /* ---- سایه (بنفش‌رنگ، مثل قالب) ---- */
  --sina-shadow-sm:      0 2px 6px -3px rgba(124, 58, 237, 0.18);
  --sina-shadow:         0 10px 30px -12px rgba(124, 58, 237, 0.25);
  --sina-shadow-md:      0 14px 34px -14px rgba(124, 58, 237, 0.30);
  --sina-shadow-lg:      0 22px 45px -15px rgba(124, 58, 237, 0.35);
  --sina-shadow-xl:      0 30px 60px -18px rgba(124, 58, 237, 0.40);
  --sina-shadow-primary: 0 8px 22px -8px rgba(124, 58, 237, 0.55);

  /* ---- ترنزیشن ---- */
  --sina-transition-fast: 150ms cubic-bezier(.4,0,.2,1);
  --sina-transition:      250ms cubic-bezier(.4,0,.2,1);
  --sina-transition-slow: 400ms cubic-bezier(.3,.9,.3,1);

  /* ---- لایه ---- */
  --sina-header-height:   64px;
  --sina-sidebar-width:   258px;
  --sina-sidebar-collapsed: 64px;
  --sina-content-max:     1480px;

  /* ---- z-index ---- */
  --sina-z-sticky:       100;
  --sina-z-header:       1020;
  --sina-z-sidebar:      1040;
  --sina-z-overlay:      1035;
  --sina-z-modal:        1050;
  --sina-z-toast:        1060;

  /* ------------------------------------------------------------------
   * نام‌های کوتاه (alias) — برای سازگاری با تمپلیت‌های قدیمی
   * چند صفحه از --ink / --paper / --primary استفاده می‌کنند که قبلاً
   * هیچ‌جا تعریف نشده بود و در تم تاریک می‌شکست. اینجا بسته می‌شود.
   * در کد جدید از --sina-* استفاده کنید، نه این‌ها.
   * ------------------------------------------------------------------ */
  --ink:        var(--sina-text);
  --ink-soft:   var(--sina-text-muted);
  --paper:      var(--sina-bg-soft);
  --surface:    var(--sina-bg-card);
  --border:     var(--sina-border);
  --primary:    var(--sina-primary);
  --primary-d:  var(--sina-primary-700);
  --danger:     var(--sina-danger);
  --success:    var(--sina-success);
  --warning:    var(--sina-warning);

  /* ---- پل به متغیرهای بوت‌استرپ ---- */
  --bs-body-font-family: var(--sina-font-base);
  --bs-body-bg:          var(--sina-bg);
  --bs-body-color:       var(--sina-text);
  --bs-primary:          var(--sina-primary);
  --bs-primary-rgb:      var(--sina-primary-rgb);
  --bs-secondary:        var(--sina-secondary);
  --bs-secondary-rgb:    var(--sina-secondary-rgb);
  --bs-success:          var(--sina-success);
  --bs-success-rgb:      var(--sina-success-rgb);
  --bs-warning:          var(--sina-warning);
  --bs-warning-rgb:      var(--sina-warning-rgb);
  --bs-danger:           var(--sina-danger);
  --bs-danger-rgb:       var(--sina-danger-rgb);
  --bs-info:             var(--sina-info);
  --bs-info-rgb:         var(--sina-info-rgb);
  --bs-border-color:     var(--sina-border);
  --bs-border-radius:    var(--sina-radius);
  --bs-border-radius-sm: var(--sina-radius-sm);
  --bs-border-radius-lg: var(--sina-radius-lg);
  --bs-link-color:       var(--sina-primary);
  --bs-link-hover-color: var(--sina-primary-700);
}

/* ---- حالت تاریک ---- */
[data-theme="dark"] {
  --sina-bg:             #131022;
  --sina-bg-card:        #1d1832;
  --sina-bg-elevated:    #251f3f;
  --sina-bg-soft:        #191430;
  --sina-bg-sidebar:     #241b47;
  --sina-text:           #efeaff;
  --sina-text-muted:     #9d95bd;
  --sina-text-soft:      #7a7296;
  --sina-border:         rgba(168, 85, 247, 0.18);
  --sina-border-strong:  rgba(168, 85, 247, 0.32);
  --sina-grid:           rgba(239, 234, 255, 0.08);

  --sina-gray-50:        #191430;
  --sina-gray-100:       #221c3c;
  --sina-gray-200:       #2e2650;
  --sina-gray-300:       #453a6e;
  --sina-gray-400:       #7a7296;
  --sina-gray-500:       #9d95bd;
  --sina-gray-600:       #b8b0d4;
  --sina-gray-700:       #d3cce9;
  --sina-gray-800:       #efeaff;
  --sina-gray-900:       #ffffff;

  --sina-primary-100:    rgba(124, 58, 237, 0.22);
  --sina-primary-200:    rgba(124, 58, 237, 0.35);
  --sina-secondary-100:  rgba(236, 72, 153, 0.20);
  --sina-success-100:    rgba(20, 184, 166, 0.20);
  --sina-warning-100:    rgba(249, 115, 22, 0.20);
  --sina-danger-100:     rgba(239, 68, 68, 0.20);
  --sina-info-100:       rgba(59, 130, 246, 0.20);

  --sina-sidebar-grad:   linear-gradient(180deg, #241b47 0%, #31175a 55%, #511049 100%);

  --sina-shadow-sm:      0 2px 6px -3px rgba(0, 0, 0, 0.5);
  --sina-shadow:         0 10px 30px -12px rgba(0, 0, 0, 0.6);
  --sina-shadow-md:      0 14px 34px -14px rgba(0, 0, 0, 0.65);
  --sina-shadow-lg:      0 22px 45px -15px rgba(0, 0, 0, 0.7);
  --sina-shadow-xl:      0 30px 60px -18px rgba(0, 0, 0, 0.75);

  --bs-body-bg:          var(--sina-bg);
  --bs-body-color:       var(--sina-text);
  --bs-border-color:     var(--sina-border);
  --bs-emphasis-color:   #ffffff;
}

/* ============================================================================
 * ۲. ریست
 * ========================================================================= */
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sina-font-base);
  font-size: var(--sina-fs-base);
  line-height: var(--sina-line-height);
  color: var(--sina-text);
  background-color: var(--sina-bg);
  direction: rtl;
  text-align: right;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--sina-transition-slow), color var(--sina-transition-slow);
}

* { letter-spacing: 0 !important; }

.font-tabular, .table td, .table th {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--sina-primary), var(--sina-secondary));
  border-radius: var(--sina-radius-pill);
}
::-webkit-scrollbar-thumb:hover { filter: brightness(1.1); }

/* ============================================================================
 * ۳. تایپوگرافی
 * ========================================================================= */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--sina-font-base);
  font-weight: 800;
  color: var(--sina-gray-900);
  margin-top: 0;
  margin-bottom: var(--sina-space-3);
}
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 {
  color: #f6f3ff;
}

h1, .h1 { font-size: var(--sina-fs-3xl); }
h2, .h2 { font-size: var(--sina-fs-2xl); }
h3, .h3 { font-size: var(--sina-fs-xl); }
h4, .h4 { font-size: var(--sina-fs-lg); }
h5, .h5 { font-size: var(--sina-fs-md); }
h6, .h6 { font-size: var(--sina-fs-base); }

p { margin-top: 0; margin-bottom: var(--sina-space-4); }

a {
  color: var(--sina-primary);
  text-decoration: none;
  transition: color var(--sina-transition-fast);
}
a:hover { color: var(--sina-primary-700); text-decoration: underline; }
[data-theme="dark"] a:hover { color: #c4b5fd; }

code, kbd, samp, pre {
  font-family: var(--sina-font-mono);
  direction: ltr;
  unicode-bidi: embed;
}
code {
  background: var(--sina-gray-100);
  color: var(--sina-primary);
  padding: 0.125rem 0.375rem;
  border-radius: var(--sina-radius-sm);
  font-size: 0.9em;
}

small, .text-small { font-size: var(--sina-fs-sm); }
.text-xs { font-size: var(--sina-fs-xs); }
.text-muted { color: var(--sina-text-muted) !important; }
.text-body-secondary { color: var(--sina-text-muted) !important; }
.text-soft  { color: var(--sina-text-soft); }

/* ============================================================================
 * ۴. آیکون
 *   دو سیستم آیکون هم‌زمان پشتیبانی می‌شود:
 *     • اسپرایت SVG قدیمی  → <svg class="sina-icon"><use href="...#name">
 *     • Bootstrap Icons     → <i class="bi bi-house"></i>
 * ========================================================================= */
.sina-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  vertical-align: middle;
  stroke-width: 2;
}
.sina-icon-sm { width: 16px; height: 16px; }
.sina-icon-lg { width: 24px; height: 24px; }
.sina-icon-xl { width: 32px; height: 32px; }

.bi { vertical-align: -0.125em; line-height: 1; }

/* ============================================================================
 * ۵. لایه‌بندی
 *   .sina-layout
 *     ├── .sina-sidebar        (گرادیانی، سفید روی بنفش)
 *     ├── .sina-main-wrapper
 *     │     ├── .sina-header   (تاپ‌بار شیشه‌ای شناور)
 *     │     ├── .sina-content
 *     │     └── .sina-footer
 *     └── .sina-overlay        (موبایل)
 * ========================================================================= */
.sina-layout {
  display: flex;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* ----- blobهای پس‌زمینه ----- */
.sina-blobs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sina-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.32;
  animation: sina-float 14s ease-in-out infinite alternate;
}
.sina-blob-1 { width: 420px; height: 420px; background: #a855f7; top: -120px; inset-inline-start: -120px; }
.sina-blob-2 { width: 360px; height: 360px; background: #ec4899; bottom: -100px; inset-inline-end: 22%; animation-delay: -5s; }
.sina-blob-3 { width: 300px; height: 300px; background: #14b8a6; top: 35%; inset-inline-start: 30%; animation-delay: -9s; }
[data-theme="dark"] .sina-blob { opacity: 0.22; }
@keyframes sina-float {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(60px, -40px) scale(1.15); }
}

/* ----- سایدبار ----- */
.sina-sidebar {
  width: var(--sina-sidebar-width);
  flex-shrink: 0;
  background: var(--sina-sidebar-grad);
  color: #fff;
  border: 0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: var(--sina-z-sidebar);
  padding: var(--sina-space-4) var(--sina-space-3);
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.15);
  transition: transform var(--sina-transition-slow);
}
.sina-sidebar::-webkit-scrollbar { width: 5px; }
.sina-sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.28); }

.sina-sidebar-header {
  height: auto;
  display: flex;
  align-items: center;
  gap: var(--sina-space-2);
  padding: var(--sina-space-1) var(--sina-space-2) var(--sina-space-4);
  border-bottom: 0;
  flex-shrink: 0;
}
.sina-sidebar-header .logo {
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: var(--sina-radius-md);
  background: rgba(255, 255, 255, 0.18);
  padding: 6px;
  backdrop-filter: blur(6px);
  animation: sina-pulse-glow 3s ease-in-out infinite;
}
@keyframes sina-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.32); }
  50%      { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); }
}
.sina-sidebar-header .brand-text {
  font-weight: 800;
  font-size: var(--sina-fs-base);
  line-height: 1.5;
  color: #fff;
}

.sina-sidebar-nav {
  padding: var(--sina-space-1) 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sina-nav-section-title {
  font-size: var(--sina-fs-xs);
  color: rgba(255, 255, 255, 0.55);
  font-weight: 700;
  padding: var(--sina-space-4) var(--sina-space-3) var(--sina-space-1);
}

.sina-nav-item {
  display: flex;
  align-items: center;
  gap: var(--sina-space-3);
  padding: 0.65rem 0.9rem;
  border-radius: var(--sina-radius-md);
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  margin-bottom: 1px;
  transition: all var(--sina-transition-fast);
  font-weight: 500;
  position: relative;
  overflow: hidden;
}
.sina-nav-item:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  text-decoration: none;
  transform: translateX(-5px);
}
.sina-nav-item:hover .sina-icon,
.sina-nav-item:hover .bi { transform: rotate(-10deg) scale(1.15); }
.sina-nav-item.active {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-weight: 700;
}
.sina-nav-item.active::before {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  top: 18%;
  height: 64%;
  width: 4px;
  border-radius: 4px;
  background: var(--sina-accent-yellow);
}
.sina-nav-item .sina-icon,
.sina-nav-item .bi {
  width: 18px; height: 18px;
  font-size: 1.05rem;
  transition: transform var(--sina-transition-fast);
}
.sina-nav-item .label { flex: 1; }
.sina-nav-item .badge,
.sina-nav-item .sina-nav-count { margin-inline-start: auto; }
.sina-nav-item .phase-tag {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  padding: 1px 6px;
  border-radius: var(--sina-radius-pill);
  font-family: var(--sina-font-mono);
  direction: ltr;
}

.sina-sidebar-footer {
  padding: var(--sina-space-3);
  margin-top: var(--sina-space-2);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: var(--sina-fs-xs);
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}

/* بلوک CTA پایین سایدبار */
.sina-sidebar-cta {
  margin-top: auto;
  background: rgba(255, 255, 255, 0.14);
  border-radius: var(--sina-radius-lg);
  padding: var(--sina-space-4);
  text-align: center;
  backdrop-filter: blur(8px);
  color: #fff;
}
.sina-sidebar-cta .cta-emoji { font-size: 1.8rem; display: inline-block; animation: sina-bob 2.6s ease-in-out infinite; }
@keyframes sina-bob {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-7px) rotate(7deg); }
}

/* ----- بدنه ----- */
.sina-main-wrapper {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ----- تاپ‌بار شیشه‌ای ----- */
.sina-header {
  position: sticky;
  top: var(--sina-space-3);
  z-index: var(--sina-z-header);
  min-height: var(--sina-header-height);
  margin: var(--sina-space-3) var(--sina-space-5) 0;
  background: color-mix(in srgb, var(--sina-bg-card) 75%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--sina-border);
  border-radius: var(--sina-radius-lg);
  box-shadow: var(--sina-shadow);
  display: flex;
  align-items: center;
  padding: 0.6rem var(--sina-space-4);
  gap: var(--sina-space-3);
  flex-wrap: wrap;
}
.sina-mobile-toggle {
  display: none;
  background: var(--sina-bg-card);
  border: 1px solid var(--sina-border);
  color: var(--sina-text);
  width: 42px; height: 42px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--sina-radius);
}
.sina-mobile-toggle:hover { background: var(--sina-gray-100); color: var(--sina-primary); }
.sina-page-title {
  font-size: var(--sina-fs-lg);
  font-weight: 800;
  margin: 0;
}
.sina-header-actions {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: var(--sina-space-2);
}

/* جعبه‌ی جستجوی تاپ‌بار */
.sina-search-box {
  background: var(--sina-bg);
  border: 1px solid transparent;
  border-radius: var(--sina-radius-md);
  padding: 0.4rem 0.85rem;
  display: flex;
  align-items: center;
  gap: var(--sina-space-2);
  min-width: 220px;
  transition: all var(--sina-transition-fast);
}
.sina-search-box:focus-within { border-color: var(--sina-primary); box-shadow: 0 0 0 3px rgba(var(--sina-primary-rgb), 0.12); }
.sina-search-box input {
  border: 0; background: transparent; outline: 0;
  color: var(--sina-text); width: 100%; font-family: inherit; font-size: var(--sina-fs-sm);
}

/* دکمه‌های آیکونی تاپ‌بار */
.sina-icon-btn {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sina-border);
  background: var(--sina-bg-card);
  color: var(--sina-text);
  border-radius: var(--sina-radius);
  cursor: pointer;
  transition: all var(--sina-transition-fast);
  position: relative;
}
.sina-icon-btn:hover {
  transform: translateY(-3px) rotate(-6deg);
  box-shadow: var(--sina-shadow);
  color: var(--sina-primary);
}
.sina-icon-btn .badge-dot {
  position: absolute;
  top: 8px;
  inset-inline-start: 9px;
  width: 9px;
  height: 9px;
  background: var(--sina-secondary);
  border-radius: 50%;
  border: 0;
  animation: sina-blink 1.6s infinite;
}
@keyframes sina-blink { 50% { opacity: 0.2; } }

/* سوییچ تم (knob) */
.sina-theme-toggle {
  width: 62px; height: 33px;
  border-radius: var(--sina-radius-pill);
  border: 0;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  background: linear-gradient(90deg, #facc15, #f97316);
  transition: background var(--sina-transition-slow);
}
[data-theme="dark"] .sina-theme-toggle { background: linear-gradient(90deg, #312e81, #6d28d9); }
.sina-theme-toggle .knob {
  position: absolute;
  top: 4px;
  inset-inline-end: 4px;
  width: 25px; height: 25px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  transition: transform var(--sina-transition-slow) cubic-bezier(.68,-.4,.32,1.4);
}
[data-theme="dark"] .sina-theme-toggle .knob { transform: translateX(-29px); }
html[dir="ltr"] [data-theme="dark"] .sina-theme-toggle .knob { transform: translateX(29px); }

/* ----- محتوا ----- */
.sina-content {
  flex: 1;
  padding: var(--sina-space-5) var(--sina-space-5) var(--sina-space-12);
  max-width: var(--sina-content-max);
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* ----- فوتر ----- */
.sina-footer {
  flex-shrink: 0;
  text-align: center;
  padding: var(--sina-space-4) var(--sina-space-6);
  color: var(--sina-text-muted);
  font-size: var(--sina-fs-sm);
  border-top: 1px solid var(--sina-border);
  background: transparent;
}

/* ----- overlay موبایل ----- */
.sina-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 10, 35, 0.5);
  backdrop-filter: blur(2px);
  z-index: var(--sina-z-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--sina-transition);
}
body.sina-sidebar-open .sina-overlay { opacity: 1; visibility: visible; }

/* ============================================================================
 * ۶. کارت‌ها
 * ========================================================================= */
.sina-card,
.card-pj {
  background: var(--sina-bg-card);
  border: 1px solid var(--sina-border);
  border-radius: var(--sina-radius-xl);
  padding: var(--sina-space-5);
  box-shadow: var(--sina-shadow);
  transition: transform var(--sina-transition), box-shadow var(--sina-transition);
}
.sina-card:hover,
.card-pj:hover { transform: translateY(-5px); box-shadow: var(--sina-shadow-lg); }

/* کارت بدون واکنش hover — برای شبکه‌های شلوغ */
.sina-card-flat {
  background: var(--sina-bg-card);
  border: 1px solid var(--sina-border);
  border-radius: var(--sina-radius-xl);
  padding: var(--sina-space-5);
}
.sina-card-static:hover,
.card-pj.is-static:hover { transform: none; box-shadow: var(--sina-shadow); }

.sina-card-title {
  font-size: var(--sina-fs-lg);
  font-weight: 700;
  margin-bottom: var(--sina-space-3);
}
.sina-card-subtitle {
  color: var(--sina-text-muted);
  font-size: var(--sina-fs-sm);
  margin-bottom: var(--sina-space-4);
}

/* ============================================================================
 * ۷. دکمه‌ها
 * ========================================================================= */
.btn {
  font-weight: 600;
  border-radius: var(--sina-radius);
  transition: all var(--sina-transition-fast);
  padding: 0.5rem 1.1rem;
}
.btn-lg { padding: 0.65rem 1.5rem; }
.btn-sm { padding: 0.35rem 0.85rem; font-size: var(--sina-fs-sm); }
.btn.rounded-pill, .btn-pill { border-radius: var(--sina-radius-pill); }

.btn-primary {
  --bs-btn-bg: var(--sina-primary);
  --bs-btn-border-color: var(--sina-primary);
  --bs-btn-hover-bg: var(--sina-primary-600);
  --bs-btn-hover-border-color: var(--sina-primary-600);
  --bs-btn-active-bg: var(--sina-primary-700);
  --bs-btn-active-border-color: var(--sina-primary-700);
  box-shadow: 0 2px 6px -3px rgba(var(--sina-primary-rgb), 0.5);
}
.btn-primary:hover { box-shadow: var(--sina-shadow-primary); transform: translateY(-2px); }

.btn-outline-primary {
  --bs-btn-color: var(--sina-primary);
  --bs-btn-border-color: var(--sina-border-strong);
  --bs-btn-hover-bg: var(--sina-primary);
  --bs-btn-hover-border-color: var(--sina-primary);
}
.btn-outline-secondary {
  --bs-btn-color: var(--sina-text-muted);
  --bs-btn-border-color: var(--sina-border-strong);
  --bs-btn-hover-bg: var(--sina-gray-100);
  --bs-btn-hover-border-color: var(--sina-border-strong);
  --bs-btn-hover-color: var(--sina-text);
}

/* دکمه‌ی گرادیانی برند */
.btn-brand {
  background: var(--sina-grad-brand);
  color: #fff;
  border: 0;
}
.btn-brand:hover { color: #fff; box-shadow: var(--sina-shadow-primary); transform: translateY(-2px); }

/* ============================================================================
 * ۸. Badge، چیپ و نشانگر وضعیت
 * ========================================================================= */
.sina-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sina-space-1);
  padding: 0.2rem 0.7rem;
  border-radius: var(--sina-radius-pill);
  font-size: var(--sina-fs-xs);
  font-weight: 600;
  background: var(--sina-gray-100);
  color: var(--sina-gray-700);
  border: 1px solid var(--sina-border);
}
.sina-badge-primary   { background: var(--sina-primary-100);   color: var(--sina-primary-700);   border-color: transparent; }
.sina-badge-secondary { background: var(--sina-secondary-100); color: var(--sina-secondary-700); border-color: transparent; }
.sina-badge-success   { background: var(--sina-success-100);   color: var(--sina-success-700);   border-color: transparent; }
.sina-badge-warning   { background: var(--sina-warning-100);   color: var(--sina-warning-700);   border-color: transparent; }
.sina-badge-danger    { background: var(--sina-danger-100);    color: var(--sina-danger-700);    border-color: transparent; }
.sina-badge-info      { background: var(--sina-info-100);      color: var(--sina-info-700);      border-color: transparent; }
[data-theme="dark"] .sina-badge-primary   { color: #c4b5fd; }
[data-theme="dark"] .sina-badge-secondary { color: #f9a8d4; }
[data-theme="dark"] .sina-badge-success   { color: #5eead4; }
[data-theme="dark"] .sina-badge-warning   { color: #fdba74; }
[data-theme="dark"] .sina-badge-danger    { color: #fca5a5; }
[data-theme="dark"] .sina-badge-info      { color: #93c5fd; }

/* چیپ — نسخه‌ی سبک‌تر و گردتر badge */
.sina-chip, .chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sina-space-1);
  border-radius: var(--sina-radius-pill);
  font-size: var(--sina-fs-xs);
  padding: 0.3rem 0.8rem;
  font-weight: 600;
  background: var(--sina-primary-100);
  color: var(--sina-primary-700);
}
[data-theme="dark"] .sina-chip, [data-theme="dark"] .chip { color: #c4b5fd; }

.sina-status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sina-gray-400);
}
.sina-status-dot.ok   { background: var(--sina-success); box-shadow: 0 0 0 3px rgba(var(--sina-success-rgb), 0.18); }
.sina-status-dot.warn { background: var(--sina-warning); box-shadow: 0 0 0 3px rgba(var(--sina-warning-rgb), 0.18); }
.sina-status-dot.err  { background: var(--sina-danger);  box-shadow: 0 0 0 3px rgba(var(--sina-danger-rgb), 0.18); }

/* ============================================================================
 * ۹. فرم‌ها
 * ========================================================================= */
.form-control,
.form-select {
  font-family: var(--sina-font-base);
  border-radius: var(--sina-radius);
  border-color: var(--sina-border-strong);
  padding: 0.55rem 0.85rem;
  background: var(--sina-bg-card);
  color: var(--sina-text);
  transition: border-color var(--sina-transition-fast), box-shadow var(--sina-transition-fast);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--sina-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--sina-primary-rgb), 0.16);
  background: var(--sina-bg-card);
  color: var(--sina-text);
}
.form-control::placeholder { color: var(--sina-text-soft); }
.form-label {
  font-weight: 600;
  margin-bottom: var(--sina-space-1);
  color: var(--sina-gray-700);
}
.form-text { color: var(--sina-text-muted); }
.form-check-input:checked { background-color: var(--sina-primary); border-color: var(--sina-primary); }
.form-check-input:focus { box-shadow: 0 0 0 0.2rem rgba(var(--sina-primary-rgb), 0.16); }

/* ============================================================================
 * ۱۰. جدول
 * ========================================================================= */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--sina-text);
  --bs-table-border-color: var(--sina-border);
}
.table > :not(caption) > * > * { background-color: transparent; color: var(--sina-text); }
.table thead th {
  font-size: var(--sina-fs-sm);
  font-weight: 700;
  color: var(--sina-text-muted);
  border-bottom-width: 1px;
  white-space: nowrap;
}
.table tbody tr { transition: background var(--sina-transition-fast); }
.table tbody tr:hover > * {
  background: color-mix(in srgb, var(--sina-primary) 7%, transparent) !important;
}
.table-responsive { border-radius: var(--sina-radius-lg); }

/* ============================================================================
 * ۱۱. Dropdown / Modal / Offcanvas (هماهنگ با تم)
 * ========================================================================= */
.dropdown-menu {
  --bs-dropdown-bg: var(--sina-bg-card);
  --bs-dropdown-color: var(--sina-text);
  --bs-dropdown-border-color: var(--sina-border);
  --bs-dropdown-border-radius: var(--sina-radius-lg);
  --bs-dropdown-link-color: var(--sina-text);
  --bs-dropdown-link-hover-bg: var(--sina-gray-100);
  --bs-dropdown-link-hover-color: var(--sina-primary);
  --bs-dropdown-link-active-bg: var(--sina-primary);
  --bs-dropdown-divider-bg: var(--sina-border);
  box-shadow: var(--sina-shadow-md);
  padding: var(--sina-space-2);
}
.dropdown-item { border-radius: var(--sina-radius-sm); }
.modal-content {
  background: var(--sina-bg-card);
  color: var(--sina-text);
  border: 1px solid var(--sina-border);
  border-radius: var(--sina-radius-xl);
}
.modal-header, .modal-footer { border-color: var(--sina-border); }
.list-group {
  --bs-list-group-bg: transparent;
  --bs-list-group-color: var(--sina-text);
  --bs-list-group-border-color: var(--sina-border);
  --bs-list-group-action-hover-bg: var(--sina-gray-100);
  --bs-list-group-action-hover-color: var(--sina-primary);
}
.nav-tabs {
  --bs-nav-tabs-border-color: var(--sina-border);
  --bs-nav-tabs-link-active-bg: var(--sina-bg-card);
  --bs-nav-tabs-link-active-color: var(--sina-primary);
  --bs-nav-tabs-link-active-border-color: var(--sina-border) var(--sina-border) var(--sina-bg-card);
  --bs-nav-link-color: var(--sina-text-muted);
  --bs-nav-link-hover-color: var(--sina-primary);
}
.pagination {
  --bs-pagination-bg: var(--sina-bg-card);
  --bs-pagination-color: var(--sina-text);
  --bs-pagination-border-color: var(--sina-border);
  --bs-pagination-hover-bg: var(--sina-gray-100);
  --bs-pagination-hover-color: var(--sina-primary);
  --bs-pagination-active-bg: var(--sina-primary);
  --bs-pagination-active-border-color: var(--sina-primary);
  --bs-pagination-border-radius: var(--sina-radius);
}
.progress { background: var(--sina-grid); border-radius: var(--sina-radius-pill); }
.progress-bar { background: var(--sina-primary); }
.alert { border-radius: var(--sina-radius-lg); border-color: var(--sina-border); }
.accordion {
  --bs-accordion-bg: var(--sina-bg-card);
  --bs-accordion-color: var(--sina-text);
  --bs-accordion-border-color: var(--sina-border);
  --bs-accordion-btn-bg: var(--sina-bg-card);
  --bs-accordion-btn-color: var(--sina-text);
  --bs-accordion-active-bg: var(--sina-primary-100);
  --bs-accordion-active-color: var(--sina-primary-700);
  --bs-accordion-border-radius: var(--sina-radius-lg);
}

/* ============================================================================
 * ۱۲. Toast
 * ========================================================================= */
.sina-toast-container {
  position: fixed;
  top: calc(var(--sina-header-height) + var(--sina-space-5));
  left: var(--sina-space-4);
  z-index: var(--sina-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sina-space-2);
  max-width: 360px;
  pointer-events: none;
}
.sina-toast {
  background: var(--sina-bg-card);
  border: 1px solid var(--sina-border);
  border-inline-start: 4px solid var(--sina-gray-400);
  border-radius: var(--sina-radius-lg);
  padding: var(--sina-space-3) var(--sina-space-4);
  box-shadow: var(--sina-shadow-md);
  display: flex;
  align-items: flex-start;
  gap: var(--sina-space-3);
  pointer-events: auto;
  animation: sina-toast-in var(--sina-transition) cubic-bezier(.2,.7,.2,1);
}
.sina-toast.leaving { animation: sina-toast-out var(--sina-transition) cubic-bezier(.4,0,1,1) forwards; }
.sina-toast .sina-icon { flex-shrink: 0; }
.sina-toast .toast-body { flex: 1; font-size: var(--sina-fs-sm); }
.sina-toast .toast-close {
  background: transparent; border: none;
  color: var(--sina-text-soft); cursor: pointer;
  padding: 0; margin-inline-start: var(--sina-space-2);
}
.sina-toast .toast-close:hover { color: var(--sina-text); }
.sina-toast.success { border-inline-start-color: var(--sina-success); }
.sina-toast.success .sina-icon { color: var(--sina-success); }
.sina-toast.info    { border-inline-start-color: var(--sina-info); }
.sina-toast.info .sina-icon { color: var(--sina-info); }
.sina-toast.warning { border-inline-start-color: var(--sina-warning); }
.sina-toast.warning .sina-icon { color: var(--sina-warning); }
.sina-toast.danger  { border-inline-start-color: var(--sina-danger); }
.sina-toast.danger .sina-icon { color: var(--sina-danger); }

@keyframes sina-toast-in  { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sina-toast-out { from { opacity: 1; transform: translateX(0); }    to { opacity: 0; transform: translateX(40px); } }

/* ============================================================================
 * ۱۳. Utility
 * ========================================================================= */
.text-primary-sina { color: var(--sina-primary) !important; }
.text-success-sina { color: var(--sina-success) !important; }
.text-warning-sina { color: var(--sina-warning) !important; }
.text-danger-sina  { color: var(--sina-danger)  !important; }

.bg-primary-soft { background: var(--sina-primary-100) !important; }
.bg-success-soft { background: var(--sina-success-100) !important; }
.bg-warning-soft { background: var(--sina-warning-100) !important; }
.bg-danger-soft  { background: var(--sina-danger-100)  !important; }

.elevation-1 { box-shadow: var(--sina-shadow-sm); }
.elevation-2 { box-shadow: var(--sina-shadow); }
.elevation-3 { box-shadow: var(--sina-shadow-md); }
.elevation-4 { box-shadow: var(--sina-shadow-lg); }

.num-fa {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: embed;
  display: inline-block;
}

/* ============================================================================
 * ۱۴. انیمیشن‌ها
 * ========================================================================= */
@keyframes sina-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sina-fade-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes sina-pulse   { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.sina-animate-in { animation: sina-fade-in var(--sina-transition-slow) both; }
.sina-animate-up { animation: sina-fade-up var(--sina-transition-slow) both; animation-delay: var(--d, 0s); }
.sina-pulse      { animation: sina-pulse 1.5s ease-in-out infinite; }

/* ورود تدریجی هنگام اسکرول — با IntersectionObserver در app.js */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* ============================================================================
 * ۱۵. ریسپانسیو
 * ========================================================================= */
@media (max-width: 992px) {
  .sina-sidebar {
    position: fixed;
    inset-inline-start: 0;
    top: 0;
    transform: translateX(100%);
  }
  /* dir روی <html> است نه <body>؛ انتخابگرِ قبلی (body[dir="rtl"]) هیچ‌وقت
     نمی‌خورد و منو در موبایل بیرون از صفحه می‌ماند — فقط پرده‌ی تار دیده می‌شد. */
  [dir="ltr"] .sina-sidebar { transform: translateX(-100%); }
  body.sina-sidebar-open .sina-sidebar { transform: translateX(0); }
  .sina-mobile-toggle { display: inline-flex; }
  .sina-header { margin-inline: var(--sina-space-3); }
}

@media (max-width: 768px) {
  .sina-content { padding: var(--sina-space-4) var(--sina-space-3) var(--sina-space-10); }
  .sina-header  { margin-inline: var(--sina-space-2); padding: 0.5rem var(--sina-space-3); }
  h1, .h1 { font-size: var(--sina-fs-2xl); }
  h2, .h2 { font-size: var(--sina-fs-xl); }
  .sina-toast-container { left: var(--sina-space-2); right: var(--sina-space-2); max-width: none; }
  .sina-blob { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, .reveal { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================================
 * ۱۶. کامپوننت‌های مشترک داشبورد (قالب پروژه‌یار)
 *   این‌ها قبلاً به‌صورت <style> داخل هر تمپلیت تکرار می‌شدند.
 *   حالا یک‌جا اینجا هستند — در تمپلیت فقط کلاس بگذارید.
 * ========================================================================= */

/* ---- گرادیان‌های نام‌دار (روی هر عنصری قابل استفاده) ---- */
.g-purple { background: var(--sina-grad-purple); }
.g-pink   { background: var(--sina-grad-pink); }
.g-orange { background: var(--sina-grad-orange); }
.g-teal   { background: var(--sina-grad-teal); }
.g-blue   { background: var(--sina-grad-blue); }
.g-brand  { background: var(--sina-grad-brand); }

/* ---- عنوان بخش با نوار رنگی ---- */
.section-title {
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0;
}
.section-title .bar {
  width: 6px; height: 24px;
  border-radius: 6px;
  background: linear-gradient(var(--sina-primary), var(--sina-secondary));
  flex-shrink: 0;
}

/* ---- کارت آماری گرادیانی ---- */
.stat-card {
  position: relative;
  overflow: hidden;
  color: #fff;
  border: 0;
  border-radius: var(--sina-radius-xl);
  padding: var(--sina-space-4);
  box-shadow: var(--sina-shadow);
  transition: transform var(--sina-transition), box-shadow var(--sina-transition);
}
.stat-card:hover { transform: translateY(-5px); box-shadow: var(--sina-shadow-lg); }
.stat-card::after {
  content: ""; position: absolute;
  width: 150px; height: 150px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  top: -60px; inset-inline-start: -40px;
}
.stat-card::before {
  content: ""; position: absolute;
  width: 90px; height: 90px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  bottom: -40px; inset-inline-end: -25px;
}
.stat-card > * { position: relative; z-index: 1; }
.stat-card .stat-label { font-size: var(--sina-fs-sm); opacity: 0.78; }
.stat-card .display-num { font-size: 2.1rem; font-weight: 800; line-height: 1.3; }
.stat-card a { color: #fff; text-decoration: underline; opacity: .9; }
.stat-icon {
  width: 52px; height: 52px;
  border-radius: var(--sina-radius-md);
  background: rgba(255, 255, 255, 0.22);
  display: grid; place-items: center;
  font-size: 1.5rem;
  backdrop-filter: blur(4px);
  flex-shrink: 0;
}
.trend {
  font-size: var(--sina-fs-xs);
  background: rgba(255, 255, 255, 0.22);
  border-radius: var(--sina-radius-pill);
  padding: 0.15rem 0.65rem;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

/* ---- hero صفحه (نام pj- تا با .sina-hero لندینگ تداخل نکند) ---- */
.pj-hero {
  background: linear-gradient(120deg, #4c1d95, #7c3aed 55%, #ec4899);
  color: #fff;
  border-radius: var(--sina-radius-2xl);
  padding: var(--sina-space-6) var(--sina-space-8);
  position: relative;
  overflow: hidden;
  box-shadow: var(--sina-shadow-md);
}
.pj-hero::after {
  content: ""; position: absolute;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.16), transparent);
  top: -110px; inset-inline-start: -100px;
}
.pj-hero > * { position: relative; z-index: 1; }
.pj-hero h1, .pj-hero h2, .pj-hero h3 { color: #fff; }
.pj-hero-greet { font-size: var(--sina-fs-2xl); font-weight: 900; }
.pj-hero-sub   { opacity: 0.85; margin-top: 4px; }
.pj-hero .sina-chip, .pj-hero .chip {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.pj-hero-stats { display: flex; gap: var(--sina-space-3); flex-wrap: wrap; }
.pj-hero-stat {
  background: rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(8px);
  border-radius: var(--sina-radius-md);
  padding: 0.75rem 1.1rem;
  text-align: center;
  min-width: 92px;
}
.pj-hero-stat .n { font-size: var(--sina-fs-2xl); font-weight: 900; }
.pj-hero-stat .l { font-size: var(--sina-fs-xs); opacity: 0.85; }

/* ---- آواتار ---- */
.avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: var(--sina-fs-sm);
  border: 2px solid var(--sina-bg-card);
  background: var(--sina-grad-purple);
  flex-shrink: 0;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-stack { display: flex; }
.avatar-stack .avatar { margin-inline-start: -10px; transition: transform var(--sina-transition-fast); }
.avatar-stack .avatar:first-child { margin-inline-start: 0; }
.avatar-stack .avatar:hover { transform: translateY(-5px) scale(1.1); z-index: 2; }

/* ---- نوار پیشرفت باریک ---- */
.progress-slim { height: 8px; border-radius: var(--sina-radius-pill); background: var(--sina-grid); overflow: hidden; }
.progress-slim .progress-bar { border-radius: var(--sina-radius-pill); transition: width 1.4s cubic-bezier(.3,.9,.3,1); }

/* ---- حلقه‌ی پیشرفت ---- */
.ring { transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.ring .bg { stroke: var(--sina-grid); }
.ring .fg { stroke-dasharray: 339; stroke-dashoffset: 339; transition: stroke-dashoffset 1.6s cubic-bezier(.3,.9,.3,1); }

/* ---- تایم‌لاین ---- */
.timeline { position: relative; padding-inline-end: 1.4rem; }
.timeline::before {
  content: ""; position: absolute;
  inset-inline-end: 7px; top: 6px; bottom: 6px;
  width: 2px;
  background: linear-gradient(var(--sina-primary), var(--sina-secondary));
}
.t-item { position: relative; padding-bottom: var(--sina-space-4); }
.t-item .t-dot {
  position: absolute;
  inset-inline-end: -1.4rem;
  top: 4px;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 3px solid var(--sina-bg-card);
  background: var(--sina-primary);
}
.t-item:hover .t-dot { animation: sina-pop .4s ease; }
@keyframes sina-pop { 50% { transform: scale(1.45); } }

/* ---- کانبان ---- */
.kanban-col {
  background: color-mix(in srgb, var(--sina-bg-card) 60%, transparent);
  border: 1px dashed var(--sina-border-strong);
  border-radius: var(--sina-radius-lg);
  padding: var(--sina-space-3);
  min-height: 240px;
  transition: background var(--sina-transition-fast), border-color var(--sina-transition-fast);
}
.kanban-col.dragover {
  background: color-mix(in srgb, var(--sina-primary) 12%, var(--sina-bg-card));
  border-color: var(--sina-primary);
}
.kanban-card {
  background: var(--sina-bg-card);
  border: 1px solid var(--sina-border);
  border-radius: var(--sina-radius-md);
  padding: 0.8rem 0.9rem;
  margin-bottom: 0.7rem;
  cursor: grab;
  box-shadow: var(--sina-shadow-sm);
  transition: transform var(--sina-transition-fast), box-shadow var(--sina-transition-fast);
}
.kanban-card:hover { transform: rotate(-1deg) scale(1.02); box-shadow: var(--sina-shadow); }
.kanban-card.dragging { opacity: 0.45; transform: rotate(3deg) scale(.97); }
.k-tag { font-size: var(--sina-fs-xs); border-radius: var(--sina-radius-pill); padding: 0.15rem 0.6rem; font-weight: 700; }

/* ---- ردیف اقدام سریع ---- */
.qa-row {
  display: flex; align-items: center; gap: var(--sina-space-3);
  padding: 0.7rem 0.9rem;
  background: var(--sina-bg-soft);
  border: 1.5px solid transparent;
  border-radius: var(--sina-radius-md);
  text-decoration: none;
  color: inherit;
  margin-bottom: var(--sina-space-2);
  transition: all var(--sina-transition-fast);
}
.qa-row:hover { transform: translateX(-3px); border-color: var(--sina-border-strong); text-decoration: none; color: inherit; }
.qa-row.qa-hot { background: var(--sina-warning-100); border-color: rgba(var(--sina-warning-rgb), .3); }
.qa-icon { font-size: 1.4rem; }
.qa-body { flex: 1; min-width: 0; }
.qa-body b { display: block; font-size: var(--sina-fs-sm); }
.qa-body small { color: var(--sina-text-muted); font-size: var(--sina-fs-xs); }
.qa-badge {
  background: var(--sina-primary); color: #fff;
  font-weight: 800; padding: 0.15rem 0.75rem;
  border-radius: var(--sina-radius-pill); font-size: var(--sina-fs-sm);
}
.qa-row.qa-hot .qa-badge { background: var(--sina-warning); }

/* ---- ردیف لیست اخیر ---- */
.rec-list { display: flex; flex-direction: column; gap: var(--sina-space-2); }
.rec-row {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sina-space-3);
  padding: 0.6rem 0.8rem;
  background: var(--sina-bg-soft);
  border-radius: var(--sina-radius);
  text-decoration: none; color: inherit;
  transition: all var(--sina-transition-fast);
}
.rec-row:hover { transform: translateX(-3px); text-decoration: none; color: inherit; background: var(--sina-gray-100); }
.rec-main b { display: block; font-size: var(--sina-fs-sm); }
.rec-main small { color: var(--sina-text-muted); font-size: var(--sina-fs-xs); }
.rec-amt { font-weight: 800; color: var(--sina-primary); white-space: nowrap; }
.rec-amt small { font-size: var(--sina-fs-xs); font-weight: 400; }

/* ---- تایل دسترسی سریع ---- */
.quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: var(--sina-space-3); }
.quick-tile {
  display: flex; flex-direction: column; align-items: center; gap: var(--sina-space-2);
  padding: var(--sina-space-4) var(--sina-space-2);
  background: var(--sina-bg-soft);
  border: 1.5px solid transparent;
  border-radius: var(--sina-radius-lg);
  text-decoration: none; color: inherit;
  transition: all var(--sina-transition);
  text-align: center;
}
.quick-tile:hover {
  transform: translateY(-4px);
  border-color: var(--sina-border-strong);
  background: var(--sina-bg-card);
  box-shadow: var(--sina-shadow);
  text-decoration: none; color: inherit;
}
.quick-tile .ico { font-size: 1.7rem; line-height: 1; }
.quick-tile b { font-size: var(--sina-fs-xs); font-weight: 700; }

/* ---- خط لوله (pipeline) ---- */
.pipe { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sina-space-2); }
.pipe-stage {
  padding: var(--sina-space-4) var(--sina-space-3);
  border-radius: var(--sina-radius-lg);
  text-decoration: none; color: inherit;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: all var(--sina-transition);
  border: 2px solid transparent;
}
.pipe-stage:hover { transform: translateY(-4px); box-shadow: var(--sina-shadow); text-decoration: none; color: inherit; }
.pipe-new { background: var(--sina-info-100); }
.pipe-rev { background: var(--sina-warning-100); }
.pipe-int { background: var(--sina-primary-100); }
.pipe-jdg { background: var(--sina-secondary-100); }
.pipe-acc { background: var(--sina-success-100); }
.pipe-rej { background: var(--sina-danger-100); }
.ps-ico { font-size: 1.4rem; }
.ps-n   { font-size: var(--sina-fs-2xl); font-weight: 900; color: var(--sina-text); }
.ps-l   { font-size: var(--sina-fs-xs); color: var(--sina-text-muted); }
@media (max-width: 768px) { .pipe { grid-template-columns: repeat(3, 1fr); } }

/* ---- نوار توزیع ---- */
.dist-bar { display: flex; height: 46px; border-radius: var(--sina-radius-md); overflow: hidden; box-shadow: var(--sina-shadow-sm); }
.db-seg { display: grid; place-items: center; color: #fff; font-weight: 800; font-size: var(--sina-fs-sm); transition: filter var(--sina-transition-fast); }
.db-seg:hover { filter: brightness(1.1); }
.dist-legend { display: flex; gap: var(--sina-space-3); margin-top: var(--sina-space-3); flex-wrap: wrap; font-size: var(--sina-fs-xs); color: var(--sina-text-muted); }
.dist-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-inline-end: 6px; vertical-align: middle; }

/* ---- حالت خالی ---- */
.sina-empty {
  text-align: center;
  padding: var(--sina-space-8) var(--sina-space-4);
  color: var(--sina-text-muted);
  font-size: var(--sina-fs-sm);
}
.sina-empty .ico { font-size: 2.6rem; display: block; margin-bottom: var(--sina-space-2); }

/* ============================================================================
 * ۱۷. چاپ
 * ========================================================================= */
@media print {
  .sina-sidebar, .sina-header, .sina-footer, .sina-blobs, .no-print { display: none !important; }
  .sina-content { max-width: none; padding: 0; }
  body { background: #fff; color: #000; }
  .sina-card, .sina-card-flat, .card-pj { box-shadow: none; border: 1px solid #ccc; }
}

/* ============================================================================
 * ۱۸. بنر آفلاین PWA
 * ========================================================================= */
.sina-net-banner {
  display: none;
  position: sticky;
  top: 0;
  z-index: calc(var(--sina-z-header) + 5);
  background: var(--sina-warning-100);
  color: var(--sina-warning-700);
  border-bottom: 1px solid rgba(var(--sina-warning-rgb), 0.25);
  padding: 0.5rem 1rem;
  text-align: center;
  font-size: var(--sina-fs-sm);
  font-weight: 600;
  animation: sina-fade-in var(--sina-transition) both;
}
body.sina-offline .sina-net-banner { display: block; }
body.sina-offline .sina-header { opacity: 0.85; }

@media all and (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top); }
  .sina-header { margin-top: calc(env(safe-area-inset-top) + var(--sina-space-3)); }
}

/* ============================================================================
 * ۱۹. منوی سایدبار — گروه‌های جمع‌شونده و فیلتر سریع
 *   (قبلاً به‌صورت <style> داخل partials/sidebar.html بود)
 * ========================================================================= */
[x-cloak] { display: none !important; }

/* ---- جعبه‌ی فیلتر منو ---- */
.sina-nav-filter {
  position: relative;
  margin: 0 0 var(--sina-space-3);
}
.sina-nav-filter input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-radius: var(--sina-radius-md);
  padding: 0.5rem 2.2rem 0.5rem 0.75rem;
  font-family: inherit;
  font-size: var(--sina-fs-sm);
  outline: 0;
  transition: all var(--sina-transition-fast);
}
.sina-nav-filter input::placeholder { color: rgba(255, 255, 255, 0.6); }
.sina-nav-filter input:focus {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.45);
}
.sina-nav-filter .ico {
  position: absolute;
  inset-inline-end: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  pointer-events: none;
}
.sina-nav-filter .clear {
  position: absolute;
  inset-inline-start: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none; border: 0; padding: 2px 5px;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer; line-height: 1;
  border-radius: var(--sina-radius-sm);
}
.sina-nav-filter .clear:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }

/* هنگام فیلتر، آیتم/گروه بی‌ربط مخفی می‌شود */
.sina-nav-hidden { display: none !important; }
.sina-nav-empty {
  color: rgba(255, 255, 255, 0.65);
  font-size: var(--sina-fs-sm);
  text-align: center;
  padding: var(--sina-space-5) var(--sina-space-3);
}

/* ---- گروه جمع‌شونده ---- */
.sina-nav-group { margin-bottom: 2px; }

.sina-nav-group-toggle {
  display: flex;
  align-items: center;
  gap: var(--sina-space-3);
  width: 100%;
  padding: 0.65rem 0.9rem;
  border: 0;
  background: transparent;
  border-radius: var(--sina-radius-md);
  color: rgba(255, 255, 255, 0.82);
  font-family: inherit;
  font-weight: 600;
  font-size: inherit;
  cursor: pointer;
  text-align: start;
  transition: all var(--sina-transition-fast);
}
.sina-nav-group-toggle:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.sina-nav-group-toggle.has-active { color: #fff; }
.sina-nav-group-toggle.has-active .label::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sina-accent-yellow);
  margin-inline-start: 6px;
  vertical-align: middle;
}
.sina-nav-group-toggle .sina-icon,
.sina-nav-group-toggle .bi { width: 18px; height: 18px; flex: 0 0 auto; font-size: 1.05rem; }
.sina-nav-group-toggle .label { flex: 1; }

/* فلش جمع/باز — با CSS، بدون وابستگی به اسپرایت */
.sina-nav-chevron {
  width: 8px; height: 8px; flex: 0 0 auto;
  border-inline-end: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--sina-transition-fast);
  opacity: 0.65;
}
.sina-nav-chevron.is-open { transform: rotate(-135deg); }

/* ---- زیرمنو ---- */
.sina-nav-sub {
  margin: 2px 0 6px;
  padding-inline-start: var(--sina-space-2);
  border-inline-start: 1.5px solid rgba(255, 255, 255, 0.22);
  margin-inline-start: 18px;
}
.sina-nav-item.is-sub { font-weight: 500; font-size: var(--sina-fs-sm); padding: 0.5rem 0.75rem; }
.sina-nav-item.is-sub .sina-icon,
.sina-nav-item.is-sub .bi { width: 16px; height: 16px; font-size: 0.95rem; opacity: 0.9; }

/* ---- شمارنده‌ی کنار آیتم ---- */
.sina-nav-count {
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  min-width: 20px;
  padding: 1px 7px;
  border-radius: var(--sina-radius-pill);
  text-align: center;
}
.sina-nav-count.is-hot { background: var(--sina-accent-yellow); color: #4a3000; }

/* ---- لینک سوپرادمین و ابزارها ---- */
.sina-nav-item.is-super {
  margin-top: var(--sina-space-2);
  border-top: 1px dashed rgba(255, 255, 255, 0.22);
  padding-top: var(--sina-space-3);
  border-radius: 0 0 var(--sina-radius-md) var(--sina-radius-md);
}
.sina-nav-tool { font-size: var(--sina-fs-sm); opacity: 0.9; }

/* ---- انیمیشن باز شدن زیرمنو ---- */
.sina-collapse-enter { transition: opacity .16s ease, transform .16s ease; }
.sina-collapse-start { opacity: 0; transform: translateY(-4px); }
.sina-collapse-end   { opacity: 1; transform: translateY(0); }

/* ============================================================================
 * ۲۰. دراپ‌داون اعلان‌ها (تاپ‌بار)
 *   (قبلاً به‌صورت <style> داخل partials/header.html بود)
 * ========================================================================= */
.sina-notif-badge {
  position: absolute;
  top: -3px;
  inset-inline-start: -3px;
  background: var(--sina-danger);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  min-width: 17px;
  height: 17px;
  line-height: 17px;
  text-align: center;
  border-radius: var(--sina-radius-pill);
  padding: 0 4px;
  box-shadow: 0 0 0 2px var(--sina-bg-card);
}
.sina-notif-menu { width: 340px; max-width: 92vw; padding: 0 !important; overflow: hidden; }
.sina-notif-list { max-height: 360px; overflow-y: auto; }
.sina-notif-item {
  display: block;
  padding: 10px 14px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--sina-border);
  transition: background var(--sina-transition-fast);
}
.sina-notif-item:hover { background: var(--sina-gray-100); text-decoration: none; color: inherit; }
.sina-notif-item.unread { background: var(--sina-primary-100); }
.sina-notif-item.unread:hover { background: var(--sina-primary-200); }
.sina-notif-title { font-weight: 700; font-size: var(--sina-fs-sm); margin-bottom: 2px; }
.sina-notif-body  { font-size: var(--sina-fs-xs); color: var(--sina-text-muted); line-height: 1.6; }
.sina-notif-time  { font-size: 0.7rem; color: var(--sina-text-soft); margin-top: 3px; }

/* کارت کاربر در منوی تاپ‌بار */
.sina-user-card { display: flex; align-items: center; gap: var(--sina-space-2); padding: var(--sina-space-2) var(--sina-space-3); }
.sina-user-card .avatar { width: 38px; height: 38px; }

/* ---- باز/بسته شدن گروه بدون وابستگی به Alpine ---- */
.sina-nav-sub { display: none; }
.sina-nav-group.is-open > .sina-nav-sub { display: block; animation: sina-sub-in .16s ease both; }
.sina-nav-group.is-open > .sina-nav-group-toggle .sina-nav-chevron { transform: rotate(-135deg); }
@keyframes sina-sub-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---- ابزارک‌های کمکی که بوت‌استرپ ندارد ---- */
.min-w-0 { min-width: 0 !important; }
.cursor-pointer { cursor: pointer; }


/* ============================================================================
 * ۲۱. کامپوننت‌های داشبورد — نمودار، متریک کوچک، پلاک استقرار
 * ========================================================================= */

/* ---- کارت نمودار ---- */
.chart-card { display: flex; flex-direction: column; }
.chart-head {
  display: flex; align-items: center; gap: var(--sina-space-2);
  flex-wrap: wrap; margin-bottom: var(--sina-space-3);
}
.chart-box { position: relative; width: 100%; }
.chart-box canvas { max-width: 100%; }
.chart-note { font-size: var(--sina-fs-xs); color: var(--sina-text-muted); margin-top: var(--sina-space-2); }

/* ---- متریک کوچک (زیر نمودار یا کنار عنوان) ---- */
.mini-metrics { display: flex; gap: var(--sina-space-4); flex-wrap: wrap; }
.mini-metric { min-width: 88px; }
.mini-metric .n { font-size: var(--sina-fs-xl); font-weight: 800; line-height: 1.3; }
.mini-metric .l { font-size: var(--sina-fs-xs); color: var(--sina-text-muted); }
.mini-metric .n.is-up   { color: var(--sina-success); }
.mini-metric .n.is-down { color: var(--sina-danger); }

/* ---- تب‌های فیلتر (صندوق درخواست‌ها) ---- */
.pill-tabs { display: flex; gap: var(--sina-space-2); flex-wrap: wrap; }
.pill-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0.4rem 0.95rem;
  border-radius: var(--sina-radius-pill);
  background: var(--sina-bg-soft);
  border: 1.5px solid var(--sina-border);
  color: var(--sina-text-muted);
  font-size: var(--sina-fs-sm); font-weight: 600;
  text-decoration: none;
  transition: all var(--sina-transition-fast);
}
.pill-tab:hover { border-color: var(--sina-border-strong); color: var(--sina-primary); text-decoration: none; }
.pill-tab.active { background: var(--sina-primary); border-color: var(--sina-primary); color: #fff; }
.pill-tab .cnt {
  background: rgba(0,0,0,.08); border-radius: var(--sina-radius-pill);
  padding: 0 7px; font-size: 0.72rem; font-weight: 800;
}
.pill-tab.active .cnt { background: rgba(255,255,255,.28); }

/* ---- ردیف درخواست در صندوق یکپارچه ---- */
.req-row {
  display: flex; align-items: center; gap: var(--sina-space-3);
  padding: 0.85rem 1rem;
  border: 1px solid var(--sina-border);
  border-inline-start: 4px solid var(--sina-border-strong);
  border-radius: var(--sina-radius-md);
  background: var(--sina-bg-card);
  text-decoration: none; color: inherit;
  margin-bottom: var(--sina-space-2);
  transition: all var(--sina-transition-fast);
}
.req-row:hover { transform: translateX(-4px); box-shadow: var(--sina-shadow); text-decoration: none; color: inherit; }
.req-row.kind-org      { border-inline-start-color: var(--sina-info); }
.req-row.kind-flow     { border-inline-start-color: var(--sina-primary); }
.req-row.kind-support  { border-inline-start-color: var(--sina-success); }
.req-row.is-overdue    { background: var(--sina-danger-100); }
.req-ico {
  width: 42px; height: 42px; flex: 0 0 auto;
  border-radius: var(--sina-radius); display: grid; place-items: center;
  font-size: 1.15rem; background: var(--sina-gray-100); color: var(--sina-primary);
}
.req-row.kind-org     .req-ico { background: var(--sina-info-100);    color: var(--sina-info-700); }
.req-row.kind-flow    .req-ico { background: var(--sina-primary-100); color: var(--sina-primary-700); }
.req-row.kind-support .req-ico { background: var(--sina-success-100); color: var(--sina-success-700); }
.req-main { flex: 1; min-width: 0; }
.req-main .t { font-weight: 700; font-size: var(--sina-fs-sm); }
.req-main .s { font-size: var(--sina-fs-xs); color: var(--sina-text-muted); }
.req-side { text-align: center; white-space: nowrap; }

/* ---- پلاک واحد استقرار ---- */
.plate {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--sina-font-mono); direction: ltr;
  background: var(--sina-gray-100);
  border: 1px dashed var(--sina-border-strong);
  border-radius: var(--sina-radius-sm);
  padding: 1px 8px; font-size: var(--sina-fs-xs); font-weight: 700;
  color: var(--sina-text);
}
.plate::before { content: "🔖"; font-family: var(--sina-font-base); }
.plate.is-free { background: var(--sina-success-100); color: var(--sina-success-700); border-color: transparent; }
.plate.is-busy { background: var(--sina-primary-100); color: var(--sina-primary-700); border-color: transparent; }

/* =========================================================================
   ۲۲) پوسته‌ی سوپرادمین — سایدبار اختصاصی و نوار ورود جانشین
   -------------------------------------------------------------------------
   پنل سوپرادمین عمداً رنگ متفاوتی دارد: سایدبار پنل مدیریت پارک بنفش/صورتی
   است، این یکی سرمه‌ای تیره. یک نگاه کافی است بفهمید کجا ایستاده‌اید.
   ========================================================================= */

:root{
  --sa-bg-1:#0f172a;      /* سرمه‌ای عمیق */
  --sa-bg-2:#1e293b;
  --sa-accent:#38bdf8;    /* آبی روشن — کنتراست بالا روی زمینه‌ی تیره */
  --sa-accent-soft:rgba(56,189,248,.14);
  --sa-text:#e2e8f0;
  --sa-text-dim:#94a3b8;
  --sa-line:rgba(148,163,184,.18);
}

/* ---- سایدبار ---- */
.sa-sidebar{
  background:linear-gradient(180deg,var(--sa-bg-1) 0%,var(--sa-bg-2) 100%);
  color:var(--sa-text);
  border-inline-start:3px solid var(--sa-accent);
}

.sa-sidebar .sina-sidebar-header.sa-head{
  gap:10px;
  border-bottom:1px solid var(--sa-line);
}
.sa-sidebar .sa-logo{
  width:38px;height:38px;flex:0 0 auto;border-radius:11px;
  display:grid;place-items:center;
  background:var(--sa-accent-soft);color:var(--sa-accent);font-size:1.1rem;
}
.sa-sidebar .brand-text{
  display:flex;flex-direction:column;line-height:1.25;
  font-weight:800;font-size:.95rem;color:#fff;
}
.sa-sidebar .brand-text small{
  font-weight:600;font-size:.68rem;color:var(--sa-accent);opacity:.9;
}

/* دکمه‌ی برگشت به پنل عادی */
.sa-sidebar .sa-exit{
  display:flex;align-items:center;gap:8px;
  margin:12px 14px 4px;padding:9px 12px;border-radius:11px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--sa-line);
  color:var(--sa-text-dim);text-decoration:none;
  font-size:.82rem;font-weight:600;transition:.18s;
}
.sa-sidebar .sa-exit:hover{
  background:rgba(255,255,255,.11);color:#fff;border-color:var(--sa-accent);
}

/* فیلتر جستجو روی زمینه‌ی تیره */
.sa-sidebar .sina-nav-filter input{
  background:rgba(255,255,255,.07);
  border-color:var(--sa-line);
  color:var(--sa-text);
}
.sa-sidebar .sina-nav-filter input::placeholder{color:var(--sa-text-dim);}
.sa-sidebar .sina-nav-filter input:focus{
  border-color:var(--sa-accent);
  box-shadow:0 0 0 3px var(--sa-accent-soft);
}
.sa-sidebar .sina-nav-filter .ico,
.sa-sidebar .sina-nav-filter .clear{color:var(--sa-text-dim);}

/* گروه‌ها و آیتم‌ها */
.sa-sidebar .sina-nav-group-toggle{
  color:var(--sa-text-dim);font-weight:700;
}
.sa-sidebar .sina-nav-group-toggle:hover{color:#fff;background:rgba(255,255,255,.05);}
.sa-sidebar .sina-nav-group-toggle.has-active{color:var(--sa-accent);}

.sa-sidebar .sina-nav-item{
  color:var(--sa-text-dim);
}
.sa-sidebar .sina-nav-item:hover{
  color:#fff;background:rgba(255,255,255,.07);
}
.sa-sidebar .sina-nav-item.active{
  color:#fff;
  background:var(--sa-accent-soft);
  box-shadow:inset 3px 0 0 var(--sa-accent);
}
.sa-sidebar .sina-nav-item.active .sina-icon{color:var(--sa-accent);}
.sa-sidebar .sina-nav-item.is-off{opacity:.4;pointer-events:none;}

.sa-sidebar .sina-nav-empty{color:var(--sa-text-dim);}

.sa-sidebar .sina-sidebar-cta.sa-cta{
  border-top:1px solid var(--sa-line);
  background:rgba(0,0,0,.18);
  color:var(--sa-text);
}

/* ---- نوار ورود جانشین ---- */
.sa-impersonate-bar{
  position:sticky;top:0;z-index:1080;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:9px 18px;
  background:linear-gradient(90deg,#b45309,#f59e0b);
  color:#1c1917;
  font-size:.85rem;font-weight:600;
  box-shadow:0 2px 10px rgba(180,83,9,.35);
}
.sa-impersonate-bar i{font-size:1.05rem;}
.sa-impersonate-bar .txt{flex:1 1 260px;min-width:0;}
.sa-impersonate-bar b{font-weight:900;}
.sa-impersonate-bar .btn-exit{
  border:0;border-radius:9px;padding:6px 14px;
  background:#1c1917;color:#fff;
  font-family:inherit;font-size:.8rem;font-weight:700;cursor:pointer;
  transition:.18s;
}
.sa-impersonate-bar .btn-exit:hover{background:#000;transform:translateY(-1px);}

/* وقتی نوار هست، لایه‌ی اصلی نباید زیرش برود */
body.is-impersonating .sina-layout{min-height:calc(100vh - 44px);}

/* ---- جدول کاربران ---- */
.sa-table{width:100%;border-collapse:separate;border-spacing:0;}
.sa-table th{
  text-align:start;font-size:.76rem;font-weight:700;
  color:var(--sina-text-muted);
  padding:10px 12px;border-bottom:1.5px solid var(--sina-border);
  white-space:nowrap;
}
.sa-table td{
  padding:11px 12px;border-bottom:1px solid var(--sina-border);
  font-size:.86rem;vertical-align:middle;
}
.sa-table tbody tr:hover{background:var(--sina-bg-soft);}
.sa-table .who{display:flex;align-items:center;gap:10px;min-width:0;}
.sa-table .who .nm{font-weight:700;}
.sa-table .who .sub{font-size:.74rem;color:var(--sina-text-muted);}

.sa-tag{
  display:inline-block;padding:2px 9px;border-radius:20px;
  font-size:.72rem;font-weight:700;white-space:nowrap;
}
.sa-tag.ok{background:rgba(20,184,166,.14);color:#0f766e;}
.sa-tag.off{background:rgba(100,116,139,.16);color:#475569;}
.sa-tag.warn{background:rgba(249,115,22,.15);color:#c2410c;}
.sa-tag.super{background:rgba(124,58,237,.15);color:#6d28d9;}

[data-theme="dark"] .sa-tag.ok{color:#5eead4;}
[data-theme="dark"] .sa-tag.off{color:#cbd5e1;}
[data-theme="dark"] .sa-tag.warn{color:#fdba74;}
[data-theme="dark"] .sa-tag.super{color:#c4b5fd;}

/* ==== کارتابل من: شمارنده‌ی «منتظر من» کنار آیتم منو ==== */
.sina-nav-item .ib-badge {
  margin-inline-start: auto; min-width: 1.4rem; padding: 0 .35rem; border-radius: var(--sina-radius-pill);
  background: var(--sina-danger); color: #fff; font-size: .7rem; text-align: center; line-height: 1.3rem;
}

/* ============================================================================
 * تصویر هوشمند در کادر ثابت (static/js/smart-fit.js)
 * پیش‌فرض کامل و وسط؛ عکس هم‌نسبتِ کادر، پر می‌کند.
 * ========================================================================= */
.img-fit-auto { object-fit: contain; padding: 14px; box-sizing: border-box; }
.img-fit-auto.is-cover { object-fit: cover; padding: 0; }