/* --- Stars Theme --- */
.stars-theme {
    background: #0a1026 !important;
    color: #e0e6f7 !important;
}
.stars-theme .bg-white,
.stars-theme .bg-gray-50,
.stars-theme .bg-blue-50,
.stars-theme .bg-yellow-100 {
    background: rgba(20, 24, 40, 0.95) !important;
    color: #e0e6f7 !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.7);
}
.stars-theme input,
.stars-theme select {
    background: #181c2f !important;
    color: #e0e6f7 !important;
    border-color: #2a2e4d !important;
}
.stars-theme .range-slider::-webkit-slider-thumb, 
.stars-theme .range-slider::-moz-range-thumb {
    background: #f7e9a0 !important;
}
.stars-theme #calculateBtn {
    background: #f7e9a0 !important;
    color: #181c2f !important;
}
.stars-theme #calculateBtn:hover {
    background: #ffe066 !important;
}
.stars-theme #allocationTotal, .stars-theme #finalValue, .stars-theme .text-green-600 {
    color: #ffe066 !important;
}
.stars-theme h1, .stars-theme h2, .stars-theme h3 {
    color: #ffe066 !important;
}
.stars-theme .border-gray-300, .stars-theme .border-gray-200, .stars-theme .border-gray-100 {
    border-color: #2a2e4d !important;
}
.stars-theme .text-gray-700, .stars-theme .text-gray-800, .stars-theme .text-gray-600 {
    color: #e0e6f7 !important;
}
.stars-theme .bg-slate-800 {
    background: #181c2f !important;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
body {
    font-family: 'Inter', sans-serif;
    transition: background-color 0.3s, color 0.3s;
    background-color: #f7f9fc; /* Light mode default */
}
/* Style for the chart container to ensure responsiveness */
.chart-container {
    position: relative;
    height: 400px;
    width: 100%;
}
/* Custom styling for the range slider track */
.range-slider {
    -webkit-appearance: none;
    appearance: none;
    background: #e0e0e0;
    cursor: pointer;
    border-radius: 9999px; /* rounded-full */
}
/* Custom styling for the range slider thumb */
.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #2563eb; /* blue-600 */
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: background 0.15s ease-in-out;
}
.range-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #2563eb;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* --- Dark Mode Overrides (Vibrant Indigo Theme) --- */
.dark-mode {
    background-color: #111827; /* Darker, richer blue-gray */
    color: #d1d5db; /* Softer off-white text */
}
.dark-mode .bg-white {
    background-color: #1f2937; /* Deep blue-gray for cards */
    color: #d1d5db;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.dark-mode .text-gray-800, .dark-mode .text-blue-800 {
    color: #ffffff; /* Bright white for main headings */
}
.dark-mode .text-gray-700, .dark-mode .text-gray-600 {
    color: #9ca3af; /* Lighter gray for labels */
}
.dark-mode .border-gray-300, .dark-mode .border-gray-200, .dark-mode .border-gray-100 {
    border-color: #374151; /* Subtle borders */
}
.dark-mode input, .dark-mode select {
    background-color: #111827; /* Match main background for inputs */
    color: #d1d5db;
    border-color: #374151;
}
.dark-mode input[readonly] {
    background-color: #1f2937 !important; /* Match card color for readonly */
    cursor: not-allowed;
}
.dark-mode .bg-gray-50 {
    background-color: #1f2937; /* Toggle area background */
}
.dark-mode .bg-blue-50 {
    background-color: #1e3a8a; /* Darker blue for summary card */
}
.dark-mode .bg-yellow-100 {
    background-color: #1f2937; /* Total allocation box background */
    border-color: #374151;
    color: #d1d5db;
}

/* Vibrant Indigo Accent Color */
.dark-mode .range-slider::-webkit-slider-thumb, 
.dark-mode .range-slider::-moz-range-thumb {
    background: #6366f1; /* Indigo-500 */
}
.dark-mode .range-slider {
    background: #374151; /* Dark gray track */
}

/* Main action button */
.dark-mode #calculateBtn {
    background-color: #6366f1; /* Indigo-500 */
    color: #ffffff; /* White text on vibrant indigo */
}
.dark-mode #calculateBtn:hover {
    background-color: #4f46e5; /* Indigo-600 */
}

/* Vibrant text for key metrics */
.dark-mode #allocationTotal, .dark-mode #finalValue, .dark-mode .text-green-600 {
    color: #4ade80; /* Green-400 for high-contrast success */
}

/* Increase size of Future Value title */
h1 {
    font-size: 3.5rem; /* Larger than Tailwind's text-4xl */
    line-height: 1.1;
}

@media (min-width: 768px) {
    h1 {
        font-size: 4.5rem;
    }
}

/* Center the calculated amount */
#finalValue {
    text-align: center;
    width: 100%;
    display: block;
}


/* Lock indicator styling */
.allocation-locked .range-slider::-webkit-slider-thumb, 
.allocation-locked .range-slider::-moz-range-thumb {
    background: #f87171; /* Red-400 for locked */
}

/* Fix for select background in dark mode */
.dark-mode select {
    background-color: #111827;
    color: #d1d5db;
}