/**
 * Prime Slider admin dashboard styles — Tailwind entry.
 *
 * Utilities are scoped under #ps-admin-app via tailwind.config.js `important`,
 * so nothing leaks into the rest of wp-admin. Preflight is disabled; the
 * scoped mini-reset below replaces it.
 */

/* IBM Plex Sans, bundled locally (no external font CDN in wp-admin). */
@font-face {
	font-family: 'IBM Plex Sans';
	src: url( './fonts/IBMPlexSans-Variable.woff2' ) format( 'woff2' );
	font-weight: 100 900;
	font-stretch: 75% 125%;
	font-style: normal;
	font-display: swap;
}


@tailwind base;
@tailwind components;
@tailwind utilities;

/* Scoped mini-reset (replaces Tailwind preflight, which is disabled). */
#ps-admin-app {
	font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont,
		'Segoe UI', Roboto, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;

	*,
	*::before,
	*::after {
		box-sizing: border-box;
		border-width: 0;
		border-style: solid;
		border-color: currentColor;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	figure {
		margin: 0;
	}

	ul,
	ol {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	button,
	input,
	select,
	textarea {
		font: inherit;
		color: inherit;
	}

	button {
		background: none;
		padding: 0;
		cursor: pointer;
	}

	a {
		color: inherit;
		text-decoration: none;
	}

	a:focus,
	button:focus {
		box-shadow: none;
		outline: none;
	}

	a:focus-visible,
	button:focus-visible {
		outline: 2px solid #fc6a2a;
		outline-offset: 2px;
	}

	img {
		max-width: 100%;
		height: auto;
	}

	svg {
		display: block;
	}

	*::-webkit-scrollbar {
		width: 8px;
		height: 8px;
	}

	*::-webkit-scrollbar-track {
		background: transparent;
	}

	*::-webkit-scrollbar-thumb {
		background: #d4d4d8;
		border-radius: 9999px;
	}

	&[data-ps-theme='dark'] *::-webkit-scrollbar-thumb {
		background: #3f3f46;
	}
}

/* Widget glyphs from the Prime Slider icon font (ps-wi-<widget>). */
#ps-admin-app .ps-widget-glyph[class*='ps-wi-']::before {
	font-size: inherit;
	line-height: 1;
}

/* Rich descriptions (PHP-provided HTML). */
#ps-admin-app .ps-rich-desc a {
	color: #fc6a2a;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/*
 * PHP-rendered panels (Other Plugins, and the tabs an add-on registers) are
 * moved into a card inside the app. They keep the classic admin styles, which
 * are scoped to .prime-slider-dashboard; only the outer spacing is reset.
 */
#ps-admin-app .ps-admin-panel {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 13px;
	line-height: 1.5;
	color: #1d2327;
	margin: 0;
	padding: 0;

	*,
	*::before,
	*::after {
		border-style: revert;
		border-width: revert;
	}

	ul,
	ol {
		list-style: revert;
		padding-left: revert;
	}

	h1,
	h2,
	h3 {
		margin: revert;
	}
}

#ps-admin-app[data-ps-theme='dark'] .ps-admin-panel-host {
	color-scheme: light;
}

/* Full-bleed dashboard — trim the default WP .wrap padding. */
body.ps-react-admin {
	#wpcontent,
	#wpbody-content {
		padding-left: 0;
	}

	.wrap.ps-react-wrap {
		margin: 0;
		padding: 0;
		max-width: none;
	}

	#ps-admin-app {
		margin: 0;
	}

	/* Admin notices from other plugins sit above the app, aligned with it. */
	#wpbody-content > .notice,
	#wpbody-content > .error,
	#wpbody-content > .updated {
		margin: 20px 48px 0;
	}
}

/* Paint the wp-admin canvas around the app so the background is seamless. */
body.ps-react-admin,
body.ps-react-admin #wpcontent {
	background: #f0f0f1;
}

body.ps-react-admin.ps-theme-dark,
body.ps-react-admin.ps-theme-dark #wpcontent {
	background: #0b0e13;
}