/**
 * YMM Hero — admin UI.
 *
 * Everything for the plugin's own screens is scoped under `.ymm-app`. That scope
 * is not cosmetic: this stylesheet is also loaded on the product edit screen for
 * the Compatible Vehicles meta box (see YMMHERO_Meta_Box::enqueue_assets), and an
 * unscoped rule here would repaint controls WordPress owns on that screen.
 *
 * These screens do not copy WordPress admin's visual language — see
 * docs/adr/0001-break-from-wordpress-admin-styling.md. The palette is a grey mono
 * scale with a single accent, and core-emitted markup is replaced rather than
 * decorated. Where a core class is unavoidable it is overridden into this system,
 * not the other way round.
 *
 * The accent is used for exactly three things: the primary action button, the
 * active sidebar item, and focus rings. Everything else is grey. Adding a fourth
 * use is what makes the accent stop meaning "this matters".
 */

/* The meta box sits outside the shell, on a screen WooCommerce owns, so it carries
   the tokens itself rather than inheriting them from `.ymm-app`. */
.ymm-app,
.ymm-meta-box-vehicles {
	/* Surfaces */
	--ymm-page: #f7f7f8;
	--ymm-surface: #fff;
	--ymm-surface-2: #fafafa;
	--ymm-surface-3: #f4f4f5;

	/* Lines */
	--ymm-line: #e4e4e7;
	--ymm-line-soft: #f0f0f1;

	/* Ink */
	--ymm-ink: #18181b;
	--ymm-ink-2: #52525b;
	--ymm-ink-3: #8e8e97;

	/* Accent */
	--ymm-accent: #2b36d6;
	--ymm-accent-strong: #232cab;
	--ymm-accent-soft: #eef0fe;

	/* Status. Success and warning are greys on purpose: a green "assigned" pill is
	   decoration, not information, and the row already says what it is. Danger keeps
	   its colour because losing data is the one thing worth shouting about. */
	--ymm-danger: #b42318;
	--ymm-danger-soft: #fdf1f0;
	--ymm-ok: #18181b;
	--ymm-ok-soft: #f0f0f1;
	--ymm-warn: #52525b;
	--ymm-warn-soft: #f4f4f5;

	--ymm-radius: 10px;
	--ymm-radius-sm: 6px;

	--ymm-shadow: 0 1px 2px rgba(24, 24, 27, 0.04);
	--ymm-shadow-raised: 0 1px 2px rgba(24, 24, 27, 0.06), 0 1px 3px rgba(24, 24, 27, 0.04);
}

/* ==========================================================================
   Shell
   ========================================================================== */

/* Core paints `.wrap` with its own margins and sizes `.wrap h1`; the class is
   kept only so wp-admin/js/common.js can relocate notices to `.wp-header-end`.

   The negative inline-start margin cancels `#wpcontent`'s 20px padding so the top
   bar can run the full width of the screen. There is no max-width: a 1,000-row
   fitment table is exactly the case that wants the whole monitor. */
.ymm-app {
	margin: 0 0 0 -20px;
	max-width: none;
	min-height: calc(100vh - 32px);
	background: var(--ymm-page);
	color: var(--ymm-ink);
	font-size: 13px;
	line-height: 1.5;
}

@media screen and (max-width: 782px) {
	.ymm-app {
		margin-left: -10px;
	}
}

.ymm-app *,
.ymm-app *::before,
.ymm-app *::after {
	box-sizing: border-box;
}

.ymm-app__topbar {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 56px;
	padding: 0 24px;
	border-bottom: 1px solid var(--ymm-line);
	background: var(--ymm-surface);
}

/* The logo carries its own colour, so the accent plate the dashicon needed
   behind it is gone. */
.ymm-app__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex: 0 0 auto;
}

.ymm-app__mark img {
	max-width: 100%;
	max-height: 100%;
	display: block;
}

.ymm-app__name {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* Sits beside the name rather than pushed to the far edge, where it read as an
   orphaned line belonging to nothing. */
.ymm-app__tagline {
	color: var(--ymm-ink-3);
	font-size: 12px;
	padding-inline-start: 10px;
	border-inline-start: 1px solid var(--ymm-line);
}

.ymm-app__version {
	margin-inline-start: auto;
	color: var(--ymm-ink-3);
	font-size: 11px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.ymm-app__body {
	display: grid;
	grid-template-columns: 208px minmax(0, 1fr);
	gap: 28px;
	align-items: start;
	padding: 24px;
}

/* Screens that opt into the right rail; see partials/app-sidebar.php. */
.ymm-app__body--rail {
	grid-template-columns: 208px minmax(0, 1fr) 272px;
}

/* Nav */

.ymm-app__nav {
	position: sticky;
	top: 56px;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.ymm-app__nav-group {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* The one place uppercase survives. It reads as a group heading here, where it
   labels a set; on table headers and card titles it only looked dated. */
.ymm-app .ymm-app__nav-heading {
	margin: 0 0 6px;
	padding: 0 10px;
	color: var(--ymm-ink-3);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.ymm-app__nav-item {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 10px;
	border: 1px solid transparent;
	border-radius: var(--ymm-radius-sm);
	color: var(--ymm-ink-2);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.ymm-app__nav-item:hover,
.ymm-app__nav-item:focus {
	background: var(--ymm-surface-3);
	color: var(--ymm-ink);
}

.ymm-app__nav-item .dashicons {
	width: 17px;
	height: 17px;
	font-size: 17px;
	color: var(--ymm-ink-3);
	flex: 0 0 auto;
}

/* Raised white card against the page's grey, rather than a colour wash. */
.ymm-app__nav-item.is-current,
.ymm-app__nav-item.is-current:hover {
	border-color: var(--ymm-line);
	background: var(--ymm-surface);
	box-shadow: var(--ymm-shadow-raised);
	color: var(--ymm-ink);
	font-weight: 600;
}

.ymm-app__nav-item.is-current .dashicons {
	color: var(--ymm-accent);
}

/* Page head */

.ymm-back {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin-bottom: 10px;
	color: var(--ymm-ink-2);
	font-size: 12px;
	font-weight: 500;
	text-decoration: none;
}

.ymm-back:hover,
.ymm-back:focus {
	color: var(--ymm-accent-strong);
}

.ymm-back .dashicons {
	width: 15px;
	height: 15px;
	font-size: 15px;
}

.ymm-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
}

.ymm-app .ymm-head__title {
	margin: 0;
	padding: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--ymm-ink);
}

.ymm-head__sub {
	margin: 5px 0 0;
	color: var(--ymm-ink-2);
	font-size: 13px;
	max-width: 68ch;
}

.ymm-head__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* `.wp-header-end` is a positioning marker for core's notice relocation, not a
   rule the reader should see. */
.ymm-app .wp-header-end {
	display: none;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.ymm-app .ymm-btn,
.ymm-app .button,
.ymm-app .button-secondary,
.ymm-app .page-title-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 34px;
	min-height: 34px;
	padding: 0 13px;
	border: 1px solid var(--ymm-line);
	border-radius: var(--ymm-radius-sm);
	background: var(--ymm-surface);
	box-shadow: var(--ymm-shadow);
	color: var(--ymm-ink);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.ymm-app .ymm-btn:hover,
.ymm-app .button:hover,
.ymm-app .page-title-action:hover {
	background: var(--ymm-surface-2);
	border-color: #d3d7de;
	color: var(--ymm-ink);
}

.ymm-app .ymm-btn--primary,
.ymm-app .button-primary,
.ymm-app input[type="submit"].button-primary {
	border-color: var(--ymm-accent);
	background: var(--ymm-accent);
	color: #fff;
	font-weight: 600;
	text-shadow: none;
}

.ymm-app .ymm-btn--primary:hover,
.ymm-app .button-primary:hover,
.ymm-app .button-primary:focus {
	border-color: var(--ymm-accent-strong);
	background: var(--ymm-accent-strong);
	color: #fff;
}

.ymm-app .ymm-btn--danger {
	border-color: transparent;
	background: transparent;
	box-shadow: none;
	color: var(--ymm-danger);
}

.ymm-app .ymm-btn--danger:hover {
	background: var(--ymm-danger-soft);
	border-color: transparent;
	color: var(--ymm-danger);
}

.ymm-app .ymm-btn--ghost {
	border-color: transparent;
	background: transparent;
	box-shadow: none;
	color: var(--ymm-ink-2);
}

.ymm-app .ymm-btn--ghost:hover {
	background: var(--ymm-surface-3);
	border-color: transparent;
	color: var(--ymm-ink);
}

.ymm-app .ymm-btn--sm {
	height: 28px;
	min-height: 28px;
	padding: 0 9px;
	font-size: 12px;
}

.ymm-app .ymm-btn .dashicons,
.ymm-app .page-title-action .dashicons {
	width: 16px;
	height: 16px;
	font-size: 16px;
}

.ymm-app .ymm-btn[disabled],
.ymm-app .button[disabled],
.ymm-app .button:disabled,
.ymm-app .button-primary[disabled] {
	opacity: 0.5;
	box-shadow: none;
	cursor: not-allowed;
}

.ymm-app .ymm-btn:focus-visible,
.ymm-app .button:focus,
.ymm-app a:focus-visible,
.ymm-app select:focus,
.ymm-app input:focus,
.ymm-app textarea:focus {
	outline: 2px solid var(--ymm-accent);
	outline-offset: 1px;
	box-shadow: none;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.ymm-card {
	background: var(--ymm-surface);
	border: 1px solid var(--ymm-line);
	border-radius: var(--ymm-radius);
	box-shadow: var(--ymm-shadow);
	overflow: hidden;
}

.ymm-card + .ymm-card {
	margin-top: 20px;
}

/* A card that carries two labelled groups gets a second head between them. */
.ymm-card__head--split {
	border-top: 1px solid var(--ymm-line-soft);
}

.ymm-card__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--ymm-line-soft);
}

.ymm-app .ymm-card__title {
	margin: 0;
	padding: 0;
	font-size: 14px;
	font-weight: 650;
	color: var(--ymm-ink);
}

.ymm-card__note {
	margin: 4px 0 0;
	color: var(--ymm-ink-2);
	font-size: 12.5px;
	max-width: 72ch;
	flex-basis: 100%;
}

.ymm-card__body {
	padding: 20px;
}

.ymm-card__foot {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 20px;
	border-top: 1px solid var(--ymm-line-soft);
	background: var(--ymm-surface-2);
}

/* ==========================================================================
   Forms
   ========================================================================== */

.ymm-app input[type="text"],
.ymm-app input[type="search"],
.ymm-app input[type="number"],
.ymm-app input[type="email"],
.ymm-app input[type="url"],
.ymm-app select,
.ymm-app textarea {
	min-height: 34px;
	padding: 6px 10px;
	border: 1px solid var(--ymm-line);
	border-radius: var(--ymm-radius-sm);
	background-color: var(--ymm-surface);
	box-shadow: none;
	color: var(--ymm-ink);
	font-size: 13px;
	line-height: 1.4;
}

.ymm-app textarea {
	padding: 10px;
	line-height: 1.6;
}

.ymm-app select {
	padding-inline-end: 26px;
}

.ymm-app input[type="text"]:hover,
.ymm-app input[type="number"]:hover,
.ymm-app select:hover {
	border-color: #d3d7de;
}

.ymm-app input::placeholder {
	color: var(--ymm-ink-3);
}

.ymm-app input[type="checkbox"],
.ymm-app input[type="radio"] {
	border-color: #c6cbd4;
	border-radius: 4px;
}

.ymm-app input[type="radio"] {
	border-radius: 50%;
}

/* The checked tick is an SVG data URI in core's own stylesheet with the fill
   baked in, so the checked state is left to core rather than half-restyled. */
.ymm-app input[type="checkbox"]:checked,
.ymm-app input[type="radio"]:checked {
	border-color: var(--ymm-accent);
}

/* The Settings API and the vehicle form both emit `.form-table`; rather than
   rebuild those screens' markup — which would break the `ymmhero_vehicle_form_fields`
   contract add-ons print `<tr>` into — the table is restyled into wide rows: the
   label holds a fixed column on the left, the control and its help text take the
   rest. A row is the unit, so each one gets its own rule off the next. */
.ymm-app .form-table {
	margin: 0;
	border-collapse: collapse;
	width: 100%;
}

.ymm-app .form-table tr {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 24px;
	padding: 18px 0;
	border-bottom: 1px solid var(--ymm-line-soft);
}

.ymm-app .form-table tr:first-child {
	padding-top: 0;
}

.ymm-app .form-table tr:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.ymm-app .form-table th,
.ymm-app .form-table td {
	display: block;
	width: auto;
	padding: 0;
	font-weight: 400;
}

.ymm-app .form-table th {
	padding-top: 7px;
	color: var(--ymm-ink);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}

.ymm-app .form-table th label {
	font-weight: 600;
}

.ymm-app .form-table .regular-text,
.ymm-app .form-table input[type="text"],
.ymm-app .form-table input[type="number"],
.ymm-app .form-table select {
	width: 100%;
	max-width: 400px;
}

@media screen and (max-width: 960px) {
	.ymm-app .form-table tr {
		grid-template-columns: minmax(0, 1fr);
		gap: 6px;
	}

	.ymm-app .form-table th {
		padding-top: 0;
	}
}

.ymm-app .form-table td .description,
.ymm-app .description {
	margin: 6px 0 0;
	color: var(--ymm-ink-2);
	font-size: 12.5px;
	font-style: normal;
	max-width: 72ch;
}

.ymm-app .form-table td label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--ymm-ink);
}

.ymm-app .form-table input[type="file"] {
	font-size: 13px;
}

/* Settings sections arrive as `<h2>` between tables. */
.ymm-app .ymm-card__body > h2 {
	margin: 32px 0 16px;
	padding: 24px 0 0;
	border-top: 1px solid var(--ymm-line);
	font-size: 20px;
	font-weight: 600;
	color: var(--ymm-ink);
}

.ymm-app .ymm-card__body > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* Wide enough for the label column plus a 400px control and its help text, and
   capped so a sentence of help does not run the width of a large monitor. */
.ymm-settings-card {
	max-width: 1080px;
}

/* Only the section headings separate groups here; a rule under every checkbox
   row made three related options look like three sections. */
.ymm-settings-card--display .form-table tr {
	border-bottom: 0;
	padding: 12px 0;
}

/* General is five plain text fields with no help text — the rules between them
   only chopped the card up, so the rows just breathe instead. */
.ymm-settings-card--general .form-table tr {
	border-bottom: 0;
	padding: 10px 0;
}

.ymm-settings-card .ymm-card__body {
	padding: 24px 28px;
}

/* The vehicle fields on the assign screen are context, not inputs. Styled rather
   than `disabled` so the values stay selectable and readable to screen readers. */
.ymm-readonly-field[readonly] {
	background: var(--ymm-surface-2);
	border-color: var(--ymm-line);
	color: var(--ymm-ink-2);
	box-shadow: none;
	cursor: default;
}

.ymm-readonly-field[readonly]:focus {
	outline-color: var(--ymm-line);
}

/* Select2 ships WooCommerce's styling; these bring it in line with the controls
   above without overriding its internals. */
.ymm-app .select2-container .select2-selection--multiple,
.ymm-app .select2-container .select2-selection--single {
	min-height: 34px;
	border-color: var(--ymm-line);
	border-radius: var(--ymm-radius-sm);
}

.ymm-app .select2-container--focus .select2-selection--multiple {
	border-color: var(--ymm-accent);
	box-shadow: 0 0 0 1px var(--ymm-accent);
}

.ymm-app .select2-container .select2-selection__choice {
	border-radius: 6px;
	border-color: var(--ymm-line);
	background: var(--ymm-surface-2);
}

/* ==========================================================================
   Fitment chain — the Year › Make › Model filter
   ========================================================================== */

.ymm-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
}

.ymm-toolbar__end {
	margin-inline-start: auto;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Search at the head of the table it searches, the fitment chain opposite it,
   on their own row above the card. No fill and no rule — the controls carry
   their own edges. */
.ymm-cardbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.ymm-cardbar__end {
	margin-inline-start: auto;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Server-rendered container the chain is drawn into. */
#ymm-vehicles-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

/* Bulk action + Apply, at the head of the table they act on. */
.ymm-bulk {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ymm-app .ymm-bulk select {
	height: 34px;
	min-height: 34px;
}

/* One control, not three dropdowns: the selections narrow each other, which is
   the same chain the shopper walks on the storefront. Hairlines between the
   segments carry that, without the chevrons that used to sit between them.

   34px, matching the buttons and the search field. The old two-line segments —
   a micro-label stacked over the select — made this 52px, so it towered over
   everything it sat beside. The closed select reads "All years" already, which
   is the label the caps were repeating. */
.ymm-chain {
	display: inline-flex;
	align-items: stretch;
	height: 34px;
	border: 1px solid var(--ymm-line);
	border-radius: var(--ymm-radius-sm);
	background: var(--ymm-surface);
	box-shadow: var(--ymm-shadow);
	overflow: hidden;
}

.ymm-chain__seg {
	display: flex;
	align-items: center;
	padding: 0 12px;
	min-width: 118px;
}

.ymm-chain__seg + .ymm-chain__seg {
	border-inline-start: 1px solid var(--ymm-line-soft);
}

/* The end segments carry the chain's own corners, one border-width in, so a
   focused or set segment does not draw a square corner inside a rounded box. */
.ymm-chain__seg:first-child {
	border-start-start-radius: 5px;
	border-end-start-radius: 5px;
}

.ymm-chain__seg:last-child {
	border-start-end-radius: 5px;
	border-end-end-radius: 5px;
}

.ymm-chain__seg.is-set {
	background: var(--ymm-surface-3);
}

.ymm-app .ymm-chain select {
	width: 100%;
	min-height: 0;
	height: 22px;
	padding: 0 18px 0 0;
	border: 0;
	background-color: transparent;
	background-position: right 2px top 55%;
	color: var(--ymm-ink-2);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
}

.ymm-app .ymm-chain__seg.is-set select {
	color: var(--ymm-ink);
	font-weight: 600;
}

/* The select fills its segment, so core's offset outline drew a heavy blue box
   across the whole chain. The segment itself shows focus instead. */
.ymm-app .ymm-chain select:focus,
.ymm-app .ymm-chain select:focus-visible {
	outline: none;
	box-shadow: none;
}

.ymm-chain__seg:focus-within {
	background: var(--ymm-accent-soft);
	box-shadow: inset 0 0 0 1px var(--ymm-accent);
}

.ymm-search-field {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.ymm-search-field .dashicons {
	position: absolute;
	inset-inline-start: 9px;
	width: 16px;
	height: 16px;
	font-size: 16px;
	color: var(--ymm-ink-3);
	pointer-events: none;
}

.ymm-app .ymm-search-field input[type="search"] {
	width: 240px;
	height: 34px;
	min-height: 34px;
	padding-inline-start: 31px;
	box-shadow: var(--ymm-shadow);
}

/* ==========================================================================
   Segmented control — assignment status views
   ========================================================================== */

/* Now the first thing under the page title, so it carries the weight the
   removed description line used to: a 36px track with the active view filled in
   the accent rather than in white-on-grey. The count is part of the button, not
   a suffix — it is the number the reader came for. */
.ymm-segmented {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 3px;
	border: 1px solid var(--ymm-line);
	border-radius: var(--ymm-radius-sm);
	background: var(--ymm-surface-3);
	box-shadow: var(--ymm-shadow);
	gap: 2px;
}

.ymm-app .ymm-segmented__item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 28px;
	padding: 0 14px;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--ymm-ink-2);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 120ms ease, color 120ms ease;
}

.ymm-app .ymm-segmented__item:hover {
	background: rgba(22, 25, 29, 0.05);
	color: var(--ymm-ink);
}

.ymm-app .ymm-segmented__item:focus-visible {
	outline: 2px solid var(--ymm-accent);
	outline-offset: 1px;
}

.ymm-app .ymm-segmented__item.is-current {
	background: var(--ymm-accent);
	box-shadow: none;
	color: #fff;
	font-weight: 600;
}

.ymm-segmented__count {
	min-width: 18px;
	padding: 2px 6px;
	border-radius: 3px;
	background: rgba(22, 25, 29, 0.07);
	color: var(--ymm-ink-2);
	font-size: 11px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.ymm-segmented__item.is-current .ymm-segmented__count {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
}

/* ==========================================================================
   Stats
   ========================================================================== */

.ymm-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin-bottom: 16px;
}

.ymm-stat {
	padding: 13px 16px;
	border: 1px solid var(--ymm-line);
	border-radius: var(--ymm-radius);
	background: var(--ymm-surface);
	box-shadow: var(--ymm-shadow);
}

.ymm-stat__value {
	display: block;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

.ymm-stat__label {
	display: block;
	margin-top: 2px;
	color: var(--ymm-ink-2);
	font-size: 12.5px;
	font-weight: 500;
}

/* ==========================================================================
   Right rail
   ========================================================================== */

.ymm-app__rail {
	position: sticky;
	top: 56px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.ymm-rail-card {
	padding: 16px;
}

.ymm-app .ymm-rail-card__title {
	margin: 0 0 12px;
	padding: 0;
	color: var(--ymm-ink);
	font-size: 14px;
	font-weight: 600;
}

/* In the rail the stats stack, and the card already draws the border. */
.ymm-stats--rail {
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
	margin-bottom: 0;
}

.ymm-stats--rail .ymm-stat {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 12px;
	border-color: var(--ymm-line-soft);
	background: var(--ymm-surface-2);
	box-shadow: none;
}

.ymm-stats--rail .ymm-stat__value {
	font-size: 18px;
	order: 2;
}

.ymm-stats--rail .ymm-stat__label {
	margin-top: 0;
	order: 1;
}

/* The icon is decoration for a label that already names the number, so it stays
   quiet and inherits the label's colour. */
.ymm-app .ymm-stat__label {
	display: flex;
	align-items: center;
	gap: 7px;
}

.ymm-app .ymm-stat__label .dashicons {
	width: 16px;
	height: 16px;
	font-size: 16px;
	color: var(--ymm-ink-3);
}

/* Add-ons */

.ymm-addons__intro {
	margin: -6px 0 14px;
	color: var(--ymm-ink-2);
	font-size: 12px;
}

.ymm-addon + .ymm-addon {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--ymm-line-soft);
}

.ymm-addon__title {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 3px;
	padding: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--ymm-ink);
}

.ymm-addon__title .dashicons {
	width: 16px;
	height: 16px;
	font-size: 16px;
	color: var(--ymm-ink-3);
}

.ymm-addon__text {
	margin: 0 0 9px;
	color: var(--ymm-ink-2);
	font-size: 12px;
}

.ymm-addons__all {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 4px;
	margin-top: 14px;
	padding-top: 13px;
	border-top: 1px solid var(--ymm-line-soft);
	color: var(--ymm-ink);
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
}

.ymm-addons__all:hover {
	color: var(--ymm-ink);
	text-decoration: underline;
}

.ymm-addons__all .dashicons {
	width: 14px;
	height: 14px;
	font-size: 14px;
}

/* Support links */

.ymm-support {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ymm-support__link {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 -8px;
	padding: 7px 8px;
	border-radius: var(--ymm-radius-sm);
	color: var(--ymm-ink-2);
	font-size: 12.5px;
	text-decoration: none;
}

.ymm-support__link:hover,
.ymm-support__link:focus {
	background: var(--ymm-surface-3);
	color: var(--ymm-ink);
}

.ymm-support__link .dashicons {
	width: 16px;
	height: 16px;
	font-size: 16px;
	color: var(--ymm-ink-3);
	flex: 0 0 auto;
}

/* ==========================================================================
   Table
   ========================================================================== */

.ymm-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	margin: 0;
	background: var(--ymm-surface);
}

/* Header and cell carry the same horizontal padding so a label sits exactly over
   its column's text. They drifted apart before, which read as a misalignment. */
.ymm-table thead th {
	padding: 9px 12px;
	border-bottom: 1px solid var(--ymm-line);
	background: var(--ymm-surface-2);
	color: var(--ymm-ink-2);
	font-size: 12px;
	font-weight: 600;
	text-align: start;
	white-space: nowrap;
}

.ymm-table tbody td {
	padding: 8px 12px;
	border-bottom: 1px solid var(--ymm-line-soft);
	vertical-align: middle;
	color: var(--ymm-ink-2);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ymm-table tbody tr:last-child td {
	border-bottom: 0;
}

.ymm-table tbody tr:hover td {
	background: var(--ymm-surface-2);
}

.ymm-table thead th a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: inherit;
	text-decoration: none;
}

.ymm-table thead th a:hover {
	color: var(--ymm-ink);
}

.ymm-table th.is-sorted a {
	color: var(--ymm-ink);
}

.ymm-sort-arrow {
	font-size: 8px;
	line-height: 1;
	opacity: 0.3;
}

.ymm-sort-arrow.is-active {
	opacity: 1;
}

.ymm-table th.sortable:hover .ymm-sort-arrow,
.ymm-table th a:focus .ymm-sort-arrow {
	opacity: 0.7;
}

/* Columns */

.ymm-table .column-cb {
	width: 40px;
	padding-inline: 16px 0;
	white-space: normal;
}

/* `table-layout: fixed`, so every column needs a width or it soaks up whatever is
   left — which is what stranded Model half a screen from Sub-model. */
.ymm-table .column-year {
	width: 90px;
	padding-inline-start: 16px;
	color: var(--ymm-ink);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.ymm-table .column-make {
	width: 20%;
	color: var(--ymm-ink);
	font-weight: 600;
}

.ymm-table .column-model {
	width: 20%;
	color: var(--ymm-ink);
}

.ymm-table .column-submodel {
	width: 16%;
}

.ymm-table .column-products {
	width: 130px;
	white-space: normal;
}

.ymm-table .column-actions {
	width: 150px;
	white-space: normal;
	text-align: end;
	padding-inline-end: 16px;
}

.ymm-vehicles__table .column-actions {
	width: 176px;
}

.ymm-table thead .column-actions {
	text-align: end;
}

.ymm-rowactions {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	justify-content: flex-end;
}

/* Pill for the assignment count — "3 products" reads faster than a bare number,
   and an unassigned vehicle needs to look actionable rather than empty. */
.ymm-pill {
	display: inline-flex;
	align-items: center;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Assigned and unassigned are told apart by weight, not hue: solid ink against a
   light grey. A green "assigned" pill was decoration — the row already says it. */
.ymm-pill--on {
	background: var(--ymm-ink);
	color: #fff;
}

.ymm-pill--off {
	background: var(--ymm-surface-3);
	color: var(--ymm-ink-3);
}

/* Inline edit */

.ymm-table tr.ymm-inline-edit-row td {
	background: var(--ymm-surface-3);
	white-space: normal;
	padding-block: 10px;
}

.ymm-app .ymm-inline-edit-row input[type="text"],
.ymm-app .ymm-inline-edit-row input[type="number"] {
	width: 100%;
	min-height: 30px;
	padding: 4px 8px;
	background: var(--ymm-surface);
}

.ymm-inline-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: flex-end;
}

.ymm-inline-error {
	margin: 8px 0 0;
	color: var(--ymm-danger);
	font-size: 12px;
	white-space: normal;
}

/* Card footer with the counter and pager */

.ymm-tablefoot {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 16px;
	border-top: 1px solid var(--ymm-line);
	background: var(--ymm-surface-2);
	color: var(--ymm-ink-2);
	font-size: 12.5px;
}

.ymm-tablefoot__count {
	font-variant-numeric: tabular-nums;
}

.ymm-pager {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-inline-start: auto;
}

.ymm-app .ymm-pager__btn {
	width: 30px;
	min-width: 30px;
	padding: 0;
	height: 30px;
	min-height: 30px;
	font-size: 15px;
}

.ymm-pager__status {
	color: var(--ymm-ink-2);
	font-variant-numeric: tabular-nums;
	min-width: 74px;
	text-align: center;
}

/* Empty state */

.ymm-empty {
	padding: 52px 24px;
	text-align: center;
}

.ymm-empty .dashicons {
	width: 30px;
	height: 30px;
	font-size: 30px;
	color: var(--ymm-ink-3);
}

.ymm-empty__title {
	margin: 10px 0 4px;
	font-size: 14px;
	font-weight: 650;
	color: var(--ymm-ink);
}

.ymm-empty__text {
	margin: 0 auto 16px;
	max-width: 42ch;
	color: var(--ymm-ink-2);
}

.ymm-empty__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

/* ==========================================================================
   Setup checklist
   ========================================================================== */

.ymm-setup__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.ymm-setup__count {
	color: var(--ymm-ink-3);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.ymm-setup__track {
	height: 4px;
	margin-bottom: 14px;
	border-radius: 999px;
	background: var(--ymm-line-soft);
	overflow: hidden;
}

.ymm-setup__fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--ymm-accent);
	transition: width 0.2s ease;
}

.ymm-app .ymm-setup__steps {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.ymm-setup__step {
	display: flex;
	gap: 8px;
	margin: 0 0 10px;
}

.ymm-setup__step:last-child {
	margin-bottom: 0;
}

.ymm-setup__step .dashicons {
	flex: none;
	width: 17px;
	height: 17px;
	margin-top: 1px;
	font-size: 17px;
	color: var(--ymm-ink-3);
}

.ymm-setup__step.is-done .dashicons {
	color: var(--ymm-accent);
}

.ymm-setup__body {
	min-width: 0;
}

.ymm-setup__title {
	display: block;
	font-size: 13px;
	line-height: 1.4;
	color: var(--ymm-ink-2);
}

.ymm-setup__step.is-next .ymm-setup__title {
	font-weight: 600;
	color: var(--ymm-ink);
}

/* Done is said by the check, not by the label — striking the text through as
   well reads as "cancelled" rather than "finished". */
.ymm-setup__step.is-done .ymm-setup__title {
	color: var(--ymm-ink-3);
}

.ymm-app .ymm-setup__text {
	margin: 3px 0 9px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--ymm-ink-2);
}

.ymm-app .ymm-copy.is-copied {
	border-color: var(--ymm-accent);
	color: var(--ymm-accent);
}

/* The rail is narrow, so these wrap to a second line rather than shrink. */
.ymm-setup__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}

.ymm-setup__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--ymm-line-soft);
}

.ymm-setup__foot-link {
	color: var(--ymm-ink-3);
	font-size: 12px;
	text-decoration: none;
}

.ymm-setup__foot-link:hover {
	color: var(--ymm-ink-2);
}

/* ==========================================================================
   Notices
   ========================================================================== */

/* This plugin prints its own notices here, in the shell, rather than queueing
   them on `admin_notices` — a queued notice paints at the top of the page and
   only drops into place once core's common.js runs. */
.ymm-notices:empty {
	display: none;
}

.ymm-notices .notice {
	animation: ymm-notice-in 160ms ease-out;
}

@keyframes ymm-notice-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
}

.ymm-app .notice,
.ymm-app div.updated,
.ymm-app div.error {
	position: relative;
	margin: 0 0 18px;
	padding: 12px 14px;
	border: 1px solid var(--ymm-line);
	border-inline-start-width: 3px;
	border-radius: var(--ymm-radius-sm);
	background: var(--ymm-surface);
	box-shadow: var(--ymm-shadow);
}

.ymm-app .notice p {
	margin: 0.35em 0;
	font-size: 13px;
}

.ymm-app .notice p:first-child {
	margin-top: 0;
	margin-bottom: 0;
}

.ymm-app .notice p:last-child {
	margin-bottom: 0;
}

.ymm-app .notice-success {
	border-inline-start-color: var(--ymm-ok);
	background: var(--ymm-surface);
	/* border-color: #c9e6d8; */
	border-inline-start-color: var(--ymm-accent);
}

.ymm-app .notice-error {
	border-color: #f0cfcf;
	background: var(--ymm-danger-soft);
	border-inline-start-color: var(--ymm-danger);
}

.ymm-app .notice-warning {
	border-color: #eddfba;
	background: var(--ymm-warn-soft);
	border-inline-start-color: var(--ymm-warn);
}

.ymm-app .notice-info {
	border-color: var(--ymm-line);
	background: var(--ymm-surface-2);
	border-inline-start-color: var(--ymm-ink-3);
}

/* ==========================================================================
   Settings tabs
   ========================================================================== */

/* A track of pills rather than underlined links. Same shape as `.ymm-segmented`,
   because it is the same idea — pick one of a small set. */
.ymm-tabs {
	display: inline-flex;
	align-items: center;
	height: 36px;
	gap: 2px;
	padding: 3px;
	margin-bottom: 20px;
	border: 1px solid var(--ymm-line);
	border-radius: var(--ymm-radius-sm);
	background: var(--ymm-surface-3);
}

.ymm-tabs__item {
	display: inline-flex;
	align-items: center;
	padding: 0 14px;
	height: 100%;
	border-radius: 4px;
	color: var(--ymm-ink-2);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
}

.ymm-tabs__item:hover,
.ymm-tabs__item:focus {
	color: var(--ymm-ink);
}

.ymm-tabs__item.is-current {
	background: var(--ymm-surface);
	box-shadow: var(--ymm-shadow);
	color: var(--ymm-ink);
	font-weight: 600;
}

/* ==========================================================================
   Import
   ========================================================================== */

/* The two importers are peers, so they sit side by side and drop to one column
   when the shell is too narrow to keep both readable. Each form stretches so the
   two cards end level and their submit rows line up. */
.ymm-import-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: 20px;
	align-items: stretch;
}

.ymm-import-grid > form {
	display: flex;
}

.ymm-import-grid .ymm-card {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.ymm-import-grid .ymm-card + .ymm-card {
	margin-top: 0;
}

.ymm-import-grid .ymm-card__body {
	flex: 1 1 auto;
}

/* In a half-width column the note has no room beside the title. Each card is a
   whole task here, so its title carries the same weight as a section heading. */
.ymm-import-grid .ymm-card__head {
	display: block;
}

.ymm-app .ymm-import-grid .ymm-card__title {
	font-size: 20px;
	font-weight: 600;
}

.ymm-import-grid .ymm-card__note {
	margin: 6px 0 0;
}

/* Stacked, not a form-table row — the label column left the checkbox stranded
   against the far edge of the narrow card. */
.ymm-import-option {
	margin-top: 16px;
}

.ymm-app .ymm-import-option label {
	display: flex;
	align-items: end;
	gap: 8px;
	font-weight: 500;
}

.ymm-app .ymm-import-option .description {
	margin: 6px 0 0 26px;
}

.ymm-file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 16px;
	border: 1px dashed #c9ced7;
	border-radius: var(--ymm-radius-sm);
	background: var(--ymm-surface-2);
}

.ymm-file.is-filled {
	border-style: solid;
	border-color: var(--ymm-line);
	background: var(--ymm-surface-3);
}

.ymm-file input[type="file"] {
	flex: 1 1 260px;
	min-width: 0;
}

.ymm-samples {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin-top: 12px;
}

.ymm-app .ymm-samples a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--ymm-ink-2);
	font-size: 12.5px;
	font-weight: 500;
	text-decoration: none;
}

.ymm-app .ymm-samples a:hover {
	color: var(--ymm-accent-strong);
	text-decoration: none;
}

.ymm-app .ymm-samples .dashicons {
	width: 15px;
	height: 15px;
	font-size: 15px;
}

/* ==========================================================================
   Skeleton
   ========================================================================== */

.ymm-skeleton__row {
	display: flex;
	align-items: center;
	height: 45px;
	padding: 0 16px;
	border-bottom: 1px solid var(--ymm-line-soft);
}

.ymm-skeleton__row:last-child {
	border-bottom: 0;
}

.ymm-skeleton__row--head {
	height: 39px;
	background: var(--ymm-surface-2);
	border-bottom-color: var(--ymm-line);
}

.ymm-skeleton__row .ymm-skeleton__bar {
	width: 100%;
}

.ymm-skeleton__bar {
	display: inline-block;
	height: 10px;
	border-radius: 999px;
}

.ymm-skeleton__box {
	height: 34px;
	border-radius: var(--ymm-radius-sm);
}

.ymm-skeleton__box--chain {
	width: 420px;
}

.ymm-cardbar .ymm-skeleton__box--chain {
	margin-inline-start: auto;
}

.ymm-skeleton__bar,
.ymm-skeleton__box {
	background: var(--ymm-surface-3);
	background-image: linear-gradient(90deg, #eef1f5 0%, #f7f8fa 50%, #eef1f5 100%);
	background-size: 300px 100%;
	background-repeat: no-repeat;
	animation: ymm-skeleton-shimmer 1.2s linear infinite;
}

@keyframes ymm-skeleton-shimmer {
	from { background-position: -300px 0; }
	to   { background-position: 300px 0; }
}

@media (prefers-reduced-motion: reduce) {
	.ymm-app *,
	.ymm-skeleton__bar,
	.ymm-skeleton__box {
		animation: none !important;
		transition: none !important;
	}
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (max-width: 1400px) {
	.ymm-app__body--rail {
		grid-template-columns: 208px minmax(0, 1fr);
	}

	/* Below the three-column width the rail follows the content instead of
	   sitting beside it, and its cards share a row while there is room. */
	.ymm-app__rail {
		position: static;
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		align-items: start;
	}
}

@media screen and (max-width: 1100px) {
	.ymm-app__body,
	.ymm-app__body--rail {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	/* One scrolling strip of links. The group headings would each claim a line of
	   their own here, so they are dropped rather than stacked. */
	.ymm-app__nav {
		position: static;
		flex-direction: row;
		gap: 4px;
		overflow-x: auto;
		padding-bottom: 4px;
		border-bottom: 1px solid var(--ymm-line);
	}

	.ymm-app__nav-group {
		flex-direction: row;
		gap: 4px;
	}

	.ymm-app .ymm-app__nav-heading {
		display: none;
	}

	.ymm-app__nav-item {
		white-space: nowrap;
	}
}

@media screen and (max-width: 782px) {
	.ymm-app__body,
	.ymm-app__body--rail {
		padding: 16px 12px;
	}

	.ymm-app__tagline {
		display: none;
	}

	.ymm-toolbar__end {
		margin-inline-start: 0;
	}

	.ymm-cardbar__end {
		margin-inline-start: 0;
		width: 100%;
	}

	.ymm-chain {
		width: 100%;
	}

	.ymm-chain__seg {
		flex: 1 1 0;
		min-width: 0;
	}

	.ymm-app .ymm-search-field input[type="search"] {
		width: 100%;
	}

	.ymm-table .column-submodel {
		display: none;
	}
}

/* ==========================================================================
   Compatible Vehicles meta box — product edit screen, outside the shell
   ========================================================================== */

/* Every rule here is scoped inside `.ymm-meta-box-vehicles`. The product edit
   screen belongs to WooCommerce, and a rule that reaches past the box would
   repaint controls this plugin does not own. */

.ymm-meta-box-vehicles {
	color: var(--ymm-ink);
	font-size: 13px;
}

.ymm-meta-box-vehicles__empty {
	margin: 0;
	padding: 14px;
	border: 1px dashed var(--ymm-line);
	border-radius: var(--ymm-radius-sm);
	background: var(--ymm-surface-2);
	color: var(--ymm-ink-2);
	text-align: center;
}

.ymm-meta-box-vehicles__empty a {
	color: var(--ymm-ink);
	font-weight: 600;
}

.ymm-meta-box-vehicles .select2-container {
	width: 100% !important;
	margin-top: 8px;
}

.ymm-meta-box-vehicles .select2-container--default .select2-selection--multiple {
	border-color: var(--ymm-line);
	border-radius: var(--ymm-radius-sm);
}

.ymm-vehicle-bulk-actions {
	margin-bottom: 8px;
	display: flex;
	gap: 6px;
}

.ymm-make-select-all-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

/* The meta box lives in the narrow side column, so the button drops to its own
   line instead of being pushed outside the box. */
.ymm-make-select-all-buttons select {
	flex: 1 1 140px;
	min-width: 0;
	max-width: 100%;
	margin: 0;
}

.ymm-meta-box-vehicles select {
	height: 30px;
	min-height: 30px;
	border-color: var(--ymm-line);
	border-radius: var(--ymm-radius-sm);
	color: var(--ymm-ink);
	font-size: 13px;
}

/* Core's `.button` is the only button markup in here, so it is restyled in place
   rather than swapped for `.ymm-btn` — the JS toggles its `disabled` state and
   nothing about that needs to change. */
.ymm-meta-box-vehicles .button,
.ymm-meta-box-vehicles .button-small {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 30px;
	min-height: 30px;
	padding: 0 10px;
	border: 1px solid var(--ymm-line);
	border-radius: var(--ymm-radius-sm);
	background: var(--ymm-surface);
	box-shadow: var(--ymm-shadow);
	color: var(--ymm-ink);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1;
	flex: 0 0 auto;
}

.ymm-meta-box-vehicles .button:hover:not([disabled]) {
	background: var(--ymm-surface-2);
	border-color: #d4d4d8;
	color: var(--ymm-ink);
}

.ymm-meta-box-vehicles .button[disabled] {
	opacity: 0.5;
	box-shadow: none;
	cursor: not-allowed;
}

.ymm-meta-box-vehicles .button:focus,
.ymm-meta-box-vehicles select:focus {
	outline: 2px solid var(--ymm-accent);
	outline-offset: 1px;
	box-shadow: none;
}



.ymm-custom__text {
	margin: -6px 0 12px;
	color: var(--ymm-ink-2);
	font-size: 13px;
	line-height: 1.5;
}