/* ============================================================
   JBCA 認証サーバー 共通スタイル
   ------------------------------------------------------------
   全ての認証サーバー画面（templates/base.html を継承する画面）で
   読み込まれる。Bootstrap 5 の後に読み込む前提。

   ・デザイントークンは :root にまとめてある。色を変えたい場合は
     ここだけを直せば全画面に反映される。
   ・PC（警備Pro／教育Proなどのクライアントアプリ）とスマホの
     ブラウザ表示を両方想定している。
   ============================================================ */

/* ------------------------------------------------------------
   1. デザイントークン
   ------------------------------------------------------------ */
:root {
    /* ブランド色（ロゴの水色と濃紺） */
    --jbca-primary: #39A8E1;
    --jbca-primary-dark: #278ABB;
    --jbca-primary-light: #A5E1FF;
    --jbca-primary-subtle: #F0F9FF;
    --jbca-primary-border-subtle: #CDEAFF;
    --jbca-navy: #003279;

    /* 面・文字 */
    --jbca-bg: #F5F7FA;
    --jbca-surface: #FFFFFF;
    --jbca-text: #212529;
    --jbca-text-muted: #6C757D;
    --jbca-border: #DEE2E6;

    /* 形 */
    --jbca-radius: 0.75rem;
    --jbca-radius-sm: 0.5rem;
    --jbca-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);

    /* タップ領域の最小高さ（スマホ操作用） */
    --jbca-tap: 44px;

    /* --- Bootstrap 5.3 の CSS 変数を上書き --------------------
       .text-primary / .bg-primary / .border-primary / リンク色は
       これらの変数を参照しているので、ここだけでブランド色に揃う。 */
    --bs-primary: #39A8E1;
    --bs-primary-rgb: 57, 168, 225;
    --bs-primary-text-emphasis: #1B5C7C;
    --bs-primary-bg-subtle: #F0F9FF;
    --bs-primary-border-subtle: #CDEAFF;
    --bs-link-color: #278ABB;
    --bs-link-color-rgb: 39, 138, 187;
    --bs-link-hover-color: #1B5C7C;
    --bs-link-hover-color-rgb: 27, 92, 124;
    --bs-focus-ring-color: rgba(57, 168, 225, 0.25);
    --bs-body-color: #212529;
    --bs-body-bg: #F5F7FA;
}

/* Bootstrap のボタンは変数ではなく実値を持っているので個別に上書きする */
.btn-primary {
    --bs-btn-bg: var(--jbca-primary);
    --bs-btn-border-color: var(--jbca-primary);
    --bs-btn-hover-bg: var(--jbca-primary-dark);
    --bs-btn-hover-border-color: var(--jbca-primary-dark);
    --bs-btn-active-bg: var(--jbca-primary-dark);
    --bs-btn-active-border-color: var(--jbca-primary-dark);
    --bs-btn-disabled-bg: var(--jbca-primary);
    --bs-btn-disabled-border-color: var(--jbca-primary);
    --bs-btn-focus-shadow-rgb: 57, 168, 225;
}

.btn-outline-primary {
    --bs-btn-color: var(--jbca-primary-dark);
    --bs-btn-border-color: var(--jbca-primary);
    --bs-btn-hover-bg: var(--jbca-primary);
    --bs-btn-hover-border-color: var(--jbca-primary);
    --bs-btn-active-bg: var(--jbca-primary-dark);
    --bs-btn-active-border-color: var(--jbca-primary-dark);
    --bs-btn-disabled-color: var(--jbca-primary);
    --bs-btn-disabled-border-color: var(--jbca-primary);
    --bs-btn-focus-shadow-rgb: 57, 168, 225;
}

/* ------------------------------------------------------------
   1.5 アイコン
   ------------------------------------------------------------
   Font Awesome（CDN + Webフォント）をやめ、templates/includes/icons.html の
   インラインSVGスプライトを <use> で参照している。
   サイズは font-size に追従するので、囲みの文字サイズを変えれば一緒に変わる。
   ------------------------------------------------------------ */
.icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.125em;
    flex-shrink: 0;
}

/* 設定メニューの行頭アイコン（幅を揃えて文字位置を合わせる） */
.auth-menu-icon {
    width: 1.25em;
    height: 1.25em;
    margin-right: 0.75rem;
}

/* ------------------------------------------------------------
   2. ページ土台
   ------------------------------------------------------------ */
.auth-page {
    background-color: var(--jbca-bg);
    color: var(--jbca-text);
    /* 日本語フォントを明示。Windows / Mac / Android / iOS を一通りカバー */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN",
                 "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    /* iOS で URL バーぶんの高さが変わっても背景が途切れないように */
    min-height: 100vh;
}

/* ヘッダ・本文・フッタを縦積みし、フッタを最下部に固定する */
.auth-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.auth-main {
    flex: 1 0 auto;
    padding-bottom: 2rem;
}

/* --- ロゴヘッダ（全画面共通） --- */
.auth-brand {
    text-align: center;
    padding: 2rem 1rem 1.5rem;
}

.auth-brand-logo {
    max-width: 220px;
    width: 60%;
    height: auto;
}

/* --- 本文カラム（幅の基準はここ1か所） --- */
.auth-col {
    width: 100%;
    max-width: 27rem;   /* 通常のカード画面（旧 col-md-6 col-lg-5 相当） */
    margin: 0 auto;
}

.auth-col--wide {
    max-width: 46rem;   /* 一覧・ダッシュボード（旧 col-md-8 相当） */
}

/* --- フッタ --- */
.auth-footer {
    flex-shrink: 0;
    text-align: center;
    padding: 1.5rem 1rem 2rem;
    color: var(--jbca-text-muted);
    font-size: 0.75rem;
}

/* ------------------------------------------------------------
   3. カード
   ------------------------------------------------------------ */
.auth-card {
    background-color: var(--jbca-surface);
    border: 0;
    border-radius: var(--jbca-radius);
    box-shadow: var(--jbca-shadow);
}

.auth-card > .card-body {
    padding: 1.75rem;
}

/* カード上部の見出しブロック（アイコン＋タイトル＋説明） */
.auth-card-head {
    text-align: center;
    margin-bottom: 1.5rem;
}

.auth-card-icon {
    font-size: 2.5rem;   /* .icon が 1em なので実寸 2.5rem になる */
    line-height: 1;
    display: block;
    margin-left: auto;
    margin-right: auto;
    color: var(--jbca-primary);
    margin-bottom: 1rem;
}

/* 状態を示すアイコン色（成功・警告・危険） */
.auth-card-icon--success { color: var(--bs-success); }
.auth-card-icon--warning { color: #E08A1E; }
.auth-card-icon--danger  { color: var(--bs-danger); }
.auth-card-icon--muted   { color: var(--jbca-text-muted); }

.auth-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--jbca-navy);
    margin: 0;
}

.auth-lead {
    font-size: 0.875rem;
    color: var(--jbca-text-muted);
    margin: 0.75rem 0 0;
    line-height: 1.7;
}

/* 一覧画面などカードの外に出すページ見出し */
.auth-page-head {
    text-align: center;
    margin-bottom: 1.5rem;
}

.auth-page-head .auth-title {
    font-size: 1.35rem;
}

/* ------------------------------------------------------------
   4. フォーム
   ------------------------------------------------------------
   Django のフォームは {{ field }} をそのまま出力すると class が
   付かないため、素の input/select/textarea も .form-control と
   同じ見た目になるようにしている（旧実装の「JS で後から
   form-control を付与する」方式をやめ、表示直後のちらつきを解消）。
   ------------------------------------------------------------ */
.auth-col input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not(.btn):not(.btn-close),
.auth-col select,
.auth-col textarea {
    display: block;
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--jbca-text);
    background-color: var(--jbca-surface);
    border: 1px solid var(--jbca-border);
    border-radius: var(--jbca-radius-sm);
    appearance: none;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.auth-col input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.btn):focus,
.auth-col select:focus,
.auth-col textarea:focus {
    border-color: var(--jbca-primary);
    box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
    outline: none;
}

.auth-col input::placeholder,
.auth-col textarea::placeholder {
    color: #ADB5BD;
}

.auth-field {
    margin-bottom: 1rem;
    text-align: left;
}

.auth-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--jbca-text-muted);
    margin-bottom: 0.375rem;
}

.auth-help {
    font-size: 0.8125rem;
    color: var(--jbca-text-muted);
    margin-top: 0.375rem;
}

.auth-error {
    font-size: 0.8125rem;
    color: var(--bs-danger);
    margin-top: 0.375rem;
}

/* アイコン付き入力欄（ログイン画面のメール／パスワード） */
.auth-input-group {
    display: flex;
    align-items: stretch;
    margin-bottom: 1rem;
}

.auth-input-group > .auth-input-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    flex: 0 0 3rem;
    background-color: var(--jbca-primary);
    color: #fff;
    border: 1px solid var(--jbca-primary);
    border-radius: var(--jbca-radius-sm) 0 0 var(--jbca-radius-sm);
}

/* 入力欄側は左角を落として結合する（幅は固定せず常に可変） */
.auth-col .auth-input-group input {
    border-radius: 0 var(--jbca-radius-sm) var(--jbca-radius-sm) 0;
    border-left: 0;
    min-width: 0;
    flex: 1 1 auto;
}

/* ------------------------------------------------------------
   5. ボタン・導線
   ------------------------------------------------------------ */
/* カード内の主アクション。縦積み・全幅で統一する */
.auth-actions {
    display: grid;
    gap: 0.625rem;
    margin-top: 1.5rem;
}

/* アクション群が連続する場合（フォーム外のボタンなど）は詰めて並べる */
.auth-actions + .auth-actions {
    margin-top: 0.625rem;
}

/* 全ボタンの最小タップ領域を確保する（スマホ操作対策） */
.auth-page .btn {
    min-height: var(--jbca-tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--jbca-radius-sm);
}

/* 「戻る」導線は全画面この形に統一（画面上部・左寄せの控えめなリンク） */
.auth-back {
    margin-bottom: 1rem;
}

.auth-back .btn {
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-padding-x: 0.875rem;
    --bs-btn-font-size: 0.8125rem;
    min-height: 36px;
    border-radius: 999px;
}

/* 副次アクション（キャンセルなど）のリンク風ボタン */
.btn-quiet {
    --bs-btn-color: var(--jbca-text-muted);
    --bs-btn-hover-color: var(--jbca-text);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-font-size: 0.875rem;
    text-decoration: none;
}

.btn-quiet:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------------
   6. 補助パーツ
   ------------------------------------------------------------ */
/* 注意書き・案内のボックス */
.auth-note {
    background-color: var(--jbca-primary-subtle);
    border: 1px solid var(--jbca-primary-border-subtle);
    border-radius: var(--jbca-radius-sm);
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    text-align: left;
    line-height: 1.7;
}

.auth-note--warning {
    background-color: #FFF8E6;
    border-color: #FFE4A8;
    color: #7A5C00;
}

/* 丸いアイコンバッジ（ロックアウト画面など） */
.auth-badge-icon {
    width: 4rem;
    height: 4rem;
    line-height: 4rem;
    border-radius: 50%;
    background-color: #FFF3E0;
    color: #E08A1E;
    font-size: 1.6rem;
    margin: 0 auto 1rem;
}

/* カード下部の補足テキスト */
.auth-fineprint {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #EEE;
    font-size: 0.8125rem;
    color: var(--jbca-text-muted);
    text-align: left;
    line-height: 1.7;
}

/* ------------------------------------------------------------
   7. allauth 標準テンプレート用
   ------------------------------------------------------------
   TOTP など自前テンプレートを用意していない allauth の画面は
   class の付かない素の HTML を出力する。ここで最低限
   他画面と揃った見た目にする。
   ------------------------------------------------------------ */
.auth-allauth h1,
.auth-allauth h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--jbca-navy);
    text-align: center;
    margin: 0 0 1rem;
}

.auth-allauth p {
    font-size: 0.9375rem;
    line-height: 1.7;
}

.auth-allauth label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--jbca-text-muted);
    margin-bottom: 0.375rem;
}

.auth-allauth button,
.auth-allauth form + a,
.auth-allauth .actions a {
    min-height: var(--jbca-tap);
}

.auth-allauth button {
    display: block;
    width: 100%;
    padding: 0.625rem 1rem;
    margin-top: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    background-color: var(--jbca-primary);
    border: 1px solid var(--jbca-primary);
    border-radius: var(--jbca-radius-sm);
    cursor: pointer;
}

.auth-allauth button:hover {
    background-color: var(--jbca-primary-dark);
    border-color: var(--jbca-primary-dark);
}

.auth-allauth ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.auth-allauth img {
    max-width: 100%;
    height: auto;
}

/* ------------------------------------------------------------
   8. スマホ対応
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
    .auth-brand {
        padding: 1.5rem 1rem 1rem;
    }

    .auth-brand-logo {
        width: 70%;
        max-width: 200px;
    }

    .auth-card {
        border-radius: var(--jbca-radius-sm);
    }

    .auth-card > .card-body {
        padding: 1.25rem;
    }

    /* iOS Safari は font-size が 16px 未満の入力欄にフォーカスすると
       画面を勝手に拡大するため、スマホでは必ず 16px 以上にする */
    .auth-col input:not([type="checkbox"]):not([type="radio"]):not(.btn),
    .auth-col select,
    .auth-col textarea,
    .auth-allauth input {
        font-size: 16px;
    }

    /* 一覧のテーブルは横スクロールさせる */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
}

/* 印刷時はロゴとフッタだけ残して余計な装飾を落とす */
@media print {
    .auth-page { background: #fff; }
    .auth-card { box-shadow: none; border: 1px solid var(--jbca-border); }
    .auth-back, .auth-footer { display: none; }
}