/**
 * Bulk RMA CSV Upload — page-specific styles
 *
 * Covers three templates:
 *   - rma/bulk.html         (upload form)
 *   - rma/bulk_fail.html    (per-row validation failure report)
 *   - rma/bulk_success.html (confirmation)
 *
 * Loaded AFTER altalabs.webflow.min.css, alta_brand.css, and rma_form.css.
 * rma_form.css already themes the shared `.service-form.w-form` / `.form-5`
 * / `.field-label` / `.errormessage` / `.sn-addon-container` / `#button-submit`
 * markup that this page reuses verbatim for the customer-details section —
 * this file only adds the pieces that are unique to the bulk flow (step
 * headers, CSV download/upload controls, the results/failures tables, the
 * narrow-screen table notice modal, alert banners, and the success page's
 * secondary CTA).
 *
 * All colours/spacing/radii below come from the shared tokens defined in
 * alta_brand.css (:root custom properties). No new hardcoded brand colours
 * are introduced; the couple of `rgba(122, 90, 248, …)` tints reuse the same
 * derived-from-`--alta-purple` pattern already established in rma_form.css.
 */


/* ============================================================
   0. UTILITIES
   ============================================================ */

/**
 * Standard "visually hidden but still in the accessibility tree and tab
 * order" technique. Used for the native <input type="file"> (which is
 * replaced visually by .bulk-upload-label) and for the failures-table
 * <caption> (screen-reader-only context; the visible <h2> above the table
 * serves sighted users).
 *
 * Deliberately NOT display:none — that would remove the element from the
 * tab order and make it unreachable by keyboard.
 */
.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/**
 * Skip link: hidden off-screen until keyboard-focused, then jumps to the
 * top so keyboard users don't have to tab through the full navbar on every
 * page load.
 */
.skip-link {
	position: absolute;
	top: -3rem;
	left: 0;
	z-index: 2000;
	background-color: var(--alta-purple-cta);
	color: #ffffff;
	font-family: var(--alta-font-body);
	font-weight: 600;
	padding: 0.6rem 1.25rem;
	border-radius: 0 0 var(--alta-radius) 0;
	transition: top 0.15s ease;
}

.skip-link:focus {
	top: 0;
	outline: 3px solid var(--alta-ring-dark);
	outline-offset: -3px;
}


/* ============================================================
   1. ALERT / FLASH BANNERS
   Renders both Flask's flashed messages and the `error` template
   variable. Both bulk.html and bulk_fail.html use this.
   ============================================================ */

.rma-alert {
	font-family: var(--alta-font-body);
	font-size: 0.9375rem;
	line-height: 1.5;
	border-radius: var(--alta-radius);
	padding: 0.875rem 1.125rem;
	margin-bottom: 1.25rem;
}

.rma-alert-error {
	background-color: rgba(219, 66, 63, 0.12); /* tint of --alta-danger */
	border: 1px solid var(--alta-danger-dark);
	color: var(--alta-danger-dark);
}

.rma-alert-list {
	margin: 0;
	padding-left: 1.25rem;
}


/* ============================================================
   2. BULK FORM — PAGE TITLE & INTRO (bulk.html)
   ============================================================ */

.bulk-page-title {
	font-family: var(--alta-font-heading);
	font-weight: 700;
	font-size: 1.75rem;
	line-height: 1.25;
	color: var(--alta-text-dark);
	text-align: center;
	margin: 0 0 0.75rem;
}

/* One sentence per line. These are separate <p> elements rather than a single
   wrapped paragraph so each sentence gets its own line at every width, instead
   of reflowing into a dense block. */
.bulk-intro {
	font-family: var(--alta-font-body);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--alta-text-dark);
	text-align: center;
	margin: 0 0 0.375rem;
}

.bulk-intro-muted {
	color: var(--alta-text-dark-muted);
	font-size: 0.9375rem;
	margin-top: 0.5rem;
}

@media (max-width: 600px) {
	.bulk-page-title {
		font-size: 1.375rem;
	}

	.bulk-intro {
		font-size: 0.9375rem;
	}
}


/* ============================================================
   3. BULK FORM — STEP HEADERS (bulk.html)
   ============================================================ */

.bulk-step {
	margin: 1.5rem 0 1rem;
}

.bulk-step-heading {
	font-family: var(--alta-font-heading);
	font-weight: 600;
	font-size: 1.0625rem;
	color: var(--alta-text-dark);
	margin: 0 0 0.375rem;
}

.bulk-step-copy {
	font-family: var(--alta-font-body);
	font-size: 0.875rem;
	color: var(--alta-text-dark-muted);
	margin: 0;
	line-height: 1.6;
}

.bulk-divider {
	border: none;
	border-top: 1px solid var(--alta-border-dark);
	margin: 1.75rem 0;
}


/* ============================================================
   4. CSV TEMPLATE DOWNLOAD (bulk.html, Step 2)
   ============================================================ */

.bulk-download-row {
	display: flex;
	justify-content: center;
	margin-bottom: 0.5rem;
}

/**
 * Secondary CTA styled as an outlined purple pill so it reads as
 * "download a helper file", not the primary form action.
 */
.bulk-download-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--alta-font-body);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--alta-purple-bright);
	background-color: rgba(122, 90, 248, 0.12); /* tint of --alta-purple */
	border: 1px solid var(--alta-purple);
	border-radius: var(--alta-radius);
	padding: 0.625rem 1.25rem;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.bulk-download-btn:hover {
	background-color: rgba(122, 90, 248, 0.22);
	color: #ffffff;
}

.bulk-download-btn:focus-visible {
	outline: 3px solid var(--alta-ring-dark);
	outline-offset: 2px;
}

.bulk-download-btn svg {
	flex-shrink: 0;
}


/* ============================================================
   5. CSV UPLOAD CONTROL (bulk.html, Step 3)
   The native <input type="file"> is visually hidden (see .visually-hidden
   above) and replaced by this styled, clickable label. Because the input
   stays in the accessibility tree (not display:none), Tab still reaches
   it and Enter/Space still opens the native file picker — we only need to
   paint the *focus indicator* onto the label via :focus-within on the
   wrapper, since the real focus target is invisible.
   ============================================================ */

.bulk-upload-wrap {
	position: relative;
	margin-bottom: 0.5rem;
}

.bulk-upload-label {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	width: 100%;
	box-sizing: border-box;
	font-family: var(--alta-font-body);
	font-weight: 500;
	font-size: 0.9375rem;
	color: var(--alta-text-dark);
	background-color: var(--alta-navy-input);
	border: 1px dashed var(--alta-border-dark);
	border-radius: var(--alta-radius);
	padding: 0.875rem 1.125rem;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.bulk-upload-label:hover {
	border-color: var(--alta-purple);
	background-color: rgba(122, 90, 248, 0.08);
}

/* Visible keyboard-focus indicator, painted on the wrapper since the real
   input is visually hidden (see note above). */
.bulk-upload-wrap:focus-within .bulk-upload-label {
	border-color: var(--alta-purple);
	outline: 3px solid var(--alta-ring-dark);
	outline-offset: 2px;
}

.bulk-upload-label svg {
	flex-shrink: 0;
	color: var(--alta-purple-bright);
}

.bulk-file-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}


/* ============================================================
   6. RESULTS CARD WRAPPER (bulk_fail.html)
   Wider than .service-form.w-form / .success-message-5.w-form-done since
   it hosts a data table, and left-aligned rather than centered.
   ============================================================ */

.bulk-results-card {
	background-color: var(--alta-navy-elev);
	border: 1px solid var(--alta-border-dark);
	border-radius: var(--alta-radius-lg);
	box-shadow: var(--alta-shadow-lg);
	max-width: 900px;
	margin: 2.5rem auto 3rem;
	padding: 2.5rem 2.25rem;
	text-align: left;
}

/**
 * Error summary block. Receives programmatic focus on page load (see the
 * inline script in bulk_fail.html) so keyboard/screen-reader users land
 * directly on "here's what went wrong" instead of the top of the navbar.
 * tabindex="-1" makes it focusable via script without adding it to the
 * normal Tab order.
 */
.bulk-fail-summary {
	margin-bottom: 1.5rem;
}

.bulk-fail-summary:focus {
	outline: 3px solid var(--alta-ring-dark);
	outline-offset: 4px;
	border-radius: var(--alta-radius);
}

.bulk-fail-heading {
	font-family: var(--alta-font-heading);
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--alta-danger-dark);
	margin: 0 0 0.75rem;
}

.bulk-fail-summary p {
	font-family: var(--alta-font-body);
	color: var(--alta-text-dark-muted);
	line-height: 1.6;
	margin: 0 0 0.5rem;
}

.bulk-fail-summary a {
	color: var(--alta-purple-bright);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.bulk-fail-summary a:hover {
	color: var(--alta-purple-cta);
}

.bulk-fail-support {
	font-size: 0.875rem;
}

.bulk-fail-section {
	margin-top: 2rem;
}

.bulk-fail-section h2 {
	font-family: var(--alta-font-heading);
	font-weight: 600;
	font-size: 1.125rem;
	color: var(--alta-text-dark);
	margin: 0 0 0.75rem;
}

.bulk-fail-general-list {
	margin: 0;
	padding-left: 1.25rem;
	color: var(--alta-danger-dark);
	font-family: var(--alta-font-body);
	line-height: 1.7;
}

.bulk-fail-scroll-hint {
	font-family: var(--alta-font-body);
	font-size: 0.8125rem;
	color: var(--alta-text-dark-muted);
	margin: 0 0 0.5rem;
}

.bulk-fail-muted {
	font-family: var(--alta-font-body);
	color: var(--alta-text-dark-muted);
}


/* ============================================================
   7. RESULTS / FAILURES TABLE
   Shared "clean" table look for the row-level failures table.
   table-layout: fixed + explicit per-column percentage widths (see §7)
   is the fix for the old branch's "table blew out on narrow screens" bug:
   the table can never grow past its container, long content wraps
   instead, and .rma-table-wrap provides a scroll fallback with an
   explicit hint + narrow-screen modal notice (see §8) rather than a
   silent, undiscoverable overflow-x:auto.
   ============================================================ */

.rma-table-wrap {
	overflow-x: auto;
	border-radius: var(--alta-radius);
}

table.rma-table-clean {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	background-color: var(--alta-navy-elev);
	border: 1px solid var(--alta-border-dark);
	border-radius: var(--alta-radius);
	overflow: hidden;
}

.rma-table-clean th,
.rma-table-clean td {
	padding: 0.7rem 0.85rem;
	border-bottom: 1px solid var(--alta-border-dark);
	vertical-align: top;
	text-align: left;
	font-family: var(--alta-font-body);
	font-size: 0.875rem;
	color: var(--alta-text-dark);
	white-space: normal;       /* allow wrapping so fixed columns can shrink */
	overflow-wrap: break-word; /* break only over-long unbroken tokens */
}

.rma-table-clean th {
	background-color: var(--alta-navy-input);
	font-weight: 700;
	color: var(--alta-text-dark);
	font-family: var(--alta-font-heading);
}

.rma-table-clean tr:last-child td {
	border-bottom: none;
}

/* Content-aware column widths for the 4-column failures table
   (Row | Field | Value | Message), sums to 100% so the table can never
   overflow its wrapper — long values/messages wrap instead. */
.bulk-fail-table th:nth-child(1), .bulk-fail-table td:nth-child(1) { width: 10%; } /* Row */
.bulk-fail-table th:nth-child(2), .bulk-fail-table td:nth-child(2) { width: 20%; } /* Field */
.bulk-fail-table th:nth-child(3), .bulk-fail-table td:nth-child(3) { width: 28%; } /* Value */
.bulk-fail-table th:nth-child(4), .bulk-fail-table td:nth-child(4) { width: 42%; } /* Message */

/**
 * Raw CSV value "chip". Uses white-space: pre-line (NOT innerHTML/|safe)
 * so an embedded newline (e.g. inside a multi-line Fault Description
 * value) still reads as a line break — this is the fix for the old
 * branch's reflected-XSS `|replace('\n','<br />')|safe`.
 */
.rma-chip {
	display: inline-block;
	background-color: var(--alta-navy-input);
	border: 1px solid var(--alta-border-dark);
	border-radius: var(--alta-radius);
	padding: 0.25rem 0.55rem;
	font-family: 'Courier New', Courier, monospace;
	font-size: 0.8125rem;
	color: var(--alta-text-dark);
	white-space: pre-line;
	overflow-wrap: break-word;
	max-width: 100%;
}

/**
 * Explicit "(empty)" indicator for a blank offending CSV cell — shown
 * instead of silently rendering nothing, which previously read as "no
 * data was captured" rather than "the cell really was blank".
 */
.rma-empty-value {
	display: inline-block;
	font-family: var(--alta-font-body);
	font-style: italic;
	font-size: 0.8125rem;
	color: var(--alta-text-dark-muted);
}


/* ============================================================
   8. NARROW-SCREEN TABLE NOTICE MODAL (bulk_fail.html)
   Same visual language as the sfp admin/report narrow-table modals
   (.modal-overlay / .modal-content / .narrow-modal-ok), adapted for the
   bulk-fail results table. Unlike the old bulk branch's serial-number
   modal, this one is a real dialog: role="dialog" + aria-modal, a
   labelled heading, a focus trap, Escape-to-close, and a properly
   labelled (not "+" link) close control. See the inline script in
   bulk_fail.html for the open/close/focus-trap logic.
   ============================================================ */

.modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background-color: rgba(3, 3, 3, 0.65);
	justify-content: center;
	align-items: center;
	padding: 1rem;
	z-index: 2000;
}

.modal-overlay.active {
	display: flex;
}

.modal-content {
	position: relative;
	background-color: var(--alta-navy-elev);
	border: 1px solid var(--alta-border-dark);
	border-radius: var(--alta-radius-lg);
	box-shadow: var(--alta-shadow-lg);
	max-width: 460px;
	width: 100%;
	padding: 1.75rem;
	color: var(--alta-text-dark);
	line-height: 1.5;
}

.modal-content h3 {
	margin: 0 0 0.75rem;
	font-family: var(--alta-font-heading);
	font-size: 1.25rem;
	color: var(--alta-text-dark);
}

.modal-content p {
	margin: 0 0 1.25rem;
	font-family: var(--alta-font-body);
	color: var(--alta-text-dark-muted);
}

.modal-close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	border-radius: var(--alta-radius);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--alta-text-dark-muted);
	cursor: pointer;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.modal-close:hover {
	color: var(--alta-text-dark);
	background-color: rgba(122, 90, 248, 0.15);
}

.modal-close:focus-visible {
	outline: 3px solid var(--alta-ring-dark);
	outline-offset: 2px;
}

.submit-row {
	display: flex;
	justify-content: flex-end;
}


/* ============================================================
   9. SUCCESS PAGE SECONDARY CTA (bulk_success.html)
   ============================================================ */

.bulk-another-link {
	display: inline-block;
	margin-top: 0.5rem;
	font-family: var(--alta-font-body);
	font-weight: 600;
	font-size: 0.9375rem;
	color: #ffffff;
	background-color: var(--alta-purple-cta);
	border-radius: var(--alta-radius);
	padding: 0.65rem 1.5rem;
	text-decoration: none;
	box-shadow: var(--alta-shadow);
	transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}

.bulk-another-link:hover {
	background-color: var(--alta-purple-cta-hover);
	box-shadow: var(--alta-shadow-lg);
	transform: translateY(-1px);
}

.bulk-another-link:focus-visible {
	outline: 3px solid var(--alta-ring-dark);
	outline-offset: 2px;
}


/* ============================================================
   10. REDUCED MOTION SUPPORT
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.skip-link,
	.bulk-download-btn,
	.bulk-upload-label,
	.bulk-another-link,
	.modal-close {
		transition: none;
	}

	.bulk-another-link:hover {
		transform: none;
	}
}


/* ============================================================
   11. RESPONSIVE ADJUSTMENTS
   ============================================================ */

@media (max-width: 680px) {
	.bulk-results-card {
		margin: 1rem;
		padding: 1.5rem 1.25rem;
		border-radius: var(--alta-radius);
	}

	.bulk-fail-heading {
		font-size: 1.25rem;
	}
}

/* Temporary release label; remove when bulk submissions leave beta. */
.bulk-beta-tag {
    display: inline-block;
    vertical-align: middle;
    padding: 0.25rem 0.65rem;
    border: 1px solid var(--alta-purple);
    border-radius: 999px;
    background: rgba(122, 90, 248, 0.15);
    color: var(--alta-text-dark);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}