@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

/* ─── Design Tokens ────────────────────────────────────────────── */
:root {
	--red: #ff0000;
	--burgundy: #800031;
	--dark-bg: #0a0a0a;
	--card-bg: #111111;
	--card-border: #1e1e1e;
	--row-border: #181818;
	--text-primary: #ffffff;
	--text-secondary: rgba(255, 255, 255, 0.55);
	--text-muted: rgba(255, 255, 255, 0.3);
	--green: #00d26a;
	--yellow: #f5a623;
	--gradient: linear-gradient(135deg, var(--burgundy), var(--red));
	--radius: 16px;
	--radius-sm: 8px;

	/* Aliases used by inline JS-generated styles */
	--color-green: var(--green);
	--color-red: var(--red);
	--color-text-muted: var(--text-muted);
}

/* ─── Reset & Base ─────────────────────────────────────────────── */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* ─── Dark scrollbars ──────────────────────────────────────────────
   Match the dark theme app-wide. Without this, scrollbars (e.g. the
   Courses & Codes list) fall back to the browser's light default, which
   reads as white/light-gray against the near-black UI. */
* {
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
::-webkit-scrollbar-track {
	background: transparent;
}
::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.18);
	border-radius: 6px;
	border: 2px solid var(--dark-bg);
}
::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.3);
}
::-webkit-scrollbar-corner {
	background: transparent;
}

html {
	font-size: 16px;
	line-height: 1.5;
}

body {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
	background: var(--dark-bg);
	color: var(--text-primary);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ─── Top Accent Bar ───────────────────────────────────────────── */
.top-accent {
	height: 2px;
	background: var(--gradient);
	flex-shrink: 0;
}

/* ─── Navbar ───────────────────────────────────────────────────── */
.navbar {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(10, 10, 10, 0.85);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--card-border);
	padding: 16px 0;
	flex-shrink: 0;
}

.navbar-inner {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.nav-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--text-primary);
}

.nav-logo-img {
	height: 22px;
	width: auto;
}

.nav-divider {
	width: 1px;
	height: 20px;
	background: var(--card-border);
}

.nav-title {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--text-secondary);
	letter-spacing: 0.02em;
}

.env-badge {
	font-size: 0.6875rem;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 100px;
	background: var(--gradient);
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* ─── Rise8 Staff Navbar Login (ImpactLab only) ────────────────── */
.nav-staff-login {
	font-size: 0.75rem;
	font-weight: 500;
	padding: 4px 10px;
	border-radius: var(--radius-sm);
	background: none;
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: var(--text-secondary);
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
	white-space: nowrap;
}

.nav-staff-login:hover {
	border-color: rgba(255, 255, 255, 0.4);
	color: var(--text-primary);
}

/* ─── Navbar Layout Groups ─────────────────────────────────────── */
.nav-left,
.nav-right {
	display: flex;
	align-items: center;
	gap: 12px;
	position: relative;
}

/* ─── Hamburger Button ─────────────────────────────────────────── */
.nav-hamburger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 32px;
	height: 32px;
	padding: 6px;
	background: none;
	border: 1px solid var(--card-border);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background 0.15s ease;
}

.nav-hamburger:hover {
	background: rgba(255, 255, 255, 0.08);
}

.hamburger-bar {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--text-secondary);
	border-radius: 1px;
}

/* ─── Avatar Button ────────────────────────────────────────────── */
.nav-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: none;
	background: #ffffff;
	color: #e74c3c;
	font-size: 0.8125rem;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	transition: opacity 0.15s ease;
	line-height: 1;
}

.nav-avatar:hover {
	opacity: 0.85;
}

/* ─── Navbar Dropdowns ─────────────────────────────────────────── */
.nav-dropdown {
	position: absolute;
	left: 0;
	top: 100%;
	margin-top: 8px;
	min-width: 200px;
	max-width: 280px;
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-sm);
	padding: 8px 0;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
	z-index: 200;
}

.nav-user-dropdown {
	left: auto;
	right: 0;
}

.nav-dropdown-section {
	padding: 8px 16px 4px;
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.nav-dropdown-item {
	display: block;
	padding: 8px 16px;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--text-secondary);
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
	border: none;
	background: none;
	width: 100%;
	text-align: left;
	font-family: inherit;
}

.nav-dropdown-item:hover {
	background: rgba(255, 255, 255, 0.06);
	color: var(--text-primary);
}

a.nav-dropdown-item:hover {
	text-decoration: none;
}

.nav-dropdown-divider {
	height: 1px;
	margin: 6px 0;
	background: var(--card-border);
}

.nav-signout-btn {
	color: var(--red);
}

.nav-signout-btn:hover {
	color: #ff4444;
	background: rgba(255, 0, 0, 0.06);
}

.nav-user-name {
	padding: 8px 16px 2px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text-primary);
}

.nav-user-email {
	padding: 2px 16px 8px;
	font-size: 0.75rem;
	color: var(--text-muted);
}

.nav-about-info {
	cursor: default;
	color: var(--text-muted);
	font-size: 0.75rem;
}

.nav-about-info:hover {
	background: none;
	color: var(--text-muted);
}

/* Dropdown responsive */
@media (max-width: 480px) {
	.nav-dropdown {
		position: fixed;
		left: 12px;
		right: 12px;
		max-width: none;
	}
}

/* ─── Main Layout ──────────────────────────────────────────────── */
.main-content {
	flex: 1;
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
	padding: 32px 20px 48px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* ─── Cards ────────────────────────────────────────────────────── */
.card {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: var(--radius);
	overflow: hidden;
	transition: border-color 0.2s ease;
}

.card:hover {
	border-color: #2a2a2a;
}

.card h2 {
	padding: 18px 24px;
	border-bottom: 1px solid var(--card-border);
	font-weight: 600;
	font-size: 0.75rem;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* Card body padding wrapper for form content */
.card > form,
.card > div:not(.claims-table-wrapper):not(.claim-status):not(.user-info) {
	padding: 24px;
}

/* Fallback: direct children that are not headings, tables, or wrappers */
.card > .form-group {
	padding: 24px;
}

/* ─── Forms ────────────────────────────────────────────────────── */
form {
	padding: 24px;
}

/* Sign-in note sits inside form, no extra padding needed */
.signin-note {
	font-size: 0.8125rem;
	color: var(--text-muted);
	margin-top: 0.75rem;
}

.form-group {
	margin-bottom: 1rem;
}

.form-group label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	margin-bottom: 0.375rem;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.form-group input[type="text"],
.form-group input[type="email"] {
	width: 100%;
	padding: 0.625rem 0.75rem;
	font-size: 0.9375rem;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
	border: 1px solid var(--card-border);
	border-radius: var(--radius-sm);
	background: var(--dark-bg);
	color: var(--text-primary);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-group input[type="text"]::placeholder,
.form-group input[type="email"]::placeholder {
	color: var(--text-muted);
}

.form-group input:focus {
	outline: none;
	border-color: var(--burgundy);
	box-shadow: 0 0 0 3px rgba(128, 0, 49, 0.25);
}

.form-group input.input-error {
	border-color: var(--red);
	box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.15);
}

.form-group input.input-success {
	border-color: var(--green);
	box-shadow: 0 0 0 3px rgba(0, 210, 106, 0.15);
}

.validation-msg {
	font-size: 0.8125rem;
	margin-top: 0.375rem;
	min-height: 1.25rem;
	color: var(--text-muted);
}

.validation-msg.error {
	color: var(--red);
}

.validation-msg.success {
	color: var(--green);
}

.subdomain-preview {
	font-size: 0.8125rem;
	color: var(--text-muted);
	margin-top: 0.25rem;
	font-variant-numeric: tabular-nums;
}

/* ─── Buttons ──────────────────────────────────────────────────── */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.625rem 1.25rem;
	font-size: 0.9375rem;
	font-weight: 600;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
	border: none;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: opacity 0.15s ease, filter 0.15s ease;
	letter-spacing: 0.01em;
}

.btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.btn-primary {
	background: var(--gradient);
	color: #ffffff;
}

.btn-primary:hover:not(:disabled) {
	filter: brightness(1.15);
}

.btn-secondary {
	background: #1a1a1a;
	color: var(--text-secondary);
	border: 1px solid var(--card-border);
}

.btn-secondary:hover:not(:disabled) {
	background: #222222;
	border-color: #2a2a2a;
	color: var(--text-primary);
}

.btn-danger {
	background: var(--red);
	color: #ffffff;
}

.btn-danger:hover:not(:disabled) {
	filter: brightness(0.85);
}

.btn-release {
	background: transparent;
	color: var(--text-secondary);
	border: 1px solid var(--card-border);
}

.btn-release:hover:not(:disabled) {
	background: rgba(255, 0, 0, 0.1);
	border-color: var(--red);
	color: var(--red);
}

.btn-sm {
	padding: 0.375rem 0.75rem;
	font-size: 0.8125rem;
}

.btn-block {
	width: 100%;
}

/* ─── User Info Bar ────────────────────────────────────────────── */
.user-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 14px 24px;
	background: rgba(0, 210, 106, 0.07);
	border: 1px solid rgba(0, 210, 106, 0.2);
	border-radius: var(--radius);
	transition: border-color 0.2s ease;
}

.user-info .user-detail {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--green);
}

/* ─── Claims Directory: Owner + Status Dot ─────────────────────── */
.claim-name-with-dot {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.claim-status-dot {
	width: 8px;
	height: 8px;
	flex-shrink: 0;
}

.claim-owner {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.claim-owner-name {
	font-weight: 500;
}

.claim-owner-email {
	font-size: 0.75rem;
	color: var(--text-muted);
}

/* ─── Status Badges ────────────────────────────────────────────── */
.badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.25rem 0.625rem;
	font-size: 0.75rem;
	font-weight: 600;
	border-radius: 9999px;
	white-space: nowrap;
}

.badge-creating {
	background: rgba(245, 166, 35, 0.15);
	color: var(--yellow);
}

.badge-ready {
	background: rgba(0, 210, 106, 0.12);
	color: var(--green);
}

.badge-failed {
	background: rgba(255, 0, 0, 0.12);
	color: var(--red);
}

.badge-deleted {
	background: rgba(255, 255, 255, 0.06);
	color: var(--text-muted);
}

/* ─── Spinner ──────────────────────────────────────────────────── */
.spinner {
	display: inline-block;
	width: 0.75rem;
	height: 0.75rem;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: spin 0.75s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* ─── Claims Directory Table ───────────────────────────────────── */
.claims-table-wrapper {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.claims-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.claims-table th {
	padding: 14px 24px;
	text-align: left;
	border-bottom: 1px solid var(--card-border);
	font-weight: 600;
	color: var(--text-muted);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.claims-table td {
	padding: 14px 24px;
	text-align: left;
	border-bottom: 1px solid var(--row-border);
	color: var(--text-secondary);
	font-size: 0.9375rem;
	transition: background 0.15s ease;
}

.claims-table td:first-child {
	color: var(--text-primary);
	font-weight: 500;
}

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

.claims-table tbody tr:hover td {
	background: rgba(255, 255, 255, 0.02);
}

.claims-table a {
	color: var(--text-secondary);
	text-decoration: none;
	transition: color 0.15s ease;
}

.claims-table a:hover {
	color: var(--text-primary);
	text-decoration: underline;
}

.empty-state {
	text-align: center;
	padding: 2rem 1rem;
	color: var(--text-muted);
}

/* ─── Claim Status Card ────────────────────────────────────────── */
.claim-status {
	text-align: center;
	padding: 2rem 24px;
}

.claim-status .status-icon {
	font-size: 2rem;
	margin-bottom: 0.5rem;
}

.claim-status .status-text {
	font-size: 1.125rem;
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.claim-status .status-detail {
	color: var(--text-muted);
	font-size: 0.875rem;
}

.claim-status .claim-url {
	display: inline-block;
	margin-top: 0.75rem;
	color: var(--text-secondary);
	text-decoration: none;
	font-weight: 600;
	transition: color 0.15s ease;
}

.claim-status .claim-url:hover {
	color: var(--text-primary);
	text-decoration: underline;
}

/* ─── Footer ───────────────────────────────────────────────────── */
.site-footer {
	background: var(--card-bg);
	border-top: 1px solid var(--card-border);
	padding: 1rem 20px;
	text-align: center;
	font-size: 0.8125rem;
	color: var(--text-muted);
}

.capacity-bar {
	max-width: 20rem;
	margin: 0.5rem auto 0;
	height: 0.375rem;
	background: var(--card-border);
	border-radius: 9999px;
	overflow: hidden;
}

.capacity-bar-fill {
	height: 100%;
	background: var(--gradient);
	border-radius: 9999px;
	transition: width 0.3s ease;
}

/* ─── Portal Workspace Dashboard ──────────────────────────────── */
.portal-loading {
	padding: 2rem 24px;
	text-align: center;
	color: var(--text-muted);
}

.portal-empty {
	padding: 2rem 24px;
	text-align: center;
}

.portal-empty-msg {
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.portal-empty-hint {
	color: var(--text-muted);
	font-size: 0.875rem;
	margin-bottom: 1.5rem;
}

.workspace-list {
	padding: 16px 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.workspace-card {
	background: var(--dark-bg);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-sm);
	padding: 16px;
	transition: border-color 0.2s ease;
}

.workspace-card:hover {
	border-color: #2a2a2a;
}

.workspace-card-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

.workspace-name {
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-primary);
}

.tool-links {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.tool-link {
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.875rem;
	font-size: 0.8125rem;
	font-weight: 600;
	border-radius: var(--radius-sm);
	background: rgba(255, 255, 255, 0.06);
	color: var(--text-secondary);
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

a.tool-link:hover {
	background: rgba(255, 255, 255, 0.1);
	color: var(--text-primary);
}

.tool-link-disabled {
	opacity: 0.35;
	cursor: not-allowed;
	pointer-events: none;
}

.workspace-card-footer {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--card-border);
	display: flex;
	gap: 8px;
	align-items: center;
}

/* ─── Provisioning Status Dots (bd-3994c2) ────────────────────── */
.provisioning-dots {
	display: flex;
	gap: 16px;
	margin: 8px 0 4px;
	margin-left: auto;
}

.prov-dot-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.prov-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	transition: background 0.3s ease, box-shadow 0.3s ease;
}

.prov-dot-pending {
	background: rgba(255, 255, 255, 0.15);
}

.prov-dot-in-progress {
	background: var(--yellow);
	animation: pulse-dot 1.4s ease-in-out infinite;
}

.prov-dot-created {
	background: var(--green);
}

.prov-dot-failed {
	background: var(--red);
}

@keyframes pulse-dot {
	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.5);
		opacity: 1;
	}
	50% {
		box-shadow: 0 0 0 6px rgba(245, 166, 35, 0);
		opacity: 0.7;
	}
}

.prov-dot-label {
	font-size: 0.625rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-muted);
}

/* ─── Toast Notifications (bd-7cf239) ─────────────────────────── */
.toast-notification {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	background: var(--green);
	color: #000;
	padding: 12px 24px;
	border-radius: 8px;
	font-size: 0.9rem;
	font-weight: 600;
	opacity: 0;
	transition: opacity 0.3s ease, transform 0.3s ease;
	z-index: 9999;
	pointer-events: none;
}

.toast-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* ─── Product Logo ─────────────────────────────────────────────── */
.product-logo-container {
	text-align: center;
	padding: 24px 20px 0;
}

.product-logo {
	max-width: 280px;
	max-height: 80px;
	width: auto;
	height: auto;
}

/* "Powered by CODER" branding — sits directly under the product logo. */
.coder-branding {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 20px 0;
}

.coder-branding-text {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.coder-branding-logo {
	height: 15px;
	width: auto;
	display: block;
	opacity: 0.85;
}

/* ─── Utility ──────────────────────────────────────────────────── */
.hidden {
	display: none !important;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* ─── Responsive (mobile breakpoint removed per UX requirements) ─ */

/* ─── Google Sign-In ───────────────────────────────────────────── */
#google-signin-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding: 24px;
}

#google-fallback-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding: 24px;
}

.btn-google {
	gap: 0.625rem;
}

.btn-google .google-icon {
	flex-shrink: 0;
}

.signin-fallback-msg {
	font-size: 0.8125rem;
	color: var(--text-muted);
}

/* ─── Auth Forms (dual-path Cognito login) ─────────────────────── */
.auth-form {
	max-width: 360px;
	margin: 0 auto;
}
.auth-form input {
	width: 100%;
	padding: 10px;
	margin: 8px 0;
	border: 1px solid #444;
	border-radius: 4px;
	background: #1a1a1a;
	color: #fff;
	box-sizing: border-box;
}
.auth-form button[type="submit"] {
	width: 100%;
	padding: 10px;
	margin: 8px 0;
}
.auth-divider {
	display: flex;
	align-items: center;
	margin: 16px 0;
	color: #888;
}
.auth-divider::before,
.auth-divider::after {
	content: "";
	flex: 1;
	border-bottom: 1px solid #444;
}
.auth-divider span {
	padding: 0 12px;
}
.auth-links {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin: 12px 0;
}
.auth-links a {
	color: #e53935;
	text-decoration: none;
	font-size: 13px;
}
.error-msg {
	color: #e53935;
	margin: 8px 0;
	font-size: 13px;
}

/* ─── Sign-in Stacked Layout (bd-6950d6 layout) ──────────────── */
/*
 * The sign-in card stacks its two sections vertically at ALL widths:
 *   top    — credentials (Google button + email/password form + links)
 *   bottom — Access Code gate (ImpactLab PSK only, hidden by default)
 *
 * Both sections share a single centered column (same max-width) so they
 * align cleanly. The Access Code section carries a top-border divider
 * that separates it from the credentials above. Because the divider
 * lives on the Access Code section itself, it disappears together with
 * the section when the PSK gate is inactive (.hidden) — no dangling
 * divider and no empty space left behind.
 */
.signin-columns {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	max-width: 420px;
	margin-left: auto;
	margin-right: auto;
}

.signin-credentials-col {
	min-width: 0;
}

/* Access Code section — hidden by default (.hidden class on the element).
   When visible it stacks below the credentials section at full width. */
.signin-access-code-col {
	width: 100%;
}

/* ─── Access Code Gate (ImpactLab PSK, bd-90ee3e) ────────────── */
.auth-event-code-group {
	max-width: 360px;
	margin: 0 auto 1.5rem;
	padding: 1.25rem 1.5rem;
	background: transparent;
	border: 1px solid var(--card-border);
	border-radius: var(--radius-sm);
	text-align: center;
}

/* When rendered as the access-code section inside .signin-columns, drop the
   standalone box and replace it with a top-border divider that separates the
   Access Code section from the Sign In section above. The divider lives on
   this section, so it vanishes with the section when the PSK gate is hidden. */
.signin-columns .signin-access-code-col.auth-event-code-group {
	margin: 0;
	border: none;
	border-top: 1px solid var(--card-border);
	border-radius: 0;
	max-width: none;
	padding: 1.5rem 0 0;
}
.auth-event-code-label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-primary);
	margin-bottom: 0.25rem;
}
.auth-event-code-hint {
	font-size: 0.8125rem;
	color: var(--text-secondary);
	margin-bottom: 0.75rem;
}
.auth-event-code-input {
	width: 100%;
	padding: 10px;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: normal;
	text-align: left;
	border: 1px solid #444;
	border-radius: 4px;
	background: #1a1a1a;
	color: #fff;
	box-sizing: border-box;
	transition: border-color 0.2s ease;
}
.auth-event-code-input::placeholder {
	color: var(--text-muted);
	font-weight: 400;
	letter-spacing: 0;
}
.auth-event-code-input:focus {
	outline: none;
	border-color: var(--red);
	box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.15);
}
.auth-event-code-group .validation-msg {
	text-align: center;
}
.mfa-secret-label {
	font-size: 13px;
	color: #888;
	margin: 8px 0 4px;
}
#mfa-secret-code {
	display: block;
	padding: 8px;
	background: #1a1a1a;
	border: 1px solid #444;
	border-radius: 4px;
	margin: 4px 0 12px;
	word-break: break-all;
	font-size: 12px;
}

/* ─── Workbench Status Badges (bd-0f48d4) ─────────────────────── */
.workbench-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.25rem 0.625rem;
	font-size: 0.6875rem;
	font-weight: 600;
	border-radius: 9999px;
	white-space: nowrap;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.workbench-status-running {
	background: rgba(0, 210, 106, 0.12);
	color: var(--green);
}

.workbench-status-stopped {
	background: rgba(255, 255, 255, 0.06);
	color: var(--text-muted);
}

.workbench-status-provisioning {
	background: rgba(245, 166, 35, 0.15);
	color: var(--yellow);
}

.workbench-status-error {
	background: rgba(255, 0, 0, 0.12);
	color: var(--red);
}

.workbench-status-unknown {
	background: rgba(255, 255, 255, 0.06);
	color: var(--text-muted);
}

.workbench-status-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.workbench-status-provisioning .workbench-status-dot {
	animation: pulse-dot 1.4s ease-in-out infinite;
}

/* ─── Workbench Controls (bd-0f48d4) ──────────────────────────── */
.workbench-controls {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}

.workbench-primary-action {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 1rem;
	font-size: 0.8125rem;
	font-weight: 600;
	border-radius: var(--radius-sm);
	background: var(--gradient);
	color: #ffffff;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: filter 0.15s ease;
}

.workbench-primary-action:hover {
	filter: brightness(1.15);
	color: #ffffff;
	text-decoration: none;
}

.workbench-primary-action:disabled,
.workbench-primary-action.disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

.workspace-card-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.workspace-card-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

/* ─── Admin Workbench Management (bd-f327b7) ──────────────── */
.admin-ws-toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 16px 24px;
	border-bottom: 1px solid var(--card-border);
}

.admin-ws-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.25rem 0.625rem;
	font-size: 0.75rem;
	font-weight: 600;
	border-radius: 9999px;
	white-space: nowrap;
}

.admin-ws-status-running {
	background: rgba(0, 210, 106, 0.12);
	color: var(--green);
}

.admin-ws-status-stopped {
	background: rgba(255, 255, 255, 0.06);
	color: var(--text-muted);
}

.admin-ws-status-provisioning {
	background: rgba(245, 166, 35, 0.15);
	color: var(--yellow);
}

.admin-ws-status-error {
	background: rgba(255, 0, 0, 0.12);
	color: var(--red);
}

.admin-ws-type-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.2rem 0.5rem;
	font-size: 0.6875rem;
	font-weight: 600;
	border-radius: 4px;
	white-space: nowrap;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.admin-ws-type-floating {
	background: rgba(128, 0, 49, 0.15);
	color: #e06090;
}

.admin-ws-type-claim {
	background: rgba(255, 255, 255, 0.06);
	color: var(--text-secondary);
}

.admin-ws-actions {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}

.admin-ws-actions .btn {
	padding: 0.25rem 0.5rem;
	font-size: 0.75rem;
}

/* ─── Admin Floating Quick-Access Bar ──────────────────── */
.admin-quickaccess {
	background: var(--card-bg);
	border: 1px solid rgba(128, 0, 49, 0.3);
	border-radius: var(--radius);
	overflow: hidden;
}

.admin-quickaccess-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 24px;
	border-bottom: 1px solid var(--card-border);
}

.admin-quickaccess-title {
	font-size: 0.6875rem;
	font-weight: 600;
	color: #e06090;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.admin-quickaccess-content {
	padding: 12px 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.admin-quickaccess-card {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--dark-bg);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-sm);
	padding: 10px 14px;
	min-width: 0;
}

.admin-quickaccess-card:hover {
	border-color: #2a2a2a;
}

.admin-quickaccess-name {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 200px;
}

.admin-quickaccess-links {
	display: flex;
	gap: 6px;
	flex-shrink: 0;
}

.admin-quickaccess-links .btn {
	padding: 0.25rem 0.625rem;
	font-size: 0.75rem;
	text-decoration: none;
}

.admin-quickaccess-empty {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	color: var(--text-muted);
	font-size: 0.875rem;
}

/* Admin quick-access mobile breakpoint removed per UX requirements */

/* ─── Field tooltips (access-code admin form, bd-7c2f30) ─────────── */
/* An inline info affordance next to a field label. The full copy lives in the
 * native `title` attribute (hover + a11y) AND in a hidden .field-hint element so
 * it is discoverable without relying on hover alone. */
.field-tooltip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	margin-left: 5px;
	border-radius: 50%;
	border: 1px solid var(--text-muted);
	color: var(--text-secondary);
	font-size: 0.65rem;
	font-weight: 700;
	line-height: 1;
	cursor: help;
	vertical-align: middle;
	user-select: none;
}

.field-tooltip:hover,
.field-tooltip:focus {
	border-color: var(--text-secondary);
	color: var(--text-primary);
	outline: none;
}

.field-hint {
	display: block;
	margin: 2px 0 0;
	font-size: 0.75rem;
	line-height: 1.35;
	color: var(--text-muted);
}