/* Solar Plan Calculator v1.3.0 — PageBloomer colour scheme */
/* Primary: Dark Blue #012D52 | Accent: Gold #8B7840 */

.solar-plan-calculator { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; color:#333; max-width:1200px; margin:0 auto; }

/* Header — deep blue with gold sunburst gradient */
.sp-header { background:linear-gradient(135deg,#012D52 0%,#013a6b 40%,#D4B94D 100%); color:#fff; border-radius:10px; margin:0 0 20px 0; overflow:hidden; }
.sp-brand { display:flex; align-items:center; gap:20px; padding:16px 20px; }
.sp-brand-logo { flex-shrink:0; }
.sp-brand-logo img { height:56px; width:auto; border-radius:4px; border:3px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.2); }
.sp-brand-right h2 { margin:0; color:#fff; }
.sp-brand-meta { font-size:13px; opacity:.9; margin-top:6px; color:#fff; }

/* Main container */
.sp-calculator-section { background:#fff; border:1px solid #d0cfc8; border-radius:10px; box-shadow:0 4px 6px rgba(1,45,82,.08); }

/* Primary tabs — dark blue accent */
.sp-tabs { display:flex; background:#f4f3ef; border-bottom:2px solid #012D52; overflow-x:auto; }
.sp-tab { flex:1; min-width:140px; padding:14px 10px; background:transparent; border:none; cursor:pointer; font-weight:700; color:#555; border-bottom:3px solid transparent; font-size:14px; transition:all .15s; }
.sp-tab.active { background:#fff; color:#012D52; border-bottom-color:#8B7840; }
.sp-tab:hover { background:#e8e5db; color:#012D52; }

/* Tab content */
.sp-tab-content { display:none; padding:24px; }
.sp-tab-content.active { display:block; }

/* Results sub-tabs */
.sp-results-subtabs { display:flex; gap:4px; border-bottom:2px solid #e0ddd4; margin:0 0 20px 0; padding:0; }
.sp-results-subtab { padding:10px 20px; cursor:pointer; font-weight:700; font-size:13px; color:#888; border:none; background:none; border-bottom:3px solid transparent; transition:color .15s, border-color .15s; }
.sp-results-subtab.active { color:#012D52; border-bottom-color:#8B7840; }
.sp-results-subtab:hover { color:#8B7840; }
.sp-results-subcontent { display:none; }
.sp-results-subcontent.active { display:block; }

/* Section titles & inputs */
.sp-section-title { color:#012D52; font-weight:800; border-bottom:2px solid #e0ddd4; padding-bottom:8px; margin:12px 0 16px; }
.sp-input-group { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
.sp-input-field { display:flex; flex-direction:column; }
.sp-input-field label { font-size:13px; font-weight:700; margin-bottom:4px; color:#444; }
.sp-input-field input, .sp-input-field select { padding:10px; border:1px solid #ccc; border-radius:6px; font-size:14px; transition:border-color .15s; }
.sp-input-field input:focus, .sp-input-field select:focus { border-color:#8B7840; outline:none; box-shadow:0 0 0 2px rgba(139,120,64,.15); }
.sp-help-text { font-size:12px; color:#888; margin-top:4px; }

/* Action & nav buttons */
.sp-action-buttons { display:flex; justify-content:center; margin:20px 0; }
.sp-calculate-btn { background:linear-gradient(135deg,#8B7840,#a89250); color:#fff; border:none; padding:12px 28px; border-radius:8px; font-weight:800; cursor:pointer; font-size:15px; box-shadow:0 2px 6px rgba(139,120,64,.3); transition:all .15s; }
.sp-calculate-btn:hover { filter:brightness(1.08); box-shadow:0 3px 10px rgba(139,120,64,.4); }
.sp-tab-navigation { display:flex; justify-content:space-between; align-items:center; margin-top:16px; padding-top:14px; border-top:1px solid #e0ddd4; }
.sp-nav-btn { background:#f4f3ef; border:1px solid #ccc; padding:8px 16px; border-radius:6px; cursor:pointer; font-weight:600; color:#012D52; transition:all .15s; }
.sp-nav-btn:hover { background:#e8e5db; border-color:#8B7840; }

/* Info & callout boxes */
.sp-info-box { background:#f9f6ed; border:1px solid #d4c9a8; border-radius:8px; padding:14px; color:#5a4e2f; }

/* Data explanation box */
.sp-data-explanation { margin-bottom:16px; }
.sp-data-explanation p { margin:0; font-size:13px; line-height:1.6; }

/* Current cost callout — gold sunburst */
.sp-callout { background:linear-gradient(135deg,#f9f6ed,#efe8d0); border-radius:12px; padding:24px; text-align:center; margin:0 0 24px 0; border:1px solid #d4c9a8; }
.sp-callout-amount { font-size:2.2em; font-weight:800; color:#012D52; margin:6px 0; }
.sp-callout-label { font-size:14px; color:#5a4e2f; }

/* Best option box — green stays (semantic colour for savings) */
.sp-best-option { background:linear-gradient(135deg,#d1fae5,#a7f3d0); border:2px solid #10b981; border-radius:12px; padding:20px; margin:20px 0; }
.sp-best-option-title { font-weight:800; font-size:16px; color:#065f46; margin:0 0 8px 0; }
.sp-best-option-detail { color:#064e3b; font-size:14px; line-height:1.5; }
.sp-best-option-amount { font-weight:800; font-size:1.6em; color:#059669; }

/* Scenario toggle */
.sp-scenario-toggle { display:flex; gap:8px; margin:0 0 16px 0; flex-wrap:wrap; }
.sp-scenario-btn { padding:9px 16px; border:2px solid #ccc; border-radius:8px; cursor:pointer; font-weight:700; font-size:13px; background:#f4f3ef; color:#555; transition:all .15s; }
.sp-scenario-btn.active { border-color:#8B7840; background:#f9f6ed; color:#5a4e2f; }
.sp-scenario-btn:hover { border-color:#a89250; background:#f9f6ed; }

/* Tables — dark blue header */
.sp-comparison-table { width:100%; border-collapse:collapse; margin:10px 0 20px; font-size:14px; }
.sp-comparison-table th { background:linear-gradient(135deg,#012D52,#013a6b) !important; color:#fff !important; padding:12px; text-align:left; font-size:13px; font-weight:700; }
.sp-comparison-table td { padding:10px 12px; border-bottom:1px solid #e0ddd4; }
.sp-comparison-table tr:hover { background:#faf8f2; }
.sp-plan-header td { background:#f4f3ef; font-weight:800; color:#012D52; }
.sp-total-row td { font-weight:800; background:#f4f3ef; border-top:2px solid #012D52; }
.sp-avg-row td { font-weight:600; color:#666; font-style:italic; }
.sp-saving-row td { font-weight:700; }

/* Savings coloring */
.sp-saving { color:#059669; }
.sp-loss { color:#dc2626; }
.sp-neutral { color:#666; }

/* Chart */
.sp-chart-container { height:380px; background:#faf8f2; border-radius:8px; padding:12px; margin:16px 0; border:1px solid #e0ddd4; }

/* Export buttons — dark blue */
.sp-export-bar { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 16px 0; }
.sp-export-btn { background:#012D52; color:#fff; border:none; padding:8px 14px; border-radius:6px; cursor:pointer; font-weight:600; font-size:13px; transition:all .15s; }
.sp-export-btn:hover { background:#013a6b; box-shadow:0 2px 6px rgba(1,45,82,.25); }

/* Monthly table wrapper */
.sp-monthly-table { overflow-x:auto; }
.sp-comparison-table .sp-month-cell { white-space:nowrap; }

/* Financial detail intro */
.sp-finance-intro { color:#666; font-size:14px; margin:0 0 16px 0; line-height:1.5; }

/* ─── Rate Period rows (TOU) ─── */
.sp-time-config { margin:8px 0 16px 0; }
.sp-periods-list { display:flex; flex-direction:column; gap:10px; }

.sp-period-row {
  background:#faf8f2;
  border:1px solid #d4c9a8;
  border-radius:8px;
  padding:12px 14px;
  transition:border-color .15s;
}
.sp-period-row:hover { border-color:#8B7840; }

.sp-period-fields {
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
}
.sp-period-field { flex:1; min-width:100px; }
.sp-period-field label { font-size:12px; }
.sp-period-field input,
.sp-period-field select {
  padding:8px;
  font-size:13px;
  width:100%;
  box-sizing:border-box;
}
.sp-period-remove-wrap {
  display:flex;
  align-items:flex-end;
  padding-bottom:2px;
}
.sp-remove-period-btn {
  background:#fee2e2;
  color:#dc2626;
  border:1px solid #fca5a5;
  border-radius:6px;
  width:36px;
  height:36px;
  cursor:pointer;
  font-size:14px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .15s;
}
.sp-remove-period-btn:hover { background:#fecaca; }

.sp-period-actions { margin-top:10px; }
.sp-add-period-btn {
  background:#f9f6ed;
  color:#8B7840;
  border:2px dashed #d4c9a8;
  padding:8px 16px;
  border-radius:8px;
  cursor:pointer;
  font-weight:700;
  font-size:13px;
  transition:all .15s;
}
.sp-add-period-btn:hover { background:#efe8d0; border-color:#8B7840; }

/* Responsive */
@media (max-width:768px) {
  .sp-brand { flex-direction:column; align-items:flex-start; }
  .sp-brand-logo img { height:40px; }
  .sp-callout-amount { font-size:1.6em; }
  .sp-results-subtabs { gap:0; }
  .sp-results-subtab { padding:8px 12px; font-size:12px; }
  .sp-scenario-toggle { flex-direction:column; }
  .sp-scenario-btn { width:100%; text-align:center; }
  .sp-period-fields { flex-direction:column; }
  .sp-period-field { min-width:100%; }
  .sp-period-remove-wrap { align-self:flex-end; }
}