/* Стили для формы в стиле ПланФакт */

.ps-content {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Добавляем тень */
}

.form-group {
  margin-bottom: 16px;
}

.modal-label {
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
  text-align: left; /* Выравнивание меток по левому краю */
}

/* Стили для полей ввода, выпадающих списков и текстовой области */
.form-control,
.select2-container--bootstrap-5 .select2-selection--single,
textarea.form-control {
  height: 40px; /* Фиксированная высота для всех полей */
  border: 1px solid #ced4da;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 16px;
  color: #495057;
  transition: border-color 0.3s ease;
  box-sizing: border-box; /* Включает отступы и границы в общую ширину */
}

.form-control:focus,
.select2-container--bootstrap-5 .select2-selection--single:focus,
textarea.form-control:focus {
  outline: none;
 border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow b {
  border-color: #6c757d transparent transparent transparent !important;
}

.form-check-label {
  margin-left: 8px;
  font-weight: normal;
}

/* Стили для кнопок */
.btn-primary {
  background-color: #1f98ad;
  border-color: #1f98ad;
  padding: 8px 16px;
  font-size: 16px;
  border-radius: 4px;
  color: #fff;
}

.btn-primary:hover {
  background-color: #097d91;
  border-color: #097d91;
}

.btn-link {
  color: #6c757d; /* Серый цвет для кнопки "Обновить данные" */
  text-decoration: none;
  font-size: 16px;
  padding: 8px 16px;
  border: 1px solid #ced4da; /* Серая граница */
  border-radius: 4px;
}

.btn-link:hover {
  background-color: #e9ecef; /* Светло-серый фон при наведении */
  border-color: #ced4da;
  color: #495057;
}

/* Стили для переключателя типа операции */
.operation-type-toggle {
  display: flex;
  margin-bottom: 24px; /* Увеличенный отступ снизу */
  padding: 10px;
  justify-content: center; /* Центрируем элементы по горизонтали */
}

.operation-type-toggle .nav-link {
  padding: 8px 16px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  color: #495057;
  font-weight: 500;
  margin-right: 8px;
  background-color: #f8f9fa; /* Светло-серый фон для неактивных вкладок */
}

.operation-type-toggle .nav-link.active {
  background-color: #1f98ad;
  border-color: #1f98ad;
  color: #fff;
}

/* Дополнительные стили */
.d-flex.justify-content-end {
  margin-top: 24px; /* Отступ сверху для кнопок */
}

/* Разделение названий полей и форм для ввода */
.row.mb-3 {
  display: flex;
  align-items: center; /* Выравнивание по вертикали */
}

.row.mb-3 .col-md-4 {
  text-align: left; /* Выравнивание текста по левому краю */
  padding-right: 15px; /* Дополнительный отступ справа */
}

/* Стили для поля "Сумма" */
.input-group .input-group-text {
  background-color: #fff; /* Белый фон для символа рубля */
  border: 1px solid #ced4da; /* Граница как у поля ввода */
  border-right: none; /* Убираем правую границу */
  border-radius: 4px 0 0 4px; /* Скругляем левый угол */
}

.input-group .form-control {
  border-radius: 0 4px 4px 0; /* Скругляем правый угол */
}

/* Удаляем стрелки из поля "Сумма" */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* Стили для Select2 */
.select2-container {
  width: auto !important; /* Select2 не занимает 100% ширины */
  flex-grow: 1; /* Select2 расширяется, чтобы заполнить доступное пространство */
}

.select2-container--bootstrap-5 .select2-selection--single {
  height: 40px;
}

.select2-dropdown {
  max-height: 200px; /* Максимальная высота выпадающего списка */
  overflow-y: auto; /* Добавляем вертикальную прокрутку */
}

/* Мобильная адаптивность */
@media (max-width: 768px) {
  .ps-content {
    padding: 15px; /* Уменьшаем отступы на мобильных */
  }

  .operation-type-toggle {
    flex-direction: column; /* Вкладки располагаются вертикально */
  }

  .operation-type-toggle .nav-link {
    margin-right: 0;
    margin-bottom: 5px;
  }
}

@media (max-width: 576px) {
  .row.mb-3 {
    flex-direction: column; /* Поля формы располагаются друг под другом */
    align-items: flex-start;
  }

  .row.mb-3 .col-md-4 {
    padding-right: 0;
    margin-bottom: 10px;
  }
}