/* ── The picker: a search, a checkable tree, the count of the chosen ──────────────────────────────── */
.rooster-admin-picker {
	@apply w-[min(46rem,calc(100vw-32px))] overflow-hidden;
}

.rooster-admin-picker__search {
	@apply ra-picker-search;
}

.rooster-admin-picker__search .rooster-admin-inputwrap {
	@apply max-w-none;
}

.rooster-admin-picker__body {
	@apply ra-picker-body;
}

.rooster-admin-picker__list {
	@apply m-0 p-0;
	list-style: none;
}

.rooster-admin-picker__item {
	@apply m-0;
}

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

.rooster-admin-picker__row {
	@apply ra-picker-row;

	@variant hover {
		@apply bg-muted;
	}
}

.rooster-admin-picker__check {
	@apply ra-picker-check;
}

.rooster-admin-picker__check input {
	@apply m-0 flex-none;
}

.rooster-admin-picker__label {
	@apply min-w-0 wrap-anywhere text-foreground;
}

.rooster-admin-picker__sep {
	@apply mx-1.5 text-muted-foreground;
}

.rooster-admin-picker__note,
.rooster-admin-picker__count {
	@apply text-secondary-foreground;
}

.rooster-admin-picker__toggle {
	@apply ra-picker-toggle;

	@variant hover {
		@apply bg-background text-foreground;
	}
}

.rooster-admin-picker__toggle svg {
	@apply transition-transform;
}

.rooster-admin-picker__toggle[aria-expanded="true"] svg {
	transform: rotate(90deg);
}

.rooster-admin-picker__children {
	@apply ra-picker-children;
}

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

.rooster-admin-picker__foot {
	@apply ra-picker-foot;
}

.rooster-admin-picker__selected {
	@apply ra-picker-selected;
}

/* The pick field (the owner: the buttons were lost among the text and the chosen): one control, bordered like an
   input, the chosen chips inside it and the Choose button at its end. */
.rooster-admin-pickfield {
	@apply ra-pickfield;
}

.rooster-admin-pickfield:focus-within {
	@apply ra-control-focus;
}

.rooster-admin-pickfield .rooster-admin-button {
	@apply ms-auto flex-none;
}

/* Empty: the labelled Choose button. Chosen: the chips and a small + (the owner's sketch). */
.rooster-admin-pickfield:has(.rooster-admin-chip) .rooster-admin-pickfield__choose,
.rooster-admin-pickfield:not(:has(.rooster-admin-chip)) .rooster-admin-pickfield__add {
	display: none;
}

/* The chosen, one line: what fits, then a "+N" chip that tells the rest on hover. */
.rooster-admin-picker-summary {
	@apply flex min-w-0 flex-auto items-center gap-1.5 overflow-hidden text-xs whitespace-nowrap text-secondary-foreground; /* secondary, not muted: the empty text must read (axe) */
}

.rooster-admin-picker-summary .rooster-admin-chip {
	@apply block flex-none truncate; /* a long name clips inside its chip; the first chip always shows */
	max-width: min(11rem, var(--ra-chip-max, 11rem)); /* the script lowers the cap when a +N chip must fit beside it */
}

.rooster-admin-picker-summary .rooster-admin-chip[hidden] {
	display: none;
}

.rooster-admin-picker-summary:empty {
	display: none;
}

.rooster-admin-chip.is-more {
	@apply cursor-help;
}

/* A sub-card (a card inside a card's body: the discount's terms). */
.rooster-admin-card .rooster-admin-card.is-sub {
	@apply mt-4 mb-0 border-t shadow-none;
	border-top-color: var(--ra-border);
}

.rooster-admin-card.is-sub .rooster-admin-card__head {
	@apply bg-muted/50 py-2.5;
}

/* Fields in two or four columns by the card's width; the fields start at the top of their row so their controls
   line up. */
.rooster-admin-fields.rooster-admin-fields--grid {
	@apply grid items-start gap-x-5;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* A fixed count for a row the operator reads as a set (the four targeting pickers of a rule): three or four, two on a
   laptop, one on a phone (0.43.0). */
.rooster-admin-fields--grid.is-cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rooster-admin-fields--grid.is-cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (width <= 1400px) {
	.rooster-admin-fields--grid.is-cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (width <= 1100px) {
	.rooster-admin-fields--grid.is-cols-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (width <= 782px) {
	.rooster-admin-fields--grid.is-cols-4,
	.rooster-admin-fields--grid.is-cols-3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* In a grid each field stacks its label over its control (a side-by-side row needs the width of a full card). */

.rooster-admin-fields--grid .rooster-admin-field {
	@apply grid-cols-[minmax(0,1fr)_auto] gap-y-1.5 border-t-0 py-2;
	grid-template-areas: "label pin" "control control";
}

.rooster-admin-fields--grid .rooster-admin-field__label {
	@apply pt-0;
}

.rooster-admin-fields--grid .rooster-admin-field__help,
.rooster-admin-fields--grid .rooster-admin-field__error {
	@apply ps-0;
}