/*
 * Postlinkly admin base styles.
 *
 * Shared design tokens, page background, page header, and notice banner.
 * Loaded on every Postlinkly admin page.
 *
 * @package Postlinkly
 * @since   1.1.0
 * @since   1.3.0 Shared colour, surface, and spacing tokens.
 */

/* ==========================================================================
   DESIGN TOKENS
   Scoped to every Postlinkly surface that consumes them: the admin page
   wrapper, the body-portaled suggestion overlays (the block-editor modal
   renders via createPortal to document.body), the Classic-editor metabox,
   and the block-editor sidebar panel. Each of these is a separate DOM root,
   so the tokens must be declared on all of them or var() resolves to nothing.
   Dark mode (later): add an override block on these same selectors under
   [data-theme="dark"] / @media (prefers-color-scheme: dark). Do NOT ship dark
   values in 1.3.0.
   ========================================================================== */

.postlinkly-wrap,
.pl-modal-overlay,
#pl-overlay,
#postlinkly-metabox,
.pl-sb-wrap {
	/* brand blue */
	--pl-primary:        #2271b1;
	--pl-primary-hover:  #135e96;
	--pl-primary-deep:   #0a4b78;
	--pl-primary-tint:   #f1f7fc;
	--pl-primary-tint2:  #e8f2fa;
	--pl-primary-line:   #b8d2e8;
	/* legacy aliases (kept so nothing referencing the old names can break) */
	--pl-primary-light:  #f1f7fc;
	--pl-secondary:      #2271b1;

	/* text */
	--pl-ink:            #1d2327;
	--pl-ink-2:          #2c3338;
	--pl-muted:          #50575e;
	--pl-faint:          #6f7780;
	--pl-dark:           #1d2327;
	--pl-slate:          #50575e;

	/* surfaces & lines */
	--pl-surface:        #ffffff;
	--pl-bg:             #f4f5f6;
	--pl-soft:           #f7f8f9;
	--pl-soft-2:         #fbfcfd;
	--pl-slate-light:    #f7f8f9;
	--pl-line:           #dfe3e7;
	--pl-line-2:         #c8cdd2;
	--pl-border:         #dfe3e7;

	/* semantic */
	--pl-green:          #06752e;
	--pl-green-l:        #edf8f0;
	--pl-green-line:     #b9dfc4;
	--pl-success:        #06752e;
	--pl-success-light:  #edf8f0;
	--pl-amber:          #8a5b00;
	--pl-amber-l:        #fff7e3;
	--pl-amber-line:     #ead59a;
	--pl-warn:           #8a5b00;
	--pl-red:            #b42324;
	--pl-red-l:          #fff1f1;
	--pl-red-line:       #efb8b8;
	--pl-danger:         #b42324;
	--pl-danger-light:   #fff1f1;

	/* radii */
	--pl-radius:         12px;
	--pl-radius-lg:      16px;
	--pl-radius-md:      10px;
	--pl-radius-sm:      7px;
	--pl-radius-xs:      5px;

	/* type */
	--pl-font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--pl-font-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

	/* shadow & motion (kept) */
	--pl-shadow-sm:      0 1px 2px rgba(30,45,60,.05);
	--pl-shadow-md:      0 1px 2px rgba(30,45,60,.025), 0 8px 28px -26px rgba(15,45,75,.55);
	--pl-transition:     all .2s cubic-bezier(.4,0,.2,1);
}

/* ==========================================================================
   PAGE BACKGROUND
   Applies the slate-grey #f1f5f9 background to all Postlinkly admin pages.
   Targets #wpcontent / #wpbody-content because WP's background is on those
   divs, not on <body>.
   ========================================================================== */

.wp-admin.toplevel_page_postlinkly #wpcontent,
.wp-admin.toplevel_page_postlinkly #wpbody-content,
.wp-admin[class*="postlinkly_page_postlinkly"] #wpcontent,
.wp-admin[class*="postlinkly_page_postlinkly"] #wpbody-content {
	background-color: #f4f5f6;
}

/* ==========================================================================
   SUPPRESS WP AUTO-GENERATED PAGE TITLE
   WordPress injects a bare <h1> before calling the page callback.
   Our pl-page-header__title is the canonical heading.
   ========================================================================== */

.toplevel_page_postlinkly #wpbody-content > .wrap > h1:first-child,
body[class*="postlinkly_page_postlinkly"] #wpbody-content > .wrap > h1:first-child,
.toplevel_page_postlinkly #wpbody-content > h1,
body[class*="postlinkly_page_postlinkly"] #wpbody-content > h1 {
	display: none;
}

/* ==========================================================================
   PAGE HEADER ROW
   Page header: title + subtitle on the left, actions on the right.
   ========================================================================== */

.postlinkly-wrap { max-width: 1200px; }
.postlinkly-wrap .notice { margin-top: 1em; }

.pl-page-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 28px;
	padding-top: 8px;
}
.pl-page-header__left {
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.pl-page-header__title {
	font-size: 24px !important;
	font-weight: 700 !important;
	color: var(--pl-ink) !important;
	letter-spacing: -0.4px;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.2 !important;
	border: none !important;
}
.pl-page-header__sub {
	font-size: 13.5px;
	color: var(--pl-muted);
	margin: 0;
	line-height: 1.4;
}
.pl-page-header__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

/* ==========================================================================
   INLINE SVG ICON UTILITIES
   ========================================================================== */

.pl-inline-icon {
	display: inline-block;
	vertical-align: -0.15em;
	flex-shrink: 0;
}

.pl-inline-icon--after {
	margin-left: 4px;
}

.pl-label-with-icon,
.pl-message-with-icon {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.pl-message-with-icon {
	align-items: flex-start;
}

.pl-message-with-icon > .pl-inline-icon {
	margin-top: 1px;
}