/*!
 * Facility Management – projektspezifische Zusatzstyles.
 * Basis-Designsystem: public/vendor/tailadmin/tailadmin.css
 * Nur Ergänzungen, die nicht zum Designsystem gehören (CLAUDE.md §7).
 */

/* Druckansicht: Navigation und Topbar ausblenden (Basis für PDF-/Print-Views). */
@media print {
	#fm-app .fm-sidebar,
	#fm-app .fm-overlay,
	#fm-app .fm-topbar,
	#fm-app .fm-footer {
		display: none !important;
	}

	#fm-app .fm-shell {
		border: none;
		min-height: 0;
	}
}

/* Sidebar-Hauptnavigation: Fachgruppen-Überschriften. Die gruppierte Navigation
   bündelt die Module fachlich wie die Modulsteuerung (Finanzen, Personal & Zeit,
   …); Dashboard steht oben, Einstellungen/Hilfe unten. Ergänzung zum Basis-
   Designsystem (CLAUDE.md §7). */
#fm-app .fm-nav-group-title {
	margin: 1.1rem 0 0.15rem;
	padding: 0 0.85rem;
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--fm-sidebar-text, #dee4ee);
	opacity: 0.55;
}

/* Greift nur, wenn kein Dashboard-Link vorangeht (z. B. fehlende Berechtigung):
   verhindert, dass die erste Überschrift am oberen Rand klebt. */
#fm-app .fm-nav-group-title:first-child {
	margin-top: 0.35rem;
}

/* Trennlinie oberhalb der unbeschrifteten Schlussgruppe (Einstellungen/Hilfe),
   damit sie sich sichtbar von der letzten Fachgruppe absetzt. */
#fm-app .fm-nav-divider {
	margin: 0.85rem 0.85rem 0.35rem;
	border: 0;
	border-top: 1px solid var(--fm-sidebar-text, #dee4ee);
	opacity: 0.18;
}

/* Recruiting: öffentliche Ansichten ([fm_jobs]/[fm_job_application]) rendern
   außerhalb der App-Shell. Schmaler, zentrierter Lesebereich; das übrige
   Design (Karten, Buttons, Felder) stammt aus dem Basis-Designsystem. */
#fm-app.fm-recruiting-public {
	display: block;
	background: transparent;
}

#fm-app .fm-public-wrap {
	max-width: 760px;
	margin: 0 auto;
	padding: 1rem 0;
}

/* Mehrzeilige Freitexte (Anschreiben, Notizen) mit erhaltenen Umbrüchen. */
#fm-app .fm-pre-wrap {
	white-space: pre-wrap;
	word-break: break-word;
}

/* Bewerbungsverlauf: kompakte, gut lesbare Liste. */
#fm-app .fm-timeline li {
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--fm-border, #e2e8f0);
}

#fm-app .fm-timeline li:last-child {
	border-bottom: none;
}

/* Lohnvorbereitung (payroll): Filter-Chips, kompakte Inline-Formulare und
   Feldraster. Ergänzungen zum Basis-Designsystem (CLAUDE.md §7). */
#fm-app .fm-filterbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

#fm-app .fm-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.35rem 0.85rem;
	border: 1px solid var(--fm-stroke, #e2e8f0);
	border-radius: 999px;
	font-size: 0.85rem;
	color: var(--fm-body, #475569);
	background: var(--fm-white, #fff);
	text-decoration: none;
}

#fm-app .fm-chip:hover {
	border-color: var(--fm-primary, #3b82f6);
}

#fm-app .fm-chip-active {
	background: var(--fm-primary, #3b82f6);
	border-color: var(--fm-primary, #3b82f6);
	color: var(--fm-white, #fff);
}

#fm-app .fm-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

#fm-app .fm-chip-count {
	margin-left: 0.4rem;
	font-weight: 600;
	opacity: 0.85;
}

/* Warn-/Gefahr-Karte (z. B. kritische Dispo-Warnungen). */
#fm-app .fm-card-danger {
	border-left: 4px solid var(--fm-danger, #ef4444);
}

#fm-app .fm-form-inline {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1rem;
}

#fm-app .fm-form-inline .fm-field {
	margin-bottom: 0;
}

#fm-app .fm-field-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1rem;
}

#fm-app .fm-field-check label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 500;
}

#fm-app .fm-static-value {
	margin: 0;
	padding: 0.5rem 0;
	color: var(--fm-body, #475569);
}

/* Offers-Modul: Hilfsklassen (Phase 17) */
#fm-app .fm-grid-3 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1rem;
}

#fm-app .fm-field-actions {
	display: flex;
	align-items: flex-end;
}

#fm-app .fm-text-right {
	text-align: right;
}

#fm-app .fm-text-sm {
	font-size: 0.85em;
}

#fm-app .fm-callout {
	margin-top: 0.75rem;
	padding: 0.5rem 0.75rem;
	border-left: 3px solid var(--fm-border, #cbd5e1);
	background: var(--fm-muted-bg, #f8fafc);
	border-radius: 0 6px 6px 0;
}

#fm-app .fm-callout-muted {
	color: var(--fm-body, #475569);
}

/* Kundenportal: portal-interne Navigation (Sub-Menü innerhalb der View 'portal'). */
#fm-app .fm-portal-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--fm-border, #e2e8f0);
}

#fm-app .fm-portal-nav-item {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.85rem;
	border-radius: 999px;
	font-size: 0.9em;
	font-weight: 500;
	color: var(--fm-body, #475569);
	background: var(--fm-muted-bg, #f1f5f9);
	text-decoration: none;
}

#fm-app .fm-portal-nav-item:hover,
#fm-app .fm-portal-nav-item:focus {
	background: var(--fm-border, #e2e8f0);
}

#fm-app .fm-portal-nav-item.is-active {
	color: #fff;
	background: var(--fm-primary, #3b82f6);
}

/* Finanzen (billing): modulinterne Sub-Navigation (Tabs innerhalb der View
   'billing'). Pill-Tabs im Stil der Portal-Navigation; umbruchfähig, da viele
   Einträge. Ergänzung zum Basis-Designsystem (CLAUDE.md §7).
   Hinweis: Das aktive Theme färbt Links zusätzlich über -webkit-text-fill-color
   ein; dieses muss zusammen mit color gesetzt werden, sonst bleibt die
   Theme-Linkfarbe sichtbar. --fm-muted-bg/--fm-border sind im aktuellen
   TailAdmin-Build leer, daher feste Werte bzw. --fm-stroke verwenden. */
#fm-app .fm-subnav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 1.5rem;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid var(--fm-stroke, #e2e8f0);
}

#fm-app .fm-subnav-link {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.85rem;
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--fm-body, #475569);
	-webkit-text-fill-color: var(--fm-body, #475569);
	background: #f1f5f9;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

#fm-app .fm-subnav-link:hover,
#fm-app .fm-subnav-link:focus {
	background: var(--fm-stroke, #e2e8f0);
	color: var(--fm-dark, #1c2434);
	-webkit-text-fill-color: var(--fm-dark, #1c2434);
}

#fm-app .fm-subnav-link.is-active,
#fm-app .fm-subnav-link.is-active:hover,
#fm-app .fm-subnav-link.is-active:focus {
	color: #fff;
	-webkit-text-fill-color: #fff;
	background: var(--fm-primary, #3c50e0);
}

/* Bindungs-Filter der Geräteübersicht (Phase 72) — lokale Pill-Reiter im Kartenkopf. */
#fm-app .fm-pwa-devices-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 1rem;
}

#fm-app .fm-pwa-devices-filter-tab {
	display: inline-flex;
	align-items: center;
	padding: 0.35rem 0.8rem;
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--fm-body, #475569);
	-webkit-text-fill-color: var(--fm-body, #475569);
	background: #f1f5f9;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

#fm-app .fm-pwa-devices-filter-tab:hover,
#fm-app .fm-pwa-devices-filter-tab:focus {
	background: var(--fm-stroke, #e2e8f0);
	color: var(--fm-dark, #1c2434);
	-webkit-text-fill-color: var(--fm-dark, #1c2434);
}

#fm-app .fm-pwa-devices-filter-tab.is-active,
#fm-app .fm-pwa-devices-filter-tab.is-active:hover,
#fm-app .fm-pwa-devices-filter-tab.is-active:focus {
	color: #fff;
	-webkit-text-fill-color: #fff;
	background: var(--fm-primary, #3c50e0);
}

@media (prefers-reduced-motion: reduce) {
	#fm-app .fm-pwa-devices-filter-tab { transition: none; }
}

/* Zähler-Badge je Reiter (Phase 74) — Anzahl Geräte im jeweiligen Filter. */
#fm-app .fm-pwa-devices-filter-count {
	display: inline-block;
	min-width: 1.3rem;
	margin-left: 0.35rem;
	padding: 0 0.35rem;
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.1);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
}

#fm-app .fm-pwa-devices-filter-tab.is-active .fm-pwa-devices-filter-count {
	background: rgba(255, 255, 255, 0.28);
	color: #fff;
	-webkit-text-fill-color: #fff;
}

/* Warn-Hinweistext (z. B. destruktive Einstellungen wie Daten-Löschung). */
#fm-app .fm-text-danger {
	color: var(--fm-danger);
	font-weight: 500;
}

/* Demodaten-Fortschrittsbalken */
#fm-app .fm-progress-track {
	width: 100%;
	height: 14px;
	background: var(--fm-stroke);
	border-radius: 999px;
	overflow: hidden;
}
#fm-app .fm-progress-bar {
	height: 100%;
	width: 0;
	background: var(--fm-primary);
	transition: width 0.25s ease;
}
#fm-app .fm-demo-progress {
	margin-top: 1rem;
}

/* Trenner in Formularen/Karten */
#fm-app .fm-divider {
	border: 0;
	border-top: 1px solid var(--fm-stroke);
	margin: 1.25rem 0;
}

/* Disposition – Routing: Kennzahlen einer Route (Fahrzeit, Strecke, …). */
#fm-app .fm-meta-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0 0 0.75rem;
	padding: 0;
	list-style: none;
	font-size: 0.9em;
}

#fm-app .fm-meta-label {
	color: var(--fm-body, #64748b);
	margin-right: 0.35rem;
}

#fm-app .fm-meta-value {
	font-weight: 600;
}

/* Formularvalidierung: Feldfehler + Zusammenfassung (FM_Core_Notices). */
#fm-app .fm-field-error {
	margin: 0.25rem 0 0;
	font-size: 0.85em;
	color: var(--fm-danger, #dc2626);
}

#fm-app .fm-field.has-error .fm-input,
#fm-app .fm-field.has-error .fm-select,
#fm-app .fm-field.has-error .fm-textarea {
	border-color: var(--fm-danger, #dc2626);
}

#fm-app .fm-error-summary {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--fm-danger, #dc2626);
	border-left-width: 3px;
	border-radius: 6px;
	background: #fef2f2;
	color: #991b1b;
}

#fm-app .fm-error-summary ul {
	margin: 0.35rem 0 0;
	padding-left: 1.1rem;
}

/* „Wird gespeichert …": Doppel-Absenden verhindern (fm-app.js). */
#fm-app .fm-is-busy {
	opacity: 0.6;
	pointer-events: none;
}

/* Disposition – Routing: Kartenplatzhalter (Karte folgt in späterer Phase;
   bewusst ohne externe Bibliothek). data-stops trägt die geocodierten Stopps. */
#fm-app .fm-dispatch-map {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 120px;
	margin: 0 0 1rem;
	padding: 1rem;
	border: 1px dashed var(--fm-stroke, #cbd5e1);
	border-radius: 8px;
	background: var(--fm-muted-bg, #f8fafc);
	text-align: center;
}

/* Portal-Kommunikation: Kommentar-/Verlaufsthread (Kundenportal 2.0). Klare
   Kennzeichnung „Ihre Nachricht" (rechts/grün) vs. „Antwort vom Team" (links/blau)
   vs. „Statusänderung" (neutral). Additiv zum Basis-Designsystem (CLAUDE.md §7),
   mobil nutzbar (volle Breite, ausreichende Abstände). */
#fm-app .fm-comment-list {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

#fm-app .fm-comment {
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--fm-border, #e2e8f0);
	border-left: 3px solid var(--fm-stroke, #cbd5e1);
	border-radius: 8px;
	background: #fff;
}

#fm-app .fm-comment-own {
	border-left-color: #16a34a;
	background: var(--fm-muted-bg, #f0fdf4);
}

#fm-app .fm-comment-team {
	border-left-color: #2563eb;
	background: var(--fm-muted-bg, #eff6ff);
}

#fm-app .fm-comment-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem;
	margin-bottom: 0.25rem;
	font-size: 0.85rem;
}

#fm-app .fm-comment p {
	margin: 0.25rem 0 0;
	word-break: break-word;
}

#fm-app .fm-timeline-status .fm-comment-meta {
	margin-bottom: 0;
}

#fm-app .fm-inline-form {
	margin-top: 0.375rem;
}

#fm-app .fm-form-intro {
	margin: 0.75rem 0 0.5rem;
}

/* Audit-Log: kompakte Schlüssel/Wert-Darstellung der Vorher-/Nachher-Werte. */
#fm-app .fm-nowrap {
	white-space: nowrap;
}

#fm-app .fm-field-hint {
	margin: 0.375rem 0 0;
	font-size: 0.8rem;
	color: var(--fm-muted-fg, #6b7280);
}

#fm-app .fm-details > summary {
	cursor: pointer;
	color: var(--fm-link, #2563eb);
	font-size: 0.85rem;
}

#fm-app .fm-details-body {
	margin-top: 0.5rem;
	padding: 0.5rem 0.75rem;
	border-left: 3px solid var(--fm-border, #e5e7eb);
	background: var(--fm-muted-bg, #f9fafb);
}

#fm-app .fm-kv-head {
	margin: 0.5rem 0 0.125rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--fm-muted-fg, #6b7280);
}

#fm-app .fm-kv-head:first-child {
	margin-top: 0;
}

#fm-app .fm-kv {
	display: grid;
	grid-template-columns: minmax(8rem, max-content) 1fr;
	gap: 0.125rem 0.75rem;
	margin: 0;
	font-size: 0.85rem;
}

#fm-app .fm-kv dt {
	font-weight: 600;
	color: var(--fm-muted-fg, #374151);
}

#fm-app .fm-kv dd {
	margin: 0;
	word-break: break-word;
}

/* ---------- Modulsteuerung ---------- */
#fm-app .fm-module-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

#fm-app .fm-module-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: flex-start;
	justify-content: space-between;
	padding: 1rem 0;
	border-top: 1px solid var(--fm-border, #e2e8f0);
}

#fm-app .fm-module-row:first-child {
	border-top: 0;
}

#fm-app .fm-module-main {
	flex: 1 1 20rem;
	min-width: 0;
}

#fm-app .fm-module-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.35rem;
}

#fm-app .fm-module-name {
	font-weight: 600;
	color: var(--fm-dark, #1e293b);
}

#fm-app .fm-module-action {
	flex: 0 0 auto;
	text-align: right;
	min-width: 8rem;
}

#fm-app .fm-module-hint {
	margin: 0.4rem 0 0;
	max-width: 22rem;
	margin-left: auto;
}

@media (max-width: 640px) {
	#fm-app .fm-module-action {
		text-align: left;
		min-width: 0;
	}

	#fm-app .fm-module-hint {
		margin-left: 0;
	}
}

/* ------------------------------------------------------------------ *
 * Import-/Onboarding-Assistent (Wizard) — additiv, mobile-first
 * ------------------------------------------------------------------ */

#fm-app .fm-wizard-steps {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0.25rem 0;
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

#fm-app .fm-wizard-step {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex: 0 0 auto;
	padding: 0.4rem 0.75rem;
	border: 1px solid #e5e7eb;
	border-radius: 999px;
	background: #fff;
	color: #6b7280;
	font-size: 0.85rem;
	white-space: nowrap;
}

#fm-app .fm-wizard-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 50%;
	background: #e5e7eb;
	color: #374151;
	font-size: 0.8rem;
	font-weight: 600;
	flex: 0 0 auto;
}

#fm-app .fm-wizard-step.is-current {
	border-color: #3c50e0;
	color: #1f2937;
	font-weight: 600;
}

#fm-app .fm-wizard-step.is-current .fm-wizard-step-num {
	background: #3c50e0;
	color: #fff;
}

#fm-app .fm-wizard-step.is-done {
	color: #059669;
	border-color: #a7f3d0;
}

#fm-app .fm-wizard-step.is-done .fm-wizard-step-num {
	background: #059669;
	color: #fff;
}

#fm-app .fm-wizard-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-top: 1.25rem;
}

/* Auswahl-Karten (Radio/Checkbox) für Modus/Bereiche/Importart */
#fm-app .fm-choice-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0.5rem 0 0;
}

#fm-app .fm-choice-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 0.5rem;
	margin: 0.5rem 0 0;
}

#fm-app .fm-choice {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 0.75rem 0.9rem;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	background: #fff;
	cursor: pointer;
}

#fm-app .fm-choice:hover {
	border-color: #c7cbe6;
}

#fm-app .fm-choice input {
	margin-top: 0.2rem;
	flex: 0 0 auto;
}

#fm-app .fm-choice-body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

#fm-app .fm-choice-title {
	font-weight: 600;
	color: #1f2937;
}

#fm-app .fm-choice-desc {
	font-size: 0.85rem;
	color: #6b7280;
}

#fm-app .fm-choice.is-disabled {
	opacity: 0.55;
	cursor: not-allowed;
	background: #f9fafb;
}

@media (max-width: 640px) {
	#fm-app .fm-wizard-nav {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	#fm-app .fm-wizard-nav .fm-btn,
	#fm-app .fm-wizard-nav form,
	#fm-app .fm-wizard-nav form .fm-btn {
		width: 100%;
	}
}

/* Geführtes Erst-Onboarding (Landing): Schrittliste + Vorlagen-Details. Additiv. */
#fm-app .fm-onboarding-steps {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

#fm-app .fm-onboarding-step {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--fm-border, #e5e7eb);
	border-radius: 0.5rem;
	background: var(--fm-surface, #fff);
}

#fm-app .fm-onboarding-step-main {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex: 1 1 16rem;
}

#fm-app .fm-onboarding-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--fm-accent-soft, #eef2ff);
	color: var(--fm-accent-strong, #3730a3);
	font-weight: 600;
	flex: 0 0 auto;
}

#fm-app .fm-onboarding-step-label {
	font-weight: 600;
	margin-right: 0.5rem;
}

#fm-app .fm-onboarding-step-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

#fm-app .fm-onboarding-step-actions form {
	margin: 0;
}

#fm-app .fm-onboarding-details > summary {
	cursor: pointer;
	font-weight: 600;
	padding: 0.25rem 0;
}

@media (max-width: 640px) {
	#fm-app .fm-onboarding-step {
		flex-direction: column;
		align-items: stretch;
	}

	#fm-app .fm-onboarding-step-actions {
		justify-content: flex-start;
	}
}

/* Angebots-Positions-Picker: Live-Suche nach Leistungen (Servicekatalog) und
   Produkten (Inventar) über dem Positionsformular. Ergänzung zum Basis-
   Designsystem (CLAUDE.md §7). */
#fm-app .fm-picker-bar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
	margin-bottom: 0.5rem;
	padding: 1rem;
	border: 1px dashed var(--fm-stroke, #e2e8f0);
	border-radius: 8px;
	background: var(--fm-gray-50, #f8fafc);
}

#fm-app .fm-item-picker {
	position: relative;
	margin-bottom: 0;
}

#fm-app .fm-picker-results {
	position: absolute;
	z-index: 40;
	top: 100%;
	left: 0;
	right: 0;
	margin: 0.25rem 0 0;
	padding: 0.25rem;
	list-style: none;
	max-height: 16rem;
	overflow-y: auto;
	background: var(--fm-white, #fff);
	border: 1px solid var(--fm-stroke, #e2e8f0);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

#fm-app .fm-picker-option {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.5rem 0.65rem;
	border-radius: 6px;
	cursor: pointer;
}

#fm-app .fm-picker-option:hover,
#fm-app .fm-picker-option.is-active {
	background: var(--fm-primary, #3b82f6);
	color: #fff;
}

#fm-app .fm-picker-option-meta {
	font-size: 0.78rem;
	opacity: 0.7;
	white-space: nowrap;
}

#fm-app .fm-picker-message {
	padding: 0.5rem 0.65rem;
	color: var(--fm-body, #64748b);
	font-size: 0.85rem;
}

#fm-app .fm-picker-hint {
	margin: 0 0 1rem;
	font-size: 0.8rem;
	color: var(--fm-body, #64748b);
}

/* Angebotsformular: Positionen direkt in der Maske (dynamische Liste + Picker). */
#fm-app .fm-offer-items-section {
	margin: 1.5rem 0 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--fm-stroke, #e2e8f0);
}

#fm-app .fm-form-section-title {
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 0.75rem;
}

#fm-app .fm-offer-items {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

#fm-app .fm-offer-item {
	padding: 0.65rem;
	border: 1px solid var(--fm-stroke, #e2e8f0);
	border-radius: 8px;
	background: var(--fm-gray-50, #f8fafc);
}

#fm-app .fm-offer-item-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

#fm-app .fm-offer-item-title {
	flex: 1 1 200px;
	min-width: 160px;
}

#fm-app .fm-offer-item-qty,
#fm-app .fm-offer-item-price,
#fm-app .fm-offer-item-tax {
	flex: 0 0 5.5rem;
	width: 5.5rem;
}

#fm-app .fm-offer-item-unit {
	flex: 0 0 8rem;
	width: 8rem;
}

#fm-app .fm-offer-item-opt {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.8rem;
	white-space: nowrap;
}

#fm-app .fm-offer-item-remove {
	flex: 0 0 auto;
	font-size: 1.1rem;
	line-height: 1;
	padding: 0.3rem 0.6rem;
}

#fm-app .fm-offer-item-desc {
	margin-top: 0.5rem;
	font-size: 0.85rem;
}

#fm-app .fm-offer-items-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 0.85rem;
}

#fm-app .fm-offer-items-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.85rem;
	font-size: 0.9rem;
}

#fm-app .fm-offer-items-summary strong {
	font-variant-numeric: tabular-nums;
}

#fm-app .fm-offer-items-empty {
	margin: 0.5rem 0;
}

/* Picker-Mehrfachauswahl (Angebotsformular): Checkbox-Optionen + „Übernehmen"-Fuß. */
#fm-app .fm-picker-option-multi {
	align-items: center;
	justify-content: flex-start;
	gap: 0.6rem;
}

#fm-app .fm-picker-option-multi .fm-picker-option-label {
	flex: 1 1 auto;
}

#fm-app .fm-picker-check {
	flex: 0 0 auto;
	margin: 0;
	pointer-events: none; /* Klick auf die ganze Zeile toggelt die Auswahl. */
}

#fm-app .fm-picker-footer {
	position: sticky;
	bottom: 0;
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	padding: 0.45rem 0.35rem 0.35rem;
	margin-top: 0.25rem;
	background: var(--fm-white, #fff);
	border-top: 1px solid var(--fm-stroke, #e2e8f0);
}

#fm-app .fm-picker-footer .fm-btn[disabled] {
	opacity: 0.5;
	cursor: default;
}

/* Objekt-Cockpit (Detailansicht): Tab-Badges, Zählerkacheln der Übersicht.
   Die Tab-Leiste selbst nutzt das bestehende .fm-subnav/.fm-subnav-link-Muster. */
#fm-app .fm-subnav-link .fm-badge {
	margin-left: 0.4rem;
}

#fm-app .fm-cockpit-cards {
	margin-top: 1.5rem;
}

#fm-app .fm-cockpit-card .fm-card-body {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

#fm-app .fm-cockpit-card-label {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--fm-body, #64748b);
}

#fm-app .fm-cockpit-card-count {
	margin: 0;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--fm-dark, #1c2434);
}

#fm-app .fm-cockpit-card .fm-actions-inline {
	margin-top: 0.35rem;
}

/* Notiz-Verlauf (Kunden-Detail, Tab „Notizen"): schlichte vertikale Liste. */
#fm-app .fm-note-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

#fm-app .fm-note-item {
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--fm-stroke, #e2e8f0);
}

#fm-app .fm-note-item:last-child {
	border-bottom: 0;
}

#fm-app .fm-note-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: baseline;
	margin-bottom: 0.35rem;
	font-size: 0.875rem;
}

#fm-app .fm-note-body {
	white-space: normal;
	overflow-wrap: anywhere;
}

#fm-app .fm-note-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.5rem;
}