/* Stele styles. Single file. CSS variables for theming. */

:root {
	color-scheme: light dark;

	/* Light theme (default). */
	--fg: #1c1c1c;
	--fg-muted: #6c6c6c;
	--bg: #fafafa;
	--bg-elev: #ffffff;
	--bg-elev-strong: #ffffff;
	--border: #e3e3e3;
	--border-strong: #c8c8c8;
	--accent: #335577;
	--accent-fg: #ffffff;
	--accent-soft: #eef2f7;
	--danger: #a83232;
	--badge-open-bg: #fff4cc;
	--badge-open-fg: #6b5300;
	--badge-closed-bg: #d9e9d6;
	--badge-closed-fg: #2b5d22;
	--error-bg: #fce4e4;
	--error-fg: #8a1f1f;
	--code-bg: rgba(0, 0, 0, 0.04);
	--shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] {
	color-scheme: dark;
	--fg: #e6e6e6;
	--fg-muted: #9a9a9a;
	--bg: #15181c;
	--bg-elev: #1d2126;
	--bg-elev-strong: #232830;
	--border: #2a2f37;
	--border-strong: #3a4049;
	--accent: #7aa3d1;
	--accent-fg: #0b1015;
	--accent-soft: #1b2a3a;
	--danger: #e07070;
	--badge-open-bg: #3a3220;
	--badge-open-fg: #f0d27b;
	--badge-closed-bg: #1f3a1f;
	--badge-closed-fg: #9cd99c;
	--error-bg: #3a1f1f;
	--error-fg: #f0a0a0;
	--code-bg: rgba(255, 255, 255, 0.06);
	--shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--fg: #e6e6e6;
		--fg-muted: #9a9a9a;
		--bg: #15181c;
		--bg-elev: #1d2126;
		--bg-elev-strong: #232830;
		--border: #2a2f37;
		--border-strong: #3a4049;
		--accent: #7aa3d1;
		--accent-fg: #0b1015;
		--accent-soft: #1b2a3a;
		--danger: #e07070;
		--badge-open-bg: #3a3220;
		--badge-open-fg: #f0d27b;
		--badge-closed-bg: #1f3a1f;
		--badge-closed-fg: #9cd99c;
		--error-bg: #3a1f1f;
		--error-fg: #f0a0a0;
		--code-bg: rgba(255, 255, 255, 0.06);
		--shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
	}
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	background: var(--bg);
	color: var(--fg);
	font: 14px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

main {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px 24px 60px;
}
/* Case-detail / forms read better at a narrower measure; opt in via
   a body class set by the layout when the page is detail-style. */
body.narrow main { max-width: 920px; }

h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 8px; }
h2 { font-size: 16px; font-weight: 600; letter-spacing: 0; margin: 24px 0 10px; }
h3 { font-size: 14px; font-weight: 600; margin: 0 0 8px; }

code {
	font: 12px/1.4 ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	background: var(--code-bg);
	padding: 1px 5px;
	border-radius: 3px;
}
.small { font-size: 12px; }
.muted { color: var(--fg-muted); }

/* Tables: tighter rows, uppercase header tracking, hover row. */
table.claims {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}
table.claims th {
	text-align: left;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--fg-muted);
	padding: 10px 12px;
	border-bottom: 1px solid var(--border);
	background: var(--bg-elev);
}
table.claims td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--border);
	vertical-align: top;
}
table.claims tbody tr:hover { background: var(--accent-soft); }
table.claims.compact th, table.claims.compact td {
	padding: 6px 10px;
	font-size: 12px;
}

.topbar {
	background: var(--bg-elev);
	border-bottom: 1px solid var(--border);
	padding: 14px 24px;
	display: flex;
	align-items: center;
	gap: 24px;
}
.topbar .brand {
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--fg);
	text-decoration: none;
	font-size: 18px;
}
.topbar nav.primary {
	display: flex;
	gap: 4px;
	flex: 1;
}
.topbar nav.primary a {
	color: var(--fg-muted);
	text-decoration: none;
	padding: 4px 10px;
	border-radius: 4px;
}
.topbar nav.primary a:hover { color: var(--fg); background: var(--accent-soft); }

.search-bar {
	display: flex;
	flex: 0 1 360px;
	margin: 0;
	padding: 0;
}
.search-bar input {
	width: 100%;
	font: inherit;
	font-size: 13px;
	padding: 6px 10px;
	border: 1px solid var(--border);
	border-radius: 4px;
	background: var(--bg);
	color: var(--fg);
}
.search-bar input:focus {
	outline: 2px solid var(--accent);
	outline-offset: -1px;
}

mark { background: var(--badge-open-bg); color: var(--badge-open-fg); padding: 0 2px; border-radius: 2px; }

.kpi-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin: 16px 0 24px;
}
.kpi-card {
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 14px 16px;
}
.kpi-label { font-size: 12px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.kpi-value { font-size: 32px; font-weight: 700; margin: 4px 0; color: var(--fg); }
.kpi-sub   { font-size: 12px; color: var(--fg-muted); }

.dash-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.dash-col h2 { margin-top: 32px; }

table.compact th, table.compact td { padding: 6px 10px; font-size: 14px; }

.sparkline { display: block; max-width: 100%; height: auto; margin: 12px 0 24px; }

.user-menu {
	display: flex;
	align-items: center;
	gap: 12px;
}
.user-menu .user-link {
	color: var(--fg);
	text-decoration: none;
	font-size: 14px;
	padding: 4px 8px;
	border-radius: 4px;
}
.user-menu .user-link:hover { background: var(--accent-soft); }
.user-menu .inline-logout { margin: 0; padding: 0; background: none; border: 0; }
.link-button {
	background: none;
	border: 0;
	padding: 4px 8px;
	color: var(--fg-muted);
	cursor: pointer;
	font: inherit;
	font-size: 14px;
	border-radius: 4px;
}
.link-button:hover { color: var(--fg); background: var(--accent-soft); }
.link-button.danger { color: var(--danger); }
.link-button.danger:hover { background: var(--error-bg); }
.inline-confirm { display: inline; margin: 0; padding: 0; background: none; border: 0; }

.footer {
	text-align: center;
	color: var(--fg-muted);
	padding: 20px;
}

.page-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}

a { color: var(--accent); }
a:hover { text-decoration: underline; }

/* Tables get rounded card chrome (border + shadow) layered on top
   of the typography baseline defined above. */
table.claims {
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: var(--shadow);
}
table.claims tbody tr:last-child td { border-bottom: 0; }
table.claims tbody tr { transition: background 0.1s ease; }
table.claims thead th { position: sticky; top: 0; z-index: 1; }

.btn {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 4px;
	background: var(--bg-elev);
	color: var(--fg);
	border: 1px solid var(--border);
	text-decoration: none;
	font-size: 13px;
	cursor: pointer;
}
.btn:hover { background: var(--accent-soft); border-color: var(--border-strong); }
.btn.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.btn.primary:hover { background: var(--accent); filter: brightness(1.1); }
.btn.danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn.danger:hover { background: #8b2929; }

.form {
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 540px;
}
.form.inline { max-width: none; }
.form label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13px;
	color: var(--fg-muted);
}
/* Form controls. All of input / textarea / select share the same
   surface treatment so the form reads as one unit in both themes.
   Background uses the elevated surface token (white in light, dark
   slate in dark) instead of a hard-coded #ffffff, which was the
   2026-06-03 regression Alessio's first case surfaced. */
.form input, .form textarea, .form select {
	font: inherit;
	color: var(--fg);
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 7px 9px;
}
.form input:focus, .form textarea:focus, .form select:focus {
	outline: 2px solid var(--accent);
	outline-offset: -1px;
}
/* Placeholder needs an explicit colour: browsers default to a dark
   grey that disappears on dark backgrounds. */
.form input::placeholder, .form textarea::placeholder {
	color: var(--fg-muted);
	opacity: 0.75;
}
/* File picker: the native button is the only chrome left after we
   normalise the rest. ::file-selector-button is the modern selector
   (Firefox 82+, Chrome 89+, Safari 14.1+) — older browsers degrade
   gracefully to the unstyled default. */
.form input[type="file"] {
	padding: 4px 6px; /* native button needs less vertical padding. */
}
.form input[type="file"]::file-selector-button {
	font: inherit;
	background: var(--bg-elev-strong);
	color: var(--fg);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 4px 10px;
	margin-right: 10px;
	cursor: pointer;
}
.form input[type="file"]::file-selector-button:hover {
	background: var(--accent-soft);
	border-color: var(--border-strong);
}
/* Checkbox rows: keep the box inline with its label instead of being
   stretched into a full-width square by the generic input styling. */
.form label.checkbox {
	flex-direction: row;
	align-items: center;
	gap: 8px;
}
.form input[type="checkbox"] {
	width: auto;
	margin: 0;
}
/* Two-column field grid used by the wizard + masters forms. Collapses
   to one column on narrow screens. */
.grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 16px;
}
.grid-3 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 12px 16px;
}
@media (max-width: 640px) {
	.grid-2 { grid-template-columns: 1fr; }
	.grid-3 { grid-template-columns: 1fr; }
}
/* Job-line blocks in the inbound wizard. */
.form fieldset.jobline {
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 12px 14px 14px;
	margin: 12px 0;
}
.form fieldset.jobline legend {
	font-size: 13px;
	color: var(--fg-muted);
	padding: 0 6px;
}
/* Admin-only destructive actions, visually separated. */
.danger-zone {
	margin-top: 28px;
	padding-top: 14px;
	border-top: 1px solid var(--border);
}
.form-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}
.error {
	background: var(--error-bg);
	color: var(--error-fg);
	padding: 8px 12px;
	border-radius: 4px;
	margin: 0;
	font-size: 14px;
}

.badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 99px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.badge.open { background: var(--badge-open-bg); color: var(--badge-open-fg); }
.badge.closed { background: var(--badge-closed-bg); color: var(--badge-closed-fg); }

.badge.status-triage     { background: #ffe7c2; color: #8a5300; }
.badge.status-classified { background: #cfe2ff; color: #1c3e7a; }
.badge.status-closed     { background: #d9e9d6; color: #2b5d22; }

.badge.kind-warranty  { background: #c9e6ff; color: #144a78; }
.badge.kind-oow       { background: #fdd9d9; color: #7a2424; }
.badge.kind-goodwill  { background: #f6e4ff; color: #5a2a7a; }
.badge.kind-recall    { background: #ffd7a8; color: #7d4d00; }
.badge.kind-unrelated { background: #e8e8e8; color: #555;    }
.badge.kind-edu       { background: #e0f4d5; color: #335a18; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 16px 0 12px; }
.tab {
	padding: 8px 14px;
	color: var(--fg-muted);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	font-size: 14px;
}
.tab .count {
	display: inline-block;
	background: #ececec;
	color: var(--fg-muted);
	border-radius: 99px;
	padding: 1px 8px;
	font-size: 12px;
	margin-left: 6px;
}
.tab.active { color: var(--fg); border-bottom-color: var(--accent); font-weight: 600; }
.tab.active .count { background: var(--accent); color: var(--accent-fg); }

.upload-details,
.actions-details {
	margin-top: 10px;
	font-size: 14px;
}
.upload-details summary,
.actions-details summary {
	cursor: pointer;
	color: var(--accent);
	padding: 8px 12px;
	background: #f4f4f4;
	border: 1px solid var(--border);
	border-radius: 4px;
	font-weight: 500;
	user-select: none;
}
.upload-details summary:hover,
.actions-details summary:hover { background: #ececec; }
.upload-details[open] summary,
.actions-details[open] summary { font-weight: 600; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.upload-details > .form,
.actions-details > .form {
	margin-top: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

a.case-num {
	font-family: "SFMono-Regular", Consolas, monospace;
	color: var(--accent);
	text-decoration: none;
	font-weight: 600;
}
a.case-num:hover { text-decoration: underline; }

table.documents th, table.documents td { font-size: 14px; }

.kindfilter {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	margin: 0 0 12px;
	font-size: 13px;
}
.chip {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 99px;
	border: 1px solid var(--border);
	background: var(--bg-elev);
	color: var(--fg);
	text-decoration: none;
	font-size: 13px;
}
.chip:hover { background: #f0f0f0; }
.chip.active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }

dl.summary {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 4px 16px;
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 16px;
	margin: 0;
}
dl.summary dt { color: var(--fg-muted); font-size: 13px; }
dl.summary dd { margin: 0; }

/* Case summary "scheda" with a primary row (status/kind/assignee)
   on top and a 2-col grid below. */
.case-summary {
	display: flex;
	flex-direction: column;
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: 6px;
	overflow: hidden;
	margin: 0 0 16px;
}
.case-summary-primary {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* Primary strip sits one elevation above the rest of the card so
	   Status/Kind/Assignee read as the case header. --bg-elev-strong
	   is identical to --bg-elev in light (so the strip relies on the
	   border-bottom for separation) and lighter than --bg-elev in
	   dark (so the strip pops out). */
	background: var(--bg-elev-strong);
	border-bottom: 1px solid var(--border);
}
.case-summary-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}
.cs-cell {
	padding: 10px 14px;
	border-right: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}
.cs-cell:last-child { border-right: 0; }
.case-summary-primary .cs-cell:last-child { border-bottom: 0; }
.case-summary-grid .cs-cell { border-bottom: 1px solid var(--border); }
.case-summary-grid .cs-cell:nth-last-child(-n+2) { border-bottom: 0; }
.cs-cell-wide { grid-column: 1 / -1; }
.cs-label {
	font-size: 11px;
	color: var(--fg-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 4px;
}
.cs-value { font-size: 14px; }

/* --- Case detail: status bar + two-column layout (M16 UI pass) --- */
/* One scannable strip of the case's status axes above the stepper. */
.statusbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 4px 0 16px;
}
/* Case-side section roll-ups: Parts and Documents collapse behind a
   disclosure whose summary carries the item count, so the side column
   stays compact; unroll to view / add / delete. */
.section-rollup { margin-bottom: 18px; border: 1px solid var(--border); border-radius: 8px; }
.case-side > h2 { margin-top: 24px; margin-bottom: 10px; font-size: 16px; }
.section-rollup > summary {
	cursor: pointer;
	list-style: none;
	padding: 8px 12px;
	font-size: 14px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 8px;
}
.section-rollup > summary::-webkit-details-marker { display: none; }
.section-rollup > summary::before { content: "\25B8"; color: var(--fg-muted); font-size: 11px; }
.section-rollup[open] > summary::before { content: "\25BE"; }
.section-rollup > summary:hover { background: var(--accent-soft); }
.section-count {
	margin-left: auto;
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: 0 8px;
	font-size: 12px;
	color: var(--fg-muted);
}
.section-body { padding: 0 12px 12px; }

/* Custom file picker: the native input renders browser-localised labels
   ("Scegli file"), so it is hidden and driven by an English button; the
   span echoes the selected names. The input stays in the form so the
   files submit normally. */
.filepick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filepick input[type="file"] { display: none; }

/* Note corrections (M21b): per-note Undo/Edit controls + withdrawn look. */
.note-controls { display: flex; align-items: center; gap: 10px; margin-top: 2px; font-size: 12px; }
.note-controls .note-edit summary { cursor: pointer; color: var(--fg-muted); }
.note-controls .note-edit summary:hover { color: var(--fg); }
.note-controls .note-edit form { margin-top: 6px; }
.note-controls .note-edit textarea { width: 100%; min-width: 280px; }
.note-withdrawn p { opacity: 0.65; }

/* Timeline roll-up: collapse older events behind a disclosure so a long
   case history stays scannable; the most recent few show expanded. */
.timeline-rollup { list-style: none; margin-left: -8px; }
.timeline-rollup summary { cursor: pointer; color: var(--fg-muted); font-size: 13px; padding: 2px 0; }
.timeline-rollup summary:hover { color: var(--fg); }
.timeline-rollup > details > .timeline { margin-top: 8px; }

/* In the status strip, badges (status / kind) adopt the chip pill
   geometry so badges and chips read as one coherent family instead of
   mixing rounded-rectangles with pills. Colours are preserved. */
.statusbar .badge {
	border-radius: 999px;
	padding: 2px 10px;
	font-size: 12px;
	font-weight: 600;
}
/* Pill chips shared by status bar, job lines, and visit detail. */
.chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	border: 1px solid var(--border);
	background: var(--bg-elev);
	color: var(--fg);
	white-space: nowrap;
}
.chip-muted { color: var(--fg-muted); font-weight: 500; }
.chip-esc { background: #ffe7c2; color: #8a5300; border-color: #f0cf9a; }
.claim-pending  { background: #fef9c3; color: #854d0e; border-color: #fde68a; }
.claim-approved { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.claim-denied   { background: #fee2e2; color: #991b1b; border-color: #fecaca; }

/* Two-column work surface: timeline (main) | facts/parts/docs (side). */
.case-grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}
.case-main { min-width: 0; }
.case-side { min-width: 0; }
.case-side > section { margin-bottom: 18px; }
.case-side h3 { font-size: 14px; margin: 0 0 8px; }
/* In the narrow side column the facts grid stacks to one column. */
.case-side .case-summary-grid { grid-template-columns: 1fr; }
.case-side .case-summary-grid .cs-cell:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); }
.case-side .case-summary-grid .cs-cell:last-child { border-bottom: 0; }
@media (max-width: 900px) {
	.case-grid { grid-template-columns: 1fr; }
}
/* Compact attachment list: fits the narrow case-side column without the
   wide table overflowing and breaking the layout. */
.doclist { list-style: none; margin: 0; padding: 0; }
.doclist .doc {
	padding: 8px 0;
	border-bottom: 1px solid var(--border);
}
.doclist .doc:last-child { border-bottom: 0; }
.doc-name { font-weight: 600; font-size: 13px; word-break: break-word; }
.doc-meta { font-size: 11px; margin: 2px 0; }
.doc-actions { font-size: 12px; display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.doc-actions form { display: inline; }

/* Service visit updated by support since the dealer last looked. */
.row-attention { background: #fffbeb; }
.row-attention td { border-top: 2px solid #fde68a; }

/* Role-scoped dashboard worklist ("what needs you"). */
.worklist { margin: 0 0 24px; }
.worklist h3 { font-size: 13px; color: var(--fg-muted); margin: 14px 0 6px; }
.worklist td.statusbar { margin: 0; }

/* Grouped secondary actions at the bottom, not scattered through the page. */
.case-actions { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--border); }
.case-actions h2 { font-size: 15px; margin: 0 0 10px; }
.case-actions-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.case-actions-row > .actions-details { flex: 1 1 240px; }

/* Vehicle enrichment under the VIN cell. */
/* Recall badge: drawn on the case-detail VIN cell when the vehicle has
   one or more recall codes. Yellow-amber to signal "attention required
   but not blocking", consistent with the rest of the kind/status badge
   palette. */
.vehicle-recalls {
	margin-top: 4px;
	font-size: 13px;
}
.badge.recall-badge {
	background: #ffe9b3;
	color: #6e4a00;
	border: 1px solid #e7c98a;
	margin-right: 6px;
}
/* Serial numbers in a collapsible block: keep them out of the
   primary scanline (they are 20+ char strings) but one click away. */
.vehicle-ids {
	margin-top: 6px;
	font-size: 12px;
}
.vehicle-ids summary { cursor: pointer; color: #444; }
.vehicle-ids dl.kv {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 2px 12px;
	margin: 4px 0 0;
}
.vehicle-ids dl.kv dt { color: #6c6c6c; }
.vehicle-ids dl.kv dd { margin: 0; font-family: monospace; word-break: break-all; }

.vehicle-info {
	margin-top: 4px;
	font-size: 13px;
}
.vehicle-info strong { color: var(--fg); }

/* Admin import report card after a CSV upload. */
.import-report {
	background: #f0f8ff;
	border: 1px solid #cfd8e3;
	border-radius: 6px;
	padding: 12px 14px;
	margin-bottom: 14px;
	font-size: 14px;
}
.import-report ul { margin: 6px 0 0; padding-left: 18px; }
.import-errors { font-family: monospace; font-size: 12px; }

/* Add-part form: preview panel shown when an operator picks a PN
   from the datalist. Populated by a tiny inline script reading the
   data-* attributes on each <option>. */
.part-preview {
	background: #f6faf6;
	border: 1px solid #c7dac7;
	border-radius: 6px;
	padding: 8px 12px;
	margin: 6px 0 8px;
	font-size: 13px;
	line-height: 1.45;
}
.part-preview .pp-desc  { font-weight: 600; }
.part-preview .pp-price { color: #2b5d2b; }
.part-preview .pp-notes { color: #6c6c6c; font-style: italic; margin-top: 2px; }

/* Admin overview list spacing. */
ul.overview { list-style: none; padding: 0; margin: 0; }
ul.overview li {
	padding: 10px 0;
	border-bottom: 1px solid var(--border);
	font-size: 15px;
}
ul.overview li:last-child { border-bottom: 0; }

/* Compact tables for admin lists. */
table.claims.compact th, table.claims.compact td {
	padding: 6px 10px;
	font-size: 13px;
}

ol.timeline {
	list-style: none;
	padding: 0;
	margin: 0;
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: 6px;
}
ol.timeline li {
	padding: 10px 16px;
	border-bottom: 1px solid var(--border);
}
ol.timeline li:last-child { border-bottom: 0; }
ol.timeline time {
	color: var(--fg-muted);
	font-size: 13px;
	margin-right: 12px;
}
ol.timeline strong { color: var(--accent); }
ol.timeline p { margin: 4px 0 0; font-size: 14px; }

/* === Telemetry block (M13 / ADR-014) ============================ */
.telemetry-block {
	margin: 18px 0;
	padding: 16px 18px;
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: 6px;
}
.telemetry-block .tg-head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 14px;
}
.telemetry-block .tg-head h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
}
.telemetry-block .tg-head .tg-refresh {
	margin-left: auto;
}
.telemetry-block .tg-section {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px dashed var(--border);
}
.telemetry-block .tg-section:first-of-type {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}
.telemetry-block .tg-section-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--fg-muted);
	margin-bottom: 8px;
}
.telemetry-block .tg-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px 20px;
}
.telemetry-block .tg-cell {
	min-width: 0;
}
.telemetry-block .tg-label {
	font-size: 11px;
	color: var(--fg-muted);
	margin-bottom: 2px;
}
.telemetry-block .tg-value {
	font-size: 14px;
	line-height: 1.3;
	overflow-wrap: anywhere;
}
.telemetry-block .tg-value code,
.telemetry-block .tg-value code.small {
	font-size: 12px;
	background: rgba(0,0,0,0.04);
	padding: 1px 5px;
	border-radius: 3px;
}
.telemetry-block .warning {
	color: #b45309;
	font-weight: 600;
}
.telemetry-block .dot {
	font-size: 11px;
	vertical-align: middle;
}
.dot-online  { color: #16a34a; }
.dot-offline { color: #9ca3af; }

/* === Stage stepper (M14) ========================================== */
.stage-stepper {
	margin: 16px 0 24px;
	padding: 16px 18px;
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: 6px;
}
.stage-stepper ol {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 0;
	overflow-x: auto;
}
.stage-stepper li.step {
	flex: 1 1 0;
	min-width: 110px;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 6px;
}
/* Connector line: pseudo-element on every step except the first. */
.stage-stepper li.step + li.step::before {
	content: "";
	position: absolute;
	left: -50%;
	right: 50%;
	top: 9px;       /* aligns with the dot's vertical centre */
	height: 2px;
	background: var(--border);
	z-index: 0;
}
.stage-stepper li.step-done + li.step::before,
.stage-stepper li.step-current::before {
	background: #16a34a; /* completed connector is green */
}
.stage-stepper .step-dot {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--bg-elev);
	border: 2px solid var(--border);
	position: relative;
	z-index: 1;
}
.stage-stepper .step-done .step-dot {
	background: #16a34a;
	border-color: #16a34a;
}
.stage-stepper .step-current .step-dot {
	background: #2563eb;
	border-color: #2563eb;
	box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
}
.stage-stepper .step-todo .step-dot {
	background: var(--bg-elev);
	border-color: var(--border);
}
.stage-stepper .step-body {
	margin-top: 8px;
	text-align: center;
}
.stage-stepper .step-label {
	font-size: 12px;
	color: var(--fg-muted);
	line-height: 1.2;
}
.stage-stepper .step-current .step-label {
	color: var(--fg);
	font-weight: 600;
}
.stage-stepper .step-done .step-label {
	color: var(--fg);
}
.stage-stepper .step-days {
	margin-top: 2px;
	font-size: 11px;
	color: #2563eb;
	font-weight: 600;
}
/* M23a: one-click stage change. Bar on the left, Save on the right;
   each non-current bubble is a radio target. */
.stage-row { display: flex; align-items: center; gap: 20px; }
.stage-row .stage-bar { flex: 1 1 auto; }
.stage-row .stage-save { flex: 0 0 auto; align-self: center; }
.stage-stepper li.step-pick { cursor: pointer; }
.stage-stepper li.step-pick > label {
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
}
.stage-stepper .step-radio {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}
.stage-stepper li.step-pick > label:hover .step-dot { border-color: var(--accent); }
.stage-stepper li.step-pick > label:hover .step-label { color: var(--fg); }
.stage-stepper .step-radio:checked + label .step-dot {
	background: #d97706;
	border-color: #d97706;
	box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.25);
}
.stage-stepper .step-radio:checked + label .step-label { color: var(--fg); font-weight: 600; }

/* === Stage badges (cases list / search) ========================== */
.badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
	background: #eef;
	color: #335;
}
.badge-stage-new            { background: #dbeafe; color: #1d4ed8; }   /* blue */
.badge-stage-diagnosis      { background: #ede9fe; color: #6d28d9; }   /* violet */
.badge-stage-parts-ordered  { background: #fef3c7; color: #b45309; }   /* amber */
.badge-stage-parts-waiting  { background: #fed7aa; color: #9a3412; }   /* darker amber, signals "stuck waiting" */
.badge-stage-repair         { background: #cffafe; color: #155e75; }   /* cyan */
.badge-stage-resolved       { background: #dcfce7; color: #166534; }   /* green */

/* === Dark-mode badge/chip overrides ============================== */
[data-theme="dark"] .badge.status-triage     { background: #4a3320; color: #f0d27b; }
[data-theme="dark"] .badge.status-classified { background: #1f3257; color: #a7c1ef; }
[data-theme="dark"] .badge.status-closed     { background: #1f3a1f; color: #9cd99c; }
[data-theme="dark"] .badge.kind-warranty     { background: #18374f; color: #9cc6ef; }
[data-theme="dark"] .badge.kind-oow          { background: #4a1e1e; color: #f0a0a0; }
[data-theme="dark"] .badge.kind-goodwill     { background: #3a2348; color: #d8b3f0; }
[data-theme="dark"] .badge.kind-recall       { background: #4a3120; color: #f0c490; }
[data-theme="dark"] .badge.kind-unrelated    { background: #2a2a2a; color: #c0c0c0; }
[data-theme="dark"] .badge.kind-edu          { background: #1f3a26; color: #b5d99c; }

[data-theme="dark"] .badge-stage-new            { background: #18374f; color: #9cc6ef; }
[data-theme="dark"] .badge-stage-diagnosis      { background: #2c2244; color: #cbb7f0; }
[data-theme="dark"] .badge-stage-parts-ordered  { background: #3f3018; color: #f0c878; }
[data-theme="dark"] .badge-stage-parts-waiting  { background: #4a2818; color: #f0a878; }
[data-theme="dark"] .badge-stage-repair         { background: #1a3537; color: #9cd9e0; }
[data-theme="dark"] .badge-stage-resolved       { background: #1f3a1f; color: #9cd99c; }

[data-theme="dark"] .chip,
[data-theme="dark"] details summary,
[data-theme="dark"] .actions-details summary { background: var(--bg-elev-strong); }
[data-theme="dark"] .chip:hover               { background: var(--accent-soft); }

[data-theme="dark"] .telemetry-block .tg-value code,
[data-theme="dark"] .telemetry-block .tg-value code.small { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .stage-stepper .step-dot         { background: var(--bg-elev-strong); border-color: var(--border-strong); }
[data-theme="dark"] .stage-stepper .step-todo .step-dot { background: var(--bg-elev-strong); }

[data-theme="dark"] .part-preview { background: #182234; border-color: #2a3852; }
[data-theme="dark"] .part-preview .pp-price { color: #9cd9a0; }
[data-theme="dark"] .part-preview .pp-notes { color: var(--fg-muted); }

[data-theme="dark"] .recall-badge { background: #4a3320; color: #f0c878; border-color: #6a4c2c; }

/* === Loading indicator for HTMX in-flight ======================== */
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in 200ms; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }
/* Buttons fade during their own request for instant visual feedback. */
button.htmx-request, .btn.htmx-request {
	opacity: 0.65;
	pointer-events: none;
	cursor: progress;
}
/* Tiny inline spinner: an inline-block ::after with a CSS animation. */
button.htmx-request::after, .btn.htmx-request::after {
	content: "";
	display: inline-block;
	margin-left: 8px;
	width: 10px; height: 10px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	vertical-align: -1px;
	animation: stele-spin 600ms linear infinite;
}
@keyframes stele-spin { to { transform: rotate(360deg); } }

/* === Theme toggle button (topbar) ================================ */
.theme-toggle {
	margin: 0; padding: 4px 8px;
	background: none; border: 1px solid var(--border);
	border-radius: 4px;
	color: var(--fg-muted);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}
.theme-toggle:hover { color: var(--fg); border-color: var(--border-strong); background: var(--accent-soft); }

/* === Keyboard navigation =========================================
   Row picked by j/k gets a left-bar accent + soft background. */
table.claims tbody tr.kbd-selected {
	background: var(--accent-soft) !important;
	box-shadow: inset 3px 0 0 0 var(--accent);
}

/* Admin feature switches (M20a). */
.admin-settings { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--border); }
.admin-settings h2 { font-size: 15px; margin: 0 0 12px; }
.switch-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 14px;
	border: 1px solid var(--border);
	border-radius: 8px;
	max-width: 680px;
}
.switch-row form { margin: 0; }

/* === Service-visit job line cards (M17 work order) ================
   Replaces the .import-report reuse: a proper card per job line, with a
   header (description + tags), an optional parts table, an add-part row,
   and the close/escalate actions. */
.jl-card {
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 12px 14px;
	margin: 0 0 12px;
	background: var(--bg-elev, #fff);
}
.jl-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.jl-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jl-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.jl-parts { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13px; }
.jl-parts th, .jl-parts td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--border); }
.jl-parts th { color: var(--fg-muted); font-weight: 600; }
.jl-parts td:nth-child(2), .jl-parts th:nth-child(2),
.jl-parts td:nth-child(3), .jl-parts th:nth-child(3),
.jl-parts td:nth-child(4), .jl-parts th:nth-child(4),
.jl-parts td:nth-child(5), .jl-parts th:nth-child(5) { text-align: right; white-space: nowrap; }
.jl-parts tfoot td { border-top: 2px solid var(--border-strong, var(--border)); border-bottom: none; }

.jl-addpart { display: flex; gap: 8px; align-items: center; margin: 8px 0; flex-wrap: wrap; }
.jl-addpart input[name="pn"] { flex: 1 1 220px; }
.jl-addpart input[name="qty"] { width: 72px; }

.jl-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.jl-actions form.inline { display: flex; gap: 6px; align-items: center; }
.inline-label { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--fg-muted); }
.inline-label input { width: 90px; }

/* Work order totals block. */
.wo-totals { margin-top: 20px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--accent-soft); }
.wo-totals h3 { margin: 0 0 10px; font-size: 15px; }
.wo-grid { display: flex; gap: 28px; flex-wrap: wrap; }
.wo-cell .cs-label { color: var(--fg-muted); font-size: 12px; }
.wo-cell .cs-value { font-size: 16px; }
.wo-grand .cs-value { font-size: 18px; }

/* === M22 design pass ==============================================
   One chip family everywhere: outline pill + currentColor dot. The
   existing semantic classes keep supplying `color`; these later rules
   strip the filled backgrounds so every state chip reads the same.
   Filter chips (.kindfilter .chip) are intentionally NOT matched. */
.tag,
.statusbar .badge, .statusbar .chip,
.jl-tags .chip, .jl-tags .badge,
table.claims .badge,
.chip.claim-pending, .chip.claim-approved, .chip.claim-denied, .chip.chip-esc {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: transparent;
	border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
	white-space: nowrap;
	text-decoration: none;
}
.tag::before,
.statusbar .badge::before, .statusbar .chip::before,
.jl-tags .chip::before, .jl-tags .badge::before,
table.claims .badge::before,
.chip.claim-pending::before, .chip.claim-approved::before, .chip.claim-denied::before, .chip.chip-esc::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}
/* Dark-mode colour lifts for chips that only had light fills. */
[data-theme="dark"] .claim-pending  { color: #f0d27b; }
[data-theme="dark"] .claim-approved { color: #9cd99c; }
[data-theme="dark"] .claim-denied   { color: #f0a0a0; }
[data-theme="dark"] .chip-esc       { color: #f0c490; }
[data-theme="dark"] .badge-stage-new           { color: #93b4f5; }
[data-theme="dark"] .badge-stage-diagnosis     { color: #b39ddb; }
[data-theme="dark"] .badge-stage-parts-ordered { color: #f0c490; }
[data-theme="dark"] .badge-stage-parts-waiting { color: #f0a987; }
[data-theme="dark"] .badge-stage-repair        { color: #7fd4e4; }
[data-theme="dark"] .badge-stage-resolved      { color: #9cd99c; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .claim-pending  { color: #f0d27b; }
	:root:not([data-theme="light"]) .claim-approved { color: #9cd99c; }
	:root:not([data-theme="light"]) .claim-denied   { color: #f0a0a0; }
	:root:not([data-theme="light"]) .chip-esc       { color: #f0c490; }
	:root:not([data-theme="light"]) .badge-stage-new           { color: #93b4f5; }
	:root:not([data-theme="light"]) .badge-stage-diagnosis     { color: #b39ddb; }
	:root:not([data-theme="light"]) .badge-stage-parts-ordered { color: #f0c490; }
	:root:not([data-theme="light"]) .badge-stage-parts-waiting { color: #f0a987; }
	:root:not([data-theme="light"]) .badge-stage-repair        { color: #7fd4e4; }
	:root:not([data-theme="light"]) .badge-stage-resolved      { color: #9cd99c; }
}

/* Case header: accent bar, mono case id, chips inline, key facts row. */
.case-head { border-left: 3px solid var(--accent); border-radius: 0; padding: 2px 0 2px 14px; margin: 4px 0 18px; }
.case-head-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.case-head-row .statusbar { margin: 0; }
.case-head-row .btn { margin-left: auto; }
.case-id { font: 600 21px/1.2 ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; color: var(--fg); }
.case-facts { margin-top: 7px; font-size: 13px; color: var(--fg-muted); }
.case-facts code { font-size: 12px; }

/* Timeline spine: vertical line + a colour-coded dot per event family. */
ol.timeline { position: relative; padding-left: 24px; }
ol.timeline::before { content: ""; position: absolute; left: 5px; top: 10px; bottom: 10px; width: 2px; background: var(--border); }
ol.timeline > li { position: relative; }
.tl-dot { position: absolute; left: -23px; top: 9px; width: 11px; height: 11px; border-radius: 50%; background: currentColor; border: 2px solid var(--bg); }
.tl-blue   { color: #185fa5; }
.tl-gray   { color: #5f5e5a; }
.tl-green  { color: #3b6d11; }
.tl-purple { color: #534ab7; }
.tl-amber  { color: #854f0b; }
.tl-orange { color: #9a3412; }
.tl-teal   { color: #0f6e56; }
.tl-red    { color: #a32d2d; }
[data-theme="dark"] .tl-blue   { color: #7aa3d1; }
[data-theme="dark"] .tl-gray   { color: #b4b2a9; }
[data-theme="dark"] .tl-green  { color: #9cd99c; }
[data-theme="dark"] .tl-purple { color: #b39ddb; }
[data-theme="dark"] .tl-amber  { color: #f0d27b; }
[data-theme="dark"] .tl-orange { color: #f0a987; }
[data-theme="dark"] .tl-teal   { color: #5dcaa5; }
[data-theme="dark"] .tl-red    { color: #f0a0a0; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .tl-blue   { color: #7aa3d1; }
	:root:not([data-theme="light"]) .tl-gray   { color: #b4b2a9; }
	:root:not([data-theme="light"]) .tl-green  { color: #9cd99c; }
	:root:not([data-theme="light"]) .tl-purple { color: #b39ddb; }
	:root:not([data-theme="light"]) .tl-amber  { color: #f0d27b; }
	:root:not([data-theme="light"]) .tl-orange { color: #f0a987; }
	:root:not([data-theme="light"]) .tl-teal   { color: #5dcaa5; }
	:root:not([data-theme="light"]) .tl-red    { color: #f0a0a0; }
}
ol.timeline .tag { vertical-align: 1px; margin-left: 6px; }
.note-withdrawn .tl-dot { opacity: 0.5; }

/* KPI cards: semantic dot + micro-trend. */
.kpi-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.dot-blue  { background: var(--accent); }
.dot-green { background: #3b6d11; }
.dot-amber { background: #b45309; }
[data-theme="dark"] .dot-green { background: #9cd99c; }
[data-theme="dark"] .dot-amber { background: #f0d27b; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .dot-green { background: #9cd99c; }
	:root:not([data-theme="light"]) .dot-amber { background: #f0d27b; }
}
.kpi-trend { color: var(--badge-open-fg); }

/* Cases table: mono case id + age under the opened date. */
a.case-num { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-weight: 600; }
.age { font-size: 11px; color: var(--fg-muted); margin-top: 1px; }
.age-warn { color: var(--badge-open-fg); }

/* Copy-to-clipboard button (VIN). */
.copy-btn {
	background: none;
	border: 0;
	padding: 1px 3px;
	margin-left: 4px;
	color: var(--fg-muted);
	cursor: pointer;
	vertical-align: middle;
	border-radius: 3px;
	line-height: 0;
}
.copy-btn:hover { color: var(--fg); background: var(--accent-soft); }
.copy-btn.copied { color: #22a06b; }
.vin-wrap { white-space: nowrap; }

/* Submit feedback (M23d): spinner on the submit button while in flight. */
.btn.is-submitting { position: relative; opacity: 0.85; cursor: progress; }
.btn.is-submitting::before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: 7px;
	vertical-align: -1px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: stele-spin 0.6s linear infinite;
}
@keyframes stele-spin { to { transform: rotate(360deg); } }
/* HTMX forms (note, stage, part, classify, transfer, close) show the same
   spinner while their request is in flight. */
form.htmx-request button[type="submit"],
form.htmx-request .btn[type="submit"] {
	position: relative;
	opacity: 0.85;
	cursor: progress;
	pointer-events: none;
}
form.htmx-request button[type="submit"]::before,
form.htmx-request .btn[type="submit"]::before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: 7px;
	vertical-align: -1px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: stele-spin 0.6s linear infinite;
}

/* @mention chips under a note (M23c). */
.note-mentions { margin-top: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; }

/* Upload progress bar (M23e). */
.upload-progress { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.upload-progress-track { flex: 1 1 auto; height: 8px; background: var(--accent-soft); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.upload-progress-fill { height: 100%; width: 0; background: var(--accent); transition: width 0.15s ease; }
.upload-pct { flex: 0 0 auto; font-size: 12px; color: var(--fg-muted); min-width: 34px; text-align: right; }

/* @mention autocomplete menu (M24). Floats under the note textarea, anchored
   in document coordinates by stele.js so it survives HTMX swaps. */
.mention-menu {
	position: absolute;
	z-index: 50;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 8px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
	padding: 4px;
	max-width: 260px;
}
.mention-item {
	padding: 6px 10px;
	border-radius: 6px;
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
}
.mention-item.is-active,
.mention-item:hover { background: var(--accent-soft); color: var(--accent); }

/* Global feedback widget (fixed bottom-right, theme-aware, does not obscure
   content). Toggled open/closed via the hidden attribute in layout.templ. */
.feedback-widget {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 50;
}
/* Collapsed by default to a small circular icon so it does not dominate the
   page; clicking it pops the form open above the icon. */
.feedback-toggle {
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border-strong);
	background: var(--accent);
	color: var(--accent-fg);
	cursor: pointer;
	opacity: 0.85;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.feedback-toggle:hover,
.feedback-toggle[aria-expanded="true"] {
	opacity: 1;
}
.feedback-panel {
	position: absolute;
	right: 0;
	bottom: 3.25rem;
	width: 20rem;
	max-width: calc(100vw - 2rem);
	padding: 0.75rem;
	border: 1px solid var(--border);
	border-radius: 0.5rem;
	background: var(--bg-elev);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
/* The class rule above sets display:flex, which would otherwise override the
   UA [hidden] rule and keep the panel permanently open. Re-assert hidden with
   higher specificity so the toggle actually collapses it. */
.feedback-panel[hidden] {
	display: none;
}
.feedback-panel textarea {
	width: 100%;
	box-sizing: border-box;
	resize: vertical;
}
.feedback-actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
}
@media print {
	.feedback-widget { display: none; }
}

/* Battery action forms (ADR-020): each install/remove/SoH/retire form is a
   card in the .grid-2 layout, reusing the .form chrome. */
.battery-actions .grid-2 > form {
	border: 1px solid var(--border);
	border-radius: 0.5rem;
	padding: 0.75rem 1rem;
	background: var(--bg-elev);
}
.battery-actions h3 {
	margin: 0 0 0.5rem;
	font-size: 0.95rem;
}

/* Full parser-output page: monospace, scrollable code block (ADR-020). */
.code-block {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.8rem;
	line-height: 1.45;
	white-space: pre;
	overflow-x: auto;
	max-height: 75vh;
	padding: 0.85rem 1rem;
	border: 1px solid var(--border);
	border-radius: 0.5rem;
	background: var(--bg-elev);
	color: var(--fg);
}

/* Parser-output key/value tables (ADR-020). */
.kv-table { max-width: 760px; }
.kv-table .kv-key {
	text-align: left;
	width: 16rem;
	white-space: nowrap;
	color: var(--fg-muted);
	font-weight: 600;
}
.raw-json { margin-top: 1.25rem; }
.raw-json summary { cursor: pointer; color: var(--fg-muted); margin-bottom: 0.5rem; }

/* Toast for HTMX validation/network errors (click or wait to dismiss). */
.error-toast {
	position: fixed;
	top: 1rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000;
	max-width: min(90vw, 36rem);
	padding: 0.7rem 1rem;
	border: 1px solid var(--border-strong);
	border-radius: 0.5rem;
	background: #c0392b;
	color: #fff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
	cursor: pointer;
	font-size: 0.9rem;
}

/* Parts table in the narrow case aside: keep P/N and date on one line, allow
   horizontal scroll instead of breaking values mid-string. */
.table-scroll { overflow-x: auto; }
.parts-table { font-size: 0.82rem; }
.parts-table th, .parts-table td { padding: 0.35rem 0.5rem; vertical-align: top; }
.parts-table th { white-space: nowrap; }
.parts-table td:first-child { white-space: nowrap; }
.parts-table td:nth-child(6) { white-space: nowrap; }

/* Parts as a full-width card above Actions (moved out of the narrow aside). */
.case-parts { margin-top: 1.25rem; }
.case-parts .parts-table { font-size: 0.9rem; }

/* BMS test charts container. */
.bms-charts { margin: 0.5rem 0 1.5rem; min-height: 3rem; }