/**
 * Dakar Paramfront — child of Cassiopeia
 * Medical blue branding for Dakar Paramedicale
 */

:root {
	--hue: 199;
	--template-bg-light: #eef7fb;
	--template-text-dark: #1c2b33;
	--template-text-light: #ffffff;
	--template-link-color: #0b7cad;
	--template-special-color: #064a68;
	--dp-blue: #0b7cad;
	--dp-blue-dark: #086289;
	--dp-blue-deep: #064a68;
	--dp-soft: #e6f5fb;
	--dp-accent: #e11d48;
	--link-color: #0b7cad;
}

/* Header — Cassiopeia structure, DP colors */
.container-header {
	background: linear-gradient(120deg, var(--dp-blue-deep) 0%, var(--dp-blue) 55%, #1390c4 100%);
	color: #fff;
	box-shadow: 0 2px 12px rgba(6, 74, 104, 0.18);
}

.container-header a,
.container-header .navbar-brand,
.container-header .site-description {
	color: #fff;
}

.container-header .brand-logo img,
.container-header .logo {
	max-height: 52px;
	width: auto;
	background: #fff;
	border-radius: 10px;
	padding: 4px 8px;
}

.container-header .site-description {
	opacity: 0.92;
	font-size: 0.85rem;
	font-weight: 500;
}

/* Nav under brand */
.container-nav {
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(6px);
}

.container-nav .mod-menu a,
.container-nav .nav-link {
	color: #fff !important;
	border-radius: 8px;
}

.container-nav .mod-menu a:hover,
.container-nav .nav-link:hover,
.container-nav .mod-menu .active > a,
.container-nav .nav-link.active {
	background: rgba(255, 255, 255, 0.18) !important;
	color: #fff !important;
}

/* Account strip in topbar */
.dpf-account {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 0.65rem;
	padding: 0.45rem 0;
	font-size: 0.875rem;
}

.dpf-account a {
	color: #fff;
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	padding: 0.25rem 0.75rem;
	transition: background 0.15s, border-color 0.15s;
}

.dpf-account a:hover {
	background: rgba(255, 255, 255, 0.15);
	border-color: #fff;
}

.dpf-account .dpf-username {
	font-weight: 600;
	opacity: 0.95;
}

/* Main grid cards */
.site-grid .card,
.container-component > main {
	border-radius: 12px;
}

.container-component > main {
	background: #fff;
	border: 1px solid rgba(11, 124, 173, 0.12);
	box-shadow: 0 8px 28px rgba(6, 74, 104, 0.06);
	padding: 1.5rem 1.75rem;
}

/* Buttons / links */
a {
	color: var(--dp-blue);
}

.btn-primary,
.com-users-login .btn-primary,
.mod-login .btn-primary {
	--bs-btn-bg: var(--dp-blue);
	--bs-btn-border-color: var(--dp-blue);
	--bs-btn-hover-bg: var(--dp-blue-dark);
	--bs-btn-hover-border-color: var(--dp-blue-dark);
}

/* Portal / verification pages */
.dpf-public-doc .container-component > main {
	max-width: 640px;
	margin-inline: auto;
}

.dpf-login-panel {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(11, 124, 173, 0.15);
}

.dpf-login-panel h2 {
	font-size: 1.35rem;
	color: var(--dp-blue-deep);
	margin-bottom: 1rem;
}

/* Footer */
.container-footer,
.dpf-footer-fallback {
	background: var(--dp-blue-deep);
	color: rgba(255, 255, 255, 0.9);
}

.dpf-footer-fallback {
	padding: 1.25rem 1rem;
	text-align: center;
	font-size: 0.9rem;
}

.back-to-top-link {
	background: var(--dp-blue) !important;
}