/* 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); }

/* 一覧テーブルはボックス化 */
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; }
}