/* ========== پایه ========== */

#app-root {
  min-height: 100vh;
  display: flex; /* اختیاری: کمک به مرکزسازی صفحات auth */
  flex-direction: column;
}

body {
  font-family:
    "Vazirmatn",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-feature-settings: "ss01";
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

/* ========== اسکرول‌بار سفارشی ========== */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 20px;
}
.dark ::-webkit-scrollbar-thumb {
  background: #475569;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
.dark ::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* ========== صفحات و انیمیشن‌ها ========== */
.page-section {
  display: none;
  animation: fadeIn 0.35s ease-out;
}
.page-section.active {
  display: block;
}

/* ========== کارت و هاور ========== */
.card-hover {
  transition: all 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 35px -8px rgba(0, 0, 0, 0.12),
    0 4px 18px -4px rgba(0, 0, 0, 0.06);
}

/* ========== توست (اعلان) ========== */
.toast-enter {
  animation: slideInLeft 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.toast-exit {
  animation: fadeOut 0.3s ease-in forwards;
}

@keyframes fadeOut {
  to {
    opacity: 0;
    transform: translateX(-30px);
  }
}

/* ========== آیتم فعال نویگیشن ========== */
.nav-item-active {
  position: relative;
  color: #965035 !important;
  background-color: #fdf6f2 !important;
}
.dark .nav-item-active {
  color: #e8b094 !important;
  background-color: rgba(61, 31, 20, 0.3) !important;
}
.nav-item-active::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 60%;
  border-radius: 0 8px 8px 0;
  background: #c87a58;
}

/* ========== نویگیشن موبایل ========== */
@media (max-width: 768px) {
  .mobile-bottom-nav {
    display: flex;
  }
  .sidebar-desktop {
    display: none;
  }
}
@media (min-width: 769px) {
  .mobile-bottom-nav {
    display: none;
  }
  .sidebar-desktop {
    display: flex;
  }
}

/* ========== صفحات احراز هویت ========== */
.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1.5rem;
  background-color: #fdfbf8;
}
.dark .auth-page {
  background-color: #1c1e22;
}

/* ========== اسکرول‌بار داخل باکس‌ها ========== */
.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 10px;
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #475569;
}

/* رفع مشکل قرار گرفتن تقویم شمسی زیر مودال */
/* حل مشکل مخفی شدن تقویم زیر مودال‌ها */

/* ==========================================
   شخصی‌سازی ظاهر تقویم شمسی (لایت مود)
========================================== */
jdp-container,
.jdp-container {
  z-index: 999999 !important;
  font-family: inherit !important; /* ارث‌بری فونت زیبای پروژه شما */
  border-radius: 1rem !important; /* گوشه‌های گرد هماهنگ با مودال‌ها */
  box-shadow:
    0 10px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid #e5e7eb !important; /* border-gray-200 */
  overflow: hidden;

  /* رنگ‌های تم لایت (می‌توانید کدهای رنگ Accent خود را اینجا جایگزین کنید) */
  --color-primary: #3b82f6 !important; /* رنگ اصلی: آبی (accent-500) */
  --color-secondary: #eff6ff !important; /* پس‌زمینه روز انتخاب شده: آبی خیلی روشن */
  --color-bg-today: #f3f4f6 !important; /* پس‌زمینه روز جاری: gray-100 */
}

/* ==========================================
   استایل‌های مخصوص صفحه چاپ (Print / PDF)
========================================== */
#printArea {
  display: none; /* در حالت عادی روی سایت مخفی است */
}

@media print {
  /* مخفی کردن کل سایت */
  body * {
    visibility: hidden;
  }

  /* نمایش فقط ناحیه چاپ */
  #printArea,
  #printArea * {
    visibility: visible;
  }

  #printArea {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: 2rem !important;
    background-color: white !important;
    color: black !important;
  }

  /* جلوگیری از تیره افتادن کاغذ در دارک مود */
  html,
  body {
    background-color: white !important;
  }
}