/**
 * テイカレスト 見積・請求管理 - 見積管理画面（/staff/quotes）スタイル（Phase 2.0 / 2.3 / 2.4 / 2.6）
 *
 * スタッフポータルの落ち着いたトーン（assets/staff-portal.css）を継承し、
 * 見積一覧・作成/編集フォーム・確認画面に必要な部品を追加する。
 * 専用テンプレート上で staff-portal.css に依存して読み込まれる前提。
 *
 * Phase 2.3 で、一覧の強調・キーワード検索と、社内確認用の見積確認画面
 * （社内確認用バナー・ヘッダー部・明細補足・社内メモの区別）のスタイルを追加した。
 * Phase 2.4 で見積種別バッジ・バナー・種別選択・商品選択のスタイルを追加した。
 * Phase 2.6 で単価・単位の readonly 表現と、明細値引き・見積全体値引き・値引き内訳のスタイルを追加した。
 * Phase 2.6.1 で金額（税抜）列の最小幅を確保し、金額が「¥1」のように欠けて見える不具合を修正した。
 */

/* ---- 共通：見出し補足・メタ情報 ---- */

.takearest-portal__main .ta-q-meta {
	margin: 0 0 18px;
	font-size: 14px;
	color: var(--ta-ink-soft);
}

.takearest-portal__main .ta-q-meta strong {
	color: var(--ta-ink);
	letter-spacing: 0.02em;
}

/* ---- ステータスバッジ ---- */

.ta-q-status {
	display: inline-block;
	padding: 2px 12px;
	font-size: 12px;
	font-weight: 600;
	border-radius: 999px;
	background: #ece5d8;
	color: var(--ta-ink-mute);
}

.ta-q-status--draft {
	background: #e7efe9;
	color: var(--ta-accent-dark);
}

/* ---- 見積一覧テーブル ---- */

.ta-q-tablewrap {
	margin: 8px 0 0;
	overflow-x: auto;
}

.ta-q-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--ta-surface);
	border: 1px solid var(--ta-line);
	border-radius: 12px;
	overflow: hidden;
	font-size: 14px;
}

.ta-q-table th,
.ta-q-table td {
	padding: 12px 14px;
	text-align: left;
	border-bottom: 1px solid var(--ta-line-soft);
	vertical-align: top;
}

.ta-q-table thead th {
	background: var(--ta-bg-soft);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ta-ink-soft);
	white-space: nowrap;
}

.ta-q-table tbody tr:last-child td {
	border-bottom: none;
}

.ta-q-table .ta-q-num {
	text-align: right;
	white-space: nowrap;
}

.ta-q-actions {
	white-space: nowrap;
}

.ta-q-link {
	display: inline-block;
	margin-right: 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ta-accent-dark);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s ease;
}

.ta-q-link:last-child {
	margin-right: 0;
}

.ta-q-link:hover,
.ta-q-link:focus {
	border-bottom-color: var(--ta-accent);
}

.ta-q-empty {
	margin: 8px 0 0;
	padding: 26px 22px;
	background: var(--ta-bg-soft);
	border: 1px dashed var(--ta-line);
	border-radius: 12px;
	color: var(--ta-ink-soft);
	font-size: 14px;
}

.ta-q-empty p {
	margin: 0;
}

/* ---- フォーム全体 ---- */

.ta-q-form {
	max-width: none;
	margin-top: 4px;
}

.ta-q-panel {
	margin: 0 0 18px;
}

/* 2カラムの入力グリッド（スマホでは1カラム）。 */
.ta-q-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 18px;
}

.ta-q-field--full {
	grid-column: 1 / -1;
}

.ta-q-field {
	margin: 0 0 16px;
}

/* ---- 基本情報のサブブロック（Phase 3.4-A：意味のまとまりで区切り、帳票表示/社内管理を示す） ----
   既存の入力欄（.ta-q-field / .ta-q-grid）はそのまま使い、周囲を枠と小見出しで囲むだけ。
   左の色帯で「見積書に表示（緑）」「社内管理用（紫）」を見た目で区別する。スマホ幅でも
   .ta-q-grid が1カラムに戻るため横スクロールにはならない。 */
.ta-q-subblock {
	margin: 0 0 16px;
	padding: 14px 16px 4px;
	border: 1px solid var(--ta-line-soft, #ece5d8);
	border-left: 3px solid var(--ta-line, #e3dccd);
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.016);
}

.ta-q-subblock:last-child {
	margin-bottom: 0;
}

.ta-q-subblock--doc {
	border-left-color: var(--ta-accent, #2f5d57);
}

.ta-q-subblock--internal {
	border-left-color: #7a72a6;
}

.ta-q-subblock__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 4px;
}

.ta-q-subblock__title {
	margin: 0;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--ta-ink, #233038);
}

.ta-q-subblock__badge {
	display: inline-block;
	padding: 1px 9px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.8;
	background: #edeae2;
	color: #4a463d;
}

.ta-q-subblock__badge--doc {
	background: #e4efe6;
	color: #2c5b45;
}

.ta-q-subblock__badge--internal {
	background: #ecebf4;
	color: #4b4576;
}

.ta-q-subblock__note {
	margin: 0 0 12px;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--ta-ink-soft, #5c6a6a);
}

/* ---- 宛先詳細・連絡先の折りたたみ（Phase 3.4-C：ネイティブ <details open>。JS・状態保存なし） ----
   .ta-q-subblock の枠をそのまま使い、見出しを <summary> にして開閉できるようにする。初期表示は開いたまま。
   ネイティブの開閉マーカーは環境差が大きいので消し、CSS だけの三角キャレットで開閉方向を示す。 */
.ta-q-subblock__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	cursor: pointer;
	list-style: none;
	-webkit-user-select: none;
	user-select: none;
}

/* Safari/Chrome の既定マーカー（三角）を消す（下の ::before で置き換える）。 */
.ta-q-subblock__summary::-webkit-details-marker {
	display: none;
}

/* CSS だけの開閉キャレット。閉＝右向き／開＝下向き。派手な装飾はしない。 */
.ta-q-subblock__summary::before {
	content: "";
	flex: 0 0 auto;
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 6px solid var(--ta-ink-soft, #5c6a6a);
	transition: transform 0.15s ease;
}

.ta-q-subblock--details[open] > .ta-q-subblock__summary::before {
	transform: rotate(90deg);
}

.ta-q-subblock__summary:hover .ta-q-subblock__title,
.ta-q-subblock__summary:focus-visible .ta-q-subblock__title {
	text-decoration: underline;
}

/* キーボード操作時にクリック（開閉）範囲が分かるようフォーカスを明示する。 */
.ta-q-subblock__summary:focus-visible {
	outline: 2px solid var(--ta-accent, #2f5d57);
	outline-offset: 2px;
	border-radius: 6px;
}

.ta-q-subblock__summary-hint {
	font-size: 11.5px;
	font-weight: 400;
	color: var(--ta-ink-soft, #5c6a6a);
}

/* 展開時の中身。既存の .ta-q-grid をそのまま内包するので追加の枠・余白は持たせない。 */
.ta-q-subblock__body {
	margin: 0;
}

/* ---- 備考パネルの帳票表示/社内管理バッジ行（Phase 3.4-B：基本情報サブブロックとトーンを揃える） ----
   顧客向け備考＝「見積書に表示」、社内メモ＝「社内管理用」をバッジと一文で示す。 */
.ta-q-notehead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 10px;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--ta-ink-soft, #5c6a6a);
}

.ta-q-notehead__text {
	flex: 1 1 auto;
	min-width: 0;
}

/* ---- 保存ボタン直前の補足（Phase 3.4-B：何が保存され、どこに表示されるか） ---- */
.ta-q-save-note {
	margin: 0 0 12px;
	max-width: 720px;
}

/* 備考・社内メモなどのテキストエリアは縦方向のみリサイズ可能にする。
   横幅は崩さず、入力量に応じて高さを広げられるよう min-height を確保する。 */
.ta-q-textarea {
	width: 100%;
	min-height: 84px;
	resize: vertical;
	font-family: inherit;
	line-height: 1.6;
}

/* 顧客向け備考の文字数カウンター（現在文字数 / 上限）。textarea の直下に右寄せで置く。 */
.ta-q-counter {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	color: var(--ta-ink-mute);
	text-align: right;
}

.ta-q-counter__current {
	font-weight: 700;
	color: var(--ta-ink-soft);
}

/* 上限を超えた場合は赤系で気づけるようにする（サーバ側の上限チェックは別途維持）。 */
.ta-q-counter.is-over {
	color: #8a3b2f;
}

.ta-q-counter.is-over .ta-q-counter__current {
	color: #8a3b2f;
}

/* ---- 明細 ---- */

.ta-q-items {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* 明細カード（Phase 2.2 で軽量化）：
   背景をパネル（白に近い surface）より少しだけ濃い淡色にして、card の境界は保ちつつ
   従来の bg-soft より軽く見せる。上下余白も少し詰める。入力欄の可読性は維持する。 */
.ta-q-item {
	padding: 10px 14px 4px;
	background: #f7f3ea;
	border: 1px solid var(--ta-line-soft);
	border-radius: 10px;
}

/* 操作ツールバー（並び替え・削除）。明細カード右上に寄せる。
   JSが無効なときは操作できないため隠し、.js のときだけ表示する。 */
.ta-q-item__tools {
	display: none;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin-bottom: 8px;
}

.js .ta-q-item__tools {
	display: flex;
}

/* 並び替えボタン（上へ／下へ）：控えめな補助操作。 */
.ta-q-move {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 4px 11px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ta-ink-soft);
	background: var(--ta-surface);
	border: 1px solid var(--ta-line);
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ta-q-move:hover:not(:disabled),
.ta-q-move:focus-visible:not(:disabled) {
	background: var(--ta-bg-soft);
	color: var(--ta-ink);
	border-color: var(--ta-accent);
}

.ta-q-move:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.ta-q-move__icon {
	font-size: 13px;
	line-height: 1;
}

/* 1明細の1行目：品目名・数量・単位・単価・金額を横並びにする（税率欄はPhase 2.6で撤去）。
   単価・金額（税抜）の列は桁数の多い金額（例：¥1,608,000）が欠けないよう最小幅を確保する（Phase 2.6.1）。
   品目名列は minmax(0, …) で縮められるようにし、金額列の最小幅を優先する。 */
.ta-q-item__main {
	display: grid;
	grid-template-columns: minmax(0, 1.8fr) 0.7fr 0.8fr minmax(96px, 1fr) minmax(120px, 1.1fr);
	gap: 0 14px;
	align-items: start;
}

/* 1明細の2行目：説明（備考扱い）を横幅いっぱいに広げる。 */
.ta-q-item__desc {
	margin-top: 2px;
}

.ta-q-item__desc .ta-q-field--desc {
	margin-bottom: 4px;
}

.ta-q-item .ta-q-field {
	margin-bottom: 10px;
}

.ta-q-item .takearest-portal__input {
	padding: 9px 10px;
	font-size: 14px;
}

/* 金額（税抜）プレビューのセル。桁数が多くても欠けないよう列を縮めすぎない（Phase 2.6.1）。 */
.ta-q-field--line {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.ta-q-line {
	display: inline-block;
	padding: 9px 4px;
	font-size: 14px;
	font-weight: 700;
	color: var(--ta-ink);
	text-align: right;
	/* 金額が途中で折り返して「¥1」のように欠けて見えるのを防ぐ（Phase 2.6.1）。 */
	white-space: nowrap;
}

/* 削除（危険操作）：控えめな赤系の枠線ボタン。並び替えボタンと同じツールバーに置く。 */
.ta-q-remove {
	padding: 4px 12px;
	font-size: 12.5px;
	font-weight: 600;
	color: #8a3b2f;
	background: transparent;
	border: 1px solid #e6c8c0;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.ta-q-remove:hover,
.ta-q-remove:focus-visible {
	background: #f6e7e3;
}

.ta-q-additem {
	margin: 14px 0 0;
}

.ta-q-addbtn {
	cursor: pointer;
	font-size: 13.5px;
}

.ta-q-addbtn::before {
	content: "+";
	margin-right: 6px;
	font-weight: 700;
}

/* JSが無効な場合は行追加ボタンを隠す（押しても増やせないため）。 */
.ta-q-addbtn {
	display: none;
}

.js .ta-q-addbtn {
	display: inline-flex;
}

/* ---- 合計プレビュー ---- */

.ta-q-totals {
	margin: 18px 0 0;
	margin-left: auto;
	max-width: 340px;
	padding: 16px 18px;
	background: var(--ta-surface);
	border: 1px solid var(--ta-line);
	border-radius: 10px;
}

.ta-q-totals__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	font-size: 14px;
	color: var(--ta-ink-soft);
	padding: 4px 0;
}

.ta-q-totals__row span:last-child {
	font-weight: 600;
	color: var(--ta-ink);
}

.ta-q-totals__row--total {
	margin-top: 6px;
	padding-top: 10px;
	border-top: 1px solid var(--ta-line-soft);
	font-size: 16px;
}

.ta-q-totals__row--total span:last-child {
	font-weight: 700;
	color: var(--ta-accent-dark);
}

.ta-q-totals .takearest-portal__hint {
	margin-top: 10px;
}

/* ---- 社内メモ（社内のみ）を視覚的に区別する ---- */

.ta-q-internal {
	margin-top: 4px;
	padding: 14px 14px 2px;
	background: #f1ece1;
	border: 1px dashed var(--ta-line);
	border-radius: 10px;
}

/* ---- フォーム下部アクション ---- */

.ta-q-formactions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

/* ---- 操作ボタンのサイズ統一（Phase 2.7.1） ----
   同じ操作列（フォーム下部・確認画面・編集履歴・種別選択・保存後導線）に並ぶ
   primary／secondary ボタンの高さ・padding・font-size・line-height・border-radius・
   min-width を揃える。色（primary は塗り、secondary は枠線）は保ちつつ、サイズ感だけ
   統一して「見積一覧へ戻る」と他のボタンが大小バラバラに見えないようにする。
   PC幅では横並び、狭い画面では折り返しても自然に並ぶ。 */
.ta-q-formactions .takearest-portal__button,
.ta-q-formactions .takearest-portal__backlink,
.ta-q-savedactions .takearest-portal__button,
.ta-q-savedactions .takearest-portal__backlink {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	box-sizing: border-box;
	min-height: 46px;
	min-width: 132px;
	padding: 11px 24px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	border-radius: 8px;
	/* secondary は枠線色を保つため border-color は触らず、太さ・種類だけ揃える。
	   primary は枠線なしのため、下の規則で透明枠を足して箱の高さを一致させる。 */
	border-width: 1px;
	border-style: solid;
}

/* primary（塗りボタン）は枠線を持たないので、透明な 1px 枠で secondary と箱寸法を揃える。 */
.ta-q-formactions .takearest-portal__button,
.ta-q-savedactions .takearest-portal__button {
	border-color: transparent;
}

/* ---- 表示（読み取り専用）画面 ---- */

.ta-q-readonly {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.ta-q-subhead {
	margin: 16px 0 6px;
	font-size: 14px;
	font-weight: 700;
	color: var(--ta-ink);
}

.ta-q-note {
	padding: 12px 14px;
	background: var(--ta-bg-soft);
	border: 1px solid var(--ta-line-soft);
	border-radius: 8px;
	font-size: 14px;
	color: var(--ta-ink);
	line-height: 1.7;
}

.ta-q-note--internal {
	background: #f1ece1;
	border-style: dashed;
}

.ta-q-empty-val {
	color: var(--ta-ink-mute);
}

/* ---- Phase 2.3：見積一覧の見出し行・検索 ---- */

/* 一覧見出し行：新規作成ボタン（主操作）と検索フォームを両端に置く。 */
.ta-q-listhead {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px;
	margin: 8px 0 16px;
}

.ta-q-listhead__create {
	margin: 0;
}

/* キーワード検索フォーム（JSなしで動くGET検索）。 */
.ta-q-search {
	margin: 0;
}

.ta-q-search__label {
	display: block;
	margin-bottom: 4px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ta-ink-soft);
}

.ta-q-search__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.ta-q-search__input {
	width: 260px;
	max-width: 100%;
}

.ta-q-search__button {
	cursor: pointer;
	white-space: nowrap;
}

.ta-q-search__clear {
	font-size: 13px;
	color: var(--ta-ink-soft);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s ease;
}

.ta-q-search__clear:hover,
.ta-q-search__clear:focus {
	border-bottom-color: var(--ta-accent);
}

.ta-q-resultcount {
	margin: 0 0 10px;
	font-size: 13px;
	color: var(--ta-ink-soft);
}

/* 一覧テーブルの強調：見積番号・顧客名・税込合計を探しやすくする。 */
.ta-q-table--list .ta-q-cell-number {
	white-space: nowrap;
}

.ta-q-numlink {
	font-weight: 700;
	color: var(--ta-accent-dark);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s ease;
}

.ta-q-numlink:hover,
.ta-q-numlink:focus {
	border-bottom-color: var(--ta-accent);
}

.ta-q-table--list .ta-q-cell-customer {
	font-weight: 700;
	color: var(--ta-ink);
}

.ta-q-table--list .ta-q-cell-total {
	font-weight: 700;
	color: var(--ta-accent-dark);
}

/* ---- Phase 2.3：見積確認画面 ---- */

/* 社内確認用バナー：正式帳票ではないことを明記する。 */
.ta-q-review-note {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 12px;
	margin: 0 0 18px;
	padding: 12px 16px;
	background: #eef2ee;
	border: 1px solid #d4e0d6;
	border-left: 4px solid var(--ta-accent);
	border-radius: 8px;
}

.ta-q-review-note__label {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ta-accent-dark);
	letter-spacing: 0.04em;
}

.ta-q-review-note__text {
	margin: 0;
	font-size: 13px;
	color: var(--ta-ink-soft);
}

/* ヘッダー部：管理情報の要点だけを薄い横帯で並べる（税込合計は基本情報カードへ統合・Phase 2.6.4）。 */
.ta-q-review-header {
	margin: 0 0 18px;
}

.ta-q-review-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px 18px;
	margin: 0;
	padding: 14px 20px;
	background: var(--ta-surface);
	border: 1px solid var(--ta-line);
	border-radius: 12px;
}

.ta-q-review-fact {
	margin: 0;
	min-width: 0;
}

.ta-q-review-fact dt {
	margin: 0 0 2px;
	font-size: 12px;
	font-weight: 700;
	color: var(--ta-ink-mute);
}

.ta-q-review-fact dd {
	margin: 0;
	font-size: 14px;
	color: var(--ta-ink);
	word-break: break-word;
}

.ta-q-review-number {
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--ta-accent-dark);
}

.ta-q-review-strong {
	font-weight: 700;
}

/* 税込合計：確認画面の中で最も目立たせる。基本情報カード右側に統合する（Phase 2.6.4）。 */
.ta-q-review-total {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	padding: 18px 22px;
	background: #eef3ef;
	border: 1px solid #d4e0d6;
	border-radius: 12px;
	text-align: right;
}

/* 基本情報カード内に置く税込合計：カラム高さに合わせて伸ばし、見出しと上端を揃える。 */
.ta-q-review-total--inbasic {
	flex: 1 1 auto;
	margin-top: 8px;
}

.ta-q-review-total__label {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ta-ink-soft);
}

.ta-q-review-total__amount {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--ta-accent-dark);
}

/* 基本情報の2つ目以降の小見出し（顧客情報→見積情報）に余白を足す。 */
.ta-q-readonly + .ta-q-subhead {
	margin-top: 18px;
}

/* 確認画面の基本情報：PC幅では顧客情報（左）・見積情報（右）の2段組にする（Phase 2.6.3）。
   スマホ幅では @media で1カラムに戻す。 */
.ta-q-basic-cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px 32px;
}

/* 税込合計を加えた3カラム（顧客情報・見積情報・税込合計）。PC幅で横並びにする（Phase 2.6.4）。
   中間幅・スマホ幅では @media で段階的に折り返す。 */
.ta-q-basic-cols--with-total {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.85fr);
	gap: 10px 28px;
	align-items: stretch;
}

.ta-q-basic-col {
	min-width: 0;
}

/* 税込合計カラムは見出しを持たないため、カラム高さに合わせて緑カードを伸ばす。 */
.ta-q-basic-col--total {
	display: flex;
}

/* 各カラム先頭の小見出しはカード見出し直下に揃え、上余白を詰める。 */
.ta-q-basic-col > .ta-q-subhead:first-child {
	margin-top: 8px;
}

/* 明細セル内：品目名の下に説明（補足）を小さく置く。 */
.ta-q-itemcell {
	min-width: 0;
}

.ta-q-itemname {
	display: block;
	font-weight: 600;
	color: var(--ta-ink);
}

.ta-q-itemdesc {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	color: var(--ta-ink-soft);
	line-height: 1.5;
}

/* 自由入力明細であることを示す控えめな社内向けラベル（確認画面・Phase 2.6.4）。
   顧客向け帳票には出さない社内表示。商品マスター非連動の事故防止用に小さく添える。 */
.ta-q-freelabel {
	display: inline-block;
	margin-top: 3px;
	padding: 1px 8px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.6;
	border-radius: 999px;
	background: #efe6d4;
	color: #8a6a2f;
}

/* 確認画面の明細セル内に置く値引き表示（独立した値引き列を廃止・Phase 2.6.4）。
   例：「値引き：−¥60,000（5% 引き）」。値引き後の金額は金額（税抜）列に出す。 */
.ta-q-itemdiscount {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	font-weight: 600;
	color: #8a5a1f;
}

/* 社内メモの補足（顧客向けには出さない旨）。 */
.ta-q-internal-note {
	margin: 0 0 6px;
	font-size: 12.5px;
	color: var(--ta-ink-mute);
}

/* 操作導線と後続機能メモ。 */
.ta-q-actionbar {
	margin-top: 20px;
}

/* 上部の操作導線（社内確認用バナー直下）。バナーが下余白を持つため上は詰め、
   下に続く保存完了メッセージ・承認ワークフロー・管理情報ブロック（ta-q-review-header）と
   くっつかないよう、下に十分な区切りの余白を取る（Phase 2.6.4 / 2.7.1）。
   社内確認用メッセージ → 上部ボタン群 → 見積番号などのブロックが詰まりすぎないよう、
   ボタンを大きくした分も含めて余白を確保する。スマホ幅でボタンが折り返しても窮屈に
   ならない固定余白とする。 */
.ta-q-actionbar--top {
	margin-top: 0;
	margin-bottom: 40px;
}

.ta-q-followups {
	margin: 10px 0 0;
	font-size: 12.5px;
	color: var(--ta-ink-mute);
}

/* ---- 確認画面のアクションバー整理（主操作／その他／危険操作） ---- */
/* 確認画面のアクションバー内では、戻る矢印（←）を出さない。主操作の行に矢印付き・矢印なしが
   混在して分かりにくくなるのを防ぐ（他画面の「戻る」リンクは従来どおり矢印を残す）。 */
.ta-q-actionbar .takearest-portal__backlink::before {
	content: none;
}

/* 主操作グループ（見える場所に残す）。サイズは既存の .ta-q-formactions 規則で統一される。 */
.ta-q-actions__primary {
	margin-top: 0;
}

/* 「その他の操作」折りたたみ（details/summary・JavaScript 不要）。 */
.ta-q-actions__more {
	margin-top: 16px;
}

.ta-q-actions__more-summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: max-content;
	padding: 9px 16px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ta-accent-dark);
	background: var(--ta-surface);
	border: 1px solid var(--ta-line);
	border-radius: 8px;
	cursor: pointer;
	list-style: none;
}

/* 既定の開閉マーカー（三角）を消し、自前の記号を付ける。 */
.ta-q-actions__more-summary::-webkit-details-marker {
	display: none;
}

.ta-q-actions__more-summary::after {
	content: "\25BE"; /* ▾ 閉じているときは下向き。 */
	font-size: 12px;
	line-height: 1;
}

.ta-q-actions__more[open] .ta-q-actions__more-summary::after {
	content: "\25B4"; /* ▴ 開いているときは上向き。 */
}

.ta-q-actions__more-summary:hover,
.ta-q-actions__more-summary:focus {
	border-color: var(--ta-accent);
}

/* その他メニュー本体：低頻度操作を縦並びのリンクにまとめる。 */
.ta-q-actions__menu {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	width: max-content;
	max-width: 100%;
	margin-top: 10px;
	padding: 8px 14px;
	background: var(--ta-surface);
	border: 1px solid var(--ta-line);
	border-radius: 8px;
}

.ta-q-actions__menu-link {
	display: inline-block;
	padding: 7px 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ta-accent-dark);
	text-decoration: none;
}

.ta-q-actions__menu-link:hover,
.ta-q-actions__menu-link:focus {
	text-decoration: underline;
}

/* 危険操作（削除）は通常操作と分け、上に区切り線を置く（誤操作防止）。 */
.ta-q-actions__menu-danger {
	width: 100%;
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid var(--ta-line);
}

/* ---- Phase 2.4：見積種別バッジ・バナー・種別選択・商品選択 ---- */

/* 見積種別バッジ（一般向け／代理店向け）。ステータスバッジと並んでも区別できる色にする。 */
.ta-q-typebadge {
	display: inline-block;
	padding: 2px 12px;
	font-size: 12px;
	font-weight: 700;
	border-radius: 999px;
	letter-spacing: 0.02em;
	background: #ece5d8;
	color: var(--ta-ink-mute);
}

/* 一般向け：ブランドのグリーン系。 */
.ta-q-typebadge--retail {
	background: #e7efe9;
	color: var(--ta-accent-dark);
}

/* 代理店向け：一般向けと取り違えないよう、明確に異なる青系。 */
.ta-q-typebadge--agency {
	background: #e7edf6;
	color: #34557f;
}

/* 種別バナー：種別と「どの価格を使うか」を画面上部で明示し、価格表の取り違えを防ぐ。 */
.ta-q-typebanner {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 12px;
	margin: 0 0 18px;
	padding: 12px 16px;
	border: 1px solid var(--ta-line);
	border-left: 4px solid var(--ta-accent);
	border-radius: 8px;
	background: #eef3ef;
}

.ta-q-typebanner--agency {
	border-left-color: #34557f;
	background: #eef2f8;
}

.ta-q-typebanner__badge {
	flex: 0 0 auto;
}

.ta-q-typebanner__text {
	margin: 0;
	font-size: 13px;
	color: var(--ta-ink-soft);
}

/* 一覧テーブル内の種別バッジ（見積番号の下に小さく置く）。 */
.ta-q-cell-type {
	display: block;
	margin-top: 4px;
}

/* ---- 種別選択（入口分け）画面 ---- */

.ta-q-choose {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin: 8px 0 4px;
}

/* 押せる選択カード：タイトル・説明・アクションを持つ。 */
.ta-q-choose__card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 22px;
	background: var(--ta-surface);
	border: 1px solid var(--ta-line);
	border-radius: 12px;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.ta-q-choose__card:hover,
.ta-q-choose__card:focus-visible {
	border-color: var(--ta-accent);
	box-shadow: 0 6px 18px rgba(60, 70, 55, 0.08);
}

.ta-q-choose__card--agency:hover,
.ta-q-choose__card--agency:focus-visible {
	border-color: #34557f;
}

.ta-q-choose__badge {
	display: block;
}

.ta-q-choose__title {
	font-size: 17px;
	font-weight: 700;
	color: var(--ta-ink);
}

.ta-q-choose__desc {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--ta-ink-soft);
}

.ta-q-choose__go {
	margin-top: 4px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--ta-accent-dark);
}

.ta-q-choose__card--agency .ta-q-choose__go {
	color: #34557f;
}

.ta-q-choose__go::after {
	content: " →";
}

/* ---- 明細行の商品選択 ---- */

/* 商品選択は明細カードの先頭に置き、品目入力より前に「商品を選ぶ」導線を見せる。 */
.ta-q-item__product {
	margin-bottom: 8px;
}

.ta-q-field--product {
	margin-bottom: 8px;
}

.ta-q-product {
	width: 100%;
}

/* ---- Phase 2.6：単価ロック・値引き ---- */

/* 商品選択行の単価・単位（readonly）。マスター由来で変更不可であることを見た目で示す。 */
.takearest-portal__input.is-locked {
	background: #efe9dc;
	color: var(--ta-ink-soft);
	cursor: not-allowed;
}

/* 値引き「なし」のときの値入力欄（readonly）。使わないことを淡く示す。 */
.takearest-portal__input.is-off {
	background: #f1ece1;
	color: var(--ta-ink-mute);
	cursor: not-allowed;
}

/* 明細の値引き行：種別（なし／円引き／%引き）と値を横並びにする。 */
.ta-q-item__discount {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 0 14px;
	align-items: start;
	margin-top: 2px;
	padding-top: 8px;
	border-top: 1px dashed var(--ta-line-soft);
}

.ta-q-item__discount .ta-q-field {
	margin-bottom: 8px;
}

/* 見積全体の値引き欄（合計の近く）。 */
.ta-q-quotediscount {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--ta-line-soft);
}

.ta-q-quotediscount__label {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ta-ink-soft);
}

.ta-q-quotediscount__controls {
	display: flex;
	gap: 8px;
}

.ta-q-quotediscount__controls .takearest-portal__input {
	padding: 7px 9px;
	font-size: 13.5px;
}

.ta-q-quotediscount__controls [data-quote-discount-type] {
	flex: 0 0 auto;
	width: auto;
}

.ta-q-quotediscount__controls [data-quote-discount-value] {
	flex: 1 1 auto;
	min-width: 0;
}

/* 値引きの行（明細値引き合計・見積全体値引き）は控えめなマイナス表記にする。 */
.ta-q-totals__row--discount span:last-child {
	color: #8a5a1f;
}

/* 自由入力行の社内向け注意表示（作成・編集画面・Phase 2.6.4）。商品マスター非連動で
   品目名・単価・単位を編集できることを入力者に伝える事故防止表示。顧客向けには出さない。
   商品選択行では .is-hidden で隠し、自由入力に戻すとJSが表示する。 */
.ta-q-freenote {
	margin: 0 0 8px;
	padding: 7px 12px;
	font-size: 12.5px;
	line-height: 1.5;
	color: #8a6a2f;
	background: #f7f1e4;
	border: 1px solid #e6d8bd;
	border-left: 3px solid #c9a24a;
	border-radius: 6px;
}

.ta-q-freenote__label {
	font-weight: 700;
}

/* JSで表示/非表示を切り替える要素（商品選択行では隠す）。 */
.ta-q-freenote.is-hidden {
	display: none;
}

/* 承認依頼へ：今後の主要導線の入口。本体は後続フェーズのため今回は disabled にし、
   主要導線だと分かる見た目を保ちつつ「準備中」を添えて未実装を安全に伝える（Phase 2.6.4）。 */
.ta-q-approve-btn[disabled] {
	cursor: not-allowed;
	opacity: 0.7;
}

.ta-q-approve-btn[disabled]:hover,
.ta-q-approve-btn[disabled]:focus {
	background: var(--ta-accent);
}

.ta-q-approve-soon {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 8px;
	font-size: 11px;
	font-weight: 700;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.32);
	color: #fff;
}

/* 保存成功後の操作導線（見積の確認へ・見積一覧へ戻る）。成功メッセージの直下に置く。 */
.ta-q-savedactions {
	margin-top: 12px;
}

/* ---- レスポンシブ ---- */

@media (max-width: 880px) {
	.ta-q-item__main {
		grid-template-columns: repeat(2, 1fr);
	}

	.ta-q-item__discount {
		grid-template-columns: 1fr 1fr;
	}

	.ta-q-field--line {
		grid-column: 1 / -1;
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
	}

	.ta-q-line {
		text-align: left;
	}

	/* 中間幅：顧客情報・見積情報を2カラム、税込合計はその下に全幅で置く（Phase 2.6.4）。 */
	.ta-q-basic-cols--with-total {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ta-q-basic-col--total {
		grid-column: 1 / -1;
	}
}

@media (max-width: 600px) {
	.ta-q-grid {
		grid-template-columns: 1fr;
	}

	/* 狭い画面では操作ボタンを伸ばし、折り返しても窮屈に見えないようにする（Phase 2.7.1）。 */
	.ta-q-formactions .takearest-portal__button,
	.ta-q-formactions .takearest-portal__backlink,
	.ta-q-savedactions .takearest-portal__button,
	.ta-q-savedactions .takearest-portal__backlink {
		flex: 1 1 auto;
		min-width: 0;
	}

	.ta-q-item__main {
		grid-template-columns: 1fr;
	}

	.ta-q-item__discount {
		grid-template-columns: 1fr;
	}

	.ta-q-totals {
		max-width: none;
	}

	/* 種別選択カードを縦積みにする（スマホでも選びやすく）。 */
	.ta-q-choose {
		grid-template-columns: 1fr;
	}

	/* 見出し行・検索・確認画面ヘッダーを縦積みにする（横スクロールを前提にしない）。 */
	.ta-q-listhead {
		flex-direction: column;
		align-items: stretch;
	}

	.ta-q-search__input {
		width: 100%;
		flex: 1 1 auto;
	}

	.ta-q-review-facts {
		grid-template-columns: 1fr;
	}

	/* 基本情報の段組をスマホ幅では1カラムに戻す（Phase 2.6.3 / 2.6.4）。
	   税込合計を加えた3カラムも、スマホでは顧客情報→見積情報→税込合計の縦積みにする。 */
	.ta-q-basic-cols,
	.ta-q-basic-cols--with-total {
		grid-template-columns: 1fr;
	}

	.ta-q-review-total {
		text-align: left;
	}

	/* 一覧テーブルをカード型に積み替える（横スクロールを前提にしない）。 */
	.ta-q-table,
	.ta-q-table thead,
	.ta-q-table tbody,
	.ta-q-table th,
	.ta-q-table td,
	.ta-q-table tr {
		display: block;
	}

	.ta-q-table thead {
		display: none;
	}

	.ta-q-table tr {
		margin-bottom: 12px;
		border: 1px solid var(--ta-line);
		border-radius: 10px;
		overflow: hidden;
	}

	.ta-q-table td {
		display: flex;
		justify-content: space-between;
		gap: 14px;
		border-bottom: 1px solid var(--ta-line-soft);
	}

	.ta-q-table td::before {
		content: attr(data-label);
		font-weight: 700;
		color: var(--ta-ink-soft);
	}

	.ta-q-table .ta-q-num {
		text-align: right;
	}
}

/* ====================================================================== *
 * Phase 2.7：ステータス（承認ワークフロー）・履歴・承認パネル・削除確認
 * ====================================================================== */

/* 承認ワークフローのステータスバッジ。draft は既存（薄い緑）を踏襲し、
   承認依頼中＝注意（黄系）、承認済み＝確定（緑強め）、差戻し＝要対応（赤系）、
   削除済み＝無効（グレー）で区別する。 */
.ta-q-status--approval_requested {
	background: #fbf0d8;
	color: #8a6d1f;
}

.ta-q-status--approved {
	background: #d8ece0;
	color: #1f5e3f;
}

.ta-q-status--rejected {
	background: #f6e1dc;
	color: #8a3b2f;
}

.ta-q-status--deleted {
	background: #e7e3da;
	color: #6f6a5c;
	text-decoration: line-through;
}

/* 情報アラート（中立の案内：編集できない理由など）。 */
.takearest-portal__alert--info {
	color: #4a4636;
	background: #f3efe4;
	border-color: #e0d8c6;
}

/* 警告アラート（注意喚起：承認済み見積を修正すると承認解除される等）。 */
.takearest-portal__alert--warning {
	color: #8a5a1b;
	background: #faf0dd;
	border-color: #ecd6a8;
}

/* 承認解除の明示確認チェック（承認済み見積の編集・保存ボタン付近）。強すぎず、ただし明確に。 */
.ta-q-approved-ack {
	margin: 0 0 14px;
	padding: 12px 14px;
	background: #faf0dd;
	border: 1px solid #ecd6a8;
	border-radius: 8px;
}

.ta-q-approved-ack__label {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	cursor: pointer;
	font-size: 13.5px;
	line-height: 1.5;
	color: #7a4f18;
}

.ta-q-approved-ack__checkbox {
	flex: 0 0 auto;
	margin-top: 2px;
}

/* 危険操作リンク（削除）。 */
.ta-q-link--danger {
	color: #8a3b2f;
}

/* 危険操作ボタン（削除する／差戻しする）。 */
.takearest-portal__button.ta-q-btn-danger {
	background: #8a3b2f;
	border-color: #8a3b2f;
}

.takearest-portal__button.ta-q-btn-danger:hover,
.takearest-portal__button.ta-q-btn-danger:focus {
	background: #732f25;
	border-color: #732f25;
}

/* ---- 削除確認パネル ---- */
.ta-q-confirm {
	margin: 0 0 20px;
	padding: 16px 18px;
	border-radius: 12px;
	border: 1px solid var(--ta-line);
	background: var(--ta-surface);
}

.ta-q-confirm--danger {
	border-color: #e6c8c0;
	background: #f9f0ee;
}

.ta-q-confirm__title {
	margin: 0 0 6px;
	font-weight: 700;
	color: #8a3b2f;
}

.ta-q-confirm__text {
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--ta-ink-mute);
}

.ta-q-confirm__form {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

/* ---- 承認ワークフロー操作パネル ---- */
.ta-q-workflow__block {
	padding: 14px 0;
	border-top: 1px solid var(--ta-line-soft);
}

.ta-q-workflow__block:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.ta-q-workflow__block--reject {
	margin-top: 2px;
}

/* 承認取消差戻し（承認済みからの差戻し）。誤操作防止のため警告色で強調する（Phase 2.9）。 */
.ta-q-workflow__block--revoke {
	margin-top: 2px;
	padding: 14px;
	background: #fbf1ee;
	border: 1px solid #e6c4ba;
	border-radius: 8px;
}

.ta-q-workflow__revoke-note {
	color: #8a3b2f;
	font-weight: 600;
}

.ta-q-workflow__form {
	margin: 0;
}

/* ---- 承認ワークフロー内「直近の承認コメント」（Phase 3.4-D） ---- */
.ta-q-workflow__recent {
	margin: 0 0 14px;
	padding: 12px 14px;
	background: var(--ta-surface-soft, #f6f5f1);
	border: 1px solid var(--ta-line-soft, #e3e0d8);
	border-radius: 8px;
}

.ta-q-workflow__recent-title {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--ta-ink-mute);
}

.ta-q-workflow__recent-meta {
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ta-ink);
}

.ta-q-workflow__recent-body {
	margin: 0 0 10px;
	white-space: pre-line;
}

.ta-q-workflow__recent-empty {
	margin: 0 0 10px;
	color: var(--ta-ink-mute);
}

.ta-q-workflow__recent-actions {
	margin: 0;
}

/* ---- 既存顧客プレフィル（見積フォーム）（Phase 2.9） ---- */
.ta-q-customerpick {
	margin-bottom: 16px;
	padding: 12px 14px;
	background: var(--ta-surface-soft, #f6f5f1);
	border: 1px solid var(--ta-line-soft, #e3e0d8);
	border-radius: 8px;
}

/* ---- 削除済み表示フィルター（管理者向け） ---- */
.ta-q-deletedfilter {
	margin: 0 0 14px;
	font-size: 13px;
	color: var(--ta-ink-mute);
}

.ta-q-deletedfilter__label {
	font-weight: 600;
}

.ta-q-deletedfilter__link,
.ta-q-deletedfilter__current {
	display: inline-block;
	margin-left: 10px;
}

.ta-q-deletedfilter__current {
	font-weight: 700;
	color: var(--ta-accent-dark);
}

/* ---- 編集履歴 ---- */
.ta-q-action {
	display: inline-block;
	padding: 2px 10px;
	font-size: 12px;
	font-weight: 600;
	border-radius: 999px;
	background: #ece5d8;
	color: var(--ta-ink-mute);
}

.ta-q-action--created {
	background: #e7efe9;
	color: var(--ta-accent-dark);
}

.ta-q-action--updated {
	background: #e8eef5;
	color: #355b86;
}

.ta-q-action--approval_requested {
	background: #fbf0d8;
	color: #8a6d1f;
}

.ta-q-action--approved {
	background: #d8ece0;
	color: #1f5e3f;
}

.ta-q-action--rejected {
	background: #f6e1dc;
	color: #8a3b2f;
}

.ta-q-action--deleted {
	background: #e7e3da;
	color: #6f6a5c;
}

/* 承認取消差戻し。通常の差戻しと区別できるよう、より強い警告色にする（Phase 2.9）。 */
.ta-q-action--approval_revoked {
	background: #f3d6cf;
	color: #7a2d22;
}

.ta-q-arrow {
	color: var(--ta-ink-mute);
	padding: 0 2px;
}

.ta-q-history-comment {
	white-space: pre-line;
}

/* ====================================================================== *
 * Phase 2.8：顧客向け見積書（mode=document）の表示・印刷
 * ====================================================================== */

/* 画面側のラッパー。印刷時は不要なUIを @media print で隠す。 */
.ta-qdoc-screen {
	margin: 0 auto;
	max-width: 860px;
}

/* 未承認時の「社内確認用プレビュー」注意バナー（正式帳票との誤認防止）。印刷時は隠す。 */
.ta-qdoc-previewnote {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 12px;
	margin: 16px 0;
	padding: 12px 16px;
	border: 1px solid #e6c8c0;
	border-left: 4px solid #b5503f;
	border-radius: 8px;
	background: #f9f0ee;
}

.ta-qdoc-previewnote__label {
	font-weight: 700;
	color: #8a3b2f;
}

.ta-qdoc-previewnote__text {
	font-size: 13px;
	color: var(--ta-ink-soft);
}

/* 操作バー（印刷・確認画面へ戻る）。
   レイアウト（横並び・ボタン間隔・上下余白）は UI標準の
   .ta-action-bar / .ta-action-bar--top / .ta-action-bar--bottom（assets/staff-portal.css）
   に統一した（Phase 2.9.5）。ここではページ固有の上書きをしない。
   .ta-qdoc-actions は印刷時にこの操作バーを隠すためのフックとして要素に残している
   （下部の @media print 参照）。 */

/* ---- 見積書の用紙（A4縦イメージ） ---- */
.ta-qdoc {
	position: relative;
	overflow: hidden;
	padding: 40px 44px 48px;
	background: #ffffff;
	color: #1f2a30;
	border: 1px solid var(--ta-line);
	border-radius: 6px;
	box-shadow: 0 8px 30px rgba(35, 48, 56, 0.08);
	font-size: 14px;
	line-height: 1.7;
}

/* 用紙内の各ブロックは透かしより前面に出す。 */
.ta-qdoc > *:not(.ta-qdoc__watermark) {
	position: relative;
	z-index: 1;
}

/* 未承認プレビューの透かし（斜めの大きな注意文字）。印刷時も残す。 */
.ta-qdoc__watermark {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.ta-qdoc__watermark span {
	font-size: 64px;
	font-weight: 800;
	letter-spacing: 0.12em;
	color: rgba(181, 80, 63, 0.12);
	transform: rotate(-24deg);
	white-space: nowrap;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

/* ---- ヘッダー（タイトル＋メタ情報） ---- */
.ta-qdoc__header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 16px;
	border-bottom: 2px solid #1f2a30;
}

.ta-qdoc__title {
	margin: 0;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: 0.3em;
	color: #1f2a30;
}

.ta-qdoc__meta {
	margin: 0;
	min-width: 220px;
	font-size: 13px;
}

.ta-qdoc__meta-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
}

.ta-qdoc__meta-row dt {
	color: #5c6a6a;
}

.ta-qdoc__meta-row dd {
	margin: 0;
	font-weight: 600;
}

/* ---- 宛先・発行元 ----
   左（宛先）と右（発行元）の高さを揃え（align-items:stretch）、宛先側は上下に組んで
   日付・納期情報を下端へ寄せる。これにより想定納期行と発行元の担当者行の高さが揃う。 */
.ta-qdoc__parties {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: space-between;
	gap: 24px;
	margin: 22px 0 12px;
}

/* 宛名（上）と日付・納期情報（下）を上下に組み、下部を発行元ブロックの下端へ寄せる。
   横幅は内容なり（min-width）に保ち、左右の配置は親の justify-content に任せる。 */
.ta-qdoc__to {
	min-width: 240px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.ta-qdoc__to-name {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	border-bottom: 1px solid #c8cfcf;
	padding-bottom: 4px;
}

.ta-qdoc__to-name--empty {
	color: #8a8472;
	font-weight: 500;
}

.ta-qdoc__to-honorific {
	font-size: 15px;
	font-weight: 500;
}

/* 部署・拠点行（宛先対象種別が部署・担当者のとき。Phase 3.2-C2）。 */
.ta-qdoc__to-department {
	margin: 6px 0 0;
	font-size: 15px;
}

.ta-qdoc__to-contact {
	margin: 6px 0 0;
	font-size: 14px;
}

/* 担当者の役職（担当者名の前に添える。Phase 3.2-C2）。 */
.ta-qdoc__to-contact-title {
	color: #5c6a6a;
}

/* 発行元ブロック。社印を上に重ねられるよう relative にする。 */
.ta-qdoc__from {
	position: relative;
	min-width: 240px;
	/* 社印が右にはみ出しても用紙内に収まるよう、右側に少し余白を確保する。 */
	padding-right: 8px;
	text-align: left;
}

.ta-qdoc__from-name {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 700;
}

.ta-qdoc__from-line {
	margin: 0;
	font-size: 12.5px;
	color: #44504f;
}

/*
 * 社印（承認済みのみ）。発行元情報（会社住所・TEL・担当者名など）の上に少し重なる
 * 押印風の配置にする。重なってもmix-blend-mode（対応ブラウザ）で下の文字が読める。
 * 社印未設定時はこのブロック自体を出力しないため、レイアウトは崩れない。
 */
.ta-qdoc__seal {
	position: absolute;
	right: 0;
	bottom: 4px;
	pointer-events: none;
}

.ta-qdoc__seal-img {
	display: block;
	/* 従来72pxから約1.3倍に拡大（押印感を強める）。 */
	width: 96px;
	height: 96px;
	object-fit: contain;
	/* 透明PNGの社印を紙になじませ、重なった文字を透かして見せる。 */
	opacity: 0.95;
	mix-blend-mode: multiply;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

/* ---- 宛名ブロック下部の日付・納期情報（発行日・有効期限・想定納期）・Phase 2.9.3 追加調整 ----
   独立した帯にせず宛名ブロックの下部に収める。控えめな小さめ文字・補助色。
   1行目に発行日・有効期限、2行目（任意）に想定納期を改行して並べる。 */
.ta-qdoc__to-meta {
	margin-top: 12px;
	font-size: 12px;
	line-height: 1.7;
	color: #5c6a6a;
}

.ta-qdoc__to-meta-line {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 18px;
	margin: 0;
}

.ta-qdoc__to-meta-item {
	white-space: nowrap;
}

.ta-qdoc__to-meta-label {
	color: #7c8786;
}

/* ---- 件名 ---- */
.ta-qdoc__subject {
	display: flex;
	gap: 12px;
	align-items: baseline;
	margin: 0 0 16px;
	padding-bottom: 8px;
	border-bottom: 1px solid #e3dccd;
}

.ta-qdoc__subject-label {
	flex-shrink: 0;
	font-size: 13px;
	color: #5c6a6a;
}

.ta-qdoc__subject-value {
	font-size: 16px;
	font-weight: 600;
}

/* ---- 御見積金額（税込）を大きく見せる ---- */
.ta-qdoc__headline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 0 0 8px;
	padding: 12px 18px;
	border: 1px solid #b9cdc7;
	border-radius: 8px;
	background: #eef4f1;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

.ta-qdoc__headline-label {
	font-size: 15px;
	font-weight: 700;
	color: #244a45;
}

.ta-qdoc__headline-amount {
	font-size: 28px;
	font-weight: 800;
	color: #1f2a30;
	white-space: nowrap;
}

.ta-qdoc__lead {
	margin: 0 0 18px;
	font-size: 13.5px;
	color: #44504f;
}

/* ---- 明細テーブル ---- */
.ta-qdoc__items-wrap {
	margin: 0 0 16px;
	overflow-x: auto;
}

.ta-qdoc__items {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
}

.ta-qdoc__items thead th {
	padding: 8px 10px;
	text-align: left;
	font-weight: 700;
	color: #1f2a30;
	border-bottom: 2px solid #1f2a30;
	background: #f3f1ea;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

.ta-qdoc__items tbody td {
	padding: 9px 10px;
	vertical-align: top;
	border-bottom: 1px solid #e3dccd;
}

.ta-qdoc__col-qty,
.ta-qdoc__col-price,
.ta-qdoc__col-amount {
	text-align: right;
	white-space: nowrap;
}

.ta-qdoc__col-unit {
	text-align: center;
	white-space: nowrap;
}

.ta-qdoc__col-name {
	width: 50%;
}

.ta-qdoc__item-name {
	display: block;
	font-weight: 600;
}

.ta-qdoc__item-desc {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: #5c6a6a;
}

.ta-qdoc__item-discount {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: #8a3b2f;
}

.ta-qdoc__empty {
	padding: 18px 10px;
	text-align: center;
	color: #8a8472;
}

/* ---- 合計欄（コンパクトな2列集計ブロック・Phase 2.9.3） ---- */
.ta-qdoc__totals {
	width: 460px;
	max-width: 100%;
	margin-left: auto;
}

/* 小計（税抜）・値引き合計・税抜合計・消費税を2列に詰めて並べる。
   値引きが無い場合は税抜合計・消費税の2セルだけが1行に並ぶ（崩れない）。 */
.ta-qdoc__totals-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 28px;
}

.ta-qdoc__total-cell {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 5px 2px;
	font-size: 13.5px;
	border-bottom: 1px solid #e3dccd;
}

.ta-qdoc__total-cell--discount .ta-qdoc__total-value {
	color: #8a3b2f;
}

/* 税込合計：集計ブロックの全幅で最も目立たせる（黒帯にはしない）。 */
.ta-qdoc__total-grand {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-top: 8px;
	padding: 9px 2px;
	border-top: 2px solid #1f2a30;
	border-bottom: 2px solid #1f2a30;
	font-size: 18px;
	font-weight: 800;
}

.ta-qdoc__total-label {
	color: #44504f;
}

.ta-qdoc__total-grand .ta-qdoc__total-label {
	color: #1f2a30;
}

.ta-qdoc__total-value {
	font-weight: 600;
	white-space: nowrap;
}

/* ---- 備考 ---- */
.ta-qdoc__notes {
	margin: 24px 0 0;
	padding: 14px 16px;
	border: 1px solid #e3dccd;
	border-radius: 8px;
}

.ta-qdoc__notes-title {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 700;
	color: #5c6a6a;
}

.ta-qdoc__notes-body {
	font-size: 13.5px;
	line-height: 1.7;
}

/* 備考が空でも見出しだけ出し、空欄のボックスとして見せる（Phase 2.9.3）。 */
.ta-qdoc__notes-body--empty {
	min-height: 22px;
}

/* ---- 見積書のレスポンシブ（画面表示） ---- */
@media (max-width: 600px) {
	.ta-qdoc {
		padding: 24px 18px 30px;
	}

	.ta-qdoc__title {
		font-size: 24px;
		letter-spacing: 0.2em;
	}

	/* 狭い画面では発行元の列幅が縮むため、社印を少し小さくして重なりすぎを防ぐ。 */
	.ta-qdoc__seal-img {
		width: 80px;
		height: 80px;
	}

	.ta-qdoc__headline-amount {
		font-size: 24px;
	}

	.ta-qdoc__totals {
		width: 100%;
	}

	/* 狭い画面では集計セルを1列に積む（2列のままだと窮屈なため）。 */
	.ta-qdoc__totals-grid {
		grid-template-columns: 1fr;
	}

	.ta-qdoc__watermark span {
		font-size: 40px;
	}
}

/* ====================================================================== *
 * Phase 2.8：印刷・PDF保存用（A4縦）
 * ====================================================================== */
@media print {
	/* A4縦・余白は約14mm。 */
	@page {
		size: A4 portrait;
		margin: 14mm;
	}

	/* スタッフポータルのヘッダー・フッター・操作ボタン・プレビュー注意は印刷しない。 */
	.takearest-portal__topbar,
	.takearest-portal__footer,
	.ta-qdoc-actions,
	.ta-qdoc-previewnote {
		display: none !important;
	}

	/* 画面用の余白・背景・最大幅・影をリセットし、用紙いっぱいに出す。 */
	body.takearest-staff-body,
	.takearest-portal {
		margin: 0 !important;
		padding: 0 !important;
		min-height: 0 !important;
		background: #ffffff !important;
	}

	.takearest-portal__main,
	.ta-qdoc-screen {
		max-width: none !important;
		width: 100% !important;
		margin: 0 !important;
	}

	.ta-qdoc {
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		padding: 0 !important;
		max-width: none !important;
		width: 100% !important;
	}

	/* 背景が消える環境でも読めるよう、配色を維持する。 */
	.takearest-portal,
	.ta-qdoc,
	.ta-qdoc__items thead th,
	.ta-qdoc__headline,
	.ta-qdoc__watermark span,
	.ta-qdoc__seal-img {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	/* 明細テーブルがページをまたいでも崩れにくくする。 */
	.ta-qdoc__items thead {
		display: table-header-group;
	}

	.ta-qdoc__items tr {
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.ta-qdoc__totals,
	.ta-qdoc__notes {
		break-inside: avoid;
		page-break-inside: avoid;
	}
}

/* この顧客で新規案件（Phase 3.3-D3）。案件選択欄の下に、顧客未登録案件への導線を小さく置く。 */
.ta-q-project__newlink {
	margin: 8px 0 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ta-q-project__newlink-a {
	align-self: flex-start;
	font-weight: 600;
}