/* ── Fields and controls: the kit's skin for every control, inside any chrome wrapper ────────────────── */
.rooster-admin .rooster-admin-input,
.rooster-admin .rooster-admin-select,
.rooster-admin .rooster-admin-textarea {
	@apply ra-control m-0 w-full max-w-[40rem];

	@variant focus {
		@apply ra-control-focus;
	}

	@variant user-invalid {
		@apply border-destructive;
	}

	@variant disabled {
		@apply bg-muted opacity-60;
	}
}

/* A read-only control (0.54.1): the value on the muted ground, as Metronic's; it still takes the focus and copies. */
.rooster-admin .rooster-admin-input[readonly],
.rooster-admin .rooster-admin-textarea[readonly] {
	@apply bg-muted text-secondary-foreground;
}

.rooster-admin .rooster-admin-input--short {
	@apply max-w-40;
}

/* The widths: short (a number, a code), medium (a name, a label), the default (a sentence, a URL); xs (0.59.0) and the
   select's widths are fields.css's. */
.rooster-admin .rooster-admin-input--medium {
	@apply max-w-80;
}

/* A date, time, month or week input is as wide as its value (0.43.0: the owner's "huge datetime selectors") and as tall
   as every other control (0.46.6: the browser's date field added 4px of its own). */
.rooster-admin .rooster-admin-input[type="date"],
.rooster-admin .rooster-admin-input[type="time"],
.rooster-admin .rooster-admin-input[type="datetime-local"],
.rooster-admin .rooster-admin-input[type="month"],
.rooster-admin .rooster-admin-input[type="week"] {
	@apply h-8 w-auto;
}

/* One checkbox and one radio on every chrome screen, the dialogs in the top layer and core's own panels included, so on the body class (0.43.0; the owner: "every radio button and a surprise"): the
   kit's box, core's glyphs off, the mark in white on the product ink, the control on the first line of its label; a switch (a checkbox with role=switch) is drawn by its own recipe (0.45.1). */
:is(.rooster-admin-has-chrome, .rooster-admin-island, .rooster-admin-app)
	input[type="checkbox"]:where(:not([role="switch"])),
:is(.rooster-admin-has-chrome, .rooster-admin-island, .rooster-admin-app) input[type="radio"] {
	@apply ra-choice;
}

:is(.rooster-admin-has-chrome, .rooster-admin-island, .rooster-admin-app) input[type="radio"] {
	@apply rounded-full;
}

:is(.rooster-admin-has-chrome, .rooster-admin-island, .rooster-admin-app)
	input[type="checkbox"]:where(:not([role="switch"]))::before,
:is(.rooster-admin-has-chrome, .rooster-admin-island, .rooster-admin-app) input[type="radio"]::before,
:is(.rooster-admin-has-chrome, .rooster-admin-island, .rooster-admin-app) input[type="radio"]:checked::before {
	content: none;
}

/* The mark is a mask in the accent's on-colour (0.45.0): white on a dark section, dark on a light one. */
:is(.rooster-admin-has-chrome, .rooster-admin-island, .rooster-admin-app)
	input[type="checkbox"]:where(:not([role="switch"])):checked::before,
:is(.rooster-admin-has-chrome, .rooster-admin-island, .rooster-admin-app)
	input[type="checkbox"]:where(:not([role="switch"])):indeterminate::before {
	@apply float-none m-0 block size-full;
	content: "";
	background: var(--ra-accent-on);
	mask: var(--ra-check) center / 100% 100% no-repeat;
}

:is(.rooster-admin-has-chrome, .rooster-admin-island, .rooster-admin-app)
	input[type="checkbox"]:where(:not([role="switch"])):indeterminate::before {
	mask-image: var(--ra-dash);
}

:is(.rooster-admin-has-chrome, .rooster-admin-island, .rooster-admin-app)
	input[type="checkbox"]:where(:not([role="switch"])):checked,
:is(.rooster-admin-has-chrome, .rooster-admin-island, .rooster-admin-app) input[type="radio"]:checked,
:is(.rooster-admin-has-chrome, .rooster-admin-island, .rooster-admin-app)
	input[type="checkbox"]:where(:not([role="switch"])):indeterminate {
	@apply ra-choice-on;
}

:is(.rooster-admin-has-chrome, .rooster-admin-island, .rooster-admin-app) input[type="radio"]:checked {
	background-image: radial-gradient(circle, var(--ra-accent-on) 36%, transparent 42%);
}

:is(.rooster-admin-has-chrome, .rooster-admin-island, .rooster-admin-app)
	input[type="checkbox"]:where(:not([role="switch"])):hover,
:is(.rooster-admin-has-chrome, .rooster-admin-island, .rooster-admin-app) input[type="radio"]:hover {
	@apply border-accent;
}

:is(.rooster-admin-has-chrome, .rooster-admin-island, .rooster-admin-app)
	input[type="checkbox"]:where(:not([role="switch"])):focus,
:is(.rooster-admin-has-chrome, .rooster-admin-island, .rooster-admin-app) input[type="radio"]:focus {
	@apply shadow-none outline-0;
}

:is(.rooster-admin-has-chrome, .rooster-admin-island, .rooster-admin-app)
	input[type="checkbox"]:where(:not([role="switch"])):focus-visible,
:is(.rooster-admin-has-chrome, .rooster-admin-island, .rooster-admin-app) input[type="radio"]:focus-visible {
	@apply ra-ring;
}

:is(.rooster-admin-has-chrome, .rooster-admin-island, .rooster-admin-app)
	input[type="checkbox"]:where(:not([role="switch"])):disabled,
:is(.rooster-admin-has-chrome, .rooster-admin-island, .rooster-admin-app) input[type="radio"]:disabled {
	@apply cursor-not-allowed opacity-50;
}

/* Hidden is hidden on a chrome screen, whatever display a recipe sets (0.45.1: a Clear button the script hides). */
:is(.rooster-admin-has-chrome, .rooster-admin-island, .rooster-admin-app) [hidden] {
	display: none;
}

/* The filter bar (0.44.1): labelled filters on one line, bottom-aligned so every control and button shares one
   baseline, the Apply and Clear buttons at its end. A select in a filter bar is 12rem, the native one before the
   script runs and the combobox after; so is a search box. */
.rooster-admin-filters {
	@apply m-0 flex flex-wrap items-end gap-x-3 gap-y-2;
}

.rooster-admin-filters__field {
	@apply m-0 flex min-w-0 flex-col gap-1;
}

.rooster-admin-filters__label {
	@apply m-0 text-sm leading-[1.4] font-semibold text-foreground;
}

.rooster-admin-filters__actions {
	@apply flex items-center gap-2;
}

/* A group of filters about one thing (0.68.23, Filters::bar()'s `group`): its name over its fields, one item of the bar,
   so it moves to the next line whole; its fields' own labels lighter, parts of it. They wrap among themselves only on a
   screen narrower than the group. */
.rooster-admin-filters__group {
	@apply m-0 flex max-w-full min-w-0 flex-none flex-col gap-1;
}

/* A segmented choice in a filter bar (0.68.24) never runs past the bar: its segments wrap on a phone. */
.rooster-admin-filters .rooster-admin-segmented {
	@apply max-w-full flex-wrap;
}

.rooster-admin-filters__group-fields {
	@apply flex flex-wrap items-end gap-x-3 gap-y-2;
}

.rooster-admin-filters__group .rooster-admin-filters__field > .rooster-admin-filters__label {
	@apply font-normal text-secondary-foreground;
}

/* More filters (0.68.23, Filters::bar()'s `more`): a control-high button on the bar's line, its count of the set ones;
   open, it takes the bar's width and its filters wrap on their own line under a hairline, as the bar's own do. */
.rooster-admin-filters__more {
	@apply m-0 flex-none;
}

.rooster-admin-filters__more[open] {
	@apply basis-full;
}

.rooster-admin-filters__more-toggle {
	@apply inline-flex h-8 cursor-pointer list-none items-center gap-1.5 rounded-md border border-border bg-background px-2.5 text-sm font-medium text-foreground hover:bg-muted focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-link;
}

.rooster-admin-filters__more-toggle::-webkit-details-marker {
	@apply hidden;
}

.rooster-admin-filters__more-count {
	@apply inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1.5 text-xs font-semibold text-primary-foreground;
}

.rooster-admin-filters__more-body {
	@apply mt-2 flex flex-wrap items-end gap-x-3 gap-y-2 border-t border-border pt-2;
}

/* A switch in a filter bar (0.45.5) stands on the controls' line: as tall as a control, its track and words centred on
   the selects' middle, not on their bottom edge. */
.rooster-admin-filters > .rooster-admin-switch {
	@apply h-8 items-center;
}

.rooster-admin-filters select:not([multiple]),
.rooster-admin-filters .rooster-admin-input,
.rooster-admin-table__toolbar select:not([multiple]),
.rooster-admin-row select:not([multiple]) {
	@apply w-48 max-w-full;
}

/* Selected text on a chrome screen wears the section's accent too (0.45.0), not the system's blue. */
.rooster-admin-has-chrome ::selection {
	background-color: color-mix(in srgb, var(--ra-accent) 28%, transparent);
	color: inherit;
}

/* A monospace value: patterns, codes, keys (0.43.0). */
.rooster-admin .rooster-admin-input.is-code,
.rooster-admin .rooster-admin-textarea.is-code {
	@apply font-mono text-xs;
}

/* The select is the one select recipe (0.45.4): the combobox the script makes of it wears the same. */
.rooster-admin .rooster-admin-select {
	@apply ra-select mx-0 w-auto min-w-40;
}

/* So is every single select the script upgrades (its scope: inside .rooster-admin), whatever wrapper or class it has:
   a core list screen's, a settings form-table's, a product's own (a list box, with size, stays a list box). */
.rooster-admin select:not([multiple], [size]) {
	@apply ra-select;

	@variant focus {
		@apply ra-control-focus;
	}
}

/* The chevron as a mask in the muted colour (0.75.1, the owner's ruling on the reply's question 5), as the theme draws
   its own: where the browser lets a page draw the select's icon and its list (`appearance: base-select`, Chrome 135+)
   the icon is the mask, turned up while the list is open, and the list a panel in the kit's tokens; elsewhere the
   image of ra-select stays (the admin's two greys, one per scheme). The combobox's control and the calendar's button
   are elements of their own and draw the mask always (select.css, filters.css). */
@supports (appearance: base-select) {
	.rooster-admin select:not([multiple], [size]) {
		@apply relative bg-none;
		appearance: base-select;
	}

	.rooster-admin select:not([multiple], [size])::picker(select) {
		@apply mt-1 rounded-(--ra-shape-control) border border-border bg-background p-1 text-foreground shadow-pop;
		appearance: base-select;
	}

	.rooster-admin select:not([multiple], [size])::picker-icon {
		@apply absolute end-2.5 top-1/2 -mt-2 size-4 bg-muted-foreground;
		content: "";
		mask: var(--ra-chevron-mask) center / contain no-repeat;
	}

	.rooster-admin select:not([multiple], [size]):open::picker-icon {
		rotate: 180deg;
	}

	.rooster-admin select:not([multiple], [size]) option {
		@apply rounded-sm px-2.5 py-1.5 text-sm;
	}

	.rooster-admin select:not([multiple], [size]) option:checked {
		@apply bg-muted;
	}
}

.rooster-admin .rooster-admin-textarea {
	@apply field-sizing-content min-h-20;
}

.rooster-admin [aria-invalid="true"].rooster-admin-input,
.rooster-admin [aria-invalid="true"].rooster-admin-select,
.rooster-admin [aria-invalid="true"].rooster-admin-textarea {
	@apply border-destructive shadow-(--ra-shadow-focus-destructive);
}

.rooster-admin-inputwrap {
	@apply relative inline-flex w-full max-w-[40rem] items-center;
}

.rooster-admin-inputwrap__icon {
	@apply pointer-events-none absolute start-2.5 text-muted-foreground;
}

/* The room for the icon wins over the adoption layer's control padding (0.45.1: the icon sat on the placeholder). */
.rooster-admin .rooster-admin-inputwrap .rooster-admin-input {
	@apply ps-8;
}

/* In a filter bar the box is the wrapper's: 12rem, the input fills it; a search box 18rem (0.62.1: it holds words). */
.rooster-admin-filters .rooster-admin-inputwrap {
	@apply w-48 max-w-full;
}

.rooster-admin-filters .rooster-admin-inputwrap:has(> input[type="search"]),
.rooster-admin-filters__field > input[type="search"].rooster-admin-input {
	@apply w-72 max-w-full;
}

.rooster-admin-filters .rooster-admin-inputwrap .rooster-admin-input {
	@apply w-full;
}

.rooster-admin-field__required {
	@apply text-destructive-foreground;
}

.rooster-admin-field__error {
	@apply m-0 flex items-center gap-1 ps-[calc(var(--ra-label-w)+16px)] text-xs text-destructive-foreground;
	grid-column: 1 / -1;
}

.rooster-admin-fields--stacked .rooster-admin-field__error {
	@apply ps-0;
}

.rooster-admin-field.is-invalid .rooster-admin-field__label {
	@apply text-destructive-foreground;
}

.rooster-admin-check__desc {
	@apply block text-xs text-secondary-foreground;
}

.rooster-admin-checks.is-inline {
	@apply flex flex-wrap gap-x-4;
}

/* A switch in a checks grid (0.66.1, Ui::checks()'s `switches`): a check's rhythm, row for row. */
.rooster-admin-checks > .rooster-admin-switch {
	@apply py-1;
}

/* An item of a checks grid a product builds itself (0.68.25, the LMS's Learner menu and Portal tabs): the switch and
   what follows it (a locked switch's reason) on one line, in the same rhythm as a bare switch. */
.rooster-admin-checks__item {
	@apply flex flex-wrap items-center gap-x-2 py-1;
}

/* Many checks in columns (0.54.0): as many as fit, each at least 16rem. */
.rooster-admin-checks.is-grid {
	@apply grid grid-cols-[repeat(auto-fill,minmax(16rem,1fr))] gap-x-4;
}

/* A unit after a field (0.54.0): "minutes", "%". */
.rooster-admin-unit {
	@apply inline-flex max-w-full items-center gap-2;
}

.rooster-admin-unit__text {
	@apply text-sm text-secondary-foreground;
}

/* The switch: a checkbox with role=switch under a track; the thumb slides; the section's ink when on. */
.rooster-admin-switch {
	@apply inline-flex cursor-pointer items-start gap-2.5 text-sm;
}

/* The track beside its label's first line (0.65.7, Rooster One's request 37: a label of two lines had it centred
   against both), as a check's box is: half what the line has over the track's 22 px. */
.rooster-admin-switch > .rooster-admin-switch__track {
	margin-top: -1px;
	margin-top: calc((1lh - 1.375rem) / 2);
}

/* The input hidden under its track in every state: core's checkbox rules (forms.css: 16 px, a 16 px min-width, and
   `opacity: .7` on `input[type="checkbox"]:disabled`, 0,2,1) drew it, and its check, over a disabled switch (the
   owner, 26 Oct 2026). */
.rooster-admin-switch .rooster-admin-switch__input[type="checkbox"] {
	@apply absolute m-0 size-px min-w-0 appearance-none overflow-hidden border-0 p-0 opacity-0;
}

/* Off, its light track has a ring at 3:1 (0.65.9, Rooster One's request 42: it nearly vanished on the card); on, the
   section's ink. An inset shadow: the track's box and its thumb's place stay. */
.rooster-admin-switch__track {
	@apply relative inline-block h-5.5 w-9.5 flex-none rounded-full bg-input transition-colors duration-(--ra-dur);
	box-shadow: inset 0 0 0 1px var(--ra-control-border);
}

.rooster-admin-switch__thumb {
	@apply absolute top-0.5 start-0.5 size-4.5 rounded-full bg-background shadow-sm transition-transform duration-(--ra-dur);
}

.rooster-admin-switch__input:checked + .rooster-admin-switch__track {
	background: var(--ra-accent);
	box-shadow: none;
}

.rooster-admin-switch__input:checked + .rooster-admin-switch__track .rooster-admin-switch__thumb {
	transform: translateX(1rem);
}

.rooster-admin-switch__input:focus-visible + .rooster-admin-switch__track {
	@apply ra-ring;
}

.rooster-admin-switch__input:disabled + .rooster-admin-switch__track {
	@apply opacity-50;
}

/* The bare switch (0.63.1, Ui::toggle()'s `bare`): one input drawn as the switch, its track the input and its thumb
   its ::before, for a cell that repeats it hundreds of times (an editable grid). Over core's checkbox rules (forms.css:
   the size, the border, the tick in ::before: 0,2,2 at most, these 0,3,1). Without the stylesheet it is a checkbox named
   as a switch. */
.rooster-admin-switch.is-bare {
	@apply relative m-0 inline-block h-5.5 w-9.5 min-w-0 flex-none cursor-pointer appearance-none rounded-full border-0 bg-input p-0 align-middle transition-colors duration-(--ra-dur);
	box-shadow: inset 0 0 0 1px var(--ra-control-border); /* 0.65.9: off, a ring at 3:1 */

	&::before {
		@apply absolute top-0.5 start-0.5 m-0 size-4.5 rounded-full bg-background shadow-sm transition-transform duration-(--ra-dur);
		content: "";
	}

	&:checked {
		background: var(--ra-accent);
		box-shadow: none;
	}

	&:checked::before {
		@apply size-4.5 m-0;
		content: "";
		transform: translateX(1rem);
	}

	&:focus-visible {
		@apply ra-ring;
	}

	&:disabled {
		@apply cursor-not-allowed opacity-50;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rooster-admin-switch__track,
	.rooster-admin-switch__thumb,
	.rooster-admin-switch.is-bare,
	.rooster-admin-switch.is-bare::before {
		@apply transition-none;
	}
}