* {box-sizing: border-box; /* CRITICAL: Ensures padding and border are included in the element's total width/height */
}

:root {
	--color-bg-primary: #f8f9fa;   
	--color-surface-white: #ffffff; 
	--color-text-primary: #002554;  
	--color-text-secondary: #B9975b; 
	--color-accent-blue: #000000;   
	--color-accent-light: #e9f5ff;  
	--color-negative: #dc3545;      
	--color-border: #0025544d;        
	--font-family: "Inter", sans-serif;
	--shadow-light: 0 0.5rem 1rem rgba(0, 0, 0, 0.05); /* Soft shadow */
}




body {
	font-family: var(--font-family);
	/* background-color: var(--color-bg-primary); */
	color: var(--color-text-primary);
	margin: 0 auto;
	padding: 0;
	overflow-x: hidden; /* Added to prevent horizontal scrolling */
	padding: 20px;
}

/* --- Main Layout: Split View on Desktop --- */
.main-wrapper {
	display: flex;
	max-width: 1400px;
	width: 100%; /* Explicitly set width */
	background-color: var(--color-surface-white); /* Main container is white */
	/* box-shadow: var(--shadow-light); */
	border-radius: 0px;
	margin: 0px auto;
}

/* 1. Left Sidebar (Filters) */
.sidebar {
	width: 300px;
	flex-shrink: 0;
	padding: 10px 25px;
	border: 1px solid var(--lines);
	background-color: var(--white); /* Slightly different background for sidebar */
	border-radius: 0px 0 0 0px;
}

.sidebar-header {
	border-bottom: 2px solid var(--color-accent-blue);
	padding-bottom: 15px;
	margin-bottom: 20px;
}
.sidebar-header h2 {
	margin: 0;
	font-size: 1.5rem;
	color: var(--color-accent-blue);
}

/* Filter Cards */
.filter-group {
	margin-bottom: 25px;
	padding: 10px 15px;
	background-color: var(--color-surface-white);
	border: 1px solid var(--color-border);
	border-radius: 0px;
}
.filter-group h4 {
	font-size: 20px;
	font-weight: 500;
	color: var(--color-text-primary);
	margin-top: 0;
	margin-bottom: 10px;
	border-bottom: 1px solid var(--color-border);
	padding-bottom: 8px;
}

/* Select/Dropdown Styling */
select {
	text-align: left;
    border-radius: 5px;
    color: var(--primary);
    background-color: var(--white);
    font-size: 16px;
    border: 1px solid var(--lines);
    font-weight: 500;
    font-family: var(--font);
    position: relative;
    overflow: hidden;
    display: flex;
    padding: 10px 16px; /* Adjust left/right padding as needed */
    transition: all 0.3s ease;
	width: 100%;
	margin-bottom: 12px;
}

.form-select {
	appearance: none;
	background-image: url('images/down-arrow-black.svg');
	background-repeat: no-repeat;
	background-size: 18px;
	background-position: right 11px center;
	padding-right: 36px;
}

select:focus-visible {
	outline: none;
}

/* Checkbox Styling */
.checkbox-container {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.checkbox-item {
	display: flex;
	align-items: center;
	font-size: 16px;
	cursor: pointer;
}
.checkbox-item input[type="checkbox"] {
	margin-right: 10px;
	accent-color: var(--primary);
}

/* Action Buttons */
.action-buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 30px;
}

.button-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    /* background-color: var(--white); */
    border-bottom: var(--button-border);
    padding: 12px 6px 12px 0px; 
    min-width: 180px;    /* Keeps button size consistent */
    overflow: hidden;
    cursor: pointer;
    color: var(--primary)
}

/* Make the actual input invisible but fill the whole container */
#btnGo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 10; /* Sits on top to capture clicks */
    cursor: pointer;
	color: var(--primary);
}

.btn-content {
    display: flex;
    align-items: center;
    width: 100%;
    pointer-events: none; /* Let clicks pass through to the input */
}

.btn-text {
    color: var(--primary);
    font-family: var(--font);
    font-weight: 500;
    flex-shrink: 0;
}

.btn-icon {
    width: 20px;
    height: auto;
    flex-shrink: 0;
    margin-left: auto; /* Pushes icon to the right side */
    /* Starts 5px away from the right edge */
    transform: translateX(-5px); 
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}



.download-button {
    text-align: left;
    border-radius: 0px;
    color: var(--primary);
    background-color: transparent;
    font-size: 16px;
    border-top: 0px;
    border-bottom: var(--button-border);
    border-left: 0px;
    border-right: 0px;
    font-weight: 500;
    font-family: var(--font);
    position: relative;
    overflow: visible;
    display: flex;
    /* 15px right padding creates the '5px to the right' look initially */
    padding: 12px 10px 12px 0px; 
    transition: background-color 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
}

.btn-content {
    display: flex;
    align-items: center;
    width: 100%;
}

.download-btn-icon {
    width: 20px;
    height: auto;
    flex-shrink: 0;
    margin-left: auto; /* Pushes icon to the right side */
    /* Starts 5px away from the right edge */
    transform: translateY(0px); 
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Hover States --- */

.button-container:hover .btn-icon {
    /* Moves the icon the last 5px to the absolute edge */
    transform: translateX(5px); 
}

.download-button:hover .download-btn-icon {
    /* Moves the icon the last 5px to the absolute edge */
    transform: translateY(6px); 
}

.button-container:hover .progress-line {
    width: 100%;
}

.download-button:hover .progress-line {
    width: 100%;
}

/* --- Progress Bar --- */
.progress-line {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0%;
    background: var(--button-border-small);
    transition: width 0.4s ease;
    z-index: 5;
}


/* .btn-go:hover {
	background-color: #000000;
} */

/* Use a parent container for the hover effects */
.button-container {
	position: relative;
	display: inline-block;
}

/* .button-container::before {
	position: absolute;
	content: '';
	background-image: url('right-arrow-white.svg');
	background-repeat: no-repeat;
	width: 20px;
	height: 20px;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	pointer-events: none;
	transition: all 0.8s ease;
}

.button-container::after {
	content: 'Apply filters';
	position: absolute;
	left: 85px;
	top: 50%;
	transform: translateY(100%);
	opacity: 0;
	transition: all 0.8s ease;
	white-space: nowrap;
	color: #000;
	z-index: 2;
	font-weight: 500;
	font-size: 14px;
}

.button-container:hover::before {
	background-image: url('right-arrow-black.svg');
	width: 25px;
	height: 25px;
	right: 10px;
} */

/* .button-container:hover::after {
	transform: translateY(-50%);
	opacity: 1;
} */

/* .button-container:hover .btn-go {
	background-color: rgb(174 174 174 / 30%);
	backdrop-filter: blur(12px);
	border: 1px solid #000;
	color: #000;
	color: transparent;
} */

.btn-export {
	background-color: var(--color-surface-white);
	color: var(--color-accent-blue);
	border: 1px solid var(--color-accent-blue);
}

/* 2. Right Content Area (Data View) */
.content-area {
	flex-grow: 1;
	padding: 5px 25px;
	border-radius: 20px;
}

/* Scroll Navigation Styling */
.scroll-navigation {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 20px !important;
    padding: 5px 0 !important;
    width: 100% !important;
}

/* Target ANY anchor inside scroll-navigation */
.scroll-navigation a {
    /* background-color: var(--color-accent-blue) !important; */
    color: var(--color-surface-white) !important;
    border: none !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    transition: background-color 0.2s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important; */
    text-decoration: none !important;
}

.scroll-navigation a:hover:not(.disabled) {
    background-color: #f0e9db !important;
}

.scroll-navigation a.disabled {
    /* background-color: #000 !important; */
    cursor: not-allowed !important;
   
}

/* SVG Icon Style */
.scroll-navigation a svg {
    width: 20px !important;
    height: 20px !important;
    fill: currentColor !important;
}

/* FORCE the first anchor to left and second to right */
.scroll-navigation a:first-child {
    order: 1 !important;
    margin-right: auto !important;
}

.scroll-navigation a:last-child {
    order: 2 !important;
    margin-left: auto !important;
}

#current-periods-display {
	font-weight: 600;
	color: var(--color-text-primary);
}

/* Data Table Container */
.data-table-container {
	border: 0px solid var(--color-border);
	border-radius: 4px;
	overflow-x: auto; /* Allow horizontal scroll for desktop data table */
	background-color: var(--color-surface-white);
	scroll-behavior: smooth; 
}

/* Data Table Structure - CSS Grid */
.data-header-row,
.data-row,
.meta-row {
	display: grid;
	/* Column 1: Metric Name (Sticky) | Columns 2+: Period Values (4 columns total) */
	grid-template-columns: 400px 1fr 1fr 1fr 1fr; 
	min-width: 900px; /* Adjusted min-width for 4 data columns */
}

.data-header-row {
	background-color: var(--primary);
	color: var(--white);
	font-weight: 500;
	position: sticky;
	top: 0;
	z-index: 10;
}

/* STICKY COLUMN STYLE */
.data-cell-metric {
	position: sticky;
	left: 0;
	background-color: #f2f2f2; 
	color: var(--color-text-primary);
	font-weight: 500;
	text-align: left !important;
	border-right: 0px solid var(--color-border);
	z-index: 5;
}
.data-header-row .data-cell-metric {
	background: var(--primary);
	color: var(--white);
	font-weight: 500;
}
.data-cell
{
	color: var(--primary);
}
.data-cell,
.data-cell-metric {
	padding: 16px 16px;
	text-align: right;
	border-bottom: 1px solid var(--color-border);
	font-size: 16px;
}

.data-cell-metric {
	color: var(--primary);
}

.period-header {
	color: var(--white);
	background-color: var(--primary);
}

/* Group Headers */
.group-header {
	grid-column: 1 / -1;
	background-color: var(--white);
	color: var(--primary);
	font-weight: 500;
    font-size: 18px;
	padding: 15px;
	text-align: left;
	border-bottom: 2px solid var(--primary);
}

/* Meta Rows */
.meta-row {
	background-color: var(--primarylighter);
	font-size: 0.9rem;
	color: var(--color-text-secondary);
}
.meta-row .data-cell-metric {
	font-weight: 500;
}

/* Total Rows */
.data-row.total-row {
	font-weight: 500;
	background-color: var(--color-accent-light);
	border-top: 2px solid var(--color-accent-blue); 
}

/* Negative Values */
.data-cell.negative {
    color: #B4181D;
}

/* Mobile Responsive Styles  */
/* --- Responsiveness: Mobile Layout (Single Column Stack) --- */
@media (max-width: 992px) {
	.main-wrapper {
		flex-direction: column; 
		margin: 0; 
		width: 100%; 
		border-radius: 0;
	}

	.sidebar {
		width: 100%; 
		border-right: none;
		border-bottom: 1px solid var(--color-border);
		border-radius: 0;
		padding: 20px 15px; 
	}
	
	.filter-group {
		margin-bottom: 15px; 
		padding: 12px;
	}
	
	.btn {
		padding: 10px;
	}
	
	.content-area {
		padding: 15px;
	}
	
	/* Data View changes for mobile (Card View) */
	.data-table-container {
		max-height: none; 
		overflow-y: visible; 
		overflow-x: visible; /* Remove horizontal scroll on mobile */
		border: none;
	}
	
	/* Hide desktop headers */
	.data-header-row {
		display: none !important; 
	}
	
	/* Reset grid layout for mobile */
	.data-row,
	.meta-row {
		display: block !important; 
		grid-template-columns: none !important;
		min-width: auto !important;
		border: 1px solid var(--color-border);
		border-radius: 4px;
		margin-bottom: 10px;
		padding: 15px;
		background-color: var(--color-surface-white);
	}
	
	.data-row.total-row {
		border: 2px solid var(--color-accent-blue);
	}

	/* metric cell for mobile */
	.data-cell-metric {
		position: static !important; 
		width: 100% !important;
		display: block !important;
		font-size: 1rem !important;
		color: var(--primary) !important;
		padding: 0 0 10px 0 !important;
		border-bottom: 1px dashed var(--color-border) !important;
		margin-bottom: 10px !important;
		background-color: transparent !important;
		border-right: none !important;
		text-align: left !important;
		font-weight: 600 !important;
	}

	/* data cells for mobile card layout */
	.data-cell {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		padding: 8px 0 !important;
		text-align: right !important;
		border-bottom: none !important;
		width: 100% !important;
	}

	/* Add data headers for mobile */
	.data-cell::before {
		content: attr(data-header) ":" !important;
		font-weight: 500 !important;
		color: var(--color-text-primary) !important;
		text-align: left !important;
		padding-right: 10px !important;
	}
	
	/* group headers for mobile */
	.group-header {
		margin-top: 20px !important;
		margin-bottom: 10px !important;
		border-radius: 4px !important;
		grid-column: 1 !important;
		display: block !important;
	}
	
	/* meta rows specifically */
	.meta-row .data-cell-metric {
		font-weight: 500 !important;
		color: var(--primary) !important;
	}
	
	.meta-row .data-cell::before {
		font-weight: 500 !important;
	}
}

/* for the specific ASP.NET elements */
#financialHeaders, #paginationControls, #financialData {
	display: block;
}

@media (max-width: 992px) {
	#financialHeaders, #paginationControls, #financialData {
		display: block;
		width: 100%;
	}
	
	/* Ensure all children of financialData are properly displayed */
	#financialData > div {
		width: 100%;
	}
}

/* Chart Popup Styles */
.chart-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.chart-backdrop.visible {
    opacity: 1;
}

.chart-popup {
    position: absolute;
    z-index: 9999;
    background-color: white;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
    min-width: 450px;
    min-height: 250px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    transform: scale(0.9);
    width: 90%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
}

.chart-popup.visible {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.close-button {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #4b5563;
    cursor: pointer;
    line-height: 1;
    z-index: 10000;
}

.close-button:hover {
    color: #002554;
}

#chart-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #002554;
    margin-bottom: 1rem;
    text-align: center;
    flex-shrink: 0;
}

#chart-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
}

#item-chart {
    flex: 1;
    min-height: 250px;
    max-height: 300px;
    width: 100% !important;
}

.loading-spinner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 0.5rem;
    z-index: 10001;
}

.loading-spinner span {
    color: #4f46e5;
    font-weight: 500;
    margin-left: 0.5rem;
}

/* Chart hover effects for data cells */
.data-cell:not(.data-cell-metric) {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#financialData .data-cell:not(.data-cell-metric):hover {
    background-color: #f3f4f6;
}

/* Mobile responsive chart */
@media (max-width: 768px) {
    .chart-popup {
        width: 95vw;
        max-width: 95vw;
        padding: 1rem;
        min-width: unset;
        min-height: 400px;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.9);
    }
    
    .chart-popup.visible {
        transform: translate(-50%, -50%) scale(1);
    }
    
    #chart-title {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }
    
    #item-chart {
        height: 300px !important;
        min-height: 300px;
    }
    
    .close-button {
        top: 0.25rem;
        right: 0.25rem;
        font-size: 1.75rem;
    }
}

/* Enhanced tooltip styling */
.chartjs-tooltip {
    opacity: 0;
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    border-radius: 6px;
    padding: 12px;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1000;
    max-width: 250px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.chartjs-tooltip__header {
    font-weight: bold;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 4px;
}

.chartjs-tooltip__body {
    line-height: 1.4;
}

/* Smooth animations */
.chart-popup {
    animation-duration: 0.3s;
    animation-fill-mode: both;
}

@keyframes chartPopupIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes chartPopupOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    to {
        opacity: 0;
        transform: scale(0.9) translateY(-10px);
    }
}

/* Enhanced chart toggle checkbox styling */
.chart-toggle-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    font-size: 0.875rem;
    color: #4b5563;
    padding: 0.75rem 1rem;
    border-radius: 0px;
    transition: all 0.2s ease;
    background-color: #fff;
    border: 0px solid #e2e8f0;
    margin-bottom: 1rem;
}

/* .chart-toggle-label:hover {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
} */

.chart-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Toggle switch styling */
.chart-toggle-checkmark {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    background-color: var(--primarylighter);
    border-radius: 12px;
    margin-right: 0.75rem;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.chart-toggle-checkmark:after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background-color: white;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.chart-toggle-input:checked ~ .chart-toggle-checkmark {
    background-color: var(--primary);
    border-color: var(--primarylighter);
}

.chart-toggle-input:checked ~ .chart-toggle-checkmark:after {
    transform: translateX(20px);
}

.chart-toggle-input:focus ~ .chart-toggle-checkmark {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
    border-color: var(--primarylighter);
}

.chart-toggle-text {
    font-weight: 500;
    color: var(--primary);
    font-size: 16px;
}

/* Active state animation */
.chart-toggle-checkmark:after {
    animation: checkmarkSlide 0.3s ease-out;
}

@keyframes checkmarkSlide {
    from {
        transform: translateX(0) scale(0.8);
    }
    to {
        transform: translateX(20px) scale(1);
    }
}

/* For when switching off */
.chart-toggle-input:not(:checked) ~ .chart-toggle-checkmark:after {
    animation: checkmarkSlideOff 0.3s ease-out;
}

@keyframes checkmarkSlideOff {
    from {
        transform: translateX(20px) scale(0.8);
    }
    to {
        transform: translateX(0) scale(1);
    }
}

/* Sidebar header adjustments */
.sidebar-header {
    border-bottom: 2px solid var(--color-accent-blue);
    padding-bottom: 15px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-header h2 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--color-accent-blue);
}

.sidebar-header {
    position: relative;
}

.chart-toggle-label {
    margin-bottom: 0;
}

@media (max-width: 425px) {
	.filter-group h4 {
		font-size: 18px;
	}
}