/*
 * スマホ用のカード型一覧（職員情報・巡回・相談記録で共通）
 * 画面幅 768px 未満では表（.th-sticky_wrap）を隠し、カード（.card-list）を表示する。
 * PC では今までどおり表を表示する。
 */
.card-list {
    display: none;
}

@media (max-width: 767.98px) {
    .th-sticky_wrap.has-card-list {
        display: none !important;
    }

    .card-list {
        display: block;
        padding: 0 0.6em 4.5em 0.6em; /* 下端はページ送りの固定フッターに隠れないように空ける */
    }
}

.m-card {
    display: block;
    background: #ffffff;
    border: 1px solid #dfe7ef;
    border-radius: 0.6em;
    padding: 0.7em 0.9em;
    margin-bottom: 0.6em;
    color: #212529;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(30, 120, 180, 0.08);
}

a.m-card:active,
.m-card.m-card-link:active {
    background: #f0f6ff;
}

.m-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.6em;
    margin-bottom: 0.3em;
}

.m-card-title {
    font-weight: 600;
    font-size: 1.05em;
    color: #0d6efd;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.m-card-sub {
    color: #6c757d;
    font-size: 0.85em;
    white-space: nowrap;
    flex-shrink: 0;
}

.m-card-row {
    display: flex;
    gap: 0.6em;
    font-size: 0.9em;
    line-height: 1.5;
}

.m-card-label {
    color: #6c757d;
    flex: 0 0 5.5em;
}

.m-card-value {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* 長文（内容・課題など）は3行で省略 */
.m-card-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.m-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
    margin-top: 0.5em;
}

.m-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    font-size: 0.8em;
    padding: 0.15em 0.55em;
    border-radius: 1em;
    background: #eef3f8;
    color: #495057;
    border: 1px solid #dfe7ef;
}

.m-badge-on {
    background: #e7f5ec;
    color: #146c43;
    border-color: #b7e0c5;
}

.m-card-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    margin-top: 0.5em;
    font-size: 0.9em;
}

.m-card-checks label {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    margin: 0;
}

.m-card-checks input[type=checkbox] {
    width: 1.2em;
    height: 1.2em;
}

.m-card-empty {
    text-align: center;
    color: #6c757d;
    padding: 2em 0;
}

/* ======================================================================
 * スマホ用の画面枠（一覧・登録画面で共通）
 *   .m-header  … 画面上部のヘッダー。スマホではナビゲーションバー直下に固定した細い帯にする
 *   .m-title   … ヘッダー内のタイトル
 *   .m-body    … 本文。スマホでは固定ヘッダーの下から始める
 *   .m-footer  … 画面下部のボタン類。スマホでは下端に固定して最初から見えるようにする
 *   .m-search  … 検索条件。スマホでは［検索］ボタン（.m-search-toggle）で開くポップアップにする
 *   .m-only / .m-only-block … スマホのときだけ表示
 *   .m-hide    … スマホでは表示しない（作成日・最終更新日など）
 *   .m-wide    … スマホでは画面幅いっぱいに広げる（テキスト入力欄など）
 * PC（768px以上）では何も変わらない。
 * ====================================================================== */
.m-only,
.m-only-block {
    display: none !important;
}

@media (max-width: 767.98px) {
    .m-only {
        display: inline-flex !important;
        align-items: center;
        gap: 0.3em;
    }

    .m-only-block {
        display: block !important;
    }

    .m-hide {
        display: none !important;
    }

    .page-header.m-header {
        position: fixed !important;
        top: 3.5em !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 3.4em !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0.45em 0.8em !important;
        display: flex !important;
        align-items: center;
        gap: 0.5em;
        overflow: visible;
        background: #ffffff;
        z-index: 1020 !important; /* ナビゲーションバー（1030）より下にして、メニューボタンを押せるようにする */
    }

    .page-header.m-header > .d-flex,
    .page-header.m-header > .row {
        flex: 1 1 auto;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
        gap: 0.5em;
        margin: 0 !important;
        min-width: 0;
    }

    .m-header .m-title,
    .m-header h5.m-title {
        margin: 0 !important;
        font-size: 1.05em;
        font-weight: 600;
        flex: 1 1 auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .m-body {
        margin-top: 6.2em !important;
        padding-bottom: 4.8em !important;
        height: auto !important;
        overflow: visible !important;
    }

    .page-footer.m-footer {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 3.2em;
        margin: 0 !important;
        padding: 0.4em 0.8em !important;
        display: flex !important;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.4em 1em;
        background: #ffffff;
        border-top: 1px solid #dfe7ef;
        z-index: 1020 !important;
    }

    .m-wide,
    textarea.m-wide,
    input.m-wide {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 検索ポップアップ */
    .m-search {
        display: none !important;
    }

    .m-search.m-open {
        display: block !important;
        position: fixed;
        top: 7.2em;
        left: 0.6em;
        right: 0.6em;
        max-height: calc(100vh - 8.4em);
        /* アドレスバー等を除いた「見えている高さ」で計算する（100vh だと下が画面外に出てスクロールできない） */
        max-height: calc(100dvh - 8.4em);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
        background: #ffffff;
        border-radius: 0.7em;
        box-shadow: 0 0.5em 1.5em rgba(0, 0, 0, 0.25);
        padding: 1em;
        z-index: 1045;
    }

    /* ポップアップ内は1項目1行で縦に並べる */
    .m-search.m-open .d-flex,
    .m-search.m-open .row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.6em;
        margin: 0 !important;
    }

    .m-search.m-open div[style*="width"],
    .m-search.m-open [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .m-search.m-open input[type=text],
    .m-search.m-open input:not([type]),
    .m-search.m-open select,
    .m-search.m-open .select2-container {
        width: 100% !important;
    }

    .m-search.m-open .mt-3 {
        margin-top: 0 !important;
    }

    .m-search-actions {
        display: flex;
        gap: 0.6em;
        justify-content: flex-end;
        margin-top: 0.8em;
    }

    /* 検索条件が多くても［閉じる］［検索］をポップアップの下端に常に表示する */
    .m-search.m-open .m-search-actions {
        position: sticky;
        bottom: -1em;
        margin: 0.8em -1em -1em -1em;
        padding: 0.6em 1em;
        background: #ffffff;
        border-top: 1px solid #eef3f8;
        z-index: 1;
    }

    .m-search-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: 1040;
    }

    /* ポップアップ内に表示する select2 の選択肢一覧（mobile-ui.js で dropdownParent をポップアップにしている） */
    .m-search.m-open .m-s2-parent {
        position: relative;
    }

    .m-search.m-open .select2-dropdown {
        z-index: 2;
    }

    .m-search.m-open .select2-container--open {
        z-index: 2;
    }

    /* 検索ポップアップを開いている間は、それを含むヘッダーを暗幕（1040）より前面に出す */
    /* .page-header.m-header（z-index:1020 !important）より詳細度を高くしないと上書きできない */
    .page-header.m-header.m-search-host,
    .page-header.m-search-host,
    .m-search-host {
        z-index: 1046 !important;
    }
}


/* ======================================================================
 * スマホ用の登録画面（入力欄の幅を揃える）
 *   .m-form … 登録画面の本文に付ける。スマホでは1項目1行・画面幅いっぱいに揃え、横のはみ出しを防ぐ
 *   .m-keep … .m-form 内で、ラジオボタンやチェックボックスの並びなど横並びのまま残したい行に付ける
 * PC（768px以上）では何も変わらない。
 * ====================================================================== */
@media (max-width: 767.98px) {
    .m-form {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0.6em !important;
        padding-right: 0.6em !important;
        max-width: 100%;
        overflow-x: hidden;
    }

    .m-form .d-flex:not(.m-keep),
    .m-form .row:not(.m-keep) {
        flex-wrap: wrap !important;
        column-gap: 0.8em;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .m-form .d-flex:not(.m-keep) > div,
    .m-form .row:not(.m-keep) > div,
    .m-form [class*="col-"]:not(.m-keep) {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .m-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=submit]):not([type=button]),
    .m-form select,
    .m-form textarea,
    .m-form .select2-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    .m-form .m-keep {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center;
        gap: 0.3em 1.2em;
    }

    .m-form .m-keep > * {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 100% !important;
        margin-right: 0 !important;
    }

    .m-form .m-keep label {
        white-space: nowrap;
    }

    /* 注意書きなどの長い文は折り返す */
    .m-form .m-note,
    .m-form span,
    .m-form p {
        white-space: normal !important;
        overflow-wrap: anywhere;
    }
}


/* ======================================================================
 * タブ代わりのボタン（.tab-strip）
 *   スマホでは折り返さずに1行に並べ、横にスクロールして選ぶ。
 *   選択中のタブは mobile-ui.js で見える位置までスクロールする。
 * PC（768px以上）では何も変わらない。
 * ====================================================================== */
@media (max-width: 767.98px) {
    .tab-strip {
        position: relative;
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 0.35em !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: 0 0 0.4em 0 !important;
        padding: 0.1em 0 0.3em 0 !important;
        max-width: 100%;
        width: auto !important;
    }

    .tab-strip::-webkit-scrollbar {
        display: none;
    }

    .tab-strip > * {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .tab-strip .tab-item {
        width: auto !important;
        height: auto !important;
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
        white-space: nowrap;
        padding: 0.35em 0.9em !important;
        margin: 0 !important;
        border-radius: 1em;
    }
}


/* ======================================================================
 * 一覧画面のヘッダー（PC・タブレット・スマホ共通）
 *   .u-header … ヘッダーをタイトル・［新規登録］・［検索］だけの1行の帯にする（高さは各画面の .page-header のまま）
 *   .u-search … 検索条件を［検索］で開くポップアップにする（.m-search と一緒に付ける。ヘッダーの中に置く）
 *   .u-search-summary … ［検索］の横に今の検索条件を表示する（mobile-ui.js が作る。PCのみ）
 * スマホ（768px未満）は .m-header / .m-search の指定がそのまま効く。
 * ====================================================================== */
.m-search-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1040;
}

.page-header.m-search-host,
.m-search-host {
    z-index: 1046 !important;
}

.u-search-summary {
    display: none;
}

/* ヘッダーの幅は全画面でそろえる（左のサイドバーの分を引く。100% だと右端の出力ボタンや検索条件が画面外に切れる） */
@media (min-width: 576px) and (max-width: 767.98px) {
    .page-header.u-header:not(.m-header) {
        width: calc(100% - 7em) !important;
    }
}

@media (min-width: 768px) {
    .page-header.u-header {
        display: flex;
        align-items: center;
        width: calc(100% - 7em) !important;
    }

    .page-header.u-header > .d-flex {
        display: flex;
        align-items: center;
        gap: 0.8em;
        flex: 1 1 auto;
        min-width: 0;
    }

    .u-header .m-title {
        margin: 0;
        font-size: 1.25rem;
        white-space: nowrap;
    }

    .u-header .m-search-toggle {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .u-search-summary {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        color: #6c757d;
        font-size: 0.85em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .u-search-summary b {
        font-weight: normal;
        color: #212529;
    }

    .m-search.u-search {
        display: none;
    }

    .m-search.u-search.m-open {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0.5em 1.2em;
        position: absolute;
        top: calc(100% + 0.4em);
        left: 0;
        width: min(64em, calc(100vw - 8em));
        max-height: calc(100vh - 9em);
        max-height: calc(100dvh - 9em);
        overflow-y: auto;
        overscroll-behavior: contain;
        background: #ffffff;
        border-radius: 0.7em;
        box-shadow: 0 0.5em 1.5em rgba(0, 0, 0, 0.25);
        padding: 1em 1.2em 0 1.2em;
        z-index: 1045;
    }

    .m-search.u-search.m-open > .mb-2 {
        margin-bottom: 0 !important;
    }

    /* 選択欄は、選んだ選択肢が長くても切れないよう、幅のクラスの幅を最小にして中身に合わせて広げる */
    .m-search.u-search.m-open > .fld-xs:has(> select),
    .m-search.u-search.m-open > .fld-sel:has(> select),
    .m-search.u-search.m-open > .fld-sel-l:has(> select),
    .m-search.u-search.m-open > .fld-text:has(> select) {
        width: auto;
        max-width: 100%;
    }

    .m-search.u-search.m-open > .fld-xs:has(> select) { min-width: 4.5em; }
    .m-search.u-search.m-open > .fld-sel:has(> select) { min-width: 9.5em; }
    .m-search.u-search.m-open > .fld-sel-l:has(> select) { min-width: 12em; }
    .m-search.u-search.m-open > .fld-text:has(> select) { min-width: 15em; }

    .m-search.u-search .m-search-actions {
        position: sticky;
        bottom: 0;
        flex: 1 1 100%;
        display: flex;
        justify-content: flex-end;
        gap: 0.6em;
        margin: 0.3em -1.2em 0 -1.2em;
        padding: 0.7em 1.2em;
        background: #ffffff;
        border-top: 1px solid #eef3f8;
    }

    .m-search.u-search.m-open .m-s2-parent {
        position: relative;
    }

    .m-search.u-search.m-open .select2-dropdown,
    .m-search.u-search.m-open .select2-container--open {
        z-index: 2;
    }
}

@media (max-width: 767.98px) {
    /* スマホの検索ポップアップでは、幅のクラス（fld-*）を付けた項目も画面幅いっぱいにする */
    .m-search.m-open > [class*="fld-"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
    }
}


/* ======================================================================
 * 登録画面の中の一覧（表）をスマホではカードにする
 *   table.m-cardify … スマホでは1行を1枚のカードにし、各欄に見出し（th）の文字をラベルとして付ける
 *                    （ラベルは mobile-ui.js が見出しから data-label に写す）
 * PC（768px以上）では何も変わらない。
 * ====================================================================== */
@media (max-width: 767.98px) {
    table.m-cardify,
    table.m-cardify > tbody {
        display: block;
        width: 100% !important;
        margin: 0 !important;
        border: 0;
        overflow: visible !important;
    }

    table.m-cardify > thead,
    table.m-cardify > tbody > tr.m-card-head-row {
        display: none !important;
    }

    /* 行に style="display:flex" が直接書かれている表もあるので !important で上書きする（JSで隠した行は除く） */
    table.m-cardify > tbody > tr:not([style*="display: none"]):not([style*="display:none"]):not(.m-card-head-row) {
        display: block !important;
    }

    table.m-cardify > tbody > tr {
        margin: 0 0 0.6em 0 !important;
        padding: 0.5em 0.8em;
        width: 100% !important;
        background: #ffffff;
        border: 1px solid #dfe7ef;
        border-radius: 0.6em;
        box-shadow: 0 1px 2px rgba(30, 120, 180, 0.08);
    }

    table.m-cardify > tbody > tr > td {
        display: flex;
        align-items: center;
        gap: 0.6em;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0.2em 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    table.m-cardify > tbody > tr > td::before {
        content: attr(data-label);
        flex: 0 0 6.5em;
        color: #6c757d;
        font-size: 0.85em;
        line-height: 1.3;
    }

    /* 見出しの無い欄（詳細・削除のリンクなど）はラベルを付けず右に寄せる */
    table.m-cardify > tbody > tr > td[data-label=""] {
        justify-content: flex-end;
    }

    table.m-cardify > tbody > tr > td[data-label=""]::before {
        display: none;
    }

    /* 同じ見出しの下の2つ目以降の欄：ラベルの場所は空けたまま、続きの行として表示する */
    table.m-cardify > tbody > tr > td.m-cell-cont::before {
        visibility: hidden;
    }

    table.m-cardify > tbody > tr > td.m-cell-empty {
        display: none;
    }

    table.m-cardify > tbody > tr > td > * {
        flex: 1 1 auto;
        min-width: 0;
    }

    table.m-cardify > tbody > tr > td[data-label=""] > a {
        flex: 0 0 auto;
    }

    /* DL・UL などのボタンは伸ばさない（隣の入力欄が残りの幅を使う） */
    table.m-cardify > tbody > tr > td > input[type=button],
    table.m-cardify > tbody > tr > td > input[type=submit],
    table.m-cardify > tbody > tr > td > button,
    table.m-cardify > tbody > tr > td > .btn {
        flex: 0 0 auto !important;
        width: auto !important;
    }

    table.m-cardify > tbody > tr > td input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
    table.m-cardify > tbody > tr > td select,
    table.m-cardify > tbody > tr > td textarea,
    table.m-cardify > tbody > tr > td .select2-container {
        max-width: 100% !important;
    }

    table.m-cardify > tbody > tr > td > input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=button]):not([type=submit]),
    table.m-cardify > tbody > tr > td > select,
    table.m-cardify > tbody > tr > td > textarea,
    table.m-cardify > tbody > tr > td > .select2-container {
        width: 100% !important;
    }

    table.m-cardify > tbody > tr > td > input[type=checkbox],
    table.m-cardify > tbody > tr > td > input[type=radio] {
        flex: 0 0 auto;
    }
}