/* @font-face {
    font-family: "AvSans";
    src: url("../fonts/IRANSansWeb-fa.woff2") format("woff2"),
      url("../fonts/IRANSansWeb.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  } */

  /* اعمال فونت به فرم افزونه و تمام اجزای داخل آن */

  .avaynil-plugin-info {
    max-width: 400px;
    margin: 30px auto;
    background: linear-gradient(145deg, #ffffff, #e6e6e6);
    border-radius: 15px;
    box-shadow: 10px 10px 20px #bebebe, -10px -10px 20px #ffffff;
    padding: 25px;
    direction: rtl;
    color: #333;
  }
  .avaynil-plugin-info h3 {
    text-align: center;
    color: #0066cc;
    margin-bottom: 20px;
  }
  .avaynil-plugin-info p {
    margin: 10px 0;
    font-size: 15px;
    line-height: 1.6;
    color:#039cf5
  }
  .avaynil-plugin-info strong {
    color: #444;
  }

  .avaynil-invoice-box {
    width: 420px;
    margin: 40px auto;
    padding: 30px;
    border-radius: 25px;
    background: #ffffff;
    box-shadow: 15px 15px 30px #bebebe, -15px -15px 30px #ffffff;
    text-align: center;
    direction: rtl;
    color: #333;
  }

  .avaynil-invoice-box h2 {
    margin: 15px 0 5px;
    color: #0073aa;
    font-size: 18px;
  }

  .avaynil-invoice-box h1 {
    margin: 10px 0;
    font-size: 28px;
    color: #222;
    font-weight: bold;
  }
  /* avaynil_style.css */
  /* ===========================
                  فرم کلی و کانتینر
                  =========================== */

  /* input[type="text"],
                  input[type="email"],
                  input[type="password"],
                  input[type="number"],
                  input[type="date"],
                  select,
                  textarea {
                      width: 100%;
                      padding: 10px 12px;
                      margin-bottom: 12px;
                      border: 1px solid #ccc;
                      border-radius: 6px;
                      box-sizing: border-box;
                      transition: all 0.3s ease;
                  }

                  input:focus,
                  select:focus,
                  textarea:focus {
                      border-color: #007bff;
                      outline: none;
                      box-shadow: 0 0 5px rgba(0,123,255,0.3);
                  }

                  textarea {
                      resize: vertical;
                      min-height: 80px;
                      max-height: 200px;
                  } */

  /* ===========================
                  ردیف‌ها و گروه‌ها
                  =========================== */
  /* #avaynil-daryaft-form .wrap {
                      background-color: #f9f9f9;
                      padding: 25px;
                      border-radius: 10px;
                      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
                  } */

  #avaynil-daryaft-form .container {
    max-width: 900px;
    margin: 0 auto;
    padding: 10px;
  }

  /* ===========================
                  عناوین
                  =========================== */
  #avaynil-daryaft-form h1,
  #avaynil-daryaft-form h4 {
    color: #0073aa;
    text-align: center;
    margin-bottom: 20px;
    font-weight: 600;
  }

  /* ===========================

                  =========================== */
  #avaynil-daryaft-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: #555;
  }
  #hsf-tab input[type="text"],
  #hsf-tab input[type="password"],
  #hsf-tab input[type="number"],
  #bale-tab input[type="text"],
  #whatsapp-tab input[type="text"],
  #menulink-tab input[type="text"],
  #menuremainder-tab input[type="text"],
  #factorinfo-tab input[type="text"],
  #filter-form_sanad input[type="text"],
  #avaynil-daryaft-form input[type="text"],
  #avaynil-daryaft-form input[type="email"],
  #avaynil-daryaft-form input[type="password"],
  #avaynil-daryaft-form input[type="number"],
  #avaynil-daryaft-form input[type="date"],
  #avaynil-daryaft-form select,
  #avaynil-daryaft-form textarea {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
    transition: all 0.3s ease;
  }

  #avaynil-daryaft-form input:focus,
  #avaynil-daryaft-form select:focus,
  #avaynil-daryaft-form textarea:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
  }

  #avaynil-daryaft-form textarea {
    resize: vertical;
    min-height: 80px;
    max-height: 200px;
  }

  #avaynil-daryaft-form .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
  }

  #avaynil-daryaft-form .form-group {
    flex: 1;
    min-width: 200px;
  }

  #avaynil-daryaft-form .form-group.full-width {
    flex: 1 0 100%;
  }

  /* ===========================
                  دکمه‌ها
                  =========================== */
  #avaynil-daryaft-form .btn-submit,
  #avaynil-daryaft-form .btn-add-shop {
    background-color: #007bff;
    color: #ffffff;
    padding: 10px 20px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  #avaynil-daryaft-form .btn-submit:hover,
  #avaynil-daryaft-form .btn-add-shop:hover {
    background-color: #0056b3;
  }
  .set-DebtorsCreditor,
  .add-DebtorsCreditor,
.edit-DebtorsCreditors-set{
  padding:3px;
  border-radius:5px;
  border:none;
  box-shadow: 0 4px 10px rgba(217, 174, 243, 0.25);

}
.set-DebtorsCreditor{
  background-color:#c990eb;

}
.edit-DebtorsCreditors-set{
  background-color:#48991a;
}
.add-DebtorsCreditor{
  background-color:#FF6FCF;}

.set-DebtorsCreditor:hover{
  background-color:#b366ac;
   box-shadow: 0 6px 14px rgba(227, 194, 235, 0.4);
}
 
.edit-DebtorsCreditors-set:hover{
  background-color:#143617;
   box-shadow: 0 6px 14px rgba(201, 244, 172, 0.4);
}
 .add-DebtorsCreditor:hover{
  background-color:#95547f;
   box-shadow: 0 6px 14px rgba(206, 172, 244, 0.4);
}
  /* ===========================
                  جدول و هدر
                  =========================== */
  #avaynil-daryaft-form table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
  }

  #avaynil-daryaft-form th,
  #avaynil-daryaft-form td {
    padding: 10px;
    text-align: center;
    border: 1px solid #ddd;
    font-size: 13px;
  }

  #avaynil-daryaft-form .thead-light-blue {
    background-color: #07aae0;
    color: #ffffff;
  }

  /* ===========================
                  تصاویر و پیش‌نمایش
                  =========================== */
  #avaynil-daryaft-form .img-box {
    position: relative;
    display: inline-block;
    margin: 5px;
  }

  #avaynil-daryaft-form .img-box img {
    width: 40px;
    height: 40px;
    border: 1px solid #ccc;
    padding: 3px;
    border-radius: 50%;
    object-fit: cover;
  }

  #avaynil-daryaft-form .img-box button.remove-img-server {
    position: absolute;
    top: -5px;
    right: -5px;
    border: none;
    background-color: #ff4d4d;
    color: #fff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.3s;
  }

  #avaynil-daryaft-form .img-box button.remove-img-server:hover {
    background-color: #cc0000;
  }
  /* دکمه‌های آپلود و دوربین */
  #avaynil-daryaft-form .btn-upload,
  #avaynil-daryaft-form .btn-camera,
  #avaynil-daryaft-form .btn-add-item {
    display: block;
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  /* رنگ‌ها */
  #avaynil-daryaft-form .btn-upload {
    background-color: #6c757d;
    color: #fff;
  }
  #avaynil-daryaft-form .btn-upload:hover {
    background-color: #5a6268;
  }

  #avaynil-daryaft-form .btn-camera {
    background-color: #17a2b8;
    color: #fff;
  }
  #avaynil-daryaft-form .btn-camera:hover {
    background-color: #138496;
  }

  #avaynil-daryaft-form .btn-add-item {
    background-color: #007bff;
    color: #fff;
  }
  #avaynil-daryaft-form .btn-add-item:hover {
    background-color: #0056b3;
  }

  /* Drag & Drop Zone */
  #avaynil-daryaft-form .drag-drop-zone {
    border: 2px dashed #007bff;
    border-radius: 6px;
    padding: 15px;
    text-align: center;
    color: #555;
    font-size: 14px;
    background-color: #f9f9f9;
    transition: background 0.3s;
    cursor: pointer;
    margin-bottom: 12px;
  }
  #avaynil-daryaft-form .drag-drop-zone:hover {
    background-color: #eef6ff;
  }

  /* ===========================
                  ریسپانسیو
                  =========================== */
  /* ===========================
                  استایل مخصوص موبایل و تبلت
                  =========================== */
  @media (max-width: 991px) {
    #avaynil-daryaft-form button {
      font-size: 10px; /* کوچیک‌تر شدن فونت */
      padding: 6px 8px; /* کمتر شدن پدینگ */
      border-radius: 4px; /* گوشه نرم‌تر */
    }

    #avaynil-daryaft-form .delete-button {
      width: 100%;
      height: 30px;
      font-size: 12px;
      text-align: center;
      margin-bottom: 10px;
    }
    #avaynil-daryaft-form .btn-upload,
    #avaynil-daryaft-form .btn-camera,
    #avaynil-daryaft-form .btn-add-item {
      font-size: 10px;
      padding: 6px 10px;
    }
    #avaynil-daryaft-form #upload_image_button,
    #avaynil-daryaft-form #take_picture_button,
    #avaynil-daryaft-form .btn-add-item {
      font-size: 10px; /* فونت کوچیک‌تر */
      padding: 6px 10px; /* پدینگ کمتر */
      border-radius: 6px; /* گوشه نرم‌تر */
    }
    #avaynil-daryaft-form .drag-drop-zone {
      font-size: 10px;
      padding: 10px;
    }
    #avaynil-daryaft-form label {
      font-size: 10px;
      margin-bottom: 4px;
    }

    #avaynil-daryaft-form p,
    #avaynil-daryaft-form input,
    #avaynil-daryaft-form select,
    #avaynil-daryaft-form textarea {
      font-size: 10px !important;
      padding: 6px 8px;
    }

    /* مخصوص فیلد تاریخ */
    #avaynil-daryaft-form input.persiandate,
    #avaynil-daryaft-form input.pdp-el {
      font-size: 10px !important;
    }
    #avaynil-daryaft-form textarea {
      min-height: 60px;
      max-height: 150px;
    }

    #avaynil-daryaft-form .form-row {
      flex-direction: column;
      gap: 10px;
    }

    #avaynil-daryaft-form .form-group {
      min-width: 100%;
    }

    /* دکمه‌ها */
    #avaynil-daryaft-form .btn-submit,
    #avaynil-daryaft-form .btn-add-shop {
      font-size: 10px;
      padding: 8px 12px;
      border-radius: 4px;
    }

    /* جدول */
    #avaynil-daryaft-form table {
      font-size: 10px;
      display: block;
      overflow-x: auto;
      white-space: nowrap;
    }

    #avaynil-daryaft-form th,
    #avaynil-daryaft-form td {
      padding: 6px;
      font-size: 10px;
    }

    /* تصاویر */
    #avaynil-daryaft-form .img-box img {
      width: 30px;
      height: 30px;
    }

    #avaynil-daryaft-form .img-box button.remove-img-server {
      width: 15px;
      height: 15px;
      font-size: 8px;
      top: -4px;
      right: -4px;
    }

    #avaynil-daryaft-form .avaynil-card-label {
      font-size: 10px;
    }
    .main-form h4 {
      font-size: 10px;
    }
  }

  .personel-button {
    background-color: #2e8b57;
    margin: 2px;
    padding: 2px 2px;
    border-radius: 4px;
    color: white;
    width: auto;
    height: 30px;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.3s;
  }

  .personel-button:hover {
    background-color: #044d1c;
  }

  .avaynil-category-info-item {
    display: flex;
    width: 100%;
    align-items: center; /* وسط‌چین عمودی */
    justify-content: center; /* وسط‌چین افقی */
    gap: 1px; /* فاصله بین آیتم‌ها */
    text-align: center;
    margin: 5px 2px;
    flex-wrap: wrap; /* برای واکنش‌گرایی در موبایل */
  }
  .avaynil-category-info-item label {
    margin: 0;
    font-weight: bold;
  }

  .avaynil-category-info-item select,
  .avaynil-category-info-item button {
    padding: 5px 10px;
    font-size: 14px;
  }
  .select2 {
    flex-grow: 1; /* اجازه دهد که select فضای بیشتری بگیرد */
    max-width: 60%; /* حداکثر عرض برای زیبایی */
    margin: 5px;
    font-size: 14px;
  }
  #whatsapp_ok {
    cursor: pointer;
  }
  @media (max-width: 768px) {
    .personel-button {
      font-size: 9px !important;
      height: 40px !important;
      width: 20px !important;
      writing-mode: vertical-rl; /* متن عمودی از بالا به پایین */
      transform: rotate(180deg); /* جهت خواندن از پایین به بالا */
      text-align: center;
      padding: 2px;
    }

    .select2 {
      font-size: 10px;
    }
  }

  .select2-selection--single {
    font-size: 14px !important;
  }
  @media (max-width: 768px) {
    .select2-selection--single {
      font-size: 10px !important;
    }

    .label-button {
      height: 20px !important;
      font-size: 10px !important;
      margin: 2px !important;
      padding: 1px 1px !important;
    }

    .personel-category-button {
      height: 20px !important;
      font-size: 10px !important;
      margin: 1px !important;
      padding: 1px 1px !important;
    }
  }

  .category-button {
    background-color: #f4881c;
    margin: 5px;
    padding: 2px 2px;
    border-radius: 10px;
    color: white;
    width: auto;
    height: 40px;
    cursor: pointer;
    font-size: 15px;
    transition: background-color 0.3s;
  }

  .category-button:hover {
    background-color: #f5b77a;
  }

  .avaynil-label-info-item {
    display: flex;
    align-items: center; /* وسط‌چین عمودی */
    justify-content: center; /* وسط‌چین افقی */
    gap: 1px; /* فاصله بین آیتم‌ها */
    text-align: center;
    margin: 5px 2px;
    flex-wrap: wrap; /* برای واکنش‌گرایی در موبایل */
  }
  .avaynil-label-info-item label {
    margin: 0;
    font-weight: bold;
  }

  .avaynil-label-info-item select,
  .avaynil-label-info-item button {
    padding: 5px 10px;
    font-size: 14px;
  }

  .label-button {
    background-color: #f4881c;
    margin: 5px;
    padding: 2px 2px;
    border-radius: 10px;
    color: white;
    width: auto;
    height: 40px;
    cursor: pointer;
    font-size: 15px;
    transition: background-color 0.3s;
  }

  .label-button:hover {
    background-color: #f5b77a;
  }

  .avaynil-btn-save-command {
    background-color: #0757ec;
    margin: 10px;
    padding: 2px 5px;
    border-radius: 10px;
    color: white;
    width: auto;
    height: 40px;
    cursor: pointer;
    font-size: 15px;
    transition: background-color 0.3s;
  }

  .avaynil-btn-save-command:hover {
    background-color: #3869f0;
  }
  .code-hesabfa-button {
    background-color: #0f7be0;
    border: 2px solid white; /* اضافه کردن بوردر سفید */
    margin: 1px;
    padding: 2px 5px;
    border-radius: 60px;
    color: rgb(255, 255, 255);
    width: auto;
    height: 50px;
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    transition: background-color 0.3s, border-color 0.3s;
  }
  .personel-category-button {
    background: linear-gradient(135deg, #f59e0b, #f4881c);
    border: none;
    margin: 3px;
    padding: 2px 6px;
    border-radius: 12px;
    color: #fff;
    font-size: 11px;
    font-weight: 100;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  }
  /* 
  .onfirm-button {
    background-color: #15ec32;
    margin: 10px;
    padding: 2px 5px;
    border-radius: 4px;
    color: white;
    width: 50px;
    cursor: pointer;

    font-size: 10px;
    transition: background-color 0.3s;
  }

  .onfirm-button:hover {
    background-color: #55ca7c;
  }

  .delet-button {
    background-color: #ff07ac;
    margin: 10px;
    padding: 2px 5px;
    border-radius: 4px;
    color: white;
    width: 50px;
    cursor: pointer;

    font-size: 10px;
    transition: background-color 0.3s;
  }

  .delet-button:hover {
    background-color: #e0000b;
  }

  /* تنظیمات برای دکمه‌های ویرایش */
  /* .edit-button {
    background-color: #ffc107;
    color: white;
    padding: 2px 5px;
    margin: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 10px;
    transition: background-color 0.3s;
  } */

  .container_padding_main-form {
    width: 100%;
  }
  .edit-button:hover {
    background-color: #e0a800;
  }

  .edit-button.disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  .container {
    padding: 20px;
  }

  .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }

  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
  }

  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
  }

  input:checked + .slider {
    background-color: #2196f3;
  }

  input:checked + .slider:before {
    transform: translateX(26px);
  }

  .slider.round {
    border-radius: 34px;
  }

  .slider.round:before {
    border-radius: 50%;
  }

  .hidden-column {
    display: none;
  }

  .dropdown-content {
    display: none;
    /* Hidden by default */
    position: absolute;

    background-color: #f9f9f9;
    min-width: 160px;
    max-width: 30%;
    border: 1px solid #ddd;
    z-index: 1;
  }

  .dropdown-content a {
    max-width: 30%;
    padding: 8px 16px;
    text-decoration: none;
    display: block;
    cursor: pointer;
    /* Makes it clear that links are clickable */
  }

  .dropdown-content a:hover {
    background-color: #f1f1f1;
    max-width: 30%;
  }

  /* Show the dropdown menu when the parent .dropdown is hovered or clicked */
  .dropdown.show .dropdown-content {
    display: block;
    /* Make the menu visible */
  }

  .pt-3 {
    margin-top: 0px;
    margin-left: 10px;
  }

  .pt-3 img {
    width: 70px;
    /* عرض تصویر */
    height: 70px;
    /* ارتفاع تصویر */
    border-radius: 50%;
    /* ایجاد دایره */
    object-fit: cover;
    /* برای حفظ نسبت تصویر در هنگام تغییر سایز */
  }

  .item-fields {
    position: relative;
    padding: 20px;
    border: 1px solid #ddd;
    margin-bottom: 20px;
  }

  .delete-icon {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }

  .delete-button {
    width: 100%;
    text-align: center;
    font-size: 12px;
  }

  .item-fields {
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 10px;
  }

  .item-fields .row {
    margin: 0;
  }

  .item-fields .col-md-1 {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .item-fields .col-md-11 {
    padding-left: 15px;
  }

  /* تغییر رنگ پس‌زمینه ردیف تیتر (th) و رنگ متن */
  thead.thead-light-blue th {
    background-color: #0e91e9;
    /* رنگ پس‌زمینه آبی */
    color: white;
    /* رنگ متن سفید */
    text-align: center;
    /* مرکز کردن متن */
    padding: 10px;
    /* ایجاد فضای داخلی */
    font-size: 12px;
  }

  /* رنگ‌بندی متن جدول برای دیده‌شدن */
  table#avaynil-data-table td {
    color: #333;
    /* رنگ متن خاکستری تیره */
    padding: 5px;
    /* فضای داخلی سلول‌ها */
    font-size: 12px;
  }

  /* استایل‌بندی جدول */
  table#avaynil-data-table {
    width: 100%;
    border-collapse: collapse;
    /* حذف فاصله بین سلول‌ها */
    margin-top: 20px;
    /* فاصله از بالا */
  }

  /* تغییر رنگ پس‌زمینه برای ردیف‌های فرد و زوج جهت خوانایی بهتر */
  table#avaynil-data-table tr:nth-child(odd) {
    background-color: #e2e1e1;
    /* پس‌زمینه ردیف‌های فرد */
  }

  table#avaynil-data-table tr:nth-child(even) {
    background-color: #ffffff;
    /* پس‌زمینه ردیف‌های زوج */
  }

  /* تنظیمات اضافی برای دکمه‌ها */
  /* button {
                              margin: 5px;
                              padding: 5px 10px;
                              border-radius: 4px;
                              font-size: 10px;

                          } */
  /* 📱 موبایل (عرض تا 600px) */
  @media (max-width: 600px) {
    table#avaynil-data-table {
      font-size: 10px; /* فونت کوچکتر */
    }

    table#avaynil-data-table td {
      padding: 3px; /* کاهش فاصله داخلی سلول‌ها */
    }

    /* جدول اسکرول‌پذیر شود */
    .table-responsive {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    table#avaynil-data-table {
      width: 600px; /* حفظ عرض اصلی جدول برای اسکرول */
    }
  }

  /* 📱📲 تبلت (عرض بین 601px تا 1024px) */
  @media (min-width: 601px) and (max-width: 1024px) {
    table#avaynil-data-table {
      font-size: 10px; /* کمی کوچکتر از دسکتاپ */
    }

    table#avaynil-data-table td {
      padding: 4px;
    }
  }

  .btn-pagination {
    margin: 0 5px;
    /* فاصله بین دکمه‌ها */
  }

  .btn-pagination:hover {
    opacity: 0.8;
    /* تغییر شفافیت هنگام هاور */
  }

  .btn {
    font-size: 14px;
    /* اندازه فونت */
    padding: 8px 12px;
    /* فاصله داخلی */
  }

  .btn-warning,
  .btn-success,
  .btn-danger {
    transition: background-color 0.3s;
    /* انیمیشن تغییر رنگ */
  }

  .btn-warning:hover,
  .btn-success:hover,
  .btn-danger:hover {
    opacity: 0.85;
    /* تغییر شفافیت هنگام هاور */
  }

  td {
    padding: 10px;
    /* فاصله درون سلول جدول */
  }

  .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
  }

  .btn-pagination {
    background-color: #007bff;
    /* رنگ زمینه */
    color: white;
    /* رنگ متن */
    border: none;
    /* بدون حاشیه */
    padding: 10px 15px;
    /* فاصله داخلی */
    margin: 0 5px;
    /* فاصله بین دکمه‌ها */
    border-radius: 5px;
    /* گوشه‌های گرد */
    cursor: pointer;
    /* تغییر اشاره‌گر */
    font-size: 16px;
    /* اندازه متن */
    transition: background-color 0.3s;
    /* انیمیشن تغییر رنگ */
  }

  .btn-pagination:hover {
    background-color: #0056b3;
    /* رنگ زمینه هنگام هاور */
  }

  .page-numbers {
    padding: 10px 15px;
    /* فاصله داخلی */
    margin: 0 5px;
    /* فاصله بین اعداد */
    border-radius: 5px;
    /* گوشه‌های گرد */
    color: #007bff;
    /* رنگ متن اعداد */
    text-decoration: none;
    /* بدون زیرخط */
  }

  .page-numbers:hover {
    background-color: #f0f0f0;
    /* رنگ زمینه هنگام هاور */
  }

  .current {
    background-color: #007bff;
    /* رنگ زمینه برای صفحه فعلی */
    color: white;
    /* رنگ متن برای صفحه فعلی */
  }

  .btn-pagination:disabled {
    background-color: #cccccc;
    /* رنگ زمینه برای دکمه‌های غیرفعال */
    cursor: not-allowed;
    /* تغییر اشاره‌گر به غیرفعال */
  }

  .tab-container {
    margin-bottom: 4px;
    width: 100%;
  }

  .tab-button {
    background-color: #f1f1f1;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    display: inline-flex; /* متن + شمارنده کنار هم */
    align-items: center;
    gap: 8px; /* فاصله بین متن و شمارنده */
    margin-right: 10px;
    font-weight: bold;
    border-radius: 4px;
    transition: background-color 0.3s;
    font-size: 14px;
  }

  .tab-button:hover {
    background-color: #ddd;
  }

  .tab-button.active {
    background-color: #0073aa;
    color: white;
  }

  /* شمارنده دایره‌ای */
  .tab-button .counter,
  .tab-button .uncounter {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    cursor: default;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3),
      /* سایه بیرونی پایین */ inset 0 -2px 4px rgba(0, 0, 0, 0.3),
      /* سایه داخلی پایین */ inset 0 2px 4px rgba(255, 255, 255, 0.4); /* سایه روشن بالا برای برجستگی */
    background-image: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.25),
      rgba(0, 0, 0, 0.1)
    ); /* گرادیان براق */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .tab-button .counter {
    background-color: #f17725;
  }

  .tab-button .uncounter {
    background-color: #258ef1;
  }
  /* ریسپانسیو */
  @media (max-width: 768px) {
    .tab-button {
      padding: 8px 12px;
      font-size: 13px;
      margin-right: 5px;
    }
    .tab-button .counter {
      width: 22px;
      height: 22px;
      font-size: 11px;
    }
    .tab-button .uncounter {
      width: 22px;
      height: 22px;
      font-size: 11px;
    }
  }
  @media (max-width: 480px) {
    .tab-button {
      padding: 6px 10px;
      font-size: 12px;
      margin-right: 4px;
    }
    .tab-button .counter {
      width: 20px;
      height: 20px;
      font-size: 10px;
    }
    .tab-button .uncounter {
      width: 20px;
      height: 20px;
      font-size: 10px;
    }
  }

  .tab-content {
    display: none;
    padding: 5px;
    width: 100%;
  }

  /* CSS برای پیام‌ها */
  .success-message {
    color: green;
    /* رنگ سبز برای پیام‌های موفقیت */
  }

  .error-message {
    color: red;
    /* رنگ قرمز برای پیام‌های خطا */
  }

  /* .container {
                              max-width: 90%;
                              margin: 0 auto;
                              background-color: #fff;
                              padding: 20px;
                              border-radius: 8px;
                              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                          }

                          h2 {
                              text-align: center;
                              margin-bottom: 20px;
                          }

                          .form-group {
                              display: flex;
                              justify-content: space-between;
                              margin-bottom: 15px;
                          }

                          .form-group label {
                              font-weight: bold;
                              width: 45%;
                          }

                          .form-group input,
                          .form-group p {
                              width: 50%;


                          }

                          .form-group input {
                              text-align: right;
                          } */

  #search-section {
    margin-bottom: 30px;
    text-align: center;
  }

  #search-section input {
    width: 70%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }

  #search-section button {
    padding: 10px 20px;
    background-color: #28a745;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  #search-section button:hover {
    background-color: #218838;
  }

  .two-column {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .two-column .form-group {
    width: 80%;
  }

  .contact-info-container_top {
    flex: 1;
    margin: 1px;
    padding: 1px;
    background-color: transparent;
  }
  .contact-info-container_top .info-item {
    margin-bottom: 1px;
    align-items: center;
    text-align: center;
  }

  .contact-info-container_top .info-item label {
    display: block;
    font-size: 14px;
    color: #555;
    margin-bottom: 2px;
  }
  .avaynil-contactcredit-td {
    border: none;
    padding: 2px;
  }

  .contact-info-container_top .info-item span {
    display: block;
    font-size: 14px;
    padding: 2px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
  .ayavnil-contact-info-main {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: 0;
    padding-top: 0;
    overflow-x: hidden;
  }

  .ayavnil-contact-info-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
  }

  .contact-info-container {
    flex: 1;
    width: 100%;
    padding: 4px;
    background-color: #f5fffa;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .contact-info-container .info-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    text-align: right;
    margin-bottom: 2px;
    width: 100%;
    box-sizing: border-box;
  }

  .contact-info-container .info-item * {
    max-width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
  }

  .contact-info-container-tag {
    flex: 1;
    width: 90%;
    padding: 4px;
    background-color: #f5fffa;
    border: 1px solid #ddd;
    border-radius: 5px;
  }

  .contact-info-container .info-item label {
    display: block;
    font-size: 14px;
    color: #555;
    margin-bottom: 2px;
  }

  .contact-info-container .info-item span {
    display: block;
    font-size: 12px;
    padding: 2px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }

  @media (max-width: 768px) {
    .contact-info-container .info-item span {
      font-size: 10px;
    }
  }
  .contact-info-container .status-active {
    color: green;
  }

  .contact-info-container .status-inactive {
    color: red;
  }

  .contact-info-container .result-positive {
    color: green;
  }

  .contact-info-container .result-negative {
    color: red;
  }
  .avaynil-inline-block {
    display: inline-block;
  }

  .avaynil-inline-block_info {
    flex: 1; /* همه آیتم‌ها فضای مساوی می‌گیرند */
    text-align: center; /* متن وسط چین باشد */
    padding: 10px;
    border: 1px solid #ddd; /* برای زیبایی */
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.86);
  }
  .avaynil-inline-block_info .input {
    display: block;
    font-size: 14px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f5fffa;
    color: #f1afaf;
  }

  .scrollable-div {
    width: 99%; /* عرض ثابت برای div */
    height: 300px; /* ارتفاع ثابت برای div */
    padding: 5px;
    margin: 5px;
    overflow: auto; /* به محض اینکه محتوا از اندازه‌ی div بزرگتر شود، اسکرول نمایش داده می‌شود */
  }

  /* css personel */
  /* استایل کلی فقط برای فرم و جدول مشخص */
  #avaynil-personal-container {
    max-width: 800px;
    margin: auto;
    padding: 20px;
    background: linear-gradient(135deg, #f9f9f9, #eef1f5);
    border-radius: 12px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  }

  /* استایل فرم فقط برای فرم مشخص */
  #avaynil-form {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    /* width: 100%;
                              max-width: 80%; */
    margin: 0 auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  #avaynil-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
  }

  #avaynil-form input {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
  }

  #avaynil-form input:focus {
    border-color: #007bff;
    outline: none;
  }

  #avaynil-submit {
    background-color: #28a745;
    color: #fff;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
  }

  #avaynil-submit:hover {
    background-color: #218838;
  }
  #avaynil-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
  }

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

  #avaynil-table th {
    background-color: #007bff;
    color: white;
    font-weight: bold;
  }

  #avaynil-table tbody tr:nth-child(even) {
    background-color: #f2f2f2;
  }

  #avaynil-table tbody tr:hover {
    background-color: #e2e2e2;
  }

  #avaynil-table td {
    color: #333;
  }

  #avaynil-table td a {
    text-decoration: none;
    color: #007bff;
  }

  #avaynil-table td a:hover {
    text-decoration: underline;
  }
  #avaynil-table a.avaynil-edit-btn,
  #avaynil-table a.avaynil-delete-btn {
    text-decoration: none;
    color: #007bff;
    padding: 5px 10px;
    border-radius: 4px;
    background-color:transparent;
    border: none;
  }

  #avaynil-table a.avaynil-edit-btn:hover,
  #avaynil-table a.avaynil-delete-btn:hover {
    border-color: #007bff;
  }

  #avaynil-table a.avaynil-delete-btn {
    
    color: #dc3545;
  }
  .delete-btn {
    border-color: transparent;
    background-color: transparent;
  }
  .delete-btn-shop {
    border-color: transparent;
    background-color: transparent;
    padding: 5px 10px;
    margin: 20px;
  }
  /* پس‌زمینه محو هنگام باز شدن پاپ‌آپ */
  #avaynil_popup_overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
  }
  /* محدود کردن ارتفاع پاپ‌آپ */
  #avaynil_popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    max-width: 50%;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    opacity: 0;
    transition: all 0.3s ease-in-out;
  }

  #modal_add_cmd_in_old_cmd_main {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
  }

  .av_Sales_expert_cmd_div_cls {
    display: none;
  }
  .div_personel_select_task_cls {
    display: none;
  }
  .task-and-status-div {
    display: none;
  }
  /* محدود کردن ارتفاع پاپ‌آپ */
  /* @font-face {
                              font-family: 'AvSans';
                              src: url('../fonts/IRANSansWeb-fa.woff2') format('woff2'),
                                  url('../fonts/IRANSansWeb.woff') format('woff');
                              font-weight: normal;
                              font-style: normal;
                              font-display: swap;
                          }
          */
  /* اعمال فونت به فرم افزونه و تمام اجزای داخل آن */

  .avaynil-plugin-info {
    max-width: 400px;
    margin: 30px auto;
    background: linear-gradient(145deg, #ffffff, #e6e6e6);
    border-radius: 15px;
    box-shadow: 10px 10px 20px #bebebe, -10px -10px 20px #ffffff;
    padding: 25px;
    direction: rtl;
    color: #333;
  }
  .avaynil-plugin-info h3 {
    text-align: center;
    color: #0066cc;
    margin-bottom: 20px;
  }
  .avaynil-plugin-info p {
    margin: 10px 0;
    font-size: 15px;
    line-height: 1.6;
  }
  .avaynil-plugin-info strong {
    color: #444;
  }

  .avaynil-invoice-box {
    width: 420px;
    margin: 40px auto;
    padding: 30px;
    border-radius: 25px;
    background: #e0e0e0;
    box-shadow: 15px 15px 30px #bebebe, -15px -15px 30px #ffffff;
    text-align: center;
    direction: rtl;
    color: #333;
  }

  .avaynil-invoice-box h2 {
    margin: 15px 0 5px;
    color: #0073aa;
    font-size: 18px;
  }

  .avaynil-invoice-box h1 {
    margin: 10px 0;
    font-size: 28px;
    color: #222;
    font-weight: bold;
  }
  /* avaynil_style.css */
  /* ===========================
                          فرم کلی و کانتینر
                          =========================== */

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  select,
  textarea {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
    transition: all 0.3s ease;
  }

  input:focus,
  select:focus,
  textarea:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
  }

  textarea {
    resize: vertical;
    min-height: 80px;
    max-height: 200px;
  }

  /* ===========================
                          ردیف‌ها و گروه‌ها
                          =========================== */
  /* #avaynil-daryaft-form .wrap {
                              background-color: #f9f9f9;
                              padding: 25px;
                              border-radius: 10px;
                              box-shadow: 0 4px 15px rgba(0,0,0,0.1);
                          } */

  #avaynil-daryaft-form .container {
    max-width: 900px;
    margin: 0 auto;
    padding: 10px;
  }

  /* ===========================
                          عناوین
                          =========================== */
  #avaynil-daryaft-form h1,
  #avaynil-daryaft-form h4 {
    color: #0073aa;
    text-align: center;
    margin-bottom: 20px;
    font-weight: 600;
  }

  /* ===========================
          
                          =========================== */
  #avaynil-daryaft-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: #555;
  }
  #hsf-tab input[type="text"],
  #hsf-tab input[type="password"],
  #hsf-tab input[type="number"],
  #bale-tab input[type="text"],
  #whatsapp-tab input[type="text"],
  #menulink-tab input[type="text"],
  #menuremainder-tab input[type="text"],
  #factorinfo-tab input[type="text"],
  #filter-form_sanad input[type="text"],
  #avaynil-daryaft-form input[type="text"],
  #avaynil-daryaft-form input[type="email"],
  #avaynil-daryaft-form input[type="password"],
  #avaynil-daryaft-form input[type="number"],
  #avaynil-daryaft-form input[type="date"],
  #avaynil-daryaft-form select,
  #avaynil-daryaft-form textarea {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
    transition: all 0.3s ease;
  }

  #avaynil-daryaft-form input:focus,
  #avaynil-daryaft-form select:focus,
  #avaynil-daryaft-form textarea:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
  }

  #avaynil-daryaft-form textarea {
    resize: vertical;
    min-height: 80px;
    max-height: 200px;
  }

  #avaynil-daryaft-form .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
  }

  #avaynil-daryaft-form .form-group {
    flex: 1;
    min-width: 200px;
  }

  #avaynil-daryaft-form .form-group.full-width {
    flex: 1 0 100%;
  }

  /* ===========================
                          دکمه‌ها
                          =========================== */
  #avaynil-daryaft-form .btn-submit,
  #avaynil-daryaft-form .btn-add-shop {
    background-color: #007bff;
    color: #ffffff;
    padding: 10px 20px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  #avaynil-daryaft-form .btn-submit:hover,
  #avaynil-daryaft-form .btn-add-shop:hover {
    background-color: #0056b3;
  }

  /* ===========================
                          جدول و هدر
                          =========================== */
  #avaynil-daryaft-form table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
  }

  #avaynil-daryaft-form th,
  #avaynil-daryaft-form td {
    padding: 10px;
    text-align: center;
    border: 1px solid #ddd;
    font-size: 13px;
  }

  #avaynil-daryaft-form .thead-light-blue {
    background-color: #07aae0;
    color: #ffffff;
  }

  /* ===========================
                          تصاویر و پیش‌نمایش
                          =========================== */
  #avaynil-daryaft-form .img-box {
    position: relative;
    display: inline-block;
    margin: 5px;
  }

  #avaynil-daryaft-form .img-box img {
    width: 40px;
    height: 40px;
    border: 1px solid #ccc;
    padding: 3px;
    border-radius: 50%;
    object-fit: cover;
  }

  #avaynil-daryaft-form .img-box button.remove-img-server {
    position: absolute;
    top: -5px;
    right: -5px;
    border: none;
    background-color: #ff4d4d;
    color: #fff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.3s;
  }

  #avaynil-daryaft-form .img-box button.remove-img-server:hover {
    background-color: #cc0000;
  }
  /* دکمه‌های آپلود و دوربین */
  #avaynil-daryaft-form .btn-upload,
  #avaynil-daryaft-form .btn-camera,
  #avaynil-daryaft-form .btn-add-item {
    display: block;
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  /* رنگ‌ها */
  #avaynil-daryaft-form .btn-upload {
    background-color: #6c757d;
    color: #fff;
  }
  #avaynil-daryaft-form .btn-upload:hover {
    background-color: #5a6268;
  }

  #avaynil-daryaft-form .btn-camera {
    background-color: #17a2b8;
    color: #fff;
  }
  #avaynil-daryaft-form .btn-camera:hover {
    background-color: #138496;
  }

  #avaynil-daryaft-form .btn-add-item {
    background-color: #007bff;
    color: #fff;
  }
  #avaynil-daryaft-form .btn-add-item:hover {
    background-color: #0056b3;
  }

  /* Drag & Drop Zone */
  #avaynil-daryaft-form .drag-drop-zone {
    border: 2px dashed #007bff;
    border-radius: 6px;
    padding: 15px;
    text-align: center;
    color: #555;
    font-size: 14px;
    background-color: #f9f9f9;
    transition: background 0.3s;
    cursor: pointer;
    margin-bottom: 12px;
  }
  #avaynil-daryaft-form .drag-drop-zone:hover {
    background-color: #eef6ff;
  }

  /* ===========================
                          ریسپانسیو
                          =========================== */
  /* ===========================
                          استایل مخصوص موبایل و تبلت
                          =========================== */
  @media (max-width: 991px) {
    #avaynil-daryaft-form button {
      font-size: 10px; /* کوچیک‌تر شدن فونت */
      padding: 6px 8px; /* کمتر شدن پدینگ */
      border-radius: 4px; /* گوشه نرم‌تر */
    }

    #avaynil-daryaft-form .delete-button {
      width: 100%;
      height: 30px;
      font-size: 12px;
      text-align: center;
      margin-bottom: 10px;
    }
    #avaynil-daryaft-form .btn-upload,
    #avaynil-daryaft-form .btn-camera,
    #avaynil-daryaft-form .btn-add-item {
      font-size: 10px;
      padding: 6px 10px;
    }
    #avaynil-daryaft-form #upload_image_button,
    #avaynil-daryaft-form #take_picture_button,
    #avaynil-daryaft-form .btn-add-item {
      font-size: 10px; /* فونت کوچیک‌تر */
      padding: 6px 10px; /* پدینگ کمتر */
      border-radius: 6px; /* گوشه نرم‌تر */
    }
    #avaynil-daryaft-form .drag-drop-zone {
      font-size: 10px;
      padding: 10px;
    }
    #avaynil-daryaft-form label {
      font-size: 10px;
      margin-bottom: 4px;
    }

    #avaynil-daryaft-form p,
    #avaynil-daryaft-form input,
    #avaynil-daryaft-form select,
    #avaynil-daryaft-form textarea {
      font-size: 10px !important;
      padding: 6px 8px;
    }

    /* مخصوص فیلد تاریخ */
    #avaynil-daryaft-form input.persiandate,
    #avaynil-daryaft-form input.pdp-el {
      font-size: 10px !important;
    }
    #avaynil-daryaft-form textarea {
      min-height: 60px;
      max-height: 150px;
    }

    #avaynil-daryaft-form .form-row {
      flex-direction: column;
      gap: 10px;
    }

    #avaynil-daryaft-form .form-group {
      min-width: 100%;
    }

    /* دکمه‌ها */
    #avaynil-daryaft-form .btn-submit,
    #avaynil-daryaft-form .btn-add-shop {
      font-size: 10px;
      padding: 8px 12px;
      border-radius: 4px;
    }

    /* جدول */
    #avaynil-daryaft-form table {
      font-size: 10px;
      display: block;
      overflow-x: auto;
      white-space: nowrap;
    }

    #avaynil-daryaft-form th,
    #avaynil-daryaft-form td {
      padding: 6px;
      font-size: 10px;
    }

    /* تصاویر */
    #avaynil-daryaft-form .img-box img {
      width: 30px;
      height: 30px;
    }

    #avaynil-daryaft-form .img-box button.remove-img-server {
      width: 15px;
      height: 15px;
      font-size: 8px;
      top: -4px;
      right: -4px;
    }

    #avaynil-daryaft-form .avaynil-card-label {
      font-size: 10px;
    }
    .main-form h4 {
      font-size: 10px;
    }
  }

  .personel-button {
    background-color: #2e8b57;
    margin: 2px;
    padding: 2px 2px;
    border-radius: 4px;
    color: white;
    width: auto;
    height: 30px;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.3s;
  }

  .personel-button:hover {
    background-color: #044d1c;
  }

  .avaynil-category-info-item {
    display: flex;
    width: 100%;
    align-items: center; /* وسط‌چین عمودی */
    justify-content: center; /* وسط‌چین افقی */
    gap: 1px; /* فاصله بین آیتم‌ها */
    text-align: center;
    margin: 5px 2px;
    flex-wrap: wrap; /* برای واکنش‌گرایی در موبایل */
  }
  .avaynil-category-info-item label {
    margin: 0;
    font-weight: bold;
  }

  .avaynil-category-info-item select,
  .avaynil-category-info-item button {
    padding: 5px 10px;
    font-size: 14px;
  }
  .select2 {
    flex-grow: 1; /* اجازه دهد که select فضای بیشتری بگیرد */
    max-width: 60%; /* حداکثر عرض برای زیبایی */
    margin: 5px;
    font-size: 14px;
  }
  #whatsapp_ok {
    cursor: pointer;
  }
  @media (max-width: 768px) {
    .personel-button {
      font-size: 9px !important;
      height: 40px !important;
      width: 20px !important;
      writing-mode: vertical-rl; /* متن عمودی از بالا به پایین */
      transform: rotate(180deg); /* جهت خواندن از پایین به بالا */
      text-align: center;
      padding: 2px;
    }

    .select2 {
      font-size: 10px;
    }
  }

  .select2-selection--single {
    font-size: 14px !important;
  }
  @media (max-width: 768px) {
    .select2-selection--single {
      font-size: 10px !important;
    }

 

    .personel-category-button {
      height: 20px !important;
      font-size: 10px !important;
      margin: 1px !important;
      padding: 1px 1px !important;
    }
  }

 

  .label-button:hover {
    background-color: #f5b77a;
  }

  
  .code-hesabfa-button {
    background-color: #0f7be0;
    border: 2px solid white; /* اضافه کردن بوردر سفید */
    margin: 1px;
    padding: 2px 5px;
    border-radius: 60px;
    color: rgb(255, 255, 255);
    width: auto;
    height: 50px;
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    transition: background-color 0.3s, border-color 0.3s;
  }
  .personel-category-button {
    background: linear-gradient(135deg, #f59e0b, #f4881c);
    border: none;
    margin: 3px;
    padding: 2px 6px;
    border-radius: 12px;
    color: #fff;
    font-size: 11px;
    font-weight: 100;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  }
  .container_padding_main-form {
    width: 100%;
  }
  .edit-button:hover {
    background-color: #e0a800;
  }

  .edit-button.disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  .container {
    padding: 20px;
  }

  .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }

  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
  }

  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
  }

  input:checked + .slider {
    background-color: #2196f3;
  }

  input:checked + .slider:before {
    transform: translateX(26px);
  }

  .slider.round {
    border-radius: 34px;
  }

  .slider.round:before {
    border-radius: 50%;
  }

  .hidden-column {
    display: none;
  }

  .dropdown-content {
    display: none;
    /* Hidden by default */
    position: absolute;

    background-color: #f9f9f9;
    min-width: 160px;
    max-width: 30%;
    border: 1px solid #ddd;
    z-index: 1;
  }

  .dropdown-content a {
    max-width: 30%;
    padding: 8px 16px;
    text-decoration: none;
    display: block;
    cursor: pointer;
    /* Makes it clear that links are clickable */
  }

  .dropdown-content a:hover {
    background-color: #f1f1f1;
    max-width: 30%;
  }

  /* Show the dropdown menu when the parent .dropdown is hovered or clicked */
  .dropdown.show .dropdown-content {
    display: block;
    /* Make the menu visible */
  }

  .pt-3 {
    margin-top: 0px;
    margin-left: 10px;
  }

  .pt-3 img {
    width: 70px;
    /* عرض تصویر */
    height: 70px;
    /* ارتفاع تصویر */
    border-radius: 50%;
    /* ایجاد دایره */
    object-fit: cover;
    /* برای حفظ نسبت تصویر در هنگام تغییر سایز */
  }

  .item-fields {
    position: relative;
    padding: 20px;
    border: 1px solid #ddd;
    margin-bottom: 20px;
  }

  .delete-icon {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }

  .delete-button {
    width: 100%;
    text-align: center;
    font-size: 12px;
  }

  .item-fields {
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 10px;
  }

  .item-fields .row {
    margin: 0;
  }

  .item-fields .col-md-1 {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .item-fields .col-md-11 {
    padding-left: 15px;
  }

  /* تغییر رنگ پس‌زمینه ردیف تیتر (th) و رنگ متن */
  thead.thead-light-blue th {
    background-color: #0e91e9;
    /* رنگ پس‌زمینه آبی */
    color: white;
    /* رنگ متن سفید */
    text-align: center;
    /* مرکز کردن متن */
    padding: 10px;
    /* ایجاد فضای داخلی */
    font-size: 12px;
  }

  /* رنگ‌بندی متن جدول برای دیده‌شدن */
  table#avaynil-data-table td {
    color: #333;
    /* رنگ متن خاکستری تیره */
    padding: 5px;
    /* فضای داخلی سلول‌ها */
    font-size: 12px;
  }

  /* استایل‌بندی جدول */
  table#avaynil-data-table {
    width: 100%;
    border-collapse: collapse;
    /* حذف فاصله بین سلول‌ها */
    margin-top: 20px;
    /* فاصله از بالا */
  }

  /* تغییر رنگ پس‌زمینه برای ردیف‌های فرد و زوج جهت خوانایی بهتر */
  table#avaynil-data-table tr:nth-child(odd) {
    background-color: #e2e1e1;
    /* پس‌زمینه ردیف‌های فرد */
  }

  table#avaynil-data-table tr:nth-child(even) {
    background-color: #ffffff;
    /* پس‌زمینه ردیف‌های زوج */
  }

  /* تنظیمات اضافی برای دکمه‌ها */
  /* button {
                                      margin: 5px;
                                      padding: 5px 10px;
                                      border-radius: 4px;
                                      font-size: 10px;
          
                                  } */
  /* 📱 موبایل (عرض تا 600px) */
  @media (max-width: 600px) {
    table#avaynil-data-table {
      font-size: 10px; /* فونت کوچکتر */
    }

    table#avaynil-data-table td {
      padding: 3px; /* کاهش فاصله داخلی سلول‌ها */
    }

    /* جدول اسکرول‌پذیر شود */
    .table-responsive {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    table#avaynil-data-table {
      width: 600px; /* حفظ عرض اصلی جدول برای اسکرول */
    }
  }

  /* 📱📲 تبلت (عرض بین 601px تا 1024px) */
  @media (min-width: 601px) and (max-width: 1024px) {
    table#avaynil-data-table {
      font-size: 10px; /* کمی کوچکتر از دسکتاپ */
    }

    table#avaynil-data-table td {
      padding: 4px;
    }
  }

  .btn-pagination {
    margin: 0 5px;
    /* فاصله بین دکمه‌ها */
  }

  .btn-pagination:hover {
    opacity: 0.8;
    /* تغییر شفافیت هنگام هاور */
  }

  .btn {
    font-size: 14px;
    /* اندازه فونت */
    padding: 8px 12px;
    /* فاصله داخلی */
  }

  .btn-warning,
  .btn-success,
  .btn-danger {
    transition: background-color 0.3s;
    /* انیمیشن تغییر رنگ */
  }

  .btn-warning:hover,
  .btn-success:hover,
  .btn-danger:hover {
    opacity: 0.85;
    /* تغییر شفافیت هنگام هاور */
  }

  td {
    padding: 10px;
    /* فاصله درون سلول جدول */
  }

  .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
  }

  .btn-pagination {
    background-color: #007bff;
    /* رنگ زمینه */
    color: white;
    /* رنگ متن */
    border: none;
    /* بدون حاشیه */
    padding: 10px 15px;
    /* فاصله داخلی */
    margin: 0 5px;
    /* فاصله بین دکمه‌ها */
    border-radius: 5px;
    /* گوشه‌های گرد */
    cursor: pointer;
    /* تغییر اشاره‌گر */
    font-size: 16px;
    /* اندازه متن */
    transition: background-color 0.3s;
    /* انیمیشن تغییر رنگ */
  }

  .btn-pagination:hover {
    background-color: #0056b3;
    /* رنگ زمینه هنگام هاور */
  }

  .page-numbers {
    padding: 10px 15px;
    /* فاصله داخلی */
    margin: 0 5px;
    /* فاصله بین اعداد */
    border-radius: 5px;
    /* گوشه‌های گرد */
    color: #007bff;
    /* رنگ متن اعداد */
    text-decoration: none;
    /* بدون زیرخط */
  }

  .page-numbers:hover {
    background-color: #f0f0f0;
    /* رنگ زمینه هنگام هاور */
  }

  .current {
    background-color: #007bff;
    /* رنگ زمینه برای صفحه فعلی */
    color: white;
    /* رنگ متن برای صفحه فعلی */
  }

  .btn-pagination:disabled {
    background-color: #cccccc;
    /* رنگ زمینه برای دکمه‌های غیرفعال */
    cursor: not-allowed;
    /* تغییر اشاره‌گر به غیرفعال */
  }

  .tab-container {
    margin-bottom: 4px;
    width: 100%;
  }

  .tab-button {
    background-color: #f1f1f1;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    display: inline-flex; /* متن + شمارنده کنار هم */
    align-items: center;
    gap: 8px; /* فاصله بین متن و شمارنده */
    margin-right: 10px;
    font-weight: bold;
    border-radius: 4px;
    transition: background-color 0.3s;
    font-size: 14px;
  }

  .tab-button:hover {
    background-color: #ddd;
  }

  .tab-button.active {
    background-color: #0073aa;
    color: white;
  }

  /* شمارنده دایره‌ای */
  .tab-button .counter,
  .tab-button .uncounter {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    cursor: default;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3),
      /* سایه بیرونی پایین */ inset 0 -2px 4px rgba(0, 0, 0, 0.3),
      /* سایه داخلی پایین */ inset 0 2px 4px rgba(255, 255, 255, 0.4); /* سایه روشن بالا برای برجستگی */
    background-image: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.25),
      rgba(0, 0, 0, 0.1)
    ); /* گرادیان براق */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .tab-button .counter {
    background-color: #f17725;
  }

  .tab-button .uncounter {
    background-color: #258ef1;
  }
  /* ریسپانسیو */
  @media (max-width: 768px) {
    .tab-button {
      padding: 8px 12px;
      font-size: 13px;
      margin-right: 5px;
    }
    .tab-button .counter {
      width: 22px;
      height: 22px;
      font-size: 11px;
    }
    .tab-button .uncounter {
      width: 22px;
      height: 22px;
      font-size: 11px;
    }
  }
  @media (max-width: 480px) {
    .tab-button {
      padding: 6px 10px;
      font-size: 12px;
      margin-right: 4px;
    }
    .tab-button .counter {
      width: 20px;
      height: 20px;
      font-size: 10px;
    }
    .tab-button .uncounter {
      width: 20px;
      height: 20px;
      font-size: 10px;
    }
  }

  .tab-content {
    display: none;
    padding: 5px;
    width: 100%;
  }

  /* CSS برای پیام‌ها */
  .success-message {
    color: green;
    /* رنگ سبز برای پیام‌های موفقیت */
  }

  .error-message {
    color: red;
    /* رنگ قرمز برای پیام‌های خطا */
  }

  .container {
    max-width: 90%;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  h2 {
    text-align: center;
    margin-bottom: 20px;
  }

  .form-group {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
  }

  .form-group label {
    font-weight: bold;
    width: 45%;
  }

  .form-group input,
  .form-group p {
    width: 50%;
  }

  .form-group input {
    text-align: right;
  }

  #search-section {
    margin-bottom: 30px;
    text-align: center;
  }

  #search-section input {
    width: 70%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }

  #search-section button {
    padding: 10px 20px;
    background-color: #28a745;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  #search-section button:hover {
    background-color: #218838;
  }

  .two-column {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .two-column .form-group {
    width: 80%;
  }

  .contact-info-container_top {
    flex: 1;
    margin: 1px;
    padding: 1px;
    background-color: transparent;
  }
  .contact-info-container_top .info-item {
    margin-bottom: 1px;
    align-items: center;
    text-align: center;
  }

  .contact-info-container_top .info-item label {
    display: block;
    font-size: 14px;
    color: #555;
    margin-bottom: 2px;
  }
  .avaynil-contactcredit-td {
    border: none;
    padding: 2px;
  }

  .contact-info-container_top .info-item span {
    display: block;
    font-size: 14px;
    padding: 2px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
  .ayavnil-contact-info-main {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: 0;
    padding-top: 0;
    overflow-x: hidden;
  }

  .ayavnil-contact-info-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
  }

  .contact-info-container {
    flex: 1;
    width: 100%;
    padding: 4px;
    background-color: #f5fffa;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .contact-info-container .info-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    text-align: right;
    margin-bottom: 2px;
    width: 100%;
    box-sizing: border-box;
  }

  .contact-info-container .info-item * {
    max-width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
  }

  .contact-info-container-tag {
    flex: 1;
    width: 90%;
    padding: 4px;
    background-color: #f5fffa;
    border: 1px solid #ddd;
    border-radius: 5px;
  }

  .contact-info-container .info-item label {
    display: block;
    font-size: 14px;
    color: #555;
    margin-bottom: 2px;
  }

  .contact-info-container .info-item span {
    display: block;
    font-size: 12px;
    padding: 2px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }

  @media (max-width: 768px) {
    .contact-info-container .info-item span {
      font-size: 10px;
    }
  }
  .contact-info-container .status-active {
    color: green;
  }

  .contact-info-container .status-inactive {
    color: red;
  }

  .contact-info-container .result-positive {
    color: green;
  }

  .contact-info-container .result-negative {
    color: red;
  }
  .avaynil-inline-block {
    display: inline-block;
  }

  .avaynil-inline-block_info {
    flex: 1; /* همه آیتم‌ها فضای مساوی می‌گیرند */
    text-align: center; /* متن وسط چین باشد */
    padding: 10px;
    border: 1px solid #ddd; /* برای زیبایی */
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.86);
  }
  .avaynil-inline-block_info .input {
    display: block;
    font-size: 14px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f5fffa;
    color: #f1afaf;
  }

  .scrollable-div {
    width: 99%; /* عرض ثابت برای div */
    height: 300px; /* ارتفاع ثابت برای div */
    padding: 5px;
    margin: 5px;
    overflow: auto; /* به محض اینکه محتوا از اندازه‌ی div بزرگتر شود، اسکرول نمایش داده می‌شود */
  }

  /* css personel */
  /* استایل کلی فقط برای فرم و جدول مشخص */
  #avaynil-personal-container {
    max-width: 800px;
    margin: auto;
    padding: 20px;
    background: linear-gradient(135deg, #f9f9f9, #eef1f5);
    border-radius: 12px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  }

  /* استایل فرم فقط برای فرم مشخص */
  #avaynil-form {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    width: 100%;
    max-width: 80%;
    margin: 0 auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  #avaynil-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
  }

  #avaynil-form input {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
  }

  #avaynil-form input:focus {
    border-color: #007bff;
    outline: none;
  }

  #avaynil-submit {
    background-color: #28a745;
    color: #fff;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
  }

  #avaynil-submit:hover {
    background-color: #218838;
  }
  #avaynil-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
  }

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

  #avaynil-table th {
    background-color: #007bff;
    color: white;
    font-weight: bold;
  }

  #avaynil-table tbody tr:nth-child(even) {
    background-color: #f2f2f2;
  }

  #avaynil-table tbody tr:hover {
    background-color: #e2e2e2;
  }

  #avaynil-table td {
    color: #333;
  }

  #avaynil-table td a {
    text-decoration: none;
    color: #007bff;
  }

  #avaynil-table td a:hover {
    text-decoration: underline;
  }


  .delete-btn {
    border-color: transparent;
    background-color: transparent;
  }
  .delete-btn-shop {
    border-color: transparent;
    background-color: transparent;
    padding: 5px 10px;
    margin: 20px;
  }
  /* پس‌زمینه محو هنگام باز شدن پاپ‌آپ */
  #avaynil_popup_overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
  }
  /* محدود کردن ارتفاع پاپ‌آپ */
  #avaynil_popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    max-width: 50%;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    opacity: 0;
    transition: all 0.3s ease-in-out;
  }

  #modal_add_cmd_in_old_cmd_main {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
  }

  .av_Sales_expert_cmd_div_cls {
    display: none;
  }
  .task-and-status-div {
    display: none;
  }
  /* محدود کردن ارتفاع پاپ‌آپ */
  #modal_add_cmd_in_old_cmd {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 90%;
    /* height: 50%;
                                    max-height: 70%; */
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
    /* overflow-y: auto; اضافه کردن اسکرول در صورت نیاز */
  }

  /* حالت تبلت */

  #modal_add_lbl_in_old_lbl_main {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
  }
  /* محدود کردن ارتفاع پاپ‌آپ */
  #modal_add_lbl_in_old_lbl {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    max-width: 50%;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    transition: all 0.3s ease-in-out;
  }

  /* تنظیم ارتفاع لیست محصولات */
  #avaynil_popup_list {
    max-height: 200px; /* حدود ۴ ردیف */
    overflow-y: auto;
    padding-right: 10px; /* فاصله برای اسکرول */
  }

  /* استایل اسکرول */
  #avaynil_popup_list::-webkit-scrollbar {
    width: 6px;
  }

  #avaynil_popup_list::-webkit-scrollbar-thumb {
    background: #007bff;
    border-radius: 10px;
  }

  #avaynil_popup_list::-webkit-scrollbar-track {
    background: #f1f1f1;
  }

  /* استایل جدول */
  #avaynil_popup_list table {
    width: 100%;
    border-collapse: collapse;
  }

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

  #avaynil_popup_list th {
    background: #007bff;
    color: white;
  }

  /* افکت ورود و خروج */
  #avaynil_popup.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  #avaynil_popup.hide {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }

  /* دکمه بستن */
  #avaynil_popup_close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: red;
    color: white;
    border: none;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 5px;
    cursor: pointer;
  }

  #avaynil_popup_close:hover {
    background: darkred;
  }

  /* استایل جدول */
  #avaynil_popup_list table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
  }

  #avaynil_popup_list th,
  #avaynil_popup_list td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    text-align: center;
    font-size: 12px;
  }

  #avaynil_popup_list th {
    background: #007bff;
    color: white;
  }
  #avaynil-form-container {
    margin: 0 auto;
    padding: 20px;
    height: 100%;
    background-color: #f4f4f4;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  #avaynil-form-container h2 {
    text-align: center;
    color: #333;
  }
  #avaynil-form-container label {
    font-size: 12px;
    /*font-weight: bold;*/
    margin-bottom: 8px;
    display: block;
  }
  #avaynil-form-container input[type="text"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    margin-left: 0;
  }
  #avaynil-form-container button {
    width: 100%;
    padding: 12px;
    background-color: #4caf50;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  #avaynil-form-container button:hover {
    background-color: #45a049;
  }
  #result {
    margin-top: 20px;
    text-align: center;
    font-size: 16px;
    color: #ff0000;
  }

  .pagination-container {
    margin-top: 15px;
    text-align: center;
  }

  .page-btn {
    background-color: #0073aa;
    color: white;
    border: none;
    padding: 6px 12px;
    margin: 0 3px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 14px;
    transition: background-color 0.3s;
  }

  .page-btn:hover {
    background-color: #005177;
  }

  .page-btn.active {
    background-color: #00a0d2;
    font-weight: bold;
  }
  .avaynil-contacts-pagination a,
  .avaynil-contacts-pagination span {
    display: inline-block;
    margin: 0 5px;
    padding: 8px 12px;
    border: 1px solid #ccc;
    background: #f9f9f9;
    color: #333;
    border-radius: 4px;
    text-decoration: none;
  }

  .avaynil-contacts-pagination .current {
    background: #007bff;
    color: #fff;
    font-weight: bold;
  }

  /************************************new form */
  .avaynil-form-daryaft-container {
    max-width: 100%;
    border: 2px solid #ccc;
    border-radius: 15px;
    padding: 30px;
    background-color: #fdfdfd;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
  }

  .avaynil-form-daryaft-title {
    font-weight: bold;
    color: #2c3e50;
    text-align: center;
    margin-bottom: 30px;
  }

  .avaynil-form-daryaft-section {
    margin-bottom: 25px;
  }

  .avaynil-form-daryaft-section label {
    font-weight: bold;
    color: #34495e;
    margin-bottom: 8px;
    display: block;
  }

  .avaynil-form-daryaft-section textarea,
  .avaynil-form-daryaft-section input,
  .avaynil-form-daryaft-section select {
    border-radius: 8px;
  }

  .avaynil-form-daryaft-button {
    margin-top: 10px;
    font-weight: bold;
    border-radius: 10px;
  }

  .avaynil-form-daryaft-dropdown .dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 10px;
    border-radius: 8px;
    z-index: 10;
  }

  .avaynil-form-daryaft-dropdown:hover .dropdown-content {
    display: block;
  }

  #customAlert {
    margin-top: 15px;
    border-radius: 10px;
  }

  #image_preview img {
    /* max-width: 100%; */
    border-radius: 10px;
    margin-top: 3px;
  }
  .btn-daryaft-search-button {
    background-color: #007bff;
    color: #fff !important;
    padding: 6px 12px;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
  }
  .btn-daryaft-search-button:hover {
    background-color: #0056b3;
  }

  .avaynil_Acquaintance_form {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 15px;
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
  }
  .avaynil_Acquaintance_form input[type="text"] {
    width: 80%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
  }
  .avaynil_Acquaintance_form input[type="submit"] {
    background-color: #28a745;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }
  .avaynil_Acquaintance_table {
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
    border-collapse: collapse;
  }
  .avaynil_Acquaintance_table th,
  .avaynil_Acquaintance_table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
  }
  .avaynil_Acquaintance_delete {
    background-color: transparent;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }
  /**********************************/
  .avaynil_ostan_form {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 15px;
    width: 100%;
    /* max-width: 600px; */
    margin: 20px auto;
  }
  .avaynil_ostan_form input[type="text"] {
    width: 80%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
  }
  .avaynil_ostan_form input[type="submit"] {
    background-color: #28a745;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }
  .avaynil_ostan_table {
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
    border-collapse: collapse;
  }
  .avaynil_ostan_table th,
  .avaynil_ostan_table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
  }
  .avaynil_ostan_delete {
    background-color: transparent;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }
  /**************************************/
  /**********************************/
  .avaynil_cities_form {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 15px;
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
  }
  .avaynil_cities_form input[type="text"] {
    width: 80%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
  }
  .avaynil_cities_form input[type="submit"] {
    background-color: #28a745;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }
  .avaynil_cities_table {
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
    border-collapse: collapse;
  }
  .avaynil_cities_table th,
  .avaynil_cities_table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
  }
  .avaynil_cities_delete {
    background-color: #dc3545;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }
  /**************************************/

  .avaynil_Transaction_stage_form {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 15px;
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
  }
  .avaynil_Transaction_stage_form input[type="text"] {
    width: 80%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
  }
  .avaynil_Transaction_stage_form input[type="submit"] {
    background-color: #28a745;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }
  .avaynil_Transaction_stage_table {
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
    border-collapse: collapse;
  }
  .avaynil_Transaction_stage_table th,
  .avaynil_Transaction_stage_table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
  }
  .avaynil_Transaction_stage_delete {
    background-color:transparent;
    color: white;
    padding: 5px 10px;
    border: none;
    cursor: pointer;
  }

  .avaynil_label_form {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 15px;
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
  }
  .avaynil_label_form input[type="text"] {
    width: 80%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
  }
  .avaynil_label_form input[type="submit"] {
    background-color: #28a745;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }
  .avaynil_label_table {
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
    border-collapse: collapse;
  }
  .avaynil_label_table th,
  .avaynil_label_table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
  }
  .avaynil_label_delete {
    background-color: #dc3545;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }
  .personel-label-button {
    background-color: #f41c1c;
    border: 2px solid white; /* اضافه کردن بوردر سفید */
    margin: 1px;
    padding: 2px 5px;
    border-radius: 60px;
    color: rgb(255, 255, 255);
    width: auto;
    height: 40px;
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    transition: background-color 0.3s, border-color 0.3s;
  }

  .personel-label-button:hover {
    background-color: #f5b77a;
    border-color: white; /* حفظ رنگ سفید در حالت هاور */
  }

  @media (max-width: 768px) {
    .personel-label-button {
      font-size: 10px;
      height: 30px;
    }
  }
  /****************************************************بانک استایل**/

  .avaynil_notification_form {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 15px;
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
  }
  .avaynil_notification_form input[type="text"] {
    width: 80%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
  }
  .avaynil_notification_form input[type="submit"] {
    background-color: #28a745;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }
  .avaynil_notification_table {
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
    border-collapse: collapse;
  }
  .avaynil_notification_table th,
  .avaynil_notification_table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
  }
  .avaynil_notification_delete {
    background-color: #dc3545;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }
  .avaynil_notification_submit {
    background-color: #f41c1c;
    border: 2px solid white; /* اضافه کردن بوردر سفید */
    margin: 1px;
    padding: 2px 5px;
    border-radius: 10px;
    color: rgb(255, 255, 255);
    width: auto;
    height: 40px;
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    transition: background-color 0.3s, border-color 0.3s;
  }

  .avaynil_notification_submit:hover {
    background-color: #f5b77a;
    border-color: white; /* حفظ رنگ سفید در حالت هاور */
  }
  /************************************************/
  .avaynil_daily_tasks_form {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 15px;
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
  }
  .avaynil_daily_tasks_form input[type="text"] {
    width: 80%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
  }
  .avaynil_daily_tasks_form input[type="submit"] {
    background-color: #28a745;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }

  .avaynil_daily_tasks_submit {
    background-color: #f41c1c;
    border: 2px solid white; /* اضافه کردن بوردر سفید */
    margin: 1px;
    padding: 2px 5px;
    border-radius: 10px;
    color: rgb(255, 255, 255);
    width: auto;
    height: 40px;
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    transition: background-color 0.3s, border-color 0.3s;
  }

  .avaynil_daily_tasks_submit:hover {
    background-color: #f5b77a;
    border-color: white; /* حفظ رنگ سفید در حالت هاور */
  }
  /****************************************************بانک استایل**/
  .avaynil_notification_sms_form {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 15px;
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
  }
  .avaynil_notification_sms_form input[type="text"] {
    width: 80%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
  }
  .avaynil_notification_sms_form input[type="submit"] {
    background-color: #28a745;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }

  .avaynil_notification_sms_delete {
    background-color: #dc3545;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }
  .avaynil_notification_sms_submit {
    background-color: #f41c1c;
    border: 2px solid white; /* اضافه کردن بوردر سفید */
    margin: 1px;
    padding: 2px 5px;
    border-radius: 10px;
    color: rgb(255, 255, 255);
    width: auto;
    height: 40px;
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    transition: background-color 0.3s, border-color 0.3s;
  }

  .avaynil_notification_sms_submit:hover {
    background-color: #f5b77a;
    border-color: white; /* حفظ رنگ سفید در حالت هاور */
  }
  /*****************************************************/

  .avaynil_bank_form {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 15px;
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
  }
  .avaynil_bank_form input[type="text"] {
    width: 80%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
  }
  .avaynil_bank_form input[type="submit"] {
    background-color: #28a745;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }
  .avaynil_bank_table {
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
    border-collapse: collapse;
  }
  .avaynil_bank_table th,
  .avaynil_bank_table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
  }

  .avaynil_bank_submit {
    background-color: #f41c1c;
    border: 2px solid white; /* اضافه کردن بوردر سفید */
    margin: 1px;
    padding: 2px 5px;
    border-radius: 10px;
    color: rgb(255, 255, 255);
    width: auto;
    height: 40px;
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    transition: background-color 0.3s, border-color 0.3s;
  }

  .avaynil_bank_submit:hover {
    background-color: #f5b77a;
    border-color: white; /* حفظ رنگ سفید در حالت هاور */
  }

  /***********************new form contacts ***************/
  .avaynil_new_contacts_container {
    width: 95%;
    direction: rtl;
    padding: 5px;
    background-color: #f9f9f9;
  }

  .avaynil_new_contacts_card {
    background: #fff;
    width: 100%;
    padding: 5px;
    margin: 10px;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  .avaynil_new_contacts_row {
    display: flex;
    margin-bottom: 5px;
    flex-wrap: wrap; /* Ensure the row content wraps on smaller screens */
  }

  .avaynil_new_contacts_col_50,
  .avaynil_new_contacts_col_33,
  .avaynil_new_contacts_col_66,
  .avaynil_new_contacts_col_100 {
    padding: 5px;
    width: 90%;
  }

  .avaynil_new_contacts_col_50 {
    width: 45%;
  }

  .avaynil_new_contacts_col_33 {
    width: 33.3333%;
  }

  .avaynil_new_contacts_col_66 {
    width: 90%;
  }

  .avaynil_new_contacts_image {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #ddd;
    display: block;
    margin: 0 auto;
  }

  /* 📱 Hide image on mobile view */
  @media (max-width: 600px) {
    .avaynil_new_contacts_image {
      display: none;
    }

    .avaynil_new_contacts_col_33,
    .avaynil_new_contacts_col_50 {
      width: 100%; /* Make each column take up the full width */
    }

    .avaynil_new_contacts_button {
      width: 100%; /* Make the button take up full width */
    }
  }

  .avaynil_new_contacts_label {
    display: block;
    margin-bottom: 4px;
    font-weight: bold;
  }

  .avaynil_new_contacts_input,
  .avaynil_new_contacts_textarea {
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 14px;
  }

  .avaynil_new_contacts_button {
    background-color: #007bff;
    color: white;
    padding: 10px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 30px;
    margin-bottom: 2px;
    font-size: 12px;
    transition: background-color 0.3s;
  }

  .avaynil_new_contacts_center {
    text-align: left;
    align-items: end;
    justify-content: center;
  }

  @media (max-width: 768px) {
    .avaynil_new_contacts_col_50,
    .avaynil_new_contacts_col_33 {
      width: 100%;
    }
  }

  .avaynil_new_contacts_input {
    width: 100%;
  }

  /**************************edit form contacts hesabfa */
  .avaynil_edit_contacts_container {
    width: 100%;
    direction: rtl;
    padding: 5px;
    background-color: #f9f9f9;
  }

  .avaynil_edit_contacts_card {
    background: #fff;
    width: 100%;
    padding: 5px;
    margin: 10px;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  .avaynil_edit_contacts_image {
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #ddd;
    display: block;
    margin: 0 auto;
    width: 150px;
    height: 150px;
  }

  .avaynil_search_crm_contact_wrapper {
    position: relative;
    display: inline-block;
    overflow: visible;
  }

  .avaynil_search_crm_contact_image {
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #ddd;
    width: 80px;
    height: 80px;
    display: block;
    margin: 0 auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 1;
    position: relative;
    transform-origin: center center;
  }

  /* افکت هاور بدون تغییر اندازه واقعی */
  .avaynil_search_crm_contact_wrapper:hover .avaynil_search_crm_contact_image {
    transform: scale(2.5); /* فقط بزرگ‌نمایی تصویری */
    z-index: 9999;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  }

  @media (max-width: 768px) {
    .avaynil_search_crm_contact_image {
      width: 40px;
      height: 40px;
    }
    .avaynil_edit_contacts_image {
      width: 80px;
      height: 80px;
    }
    .avaynil_edit_contacts_col_50,
    .avaynil_edit_contacts_col_33 {
      width: 100%;
    }
  }

  .avaynil_edit_contacts_input,
  .avaynil_edit_contacts_textarea {
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 14px;
  }

  .avaynil_edit_contacts_button {
    background-color: #007bff;
    color: white;
    padding: 20px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin: 10px;

    font-size: 12px;
    transition: background-color 0.3s;
  }

  .avaynil_edit_contacts_input {
    width: 100%;
  }

  /************************بانک ست  ***********/
  

  #avaynil_bank_set_select {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 16px;
  }

  .avaynil_bank_set_dualbox {
    display: flex;
    justify-content: space-between;
    gap: 10px;
  }

  .avaynil_bank_set_dualbox select {
    width: 45%;
    height: 250px;
    border: 1px solid #aaa;
    border-radius: 8px;
    padding: 10px;
    font-size: 14px;
    background-color: #fff;
  }

  .avaynil_bank_set_dualbox_buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
  }

  .avaynil_bank_set_dualbox_buttons button {
    padding: 8px 12px;
    font-size: 16px;
    background-color:transparent;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
  }

  .avaynil_bank_set_table,
  .avaynil_bank_set_submit {
    display: block;
    margin-top: 20px;
    width: 100%;
    padding: 12px;
    font-size: 18px;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
  }
  .avaynil_bank_set_table{
    background-color: #0677d3;

  }
  .avaynil_bank_set_submit{
    background-color: #28a745;
    
  }
  .avaynil_bank_set_table:hover{
    background-color: #08518d;

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

  #avaynil_bank_set_table {
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
    border-collapse: collapse;
  }
  #avaynil_bank_set_table th,
  #avaynil_bank_set_table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
  }
  /***************************************/
  .avaynil_daily_tasks_set_container {
    max-width: 700px;
    margin: 30px auto;
    background-color: #fdfdfd;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 0 10px #ddd;
  }

  .avaynil_daily_tasks_set_container label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
    color: #333;
  }

  #avaynil_daily_tasks_set_select {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 16px;
  }

  .avaynil_daily_tasks_set_dualbox {
    display: flex;
    justify-content: space-between;
    gap: 10px;
  }

  .avaynil_daily_tasks_set_dualbox select {
    width: 45%;
    height: 250px;
    border: 1px solid #aaa;
    border-radius: 8px;
    padding: 10px;
    font-size: 14px;
    background-color: #fff;
  }

  .avaynil_daily_tasks_set_dualbox_buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
  }

  .avaynil_daily_tasks_set_dualbox_buttons button {
    padding: 8px 12px;
    font-size: 16px;
    background-color: transparent;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
  }



  .avaynil_daily_tasks_set_submit {
    display: block;
    margin-top: 20px;
    width: 100%;
    padding: 12px;
    font-size: 18px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
  }

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

  #avaynil_daily_tasks_set_table {
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
    border-collapse: collapse;
  }
  #avaynil_daily_tasks_set_table th,
  #avaynil_daily_tasks_set_table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
  }
  /***************************************/

  .avaynil_question_container {
    max-width: 600px;
    margin: auto;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
  h2 {
    text-align: center;
    color: #333;
  }
  .avaynil_question_form-group {
    margin-bottom: 15px;
  }
  .avaynil_question_form label {
    display: block;
    margin-bottom: 5px;
    color: #555;
  }
  .avaynil_question_form input[type="text"],
  textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  #avaynil_question_submit {
    width: 100%;
    padding: 10px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  #avaynil_question_submit:hover {
    background-color: #218838;
  }
  #avaynil_question_container table {
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
  }
  #avaynil_question_container th,
  #avaynil_question_container td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
  }
  #avaynil_question_container th {
    background-color: #f2f2f2;
  }
  .avaynil_questions_edit,
  .avaynil_questions_delete {
    cursor: pointer;
    color: #007bff;
  }
  .avaynil_questions_delete {
    color: #dc3545;
  }

  /***********************************/
  #question-label-wrapper {
    max-width: 700px;
    margin: auto;
  }

  .styled-select {
    width: 100%;
    padding: 8px;
    margin: 8px 0;
  }

  .dual-listbox-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
  }

  .dual-listbox-container > div {
    flex: 1;
  }

  .button-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }

  .submit-button {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #2c7be5;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }
  @media screen and (max-width: 768px) {
    #close-modal-mobile-btn {
      display: block !important;
    }
  }

  /*************************/
  .avaynil_modal {
    display: none;
    position: fixed;
    z-index: 1000;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
  }

  .avaynil_modal_content {
    background-color: #fff;
    margin: auto;
    padding: 30px;
    border: 1px solid #888;
    width: 100%;
    border-radius: 10px;
    text-align: center;
  }

  .avaynil_close_modal {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
  }

  .avaynil_close_modal:hover {
    color: #000;
  }
  .avaynil__invoices_hsf__invoice-summary {
    padding: 5px;
    width: 50%;
    box-sizing: border-box;
    border: 1px solid #ccc;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 5px;
  }

  .avaynil__invoices_hsf__summary-label {
    font-size: 14px;
    font-weight: bold;
  }

  .avaynil__invoices_hsf__summary-value {
    text-decoration: underline;
    width: 20px;
    display: inline-block;
  }

  /* واکنش‌گرا: برای موبایل */
  @media (max-width: 768px) {
    .avaynil__invoices_hsf__invoice-summary {
      width: 100%;
      flex-direction: column;
      align-items: flex-start;
    }

    .avaynil__invoices_hsf__summary-label,
    .avaynil__invoices_hsf__summary-value {
      font-size: 12px;
      margin-bottom: 4px;
    }
  }
  .vaynil-hesabfa-invoices {
    padding: 5px;
    width: 50%;
    box-sizing: border-box;
    border: 1px solid #ccc;
    display: flex;
  }

  .avaynil-hesabfa-invoices-lb {
    font-size: 14px;
    font-weight: bold;
  }

  .avaynil-hesabfa-invoices-lb-un {
    text-decoration: underline;
    width: 20px;
  }

  #personel_task_list li {
    padding: 10px;
    margin-bottom: 5px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    cursor: move;
    align-items: center;
    justify-content: center;
  }
  /********************************** تعریف نقش کاربری*/
  #avaynil_new_user_role_contaner {
    max-width: 400px;
    background: #f9f9f9;
    padding: 30px 25px;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    margin: 20px auto;
  }

  #avaynil_new_user_role_contaner label {
    display: block;
    margin-bottom: 20px;
    font-weight: 600;
    color: #333;
    position: relative;
  }

  #avaynil_new_user_role_contaner label input[type="text"] {
    width: 100%;
    padding: 12px 15px;
    margin-top: 6px;
    border: 2px solid #ddd;
    border-radius: 10px;
    font-size: 16px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
  }

  #avaynil_new_user_role_contaner label input[type="text"]:focus {
    border-color: #5a9bf6;
    box-shadow: 0 0 8px rgba(90, 155, 246, 0.5);
    outline: none;
  }

  #avaynil_user_role_btn {
    width: 100%;
    padding: 14px 0;
    background: linear-gradient(145deg, #4a90e2, #357abd);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 12px rgba(53, 122, 189, 0.6);
    transition: all 0.3s ease;
    user-select: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }

  #avaynil_user_role_btn:hover {
    background: linear-gradient(145deg, #357abd, #4a90e2);
    box-shadow: 0 8px 20px rgba(53, 122, 189, 0.8);
    transform: translateY(-3px);
  }

  #avaynil_user_role_btn:active {
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.3);
    transform: translateY(1px);
  }
  #avaynil-form {
    background: #f8f9fa;
    padding: 20px;
    border: 2px solid #dee2e6;
    border-radius: 10px;
    max-width: 90%;
    margin: 20px auto;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    direction: rtl;
  }

  /* استایل فیلدها */
  #avaynil-form label {
    display: block;
    margin-top: 15px;
    font-weight: bold;
    color: #333;
  }

  #avaynil-form input[type="text"],
  #avaynil-form textarea,
  #avaynil-form select {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    font-size: 14px;
    box-sizing: border-box;
  }

  /* چک‌باکس‌ها */
  #avaynil-form input[type="checkbox"] {
    margin-left: 10px;
    vertical-align: middle;
  }

  /* دکمه ارسال */
  #Sales_expert_submit {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 6px;
    margin-top: 20px;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.3s ease;
  }

  #Sales_expert_submit:hover {
    background-color: #0056b3;
  }

  /* استایل جدول */
  #avaynil-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 30px;
    direction: rtl;
  }

  #avaynil-table th,
  #avaynil-table td {
    border: 1px solid #dee2e6;
    padding: 10px 15px;
    text-align: center;
  }

  #avaynil-table th {
    background-color: #343a40;
    color: white;
    font-weight: bold;
  }

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

  #avaynil-table tr:hover {
    background-color: #e9ecef;
  }

  /* دکمه‌های جدول */
  /* .Sales_expert-edit-btn,
  .Sales_expert-delete-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    color: white;
    font-size: 13px;
    cursor: pointer;
  } */
  .Sales_expert-delete-btn,
  .Sales_expert-edit-btn {
    background-color: transparent;
    border: none;
  }

  @media screen and (max-width: 768px) {
    #avaynil-form {
      padding: 15px;
    }

    #avaynil-table {
      font-size: 12px;
      overflow-x: auto;
    }

    #avaynil-form input,
    #avaynil-form textarea {
      font-size: 13px;
    }
  }
  .avaynil-card-daryaft {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(to right, #00a88f, #00a77a);
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    padding: 10px 15px;
    color: white;
    max-width: 100%;
    direction: rtl;
    margin: 20px auto;
  }
  .avaynil-summary-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 20px;
    justify-content: center;
  }
  @media (max-width: 1024px) {
    .avaynil-card-daryaft {
      flex: 1 1 calc(33.33% - 15px); /* سه‌تایی در تبلت */
    }
  }

  @media (max-width: 768px) {
    .avaynil-card-daryaft {
      flex: 1 1 calc(50% - 15px); /* دوتایی در موبایل افقی */
    }
  }

  @media (max-width: 480px) {
    .avaynil-card-daryaft {
      flex: 1 1 100%; /* تک‌ستونه در موبایل */
    }
  }
  .avaynil-card-icon {
    font-size: 20px;
    color: white;
  }

  .avaynil-card-content {
    display: flex;
    justify-content: center;
  }

  .avaynil-card-label {
    font-size: 18px;
    font-weight: bold;
    padding: 5px;
  }

  .avaynil-card-number {
    font-size: 20px;
    font-weight: bold;
    padding: 5px;
    margin-bottom: 5px;
    color: yellow;
  }

  /* استایل عمومی افزونه */
  .warehouse-manager-wrapper {
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }

  .warehouse-manager-wrapper h2 {
    font-size: 24px;
    color: #333;
    border-bottom: 2px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 20px;
  }
   .avaynil_discription_wrapper .form-table,
  .warehouse-manager-wrapper .form-table {
    width: 100%;
    margin-bottom: 20px;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #ddd;
    padding: 15px;
  }

  .warehouse-manager-wrapper .form-table th {
    text-align: left;
    font-weight: bold;
    color: #333;
  }
.avaynil_discription_wrapper .form-table td input,
.avaynil_discription_wrapper .form-table td select,
  .warehouse-manager-wrapper .form-table td input,
  .warehouse-manager-wrapper .form-table td select {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
  }

 

  .warehouse-manager-wrapper .button-primary {
    background-color: #0073aa;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
  }

  .warehouse-manager-wrapper .button-primary:hover {
    background-color: #005177;
  }

  /* جدول لیست انبارها */
  .warehouse-manager-wrapper table.widefat {
    width: 100%;
    margin-top: 30px;
    border-collapse: collapse;
  }

  .warehouse-manager-wrapper table.widefat th,
  .warehouse-manager-wrapper table.widefat td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
  }

  .warehouse-manager-wrapper table.widefat th {
    background-color: #f1f1f1;
    color: #333;
  }

  .warehouse-manager-wrapper table.widefat tr:nth-child(even) {
    background-color: #f9f9f9;
  }

  .warehouse-manager-wrapper table.widefat tr:hover {
    background-color: #f1f1f1;
  }

  .warehouse-manager-wrapper .updated {
    background-color: #e7f9e7;
    color: #4caf50;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 20px;
  }

  .warehouse-manager-wrapper .error {
    background-color: #f9e7e7;
    color: #f44336;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 20px;
  }
  /*****************************************/
  .avaynil_discription_wrapper {
    direction: rtl;
    padding: 5px;
    background: linear-gradient(to right, #f8fbff, #e2ecf9);
  }

  .avaynil_discription_wrapper form {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    padding: 30px;
    /* width: 100%; */
    max-width: 100%;
    margin: 0 auto 40px auto;
    transition: 0.3s;
  }

  .avaynil_discription_wrapper form:hover {
    transform: scale(1.01);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
  }

  .avaynil_discription_wrapper form h2 {
    text-align: center;
    color: #4a6fa5;
    margin-bottom: 20px;
  }

  .avaynil_discription_wrapper label {
    display: block;
    margin-bottom: 15px;
    color: #333;
    font-weight: bold;
  }

  .avaynil_discription_wrapper input[type="text"],
  .avaynil_discription_wrapper select {
    width: 100%;
    padding: 10px 15px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 12px;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
  }

  .avaynil_discription_wrapper input[type="text"]:focus,
  .avaynil_discription_wrapper select:focus {
    border-color: #4a6fa5;
    box-shadow: 0 0 8px rgba(74, 111, 165, 0.3);
    outline: none;
  }

  .avaynil_discription_wrapper input[type="checkbox"] {
    transform: scale(1.2);
    margin-right: 5px;
  }

  .avaynil_discription_wrapper button {
    background: linear-gradient(to right, #4a6fa5, #3e8e9f);
    color: #fff;
    padding: 12px 25px;
    border: none;
    border-radius: 15px;
    font-size: 16px;
    cursor: pointer;
    display: block;
    margin: 20px auto 0 auto;
    box-shadow: 0 5px 15px rgba(74, 111, 165, 0.3);
    transition: all 0.3s ease;
  }

  .avaynil_discription_wrapper button:hover {
    background: linear-gradient(to right, #3e8e9f, #4a6fa5);
    transform: translateY(-2px);
  }

  .avaynil_discription_wrapper .avaynil_Acquaintance_table {
    width: 95%;
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 0 10px;
  }

  .avaynil_discription_wrapper .avaynil_Acquaintance_table th,
  .avaynil_discription_wrapper .avaynil_Acquaintance_table td {
    background: #fff;
    padding: 12px 15px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
  }

  .avaynil_discription_wrapper .avaynil_Acquaintance_table th {
    background: #4a6fa5;
    color: #fff;
    font-weight: bold;
  }

  .avaynil_discription_wrapper .avaynil_discription_edit,
  .avaynil_discription_wrapper .avaynil_discription_delete {
    border: none;
    background: none;
    font-size: 18px;
    cursor: pointer;
    margin: 0 5px;
    transition: transform 0.2s;
  }

  .avaynil_discription_wrapper .avaynil_discription_edit:hover {
    color: #3498db;
    transform: scale(1.2);
  }

  .avaynil_discription_wrapper .avaynil_discription_delete:hover {
    color: #e74c3c;
    transform: scale(1.2);
  }

  #drag_drop_zone.dragover {
    background-color: #e8f0fe;
    border-color: #007bff;
  }

  /*********************************نمایش فرو */
  .avaynil-contact-wrapper {
    direction: rtl;
    margin-top: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }

  .avaynil-contact-table {
    width: 100%;
    border-collapse: collapse;
  }

  .avaynil-contact-table th,
  .avaynil-contact-table td {
    padding: 10px 15px;
    text-align: right;
    border-bottom: 1px solid #eee;
  }

  .avaynil-contact-table th {
    background-color: #f5f5f5;
    font-weight: bold;
    width: 25%;
  }

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

  .avaynil-contact-table td {
    color: #333;
  }
  /**********************/
  .payment_status_contact_nslink.red {
    background-color: #dc3545;
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 5px;
    cursor: pointer;
  }
  .payment_status_contact_nslink.green {
    background-color: #28a745;
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 5px;
    cursor: pointer;
  }
  .payment_status_contact_nslink.red:hover,
  .payment_status_contact_nslink.green:hover {
    opacity: 0.85;
  }

  /****************************/
  .avaynil-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }

  /* پنهان کردن input اصلی */
  .avaynil-switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  /* شکل ظاهری کشویی */
  .avaynil-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 34px;
  }

  /* دایره داخل کشویی */
  .avaynil-slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
  }

  /* وقتی فعال است */
  .avaynil-switch input:checked + .avaynil-slider {
    background-color: #4caf50;
  }

  /* حرکت دایره به سمت راست */
  .avaynil-switch input:checked + .avaynil-slider:before {
    transform: translateX(26px);
  }
  /***************************/
  /* === جدول شیک و مدرن فقط برای جدول avaynil === */
  #avaynil-data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    overflow: hidden;
  }

  #avaynil-data-table thead th {
    background-color: #4a90e2;
    color: #fff;
    font-weight: 600;
    text-align: center;
    padding: 12px 10px;
    font-size: 14px;
  }

  #avaynil-data-table tbody tr {
    background: #fdfdfd;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    border-radius: 8px;
  }

  #avaynil-data-table tbody tr:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }

  #avaynil-data-table td {
    text-align: center;
    padding: 10px 8px;
    vertical-align: middle;
    font-size: 13px;
    color: #333;
  }

  /* ستون مخفی */
  #avaynil-data-table .hidden-column {
    display: none;
  }

  /* === دکمه‌ها فقط داخل avaynil table === */
  #avaynil-data-table .btn {
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
    transition: all 0.2s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }

  #avaynil-data-table .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  }
  /* 
  #avaynil-data-table .confirm-button {
    background-color: #28a745;
    color: #fff;
    border: none;
  }
  #avaynil-data-table .edit-button {
    background-color: #ffc107;
    color: #fff;
    border: none;
  }
  #avaynil-data-table .delet-button {
    background-color: #dc3545;
    color: #fff;
    border: none;
  } */

  #avaynil-data-table .btn i {
    font-size: 16px;
  }

  /* === DataTables فقط برای جدول avaynil === */
  #avaynil-data-table_wrapper .dataTables_filter input {
    border-radius: 8px;
    padding: 6px 10px;
    border: 1px solid #ccc;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
  }

  #avaynil-data-table_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px;
    padding: 6px 12px;
    margin: 2px;
    background: #4a90e2;
    color: #fff !important;
    border: none;
    transition: all 0.2s;
  }

  #avaynil-data-table_wrapper .dataTables_paginate .paginate_button:hover {
    background: #357abd;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }

  #avaynil-data-table_wrapper .dataTables_paginate .paginate_button.current {
    background: #357abd !important;
    font-weight: bold;
  }

  #avaynil-data-table_wrapper .dataTables_length select {
    border-radius: 8px;
    padding: 6px 10px;
    border: 1px solid #ccc;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
  }

  /* استایل ردیف hover */
  #avaynil-data-table tbody tr:hover {
    background-color: #eaf2ff;
  }
  .scrollable-div {
    overflow-y: auto; /* اسکرول عمودی فعال شود */
    overflow-x: hidden; /* جلوگیری از اسکرول افقی */
  }
  /*********************************************************
                          //////////////////////////////////////////////////////////////////////
                          /*****************************************************************/

  /* =================== Variables & Reset =================== */
  /* :root {
                              --primary-green: #00a88f;
                              --primary-dark: #0b6b58;
                              --muted-100: #f6faf8;
                              --muted-200: #eef6f2;
                              --card-bg: #ffffff;
                              --accent: #0066cc;
                              --radius: 14px;
                              --shadow-sm: 0 6px 18px rgba(11, 107, 88, 0.06);
                              --shadow-md: 0 12px 30px rgba(11, 107, 88, 0.08);
                              --max-width: 1400px;
                              --av-primary: #00a88f;
                              --av-dark: #004c99;
                              --av-light: #f3f8f7; */
  /* } */

  /* * {
                              box-sizing: border-box;
                              margin: 0;
                              padding: 0;
                          }
          
                          html,
                          body {
                              height: 100%;
                              background: linear-gradient(180deg, #f7fbfa, #f3f6f4);
                              color: #222;
                          } */

  /* =================== Container =================== */

  /* =================== Top Menu =================== */

  /* کانتینر اصلی منو */
  .avaynil_shiraz_info_topmenu {
    display: flex;
    flex-wrap: nowrap;
    font-size: 13px;

    /* همه در یک ردیف */
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 14px 20px;
    border-radius: 20px;
    background-color: rgb(247, 247, 247);

    overflow-x: auto;
    /* فعال‌سازی اسکرول افقی */
    scrollbar-width: thin;
    scrollbar-color: var(--av-primary) transparent;
  }

  /* ظاهر اسکرول برای مرورگرهای مدرن */
  .avaynil_shiraz_info_topmenu::-webkit-scrollbar {
    height: 8px;
  }

  .avaynil_shiraz_info_topmenu::-webkit-scrollbar-thumb {
    background: var(--av-primary);
    border-radius: 10px;
  }

  .avaynil_shiraz_info_topmenu::-webkit-scrollbar-track {
    background: transparent;
  }

  /* دکمه‌ها */
  .avaynil_shiraz_info_btn {
    flex: 0 0 auto;
    /* اندازه ثابت برای جلوگیری از کش آمدن */
    min-width: 140px;
    padding: 12px 18px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border: 1px solid gray;
    background-color: #ffffff;

    /* background: linear-gradient(145deg, var(--av-primary), var(--av-dark)); */
    color: #000000;
    font-weight: 700;
    font-size: 14px;
    align-items: center;
    letter-spacing: 0.3px;
    cursor: pointer;
    text-align: center;
    position: relative;
    overflow: hidden;
  }

  .avaynil_shiraz_info_btn:hover {
    background-color: rgb(228, 226, 226);
  }
  /* =================== Row 2 — main profile =================== */
  .avaynil_shiraz_info_row2 {
    display: grid;
    grid-template-columns: 35% 65%;
    /* stars | avatar | contacts | profile | tags */
    gap: 10px;
    align-items: center;
    padding: 8px;
    margin-top: 5px;
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
  }

  /* stars column */
  .avaynil_shiraz_info_stars {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    font-size: 26px;
    color: #ffb74d;
    writing-mode: vertical-rl;
    text-orientation: mixed;
  }

  .verticla_clss {
    writing-mode: vertical-rl;
    text-orientation: mixed;
  }

  .star {
    font-size: 22px;
    margin: 0 2px;
  }

  /* avatar column */
  .avaynil_shiraz_info_avatar {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .avaynil_shiraz_info_avatar img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  }

  /* contacts column */
  .avaynil_shiraz_info_contacts {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
  }

  :root {
    --av-green: #00a88f;
    --av-dark: #0b6b58;
    --av-light: #f3f9f7;
  }

  /* ==== استایل سه‌بعدی جدید برای آیتم‌ها ==== */
  .avaynil_shiraz_info_contact_item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 500;
    color: var(--av-dark);
    transition: all 0.3s ease;
    cursor: pointer;
  }

  /* ==== آیکون تماس ==== */
  .avaynil_shiraz_info_contact_item img {
    width: 45px;
    height: 45px;
    padding: 6px;
    transition: all 0.3s ease;
  }

  /* ==== واکنش‌گرا برای موبایل ==== */
  @media (max-width: 600px) {
    .avaynil_shiraz_info_contact_item {
      font-size: 14px;
      padding: 10px 12px;
    }

    .avaynil_shiraz_info_contact_item img {
      width: 22px;
      height: 22px;
    }
  }

  /* profile column */
  .avaynil_shiraz_info_profile {
    border: 1px solid rgb(228, 226, 226);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .avaynil_shiraz_info_name {
    font-size: 20px;
    font-weight: 800;
    color: var(--primary-dark);
  }

  .avaynil_shiraz_info_title {
    font-size: 15px;
    color: #333;
  }

  .avaynil_shiraz_info_location {
    font-size: 13px;
    color: #666;
  }

  .avaynil_shiraz_info_manager_note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 8px;
  }

  .avaynil_shiraz_info_note_box {
    flex: 1;
    padding: 10px;
    border-radius: 12px;
    border: 2px solid var(--primary-green);
    background: linear-gradient(180deg, rgba(0, 168, 143, 0.06), #fff);
    font-size: 13px;
  }

  .avaynil_shiraz_info_tags {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    overflow: visible; /* خیلی مهم: تا باکس داخلی بتونه اسکرول داشته باشه */
  }

  /* بخش برچسب‌ها */


  /* دکمه‌های برچسب */
  .personel-label-button {
    flex: 0 0 auto;
    padding: 5px 10px;
    font-size: 13px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
  }


  /* جلوگیری از اسکرول افقی کل صفحه */

  /* ✅ واکنش‌گرایی برای صفحه‌های کوچک */
  @media (max-width: 768px) {
    .avaynil_shiraz_info_tags {
      flex-direction: column; /* بچه‌ها زیر هم بیان */
      align-items: stretch;
    }

    .label-scroll {
      width: 100%;
      overflow-x: auto; /* فعال بماند */
      overflow-y: hidden;
      display: flex;
      justify-content: flex-start;
    }

    .personel-label-button {
      font-size: 12px;
      padding: 5px 8px;
    }
  }

  /* دکمه‌ها (لیبل‌ها) */
  .personel-label-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    font-size: 14px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    letter-spacing: 0.4px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    color: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  }

  /* افکت درخشش */

  /* رنگ‌ها */
  .personel-label-button[style*="background-color: red"] {
    background: linear-gradient(145deg, #d32f2f, #f44336) !important;
  }

  .personel-label-button[style*="background-color: green"] {
    background: linear-gradient(145deg, #388e3c, #4caf50) !important;
  }

  .personel-label-button[style*="background-color: orange"] {
    background: linear-gradient(145deg, #ff9800, #f57c00) !important;
  }

  .personel-label-button[style*="background-color: yellow"] {
    background: linear-gradient(145deg, #fff59d, #fbc02d) !important;
    color: #333 !important;
  }

  .personel-label-button[style*="background-color: white"] {
    background: linear-gradient(145deg, #fafafa, #e0e0e0) !important;
    border: 1px solid #aaa !important;
    color: #333 !important;
  }

  .label_list_all_cls {
    width: 100% !important;
  }

  .select2 {
    width: 100% !important;
  }

  .label-button_info {
    height: 50px;
    /* ارتفاع بزرگ‌تر */
    width: 50px;
    /* عرض ثابت برای شکل مربعی */
    font-size: 24px;
    /* سایز ایموجی بزرگ‌تر */
    border: none;
    /* بدون حاشیه */
    background: transparent;
    /* بدون پس‌زمینه */
    cursor: pointer;
    /* نشانگر کلیک */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: rgb(152, 0, 182);
  }

  /* =================== Row 3 — history buttons =================== */
  .avaynil_shiraz_info_history {
    display: flex;
    gap: 10px;
    padding: 5px;
    margin-top: 2px;
    justify-content: flex-start;
  }

  .avaynil_shiraz_info_history .history-btn {
    padding: 4px 5px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    cursor: pointer;
    font-weight: 700;
  }

  /* =================== Row 5 — expert line =================== */

  /* =================== Row 4 — meta/status =================== */
  .avaynil_shiraz_info_meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 4px 8px;
    margin-top: 4px;
    border-radius: 18px;

    position: relative;
    transition: all 0.3s ease;
  }

  /* افکت نور نرم در پس‌زمینه کارت */

  .avaynil_shiraz_info_meta span {
    background: #ffffffb3;
    /* backdrop-filter: blur(6px); */
    padding: 2px 4px;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #0b6b58;
    box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.05),
      1px 1px 3px rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    z-index: 1;
    transition: all 0.2s ease;
  }

  /* متن داخل span */
  .avaynil_shiraz_info_meta span strong {
    font-weight: 800;
    color: #00785e;
  }

  /* دکمه ویرایش در کنار کارت */
  .avaynil_daily_task_remainder_save-btn-personel {
    /* background: linear-gradient(145deg, #00a88f, #0b6b58); */
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 10px 16px;
    margin-right: 10px;
    font-size: 22px;
    cursor: pointer;
  }

  .avaynil_shiraz_info_comments {
    margin-top: 0px;
    padding: 8px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.04);
  }

  .avaynil_shiraz_info_comments h3 {
    margin-bottom: 10px;
    color: var(--primary-dark);
  }

  .avaynil_shiraz_info_comment {
    display: flex;
    gap: 5px;
    padding: 5px;
    border-radius: 10px;
    background: linear-gradient(180deg, #fff, #fbfbfb);
    align-items: flex-start;
    margin-bottom: 10px;
    box-shadow: var(--shadow-sm);
  }

  .avaynil_shiraz_info_comment img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
  }

  .avaynil_shiraz_info_comment .meta {
    display: flex;
    flex-direction: column;
  }

  .avaynil_shiraz_info_comment .meta .name {
    font-weight: 800;
  }

  .avaynil_shiraz_info_comment .meta .text {
    color: #444;
    margin-top: 6px;
  }

  .avaynil_shiraz_info_expert {
    margin-top: 8px;
    padding: 10px 10px;
    border-radius: 18px;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
  }

  /* نام کارشناس فروش */
  .div-Sales_expert_fullname {
    font-size: 32px;
    font-weight: 900;
    font-weight: bold;
    color: #094736;
    text-align: center;
    letter-spacing: 1px;
    /* text-shadow: 1px 1px 0 #fff, 2px 2px 5px rgba(0, 0, 0, 0.15); */
    flex: 1;
    position: relative;
    z-index: 1;
    padding: 8px 0;
  }

  /* دکمه ویرایش */
  .avaynil_shiraz_info_expert .edit-btn {
    padding: 10px 18px;
    background: linear-gradient(145deg, var(--primary-green, #00a88f), #089e83);
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.25),
      -2px -2px 8px rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
    z-index: 1;
  }

  .avaynil_shiraz_info_expert .edit-btn:hover {
    background: linear-gradient(145deg, #00c4a2, #008c73);
    transform: translateY(-2px);
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3),
      -3px -3px 10px rgba(255, 255, 255, 0.6);
  }

  .avaynil_shiraz_info_expert .edit-btn:active {
    transform: scale(0.97);
  }

  /* =================== Responsive =================== */
  @media (max-width: 1100px) {
    .avaynil_shiraz_info_meta span {
      font-size: 12px;
      color: #333;
    }

    .avaynil_shiraz_info_contact_item,
    .avaynil_shiraz_info_name,
    .avaynil_shiraz_info_location,
    .avaynil_shiraz_info_title {
      display: flex;
      /* فعال‌سازی فلکس‌باکس */
      flex-direction: column;
      /* چینش آیتم‌ها زیر هم */
      align-items: center;
      /* تراز افقی وسط */
      justify-content: center;
      /* تراز عمودی وسط */
      text-align: center;
      /* متن‌ها هم وسط‌چین */
    }

    .avaynil_shiraz_info_contact_item {
      text-align: center;
    }

    .avaynil_shiraz_info_stars {
      font-size: 9px;
    }

    .div-Sales_expert_fullname {
      font-size: 16px;
    }

    .avaynil_shiraz_info_btn {
      /* flex: 0 1 40px; */
      writing-mode: vertical-rl;
      text-orientation: mixed;
      min-width: 40px !important;
      height: 120px;
      font-weight: 100;
      text-align: center;
      align-items: center;
      vertical-align: middle;
    }

    /* .avaynil_shiraz_info_row2 {
                                      grid-template-columns: 70px 140px 200px 1fr 140px;
                                      gap: 12px;
                                  } */

    .avaynil_shiraz_info_avatar img {
      width: 120px;
      height: 120px;
    }
  }

  @media (max-width: 900px) {
    .avaynil_shiraz_info_meta span {
      font-size: 10px;
      color: #333;
    }

    .avaynil_shiraz_info_contact_item,
    .avaynil_shiraz_info_name,
    .avaynil_shiraz_info_location,
    .avaynil_shiraz_info_title {
      display: flex;
      /* فعال‌سازی فلکس‌باکس */
      flex-direction: column;
      /* چینش آیتم‌ها زیر هم */
      align-items: center;
      /* تراز افقی وسط */
      justify-content: center;
      /* تراز عمودی وسط */
      text-align: center;
      /* متن‌ها هم وسط‌چین */
    }

    .avaynil_shiraz_info_contact_item {
      text-align: center;
    }

    .avaynil_shiraz_info_stars {
      font-size: 9px;
    }

    .div-Sales_expert_fullname {
      font-size: 14px;
    }

    .avaynil_shiraz_info_btn {
      /* flex: 0 1 40px; */
      writing-mode: vertical-rl;
      text-orientation: mixed;
      min-width: 40px !important;
      height: 120px;
      font-weight: 100;
      text-align: center;
      align-items: center;
      vertical-align: middle;
    }

    .avaynil_shiraz_info_row2 {
      grid-template-columns: 1fr 1fr;
      grid-template-areas:
        "stars avatar"
        "contacts profile"
        "tags profile";
    }

    .avaynil_shiraz_info_stars {
      grid-area: stars;
    }

    .avaynil_shiraz_info_avatar {
      grid-area: avatar;
    }

    .avaynil_shiraz_info_contacts {
      grid-area: contacts;
    }

    /* .avaynil_shiraz_info_profile {
                                      grid-area: profile;
                                  } */

    .avaynil_shiraz_info_profile {
      /* background: linear-gradient(145deg, #f8fff9, #e3f5ea);
                                      box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.12),
                                          -8px -8px 18px rgba(255, 255, 255, 0.9);
                                      border-radius: 20px; */

      width: 100%;
      height: 100%;
      padding: 10px;
      margin-top: 5px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      /* transition: all 0.3s ease; */
      /* position: relative;
                                      overflow: hidden;
                                  */
    }

    /* افکت نور ملایم بالای کارت */
  }

  /* بخش کد و نام */
  .contact-code-name {
    font-weight: 800;
    font-size: 18px;
    color: #0b6b58;
    /* background: linear-gradient(90deg, #e8fff3, #ffffff); */
    padding: 8px 14px;

    display: inline-block;
    letter-spacing: 0.3px;
  }

  /* عنوان مشتری (شرکت یا فروشگاه) */
  .contact-title {
    font-size: 17px;
    font-weight: 700;
    color: #007c5a;
    /* background: linear-gradient(90deg, #f2fff7, #e6f5ee); */
    border-radius: 8px;
    padding: 6px 12px;
    display: inline-block;
    margin-top: 6px;
    /* box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1),
                                          -1px -1px 5px rgba(255, 255, 255, 0.7); */
  }

  /* موقعیت جغرافیایی */
  .contact-location {
    font-size: 15px;
    font-weight: 600;
    color: #444;
    background: #ffffffc4;
    padding: 5px 10px;
    border-radius: 6px;
    display: inline-block;
    /* box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.06),
                                          1px 1px 3px rgba(255, 255, 255, 0.6); */
  }

  /* اعتبار مالی */
  .avaynil_shiraz_info_name div {
    font-size: 15px;
    color: #222;
    font-weight: 500;
  }

  /* مبلغ بدهی یا بستانکاری */
  .avaynil_shiraz_info_name .amount-status {
    font-size: 16px;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 10px;
    background: #fff;
    display: inline-block;
    /* box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.05),
                                          1px 1px 5px rgba(0, 0, 0, 0.08),
                                          -1px -1px 5px rgba(255, 255, 255, 0.7); */
  }

  /* رنگ مبلغ بدهی و بستانکاری */
  .amount-status.red {
    color: #d93025;
  }

  .amount-status.green {
    color: #00a88f;
  }

  /* بخش نظر مدیر */
  .avaynil_shiraz_info_manager_note {
    /* background: linear-gradient(145deg, #fdfefc, #edf8ee); */
    border-radius: 14px;
    padding: 12px 16px;
    margin-top: 10px;
    width: 100%;
    /* box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.1),
                                          -4px -4px 12px rgba(255, 255, 255, 0.8); */
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
  }


  @media (max-width: 600px) {
    .avaynil_shiraz_info_meta span {
      font-size: 10px;
      color: #333;
    }

    .avaynil_shiraz_info_contact_item,
    .avaynil_shiraz_info_name,
    .avaynil_shiraz_info_location,
    .avaynil_shiraz_info_title {
      display: flex;
      /* فعال‌سازی فلکس‌باکس */
      flex-direction: column;
      /* چینش آیتم‌ها زیر هم */
      align-items: center;
      /* تراز افقی وسط */
      justify-content: center;
      /* تراز عمودی وسط */
      text-align: center;
      /* متن‌ها هم وسط‌چین */
    }

    .avaynil_shiraz_info_tags {
      display: block;
      gap: 0;
      /* فاصله بین آیتم‌ها حذف شود چون block است */
      align-items: unset;
    }

    .avaynil_shiraz_info_stars {
      writing-mode: horizontal-tb;
      /* حالت نوشتار افقی عادی */
      text-orientation: initial;
      /* بازگرداندن حالت متن */
      flex-direction: row;
      /* در صورت نیاز برای چینش افقی ستاره‌ها */
      font-size: 9px;
    }

    .div-Sales_expert_fullname {
      font-size: 14px;
    }

    .avaynil_shiraz_info_btn {
      /* flex: 0 1 40px; */
      writing-mode: vertical-rl;
      text-orientation: mixed;
      min-width: 40px !important;
      height: 120px;
      font-weight: 100;
      text-align: center;
      align-items: center;
      vertical-align: middle;
    }

    .avaynil_shiraz_info_container {
      padding: 10px;
    }

    .avaynil_shiraz_info_topmenu {
      flex-wrap: wrap;
      gap: 8px;
    }

    /* .avaynil_shiraz_info_btn {
                                      flex: 0 1 48%;
                                      min-width: 120px;
                                  } */

    .avaynil_shiraz_info_row2 {
      grid-template-columns: 1fr;
      grid-template-areas:
        "stars"
        "avatar"
        "contacts"
        "profile"
        "tags";
      gap: 10px;
    }

    .avaynil_shiraz_info_avatar img {
      width: 110px;
      height: 110px;
    }

    .avaynil_shiraz_info_contact_item {
      font-size: 13px;
    }

    .avaynil_shiraz_info_name {
      font-size: 18px;
    }

    .avaynil_shiraz_info_history {
      flex-direction: column;
      gap: 8px;
    }

    .avaynil_shiraz_info_history .history-btn {
      width: 100%;
    }
  }
  .reply-button {
    background-color: #00a88f;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 6px 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: 0.2s;
    font-size: 12px;
  }

  .reply-button:hover {
    background-color: #f9f9f9;
    border-color: #00a88f;
    color: #00a88f;
    box-shadow: 0 0 4px rgba(0, 168, 143, 0.2);
  }

  .reply-button svg {
    width: 18px;
    height: 18px;
    transform: rotate(180deg);
    /* چون متن فارسی است */
    fill: currentColor;
  }

  .avaynil-comments-section {
    background: #fff;
    border-radius: 12px;
    padding: 15px;
    max-height: 600px;
    overflow-y: auto;
    direction: rtl;
  }
  .comment-card {
    position: relative;
  }
  /* دکمه ضربدر */
  .comment-close-btn {
    position: absolute;
    top: -12px;
    left: -12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center; /* دقیقاً مرکز چین */
    cursor: pointer;
    color: #555;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    transition: 0.2s;
    padding: 0; /* جلوگیری از جابه‌جایی */
  }

  .comment-close-btn:hover {
    background: #ff4e4e;
    color: white;
    transform: scale(1.1);
  }
  /* .comment-card {
                                  border-right: 1px solid gray;
                                  border-radius: 10px;
                                  background: #fdfdfd;
                                  padding: 10px 15px;
                                  margin: 10px 0;
                                  transition: all 0.3s;
                              } */
  /* ======================
                          استایل مخصوص زیرشاخه‌ها (child)
                          ====================== */

  .comment-children {
    border-left: 2px solid #e0e0e0;
    margin-top: 10px;
    padding-left: 15px;
    transition: all 0.3s ease;
  }

  .child-container {
    margin-top: 8px;
    margin-right: 20px;
    padding-right: 10px;
    border-right: 2px dashed #d9d9d9;
    display: none;
    animation: fadeIn 0.3s ease-in-out;
  }

  .comment-card .comment-children .comment-card {
    background: #fafafa;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }

  .comment-card .comment-children .comment-card:hover {
    background: #f0fdf9;
  }

  /* انیمیشن ظاهر شدن */
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-3px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .comment-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px;
    margin-top: 6px;
    background: #fff;
    position: relative;
  }

  .comment-actions {
    display: flex;
    justify-content: flex-start;
    gap: 6px;
    margin-top: 5px;
  }

  .toggle-children-btn {
    background: transparent;
    border: none;
    font-size: 24px !important;
    cursor: pointer;
    line-height: 1;
    transition: transform 0.2s ease;
  }

  .toggle-children-btn.active {
    transform: rotate(45deg);
    /* تغییر از + به × */
  }

  .comment-card:hover {
    background-color: #f8fff8;
    border-color: #00a88f;
  }

  .comment-header {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #00a88f;
  }

  .comment-meta {
    display: flex;
    flex-direction: column;
  }

  .comment-author {
    font-weight: 600;
    color: #0b6b58;
  }

  .comment-date {
    font-size: 12px;
    color: #777;
  }

  .comment-body {
    margin-top: 6px;
    padding-right: 10px;
    color: #333;
  }

  .comment-text {
    margin: 5px 0 0 0;
    line-height: 1.6;
    padding-right: 35px;
  }

  .attachment-icon {
    width: 18px;
    height: 18px;
    margin-right: 6px;
    vertical-align: middle;
  }

  /* body {
                              overflow: visible !important;
                          } */

  /* Avaynil modal styles (scoped by id/class) */

  .av-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(3, 12, 8, 0.45);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }

  /* محدود کردن ارتفاع پاپ‌آپ */
  #avaynil_shiraz_info_modal_root {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
  }

  /* استایل مودال */
  #avaynil_shiraz_info_modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 90%;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    transition: all 0.3s ease-in-out;
  }

  /* وقتی مودال نمایش داده می‌شود */
  #avaynil_shiraz_info_modal.show {
    transform: scale(1);
    opacity: 1;
  }

  /* هدر مودال */
  .av-modal-header {
    padding: 16px 20px;
    background: linear-gradient(
      90deg,
      rgba(0, 168, 143, 0.08),
      rgba(0, 120, 92, 0.03)
    );
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  /* بدنه مودال */
  .av-modal-body {
    padding: 18px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  /* فوتر مودال */
  .av-modal-footer {
    padding: 12px 20px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: rgba(0, 0, 0, 0.02);
    border-top: 1px solid rgba(0, 0, 0, 0.04);
  }

  /* واکنش‌گرا برای موبایل */
  @media (max-width: 768px) {
    #avaynil_shiraz_info_modal {
      width: 95%;
      max-height: 90vh;
    }

    .av-modal-body {
      grid-template-columns: 1fr;
    }
  }

  .av-modal-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
    color: var(--av-dark);
    font-size: 18px;
  }

  .av-modal-title .av-logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--av-accent), #00806f);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    box-shadow: 0 6px 18px rgba(0, 168, 143, 0.12);
  }

  .av-modal-close {
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #444;
    padding: 6px;
    border-radius: 8px;
  }

  .av-modal-close:hover {
    background: rgba(0, 0, 0, 0.04);
  }

  .av-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .av-field label {
    font-size: 13px;
    color: #333;
    font-weight: 700;
    direction: rtl;
    text-align: right;
  }

  .av-input,
  .av-select,
  .av-textarea {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    font-size: 14px;
    box-sizing: border-box;
  }

  .av-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }

  .av-field-inline {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .av-modal-footer {
    padding: 12px 18px;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: linear-gradient(180deg, #fbfffb, #f8fff8);
  }


  .av-btn.ghost {
    background: transparent;
    color: #444;
  }

  .av-btn.primary {
    background: var(--av-accent);
    color: #fff;
    box-shadow: 0 8px 28px rgba(0, 168, 143, 0.14);
  }

  /* small responsive */
  @media (max-width: 820px) {
    .av-modal-body {
      grid-template-columns: 1fr;
      padding: 14px;
    }

    .av-modal {
      width: 96%;
    }
  }

  /* form hint */
  .av-hint {
    font-size: 12px;
    color: #666;
  }

  .avaynil_status_bar.active {
    background: linear-gradient(145deg, #d8f9e8, #f6fff9);
    border-radius: 18px;
    box-shadow: 0 5px 15px rgba(0, 128, 0, 0.15);
    transition: all 0.4s ease-in-out;
  }

  .avaynil_status_bar.inactive {
    background: linear-gradient(145deg, #ffe5e5, #fff5f5);
    border-radius: 18px;
    box-shadow: 0 5px 15px rgba(255, 0, 0, 0.15);
    transition: all 0.4s ease-in-out;
  }

  /* ===== کادر اصلی اطلاعات ===== */
  .avaynil_shiraz_info_container {
    width: 95%;
    margin: 5px auto;
    background: linear-gradient(180deg, #ffffff, #f7fbf9);
    border-radius: 18px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08),
      inset 0 0 10px rgba(255, 255, 255, 0.3);
    overflow: hidden;
    padding: 10px;
    transform: translateY(0);
    transition: all 0.3s ease-in-out;
  }

  /* .avaynil_shiraz_info_container:hover {
                                  transform: translateY(-3px);
                                  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12),
                                      inset 0 0 12px rgba(255, 255, 255, 0.4);
                              } */

  /* ===== کادر رنگی زیرین (بر اساس وضعیت Active) ===== */
  .avaynil_shiraz_info_container.active-bg {
    background: rgba(76, 175, 80, 0.15) !important;
  }

  .avaynil_shiraz_info_container.inactive-bg {
    background: rgba(243, 35, 17, 0.15) !important;
  }

  @keyframes avaynil_status_glow {
    from {
      left: -50%;
    }

    to {
      left: 100%;
    }
  }

  .av-tooltip-card {
    /* background-color: var(--bg-color); */
    /* color: #fff; */
    /* border-radius: 12px; */
    /* padding: 12px 16px; */
    /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); */
    /* width: 220px; */
    direction: rtl;
    /* transition: all 0.3s ease-in-out; */
  }

  .av-tooltip-header {
    text-align: center;
    font-weight: 600;
    font-size: 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    margin-bottom: 8px;
    padding-bottom: 4px;
  }

  .av-tooltip-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .av-tooltip-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
  }

  .av-tooltip-row .label {
    font-weight: 500;
    opacity: 0.9;
  }

  .av-tooltip-row .value {
    font-weight: 600;
    text-align: left;
  }

  /* دکمه اصلی */
  /* .history-btn {
                                  border: none;
                                  color: #fff;
                                  font-weight: 600;
                                  border-radius: 8px;
                                  padding: 6px 8px;
                                  margin: 2px;
                                  cursor: pointer;
                                  transition: 0.3s;
                              }
          
                              .history-btn:hover {
                                  filter: brightness(1.1);
                              } */

  /* نمایش تولتیپ زیبا */
  /* ===== باکس کلی تولتیپ ===== */
  .tooltip-box-get-task {
    position: relative;
    display: inline-block;
    margin: 6px;
  }

  /* ===== محتوای تولتیپ ===== */
 .tooltip-text-get-task {
    position: absolute;
    top: calc(100% + 1px); /* فاصله مناسب */
    right: 0;
    width: 260px;
    padding: 8px;
    border: none !important;
    z-index: 9999;

    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

    /* حالت اولیه مخفی */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

/* ===== نمایش تولتیپ در حالت فعال ===== */
.tooltip-box-get-task .tooltip-text-get-task.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


.tooltip-box-get-task:hover .tooltip-text-get-task {
  display: block;
}

.tooltip-box-get-task.active .tooltip-text-get-task {
  display: block;
}

  .history-btn {
    border: none;
    padding: 8px 14px;
    border-radius: 10px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2),
      -2px -2px 6px rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease;
  }

  .history-btn:hover {
    transform: translateY(-2px);
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25),
      -3px -3px 8px rgba(255, 255, 255, 0.8);
  }

  /* ===== تولتیپ (بدنه) ===== */

  /* ===== محتوای کارت داخل تولتیپ ===== */
  .av-tooltip-card {
    background: var(--bg-color, #e8f9f3);
    border-radius: 12px;
    padding: 10px;
    /* box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.08),
                                      inset -2px -2px 6px rgba(255, 255, 255, 0.8); */
  }

  .av-tooltip-header {
    text-align: center;
    font-weight: 700;
    color: #0b6b58;
    font-size: 15px;
    margin-bottom: 8px;
  }

  .av-tooltip-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .av-tooltip-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1),
      -1px -1px 3px rgba(255, 255, 255, 0.6);
  }

  .av-tooltip-row .label {
    color: #0b6b58;
    font-weight: 600;
  }

  .av-tooltip-row .value {
    color: #333;
    font-weight: 500;
  }

  /* ================== آواتار سه‌بعدی و مدرن ================== */
  .avaynil-avatar-3d {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid rgba(0, 168, 143, 0.8);
    background: linear-gradient(145deg, #ffffff, #e6f5f1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25), 0 0 25px rgba(0, 168, 143, 0.3);
    padding: 6px;
    display: block;
    margin: 0 auto;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    user-select: none;
    pointer-events: auto;
    background-color: #fff;
  }

  /* افکت هاور سه‌بعدی */

  /* ریسپانسیو */
  @media (max-width: 768px) {
    .avaynil-avatar-3d {
      width: 110px;
      height: 110px;
      padding: 4px;
      /* box-shadow:
                                          0 6px 15px rgba(0, 0, 0, 0.25),
                                          0 0 20px rgba(0, 168, 143, 0.25);*/
    }
  }

  /* ================== طراحی ستاره سه‌بعدی ================== */
  .avaynil-star-3d {
    width: 35px;
    height: 35px;
    margin: 3px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
    display: inline-block;
    object-fit: contain;
    user-select: none;
  }

  /* حالت هاور — درخشان و برجسته‌تر */
  #avaynil_shiraz_info_contacts .avaynil-star-3d:hover {
    transform: scale(1.15) rotateZ(8deg);
  }

  /* افکت کلیک (موقع انتخاب) */
  .avaynil-star-3d:active {
    transform: scale(0.95);
  }

  /* درخشش انیمیشنی برای ستاره‌های پر (filled) */
  .avaynil-star-3d[data-ok="1"] {
    animation: avaynil-star-glow 2.5s ease-in-out infinite alternate;
  }

  @keyframes avaynil-star-glow {
    from {
      filter: drop-shadow(0 0 5px rgba(255, 230, 80, 0.3));
    }

    to {
      filter: drop-shadow(0 0 15px rgba(255, 230, 100, 0.8));
    }
  }

  /* ریسپانسیو برای موبایل */
  @media (max-width: 768px) {
    .avaynil-star-3d {
      width: 28px;
      height: 28px;
      margin: 2px;
    }
  }

  .avaynil-contact-form-command {
    position: relative;
    /* background: linear-gradient(145deg, #ffffff, #f5f8f7); */
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 16px;
    /* box-shadow:
                                      0 6px 16px rgba(0, 0, 0, 0.12),
                                      inset 0 2px 4px rgba(255, 255, 255, 0.8); */
    border: 1px solid rgba(0, 168, 143, 0.15);
    color: #333;
    line-height: 1.8;
    transition: all 0.3s ease;
  }

  /* عنوان یا نام کاربر */
  .avaynil-comment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 15px;
    color: #0b6b58;
  }

  /* زمان ارسال نظر */
  .avaynil-comment-date {
    font-size: 12px;
    color: #888;
  }

  /* محتوای نظر */
  .avaynil-comment-text {
    font-size: 14px;
    color: #444;
    text-align: justify;
    padding-top: 4px;
    white-space: pre-line;
  }

  /* حالت ریسپانسیو برای موبایل */
  @media (max-width: 768px) {
    .avaynil-contact-form-command {
      padding: 14px 16px;
      border-radius: 12px;
    }

    .avaynil-contact-form-command::before {
      left: 24px;
      width: 18px;
      height: 18px;
    }
  }

  .avaynil-comments-section-category {
    /* background: linear-gradient(145deg, #f7f9fa, #e3e7ea); */
    border-radius: 16px;

    padding: 18px 22px;
    margin-bottom: 15px;
    border: 1px solid rgba(230, 235, 238, 0.9);
    transition: all 0.3s ease;
  }

  .avaynil-comments-section-attachment {
    /* background: linear-gradient(145deg, #f9fbfc, #e8eef0); */
    border-radius: 18px;
    padding: 20px;
    margin-bottom: 14px;
    border: 1px solid rgba(0, 0, 0, 0.06);

    transition: all 0.3s ease;
  }

  .avaynil-comments-section-attachment .info-item {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    align-items: center;
  }

  .avaynil-comments-section-attachment a.delete_btn_shop_clas {
    background: linear-gradient(145deg, #00a88f, #00856f);
    color: #fff;
    padding: 6px 14px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(0, 168, 143, 0.25);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.25s ease;
  }

  .btn-add-shop {
    background: linear-gradient(145deg, #004c99, #003b80);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 8px 20px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(0, 76, 153, 0.2);
    transition: all 0.3s ease;
  }

  .btn-add-shop:hover {
    transform: translateY(-2px);
    background: linear-gradient(145deg, #0059b3, #004080);
    box-shadow: 0 10px 24px rgba(0, 76, 153, 0.25);
  }

  .avaynil-contactcredit-label {
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    color: #004c99;

    border-radius: 12px;

    margin-bottom: 10px;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
    position: relative;
    /* text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6); */
  }

  /* ===============================
                          🎯 حالت ریسپانسیو موبایل و تبلت
                          =============================== */
  @media (max-width: 768px) {
    .avaynil-comments-section-attachment a.delete_btn_shop_clas {
      font-size: 12px;
      padding: 6px 12px;
      border-radius: 8px;
      gap: 4px;
    }

    .btn-add-shop {
      font-size: 10px;
      padding: 7px 16px;
      border-radius: 10px;
    }

    .avaynil-comments-section-attachment {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
    }
    .avaynil-contactcredit-label_attachment {
      writing-mode: sideways-lr;
      text-orientation: mixed;
    }
  }

  /* 📲 حالت موبایل */
  @media (max-width: 480px) {
    .avaynil-comments-section-attachment a.delete_btn_shop_clas,
    .btn-add-shop {
      display: block;
      width: 100%;
      text-align: center;
      font-size: 10px;
      padding: 10px;
      border-radius: 10px;
      margin-bottom: 8px;
    }

    .avaynil-comments-section-attachment {
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
    }

    .avaynil-comments-section-attachment a.delete_btn_shop_clas::before {
      font-size: 14px;
    }
    .avaynil-contactcredit-label_attachment {
      writing-mode: sideways-lr;
      text-orientation: mixed;
    }
  }

  @media (max-width: 992px) {
    .avaynil-contactcredit-label {
      font-size: 14px;
      padding: 8px 12px;
      /* border-radius: 10px;
                                      border-left: 4px solid #00a88f;
                                      box-shadow:
                                          0 3px 8px rgba(0, 0, 0, 0.06); */
    }

    .avaynil-contactcredit-label::before {
      font-size: 14px;
      margin-left: 6px;
    }
  }

  @media (max-width: 576px) {
    .avaynil-contactcredit-label {
      display: block;
      width: 100%;
      text-align: center;
      font-size: 13px;
      padding: 8px 10px;
      /* border-left: none;
                                      border-top: 4px solid #00a88f; */
      /* border-radius: 10px; */
      /* box-shadow:
                                          0 2px 6px rgba(0, 0, 0, 0.05); */
    }

    .avaynil-contactcredit-label::before {
      display: none;
    }
    .avaynil-contactcredit-label_attachment {
      writing-mode: sideways-lr;
      text-orientation: mixed;
    }
  }

  /* === استایل لیبل‌های اطلاعات تماس === */
  .avaynil-contact-crm-label {
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    color: #0b6b58;
    /* background: linear-gradient(145deg, #ffffff, #f3f9f7);
                                  border: 1px solid rgba(0, 168, 143, 0.2);
                                  border-radius: 10px; */
    padding: 8px 14px;
    margin-left: 6px;
    /* box-shadow:
                                      inset 2px 2px 4px rgba(255, 255, 255, 0.8),
                                      inset -2px -2px 5px rgba(0, 0, 0, 0.05),
                                      0 4px 10px rgba(0, 0, 0, 0.08); */
    transition: all 0.3s ease;
    letter-spacing: 0.2px;
    cursor: default;
    user-select: text;
  }

  /* استایل برای آیکون‌ها */
  .avaynil-contact-crm-icon {
    width: 45px;
    height: 45px;

    padding: 4px;
    /* transition: transform 0.3s ease, box-shadow 0.3s ease; */
  }

  /* چیدمان کلی بخش تماس‌ها */
  .avaynil_shiraz_info_contacts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
  }

  /* هر آیتم تماس */
  .avaynil_shiraz_info_contact_item {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 8px 14px;
  }

  /* ===============================
                          📱 ریسپانسیو برای موبایل و تبلت
                          =============================== */
  @media (max-width: 768px) {
    .avaynil_shiraz_info_contacts {
      flex-direction: column;
      align-items: stretch;
    }

    .avaynil_shiraz_info_contact_item {
      justify-content: center;
      width: 100%;
      padding: 10px;
    }

    .avaynil-contact-crm-label {
      font-size: 13px;
      padding: 6px 10px;
    }

    .avaynil-contact-crm-icon {
      width: 22px;
      height: 22px;
    }
  }

  .avaynil_shiraz_info_avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 5px;
    margin: 5px auto;
    width: fit-content;
    transition: all 0.4s ease;
    position: relative;
  }

  /* ریسپانسیو */
  @media (max-width: 768px) {
    .avaynil_shiraz_info_avatar {
      padding: 5px;
      border-radius: 18px;
      /* box-shadow:
                                          6px 6px 15px rgba(0, 0, 0, 0.15),
                                          -6px -6px 15px rgba(255, 255, 255, 0.9);
                                  } */
    }

    .avaynil-tag-box {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
      padding: 8px 10px;
      background: #f5f7f6;
      border-radius: 10px;
      border: 1px solid #d4e9e3;
      box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
      justify-content: flex-start;
      transition: all 0.3s ease;
    }

    /* تگ‌ها */
    .avaynil-tag {
      display: flex;
      align-items: center;
      background: linear-gradient(135deg, #00a88f, #0b6b58);
      color: #fff;
      font-size: 13px;
      border-radius: 20px;
      padding: 6px 12px;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
      transition: all 0.25s ease;
      cursor: default;
      user-select: none;
    }

    /* افکت هاور */
    .avaynil-tag:hover {
      transform: scale(1.05);
    }

    /* دکمه حذف */
    .avaynil-tag-remove {
      margin-left: 8px;
      cursor: pointer;
      font-weight: bold;
      color: #ffcccc;
      transition: color 0.25s ease;
    }

    .avaynil-tag-remove:hover {
      color: #ffffff;
    }

    /* ========================= */
    /*        ریسپانسیو          */
    /* ========================= */

    /* تبلت */
    @media (max-width: 992px) {
      .avaynil-tag-box {
        gap: 6px;
        padding: 6px 8px;
      }

      .avaynil-tag {
        font-size: 12px;
        padding: 5px 10px;
      }
    }

    /* موبایل */
    @media (max-width: 600px) {
      .avaynil-tag-box {
        flex-direction: row;
        align-items: flex-start;
        padding: 8px;
        font-size: 10px;
      }

      .avaynil-tag {
        width: 100%;
        justify-content: space-between;
        border-radius: 14px;
        font-size: 14px;
        padding: 8px 12px;
        box-shadow: 0 4px 8px rgba(0, 168, 143, 0.25);
      }

      .avaynil-tag-remove {
        font-size: 16px;
        margin-left: 0;
      }
    }

    /* صفحه‌های خیلی کوچک (مثل گوشی‌های قدیمی) */
    @media (max-width: 400px) {
      .avaynil-tag {
        font-size: 13px;
        padding: 7px 10px;
      }

      .avaynil-tag-box {
        border-radius: 8px;
        gap: 5px;
      }
    }

    .customer-status {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin: 15px 0;
      direction: rtl;
    }

    /* پنهان کردن دکمه اصلی رادیو */
    .customer-status input[type="radio"] {
      display: none;
    }

    /* طراحی لیبل‌ها */
    .customer-status label {
      /* background: linear-gradient(145deg, #ffffff, #e6f5f1);
                                  border: 2px solid #00a88f; */
      /* border-radius: 14px; */
      padding: 10px 18px;
      cursor: pointer;
      /* transition: all 0.25s ease; */
      /* box-shadow: 0 4px 10px rgba(0, 168, 143, 0.15); */
      display: flex;
      align-items: center;
      font-size: 12px;
      font-weight: 600;
      color: #0b6b58;
      user-select: none;
    }

    /* افکت هاور */
    .customer-status label:hover {
      background: linear-gradient(145deg, #f2fffb, #d9f3ec);
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0, 168, 143, 0.25);
    }

    /* حالت انتخاب‌شده */
    .customer-status input[type="radio"]:checked + span {
      background: linear-gradient(145deg, #00a88f, #00997c);
      color: #fff;
      box-shadow: 0 6px 16px rgba(0, 168, 143, 0.4);
      transform: translateY(-3px);
    }

    /* متن داخل span */
    .customer-status span {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 10px;
      transition: all 0.25s ease;
    }
  }

  /* حالت تبلت */
  @media (max-width: 768px) {
    .customer-status label {
      font-size: 10px;
      padding: 8px 14px;
      flex: 1 1 calc(50% - 10px);
      justify-content: center;
    }
  }

  /* حالت موبایل */
  @media (max-width: 480px) {
    .customer-status {
      /* flex-direction: column; */
      align-items: stretch;
    }

    .customer-status label {
      width: 100%;
      text-align: center;
      font-size: 10px;
      padding: 12px;
    }
  }

  #av_Sales_expert_cmd .select2-selection__choice__remove,
  #av_Sales_expert_cmd .select2-selection__choice {
    color: white !important;
    background-color: transparent !important;
    border: none !important;
    display: none;
  }

  /* #personel_select_task_cycl .select2-selection__choice__remove,
                          #personel_select_task_cycl .select2-selection__choice {
                              color: white !important;
                              background-color: transparent !important;
                              border: none !important;
                              display: none;
          
                          } */

  /******************************** */
  .Avaynil_Shiraz_CRM_wrapper {
    direction: rtl;
    background-color: #f5f5f5;
    padding: 0;
    width: 100%;
    /* min-height: 100vh; */
    font-size: 12px;
    font-weight: 700;
    height: 100%;
  }

  .Avaynil_Shiraz_CRM_wrapper * {
    /* font-size:12px; */
    font-weight: 400;
  }

  /*****************************
                          نوار وضعیت بالا (Status Bar)
                          *****************************/
    .Avaynil_Shiraz_CRM_statusbar {
    color: #fff;
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    padding: 10px 20px;
    margin-right: 50px;

    /* سایه جذاب */
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15),  /* سایه اصلی */
                0 2px 6px rgba(0,0,0,0.08);   /* سایه ثانویه ملایم */
    transition: all 0.3s ease;
  }


  .Avaynil_Shiraz_CRM_statusbar input[type="text"] {
    border: none;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 14px;
    outline: none;
    width: 200px;
  }

  .Avaynil_Shiraz_CRM_statusbar button {
    background: #00a88f;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 14px;
  }

  /*****************************
                          ساختار اصلی
                          *****************************/
  .Avaynil_Shiraz_CRM_container {
    display: flex;
    width: 100%;
    min-height: calc(100vh - 60px);
    margin-bottom: 70px;
  }

  .Avaynil_Shiraz_CRM_main {
    display: flex;
    /* flex-direction: column; */
    flex-grow: 1;
    padding: 4px;
    width: 100%;
    margin-right: 2px;
    margin-bottom: 2px;
    /* 👈 به اندازه عرض منو فاصله از راست بده */
  }
  .Avaynil_Shiraz_CRM_main_panel {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 10px;
    width: 100%;
    margin-right: 2px;
    /* margin-bottom: 70px; */
    /* 👈 به اندازه عرض منو فاصله از راست بده */
  }

  /*****************************
                          ردیف بالایی (پروفایل + چهره)
                          *****************************/
  .Avaynil_Shiraz_CRM_toprow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
  }

  .Avaynil_Shiraz_CRM_profile {
    flex: 1;
    border: 1px solid gray;
    background-color: #e0e3e8;
    display: flex;
    border-radius: 6px;
  }

  .Avaynil_Shiraz_CRM_stars {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border: 1px solid gray;
    background-color: #fffdf1;
    margin: 2px;
    border-radius: 8px;
    width: 50px;
  }

  .Avaynil_Shiraz_CRM_stars img {
    width: 25px;
    height: 25px;
  }

  .Avaynil_Shiraz_CRM_profile_info {
    display: inline-block;
    margin: 5px;
    text-align: center;
    vertical-align: middle;
    flex: 1;
    width: 35%;
  }

  .Avaynil_Shiraz_CRM_profile_name {
    margin: 5px;
    text-align: right;
    font-size: 13px;
    font-weight: 700;
  }

  .Avaynil_Shiraz_CRM_profile_state {
    margin: 5px;
    text-align: right;
    font-size: 12px;
    font-weight: 200;
  }

  .Avaynil_Shiraz_CRM_profile_row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .Avaynil_Shiraz_CRM_profile_image img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #fff;
    background-color: #fff;
    padding: 6px;
  }

  .Avaynil_Shiraz_CRM_profile_code {
    margin-top: 5px;
    font-size: 14px;
    font-weight: 400;
  }

  .Avaynil_Shiraz_CRM_contact_list {
    display: flex;
    flex-direction: column;
    align-self: start;
    gap: 6px;
    padding: 8px;
    margin-right: 10px;
  }

  .Avaynil_Shiraz_CRM_contact_row {
    display: flex;
    align-items: self-start;
    gap: 5px;
  }

  .Avaynil_Shiraz_CRM_contact_row img {
    width: 18px;
    height: 18px;
  }

  .Avaynil_Shiraz_CRM_face_icon {
    width: 120px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .Avaynil_Shiraz_CRM_face_icon svg {
    width: 100%;
    height: 100%;
    stroke: #00a88f;
  }

  /*****************************
                          بخش میانی و ردیف‌ها
                          *****************************/
  .Avaynil_Shiraz_CRM_middle {
    /* background-color: #fff; */
    /* border-radius: 6px; */
    padding: 5px;
    max-height: 400px;
    margin-bottom: 70px;
    /* border: 1px solid #ccc; */
  }

  .Avaynil_Shiraz_CRM_steps {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 2px;
  }

  .Avaynil_Shiraz_CRM_step {
    position: relative;
    background: #fff;
    color: #333;
    border: 1px solid #ccc;
    padding: 10px 30px;
    text-align: center;
    font-size: 14px;
    transition: all 0.3s ease;
  }

  .Avaynil_Shiraz_CRM_step::after {
    content: "";
    position: absolute;
    left: -15px;
    top: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 15px solid #fff;
  }

  .Avaynil_Shiraz_CRM_step::before {
    content: "";
    position: absolute;
    left: -17px;
    top: 0;
    border-top: 21px solid transparent;
    border-bottom: 21px solid transparent;
    border-right: 17px solid #ccc;
  }

  .Avaynil_Shiraz_CRM_step:first-child::before,
  .Avaynil_Shiraz_CRM_step:first-child::after {
    display: none;
  }

  .Avaynil_Shiraz_CRM_step.active {
    background: #00a88f;
    color: #fff;
    border-color: #008f77;
  }

  .Avaynil_Shiraz_CRM_row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
  }

  .Avaynil_Shiraz_CRM_plus_box {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 0;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    margin-right: 40px;
    background: linear-gradient(145deg, #004c99, #003b80);
  }
  .Avaynil_Shiraz_CRM_plus_box:hover {
    transform: translateY(-2px);
    background: linear-gradient(145deg, #0059b3, #004080);
    box-shadow: 0 10px 24px rgba(0, 76, 153, 0.25);
  }

  .Avaynil_Shiraz_CRM_history_header {
    display: flex;
    width: 100%;
    background-color: #ffffff;
    padding: 4px;
    align-items: right;
    /* justify-content: space-between; */
  }

  .Avaynil_Shiraz_CRM_section_title {
    background: #fff;
    border: 1px solid #ccc;
    padding: 8px 10px;
    border-radius: 6px;
    font-weight: bold;
    text-align: center;
    font-size: 16px;
    margin: 4px;
  }

  .Avaynil_Shiraz_CRM_year_boxes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }

  .Avaynil_Shiraz_CRM_year_box {
    color: #000;
    font-weight: bold;
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 15px;
  }

  /* سایدبار اصلی (دسکتاپ) */
  .AVAYNIL_Shiraz_CRM_side {
    width: 60px;
    background-color: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 50px;
    gap: 25px;
    position: fixed;
    top: 0px;
    right: 0;
    height: 100vh;
    z-index: 1000;
    border-left: 2px solid #00a88f;
  }
  .AVAYNIL_Shiraz_CRM_side button {
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    color: #fff;
    font-size: 26px !important; /* 👈 این خط کلیدی است */
    transition: transform 0.2s ease, color 0.2s ease;
  }

  .AVAYNIL_Shiraz_CRM_side button:hover {
    transform: scale(1.2);
    color: #00e0b0;
  }

  .avaynil_row_top_left_crm * {
    font-size: 12px;
  }
  /* تولتیپ */
  .AVAYNIL_Shiraz_CRM_side button span::after {
    content: attr(tooltip);
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    background: #00a88f;
    color: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, right 0.3s ease;
    font-size: 13px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
  }

  .AVAYNIL_Shiraz_CRM_side button:hover span::after {
    opacity: 1;
    right: 70px;
  }

  /* حالت موبایل: منو در پایین صفحه */
  @media (max-width: 768px) {
    .AVAYNIL_Shiraz_CRM_side {
      width: 100%;
      height: 60px;
      bottom: 0;
      top: auto;
      right: 0;
      left: 0;
      gap: 4px;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      padding: 0 5px;
      border-left: none;
      border-top: 2px solid #00a88f;
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    }

    .AVAYNIL_Shiraz_CRM_side button {
      font-size: 18px !important;
      color: #fff;
    }

    /* تولتیپ در موبایل بهتر است حذف یا اصلاح شود */
    /* تولتیپ در موبایل - نمایش بالای آیکون */

    .Avaynil_Shiraz_CRM_statusbar {
      margin: 0;
    }

    /* تولتیپ در موبایل بهتر است حذف یا اصلاح شود */

    .Avaynil_Shiraz_CRM_container {
      flex-direction: column;
      padding: 2px;
      margin: 0;
    }
  
    .Avaynil_Shiraz_CRM_stars {
      flex-direction: row;
      /* افقی → عمودی */
      /* width: 50px; */
      width: 100%;
      /* عرض ثابت برای عمودی شدن */
    }
    .Avaynil_Shiraz_CRM_profile_row {
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    .avaynil_row_top_left_crm {
      width: 100% !important;
      text-align: center;
      align-items: center;
    }
    .avaynil_section_right_crm {
      width: 95% !important;
    }
    .avaynil-inline-block_info_plus {
      width: 5% !important;
      padding: 0px;
      align-items: center;
      justify-content: center;
    }
    .Avaynil_Shiraz_CRM_main {
      width: 100%;
    }

    .Avaynil_Shiraz_CRM_steps {
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
    }
    .Avaynil_Shiraz_CRM_face_icon {
      position: absolute;
      top: 50px;
      left: 5px;
      width: 80px;
      height: 80px;
      justify-content: flex-start;
      align-items: flex-start;
      z-index: 9999; /* آیکون روی تمام المان‌ها قرار می‌گیرد */
    }
  }

  @media (max-width: 480px) {
    .AVAYNIL_Shiraz_CRM_side {
      width: 100%;
      height: 60px;
      bottom: 0;
      top: auto;
      gap: 4px;
      right: 0;
      left: 0;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      padding: 0 5px;
      border-left: none;
      border-top: 2px solid #00a88f;
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    }

    .AVAYNIL_Shiraz_CRM_side button {
      font-size: 18px !important;
      color: #fff;
    }

    /* تولتیپ در موبایل بهتر است حذف یا اصلاح شود */

    .Avaynil_Shiraz_CRM_steps {
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
    }
  }

  /* ===================== */
  /* Responsive Styles */
  /* ===================== */

  @media screen and (max-width: 1200px) {
    .Avaynil_Shiraz_CRM_step {
      width: 100%;
      font-size: 10px;
      padding: 6px 5px;
    }
    .Avaynil_Shiraz_CRM_toprow {
      flex-direction: column;
      align-items: stretch;
      gap: 15px;
      margin: 0;
    }
    .Avaynil_Shiraz_CRM_profile_name {
      font-size: 12px;
      font-weight: 700;
    }
    .Avaynil_Shiraz_CRM_profile {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .Avaynil_Shiraz_CRM_profile_info {
      width: 100%;
      margin: 0;
    }

    .Avaynil_Shiraz_CRM_face_icon {
      position: absolute;
      top: 50px;
      left: 5px;
      width: 80px;
      height: 80px;
      justify-content: flex-start;
      align-items: flex-start;
      z-index: 9999; /* آیکون روی تمام المان‌ها قرار می‌گیرد */
    }
    .Avaynil_Shiraz_CRM_face_icon svg {
      width: 50%;
      height: 50%;
      stroke: #00a88f;
    }

    .Avaynil_Shiraz_CRM_steps {
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
    }

    .Avaynil_Shiraz_CRM_middle {
      flex-direction: column;
      margin-bottom: 70px;
    }
    .avaynil-inline-block_info_plus #btn-add-att {
      bottom: -10px;
      left: -10px;
      width: 35px;
      height: 35px;
      font-size: 24px;
    }

    .AVAYNIL_Shiraz_CRM_side {
      width: 100%;
      height: 60px;
      bottom: 0;
      top: auto;
      right: 0;
      gap: 4px;
      left: 0;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      padding: 0 5px;
      border-left: none;
      border-top: 2px solid #00a88f;
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    }

    .AVAYNIL_Shiraz_CRM_side button {
      font-size: 18px !important;
      color: #fff;
    }
    .AVAYNIL_Shiraz_CRM_side button span::after {
      content: attr(tooltip);
      position: absolute;
      right: 0px;
      top: -40px;
      transform: translateY(50%);
      background: #00a88f;
      color: #fff;
      padding: 6px 12px;
      border-radius: 8px;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease, right 0.3s ease;
      font-size: 10px;
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
    }

    .AVAYNIL_Shiraz_CRM_side button:hover span::after {
      opacity: 1;
      right: 0px;
      top: -50px;
    }

    .circle-item {
      width: 45px !important;
      height: 45px !important;
    }
    .circle-add-btn {
      width: 45px !important;
      height: 45px !important;
      font-size: 20px !important;
    }
    .avaynil_row_top_left_crm {
      width: 100% !important;
      text-align: center;
      align-items: center;
    }
    .Avaynil_Shiraz_CRM_stars {
      flex-direction: row;
      /* افقی → عمودی */
      /* width: 50px; */
      width: 100%;
      /* عرض ثابت برای عمودی شدن */
    }
    .customer-status label {
      /* background: linear-gradient(145deg, #ffffff, #e6f5f1);
                                  border: 2px solid #00a88f; */
      /* border-radius: 14px; */
      /* padding: 10px 18px;
                                  cursor: pointer; */
      /* transition: all 0.25s ease; */
      /* box-shadow: 0 4px 10px rgba(0, 168, 143, 0.15); */
      /* display: flex;
                                  align-items: center; */
      font-size: 10px;
      /* font-weight: 600;
                                  color: #0b6b58;
                                  user-select: none; */
    }

    .avaynil-tag-box {
      flex-direction: row;
      align-items: flex-start;
      padding: 8px;
      font-size: 10px;
    }

    .cmd-label {
      top: 15px;
      left: -20px;
      /* کمی عقب‌تر تا کاملاً دیده شود */
      width: 40px;
      /* پهن‌تر می‌کنیم چون متن کوچکتر می‌شود */
      font-size: 9px;
      padding: 2px 0;
      transform: rotate(-90deg) scale(0.85);
      /* کمی کوچکتر و متناسب‌تر */
    }
  }

  @media screen and (max-width: 992px) {
    .Avaynil_Shiraz_CRM_step {
      width: 100%;
      font-size: 10px;
      padding: 6px 5px;
    }
   

    .Avaynil_Shiraz_CRM_main {
      margin-right: 0;
      width: 100%;
    }

    .Avaynil_Shiraz_CRM_contact_list {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
    }

    .Avaynil_Shiraz_CRM_contact_row {
      justify-content: center;
      gap: 5px;
    }
    /* 
                              .Avaynil_Shiraz_CRM_middle div {
                                  width: 100% !important;
                              } */
    .Avaynil_Shiraz_CRM_profile_row {
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    .Avaynil_Shiraz_CRM_steps {
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
    }
  }

  @media screen and (max-width: 768px) {
    .Avaynil_Shiraz_CRM_step {
      width: 100%;
      font-size: 10px;
      padding: 6px 5px;
    }
    .Avaynil_Shiraz_CRM_statusbar {
      flex-direction: column;
      gap: 10px;
      padding: 8px 12px;
      margin-right: 0;
    }

    .Avaynil_Shiraz_CRM_stars {
      flex-direction: row;
      /* افقی → عمودی */
      /* width: 50px; */
      width: 100%;
      /* عرض ثابت برای عمودی شدن */
    }

    .avaynil-star-3d {
      width: 10px;
      height: 10px;
    }

    .Avaynil_Shiraz_CRM_statusbar input[type="text"] {
      width: 100%;
    }

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

    .Avaynil_Shiraz_CRM_step::after,
    .Avaynil_Shiraz_CRM_step::before {
      display: none;
    }

    .Avaynil_Shiraz_CRM_plus_box {
      margin-right: 0;
      margin-top: 10px;
    }

    .Avaynil_Shiraz_CRM_face_icon {
      position: absolute;
      top: 50px;
      left: 5px;
      width: 80px;
      height: 80px;
      justify-content: flex-start;
      align-items: flex-start;
      z-index: 9999; /* آیکون روی تمام المان‌ها قرار می‌گیرد */
    }
    .Avaynil_Shiraz_CRM_profile_row {
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    .Avaynil_Shiraz_CRM_main {
      margin-right: 0;
      width: 100%;
    }
  }

  @media screen and (max-width: 480px) {
    .Avaynil_Shiraz_CRM_profile_image img {
      width: 70px;
      height: 70px;
    }

    .Avaynil_Shiraz_CRM_step {
      width: 100%;
      font-size: 10px;
      padding: 6px 5px;
    }

    .Avaynil_Shiraz_CRM_stars {
      flex-direction: row;
      /* افقی → عمودی */
      /* width: 50px; */
      width: 100%;
      /* عرض ثابت برای عمودی شدن */
    }

    .avaynil-star-3d {
      width: 10px;
      height: 10px;
    }

    .Avaynil_Shiraz_CRM_contact_row span {
      font-size: 12px;
      min-width: 70px;
    }

    .Avaynil_Shiraz_CRM_plus_box {
      font-size: 20px;
      padding: 0;
    }
    .avaynil-contactcredit-label_attachment {
      writing-mode: sideways-lr;
      text-orientation: mixed;
    }
    .Avaynil_Shiraz_CRM_main {
      margin-right: 0;
      width: 100%;
    }
  }

  /* ====== CSS: فقط کلاس‌های جدید (av-inline-*) که استایل‌های inline را جایگزین کردند ====== */

  /* پایه */
  .av-inline-statusbar-inner {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .av-inline-search-btn {
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
  }

  /* background transparent for icon images previously inline */
  .av-inline-bg-transparent {
    background-color: transparent !important;
  }

  /* شماره موبایل min-width */
  .av-inline-minwidth-100 {
    min-width: 100px;
    display: inline-block;
    direction: ltr;
    /* اگر لازم باشه شماره‌ها راست‌به‌چپ را کنترل کن */
  }

  /* راست-بال/بلاک اطلاعات اصلی (width:60% inline) */
  .av-inline-right-block {
    width: 60%;
    text-align: right;
    align-items: flex-start;
    display: flex;
    flex-direction: column;
  }

  /* year boxes container inline alignment */
  .av-inline-yearboxes {
    align-items: flex-start;
    text-align: right;
  }

  /* transparent style button (id modal_market_maker-info) */
  .av-inline-transparent-btn {
    border: none;
    background-color: transparent;
    font-size: 20px;
    margin-right: auto;
    cursor: pointer;
  }

  /* face svg classes */
  .av-inline-face-healthy {
    stroke: #00a88f !important;
    color: #00a88f !important;
  }

  .av-inline-face-sad {
    stroke: #ff4b4b !important;
    color: #ff4b4b !important;
  }

  /* steps row (previous inline display:flex; gap...) */
  .av-inline-steps-row {
    display: flex;
    align-items: stretch;
    width: 100%;
    gap: 10px;
    margin-bottom: 10px;
  }

  /* credit box (replaces big inline block) */
  .av-inline-credit-box {
    display: flex;
    flex: 1;
    border: 3px solid gray;
    font-size: 18px;
    flex-direction: row;
    background-color: #fff;
    align-items: stretch;
  }

  .av-inline-credit-label {
    background-color: #fff795;
    padding: 8px;
    border-radius: 5px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .av-inline-credit-value {
    background-color: #eaffee;
    min-width: 100px;
    padding: 8px;
    flex: 2;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .av-inline-credit-strong {
    color: #0b6b58;
  }

  .av-inline-credit-due {
    background-color: #ffcecf;
    padding: 8px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .av-inline-credit-ok {
    background-color: #00856f;
    padding: 8px;
    flex: 1;
  }

  /* admin message block (replaces inline flex block) */
  .av-inline-admin-msg {
    flex: 2;
    display: flex;
    background-color: #c6e9e5;
    align-items: center;
    text-align: center;
    border: 2px solid gray;
    padding: 5px;
    gap: 8px;
  }

  .av-inline-admin-label {
    width: 150px;
    display: inline-block;
    text-align: right;
  }

  .av-inline-admin-input {
    margin: auto;
    flex: 1;
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
  }

  .av-inline-transparent-icon-btn {
    border: none;
    background: transparent;
    font-size: 20px;
    margin-right: auto;
    cursor: pointer;
  }

  .av-inline-admin-label-view {
    color: red;
    font-size: 12px;
    font-weight: 700;
    flex: 1;
    text-align: center;
  }

  /* comments section: replace margin-right:30px and other inline bits */
  .av-inline-comments-section {
    width: 100%;
  }

  .av-inline-comment-children {
    margin-right: 30px;
  }

  .av-inline-comment-card {
    border: none !important;
    margin-bottom: 8px;
  }

  .av-inline-comment-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
  }

  .av-inline-comment-actions {
    justify-content: space-between;
    display: flex;
    gap: 8px;
    align-items: center;
  }

  /* category & desc layout (replaces inline widths) */
  .av-inline-category-row {
    display: flex;
    width: 100%;
    align-items: stretch;
    gap: 12px;
  }

  .av-inline-category-left {
    width: 80%;
    display: flex;
    flex-direction: column;
  }

  .av-inline-category-right {
    width: 20%;
    display: flex;
    flex-direction: column;
  }

  /* attachments block (replaces many inline styles) */
  .av-inline-attachments-block {
    position: relative;
    width: 3%;
    margin-right: auto;
    margin-left: 0;
    text-align: center;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    padding: 10px;
    box-sizing: border-box;
  }

  .av-inline-attachments-list {
    display: block;
  }

  .av-inline-attachments-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    align-items: center;
    writing-mode: sideways-lr;
    text-orientation: mixed;
  }

  .av-inline-attachment-item {
    text-align: left;
  }

  .av-inline-attachment-link {
    display: inline-block;
    background: #00a88f;
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
  }

  /* floating plus button */
  .av-inline-add-attachment-btn {
    position: absolute;
    bottom: -15px;
    left: -15px;
    font-size: 30px;
    border: none;
    background-color: #00a88f;
    color: white;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  /* history button minor class (if need override) */
  .av-inline-history-btn {
    padding: 6px 10px;
    border-radius: 6px;
    color: #fff;
    border: none;
    cursor: pointer;
  }

  /* small helpers */
  .av-inline-row-flex {
    display: flex;
    gap: 10px;
    align-items: center;
  }

  /* ====== Responsive ====== */

  /* tablet */
  @media (max-width: 992px) {
    .av-inline-right-block {
      width: 100%;
    }

    .av-inline-category-row {
      flex-direction: column;
    }

    .av-inline-attachments-block {
      width: 100%;
      position: relative;
      margin-top: 10px;
    }

    .av-inline-steps-row {
      flex-direction: column;
    }

    .av-inline-credit-box {
      flex-direction: column;
      border-width: 2px;
    }

    .av-inline-admin-msg {
      flex-direction: row;
      gap: 8px;
    }

    .av-inline-minwidth-100 {
      min-width: 80px;
    }
    .avaynil-inline-block_info_plus #btn-add-att {
      bottom: -10px;
      left: -10px;
      width: 35px;
      height: 35px;
      font-size: 24px;
    }
    .avaynil_row_top_left_crm {
      width: 100% !important;
      text-align: center;
      align-items: center;
    }
    .avaynil-inline-block_info_plus .avaynil_attachment_contact_crm {
      font-size: 8px;
      font-weight: 100;
      padding: 1px 2px;
      width: 100%;
      text-align: center;
      /* بکگراند حذف شود */
      color: #fff;
      border: 1px solid #d4e9e3;
    }
    .avaynil_section_right_crm {
      width: 95% !important;
      margin-bottom: 70px;
    }
    .avaynil-inline-block_info_plus {
      width: 5% !important;
      padding: 0px;
      align-items: center;
      justify-content: center;
    }
    .avaynil-contactcredit-label_attachment {
      writing-mode: sideways-lr;
      text-orientation: mixed;
    }
  }

  /* mobile */
  @media (max-width: 576px) {
    /* .AVAYNIL_Shiraz_CRM_side {
                                  width: 56px;
                              } */

    /* example: shrink side */
    .av-inline-statusbar-inner {
      flex-direction: column;
      align-items: stretch;
      gap: 6px;
    }

    .av-inline-search-btn {
      width: 100%;
    }

    .Avaynil_Shiraz_CRM_face_icon {
      position: absolute;
      top: 50px;
      left: 5px;
      width: 80px;
      height: 80px;
      justify-content: flex-start;
      align-items: flex-start;
      z-index: 9999; /* آیکون روی تمام المان‌ها قرار می‌گیرد */
    }
    .av-inline-minwidth-100 {
      min-width: 60px;
    }

    .av-inline-attachments-inner {
      writing-mode: horizontal-tb;
    }

    /* avoid sideways on tiny screens */
    .av-inline-add-attachment-btn {
      bottom: -12px;
      left: -12px;
      width: 36px;
      height: 36px;
      font-size: 24px;
    }

    .av-inline-credit-box {
      border: 1px solid #ccc;
    }

    .av-inline-admin-label {
      width: 120px;
    }
    .avaynil-inline-block_info_plus #btn-add-att {
      bottom: -10px;
      left: -10px;
      width: 35px;
      height: 35px;
      font-size: 24px;
    }
    .avaynil_row_top_left_crm {
      width: 100% !important;
      text-align: center;
      align-items: center;
    }
    .avaynil-inline-block_info_plus .avaynil_attachment_contact_crm {
      font-size: 8px;
      font-weight: 100;
      padding: 1px 2px;
      width: 100%;
      text-align: center;
      /* بکگراند حذف شود */
      color: #fff;
      border: 1px solid #d4e9e3;
    }
    .avaynil_section_right_crm {
      width: 95% !important;
      margin-bottom: 70px;
    }
    .avaynil-inline-block_info_plus {
      width: 5% !important;
      padding: 0px;
      align-items: center;
      justify-content: center;
    }
    .avaynil-contactcredit-label_attachment {
      writing-mode: sideways-lr;
      text-orientation: mixed;
    }
  }

  .customer-status {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    /* دسکتاپ RTL طبیعی */
    gap: 10px;
    margin: 5px 0;
    direction: rtl;
  }

  /* پنهان کردن دکمه اصلی رادیو */
  .customer-status input[type="radio"] {
    display: none;
  }

  /* طراحی لیبل‌ها */
  .customer-status label {
    /* background: linear-gradient(145deg, #ffffff, #e6f5f1); */
    /* border: 2px solid #00a88f; */
    /* border-radius: 14px; */
    padding: 10px 18px;
    cursor: pointer;
    /* transition: all 0.25s ease; */
    /* box-shadow: 0 4px 10px rgba(0, 168, 143, 0.15); */
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    color: #0b6b58;
    user-select: none;
  }

  /* افکت هاور */
  .customer-status label:hover {
    background: linear-gradient(145deg, #f2fffb, #d9f3ec);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 168, 143, 0.25);
  }

  /* حالت انتخاب‌شده */
  .customer-status input[type="radio"]:checked + span {
    background: linear-gradient(145deg, #00a88f, #00997c);
    color: #fff;
    box-shadow: 0 6px 16px rgba(0, 168, 143, 0.4);
    transform: translateY(-3px);
  }

  /* متن داخل span */
  .customer-status span {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 10px;
    transition: all 0.25s ease;
  }

  /* حالت تبلت */
  @media (max-width: 768px) {
    .customer-status label {
      font-size: 10px;
      /* کوچکتر شدن فونت */
      padding: 6px 10px;
      /* کاهش padding */
      flex: 1 1 calc(50% - 10px);
      justify-content: center;
      background: none;
      /* حذف پس‌زمینه */
      box-shadow: none;
      /* حذف سایه */
      /* border: 1px solid #00a88f; */
      /* فقط خط دور */
      color: #0b6b58;
    }
    .avaynil_row_top_left_crm {
      width: 100% !important;
      text-align: center;
      align-items: center;
    }
    .avaynil-inline-block_info_plus .avaynil_attachment_contact_crm {
      font-size: 8px;
      font-weight: 100;
      padding: 1px 2px;
      width: 100%;
      text-align: center;
      /* بکگراند حذف شود */
      color: #fff;
      border: 1px solid #d4e9e3;
    }
    .avaynil_section_right_crm {
      width: 95% !important;
      margin-bottom: 70px;
    }
    .avaynil-inline-block_info_plus {
      width: 5% !important;
      padding: 0px;
    }
    .avaynil-contactcredit-label_attachment {
      writing-mode: sideways-lr;
      text-orientation: mixed;
    }
  }

  /* حالت موبایل */
  @media (max-width: 480px) {
    .customer-status {
      flex-direction: row;
      align-items: stretch;
      direction: ltr;
    }

    .customer-status label {
      width: 100%;
      text-align: center;
      font-size: 10px;
      /* فونت کوچکتر */
      padding: 6px;
      /* کاهش padding */
      background: none;
      /* حذف پس‌زمینه */
      box-shadow: none;
      /* حذف سایه */
      /* border: 1px solid #00a88f; */
      /* فقط خط دور */
      justify-content: center;
      color: #0b6b58;
    }

    .avaynil-inline-block_info_plus {
      width: 10% !important;
      padding: 0px;
    }

    .avaynil_section_right_crm {
      width: 90% !important;
      margin-bottom: 70px;
    }

    .avaynil-inline-block_info_plus .avaynil_attachment_contact_crm {
      font-size: 8px;
      font-weight: 100;
      padding: 1px 2px;
      width: 100%;
      text-align: center;
      /* بکگراند حذف شود */
      color: #fff;
      border: 1px solid #d4e9e3;
    }
    .avaynil_row_top_left_crm {
      width: 100% !important;
      text-align: center;
      align-items: center;
    }
    .avaynil-contactcredit-label_attachment {
      writing-mode: sideways-lr;
      text-orientation: mixed;
    }
  }

  /* کانتینر اصلی پیوست */
  .avaynil-inline-block_info_plus {
    position: relative;
    width: 3%;
    margin-right: auto;
    margin-left: 0;
    text-align: center;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    padding: 10px;
    align-items: center;
    justify-content: center;
    max-height: 800px;
    /* overflow: auto; */
    margin-bottom: 70px;
  }

  /* لیبل پیوست */
  .avaynil-inline-block_info_plus .avaynil-contactcredit-label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #0b6b58;
  }

  /* کانتینر لینک‌ها */
  .avaynil-inline-block_info_plus .info-item {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    align-items: center;
    writing-mode: sideways-lr;
    text-orientation: mixed;
  }

  /* لینک‌های پیوست */
  .avaynil-inline-block_info_plus .avaynil_attachment_contact_crm {
    display: inline-block;
    background: #00a88f;
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    transition: all 0.25s ease;
  }

  .avaynil-inline-block_info_plus .avaynil_attachment_contact_crm:hover {
    background-color: #00997c;
  }

  /* دکمه پلاس پایین سمت چپ */
  .avaynil-inline-block_info_plus #btn-add-att {
    position: absolute;
    bottom: -15px;
    left: -15px;
    font-size: 30px;
    border: none;
    background: linear-gradient(145deg, #004c99, #003b80);
    color: white;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .avaynil-inline-block_info_plus #btn-add-att:hover {
    transform: translateY(-2px);
    background: linear-gradient(145deg, #0059b3, #004080);
    box-shadow: 0 10px 24px rgba(0, 76, 153, 0.25);
  }

  /* Media Queries برای تبلت */
  @media (max-width: 768px) {
    .avaynil-inline-block_info_plus {
      width: 5% !important;
      padding: 0px;
      align-items: center;
      justify-content: center;
    }

    .avaynil-inline-block_info_plus .avaynil-contactcredit-label {
      font-size: 12px;
      font-weight: 700;
    }

    .avaynil-inline-block_info_plus .avaynil_attachment_contact_crm {
      font-size: 8px;
      font-weight: 100;
      padding: 1px 2px;
      width: 100%;
      text-align: left;
      /* بکگراند حذف شود */
      color: #fff;
      border: 1px solid #d4e9e3;
    }
    .avaynil-inline-block_info_plus #btn-add-att {
      bottom: -10px;
      left: -10px;
      width: 35px;
      height: 35px;
      font-size: 24px;
    }
    .avaynil_row_top_left_crm {
      width: 100% !important;
      text-align: center;
      align-items: center;
    }
    .avaynil-contactcredit-label_attachment {
      writing-mode: sideways-lr;
      text-orientation: mixed;
    }
  }

  /* Media Queries برای موبایل */
  @media (max-width: 480px) {
    .avaynil-inline-block_info_plus {
      width: 10% !important;
      padding: 0px;
      align-items: center;
      justify-content: center;
    }

    .avaynil-inline-block_info_plus .avaynil-contactcredit-label {
      font-size: 12px;
      font-weight: 700;
    }

    *
      کانتینر
      لینک‌ها
      */
      .avaynil-inline-block_info_plus
      .avaynil_attachment_contact_crm {
      font-size: 8px;
      font-weight: 100;
      padding: 1px 2px;
      width: 100%;
      text-align: left;
      /* بکگراند حذف شود */
      color: #fff;
      border: 1px solid #d4e9e3;
    }

    .avaynil-inline-block_info_plus #btn-add-att {
      bottom: -8px;
      left: -8px;
      width: 30px;
      height: 30px;
      font-size: 20px;
    }

    .avaynil_row_top_left_crm {
      width: 100% !important;
      text-align: center;
      align-items: center;
    }
    .avaynil-contactcredit-label_attachment {
      writing-mode: sideways-lr;
      text-orientation: mixed;
    }
  }

  .avaynil_section_right_crm {
    width: 97%;
    margin-bottom: 70px;
  }
  .avaynil_section_right_crm_full {
    width: 100%;
    margin-bottom: 70px;
  }

  .avaynil_attachment_contact_crm {
    display: inline-block;
    background: #00a88f;
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
  }

  .avaynil_row_top_left_crm {
    text-align: right;
    align-items: self-start;
  }
  .avaynil_sub_label {
    font-size: 12px;
    font-weight: 700 !important;
  }
  .avaynil-back-arrow {
    width: 10px;
    height: 10px;
    border-top: 3px solid #000;
    border-left: 3px solid #000;
    transform: rotate(-45deg);
    cursor: pointer;
    margin: 5px;
    transition: transform 0.2s;
  }

  .avaynil-back-arrow:hover {
    transform: rotate(-45deg) translateX(-3px);
  }

  .avaynil-circles-container {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
    padding: 15px;
    justify-content: center;
    text-align: center;
  }

  .circle-item {
    width: 95px;
    height: 95px;
    border-radius: 50%;
    padding: 3px; /* ضخامت border */
    background: conic-gradient(#ff4f87, #c3416f, #ff4f87); /* گرادینت */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

  .circle-item > img.circle-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid white;
  }

  .circle-text {
    font-size: 12px;
    margin-top: 6px;
  }

  /* دکمه پلاس گرد */
  .circle-add-btn {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    border: 3px dashed #ff3c85;
    font-size: 40px;
    font-weight: bold;
    background: #fff;
    color: #ff3c85;
    cursor: pointer;
  }
  .circle-add-btn:hover {
    background: #ff3c85;
    color: #fff;
  }

  .comment-card {
    position: relative; /* پایه برای absolute داخلی */
  }

  .cmd-label {
    position: absolute;
    top: 30px;
    left: -30px; /* موقعیت اولیه */
    width: 60px;
    text-align: center;
    color: #34495e;
    font-size: 12px;
    font-weight: 400;
    transform: rotate(-90deg);
    padding: 2px 0;
    transition: transform 0.3s ease, font-weight 0.3s ease;
    transform-origin: center center;
    z-index: 10; /* روی سایر عناصر قرار می‌گیرد */
  }

  .cmd-label:hover {
    font-weight: 800;
    color: #cc0000;
  }

  /******************************/
  #modal_add_cmd_in_old_cmd_close {
    border: none;
    background: none;
    font-size: 28px;
    color: #444;
    cursor: pointer;
    transition: 0.2s;
  }
  #modal_add_cmd_in_old_cmd_close:hover {
    color: #e63946;
  }

  /* فرم داخل مودال */
  #modal_add_cmd_in_old_cmd form {
    flex: 1;
    overflow-y: auto;
    padding-right: 6px;
  }

  /* اسکرول نرم */
  #modal_add_cmd_in_old_cmd form::-webkit-scrollbar {
    width: 6px;
  }
  #modal_add_cmd_in_old_cmd form::-webkit-scrollbar-thumb {
    background: #c5c5c5;
    border-radius: 4px;
  }

  /* سبک فیلدها */
  #modal_add_cmd_in_old_cmd input[type="text"] {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    width: 100%;
    transition: border-color 0.25s;
  }
  #modal_add_cmd_in_old_cmd input[type="text"]:focus {
    border-color: #0077ff;
    outline: none;
  }

  /* رادیوها */
  .customer-status label,
  .task-and-status-div label {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f8f9fc;
    padding: 5px 8px;
    margin: 3px 0;
    border-radius: 6px;
    cursor: pointer;
  }
  .customer-status input,
  .task-and-status-div input {
    accent-color: #0077ff;
  }

  /* دکمه ذخیره */
 
  /* ریسپانسیو - تبلت */
  @media (max-width: 768px) {
    #modal_add_cmd_in_old_cmd {
      width: 90%;
      padding: 15px;
    }
  }

  /* ریسپانسیو - موبایل */
  @media (max-width: 480px) {
    #modal_add_cmd_in_old_cmd {
      width: 96%;
      border-radius: 15px;
      padding: 12px;
    }
    .customer-status label {
      font-size: 13px;
    }
    .task-and-status-div label {
      font-size: 13px;
    }
  }
  /* حالت نمایش در نمایشگرهای بزرگ‌تر از 1200px */
  @media (min-width: 1200px) {
    #modal_add_cmd_in_old_cmd {
      width: 50%; /* یا 500px، 600px یا هر مقدار دلخواه */
      padding: 25px;
      height: 80% !important;
      max-width: 90%;
    }

    .avaynil-btn-save-command {
      font-size: 14px;
      padding: 14px;
    }
  }

  /* ================================
            🔷 فیلتر تاریخ
          ================================ */
  .avaynil-filter-box {
    background: #ffffff;
    padding: 18px;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    margin-bottom: 25px;
    /* max-width: 480px; */
  }

  .avaynil-filter-form {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  .avaynil-filter-label {
    font-weight: bold;
    font-size: 13px;
    color: #333;
  }

  .avaynil-filter-input {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid #cfd6e1;
    border-radius: 8px;
    font-size: 13px;
  }

  .avaynil-filter-btn {
    background: #0d6efd;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 20px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
  }

  .avaynil-filter-btn:hover {
    background: #0b5ed7;
  }

  /* ================================
            🔷 بخش گزارش فروشندگان
          ================================ */
  .avaynil-report-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 10px;
  }

  .avaynil-report-card {
    flex: 1 1 25%;
    max-width: 340px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.07);
    padding: 16px;
    font-size: 13px;
    transition: 0.2s;
  }

  .avaynil-report-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12);
  }

  .avaynil-report-title {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
  }

  .avaynil-position-text {
    color: #888;
    font-size: 12px;
  }

  /* داخل کارت */
  .avaynil-report-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .avaynil-report-box {
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #eee;
  }

  .daily-box {
    background: #f4f7ff;
    border-color: #dce6ff;
  }

  .monthly-box {
    background: #fff8e6;
    border-color: #ffe4a8;
  }

  .paycheck-box {
    background: #eafff3;
    border-color: #c4f5dc;
  }

  /* ================================
            🔷 ریسپانسیو کامل
          ================================ */

  /* موبایل کوچک */
  @media (max-width: 480px) {
    .avaynil-report-card {
      flex: 1 1 100%;
      max-width: 100%;
    }

    .avaynil-filter-box {
      max-width: 100%;
    }
  }

  /* موبایل متوسط */
  @media (max-width: 768px) {
    .avaynil-report-card {
      flex: 1 1 48%;
      max-width: 48%;
    }
  }

  /* تبلت */
  @media (max-width: 992px) {
    .avaynil-report-card {
      flex: 1 1 33%;
      max-width: 33%;
    }
  }

  /* دسکتاپ بزرگ */
  @media (min-width: 1200px) {
    .avaynil-report-card {
      flex: 1 1 24%;
      max-width: 18%;
    }
  }
  {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 90%;
    height: 50%;
    max-height: 70%;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
    /* overflow-y: auto; اضافه کردن اسکرول در صورت نیاز */
  }

  /* حالت تبلت */

  #modal_add_lbl_in_old_lbl_main {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
  }
  /* محدود کردن ارتفاع پاپ‌آپ */
  #modal_add_lbl_in_old_lbl {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    max-width: 50%;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    transition: all 0.3s ease-in-out;
  }

  /* تنظیم ارتفاع لیست محصولات */
  #avaynil_popup_list {
    max-height: 200px; /* حدود ۴ ردیف */
    overflow-y: auto;
    padding-right: 10px; /* فاصله برای اسکرول */
  }

  /* استایل اسکرول */
  #avaynil_popup_list::-webkit-scrollbar {
    width: 6px;
  }

  #avaynil_popup_list::-webkit-scrollbar-thumb {
    background: #007bff;
    border-radius: 10px;
  }

  #avaynil_popup_list::-webkit-scrollbar-track {
    background: #f1f1f1;
  }

  /* استایل جدول */
  #avaynil_popup_list table {
    width: 100%;
    border-collapse: collapse;
  }

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

  #avaynil_popup_list th {
    background: #007bff;
    color: white;
  }

  /* افکت ورود و خروج */
  #avaynil_popup.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  #avaynil_popup.hide {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }

  /* دکمه بستن */
  #avaynil_popup_close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: red;
    color: white;
    border: none;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 5px;
    cursor: pointer;
  }

  #avaynil_popup_close:hover {
    background: darkred;
  }

  /* استایل جدول */
  #avaynil_popup_list table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
  }

  #avaynil_popup_list th,
  #avaynil_popup_list td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    text-align: center;
    font-size: 12px;
  }

  #avaynil_popup_list th {
    background: #007bff;
    color: white;
  }
  #avaynil-form-container {
    margin: 0 auto;
    padding: 20px;
    height: 100%;
    background-color: #f4f4f4;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  #avaynil-form-container h2 {
    text-align: center;
    color: #333;
  }
  #avaynil-form-container label {
    font-size: 12px;
    /*font-weight: bold;*/
    margin-bottom: 8px;
    display: block;
  }
  #avaynil-form-container input[type="text"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    margin-left: 0;
  }
  #avaynil-form-container button {
    width: 100%;
    padding: 12px;
    background-color: #4caf50;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  #avaynil-form-container button:hover {
    background-color: #45a049;
  }
  #result {
    margin-top: 20px;
    text-align: center;
    font-size: 16px;
    color: #ff0000;
  }

  .pagination-container {
    margin-top: 15px;
    text-align: center;
  }

  .page-btn {
    background-color: #0073aa;
    color: white;
    border: none;
    padding: 6px 12px;
    margin: 0 3px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 14px;
    transition: background-color 0.3s;
  }

  .page-btn:hover {
    background-color: #005177;
  }

  .page-btn.active {
    background-color: #00a0d2;
    font-weight: bold;
  }
  .avaynil-contacts-pagination a,
  .avaynil-contacts-pagination span {
    display: inline-block;
    margin: 0 5px;
    padding: 8px 12px;
    border: 1px solid #ccc;
    background: #f9f9f9;
    color: #333;
    border-radius: 4px;
    text-decoration: none;
  }

  .avaynil-contacts-pagination .current {
    background: #007bff;
    color: #fff;
    font-weight: bold;
  }

  /************************************new form */
  .avaynil-form-daryaft-container {
    max-width: 100%;
    border: 2px solid #ccc;
    border-radius: 15px;
    padding: 30px;
    background-color: #fdfdfd;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
  }

  .avaynil-form-daryaft-title {
    font-weight: bold;
    color: #2c3e50;
    text-align: center;
    margin-bottom: 30px;
  }

  .avaynil-form-daryaft-section {
    margin-bottom: 25px;
  }

  .avaynil-form-daryaft-section label {
    font-weight: bold;
    color: #34495e;
    margin-bottom: 8px;
    display: block;
  }

  .avaynil-form-daryaft-section textarea,
  .avaynil-form-daryaft-section input,
  .avaynil-form-daryaft-section select {
    border-radius: 8px;
  }

  .avaynil-form-daryaft-button {
    margin-top: 10px;
    font-weight: bold;
    border-radius: 10px;
  }

  .avaynil-form-daryaft-dropdown .dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 10px;
    border-radius: 8px;
    z-index: 10;
  }

  .avaynil-form-daryaft-dropdown:hover .dropdown-content {
    display: block;
  }

  #customAlert {
    margin-top: 15px;
    border-radius: 10px;
  }

 
  .btn-daryaft-search-button {
    background-color: #007bff;
    color: #fff !important;
    padding: 6px 12px;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
  }
  .btn-daryaft-search-button:hover {
    background-color: #0056b3;
  }

  .avaynil_Acquaintance_form {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 15px;
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
  }
  .avaynil_Acquaintance_form input[type="text"] {
    width: 80%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
  }
  .avaynil_Acquaintance_form input[type="submit"] {
    background-color: #28a745;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }
  .avaynil_Acquaintance_table {
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
    border-collapse: collapse;
  }
  .avaynil_Acquaintance_table th,
  .avaynil_Acquaintance_table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
  }

  /**********************************/
  
  .avaynil_ostan_table {
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
    border-collapse: collapse;
  }
  .avaynil_ostan_table th,
  .avaynil_ostan_table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
  }

  /**************************************/
  /**********************************/
  .avaynil_cities_form {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 15px;
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
  }
  .avaynil_cities_form input[type="text"] {
    width: 80%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
  }
  .avaynil_cities_form input[type="submit"] {
    background-color: #28a745;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }
  .avaynil_cities_table {
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
    border-collapse: collapse;
  }
  .avaynil_cities_table th,
  .avaynil_cities_table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
  }
  .avaynil_cities_delete {
    background-color: #dc3545;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }
  /**************************************/

  .avaynil_Transaction_stage_form {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 15px;
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
  }
  .avaynil_Transaction_stage_form input[type="text"] {
    width: 80%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
  }
  .avaynil_Transaction_stage_form input[type="submit"] {
    background-color: #28a745;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }
  .avaynil_Transaction_stage_table {
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
    border-collapse: collapse;
  }
  .avaynil_Transaction_stage_table th,
  .avaynil_Transaction_stage_table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
  }


  /****************************************************بانک استایل**/

  .avaynil_notification_form {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 15px;
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
  }
  .avaynil_notification_form input[type="text"] {
    width: 80%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
  }
  .avaynil_notification_form input[type="submit"] {
    background-color: #28a745;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }
  .avaynil_notification_table {
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
    border-collapse: collapse;
  }
  .avaynil_notification_table th,
  .avaynil_notification_table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
  }
  .avaynil_notification_delete {
    background-color: #dc3545;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }
  .avaynil_notification_submit {
    background-color: #f41c1c;
    border: 2px solid white; /* اضافه کردن بوردر سفید */
    margin: 1px;
    padding: 2px 5px;
    border-radius: 10px;
    color: rgb(255, 255, 255);
    width: auto;
    height: 40px;
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    transition: background-color 0.3s, border-color 0.3s;
  }

  .avaynil_notification_submit:hover {
    background-color: #f5b77a;
    border-color: white; /* حفظ رنگ سفید در حالت هاور */
  }
  /************************************************/
  .avaynil_daily_tasks_form {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 15px;
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
  }
  .avaynil_daily_tasks_form input[type="text"] {
    width: 80%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
  }
  .avaynil_daily_tasks_form input[type="submit"] {
    background-color: #28a745;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }

  .avaynil_daily_tasks_submit {
    background-color: #f41c1c;
    border: 2px solid white; /* اضافه کردن بوردر سفید */
    margin: 1px;
    padding: 2px 5px;
    border-radius: 10px;
    color: rgb(255, 255, 255);
    width: auto;
    height: 40px;
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    transition: background-color 0.3s, border-color 0.3s;
  }

  .avaynil_daily_tasks_submit:hover {
    background-color: #f5b77a;
    border-color: white; /* حفظ رنگ سفید در حالت هاور */
  }
  /****************************************************بانک استایل**/
  .avaynil_notification_sms_form {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 15px;
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
  }
  .avaynil_notification_sms_form input[type="text"] {
    width: 80%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
  }
  .avaynil_notification_sms_form input[type="submit"] {
    background-color: #28a745;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }

  .avaynil_notification_sms_delete {
    background-color: #dc3545;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }
  .avaynil_notification_sms_submit {
    background-color: #f41c1c;
    border: 2px solid white; /* اضافه کردن بوردر سفید */
    margin: 1px;
    padding: 2px 5px;
    border-radius: 10px;
    color: rgb(255, 255, 255);
    width: auto;
    height: 40px;
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    transition: background-color 0.3s, border-color 0.3s;
  }

  .avaynil_notification_sms_submit:hover {
    background-color: #f5b77a;
    border-color: white; /* حفظ رنگ سفید در حالت هاور */
  }
  /*****************************************************/

  .avaynil_bank_form {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 15px;
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
  }
  .avaynil_bank_form input[type="text"] {
    width: 80%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
  }
  .avaynil_bank_form input[type="submit"] {
    background-color: #28a745;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }
  .avaynil_bank_table {
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
    border-collapse: collapse;
  }
  .avaynil_bank_table th,
  .avaynil_bank_table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
  }

  .avaynil_bank_submit {
    background-color: #f41c1c;
    border: 2px solid white; /* اضافه کردن بوردر سفید */
    margin: 1px;
    padding: 2px 5px;
    border-radius: 10px;
    color: rgb(255, 255, 255);
    width: auto;
    height: 40px;
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    transition: background-color 0.3s, border-color 0.3s;
  }

  .avaynil_bank_submit:hover {
    background-color: #f5b77a;
    border-color: white; /* حفظ رنگ سفید در حالت هاور */
  }

  /***********************new form contacts ***************/
 

  /**************************edit form contacts hesabfa */
  .avaynil_edit_contacts_container {
    width: 100%;
    direction: rtl;
    padding: 5px;
    background-color: #f9f9f9;
  }

  .avaynil_edit_contacts_card {
    background: #fff;
    width: 100%;
    padding: 5px;
    margin: 10px;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  .avaynil_edit_contacts_image {
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #ddd;
    display: block;
    margin: 0 auto;
    width: 150px;
    height: 150px;
  }

  .avaynil_search_crm_contact_wrapper {
    position: relative;
    display: inline-block;
    overflow: visible;
  }

  .avaynil_search_crm_contact_image {
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #ddd;
    width: 80px;
    height: 80px;
    display: block;
    margin: 0 auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 1;
    position: relative;
    transform-origin: center center;
  }

  /* افکت هاور بدون تغییر اندازه واقعی */
  .avaynil_search_crm_contact_wrapper:hover .avaynil_search_crm_contact_image {
    transform: scale(2.5); /* فقط بزرگ‌نمایی تصویری */
    z-index: 9999;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  }

  @media (max-width: 768px) {
    .avaynil_search_crm_contact_image {
      width: 40px;
      height: 40px;
    }
    .avaynil_edit_contacts_image {
      width: 80px;
      height: 80px;
    }
    .avaynil_edit_contacts_col_50,
    .avaynil_edit_contacts_col_33 {
      width: 100%;
    }
  }

  .avaynil_edit_contacts_input,
  .avaynil_edit_contacts_textarea {
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 14px;
  }

  .avaynil_edit_contacts_button {
    background-color: #007bff;
    color: white;
    padding: 20px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin: 10px;

    font-size: 12px;
    transition: background-color 0.3s;
  }

  .avaynil_edit_contacts_input {
    width: 100%;
  }

  /************************بانک ست  ***********/
  

  #avaynil_bank_set_select {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 16px;
  }

  .avaynil_bank_set_dualbox {
    display: flex;
    justify-content: space-between;
    gap: 10px;
  }

  .avaynil_bank_set_dualbox select {
    width: 45%;
    height: 250px;
    border: 1px solid #aaa;
    border-radius: 8px;
    padding: 10px;
    font-size: 14px;
    background-color: #fff;
  }

  .avaynil_bank_set_dualbox_buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
  }



  .avaynil_bank_set_submit {
    display: block;
    margin-top: 20px;
    width: 100%;
    padding: 12px;
    font-size: 18px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
  }

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

  #avaynil_bank_set_table {
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
    border-collapse: collapse;
  }
  #avaynil_bank_set_table th,
  #avaynil_bank_set_table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
  }
  /***************************************/
  .avaynil_daily_tasks_set_container {
    max-width: 700px;
    margin: 30px auto;
    background-color: #fdfdfd;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 0 10px #ddd;
  }

  .avaynil_daily_tasks_set_container label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
    color: #333;
  }

  #avaynil_daily_tasks_set_select {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 16px;
  }

  .avaynil_daily_tasks_set_dualbox {
    display: flex;
    justify-content: space-between;
    gap: 10px;
  }

  .avaynil_daily_tasks_set_dualbox select {
    width: 45%;
    height: 250px;
    border: 1px solid #aaa;
    border-radius: 8px;
    padding: 10px;
    font-size: 14px;
    background-color: #fff;
  }

  .avaynil_daily_tasks_set_dualbox_buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
  }



  .avaynil_daily_tasks_set_submit {
    display: block;
    margin-top: 20px;
    width: 100%;
    padding: 12px;
    font-size: 18px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
  }

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

  #avaynil_daily_tasks_set_table {
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
    border-collapse: collapse;
  }
  #avaynil_daily_tasks_set_table th,
  #avaynil_daily_tasks_set_table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
  }
  /***************************************/

  .avaynil_question_container {
    max-width: 600px;
    margin: auto;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
  h2 {
    text-align: center;
    color: #333;
  }
  .avaynil_question_form-group {
    margin-bottom: 15px;
  }
  .avaynil_question_form label {
    display: block;
    margin-bottom: 5px;
    color: #555;
  }
  .avaynil_question_form input[type="text"],
  textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  #avaynil_question_submit {
    width: 100%;
    padding: 10px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  #avaynil_question_submit:hover {
    background-color: #218838;
  }
  #avaynil_question_container table {
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
  }
  #avaynil_question_container th,
  #avaynil_question_container td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
  }
  #avaynil_question_container th {
    background-color: #f2f2f2;
  }
  .avaynil_questions_edit,
  .avaynil_questions_delete {
    cursor: pointer;
    color: #007bff;
  }
  .avaynil_questions_delete {
    color: #dc3545;
  }

  /***********************************/
  #question-label-wrapper {
    max-width: 700px;
    margin: auto;
  }

  .styled-select {
    width: 100%;
    padding: 8px;
    margin: 8px 0;
  }

  .dual-listbox-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
  }

  .dual-listbox-container > div {
    flex: 1;
  }

  .button-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }

  .submit-button {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #2c7be5;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }
  @media screen and (max-width: 768px) {
    #close-modal-mobile-btn {
      display: block !important;
    }
  }

  /*************************/
  .avaynil_modal {
    display: none;
    position: fixed;
    z-index: 1000;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
  }

  .avaynil_modal_content {
    background-color: #fff;
    margin: auto;
    padding: 30px;
    border: 1px solid #888;
    width: 100%;
    border-radius: 10px;
    text-align: center;
  }

  .avaynil_close_modal {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
  }

  .avaynil_close_modal:hover {
    color: #000;
  }
  .avaynil__invoices_hsf__invoice-summary {
    padding: 5px;
    width: 50%;
    box-sizing: border-box;
    border: 1px solid #ccc;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 5px;
  }

  .avaynil__invoices_hsf__summary-label {
    font-size: 14px;
    font-weight: bold;
  }

  .avaynil__invoices_hsf__summary-value {
    text-decoration: underline;
    width: 20px;
    display: inline-block;
  }

  /* واکنش‌گرا: برای موبایل */
  @media (max-width: 768px) {
    .avaynil__invoices_hsf__invoice-summary {
      width: 100%;
      flex-direction: column;
      align-items: flex-start;
    }

    .avaynil__invoices_hsf__summary-label,
    .avaynil__invoices_hsf__summary-value {
      font-size: 12px;
      margin-bottom: 4px;
    }
  }
  .vaynil-hesabfa-invoices {
    padding: 5px;
    width: 50%;
    box-sizing: border-box;
    border: 1px solid #ccc;
    display: flex;
  }

  .avaynil-hesabfa-invoices-lb {
    font-size: 14px;
    font-weight: bold;
  }

  .avaynil-hesabfa-invoices-lb-un {
    text-decoration: underline;
    width: 20px;
  }

  #personel_task_list li {
    padding: 10px;
    margin-bottom: 5px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    cursor: move;
    align-items: center;
    justify-content: center;
  }
  /********************************** تعریف نقش کاربری*/
  #avaynil_new_user_role_contaner {
    max-width: 400px;
    background: #f9f9f9;
    padding: 30px 25px;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    margin: 20px auto;
  }

  #avaynil_new_user_role_contaner label {
    display: block;
    margin-bottom: 20px;
    font-weight: 600;
    color: #333;
    position: relative;
  }

  #avaynil_new_user_role_contaner label input[type="text"] {
    width: 100%;
    padding: 12px 15px;
    margin-top: 6px;
    border: 2px solid #ddd;
    border-radius: 10px;
    font-size: 16px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
  }

  #avaynil_new_user_role_contaner label input[type="text"]:focus {
    border-color: #5a9bf6;
    box-shadow: 0 0 8px rgba(90, 155, 246, 0.5);
    outline: none;
  }

  #avaynil_user_role_btn {
    width: 100%;
    padding: 14px 0;
    background: linear-gradient(145deg, #4a90e2, #357abd);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 12px rgba(53, 122, 189, 0.6);
    transition: all 0.3s ease;
    user-select: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }

  #avaynil_user_role_btn:hover {
    background: linear-gradient(145deg, #357abd, #4a90e2);
    box-shadow: 0 8px 20px rgba(53, 122, 189, 0.8);
    transform: translateY(-3px);
  }

  #avaynil_user_role_btn:active {
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.3);
    transform: translateY(1px);
  }
  #avaynil-form {
    background: #f8f9fa;
    padding: 20px;
    border: 2px solid #dee2e6;
    border-radius: 10px;
    max-width: 90%;
    margin: 20px auto;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    direction: rtl;
  }

  /* استایل فیلدها */
  #avaynil-form label {
    display: block;
    margin-top: 15px;
    font-weight: bold;
    color: #333;
  }

  #avaynil-form input[type="text"],
  #avaynil-form textarea,
  #avaynil-form select {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    font-size: 14px;
    box-sizing: border-box;
  }

  /* چک‌باکس‌ها */
  #avaynil-form input[type="checkbox"] {
    margin-left: 10px;
    vertical-align: middle;
  }

  /* دکمه ارسال */
  #Sales_expert_submit {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 6px;
    margin-top: 20px;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.3s ease;
  }

  #Sales_expert_submit:hover {
    background-color: #0056b3;
  }

  /* استایل جدول */
  #avaynil-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 30px;
    direction: rtl;
  }

  #avaynil-table th,
  #avaynil-table td {
    border: 1px solid #dee2e6;
    padding: 10px 15px;
    text-align: center;
  }

  #avaynil-table th {
    background-color: #343a40;
    color: white;
    font-weight: bold;
  }

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

  #avaynil-table tr:hover {
    background-color: #e9ecef;
  }

  /* دکمه‌های جدول */

  @media screen and (max-width: 768px) {
    #avaynil-form {
      padding: 15px;
    }

    #avaynil-table {
      font-size: 12px;
      overflow-x: auto;
    }

    #avaynil-form input,
    #avaynil-form textarea {
      font-size: 13px;
    }
  }
  .avaynil-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(to right, #00a88f, #00a77a);
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    padding: 10px 15px;
    color: white;
    max-width: 100%;
    direction: rtl;
    margin: 20px auto;
  }
  .avaynil-summary-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 20px;
    justify-content: center;
  }
  @media (max-width: 1024px) {
    .avaynil-card {
      flex: 1 1 calc(33.33% - 15px); /* سه‌تایی در تبلت */
    }
  }

  @media (max-width: 768px) {
    .avaynil-card {
      flex: 1 1 calc(50% - 15px); /* دوتایی در موبایل افقی */
    }
  }

  @media (max-width: 480px) {
    .avaynil-card {
      flex: 1 1 100%; /* تک‌ستونه در موبایل */
    }
  }
  .avaynil-card-icon {
    font-size: 20px;
    color: white;
  }

  .avaynil-card-content {
    display: flex;
    justify-content: center;
  }

  .avaynil-card-label {
    font-size: 18px;
    font-weight: bold;
    padding: 5px;
  }

  .avaynil-card-number {
    font-size: 20px;
    font-weight: bold;
    padding: 5px;
    margin-bottom: 5px;
    color: yellow;
  }

  /* استایل عمومی افزونه */
  .warehouse-manager-wrapper {
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }

  .warehouse-manager-wrapper h2 {
    font-size: 24px;
    color: #333;
    border-bottom: 2px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 20px;
  }

  .warehouse-manager-wrapper .form-table {
    width: 100%;
    margin-bottom: 20px;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #ddd;
    padding: 15px;
  }

  .warehouse-manager-wrapper .form-table th {
    text-align: left;
    font-weight: bold;
    color: #333;
  }

  .warehouse-manager-wrapper .form-table td input,
  .warehouse-manager-wrapper .form-table td select {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
  }

  .warehouse-manager-wrapper .button-primary {
    background-color: #0073aa;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
  }

  .warehouse-manager-wrapper .button-primary:hover {
    background-color: #005177;
  }

  /* جدول لیست انبارها */
  .warehouse-manager-wrapper table.widefat {
    width: 100%;
    margin-top: 30px;
    border-collapse: collapse;
  }

  .warehouse-manager-wrapper table.widefat th,
  .warehouse-manager-wrapper table.widefat td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
  }

  .warehouse-manager-wrapper table.widefat th {
    background-color: #f1f1f1;
    color: #333;
  }

  .warehouse-manager-wrapper table.widefat tr:nth-child(even) {
    background-color: #f9f9f9;
  }

  .warehouse-manager-wrapper table.widefat tr:hover {
    background-color: #f1f1f1;
  }

  .warehouse-manager-wrapper .updated {
    background-color: #e7f9e7;
    color: #4caf50;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 20px;
  }

  .warehouse-manager-wrapper .error {
    background-color: #f9e7e7;
    color: #f44336;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 20px;
  }
  /*****************************************/
  

  #drag_drop_zone.dragover {
    background-color: #e8f0fe;
    border-color: #007bff;
  }

  /*********************************نمایش فرو */
  .avaynil-contact-wrapper {
    direction: rtl;
    margin-top: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }

  .avaynil-contact-table {
    width: 100%;
    border-collapse: collapse;
  }

  .avaynil-contact-table th,
  .avaynil-contact-table td {
    padding: 10px 15px;
    text-align: right;
    border-bottom: 1px solid #eee;
  }

  .avaynil-contact-table th {
    background-color: #f5f5f5;
    font-weight: bold;
    width: 25%;
  }

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

  .avaynil-contact-table td {
    color: #333;
  }
  /**********************/
  .payment_status_contact_nslink.red {
    background-color: #dc3545;
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 5px;
    cursor: pointer;
  }
  .payment_status_contact_nslink.green {
    background-color: #28a745;
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 5px;
    cursor: pointer;
  }
  .payment_status_contact_nslink.red:hover,
  .payment_status_contact_nslink.green:hover {
    opacity: 0.85;
  }

  /****************************/
  .avaynil-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }

  /* پنهان کردن input اصلی */
  .avaynil-switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  /* شکل ظاهری کشویی */
  .avaynil-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 34px;
  }

  /* دایره داخل کشویی */
  .avaynil-slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
  }

  /* وقتی فعال است */
  .avaynil-switch input:checked + .avaynil-slider {
    background-color: #4caf50;
  }

  /* حرکت دایره به سمت راست */
  .avaynil-switch input:checked + .avaynil-slider:before {
    transform: translateX(26px);
  }
  /***************************/
  /* === جدول شیک و مدرن فقط برای جدول avaynil === */
  #avaynil-data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    overflow: hidden;
  }

  #avaynil-data-table thead th {
    background-color: #4a90e2;
    color: #fff;
    font-weight: 600;
    text-align: center;
    padding: 12px 10px;
    font-size: 14px;
  }

  #avaynil-data-table tbody tr {
    background: #fdfdfd;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    border-radius: 8px;
  }

  #avaynil-data-table tbody tr:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }

  #avaynil-data-table td {
    text-align: center;
    padding: 10px 8px;
    vertical-align: middle;
    font-size: 13px;
    color: #333;
  }

  /* ستون مخفی */
  #avaynil-data-table .hidden-column {
    display: none;
  }

  /* === دکمه‌ها فقط داخل avaynil table === */
  #avaynil-data-table .btn {
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
    transition: all 0.2s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }

  #avaynil-data-table .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  }

  #avaynil-data-table .confirm-button {
    background-color: transparent;
    /* color: #fff; */
    border: none;
  }
  #avaynil-data-table .edit-button {
    background-color: transparent;
    /* color: #fff; */
    border: none;
  }
  #avaynil-data-table .delet-button {
    background-color: transparent;
    /* color: #fff; */
    border: none;
  }

  #avaynil-data-table .btn i {
    font-size: 16px;
  }

  /* === DataTables فقط برای جدول avaynil === */
  #avaynil-data-table_wrapper .dataTables_filter input {
    border-radius: 8px;
    padding: 6px 10px;
    border: 1px solid #ccc;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
  }

  #avaynil-data-table_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px;
    padding: 6px 12px;
    margin: 2px;
    background: #4a90e2;
    color: #fff !important;
    border: none;
    transition: all 0.2s;
  }

  #avaynil-data-table_wrapper .dataTables_paginate .paginate_button:hover {
    background: #357abd;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }

  #avaynil-data-table_wrapper .dataTables_paginate .paginate_button.current {
    background: #357abd !important;
    font-weight: bold;
  }

  #avaynil-data-table_wrapper .dataTables_length select {
    border-radius: 8px;
    padding: 6px 10px;
    border: 1px solid #ccc;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
  }

  /* استایل ردیف hover */
  #avaynil-data-table tbody tr:hover {
    background-color: #eaf2ff;
  }
  .scrollable-div {
    overflow-y: auto; /* اسکرول عمودی فعال شود */
    overflow-x: hidden; /* جلوگیری از اسکرول افقی */
  }
  /*********************************************************
                  //////////////////////////////////////////////////////////////////////
                  /*****************************************************************/

  /* =================== Variables & Reset =================== */
  /* :root {
                      --primary-green: #00a88f;
                      --primary-dark: #0b6b58;
                      --muted-100: #f6faf8;
                      --muted-200: #eef6f2;
                      --card-bg: #ffffff;
                      --accent: #0066cc;
                      --radius: 14px;
                      --shadow-sm: 0 6px 18px rgba(11, 107, 88, 0.06);
                      --shadow-md: 0 12px 30px rgba(11, 107, 88, 0.08);
                      --max-width: 1400px;
                      --av-primary: #00a88f;
                      --av-dark: #004c99;
                      --av-light: #f3f8f7;
                  } */

  /* * {
                      box-sizing: border-box;
                      margin: 0;
                      padding: 0;
                  }

                  html,
                  body {
                      height: 100%;
                      background: linear-gradient(180deg, #f7fbfa, #f3f6f4);
                      color: #222;
                  } */

  /* =================== Container =================== */

  /* =================== Top Menu =================== */

  /* کانتینر اصلی منو */
  .avaynil_shiraz_info_topmenu {
    display: flex;
    flex-wrap: nowrap;
    font-size: 13px;

    /* همه در یک ردیف */
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 14px 20px;
    border-radius: 20px;
    background-color: rgb(247, 247, 247);

    overflow-x: auto;
    /* فعال‌سازی اسکرول افقی */
    scrollbar-width: thin;
    scrollbar-color: var(--av-primary) transparent;
  }

  /* ظاهر اسکرول برای مرورگرهای مدرن */
  .avaynil_shiraz_info_topmenu::-webkit-scrollbar {
    height: 8px;
  }

  .avaynil_shiraz_info_topmenu::-webkit-scrollbar-thumb {
    background: var(--av-primary);
    border-radius: 10px;
  }

  .avaynil_shiraz_info_topmenu::-webkit-scrollbar-track {
    background: transparent;
  }

  /* دکمه‌ها */
  .avaynil_shiraz_info_btn {
    flex: 0 0 auto;
    /* اندازه ثابت برای جلوگیری از کش آمدن */
    min-width: 140px;
    padding: 12px 18px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border: 1px solid gray;
    background-color: #ffffff;

    /* background: linear-gradient(145deg, var(--av-primary), var(--av-dark)); */
    color: #000000;
    font-weight: 700;
    font-size: 14px;
    align-items: center;
    letter-spacing: 0.3px;
    cursor: pointer;
    text-align: center;
    position: relative;
    overflow: hidden;
  }

  .avaynil_shiraz_info_btn:hover {
    background-color: rgb(228, 226, 226);
  }
  /* =================== Row 2 — main profile =================== */
  .avaynil_shiraz_info_row2 {
    display: grid;
    grid-template-columns: 35% 65%;
    /* stars | avatar | contacts | profile | tags */
    gap: 10px;
    align-items: center;
    padding: 8px;
    margin-top: 5px;
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
  }

  /* stars column */
  .avaynil_shiraz_info_stars {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    font-size: 26px;
    color: #ffb74d;
    writing-mode: vertical-rl;
    text-orientation: mixed;
  }

  .verticla_clss {
    writing-mode: vertical-rl;
    text-orientation: mixed;
  }

  .star {
    font-size: 22px;
    margin: 0 2px;
  }

  /* avatar column */
  .avaynil_shiraz_info_avatar {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .avaynil_shiraz_info_avatar img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  }

  /* contacts column */
  .avaynil_shiraz_info_contacts {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
  }

  :root {
    --av-green: #00a88f;
    --av-dark: #0b6b58;
    --av-light: #f3f9f7;
  }

  /* ==== استایل سه‌بعدی جدید برای آیتم‌ها ==== */
  .avaynil_shiraz_info_contact_item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 500;
    color: var(--av-dark);
    transition: all 0.3s ease;
    cursor: pointer;
  }

  /* ==== آیکون تماس ==== */
  .avaynil_shiraz_info_contact_item img {
    width: 45px;
    height: 45px;
    padding: 6px;
    transition: all 0.3s ease;
  }

  /* ==== واکنش‌گرا برای موبایل ==== */
  @media (max-width: 600px) {
    .avaynil_shiraz_info_contact_item {
      font-size: 14px;
      padding: 10px 12px;
    }

    .avaynil_shiraz_info_contact_item img {
      width: 22px;
      height: 22px;
    }
  }

  /* profile column */
  .avaynil_shiraz_info_profile {
    border: 1px solid rgb(228, 226, 226);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .avaynil_shiraz_info_name {
    font-size: 20px;
    font-weight: 800;
    color: var(--primary-dark);
  }

  .avaynil_shiraz_info_title {
    font-size: 15px;
    color: #333;
  }

  .avaynil_shiraz_info_location {
    font-size: 13px;
    color: #666;
  }

  .avaynil_shiraz_info_manager_note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 8px;
  }

  .avaynil_shiraz_info_note_box {
    flex: 1;
    padding: 10px;
    border-radius: 12px;
    border: 2px solid var(--primary-green);
    background: linear-gradient(180deg, rgba(0, 168, 143, 0.06), #fff);
    font-size: 13px;
  }

  .avaynil_shiraz_info_tags {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    overflow: visible; /* خیلی مهم: تا باکس داخلی بتونه اسکرول داشته باشه */
  }
  .label-scroll {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start; /* چینش بالا */
    gap: 6px;
    max-height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* ظاهر اسکرول */
  .label-scroll::-webkit-scrollbar {
    height: 6px;
  }
  .label-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
  }
  /* بخش برچسب‌ها */

  /* دکمه‌های برچسب */
  .personel-label-button {
    flex: 0 0 auto;
    padding: 5px 10px;
    font-size: 13px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
  }

  /* جلوگیری از اسکرول افقی کل صفحه */

  /* ✅ واکنش‌گرایی برای صفحه‌های کوچک */
  @media (max-width: 768px) {
    .avaynil_shiraz_info_tags {
      flex-direction: column; /* بچه‌ها زیر هم بیان */
      align-items: stretch;
    }

    .label-scroll {
      width: 100%;
      overflow-x: auto; /* فعال بماند */
      overflow-y: hidden;
      display: flex;
      justify-content: flex-start;
    }

    .personel-label-button {
      font-size: 12px;
      padding: 5px 8px;
    }
  }

  /* دکمه‌ها (لیبل‌ها) */
  .personel-label-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    font-size: 14px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    letter-spacing: 0.4px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    color: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  }

  /* افکت درخشش */

  /* رنگ‌ها */
  .personel-label-button[style*="background-color: red"] {
    background: linear-gradient(145deg, #d32f2f, #f44336) !important;
  }

  .personel-label-button[style*="background-color: green"] {
    background: linear-gradient(145deg, #388e3c, #4caf50) !important;
  }

  .personel-label-button[style*="background-color: orange"] {
    background: linear-gradient(145deg, #ff9800, #f57c00) !important;
  }

  .personel-label-button[style*="background-color: yellow"] {
    background: linear-gradient(145deg, #fff59d, #fbc02d) !important;
    color: #333 !important;
  }

  .personel-label-button[style*="background-color: white"] {
    background: linear-gradient(145deg, #fafafa, #e0e0e0) !important;
    border: 1px solid #aaa !important;
    color: #333 !important;
  }

  .label_list_all_cls {
    width: 100% !important;
  }

  .select2 {
    width: 100% !important;
  }

  .label-button_info {
    height: 50px;
    /* ارتفاع بزرگ‌تر */
    width: 50px;
    /* عرض ثابت برای شکل مربعی */
    font-size: 24px;
    /* سایز ایموجی بزرگ‌تر */
    border: none;
    /* بدون حاشیه */
    background: transparent;
    /* بدون پس‌زمینه */
    cursor: pointer;
    /* نشانگر کلیک */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: rgb(152, 0, 182);
  }

  /* =================== Row 3 — history buttons =================== */
  .avaynil_shiraz_info_history {
    display: flex;
    gap: 10px;
    padding: 5px;
    margin-top: 2px;
    justify-content: flex-start;
  }

  .avaynil_shiraz_info_history .history-btn {
    padding: 4px 5px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    cursor: pointer;
    font-weight: 700;
  }

  /* =================== Row 5 — expert line =================== */

  /* =================== Row 4 — meta/status =================== */
  .avaynil_shiraz_info_meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 4px 8px;
    margin-top: 4px;
    border-radius: 18px;

    position: relative;
    transition: all 0.3s ease;
  }

  /* افکت نور نرم در پس‌زمینه کارت */

  .avaynil_shiraz_info_meta span {
    background: #ffffffb3;
    /* backdrop-filter: blur(6px); */
    padding: 2px 4px;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #0b6b58;
    box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.05),
      1px 1px 3px rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    z-index: 1;
    transition: all 0.2s ease;
  }

  /* متن داخل span */
  .avaynil_shiraz_info_meta span strong {
    font-weight: 800;
    color: #00785e;
  }

  /* دکمه ویرایش در کنار کارت */
  .avaynil_daily_task_remainder_save-btn-personel {
    /* background: linear-gradient(145deg, #00a88f, #0b6b58); */
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 10px 16px;
    margin-right: 10px;
    font-size: 22px;
    cursor: pointer;
  }

  .avaynil_shiraz_info_comments {
    margin-top: 0px;
    padding: 8px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.04);
  }

  .avaynil_shiraz_info_comments h3 {
    margin-bottom: 10px;
    color: var(--primary-dark);
  }

  .avaynil_shiraz_info_comment {
    display: flex;
    gap: 5px;
    padding: 5px;
    border-radius: 10px;
    background: linear-gradient(180deg, #fff, #fbfbfb);
    align-items: flex-start;
    margin-bottom: 10px;
    box-shadow: var(--shadow-sm);
  }

  .avaynil_shiraz_info_comment img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
  }

  .avaynil_shiraz_info_comment .meta {
    display: flex;
    flex-direction: column;
  }

  .avaynil_shiraz_info_comment .meta .name {
    font-weight: 800;
  }

  .avaynil_shiraz_info_comment .meta .text {
    color: #444;
    margin-top: 6px;
  }

  .avaynil_shiraz_info_expert {
    margin-top: 8px;
    padding: 10px 10px;
    border-radius: 18px;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
  }

  /* نام کارشناس فروش */
  .div-Sales_expert_fullname {
    font-size: 32px;
    font-weight: 900;
    font-weight: bold;
    color: #094736;
    text-align: center;
    letter-spacing: 1px;
    /* text-shadow: 1px 1px 0 #fff, 2px 2px 5px rgba(0, 0, 0, 0.15); */
    flex: 1;
    position: relative;
    z-index: 1;
    padding: 8px 0;
  }

  /* دکمه ویرایش */
  .avaynil_shiraz_info_expert .edit-btn {
    padding: 10px 18px;
    background: linear-gradient(145deg, var(--primary-green, #00a88f), #089e83);
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.25),
      -2px -2px 8px rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
    z-index: 1;
  }

  .avaynil_shiraz_info_expert .edit-btn:hover {
    background: linear-gradient(145deg, #00c4a2, #008c73);
    transform: translateY(-2px);
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3),
      -3px -3px 10px rgba(255, 255, 255, 0.6);
  }

  .avaynil_shiraz_info_expert .edit-btn:active {
    transform: scale(0.97);
  }

  /* =================== Responsive =================== */
  @media (max-width: 1100px) {
    .avaynil_shiraz_info_meta span {
      font-size: 12px;
      color: #333;
    }

    .avaynil_shiraz_info_contact_item,
    .avaynil_shiraz_info_name,
    .avaynil_shiraz_info_location,
    .avaynil_shiraz_info_title {
      display: flex;
      /* فعال‌سازی فلکس‌باکس */
      flex-direction: column;
      /* چینش آیتم‌ها زیر هم */
      align-items: center;
      /* تراز افقی وسط */
      justify-content: center;
      /* تراز عمودی وسط */
      text-align: center;
      /* متن‌ها هم وسط‌چین */
    }

    .avaynil_shiraz_info_contact_item {
      text-align: center;
    }

    .avaynil_shiraz_info_stars {
      font-size: 9px;
    }

    .div-Sales_expert_fullname {
      font-size: 16px;
    }

    .avaynil_shiraz_info_btn {
      /* flex: 0 1 40px; */
      writing-mode: vertical-rl;
      text-orientation: mixed;
      min-width: 40px !important;
      height: 120px;
      font-weight: 100;
      text-align: center;
      align-items: center;
      vertical-align: middle;
    }

    /* .avaynil_shiraz_info_row2 {
                              grid-template-columns: 70px 140px 200px 1fr 140px;
                              gap: 12px;
                          } */

    .avaynil_shiraz_info_avatar img {
      width: 120px;
      height: 120px;
    }
  }

  @media (max-width: 900px) {
    .avaynil_shiraz_info_meta span {
      font-size: 10px;
      color: #333;
    }

    .avaynil_shiraz_info_contact_item,
    .avaynil_shiraz_info_name,
    .avaynil_shiraz_info_location,
    .avaynil_shiraz_info_title {
      display: flex;
      /* فعال‌سازی فلکس‌باکس */
      flex-direction: column;
      /* چینش آیتم‌ها زیر هم */
      align-items: center;
      /* تراز افقی وسط */
      justify-content: center;
      /* تراز عمودی وسط */
      text-align: center;
      /* متن‌ها هم وسط‌چین */
    }

    .avaynil_shiraz_info_contact_item {
      text-align: center;
    }

    .avaynil_shiraz_info_stars {
      font-size: 9px;
    }

    .div-Sales_expert_fullname {
      font-size: 14px;
    }

    .avaynil_shiraz_info_btn {
      /* flex: 0 1 40px; */
      writing-mode: vertical-rl;
      text-orientation: mixed;
      min-width: 40px !important;
      height: 120px;
      font-weight: 100;
      text-align: center;
      align-items: center;
      vertical-align: middle;
    }

    .avaynil_shiraz_info_row2 {
      grid-template-columns: 1fr 1fr;
      grid-template-areas:
        "stars avatar"
        "contacts profile"
        "tags profile";
    }

    .avaynil_shiraz_info_stars {
      grid-area: stars;
    }

    .avaynil_shiraz_info_avatar {
      grid-area: avatar;
    }

    .avaynil_shiraz_info_contacts {
      grid-area: contacts;
    }

    /* .avaynil_shiraz_info_profile {
                              grid-area: profile;
                          } */

    .avaynil_shiraz_info_profile {
      /* background: linear-gradient(145deg, #f8fff9, #e3f5ea);
                              box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.12),
                                  -8px -8px 18px rgba(255, 255, 255, 0.9);
                              border-radius: 20px; */

      width: 100%;
      height: 100%;
      padding: 10px;
      margin-top: 5px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      /* transition: all 0.3s ease; */
      /* position: relative;
                              overflow: hidden;
                          */
    }

    /* افکت نور ملایم بالای کارت */
  }

  /* بخش کد و نام */
  .contact-code-name {
    font-weight: 800;
    font-size: 18px;
    color: #0b6b58;
    /* background: linear-gradient(90deg, #e8fff3, #ffffff); */
    padding: 8px 14px;

    display: inline-block;
    letter-spacing: 0.3px;
  }

  /* عنوان مشتری (شرکت یا فروشگاه) */
  .contact-title {
    font-size: 17px;
    font-weight: 700;
    color: #007c5a;
    /* background: linear-gradient(90deg, #f2fff7, #e6f5ee); */
    border-radius: 8px;
    padding: 6px 12px;
    display: inline-block;
    margin-top: 6px;
    /* box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1),
                                  -1px -1px 5px rgba(255, 255, 255, 0.7); */
  }

  /* موقعیت جغرافیایی */
  .contact-location {
    font-size: 15px;
    font-weight: 600;
    color: #444;
    background: #ffffffc4;
    padding: 5px 10px;
    border-radius: 6px;
    display: inline-block;
    /* box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.06),
                                  1px 1px 3px rgba(255, 255, 255, 0.6); */
  }

  /* اعتبار مالی */
  .avaynil_shiraz_info_name div {
    font-size: 15px;
    color: #222;
    font-weight: 500;
  }

  /* مبلغ بدهی یا بستانکاری */
  .avaynil_shiraz_info_name .amount-status {
    font-size: 16px;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 10px;
    background: #fff;
    display: inline-block;
    /* box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.05),
                                  1px 1px 5px rgba(0, 0, 0, 0.08),
                                  -1px -1px 5px rgba(255, 255, 255, 0.7); */
  }

  /* رنگ مبلغ بدهی و بستانکاری */
  .amount-status.red {
    color: #d93025;
  }

  .amount-status.green {
    color: #00a88f;
  }

  /* بخش نظر مدیر */
  .avaynil_shiraz_info_manager_note {
    /* background: linear-gradient(145deg, #fdfefc, #edf8ee); */
    border-radius: 14px;
    padding: 12px 16px;
    margin-top: 10px;
    width: 100%;
    /* box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.1),
                                  -4px -4px 12px rgba(255, 255, 255, 0.8); */
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
  }

  /* ورودی نظر مدیر */
  /* .avaynil_edit_contacts_label {
    border: 1px solid #c6e5d3;
    border-radius: 10px;
    padding: 8px 12px;
    /* box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.05),
                                  inset -2px -2px 5px rgba(255, 255, 255, 0.8); */
    /* width: 100%;
    background: #fff;
    transition: all 0.2s ease;
  } */

  /* .avaynil_edit_contacts_label:focus {
    outline: none;
    border-color: #00a88f; */
    /* box-shadow: 0 0 0 3px rgba(0, 168, 143, 0.2); */
  /* } */ 
  @media (max-width: 600px) {
    .avaynil_shiraz_info_meta span {
      font-size: 10px;
      color: #333;
    }

    .avaynil_shiraz_info_contact_item,
    .avaynil_shiraz_info_name,
    .avaynil_shiraz_info_location,
    .avaynil_shiraz_info_title {
      display: flex;
      /* فعال‌سازی فلکس‌باکس */
      flex-direction: column;
      /* چینش آیتم‌ها زیر هم */
      align-items: center;
      /* تراز افقی وسط */
      justify-content: center;
      /* تراز عمودی وسط */
      text-align: center;
      /* متن‌ها هم وسط‌چین */
    }

    .avaynil_shiraz_info_tags {
      display: block;
      gap: 0;
      /* فاصله بین آیتم‌ها حذف شود چون block است */
      align-items: unset;
    }

    .avaynil_shiraz_info_stars {
      writing-mode: horizontal-tb;
      /* حالت نوشتار افقی عادی */
      text-orientation: initial;
      /* بازگرداندن حالت متن */
      flex-direction: row;
      /* در صورت نیاز برای چینش افقی ستاره‌ها */
      font-size: 9px;
    }

    .div-Sales_expert_fullname {
      font-size: 14px;
    }

    .avaynil_shiraz_info_btn {
      /* flex: 0 1 40px; */
      writing-mode: vertical-rl;
      text-orientation: mixed;
      min-width: 40px !important;
      height: 120px;
      font-weight: 100;
      text-align: center;
      align-items: center;
      vertical-align: middle;
    }

    .avaynil_shiraz_info_container {
      padding: 10px;
    }

    .avaynil_shiraz_info_topmenu {
      flex-wrap: wrap;
      gap: 8px;
    }

    /* .avaynil_shiraz_info_btn {
                              flex: 0 1 48%;
                              min-width: 120px;
                          } */

    .avaynil_shiraz_info_row2 {
      grid-template-columns: 1fr;
      grid-template-areas:
        "stars"
        "avatar"
        "contacts"
        "profile"
        "tags";
      gap: 10px;
    }

    .avaynil_shiraz_info_avatar img {
      width: 110px;
      height: 110px;
    }

    .avaynil_shiraz_info_contact_item {
      font-size: 13px;
    }

    .avaynil_shiraz_info_name {
      font-size: 18px;
    }

    .avaynil_shiraz_info_history {
      flex-direction: column;
      gap: 8px;
    }

    .avaynil_shiraz_info_history .history-btn {
      width: 100%;
    }
  }
  .reply-button {
    background-color: #00a88f;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 6px 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: 0.2s;
    font-size: 12px;
  }

  .reply-button:hover {
    background-color: #f9f9f9;
    border-color: #00a88f;
    color: #00a88f;
    box-shadow: 0 0 4px rgba(0, 168, 143, 0.2);
  }

  .reply-button svg {
    width: 18px;
    height: 18px;
    transform: rotate(180deg);
    /* چون متن فارسی است */
    fill: currentColor;
  }

  .avaynil-comments-section {
    background: #fff;
    border-radius: 12px;
    padding: 15px;
    max-height: 600px;
    overflow-y: auto;
    direction: rtl;
  }
  .comment-card {
    position: relative;
  }
  /* دکمه ضربدر */
  .comment-close-btn {
    position: absolute;
    top: -12px;
    left: -12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center; /* دقیقاً مرکز چین */
    cursor: pointer;
    color: #555;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    transition: 0.2s;
    padding: 0; /* جلوگیری از جابه‌جایی */
  }

  .comment-close-btn:hover {
    background: #ff4e4e;
    color: white;
    transform: scale(1.1);
  }
  /* .comment-card {
                          border-right: 1px solid gray;
                          border-radius: 10px;
                          background: #fdfdfd;
                          padding: 10px 15px;
                          margin: 10px 0;
                          transition: all 0.3s;
                      } */
  /* ======================
                  استایل مخصوص زیرشاخه‌ها (child)
                  ====================== */

  .comment-children {
    border-left: 2px solid #e0e0e0;
    margin-top: 10px;
    padding-left: 15px;
    transition: all 0.3s ease;
  }

  .child-container {
    margin-top: 8px;
    margin-right: 20px;
    padding-right: 10px;
    border-right: 2px dashed #d9d9d9;
    display: none;
    animation: fadeIn 0.3s ease-in-out;
  }

  .comment-card .comment-children .comment-card {
    background: #fafafa;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }

  .comment-card .comment-children .comment-card:hover {
    background: #f0fdf9;
  }

  /* انیمیشن ظاهر شدن */
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-3px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .comment-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px;
    margin-top: 6px;
    background: #fff;
    position: relative;
  }

  .comment-actions {
    display: flex;
    justify-content: flex-start;
    gap: 6px;
    margin-top: 5px;
  }

  .toggle-children-btn {
    background: transparent;
    border: none;
    font-size: 24px !important;
    cursor: pointer;
    line-height: 1;
    transition: transform 0.2s ease;
  }

  .toggle-children-btn.active {
    transform: rotate(45deg);
    /* تغییر از + به × */
  }

  .comment-card:hover {
    background-color: #f8fff8;
    border-color: #00a88f;
  }

  .comment-header {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #00a88f;
  }

  .comment-meta {
    display: flex;
    flex-direction: column;
  }

  .comment-author {
    font-weight: 600;
    color: #0b6b58;
  }

  .comment-date {
    font-size: 12px;
    color: #777;
  }

  .comment-body {
    margin-top: 6px;
    padding-right: 10px;
    color: #333;
  }

  .comment-text {
    margin: 5px 0 0 0;
    line-height: 1.6;
    padding-right: 35px;
  }

  .attachment-icon {
    width: 18px;
    height: 18px;
    margin-right: 6px;
    vertical-align: middle;
  }

  /* body {
                      overflow: visible !important;
                  } */

  /* Avaynil modal styles (scoped by id/class) */

  .av-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(3, 12, 8, 0.45);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }

  /* محدود کردن ارتفاع پاپ‌آپ */
  #avaynil_shiraz_info_modal_root {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
  }

  /* استایل مودال */
  #avaynil_shiraz_info_modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 90%;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    transition: all 0.3s ease-in-out;
  }

  /* وقتی مودال نمایش داده می‌شود */
  #avaynil_shiraz_info_modal.show {
    transform: scale(1);
    opacity: 1;
  }

  /* هدر مودال */
  .av-modal-header {
    padding: 16px 20px;
    background: linear-gradient(
      90deg,
      rgba(0, 168, 143, 0.08),
      rgba(0, 120, 92, 0.03)
    );
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  /* بدنه مودال */
  .av-modal-body {
    padding: 18px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  /* فوتر مودال */
  .av-modal-footer {
    padding: 12px 20px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: rgba(0, 0, 0, 0.02);
    border-top: 1px solid rgba(0, 0, 0, 0.04);
  }

  /* واکنش‌گرا برای موبایل */
  @media (max-width: 768px) {
    #avaynil_shiraz_info_modal {
      width: 95%;
      max-height: 90vh;
    }

    .av-modal-body {
      grid-template-columns: 1fr;
    }
  }

  .av-modal-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
    color: var(--av-dark);
    font-size: 18px;
  }

  .av-modal-title .av-logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--av-accent), #00806f);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    box-shadow: 0 6px 18px rgba(0, 168, 143, 0.12);
  }

  .av-modal-close {
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #444;
    padding: 6px;
    border-radius: 8px;
  }

  .av-modal-close:hover {
    background: rgba(0, 0, 0, 0.04);
  }

  .av-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .av-field label {
    font-size: 13px;
    color: #333;
    font-weight: 700;
    direction: rtl;
    text-align: right;
  }

  .av-input,
  .av-select,
  .av-textarea {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    font-size: 14px;
    box-sizing: border-box;
  }

  .av-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }

  .av-field-inline {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .av-modal-footer {
    padding: 12px 18px;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: linear-gradient(180deg, #fbfffb, #f8fff8);
  }

  .av-btn {
    background-color:transparent;
    padding: 10px 14px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
  }

  .av-btn.ghost {
    background: transparent;
    color: #444;
  }

  .av-btn.primary {
    background: var(--av-accent);
    color: #fff;
    box-shadow: 0 8px 28px rgba(0, 168, 143, 0.14);
  }

  /* small responsive */
  @media (max-width: 820px) {
    .av-modal-body {
      grid-template-columns: 1fr;
      padding: 14px;
    }

    .av-modal {
      width: 96%;
    }
  }

  /* form hint */
  .av-hint {
    font-size: 12px;
    color: #666;
  }

  .avaynil_status_bar.active {
    background: linear-gradient(145deg, #d8f9e8, #f6fff9);
    border-radius: 18px;
    box-shadow: 0 5px 15px rgba(0, 128, 0, 0.15);
    transition: all 0.4s ease-in-out;
  }

  .avaynil_status_bar.inactive {
    background: linear-gradient(145deg, #ffe5e5, #fff5f5);
    border-radius: 18px;
    box-shadow: 0 5px 15px rgba(255, 0, 0, 0.15);
    transition: all 0.4s ease-in-out;
  }

  /* ===== کادر اصلی اطلاعات ===== */
  .avaynil_shiraz_info_container {
    width: 95%;
    margin: 5px auto;
    background: linear-gradient(180deg, #ffffff, #f7fbf9);
    border-radius: 18px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08),
      inset 0 0 10px rgba(255, 255, 255, 0.3);
    overflow: hidden;
    padding: 10px;
    transform: translateY(0);
    transition: all 0.3s ease-in-out;
  }

  /* .avaynil_shiraz_info_container:hover {
                          transform: translateY(-3px);
                          box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12),
                              inset 0 0 12px rgba(255, 255, 255, 0.4);
                      } */

  /* ===== کادر رنگی زیرین (بر اساس وضعیت Active) ===== */
  .avaynil_shiraz_info_container.active-bg {
    background: rgba(76, 175, 80, 0.15) !important;
  }

  .avaynil_shiraz_info_container.inactive-bg {
    background: rgba(243, 35, 17, 0.15) !important;
  }

  @keyframes avaynil_status_glow {
    from {
      left: -50%;
    }

    to {
      left: 100%;
    }
  }

  .av-tooltip-card {
    /* background-color: var(--bg-color); */
    /* color: #fff; */
    /* border-radius: 12px; */
    /* padding: 12px 16px; */
    /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); */
    /* width: 220px; */
    direction: rtl;
    /* transition: all 0.3s ease-in-out; */
  }

  .av-tooltip-header {
    text-align: center;
    font-weight: 600;
    font-size: 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    margin-bottom: 8px;
    padding-bottom: 4px;
  }

  .av-tooltip-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .av-tooltip-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
  }

  .av-tooltip-row .label {
    font-weight: 500;
    opacity: 0.9;
  }

  .av-tooltip-row .value {
    font-weight: 600;
    text-align: left;
  }

  /* دکمه اصلی */
  /* .history-btn {
                          border: none;
                          color: #fff;
                          font-weight: 600;
                          border-radius: 8px;
                          padding: 6px 8px;
                          margin: 2px;
                          cursor: pointer;
                          transition: 0.3s;
                      }

                      .history-btn:hover {
                          filter: brightness(1.1);
                      } */

  /* نمایش تولتیپ زیبا */
  /* ===== باکس کلی تولتیپ ===== */
  .tooltip-box-get-task {
    position: relative;
    display: inline-block;
    margin: 6px;
  }

  /* ===== محتوای تولتیپ ===== */
 

  .history-btn {
    border: none;
    padding: 8px 14px;
    border-radius: 10px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2),
      -2px -2px 6px rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease;
  }

  .history-btn:hover {
    transform: translateY(-2px);
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25),
      -3px -3px 8px rgba(255, 255, 255, 0.8);
  }

  /* ===== تولتیپ (بدنه) ===== */

  /* ===== محتوای کارت داخل تولتیپ ===== */
  .av-tooltip-card {
    background: var(--bg-color, #e8f9f3);
    border-radius: 12px;
    padding: 10px;
    /* box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.08),
                              inset -2px -2px 6px rgba(255, 255, 255, 0.8); */
  }

  .av-tooltip-header {
    text-align: center;
    font-weight: 700;
    color: #0b6b58;
    font-size: 15px;
    margin-bottom: 8px;
  }

  .av-tooltip-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .av-tooltip-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1),
      -1px -1px 3px rgba(255, 255, 255, 0.6);
  }

  .av-tooltip-row .label {
    color: #0b6b58;
    font-weight: 600;
  }

  .av-tooltip-row .value {
    color: #333;
    font-weight: 500;
  }

  /* ================== آواتار سه‌بعدی و مدرن ================== */
  .avaynil-avatar-3d {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid rgba(0, 168, 143, 0.8);
    background: linear-gradient(145deg, #ffffff, #e6f5f1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25), 0 0 25px rgba(0, 168, 143, 0.3);
    padding: 6px;
    display: block;
    margin: 0 auto;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    user-select: none;
    pointer-events: auto;
    background-color: #fff;
  }

  /* افکت هاور سه‌بعدی */

  /* ریسپانسیو */
  @media (max-width: 768px) {
    .avaynil-avatar-3d {
      width: 110px;
      height: 110px;
      padding: 4px;
      /* box-shadow:
                                  0 6px 15px rgba(0, 0, 0, 0.25),
                                  0 0 20px rgba(0, 168, 143, 0.25);*/
    }
  }

  /* ================== طراحی ستاره سه‌بعدی ================== */
  .avaynil-star-3d {
    width: 35px;
    height: 35px;
    margin: 3px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
    display: inline-block;
    object-fit: contain;
    user-select: none;
  }

  /* حالت هاور — درخشان و برجسته‌تر */
  #avaynil_shiraz_info_contacts .avaynil-star-3d:hover {
    transform: scale(1.15) rotateZ(8deg);
  }

  /* افکت کلیک (موقع انتخاب) */
  .avaynil-star-3d:active {
    transform: scale(0.95);
  }

  /* درخشش انیمیشنی برای ستاره‌های پر (filled) */
  .avaynil-star-3d[data-ok="1"] {
    animation: avaynil-star-glow 2.5s ease-in-out infinite alternate;
  }

  @keyframes avaynil-star-glow {
    from {
      filter: drop-shadow(0 0 5px rgba(255, 230, 80, 0.3));
    }

    to {
      filter: drop-shadow(0 0 15px rgba(255, 230, 100, 0.8));
    }
  }

  /* ریسپانسیو برای موبایل */
  @media (max-width: 768px) {
    .avaynil-star-3d {
      width: 28px;
      height: 28px;
      margin: 2px;
    }
  }

  .avaynil-contact-form-command {
    position: relative;
    /* background: linear-gradient(145deg, #ffffff, #f5f8f7); */
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 16px;
    /* box-shadow:
                              0 6px 16px rgba(0, 0, 0, 0.12),
                              inset 0 2px 4px rgba(255, 255, 255, 0.8); */
    border: 1px solid rgba(0, 168, 143, 0.15);
    color: #333;
    line-height: 1.8;
    transition: all 0.3s ease;
  }

  /* عنوان یا نام کاربر */
  .avaynil-comment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 15px;
    color: #0b6b58;
  }

  /* زمان ارسال نظر */
  .avaynil-comment-date {
    font-size: 12px;
    color: #888;
  }

  /* محتوای نظر */
  .avaynil-comment-text {
    font-size: 14px;
    color: #444;
    text-align: justify;
    padding-top: 4px;
    white-space: pre-line;
  }

  /* حالت ریسپانسیو برای موبایل */
  @media (max-width: 768px) {
    .avaynil-contact-form-command {
      padding: 14px 16px;
      border-radius: 12px;
    }

    .avaynil-contact-form-command::before {
      left: 24px;
      width: 18px;
      height: 18px;
    }
  }

  .avaynil-comments-section-category {
    /* background: linear-gradient(145deg, #f7f9fa, #e3e7ea); */
    border-radius: 16px;

    padding: 18px 22px;
    margin-bottom: 15px;
    border: 1px solid rgba(230, 235, 238, 0.9);
    transition: all 0.3s ease;
  }

  .avaynil-comments-section-attachment {
    /* background: linear-gradient(145deg, #f9fbfc, #e8eef0); */
    border-radius: 18px;
    padding: 20px;
    margin-bottom: 14px;
    border: 1px solid rgba(0, 0, 0, 0.06);

    transition: all 0.3s ease;
  }

  .avaynil-comments-section-attachment .info-item {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    align-items: center;
  }

  .avaynil-comments-section-attachment a.delete_btn_shop_clas {
    background: linear-gradient(145deg, #00a88f, #00856f);
    color: #fff;
    padding: 6px 14px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(0, 168, 143, 0.25);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.25s ease;
  }

  .btn-add-shop {
    background: linear-gradient(145deg, #004c99, #003b80);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 8px 20px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(0, 76, 153, 0.2);
    transition: all 0.3s ease;
  }

  .btn-add-shop:hover {
    transform: translateY(-2px);
    background: linear-gradient(145deg, #0059b3, #004080);
    box-shadow: 0 10px 24px rgba(0, 76, 153, 0.25);
  }

  .avaynil-contactcredit-label {
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    color: #004c99;

    border-radius: 12px;

    margin-bottom: 10px;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
    position: relative;
    /* text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6); */
  }

  /* ===============================
                  🎯 حالت ریسپانسیو موبایل و تبلت
                  =============================== */
  @media (max-width: 768px) {
    .avaynil-comments-section-attachment a.delete_btn_shop_clas {
      font-size: 12px;
      padding: 6px 12px;
      border-radius: 8px;
      gap: 4px;
    }

    .btn-add-shop {
      font-size: 10px;
      padding: 7px 16px;
      border-radius: 10px;
    }

    .avaynil-comments-section-attachment {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
    }
    .avaynil-contactcredit-label_attachment {
      writing-mode: sideways-lr;
      text-orientation: mixed;
    }
  }

  /* 📲 حالت موبایل */
  @media (max-width: 480px) {
    .avaynil-comments-section-attachment a.delete_btn_shop_clas,
    .btn-add-shop {
      display: block;
      width: 100%;
      text-align: center;
      font-size: 10px;
      padding: 10px;
      border-radius: 10px;
      margin-bottom: 8px;
    }

    .avaynil-comments-section-attachment {
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
    }

    .avaynil-comments-section-attachment a.delete_btn_shop_clas::before {
      font-size: 14px;
    }
    .avaynil-contactcredit-label_attachment {
      writing-mode: sideways-lr;
      text-orientation: mixed;
    }
  }

  @media (max-width: 992px) {
    .avaynil-contactcredit-label {
      font-size: 14px;
      padding: 8px 12px;
      /* border-radius: 10px;
                              border-left: 4px solid #00a88f;
                              box-shadow:
                                  0 3px 8px rgba(0, 0, 0, 0.06); */
    }

    .avaynil-contactcredit-label::before {
      font-size: 14px;
      margin-left: 6px;
    }
  }

  @media (max-width: 576px) {
    .avaynil-contactcredit-label {
      display: block;
      width: 100%;
      text-align: center;
      font-size: 13px;
      padding: 8px 10px;
      /* border-left: none;
                              border-top: 4px solid #00a88f; */
      /* border-radius: 10px; */
      /* box-shadow:
                                  0 2px 6px rgba(0, 0, 0, 0.05); */
    }

    .avaynil-contactcredit-label::before {
      display: none;
    }
    .avaynil-contactcredit-label_attachment {
      writing-mode: sideways-lr;
      text-orientation: mixed;
    }
  }

  /* === استایل لیبل‌های اطلاعات تماس === */
  .avaynil-contact-crm-label {
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    color: #0b6b58;
    /* background: linear-gradient(145deg, #ffffff, #f3f9f7);
                          border: 1px solid rgba(0, 168, 143, 0.2);
                          border-radius: 10px; */
    padding: 8px 14px;
    margin-left: 6px;
    /* box-shadow:
                              inset 2px 2px 4px rgba(255, 255, 255, 0.8),
                              inset -2px -2px 5px rgba(0, 0, 0, 0.05),
                              0 4px 10px rgba(0, 0, 0, 0.08); */
    transition: all 0.3s ease;
    letter-spacing: 0.2px;
    cursor: default;
    user-select: text;
  }

  /* استایل برای آیکون‌ها */
  .avaynil-contact-crm-icon {
    width: 45px;
    height: 45px;

    padding: 4px;
    /* transition: transform 0.3s ease, box-shadow 0.3s ease; */
  }

  /* چیدمان کلی بخش تماس‌ها */
  .avaynil_shiraz_info_contacts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
  }

  /* هر آیتم تماس */
  .avaynil_shiraz_info_contact_item {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 8px 14px;
  }

  /* ===============================
                  📱 ریسپانسیو برای موبایل و تبلت
                  =============================== */
  @media (max-width: 768px) {
    .avaynil_shiraz_info_contacts {
      flex-direction: column;
      align-items: stretch;
    }

    .avaynil_shiraz_info_contact_item {
      justify-content: center;
      width: 100%;
      padding: 10px;
    }

    .avaynil-contact-crm-label {
      font-size: 13px;
      padding: 6px 10px;
    }

    .avaynil-contact-crm-icon {
      width: 22px;
      height: 22px;
    }
  }

  .avaynil_shiraz_info_avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 5px;
    margin: 5px auto;
    width: fit-content;
    transition: all 0.4s ease;
    position: relative;
  }

  /* ریسپانسیو */
  @media (max-width: 768px) {
    .avaynil_shiraz_info_avatar {
      padding: 5px;
      border-radius: 18px;
      /* box-shadow:
                                  6px 6px 15px rgba(0, 0, 0, 0.15),
                                  -6px -6px 15px rgba(255, 255, 255, 0.9);
                          } */
    }

    .avaynil-tag-box {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
      padding: 8px 10px;
      background: #f5f7f6;
      border-radius: 10px;
      border: 1px solid #d4e9e3;
      box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
      justify-content: flex-start;
      transition: all 0.3s ease;
    }

    /* تگ‌ها */
    .avaynil-tag {
      display: flex;
      align-items: center;
      background: linear-gradient(135deg, #00a88f, #0b6b58);
      color: #fff;
      font-size: 13px;
      border-radius: 20px;
      padding: 6px 12px;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
      transition: all 0.25s ease;
      cursor: default;
      user-select: none;
    }

    /* افکت هاور */
    .avaynil-tag:hover {
      transform: scale(1.05);
    }

    /* دکمه حذف */
    .avaynil-tag-remove {
      margin-left: 8px;
      cursor: pointer;
      font-weight: bold;
      color: #ffcccc;
      transition: color 0.25s ease;
    }

    .avaynil-tag-remove:hover {
      color: #ffffff;
    }

    /* ========================= */
    /*        ریسپانسیو          */
    /* ========================= */

    /* تبلت */
    @media (max-width: 992px) {
      .avaynil-tag-box {
        gap: 6px;
        padding: 6px 8px;
      }

      .avaynil-tag {
        font-size: 12px;
        padding: 5px 10px;
      }
    }

    /* موبایل */
    @media (max-width: 600px) {
      .avaynil-tag-box {
        flex-direction: row;
        align-items: flex-start;
        padding: 8px;
        font-size: 10px;
      }

      .avaynil-tag {
        width: 100%;
        justify-content: space-between;
        border-radius: 14px;
        font-size: 14px;
        padding: 8px 12px;
        box-shadow: 0 4px 8px rgba(0, 168, 143, 0.25);
      }

      .avaynil-tag-remove {
        font-size: 16px;
        margin-left: 0;
      }
    }

    /* صفحه‌های خیلی کوچک (مثل گوشی‌های قدیمی) */
    @media (max-width: 400px) {
      .avaynil-tag {
        font-size: 13px;
        padding: 7px 10px;
      }

      .avaynil-tag-box {
        border-radius: 8px;
        gap: 5px;
      }
    }

    .customer-status {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin: 5px 0;
      direction: rtl;
    }

    /* پنهان کردن دکمه اصلی رادیو */
    .customer-status input[type="radio"] {
      display: none;
    }

    /* طراحی لیبل‌ها */
    .customer-status label {
      /* background: linear-gradient(145deg, #ffffff, #e6f5f1);
                          border: 2px solid #00a88f; */
      /* border-radius: 14px; */
      padding: 10px 18px;
      cursor: pointer;
      /* transition: all 0.25s ease; */
      /* box-shadow: 0 4px 10px rgba(0, 168, 143, 0.15); */
      display: flex;
      align-items: center;
      font-size: 12px;
      font-weight: 600;
      color: #0b6b58;
      user-select: none;
    }

    /* افکت هاور */
    .customer-status label:hover {
      background: linear-gradient(145deg, #f2fffb, #d9f3ec);
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0, 168, 143, 0.25);
    }

    /* حالت انتخاب‌شده */
    .customer-status input[type="radio"]:checked + span {
      background: linear-gradient(145deg, #00a88f, #00997c);
      color: #fff;
      box-shadow: 0 6px 16px rgba(0, 168, 143, 0.4);
      transform: translateY(-3px);
    }

    /* متن داخل span */
    .customer-status span {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 10px;
      transition: all 0.25s ease;
    }
  }

  /* حالت تبلت */
  @media (max-width: 768px) {
    .customer-status label {
      font-size: 12px;
      padding: 8px 14px;
      flex: 1 1 calc(50% - 10px);
      justify-content: center;
    }
  }

  /* حالت موبایل */
  @media (max-width: 480px) {
    .customer-status {
      flex-direction: row;
      align-items: stretch;
    }

    .customer-status label {
      width: 100%;
      text-align: center;
      font-size: 16px;
      padding: 12px;
    }
  }

  #av_Sales_expert_cmd .select2-selection__choice__remove,
  #av_Sales_expert_cmd .select2-selection__choice {
    color: white !important;
    background-color: transparent !important;
    border: none !important;
    display: none;
  }

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


  /*****************************
                  نوار وضعیت بالا (Status Bar)


  .Avaynil_Shiraz_CRM_statusbar input[type="text"] {
    border: none;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 14px;
    outline: none;
    width: 200px;
  }

  .Avaynil_Shiraz_CRM_statusbar button {
    background: #00a88f;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 14px;
  }

  /*****************************
                  ساختار اصلی
                  *****************************/
  

  

  /*****************************
                  ردیف بالایی (پروفایل + چهره)
                  *****************************/
  .Avaynil_Shiraz_CRM_toprow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
  }

  .Avaynil_Shiraz_CRM_profile {
    flex: 1;
    border: 1px solid gray;
    background-color: #e0e3e8;
    display: flex;
    border-radius: 6px;
  }

  .Avaynil_Shiraz_CRM_stars {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border: 1px solid gray;
    background-color: #fffdf1;
    margin: 2px;
    border-radius: 8px;
    width: 50px;
  }

  .Avaynil_Shiraz_CRM_stars img {
    width: 25px;
    height: 25px;
  }

  .Avaynil_Shiraz_CRM_profile_info {
    display: inline-block;
    margin: 5px;
    text-align: center;
    vertical-align: middle;
    flex: 1;
    width: 35%;
  }

  .Avaynil_Shiraz_CRM_profile_name {
    margin: 5px;
    text-align: right;
    font-size: 13px;
    font-weight: 700;
  }

  .Avaynil_Shiraz_CRM_profile_state {
    margin: 5px;
    text-align: right;
    font-size: 12px;
    font-weight: 200;
  }

  .Avaynil_Shiraz_CRM_profile_row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .Avaynil_Shiraz_CRM_profile_image img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #fff;
    background-color: #fff;
    padding: 6px;
  }

  .Avaynil_Shiraz_CRM_profile_code {
    margin-top: 5px;
    font-size: 14px;
    font-weight: 400;
  }

  .Avaynil_Shiraz_CRM_contact_list {
    display: flex;
    flex-direction: column;
    align-self: start;
    gap: 6px;
    padding: 8px;
    margin-right: 10px;
  }

  .Avaynil_Shiraz_CRM_contact_row {
    display: flex;
    align-items: self-start;
    gap: 5px;
  }

  .Avaynil_Shiraz_CRM_contact_row img {
    width: 18px;
    height: 18px;
  }

  .Avaynil_Shiraz_CRM_face_icon {
    width: 120px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .Avaynil_Shiraz_CRM_face_icon svg {
    width: 100%;
    height: 100%;
    stroke: #00a88f;
  }

  /*****************************
                  بخش میانی و ردیف‌ها
                  *****************************/
  .Avaynil_Shiraz_CRM_middle {
    /* background-color: #fff; */
    /* border-radius: 6px; */
    padding: 5px;
    max-height: 400px;
    margin-bottom: 70px;
    /* border: 1px solid #ccc; */
  }

  .Avaynil_Shiraz_CRM_steps {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 2px;
  }

  .Avaynil_Shiraz_CRM_step {
    position: relative;
    background: #fff;
    color: #333;
    border: 1px solid #ccc;
    padding: 10px 30px;
    text-align: center;
    font-size: 14px;
    transition: all 0.3s ease;
  }

  .Avaynil_Shiraz_CRM_step::after {
    content: "";
    position: absolute;
    left: -15px;
    top: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 15px solid #fff;
  }

  .Avaynil_Shiraz_CRM_step::before {
    content: "";
    position: absolute;
    left: -17px;
    top: 0;
    border-top: 21px solid transparent;
    border-bottom: 21px solid transparent;
    border-right: 17px solid #ccc;
  }

  .Avaynil_Shiraz_CRM_step:first-child::before,
  .Avaynil_Shiraz_CRM_step:first-child::after {
    display: none;
  }

  .Avaynil_Shiraz_CRM_step.active {
    background: #00a88f;
    color: #fff;
    border-color: #008f77;
  }

  .Avaynil_Shiraz_CRM_row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
  }

  .Avaynil_Shiraz_CRM_plus_box {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 0;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    margin-right: 40px;
    background: linear-gradient(145deg, #004c99, #003b80);
  }
  .Avaynil_Shiraz_CRM_plus_box:hover {
    transform: translateY(-2px);
    background: linear-gradient(145deg, #0059b3, #004080);
    box-shadow: 0 10px 24px rgba(0, 76, 153, 0.25);
  }

  .Avaynil_Shiraz_CRM_history_header {
    display: flex;
    width: 100%;
    background-color: #ffffff;
    padding: 4px;
    align-items: right;
    /* justify-content: space-between; */
  }

  .Avaynil_Shiraz_CRM_section_title {
    background: #fff;
    border: 1px solid #ccc;
    padding: 8px 10px;
    border-radius: 6px;
    font-weight: bold;
    text-align: center;
    font-size: 16px;
    margin: 4px;
  }

  .Avaynil_Shiraz_CRM_year_boxes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }

  .Avaynil_Shiraz_CRM_year_box {
    color: #000;
    font-weight: bold;
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 15px;
  }

  /* سایدبار اصلی (دسکتاپ) */
  .AVAYNIL_Shiraz_CRM_side {
    width: 60px;
    background-color: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 50px;
    gap: 25px;
    position: fixed;
    top: 0px;
    right: 0;
    height: 100vh;
    z-index: 1000;
    border-left: 2px solid #00a88f;
  }
  .AVAYNIL_Shiraz_CRM_side button {
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    color: #fff;
    font-size: 26px !important; /* 👈 این خط کلیدی است */
    transition: transform 0.2s ease, color 0.2s ease;
  }

  .AVAYNIL_Shiraz_CRM_side button:hover {
    transform: scale(1.2);
    color: #00e0b0;
  }

  .avaynil_row_top_left_crm * {
    font-size: 12px;
  }
  /* تولتیپ */
  .AVAYNIL_Shiraz_CRM_side button span::after {
    content: attr(tooltip);
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    background: #00a88f;
    color: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, right 0.3s ease;
    font-size: 13px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
  }

  .AVAYNIL_Shiraz_CRM_side button:hover span::after {
    opacity: 1;
    right: 70px;
  }

  /* حالت موبایل: منو در پایین صفحه */
  @media (max-width: 768px) {
    .AVAYNIL_Shiraz_CRM_side {
      width: 100%;
      height: 60px;
      bottom: 0;
      top: auto;
      right: 0;
      left: 0;
      gap: 4px;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      padding: 0 5px;
      border-left: none;
      border-top: 2px solid #00a88f;
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    }

    .AVAYNIL_Shiraz_CRM_side button {
      font-size: 18px !important;
      color: #fff;
    }

    /* تولتیپ در موبایل بهتر است حذف یا اصلاح شود */
    /* تولتیپ در موبایل - نمایش بالای آیکون */

  
    /* تولتیپ در موبایل بهتر است حذف یا اصلاح شود */

    .Avaynil_Shiraz_CRM_container {
      flex-direction: column;
      padding: 2px;
      margin: 0;
    }
    .Avaynil_Shiraz_CRM_wrapper {
      margin: 0;
    }
    .Avaynil_Shiraz_CRM_stars {
      flex-direction: row;
      /* افقی → عمودی */
      /* width: 50px; */
      width: 100%;
      /* عرض ثابت برای عمودی شدن */
    }
    .Avaynil_Shiraz_CRM_profile_row {
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    .avaynil_row_top_left_crm {
      width: 100% !important;
      text-align: center;
      align-items: center;
    }
    .avaynil_section_right_crm {
      width: 95% !important;
    }
    .avaynil-inline-block_info_plus {
      width: 5% !important;
      padding: 0px;
      align-items: center;
      justify-content: center;
    }
    .Avaynil_Shiraz_CRM_main {
      margin-right: 0;
      width: 100%;
    }

    .Avaynil_Shiraz_CRM_steps {
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
    }
    .Avaynil_Shiraz_CRM_face_icon {
      position: absolute;
      top: 50px;
      left: 5px;
      width: 80px;
      height: 80px;
      justify-content: flex-start;
      align-items: flex-start;
      z-index: 9999; /* آیکون روی تمام المان‌ها قرار می‌گیرد */
    }
  }

  @media (max-width: 480px) {
    .AVAYNIL_Shiraz_CRM_side {
      width: 100%;
      height: 60px;
      bottom: 0;
      top: auto;
      gap: 4px;
      right: 0;
      left: 0;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      padding: 0 5px;
      border-left: none;
      border-top: 2px solid #00a88f;
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    }

    .AVAYNIL_Shiraz_CRM_side button {
      font-size: 18px !important;
      color: #fff;
    }

    /* تولتیپ در موبایل بهتر است حذف یا اصلاح شود */

    .Avaynil_Shiraz_CRM_steps {
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
    }
  }

  /* ===================== */
  /* Responsive Styles */
  /* ===================== */

  @media screen and (max-width: 1200px) {
    .Avaynil_Shiraz_CRM_step {
      width: 100%;
      font-size: 10px;
      padding: 6px 5px;
    }
    .Avaynil_Shiraz_CRM_toprow {
      flex-direction: column;
      align-items: stretch;
      gap: 15px;
      margin: 0;
    }
    .Avaynil_Shiraz_CRM_profile_name {
      font-size: 12px;
      font-weight: 700;
    }
    .Avaynil_Shiraz_CRM_profile {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .Avaynil_Shiraz_CRM_profile_info {
      width: 100%;
      margin: 0;
    }

    .Avaynil_Shiraz_CRM_face_icon {
      position: absolute;
      top: 50px;
      left: 5px;
      width: 80px;
      height: 80px;
      justify-content: flex-start;
      align-items: flex-start;
      z-index: 9999; /* آیکون روی تمام المان‌ها قرار می‌گیرد */
    }
    .Avaynil_Shiraz_CRM_face_icon svg {
      width: 50%;
      height: 50%;
      stroke: #00a88f;
    }

    .Avaynil_Shiraz_CRM_steps {
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
    }

    .Avaynil_Shiraz_CRM_middle {
      flex-direction: column;
      margin-bottom: 70px;
    }
    .avaynil-inline-block_info_plus #btn-add-att {
      bottom: -10px;
      left: -10px;
      width: 35px;
      height: 35px;
      font-size: 24px;
    }

    .AVAYNIL_Shiraz_CRM_side {
      width: 100%;
      height: 60px;
      bottom: 0;
      top: auto;
      right: 0;
      gap: 4px;
      left: 0;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      padding: 0 5px;
      border-left: none;
      border-top: 2px solid #00a88f;
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    }

    .AVAYNIL_Shiraz_CRM_side button {
      font-size: 18px !important;
      color: #fff;
    }
    .AVAYNIL_Shiraz_CRM_side button span::after {
      content: attr(tooltip);
      position: absolute;
      right: 0px;
      top: -40px;
      transform: translateY(50%);
      background: #00a88f;
      color: #fff;
      padding: 6px 12px;
      border-radius: 8px;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease, right 0.3s ease;
      font-size: 10px;
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
    }

    .AVAYNIL_Shiraz_CRM_side button:hover span::after {
      opacity: 1;
      right: 0px;
      top: -50px;
    }

    .circle-item {
      width: 45px !important;
      height: 45px !important;
    }
    .circle-add-btn {
      width: 45px !important;
      height: 45px !important;
      font-size: 20px !important;
    }
    .avaynil_row_top_left_crm {
      width: 100% !important;
      text-align: center;
      align-items: center;
    }
    .Avaynil_Shiraz_CRM_stars {
      flex-direction: row;
      /* افقی → عمودی */
      /* width: 50px; */
      width: 100%;
      /* عرض ثابت برای عمودی شدن */
    }
    .customer-status label {
      /* background: linear-gradient(145deg, #ffffff, #e6f5f1);
                          border: 2px solid #00a88f; */
      /* border-radius: 14px; */
      /* padding: 10px 18px;
                          cursor: pointer; */
      /* transition: all 0.25s ease; */
      /* box-shadow: 0 4px 10px rgba(0, 168, 143, 0.15); */
      /* display: flex;
                          align-items: center; */
      font-size: 10px;
      /* font-weight: 600;
                          color: #0b6b58;
                          user-select: none; */
    }

    .avaynil-tag-box {
      flex-direction: row;
      align-items: flex-start;
      padding: 8px;
      font-size: 10px;
    }

    .cmd-label {
      top: 15px;
      left: -20px;
      /* کمی عقب‌تر تا کاملاً دیده شود */
      width: 40px;
      /* پهن‌تر می‌کنیم چون متن کوچکتر می‌شود */
      font-size: 9px;
      padding: 2px 0;
      transform: rotate(-90deg) scale(0.85);
      /* کمی کوچکتر و متناسب‌تر */
    }
  }

  @media screen and (max-width: 992px) {
    .Avaynil_Shiraz_CRM_step {
      width: 100%;
      font-size: 10px;
      padding: 6px 5px;
    }
    .Avaynil_Shiraz_CRM_container {
      flex-direction: column;
      padding: 10px;
    }

    .Avaynil_Shiraz_CRM_main {
      margin-right: 0;
      width: 100%;
    }

    .Avaynil_Shiraz_CRM_contact_list {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
    }

    .Avaynil_Shiraz_CRM_contact_row {
      justify-content: center;
      gap: 5px;
    }
    /* 
                      .Avaynil_Shiraz_CRM_middle div {
                          width: 100% !important;
                      } */
    .Avaynil_Shiraz_CRM_profile_row {
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    .Avaynil_Shiraz_CRM_steps {
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
    }
  }

  @media screen and (max-width: 768px) {
    .Avaynil_Shiraz_CRM_step {
      width: 100%;
      font-size: 10px;
      padding: 6px 5px;
    }
    .Avaynil_Shiraz_CRM_statusbar {
      flex-direction: column;
      gap: 10px;
      padding: 8px 12px;
      margin-right: 0;
    }

    .Avaynil_Shiraz_CRM_stars {
      flex-direction: row;
      /* افقی → عمودی */
      /* width: 50px; */
      width: 100%;
      /* عرض ثابت برای عمودی شدن */
    }

    .avaynil-star-3d {
      width: 10px;
      height: 10px;
    }

    .Avaynil_Shiraz_CRM_statusbar input[type="text"] {
      width: 100%;
    }

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

    .Avaynil_Shiraz_CRM_step::after,
    .Avaynil_Shiraz_CRM_step::before {
      display: none;
    }

    .Avaynil_Shiraz_CRM_plus_box {
      margin-right: 0;
      margin-top: 10px;
    }

    .Avaynil_Shiraz_CRM_face_icon {
      position: absolute;
      top: 50px;
      left: 5px;
      width: 80px;
      height: 80px;
      justify-content: flex-start;
      align-items: flex-start;
      z-index: 9999; /* آیکون روی تمام المان‌ها قرار می‌گیرد */
    }
    .Avaynil_Shiraz_CRM_profile_row {
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    .Avaynil_Shiraz_CRM_main {
      margin-right: 0;
      width: 100%;
    }
  }

  @media screen and (max-width: 480px) {
    .Avaynil_Shiraz_CRM_profile_image img {
      width: 70px;
      height: 70px;
    }

    .Avaynil_Shiraz_CRM_step {
      width: 100%;
      font-size: 10px;
      padding: 6px 5px;
    }

    .Avaynil_Shiraz_CRM_stars {
      flex-direction: row;
      /* افقی → عمودی */
      /* width: 50px; */
      width: 100%;
      /* عرض ثابت برای عمودی شدن */
    }

    .avaynil-star-3d {
      width: 10px;
      height: 10px;
    }

    .Avaynil_Shiraz_CRM_contact_row span {
      font-size: 12px;
      min-width: 70px;
    }

    .Avaynil_Shiraz_CRM_plus_box {
      font-size: 20px;
      padding: 0;
    }
    .avaynil-contactcredit-label_attachment {
      writing-mode: sideways-lr;
      text-orientation: mixed;
    }
    .Avaynil_Shiraz_CRM_main {
      margin-right: 0;
      width: 100%;
    }
  }

  /* ====== CSS: فقط کلاس‌های جدید (av-inline-*) که استایل‌های inline را جایگزین کردند ====== */

  /* پایه */
  .av-inline-statusbar-inner {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .av-inline-search-btn {
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
  }

  /* background transparent for icon images previously inline */
  .av-inline-bg-transparent {
    background-color: transparent !important;
  }

  /* شماره موبایل min-width */
  .av-inline-minwidth-100 {
    min-width: 100px;
    display: inline-block;
    direction: ltr;
    /* اگر لازم باشه شماره‌ها راست‌به‌چپ را کنترل کن */
  }

  /* راست-بال/بلاک اطلاعات اصلی (width:60% inline) */
  .av-inline-right-block {
    width: 60%;
    text-align: right;
    align-items: flex-start;
    display: flex;
    flex-direction: column;
  }

  /* year boxes container inline alignment */
  .av-inline-yearboxes {
    align-items: flex-start;
    text-align: right;
  }

  /* transparent style button (id modal_market_maker-info) */
  .av-inline-transparent-btn {
    border: none;
    background-color: transparent;
    font-size: 20px;
    margin-right: auto;
    cursor: pointer;
  }

  /* face svg classes */
  .av-inline-face-healthy {
    stroke: #00a88f !important;
    color: #00a88f !important;
  }

  .av-inline-face-sad {
    stroke: #ff4b4b !important;
    color: #ff4b4b !important;
  }

  /* steps row (previous inline display:flex; gap...) */
  .av-inline-steps-row {
    display: flex;
    align-items: stretch;
    width: 100%;
    gap: 10px;
    margin-bottom: 10px;
  }

  /* credit box (replaces big inline block) */
  .av-inline-credit-box {
    display: flex;
    flex: 1;
    border: 3px solid gray;
    font-size: 18px;
    flex-direction: row;
    background-color: #fff;
    align-items: stretch;
  }

  .av-inline-credit-label {
    background-color: #fff795;
    padding: 8px;
    border-radius: 5px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .av-inline-credit-value {
    background-color: #eaffee;
    min-width: 100px;
    padding: 8px;
    flex: 2;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .av-inline-credit-strong {
    color: #0b6b58;
  }

  .av-inline-credit-due {
    background-color: #ffcecf;
    padding: 8px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .av-inline-credit-ok {
    background-color: #00856f;
    padding: 8px;
    flex: 1;
  }

  /* admin message block (replaces inline flex block) */
  .av-inline-admin-msg {
    flex: 2;
    display: flex;
    background-color: #c6e9e5;
    align-items: center;
    text-align: center;
    border: 2px solid gray;
    padding: 5px;
    gap: 8px;
  }

  .av-inline-admin-label {
    width: 150px;
    display: inline-block;
    text-align: right;
  }

  .av-inline-admin-input {
    margin: auto;
    flex: 1;
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
  }

  .av-inline-transparent-icon-btn {
    border: none;
    background: transparent;
    font-size: 20px;
    margin-right: auto;
    cursor: pointer;
  }

  .av-inline-admin-label-view {
    color: red;
    font-size: 12px;
    font-weight: 700;
    flex: 1;
    text-align: center;
  }

  /* comments section: replace margin-right:30px and other inline bits */
  .av-inline-comments-section {
    width: 100%;
  }

  .av-inline-comment-children {
    margin-right: 30px;
  }

  .av-inline-comment-card {
    border: none !important;
    margin-bottom: 8px;
  }

  .av-inline-comment-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
  }

  .av-inline-comment-actions {
    justify-content: space-between;
    display: flex;
    gap: 8px;
    align-items: center;
  }

  /* category & desc layout (replaces inline widths) */
  .av-inline-category-row {
    display: flex;
    width: 100%;
    align-items: stretch;
    gap: 12px;
  }

  .av-inline-category-left {
    width: 80%;
    display: flex;
    flex-direction: column;
  }

  .av-inline-category-right {
    width: 20%;
    display: flex;
    flex-direction: column;
  }

  /* attachments block (replaces many inline styles) */
  .av-inline-attachments-block {
    position: relative;
    width: 3%;
    margin-right: auto;
    margin-left: 0;
    text-align: center;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    padding: 10px;
    box-sizing: border-box;
  }

  .av-inline-attachments-list {
    display: block;
  }

  .av-inline-attachments-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    align-items: center;
    writing-mode: sideways-lr;
    text-orientation: mixed;
  }

  .av-inline-attachment-item {
    text-align: left;
  }

  .av-inline-attachment-link {
    display: inline-block;
    background: #00a88f;
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
  }

  /* floating plus button */
  .av-inline-add-attachment-btn {
    position: absolute;
    bottom: -15px;
    left: -15px;
    font-size: 30px;
    border: none;
    background-color: #00a88f;
    color: white;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  /* history button minor class (if need override) */
  .av-inline-history-btn {
    padding: 6px 10px;
    border-radius: 6px;
    color: #fff;
    border: none;
    cursor: pointer;
  }

  /* small helpers */
  .av-inline-row-flex {
    display: flex;
    gap: 10px;
    align-items: center;
  }

  /* ====== Responsive ====== */

  /* tablet */
  @media (max-width: 992px) {
    .av-inline-right-block {
      width: 100%;
    }

    .av-inline-category-row {
      flex-direction: column;
    }

    .av-inline-attachments-block {
      width: 100%;
      position: relative;
      margin-top: 10px;
    }

    .av-inline-steps-row {
      flex-direction: column;
    }

    .av-inline-credit-box {
      flex-direction: column;
      border-width: 2px;
    }

    .av-inline-admin-msg {
      flex-direction: row;
      gap: 8px;
    }

    .av-inline-minwidth-100 {
      min-width: 80px;
    }
    .avaynil-inline-block_info_plus #btn-add-att {
      bottom: -10px;
      left: -10px;
      width: 35px;
      height: 35px;
      font-size: 24px;
    }
    .avaynil_row_top_left_crm {
      width: 100% !important;
      text-align: center;
      align-items: center;
    }
    .avaynil-inline-block_info_plus .avaynil_attachment_contact_crm {
      font-size: 8px;
      font-weight: 100;
      padding: 1px 2px;
      width: 100%;
      text-align: center;
      /* بکگراند حذف شود */
      color: #fff;
      border: 1px solid #d4e9e3;
    }
    .avaynil_section_right_crm {
      width: 95% !important;
      margin-bottom: 70px;
    }
    .avaynil-inline-block_info_plus {
      width: 5% !important;
      padding: 0px;
      align-items: center;
      justify-content: center;
    }
    .avaynil-contactcredit-label_attachment {
      writing-mode: sideways-lr;
      text-orientation: mixed;
    }
  }

  /* mobile */
  @media (max-width: 576px) {
    /* .AVAYNIL_Shiraz_CRM_side {
                          width: 56px;
                      } */

    /* example: shrink side */
    .av-inline-statusbar-inner {
      flex-direction: column;
      align-items: stretch;
      gap: 6px;
    }

    .av-inline-search-btn {
      width: 100%;
    }

    .Avaynil_Shiraz_CRM_face_icon {
      position: absolute;
      top: 50px;
      left: 5px;
      width: 80px;
      height: 80px;
      justify-content: flex-start;
      align-items: flex-start;
      z-index: 9999; /* آیکون روی تمام المان‌ها قرار می‌گیرد */
    }
    .av-inline-minwidth-100 {
      min-width: 60px;
    }

    .av-inline-attachments-inner {
      writing-mode: horizontal-tb;
    }

    /* avoid sideways on tiny screens */
    .av-inline-add-attachment-btn {
      bottom: -12px;
      left: -12px;
      width: 36px;
      height: 36px;
      font-size: 24px;
    }

    .av-inline-credit-box {
      border: 1px solid #ccc;
    }

    .av-inline-admin-label {
      width: 120px;
    }
    .avaynil-inline-block_info_plus #btn-add-att {
      bottom: -10px;
      left: -10px;
      width: 35px;
      height: 35px;
      font-size: 24px;
    }
    .avaynil_row_top_left_crm {
      width: 100% !important;
      text-align: center;
      align-items: center;
    }
    .avaynil-inline-block_info_plus .avaynil_attachment_contact_crm {
      font-size: 8px;
      font-weight: 100;
      padding: 1px 2px;
      width: 100%;
      text-align: center;
      /* بکگراند حذف شود */
      color: #fff;
      border: 1px solid #d4e9e3;
    }
    .avaynil_section_right_crm {
      width: 95% !important;
      margin-bottom: 70px;
    }
    .avaynil-inline-block_info_plus {
      width: 5% !important;
      padding: 0px;
      align-items: center;
      justify-content: center;
    }
    .avaynil-contactcredit-label_attachment {
      writing-mode: sideways-lr;
      text-orientation: mixed;
    }
  }

  .customer-status {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    /* دسکتاپ RTL طبیعی */
    gap: 10px;
    margin: 15px 0;
    direction: rtl;
  }

  /* پنهان کردن دکمه اصلی رادیو */
  .customer-status input[type="radio"] {
    display: none;
  }

  /* طراحی لیبل‌ها */
  .customer-status label {
    /* background: linear-gradient(145deg, #ffffff, #e6f5f1); */
    /* border: 2px solid #00a88f; */
    /* border-radius: 14px; */
    padding: 10px 18px;
    cursor: pointer;
    /* transition: all 0.25s ease; */
    /* box-shadow: 0 4px 10px rgba(0, 168, 143, 0.15); */
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    color: #0b6b58;
    user-select: none;
  }

  /* افکت هاور */
  .customer-status label:hover {
    background: linear-gradient(145deg, #f2fffb, #d9f3ec);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 168, 143, 0.25);
  }

  /* حالت انتخاب‌شده */
  .customer-status input[type="radio"]:checked + span {
    background: linear-gradient(145deg, #00a88f, #00997c);
    color: #fff;
    box-shadow: 0 6px 16px rgba(0, 168, 143, 0.4);
    transform: translateY(-3px);
  }

  /* متن داخل span */
  .customer-status span {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 10px;
    transition: all 0.25s ease;
  }

  /* حالت تبلت */
  @media (max-width: 768px) {
    .customer-status label {
      font-size: 10px;
      /* کوچکتر شدن فونت */
      padding: 6px 10px;
      /* کاهش padding */
      flex: 1 1 calc(50% - 10px);
      justify-content: center;
      background: none;
      /* حذف پس‌زمینه */
      box-shadow: none;
      /* حذف سایه */
      /* border: 1px solid #00a88f; */
      /* فقط خط دور */
      color: #0b6b58;
    }
    .avaynil_row_top_left_crm {
      width: 100% !important;
      text-align: center;
      align-items: center;
    }
    .avaynil-inline-block_info_plus .avaynil_attachment_contact_crm {
      font-size: 8px;
      font-weight: 100;
      padding: 1px 2px;
      width: 100%;
      text-align: center;
      /* بکگراند حذف شود */
      color: #fff;
      border: 1px solid #d4e9e3;
    }
    .avaynil_section_right_crm {
      width: 95% !important;
      margin-bottom: 70px;
    }
    .avaynil-inline-block_info_plus {
      width: 5% !important;
      padding: 0px;
    }
    .avaynil-contactcredit-label_attachment {
      writing-mode: sideways-lr;
      text-orientation: mixed;
    }
  }

  /* حالت موبایل */
  @media (max-width: 480px) {
    .customer-status {
      /* flex-direction: column; */
      align-items: stretch;
      direction: ltr;
    }

    .customer-status label {
      width: 100%;
      text-align: center;
      font-size: 10px;
      /* فونت کوچکتر */
      padding: 6px;
      /* کاهش padding */
      background: none;
      /* حذف پس‌زمینه */
      box-shadow: none;
      /* حذف سایه */
      /* border: 1px solid #00a88f; */
      /* فقط خط دور */
      justify-content: center;
      color: #0b6b58;
    }

    .avaynil-inline-block_info_plus {
      width: 10% !important;
      padding: 0px;
    }

    .avaynil_section_right_crm {
      width: 90% !important;
      margin-bottom: 70px;
    }

    .avaynil-inline-block_info_plus .avaynil_attachment_contact_crm {
      font-size: 8px;
      font-weight: 100;
      padding: 1px 2px;
      width: 100%;
      text-align: center;
      /* بکگراند حذف شود */
      color: #fff;
      border: 1px solid #d4e9e3;
    }
    .avaynil_row_top_left_crm {
      width: 100% !important;
      text-align: center;
      align-items: center;
    }
    .avaynil-contactcredit-label_attachment {
      writing-mode: sideways-lr;
      text-orientation: mixed;
    }
  }

  /* کانتینر اصلی پیوست */
  .avaynil-inline-block_info_plus {
    position: relative;
    width: 3%;
    margin-right: auto;
    margin-left: 0;
    text-align: center;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    padding: 10px;
    align-items: center;
    justify-content: center;
    max-height: 800px;
    /* overflow: auto; */
    margin-bottom: 70px;
  }

  /* لیبل پیوست */
  .avaynil-inline-block_info_plus .avaynil-contactcredit-label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #0b6b58;
  }

  /* کانتینر لینک‌ها */
  .avaynil-inline-block_info_plus .info-item {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    align-items: center;
    writing-mode: sideways-lr;
    text-orientation: mixed;
  }

  /* لینک‌های پیوست */
  .avaynil-inline-block_info_plus .avaynil_attachment_contact_crm {
    display: inline-block;
    background: #00a88f;
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    transition: all 0.25s ease;
  }

  .avaynil-inline-block_info_plus .avaynil_attachment_contact_crm:hover {
    background-color: #00997c;
  }

  /* دکمه پلاس پایین سمت چپ */
  .avaynil-inline-block_info_plus #btn-add-att {
    position: absolute;
    bottom: -15px;
    left: -15px;
    font-size: 30px;
    border: none;
    background: linear-gradient(145deg, #004c99, #003b80);
    color: white;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .avaynil-inline-block_info_plus #btn-add-att:hover {
    transform: translateY(-2px);
    background: linear-gradient(145deg, #0059b3, #004080);
    box-shadow: 0 10px 24px rgba(0, 76, 153, 0.25);
  }

  /* Media Queries برای تبلت */
  @media (max-width: 768px) {
    .avaynil-inline-block_info_plus {
      width: 5% !important;
      padding: 0px;
      align-items: center;
      justify-content: center;
    }

    .avaynil-inline-block_info_plus .avaynil-contactcredit-label {
      font-size: 12px;
      font-weight: 700;
    }

    .avaynil-inline-block_info_plus .avaynil_attachment_contact_crm {
      font-size: 8px;
      font-weight: 100;
      padding: 1px 2px;
      width: 100%;
      text-align: left;
      /* بکگراند حذف شود */
      color: #fff;
      border: 1px solid #d4e9e3;
    }
    .avaynil-inline-block_info_plus #btn-add-att {
      bottom: -10px;
      left: -10px;
      width: 35px;
      height: 35px;
      font-size: 24px;
    }
    .avaynil_row_top_left_crm {
      width: 100% !important;
      text-align: center;
      align-items: center;
    }
    .avaynil-contactcredit-label_attachment {
      writing-mode: sideways-lr;
      text-orientation: mixed;
    }
  }

  /* Media Queries برای موبایل */
  @media (max-width: 480px) {
    .avaynil-inline-block_info_plus {
      width: 10% !important;
      padding: 0px;
      align-items: center;
      justify-content: center;
    }

    .avaynil-inline-block_info_plus .avaynil-contactcredit-label {
      font-size: 12px;
      font-weight: 700;
    }

    *
      کانتینر
      لینک‌ها
      */
      .avaynil-inline-block_info_plus
      .avaynil_attachment_contact_crm {
      font-size: 8px;
      font-weight: 100;
      padding: 1px 2px;
      width: 100%;
      text-align: left;
      /* بکگراند حذف شود */
      color: #fff;
      border: 1px solid #d4e9e3;
    }

    .avaynil-inline-block_info_plus #btn-add-att {
      bottom: -8px;
      left: -8px;
      width: 30px;
      height: 30px;
      font-size: 20px;
    }

    .avaynil_row_top_left_crm {
      width: 100% !important;
      text-align: center;
      align-items: center;
    }
    .avaynil-contactcredit-label_attachment {
      writing-mode: sideways-lr;
      text-orientation: mixed;
    }
  }

  .avaynil_section_right_crm {
    width: 97%;
    margin-bottom: 70px;
  }
  .avaynil_section_right_crm_full {
    width: 100%;
    margin-bottom: 70px;
  }

  .avaynil_attachment_contact_crm {
    display: inline-block;
    background: #00a88f;
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
  }

  .avaynil_row_top_left_crm {
    text-align: right;
    align-items: self-start;
  }
  .avaynil_sub_label {
    font-size: 12px;
    font-weight: 700 !important;
  }
  .avaynil-back-arrow {
    width: 10px;
    height: 10px;
    border-top: 3px solid #000;
    border-left: 3px solid #000;
    transform: rotate(-45deg);
    cursor: pointer;
    margin: 5px;
    transition: transform 0.2s;
  }

  .avaynil-back-arrow:hover {
    transform: rotate(-45deg) translateX(-3px);
  }

  .avaynil-circles-container {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
    padding: 15px;
    justify-content: center;
    text-align: center;
  }

  .circle-item {
    width: 95px;
    height: 95px;
    border-radius: 50%;
    padding: 3px; /* ضخامت border */
    background: conic-gradient(#ff4f87, #c3416f, #ff4f87); /* گرادینت */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

  .circle-item > img.circle-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid white;
  }

  .circle-text {
    font-size: 12px;
    margin-top: 6px;
  }

  /* دکمه پلاس گرد */
  .circle-add-btn {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    border: 3px dashed #ff3c85;
    font-size: 40px;
    font-weight: bold;
    background: #fff;
    color: #ff3c85;
    cursor: pointer;
  }
  .circle-add-btn:hover {
    background: #ff3c85;
    color: #fff;
  }

  .comment-card {
    position: relative; /* پایه برای absolute داخلی */
  }

  .cmd-label {
    position: absolute;
    top: 30px;
    left: -30px; /* موقعیت اولیه */
    width: 60px;
    text-align: center;
    color: #34495e;
    font-size: 12px;
    font-weight: 400;
    transform: rotate(-90deg);
    padding: 2px 0;
    transition: transform 0.3s ease, font-weight 0.3s ease;
    transform-origin: center center;
    z-index: 10; /* روی سایر عناصر قرار می‌گیرد */
  }

  .cmd-label:hover {
    font-weight: 800;
    color: #cc0000;
  }

  /******************************/
  #modal_add_cmd_in_old_cmd_close {
    border: none;
    background: none;
    font-size: 28px;
    color: #444;
    cursor: pointer;
    transition: 0.2s;
  }
  #modal_add_cmd_in_old_cmd_close:hover {
    color: #e63946;
  }

  /* فرم داخل مودال */
  #modal_add_cmd_in_old_cmd form {
    flex: 1;
    overflow-y: auto;
    padding-right: 6px;
  }

  /* اسکرول نرم */
  #modal_add_cmd_in_old_cmd form::-webkit-scrollbar {
    width: 6px;
  }
  #modal_add_cmd_in_old_cmd form::-webkit-scrollbar-thumb {
    background: #c5c5c5;
    border-radius: 4px;
  }

  /* سبک فیلدها */
  #modal_add_cmd_in_old_cmd input[type="text"] {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    width: 100%;
    transition: border-color 0.25s;
  }
  #modal_add_cmd_in_old_cmd input[type="text"]:focus {
    border-color: #0077ff;
    outline: none;
  }

  /* رادیوها */
  .customer-status label,
  .task-and-status-div label {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f8f9fc;
    padding: 5px 8px;
    margin: 3px 0;
    border-radius: 6px;
    cursor: pointer;
  }
  .customer-status input,
  .task-and-status-div input {
    accent-color: #0077ff;
  }

  /* دکمه ذخیره */
 

  /* ریسپانسیو - تبلت */
  @media (max-width: 768px) {
    #modal_add_cmd_in_old_cmd {
      width: 90%;
      padding: 15px;
    }
  }

  /* ریسپانسیو - موبایل */
  @media (max-width: 480px) {
    #modal_add_cmd_in_old_cmd {
      width: 96%;
      border-radius: 15px;
      padding: 12px;
    }
    .customer-status label {
      font-size: 10px;
    }
    .task-and-status-div label {
      font-size: 13px;
    }
  }
  /* حالت نمایش در نمایشگرهای بزرگ‌تر از 1200px */
  @media (min-width: 1200px) {
    #modal_add_cmd_in_old_cmd {
      width: 50%; /* یا 500px، 600px یا هر مقدار دلخواه */
      padding: 25px;
    }

    .avaynil-btn-save-command {
      font-size: 14px;
      padding: 14px;
    }
  }

  /* ================================
    🔷 فیلتر تاریخ
  ================================ */
 

  
  .avaynil-filter-label {
    font-weight: bold;
    font-size: 13px;
    color: #333;
  }

  .avaynil-filter-input {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid #cfd6e1;
    border-radius: 8px;
    font-size: 13px;
  }

  .avaynil-filter-btn {
    background: #0d6efd;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 20px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
  }

  .avaynil-filter-btn:hover {
    background: #0b5ed7;
  }

  /* ================================
    🔷 بخش گزارش فروشندگان
  ================================ */
  .avaynil-report-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 10px;
  }

  .avaynil-report-card {
    flex: 1 1 25%;
    max-width: 340px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.07);
    padding: 16px;
    font-size: 13px;
    transition: 0.2s;
  }

  .avaynil-report-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12);
  }

  .avaynil-report-title {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
  }

  .avaynil-position-text {
    color: #888;
    font-size: 12px;
  }

  /* داخل کارت */
  .avaynil-report-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .avaynil-report-box {
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #eee;
  }

  .daily-box {
    background: #f4f7ff;
    border-color: #dce6ff;
  }

  .monthly-box {
    background: #fff8e6;
    border-color: #ffe4a8;
  }

  .paycheck-box {
    background: #eafff3;
    border-color: #c4f5dc;
  }

  /* ================================
    🔷 ریسپانسیو کامل
  ================================ */

  /* موبایل کوچک */
  @media (max-width: 480px) {
    .avaynil-report-card {
      flex: 1 1 100%;
      max-width: 100%;
    }

  
  }

  /* موبایل متوسط */
  @media (max-width: 768px) {
    .avaynil-report-card {
      flex: 1 1 48%;
      max-width: 48%;
    }
  }

  /* تبلت */
  @media (max-width: 992px) {
    .avaynil-report-card {
      flex: 1 1 33%;
      max-width: 33%;
    }
  }

  /* دسکتاپ بزرگ */
  @media (min-width: 1200px) {
    .avaynil-report-card {
      flex: 1 1 24%;
      max-width: 18%;
    }
  }
  /*******************************مربوط به بخش تنظیمات **/
  /* کانتینر کلی تب و محتوا */
  /* کانتینر کلی تب و محتوا */
  .vertical-tab-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: flex-start; /* محتوای تب‌ها بالاتر از منو تراز شود */
    flex-wrap: nowrap; /* جلوگیری از رفتن محتوا به پایین */
  }

  /* نوار تب‌ها (سمت چپ) */
  .vertical-tabs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 220px; /* عرض ثابت برای منو */
    max-width: 220px;
  }

  /* تب‌های عمودی */
  .fancy-tab {
    border-radius: 12px;
    padding: 10px 15px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    text-align: right; /* متن فارسی راست چین */
  }

  /* تب فعال */
  .fancy-tab.active {
    background: linear-gradient(145deg, #0073aa, #005177);
    color: #fff;
  }

  /* هاور تب‌ها */
  .fancy-tab:hover {
    transform: translateX(3px);
    background: linear-gradient(145deg, #e6f0f5, #cce0eb);
  }

  /* محتوای تب‌ها */
  .tab-content {
    display: none;
    flex: 1; /* محتوا فضای باقی مانده را بگیرد */
    padding: 20px;
    background: #f9f9f9;
    border-radius: 12px;
    box-sizing: border-box;
  }

  /* نمایش تب فعال */
  .tab-content.active {
    display: block;
  }

  /* ریسپانسیو موبایل: نمایش تب‌ها افقی */
  @media (max-width: 768px) {
    .vertical-tab-container {
      flex-direction: column;
      gap: 10px;
    }

    .vertical-tabs {
      flex-direction: row;
      overflow-x: auto;
      min-width: 100%;
    }

    .vertical-tabs::-webkit-scrollbar {
      height: 6px;
    }

    .vertical-tabs::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.2);
      border-radius: 3px;
    }

    .tab-content {
      padding: 15px;
    }
  }

  /* Dashicons فارسی */
  .dashicons {
    font-family: "Dashicons" !important;
    speak: none;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
  }
  /*************************/
  /* کانتینر اختصاصی افزونه */

  /* عنوان‌ها */
  .avaynil-msg-wrapper h2 {
    font-size: 18px;
    color: #0073aa;
    margin-bottom: 15px;
    border-bottom: 2px solid #e1e1e1;
    padding-bottom: 5px;
  }

  /* فرم جدول */
  .avaynil-msg-wrapper #avaynil-msg-form table.avaynil-form-table {
    width: 100%;
    /* max-width: 600px; */
    border-collapse: collapse;
    margin-bottom: 20px;
    background: #f9f9f9;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  }

  .avaynil-msg-wrapper #avaynil-msg-form table.avaynil-form-table th {
    width: 150px;
    text-align: left;
    padding: 10px 15px;
    vertical-align: middle;
    font-weight: 600;
    color: #333;
  }

  .avaynil-msg-wrapper #avaynil-msg-form table.avaynil-form-table td {
    padding: 10px 15px;
  }

  /* دکمه ذخیره */
  .avaynil-msg-wrapper #avaynil_msg_save_connector {
    background: linear-gradient(145deg, #0073aa, #005177);
    color: #fff;
    padding: 8px 18px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
  }

  .avaynil-msg-wrapper #avaynil_msg_save_connector:hover {
    background: linear-gradient(145deg, #005177, #003f5e);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

  /* جدول اختصاصی */
  .avaynil-msg-wrapper #avaynil-msg-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  .avaynil-msg-wrapper #avaynil-msg-table thead {
    background: #0073aa;
    color: #fff;
  }

  .avaynil-msg-wrapper #avaynil-msg-table thead th {
    padding: 12px 10px;
    text-align: center;
    font-weight: 600;
  }

  .avaynil-msg-wrapper #avaynil-msg-table tbody tr {
    background: #f9f9f9;
    transition: all 0.3s ease;
  }

  .avaynil-msg-wrapper #avaynil-msg-table tbody tr:nth-child(even) {
    background: #f1f1f1;
  }

  .avaynil-msg-wrapper #avaynil-msg-table tbody tr:hover {
    background: #e0f0ff;
    transform: scale(1.01);
  }

  .avaynil-msg-wrapper #avaynil-msg-table tbody td {
    padding: 10px;
    text-align: center;
  }

  /* دکمه حذف */
  .avaynil-msg-wrapper .avaynil-delete-btn-message-connector {
    background: transparent;
    color: #fff;
    padding: 5px 12px;
    border: none;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
  }

  .avaynil-msg-wrapper .avaynil-delete-btn-message-connector:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  }

  /* select ها */
  .avaynil-msg-wrapper #menu_app,
  .avaynil-msg-wrapper #app_names {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    min-width: 180px;
    transition: border-color 0.3s ease;
  }

  .avaynil-msg-wrapper #menu_app:focus,
  .avaynil-msg-wrapper #app_names:focus {
    border-color: #0073aa;
    outline: none;
    box-shadow: 0 0 4px rgba(0, 115, 170, 0.3);
  }

  /* ریسپانسیو موبایل */
  @media (max-width: 768px) {
    .avaynil-msg-wrapper #avaynil-msg-form table.avaynil-form-table,
    .avaynil-msg-wrapper #avaynil-msg-table {
      display: block;
      overflow-x: auto;
      white-space: nowrap;
    }

    .avaynil-msg-wrapper #avaynil-msg-form table.avaynil-form-table th,
    .avaynil-msg-wrapper #avaynil-msg-form table.avaynil-form-table td,
    .avaynil-msg-wrapper #avaynil-msg-table td,
    .avaynil-msg-wrapper #avaynil-msg-table th {
      text-align: left;
    }
  }
  /* کانتینر اختصاصی فرم حسابفا */
  .warrp-settning_api {
    max-width: 700px;
    background: #f9f9f9;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin: 20px auto;
  }

  /* عنوان فرم */
  .warrp-settning_api h2 {
    font-size: 20px;
    color: #0073aa;
    margin-bottom: 20px;
    border-bottom: 2px solid #e1e1e1;
    padding-bottom: 5px;
  }

  /* جدول فرم */
  .warrp-settning_api table.form-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
  }

  /* ردیف‌ها */
  .warrp-settning_api table.form-table th {
    width: 220px;
    text-align: left;
    padding: 10px 15px;
    font-weight: 600;
    color: #333;
    vertical-align: middle;
  }

  .warrp-settning_api table.form-table td {
    padding: 10px 15px;
  }

  /* input ها */
  .warrp-settning_api input[type="text"],
  .warrp-settning_api input[type="number"],
  .warrp-settning_api input[type="password"] {
    width: 100%;
    max-width: 350px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #ccc;
    transition: all 0.3s ease;
    font-size: 14px;
  }

  .warrp-settning_api input[type="text"]:focus,
  .warrp-settning_api input[type="number"]:focus,
  .warrp-settning_api input[type="password"]:focus {
    border-color: #0073aa;
    box-shadow: 0 0 6px rgba(0, 115, 170, 0.3);
    outline: none;
  }
  .avaynil_btn_blue,
  #csv_file,
  #submit_label_check_count,
  #upload_logo_factor,
  #btn_save_setting_whatsapp,
#btn_save_setting_bale{
   background: linear-gradient(145deg, #0073aa, #005177);
    color: #fff;
    padding: 10px 25px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    margin-top: 15px;
    transition: all 0.3s ease;
}
  #csv_file,
  .avaynil_btn_blue,
  #upload_logo_factor,
  #submit_label_check_count,
  #btn_save_setting_whatsapp,
 #btn_save_setting_bale:hover {
    background: linear-gradient(145deg, #005177, #003f5e);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  /* دکمه ثبت اطلاعات */
  .warrp-settning_api #btn_save_setting_api {
    background: linear-gradient(145deg, #0073aa, #005177);
    color: #fff;
    padding: 10px 25px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    margin-top: 15px;
    transition: all 0.3s ease;
  }

  .warrp-settning_api #btn_save_setting_api:hover {
    background: linear-gradient(145deg, #005177, #003f5e);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

  /* ریسپانسیو موبایل */
  @media (max-width: 768px) {
    .warrp-settning_api {
      padding: 15px;
    }

    .warrp-settning_api table.form-table th,
    .warrp-settning_api table.form-table td {
      display: block;
      width: 100%;
      padding: 8px 0;
    }

    .warrp-settning_api table.form-table th {
      margin-top: 10px;
    }
  }

  /* ---------- استایل دکمه جستجو ---------- */
  #debtorCreditorForm button {
    background: linear-gradient(135deg, #1e88e5, #42a5f5);
    color: #fff;
    border: none;
    padding: 10px 22px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  }

  #debtorCreditorForm button:hover {
    background: linear-gradient(135deg, #1565c0, #1e88e5);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  }

  #debtorCreditorForm button:active {
    transform: translateY(0);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  }
/* ---------- استایل دکمه جستجو ---------- */
.avaynil_form {
  padding: 2px;
  margin: 10px;
}
 .avaynil_form input[type="radio"]:checked + span {
      background: linear-gradient(145deg, #00a88f, #00997c);
      color: #fff;
      box-shadow: 0 6px 16px rgba(0, 168, 143, 0.4);
      transform: translateY(-3px);
    }
 .avaynil_form input[type="text"],
  .avaynil_form input[type="number"],
  .avaynil_form input[type="password"] {
    width: 100%;
    max-width: 350px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #ccc;
    transition: all 0.3s ease;
    font-size: 14px;
  }
  .avaynil_form input[type="text"]:focus,
  .avaynil_form input[type="number"]:focus,
  .avaynil_form input[type="password"]:focus {
    border-color: #0073aa;
    box-shadow: 0 0 6px rgba(0, 115, 170, 0.3);
    outline: none;
  }
  .avaynil_form button {
    background: linear-gradient(135deg, #1e88e5, #42a5f5);
    color: #fff;
    border: none;
    padding: 10px 22px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  }

 .avaynil_form button:hover {
    background: linear-gradient(135deg, #1565c0, #1e88e5);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  }

 .avaynil_form button:active {
    transform: translateY(0);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  }
  /* ---------- استایل دکمه‌های صفحه‌بندی DataTables ---------- */
  #debtorsCreditorsTable_paginate button {
    background: linear-gradient(135deg, #43a047, #66bb6a);
    color: #fff !important;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    margin: 2px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
  }

  #debtorsCreditorsTable_paginate button:hover {
    background: linear-gradient(135deg, #2e7d32, #43a047);
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }

  #debtorsCreditorsTable_paginate button.current {
    background: linear-gradient(135deg, #1b5e20, #2e7d32) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  }

  /* ---------- حذف border پیش‌فرض و زیباسازی کلی ---------- */
  .dataTables_wrapper .dataTables_paginate .paginate_button {
    border: none !important;
    padding: 6px 12px;
    min-width: 35px;
  }
  /* کانتینر فرم */
  #debtors-creditors-filter {
    /* max-width: 1000px; */
    width: 100%;
    margin: 20px auto;
    padding: 20px;
    background: #f5f5f5;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  /* فرم فیلتر */
  #debtorCreditorForm {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
    align-items: flex-end;
  }

  #debtorCreditorForm label {
    font-weight: bold;
    margin-bottom: 4px;
    display: block;
  }

  #debtorCreditorForm input {
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 13px;
  }

  #debtorCreditorForm button {
    background: #0073aa;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
    font-size: 14px;
  }

  #debtorCreditorForm button:hover {
    background: #005f8d;
  }
 #debtorCreditorsTable{
  overflow: auto;
 }
  /* جدول */
  #debtorCreditorsTable table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  #debtorCreditorsTable thead tr {
    background: linear-gradient(90deg, #0073aa, #005f8d);
    color: #fff;
  }

  #debtorCreditorsTable th,
  #debtorCreditorsTable td {
    padding: 10px;
    border: 1px solid #ddd;
  }

  #debtorCreditorsTable tbody tr:nth-child(even) {
    background: #f9f9f9;
  }

  #debtorCreditorsTable tbody tr:nth-child(odd) {
    background: #fff;
  }

  #debtorCreditorsTable tbody tr:hover {
    background: #e0f0ff;
  }

  /* لینک کد حساب */
  #debtorCreditorsTable a {
    color: #0073aa;
    text-decoration: none;
    font-weight: bold;
  }
  #debtorCreditorsTable a:hover {
    color: #005f8d;
  }

  /* تراز مثبت و منفی */
  .positive {
    color: green;
    font-weight: bold;
  }
  .negative {
    color: red;
    font-weight: bold;
  }

  /* صفحه‌بندی */
  #paginationControls button {
    background: #0073aa;
    color: #fff;
    border: none;
    padding: 6px 12px;
    margin: 2px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
  }
  #paginationControls button.active {
    background: #005f8d;
    font-weight: bold;
  }
  #paginationControls button:hover {
    background: #005f8d;
  }
  /* ---------- جستجوی DataTables ---------- */
  #debtorsCreditorsTable_filter input {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 13px;
    width: 200px;
    transition: all 0.3s ease;
  }

  #debtorsCreditorsTable_filter input:focus {
    border-color: #0073aa;
    box-shadow: 0 0 6px rgba(0, 115, 170, 0.3);
    outline: none;
  }

  /* ---------- انتخاب تعداد ردیف در هر صفحه ---------- */
  #debtorsCreditorsTable_length select {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 13px;
    background: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  #debtorsCreditorsTable_length select:focus {
    border-color: #0073aa;
    box-shadow: 0 0 6px rgba(0, 115, 170, 0.3);
    outline: none;
  }

  /* ---------- صفحه‌بندی DataTables ---------- */
  #debtorsCreditorsTable_paginate a.paginate_button {
    background: linear-gradient(135deg, #43a047, #66bb6a);
    color: #fff !important;
    border-radius: 6px;
    padding: 6px 12px;
    margin: 2px;
    font-weight: bold;
    text-decoration: none !important;
    display: inline-block;
    transition: all 0.3s ease;
  }

  #debtorsCreditorsTable_paginate a.paginate_button:hover {
    background: linear-gradient(135deg, #2e7d32, #43a047);
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }

  #debtorsCreditorsTable_paginate a.paginate_button.current {
    background: linear-gradient(135deg, #1b5e20, #2e7d32) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  }

  /* ---------- حذف border و فاصله اضافی ---------- */
  .dataTables_wrapper .dataTables_paginate .paginate_button {
    border: none !important;
    padding: 6px 12px;
    min-width: 35px;
  }

  /* ---------- یکدست کردن همه المنت‌ها ---------- */
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  /* جستجو */
  .custom-dt-search {
    border-radius: 6px !important;
    border: 1px solid #0073aa !important;
    padding: 5px 10px !important;
    box-shadow: 0 0 6px rgba(0, 115, 170, 0.3) !important;
    width: 200px !important;
  }

  /* انتخاب تعداد ردیف */
  .custom-dt-length {
    border-radius: 6px !important;
    border: 1px solid #0073aa !important;
    padding: 5px 10px !important;
    cursor: pointer !important;
    background: #fff !important;
  }

  /* دکمه‌های صفحه‌بندی */
  .custom-dt-page-btn {
    background: linear-gradient(135deg, #43a047, #66bb6a) !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    margin: 2px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
  }

  .custom-dt-page-btn:hover {
    background: linear-gradient(135deg, #2e7d32, #43a047) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
  }

  .custom-dt-page-btn.current {
    background: linear-gradient(135deg, #1b5e20, #2e7d32) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
  }
  .avaynil-message-form {
    /* max-width: 400px; */
    margin: 10px auto;
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    background-color: #fff;
  }

  .avaynil-message-form h3 {
    text-align: center;
    margin-bottom: 15px;
    color: #333;
  }

  .avaynil-message-form input,
  .avaynil-message-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 12px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 14px;
  }

  .avaynil-message-form button {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 6px;
    background-color: #0073aa;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
  }

  .avaynil-message-form button:hover {
    background-color: #005177;
  }

  .avaynil-message-form .avaynil-success {
    display: none;
    margin-top: 10px;
    padding: 8px;
    background-color: #d4edda;
    color: #155724;
    border-radius: 6px;
    text-align: center;
  }

  /* جدول اصلی */
  #avaynil_questions_table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  }

  /* هدر جدول */
  #avaynil_questions_table thead {
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    color: #fff;
  }

  #avaynil_questions_table thead th {
    padding: 14px 12px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
  }

  /* بدنه جدول */
  #avaynil_questions_table tbody td {
    padding: 12px;
    font-size: 14px;
    text-align: center;
    color: #374151;
    border-bottom: 1px solid #e5e7eb;
  }

  /* ردیف‌ها */
  #avaynil_questions_table tbody tr {
    transition: all 0.25s ease;
  }

  #avaynil_questions_table tbody tr:hover {
    background-color: #f9fafb;
    transform: scale(1.005);
  }

  /* ستون متن سوال */
  #avaynil_questions_table td:nth-child(3),
  #avaynil_questions_table td:nth-child(2) {
    text-align: right;
  }

  /* دکمه‌ها */
  .avaynil_questions_edit,
  .avaynil_questions_delete {
    border: none;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.25s ease;
  }

  /* دکمه ویرایش */
  .avaynil_questions_edit {
    background-color: transparent;
    color: #fff;
  }

  .avaynil_questions_edit:hover {
    box-shadow: 0 4px 10px rgba(34, 197, 94, 0.35);
  }

  /* دکمه حذف */
  .avaynil_questions_delete {
    background-color: transparent;
    color: #fff;
  }

  .avaynil_questions_delete:hover {
    background: #dc2626;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.35);
  }

  /* ریسپانسیو موبایل */
  @media (max-width: 768px) {
    #avaynil_questions_table thead {
      display: none;
    }

    #avaynil_questions_table,
    #avaynil_questions_table tbody,
    #avaynil_questions_table tr,
    #avaynil_questions_table td {
      display: block;
      width: 100%;
    }

    #avaynil_questions_table tr {
      margin-bottom: 15px;
      background: #fff;
      border-radius: 10px;
      padding: 10px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    }

    #avaynil_questions_table td {
      text-align: right;
      padding: 8px 10px;
      border-bottom: none;
      position: relative;
    }
  }

  .avaynil_notification_sms_table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  }

  /* هدر جدول */
  .avaynil_notification_sms_table th {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    color: #ffffff;
    padding: 14px 12px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
  }

  /* سلول‌ها */
  .avaynil_notification_sms_table td {
    padding: 12px 14px;
    font-size: 14px;
    color: #374151;
    text-align: center;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: middle;
  }

  /* متن پیامک */
  .avaynil_notification_sms_table td:nth-child(2) {
    text-align: right;
    line-height: 1.9;
    color: #1f2937;
  }

  /* ردیف‌ها */
  .avaynil_notification_sms_table tr {
    transition: all 0.25s ease;
  }

  .avaynil_notification_sms_table tr:hover {
    background-color: #f0f9ff;
  }

  /* دکمه‌ها */
  .avaynil_notification_delete,
  .avaynil_notification_edit,
  .avaynil_notification_newsms_edit,
  .avaynil_notification_sms_delete {
    border: none;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.25s ease;
  }

  /* ویرایش */
  .avaynil_notification_delete,
  .avaynil_notification_edit,
  .avaynil_notification_newsms_edit {
    background-color: transparent;
    color: #ffffff;
  }
  .avaynil_notification_edit:hover,
  .avaynil_notification_newsms_edit:hover {
    box-shadow: 0 4px 10px rgba(34, 197, 94, 0.35);
  }

  /* حذف */
  .avaynil_notification_sms_delete {
    background-color: transparent;
    color: #ffffff;
  }
  .avaynil_notification_delete:hover,
  .avaynil_notification_sms_delete:hover {
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.35);
  }

  /* ریسپانسیو موبایل */
  @media (max-width: 768px) {
    .avaynil_notification_sms_table,
    .avaynil_notification_sms_table tr,
    .avaynil_notification_sms_table td,
    .avaynil_notification_sms_table th {
      display: block;
      width: 100%;
    }

    .avaynil_notification_sms_table th {
      display: none;
    }

    .avaynil_notification_sms_table tr {
      background: #ffffff;
      margin-bottom: 16px;
      padding: 12px;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    }

    .avaynil_notification_sms_table td {
      text-align: right;
      padding: 8px 10px;
      border-bottom: none;
    }
  }
  .avaynil_daily_tasks_table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }

  /* هدر جدول */
  .avaynil_daily_tasks_table th {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #ffffff;
    padding: 14px 12px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
  }

  /* سلول‌ها */
  .avaynil_daily_tasks_table td {
    padding: 12px 14px;
    font-size: 14px;
    color: #374151;
    text-align: center;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: middle;
  }

  /* ستون شرح وظیفه */
  .avaynil_daily_tasks_table td:nth-child(2) {
    text-align: right;
    line-height: 1.9;
    color: #1f2937;
  }

  /* ردیف‌ها */
  .avaynil_daily_tasks_table tr {
    transition: background-color 0.25s ease, transform 0.2s ease;
  }

  .avaynil_daily_tasks_table tr:hover {
    background-color: #eef2ff;
  }

  /* دکمه‌ها */
  .avaynil_daily_tasks_edit,
  .avaynil_daily_tasks_delete {
    border: none;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.25s ease;
  }

  /* ویرایش */
  .avaynil_daily_tasks_edit {
    background: transparent;
    color: #ffffff;
  }

  .avaynil_daily_tasks_edit:hover {
    background: transparent;
    box-shadow: 0 4px 10px rgba(34, 197, 94, 0.35);
  }

  /* حذف */
  .avaynil_daily_tasks_delete {
    background: transparent;
    color: #ffffff;
  }

  .avaynil_daily_tasks_delete:hover {
    background: transparent;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.35);
  }

  /* ریسپانسیو موبایل */
  @media (max-width: 768px) {
    .avaynil_daily_tasks_table,
    .avaynil_daily_tasks_table tr,
    .avaynil_daily_tasks_table td,
    .avaynil_daily_tasks_table th {
      display: block;
      width: 100%;
    }

    .avaynil_daily_tasks_table th {
      display: none;
    }

    .avaynil_daily_tasks_table tr {
      background: #ffffff;
      margin-bottom: 16px;
      padding: 12px;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    }

    .avaynil_daily_tasks_table td {
      text-align: right;
      padding: 8px 10px;
      border-bottom: none;
    }
  }

  /* جدول اصلی */
  .table-render_warehouse_list {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  }

  /* هدر */
  .table-render_warehouse_list thead {
    background: linear-gradient(135deg, #0f766e, #14b8a6);
  }

  .table-render_warehouse_list thead th {
    padding: 14px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
  }

  /* سلول‌ها */
  .table-render_warehouse_list td {
    padding: 12px 14px;
    font-size: 14px;
    color: #374151;
    text-align: center;
    border-bottom: 1px solid #e5e7eb;
  }

  /* ردیف‌ها */
  .table-render_warehouse_list tbody tr {
    transition: all 0.25s ease;
  }

  .table-render_warehouse_list tbody tr:hover {
    background-color: #f0fdfa;
    transform: scale(1.005);
  }

  /* ستون عملیات */
  .table-render_warehouse_list td:last-child {
    white-space: nowrap;
  }

  /* دکمه‌ها */
  .table-render_warehouse_list .button {
    border: none;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }

  /* ویرایش */
  .table-render_warehouse_list .button[href*="action=edit"] {
    background: #2563eb;
    color: #ffffff;
  }

  .table-render_warehouse_list .button[href*="action=edit"]:hover {
    background: #1d4ed8;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
  }

  /* حذف */
  .table-render_warehouse_list .button[href*="action=delete"] {
    background: #ef4444;
    color: #ffffff;
  }

  .table-render_warehouse_list .button[href*="action=delete"]:hover {
    background: #dc2626;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.35);
  }

  /* ردیف خالی */
  .table-render_warehouse_list td[colspan] {
    text-align: center;
    padding: 20px;
    color: #6b7280;
  }

  /* ریسپانسیو موبایل */
  @media (max-width: 768px) {
    .table-render_warehouse_list,
    .table-render_warehouse_list thead,
    .table-render_warehouse_list tbody,
    .table-render_warehouse_list th,
    .table-render_warehouse_list td,
    .table-render_warehouse_list tr {
      display: block;
      width: 100%;
    }

    .table-render_warehouse_list thead {
      display: none;
    }

    .table-render_warehouse_list tr {
      background: #ffffff;
      margin-bottom: 16px;
      padding: 12px;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    }

    .table-render_warehouse_list td {
      text-align: right;
      padding: 8px 10px;
      border-bottom: none;
    }
  }

  /* کانتینر کلی */
  .wrap_manage_roles_form {
    background: #ffffff;
    padding: 20px 24px;
    border-radius: 14px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    max-width: 1100px;
  }

  /* تیترها */
  .wrap_manage_roles_form h2 {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
  }

  /* جداکننده */
  .wrap_manage_roles_form hr {
    margin: 28px 0;
    border: none;
    height: 1px;
    background: #e5e7eb;
  }

  /* جدول فرم */
  .form-table_manage_roles_form {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
  }

  .form-table_manage_roles_form th {
    width: 220px;
    text-align: right;
    padding: 12px 10px;
    font-weight: 500;
    color: #374151;
    vertical-align: top;
  }

  .form-table_manage_roles_form td {
    padding: 10px;
  }

  /* فیلدها */
  .form-table_manage_roles_form input[type="text"],
  .form-table_manage_roles_form textarea {
    width: 100%;
    max-width: 100%;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    padding: 8px 10px;
    font-size: 14px;
    transition: all 0.2s ease;
  }

  .form-table_manage_roles_form textarea {
    min-height: 90px;
  }

  .form-table_manage_roles_form input:focus,
  .form-table_manage_roles_form textarea:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
    outline: none;
  }

  /* دکمه ذخیره */
  .wrap_manage_roles_form .button-primary {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border: none;
    border-radius: 10px;
    padding: 6px 20px;
    font-size: 14px;
    transition: all 0.25s ease;
  }

  .wrap_manage_roles_form .button-primary:hover {
    background: linear-gradient(135deg, #4f46e5, #4338ca);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
  }

  /* جدول لیست نقش‌ها */
  .table_manage_roles_form {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  }

  /* هدر جدول */
  .table_manage_roles_form thead {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
  }

  .table_manage_roles_form th {
    padding: 14px 12px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
  }

  /* بدنه */
  .table_manage_roles_form td {
    padding: 12px;
    font-size: 14px;
    color: #374151;
    text-align: center;
    border-bottom: 1px solid #e5e7eb;
  }

  /* توضیحات و توانایی‌ها */
  .table_manage_roles_form td:nth-child(3),
  .table_manage_roles_form td:nth-child(4) {
    text-align: right;
    line-height: 1.8;
  }

  /* ردیف‌ها */
  .table_manage_roles_form tbody tr {
    transition: background-color 0.25s ease;
  }

  .table_manage_roles_form tbody tr:hover {
    background-color: #f0f9ff;
  }

  /* ستون عملیات */
  .table_manage_roles_form td:last-child {
    white-space: nowrap;
  }

  /* دکمه‌های جدول */
  .table_manage_roles_form .button {
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 13px;
    transition: all 0.25s ease;
  }

  /* ویرایش */
  .table_manage_roles_form .edit-role {
    background: #22c55e;
    border-color: #22c55e;
    color: #ffffff;
  }

  .table_manage_roles_form .edit-role:hover {
    background: #16a34a;
    border-color: #16a34a;
    box-shadow: 0 4px 10px rgba(34, 197, 94, 0.35);
  }

  /* حذف */
  .table_manage_roles_form .button-danger {
    background: #ef4444;
    border-color: #ef4444;
    color: #ffffff;
  }

  .table_manage_roles_form .button-danger:hover {
    background: #dc2626;
    border-color: #dc2626;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.35);
  }

  /* ردیف خالی */
  .table_manage_roles_form td[colspan] {
    text-align: center;
    color: #6b7280;
    padding: 20px;
  }

  /* ریسپانسیو */
  @media (max-width: 768px) {
    .form-table_manage_roles_form th {
      width: 100%;
      display: block;
      padding-bottom: 6px;
    }

    .form-table_manage_roles_form td {
      display: block;
      padding-bottom: 12px;
    }

    .table_manage_roles_form,
    .table_manage_roles_form thead,
    .table_manage_roles_form tbody,
    .table_manage_roles_form th,
    .table_manage_roles_form td,
    .table_manage_roles_form tr {
      display: block;
      width: 100%;
    }

    .table_manage_roles_form thead {
      display: none;
    }

    .table_manage_roles_form tr {
      margin-bottom: 16px;
      background: #ffffff;
      padding: 12px;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    }

    .table_manage_roles_form td {
      text-align: right;
      border-bottom: none;
    }
  }
  /* کانتینر اصلی */
  .wrap-black-list {
    background: #ffffff;
    padding: 20px 24px;
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
    max-width: 900px;
  }

  /* عنوان صفحه */
  .wrap-black-list h1 {
    margin: 0 0 16px;
    font-size: 22px;
    font-weight: 600;
    color: #1f2937;
  }

  /* دکمه افزودن */
  #add-new-block {
    margin-bottom: 18px;
    border-radius: 10px;
    padding: 6px 18px;
    font-size: 14px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border: none;
    transition: all 0.25s ease;
  }

  #add-new-block:hover {
    background: linear-gradient(135deg, #4f46e5, #4338ca);
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
  }

  /* جدول */
  .table_wrap-black-list {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  }

  /* هدر */
  .table_wrap-black-list thead {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
  }

  .table_wrap-black-list th {
    padding: 14px 12px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
  }

  /* سلول‌ها */
  .table_wrap-black-list td {
    padding: 12px;
    font-size: 14px;
    color: #374151;
    text-align: center;
    border-bottom: 1px solid #e5e7eb;
  }

  /* شماره موبایل */
  .table_wrap-black-list td:nth-child(2) {
    letter-spacing: 1px;
  }

  /* ردیف‌ها */
  .table_wrap-black-list tbody tr {
    transition: background-color 0.25s ease;
  }

  .table_wrap-black-list tbody tr:hover {
    background-color: #f0f9ff;
  }

  /* ستون عملیات */
  .table_wrap-black-list td:last-child {
    white-space: nowrap;
  }

  /* دکمه‌های عملیات */
  .blocklist-edit,
  .blocklist-delete {
    border-radius: 8px;
    padding: 5px 14px;
    font-size: 13px;
    transition: all 0.25s ease;
  }

  /* ویرایش */
  .blocklist-edit {
    background: #22c55e;
    border-color: #22c55e;
    color: #ffffff;
  }

  .blocklist-edit:hover {
    background: #16a34a;
    border-color: #16a34a;
    box-shadow: 0 4px 10px rgba(34, 197, 94, 0.35);
  }

  /* حذف */
  .blocklist-delete {
    background: #ef4444;
    border-color: #ef4444;
    color: #ffffff;
  }

  .blocklist-delete:hover {
    background: #dc2626;
    border-color: #dc2626;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.35);
  }

  /* حالت خالی */
  .table_wrap-black-list td[colspan] {
    text-align: center;
    padding: 20px;
    color: #6b7280;
  }

  /* ریسپانسیو */
  @media (max-width: 768px) {
    .table_wrap-black-list,
    .table_wrap-black-list thead,
    .table_wrap-black-list tbody,
    .table_wrap-black-list th,
    .table_wrap-black-list td,
    .table_wrap-black-list tr {
      display: block;
      width: 100%;
    }

    .table_wrap-black-list thead {
      display: none;
    }

    .table_wrap-black-list tr {
      margin-bottom: 16px;
      padding: 12px;
      border-radius: 12px;
      background: #ffffff;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    }

    .table_wrap-black-list td {
      text-align: right;
      border-bottom: none;
    }
  }
  .edt-debtorCreditorsTable {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
  }

  .edt-debtorCreditorsTable:hover {
    background: linear-gradient(135deg, #4f46e5, #4338ca);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
  }

  .edt-debtorCreditorsTable:active {
    transform: translateY(1px);
  }
  /* استایل کلی جدول */
  .avaynil_personel_nslink_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: #333;
    margin-top: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  /* هدر جدول */
  .avaynil_personel_nslink_table thead {
    background-color: #0073aa;
    color: #fff;
  }

  .avaynil_personel_nslink_table th {
    padding: 10px;
    text-align: center;
    border: 1px solid #ddd;
    font-weight: 600;
  }

  /* ردیف‌های جدول */
  .avaynil_personel_nslink_table tbody tr {
    background-color: #f9f9f9;
    transition: background 0.2s;
  }

  .avaynil_personel_nslink_table tbody tr:nth-child(even) {
    background-color: #fff;
  }

  /* هاور روی ردیف */
  .avaynil_personel_nslink_table tbody tr:hover {
    background-color: #e0f7ff;
  }

  /* سلول‌های جدول */
  .avaynil_personel_nslink_table td {
    padding: 8px;
    border: 1px solid #ddd;
    text-align: center;
    vertical-align: middle;
    word-break: break-word; /* جلوگیری از شکستن جدول */
  }

  /* دکمه‌ها */
  .avaynil_personel_nslink_table button {
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
  }

  /* ریسپانسیو برای موبایل */
  @media screen and (max-width: 1024px) {
    .avaynil_personel_nslink_table thead {
      display: none; /* هدر مخفی می‌شود */
    }
    .avaynil_personel_nslink_table,
    .avaynil_personel_nslink_table tbody,
    .avaynil_personel_nslink_table tr,
    .avaynil_personel_nslink_table td {
      display: block;
      width: 100%;
    }
    .avaynil_personel_nslink_table tr {
      margin-bottom: 15px;
      border-bottom: 2px solid #ddd;
    }
    .avaynil_personel_nslink_table td {
      text-align: right;
      padding-left: 50%;
      position: relative;
      border: none;
      border-bottom: 1px solid #eee;
    }
    .avaynil_personel_nslink_table td::before {
      content: attr(data-label);
      position: absolute;
      left: 15px;
      width: 45%;
      padding-left: 10px;
      font-weight: 600;
      text-align: left;
    }
  }

  /* مدال */
  .avaynil_daryaft_helper_modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    overflow-y: auto;
    padding: 40px 0;
  }

  /* محتوای مدال */
  .avaynil_daryaft_helper_modal_content {
    max-width: 900px;
    margin: auto;
    background: #fdfdfd;
    border-radius: 16px;
    padding: 20px 30px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
    animation: avaynil_daryaft_helper_fadein 0.3s ease-in-out;
  }

  /* انیمیشن باز شدن */
  @keyframes avaynil_daryaft_helper_fadein {
    from {
      opacity: 0;
      transform: translateY(-30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* دکمه بستن */
  .avaynil_daryaft_helper_close {
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
  }

  /* عنوان مدال */
  .avaynil_daryaft_helper_modal_title {
    margin-bottom: 15px;
    color: #6c5ce7;
  }

  /* فیلد جستجو */
  .avaynil_daryaft_helper_input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #ccc;
    margin-bottom: 15px;
  }

  /* جدول */
  .avaynil_daryaft_helper_table_wrapper {
    max-height: 400px;
    overflow-y: auto;
    border-radius: 12px;
    border: 1px solid #ddd;
  }

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

  .avaynil_daryaft_helper_table th,
  .avaynil_daryaft_helper_table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #eee;
  }

  .avaynil_daryaft_helper_table th {
    background: #6c5ce7;
    color: #fff;
    position: sticky;
    top: 0;
  }

  .avaynil_daryaft_helper_table tr:hover {
    background: #f0f0ff;
  }

  /* دکمه باز کردن */
  .avaynil_daryaft_helper_btn {
    background: #6c5ce7;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 12px;
    cursor: pointer;
    transition: 0.3s;
  }

  .avaynil_daryaft_helper_btn:hover {
    background: #5941c6;
  }
  /* استایل پیش‌فرض ردیف */
  .bank_select_hlp {
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
  }

  /* وقتی موس روی ردیف می‌رود */
  .bank_select_hlp:hover {
    background-color: #f0f0f0;
    color: #333;
  }

  /* وقتی ردیف انتخاب شده */
  .bank_select_hlp.active {
    background-color: #6c5ce7;
    color: #fff;
  }

  .avaynil_bank_edit {
    background-color: transparent;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .avaynil_bank_edit:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(79, 70, 229, 0.35);
  }

  .avaynil_bank_edit:active {
    transform: translateY(0);
    box-shadow: 0 3px 8px rgba(79, 70, 229, 0.25);
  }
  .avaynil-bank-form {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    max-width: 900px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  }
  .avaynil-bank-form-div {
    align-items: center;
    text-align: center;
    align-content: center;
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    max-width: 1000px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  }
  /* ردیف‌ها */
  .avaynil-form-row {
    margin-bottom: 18px;
  }

  /* گرید ۳ ستونه */
  .avaynil-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  /* گروه فیلد */
  .avaynil-form-group {
    display: flex;
    flex-direction: column;
  }

  .avaynil-form-group label {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #374151;
  }

  /* input / textarea / select */
  .avaynil-form-group input,
  .avaynil-form-group textarea,
  .avaynil-form-group select {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 13px;
    transition: all 0.2s ease;
  }

  .avaynil-form-group input:focus,
  .avaynil-form-group textarea:focus,
  .avaynil-form-group select:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
    outline: none;
  }

  /* پیش‌نمایش تصویر */
  .avaynil-image-preview {
    max-height: 100%; /* حداکثر ارتفاع */
    width: 100%;
    border: 1px dashed #c7c7c7;
    border-radius: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    background: #fafafa;
    overflow: hidden; /* برش تصویر بزرگ */
    object-fit: contain; /* تصویر درون کادر مناسب نمایش داده شود */
  }

  .avaynil-image-preview img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* دکمه‌ها */
  .avaynil-btn-primary {
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    color: #fff;
    border: none;
    padding: 10px 26px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.25s ease;
  }

  .avaynil-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.35);
  }

  .avaynil-btn-secondary {
    background: #eef2ff;
    color: #3730a3;
    border: 1px solid #c7d2fe;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
  }

  /* اکشن‌ها */
  .avaynil-form-actions {
    text-align: left;
  }

  .avaynil_bank_table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  }

  .avaynil_bank_table th,
  .avaynil_bank_table td {
    padding: 10px 12px;
    text-align: center;
    font-size: 13px;
    border-bottom: 1px solid #e5e7eb;
  }

  .avaynil_bank_table th {
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    color: #fff;
    font-weight: 600;
  }

  .avaynil_bank_table tr:nth-child(even) {
    background: #f9f9f9;
  }

  .avaynil_bank_table tr:hover {
    background: #eef2ff;
    transition: all 0.2s ease;
  }

  /* دکمه‌ها */
  .avaynil_bank_delete {
    border: none;
    border-radius: 6px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
  }

  .avaynil_bank_delete {
    background: transparent;
    color: #fff;
  }


  /* ====== AVAYNIL UNIQUE LABEL FORM ====== */
  .avnl-label-wrap {
    width: 100%;
    max-width: 430px;
    margin: 24px auto;
    padding: 22px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
    border: 1px solid #eef1f4;
  }

  .avnl-label-field {
    margin-bottom: 18px;
  }

  .avnl-label-title {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 6px;
  }

  .avnl-label-input {
    width: 100%;
    padding: 11px 14px;
    font-size: 14px;
    border-radius: 9px;
    border: 1px solid #dcdfe3;
    background: #fafafa;
    transition: all 0.25s ease;
  }

  .avnl-label-input:focus {
    background: #fff;
    border-color: #2271b1;
    box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.15);
    outline: none;
  }

  /* ===== COLOR SELECTOR ===== */
  .avnl-color-group {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 8px;
  }

  .avnl-color-item input {
    display: none;
  }

  .avnl-color-box {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    cursor: pointer;
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
  }

  .avnl-color-box::after {
    content: "✔";
    font-size: 15px;
    color: #fff;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease;
  }

  .avnl-color-item input:checked + .avnl-color-box {
    border-color: #34495e;
    transform: scale(1.08);
  }

  .avnl-color-item input:checked + .avnl-color-box::after {
    opacity: 1;
    transform: scale(1);
  }

  /* ===== BUTTON ===== */
  .avnl-label-submit {
    width: 100%;
    margin-top: 18px;
    padding: 12px;
    border-radius: 11px;
    border: none;
    background: linear-gradient(135deg, #2271b1, #135e96);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .avnl-label-submit:hover {
    background: linear-gradient(135deg, #135e96, #0a4b78);
    transform: translateY(-1px);
  }

  .avnl-label-submit:active {
    transform: translateY(0);
  }
  /* ===== AVAYNIL LABEL TABLE – UNIQUE STYLE ===== */
  .avaynil_label_table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  }

  /* هدر جدول */
  .avaynil_label_table th {
    background: linear-gradient(135deg, #2271b1, #135e96);
    color: #fff;
    padding: 12px 10px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }

  /* سلول‌ها */
  .avaynil_label_table td {
    padding: 10px 8px;
    font-size: 13px;
    color: #2c3e50;
    text-align: center;
    border-bottom: 1px solid #eef1f4;
    background: #fff;
  }

  /* ردیف‌های زوج */
  .avaynil_label_table tr:nth-child(even) td {
    background: #f9fbfd;
  }

  /* هاور ردیف */
  .avaynil_label_table tr:hover td {
    background: #eef6ff;
    transition: background 0.2s ease;
  }

  /* ستون نام */
  .avaynil_label_table td:nth-child(2) {
    font-weight: 700;
  }

  /* ===== COLOR BADGE ===== */
  .avnl-label-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
  }

  .avnl-red {
    background: #e74c3c;
  }
  .avnl-green {
    background: #2ecc71;
  }
  .avnl-orange {
    background: #f39c12;
  }
  .avnl-white {
    background: #ecf0f1;
    color: #2c3e50;
  }

  /* ===== ACTION BUTTONS ===== */
  .avaynil_label_edit,
  .avaynil_label_delete {
    border: none;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
  }

  .avaynil_label_edit {
    background-color: transparent;
    color: #fff;
  }

  .avaynil_label_edit:hover {
    transform: translateY(-1px);
  }

  .avaynil_label_delete {
    background-color: transparent;
    color: #fff;
  }

  .avaynil_label_delete:hover {
    transform: translateY(-1px);
  }
  /* ===============================
    Avaynil Label Table – Modern UI
    =============================== */

  .avaynil_label_table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  }

  /* ---------- Header ---------- */
  .avaynil_label_table thead tr,
  .avaynil_label_table tr:first-child {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
  }

  .avaynil_label_table th {
    padding: 14px 12px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    border-bottom: none;
  }

  /* ---------- Body Rows ---------- */
  .avaynil_label_table td {
    padding: 12px 10px;
    font-size: 13px;
    color: #1f2937;
    text-align: center;
    border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
    transition: all 0.25s ease;
  }

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

  /* ---------- Hover Effect ---------- */
  .avaynil_label_table tbody tr:hover td {
    background: #f1f5f9;
    transform: scale(1.01);
  }

  /* ---------- Row Number ---------- */
  .avaynil_label_table td:first-child {
    font-weight: 600;
    color: #2563eb;
  }

  /* ---------- Color Label ---------- */
  .avaynil_label_table td span {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
  }

  /* ---------- Buttons ---------- */

  /* ---------- Responsive ---------- */
  @media (max-width: 768px) {
    .avaynil_label_table th,
    .avaynil_label_table td {
      font-size: 12px;
      padding: 10px 6px;
    }

    .avaynil_label_edit,
    .avaynil_label_delete {
      padding: 5px 10px;
      font-size: 11px;
    }
  }

  /* ===================================================
    Avaynil Permission – Classic Admin Style
    Wrapper: .avaynil-permission-classic
    =================================================== */

  .avaynil-permission-classic {
    color: #1f2937;
  }

  /* ---------- Card ---------- */
  .avaynil-permission-classic .avaynil-card-role {
    background: linear-gradient(180deg, #ffffff, #f9fafb);
    padding: 24px;
    border-radius: 18px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06), inset 0 1px 0 #ffffff;
  }

  /* ---------- Title ---------- */
  .avaynil-permission-classic h5 {
    margin: 0 0 15px;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 10px;
  }

  /* ---------- Field ---------- */
  .avaynil-permission-classic .field {
    margin-bottom: 18px;
  }

  .avaynil-permission-classic .field label {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 6px;
    display: block;
    color: #374151;
  }

  .avaynil-permission-classic .field select {
    width: 100%;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    font-size: 13px;
    transition: all 0.25s ease;
  }

  .avaynil-permission-classic .field select:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
    outline: none;
  }

  /* ---------- Permissions Box ---------- */
  .avaynil-permission-classic .permissions-list {
    margin-top: 20px;
    max-height: 550px;
    overflow-y: auto;
    background: #f8fafc;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
  }

  /* ---------- Permission Item ---------- */
  .avaynil-permission-classic .permission-item {
    margin: 6px 0;
    transition: all 0.2s ease;
  }

  /* Parent */
  .avaynil-permission-classic .permission-item.level-0 {
    background: linear-gradient(90deg, #eef2ff, #e0e7ff);
    padding: 10px 12px;
    border-radius: 12px;
    font-weight: 700;
    border: 1px solid #c7d2fe;
  }

  /* Child */
  .avaynil-permission-classic .permission-item.level-1 {
    padding: 6px 8px;
    font-weight: 500;
  }

  /* Sub Child */
  .avaynil-permission-classic .permission-item.level-2 {
    font-size: 13px;
    color: #374151;
    padding: 4px 6px;
  }

  /* Hover */
  .avaynil-permission-classic .permission-item:hover {
    background: rgba(79, 70, 229, 0.05);
    border-radius: 8px;
  }

  /* ---------- Checkbox ---------- */
  .avaynil-permission-classic input[type="checkbox"] {
    accent-color: #4f46e5;
    margin-left: 6px;
    cursor: pointer;
  }

  /* ---------- Permission Title ---------- */
  .avaynil-permission-classic .perm-title {
    margin-right: 4px;
  }

  /* ---------- Permission Type ---------- */
  .avaynil-permission-classic .perm-type {
    font-size: 11px;
    color: #6b7280;
    margin-right: 4px;
  }

  /* ---------- Button ---------- */
  .avaynil-permission-classic .avaynil-btn {
    margin-top: 22px;
    background: linear-gradient(135deg, #4f46e5, #4338ca);
    color: #ffffff;
    padding: 12px 30px;
    border: none;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.35);
  }

  .avaynil-permission-classic .avaynil-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(79, 70, 229, 0.45);
  }

  /* ---------- Scrollbar ---------- */
  .avaynil-permission-classic .permissions-list::-webkit-scrollbar {
    width: 6px;
  }

  .avaynil-permission-classic .permissions-list::-webkit-scrollbar-thumb {
    background: #c7d2fe;
    border-radius: 10px;
  }

  /***********************************/
  /* دکمه بازکننده مودال */
  .avaynil-open-btn {
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: #fff;
    border: none;
    padding: 10px 22px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    box-shadow: 0 6px 14px rgba(124, 58, 237, 0.35);
  }
  .avaynil-open-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
  }

  /* Overlay */
  .avaynil-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    z-index: 99991;
  }

  /* باکس مودال */
  .avaynil-modal-box {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 520px;
    max-width: 95%;
    background: #fff;
    border-radius: 18px;
    transform: translate(-50%, -55%);
    opacity: 0;
    visibility: hidden;
    transition: 0.35s;
    z-index: 99999;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
  }

  /* فعال شدن مودال */
  .avaynil-modal-overlay.active,
  .avaynil-modal-box.active {
    opacity: 1;
    visibility: visible;
  }

  .avaynil-modal-box.active {
    transform: translate(-50%, -50%);
  }

  /* هدر مودال */
  .avaynil-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
  }

  .avaynil-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
  }

  .avaynil-modal-close {
    font-size: 22px;
    cursor: pointer;
  }

  /* بدنه */
  .avaynil-modal-body {
    padding: 20px;
  }

  /* اطلاعات سطوح */
  .avaynil-info-levels {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 15px;
  }

  .avaynil-info-levels span {
    background: #f3f4f6;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
  }

  /* فیلدها */
  .avaynil-field {
    margin-bottom: 14px;
  }

  .avaynil-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
  }

  .avaynil-field select,
  .avaynil-field input {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #ddd;
  }

  /* اکشن */
  .avaynil-actions {
    text-align: center;
    margin-top: 18px;
  }

  .avaynil-save-btn {
    background: #10b981;
    color: #fff;
    padding: 10px 30px;
    border-radius: 12px;
    border: none;
    font-weight: 700;
    cursor: pointer;
  }
  .dataTables-top-container {
    display: flex;
    justify-content: space-between;
    /* فاصله بین دو طرف */
    align-items: center;
    /* وسط‌چین عمودی */
    margin-bottom: 10px;
    gap: 10px;
    /* فاصله بین دو عنصر */
  }

  /* تنظیم طول جدول */
  #debtorsCreditorsTable_length {
    width: auto;
    /* اجازه می‌دهیم محتوا تعیین شود */
  }

  /* تنظیم فیلتر جدول */
  #debtorsCreditorsTable_filter {
    width: auto;
    display: flex;
    justify-content: flex-end;
  }

  #debtorsCreditorsTable_filter input {
    width: 250px;
    padding: 5px 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    transition: all 0.2s;
  }

  #debtorsCreditorsTable_filter input:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 5px rgba(79, 70, 229, 0.5);
    outline: none;
  }
  .avyn-account-card {
    max-width: 600px;
    background: #ffffff;
    padding: 25px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    animation: fadeUp 0.3s ease;
  }

  @keyframes fadeUp {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .avyn-account-card h2 {
    margin-bottom: 20px;
    color: #111827;
  }

  /* =========================
    FORM
  ========================= */
  .avyn-form-group {
    margin-bottom: 15px;
  }

  .avyn-form-group label {
    display: block;
    margin-bottom: 6px;
    color: #374151;
    font-weight: 600;
  }

  .avyn-form-group input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
  }

  .avyn-form-group input:focus {
    outline: none;
    border-color: #22c55e;
  }

  /* =========================
    BUTTONS
  ========================= */
  .avyn-btn {
    background: #22c55e;
    color: #fff;
    padding: 10px 18px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 15px;
    transition: 0.25s;
  }

  .avyn-btn:hover {
    background: #16a34a;
  }

  .avyn-logout {
    display: inline-block;
    margin-top: 15px;
    color: #dc2626;
    text-decoration: none;
    font-weight: 600;
  }

  /* =========================
    MESSAGE
  ========================= */

  .avyn-success {
    background: #dcfce7;
    color: #166534;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 15px;
  }
  .btn_invoice_number_log {
    background: #f0e76e;
    color: #070707;
    border-radius: 10px;
  }
  .avaynil-clock-box {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    /* border-radius: 20px 0 20px 0; */
    /* background: linear-gradient(135deg, #0ea5e9, #2563eb); */
    color: #000;
    font-size: 10px;
    font-weight: 500;
    /* box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35); */
    transition: all 0.3s ease;
    white-space: nowrap;
    /* transform: translateY(-1px); */
    /* box-shadow: 0 10px 25px rgba(37, 99, 235, 0.45); */
  }

  /* CLOCK ICON */
  .avaynil-clock-icon {
    font-size: 16px;
    opacity: 0.9;
  }

  /* CLOCK TEXT */
  #avaynilLiveClock {
    direction: rtl;
    text-align: right;
    line-height: 1.6;
  }
  .av-tooltip{
    position:fixed; background:#333; color:#fff; padding:5px 8px;
    font-size:12px; border-radius:5px; z-index:99999;
  }
  .av-select-wrapper{position:relative}
  .av-select-search{
    width:100%; padding:8px; border:1px solid #ccc; border-radius:6px
  }
  .av-select-list{
    display:none; position:absolute; width:100%; max-height:180px; overflow:auto;
    background:#fff; border:1px solid #ddd; border-top:none; z-index:9999
  }
  .av-select-item{padding:6px; cursor:pointer}
  .av-select-item:hover{background:#f2f2f2}

  .av-wrapper{position:relative;width:100%}
  .av-display{border:1px solid #ccc;padding:6px;border-radius:8px;background:#fff;cursor:pointer;min-height:38px}
  .av-dropdown{position:absolute;right:0;left:0;top:100%;background:#fff;border:1px solid #ccc;border-radius:8px;margin-top:4px;z-index:9999;display:none;max-height:220px;overflow:auto}
  .av-dropdown input{width:100%;padding:6px;border:0;border-bottom:1px solid #eee;outline:none}
  .av-item{padding:6px 10px;cursor:pointer}
  .av-item:hover{background:#f2f2f2}
  .av-item.active{background:#dbeafe}

  .av-tags{margin-top:6px}
  .av-tag{display:inline-flex;align-items:center;background:#2563eb;color:#fff;padding:4px 8px;border-radius:14px;margin:2px;font-size:12px}
  .av-tag i{margin-right:6px;cursor:pointer;font-style:normal}
  .av-pagination {
    margin-top: 10px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }

  .av-pagination .av-page-btn {
    padding: 5px 12px;
    border: 1px solid #ccc;
    background-color: #f5f5f5;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.2s;
  }

  .av-pagination .av-page-btn:hover:not(:disabled) {
    background-color: #0073aa;
    color: #fff;
    border-color: #0073aa;
  }

  .av-pagination .av-page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .av-pagination .av-page-info {
    font-weight: bold;
    margin: 0 10px;
  }
  /* استایل لاگین */
  .av-login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
  }

  #av-login-form {
    width: 360px;
    padding: 40px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    color: #fff;
    transition: all 0.3s ease;
  }

  #av-login-form h2 {
    text-align: center;
    margin-bottom: 30px;
    font-weight: 600;
  }

  .av-input {
    position: relative;
    margin-bottom: 25px;
  }

  .av-input input {
    width: 100%;
    padding: 12px 10px;
    background: transparent;
    border: none;
    border-bottom: 2px solid #aaa;
    color: #fff;
    outline: none;
  }

  .av-input label {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    transition: 0.3s;
    color: #aaa;
  }

  .av-input input:focus + label,
  .av-input input:valid + label {
    top: -5px;
    font-size: 12px;
    color: #00ff99;
  }

  #av-login-form button {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 30px;
    background: linear-gradient(45deg, #00ff99, #00c6ff);
    color: #000;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.3s;
  }

  #av-login-form button:hover {
    transform: scale(1.05);
  }

  .av-login-message {
    text-align: center;
    margin-top: 15px;
  }

  .av-login-success {
    padding: 20px;
    background: #e7fff1;
    border-radius: 10px;
    color: #0a7a43;
    text-align: center;
  }

  /* کل داشبورد */
  /* .avaynil-dashboard-fixed {
    display: flex;
    width: 1200px; 
    height: 80vh; 
    margin: 20px auto;
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
  } */

  

  /* دکمه‌های تب */
  .avaynil-tab-button {
    display: block;
    width: 100%;
    margin-bottom: 5px;
    padding: 10px;
    text-align: right;
    border: none;
    background: #f9f9f9;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
  }
  .avaynil-tab-button.active,
  .avaynil-tab-button:hover {
    background: #e0f0ff;
  }

  /* محتوای تب‌ها
  .avaynil-dashboard-content {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    /* فقط محتوای تب اسکرول شود */
    /* position: relative; */
  /* }  */

  /* لودر */
  .avaynil-tab-loader {
    display: none;
    text-align: center;
    padding: 50px;
    font-size: 16px;
  }
  /* STATUS BAR */
  .avaynil-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: #f8fafc;
    border-bottom: 1px solid #e3e8ef;
    position: sticky;
    top: 0;
    z-index: 10;
  }

  /* USER INFO */
  .avaynil-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .avaynil-user-avatar img {
    border-radius: 50%;
    border: 2px solid #dbeafe;
  }

  .avaynil-user-meta {
    line-height: 1.4;
  }

  .avaynil-user-name {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
  }

  .avaynil-user-role {
    font-size: 12px;
    color: #6b7280;
  }

  /* STATUS */
  .avaynil-status-right {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #16a34a;
  }

  .avaynil-status-online {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
  }

  /* CONTENT */
  .avaynil-tab-inner {
    padding: 20px 10px;
  }
  /* RIGHT SIDE */
  .avaynil-status-right {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  /* LOGOUT BUTTON */
  .avaynil-logout-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.3s ease;
  }

  .avaynil-logout-btn .dashicons {
    font-size: 16px;
  }

  .avaynil-logout-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(220, 38, 38, 0.4);
    color: #fff;
  }
  .avaynil_mainmenu_form {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 15px;
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
  }
  .avaynil_mainmenu_form input[type="text"] {
    width: 80%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
  }
  .avaynil_mainmenu_form input[type="submit"] {
    background-color: #28a745;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }
  .avaynil_mainmenu_table {
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
    border-collapse: collapse;
  }
  .avaynil_mainmenu_table th,
  .avaynil_mainmenu_table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
  }
  .avaynil_mainmenu_delete {
    background-color: #dc3545;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }
  .avaynil_mainmenu_submit {
    background-color: #f41c1c;
    border: 2px solid white; /* اضافه کردن بوردر سفید */
    margin: 1px;
    padding: 2px 5px;
    border-radius: 10px;
    color: rgb(255, 255, 255);
    width: auto;
    height: 40px;
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    transition: background-color 0.3s, border-color 0.3s;
  }

  .avaynil_mainmenu_submit:hover {
    background-color: #f5b77a;
    border-color: white; /* حفظ رنگ سفید در حالت هاور */
  }
    #reminder-log-table {
              width: 100%;
              border-collapse: collapse;
              margin-top: 15px;
          }

          #reminder-log-table th,
          #reminder-log-table td {
              padding: 10px;
              border: 1px solid #ddd;
              text-align: right;
          }

          #reminder-log-table td {
              font-size: 12px
          }

          #reminder-log-table th {
              background-color: #f0f0f0;
              font-weight: bold;
              font-size: 14px
          }

          #reminder-search {
              width: 100%;
              padding: 8px;
              margin-bottom: 10px;
              border: 1px solid #ccc;
              border-radius: 5px;
          }
    .avaynil-drag-zone {
    border: 2px dotted #0d6efd; /* نقطه چین primary */
    padding: 1rem;             /* معادل p-3 */
    text-align: center;        /* text-center */
    border-radius: 8px;
    transition: all 0.3s ease;
}
.avaynil-btn-wrapper {
    margin-bottom: 1rem;       /* mb-3 */
    display: flex;
    flex-direction: column;
    align-items: center;       /* justify-content-center */
}

.avaynil-btn {
    width: 100%;               /* w-100 */
    padding: 10px 14px;
    margin-bottom: 0.5rem;     /* mb-2 */
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* دکمه خاکستری */
.avaynil-btn-secondary {
    background-color: #6c757d;
    color: #fff;
}

.avaynil-btn-secondary:hover {
    background-color: #5c636a;
}

/* دکمه آبی روشن */
.avaynil-btn-info {
    background-color: #0dcaf0;
    color: #000;
}

.avaynil-btn-info:hover {
    background-color: #31d2f2;
}
    
.avaynil-btn-search {
    background-color: #60972f;
    color: #fff;
}

.avaynil-btn-search:hover {
    background-color: #66816e;
}
.amountField_hrf
{
  font-size: 10px;
  color:blue;
}
.table-header-controls {
    display: flex; /* استفاده از flexbox برای چیدمان افقی */
    justify-content: space-between; /* توزیع فضا بین دکمه ها و عنوان */
    align-items: center; /* هم تراز کردن عمودی آیتم ها */
    margin-bottom: 15px; /* فاصله بین کنترل ها و جدول */
    flex-wrap: wrap; /* اجازه به رفتن به خط بعدی در صورت کمبود فضا */
}

.table-header-controls .buttons-left {
    display: flex; /* چیدمان دکمه ها در کنار هم */
    gap: 10px; /* فاصله بین دکمه ها */
    flex-wrap: wrap; /* اجازه به رفتن به خط بعدی برای دکمه ها */
}

.table-header-controls .title-right {
    display: flex;
    align-items: center;
    gap: 5px; /* فاصله بین لیبل و اسپَن */
}

/* اطمینان از اینکه دکمه ها فضای کافی دارند */
.table-header-controls .buttons-left button {
    flex-shrink: 0; /* جلوگیری از کوچک شدن دکمه ها */
}

/* استایل های مربوط به خود جدول */
.avaynil_notification_sms_table {
    width: 100%;
    border-collapse: collapse; /* برای جلوگیری از فاصله بین سلول ها */
    /* سایر استایل های جدول شما */
}

.avaynil_notification_sms_table th,
.avaynil_notification_sms_table td {
    border: 1px solid #ddd; /* مثال: حاشیه برای سلول ها */
    padding: 8px;
    text-align: right; /* هم تراز کردن متن به راست */
}

.avaynil_notification_sms_table th {
    background-color: #f2f2f2; /* مثال: پس زمینه هدر جدول */
}

/* اطمینان از اینکه فرم اصلی avaynil_form به درستی نمایش داده شود */
.avaynil_form {
   /* استایل های فرم شما */
}

/* اگر می خواهید دکمه ها در موبایل به زیر هم بروند */
@media (max-width: 768px) {
    .table-header-controls {
        flex-direction: column; /* چیدمان ستونی در صفحات کوچک */
        align-items: flex-start; /* هم تراز کردن به چپ در حالت ستونی */
    }
    .table-header-controls .buttons-left {
        margin-bottom: 10px; /* فاصله بین دکمه ها و عنوان */
        justify-content: flex-start; /* دکمه ها در سمت چپ */
    }
    .table-header-controls .title-right {
        width: 100%; /* عنوان تمام عرض را بگیرد */
        justify-content: flex-start; /* عنوان در سمت راست (که حالا در پایین دکمه هاست) */
    }
}
  .monthly-shamsi-calendar,
        .custom-table-calendar {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            direction: rtl;
            /* برای راست به چپ بودن */
            text-align: center;
        }

        .monthly-shamsi-calendar caption,
        .custom-table-calendar caption {
            font-size: 1.4em;
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }

        .monthly-shamsi-calendar th,
        .custom-table-calendar th {
            background-color: #f2f2f2;
            padding: 8px;
            border: 1px solid #ddd;
            color: #555;
        }

        .monthly-shamsi-calendar td,
        .custom-table-calendar td {
            padding: 10px 5px;
            border: 1px solid #eee;
            vertical-align: top;
            height: 80px;
            /* ارتفاع سلول‌ها */
            position: relative;
            /* برای قرار دادن محتوا */
        }

        .monthly-shamsi-calendar .day-header,
        .custom-table-calendar .day-header {
            font-weight: bold;
            position: absolute;
            top: 5px;
            right: 5px;
            color: #888;
        }

        .monthly-shamsi-calendar .day-name-label,
        .custom-table-calendar .day-name-label {
            font-size: 0.8em;
            color: #a00;
            margin-top: 25px;
            /* فاصله از شماره روز */
            display: block;
        }

        .monthly-shamsi-calendar .day-events,
        .custom-table-calendar .day-events {
            list-style: none;
            padding: 0;
            margin: 0;
            font-size: 0.75em;
            margin-top: 35px;
            /* فاصله برای نمایش رویدادها */
            text-align: right;
            /* متن رویدادها راست چین */
            padding-right: 5px;
        }

        .monthly-shamsi-calendar .day-events li,
        .custom-table-calendar .day-events li {
            margin-bottom: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .monthly-shamsi-calendar .day-events li a,
        .custom-table-calendar .day-events li a {
            color: #007bff;
            text-decoration: none;
        }

        .monthly-shamsi-calendar .day-events li a:hover,
        .custom-table-calendar .day-events li a:hover {
            text-decoration: underline;
        }

        .monthly-shamsi-calendar .calendar-empty,
        .custom-table-calendar .calendar-empty {
            background-color: #f9f9f9;
            border: none;
        }

        .monthly-shamsi-calendar .calendar-holiday,
        .custom-table-calendar .calendar-holiday {
            background-color: #ffebee;
            /* رنگ پس‌زمینه قرمز روشن برای تعطیلات */
        }

        .monthly-shamsi-calendar .current-day,
        .custom-table-calendar .current-day {
            background-color: #ebfff3;
            /* رنگ پس‌زمینه قرمز روشن برای تعطیلات */
        }

        .monthly-shamsi-calendar .calendar-weekend,
        .custom-table-calendar .calendar-weekend {
            background-color: #fff3e0;
            /* رنگ پس‌زمینه نارنجی روشن برای آخر هفته */
        }

        .monthly-shamsi-calendar .calendar-holiday-header,
        .custom-table-calendar .calendar-holiday-header {
            color: #f44336;
            /* رنگ قرمز برای جمعه */
        }

        .monthly-shamsi-calendar .has-event-name {
            /* استایل برای روزهایی که نام خاص دارند */
        }

        #monthly-calendar-form label {
            margin-left: 10px;
        }

        #monthly-calendar-form select,
        #monthly-calendar-form button {
            padding: 8px;
            margin-left: 15px;
        }

        #monthly-calendar-form button {
            cursor: pointer;
        }

        #display-monthly-calendar {
            margin-top: 20px;
            clear: both;
            /* اطمینان از اینکه زیر فرم قرار می‌گیرد */
        }