.accounts-metrics {
  grid-template-columns: repeat(6, minmax(140px, 1fr));
}

.accounts-metrics .overdue:before { background: #d94b45; }
.accounts-metrics .banked:before { background: #6b59cf; }
.accounts-metrics .rate:before { background: #168b98; }
.accounts-metrics .overdue strong { color: #c44747; }
.accounts-metrics .banked strong { color: #6254ca; }
.accounts-metrics .rate strong { color: #147d81; }

.accounts-table { min-width: 1250px; }

.accounts-table :is(th, td):is(:nth-child(2), :nth-child(4), :nth-child(7), :nth-child(8), :nth-child(9), :nth-child(10), :nth-child(16), :nth-child(17), :nth-child(19)) {
  display: none;
}

.accounts-table tr.selected,
.accounts-table tr.selected td { background: #dff5f2; }

/* Keep overdue information in the status badge without painting the whole row. */
.accounts-table tr.alert,
.accounts-table tr.alert td { background: #fff !important; }
.accounts-table tr.alert:nth-child(even),
.accounts-table tr.alert:nth-child(even) td { background: #fbfcfd !important; }
.accounts-table tr.alert:hover,
.accounts-table tr.alert:hover td { background: #eaf7f7 !important; }

.account-days.attention {
  background: #fff0df;
  color: #b4671d;
  font-weight: 800;
}

.account-control-detail {
  margin: 12px 15px 15px;
  padding: 17px;
  border: 1px solid #cfe1e6;
  border-radius: 12px;
  background: #f8fbfc;
}

.account-control-detail.hidden { display: none; }

.account-control-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.account-control-detail-head small,
.account-control-detail-head strong { display: block; }
.account-control-detail-head small { color: #24838d; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.account-control-detail-head strong { margin-top: 4px; color: #173444; font: 800 15px Manrope; }
.account-control-detail-head button { border: 0; background: transparent; color: #62737f; cursor: pointer; font-size: 18px; }

.account-control-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 12px;
}

.account-control-detail-grid div {
  padding: 10px;
  border-radius: 9px;
  background: #fff;
}

.account-control-detail-grid small,
.account-control-detail-grid strong { display: block; }
.account-control-detail-grid small { color: #71808b; font-size: 8px; }
.account-control-detail-grid strong { margin-top: 5px; color: #263f4d; font-size: 10px; }

.account-control-state {
  display: inline-block !important;
  width: fit-content;
  padding: 5px 9px;
  border-radius: 20px;
  background: #fff0df;
  color: #b4671d !important;
}

.account-control-state.received { background: #e0f5e9; color: #167c55 !important; }
.account-control-state.overdue { background: #ffe1df; color: #c23e37 !important; }
.account-control-state.banked { background: #eeeaff; color: #6254ca !important; }
.account-status.overdue { background: #ffe1df; color: #c23e37; }
.account-status.banked { background: #eeeaff; color: #6254ca; }
.account-definitive{display:inline-block;min-width:35px;padding:5px 8px;border-radius:18px;text-align:center;font-weight:800}.account-definitive.yes{background:#e0f5e9;color:#167c55}.account-definitive.no{background:#edf2f5;color:#657781}

#accountsRefresh { display: none; }

@media(max-width:1300px) {
  .accounts-metrics { grid-template-columns: repeat(3, 1fr); }
}

@media(max-width:800px) {
  .accounts-metrics { grid-template-columns: repeat(2, 1fr); }
  .account-control-detail-grid { grid-template-columns: repeat(2, 1fr); }
}

@media(max-width:480px) {
  .accounts-metrics,
  .account-control-detail-grid { grid-template-columns: 1fr; }
}