/* /retailcomply/products — Direction A.
   Values quoted from the approved artboard
   (pm/02_epics/.../mockups/01_products_page_with_search_filters_and_csv_export).
   Derived tokens are expressed against the DaisyUI light theme rather than
   hard-coded hexes. Every rule is scoped under .rc-products because
   stylesheet_link_tag :app links this file on every page. */
.rc-products {
	--rc-muted: color-mix(in oklab, var(--color-base-content) 55%, transparent);
	--rc-hdr: color-mix(in oklab, var(--color-base-content) 60%, transparent);
	--rc-rule: color-mix(in oklab, var(--color-base-content) 8%, transparent);
	--rc-trule: color-mix(in oklab, var(--color-base-content) 5%, transparent);
	--rc-sel-bg: color-mix(in oklab, var(--color-primary) 8%, var(--color-base-100));
	--rc-sel-bd: color-mix(in oklab, var(--color-primary) 30%, var(--color-base-100));
}

.rc-products .rc-tablewrap {
	margin-top: 1.25rem;
}

.rc-products .rc-ptable {
	font-size: 0.8125rem;
	table-layout: fixed;
	width: 100%;
}

.rc-products .rc-ptable th,
.rc-products .rc-ptable td {
	padding-block: 0.7rem;
	padding-inline: 0.55rem;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: top;
}

.rc-products .rc-ptable th:first-child,
.rc-products .rc-ptable td:first-child,
.rc-products .rc-ptable th:last-child,
.rc-products .rc-ptable td:last-child {
	padding-inline: 0.15rem;
}

.rc-products .rc-ptable thead th {
	white-space: normal;
	line-height: 1.05rem;
	color: var(--rc-hdr);
	font-size: 0.8125rem;
	font-weight: 600;
	text-align: left;
}

.rc-products .rc-ptable thead tr {
	border-bottom: 1px solid var(--rc-rule);
}

.rc-products .rc-ptable tbody tr {
	border-bottom: 1px solid var(--rc-trule);
}

.rc-products .rc-col-name { width: 31%; }
.rc-products .rc-col-brand { width: 11%; }
.rc-products .rc-col-vendor { width: 18%; }
.rc-products .rc-col-ids { width: 16%; }
.rc-products .rc-col-animal { width: 8%; }
.rc-products .rc-col-status { width: 9%; }
.rc-products .rc-col-action { width: 7%; }

/* The product name is the one cell that must never truncate. */
.rc-products .rc-ptable td.rc-col-name {
	overflow: visible;
	text-overflow: clip;
	white-space: normal;
}

.rc-products .rc-pname {
	font-weight: 600;
	white-space: normal;
	overflow-wrap: anywhere;
}

.rc-products .rc-trunc {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rc-products .rc-alsobadge {
	display: inline-flex;
	align-items: center;
	height: 1.15rem;
	padding-inline: 0.4rem;
	margin-left: 0.4rem;
	border: 1px solid var(--color-base-300);
	border-radius: 999px;
	background-color: var(--color-base-200);
	font-size: 0.625rem;
	font-weight: 700;
	color: var(--rc-muted);
}

.rc-products .rc-vend {
	display: flex;
	flex-direction: column;
	gap: 0.05rem;
}

.rc-products .rc-vsub {
	font-size: 0.6875rem;
	line-height: 0.95rem;
	color: var(--rc-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rc-products .rc-ids {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.rc-products .rc-idrow {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	font-size: 0.6875rem;
	line-height: 1rem;
}

.rc-products .rc-idk {
	min-width: 2.4rem;
	color: var(--rc-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
}

.rc-products .rc-idv {
	font-variant-numeric: tabular-nums;
	color: var(--color-base-content);
}

.rc-products .rc-status {
	border-radius: 999px;
}

.rc-products .rc-view {
	white-space: nowrap;
}

/* phosphor_icon emits width/height attributes; CSS overrides them, so the
   artboard's glyph sizes need no Tailwind arbitrary-value classes. */
.rc-products .rc-view .phosphor-icon {
	width: 14px;
	height: 14px;
}

.rc-products .rc-pbtn .phosphor-icon {
	width: 13px;
	height: 13px;
}

.rc-products .rc-empty {
	padding: 3.5rem 1rem;
	text-align: center;
}

.rc-products .rc-empty h3 {
	font-size: 1.0625rem;
	font-weight: 700;
}

.rc-products .rc-empty p {
	font-size: 0.875rem;
	color: var(--rc-muted);
}

.rc-products .rc-tfoot {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 1.1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--rc-rule);
}

.rc-products .rc-range {
	font-size: 0.8125rem;
	color: var(--rc-muted);
	font-variant-numeric: tabular-nums;
}

.rc-products .rc-export {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-primary);
}

.rc-products .rc-export-count {
	font-weight: 400;
	color: var(--rc-muted);
	font-variant-numeric: tabular-nums;
}

.rc-products .rc-pager {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin-left: auto;
}

.rc-products .rc-pbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	padding-inline: 0.5rem;
	border: 1px solid var(--color-base-300);
	border-radius: var(--radius-field, 0.25rem);
	font-size: 0.8125rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.rc-products .rc-pbtn-on {
	background-color: var(--rc-sel-bg);
	border-color: var(--rc-sel-bd);
	color: var(--color-primary);
}

.rc-products .rc-pbtn-disabled {
	opacity: 0.4;
}

.rc-products .rc-pgap {
	color: var(--rc-muted);
	padding-inline: 0.25rem;
}

.rc-products .rc-filterbar {
	padding: 0.75rem;
	border: 1px solid var(--color-base-300);
	border-radius: 0.75rem;
	background-color: var(--color-base-100);
}

.rc-products .rc-searchrow {
	display: flex;
	gap: 0.75rem;
}

/* Deliberately taller and rounder than DaisyUI's .input (2.5rem / 0.25rem): the
   approved toolbar treats the field as the page's primary control. */
.rc-products .rc-search {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex: 1;
	min-width: 0;
	height: 3rem;
	padding-inline: 0.9rem;
	border: 1px solid var(--color-base-300);
	border-radius: 0.625rem;
}

.rc-products .rc-searchicon {
	flex-shrink: 0;
	width: 17px;
	height: 17px;
	color: var(--rc-muted);
}

.rc-products .rc-qin {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	font-size: 0.9375rem;
	outline: none;
}

.rc-products .rc-count {
	margin-left: auto;
	flex-shrink: 0;
	font-size: 0.8125rem;
	color: var(--rc-muted);
	font-variant-numeric: tabular-nums;
}

.rc-products .rc-fdrop > summary {
	list-style: none;
}

.rc-products .rc-fdrop > summary::-webkit-details-marker {
	display: none;
}

.rc-products .rc-fbtn {
	height: 3rem;
	padding-inline: 1.1rem;
	gap: 0.55rem;
	border-color: var(--color-base-content);
	font-size: 0.9375rem;
	font-weight: 600;
}

.rc-products .rc-funnel {
	width: 17px;
	height: 17px;
}

/* .on is "the panel is open", not "filters are applied" — that is the bubble. */
.rc-products .rc-fdrop[open] .rc-fbtn {
	background-color: var(--rc-sel-bg);
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.rc-products .rc-n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.4rem;
	height: 1.4rem;
	border: 1px solid var(--color-base-300);
	border-radius: 999px;
	background-color: var(--color-base-200);
	font-size: 0.75rem;
	font-weight: 700;
}

.rc-products .rc-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 0.15rem 0;
}

.rc-products .rc-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	height: 2rem;
	padding-inline: 0.85rem;
	border: 1px solid var(--color-base-300);
	border-radius: 999px;
	background-color: var(--color-base-200);
	font-size: 0.8125rem;
	color: var(--rc-muted);
}

.rc-products .rc-chip-value {
	color: var(--color-base-content);
	font-weight: 700;
}

.rc-products .rc-chip-x {
	width: 12px;
	height: 12px;
}

.rc-products .rc-clearall {
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: underline;
	color: var(--color-primary);
}

/* Absolute is the no-JS fallback; the Stimulus controller switches this to
   position: fixed and computes top/right/max-height, because main and .main-main
   both set overflow: clip (work-structure.css) and crop any in-flow dropdown
   that reaches past the content card. Two class selectors so this beats
   DaisyUI's .dropdown-content without !important. */
.rc-products .rc-panel {
	position: absolute;
	right: 0;
	top: 0.6rem;
	width: 46rem;
	max-width: calc(100vw - 4rem);
	max-height: calc(100vh - 12rem);
	overflow-y: auto;
	padding: 1.35rem 1.5rem 1.5rem;
	border: 1px solid var(--color-base-300);
	border-radius: 0.75rem;
	background-color: var(--color-base-100);
	box-shadow: 0 24px 48px -14px rgb(0 0 0 / 0.22);
	z-index: 95;
}

.rc-products .rc-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	color: var(--rc-muted);
}

.rc-products .rc-close .phosphor-icon,
.rc-products .rc-action-icon {
	width: 15px;
	height: 15px;
}

.rc-products .rc-fgroup {
	margin-bottom: 1.15rem;
}

.rc-products .rc-flabel {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin-bottom: 0.55rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rc-muted);
}

.rc-products .rc-cnt {
	text-transform: none;
	letter-spacing: normal;
	font-weight: 600;
}

.rc-products .rc-opts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.rc-products .rc-opt {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	height: 2.25rem;
	padding-inline: 1rem;
	border: 1px solid var(--color-base-300);
	border-radius: 999px;
	background-color: var(--color-base-100);
	font-size: 0.875rem;
	cursor: pointer;
}

.rc-products .rc-opt:hover {
	border-color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
}

.rc-products .rc-opt input[type="checkbox"] {
	position: absolute;
	width: 0;
	height: 0;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

/* The checkbox is visually hidden, so the label has to carry the focus ring or
   the pills become unreachable by keyboard. */
.rc-products .rc-opt:has(input:focus-visible) {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.rc-products .rc-opt:has(input:checked) {
	background-color: var(--rc-sel-bg);
	border-color: var(--rc-sel-bd);
	color: var(--color-primary);
	font-weight: 600;
}

.rc-products .rc-qty {
	font-size: 0.75rem;
	color: var(--rc-muted);
	font-variant-numeric: tabular-nums;
}

.rc-products .rc-opt:has(input:checked) .rc-qty {
	color: color-mix(in oklab, var(--color-primary) 75%, transparent);
}

/* The native multi-select a request without JavaScript gets. */
.rc-products .rc-ts {
	width: 100%;
	min-height: 2.5rem;
	padding: 0.3rem 0.5rem;
	border: 1px solid var(--color-base-300);
	border-radius: var(--radius-field, 0.25rem);
	font-size: 0.875rem;
}

.rc-products .rc-pactions {
	display: flex;
	gap: 0.6rem;
	margin-top: 1.35rem;
	padding-top: 1.15rem;
	border-top: 1px solid var(--rc-rule);
}

.rc-products .ts-control {
	min-height: 2.5rem;
	gap: 0.4rem;
	padding: 0.3rem 0.5rem;
	border: 1px solid var(--color-base-300);
	border-radius: var(--radius-field, 0.25rem);
}

.rc-products .ts-wrapper.focus .ts-control {
	border-color: var(--rc-sel-bd);
	box-shadow: none;
}

.rc-products .ts-control > .item {
	display: inline-flex;
	align-items: center;
	height: 1.75rem;
	padding-inline: 0.6rem;
	border: 1px solid var(--rc-sel-bd);
	border-radius: var(--radius-field, 0.25rem);
	background-color: var(--rc-sel-bg);
	color: var(--color-primary);
	font-size: 0.8125rem;
	font-weight: 600;
}

.rc-products .ts-dropdown {
	margin-top: 0.35rem;
	border: 1px solid var(--color-base-300);
	border-radius: var(--radius-field, 0.25rem);
	box-shadow: 0 8px 20px -8px rgb(0 0 0 / 0.18);
}

.rc-products .ts-dropdown .option {
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
}

.rc-products .ts-dropdown .active {
	background-color: var(--color-base-200);
}

.rc-products .rc-tsopt {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.rc-products .rc-tsqty {
	flex-shrink: 0;
	font-size: 0.75rem;
	color: var(--rc-muted);
	font-variant-numeric: tabular-nums;
}