/* ========================================
   Overlay Utilities
   - Fullscreen backdrop
   - Dialog container & close button
   ======================================== */

.overlay-backdrop {
    /* ビューポート全体を確実にカバー（モバイル対応：100dvh優先、フォールバック100vh） */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 100dvh; /* モバイルの動的ビューポート高さに対応 */
    min-height: 100vh; /* フォールバック（100dvh未対応ブラウザ用） */
    max-width: 100vw;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    
    /* スタイリング */
    background: rgba(0, 0, 0, 0.55);
    z-index: 11000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    box-sizing: border-box;
}

.overlay-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* オーバーレイダイアログの基本定義 */
.overlay-dialog {
    /* サイズ設定 */
    width: min(90%, 520px);
    max-width: 520px;
    max-height: min(90vh, 640px);
    
    /* CSSのみで中央配置（スクロール位置に依存しない） */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* スタイリング */
    background: #fff;
    border-radius: 24px;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.35);
    box-sizing: border-box;
    z-index: 11001;
}

.overlay-close-button {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: #64748b;
    transition: color 0.2s ease, transform 0.2s ease;
}

.overlay-close-button:hover {
    color: #1f2937;
    transform: scale(1.05);
}

.overlay-close-button:active {
    transform: scale(0.97);
}

/* オーバーレイ内の見出し（h3）を中央配置、文字サイズを小さく */
.overlay-dialog h3 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
}

/* オーバーレイ内のチェックボックスラベルの文字サイズを小さく */
.overlay-dialog .checkbox-list-item label {
    font-size: 0.75rem;
}

/* オーバーレイ内のカードを細く、文字を小さく */
.overlay-dialog .free-rule-detail-view-content .condition-item {
    padding: 0.5rem 0.75rem;
}

.overlay-dialog .free-rule-detail-view-content .condition-item span {
    font-size: 0.9rem;
}

/* オーバーレイ内の確認メッセージ */
.overlay-confirm-message {
    text-align: center;
    margin: 1.5rem 0;
    font-size: 1.1rem;
    color: #4a5568;
}

/* パスワード条件イントロダクション */
.password-conditions-intro {
    text-align: center;
    margin: 0 0 1.5rem 0;
    font-size: 1rem;
    color: #4a5568;
    line-height: 1.6;
}

/* パスワード条件コンテンツ */
.password-conditions-content {
    margin: 1.5rem 0;
}

.password-conditions-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}

.password-conditions-list li {
    padding: 0.75rem 0;
    font-size: 1rem;
    color: #4a5568;
    border-bottom: 1px solid #e5e7eb;
}

.password-conditions-list li:last-child {
    border-bottom: none;
}

.password-conditions-list li::before {
    content: "✓ ";
    color: #10b981;
    font-weight: 600;
    margin-right: 0.5rem;
}

.password-conditions-note {
    font-size: 0.9rem;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 8px;
}

/* オーバーレイ内のボタンコンテナ（基本スタイル） */
.overlay-button-container {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1.5rem;
}

/* オーバーレイ内のボタンコンテナを縦配置にする汎用クラス */
.overlay-button-container.vertical {
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
}

.overlay-button-container.vertical button {
    width: 100%;
    max-width: 200px;
}

/* オーバーレイ内の確認ボタン（基本スタイル） */
.overlay-confirm-button {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.overlay-confirm-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

/* オーバーレイ内のキャンセルボタン（基本スタイル） */
.overlay-cancel-button {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(107, 114, 128, 0.3);
}

.overlay-cancel-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(107, 114, 128, 0.4);
}

/* 「はい」ボタンを赤色にする汎用クラス（初期化ボタンと同じ色） */
.overlay-confirm-button.confirm-red {
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
    box-shadow: 0 4px 15px rgba(185, 28, 28, 0.3);
}

.overlay-confirm-button.confirm-red:hover {
    box-shadow: 0 8px 25px rgba(185, 28, 28, 0.4);
}

/* 「決定」ボタンを緑色にする汎用クラス */
.overlay-confirm-button.confirm-green {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.overlay-confirm-button.confirm-green:hover {
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
}

/* 「いいえ」ボタンを青色にする汎用クラス */
.overlay-cancel-button.cancel-blue {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.overlay-cancel-button.cancel-blue:hover {
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

/* オーバーレイ内の選択リスト（スクロール可能） */
.overlay-dialog .regulation-option-list,
.overlay-dialog .free-condition-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    max-height: 60vh; /* デザインフォルダに合わせて60vhに変更 */
    overflow-y: auto; /* スクロール可能にする */
    /* スクロールバーのスタイル */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #cbd5e0 #f7fafc; /* Firefox */
}

/* Webkit系ブラウザ（Chrome、Safari）のスクロールバースタイル */
.overlay-dialog .regulation-option-list::-webkit-scrollbar,
.overlay-dialog .free-condition-list::-webkit-scrollbar {
    width: 8px;
}

.overlay-dialog .regulation-option-list::-webkit-scrollbar-track,
.overlay-dialog .free-condition-list::-webkit-scrollbar-track {
    background: #f7fafc;
    border-radius: 4px;
}

.overlay-dialog .regulation-option-list::-webkit-scrollbar-thumb,
.overlay-dialog .free-condition-list::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 4px;
}

.overlay-dialog .regulation-option-list::-webkit-scrollbar-thumb:hover,
.overlay-dialog .free-condition-list::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

/* オーバーレイ内の選択項目 */
.overlay-dialog .regulation-option,
.overlay-dialog .free-condition-option {
    padding: 0.75rem 1rem;
    margin: 0;
    background: white;
    border: none;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 0.9rem; /* デザインフォルダに合わせて小さく */
    color: #4a5568;
}

.overlay-dialog .regulation-option:hover,
.overlay-dialog .free-condition-option:hover {
    background-color: #f7fafc;
}

.overlay-dialog .regulation-option:last-child,
.overlay-dialog .free-condition-option:last-child {
    border-bottom: none;
}

/* ポケモンが持つ特性（「指定なし」の上に表示される特性）の文字色を赤に */
.overlay-dialog .regulation-option.pokemon-ability-option {
    color: #dc2626;
}

/* SearchOverlayで使用するポケモンの特性/道具の文字色を赤に */
.overlay-dialog .search-list__item.pokemon-ability-option {
    color: #dc2626;
}

/* ========================================
   Select One from Pulldown Overlay
   - プルダウン形式で1つの項目を選択するオーバーレイ
   - 使い回し可能なクラス
   ======================================== */

/* プルダウン選択オーバーレイは外側のスクロールを無効化（内側のリストのみスクロール） */
.overlay-dialog.select-one-from-pulldown-overlay {
    overflow-y: visible; /* 外側のスクロールを無効化 */
    display: flex;
    flex-direction: column;
    max-height: min(90vh, 640px);
}

.select-one-from-pulldown-overlay > * {
    flex-shrink: 0;
}

.select-one-from-pulldown-overlay ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    flex: 1;
    min-height: 0; /* flexbox内でスクロール可能にするために必要 */
    overflow-y: auto; /* スクロール可能にする */
    /* スクロールバーのスタイル */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #cbd5e0 #f7fafc; /* Firefox */
}

/* Webkit系ブラウザ（Chrome、Safari）のスクロールバースタイル */
.select-one-from-pulldown-overlay ul::-webkit-scrollbar {
    width: 8px;
}

.select-one-from-pulldown-overlay ul::-webkit-scrollbar-track {
    background: #f7fafc;
    border-radius: 4px;
}

.select-one-from-pulldown-overlay ul::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 4px;
}

.select-one-from-pulldown-overlay ul::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

/* 選択項目 */
.select-one-from-pulldown-overlay li {
    padding: 0.75rem 1rem;
    margin: 0;
    background: white;
    border: none;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 0.9rem; /* デザインフォルダに合わせて小さく */
    color: #4a5568;
}

.select-one-from-pulldown-overlay li:hover {
    background-color: #f7fafc;
}

.select-one-from-pulldown-overlay li:last-child {
    border-bottom: none;
}

/* オーバーレイ内の閉じるボタン（下部、中央配置） */
.overlay-close-button-bottom {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    display: block;
    margin: 1.5rem auto 0; /* 中央配置 */
    width: fit-content;
}

.overlay-close-button-bottom:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

.overlay-close-button-bottom:active {
    transform: translateY(0);
}

/* ========================================
   オーバーレイダイアログの位置定義（中央配置）
   - CSSのみで中央配置（スクロール位置に依存しない）
   - 詳細度の高いセレクタで確実に適用
   ======================================== */
.overlay-backdrop > .overlay-dialog,
.overlay-backdrop .overlay-dialog,
[data-overlay] > .overlay-dialog,
[data-overlay] .overlay-dialog,
.overlay-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ========================================
   警告オーバーレイ用スタイル
   - 汎用的な警告メッセージ表示用
   ======================================== */

.warning-overlay-content {
    text-align: center;
    margin: 1.5rem 0;
}

.warning-overlay-icon {
    font-size: 3rem;
    color: #ef4444;
    margin-bottom: 1rem;
}

/* オーバーレイ内のタイトル表示用フィールド（読み取り専用表示） */
.overlay-title-display {
    background-color: #f7fafc;
    border: 1px solid #e2e8f0;
}

/* ========================================
   成功/失敗メッセージオーバーレイ用スタイル
   - ログアウト、登録、ログイン、問題登録の成功/失敗メッセージ用
   ======================================== */

/* 成功/失敗メッセージオーバーレイのコンテナ */
.overlay-message-container {
    text-align: center;
    padding: 1.5rem;
}

/* アイコンコンテナ */
.overlay-message-icon-container {
    margin-bottom: 0.75rem;
}

/* 成功アイコン */
.overlay-message-icon--success {
    font-size: 2.5rem;
    color: #10b981;
}

/* 失敗アイコン */
.overlay-message-icon--failure {
    font-size: 2.5rem;
    color: #ef4444;
}

/* メッセージテキスト */
.overlay-message-text {
    margin-bottom: 1rem;
    font-size: 1rem;
    color: #1f2937;
    text-align: center;
    white-space: normal;
    word-wrap: break-word;
}

/* ボタンコンテナ */
.overlay-message-button-container {
    margin-top: 1.5rem;
}

/* ボタンの最小幅 */
.overlay-message-button {
    min-width: 120px;
}