/**
 * Dealer Inventory Manager — frontend styles.
 *
 * Mobile-first, structural only. Typography and colors inherit from the
 * active theme; borders/tints derive from currentColor (plain rgba
 * fallbacks precede color-mix for older browsers). The one deliberate
 * exception: status badge colors, which match the admin palette so
 * statuses read identically everywhere. No hardcoded brand colors.
 */

/* Layout ----------------------------------------------------------------- */

.dim-archive { display: block; margin: 0 0 2rem; }
.dim-archive__filters { margin: 0 0 1.5rem; }
.dim-archive__results { min-width: 0; }

@media ( min-width: 900px ) {
	.dim-archive {
		display: grid;
		grid-template-columns: 270px minmax( 0, 1fr );
		gap: 2rem;
		align-items: start;
	}

	.dim-archive__filters { margin: 0; }
}

/* Shared hairline borders + hover tint (currentColor-derived) ------------ */

.dim-filters,
.dim-field__input,
.dim-sort__select,
.dim-card,
.dim-chip,
.dim-pagination .page-numbers a,
.dim-pagination .page-numbers span {
	border: 1px solid rgba( 128, 128, 128, 0.45 );
	border-color: color-mix( in srgb, currentColor 35%, transparent );
}

.dim-btn:hover,
.dim-pagination .page-numbers a:hover {
	background: rgba( 128, 128, 128, 0.12 );
	background: color-mix( in srgb, currentColor 10%, transparent );
}

/* Filters ---------------------------------------------------------------- */

.dim-filters { border-radius: 6px; }

.dim-filters__summary {
	cursor: pointer;
	font-weight: 600;
	padding: 0.75rem 1rem;
}

.dim-filters__form {
	display: grid;
	gap: 1rem;
	padding: 0.25rem 1rem 1rem;
}

.dim-field { margin: 0; padding: 0; border: 0; min-width: 0; }

.dim-field__label {
	display: block;
	font-size: 0.85em;
	font-weight: 600;
	margin: 0 0 0.3em;
	padding: 0;
}

.dim-field__sublabel { display: block; font-size: 0.8em; margin: 0 0 0.2em; }

.dim-field__input {
	display: block;
	width: 100%;
	padding: 0.45em 0.6em;
	font: inherit;
	color: inherit;
	background: transparent;
	border-radius: 4px;
	box-sizing: border-box;
}

/* DOM order label/input/label/input flows into two columns. */
.dim-field__pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto;
	grid-auto-flow: column;
	column-gap: 0.75rem;
}

.dim-field__choice {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0 0 0.35em;
	font-size: 0.95em;
	cursor: pointer;
}

.dim-field__choice input { margin: 0; flex: none; }

.dim-filters__actions { display: flex; align-items: center; gap: 1rem; }
.dim-filters__clear { color: inherit; text-decoration: underline; }

/* Results head + sort ---------------------------------------------------- */

.dim-results-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	margin: 0 0 1.25rem;
}

.dim-results-head__count { margin: 0; font-size: 0.95em; }

.dim-sort { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.dim-sort__label { font-size: 0.9em; font-weight: 600; }

.dim-sort__select {
	font: inherit;
	color: inherit;
	background: transparent;
	padding: 0.35em 0.5em;
	border-radius: 4px;
	max-width: 16em;
}

/* Card grid -------------------------------------------------------------- */

.dim-card-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) );
	gap: 1.25rem;
}

.dim-card-grid__item { margin: 0; display: flex; }

/* Card children are direct flex items (no body wrapper): media flush,
   everything else inset 1rem, View Details pushed to the bottom. */
.dim-card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: 100%;
	border-radius: 6px;
	overflow: hidden;
	padding-bottom: 1rem;
}

.dim-card > :not( .dim-card__media ) { margin: 0 1rem; }
.dim-card > .dim-badge { align-self: flex-start; }
.dim-card__media { display: block; }

.dim-card img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	height: auto;
}

.dim-card__title { font-size: 1.05em; line-height: 1.35; }
.dim-card__title a { color: inherit; text-decoration: none; }
.dim-card__title a:hover { text-decoration: underline; }
.dim-card__price { font-weight: 700; }

.dim-card__meta {
	list-style: none;
	padding: 0;
	font-size: 0.88em;
	opacity: 0.85;
}

.dim-card__features {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	padding: 0;
	list-style: none;
}

.dim-chip {
	display: inline-block;
	font-size: 0.75em;
	padding: 0.15em 0.6em;
	border-radius: 999px;
	white-space: nowrap;
}

.dim-card > .dim-card__details { margin-top: auto; align-self: flex-start; }

/* Status badges — fixed palette, admin parity; text always carried ------- */

.dim-badge {
	display: inline-block;
	padding: 0.15em 0.7em;
	border-radius: 999px;
	font-size: 0.75em;
	font-weight: 600;
	line-height: 1.7;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.dim-badge--available { color: #007017; background: #edfaef; }
.dim-badge--sale_pending { color: #996800; background: #fcf9e8; }
.dim-badge--coming_soon { color: #135e96; background: #f0f6fc; }
.dim-badge--sold { color: #b32d2e; background: #fcf0f1; }
.dim-badge--temporarily_unavailable { color: #50575e; background: #f0f0f1; }

/* Spec table ------------------------------------------------------------- */

.dim-specifications,
.dim-specs-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.dim-specs-group { margin: 1.25em 0 0.4em; }

.dim-specs { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; }
.dim-specs caption { text-align: left; font-weight: 700; padding: 0 0 0.5em; }

.dim-specs th,
.dim-specs td {
	text-align: left;
	padding: 0.5em 0.75em;
	border-bottom: 1px solid rgba( 128, 128, 128, 0.25 );
	border-bottom-color: color-mix( in srgb, currentColor 15%, transparent );
	vertical-align: top;
}

.dim-specs th { font-weight: 600; white-space: nowrap; }

.dim-specs tbody tr:nth-child( odd ) {
	background: rgba( 128, 128, 128, 0.07 );
	background: color-mix( in srgb, currentColor 5%, transparent );
}

/* CTAs ------------------------------------------------------------------- */

.dim-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.75rem 0; }

.dim-btn {
	display: inline-block;
	padding: 0.5em 1.1em;
	font: inherit;
	font-weight: 600;
	color: inherit;
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 4px;
	text-decoration: none;
	cursor: pointer;
	line-height: 1.4;
}

.dim-btn:hover { color: inherit; text-decoration: none; }
.dim-btn--primary { border-width: 2px; }

/* Notices ---------------------------------------------------------------- */

.dim-no-stock,
.dim-no-results {
	padding: 1rem 1.25rem;
	border: 1px dashed rgba( 128, 128, 128, 0.5 );
	border-color: color-mix( in srgb, currentColor 40%, transparent );
	border-radius: 6px;
	margin: 0 0 1.5rem;
}

/* Pagination ------------------------------------------------------------- */

.dim-pagination { margin: 1.75rem 0 0; }

.dim-pagination ul.page-numbers {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
}

.dim-pagination ul.page-numbers li { margin: 0; }

.dim-pagination .page-numbers a,
.dim-pagination .page-numbers span {
	display: inline-block;
	padding: 0.35em 0.8em;
	border-radius: 4px;
	color: inherit;
	text-decoration: none;
	line-height: 1.5;
}

.dim-pagination .page-numbers span.current {
	font-weight: 700;
	border: 2px solid currentColor;
}

.dim-pagination .page-numbers span.dots { border: 0; }

/* Focus + screen-reader utilities ---------------------------------------- */

.dim-archive :is( a, button, input, select, summary ):focus-visible,
.dim-archive__results :is( a, button, input, select, summary ):focus-visible,
.dim-filters :is( a, button, input, select, summary ):focus-visible,
.dim-actions :is( a, button ):focus-visible,
.dim-card :is( a, button ):focus-visible,
.dim-card-grid :is( a, button ):focus-visible,
.dim-model-page :is( a, button, input, select ):focus-visible,
.dim-single-unit :is( a, button, input, select ):focus-visible,
.dim-unit-details :is( a, button ):focus-visible,
.dim-similar-units :is( a, button ):focus-visible,
.dim-available-units :is( a, button ):focus-visible,
.dim-pagination :is( a, button ):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Safety net for themes that don't define .screen-reader-text. */
.dim-screen-reader-text,
.dim-card .screen-reader-text,
.dim-badge .screen-reader-text,
.dim-btn .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* ---- Monthly payment calculator ------------------------------------- */
.dim-paycalc {
	margin: 1em 0;
	padding: 0.9em 1em;
	border: 1px solid;
	border-color: color-mix( in srgb, currentColor 18%, transparent );
	border-radius: 8px;
	background: color-mix( in srgb, currentColor 4%, transparent );
}
.dim-paycalc__headline {
	margin: 0;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.35em;
}
.dim-paycalc__label {
	font-size: 0.85em;
	opacity: 0.8;
}
.dim-paycalc__amount {
	font-size: 1.5em;
	font-weight: 700;
}
.dim-paycalc__per {
	font-size: 0.9em;
	opacity: 0.8;
}
.dim-paycalc__details {
	margin-top: 0.6em;
}
.dim-paycalc__details > summary {
	cursor: pointer;
	font-size: 0.9em;
}
.dim-paycalc__fields {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	margin-top: 0.6em;
}
.dim-paycalc__fields label {
	display: flex;
	flex-direction: column;
	font-size: 0.8em;
	gap: 0.2em;
}
.dim-paycalc__fields input {
	width: 8em;
	max-width: 100%;
}
.dim-paycalc__disclaimer {
	margin: 0.7em 0 0;
	font-size: 0.75em;
	line-height: 1.4;
	opacity: 0.75;
}

/* Hide the CTA wrapper when the theme owns the contact CTAs and nothing else renders. */
.dim-actions:empty { display: none; }