/* Structurify — Admin UI */

:root {
	--asp-bg:       #f7f7f8;
	--asp-card:     #ffffff;
	--asp-border:   #e4e4e7;
	--asp-accent:   #7c3aed;
	--asp-accent-s: #ede9fe;
	--asp-green:    #16a34a;
	--asp-green-s:  #dcfce7;
	--asp-orange:   #d97706;
	--asp-orange-s: #fef3c7;
	--asp-red:      #dc2626;
	--asp-red-s:    #fee2e2;
	--asp-text:     #18181b;
	--asp-sub:      #52525b;
	--asp-muted:    #a1a1aa;
	--asp-light:    #f4f4f5;
	--asp-radius:   10px;
	--asp-radius-s: 6px;
	--asp-font:     -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
}

/* ── Wrapper ──────────────────────────────────────────────── */
.structurify-settings {
	font-family: var(--asp-font);
	color: var(--asp-text);
	padding-bottom: 4rem;
	margin-right: 20px;
}

.structurify-settings > h1 { display: none; }

/* ── Page header ──────────────────────────────────────────── */
.asp-page-header {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 24px 0 20px;
	border-bottom: 1px solid var(--asp-border);
	margin-bottom: 28px;
}

.asp-page-header-icon {
	width: 40px;
	height: 40px;
	background: linear-gradient(135deg, #1a0533 0%, #7c3aed 65%, #d946a8 100%);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
}

.asp-page-header-text h1 {
	font-size: 20px !important;
	font-weight: 700 !important;
	color: var(--asp-text) !important;
	margin: 0 0 3px !important;
	padding: 0 !important;
	line-height: 1.2 !important;
	display: block !important;
	letter-spacing: -0.3px !important;
}

.asp-page-header-text p {
	font-size: 13px;
	color: var(--asp-sub);
	margin: 0;
}

/* ── Metrics ──────────────────────────────────────────────── */
.asp-metrics {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 200px));
	gap: 12px;
	margin-bottom: 28px;
}

.asp-metric {
	background: var(--asp-card);
	border: 1px solid var(--asp-border);
	border-radius: var(--asp-radius);
	padding: 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.asp-metric-value {
	font-size: 32px;
	font-weight: 700;
	color: var(--asp-text);
	line-height: 1;
	letter-spacing: -1px;
}

.asp-metric-value small {
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--asp-muted);
}

.asp-metric-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--asp-muted);
	text-transform: uppercase;
	letter-spacing: 0.6px;
}

.asp-metric-value.green  { color: var(--asp-accent); }
.asp-metric-value.orange { color: #2563eb; }
.asp-metric-value.red    { color: var(--asp-red); }
.asp-metric-value.purple { color: var(--asp-accent); }

/* ── Page grid ────────────────────────────────────────────── */
.asp-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 16px;
	align-items: start;
}

.asp-grid > .asp-card { margin-bottom: 0; }

.asp-card--settings { align-self: stretch; }

.asp-grid-right {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.asp-grid-right > .asp-card { margin-bottom: 0; }

/* ── Cards ────────────────────────────────────────────────── */
.asp-card {
	background: var(--asp-card);
	border: 1px solid var(--asp-border);
	border-radius: var(--asp-radius);
	margin-bottom: 16px;
	overflow: hidden;
}

.asp-card-header {
	display: flex;
	align-items: center;
	padding: 18px 24px 16px;
	border-bottom: 1px solid var(--asp-border);
}

.asp-card-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--asp-text);
	margin: 0;
	letter-spacing: -0.2px;
}

.asp-card-body {
	padding: 20px 24px;
}

/* ── Settings form ────────────────────────────────────────── */
.asp-card .form-table {
	margin: 0 !important;
}

.asp-card .form-table th {
	padding: 16px 24px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: var(--asp-text) !important;
	width: 240px !important;
	vertical-align: top !important;
	border-bottom: 1px solid var(--asp-border) !important;
}

.asp-card .form-table td {
	padding: 14px 24px !important;
	border-bottom: 1px solid var(--asp-border) !important;
}

.asp-card .form-table tr:last-child th,
.asp-card .form-table tr:last-child td {
	border-bottom: none !important;
}

.asp-card .form-table input[type="text"],
.asp-card .form-table input[type="number"],
.asp-card .form-table input[type="password"],
.asp-card .form-table textarea,
.asp-card .form-table select {
	border-radius: var(--asp-radius-s) !important;
	border: 1px solid var(--asp-border) !important;
	box-shadow: none !important;
	font-size: 13px !important;
	font-family: var(--asp-font) !important;
	color: var(--asp-text) !important;
	background: #fafafa !important;
	transition: border-color 0.15s !important;
}

.asp-card .form-table input[type="text"]:focus,
.asp-card .form-table input[type="number"]:focus,
.asp-card .form-table textarea:focus,
.asp-card .form-table select:focus {
	border-color: var(--asp-accent) !important;
	background: #fff !important;
	outline: none !important;
	box-shadow: none !important;
}

.asp-card .form-table p.description {
	font-size: 12px !important;
	color: var(--asp-sub) !important;
	margin-top: 6px !important;
	line-height: 1.5 !important;
}

/* Settings API section titles (h2) */
.asp-card > form > h2 {
	font-size: 11px !important;
	font-weight: 700 !important;
	color: var(--asp-muted) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.7px !important;
	padding: 18px 24px 4px !important;
	margin: 0 !important;
	border-top: 1px solid var(--asp-border) !important;
}

.asp-card > form > h2:first-of-type { border-top: none !important; }
.asp-card > form > table + h2 { border-top: 1px solid var(--asp-border) !important; }

.asp-card > form > p {
	font-size: 12px !important;
	color: var(--asp-sub) !important;
	padding: 2px 24px 10px !important;
	margin: 0 !important;
}

.asp-card .submit {
	padding: 16px 24px !important;
	border-top: 1px solid var(--asp-border) !important;
	margin: 0 !important;
	background: var(--asp-light) !important;
}

.asp-card .submit .button-primary {
	background: var(--asp-accent) !important;
	border: none !important;
	border-radius: var(--asp-radius-s) !important;
	box-shadow: none !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	padding: 8px 22px !important;
	height: auto !important;
	font-family: var(--asp-font) !important;
	color: #fff !important;
	cursor: pointer !important;
	transition: background 0.15s !important;
}

.asp-card .submit .button-primary:hover { background: #6d28d9 !important; }

/* ── Buttons ──────────────────────────────────────────────── */
.asp-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.asp-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 18px;
	border-radius: var(--asp-radius-s);
	font-size: 13px;
	font-weight: 500;
	font-family: var(--asp-font);
	cursor: pointer;
	border: 1px solid transparent;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
	text-decoration: none;
	line-height: 1.4;
}

.asp-btn-primary {
	background: var(--asp-accent);
	color: #fff;
	border-color: var(--asp-accent);
}

.asp-btn-primary:hover   { background: #6d28d9; border-color: #6d28d9; color: #fff; }
.asp-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }

.asp-btn-secondary {
	background: #fff;
	color: var(--asp-text);
	border-color: var(--asp-border);
}

.asp-btn-secondary:hover { background: var(--asp-light); color: var(--asp-text); }

.asp-btn-danger {
	background: transparent;
	color: var(--asp-red);
	border-color: #fca5a5;
}

.asp-btn-danger:hover { background: var(--asp-red-s); }

.asp-cron-result {
	font-size: 12px;
	color: var(--asp-green);
	font-weight: 500;
	display: none;
}

/* ── Progress ─────────────────────────────────────────────── */
#structurify-progress { margin-top: 16px; }

.structurify-progress-bar-wrap {
	width: 100%;
	height: 4px;
	background: var(--asp-border);
	border-radius: 2px;
	overflow: hidden;
}

.structurify-progress-bar {
	height: 100%;
	width: 0;
	background: var(--asp-accent);
	border-radius: 2px;
	transition: width 0.4s ease;
}

#structurify-progress-label {
	font-size: 12px;
	color: var(--asp-sub);
	margin: 8px 0 0;
}

/* ── Endpoints ────────────────────────────────────────────── */
.asp-endpoints { display: flex; flex-direction: column; }

.asp-endpoint {
	display: grid;
	grid-template-columns: 44px 1fr 28px;
	align-items: center;
	gap: 14px;
	padding: 13px 24px;
	border-bottom: 1px solid var(--asp-border);
	transition: background 0.1s;
}

.asp-endpoint:last-child { border-bottom: none; }
.asp-endpoint:hover { background: #fafafa; }

.asp-method {
	display: inline-block;
	background: var(--asp-accent-s);
	color: var(--asp-accent);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.6px;
	padding: 3px 6px;
	border-radius: 4px;
	font-family: monospace;
	text-align: center;
}

.asp-endpoint-content { min-width: 0; }

.asp-endpoint-url {
	font-family: 'SF Mono', 'Fira Code', 'Menlo', monospace;
	font-size: 12px;
	color: var(--asp-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 500;
}

.asp-endpoint-desc {
	font-size: 12px;
	color: var(--asp-sub);
	margin-top: 3px;
}

.asp-endpoint-link {
	color: var(--asp-muted);
	font-size: 15px;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.15s;
}

.asp-endpoint-link:hover { color: var(--asp-accent); }

/* ── AI Preview ───────────────────────────────────────────── */
.asp-preview-input-row {
	display: flex;
	gap: 10px;
	align-items: center;
}

.asp-preview-input-row input[type="text"] {
	flex: 1;
	border-radius: var(--asp-radius-s) !important;
	border: 1px solid var(--asp-border) !important;
	padding: 9px 14px !important;
	font-size: 14px !important;
	box-shadow: none !important;
	font-family: var(--asp-font) !important;
	height: auto !important;
	color: var(--asp-text) !important;
	background: #fafafa !important;
	transition: border-color 0.15s !important;
}

.asp-preview-input-row input[type="text"]:focus {
	border-color: var(--asp-accent) !important;
	background: #fff !important;
	outline: none !important;
	box-shadow: none !important;
}

.structurify-answer-card {
	background: var(--asp-accent-s);
	border: 1px solid #ddd6fe;
	border-radius: var(--asp-radius);
	padding: 22px 24px;
	margin-top: 16px;
	animation: asp-fadein 0.25s ease;
}

@keyframes asp-fadein {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}

.structurify-answer-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}

.structurify-answer-icon { display: none; }

.structurify-answer-label {
	font-size: 11px;
	font-weight: 700;
	color: var(--asp-sub);
	text-transform: uppercase;
	letter-spacing: 0.6px;
	flex: 1;
}

.structurify-confidence {
	font-size: 11px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 20px;
	background: #fff;
	color: var(--asp-accent);
	border: 1px solid #ddd6fe;
}

.structurify-answer-body {
	font-size: 14px;
	line-height: 1.7;
	color: var(--asp-text);
	margin: 0 0 14px;
}

.structurify-facts {
	margin: 0 0 16px 18px;
	padding: 0;
}

.structurify-facts li {
	font-size: 13px;
	color: var(--asp-sub);
	margin-bottom: 5px;
	line-height: 1.5;
}

.structurify-sources {
	font-size: 12px;
	color: var(--asp-sub);
	border-top: 1px solid #ddd6fe;
	padding-top: 12px;
	margin-top: 4px;
}

.structurify-sources a {
	color: var(--asp-accent);
	text-decoration: none;
	display: inline-block;
	margin: 2px 10px 2px 0;
	font-weight: 500;
}

.structurify-sources a:hover { text-decoration: underline; }

#structurify-preview-error {
	font-size: 13px;
	color: var(--asp-red);
	margin-top: 10px;
	display: none;
}

/* ── Error log ────────────────────────────────────────────── */
.asp-error-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.asp-error-table th {
	text-align: left;
	padding: 11px 24px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--asp-muted);
	border-bottom: 1px solid var(--asp-border);
}

.asp-error-table td {
	padding: 11px 24px;
	border-bottom: 1px solid var(--asp-border);
	vertical-align: top;
	color: var(--asp-text);
}

.asp-error-table tr:last-child td { border-bottom: none; }

.asp-error-table code {
	font-size: 12px;
	background: var(--asp-light);
	padding: 2px 6px;
	border-radius: 4px;
	border: 1px solid var(--asp-border);
}

/* ── WordPress settings-saved notice ─────────────────────── */
#setting-error-settings_updated.asp-notice {
	display: inline-flex !important;
	width: auto !important;
	max-width: 100% !important;
	border-left: none !important;
	box-shadow: none !important;
	margin: 0 0 12px !important;
}

#setting-error-settings_updated.asp-notice p {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #14532d !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ── Notices ──────────────────────────────────────────────── */
.asp-notice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 16px;
	border-radius: var(--asp-radius-s);
	font-size: 13px;
	margin-bottom: 12px;
	line-height: 1.5;
}

.asp-notice-icon { display: none; }

.asp-notice-warning {
	background: var(--asp-orange-s);
	border: 1px solid #fde68a;
	color: #92400e;
}

.asp-notice-error {
	background: var(--asp-red-s);
	border: 1px solid #fca5a5;
	color: #991b1b;
}

.asp-notice-success {
	background: var(--asp-green-s);
	border: 1px solid #86efac;
	color: #14532d;
}