/* FKKMBT MODERN NATIVE MOBILE CSS */
:root {
	--primary-gradient: linear-gradient(135deg, #2d6a5f 0%, #1f5449 100%);
	--secondary-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	--danger-gradient: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
	--warning-gradient: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
	--card-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	--bottom-nav-height: 65px;
	--touch-target: 44px;
}

@media (max-width: 768px) {
	/* Base Overrides */
	body {
		font-family: "Inter", sans-serif;
		background-color: #f3f4f6;
		padding-bottom: var(
			--bottom-nav-height
		) !important; /* Space for bottom nav */
		-webkit-font-smoothing: antialiased;
	}

	.container {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}

	/* Typography */
	h1,
	.h1 {
		font-size: 1.5rem !important;
		font-weight: 800;
		letter-spacing: -0.025em;
	}
	h2,
	.h2 {
		font-size: 1.25rem !important;
		font-weight: 700;
		letter-spacing: -0.02em;
	}
	h3,
	.h3 {
		font-size: 1.125rem !important;
		font-weight: 700;
	}
	h4,
	.h4 {
		font-size: 1rem !important;
		font-weight: 600;
	}
	h5,
	.h5 {
		font-size: 0.875rem !important;
		font-weight: 600;
	}
	p,
	.p {
		font-size: 0.875rem !important;
		line-height: 1.5;
		color: #4b5563;
	}

	/* Compact Utilities */
	.py-5 {
		padding-top: 1.5rem !important;
		padding-bottom: 1.5rem !important;
	}
	.py-4 {
		padding-top: 1.25rem !important;
		padding-bottom: 1.25rem !important;
	}
	.py-3 {
		padding-top: 1rem !important;
		padding-bottom: 1rem !important;
	}

	/* Premium Cards */
	.card {
		border: none !important;
		border-radius: 16px !important;
		box-shadow: var(--card-shadow) !important;
		margin-bottom: 1rem !important;
		background: #ffffff;
	}

	.card-body {
		padding: 1.25rem !important;
	}

	/* Native Bottom Navigation */
	.mobile-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: var(--bottom-nav-height);
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(10px);
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-top: 1px solid #e5e7eb;
		z-index: 1050;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.mobile-nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-decoration: none;
		color: #9ca3af;
		font-size: 0.7rem;
		font-weight: 500;
		flex: 1;
		transition: all 0.2s;
	}

	.mobile-nav-item i {
		font-size: 1.4rem;
		margin-bottom: 2px;
	}

	.mobile-nav-item.active {
		color: #2d6a5f;
	}

	/* App Bar Header */
	.app-bar {
		position: sticky;
		top: 0;
		background: var(--primary-gradient);
		color: white;
		padding: 0.75rem 1rem;
		z-index: 1030;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		border-radius: 0 0 20px 20px; /* Floating effect */
	}

	/* Quick Access Grid (Native Style) */
	.quick-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 0.75rem;
		margin-bottom: 1.5rem;
	}

	.quick-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-decoration: none;
	}

	.quick-icon {
		width: 50px;
		height: 50px;
		border-radius: 14px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 0.5rem;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
	}

	.quick-icon i {
		font-size: 1.5rem;
		color: white;
	}

	.quick-label {
		font-size: 0.65rem;
		font-weight: 600;
		color: #374151;
		text-align: center;
		line-height: 1.2;
	}

	/* Buttons */
	.btn {
		border-radius: 12px !important;
		padding: 0.75rem 1.25rem !important;
		font-weight: 600 !important;
		font-size: 0.875rem !important;
		min-height: var(--touch-target);
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* Inputs */
	.form-control,
	.form-select {
		border-radius: 12px !important;
		padding: 0.75rem 1rem !important;
		border: 1px solid #e5e7eb !important;
		font-size: 1rem !important; /* Prevent iOS zoom */
		background-color: #f9fafb !important;
	}

	.form-control:focus {
		border-color: #2d6a5f !important;
		box-shadow: 0 0 0 3px rgba(45, 106, 95, 0.1) !important;
	}

	/* Badge Native Colors */
	.badge {
		border-radius: 6px !important;
		padding: 0.35em 0.65em !important;
		font-weight: 600 !important;
	}

	/* Bottom Sheet Style Modal */
	.modal-dialog {
		margin: 0 !important;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		transform: translateY(100%);
		transition: transform 0.3s ease-out;
	}

	.modal.show .modal-dialog {
		transform: translateY(0);
	}

	.modal-content {
		border-radius: 24px 24px 0 0 !important;
		border: none !important;
		max-height: 90vh;
		overflow-y: auto;
	}

	/* Native Horizontal Scroller for News */
	.snap-scroller {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 1rem;
		padding-bottom: 1rem;
		-webkit-overflow-scrolling: touch;
	}

	.snap-item {
		flex: 0 0 85%;
		scroll-snap-align: center;
	}

	/* Navbar Visibility Fix & Floating Effect */
	.navbar {
		display: flex !important;
		position: fixed !important;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1040;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
		border-radius: 0 0 20px 20px; /* Floating rounded look at bottom */
	}

	/* Adjust body padding so content doesn't hide behind floating nav */
	body {
		padding-top: 80px !important;
	}

	/* Ensure toggler is visible */
	.navbar-toggler {
		display: block !important;
	}

	/* Fix collapse menu for floating nav */
	.navbar-collapse {
		position: fixed;
		top: 70px; /* Match navbar height approx */
		left: 10px;
		right: 10px;
		background: white;
		border-radius: 20px;
		padding: 20px;
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
		max-height: 80vh;
		overflow-y: auto;
	}
}

/* Safe areas */
@supports (padding: max(0px)) {
	.mobile-nav {
		padding-bottom: env(safe-area-inset-bottom);
		height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
	}
}

/* Premium UI Utilities */
.glass {
	background: rgba(255, 255, 255, 0.7) !important;
	backdrop-filter: blur(12px) !important;
	-webkit-backdrop-filter: blur(12px) !important;
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.pulse {
	animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
	0% {
		box-shadow: 0 0 0 0px rgba(239, 68, 68, 0.4);
	}
	100% {
		box-shadow: 0 0 0 15px rgba(239, 68, 68, 0);
	}
}

.text-white-50 {
	color: rgba(255, 255, 255, 0.5) !important;
}
.notif-badge {
	position: absolute;
	top: -2px;
	right: -2px;
	width: 14px;
	height: 14px;
	background: #ef4444;
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 8px;
	font-weight: 800;
	border: 2px solid #2d6a5f;
}

.bg-danger-subtle {
	background-color: #fee2e2 !important;
}
.bg-success-subtle {
	background-color: #dcfce7 !important;
}