/* FleetLeet design layer over Basecoat. Load after basecoat.min.css.
   The style pack owns geometry and neutrals; this file adds only the semantic
   status palette, which Basecoat has no equivalent for, plus app chrome. */

:root {
	/* Corner radius for the chrome below, matched to the active style pack. */
	--chrome-radius: 0;
	--page-width: 1920px;
	--page-gutter: clamp(1rem, 2vw, 2rem);
	--accent-red: oklch(0.62 0.21 25);
	--accent-orange: oklch(0.7 0.18 47);
	--accent-yellow: oklch(0.81 0.16 82);
	--accent-green: oklch(0.627 0.194 149.214);
	--accent-blue: oklch(0.7 0.16 230);
	--accent-purple: oklch(0.56 0.19 295);
	--accent-gray: oklch(0.6 0.02 260);
}

html.dark {
	--background: oklch(0.22 0.006 260);
	--foreground: oklch(0.94 0.004 260);
	--card: oklch(0.27 0.006 260);
	--card-foreground: oklch(0.94 0.004 260);
	--popover: oklch(0.27 0.006 260);
	--popover-foreground: oklch(0.94 0.004 260);
	--primary: oklch(0.9 0.004 260);
	--primary-foreground: oklch(0.27 0.006 260);
	--secondary: oklch(0.32 0.007 260);
	--secondary-foreground: oklch(0.94 0.004 260);
	--muted: oklch(0.32 0.007 260);
	--muted-foreground: oklch(0.74 0.006 260);
	--accent: oklch(0.39 0.008 260);
	--accent-foreground: oklch(0.96 0.004 260);
	--border: oklch(1 0 0 / 0.16);
	--input: oklch(1 0 0 / 0.22);
	--ring: oklch(0.62 0.006 260);
	--sidebar: oklch(0.25 0.006 260);
	--sidebar-foreground: oklch(0.94 0.004 260);
	--sidebar-accent: oklch(0.32 0.007 260);
	--sidebar-accent-foreground: oklch(0.94 0.004 260);
	--sidebar-border: oklch(1 0 0 / 0.14);
	--sidebar-ring: oklch(0.58 0.006 260);
	--accent-red: oklch(0.68 0.2 25);
	--accent-orange: oklch(0.75 0.18 50);
	--accent-yellow: oklch(0.85 0.16 82);
	--accent-green: oklch(0.72 0.17 150);
	--accent-blue: oklch(0.75 0.14 230);
	--accent-purple: oklch(0.65 0.19 295);
	--accent-gray: oklch(0.72 0.02 260);
}

/* Badge states. Colour is never the only signal: every badge carries its label. */

.badge[data-state] {
	border-color: transparent;
	font-variant-numeric: tabular-nums;
}
.badge[data-state='neutral'] {
	color: color-mix(in oklab, var(--accent-gray) 72%, var(--foreground));
	background: color-mix(in oklab, var(--accent-gray) 14%, var(--background));
}

.badge[data-state='info'] {
	color: color-mix(in oklab, var(--accent-blue) 72%, var(--foreground));
	background: color-mix(in oklab, var(--accent-blue) 14%, var(--background));
}

.badge[data-state='active'] {
	color: color-mix(in oklab, var(--accent-purple) 72%, var(--foreground));
	background: color-mix(in oklab, var(--accent-purple) 14%, var(--background));
}

.badge[data-state='good'] {
	color: color-mix(in oklab, var(--accent-green) 72%, var(--foreground));
	background: color-mix(in oklab, var(--accent-green) 14%, var(--background));
}

.badge[data-state='warn'] {
	color: color-mix(in oklab, var(--accent-yellow) 72%, var(--foreground));
	background: color-mix(in oklab, var(--accent-yellow) 14%, var(--background));
}

.badge[data-state='danger'] {
	color: color-mix(in oklab, var(--accent-red) 72%, var(--foreground));
	background: color-mix(in oklab, var(--accent-red) 14%, var(--background));
}

/* Application chrome. Everything that can be a Basecoat component is one; these
   rules only place them. */

.skip-link {
	position: absolute;
	left: -100vw;
	z-index: 60;
}

.skip-link:focus-visible {
	left: 0.5rem;
	top: 0.5rem;
}

.shell-header {
	position: sticky;
	z-index: 50;
	top: 0;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem;
	padding: 0.72rem max(var(--page-gutter), calc((100% - var(--page-width)) / 2));
	border-bottom: 1px solid var(--border);
	background: color-mix(in oklab, var(--background) 92%, transparent);
	backdrop-filter: blur(8px);
	isolation: isolate;
}

.shell-brand {
	display: flex;
	align-items: baseline;
	gap: 0.8rem;
	min-width: 0;
}

.brand {
	color: var(--foreground);
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: -0.025em;
	text-decoration: none;
}

.tenant {
	overflow: hidden;
	max-width: 11rem;
	color: var(--muted-foreground);
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.85rem;
}

.shell-nav {
	display: flex;
	overflow-x: auto;
	align-items: center;
	gap: 0.2rem;
	min-width: 0;
	scrollbar-width: none;
}

.shell-nav::-webkit-scrollbar {
	display: none;
}

.shell-nav .btn {
	flex: 0 0 auto;
}

.identity {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.7rem;
	min-width: 0;
	font-size: 0.8rem;
}

.identity-copy {
	display: grid;
	min-width: 0;
	text-align: right;
	line-height: 1.2;
}

.identity-copy span {
	overflow: hidden;
	max-width: 15rem;
	color: var(--muted-foreground);
	text-overflow: ellipsis;
}

.identity form {
	margin: 0;
}

.shell-search-trigger {
	color: var(--muted-foreground);
	font-weight: 500;
}

.theme-toggle {
	flex: 0 0 auto;
	font-size: 1rem;
	line-height: 1;
}

/* A details element rather than Basecoat's dropdown, so signing out still works
   with no JavaScript. Setting display on details would break its closed state,
   so the Basecoat menu class sits on the panel instead. */

.account-menu {
	position: relative;
}

.account-menu > summary {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	list-style: none;
	cursor: pointer;
	border-radius: var(--chrome-radius);
	padding: 0.25rem 0.35rem;
}

.account-menu > summary:hover,
.account-menu[open] > summary {
	background: var(--accent);
}

.account-menu > summary:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
}

.account-menu > summary::-webkit-details-marker {
	display: none;
}

.account-dots {
	color: var(--muted-foreground);
	font-size: 1rem;
	line-height: 1;
}

/* The dialog form only carries the return value; the footer owns the layout. */
.alert-dialog form[method='dialog'] {
	display: contents;
}

/* Basecoat's progress needs an inline width, which style-src 'self' forbids. */
progress[data-file-upload-progress] {
	width: 100%;
	height: 0.25rem;
	border: 0;
	background: var(--muted);
}

progress[data-file-upload-progress]::-webkit-progress-bar {
	background: var(--muted);
}

progress[data-file-upload-progress]::-webkit-progress-value {
	background: var(--primary);
}

progress[data-file-upload-progress]::-moz-progress-bar {
	background: var(--primary);
}

.account-menu-panel {
	display: block;
	position: absolute;
	z-index: 50;
	top: calc(100% + 0.35rem);
	right: 0;
	border: 1px solid var(--border);
	border-radius: var(--chrome-radius);
	min-width: 10rem;
	padding: 0.25rem;
	color: var(--popover-foreground);
	background: var(--popover);
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%);
}

#request-error:empty {
	display: none;
}

/* Page scaffolding for screens that have moved to Basecoat. */

.page {
	display: grid;
	gap: 1.5rem;
	margin: 0 auto;
	max-width: calc(var(--page-width) + 2 * var(--page-gutter));
	padding: 1.75rem var(--page-gutter) 4rem;
}

.page > .btn {
	justify-self: start;
}

.page-heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.page-heading h1 {
	margin: 0.25rem 0 0;
	font-size: 1.9rem;
	font-weight: 700;
	letter-spacing: -0.03em;
}

.page-heading p:not(.eyebrow) {
	margin: 0;
	color: var(--muted-foreground);
}

.card-grid {
	display: grid;
	gap: 1rem;
	align-items: start;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

.stack {
	display: grid;
	align-content: start;
	gap: 1.5rem;
	min-width: 0;
}

.stack-tight {
	display: grid;
	align-content: start;
	gap: 0.75rem;
	min-width: 0;
}

.stack-tight > .btn {
	justify-self: start;
}

/* Text glyph adornments, optically matched to the label they sit beside. */
.btn > [aria-hidden='true'] {
	font-size: 1.15em;
	line-height: 1;
}

.form-grid {
	display: grid;
	gap: 0.75rem;
	align-items: end;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.form-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.75rem;
}

/* Card and item footers are flex rows, so a form in one shrinks to its content. */
.card > footer > form,
.item > footer > form:first-child {
	flex: 1 1 auto;
	min-width: 0;
}

.form-row .field {
	flex: 1 1 12rem;
	min-width: 0;
}

.form-row .field-narrow {
	flex: 1 1 6rem;
}

.form-row .field-wide {
	flex: 1 1 100%;
}

.form-row[data-compact] .field {
	flex: 0 1 12rem;
}

.form-grid .field {
	min-width: 0;
}

.form-grid .field-wide {
	grid-column: 1 / -1;
}

.form-row :is(input, select, textarea),
.form-grid :is(input, select, textarea) {
	max-width: 100%;
}

.card .empty {
	min-height: 0;
	padding-block: 1.5rem;
}

.record-columns {
	display: grid;
	gap: 1.5rem;
	align-items: start;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

/* For screens whose first column is navigation rather than the record itself. */
.record-columns[data-lead='aside'] {
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
}

.record-facts {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.record-heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.record-heading h1 {
	margin: 0.25rem 0 0;
	font-size: 1.9rem;
	font-weight: 700;
	letter-spacing: -0.03em;
}

.record-heading p:not(.eyebrow) {
	margin: 0;
	color: var(--muted-foreground);
}

.eyebrow {
	margin: 0;
	color: var(--muted-foreground);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.badge-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.htmx-indicator {
	display: none;
	color: var(--muted-foreground);
	font-size: 0.8rem;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
	display: inline;
}

@media (width <= 75rem) {
	.tenant {
		display: none;
	}
}

@media (width <= 64rem) {
	.shell-header {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 0.7rem 1rem;
		padding: 0.7rem var(--page-gutter) 0;
	}

	.shell-nav {
		grid-row: 2;
		grid-column: 1 / -1;
		width: calc(100% + 2 * var(--page-gutter));
		margin-left: calc(-1 * var(--page-gutter));
		border-top: 1px solid var(--border);
		padding: 0.3rem var(--page-gutter) 0.65rem;
	}
}

@media (width <= 60rem) {
	.record-columns,
	.record-columns[data-lead='aside'] {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (width <= 40rem) {
	.card-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.form-row[data-compact] .field,
	.form-row[data-compact] > .btn {
		flex: 1 1 100%;
		width: 100%;
	}

	.item > footer {
		align-items: stretch;
		flex-direction: column;
	}

	.card > footer {
		align-items: stretch;
		flex-direction: column;
	}

	.card > footer > form,
	.item > footer > form {
		width: 100%;
	}
}

/* Command palette. The dialog markup lives in _shell.html. */

.visually-hidden {
	position: absolute;
	overflow: hidden;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Search palette. Basecoat's command component supplies the dialog, input, menu
   and item styling; these rules add the per-entity icon and the status line. */

.command > [role='menu'] {
	max-height: 45vh;
}

.command > header input {
	min-width: 0;
}

/* The palette supplies its own close control, so suppress the native one. */
.command > header input[type='search']::-webkit-search-cancel-button {
	display: none;
}

.command > header [data-command-palette-close] {
	flex: 0 0 auto;
}

.command [role='menuitem']:focus-visible {
	outline: 0;
	background: var(--accent);
	color: var(--accent-foreground);
}

.command [role='menu'][aria-busy='true'] {
	cursor: progress;
	opacity: 0.62;
}

.command [data-shortcut] {
	white-space: nowrap;
}

.palette-option-icon {
	display: grid;
	flex: 0 0 auto;
	width: 1.75rem;
	height: 1.75rem;
	place-items: center;
	border-radius: var(--chrome-radius);
	color: color-mix(in oklab, var(--accent-blue) 72%, var(--foreground));
	background: color-mix(in oklab, var(--accent-blue) 14%, var(--background));
	font-size: 0.7rem;
	font-weight: 700;
}

.palette-option-work-order .palette-option-icon {
	color: color-mix(in oklab, var(--accent-yellow) 72%, var(--foreground));
	background: color-mix(in oklab, var(--accent-yellow) 14%, var(--background));
}

.palette-option-issue .palette-option-icon {
	color: color-mix(in oklab, var(--accent-red) 72%, var(--foreground));
	background: color-mix(in oklab, var(--accent-red) 14%, var(--background));
}

.palette-option-inventory .palette-option-icon {
	color: color-mix(in oklab, var(--accent-green) 72%, var(--foreground));
	background: color-mix(in oklab, var(--accent-green) 14%, var(--background));
}

.palette-option-copy {
	display: grid;
	min-width: 0;
}

.palette-option-copy strong,
.palette-option-copy small {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.palette-option-copy small {
	color: var(--muted-foreground);
	font-size: 0.72rem;
}

.palette-message {
	display: grid;
	gap: 0.2rem;
	padding: 1.4rem 1rem;
	color: var(--muted-foreground);
	text-align: center;
}

.palette-message strong {
	color: var(--foreground);
}

.palette-footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1rem;
	border-top: 1px solid var(--border);
	min-height: 2.65rem;
	padding: 0.55rem 1rem;
	color: var(--muted-foreground);
	font-size: 0.7rem;
}

.palette-footer span {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

.palette-footer .htmx-indicator {
	margin-right: auto;
}

/* Sign-in pages, which render without the application shell. */

.auth-page {
	display: grid;
	place-items: center;
	min-height: 100vh;
	padding: 2rem 1rem;
}

.auth-theme-toggle {
	position: fixed;
	top: 1rem;
	right: 1rem;
}

.auth-card {
	width: min(26rem, 100%);
}

.auth-card h1 {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.auth-card header p {
	margin: 0;
	color: var(--muted-foreground);
	font-size: 0.85rem;
}

/* Analytics explorer. The SVG classes are produced by analytics.js. */

.analytics-subjects {
	display: flex;
	gap: 0.25rem;
	max-width: 100%;
	overflow-x: auto;
	border-bottom: 1px solid var(--border);
	scrollbar-width: none;
}

.analytics-subjects::-webkit-scrollbar {
	display: none;
}

.analytics-subject {
	flex: 0 0 auto;
}

.analytics-subject[aria-current='page'] {
	color: var(--foreground);
	font-weight: 600;
	box-shadow: inset 0 -2px 0 var(--primary);
}

.analytics-controls {
	display: grid;
	grid-template-columns: repeat(3, minmax(9rem, 1fr)) auto auto;
	align-items: end;
	gap: 0.75rem;
}

.analytics-control-actions {
	display: flex;
	gap: 0.5rem;
}

.analytics-loading {
	align-self: center;
	color: var(--muted-foreground);
	font-size: 0.75rem;
}

.access-editor .field > section {
	min-width: 0;
}

.access-editor .field label {
	flex-wrap: wrap;
}

.access-editor code {
	overflow-wrap: anywhere;
}

@media (width <= 48rem) {
	.analytics-controls {
		grid-template-columns: minmax(0, 1fr);
	}
}

.analytics-chart {
	overflow-x: auto;
	border-top: 1px solid var(--border);
	padding-top: 1rem;
}

.analytics-visual-frame {
	width: max-content;
	min-width: 100%;
	contain: layout paint;
}

.analytics-visual-frame svg {
	display: block;
	max-width: none;
	height: 20rem;
}

.analytics-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem 0.9rem;
	min-height: 2rem;
	padding: 0.2rem 0.5rem 0.55rem;
	color: var(--muted-foreground);
	font-size: 0.72rem;
}

.analytics-legend span {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.analytics-legend i {
	width: 0.65rem;
	height: 0.65rem;
	border-radius: var(--chrome-radius);
}

.analytics-axis {
	stroke: var(--muted-foreground);
	stroke-width: 1;
}

.analytics-grid-line {
	stroke: var(--border);
	stroke-width: 1;
}

.analytics-axis-label,
.analytics-category-label {
	fill: var(--muted-foreground);
	font-family: inherit;
	font-size: 11px;
}

.analytics-bar:hover,
.analytics-heat-cell:hover {
	opacity: 0.72;
}

.analytics-heat-label {
	pointer-events: none;
	fill: var(--foreground);
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
}

.analytics-data summary span {
	color: var(--muted-foreground);
	font-weight: 400;
}

.analytics-data :is(tbody, tfoot) th {
	text-align: left;
}

/* Screens that read narrower than the full page width. */

.scan-page,
.scan-camera {
	display: grid;
	gap: 1.5rem;
}

.scan-video {
	width: 100%;
	border-radius: var(--chrome-radius);
	background: var(--muted);
}

/* Selection and permission state carried by settings and analytics links. */

.item.is-active {
	border-color: var(--ring);
	background: var(--accent);
}

.is-disabled,
.is-readonly {
	opacity: 0.6;
}