body {
		font-family: Arial, sans-serif;
		margin: 0;
		padding: 0;
		display: flex;
		justify-content: center;
		background: rgb(84, 85, 84);
}

.container {
		width: 80%;
		margin-top: 10px;
}

.tabs {
		display: flex;
		background-color: #333;
		border-radius: 8px 8px 0 0;
		overflow: hidden;
		box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

.tab {
		flex: 1;
		padding: 14px 20px;
		text-align: center;
		cursor: pointer;
		color: white;
		transition: background 0.3s, transform 0.2s;
}

.tab:hover {
		background-color: #555;
		transform: scale(1.02);
}

.tab.active {
		background-color: #1798c1;
}

.tab-content {
		padding: 20px;
		background: white;
		min-height: 300px;
		box-shadow: 0 4px 10px rgba(0,0,0,0.3);
		opacity: 0;
		transform: translateY(10px);
		transition: opacity 0.4s ease, transform 0.4s ease;
}

.tab-content.show {
		opacity: 1;
		transform: translateY(0);
}

.spinner {
		border: 6px solid #f3f3f3;
		border-top: 6px solid #1798c1;
		border-radius: 50%;
		width: 40px;
		height: 40px;
		animation: spin 1s linear infinite;
		margin: 50px auto;
}

@keyframes spin {
		0% { transform: rotate(0deg);}
		100% { transform: rotate(360deg);}
}

.dashboard-footer {
		width: 100%;
		background: #1e1e1e;
		color: #ffffff;
		text-align: center;
		padding: 14px 20px;
		box-sizing: border-box;
		border-top: 1px solid #333;
		margin-top: 1px;
		//margin-top: 20px;
		border-radius: 0 0 10px 10px;
}

.dashboard-footer p {
		margin: 0;
		font-size: 14px;
		letter-spacing: 0.5px;
}

/* HEADER */
.page-header {
	width: 80%;
	padding: 16px 24px;
	box-sizing: border-box;
	background: #111;
	color: white;
	border-radius: 8px;
	margin-bottom: 16px;
}

.page-header h1 {
	margin: 0;
	font-size: 1.8rem;
}

/* MOBILE NAVIGATION */

.mobile-nav {
	position: relative;
}

/* hamburger hidden on desktop */
.hamburger {
	display: none;
	width: 100%;
	padding: 14px 20px;
	background: #333;
	color: white;
	border: none;
	font-size: 24px;
	cursor: pointer;
	text-align: left;
	border-radius: 8px 8px 0 0;
}

/* MOBILE MODE */
@media (max-width: 768px) {

	.container {
		width: 95%;
	}

	.hamburger {
		display: block;
	}

	.tabs {
		display: none;
		flex-direction: column;
		width: 100%;
		border-radius: 0 0 8px 8px;
	}

	.tabs.show {
		display: flex;
	}

	.tab {
		border-top: 1px solid #444;
		text-align: left;
		padding-left: 20px;
		display: none; /* hidden by default on mobile */
	}
	
	/* Show tabs when parent has .show */
	.tabs.show .tab {
			display: block;
	}

	.page-header {
		width: 100%;
	}
}