/* 画面用スタイル（SaaS版 v2：スペース版「フクビル 見積請求」のデザイン言語に統一）
   配色：背景 #f4f1ea（暖かいクリーム）／面 #fffdf8／文字 #23272e／補助 #68707c／
   罫線 #ddd6c8／基調ネイビー #274a77／危険 #b54434／角丸 10px */
:root {
  --bg: #f4f1ea;
  --surface: #fffdf8;
  --text: #23272e;
  --dim: #68707c;
  --border: #ddd6c8;
  --accent: #274a77;
  --accent-dark: #1d3a5e;
  --accent-soft: rgba(39, 74, 119, .1);
  --danger: #b54434;
  --danger-soft: #f9e9e6;
  --radius: 10px;
  --type-estimate: #2f6db3;
  --type-invoice: #2e7d4f;
  --type-receipt: #c26a1b;
  --paid: #2e7d4f;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.55; }
a { color: var(--accent); }
button:not(:disabled), a[href], select:not(:disabled), input[type="checkbox"]:not(:disabled), input[type="radio"]:not(:disabled), label.fmt-choice { cursor: pointer; }

/* ヘッダー（スペース版のタブバー：地色＋アクティブなタブはネイビー地に白文字） */
.app-header { position: sticky; top: 0; z-index: 20; background: rgba(244, 241, 234, .95); backdrop-filter: blur(6px); border-bottom: 1px solid var(--border); }
.app-header-inner { max-width: 1080px; margin: 0 auto; padding: 8px 14px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.app-title { font-size: 15px; font-weight: bold; color: var(--text); margin-right: 10px; white-space: nowrap; }
.app-company { font-size: 12px; font-weight: normal; color: var(--dim); margin-left: 6px; }
.app-header nav { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.app-header nav a { color: var(--dim); padding: 7px 12px; border-radius: 8px; text-decoration: none; font-size: 14px; line-height: 1.3; }
.app-header nav a:hover { background: var(--accent-soft); color: var(--accent); text-decoration: none; }
.app-header nav a.active { background: var(--accent); color: #fff; font-weight: 600; }
.app-header nav a.nav-right { margin-left: 6px; }
.container { max-width: 1080px; margin: 0 auto; padding: 18px 14px 48px; }
.container.editor-page { max-width: 1240px; }
h2 { margin: 8px 0 14px; font-size: 20px; }
h3 { margin: 0 0 10px; font-size: 16px; }
.doc-no { font-size: 14px; color: var(--dim); font-weight: normal; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.grid label { display: flex; flex-direction: column; font-size: 13px; color: var(--dim); gap: 4px; }
.grid label.wide { grid-column: span 2; }
input[type=text], input[type=number], input[type=date], input[type=search], input[type=password], input[type=file], select, textarea {
  padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 15px; background: var(--surface); color: var(--text); width: 100%;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
textarea { resize: vertical; }
/* 日付フィールド（v2.6）：表示テキスト欄＋カレンダーボタン＋ピッカー専用の非表示ネイティブ入力。
   ネイティブ type="date" の表示形式は OS の地域設定で決まり（ページ側では変更不可）、
   Windows の短い形式に曜日リテラル '('ddd')' が入っていると曜日が落ちて括弧だけが残り
   「2026/07/16 ()」と表示される（Chromium issue 574997087）。
   v2.4 で入れた「ピッカー印を隠す CSS」は原因の見立て違いで効果がなかったため撤去し、
   表示をテキスト欄（yyyy/mm/dd）で自前に持つ方式に変えた。 */
.date-field { position: relative; display: flex; align-items: stretch; gap: 6px; width: 100%; }
.date-field .date-text { flex: 1; min-width: 0; width: auto; }
.date-field .date-text.date-invalid { border-color: var(--danger); background: var(--danger-soft); }
.date-field .date-btn { flex: none; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 0 11px; font-size: 15px; cursor: pointer; line-height: 1; }
.date-field .date-btn:hover { background: var(--bg); }
.date-field .date-native { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: none; padding: 0; }
.field-link .date-field { width: 210px; flex: none; }
.btn { display: inline-block; background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 14px; text-decoration: none; line-height: 1.35; white-space: nowrap; }
.app-version { font-size: 11px; font-weight: normal; color: var(--dim); margin-left: 2px; }
.login-card h1 .app-version { font-size: 13px; }
.btn:hover { background: var(--bg); }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.btn.primary:hover { background: var(--accent-dark); }
.btn.small { padding: 5px 10px; font-size: 13px; border-radius: 7px; }
.btn.danger { color: var(--danger); }
.btn.danger.solid { background: var(--danger); color: #fff; border-color: var(--danger); font-weight: 600; }
.btn.block { display: block; width: 100%; text-align: center; padding: 12px; font-size: 15px; font-weight: 600; border-radius: var(--radius); }
.row-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.inline-form { display: inline-flex; gap: 6px; align-items: center; }
.inline-form > * { flex: none; } /* フォーム内のボタン・セレクトが潰れて改行しないように */
.filter-bar { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.filter-bar input[type=search] { flex: 1; min-width: 200px; }
.filter-bar select { width: auto; }

/* 一覧テーブル（カード面に載せ、見出し行は地色） */
.list-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; }
.list-table th, .list-table td { padding: 9px 10px; font-size: 14px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.list-table thead th { background: var(--bg); color: var(--dim); font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--border); }
.list-table tbody tr:last-child td, .list-table tfoot tr:last-child td { border-bottom: none; }
.list-table .num, .num { text-align: right; }
.list-table .empty { text-align: center; color: var(--dim); padding: 26px; }
.badge { display: inline-block; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 1px 9px; font-size: 12px; color: var(--dim); white-space: nowrap; }
.badge.status-on { background: var(--accent-soft); border-color: transparent; color: var(--accent); font-weight: 600; }
/* 書類種別の色分けバッジ（スペース版と同じ実色：見積＝青／請求＝緑／領収＝橙、地色に白文字） */
.type-badge { display: inline-block; border: none; border-radius: 6px; padding: 2px 9px; font-size: 12px; font-weight: bold; white-space: nowrap; color: #fff; background: #999; }
.type-badge.type-estimate { background: var(--type-estimate); }
.type-badge.type-invoice { background: var(--type-invoice); }
.type-badge.type-receipt { background: var(--type-receipt); }
.type-badge.zero { opacity: .35; }
.type-badge.big { font-size: 15px; padding: 3px 13px; border-radius: 8px; }
/* 工事ページの種別セクション見出し色 */
.card.type-card-estimate { border-top: 4px solid var(--type-estimate); }
.card.type-card-invoice { border-top: 4px solid var(--type-invoice); }
.card.type-card-receipt { border-top: 4px solid var(--type-receipt); }
/* 書類一覧：工事グループ見出し行と、グループ内行の左色帯（--gbar/--gbg は行ごとに指定） */
.list-table tr.group-row td { background: var(--gbg, #e8eef6); box-shadow: inset 5px 0 0 var(--gbar, #274a77); font-weight: bold; color: var(--accent); padding: 9px 10px 9px 13px; }
.list-table tr.group-row a { color: var(--accent); }
.list-table tr.group-row .group-client { font-weight: normal; color: var(--dim); font-size: 13px; }
.list-table tr.group-row .group-badges { float: right; }
.list-table tr.group-row .group-badges .type-badge { margin-left: 4px; }
.list-table tr.in-group td:first-child { box-shadow: inset 3px 0 0 var(--gbar, #9aa3ad); }
.actions { white-space: nowrap; }
.actions > * { margin-right: 4px; }
.notice { background: #eef4ea; border: 1px solid #b7ccb0; padding: 9px 13px; border-radius: 8px; }
.error { background: var(--danger-soft); border: 1px solid #e5b4ac; padding: 9px 13px; border-radius: 8px; color: var(--danger); }
.hint { font-size: 12px; color: var(--dim); }

/* ログイン（背景は地色、カードは面色＋角丸10px。見出しはネイビー） */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--bg); }
.login-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 28px; width: min(380px, 92vw); box-shadow: 0 4px 18px rgba(35, 39, 46, .07); }
.login-card h1 { margin: 0 0 4px; font-size: 22px; color: var(--accent); }
.login-sub { color: var(--dim); margin: 0 0 16px; }
.login-card label { display: block; font-size: 13px; color: var(--dim); margin-bottom: 12px; }
.login-card input { margin-top: 4px; }
.login-card .btn { width: 100%; padding: 10px; }

/* 編集画面 */
.save-state { font-size: 13px; color: var(--paid); margin-right: 10px; }
.lines-table { width: 100%; border-collapse: collapse; }
.lines-table th, .lines-table td { border-bottom: 1px solid #e9e2d2; padding: 5px; font-size: 14px; }
.lines-table input, .lines-table textarea { border: 1px solid transparent; padding: 6px; background: transparent; }
.lines-table input:focus, .lines-table textarea:focus { border-color: var(--accent); outline: none; background: #fff; }
.lines-table .qty, .lines-table .unit, .lines-table .price { width: 110px; }
.lines-table .amount { width: 130px; }
.lines-table .drag { width: 26px; cursor: grab; color: #b3ab99; text-align: center; }
.section-row { background: #eef1f6; font-weight: bold; }
.section-row input { background: transparent; font-weight: bold; }
.totals { max-width: 460px; margin: 16px 0 0 auto; }
.totals > div { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid #e9e2d2; gap: 8px; }
.totals input[type=number] { width: 110px; background: #fff; }
.totals .grand { font-size: 18px; border-bottom: 3px double var(--accent); }
.tax-manual { font-size: 12px; color: var(--dim); }
label.wide { display: flex; flex-direction: column; font-size: 13px; color: var(--dim); gap: 4px; }
.field-link { padding: 8px 0; font-size: 14px; }

/* 印刷イメージに寄せた編集シート（白い用紙＋影。シート内は印刷書式の世界のまま） */
.sheet-edit { background: #fff; border: 1px solid #ddd6c8; border-radius: 4px; box-shadow: 0 2px 12px rgba(35, 39, 46, .12); padding: 22px 22px 26px; margin-bottom: 16px; }
.sheet-band { background: #274a77; color: #fff; font-size: 20px; letter-spacing: .8em; padding: 5px 14px 5px calc(14px + .8em); display: inline-block; margin-bottom: 8px; border-radius: 2px; }
/* 見積書シート見出し（印刷の表紙と同じ並び） */
.sheet-est-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; border-bottom: 3px double #274a77; padding-bottom: 8px; margin-bottom: 12px; }
.sheet-est-title { font-size: 24px; font-weight: bold; letter-spacing: .3em; font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; }
.sheet-est-meta { text-align: right; font-size: 13px; color: #333; line-height: 1.5; }
.sheet-est-parties { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.sheet-est-client { font-size: 16px; font-weight: bold; border-bottom: 1px solid #333; padding-bottom: 2px; }
.sheet-est-company { font-size: 13px; font-weight: bold; white-space: nowrap; }
.sheet-est-lead { font-size: 13px; color: #333; margin: 8px 0 12px; }
/* 見積書シート見出しの金額帯と件名ブロック（印刷の並びに合わせる） */
.sheet-est-total { border: 2px solid #274a77; background: #f2f5fa; border-radius: 10px; padding: 8px 12px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; }
.sheet-est-total span { font-size: 13px; font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; }
.sheet-est-total strong { font-size: 20px; }
.sheet-est-total small { color: #444; }
.sheet-est-subject { font-size: 13px; color: #333; margin-bottom: 12px; font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; }
.sheet-est-subject p { margin: 2px 0; }
.sheet-est-subject .sheet-est-subject-line { font-size: 15px; color: #111; }
.sheet-meta { text-align: right; font-size: 13px; color: #333; margin-bottom: 6px; }
.sheet-company { text-align: right; font-size: 16px; font-weight: bold; margin-bottom: 8px; }
.sheet-seals { white-space: nowrap; margin-left: 6px; }
.sheet-seal { width: 72px; height: 72px; object-fit: contain; vertical-align: middle; }
.row-add-buttons { display: flex; flex-wrap: wrap; gap: 4px; }
/* 明細表の下の追加バー：合計欄の直前に置き、明細のスクロール中は画面下端に追随（sticky）して
   視界から消えたら自然に静止する。印刷は print.php 側なのでこのバーは出ない */
.row-add-bar { position: sticky; bottom: 10px; z-index: 5; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 12px; padding: 9px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 3px 12px rgba(35, 39, 46, .14); }
.row-add-label { font-size: 13px; font-weight: 600; color: var(--dim); white-space: nowrap; }
@media (max-width: 640px) {
  .row-add-bar { bottom: 6px; padding: 8px 10px; }
  .row-add-label { display: none; }
}
.lines-table.printlike { font-size: 14px; }
.lines-table.printlike th, .lines-table.printlike td { border: 1px solid #7d90b2; padding: 4px; }
.lines-table.printlike thead th { background: #274a77; color: #fff; font-weight: normal; text-align: center; font-size: 12px; }
.lines-table.printlike .no { width: 40px; text-align: center; }
.lines-table.printlike .note { width: 170px; }
.lines-table.printlike td.no { color: #555; background: #f7f9fc; }
.kind-section1 { background: #dbe4f2; font-weight: bold; }
.kind-section1 input, .kind-section1 textarea { background: transparent; font-weight: bold; }
.kind-section2 { background: #eef1f6; font-weight: bold; }
.kind-section2 input, .kind-section2 textarea { background: transparent; font-weight: bold; }
.kind-section2 .ln-name { margin-left: 14px; width: calc(100% - 14px); }
.kind-comment { color: #666; font-style: italic; }
.kind-comment input, .kind-comment textarea { background: transparent; font-style: italic; }
.line-row:not(.kind-item) .ln-qty, .line-row:not(.kind-item) .ln-unit, .line-row:not(.kind-item) .ln-price { visibility: hidden; }
.totals select { width: auto; display: inline-block; padding: 4px; font-size: 13px; background: #fff; }
.sheet-edit .totals { max-width: 560px; }
@media (max-width: 640px) {
  .grid label.wide { grid-column: span 1; }
  .lines-table .qty, .lines-table .unit, .lines-table .price { width: 74px; }
  .actions { white-space: normal; }
}

/* ===== SaaS版 ===== */
/* 関連書類の切り替えバー */
.related-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 9px 12px; margin-bottom: 14px; }
.related-project { font-weight: bold; margin-right: 4px; }
.related-chip { border: 1px solid var(--border); border-radius: 999px; padding: 3px 11px; font-size: 13px; text-decoration: none; color: var(--text); background: var(--bg); cursor: pointer; }
.related-chip.type-estimate { border-color: var(--type-estimate); }
.related-chip.type-invoice { border-color: var(--type-invoice); }
.related-chip.type-receipt { border-color: var(--type-receipt); }
.related-chip.current { font-weight: bold; color: #fff; border-color: transparent; }
.related-chip.current.type-estimate { background: var(--type-estimate); }
.related-chip.current.type-invoice { background: var(--type-invoice); }
.related-chip.current.type-receipt { background: var(--type-receipt); }
/* 入金バッジ（スペース版：入金済み＝緑地に白文字／期限超過＝危険色／未入金＝枠のみ） */
.pay-badge { display: inline-block; border: 1px solid transparent; border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: bold; white-space: nowrap; }
.pay-paid { background: var(--paid); border-color: var(--paid); color: #fff; }
.pay-unpaid { background: transparent; border-color: var(--border); color: var(--dim); font-weight: 500; }
.pay-overdue { background: var(--danger); border-color: var(--danger); color: #fff; }
.pay-unpaid-text { color: var(--danger); font-weight: bold; }
/* 工事カード：色帯（左の色バー＋宛先は工事色を暗くした帯に白文字） */
.project-card { border-left: 5px solid var(--pbar, #8c6a3f); }
.project-head { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.project-title { font-size: 17px; font-weight: bold; margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.project-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--pbar, #8c6a3f); flex: none; }
.pinned-tag { font-size: 12px; font-weight: 600; color: var(--accent); }
.done-tag { font-size: 12px; font-weight: 600; color: #fff; background: var(--dim); border-radius: 999px; padding: 1px 9px; }
.client-band { display: inline-block; background: var(--pband, #3d5a80); color: #fff; border-radius: 6px; padding: 2px 9px; font-size: 14px; font-weight: 600; max-width: 100%; }
.project-meta { color: var(--dim); font-size: 14px; }
.flow-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 10px; }
.flow-arrow { color: var(--dim); font-size: 12px; }
.flow-note { font-size: 11px; color: var(--dim); margin-left: 4px; }
.project-docs { position: relative; margin-top: 14px; }
.project-docs::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--pbar, #8c6a3f); opacity: .45; }
.doc-list { list-style: none; margin: 0; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 8px; }
/* 書類行カード（工事カード内・書類一覧ページ共通） */
.doc-row { position: relative; background: var(--bg); border: 1px solid var(--border); border-left: 4px solid var(--tcolor, #999); border-radius: 8px; padding: 10px 12px; }
.doc-dot { position: absolute; left: -18px; top: 16px; width: 10px; height: 10px; border-radius: 50%; background: var(--pbar, #8c6a3f); box-shadow: 0 0 0 2px var(--surface); }
.doc-row-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.doc-row-top .doc-no-cell { font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
.doc-row-top .doc-date { font-size: 12px; color: var(--dim); }
.doc-row-top .status-pill { margin-left: auto; }
.doc-subject { margin: 6px 0 0; font-size: 14px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-client { margin: 6px 0 0; font-size: 13px; color: var(--dim); }
.doc-row-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.doc-total { font-size: 16px; font-weight: bold; font-variant-numeric: tabular-nums; white-space: nowrap; }
.doc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border-top: 1px solid var(--border); margin-top: 9px; padding-top: 9px; }
.doc-actions select { width: auto; padding: 5px 6px; font-size: 13px; }
.doc-actions .spacer { margin-left: auto; display: inline-flex; gap: 6px; }
.status-pill { display: inline-block; border-radius: 999px; padding: 1px 9px; font-size: 12px; border: 1px solid var(--border); color: var(--dim); background: var(--surface); white-space: nowrap; }
.status-pill.on { background: var(--accent-soft); border-color: transparent; color: var(--accent); font-weight: 600; }
/* フィルタのピル（種類切り替え） */
.pill-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pill-tab { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--dim); border-radius: 999px; padding: 6px 13px; font-size: 13px; text-decoration: none; line-height: 1.3; }
.pill-tab .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pill-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.legend { font-size: 12px; color: var(--dim); display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 14px; align-items: center; }
.legend .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.unpaid-summary { font-size: 12px; color: var(--dim); margin: 0 0 12px; }
.unpaid-summary strong { color: var(--text); }
.unpaid-summary .overdue { color: var(--danger); font-weight: 600; }
.section-label { font-size: 14px; font-weight: 600; color: var(--dim); margin: 22px 0 8px; }
.archive-toggle { display: block; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 16px; font-size: 14px; font-weight: 500; color: var(--text); text-decoration: none; }
.archive-toggle .hint { margin-left: 8px; }
.empty-box { border: 1px dashed var(--border); border-radius: var(--radius); padding: 40px 16px; text-align: center; color: var(--dim); font-size: 14px; background: transparent; margin-bottom: 16px; }
.memo-box { background: var(--bg); border-radius: 8px; padding: 9px 12px; margin-top: 12px; }
.memo-box .memo-label { font-size: 12px; font-weight: 500; color: var(--dim); margin: 0 0 2px; }
.memo-box p { margin: 0; font-size: 14px; white-space: pre-wrap; }
.card-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.add-doc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.add-doc-grid .btn { text-align: center; border-color: var(--accent); color: var(--accent); font-weight: 500; }
.mini-form { margin-top: 12px; }
/* 複写パネル */
.copy-panel { margin-top: 14px; border-top: 1px dashed var(--border); padding-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; }
.copy-panel select { width: auto; max-width: 460px; }
.inline-check { font-size: 13px; display: inline-flex; gap: 4px; align-items: center; color: var(--dim); }
.inline-check input { width: auto; }
/* 編集レイアウト：左に項目一覧ツリー、右に編集シート */
.editor-layout { display: flex; gap: 16px; align-items: flex-start; }
.outline-panel { width: 248px; flex: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 8px; position: sticky; top: 64px; max-height: calc(100vh - 84px); overflow-y: auto; }
.outline-head { font-weight: bold; font-size: 13px; margin: 0 4px 8px; }
.outline-row { display: flex; align-items: flex-start; gap: 2px; width: 100%; }
.outline-row.outline-hidden { display: none; }
.outline-jump { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; background: none; border: none; border-radius: 6px; padding: 5px 6px; font-size: 13px; cursor: pointer; text-align: left; color: var(--text); }
.outline-jump:hover { background: var(--bg); }
/* ツリーの折りたたみトグル（スペース版 OutlinePanel と同じ −/＋ ボタン） */
.outline-toggle { flex: none; width: 18px; height: 18px; margin-top: 3px; padding: 0; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--dim); font-size: 11px; line-height: 1; cursor: pointer; text-align: center; }
.outline-toggle-spacer { flex: none; width: 18px; }
.outline-chip { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.outline-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.outline-row.kind-section1 .outline-name { font-weight: bold; }
.outline-row.kind-section2 .outline-name { font-weight: bold; }
.outline-amount { color: var(--dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.editor-layout .sheet-edit { flex: 1; min-width: 0; padding: 22px 24px 26px; }
.line-row.row-flash { outline: 3px solid #f0b429; outline-offset: -1px; }
.wareki-hint { font-size: 12px; color: var(--dim); }
/* 編集シートの列幅（v2.4で見直し：数量を狭く、単位を広く、操作列は挿入セレクトが入る幅に）
   変更前→変更後：数量 118px→84px／単位 62px→84px（3文字まで見える幅）／単価 96px→110px
   （カンマ区切り表示のため）／操作 44px→108px。No. は 40px→36px。品名は残り全部。 */
.lines-table.printlike { table-layout: fixed; }
.lines-table.printlike th.drag { width: 26px; }
.lines-table.printlike th.no { width: 36px; }
.lines-table.printlike th.qty { width: 84px; }
.lines-table.printlike th.unit { width: 84px; }
.lines-table.printlike th.price { width: 110px; }
.lines-table.printlike th.amount { width: 110px; }
.lines-table.printlike th.note { width: 120px; }
.lines-table.printlike th.ops { width: 108px; }
/* 編集シートの文字配置（スペース版に合わせる：No.・数量・単位は中央、単価・金額は右、品名・備考は左） */
.lines-table.printlike td.no { text-align: center; }
.lines-table .ln-qty { text-align: center; }
.lines-table .ln-unit { text-align: center; }
.lines-table .ln-price { text-align: right; }
/* 行の操作欄：この行の下への挿入セレクト＋削除ボタン */
.row-ops { display: flex; align-items: center; gap: 4px; }
.row-ops .ln-insert { flex: 1; min-width: 0; width: auto; padding: 4px 2px; font-size: 11px; }
.row-ops .ln-del { flex: none; }
/* ===== v2.5：品名の改行表示／印刷ボタンの配置／基本情報の折りたたみ ===== */
/* 品名欄は複数行テキストエリアにして、長い品名も改行して全文字が見えるようにする。
   高さは editor.js の fitName が内容に合わせて自動調整する（resize・スクロールバーは使わない） */
.lines-table.printlike td { vertical-align: top; }
.lines-table textarea.ln-name { resize: none; overflow: hidden; width: 100%; line-height: 1.45; white-space: pre-wrap; word-break: break-word; font-size: 14px; display: block; }
.ln-name-wrap { position: relative; }
/* 品目マスタ候補（textarea では datalist が使えないため専用ドロップダウンで出す） */
.ln-suggest { position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 40; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 18px rgba(35, 39, 46, .18); max-height: 224px; overflow-y: auto; padding: 4px; }
.ln-suggest button { display: block; width: 100%; text-align: left; padding: 7px 10px; background: none; border: none; border-radius: 6px; font-size: 13px; color: var(--text); cursor: pointer; }
.ln-suggest button:hover, .ln-suggest button.active { background: var(--accent-soft); }
/* 編集画面のタイトル行：印刷プレビューを目立つ塗りボタンで常設（スペース版と同じ配置） */
.editor-title-actions { display: flex; align-items: center; gap: 10px; }
.print-btn-top { font-size: 15px; padding: 10px 20px; box-shadow: 0 2px 8px rgba(39, 74, 119, .25); }
/* 下部の行追加バー（sticky）にも印刷導線を置き、スクロール中でも印刷へ進めるようにする */
.row-add-print { margin-left: auto; flex: none; }
/* 書類の基本情報カードの折りたたみ（ツリーと同じ −/＋ トグル。表示だけの状態で保存には影響しない） */
.doc-meta-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.doc-meta-card:has(#doc-meta-body.doc-meta-hidden) .doc-meta-head { margin-bottom: 0; }
.doc-meta-toggle { flex: none; width: 24px; height: 24px; padding: 0; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--dim); font-size: 14px; line-height: 1; cursor: pointer; text-align: center; }
.doc-meta-title { font-weight: bold; font-size: 15px; }
#doc-meta-body.doc-meta-hidden { display: none; }
/* 書式サムネイル */
.fmt-picker { display: flex; gap: 14px; flex-wrap: wrap; margin: 6px 0 10px; }
.fmt-choice { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; font-size: 13px; color: var(--text); }
.fmt-thumb { width: 74px; height: 92px; border: 1px solid var(--border); border-radius: 4px; background: #fff; padding: 7px; display: flex; flex-direction: column; gap: 5px; }
.fmt-choice input:checked + .fmt-thumb { outline: 2px solid var(--accent); outline-offset: 1px; }
.fmt-thumb .ft-title { height: 8px; border-radius: 2px; background: var(--ta, #274a77); width: 70%; }
.fmt-thumb .ft-band { height: 14px; border-radius: 4px; background: var(--tb, #dbe4f2); border: 1.5px solid var(--ta, #274a77); }
.fmt-thumb .ft-lines { flex: 1; background: repeating-linear-gradient(#fff, #fff 6px, #e3ddcf 6px, #e3ddcf 7px); }
.fmt-thumb.fmt-navy { --ta: #274a77; --tb: #dbe4f2; }
.fmt-thumb.fmt-simple { --ta: #333; --tb: #fff; }
.fmt-thumb.fmt-classic { --ta: #111; --tb: #f3ead8; }
.fmt-thumb.fmt-orange { --ta: #c05a11; --tb: #fbe3cd; }
.fmt-thumb.fmt-receipt_simple { --ta: #274a77; --tb: #fff; }
/* 自社設定：サンプル見積書プレビュー */
.sample-sheet { border: 1px solid #ddd6c8; border-radius: 4px; box-shadow: 0 2px 12px rgba(35, 39, 46, .12); background: #fff; padding: 18px 20px; margin-top: 8px; overflow: hidden; }
.ss-head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 3px double #274a77; padding-bottom: 6px; }
.sample-sheet.fmt-simple .ss-head { border-bottom-color: #333; }
.sample-sheet.fmt-classic .ss-head { border-bottom-color: #111; }
.sample-sheet.fmt-orange .ss-head { border-bottom-color: #c05a11; }
.ss-title { font-size: 22px; font-weight: bold; letter-spacing: .3em; }
.ss-meta { text-align: right; font-size: 12px; line-height: 1.5; }
.ss-parties { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; margin-top: 12px; }
.ss-client { flex: 1; min-width: 0; }
.ss-client-name { font-size: 16px; font-weight: bold; border-bottom: 1px solid #333; display: inline-block; margin: 0; padding-bottom: 2px; }
.ss-client-addr { font-size: 12px; color: #333; margin: 4px 0 0; }
.ss-lead { font-size: 13px; margin: 12px 0 0; }
.ss-amount { border: 2px solid #274a77; background: #f7f9fc; border-radius: 10px; padding: 7px 12px; margin: 10px 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sample-sheet.fmt-simple .ss-amount { border-color: #333; }
.sample-sheet.fmt-classic .ss-amount { border-color: #111; background: #f3ead8; }
.sample-sheet.fmt-orange .ss-amount { border-color: #c05a11; }
.ss-amount strong { font-size: 20px; }
.ss-amount small { color: #444; }
.ss-terms { border-collapse: collapse; font-size: 13px; }
.ss-terms th, .ss-terms td { border: 1px solid #999; padding: 4px 8px; text-align: left; }
.ss-terms th { background: #eef1f6; white-space: nowrap; }
.ss-note { font-size: 11px; color: #999; margin-top: 8px; }
.company-block-live { position: relative; min-width: 250px; font-size: 12px; }
.company-block-live .cb-name-row { display: flex; align-items: flex-start; }
.company-block-live .cb-name { font-weight: bold; display: inline-block; } /* 会社名の個別位置（transform）を効かせるため */
.company-block-live.logo-left-on { display: flex; align-items: flex-start; gap: 10px; }
.company-block-live .cb-main { flex: 1; min-width: 0; }
.company-block-live .cb-logo.left { flex: none; }
.company-block-live .cb-line { padding: 1px 3px; border-radius: 3px; white-space: nowrap; }
.company-block-live .cb-line.selected, .company-block-live .cb-seal.selected { outline: 2px solid #f0b429; }
.company-block-live .cb-seal { flex: none; }
.company-block-live .cb-logo { flex: none; object-fit: contain; }
.company-block-live .cb-logo.selected { outline: 2px solid #f0b429; }
.company-block-live .cb-logo.free { position: absolute; left: 0; top: 0; z-index: 3; }
.sheet-logo { width: 1.9em; height: 1.9em; object-fit: contain; vertical-align: middle; margin-right: 6px; }
.sheet-company-name { display: inline-block; } /* 会社名の個別位置（transform）を効かせるため */
.sheet-company-left { display: inline-flex; align-items: flex-start; gap: 6px; }
.sheet-logo-left { object-fit: contain; flex: none; }
.sheet-company-lines { display: inline-block; }
.layout-controls { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 14px; }
.lc-group { flex: 1; min-width: 260px; }
.lc-group h4 { margin: 0 0 8px; }
.lc-group label { display: block; font-size: 13px; color: var(--dim); margin-bottom: 10px; }
.order-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px dashed #e9e2d2; }
.order-row span { flex: 1; font-size: 14px; }
/* 売上表 */
.sales-total td { font-weight: bold; background: var(--bg); }
/* 売上表の月別グラフ（請求合計＝入金済み＋未入金の積み上げ棒） */
.sales-chart { display: flex; align-items: stretch; gap: 4px; height: 200px; padding: 12px 10px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-bottom: 6px; }
.sales-chart .sc-col { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; height: 100%; }
.sales-chart .sc-val { font-size: 10px; color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums; height: 14px; }
.sales-chart .sc-track { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.sales-chart .sc-bar { width: 68%; max-width: 46px; display: flex; flex-direction: column; border-radius: 4px 4px 0 0; overflow: hidden; }
.sales-chart .sc-paid { background: var(--paid); width: 100%; }
.sales-chart .sc-unpaid { background: #e0a458; width: 100%; }
.sales-chart .sc-month { font-size: 11px; color: var(--dim); width: 100%; text-align: center; border-top: 1px solid var(--border); padding-top: 4px; margin-top: 0; }
.sales-legend { font-size: 12px; color: var(--dim); display: flex; gap: 14px; margin: 0 0 14px; align-items: center; }
.sales-legend .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
tr.row-empty { color: #b3ab99; }
/* 運営者：発行控え（1回だけ表示） */
.issued-box { border-color: var(--accent); border-width: 2px; }
.issued-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 8px; }
.issued-row label { display: flex; flex-direction: column; font-size: 13px; color: var(--dim); gap: 4px; flex: 1; min-width: 200px; }
.issued-row input[readonly] { font-family: ui-monospace, "SF Mono", Consolas, monospace; background: #fff; }
@media (max-width: 900px) {
  .editor-layout { flex-direction: column; }
  .outline-panel { width: 100%; position: static; max-height: 220px; }
  .add-doc-grid { grid-template-columns: 1fr; }
  .doc-subject { white-space: normal; }
}
@media (max-width: 640px) {
  .app-header-inner { padding: 8px 10px; }
  .app-title { width: 100%; margin-right: 0; }
  .list-table { display: block; overflow-x: auto; }
}