/* ── Global action loading affordances ──────────────────────────────────────
   Gives instant feedback on EVERY Livewire action so no click ever feels like
   "nothing happened", plus a thin top progress bar on every server request.
   Driven by public/js/eq-loading.js via Livewire's commit hook. Works in the
   supplier portal, admin, and the customer widget (one shared system). */

/* Thin top progress bar — appears on any server round-trip that takes long
   enough to notice (see BAR_DELAY in eq-loading.js). Sits above modals. */
#eq-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 2147483646;
	pointer-events: none;
	opacity: 0;
	transition: opacity .2s ease;
}

#eq-progress.eq-active {
	opacity: 1;
}

#eq-progress > #eq-progress-fill {
	height: 100%;
	width: 0;
	/* Bar color. Portal falls back to the EquipDash brand navy (#003264); the
	   widget layouts set --eq-loading-color to the supplier's own primary color
	   so the bar (and its glow) match the supplier's branding. */
	background: var(--eq-loading-color, #003264);
	box-shadow: 0 0 8px var(--eq-loading-color, #003264); /* fallback: solid glow */
	box-shadow: 0 0 8px color-mix(in srgb, var(--eq-loading-color, #003264) 55%, transparent);
	border-radius: 0 2px 2px 0;
	transition: width .25s ease;
}

#eq-progress.eq-done > #eq-progress-fill {
	transition: width .15s ease;
}

/* The exact control the user clicked/submitted gets an instant "working" look,
   before the round-trip even starts. Dims it and blocks a second click so the
   user always sees their action registered (and never double-submits). */
.eq-busy-el {
	opacity: .6 !important;
	pointer-events: none !important;
	cursor: progress !important;
	transition: opacity .12s ease;
}

/* ── Friendly "file too large" modal ─────────────────────────────────────────
   Shown by eq-loading.js when a file upload makes the request exceed the server
   limit (HTTP 413), replacing Livewire's raw "Oops! An Error Occurred" overlay.
   Self-contained so it looks identical in the supplier portal, the open-form
   page, and inside the customer widget. The button reuses --eq-loading-color so
   it matches the supplier's branding in the widget (brand navy elsewhere). */
#eq-upload-error {
	position: fixed;
	inset: 0;
	z-index: 2147483647; /* above the progress bar and any app modal */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

#eq-upload-error .eq-ue-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 24, 51, .45);
}

#eq-upload-error .eq-ue-card {
	position: relative;
	width: 100%;
	max-width: 380px;
	background: #fff;
	border-radius: 14px;
	padding: 28px 24px 24px;
	text-align: center;
	box-shadow: 0 12px 40px rgba(0, 24, 51, .25);
	animation: eq-ue-in .18s ease-out;
}

@keyframes eq-ue-in {
	from { opacity: 0; transform: translateY(8px) scale(.98); }
	to   { opacity: 1; transform: none; }
}

#eq-upload-error .eq-ue-icon {
	width: 52px;
	height: 52px;
	margin: 0 auto 14px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #B42318;
	background: #FEF3F2;
}

#eq-upload-error .eq-ue-title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: #101828;
	margin: 0 0 6px;
}

#eq-upload-error .eq-ue-body {
	font-size: 14px;
	line-height: 1.5;
	color: #475467;
	margin: 0 0 20px;
}

#eq-upload-error .eq-ue-btn {
	display: inline-block;
	min-width: 120px;
	padding: 12px 24px; /* >= 44px tall touch target */
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	background: var(--eq-loading-color, #003264);
	border: none;
	border-radius: 8px;
	cursor: pointer;
}

#eq-upload-error .eq-ue-btn:hover { filter: brightness(1.08); }

#eq-upload-error .eq-ue-btn:focus-visible {
	outline: 2px solid var(--eq-loading-color, #003264);
	outline-offset: 2px;
}