/* Bernalillo County Master Stylesheet - 2026 
   Optimized for Nationwide Performance & Maintainability
   Author: Michael Wood
*/

:root {
	/* --- Official Color Palette (Centralized for easy updates) --- */
	--bosque-green: #285952;
	--bosque-green-hover: #479e91;
	--cypress: #013942;
	--cypress-hover: #028397;
	--sage: #96aa94;
	--sage-hover: #c7d2c6;
	--teracotta: #e47756;
	--teracotta-hover: #f1b8a7;
	--mist: #e8f1ee;
	--mist-hover: #b0cfc4;
	--light-green: #b3dc7b;
	--danger-red: #CB2525;
	--danger-hover: #F78383;
	/* --- Functional Logic Mapping --- */
	--text-body: var(--cypress);
	--pnl-bg: var(--mist);
	--pnl-border: var(--sage);
	--menu-bg: var(--cypress);
	--btn-primary: var(--cypress);
	--btn-primary-hover: var(--cypress-hover);
	--btn-safe: var(--bosque-green);
	--btn-safe-hover: var(--bosque-green-hover);
}

/* --- 1. Base Elements & Typography --- */
html {
	font-size: 82.5%; /* Sets 1rem = 10px */
	padding: 20px;
	position: relative;
	min-height: 100%;
}

body {
	margin: 0 auto;
	width: 100%;
	max-width: 4800px;
	padding: 0 10px 5rem;
	font-size: 1.4rem;
	color: var(--text-body);
	font-family: sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	line-height: 90%;
	margin: 10px 0;
}

hr {
	margin: 5px 20px;
	background-color: cadetblue;
	height: 1px;
	border: none;
}

/* --- 2. Interactive Components --- */
.Go, .Safe, .Danger {
	border-radius: 20px;
	padding: 5px 15px;
	border: none;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
	color: white;
}

.Go {
	background-color: var(--btn-primary);
}

	.Go:hover {
		background-color: var(--btn-primary-hover);
		color: black;
	}

.Safe {
	background-color: var(--btn-safe);
}

	.Safe:hover {
		background-color: var(--btn-safe-hover);
		color: black;
	}

.Danger {
	background-color: var(--danger-red);
	color: black;
}

	.Danger:hover {
		background-color: var(--danger-hover);
	}

input, select, textarea {
	max-width: 2000px;
	line-height: 20px;
	border: 1px solid #ccc;
	background-color: var(--pnl-bg);
}

	input:focus {
		background-color: var(--light-green);
		outline: none;
	}

.pnl {
	border-radius: 20px;
	padding: 1.2rem;
	margin: 0 auto 12px;
	background-color: var(--pnl-bg);
	border: solid 3px var(--pnl-border);
	color: var(--bosque-green);
}

/* --- 3. Navigation & Layout --- */
.w3-bar {
	background-color: var(--menu-bg);
	color: var(--mist);
	width: 100%;
}

.w3-bar-item {
	background-color: var(--btn-primary);
	color: var(--mist);
	cursor: pointer;
}

.btn_accord {
	background-color: var(--sage);
}

	.btn_accord:hover {
		background-color: var(--sage-hover);
	}

/* --- 4. System Feedback (Loaders & Spinners) --- */
#div_loader {
	display: none;
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba(255,255,255,0.8);
}

#div_spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	border: 8px solid #f3f3f3;
	border-top: 8px solid #3498db;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	animation: spin 2s linear infinite;
}

@keyframes spin {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}

	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

/* --- 5. THE PRINT ENGINE (Optimized for Job Descriptions) --- */
@media print {
	#div_header, #div_help, #div_menu, .no-print, .w3-bar, #div_loader, .no-screen {
		display: none !important;
	}

	html, body {
		height: auto !important;
		/*overflow: visible !important;*/
		page-break-after: always;
		padding-bottom: 48px;
	}

	.print-footer {
		display: block !important;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		border-top: 1px solid black;
		background: white !important;
		/*padding-top: 5px;*/
	}

	.footer-flex {
		display: flex;
		justify-content: space-between;
		font-family: sans-serif;
		font-size: 8pt;
		width: 100%;
	}

	.col-left {
		width: 33%;
		text-align: left;
	}

	.col-center {
		width: 34%;
		text-align: center;
	}

	.col-right {
		width: 33%;
		text-align: right;
	}

	@page {
		size: letter;
		margin: 0.5in 0.5in 0.5in 0.5in;
	}
}

@media screen {
	.no-screen, .print-footer {
		display: none !important;
	}
}