/* Base Styles */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #f4f4f4;
}

/* Main container for all sections */
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* Calculator and Results (desktop: side-by-side) */
.calculator, .results {
  padding: 20px;
  border-radius: 8px;
  background-color: #fff;
  flex: 1 1 45%;
background: #eee;
border: 1px solid;
}

/* Schedule section spans full width on desktop */
.schedule {
  padding: 20px;
  border-radius: 8px;
  background-color: #fff;
  flex: 1 1 100%;
}

/* Hide results initially; they will be displayed on button click */
.results {
  display: none;
}

/* Headings */
h2 {
  margin-top: 0;
}

/* Form elements */
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
input, select {
  width: 100%;
  padding: 8px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Button Group: Smaller buttons, horizontal alignment */
.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
button {
  padding: 6px 12px; /* Smaller padding */
  background-color: #794CDE;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 10px;
}
button:hover {
  background-color: #0056b3;
}

/* Result items */
.result-item {
  margin-bottom: 15px;
}
.result-item h3 {
  margin: 0 0 10px;
}

/* Schedule Tabs and Table */
.schedule-tabs {
  text-align: center;
  margin-bottom: 10px;
}
.schedule-tabs button {
  padding: 6px 12px;
  font-size: 14px;
  margin: 0 5px;
  cursor: pointer;
}
.schedule-tabs button.active {
  background-color: #4CAF50;
  color: #fff;
}
.amortization-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}
.amortization-table th,
.amortization-table td {
  padding: 8px;
  border: 1px solid #ddd;
  text-align: right;
}

/* Chart Containers */
/* Donut chart remains small */
.chart-container {
  width: 200px;
  height: 200px;
  margin: 20px auto;
}
/* Line chart container (assumed to be inside results) */
.line-chart-container {
  width: 100%;
  max-width: 600px;
  height: 350px;
  margin: 20px auto;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Mobile Layout */
@media (max-width: 768px) {
  .container {
grid-template-columns: 1fr;
  }
  /* Order sections as desired:
     1. Calculator (order: 1)
     2. Results (order: 2)
     3. Schedule (order: 3) */
  .calculator {
    order: 1;
  }
  .results {
    order: 2;
    display: block; /* Ensure results are visible on mobile once calculated */
  }
  .schedule {
    order: 3;
  }
}