/* Sidebar toggle buttons: this page doesn't load publicBase.css, so the
   .btn-active/.btn-inactive states used by every sidebar btn-group need
   their own rule here, otherwise selected buttons show default Bootstrap
   outline styling instead of the navy/white "selected" look. */
.btn-outline-secondary.btn-active {
	background-color: #1e3a8a;
	border-color: #1e3a8a;
	color: #fff;
}

.btn-outline-secondary.btn-inactive {
	background-color: #718096;
	border-color: #718096;
	color: #fff;
}

/* !important needed: select2.min.css defines this same selector with its
   own background-color and loads after this file, so it wins without it. */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
	background-color: #1e3a8a !important;
	border: 1px solid #1e3a8a !important;
	color: #fff !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
	color: #fff !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
	color: #fff !important;
	border-right: 1px solid rgba(255, 255, 255, 0.4) !important;
}

/* --- RESPONSIVE CSS START --- */

/* Mobile Toggle Button */
.mobile-toggle-btn {
	display: none;
	position: fixed;
	top: 15px;
	left: 15px;
	z-index: 1030;
	background-color: #203548;
	color: #fff;
	border: none;
	border-radius: 5px;
	padding: 10px 15px;
	font-size: 18px;
	cursor: pointer;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Sidebar Overlay */
.sidebar-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1040;
	backdrop-filter: blur(2px);
}

/* Form Select styling - blue selected option for consistency */
.form-select option:checked {
	background-color: #2f90f9 !important;
	color: white !important;
}

/* Helper: Ensure AG Grid handles width correctly */
.ag-theme-quartz {
	width: 100%;
	overflow-x: auto;
}

/* RESPONSIVE MEDIA QUERIES */
@media ( max-width : 991px) {
	.mobile-toggle-btn {
		display: block;
	}

	/* Sidebar: Hidden off-screen by default */
	#sidebar {
		position: fixed;
		top: 0;
		left: -280px;
		height: 100vh;
		width: 260px;
		z-index: 1050;
		transition: left 0.3s ease-in-out;
		overflow-y: auto;
		background-color: #203548 !important;
	}
	#sidebar.active {
		left: 0;
	}
	.sidebar-overlay.active {
		display: block;
	}

	/* Main Panel: Full width */
	.main-panel {
		width: 100% !important;
		margin-left: 0 !important;
		padding-top: 60px; /* Push content down for button */
	}

	/* Data Cards (Flip Boxes) Wrapping */
	.box-container {
		flex-wrap: wrap !important;
		justify-content: center;
	}
	.box-item {
		flex: 0 0 100%; /* 1 card per row on mobile */
		max-width: 100%;
		margin-bottom: 15px;
	}

	/* Chart Containers */
	#subsectorchart, #tradeChart, #tophs8commoditydiv {
		width: 100% !important;
		overflow: hidden;
	}

	/* Dropdown/Filter Tables */
	table {
		width: 100%;
	}

	/* Stack table cells for inputs on very small screens */
	td {
		display: block;
		width: 100% !important;
		text-align: left !important;
		margin-bottom: 5px;
	}
	select {
		width: 100% !important;
	}
	.pull-right, .float-right {
		float: none !important;
		text-align: left;
		margin-top: 10px;
	}
}

/* Tablet specific for 2 cards per row */
@media ( min-width : 576px) and (max-width: 991px) {
	.box-item {
		flex: 0 0 48%; /* 2 cards per row */
		margin: 1%;
	}
}

@media ( max-width : 768px) {
	#state-share-growth-table {
		width: 200% !important;
		/* Optional: Add min-width to ensure it doesn't shrink if fit-content is smaller */
		min-width: 200% !important;
	}
}
/* --- RESPONSIVE CSS END --- */

/* ---- CSP remediation: classes replacing removed inline style="" attributes ---- */
.sidebar-bg-dark {
	background-color: #203548;
}

.select-ml0 {
	margin-left: 0px;
}

.info-note-link {
	color: #ef8d04;
	text-decoration: none;
}

.flip-box-front-country {
	position: relative;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
	margin-bottom: 5px;
	padding: 15px;
}

.bg-export-blue {
	background-color: #2f90f9a6;
}

.bg-growth-teal {
	background-color: #d7f2ef;
}

.bg-import-red {
	background-color: #ff8181;
}

.bg-growth-lightblue {
	background-color: #d3eaf8;
}

.inner-flex-center {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.stat-label-sm {
	font-weight: bold;
	margin: 0;
	font-size: 10px;
}

.w-80 {
	width: 80%;
}

.td-full-right {
	width: 100%;
	text-align: right;
}

.select-search-rounded {
	width: 65%;
	background: white;
	border: 1px solid #787878;
	border-radius: 11px;
}

.tophs8-commodity-div {
	width: 100%;
	height: 350px;
}

.note-text-green {
	font-size: small;
	font-weight: bold;
	color: green;
}

.trend-chart-panel {
	background-color: rgba(211, 234, 248, 0.39);
	display: block;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
}

.select-rounded-sm {
	height: 30px;
	font-size: 12px;
	padding: 6px 8px;
	background: white;
	border: 1px solid #787878;
	border-radius: 11px;
}

.select-rounded-sm option:checked {
	background-color: #2f90f9;
	color: white;
}

.bg-lightblue-soft {
	background-color: rgba(211, 234, 248, 0.39);
}

.gap-10 {
	gap: 10px;
}

.bounce-arrow-icon {
	display: inline-block;
	animation: bounce 1.5s infinite;
	transform-origin: center;
	padding: 0px 8px;
	color: #12127c;
}

.select-h21-w50 {
	height: 32px;
	padding: 6px 10px;
	width: 50%;
	font-size: 14px;
	border: 1px solid #787878;
	border-radius: 4px;
	background-color: white;
}

.select-h21-w50 option:checked {
	background-color: #2f90f9;
	color: white;
}

.select-h21-w30 {
	height: 32px;
	padding: 6px 10px;
	width: 30%;
	font-size: 14px;
	border: 1px solid #787878;
	border-radius: 4px;
	background-color: white;
}

.select-h21-w30 option:checked {
	background-color: #2f90f9;
	color: white;
}

.bg-light-gray-panel {
	background-color: rgb(236, 236, 242);
}

.overflow-x-auto-custom {
	overflow-x: auto;
}

.state-table-height {
	height: 500px;
	width: 100%;
	min-width: fit-content;
}

.district-table-height {
	height: 500px;
}