/*
 * fm-pilot.css
 *
 * Layout for the self-service portal at /pilot/. Mirrors the
 * /control/ aesthetic (same container, header, dividers and dark
 * tokens) so the two pages feel like one product.
 */

html, body { background: #ffffff; }

.fm-pilot-body {
	margin: 0;
	padding: 0;
	color: var(--fm-text, #111);
	font-family: "Geist", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
	background: #ffffff;
	min-height: 100vh;
}

.fm-pilot {
	--fm-bg: #ffffff;
	--fm-bg-elev: #ffffff;
	--fm-line: #ececec;
	--fm-text: #111111;
	--fm-text-soft: #555555;
	--fm-text-mute: #8a8a8a;
	--fm-hover: #f6f6f6;
	--fm-status-done: #16a34a;
	--fm-status-done-bg: #ecfdf5;
	--fm-status-prog: #2563eb;
	--fm-status-prog-bg: #eff6ff;
	--fm-status-cancel: #dc2626;
	--fm-status-cancel-bg: #fef2f2;
	--fm-duration: 180ms;
	--fm-ease: cubic-bezier(.2,.7,.2,1);

	position: relative;
	max-width: 1180px;
	margin: 0 auto;
	/* Respect iPhone PWA safe-area insets so the header buttons and
	   sign-out aren't clipped by the rounded screen corners. */
	padding: max(32px, env(safe-area-inset-top, 0px) + 12px)
	         max(24px, env(safe-area-inset-right, 0px) + 8px)
	         max(80px, env(safe-area-inset-bottom, 0px) + 32px)
	         max(24px, env(safe-area-inset-left, 0px) + 8px);
	min-height: 100vh;
	box-sizing: border-box;
}

/* ---- Header (matches .fm-control__head) ---- */

.fm-pilot__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 40px;
	flex-wrap: wrap;
}
.fm-pilot__heading {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.fm-pilot__title {
	margin: 0;
	font-size: 40px;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--fm-text);
}
.fm-pilot__sub {
	font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 13px;
	color: var(--fm-text-mute);
}
.fm-pilot__operator-pill {
	display: inline-block;
	font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fm-status-prog);
	background: var(--fm-status-prog-bg);
	padding: 3px 8px;
	border-radius: 4px;
	margin-left: 8px;
	vertical-align: middle;
}
.fm-pilot__head-actions {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
/* Language + theme grouped so they can be relocated to a bottom bar on
   mobile while "Sign out" stays in the header. */
.fm-pilot__tools {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.fm-pilot__logout {
	font-size: 13px;
	color: var(--fm-text-soft);
	text-decoration: none;
	border: 1px solid #d4d4d6;
	border-radius: 6px;
	padding: 0 14px;
	height: 36px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	transition: color 120ms var(--fm-ease), border-color 120ms var(--fm-ease), background-color 120ms var(--fm-ease);
}
.fm-pilot__logout:hover {
	color: var(--fm-text);
	border-color: var(--fm-text-mute);
	background: var(--fm-hover);
}
.fm-pilot-body.fm-theme-dark .fm-pilot__logout { border-color: #2a2a2e; }

/* The notifications toggle reuses the generic .fm-toggle component in
   fm-public.css. Only the wrapper-level tweaks (header alignment +
   data-notify-state colours for denied/unsupported) live here. */
.fm-pilot__notify-switch {
	height: 36px;
}
.fm-pilot__notify-test {
	font-size: 12px;
	color: var(--fm-text-soft);
	background: transparent;
	border: 1px solid #d4d4d6;
	border-radius: 6px;
	padding: 0 10px;
	height: 28px;
	cursor: pointer;
	transition: color 120ms var(--fm-ease), border-color 120ms var(--fm-ease), background-color 120ms var(--fm-ease);
}
.fm-pilot__notify-test:hover {
	color: var(--fm-text);
	border-color: var(--fm-text-mute);
	background: var(--fm-hover);
}
.fm-pilot-body.fm-theme-dark .fm-pilot__notify-test { border-color: #2a2a2e; }

/* ---- Sections — hairline-separated like the schedule list ---- */

/* Top row holds "Your details" and "Your models" side-by-side on
   desktop, stacking on narrow screens. Each child section keeps its
   own hairline top border, and we use a vertical hairline between
   them so the row reads as one block. */
.fm-pilot__top-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 40px;
	border-top: 1px solid var(--fm-line);
}
.fm-pilot__top-row > .fm-pilot__section {
	border-top: 0;
	padding-top: 28px;
}
.fm-pilot__top-row > .fm-pilot__section--details {
	padding-right: 24px;
	border-right: 1px solid var(--fm-line);
}
.fm-pilot__right-stack {
	display: flex;
	flex-direction: column;
	padding-left: 24px;
}
.fm-pilot__right-stack > .fm-pilot__section {
	border-top: 0;
	padding: 28px 0;
}
.fm-pilot__right-stack > .fm-pilot__section + .fm-pilot__section {
	border-top: 1px solid var(--fm-line);
}
@media (max-width: 820px) {
	.fm-pilot__top-row {
		grid-template-columns: 1fr;
		column-gap: 0;
	}
	.fm-pilot__top-row > .fm-pilot__section--details {
		padding-right: 0;
		border-right: 0;
		border-bottom: 1px solid var(--fm-line);
		padding-bottom: 24px;
	}
	.fm-pilot__right-stack {
		padding-left: 0;
	}
}

/* My flights table — same hairline language as the public schedule
   but stripped down: time, model, action. */
.fm-pilot__flights-empty {
	color: var(--fm-text-mute);
	font-size: 14px;
	margin: 0;
}
.fm-pilot__flights-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.fm-pilot__flights-table th,
.fm-pilot__flights-table td {
	padding: 10px 8px;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid var(--fm-line);
}
.fm-pilot__flights-table th {
	font-weight: 500;
	color: var(--fm-text-mute);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.fm-pilot__flights-table tr:last-child td { border-bottom: 0; }
.fm-pilot__flights-cell--time {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	width: 64px;
	color: var(--fm-text);
}
.fm-pilot__flights-cell--model {
	color: var(--fm-text);
}
.fm-pilot__flights-cell--action {
	width: 56px;
	text-align: right;
}
.fm-pilot__flights-row--done .fm-pilot__flights-cell--time,
.fm-pilot__flights-row--done .fm-pilot__flights-cell--model {
	color: var(--fm-text-mute);
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}
.fm-pilot__flights-row--in_flight .fm-pilot__flights-cell--time,
.fm-pilot__flights-row--in_flight .fm-pilot__flights-cell--model {
	color: var(--fm-text);
	font-weight: 600;
}
.fm-pilot__flights-lock {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--fm-text-mute);
	cursor: help;
}
.fm-pilot__flights-tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 3px 9px;
	border-radius: 999px;
	white-space: nowrap;
	color: var(--fm-text-mute);
	background: transparent;
	border: 1px solid var(--fm-line);
	line-height: 1;
}
.fm-pilot__flights-tag--live {
	color: #b91c1c;
	border-color: rgba(185, 28, 28, 0.35);
	background: rgba(185, 28, 28, 0.08);
}
.fm-pilot__flights-tag-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #b91c1c;
	animation: fm-pilot-pulse 1.6s ease-in-out infinite;
}
@keyframes fm-pilot-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.45; transform: scale(0.85); }
}
.fm-pilot-body.fm-theme-dark .fm-pilot__flights-tag--live {
	color: #fca5a5;
	border-color: rgba(252, 165, 165, 0.4);
	background: rgba(252, 165, 165, 0.1);
}
.fm-pilot-body.fm-theme-dark .fm-pilot__flights-tag-dot {
	background: #fca5a5;
}

.fm-pilot__notify-block {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--fm-line);
	max-width: 720px;
}
.fm-pilot__notify-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 8px;
}
.fm-pilot__notify-title {
	font-size: 14px;
	font-weight: 600;
	margin: 0;
	color: var(--fm-text);
}
.fm-pilot__notify-help {
	font-size: 13px;
	color: var(--fm-text-soft);
	margin: 8px 0 0;
	line-height: 1.5;
}
.fm-pilot__notify-help--ios {
	color: var(--fm-text-mute);
	font-size: 12px;
}
/* "Pause notifications on all my devices" block — sits under the per-
   device toggle, with a subtle divider so the two switches read as a
   single notifications cluster. */
.fm-pilot__notify-mute {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px dashed var(--fm-line);
}
.fm-pilot__notify-mute-row {
	gap: 12px;
}
.fm-pilot__notify-help--mute {
	margin-top: 6px;
}
/* Surfaced when Notification.permission === 'denied': the toggle is
   disabled and there's no other on-page feedback otherwise. Styled
   as a soft warning so the pilot understands the fix is in the
   browser settings, not in this UI. */
.fm-pilot__notify-help--blocked {
	color: var(--fm-status-cancel, #dc2626);
	background: var(--fm-status-cancel-bg, #fef2f2);
	border-left: 3px solid var(--fm-status-cancel, #dc2626);
	padding: 10px 12px;
	border-radius: 4px;
	font-size: 13px;
}
.fm-pilot__notify-switch-label--sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
}

.fm-pilot__section {
	border-top: 1px solid var(--fm-line);
	padding: 28px 0 32px;
}
.fm-pilot__section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}
.fm-pilot__section-title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.005em;
	color: var(--fm-text);
}

/* ---- Self-form ---- */

.fm-pilot__form {
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: 100%;
}
/* Each row of the form is its own grid; keep them flush to the
   column edges so the form really fills the available space. */
.fm-pilot__form .fm-control__pilot-grid {
	width: 100%;
	box-sizing: border-box;
}
.fm-pilot__form .fm-control__field input,
.fm-pilot__form .fm-control__field select,
.fm-pilot__form .fm-control__field textarea {
	width: 100%;
	box-sizing: border-box;
}
.fm-pilot__form-actions {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 4px;
}
.fm-pilot__form-status {
	color: var(--fm-status-done);
	font-size: 13px;
}

/* ---- Model list — hairline rows like the schedule ---- */

.fm-pilot__model-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--fm-line);
}
.fm-pilot__model-row {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 16px;
	align-items: center;
	padding: 14px 4px 14px 12px;
	border-bottom: 1px solid var(--fm-line);
	transition: background-color 120ms var(--fm-ease);
}
.fm-pilot__model-row:last-child {
	border-bottom: 0;
}
.fm-pilot__model-row:hover {
	background: var(--fm-hover);
}
.fm-pilot__model-name {
	font-size: 14px;
	font-weight: 500;
	color: var(--fm-text);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.fm-pilot__model-actions {
	display: inline-flex;
	gap: 6px;
}
.fm-pilot__model-empty {
	padding: 24px 0;
	color: var(--fm-text-mute);
	font-size: 13px;
	border-bottom: 1px solid var(--fm-line);
}

/* ---- Login (centered card on a clean canvas) ---- */

.fm-pilot-body--login {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	padding: 24px;
	box-sizing: border-box;
}
.fm-pilot__login {
	width: 100%;
	max-width: 420px;
	margin: auto; /* centre the card; a footer sibling then sits at the bottom */
}
.fm-pilot__login-card {
	--fm-bg: #ffffff;
	--fm-line: #ececec;
	--fm-text: #111111;
	--fm-text-soft: #555555;
	--fm-text-mute: #8a8a8a;
	--fm-hover: #f6f6f6;
	--fm-status-prog: #2563eb;
	--fm-status-prog-bg: #eff6ff;
	--fm-status-cancel: #dc2626;
	--fm-status-cancel-bg: #fef2f2;
	--fm-ease: cubic-bezier(.2,.7,.2,1);

	background: var(--fm-bg);
	color: var(--fm-text);
	padding: 32px;
}
.fm-pilot__login-title {
	margin: 0 0 6px;
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -0.02em;
}
.fm-pilot__login-sub {
	margin: 0 0 24px;
	font-size: 13px;
	color: var(--fm-text-mute);
	font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
.fm-pilot__login-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.fm-pilot__login-form .fm-control__add-grid {
	grid-template-columns: 1fr 1fr;
}
.fm-pilot__login-form .fm-control__field {
	min-width: 0;
}
.fm-pilot__login-form .fm-control__field input {
	width: 100%;
	box-sizing: border-box;
}
.fm-pilot__login-form .fm-control__submit {
	margin-top: 4px;
}
.fm-pilot__login-remember {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--fm-text-soft);
}
.fm-pilot__login-remember input { width: 16px; height: 16px; }
.fm-pilot__login-hint {
	margin: 12px 0 0;
	font-size: 12px;
	color: var(--fm-text-mute);
}
.fm-pilot__login-link {
	color: var(--fm-status-prog);
	text-decoration: underline;
}
.fm-pilot__login-error {
	margin-bottom: 16px;
	padding: 10px 12px;
	background: var(--fm-status-cancel-bg);
	color: var(--fm-status-cancel);
	border-left: 3px solid var(--fm-status-cancel);
	border-radius: 6px;
	font-size: 13px;
}
.fm-pilot__login-notice {
	margin-bottom: 16px;
	padding: 10px 12px;
	background: var(--fm-status-prog-bg, #eef4ff);
	color: var(--fm-status-prog, #2e5fb7);
	border-left: 3px solid var(--fm-status-prog, #2e5fb7);
	border-radius: 6px;
	font-size: 13px;
}

/* ---- Dark mode (opt-in via body.fm-theme-dark, set by JS) ---- */

.fm-pilot-body.fm-theme-dark { background: #1b1b1a; }
.fm-pilot-body.fm-theme-dark .fm-pilot,
.fm-pilot-body.fm-theme-dark .fm-pilot__login-card {
	--fm-bg: #1b1b1a;
	--fm-bg-elev: #252523;
	--fm-line: #1f1f22;
	--fm-text: #f5f5f7;
	--fm-text-soft: #b8b8bd;
	--fm-text-mute: #6e6e75;
	--fm-hover: #161618;
	--fm-status-done: #4ade80;
	--fm-status-done-bg: rgba(74,222,128,0.10);
	--fm-status-prog: #60a5fa;
	--fm-status-prog-bg: rgba(96,165,250,0.12);
	--fm-status-cancel: #f87171;
	--fm-status-cancel-bg: rgba(248,113,113,0.10);
}

/* Dark mode for the embedded model dialog. */
.fm-pilot-body.fm-theme-dark .fm-control__settings,
.fm-pilot-body.fm-theme-dark .fm-control__settings-form {
	--fm-bg: #1b1b1a;
	--fm-bg-elev: #252523;
	--fm-line: #1f1f22;
	--fm-text: #f5f5f7;
	--fm-text-soft: #b8b8bd;
	--fm-text-mute: #6e6e75;
	--fm-hover: #161618;
	--fm-status-prog: #60a5fa;
	--fm-status-prog-bg: rgba(96,165,250,0.12);
	--fm-status-cancel: #f87171;
	--fm-status-cancel-bg: rgba(248,113,113,0.10);
}
.fm-pilot-body.fm-theme-dark .fm-control__settings-form {
	background: #252523;
	color: #f5f5f7;
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}
.fm-pilot-body.fm-theme-dark .fm-control__settings::backdrop {
	background: rgba(0, 0, 0, 0.75);
}
.fm-pilot-body.fm-theme-dark .fm-control__field input,
.fm-pilot-body.fm-theme-dark .fm-control__field select,
.fm-pilot-body.fm-theme-dark .fm-control__field textarea {
	background-color: #252523;
	color: #f5f5f7;
	border-color: #2a2a2e;
	color-scheme: dark;
}

/* ---- Mobile ---- */

@media (max-width: 820px) {
	.fm-pilot {
		padding: max(20px, env(safe-area-inset-top, 0px) + 8px)
		         max(16px, env(safe-area-inset-right, 0px) + 8px)
		         max(80px, env(safe-area-inset-bottom, 0px) + 32px)
		         max(16px, env(safe-area-inset-left, 0px) + 8px);
	}
	/* Clear the fixed cross-portal top bar (always present once signed in). */
	.fm-pilot:has( > .fm-schedule__foot--bar ) {
		padding-top: calc(env(safe-area-inset-top, 0px) + 56px);
	}
	/* Same clearance on the login views when a signed-in (wrong-role)
	   visitor lands there and the footer renders as the fixed top bar. */
	.fm-pilot-body--login:has( > .fm-schedule__foot--bar ) {
		padding-top: calc(env(safe-area-inset-top, 0px) + 56px);
	}
	.fm-pilot__head { gap: 12px; margin-bottom: 24px; }
	.fm-pilot__title { font-size: 28px; }
	.fm-pilot__section { padding: 20px 0 24px; }
	.fm-pilot__section-title { font-size: 16px; }
	.fm-pilot__logout { padding: 7px 12px; font-size: 12px; }
	.fm-pilot__model-row {
		grid-template-columns: 1fr auto;
		padding: 12px 4px;
		column-gap: 12px;
	}

	/* Tools (language + theme) drop to a thumb-reachable bottom bar,
	   mirroring the operator. "Sign out" stays in the header. */
	.fm-pilot__tools {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		margin: 0;
		padding: 10px
		         max(12px, env(safe-area-inset-right, 0px) + 8px)
		         calc(env(safe-area-inset-bottom, 0px) + 10px)
		         max(12px, env(safe-area-inset-left, 0px) + 8px);
		justify-content: center;
		gap: 12px;
		background: var(--fm-bg, #fff);
		border-top: 1px solid var(--fm-line, #ececec);
		z-index: 40;
		box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.05);
	}
	.fm-pilot-body.fm-theme-dark .fm-pilot__tools {
		background: #1b1b1a;
		border-top-color: #2a2a2e;
		box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.35);
	}
	.fm-pilot__tools .fm-control__iconbtn { width: 40px; height: 40px; }
	/* Language dropdown opens upward out of the bottom bar. */
	.fm-pilot__tools .fm-langs__menu {
		top: auto;
		bottom: calc(100% + 8px);
	}
}

/* ---- Debug panel ---- */
/* Toggled by Settings → Flights → "Debug panel on /pilot/". Sits at
   the bottom of the page so it never elbows the form, monospaced and
   hairline-separated to read like a log file. Client-side entries and
   server-side `srv` entries share the same layout, color-coded by
   severity (ok/info/warn/err). */
.fm-pilot__debug {
	margin-top: 32px;
	padding: 16px 18px;
	border: 1px solid var(--fm-line, #ececec);
	border-radius: 8px;
	background: var(--fm-bg, #ffffff);
	font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	color: var(--fm-text-soft, #555);
}
.fm-pilot-body.fm-theme-dark .fm-pilot__debug {
	border-color: #2a2a2e;
	background: #1f1f1d;
}
.fm-pilot__debug-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}
.fm-pilot__debug-head h2 {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fm-text-mute, #8a8a8a);
}
.fm-pilot__debug-meta {
	display: inline-flex;
	gap: 14px;
	color: var(--fm-text-mute, #8a8a8a);
}
.fm-pilot__debug-meta span::before {
	content: "·";
	margin-right: 8px;
	opacity: 0.4;
}
.fm-pilot__debug-meta span:first-child::before { content: none; }

.fm-pilot__debug-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 360px;
	overflow-y: auto;
	border-top: 1px solid var(--fm-line, #ececec);
}
.fm-pilot-body.fm-theme-dark .fm-pilot__debug-list { border-top-color: #2a2a2e; }
.fm-pilot__debug-row {
	display: grid;
	grid-template-columns: auto auto 1fr;
	column-gap: 10px;
	padding: 6px 0;
	border-bottom: 1px dashed var(--fm-line, #ececec);
	align-items: baseline;
	white-space: nowrap;
}
.fm-pilot-body.fm-theme-dark .fm-pilot__debug-row { border-bottom-color: #2a2a2e; }
.fm-pilot__debug-row time {
	color: var(--fm-text-mute, #8a8a8a);
	font-variant-numeric: tabular-nums;
}
.fm-pilot__debug-row .fm-pilot__debug-tag {
	display: inline-block;
	padding: 1px 6px;
	border-radius: 3px;
	background: rgba(37, 99, 235, 0.10);
	color: var(--fm-status-prog, #2563eb);
	font-size: 10px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.fm-pilot__debug-row:not(.fm-pilot__debug-row--srv) {
	grid-template-columns: auto 1fr;
}
.fm-pilot__debug-row .fm-pilot__debug-msg {
	color: var(--fm-text, #111);
	white-space: pre-wrap;
	word-break: break-word;
}
.fm-pilot__debug-row--ok   .fm-pilot__debug-msg { color: #16a34a; }
.fm-pilot__debug-row--warn .fm-pilot__debug-msg { color: #d97706; }
.fm-pilot__debug-row--err  .fm-pilot__debug-msg { color: #dc2626; font-weight: 500; }