/*


 */

:root {
  --color-bg: #f7f7f5;
  --color-surface: #ffffff;
  --color-border: #e0ded9;
  --color-text: #2b2926;
  --color-muted: #75716a;
  --color-primary: #4f5f8c;
  --color-primary-dark: #3a4870;
  --color-accent: #a06a3c;
  --color-danger: #b3453d;
  --color-warning: #b98a2e;
  --radius: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
}

a { color: var(--color-primary-dark); }

.app-shell {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

.sidebar {
  flex: 0 0 220px;
  width: 220px;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
}
/* 左のメニューの開閉(2026-09)。ノートパソコンで画面を横に広く使えるように。
   閉じると細い帯だけ残し、左上のボタンで開き直す。スマホ幅(860px以下)ではメニューが上に並ぶので使わない */
.sidebar__toggle {
  position: fixed;
  top: 14px;
  left: 206px;
  z-index: 50;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-primary);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.sidebar__toggle:hover { background: #eef0ec; }
@media (min-width: 861px) {
  .app-shell--collapsed .sidebar { flex-basis: 18px; width: 18px; padding: 0; cursor: pointer; }
  .app-shell--collapsed .sidebar > * { display: none; }
  .app-shell--collapsed .sidebar__toggle { left: 4px; }
}
@media (max-width: 860px) {
  .sidebar__toggle { display: none; }
}
@media print {
  .sidebar__toggle { display: none; }
}

.sidebar__title {
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.4;
  text-decoration: none;
  display: block;
  margin-bottom: 24px;
}
.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.sidebar__nav a {
  color: #fff;
  text-decoration: none;
  opacity: 0.85;
  padding: 9px 10px;
  border-radius: var(--radius);
  font-size: 0.92rem;
}
.sidebar__nav a:hover { opacity: 1; background: rgba(255,255,255,0.14); }
/* サイドバーのまとまり(顧客管理・請求管理・管理者メニュー)とピクトグラム(2026-09-25) */
.sidebar__icon { width: 20px; height: 20px; flex: 0 0 20px; }
.sidebar__top-link, .sidebar__group summary {
  color: #fff;
  opacity: 0.9;
  padding: 9px 10px;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.sidebar__nav a.sidebar__top-link { font-weight: 600; font-size: 0.95rem; display: flex; }
.sidebar__group { margin-top: 2px; }
.sidebar__group summary::-webkit-details-marker { display: none; }
.sidebar__group-label { flex: 1; }
.sidebar__group summary::after {
  content: "▸";
  font-size: 0.75rem;
  opacity: 0.8;
  transition: transform 0.15s;
}
.sidebar__group[open] summary::after { transform: rotate(90deg); }
.sidebar__group summary:hover, .sidebar__top-link:hover { opacity: 1; background: rgba(255,255,255,0.14); }
.sidebar__group-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: 22px;
  margin: 2px 0 6px;
}
.sidebar__group-body a { padding: 6px 10px; font-size: 0.9rem; }
/* 文字の大きさの切り替え(2026-09)。ノートパソコンで字が小さいという声に備え、利用者が選べる */
html.font-large { font-size: 112.5%; }
html.font-xlarge { font-size: 125%; }
/* サイドバーの幅は決まっているので、左上のシステム名は大きくせず1行に収める */
html.font-large .sidebar__title, html.font-xlarge .sidebar__title { font-size: 17.6px; }
.font-scale { margin-bottom: 10px; }
.font-scale__options { display: flex; gap: 6px; justify-content: center; }
/* 標・大・特の1文字。枠も文字も同じ大きさ(2026-09-25)。3つ分の幅(40×3+6×2=132px)に下のボタンの幅を合わせる */
.font-scale__option {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 34px; padding: 0; box-sizing: border-box;
  border: 1px solid rgba(255,255,255,0.45); background: transparent; color: #fff;
  border-radius: 6px; cursor: pointer; line-height: 1;
  font-size: 14px; font-weight: 400;
}
.font-scale__option.is-active { background: #fff; color: var(--color-primary); }

.sidebar__footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.22);
  text-align: center;
}
.sidebar__footer form { display: flex; justify-content: center; margin-top: 6px; }
.sidebar__user {
  color: #fff;
  opacity: 0.85;
  font-size: 0.85rem;
  margin-bottom: 8px;
}
.sidebar__logout-btn {
  width: 132px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.5);
  color: #fff;
  border-radius: var(--radius);
  padding: 6px 12px;
  font-size: 0.85rem;
  cursor: pointer;
}
.sidebar__logout-btn:hover { background: rgba(255,255,255,0.15); }

.site-header-plain {
  background: var(--color-primary);
  color: #fff;
  padding: 14px 20px;
}
.site-header-plain__title {
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
}

.page {
  flex: 1;
  min-width: 0;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}
/* .app-shell(サイドバー)内では、横方向のauto marginがflexアイテムの
   クロス軸サイズ計算に干渉し、中の表などの内容量に応じて.page自体が
   ビューポート幅を超えて広がってしまう(特にモバイル幅でapp-shellが
   縦並びになったとき顕著)。サイドバーレイアウトでは中央寄せは不要なため、
   marginを外して明示的に幅いっぱいに広げる。 */
.app-shell .page {
  margin: 0;
  width: 100%;
  /* ノートパソコン(15.6インチ・横1366〜1536px程度)で右側に余白が余らないよう、
     サイドバーのある画面は1100pxより広く使う(2026-09) */
  max-width: 1400px;
}

@media (max-width: 860px) {
  .app-shell { flex-direction: column; }
  .sidebar {
    width: auto;
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 12px 16px;
  }
  .sidebar__title {
    flex: 1 0 100%;
    margin-bottom: 10px;
  }
  .sidebar__nav {
    flex: 1 1 auto;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
  }
  .sidebar__nav a { white-space: nowrap; }
  .sidebar__footer {
    flex: 0 0 auto;
    margin-top: 0;
    margin-left: 10px;
    padding-top: 0;
    border-top: none;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .sidebar__user { margin-bottom: 0; white-space: nowrap; }
  .sidebar__logout-btn { width: auto; white-space: nowrap; }
  .sidebar__footer { text-align: left; }
  .sidebar__footer form { margin-top: 0; }
  /* スマホ幅の調整(2026-09-25)。管理者メニューが縦に潰れる・下段(文字の大きさ〜ログアウト)が右にはみ出す、を直す */
  .sidebar__group { flex: 0 0 auto; margin-top: 0; display: flex; align-items: center; }
  .sidebar__group summary { white-space: nowrap; }
  .sidebar__group summary::after { display: none; }
  .sidebar__group-body { flex-direction: row; flex-wrap: nowrap; padding-left: 0; margin: 0; }
  .sidebar__top-link { white-space: nowrap; }
  .sidebar__footer { flex: 1 0 100%; flex-wrap: wrap; margin-left: 0; margin-top: 8px; }
  .font-scale { margin-bottom: 0; }
  .font-scale__option { white-space: nowrap; flex: 0 0 auto; }
}

.flash {
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-size: 0.95rem;
}
.flash--notice { background: #e7eaf5; color: var(--color-primary-dark); }
.flash--alert { background: #fbeceb; color: var(--color-danger); }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}

.page-title {
  font-size: 1.4rem;
  margin: 0 0 16px;
}

.section-title {
  font-size: 1.05rem;
  margin: 0 0 12px;
  color: var(--color-primary-dark);
}

.btn {
  display: inline-block;
  padding: 9px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  color: #fff;
  white-space: nowrap;
  text-decoration: none;
  font-size: 0.95rem;
  cursor: pointer;
}
.btn:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.btn--secondary {
  background: transparent;
  color: var(--color-primary-dark);
}
.btn--secondary:hover { background: #eef0ec; }
.btn--danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
}
.btn--danger-outline { background: transparent; color: var(--color-danger); border-color: var(--color-danger); }
.btn--danger-outline:hover { background: #fbeceb; }
.btn--sm { padding: 5px 10px; font-size: 0.82rem; }
.btn:disabled, .btn:disabled:hover {
  opacity: 0.4; cursor: not-allowed; background: transparent; color: var(--color-muted); border-color: var(--color-border);
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 20px;
}
[hidden] { display: none !important; }

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}
.field label { font-size: 0.85rem; color: var(--color-muted); }
/* 入力欄の見た目は種類を問わず揃える。type別に指定しているため、
   新しい種類の入力欄を使うときはここに追加すること
   (色見本のcolorとファイル選択のfileは、専用の見た目のままにする)。 */
.field input[type=text],
.field input[type=tel],
.field input[type=date],
.field input[type=datetime-local],
.field input[type=number],
.field input[type=email],
.field input[type=password],
.field select,
.field textarea {
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.95rem;
  min-width: 220px;
  /* 日時やプルダウンはブラウザが独自に余白を足すため、高さを明示して揃える */
  height: 38px;
}
.field textarea { min-height: 80px; height: auto; }

/* auto-fitではなくauto-fillを使う。auto-fitは項目が少ないと空いた列が潰れて
   残りの入力欄が引き伸ばされるため、施行ステータスによって欄の幅が変わってしまう。
   auto-fillなら空き列がそのまま残り、項目数に関係なく幅が揃う(右側は空白になる)。 */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0 20px;
}
/* 件名のように長い文字列を入れる項目は2列分の幅を使う */
.field--wide { grid-column: span 2; }

/* 件名の入力欄と「他候補」を横に並べる */
.title-input-row { display: flex; gap: 8px; align-items: center; }
.title-input-row input[type=text],
.title-input-row textarea { flex: 1 1 auto; min-width: 0; }
.title-input-row--note { align-items: flex-start; }
.title-input-row--note textarea { min-height: 80px; }
.title-input-row .title-picker {
  flex: 0 0 120px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  height: 38px;
}

.required-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--color-danger);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  vertical-align: middle;
}

.register-menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.register-menu__card {
  display: block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
  color: var(--color-text);
  text-decoration: none;
  transition: border-color 0.15s;
}
.register-menu__card:hover { border-color: var(--color-accent); }
.register-menu__card strong { display: block; margin-bottom: 6px; font-size: 1.05rem; }
.register-menu__card p { margin: 0; }

/* チェックボックスは初期状態だと小さくて押しにくいため、大きめにする */
input[type=checkbox] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: normal;
  font-size: 0.9rem;
}

/* 列数の多い表は狭い画面(スマホ等)で収まりきらないことがあるため、
   .table-wrapで囲んでおくと、その部分だけ横スクロールできるようになる
   (ページ全体が横に広がってしまうのを防ぐ)。 */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table {
  width: 100%;
  min-width: max-content;
  border-collapse: collapse;
  background: var(--color-surface);
}
.table th, .table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  font-size: 0.92rem;
}
.table th { background: #f0efec; color: var(--color-muted); font-weight: 600; }
.table tr:hover td { background: #fafaf8; }

.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge--pre_consultation { background: #e6edf7; color: #2a5090; }
.badge--funeral_customer { background: #efe6e2; color: var(--color-accent); }
.badge--retail_customer { background: #f2ecd8; color: #8a6d1f; }
.badge--member { background: #e4f2e8; color: #2f7a4a; }
.badge--deceased { background: #e9e9e9; color: #555; }
.badge--draft { background: #e9e9e9; color: #555; }
.badge--issued { background: #e4f2e8; color: #2f7a4a; }
.badge--set { background: #efe6e2; color: var(--color-accent); }
.badge--unpaid { background: #fbeceb; color: var(--color-danger); }
.badge--partially_paid { background: #f2ecd8; color: #8a6d1f; }
.badge--paid { background: #e4f2e8; color: #2f7a4a; }
.badge--estimate_target { background: #e6edf7; color: #2a5090; }
.badge--deceased_target { background: #efe6e2; color: var(--color-accent); }
.badge--new_consultation { background: #e6edf7; color: #2a5090; }
.badge--considering { background: #f2ecd8; color: #8a6d1f; }
.badge--contracted { background: #e4f2e8; color: #2f7a4a; }
.badge--following_up { background: #efe6e2; color: var(--color-accent); }
.badge--completed { background: #e9e9e9; color: #555; }
.badge--retail_target { background: #f2ecd8; color: #8a6d1f; }

.line-item-block {
  border-top: 1px dashed var(--color-border);
  padding-top: 16px;
  margin-top: 16px;
}
.line-item-block:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }

.duplicate-list { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.duplicate-item {
  border: 1px solid var(--color-border);
  border-left-width: 5px;
  border-radius: var(--radius);
  padding: 12px 14px;
  background: var(--color-surface);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.duplicate-item--strong { border-left-color: var(--color-danger); }
.duplicate-item--medium { border-left-color: var(--color-warning); }
.duplicate-item--weak { border-left-color: var(--color-border); }

.level-tag { font-size: 0.78rem; font-weight: 700; }
.level-tag--strong { color: var(--color-danger); }
.level-tag--medium { color: var(--color-warning); }
.level-tag--weak { color: var(--color-muted); }

.actions-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.master-edit-row__color { display: flex; align-items: center; gap: 6px; min-width: 0; }
.master-edit-row__color label,
.master-edit-row__toggle { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.master-edit-row__toggle input[type=checkbox] { width: 15px; height: 15px; }
.master-edit-row__color input[type=checkbox] { width: 15px; height: 15px; }
.master-edit-row__color input[type=color] { flex: 0 0 44px; }

/* 選択肢マスタ・寺院名の一覧。1行は「編集フォーム(保存まで)」と「操作ボタン(並び替え・削除)」の
   2つに分かれている。削除ボタンをフォームの中に置くと<form>の入れ子になり、ブラウザが
   内側のフォームを無視して削除が効かなくなるため、必ず兄弟要素として並べること。
   同じ理由で、<tr>の中にフォームを置く形(表組み)も使えない。 */
.master-edit-list { display: flex; flex-direction: column; gap: 4px; }
.master-edit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 6px 10px;
  border-bottom: 1px solid var(--color-border);
}
.master-edit-row__form {
  display: grid;
  gap: 8px;
  align-items: center;
}
.master-edit-row__actions { display: flex; gap: 6px; align-items: center; }
.master-edit-row--header {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-muted);
  border-bottom: 2px solid var(--color-border);
}
.master-edit-row__form input[type=text],
.master-edit-row__form select {
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.9rem;
}
.master-edit-row__form input[type=color] { width: 100%; min-width: 44px; height: 32px; }

/* 一覧テーブルの操作列(編集・削除など)を横並びでコンパクトに表示する。
   button_toが生成する<form>は既定でdisplay:blockのため、並べないと
   ボタンごとに改行されてしまう。 */
.table-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.attachment-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.attachment-list__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

/* 商品マスタ〜ログイン履歴など、設定・管理系の一覧画面をコンパクトに
   表示するためのスコープ付きクラス(他画面の.table/.cardには影響しない)。 */
.compact-list.card { padding: 14px 16px; }
.compact-list .page-title { font-size: 1.2rem; margin-bottom: 10px; }
.compact-list .hint { font-size: 0.8rem; }
.compact-list .table th, .compact-list .table td { padding: 5px 10px; font-size: 0.85rem; }
.compact-list .search-form { margin-bottom: 12px; gap: 8px; }
.compact-list .field { margin-bottom: 8px; }
.compact-list .form-grid { row-gap: 4px; }

.hint { color: var(--color-muted); font-size: 0.85rem; }
/* マウスを乗せると説明が出る「?」(ApplicationHelper#help_tip) */
.help-tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 6px; border-radius: 50%;
  border: 1px solid #b8b5ae; color: var(--color-muted); background: var(--color-surface);
  font-size: 0.7rem; font-weight: 700; line-height: 1; cursor: help; vertical-align: middle; user-select: none;
}
.help-tip:hover, .help-tip:focus { border-color: var(--color-primary); color: var(--color-primary); outline: none; }
@media print { .help-tip { display: none; } }

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.dashboard-stat {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.dashboard-stat__label { font-size: 0.85rem; color: var(--color-muted); margin-bottom: 6px; }
.dashboard-stat__value { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.bar-chart { display: flex; flex-direction: column; gap: 10px; }
.bar-chart__row {
  display: grid;
  grid-template-columns: 96px 1fr 52px;
  align-items: center;
  gap: 10px;
}
.bar-chart__label {
  font-size: 0.85rem;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar-chart__track {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  height: 14px;
  overflow: hidden;
}
.bar-chart__fill {
  background: var(--color-primary);
  height: 100%;
  border-radius: 4px;
  min-width: 4px;
  transition: background 0.15s ease;
}
.bar-chart__row:hover .bar-chart__fill { background: var(--color-primary-dark); }
.bar-chart__value {
  font-size: 0.85rem;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.permission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px 20px;
  margin-bottom: 20px;
}
.permission-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px 28px;
}

/* 施行ステータスの選択欄。対象者ブロックの見出しを兼ねるため、選んだ区分の色で塗る。
   色はbadge--<区分>と揃えている(切り替え時のclass差し替えはcustomer_form_controller.js)。 */
.case-type-header { display: flex; align-items: center; gap: 8px; }
.case-type-header__label { font-size: 0.9rem; color: var(--color-muted); }
.case-type-select {
  /* 対象者ごとに切り替える項目なので、他の入力欄と同じ高さにして押しやすくする */
  padding: 6px 16px;
  height: 38px;
  min-width: 190px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
.case-type-select--estimate_target { background: #e6edf7; color: #2a5090; border-color: #cbdaee; }
.case-type-select--deceased_target { background: #efe6e2; color: var(--color-accent); border-color: #e2d0c6; }
.case-type-select--retail_target { background: #f2ecd8; color: #8a6d1f; border-color: #e5dab6; }

.funeral-case-block {
  border-top: 1px dashed var(--color-border);
  padding-top: 16px;
  margin-top: 16px;
}
.funeral-case-block:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }

/* 対象者(施行)情報: 対象者数が増えても縦に伸びすぎないよう、折りたたみパネルにする */
.funeral-case-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-top: 12px;
  background: var(--color-surface);
}
.funeral-case-panel__summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.98rem;
}
.funeral-case-panel__summary::-webkit-details-marker { display: none; }
.funeral-case-panel__summary::before {
  content: "▶";
  font-size: 0.7rem;
  color: var(--color-muted);
  transition: transform 0.15s ease;
}
.funeral-case-panel[open] > .funeral-case-panel__summary::before {
  transform: rotate(90deg);
}
.funeral-case-panel__body {
  padding: 0 16px 16px;
  border-top: 1px solid var(--color-border);
  padding-top: 16px;
}

.errors {
  background: #fbeceb;
  border: 1px solid #eecac7;
  color: var(--color-danger);
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 16px;
}

/* ---- Estimate items table ---- */
/* 明細の表は箱の中でスクロールせず、ページごとスクロールする(2026-09-25。葬儀の請求書は中央値33行)。
   見出し行は画面上部に貼り付く。横幅が足りないときだけ items-table-wrap--scroll で横スクロール */
.items-table-wrap {
  overflow: visible;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 6px;
}
.items-table-wrap--scroll { overflow-x: auto; }
/* プランの内訳の折りたたみ */
.items-table tr.line-item-row--collapsed { display: none; }
.breakdown-toggle {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 3px 10px; font-size: 0.8rem; font-weight: 700; cursor: pointer;
  border: 1px solid var(--color-primary); border-radius: 999px; background: var(--color-primary); color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}
.breakdown-toggle:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
/* プランの行は薄い色を付けて、内訳のまとまりの見出しだと分かるようにする */
.items-table tr.line-item-row--plan-head td { background: #eef1f8; }
.items-table tr.line-item-row--plan-head td.col-del { background: #eef1f8; }
.items-table tr.line-item-row--plan-head .name-input { font-weight: 700; }
/* 画面の下に貼り付く保存の帯 */
.form-sticky-bar {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 16px -20px -20px; padding: 10px 20px;
  background: var(--color-surface); border-top: 1px solid var(--color-border);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
}
.form-sticky-bar__total { margin-right: auto; font-weight: 700; font-size: 1.0rem; white-space: nowrap; }
.form-sticky-bar__total span { font-variant-numeric: tabular-nums; }
/* ボタンは大きさをそろえて細めに */
.form-sticky-bar .btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 108px; height: 32px; padding: 0 10px; font-size: 0.85rem; line-height: 1.2; white-space: nowrap;
}
.form-sticky-bar__check { display: inline-flex; align-items: center; gap: 4px; font-size: 0.85rem; white-space: nowrap; padding: 0 4px; }
.form-sticky-bar__check input { margin: 0; }
@media print { .form-sticky-bar { display: none; } }
.items-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--color-surface);
  font-size: 0.86rem;
}
.items-table th, .items-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
}
.items-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f0efec;
  color: var(--color-muted);
  font-weight: 600;
  white-space: nowrap;
}
.items-table tbody tr:hover td { background: #fafaf8; }
.items-table input[type=text],
.items-table input[type=number],
.items-table select {
  width: 100%;
  padding: 5px 6px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.86rem;
}
.items-table .col-select { width: 44px; text-align: center; }
.items-table .col-search { min-width: 160px; }
.items-table .col-name { min-width: 170px; }
.items-table .col-qty { width: 70px; }
.items-table .col-unit { width: 70px; }
.items-table .col-price { width: 110px; }
.items-table .col-amount { width: 100px; white-space: nowrap; }
.items-table .col-note { min-width: 120px; }
.items-table .col-hide { width: 56px; text-align: center; }
.items-table .col-tax { width: 90px; }
.items-table .col-del {
  width: 60px;
  position: sticky;
  right: 0;
  z-index: 1;
  background: var(--color-surface);
  box-shadow: -2px 0 4px rgba(0,0,0,0.06);
}
.items-table thead th.col-del {
  z-index: 3;
  background: #f0efec;
}
.items-table tbody tr:hover td.col-del { background: #fafaf8; }
.items-table tr.hidden-price .unit-price-input { background: #f0efec; color: var(--color-muted); }

.name-input { margin-bottom: 4px; }
.tagname-input { font-size: 0.78rem; color: var(--color-muted); }

.row-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
}
.move-row { display: flex; flex-direction: column; gap: 1px; }
.icon-btn {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1;
  padding: 2px 5px;
  color: var(--color-muted);
}
.icon-btn:hover { background: #eef0ec; color: var(--color-text); }
.icon-btn.remove-row { color: var(--color-danger); border-color: #eecac7; }
.icon-btn.remove-row:hover { background: #fbeceb; }
.icon-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.amount-display, .subtotal-amount { white-space: nowrap; font-variant-numeric: tabular-nums; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.table th.num, .table td.num { text-align: right; }

.subtotal-row td { background: #f6f5f1; font-weight: 600; }
.subtotal-row .subtotal-label-input { max-width: 220px; display: inline-block; width: auto; font-weight: 600; }

.line-sub-text {
  font-size: 0.76rem;
  color: var(--color-muted);
  margin-top: 2px;
}

/* ---- Product search combobox ---- */
.product-combobox { position: relative; }
.search-row { display: flex; align-items: center; gap: 4px; }
.search-row .code-search-input { flex: 1; }
.search-icon-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px;
  color: #7fa8cc;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.search-icon-btn:hover { color: #4a7fb5; }
.search-icon-btn svg { width: 17px; height: 17px; }

.product-suggestions {
  position: fixed;
  z-index: 200;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  max-height: 220px;
  overflow-y: auto;
}
.product-suggestion-item {
  padding: 7px 10px;
  font-size: 0.82rem;
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
}
.product-suggestion-item:last-child { border-bottom: none; }
.product-suggestion-item:hover { background: #eef0ec; }
.product-suggestion-empty {
  padding: 10px;
  font-size: 0.82rem;
  color: var(--color-muted);
}

/* ---- Modal ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal-box {
  background: var(--color-surface);
  border-radius: var(--radius);
  width: 640px;
  max-width: 92vw;
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  position: relative;
}
.modal-header h3 { margin: 0 0 10px; font-size: 1.02rem; }
.modal-header input[type=text] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  margin-bottom: 8px;
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  border: none;
  background: transparent;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-muted);
}
.modal-close:hover { color: var(--color-text); }
.modal-category-selects { display: flex; flex-wrap: wrap; gap: 8px; }
.modal-category-selects select {
  flex: 1 1 150px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.85rem;
}
.modal-body {
  padding: 12px 20px 18px;
  overflow-y: auto;
  flex: 1;
}
.modal-product-item {
  padding: 5px 8px;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  line-height: 1.3;
}
.modal-product-item .mp-main { min-width: 0; }
.modal-product-item:hover { background: #eef0ec; }
.modal-product-item:last-child { border-bottom: none; }
.modal-product-item .mp-name { font-weight: 600; }
.modal-product-item .mp-code { color: var(--color-muted); font-size: 0.74rem; }
.modal-product-item .mp-price { white-space: nowrap; font-variant-numeric: tabular-nums; }
.modal-result-count { color: var(--color-muted); font-size: 0.8rem; margin-bottom: 4px; }
.modal-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding-top: 10px;
}
.modal-pagination__gap { color: var(--color-muted); padding: 0 2px; }
.modal-pagination button:disabled { opacity: 0.4; cursor: default; }
.modal-pagination button {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.82rem;
  cursor: pointer;
  color: var(--color-text);
}
.modal-pagination button:hover { background: #eef0ec; }
.modal-pagination button.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* 商品検索の窓(2026-09-25): 右に寄せて後ろの明細を見えるようにし、10件を1画面に収める */
.modal-overlay--panel { justify-content: flex-end; align-items: stretch; background: rgba(0,0,0,0.18); }
.modal-box--panel {
  width: 600px;
  max-width: 96vw;
  max-height: 100vh;
  height: 100vh;
  border-radius: 0;
  box-shadow: -4px 0 18px rgba(0,0,0,0.18);
}
.modal-box--panel .modal-header { padding: 10px 18px; }
.modal-box--panel .modal-header h3 { margin-bottom: 6px; font-size: 0.98rem; }
.modal-box--panel .modal-header h3 .hint { font-weight: 400; font-size: 0.76rem; margin-left: 4px; }
.modal-box--panel .modal-header input[type=text] { padding: 5px 10px; margin-bottom: 6px; font-size: 0.88rem; }
/* 大分類〜発注先の4つを1行に並べる(2行になると10件が画面に収まらない) */
.modal-box--panel .modal-category-selects { flex-wrap: nowrap; gap: 6px; }
.modal-box--panel .modal-category-selects select { flex: 1 1 0; padding: 4px 6px; font-size: 0.8rem; }
.modal-box--panel .modal-body { padding: 6px 18px 8px; }
.modal-box--panel .modal-result-count { margin-bottom: 2px; font-size: 0.76rem; }
.modal-box--panel .modal-product-item { padding: 3px 8px; font-size: 0.86rem; line-height: 1.25; }
.modal-box--panel .modal-product-item .mp-code { font-size: 0.72rem; }
.modal-box--panel .modal-pagination { padding-top: 4px; }
.modal-box--panel .modal-pagination button { padding: 3px 8px; font-size: 0.78rem; }
.modal-box--panel .modal-footer { padding: 6px 18px; }
.modal-footer {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 18px; border-top: 1px solid var(--color-border); background: #fafaf8;
}
.modal-footer__added { flex: 1; min-width: 0; font-size: 0.8rem; }
/* 検索の窓から入れた行を一瞬だけ色を付けて、どこに入ったか分かるようにする */
.line-item-row--flash td, tr.line-item-row--flash, .line-item-row--flash { background: #fff3c4 !important; transition: background 0.6s; }
@media (max-width: 860px) {
  .modal-overlay--panel { justify-content: center; }
  .modal-box--panel { width: 100%; max-width: 100vw; }
}

/* ---- Print document ---- */
.copy-label {
  display: inline-block;
  font-size: 0.85em;
  color: var(--color-muted);
  margin-left: 10px;
  letter-spacing: 0.15em;
}
.print-page { padding: 30px 0; }
.print-page + .print-page { border-top: 2px dashed var(--color-border); margin-top: 20px; }

.doc-compact { font-size: 0.85rem; }
.doc-compact .page-title { font-size: 1.15rem; }
.doc-compact .section-title { font-size: 0.95rem; }
.doc-compact .table th, .doc-compact .table td { padding: 3px 8px; font-size: 0.82rem; }

/* 帳票の上段。左に宛名・振込先・合計金額、右に発行情報・自社情報・備考を並べる。 */
.doc-top {
  display: flex;
  gap: 20px;
  margin-top: 14px;
  /* 左右の列を同じ高さにし、それぞれの一番下(合計金額と備考)の位置をそろえる */
  align-items: stretch;
}
.doc-top__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.doc-top__col--left { flex: 1 1 56%; }
.doc-top__col--right { flex: 1 1 44%; }

.doc-recipient-box {
  box-sizing: border-box;
  line-height: 1.8;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px 20px;
  min-height: 118px;
  font-size: 1.05em;
}
.doc-meta-info {
  min-width: 0;
  text-align: right;
  line-height: 1.7;
  font-size: 0.8em;
  color: var(--color-muted);
}

/* 振込先・備考の枠。登録が無くても枠と見出しだけ出す(手書きで書き込めるように)。 */
.doc-framed-box {
  box-sizing: border-box;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 0.85em;
  line-height: 1.6;
}
.doc-framed-box__label { font-weight: 700; }
/* 振込先と合計金額は左の列いっぱいに広げ、横幅を宛名の枠とそろえる */
.doc-bank-box { min-height: 62px; }
.doc-bank-legacy { white-space: pre-line; }
/* 備考と合計金額はそれぞれの列の一番下に置く(下端がそろう) */
.doc-note-box { margin-top: auto; min-height: 74px; }
.doc-note-box__body p { margin: 2px 0 0; }

.doc-total-box {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  margin-top: auto;
  padding: 10px 20px;
  border-radius: var(--radius);
  background: #f0efec;
  color: var(--color-text);
  font-weight: 700;
}
.doc-total-box__label { font-size: 0.9em; }
.doc-total-box__amount { font-size: 1.3em; }

/* 自社情報。ロゴは社名の上、社判は右横に置く。 */
/* ロゴ・自社情報・社判をひとまとまりで右端に寄せる(見積書・請求書で共通)。 */
.doc-issuer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.doc-issuer__body {
  flex: 0 1 auto;
  min-width: 0;
  line-height: 1.5;
  font-size: 0.85em;
}
.doc-issuer .doc-seal { height: 16mm; }

.doc-company-block {
  flex: 1 1 220px;
  min-width: 0;
  line-height: 1.4;
}
.doc-company-block > div + div { margin-top: 1px; }
.doc-company-name {
  color: var(--color-text);
  font-weight: 600;
}
.doc-company-stamps {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.doc-logo { display: block; max-height: 42px; max-width: 130px; object-fit: contain; margin-bottom: 4px; }
.doc-seal { height: 18mm; width: auto; object-fit: contain; flex-shrink: 0; }
.doc-seal--overlap {
  margin-left: -14px;
  vertical-align: middle;
  position: relative;
  z-index: 1;
}

.doc-col-name { width: auto; }
.doc-item-name { font-size: 1em; }
.doc-lined-table th, .doc-lined-table td { border-right: 1px solid var(--color-border); }
.doc-lined-table th:last-child, .doc-lined-table td:last-child { border-right: none; }

/* 帳票の表は見出しを中央揃えにする(中身の金額などは右揃えのまま)。
   合計行の見出し(「合計」)も中央に揃え、その行の金額は右揃えのまま残す。
   .table th.num より詳細度を上げる必要があるため、.num側も明示して指定する。 */
.doc-lined-table thead th,
.doc-lined-table thead th.num,
.doc-lined-table tfoot th:not(.num) {
  text-align: center;
}

.doc-signature-box {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.doc-fill-blank {
  display: inline-block;
  border-bottom: 1px solid var(--color-text);
  width: 36px;
  height: 1em;
  vertical-align: bottom;
}
.doc-fill-blank--wide { width: 220px; }

.doc-seal-boxes {
  margin-top: 34px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.doc-seal-box {
  width: 76px;
  height: 76px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 4px;
}
.doc-seal-box__label {
  font-size: 0.72rem;
  color: var(--color-muted);
}

/* 売上区分に色が設定されている場合、書類内の薄いグレー(枠線・見出し背景・
   小計行の背景)をすべてその色に置き換える。--doc-accentは
   shared/_billing_document.html.erbでこの要素に直接設定される。 */
/* 帳票は既定では色を使わず、売上区分に色が設定されているときだけその色を使う。
   (色の無い売上区分の請求書と、売上区分を持たない見積書はすべてグレーになる) */
.print-page .section-title { color: var(--color-text); }

.doc-accent.card { border-color: var(--doc-accent); }
.doc-accent .section-title { color: var(--doc-accent); }
.doc-accent .doc-framed-box { border-color: var(--doc-accent); }
.doc-accent .doc-total-box { color: #fff; }
.doc-accent .doc-lined-table thead th { border-right-color: rgba(255, 255, 255, 0.35); }
.doc-accent .doc-recipient-box { border-color: var(--doc-accent); }
.doc-accent .doc-total-box { background: var(--doc-accent); }
.doc-accent .table th { background: var(--doc-accent); color: #fff; }
.doc-accent .doc-lined-table th, .doc-accent .doc-lined-table td { border-right-color: var(--doc-accent); }
.doc-accent .table th, .doc-accent .table td { border-bottom-color: var(--doc-accent); }
.doc-accent .subtotal-row td { background: var(--doc-accent); color: #fff; }
.doc-accent .doc-seal-box { border-color: var(--doc-accent); }

/* 領収書: A4 1枚を上下半分に分け、上=お客様用(原本)/下=控え(社内保管用)を1ページにまとめる */
.receipt-page {
  display: flex;
  flex-direction: column;
  gap: 4mm;
}
.receipt-half {
  flex: 1 1 128mm;
  min-height: 128mm;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  /* 税率が3種類(10%・8%・非課税)ある領収書でもA4 1枚に2枚とも収まるよう、
     上下の余白と行間は詰めておく(住所が2行になる程度の余裕は残す)。 */
  padding: 6mm 10mm 6mm 12mm;
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
}
.receipt-half__main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* 印紙・係印の枠を金額欄より下だけに配置するため、それ以降の内容と枠を横並びにする */
.receipt-half__body-row {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.receipt-half__body-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.receipt-half__side {
  flex: 0 0 27mm;
  width: 27mm;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.receipt-half__stamp-box,
.receipt-half__seal-box {
  box-sizing: border-box;
  border: 1px dashed var(--color-muted);
  border-radius: var(--radius);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 4px;
  font-size: 0.7rem;
  color: var(--color-muted);
}
.receipt-half__stamp-box {
  /* 収入印紙(横2.5cm×縦3.0cm)が収まるサイズを確保する */
  flex: 0 0 32mm;
  width: 27mm;
  min-height: 32mm;
}
.receipt-half__seal-box {
  flex: 0 0 24mm;
  height: 24mm;
  margin-top: auto;
}
.receipt-half__tax-table {
  /* 印紙欄の手前で止める。幅いっぱいだと印紙の枠に迫って窮屈に見えるため */
  width: 68%;
  border-collapse: collapse;
  font-size: 0.78em;
  color: var(--color-muted);
}
.receipt-half__tax-table th,
.receipt-half__tax-table td {
  border: 1px solid var(--color-border);
  padding: 2px 6px;
}
.receipt-half__tax-table .num { text-align: right; }
.receipt-half__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  border-bottom: 2px solid var(--color-text);
  padding-bottom: 8px;
}
.receipt-half__title { font-size: 1.5em; margin: 0; letter-spacing: 0.3em; }
.receipt-half__meta { min-width: 0; text-align: right; font-size: 0.8em; color: var(--color-muted); line-height: 1.45; }
.receipt-half__recipient {
  font-size: 1.25em;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 6px;
  min-height: 1.4em;
}
.receipt-half__amount-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 8px;
}
.receipt-half__amount-label { font-size: 0.85em; color: var(--color-muted); }
.receipt-half__amount { font-size: 1.7em; font-weight: 700; }
.receipt-half__footer {
  margin-top: auto;
  /* 社判を会社情報のすぐ右(住所の横あたり)に置くため、左詰めにして
     会社情報は文字幅のぶんだけにする(伸ばすと社判が右端へ離れてしまう)。 */
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0;
  font-size: 0.85em;
}
.receipt-half__company { flex: 0 1 auto; min-width: 0; }
.receipt-half__company > div + div { margin-top: 2px; }
/* 社判は住所の行のあたりに、文字に少し重ねて押した見た目にする。
   社名の行に入れると行の高さが社判の高さまで広がり、税率が3種類あるときに
   A4 1枚に収まらなくなるため、行の中ではなく右横に置く。 */
.receipt-half__company-seal {
  height: 16mm;
  /* 文字に少しだけ重ねる。深く重ねると住所の末尾が隠れてしまうため控えめにする */
  margin-left: -2mm;
  align-self: center;
  position: relative;
  z-index: 1;
}
.receipt-cut-line {
  position: relative;
  height: 0;
  border-top: 1px dashed var(--color-muted);
  text-align: center;
}
.receipt-cut-line span {
  position: relative;
  top: -0.7em;
  background: var(--color-surface);
  padding: 0 8px;
  font-size: 0.7rem;
  color: var(--color-muted);
}

@media print {
  /* 印刷/PDF出力ソフトによっては既定の余白が0になり、右端の枠線が
     ページ端で切れてしまうことがあるため、明示的に余白を確保する。 */
  @page { margin: 12mm; }

  /* body既定のうっすらしたグレー背景(--color-bg)が、印刷時に本文より
     下の余白部分まで帯状に見えてしまうため、印刷時は白背景にする。 */
  body { background: #fff; }

  /* 領収書は2つの.receipt-halfが@pageの余白を除いた高さ(A4 297mm -
     上下余白12mm×2 = 273mm)いっぱいに均等に伸びるようにし、間の
     切り取り線が紙を実際に半分に折った位置と一致するようにする。
     高さを明示しないと.receipt-pageは中身の自然な高さ(264mm)までしか
     伸びず、余った分が下に残って切り取り線が本来の中央より上にずれる。 */
  .receipt-page { height: 273mm; }

  .no-print { display: none !important; }

  /* 通常レイアウト(サイドバーあり)の画面を直接印刷する場合、
     サイドバーは不要なので隠し、本文だけが印刷されるようにする。 */
  .app-shell .sidebar { display: none !important; }
  .app-shell { display: block !important; }
  .app-shell .page { margin: 0 !important; width: 100% !important; }
  .print-page { padding: 0; }
  .print-page + .print-page {
    border-top: none;
    margin-top: 0;
    page-break-before: always;
  }

  /* 明細が長く複数ページにまたがる場合、.cardの角丸+枠線がページの
     区切り目に余分な水平線として出てしまう(ブラウザの印刷時のページ分割の
     仕様上の挙動)。印刷時はページの余白自体が境界の役割を果たすため、
     枠線・角丸は不要として取り除く。 */
  .print-page.card {
    border: none;
    border-radius: 0;
  }
}

/* 価格未設定の商品を明細に入れたとき、単価の入力を促す */
.unit-price-input--needed {
  background: #fff7e0;
  border-color: var(--color-warning);
  box-shadow: 0 0 0 2px rgba(185, 138, 46, 0.25);
}

/* 商品一覧: まとめて無効化/有効化のバーと、無効な商品の行 */
.bulk-status-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; }
.bulk-status-bar__label { font-size: 0.9rem; }
.row--inactive td { color: var(--color-muted); background: #f6f6f4; }

/* 商品価格の更新画面(2026-09 案B) */
.price-bulk-panel { border: 1px solid var(--color-border); border-radius: 8px; padding: 10px 12px; margin: 4px 0 12px; background: #fafaf8; }
.price-bulk-panel__title { font-weight: 600; font-size: 0.92rem; margin-bottom: 6px; }
.price-bulk-panel__fields { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.9rem; }
.price-bulk-panel__fields label { display: inline-flex; align-items: center; gap: 4px; }
.price-update-table .price-input { width: 7.5em; text-align: right; }
.price-update-table tr.row--changed td { background: #fff7e0; }
.price-update-table tr.row--error td { background: #fdecec; }
.field-error { color: var(--color-danger, #b3261e); font-size: 0.82rem; margin-top: 2px; }
.price-save-bar {
  position: sticky; bottom: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
  padding: 10px 0; margin-top: 8px; background: var(--color-surface); border-top: 1px solid var(--color-border);
}
.price-save-bar__pending { font-weight: 600; color: var(--color-warning); }
.price-change-up { color: #b3261e; }
.price-change-down { color: #1f6f43; }

/* 名前変更用の商品(2026-09) */
.badge--name-change { background: #fff1d6; color: #8a5a00; margin-left: 4px; }
.name-change-badge { font-size: 0.75rem; color: #8a5a00; background: #fff1d6; border-radius: 4px; padding: 1px 6px; margin-bottom: 3px; display: inline-block; }
.name-change-badge[hidden] { display: none; }
.field--needed {
  background: #fff7e0;
  border-color: var(--color-warning);
  box-shadow: 0 0 0 2px rgba(185, 138, 46, 0.25);
}

/* プランの内訳の金額を印刷する(2026-09) */
.breakdown-row td { font-size: 0.95em; }
.breakdown-hint { color: var(--color-muted); font-size: 0.8rem; white-space: nowrap; }

/* 商品マスタのExcel一括登録(2026-09) */
.import-summary { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0 14px; }
.import-summary__item { border: 1px solid var(--color-border); border-radius: 8px; padding: 8px 14px; background: #fafaf8; }
.import-summary__item strong { font-size: 1.2rem; }
.import-summary__item--new strong { color: #1f6f43; }
.import-summary__item--changed strong { color: var(--color-warning); }
.import-summary__item--error strong { color: var(--color-danger); }

/* 一覧のページ送り(2026-09) */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.pager__count { color: var(--color-muted); font-size: 0.85rem; margin-right: 6px; }
.pager__link { border: 1px solid var(--color-border); border-radius: 6px; padding: 3px 10px; font-size: 0.85rem; text-decoration: none; color: var(--color-text); background: var(--color-surface); }
.pager__link:hover { background: #eef0ec; }
.pager__link--current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.pager__gap { color: var(--color-muted); }

/* 商品マスタの一覧: 画面の幅に収める(2026-09) */
/* 施行一覧と「自分の印(付箋)」(2026-09-25) */
.case-list th, .case-list td { vertical-align: top; }
.case-list td:nth-child(1), .case-list td:nth-child(2), .case-list td:nth-child(5), .case-list td:nth-child(6) { white-space: nowrap; }
/* 売上分析(2026-09-25) */
.sales-summary th.num, .sales-summary td.num, .sales-detail th.num, .sales-detail td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table.sales-detail td, .table.sales-detail th { white-space: nowrap; }
.sales-department td { background: #eef1f8; font-weight: 700; }
.sales-subtotal td { background: #f7f6f2; font-weight: 600; border-top: 1px solid #d8d5cf; }
.sales-total td { background: #f0efec; font-weight: 700; border-top: 2px solid #b8b5ae; }
/* 確認の記録(アンケート確認・施行写真確認・クレームあり) */
.case-checks { display: flex; flex-direction: column; gap: 6px; }
.case-checks__item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.case-checks__item form { margin: 0; }
.case-checks__label { min-width: 110px; font-weight: 600; font-size: 0.9rem; }
.case-checks__done { color: #2f6b3a; font-weight: 600; font-size: 0.88rem; }
.case-checks__form { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.case-checks__toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 0.9rem; }
.case-checks__note { width: 260px; max-width: 100%; padding: 4px 8px; font-size: 0.85rem; }
.case-checks__item--complaint.is-on .case-checks__label { color: var(--color-danger); }
.badge--complaint { background: #fbeceb; color: var(--color-danger); }
.check-mark {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 2px;
  border-radius: 50%; border: 1px solid var(--color-border); color: #c4c1ba; font-size: 0.75rem; font-weight: 700; background: var(--color-surface);
}
.check-mark.is-on { background: #e3f1e5; color: #2f6b3a; border-color: #9fcaa6; }
.case-list__checks { white-space: nowrap; }
.table--fit { min-width: 0; table-layout: auto; }
.table--fit td { white-space: normal; }
.product-list td { vertical-align: top; }
.product-list__name { color: var(--color-text); text-decoration: none; font-weight: 600; }
.product-list__name:hover { text-decoration: underline; }
.product-list__sub { color: var(--color-muted); font-size: 0.78rem; margin-top: 2px; }
.product-list__actions { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.product-list__actions form, .product-list__actions .btn { width: 100%; }

/* 対象者ごとの書類(受注書・注文書など)(2026-09) */
.doc-kind-group { margin: 6px 0 10px; }
.doc-kind-group__title { font-weight: 600; font-size: 0.88rem; margin-bottom: 4px; }
.doc-cards { display: flex; flex-wrap: wrap; gap: 10px; }
.doc-card { width: 170px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); overflow: hidden; display: flex; flex-direction: column; }
.doc-card__preview { display: flex; align-items: center; justify-content: center; height: 130px; background: #f4f3ef; }
.doc-card__preview img { max-width: 100%; max-height: 130px; object-fit: contain; }
.doc-card__icon { font-weight: 700; color: var(--color-muted); border: 2px solid var(--color-border); border-radius: 6px; padding: 10px 14px; }
.doc-card__meta { padding: 6px 8px; font-size: 0.82rem; display: flex; flex-direction: column; gap: 3px; }
.doc-card__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-upload { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.doc-upload select, .doc-upload input[type=text] { width: auto; min-width: 150px; }
.doc-missing { color: var(--color-danger); }
.invoice-list td { vertical-align: top; }

/* 横幅に合わせて縮める一覧(施行一覧・請求書一覧・商品マスタ)は、スマホでは1文字ずつ縦に潰れるので
   横スクロールにする(2026-09-25)。.table--fit の指定より後に置く必要がある */
@media (max-width: 860px) {
  .table-wrap .table--fit { min-width: max-content; }
  .table-wrap .table--fit td, .table-wrap .table--fit th { white-space: nowrap; }
  .table-wrap .case-list td:nth-child(8) { white-space: normal; min-width: 160px; max-width: 220px; }
  /* 絞り込みの選択肢が長くてもカードからはみ出さない */
  .search-form select, .search-form input { max-width: 100%; }
  /* 「2列分」の欄(件名など)は、1列しか無いスマホ幅で2列目を作らせない(作ると画面が横に広がり縮小表示になる) */
  .field--wide { grid-column: 1 / -1; }
  /* 明細の表はJSが動く前から表の中で横スクロールにする(最初の描画で横に広がるのを防ぐ) */
  .items-table-wrap { overflow-x: auto; }
}