/*!
 * Facility Management – Kundenportal: mobile-first Feinschliff.
 *
 * Portal-spezifische Ergänzungen ZUSÄTZLICH zur generischen Schicht
 * `fm-mobile-usability.css` (CLAUDE.md §7, frontend-design-guidelines §2/§8/§13).
 * Scope strikt auf den Portal-Wrapper `#fm-app .fm-portal`, damit andere Module
 * unberührt bleiben. Alle eingreifenden Regeln stehen in `max-width`-Media-Queries
 * → die Desktop-Ansicht bleibt unverändert. Keine externen Abhängigkeiten.
 *
 * Genutzte Variablen: --fm-primary, --fm-stroke, --fm-border, --fm-body, --fm-white,
 * --fm-muted-bg.
 */

/* ---------------------------------------------------------------------------
 * Immer aktiv (Desktop unkritisch): ruhige Self-Service-Karten + klare Aktionszeile.
 * ------------------------------------------------------------------------ */
#fm-app .fm-portal .fm-selfservice-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

#fm-app .fm-portal .fm-readonly-note {
	color: var(--fm-body, #64748b);
	font-size: 0.85rem;
	margin: 0.25rem 0 0;
}

/* ---------------------------------------------------------------------------
 * Tablet (<= 768px): Portal-Subnavigation gut greifbar, Karten kompakter.
 * ------------------------------------------------------------------------ */
@media ( max-width: 768px ) {
	#fm-app .fm-portal .fm-portal-nav a,
	#fm-app .fm-portal .fm-portal-nav button {
		min-height: 42px;
		display: inline-flex;
		align-items: center;
	}
}

/* ---------------------------------------------------------------------------
 * Mobile (<= 640px): einspaltig, große Primäraktionen, lesbare Detaillisten,
 * gut erreichbare Foto-Uploads, klare Status-Badges.
 * ------------------------------------------------------------------------ */
@media ( max-width: 640px ) {
	/* Portal-Subnavigation als horizontal scrollbare Pillenleiste (kein Umbruch,
	   keine abgeschnittenen Einträge); aktiver Eintrag deutlich. */
	#fm-app .fm-portal .fm-portal-nav {
		gap: 0.4rem;
		padding-bottom: 0.25rem;
	}

	#fm-app .fm-portal .fm-portal-nav a {
		white-space: nowrap;
		padding: 0.5rem 0.85rem;
		border-radius: 999px;
		background: var(--fm-muted-bg, #f1f5f9);
	}

	#fm-app .fm-portal .fm-portal-nav a.is-active,
	#fm-app .fm-portal .fm-portal-nav a[aria-current="page"] {
		background: var(--fm-primary, #2563eb);
		color: #fff;
	}

	/* Seitenkopf: Titel oben, primäre Aktion darunter in voller Breite. */
	#fm-app .fm-portal .fm-page-head-row .fm-table-actions,
	#fm-app .fm-portal .fm-page-head-row > a.fm-btn {
		width: 100%;
	}

	#fm-app .fm-portal .fm-table-actions {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		width: 100%;
	}

	#fm-app .fm-portal .fm-table-actions .fm-btn {
		width: 100%;
	}

	/* Detaillisten (dl) lesbar untereinander statt Label/Wert nebeneinander. */
	#fm-app .fm-portal .fm-detail-list > div {
		display: flex;
		flex-direction: column;
		gap: 0.1rem;
		padding: 0.4rem 0;
		border-bottom: 1px solid var(--fm-border, #eef2f7);
	}

	#fm-app .fm-portal .fm-detail-list dt {
		font-size: 0.8rem;
		color: var(--fm-body, #64748b);
	}

	#fm-app .fm-portal .fm-detail-list dd {
		margin: 0;
		font-weight: 600;
		word-break: break-word;
	}

	/* Karten-Aktionen (z. B. Angebot Annehmen/Ablehnen, Objektkarten) volle Breite. */
	#fm-app .fm-portal .fm-card-actions,
	#fm-app .fm-portal .fm-object-card-actions {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	#fm-app .fm-portal .fm-card-actions .fm-btn,
	#fm-app .fm-portal .fm-object-card-actions .fm-btn,
	#fm-app .fm-portal .fm-card-actions form,
	#fm-app .fm-portal .fm-card-actions .fm-inline-form {
		width: 100%;
	}

	#fm-app .fm-portal .fm-card-actions form .fm-btn {
		width: 100%;
	}

	/* Download-/Nachweis-Buttons gut sichtbar (Rechnung/Dokument/Nachweis). */
	#fm-app .fm-portal .fm-download-actions {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	#fm-app .fm-portal .fm-download-actions .fm-btn {
		width: 100%;
		min-height: 48px;
	}

	/* Foto-/Datei-Upload klar als Fläche erkennbar und voll erreichbar. */
	#fm-app .fm-portal input[type="file"] {
		width: 100%;
		min-height: 48px;
		padding: 0.6rem 0.75rem;
		border: 1px dashed var(--fm-stroke, #cbd5e1);
		border-radius: 8px;
		background: var(--fm-muted-bg, #f8fafc);
	}

	/* Status-Badges etwas größer/treffsicherer auf kleinen Displays. */
	#fm-app .fm-portal .fm-badge {
		font-size: 0.78rem;
		padding: 0.2rem 0.55rem;
	}

	/* Sticky-Aktionsleiste: iPhone-Safe-Area berücksichtigen (Home-Indikator). */
	#fm-app .fm-portal .fm-actions-sticky {
		padding-bottom: calc( 0.75rem + env( safe-area-inset-bottom, 0px ) );
	}

	/* Selbstbedienungs-Aktionen (Profil) untereinander, volle Breite. */
	#fm-app .fm-portal .fm-selfservice-actions {
		flex-direction: column;
		align-items: stretch;
	}

	#fm-app .fm-portal .fm-selfservice-actions .fm-btn {
		width: 100%;
	}
}