:root {
	--primary: #1a56db;
	--primary-blue: #1a73e8;
	--secondary-blue: #4285f4;
	--light-blue: #e8f0fe;
	--dark-blue: #0d47a1;
	--text-dark: #202124;
	--text-light: #5f6368;
	--border-light: #dadce0;
	--dark: #1f2937;
	--white: #ffffff;
}

html {
	font-size: 14px;
	position: relative;
	min-height: 100%;
}
@media (min-width: 768px) {
	html {
		font-size: 16px;
	}
}

body {
	margin-bottom: 60px;
	font-family: "Inter", sans-serif;
	background-color: #f8f9fa;
	color: var(--text-dark);
}

/* Sticky Navbar */
.navbar.sticky-top {
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1100 !important;
}
/* .navbar {
	background: linear-gradient(
		135deg,
		var(--primary-blue) 0%,
		var(--dark-blue) 100%
	) !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	padding: 1rem 0;
} */

.auth-navbar {
	background: linear-gradient(
		135deg,
		var(--primary-blue) 0%,
		var(--dark-blue) 100%
	) !important;
}
.auth-navbar .navbar-brand span {
	color: #fff !important;
}

.navbar-brand {
	color: var(--primary) !important;
	font-weight: 700;
	font-size: 1.5rem;
}
.navbar-brand i {
	color: #ffc107;
}

/* Remove dark override on logout button */
.navbar .btn-outline-danger {
	color: #dc3545 !important; /* Bootstrap danger red */
	border-color: #dc3545;
}
.navbar .btn-outline-danger:hover {
	background-color: #dc3545;
	color: #fff !important;
}

/* Anchored Section Scroll Offset */
section {
	scroll-margin-top: 4.5rem;
}

/* Loader */
.loader {
	width: 40px;
	height: 20px;
	--c: no-repeat radial-gradient(farthest-side, #000 93%, #0000);
	background: var(--c) 0 0, var(--c) 50% 0, var(--c) 100% 0;
	background-size: 8px 8px;
	position: relative;
	animation: l4-0 1s linear infinite alternate;
}
.loader:before {
	content: "";
	position: absolute;
	width: 8px;
	height: 12px;
	background: #000;
	left: 0;
	top: 0;
	animation: l4-1 1s linear infinite alternate,
		l4-2 0.5s cubic-bezier(0, 200, 0.8, 200) infinite;
}
@keyframes l4-0 {
	0% {
		background-position: 0 100%, 50% 0, 100% 0;
	}
	8%,
	42% {
		background-position: 0 0, 50% 0, 100% 0;
	}
	50% {
		background-position: 0 0, 50% 100%, 100% 0;
	}
	58%,
	92% {
		background-position: 0 0, 50% 0, 100% 0;
	}
	100% {
		background-position: 0 0, 50% 0, 100% 100%;
	}
}
@keyframes l4-1 {
	100% {
		left: calc(100% - 8px);
	}
}
@keyframes l4-2 {
	100% {
		top: -0.1px;
	}
}

/* Form Controls */
.form-select {
	border: 2px solid var(--border-light);
	border-radius: 8px;
	padding: 0.75rem;
	transition: all 0.3s ease;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%235f6368' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
	background-position: right 0.75rem center;
	background-size: 16px 12px;
}
.form-select:focus {
	border-color: var(--primary-blue);
	box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
}

/* Buttons */
.btn-primary {
	background: linear-gradient(
		135deg,
		var(--primary-blue) 0%,
		var(--secondary-blue) 100%
	);
	border: none;
	border-radius: 10px;
	font-weight: 600;
	padding: 12px 30px;
	transition: all 0.3s ease;
	box-shadow: 0 4px 12px rgba(26, 115, 232, 0.2);
}
.btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(26, 115, 232, 0.3);
}

/* Validation */
.form-text {
	font-size: 0.85rem;
	color: var(--text-light);
	margin-top: 0.25rem;
}
.text-danger.small {
	font-size: 0.8rem;
	margin-top: 0.25rem;
	display: block;
}

/* Readonly Fields */
.form-control[readonly] {
	background-color: #f8f9fa;
	border-color: #e9ecef;
	opacity: 0.8;
}
.form-control[readonly]:focus {
	border-color: #e9ecef;
	box-shadow: none;
}

/* Responsive */
@media (max-width: 768px) {
	.btn-lg {
		padding: 10px 20px;
		font-size: 1rem;
	}
}

/* Footer */
.footer {
	background-color: var(--dark);
	color: white;
	padding: 3rem 0 1rem;
}
.footer h5 {
	margin-bottom: 1.5rem;
	font-weight: 600;
}
.footer ul {
	list-style: none;
	padding: 0;
}
.footer ul li {
	margin-bottom: 0.5rem;
}
.footer ul li a {
	color: #d1d5db;
	text-decoration: none;
}
.footer ul li a:hover {
	color: white;
}
.copyright {
	border-top: 1px solid #374151;
	padding-top: 1.5rem;
	margin-top: 2rem;
	text-align: center;
	color: #9ca3af;
}

.auth-footer {
	border-top: 1px solid #eaeaea;
	background-color: #f8f9fa;
	padding: 1rem 0;
	text-align: center;
	font-size: 0.9rem;
	color: #666;
}

/* Responsive */
@media (max-width: 768px) {
	.btn-lg {
		padding: 10px 20px;
		font-size: 1rem;
	}
}

.section-title {
	font-size: 2.5rem;
	font-weight: 700;
	margin-bottom: 3rem;
	text-align: center;
}
@media (max-width: 768px) {
	.section-title {
		font-size: 2rem;
	}
}