/*
 * Airlux Fixture Fault Log — front end.
 *
 * Airlux house style: navy #12294B carries it, the logo's cyan-to-magenta
 * spectrum is the one flourish. Deliberately single-theme (the site is light),
 * so every colour is stated rather than inherited. Everything is scoped under
 * .alx-ffl and states its own values, because it has to survive whatever the
 * surrounding theme sets.
 */

.alx-ffl {
	--alx-ink: #12294b;
	--alx-ink-2: #405a7d;
	--alx-ink-3: #8b96a7;
	--alx-ground: #f7faff;
	--alx-surface: #ffffff;
	--alx-surface-2: #f2f7ff;
	--alx-line: #dce6f3;
	--alx-line-strong: #becde2;
	--alx-accent: #12294b;
	--alx-accent-soft: #e8f0fb;
	--alx-warn: #c02b0a;
	--alx-warn-soft: #fcebe6;
	--alx-warn-line: #f0bfb2;
	--alx-info: #0084b1;
	--alx-info-soft: #e2f4fb;
	--alx-info-line: #a6dcee;
	--alx-ok: #0f7a5a;
	--alx-ok-soft: #e3f4ef;
	--alx-ok-line: #a8d8c8;
	--alx-spectrum: linear-gradient(100deg, #00b8f1 0%, #7b84c4 52%, #fd2095 100%);
	--alx-sans: "Jost", "Gilroy", system-ui, -apple-system, "Segoe UI", sans-serif;
	--alx-mono: ui-monospace, "SF Mono", "IBM Plex Mono", Menlo, Consolas, monospace;
	--alx-r: 8px;
	--alx-r-card: 14px;
	--alx-r-pill: 999px;

	font-family: var(--alx-sans);
	font-size: 15px;
	line-height: 1.5;
	color: var(--alx-ink);
	max-width: 1080px;
	margin: 0 auto;
}

.alx-ffl *,
.alx-ffl *::before,
.alx-ffl *::after { box-sizing: border-box; }

.alx-ffl svg.alx-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.alx-ffl .alx-mark { display: block; flex: none; }

.alx-ffl h2,
.alx-ffl h3 {
	margin: 0;
	font-family: var(--alx-sans);
	font-weight: 500;
	letter-spacing: -0.012em;
	color: var(--alx-ink);
	text-wrap: balance;
}
.alx-ffl p { margin: 0; }
.alx-ffl :focus-visible { outline: 2px solid var(--alx-info); outline-offset: 2px; }

/* ---------- primitives ---------- */

.alx-ffl .alx-eyebrow {
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.13em;
	font-size: 11px;
	color: var(--alx-ink-3);
}
.alx-ffl .alx-mb { margin-bottom: 6px; }
.alx-ffl .alx-m0 { margin: 0 !important; }
.alx-ffl .alx-mono { font-family: var(--alx-mono); }

.alx-ffl .alx-btn {
	font: inherit;
	font-weight: 500;
	background: var(--alx-accent);
	color: #ffffff;
	border: 1px solid transparent;
	border-radius: var(--alx-r-pill);
	padding: 10px 24px;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	transition: filter 0.14s ease;
}
.alx-ffl .alx-btn:hover { filter: brightness(1.15); color: #ffffff; }
.alx-ffl .alx-btn[disabled] { opacity: 0.45; cursor: progress; filter: none; }
.alx-ffl .alx-btn-quiet {
	background: transparent;
	color: var(--alx-ink-2);
	border-color: var(--alx-line-strong);
}
.alx-ffl .alx-btn-quiet:hover { background: var(--alx-surface-2); color: var(--alx-ink); filter: none; }
.alx-ffl .alx-btn-sm { padding: 7px 16px; font-size: 13px; }
.alx-ffl .alx-inline { display: inline; margin: 0; }

.alx-ffl .alx-field { display: flex; flex-direction: column; gap: 6px; }
.alx-ffl .alx-field > label,
.alx-ffl .alx-field > .alx-lbl {
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.11em;
	font-size: 11px;
	color: var(--alx-ink-2);
}
/* A value the form fills in itself: reads like a field, but nothing to edit. */
.alx-ffl .alx-fixed { margin: 0; font-size: 15px; line-height: 1.3; padding: 2px 0; }
.alx-ffl .alx-hint { font-size: 12px; color: var(--alx-ink-3); line-height: 1.4; }
.alx-ffl .alx-req::after { content: "*"; color: var(--alx-warn); margin-left: 3px; }

.alx-ffl input[type="text"],
.alx-ffl input[type="email"],
.alx-ffl input[type="date"],
.alx-ffl input[type="password"],
.alx-ffl input[type="file"],
.alx-ffl select,
.alx-ffl textarea {
	font: inherit;
	color: var(--alx-ink);
	background: var(--alx-surface);
	border: 1px solid var(--alx-line-strong);
	border-radius: var(--alx-r);
	padding: 9px 11px;
	width: 100%;
	max-width: 100%;
	margin: 0;
	box-shadow: none;
}
.alx-ffl textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.alx-ffl .alx-num { font-family: var(--alx-mono); }
.alx-ffl input:hover,
.alx-ffl select:hover,
.alx-ffl textarea:hover { border-color: var(--alx-ink-3); }

.alx-ffl .alx-sr { display: flex; flex-direction: column; gap: 4px; font-size: 11px;
	text-transform: uppercase; letter-spacing: 0.11em; color: var(--alx-ink-2); font-weight: 500; }
.alx-ffl .alx-sr select { width: auto; min-width: 150px; }

/* ---------- gate ---------- */

.alx-ffl .alx-gate { display: grid; place-items: center; padding: 24px 0 40px; }
.alx-ffl .alx-gate-card {
	width: 100%;
	max-width: 440px;
	background: var(--alx-surface);
	border: 1px solid var(--alx-line);
	border-radius: var(--alx-r-card);
	box-shadow: 0 1px 2px rgba(18, 41, 75, 0.05), 0 12px 30px -18px rgba(18, 41, 75, 0.3);
	padding: 30px;
	position: relative;
	overflow: hidden;
}
.alx-ffl .alx-gate-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: var(--alx-spectrum);
}
.alx-ffl .alx-gate-mark { display: flex; align-items: center; gap: 11px; margin-bottom: 24px; }
.alx-ffl .alx-wm {
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-size: 12px;
	color: var(--alx-ink-2);
}
.alx-ffl .alx-gate-h { font-size: 26px; margin-bottom: 8px; }
.alx-ffl .alx-lede { color: var(--alx-ink-2); font-size: 14px; margin-bottom: 20px; }
.alx-ffl .alx-gate-form { display: flex; flex-direction: column; gap: 14px; }
.alx-ffl .alx-gate-foot {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--alx-line);
	font-size: 12px;
	color: var(--alx-ink-3);
}
.alx-ffl .alx-admin-note {
	margin-top: 14px;
	font-size: 12px;
	background: var(--alx-warn-soft);
	border: 1px solid var(--alx-warn-line);
	color: var(--alx-warn);
	border-radius: var(--alx-r);
	padding: 9px 11px;
}
.alx-ffl .alx-admin-note a { color: inherit; }

/* ---------- topbar ---------- */

.alx-ffl .alx-topbar {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 12px 0 14px;
	border-bottom: 1px solid var(--alx-line);
	margin-bottom: 22px;
}
.alx-ffl .alx-topbar .alx-wm { color: var(--alx-ink); }
.alx-ffl .alx-sep { flex: 1; }
.alx-ffl .alx-chip {
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.11em;
	font-size: 11px;
	padding: 4px 11px;
	border-radius: var(--alx-r-pill);
	border: 1px solid var(--alx-line-strong);
	color: var(--alx-ink-2);
	white-space: nowrap;
}
.alx-ffl .alx-chip-airlux {
	background: var(--alx-accent-soft);
	border-color: var(--alx-accent);
	color: var(--alx-accent);
}

/* ---------- flash ---------- */

.alx-ffl .alx-flash {
	border-radius: var(--alx-r);
	padding: 12px 14px;
	margin-bottom: 20px;
	font-size: 14px;
	line-height: 1.45;
	border: 1px solid;
}
.alx-ffl .alx-ok { background: var(--alx-ok-soft); border-color: var(--alx-ok-line); color: var(--alx-ok); }
.alx-ffl .alx-bad { background: var(--alx-warn-soft); border-color: var(--alx-warn-line); color: var(--alx-warn); }
.alx-ffl .alx-warn { background: #fdf4e3; border-color: #e8cf9c; color: #8a5a12; }

/* ---------- summary strip ---------- */

.alx-ffl .alx-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 1px;
	background: var(--alx-line);
	border: 1px solid var(--alx-line);
	border-radius: var(--alx-r-card);
	overflow: hidden;
	margin-bottom: 26px;
}
.alx-ffl .alx-stat { background: var(--alx-surface); padding: 14px 16px; }
.alx-ffl .alx-stat .alx-k {
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 10px;
	color: var(--alx-ink-3);
}
.alx-ffl .alx-stat .alx-v {
	font-family: var(--alx-mono);
	font-size: 25px;
	font-variant-numeric: tabular-nums;
	line-height: 1.25;
	margin-top: 3px;
}
.alx-ffl .alx-warn-v { color: var(--alx-warn); }
.alx-ffl .alx-info-v { color: var(--alx-info); }

/* ---------- page heads, cards, form ---------- */

.alx-ffl .alx-page-head { margin-bottom: 18px; }
.alx-ffl .alx-page-head h3 { font-size: 21px; margin-bottom: 5px; }
.alx-ffl .alx-page-head p { color: var(--alx-ink-2); font-size: 14px; max-width: 62ch; }

.alx-ffl .alx-card {
	background: var(--alx-surface);
	border: 1px solid var(--alx-line);
	border-radius: var(--alx-r-card);
	padding: 24px;
}
.alx-ffl .alx-new { margin-bottom: 40px; }
.alx-ffl .alx-form { display: flex; flex-direction: column; gap: 26px; }
.alx-ffl .alx-fs { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.alx-ffl .alx-fs > legend { padding: 0; margin-bottom: 2px; float: none; width: auto; }
.alx-ffl .alx-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.alx-ffl .alx-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.alx-ffl .alx-grid4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 12px; }
/* The RMA code, under the fixture address it is derived from. */
.alx-ffl .alx-rma { margin: 6px 0 0; display: flex; gap: 8px; align-items: baseline; }
.alx-ffl .alx-rma .alx-mono { font-size: 13px; color: var(--alx-ink); letter-spacing: 0.04em; }
.alx-ffl .alx-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.alx-ffl .alx-note { font-size: 13px; color: var(--alx-ink-3); }

/* the fixture address — how a technician names a position */
.alx-ffl .alx-addr {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	background: var(--alx-surface-2);
	border: 1px solid var(--alx-line);
	border-radius: var(--alx-r-card);
	padding: 12px 14px;
	position: relative;
	overflow: hidden;
}
.alx-ffl .alx-addr::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: var(--alx-spectrum);
}
.alx-ffl .alx-addr-lbl {
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 10px;
	color: var(--alx-ink-3);
	padding-left: 6px;
}
.alx-ffl .alx-addr-val {
	font-family: var(--alx-mono);
	font-size: 17px;
	font-variant-numeric: tabular-nums;
	color: var(--alx-ink);
}
.alx-ffl .alx-dim { color: var(--alx-ink-3); }

/* left / right selector */
.alx-ffl .alx-sides { display: flex; gap: 10px; flex-wrap: wrap; }
.alx-ffl .alx-side {
	flex: 1 1 160px;
	position: relative;
	border: 1px solid var(--alx-line-strong);
	border-radius: var(--alx-r-card);
	background: var(--alx-surface);
	cursor: pointer;
	padding: 12px 14px;
	display: flex;
	align-items: center;
	gap: 11px;
}
.alx-ffl .alx-side input { position: absolute; opacity: 0; pointer-events: none; }
.alx-ffl .alx-glyph {
	width: 26px;
	height: 26px;
	border-radius: 3px;
	flex: none;
	background: var(--alx-surface-2);
	border: 1px solid var(--alx-line-strong);
	display: grid;
	place-items: center;
}
.alx-ffl .alx-glyph i { display: block; width: 5px; height: 16px; border-radius: 1px; background: var(--alx-ink-3); }
.alx-ffl .alx-glyph.alx-l i { margin-right: 11px; }
.alx-ffl .alx-glyph.alx-r i { margin-left: 11px; }
.alx-ffl .alx-txt { font-weight: 500; }
.alx-ffl .alx-side:has(input:checked) { border-color: var(--alx-info); background: var(--alx-info-soft); }
.alx-ffl .alx-side:has(input:checked) .alx-glyph { border-color: var(--alx-info); }
.alx-ffl .alx-side:has(input:checked) .alx-glyph i { background: var(--alx-info); }
.alx-ffl .alx-side.is-on { border-color: var(--alx-info); background: var(--alx-info-soft); }
.alx-ffl .alx-side.is-on .alx-glyph { border-color: var(--alx-info); }
.alx-ffl .alx-side.is-on .alx-glyph i { background: var(--alx-info); }

/* ---------- list ---------- */

.alx-ffl .alx-toolbar { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 18px; }
.alx-ffl .alx-rows { display: flex; flex-direction: column; gap: 10px; }

.alx-ffl .alx-row {
	background: var(--alx-surface);
	border: 1px solid var(--alx-line);
	border-left: 3px solid var(--alx-ink-3);
	border-radius: var(--alx-r-card);
	overflow: hidden;
}
.alx-ffl .alx-s-open { border-left-color: var(--alx-warn); }
.alx-ffl .alx-s-inv { border-left-color: var(--alx-info); }
.alx-ffl .alx-s-insp { border-left-color: var(--alx-line-strong); }
.alx-ffl .alx-s-done { border-left-color: var(--alx-ok); }

.alx-ffl .alx-row-head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 16px;
	cursor: pointer;
	list-style: none;
	flex-wrap: wrap;
}
.alx-ffl .alx-row-head::-webkit-details-marker { display: none; }
.alx-ffl .alx-row-head:hover { background: var(--alx-surface-2); }
.alx-ffl .alx-ref { font-family: var(--alx-mono); font-size: 13px; white-space: nowrap; }
.alx-ffl .alx-loc { font-family: var(--alx-mono); font-size: 13px; color: var(--alx-ink-2); white-space: nowrap; }
.alx-ffl .alx-gist { flex: 1 1 200px; min-width: 0; font-size: 14px; color: var(--alx-ink-2); }
.alx-ffl .alx-pill {
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 10px;
	padding: 3px 10px;
	border-radius: var(--alx-r-pill);
	border: 1px solid;
	white-space: nowrap;
	flex: none;
}
.alx-ffl .alx-pill.alx-open { background: var(--alx-warn-soft); border-color: var(--alx-warn-line); color: var(--alx-warn); }
.alx-ffl .alx-pill.alx-inv { background: var(--alx-info-soft); border-color: var(--alx-info-line); color: var(--alx-info); }
.alx-ffl .alx-pill.alx-insp { background: var(--alx-surface-2); border-color: var(--alx-line-strong); color: var(--alx-ink-2); }
.alx-ffl .alx-pill.alx-done { background: var(--alx-ok-soft); border-color: var(--alx-ok-line); color: var(--alx-ok); }

.alx-ffl .alx-row-body { padding: 0 16px 18px; border-top: 1px solid var(--alx-line); }
.alx-ffl .alx-dl {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px;
	padding: 16px 0;
}
.alx-ffl .alx-dl-flush { padding: 0; }
.alx-ffl .alx-dl .alx-k {
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 10px;
	color: var(--alx-ink-3);
}
.alx-ffl .alx-dv { font-size: 14px; margin-top: 2px; word-break: break-word; }
.alx-ffl .alx-assess {
	background: var(--alx-surface-2);
	border-radius: var(--alx-r);
	padding: 12px 14px;
	font-size: 14px;
	line-height: 1.55;
	white-space: pre-wrap;
	margin-bottom: 16px;
}
.alx-ffl .alx-shots { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.alx-ffl .alx-shots a { display: block; line-height: 0; }
.alx-ffl .alx-shots img {
	width: 110px;
	height: 110px;
	object-fit: cover;
	border-radius: var(--alx-r);
	border: 1px solid var(--alx-line-strong);
}

.alx-ffl .alx-followup {
	background: var(--alx-surface-2);
	border: 1px solid var(--alx-line);
	border-radius: var(--alx-r-card);
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.alx-ffl .alx-followup input,
.alx-ffl .alx-followup select,
.alx-ffl .alx-followup textarea { background: var(--alx-surface); }
.alx-ffl .alx-outcome { display: flex; gap: 8px; flex-wrap: wrap; }
.alx-ffl .alx-oc {
	border: 1px solid var(--alx-line-strong);
	border-radius: var(--alx-r-pill);
	background: var(--alx-surface);
	padding: 8px 15px;
	cursor: pointer;
	position: relative;
	font-size: 13px;
	font-weight: 500;
}
.alx-ffl .alx-oc input { position: absolute; opacity: 0; pointer-events: none; }
.alx-ffl .alx-oc:has(input:checked) { border-color: var(--alx-info); background: var(--alx-info-soft); color: var(--alx-info); }
.alx-ffl .alx-oc.is-on { border-color: var(--alx-info); background: var(--alx-info-soft); color: var(--alx-info); }
.alx-ffl [hidden] { display: none !important; }

.alx-ffl .alx-empty {
	border: 1px dashed var(--alx-line-strong);
	border-radius: var(--alx-r-card);
	padding: 34px 20px;
	text-align: center;
	color: var(--alx-ink-3);
}
.alx-ffl .alx-empty p { font-size: 14px; max-width: 44ch; margin: 6px auto 0; }

@media (prefers-reduced-motion: reduce) {
	.alx-ffl * { transition: none !important; animation: none !important; }
}

/* photo slots: a camera button per photo, the first one required */
.alx-ffl .alx-shot-slots { display: flex; flex-direction: column; gap: 10px; }
.alx-ffl .alx-shot-slot { position: relative; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.alx-ffl .alx-slot-hidden { display: none; }
/* The input covers its own label and stays tappable — no pointer-events: none,
   which is what stopped iOS from ever opening the camera. */
.alx-ffl .alx-shot-btn { position: relative; overflow: hidden; }
.alx-ffl .alx-shot-slot input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	padding: 0;
	border: 0;
	cursor: pointer;
	font-size: 100px;   /* keeps the clickable area large in older WebKit */
}
.alx-ffl .alx-shot-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-weight: 500;
	font-size: 14px;
	color: var(--alx-ink);
	background: var(--alx-surface);
	border: 1px solid var(--alx-line-strong);
	border-radius: var(--alx-r-pill);
	padding: 10px 20px;
	cursor: pointer;
	text-transform: none;
	letter-spacing: normal;
}
.alx-ffl .alx-shot-btn:hover { border-color: var(--alx-info); color: var(--alx-info); }
.alx-ffl .alx-shot-btn:focus-within {
	outline: 2px solid var(--alx-info);
	outline-offset: 2px;
}
.alx-ffl .alx-shot-slot.is-filled .alx-shot-btn {
	border-color: var(--alx-ok-line);
	background: var(--alx-ok-soft);
	color: var(--alx-ok);
}
.alx-ffl .alx-shot-file { font-size: 12px; color: var(--alx-ink-3); font-family: var(--alx-mono); }
.alx-ffl .alx-shot-slot.is-filled .alx-shot-file { color: var(--alx-ok); }
.alx-ffl .alx-photo-error {
	font-size: 13px;
	color: var(--alx-warn);
	background: var(--alx-warn-soft);
	border: 1px solid var(--alx-warn-line);
	border-radius: var(--alx-r);
	padding: 9px 11px;
}

/* ---------- serial number ---------- */

.alx-ffl .alx-serial-in { letter-spacing: 0.04em; }
.alx-ffl .alx-serial-count { font-variant-numeric: tabular-nums; }
.alx-ffl .alx-serial-count.is-ok { color: var(--alx-ok); }