/* Bottom Panel Styling - Collapsible */
.bottom-panel {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: #FFFCF2;
	box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
	z-index: 1000;
	transition: transform 0.3s ease-in-out;
	max-height: 400px;
	display: none;
	flex-direction: column;
	}
	
/* Toggle button at the top of bottom panel */
.bottom-panel-toggle {
	background-color: #EB5E28;
	color: white;
	border: none;
	border-radius: 5px 5px 0 0;
	width: 100%;
	height: 50px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: bold;
	box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
	transition: background-color 0.2s;
	}
	
.bottom-panel-toggle:hover {
	background-color: #b84102;
	}
	
.bottom-panel-toggle .arrow {
	margin-left: 10px;
	transition: transform 0.3s ease-in-out;
	}
	
/* Tab Navigation */
.tab-navigation {
	display: flex;
	background-color: #CCC5B9;
	border-bottom: 2px solid #dee2e6;
	}
	
.tab-button {
	flex: 1;
	padding: 12px 20px;
	background-color: transparent;
	border: none;
	cursor: pointer;
	font-size: 16px;
	font-weight: 500;
	color: #495057;
	transition: background-color 0.2s, color 0.2s;
	}
	
.tab-button.hover {
	background-color: #e9ecef;
	}
	
.tab-button.active {
	background-color: #FFFCF2;
	color: #EB5E28;
	border-bottom: 3px solid #EB5E28;
	}
	
/* Tab Content */
.tab-content {
	flex: 1;
	overflow-y: auto;
	padding: 20px;
	}
	
.tab-pane {
	display: none;
	}
	
.tab-pane.active {
	display: block;
	}
	
/* Table Styling */
.data-table-container {
	overflow-x: auto;
	}
	
.data-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	}
	
.data-table thead {
	background-color: #EB5E28;
	color: white;
	position: sticky;
	top: 0;
	z-index: 10;
	}
	
.data-table td {
	padding: 10px 8px;
	border-bottom: 1px solid #dee2e6;
	}
	
.data-table tbody tr:hover {
	background-color: #CCC5B9;
	}
	
/* Selected row highlight */
.data-table tbody tr.selected {
	background-color: #00FFFF33;
	outline: 2px solid #00FFFF:
	outline-offset: -2px;
	}
	
/* Override the even-row and hover colors so selected stays visible */
.data-table tbody tr.selected:nth-child(even) {
	background-color: #00ffff33;
	}
	
.data-table tbody tr.selected:hover {
	background-color: #00ffff55;
	}
	
/* Make rows look clickable */
.data-table tbody tr {
	cursor: pointer;
	transition: background-color 0.15s ease;
	}
	
.data-table tbody tr:nth-child(even) {
	background-color: #CCC5B9;
	}
	
.data-table th.sortable {
	cursor:pointer;
	user-select: none;
	position: relative;
	padding-right:25px;
	}
	
.data-table th.sortable:hover {
	background-color: #b84102;
	}
	
.sort-arrow {
	position: absolute;
	right: 8px;
	top: 50%;
	tranform: translateY(-50%);
	font-size: 10px;
	color: rgba(255, 255, 255, 0.5);
	}
	
.sort-arrow::after {
	content: '⇅';
	}
	
.sort-arrow.asc::after {
	content: '▲';
	color: white;
	}
	
.sort-arrow.desc::after {
	content:'▼';
	color: white;
	}
	
/* Scrollbar for tab content */
.tab-content::-webkit-scrollbar {
	width: 10px;
	}
	
.tab-content::-webkit-scrollbar-track {
	background: #f1f1f1;
	}
	
.tab-content::-webkit-scrollbar-thumb {
	background: #888;
	border-radius: 5px;
	}
	
.tab-content::-webkit-scrollbar-thumb:hover {
	background: #555;
	}
	
/* Pivot Table Styling */
.pivot-builder {
	background: #CCC5B9;
	border: 1px solid #dee2e6;
	border-radius: 5px;
	padding: 20 px;
	margin-bottom: 20px;
	}
	
.checkbox-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
	}
	
.pivot-checkbox-label {
	display: flex;
	align-items: center;
	font-weight: normal;
	font-size: 14px;
	cursor: pointer;
	}
	
.pivot-checkbox-label input]type="checkbox"] {
	margin-right: 8px;
	cursor: pointer;
	}
	
.pivot-table-container {
	background: white;
	border: 1px solid #dee2e6;
	border-radius: 5px;
	padding: 20px;
	overflow-x: auto;
	}
	
.pivot-placeholder {
	text-align:center;
	color: #6c757d;
	font-style: italic;
	margin: 40px 0;
	}
	
.pivot-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	}
	
.pivot-table th {
	background-color: #EB5E28;
	color: white;
	padding: 10px;
	text-align: left;
	font-weight: 600;
	border: 1px solid #b84102;
	position: sticky;
	top: 0;
	z-index: 10;
	}
	
.pivot-table td {
	padding: 8px 10px;
	border: 1px solid #dee2e6;
	}
	
.pivot-table .row-header {
	background-color: #e9ecef;
	font-weight: 600;
	}
	
.pivot-table .total-row {
	background-color: #d1ecf1;
	font-weight: bold;
	border-top: 2px solid #EB5E28;
	}
	
.pivot-table .total-column {
	background-color: #fff3cd;
	font-weight: 600;
	border-left: 2px solid #ffc107;
	}
	
.pivot-table th.total-column {
	background-color: ffc107;
	color: #000;
	}
	
.pivot-table tbody tr:hover {
	background-color: #CCC5B9;
	}

.pivot-table .numeric-cell {
	text-align: right;
	}
	
.pivot-export-btn {
	margin-top: 15px;
	padding: 8px 16px;
	background-color: #28a745;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	}
	
.pivot-export-btn:hover {
	background-color: #218838;
	}
	
	
/* Chart Builder Styling */
.chart-builder {
	background: #CCC5B9;
	border: 1px solid #dee2e6;
	border-radius: 5px;
	padding: 20px;
	margin-bottom: 20px;
	}
	
.chart-builder h4 {
	margin: 0 0 15px 0;
	font-size: 18px;
	color: #495057;
	}
	
.builder-controls {
	display: flex;
	flex-direction: column;
	gap: 15px;
	}
	
.builder-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 15px;
	align-items: end;
	}
	
.builder-field {
	display: flex;
	flex-direction: column;
	}
	
.builder-field label {
	margin-bottom: 5px;
	font-weight: bold;
	font-size: 14px;
	color: #495057;
	}
	
.builder-field select,
.builder-field input[type="text"] {
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
	}
	
.create-chart-btn {
	padding: 10px 20px;
	background-color: #28a745;
	color: white;
	border: none;
	border-radius: 4px;
	font-size: 16px;
	cursor: pointer;
	font-weight: bold;
	transition: background-color 0.2s;
	}
	
.create-chart-btn:hover {
	background-color: #218838;
	}
	
/* Dynamic Charts Container */
.dynamic-charts-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: 20px;
	}
	
.dynamic-chart {
	background: white;
	border: 1px solid #dee2e6;
	border-radius: 5px;
	padding: 15px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	position: relative;
	}
	
.dynamic-chart-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
	}
	
.dynamic-chart h4 {
	margin: 0;
	font-size: 16px;
	color: #495057;
	flex: 1;
	}

.chart-actions {
	display: flex;
	gap: 5px;
	}
	
.download-chart-btn {
	background-color: #EB5E28;
	color: white;
	border: none;
	border-radius: 3px;
	padding: 5px 10px;
	font-size: 12px;
	cursor: pointer;
	transition: background-color 0.2s;
	}
	
.download-chart-btn:hover {
	background-color: #b84102;
	}
	
.delete-chart-btn {
	background-color: #dc3545;
	color: white;
	border: none;
	border-radius: 3px;
	padding: 5px 10px;
	font-size: 12px;
	cursor: pointer;
	transition: background-color 0.2s;
	}
	
.delete-chart-btn:hover {
	background-color: #c82333;
	}
	
.chart-canvas {
	max-height: 300px;
	}

@media screen and (max-width: 768px) {
	/* Bottom panel takes more of the screen on mobile */
	.bottom-panel {
		max-height: 70vh; /* Taller relative to screen */
		}
		
	/* Stack tabs vertically if they don't fit or shrink text */
	.tab-button {
		font-size: 13px;
		padding: 10px 8px;
		}
		
	/* Turn off wrapping for table cells so it scrolls sideways */
	.data-table {
		font-size: 12px;
		}

	.data-table td, .data-table th {
		padding: 6px 4px;
		white-space: nowrap; /* prevents cells from wrapping */
		}
		
	/* Chart builder - stack controls vertically */
	.builder-row {
		grid-template-columns: 1fr; /* single column on mobile */
		}
		
	/* Charts need to be full-width, not side by side */
	.dynamic-charts-container {
		grid-template-columns: 1fr;
		}
		
	/* Pivot builder controls also stack */
	.pivot-builder {
		padding: 12px;
		}
	}

@media screen and (max-width: 480px) {
	.bottom-panel-toggle {
		font-size: 14px;
		height: 40px;
		}
	
	.tab-button {
		font-size: 11px;
		padding: 8px 4px;
		}
		
	.chart-builder h4, .pivot-builder h4 {
		font-size: 15px;
		}
	}