/* SHO-HAN module-theme.css (2026-06-07)
   モジュールテーマカラー。body.mt-on の時だけ作用＝未設定ページは完全無影響。
   色は module-theme.js が算出した CSS変数(--mt-*)を消費。PC/タブレット/スマホ共通。 */

/* 余白を持たせた適用: コンテンツ周囲(.sh-content)は淡いページ地色、
   モジュール本体(.container)だけをテーマ色の角丸パネルにする(ベタ塗り回避=少し余白)。
   app-nav の .sh-content は padding(24/28px) を持つので、その分が余白になる。
   アプリバー/サイドナビは従来(ネイビー)のまま。 */
body.mt-on { background: var(--mt-page) !important; }
body.mt-on .sh-layout,
body.mt-on .sh-main-col,
body.mt-on .sh-content { background: var(--mt-page) !important; }
body.mt-on .container {
  color: var(--mt-text);
  background: var(--mt-bg);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: var(--mt-box-shadow);
}
body.mt-on .container a:not(.btn) { color: var(--mt-text); text-decoration: underline; }
@media (max-width: 767px) {
  body.mt-on .container { padding: 14px 14px; border-radius: 14px; }
}

/* 見出し/サマリ等のテキスト */
body.mt-on .tabbar { border-bottom-color: var(--mt-divider); }
body.mt-on .tabbar button { color: var(--mt-text-muted); }
body.mt-on .tabbar button.active { color: var(--mt-text); border-bottom-color: var(--mt-text); }
/* koutei等の .tabs/.tab(パネル上で読めるように) */
body.mt-on .tabs { border-bottom-color: var(--mt-divider); }
body.mt-on .tabs .tab { color: var(--mt-text-muted); }
body.mt-on .tabs .tab.active { color: var(--mt-text); border-bottom-color: var(--mt-text); }
/* 一覧テーブル(.table-wrap/.tbl)は既存ルールでボックス色に連動。行ホバーも */
body.mt-on .job-list-table tbody tr:hover td { background: var(--mt-chip-bg); }
/* 一覧設定の選択カード */
body.mt-on .lcset-row { background: var(--mt-box-bg); color: var(--mt-box-text); border-color: var(--mt-box-border); }

/* サマリーカード/一覧カードはボックス色に(テーマ背景の上で読みやすく) */
body.mt-on .summ,
body.mt-on .k-item,
body.mt-on .rep-day,
body.mt-on .cinfo-card {
  background: var(--mt-box-bg); color: var(--mt-box-text);
  border: 1px solid var(--mt-box-border); box-shadow: var(--mt-box-shadow);
}
body.mt-on .summ .lbl, body.mt-on .summ .sub { color: var(--mt-box-text); opacity: .72; }
body.mt-on .summ .val { color: var(--mt-accent-text, var(--mt-accent)); }

/* 一覧テーブルはボックス化 */
body.mt-on .table-wrap { box-shadow: var(--mt-box-shadow); border: 1px solid var(--mt-box-border); }
body.mt-on table.tbl { background: var(--mt-box-bg); color: var(--mt-box-text); }
body.mt-on table.tbl th { background: var(--mt-chip-bg); color: var(--mt-box-text); }
body.mt-on table.tbl td { border-bottom-color: var(--mt-box-border); }
body.mt-on table.tbl tbody tr:hover td { background: var(--mt-chip-bg); }
body.mt-on table.tbl td .muted { color: var(--mt-box-text); opacity: .6; }

/* 検索/フィルタ等ツールバー入力 */
body.mt-on .search input,
body.mt-on .sel,
body.mt-on .searchbar input {
  background: var(--mt-input-bg); color: var(--mt-input-text); border-color: var(--mt-input-border);
}

/* ============================================================
   レコードページ(編集/詳細) — 全モジュール共通
   wrapper: .record-page-c(mitsumori/knowledge/customers) / .record-page(koutei)
   ============================================================ */
/* パネル自体はテーマ背景に溶け込ませ、中身(入力/ボックス)で見せる */
body.mt-on .record-page-c,
body.mt-on .record-page {
  background: transparent; color: var(--mt-text);
  border: 1px solid var(--mt-divider); box-shadow: none;
}
body.mt-on .record-page-c .rp-head,
body.mt-on .record-page-c .rp-foot,
body.mt-on .record-page .record-page-header { border-color: var(--mt-divider); }
body.mt-on .record-page-c .rp-title,
body.mt-on .record-page .record-page-header h2 { color: var(--mt-text); }
body.mt-on .record-page-c label,
body.mt-on .record-page-c .field > label,
body.mt-on .record-page-c .field.sm label,
body.mt-on .record-page .field > label,
body.mt-on .record-page label,
body.mt-on .fk-rec-field > label,
body.mt-on .fk-rec-field .fk-rec-label { color: var(--mt-text-muted); }

/* --- 編集画面: 入力欄=テーマの少し薄い色(目につきやすい) --- */
body.mt-on .record-page-c .input,
body.mt-on .record-page-c input,
body.mt-on .record-page-c select,
body.mt-on .record-page-c textarea,
body.mt-on .record-page-c .items-tbl input,
body.mt-on .record-page input,
body.mt-on .record-page select,
body.mt-on .record-page textarea,
body.mt-on .record-form-grid input,
body.mt-on .record-form-grid select,
body.mt-on .record-form-grid textarea,
body.mt-on .fk-rec-grid .fk-input,
body.mt-on .fk-rec-grid input,
body.mt-on .fk-rec-grid select,
body.mt-on .fk-rec-grid textarea,
body.mt-on .fk-rec-field input,
body.mt-on .fk-rec-field select,
body.mt-on .fk-rec-field textarea {
  background: var(--mt-input-bg) !important; color: var(--mt-input-text) !important;
  border-color: var(--mt-input-border) !important;
}
/* チェックボックス/ラジオ/色/ファイルは塗りつぶさない(視認性のため既定維持) */
body.mt-on input[type=checkbox],
body.mt-on input[type=radio],
body.mt-on input[type=color],
body.mt-on input[type=file] { background: initial !important; }
body.mt-on .record-page-c input:focus,
body.mt-on .record-page-c select:focus,
body.mt-on .record-page-c textarea:focus,
body.mt-on .record-page input:focus,
body.mt-on .record-page select:focus,
body.mt-on .record-page textarea:focus,
body.mt-on .fk-rec-grid input:focus,
body.mt-on .fk-rec-grid textarea:focus,
body.mt-on .fk-rec-grid select:focus {
  border-color: var(--mt-input-focus) !important;
  box-shadow: 0 0 0 3px var(--mt-divider) !important; outline: none;
}
body.mt-on .fk-rec-section { color: var(--mt-text); border-bottom-color: var(--mt-divider); }
body.mt-on .fk-rec-divider { border-color: var(--mt-divider); }
body.mt-on .items-tbl th { background: var(--mt-chip-bg); color: var(--mt-box-text); }
body.mt-on .items-tbl td { border-bottom-color: var(--mt-divider); }
body.mt-on .totbox .row { color: var(--mt-text); }
body.mt-on .totbox .row.grand { color: var(--mt-text); border-top-color: var(--mt-text); }
body.mt-on .ref-hint, body.mt-on .radio-row label { color: var(--mt-text-muted); }

/* --- 詳細画面: 各項目をボックスで囲み、背景より見やすい色味 --- */
/* mt-field = ラベル+値の1項目ボックス(テーマ時) */
body.mt-on .mt-field {
  background: var(--mt-box-bg); color: var(--mt-box-text);
  border: 1px solid var(--mt-box-border); border-radius: 12px;
  box-shadow: var(--mt-box-shadow); padding: 10px 14px; margin-bottom: 10px;
}
body.mt-on .mt-field .mt-k { color: var(--mt-box-text); opacity: .66; font-size: 12px; font-weight: 600; display: block; margin-bottom: 3px; }
body.mt-on .mt-field .mt-v { color: var(--mt-box-text); font-size: 14.5px; white-space: pre-wrap; }
/* dl ベースの詳細(既存)も箱に近づける */
body.mt-on .record-page-c .dl { display: block; }
body.mt-on .record-page-c .dl dt {
  color: var(--mt-box-text); opacity: .66; font-size: 12px; font-weight: 600;
  background: var(--mt-box-bg); border: 1px solid var(--mt-box-border); border-bottom: 0;
  border-radius: 12px 12px 0 0; padding: 9px 14px 4px; margin-top: 10px;
}
body.mt-on .record-page-c .dl dd {
  color: var(--mt-box-text); margin: 0;
  background: var(--mt-box-bg); border: 1px solid var(--mt-box-border); border-top: 0;
  border-radius: 0 0 12px 12px; padding: 0 14px 10px; box-shadow: var(--mt-box-shadow);
}
/* 詳細の明細テーブル/合計はボックス色 */
body.mt-on .record-page-c .table-wrap table.tbl { background: var(--mt-box-bg); }
/* 詳細の view-content(日報/共有) もボックスに */
body.mt-on .record-page-c .view-content,
body.mt-on .record-page-c .view-meta {
  background: var(--mt-box-bg); color: var(--mt-box-text);
  border: 1px solid var(--mt-box-border); border-radius: 12px; box-shadow: var(--mt-box-shadow);
  padding: 12px 14px; margin-bottom: 10px;
}

/* custom 詳細(.rp-detail > .rp-d-row) / koutei 詳細(.detail-field) を項目ボックス化 */
body.mt-on .rp-detail .rp-d-row:not(.layout),
body.mt-on .record-page.detail-page .detail-field {
  background: var(--mt-box-bg); color: var(--mt-box-text);
  border: 1px solid var(--mt-box-border); border-radius: 12px;
  box-shadow: var(--mt-box-shadow); padding: 10px 14px;
}
body.mt-on .rp-detail .rp-d-label,
body.mt-on .record-page.detail-page .detail-field .dfl-label { color: var(--mt-box-text); opacity: .66; }
body.mt-on .rp-detail .rp-d-val,
body.mt-on .record-page.detail-page .detail-field .dfl-value,
body.mt-on .fk-det-value { color: var(--mt-box-text); }
body.mt-on .record-page.detail-page .detail-field .dfl-section { color: var(--mt-text); }

/* ゴーストボタンをテーマに馴染ませる */
body.mt-on .btn.btn-ghost {
  background: var(--mt-box-bg); color: var(--mt-box-text); border-color: var(--mt-box-border);
}

/* 下書きバナーはそのまま(警告色)。空状態テキスト */
body.mt-on .empty { color: var(--mt-text-muted); }

/* ============================================================
   端末別の微調整(崩れ防止)
   ============================================================ */
@media (max-width: 767px) {
  /* スマホ: dl 箱の左ラベル幅をやめてフル幅(module-theme で block 化済) */
  body.mt-on .record-page-c .dl { grid-template-columns: 1fr; }
  body.mt-on .mt-field { padding: 9px 12px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  body.mt-on .mt-field { padding: 10px 13px; }
}

/* ============================================================
   設定ページのカラーピッカー
   ============================================================ */
.mt-theme-card { background:#fff; border:1px solid #e3e7ef; border-radius:16px; padding:18px; margin:0 0 18px; box-shadow:0 1px 2px rgba(15,36,81,.06); }
.mt-theme-card h3 { margin:0 0 4px; font-size:16px; color:#0F2451; display:flex; align-items:center; gap:10px; }
.mt-theme-card h3 .badge { background:#0F2451; color:#fff; font-size:11px; font-weight:700; border-radius:999px; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; }
.mt-theme-card .hint { margin:0 0 14px; color:#5b6577; font-size:12.5px; }
.mt-sw-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(64px,1fr)); gap:10px; }
.mt-sw { position:relative; height:46px; border-radius:12px; border:2px solid rgba(15,36,81,.12); cursor:pointer; padding:0; transition:transform .1s, box-shadow .12s; }
.mt-sw:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(15,36,81,.18); }
.mt-sw.sel { border-color:#0F2451; box-shadow:0 0 0 3px rgba(15,36,81,.18); }
.mt-sw-ck { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; font-weight:800; text-shadow:0 1px 3px rgba(0,0,0,.5); }
.mt-picker-custom { margin-top:14px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.mt-picker-custom-lbl { font-size:13.5px; color:#0f1730; font-weight:600; display:inline-flex; align-items:center; gap:8px; }
.mt-picker-custom input[type=color] { width:46px; height:34px; border:1px solid #e3e7ef; border-radius:8px; background:#fff; cursor:pointer; }
.mt-picker-hint { font-size:12px; color:#5b6577; flex:1 1 240px; min-width:0; }
.mt-theme-foot { display:flex; justify-content:flex-end; gap:10px; margin-top:14px; align-items:center; }
.mt-theme-status { font-size:12px; color:#5b6577; }
.mt-theme-preview { margin-top:14px; border-radius:12px; overflow:hidden; border:1px solid #e3e7ef; }
.mt-theme-preview .pv-bg { padding:14px; }
.mt-theme-preview .pv-in { border-radius:10px; padding:9px 12px; font-size:13px; margin-bottom:8px; }
.mt-theme-preview .pv-box { border-radius:10px; padding:9px 12px; font-size:13px; }
@media (max-width: 767px) {
  .mt-sw-grid { grid-template-columns:repeat(auto-fill, minmax(52px,1fr)); gap:8px; }
  .mt-sw { height:40px; }
}

/* ============================================================
   アクセントのみ適用パッチ (2026-06-10 Wave1-#5)
   ------------------------------------------------------------
   不具合: 濃いカスタム色にすると背景(地色)・カード面まで色が変わる。
   方針(設計どおり): 地色/面/テキストは常にトークン既定(白基調)に固定し、
   テーマ色は **--mt-accent(タブ下線/数値/ラベル等)だけ** に出す。
   実装: module-theme.js は <html> に --mt-* を inline 設定するが、ここで
   <body> により近いスコープで中立トークンに上書きする(=確実に勝つ)。
   --mt-accent は JS算出値を維持するため上書きしない。
   ロールバック: 本ブロックを削除するだけ。
   ============================================================ */
body.mt-on {
  --mt-page:        var(--sh-bg, #FAFAF7);
  --mt-bg:          var(--sh-surface, #ffffff);
  --mt-box-bg:      var(--sh-surface, #ffffff);
  --mt-input-bg:    var(--sh-surface, #ffffff);
  --mt-chip-bg:     var(--sh-panel, #F2F4F8);
  --mt-text:        var(--sh-ink, #0B1426);
  --mt-text-muted:  var(--sh-ink-3, #6B7587);
  --mt-box-text:    var(--sh-ink, #0B1426);
  --mt-input-text:  var(--sh-ink, #0B1426);
  --mt-box-border:  var(--sh-line, #E5E8EE);
  --mt-input-border:var(--sh-line-strong, #CBD0DA);
  --mt-divider:     var(--sh-line, #E5E8EE);
  --mt-box-shadow:  var(--sh-shadow-card, 0 1px 3px rgba(11,20,38,.06));
  --mt-input-focus: var(--mt-accent);
}
/* タブのアクティブ: 下線=選択色そのまま(WYSIWYG)・文字=白地で読める同系色(--mt-accent-text) */
body.mt-on .tabs .tab.active,
body.mt-on .tabbar button.active { color: var(--mt-accent-text, var(--mt-accent)) !important; border-bottom-color: var(--mt-accent) !important; }

/* ============================================================
   テーマ全画面一貫パッチ (2026-06-10 回帰修正第2弾)
   ------------------------------------------------------------
   不具合: accent-only化(上の中立化)後、テーマ色の可視箇所がタブ下線
   程度しか残らず「テーマカラーが効いていない」ように見える。
   修正: テーマ設定時(mt-on)は **モジュール色トークン(--m/--mod/--accent系)
   をテーマアクセントへマッピング** する。これによりボタン/タブ/チップ/
   アプリバー/打刻パネル等、モジュール色を使う全UIがテーマ色で発色し、
   全モジュール・全タブで一貫して「テーマが効く」。
   地色/面/テキストは上の中立化どおり白基調固定(Wave1#5維持=暗転しない)。
   テーマ未設定(mt-onなし)のモジュールは完全無変化。
   ロールバック: 本ブロックを削除するだけ。
   ============================================================ */
body.mt-on {
  --m:   var(--mt-accent) !important;
  /* WYSIWYG: 濃側バリアントの黒混合は最小限(ホバー差等の知覚に必要な8%のみ・濃色化しない) */
  --m-d: color-mix(in srgb, var(--mt-accent) 92%, #000) !important;
  /* 淡領域(ホバー/選択面/チップ地)は基色由来ティント --mt-tint(役割分担)。
     旧JSキャッシュ等で --mt-tint 未配布の場合は accent 12%ティントにフォールバック。 */
  --m-l: var(--mt-tint, color-mix(in srgb, var(--mt-accent) 12%, #fff)) !important;
  --mod:   var(--mt-accent) !important;
  --mod-d: color-mix(in srgb, var(--mt-accent) 92%, #000) !important;
  --mod-l: var(--mt-tint, color-mix(in srgb, var(--mt-accent) 12%, #fff)) !important;
  --accent: var(--mt-accent) !important;
  --accent-50: var(--mt-tint, color-mix(in srgb, var(--mt-accent) 12%, #fff)) !important;
  --navy-50: var(--mt-tint, color-mix(in srgb, var(--mt-accent) 12%, #fff)) !important;
}
/* 主要ボタンもテーマ色で塗る(WYSIWYG=選んだ色そのまま):
   assets/shohan-bridge.css が .btn{background:var(--sh-navy)} で紺固定(--m非参照)のため、
   トークンマッピングだけではボタンに出ない。ghost系・インラインで背景指定済みのボタンは除外
   (削除ボタンの赤等を壊さない)。文字色は --mt-accent-fg で自動出し分け
   (明るい/淡いaccent→ダークテキスト・暗いaccent→白=可読性は前景で担保)。 */
body.mt-on .btn:not(.btn-ghost):not([style*="background"]) {
  background: var(--mt-accent) !important;
  color: var(--mt-accent-fg, #fff) !important;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--mt-accent) 28%, transparent);
}
body.mt-on .btn:not(.btn-ghost):not([style*="background"]):hover {
  background: color-mix(in srgb, var(--mt-accent) 92%, #000) !important;
}