/* ===================================================================
   MORTGAGE CALCULATOR PAGE
   Styles for the mortgage calculator tool.
   Uses design system variables from design-system.css.
   BEM naming: .mortgage-calc__<element>--<modifier>
   =================================================================== */


/* ===== PAGE WRAPPER ===== */

.mortgage-calc {
  max-width: 75rem;
  margin: 0 auto;
  padding: var(--space-6);
  min-height: calc(100vh - var(--space-12_5));
}


/* ===== HEADER ===== */

.mortgage-calc__header {
  margin-bottom: var(--space-8);
  text-align: center;
}

.mortgage-calc__title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
  margin: 0 0 var(--space-3);
  line-height: var(--line-height-tight);
}

.mortgage-calc__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-gray-500);
  margin: 0;
  line-height: var(--line-height-relaxed);
}


/* ===== TWO-COLUMN LAYOUT ===== */

.mortgage-calc__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
  margin-bottom: var(--space-8);
}


/* ===== INPUT SECTION (Left Column) ===== */

.mortgage-calc__inputs {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.mortgage-calc__section-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-800);
  margin: 0 0 var(--space-6);
}


/* ===== FORM FIELDS ===== */

.mortgage-calc__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.mortgage-calc__field:last-child {
  margin-bottom: 0;
}

.mortgage-calc__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
}


/* ===== INPUT WRAPPER (prefix/suffix support) ===== */

.mortgage-calc__input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.mortgage-calc__input-addon {
  position: absolute;
  color: var(--color-gray-500);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  z-index: 1;
  pointer-events: none;
}

/* Position the addon on the left for prefix variant */
.mortgage-calc__input-wrapper--prefix .mortgage-calc__input-addon {
  left: var(--space-3);
}

/* Position the addon on the right for suffix variant */
.mortgage-calc__input-wrapper--suffix .mortgage-calc__input-addon {
  right: var(--space-3);
}

.mortgage-calc__input {
  width: 100%;
  padding: var(--space-3);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-sans);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-gray-800);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.mortgage-calc__input:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
}

/* Extra left padding when a prefix (e.g. $) is present */
.mortgage-calc__input-wrapper--prefix .mortgage-calc__input {
  padding-left: var(--space-8);
}

/* Extra right padding when a suffix (e.g. % or years) is present */
.mortgage-calc__input-wrapper--suffix .mortgage-calc__input {
  padding-right: var(--space-10);
}


/* ===== INPUT ROW (input + toggle side by side) ===== */

.mortgage-calc__input-row {
  display: flex;
  gap: var(--space-3);
  align-items: stretch;
}

.mortgage-calc__input-row .mortgage-calc__input-wrapper {
  flex: 1;
}


/* ===== TOGGLE GROUP ($ / % selector) ===== */

.mortgage-calc__toggle-group {
  display: inline-flex;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
}

.mortgage-calc__toggle-btn {
  padding: var(--space-2) var(--space-3);
  background: var(--color-white);
  border: none;
  cursor: pointer;
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  transition: all var(--transition-fast);
  min-width: 2.5rem;
}

.mortgage-calc__toggle-btn:hover:not(.mortgage-calc__toggle-btn--active) {
  background: var(--color-gray-50);
  color: var(--color-gray-700);
}

.mortgage-calc__toggle-btn--active {
  background: var(--color-primary-600);
  color: var(--color-white);
}


/* ===== RESULTS SECTION (Right Column) ===== */

.mortgage-calc__results {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}


/* ===== EMPTY STATE ===== */

.mortgage-calc__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-6);
  text-align: center;
}

.mortgage-calc__empty-icon {
  font-size: var(--font-size-5xl);
  color: var(--color-gray-300);
  margin-bottom: var(--space-4);
}

.mortgage-calc__empty-text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-400);
  margin: 0;
  line-height: var(--line-height-relaxed);
  max-width: 18rem;
}


/* ===== RESULTS CONTENT (shown after calculation) ===== */

.mortgage-calc__results-content {
  display: none;
}

.mortgage-calc__results-content--visible {
  display: block;
}


/* ===== PRIMARY METRIC ===== */

.mortgage-calc__primary-metric {
  border: 2px solid var(--color-primary-200);
  background: var(--color-primary-50);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  margin-bottom: var(--space-6);
}

.mortgage-calc__metric-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
  margin: 0 0 var(--space-2);
}

.mortgage-calc__metric-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-700);
  margin: 0;
  line-height: var(--line-height-tight);
}


/* ===== SECONDARY METRICS GRID ===== */

.mortgage-calc__metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.mortgage-calc__metric-card {
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-align: center;
}

.mortgage-calc__metric-card-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-500);
  margin: 0 0 var(--space-1);
}

.mortgage-calc__metric-card-value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-800);
  margin: 0;
}


/* ===== PAYMENT BREAKDOWN ===== */

.mortgage-calc__breakdown {
  margin-bottom: var(--space-6);
}

.mortgage-calc__breakdown-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-800);
  margin: 0 0 var(--space-4);
}

/* Horizontal stacked bar showing principal vs interest */
.mortgage-calc__breakdown-bar {
  display: flex;
  width: 100%;
  height: 0.5rem;
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: var(--space-3);
}

.mortgage-calc__breakdown-principal {
  background: var(--color-success-500);
  transition: width var(--transition-base);
}

.mortgage-calc__breakdown-interest {
  background: var(--color-warning-500);
  transition: width var(--transition-base);
}

/* Card-style breakdown items (matches SvelteKit design) */
.mortgage-calc__breakdown-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.mortgage-calc__breakdown-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-4);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
}

.mortgage-calc__breakdown-card-label {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin-bottom: var(--space-2);
}

.mortgage-calc__breakdown-card-value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-mono, inherit);
  margin-bottom: var(--space-1);
}

.mortgage-calc__breakdown-card-value--principal {
  color: var(--color-success-600);
}

.mortgage-calc__breakdown-card-value--interest {
  color: var(--color-warning-600);
}

.mortgage-calc__breakdown-card-percent {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-500);
}


/* ===== AMORTIZATION TABLE ===== */

.mortgage-calc__amortization {
  margin-top: var(--space-6);
}

.mortgage-calc__amortization-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-800);
  margin: 0 0 var(--space-4);
}

.mortgage-calc__table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
}

.mortgage-calc__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.mortgage-calc__table thead {
  background: var(--color-gray-50);
}

.mortgage-calc__table th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
  border-bottom: 1px solid var(--color-gray-200);
  white-space: nowrap;
}

.mortgage-calc__table td {
  padding: var(--space-3) var(--space-4);
  color: var(--color-gray-600);
  border-bottom: 1px solid var(--color-gray-100);
}

/* Right-align numeric columns (all except the first) */
.mortgage-calc__table th:not(:first-child),
.mortgage-calc__table td:not(:first-child) {
  text-align: right;
}

/* Striped rows for readability */
.mortgage-calc__table tbody tr:nth-child(even) {
  background: var(--color-gray-50);
}

.mortgage-calc__table tbody tr:hover {
  background: var(--color-primary-50);
}

/* Remove bottom border on the last row */
.mortgage-calc__table tbody tr:last-child td {
  border-bottom: none;
}

/* Color-coded amortization values (matches SvelteKit design) */
.mortgage-calc__table-principal {
  color: var(--color-success-600);
  font-weight: var(--font-weight-medium);
}

.mortgage-calc__table-interest {
  color: var(--color-warning-600);
  font-weight: var(--font-weight-medium);
}


/* ===== RESPONSIVE: Tablet (1024px) ===== */

@media (max-width: 1024px) {
  .mortgage-calc__layout {
    grid-template-columns: 1fr;
  }

  .mortgage-calc__metrics-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ===== RESPONSIVE: Mobile (768px) ===== */

@media (max-width: 768px) {
  .mortgage-calc {
    padding: var(--space-4);
  }

  .mortgage-calc__header {
    margin-bottom: var(--space-6);
  }

  .mortgage-calc__title {
    font-size: var(--font-size-2xl);
  }

  .mortgage-calc__subtitle {
    font-size: var(--font-size-base);
  }

  .mortgage-calc__inputs,
  .mortgage-calc__results {
    padding: var(--space-4);
  }

  .mortgage-calc__metrics-grid {
    grid-template-columns: 1fr;
  }

  .mortgage-calc__input-row {
    flex-direction: column;
  }

  /* Enable horizontal scroll for the amortization table */
  .mortgage-calc__table-wrapper {
    -webkit-overflow-scrolling: touch;
  }

  .mortgage-calc__table {
    min-width: 36rem;
  }

  .mortgage-calc__breakdown-cards {
    grid-template-columns: 1fr;
  }
}