/**
 * chuju共通モジュール統合CSS
 * 中受アプリ（histyear / geogdata / 単語帳）共通の新しいUIパターン
 *
 * ルール: 各アプリが自分の styles_[appname].css で定義済みのスタイルは
 * ここに書かない。このファイルはアプリ横断の新パターンのみ収録する。
 *
 * @author Riverside Lab
 */

/* =================================== */
/* 中受共通：Bootstrap 5 UIパターン   */
/* histyear / geogdata / 単語帳 共用  */
/* =================================== */

/* 3ボタン等幅グリッド（成績照会/ネーム変更/データ削除用）
   ※ CSS loading order の問題を回避するため、使用側HTMLでは
      必ず style="display:grid;grid-template-columns:repeat(3,1fr);gap:3px;"
      のインラインスタイルも併記すること（histyear / geogdata 参照）。  */
.chuju-action-btns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
}

/* =================================== */
/* 設定パネル: グリッドレイアウト       */
/* histyear / geogdata 共通            */
/* =================================== */

/* 詳細設定グリッド（ラベル3.5rem + 選択肢×3列）*/
.setting-grid {
    display: grid;
    grid-template-columns: 3.5rem repeat(3, max-content);
    column-gap: 4px;
}
.setting-grid-label {
    display: flex;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: .8rem;
    font-weight: 600;
    color: #6c757d;
    white-space: nowrap;
}
.setting-grid-opt {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: .78rem;
    white-space: nowrap;
}
.setting-grid-opt .form-check-input { flex-shrink: 0; margin: 0; cursor: pointer; }
.setting-grid-opt label { cursor: pointer; line-height: 1.2; }
/* 最終行のborder-bottomを消す */
.setting-grid > :nth-last-child(-n+4) { border-bottom: none; }

/* 形式行（grid外・flex wrap） */
.setting-row-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 0;
}
.setting-label-plain {
    font-size: .8rem;
    font-weight: 600;
    color: #6c757d;
    min-width: 3.5rem;
    flex-shrink: 0;
    white-space: nowrap;
}

/* ※ .form-sub-options はアプリ別に仕様が異なるため各アプリ CSS で定義 */