/* ============================================================
   360eDash — Solar Calculator (public, pre-login landing page)
   Reuses design tokens from css/global.css (--primary, --accent,
   --success, --border, etc). Kept as a standalone page like
   pages/login.html — not part of the SPA shell.
============================================================= */

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: 'Montserrat', sans-serif;
  background: var(--primary-soft);
  color: var(--ink);
}

.calc-page {
  height: 100vh;
  height: 100dvh; /* accounts for mobile browser chrome (address bar) so the
                     layout doesn't get clipped/jump on iOS/Android Chrome */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  --calc-header-h: 64px;
}

/* Owns all vertical scrolling for everything below the header, so the
   native scrollbar only ever runs alongside this region — the header
   sits outside it and never scrolls or gets swept along. */
.calc-scroll-area {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: auto;

  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.calc-scroll-area::-webkit-scrollbar { width: 6px; }
.calc-scroll-area::-webkit-scrollbar-track { background: transparent; }
.calc-scroll-area::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--r-ctl); }
.calc-scroll-area::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ---------- Top bar ---------- */

.calc-topbar {
  background: var(--primary);
  flex: 0 0 auto;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.calc-topbar__inner {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
}

.calc-topbar__logo {
  height: 48px;
  width: auto;
  display: block;
}

/* Same solid pill treatment as .calc-lang-btn / .calc-signin-btn, so
   all three actions read as one consistent group. */
.calc-home-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px;
  border: none;
  border-radius: var(--r-chip);
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: var(--type-caption-size);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, transform .05s ease;
}

.calc-home-btn i { font-size: var(--type-caption-size); }

.calc-home-btn:hover { background: #e07a10; }
.calc-home-btn:active { transform: translateY(1px); }

/* Admin gear button — same solid pill treatment as the language/home/
   sign-in buttons, sits just to their left. Opens the "Admin: Pricing
   Controls" modal (#calcAdminSettingsModal). */
.calc-admin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: var(--r-chip);
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: var(--type-caption-size);
  cursor: pointer;
  transition: background .15s ease, transform .05s ease;
}

.calc-admin-btn:hover { background: #e07a10; }
.calc-admin-btn:active { transform: translateY(1px); }
.calc-admin-btn i { font-size: var(--type-body-size); }
.calc-admin-btn[hidden] { display: none; }

.calc-lang-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  border: none;
  border-radius: var(--r-chip);
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: var(--type-caption-size);
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, transform .05s ease;
}

.calc-lang-btn:hover { background: #e07a10; }
.calc-lang-btn:active { transform: translateY(1px); }
.calc-lang-btn i { font-size: var(--type-caption-size); }

.calc-signin-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 20px;
  border-radius: var(--r-chip);
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: var(--type-caption-size);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, transform .05s ease;
}

.calc-signin-btn i { font-size: var(--type-caption-size); }

.calc-signin-btn:hover { background: #e07a10; }
.calc-signin-btn:active { transform: translateY(1px); }

/* ---------- Page title (light band, replaces old hero) ---------- */

.calc-hero-lite {
  width: 100%;
  box-sizing: border-box;
  padding: 28px 24px 8px;
}

.calc-hero-lite__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
}

.calc-hero-lite__text {
  min-width: 0;
}

.calc-hero-lite__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 10px;
  padding-top: 2px;
}

.calc-hero-lite__title {
  font-size: var(--type-kpi-number-size);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.calc-hero-lite__desc {
  margin-top: 6px;
  font-size: var(--type-body-size);
  color: var(--muted);
  line-height: 1.6;
}

/* ---------- Shell / layout ---------- */

.calc-shell {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  padding: 20px 24px 56px;
  position: relative;
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 24px;
  /* stretch (not start): both columns take the full row height, so the
     empty-state result card lines up evenly with the form card instead
     of sitting shorter than it. The sticky form card inside still only
     takes its own content height — stretch just gives its wrapper
     (.calc-form-panel) room to match, which is what lets it keep
     sticking/traveling alongside a taller result column later on. */
  align-items: stretch;
}

.calc-form-panel {
  min-width: 0;
}

/* ---------- Form card ---------- */

.calc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: 0 16px 40px rgba(11,79,84,.10);
  padding: 24px;
}

/* Plain sticky sidebar: the form pins at top:20px and rides along with
   the page scroll (.calc-scroll-area) until the results column — its
   grid sibling, which is taller — finishes scrolling past it, then it
   scrolls away naturally too. No independent max-height/scrollbar here
   anymore, so there's only ever one scroll gesture on the page instead
   of the form having its own separate, disconnected scroll region. */
.calc-card--form {
  position: sticky;
  top: 20px;
}

.calc-card__head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.calc-card__icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: var(--r-ctl);
  background: var(--primary-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--type-card-title-size);
}

.calc-card__head h2 {
  font-size: var(--type-card-title-size);
  font-weight: 600;
}

.calc-card__head p {
  margin-top: 4px;
  font-size: var(--type-label-size);
  color: var(--muted);
  line-height: 1.5;
}

.calc-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.calc-form .form-group label {
  display: block;
  font-size: var(--type-caption-size);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 6px;
}

.calc-form .input-control {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-ctl);
  background: var(--surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* The [hidden] attribute is set/cleared by solar-calculator.js to swap
   the province/city dropdowns for manual text inputs (Country = Other)
   — without this, the display:flex above would win over the UA
   [hidden] rule and both the dropdown and the text input would show. */
.calc-form .input-control[hidden] {
  display: none;
}

.calc-form .input-control:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.calc-form .input-control__icon {
  position: absolute;
  left: 13px;
  font-size: var(--type-label-size);
  color: var(--muted);
  pointer-events: none;
}

.calc-form .input-control input,
.calc-form .input-control select {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--type-caption-size);
  color: var(--ink);
  padding: 11px 14px 11px 38px;
}

.calc-form .input-control--select select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 32px;
  cursor: pointer;
}

.calc-form .input-control__caret {
  position: absolute;
  right: 13px;
  font-size: var(--type-axis-tick-size);
  color: var(--muted);
  pointer-events: none;
}

/* Range slider control (e.g. "Usable Roof Area %") — the track fills
   with teal from the left up to the thumb as the user drags (set via
   inline style by JS), while the value box on the right stays neutral. */
.calc-slider-control {
  display: flex;
  align-items: center;
  gap: 12px;
}

.calc-slider-control__range {
  flex: 1 1 auto;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--r-chip);
  background: var(--border);
  outline: none;
  cursor: pointer;
  margin: 0;
}

.calc-slider-control__range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var(--r-chip);
  background: transparent;
}

.calc-slider-control__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--slider-teal, #0f6a71);
  border: none;
  margin-top: -5px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: box-shadow .15s ease;
}

.calc-slider-control__range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(15, 106, 113, 0.18);
}

.calc-slider-control__range::-moz-range-track {
  height: 6px;
  border-radius: var(--r-chip);
  background: var(--border);
  border: none;
}

.calc-slider-control__range::-moz-range-progress {
  height: 6px;
  border-radius: var(--r-chip);
  background: var(--slider-teal, #0f6a71);
}

.calc-slider-control__range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--slider-teal, #0f6a71);
  border: none;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.calc-slider-control__range:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px rgba(15, 106, 113, 0.18);
}

.calc-slider-control__value {
  flex: 0 0 auto;
  width: 40px;
  min-width: 40px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--r-ctl);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--type-label-size);
  font-weight: 500;
  font-family: inherit;
  padding: 6px 4px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.calc-slider-control__value:focus-visible {
  border-color: var(--slider-teal, #0f6a71);
  box-shadow: 0 0 0 3px rgba(15, 106, 113, 0.18);
}

/* Hide the native number input spin buttons so it reads like a
   plain value box, while staying editable on click/tap. */
.calc-slider-control__value::-webkit-outer-spin-button,
.calc-slider-control__value::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.calc-slider-control__value[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.calc-form .form-error {
  display: none;
  font-size: var(--type-label-size);
  color: var(--danger);
  margin-top: -6px;
}

.calc-form .form-error.is-visible { display: block; }

.calc-form .form-error--general.is-visible {
  background: var(--danger-soft);
  padding: 10px 12px;
  border-radius: var(--r-ctl);
  font-weight: 500;
  margin-top: 0;
}

.btn-calc {
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border: none;
  text-decoration: none;
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: var(--type-body-size);
  font-weight: 600;
  padding: 13px 16px;
  border-radius: var(--r-ctl);
  cursor: pointer;
  transition: background .15s ease, transform .05s ease;
}

.btn-calc:hover { background: #e07a10; }
.btn-calc:active { transform: translateY(1px); }
.btn-calc:disabled { opacity: .6; cursor: not-allowed; }

/* ---------- Results panel ---------- */

.calc-results-panel {
  min-height: 480px;
  min-width: 0;
}

.calc-card--results {
  min-height: 480px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.calc-empty-state {
  flex: 1;
  min-height: 432px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
}

/* The [hidden] attribute is set/cleared by solar-calculator.js to swap
   the empty state for the results — without this, the display:flex
   above would win over the UA [hidden] rule and both would show. */
.calc-empty-state[hidden] {
  display: none;
}

.calc-empty-state i {
  font-size: var(--type-kpi-number-size);
  color: var(--accent);
  margin-bottom: 14px;
}

.calc-empty-state h3 {
  font-size: var(--type-card-title-size);
  font-weight: 600;
}

.calc-empty-state p {
  margin-top: 6px;
  max-width: 340px;
  font-size: var(--type-caption-size);
  color: var(--muted);
  line-height: 1.6;
}

.calc-summary-banner {
  background: var(--primary-soft);
  color: var(--primary-dark);
  border-radius: var(--r-card);
  padding: 14px 18px;
  font-size: var(--type-caption-size);
  line-height: 1.6;
  margin-bottom: 20px;
}

.calc-summary-banner b { font-weight: 600; }

/* ---------- Highlight (unlocked) stat cards ---------- */

.calc-highlight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 8px;
}

.calc-highlight-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.calc-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 10px 24px rgba(11,79,84,.06);
}

.calc-stat-card__label {
  font-size: var(--type-axis-tick-size);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.calc-stat-card__value {
  font-size: var(--type-kpi-number-size);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
}

.calc-stat-card--accent .calc-stat-card__value { color: var(--accent); }
.calc-stat-card--success .calc-stat-card__value { color: var(--success); }

.calc-stat-card__sub {
  font-size: var(--type-label-size);
  color: var(--muted);
  line-height: 1.4;
}

.calc-fit-note[hidden] { display: none; }

.calc-fit-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--type-label-size);
  color: var(--warning);
  background: var(--warning-soft);
  border-radius: var(--r-ctl);
  padding: 10px 14px;
  margin: 16px 0 0;
  line-height: 1.5;
}

/* ---------- Simple sales CTA banner (free preview teaser) ---------- */

.calc-cta-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 16px 18px;
  background: linear-gradient(135deg, var(--primary-soft) 0%, var(--surface) 65%);
  border: 1px solid rgba(16,185,129,.25);
  border-radius: var(--r-card);
}

.calc-cta-banner__icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--r-chip);
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--type-card-title-size);
}

.calc-cta-banner__text h3 {
  font-size: var(--type-body-size);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}

.calc-cta-banner__text h3 span {
  color: var(--success);
}

.calc-cta-banner__text p {
  margin-top: 4px;
  font-size: var(--type-label-size);
  color: var(--muted);
  line-height: 1.5;
}

@media (max-width: 560px) {
  .calc-cta-banner { flex-direction: column; align-items: flex-start; }
}

/* ---------- Production vs. consumption chart ---------- */

.calc-chart-card {
  margin-top: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 18px 20px;
}

/* .calc-chart-card__controls, .calc-chart-box and .calc-chart-dot--battery
   used to each be defined twice in this file (once here with an older
   flex-end/fixed-height layout, and again further down with the current
   flex-1 legend + centered-box rules), with the later block silently
   winning the cascade. Consolidated below into a single definition per
   rule so there's one source of truth for this layout. */

.calc-battery-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
  font-size: var(--type-axis-tick-size);
  color: var(--muted);
}

.calc-battery-toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.calc-battery-toggle__label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.calc-battery-toggle__label i { color: var(--primary); }

.calc-battery-toggle__track {
  position: relative;
  width: 30px;
  height: 17px;
  border-radius: var(--r-chip);
  background: var(--border);
  transition: background .18s ease;
}

.calc-battery-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  transition: transform .18s ease;
}

.calc-battery-toggle input:checked + .calc-battery-toggle__track {
  background: var(--primary);
}

.calc-battery-toggle input:checked + .calc-battery-toggle__track .calc-battery-toggle__thumb {
  transform: translateX(13px);
}

.calc-battery-toggle input:focus-visible + .calc-battery-toggle__track {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.calc-chart-card__head {
  display: block;
  margin-bottom: 12px;
}

.calc-chart-card__controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 14px;
  width: 100%;
  margin-top: 9px;
  min-width: 0;
}


.calc-chart-card__head h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--type-body-size);
  font-weight: 600;
  color: var(--ink);
}

.calc-chart-card__head h3 i { color: var(--primary); font-size: var(--type-label-size); }

.calc-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.calc-chart-legend__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--type-axis-tick-size);
  color: var(--muted);
}

.calc-chart-dot {
  width: 9px;
  height: 9px;
  border-radius: var(--r-ctl);
  display: inline-block;
}

.calc-chart-dot--consumption { background: #2f80ed; }
.calc-chart-dot--solar { background: #e78a12; }
.calc-chart-dot--overlay { background: rgba(16, 185, 129, 0.55); }
/* Battery scenario chart: purple is reserved for battery charge/discharge
   so it remains distinct from the blue grid/load and orange PV series. */
.calc-chart-dot--battery { background: rgba(139,92,246,.78); }
.calc-chart-dot--battery-discharge { background: rgba(139,92,246,.58); }

.calc-chart-battery-control {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.calc-chart-card__controls .calc-chart-legend {
  flex: 0 1 auto;
  justify-content: flex-start;
  min-width: 0;
}

.calc-chart-box {
  width: 100%;
  height: 300px;
  overflow: hidden;
  padding: 2px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calc-chart-box svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
}

@media (max-width: 760px) {
  .calc-chart-card__controls {
    align-items: center;
    justify-content: flex-start;
    gap: 9px 12px;
  }

  .calc-chart-card__controls .calc-chart-legend {
    justify-content: flex-start;
    flex-basis: 100%;
  }
}

/* ---------- Financing model switcher (Solar Leasing / Direct Purchase) ---------- */

.calc-finance-switch {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 10px 0 18px;
}

.calc-finance-switch__btn {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 14px 18px;
  border-radius: var(--r-card);
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s ease, background .15s ease;
}

.calc-finance-switch__btn.is-active {
  background: var(--calc-blue-soft, #eaf2fe);
  border-color: var(--calc-blue, #2f80ed);
}

.calc-finance-switch__icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: var(--r-ctl);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  color: var(--muted);
  font-size: var(--type-body-size);
}

.calc-finance-switch__btn.is-active .calc-finance-switch__icon {
  background: var(--surface);
  color: var(--calc-blue, #2f80ed);
}

.calc-finance-switch__text { display: flex; flex-direction: column; gap: 2px; }
.calc-finance-switch__text b { font-size: var(--type-caption-size); color: var(--ink); }
.calc-finance-switch__text span { font-size: var(--type-label-size); color: var(--muted); }

.calc-finance-panel { display: none; }
.calc-finance-panel.is-active { display: block; }

.calc-finance-panel__desc {
  font-size: var(--type-caption-size);
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 16px;
}

.calc-finance-panel__desc b { color: var(--ink); }

.calc-finance-hero {
  background: var(--success-soft, #e9f9f3);
  border: 1px solid rgba(16,185,129,.2);
  border-radius: var(--r-card);
  padding: 20px 22px;
}

.calc-finance-hero__top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 4px;
}

.calc-finance-hero__old {
  font-size: var(--type-caption-size);
  color: var(--muted);
  text-decoration: line-through;
}

.calc-finance-hero__pct {
  font-size: var(--type-axis-tick-size);
  font-weight: 700;
  color: #fff;
  background: var(--success);
  padding: 3px 10px;
  border-radius: var(--r-chip);
  white-space: nowrap;
}

.calc-finance-hero__new {
  display: block;
  font-size: var(--type-kpi-number-size);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.calc-finance-hero__label {
  display: block;
  font-size: var(--type-label-size);
  color: var(--muted);
  margin-top: 2px;
}

.calc-finance-hero__savings {
  display: block;
  font-size: var(--type-caption-size);
  font-weight: 700;
  color: var(--success);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

.calc-finance-hero__divider {
  height: 1px;
  background: rgba(16,185,129,.25);
  margin: 16px 0;
}

.calc-finance-hero__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: var(--type-caption-size);
  color: var(--muted);
}

.calc-finance-hero__row b {
  font-size: var(--type-card-title-size);
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------- Payback bar (Direct Purchase) ---------- */

.calc-payback-card {
  margin-top: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 20px 22px;
}

.calc-payback-card__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 10px;
  font-size: var(--type-caption-size);
  color: var(--muted);
  margin-bottom: 22px;
}

.calc-payback-card__row b {
  font-size: var(--type-card-title-size);
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.calc-payback-bar { position: relative; padding-top: 22px; }

.calc-payback-bar__marker {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: var(--type-axis-tick-size);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.calc-payback-bar__track {
  position: relative;
  display: flex;
  height: 10px;
  border-radius: var(--r-chip);
  overflow: hidden;
  background: var(--border);
}

.calc-payback-bar__fill { display: block; height: 100%; width: 0%; }
.calc-payback-bar__fill--paid { background: var(--danger); }
.calc-payback-bar__fill--free { background: var(--success); }

.calc-payback-bar__axis {
  display: flex;
  justify-content: space-between;
  font-size: var(--type-axis-tick-size);
  color: var(--muted);
  margin-top: 6px;
}

.calc-payback-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 14px;
}

.calc-payback-dot--paid { background: var(--danger); }
.calc-payback-dot--free { background: var(--success); }

.calc-payback-card__divider {
  height: 1px;
  background: var(--border);
  margin: 18px 0 14px;
}

.calc-payback-card__total { text-align: center; }
.calc-payback-card__total span { display: block; font-size: var(--type-caption-size); color: var(--muted); margin-bottom: 4px; }
.calc-payback-card__total b { display: block; font-size: var(--type-page-title-size); font-weight: 800; color: var(--success); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .calc-finance-switch { grid-template-columns: 1fr; }
  .calc-finance-hero__new { font-size: var(--type-kpi-number-size); }
}

.calc-bills-card__desc {
  font-size: var(--type-caption-size);
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 12px;
}

.calc-bills-card__savings {
  font-size: var(--type-body-size);
  font-weight: 700;
  color: var(--success);
  margin: 0 0 16px;
}

.calc-bills-card__legend {
  margin-bottom: 4px;
}

.calc-tariff-compare {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.calc-tariff-box {
  flex: 1;
  text-align: center;
  border-radius: var(--r-card);
  padding: 14px 16px;
  border: 1px solid var(--border);
}

.calc-tariff-box--old { background: var(--danger-soft); border-color: rgba(239,68,68,.25); }
.calc-tariff-box--new { background: var(--success-soft, #e9f9f3); border-color: rgba(16,185,129,.25); }

.calc-tariff-box__label { display: block; font-size: var(--type-label-size); color: var(--muted); }
.calc-tariff-box__value { display: block; margin-top: 4px; font-size: var(--type-card-title-size); font-weight: 700; color: var(--ink); }

.calc-tariff-arrow { color: var(--muted); font-size: var(--type-card-title-size); flex: 0 0 auto; }

/* ---------- Bill compare (old vs new monthly bill) ---------- */

.calc-bill-compare {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0 16px;
}

.calc-bill-box {
  flex: 1;
  text-align: center;
  border-radius: var(--r-card);
  padding: 12px 14px;
  border: 1px solid var(--border);
}

.calc-bill-box--old { background: var(--danger-soft); border-color: rgba(239,68,68,.25); }
.calc-bill-box--new { background: var(--success-soft, #e9f9f3); border-color: rgba(16,185,129,.25); }

.calc-bill-box__label { display: block; font-size: var(--type-axis-tick-size); color: var(--muted); }
.calc-bill-box__value { display: block; margin-top: 4px; font-size: var(--type-card-title-size); font-weight: 700; color: var(--ink); }

.calc-bill-arrow {
  flex: 0 0 auto;
  text-align: center;
  font-size: var(--type-label-size);
  color: var(--success);
}
.calc-bill-arrow i { display: block; font-size: var(--type-card-title-size); margin-bottom: 2px; color: var(--muted); }

/* ---------- Savings hero card (conventional vs. solar, free preview) ---------- */

.calc-savings-hero {
  margin-top: 18px;
  background: var(--success-soft, #e9f9f3);
  border: 1px solid rgba(16,185,129,.2);
  border-radius: var(--r-card);
  padding: 26px 28px 24px;
  text-align: center;
}

.calc-savings-hero__eyebrow {
  font-size: var(--type-caption-size);
  color: var(--muted);
  margin: 0 0 4px;
}

.calc-savings-hero__amount {
  font-size: var(--type-kpi-number-size);
  font-weight: 800;
  color: var(--success);
  line-height: 1.15;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.calc-savings-hero__sub {
  font-size: var(--type-caption-size);
  color: var(--muted);
  margin: 4px 0 0;
}

.calc-savings-hero__sub b { color: var(--ink); font-weight: 700; }

.calc-savings-hero__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 22px;
  text-align: left;
}

.calc-savings-hero__item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 13px 16px;
}

.calc-savings-hero__icon {
  flex: 0 0 auto;
  width: 16px;
  text-align: center;
  color: var(--primary);
  font-size: var(--type-caption-size);
}

.calc-savings-hero__text {
  font-size: var(--type-caption-size);
  color: var(--muted);
  line-height: 1.5;
}

.calc-savings-hero__text b {
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.calc-savings-hero__text i.fa-arrow-right {
  font-size: var(--type-axis-tick-size);
  color: var(--muted);
  margin: 0 2px;
}

.calc-savings-hero__accent { color: var(--success) !important; }

.calc-savings-hero__muted {
  color: var(--muted);
  font-weight: 400;
}

.calc-savings-hero__muted b {
  color: var(--ink);
  font-weight: 700;
}

.calc-savings-hero__bars {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.calc-savings-bar-row {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  align-items: center;
  gap: 14px;
  text-align: left;
}

.calc-savings-bar-row__label {
  font-size: var(--type-caption-size);
  color: var(--muted);
}

.calc-savings-bar-row__track {
  display: block;
  height: 10px;
  border-radius: var(--r-chip);
  background: var(--border);
  overflow: hidden;
}

.calc-savings-bar-row__fill {
  display: block;
  height: 100%;
  border-radius: var(--r-chip);
  width: 0%;
  transition: width .4s ease;
}

.calc-savings-bar-row__fill--pln { background: var(--danger); }
.calc-savings-bar-row__fill--solar { background: var(--success); }

.calc-savings-bar-row__value {
  font-size: var(--type-caption-size);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .calc-savings-hero { padding: 22px 18px 20px; }
  .calc-savings-hero__amount { font-size: var(--type-kpi-number-size); }
  .calc-savings-hero__grid { grid-template-columns: 1fr; }
  .calc-savings-bar-row { grid-template-columns: 68px 1fr auto; gap: 10px; }
}

/* ---------- Detail (locked) section ---------- */

.calc-detail-wrap {
  position: relative;
  margin-top: 28px;
}

.calc-detail-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--type-card-title-size);
  font-weight: 600;
  margin-bottom: 14px;
}

.calc-detail-heading i { color: var(--primary); font-size: var(--type-caption-size); }

.calc-detail-body {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: 0 16px 40px rgba(11,79,84,.08);
  padding: 18px 20px 20px;
}

/* ---------- Detail tabs (Ringkasan / Finansial / Teknis) — splits the
   full breakdown into digestible sections instead of one long scroll.
   Styled as the header strip of the .calc-detail-body card (inset track
   + bottom divider) so the tab row reads as this section's nav, not a
   loose control floating above unrelated content. ---------- */

.calc-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: -18px -20px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  border-radius: 16px 16px 0 0;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.06);
}

.calc-tab {
  flex: 1 1 0;
  border: none;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: var(--type-caption-size);
  font-weight: 600;
  padding: 10px 12px;
  border-radius: var(--r-ctl);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.calc-tab:hover { color: var(--ink); }

.calc-tab.is-active {
  background: #6DC3BB;
  color: #fff;
  box-shadow: 0 2px 8px rgba(11,79,84,.22), 0 0 0 1px rgba(11,79,84,.06);
}

.calc-tab-panel[hidden] { display: none; }

@media (max-width: 480px) {
  .calc-tabs { gap: 3px; }
  .calc-tab { font-size: var(--type-label-size); padding: 9px 6px; }
}

/* ---------- Per-tab free preview vs. locked content ----------
   Each tab panel is split into a .calc-tab-preview (first block —
   always visible, never blurred, stays interactive) and a
   .calc-tab-locked wrapper around everything else. Only the inner
   .calc-tab-locked__content blurs when locked, and #lockOverlay is
   moved (by initDetailTabs()/updateLockState() in solar-calculator.js)
   to sit inside whichever panel's .calc-tab-locked is active, so it
   only ever covers that panel's locked portion — the tab nav and the
   preview above it are never blocked and stay clickable. */

.calc-tab-locked {
  position: relative;
  min-height: 140px;
  margin-top: 20px;
}

.calc-tab-locked__content {
  transition: filter .2s ease;
}

.calc-detail-wrap.is-locked .calc-tab-locked__content {
  filter: blur(7px);
  user-select: none;
  pointer-events: none;
}

.calc-detail-subhead {
  margin: 22px 0 10px;
  font-size: var(--type-caption-size);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--muted);
}

.calc-detail-subhead:first-child { margin-top: 0; }
.calc-detail-subhead--flush { margin: 0; }

.calc-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.calc-detail-grid--4 { grid-template-columns: repeat(4, 1fr); }
.calc-detail-grid--3 { grid-template-columns: repeat(3, 1fr); }

.calc-detail-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.calc-detail-card__label {
  font-size: var(--type-axis-tick-size);
  color: var(--muted);
  font-weight: 500;
  line-height: 1.4;
}

.calc-detail-card__value {
  font-size: var(--type-card-title-size);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.calc-lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  z-index: 2;
}

.calc-detail-wrap:not(.is-locked) .calc-lock-overlay {
  display: none;
}

.calc-lock-box {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: 0 18px 44px rgba(11,79,84,.18);
  padding: 24px;
  text-align: center;
}

.calc-lock-box__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-chip);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: var(--type-card-title-size);
  margin-bottom: 12px;
}

.calc-lock-box h4 {
  font-size: var(--type-body-size);
  font-weight: 600;
}

.calc-lock-box p {
  margin-top: 6px;
  font-size: var(--type-label-size);
  color: var(--muted);
  line-height: 1.55;
}

.calc-lock-form {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.calc-lock-form .input-control {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-ctl);
}

.calc-lock-form .input-control:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.calc-lock-form .input-control__icon {
  position: absolute;
  left: 13px;
  font-size: var(--type-label-size);
  color: var(--muted);
}

.calc-lock-form input,
.calc-lock-form select {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--type-caption-size);
  color: var(--ink);
  padding: 11px 14px 11px 38px;
  border-radius: var(--r-ctl);
}

.calc-lock-form .input-control--select select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 32px;
  cursor: pointer;
}

.calc-lock-form .input-control__caret {
  position: absolute;
  right: 13px;
  font-size: var(--type-axis-tick-size);
  color: var(--muted);
  pointer-events: none;
}

.calc-lock-form .form-error {
  display: none;
  font-size: var(--type-axis-tick-size);
  color: var(--danger);
  text-align: left;
}
.calc-lock-form .form-error.is-visible { display: block; }

.calc-lock-form .btn-login {
  margin-top: 2px;
  border: none;
  background: var(--primary);
  color: #fff;
  font-family: inherit;
  font-size: var(--type-caption-size);
  font-weight: 600;
  padding: 12px 16px;
  border-radius: var(--r-ctl);
  cursor: pointer;
  transition: background .15s ease;
}
.calc-lock-form .btn-login:hover { background: var(--primary-dark); }
.calc-lock-form .btn-login:disabled { opacity: .7; cursor: not-allowed; }

.calc-lock-box__footnote {
  margin-top: 12px;
  font-size: var(--type-axis-tick-size);
  color: var(--muted);
}

/* ---------- Year-by-year table ---------- */

.calc-table-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 10px;
  margin-top: 22px;
}

.calc-table-toggle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--primary-soft);
  color: var(--primary-dark, var(--primary));
  font-family: inherit;
  font-size: var(--type-label-size);
  font-weight: 600;
  padding: 7px 12px;
  border-radius: var(--r-chip);
  cursor: pointer;
}

.calc-table-toggle i { font-size: var(--type-axis-tick-size); transition: transform .15s ease; }
.calc-table-toggle.is-open i { transform: rotate(180deg); }

.calc-table-wrap {
  margin-top: 10px;
  max-height: 320px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-ctl);
}

.calc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--type-caption-size);
}

.calc-table th, .calc-table td {
  padding: 8px 12px;
  text-align: right;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.calc-table th:first-child, .calc-table td:first-child { text-align: left; }

.calc-table thead th {
  position: sticky;
  top: 0;
  background: var(--primary-soft);
  color: var(--ink);
  font-weight: 600;
}

.calc-chart-box--tall { height: 260px; margin-top: 6px; }

@media (max-width: 640px) {
  .calc-chart-box--tall { height: 220px; }
}

@media (max-width: 480px) {
  .calc-chart-box--tall { height: 190px; }
}

/* ---------- Unlocked actions ---------- */

.calc-unlocked-actions {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.calc-cta-login {
  flex: 1;
  min-width: 220px;
  text-decoration: none;
}

.calc-unlocked-actions .btn-secondary {
  flex: 0 0 auto;
}

/* ---------- Disclaimer / footer ---------- */

.calc-disclaimer {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 24px;
  font-size: var(--type-label-size);
  color: var(--muted);
  line-height: 1.6;
}

.calc-disclaimer i { margin-top: 2px; }

.calc-footer {
  text-align: center;
  padding: 20px 24px;
  font-size: var(--type-label-size);
  color: var(--muted);
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.calc-footer__link {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}

.calc-footer__link:hover,
.calc-footer__link:focus-visible {
  color: var(--primary);
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .calc-shell {
    grid-template-columns: 1fr;
  }
  .calc-card--form {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
  .calc-highlight-grid,
  .calc-detail-grid,
  .calc-detail-grid--4,
  .calc-detail-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .calc-tariff-compare,
  .calc-bill-compare {
    flex-direction: column;
  }
  /* Arrow read left-to-right normally; once the boxes stack vertically
     it should point down instead so the flow still reads correctly. */
  .calc-tariff-compare .calc-tariff-arrow,
  .calc-bill-compare .calc-bill-arrow i {
    transform: rotate(90deg);
  }
  .calc-hero-lite__title { font-size: var(--type-page-title-size); }
}

@media (max-width: 640px) {
  .calc-detail-grid,
  .calc-detail-grid--4,
  .calc-detail-grid--3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .calc-page { --calc-header-h: 52px; }
  .calc-topbar__inner { padding: 6px 16px; }
  .calc-topbar__logo { height: 36px; }
  .calc-hero-lite { padding: 18px 16px 4px; }
  .calc-hero-lite__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .calc-hero-lite__actions { width: 100%; justify-content: flex-start; }
  .calc-shell { padding: 16px 16px 40px; }
  .calc-unlocked-actions { flex-direction: column; }

  /* Tighter card/body padding so content isn't squeezed by wide gutters
     on small phones; .calc-tabs' negative-margin bleed is adjusted to
     match calc-detail-body's new padding so it still touches the edges. */
  .calc-card { padding: 16px; }
  .calc-detail-body { padding: 16px 14px 16px; }
  .calc-tabs { margin: -16px -14px 16px; }
  .calc-savings-hero { padding: 20px 16px 18px; }
  .calc-finance-hero,
  .calc-payback-card { padding: 16px; }
}

/* Extra-narrow phones (iPhone SE / small Android, ~360px and under) */
@media (max-width: 380px) {
  .calc-hero-lite__title { font-size: var(--type-page-title-size); }
  .calc-lang-btn, .calc-home-btn, .calc-signin-btn {
    height: 34px;
    padding: 0 12px;
    font-size: var(--type-label-size);
  }

  .calc-admin-btn {
    width: 34px;
    height: 34px;
  }

  .calc-savings-bar-row {
    grid-template-columns: 1fr;
    row-gap: 4px;
  }
  .calc-savings-bar-row__value { text-align: left; }

  .calc-finance-hero__new { font-size: var(--type-page-title-size); }
  .calc-savings-hero__amount { font-size: var(--type-page-title-size); }

  /* The 2-up stat cards (savings/payback, size/coverage) get too cramped
     for their bold currency/percentage values at this width — stack them. */
  .calc-highlight-grid--2 { grid-template-columns: 1fr; }
  .calc-stat-card { padding: 16px; }
  .calc-stat-card__value { font-size: var(--type-page-title-size); }
}

/* ---------- Floating WhatsApp chat widget ---------- */

.wa-widget {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.wa-widget__btn {
  width: 56px;
  height: 56px;
  border-radius: var(--r-chip);
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--type-page-title-size);
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(11,79,84,.28);
  transition: transform .15s ease, background .15s ease;
}

.wa-widget__btn:hover { background: var(--primary-dark, var(--primary)); transform: translateY(-2px); }
.wa-widget__btn:active { transform: translateY(0); }

.wa-popup {
  width: 300px;
  max-width: calc(100vw - 40px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: 0 18px 44px rgba(11,79,84,.22);
  padding: 18px 18px 16px;
  position: relative;
  animation: waPopupIn .25s ease;
}

@keyframes waPopupIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.wa-popup__close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: none;
  background: none;
  color: var(--muted);
  font-size: var(--type-card-title-size);
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}

.wa-popup__close:hover { color: var(--ink); }

.wa-popup__link {
  display: block;
  text-decoration: none;
  color: inherit;
  padding-right: 14px;
}

.wa-popup__text {
  font-size: var(--type-caption-size);
  line-height: 1.6;
  color: var(--ink);
}

.wa-popup__sign {
  margin-top: 8px;
  font-size: var(--type-caption-size);
  font-weight: 700;
  color: var(--primary);
}

@media (max-width: 560px) {
  .wa-widget { right: 14px; bottom: 14px; }
  .wa-widget__btn { width: 50px; height: 50px; font-size: var(--type-page-title-size); }
}
/* =====================================================================
   Battery Storage Scenario — compact metric cards + info popover
   ===================================================================== */
.calc-battery-scenario {
  margin: 14px 0 20px;
}

.calc-battery-scenario__head {
  margin-bottom: 10px;
}

.calc-battery-scenario__title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.calc-battery-scenario__title > i {
  color: var(--primary);
  font-size: var(--type-caption-size);
}

.calc-battery-scenario__title h4 {
  margin: 0;
  color: var(--ink);
  font-size: var(--type-caption-size);
  font-weight: 650;
}

.calc-battery-scenario__title h4 span {
  color: var(--muted);
  font-weight: 500;
}

.calc-battery-scenario__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.calc-battery-scenario-card {
  position: relative;
  min-width: 0;
  padding: 13px 14px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: 0 4px 14px rgba(15,23,42,.07);
  overflow: hidden;
}

.calc-battery-scenario-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-height: 30px;
}

.calc-battery-scenario-card__icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: var(--r-ctl);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  color: var(--primary);
  font-size: var(--type-label-size);
}

.calc-battery-scenario-card--solar .calc-battery-scenario-card__icon {
  color: #15966d;
  background: rgba(16,185,129,.10);
}
.calc-battery-scenario-card--capacity .calc-battery-scenario-card__icon,
.calc-battery-scenario-card--stored .calc-battery-scenario-card__icon,
.calc-battery-scenario-card--discharged .calc-battery-scenario-card__icon {
  color: #8b5cf6;
  background: rgba(139,92,246,.10);
}
.calc-battery-scenario-card--efficiency .calc-battery-scenario-card__icon {
  color: #4f7cff;
  background: rgba(79,124,255,.10);
}

.calc-battery-info-btn {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--type-axis-tick-size);
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
  transition: .16s ease;
}

.calc-battery-info-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--surface);
}

.calc-battery-info-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.calc-battery-scenario-card__label {
  margin-top: 10px;
  color: var(--muted);
  font-size: var(--type-axis-tick-size);
  line-height: 1.25;
}

.calc-battery-scenario-card__value {
  margin-top: 4px;
  color: var(--ink);
  font-size: clamp(15px, 4.4vw, 19px);
  font-weight: 700;
  letter-spacing: -.02em;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
}

.calc-battery-scenario-card__value small {
  margin-left: 3px;
  color: var(--muted);
  font-size: var(--type-axis-tick-size);
  font-weight: 600;
  letter-spacing: 0;
}

.calc-battery-info-popover {
  position: fixed;
  z-index: 10000;
  margin: 0;
  max-width: min(320px, calc(100vw - 24px));
  box-sizing: border-box;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-ctl);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  font-size: var(--type-axis-tick-size);
  line-height: 1.45;
}

@media (max-width: 1100px) {
  .calc-battery-scenario__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .calc-battery-scenario__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 460px) {
  .calc-battery-scenario__grid {
    grid-template-columns: 1fr;
  }
}

/* Public calculator input info buttons */
.calc-input-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.calc-input-info-btn {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--type-axis-tick-size);
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  cursor: pointer;
  transition: .16s ease;
}

.calc-input-info-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--surface);
}

.calc-input-info-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.calc-input-info-popover {
  position: fixed;
  z-index: 2147483647;
  margin: 0;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface, #fff);
  color: var(--ink);
  box-shadow: 0 12px 28px rgba(20, 35, 45, .14);
  font-size: var(--type-axis-tick-size);
  line-height: 1.55;
  font-weight: 500;
  pointer-events: none;
}

/* ---------- Admin: Pricing Controls modal ---------- */

.calc-admin-modal {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

/* Without this, the unconditional `display:flex` above beats the UA
   [hidden] rule (same specificity, author styles win), so the modal
   stays visible over the public form and the Done/X buttons look
   broken even though they correctly set hidden=true in JS. */
.calc-admin-modal[hidden] { display: none; }

.calc-admin-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 25, 30, 0.5);
}

.calc-admin-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  max-height: min(88vh, 760px);
  display: flex;
  flex-direction: column;
  background: var(--surface, #fff);
  border-radius: var(--r-card);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.calc-admin-modal__head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
}

.calc-admin-modal__icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-ctl);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: var(--type-card-title-size);
}

.calc-admin-modal__head h2 {
  margin: 0 0 3px;
  font-size: var(--type-card-title-size);
  font-weight: 600;
  color: var(--ink);
}

.calc-admin-modal__head p {
  margin: 0;
  font-size: var(--type-label-size);
  color: var(--muted);
  line-height: 1.4;
}

.calc-admin-modal__close {
  flex: 0 0 auto;
  margin-left: auto;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: var(--type-card-title-size);
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.calc-admin-modal__close:hover {
  background: var(--primary-soft);
  color: var(--ink);
}

.calc-admin-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px 20px 4px;
}

.calc-admin-modal__body .calc-form {
  gap: 16px;
}

.calc-admin-login .calc-form {
  padding-bottom: 4px;
}

.calc-admin-modal__foot {
  flex: 0 0 auto;
  padding: 14px 20px 20px;
}

.calc-admin-modal__foot .btn-calc {
  width: 100%;
}

/* ---------- Admin: Catalog live-pricing status (Full BOM) ---------- */

.calc-catalog-pricing {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--primary-soft);
}

.calc-catalog-pricing__toggle {
  width: 100%;
  justify-content: space-between;
}

.calc-catalog-pricing__toggle .calc-battery-toggle__label {
  color: var(--ink);
  font-size: var(--type-caption-size);
  font-weight: 600;
}

.calc-catalog-pricing__desc {
  margin: 8px 0 0;
  font-size: var(--type-axis-tick-size);
  line-height: 1.55;
  color: var(--muted);
}

.calc-catalog-pricing__status {
  margin-top: 10px;
}

.calc-catalog-pricing__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.calc-catalog-pricing__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 8px;
  border-radius: var(--r-ctl);
  background: var(--surface, #fff);
  font-size: var(--type-axis-tick-size);
}

.calc-catalog-pricing__list li.is-missing {
  background: rgba(217, 83, 79, 0.08);
}

.calc-catalog-pricing__line-label {
  flex: 0 0 auto;
  font-weight: 600;
  color: var(--ink);
}

.calc-catalog-pricing__line-value {
  flex: 1 1 auto;
  text-align: right;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calc-catalog-pricing__list li.is-missing .calc-catalog-pricing__line-value {
  color: #d9534f;
}

.calc-catalog-pricing__total {
  margin: 9px 2px 0;
  font-size: var(--type-label-size);
  color: var(--ink);
}

.calc-catalog-pricing__total strong {
  color: var(--primary);
}

.calc-catalog-pricing__muted {
  margin: 2px;
  font-size: var(--type-axis-tick-size);
  color: var(--muted);
  line-height: 1.5;
}

.calc-catalog-pricing__warn {
  margin: 2px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--type-axis-tick-size);
  color: #b45309;
  line-height: 1.5;
}

.calc-catalog-pricing__warn i {
  margin-top: 1px;
  flex: 0 0 auto;
}

.calc-catalog-pricing__reset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-ctl);
  background: var(--surface, #fff);
  color: var(--primary);
  font: inherit;
  font-size: var(--type-axis-tick-size);
  font-weight: 600;
  cursor: pointer;
  transition: .16s ease;
}

.calc-catalog-pricing__reset:hover {
  background: var(--primary-soft);
}

.calc-catalog-pricing__hint {
  margin: 6px 2px 0;
  font-size: var(--type-axis-tick-size);
  color: var(--muted);
  line-height: 1.4;
}

.calc-catalog-pricing__hint:empty {
  display: none;
}

/* ---------- Section mini-charts (bar / donut) for Solar PV, Consumption,
   Energy Performance, BOT and Environmental Impact — additive visuals only,
   the underlying stat cards/IDs are untouched. ---------- */

.calc-mini-chart-box {
  width: 100%;
  min-height: 118px;
  margin: 2px 0 16px;
}

.calc-mini-chart-box svg {
  display: block;
  width: 100%;
  height: auto;
}

.calc-donut-wrap {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin: 2px 0 16px;
}

.calc-mini-chart-box--donut {
  flex: 0 0 auto;
  width: 168px;
  min-height: 168px;
  margin: 0;
}

.calc-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1 1 200px;
  min-width: 180px;
}

.calc-donut-legend__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--type-caption-size);
}

.calc-donut-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.calc-donut-legend__label {
  color: var(--muted);
  flex: 1 1 auto;
}

.calc-donut-legend__value {
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.calc-donut-legend__value small {
  font-weight: 500;
  color: var(--muted);
}

@media (max-width: 640px) {
  .calc-donut-wrap { gap: 16px; }
  .calc-mini-chart-box--donut { width: 140px; min-height: 140px; }
}

/* ---------- Colorful icon medallions (Solar PV System / Environmental
   Impact cards) — decorative, non-proportional accent for otherwise plain
   spec cards. ---------- */

.calc-detail-card--medallion {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.calc-detail-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.calc-icon-badge {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: var(--type-body-size);
  color: #fff;
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .35);
}

/* Consolidated to the page's two brand tones only: teal = positive/savings,
   orange = neutral highlight figure. (Previously 8 unrelated hues here —
   collapsed so the result screen reads calmer at a glance.) */
.calc-icon-badge--teal,
.calc-icon-badge--green,
.calc-icon-badge--emerald,
.calc-icon-badge--lime,
.calc-icon-badge--cyan    { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.calc-icon-badge--orange,
.calc-icon-badge--blue,
.calc-icon-badge--purple  { background: linear-gradient(135deg, #f5a524, #e6790f); }
/* Blue tone reserved for the Technical tab, matching the Financial tab's
   blue sub-tab switcher accent (see .calc-finance-switch__btn.is-active). */
.calc-icon-badge--sky     { background: linear-gradient(135deg, #4f8ff7, #2f80ed); }

@media (max-width: 480px) {
  .calc-icon-badge { width: 34px; height: 34px; font-size: var(--type-caption-size); }
}

/* ---------- Stat cards with an icon badge (e.g. "Solar System Size",
   "Solar Energy Coverage") — reserves space so the absolutely-positioned
   icon doesn't overlap the label/value text below it. Applies to any
   .calc-stat-card--icon, not just the ones inside .calc-highlight-grid--recap
   — a card outside that grid (e.g. "Solar System Size") uses the same
   .calc-stat-card__icon markup and needs the same fix. The tinted gradient
   backgrounds further below ARE still recap-only (cosmetic, not a layout
   requirement). ---------- */

.calc-stat-card--icon {
  position: relative;
  padding-top: 56px;
  overflow: hidden;
}

.calc-stat-card__icon {
  position: absolute;
  top: 16px;
  left: 20px;
  width: 34px;
  height: 34px;
  border-radius: var(--r-ctl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--type-body-size);
  color: #fff;
  box-shadow: 0 4px 10px -3px rgba(0, 0, 0, .3);
}

.calc-stat-card__icon--accent { background: linear-gradient(135deg, #f5a524, #e6790f); }
.calc-stat-card__icon--teal   { background: linear-gradient(135deg, #14b8a6, #0d9488); }

.calc-highlight-grid--recap .calc-stat-card--accent {
  background: linear-gradient(160deg, rgba(230, 121, 15, .10) 0%, var(--surface) 62%);
  border-color: rgba(230, 121, 15, .22);
}

.calc-highlight-grid--recap .calc-stat-card--teal {
  background: linear-gradient(160deg, rgba(13, 148, 136, .10) 0%, var(--surface) 62%);
  border-color: rgba(13, 148, 136, .22);
}

@media (max-width: 480px) {
  .calc-stat-card--icon { padding-top: 50px; }
  .calc-stat-card__icon { width: 30px; height: 30px; font-size: var(--type-caption-size); top: 14px; left: 16px; }
}