/* Custom styles */
body { 
	font-family: 'Inter', sans-serif; 
	scroll-behavior: smooth; 
}

/* Light theme overrides for calculator */
.calculator-page {
	background-color: #f9fafb; /* bg-gray-50 */
	color: #111827; /* text-gray-900 */
} 

/* Fix sticky action toolbar */
#action-toolbar {
	position: sticky !important;
	top: 8px !important;
	z-index: 40 !important;
	margin-bottom: 1rem !important;
}

/* Add padding between sections */
#action-toolbar + .grid {
	margin-top: 1.5rem !important;
}

/* Alternative approach - target the specific buttons container */
.sticky.top-2.z-40.mb-4 {
	position: sticky !important;
	top: 8px !important;
	z-index: 40 !important;
	margin-bottom: 1rem !important;
}

/* Improve large-screen readability for forms */
.form-grid-wide .grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

/* Custom styling for number input arrows */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
	-webkit-appearance: none; 
	margin: 0; 
} 
input[type=number] { 
	appearance: textfield; 
} 

/* Custom focus ring */
.focus-ring { 
	transition: box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; 
} 
.focus-ring:focus { 
    outline: none; 
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35); 
} 

/* Animation for results appearing */
@keyframes fadeIn { 
	from { opacity: 0; transform: translateY(10px); } 
	to { opacity: 1; transform: translateY(0); } 
} 
.fade-in { 
	animation: fadeIn 0.5s ease-out forwards; 
} 

/* Toggle button styles */
.toggle-btn-active { 
    background-color: #000000; 
    color: white; 
} 
.toggle-btn-inactive { 
	color: #6B7280; /* gray-500 */
	background-color: transparent; 
} 
.toggle-btn-inactive:hover { 
	background-color: #E5E7EB; /* gray-200 */
} 

/* Hide/show transition */
.collapsible { 
	max-height: 0; 
	overflow: hidden; 
	transition: max-height 0.5s ease-in-out; 
} 
.collapsible.open { 
	max-height: 1000px; /* Increased for new sections */
} 

/* Modal styles */
#extra-payment-modal {
	transition: opacity 0.3s ease-in-out;
}

#extra-payment-modal.hidden {
	opacity: 0;
	pointer-events: none;
}

#extra-payment-modal:not(.hidden) {
	opacity: 1;
}

#extra-payment-modal .bg-gray-800 {
	transform: scale(0.95);
	transition: transform 0.3s ease-in-out;
}

#extra-payment-modal:not(.hidden) .bg-gray-800 {
	transform: scale(1);
}

/* Custom chart styles */
.chart-segment { 
	transition: transform 0.2s ease-in-out; 
	transform-origin: center; 
}

/* Consistent carrot styling across all devices */
.bucket-caret, #closing-costs-arrow, #monthly-breakdown-arrow {
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	line-height: 1;
	display: inline-block;
	width: 12px;
	text-align: center;
	transition: transform 0.2s ease-in-out;
}

/* Initial state for bucket carets - rotated to point right when collapsed */
.bucket-caret {
	transform: rotate(-90deg);
}

/* Initial state for scenario arrows - rotated to point right when collapsed */
#monthly-breakdown-arrow, #closing-costs-arrow {
	transform: rotate(-90deg);
} 
.chart-segment:hover { 
	transform: scale(1.05); 
} 
.chart-label { 
    font-size: 10px; 
    fill: #e5e7eb; /* gray-200 for contrast on dark cards */
    transition: transform 0.2s ease-in-out, font-weight 0.2s ease-in-out; 
    transform-origin: center; 
    pointer-events: none; 
} 
.chart-segment:hover .chart-label { 
	font-weight: bold; 
	transform: scale(1.1); 
}