/*!
 * Facility Management – Mobile-Usability-Ergänzungen.
 *
 * Reine Zusatz-/Override-Styles für die mobile Bedienbarkeit (CLAUDE.md §7,
 * docs/frontend-design-guidelines.md). Basis bleibt das vorkompilierte
 * TailAdmin-Designsystem; hier NUR mobile-first Verbesserungen. Alle
 * eingreifenden Regeln stehen in `max-width`-Media-Queries, damit die
 * Desktop-Ansicht unverändert bleibt. Keine externen Abhängigkeiten.
 *
 * Scope: #fm-app (App-Shell). Nutzt die vorhandenen CSS-Variablen
 * (--fm-primary, --fm-stroke, --fm-border, --fm-body, --fm-white, --fm-muted-bg).
 */

/* ---------------------------------------------------------------------------
 * Immer aktiv (auch Desktop unkritisch): Tabellen horizontal scrollbar halten,
 * damit breite Tabellen mobil NIE unbrauchbar aus dem Layout brechen.
 * .fm-table-wrap umschließt bereits ~116 Tabellen-Templates.
 * ------------------------------------------------------------------------ */
#fm-app .fm-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Opt-in: Tabelle als Kartenliste auf Mobile (td brauchen data-label="…"). */
#fm-app .fm-actions-sticky {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1rem;
}

/* Verständlicher Leerzustand (Utility, modulübergreifend nutzbar). */
#fm-app .fm-empty-state {
	text-align: center;
	padding: 2rem 1rem;
	color: var(--fm-body, #64748b);
}

#fm-app .fm-empty-state svg {
	width: 40px;
	height: 40px;
	opacity: 0.5;
	margin: 0 auto 0.5rem;
}

/* ---------------------------------------------------------------------------
 * Tablet (<= 768px): Touch-Ziele leicht vergrößern, Planer-Spalten stapeln
 * spätestens hier (Tourenplanung auf Tablet bedienbar).
 * ------------------------------------------------------------------------ */
@media ( max-width: 768px ) {
	#fm-app .fm-btn {
		min-height: 42px;
	}

	#fm-app .fm-tour-planner {
		grid-template-columns: 1fr;
	}

	#fm-app .fm-tour-item-actions .fm-btn {
		min-width: 44px;
	}
}

/* ---------------------------------------------------------------------------
 * Mobile (<= 640px): einspaltige Formulare, große Touch-Ziele, gestapelte
 * Aktions-/Filterleisten, klare primäre Aktion.
 * ------------------------------------------------------------------------ */
@media ( max-width: 640px ) {
	/* Formularraster einspaltig. */
	#fm-app .fm-grid-2,
	#fm-app .fm-grid-3,
	#fm-app .fm-field-grid {
		grid-template-columns: 1fr;
	}

	/* Flex-Reihen (Filter, Inline-Formulare, Inline-Aktionen) untereinander. */
	#fm-app .fm-form-inline,
	#fm-app .fm-inline-form,
	#fm-app .fm-comment-form,
	#fm-app .fm-filterbar,
	#fm-app .fm-filter-row,
	#fm-app .fm-form-inline .fm-field {
		flex-direction: column;
		align-items: stretch;
	}

	/* Eingaben füllen die Breite; 16px verhindert das iOS-Auto-Zoom. */
	#fm-app .fm-input,
	#fm-app .fm-select,
	#fm-app .fm-textarea {
		width: 100%;
		min-height: 44px;
		font-size: 16px;
	}

	#fm-app .fm-textarea {
		min-height: 88px;
	}

	/* Datei-Upload (Foto) gut erreichbar. */
	#fm-app input[type="file"] {
		width: 100%;
		padding: 0.5rem 0;
	}

	/* Touch-freundliche Buttons; im Formular-Fluss volle Breite. */
	#fm-app .fm-btn {
		min-height: 46px;
		padding: 0.65rem 1rem;
	}

	#fm-app form .fm-btn-primary,
	#fm-app .fm-actions .fm-btn,
	#fm-app .fm-actions-inline .fm-btn,
	#fm-app .fm-actions-sticky .fm-btn {
		width: 100%;
	}

	/* Checkbox/Radio leichter treffbar. */
	#fm-app .fm-field input[type="checkbox"],
	#fm-app .fm-field input[type="radio"] {
		width: 20px;
		height: 20px;
	}

	/* Seitenkopf mit Aktionen untereinander statt überlaufend. */
	#fm-app .fm-page-head-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}

	/* Sticky-Aktionsleiste: primäre Aktion bleibt am unteren Rand sichtbar. */
	#fm-app .fm-actions-sticky {
		position: sticky;
		bottom: 0;
		z-index: 30;
		flex-direction: column;
		gap: 0.5rem;
		margin: 1rem -1rem -1rem;
		padding: 0.75rem 1rem;
		background: var(--fm-white, #fff);
		border-top: 1px solid var(--fm-stroke, #e2e8f0);
		box-shadow: 0 -2px 6px rgba( 15, 23, 42, 0.06 );
	}

	/* Tabelle -> Kartenliste (opt-in via .fm-table-cards; td tragen data-label). */
	#fm-app .fm-table-cards,
	#fm-app .fm-table-cards tbody,
	#fm-app .fm-table-cards tr,
	#fm-app .fm-table-cards td {
		display: block;
		width: 100%;
	}

	#fm-app .fm-table-cards thead {
		display: none;
	}

	#fm-app .fm-table-cards tr {
		border: 1px solid var(--fm-stroke, #e2e8f0);
		border-radius: 8px;
		margin-bottom: 0.75rem;
		padding: 0.5rem 0.85rem;
		background: var(--fm-white, #fff);
	}

	#fm-app .fm-table-cards td {
		border: 0;
		padding: 0.35rem 0;
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		text-align: right;
	}

	#fm-app .fm-table-cards td::before {
		content: attr( data-label );
		font-weight: 600;
		color: var(--fm-body, #475569);
		text-align: left;
	}

	/* Aktionszelle (data-label leer) volle Breite, Buttons untereinander. */
	#fm-app .fm-table-cards td[data-label=""] {
		display: block;
		text-align: left;
	}

	#fm-app .fm-table-cards td[data-label=""]::before {
		content: "";
	}

	/* Portal-/Sektionsnavigation bleibt scrollbar statt zu brechen. */
	#fm-app .fm-portal-nav,
	#fm-app .fm-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}