@import url('https://fonts.googleapis.com/css2?family=Arial&display=swap');

body { font-family: 'Vazir', sans-serif; }

.date-cell { position: relative; height: 70px; vertical-align: top; border: 1px solid #ddd; }
.date-cell:hover{ background-color: #ddd;}
.gregorian-date { position: absolute; bottom: 5px; right: 5px; font-size: 12px; color: #666; font-family: Arial, sans-serif; }
.hijri-date { position: absolute; bottom: 5px; left: 5px; font-size: 14px; }

.calendar-header { display: flex; justify-content: space-between; align-items: center; text-align: center; }
.btn-outline-primary { font-size: 18px; }
.month-info { text-align: center; margin-top: 5px; font-size: 14px; }
.bold-text { font-weight: bold; }
.table th { background-color: #f0f0f0; }
.today { border-radius: 10px; padding: 10px; background-color: #cce5ff !important; }
.saturday { color: red !important; } /* فقط جمعه‌ها قرمز باشند */
.events-list { margin-top: 20px; }
.event-item { font-size: 14px; }

.persian-numbers {
    font-family: Vazir, sans-serif;
    font-feature-settings: "ss01"; /* فعال‌سازی اعداد فارسی در فونت وزیر */
  }

  .english-numbers {
    font-family: Arial, sans-serif; /* یا هر فونت انگلیسی دیگر */
  }


  /* استایل برای دسکتاپ */
  @media (min-width: 769px) {
    .calendar-container { 
      display: flex; 
      flex-direction: row; /* ✅ تقویم در سمت راست، مناسبت‌ها در سمت چپ */
      gap: 20px; 
    }
    .calendar-wrapper { width: 60%; } /* ✅ اندازه تقویم در دسکتاپ */
    .events-container { width: 40%; } /* ✅ اندازه مناسبت‌ها در دسکتاپ */
  }

  /* استایل برای موبایل */
  @media (max-width: 768px) {
    .calendar-container { 
      display: flex; 
      flex-direction: column; /* ✅ تقویم بالا، مناسبت‌ها پایین */
    }
    .calendar-wrapper { width: 100%; } /* ✅ تقویم تمام عرض باشد */
    .events-container { width: 100%; } /* ✅ مناسبت‌ها تمام عرض باشد */
    
    /* ✅ کوچک کردن فونت‌ها در موبایل */
    .calendar-header h4 { font-size: 16px; }
    .calendar-header .btn-outline-primary { font-size: 14px; }
    .month-info { font-size: 12px; }
    .date-cell { height: 80px; } /* ✅ کاهش ارتفاع خانه‌های تقویم */
    .gregorian-date, .hijri-date { font-size: 10px; } /* ✅ کوچک کردن فونت تاریخ */
    .event-item { font-size: 12px; } /* ✅ کوچک کردن فونت مناسبت‌ها */
    .table th { font-size: 12px; } /* ✅ کوچک کردن عنوان جدول */
  }

  
  .circles-container {
    position: absolute;
    top: 0;
    right: 0;  
    display: flex;
    flex-direction: column; /* دایره‌ها به صورت عمودی */
    gap: 2px; /* فاصله بین دایره‌ها */
  }
  
  .circle {
    width: 8px; /* اندازه دایره */
    height: 8px; /* اندازه دایره */
    border-radius: 50%; /* تبدیل به دایره */
    position: relative;
  }
  
  .high-priority {
    animation: pulse 1.5s infinite; /* انیمیشن موج */
    width:12px;
    height: 12px;
    margin-left: -9px; 
  }
  
  .med-priority {
    width: 10px;
    height: 10px;
    margin-top: 1px;
    margin-bottom: 1px;
    margin-left: -7px; 
  }

  .low-priority {
    width: 8px;
    height: 8px;
    margin-top: 2px;
    margin-bottom: 2px;
    margin-left: -7px; 
  }

  @keyframes pulse {
    0% {
      box-shadow: 0 0 0 0 var(--circle-color); /* شروع موج با رنگ دایره */
    }
    70% {
      box-shadow: 0 0 0 5px rgba(255, 255, 255, 0); /* گسترش موج با شفافیت */
    }
    100% {
      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); /* پایان موج */
    }
  }

  .reminder-options {
    display: flex;
    gap: 20px; /* فاصله بین آیتم‌ها */
  }
  
  .reminder-option {
    display: flex;
    align-items: center; /* وسط‌چین عمودی */
  }
  
  .reminder-option input[type="checkbox"] {
    margin-left: 5px; /* فاصله چک‌باکس از متن */
  }

  .category-circle {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-left: 5px;
  }


  
  
  .priority-cell.high {
    background-color: #ffb3ba; /* صورتی پاستلی */
  }
  
  .priority-cell.medium {
    background-color: #ffdfba; /* نارنجی پاستلی */
  }
  
  .priority-cell.low {
    background-color: #baffc9; /* سبز پاستلی */
  }
  



  .navbar {
    background-color: #eee;
}
.navbar-brand img {
    width: 100px;
    height: auto;
}






   /* استایل‌های سفارشی برای فوتر ثابت */
   html, body {
    height: 100%; /* ارتفاع کامل صفحه */
    margin: 0;
  }
  #main-content {
    flex: 1; /* محتوا را گسترش می‌دهد تا فوتر به پایین بچسبد */
  }
  .sticky-footer {
    position: sticky;
    bottom: 0;
    width: 100%;
  }















  /* استایل‌های پیش‌فرض (لایت مود) */
body {
  background-color: #ffffff;
  color: #000000;
}

/* استایل‌های دارک مود */
body.dark-mode {
  background-color: #121212;
  color: #ffffff;
}

.dark-mode .navbar {
  background-color: #1f1f1f;
  color: #ffffff;
}

.dark-mode .card {
  background-color: #1f1f1f;
  color: #ffffff;
}

.dark-mode .btn-outline-primary {
  border-color: #ffffff;
  color: #ffffff;
}

.dark-mode .btn-outline-primary:hover {
  background-color: #ffffff;
  color: #000000;
}

.dark-mode .table {
  color: #ffffff;
}

.dark-mode .table-bordered th,
.dark-mode .table-bordered td {
  border-color: #444444;
}

.dark-mode .footer {
  background-color: #1f1f1f;
  color: #ffffff;
}






/* استایل‌های پیش‌فرض مدال‌ها (لایت مود) */
.modal-content {
  background-color: #ffffff;
  color: #000000;
}

.modal-header,
.modal-footer {
  border-color: #dee2e6;
}

/* استایل‌های دارک مود برای مدال‌ها */
.dark-mode .modal-content {
  background-color: #1f1f1f;
  color: #ffffff;
}

.dark-mode .modal-header,
.dark-mode .modal-footer {
  border-color: #444444;
}

.dark-mode .modal-title {
  color: #ffffff;
}

.dark-mode .close {
  color: #ffffff;
}

.dark-mode .close:hover {
  color: #cccccc;
}



/* استایل‌های پیش‌فرض btn-close (لایت مود) */
.btn-close {
  filter: invert(0); /* رنگ پیش‌فرض */
}

/* استایل‌های دارک مود برای btn-close */
.dark-mode .btn-close {
  filter: invert(1); /* رنگ را برعکس کنید تا سفید شود */
}


/* استایل‌های پیش‌فرض (لایت مود) */
.navbar-light .navbar-text,
.navbar-light .navbar-nav .nav-link {
  color: rgba(0, 0, 0, 0.9); /* رنگ متن پیش‌فرض */
}

/* استایل‌های دارک مود */
.dark-mode .navbar-light .navbar-text,
.dark-mode .navbar-light .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.9); /* رنگ متن سفید در حالت دارک مود */
}







 



.event-row {
  display: flex;
  justify-content: center;
  position: relative;
}

.circle { 
  border-radius: 50%;
  border: 1px solid white;
  position: relative;
  /* margin-left: -7px;   */
}


.circle:nth-child(1) { z-index: 10; }  /* پر اولویت‌ترین */
.circle:nth-child(2) { z-index: 9; }
.circle:nth-child(3) { z-index: 8; }
/* بقیه‌ی دایره‌ها نمایش داده نمی‌شوند */
.circle:nth-child(n+4) { display: none; }  












/* تنظیمات کلی سایدبار */
.offcanvas.offcanvas-end {
  width: 70%;
  height: 100vh;
  background-color: #ffffff;
  color: #333;
}


/* اطمینان از نمایش صحیح محتوا */
.offcanvas-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0; /* برای جلوگیری از باگ در برخی گوشی‌ها */
  overflow-y: auto;
  position: relative;
}

/* بخش پروفایل */
.user-profile {
  text-align: center;
  padding: 20px;
}

.user-profile img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid #007bff; /* حاشیه آبی */
}
.user-profile h6 {
  margin-top: 10px;
  font-weight: bold;
}
.user-profile small {
  color: #666;
}

 
/* آیتم‌های منو */
.menu-item {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  font-size: 1rem;
  color: #333;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease-in-out;
}
.menu-item i {
  font-size: 1.2rem;
  color: #007bff; /* آیکون‌ها آبی */
  width: 30px;
  text-align: center;
}
.menu-item:hover {
  background-color: #f0f4ff;
  color: #007bff;
}

.logout-container
{
  position: absolute;
  bottom: 70px;
}