/* style.css */
/* ----------------------
   تنظیمات پایه و عمومی
----------------------- */
body {
  font-family: 'Vazir', sans-serif;
  background-color: #f0f8ff; /* پس‌زمینه روشن برای روز */
  color: #333; /* رنگ متن تیره برای روز */
  margin: 0;
  padding: 0;
  direction: rtl;
  transition: all 0.3s ease;
}

/* حالت شب */
body.night {
  background-color: #121212;
  color: #f0f0f0;
}

/* ----------------------
   محفظه اصلی (مرکز)
----------------------- */
.container {
  max-width: 1000px;
  margin: 30px auto;
  padding: 30px;
  background-color: #ffffff; /* پس‌زمینه روشن برای container */
  border: 5px dashed #089c46;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1); /* سایه ملایم */
  border-radius: 20px;
  /* box-shadow: 0 0 10px rgba(0,0,0,0.1); */
  transition: all 0.3s ease;
}

body.night .container {
  background-color: #1c1c1c;
  border-color: #444;
  box-shadow: 0 0 15px rgba(0,0,0,0.5);
}

/* ----------------------
   عنوان
----------------------- */
h1 {
  font-size: 36px;
  background-color: #f5d687;
  color: #000;
  padding: 20px;
  text-align: center;
  border-radius: 20px;
  margin-bottom: 30px;
  transition: all 0.3s ease;
}

body.night h1 {
  background-color: #2c2c2c;
  color: #fff;
}

/* ----------------------
   آیکون تغییر روز/شب
----------------------- */
#toggle-icon {
  font-size: 36px;
  cursor: pointer;
  text-align: center;
  display: block;
  margin-right: auto;
  padding-left: 20px;
}

/* ----------------------
   فرم فیلتر
----------------------- */
form {
  background-color: #f5d687;
  padding: 20px;
  border: 3px solid #ff0000;
  border-radius: 15px;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* سه ستون برای فیلترهای اصلی */
  gap: 15px;
  transition: all 0.3s ease;
}

form#filter-form > div {
  margin-bottom: 15px;
}

form#filter-form > div:nth-child(1), /* گروه آزمایشی */
form#filter-form > div:nth-child(2), /* استان بومی */
form#filter-form > div:nth-child(3) { /* جنسیت */
  grid-column: span 1; /* هر کدام یک ستون */
}

form#filter-form > div:nth-child(4), /* رشته‌ها */
form#filter-form > div:nth-child(5) { /* شهر محل خدمت */
  grid-column: span 1; /* هر کدام یک ستون در سطر دوم */
}

body.night form {
  background-color: #333;
  border-color: #666;
}

/* فیلدهای ورودی */
label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

select, button {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  background-color: #00ffdd;
  color: #000;
  border: 2px solid #000;
  border-radius: 10px;
  transition: all 0.3s ease;
}

button {
  background-color: #59c285;
  color: black;
  font-weight: bold;
  cursor: pointer;
  grid-column: span 2;
}

button:hover {
  background-color: #089c46;
}

/* حالت شب */
body.night select,
body.night button {
  background-color: #444;
  color: #fff;
  border-color: #666;
}

body.night button {
  background-color: #3a8e63;
}

body.night button:hover {
  background-color: #2d6e4d;
}

/* ----------------------
   فرم دوم - اولویت‌ها
----------------------- */
#dicip-priority-container,
#city-priority-container {
  flex: 1 1 100%;
  margin-top: 10px;
}

#dicip-priority-container select,
#city-priority-container select {
  margin-bottom: 10px;
}

#save-dicip-priority,
#save-city-priority,
#show-priority-output {
  margin-top: 10px;
}

/* ----------------------
   ورودی کد شناسایی
----------------------- */
#secret-input {
  width: 50%;
  padding: 10px;
  font-size: 16px;
  border: 2px solid #000;
  border-radius: 10px;
}

body.night #secret-input {
  background-color: #333;
  color: #fff;
  border-color: #666;
}

/* ----------------------
   پنجره نتایج با جدول
----------------------- */
.results-container {
  max-height: 500px;
  overflow-y: auto;
  border: 3px solid #ff0000;
  border-radius: 15px;
  background-color: #f5d687;
}

body.night .results-container {
  background-color: #333;
}

/* جدول */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 30px;
  background-color: #ffffff; /* پس‌زمینه روشن برای جداول */
  color: #000;
  transition: all 0.3s ease;
}

thead {
  background-color: #f5d687;
  font-weight: bold;
}

th, td {
  border: 2px solid #000;
  padding: 10px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* اجازه چند خط برای رشته و دانشگاه یا پردیس محل تحصیل */
td:nth-child(3),
td:nth-child(4) {
  white-space: normal;
  word-wrap: break-word;
}

thead {
  background-color: #f5d687;
  position: sticky;
  top: 0;
  z-index: 1;
}

body.night thead {
  background-color: #2c2c2c;
}

tbody tr:nth-child(even) {
  background-color: #e0fff8;
}

/* تم تاریک */
body.dark-mode {
  background-color: #121212; /* پس‌زمینه تیره برای شب */
  color: #f0f0f0; /* رنگ متن روشن برای شب */
}


.dark-mode .container {
  background-color: #1c1c1c; /* پس‌زمینه خیلی تیره‌تر برای container */
  border-color: #444; /* مرزهای تیره‌تر */
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.7); /* سایه تیره‌تر */
}

body.night tbody tr:nth-child(even) {
  background-color: #333;
}

body.night tbody tr:nth-child(odd) {
  background-color: #444;
}

body.night th, body.night td {
  border-color: #666;
  color: #ccc;
}

td:nth-child(3), td:nth-child(4) {
  white-space: normal;      /* ← اجازه نمایش چند خط */
  word-wrap: break-word;
}

/* ----------------------
   خروجی اکسل
----------------------- */
.exports {
  margin-top: 20px;
  text-align: center;
}

/* ----------------------
   برای موبایل و تبلت
----------------------- */
@media only screen and (max-width: 768px) {
  form {
    grid-template-columns: 1fr;
  }

  #secret-input {
    width: 100%;
  }

  th, td {
    font-size: 14px;
    padding: 8px;
  }

  td {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
}

.form-group {
    display: inline-block;
    margin-right: 15px;
    vertical-align: top;
}

input[type="checkbox"] {
  transform: scale(1.3);
  margin-left: 5px;
  cursor: pointer;
}

/* ✅ برای نمایش لیست باکس شبیه تصویر برای چک‌باکس‌ها */
.checkbox-listbox {
  border: 1px solid #999;
  padding: 10px;
  width: 100%;
  height: 200px;
  overflow-y: auto;
  border-radius: 8px;
  background-color: #fff;
}

/* ✅ تنظیم دکمه‌های اولویت در یک ردیف */
.priority-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 15px;
  flex-wrap: wrap;  /* ← اگر صفحه کوچک شد زیر هم بره */
}

/* ✅ نمایش مقادیر انتخاب‌شده در خطوط جداگانه */
.priority-preview {
  background-color: #fff8dc;
  border: 1px dashed #888;
  padding: 10px;
  margin-top: 10px;
  border-radius: 8px;
  white-space: pre-line;
  line-height: 1.8;
  font-family: "Vazir", sans-serif;
  font-size: 15px;
}

/* ✅ نمایش چند خطی خروجی انتخاب‌شده */
.priority-preview {
  background-color: #fff8dc;
  border: 1px dashed #888;
  padding: 10px;
  margin-top: 10px;
  border-radius: 8px;
  white-space: pre-line;
  line-height: 1.8;
  font-family: "Vazir", sans-serif;
  font-size: 15px;
}

/* ✅ ظاهر بهتر برای لیست چک‌باکس‌ها */
.checkbox-listbox {
  border: 1px solid #ccc;
  padding: 10px;
  background-color: #fdfaf1;
  border-radius: 10px;
  height: 220px;
  overflow-y: auto;
  font-family: "Vazir", sans-serif;
  font-size: 15px;
}

/* ✅ فاصله بین دو فیلد محدودیت فرعی */
.filter-sub-wrapper.double {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.filter-sub-wrapper.double > div {
  flex: 1 1 45%;
}

.checkbox-listbox label {
  margin-bottom: 6px;
  display: block;
  cursor: pointer;
  transition: background-color 0.2s;
}

.checkbox-listbox label:hover {
  background-color: #f0f0f0;
}

.checkbox-listbox input[type="checkbox"]:checked + span {
  font-weight: bold;
  color: #007b83;
}

/* ✅ نمایش انتخاب‌ها به صورت خط‌به‌خط */
.priority-preview {
  background-color: #fff8dc;
  border: 1px dashed #888;
  padding: 10px;
  margin-top: 10px;
  border-radius: 8px;
  white-space: pre-line;
  line-height: 1.8;
  font-family: "Vazir", sans-serif;
  font-size: 15px;
}

.priority-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 20px;
  background-color: #f5d687; /* هماهنگ با بخش‌های فیلتر اصلی/فرعی */
  padding: 15px;
  border-radius: 15px;
}

.priority-grid select {
  width: 100%;
  margin: 5px 0;
  padding: 8px;
  font-size: 14px;
  border-radius: 8px;
}

.priority-grid button {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  font-weight: bold;
  background-color: #00ffdd;
  border: 1px solid black;
  border-radius: 5px;
  cursor: pointer;
}

/* ✅ استایل‌های مخصوص فرم‌های مرحله‌ای */
.step-section {
  display: none;
  margin-top: 25px;
  padding: 20px;
  border: 3px dashed #089c46;
  border-radius: 15px;
  background-color: #f5f5f5;
}

body.night .step-section {
  background-color: #222;
  border-color: #666;
}

.step-section form,
.step-section fieldset {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.step-section button {
  align-self: center;
  width: 200px;
  font-size: 16px;
  background-color: #59c285;
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
}

.step-section button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ✅ نمایش دکمه‌ها در responsive mode */
@media (max-width: 768px) {
  .step-section form,
  .step-section fieldset {
    gap: 15px;
  }

  .step-section button {
    width: 200px;
  }

  .priority-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ✅ دکمه‌های مرحله‌ای در فرم اولویت */
.priority-actions button {
  background-color: #00ffdd;
  border: 2px solid #333;
  border-radius: 8px;
  font-weight: bold;
}

/* ✅ کادر نتایج نهایی */
#results-section {
  margin-top: 30px;
}

#results-section .exports button {
  margin: 10px;
  padding: 10px 15px;
  font-size: 15px;
  background-color: #ffd700;
  border: 2px solid #000;
  border-radius: 8px;
  cursor: pointer;
}

@media only screen and (max-width: 768px) {
  .priority-grid {
    display: flex !important;
    flex-direction: column !important;
  }
}

@media only screen and (max-width: 768px) {
  .step-section form,
  .step-section fieldset {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .form-group {
    width: 100%;
  }

  .priority-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  select, button {
    width: 100% !important;
  }
}

@media only screen and (max-width: 768px) {
  .results-container {
    overflow-x: auto;
  }

  table {
    min-width: 800px; /* ← اطمینان از اینکه جدول به اسکرول نیاز دارد */
  }
  th, td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
}

.results-container::-webkit-scrollbar {
  height: 8px;
}

.results-container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

/* ✅ دکمه‌های پایین کدشناسایی مثل خروج کاربر و انتخاب رشته مجدد */
#logout-container {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
}

#logout-container button:not(.btn_out) {
  background-color: #59c285;
  font-weight: bold;
  padding: 6px 12px;
  border: 2px solid #000;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#logout-container button:hover {
  background-color: #089c46;
}

body.night #logout-container button {
  background-color: #3a8e63;
  color: #fff;
  border-color: #666;
}

body.night #logout-container button:hover {
  background-color: #2d6e4d;
}

input[type="text"] {
  width: 100%;
  padding: 8px;
  font-size: 16px;
  border-radius: 5px;
  border: 2px solid #888;
  margin-top: 5px;
  margin-bottom: 15px;
  box-sizing: border-box;
}

.priority-tags {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.priority-tag {
  background-color: #fff8dc;
  border: 1px dashed #888;
  border-radius: 8px;
  padding: 6px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Vazir", sans-serif;
}

.priority-tag span {
  font-weight: bold;
}

.priority-tag button {
  background-color: #ff6666;
  border: none;
  border-radius: 6px;
  color: white;
  padding: 2px 8px;
  font-size: 14px;
  cursor: pointer;
}


/* ✅ کادر نمایش اطلاعات واردشده کاربر */
.user-summary-box {
  background-color: #fff8dc;
  border: 2px dashed #888;
  padding: 15px 25px;
  margin-bottom: 25px;
  border-radius: 15px;
  font-size: 17px;
  line-height: 2;
  font-weight: bold;
  text-align: right;
  direction: rtl;
}

body.night .user-summary-box {
  background-color: #2a2a2a;
  border-color: #999;
  color: #eee;
}

#user-summary {
  margin-top: 30px;
  margin-bottom: 20px;
}

body.night #user-summary {
  background-color: #222;
  color: #f0f0f0;
  border-color: #555;
}

.checkbox-listbox {
  border: 2px dashed #999;
  background-color: #fdfaf1;
  padding: 15px;
  border-radius: 10px;
  transition: box-shadow 0.3s ease;
}

.checkbox-listbox:hover {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}

.filter-sub-wrapper legend {
  font-weight: bold;
  font-size: 18px;
  color: #333;
  border-bottom: 2px solid #ccc;
  padding-bottom: 5px;
  margin-bottom: 10px;
}

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

/* ستون‌ها بهتر بشکنند */
#results-section th,
#results-section td {
  word-break: break-word;
  white-space: normal;
  padding: 10px;
}

/* ✅ بلوک‌سازی جدول در موبایل */
@media only screen and (max-width: 768px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }

  thead {
    display: none;
  }

  td::before {
    content: attr(data-label); /* ✅ همین باعث می‌شود برچسب فیلد نمایش داده شود */
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
  }
}

body {
  font-family: 'Vazir', sans-serif;
  background-color: #f0f8ff; /* پس‌زمینه روشن برای روز */
  color: #333; /* رنگ متن تیره برای روز */
  margin: 0;
  padding: 0;
  direction: rtl;
  transition: all 0.3s ease;
}

.container {
  max-width: 1000px;
  margin: 30px auto;
  padding: 30px;
  background-color: #ffffff; /* پس‌زمینه روشن برای container */
  border: 5px dashed #089c46;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1); /* سایه ملایم */
  border-radius: 20px;
  transition: all 0.3s ease;
}

h1 {
  font-size: 36px;
  background-color: #f5d687;
  color: #000;
  padding: 20px;
  text-align: center;
  border-radius: 20px;
  margin-bottom: 30px;
  transition: all 0.3s ease;
}



form {
  background-color: #f5d687;
  padding: 20px;
  border: 3px solid #ff0000;
  border-radius: 15px;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* سه ستون برای فیلترهای اصلی */
  gap: 15px;
  transition: all 0.3s ease;
}

form#filter-form > div {
  margin-bottom: 15px;
}

form#filter-form > div:nth-child(1), /* گروه آزمایشی */
form#filter-form > div:nth-child(2), /* استان بومی */
form#filter-form > div:nth-child(3) { /* جنسیت */
  grid-column: span 1; /* هر کدام یک ستون */
}

form#filter-form > div:nth-child(4), /* رشته‌ها */
form#filter-form > div:nth-child(5) { /* شهر محل خدمت */
  grid-column: span 1; /* هر کدام یک ستون در سطر دوم */
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

select, button {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  background-color: #00ffdd;
  color: #000;
  border: 2px solid #000;
  border-radius: 10px;
  transition: all 0.3s ease;
}

button {
  background-color: #59c285;
  color: black;
  font-weight: bold;
  cursor: pointer;
  grid-column: span 2;
}

button:hover {
  background-color: #089c46;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 30px;
  background-color: #ffffff; /* پس‌زمینه روشن برای جداول */
  color: #000;
  transition: all 0.3s ease;
}

thead {
  background-color: #f5d687;
  font-weight: bold;
}

th, td {
  border: 2px solid #000;
  padding: 10px;
  text-align: center;
}

tbody tr:nth-child(even) {
  background-color: #e0fff8;
}

/* تم تاریک */
body.dark-mode {
  background-color: #121212; /* پس‌زمینه تیره برای شب */
  color: #f0f0f0; /* رنگ متن روشن برای شب */
}

.dark-mode .container {
  background-color: #1c1c1c; /* پس‌زمینه خیلی تیره‌تر برای container */
  border-color: #444; /* مرزهای تیره‌تر */
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.7); /* سایه تیره‌تر */
}

.dark-mode h1 {
  background-color: #2c2c2c; /* پس‌زمینه خیلی تیره‌تر برای عنوان */
  color: #fff; /* رنگ متن روشن برای عنوان */
}

.dark-mode form {
  background-color: #333333; /* پس‌زمینه خیلی تیره‌تر برای فرم */
  border-color: #666; /* مرز تیره‌تر برای فرم */
}

.dark-mode select,
.dark-mode button {
  background-color: #444; /* پس‌زمینه خیلی تیره‌تر برای دکمه‌ها و انتخاب‌ها */
  color: #fff; /* متن سفید برای دکمه‌ها و انتخاب‌ها */
  border-color: #666; /* مرز تیره‌تر برای دکمه‌ها و انتخاب‌ها */
}

.dark-mode button {
  background-color: #3a8e63; /* پس‌زمینه سبز تیره‌تر برای دکمه */
}

.dark-mode button:hover {
  background-color: #2d6e4d; /* رنگ دکمه هنگام هاور */
}

.dark-mode table {
  background-color: #1a1a1a; /* پس‌زمینه خیلی تیره‌تر برای جداول */
  color: #fff; /* رنگ متن سفید برای جداول */
}

.dark-mode thead {
  background-color: #2c2c2c; /* پس‌زمینه خیلی تیره‌تر برای سرصفحه جداول */
}

.dark-mode tbody tr:nth-child(even) {
  background-color: #333333; /* پس‌زمینه خیلی تیره‌تر برای ردیف‌های زوج */
}

.dark-mode tbody tr:nth-child(odd) {
  background-color: #444444; /* پس‌زمینه خیلی تیره‌تر برای ردیف‌های فرد */
}

.dark-mode tbody tr {
  border-bottom: 1px solid #444; /* مرز زیر هر ردیف جدول */
}

.dark-mode label,
.dark-mode select,
.dark-mode button {
  color: #ccc; /* رنگ متن روشن‌تر برای فرم‌ها و دکمه‌ها */
}

.dark-mode th, .dark-mode td {
  border-color: #444; /* مرزهای تیره‌تر برای جدول */
}

/* تغییر رنگ فونت‌های جداول */
.dark-mode th {
  color: #ddd; /* رنگ روشن‌تر برای سرصفحه جدول */
}

.dark-mode td {
  color: #ccc; /* رنگ روشن‌تر برای محتوای جدول */
}

/* تغییرات برای موبایل و تبلت */
@media only screen and (max-width: 768px) {
  form {
    grid-template-columns: 1fr; /* هر فیلتر در یک ستون */
  }

  form#filter-form > div {
    grid-column: span 1; /* هر فیلتر یک ستون را اشغال می‌کند */
  }

  table, thead, tbody, th, td, tr {
    display: block;
  }

  thead {
    display: none;
  }

  tr {
    margin-bottom: 15px;
    border-bottom: 2px dashed #089c46;
  }

  td {
    padding: 10px;
    position: relative;
    text-align: right;
    background-color: #e0fff8;
  }

  td::before {
    content: attr(data-label);
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
  }

  .dark-mode td {
    background-color: #333333; /* پس‌زمینه خیلی تیره‌تر برای جدول در شب */
  }

  button {
    width: 100%;
    margin-top: 15px;
  }
}


/* استایل پنجره نتایج */
.results-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 20px;
}

/* اصلاح رنگ سرستون */
.results-container .header {
  background-color: #f5d687; /* رنگ قبلی سرستون */
  color: black;
  font-weight: bold;
  display: flex;
  padding: 10px;
  position: sticky;
  top: 0; /* ثابت ماندن در بالای پنجره */
  z-index: 1; /* اطمینان از اینکه سرستون همیشه بالاتر از محتوای دیگر باشد */
  border-bottom: 2px solid #fff; /* جداسازی سرستون از نتایج */
}

/* حالت شب - رنگ نوشته‌ها سفید */
.dark-mode .results-container .header {
  color: orange; /* رنگ متن سفید در حالت شب */
  background-color: #333333; /* پس‌زمینه تیره‌تر برای سرستون در شب */
}

/* اسکرول در سمت راست */
.results-container {
  direction: rtl; /* این باعث می‌شود که نوار اسکرول سمت راست قرار گیرد */
  width: 100%;
  max-height: 500px; /* حداکثر ارتفاع پنجره نتایج */
  overflow-y: auto; /* فعال کردن اسکرول عمودی فقط برای این پنجره */
  background-color: #f5d687;
  border: 3px solid #ff0000;
  border-radius: 15px;
}

/* استایل هر ستون در سرستون */
.results-container .header .column {
  flex: 1;
  padding: 10px;
  text-align: center;
}

/* نتایج */
.results-container .row {
  display: flex;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.results-container .row .column {
  flex: 1;
  padding: 10px;
  text-align: center;
}

#secret-input {
  width: 50%;
  padding: 10px;
  font-size: 16px;
  border-radius: 10px;
  border: 2px solid #000;
  box-sizing: border-box;
}
.dark-mode #secret-input {
  background-color: #333;
  color: #fff;
  border-color: #666;
}
select[multiple] {
  height: 150px;
  overflow-y: auto;
}
#smaller { font-size: 10px; }

.hidden {
  display: none !important;
}


/* ✅ بهبود نمایش جدول در موبایل بدون اسکرول عرضی */
/*  ✅ جلوگیری از شکستن کلمات و اصلاح نمایش و بهبود ستون‌ها */
@media only screen and (max-width: 768px) {
  table, thead, tbody, th, td, tr {
    display: block;
    width: 100%;
  }

  thead {
    display: none;
  }

  tr {
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #e0fff8;
    padding: 10px;
  }

  td {
    border: none;
    border-bottom: 1px solid #ddd;
    text-align: right;
    padding: 6px 10px;
    font-size: 15px;
    white-space: normal !important;
    word-break: normal !important;
    word-wrap: break-word;
    overflow-wrap: break-word !important;
    display: block;
    position: relative;
    direction: rtl;
    text-align: right;
  }

  td::before {
    content: attr(data-label) ": ";
    font-weight: bold;
    color: #000;
    display: inline;
    margin-left: 5px;
  }

  .results-container {
    overflow-x: hidden !important;
  }
}


/* ✅ اصلاح نهایی نمایش در موبایل */
@media only screen and (max-width: 768px) {
  /* خطوط جداکننده راست‌چین فقط در موبایل، بدون ::before */
  td.separator {
    text-align: right !important;
    font-weight: bold;
    background-color: #dbeeff;
    border: none;
    font-size: 16px;
    direction: rtl;
    padding: 8px 10px;
  }

  td.separator::before {
    content: "" !important;
  }
}

@media (min-width: 769px) {
  th, td {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    text-align: center;
  }

  td, th {
    vertical-align: middle;
  }

  /* خطوط جداکننده وسط‌چین در دسکتاپ */
  td.separator {
    text-align: center !important;
  }

  /*td {*/
  /*  direction: rtl;*/
  /*  text-align: right;*/
  /*}*/

  /* عرض مناسب برای ستون‌های مهم */
  /*th:nth-child(1), td:nth-child(1) { min-width: 35px; }*/  /* ردیف */
  /*th:nth-child(2), td:nth-child(2) { min-width: 80px; }*/  /* کدرشته‌محل */
  /*th:nth-child(12), td:nth-child(12) { min-width: 55px; }*/ /* اولولیت پذیرش */
  /*th:nth-child(3), td:nth-child(3) { min-width: 100px;}*/ /* رشته */
  /*th:nth-child(5), td:nth-child(5) { min-width: 60px; }*/  /* دوره */
  /*th:nth-child(7), td:nth-child(7) { min-width: 55px; }*/   /* جنسیت */
  /*th:nth-child(8), td:nth-child(8) { min-width: 55px; }*/   /* ظرفیت */
  /*th:nth-child(4), td:nth-child(4) { min-width: 160px; white-space: normal;}*/  /* دانشگاه یا پردیس محل تحصیل */
  /*th:nth-child(11), td:nth-child(11) { min-width: 80px; }*/ /* شهر محل خدمت */


  /* عرض مناسب برای ستون‌های مهم */
  th:nth-child(1), td:nth-child(1) { min-width: 35px; }  /* ردیف */
  th:nth-child(2), td:nth-child(2) { min-width: 80px; }  /* کدرشته‌محل */
  th:nth-child(3), td:nth-child(3) { min-width: 100px;}  /* رشته */
  th:nth-child(4), td:nth-child(4) { min-width: 160px; white-space: normal;}  /* دانشگاه یا پردیس محل تحصیل */
  /* th:nth-child(5), td:nth-child(5) ← دوره (پنهان‌شده) → حذف شده */
  /* th:nth-child(7), td:nth-child(7) ← جنسیت (پنهان‌شده) → حذف شده */
  th:nth-child(8), td:nth-child(8) { min-width: 55px; }   /* ظرفیت */
  th:nth-child(11), td:nth-child(11) { min-width: 80px; } /* شهر محل خدمت */
  th:nth-child(12), td:nth-child(12) { min-width: 55px; } /* اولویت پذیرش */
}


/* ✅ جلوگیری از شکست در سرستون اولولیت پذیرش */
th:nth-child(12),
td:nth-child(12) {
  min-width: 100px;
  word-break: keep-all;
  white-space: nowrap;
}

/* ✅ اصلاح حالت شب - پس‌زمینه لیست باکس‌ها و اولویت‌ها */
body.night #city-checkboxes,
body.night #dicip-checkboxes,
body.night #univcity-checkboxes,
body.night #city-priority-tags,
body.night #dicip-priority-tags {
  background-color: #2a2a2a !important;
  border: 1px solid #555;
}

body.night .priority-tag,
body.night .selected-priority {
  background-color: #3a3a3a !important;
  color: #fff !important;
  border-color: #666;
}

/* ✅ متن سفید روی پس‌زمینه تیره در حالت شب */
body.night th,
body.night td,
body.night label,
body.night span,
body.night p {
  color: #fff !important;
}

/* ✅ حالت شب: پس‌زمینه تیره‌تر برای جدول خروجی در موبایل */
@media only screen and (max-width: 768px) {
  body.night td {
    background-color: #1c1c1c !important;
    border-color: #444;
  }

  body.night tr {
    background-color: #1c1c1c !important;
  }

  body.night #results-table-body tr {
    background-color: #1c1c1c !important;
  }
}

/* ✅ حالت شب: تغییر رنگ دکمه‌ها از زرد به نارنجی برای کنتراست بهتر */
body.night button,
body.night .btn,
body.night .download-btn {
  background-color: #ff9900 !important;
  color: #000 !important;
  border: 1px solid #cc8400;
}

body.night button:hover,
body.night .btn:hover,
body.night .download-btn:hover {
  background-color: #ffaa1a !important;
  border-color: #dd9512;
}


/* دکمه حذف جمع‌وجور فقط به اندازه متن */
.priority-tag .remove-priority {
  font-size: 12px;
  color: #fff;
  background-color: #e74c3c;
  border-radius: 4px;
  border: none;
  margin-left: 8px;
  float: left;
  cursor: pointer;
  width: fit-content;
  height: auto;
  padding: 2px 4px;
  line-height: 1.2;
}

.priority-tag .remove-priority:hover {
  background-color: #c0392b;
}


/* دکمه حذف واکنش‌گرا */
@media (max-width: 768px) {
  .priority-tag .remove-priority {
    font-size: 11px;
    padding: 2px 5px;
  }
}

@media (max-width: 480px) {
  .priority-tag .remove-priority {
    font-size: 10px;
    padding: 1px 4px;
  }
}


/* ✅ دکمه حذف دقیقاً به اندازه مورد نظر در دسکتاپ */
.priority-tag .remove-priority {
  font-size: 14px;
  color: #fff;
  background-color: #e74c3c;
  border-radius: 6px;
  border: none;
  margin-left: 10px;
  float: left;
  cursor: pointer;
  height: 32px;
  padding: 2px 10px;
  line-height: 28px;
  width: auto;
}

/* حالت موبایل همچنان واکنش‌گرا بماند */
@media (max-width: 768px) {
  .priority-tag .remove-priority {
    font-size: 12px;
    padding: 2px 8px;
    height: 28px;
    line-height: 24px;
  }
}

@media (max-width: 480px) {
  .priority-tag .remove-priority {
    font-size: 11px;
    padding: 1px 6px;
    height: 26px;
    line-height: 22px;
  }
}


/* ✅ دکمه حذف با اندازه یکسان در همه حالت‌ها */
.priority-tag .remove-priority {
  font-size: 13px;
  color: #fff;
  background-color: #e74c3c;
  border-radius: 6px;
  border: none;
  margin-left: 10px;
  float: left;
  cursor: pointer;
  height: 32px;
  width: 60px;
  line-height: 32px;
  text-align: center;
  padding: 0;
}

.priority-tag .remove-priority:hover {
  background-color: #c0392b;
}

/* لغو تأثیر واکنش‌گرایی پیشین */
@media (max-width: 768px), (max-width: 480px) {
  .priority-tag .remove-priority {
    font-size: 13px;
    height: 32px;
    width: 60px;
    line-height: 32px;
    padding: 0;
  }
}


/* ⛔️ لغو هر نوع واکنش‌گرایی برای دکمه حذف */
.priority-tag .remove-priority {
  font-size: 14px !important;
  color: #fff !important;
  background-color: #e74c3c !important;
  border-radius: 6px !important;
  border: none !important;
  margin-left: 10px !important;
  float: left !important;
  cursor: pointer !important;
  height: 32px !important;
  width: 60px !important;
  line-height: 32px !important;
  text-align: center !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* حذف هرگونه استایل متداخل در ریسپانسیو */
@media (max-width: 10000px) {
  .priority-tag .remove-priority {
    font-size: 14px !important;
    height: 32px !important;
    width: 60px !important;
    line-height: 32px !important;
    padding: 0 !important;
  }
}


/* ✅ استایل دقیق دکمه‌های دانلود بدون تغییر مکان یا رنگ */
.exports {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
  margin: 30px 0 10px;
}

.exports button {
  width: 180px;
  height: 45px;
  font-size: 15px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

#countdown-timer {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

body.night #countdown-timer {
  background-color: #222;
  color: #f0f0f0;
  border-color: #777;
}

#top-bar {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f5d687;
  padding: 10px 20px;
  font-weight: bold;
  font-size: 16px;
  border-radius: 20px;
  border-bottom: 2px solid #999;
  direction: rtl;
  height: 60px;;
  margin-bottom: 30px;
  transition: all 0.3s ease;
}

body.night #top-bar {
  background-color: #2c2c2c;
  color: #eee;
  border-color: #555;
}

#top-bar #toggle-icon {
  font-size: 24px;
  cursor: pointer;
  margin-right: auto;
  padding-left: 20px;
}

#countdown-timer {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff8dc;
  border: 1px dashed #999;
  border-radius: 8px;
  padding: 5px 10px;
  font-weight: bold;
  white-space: nowrap;
}

body.night #top-bar #countdown-timer {
  background-color: #444;
  border-color: #888;
  color: #fff;
}

#top-bar #token-remaining {
  font-size: 14px;
  color: #222;
}

body.night #top-bar #token-remaining {
  color: #ddd;
}

.other-box {
  border-radius: 12px;
}

@media (max-width: 600px) {
  #top-bar {
    flex-direction: column;
    height: auto;
    padding: 10px;
  }

  #toggle-icon {
    order: -1;
    align-self: flex-start;
    margin-bottom: 5px;
  }

  #countdown-timer {
    position: static;
    transform: none;
    order: 1;
    margin: 5px 0;
  }

  #token-remaining {
    order: 2;
    margin-top: 5px;
  }
}

#accept-terms-input {
  margin-top: 10px;
  transform: scale(1.2);
}

@font-face {
  font-family: 'Vazir';
  src: url('/static/fonts/webfonts/Vazirmatn[wght].woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}


body, input, select, button, textarea, label {
  font-family: 'Vazir', sans-serif !important;
}

::placeholder {
  font-family: 'Vazir', sans-serif !important;
  font-size: inherit;
}

button {
  font-family: 'Vazir', sans-serif !important;
}

button {
  width: 100%;
  padding: 6px 10px;     /* کاهش padding */
  font-size: 14px;        /* کاهش سایز فونت */
  ...
}

#top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

#button.logoutBtn {
  background-color: #f44336;
  border: 2px solid #900;
  color: white;
  font-weight: bold;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#button.logoutBtn:hover {
  background-color: #cc0000;
}

#button.logoutBtn span {
  color: white; /* علامت ❌ سفید باقی بماند */
}

.next-button {
  background-color: #59c285 !important;
  color: #000 !important;
  font-weight: bold;
  border: 2px solid #000;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.next-button:hover {
  background-color: #089c46 !important;
}

.btn_out {
  background-color: #ff4444 !important;
  color: white !important;
  font-weight: bold !important;
  border: 2px solid #900 !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  font-size: 14px !important;
  cursor: pointer !important;
}

.btn_out:hover {
  background-color: #cc0000 !important;
}

.priority-btn {
  background-color: #59c285 !important;
  color: #000 !important;
  font-weight: bold !important;
  font-size: 15px !important;
  padding: 8px 20px !important;
  border: 2px solid #3a824a !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: background-color 0.3s ease !important;
  min-width: 240px !important;
  white-space: nowrap !important;
  text-align: center !important;
  margin-left: 105px !important;
  margin-right: 80px !important;
}

#help-button {
  display: inline-block;
  margin: 0 10px;
  font-size: 20px;
  text-decoration: none;
  color: #007bff;
  background-color: #eef4ff;
  border: 1px solid #b0d4ff;
  border-radius: 50%;
  padding: 4px 8px;
  transition: background-color 0.2s ease;
  vertical-align: middle;
}

#help-button:hover {
  background-color: #d0e9ff;
  color: #0056b3;
}

.priority-btn:hover {
  background-color: #3da66f !important;
}

body {
  background-image: url('/static/img/background.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.icon-label {
  display: flex;
  align-items: center;
  font-weight: bold;
}

.icon-label img {
  width: 20px;
  height: 20px;
  margin-left: 6px;
  vertical-align: middle;
}

.summary-item {
  margin-bottom: 5px;
  font-size: 15px;
  display: flex;
  align-items: center;
}

.summary-icon {
  width: 18px;
  height: 18px;
  margin-left: 6px;
}