@import url('./sales-history.css');

.payments-main {
  padding: 24px 26px 18px;
}

.payments-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 22px;
}

.payments-summary-grid .summary-card {
  min-height: 148px;
  padding: 22px 20px;
  gap: 20px;
}

.payments-summary-grid .summary-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  flex: 0 0 72px;
}

.payments-summary-grid .summary-icon svg {
  width: 34px;
  height: 34px;
  stroke-width: 1.9;
}

.summary-icon.pay-total {
  color: #178f43;
  background: #eaf6ee;
}

.summary-icon.pay-mpesa {
  color: #178f43;
  background: #e8f7ed;
}

.summary-icon.pay-cash {
  color: #174bff;
  background: #edf3ff;
}

.summary-icon.pay-trans {
  color: var(--purple);
  background: #f0eaff;
}

.payments-summary-grid .summary-card h2 {
  margin-bottom: 8px;
}

.mini-count {
  margin-top: 12px;
  min-height: 24px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
}

.mini-count.green {
  color: #16813a;
  background: #e7f6ea;
}

.mini-count.blue {
  color: #001fff;
  background: #edf2ff;
}

.payments-panel {
  border-radius: 12px;
}

.payments-filter-row {
  grid-template-columns: minmax(320px, 2fr) minmax(205px, .9fr) minmax(260px, 1.15fr) minmax(168px, .75fr);
  padding: 16px 14px;
  gap: 32px;
}

.payments-filter-row .search-box,
.payments-filter-row .filter-btn,
.payments-filter-row .clear-btn {
  height: 46px;
  border-radius: 9px;
}

.payments-filter-row .search-box {
  padding: 0 14px;
}

.payments-filter-row .filter-btn,
.payments-filter-row .clear-btn {
  padding: 0 16px;
}

.payments-table {
  min-width: 1220px;
  display: grid;
  grid-template-columns: 1.18fr 1.1fr 1.28fr 1.22fr 1.28fr 1.82fr 1.18fr 1.05fr .9fr;
  align-items: center;
}

.payments-header {
  min-height: 48px;
  padding: 0 14px;
  color: #141f5a;
  font-size: 12px;
  font-weight: 850;
  border-bottom: 1px solid var(--line);
}

.payments-row {
  min-height: 64px;
  padding: 0 14px;
  color: #121b55;
  font-size: 14px;
  border-bottom: 1px solid #edf0f7;
}

.ref-link,
.invoice-link {
  color: #2400ff;
  font-size: 14px;
  font-weight: 820;
}

.date-col strong {
  font-weight: 500;
}

.details-col {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #151f5b;
  font-size: 13px;
}

.copy-btn {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  color: #4d41ff;
  border-radius: 5px;
}

.copy-btn svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.9;
}

.amount {
  font-weight: 800;
  letter-spacing: -0.01em;
}

.amount.green {
  color: #16813a;
}

.amount.blue {
  color: #1200ff;
}

.payments-row .pay-badge {
  min-width: 96px;
  min-height: 34px;
  border-radius: 10px;
  background: #f4f6fa;
  font-size: 13px;
}

.payments-row .pay-badge svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.9;
}

.payments-row .status-badge {
  min-height: 30px;
  min-width: 96px;
  font-size: 13px;
}

.payments-row .view-btn {
  min-width: 78px;
  min-height: 38px;
  border-radius: 9px;
  color: #2400ff;
  font-size: 13px;
}

.payments-panel .table-footer {
  padding: 16px 14px 14px;
}

.payments-panel .pagination {
  gap: 12px;
}

.payments-panel .page-btn {
  width: 40px;
  height: 40px;
  border-radius: 9px;
}

.payments-panel .per-page-btn {
  height: 46px;
  border-radius: 9px;
}

.history-sidebar .assist-card h3 {
  color: #aa78ff;
}

@media (max-width: 1380px) {
  .payments-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .payments-filter-row {
    grid-template-columns: minmax(240px, 1.5fr) minmax(180px, 1fr) minmax(220px, 1.1fr);
    gap: 14px;
  }
}

@media (max-width: 980px) {
  .payments-main {
    padding: 16px;
  }
  .payments-summary-grid,
  .payments-filter-row {
    grid-template-columns: 1fr;
  }
  .payments-summary-grid .summary-card {
    min-height: 128px;
  }
}