/* schedule.css - レイアウトとUIスタイルを集約 */
/* デザイン変数（カラム幅・色・固定ヘッダ寸法） */
:root {
	--border: #000000;
	--line-soft: #cfd4dc;
	--line-mid: #ddd;
	--line-light: #e5e5e5;
	--surface-white: #fff;
	--surface-tab-active: #cfead8;
	--day-width: 3.5rem;
	--col-company: 140px;
	--col-date: 130px;
	--col-text: 320px;
	--col-est: 120px;
	--col-income: 120px;
	--col-summary: 75px;
	--col-summary-total: 75px;
	--scroll-tail-right: 0px;
	--scroll-tail-bottom: 0px;
	--toolbar-height: 45px;
	--column-head-height: 42px;
	--header-title-height: 60px;
	--plan-mark: #111;
	--actual-mark: #0f67b1;
	--btn-blue: #2b8cf5;
	--btn-blue-dark: #1f6fcc;
	--btn-navy: #1f2f55;
	--btn-navy-dark: #14223f;
	--btn-green: #52d298;
	--btn-green-dark: #3bbf82;
	--btn-orange: #f5a046;
	--btn-orange-dark: #e1872c;
	--btn-red: #f76c6c;
	--btn-red-dark: #d44e4e;
	--sunday-bg: #FD9DA3;
	--saturday-bg: #B9DFFD;
	--dialog-label-width: 120px;
	--font-size: initial;
}

* { box-sizing: border-box; }
html { font-size: 100%; height: 100%; }
body {
	font-family: 'Noto Sans JP', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
	font-size: 1.05rem; /* up from ~16px → ~16.8px */
	line-height: 1.65;
	background: #f7f7f7;
	color: #222;
	min-height: 100%;
	display: flex;
	flex-direction: column;
}
.app.fixed-footer.mt-0 {
	display: flex;
	flex-direction: column;
	/* main.css の固定フッター用 margin を打ち消し、表示領域内で完結させる */
	margin-bottom: 0;
	min-height: calc(100vh - var(--fixed-footer-advertising));
	min-height: calc(100dvh - var(--fixed-footer-advertising));
	height: calc(100vh - var(--fixed-footer-advertising));
	height: calc(100dvh - var(--fixed-footer-advertising));
}
#calendar-container {
	margin-inline: 14px;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	display: flex;
}

/* タイトルと検索バー */
.page-title {
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-align: left; /* main.css の h1 中央寄せを上書き */
	flex: 0 1 auto;
	white-space: nowrap;
}
.page-title-bar {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 12px;
	padding: 0 10px;
	min-height: var(--header-title-height);
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}
.group-select {
	min-width: 180px;
	flex: 0 0 220px;
	max-width: 100%;
	padding: 6px 10px;
	border: 1px solid var(--line-soft);
	border-radius: 4px;
	background: var(--surface-white);
	font-size: 0.95rem;
	line-height: 1.3;
}
/* グループセレクト右側に配置するPDFボタンの表示を揃える */
.btn.page-title-pdf-btn {
	flex: 0 0 auto;
	height: 32px;
	padding: 0 12px;
	font-size: 1rem;
	line-height: 1;
	border-radius: 10px;
}
/* PDF出力形式を切り替える月別チェックボックス */
.pdf-monthly-output-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.95rem;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
}
/* 月別チェックボックス本体の余白をリセットする */
.pdf-monthly-output-label input[type="checkbox"] {
	margin: 0;
}
/* PDFボタン右側に配置する関連案件セレクト */
.related-anken-select {
	max-width: 100%;
	padding: 6px 10px;
	border: 1px solid var(--line-soft);
	border-radius: 4px;
	background: var(--surface-white);
	font-size: 0.95rem;
	line-height: 1.3;
}
#message-area {
	position: fixed;
	top: 8px;
	left: 10px;
	z-index: 1200;
	max-width: min(560px, calc(100vw - 20px));
	margin: 0;
	min-height: 0;
	padding: 10px 12px;
	background: var(--surface-white);
	border: 1px solid var(--line-soft);
	border-radius: 8px;
	box-shadow: 0 8px 20px rgba(0,0,0,0.16);
	font-size: 0.95rem;
	line-height: 1.45;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	word-break: break-word;
	pointer-events: none;
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.18s ease, transform 0.18s ease;
}
#message-area:empty {
	opacity: 0;
	transform: translateY(-8px);
}
#message-area.notice-msg {
	background-color: #FFFFFF;
	color: #000000;
}
#message-area.warn-msg {
	background-color: #FFFFCC;
	color: #FF0000;
}
#message-area.err-msg {
	background-color: #ffe5e2;
	color: #FF0000;
}
.toolbar {
	margin: 0 0 10px 0;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid var(--border);
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
	align-items: center;
}
.toolbar label {
	font-size: 0.98rem;
	font-weight: 600;
	margin-right: 6px;
}
.toolbar input[type="date"],
.toolbar select {
	padding: 6px 8px;
	font-size: 1rem;
	border: 1px solid var(--line-soft);
	border-radius: 6px;
}
.toolbar .btn {
	padding: 6px 12px;
	font-size: 1rem;
	border-radius: 12px;
}
.btn.search:not(.def-btn) { border-color: #0f67b1; background: linear-gradient(180deg, #2185d0 0%, #0f67b1 100%); color: #fff; }
.btn.new { border-color: var(--btn-blue-dark); background: linear-gradient(180deg, var(--btn-blue) 0%, var(--btn-blue-dark) 100%); color: #fff; }
.btn.save { border-color: var(--btn-navy-dark); background: linear-gradient(180deg, var(--btn-navy) 0%, var(--btn-navy-dark) 100%); color: #fff; }

/* レイアウト（左固定＋横スクロール） */
.calendar-pane {
	background: #fff;
	border: 1px solid var(--border);
	padding: 8px 10px 12px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
	position: relative;
	display: flex;
	width: 100%;
	min-width: 0;
	min-height: 0;
	flex: 1 1 auto;
	gap: 0;
	align-items: stretch;
	/* 高さは親コンテナの flex で確定させ、スクロールは .scroll-wrap へ委譲 */
	max-height: none;
}
.scroll-wrap {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	min-height: 0;
	overflow-x: auto;
	overflow-y: auto;
}
#js-rows {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}
/* 下端の見切れ防止余白。固定フッター/OSバーにセルが隠れないようにする */
.pane-body {
	padding: 0 var(--scroll-tail-right) calc(3rem + var(--scroll-tail-bottom)) 0;
	background: #fff;
	position: relative;
	width: max-content;
	min-width: 100%;
}

/* グリッド（ヘッダ3行＋データ行） */
.grid-row {
	display: grid;
	grid-template-columns:
		var(--col-company)
		var(--col-date)
		var(--col-text)
		var(--col-est)
		var(--col-income)
		var(--col-summary)
		var(--col-summary-total)
		repeat(var(--day-count), var(--day-width));
	min-width: calc(
		var(--col-company) + var(--col-date) + var(--col-text) +
		var(--col-est) + var(--col-income) + var(--col-summary) + var(--col-summary-total) +
		(var(--day-width) * var(--day-count))
	);
	background: #fff;
	position: relative;
	z-index: 2;
}
/* 実データ行のみ 2px 開けて視認性を確保。ヘッダ行は隙間を作らない */
.grid-row { margin-top: 2px; }
.grid-row.is-header { margin-top: 0; }
.grid-row.is-header + .grid-row.is-header { margin-top: 0; }
.timeline.actual { margin-top: 0; }
.grid-row.timeline.actual > * { border-top: 0; }
.grid-row.total-row {
	margin-top: 0;
	padding-top: 2px;
}
#js-rows.fill-bottom .grid-row.total-row.total-row-first { margin-top: auto; }
.grid-row.total-row.is-sticky {
	position: sticky;
	bottom: 0;
	z-index: 5;
	box-shadow: 0 -2px 6px rgba(0,0,0,0.08);
}
.grid-row.total-row .cell {
	background: #fffbe8;
	font-weight: 700;
}
.grid-row.total-row.is-selected .cell {
	background: #FBA366;
}
.grid-row.total-row .cell.company {
	justify-content: center;
	text-align: center;
}
.grid-row.total-row .cell.company.col-company {
	cursor: pointer;
	background: #fff;
}
.grid-row.total-row .cell.company.col-company:hover {
	background: #fff;
}
.grid-row.total-row.is-selected .cell.company.col-company {
	cursor: default;
	background: #fff;
}
.grid-row.total-row.is-selected .cell.company.col-company:hover {
	background: #fff;
}
/* 関連グループ切替可能な会社名セルは選択行でもボタン操作できる見た目を維持する */
.grid-row.total-row.is-selected .cell.company.col-company.is-switchable {
	cursor: pointer;
}
.grid-row.total-row .cell.col-est,
.grid-row.total-row .cell.col-income {
	text-align: right;
}
.grid-row.total-row .cell.text.col-text {
	justify-content: center;
	text-align: center;
}
.grid-row.total-row .cell.total-day {
	text-align: center;
}

/* stickyヘッダの積み上げ順を固定（年月 -> 列名 -> 曜日） */
.month-row {
	position: sticky;
	top: 0;
	z-index: 8;
	background: #fff;
	min-height: var(--toolbar-height);
}
.head.month-head {
	position: relative;
	z-index: 5;
	text-align: left;
	padding-left: 10px;
	background: #f5f5f5;
}
.month-head-pinned {
	position: absolute;
	top: 0;
	z-index: 9;
	display: flex;
	align-items: center;
	min-height: var(--toolbar-height);
	padding: 8px;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.45;
	background: #f5f5f5;
	border: 1px solid var(--border);
	border-left: none;
	border-right: none;
	box-shadow: none;
	pointer-events: none;
	white-space: nowrap;
	transform: translateX(0);
	/* 左固定列ぶん右へ寄せて日付ヘッダ開始列に合わせる */
	left: calc(
		var(--col-company) +
		var(--col-date) +
		var(--col-text) +
		var(--col-est) +
		var(--col-income) +
		var(--col-summary) +
		var(--col-summary-total)
	);
}
.month-head-pinned::after {
	content: '';
	position: absolute;
	top: 1px;
	right: -2px;
	width: 4px;
	height: calc(100% - 2px);
	background: #f5f5f5;
	pointer-events: none;
}
/* 共通の末尾セル罫線指定より優先して、固定月ラベル右罫線を非表示化 */
.month-row > .month-head-pinned:last-child {
	border-right: none;
}
.grid-row.is-header.column-header-row {
	position: sticky;
	top: var(--toolbar-height);
	z-index: 7;
	background: #fff;
	min-height: var(--column-head-height);
}
.grid-row.is-header.column-header-row + .grid-row.is-header {
	position: sticky;
	/* 列名ヘッダ高ぶん下に積む */
	top: calc(var(--toolbar-height) + var(--column-head-height));
	z-index: 6;
	background: #fff;
}
.head.toolbar-head {
	position: sticky;
	top: 0;
	z-index: 7;
}

.sticky {
	position: sticky;
	left: 0;
	z-index: 4;
	background: #fff;
	box-shadow: 2px 0 4px rgba(0,0,0,0.06);
}

.cell, .head {
	border: 1px solid var(--border);
	border-left: none;
	padding: 8px 5px;
	line-height: 1.45;
	font-size: 1.125rem;
	background: #fff;
}
/* ヘッダの線を整える */
.grid-row.is-header > * { border-bottom: 1px solid var(--border); }
.grid-row.is-header + .grid-row.is-header > * { border-top: 0; }
/* ヘッダの二重線を防ぐ: 上から順に1本だけ残す */
.grid-row.is-header:not(#js-dow-row) > * { border-bottom: 0; }
.grid-row.is-header:not(:first-of-type) > *:first-child { border-left: 0; }
.grid-row.is-header:not(:first-of-type) > *:last-child  { border-right: 0; }
/* 固定列ヘッダの上線も二重にならないようにする */
.grid-row.is-header:not(:first-of-type) > .head.sticky { border-top: 0; }
/* 左右の枠を確実に描く */
.grid-row > *:first-child { border-left: 1px solid var(--border); }
.grid-row > *:last-child  { border-right: 1px solid var(--border); }

.head { font-weight: 700; text-align: center; background: #f5f5f5; }
.head.col-company.js-company-sort {
	cursor: pointer;
	user-select: none;
}
.head.col-company.js-company-sort.is-company-sort-asc {
	background: #F0F8FF;
}
.head.col-company.js-company-sort.is-company-sort-desc {
	background: #FEEEED;
}
.head.js-people-display-toggle {
	cursor: pointer;
	user-select: none;
}
.action-head {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px 6px;
	gap: 6px;
}
.action-head .btn {
	flex: 1 1 0;
	justify-content: center;
}
.day-number, .dow {
	text-align: center;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.45;
	padding: 8px 5px;
	border: 1px solid var(--border);
	border-left: none;
}
.day-number[data-date], .dow[data-date] {
	cursor: pointer;
}
.sun { background: var(--sunday-bg); }
.sat { background: var(--saturday-bg); }

.dot {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--plan-mark);
	display: block;
	margin: 0 auto;
}
.timeline.actual .dot { background: var(--actual-mark); }
.cell.slot { min-height: 24px; position: relative; }
.grid-row.timeline.plan .cell.slot { cursor: pointer; }
.cell.slot .slot-value {
	display: block;
	width: 100%;
	min-height: 22px;
	line-height: 1.35;
	text-align: center;
	font-size: 0.95rem;
}
.cell.slot.in-plan-range { background: #FBDF66; }
.cell.actions { padding: 4px; display: flex; gap: 6px; align-items: center; }
.cell.money-label { text-align: center; font-weight: 700; background: #f3f3f3; }
.cell.money-value { text-align: right; font-weight: 700; }
.cell.company {
	text-align: left;
	font-weight: 700;
	display: flex;
	flex-direction: column;
	gap: 6px;
	justify-content: center;
}
.cell.company .company-line,
.cell.text .text-line {
	display: block;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
}
.cell.text .text-line.sub {
	display: block;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
}
.cell.company .company-line { font-weight: 700; }
.cell.company .action-line {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: center;
}
.cell.date {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 2px;
	padding-top: 4px;
	padding-bottom: 4px;
	min-width: 0;
	text-align: left;
}
.date-line {
	display: block;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
}
.date-line.plan { color: var(--plan-mark); font-weight: 700; }
.date-line.actual { color: var(--actual-mark); font-weight: 700; }
.cell.amount { text-align: right; }
.cell.money {
	display: flex;
	flex-direction: column;
	gap: 3px;
	background: #fafafa;
}
.cell.label,
.cell.summary {
	text-align: center;
	font-weight: 700;
	background: #fffaf2;
}
.timeline.actual .cell.label,
.timeline.actual .cell.summary {
	background: #f8fbff;
}
.money-line.status { font-weight: 700; text-align: left; }
.money-line.amount { text-align: right; font-weight: 700; }

/* 一覧の状態列で使用するセレクトボックスの表示幅をセル幅に合わせる */
.schedule-status-select {
	width: 100%;
	min-width: 0;
	padding: 2px 4px;
	border: 1px solid var(--line-soft);
	border-radius: 4px;
	background: #fff;
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.2;
	color: inherit;
}

/* 表示専用のため disabled でも可読性を維持する */
.schedule-status-select:disabled {
	opacity: 1;
	color: inherit;
	background: #fff;
	cursor: default;
}
.cell.text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	justify-content: center;
}
.text-line { line-height: 1.35; }

/* 固定列の位置（inline style を排除） */
.col-company { left: 0; }
.col-date { left: var(--col-company); }
.col-text { left: calc(var(--col-company) + var(--col-date)); }
/* 各列のleftは左側列の合計値で算出し、DOM順変更時の保守を容易にする */
.col-est,.col-status { left: calc(var(--col-company) + var(--col-date) + var(--col-text)); }
.col-income { left: calc(var(--col-company) + var(--col-date) + var(--col-text) + var(--col-est)); }
.col-summary { left: calc(var(--col-company) + var(--col-date) + var(--col-text) + var(--col-est) + var(--col-income)); }
.col-summary-total { left: calc(var(--col-company) + var(--col-date) + var(--col-text) + var(--col-est) + var(--col-income) + var(--col-summary)); }

.head.col-est.span2 { grid-column: span 2; }

/* ボタン共通 */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0 12px;
	border-radius: 12px;
	border: 1px solid transparent;
	background: linear-gradient(180deg, #fff 0%, #f3f3f3 100%);
	color: #2b2b2b;
	font-size: 0.98rem;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.12s ease;
	white-space: nowrap;
	cursor: pointer;
}

/* ヘッダ内に収めるインライン版ツールバー */
.toolbar-inline {
	margin: 0;
	padding: 0;
	width: 100%;
	background: transparent;
	border: none;
	box-shadow: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
}
.page-title-toolbar {
	margin-left: auto;
	flex: 0 0 auto;
	min-width: 0;
	width: auto;
	max-width: none;
	justify-content: flex-end;
	gap: 6px 8px;
	flex-wrap: nowrap;
	overflow: visible;
}
.page-title-toolbar > div {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	flex: 0 0 auto;
}
.page-title-toolbar input[type="date"] {
	width: 148px;
}
.page-title-toolbar select {
	width: 104px;
}
.page-title-toolbar .toolbar-end-wrap input[type="date"] {
	min-width: 0;
}
.toolbar-head {
	padding: 2px 4px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.toolbar-inline .toolbar-actions {
	display: inline-flex;
	gap: 8px;
}
.toolbar-inline .toolbar-month-shift {
	display: inline-flex;
	align-items: center;
}
.toolbar-inline .toolbar-range-separator {
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
}
.toolbar-inline .btn.month-shift {
	border-radius: 10px;
	height: 32px;
}
.toolbar-inline label { margin-right: 6px; }
.toolbar-inline input[type="date"] { padding: 5px 7px; }
.toolbar-inline .btn { border-radius: 10px; }

.column-visibility-area {
	position: relative;
	display: inline-flex;
	align-items: center;
}
.column-visibility-toggle {
	height: 30px;
	padding: 0 10px;
	font-size: 0.9rem;
}
.column-visibility-menu {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	min-width: 140px;
	padding: 8px 10px;
	border: 1px solid var(--line-soft);
	border-radius: 8px;
	background: var(--surface-white);
	box-shadow: 0 6px 14px rgba(0,0,0,0.16);
	z-index: 12;
}
.column-visibility-option {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.9rem;
	line-height: 1.4;
	padding: 2px 0;
	cursor: pointer;
}
.column-visibility-option input {
	margin: 0;
}
.js-col-toggle {
	cursor: pointer;
	user-select: none;
}

/* 固定列の表示/非表示切替
 * display:none にすると grid の自動配置が詰まり列順が崩れるため、
 * 要素は残したままトラック幅0 + 視覚非表示で対応する。 */
.calendar-pane.is-hide-date .col-date,
.calendar-pane.is-hide-text .col-text,
.calendar-pane.is-hide-status .col-status,
.calendar-pane.is-hide-status .col-est,
.calendar-pane.is-hide-status .col-income,
.calendar-pane.is-hide-summary .col-summary,
.calendar-pane.is-hide-summary-total .col-summary-total {
	visibility: hidden;
	pointer-events: none;
	width: 0;
	min-width: 0;
	max-width: 0;
	padding: 0;
	border-width: 0;
	overflow: hidden;
	white-space: nowrap;
	font-size: 0;
	line-height: 0;
}
.calendar-pane.is-hide-date .col-date > *,
.calendar-pane.is-hide-text .col-text > *,
.calendar-pane.is-hide-status .col-status > *,
.calendar-pane.is-hide-status .col-est > *,
.calendar-pane.is-hide-status .col-income > *,
.calendar-pane.is-hide-summary .col-summary > *,
.calendar-pane.is-hide-summary-total .col-summary-total > * {
	display: none !important;
}
/* ローディング中の連打防止 + スピナー描画 */
.btn.loading {
	opacity: 0.72;
	pointer-events: none;
	position: relative;
}
.btn.loading::after {
	content: '';
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,0.6);
	border-top-color: rgba(255,255,255,1);
	animation: spin 0.9s linear infinite;
}
@keyframes spin {
	to { transform: rotate(360deg); }
}
.btn.green  { border-color: var(--btn-green-dark);  background: linear-gradient(180deg, var(--btn-green) 0%, var(--btn-green-dark) 100%); color: #fff; }
.btn.orange { border-color: var(--btn-orange-dark); background: linear-gradient(180deg, var(--btn-orange) 0%, var(--btn-orange-dark) 100%); color: #fff; }
.btn.red    { border-color: var(--btn-red-dark);    background: linear-gradient(180deg, var(--btn-red) 0%, var(--btn-red-dark) 100%); color: #fff; }
.btn:hover {
	text-decoration: none;
	filter: brightness(1.05);
	box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.btn.green:hover,
.btn.orange:hover,
.btn.red:hover,
.btn.search:hover,
.btn.new:hover,
.btn.save:hover {
	color: #fff;
}
.btn svg { width: 12px; height: 12px; }
.btn.ghost { background: var(--surface-white); border: 1px solid var(--line-soft); color: #333; }

/* モーダル (dialog要素) */
dialog {
	border: none;
	padding: 0;
	background: #FFFFFF;
	max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px);
	display: none;
}
dialog[open] {
	display: flex;
	align-items: center;
	justify-content: center;
}
dialog::backdrop {
	background: rgba(0,0,0,0.35);
	backdrop-filter: blur(1px);
}
.dialog {
	background: #fff;
	width: min(520px, 100%);
	max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px);
	max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px);
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow-y: hidden; /* 本文(.body)のみをスクロールさせる */
	overflow-x: hidden;
}
#dlg-form {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
}
.dialog header {
	padding: 12px 16px 8px;
	font-weight: 700;
	border-bottom: 1px solid var(--line-light);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	position: sticky;
	top: 0;
	z-index: 6;
	background: #fff;
	box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.dialog .dialog-title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.dialog .body {
	padding: 14px 16px 10px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1 1 auto;
	overflow-y: auto; /* 本文のみスクロール */
	overflow-x: hidden;
	min-height: 0; /* enable scrolling inside flex parent */
	background: #fff;
}
.dialog label:not(.checkbox-label),
.dialog .def-label {
	font-weight: 600;
	font-size: 1rem;
	background: var(--def-label-background);
	border-radius: 4px;
	padding: 4px 8px;
	min-height: 34px;
	display: flex;
	align-items: center;
	white-space: nowrap;
	overflow: hidden;
}
.dialog input[type="text"],
.dialog input[type="date"],
.dialog input[type="number"],
.dialog select {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--line-soft);
	border-radius: 6px;
	font-size: 1rem;
}
.dialog select {
	background: var(--surface-white);
}
.dialog .field-display {
	display: block;
	padding: 8px 10px;
	min-height: 38px;
	font-size: 1rem;
	line-height: 1.5;
}
/*==================== 
* ラベル編集ボタン行
* ====================*/
/* ラベル編集行を横並びにし、右側ボタンの配置余白を確保する */
.custom-field-edit {
	align-items: center;
	gap: 8px;
}
/* 初期値取込ボタンを同一行の右端に寄せて表示する */
.custom-field-edit .btn-import-default-labels {
	margin-left: auto;
}

/* 監査表示は3タブ共通。セレクタを集約して差分混入を防ぐ */
#info-audit,
#estimate-audit,
#invoice-audit {
	margin-top: 12px;
	border-top: 1px solid var(--line-mid);
	padding-top: 8px;
	grid-column: 1 / 3;
	width: 100%;
}
#info-audit .audit-row,
#estimate-audit .audit-row,
#invoice-audit .audit-row {
	display: flex;
	gap: 12px;
	padding: 2px 0;
}
#info-audit .audit-label,
#estimate-audit .audit-label,
#invoice-audit .audit-label {
	min-width: var(--dialog-label-width);
	color: #555;
	font-weight: 600;
}
#info-audit .audit-value,
#estimate-audit .audit-value,
#invoice-audit .audit-value {
	flex: 1;
	color: #222;
	min-width: 0;
	word-break: break-word;
}
/* 請求タブのラベル幅を他タブと合わせる */
.invoice-price-row {
	display: flex;
	align-items: center;
	gap: 8px;
	grid-column: 1 / -1;
}
.invoice-price-row .def-label {
	flex: 0 0 var(--dialog-label-width);
	max-width: var(--dialog-label-width);
}
.invoice-price-row .field-display {
	flex: 1;
	min-width: 0;
	display: inline-block;
	padding: 0;
	border: none;
	background: transparent;
}
.invoice-price-row .def-label-input {
	max-width: var(--dialog-label-width);
	width: var(--dialog-label-width);
}
.tab-panel[data-tab="invoice"] .def-label-input {
	max-width: var(--dialog-label-width);
	width: var(--dialog-label-width);
}
.checkbox-label.checkbox-narrow {
	min-width: 32px;
	display: inline-flex;
	justify-content: center;
}
.dialog footer {
	padding: 12px 16px 14px;
	padding-bottom: 14px;
	border-top: 1px solid var(--line-light);
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	flex-wrap: wrap;
	position: sticky;
	bottom: 0;
	background: #fff;
	z-index: 3;
}

#dlg .dialog footer {
	flex-wrap: nowrap;
	gap: clamp(4px, 1.6vw, 10px);
}

#dlg .dialog footer .btn {
	min-width: 0;
	padding-left: clamp(6px, 2vw, 12px);
	padding-right: clamp(6px, 2vw, 12px);
	font-size: clamp(0.72rem, 2.4vw, 0.98rem);
}

/* ダイアログ本文は小画面で文字とラベル幅を可変縮小して収める */
#dlg {
	--dialog-label-width: clamp(84px, 24vw, 120px);
	overflow: hidden;
}

/* ダイアログ本文の入力・表示文字サイズを小画面で自然に縮小する */
#dlg .dialog .body label:not(.checkbox-label),
#dlg .dialog .body .def-label,
#dlg .dialog .body input[type="text"],
#dlg .dialog .body input[type="date"],
#dlg .dialog .body input[type="number"],
#dlg .dialog .body select,
#dlg .dialog .body .field-display {
	font-size: clamp(0.72rem, 2.2vw, 1rem);
}

/* ダイアログ内タブ見出しの改行を防ぎ、小画面で少し詰める */
#dlg .tab-list {
	gap: clamp(4px, 1.4vw, 6px);
	overflow-x: auto;
}

#dlg .tab-button {
	white-space: nowrap;
	padding: clamp(6px, 1.8vw, 8px) clamp(8px, 2.4vw, 12px);
	font-size: clamp(0.72rem, 2.1vw, 1rem);
}

/* ダイアログ本文パネルの余白・隙間を小画面で少し詰める */
#dlg .tab-panels {
	padding: clamp(8px, 2vw, 12px) clamp(8px, 2vw, 12px) 2px;
}

#dlg .tab-panel {
	column-gap: clamp(6px, 1.8vw, 12px);
	row-gap: clamp(6px, 1.8vw, 10px);
}

/* グリッド/Flex内の子要素を縮められるようにしてはみ出しを防ぐ */
#dlg .tab-panel > *,
#dlg .invoice-price-row > * {
	min-width: 0;
}

/* ラベル編集ボタン行も小画面で詰めて改行・はみ出しを抑える */
#dlg .custom-field-edit {
	gap: clamp(4px, 1.4vw, 8px);
}

#dlg .custom-field-edit .btn {
	min-width: 0;
	padding-left: clamp(6px, 2vw, 12px);
	padding-right: clamp(6px, 2vw, 12px);
	font-size: clamp(0.68rem, 2vw, 0.98rem);
}

/* 見積/請求価格行の横幅超過を防ぐ */
#dlg .invoice-price-row {
	gap: clamp(4px, 1.4vw, 8px);
}

#dlg .invoice-price-row input[type="text"]:not(.def-label-input),
#dlg .invoice-price-row input[type="number"] {
	flex: 1 1 auto;
	min-width: 0;
}

#dlg .invoice-price-row .checkbox-label.checkbox-narrow {
	flex: 0 0 clamp(24px, 5vw, 32px);
	min-width: clamp(24px, 5vw, 32px);
	padding: 0;
}

/* 作成ユーザ～更新日時の監査表示も小画面で改行させずに収める */
#dlg #info-audit .audit-row,
#dlg #estimate-audit .audit-row,
#dlg #invoice-audit .audit-row {
	gap: clamp(6px, 1.6vw, 12px);
	font-size: clamp(0.68rem, 2vw, 1rem);
	flex-wrap: nowrap;
}

#dlg #info-audit .audit-label,
#dlg #estimate-audit .audit-label,
#dlg #invoice-audit .audit-label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#dlg #info-audit .audit-value,
#dlg #estimate-audit .audit-value,
#dlg #invoice-audit .audit-value {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: normal;
}

/* タブ/メッセージ表示 */
.tab-wrap {
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: #fff;
	padding-top: 0;
	padding-bottom: 8px;
}
.dialog-message {
	min-height: 2rem;
	padding: 4px 8px;
	border: 1px solid var(--line-soft);
	border-radius: 4px;
	background: var(--surface-white);
	font-size: 0.9rem;
	line-height: 1.4;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	word-break: break-word;
}
.tab-list {
	display: flex;
	gap: 6px;
	padding: 4px 0 0;
	margin: 0;
}
.tab-button {
	border: 1px solid var(--line-soft);
	background: #f8f9fb;
	padding: 8px 12px;
	border-radius: 8px 8px 0 0;
	font-weight: 700;
	cursor: pointer;
	color: #333;
}
.tab-button:hover {
	border-bottom: none;
}
.tab-button.is-active {
	background: var(--surface-tab-active);
	border-bottom-color: var(--surface-tab-active);
	color: #1f6b43;
	box-shadow: 0 -1px 6px rgba(0,0,0,0.05);
}
.tab-button.is-disabled,
.tab-button[aria-disabled="true"] {
	cursor: not-allowed;
	pointer-events: none;
	color: #9aa0a8;
	background: #f1f3f6;
	border-color: #e1e4ea;
	box-shadow: none;
}
.tab-panels {
	border: 1px solid var(--line-soft);
	border-radius: 10px;
	padding: 12px 12px 2px;
	background: var(--surface-white);
	min-height: 0;
	max-height: none;
}
.tab-panel {
	display: grid;
	/* 左: ラベル固定幅(120px), 右: 入力エリア可変 */
	grid-template-columns: var(--dialog-label-width) 1fr;
	column-gap: 12px;
	row-gap: 10px;
	min-height: 0;
}
/* 案件名入力の右カラムにアイコン選択と入力欄を横並び配置 */
.anken-name-input-row {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
/* 案件アイコン未選択時でもクリック領域が維持されるよう固定サイズ化 */
.anken-name-input-row .icon-area {
	flex: 0 0 auto;
	border-radius: 6px;
	border-color: var(--line-soft);
	overflow: hidden;
}
/* 案件名入力欄が残幅を使用できるよう可変幅を設定 */
.anken-name-input-row input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
}

/* 請求書タブ用の行整列 */
.invoice-row {
	grid-column: 1 / 3;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: nowrap;
}
.invoice-row label {
	margin: 0;
	min-width: 72px;
}
.invoice-row select {
	flex: 1 1 160px;
}
.invoice-row input[type="text"] {
	flex: 1 1 140px;
}
.invoice-row .checkbox-label {
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	font-weight: 400;
	min-width: 26px;
	padding: 0 2px;
}
.invoice-row input[type="checkbox"] {
	cursor: pointer;
}
.price00-divider-row {
	/* PRICE00 行の区切りを目立たせる（二重線） */
	border-bottom: 3px double #7d7d7d;
	padding-bottom: 6px;
	margin-bottom: 2px;
}
/* サマリー対象（01-10）と対象外（11-20）の境界を明示する */
.price-summary-divider-row {
	grid-column: 1 / -1;
	border-top: 1px solid #7d7d7d;
	height: 0;
}
/* アイコン選択ダイアログ本体の幅と縦レイアウトを定義 */
.icon-select-dialog {
	width: min(620px, calc(100vw - 32px));
	max-height: calc(100vh - 64px);
	display: flex;
	flex-direction: column;
	background: var(--surface-white);
}
/* アイコン選択ダイアログのヘッダー領域 */
.icon-select-header {
	padding: 10px 14px;
	border-bottom: 1px solid var(--line-soft);
}
/* アイコン選択ダイアログのタイトル表示 */
.icon-select-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	text-align: left;
}
/* アイコン選択ダイアログの一覧領域（スクロール対応） */
.icon-select-content {
	padding: 12px;
	overflow-y: auto;
	max-height: calc(100vh - 140px);
	/* 既存 icon-list-area の100px基準を上書きし、1行に表示できる件数を増やす */
	grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
	/* すべてのカード幅を同一化する */
	place-items: stretch;
	column-gap: 8px;
	row-gap: 8px;
}
/* 未選択・キャンセル・通常アイコンの幅をすべて同一化 */
.icon-select-content .icon-select-action,
.icon-select-content .group-icon,
.icon-select-content .single-icon {
	width: 100%;
	min-width: 112px;
}
/* 未選択・キャンセル操作ボタンの見た目をアイコン一覧に合わせる */
.icon-select-action {
	min-height: 96px;
	border: 1px solid var(--line-soft);
	border-radius: 8px;
	background: var(--surface-white);
	font-size: 0.95rem;
	font-weight: 700;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px;
}
/* 未選択・キャンセルのhoverは通常アイコンと同じ見え方に統一する */
.icon-select-content .icon-select-action:hover {
	opacity: 1;
	border: 1px solid var(--line-soft);
	border-bottom: 1px solid var(--line-soft);
}
/* 操作ボタン内アイコンのサイズと収まりを調整 */
.icon-select-action > img {
	width: 52px;
	height: 52px;
	object-fit: contain;
}
/* 操作ボタン内テキストの折り返しと省略を制御 */
.icon-select-action-label {
	display: block;
	width: 100%;
	color: #333;
	text-align: center;
	line-height: 1.2;
	font-size: 0.85rem;
	white-space: nowrap;
}
/* キャンセル操作は文字色のみを調整する */
.icon-select-action.cancel {
	background: var(--surface-white);
	color: #555;
}
/* グループ・単体アイコン要素をカード表示に統一 */
.group-icon,
.single-icon {
	min-height: 120px;
	padding: 8px;
	border: 1px solid var(--line-soft);
	border-radius: 8px;
	background: var(--surface-white);
	display: grid;
	place-items: center;
	text-align: center;
	gap: 4px;
}
/* アイコン名が枠に収まらない場合は省略記号で切り落とす */
.group-icon h5,
.single-icon h5 {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.25;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* 対象データがない場合のプレースホルダ表示 */
.icon-select-empty {
	grid-column: 1 / -1;
	padding: 8px 10px;
	border: 1px dashed var(--line-soft);
	border-radius: 8px;
	color: #666;
	text-align: center;
}

.tab-panel:not(.is-active) { display: none; }