// Outside of the scoping but restricted to our admin screens
body.pwp-page {
	&.pwp-fixed {
		position: fixed;
		min-width: 100vw;
	}
	#wpcontent {
		padding-left: 0 !important;
	}
	#screen-meta {
		margin-left: 20px; // matching main WP screens
	}
	#screen-meta-links {
		margin-bottom: min( -40px, -3rem );
	}
}

// Base, vars and low specificity
:where(#personalizewp) {

	--color-dark: #1A1A1A;
	--color-light: #FCFCFF;
	--color-mid: #555;
	--color-mid-glare: #c4c4c4;
	--color-primary: #e1236c;
	--color-primary-shade: #8c003a;
	--color-primary-glare: #ffd9e0;
	--color-secondary: #002F5F;
	--color-secondary-shade: #001134;
	--color-secondary-glare: #d8e6f8;

	// --primary-gradient: linear-gradient(90deg, var(--color-primary) 0%, #F20FA6 100%);
	--required: #dc3545;
	accent-color: var(--color-primary); // For all form inputs


	--color-text: #3c434a; // Matching core WP
	--color-text-glare: #999;
	--color-text-link: var(--color-secondary);
	--color-text-link-hover: var(--color-primary);
	--color-nav-tab: var(--color-mid);
	--color-nav-tab-hover: var(--color-dark);
	--color-nav-tab-border: var(--color-secondary);
	--color-focus-ring: var(--color-primary);

	--color-warning-border: #d63638;
	--color-warning-background: var(--color-light);
	--color-success-border: #42BE65;
	--color-success-background: #DEFBE6;
	--color-info-border: var(--color-secondary);
	--color-info-background: #F5FAFF;

	* {
		box-sizing: border-box;
	}
	svg {
		vertical-align: baseline; // Override Bootstrap
	}
	:is(h2,h3,h4,h5){
		margin-block-start: 0;
		margin-block-end: 0.5rem;
		font-weight: 500;
		line-height: 1.2;
	}
	h2 {
		font-size: 2rem;
	}
	h3 {
		font-size: 1.75rem;
	}
	h4 {
		font-size: 1.5rem;
	}
	h5 {
		font-size: 1.25rem;
	}
	p {
		margin-block: 0;
	}
	a {
		text-decoration: none;
		color: var(--color-text-link);

		&:is(:hover,:focus-within) {
			text-decoration: underline;
			color: var(--color-text-link-hover);
		}
	}
	table {
		align-self: flex-start;
		flex-grow: 1;
		flex-basis: 0; // Ensure clustered tables grow from the same point

		:where(th) {
			font-weight: bold;
			text-align: inherit;
			&:not(.check-column,.column-cb) {
				padding-inline-end: min(5vw, 2rem);
				min-width: 12ch;
			}
		}
		:where(td):not(.check-column,.column-cb) {
			min-width: 15ch;
			word-break: break-all;
		}
	}
}
// Increased specificity to get over WP rules
:is(#personalizewp) {
	clear: both;
	display: flex;
	flex-direction: column;
	background: var(--color-light);
	min-height: 100vh;

	line-height: 1.5;
	font-size: 1rem;

	padding-inline: 20px; // Matching fixed WP admin
	padding-block-end: 1em;

	a:where(.back) {
		display: inline-flex;
		align-items: center;
		gap: 4px;
	}

	// Ensure always hidden
	[hidden] {
		display: none !important;
	}

	@import "bootstrap_compat";

	@import "layout";

	// Header
	@import "header";

	// Customising the default WP notices, and similar
	@import "notices";

	.notice ~ :where(.notice, .header-nav, main, .section:first-of-type) {
		margin-block-start: 2rem;
	}

	// Main Sections

	.section {
		+ .section {
			margin-block-start: 2rem;
		}
		&:last-of-type {
			padding-block-end: 2rem;
		}
	}

	:where(.section-title, .dashboard-title) {
		font-weight: 500;
		margin-bottom: 0;
		font-size: 1.75rem;
	}

	.section-subtitle {
		font-size: 1.25rem;
	}

	.section-description {
		p {
			font-size: 0.9375rem;
			color: var(--color-dark);
			clear: both;
			margin-block-end: 0;
			+ p {
				margin-block-start: 1em;
			}
		}
	}
	.required {
		color: var(--required);
	}

	// Customising layout
	:where(.categories,.rule-usage).with-sidebar {
		--sidebar-target-width: 28rem;
	}
	:where(.profiles,.segments,.scoring-rules).with-sidebar {
		--sidebar-target-width: 28rem;
		--gutter: 1rem 2rem;
	}
	:where(main).with-sidebar {
		--sidebar-content-min-width: 60%;
	}
	.repel:has(.section-title) {
		--gutter: 1rem 2rem;
	}
	.section-description p {
		max-width: 980px; // 75ch;
	}

	// Inline list of links
	.context-links {
		margin: 0;
		display: flex;
		gap: 2.5rem;
		align-items: center;
		li {
			margin: 0;
		}
	}
	.contextual-link[inert] {
		color: var(--color-mid-glare);
	}

	label + :where(input,select) {
		--flow-space: 0.25em;
	}

	.vendor-copyrights {
		margin-block-start: auto;
		font-style: italic;
	}

	// Buttons
	@import "buttons";


	// Forms
	@import "forms";

	// Dashboard/Settings
	@import "dashboard";

	// Settings
	@import "settings-forms";

	// Newer editing screens
	@import "entity-panel";

	@import "profile";

	// Resuable web components
	@import "components/autocomplete";
	@import "components/custom-tags";

	// Dialog/modals
	@import "dialog";

	// List tables
	@import "list-tables";

	// Onboarding
	@import "onboarding";

	.discount-offer-block {
		background-color: #f10fa6 !important;
		margin-top: -1rem;
		margin-top: -1rem;
		padding: 1rem 1.5rem;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-bottom: 1rem;

		.discount-offer-text {
			color: white;
			margin-bottom: 0;
			text-align: center;
			line-height: 1.5rem;

			a {
				color: white !important;
				text-decoration: none !important;
				border-bottom: 1px solid white;
				padding-bottom: 2px;

				&:hover {
					cursor: pointer !important;
				}
			}
		}
	}

} // Closing #personalizewp scoping

@import "animations";