/*
 * SWM Cloud Platform — page-specific styles.
 *
 * Enqueued only on /swm-login/, /set-password/, and /swm-account/.
 * Uses the Extendable FSE theme's CSS custom properties for colours so
 * these pages inherit the site palette. New structural classes only —
 * theme block classes (wp-block-button__link, etc.) are used in templates
 * wherever possible.
 */

/* ── Auth pages (/swm-login/, /set-password/) ─────────────────────────── */

.swmcp-auth-logo {
	text-align: center;
	margin-bottom: 1.5rem;
}

.swmcp-auth-logo img {
	width: 96px;
	height: 96px;
	border-radius: 8px;
}

.swmcp-auth-page {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 4rem 1rem;
	min-height: 60vh;
}

.swmcp-auth-card {
	background: var(--wp--preset--color--background, #fff);
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	padding: 2.5rem 2rem;
	width: 100%;
	max-width: 420px;
}

.swmcp-auth-card h1 {
	font-size: 1.5rem;
	margin-bottom: 1.5rem;
}

.swmcp-auth-card label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.swmcp-auth-card input[type="text"],
.swmcp-auth-card input[type="email"],
.swmcp-auth-card input[type="url"],
.swmcp-auth-card input[type="password"] {
	width: 100%;
	padding: 0.5rem 0.75rem;
	border: 1px solid #cbd5e1;
	border-radius: 4px;
	font-size: 1rem;
	box-sizing: border-box;
}

.swmcp-auth-card p {
	margin-bottom: 1rem;
}

.swmcp-auth-error {
	color: #dc2626;
	font-size: 0.875rem;
	margin-bottom: 1rem;
}

.swmcp-auth-notice {
	color: #166534;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 4px;
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	margin-bottom: 1rem;
}

.swmcp-auth-success {
	color: #166534;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 4px;
	padding: 0.75rem 1rem;
	font-size: 0.9375rem;
	margin-bottom: 1rem;
}

.swmcp-auth-links {
	text-align: center;
	margin-top: 0.75rem;
	font-size: 0.875rem;
}

/* ── Dashboard page (/swm-account/) ───────────────────────────────────── */

.swmcp-dashboard-page {
	max-width: 860px;
	margin: 2rem auto;
	padding: 0 1rem;
}

/* ── API key reveal field ─────────────────────────────────────────────── */

.swmcp-api-key-field {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: monospace;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 4px;
	padding: 0.5rem 0.75rem;
	font-size: 0.9rem;
	word-break: break-all;
}

/* ── Script tag display box ───────────────────────────────────────────── */

.swmcp-script-tag-box {
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	border-radius: 4px;
	padding: 0.75rem 1rem;
	font-family: monospace;
	font-size: 0.8rem;
	word-break: break-all;
	white-space: pre-wrap;
}

/* ── Footer branding hide ─────────────────────────────────────────────── */

/* Hide "Proudly powered by WordPress" in the theme footer.
 * Two separate rules: :has() in a comma-list would invalidate the whole rule
 * on browsers without :has() support, leaving the credit visible.
 * Both `footer` (semantic element) and `#footer` (div id) are targeted
 * because themes vary — e.g. Extendable FSE uses <footer>, others use
 * <div id="footer">. */
footer a[href*="wordpress.org"],
#footer a[href*="wordpress.org"] {
	display: none;
}

footer p:has(a[href*="wordpress.org"]),
#footer p:has(a[href*="wordpress.org"]) {
	display: none;
}

/* ── Dashboard header (/swm-account/) ────────────────────────────────── */

.swmcp-dashboard-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 0 1.5rem;
	border-bottom: 1px solid #e2e8f0;
	margin-bottom: 1.5rem;
}

.swmcp-dashboard-logo {
	width: 40px;
	height: 40px;
	border-radius: 6px;
}

.swmcp-dashboard-brand {
	font-weight: 600;
	font-size: 1rem;
	flex: 1;
}

.swmcp-logout-link {
	font-size: 0.875rem;
	color: #64748b;
	text-decoration: none;
}

.swmcp-logout-link:hover {
	color: #1e293b;
	text-decoration: underline;
}