/* ── Menu bar ────────────────────────────────────────────────────────── */
.rooster-admin-stickytop {
	@apply sticky top-8 z-(--ra-z-sticky) ms-0.5 me-5 mt-0 mb-(--ra-page-gap); /* under the side menu (core's #adminmenuwrap is 9990), so its flyout submenus open over the bar (owner, 25 Oct 2026) */
}

/* stylelint-disable-next-line selector-max-specificity -- outweighs core's own #wpbody-content .wrap rule */
.rooster-admin-has-chrome #wpbody-content > .wrap {
	margin-top: 0;
}

.rooster-admin-menubar {
	@apply flex flex-wrap items-center gap-x-4 gap-y-2 rounded-xl bg-background px-5 py-2.5 shadow-bar;
}

.rooster-admin-menubar__pills,
.rooster-admin-menubar__tools {
	@apply flex flex-wrap items-center gap-2;
}

.rooster-admin-menubar__tools {
	@apply ms-auto;
}

.rooster-admin-pillgroup {
	@apply relative;
}

/* A pill (Metronic's nav pill): the section's colour on its border; the current one filled with the section's ink. */
.rooster-admin-pill {
	@apply m-0 inline-flex cursor-pointer items-center gap-1.5 rounded-[20px] border bg-background px-3.75 py-1.75 font-[inherit] text-sm leading-none font-semibold whitespace-nowrap text-foreground no-underline;
	border-color: color-mix(in srgb, var(--ra-sec, var(--ra-input)) 70%, var(--ra-background));
}

@supports (text-box: trim-both cap alphabetic) {
	.rooster-admin-pill {
		@apply box-border min-h-[calc(1em+16px)];
	}

	.rooster-admin-pill__text {
		text-box: trim-both cap alphabetic;
	}
}

.rooster-admin-pill:hover,
.rooster-admin-pill[aria-expanded="true"] {
	@apply text-foreground;
	background: color-mix(in srgb, var(--ra-sec, var(--ra-muted)) 16%, var(--ra-background));
}

.rooster-admin-pill.is-active,
.rooster-admin-pill.is-active[aria-expanded="true"] {
	@apply border-sec-ink bg-sec-ink text-white;
	box-shadow: 0 2px 6px color-mix(in srgb, var(--ra-sec-ink, var(--ra-product-ink)) 35%, transparent);
}

.rooster-admin-pill.is-active:hover {
	border-color: color-mix(in srgb, var(--ra-sec-ink, var(--ra-product-ink)) 88%, black);
	background: color-mix(in srgb, var(--ra-sec-ink, var(--ra-product-ink)) 88%, black);
	color: white;
}

@media (forced-colors: active) {
	.rooster-admin-pill.is-active {
		forced-color-adjust: none;
		border: 2px solid Highlight;
		background: Highlight;
		color: HighlightText;
	}

	.rooster-admin-dropdown__item.is-current {
		outline: 2px solid Highlight;
		outline-offset: -2px;
	}
}

.rooster-admin-pill.is-home {
	@apply border-input;
}

.rooster-admin-pill.is-icon,
.rooster-admin-pill.is-search {
	@apply border-transparent px-2.5 py-1.5 text-secondary-foreground;
}

.rooster-admin-pill.is-search kbd {
	@apply bg-transparent text-secondary-foreground; /* secondary, not muted: 11 px text needs the contrast (axe, 0.26.0) */
}

.rooster-admin-pill.is-ai {
	@apply text-info;
}

.rooster-admin-pill .rooster-admin-icon--caret {
	@apply opacity-70;
}

.rooster-admin-pill.is-rest {
	@apply border-dashed;
}

/* A popover (0.27.0): the browser's top layer, light dismiss, Escape and one open at a time; its start edge on its
   button's (anchor positioning), else where the script put it (--ra-top, --ra-left); shifted by --ra-shift when it
   would leave the window; no taller than the room below (--ra-max-h). The margin and the inset reset the user
   agent's. */
.rooster-admin-dropdown {
	@apply fixed inset-auto z-(--ra-z-pop) m-0 mt-1.5 max-h-(--ra-max-h,min(70vh,640px)) min-w-70 max-w-[min(380px,calc(100vw-40px))] overflow-y-auto rounded-[10px] border border-border border-t-[3px] bg-card p-1.5 text-foreground shadow-pop;
	border-top-color: var(--ra-sec, var(--ra-border));
	translate: var(--ra-shift, 0) 0;
	top: var(--ra-top, 0);
	left: var(--ra-left, 0);
}

/* The entrance of a popover: a short fade and lift under @starting-style; display and the top layer transition
   discretely so the exit fades too. */
.rooster-admin-dropdown,
.rooster-admin-tierpill__panel {
	transition:
		opacity var(--ra-dur-fast) var(--ra-ease),
		transform var(--ra-dur-fast) var(--ra-ease),
		overlay var(--ra-dur-fast) allow-discrete,
		display var(--ra-dur-fast) allow-discrete;

	@variant open {
		@apply opacity-100;
		transform: none;

		@starting-style {
			@apply opacity-0;
			transform: translateY(-4px);
		}
	}
}

/* Where the browser anchors: the panel follows its button (the popover's invoker is its implicit anchor), and flips
   to the other side when it would leave the window. */
/* stylelint-disable property-no-unknown, function-no-unknown -- anchor positioning (CSS Anchor Positioning Level 1) */
@supports (anchor-name: --a) {
	.rooster-admin-dropdown {
		top: anchor(bottom);
		left: anchor(left);
		position-try-fallbacks: flip-inline, flip-block;
	}

	.rooster-admin-tierpill__panel,
	.rooster-admin-dropdown.rooster-admin-lens__menu {
		/* two classes: the menu's own fallback rule comes later in this file and must lose to the anchored edge */
		top: anchor(bottom);
		right: anchor(right);
		left: auto;
		position-try-fallbacks: flip-inline, flip-block;
	}
}
/* stylelint-enable property-no-unknown, function-no-unknown */

.rooster-admin-dropdown.is-wide {
	max-width: none;
}

.rooster-admin-dropdown.is-wide.is-cols-2 {
	--ra-cols: 2;

	@apply w-[min(540px,calc(100vw-32px))];
}

.rooster-admin-dropdown.is-wide.is-cols-3 {
	--ra-cols: 3;

	@apply w-[min(780px,calc(100vw-32px))];
}

.rooster-admin-dropdown.is-wide.is-cols-4 {
	--ra-cols: 4;

	@apply w-[min(1040px,calc(100vw-32px))];
}

.rooster-admin-dropdown.is-wide.is-cols-5 {
	--ra-cols: 5;

	@apply w-[min(1300px,calc(100vw-32px))];
}

.rooster-admin-dropdown__cols:not(.is-stacked) {
	@apply grid grid-cols-[repeat(var(--ra-cols,1),minmax(0,1fr))] items-start gap-x-2.5;
}

.rooster-admin-dropdown__stack {
	@apply flex min-w-0 flex-col;
}

.rooster-admin-dropdown__stack[hidden],
.rooster-admin-dropdown__col[hidden] {
	display: none;
}

.rooster-admin-dropdown__col {
	@apply pt-1.5 pb-0.5;
}

.rooster-admin-dropdown__col .rooster-admin-dropdown__head {
	@apply mt-0 mb-1;
}

.rooster-admin-dropdown__head {
	@apply mx-2.5 mt-1 mb-1.5 text-2xs font-semibold tracking-[0.04em] uppercase;
	color: var(--ra-sec-ink, var(--ra-secondary-foreground));
}

.rooster-admin-dropdown__list {
	@apply m-0 list-none p-0;
}

.rooster-admin-dropdown__list li {
	@apply m-0;
}

.rooster-admin-dropdown__list li[hidden] {
	display: none;
}

.rooster-admin-dropdown__item {
	@apply flex items-center gap-2 rounded-md px-2.5 py-1.75 text-sm leading-[1.35] text-foreground no-underline hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground;
}

/* The current screen's row: a straight line at its start in the section's colour (a drawn bar, not an inset shadow,
   which followed the row's rounded corners: the owner, 24 Oct). */
.rooster-admin-dropdown__item.is-current {
	@apply relative font-semibold;
}

.rooster-admin-dropdown__item.is-current::before {
	@apply absolute start-0 top-1.5 bottom-1.5 w-0.5 content-[''];
	background: var(--ra-sec, var(--ra-border));
}

.rooster-admin-dropdown__title {
	@apply flex-auto;
}

/* The hierarchy: a parent's children in a sub-list behind a count toggle; a parent shown away from its own section
   heads its children in a muted row. */
.rooster-admin-dropdown__row {
	@apply flex items-center;
}

.rooster-admin-dropdown__row > .rooster-admin-dropdown__item {
	@apply min-w-0 flex-auto;
}

.rooster-admin-dropdown__toggle {
	@apply me-1 inline-flex flex-none cursor-pointer items-center gap-1 rounded-sm border-0 bg-transparent px-1.5 py-1 text-2xs text-secondary-foreground hover:bg-muted hover:text-foreground;
}

.rooster-admin-dropdown__toggle .rooster-admin-icon--caret {
	@apply transition-transform;
}

.rooster-admin-dropdown__toggle[aria-expanded="true"] .rooster-admin-icon--caret {
	@apply rotate-180;
}

.rooster-admin-dropdown__count {
	@apply min-w-4 rounded-full bg-muted px-1.5 text-center font-semibold;
}

.rooster-admin-dropdown__sub {
	@apply mt-0.5 mb-1 ms-6 list-none border-s ps-1;
	border-inline-start-color: color-mix(in srgb, var(--ra-sec, var(--ra-border)) 70%, var(--ra-background));
}

.rooster-admin-dropdown__sub[hidden] {
	display: none;
}

.rooster-admin-dropdown__sub .rooster-admin-dropdown__item {
	@apply py-1.25 text-xs;
}

.rooster-admin-dropdown__item.is-foreign {
	@apply font-medium text-secondary-foreground;
}

.rooster-admin-dropdown__head .rooster-admin-ico {
	@apply me-1.5 align-[-2px];
}

.rooster-admin-dropdown__foot {
	@apply mt-1 flex items-center justify-between gap-1.5 rounded-b-md border-t px-2.5 py-2 text-xs font-semibold no-underline;
	border-top-color: color-mix(in srgb, var(--ra-sec, var(--ra-border)) 60%, var(--ra-background));
	color: var(--ra-sec-ink, var(--ra-link));
}

.rooster-admin-dropdown__foot:hover,
.rooster-admin-dropdown__foot:focus-visible {
	background: color-mix(in srgb, var(--ra-sec, var(--ra-muted)) 16%, var(--ra-background));
	color: var(--ra-sec-ink, var(--ra-link));
}

.rooster-admin-rest__menu .rooster-admin-dropdown__head:not(:first-child) {
	@apply mt-2.5;
}

/* A badge (Metronic's kt-badge light variant): the tier of an entry that is not active on this site. */
.rooster-admin-tier {
	@apply inline-block flex-none rounded-[3px] border border-warning-border bg-warning-soft px-1.25 py-px text-2xs leading-[1.2] font-bold tracking-[0.04em] text-warning-soft-foreground;
}

/* Audience picker. */
.rooster-admin-lens .rooster-admin-pill {
	@apply border-input font-medium;
}

.rooster-admin-lens__dots {
	@apply inline-flex gap-[3px] empty:hidden;
}

.rooster-admin-lens__text {
	@apply max-w-60 overflow-hidden text-ellipsis;
}

/* End-aligned, as the tier panel: its end edge on the pill's. */
/* A short list: it shows its overflow, so its options' tips beside it are not cut (0.45.5). */
.rooster-admin-lens__menu {
	@apply min-w-[270px] overflow-visible;
	left: auto;
	right: var(--ra-right, 0);
}

.rooster-admin-lens__form fieldset {
	@apply m-0 border-0 p-0;
}

.rooster-admin-lens__head {
	@apply mx-2 mt-1 mb-1.5 p-0 text-2xs font-semibold tracking-[0.04em] text-secondary-foreground uppercase;
}

.rooster-admin-lens__opt {
	@apply flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-muted;
}

.rooster-admin-lens__opt input {
	@apply m-0;
}

.rooster-admin-lens__foot {
	@apply mt-1.5 flex justify-between gap-2 border-t border-border px-2 pt-2 pb-1;
}

.rooster-admin-persona-dot {
	@apply inline-block size-2 flex-none rounded-full;
	background: var(--ra-persona, var(--ra-muted-foreground));
}

/* Pins. */
.rooster-admin-pins {
	@apply mt-2 flex flex-wrap items-center justify-center gap-x-2 gap-y-1.5;
}

.rooster-admin-pins.is-empty {
	display: none;
}

.rooster-admin-pin-chip {
	@apply inline-flex max-w-65 items-center rounded-full border bg-background shadow-sm;
	border-color: color-mix(in srgb, var(--ra-sec, var(--ra-input)) 70%, var(--ra-background));
}

.rooster-admin-pin-chip a {
	@apply inline-flex min-w-0 items-center gap-1.25 overflow-hidden py-[3px] ps-2.75 pe-1 text-xs font-semibold text-ellipsis whitespace-nowrap no-underline;
	color: var(--ra-sec-ink, var(--ra-foreground));
}

.rooster-admin-pin-chip__text {
	@apply overflow-hidden text-ellipsis;
}

.rooster-admin-pin-chip__x {
	@apply me-[3px] inline-flex size-5 cursor-pointer items-center justify-center rounded-full border-0 bg-transparent p-0 text-muted-foreground hover:bg-muted hover:text-foreground;
}

/* A pinned tab, card or setting: the shape of what it opens; a page keeps the pill. */
.rooster-admin-pin-chip[data-kind="t"] {
	@apply rounded-md;
}

.rooster-admin-pin-chip[data-kind="c"],
.rooster-admin-pin-chip[data-kind="s"] {
	@apply rounded-sm;
}

/* THE pin button (Home entries, settings cards and fields, a product's own cards): always visible in secondary
   ink; pinned, the section's ink and a filled pin (never colour alone). */
.rooster-admin-pinbtn {
	@apply ms-auto inline-flex min-h-6 min-w-6 flex-none cursor-pointer items-center justify-center rounded-sm border-0 bg-transparent p-[3px] text-secondary-foreground hover:bg-muted hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-link; /* a 24 px target (FR8, WCAG 2.5.8; 0.58.0) */
}

.rooster-admin-pinbtn.is-on {
	color: var(--ra-sec-ink, var(--ra-link));
}

.rooster-admin-pinbtn.is-on > .rooster-admin-ico {
	@apply fill-current;
}