/**
 * B2B RFQ Pro — repeatable manual-entry table (SPEC.md §3.2.3/§3.2.4).
 * Sane, theme-agnostic defaults so the table looks and works correctly
 * with no theme CSS and without Elementor present — every class below is
 * also the stable selector Phase 14's MRO/Special widgets target with
 * their own Elementor style controls ({{WRAPPER}} .b2b-rfq-manual-*),
 * following the same {{WRAPPER}}-scoped-selector pattern already used for
 * .b2b-rfq-cart-table etc. — nothing here is Elementor-specific.
 *
 * This is an *input* table: unlike .b2b-rfq-cart-table-wrap (which scrolls
 * horizontally on narrow screens), narrow viewports stack each row into a
 * labelled block instead — filling five fields per row while scrolling
 * sideways is unusable on a phone. Breakpoint matches this plugin's
 * existing 768px/480px pair (see frontend.css).
 */

/**
 * Phase 7: `container-type: inline-size` turns this wrapper into a query
 * container for the `@container` rule paired with the viewport `@media`
 * stacking block further down this file — see that rule's own comment
 * for why (the exact "table squeezed into a narrow Elementor column"
 * gap Phase 1 flagged and deferred). `contain: inline-size` is this
 * property's own documented side effect and is harmless here: `width:
 * 100%` below already gives this element an explicit inline size from
 * its parent, never from its own content.
 */
.b2b-rfq-manual-table-wrap {
	width: 100%;
	margin: 16px 0;
	box-sizing: border-box;
	container-type: inline-size;
}

.b2b-rfq-manual-table-hint {
	margin: 0 0 8px;
	font-size: 13px;
	color: #52525b;
}

.b2b-rfq-manual-table-general-error {
	margin: 0 0 10px;
	padding: 10px 14px;
	border-radius: 4px;
	color: #b00020;
	background-color: #fbeaec;
	border: 1px solid #b00020;
	font-size: 13px;
}

.b2b-rfq-manual-table-general-error[hidden] {
	display: none;
}

.b2b-rfq-manual-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/**
 * table-layout: fixed + explicit per-column percentage widths (below), the
 * same convention .b2b-rfq-cart-table uses — column proportions come from
 * these rules (or an Elementor per-column-width override), never from
 * cell content.
 */
.b2b-rfq-manual-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.b2b-rfq-manual-table thead th {
	text-align: left;
	padding: 10px 8px;
	background-color: #f4f4f5;
	color: #18181b;
	font-weight: 600;
	font-size: 13px;
	border-bottom: 2px solid #d4d4d8;
}

.b2b-rfq-manual-optional {
	font-weight: 400;
	color: #71717a;
}

.b2b-rfq-manual-row {
	border-bottom: 1px solid #e4e4e7;
}

.b2b-rfq-manual-row:nth-child( even ) {
	background-color: #fafafa;
}

.b2b-rfq-manual-cell {
	padding: 8px;
	vertical-align: top;
}

.b2b-rfq-manual-col-part-number {
	width: 16%;
}

.b2b-rfq-manual-col-noun {
	width: 22%;
}

.b2b-rfq-manual-col-option {
	width: 22%;
}

.b2b-rfq-manual-col-quantity {
	width: 12%;
}

.b2b-rfq-manual-col-note {
	width: 20%;
}

.b2b-rfq-manual-col-actions {
	width: 8%;
	text-align: center;
}

.b2b-rfq-manual-cell-label,
.b2b-rfq-manual-row-heading {
	display: none;
}

.b2b-rfq-manual-input,
.b2b-rfq-manual-select {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid #d0d0d0;
	border-radius: 4px;
	font: inherit;
	font-size: 13px;
	background-color: #fff;
	color: #18181b;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/**
 * Staging fix (phase-kit5-style-leak-sweep-2, follow-up to phase-minicart
 * -kit5-style-leak-fix/PR #124): reported there, not fixed — the bare
 * rule above, one class each, specificity (0,1,0), loses outright against
 * Elementor's global Kit-5 Form Fields style: `.elementor-kit-5 input:not(
 * [type="button"]):not([type="submit"])` is (0,3,1); `.elementor-kit-5
 * select` is (0,1,1) (class + type, no `:not()` needed, confirmed
 * separately — same "not identical, verified separately" discipline PR
 * #124's own eleven-field-form fix used) — the input case is the
 * strictest, so this fix targets that number uniformly for both. No live
 * staging instance to inspect this phase — derived by the same
 * specificity arithmetic against Kit-5's already-reported selectors.
 *
 * `ManualEntryTableRenderer::render_row()`'s markup (confirmed via
 * source, the only place that builds this table's rows) nests every
 * `.b2b-rfq-manual-input`/`.b2b-rfq-manual-select` inside a `<td
 * class="b2b-rfq-manual-cell ...">` inside `<tr class="b2b-rfq-manual
 * -row">` inside this file's own `.b2b-rfq-manual-table-wrap` (the
 * "specify other" text input included — it sits inside
 * `.b2b-rfq-manual-other-wrap`, itself inside the Option column's own
 * `.b2b-rfq-manual-cell`, so this descendant chain still reaches it). Four
 * real classes, specificity (0,4,0), strictly beats Kit-5's strictest
 * (0,3,1) via the class column alone. Matches the `{{WRAPPER}} .b2b-rfq
 * -manual-input, {{WRAPPER}} .b2b-rfq-manual-select` control's own real
 * `{{WRAPPER}}`-scoped (0,4,0) (ManualRfqWidgetControlsTrait, shared by
 * both MRO/Special) exactly — safely loses that tie via this file's
 * header comment's own {{WRAPPER}}-scoped-selector convention, so an
 * admin's own explicit value still wins. No `!important`. Full property
 * set re-declared, byte-identical to the bare rule above (not just the
 * contested properties) so this stays correct regardless of what Kit-5 or
 * a future preset sets on any of these.
 */
.b2b-rfq-manual-table-wrap .b2b-rfq-manual-row .b2b-rfq-manual-cell .b2b-rfq-manual-input,
.b2b-rfq-manual-table-wrap .b2b-rfq-manual-row .b2b-rfq-manual-cell .b2b-rfq-manual-select {
	box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid #d0d0d0;
	border-radius: 4px;
	font: inherit;
}

.b2b-rfq-manual-input:focus,
.b2b-rfq-manual-select:focus {
	border-color: #1a1a1a;
	outline: none;
	box-shadow: 0 0 0 2px rgba( 26, 26, 26, 0.15 );
}

.b2b-rfq-manual-input[aria-invalid="true"],
.b2b-rfq-manual-select[aria-invalid="true"] {
	border-color: #b00020;
}

.b2b-rfq-manual-error {
	display: block;
	min-height: 0;
	margin-top: 4px;
	font-size: 12px;
	color: #b00020;
}

.b2b-rfq-manual-error:empty {
	display: none;
}

.b2b-rfq-manual-other-wrap {
	margin-top: 8px;
}

.b2b-rfq-manual-other-wrap[hidden] {
	display: none;
}

.b2b-rfq-manual-other-label {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: 600;
	color: #3f3f46;
}

.b2b-rfq-manual-col-actions button.b2b-rfq-manual-remove-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid #d0d0d0;
	border-radius: 4px;
	background-color: #fff;
	color: #52525b;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.b2b-rfq-manual-remove-btn:hover:not( :disabled ) {
	color: #b00020;
	border-color: #b00020;
}

.b2b-rfq-manual-remove-btn:focus-visible {
	outline: 2px solid #1a1a1a;
	outline-offset: 1px;
}

.b2b-rfq-manual-remove-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.b2b-rfq-manual-add-btn {
	display: inline-block;
	margin-top: 10px;
	padding: 9px 18px;
	border: 1px solid #1a1a1a;
	border-radius: 4px;
	background-color: #1a1a1a;
	color: #fff;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

/**
 * phase-button-style-presets-ab: staging fix, found while wiring this
 * button's own new preset mechanism in — this rule's own bare selector,
 * one class + `:hover`, is (0,2,0), an exact specificity TIE against the
 * Kit-5 style-leak-fix rule below (`.b2b-rfq-manual-table-wrap
 * .b2b-rfq-manual-add-btn`, two classes, also (0,2,0)) for the identical
 * `background-color`/`border-color` properties — since that rule is later
 * in this file, the tie was resolving in *its* favour, meaning hovering
 * this button was silently showing the resting `#1a1a1a` instead of this
 * rule's own intended `#3f3f46` darken ever since that phase landed.
 * Chaining the same `.b2b-rfq-manual-table-wrap` ancestor here (0,3,0)
 * fixes it outright — no `!important`, a genuine specificity win, same
 * discipline as every fix in that same file's own docblocks.
 *
 * Extends this rule in place (not a new, tied-specificity competing
 * rule) — every `var()` fallback chains down to the matching
 * `--b2b-rfq-btn-rest-*` custom property (so an *active* preset's own
 * rest-state colour/shape correctly carries through to hover when that
 * preset doesn't define its own hover value), bottoming out at this
 * rule's own pre-existing hardcoded value (`background-color`/
 * `border-color`) or a safe inert default for a property this rule never
 * set before — a default (no preset) instance still darkens to the exact
 * same `#3f3f46` on hover as originally intended, once this fix restores
 * that.
 */
.b2b-rfq-manual-table-wrap .b2b-rfq-manual-add-btn:hover:not(:disabled) {
	background-color: var( --b2b-rfq-btn-hover-bg, var( --b2b-rfq-btn-rest-bg, #3f3f46 ) );
	border-color: var( --b2b-rfq-btn-hover-border-color, var( --b2b-rfq-btn-rest-border-color, #3f3f46 ) );
	color: var( --b2b-rfq-btn-hover-color, var( --b2b-rfq-btn-rest-color, #fff ) );
	box-shadow: var( --b2b-rfq-btn-hover-shadow, var( --b2b-rfq-btn-rest-shadow, none ) );
	transform: var( --b2b-rfq-btn-hover-transform, var( --b2b-rfq-btn-rest-transform, none ) );
	border-radius: var( --b2b-rfq-btn-hover-radius, var( --b2b-rfq-btn-rest-radius, 4px ) );
	clip-path: var( --b2b-rfq-btn-hover-clip-path, var( --b2b-rfq-btn-rest-clip-path, none ) );
}

.b2b-rfq-manual-table-wrap .b2b-rfq-manual-add-btn:active:not(:disabled) {
	background-color: var( --b2b-rfq-btn-active-bg, var( --b2b-rfq-btn-hover-bg, var( --b2b-rfq-btn-rest-bg, #3f3f46 ) ) );
	color: var( --b2b-rfq-btn-active-color, var( --b2b-rfq-btn-hover-color, var( --b2b-rfq-btn-rest-color, #fff ) ) );
	box-shadow: var( --b2b-rfq-btn-active-shadow, var( --b2b-rfq-btn-hover-shadow, var( --b2b-rfq-btn-rest-shadow, none ) ) );
	transform: var( --b2b-rfq-btn-active-transform, var( --b2b-rfq-btn-hover-transform, var( --b2b-rfq-btn-rest-transform, none ) ) );
}

.b2b-rfq-manual-table-wrap .b2b-rfq-manual-add-btn::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background-color: var( --b2b-rfq-btn-slide-bg, transparent );
	transition: width 0.3s cubic-bezier( 0.16, 1, 0.3, 1 );
	z-index: -1;
	pointer-events: none;
}

.b2b-rfq-manual-table-wrap .b2b-rfq-manual-add-btn:hover:not(:disabled)::after {
	width: 100%;
}

.b2b-rfq-manual-add-btn:focus-visible {
	outline: 2px solid #1a1a1a;
	outline-offset: 2px;
}

.b2b-rfq-manual-table-wrap .b2b-rfq-manual-add-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}

@media ( forced-colors: active ) {
	.b2b-rfq-manual-add-btn:focus-visible {
		outline-color: ButtonText;
	}
}

/**
 * Staging fix (phase-kit5-style-leak-sweep-2, follow-up to phase-minicart
 * -kit5-style-leak-fix/PR #124): reported there, not fixed — the bare
 * rule above has no `button` type qualifier, specificity (0,1,0), losing
 * outright to Elementor's global Kit-5 button style, `.elementor-kit-5
 * button { padding: 20px 54px; ... }`, specificity (0,1,1) (class column
 * ties at 1, Kit-5 wins the type column). No live staging instance to
 * inspect this phase — derived by the same specificity arithmetic against
 * Kit-5's already-reported selector.
 *
 * manual-entry-table.php's markup (confirmed via source) renders this
 * button as a direct child of `.b2b-rfq-manual-table-wrap`, not nested in
 * a row/cell the way the table's own inputs are — two real classes,
 * specificity (0,2,0), already strictly beats Kit-5's (0,1,1) via the
 * class column alone (2 > 1); no `button` type qualifier added here
 * deliberately, since adding one would tip this rule to (0,2,1), same
 * discipline as PR #124's Mini Cart qty-input fix. Comfortably below the
 * `{{WRAPPER}} .b2b-rfq-manual-add-btn` control's own real `{{WRAPPER}}`
 * -scoped (0,4,0) (ManualRfqWidgetControlsTrait) — well under, not a tie,
 * so no source-order dependency; that control's own value still wins
 * whenever set. No `!important`. Full property set re-declared,
 * byte-identical to the bare rule above.
 */
.b2b-rfq-manual-table-wrap .b2b-rfq-manual-add-btn {
	display: inline-block;
	margin-top: 10px;
	padding: 9px 18px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
	/**
	 * phase-button-style-presets-ab: `border`/`border-radius`/
	 * `background-color`/`color` are now `var()`-driven, replacing this
	 * rule's own former plain `1px solid #1a1a1a`/`4px`/`#1a1a1a`/`#fff`
	 * literals — every fallback is that exact same original value, so a
	 * default (no preset) instance renders pixel-identical to before this
	 * feature existed. `box-shadow`/`transform`/`clip-path` are new
	 * properties this rule never set before, each defaulting to a safe
	 * inert value. `position: relative` is a true no-op on its own — needed
	 * for this button's own `::after` below (Liquid Slide-In Fill preset).
	 * These are the ONLY place any of these properties are ever written as
	 * literals for this button — see `.b2b-rfq-add-to-cart-btn`'s own
	 * docblock (frontend.css) for exactly why.
	 */
	border-width: 1px;
	border-style: solid;
	border-color: var( --b2b-rfq-btn-rest-border-color, #1a1a1a );
	border-radius: var( --b2b-rfq-btn-rest-radius, 4px );
	background-color: var( --b2b-rfq-btn-rest-bg, #1a1a1a );
	color: var( --b2b-rfq-btn-rest-color, #fff );
	box-shadow: var( --b2b-rfq-btn-rest-shadow, none );
	transform: var( --b2b-rfq-btn-rest-transform, none );
	clip-path: var( --b2b-rfq-btn-rest-clip-path, none );
	position: relative;
}

/**
 * phase-button-style-presets-d-skewed-slant: same no-op-for-every-other-
 * preset rule as `.b2b-rfq-add-to-cart-btn`'s own equivalent (frontend.css)
 * — see that rule's own docblock.
 */
.b2b-rfq-manual-table-wrap .b2b-rfq-manual-add-btn .b2b-rfq-btn-label {
	display: inline-block;
	transform: var( --b2b-rfq-btn-label-skew, none );
}

/**
 * phase-button-style-presets-e-micro-icon: same no-op-for-every-other-
 * preset rule as `.b2b-rfq-add-to-cart-btn`'s own equivalent (frontend.css)
 * — see that rule's own docblock.
 */
.b2b-rfq-manual-table-wrap .b2b-rfq-manual-add-btn .b2b-rfq-btn-icon {
	display: inline-flex;
	font-size: 16px;
	line-height: 1;
	transform: var( --b2b-rfq-btn-rest-icon-transform, none );
	transition: transform 0.25s ease;
}

.b2b-rfq-manual-table-wrap .b2b-rfq-manual-add-btn .b2b-rfq-btn-icon svg {
	display: block;
	width: 1em;
	height: 1em;
}

.b2b-rfq-manual-table-wrap .b2b-rfq-manual-add-btn:hover:not(:disabled) .b2b-rfq-btn-icon {
	transform: var( --b2b-rfq-btn-hover-icon-transform, var( --b2b-rfq-btn-rest-icon-transform, none ) );
}

/**
 * Mobile stacking (SPEC.md §3.2.3/§3.2.4 Phase 13 prompt): below 768px the
 * table stops being laid out as a table at all — each row becomes its own
 * labelled block, one field per line. The real <thead> is visually hidden
 * (not removed: :nth-of-type()-free, so nothing here depends on column
 * order) since .b2b-rfq-manual-cell-label inside every cell carries the
 * same column name down into the stacked layout instead.
 * .b2b-rfq-manual-row-heading (server-rendered text, kept current by
 * manual-entry-table.js on every Add/Remove) adds a "Row N" heading per
 * block for visual orientation only — every field's real, always-present
 * accessible name (aria-label) already carries its own row number
 * regardless of viewport or CSS, so this heading is decorative and safe
 * to hide with aria-hidden="true".
 */
@media ( max-width: 768px ) {
	.b2b-rfq-manual-table,
	.b2b-rfq-manual-table tbody,
	.b2b-rfq-manual-row,
	.b2b-rfq-manual-cell {
		display: block;
		width: 100% !important;
	}

	.b2b-rfq-manual-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect( 0, 0, 0, 0 );
		white-space: nowrap;
		border: 0;
	}

	.b2b-rfq-manual-row {
		margin-bottom: 14px;
		padding: 12px;
		border: 1px solid #e4e4e7;
		border-radius: 6px;
	}

	.b2b-rfq-manual-row-heading {
		display: block;
		margin-bottom: 8px;
		font-weight: 700;
		font-size: 13px;
		color: #18181b;
	}

	.b2b-rfq-manual-cell {
		padding: 0 0 10px;
	}

	.b2b-rfq-manual-cell:last-child {
		padding-bottom: 0;
		text-align: left;
	}

	.b2b-rfq-manual-cell-label {
		display: block;
		margin-bottom: 4px;
		font-size: 12px;
		font-weight: 600;
		color: #3f3f46;
	}

	.b2b-rfq-manual-col-actions .b2b-rfq-manual-remove-btn {
		width: auto;
		padding: 6px 14px;
	}
}

/**
 * Phase 7: closes the gap Phase 1 explicitly flagged and deferred for
 * this exact table — `@media (max-width: 768px)` above only fires from
 * the *browser viewport*, so a table squeezed into a narrow Elementor
 * column on an otherwise-wide desktop never stacks even though its own
 * rendered width may be far narrower than 768px. This `@container` query
 * fires from `.b2b-rfq-manual-table-wrap`'s own `inline-size` (declared
 * via `container-type: inline-size` above) instead, reaching that exact
 * case. Deliberately duplicates every declaration from the `@media`
 * block above rather than restructuring it to share rules — CSS has no
 * "apply this @media OR this @container" combinator, and this keeps the
 * viewport fallback (needed for browsers without Container Query
 * support — a strict progressive enhancement, never the only path to a
 * working stacked layout) completely intact and independently correct.
 */
@container ( max-width: 768px ) {
	.b2b-rfq-manual-table,
	.b2b-rfq-manual-table tbody,
	.b2b-rfq-manual-row,
	.b2b-rfq-manual-cell {
		display: block;
		width: 100% !important;
	}

	.b2b-rfq-manual-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect( 0, 0, 0, 0 );
		white-space: nowrap;
		border: 0;
	}

	.b2b-rfq-manual-row {
		margin-bottom: 14px;
		padding: 12px;
		border: 1px solid #e4e4e7;
		border-radius: 6px;
	}

	.b2b-rfq-manual-row-heading {
		display: block;
		margin-bottom: 8px;
		font-weight: 700;
		font-size: 13px;
		color: #18181b;
	}

	.b2b-rfq-manual-cell {
		padding: 0 0 10px;
	}

	.b2b-rfq-manual-cell:last-child {
		padding-bottom: 0;
		text-align: left;
	}

	.b2b-rfq-manual-cell-label {
		display: block;
		margin-bottom: 4px;
		font-size: 12px;
		font-weight: 600;
		color: #3f3f46;
	}

	.b2b-rfq-manual-col-actions .b2b-rfq-manual-remove-btn {
		width: auto;
		padding: 6px 14px;
	}
}

/**
 * phase-button-style-presets-ab: this file's own first
 * `prefers-reduced-motion` block — matches frontend.css's own equivalent
 * for the other three buttons this feature touches (see that file's own
 * docblock for the full "`!important` because Elementor per-instance load
 * order isn't guaranteed" reasoning, identical here). Covers the "Add
 * Row" button only — this file has no other Style Preset target.
 *
 * phase-button-style-presets-e-micro-icon: extends the same two rules
 * below with `.b2b-rfq-btn-icon`'s own transition/hover-transform — same
 * reasoning as frontend.css's own equivalent extension.
 */
@media ( prefers-reduced-motion: reduce ) {
	.b2b-rfq-manual-table-wrap .b2b-rfq-manual-add-btn,
	.b2b-rfq-manual-table-wrap .b2b-rfq-manual-add-btn::after,
	.b2b-rfq-manual-table-wrap .b2b-rfq-manual-add-btn .b2b-rfq-btn-icon {
		transition: none !important;
	}

	.b2b-rfq-manual-table-wrap .b2b-rfq-manual-add-btn:hover:not(:disabled),
	.b2b-rfq-manual-table-wrap .b2b-rfq-manual-add-btn:active:not(:disabled),
	.b2b-rfq-manual-table-wrap .b2b-rfq-manual-add-btn:hover:not(:disabled) .b2b-rfq-btn-icon {
		transform: none !important;
	}

	.b2b-rfq-manual-table-wrap .b2b-rfq-manual-add-btn:hover:not(:disabled)::after {
		width: 0 !important;
	}
}