/*
 * SkillionsPro Portal - shared components (portal, public pages, admin).
 * Every rule is scoped under .spp: on public pages the theme's CSS is still loaded, and the extra
 * class gives our rules (0,2,0) specificity, enough to beat typical theme rules like input[type="email"].
 */

.spp,
.spp *,
.spp *::before,
.spp *::after { box-sizing: border-box; }

.spp {
	font-family: var(--spp-font);
	color: var(--spp-text);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.spp [hidden] { display: none !important; }

.spp :focus-visible {
	outline: 2px solid var(--spp-focus);
	outline-offset: 2px;
}

/* Card */
.spp .spp-card {
	background: var(--spp-surface);
	border: 1px solid var(--spp-border);
	border-radius: var(--spp-radius-card);
	box-shadow: var(--spp-shadow);
	padding: var(--spp-space-5);
}

/* Buttons */
.spp .spp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--spp-space-2);
	min-height: 44px;
	margin: 0;
	padding: 0 var(--spp-space-5);
	border: 1px solid transparent;
	border-radius: var(--spp-radius);
	font: 500 15px/1.2 var(--spp-font);
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transition: background-color var(--spp-dur) var(--spp-ease), border-color var(--spp-dur) var(--spp-ease), transform var(--spp-dur) var(--spp-ease);
}
.spp .spp-btn:active { transform: translateY(1px); }
.spp .spp-btn--primary { background: var(--spp-primary); color: var(--spp-on-primary); }
.spp .spp-btn--primary:hover { background: var(--spp-primary-hover); color: var(--spp-on-primary); }
.spp .spp-btn--ghost { background: transparent; color: var(--spp-text); border-color: var(--spp-border); }
.spp .spp-btn--ghost:hover { background: var(--spp-surface-2); }
.spp .spp-btn--block { width: 100%; }
.spp .spp-btn:disabled { cursor: not-allowed; transform: none; }
/* Unavailable reads as neutral; a button busy with a request keeps its colour, dimmed */
.spp .spp-btn:disabled:not([aria-busy="true"]) { background: var(--spp-surface-2); border-color: var(--spp-border); color: var(--spp-muted); }
.spp .spp-btn[aria-busy="true"] { opacity: .65; }
.spp .spp-btn[aria-busy="true"]::before {
	content: "";
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-inline-end-color: transparent;
	border-radius: 50%;
	animation: spp-spin .7s linear infinite;
}
@keyframes spp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.spp .spp-btn[aria-busy="true"]::before { animation-duration: 2s; }
}

/* Form fields */
.spp .spp-field { margin: 0 0 var(--spp-space-4); }
.spp .spp-label {
	display: block;
	margin: 0 0 6px;
	font: 500 14px/1.4 var(--spp-font);
	color: var(--spp-text);
}
.spp .spp-input {
	display: block;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--spp-border-strong);
	border-radius: var(--spp-radius);
	background-color: var(--spp-surface); /* not the shorthand: keeps wp-admin's select arrow image */
	color: var(--spp-text);
	font: 400 15px/1.4 var(--spp-font);
	box-shadow: none;
	transition: border-color var(--spp-dur) var(--spp-ease), box-shadow var(--spp-dur) var(--spp-ease);
}
.spp .spp-input:focus {
	outline: 2px solid var(--spp-focus);
	outline-offset: 1px;
	border-color: var(--spp-primary);
	box-shadow: 0 0 0 4px var(--spp-primary-tint);
}
.spp .spp-input[aria-invalid="true"] { border-color: var(--spp-pink-strong); }
.spp .spp-input::placeholder { color: var(--spp-muted); opacity: 1; } /* browser defaults fall below 4.5:1 */
.spp select.spp-input { max-width: none; padding-inline-end: 32px; } /* wp-admin caps selects at 25rem */
.spp .spp-field__hint,
.spp .spp-field__error { margin: 6px 0 0; font-size: 13px; line-height: 1.4; }
.spp .spp-field__hint { color: var(--spp-muted); }
.spp .spp-input[aria-invalid="true"] ~ .spp-field__hint { display: none; } /* the error repeats the rule */
.spp .spp-field__error { color: var(--spp-pink-strong); font-weight: 500; }

.spp .spp-check {
	display: flex;
	align-items: center;
	gap: var(--spp-space-2);
	min-height: 44px;
	margin: 0 0 var(--spp-space-4);
	font-size: 14px;
	cursor: pointer;
}
.spp .spp-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--spp-primary); }

/* Alerts */
.spp .spp-alert {
	margin: 0 0 var(--spp-space-4);
	padding: var(--spp-space-3) 14px;
	border-radius: var(--spp-radius);
	font-size: 14px;
}
.spp .spp-alert--error { background: var(--spp-pink-tint); color: var(--spp-pink-strong); }
.spp .spp-alert--success { background: var(--spp-success-tint); color: var(--spp-success); }

.spp .spp-link {
	color: var(--spp-primary);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.spp .spp-link:hover { color: var(--spp-primary-hover); }

/* Icons (inline SVG sprite, see Icons::svg) */
.spp .spp-icon {
	flex: none;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: middle;
}

/* Tinted tones for icon boxes and pills */
.spp .spp-tone--blue { background: var(--spp-primary-tint); color: var(--spp-primary); }
.spp .spp-tone--teal { background: var(--spp-teal-tint); color: var(--spp-teal-strong); }
.spp .spp-tone--green { background: var(--spp-success-tint); color: var(--spp-success); }
.spp .spp-tone--yellow { background: var(--spp-yellow-tint); color: var(--spp-yellow-strong); }
.spp .spp-tone--pink { background: var(--spp-pink-tint); color: var(--spp-pink-strong); }
.spp .spp-tone--purple { background: var(--spp-purple-tint); color: var(--spp-purple-strong); }
.spp .spp-tone--muted { background: var(--spp-surface-2); color: var(--spp-muted); }

/* Status pill: always carries a text label, so colour is never the only signal */
.spp .spp-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 10px;
	border-radius: var(--spp-radius-full);
	font: 600 12px/1.6 var(--spp-font);
	white-space: nowrap;
}
.spp .spp-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.spp .spp-avatar {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: var(--spp-radius-full);
	background: var(--spp-primary-tint);
	color: var(--spp-primary);
	font: 600 13px/1 var(--spp-font);
	text-transform: uppercase;
}

/* Button sizes and variants */
.spp .spp-btn--sm { min-height: 32px; padding: 0 12px; font-size: 13px; }
.spp .spp-btn--danger { background: transparent; color: var(--spp-pink-strong); border-color: var(--spp-border); }
.spp .spp-btn--danger:hover { background: var(--spp-pink-tint); color: var(--spp-pink-strong); }
@media (max-width: 782px) {
	.spp .spp-btn--sm { min-height: 44px; }
}

/* Empty state */
.spp .spp-empty { padding: 48px var(--spp-space-5); text-align: center; }
.spp .spp-empty__icon {
	display: inline-grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: var(--spp-space-3);
	border-radius: var(--spp-radius-full);
}
.spp .spp-empty__icon .spp-icon { width: 26px; height: 26px; }
.spp .spp-empty__title { margin: 0 0 4px; font: 600 16px/1.4 var(--spp-font); color: var(--spp-text); }
.spp .spp-empty__text { max-width: 420px; margin: 0 auto var(--spp-space-4); font-size: 14px; color: var(--spp-muted); }

/* Dialog (native <dialog>: Escape, focus and top layer come from the browser) */
.spp .spp-dialog {
	width: min(480px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	padding: 0;
	border: 0;
	border-radius: var(--spp-radius-card);
	background: var(--spp-surface);
	color: var(--spp-text);
	box-shadow: var(--spp-shadow-lg);
}
.spp .spp-dialog[open] { animation: spp-pop var(--spp-dur) var(--spp-ease); }
.spp .spp-dialog::backdrop { background: var(--spp-overlay); }
.spp .spp-dialog__body { padding: var(--spp-space-5); }
.spp .spp-dialog__title { margin: 0 0 4px; font: 600 18px/1.3 var(--spp-font); color: var(--spp-text); }
.spp .spp-dialog__sub { margin: 0 0 var(--spp-space-4); font-size: 14px; color: var(--spp-muted); }
.spp .spp-dialog__foot { display: flex; justify-content: flex-end; gap: var(--spp-space-2); margin-top: var(--spp-space-5); }
@keyframes spp-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* Toasts */
.spp.spp-toasts {
	position: fixed;
	z-index: 100000;
	inset-inline-end: 16px;
	bottom: 16px;
	display: grid;
	gap: var(--spp-space-2);
	width: min(360px, calc(100vw - 32px));
}
.spp .spp-toast {
	padding: var(--spp-space-3) var(--spp-space-4);
	border-radius: var(--spp-radius);
	background: var(--spp-text);
	color: var(--spp-surface);
	box-shadow: var(--spp-shadow-lg);
	font: 500 14px/1.4 var(--spp-font);
	animation: spp-pop var(--spp-dur) var(--spp-ease);
	transition: opacity var(--spp-dur) var(--spp-ease), transform var(--spp-dur) var(--spp-ease);
}
.spp .spp-toast--error { background: var(--spp-pink-strong); }
.spp .spp-toast.is-leaving { opacity: 0; transform: translateY(8px); }

/* Copy-to-clipboard chip */
.spp .spp-copy {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	margin: 0;
	padding: 4px 8px;
	border: 1px dashed var(--spp-border-strong);
	border-radius: var(--spp-radius);
	background: var(--spp-surface-2);
	color: var(--spp-text);
	font: 500 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	cursor: pointer;
}
.spp .spp-copy:hover { border-color: var(--spp-primary); color: var(--spp-primary); }
.spp .spp-copy code { padding: 0; background: none; font: inherit; color: inherit; }
.spp .spp-copy .spp-icon { width: 14px; height: 14px; }

/* Loading skeleton */
.spp .spp-skel {
	display: block;
	border-radius: var(--spp-radius);
	background: linear-gradient(90deg, var(--spp-surface-2) 25%, var(--spp-border) 50%, var(--spp-surface-2) 75%);
	background-size: 200% 100%;
	animation: spp-shimmer 1.4s ease-in-out infinite;
}
@keyframes spp-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
	.spp .spp-skel { animation: none; }
}

/* Visible to screen readers only */
.spp .spp-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Headings and regions focused by script after navigation need no ring */
.spp [tabindex="-1"]:focus { outline: none; }

/* Right-to-left: directional icons point the other way. */
[dir="rtl"] .spp .spp-icon:has(> use[href$="-arrow-left"], > use[href$="-arrow-right"], > use[href$="-chevron-left"], > use[href$="-chevron-right"], > use[href$="-send"], > use[href$="-reply"], > use[href$="-log-out"]) { transform: scaleX(-1); }