/* mugen — bquireのデザインルールを踏襲した buildless CSS。
   色はすべて変数（:root のCSS custom properties）参照。px単位・8px/2pxグリッド。 */

:root {
	/* green */
	--color-green-main: #059669;
	--color-green-10: #e6f4f0;
	/* blue */
	--color-blue-main: #3182ce;
	--color-blue-10: #eaf2fa;
	/* red */
	--color-red-main: #f25047;
	--color-red-10: #fdedec;
	/* black scale */
	--color-black-main: #1c1917;
	--color-black-60: #767573;
	--color-black-30: #a8a8a7;
	--color-black-20: #d1d1d0;
	--color-black-10: #e8e8e7;
	/* white */
	--color-white-main: #f8fafc;
	--color-white-sub: #ffffff;

	--border-color: var(--color-black-10);
	--border-radius-sm: 4px;
	--border-radius-md: 8px;
	--shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.1);

	--font-family-base: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	font-family: var(--font-family-base);
	background-color: var(--color-white-main);
	color: var(--color-black-main);
	font-size: 16px;
	line-height: 1.6;
}

a { color: inherit; text-decoration: none; }

/* ---- レイアウト ---- */
.l-container-app {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 24px;
}

.appHeader {
	background-color: var(--color-white-sub);
	border-bottom: 1px solid var(--border-color);
}
.appHeader__inner {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 64px;
}
.appHeader__brand {
	font-size: 24px;
	font-weight: 700;
	color: var(--color-green-main);
	letter-spacing: 1px;
}
.appHeader__tag {
	font-size: 12px;
	color: var(--color-black-60);
}

.appMain { padding: 40px 24px 80px; }
/* 縦リズムを統一: appMain 直下のセクションに一律の下マージン（詰まり防止）。
   個別クラスの margin-bottom より優先させるため詳細度を上げる（2クラス）。 */
.l-container-app.appMain > * { margin-bottom: 32px; }
.l-container-app.appMain > *:last-child { margin-bottom: 0; }

.appFooter {
	border-top: 1px solid var(--border-color);
	padding: 24px 0;
	font-size: 12px;
	color: var(--color-black-60);
}

.appAlert {
	border-left: 4px solid var(--color-red-main);
	color: var(--color-black-main);
	margin-bottom: 24px;
}

/* ---- ページヘッダ ---- */
.pageHead { margin-bottom: 24px; }
.pageHead__back {
	display: inline-block;
	font-size: 14px;
	color: var(--color-black-60);
	margin-bottom: 8px;
}
.pageHead__title { font-size: 28px; font-weight: 700; margin: 0; }
.pageHead__sub { font-size: 14px; color: var(--color-black-60); margin: 4px 0 0; }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ---- 期間タブ ---- */
.rangeTabs { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.rangeTabs__tab {
	padding: 8px 16px;
	font-size: 14px;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-sm);
	background: var(--color-white-sub);
	color: var(--color-black-60);
}
.rangeTabs__tabActive {
	background: var(--color-green-main);
	border-color: var(--color-green-main);
	color: #fff;
	font-weight: 700;
}

/* ---- KPIカード ---- */
.kpiGrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 24px;
}
.kpiCard { padding: 24px; }
.kpiCard__label { font-size: 12px; color: var(--color-black-60); margin-bottom: 8px; }
.kpiCard__value { font-size: 28px; font-weight: 700; }

@media (max-width: 768px) {
	.kpiGrid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- c-panel（bquire踏襲） ---- */
.c-panel {
	background-color: var(--color-white-sub);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-md);
	padding: 32px;
	box-shadow: var(--shadow-sm);
}
.c-panel__title {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 24px;
	border-bottom: 1px solid var(--border-color);
	padding-bottom: 16px;
}

/* ---- c-table（bquire踏襲） ---- */
.c-table__wrapper {
	width: 100%;
	border-radius: var(--border-radius-md);
	box-shadow: var(--shadow-sm);
	background: var(--color-white-main);
	overflow-x: auto;
}
.c-table {
	width: 100%;
	border-collapse: collapse;
	background-color: var(--color-white-main);
	border-radius: var(--border-radius-md);
	overflow: hidden;
}
.c-table th, .c-table td { padding: 16px 24px; text-align: left; }
.c-table th {
	background: var(--color-black-20);
	font-weight: 700;
	font-size: 14px;
	color: var(--color-black-60);
	white-space: nowrap;
}
.c-table td { font-size: 14px; color: var(--color-black-main); vertical-align: middle; }
.c-table tbody tr { background-color: var(--color-white-sub); }
.c-table tr { transition: background-color 0.2s; }
.c-table tr:hover { background-color: rgba(0, 0, 0, 0.02); }
.c-table tr.is-clickable { cursor: pointer; }
.c-table tr.is-clickable:hover { background-color: var(--color-black-10); }
.c-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- 一覧ツールバー（フィルタ／ソート） ---- */
.listToolbar { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.listToolbar__spacer { flex: 1; }
.dataFreshness { font-size: 12px; color: var(--color-black-60); white-space: nowrap; }
.pageHead__freshness { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
/* 「今すぐ更新」ボタン（ピル型ゴースト＋回転アイコン） */
.refreshBtn {
	display: inline-flex; align-items: center; gap: 6px;
	height: 32px; padding: 0 14px;
	font-size: 12px; font-weight: 600;
	color: var(--color-black-60);
	background: var(--color-white-main);
	border: 1px solid var(--color-black-20);
	border-radius: 999px;
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
}
.refreshBtn:hover { background: var(--color-black-10); border-color: var(--color-black-30); color: var(--color-black-main); }
.refreshBtn:disabled { cursor: progress; }
.refreshBtn__icon { font-size: 14px; line-height: 1; display: inline-block; }
/* htmx 送信中のローディング表示（送信したフォームに .htmx-request が付く） */
.htmx-showOnReq { display: none; }
form.htmx-request .htmx-hideOnReq { display: none; }
form.htmx-request .htmx-showOnReq { display: inline; }
form.htmx-request .refreshBtn { opacity: 0.7; }
form.htmx-request .refreshBtn__icon { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.segmented { display: inline-flex; border: 1px solid var(--color-black-20); border-radius: var(--border-radius-sm); overflow: hidden; }
.segmented__btn {
	height: 40px; padding: 0 22px; font-size: 14px; font-weight: 700;
	border: 0; border-left: 1px solid var(--color-black-20);
	background: var(--color-white-sub); color: var(--color-black-60); cursor: pointer;
}
.segmented__btn:first-child { border-left: 0; }
.segmented__btn:hover { background: var(--color-black-10); }
.segmented__btn.is-active { background: var(--color-green-main); color: #fff; }
.th-sortable { cursor: pointer; user-select: none; }
.th-sortable:hover { background: var(--color-black-30); }
.th-sortable__ind { display: inline-block; width: 1em; margin-left: 4px; color: var(--color-black-30); }
.th-sortable[data-dir="asc"] .th-sortable__ind::after { content: "▲"; color: var(--color-black-60); }
.th-sortable[data-dir="desc"] .th-sortable__ind::after { content: "▼"; color: var(--color-black-60); }
.th-sortable[data-dir="none"] .th-sortable__ind::after { content: "↕"; }
.listEmpty { padding: 24px; text-align: center; }

/* ---- c-input / c-button（bquire踏襲のグローバル部品） ---- */
.c-input {
	height: 40px;
	padding: 0 12px;
	font-size: 14px;
	font-family: inherit;
	border: 1px solid var(--color-black-20);
	border-radius: var(--border-radius-sm);
	background: var(--color-white-sub);
	color: var(--color-black-main);
}
/* 金額入力は数字を等幅にして桁を揃える */
.cmbInput, .budgetForm__input, .budgetForm__feeInput { font-variant-numeric: tabular-nums; }
.c-input:focus {
	outline: none;
	border-color: var(--color-green-main);
}
.c-button {
	height: 40px;
	padding: 0 24px;
	font-size: 14px;
	font-weight: 700;
	border: 1px solid transparent;
	border-radius: var(--border-radius-sm);
	cursor: pointer;
	background: var(--color-black-10);
	color: var(--color-black-main);
}
.c-button-primary {
	background: var(--color-green-main);
	color: #fff;
}
.c-button-primary:hover { opacity: 0.9; }

.c-button-danger {
	background: var(--color-red-main);
	color: #fff;
}
.c-button-danger:hover { opacity: 0.9; }

/* ---- c-toggle（bquire踏襲） ---- */
.c-toggle {
	position: relative;
	display: inline-block;
	width: 48px;
	height: 24px;
	background-color: var(--color-black-20);
	border-radius: 12px;
	cursor: pointer;
	transition: background-color 0.2s;
	flex-shrink: 0;
}
.c-toggle::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	background-color: var(--color-white-sub);
	border-radius: 50%;
	transition: transform 0.2s;
}
.c-toggleActive { background-color: var(--color-green-main); }
.c-toggleActive::after { transform: translateX(24px); }

/* ---- mugen運用パネル ---- */
.mugenPanel { margin-bottom: 24px; }
.mugenPanel__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
}
.mugenPanel__title { margin-bottom: 8px; border-bottom: none; padding-bottom: 0; }
.mugenPanel__note { font-size: 12px; color: var(--color-black-60); margin: 0 0 16px; max-width: 640px; }
.mugenPanel__control { display: flex; align-items: center; gap: 12px; }

/* ---- モーダル ---- */
.modalOverlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	z-index: 100;
}
.modalOverlay[hidden] { display: none; }
.modal {
	background: var(--color-white-sub);
	border-radius: var(--border-radius-md);
	box-shadow: var(--shadow-sm);
	padding: 32px;
	max-width: 480px;
	width: 100%;
}
.modal__title { font-size: 20px; font-weight: 700; margin: 0 0 16px; }
.modal__titleWarn { color: var(--color-red-main); }
.modal__body { font-size: 14px; line-height: 1.7; color: var(--color-black-main); }
.modal__body p { margin: 0 0 12px; }
.modalNote { font-size: 12px; color: var(--color-black-60); }
.modalList { margin: 0 0 12px; padding-left: 20px; }
.modalList li { margin-bottom: 8px; }
.modal__actions {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 24px;
}

/* ---- 月次予算パネル ---- */
.budgetPanel { margin-bottom: 24px; }
.budgetPanel__note { font-size: 12px; color: var(--color-black-60); margin: -16px 0 24px; }
.budgetPanel__note--sub { margin: 0 0 24px; }
.budgetForm { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.budgetForm__field { display: flex; flex-direction: column; }
.budgetForm__label { font-size: 12px; color: var(--color-black-60); display: block; margin-bottom: 4px; }
.budgetForm__input { width: 200px; }
.budgetForm__feeInput { width: 100px; }
.budgetForm__select { width: 140px; }
.budgetForm__hint { font-size: 12px; color: var(--color-black-60); margin: 8px 0 0; }

/* 手数料込み表示 */
.feeBox {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 16px;
	padding: 16px 24px;
	background: var(--color-blue-10);
	border-radius: var(--border-radius-sm);
	font-size: 14px;
}
.feeBox__item strong { font-size: 16px; }
.feeBox__op { color: var(--color-black-60); }
.feeBox__result strong { color: var(--color-blue-main); }
.feeBox__note { font-size: 12px; color: var(--color-black-60); }

.budgetPace { margin-top: 32px; }
.budgetPace__row { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 10px; }
.budgetBar {
	height: 16px;
	background: var(--color-black-10);
	border-radius: 8px;
	overflow: hidden;
}
.budgetBar__fill {
	height: 100%;
	min-width: 4px;
	background: var(--color-green-main);
	transition: width 0.3s;
}
.budgetBar__fillOver { background: var(--color-red-main); }
.budgetPace__pct { font-size: 13px; color: var(--color-black-60); margin-top: 10px; }
.budgetPace__pctOver { color: var(--color-red-main); font-weight: 700; }

.muted { color: var(--color-black-30); }

/* ---- 日予算の自動配分パネル ---- */
.budgetOpt { margin-bottom: 24px; }
.budgetOpt__warn { font-size: 14px; color: var(--color-black-60); margin: 0; }
.budgetOpt__calc {
	display: flex;
	align-items: stretch;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}
.budgetOpt__item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 24px;
	background: var(--color-white-main);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-sm);
	min-width: 140px;
}
.budgetOpt__item span { font-size: 12px; color: var(--color-black-60); }
.budgetOpt__item strong { font-size: 20px; }
.budgetOpt__result { background: var(--color-green-10); border-color: var(--color-green-main); }
.budgetOpt__result strong { color: var(--color-green-main); }
.budgetOpt__op { display: flex; align-items: center; font-size: 20px; color: var(--color-black-60); }
.budgetOpt__current { font-size: 14px; color: var(--color-black-60); margin-bottom: 16px; }

/* 配分モードセレクタ */
.modeSelector { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.modeBtn {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: 14px 24px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-sm);
	background: var(--color-white-sub);
	color: var(--color-black-60);
	cursor: pointer;
}
.modeBtn__sub { font-size: 12px; font-weight: 400; color: var(--color-black-30); }
.modeBtnActive .modeBtn__sub { color: rgba(255, 255, 255, 0.85); }
.modeBtnActive {
	background: var(--color-green-main);
	border-color: var(--color-green-main);
	color: #fff;
	font-weight: 700;
}

/* キャンペーン単位の月額予算エディタ */
.cmbTable { margin-bottom: 16px; }
.cmbInput { width: 140px; text-align: right; }
.cmbActions { margin-bottom: 16px; }
.cmbButtonRow { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.tcpaResult { display: flex; align-items: center; gap: 10px; margin: 16px 0; font-size: 16px; }
.tcpaResult__arrow { color: var(--color-black-30); }
.tcpaResult__new { color: var(--color-green-main); }
.cmbBasis { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.cmbBasis__field { display: flex; flex-direction: column; gap: 4px; }
.cmbBasis .budgetForm__hint { margin: 0; align-self: center; }
.cmbApply { margin-top: 8px; }

/* ---- フラッシュ（操作結果） ---- */
.flash {
	padding: 12px 16px;
	border-radius: var(--border-radius-sm);
	font-size: 14px;
	margin-bottom: 16px;
}
.flashOk { background: var(--color-green-10); color: var(--color-green-main); }
.flashErr { background: var(--color-red-10); color: var(--color-red-main); }

/* ---- テーブル内の小ボタン・補助表記 ---- */
.inlineForm { margin: 0; }
.c-buttonSm {
	height: 32px;
	padding: 0 12px;
	font-size: 12px;
	white-space: nowrap;
}
.miniBadge { margin-left: 6px; font-size: 10px; padding: 2px 6px; }
.miniHint { font-size: 12px; white-space: nowrap; }

/* ---- c-badge（bquire踏襲） ---- */
.c-badge {
	display: inline-block;
	padding: 4px 8px;
	border-radius: var(--border-radius-sm);
	font-size: 12px;
	font-weight: 700;
}
.c-badge--success { background-color: var(--color-green-10); color: var(--color-green-main); }
.c-badge--error { background-color: var(--color-red-10); color: var(--color-red-main); }
.c-badge--info { background-color: var(--color-blue-10); color: var(--color-blue-main); }
.c-badge--neutral { background-color: var(--color-black-10); color: var(--color-black-60); }
.c-badge--danger { background-color: var(--color-red-10); color: var(--color-red-main); }
.c-badge--warning { background-color: var(--color-yellow-10, #fff4d6); color: var(--color-yellow-main, #a86d00); }

/* ---- ヘッダーナビ ---- */
.appHeader__nav { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.appHeader__link { font-size: 14px; color: var(--color-black-60); }
.appHeader__link:hover { color: var(--color-green-main); }
.appHeader__logout { margin: 0; display: flex; }
.appHeader__logout button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }

/* ---- ログイン ---- */
.loginPanel { max-width: 360px; margin: 64px auto; }
.loginForm { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.loginForm__input { width: 100%; }

/* ---- 承認待ち提案・変更履歴 ---- */
.proposalPanel { border-left: 3px solid var(--color-blue-main); }
.proposalReason, .histReason { font-size: 12px; color: var(--color-black-60); max-width: 360px; }
.proposalActions { display: flex; gap: 6px; }
.histTime { white-space: nowrap; font-size: 12px; }

/* --- トグルスイッチ（曜日トレンド加味など） --- */
.switch { display:inline-flex; align-items:center; gap:.6rem; cursor:pointer; user-select:none; }
.switch input { position:absolute; opacity:0; width:0; height:0; }
.switch__track { position:relative; width:44px; height:24px; border-radius:999px; background:#cbd5e1; transition:background .15s; flex:0 0 auto; }
.switch__track::after { content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .15s; }
.switch input:checked + .switch__track { background: var(--color-green-main); }
.switch input:checked + .switch__track::after { transform: translateX(20px); }
.switch input:focus-visible + .switch__track { outline:2px solid var(--color-green-main); outline-offset:2px; }
.switch__text { font-size:.95rem; }
.dowToggle { margin-bottom:.5rem; }

/* --- フォーム内トグルの高さをinput(40px)に合わせ、ラベル位置を揃える --- */
.budgetForm__field .switch, .cmbBasis__field .switch { height: 40px; }

/* --- アカウント一覧 最適化モードのバッジ色分け --- */
.c-badge--violet { background-color: #ede9fe; color: #6d28d9; }

/* --- 曜日トレンドの棒グラフ --- */
.dowChart { display: flex; gap: 8px; align-items: flex-end; height: 110px; margin: 4px 0 18px; max-width: 460px; }
.dowChart__col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 1; height: 100%; }
.dowChart__barWrap { display: flex; align-items: flex-end; justify-content: center; width: 100%; flex: 1; }
.dowChart__bar { width: 62%; background: var(--color-green-main); border-radius: 4px 4px 0 0; min-height: 2px; }
.dowChart__val { font-size: 11px; color: var(--color-black-60); margin-top: 4px; font-variant-numeric: tabular-nums; }
.dowChart__lbl { font-size: 12px; margin-top: 2px; }
.dowChart__lbl--we { color: var(--color-red-main); }

/* --- 確認モーダルのボタン余白（既存 .modal を流用） --- */
.modal__actions .c-button { min-width: 96px; }

/* --- 完了モーダルのタイトル色（緑） --- */
.modal__titleOk { color: var(--color-green-main); }

/* --- トースト通知（右下） --- */
.toastWrap { position: fixed; right: 16px; bottom: 16px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--color-black-main); color: #fff; padding: 16px 22px; border-radius: var(--border-radius-md); box-shadow: var(--shadow-sm); font-size: 15px; font-weight: 600; min-width: 220px; max-width: 420px; opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; }
.toast.is-show { opacity: 1; transform: none; }

/* --- 曜日棒グラフ: フォーム内インライン版（トグルの右隣・元サイズ） --- */
.dowChart--inline { height: 110px; max-width: 420px; gap: 8px; margin: 0; }

/* --- 送信中のローディング（クルクル） --- */
.loadingOverlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.35); z-index: 300; }
.loadingOverlay[hidden] { display: none; }
.spinner { width: 44px; height: 44px; border: 4px solid var(--color-black-20); border-top-color: var(--color-green-main); border-radius: 50%; animation: spin .7s linear infinite; }