/* Modal Backdrop Fix - プリセットモーダルのグレーアウト問題を解決 */

/* モーダルのz-index階層を明確に - Bootstrapのデフォルト値を使用 */
.modal-backdrop {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1040 !important; /* Bootstrap default */
}

.modal {
    z-index: 1050 !important; /* Bootstrap default */
}

.modal-dialog {
    position: relative;
    pointer-events: auto !important;
}

.modal-content {
    position: relative;
    pointer-events: auto !important;
    background-color: #fff;
}

/* フォーム要素が確実にクリック可能に */
.modal input,
.modal select,
.modal textarea,
.modal button,
.modal .form-check-input,
.modal .btn {
    pointer-events: auto !important;
    position: relative;
    cursor: pointer;
}

/* モーダルが表示されているときの修正 */
.modal.show {
    display: block !important;
}

/* backdropが複数重ならないように */
.modal-backdrop ~ .modal-backdrop {
    display: none !important;
}

/* フォーカス可能な要素の強調 */
.modal .form-control:focus,
.modal .form-select:focus {
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    outline: none;
}

/* モーダルヘッダーとフッターも確実にクリック可能に */
.modal .modal-header,
.modal .modal-footer {
    pointer-events: auto !important;
    position: relative;
}

/* スクロール可能エリアの修正 */
.modal-dialog-scrollable .modal-body {
    pointer-events: auto !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 200px) !important;
}

/* 閉じるボタンの確実な動作 */
.modal .btn-close {
    pointer-events: auto !important;
    cursor: pointer !important;
    opacity: 1;
}

/* backdrop削除時のアニメーション無効化 */
.modal-backdrop.fade:not(.show) {
    display: none !important;
    opacity: 0 !important;
    transition: none !important;
}

/* body要素の修正 */
body.modal-open {
    overflow: hidden !important;
    padding-right: 0 !important;
}

/* テキスト入力フィールドの確実な動作 */
.modal input[type="text"],
.modal input[type="number"],
.modal input[type="password"],
.modal input[type="email"],
.modal textarea {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    user-select: text !important;
}

/* モーダル表示時のスクロール防止 */
body.modal-open {
    position: fixed;
    width: 100%;
}

/* backdrop削除時の処理を確実に */
.modal-backdrop.fade.show {
    opacity: 0.5;
}

/* モーダルのアニメーション調整 */
.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
}

/* フォームコントロールのホバー状態 */
.modal .form-control:hover,
.modal .form-select:hover {
    border-color: #b8c5d6;
}