/* =====================================================
   エラー・処理結果表示 共通モーダル (messageModal.js と対で使用)

   各画面が個別に持っていたメッセージ表示欄(#errorMessage等)は、
   まとめてこのモーダルで表示する方針になったため、
   .messageModalSourceクラスを付与して非表示にし、文言はJS側で
   読み取ってモーダル表示に利用します。
   ===================================================== */

/* サーバーが書き込んだメッセージの元要素(モーダルの文言ソース)。
   画面上には表示せず、messageModal.jsが読み取ってモーダルに渡します。 */
.messageModalSource {
    display: none;
}

.messageModalOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

    .messageModalOverlay.messageModalOpen {
        display: flex;
    }

.messageModal {
    background-color: White;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    max-height: 85vh;
    width: 90%;
    padding: 24px 20px 16px;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-direction: column;
}

/* 件名・本文プレビュー等、内容が長い場合はここだけをスクロールさせ、
   アイコン・ボタン行は常に表示したままにする。 */
.messageModalText {
    color: #333333;
    font-size: medium;
    font-weight: bold;
    white-space: pre-wrap;
    margin: 0 0 16px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

    /* エラー時はshowMessageModal(text, "error")の呼び出しで付与される。
   通常(お知らせ・成功時等)は付与されないため既定の文字色のまま。 */
    .messageModalText.messageModalTextError {
        color: #d32f2f;
    }

/* エラー/インフォの種別アイコン。showMessageModal(text, type)のtype省略時・
   "info"指定時はmessageModalIconInfoクラス、"error"指定時は
   messageModalIconErrorクラスがJS側で付与される。
   丸背景+記号のみのシンプルな表現とし、画像アセットは使用しない。 */
.messageModalIcon {
    display: none;
    width: 32px;
    height: 32px;
    margin: 0 auto 12px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    color: White;
    font-size: large;
    font-weight: bold;
    line-height: 1;
    flex-shrink: 0;
}

    .messageModalIcon.messageModalIconError,
    .messageModalIcon.messageModalIconInfo {
        display: flex;
    }

    .messageModalIcon.messageModalIconError {
        background-color: #d32f2f;
    }

        .messageModalIcon.messageModalIconError::before {
            content: "!";
        }

    .messageModalIcon.messageModalIconInfo {
        background-color: #1976d2;
    }

        .messageModalIcon.messageModalIconInfo::before {
            content: "i";
        }

/* ボタン行。showMessageModal()呼び出しのたびにJS側がボタンを1〜2個
   動的に生成して差し込む(OKのみ、またはアクション+キャンセル)。 */
.messageModalButtonRow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    flex-shrink: 0;
}

/* ボタンの色(青/通常)はgenericStyle.cssのstandardButtonBackgroundBlue/
   standardButtonをそのまま使用します。standardButtonの既定width:72pxでは
   「キャンセル」等の文字が見切れる場合があるため、幅のみ上書きします
   (高さはstandardButton/standardButtonBackgroundBlue既定の27pxのまま)。
   例: <input class="standardButtonBackgroundBlue messageModalButton" ... /> */
.messageModalButton {
    width: 100px;
}