/* Credit card payoff calculator (inherits global + site.css) */

.debtTable th,
.debtTable td {
  white-space: nowrap;
}

@media (max-width: 620px) {

  .debtTable th,
  .debtTable td {
    font-size: small;
  }
}


.debtTable input {
  width: 100%;
  min-width: 120px;
}

.debtTable input[data-field="name"] {
  min-width: 180px;
}

.debtTable .ccRemoveBtn {
  padding: 6px 10px;
  min-height: 34px;
}

.debtTable .ccRemoveBtn .btnTitle {
  font-size: 16px;
  line-height: 1;
}

#ccChartCard .chartWrap canvas {
  width: 100%;
  display: block;
}

/* Table totals + add-row button */
.debtTable tfoot .totalsRow td {
  font-weight: 600;
}

.addRowBtn {
  width: 100%;
  font-size: 22px;
  background: linear-gradient(180deg, #f7f9ff 0%, #f3f6ff 45%, #f7f9ff 100%);
}

.addRowBtn:hover {
  color: #2f6fec;
}

/* Row validation */
.debtTable tr.isInvalid td {
  background: rgba(220, 53, 69, 0.10);
}

.debtTable tr.isInvalid input {
  border-color: rgba(220, 53, 69, 0.75);
}

.isInvalid {
  border-color: rgba(220, 53, 69, 0.75);
}

th,
td {
  border-bottom: none;
}

.actions {
  display: flex;
  justify-content: center;
}

/* --- Responsive charts --- */
.charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}

.tableBoxInput {
  border: none;
  border-radius: 0px;
}

.radioBtn {
  justify-content: flex-start;
}

.fieldTab {
  border-radius: 6px;
  padding: 6px 8px;
}

.fieldTab input {
  font-size: 14px;
  font-weight: 500;
}

@media (max-width: 820px) {
  .charts-grid {
    grid-template-columns: 1fr;
  }
}

.chart-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
  /* critical in grid/flex to prevent overflow */
  height: 340px;
}

@media (max-width: 480px) {
  .chart-wrap {
    height: 280px;
  }
}

.chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}


/* --- Mobile: rendre la liste des dettes scrollable (sans cacher Totaux + bouton +) --- */
@media (max-width: 640px) {
  .debtsTableViewport {
    width: 100%;
    max-height: 52vh;
    overflow: auto;
  }

  table.debtTable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }

  /* Totaux sticky en bas */
  table.debtTable tfoot tr.totalsRow td {
    position: sticky;
    bottom: 44px;
    /* hauteur approximative de la ligne addRow */
    z-index: 2;
    background: var(--card-bg, #fff);
  }

  /* addRow sticky tout en bas */
  table.debtTable tfoot tr.addRow td {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: var(--card-bg, #fff);
  }

}