/* ============================================================
   AppSidebar — بازطراحی کامل سایدبار مدیریت (۱۶ اوت ۲۰۲۶)
   جایگزین RadzenPanelMenu، پیشوند sb-.
   ============================================================ */

.app-sidebar {
  --sb-c-bg: #14161f;
  --sb-c-surface: #1c1f2b;
  --sb-c-border: rgba(255,255,255,0.08);
  --sb-c-text: #e5e7eb;
  --sb-c-text-2: #9ca3af;
  --sb-c-text-3: #6b7280;
  --sb-c-accent: #3b82f6;
  --sb-c-accent-bg: rgba(59,130,246,0.14);
  --sb-c-accent-text: #93c5fd;
  --sb-radius-sm: 6px;
  --sb-radius: 10px;
  --sb-transition: 0.15s ease;

  height: 100%;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--sb-c-bg);
  color: var(--sb-c-text);
  font-family: 'Vazirmatn', system-ui, sans-serif;
  font-size: 13px;
  overflow: hidden;
}

/* ── هدر (لوگو) ── */
.sb-header { display: flex; align-items: center; gap: 8px; padding: 16px 14px; border-bottom: 1px solid var(--sb-c-border); flex-shrink: 0; }
.sb-mobile-close-btn { display: none; }
.sb-logo-img { width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0; }
.sb-logo-text { font-size: 14px; font-weight: 700; color: #fff; flex: 1; }
.sb-collapse-btn {
  width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--sb-c-border);
  background: transparent; color: var(--sb-c-text-2); cursor: pointer; display: flex;
  align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; transition: background var(--sb-transition);
}
.sb-collapse-btn:hover { background: rgba(255,255,255,0.06); color: #fff; }

/* ── حالت جمع‌شده (فقط آیکون) ── */
.app-sidebar.collapsed { width: 60px; }
.app-sidebar.collapsed .sb-header { flex-direction: column; padding: 14px 8px; gap: 10px; }
.app-sidebar.collapsed .sb-scroll { padding: 4px 8px 14px; }
.app-sidebar.collapsed .sb-item, .app-sidebar.collapsed .sb-group-header { justify-content: center; padding: 10px 0; }
.app-sidebar.collapsed .sb-item.child { padding-inline-start: 0; }
.app-sidebar.collapsed .sb-group-items { max-height: none !important; overflow: visible; }
.app-sidebar.collapsed .sb-group-items-inner { display: none; }

/* ── جست‌وجو ── */
.sb-search-wrap { padding: 12px 14px; flex-shrink: 0; }
.sb-search-box { position: relative; }
.sb-search-box i { position: absolute; top: 50%; right: 11px; transform: translateY(-50%); color: var(--sb-c-text-3); font-size: 14px; pointer-events: none; }
.sb-search-input {
  width: 100%; height: 36px; border-radius: var(--sb-radius); border: 1px solid var(--sb-c-border);
  background: var(--sb-c-surface); color: var(--sb-c-text); padding: 0 34px 0 12px; font-size: 12.5px;
  font-family: inherit; outline: none; transition: border-color var(--sb-transition);
}
.sb-search-input::placeholder { color: var(--sb-c-text-3); }
.sb-search-input:focus { border-color: var(--sb-c-accent); }
.sb-search-clear { position: absolute; top: 50%; left: 9px; transform: translateY(-50%); background: none; border: none; color: var(--sb-c-text-3); cursor: pointer; font-size: 13px; padding: 2px; }
.sb-search-clear:hover { color: var(--sb-c-text); }

/* ── بدنه‌ی قابل‌اسکرول ── */
.sb-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 10px 14px; }
.sb-scroll::-webkit-scrollbar { width: 5px; }
.sb-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 10px; }

/* ── گروه (بخش قابل‌جمع‌شدن) ── */
.sb-group { margin-bottom: 3px; }
.sb-group-header {
  display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: none;
  color: var(--sb-c-text-2); padding: 9px 10px; border-radius: var(--sb-radius); cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 600; text-align: right; transition: background var(--sb-transition), color var(--sb-transition);
}
.sb-group-header:hover { background: rgba(255,255,255,0.05); color: var(--sb-c-text); }
.sb-group-header.has-active { color: var(--sb-c-accent-text); }
.sb-group-icon { font-size: 16px; width: 18px; text-align: center; flex-shrink: 0; }
.sb-group-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-group-chevron { font-size: 13px; color: var(--sb-c-text-3); transition: transform var(--sb-transition); flex-shrink: 0; }
.sb-group-chevron.open { transform: rotate(90deg); }

.sb-group-items { overflow: hidden; max-height: 0; transition: max-height 0.2s ease; }
.sb-group-items.open { max-height: 800px; }
.sb-group-items-inner { padding: 2px 0 6px 0; display: flex; flex-direction: column; gap: 1px; }

/* ── آیتم منو (تک، یا زیرمجموعه‌ی یه گروه) ── */
.sb-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--sb-radius-sm);
  color: var(--sb-c-text-2); text-decoration: none; font-size: 12.5px; cursor: pointer;
  transition: background var(--sb-transition), color var(--sb-transition);
}
.sb-item:hover { background: rgba(255,255,255,0.05); color: var(--sb-c-text); }
.sb-item.active { background: var(--sb-c-accent-bg); color: var(--sb-c-accent-text); font-weight: 700; }
.sb-item.active::before { content: ""; position: absolute; }
.sb-item.child { padding-inline-start: 40px; font-size: 12px; }
.sb-item.top-level { font-weight: 600; }
.sb-item-icon { font-size: 15px; width: 17px; text-align: center; flex-shrink: 0; }
.sb-item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sb-item.disabled { color: var(--sb-c-text-3); cursor: not-allowed; opacity: 0.6; }
.sb-item.disabled:hover { background: none; color: var(--sb-c-text-3); }
.sb-soon-badge { font-size: 9.5px; font-weight: 700; background: rgba(255,255,255,0.08); color: var(--sb-c-text-3); border-radius: 20px; padding: 1px 7px; flex-shrink: 0; }

.sb-empty-search { text-align: center; color: var(--sb-c-text-3); font-size: 12px; padding: 24px 10px; }

/* ── بخش پرکاربردها (Pin شده) ── */
.sb-pinned-section { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--sb-c-border); }
.sb-section-label { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; color: var(--sb-c-text-3); padding: 6px 10px; text-transform: uppercase; letter-spacing: 0.03em; }
.sb-section-label i { color: #fbbf24; font-size: 12px; }

/* ── دکمه‌ی Pin/Unpin ── */
.sb-item-row { display: flex; align-items: center; }
.sb-item-row .sb-item { flex: 1; }
.sb-pin-btn {
  width: 24px; height: 24px; flex-shrink: 0; border: none; background: none; color: var(--sb-c-text-3);
  cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px;
  border-radius: var(--sb-radius-sm); opacity: 0; transition: opacity var(--sb-transition), color var(--sb-transition);
}
.sb-item-row:hover .sb-pin-btn { opacity: 1; }
.sb-pin-btn:hover { color: #fbbf24; background: rgba(255,255,255,0.06); }
.sb-pin-btn.pinned { opacity: 1; color: #fbbf24; }

/* ── فوتر ── */
.sb-footer { flex-shrink: 0; padding: 10px 14px 14px; border-top: 1px solid var(--sb-c-border); text-align: center; }
.sb-footer-text { font-size: 10.5px; color: var(--sb-c-text-3); line-height: 1.6; }

/* ── دکمه‌ی باز/بستن سایدبار (موبایل) ── */
.sb-toggle-btn {
  position: fixed; top: 12px; inset-inline-end: 12px; z-index: 10000; width: 38px; height: 38px;
  border-radius: 50%; border: none; background: var(--sb-c-bg); color: #fff; display: flex;
  align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  font-size: 17px;
}

@media (min-width: 992px) {
  .sb-toggle-btn { display: none; }
}

/* ============================================================
   رفع باگ: آیکون سایدبار در موبایل کار نمی‌کرد (۲۰ اوت ۲۰۲۶)
   ------------------------------------------------------------
   علت واقعی: RadzenSidebar به‌صورت پیش‌فرض Responsive="true" داره، که یعنی خودش با یه
   JS matchMedia مجزا (مستقل از bool سایدبار در MainLayout.razor) وضعیت expanded/collapsed
   رو کنترل می‌کنه — این دقیقاً با toggle دستی ما (SidebarToggleClick) تداخل می‌کرد: بلافاصله
   بعد از باز شدن با کلیک کاربر، منطق Responsive داخلی Radzen دوباره می‌بستش (رفتار مستند‌شده و
   چندین‌بار گزارش‌شده در ایشوهای خودِ کتابخانه‌ی radzen-blazor). با غیرفعال‌کردن Responsive در
   MainLayout.razor (`Responsive="false"`)، کنترل کامل به bool خودمون (`sidebarExpanded`) داده
   شد؛ این بخش CSS مسئول رفتار بصری دو حالته (دسکتاپ = بخشی از چیدمان، موبایل = پنل شناور روی
   محتوا با پس‌زمینه‌ی تیره) است.
   ============================================================ */

/* دسکتاپ: سایدبار بخشی از چیدمان (نه شناور/fixed) باقی می‌مونه، ولی برخلاف نسخه‌ی قبلی این
   بخش CSS (که عرض رو صرف‌نظر از کلاس expanded/collapsed همیشه ثابت نگه می‌داشت — و همین باعث
   می‌شد کلیک روی آیکون سایدبار در دسکتاپ عملاً هیچ اثر بصری‌ای نداشته باشه)، الان عرض واقعاً
   بر اساس کلاس (که حالا قابل‌اتکاست، چون دیگه با منطق داخلی Responzive تداخل نداره) تغییر
   می‌کنه: expanded = عرض کامل، collapsed = صفر (کاملاً جمع‌شده، دقیقاً طبق انتظار). مقدار
   اولیه‌ی sidebarExpanded هم دیگه یه false ثابت نیست — با یه تشخیص JS در اولین رندر
   (MainLayout.razor) بر اساس عرض واقعی صفحه تعیین می‌شه، پس مشکل «نامرئی‌بودن در بار اول
   دسکتاپ» که این override قبلی برایش نوشته شده بود، از ریشه (نه با یه Workaround CSS) حل شد. */
@media (min-width: 992px) {
  .rz-sidebar {
    position: relative !important;
    transform: none !important;
    height: auto;
    overflow: hidden;
    z-index: 2;
    transition: width 0.22s ease, border-width 0.22s ease;
  }
  .rz-sidebar.rz-sidebar-expanded {
    width: var(--rz-sidebar-width, 250px) !important;
  }
  .rz-sidebar.rz-sidebar-collapsed {
    width: 0 !important;
    border-width: 0 !important;
    min-width: 0 !important;
  }
  .mobile-sidebar-backdrop { display: none !important; }
}

/* موبایل/تبلت: سایدبار به یه پنل شناور تمام‌ارتفاع تبدیل می‌شه که با کلاس expanded/collapsed
   (که حالا واقعاً منعکس‌کننده‌ی کلیک کاربره، نه یه منطق داخلی مستقل) از سمت راست وارد/خارج می‌شه. */
@media (max-width: 991px) {
  .rz-sidebar {
    position: fixed !important;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100vh !important;
    width: min(280px, 82vw) !important;
    z-index: 9500 !important;
    transition: transform 0.28s ease;
    box-shadow: -10px 0 32px rgba(0, 0, 0, 0.35);
  }
  .rz-sidebar.rz-sidebar-collapsed { transform: translateX(100%); }
  .rz-sidebar.rz-sidebar-expanded { transform: translateX(0); }

  .app-sidebar.collapsed { width: 100% !important; }
  .app-sidebar.collapsed .sb-item, .app-sidebar.collapsed .sb-group-header { justify-content: flex-start; }
  .app-sidebar.collapsed .sb-group-items-inner { display: flex !important; }
  .app-sidebar.collapsed .sb-item-label, .app-sidebar.collapsed .sb-group-label { display: inline !important; }
  /* روی موبایل، دکمه‌ی جمع‌کردن آیکون‌فقط (که فقط برای دسکتاپ معنا داره) رو مخفی کن */
  .app-sidebar .sb-collapse-btn { display: none; }

  /* دکمه‌ی بستن داخل خودِ سایدبار — راه دومِ مستقل برای بستن، علاوه بر پس‌زمینه‌ی تیره؛ فقط
     روی موبایل معنا داره (دسکتاپ سایدبار بخشی از چیدمانه، نیازی به دکمه‌ی بستن نداره). */
  .sb-mobile-close-btn {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%; border: none;
    background: rgba(255,255,255,0.08); color: #fff; font-size: 15px; cursor: pointer; flex-shrink: 0;
  }
  .sb-mobile-close-btn:hover { background: rgba(255,255,255,0.16); }

  .mobile-sidebar-backdrop {
    position: fixed; inset: 0; background: rgba(10, 12, 20, 0.55);
    z-index: 9400; opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
  }
  .mobile-sidebar-backdrop.show { opacity: 1; pointer-events: auto; }

  /* چون سایدبار در موبایل الان یه پنل شناور (position:fixed) هست، نباید باز/بسته‌شدنش باعث
     جابه‌جایی (margin) محتوای اصلی (rz-body) بشه؛ حالت پیش‌فرض rz-body-expanded که برای
     چیدمان دسکتاپ (sidebar داخل flow) طراحی شده رو خنثی می‌کنیم. */
  .rz-body,
  .rz-body.rz-body-expanded {
    margin: 0 !important;
    width: 100% !important;
  }
}