/* style-login.css: ログイン画面専用スタイル */

/* ログインヘッダー */
.login-header {
    position: fixed;
    top: 0;
    right: 0;
    padding: 20px;
}

/* ★★★ 修正箇所: モード切り替えボタンのデザインを強制的にクリーンにする ★★★ */
.login-header #mode-toggle {
    /* common.css の設定を確実に適用し、Milligramのボタン設定を解除 */
    background: none !important;
    border: none !important;
    font-size: 24px !important; /* アイコンを大きくし、見やすくする */
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    width: auto !important;
    line-height: 1 !important;
    box-shadow: none !important;
    text-transform: none !important;
    
    /* カラー変数を確実に適用 */
    color: var(--color-text-primary) !important;
    transition: color 0.2s;
}

.login-header #mode-toggle:hover {
    color: var(--color-accent) !important;
    opacity: 1 !important;
}
/* ★★★ 修正箇所ここまで ★★★ */


/* ログインコンテナ (中央配置) */
.login-container {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
    padding: 20px;
}

/* login-card は完全に自立させる */
.login-card {
    padding: 40px !important;
    width: 100%;
    max-width: 380px;
    text-align: center;
    
    /* カードのモダンな見た目を強制的に適用 */
    background-color: var(--color-bg-secondary) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 20px var(--color-shadow) !important;
    
    transition: none !important;
    cursor: default !important;
    overflow: hidden !important;
}

/* ロゴスタイル (common.css のロゴ部品のスタイルを適用) */
.login-card .logo {
    display: flex;
    justify-content: center;
    align-items: baseline;
    margin-bottom: 5px;
}

.subtitle {
    font-size: 24px;
    color: var(--color-text-primary);
    margin-top: 5px !important;
    margin-bottom: 30px !important; 
    font-weight: 400;
}

/* フォームと入力欄 */
.form-group {
    margin-bottom: 20px;
    text-align: left;
}

/* common.cssのinputスタイルを継承しつつ微調整 */
.login-card input {
    padding: 12px !important;
}

/* ログインボタン */
.login-btn {
    width: 100%;
    padding: 12px !important;
    font-size: 18px !important;
    font-weight: bold !important;
    margin-top: 10px;
    margin-bottom: 20px;
}

/* パスワードを忘れた場合リンク */
.forgot-password {
    color: var(--color-text-secondary);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s;
}

.forgot-password:hover {
    color: var(--color-accent);
}

/* レスポンシブ対応 */
@media (max-width: 480px) {
    .login-card {
        padding: 30px 20px;
    }
}