/* Proceder Core — Global Mobile Responsivity Fixes */

/* ── 1. Safe-area insets for iOS (notch, Dynamic Island) ── */
:root {
	--sat: env(safe-area-inset-top, 0px);
	--sab: env(safe-area-inset-bottom, 0px);
	--sal: env(safe-area-inset-left, 0px);
	--sar: env(safe-area-inset-right, 0px);
}

body {
	padding-top: var(--sat);
	padding-bottom: var(--sab);
}

/* ── 2. Prevent horizontal overflow on mobile ── */
@media (max-width: 768px) {
	body {
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
	}
}

/* ── 3. Quick Log dialog — scrollable on small screens ── */
#quick-log-dialog {
	max-height: 85vh !important;
	overflow-y: auto !important;
}

/* ── 4. Toast notifications — responsive width + safe-area top ── */
#ql-toast,
#ico-toast {
	max-width: calc(100vw - 2rem) !important;
	right: 1rem !important;
	top: calc(var(--sat) + 12px) !important;
}

/* ── 5. Offline banner — safe area padding ── */
#offline-banner {
	padding-top: calc(var(--sat) + 6px) !important;
	padding-left: var(--sal) !important;
	padding-right: var(--sar) !important;
}

/* ── 6. Touch target minimum 44px (WCAG 2.5.5) ── */
@media (max-width: 768px) {
	.btn,
	button,
	[role="button"] {
		min-height: 44px;
	}
}

/* ── 7. Tables — horizontal scroll on mobile ── */
@media (max-width: 768px) {
	.frappe-control[data-fieldtype="Table"] .form-grid {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* ── 8. Frappe form scroll fix on mobile ── */
@media (max-width: 768px) {
	.page-container {
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.form-page,
	.list-page {
		min-height: auto;
	}
}

/* ── 9. Hide navbar on login page (empty "Domácí" link) ── */
.login-content .navbar,
body[data-path="login"] .navbar {
	display: none !important;
}

/* ── 10. CRM SPA — fix body scroll for notched devices ── */
@media (max-width: 768px) {
	body.sm\:overscroll-y-none {
		overscroll-behavior-y: none;
	}

	#app.h-full {
		min-height: calc(100vh - var(--sat) - var(--sab));
		min-height: calc(100dvh - var(--sat) - var(--sab));
	}
}