/**
 * ログイン画面レスポンシブ対応CSS
 *
 * モバイル・タブレットでの使いやすさを向上
 *
 * @version 1.0
 * @date 2025-10-19
 */

/* ==========================================================================
   基本設定
   ========================================================================== */

/* 入力フィールドのズームイン防止（iPhone/iPad対策） */
input[type="email"],
input[type="password"],
input[type="text"],
select.form-control {
    font-size: 16px !important; /* 16px以上でズームインしない */
}

/* タップ領域の拡大 */
.btn,
.password-toggle,
.checkbox label,
a {
    min-height: 44px; /* Apple推奨の最小タップ領域 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* チェックボックスのタップ領域拡大 */
.checkbox label {
    padding: 10px 0;
}

.checkbox input[type="checkbox"] {
    transform: scale(1.5); /* チェックボックスを大きく */
    margin-right: 10px;
}

/* ==========================================================================
   モバイル専用レイアウト（スマートフォン）
   ========================================================================== */

@media (max-width: 767px) {
    /* ログインボックスの幅調整 */
    .login-box {
        width: 90% !important;
        max-width: 400px;
        margin: 20px auto !important;
    }

    .login-box-body {
        padding: 20px 15px !important;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    /* ロゴサイズ調整 */
    .login-logo {
        font-size: 28px !important;
        margin-bottom: 20px !important;
    }

    .login-logo a {
        font-size: 28px !important;
    }

    /* ログインメッセージ */
    .login-box-msg {
        font-size: 20px !important;
        margin-bottom: 15px !important;
    }

    /* フォーム要素の間隔調整 */
    .form-group {
        margin-bottom: 20px !important;
    }

    /* 入力フィールド */
    .form-control {
        height: 50px !important; /* タップしやすい高さ */
        padding: 12px 15px !important;
        font-size: 16px !important;
        border-radius: 5px !important;
    }

    /* アイコンの位置調整 */
    .form-control-feedback {
        height: 50px !important;
        line-height: 50px !important;
        font-size: 20px !important;
    }

    /* パスワード表示トグルボタン */
    .password-toggle {
        right: 35px !important;
        top: 15px !important;
        font-size: 20px !important;
    }

    /* ボタン */
    .btn-lg {
        height: 50px !important;
        font-size: 18px !important;
        padding: 12px 24px !important;
        border-radius: 8px !important;
    }

    .btn-block {
        margin-bottom: 15px !important;
    }

    /* 新規登録ボタン */
    .btn-success {
        height: 50px !important;
        line-height: 26px !important;
    }

    /* リンク */
    .text-right a {
        font-size: 14px !important;
        padding: 10px 0 !important;
        display: inline-block !important;
    }

    /* アラート */
    .alert {
        font-size: 14px !important;
        padding: 12px !important;
        margin-bottom: 15px !important;
    }

    .alert .close {
        font-size: 24px !important;
        padding: 5px !important;
    }

    /* チェックボックスエリア */
    .row.margin {
        margin-top: 15px !important;
        margin-bottom: 15px !important;
    }

    /* パスワード忘れリンク */
    .margin-bottom {
        margin-bottom: 15px !important;
    }

    /* テキスト */
    .text-center p {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }
}

/* ==========================================================================
   タブレット専用レイアウト
   ========================================================================== */

@media (min-width: 768px) and (max-width: 991px) {
    .login-box {
        width: 450px !important;
        margin: 40px auto !important;
    }

    .form-control {
        height: 48px !important;
        font-size: 16px !important;
    }

    .form-control-feedback {
        height: 48px !important;
        line-height: 48px !important;
    }

    .btn-lg {
        height: 48px !important;
        font-size: 17px !important;
    }
}

/* ==========================================================================
   ソフトウェアキーボード表示時の調整
   ========================================================================== */

@media (max-width: 767px) and (max-height: 600px) {
    /* キーボード表示時にロゴを小さく */
    .login-logo {
        font-size: 22px !important;
        margin-bottom: 10px !important;
    }

    .login-box-msg {
        font-size: 16px !important;
        margin-bottom: 10px !important;
    }

    .form-group {
        margin-bottom: 15px !important;
    }

    .login-box {
        margin: 10px auto !important;
    }

    /* 新規登録セクションを非表示にする（スペース確保） */
    .text-center {
        display: none !important;
    }
}

/* ==========================================================================
   横向き（Landscape）時の調整
   ========================================================================== */

@media (max-width: 767px) and (orientation: landscape) {
    .login-box {
        width: 70% !important;
        max-width: 500px;
        margin: 10px auto !important;
    }

    .login-logo {
        font-size: 24px !important;
        margin-bottom: 15px !important;
    }

    .login-box-body {
        padding: 15px !important;
    }

    .form-group {
        margin-bottom: 15px !important;
    }
}

/* ==========================================================================
   アクセシビリティ対応
   ========================================================================== */

/* フォーカス時の視覚的フィードバック */
.form-control:focus {
    border-color: #3c8dbc !important;
    box-shadow: 0 0 0 3px rgba(60, 141, 188, 0.2) !important;
    outline: none !important;
}

.btn:focus {
    outline: 2px solid #3c8dbc !important;
    outline-offset: 2px !important;
}

/* タッチ時のハイライト色 */
* {
    -webkit-tap-highlight-color: rgba(60, 141, 188, 0.2);
}

/* ==========================================================================
   パフォーマンス最適化
   ========================================================================== */

/* スムーズスクロール */
html {
    scroll-behavior: smooth;
}

/* アニメーションのパフォーマンス向上 */
.btn,
.form-control,
.alert {
    transition: all 0.3s ease-in-out;
}

/* ==========================================================================
   ダークモード対応（将来実装用）
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    /* 現在は未実装 */
    /* body {
        background: #1a1a1a;
    } */
}

/* ==========================================================================
   高解像度ディスプレイ対応
   ========================================================================== */

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
    /* アイコンやテキストを高解像度用に調整 */
    .form-control-feedback {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* ==========================================================================
   印刷時の調整
   ========================================================================== */

@media print {
    .login-page {
        display: none !important;
    }
}