/* --- Global & Shared Styles --- */
#solar-calculator-inputs-app, #solar-calculator-forecast-app, #solar-calculator-results-app { font-family: Arial, sans-serif; max-width: 900px; margin: 20px auto; }
.calculator-logo-container { text-align: center; margin-bottom: 25px; }
.calculator-logo { max-width: 250px; height: auto; }
.calculator-section { margin-bottom: 25px; }
.step-header { color: white; background-color: #34a853; padding: 15px; font-size: 1.2em; font-weight: bold; text-align: left; }
.step-header.dark-blue { background-color: #4285f4; }
.step-content { padding: 20px; background-color: #b6d7a8; }
.step-content.light-blue { background-color: #cfe2f3; }
.step-content.centered { display: flex; justify-content: center; }
.navigation-buttons { padding: 15px; text-align: right; background-color: #f5f5f5; border-top: 1px solid #ddd; }
.navigation-buttons button, .navigation-buttons a { display: inline-block; text-decoration: none; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 1em; font-weight: bold; }
a.back-btn-link, button.reset-btn { background-color: #f0f0f0; color: #333; margin-right: 10px; }
button.next-btn, a.next-btn-link { background-color: #34a853; color: white; }

/* --- PAGE 1: Input Layout --- */
.input-grid { display: grid; gap: 15px; margin-bottom: 15px; }
.input-grid.grid-2-col { grid-template-columns: repeat(2, 1fr); }
.input-grid.grid-3-col { grid-template-columns: repeat(3, 1fr); }
.input-grid.grid-2-col-preferred { grid-template-columns: 1fr 1fr; }
.input-group, .output-group { display: flex; flex-direction: column; }
.input-group label, .output-group label { font-weight: bold; color: #000; text-align: center; background-color: #93c47d; padding: 8px; border-radius: 4px 4px 0 0; border: 1px solid #6aa84f; border-bottom: none; display: flex; align-items: center; justify-content: center; min-height: 38px; }
.step-content.light-blue .input-group label, .step-content.light-blue .output-group label { background-color: #a4c2f4; border-color: #6d9eeb; }
.input-group input, .input-group select, .output-group .output-value { padding: 10px; border: 1px solid #999; border-radius: 0 0 4px 4px; font-size: 1.1em; text-align: center; background-color: white; width: 100%; box-sizing: border-box; }
.input-group.multi-input .multi-input-wrapper { display: flex; gap: 5px; padding: 10px; border: 1px solid #999; border-top: none; border-radius: 0 0 4px 4px; background: white; align-items: center; }
.input-group.multi-input .multi-input-wrapper input, .input-group.multi-input .multi-input-wrapper select { padding: 8px; border: 1px solid #ccc; border-radius: 3px; flex: 1; text-align: center; }
.input-group.multi-input > label { display: flex; justify-content: space-around; }
.input-group.multi-input > label span { flex: 1; text-align: center; }
.output-value.highlight { background-color: #b6d7a8; font-weight: bold; color: #274e13; }
.output-value.highlight-red { background-color: #f4cccc; color: #cc0000; }
.calculated-value.hidden { display: none; }
.input-group.single-centered { max-width: 300px; width: 100%; margin: 0 auto; }
.input-grid.single-item-row { display: flex; justify-content: center; }
.input-grid.single-item-row .output-group { flex-grow: 0; width: 49%; }

/* DAY/NIGHT GRID STYLES */
.day-night-group .day-night-grid-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px; background: white; border: 1px solid #999; border-top: none; border-radius: 0 0 4px 4px; }
.day-night-grid-wrapper .percent-input-container { display: flex; align-items: center; border: 1px solid #ccc; border-radius: 3px; padding-right: 5px; }
.day-night-grid-wrapper .percent-input-container input { width: 100%; border: none; padding: 8px; text-align: center; -moz-appearance: textfield; }
.day-night-grid-wrapper .percent-input-container input::-webkit-outer-spin-button, .day-night-grid-wrapper .percent-input-container input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --- PAGE 2 & 3: Results & Forecast --- */
.forecast-container, #solar-calculator-results-app { text-align: left; }
.step-header.main-title { text-align: center; font-weight: bold; }
.results-table thead th.sub-title { font-weight: bold; }
.forecast-subheader { padding: 20px; background: #f9f9f9; text-align: center; }
.total-savings-bar { background-color: #34a853; color: white; font-size: 1.3em; font-weight: bold; padding: 20px; text-align: center; }
.results-table { width: 100%; border-collapse: collapse; margin: 0; }
.results-table th, .results-table td { border: 1px solid #ccc; padding: 10px; text-align: center; }
.results-table thead th.dark-blue { background-color: #4285f4; color: white; padding: 12px; }
.results-table tbody tr { background-color: #fff; }
.results-table tbody tr.highlight-year { background-color: #b6d7a8; font-weight: bold; }
.total-savings-banner { background-color: #a4c2f4; color: #000; font-weight: bold; padding: 15px; text-align: center; font-size: 1.3em; margin-bottom: 20px; }
.chart-container { background: white; padding: 20px; margin-bottom: 20px; }
.chart-bar-group { display: flex; align-items: center; margin-bottom: 15px; }
.chart-value { width: 100px; font-weight: bold; text-align: left; }
.chart-bar { height: 30px; transition: width 0.5s ease-in-out; }
.chart-bar.red { background-color: #ff0000; }
.chart-bar.green { background-color: #93c47d; }
.chart-label { padding-left: 10px; }
.savings-footer-label { text-align: right; font-weight: bold; padding: 10px; background-color: #34a853; color: white; }
.savings-footer-value { font-weight: bold; background-color: #fff2cc; padding: 10px; font-size: 1.1em; }
.savings-footer-value.orange { background-color: #fce5cd; }
.savings-footer-spacer td { padding: 4px; border: none; }


/* REPAYMENTS SECTION STYLES */
.repayments-section { background-color: #b6d7a8; padding: 20px; margin-top: 20px; }
.repayments-grid { display: table; width: 100%; border-collapse: collapse; border: 1px solid #a0a0a0; }
.repayment-row { display: table-row; }
.repayment-label, .repayment-value-box, .term-group { display: table-cell; vertical-align: middle; border: 1px solid #a0a0a0; padding: 8px; }
.repayment-label { font-weight: bold; text-align: left; width: 40%; background-color: #fff; }
.repayment-value-box { text-align: center; font-size: 1.1em; background-color: #fff; }
.repayment-value-box .adjustment-input { width: 100px; padding: 5px; text-align: center; font-size: 1em; border: 1px solid #ccc; }
.term-group { display: flex; gap: 5px; align-items: center; justify-content: center; padding: 0; border: none !important; }
.term-months-box, .term-weeks-box, .repayment-box { text-align: center; }
.term-months-box label, .term-weeks-box label, .repayment-box label { display: block; color: white; padding: 5px 10px; font-size: 0.9em; margin-bottom: 2px; width: 100%; }
.term-months-box label, .term-weeks-box label { background-color: #34a853; }
.repayment-box { display: flex; flex-direction: column; }
.repayment-box label { background-color: #34a853; }
.repayment-box label.current-cost-label { background-color: #ff0000; }
#termMonths, .term-weeks-box .value, .repayment-box .value { padding: 8px; background: #fff; border: 1px solid #a0a0a0; text-align: center; font-size: 1.1em; }
#termMonths, .term-months-box, .term-weeks-box, .repayment-box { flex: 1; }
#termMonths { width: 100%; }
.term-weeks-box .value, .repayment-box .value { min-width: 80px; width: 100%; }
.repayment-values-container { border: 1px solid #a0a0a0; padding: 8px; display: flex; justify-content: center; gap: 5px; }