:root {
	--crn-accent-color: #0f62ff;
}

.crn-login-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	text-align: center;
	padding-bottom: 1.5rem;
}

.crn-login-brand .crn-brand-logo img {
	width: 380px;
	height: auto;
	max-width: 380px;
	max-height: 250px;
	object-fit: contain;
}

.crn-brand-logo {
	position: relative;
	overflow: hidden;
	margin-bottom: 32px;
	background: #fff;
	border-radius: 40px;
	padding: 5px;
	display: inline-block;
}

.crn-brand-logo::after {
	content: "";
	position: absolute;
	top: 0;
	left: -120%;
	width: 60%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
	transform: skewX(-20deg);
	animation: logo-shine 4s ease-in-out infinite;
}

@keyframes logo-shine {
	0%,
	70% {
		left: -120%;
	}
	100% {
		left: 140%;
	}
}

.crn-login-brand .crn-brand-mark {
	font-weight: 700;
	font-size: 1.25rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--crn-accent-color);
}

.crn-login-brand .crn-brand-title {
	font-size: clamp(1.75rem, 2.5vw, 2.5rem);
	font-weight: 700;
}

.crn-login-brand .crn-brand-subtitle {
	font-size: 1rem;
	color: rgba(0, 0, 0, 0.65);
}

body #login-page .btn-primary,
body#login-page .login-form .btn-primary {
	background-color: var(--crn-accent-color);
	border-color: var(--crn-accent-color);
	box-shadow: none;
}

body#login-page .login-form .btn-primary:hover {
	filter: brightness(1.05);
}

body#login-page .login-form .btn-primary:focus {
	box-shadow: 0 0 0 0.2rem var(--crn-accent-color);
}

body#login-page .login-form .btn-outline-primary {
	border-color: var(--crn-accent-color);
	color: var(--crn-accent-color);
}

.crn-login-brand+* {
	margin-top: 0;
}

/* 
   Make the main body transparent so the fixed background animation shows through.
   The actual content containers will provide the surface color.
*/
body,
#app {
	background-color: transparent !important;
}

/* 
   Premium Custom Scrollbar Utility 
   (As requested for .my-container and global consistency)
*/

/* For Chrome, Edge, and Safari */
::-webkit-scrollbar,
.my-container::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

::-webkit-scrollbar-track,
.my-container::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb,
.my-container::-webkit-scrollbar-thumb {
	background: #888;
	border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover,
.my-container::-webkit-scrollbar-thumb:hover {
	background: #555;
}

/* Firefox */
* {
	scrollbar-width: thin;
	scrollbar-color: #888 transparent;
}

/* 
   Splash Screen Branding 
   The splash img src is already the CRN logo (website_context hook);
   just size it and add a soft shadow. 
*/
.centered.splash img {
	max-width: 140px !important;
	height: auto;
	filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));
}

.navbar-breadcrumbs .crn-nav-arrows {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-right: 6px;
	list-style: none;
	padding: 0;
}

.navbar-breadcrumbs .crn-nav-arrows li {
	margin: 0;
	padding: 0;
}

.navbar-breadcrumbs .crn-nav-arrows .crn-nav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: var(--text-muted, #6c7680);
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
	padding: 0;
	line-height: 1;
}

.navbar-breadcrumbs .crn-nav-arrows .crn-nav-btn:hover {
	background: var(--bg-dark-gray, #f4f5f6);
	color: var(--text-color, #1e293b);
}

.navbar-breadcrumbs .crn-nav-arrows .crn-nav-btn:active {
	background: var(--bg-dark-gray, #e8e8e8);
}

.navbar-breadcrumbs .crn-nav-arrows .crn-nav-btn.disabled,
.navbar-breadcrumbs .crn-nav-arrows .crn-nav-btn[disabled] {
	opacity: 0.3;
	cursor: default;
	pointer-events: none;
}

.navbar-breadcrumbs .crn-nav-arrows .crn-nav-btn svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}