@import url("../calculators-common.css");
@import url("../tables.css");

/* Summary Cards Container */
.summary-cards-container {
  display: grid;
  gap: 0.5rem;
}

/* Months Card */
.summary-months {
  border-left: 4px solid #3b82f6 !important;
}
.summary-text-months {
  color: #3b82f6 !important;
}

/* Withdrawn Card */
.summary-withdrawn {
  border-left: 4px solid #10b981 !important;
}
.summary-text-withdrawn {
  color: #10b981 !important;
}

/* Remaining Card */
.summary-remaining {
  border-left: 4px solid #a855f7 !important;
}
.summary-text-remaining {
  color: #a855f7 !important;
}

/* Grids */
.swp-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem; /* gap-4 */
}

.swp-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

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

/* Helper Text */
.calc-input-help-text {
  margin-top: 0.25rem;
  font-size: 0.75rem; /* text-xs */
  color: var(--text-muted, #6b7280);
}

/* Button Group */
.calc-btn-group {
  display: flex;
  gap: 0.75rem; /* gap-3 */
}

/* Results Header */
.results-header-row {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.results-header-help {
  font-size: 0.75rem;
  color: var(--text-muted, #6b7280);
}

/* Icons/Text in cards */
.summary-label-text {
  font-size: 0.875rem; /* text-sm */
  font-weight: 500;
  color: var(--text-muted);
}

/* Charts */
.chart-container {
  width: 100%;
}

.chart-title {
  margin-bottom: 1rem; /* mb-4 */
  font-weight: 700; /* font-bold */
  display: block;
  font-size: 1.125rem; /* text-lg */
}

.chart-section {
  margin-bottom: 2rem; /* mb-8 */
  padding: 1.5rem; /* p-6 */
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: var(--shadow);
  background-color: var(--card-bg);
}