/* ============================================================
 * 共通UIコンポーネント CSS
 * 対応する React コンポーネント: src/components/ui/
 *
 * 読み込み順:
 *   index.html で app.css の直後に読み込む（:root トークンを参照するため）。
 *
 * 設計方針（重要）:
 *   - ボタンの塗り(primary/danger/secondary/矢印)は style.css の
 *     .custom-form-control-btn-* / .modal-*-btn に既に集約済み。
 *     並行系を作らないため、ここでは再定義しない。
 *     <Button> コンポーネントはそれらの既存クラスを出力する。
 *   - フォーム入力そのものは Bootstrap/AdminLTE の .form-control を維持する
 *     （移行済み画面と未移行画面で見た目が割れないようにするため）。
 *   - このファイルには「既存に無い共通部品」だけを定義する:
 *       フォームのラベル/エラー枠 (.c-field*)
 *       テキストボタン (.c-btn-link*)
 *       トグルスイッチ (.c-switch*)
 *       ラジオ/チェックの並び (.c-choice-group*)
 *       汎用カード (.c-card)
 * ============================================================ */

/* ------------------------------------------------------------
 * フォームフィールド（ラベル + エラーの共通枠）
 * 既存の4方言を <Field> でこの構造に一本化する:
 *   - col-form-label + span.invalid-feedback
 *   - form-group + div.text-danger.small
 *   - sso-form-row + sso-label + sso-error
 *   - simple-form-group + simple-form-label
 * 入力は Bootstrap .form-control を維持。
 * ------------------------------------------------------------ */
.c-field {
    margin-bottom: var(--space-4);
}
.c-field:last-child {
    margin-bottom: 0;
}
.c-field__label {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}
.c-field__required {
    margin-left: 2px;
    color: var(--color-danger);
}
.c-field__optional {
    margin-left: var(--space-1);
    font-size: var(--font-xxs);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-subtle);
}
.c-field__error {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--font-xs);
    color: var(--color-danger-dark);
}
/* is-invalid 入力の枠色（Bootstrap の .invalid-feedback 表示に依存しない補助） */
.c-field .form-control.is-invalid {
    border-color: var(--color-danger);
}

/* ------------------------------------------------------------
 * テキストボタン（塗りなし）
 * 既存の集約系(custom-form-control-btn-*)に無い variant のみここで定義。
 * text-danger bg-transparent border-0 等の手書きを置き換える。
 * ------------------------------------------------------------ */
.c-btn-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: 0 var(--space-2);
    background: transparent;
    border: none;
    font-size: var(--font-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-link);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--transition-base), opacity var(--transition-base);
}
.c-btn-link:hover {
    color: var(--color-link-hover);
    text-decoration: none;
}
.c-btn-link--danger {
    color: var(--color-danger);
}
.c-btn-link--danger:hover {
    color: var(--color-danger-dark);
}
.c-btn-link--muted {
    color: var(--color-text-muted);
}
.c-btn-link--muted:hover {
    color: var(--color-text);
}
.c-btn-link:disabled,
.c-btn-link.is-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* 塗りボタン内アイコンの共通余白（<Button icon={...}> 用） */
.c-btn__icon {
    display: inline-flex;
    align-items: center;
    margin-right: var(--space-1);
}

/* ------------------------------------------------------------
 * トグルスイッチ
 * settings-switch / records-toggle / fields-switch の3実装を統合。
 * <input type=checkbox> ベース（select/date ではないので LINE WebView 対象外）。
 * ------------------------------------------------------------ */
.c-switch {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 52px;
    height: 30px;
}
.c-switch input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}
.c-switch__slider {
    position: absolute;
    inset: 0;
    background-color: #d4dbe8;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background-color var(--transition-base);
}
.c-switch__slider::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 24px;
    height: 24px;
    background-color: var(--color-bg);
    border-radius: var(--radius-circle);
    box-shadow: 0 2px 5px rgba(20, 30, 60, 0.25);
    transition: transform var(--transition-base);
}
.c-switch input:checked + .c-switch__slider {
    background: var(--brand-gradient);
}
.c-switch input:checked + .c-switch__slider::before {
    transform: translateX(22px);
}
.c-switch input:disabled + .c-switch__slider {
    opacity: 0.5;
    cursor: not-allowed;
}
/* ラベル付きトグル行 */
.c-switch-row {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}
.c-switch-row__label {
    font-size: var(--font-sm);
    color: var(--color-text);
}

/* ------------------------------------------------------------
 * ラジオ / チェックの並び（<RadioGroup inline> 用）
 * 縦積みは Bootstrap .form-check をそのまま使う。
 * ------------------------------------------------------------ */
.c-choice-group--inline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
}
.c-choice-group--inline .form-check {
    margin-bottom: 0;
}

/* ------------------------------------------------------------
 * 汎用カード
 * ------------------------------------------------------------ */
.c-card {
    background: var(--color-bg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

/* ------------------------------------------------------------
 * 共通プルダウン <Select>（.c-select）の統一スタイル
 * 全画面でプルダウンの「色味」を揃える。サブサイドバー（白背景・
 * ブランドネイビー）に馴染むよう、枠・文字・矢印・フォーカスを
 * design token に統一する。
 *
 * - 高さ / 幅 / 余白などのサイズは各文脈のクラス（.form-control や
 *   .sub-sidebar-navbar-section select 等）に委ね、ここでは触らない。
 * - `select.c-select`（要素 + クラス）で specificity を稼ぎ、
 *   Bootstrap/AdminLTE の .form-control や単一クラスのページ指定を
 *   !important 無しで上書きする。
 * - LINE Android WebView 対応: appearance:none は付けない（ネイティブ矢印維持）。
 * ------------------------------------------------------------ */
select.c-select {
    color: var(--color-text);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
select.c-select:focus {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
    outline: none;
}
select.c-select:disabled {
    background-color: var(--color-bg-subtle);
    color: var(--color-text-subtle);
    cursor: not-allowed;
}

/* ------------------------------------------------------------
 * 汎用ユーティリティ
 * インラインスタイル style={{cursor:'pointer'}} を置き換えるためのクラス。
 * ------------------------------------------------------------ */
.cursor-pointer {
    cursor: pointer;
}

/* ------------------------------------------------------------
 * モーダル共通の余白
 *
 * 上下は常に 90px 空ける。.modal-dialog-centered / .modal-dialog-scrollable は
 * 「100% - 1rem」を前提にしているので、あわせて 180px 基準へ置き換える。
 * 幅は PC ではモーダルごとの指定（既定500px / modal-lg / modal-xl 等）のまま、
 * スマホ（<576px）だけ「画面幅 - 左右10px」に統一する。
 * ------------------------------------------------------------ */
:root {
    --modal-gap-y: 90px;
    --modal-gap-x: 10px;
    /* スマホ表示時の本文余白（PDFモーダルの .pdf-sheet-body に合わせる） */
    --modal-body-padding: 20px;
}

.modal-dialog {
    margin-top: var(--modal-gap-y);
    margin-bottom: var(--modal-gap-y);
}

.modal-dialog-centered {
    min-height: calc(100% - var(--modal-gap-y) * 2);
}

.modal-dialog-scrollable {
    max-height: calc(100% - var(--modal-gap-y) * 2);
}

/* Bootstrap は centered と scrollable を併用すると
   `.modal-dialog-centered.modal-dialog-scrollable .modal-content { max-height: none }`
   `.modal-dialog-centered.modal-dialog-scrollable { height: 100% }` を当てる。
   Modal.tsx は常に両方を付けるため、そのままだと本文の高い モーダル
   （ランキングエクスポート等）で .modal-content が画面より高くなり、
   上下中央寄せの結果はみ出した下端（ボタン群）が画面外へ出て、
   スクロールしても到達できなくなる。
   併用時も高さ制限を効かせ、本文（.modal-body）側をスクロールさせる。 */
.modal-dialog-scrollable .modal-content,
.modal-dialog-centered.modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - var(--modal-gap-y) * 2);
}

/* dialog 自身の高さも上下マージンぶん差し引く（Bootstrap 既定の height:100% だと
   上下 90px のマージンぶん余計にスクロールできてしまう） */
.modal-dialog-centered.modal-dialog-scrollable {
    height: calc(100% - var(--modal-gap-y) * 2);
}

/* スマホは全モーダルの見た目を揃える（幅・本文余白）。
   幅は「画面幅 - 左右10px」、本文余白は 20px に統一する。

   本文余白の !important は、Bootstrap のユーティリティ（.p-5 / .p-4 = padding !important）
   を上書きするために必要。クラス側の特異度（.modal-body.p-5 = 0,2,0）を
   ユーティリティ（.p-5 = 0,1,0）より高くした上での最小限の使用にとどめている。 */
@media screen and (max-width: 575.98px) {
    .modal-dialog {
        max-width: none;
        width: auto;
        margin-left: var(--modal-gap-x);
        margin-right: var(--modal-gap-x);
    }

    .modal-body,
    .modal-body.p-4,
    .modal-body.p-5 {
        padding: var(--modal-body-padding) !important;
    }
}

/* ------------------------------------------------------------
 * モーダル本文内のフッターボタン（.modal-sticky-footer）
 *
 * Bootstrap の .modal-footer ではなく .modal-body の末尾にアクション
 * ボタンを置いているモーダル用。本文が長くスクロールする時でも
 * ボタンが常に見えるよう、本文の下端へ貼り付ける。
 *
 * 本文の余白ぶん外側へ広げて背景を敷き、スクロールした本文が
 * ボタンの左右・下から透けないようにする。余白の値は本文の
 * パディング（.p-5 / .p-4 / スマホ 20px）に合わせる。
 * ------------------------------------------------------------ */
/* Bootstrap のパディングユーティリティは rem 基準（.p-5 = 3rem / .p-4 = 1.5rem、
   .modal-body 既定 = 1rem）。ルートの font-size に追従させるため rem のまま持つ。 */
.modal-body {
    --modal-footer-inset: 1rem;
}

.modal-body.p-4 {
    --modal-footer-inset: 1.5rem;
}

.modal-body.p-5 {
    --modal-footer-inset: 3rem;
}

@media screen and (max-width: 575.98px) {

    .modal-body,
    .modal-body.p-4,
    .modal-body.p-5 {
        --modal-footer-inset: var(--modal-body-padding);
    }
}

/* bottom を余白ぶんマイナスにして、ボタン帯の下端が本文の可視領域の
   下端（パディングボックス下端）にぴったり付くようにする。
   区切り線は border-top で引く（疑似要素だと .d-flex と併用したときに
   flex アイテムとして横に並んでしまうため）。 */
.modal-sticky-footer {
    position: sticky;
    bottom: calc(var(--modal-footer-inset) * -1);
    z-index: 2;
    margin: 16px calc(var(--modal-footer-inset) * -1) calc(var(--modal-footer-inset) * -1);
    padding: 12px var(--modal-footer-inset) var(--modal-footer-inset);
    border-top: 1px solid #eef1f8;
    background-color: #ffffff;
}

/* ------------------------------------------------------------
 * モーダルの重なり順
 *
 * Bootstrap 既定は backdrop:1040 / modal:1050 だが、アプリの固定ヘッダー
 * （.mobile-header = --z-mobile-header:1050）やサイドバードロワー（1055）の方が
 * 前面にあるため、黒いオーバーレイがヘッダー部分に掛からなかった。
 * モーダル一式をアプリのクロームより前面へ引き上げる。
 *
 * 入れ子モーダル（Modal の zIndex プロパティ）は 1071 を使う。
 * Modal.tsx が backdrop を zIndex-5（=1066）に置くため、
 * 1060(親backdrop) < 1061(親modal) < 1066(子backdrop) < 1071(子modal) の順になる。
 * ------------------------------------------------------------ */
.modal-backdrop {
    z-index: 1060;
}

.modal {
    z-index: 1061;
}

/* ------------------------------------------------------------
 * モーダル（Bootstrap .modal-content の共通ベース）
 *
 * Bootstrap 既定は border-radius:.3rem（約4.8px）＋1px枠線＋強い黒影のため、
 * PDFモーダル（.pdf-sheet）や独自オーバーレイ（.training-modal-card /
 * .tm-modal-card / .invite-modal-card = いずれも 16px）と角の丸みが揃わない。
 * ここで全モーダル共通のベースとして 16px・枠線なし・やわらかい影に統一する。
 *
 * adminlte.min.css（Bootstrap 同梱）より後に読み込まれるため、同特異度でも
 * こちらが勝つ。!important は使わない。
 *
 * overflow:hidden は付けない：モーダル内の SearchableSelect などの
 * ドロップダウンがはみ出して表示される必要があるため。角丸の内側に自前の
 * 背景を敷くモーダル（PDFモーダル等）は各自で overflow:hidden を持つ。
 * ------------------------------------------------------------ */
.modal-content {
    border: none;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(20, 30, 60, 0.24);
}

/* ------------------------------------------------------------
 * モーダル共通ヘッダー（PDFモーダルのデザインを全モーダルで共有）
 *
 * アイコン + タイトル（+ サブタイトル） + 閉じるボタンを、テーマカラーの
 * ブルーグラデーション帯で表示する。ModalHeader コンポーネントが出力する。
 *
 * .modal-content には overflow:hidden を付けていない（モーダル内の
 * ドロップダウンがはみ出せるようにするため）ので、ヘッダー自身が
 * 上端の角丸を持つ。モーダルの最初の子として置くこと。
 * ------------------------------------------------------------ */
.app-modal-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #1D4696 0%, #2E6FCC 50%, #4DA0EC 100%);
    color: #ffffff;
    border-radius: 16px 16px 0 0;
}

.app-modal-header-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.18);
    font-size: 18px;
}

.app-modal-header-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.app-modal-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: #ffffff;
}

.app-modal-subtitle {
    font-size: 12px;
    opacity: 0.85;
}

.app-modal-close {
    margin-left: auto;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.app-modal-close:hover {
    background-color: rgba(255, 255, 255, 0.3);
}