/**
 * WebWall Profit Machine – Admin Stylesheet
 * All styles are scoped to .wrap elements on plugin pages.
 * No external fonts or CDN resources are loaded.
 */

/* ── Card component ─────────────────────────────────────────── */
.wpa-card {
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 20px 24px;
	margin-bottom: 20px;
	box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.wpa-card h2,
.wpa-card h3 {
	margin-top: 0;
	font-size: 16px;
	font-weight: 600;
	color: #1d2327;
}

/* ── Page header ────────────────────────────────────────────── */
.wpa-page-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.wpa-page-header h1 {
	font-size: 22px;
	margin: 0 0 5px;
}

.wpa-page-header .description {
	color: #646970;
	margin: 0;
}

/* ── Two-column grid ────────────────────────────────────────── */
.wpa-two-column-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

@media (max-width: 900px) {
	.wpa-two-column-grid {
		grid-template-columns: 1fr;
	}
}

/* ── Segment badges ─────────────────────────────────────────── */
.wpa-segment-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .5px;
}

.wpa-segment-vip       { background: #ffd700; color: #6b5900; }
.wpa-segment-loyal     { background: #c8e6c9; color: #1b5e20; }
.wpa-segment-potential { background: #bbdefb; color: #0d47a1; }
.wpa-segment-new       { background: #e1bee7; color: #4a148c; }
.wpa-segment-at-risk   { background: #ffe0b2; color: #7f3d00; }
.wpa-segment-lost      { background: #ffcdd2; color: #b71c1c; }

/* ── Status & source badges ─────────────────────────────────── */
.wpa-status-badge,
.wpa-source-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 12px;
	font-weight: 600;
}

.wpa-status-above    { background: #c8e6c9; color: #1b5e20; }
.wpa-status-ok       { background: #fff9c4; color: #7b5800; }
.wpa-status-below    { background: #ffe0b2; color: #7f3d00; }
.wpa-status-critical { background: #ffcdd2; color: #b71c1c; }

.wpa-source-badge    { background: #e3f2fd; color: #0d47a1; }
.wpa-source-standard { background: #e3f2fd; color: #0d47a1; }

/* ── Delta colours ──────────────────────────────────────────── */
.wpa-delta-above,
.wpa-delta-positive { color: #27ae60; font-weight: 600; }

.wpa-delta-below,
.wpa-delta-negative { color: #e67e22; font-weight: 600; }

.wpa-delta-critical { color: #e74c3c; font-weight: 600; }

/* ── Tables ─────────────────────────────────────────────────── */
.wpa-benchmark-table th,
.wpa-benchmark-table td {
	vertical-align: middle;
	padding: 10px 12px;
}

/* ── Empty state ────────────────────────────────────────────── */
.wpa-empty-state {
	text-align: center;
	padding: 40px 20px;
	color: #646970;
}

.wpa-empty-state .wpa-empty-icon {
	font-size: 48px;
	margin-bottom: 10px;
}

/* ── Info list ──────────────────────────────────────────────── */
.wpa-info-list {
	margin: 0;
	padding-left: 20px;
	line-height: 2;
}

/* ── Insights card ──────────────────────────────────────────── */
.wpa-insights-card ul {
	margin: 0;
	padding-left: 20px;
	line-height: 2;
}

/* ── Table footnote ─────────────────────────────────────────── */
.wpa-table-footnote {
	margin-top: 12px;
	font-size: 12px;
	color: #646970;
}

/* ── Last-updated line ──────────────────────────────────────── */
.wpa-last-updated {
	font-size: 13px;
	color: #646970;
	margin: 0;
}

/* ── Upgrade prompt ─────────────────────────────────────────── */
.wpa-upgrade-prompt {
	border-left-color: #667eea !important;
	padding: 15px 20px !important;
}

.wpa-upgrade-prompt h3 {
	margin: 0 0 8px;
}

/* ── Dashboard layout helpers ───────────────────────────────── */
.wpa-dashboard .wpa-card h2 {
	border-bottom: 1px solid #e0e0e0;
	padding-bottom: 10px;
	margin-bottom: 15px;
}

/* ── Coupon generator ───────────────────────────────────────── */
.wpa-coupon-generator-page .form-table th {
	width: 200px;
	padding-left: 0;
}

/* ── Chart card (full-width canvas) ────────────────────────── */
.wpa-chart-card {
	display: flex;
	flex-direction: column;
}

.wpa-chart-wrap {
	width: 100%;
	position: relative;
	margin-top: 12px;
	flex: 1 1 auto;
}

/* Graceful empty state inside chart card */
.wpa-chart-empty {
	text-align: center;
	padding: 40px 20px;
	color: #646970;
	background: #f9f9f9;
	border-radius: 6px;
	margin-top: 12px;
}

.wpa-chart-empty .wpa-empty-icon {
	font-size: 48px;
	margin-bottom: 10px;
}

.wpa-chart-empty p {
	margin: 6px 0;
}

.wpa-chart-empty .button {
	margin-top: 14px;
}

/* ── Recalculate bar ────────────────────────────────────────── */
.wpa-recalc-bar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	margin-bottom: 8px;
	flex-wrap: wrap;
}

.wpa-recalc-ts {
	font-size: 12px;
	color: #646970;
}

.wpa-recalc-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.wpa-recalc-btn.is-loading {
	opacity: .7;
	pointer-events: none;
}

/* ── System Status panel ────────────────────────────────────── */
.wpa-system-status {
	margin-top: 20px;
	margin-bottom: 20px;
}

.wpa-ss-table {
	border-collapse: collapse;
	width: 100%;
	max-width: 600px;
}

.wpa-ss-table td {
	padding: 8px 12px;
	border-bottom: 1px solid #f0f0f0;
	font-size: 13px;
	vertical-align: middle;
}

.wpa-ss-table td:first-child {
	width: 220px;
	color: #646970;
	font-weight: 500;
}

.wpa-ss-ok   { font-style: normal; }
.wpa-ss-warn { font-style: normal; }
.wpa-ss-info { color: #646970; }

@media (max-width: 600px) {
	.wpa-ss-table td:first-child {
		width: auto;
	}
}