/*
	Securi System Specific Styles
	This file overrides the default color palette for the Securi system.
*/
body {
	padding-top: 20px;
}

#membersfailogo {
	filter: contrast(40%) brightness(200%);
}

:root {
	/* Override default color palette for a professional, modern legal theme */
	--mfpalette-01: #009fc791;
	/* Light Gray - for backgrounds and neutral spaces */
	--mfpalette-02: #CCA60E;
	/* Dark Slate Blue - for primary headers and elements */
	--mfpalette-03: #0c505c;
	/* Peter River Blue - for links, buttons, and interactive elements */
	--mfpalette-04: #c0392b;
	/* Muted Red - for warnings, errors, or destructive actions */
}

/* 
	The following rules are examples of how the new palette will be applied 
	by the core stylesheets. We don't need to redefine them here, but they 
	show how the variables are used.

	.mfbgcolor-01 { background-color: var(--mfpalette-01); }
	.mfbgcolor-02 { background-color: var(--mfpalette-02); }
	.mfbgcolor-03 { background-color: var(--mfpalette-03); }
	.mfbgcolor-04 { background-color: var(--mfpalette-04); }
*/

/* Style for the left navigation menu */
#leftmenu {
	background-image: linear-gradient(to bottom, #62818a, #3d6370) !important;
	/* Dark Charcoal to Slate Gray Gradient */
	color: #dfe6e9;
	/* Soft White text for contrast */
}

#leftmenu>.top {
	background-color: #636e72 !important;
	/* Lighter Slate Gray for top section */
	border-bottom: 1px solid #b2bec3;
	/* Light Gray border for separation */
	position: relative;
	/* Required for pseudo-element positioning */
	background-image: none;
	/* Remove direct background image */
}

#leftmenu>.top::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #dfe6e9;
	/* Set logo color to soft white for contrast */
	-webkit-mask-image: url('/siteassets/systems/securi/horizontal_logo.svg');
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	mask-image: url('/siteassets/systems/securi/horizontal_logo.svg');
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

#leftmenu div.username {
	color: #dfe6e9;
	/* Soft White text for consistency */
	background-color: #636e72 !important;
	/* Lighter Slate Gray for consistency */
}

#leftmenu div.menuopt:hover {
	background-color: #009FC7 !important;
	/* Highlight on hover */
}

#leftmenu div.menuopt.menuoptS {
	background-color: #00385D !important;
	/* Selected menu item */
	color: #dfe6e9 !important;
	/* Soft White text for contrast */
}

@media screen and (max-width: 600px) {
	#mobileheader {
		margin-top: 30px
	}

	.content.section .card {
		min-width: unset !important;
		/* Reset any min-width if present */
		width: auto !important;
		/* Fill available width */
		float: none !important;
		/* Remove float */
		display: block !important;
		/* Stack vertically */
		margin: 15px;
		/* Maintain spacing */
	}

	body {
		padding-top: 20px;
	}
}