/* Dentallo custom styles */
:root {
	--dentallo-blue: #0024d6;
	--dentallo-blue-soft: #3150ea;
	--dentallo-ink: #0f1b4d;
	--dentallo-slate: #4f5c8a;
	--dentallo-bg: #edf2ff;
	--dentallo-card: #ffffff;
}

body {
	font-family: "Nunito Sans", "Segoe UI", sans-serif;
	color: var(--dentallo-ink);
	background:
		radial-gradient(circle at 14% 16%, #d7e0ff 0, #d7e0ff 18%, transparent 19%),
		radial-gradient(circle at 83% 13%, #cad6ff 0, #cad6ff 15%, transparent 16%),
		linear-gradient(180deg, #f5f8ff 0%, var(--dentallo-bg) 45%, #e9efff 100%);
	min-height: 100vh;
}

.guest-shell {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 2rem 1rem;
}

.auth-shell {
	min-height: 100vh;
	padding: 1rem;
}

.auth-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 1rem;
}

.app-panel {
	background: color-mix(in srgb, var(--dentallo-card) 92%, #eff3ff);
	border: 1px solid #d9e2ff;
	border-radius: 1rem;
	box-shadow: 0 10px 35px rgba(0, 36, 214, 0.08);
}

.app-topbar {
	border-radius: 1rem;
	border: 1px solid #d9e2ff;
	background: linear-gradient(135deg, #ffffff 0%, #f0f5ff 100%);
	padding: 0.8rem 1rem;
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.brand-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 900;
	letter-spacing: 0.02em;
	color: var(--dentallo-blue);
}

.right-rail {
	position: sticky;
	top: 1rem;
	height: fit-content;
	padding: 0.8rem;
}

.module-card {
	border: 1px solid #dce4ff;
	border-radius: 0.95rem;
	background: #fff;
	padding: 0.7rem 0.8rem;
	margin-bottom: 0.65rem;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.module-card:hover,
.module-card:focus-within {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(0, 36, 214, 0.12);
}

.module-title {
	font-weight: 800;
	font-size: 0.88rem;
	color: var(--dentallo-ink);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.module-actions {
	list-style: none;
	padding: 0;
	margin: 0.6rem 0 0;
	display: grid;
	gap: 0.35rem;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: all 0.24s ease;
}

.module-card:hover .module-actions,
.module-card:focus-within .module-actions {
	max-height: 260px;
	opacity: 1;
}

.module-actions a {
	display: block;
	text-decoration: none;
	color: var(--dentallo-slate);
	font-size: 0.86rem;
	border-radius: 0.6rem;
	padding: 0.4rem 0.5rem;
}

.module-actions a:hover {
	color: var(--dentallo-blue);
	background: #eef2ff;
}

.module-chip {
	font-size: 0.66rem;
	text-transform: uppercase;
	color: #6d79a8;
	letter-spacing: 0.05em;
}

.btn-dentallo {
	background: var(--dentallo-blue);
	border-color: var(--dentallo-blue);
	color: #fff;
}

.btn-dentallo:hover,
.btn-dentallo:focus {
	background: var(--dentallo-blue-soft);
	border-color: var(--dentallo-blue-soft);
	color: #fff;
}

.login-card {
	width: min(460px, 100%);
	border-radius: 1rem;
	border: 1px solid #d8e2ff;
	box-shadow: 0 20px 45px rgba(0, 36, 214, 0.13);
}

.login-headbar {
	background: linear-gradient(105deg, var(--dentallo-blue) 0%, #2342dc 100%);
	color: #fff;
	border-radius: 1rem 1rem 0 0;
	padding: 1rem 1.2rem;
}

.dashboard-grid {
	display: grid;
	gap: 0.9rem;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.dashboard-tile {
	border-radius: 1rem;
	border: 1px solid #d7e0ff;
	background: linear-gradient(160deg, #fff, #f6f8ff);
	padding: 0.95rem;
}

@media (max-width: 1199px) {
	.auth-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.right-rail {
		position: static;
	}

	.module-actions {
		max-height: 280px;
		opacity: 1;
	}
}