/* =====================================================================
   ALLIES Payroll — 共通デザインシステム
   トップページ（index.ejs）で確立した配色・質感を全画面で共有するための
   共通スタイルシート。views/pdf/ 配下の帳票テンプレートには適用しない。
   ===================================================================== */

:root {
  --navy-950: #0b1b38;
  --navy-900: #0f2247;
  --navy-800: #16305e;
  --navy-700: #1d3d74;
  --cream-050: #faf8f3;
  --cream-100: #f3efe6;
  --gold-500: #c9a769;
  --gold-600: #b3915a;
  --ink-900: #1b2333;
  --ink-500: #667085;
  --line: rgba(15, 34, 71, 0.10);

  --green-600: #1a7f37;
  --green-bg: rgba(26, 127, 55, 0.10);
  --green-line: rgba(26, 127, 55, 0.30);
  --amber-600: #b5651d;
  --amber-bg: rgba(181, 101, 29, 0.10);
  --amber-line: rgba(181, 101, 29, 0.30);
  --red-600: #c0392b;
  --red-bg: rgba(192, 57, 43, 0.10);
  --red-line: rgba(192, 57, 43, 0.30);

  /* 2026-09-02 依頼3・6：ヘッダーの実測高さ（縮小後）。ヘッダーをposition: stickyで固定した際、
     ヘッダー直下に表示する各種の固定バー（サイドメニュー・ダッシュボード/給与計算/編集画面の
     ツールバー）のsticky top位置をこの値から算出し、ヘッダーとの重なりを防ぐ。 */
  --header-height: 44px;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

/* 2026-09-02 依頼6：縦スクロールだけでなく横スクロールでもヘッダー・サイドメニューの位置が
   ずれないよう、ページ全体の横スクロール自体を発生させない。幅の広い表（勤怠入力グリッド・
   企業リスト等）はいずれも内部で.table-scroll（overflow-x:auto）を使っており、ページ全体を
   横スクロールさせる必要のあるコンテンツは存在しない想定のため、安全な変更である。
   注意：overflow-x: hiddenはhtmlのみに指定すること。bodyにも指定すると、overflow指定なし側の
   軸（overflow-y）がブラウザ仕様により暗黙的にautoへ格上げされ、html・bodyの両方が独立した
   スクロールコンテナになってしまう。その結果、実際にスクロールしているのはhtml側なのに、
   header/menu（bodyの子要素）のposition: stickyはbody基準で評価されてbody自体はスクロール
   していないためstickyが機能しなくなる（実機検証で確認済みの不具合、2026-09-02）。 */
html { overflow-x: hidden; }

body {
  font-family: "Zen Kaku Gothic New", "Yu Gothic", "Hiragino Sans", sans-serif;
  margin: 0;
  color: var(--ink-900);
  min-height: 100vh;
  /* ページ全体の背景：オフィス写真がはっきり見える程度まで透過させる。ブランドカラー（ネイビー等）の
     演出的なグラデーションは背景写真には乗せず、白系のごく薄いオーバーレイで明るさ調整のみ行う
     （可読性はカード自体の半透明白背景＋blurで担保する）。差し色はヘッダー・右側メニューのみで使用する。 */
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.30) 100%),
    url('/images/office-bg.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* ---------- Header（全内部ページ共通） ---------- */
/* 2026-09-02 依頼3：縦の高さを従来比おおよそ半分（padding・ロゴ・文字サイズを縮小）に変更。
   依頼6：縦・横どちらにスクロールしても常に画面上部に固定表示されるよう、position: stickyに変更
   （position: relativeのままだとページスクロールで流れてしまう）。 */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(120deg, var(--navy-950) 0%, var(--navy-900) 55%, var(--navy-800) 100%);
  padding: 5px 24px;
  height: var(--header-height);
  box-shadow: 0 6px 24px rgba(11, 27, 56, 0.22);
  position: sticky;
  top: 0;
  left: 0;
  z-index: 100;
}
.app-header .logo { display: flex; align-items: center; gap: 10px; }
.app-header .logo img {
  height: 26px;
  width: 26px;
  border-radius: 50%;
  display: block;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.16), 0 4px 14px rgba(0,0,0,0.35);
}
.app-header .brandtext { line-height: 1.2; }
.app-header .brandtext .brand-name {
  font-family: "Cormorant Garamond", "Zen Kaku Gothic New", serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #fff;
}
.app-header .brandtext .sub {
  font-size: 8.5px;
  font-weight: 400;
  letter-spacing: 0.3px;
  color: rgba(255,255,255,0.62);
  display: block;
}
.app-header .topbar-account { font-size: 12px; }
.app-header .topbar-account button {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.92);
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  padding: 8px 18px;
  letter-spacing: 0.5px;
  font-family: inherit;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.app-header .topbar-account button:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.45); }

/* ---------- Page shell ---------- */
.page-wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 28px 32px 48px;
}
.page-wrap.narrow { max-width: 760px; }
.page-wrap.wide { max-width: 1200px; }

.layout { display: flex; gap: 24px; padding: 28px 32px 40px; align-items: flex-start; max-width: 1320px; margin: 0 auto; }

/* 2026-09-01 依頼4：サイドメニューを全画面共通化するにあたり、従来page-wrapのnarrow/wideで
   持たせていた画面ごとの最大幅の意図を.mainに引き継ぐ（.mainは.layout内のflexアイテムのため、
   max-widthを指定してもflex-growは.layout側の残り幅までしか広がらない）。 */
.main.narrow { max-width: 780px; }
.main.wide { max-width: 1200px; }

.card {
  background: rgba(255,255,255,0.90);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 20px;
  padding: 28px 30px 26px;
  box-shadow: 0 18px 40px rgba(15,34,71,0.16), 0 2px 8px rgba(15,34,71,0.08);
}
.card + .card { margin-top: 20px; }

.main { flex: 1; min-width: 0; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  color: var(--navy-800);
  text-decoration: none;
  margin-bottom: 14px;
  letter-spacing: 0.3px;
}
.back-link:hover { color: var(--gold-600); text-decoration: underline; }

.card h1, .main h1 {
  font-size: 18px;
  margin: 0 0 6px;
  color: var(--navy-900);
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card h1::before, .main h1::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--gold-500), var(--navy-800));
  flex-shrink: 0;
}
.card h2, .main h2 {
  font-size: 14.5px;
  color: var(--navy-900);
  margin: 28px 0 10px;
  letter-spacing: 0.3px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.card h2:first-of-type { border-top: none; padding-top: 0; }
.card h3, .main h3 {
  font-size: 13.5px;
  color: var(--navy-800);
  margin: 24px 0 8px;
  letter-spacing: 0.3px;
}

.card p, .main p { line-height: 1.7; }
p.desc, p.hint, .hint { color: var(--ink-500); font-size: 12.5px; line-height: 1.7; }
p.desc { margin: 0 0 22px; }
.note { color: #9aa1b0; font-size: 11px; margin-top: 24px; line-height: 1.7; }
.meta { color: var(--ink-500); font-size: 12px; margin-top: 8px; line-height: 1.7; }
.error {
  color: var(--red-600);
  background: var(--red-bg);
  border: 1px solid var(--red-line);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  margin: 0 0 16px;
}

/* ---------- Table ---------- */
.table-scroll { overflow-x: auto; }
table.data-table { border-collapse: separate; border-spacing: 0 10px; width: 100%; min-width: 480px; }
table.data-table thead th {
  background: linear-gradient(120deg, var(--navy-950), var(--navy-800));
  color: rgba(255,255,255,0.92);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.5px;
  padding: 12px 16px;
  border: none;
  text-align: left;
}
table.data-table thead th:first-child { border-radius: 10px 0 0 10px; }
table.data-table thead th:last-child { border-radius: 0 10px 10px 0; }

table.data-table tbody tr {
  background: #ffffff;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
table.data-table tbody tr:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(15,34,71,0.10); }
table.data-table tbody td {
  border: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 12px 16px;
  font-size: 13.5px;
  text-align: left;
  vertical-align: middle;
}
table.data-table tbody td:first-child { border-left: 1px solid var(--line); border-radius: 10px 0 0 10px; }
table.data-table tbody td:last-child { border-right: 1px solid var(--line); border-radius: 0 10px 10px 0; }
table.data-table tbody tr.empty-row:hover { transform: none; box-shadow: none; }
table.data-table tbody tr.empty-row td { color: var(--ink-500); text-align: center; padding: 26px 16px; font-size: 13px; }

/* 数値中心の突合・比較テーブル用（罫線ベースで密に並べる） */
table.compare-table { border-collapse: collapse; width: 100%; margin-top: 16px; }
table.compare-table th, table.compare-table td {
  border: 1px solid var(--line);
  padding: 8px 12px;
  font-size: 13.5px;
  text-align: right;
}
table.compare-table th { background: var(--cream-100); text-align: center; color: var(--navy-900); font-weight: 500; }
table.compare-table td.label-cell { text-align: left; color: var(--ink-900); }

table.plain-table { border-collapse: collapse; width: 100%; margin-top: 10px; max-width: 720px; }
table.plain-table th, table.plain-table td { border: 1px solid var(--line); padding: 7px 14px; font-size: 13.5px; text-align: left; }
table.plain-table th { background: var(--cream-100); color: var(--navy-900); font-weight: 500; }
table.plain-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
table.plain-table tr.total td { font-weight: 700; font-size: 15px; color: var(--navy-900); background: var(--cream-050); }
table.plain-table + table.plain-table { margin-top: 20px; }

.office-no {
  display: inline-block;
  min-width: 34px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--navy-800);
  background: var(--cream-100);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 8px;
  letter-spacing: 0.5px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 500;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.badge.kyokai { color: var(--navy-800); background: rgba(29,61,116,0.08); border: 1px solid rgba(29,61,116,0.18); }
.badge.kyokai::before { background: var(--navy-700); }
.badge.kumiai { color: #8a6d1f; background: rgba(201,167,105,0.14); border: 1px solid rgba(201,167,105,0.35); }
.badge.kumiai::before { background: var(--gold-500); }
.badge.nencho-yes { color: var(--green-600); background: var(--green-bg); border: 1px solid var(--green-line); }
.badge.nencho-yes::before { background: var(--green-600); }
.badge.nencho-no { color: var(--ink-500); background: rgba(102,112,133,0.08); border: 1px solid var(--line); }
.badge.nencho-no::before { background: var(--ink-500); }
.badge.nencho-unset { color: #b7bcc7; background: rgba(102,112,133,0.05); border: 1px solid var(--line); }
.badge.nencho-unset::before { background: #b7bcc7; }

/* 企業リストの進捗チェックボックス（計算済／納品済）・アクション列 */
input[type="checkbox"], input[type="radio"] { width: auto; margin-top: 0; }
.progress-form { margin: 0; display: inline-block; }
.progress-checkbox { width: 18px; height: 18px; cursor: pointer; accent-color: var(--navy-800); }
td.cell-cycle { font-size: 12.5px; white-space: nowrap; }
td.cell-actions { white-space: nowrap; }

/* 企業リスト専用：列幅固定＋セル内縮小表示（折り返しではなく縮小・省略、2026-09-01 依頼3・4）。
   事業所番号はできるだけ狭く、企業名は広く確保する。給与の〆・支払は短縮表記（末/翌10日等）で
   1行に収まる想定だが、念のため他の列と同じくellipsisを適用する。編集ボタン列は廃止済み
   （サイドメニューの「企業情報編集」「従業員情報編集」に統合、依頼4・5）。
   2026-09-01 依頼1（今回分）：見出しテキストを短縮（No／人数／決算月／〆・払／計算／納品）した上で、
   短縮後の見出し文字とセル内の最大想定文字数（未設定／末/翌10日等）の両方が省略されずに収まるよう
   各列幅を再調整。事業所番号は最狭・企業名は最大幅を維持する方針は変更していない。 */
table.data-table--companies { table-layout: fixed; }
/* 2026-09-02 依頼2：企業選択チェックボックス列（No列の左）。 */
table.data-table--companies col.col-select { width: 38px; }
table.data-table--companies th.col-select,
table.data-table--companies td.cell-select { text-align: center; overflow: visible; }
.company-select-checkbox { width: 17px; height: 17px; cursor: pointer; accent-color: var(--navy-800); }
table.data-table--companies col.col-office { width: 60px; }
table.data-table--companies col.col-count { width: 64px; }
table.data-table--companies col.col-fiscal { width: 84px; }
table.data-table--companies col.col-nencho { width: 84px; }
table.data-table--companies col.col-cycle { width: 104px; }
table.data-table--companies col.col-check { width: 60px; }
/* col-nameには幅を指定せず、table-layout:fixedの仕様上、残りの領域をすべて企業名列に割り当てる */
table.data-table--companies th,
table.data-table--companies td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
table.data-table--companies td.cell-truncate { max-width: 0; } /* ellipsis有効化のためのfixed-table対策 */

/* 2026-09-03 社長依頼1：企業リストの表示密度を上げ、1画面に表示できる企業数を増やす。
   table.data-table共通のborder-spacing（行間の余白）・padding（セル上下の余白）は他画面
   （従業員一覧・支給控除項目一覧等）にも影響するため変更せず、企業リスト専用クラス
   （table.data-table--companies）にだけ上書きで詰めたスタイルを当てる。
   行間の余白は10px→3px、セルのpaddingは12px 16px→6px 12pxに縮小し、フォントもわずかに
   縮小することで、窮屈になりすぎない範囲で最大限行数を確保する。 */
table.data-table--companies { border-spacing: 0 3px; }
table.data-table--companies thead th { padding: 8px 12px; font-size: 12px; }
table.data-table--companies tbody td { padding: 6px 12px; font-size: 12.5px; }
table.data-table--companies .badge { padding: 2px 8px; font-size: 11px; }
table.data-table--companies .office-no { padding: 2px 7px; font-size: 11px; }

/* 2026-09-03 社長依頼2：従業員一覧（company_dashboard.ejs）の表示密度アップ。企業リストのとき
   （table.data-table--companies）と全く同じ考え方で、行間・パディングだけを専用クラスで縮小する
   （table.data-table共通ルールは他画面に影響するため変更しない）。 */
table.data-table--employees { border-spacing: 0 3px; }
table.data-table--employees thead th { padding: 8px 12px; font-size: 12px; }
table.data-table--employees tbody td { padding: 6px 12px; font-size: 12.5px; }
table.data-table--employees .badge { padding: 2px 8px; font-size: 11px; }

/* ---------- 企業No選択モーダル（サイドメニュー「企業情報編集」「従業員情報編集」から起動、依頼5） ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 27, 56, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-box {
  background: #fff;
  border-radius: 14px;
  padding: 24px 28px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.modal-box h3 { margin: 0 0 6px; color: var(--navy-900); font-size: 16px; }
.modal-box input[type="text"] {
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
}
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.modal-actions button { padding: 8px 18px; border-radius: 8px; font-size: 13.5px; cursor: pointer; border: none; }
.modal-actions .modal-cancel { background: var(--cream-100); color: var(--navy-900); }
.modal-actions .modal-confirm { background: linear-gradient(120deg, var(--navy-900), var(--navy-700)); color: #fff; }

/* ---------- トースト通知（保存成功フィードバック、依頼8） ---------- */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--navy-900);
  color: #fff;
  padding: 12px 22px;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
  font-size: 13.5px;
  z-index: 2000;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); }

td a.link-strong, a.company-link { color: var(--navy-900); text-decoration: none; font-weight: 700; font-size: 14px; }
td a.link-strong:hover, a.company-link:hover { color: var(--gold-600); text-decoration: underline; }

/* 企業名クリックメニューのトリガー（2026-09-01 依頼2）：見た目はa.company-linkを踏襲しつつ、
   <button>要素としてリセットスタイルを当てる。table-layout:fixedのellipsisセルに収まるよう
   display:blockで幅いっぱいに広げる。 */
button.company-link {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
button.company-link:hover { color: var(--gold-600); text-decoration: underline; }

/* ---------- 企業名クリックメニュー（企業情報編集／従業員情報編集／給与計算、依頼2） ---------- */
.company-menu-popover {
  position: fixed;
  z-index: 1200;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(15,34,71,0.22);
  min-width: 170px;
  padding: 6px;
}
.company-menu-popover a {
  display: block;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--navy-900);
  text-decoration: none;
  border-radius: 6px;
  white-space: nowrap;
}
.company-menu-popover a:hover { background: var(--cream-100); color: var(--navy-900); }

a.small { font-size: 12px; color: var(--navy-800); text-decoration: none; }
a.small:hover { color: var(--gold-600); text-decoration: underline; }
td .sep { color: var(--line); margin: 0 4px; }

/* ---------- Buttons ---------- */
a.button, button.button, span.button.employee-switcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  margin-right: 10px;
  padding: 11px 24px;
  background: linear-gradient(120deg, var(--navy-900), var(--navy-700));
  color: #fff;
  text-decoration: none;
  border: none;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 8px 18px rgba(15,34,71,0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.button:hover, button.button:hover, span.button.employee-switcher:hover { transform: translateY(-1px); box-shadow: 0 12px 22px rgba(15,34,71,0.32); color: #fff; }

/* ---------- Forms ---------- */
label { display: block; margin-top: 12px; font-size: 13px; color: var(--ink-900); font-weight: 500; }
input, select, textarea {
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  font-size: 14px;
  margin-top: 4px;
  color: var(--ink-900);
  background: #fff;
  border: 1px solid rgba(15,34,71,0.16);
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(201,167,105,0.20);
}
button {
  font-family: inherit;
}
button[type="submit"]:not(.button) {
  margin-top: 20px;
  padding: 10px 24px;
  background: linear-gradient(120deg, var(--navy-900), var(--navy-700));
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(15,34,71,0.22);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
button[type="submit"]:not(.button):hover { transform: translateY(-1px); box-shadow: 0 12px 22px rgba(15,34,71,0.30); }

fieldset {
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 6px 20px 18px;
  background: rgba(250,248,243,0.55);
}
legend {
  font-weight: 700;
  font-size: 13px;
  color: var(--navy-900);
  padding: 0 8px;
  letter-spacing: 0.3px;
}

.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2px 24px; }
.field-grid label { margin-top: 10px; }
.full-width { grid-column: 1 / -1; }

/* 企業名＋フリガナのように、2項目を1行に横並びさせたい場合のペア表示（基本情報タブ等） */
.form-row-pair { display: flex; gap: 24px; flex-wrap: wrap; }
.form-row-pair label { flex: 1; min-width: 240px; }

/* タブ内の中項目見出し（例：企業情報／代表者情報）。先頭の見出しは余白を詰める */
.tab-panel h3:first-child { margin-top: 4px; }

/* 給与体系タブ：役員／月給者／日給者／時給者の4グループを横一列（入りきらなければ2列）に並べる
   （2026-09-02 依頼6）。各グループは見出し＋field-gridをひとまとめにした箱として扱い、
   flex-wrapで画面幅に応じて折り返す。 */
.wage-groups { display: flex; flex-wrap: wrap; gap: 4px 28px; align-items: flex-start; }
.wage-group { flex: 1 1 220px; min-width: 200px; }
.wage-group h3 { margin-top: 4px; }
.wage-group .field-grid { grid-template-columns: 1fr; }

.calc-note { color: var(--ink-500); font-size: 12px; margin-top: 4px; display: inline-block; }
.calc-result {
  display: inline-block;
  margin-top: 8px;
  margin-right: 8px;
  padding: 5px 12px;
  background: var(--cream-100);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--navy-800);
  font-weight: 700;
}

.save-bar { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }

/* 年月日の直接入力＋和暦表示（2026-09-02 グループA-1）。テキスト入力欄の下に和暦バッジを表示する。 */
.jp-date-input { font-variant-numeric: tabular-nums; }
.jp-date-input.input-error { border-color: var(--red-600); box-shadow: 0 0 0 3px rgba(214,69,69,0.14); }
.wareki-badge {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--navy-800);
}
.jp-date-input.input-error + .wareki-badge { color: var(--red-600); }
/* 入社年月日・退職日の「不明」ステータス対応（2026-09-03 社長依頼）。「不明」チェックボックスON時、
   対象のjp-date-inputはreadonlyになる（views/partials/employee_form_tabs.ejs参照）ため、
   グレー背景にして編集不可であることを視覚的に示す。この属性は当該2項目にしか付与しないため
   他の日付欄の見た目には影響しない。 */
.jp-date-input[readonly] { background: var(--cream-100); color: var(--ink-500); }
.unknown-date-toggle { display: flex; align-items: center; gap: 6px; margin-top: 24px; font-weight: 500; font-size: 13px; }
.unknown-date-toggle input[type="checkbox"] { margin: 0; }

/* ---------- Tabs（企業情報フォーム） ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; border-bottom: 2px solid var(--line); padding-bottom: 0; }
.tab-btn {
  padding: 9px 18px;
  background: var(--cream-100);
  border: 1px solid transparent;
  border-radius: 8px 8px 0 0;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.3px;
  cursor: pointer;
  color: var(--navy-800);
  font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease;
}
.tab-btn:hover { background: rgba(201,167,105,0.18); }
.tab-btn.active {
  background: linear-gradient(120deg, var(--navy-900), var(--navy-700));
  color: #fff;
}
.tab-panel { display: none; padding: 20px 4px 4px; }

/* 給与項目マスタの一覧テーブル */
.items-hint { color: var(--ink-500); font-size: 12.5px; max-width: 720px; line-height: 1.7; }
table.items-table { border-collapse: collapse; margin-top: 10px; width: 100%; max-width: 720px; }
table.items-table th, table.items-table td { border: 1px solid var(--line); padding: 7px 12px; font-size: 13px; text-align: left; }
table.items-table th { background: var(--cream-100); color: var(--navy-900); font-weight: 500; }
.inactive-item, .inactive { color: var(--ink-500); text-decoration: line-through; }
.inline-form, form.inline { display: inline; }
.add-item-form { margin-top: 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.add-item-form label { display: flex; align-items: center; gap: 8px; margin-top: 0; white-space: nowrap; }
.add-item-form input { width: auto; min-width: 220px; margin-top: 0; }
.add-item-form button { margin-top: 0; }

table.items-table .inline-form button,
table.items-table form.inline button {
  padding: 5px 12px;
  font-size: 12px;
  background: rgba(15,34,71,0.06);
  color: var(--navy-800);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}
table.items-table .inline-form button:hover,
table.items-table form.inline button:hover { background: rgba(15,34,71,0.12); }

/* ---------- Status / summary（突合検証） ---------- */
.summary { margin-top: 16px; padding: 12px 16px; border-radius: 10px; font-weight: 700; font-size: 13.5px; }
.summary.ok { background: var(--green-bg); color: var(--green-600); border: 1px solid var(--green-line); }
.summary.warn { background: var(--amber-bg); color: var(--amber-600); border: 1px solid var(--amber-line); }
.summary.ng { background: var(--red-bg); color: var(--red-600); border: 1px solid var(--red-line); }

tr.status-ok td.status-cell { color: var(--green-600); font-weight: 700; }
tr.status-minor td.status-cell { color: var(--amber-600); font-weight: 700; }
tr.status-ng td.status-cell { color: var(--red-600); font-weight: 700; }
tr.status-placeholder td.status-cell { color: var(--ink-500); }
tr.status-empty td.status-cell { color: #b7bcc7; }
.placeholder-hint { color: var(--amber-600); font-size: 12px; }

.total { font-weight: 700; font-size: 15.5px; color: var(--navy-900); }

/* ---------- 企業ダッシュボード：操作ボタンの上部固定バー（company_dashboard.ejs、2026-09-02 依頼1） ---------- */
/* 従業員数が多くなってもスクロールで隠れないよう、「従業員を追加」「給与計算」「一覧表示」
   「納品用PDF作成」の4ボタン＋企業名をposition: stickyで画面上部に固定する。
   .cardのpadding（28px 30px 26px）をマイナスマージンで相殺してカード幅いっぱいに広げ、
   カードの角丸（20px）に合わせて上端のみ角丸を維持する。 */
.dashboard-toolbar {
  position: sticky;
  /* 2026-09-02 依頼6：ヘッダーをposition: stickyにしたことに伴い、ヘッダーの下に隠れないよう
     stickyのtopをヘッダー実高さ分だけ下げる（従来はヘッダーが固定されていなかったため top:0 で
     問題なかった）。 */
  top: var(--header-height);
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin: -28px -30px 20px;
  padding: 16px 30px;
  border-radius: 20px 20px 0 0;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 14px rgba(15, 34, 71, 0.06);
}
.dashboard-toolbar .dashboard-company-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy-900);
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard-toolbar .dashboard-toolbar-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.dashboard-toolbar .dashboard-toolbar-buttons a.button,
.dashboard-toolbar .dashboard-toolbar-buttons span.button {
  margin: 0;
}
.button-disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
  box-shadow: none;
}
.button-disabled:hover { transform: none; box-shadow: none; }

/* 「保存」ボタン等、主操作（計算実行等）と区別したいセカンダリボタン（2026-09-02 依頼1） */
a.button.button-secondary, button.button-secondary, span.button.employee-switcher {
  background: #fff;
  color: var(--navy-900);
  border: 1px solid rgba(15,34,71,0.28);
  box-shadow: none;
}
a.button.button-secondary:hover, button.button-secondary:hover, span.button.employee-switcher:hover {
  background: var(--cream-100);
  color: var(--navy-900);
  box-shadow: none;
}

/* 破壊的操作（企業・従業員データの削除、2026-09-03 社長依頼2）専用の警告色ボタン。
   誤クリック抑止のため、通常操作の紺色ボタンとは明確に見た目を分ける。 */
a.button.button-danger, button.button-danger {
  background: linear-gradient(120deg, #a93226, var(--red-600));
  box-shadow: 0 8px 18px rgba(192,57,43,0.25);
}
a.button.button-danger:hover, button.button-danger:hover {
  box-shadow: 0 12px 22px rgba(192,57,43,0.32);
}
button.button-danger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* ---------- 給与計算画面：操作バーの上部固定表示（company_payroll.ejs、2026-09-02 依頼1・2） ---------- */
/* 従業員リスト画面（.dashboard-toolbar）と同じposition: stickyパターン。企業名・対象年月・
   ボタン類（保存／計算を実行する／一覧表示／納品用PDF作成）を1行に横並びで固定表示する。
   対象年月の入力枠は表示に必要な最小限のサイズに縮小する（依頼2）。 */
.payroll-toolbar {
  position: sticky;
  /* 2026-09-02 依頼6：ヘッダーのstickyの下に隠れないよう、topをヘッダー実高さ分下げる。 */
  top: var(--header-height);
  z-index: 30;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 14px 18px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin: -28px -30px 20px;
  padding: 16px 30px;
  border-radius: 20px 20px 0 0;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 14px rgba(15, 34, 71, 0.06);
}
/* 2026-09-02 依頼1：企業名〜対象年月〜ボタン類が崩れず一列に収まるよう、企業名は縮小表示
   （固定の最大幅＋text-overflow: ellipsis）にする。flex-shrinkを許可しつつmin-width:0で
   正しく縮小・省略できるようにする。 */
.payroll-toolbar .payroll-toolbar-company-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy-900);
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  min-width: 60px;
  max-width: 260px;
}
.payroll-toolbar .payroll-toolbar-month {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--navy-800);
  white-space: nowrap;
}
.payroll-toolbar .payroll-toolbar-month input[type="month"] {
  width: 132px;
  padding: 6px 8px;
  margin-top: 0;
  font-size: 12.5px;
}
.payroll-toolbar .payroll-toolbar-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: auto;
}
.payroll-toolbar .payroll-toolbar-buttons a.button,
.payroll-toolbar .payroll-toolbar-buttons button.button,
.payroll-toolbar .payroll-toolbar-buttons span.button {
  margin: 0;
}

/* ---------- 企業情報編集画面：見出し行に保存ボタンを配置（2026-09-02 社長フィードバック反映） ---------- */
/* 「企業情報の編集 - ○○」の見出しの右隣に、companyForm用の保存ボタン（form属性で外部から
   submitする）を配置するための1行レイアウト。 */
.edit-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.edit-page-header h1 { margin: 0; }
/* 見出し右側のボタン群（「一覧に戻る」＋保存ボタン、2026-09-02 社長依頼）。 */
.edit-page-header-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.edit-page-header-buttons .button { margin: 0; }

/* 「従業員切替」ボタン（2026-09-14 社長指示）：ボタンの見た目の上に透明なネイティブ<select>を
   重ね、押すとOS標準のドロップダウン／ピッカーが開く（スマホでも自作モーダルより確実に操作できる）。 */
.employee-switcher { position: relative; cursor: pointer; }
.employee-switcher select {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  opacity: 0; cursor: pointer; font-size: 16px; /* iOSの自動ズーム防止 */
}
.employee-switcher:focus-within { outline: 2px solid var(--navy-700); outline-offset: 2px; }

/* ---------- 企業情報編集タブ「基本情報」：事業所番号＋企業名＋フリガナの横並び行
   （2026-09-02 社長フィードバック反映：タブ外エリアからタブ内に戻した） ---------- */
/* 事業所番号を小さく、右に企業名・フリガナを並べる（従来のedit-toolbar-fieldsと同じ考え方）。 */
.company-basic-name-row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.company-basic-name-row label { margin-top: 0; }
.company-basic-name-row .field-office-number { flex: 0 0 88px; }
.company-basic-name-row .field-company-name { flex: 2 1 220px; min-width: 160px; }
.company-basic-name-row .field-company-kana { flex: 1.4 1 160px; min-width: 130px; }

/* ---------- 従業員情報編集画面：タブ上部の保存ツールバー（2026-09-02 依頼9・10） ---------- */
/* 氏名（企業名）の読み取り専用表示と、画面内で唯一の保存ボタンを1行にまとめ、タブの外
   （どのタブを表示していても常に見える位置）に配置する（企業編集画面は対象外・依頼で
   タブ内＋見出し横に変更済み。従業員編集画面はこのパターンを維持）。
   ヘッダーがposition: stickyになったため（依頼6）、このツールバーもヘッダーの下に隠れないよう
   sticky topをヘッダー実高さ分ずらして追従表示にする。dashboard-toolbar/payroll-toolbarと違い、
   h1見出しの下に続けて配置するため、カード端まで届く全幅トリック（負のマージン）は使わず、
   カードの内側パディングの範囲内に収まる通常のボックスとして浮かせる。 */
.edit-toolbar {
  position: sticky;
  top: calc(var(--header-height) + 8px);
  z-index: 20;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 14px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin: 14px 0 20px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 6px 14px rgba(15, 34, 71, 0.08);
}
.edit-toolbar-fields {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.edit-toolbar-fields label {
  margin-top: 0;
  font-size: 12px;
}
.edit-toolbar-fields input { margin-top: 4px; }
.edit-toolbar .field-employee-name { flex: 1 1 200px; min-width: 160px; }
.edit-toolbar-save {
  margin: 0;
  flex-shrink: 0;
  white-space: nowrap;
}
/* 従業員編集画面：企業編集画面のような編集可能な項目行の代わりに、氏名（企業名）を
   読み取り専用の文脈表示として1行で示す（依頼10）。長い場合は省略表示にする（依頼1と同じ考え方）。 */
.edit-toolbar-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-bottom: 2px;
}

/* ---------- 各編集画面：テキストサイズを全体的に少し小さく（2026-09-02 依頼8） ---------- */
/* 企業情報編集・従業員情報編集画面（新規登録画面は対象外）にのみ適用するスコープ付きクラス。 */
.edit-form-scale label { font-size: 12.5px; }
.edit-form-scale input,
.edit-form-scale select,
.edit-form-scale textarea { font-size: 13px; }
.edit-form-scale h3 { font-size: 13px; }
.edit-form-scale .hint { font-size: 12px; }
.edit-form-scale .calc-note { font-size: 11.5px; }
.edit-form-scale .calc-result { font-size: 12px; }
.edit-form-scale .tab-btn { font-size: 12px; padding: 8px 15px; }

/* ---------- 従業員一覧（company_dashboard.ejs、2026-09-01 依頼5・6） ---------- */
/* 賃金台帳PDFボタン：一覧のボタンより小さめの「小さいボタン」バリエーション */
a.button.button-small {
  margin-top: 0;
  margin-right: 0;
  padding: 6px 14px;
  font-size: 12px;
}
/* 依頼6：デフォルトは在職者のみ表示。「退職者を表示」チェックが外れている間は
   tbodyにhide-resignedクラスを付与し、data-resigned="true"の行をCSSで非表示にする。 */
.list-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--ink-900);
}
.list-filter-bar label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 500; }
.list-filter-bar input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--navy-800); }
tbody.hide-resigned tr[data-resigned="true"] { display: none; }
/* 2026-09-12 社長依頼①：賃金台帳の対象期間（対象月）指定バー */
.ledger-period-bar { flex-wrap: wrap; gap: 10px; }
.ledger-period-bar .ledger-period-title { font-weight: 600; color: var(--navy-800); }
.ledger-period-bar input[type="month"] { width: 132px; padding: 5px 8px; margin-top: 0; font-size: 12.5px; }
.ledger-period-bar .hint { font-size: 12px; color: var(--ink-500); margin: 0; }
.ledger-period-bar .hint.is-error { color: #c0392b; }
.ledger-period-bar button.ledger-period-reset { margin: 0; padding: 6px 14px; font-size: 12px; }
.badge.resigned { color: var(--ink-500); background: rgba(102,112,133,0.08); border: 1px solid var(--line); font-size: 10.5px; padding: 2px 8px; margin-left: 6px; }
/* 2026-09-03 依頼1：産休・育休中バッジ（退職バッジと同じ見た目パターン、色は区別のためamber系） */
.badge.on-leave { color: var(--amber-600); background: var(--amber-bg); border: 1px solid var(--amber-line); font-size: 10.5px; padding: 2px 8px; margin-left: 6px; }

/* ---------- Side menu（トップページ） ---------- */
/* 2026-09-02 依頼6：縦・横どちらにスクロールしてもヘッダー直下に固定表示されるよう、
   position: stickyに変更（.layoutはalign-items: flex-start指定済みのため、高さがmainより
   短いこのサイドメニューでも正しくstickyが機能する）。topはヘッダーの実高さ＋余白で指定し、
   固定表示中のヘッダーと重ならないようにする。overflow-x: hiddenにより横スクロール自体が
   発生しないため、横方向のズレも生じない。 */
/* 2026-09-03 社長依頼2：サイドメニュー幅を従来の約3分の2（240px→160px）に縮小し、その分
   企業リスト等のメイン表示エリアの横幅を広げる（.mainはflex:1のため自動的に広がる）。
   幅が狭くなった分、内側の余白・アイコンサイズ・文字サイズも合わせて縮小し、
   「企業情報編集」等のやや長いラベルが極端に折り返し過多にならないよう調整している。 */
.menu {
  width: 160px;
  flex-shrink: 0;
  position: sticky;
  top: calc(var(--header-height) + 16px);
  max-height: calc(100vh - var(--header-height) - 32px);
  overflow-y: auto;
  overflow-x: hidden;
  background: linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 60%, var(--navy-800) 100%);
  border-radius: 20px;
  padding: 16px 10px;
  box-shadow: 0 18px 40px rgba(15,34,71,0.20);
}
.menu::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/images/office-bg.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.16;
  z-index: 0;
}
.menu::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,27,56,0.55), rgba(11,27,56,0.85));
  z-index: 0;
}
.menu > * { position: relative; z-index: 1; }
.menu h2 {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 1.5px;
  margin: 4px 0 14px;
  text-transform: uppercase;
  border: none;
  padding: 0;
}
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu li { border-top: 1px solid rgba(255,255,255,0.08); }
.menu li:first-child { border-top: none; }
.menu a, .menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 10px 6px;
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: none;
  margin: 0;
  transition: background 0.15s ease, padding-left 0.15s ease;
}
.menu a:hover, .menu button:hover { background: rgba(255,255,255,0.08); padding-left: 10px; box-shadow: none; transform: none; }
.menu button { color: #f0b8ab; }
/* 幅縮小（240px→160px）に合わせてアイコンも一回り小さくし、ラベルの折り返しを最小限に抑える。 */
.menu svg { flex-shrink: 0; opacity: 0.85; width: 14px; height: 14px; }
.menu form { margin: 0; }
/* 「その他」メニュー（2026-09-02 依頼）：計算済／納品済リセット・ログアウトと違い破壊的操作では
   ないため、.menu buttonの警告色（#f0b8ab）を打ち消し、他のリンク項目と同じ白系の色に揃える。 */
.menu button.sidebar-other-trigger { color: rgba(255,255,255,0.88); }

/* ---------- サイドメニュー：選択中企業バナー（2026-09-02 依頼2） ---------- */
/* 企業リスト（index.ejs）でチェックした選択企業をここに表示する。JS（sidebar.ejs内）で
   localStorageの状態に応じてdisplayをflex/noneに切り替える。 */
.selected-company-banner {
  display: none;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 0 0 12px;
  font-size: 11px;
  color: rgba(255,255,255,0.92);
}
.selected-company-banner .selected-company-label {
  flex-shrink: 0;
  opacity: 0.68;
  font-size: 10px;
}
.selected-company-banner .selected-company-name {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.selected-company-banner .selected-company-clear {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #f0b8ab;
  font-size: 11px;
  cursor: pointer;
  padding: 2px 4px;
  margin: 0;
  text-decoration: underline;
  width: auto;
}

/* ---------- サイドメニュー：企業情報編集／従業員情報編集のインライン展開リスト（依頼3） ---------- */
.company-list-details summary {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 6px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.88);
  cursor: pointer;
  border-radius: 8px;
  list-style: none;
  transition: background 0.15s ease, padding-left 0.15s ease;
}
.company-list-details summary::-webkit-details-marker { display: none; }
.company-list-details summary:hover { background: rgba(255,255,255,0.08); padding-left: 10px; }
.company-list-details[open] summary { background: rgba(255,255,255,0.08); }
.company-list-panel { padding: 4px 4px 12px; }
/* 2026-09-02 依頼1：「移動」ボタンをアイコンのみの小さな正方形ボタンに変更し、
   浮いた分の幅を入力欄（フォントサイズ・パディングも拡大）に充てて入力しやすくした。
   2026-09-03 依頼2：サイドメニュー幅縮小（240px→160px）に合わせてさらに一回り小さく調整。 */
.quick-jump { display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.quick-jump input {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  padding: 8px 8px;
  margin-top: 0;
  background: rgba(255,255,255,0.95);
}
/* 注意：.quick-jump-go は<button>要素のため、.menu a, .menu button（クラス+要素でCSS詳細度が高い）
   に幅・パディング指定（width:100%等）で負けてボタンが伸び切ってしまう。.quick-jump .quick-jump-go
   のように親要素クラスを含めて詳細度を上げ、確実に上書きする。 */
.quick-jump .quick-jump-go {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(255,255,255,0.16);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.28);
  cursor: pointer;
  font-family: inherit;
  box-shadow: none;
}
.quick-jump .quick-jump-go:hover { background: rgba(255,255,255,0.26); }
.quick-jump .quick-jump-go svg { flex-shrink: 0; }
.jump-error { color: #f0b8ab; font-size: 11px; margin: 6px 0 0; line-height: 1.5; }
.company-quick-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
  border-top: 1px solid rgba(255,255,255,0.10);
}
.company-quick-list li { border-top: none; }
.company-quick-list li a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  font-size: 11.5px;
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  border-radius: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.company-quick-list li a:hover { background: rgba(255,255,255,0.10); color: #fff; }
.company-quick-list-empty { padding: 7px 4px; font-size: 11.5px; color: rgba(255,255,255,0.5); }
.office-no-mini {
  flex-shrink: 0;
  display: inline-block;
  min-width: 28px;
  text-align: center;
  font-size: 9.5px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.14);
  border-radius: 999px;
  padding: 2px 6px;
  letter-spacing: 0.3px;
}

/* ---------- 支給・控除項目マスタ：初期枠エディタ（依頼2、2026-09-02 依頼15で横並びグリッドに変更） ---------- */
/* 縦並びの表だったものを、幅に応じて自動的に折り返す横並びのカードグリッドに変更した。
   カード幅を150px前後に抑えることで、企業編集画面の.main.wide（最大1200px）の中でも
   横スクロールが発生せず、7枠・6枠がそれぞれ概ね1〜2行に収まる。 */
.items-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.items-slot-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: rgba(250,248,243,0.6);
}
.items-slot-card input[type="text"] { margin-top: 0; font-size: 12.5px; padding: 7px 8px; }
.items-slot-mode {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
/* 2026-09-04 依頼3：追加支給・追加控除項目の課税区分／時間外労働への算入区分セレクト */
.items-slot-settings {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.items-slot-settings label {
  display: block;
  margin: 0;
  font-size: 10.5px;
  font-weight: 500;
  color: #6b7280;
}
.items-slot-settings select {
  width: 100%;
  margin-top: 2px;
  font-size: 11.5px;
  padding: 5px 6px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #fff;
}
.radio-inline {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  margin: 0 !important;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-900);
  white-space: nowrap;
}
.radio-inline input[type="radio"] { margin: 0; }

/* ---------- 給与計算画面（企業単位・複数従業員一括、依頼1） ---------- */
.payroll-employee-block {
  margin-top: 24px;
  background: rgba(250,248,243,0.7);
}
.payroll-employee-block legend { font-size: 14px; }

/* ---------- 給与計算画面：勤怠情報・支給/控除項目の横並びグリッド（2026-09-01 依頼2・3） ---------- */
/* 従業員数が少なければ縦スクロールを最小限に、項目数が多い分は横スクロール（.table-scrollを流用）で
   吸収する方針。列見出し・入力欄はいずれも縮小し、1行に多くの項目が収まるようにする。 */
.payroll-grid-wrap { margin-top: 18px; }
table.payroll-grid-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 640px;
}
table.payroll-grid-table th,
table.payroll-grid-table td {
  border: 1px solid var(--line);
  padding: 4px 5px;
  text-align: center;
  white-space: nowrap;
}
table.payroll-grid-table thead tr.group-row th {
  background: linear-gradient(120deg, var(--navy-950), var(--navy-800));
  color: rgba(255,255,255,0.92);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
}
table.payroll-grid-table thead tr:last-child th {
  background: var(--cream-100);
  color: var(--navy-900);
  font-weight: 500;
  font-size: 10px;
  line-height: 1.35;
  vertical-align: bottom;
  padding-top: 6px;
  padding-bottom: 6px;
}
table.payroll-grid-table tbody td {
  background: #fff;
}
table.payroll-grid-table td.cell-name {
  text-align: left;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--navy-900);
}
table.payroll-grid-table td.cell-personal-no {
  color: var(--ink-500);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
table.payroll-grid-table input.grid-input {
  width: 56px;
  padding: 3px 4px;
  margin-top: 0;
  font-size: 12px;
  text-align: right;
}
table.payroll-grid-table input.grid-input:focus {
  box-shadow: 0 0 0 2px rgba(201,167,105,0.35);
}

/* ---------- ログイン画面 ---------- */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.auth-card {
  width: 100%;
  max-width: 380px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 20px;
  padding: 36px 32px 30px;
  box-shadow: 0 24px 60px rgba(11,27,56,0.35), 0 2px 8px rgba(15,34,71,0.10);
  text-align: center;
}
.auth-card .brand-mark img {
  height: 56px;
  width: 56px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(15,34,71,0.10), 0 4px 14px rgba(15,34,71,0.18);
}
.auth-card .brand-mark .brand-name {
  display: block;
  margin-top: 12px;
  font-family: "Cormorant Garamond", "Zen Kaku Gothic New", serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--navy-900);
}
.auth-card .brand-mark .sub {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--ink-500);
  letter-spacing: 0.3px;
}
.auth-card h1 {
  font-size: 15px;
  margin: 24px 0 18px;
  color: var(--navy-900);
  letter-spacing: 0.5px;
  text-align: left;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.auth-card form { text-align: left; }
.auth-card label { font-size: 12.5px; }
.auth-card button[type="submit"] { width: 100%; }
.auth-card .error { text-align: left; }

/* ---------- CSV出力・取込 集約画面（csv_manage.ejs、社長依頼4、2026-09-03） ---------- */
/* 企業CSV／従業員CSVの2セクションを1画面に縦に並べる。セクション間は罫線＋余白で区切る。 */
.csv-manage-section { margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--line); }
.csv-manage-section:first-of-type { padding-top: 0; border-top: none; }
.csv-section-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.csv-section-actions .button { margin-top: 0; }

/* ---------- CSV出力・取込（企業CSV／従業員CSV、社長依頼 2026-09-02） ---------- */
.csv-import-form {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-top: 16px;
  padding: 16px;
  background: rgba(102, 112, 133, 0.04);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.csv-import-form label { font-size: 12.5px; flex: 1; }
.csv-import-form input[type="file"] { display: block; margin-top: 6px; width: 100%; font-size: 13px; }
.csv-scoped-export-form {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-top: 12px;
  margin-bottom: 6px;
}
.csv-scoped-export-form label { font-size: 12.5px; }
.csv-scoped-export-form select { display: block; margin-top: 6px; min-width: 240px; }
.csv-import-result { margin-top: 28px; }
.csv-import-result h3 { margin-bottom: 6px; }
.csv-import-summary { font-size: 13.5px; }
.csv-import-fail-count { color: #c0392b; font-weight: 700; }
.csv-import-fail-heading { color: #c0392b; font-size: 13.5px; margin-top: 18px; }
.csv-import-warning {
  margin-top: 14px;
  padding: 12px 16px;
  background: rgba(230, 162, 60, 0.1);
  border: 1px solid rgba(230, 162, 60, 0.35);
  border-radius: 10px;
  font-size: 13px;
  color: #8a5a17;
}
.csv-import-warning p { margin: 0 0 6px; }
.csv-import-warning ul { margin: 0; padding-left: 18px; }
.csv-import-warning li { margin: 2px 0; }
/* 社長依頼2（2026-09-03）：CSV取込時、住所から推定した郵便番号の確認表示（自動上書きはしない
   ため、警告色〔csv-import-warning〕とは区別した情報色にしている）。 */
.csv-import-postal-suggestion {
  margin-top: 14px;
  padding: 12px 16px;
  background: rgba(52, 120, 199, 0.08);
  border: 1px solid rgba(52, 120, 199, 0.3);
  border-radius: 10px;
  font-size: 13px;
  color: #245489;
}
.csv-import-postal-suggestion p { margin: 0 0 8px; }
.csv-import-postal-suggestion table { margin-top: 4px; }
.import-status {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
}
.import-status-fail { color: #c0392b; background: rgba(192, 57, 43, 0.08); border-color: rgba(192, 57, 43, 0.28); }
.import-status-ok { color: var(--green-600); background: var(--green-bg); border-color: var(--green-line); }
.csv-import-success-details { margin-top: 16px; }
.csv-import-success-details summary { cursor: pointer; font-size: 13px; color: var(--ink-500); }

/* ---------- 企業・従業員データの削除（社長依頼2、2026-09-03） ---------- */
.delete-mode-toggle { display: flex; gap: 18px; margin-top: 16px; }
.delete-mode-toggle label { display: flex; align-items: center; gap: 6px; font-weight: 500; margin-top: 0; }
.delete-mode-toggle input[type="radio"] { width: auto; margin-top: 0; }
.delete-search-form { display: flex; align-items: flex-end; gap: 16px; margin-top: 14px; padding: 16px; background: rgba(102,112,133,0.04); border: 1px solid var(--line); border-radius: 10px; flex-wrap: wrap; }
.delete-search-form label { font-size: 12.5px; flex: 0 0 160px; }
.delete-candidate-list { margin-top: 18px; }
.delete-candidate-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 10px;
  background: #fff;
}
.delete-candidate-info { font-size: 13.5px; line-height: 1.7; }
.delete-candidate-info .office-no-mini { margin-right: 8px; }
.delete-confirm-panel {
  margin-top: 20px;
  padding: 20px 22px;
  border: 1px solid var(--red-line);
  background: var(--red-bg);
  border-radius: 12px;
}
.delete-confirm-panel h3 { margin: 0 0 10px; color: var(--red-600); }
.delete-confirm-panel .delete-target-name { font-size: 16px; font-weight: 700; color: var(--ink-900); }
.delete-confirm-counts { margin: 12px 0; padding: 12px 14px; background: #fff; border-radius: 8px; font-size: 13px; line-height: 1.9; border: 1px solid var(--line); }
.delete-confirm-counts .zero-count { color: var(--ink-500); }
.delete-confirm-input-label { font-size: 13px; margin-top: 16px; }
.delete-result-panel {
  margin-top: 20px;
  padding: 18px 22px;
  border: 1px solid var(--green-line);
  background: var(--green-bg);
  border-radius: 12px;
  color: var(--green-600);
  font-size: 13.5px;
  line-height: 1.9;
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .layout { flex-direction: column; padding: 20px; }
  .menu { width: auto; }
  .page-wrap { padding: 20px; }
  .card, .main { padding: 20px 18px 20px; }
  .app-header { padding: 12px 18px; flex-wrap: wrap; gap: 10px; }
  /* 従業員編集画面の見出し右ボタン群（従業員切替・一覧に戻る・保存する）：3つになったため（2026-09-14）、
     スマホ幅ではコンテナの縮小を許可し、ボタンを折り返して画面内に収める。 */
  .edit-page-header-buttons { flex-shrink: 1; min-width: 0; max-width: 100%; }
}

/* =====================================================================
   従業員用打刻画面（/attend/*、2026-09-07 社長依頼「勤怠入力・管理機能」）
   スマホでの操作を最優先にした専用レイアウト。管理者側のサイドメニュー・テーブル密集レイアウトとは
   独立させ、大きなボタン・少ない情報量でシンプルに操作できることを重視する。
   ===================================================================== */
.attend-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 48px;
}
.attend-card {
  width: 100%;
  max-width: 480px;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 20px;
  padding: 28px 24px 26px;
  box-shadow: 0 24px 60px rgba(11,27,56,0.30), 0 2px 8px rgba(15,34,71,0.10);
}
.attend-card + .attend-card { margin-top: 16px; }
.attend-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.attend-company-name { font-size: 12px; color: var(--ink-500); }
.attend-employee-name { font-size: 19px; font-weight: 700; color: var(--navy-900); margin: 2px 0 18px; }
.attend-today-date { font-size: 13px; color: var(--ink-500); margin-bottom: 18px; }
.attend-state-badge {
  display: inline-block;
  font-size: 12.5px;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.attend-state-badge.before { background: rgba(102,112,133,0.08); color: var(--ink-500); border: 1px solid var(--line); }
.attend-state-badge.working { background: var(--green-bg); color: var(--green-600); border: 1px solid var(--green-line); }
.attend-state-badge.on-break { background: var(--amber-bg); color: var(--amber-600); border: 1px solid var(--amber-line); }
.attend-state-badge.done { background: rgba(15,34,71,0.06); color: var(--navy-800); border: 1px solid var(--line); }
.attend-punch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 8px;
}
.attend-punch-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 22px 10px;
  border-radius: 16px;
  border: none;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-950));
  box-shadow: 0 10px 20px rgba(15,34,71,0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.attend-punch-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 26px rgba(15,34,71,0.32); }
.attend-punch-btn:disabled { background: rgba(102,112,133,0.18); color: rgba(27,35,51,0.35); box-shadow: none; cursor: not-allowed; }
.attend-punch-btn.clock-out { background: linear-gradient(135deg, var(--red-600), #8e2a1f); }
.attend-punch-btn.break { background: linear-gradient(135deg, var(--gold-600), #8a6d1f); }
.attend-punch-icon { font-size: 26px; line-height: 1; }
.attend-links { display: flex; justify-content: space-between; margin-top: 20px; font-size: 12.5px; }
.attend-history-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.attend-history-table th, .attend-history-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: center; }
.attend-history-table th { color: var(--ink-500); font-weight: 600; }
@media (max-width: 480px) {
  .attend-card { padding: 22px 16px 20px; }
  .attend-punch-btn { padding: 18px 8px; font-size: 13.5px; }
}

/* 2026-09-18 カスタマイズ確定仕様書 Phase 1：給与項目タブの「計算に含めない（表示のみ）」チェック・
   固定列「歩合給」選択時の注記、従業員情報「月別金額」タブの12枠テーブル */
.items-slot-settings .checkbox-inline {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #374151;
}
.items-slot-settings .checkbox-inline input[type="checkbox"] { margin: 0; }
.items-fixedcol-note {
  display: block;
  font-size: 10px;
  color: #b45309;
  line-height: 1.4;
}
.monthly-amount-table {
  border-collapse: collapse;
  font-size: 12px;
}
.monthly-amount-table th,
.monthly-amount-table td {
  border: 1px solid var(--line);
  padding: 3px 3px;
  white-space: nowrap;
}
.monthly-amount-table th { background: #f3f4f6; font-weight: 600; text-align: center; font-size: 11px; }
.monthly-amount-table td.cell-name { text-align: left; min-width: 9em; font-size: 11.5px; }
.monthly-amount-table input.grid-input { text-align: right; width: 5em !important; min-width: 0; padding: 3px 4px; font-size: 12px; }
.payroll-grid-table td.monthly-ref-cell { background: #f9fafb; white-space: nowrap; padding: 4px 8px; }

/* ---- 2026-10-01 ユーザー別企業リスト：閲覧だけの帯・事務所タブ・ログイン中の表示・アカウント管理 ---- */
.readonly-banner { background: #f3f4f6; border: 1px solid #9ca3af; border-left: 6px solid #6b7280; color: #1f2937; padding: 8px 12px; margin: 8px 16px; border-radius: 6px; font-size: 13px; }
.main .readonly-banner { margin: 0 0 12px; }
body.readonly-mode .main.card { background: #fafafa; }
/* 2026-10-01 早川QA 軽微2・3：閲覧だけの画面の入力欄（サーバーが disabled にして返す）は、入力できないことが見て分かる色にする */
body.readonly-mode input:disabled, body.readonly-mode select:disabled, body.readonly-mode textarea:disabled { background: #eef0f3; color: #374151; cursor: not-allowed; }
.office-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; border-bottom: 1px solid #e5e7eb; }
.office-tab { padding: 6px 12px; border: 1px solid #e5e7eb; border-bottom: none; border-radius: 6px 6px 0 0; font-size: 13px; color: #374151; text-decoration: none; background: #f9fafb; }
.office-tab.is-active { background: #fff; font-weight: 700; color: #111827; border-color: #9ca3af; }
.office-tab.is-other { color: #4b5563; }
.readonly-list .progress-checkbox { cursor: not-allowed; }
.app-header .topbar-me { margin-left: auto; color: #fff; font-size: 12px; }
.app-header .me-emergency { background: #b91c1c; color: #fff; padding: 2px 8px; border-radius: 4px; font-weight: 700; }
.account-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.account-table th, .account-table td { border: 1px solid #e5e7eb; padding: 6px 8px; text-align: left; vertical-align: top; }
.account-table th { background: #f3f4f6; }
.issued-box { border: 2px solid #b45309; background: #fffbeb; padding: 12px; border-radius: 8px; margin: 12px 0; }
.issued-box code { font-size: 18px; letter-spacing: 1px; }
.account-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin: 8px 0 16px; }
.account-form label { display: flex; flex-direction: column; font-size: 12px; gap: 2px; }
.inline-form { display: inline; }

/* ---- 2026-10-01 対象年月の12か月の表・直接修正のお知らせ ---- */
.month-picker { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.month-picker-trigger { padding: 4px 10px; border: 1px solid #9ca3af; border-radius: 6px; background: #fff; color: #111827; cursor: pointer; font-size: 14px; }
.month-picker-trigger .month-status { color: #15803d; font-size: 12px; margin-left: 4px; }
.month-picker-panel { position: absolute; top: 100%; left: 0; z-index: 50; margin-top: 4px; width: 320px; background: #fff; border: 1px solid #d1d5db; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); padding: 10px; color: #111827; }
.month-picker-panel[hidden] { display: none; }
.month-picker-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.month-picker-head button { border: 1px solid #d1d5db; background: #f9fafb; border-radius: 4px; padding: 2px 10px; cursor: pointer; }
.month-picker-head button:disabled { opacity: 0.35; cursor: default; }
.month-picker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mp-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; cursor: pointer; font-size: 13px; color: #111827; }
.mp-cell:hover { border-color: #2563eb; }
.mp-cell .mp-status { font-size: 11px; min-height: 14px; }
.mp-cell.mp-done .mp-status { color: #15803d; }
.mp-cell.mp-partial .mp-status { color: #b45309; }
.mp-cell.mp-out { color: #9ca3af; background: #f9fafb; }
.mp-cell.mp-selected { border: 2px solid #2563eb; font-weight: 700; }
.month-picker-legend { font-size: 11px; color: #6b7280; margin: 8px 0 0; }
.direct-edit-notice { border: 1px solid #fdba74; background: #fff7ed; border-radius: 6px; padding: 8px 12px; margin: 8px 0; font-size: 13px; }
.direct-edit-notice ul { margin: 4px 0 0 18px; padding: 0; }
.mp-legend-done { color: #15803d; }
.mp-legend-partial { color: #b45309; }

/* ---- 2026-10-23 社長指示：スマホで見たときの企業リスト・上の紺の帯 ----
   原因：スマホ幅では .layout が縦並び（align-items:flex-start）のため、.main が中身の表の幅（最小約610px）まで
   広がり、ページ全体が画面より広くなっていた。iPhone はページ全体を縮小して表示するため、紺の帯（画面幅）が
   右まで届かず、企業名の列は幅0になって見えなかった。
   対策：企業リスト（index.ejs の .main--company-list。契約中・解約済みの両方）だけ、スマホ幅では .main を画面幅に収め、
   600px以下で各行を2段のカード（1段目：選択・No・企業名の全文／2段目：人数〜納品）にする。PC幅は変えない。
   ほかの画面（給与計算・有給管理など）は、画面幅に収めるとツールバーが窮屈になるため今回は対象外（従来どおり）。 */
@media (max-width: 720px) {
  .layout > .main.main--company-list { width: 100%; max-width: 100%; }
}
@media (max-width: 600px) {
  table.data-table--companies { display: block; min-width: 0; width: 100%; table-layout: auto; border-spacing: 0; }
  table.data-table--companies colgroup,
  table.data-table--companies thead { display: none; }
  table.data-table--companies tbody { display: block; }
  table.data-table--companies tbody tr.company-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 0 0 6px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
  }
  table.data-table--companies tbody tr.company-row:hover { transform: none; }
  table.data-table--companies tbody tr.company-row td {
    display: block;
    border: none;
    border-radius: 0;
    padding: 0;
    max-width: none;
    overflow: visible;
    white-space: nowrap;
    font-size: 12.5px;
  }
  /* 1段目：選択・No・企業名（全文。長い名前は折り返す） */
  table.data-table--companies tbody tr.company-row td.cell-select { flex: 0 0 auto; line-height: 1; }
  table.data-table--companies tbody tr.company-row td.cell-no { flex: 0 0 auto; }
  table.data-table--companies tbody tr.company-row td.cell-name { flex: 1 1 calc(100% - 110px); min-width: 0; white-space: normal; }
  table.data-table--companies button.company-link {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    line-height: 1.45;
    font-size: 14px;
  }
  /* 2段目：人数・決算・年調・〆払・計算・納品（小見出し付き） */
  table.data-table--companies tbody tr.company-row td[data-label] { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-900); }
  table.data-table--companies tbody tr.company-row td[data-label]::before {
    content: attr(data-label);
    font-size: 10.5px;
    color: var(--ink-500);
  }
  table.data-table--companies tbody tr.company-row td.cell-count { margin-left: 25px; }
  table.data-table--companies tbody tr.company-row td.cell-progress:first-of-type,
  table.data-table--companies tbody tr.company-row td.cell-progress { line-height: 1; }
  table.data-table--companies tbody tr.empty-row { display: block; }
  table.data-table--companies tbody tr.empty-row td { display: block; white-space: normal; border-radius: 10px; border: 1px solid var(--line); }
}

/* ---- 2026-10-23 社長指示：企業リストの並び替え・スマホの枠の開閉・「新規企業を登録」の余白 ----
   1) 並び順の切り替え（企業No／支給日）：見出しの下・表の上に2つのボタン型で置く（PC・スマホ共通。views/index.ejs）。
   2) スマホ幅（600px以下）：各企業の枠は普段1段目（選択・No・企業名）だけ。枠をタップすると is-open が付き、
      人数・決算・年調・〆払・計算・納品が開く。右端の ▼／▲ が開閉の印。PC幅は今までどおり全部表示（印も出さない）。
   3) スマホ幅：「新規企業を登録」ボタンと、その下（並び順・企業の枠）の間に余白を設ける。PCの見た目は変えない。 */
.list-sort-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; font-size: 12.5px; }
.list-sort-label { color: var(--ink-500); }
.list-sort-btn {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-900);
  text-decoration: none;
  line-height: 1.5;
}
.list-sort-btn:hover { border-color: var(--navy-700); }
.list-sort-btn.is-active { background: var(--navy-800); border-color: var(--navy-800); color: #fff; font-weight: 700; }
table.data-table--companies td.cell-toggle { display: none; }
@media (max-width: 600px) {
  .main--company-list .edit-page-header { margin-bottom: 14px; row-gap: 12px; }
  .main--company-list .list-sort-bar { margin: 0 0 10px; }
  table.data-table--companies tbody tr.company-row { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  table.data-table--companies tbody tr.company-row td[data-label] { display: none; }
  table.data-table--companies tbody tr.company-row.is-open td[data-label] { display: inline-flex; }
  table.data-table--companies tbody tr.company-row td.cell-name { flex-basis: calc(100% - 130px); }
  table.data-table--companies tbody tr.company-row td.cell-toggle {
    display: block;
    flex: 0 0 auto;
    margin: -8px -6px -8px auto;
    padding: 8px 6px 8px 14px;
    color: var(--ink-500);
    font-size: 11px;
    line-height: 1;
  }
  /* 企業名ボタンは文字の幅だけにする（幅いっぱいだと、枠のほとんどが企業名のボタンになり、開閉のタップができる所が無くなるため） */
  table.data-table--companies tbody tr.company-row button.company-link { display: inline-block; width: auto; max-width: 100%; }
  table.data-table--companies .company-row-toggle::before { content: "\25BC"; }
  table.data-table--companies tr.company-row.is-open .company-row-toggle::before { content: "\25B2"; }
}