/**
 * 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;
}

.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;
}

.b2b-rfq-manual-add-btn:hover {
	background-color: #3f3f46;
	border-color: #3f3f46;
}

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

/**
 * 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;
	}
}