/*
 * ログイン画面（login.ftl）専用スタイル。
 * デザインシステム.md準拠：2カラムレイアウト、カード見出し統一、メッセージ表示規約、アクセシビリティ。
 */

html, body#keycloak-bg {
    font-family: var(--font-family);
    color: var(--color-text-main);
    /* ブラウザ既定のuser agent stylesheetがbodyに margin を入れるため、
       ヘッダーを画面最上部にぴったり固定表示するには明示的に解除する必要がある */
    margin: 0;
}

body#keycloak-bg {
    min-height: 100vh;
    background: var(--color-bg-gradient);
    position: relative;
    overflow-x: hidden;
}

/* 背景装飾（デザインシステム.md：左にドット柄、右下にリング、右上に斜め図形。装飾のみのためクリック不可） */
body#keycloak-bg::before,
body#keycloak-bg::after {
    content: "";
    position: fixed;
    z-index: 0;
    pointer-events: none;
}

body#keycloak-bg::before {
    left: -60px;
    top: 40px;
    width: 220px;
    height: 220px;
    background-image: radial-gradient(circle, rgba(37, 99, 235, .18) 2px, transparent 2px);
    background-size: 16px 16px;
}

body#keycloak-bg::after {
    right: -120px;
    bottom: -120px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    border: 40px solid rgba(255, 255, 255, .35);
}

.pf-v5-c-login__main::before {
    content: "";
    position: fixed;
    top: 88px;
    right: -48px;
    z-index: 0;
    width: 240px;
    height: 56px;
    border-radius: 28px;
    background: rgba(255, 255, 255, .35);
    transform: rotate(-38deg);
    pointer-events: none;
}

.pf-v5-c-login,
.pf-v5-c-login__container,
.pf-v5-c-login__main,
.pf-v5-c-login__main-body,
#kc-header,
#kc-content,
#lgpf-caution,
.lgpf-notice-section {
    position: relative;
    z-index: 1;
}

/* 親テーマ(keycloak.v2)の .pf-v5-c-login は align-items:center により
   コンテンツ全体をビューポート内で垂直方向にも中央寄せし、さらに
   padding-block-start/end（PatternFly既定の --pf-v5-global--spacer--lg 相当）が
   上下に入る（patternfly.min.cssで確認済み）。
   本画面はヘッダー＋メインでちょうど100vhを使い切る設計（.pf-v5-c-login__main の
   height: calc(100vh - var(--header-height))）のため、このpaddingが残ると
   min-height:100vhの箱に収まりきらずページ自体が縦にはみ出し、
   ブラウザ上部の余白発生とページ全体のスクロールの両方を引き起こしていた。
   上寄せへの変更に加え、paddingも明示的に解除する */
.pf-v5-c-login {
    align-items: flex-start;
    padding-block-start: 0;
    padding-block-end: 0;
}

/* 親テーマ(keycloak.v2)の #kc-header は .pf-v5-c-login__container の直接の子であり
   （keycloak.v2実テンプレート確認済み）、このコンテナに max-width を指定するとヘッダー自体が
   その幅に収まってしまい、画面中央に途切れて表示される。画面設計書のヘッダーは全幅表示が
   前提のため、コンテナ自体は全幅のままとし、幅の制限は .pf-v5-c-login__main（本文カード領域）
   側にのみ適用する */
/* 親テーマ(keycloak.v2)の .pf-v5-c-login__container は画面幅1200px以上の場合のみ
   padding-inline-start/end（6.125rem＝約98px）が既定で入る（patternfly.min.css確認済み）。
   これが残っているとヘッダー・本文の左右に不要な余白が生まれてしまうため明示的に解除する。
   本文側の幅制限は .pf-v5-c-login__main（幅1200px・中央寄せ）側のみで行う */
.pf-v5-c-login__container {
    display: block;
    grid-template-areas: none;
    grid-template-columns: none;
    width: 100%;
    padding-inline-start: 0;
    padding-inline-end: 0;
}

/* origin/TSK-0013系ブランチで完成済みのログイン画面（login.css の .login-main）に合わせ、
   main領域自体はカード化せず（背景・影なしの透明なレイアウト枠）、
   ヘッダー分を除いたビューポート高さに固定する。これにより拡大・縮小時も
   ページ全体が伸び縮みするのではなく、各カード内でスクロールが完結する */
.pf-v5-c-login__main {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--header-height));
    padding: var(--stage-padding);
    background: transparent;
    box-shadow: none;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* 親テーマ標準の「ログイン」ページタイトル・言語切替ドロップダウンの表示領域。
   画面設計書には言語切替ボタンが存在せず（ユーザー確認済み）、
   「ログイン」見出しはログインカード内（.lgpf-login-column）に別途アイコン付きで
   描画し直すため、この既定領域自体を非表示にする */
.pf-v5-c-login__main-header {
    display: none;
}

/* 2カラムレイアウト：左＝ログインカード、右＝お知らせ2枚（自治体／システム）
   #kc-info を grid-row: 1 / -1 とすることで、メッセージ有無に関わらず右カラムの
   上端・下端が左カラムと揃う（画面設計書：左カードの上端／下端をお知らせカード群と一致させる）。
   親(.pf-v5-c-login__main)がflexで確保した残り高さを flex:1 1 auto で使い切ることで、
   タイトル分の高さを差し引いても「ビューポート内に収まる2カラム」を維持する */
.pf-v5-c-login__main-body {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1fr 1fr;
    gap: var(--grid-gap);
    align-items: stretch;
}

/* ログインカード：origin/TSK-0013の .login-form-section 相当。
   カード自身に背景・影を持たせ、内容が収まりきらない場合はカード内でスクロールする */
.lgpf-login-column {
    grid-column: 1;
    grid-row: 1 / -1;
    background: var(--color-card-bg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: var(--card-padding);
    display: flex;
    flex-direction: column;
    gap: var(--gap-unit);
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
}

/* #kc-info は .pf-v5-c-login__main-body の直接の子ではなく、直接の子である
   .pf-v5-c-login__main-footer にさらにラップされている（keycloak.v2実テンプレート確認済み）。
   grid-column/grid-rowはグリッドコンテナの直接の子にしか効かないため、
   グリッド配置の指定はこの .pf-v5-c-login__main-footer 側に行う */
.pf-v5-c-login__main-body > .pf-v5-c-login__main-footer {
    grid-column: 2;
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

/* #kc-info には親テーマの pf-v5-c-login__main-footer-band クラスが付与されており、
   PatternFly既定でborder-top＋上下左右paddingが入る（keycloak-themes-vendorのpatternfly.min.css
   で確認済み）。この余白は左カラム（.lgpf-login-column）側には存在しないため、
   そのままだと右カラム（お知らせ2枚）の実高さが左カラムとズレて見える。ここで明示的に解除する */
#kc-info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: var(--grid-gap);
    min-height: 0;
    min-width: 0;
    border: none;
    padding: 0;
    text-align: left;
}

#kc-info-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--grid-gap);
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}

/* 1024px未満：origin/TSK-0013の .login-main と同じ考え方で、
   ビューポート固定高＋カード内スクロールをやめ、ログインカード→お知らせ2枚の順に
   通常のドキュメントフローで縦に連なるレイアウトへ切り替える
   （拡大・縮小時に画面全体が単純に縮小表示されるのではなく、内容が積み重なって見えるようにする） */
@media (max-width: 1023px) {
    .pf-v5-c-login__main {
        height: auto;
        padding: var(--stage-padding-mobile);
    }

    .pf-v5-c-login__main-body {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .lgpf-login-column,
    .pf-v5-c-login__main-body > .pf-v5-c-login__main-footer {
        grid-column: 1 !important;
        grid-row: auto !important;
        display: block;
    }

    .lgpf-login-column {
        overflow-y: visible;
        margin-bottom: var(--grid-gap);
    }

    #kc-info,
    #kc-info-wrapper {
        display: block;
    }

    .lgpf-notice-section {
        overflow-y: visible;
        margin-bottom: var(--grid-gap);
    }

    .lgpf-notice-section:last-child {
        margin-bottom: 0;
    }
}

/* ===== フォーム ===== */
.pf-v5-c-form__group-label,
label {
    font: var(--font-label);
    color: var(--color-text-main);
}

input.pf-v5-c-form-control {
    height: var(--size-touch-target-min);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-el);
    padding: 0 12px;
    font: var(--font-body);
    width: 100%;
}

input.pf-v5-c-form-control:focus,
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.pf-v5-c-button.pf-m-primary {
    height: var(--size-touch-target-min);
    background: var(--gradient-primary);
    border: none;
    border-radius: var(--radius-el);
    color: var(--color-card-bg);
    font: var(--font-button);
    padding: 0 20px;
    width: 100%;
    cursor: pointer;
}

.pf-v5-c-button.pf-m-primary:disabled {
    background: #cbd5e1;
    color: var(--color-disabled-text);
    opacity: .5;
    cursor: not-allowed;
}

/* PatternFlyのpf-m-blockはdisplay:blockを設定するため、同じ詳細度以上でflex配置を指定する。
   これがないとalign-itemsが効かず、アイコンと文字がボタン上端に寄って見える */
.pf-v5-c-button.pf-m-block.lgpf-login-error-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

.lgpf-login-error-button .material-icons {
    font-size: 18px;
    line-height: 1;
}

/* Keycloak認証フローエラー：ログイン認証後の認証系エラー画面と同じアイコン・見出し・理由の構成にする */
.lgpf-keycloak-error-card {
    align-items: center;
    margin-inline: auto;
    text-align: center;
}

.lgpf-keycloak-error-card__icon {
    display: inline-flex;
    flex: 0 0 64px;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--color-error-icon-bg);
    color: var(--color-error);
    font-size: 40px;
    line-height: 1;
}

.lgpf-keycloak-error-card__title {
    margin: 0;
    color: var(--color-text-main);
    font: 700 22px/1.4 var(--font-family);
}

.lgpf-keycloak-error-card__message {
    margin: 0 0 calc(var(--gap-unit) * .5);
    color: var(--color-text-sub);
    font: 400 15px/1.6 var(--font-family);
}

.lgpf-keycloak-error-card__trace-id {
    margin: 0 0 calc(var(--gap-unit) * .5);
    color: var(--color-text-sub);
    font: var(--font-body);
}

.pf-v5-c-button.pf-m-secondary {
    height: var(--size-touch-target-min);
    background: var(--color-card-bg);
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    border-radius: var(--radius-el);
    font: var(--font-button);
    padding: 0 20px;
    width: 100%;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    text-decoration: none;
}

/* パスワードの変更／利用規約リンク：origin/TSK-0013の完了条件（視認性向上）に合わせ、
   タップ領域を確保しつつホバー時に背景色を付ける。
   背景色を付ける範囲とクリックできる範囲を一致させるため、hover等の装飾は
   囲みの<p>ではなく<a>自体に付ける */
.lgpf-reset-password-link,
.lgpf-terms-link {
    font: var(--font-label);
}

/* パスワードの変更（ほか同クラスの単独リンク）：<a>を横長領域いっぱいに広げ、
   領域のどこを押しても遷移できるようにする */
.lgpf-reset-password-link {
    display: block;
    width: 100%;
    margin: var(--gap-unit) 0 0;
}

.lgpf-reset-password-link a {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: var(--size-touch-target-min);
    padding: 0 var(--gap-unit);
    border-radius: var(--radius-el);
}

/* 利用規約：文字リンクのまま維持し、hover・focus表示は文字部分だけに付ける */
.lgpf-terms-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--size-touch-target-min);
    /* 文字位置を従来どおり（左右var(--gap-unit)相当）に保つため、<a>側の4pxと合わせて12pxにする */
    padding: 0 8px;
    margin: 0;
}

.lgpf-terms-link a {
    padding: 2px 4px;
    border-radius: var(--radius-el);
}

.lgpf-reset-password-link a:hover,
.lgpf-reset-password-link a:active,
.lgpf-terms-link a:hover,
.lgpf-terms-link a:active {
    background-color: var(--color-hover-bg);
}

.lgpf-reset-password-link a,
.lgpf-terms-link a {
    color: var(--color-primary);
    text-decoration: underline;
}

/* ===== メッセージ表示（デザインシステム.md 4-4） =====
   メッセージが無い場合も高さを確保し、表示時のレイアウトシフトを防ぐ */
.lgpf-message-area {
    min-height: 40px;
}

.lgpf-login-auth-message {
    /* 1行の通知高さを常時確保し、認証エラー表示時にログインボタンが動くのを防ぐ */
    min-height: 42px;
    margin-top: var(--gap-unit);
}

.lgpf-login-auth-message--hidden {
    visibility: hidden;
}

.lgpf-message-reserve {
    min-height: 40px;
}

.lgpf-message-area:empty,
.lgpf-message-area .pf-v5-c-alert {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lgpf-message-area .pf-v5-c-alert {
    padding: 10px 14px;
    border-radius: var(--radius-el);
    font: var(--font-body);
}

.lgpf-message-area .pf-m-danger {
    background: var(--color-error-bg);
    color: var(--color-error);
    font-weight: 700;
}

.lgpf-message-area .pf-m-success {
    background: transparent;
    color: var(--color-success);
    font-weight: 700;
}

.lgpf-message-area .pf-m-warning {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    font-weight: 700;
}

.lgpf-message-area .pf-m-info {
    background: var(--color-info-bg);
    color: var(--color-text-main);
}

/* ===== パスワード再設定画面（login-reset-password.ftl） =====
   この画面は displayInfo=false のためお知らせカラムが存在せず、
   親テーマの2カラムグリッド（.pf-v5-c-login__main-body）に単一カードのみが
   1カラム目に配置され左寄りになってしまう。data-page-id はtemplate.ftlが
   <body>に付与する値で、ページ固有のCSS適用に使う（実機確認済み：
   このページは "login-login-reset-password"） */
body[data-page-id="login-login-reset-password"] .pf-v5-c-login__main-body {
    grid-template-columns: 1fr;
    /* 親ルール（2カラム時）はgrid-template-rows: 1fr 1fr のままのため、
       行指定を明示的に上書きしないとカードが2行のうち1行分（=半分の高さ）しか
       確保できず、カード内が窮屈になりスクロールが必要になっていた */
    grid-template-rows: 1fr;
    justify-items: center;
}

body[data-page-id="login-login-reset-password"] .lgpf-login-column {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    max-width: 480px;
}

/* タイトル「パスワードの再設定」は中央揃え、「ログインに戻る」は左寄せ
   （ログイン画面側の同名クラスはそれぞれ左寄せ・中央揃えのままとするため、
   このページに限定して上書きする） */
body[data-page-id="login-login-reset-password"] .lgpf-card-title {
    justify-content: center;
}

body[data-page-id="login-login-reset-password"] .lgpf-reset-password-link a {
    justify-content: flex-start;
}

/* 案内メッセージ（No.1「メールアドレスを入力してください。新しいパスワードの
   設定方法をご案内いたします。」）はカード下部中央に、注意事項ボックス
   （.lgpf-caution-box）と同系統の背景色で囲んで表示する */
body[data-page-id="login-login-reset-password"] .lgpf-caution-box__empty {
    background: var(--color-info-bg);
    border-radius: var(--radius-el);
    padding: 12px 14px;
}

/* TSK-0042-02：error.ftl（action-token期限切れ等）も displayInfo=false のため
   お知らせカラムが存在せず、上記login-reset-passwordと同様に単一カード中央寄せへ上書きする */
body[data-page-id="login-error"] .pf-v5-c-login__main-body {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    justify-items: center;
}

body[data-page-id="login-error"] .lgpf-login-column {
    grid-column: 1;
    grid-row: auto;
    align-self: center;
    width: 100%;
    max-width: 520px;
}

/* パスワード再設定（有効期限内、login-update-password.ftl）も displayInfo=false のため
   お知らせカラムが存在せず、login-reset-password.ftl・error.ftlと同様に単一カード中央寄せへ上書きする。
   カード幅はThymeleaf側の初期パスワード設定画面（password-reset.css の .password-reset-card）と
   同じ520pxに揃える（同じ画面として認識できるよう、見た目のサイズ差をなくす） */
body[data-page-id="login-login-update-password"] .pf-v5-c-login__main-body {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    justify-items: center;
}

body[data-page-id="login-login-update-password"] .lgpf-login-column {
    grid-column: 1;
    grid-row: auto;
    /* 親(.pf-v5-c-login__main-body)の align-items: stretch（2カラムログイン画面用）を
       このページでも引き継いでしまい、カードがグリッド行の全高（1fr＝ビューポート残り高さ）
       まで縦に引き伸ばされ、フォーム下部に大きな余白が生まれていた
       （TSK-0044 No.30実機確認キャプチャで判明）。カード自身の内容量に合わせて高さを
       決定させるため、このページに限り align-self で明示的に上書きする */
    align-self: center;
    width: 100%;
    max-width: 520px;
}

body[data-page-id="login-login-update-password"] .lgpf-card-title {
    justify-content: center;
}

/* 新しいパスワード／パスワード（確認）欄の表示切替ボタン。
   Thymeleaf側 password-reset.css の .password-reset-form__password-wrapper と同じ考え方で、
   入力欄（properties.kcInputClassが付与されるspan）の右端にボタンを重ねる */
.lgpf-password-wrapper {
    position: relative;
}

.lgpf-password-wrapper input {
    padding-right: 40px;
}

/* Edge's native reveal control duplicates the LGPF eye toggle. */
input[type="password"]::-ms-reveal {
    display: none;
}

.lgpf-toggle-password {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: calc(var(--gap-unit) * 0.5);
    min-width: var(--size-touch-target-min);
    min-height: var(--size-touch-target-min);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--color-text-sub);
    transition: color 0.2s, background-color 0.2s;
}

.lgpf-toggle-password:hover {
    color: var(--color-primary);
    background-color: var(--color-hover-bg);
}

.lgpf-toggle-password .material-icons {
    font-size: 20px;
}

/* 未入力／メールアドレス形式不正エラー（サーバー側 messagesPerField・
   クライアントJS双方から共通で使用。エラーメッセージ一覧.md準拠：赤字） */
.lgpf-field-error {
    display: flex;
    align-items: center;
    gap: 4px;
    height: var(--field-error-height);
    overflow: hidden;
    color: var(--color-error);
    font: 400 13px/1.2 var(--font-family);
    margin-top: var(--field-error-gap);
}

.lgpf-field-error__icon {
    flex: 0 0 auto;
    font-size: 16px;
    line-height: 1;
}

.lgpf-field-error--hidden {
    visibility: hidden;
}

body[data-page-id="login-login"] #lgpf-password-error.lgpf-field-error--hidden {
    height: 0;
    margin-top: 0;
}

/* ===== 注意事項ボックス ===== */
.lgpf-caution-box {
    background: var(--color-info-bg);
    border-radius: var(--radius-el);
    padding: 12px 14px;
    font: var(--font-body);
    white-space: pre-wrap;
    flex: 1 1 auto;
    min-height: var(--scroll-area-min-height);
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overflow-wrap: anywhere;
}

.lgpf-caution-box__empty,
.lgpf-notice-empty {
    color: var(--color-text-sub);
    text-align: center;
    font: var(--font-body);
    margin: 0;
}

/* ===== お知らせカード（自治体／システム） ===== */
.lgpf-notice-section {
    background: var(--color-card-bg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: var(--card-padding);
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
}

.lgpf-card-title {
    font: var(--font-card-title);
    color: var(--color-text-main);
    margin: 0 0 var(--gap-unit);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* お知らせカード（自治体／システム）の見出しのみ、origin/TSK-0013の
   .login-notice__title に合わせて下線アクセントを付ける
   （ログインカード・注意事項の見出しには付けない） */
.lgpf-notice-section .lgpf-card-title {
    border-bottom: 2px solid var(--color-border);
    padding-bottom: calc(var(--gap-unit) * 0.5);
}

/* 見出し横のアイコンバッジ：origin/TSK-0013の .icon-badge を移植 */
.lgpf-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-icon-badge);
    height: var(--size-icon-badge);
    border-radius: 50%;
    font-size: 20px;
    background-color: var(--color-primary-bg);
    color: var(--color-primary);
    flex-shrink: 0;
}

.lgpf-notice-list {
    display: flex;
    flex-direction: column;
    gap: var(--grid-gap);
    flex: 1 1 auto;
    min-height: var(--scroll-area-min-height);
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: var(--gap-unit);
}

.lgpf-notice-item {
    min-width: 0;
    padding-bottom: var(--gap-unit);
    border-bottom: 1px solid var(--color-border);
}

.lgpf-notice-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.lgpf-notice-item__title {
    overflow-wrap: anywhere;
    font: var(--font-card-title);
    margin: 0 0 4px;
    color: var(--color-text-main);
}

.lgpf-notice-item__detail {
    margin: 0;
    font: var(--font-body);
    color: var(--color-text-main);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}