/* ========================================================================
   1. فونت و تنظیمات عمومی
   ======================================================================== */

/* فونت وزیر با فعال‌سازی ویژگی pnum به‌منظور نمایش ارقام فارسی */
@font-face {
  font-family: 'Vazir';
  src: url('../font/Vazir.woff2') format('woff2'),
       url('../font/Vazir.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  font-variant-numeric: normal;
  font-feature-settings: "ss02" 1, "ss01" 1, "pnum" 1;
}

/* تنظیمات عمومی و reset اولیه */
body, * {
  font-family: 'Vazir', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  direction: rtl;
}

/* ========================================================================
   2. پس‌زمینه و ساختار صفحات
   ======================================================================== */

/* کلاس‌های مربوط به صفحات مختلف */
.login-page, 
.register-page, 
.dashboard-page, 
.form-page, 
.invitation-page,
.report-page {
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* پس‌زمینه اختصاصی صفحات */
.login-page {
  background: url('../img/login-bg.jpg') no-repeat center center fixed;
}
.register-page {
  background: url('../img/register-bg.jpg') no-repeat center center fixed;
}
.dashboard-page {
  background: url('../img/dashboard-bg.jpg') no-repeat center center fixed;
}
.invitation-page,
.report-page {
  background: url('../img/invitation-bg.jpg') no-repeat center center fixed;
}

/* ========================================================================
   3. کادرهای شیشه‌ای (کانتینرها)
   ======================================================================== */

/* کانتینرهای صفحات (ورود، ثبت‌نام، دعوتنامه) */
.login-container, 
.register-container, 
.invitation-container {
  width: 360px;
  background: rgba(255, 255, 255, 0.15);
  padding: 20px;
  margin: 0 auto;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: center;
}

/* داشبورد */
.dashboard-container {
  width: 460px;
  background: rgba(255, 255, 255, 0.15);
  padding: 20px;
  margin: 0 auto;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: center;
}

/* فرم‌ها */
.form-container {
  width: 520px;
  background: rgba(0, 126, 148, 0.6);
  padding: 20px;
  margin: 50px auto;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: center;
}

/* ابزارهای کوچک */
.tools-container {
  width: 360px;
  background: rgba(60, 89, 155, 0.6);
  padding: 20px;
  margin: 0 auto;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: center;
}

/* ابزارهای بزرگ */
.big-tools-container {
  width: 800px;
  background: rgba(60, 89, 155, 0.6);
  padding: 20px;
  margin: 0 auto;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: center;
}

/* گزارشات */
.report-container {
  width: 1600px;
  background: rgba(255, 255, 255, 0.15);
  padding: 20px;
  margin: 0 auto;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: center;
}

/* مدال ویرایش */
.edit-container {
  width: 280px;
  background: rgba(255, 255, 255, 0.15);
  padding: 20px;
  margin: 0 auto;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: center;
}

/* ========================================================================
   4. عناوین، ورودی‌ها و فرم‌ها
   ======================================================================== */

/* عناوین صفحات */
h1, h2 {
  text-align: center;
  margin-bottom: 15px;
  font-size: 18px;
  color: #fff;
}

/* استایل ورودی‌ها و تکست اریاها */
input[type="text"],
input[type="password"],
input[type="email"],
textarea {
  width: 100%;
  padding: 5px;
  margin-bottom: 12px;
  font-size: 12px;
  border: none;
  border-radius: 8px;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
}
textarea {
  resize: vertical;
  min-height: 80px;
}

/* فرم‌های عمومی */
form {
  width: 100%;
  margin-bottom: 20px;
}
form label {
  display: block;
  margin: 8px 0 4px;
  font-size: 14px;
  color: #fff;
  text-align: right;
}
form input[type="date"],
form select {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
form input[type="submit"] {
  background: #4CAF50;
  color: #fff;
  border: none;
  padding: 10px 15px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
}

/* فرم چند فیلد در یک ردیف */
.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.form-group {
  flex: 1 1 calc(25% - 10px);
  min-width: 140px;
  display: flex;
  flex-direction: column;
  text-align: right;
}
.form-group label {
  font-weight: normal;
  margin-bottom: 5px;
  font-size: 14px;
  color: #fff;
}
.file-upload {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  text-align: right;
}
.file-upload label {
  color: #fff;
  font-weight: normal;
  margin-bottom: 5px;
  font-size: 14px;
}

/* ========================================================================
   5. دکمه‌ها و لینک‌ها
   ======================================================================== */

/* دکمه‌های عمومی */
button {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
  color: #fff;
  background: linear-gradient(45deg, #3c599b, #3c599b);
}
button:hover {
  background: linear-gradient(45deg, #99003d, #99003d);
}

/* لینک‌ها */
a {
  text-decoration: none;
  font-size: 14px;
  color: #fff;
}
a:hover {
  color: #99003d;
}

/* دکمه‌های فرم (بخش‌های کوچک) */
.buttons {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}
.buttons button {
  flex: 1;
  padding: 10px;
  background-color: #28a745;
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
}
.buttons button:hover {
  background-color: #218838;
}

/* دکمه‌های داشبورد */
.dashboard-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 20px 0;
}
.dashboard-buttons button {
  padding: 10px 20px;
  font-size: 14px;
  border: none;
  border-radius: 8px;
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
  transition: background 0.3s;
}
.dashboard-buttons button:hover {
  background-color: #0056b3;
}

/* دکمه‌های گزارش برنامه ریزی */
.edit-button {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ========================================================================
   6. جداول، نمودارها و لینک‌های گزارش
   ======================================================================== */

/* جداول گزارشات */
table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 20px;
  background: rgba(255,255,255,0.7);
}
table, th, td {
  border: 1px solid #ddd;
}
th, td {
  padding: 10px;
  text-align: center;
  font-size: 14px;
}
th {
  background-color: #f2f2f2;
}

/* نمودار */
.chart-container {
  width: 50%;
  margin: 20px auto;
}

/* لینک گزارش */
.link-report {
  text-align: center;
  margin-top: 20px;
}
.link-report a {
  background: #007BFF;
  color: #fff;
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
}

/* ========================================================================
   7. مدال‌ها و پاپ‌آپ‌ها
   ======================================================================== */

/* مدال‌های پاپ‌آپ عمومی */
.modal-overlay {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  justify-content: center;
  align-items: center;
}
.modal {
  width: 100%;
  max-width: 1600px;
  padding: 10px;
  position: relative;
  border-radius: 8px;
  animation-duration: 0.3s;
  animation-fill-mode: both;
}

/* محتویات مدال */
.modal-body,
.modal-body-page {
  display: flex;
  flex-direction: column;
}
.modal-body iframe,
.modal-body-page iframe {
  width: 100%;
  min-height: 800px;
  border: none;
  border-radius: 8px;
  flex: 1;
}

/* هدر مدال */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
  margin-bottom: 15px;
}
.modal-header h3 {
  margin: 0;
  font-family: 'Vazir', sans-serif;
  font-size: 18px;
  color: #fff;
}
.modal-close {
  cursor: pointer;
  font-size: 24px;
  line-height: 24px;
  color: #fff;
}

/* کلاس تغییر سایز مدال‌های سفارشی */
.modal-edit {
  width: 600px;
  max-width: 90%;
  margin: 0 auto;
}

.modal-delete {
  width: 400px;
  max-width: 90%;
  margin: 0 auto;
}

/* انیمیشن‌های مدال */
@keyframes zoomIn {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes zoomOut {
  from { transform: scale(1); opacity: 1; }
  to   { transform: scale(0.5); opacity: 0; }
}
.zoom-in {
  animation-name: zoomIn;
}
.zoom-out {
  animation-name: zoomOut;
}

/* ========================================================================
   8. پیام‌ها (ثبت فرم و ثبت نام)
   ======================================================================== */

/* پیام‌های فرم */
.message {
  display: none;
  padding: 10px;
  margin-top: 10px;
  border-radius: 6px;
  text-align: center;
}
.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}
.error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* پیام‌های ثبت نام */
.register-message,
.register-success,
.register-error {
  display: none;
  position: fixed;
  top: 20px;
  padding: 10px;
  border-radius: 6px;
}
.register-message {
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
}
.register-success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}
.register-error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* ========================================================================
   9. استایل‌های اضافی (مثلاً تغییر رمز و پاپ‌آپ‌های اختصاصی)
   ======================================================================== */

/* تغییر رمز / پاپ‌آپ */
.popup-content {
  display: none;
  position: absolute;
  right: 0;
  bottom: 100%;
  margin-bottom: 10px;
  padding: 20px;
  z-index: 100;
  width: 200px;
  background: rgba(154,60,88,0.6);
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.3);
  animation: popupAppear 0.3s ease-out;
}
@keyframes popupAppear {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ========================================================================
   10. استایل‌های تیجیو و ماشین حساب (سفارشی سازی شده)
   ======================================================================== */

/* تیجیو */
.tgju-widget {
  background: rgba(255,255,255,0.15) !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  margin: 10px auto !important;
  text-align: center !important;
  font-family: 'Vazir', sans-serif !important;
  font-size: 14px;
  color: #3c599b !important;
  width: 460px;
}
.ticker-wrapper {
  position: fixed;
  top: 20px;
  padding: 20px;
}
/* مخفی‌سازی کپی‌رایت تیجیو */
.tgju-copyright,
.tgju-copyright a,
.tgju-copyright-fix a {
  font-size: 0 !important;
}

/* ماشین حساب */
.calculator {
  margin: 0 auto;
  text-align: center;
}
#output-calculator {
  background-color: #3c599b;
  color: #fff;
  width: 95%;
  height: 30px;
  padding: 0 10px;
  text-align: left;
  border: none;
  border-radius: 3px;
  box-sizing: border-box;
}
#buttons {
  margin-top: 10px;
}
.button {
  display: inline-block;
  width: 40px;
  line-height: 20px;
  text-align: center;
  background-color: #595959;
  border: 1px solid #33ccff;
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
  user-select: none;
}
.button:hover {
  background-color: #0066ff;
  box-shadow: 0 0 30px 0 #fff;
}
.button:active {
  background-color: #80b3ff;
  box-shadow: 0 0 30px 0 #000;
}
.number {
  background-color: #404040;
}
.number:active {
  background-color: #80b3ff;
  box-shadow: 0 0 30px 0 #000;
}
#zero {
  width: 40px;
}
#decimal {
  font-weight: bold;
}
#equals {
  background-color: #0066ff;
}
#equals:hover {
  background-color: #fff;
  color: #000;
  box-shadow: 0 0 30px -5px #fff;
}
#backspace {
  background-color: #333;
}
#backspace:hover {
  background-color: #99003d;
}
#backspace:active {
  background-color: #ff4d94;
  box-shadow: 0 0 30px 0 #000;
}
#clear {
  background-color: #262626;
}
#clear:hover {
  background-color: #cc0000;
}
#clear:active {
  background-color: #ff4d4d;
  box-shadow: 0 0 30px 0 #000;
}
#radians,
#degrees {
  width: 86px;
}
#radians:hover,
#degrees:hover {
  background-color: #00b38f;
}

/* ========================================================================
   11. رسپانسیو برای دستگاه‌های مختلف (موبایل، تبلت، لپ‌تاپ، دسکتاپ)
   ======================================================================== */

/* تنظیمات ویژه موبایل */
@media (max-width: 768px) {
  /* کانتینرها */
  .login-container,
  .register-container,
  .dashboard-container,
  .invitation-container,
  .form-container,
  .tools-container,
  .big-tools-container,
  .report-container {
    width: 90%;
    padding: 15px;
  }
  /* عنوان‌ها و فرم‌ها */
  h1, h2 { font-size: 16px; }
  form input, form select, form textarea {
    font-size: 12px;
    padding: 8px;
  }
  /* مدال */
  .modal-body-page { max-height: 720px !important; }
  .popup-content { right: -30px !important; }
  /* تیجیو */
  .tgju-widget {
    margin: 10px auto !important;
    font-size: 12px !important;
    width: 360px !important;
  }
  /* ماشین حساب */
  .calculator { width: 100%; padding: 10px; }
  #output-calculator { width: 90%; font-size: 14px; }
  .button { width: calc(100% / 7 - 6px); margin: 3px; padding: 8px; font-size: 12px; }
}

/* تنظیمات ویژه تبلت */
@media (min-width: 769px) and (max-width: 1024px) {
  /* تغییر سایز کانتینرها */
  .login-container,
  .register-container,
  .dashboard-container,
  .invitation-container,
  .form-container,
  .tools-container,
  .big-tools-container,
  .report-container {
    width: 80%;
    padding: 20px;
  }
  /* عنوان‌ها و فرم‌ها */
  h1, h2 {
    font-size: 18px;
  }
  form input, form select, form textarea {
    font-size: 14px;
    padding: 10px;
  }
  /* تنظیمات مدال در صورت نیاز */
  .modal-body-page {
    max-height: 780px !important;
  }
  /* تنظیمات ویژه تیجیو */
  .tgju-widget {
    margin: 10px auto !important;
    font-size: 14px !important;
    width: 400px !important;
  }
  /* تنظیمات ماشین حساب */
  .calculator {
    width: 90%;
    padding: 15px;
  }
  #output-calculator {
    width: 95%;
    font-size: 16px;
  }
  .button {
    width: calc(100% / 7 - 8px);
    margin: 4px;
    padding: 10px;
    font-size: 14px;
  }
}

/* تنظیمات ویژه لپ‌تاپ */
@media (min-width: 1025px) and (max-width: 1440px) {
  /* تغییر سایز کانتینرها */
  .login-container,
  .register-container,
  .dashboard-container,
  .invitation-container,
  .form-container,
  .tools-container,
  .big-tools-container,
  .report-container {
    width: 70%;
    padding: 25px;
  }
  /* عنوان‌ها و فرم‌ها */
  h1, h2 {
    font-size: 20px;
  }
  form input, form select, form textarea {
    font-size: 16px;
    padding: 12px;
  }
  /* تنظیمات ویژه مدال در صورت نیاز */
  .modal-body-page {
    max-height: 840px !important;
  }
  /* تنظیمات ویژه تیجیو */
  .tgju-widget {
    margin: 10px auto !important;
    font-size: 16px !important;
    width: 440px !important;
  }
  /* تنظیمات ماشین حساب */
  .calculator {
    width: 85%;
    padding: 20px;
  }
  #output-calculator {
    width: 100%;
    font-size: 18px;
  }
  .button {
    width: calc(100% / 7 - 10px);
    margin: 5px;
    padding: 12px;
    font-size: 16px;
  }
}

/* ========================================================================
   13. تنظیم فیلتر منوی بالا در یک ردیف
   ======================================================================== */

.filter-menu {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: center;
}