/* --- 入力欄に共通の基本設定 --- */
.form-control:focus,
input:focus,
select:focus {
  outline: none !important;
  border-color: #3c8dbc !important;
  border-width: 2px !important;
  box-shadow: none !important;
}

/* --- ログイン画面（アイコン付き）の時の補正 --- */
/* 通常のフォーカス時（青） */
.input-group:focus-within:not(:has(.is-invalid)) .form-control,
.input-group:focus-within:not(:has(.is-invalid)) .input-group-text {
  border-width: 2px !important;
  border-color: #3c8dbc !important;
}

/* --- エラー時（赤） --- */
.input-group:has(.is-invalid) {
  /* メッセージまで含めるために padding を追加し、枠線を赤にする */
  border: 1px solid #dc3545 !important;
  box-shadow: 0 0 0 1px #dc3545 !important;
  border-radius: 0.25rem;
  padding: 8px;

  background-color: #fffafa;
}

/* エラー時の入力欄とアイコンの線を赤く細くする */
.input-group:has(.is-invalid) .form-control,
.input-group:has(.is-invalid) .input-group-text {
  border-color: #dc3545 !important;
  border-width: 1px !important;
}

/* エラーメッセージの表示調整 */
.input-group:has(.is-invalid) .invalid-feedback {
  display: block !important;
  /* AdminLTE/Bootstrapの制御を上書き */
  margin-top: 5px;
}