/* =============================================
   Mortgage Calculator — Calculator-Specific Styles
   Shared UI (cards, forms, buttons, stats, charts,
   tables) + design tokens come from ../../styles.css.
   ============================================= */

/* --- CALCULATOR LAYOUT: inputs left, results right --- */
.layout {
  display: grid;
  grid-template-columns: 350px minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.layout > * {
  min-width: 0; /* keep either panel from widening the page */
}

.input-panel {
  position: sticky;
  top: 1rem;
  overflow-y: auto;
}

/* --- RESULTS --- */
.breakdown {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.2rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

.breakdown span {
  font-weight: 600;
  color: var(--text);
}

.paid-off {
  color: var(--accent-green) !important;
  font-weight: 700;
}

/* Center the schedule table headers and scale them down a touch. */
#yearlyScheduleTable th,
#monthlyScheduleTable th {
  text-align: center;
  font-size: 0.72rem;
}

/* Center every number field in the schedule tables. */
#yearlyScheduleTable td,
#monthlyScheduleTable td {
  text-align: center;
}

/* Taller canvas for the amortization chart (the pie chart stays compact).
   Chart.js sizes the canvas to fill its container, so the wrapper needs a
   definite height (332px = 300px canvas + 2 × 16px wrapper padding). */
.chart-tall {
  height: 332px;
  max-height: 332px;
}

.chart-tall canvas {
  max-height: 300px;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .input-panel {
    position: static;
    max-height: none;
    overflow-y: visible;
  }

  .big-number {
    font-size: 2rem;
  }

  .breakdown {
    flex-direction: column;
    gap: 0.2rem;
    align-items: flex-start;
  }

  /* Compact schedule tables on small screens — keep everything on screen
     without horizontal scrolling (annual table fits; monthly stays readable). */
  .table-scroll table {
    font-size: 0.78rem;
  }

  .table-scroll th {
    padding: 0.5rem 0.45rem;
  }

  .table-scroll td {
    padding: 0.4rem 0.45rem;
  }
}