/* ==========================================================================
 * 教育ProCloud の画面の型の色と、教育だけの部品（2026-10-12 警備デザイン寄せ。2026-10-17 に型を shared へ移した）
 *
 * 型そのもの（見出し段・カード・フォームの格子・一覧の表・検索条件の開閉・タブ・明細の表など）は shared の
 * core/css/ui_page.css（全アプリ共通）に移した。ここに残すのは:
 *   - :root の色（教育の緑。shared の既定は警備Pro の青）
 *   - 教育の画面だけにある部品（印刷のボタン・検索補助のボタン・行の button・隊員の帯・実施者一括セット・
 *     指導計画のカレンダーの表・支店の権限の帯・「〜」の欄・欄の中のラジオの左寄せ）
 * base.html で core/css/ui_page.css の後に読む。画面ごとの調整は {% block css %} の後で上書きする。
 * 型の動き（見出し段の高さを測る・検索条件の開閉・表の横スクロール）も shared の core/js/ui_page.js。
 * ========================================================================== */
:root {
    --kp-ui-primary: #00A95F;
    --kp-ui-primary-dark: #00874C;
    --kp-ui-primary-deep: #00693C;
    --kp-ui-primary-soft: #E9F7F0;
    --kp-ui-primary-soft-border: #D2EFE0;
    --kp-ui-primary-line: #9fd5bb;
    --kp-ui-primary-ring: rgba(0, 169, 95, .14);
    --kp-ui-primary-shadow: rgba(0, 169, 95, .2);
    --kp-ui-primary-shadow-soft: rgba(0, 169, 95, .08);
    --kp-ui-table-head: #f1f6f4;
}

/* 「〜」の前後の欄（期間）。style.css の .tilde は上の余白で位置を合わせているので、input-group の中では中央にそろえる */
.kp-search-card .input-group > .tilde {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    padding: 0 .5rem;
    color: var(--kp-ui-muted);
}

/* ===== 教育の画面だけの部品（2026-10-12 に画面の {% block css %} から移したもの） ===== */
/* 印刷のボタン（scripts.js が .btn_print で印刷のモーダルを開く）。style.css が .btn_print を !important で橙に塗るので、副ボタンの形に戻す */
.btn_print.kp-btn-secondary {
    color: var(--kp-ui-primary) !important;
    background: #fff !important;
    border: 1px solid var(--kp-ui-primary-line) !important;
}

.btn_print.kp-btn-secondary:hover:not(:disabled),
.btn_print.kp-btn-secondary:focus:not(:disabled) {
    color: #fff !important;
    background: var(--kp-ui-primary) !important;
    border-color: var(--kp-ui-primary) !important;
}

/* 検索補助を開くボタン（id は JS が使う）。style.css が id で橙・幅 5vw にしているので、小さい副ボタンの形に戻す */
#btn_haichi_search.kp-btn-secondary,
#btn_taiin_search.kp-btn-secondary,
#btn_tokui_search.kp-btn-secondary {
    display: inline-flex;
    width: auto;
    min-width: 0;
    color: var(--kp-ui-primary);
    background: #fff;
    border: 1px solid var(--kp-ui-primary-line);
    font-size: .85rem;          /* style.css の id の 15px を kp-btn-sm の大きさに戻す */
}

#btn_haichi_search.kp-btn-secondary:hover,
#btn_haichi_search.kp-btn-secondary:focus,
#btn_taiin_search.kp-btn-secondary:hover,
#btn_taiin_search.kp-btn-secondary:focus,
#btn_tokui_search.kp-btn-secondary:hover,
#btn_tokui_search.kp-btn-secondary:focus {
    color: #fff !important;     /* style.css の :hover が color を !important で橙にする */
    background: var(--kp-ui-primary);
    border-color: var(--kp-ui-primary);
}

/* 一覧の行の編集ボタン（button の画面と、Bootstrap の .btn を付けた a。.btn の余白・枠を消して上の a と同じ形にする） */
.kp-row-action button.btn,
.kp-row-action a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    color: var(--kp-ui-primary);
    background: var(--kp-ui-primary-soft);
    border: 0;
    border-radius: .4rem;
}

.kp-row-action button.btn:hover,
.kp-row-action button.btn:focus,
.kp-row-action a.btn:hover,
.kp-row-action a.btn:focus {
    color: #fff;
    background: var(--kp-ui-primary);
}

/* 欄の中の横並びのラジオ（BaseCodeRadioField など）を左にそろえる */
.kp-field > .form-check-inline {
    padding-left: 0;
}

/* 隊員の帯（sidebar/taiin_view.html を包むカード。名簿の画面の左） */
.kp-taiin-card {
    padding: .75rem 0;
}

.kp-taiin-card > .nav-item,
.kp-taiin-card .text_lg {
    width: 100%;
}

.kp-taiin-card #taiinview_left {
    padding-inline: .75rem;
}

/* 実施者一括セットの枠（幅 750px 固定）がカードの余白の分はみ出さないように */
.kp-form-card .batch_set_area {
    width: calc(100% - 11px);
    max-width: 750px;
    margin-right: 0;
}

/* 横並びのラジオ（BaseCodeRadioField など）。input にも form-check のクラスが付き、狭い欄では選択肢の文字が
   「新任／教育」のように折り返していたので 1 行にする（2026-10-12。mst_01081 の画面ごとの指定から） */
.kp-page .form-check-inline > div > label {
    white-space: nowrap;
}

/* ===== 月のカレンダーの表（指導計画管理の dpi_04010・dsp_04020。2026-10-12） =====
   1 日〜31 日の列があるので DataTables の横・縦スクロール（scrollX・scrollY）で出す。見出しは DataTables が別の表に写すので、
   kp-table の貼り付く見出しは使わず、色・線・文字だけ一覧の表（kp-table）にそろえる。
   <div class="kp-card kp-calendar-card"><table class="table table-sm table-bordered table-hover kp-calendar-table">… */
.kp-calendar-card {
    padding: .75rem 1rem;
}

table.kp-calendar-table {
    margin-bottom: 0;
    border-color: var(--kp-ui-table-line);
}

/* style.css の .table thead（緑の地・白い文字）を打ち消す */
table.kp-calendar-table > thead {
    color: inherit;
    background: transparent;
}

/* style.css の table.dataTable thead th / tbody td が余白を !important で決めているので、それより強く書く
   （DataTables が付ける .dataTable が無くても効く書き方。組み立てる前に古い形で見えないように）。
   1 日〜31 日の列は 25px ほどになるので、左右の余白は小さくする（広いと〇が欠ける） */
table.kp-calendar-table > thead > tr > th {
    padding: .55rem .2rem !important;
    color: var(--kp-ui-label);
    background: var(--kp-ui-table-head);
    border-color: var(--kp-ui-border);
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
    vertical-align: middle;
}

/* 並べ替えの矢印（DataTables の ::before / ::after。右端）に文字が重ならないよう、並べ替えできる列は右を空ける */
table.kp-calendar-table > thead > tr > th.sorting,
table.kp-calendar-table > thead > tr > th.sorting_asc,
table.kp-calendar-table > thead > tr > th.sorting_desc {
    padding-right: 1.6rem !important;
}

table.kp-calendar-table > tbody > tr > td {
    height: 2.2rem;
    padding: .2rem .15rem !important;
    background: #fff;
    border-color: var(--kp-ui-table-line);
    vertical-align: middle;
}

table.kp-calendar-table > tbody > tr:nth-child(even) > td {
    background: var(--kp-ui-table-stripe);
}

/* 横スクロールの本文側の表にも、列の幅を測るための見出しの行が高さ 0 で残る（DataTables が style で余白 0 にしている）。
   上の余白の指定（!important）がそれを打ち消して空の帯が出るので、本文側の見出しは高さ 0 に戻す */
.dataTables_scrollBody table.kp-calendar-table > thead > tr > th {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: transparent;
    border-top-width: 0;
    border-bottom-width: 0;
}

/* 表の中の読み取り専用の入力欄（隊員別指導監督予定入力。ダブルクリックで〇を入れる）は、枠を消して文字だけにする */
table.kp-calendar-table input.tbl_input {
    width: 100%;
    padding: 0;
    color: inherit;
    text-align: center;
    background: transparent;
    border: 0;
    outline: 0;
    box-shadow: none;
    cursor: default;
}

/* 表の上の記号の凡例（〇：予定日 など）と操作の説明 */
.kp-calendar-legend {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    padding: .5rem .9rem;
    color: var(--kp-ui-text);
    background: #fff;
    border: 1px solid var(--kp-ui-border);
    border-radius: .5rem;
    font-size: .9rem;
}

.kp-calendar-help {
    color: var(--kp-ui-danger);
    font-size: .88rem;
    text-align: right;
}

/* 月送りのボタン（前月・次月）。入力欄と同じ高さの、文字の無い小さな副ボタン */
.kp-month-nav {
    display: flex;
    gap: .35rem;
}

.kp-month-nav .kp-btn-secondary {
    min-width: 2.6rem;
    min-height: calc(1.5em + .75rem + 2px);
    padding: 0 .6rem;
}

/* ===== 読み込み直後のちらつきを防ぐ（2026-10-12） =====
   支店の権限の帯（message_bar_kengen。権限の無い支店を選んだときに JS が .show() で出す）は、最初から隠す。
   以前は読み込みの後に JS が隠していたので、その間だけ本文が帯の高さの分（約 65px）下にずれていた */
.message_bar_kengen {
    display: none;
}