.value-box {
	display: inline-block;
	padding: 6px 12px;
	background-color: rgb(207, 236, 200);
	border-radius: 8px;
	border: 1px solid #c6e0f5;
	text-align: center;
	min-width: 100px;
}

.value-box-growth {
	display: inline-block;
	padding: 6px 12px;
	background-color: #96f5a2;
	border-radius: 8px;
	border: 1px solid #c6e0f5;
	text-align: center;
	min-width: 100px;
}

.neg-value-box-growth {
	display: inline-block;
	padding: 6px 12px;
	background-color: #fc9191;
	border-radius: 8px;
	border: 1px solid #c6e0f5;
	text-align: center;
	min-width: 100px;
}

.value-box-share {
	display: inline-block;
	padding: 6px 12px;
	background-color: #dbf2de;
	border-radius: 8px;
	border: 1px solid #c6e0f5;
	text-align: center;
	min-width: 100px;
}

.italic-text {
	font-style: italic;
}

.ag-header-cell-label {
	white-space: normal !important; /* allow wrapping */
	line-height: 1.2em;
}

.sort-arrow {
	font-size: 0.8em;
	margin-left: 5px;
	opacity: 0.6;
}

th:hover {
	background-color: #7aaedf !important;
}

.country {
	stroke: #ffffff;
	stroke-width: 0.5;
	transition: all 0.3s;
	cursor: pointer;
}

.country:hover {
	stroke: #333;
	stroke-width: 1.5;
	filter: brightness(0.9);
}

.country.no-data {
	fill: #e0e0e0;
}

#tooltip {
	position: absolute;
	z-index: 9999;
}

#legend {
	margin-top: 20px;
	text-align: center;
}

#legend .legend-title {
	font-weight: 600;
	margin-bottom: 10px;
	color: #333;
}

#legend .legend-scale {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

#legend .legend-item {
	display: inline-flex;
	align-items: center;
	margin: 0 10px;
}

#legend .color-box {
	width: 30px;
	height: 20px;
	border: 1px solid #ccc;
	margin-right: 5px;
}

.loading {
	text-align: center;
	padding: 50px;
	font-size: 18px;
	color: #666;
}

/* --- MOBILE RESPONSIVE STYLES START --- */

/* Toggle button hidden on desktop */
.mobile-toggle-btn {
	display: none;
}

.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; /* Below sidebar, above content */
	backdrop-filter: blur(2px);
}

@media ( max-width : 991px) {
	/* Main panel takes full width */
	.main-panel {
		width: 100% !important;
		margin-left: 0 !important;
		padding-top: 60px; /* Space for the toggle button */
	}

	/* Sidebar hidden by default */
	#sidebar {
		position: fixed;
		top: 0;
		left: -280px; /* Hide off-screen */
		height: 100%;
		width: 260px;
		z-index: 1050; /* High z-index to overlay everything */
		transition: left 0.3s ease-in-out;
		box-shadow: 4px 0 15px rgba(0, 0, 0, 0.2);
		overflow-y: auto;
		/* Ensure background color is consistent */
		background-color: #203548 !important;
	}

	/* Class to slide sidebar in */
	#sidebar.active {
		left: 0;
	}

	/* Form needs to act as a container for fixed sidebar */
	#indiatrade {
		/* No specific styles needed here, sidebar handles positioning */
		
	}

	/* Show toggle button */
	.mobile-toggle-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		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;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
		cursor: pointer;
	}
	.mobile-toggle-btn:hover {
		background-color: #2c465f;
	}

	/* Show overlay when sidebar is active */
	.sidebar-overlay.active {
		display: block;
	}

	/* Adjust tooltips on mobile to not go off screen */
	#tooltip {
		max-width: 90vw;
	}
}
/* --- MOBILE RESPONSIVE STYLES END --- */
/* Responsive Grid Container */
#state-data-table {
	width: 100%;
	overflow-x: auto; /* Prevent body scroll, let grid handle it */
	padding: 0 5px; /* Add small padding on mobile */
}

.ag-theme-quartz {
	width: 100%;
}

/* Adjustments for Mobile Screens */
@media ( max-width : 768px) {
	#state-data-table h4 {
		font-size: 1.1rem; /* Smaller title on mobile */
	}

	/* Optional: Adjust grid font size for mobile */
	.ag-theme-quartz {
		font-size: 12px;
	}

	/* Ensure FusionCharts container fits */
	#publicStatewiseChartDiv, #publicDistrictwiseChartDiv {
		width: 100% !important;
		overflow: hidden;
	}
}

@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;
	}
}

/* --- CSP remediation: classes replacing removed inline styles --- */
.map-tooltip-card {
	padding: 8px 5px;
	min-width: 160px;
	background: #fff;
	border-radius: 12px;
	text-align: center;
	font-family: Inter, sans-serif;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.map-tooltip-title {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 6px;
	color: #f97316;
}

.map-tooltip-body {
	font-size: 13px;
	line-height: 1.4;
}

.map-tooltip-label {
	color: #94a3b8;
}

.map-tooltip-value {
	color: #515151;
}

.map-tooltip-growth-pos {
	color: #228B22;
}

.map-tooltip-growth-neg {
	color: #f97316;
}

.map-tooltip-nodata {
	padding: 8px 5px;
	min-width: 160px;
	background: #fff;
	color: #515151;
	border-radius: 12px;
	text-align: center;
	font-family: Inter, sans-serif;
}

.map-header-title {
	position: relative;
	float: left;
	left: 14%;
}

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

.note-text-xs {
	font-size: x-small;
	font-weight: bold;
}

.legend-swatch-max {
	background-color: rgb(16, 105, 4);
}

.legend-swatch-r3 {
	background-color: #228B22;
}

.legend-swatch-r2 {
	background-color: #32CD32;
}

.legend-swatch-neg {
	background-color: rgb(186, 235, 178);
}

.legend-swatch-nodata {
	background-color: #94a3b8;
}

/* ---- Additional CSP remediation classes (2nd pass) ---- */
.sidebar-bg-dark {
	background-color: #203548;
}

.gap-40 {
	gap: 40px;
}

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

.chart-h400 {
	height: 400px;
}

.mt-10-block {
	margin-top: 10px;
}

.region-th {
	font-size: medium;
	background-color: #8ebef0;
	cursor: pointer;
}

.region-th-first {
	font-size: medium;
	width: 10%;
	background-color: #8ebef0;
	cursor: pointer;
}

.region-td-label {
	font-size: small;
	white-space: normal;
	word-wrap: break-word;
}

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

.overflow-y-scroll {
	overflow-y: scroll;
}

/* CSS FOR RESPONSIVENESS */
#map-wrapper {
	width: 100%;
	position: relative;
	overflow: hidden; /* Prevents scrollbars if map slightly overflows */
}

#map-container {
	width: 100%;
	/* Remove fixed height here, let the SVG determine it */
}

#map {
	display: block;
	width: 100%;
	height: auto; /* Allows SVG to scale */
	background-color: transparent;
}

/* Mobile Tooltip Adjustments */
#tooltip {
	position: absolute;
	opacity: 0;
	z-index: 1000;
	pointer-events: none;
	/* Important: prevents tooltip from blocking mouse events */
	transition: opacity 0.2s;
}

/* Legend adjustments for mobile */
#legend {
	font-family: Inter, sans-serif;
	font-size: 12px;
	display: flex;
	flex-wrap: wrap; /* Allows legend items to wrap on small screens */
	justify-content: center;
	gap: 10px;
	margin-top: 10px;
}

.legend-item {
	display: flex;
	align-items: center;
}

.color-box {
	width: 15px;
	height: 15px;
	margin-right: 5px;
	display: inline-block;
}

.country-label {
	text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px
		0 #fff;
}
/* ===============================
	   Map header & action buttons
	   =============================== */
.map-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 20px;
}

/* Buttons container (right side) */
.map-actions {
	display: flex;
	gap: 14px;
}

/* Button styling (overrides Tailwind) */
.map-actions button {
	background-color: #0078d4;
	color: #ffffff;
	border: none;
	padding: 10px 22px;
	border-radius: 999px; /* pill shape */
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

/* Hover effect */
.map-actions button:hover {
	background-color: #005fa3;
}

/* CSS FOR RESPONSIVENESS */
#map-wrapper {
	width: 100%;
	position: relative;
	overflow: hidden; /* Prevents scrollbars if map slightly overflows */
}

#map-container {
	width: 100%;
	/* Remove fixed height here, let the SVG determine it */
}

#map {
	display: block;
	width: 100%;
	height: auto; /* Allows SVG to scale */
	background-color: transparent;
}

/* Mobile Tooltip Adjustments */
#tooltip {
	position: absolute;
	opacity: 0;
	z-index: 1000;
	pointer-events: none;
	/* Important: prevents tooltip from blocking mouse events */
	transition: opacity 0.2s;
}

/* Legend adjustments for mobile */
#legend {
	font-family: Inter, sans-serif;
	font-size: 12px;
	display: flex;
	flex-wrap: wrap; /* Allows legend items to wrap on small screens */
	justify-content: center;
	gap: 10px;
	margin-top: 10px;
}

.legend-item {
	display: flex;
	align-items: center;
}

.legend-title-row {
	width: 100%;
	text-align: center;
	margin-bottom: 5px;
}

.legend-scale-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.color-box {
	width: 15px;
	height: 15px;
	margin-right: 5px;
	display: inline-block;
}

.commo-select.inline {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 40px;
	margin-left: 5%;
}
.commo-select.inline .form-check {
	display: inline-flex !important;
	align-items: center;
	width: auto !important;
	margin-bottom: 0 !important;
	white-space: nowrap;
}

.highcharts-credits {
	display: none;
}
 
g[class^='raphael-group-'][class$='-creditgroup'] {
	display: none !important;
}
 
[pointer-events="bounding-box"] {
	display: none
}
 
.amcharts-credits {
	display: none !important;
}