.ageing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ageing-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.ageing-card:last-child { grid-column: 1 / -1; }
.ageing-card span, .ageing-card strong, .ageing-card small { display: block; }
.ageing-card span { color: var(--muted); font-size: 9px; }
.ageing-card strong { margin-top: 7px; font-family: Georgia, serif; font-size: 17px; }
.ageing-card small { margin-top: 5px; color: var(--muted); font-size: 8px; }
.ageing-card.overdue strong { color: var(--negative); }
.ageing-card.current strong { color: var(--positive); }

.receivable-party-list,
.invoice-list {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
}

.receivable-party-row {
  width: 100%;
  padding: 14px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 12px;
  gap: 10px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid #eee9de;
  background: none;
  text-align: left;
}

.receivable-party-row:last-child, .invoice-row:last-child { border-bottom: 0; }

.party-initial {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #eae3f4;
  color: #73549b;
  font-size: 11px;
  font-weight: 900;
}

.payables-hero,
.payable-balance-card {
  background: linear-gradient(125deg, #593144, #8b4c62);
}

.payable-initial {
  background: #f3e1e7;
  color: #8b4c62;
}

.receivable-party-copy, .receivable-party-value, .invoice-copy { min-width: 0; }
.receivable-party-copy strong, .receivable-party-copy small,
.receivable-party-value strong, .receivable-party-value small,
.invoice-date strong, .invoice-date small,
.invoice-copy strong, .invoice-copy small { display: block; }
.receivable-party-copy strong, .invoice-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.receivable-party-copy small, .receivable-party-value small,
.invoice-date small, .invoice-copy small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.receivable-party-value { text-align: right; white-space: nowrap; }
.receivable-party-value strong { font-size: 10px; }

.receivable-balance-card {
  margin-top: 18px;
  padding: 20px;
  border-radius: 20px;
  background: linear-gradient(125deg, #123b4a, #176b6a);
  color: #fff;
}

.receivable-balance-card > div:first-child span,
.receivable-balance-card > div:first-child strong { display: block; }
.receivable-balance-card > div:first-child span { color: #afd1d1; font-size: 10px; }
.receivable-balance-card > div:first-child strong { margin-top: 6px; font-family: Georgia, serif; font-size: 30px; }
.receivable-balance-split { margin-top: 18px; padding-top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px solid rgba(255,255,255,.17); }
.receivable-balance-split span, .receivable-balance-split small, .receivable-balance-split b { display: block; min-width: 0; }
.receivable-balance-split small { color: #afd1d1; font-size: 8px; }
.receivable-balance-split b { margin-top: 5px; overflow: hidden; text-overflow: ellipsis; font-size: 9px; white-space: nowrap; }

.invoice-row {
  width: 100%;
  padding: 14px;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto 12px;
  gap: 10px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid #eee9de;
  background: none;
  text-align: left;
}

.invoice-date strong, .invoice-amount { font-size: 9px; }
.invoice-amount { white-space: nowrap; }
.bill-detail-list { max-height: 180px; overflow-y: auto; }
.bill-detail-list > div { padding: 10px 0; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; border-bottom: 1px solid var(--line); }
.bill-detail-list span, .bill-detail-list strong { font-size: 9px; }
.bill-detail-list small { grid-column: 1 / -1; color: var(--muted); font-size: 8px; }

.profit-hero { background: linear-gradient(125deg, #24573f, #3c7b57); }
.profit-section-list,
.profit-line-list { overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.profit-section-row { width: 100%; padding: 14px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto 12px; gap: 10px; align-items: center; border: 0; border-bottom: 1px solid #eee9de; background: none; text-align: left; }
.profit-section-row:last-child,
.profit-line-row:last-child { border-bottom: 0; }
.profit-section-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: #e1efe5; color: #2d6a47; font-weight: 900; }
.profit-section-copy,
.profit-section-value { min-width: 0; }
.profit-section-copy strong,
.profit-section-copy small,
.profit-section-value strong,
.profit-section-value small { display: block; }
.profit-section-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.profit-section-copy small,
.profit-section-value small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.profit-section-value { text-align: right; white-space: nowrap; }
.profit-section-value strong { font-size: 10px; }
.profit-line-row { width: 100%; padding: 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; border: 0; border-bottom: 1px solid #eee9de; background: none; text-align: left; }
.profit-line-row span,
.profit-line-row span strong,
.profit-line-row span small { display: block; min-width: 0; }
.profit-line-row span strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.profit-line-row span small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.profit-line-row > strong { font-size: 10px; white-space: nowrap; }
.balance-hero { background: linear-gradient(125deg, #173b55, #285f78); }
.balance-section-icon { background: #e1eaf0; color: #285f78; }

@media (max-width: 370px) {
  .receivable-party-row { grid-template-columns: 38px minmax(0, 1fr) auto 10px; padding: 12px; }
  .party-initial { width: 38px; height: 38px; }
  .invoice-row { grid-template-columns: 66px minmax(0, 1fr) auto 10px; padding: 12px; }
}