/* ============================================================
   Atlas PCサポート — 共通デザイン（app.css）
   配色は CSS変数で定義。1箇所変えれば全体に反映される。
   トーン: 堅実・信頼感（業務システム）。過度な装飾はしない。
   ============================================================ */

:root {
    /* ブランド（紺〜青〜ティール） */
    --brand-navy:        #1E2A5A;
    --brand-teal:        #2E7D8C;
    --brand-teal-light:  #5DCAA5;
    --brand-blue:        #185FA5;
    --brand-blue-light:  #E6F1FB;

    /* 面・境界・文字 */
    --page-bg:      #F4F6FA;
    --card-bg:      #FFFFFF;
    --border:       #E2E6EF;
    --text-main:    #2C2C2A;
    --text-heading: #1E2A5A;
    --text-muted:   #6B7280;

    /* 状態表示 */
    --danger-bg: #FCEBEB;  --danger-text: #A32D2D;
    --warn-bg:   #FAEEDA;  --warn-text:   #854F0B;
    --ok-bg:     #E1F5EE;  --ok-text:     #0F6E56;

    --radius: 8px;
    --sidebar-w: 214px;  /* テキストのみのメニュー。最長「ダッシュボード」でも収まる幅に絞る（第26弾） */
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN",
                 "Yu Gothic", "Meiryo", sans-serif;
    color: var(--text-main);
    background: var(--page-bg);
    line-height: 1.6;
    font-size: 14px;
    font-weight: 500;   /* 細く見えないよう、本文をやや太めに */
}

a { color: var(--brand-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================
   アプリの骨格（サイド + メイン）
   ============================================================ */
.app { display: flex; min-height: 100vh; }

/* --- サイドメニュー（紺背景）--- */
.sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--brand-navy);
    color: #fff;
    display: flex;
    flex-direction: column;
}
.sidebar .brand {
    padding: 1.2rem 1.1rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.sidebar .brand img { display: block; height: 42px; width: auto; }  /* ロゴ拡大 */
.sidebar .brand .sub {
    margin-top: .45rem;
    font-size: .78rem;
    font-weight: 600;                       /* 細く見えないよう強調 */
    letter-spacing: .06em;
    color: rgba(255, 255, 255, 0.8);
}
.sidebar-nav { padding: .5rem 0 1.5rem; overflow-y: auto; }
.nav-group { margin-top: 1rem; }
.nav-group-title {
    padding: .2rem 1.1rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, 0.5);
}
.nav-item {
    display: block;
    padding: .5rem 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    border-left: 3px solid transparent;
    font-size: .93rem;
    font-weight: 500;
}
.nav-item:hover { background: rgba(255, 255, 255, 0.07); text-decoration: none; color: #fff; }
.nav-item.active {
    background: var(--brand-teal);
    border-left-color: var(--brand-teal-light);
    color: #fff;
    font-weight: 700;
}

/* --- メイン列 --- */
.main-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* --- ヘッダー（白背景）--- */
.topbar {
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    padding: 0 1.5rem;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
}
.user-chip { display: flex; align-items: center; gap: .5rem; color: var(--text-main); }
.avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--brand-blue); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; font-weight: 700;
}
.user-chip .uname { font-weight: 700; }
.user-chip .urole { color: var(--text-muted); font-size: .8rem; font-weight: 500; }
.topbar-link { font-size: .9rem; font-weight: 600; }

/* --- コンテンツ領域 --- */
/* min-width:0 … フレックス項目の最小幅伝播を止める（第40弾B: 表の幅非依存化の土台。
   これが無いと中の表の最小幅が .content→上位フレックスを押し広げてしまう）。 */
.content { flex: 1; padding: 1.5rem; background: var(--page-bg); min-width: 0; }

/* ページ見出し行（左に見出し・右端に主要ボタン） */
.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
}
.page-title {
    margin: 0;
    font-size: 1.35rem;
    color: var(--text-heading);
    font-weight: 700;
}
h2 { color: var(--text-heading); font-size: 1.05rem; font-weight: 700; margin: 1.4rem 0 .6rem; }
.muted { color: var(--text-muted); font-size: .9em; font-weight: 500; }
.backlink { display: inline-block; margin-bottom: .8rem; font-weight: 600; }

/* ============================================================
   カード・パネル
   ============================================================ */
.card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.2rem;
    margin-bottom: 1.2rem;
}

/* サマリーカード（ダッシュボード上部） */
.summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.4rem;
}
.stat-card {
    display: block;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-left: 4px solid var(--brand-blue);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    color: var(--text-main);
}
a.stat-card:hover { text-decoration: none; border-color: var(--brand-blue); background: #FBFCFE; }
.stat-card .stat-label { color: var(--text-muted); font-size: .85rem; font-weight: 600; }
.stat-card .stat-value { font-size: 1.9rem; font-weight: 700; line-height: 1.2; margin-top: .2rem; }
.stat-card.is-warn   { border-left-color: var(--warn-text); }
.stat-card.is-warn   .stat-value { color: var(--warn-text); }
.stat-card.is-danger { border-left-color: var(--danger-text); }
.stat-card.is-danger .stat-value { color: var(--danger-text); }
.stat-card.is-blue   .stat-value { color: var(--brand-blue); }

/* ============================================================
   テーブル
   ============================================================ */
/* .table-wrap は一覧テーブルの「横スクロールの器」。常に親幅を超えないようにし、
   表がはみ出す幅では器の中だけで横スクロールさせる（第40弾B: 幅非依存化）。 */
.table-wrap {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;   /* iOS で慣性スクロール */
}
table.data {
    width: 100%;
    /* ★第40弾B: 幅非依存化。table-layout:auto にし、列幅は
       「見出し(th)は折らない・セル(td)は折り返す」で内容に応じて自然に決める。
       枠に収まれば幅いっぱい、収まらなければ .table-wrap の中で横スクロール。
       旧方式（fixed＋@media で min-width:720px に切替）が生む“帯”を無くすのが狙い。
       .col-* の％指定は auto では厳密固定でなく「目安」として働く（残置）。 */
    table-layout: auto;
    border-collapse: collapse;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
table.data th, table.data td {
    border-bottom: 1px solid var(--border);
    padding: .55rem .7rem;
    text-align: left;
    vertical-align: top;
}
table.data thead th {
    background: #EEF1F7;
    color: var(--text-heading);
    font-weight: 700;
    font-size: .85rem;
}
table.data tbody tr:hover { background: #F8FAFD; }
table.data tr.is-inactive td { color: #9AA1AD; }

/* ★第40弾B: 見出し(th)は1文字ずつ縦折れさせない。これで表の“自然な最小幅”が
   「列数に応じた値」に決まり、決め打ちの min-width:720px を持たなくて済む。
   min-width:4.5em … 列数の多い表（対応記録9列など）が狭い幅で「セルが1文字ずつ折れる」
   のを防ぐ“列の下限”。これ以上詰めず、収まらなければ .table-wrap 内で横スクロールする。
   4.5em は「全角4〜5文字が1行に入る」目安（見出し無印の主役列＝件名/ソフト名/メール等に効く）。
   ※ th の min-width は同じ列の td にも効く（列全体の下限になる）。列別の下限は下の .col-* で上書き。*/
table.data th { white-space: nowrap; min-width: 4.5em; }

/* ------------------------------------------------------------
   ★一覧セルの折り返し方針（切り替えポイントはこの1ブロックだけ）

   現在の方針: 長いテキストは省略せず、折り返して全部見せる。
   （業務システムでは「…」で読めないより、行が高くなっても全部見えるほうが実用的）

   将来「省略（…）」に変えたくなったら、このブロックの中身を次に差し替える。
   各ページのHTMLは1行も触らなくてよい（第40弾で table-layout:auto に変更済み。
   省略に変える場合は列に幅の基準が要るので .col-* の width/min-width を手がかりにする）。

       .cell-wrap,
       table.data td {
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
       }
   ------------------------------------------------------------ */
.cell-wrap,
table.data td {
    white-space: normal;
    overflow-wrap: anywhere; /* メール・型番・シリアルなど英数字の長い連続も折り返す */
    word-break: normal;      /* 日本語は文字単位で自然に折り返る */
}

/* 途中で折り返すと読みにくい列（日付など）だけ1行に保つ */
table.data th.cell-nowrap,
table.data td.cell-nowrap { white-space: nowrap; }

/* ------------------------------------------------------------
   一覧の列幅の配分（見出し <th> に当てる）。
   ★第40弾で table-layout:auto に変更したため、％は厳密固定ではなく「目安」として働く（残置）。
   指定しなかった列が残りの幅を分け合うので、
   その表の「主役のテキスト列」（ソフト名・件名・メールなど）は無指定にする。
   ------------------------------------------------------------ */
/* width%＝広い幅での「目安」の配分。min-width＝狭い幅での「列の下限」（第40弾B）。
   短い列(xs)は下限も小さく、長文が入る列(lg)は下限を大きくして、狭い幅では
   「詰めきれず横スクロール」に倒す。数値は records/companies/software_list を実測して調整した。 */
.col-xs { width:  7%; min-width: 3.5em; }  /* 件数・種別・主担当・状態 */
.col-sm { width: 10%; min-width: 4.5em; }  /* 日付・操作・カテゴリ */
.col-md { width: 13%; min-width: 6em;   }  /* 会社・PC・メーカー・役割 */
.col-lg { width: 18%; min-width: 8em;   }  /* 会社名・用途名など、やや長めの短文 */

/* ★第41弾: スマホ幅の開閉カード。PC（768px以上）では隠す（表を出す）。
   スマホ幅で表を隠しカードを出す切替は、ファイル末尾 @media (max-width:767px) 内。 */
.card-list { display: none; }

/* ============================================================
   スマホ表示について（第40弾で構造を整理）
   ------------------------------------------------------------
   ・表の幅対策は「幅で場合分けしない」方針に変更したため、@media の外
     （上の table.data / .table-wrap / .content）に共通ルールとして移した。
   ・スマホ幅だけの見た目（ユーザーバーのカード化・検索フォームの縦積み）は、
     ★ファイル末尾の @media (max-width: 767px) に集約した（課題A: 記述順の修正）。
     PC用の .toolbar / .topbar 定義より後ろに置くことで、スマホ用が正しく勝つ。
   ============================================================ */

/* 一覧の行内アクション（区切り線はCSSで表現。HTMLに「｜」を書かない） */
/* ★リンクは1つずつ縦に積む。
   横並びのままだと「ライセンス一覧」のような長いリンクが
   「ライセンス一／覧」と語の途中で折り返してしまう。
   操作列を1行に収めるだけの幅（18%前後）を取るのは他の列を圧迫するため、
   「中途半端に折り返す」より「意図的に改行する」方を選んだ。 */
.row-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
}
.row-actions > a,
.row-actions > form,
.row-actions .btn { white-space: nowrap; }

/* 詳細テーブル（縦見出し） */
table.detail { width: 100%; border-collapse: collapse; background: var(--card-bg);
    border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
table.detail th, table.detail td { border-bottom: 1px solid var(--border); padding: .6rem .8rem; text-align: left; vertical-align: top; }
table.detail th { background: #EEF1F7; color: var(--text-heading); width: 9rem; white-space: nowrap; font-weight: 700; }
table.detail td { white-space: pre-wrap; }

/* ============================================================
   FAQ アコーディオン（HTML標準の <details>/<summary>。JavaScriptは使わない）
   ============================================================ */
.faq-category { margin: 1.6rem 0 .5rem; }
.faq-group {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1rem;
}
.faq-item + .faq-item { border-top: 1px solid var(--border); }
.faq-item > summary {
    padding: .7rem .9rem;
    cursor: pointer;
    font-weight: 700;
    color: var(--text-heading);
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    list-style: none;          /* 既定の三角を消して自前のマークにする */
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::before {
    content: "▶";
    color: var(--brand-teal);
    font-size: .72em;
    line-height: 1.9;
    flex-shrink: 0;
}
.faq-item[open] > summary::before { content: "▼"; }
.faq-item > summary:hover { background: #F8FAFD; }
.faq-body {
    padding: .2rem .9rem 1rem 2.05rem;
    border-top: 1px dashed var(--border);
}
/* 回答本文は原文の改行を保持して表示する */
.faq-answer {
    white-space: pre-wrap;
    margin: .8rem 0;
    font-weight: 500;
}

/* ============================================================
   バッジ（状態表示）
   ============================================================ */
.badge {
    display: inline-block;
    padding: .12rem .5rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.5;
    /* ★バッジは必ず1行。「解決済み」が「解決済／み」と割れないようにする。
       一覧セルは既定で折り返す設定（.cell-wrap）だが、バッジだけは例外にする。 */
    white-space: nowrap;
}
.badge-danger { background: var(--danger-bg); color: var(--danger-text); }
.badge-warn   { background: var(--warn-bg);   color: var(--warn-text); }
.badge-ok     { background: var(--ok-bg);     color: var(--ok-text); }
.badge-blue   { background: var(--brand-blue-light); color: var(--brand-blue); }
.badge-muted  { background: #EDEFF3; color: var(--text-muted); }

/* バッジの下に添える補足テキスト（例:「期限切れ」バッジの下の「10日超過」）。
   ★display:block で意図的に2段目へ落とす（文の途中で割れるのを防ぐ）。
   補足自体は nowrap で「10日／超過」のようには割れない。
   補足が無いセル（本日期限・あとN日）ではこの要素自体が出ないので、余計な空行は生じない。 */
.cell-sub {
    display: block;
    margin-top: .15rem;
    font-size: .8rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ============================================================
   フォーム
   ============================================================ */
label { display: block; }

/* 入力コントロールの「見た目」だけを全体に適用（幅はここでは決めない）。
   ★幅を全体に効かせると .toolbar 内のコントロールまで広がって崩れるため、
     width は .field 内に限定する（下の .field ルール参照）。 */
input[type=text], input[type=email], input[type=password],
input[type=date], input[type=datetime-local], select, textarea {
    padding: .45rem .6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font: inherit;
    font-weight: 500;
    color: var(--text-main);
    background: #fff;
    line-height: 1.4;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 2px var(--brand-blue-light);
}
input[type=checkbox] { width: auto; }

/* フォームの1項目（縦積み・幅いっぱい） */
.field { margin-top: 1rem; }
.field-label { display: block; font-weight: 700; color: var(--text-heading); margin-bottom: .25rem; }
.field input[type=text], .field input[type=email], .field input[type=password],
.field input[type=date], .field input[type=datetime-local], .field select, .field textarea {
    width: 100%;
}

/* パスワード表示切り替え（JS が input を .pw-wrap で包み、ボタンを差し込む）。
   ★JS 無効時はこの要素自体が生成されないので、入力欄は通常表示のまま。 */
.pw-wrap { position: relative; display: block; }
.pw-wrap input {
    width: 100%;
    padding-right: 2.7rem;   /* 右端のボタンに文字が重ならないよう余白を確保 */
}
.pw-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 2.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0 6px 6px 0;
    color: var(--brand-blue);   /* Atlas ブランドの青。馴染ませる */
    cursor: pointer;
}
.pw-toggle:hover { color: var(--brand-navy); }
.pw-toggle:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: -2px; }
.pw-toggle[aria-pressed="true"] { color: var(--brand-navy); }

.check-line { margin-top: 1rem; }
.check-line label { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--text-heading); }

/* フォーム幅（インラインstyleを使わずクラスで統一） */
.form-narrow { max-width: 420px; }
.form-md     { max-width: 560px; }
.form-wide   { max-width: 640px; }

/* 入力欄の下に置く補足文。ラベルに長い説明を入れないための共通クラス。 */
.field-hint {
    display: block;
    margin-top: .35rem;
    font-size: .85rem;
    font-weight: 500;
    line-height: 1.6;
    color: var(--text-muted);
}

/* ★送信ボタンの領域。
   ボタン自身には margin を付けず、この入れ物で上余白を管理する。
   直前の項目が input / select / textarea のどれでも間隔が変わらないよう、
   flex にしてインラインのベースライン依存（要素ごとに残り余白が変わる）を断つ。 */
.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .8rem;
    margin-top: 1.8rem;
}

/* 一覧行内などの、表示を崩さない小さなフォーム */
.inline-form { display: inline; }

/* 招待リンク等の長いURL表示 */
.link-box {
    word-break: break-all;
    background: #fff;
    border: 1px solid var(--border);
    padding: .6rem;
    border-radius: 4px;
}

/* ボタン */
.btn {
    display: inline-block;
    padding: .5rem 1.1rem;
    border: 1px solid transparent;
    border-radius: 6px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    background: var(--brand-blue);
    color: #fff;
    line-height: 1.4;
    white-space: nowrap;
}
.btn:hover { background: #14508c; text-decoration: none; color: #fff; }
.btn-secondary { background: #fff; color: var(--brand-blue); border-color: var(--border); }
.btn-secondary:hover { background: var(--brand-blue-light); color: var(--brand-blue); }
.btn-sm { padding: .35rem .75rem; font-size: .85rem; }
.btn-danger { background: var(--danger-text); }
.btn-danger:hover { background: #8a2525; }
.btn-ok { background: var(--ok-text); }
.btn-ok:hover { background: #0b5b47; }

/* ページ内アクションバー */
.actions { margin: 1rem 0; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }

/* ============================================================
   検索・絞り込みバー（.toolbar）
   ★ラベル・入力欄・ボタンが横一列に、高さを揃えて並ぶこと
   ============================================================ */
.toolbar {
    display: flex;
    gap: .6rem;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 0 1.2rem;
    padding: .75rem .9rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
/* toolbar 内のラベルは横並び（縦積みにしない） */
.toolbar label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    font-weight: 600;
    color: var(--text-heading);
    font-size: .9rem;
    white-space: nowrap;
}
/* toolbar 内のコントロールは内容に合わせた幅（width:100% を効かせない） */
.toolbar select, .toolbar input[type=text] { width: auto; }
.toolbar .search-input { width: 220px; max-width: 100%; }
.toolbar .toolbar-clear { font-size: .9rem; font-weight: 600; }

/* ============================================================
   アラート / フラッシュ / 注意書き
   ============================================================ */
.alert { padding: .7rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; border: 1px solid transparent; font-weight: 500; }
.alert-error   { background: var(--danger-bg); border-color: #f2c9c9; color: var(--danger-text); }
.alert-success { background: var(--ok-bg);     border-color: #c4e6d9; color: var(--ok-text); }
.alert-info    { background: var(--brand-blue-light); border-color: #cfe2f5; color: var(--brand-blue); }
.alert-warn    { background: var(--warn-bg); border-color: #ecd6ac; color: var(--warn-text); }
.notice-box    { background: var(--warn-bg); border: 1px solid #ecd6ac; color: var(--warn-text);
                 padding: .8rem 1rem; border-radius: var(--radius); font-weight: 500; }
.mt-1 { margin-top: 1rem; }

/* ============================================================
   ログイン等（未ログイン画面：サイドメニューなし）
   ============================================================ */
.auth-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--page-bg);
    padding: 1.5rem;
}
.auth-card {
    width: 100%;
    max-width: 380px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2rem 1.8rem;
}
.auth-logo-wrap { text-align: center; margin-bottom: 1.5rem; }
.auth-logo-wrap img { height: 56px; width: auto; }   /* ロゴ拡大 */
.auth-logo-wrap .sub { margin-top: .5rem; color: var(--text-muted); font-size: .86rem; font-weight: 600; }
.auth-card h1 { font-size: 1.15rem; color: var(--text-heading); margin: 0 0 1rem; text-align: center; font-weight: 700; }
.auth-card .form-actions { margin-top: 1.4rem; }
.auth-card .form-actions .btn { flex: 1 1 auto; text-align: center; }
.auth-links { margin-top: 1rem; text-align: center; font-size: .9rem; font-weight: 600; }

/* ============================================================
   レスポンシブ（簡易）
   ============================================================ */
@media (max-width: 720px) {
    .app { flex-direction: column; }
    .sidebar { width: 100%; }
    .sidebar-nav { display: flex; flex-wrap: wrap; padding: .3rem; }
    .nav-group { margin-top: 0; }
    .nav-group-title { display: none; }
}

/* ============================================================
   ★スマホ幅だけの見た目（第40弾課題A: ファイル末尾に集約）
   ------------------------------------------------------------
   ここは PC用の .topbar / .toolbar 定義より「後ろ」にある。CSSは後勝ちなので、
   ここに書いたスマホ用の上書きが確実に勝つ（＝以前ラベルが中央寄せに負けていた問題の解消）。
   ・表の幅対策は @media の外（共通）へ移したので、ここには表向けの指定は無い。
   ・レイアウト切替（サイドバー↔縦積み）は上の @media (max-width:720px) のまま（今回不変）。
   ============================================================ */
@media (max-width: 767px) {
    /* --- ユーザーバー（.topbar）をカード型・左詰めに（第38弾の形を維持）--- */
    .topbar {
        flex-wrap: wrap;
        height: auto;
        justify-content: flex-start;   /* 左詰め（既存 flex-end をスマホ幅のみ上書き）*/
        align-items: stretch;
        padding: .8rem 1.5rem;         /* 上下に余白（アバターが仕切りに接しない）*/
        row-gap: .6rem;
        column-gap: .6rem;
    }
    .topbar .user-chip { flex: 1 1 100%; min-width: 0; }         /* 1行目を占有 */
    .topbar .user-chip .uname,
    .topbar .user-chip .urole { display: block; }               /* 氏名の下に役割 */
    .topbar .topbar-link,
    .topbar .btn {                                               /* 2行目で横幅を等分 */
        flex: 1 1 0;
        text-align: center;
        white-space: nowrap;
    }
    .topbar .topbar-link {                                       /* リンクにも枠（btn-sm相当）*/
        border: 1px solid var(--border);
        border-radius: 6px;
        padding: .35rem .75rem;
    }

    /* --- 検索フォーム（.toolbar）を統一（第40弾課題C）---
       形: 1項目1行。ラベルは左（幅をそろえて左端を縦に揃える）、
           入力欄/セレクトは右で幅いっぱい。ラベルの無い項目（フリーワード）とボタンは全幅。
       ここは PC用 .toolbar（display:flex 横並び）より後ろなので、この縦積みが確実に勝つ。 */
    .toolbar {
        flex-direction: column;    /* 1項目1行に積む（PCの横並びを上書き）*/
        align-items: stretch;      /* 各項目を全幅に */
    }
    /* ラベル付き項目: グリッドで「ラベル(4.5em) / フィールド(残り)」に分ける。
       ★label の中の「会社」等のテキストは、グリッドが匿名アイテムとして
         1列目(4.5em)に配置する → どの行もフィールドの左端が 4.5em で縦に揃う。
       4.5em の根拠: 最長ラベル「カテゴリ／表示範囲／管理状況」(全角4文字, font .9rem)が
         折り返さず収まる最小幅（4文字≒3.6em＋余白）。短いラベル(会社等)も同じ列幅で揃う。 */
    .toolbar label {
        display: grid;
        grid-template-columns: 4.5em 1fr;
        align-items: center;
        gap: .5rem;
        width: 100%;
        white-space: nowrap;       /* ラベル文字は1文字ずつ折れない */
    }
    /* 入力欄・セレクトは残り幅いっぱい。★max-width:100% で選択肢の長さで広がらない。 */
    .toolbar select,
    .toolbar input[type=text],
    .toolbar .search-input {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    /* ラベルの無いフリーワード入力（.search-input は .toolbar の直下）・ボタン・クリアは全幅 */
    .toolbar > .search-input { width: 100%; }
    .toolbar > .btn,
    .toolbar > button[type=submit],
    .toolbar > .toolbar-clear {
        display: block;            /* インラインの <a>/<button> でも幅100%を効かせる */
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }

    /* ============================================================
       ★第41弾: 一覧の開閉式カード（スマホ幅のみ）
       表を隠し、同じ $rows から出したカードを出す。配色・角丸は既存に合わせる。
       ============================================================ */
    .table-wrap { display: none; }   /* スマホ幅では表を隠す（PCでは表示のまま） */
    .card-list  { display: block; }  /* カードを出す */

    .card-item {
        background: var(--card-bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        margin-bottom: .6rem;
        overflow: hidden;
    }
    /* 畳んだ見出し行（タップ範囲＝行全体）。目安の高さ 60〜70px。 */
    .card-summary {
        display: flex;
        align-items: center;
        gap: .6rem;
        padding: .7rem .9rem;
        min-height: 44px;
        cursor: pointer;
        list-style: none;                 /* 既定の三角マーカーを消す */
        -webkit-tap-highlight-color: transparent;
    }
    .card-summary::-webkit-details-marker { display: none; }  /* Safari の三角も消す */
    .card-heading { flex: 1 1 auto; min-width: 0; }           /* 見出し＋副見出しを縦に */
    .card-title {
        display: block;
        font-weight: 700;
        color: var(--text-heading);
        overflow-wrap: anywhere;
    }
    .card-subtitle {
        display: block;
        margin-top: .15rem;
        font-size: .8rem;
        color: var(--text-muted);
        overflow-wrap: anywhere;
    }
    .card-badge { flex-shrink: 0; display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
    /* ▽アイコン。開いたら回転（details[open]）。 */
    .card-caret { flex-shrink: 0; color: var(--text-muted); transition: transform .15s ease; }
    .card-item[open] .card-caret { transform: rotate(180deg); }

    /* 展開部：項目名（左・小）／値（右） */
    .card-body { padding: .2rem .9rem .8rem; border-top: 1px solid var(--border); }
    .card-field {
        display: flex;
        justify-content: space-between;
        gap: .8rem;
        padding: .4rem 0;
        border-bottom: 1px solid #EEF1F7;
    }
    .card-field:last-child { border-bottom: none; }
    .card-field-label { flex-shrink: 0; color: var(--text-muted); font-size: .85rem; }
    .card-field-value { text-align: right; overflow-wrap: anywhere; }

    /* 操作：展開部の一番下。2つあれば横幅を分け合う */
    .card-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
    .card-actions > a,
    .card-actions > form,
    .card-actions > .inline-form { flex: 1 1 0; min-width: 8em; margin: 0; }
    .card-actions > a {
        display: block;
        text-align: center;
        padding: .45rem .6rem;
        border: 1px solid var(--border);
        border-radius: 6px;
        font-weight: 600;
        font-size: .9rem;
    }
    .card-actions form .btn { width: 100%; }   /* フォーム内ボタンも全幅 */
}