/**
 * ACS Content for WooCommerce — 管理画面スタイル
 *
 * 方針（再設計案 §3-4）:
 *   - WP 管理画面の語彙（wrap / nav-tab / wp-list-table / form-table / notice / button）に乗る
 *   - 色は WP パレット準拠。値は必ずカスタムプロパティ経由で使う
 *   - 影を使わず罫線で階層を作る
 *   - ブランド差別化はスコアカードの1点だけ
 *   - このファイルが管理画面の唯一のスタイル。PHP 側にインライン style を書かない
 *
 * すべてのセレクタを .acscw-wrap 配下に閉じ、管理画面の他の部分へ影響させない。
 */

.acscw-wrap {
	--acscw-surface: #fff;
	--acscw-border: #c3c4c7;
	--acscw-rule: #f0f0f1;
	--acscw-text: #1d2327;
	--acscw-muted: #757575;
	--acscw-muted-2: #646970;
	--acscw-primary: #2271b1;
	--acscw-primary-dark: #135e96;
	--acscw-success: #00a32a;
	--acscw-success-bg: #edfaef;
	--acscw-success-text: #1a5c27;
	--acscw-danger: #d63638;
	--acscw-danger-bg: #fce8e8;
	--acscw-danger-text: #7c2525;
	--acscw-warn-bg: #fcf9e8;
	--acscw-warn-text: #8a6d1a;
	--acscw-tip-bg: #f3eefc;
	--acscw-tip-text: #6b4fa0;
	--acscw-card-dark-a: #101c2c;
	--acscw-card-dark-b: #16283f;
	--acscw-accent-cyan: #4fd1c5;
	--acscw-accent-gold: #ffd166;
	--acscw-accent-label: #8ab4d8;
	--acscw-radius-sm: 3px;
	--acscw-radius: 4px;
	--acscw-radius-lg: 10px;
}

/* ---- ヘッダー ---------------------------------------------------------- */

.acscw-wrap .acscw-subtitle {
	color: var(--acscw-muted);
	font-size: 13px;
	margin: 4px 0 0;
}

.acscw-wrap .acscw-footer {
	color: var(--acscw-muted);
	font-size: 12px;
	margin-top: 28px;
}

.acscw-wrap .acscw-muted {
	color: var(--acscw-muted);
	font-size: 12px;
}

.acscw-wrap .acscw-mono {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
}

/* ---- カード ------------------------------------------------------------ */

.acscw-wrap .acscw-card {
	background: var(--acscw-surface);
	border: 1px solid var(--acscw-border);
	border-radius: var(--acscw-radius);
	padding: 16px 20px;
	margin-top: 20px;
}

.acscw-wrap .acscw-card > h2 {
	align-items: center;
	border-bottom: 1px solid var(--acscw-rule);
	display: flex;
	font-size: 14px;
	font-weight: 600;
	gap: 8px;
	margin: 0 0 12px;
	padding: 0 0 8px;
}

.acscw-wrap .acscw-card__right {
	font-size: 12px;
	font-weight: 400;
	margin-left: auto;
}

.acscw-wrap .acscw-columns {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	margin-top: 20px;
}

.acscw-wrap .acscw-columns .acscw-card {
	margin-top: 0;
}

.acscw-wrap .acscw-empty {
	color: var(--acscw-muted);
	display: block;
	font-style: italic;
	padding: 14px 0;
}

.acscw-wrap .acscw-list {
	margin: 0 0 12px;
	padding-left: 18px;
}

/* ---- スコアカード（唯一のブランド差別化） ------------------------------ */

.acscw-wrap .acscw-scorecards {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	margin-top: 16px;
}

.acscw-wrap .acscw-scorecard {
	background: linear-gradient(135deg, var(--acscw-card-dark-a) 0%, var(--acscw-card-dark-b) 100%);
	border-radius: var(--acscw-radius-lg);
	color: #fff;
	padding: 16px 18px;
}

.acscw-wrap .acscw-scorecard__period {
	color: var(--acscw-accent-label);
	font-size: 11px;
	letter-spacing: 0.06em;
	margin-bottom: 10px;
	text-transform: uppercase;
}

.acscw-wrap .acscw-scorecard__row {
	align-items: baseline;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	display: flex;
	gap: 10px;
	justify-content: space-between;
	padding: 6px 0;
}

.acscw-wrap .acscw-scorecard__row:last-of-type {
	border-bottom: 0;
}

.acscw-wrap .acscw-scorecard__label {
	color: #c3d4e5;
	font-size: 12px;
}

.acscw-wrap .acscw-scorecard__num {
	color: var(--acscw-accent-cyan);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.15;
}

.acscw-wrap .acscw-scorecard__num.is-small {
	font-size: 16px;
}

.acscw-wrap .acscw-scorecard__num.is-gold {
	color: var(--acscw-accent-gold);
}

.acscw-wrap .acscw-scorecard__num .woocommerce-Price-currencySymbol {
	font-size: 0.7em;
}

.acscw-wrap .acscw-scorecard__note {
	color: var(--acscw-accent-label);
	font-size: 11px;
	margin-top: 8px;
}

.acscw-wrap .acscw-delta {
	font-size: 11px;
	font-weight: 600;
}

.acscw-wrap .acscw-delta.is-up {
	color: var(--acscw-accent-cyan);
}

.acscw-wrap .acscw-delta.is-down {
	color: #ff9f9f;
}

/* ---- 表 ---------------------------------------------------------------- */

.acscw-wrap .acscw-table th,
.acscw-wrap .acscw-table td {
	vertical-align: middle;
}

.acscw-wrap .acscw-table .acscw-num,
.acscw-wrap .acscw-table th.column-price,
.acscw-wrap .acscw-table th.column-sales,
.acscw-wrap .acscw-table th.column-revenue,
.acscw-wrap .acscw-table th.column-tip,
.acscw-wrap .acscw-table th.column-amount,
.acscw-wrap .acscw-table td.column-price,
.acscw-wrap .acscw-table td.column-sales,
.acscw-wrap .acscw-table td.column-revenue,
.acscw-wrap .acscw-table td.column-tip,
.acscw-wrap .acscw-table td.column-amount {
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.acscw-wrap .acscw-scope-table {
	margin-top: 12px;
}

.acscw-wrap .acscw-price-input {
	text-align: right;
}

.acscw-wrap .acscw-price-status {
	color: var(--acscw-muted);
	font-size: 11px;
}

.acscw-wrap .acscw-price-status.is-error {
	color: var(--acscw-danger-text);
}

.acscw-wrap .button.acscw-danger {
	border-color: var(--acscw-danger);
	color: var(--acscw-danger);
}

/* ---- バッジ ------------------------------------------------------------ */

.acscw-wrap .acscw-badge {
	background: var(--acscw-rule);
	border-radius: var(--acscw-radius-sm);
	color: var(--acscw-muted);
	display: inline-block;
	font-size: 10px;
	font-weight: 600;
	padding: 1px 6px;
	vertical-align: 1px;
}

.acscw-wrap .acscw-badge.is-live {
	background: var(--acscw-success-bg);
	color: var(--acscw-success-text);
}

.acscw-wrap .acscw-badge.is-draft {
	background: var(--acscw-rule);
	color: var(--acscw-muted);
}

.acscw-wrap .acscw-badge.is-tip {
	background: var(--acscw-tip-bg);
	color: var(--acscw-tip-text);
}

.acscw-wrap .acscw-badge.is-warn {
	background: var(--acscw-warn-bg);
	color: var(--acscw-warn-text);
}

/* ---- 絞り込みバー ------------------------------------------------------ */

.acscw-wrap .acscw-filterbar {
	align-items: center;
	background: var(--acscw-surface);
	border: 1px solid var(--acscw-border);
	border-radius: var(--acscw-radius);
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 16px 0 0;
	padding: 10px 12px;
}

.acscw-wrap .acscw-filterbar__right {
	margin-left: auto;
}

.acscw-wrap .acscw-seg {
	border: 1px solid var(--acscw-border);
	border-radius: var(--acscw-radius-sm);
	display: inline-flex;
	overflow: hidden;
}

.acscw-wrap .acscw-seg__item {
	background: #f6f7f7;
	border-right: 1px solid var(--acscw-border);
	color: #2c3338;
	display: inline-block;
	font-size: 12px;
	padding: 4px 12px;
	text-decoration: none;
}

.acscw-wrap .acscw-seg__item:last-child {
	border-right: 0;
}

.acscw-wrap .acscw-seg__item.is-on {
	background: var(--acscw-primary);
	color: #fff;
	font-weight: 600;
}

/* ---- フォーム ---------------------------------------------------------- */

.acscw-wrap .acscw-choice {
	display: block;
	margin-bottom: 4px;
}

.acscw-wrap .acscw-checklist {
	border: 1px solid var(--acscw-border);
	border-radius: var(--acscw-radius-sm);
	margin-top: 8px;
	max-height: 220px;
	max-width: 520px;
	overflow-y: auto;
	padding: 8px 10px;
}

.acscw-wrap .acscw-suffix {
	color: var(--acscw-muted);
	font-size: 12px;
}

/* ---- セットアップ進捗 -------------------------------------------------- */

.acscw-wrap .acscw-progress {
	background: var(--acscw-rule);
	border-radius: var(--acscw-radius);
	height: 10px;
	margin: 10px 0 6px;
	overflow: hidden;
}

.acscw-wrap .acscw-progress__bar {
	background: var(--acscw-primary);
	height: 100%;
}

.acscw-wrap .acscw-progress__text {
	color: var(--acscw-muted);
	font-size: 12px;
	margin: 0;
}

/* インライン style を使わずに幅を表すため、5% 刻みのクラスを用意する。 */
.acscw-wrap .acscw-progress--p0 { width: 0; }
.acscw-wrap .acscw-progress--p5 { width: 5%; }
.acscw-wrap .acscw-progress--p10 { width: 10%; }
.acscw-wrap .acscw-progress--p15 { width: 15%; }
.acscw-wrap .acscw-progress--p20 { width: 20%; }
.acscw-wrap .acscw-progress--p25 { width: 25%; }
.acscw-wrap .acscw-progress--p30 { width: 30%; }
.acscw-wrap .acscw-progress--p35 { width: 35%; }
.acscw-wrap .acscw-progress--p40 { width: 40%; }
.acscw-wrap .acscw-progress--p45 { width: 45%; }
.acscw-wrap .acscw-progress--p50 { width: 50%; }
.acscw-wrap .acscw-progress--p55 { width: 55%; }
.acscw-wrap .acscw-progress--p60 { width: 60%; }
.acscw-wrap .acscw-progress--p65 { width: 65%; }
.acscw-wrap .acscw-progress--p70 { width: 70%; }
.acscw-wrap .acscw-progress--p75 { width: 75%; }
.acscw-wrap .acscw-progress--p80 { width: 80%; }
.acscw-wrap .acscw-progress--p85 { width: 85%; }
.acscw-wrap .acscw-progress--p90 { width: 90%; }
.acscw-wrap .acscw-progress--p95 { width: 95%; }
.acscw-wrap .acscw-progress--p100 { width: 100%; }

.acscw-wrap .acscw-steps {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.acscw-wrap .acscw-steps li {
	align-items: flex-start;
	border-bottom: 1px solid var(--acscw-rule);
	display: flex;
	font-size: 13px;
	gap: 10px;
	padding: 9px 0;
}

.acscw-wrap .acscw-steps li:last-child {
	border-bottom: 0;
}

.acscw-wrap .acscw-steps__mark {
	border-radius: 50%;
	color: #fff;
	flex: 0 0 18px;
	font-size: 11px;
	font-weight: 700;
	height: 18px;
	line-height: 18px;
	text-align: center;
}

.acscw-wrap .acscw-steps__mark.is-done {
	background: var(--acscw-success);
}

.acscw-wrap .acscw-steps__mark.is-done::after {
	content: "\2713";
}

.acscw-wrap .acscw-steps__mark.is-todo {
	background: var(--acscw-border);
}

.acscw-wrap .acscw-steps__body {
	flex: 1;
	min-width: 0;
}

.acscw-wrap .acscw-steps__title {
	display: block;
	font-weight: 600;
}

.acscw-wrap .acscw-steps__desc {
	color: var(--acscw-muted);
	display: block;
	font-size: 12px;
}

/* ---- インラインSVGグラフ ----------------------------------------------- */

.acscw-wrap .acscw-chart {
	display: block;
	height: 210px;
	width: 100%;
}

.acscw-wrap .acscw-chart__grid {
	stroke: var(--acscw-rule);
	stroke-width: 1;
}

.acscw-wrap .acscw-chart__grid.is-axis {
	stroke: var(--acscw-border);
}

.acscw-wrap .acscw-chart__axis {
	fill: var(--acscw-muted);
	font-size: 10px;
}

.acscw-wrap .acscw-chart__bar.is-article {
	fill: var(--acscw-primary);
}

.acscw-wrap .acscw-chart__bar.is-tip {
	fill: #9b7fd4;
}

.acscw-wrap .acscw-legend {
	color: var(--acscw-muted);
	display: flex;
	font-size: 12px;
	gap: 16px;
	margin-top: 8px;
}

.acscw-wrap .acscw-legend__item::before {
	border-radius: 2px;
	content: "";
	display: inline-block;
	height: 10px;
	margin-right: 5px;
	vertical-align: -1px;
	width: 10px;
}

.acscw-wrap .acscw-legend__item.is-article::before {
	background: var(--acscw-primary);
}

.acscw-wrap .acscw-legend__item.is-tip::before {
	background: #9b7fd4;
}

/* ---- 狭い画面 ---------------------------------------------------------- */

@media screen and (max-width: 782px) {

	.acscw-wrap .acscw-columns {
		grid-template-columns: 1fr;
	}

	.acscw-wrap .acscw-filterbar__right {
		margin-left: 0;
	}
}