table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  margin-bottom: 16px;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.pagination-info {
  color: #555;
  font-size: 13px;
}
.pagination-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.phase-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  background: #eef1f4;
  color: #333;
}
.phase-badge.phase-quotation { background: #e8f0fe; color: #1a56cc; }
.phase-badge.phase-order { background: #fff3cd; color: #8a6400; }
.phase-badge.phase-sales { background: #d9f0e3; color: #16794a; }
.phase-badge.phase-billing { background: #ece3fb; color: #5b2fa6; }

.probability-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  background: #eef1f4;
  color: #333;
}
.probability-badge.probability-confirmed { background: #d9f0e3; color: #16794a; }

/* 案件詳細画面: サマリー表と見積/受注/売上/請求タブ */
.project-summary-table th {
  background: #e4e8ee;
  width: 10%;
  white-space: nowrap;
}
.project-summary-table td {
  width: 23%;
}

.tabs .tab-nav {
  display: flex;
  gap: 4px;
  margin-bottom: 0;
  border-bottom: 2px solid #dde2e8;
}
.tabs .tab-btn {
  padding: 8px 20px;
  background: #eef1f4;
  color: #333;
  border: none;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  font-size: 14px;
}
.tabs .tab-btn:hover {
  background: #e0e5ea;
}
.tabs .tab-btn.is-active {
  background: #2d6cdf;
  color: #fff;
}
.tabs .tab-panel {
  display: none;
  padding-top: 16px;
}
.tabs .tab-panel.is-active {
  display: block;
}

/* 案件一覧: 案件番号行の下に見積をアコーディオン表示する */
tr.accordion-row > td {
  background: #f7f8fa;
  padding: 10px 10px 10px 32px;
}
.quote-subtable {
  margin-bottom: 0;
}
.quote-subtable th {
  background: #e4e8ee;
}

table th,
table td {
  border: 1px solid #dde2e8;
  padding: 6px 10px;
  text-align: left;
}

table th {
  background: #eef1f4;
}

/* 一覧画面ヘッダ列の昇順/降順切替リンク */
table th.sortable-th {
  padding: 0;
}
table th.sortable-th a {
  display: block;
  padding: 6px 10px;
  color: inherit;
  text-decoration: none;
}
table th.sortable-th a:hover {
  background: #e0e6ec;
}
table th.sortable-th .sort-indicator {
  margin-left: 4px;
  color: #6a7684;
  font-size: 0.85em;
}

.col-amount {
  text-align: right;
}

/* 見積名等にマウスホバーすると吹き出し形状で補足情報(伝票番号等)を表示する */
.tooltip-target {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted #888;
}
.tooltip-target::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s;
  z-index: 20;
}
.tooltip-target::before {
  content: "";
  position: absolute;
  bottom: 115%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #333;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s;
  z-index: 20;
}
.tooltip-target:hover::after,
.tooltip-target:hover::before {
  opacity: 1;
  visibility: visible;
}

/* 受注一覧: 見積番号は見積名称クリックで表示するまで非表示にする */
.toggle-hidden-column {
  display: none;
}
.toggle-header {
  cursor: pointer;
  text-decoration: underline dotted;
}

.btn {
  display: inline-block;
  padding: 6px 14px;
  background: #2d6cdf;
  color: #fff;
  border: none;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  font-size: 13px;
}

.btn:hover {
  background: #1f56b8;
}

.btn-secondary {
  background: #6c757d;
}

.btn-secondary:hover {
  background: #565e64;
}

.btn-danger {
  background: #d9534f;
}

.btn-danger:hover {
  background: #b52b27;
}

.toolbar {
  margin-bottom: 16px;
  display: flex;
  gap: 8px;
  align-items: center;
}

form.inline {
  display: inline;
}

.form-row {
  margin-bottom: 12px;
}

.form-row label {
  display: block;
  font-weight: bold;
  margin-bottom: 4px;
}

.pipeline-search-form {
  margin-bottom: 16px;
}
.pipeline-search-form .search-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 16px;
  margin-bottom: 12px;
}
.pipeline-search-form .form-row {
  margin-bottom: 0;
}
.pipeline-search-form input[type="text"],
.pipeline-search-form input[type="date"],
.pipeline-search-form select {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid #c8ced4;
  border-radius: 4px;
  box-sizing: border-box;
}
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: normal;
  white-space: nowrap;
}

.form-row input[type="text"],
.form-row input[type="number"],
.form-row input[type="date"],
.form-row input[type="password"],
.form-row select,
.form-row textarea {
  width: 100%;
  max-width: 480px;
  padding: 6px 8px;
  border: 1px solid #c8ced4;
  border-radius: 4px;
}

/* 登録済み見積の案件は通常編集不可。「他案件に複製」ボタン押下時のみ選択可能にする */
.project-select-locked {
  pointer-events: none;
  background: #eee;
  color: #666;
}

.block-box {
  border: 1px solid #c8ced4;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 16px;
  background: #fafbfc;
}

.autocomplete-box {
  position: relative;
}

.autocomplete-suggestions {
  position: absolute;
  z-index: 10;
  background: #fff;
  border: 1px solid #c8ced4;
  width: 100%;
  max-width: 480px;
  max-height: 160px;
  overflow-y: auto;
}

.autocomplete-suggestions div {
  padding: 4px 8px;
  cursor: pointer;
}

.autocomplete-suggestions div:hover {
  background: #eef1f4;
}

/* 見積明細ブロック(行タイプ切替式スプレッドシート風テーブル)
   列幅は下記の最小文字数に基づく(半角=0.5em、全角=1em、テーブルフォント13px基準):
   No:半角3文字/摘要:全角21文字/数量:全角2文字/単位:全角6文字/
   小計:全角6文字/備考:全角32文字/原価:全角6文字/仕入先:全角24文字 */
/* 外側の<table>はwidth100%(見積明細ブロック全体の幅)。
   その1つのtd内に、実際の列幅を持つ内側の<table>を入れ子にする。
   内側テーブルはwidth:max-contentで指定した列幅の合計まで広がり、
   外側td側でoverflow-x:autoにすることで横スクロールに対応する。 */
.quote-table-outer {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 8px;
}

.quote-table-outer-cell {
  border: 1px solid #dde2e8;
  padding: 0;
  overflow-x: auto;
}


/* テーブル全体の幅は列幅の合計を明示指定する(削除列col-delの88pxは別途加算されるため
   ここには含めない)。
   全列表示時(売上登録以外、ドラッグ列あり): 1+3+17+12+4+6+6+6+16+6+12=89em + 48px
   原価・仕入先非表示時(既定表示。A4サイズ内に収まるよう調整): 1+3+17+12+4+6+6+6+16=71em + 48px
   (下部の.cost-columns-hiddenルールで上書きする。原価入力ボタンで表示に切り替えた場合のみ
   89emまで広がり、A4サイズを超える場合がある)。 */
.quote-table {
  width: calc(89em + 48px);
  table-layout: fixed;
  border-collapse: collapse;
  margin-bottom: 0;
  font-size: 13px; /* col要素のem幅もこの基準で解決させるため table 自体にも明示 */
}

/* 売上登録画面(確定原価欄・売上区分・経費区分欄あり、常に全列表示)は列が3つ増えるため、
   レイヤーごとに幅を計算し直す: 3+8+17+12+4+6+6+6+16+8+6+6+12=110em + 48px
   quote-table-topは最上位(レイヤー1)のテーブルのみに付与するクラスで、
   ネストしたレイヤー2/3のテーブル(.quote-table のみ、quote-table-topは無し)とは
   区別して個別に上書きできるようにする。 */
.has-confirmed-cost .quote-table-top {
  width: calc(110em + 48px);
}

/* ドラッグ用ハンドル列(1文字分、col-drag)が追加される見積(売上登録以外)。 */
.has-drag-column .quote-table-top {
  width: calc(89em + 48px);
}
.has-drag-column.cost-columns-hidden .quote-table-top {
  width: calc(71em + 48px) !important;
}

/* 行の高さ:摘要欄が2段表示に対応できるよう従来の18pxの2倍+余裕分に調整 */
.quote-table th,
.quote-table td {
  border: 1px solid #dde2e8;
  padding: 1px 6px;
  height: 44px;
  font-size: 13px;
  vertical-align: middle;
}

/* 摘要欄セルはtextarea側の余白のみで見せるため、セル自身の余白は0にして
   セルの枠いっぱいに入力フォームが表示されるようにする */
.quote-table td.description-cell {
  padding: 0;
}

.quote-table-body-scroll {
  max-height: 900px;
  overflow-y: auto;
}

.quote-table col.col-drag { width: 1em; }
.quote-table col.col-no { width: 3em; }
.quote-table col.col-sales-category { width: 8em; }
.quote-table col.col-expense-category { width: 8em; }
.quote-table col.col-desc { width: 17em; }
.quote-table col.col-product-no { width: 12em; }
.quote-table col.col-qty { width: 4em; }
.quote-table col.col-unit { width: 6em; }
.quote-table col.col-price { width: 6em; }
.quote-table col.col-subtotal { width: 6em; }
.quote-table col.col-remarks { width: 16em; }
.quote-table col.col-cost { width: 6em; }
.quote-table col.col-confirmed-cost { width: 6em; }
.quote-table col.col-supplier { width: 12em; }
.quote-table col.col-del { width: 88px; }

.quote-table th.col-cost,
.quote-table th.col-supplier,
.quote-table th.col-expense-category,
.quote-table td.col-cost,
.quote-table td.col-supplier,
.quote-table td.col-expense-category {
  background-color: #ccc;
}

.quote-table th.col-confirmed-cost,
.quote-table td.col-confirmed-cost {
  background-color: #ffe9b3;
}

/* 見積明細見出し行(タイトル+原価入力トグルボタン) */
.quote-detail-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.quote-detail-heading h3 {
  margin: 0;
}

/* 原価・仕入先列は既定で非表示。トグルボタンでcost-columns-hiddenを外すと表示される。
   visibility:collapseは親tableの幅計算に反映されないブラウザがあるため、
   列幅そのものを0にし、テーブル全体の幅も明示的に縮める(!importantで確実に上書き)。 */
.cost-columns-hidden .quote-table col.col-cost,
.cost-columns-hidden .quote-table col.col-confirmed-cost,
.cost-columns-hidden .quote-table col.col-expense-category,
.cost-columns-hidden .quote-table col.col-supplier {
  width: 0 !important;
  min-width: 0 !important;
}

.cost-columns-hidden th.col-cost,
.cost-columns-hidden td.col-cost,
.cost-columns-hidden th.col-confirmed-cost,
.cost-columns-hidden td.col-confirmed-cost,
.cost-columns-hidden th.col-expense-category,
.cost-columns-hidden td.col-expense-category,
.cost-columns-hidden th.col-supplier,
.cost-columns-hidden td.col-supplier {
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
  min-width: 0 !important;
  font-size: 0 !important;
}

.cost-columns-hidden th.col-cost *,
.cost-columns-hidden td.col-cost *,
.cost-columns-hidden th.col-confirmed-cost *,
.cost-columns-hidden td.col-confirmed-cost *,
.cost-columns-hidden th.col-expense-category *,
.cost-columns-hidden td.col-expense-category *,
.cost-columns-hidden th.col-supplier *,
.cost-columns-hidden td.col-supplier * {
  display: none !important;
}

.cost-columns-hidden .quote-table {
  width: calc(71em + 48px) !important;
}

/* No.列:数字表示の上に透明なセレクトを重ね、数字クリックで選択肢を表示する */
.quote-table td.col-no,
.quote-table th.col-no {
  overflow: visible;
  text-align: center;
}

.row-no-wrap {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.row-no-wrap .row-no {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}

.quote-table .row-no-wrap select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  opacity: 0;
  cursor: pointer;
}

/* 入力フォームの高さは行の高さ100%、幅は列の幅100% */
.quote-table input,
.quote-table select {
  width: 100%;
  height: 100%;
  border: 1px solid transparent;
  padding: 0 4px;
  font-size: 13px;
  background: transparent;
  box-sizing: border-box;
}

/* 摘要欄:折り返して2段まで表示。
   height:100%は親セルの高さが不定な場合autoに解決されてしまい、1行/2行で
   実際の高さがブレる原因になるため、2行分の高さを固定px値で直接指定する。 */
.quote-table textarea.row-description {
  width: 100%;
  height: 42px;
  border: 1px solid transparent;
  padding: 2px 4px;
  font-size: 13px;
  font-family: inherit;
  line-height: 16px;
  background: transparent;
  box-sizing: border-box;
  resize: none;
  overflow: hidden;
  /* textarea自体はデフォルトvertical-align:baselineのため、セルのmiddle指定だけでは
     下側に余白が偏ってしまう。textarea自身も明示的にmiddleにして解消する。 */
  vertical-align: middle;
}

.quote-table td.col-del {
  padding: 1px 3px;
}

.quote-table td.col-drag {
  padding: 0;
  text-align: center;
}

.quote-table .row-drag-handle {
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  color: #888;
  font-size: 12px;
  line-height: 1;
  cursor: grab;
}

.quote-table .row-drag-handle:hover {
  color: #333;
}

.quote-table .row-drag-handle:disabled {
  cursor: default;
  color: #ccc;
}

.quote-table tr.row-dragging {
  opacity: 0.4;
}

.quote-table .row-actions {
  display: flex;
  align-items: stretch;
  gap: 2px;
  height: 100%;
}

.quote-table .remove-row-btn,
.quote-table .show-detail-btn {
  height: 100%;
  flex: 1 1 0;
  min-width: 0;
  padding: 0 2px;
  font-size: 9px;
  white-space: nowrap;
  box-sizing: border-box;
}

.quote-table .show-detail-btn {
  background-color: #2d6cdf;
}

/* レイヤー2/3の詳細明細セクション(アコーディオン) */
.detail-section-row > td {
  padding: 10px;
  background: #f4f6f8;
}

.detail-section-inner {
  border: 1px solid #c8ced4;
  border-radius: 4px;
  padding: 8px;
  background: #fff;
  /* 明細行のNo.桁数がレイヤーごとに増えるため、内容幅に合わせて右側へ広がるようにする */
  width: max-content;
  max-width: none;
}

.detail-section-inner .quote-table-outer {
  width: max-content;
}

.detail-section-inner .quote-table-outer-cell {
  overflow: visible;
}

/* レイヤー2:No.は親行No.+2桁=4桁 → 全角4文字分に拡幅 */
.detail-layer-2 .quote-table col.col-no { width: 4em; }
.detail-layer-2 .quote-table { width: calc(90em + 48px); }
.has-confirmed-cost .detail-layer-2 .quote-table { width: calc(111em + 48px); }
.cost-columns-hidden .detail-layer-2 .quote-table { width: calc(72em + 48px) !important; }
.has-drag-column .detail-layer-2 .quote-table { width: calc(90em + 48px); }
.has-drag-column.cost-columns-hidden .detail-layer-2 .quote-table { width: calc(72em + 48px) !important; }

/* レイヤー3:No.は親行No.+2桁=6桁 → 全角6文字分に拡幅 */
.detail-layer-3 .quote-table col.col-no { width: 6em; }
.detail-layer-3 .quote-table { width: calc(92em + 48px); }
.has-confirmed-cost .detail-layer-3 .quote-table { width: calc(113em + 48px); }
.cost-columns-hidden .detail-layer-3 .quote-table { width: calc(74em + 48px) !important; }
.has-drag-column .detail-layer-3 .quote-table { width: calc(92em + 48px); }
.has-drag-column.cost-columns-hidden .detail-layer-3 .quote-table { width: calc(74em + 48px) !important; }

.detail-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-weight: bold;
}

.detail-summary {
  margin-top: 6px;
  text-align: right;
  font-size: 13px;
}

/* フォーカス中(入力対象)のセルは枠を赤・1px細く表示 */
.quote-table input:focus,
.quote-table select:focus,
.quote-table textarea:focus {
  border: 1px solid #d9534f;
  outline: none;
  background: #fff;
}

.quote-table .numeric-input,
.quote-table .row-subtotal {
  text-align: right;
}

.row-type-select {
  font-size: 11px;
  padding: 1px 2px;
}

tr.row-type-title .description-cell input,
tr.row-type-title .description-cell textarea {
  font-weight: bold;
}

tr.row-type-title .data-cell input {
  visibility: hidden;
}

tr.row-type-estimate .description-cell input,
tr.row-type-estimate .description-cell textarea {
  margin-left: 20px;
  font-size: 0.85em;
  width: calc(100% - 20px);
}

tr.row-type-subtotal {
  background: #f4f6f8;
}

tr.row-type-subtotal .description-cell input {
  font-weight: bold;
}

tr.row-type-subtotal .data-cell input {
  visibility: hidden;
}

tr.row-type-subtotal .col-subtotal-cell input {
  font-weight: bold;
  visibility: visible;
}

.summary-blocks-row {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  margin-top: 16px;
}

.quote-summary-table {
  width: auto;
  table-layout: fixed;
}

.quote-summary-table td {
  padding: 4px 8px;
}

.quote-summary-table td:last-child {
  width: 10em;
  text-align: right;
}

/* 原価計算ブロック(原価総計/予定粗利/予定粗利%)は既定で非表示。
   原価入力ボタンで #quote-detail-wrapper の cost-columns-hidden が外れると表示される。 */
.cost-columns-hidden .cost-summary-table {
  display: none;
}

/* A4見積書レイアウト(見積・受注・売上登録の入力画面共通) */
.a4-sheet {
  width: 100%;
  max-width: 1000px;
  border: 1px solid #dde2e8;
  background: #fff;
  padding: 16px 20px;
  margin-bottom: 16px;
}

/* 過去のdivision表示時は編集不可(閲覧専用)であることを視覚的に示す */
.a4-sheet.readonly-mode {
  background: #f7f7f7;
  pointer-events: none;
}

.a4-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 14px;
}

.a4-block-left {
  width: 60%;
}

.a4-block-right {
  width: 40%;
}

.a4-block-full {
  width: 100%;
}

.a4-stack-bottom {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 4.5em;
}

.fs-p3 {
  font-size: 17px;
}

.fs-p5 {
  font-size: 25px;
}

.fs-p5.a4-plain-input {
  /* .a4-plain-input の font:inherit (ショートハンド)がfont-sizeも
     リセットしてしまうため、複合セレクタで詳細度を上げて明示指定する */
  font-size: 25px;
  padding: 8px 4px;
  line-height: 1.4;
}

.fs-m1 {
  font-size: 13px;
}

.addressee-line {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.addressee-line .autocomplete-box {
  flex: none;
  width: 45%;
  min-width: 0;
}

.addressee-line .a4-plain-input {
  width: 100%;
  min-width: 0;
}

.addressee-line select {
  width: auto;
  flex-shrink: 0;
}

.bold {
  font-weight: bold;
}

.align-right {
  text-align: right;
}

.a4-plain-input {
  border: none;
  border-bottom: 1px solid #c8ced4;
  background: transparent;
  padding: 2px 4px;
  width: 100%;
  font: inherit;
}

/* <select>はブラウザ既定ではページ本文のフォントサイズ/フォントを継承しないため、
   他のフォーム表示に合わせて明示的に継承させる(見積編集画面の担当者セレクト、
   請求・売掛・入金集計画面の絞り込みセレクト等で使用)。 */
.toolbar-select {
  font: inherit;
}

.a4-block-right.align-right .a4-plain-input {
  width: auto;
  display: inline-block;
}

.fixed-phrase {
  margin-top: 8px;
  white-space: nowrap;
}

/* 自社情報ブロック: ブロック自体は右詰め、ブロック内の文字は左詰め */
.company-block-outer {
  display: flex;
  justify-content: flex-end;
}

.company-block {
  position: relative;
  display: inline-block;
  text-align: left;
}

.company-block div {
  line-height: 1.5;
}

/* ロゴはブロックの通常の流れから外し(絶対配置)、社名の右横に表示する */
.company-name-row {
  position: relative;
  display: inline-block;
}

.company-name {
  font-size: 15px; /* ブロック基準(13px)より2px大きく */
}

.company-logo-img {
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  margin-right: 8px;
  max-height: 58px;
  max-width: 120px;
}

/* 企業印章は住所行の上に重なるように表示する(住所行を基準にした絶対配置)
   サイズは従来(56px)の160%=約90px */
.company-address-line {
  position: relative;
}

.company-seal-overlay {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 90px;
  height: 90px;
  z-index: 5;
  pointer-events: none;
}

.a4-field-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.a4-field-line label {
  width: 6.5em;
  flex-shrink: 0;
  font-weight: normal;
  color: #555;
}

.a4-field-line input {
  flex: 1;
  padding: 4px 6px;
  border: 1px solid #c8ced4;
  border-radius: 4px;
}

.quote-total-highlight {
  margin-top: 8px;
}

.quote-total-highlight label {
  font-weight: bold;
  color: #222;
}

.quote-total-highlight span {
  font-size: 25px;
  font-weight: bold;
}

/* 受渡期日/受渡場所等、ラベル文言自体を編集可能にする項目(見積作成画面)。
   プリセット(例: 受渡期日/履行期限)をセレクトで選べ、「その他」選択時のみ
   自由入力欄が表示される。 */
.a4-field-label-edit {
  width: 9em;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  color: #555;
}

.a4-field-label-edit select.field-label-select {
  width: 100%;
  padding: 2px 2px;
  font-size: 0.85em;
  color: #555;
  border: 1px solid #c8ced4;
  border-radius: 3px;
}

.a4-field-line .a4-field-label-edit input.field-label-input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  padding: 2px 4px;
  font-size: 0.9em;
  color: #555;
  border: 1px solid #c8ced4;
  border-radius: 3px;
}

.seal-boxes {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.seal-box {
  width: 56px;
  height: 56px;
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.seal-box img {
  max-width: 100%;
  max-height: 100%;
}

/* 見積書としてのデータ出力・印刷時は原価・仕入先列を非表示にする */
@media print {
  .print-hide {
    display: none !important;
  }
}

/* 読み取り専用の値表示(見積プレビュー・受注登録画面など): 罫線は文字幅に
   追従する下線として表示する(枠いっぱいの罫線にしない) */
.readonly-underline {
  display: inline-block;
  min-width: 2em;
  border-bottom: 1px solid #c8ced4;
  padding: 2px 3px;
}
.addressee-line .readonly-underline + .readonly-underline {
  margin-left: 2px;
}

/* 受注登録画面・受注一覧のプレビューモーダルで使う、見積内容の読み取り専用表示 */
table.order-detail-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin-bottom: 10px;
}
table.order-detail-table th, table.order-detail-table td {
  border: 1px solid #999;
  padding: 3px 6px;
  font-size: 12px;
  vertical-align: middle;
}
table.order-detail-table th {
  background: #eee;
}
.order-detail-table .col-no { width: 40px; text-align: center; }
.order-detail-table .col-qty { width: 60px; text-align: right; }
.order-detail-table .col-unit { width: 50px; text-align: center; }
.order-detail-table .col-price { width: 90px; text-align: right; }
.order-detail-table .col-subtotal { width: 90px; text-align: right; }
.order-detail-table .col-remarks { width: 160px; }
.order-detail-table tr.row-title td { font-weight: bold; }
.order-detail-table tr.row-subtotal td { background: #f4f6f8; font-weight: bold; }
.order-detail-table tr.row-estimate .desc-cell { padding-left: 20px; font-size: 0.9em; color: #555; }

/* 見積のレイヤー2/3(詳細明細)をインライン展開して表示する際の字下げ・区別表示 */
.order-detail-table tr[data-layer="2"] { background: #fbfcfd; }
.order-detail-table tr[data-layer="3"] { background: #f6f8fa; }
.order-detail-table tr[data-layer="2"] .desc-cell { padding-left: 24px; }
.order-detail-table tr[data-layer="3"] .desc-cell { padding-left: 44px; }
.order-detail-table tr[data-layer="2"] td, .order-detail-table tr[data-layer="3"] td { font-size: 0.92em; }

.order-summary-block {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
table.order-summary-table {
  border-collapse: collapse;
  min-width: 260px;
}
table.order-summary-table td {
  border: 1px solid #999;
  padding: 4px 10px;
  font-size: 13px;
}
table.order-summary-table td:last-child {
  text-align: right;
  min-width: 100px;
}
.order-remarks-block {
  margin-top: 16px;
  font-size: 12px;
}
.order-remarks-block label {
  font-weight: bold;
}
.order-remarks-block .remarks-body {
  border: 1px solid #ccc;
  min-height: 3em;
  padding: 6px;
  white-space: pre-wrap;
}

/* 見積・受注・売上・請求 各一覧共通のプレビューモーダル */
dialog#order-preview-modal,
dialog#pipeline-preview-modal {
  width: min(900px, 92vw);
  max-height: 85vh;
  padding: 0;
  border: none;
  border-radius: 6px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
dialog#order-preview-modal::backdrop,
dialog#pipeline-preview-modal::backdrop {
  background: rgba(0,0,0,0.5);
}
.order-preview-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #dde2e8;
  background: #f4f5f7;
}
.order-preview-modal-body {
  padding: 16px;
  overflow-y: auto;
  max-height: calc(85vh - 110px);
}
.order-preview-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid #dde2e8;
}

/* 案件管理表・実績集計表: A4横サイズを想定した表示(297:210比率の枠内に収め、
   はみ出す場合は表側だけを横スクロールさせる)。 */
.a4-landscape-sheet {
  width: 100%;
  max-width: 1400px;
  background: #fff;
  border: 1px solid #dde2e8;
  padding: 16px 20px;
  margin-bottom: 24px;
}
.management-report-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid #dde2e8;
}
.management-report-tabs a {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #dde2e8;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  background: #f4f5f7;
  color: #333;
  text-decoration: none;
}
.management-report-tabs a.active {
  background: #fff;
  font-weight: bold;
  border-bottom: 1px solid #fff;
  margin-bottom: -1px;
}
.summary-table-wrap {
  overflow-x: auto;
  margin-bottom: 24px;
}
.summary-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 1200px;
  font-size: 13px;
}
.summary-table caption {
  text-align: left;
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 6px;
  caption-side: top;
}
.summary-table th, .summary-table td {
  border: 1px solid #c8ced4;
  padding: 4px 8px;
  white-space: nowrap;
}
.summary-table th {
  background: #f4f5f7;
}
.summary-table td.row-label {
  background: #f9fafb;
  font-weight: bold;
  text-align: left;
}
.summary-table td.align-right {
  text-align: right;
}
.summary-table td.col-total, .summary-table th.col-total {
  background: #eef2f7;
  font-weight: bold;
}

/* 通常案件詳細表: 月ごとの一覧表上段に固定表示する縦計行 */
.detail-table td, .detail-table th {
  white-space: normal;
}
.detail-total-row {
  background: #fff7d6;
  font-weight: bold;
}
.detail-total-row td {
  position: sticky;
  top: 0;
}

/* 通常案件詳細表: 月単位のブロックを横に並べる。ボタンで月送りできる他、
   一覧表部自体も横・縦どちらにも自由にスクロールできる。 */
.detail-normal-scroll-controls {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.detail-normal-scroll {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  overflow: auto;
  max-height: 75vh;
  scroll-behavior: smooth;
  padding-bottom: 12px;
}
.detail-month-block {
  flex: 0 0 auto;
  width: 1300px;
  margin-bottom: 0;
}

/* 通常案件詳細表: ステータス欄に受注番号がある場合、ホバーで吹き出し表示する */
.status-tooltip {
  position: relative;
  border-bottom: 1px dotted #888;
  cursor: help;
}
.status-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%) translateY(-6px);
  background: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 20;
}
.status-tooltip::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%) translateY(2px);
  border: 5px solid transparent;
  border-top-color: #333;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 20;
}
.status-tooltip:hover::after,
.status-tooltip:hover::before {
  visibility: visible;
  opacity: 1;
}

.master-form-with-panel {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.master-form-main {
  flex: 1 1 60%;
  min-width: 0;
}
.master-list-panel {
  order: -1;
  flex: 0 0 40%;
  max-width: 40%;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 12px;
}
.master-list-panel-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.master-list-panel-jump {
  display: flex;
  gap: 6px;
}
.master-list-panel-jump-input {
  width: 8em;
}
.master-list-panel-pager {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9em;
}
.master-list-panel-pinned-wrap {
  margin-bottom: 8px;
  border: 1px solid #f0ad4e;
  border-radius: 4px;
  padding: 4px;
  background: #fff8ec;
}
.master-list-panel-body {
  max-height: 480px;
  overflow-y: auto;
  border-top: 1px solid #eee;
}
.master-list-panel-table {
  width: 100%;
  margin-bottom: 0;
}
.master-list-panel-table td {
  padding: 4px 6px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 0.9em;
}
.master-list-panel-no {
  width: 6em;
  white-space: nowrap;
  color: #666;
}
.master-list-panel-empty {
  color: #999;
  text-align: center;
}
@media (max-width: 900px) {
  .master-form-with-panel {
    flex-direction: column;
  }
  .master-list-panel {
    max-width: 100%;
    width: 100%;
  }
}