.tooltip-box {
  position: relative;
  display: inline-block;
  justify-content: center;
}

.tooltip-text {
  display: none;
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  white-space: nowrap;
  border-radius: 5px;
  font-size: 10px;
  z-index: 10;
}

.tooltip-box:hover .tooltip-text {
  display: block;
}
/************************************/
.tooltip-box-lege-items {
  position: relative;
  display: inline-block;
}

.tooltip-text-lege-items {
  display: none;
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  white-space: nowrap;
  border-radius: 5px;
  font-size: 10px;
  z-index: 10;
}

.tooltip-box-lege-items:hover .tooltip-text-lege-items {
  display: block;
}

.tooltip-box-lege-items.active .tooltip-text-lege-items {
  display: block;
}

/************************************/
.tooltip-box-get-task {
  position: relative;
  display: inline-block;
}


.copy-button {
  margin-top: 5px;
  padding: 2px 8px;
  font-size: 12px;
  background-color: #00a88f;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.copy-button:hover {
  background-color: #008877;
}

.avaynil-reminders-wrapper {
  max-width: 100%;
  margin: 5px;
}
/* باکس دکمه‌ها */
/* باکس دکمه‌ها */
/* کانتینر کلی تب‌ها */
.reminder-filter-buttons {
  display: flex;
  background: #2e7d32; /* سبز پشت دکمه‌ها */
  padding: 0;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
}

/* دکمه‌های تب‌ها (غیرفعال) */
.reminder-filter-buttons button {
  flex: 1;
  background: #2e7d32; /* سبز مثل تصویر */
  color: #fff;
  border: none;
  padding: 14px 0;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s ease;
}

/* Hover */
.reminder-filter-buttons button:hover {
  background: #2e7d32;
}

/* دکمه فعال (Active) کاملاً مثل تصویر */
.reminder-filter-buttons button.active {
  background: #ffffff; /* سفید */
  color: #2e7d32; /* متن سبز */
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.1);
  position: relative;
}

/* ایجاد خط جداکننده سفید زیر active */
.reminder-filter-buttons button.active::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 8px;
  background: #ffffff; /* ادامه پایین تب فعال */
}

/* ریسپانسیو */
@media (max-width: 768px) {
  .reminder-filter-buttons button {
    padding: 10px 0;
    font-size: 12px;
  }
}

.reminder-card1 {
  display: flex;
  align-items: center;
  background-color: #f8f9fa;
  border-right: 5px solid #f44336;
  padding: 10px;
  margin-bottom: 8px;
  border-radius: 8px;
  transition: 0.3s;
}

.reminder-card1:hover {
  background-color: #f1f1f1;
}

.reminder-card2 {
  display: flex;
  align-items: center;
  background-color: #f8f9fa;
  border-right: 5px solid rgb(96, 235, 32);
  padding: 15px;
  margin-bottom: 12px;
  border-radius: 8px;
  transition: 0.3s;
}

.reminder-card2:hover {
  background-color: #f1f1f1;
}

.reminder-avatar {
  width: 65px;
  height: 65px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #ddd;
  display: block;
  margin: 5px auto;
}

.reminder-content {
  flex: 1;
}

.reminder-title {
  font-weight: bold;
  font-size: 16px;
}

.reminder-message {
  color: #e00606;
  margin-top: 4px;
  font-weight: bold;
}

.reminder-command {
  background-color: #d4f2db;
  font-size: 12px;
  color: #ffffff00;
  margin-top: 4px;
}

.reminder-meta {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

.reminder-btn-ok {
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.reminder-btn-ok:hover {
  background-color: #218838;
}

.reminder-command input {
  width: 100%;
  padding: 8px;
  margin-top: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  color: #333;
}

.reminder-credit_day input {
  width: 100%;
  padding: 8px;
  margin-top: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  color: #333;
}

.reminder-btn {
  margin-top: 15px;
}

.reminder-command,
.reminder-btn {
  flex: 1;
  margin-right: 15px;
}

.reminder-command-input {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  border-radius: 8px;
  border: 1px solid #ccc;
}

.reminder-credit-day-input {
  width: 80px;
  padding: 12px;
  font-size: 16px;
  border-radius: 8px;
  border: 1px solid #ccc;
  margin: 15px;
}

.reminder-btn-ok {
  width: 100%;
  padding: 12px 20px;
  font-size: 16px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
}

.reminder-btn-ok:hover {
  background-color: #218838;
}

.modal-reminder-btn-ok {
  writing-mode: vertical-rl;
  /* چرخش متن به حالت عمودی از راست به چپ */
  text-orientation: mixed;
  padding: 8px 8px;
  font-size: 12px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
}

.modal-reminder-btn-ok:hover {
  writing-mode: vertical-rl;
  /* چرخش متن به حالت عمودی از راست به چپ */
  text-orientation: mixed;
  background-color: #218838;
  padding: 8px 8px;
  font-size: 12px;
}

.reminder_hyperlink_ok {
  color: #166dee;
  border:none;
  background-color:transparent;
  font-size: 14px;
  font-weight: 900;
  
}

.reminder_hyperlink_ok:hover {
  color: #14487d;
}

@media (max-width: 768px) {
  .reminder_hyperlink_ok {
    font-size: 12px;
  }

  .reminder-command-label {
    font-size: 8px;
  }

  .reminder-status {
    font-size: 10px;
  }

  .reminder-meta {
    font-size: 8px;
  }

  .reminder-filter-button {
    font-size: 10px;
  }

  .reminder-message {
    font-size: 10px;
  }

  .moredy-yaft-nashod {
    font-size: 12px;
  }
}

#remainder_modal_close {
  color: #f50713;
  cursor: pointer;
}

#remainder_modal_close:hover {
  color: #e2868e;
  cursor: pointer;
}

.pagination {
  text-align: center;
  margin: 20px 0;
}
.pagination-btn-daryaft,
.pagination-btn {
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  padding: 6px 12px;
  margin: 0 3px;
  cursor: pointer;
  border-radius: 4px;
}
.pagination-btn-daryaft.active,
.pagination-btn.active {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}
.pagination-btn-daryaft:hover,
.pagination-btn:hover {
  background-color: #ddd;
}

.avaynil_daily_task_remainder_task_wall {
  justify-content: center;
  align-items: center;
  padding: 10px;
  margin: 10px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* افکت سه‌بعدی */
  width: fit-content;
  transition: transform 0.3s ease;
}

.avaynil_daily_task_remainder_task_wall:hover {
  transform: scale(1.02);
  /* کمی بزرگ‌تر هنگام هاور */
}

.task_form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* متن عمودی دکمه‌ها و برچسب */
.label_wall_task {
  writing-mode: vertical-lr;
  text-orientation: mixed;
  font-size: 12px;
  color: #00a88f;
}

/* فیلد تاریخ */
.input_task_date {
  height: 100px;
  width: 40px;
  text-align: center;
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 4px;
}

/* دکمه اعمال */
.apply_button {
  height: 40px;
  width: 30px;
  background-color: #00a88f;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* برچسب دیوار وظایف */
.task_label {
  color: #555;
  font-weight: bold;
  margin-top: 5px;
}

/* نسخه موبایل */
@media (max-width: 600px) {
  .input_task_date,
  .apply_button {
    height: 90px;
    width: 30px;
    font-size: 10px;
  }

  .label_wall_task {
    font-size: 10px;
  }

  .avaynil_daily_task_remainder_task_wall {
    padding: 6px;
  }
}

/*************************************** مودال فاکتور*****/
/************************daily task **/
/* بک‌گراند و کانتینر مودال */
.avaynil_daily_task_remainder_modal-daryaft-form {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  /* همیشه فلکس */
  justify-content: center;
  align-items: center;
  z-index: 11000;
  perspective: 1000px;
  /* پنهان کردن با opacity و pointer-events برای انیمیشن نرمتر */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.avaynil_daily_task_remainder_modal-daryaft-form.show {
  opacity: 1;
  pointer-events: auto;
}

.avaynil_daily_task_remainder_modal-daryaft-form2 {
  background: #fff;
  border-radius: 20px;
  padding: 30px;
  width: 100%;
  max-width: 90%;
  max-height: 90%; /* یا هر ارتفاع دلخواه */
  overflow-y: auto; /* اضافه کردن اسکرول عمودی */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3),
    inset 0 0 50px rgba(0, 206, 209, 0.3);
}

.avaynil_daily_task_remainder_modal-daryaft-form2.show {
  opacity: 1;
  pointer-events: auto;
}
.avaynil_daily_task_remainder_modal-daryaft-form_1 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  /* همیشه فلکس */
  justify-content: center;
  align-items: center;
  z-index: 9999;
  perspective: 1000px;
  /* پنهان کردن با opacity و pointer-events برای انیمیشن نرمتر */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.avaynil_daily_task_remainder_modal-daryaft-form_1.show {
  opacity: 1;
  pointer-events: auto;
}
.avaynil_daily_task_remainder_modal-daryaft-form2_1 {
  background: #fff;
  border-radius: 20px;
  padding: 30px;
  width: 50%;
  max-width: 40%;
  /* max-height: 100%; یا هر ارتفاع دلخواه */
  overflow-y: auto; /* اضافه کردن اسکرول عمودی */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3),
    inset 0 0 50px rgba(0, 206, 209, 0.3);
}

.avaynil_daily_task_remainder_modal-daryaft-form2_1.show {
  opacity: 1;
  pointer-events: auto;
}
/* تبلت (حداکثر عرض 1024px) */
@media (max-width: 1024px) {
  .avaynil-progress-container {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 10px;
    gap: 12px;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    width: 100%;
    align-items: start;
    justify-content: right;
  }
  .avaynil_daily_task_remainder_modal-daryaft-form2_1 {
    width: 60%;
    max-width: 60%;
    padding: 10px;
  }
  .avaynil_daily_task_remainder_modal-daryaft-form2_1 label {
    display: inline-block;
    font-weight: 400;
    font-size: 8px;
  }
  .avaynil_daily_task_remainder_modal-daryaft-form_1 .exit-btn {
    display: inline-block;
    font-weight: 400;
    font-size: 8px;
  }

  .avaynil_daily_task_remainder_modal-daryaft-form2_1 span {
    display: inline-block;
    font-weight: 400;
    font-size: 8px;
  }
  .avaynil_daily_task_remainder_modal-daryaft-form_1 .value {
    font-weight: 200;
    font-size: 10px;
  }
  .avaynil_daily_task_remainder_modal-daryaft-form_1 label {
    font-weight: 200;
    font-size: 10px;
  }
  #personalname {
    font-weight: 200;
    font-size: 10px;
  }
}

/* موبایل (حداکثر عرض 768px) */
@media (max-width: 768px) {
  .avaynil-progress-container {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 10px;
    gap: 12px;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    width: 100%;
    align-items: start;
    justify-content: right;
  }
  .avaynil_daily_task_remainder_modal-daryaft-form2_1 {
    width: 80%;
    max-width: 80%;
    padding: 10px;
    border-radius: 15px;
  }
  avaynil_daily_task_remainder_modal-daryaft-form2_1 label {
    display: inline-block;
    font-weight: 400;
    font-size: 8px;
  }
  avaynil_daily_task_remainder_modal-daryaft-form2_1 span {
    display: inline-block;
    font-weight: 400;
    font-size: 8px;
  }
  .avaynil_daily_task_remainder_modal-daryaft-form_1 .value {
    font-weight: 200;
    font-size: 10px;
  }
  #personalname {
    font-weight: 200;
    font-size: 10px;
  }
}

/* موبایل خیلی کوچک (حداکثر عرض 480px) */
@media (max-width: 480px) {
  .avaynil_daily_task_remainder_modal-daryaft-form2_1 {
    width: 80%;
    max-width: 80%;
    padding: 10px;
    border-radius: 10px;
  }
  #personalname {
    font-weight: 200;
    font-size: 10px;
  }
  avaynil_daily_task_remainder_modal-daryaft-form2_1 label {
    display: inline-block;
    font-weight: 400;
    font-size: 8px;
  }
  avaynil_daily_task_remainder_modal-daryaft-form2_1 span {
    display: inline-block;
    font-weight: 400;
    font-size: 8px;
  }
  .avaynil_daily_task_remainder_modal-daryaft-form_1 .value {
    font-weight: 200;
    font-size: 10px;
  }
}

avaynil_daily_task_remainder_modal-daryaft-form_1 label {
  display: inline-block;
  font-weight: 600;
  color: #444;
  margin-left: 5px;
  min-width: 90px; /* یکدست شدن ستون لیبل‌ها */
}

/* مقدارها */
.avaynil_daily_task_remainder_modal-daryaft-form_1 .value {
  display: inline-block;
  font-weight: 400;
  color: #00695c;
  background: #f1f8f6;
  padding: 3px 8px;
  border-radius: 6px;
}

/* ردیف‌ها */
.avaynil_daily_task_remainder_modal-daryaft-form_1 .row {
  border-bottom: 1px dashed #ddd;
  padding-bottom: 8px;
  margin-bottom: 8px;
}
.avaynil_daily_task_remainder_modal-daryaft-form_1 .row:last-child {
  border-bottom: none;
}
/* پیش‌نمایش تصویر */
#data-image_preview-daryaft img {
  max-width: 100%;
  border-radius: 8px;
  border: 1px solid #ddd;
  margin-top: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
.preview-img-war {
  width: 40px;
  height: 40px;
  border: 1px solid #ccc;
  padding: 2px;
  /* border-radius: 50%; */
  cursor: zoom-in;
}

/* لایت‌باکس */
.lightbox {
  display: none;
  position: fixed;
  z-index: 18000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
}

.lightbox-content {
  display: block;
  margin: auto;
  max-width: 50vw; /* نصف عرض صفحه */
  max-height: 80vh;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.close {
  position: absolute;
  top: 20px;
  right: 35px;
  font-size: 40px;
  color: #fa0505;
  cursor: pointer;
}

/* بزرگ شدن هنگام Hover */
#data-image_preview-daryaft img:hover {
  transform: scale(1.5); /* 20% بزرگ‌تر */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

.exit-btn {
  background-color: #e53935;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.exit-btn:hover {
  background-color: #d32f2f;
  transform: scale(1.05);
}

.avaynil_modal_close_btn {
  position: absolute;
  top: 15px;
  left: 20px;
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  background-color: #ff4d6d;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  line-height: 35px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  z-index: 9999;
}

.avaynil_modal_close_btn:hover {
  background-color: #ff1f4b;
  transform: scale(1.1) rotate(10deg);
}

/************************daily task **/
/* بک‌گراند و کانتینر مودال */

/************************daily task **/
/* بک‌گراند و کانتینر مودال */
.avaynil_daily_task_remainder_modal-overlay-personel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  /* همیشه فلکس */
  justify-content: center;
  align-items: center;
  z-index: 9999;
  perspective: 1000px;
  /* پنهان کردن با opacity و pointer-events برای انیمیشن نرمتر */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.avaynil_daily_task_remainder_modal-overlay-personel.show {
  opacity: 1;
  pointer-events: auto;
}

.avaynil_daily_task_remainder_modal-personel {
  background: #fff;
  border-radius: 20px;
  padding: 30px;
  width: 600px;
  max-width: 90%;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3),
    inset 0 0 50px rgba(0, 206, 209, 0.3);
  transform-style: preserve-3d;
  transform: rotateX(15deg);
  transition: transform 0.3s ease;
}

.avaynil_daily_task_remainder_modal-personel.show {
  transform: rotateX(0);
}

.avaynil_daily_task_remainder_modal-buttons-personel {
  margin-top: 20px;
  text-align: right;
}

.avaynil_daily_task_remainder_save-btn-personel,
.avaynil_daily_task_remainder_cancel-btn-personel {
  border: none;
  color: white;
  padding: 10px 20px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  margin-left: 10px;
  transition: background 0.3s ease;
}

.avaynil_daily_task_remainder_save-btn-personel {
  background: #00ced1;
  box-shadow: 0 4px 15px rgba(0, 206, 209, 0.7);
}

.avaynil_daily_task_remainder_cancel-btn-personel {
  background: #ed316f;
  box-shadow: 0 4px 15px rgba(216, 93, 109, 0.7);
}

.avaynil_daily_task_remainder_save-btn-personel:hover {
  background: #009c9f;
}

.avaynil_daily_task_remainder_cancel-btn-personel:hover {
  background: #7d394d;
}

/* بک‌گراند و کانتینر مودال */
.avaynil_daily_task_remainder_modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  /* همیشه فلکس */
  justify-content: center;
  align-items: center;
  z-index: 9999;
  perspective: 1000px;
  /* پنهان کردن با opacity و pointer-events برای انیمیشن نرمتر */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.avaynil_daily_task_remainder_modal-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.avaynil_daily_task_remainder_modal {
  background: #fff;
  border-radius: 20px;
  padding: 30px;
  width: 450px;
  max-width: 90%;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3),
    inset 0 0 50px rgba(0, 206, 209, 0.3);
  transform-style: preserve-3d;
  transform: rotateX(15deg);
  transition: transform 0.3s ease;
}

.avaynil_daily_task_remainder_modal.show {
  transform: rotateX(0);
}

.avaynil_daily_task_remainder_modal h2 {
  margin-top: 0;
  color: #007b7f;
}

.avaynil_daily_task_remainder_modal-personel textarea {
  width: 100%;
  height: 120px;
  border-radius: 12px;
  border: 1.5px solid #00ced1;
  padding: 10px;
  font-size: 16px;
  resize: vertical;
}

.avaynil_daily_task_remainder_modal textarea {
  width: 100%;
  height: 120px;
  border-radius: 12px;
  border: 1.5px solid #00ced1;
  padding: 10px;
  font-size: 16px;
  resize: vertical;
}

.avaynil_daily_task_remainder_modal-buttons {
  margin-top: 20px;
  text-align: right;
}

.avaynil_daily_task_remainder_draf-btn,
.avaynil_daily_task_remainder_save-btn,
.avaynil_daily_task_remainder_cancel-btn {
  border: none;
  color: white;
  padding: 10px 20px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  margin-left: 10px;

  transition: background 0.3s ease;
}

.avaynil_daily_task_remainder_draf-btn {
  background: #00ced1;
  box-shadow: 0 4px 15px rgba(0, 206, 209, 0.7);
}

.avaynil_daily_task_remainder_save-btn {
  background: #ed22df;
  box-shadow: 0 4px 15px rgba(245, 70, 198, 0.7);
}

.avaynil_daily_task_remainder_cancel-btn {
  background: #f5072b;
  box-shadow: 0 4px 15px rgba(237, 79, 79, 0.7);
}

.avaynil_daily_task_remainder_draf-btn:hover {
  background: #009c9f;
}

.avaynil_daily_task_remainder_save-btn:hover {
  background: #890280;
}

.avaynil_daily_task_remainder_cancel-btn:hover {
  background: #840115;
}
.label_daily_task {
  writing-mode: vertical-rl; /* متن عمودی */
  text-orientation: mixed;
  font-size: 11px;
  font-weight: bold;
  color: #444;
  padding: 2px 0;

  /* افکت برجسته روی متن */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25),
    /* سایه تیره نرم */ -1px -1px 2px rgba(255, 255, 255, 0.6); /* هایلایت روشن */

  transition: all 0.3s ease;
  cursor: default;
}

/* حالت هاور برای جذابیت */
.label_daily_task:hover {
  color: #222;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3),
    -2px -2px 4px rgba(255, 255, 255, 0.7);
  transform: scale(1.05);
}

/* ریسپانسیو */
@media (max-width: 768px) {
  .label_daily_task {
    font-size: 10px;
  }

  .avaynil_daily_task_remainder_save-btn-personel,
  .avaynil_daily_task_remainder_cancel-btn-personel {
    font-size: 9px;
    font-weight: 200;
  }
}

@media (max-width: 480px) {
  .label_daily_task {
    font-size: 9px;
  }
  .avaynil_daily_task_remainder_save-btn-personel,
  .avaynil_daily_task_remainder_cancel-btn-personel {
    font-size: 9px;
    font-weight: 200;
  }
}

.avaynil_invoice_unmber_search {
  width: 100%;
}

/*************************************************/
.avaynil-form_invoice_unmber {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f9f9f9;
  padding: 10px 12px;
  border-radius: 12px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  width: 100%;
}

.avaynil-form_invoice_unmber label {
  white-space: nowrap;
  font-size: 14px;
  color: #333;
}

.avaynil-form_invoice_unmber input[type="number"] {
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 14px;
  width: 120px;
}

.avaynil-form_invoice_unmber button {
  padding: 6px 12px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.avaynil-form_invoice_unmber button:hover {
  background-color: #218838;
}
.discription_warehouse_Modal {
  padding: 6px 12px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.discription_warehouse_Modal:hover {
  background-color: #218838;
}

/* بقیه استایل‌ها مانند چک‌باکس و container همانطور که هست */
/**************************************************************/
.avaynil_beautiful-plus-button {
  background-color: #c5079c;
  color: white;
  font-size: 20px;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
}

.avaynil_beautiful-plus-button:hover {
  transform: scale(1.1);
}

/* چک‌باکس‌ها */
.avaynil_daily_task_remainder_task-container-top {
  position: relative;
  /* برای مرجع موقعیت دکمه */
  width: 100%;
  margin-bottom: 20px;
}
.tab-button-container {
  display: flex;
  flex-wrap: wrap; /* ریسپانسیو */
  padding: 5px;
  width: 100%;
  gap: 10px;
  box-sizing: border-box;
}

/* دکمه‌های تب */
.tab-button-container button {
  background: linear-gradient(
    135deg,
    #f9f9f9,
    #e6e6e6
  ); /* گرادینت کلاسیک و ملایم */
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 5px 8px;
  font-size: 13px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15),
    -2px -2px 6px rgba(255, 255, 255, 0.6); /* سایه ظریف و ملایم */
}

/* حالت هاور */
.tab-button-container button:hover {
  background: linear-gradient(135deg, #ededed, #dcdcdc);
  transform: translateY(-2px);
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2),
    -3px -3px 8px rgba(255, 255, 255, 0.6);
}

/* حالت فعال */
.tab-button-container button.active {
  background: linear-gradient(
    135deg,
    #d4e6f1,
    #a9cce3
  ); /* رنگ ملایم آبی کلاسیک */
  color: #1a5276;
  border-color: #7fb3d5;
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.15),
    inset -2px -2px 5px rgba(255, 255, 255, 0.5);
  transform: scale(0.98);
}

/* ریسپانسیو */
@media (max-width: 768px) {
  .tab-button-container button {
    flex: 1 1 45%;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .tab-button-container button {
    flex: 1 1 100%;
  }
}

@media (max-width: 600px) {
  .avaynil-progress-container {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 10px;
    gap: 12px;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    width: 100%;
    align-items: start;
    justify-content: right;
  }
  .avaynil_beautiful-plus-button {
    bottom: -12px;
    left: -12px;
    width: 24px;
    height: 24px;
    font-size: 12px;
  }

  .avaynil-form_invoice_unmber input[type="number"] {
    font-size: 10px;
    width: 100%;
  }
}

/* چک‌باکس‌ها */
.avaynil_daily_task_remainder_task-container {
  width: 100%;
  gap: 5px;
  padding: 10px;
  background: linear-gradient(135deg, #fdfdfd, #fdfdfd);
  border-radius: 25px;
  margin: 10px 0;

  /* سایه زیبا */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08),  /* سایه اصلی ملایم */
              0 2px 6px rgba(0, 0, 0, 0.05);   /* سایه ثانویه برای عمق بیشتر */
  transition: all 0.3s ease;
}

.avaynil_daily_task_remainder_task-container_all {
  width: 100%;
  gap: 5px;
  padding: 10px;
  background: linear-gradient(135deg, #fdfdfd, #fdfdfd);
  border-radius: 25px;
  margin: 10px 0;
  border: 2px solid #999;
  /* box-shadow: 0 10px 30px rgba(61, 61, 61, 0.4);  */
}
/* 
  .avaynil_daily_task_remainder_task_items_seler {
    border-right: 5px solid rgb(5, 134, 246);
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;

  } */
/* کلاس پایه برای استایل کلی */
.avaynil_border {
  border: 2px solid;
  border-radius: 8px;
  padding: 8px 12px;
  background-color: #fff; /* پس‌زمینه روشن برای کنتراست */
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;

  /* افکت سه‌بعدی */
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2),
    /* سایه بیرونی */ -2px -2px 6px rgba(255, 255, 255, 0.6); /* هایلایت روشن */
}

/* هاور */
.avaynil_border:hover {
  transform: translateY(-2px);
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.25),
    -3px -3px 8px rgba(255, 255, 255, 0.7);
}

/* رنگ‌ها */
.avaynil_border.brown {
  border-color: #a52a2a;
}
.avaynil_border.blue {
  border-color: #1e90ff;
}
.avaynil_border.purple {
  border-color: #8a2be2;
}

.avaynil_border.yellow {
  border-color: #ffd700;
}

.avaynil_border.green {
  border-color: #32cd32;
}

.avaynil_border.turquoise {
  border-color: #ff6fcf;
}

.avaynil_border.red {
  border-color: #e63946;
}

/* کلاس پایه */
/* کلاس پایه برای لبه سه‌بعدی سمت راست */
.avaynil_task_border {
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 3px;

  background: linear-gradient(to left, transparent 6px, transparent 6px) right
    top / 6px 100% no-repeat;

  box-shadow: inset -2px 0px 3px rgba(255, 255, 255, 0.6),
    inset -4px 0px 6px rgba(0, 0, 0, 0.15), 2px 2px 6px rgba(0, 0, 0, 0.2);
}

/* رنگ‌ها (براساس ثابت‌های PHP شما) */
.avaynil_task_border.brown {
  background: linear-gradient(
      to left,
      #a52a2a 0px,
      rgba(211, 13, 95, 0.6) 6px,
      transparent 6px
    )
    right top / 6px 100% no-repeat;
}
.avaynil_task_border.blue {
  background: linear-gradient(
      to left,
      #1e90ff 0px,
      rgba(30, 144, 255, 0.6) 6px,
      transparent 6px
    )
    right top / 6px 100% no-repeat;
}

.avaynil_task_border.purple {
  background: linear-gradient(
      to left,
      #8a2be2 0px,
      rgba(138, 43, 226, 0.6) 6px,
      transparent 6px
    )
    right top / 6px 100% no-repeat;
}

.avaynil_task_border.yellow {
  background: linear-gradient(
      to left,
      #ffd700 0px,
      rgba(255, 215, 0, 0.6) 6px,
      transparent 6px
    )
    right top / 6px 100% no-repeat;
}

.avaynil_task_border.green {
  background: linear-gradient(
      to left,
      #32cd32 0px,
      rgba(50, 205, 50, 0.6) 6px,
      transparent 6px
    )
    right top / 6px 100% no-repeat;
}

.avaynil_task_border.turquoise {
  background: linear-gradient(
      to left,
      #ff6fcf 0px,
      rgba(255, 111, 207, 0.6) 6px,
      transparent 6px
    )
    right top / 6px 100% no-repeat;
}

.avaynil_task_border.red {
  background: linear-gradient(
      to left,
      #e63946 0px,
      rgba(230, 57, 70, 0.6) 6px,
      transparent 6px
    )
    right top / 6px 100% no-repeat;
}

/* ریسپانسیو */
@media (max-width: 768px) {
  .avaynil_task_border {
    border-radius: 6px;
    padding: 4px;
  }
}

@media (max-width: 480px) {
  .avaynil_task_border {
    border-radius: 4px;
    padding: 2px;
  }
}

/* 
  .avaynil_daily_task_remainder_task_items_warehouse {
    border-right: 5px solid rgb(107, 109, 110);
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;

  } */

/* 
  .avaynil_daily_task_remainder_task_items_warehouse_hlp {
    border-right: 5px solid rgb(214, 85, 247);
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;

  } */

.avaynil_daily_task_remainder_task_items {
  border-right: 5px solid #f44336;
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
}

.avaynil_daily_task_remainder_task_items-personel {
  border-right: 5px solid #00a88f;
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
}

.avaynil_daily_task_remainder_task_items-personel-sending {
  border-right: 5px solid #e92dc9;
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
}

.task-item-personel-sending {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
}

.task-item-personel {
  display: flex;
}

.avaynil_avatar_wrapper {
  position: relative;
  display: inline-block;
}

.avaynil_daily_task_remainder_task-item-personel2-get-task {
  border-radius: 5px;
  padding: 2px;
  margin: 2px;
  align-items: center;
  align-items: center;
  font-weight: 200;
  font-size: 10px;
  cursor: pointer;
  user-select: none;
  max-width: 150px;
  word-wrap: break-word; /* شکستن متن */
  word-break: break-word; /* برای اطمینان بیشتر */
}

.avaynil_daily_task_remainder_task-item-personel2 {
  border-radius: 5px;
  padding: 2px;
  margin: 2px;
  align-items: center;
  align-items: center;
  font-weight: 200;
  font-size: 10px;
  cursor: pointer;
  user-select: none;
  max-width: 150px;
  word-wrap: break-word; /* شکستن متن */
  word-break: break-word; /* برای اطمینان بیشتر */
}

.avaynil_daily_task_remainder_task-item-personel-task {
  background: #ffffff;
  padding: 2px 2px;
  margin: 2px;

  /* box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.1),
        inset 0 -3px 8px rgba(0, 0, 0, 0.06),
        0 3px 5px rgba(84, 87, 87, 0.3); */
  display: flex;
  align-items: center;

  cursor: pointer;
  /* transition: transform 0.3s ease, box-shadow 0.3s ease; */
  user-select: none;
}
.avaynil_daily_task_remainder_task-item-personel {
  background: #ffffff;
  padding: 2px 2px;
  margin: 2px;

  /* box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.1),
        inset 0 -3px 8px rgba(0, 0, 0, 0.06),
        0 3px 5px rgba(84, 87, 87, 0.3); */
  display: flex;
  align-items: center;

  cursor: pointer;
  /* transition: transform 0.3s ease, box-shadow 0.3s ease; */
  user-select: none;
}

/* 
  .avaynil_daily_task_remainder_task-item-personel:hover {
    transform: translateY(-6px);
    box-shadow:
        0 5px 10px rgba(0, 0, 0, 0.15),
        inset 0 -3px 8px rgba(0, 0, 0, 0.1),
        0 14px 28px rgba(215, 217, 217, 0.6);
  } */

.avaynil_daily_task_remainder_task-item-personel2 input[type="checkbox"] {
  margin-right: 10px;
  padding: 2px;
  margin: 2px;
  width: 15px;
  height: 15px;
  accent-color: #20b2aa;
  cursor: pointer;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.avaynil_daily_task_remainder_task-item-personel2 input[type="checkbox"]:hover {
  box-shadow: 0 0 10px #20b2aa;
}

/********************************/

.avaynil_daily_task_remainder_task-item {
  background: #ffffff;
  padding: 3px 2px;
  border-radius: 5px;
  margin: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), inset 0 -3px 8px rgba(0, 0, 0, 0.06),
    0 3px 5px rgba(84, 87, 87, 0.3);
  display: flex;
  align-items: center;
  font-weight: 200;
  font-size: 10px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  user-select: none;
}

.avaynil_daily_task_remainder_task-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15),
    inset 0 -3px 8px rgba(0, 0, 0, 0.1), 0 14px 28px rgba(215, 217, 217, 0.6);
}

.avaynil_daily_task_remainder_task-item input[type="checkbox"] {
  margin-right: 10px;
  padding: 2px;
  margin: 2px;
  width: 15px;
  height: 15px;
  accent-color: #20b2aa;
  cursor: pointer;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.avaynil_daily_task_remainder_task-item input[type="checkbox"]:hover {
  box-shadow: 0 0 10px #20b2aa;
}

.avaynil_daily_task_remainder_task-container h6 {
  font-size: 10px;
}

/* استایل ریسپانسیو برای موبایل و تبلت */
@media (max-width: 1024px) {
  .avaynil_daily_task_remainder_modal {
    width: 90%;
    padding: 5px;
  }

  .avaynil_daily_task_remainder_modal textarea {
    height: 100px;
    font-size: 14px;
    padding: 8px;
  }

  .avaynil_daily_task_remainder_modal h4 {
    font-size: 10px;
  }

  .avaynil_daily_task_remainder_save-btn,
  .avaynil_daily_task_remainder_cancel-btn {
    padding: 8px 16px;
    font-size: 14px;
  }

  .avaynil_daily_task_remainder_task-container {
    padding: 5px;
  }

  .avaynil_daily_task_remainder_task-container h6 {
    font-size: 8px;
  }

  .avaynil_daily_task_remainder_task-item {
    padding: 2px 5px;
    font-size: 8px;
  }

  .avaynil_daily_task_remainder_task-item input[type="checkbox"] {
    width: 8px;
    height: 8px;
    margin-right: 10px;
  }
}

@media (max-width: 600px) {
  .avaynil_daily_task_remainder_modal {
    padding: 10px;
  }

  .avaynil_daily_task_remainder_modal h4 {
    font-size: 9px;
  }

  .avaynil_daily_task_remainder_modal textarea {
    font-size: 8px;
    height: 90px;
  }

  .avaynil_daily_task_remainder_save-btn,
  .avaynil_daily_task_remainder_cancel-btn {
    padding: 7px 12px;
    font-size: 13px;
  }

  .avaynil_daily_task_remainder_task-item {
    padding: 2px 5px;
    font-size: 8px;
  }

  .avaynil_daily_task_remainder_task-item input[type="checkbox"] {
    width: 7px;
    height: 7px;
    margin-right: 2px;
  }
}

.hand-icon {
  font-size: 20px;
  color: orange;
  animation: shake 1s infinite;
}

@keyframes shake {
  0% {
    transform: translate(1px, 0);
  }

  50% {
    transform: translate(-1px, 0);
  }

  100% {
    transform: translate(1px, 0);
  }
}

/********************************/
.hand-icon-command {
  font-size: 20px;
  color: orange;
  animation: shake 1s infinite;
}

/**************************/
.invoice_data_get {
  display: inline-block;
  padding: 4px 10px;
  margin-right: 5px;
  font-weight: bold;
  color: #2c3e50;
  background-color: #e8f0fe;
  border-radius: 6px;
  font-size: 0.95rem;
  min-width: 60px;
  text-align: right;
  direction: rtl;
}

.modal-section {
  margin-bottom: 20px;
  padding: 15px;
  background: #f9f9f9;
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
}

.info-box {
  flex: 1;
  margin: 10px;
}

#Salesman_Contact {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.modal-input {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.radio-group {
  display: flex;
  gap: 20px;
  margin-bottom: 10px;
}

.avaynil-items-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 0.9rem;
  direction: rtl;
}

.avaynil-items-table thead {
  background-color: #f3f3f3;
  font-weight: bold;
}

.avaynil-items-table th,
.avaynil-items-table td {
  border: 1px solid #ccc;
  padding: 6px 8px;
  text-align: center;
  unicode-bidi: embed;
}

.avaynil_invoice_number_modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 0;
  font-size: 12px;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.avaynil_invoice_number_modal-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.avaynil_invoice_number_modal {
  background: #fff;
  border-radius: 10px;
  padding: 25px;
  width: 90%;
  max-width: 90%;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3),
    inset 0 0 50px rgba(0, 206, 209, 0.2);
  transform-style: preserve-3d;
  transform: rotateX(15deg);
  transition: transform 0.3s ease;
  overflow-y: auto;
  max-height: 90vh;
  direction: rtl;
}

.avaynil_invoice_number_modal.show {
  transform: rotateX(0);
}

/**********************************/
.avaynil_invoice_number_modal-overlay_acc {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.avaynil_invoice_number_modal-overlay_acc.show {
  opacity: 1;
  pointer-events: auto;
}

.avaynil_invoice_number_modal_acc {
  background: #fff;
  border-radius: 10px;
  padding: 25px;
  width: 90%;
  max-width: 90%;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3),
    inset 0 0 50px rgba(0, 206, 209, 0.2);
  transform-style: preserve-3d;
  transform: rotateX(15deg);
  transition: transform 0.3s ease;
  overflow-y: auto;
  max-height: 90vh;
  direction: rtl;
}

.avaynil_invoice_number_modal_acc.show {
  transform: rotateX(0);
}

/**********************************/
.avaynil_invoice_number_modal-overlay_wacc {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none; /* مخفی به صورت پیش‌فرض */
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.avaynil_invoice_number_modal-overlay_wacc.show {
  display: flex; /* نمایش */
  opacity: 1;
  pointer-events: auto;
}

.avaynil_invoice_number_modal_wacc {
  background: #fff;
  border-radius: 10px;
  padding: 5px;
  width: 100%;
  max-width: 1000px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3),
    inset 0 0 50px rgba(0, 206, 209, 0.2);
  transform-style: preserve-3d;
  transform: rotateX(15deg);
  transition: transform 0.3s ease, opacity 0.3s ease;
  overflow-y: auto;
  max-height: 100%;
  direction: rtl;
  opacity: 0;
}

.avaynil_invoice_number_modal_wacc.show {
  transform: rotateX(0);
  opacity: 1;
}

@media (max-width: 1024px), (max-width: 768px) {
  .avaynil_invoice_number_modal_wacc,
  .avaynil_invoice_number_modal-overlay_wacc {
    max-height: 100% !important;
  }
}

/**********************************************
  /**********************************************/
.avaynil_modal-log_invoice_number {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10500; /* مقدار بالا برای نمایش روی همه مودال‌ها */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.avaynil_modal-log_invoice_number.show {
  opacity: 1;
  pointer-events: auto;
}

/****************************************/

.avaynil_invoice_number_modal-buttons {
  margin-top: 20px;
  text-align: right;
  display: flex;
}
.avaynil_invoice_number_modal-buttons_acc {
  margin-top: 20px;
  text-align: right;
  display: flex;
}
.avaynil_invoice_number_return-btn,
.avaynil_invoice_number_save-btn,
.avaynil_invoice_number_cancel-btn {
  border: none;
  color: white;
  padding: 10px 20px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 400;
  font-size: 12px;
  margin-left: 10px;
  transition: background 0.3s ease;
}

.avaynil_invoice_number_return-btn {
  background: #cc0cf3;
  box-shadow: 0 4px 15px rgba(235, 88, 240, 0.7);
}

.avaynil_invoice_number_return-btn:hover {
  background: #7c0876;
}

.avaynil_invoice_number_save-btn {
  background: #00ced1;
  box-shadow: 0 4px 15px rgba(0, 206, 209, 0.7);
}

.avaynil_invoice_number_cancel-btn {
  background: #ed316f;
  box-shadow: 0 4px 15px rgba(216, 93, 109, 0.7);
}

.avaynil_invoice_number_save-btn:hover {
  background: #009c9f;
}

.avaynil_invoice_number_cancel-btn:hover {
  background: #7d394d;
}

/* ریسپانسیو برای موبایل */
@media screen and (max-width: 768px) {
  .avaynil_invoice_number_modal {
    width: 95%;
    padding: 12px;
    font-size: 0.85rem;
    /* فونت کوچکتر */
  }

  .avaynil_invoice_number_modal-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .avaynil_invoice_number_modal-buttons_acc {
    flex-direction: column;
    align-items: stretch;
  }
  .avaynil_invoice_number_save-btn,
  .avaynil_invoice_number_cancel-btn {
    width: 100%;
    font-size: 0.85rem;
    padding: 8px 0;
  }
}

/*****************************/
.avaynil-invoice-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
  margin: 2px 0;
  width: 100%;
}

.avaynil-form_invoice_unmber_acc {
  width: 300px;
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
  font-size: 12px;
}

.avaynil-form_invoice_unmber_acc:hover {
  transform: translateY(-3px);
}

.avaynil-form_invoice_unmber_acc label {
  display: block;
  margin-bottom: 6px;
  color: #333;
  font-weight: 500;
}

.avaynil-form_invoice_unmber_acc span {
  color: #666;
  margin-right: 5px;
}

.avaynil-form_invoice_unmber_acc button {
  margin-top: 10px;
  padding: 6px 12px;
  background: #4caf50;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.avaynil-form_invoice_unmber_acc button:hover {
  background: #388e3c;
}

/************************************/

.avaynil-box_invoice_unmber {
  border-radius: 8px;
  border: 2px dotted; /* رنگ از کلاس رنگ می‌آید */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 5px;
  position: relative;
  font-size: 12px;
  max-width: 300px;
  direction: rtl;
}

/* رنگ‌ها */
.avaynil-box_invoice_unmber.blue {
  border-color: #1e90ff;
}
.avaynil-box_invoice_unmber.green {
  border-color: #32cd32;
}
.avaynil-box_invoice_unmber.purple {
  border-color: #8a2be2;
}
.avaynil-box_invoice_unmber.yellow {
  border-color: #ffd700;
}
.avaynil-box_invoice_unmber.turquoise {
  border-color: #ff6fcf;
}
.avaynil-box_invoice_unmber.red {
  border-color: #e63946;
}

.avaynil-info_invoice_unmber {
  display: flex;
  flex-direction: column;
  margin-right: 10px;
  line-height: 1.6;
}

.invoice_unmber_btn_wac {
  margin-top: 10px;
  padding: 6px 12px;
  background: #4caf50;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.invoice_unmber_btn_acc_reject,
.invoice_unmber_btn_wacc,
.invoice_unmber_btn_acc {
  max-width: 30px;
  height: 80px;
  padding: 1px 2px;
  background: #4caf50;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.3s ease;
}
.invoice_unmber_btn_acc_reject,
.invoice_unmber_btn_wacc,
.invoice_unmber_btn_acc:hover {
  background: #388e3c;
}

.invoice_unmber_btn_pay {
  width: 80px;
  height: 30px;
  padding: 1px 2px;
  background: #4caf50;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.invoice_unmber_btn_pay:hover {
  background: #388e3c;
}

.invoice_unmber_btn_confirm {
  width: 80px;
  height: 30px;
  padding: 1px 2px;
  background: #146bcf;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.invoice_unmber_btn_confirm:hover {
  background: #036ee9;
}

/* .avaynil_info-box_acc {
    display: flex;
    gap: 20px;
    align-items: center;
  } */
/* 
  .avaynil_info-item_acc {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    text-align: center;
  } */

.avaynil_avatar_user_personel {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}
.avaynil_avatar_user_cycel {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transition: all 0.3s ease;
  position: relative;
}
.avaynil_avatar_user_sender {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.avaynil_avatar_user_sender:hover {
  transform: scale(2);
  z-index: 10;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

.avaynil_info-box_acc {
  display: flex;
  flex-direction: row;
  gap: 15px;
  margin-bottom: 10px;
  align-items: center;
}

.avaynil_info-item_acc {
  flex: 1;
}

.invoice-table-acc table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

.invoice-table-acc th,
.invoice-table-acc td {
  border: 1px solid #ccc;
  padding: 5px;
  font-size: 12px;
  text-align: center;
}

.invoice-table-acc th {
  background: #2d89ef;
  color: white;
}

.avaynil_header_countiner {
  direction: rtl;
  text-align: right;
  width: 100%;
  border-top: 10px solid #b6f3d8;
  border-radius: 8px;
  padding: 4px;
  background-color: #f2fffb;
  margin: auto;
}

.avaynil_th_span {
  font-size: 12px;
  font-weight: bold;
  color: #444;
  gap: 5px;
  text-align: right;
}

.avaynil_th1_span {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  gap: 5px;
  text-align: right;
}

.avaynil_td_span {
  font-size: 13px;
  color: rgb(22, 64, 204);
  line-height: 1.5;
  gap: 5px;
  text-align: right;
}

.avaynil_td1_span {
  font-size: 13px;
  color: rgb(22, 64, 204);
  line-height: 1.5;
  gap: 5px;
  text-align: right;
}

.avaynil_lable_btn {
  font-size: 10px;
}
.avaynil_item_thead {
  font-size: 13px;
  font-weight: bold;
}
.avaynil_item_table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  align-items: center;
}
.avaynil_item_tbody {
  font-size: 13px;
}

.avaynil_item_warehouse-row {
  background: #f9f9f9;
  font-size: 13px;
  color: #555;
  text-align: right;
}

.avaynil_item_Quantity-row {
  background: #cfcfce;
  font-size: 13px;
  color: #0f0f0f;
  text-align: right;
}

.avaynil_modal_project {
  display: flex;
  gap: 5px;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 10px 15px;
  background: linear-gradient(135deg, #f9f9f9, #eaeaea);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  color: #333;
  display: inline-block;
  min-width: 100%;
  text-align: center;
}

.Contact_avatar_acc_cls {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.avatar_salerman_acc_cls {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

@media (max-width: 768px) {
  .avaynil_th_span,
  .avaynil_th1_span,
  .avaynil_td_span,
  .avaynil_lable_btn,
  .avaynil_lable_btn,
  .avaynil_item_thead,
  .avaynil_item_table,
  .avaynil_item_tbody,
  .invoice-table-acc th,
  .invoice-table-acc td,
  .avaynil_item_warehouse-row,
  .avaynil_item_Quantity-row,
  .avaynil_td1_span {
    font-size: 6px !important;
    line-height: 1.4;
  }
  /* .avaynil_modal_project{
      min-width: 80px;
      font-size: 8px !important;
      line-height: 1.4;
    padding: 4px 4px;
    } */
  .Contact_avatar_acc_cls {
    width: 40px;
    height: 40px;
  }

  .avatar_salerman_acc_cls {
    width: 40px;
    height: 40px;
  }

  .avaynil_header_countiner {
    width: 90%;
    border-top: 5px solid #b6f3d8;
    border-radius: 8px;
    padding: 1px;
    font-size: 8px;
  }
}
.quantity-red {
  background-color: #880505;
}

.quantity-green {
  background-color: #057920;
}

.price-green {
  background-color: #057920;
}

.price-blue {
  background-color: #0765f3;
}

.price-orange {
  background-color: #f36a48;
}

.price-red {
  background-color: #880505;
}
.price-black {
  background-color: #232222;
}
.leg-price-quantity {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 0;
}

.avaynil_circle_wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
/************************************ استایل راهنمای قیمت و موجودی انبار*/
.avaynil-legend-box {
  background-color: #f9f9f9;
  padding: 2px 5px;
  border-left: 5px solid #41a00a;
  border-right: 5px solid #41a00a;
  border-radius: 6px;
  font-size: 9px;
  margin-bottom: 5px;
  display: flex;
  flex-direction: column;
  max-width: auto;
  text-align: left;
  align-items: end;
  left: 0;
  margin: 0;
}

.legend-title {
  font-weight: bold;
}

.legend-horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.legend-circle {
  width: 16px;
  height: 16px;
  border: 2px dotted #ffffff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.legend-circle::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: block;
}
/****************************************/

@media (max-width: 768px) {
  .avaynil_invoice_number_modal,
  .avaynil_invoice_number_modal_acc {
    padding: 15px;
    font-size: 12px;
  }
  .leg-price-quantity {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0;
  }
  .legend-circle {
    width: 10px;
    height: 10px;
    border: 2px dotted #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .avaynil_invoice_number_modal *,
  .avaynil_invoice_number_modal_acc * {
    font-size: 10px !important;
  }

  .avaynil_invoice_number_modal table,
  .avaynil_invoice_number_modal_acc table {
    font-size: 9px;
  }

  .avaynil_invoice_number_modal button,
  .avaynil_invoice_number_modal_acc button {
    padding: 6px 10px;
    font-size: 10px;
  }

  .avaynil_invoice_number_modal input,
  .avaynil_invoice_number_modal select,
  .avaynil_invoice_number_modal_acc input,
  .avaynil_invoice_number_modal_acc select {
    font-size: 9px;
    padding: 6px 8px;
  }
  .file-upload-wrapper-Warehouse,
  .file-upload-wrapper_confirm_img,
  .file-QR-wrapper,
  .file-upload-wrapper {
    padding: 0;
    border-radius: 0;
  }
  .img-preview {
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }
  #note_wacc_wac {
    width: 150px !important;
  }
}
#note_wacc_wac {
  width: 250px !important;
  padding-left: 5px;
}
.img-preview {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.avaynil_sep {
  margin: 0 10px;
  color: #ff9800; /* رنگ طلایی/نارنجی */
  font-size: 18px;
  font-weight: bold;
}

.avaynil_log_invoice_number_modal {
  background: #fff;
  border-radius: 10px;
  padding: 25px;
  width: 60%;
  max-width: 60%;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3),
    inset 0 0 50px rgba(0, 206, 209, 0.2);
  transform-style: preserve-3d;
  transform: rotateX(15deg);
  transition: transform 0.3s ease;
  overflow-y: auto;
  max-height: 90vh;
  direction: rtl;
  position: relative;
  z-index: 1; /* داخل مودال نیازی به z-index بالا نیست */
}

.avaynil_log_invoice_number_modal table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  text-align: center;
  background-color: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  overflow: hidden;
}

.avaynil_log_invoice_number_modal thead {
  background: linear-gradient(90deg, #4a90e2, #007aff);
  color: white;
  font-weight: bold;
  font-size: 13px;
}

.avaynil_log_invoice_number_modal th,
.avaynil_log_invoice_number_modal td {
  padding: 10px 8px;
  border-bottom: 1px solid #e0e0e0;
}

.avaynil_log_invoice_number_modal tbody tr:last-child td {
  border-bottom: none;
}

.avaynil_log_invoice_number_modal tbody tr:hover {
  background-color: #f1f7ff;
  transform: scale(1.01);
  transition: all 0.2s ease-in-out;
}

.avaynil_log_invoice_number_modal tbody tr {
  transition: transform 0.2s;
}

.avaynil_log_invoice_number_modal td:first-child {
  font-weight: bold;
  color: #333;
}
.avaynil_log_invoice_number_modal button {
  float: left;
  margin-bottom: 10px;
  background: linear-gradient(145deg, #f0f0f3, #cacaca);
  border: none;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  font-size: 24px;
  color: #333;
  cursor: pointer;
  box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
  transition: all 0.3s ease;
  user-select: none;
}

.avaynil_log_invoice_number_modal button:hover {
  background: linear-gradient(145deg, #cacaca, #f0f0f3);
  box-shadow: inset 3px 3px 5px #bebebe, inset -3px -3px 5px #ffffff;
  color: #007aff;
  transform: scale(1.1);
}

/* استایل اصلی که نوشتی بدون تغییر می‌مونه */

/* حالت ریسپانسیو برای موبایل */
@media screen and (max-width: 768px) {
  .avaynil_log_invoice_number_modal {
    width: 95% !important;
    max-width: 95% !important;
    padding: 15px;
    font-size: 10px; /* کل متن مودال */
    transform: none; /* روی موبایل چرخش سه‌بعدی حذف میشه */
  }

  .avaynil_log_invoice_number_modal table {
    font-size: 10px !important; /* جدول کوچکتر */
  }

  .avaynil_log_invoice_number_modal thead {
    font-size: 10px !important;
  }

  .avaynil_log_invoice_number_modal th,
  .avaynil_log_invoice_number_modal td {
    padding: 6px 4px !important; /* سلول‌های جمع‌وجورتر */
  }

  .avaynil_log_invoice_number_modal button {
    width: 28px;
    height: 28px;
    font-size: 18px;
  }
}
/********************************/
.btn-delete-table {
  background: linear-gradient(135deg, #ff4e50, #f44336);
  color: white;
  padding: 5px 8px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(244, 67, 54, 0.3);
}

.btn-delete-table:hover {
  background: linear-gradient(135deg, #f44336, #d32f2f);
  box-shadow: 0 6px 14px rgba(244, 67, 54, 0.5);
}

.btn-delete-table i {
  margin-left: 8px;
}
/************************************/
.invoice-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: white;
  padding: 20px;
  width: 90%;
  max-width: 600px;
  border-radius: 10px;
  direction: rtl;
}

.close-btn {
  float: left;
  cursor: pointer;
  font-size: 20px;
}
.file-upload-wrapper-Warehouse,
.file-upload-wrapper_confirm_img,
.file-upload-wrapper {
  position: relative;
  display: inline-block;
  cursor: pointer;
  padding: 5px 10px;
  font-weight: 100;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(118, 75, 162, 0.4);
  transition: background 0.3s ease;
  user-select: none;
}
.file-QR-wrapper {
  position: relative;
  display: inline-block;
  cursor: pointer;
  padding: 5px 10px;
  font-weight: 100;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(3, 240, 43, 0.4);
  transition: background 0.3s ease;
  user-select: none;
}
.file-QR-wrapper:hover {
  background: linear-gradient(135deg, #08580c, #48bd05);
}
.file-upload-wrapper:hover {
  background: linear-gradient(135deg, #764ba2, #667eea);
}
.file-upload-wrapper-Warehouse:hover {
  background: linear-gradient(135deg, #4b69a2, #667eea);
}
.file-upload-wrapper-Warehouse {
  background: linear-gradient(135deg, #206bf8, #3378f8);
  color: rgb(240, 209, 209);
}
.file-upload-wrapper {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}
.file-upload-wrapper_confirm_img {
  background: linear-gradient(135deg, #66ea83, #165a02);
  color: rgb(240, 209, 209);
}
.file-upload-wrapper_confirm_img:hover {
  background: linear-gradient(135deg, #b6f3b6, #05ca05);
}
.file-QR-wrapper input[type="file"],
.file-upload-wrapper-Warehouse input[type="file"],
.file-upload-wrapper_confirm_img input[type="file"],
.file-upload-wrapper input[type="file"] {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.file-upload-text {
  pointer-events: none;
}

.preview-wrapper {
  display: flex;
  gap: 10px;
  margin-top: 5px;
  flex-wrap: wrap;
}
.img-box {
  position: relative;
  display: inline-block;
}
.preview-img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.remove-img {
  position: absolute;
  top: -5px;
  right: -5px;
  background: red;
  border: none;
  color: white;
  font-size: 12px;
  cursor: pointer;
  border-radius: 50%;
  padding: 2px 5px;
}
/********************************/

#discription_warehouseModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
  z-index: 11000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#discription_warehouseModal.show {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}
/* ========== مودال اصلی ========== */
/* ========== مودال اصلی ========== */
#signatureModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
  z-index: 11000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#signatureModal.show {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

/* ========== محتویات مودال ========== */
#signatureModal .modal-content {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  width: 90%;
  max-width: 900px;
  height: 85vh;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

/* ========== دکمه بستن کوچک بالا سمت چپ ========== */
#closeModal {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 8px;
  font-size: 0.8rem;
  background: #dc3545;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  z-index: 1001;
}

/* ========== کانتینر ویدئو و امضاء ========== */
#signature-container {
  position: relative;
  width: 100%;
  flex-grow: 1;
  border: 2px dashed #666;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
}

/* ویدئو و تصویر زیر امضاء */
#face-video,
#face-preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
  z-index: 1;
  border-radius: 8px;
}

/* بوم امضاء روی تصویر */
#signature-pad {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: crosshair;
  z-index: 2;
  border-radius: 8px;
  touch-action: none;
  pointer-events: auto;
}

/* ========== دکمه‌ها ========== */
#clear-signature,
#save-signature,
#avaynil_take_photo_ret {
  padding: 6px 12px;
  margin: 2px;
  width: 98%;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  z-index: 1000;
}

#clear-signature {
  background: #007bff;
  color: #fff;
}
#save-signature {
  background: #28a745;
  color: #fff;
}

/* ========== ایموجی و متن وسط صفحه ========== */
.modal-center {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.center-content {
  text-align: center;
}

.eye-large {
  opacity: 0.3;
  font-size: 15vw; /* ثابت روی موبایل و دسکتاپ */
}

.eye-text {
  opacity: 0.3;
  font-size: 1vw; /* ثابت */
  display: block;
  margin-top: 10px;
}

/* ========== ورودی موبایل و دکمه ذخیره ========== */
.mobile-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
}

.mobile-input-wrapper input {
  width: 100%;
  padding: 10px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  z-index: 1000;
}

.mobile-input-wrapper .btn-save {
  width: 100%;
  padding: 10px;
  font-size: 1rem;
  background-color: #28a745;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.mobile-input-wrapper .btn-save:hover {
  background-color: #218838;
}

/* ========== المان‌های مخفی ========== */
.hidden-element {
  display: none;
}

/* ========== ریسپانسیو ========== */
/* موبایل و تبلت همانند دسکتاپ */
@media (max-width: 1024px), (max-width: 768px) {
  #signatureModal .modal-content,
  #signature-container,
  #face-video,
  #face-preview,
  #signature-pad,
  .modal-center,
  .mobile-input-wrapper input,
  .mobile-input-wrapper .btn-save {
    width: 100%;
    font-size: 1rem;
  }

  .eye-large {
    font-size: 15vw;
  }
  .eye-text {
    font-size: 1vw;
  }

  #clear-signature,
  #save-signature {
    padding: 6px 12px;
    font-size: 1rem;
  }

  /* دکمه بستن کوچک ثابت بالا سمت چپ */
  #closeModal {
    top: 10px;
    left: 10px;
    padding: 4px 8px;
    font-size: 0.8rem;
  }
}

/* ===== دکمه باز کردن مودال (اختیاری) ===== */
.openSignatureBtn {
  border: none;
  background-color: transparent;
}

/* ===== R E S P O N S I V E ===== */

/* تبلت */

.Qarantty_item_seryal {
  width: 100%;
  height: 30px;
  padding: 1px;
  margin: 0;
  direction: ltr;
  text-align: left;
}
/**************/
.btn-invoice-resend {
  background-color: #ff9800; /* نارنجی */
  color: #fff; /* متن سفید */
  border: none;
}

.btn-invoice-resend:hover {
  background-color: #e68900; /* نارنجی تیره‌تر هنگام هاور */
  color: #fff;
}
/**************blacklist////*/
#blocklist-table {
  width: 100%;
  margin-top: 20px;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
}
#blocklist-table th {
  background: #2271b1;
  color: #fff;
  padding: 10px;
  text-align: center;
}
#blocklist-table td {
  text-align: center;
  padding: 8px;
}
#blocklist-table tr:hover {
  background: #f9f9f9;
}
.button {
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
  font-size: 13px;
}
.blocklist-edit {
  background: #ffc107;
  color: #fff;
}
.blocklist-delete {
  background: #dc3545;
  color: #fff;
}
.blocklist-edit:hover {
  opacity: 0.9;
}
.blocklist-delete:hover {
  opacity: 0.9;
}

/* پاپ آپ */
#blocklist-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
#blocklist-popup .popup-content {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  width: 350px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  animation: fadeIn 0.3s ease-in-out;
}
#blocklist-popup input[type="text"] {
  width: 90%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  direction: ltr;
  text-align: center;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/******************
  /* پس‌زمینه نیمه‌شفاف با افکت بلور */
#payment_status-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.65); /* نیمه تیره */
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  animation: fadeIn 0.4s ease-in-out;
}

/* محتوای پاپ‌آپ */
#payment_status-popup .payment_status-popup-content {
  background: linear-gradient(145deg, #ffffff, #f1f5f9);
  border-radius: 18px;
  padding: 30px 40px;
  width: 30%;
  max-width: 95%;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25),
    inset 0 2px 6px rgba(255, 255, 255, 0.8);
  text-align: center;
  transform: scale(0.9);
  animation: popupIn 0.35s ease forwards;
}

/* متن هشدار */
#payment_status-popup h2 {
  font-size: 16px;
  font-weight: bold;
  color: #1e293b;
  margin-bottom: 20px;
  line-height: 1.6;
}

/* دکمه‌ها */
#payment_status-popup .button {
  border: none;
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease-in-out;
  margin: 0 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* دکمه تأیید */
#payment_status-popup-save {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}
#payment_status-popup-save:hover {
  background: linear-gradient(135deg, #16a34a, #15803d);
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 15px rgba(22, 163, 74, 0.35);
}

/* دکمه کنسل */
#payment_status-popup-cancel {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}
#payment_status-popup-cancel:hover {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 15px rgba(220, 38, 38, 0.35);
}

/* انیمیشن‌ها */
@keyframes popupIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@media (max-width: 1024px), (max-width: 768px) {
  #payment_status-popup .payment_status-popup-content {
    width: 95%;
  }
}

/***************************/
/* حالت پیش‌فرض دسکتاپ */
/* حالت پیش‌فرض */
/* استایل باکس اطلاعات */
.invoice_extra_info {
  position: absolute;
  top: 0;
  display: none; /* پیش‌فرض مخفی */
  background: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  z-index: 9999999 !important; /* بالاتر از همه منوها */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  min-width: 200px;
  max-width: 300px;

  /* مقادیر اولیه */
  left: auto;
  right: 100%;
}

/* کانتینر اصلی */
.tooltip-box-get-task {
  position: relative; /* موقعیت باکس‌ها وابسته به این باشد */
}

/* نسخه موبایل */
@media (max-width: 768px) {
  .invoice_extra_info {
    min-width: 160px;
    font-size: 12px;
    padding: 6px;
  }
}
/********************/
/* کانتینر اصلی */
.invoice-status-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  direction: rtl;
  margin-bottom: 20px;
  flex-wrap: wrap; /* برای موبایل مهمه */
}

/* ساعت زنده */
.invoice-status-container .live-clock {
  font-size: 16px;
  font-weight: bold;
}

/* لیست وضعیت‌ها */
.invoice-status-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  text-align: left;
  left: 0;
}

/* عنوان */
.invoice-status-title {
  font-size: 12px;
  font-weight: bold;
  margin-left: 5px;
}

/* آیتم وضعیت */
.invoice-status-item {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 5px 0;
}

/* دایره بزرگ */
.status-circle {
  width: 20px;
  height: 20px;
  border: 2px dotted;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* دایره کوچک داخل */
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* متن وضعیت */
.status-text {
  font-size: 10px;
  font-weight: bold;
  color: #333;
}

/* 📱 موبایل */
@media (max-width: 768px) {
  .invoice-status-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .invoice-status-list {
    flex-wrap: wrap;
    gap: 8px;
    padding-right: 20px;
  }

  .invoice-status-title {
    font-size: 14px;
    margin-left: 0;
  }

  .status-text {
    font-size: 13px;
  }
}

/* 📱 موبایل کوچک */
@media (max-width: 480px) {
  .invoice-status-container {
    gap: 15px;
  }

  .invoice-status-list {
    flex-direction: column;
    align-items: flex-start;
  }

  .invoice-status-item {
    gap: 4px;
  }

  .status-circle {
    width: 16px;
    height: 16px;
  }

  .status-dot {
    width: 8px;
    height: 8px;
  }

  .status-text {
    font-size: 12px;
  }
  .tab-refresh-btn {
    font-size: 14px;
  }
}
/*******************************/
.avaynil_curentuser_avata {
  width: 60px; /* اندازه آواتار */
  height: 60px;
  border-radius: 50%; /* دایره‌ای */
  object-fit: cover; /* برش درست تصویر */
  border: 3px solid #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3),
    /* سایه بیرونی */ inset 0 2px 4px rgba(255, 255, 255, 0.5),
    /* سایه داخلی روشن برای براقیت */ inset 0 -2px 6px rgba(0, 0, 0, 0.2); /* سایه داخلی پایین */
  background: linear-gradient(145deg, #f9f9f9, #e1e1e1); /* زمینه شیک */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

/* افکت هاور */
.avaynil_curentuser_avata:hover {
  transform: scale(1.05); /* کمی بزرگ‌تر بشه */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4),
    inset 0 3px 6px rgba(255, 255, 255, 0.6),
    inset 0 -3px 8px rgba(0, 0, 0, 0.25);
}
/****************************/
.tab-refresh-btn {
  background: #e9ecef;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 20px;
  transition: all 0.2s ease-in-out;
}

.tab-refresh-btn:hover {
  background: #d0d7de;
}
.print-button {
  background: none; /* بدون پس‌زمینه */
  border: none; /* بدون بردر */
  font-size: 16px; /* اندازه بزرگ‌تر برای ایموجی */
  cursor: pointer; /* نشانگر دست هنگام hover */
  padding: 6px;
  transition: transform 0.2s ease;
}

.print-button:hover {
  transform: scale(1.2); /* افکت کوچک برای جذابیت */
}
.whatsapp-button {
  background: none; /* بدون پس‌زمینه */
  border: none; /* بدون بردر */
  font-size: 16px; /* اندازه بزرگ‌تر برای ایموجی */
  cursor: pointer; /* نشانگر دست هنگام hover */
  padding: 6px;
  transition: transform 0.2s ease;
}

.whatsapp-button:hover {
  transform: scale(1.2); /* افکت کوچک برای جذابیت */
}
/* کلاس اصلی برای ستاره‌ها */
.star-level-container {
  display: flex;
  justify-content: center; /* وسط چین افقی */
  margin-top: 8px; /* فاصله از تصویر */
  gap: 4px; /* فاصله بین ستاره‌ها */
}

/* اندازه ستاره‌ها به صورت پیش‌فرض */
.star-level-container img {
  width: 30px;
  height: 30px;
}

/* حالت تبلت (عرض صفحه کمتر از 992px) */
@media (max-width: 991px) {
  .star-level-container img {
    width: 20px !important;
    height: 20px !important;
  }

  .star-level-container {
    gap: 3px;
    margin-top: 6px;
  }
}

/* حالت موبایل (عرض صفحه کمتر از 576px) */
@media (max-width: 575px) {
  .star-level-container img {
    width: 15px !important;
    height: 15px !important;
  }

  .star-level-container {
    gap: 2px;
    margin-top: 4px;
  }
}

.shipping-info-card {
  background: #f9fafc;
  border: 1px solid #e0e4ea;
  border-radius: 16px;
  padding: 15px 20px;
  margin-top: 10px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.shipping-info-card:hover {
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.shipping-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dashed #d0d4da;
}

.shipping-item:last-child {
  border-bottom: none;
}

.shipping-item .label {
  color: #444;
  font-weight: 600;
}

.shipping-item .value {
  color: #2b7a78;
  font-weight: 500;
  direction: ltr;
}
.avaynil-container {
  max-width: 800px;
  padding: 2px;
  border-radius: 15px;
  direction: rtl;
}

.avaynil-container h2 {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}

#shippingForm {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#shippingForm input,
#shippingForm textarea {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  transition: 0.2s;
}

#shippingForm input:focus,
#shippingForm textarea:focus {
  border-color: #009688;
  outline: none;
}

#saveShipping {
  background: #009688;
  color: #fff;
  border: none;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}

#saveShipping:hover {
  background: #00796b;
}

#shippingTable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

#shippingTable th,
#shippingTable td {
  border-bottom: 1px solid #eee;
  padding: 10px;
  text-align: center;
}

.action-btn {
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 6px;
  color: white;
}

.edit-btn {
  background: #4caf50;
}

.delete-btn {
  background: #f44336;
}

/* دکمه ها */
.btn-primary,
.btn-success,
.btn-danger {
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  transition: 0.3s;
}

.btn-primary {
  background: #0073aa;
}
.btn-primary:hover {
  background: #005177;
}

.btn-success {
  background: #28a745;
}
.btn-success:hover {
  background: #1e7e34;
}

.btn-danger {
  background: #dc3545;
}
.btn-danger:hover {
  background: #a71d2a;
}

/* مودال */
.modal {
  display: none; /* مخفی به طور پیش‌فرض */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 28000;
  padding: 15px; /* فاصله از لبه موبایل */
}

.modal.show {
  display: flex; /* فعال کردن Flexbox هنگام نمایش */
}

.modal .modal-content {
  background: #fff;
  padding: 10px;
  border-radius: 10px;
  width: 90%; /* مناسب موبایل */
  max-width: 50%; /* حداکثر عرض دسکتاپ */
  max-height: 50%;
  overflow-y: auto;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* فرم مودال */
.modal .modal-form .form-group {
  margin-bottom: 15px;
}

.modal .modal-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 5px;
  color: #333;
}

.modal .modal-form input,
.modal .modal-form textarea {
  width: 100%;
  padding: 10px;
  font-size: 0.95rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  transition: 0.2s;
}

.modal .modal-form input:focus,
.modal .modal-form textarea:focus {
  outline: none;
  border-color: #0073aa;
  box-shadow: 0 0 5px rgba(0, 115, 170, 0.3);
}

/* دکمه های فرم مودال */
.modal .modal-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}

/* تنظیم برای موبایل */
@media (max-width: 480px) {
  .modal .modal-content {
    width: 95%;
    padding: 20px;
    font-size: 10px;
  }
  .modal .modal-form label {
    font-weight: 200;
    font-size: 10px;
  }
  .modal .modal-content h3 {
    font-weight: 200;
    font-size: 10px;
  }
  .modal .modal-content button {
    font-weight: 200;
    font-size: 10px;
  }
  .modal .modal-form input,
  .modal .modal-form textarea {
    font-size: 10px;
  }
  #modalShippingTable {
    font-size: 10px;
  }
  #modalShippingTable button {
    font-size: 10px;
  }
}
/* جدول */
.shipping-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  font-size: 0.95rem;
}

.shipping-table th,
.shipping-table td {
  padding: 8px 12px;
  border: 1px solid #ddd;
  text-align: center;
}

.shipping-table th {
  background: #0073aa;
  color: #fff;
}

.shipping-table tbody tr:nth-child(even) {
  background: #f6f6f6;
}

.shipping-table button {
  padding: 5px 10px;
  font-size: 0.85rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  margin: 0 2px;
  color: #fff;
}

.shipping-table .edit-modal-btn {
  background: #28a745;
}
.shipping-table .edit-modal-btn:hover {
  background: #1e7e34;
}

.shipping-table .delete-modal-btn {
  background: #dc3545;
}
.shipping-table .delete-modal-btn:hover {
  background: #a71d2a;
}

/* استایل کلی بخش گزارش CRM */
#avaynil-crm-report {
  direction: rtl;
  background: #f9fafc;
  border-radius: 20px;
  padding: 5px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  max-width: 100%;
  margin: 5px auto;
}

/* عنوان صفحه */
#avaynil-crm-report h2 {
  text-align: center;
  color: #2d3748;
  font-size: 1.8rem;
  margin-bottom: 25px;
  font-weight: 700;
}

/* بخش فیلترها */
.avaynil-filters {
  width: 100%;
}

/* لیبل‌ها */
.avaynil-filters label {
  font-weight: 600;
  color: #333;
  display: block;
  margin-bottom: 5px;
}

/* فیلدها */
.avaynil-filters select,
.avaynil-filters input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  font-size: 14px;
  background: #fdfdfd;
  transition: all 0.2s ease-in-out;
}

.avaynil-filters select:focus,
.avaynil-filters input:focus {
  border-color: #4caf50;
  box-shadow: 0 0 6px rgba(76, 175, 80, 0.3);
  background: #fff;
}

/* دکمه فیلتر */
.avaynil-filters button {
  grid-column: 1 / -1;
  justify-self: center;
  padding: 10px 30px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #4caf50, #2e7d32);
  color: white;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 10px rgba(76, 175, 80, 0.3);
}

.avaynil-filters button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(76, 175, 80, 0.4);
}

/* جدول نتایج */
#avaynil-report-result table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 25px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  transform: rotateX(0deg);
  transition: transform 0.3s;
  perspective: 1000px;
}

/* جلوه سه‌بعدی هنگام hover */
#avaynil-report-result table:hover {
  transform: rotateX(2deg) rotateY(2deg);
}

/* سلول‌ها */
#avaynil-report-result th,
#avaynil-report-result td {
  padding: 12px 10px;
  font-size: 12px;
  text-align: center;
  border-bottom: 1px solid #e5e5e5;
  transition: background 0.3s;
}

/* سرستون‌ها */
#avaynil-report-result th {
  background: linear-gradient(135deg, #4caf50, #2e7d32);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}

/* ردیف‌ها */
#avaynil-report-result tr:nth-child(even) {
  background: #f7fdf8;
}

#avaynil-report-result tr:hover {
  background: #eafbea;
  transform: scale(1.01);
}

/* واکنش‌گرا برای موبایل */
@media (max-width: 768px) {
  .avaynil-filters {
    grid-template-columns: 1fr;
  }

  #avaynil-crm-report {
    padding: 5px;
  }

  #avaynil-report-result th,
  #avaynil-report-result td {
    font-size: 12px;
    padding: 8px;
  }
}
#avaynil-crm-report {
  direction: rtl;
  background: #f8fafc;
  border-radius: 25px;
  padding: 10px;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
  max-width: 100%;
  margin: 10px auto;
}

#avaynil-crm-report h2 {
  text-align: center;
  color: #2e7d32;
  font-size: 1.9rem;
  margin-bottom: 25px;
  font-weight: 700;
}

#avaynil-crm-report .a.avaynil-filters {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* دو ستون ثابت */
  gap: 5px; /* فاصله بین فیلدها */
  background: #fff;
  padding: 5px;
  border-radius: 15px;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.05);
}
#avaynil-crm-report .filter-group label {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
  color: #333;
}

#avaynil-crm-report .filter-group {
  box-sizing: border-box;
  position: relative;
  display: flex;
  float: right;
  margin: 0 0 0 1%;
  width: 100% !important;
  padding: 10px 5px 5px;
  background: #fff;
  border: 1px solid #dcdcde;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}

#avaynil-crm-report .filter-group select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  background: #fdfdfd;
  transition: 0.2s;
}

#avaynil-crm-report .filter-group select:focus {
  border-color: #4caf50;
  box-shadow: 0 0 8px rgba(76, 175, 80, 0.3);
}

#avaynil-crm-report .filter-button-wrapper {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: 10px;
}

#avaynil-crm-report .filter-button-wrapper button {
  background: linear-gradient(135deg, #4caf50, #2e7d32);
  color: white;
  border: none;
  padding: 10px 30px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  transition: all 0.3s;
  box-shadow: 0 4px 10px rgba(76, 175, 80, 0.25);
}

#avaynil-crm-report .filter-button-wrapper button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(76, 175, 80, 0.4);
}

#avaynil-report-result {
  margin-top: 30px;
}

/* واکنش‌گرا برای موبایل */
@media (max-width: 768px) {
  #avaynil-crm-report {
    padding: 15px;
  }
  #avaynil-crm-report .filter-group label {
    font-size: 13px;
  }
  #avaynil-crm-report .filter-button-wrapper button {
    width: 100%;
  }
}
#avaynil-contact-crm-tabs {
  direction: rtl;
  max-width: 95%;
  margin: 10px auto;
  background: #f9fafc;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* هدر تب‌ها */
.avaynil-tab-header {
  display: flex;
  background: linear-gradient(135deg, #4caf50, #2e7d32);
  border-radius: 20px 20px 0 0;
  overflow: hidden;
}
/* .reminder-filter-buttons {
    display: flex;
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    } */

.avaynil-tab-link {
  flex: 1;
  text-align: center;
  background: transparent;
  color: #fff;
  border: none;
  padding: 14px 0;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.avaynil-tab-link:hover {
  background: rgba(255, 255, 255, 0.15);
}

.avaynil-tab-link.active {
  background: #fff;
  color: #2e7d32;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-shadow: inset 0 -3px 10px rgba(0, 0, 0, 0.08);
}

/* محتوای تب‌ها */
.avaynil-tab-content {
  background: #fff;
  padding: 25px;
  border-radius: 0 0 20px 20px;
}
.avaynil-tab-content-salery {
  background: #fff;
  padding: 2px;
  border-radius: 0 0 20px 20px;
}
.avaynil-tab-pane {
  width: 100%;
  display: none;
  animation: fadeIn 0.5s ease;
}

.avaynil-tab-pane.active {
  display: block;
}

/* انیمیشن ظاهر شدن */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ریسپانسیو */
@media (max-width: 768px) {
  .avaynil-tab-link {
    font-size: 13px;
    padding: 10px 0;
  }
}
#crm-table-container {
  margin-top: 30px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  overflow-x: auto;
  padding: 20px;
  transition: all 0.3s ease;
}

#crm-report-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

#crm-report-table th {
  background: linear-gradient(135deg, #43a047, #2e7d32);
  color: #fff;
  font-weight: bold;
  padding: 12px;
}

#crm-report-table td {
  padding: 10px;
  border-bottom: 1px solid #eee;
  transition: background 0.3s;
}

#crm-report-table tr:nth-child(even) {
  background: #f9f9f9;
}

#crm-report-table tr:hover {
  background: #e8f5e9;
  transform: scale(1.01);
}

.code-link {
  display: inline-flex;
  align-items: center;
  gap: 5px; /* فاصله بین آیکون و متن */
  padding: 4px 8px;
  background: #2196f3;
  color: #fff !important;
  font-size: 12px;
  font-weight: bold;
  border-radius: 4px;
  text-decoration: none;
  transition: 0.2s;
  direction: ltr; /* خیلی مهم برای جلوگیری از چرخش */
}

.code-link i {
  font-size: 14px;
}

.code-link:hover {
  background: #1976d2;
}

/* صفحه‌بندی زیبا */
#crm-pagination {
  text-align: center;
  margin: 25px 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

#crm-pagination .page-btn-crm,
#crm-pagination .nav-btn {
  background: linear-gradient(135deg, #4caf50, #2e7d32);
  color: white;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(76, 175, 80, 0.3);
}

#crm-pagination .page-btn-crm:hover,
#crm-pagination .nav-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(76, 175, 80, 0.4);
}

#crm-pagination .page-btn-crm.active {
  background: linear-gradient(135deg, #2e7d32, #1b5e20);
  box-shadow: 0 4px 15px rgba(27, 94, 32, 0.4);
}
/* --- ریسپانسیو بخش فیلترهای CRM --- */
@media (max-width: 1024px) {
  #avaynil-crm-report .avaynil-filters {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}

@media (max-width: 768px) {
  #avaynil-crm-report {
    padding: 10px;
  }

  #avaynil-crm-report .avaynil-filters {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  #avaynil-crm-report .filter-group {
    width: 100% !important;
    margin: 0 !important;
    display: block;
  }

  #avaynil-crm-report .filter-group div {
    width: 100% !important;
  }

  #avaynil-crm-report select,
  #avaynil-crm-report input {
    font-size: 14px;
  }

  #avaynil-crm-report .filter-button-wrapper button {
    width: 100%;
  }
}

/* ریسپانسیو برای موبایل */
@media (max-width: 1024px) {
  #crm-report-table {
    min-width: 900px;
  }
}

@media (max-width: 768px) {
  #crm-report-table {
    min-width: 700px;
    font-size: 12px;
  }

  #crm-report-table th,
  #crm-report-table td {
    padding: 6px 8px;
  }

  #crm-report-table td .avaynil_search_crm_contact_image {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 480px) {
  #crm-report-table {
    min-width: 600px;
    font-size: 11px;
  }

  #crm-report-table th,
  #crm-report-table td {
    padding: 4px 6px;
  }

  #crm-report-table td .avaynil_search_crm_contact_image {
    width: 25px;
    height: 25px;
  }
}
/* کانتینر جدول با اسکرول افقی */

/* کانتینر جدول */
#crm-table-container {
  width: 100%;
  overflow-x: auto; /* اسکرول افقی */
  -webkit-overflow-scrolling: touch; /* برای iOS */
  padding: 10px 0;
  box-sizing: border-box;
}

/* جدول */
#crm-report-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1200px; /* جلوگیری از فشرده شدن */
}

/* موبایل */
@media (max-width: 768px) {
  #crm-table-container {
    overflow-x: auto;
  }

  #crm-report-table {
    min-width: 700px; /* حداقل عرض جدول */
    font-size: 12px;
  }

  #crm-report-table th,
  #crm-report-table td {
    padding: 6px 8px;
    white-space: nowrap; /* جلوگیری از شکستن متن */
  }

  /* آواتار کوچک‌تر */
  .avaynil_search_crm_contact_image {
    width: 30px;
    height: 30px;
  }

  /* صفحه‌بندی قابل مشاهده */
  #crm-pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
  }
}
/* تنظیم اندازه برای select چند انتخابی */
.crm-multi-select {
  width: 100% !important; /* عرض کامل والد */
  min-height: 40px; /* حداقل ارتفاع مناسب */
}

/* اگر select2 فعال است، ارتفاع و فونت مناسب */
.select2-container.crm-multi-select .select2-selection--multiple {
  min-height: 40px;
  padding: 5px;
  font-size: 14px;
}

/* برای هر تگ انتخاب‌شده در select2 */
.select2-container.crm-multi-select .select2-selection__choice {
  font-size: 13px;
  padding: 2px 5px;
}
/* دکمه‌های صفحه‌بندی */
#crm-report-table_paginate .paginate_button {
  background: linear-gradient(145deg, #4caf50, #45a049);
  color: #fff !important;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  margin: 2px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease-in-out;
  font-weight: bold;
}

#crm-report-table_paginate .paginate_button:hover {
  background: linear-gradient(145deg, #45a049, #4caf50);
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.4);
}

/* دکمه فعال */
#crm-report-table_paginate .paginate_button.current {
  background: linear-gradient(145deg, #ff9800, #fb8c00);
  color: #fff !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

/* فیلد جستجو */
#crm-report-table_filter input {
  border-radius: 8px;
  padding: 6px 12px;
  border: 2px solid #4caf50;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease-in-out;
}

#crm-report-table_filter input:focus {
  outline: none;
  border-color: #ff9800;
  box-shadow: 0 0 8px rgba(255, 152, 0, 0.5);
}

/* انتخاب تعداد رکورد */
#crm-report-table_length select {
  border-radius: 8px;
  padding: 4px 10px;
  border: 2px solid #4caf50;
  background: linear-gradient(145deg, #fff, #f1f1f1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

#crm-report-table_length select:hover {
  border-color: #ff9800;
  box-shadow: 0 4px 8px rgba(255, 152, 0, 0.4);
}
.toggle-more {
  color: #007bff;
  cursor: pointer;
  text-decoration: none;
}
.toggle-more:hover {
  text-decoration: underline;
}
.search_item_filltering {
  flex: 1;
  padding: 5x;
  gap: 5px;
  margin: 10px;
}

/* جدول نتایج */
#avaynil-report-result_invoice table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 25px;
  background: #f0f7ff; /* رنگ پس‌زمینه آبی ملایم */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  transform: rotateX(0deg);
  transition: transform 0.3s;
  perspective: 1000px;
}

/* جلوه سه‌بعدی هنگام hover */
#avaynil-report-result_invoice table:hover {
  transform: rotateX(2deg) rotateY(2deg);
}

/* سلول‌ها */
#avaynil-report-result_invoice th,
#avaynil-report-result_invoice td {
  padding: 12px 10px;
  font-size: 12px;
  text-align: center;
  border-bottom: 1px solid #d0e4f7; /* خط جداکننده آبی روشن */
  transition: background 0.3s, transform 0.3s;
}

/* سرستون‌ها */
#avaynil-report-result_invoice th {
  background: linear-gradient(135deg, #4dabf7, #1e88e5); /* گرادینت آبی */
  color: #fff;
  font-weight: 600;
  font-size: 12px;
}

/* ردیف‌ها */
#avaynil-report-result_invoice tr:nth-child(even) {
  background: #e6f0fa; /* آبی بسیار روشن */
}

#avaynil-report-result_invoice tr:hover {
  background: #cce4ff; /* آبی روشن‌تر هنگام هاور */
  transform: scale(1.01);
}

/* واکنش‌گرا برای موبایل */
@media (max-width: 768px) {
  .avaynil-filters {
    grid-template-columns: 1fr;
  }

  #avaynil-crm-report {
    padding: 5px;
  }

  #avaynil-report-result_invoice th,
  #avaynil-report-result_invoice td {
    font-size: 12px;
    padding: 8px;
  }
}
/* اسکرول افقی در موبایل */
#table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* اسکرول نرم برای موبایل */
}

#table-wrapper table {
  min-width: 1200px; /* جلوگیری از شکستن ستون‌ها */
}

/* اسکرول بار زیبا */
#table-wrapper::-webkit-scrollbar {
  height: 8px;
}

#table-wrapper::-webkit-scrollbar-track {
  background: #e0e0e0;
  border-radius: 8px;
}

#table-wrapper::-webkit-scrollbar-thumb {
  background: #4dabf7;
  border-radius: 8px;
}

#avaynil_filter_invoice_btn {
  background: linear-gradient(135deg, #4dabf7, #1e88e5); /* گرادینت آبی */
  color: #fff;
}

/* دکمه‌های صفحه‌بندی */
#invoice-report-table_paginate .paginate_button {
  background: linear-gradient(145deg, #5dade2, #3498db);
  color: #fff !important;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  margin: 2px;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease-in-out;
}

#invoice-report-table_paginate .paginate_button:hover {
  background: linear-gradient(145deg, #3498db, #5dade2);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* دکمه فعال */
#invoice-report-table_paginate .paginate_button.current {
  background: linear-gradient(145deg, #2980b9, #2471a3) !important;
  color: #fff !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35);
}

/* دکمه غیرفعال */
#invoice-report-table_paginate .paginate_button.disabled {
  background: #d6eaf8 !important;
  color: #7f8c8d !important;
  cursor: not-allowed;
  box-shadow: none;
}

/* فیلد جستجو */
#invoice-report-table_filter input {
  border-radius: 8px;
  padding: 6px 12px;
  border: 2px solid #5dade2;
  background-color: #f9fcff;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease-in-out;
}

#invoice-report-table_filter input:focus {
  outline: none;
  border-color: #2980b9;
  box-shadow: 0 0 8px rgba(41, 128, 185, 0.5);
}

/* انتخاب تعداد نمایش رکورد */
#invoice-report-table_length select {
  border-radius: 8px;
  padding: 4px 10px;
  border: 2px solid #5dade2;
  background: linear-gradient(145deg, #ffffff, #f2f9ff);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

#invoice-report-table_length select:hover {
  border-color: #2980b9;
  box-shadow: 0 4px 8px rgba(41, 128, 185, 0.4);
}

.avaynil-report-bar-min {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px;
  background: #007bff;
  justify-content: space-between;
  font-size: 14px;
}
.avaynil-report-bar-min .report-box {
  background: rgba(255, 255, 255, 0.12);
  padding: 12px 16px;
  border-radius: 8px;
  min-width: 140px;
  text-align: center;
  flex: 1 1 auto;
  transition: 0.25s;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.avaynil-report-bar-min .report-box:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.18);
}
.avaynil-report-bar-min .report-box .val {
  display: block;
  font-weight: 700;
  color: #fff;
  font-size: 16px;
  margin-top: 6px;
}
.avaynil-report-bar-min .report-box .sub {
  display: block;
  font-size: 12px;
  opacity: 0.9;
  margin-top: 4px;
}
.avaynil-report-chart-min {
  background: #fff;
  padding: 12px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  margin-top: 12px;
  width: 90%;
  height: 220px;
}
@media (max-width: 768px) {
  .avaynil-report-bar-min {
    flex-direction: column;
  }
  .avaynil-report-bar-min .report-box {
    width: 100%;
    margin-bottom: 8px;
  }
  .avaynil-report-chart-min {
    height: 180px;
  }
}
/* avaynil-report.css */

/* کانتینر بالای کارت‌ها */
.avaynil-report-bar-min {
  display: flex;
  gap: 14px;
  align-items: stretch;
  justify-content: flex-start;
  margin-bottom: 18px;
  direction: rtl;
}

/* هر باکس گزارش کوچک */
.avaynil-report-bar-min .report-box {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(16, 24, 40, 0.06);
  padding: 14px;
  min-width: 180px;
  flex: 1 1 180px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  border: 1px solid rgba(0, 0, 0, 0.03);
}

/* عنوان داخل باکس */
.avaynil-report-bar-min .report-box .rb-title {
  font-size: 13px;
  color: #212529;
  font-weight: 600;
  margin-bottom: 6px;
}

/* مقدار عددی بزرگ */
.avaynil-report-bar-min .report-box .val {
  font-size: 22px;
  font-weight: 700;
  color: #0d6efd;
  line-height: 1;
}

/* مقدار کوچک (مثلا ریال) */
.avaynil-report-bar-min .report-box .val.small {
  font-size: 13px;
  color: #495057;
}

/* زیرعنوان */
.avaynil-report-bar-min .report-box .sub {
  font-size: 12px;
  color: #6c757d;
}

/* بخش نمودار */
.avaynil-report-chart-min {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.04);
  padding: 12px;
  min-height: 340px;
  position: relative;
  margin-bottom: 18px;
}

/* Canvas اندازه‌پذیر */
.avaynil-report-chart-min canvas {
  width: 100% !important;
  height: 320px !important;
  display: block;
}

/* responsive */
@media (max-width: 900px) {
  .avaynil-report-bar-min {
    flex-direction: column;
  }
  .avaynil-report-chart-min {
    padding: 8px;
  }
}

/* کانتینر اسکرول */
.avaynil-report-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #ccc;
  border-radius: 8px;
}

/* جدول */
.avaynil-report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: #fff;
}

/* هدر چسبان */
.avaynil-report-table thead th {
  background: #2c3e50;
  color: #fff;
  padding: 10px;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 10;
}

/* بدنه */
.avaynil-report-table tbody td {
  padding: 8px;
  /* white-space: nowrap; */
}

/* ---------------------------
 ریسپانسیو برای موبایل
--------------------------- */

@media (max-width: 768px) {
  .avaynil-report-table {
    font-size: 11px;
  }

  .avaynil-report-table thead th,
  .avaynil-report-table tbody td {
    padding: 6px;
  }

  /* ستون‌هایی که در موبایل مخفی می‌شوند */
  .hide-mobile {
    display: none !important;
  }

  .invoice_unmber_btn_acc {
    width: 120px;
    height: 28px;
    font-size: 11px;
  }

  .btn_invoice_number_log {
    font-size: 11px;
    padding: 3px 8px;
  }
}

/* موبایل‌های خیلی کوچک */
@media (max-width: 480px) {
  .invoice_unmber_btn_acc {
    width: 100px;
    height: 26px;
    font-size: 10px;
  }

  .btn_invoice_number_log {
    padding: 3px 6px;
    font-size: 10px;
  }
}
.avaynil-return-arrow {
  display: inline-block;
  transform: rotate(-90deg); /* چرخش 90 درجه به سمت بالا */
  font-size: 22px;
  cursor: pointer;
}
.end-button {
  background-color: #e74c3c; /* قرمز جذاب */
  color: #ffffff; /* متن سفید */
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.end-button:hover {
  background-color: #c0392b; /* قرمز تیره‌تر هنگام هاور */
}
/****************************************/

.modal_task_personel_cycel_main_cls {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* 🔹 بالا بردن z-index */
  perspective: 1000px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal_task_personel_cycel_main_cls.show {
  opacity: 1;
  pointer-events: auto;
}

.modal_task_personel_cycel_cls {
  position: relative;
  background: #fff;
  border-radius: 20px;
  padding: 30px;
  width: 600px;
  max-width: 90%;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3),
    inset 0 0 50px rgba(0, 206, 209, 0.3);
  transform-style: preserve-3d;
  transform: rotateX(15deg);
  transition: transform 0.3s ease;
  overflow: visible; /* 🔹 مهم برای dropdown */
  /* z-index: 100000; 🔹 بالاتر از مودال */
}

.modal_task_personel_cycel_cls.show {
  transform: rotateX(0);
}

/* انیمیشن */
@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* دکمه بستن */
.close-btn {
  border: none;
  background: transparent;
  font-size: 26px;
  cursor: pointer;
  color: #444;
}

/* هدر */
.modal-header-custom {
  display: flex;
  justify-content: flex-end;
}

/* عنوان */
.modal-title {
  text-align: center;
  font-size: 20px;
  color: #333;
  margin: 10px 0 20px 0;
}

/* فیلدهای فرم */
/* .form-group {
margin-bottom: 5px;
} */

.input-field,
.select-field {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.7px solid #ccc;
  font-size: 14px;
  outline: none;
  transition: 0.25s;
}

.input-field:focus,
.select-field:focus {
  border-color: #2196f3;
}

/* فوتر */
.form-footer {
  margin: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* آیکن فایل */
.attach-icon {
  width: 40px;
  cursor: pointer;
}

/* ظرف دکمه‌ها */
.footer-buttons {
  display: flex;
  gap: 10px;
}

/* دکمه درخواست */
.btn-request {
  padding: 10px 18px;
  background: linear-gradient(145deg, #2196f3, #1769aa);
  border: none;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  font-size: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  transition: 0.2s;
}

.btn-request:hover {
  transform: scale(1.05);
}

/* دکمه وظیفه */
.btn-task {
  padding: 10px 18px;
  background: linear-gradient(145deg, #4caf50, #3b8d3d);
  border: none;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  font-size: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  transition: 0.2s;
}

.btn-task:hover {
  transform: scale(1.05);
}

/* حالت موبایل */
@media (max-width: 480px) {
  #modal_task_personel_cycel {
    padding: 20px;
  }

  .footer-buttons button {
    font-size: 14px;
    padding: 8px 15px;
  }
}

.modal_active_new_contact_main_cls {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  display: none; /* در حالت عادی پنهان */
  align-items: center;
  justify-content: center;
  z-index: 999999;
  overflow: auto;
  padding: 15px; /* فاصله از بالا و پایین موبایل */
}

/* --- با انیمیشن زیبا ظاهر شود --- */
@keyframes modalFadeIn {
  from {
    transform: scale(0.85);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* --- خود مودال --- */
.modal_active_new_contact_cls {
  width: 100%;
  max-width: 800px; /* حداکثر عرض برای دسکتاپ */
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
  padding: 20px;
  position: relative;
  animation: modalFadeIn 0.25s ease-out;
  max-height: 90vh; /* حداکثر ارتفاع مودال برابر 90٪ ارتفاع صفحه */
  overflow-y: auto; /* اسکرول عمودی برای فرم */
  box-sizing: border-box;
}

/* --- دکمه بستن --- */
.modal_close_btn {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #ff4d4d;
  color: #fff;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  transition: 0.25s;
}

.modal_close_btn:hover {
  background: #e60000;
  transform: scale(1.1);
}

table.vardast-channel-table {
  width: 100%;
  border-collapse: collapse;
  direction: rtl;
}

table.vardast-channel-table th,
table.vardast-channel-table td {
  border: 1px solid #ccc;
  padding: 8px;
  font-size: 12px;
  text-align: center;
}

table.vardast-channel-table th {
  background: #f0f0f0;
  font-weight: bold;
}

/* اصلاح ظاهر دیتاتیبل در حالت RTL */
div.dataTables_wrapper {
  direction: rtl;
  text-align: right;
}

.dataTables_filter {
  float: left !important;
}

.dataTables_paginate {
  float: left !important;
}

.add_new_contact {
  background: linear-gradient(135deg, #28a745, #32d65c);
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  transition: 0.25s ease-in-out;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.add_new_contact:hover {
  background: linear-gradient(135deg, #22a03c, #28c958);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
  transform: translateY(-2px);
}

.add_new_contact:active {
  transform: scale(0.95);
}
.cancel_new_contact {
  background: linear-gradient(135deg, #dc3545, #ff5c5c); /* گرادیانت قرمز */
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  transition: 0.25s ease-in-out;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.cancel_new_contact:hover {
  background: linear-gradient(
    135deg,
    #c82333,
    #e04d4d
  ); /* حالت هاور با طیف قرمز تیره‌تر */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
  transform: translateY(-2px);
}

.cancel_new_contact:active {
  transform: scale(0.95);
}

.avaynil-progress-container {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  margin: 5px;
  font-size: 12px;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.avaynil-progress-box {
  background: #ffffff;
  padding: 20px;
  border-radius: 15px;
  width: 300px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  text-align: center;
  flex-shrink: 0;
  transition: transform 0.3s;
}

.avaynil-progress-box:hover {
  transform: translateY(-5px);
}

.avaynil-progress-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #ddd;
  margin-bottom: 10px;
}

.avaynil-progress-bar-wrapper {
  width: 100%;
  background: #e5e5e5;
  border-radius: 30px;
  margin: 15px 0;
  height: 18px;
}

.avaynil-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #4caf50, #76ff03);
  border-radius: 30px;
  width: 0; /* مقدار توسط JS تنظیم می‌شود */
  transition: width 1s ease-in-out;
}

.avaynil-progress-reaction {
  font-size: 14px;
  font-weight: bold;
  margin-top: 10px;
}

@media (max-width: 480px) {
  .avaynil-progress-container {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 10px;
    gap: 12px;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    width: 100%;
    align-items: start;
    justify-content: right;
  }

  .avaynil-progress-container > * {
    flex-shrink: 0 !important;
  }

  .avaynil-progress-box {
    min-width: 250px !important;
    padding: 15px;
  }

  .avaynil-progress-avatar {
    width: 60px !important;
    height: 60px !important;
  }

  .avaynil-progress-bar-wrapper {
    height: 12px;
  }

  .avaynil-progress-reaction {
    font-size: 13px;
  }

  .avaynil-progress-box h5 {
    font-size: 14px !important;
  }
}

/* کانتینر مودال */
.cancel-modal {
  display: none; /* مودال در ابتدا پنهان */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
  z-index: 9999;
  animation: fadeIn 0.25s ease-in-out;
}

/* محتوای مودال */
.cancel-modal-content {
  background: #fff;
  padding: 25px 30px;
  border-radius: 12px;
  width: 400px;
  max-width: 90%;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  animation: slideDown 0.25s ease-in-out;
}

/* تیتر */
.cancel-modal-content h3 {
  margin-bottom: 15px;
  font-size: 18px;
  color: #333;
}

/* textarea */
.cancel-modal-content textarea {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 14px;
  resize: none;
  outline: none;
  transition: 0.3s;
}
.cancel-modal-content textarea:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

/* دکمه‌ها */
.cancel-modal-buttons {
  text-align: right;
  margin-top: 15px;
}

.cancel-modal-buttons .btn {
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  border: none;
  transition: 0.3s;
  margin-left: 8px;
}

.cancel-modal-buttons .btn-submit {
  background: linear-gradient(135deg, #28a745, #32d65c);
  color: #fff;
  box-shadow: 0 3px 8px rgba(40, 166, 70, 0.4);
}
.cancel-modal-buttons .btn-submit:hover {
  background: linear-gradient(135deg, #32d65c, #28a745);
  box-shadow: 0 5px 12px rgba(40, 166, 70, 0.5);
}

.cancel-modal-buttons .btn-cancel {
  background: #f0f0f0;
  color: #555;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}
.cancel-modal-buttons .btn-cancel:hover {
  background: #e0e0e0;
  color: #333;
}

/* انیمیشن‌ها */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
/* استایل کلی آیکون‌ها */
/* آیکون پیش‌فرض */
.nsgpt-sort-default {
  font-size: 14px;
  opacity: 0.4;
  margin-left: 6px;
  color: #777;
}

/* صعودی */
.nsgpt-sort-icon {
  font-size: 14px;
  font-weight: bold;
  color: #28a745;
  margin-left: 6px;
}

/* نزولی */
.nsgpt-sort-icon-Asg {
  font-size: 14px;
  font-weight: bold;
  color: #dc3545;
  margin-left: 6px;
}

/* ستون فعال */
.table-fillter-sort-nsgbt.active-sort {
  color: #0d6efd !important;
  font-weight: bold;
}

/* هاور */
.table-fillter-sort-nsgbt:hover {
  cursor: pointer;
  color: #0d6efd;
}

.nsgpt-search-box {
  position: relative;
  width: 250px;
  margin-bottom: 15px;
}

.nsgpt-search-box input {
  width: 100%;
  padding: 8px 35px 8px 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 13px;
  transition: 0.3s;
}

.nsgpt-search-box input:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 5px rgba(13, 110, 253, 0.4);
  outline: none;
}

.nsgpt-search-box .search-icon {
  position: absolute;
  right: 10px;
  top: 7px;
  font-size: 16px;
  opacity: 0.6;
}

.avaynil-modal-rejectReasonModal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 100000;
}

.avaynil-modal-rejectReasonModal-box {
  top: 50%;
  left: 50%;
  background: #fff;
  width: 100%;
  max-width: 430px;
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 12px 45px rgba(0, 0, 0, 0.25);
  animation: avaynilRejectFade 0.25s ease;
}

.avaynil-modal-rejectReasonModal-title {
  font-weight: 800;
  margin-bottom: 8px;
}

.avaynil-modal-rejectReasonModal-desc {
  color: #6c757d;
  font-size: 14px;
  margin-bottom: 10px;
}

.avaynil-modal-rejectReasonModal-textarea {
  width: 100%;
  border-radius: 8px;
  padding: 10px;
  border: 1px solid #ddd;
  resize: none;
  font-size: 14px;
}

.avaynil-modal-rejectReasonModal-textarea:focus {
  border-color: #dc3545;
  outline: none;
}

.avaynil-modal-rejectReasonModal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

/* دکمه‌ها */
.avaynil-btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 600;
}

.avaynil-btn-cancel {
  background: #e9ecef;
  color: #333;
}

.avaynil-btn-danger {
  background: #dc3545;
  color: #fff;
}

.avaynil-btn-danger:hover {
  background: #b52a37;
}

@keyframes avaynilRejectFade {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.avaynil-contact-box {
  max-width: 420px;
  background: #fff;
  padding: 15px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.avaynil-contact-box h3 {
  margin-bottom: 10px;
  text-align: center;
}

.avaynil-contact-box input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-bottom: 10px;
}

.avaynil-contact-box button {
  width: 100%;
  padding: 8px;
  border: none;
  background: #4caf50;
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
}

.avaynil-card {
  margin-top: 15px;
  background: rgb(0, 0, 0);
  padding: 10px;
  border-radius: 10px;
}

.avaynil-contact-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 15px;
}

.avaynil-contact-table th,
.avaynil-contact-table td {
  border: 1px solid #ddd;
  padding: 8px 10px;
  text-align: left;
}

.avaynil-contact-table th {
  background-color: #0073aa;
  color: #fff;
}

.avaynil-contact-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.avaynil-contact-table tr:hover {
  background-color: #f1f1f1;
}

.avaynil-permission-card {
  max-width: 900px;
  border-radius: 16px;
  padding: 25px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.avaynil-permission-card h2 {
  margin-bottom: 20px;
  font-size: 20px;
  color: #2c3e50;
}

.avaynil-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.avaynil-grid .full {
  grid-column: span 2;
}

.field label {
  display: block;
  font-size: 13px;
  margin-bottom: 6px;
  color: #555;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #dcdfe6;
  font-size: 14px;
  transition: all 0.2s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: #6c5ce7;
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.15);
  outline: none;
}

.field.checkbox {
  display: flex;
  align-items: center;
}

.field.checkbox label {
  font-size: 14px;
}

.avaynil-btn {
  margin-top: 20px;
  background: linear-gradient(135deg, #6c5ce7, #8e7cf0);
  border: none;
  color: #fff;
  padding: 12px 28px;
  border-radius: 12px;
  font-size: 15px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.avaynil-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(108, 92, 231, 0.35);
}

.avaynil-table-card_permissions_registry {
  margin-top: 30px;
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}

.avaynil-table_permissions_registry {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.avaynil-table_permissions_registry th,
.avaynil-table_permissions_registry td {
  padding: 12px;
  border-bottom: 1px solid #eee;
  text-align: center;
}

.avaynil-table_permissions_registry th {
  background: #f5f7fb;
  font-weight: 600;
}

.av-btn {
  border: none;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
}

.av-btn.edit {
  background: transparent;
  color: #fff;
}

.av-btn.delete {
  background: transparent;
  color: #fff;
}

.av-modal-overlay {
  position: fixed;
  inset: 0;
  display: none; /* حالت بسته */
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  z-index: 9999;
  overflow-y: auto;
  /* مرکز کردن */
  align-items: center;
  justify-content: center;
}

/* وقتی مودال باز است */
.av-modal-overlay.active {
  display: flex; /* بسیار مهم */
}
.av-modal-box-modal{
  width: 50%;
  overflow-y: auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
  animation: avFadeUp 0.35s ease;
}
.av-modal-box {
  width: 90%;
  max-width: 1200px;
  max-height: 65vh;
  overflow-y: auto;

  background: #fff;
  border-radius: 18px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
  animation: avFadeUp 0.35s ease;
}
@keyframes avFadeUp {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.av-modal-header {
  padding: 18px 24px;
  background: linear-gradient(135deg, #4a2c2a, #6a3fb5);
  color: #f0f0f0 !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.av-modal-header h6 {
  color: #fff;
}
.av-modal-close {
  font-size: 26px;
  cursor: pointer;
  color: red;
}

.av-modal-body {
  padding: 20px;
  max-height: 100%;
  overflow-y: auto;
}

.av-btn-save {
  background: #10b981;
  color: #fff;
}
.av-btn-delete {
  background: #ef4444;
  color: #fff;
}

@keyframes avFadeUp {
  from {
    opacity: 0;
    transform: translateY(25px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.av-open-modal-btn {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #fff;
  border: none;
  padding: 12px 22px;
  border-radius: 12px;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.4);
  transition: all 0.3s ease;
}

.av-open-modal-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(37, 99, 235, 0.55);
}
/* ===== DataTable Wrapper ===== */
/* ====== کانتینر جدول ====== */
.av-table-wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

/* ====== خود جدول ====== */
.av-table {
  width: 100% !important;
  min-width: 900px; /* اگر ستون‌ها زیادند */
  border-collapse: collapse;
}

/* ====== سلول‌ها ====== */
.av-table th,
.av-table td {
  text-align: center;
  font-size: 12px;
  vertical-align: middle;
  white-space: nowrap;
  padding: 8px 6px;
}

/* ====== ورودی‌ها ====== */
.av-table select,
.av-table input {
  width: 100%;
  min-width: 90px;
  padding: 6px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  box-sizing: border-box;
}

/* ====== دکمه‌ها ====== */
.av-btn {
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 14px;
}

.av-btn-save {
  background: #22c55e;
  color: #fff;
}

.av-btn-delete {
  background: #ef4444;
  color: #fff;
}

/* ====== DataTables Wrapper ====== */
.dataTables_wrapper {
  width: 100% !important;
  max-width: 100% !important;
}

/* ====== هدر و فوتر دیتاتیبل ====== */
.dataTables_length,
.dataTables_filter {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ====== فیلد جستجو ====== */
.dataTables_filter input {
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  padding: 6px 10px;
  width: 200px;
}

/* ====== select تعداد رکورد ====== */
.dataTables_length select {
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  padding: 4px 8px;
}

/* ====== صفحه‌بندی ====== */
.dataTables_paginate {
  margin-top: 15px;
  display: flex;
  justify-content: center;
}

.dataTables_paginate .paginate_button {
  padding: 6px 12px;
  margin: 0 4px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f8fafc;
  cursor: pointer;
}

.dataTables_paginate .paginate_button.current {
  background: #2563eb;
  color: #fff !important;
  border-color: #2563eb;
}

.dataTables_paginate .paginate_button:hover {
  background: #dbeafe;
}

.avaynil-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.av-control {
  display: flex;
  flex-direction: row-reverse; /* مهم */
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  cursor: pointer;
  font-weight: 500;
}

/* سایز مناسب برای کنترل‌ها */
.av-control input[type="checkbox"],
.av-control input[type="radio"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ظاهر مرتب select و input */
.level-multi-select,
.avaynil-field select,
.avaynil-field input[type="number"] {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #ccc;
}
.avaynil-level-box {
  border: 1.5px dashed red;
  background: linear-gradient(135deg, #fff5f3, #ffe9e5);
  padding: 8px 20px;
  box-shadow: 0 3px 10px rgba(229, 83, 61, 0.15);
  /* display: flex; */
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin: 5px;
  text-align: center;
  align-items: center;
  vertical-align: center;
}

.avaynil-level-box::before {
  content: "⚠️";
  font-size: 14px;
}

#avaynil_level_QP {
  color: #b42318;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
}

/* ===== Shipping Modal Style ===== */
.avaynil-shipping-modal {
  background: #ffffff;
  padding: 20px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* عنوان */
#shippingModal h3 {
  text-align: center;
  margin-bottom: 20px;
  color: #2c3e50;
  font-size: 20px;
  font-weight: bold;
}

/* گروه فیلد */
.avaynil-shipping-modal .form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

/* لیبل */
.avaynil-shipping-modal label {
  margin-bottom: 6px;
  font-size: 14px;
  color: #555;
}

/* اینپوت و تکست اریا */
.avaynil-shipping-modal input,
.avaynil-shipping-modal textarea {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #dcdcdc;
  font-size: 14px;
  transition: all 0.3s ease;
}

.avaynil-shipping-modal textarea {
  resize: vertical;
  min-height: 80px;
}

/* فوکوس */
.avaynil-shipping-modal input:focus,
.avaynil-shipping-modal textarea:focus {
  border-color: #4caf50;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
  outline: none;
}

/* دکمه‌ها */
.modal-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.modal-buttons button {
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  border: none;
  transition: all 0.3s ease;
}

/* دکمه ثبت */
.modal-buttons .btn-success {
  background: linear-gradient(135deg, #4caf50, #2ecc71);
  color: #fff;
}

.modal-buttons .btn-success:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* دکمه بستن */
.modal-buttons .btn-danger {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: #fff;
}

.modal-buttons .btn-danger:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* جدول */
.shipping-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  font-size: 14px;
}

.shipping-table thead {
  background: #f5f6fa;
}

.shipping-table th,
.shipping-table td {
  padding: 10px;
  border: 1px solid #e0e0e0;
  text-align: center;
}

.shipping-table tbody tr:hover {
  background: #f9f9f9;
}
/* ===== Shipping Modal (AvaYnil Style) ===== */
/* ===== Shipping Modal Centered ===== */
.shippingModal-avaynil {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  display: none; /* با JS نمایش داده می‌شود */
  align-items: center; /* وسط عمودی */
  justify-content: center; /* وسط افقی */
  overflow: auto;
  z-index: 9999;
  animation: shippingModalFadeIn 0.3s ease;
}

/* محتوای مودال */
.shippingModal-avaynil .modal-content {
  background: #ffffff;
  width: 95%;
  max-width: 600px;
  overflow-y: auto;
  max-height: 60%;
  padding: 25px;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  animation: shippingModalScaleIn 0.35s ease;
}

/* عنوان */
.shippingModal-avaynil h3 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 700;
  color: #2c3e50;
}

/* جداکننده */
.shippingModal-avaynil hr {
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, #ddd, transparent);
  margin: 25px 0;
}

/* انیمیشن‌ها */
@keyframes shippingModalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes shippingModalScaleIn {
  from {
    transform: scale(0.92);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* ریسپانسیو */
@media (max-width: 600px) {
  .shippingModal-avaynil .modal-content {
    padding: 18px;
    border-radius: 14px;
  }
}
#modal-question-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  z-index: 9998;
}
#avaynilModal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 100%;
  height: 60%;
  background: #fff;
  padding: 20px;
  border: 1px solid #ccc;
  z-index: 9999;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}