/*
	ArboStar CRM header, Halloween theme.
	Dark only. Turned on by a class on <header> through config custom_header_classes:
	  "hw-halloween hw-dark"
	Values come from assets/vendors/notebook/css (app.css, header.css): bar 50px, logo 40px on a 4px-radius plate.
	The overdue alert (header.bg-danger) keeps its red look: every rule skips it.
	No overflow: hidden on the header: the user menu, chat box, language switcher and Live Search results
	are its children and must open below it. The smoke canvas is inset: 0, so it stays inside the header anyway.
*/

#brand-color header.hw-halloween:not(.bg-danger) > .hw-smoke {
	position: absolute !important;
	inset: 0;
	width: 100%;
	height: 50px;
	pointer-events: none;
}

#brand-color header.hw-halloween:not(.bg-danger) > canvas.hw-smoke {
	opacity: 0;
	filter: blur(0.6px);
	transition: opacity 0.6s ease;
	-webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0.45) 150px, rgba(0, 0, 0, 0.76) 320px, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.54) 78%, rgba(0, 0, 0, 0.22) 100%);
	mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0.45) 150px, rgba(0, 0, 0, 0.76) 320px, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.54) 78%, rgba(0, 0, 0, 0.22) 100%);
}

#brand-color header.hw-halloween:not(.bg-danger) > canvas.hw-smoke._live {
	opacity: 1;
}

#brand-color header.hw-halloween:not(.bg-danger) > :not(.hw-smoke) {
	position: relative;
}

/* the chat and AI links carry .dk / .dker, which app.css paints brand green inside .bg-success */
#brand-color header.hw-halloween:not(.bg-danger) .dk,
#brand-color header.hw-halloween:not(.bg-danger) .dker {
	background-color: transparent;
}

/* dark */
#brand-color header.hw-dark:not(.bg-danger) {
	background: #0b2117;
}

#brand-color header.hw-dark:not(.bg-danger) #gSearch {
	background: #173a29;
}

#brand-color header.hw-dark:not(.bg-danger) #gSearch,
#brand-color header.hw-dark:not(.bg-danger) #gSearch:focus {
	color: var(--white-col);
}

#brand-color header.hw-dark:not(.bg-danger) #gSearch::placeholder,
#brand-color header.hw-dark:not(.bg-danger) #gSearch:focus::placeholder {
	color: var(--white-col);
	opacity: 1;
}

#brand-color header.hw-dark:not(.bg-danger) .nav .messenger-item > a:hover,
#brand-color header.hw-dark:not(.bg-danger) .nav .chat-box-item > a:hover,
#brand-color header.hw-dark:not(.bg-danger) .nav .user-menu-item > a:hover,
#brand-color header.hw-dark:not(.bg-danger) .chat-box-item.open .dropdown-toggle,
#brand-color header.hw-dark:not(.bg-danger) .user-menu-item.open .dropdown-toggle {
	background-color: rgba(214, 255, 230, 0.08) !important; /* header.css and app.css set the hover with !important */
}

#brand-color header.hw-dark:not(.bg-danger) .navbar-brand img {
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 0 0 1px rgba(47, 211, 107, 0.4), 0 0 12px rgba(47, 211, 107, 0.28);
}

/*
	Login page, Halloween dark.
	Turned on by the class hw-login on <body> of application/modules/login/views/layout.blade.php.
	Values of login-screen.css, recolored: background from the page load intro, card in the header color.
*/

body.hw-login .login-back {
	background: radial-gradient(circle at 50% 46%, #0c2116 0%, #06120c 50%, #030906 100%);
}

/* overflow clips the logo smoke to the card's rounded corners */
body.hw-login .login {
	overflow: hidden;
	color: #9aa39e;
	background: #0b2117;
	box-shadow: 0 0 0 1px rgba(47, 211, 107, 0.14), 0 20px 40px 0 rgba(0, 0, 0, 0.45);
}

body.hw-login .login:hover {
	box-shadow: 0 0 0 1px rgba(47, 211, 107, 0.22), 0 74px 33px -18px rgba(0, 0, 0, 0.5), 0 18px 30px 0 rgba(0, 0, 0, 0.4);
}

body.hw-login.not-loaded .login,
body.hw-login.go-next .login {
	box-shadow: 0 0 0 0 rgba(47, 211, 107, 0), 0 0 0 0 rgba(0, 0, 0, 0);
}

/* full card width and at least the height of a company logo plate (80px logo + padding), so the smoke canvas is sized right even when it starts before the logo image has loaded */
body.hw-login .login-logo {
	position: relative;
	align-self: stretch;
	min-height: 90px;
}

body.hw-login .login-logo > :not(.hw-smoke) {
	position: relative;
	z-index: 1;
}

/* the smoke fills the top of the card, edge to edge and from the top edge, so it shows above and beside a wide company logo plate; it fades out at the sides and towards the welcome text */
body.hw-login .login-logo > canvas.hw-smoke {
	position: absolute;
	top: -50px;
	left: -66px;
	width: calc(100% + 132px);
	height: calc(100% + 63px);
	pointer-events: none;
	opacity: 0;
	filter: blur(0.6px);
	transition: opacity 0.6s 1.2s ease;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%), linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%), linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

body.hw-login .login-logo > canvas.hw-smoke._live {
	opacity: 1;
}

body.hw-login.not-loaded .login-logo > canvas.hw-smoke {
	opacity: 0;
}

@media (max-width: 450px) {
	body.hw-login .login-logo > canvas.hw-smoke {
		top: -30px;
		left: -49.5px;
		width: calc(100% + 99px);
		height: calc(100% + 43px);
	}
}

/* the animated star hides its strokes under card-colored rects until they slide away; once drawn they are hidden, the smoke shows behind */
body.hw-login .login-logo-star rect {
	fill: #0b2117;
	transition: opacity 0s 1.2s;
}

body.hw-login:not(.not-loaded) .login-logo-star rect {
	opacity: 0;
}

body.hw-login .login-logo > img {
	padding: 5px 8px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 0 0 1px rgba(47, 211, 107, 0.4), 0 0 12px rgba(47, 211, 107, 0.28);
}

body.hw-login .login-input {
	color: #eceeef;
	background-color: rgba(255, 255, 255, 0.06);
}

body.hw-login .login-input::placeholder {
	color: #9aa39e;
}

body.hw-login .login-input:focus,
body.hw-login .login-input:not(:placeholder-shown) {
	outline: 1px solid rgba(47, 211, 107, 0.4);
	background-color: rgba(255, 255, 255, 0.09);
}

body.hw-login .login-input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 40px #1a3327 inset;
	-webkit-text-fill-color: #eceeef;
}

body.hw-login .login .eye-icon svg {
	stroke: #9aa39e;
}

body.hw-login .login .eye-icon svg:hover {
	stroke: #eceeef;
}

body.hw-login .login .text-primary {
	color: #2fd36b !important; /* app.css sets .text-primary with !important */
}