/* ==========================================================================
 * 画面の型（全アプリ共通。2026-10-17）
 *
 * 警備Pro が 2026-10-11 に整えた新しい画面の型（見出し段・カード・フォームの格子・薄い見出し行の一覧の表）を、
 * 固定のクラス名（kp-page-*・kp-card など）で 1 か所にまとめたもの。教育Pro（2026-10-12）・スマホdeサイン（2026-10-17）が
 * それぞれ持っていた ui_page.css をここへ集めた。警備Pro 自身の画面は画面ごとの接頭辞付きのクラス（mst10800-* など）のまま。
 *
 * 色は :root の変数だけで決める（直書きの色を使わない）。既定は警備Pro の青。アプリは、このファイルの後に読む
 * 自分の CSS で :root の --kp-ui-primary* と --kp-ui-table-head を上書きして自分の基調色にする。
 *
 * 使うアプリの base.html:
 *   <link rel="stylesheet" href="{% static 'core/css/ui_page.css' %}">   ← アプリの CSS より前
 *   <link rel="stylesheet" href="{% static '<アプリ>/css/…' %}">           ← :root の色の上書き
 *   <script src="{% static 'core/js/ui_page.js' %}"></script>             ← 見出し段の高さを測る・検索条件の開閉など
 *
 * 型（テンプレート側）:
 *   <div id="page-content-wrapper" class="kp-page">
 *     <div class="container toptitle-fix kp-page-header"> 見出し段 </div>
 *     <main class="kp-page-main"> … <div class="kp-card"> … </div> … </main>
 *   </div>
 * 見出し段の高さは core/js/ui_page.js が測り、--kp-fixed-bottom（ヘッダー＋見出し段の下端）と --screen-titlebar-h に入れる。
 * フォームの欄は label → 入力 → p.valid_text の並びと valid_line を残す（各アプリの入力エラーの表示が頼っている）。
 * モーダルは .kp-card・見出し段の中に置かない（isolation・sticky が重なりの基準になり、背景の幕の下に隠れる）。
 * 共通の担当者マスタ（core/mtanto_list.html・mtanto_form.html・mtanto_kengen.html）もこの型で書いてある。
 * ========================================================================== */
:root {
    --kp-ui-primary: #2f94cc;
    --kp-ui-primary-dark: #247eae;
    --kp-ui-primary-deep: #1d6a93;
    --kp-ui-primary-soft: #eaf5fb;
    --kp-ui-primary-soft-border: #c9e4f2;
    --kp-ui-primary-line: #9ac7df;
    --kp-ui-primary-ring: rgba(47, 148, 204, .14);
    --kp-ui-primary-shadow: rgba(47, 148, 204, .2);
    --kp-ui-primary-shadow-soft: rgba(47, 148, 204, .08);
    --kp-ui-text: #24313a;
    --kp-ui-heading: #1f303a;
    --kp-ui-label: #42515b;
    --kp-ui-muted: #647481;
    --kp-ui-border: #d9e3ea;
    --kp-ui-input-border: #cbd7df;
    --kp-ui-surface: #f7f9fb;
    --kp-ui-table-head: #f1f6f9;
    --kp-ui-table-line: #e1e8ed;
    --kp-ui-table-stripe: #fafbfc;
    --kp-ui-danger: #b42318;
    --kp-ui-danger-line: #e5a7a2;
}

/* ===== 本文の枠 ===== */
.kp-page {
    width: 100%;
    min-width: 0;
    min-height: calc(100vh - 60px);
    color: var(--kp-ui-text);
    background: var(--kp-ui-surface);
}

/* ===== 見出し段（題名・説明・パンくず・操作ボタン） ===== */
/* .container.toptitle-fix（core/css/screen.css）より強くするため、2 つのクラスで書く */
.toptitle-fix.kp-page-header {
    position: sticky;
    top: 60px;
    z-index: 1030;              /* ヘッダー（1150）・サイドバー（1100）・確認モーダル（1055）より下 */
    max-width: none;
    padding: 1rem 1.5rem .9rem;
    background: rgba(255, 255, 255, .98);
    border-bottom: 1px solid var(--kp-ui-border);
    box-shadow: 0 3px 12px rgba(23, 43, 58, .04);
}

.kp-page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
}

.kp-page-title-area {
    min-width: 15rem;
}

.kp-page-title {
    margin: 0;
    color: var(--kp-ui-heading);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .01em;
}

.kp-page-description {
    margin: .3rem 0 0;
    color: var(--kp-ui-muted);
    font-size: .86rem;
}

.kp-page-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem .65rem;
    margin-top: .3rem;
}

.kp-page-meta .kp-page-description {
    margin: 0;
}

.kp-mode-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.55rem;
    padding: .1rem .55rem;
    color: var(--kp-ui-primary-deep);
    background: var(--kp-ui-primary-soft);
    border: 1px solid var(--kp-ui-primary-soft-border);
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
}

.kp-page-breadcrumb {
    margin-top: .25rem;
    color: var(--kp-ui-muted);
    font-size: .78rem;
}

.kp-page-breadcrumb .breadcrumb {
    margin-bottom: 0;
}

/* 本文の上の説明（表の前に置く小さな文） */
.kp-page-note {
    margin: 0 0 1rem;
    color: var(--kp-ui-muted);
    font-size: .8rem;
}

/* ===== 操作ボタン（役割で分ける: 主・副・削除） ===== */
.kp-page-actions {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .5rem;
}

.kp-page-actions .btn,
.kp-btn-primary,
.kp-btn-secondary,
.kp-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 7.5rem;
    min-height: 2.45rem;
    padding-inline: 1rem;
    border-radius: .45rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.kp-btn-primary {
    color: #fff;
    background: var(--kp-ui-primary);
    border: 1px solid var(--kp-ui-primary);
    box-shadow: 0 1px 2px var(--kp-ui-primary-shadow);
}

.kp-btn-primary:hover,
.kp-btn-primary:focus {
    color: #fff;
    background: var(--kp-ui-primary-dark);
    border-color: var(--kp-ui-primary-dark);
}

.kp-btn-secondary {
    color: var(--kp-ui-primary);
    background: #fff;
    border: 1px solid var(--kp-ui-primary-line);
    box-shadow: 0 1px 2px var(--kp-ui-primary-shadow-soft);
}

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

.kp-btn-danger {
    color: var(--kp-ui-danger);
    background: #fff;
    border: 1px solid var(--kp-ui-danger-line);
}

.kp-btn-danger:hover,
.kp-btn-danger:focus {
    color: #fff;
    background: var(--kp-ui-danger);
    border-color: var(--kp-ui-danger);
}

.kp-btn-primary:disabled,
.kp-btn-secondary:disabled,
.kp-btn-danger:disabled {
    cursor: not-allowed;
    opacity: .55;
}

/* ===== 本文 ===== */
.kp-page-main {
    width: 100%;
    min-width: 0;
    padding: 1.25rem 1.5rem 4rem;
}

/* 白いカード。角を丸めつつ中の見出し行を貼り付けられるよう、overflow は hidden ではなく clip。
   isolation: カードを重なりの基準にする（中のページ送りなどが白地の下に隠れないように） */
.kp-card {
    width: 100%;
    margin: 0 0 1rem;
    overflow: clip;
    isolation: isolate;
    background: #fff;
    border: 1px solid var(--kp-ui-border);
    border-radius: .65rem;
    box-shadow: 0 4px 14px rgba(23, 43, 58, .04);
}

/* ===== 一覧の表 ===== */
.kp-table-scroll {
    width: 100%;
}

.kp-table {
    min-width: 36rem;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

/* アプリの CSS の .table thead（基調色の地・白い文字）を打ち消す。見出しの色は th に付ける */
.kp-table > thead,
.kp-detail-table > thead {
    color: inherit;
    background: transparent;
}

/* 見出し行は見出し段のすぐ下に貼り付く（--kp-fixed-bottom は core/js/ui_page.js が測る）。
   DataTables は並べ替えできる見出しに position: relative を当てる（table.dataTable thead>tr>th.sorting）ので、
   それより強い書き方でも sticky にする（relative のままだと top の分だけ下にずれる） */
.kp-table > thead > tr > th,
table.dataTable.kp-table > thead > tr > th.sorting,
table.dataTable.kp-table > thead > tr > th.sorting_asc,
table.dataTable.kp-table > thead > tr > th.sorting_desc,
table.dataTable.kp-table > thead > tr > th.sorting_asc_disabled,
table.dataTable.kp-table > thead > tr > th.sorting_desc_disabled {
    position: sticky;
    top: var(--kp-fixed-bottom, 120px);
    z-index: 2;
}

/* 余白は警備Pro の一覧（mst_10800 など）と同じ指定。各アプリの CSS の table.dataTable thead th / tbody td（余白 5px 10px
   !important）が DataTables の表では勝つので、警備Pro と同じく実際はその余白になる（ここでは !important にしない。
   2026-10-17 にサインで !important にしたら、警備より行が高くなった）。
   スマホdeサインの sign.css は td に橙の全周の枠も付けているので、枠だけはこちらを強くして下線だけに戻す */
.kp-table > thead > tr > th {
    padding: .75rem .65rem;
    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;
}

.kp-table > tbody > tr > td {
    padding: .7rem .65rem;
    border-color: var(--kp-ui-table-line);
    vertical-align: middle;
}

table.dataTable.kp-table > tbody > tr > td {
    border-style: solid;
    border-color: var(--kp-ui-table-line);
    border-width: 0 0 1px;
}

.kp-table > tbody > tr:last-child > td {
    border-bottom-width: 0;
}

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

/* 使えない行（有効フラグ OFF の担当者など。Bootstrap の table-secondary）。縞（偶数行の td の背景）に負けないよう td に当てる */
.kp-table > tbody > tr.table-secondary > td {
    background: var(--kp-ui-table-line);
}

/* 遅れ・注意の行（Bootstrap の table-danger。備品の返却遅れなど）。縞に負けないよう td に当てる（2026-10-17） */
.kp-table > tbody > tr.table-danger > td {
    background: var(--bs-table-bg);
}

/* 編集・参照のアイコン */
.kp-row-action a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--kp-ui-primary);
    background: var(--kp-ui-primary-soft);
    border-radius: .4rem;
    text-decoration: none;
}

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

/* 表が空のときの 1 行（{% empty %}） */
.kp-table-empty {
    color: var(--kp-ui-muted);
    text-align: center;
}

/* ===== 入力フォーム ===== */
.kp-form-card {
    max-width: 64rem;
    padding: 1.25rem 1.5rem 1.5rem;
}

.kp-section-heading {
    margin-bottom: 1.15rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid #e7edf1;
}

.kp-section-heading h2 {
    margin: 0;
    color: var(--kp-ui-text);
    font-size: 1rem;
    font-weight: 700;
}

.kp-section-heading p {
    margin: .25rem 0 0;
    color: var(--kp-ui-muted);
    font-size: .8rem;
}

/* 欄の格子。幅 16rem 以上の列を入るだけ並べる。欄の幅は .kp-field-sm（コードなどの短い欄）・.kp-field-wide（2 列分）・
   .kp-field-full（1 行まるごと）で変える */
.kp-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1.15rem 1.5rem;
    align-items: start;
}

.kp-form-grid + .kp-form-grid {
    margin-top: 1.15rem;
}

.kp-field {
    min-width: 0;
}

.kp-field-wide {
    grid-column: span 2;
}

.kp-field-full {
    grid-column: 1 / -1;
}

.kp-field-sm .form-control,
.kp-field-sm .form-select,
.kp-field-sm input[type="text"] {
    max-width: 10rem;
}

.kp-field > label {
    display: block;
    margin-bottom: .35rem;
    color: var(--kp-ui-label);
    font-size: .86rem;
    font-weight: 600;
}

.kp-field .form-control,
.kp-field .form-select,
.kp-field select,
.kp-field input[type="text"] {
    width: 100%;
    min-height: 2.5rem;
    border-color: var(--kp-ui-input-border);
    border-radius: .4rem;
}

.kp-field .form-control:focus,
.kp-field .form-select:focus,
.kp-field select:focus,
.kp-field input:focus {
    border-color: var(--kp-ui-primary);
    box-shadow: 0 0 0 .2rem var(--kp-ui-primary-ring);
}

/* 欄の中の横並びのラジオの選択肢の文字を折り返さない。
   「欄の中のラジオを左にそろえる（padding-left: 0）」は入れない（Bootstrap の form-check-inline の中に input を直接置く
   書き方では、左の余白を消すと丸と文字が重なる。教育Pro は自分の CSS で入れている） */
.kp-page .form-check-inline > label {
    white-space: nowrap;
}

/* 欄の横に置くボタン（追加・一括セットなど）。ラベルの分だけ下げて入力欄と高さをそろえる */
.kp-field-button {
    padding-top: 1.65rem;
}

.kp-field-button .btn {
    min-height: 2.5rem;
}

/* ラベルの無いチェックボックスの欄（格子の中で、ラベル付きの欄と高さをそろえる）。
   ラベルの分だけ下げ、入力欄と同じ高さの中で縦の中央に置く。複数並べてよい（2026-10-17。備品の検索条件・登録画面から） */
.kp-field-check {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 1.25rem;
    min-height: 2.5rem;
    margin-top: 1.65rem;
}

.kp-field-check .form-check {
    margin-bottom: 0;
}

/* ラベルの無いチェックボックスを横に並べる（欄の格子の外。下げない） */
.kp-field-checks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 2rem;
}

.kp-field-checks .form-check {
    margin-bottom: 0;
}

/* 登録済みの画像の見本（備品・車両の画像など） */
.kp-file-preview img {
    max-height: 160px;
    max-width: 100%;
    border: 1px solid var(--kp-ui-border);
    border-radius: .4rem;
}

/* 題名の横の補足（対象の年月・車両など。<h1 class="kp-page-title">題名 <small>補足</small></h1>） */
.kp-page-title small {
    color: var(--kp-ui-muted);
    font-size: .8em;
    font-weight: 400;
}

/* カードの中の小見出し（1 枚のカードに区切りが複数あるとき） */
.kp-subheading {
    margin: 1.25rem 0 .75rem;
    padding-bottom: .4rem;
    color: var(--kp-ui-text);
    border-bottom: 1px solid #e7edf1;
    font-size: .92rem;
    font-weight: 700;
}

/* 欄の多い入力画面は、フォームのカードを幅いっぱいにする（既定は 64rem まで） */
.kp-form-card.kp-wide {
    max-width: none;
}

/* パスワードの欄と目のボタン（表示・非表示の切替）。ボタンは欄の右端に重ねる。
   core/js/master/mtanto_form.js の kpTogglePassword は「入力欄の親の中の .password_view」を探すので、入力欄と
   ボタンを同じ .password_wrapper に入れる */
.password_wrapper {
    position: relative;
}

.password_wrapper input {
    padding-right: 2.5rem;
}

.password_wrapper button.password_view {
    position: absolute;
    top: 50%;
    right: .65rem;
    padding: 0;
    color: var(--kp-ui-muted);
    background: transparent;
    border: 0;
    transform: translateY(-50%);
}

/* パスワードの要件の案内（入力欄の下）と確認用との一致（core/js/master/mtanto_password.js が ☑ / ✕ を付ける。2026-10-17） */
.kp-password-note,
.kp-password-match {
    display: block;
    margin-top: .35rem;
    color: var(--kp-ui-muted);
    font-size: .78rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.kp-password-note ul {
    margin: 0;
    padding-left: 1.25rem;
}

/* 編集画面のパスワード: 見出しの右に「パスワードを変更する」を置き、押したときだけ欄を開く。
   閉じているときは見出しだけのカード（見出しの下の線・余白を消す） */
.kp-password-heading-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem 1rem;
}

.kp-password-card.is-collapsed .kp-section-heading {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

/* ===== 検索条件（開閉式。既定は開く。閉じた状態は画面ごとに覚える: core/js/ui_page.js） =====
   <section class="kp-card kp-search-card">
     <button type="button" class="btn kp-search-toggle-btn" data-bs-toggle="collapse" data-bs-target="#kpSearchPanel"
             aria-expanded="true" aria-controls="kpSearchPanel">… 検索条件 <i class="fas fa-chevron-down kp-search-chevron"></i></button>
     <div class="collapse show kp-search-panel" id="kpSearchPanel" data-kp-search-panel> 欄（input-group ＋ input-group-text） </div>
   </section>
   検索・クリアのボタンは見出し段に置く */
.kp-search-card {
    padding: 1rem 1.25rem;
}

.kp-search-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 2.35rem;
    padding: .4rem .9rem;
    color: var(--kp-ui-primary);
    background: var(--kp-ui-primary-soft);
    border: 1px solid var(--kp-ui-primary-soft-border);
    border-radius: .4rem;
    font-weight: 600;
}

.kp-search-toggle-btn:hover,
.kp-search-toggle-btn:focus-visible {
    color: #fff;
    background: var(--kp-ui-primary);
    border-color: var(--kp-ui-primary);
}

.kp-search-chevron {
    transition: transform .2s ease;
}

.kp-search-toggle-btn[aria-expanded="true"] .kp-search-chevron {
    transform: rotate(180deg);
}

.kp-search-panel {
    padding-top: .9rem;
}

.kp-search-card .input-group-text {
    min-width: 7.5rem;
    justify-content: flex-start;
    color: var(--kp-ui-label);
    background: #f4f7f9;
    border-color: var(--kp-ui-input-border);
    font-weight: 600;
}

/* 「〜」の区切り（input-group-text）はラベルの幅にしない */
.kp-search-card .input-group-text.kp-tilde {
    min-width: 0;
    justify-content: center;
    color: var(--kp-ui-muted);
    font-weight: 400;
}

.kp-search-card input,
.kp-search-card select {
    border-color: var(--kp-ui-input-border);
}

.kp-search-card input:focus,
.kp-search-card select:focus {
    border-color: var(--kp-ui-primary);
    box-shadow: 0 0 0 .2rem var(--kp-ui-primary-ring);
}

/* 検索欄の「ラベル（input-group-text）＋入力」をつなげる。入力を div で包んでいる欄は Bootstrap の input-group だけでは
   左の角が丸いまま残るため。角を落とすのはラベルの直後の欄だけ（「日付〜日付」の 2 つ目の欄などは丸いまま） */
.kp-search-card .input-group > .input-group-text + div > .form-control,
.kp-search-card .input-group > .input-group-text + div > .form-select,
.kp-search-card .input-group > .input-group-text + div > select {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* ===== タブ（カードの上に置く。選んだタブは基調色の下線） ===== */
.kp-page .nav-tabs {
    gap: .25rem;
    background: #fff;
    border-bottom: 1px solid var(--kp-ui-border);
}

.kp-page .nav-tabs .nav-link {
    color: var(--kp-ui-label);
    font-weight: 600;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
}

.kp-page .nav-tabs .nav-link:hover {
    color: var(--kp-ui-primary-dark);
    border-bottom-color: var(--kp-ui-primary-soft-border);
}

.kp-page .nav-tabs .nav-link.active {
    color: var(--kp-ui-primary-dark);
    background: transparent;
    border-bottom-color: var(--kp-ui-primary);
}

/* タブと中身を 1 枚のカードに入れるとき */
.kp-tab-card .tab-content {
    padding: .25rem 1.25rem 1.25rem;
    background: transparent;
    border: 0;
}

/* ===== 明細を入力する表（行を足す・消す画面） ===== */
/* DataTables を使わない表は、アプリの CSS の .table thead th{padding:0} と Bootstrap の tbody の 2px の線が残るので戻す */
.kp-detail-table > thead > tr > th {
    padding: .55rem .65rem;
    color: var(--kp-ui-label);
    background: var(--kp-ui-table-head);
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
    vertical-align: middle;
}

.kp-detail-table > tbody > tr > td {
    vertical-align: middle;
}

.kp-detail-table > :not(:first-child) {
    border-top: 1px solid var(--kp-ui-border);
}

/* ===== 補助 ===== */
/* カードの中の小さいボタン（行の追加・削除・メール送信など）。.kp-btn-secondary などと一緒に付ける */
.kp-btn-sm.kp-btn-primary,
.kp-btn-sm.kp-btn-secondary,
.kp-btn-sm.kp-btn-danger {
    min-width: 0;
    min-height: 2rem;
    padding: .25rem .65rem;
    font-size: .85rem;
}

/* 明細の表を入れるカードの余白 */
.kp-detail-card {
    padding: .75rem 1.25rem 1rem;
}

/* ===== 担当者・権限の画面（core/mtanto_kengen.html。警備Pro の mst_10400・教育Pro の mst_01030 と同じ形） ===== */
/* 担当者の選択欄を見出し段の直下に貼り付ける（core/css/screen.css の .fix-tanto を、この型の見出し段の高さに合わせる） */
.kp-page .fix-tanto {
    position: sticky;
    top: var(--kp-fixed-bottom, 120px);
    z-index: 9;
}

/* 権限一括セットの行（管理名・権限・ボタンを 1 行に） */
.kp-bulk-set {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .75rem 1rem;
}

.kp-bulk-set > .kp-field {
    flex: 0 1 18rem;
}

/* 権限の選択。列いっぱいに広げ、右に矢印の分をあける（背景色は core/js/master/mtanto_kengen.js が値ごとに付ける） */
.kp-kengen-table select.select_list {
    width: 100%;
    min-height: 2.25rem;
    padding: .3rem 2rem .3rem .55rem;
    color: #000;
    border: 1px solid var(--kp-ui-input-border);
    border-radius: .375rem;
}

/* ===== 狭い画面 ===== */
/* 表がカードに収まらないときだけ横スクロールにする（core/js/ui_page.js の updateTableScroll が .kp-table-scroll-x を付ける）。
   横スクロールの枠の中では、貼り付ける行がページではなく枠に対して貼り付き、top の分だけ表の途中へずれるので、
   そのときは貼り付けない。top: auto の sticky は relative と同じ（DataTables の並べ替えの矢印の基準のまま） */
.kp-table-scroll.kp-table-scroll-x {
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.kp-table-scroll-x .kp-table > thead,
.kp-table-scroll-x .kp-table > thead > tr > th,
.kp-table-scroll-x .dataTables_wrapper .row {
    top: auto !important;
}

@media (max-width: 1024px) {
    .kp-page-heading {
        display: block;
    }

    .kp-page-actions {
        justify-content: flex-start;
        margin-top: .75rem;
    }

    .kp-page-main {
        padding-inline: 1rem;
    }

    .kp-field-wide {
        grid-column: auto;
    }
}

@media (max-width: 575.98px) {
    .toptitle-fix.kp-page-header {
        padding: .85rem 1rem;
    }

    .kp-page-description {
        display: none;
    }

    .kp-page-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kp-page-actions .btn {
        width: 100%;
        min-width: 0;
    }

    .kp-page-main {
        padding: 1rem .75rem 3rem;
    }

    .kp-form-card {
        padding: 1rem;
    }

    .kp-form-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }
}

/* ===== 読み込み直後のちらつきを防ぐ ===== */
/* 読み込みの後に JS が中身を出し分ける部分は、出し分けが終わるまで隠す（JS が kp-js-pending を外す） */
.kp-js-pending {
    display: none;
}

/* DataTables が表を組み立て終わるまで隠す（core/js/ui_page.js が外す。読み込みの完了でも必ず外す）。
   display: none だと DataTables が列の幅を測れないので visibility で隠す */
.kp-dt-pending {
    visibility: hidden;
}