/* ── Auto layout: bottom bar on mobile, top bar on desktop ───────────────
   DaisyUI v5 variables: --color-base-100, --color-base-content, --color-primary */

.app-shell { display: flex; min-height: 100dvh; flex-direction: column; }

/* Shared nav-link base */
.app-nav .nav-link {
	display: flex;
	text-decoration: none;
	color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
	transition: color 0.15s ease;
}
.app-nav .nav-link:hover { color: var(--color-base-content); }
.app-nav .nav-link.active { color: var(--color-primary); }

/* Mobile: bottom bar — sticky keeps it in document flow */
@media (max-width: 767px) {
	.app-nav {
		position: sticky;
		bottom: 0;
		order: 99;
		border-top: 1px solid color-mix(in oklab, var(--color-base-content) 15%, transparent);
		background-color: var(--color-base-100);
		box-shadow: 0 -2px 8px color-mix(in oklab, var(--color-base-content) 8%, transparent);
		z-index: 50;
	}
	.app-nav .nav-tabs {
		flex-direction: row;
		justify-content: space-around;
		padding: 0.375rem 0.5rem;
		padding-bottom: max(0.375rem, env(safe-area-inset-bottom));
	}
	.app-nav .nav-link {
		flex-direction: column;
		align-items: center;
		gap: 0.125rem;
		padding: 0.375rem 0.5rem;
		font-size: 0.625rem;
		min-width: 3.5rem;
	}
	.app-nav .nav-icon { width: 1.25rem; height: 1.25rem; }
	.app-nav .nav-link.promoted .nav-icon-wrap {
		background: var(--color-primary);
		color: var(--color-primary-content);
		border-radius: 9999px;
		padding: 0.5rem;
		margin-top: -0.75rem;
		box-shadow: 0 2px 8px color-mix(in oklab, var(--color-primary) 30%, transparent);
	}
	.app-nav .nav-link.promoted .nav-icon { width: 1.25rem; height: 1.25rem; }
	.app-nav .nav-brand { display: none; }
	.app-nav .nav-overflow { display: none; }
	.app-nav .nav-settings { display: none; }
	.app-main {
		flex: 1;
		order: 1;
		padding: 1rem;
		padding-left: max(1rem, env(safe-area-inset-left));
		padding-right: max(1rem, env(safe-area-inset-right));
	}
	footer { order: 98; }
	.app-topbar { display: flex; }
	.app-topbar-spacer { display: block; height: 3.25rem; }
}

/* Desktop: top navbar */
@media (min-width: 768px) {
	.app-nav {
		position: sticky;
		top: 0;
		z-index: 50;
		border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
		background-color: var(--color-base-100);
		box-shadow: 0 1px 3px color-mix(in oklab, var(--color-base-content) 5%, transparent);
	}
	.app-nav .nav-tabs {
		flex-direction: row;
		align-items: center;
		padding: 0 1rem;
		height: 3.5rem;
		gap: 0.25rem;
		max-width: 72rem;
		margin: 0 auto;
	}
	.app-nav .nav-brand {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		font-weight: 700;
		font-size: 1.125rem;
		padding-right: 1.5rem;
		margin-right: auto;
		color: var(--color-base-content);
		text-decoration: none;
	}
	.app-nav .nav-link {
		flex-direction: row;
		align-items: center;
		gap: 0.375rem;
		padding: 0.5rem 0.75rem;
		font-size: 0.875rem;
		border-radius: 0.5rem;
	}
	.app-nav .nav-link:hover { background: color-mix(in oklab, var(--color-base-content) 5%, transparent); }
	.app-nav .nav-icon { width: 1rem; height: 1rem; }
	.app-nav .nav-link.promoted .nav-icon-wrap {
		display: contents;
	}
	.app-nav .nav-link.promoted .nav-icon-wrap .nav-icon {
		width: 1rem;
		height: 1rem;
	}
	.app-nav .nav-overflow { display: flex; }
	.app-nav .nav-settings { display: flex; }
	.app-main { padding: 1.5rem; }
	.app-topbar { display: none; }
	.app-topbar-spacer { display: none; }
}

/* ── Accessibility ────────────────────────────────────────────────────────── */

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}
.sr-only:focus {
	position: absolute;
	width: auto;
	height: auto;
	padding: 1rem;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
	top: 0;
	left: 0;
	z-index: 100;
	background: var(--color-base-100);
}

/* ── HTMX swap entry animations ───────────────────────────────────────────── */

@starting-style {
	.htmx-settling {
		opacity: 0;
		transform: translateY(4px);
	}
}

.htmx-settling {
	transition: opacity 150ms ease-out, transform 150ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	@starting-style {
		.htmx-settling {
			opacity: 1;
			transform: none;
		}
	}
}