/*
 * Elintra OS — Access form card.
 *
 * Rendered by [elintra_access] inside the theme's Access page chrome
 * (.eos-access-page in elintra-theme/assets/css/base.css). This sheet
 * styles ONLY the card and its children. Page chrome (logo bar, secure
 * footer, atmospheric background) is owned by the theme so visual
 * ownership stays clean and the form internals can evolve without
 * touching theme files.
 *
 * Class contract (must match markup in class-shortcodes.php):
 *   .eos-access-card               outer panel
 *     .eos-access-card__head       label + title + lead
 *     .eos-access-card__form       <form>
 *       .eos-field                 field wrapper
 *         .eos-field__label
 *         .eos-field__wrap         (when an inline button sits in the input)
 *           .eos-field__input
 *           .eos-field__reveal     password reveal toggle (button)
 *       .eos-access-card__row      remember-email row
 *         .eos-checkbox
 *         .eos-access-card__forgot
 *       .eos-access-card__actions  primary action
 *         .eos-access-card__submit
 *       .eos-access-card__status
 *     .eos-badge-reader            badge strip (informational while dev)
 *
 * Vibe target: precise, private, professional. No "Sign in" anywhere —
 * the word is "Access".
 */


/* ===================================================================
 * CARD — refined static border, soft glass surface
 *
 * The border is intentionally static. An animated traveling-light
 * border was considered but rejected per spec: "If this becomes
 * visually cheesy, do not implement it. A static refined border is
 * better than a bad animated border." The current treatment uses a
 * 1 px strong-border base plus a faint 1 px inner highlight which
 * gives the card a precise machined edge without any motion.
 * =============================================================== */

.eos-access-card {
	width: 100%;
	max-width: 480px;
	padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.5rem, 3vw, 2.25rem);
	background: var(--eos-panel);
	border: 1px solid var(--eos-border);
	border-radius: var(--eos-radius);
	color: var(--eos-text);
	backdrop-filter: saturate(140%) blur(14px);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	box-shadow:
		0 0 0 1px var(--eos-border) inset,
		0 30px 80px -20px rgba(0, 0, 0, 0.45);
	animation: eos-access-card-in 480ms var(--eos-easing) both;
}
@keyframes eos-access-card-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.eos-access-card { animation: none; }
}

/* Head — ELINTRA OS label + Secure Access title + lead.
   Centered per spec so the intro feels balanced; form fields below
   stay left-aligned for normal input ergonomics. */
.eos-access-card__head {
	margin: 0 0 clamp(1.75rem, 3.2vw, 2.25rem);
	text-align: center;
}
.eos-access-card__label {
	margin: 0 0 var(--eos-space-3);
	font-family: var(--eos-font-mono);
	font-size: 0.6875rem;
	font-weight: var(--eos-weight-medium);
	letter-spacing: var(--eos-tracking-widest);
	text-transform: uppercase;
	color: var(--eos-text-muted);
}
.eos-access-card__label-accent {
	color: var(--eos-accent);
}
.eos-access-card__title {
	margin: 0 0 var(--eos-space-3);
	font-family: var(--eos-font-sans);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: var(--eos-weight-semibold);
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--eos-text);
}
.eos-access-card__lead {
	margin: 0 auto;
	max-width: 38ch;
	font-family: var(--eos-font-sans);
	font-size: var(--eos-text-sm);
	line-height: var(--eos-leading-relaxed);
	color: var(--eos-text-muted);
}


/* ===================================================================
 * FORM
 * =============================================================== */

.eos-access-card__form {
	display: grid;
	gap: var(--eos-space-5);
}

.eos-field {
	display: block;
}
.eos-field__label {
	display: block;
	margin: 0 0 var(--eos-space-2);
	font-family: var(--eos-font-mono);
	font-size: 0.75rem;
	font-weight: var(--eos-weight-medium);
	letter-spacing: var(--eos-tracking-wider);
	text-transform: uppercase;
	color: var(--eos-text-muted);
}
.eos-field__wrap {
	position: relative;
	display: block;
}
.eos-field__input {
	display: block;
	width: 100%;
	min-height: 52px;
	padding: 0.875rem 1rem;
	font-family: var(--eos-font-sans);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--eos-text);
	background: rgba(0, 0, 0, 0.55);
	border: 1px solid var(--eos-border-strong);
	border-radius: var(--eos-radius-sm);
	-webkit-appearance: none;
	appearance: none;
	transition:
		border-color var(--eos-duration-fast) var(--eos-easing),
		background-color var(--eos-duration-fast) var(--eos-easing),
		box-shadow var(--eos-duration-fast) var(--eos-easing);
}
.eos-field__input::placeholder {
	color: var(--eos-text-subtle);
	opacity: 1;
}
.eos-field__input:hover {
	border-color: #3a3a3a;
}
.eos-field__input:focus {
	outline: none;
	border-color: var(--eos-accent);
	background: rgba(0, 0, 0, 0.72);
	box-shadow: 0 0 0 3px rgba(240, 90, 40, 0.18);
}
.eos-field__input--with-reveal {
	padding-right: 3.25rem;
}

/* Defensive autofill overrides — keep the dark surface even when the
   browser tries to repaint with a pale yellow background. */
.eos-field__input:-webkit-autofill,
.eos-field__input:-webkit-autofill:hover,
.eos-field__input:-webkit-autofill:focus,
.eos-field__input:-webkit-autofill:active {
	-webkit-text-fill-color: var(--eos-text);
	-webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.55) inset;
	caret-color: var(--eos-text);
	transition: background-color 9999s ease-out 0s;
}

.eos-field__reveal {
	position: absolute;
	top: 50%;
	right: 0.5rem;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--eos-radius-sm);
	color: var(--eos-text-muted);
	cursor: pointer;
	transition: color var(--eos-duration-fast) var(--eos-easing);
}
.eos-field__reveal:hover,
.eos-field__reveal:focus {
	color: var(--eos-text);
	outline: none;
}
.eos-field__reveal:focus-visible {
	box-shadow: 0 0 0 2px rgba(240, 90, 40, 0.5);
}
/* Critical: only one icon is shown at a time. Without these two rules
   the markup paints both eye + crossed-eye stacked, which was the
   exact symptom shown in the screenshot. */
.eos-field__reveal-icon { display: block; }
.eos-field__reveal-icon--hide { display: none; }
.eos-field__reveal[aria-pressed="true"] .eos-field__reveal-icon--show { display: none; }
.eos-field__reveal[aria-pressed="true"] .eos-field__reveal-icon--hide { display: block; }


/* ===================================================================
 * LIGHT THEME — Access form fields
 *
 * Dark-theme inputs use a charcoal inset surface (rgba(0,0,0,0.55)).
 * Those rules are correct for dark mode but paint dark fields onto the
 * off-white Access card when [data-eos-theme="light"] is active.
 *
 * These overrides apply ONLY in light mode and ONLY to Access form
 * atoms (.eos-field__*, .eos-checkbox__*). Dark mode is untouched.
 * =============================================================== */

[data-eos-theme="light"] .eos-field__label {
	color: rgba(0, 0, 0, 0.62);
}

[data-eos-theme="light"] .eos-field__input {
	color: #111111;
	background: #F7F7F3;
	border-color: rgba(0, 0, 0, 0.14);
}

[data-eos-theme="light"] .eos-field__input::placeholder {
	color: rgba(0, 0, 0, 0.45);
}

[data-eos-theme="light"] .eos-field__input:hover {
	border-color: rgba(0, 0, 0, 0.22);
	background: #FAFAF7;
}

[data-eos-theme="light"] .eos-field__input:focus {
	color: #111111;
	background: #FAFAF7;
	border-color: #F05A28;
	box-shadow: 0 0 0 2px rgba(240, 90, 40, 0.14);
}

[data-eos-theme="light"] .eos-field__input:-webkit-autofill,
[data-eos-theme="light"] .eos-field__input:-webkit-autofill:hover,
[data-eos-theme="light"] .eos-field__input:-webkit-autofill:focus,
[data-eos-theme="light"] .eos-field__input:-webkit-autofill:active {
	-webkit-text-fill-color: #111111;
	-webkit-box-shadow: 0 0 0 1000px #F7F7F3 inset;
	caret-color: #111111;
}

[data-eos-theme="light"] .eos-field__reveal {
	color: rgba(0, 0, 0, 0.48);
}
[data-eos-theme="light"] .eos-field__reveal:hover,
[data-eos-theme="light"] .eos-field__reveal:focus {
	color: rgba(0, 0, 0, 0.72);
}
[data-eos-theme="light"] .eos-field__reveal:focus-visible {
	box-shadow: 0 0 0 2px rgba(240, 90, 40, 0.28);
}

[data-eos-theme="light"] .eos-checkbox__box {
	background: #F7F7F3;
	border-color: rgba(0, 0, 0, 0.14);
}
[data-eos-theme="light"] .eos-checkbox input:checked + .eos-checkbox__box {
	background: #F7F7F3;
	border-color: #F05A28;
}
[data-eos-theme="light"] .eos-checkbox input:checked + .eos-checkbox__box::after {
	background: #F05A28;
}
[data-eos-theme="light"] .eos-checkbox input:focus-visible + .eos-checkbox__box {
	box-shadow: 0 0 0 2px rgba(240, 90, 40, 0.18);
}


/* ===================================================================
 * REMEMBER EMAIL + FORGOT PASSWORD ROW
 * =============================================================== */

.eos-access-card__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--eos-space-4);
	flex-wrap: wrap;
	margin: calc(var(--eos-space-5) * -1 + var(--eos-space-2)) 0 0;
}

.eos-checkbox {
	display: inline-flex;
	align-items: center;
	gap: var(--eos-space-2);
	cursor: pointer;
	user-select: none;
	color: var(--eos-text);
}
.eos-checkbox input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}
.eos-checkbox__box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	background: rgba(0, 0, 0, 0.55);
	border: 1px solid var(--eos-border-strong);
	border-radius: 3px;
	transition:
		background-color var(--eos-duration-fast) var(--eos-easing),
		border-color var(--eos-duration-fast) var(--eos-easing);
}
.eos-checkbox__box::after {
	content: "";
	width: 8px;
	height: 8px;
	background: var(--eos-accent);
	border-radius: 1px;
	transform: scale(0);
	transition: transform var(--eos-duration-base) var(--eos-easing);
}
.eos-checkbox input:checked + .eos-checkbox__box {
	border-color: var(--eos-accent);
}
.eos-checkbox input:checked + .eos-checkbox__box::after {
	transform: scale(1);
}
.eos-checkbox input:focus-visible + .eos-checkbox__box {
	box-shadow: 0 0 0 3px rgba(240, 90, 40, 0.25);
}
.eos-checkbox__label {
	font-family: var(--eos-font-sans);
	font-size: 0.9375rem;
	color: var(--eos-text);
}

.eos-access-card__forgot {
	font-family: var(--eos-font-sans);
	font-size: 0.9375rem;
	color: var(--eos-accent);
	text-decoration: none;
	transition: color var(--eos-duration-fast) var(--eos-easing);
}
.eos-access-card__forgot:hover,
.eos-access-card__forgot:focus {
	color: var(--eos-accent-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
}


/* ===================================================================
 * PRIMARY ACCESS BUTTON
 * =============================================================== */

/* Refined Access button — centered, fixed width, premium proportion.
   Spec: 240–280 px wide, 42–46 px tall, near-black text on orange,
   bold sans, restrained letter-spacing. The action wrapper centers
   the button so it never reads as a giant orange bar. */
.eos-access-card__actions {
	margin: 0;
	display: flex;
	justify-content: center;
}
.eos-access-card__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 260px;
	max-width: 100%;
	min-height: 44px;
	padding: 0 1.5rem;          /* 24 px */
	font-family: var(--eos-font-sans);
	font-size: 0.8125rem;       /* 13 */
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #050505;
	background: var(--eos-accent);
	border: 1px solid var(--eos-accent);
	border-radius: var(--eos-radius-sm);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 8px 22px -12px rgba(240, 90, 40, 0.55);
	transition:
		background-color var(--eos-duration-fast) var(--eos-easing),
		border-color     var(--eos-duration-fast) var(--eos-easing),
		box-shadow       var(--eos-duration-fast) var(--eos-easing),
		transform        var(--eos-duration-fast) var(--eos-easing);
}
.eos-access-card__submit:hover:not(:disabled),
.eos-access-card__submit:focus:not(:disabled) {
	background: var(--eos-accent-hover);
	border-color: var(--eos-accent-hover);
	transform: translateY(-1px);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16) inset, 0 14px 30px -12px rgba(240, 90, 40, 0.7);
	outline: none;
}
.eos-access-card__submit:active:not(:disabled) {
	background: var(--eos-accent-press);
	border-color: var(--eos-accent-press);
	transform: translateY(0);
}
.eos-access-card__submit:focus-visible {
	box-shadow: 0 0 0 3px rgba(240, 90, 40, 0.35);
}
.eos-access-card__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}
.eos-access-card__submit-label {
	display: inline-block;
}
.eos-access-card__submit-arrow {
	display: inline-block;
	font-family: var(--eos-font-sans);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1;
	transition: transform var(--eos-duration-base) var(--eos-easing);
}
.eos-access-card__submit:hover:not(:disabled) .eos-access-card__submit-arrow,
.eos-access-card__submit:focus:not(:disabled) .eos-access-card__submit-arrow {
	transform: translateX(3px);
}

.eos-access-card__status {
	margin: 0;
	min-height: 1.25em;
	font-family: var(--eos-font-mono);
	font-size: 0.75rem;
	letter-spacing: var(--eos-tracking-wide);
	color: var(--eos-text-muted);
}
.eos-access-card__status[data-state="error"]   { color: var(--eos-danger); }
.eos-access-card__status[data-state="success"] { color: var(--eos-success); }
.eos-access-card__status[data-state="busy"]    { color: var(--eos-text-muted); }

/* Forgot- and set-password forms (auth-forms.js) use class-based state
 * markers instead of data-state attributes so the same status element
 * can communicate both the message and the visual treatment without a
 * second swap. */
.eos-access-card__status--err { color: var(--eos-danger);  }
.eos-access-card__status--ok  { color: var(--eos-success); }

/* Variant card for the new Forgot / Set Password flows. The base
 * .eos-access-card already supplies the surface; this modifier just
 * relaxes the centered/single-action layout to allow the secondary
 * "Back to sign in" link beneath the form. */
.eos-access-card--auth .eos-access-card__row--center {
	margin-top: 14px;
	text-align: center;
}
.eos-access-card--auth .eos-access-card__row--center a {
	color: var(--eos-text-muted);
	font-family: var(--eos-font-mono);
	font-size: 0.75rem;
	letter-spacing: var(--eos-tracking-wide);
}
.eos-access-card--auth .eos-access-card__row--center a:hover,
.eos-access-card--auth .eos-access-card__row--center a:focus-visible {
	color: var(--eos-accent);
}


/* ===================================================================
 * BADGE READER — single-line capability indicator.
 *
 * Spec contract (this pass):
 *   - One row only: icon + "Badge reader" text.
 *   - No second line of status copy.
 *   - No box, no border around the row, no background fill.
 *   - Hairline separator above the row to visually attach it to
 *     the Access button without adding weight.
 *   - State is communicated entirely by icon behavior:
 *       dev      → slow 3 s white→orange pulse (inactive / unavailable)
 *       ready    → solid orange (active, listening)
 *       offline  → muted gray, no animation
 *
 * Animation is color-only. No scaling. Reduced motion disables the
 * pulse and locks the icon to a calm resting color.
 * =============================================================== */

.eos-badge-reader__capture {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.eos-badge-reader {
	cursor: default;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: var(--eos-space-5) 0 0;
	padding: var(--eos-space-4) 0 0;
	background: transparent;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 0;
	transition: background 160ms ease, border-color 160ms ease;
}
.eos-badge-reader__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	color: var(--eos-accent);
	transition: color 160ms ease;
}
.eos-badge-reader__icon svg {
	width: 18px;
	height: 18px;
	display: block;
}
.eos-badge-reader__label {
	margin: 0;
	font-family: var(--eos-font-sans);
	font-size: 0.8125rem;
	font-weight: var(--eos-weight-semibold);
	letter-spacing: 0;
	text-transform: none;
	color: var(--eos-text);
	line-height: 1.25;
}

/* ---------------------------------------------------------------------
 * Badge reader state model (employee-facing):
 *
 * The reader is ALWAYS listening — access.js watches globally for the rapid
 * keystroke burst a wedge reader emits, so an employee just scans. No click,
 * no "activate" step. The visual states are therefore:
 *
 *   INITIALIZING (pre-JS)    → orange PULSE. Script not yet listening.
 *   READY (listening)        → SOLID orange with a soft glow. Scan anytime.
 *   OFFLINE                  → muted gray, no animation. Reader unreachable.
 *
 * access.js sets [data-badge-scan-active="true"] as soon as the global
 * listener is armed, flipping the icon from pulse to the solid "ready" glow.
 * "Offline" is driven by the server-set [data-badge-state="offline"].
 * ------------------------------------------------------------------- */

/* Initializing — pulse until the listener is armed. */
.eos-badge-reader__icon {
	animation: eos-badge-pulse 2.4s ease-in-out infinite;
}

/* Ready / listening — solid orange with a soft luminous glow. */
.eos-access-card[data-badge-scan-active="true"] .eos-badge-reader__icon {
	color: var(--eos-accent);
	animation: none;
	filter: drop-shadow(0 0 6px rgba(240, 90, 40, 0.55));
}
.eos-access-card[data-badge-scan-active="true"] .eos-badge-reader {
	border-color: rgba(240, 90, 40, 0.35);
	background: rgba(240, 90, 40, 0.05);
}

/* Offline — reader unreachable, no activity. */
.eos-access-card[data-badge-state="offline"] .eos-badge-reader__icon {
	color: var(--eos-text-subtle);
	animation: none;
	filter: none;
}

@keyframes eos-badge-pulse {
	0%, 100% { color: rgba(240, 90, 40, 0.45); }
	50%      { color: var(--eos-accent); }
}
@media (prefers-reduced-motion: reduce) {
	.eos-badge-reader__icon {
		animation: none;
		color: var(--eos-accent);
	}
}


/* ===================================================================
 * ALREADY-AUTHENTICATED VARIANT
 * =============================================================== */

.eos-access-card--already {
	text-align: left;
}
.eos-access-card--already .eos-link {
	color: var(--eos-accent);
	text-decoration: none;
}
.eos-access-card--already .eos-link:hover,
.eos-access-card--already .eos-link:focus {
	color: var(--eos-accent-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
}


/* ===================================================================
 * CONSOLE IDENTITY PANEL (rendered by [elintra_console]) — temporary
 * Delivery 4 styling. Full console UI lands in Delivery 5.
 * =============================================================== */

.eos-console-gate,
.eos-console-shell {
	max-width: 760px;
	margin: clamp(4rem, 10vw, 8rem) auto;
	padding: var(--eos-space-7);
	border: 1px solid var(--eos-border);
	border-radius: var(--eos-radius);
	background: var(--eos-surface);
	color: var(--eos-text);
}
.eos-console-gate .eos-meta,
.eos-console-shell .eos-meta {
	display: block;
	margin-bottom: var(--eos-space-3);
	font-family: var(--eos-font-mono);
	font-size: 0.75rem;
	letter-spacing: var(--eos-tracking-widest);
	text-transform: uppercase;
	color: var(--eos-text-muted);
}
.eos-console-shell__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--eos-space-5);
	margin-bottom: var(--eos-space-7);
}
.eos-console-shell__panel {
	padding: var(--eos-space-5) 0;
	border-top: 1px solid var(--eos-border);
}
.eos-console-shell__panel h2 {
	font-family: var(--eos-font-sans);
	font-size: var(--eos-text-lg);
	font-weight: var(--eos-weight-semibold);
	margin: 0 0 var(--eos-space-4);
}
.eos-kv {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: var(--eos-space-3) var(--eos-space-5);
	margin: 0;
}
.eos-kv dt {
	font-family: var(--eos-font-mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: var(--eos-tracking-wider);
	color: var(--eos-text-muted);
}
.eos-kv dd { margin: 0; color: var(--eos-text); }
.eos-permission-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--eos-space-2);
}
.eos-permission-list li {
	padding: var(--eos-space-2) var(--eos-space-3);
	background: var(--eos-panel);
	border: 1px solid var(--eos-border);
	border-radius: var(--eos-radius-sm);
	font-family: var(--eos-font-mono);
	font-size: 0.75rem;
}
.eos-console-shell__notice {
	margin-top: var(--eos-space-6);
	font-family: var(--eos-font-mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: var(--eos-tracking-wider);
	color: var(--eos-text-subtle);
}

/* Module placeholders */
.eos-module-placeholder {
	max-width: 600px;
	margin: clamp(4rem, 8vw, 6rem) auto;
	padding: var(--eos-space-7);
	border: 1px solid var(--eos-border);
	border-radius: var(--eos-radius);
	background: var(--eos-surface);
	text-align: center;
	color: var(--eos-text);
}
.eos-module-placeholder .eos-meta {
	display: block;
	margin-bottom: var(--eos-space-3);
	font-family: var(--eos-font-mono);
	font-size: 0.75rem;
	letter-spacing: var(--eos-tracking-widest);
	text-transform: uppercase;
	color: var(--eos-text-muted);
}


.eos-access-card__notice {
	margin: 12px 0 0;
	padding: 10px 12px;
	border-radius: 8px;
	border: 1px solid var(--eos-border);
	background: var(--eos-panel-elevated, var(--eos-surface-2));
	font-size: 0.86rem;
	color: var(--eos-text-muted);
	text-align: left;
}

/* ===================================================================
 * REDUCED MOTION
 * =============================================================== */
@media (prefers-reduced-motion: reduce) {
	.eos-access-card__submit,
	.eos-access-card__submit-arrow,
	.eos-checkbox__box::after,
	.eos-field__input { transition: none; }
}