@import './app.pcss';

@keyframes ftIn {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@theme {
	--animate-ft-in: ftIn 0.12s ease;
}

@keyframes progress-bar {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(400%);
	}
}

/* Remove WordPress default content padding so our SPA fills edge-to-edge */
.toplevel_page_allcoach {
	background: #f4f6f8;

	#wpcontent {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.prose {
		p,
		h1,
		h2,
		h3 {
			margin: 0;
		}
	}
}

/* Override WordPress admin form styles  */
#AllCoach-Admin-Root {
	[data-slot='input'],
	[data-slot='textarea'],
	[data-slot='select-trigger'],
	[data-slot='input-group'] {
		background-color: white;
		color: inherit;
		border-color: var(--input);
		border-radius: calc(var(--radius) - 2px);
		box-shadow: none;
	}
}

/* Reset WordPress global link styles inside the app root */
#AllCoach-Admin-Root {
	a {
		color: inherit;
		text-decoration: none;
		box-shadow: none;
	}

	.tiptap {
		* {
			@apply leading-[1.2];
		}
		a {
			@apply hover:text-primary cursor-pointer underline underline-offset-[3px];
		}
	}
}

/* Fix WordPress admin link/text styles leaking into Radix portals */
[data-slot='popover-content'],
[data-slot='combobox-content'],
[data-slot='select-content'] {
	a {
		color: inherit;
		text-decoration: none;
		box-shadow: none;
	}
}

/* Fix WordPress form styles leaking into portal-rendered inputs */
[data-slot='popover-content'],
[data-slot='dialog-content'],
[data-slot='combobox-content'],
[data-slot='popover-content'],
[data-slot='combobox-content'] {
	[data-slot='input'],
	[data-slot='textarea'] {
		background-color: white;
		color: inherit;
		border-color: var(--input);
		border-radius: calc(var(--radius) - 2px);
		box-shadow: none;
	}
}

/* Fix WordPress form styles leaking into Select portal */
[data-slot='select-content'],
[data-slot='select-item'] {
	color: inherit;
	background-color: white;
	box-shadow: none;
}

[data-slot='select-item'] {
	&:hover,
	&:focus,
	&[data-highlighted] {
		background-color: var(--accent);
		color: var(--accent-foreground);
		outline: none;
	}
}

/* EditProgram builder — responsive header visibility */
.ep-desktop-only {
	display: none !important;
}
@media (min-width: 768px) {
	.ep-desktop-only {
		display: inline-flex !important;
	}
	.ep-desktop-only.ep-block {
		display: block !important;
	}
	.ep-mobile-only {
		display: none !important;
	}
}

/* Override WordPress link styles inside pagination */
#AllCoach-Admin-Root {
	[data-slot='pagination-link'],
	[data-slot='pagination-previous'],
	[data-slot='pagination-next'] {
		all: revert-layer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

body {
	&[data-wait] {
		cursor: wait !important;

		#toplevel_page_allcoach,
		#AllCoach-Admin-Root {
			& button,
			& a,
			& [role='button'] {
				pointer-events: none;
			}
		}
	}

	#AllCoach-Admin-Root,
	[data-sonner-toaster='true'],
	[data-slot='dialog-content'],
	[data-radix-popper-content-wrapper] {
		font-family:
			-apple-system, BlinkMacSystemFont, Inter, 'Segoe UI', Roboto, Oxygen-Sans,
			Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
	}
}

#AllCoach-Admin-Root p.is-empty::before,
[data-slot='dialog-content'] p.is-empty::before {
	color: var(--color-gray-400);
	content: attr(data-placeholder);
	float: left;
	height: 0;
	pointer-events: none;
}

/* Restore list styles inside TipTap editors (overridden by WP admin CSS) */
#AllCoach-Admin-Root .prose ul,
[data-slot='dialog-content'] .prose ul {
	list-style-type: disc;
	padding-left: 1.625em;
}

#AllCoach-Admin-Root .prose ol,
[data-slot='dialog-content'] .prose ol {
	list-style-type: decimal;
	padding-left: 1.625em;
}

/* Blockquote — match frontend ac-act-blockquote (4px primary border + light bg) */
#AllCoach-Admin-Root .prose blockquote,
[data-slot='dialog-content'] .prose blockquote {
	border-left: none;
	border-inline-start: 4px solid var(--primary);
	padding: 0.4em 1em;
	margin-top: 0;
	margin-bottom: 0;
	font-style: italic;
	font-weight: 500;
	color: var(--muted-foreground);
	background: color-mix(in oklch, var(--primary) 8%, transparent);
	border-radius: 0 4px 4px 0;
	quotes: none;

	p {
		margin: 0;
	}
}

.AllCoach-Drag-Handle {
	width: 20px;
	height: 20px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-gray-500);
	margin-right: 8px;

	&:hover {
		background-color: var(--color-gray-200);
		color: var(--color-gray-700);
		cursor: grab;
	}

	svg {
		width: 12px;
		height: 12px;
	}

	&.AllCoach-Plus-Button {
		margin-right: 0;
		&:hover {
			cursor: pointer;
		}
	}
}