/* ============================================================
   calculator.css — Shared Calculator Page UI Patterns
   Input panels · Result panels · Tables · Chart areas
   MoneyMaths | Mobile-first
   ============================================================ */

/* ── 1. Calculator Page Layout ───────────────────────────── */

.calc-page {
  padding-block: var(--space-8) var(--space-20);
}

.calc-page__header {
  padding-block: var(--space-6) var(--space-8);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-8);
}

.calc-page__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.calc-page__title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold);
  color: var(--color-text);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-3);
}

@media (min-width: 768px) {
  .calc-page__title { font-size: var(--text-4xl); }
}

.calc-page__desc {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  max-width: 680px;
  line-height: var(--leading-relaxed);
}

/* ── 2. Calculator Shell — Two-column on desktop ─────────── */

.calc-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}

@media (min-width: 1024px) {
  .calc-shell {
    grid-template-columns: 420px 1fr;
    gap: var(--space-10);
  }
}

/* Input panel sticks on desktop */
.calc-inputs-col {
  position: relative;
}

@media (min-width: 1024px) {
  .calc-inputs-col {
    position: sticky;
    top: calc(var(--nav-height) + var(--space-6));
  }
}

/* ── 3. Input Panel ──────────────────────────────────────── */

.calc-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.calc-panel__header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.calc-panel__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
}

.calc-panel__reset {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  transition: color var(--transition-fast), background var(--transition-fast);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.calc-panel__reset:hover {
  color: var(--color-error);
  background: var(--color-error-bg);
}

.calc-panel__reset svg { width: 12px; height: 12px; }

.calc-panel__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.calc-panel__footer {
  padding: var(--space-4) var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ── 4. Input Row — Label + Input + Slider ───────────────── */

.input-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.input-row__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.input-row__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.input-row__value-display {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  font-family: var(--font-mono);
  background: var(--color-primary-50);
  padding: 0.15rem var(--space-2);
  border-radius: var(--radius-sm);
  min-width: 80px;
  text-align: right;
}

.input-row__slider-wrapper {
  position: relative;
  padding-block: var(--space-1);
}

/* Filled track effect via background gradient on range */
.input-row__slider {
  width: 100%;
  height: 6px;
  border-radius: var(--radius-full);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background: linear-gradient(
    to right,
    var(--color-primary) 0%,
    var(--color-primary) var(--range-fill, 50%),
    var(--color-border) var(--range-fill, 50%),
    var(--color-border) 100%
  );
}

.input-row__slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 2px solid var(--color-surface);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.input-row__slider::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 5px rgb(26 107 85 / 0.15);
  transform: scale(1.15);
}

.input-row__slider::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 2px solid var(--color-surface);
  box-shadow: var(--shadow-md);
}

.input-row__range-labels {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-1);
}

.input-row__range-labels span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Section separator within input panel */
.calc-section-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-muted);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-light);
  margin-bottom: var(--space-1);
}

/* Optional fields collapsible */
.optional-fields {
  display: none;
  flex-direction: column;
  gap: var(--space-5);
}

.optional-fields.is-open {
  display: flex;
}

.optional-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-primary);
  padding: 0;
  transition: opacity var(--transition-fast);
}

.optional-toggle:hover { opacity: 0.8; }
.optional-toggle svg { width: 14px; height: 14px; transition: transform var(--transition-base); }
.optional-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ── 5. Result Panel ─────────────────────────────────────── */

.result-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Primary result hero */
.result-hero {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border-radius: var(--radius-2xl);
  padding: var(--space-8) var(--space-8);
  color: var(--color-text-on-primary);
  position: relative;
  overflow: hidden;
}

.result-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 240px;
  height: 240px;
  background: rgb(255 255 255 / 0.05);
  border-radius: 50%;
  pointer-events: none;
}

.result-hero::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -5%;
  width: 180px;
  height: 180px;
  background: rgb(255 255 255 / 0.04);
  border-radius: 50%;
  pointer-events: none;
}

.result-hero__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: rgb(255 255 255 / 0.65);
  margin-bottom: var(--space-2);
}

.result-hero__value {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: #fff;
  margin-bottom: var(--space-1);
}

.result-hero__sub {
  font-size: var(--text-sm);
  color: rgb(255 255 255 / 0.7);
}

.result-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.result-hero__badge {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgb(255 255 255 / 0.12);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: rgb(255 255 255 / 0.9);
  backdrop-filter: blur(4px);
}

/* Secondary result stats grid */
.result-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .result-stats { grid-template-columns: repeat(3, 1fr); }
}

.result-stat {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-5);
}

.result-stat__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.result-stat__value {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}

.result-stat__value--positive { color: var(--color-success); }
.result-stat__value--negative { color: var(--color-error); }
.result-stat__value--primary  { color: var(--color-primary); }

.result-stat__note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* Breakdown bar */
.breakdown-bar {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
}

.breakdown-bar__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.breakdown-bar__track {
  height: 12px;
  border-radius: var(--radius-full);
  overflow: hidden;
  display: flex;
  margin-bottom: var(--space-4);
  background: var(--color-border-light);
}

.breakdown-bar__segment {
  height: 100%;
  transition: width var(--transition-slower);
}

.breakdown-bar__legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.breakdown-bar__legend-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-sm);
}

.breakdown-bar__legend-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-secondary);
}

.breakdown-bar__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.breakdown-bar__legend-value {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* Segment colors */
.seg--principal { background: var(--color-primary); }
.seg--interest  { background: var(--color-accent); }
.seg--tax       { background: #8b5cf6; }
.seg--insurance { background: #06b6d4; }
.seg--pmi       { background: #f43f5e; }
.seg--needs     { background: var(--color-primary); }
.seg--wants     { background: var(--color-accent); }
.seg--savings   { background: var(--color-success); }

/* ── 6. Chart Area ───────────────────────────────────────── */

.chart-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}

.chart-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.chart-card__title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.chart-card__controls {
  display: flex;
  gap: var(--space-1);
}

.chart-type-btn {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  border: 1px solid var(--color-border);
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.chart-type-btn.active,
.chart-type-btn:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.chart-canvas-wrapper {
  position: relative;
  width: 100%;
  height: 280px;
}

@media (min-width: 768px) {
  .chart-canvas-wrapper { height: 320px; }
}

.chart-canvas-wrapper canvas {
  width: 100% !important;
  height: 100% !important;
}

.chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 280px;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* ── 7. Amortization Table ───────────────────────────────── */

.amort-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.amort-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.amort-card__title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.amort-card__controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.amort-view-btn {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  border: 1px solid var(--color-border);
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.amort-view-btn.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.amort-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.amort-table thead tr {
  background: var(--color-border-light);
}

.amort-table th {
  padding: var(--space-3) var(--space-4);
  text-align: right;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  white-space: nowrap;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  user-select: none;
  transition: color var(--transition-fast);
}

.amort-table th:hover { color: var(--color-primary); }
.amort-table th:first-child { text-align: left; }
.amort-table th.sort-asc::after  { content: ' ↑'; }
.amort-table th.sort-desc::after { content: ' ↓'; }

.amort-table td {
  padding: var(--space-3) var(--space-4);
  text-align: right;
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border-light);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.amort-table td:first-child {
  text-align: left;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.amort-table tbody tr:hover td {
  background: var(--color-primary-50);
}

.amort-table tbody tr:last-child td {
  border-bottom: none;
}

/* Year group header row */
.amort-table .year-row td {
  background: var(--color-border-light);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding-block: var(--space-2);
  cursor: pointer;
}

.amort-table .year-row:hover td {
  background: var(--color-primary-50);
  color: var(--color-primary);
}

/* Totals row */
.amort-table .totals-row td {
  background: var(--color-primary-50);
  font-weight: var(--weight-bold);
  color: var(--color-primary-dark);
  border-top: 2px solid var(--color-primary-100);
  border-bottom: none;
  font-family: var(--font-mono);
}

.amort-table .totals-row td:first-child {
  font-family: var(--font-display);
  color: var(--color-primary-dark);
}

/* Pagination */
.table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
  gap: var(--space-3);
}

.table-pagination__info {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.table-pagination__controls {
  display: flex;
  gap: var(--space-1);
}

.page-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: none;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.page-btn:hover { background: var(--color-border-light); }
.page-btn.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── 8. Related Tools Section ────────────────────────────── */

.related-tools {
  padding-top: var(--space-12);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-12);
}

.related-tools__title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin-bottom: var(--space-6);
}

.related-tools__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 480px) {
  .related-tools__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .related-tools__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── 9. FAQ Section ──────────────────────────────────────── */

.faq-section {
  padding-top: var(--space-12);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-12);
}

.faq-section__header {
  margin-bottom: var(--space-8);
}

.faq-section__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.faq-section__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

/* ── 10. PDF Export Button ───────────────────────────────── */

.pdf-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  background: none;
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.pdf-btn:hover {
  color: var(--color-error);
  border-color: var(--color-error);
  background: var(--color-error-bg);
}

.pdf-btn svg { width: 14px; height: 14px; }

/* ── 11. Comparison Layout (Loan Comparison) ─────────────── */

.compare-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .compare-shell { grid-template-columns: repeat(2, 1fr); }
}

.compare-panel {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 2px solid var(--color-border);
}

.compare-panel--a { border-color: var(--color-primary); }
.compare-panel--b { border-color: var(--color-accent); }

.compare-panel__label {
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  text-align: center;
}

.compare-panel--a .compare-panel__label { background: var(--color-primary); color: #fff; }
.compare-panel--b .compare-panel__label { background: var(--color-accent); color: var(--color-text); }

/* Winner badge */
.winner-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background: var(--color-success-bg);
  color: var(--color-success);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.winner-badge svg { width: 12px; height: 12px; }

/* ── 12. Result Placeholder (before first calculation) ───── */

.result-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 320px;
  gap: var(--space-4);
  background: var(--color-surface);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-10);
}

.result-placeholder__icon {
  width: 72px;
  height: 72px;
  background: var(--color-primary-50);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.result-placeholder__icon svg { width: 36px; height: 36px; }

.result-placeholder__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.result-placeholder__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 300px;
}

/* ── 12. Net Worth Item Rows (asset/liability list) ──────── */

.nw-item-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}

/* Allow the name/value fields to actually shrink instead of
   overflowing — flex items default to min-width:auto, which for
   text inputs can force the row wider than its container. */
.nw-item-row .nw-item-row__name,
.nw-item-row .input-wrapper {
  min-width: 0;
}

.nw-item-row .nw-item-row__name { flex: 1 1 160px; }
.nw-item-row .input-wrapper     { flex: 1 1 120px; }

@media (max-width: 420px) {
  /* On narrow phones, give the name its own full-width row and let
     the amount + remove button share the line below it, rather than
     squeezing three controls into one cramped row. */
  .nw-item-row .nw-item-row__name { flex-basis: 100%; }
}