/* =========================================================
   システム全体の基本フォント設定
   ========================================================= */
/* ワカログ by REC デザイントークン — CSS Variables */
:root {
    --bs-font-sans-serif: 'Poppins', 'Noto Sans JP', sans-serif !important;
    --bs-body-font-family: var(--bs-font-sans-serif) !important;
    /* ブランド緑 */
    --g-50: #eef5ef; /* 淡い面・選択チップ背景・ライブ表示背景 */
    --g-100: #dcebdd; /* 淡い枠線・グラデ末端 */
    --g-500: #4ca45c; /* 主色・primary ボタン・選択状態 */
    --g-600: #3e8e4d; /* hover・見出しアクセント */
    --g-700: #2f7d3e; /* 濃い緑・緑地の上のテキスト */
    /* 背景 */
    --paper: #faf9f6; /* ページ地（生成り） */
    --paper-2: #f3f1ec; /* 一段濃い面・プレースホルダ */
    --surface: #fff; /* カード白・フォーム要素 */
    /* テキスト */
    --ink: #23262b; /* 本文 */
    --ink-2: #5a6068; /* 副次テキスト */
    --ink-3: #9a9fa6; /* 補助・キャプション */
    /* 罫線 */
    --line: #eceae4; /* カード枠・区切り線（標準） */
    --line-2: #e2dfd8; /* チップ枠・フォーム枠（やや濃い） */
    /* セマンティック：誤答・警告 */
    --bad: #d65a4f; /* 誤答・エラーテキスト */
    --bad-bg: #fbeeec; /* 誤答カード背景 */
    --bad-line: #f0cfc9; /* 誤答カード枠 */
    /* セマンティック：強調・注目 */
    --amber: #e0944a; /* わかった数・連続日数・注目 */
    --amber-bg: #fbf1e4; /* amber バッジ背景 */
    /* 角丸 */
    --r-btn: 12px; /* ボタン角丸 */
    --r-card: 16px; /* カード角丸 */
}

/* フォント */
body {
    /*font-family: "Noto Sans JP","Hiragino Sans","Yu Gothic UI",sans-serif !important;*/
    font-family: var(--bs-font-sans-serif) !important;
    -webkit-font-smoothing: antialiased; /* Mac/iOSで文字を滑らかに美しく見せる魔法 */
    -moz-osx-font-smoothing: grayscale;
    background: var(--paper) !important;
    color: var(--ink) !important;
    /*-webkit-font-smoothing: antialiased !important;*/
    line-height: 1.7 !important;
}
/* 🌙 ダークモード時の例外設定（プロの気配り） */
html[data-bs-theme="dark"] body {
    /* 🔴 ダークモード時は上の設定を打ち消し、Falconテーマの美しい濃紺（デフォルト）を優先する */
    background-color: #0b1727 !important;
    color: var(--ink) !important; /* bodyの基本色も変えておくと安心です */
}
/* =========================================================
   上部ヘッダー（アバター写真があるバー）の背景色設定
   ========================================================= */
.navbar-glass {
    /* 🔴 背景色を公式の生成り色で上書き */
    background-color: var(--paper) !important;
    /* 🔴 下の区切り線を公式の罫線カラーで上書き */
    border-bottom-color: var(--line) !important;
}

/* 🌙 ダークモード時の例外設定 */
html[data-bs-theme="dark"] .navbar-glass {
    background-color: #0b1727 !important;
    border-bottom-color: #1e2e4a !important;
}

/* 🌙 ダークモード時のカラー変数を上書き設定 */
html[data-bs-theme="dark"] {
    /* 背景色（既存） */
    --paper: #0b1727 !important;
    /* 🔴 テキストの色を明るく変更！ */
    --ink: #f8f9fa; /* ほぼ白 */
    --ink-2: #ced4da; /* 明るいグレー */
    --ink-3: #adb5bd; /* さらに明るいグレー */
    /* 罫線もダークモードに合わせて調整 */
    --line: #2e3a4a;
    --line-2: #495057;
}

/* =========================================================
   認証画面（ログイン・新規登録・パスワード忘れ）の背景色設定
   ========================================================= */
/* Falconテーマ特有の全画面を覆う背景クラス（bg-100, bg-light, bg-white）を強制上書きします */
.min-vh-100.bg-100,
.min-vh-100.bg-light,
.min-vh-100.bg-white,
.container-fluid > .row.bg-100,
.container-fluid > .row.bg-light,
.container-fluid > .row.bg-white {
    background-color: var(--paper) !important;
}

/* 🌙 ダークモード時の例外設定 */
html[data-bs-theme="dark"] .min-vh-100.bg-100,
html[data-bs-theme="dark"] .min-vh-100.bg-light,
html[data-bs-theme="dark"] .min-vh-100.bg-white,
html[data-bs-theme="dark"] .container-fluid > .row.bg-100,
html[data-bs-theme="dark"] .container-fluid > .row.bg-light,
html[data-bs-theme="dark"] .container-fluid > .row.bg-white {
    background-color: #0b1727 !important;
}

/* =========================================================
   ワカログ by REC ブランドロゴの公式スタイル適用
   ========================================================= */
.navbar-brand .text-success {
    /* 🔴 Bootstrapのデフォルト緑を消し、公式ガイド指定の「Green 600」に上書き！ */
    color: var(--g-600) !important;
    /* 🔴 公式ガイド指定の「一番太い文字（Black）」にしてロゴの力強さを出す */
    font-weight: 900 !important;
    /* 少しだけ文字間隔を詰めることで、より「ロゴマーク」らしい美しい見た目になります */
    letter-spacing: -0.02em;
}

/* =================================================== */
/* スマホ（幅767px以下）の時の上寄せ設定（認証画面用） */
/* =================================================== */
@media (max-width: 767.98px) {
    /* ========================================================= */
    /* 🔴 スマホ時のみ：サイドメニューの文字とアイコンを大きくする */
    /* ========================================================= */
    .navbar-vertical .nav-link-text {
        font-size: 1.15rem !important; /* 既存より約1.2倍大きく（1.15rem ≒ 18.4px） */
        font-weight: 500 !important; /* 少しだけ太くして視認性を高める */
    }

    .navbar-vertical .nav-link-icon {
        font-size: 1.25rem !important; /* 文字に合わせてアイコンも少し大きく（約20px） */
    }

    .navbar-vertical .nav-link {
        padding-top: 12px !important; /* 文字が大きくなる分、上下のタップ領域（余白）も少し広げる */
        padding-bottom: 12px !important;
    }

    /* ========================================================= */
    /* 🔴 スマホ時のみ：ログイン・ログアウトボタンを大きくする */
    /* ========================================================= */
    .navbar-vertical .btn-outline-primary,
    .navbar-vertical .btn-outline-danger {
        font-size: 1.3rem !important; /* 文字サイズをメニューと同等の約20.8pxへ拡大 */
        padding-top: 12px !important; /* 上下のタップ領域を大きく広げる */
        padding-bottom: 12px !important;
        font-weight: 600 !important; /* 文字を太くして視認性を高める */
        border-width: 2px !important; /* ボタンの枠線も少し太くして存在感を出す */
    }

        .navbar-vertical .btn-outline-primary .fas,
        .navbar-vertical .btn-outline-danger .fas {
            font-size: 1.5rem !important; /* アイコンも合わせて拡大 */
            margin-right: 8px !important; /* アイコンと文字の余白を少し広げて窮屈さを解消 */
        }

    .flex-center,
    .align-items-center {
        align-items: flex-start !important;
    }

    .min-vh-100 {
        min-height: auto !important;
    }

    .py-6, .py-5, .py-4, .py-3, .pt-6, .pt-5, .pt-4, .pt-3 {
        padding-top: 1rem !important;
    }

    .card {
        margin-top: 0 !important;
    }
}

/* =================================================== */
/* 🟢 テーマカラーを「緑」に変更する共通カスタマイズ   */
/* =================================================== */

/* 1. 左側のグラデーション背景（ログイン・登録画面用） */
.bg-card-gradient {
    /* 🔴 【重要】外部CSSでは @Url が使えないため、「../img/」という相対パスで書きます！ */
    /* ※「../」は「1つ上の階層（wwwroot）に戻ってから img フォルダに入る」という意味です */
    background-image: linear-gradient(45deg, rgba(30, 126, 52, 0.85), rgba(40, 167, 69, 0.85)), url('../img/LoginBackImage4.jpg') !important;
    background-size: cover, cover !important;
    background-position: center, center !important;
    background-repeat: no-repeat, no-repeat !important;
}

/* 2. ボタンの色を緑にする（システム全体共通・完全勝利版） */
/* ① 通常時の色 */
/*.btn-primary {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
}*/

    /* ② マウスオーバー時（カーソルが乗った時）と フォーカス時（Tabキー等で選択された時） */
    /*.btn-primary:hover,
    .btn-primary:focus {
        background-color: #218838 !important;*/ /* 少し濃い緑 */
        /*border-color: #1e7e34 !important;
        box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.5) !important;*/ /* 緑色のフワッとした影 */
        /*color: #ffffff !important;*/ /* 文字色は白をキープ */
    /*}*/

    /* ③ マウスダウン時（クリックして押し込んでいる瞬間） */
    /*.btn-primary:active,
    .btn-primary.active {
        background-color: #1e7e34 !important;*/ /* さらに濃い緑 */
        /*border-color: #1c7430 !important;
        color: #ffffff !important;
    }*/

    /* ④ 非活性時（disabled等の押せない状態の時） */
    /*.btn-primary:disabled,
    .btn-primary.disabled {
        background-color: #82cfa6 !important;*/ /* 薄い緑 */
        /*border-color: #82cfa6 !important;
        color: #ffffff !important;
    }*/

/* 3. すべてのリンクと文字色の primary（青）を強制的に緑にする（システム全体共通） */
/*a, .link-primary, .text-primary {
    color: #28a745 !important;
}

    a:hover, .link-primary:hover, .text-primary:hover {
        color: #1e7e34 !important;
    }*/

/* 4. チェックボックスの色を緑にする（システム全体共通） */
.form-check-input:checked {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
}

/* 5. 認証画面の装飾用丸画像（青➔緑） */
.bg-auth-circle-shape,
.bg-auth-circle-shape-2 {
    filter: hue-rotate(-80deg) !important;
}

/* ※左側の緑背景に乗っている「白いリンク」は白を維持する */
.link-light {
    color: #f9fafd !important;
}

    .link-light:hover {
        color: #d8e2ef !important;
    }

/* ========================================================= */
/* 共通：情報表示用ツールチップ（少し薄い黒・左揃え・幅広） */
/* ========================================================= */
.custom-info-tooltip .tooltip-inner {
    text-align: left !important;
    background-color: rgba(70, 80, 90, 0.95) !important;
    max-width: 300px;
    padding: 10px 14px;
}

/* ツールチップのしっぽ（矢印）の色を合わせる */
.custom-info-tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: rgba(70, 80, 90, 0.95) !important;
}

.custom-info-tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: rgba(70, 80, 90, 0.95) !important;
}

.custom-info-tooltip.bs-tooltip-start .tooltip-arrow::before {
    border-left-color: rgba(70, 80, 90, 0.95) !important;
}

.custom-info-tooltip.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: rgba(70, 80, 90, 0.95) !important;
}

/* =========================================================
   全画面共通：ページネーション（ページ送り）をシステムテーマカラー(緑)に統一
   ※Bootstrap標準 ＆ 自動生成プラグイン(List.js等) 両対応版
========================================================= */

/* --- ① アクティブな数字（現在いるページ） --- */
html body .pagination .page-item.active .page-link,
html body .pagination .page-item.active .page-link:hover,
html body .pagination .page-item.active .page-link:focus,
html body .pagination li.active .page,
html body .pagination li.active .page:hover,
html body .pagination li.active .page:focus {
    background-color: #00d27a !important;
    border-color: #00d27a !important;
    color: #ffffff !important;
}

/* --- ② 非アクティブな数字（通常時のリンク） --- */
html body .pagination .page-link,
html body .pagination .page {
    color: #00d27a !important;
}

    /* --- ③ 非アクティブな数字（マウスを乗せた時） --- */
    html body .pagination .page-link:hover,
    html body .pagination .page-link:focus,
    html body .pagination .page:hover,
    html body .pagination .page:focus {
        color: #ffffff !important;
        background-color: #00ab63 !important; /* 少し濃い緑 */
        border-color: #00ab63 !important;
    }

/* --- ④ 無効化されている「前へ」「次へ」の矢印等 --- */
html body .pagination .page-item.disabled .page-link,
html body .pagination li.disabled .page {
    color: #6c757d !important;
    background-color: transparent !important;
    border-color: var(--bs-border-color) !important;
}

/* --- 共通ボタンデザイン：公式の濃い緑に統一 --- */
.btn-success {
    background-color: var(--g-500) !important;
    border-color: var(--g-500) !important;
    color: #ffffff !important;
    /*border-radius: 16px !important;*/ /* 完全に丸くする場合 */
    /*padding: 12px;*/
}

    /* ホバー時：少し濃くする（公式の雰囲気に合わせて） */
    .btn-success:hover {
        background-color: var(--g-600) !important;
        border-color: var(--g-600) !important;
        color: #ffffff !important;
    }

    /* クリック時：さらに濃くする */
    .btn-success:active,
    .btn-success:focus {
        background-color: var(--g-700) !important;
        border-color: var(--g-700) !important;
        box-shadow: none !important;
    }

@@keyframes livePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(76,164,92,.5);
    }

    70% {
        box-shadow: 0 0 0 7px rgba(76,164,92,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(76,164,92,0);
    }
}

/* =========================================================
   共通：バッジ等の bg-success 背景色をブランドカラーに統一
   ========================================================= */
.bg-success {
    /* 🔴 ブランド緑（#4ca45c）を強制適用 */
    background-color: var(--g-500) !important;
    /* 🔴 テキスト色は常に白（ダークモードでの自動黒反転を防止） */
    color: #ffffff !important;
}

.text-success {
    color: var(--g-500) !important;
}

/* 🌙 ダークモード時の例外設定（プロの気配り） */
html[data-bs-theme="dark"] .bg-success {
    /* ダークモードの濃紺背景に対して、ブランド緑がぼやけないよう、
      一段濃い緑(--g-600)で1pxの枠線を微かに付けることで、バッジの輪郭をクッキリさせます。
      背景色自体は var(--g-500) が継承されるため、色の統一感は保たれます。
    */
    border: 1px solid var(--g-600) !important;
    /* テキストは白のまま維持 */
    color: #ffffff !important;
}

/* =========================================================
   共通：btn-outline-success をブランドカラーに統一
   ========================================================= */

/* ① 通常時の色（文字と枠線をブランド緑、背景は透明） */
.btn-outline-success {
    color: var(--g-500) !important;
    border-color: var(--g-500) !important;
    background-color: transparent !important;
}

    /* ② ホバー時（マウスが乗った時：背景をブランド緑に塗りつぶし、文字を白に） */
    .btn-outline-success:hover {
        color: #ffffff !important;
        background-color: var(--g-500) !important;
        border-color: var(--g-500) !important;
    }

    /* ③ クリック時・フォーカス時（公式の濃い緑 --g-600 にし、フワッとした影を消す） */
    .btn-outline-success:active,
    .btn-outline-success:focus,
    .btn-outline-success.active {
        color: #ffffff !important;
        background-color: var(--g-600) !important;
        border-color: var(--g-600) !important;
        /* Bootstrap特有のクリック時の青っぽい影などを完全に消去し、ソリッドな印象にします */
        box-shadow: none !important;
    }

    /* ④ 非活性時（disabled属性がついている時：少し薄くする） */
    .btn-outline-success:disabled,
    .btn-outline-success.disabled {
        color: var(--g-500) !important;
        border-color: var(--g-500) !important;
        background-color: transparent !important;
        opacity: 0.65 !important;
    }

/* ========== STATS ROW ========== */
.stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 18px;
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 16px 18px;
    vertical-align: middle !important;
}

    .stat-card.primary {
        border-color: var(--g-100);
        background: linear-gradient(160deg,#fff,var(--g-50));
    }

    .stat-card .s-label {
        font-size: 11.5px;
        font-weight: 700;
        color: var(--ink-3);
        letter-spacing: .05em;
        margin-bottom: 4px;
    }

    .stat-card .s-value {
        font-size: 28px;
        font-weight: 900;
        color: var(--ink);
        line-height: 1.1;
    }

        .stat-card .s-value span.unit {
            font-size: 14px;
            font-weight: 700;
            color: var(--ink-2);
            margin-left: 2px;
        }

    .stat-card.primary .s-value {
        color: var(--g-700);
        font-size: 34px;
    }

    .stat-card .s-delta {
        font-size: 11.5px;
        font-weight: 700;
        color: var(--g-600);
        margin-top: 4px;
    }

    .stat-card .s-value-sm {
        font-size: 20px;
        font-weight: 900;
        color: var(--ink);
        line-height: 1.2;
    }