src/App.scss

/* --- START: استایل‌های مودال که به انتهای App.scss اضافه می‌شود --- */
.modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; backdrop-filter: blur(5px);
}
.modal-content {
  background: #2c2c2e; padding: 24px; border-radius: 16px;
  width: 90%; max-width: 500px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
  animation: modal-fade-in 0.3s ease-out;
  .modal-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px; border-bottom: 1px solid #444; padding-bottom: 16px;
    h3 { margin: 0; font-size: 20px; color: #fff; }
    .close-button {
      background: none; border: none; color: #aaa; font-size: 28px;
      cursor: pointer; line-height: 1; padding: 0;
      &:hover { color: #fff; }
    }
  }
  .modal-body .form-group {
    margin-bottom: 20px;
    label { display: block; margin-bottom: 8px; font-weight: 500; color: #e0e0e0; }
    input, textarea {
      width: 100%; padding: 12px; border-radius: 8px;
      border: 1px solid #555; background-color: #3a3a3c;
      color: #fff; font-size: 15px;
      &:focus {
        outline: none; border-color: #0a84ff;
        box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.5);
      }
    }
    textarea { resize: vertical; min-height: 100px; }
    small { display: block; margin-top: 8px; color: #999; font-size: 12px; }
  }
  .modal-footer {
    display: flex; justify-content: flex-end; margin-top: 24px;
    .save-button {
      background-color: #0a84ff; color: #fff; border: none;
      padding: 12px 24px; border-radius: 8px; font-size: 16px;
      font-weight: 600; cursor: pointer; transition: background-color 0.2s;
      &:hover { background-color: #3499ff; }
    }
  }
}
@keyframes modal-fade-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
/* --- END: استایل‌های مودال --- */