.supplier-filters {
  display: grid;
  grid-template-columns: minmax(320px, 1.8fr) minmax(180px, 1fr) minmax(180px, 1fr);
  gap: 18px;
  align-items: end;
  margin-bottom: 22px;
  padding: 20px;
  background: #f7faf9;
  border: 1px solid #d8e7e3;
  border-radius: 14px;
}

.supplier-filters label {
  display: block;
  margin-bottom: 8px;
  color: #475467;
  font-size: 12px;
  font-weight: 700;
}

.supplier-filters select,
.supplier-filters input {
  width: 100%;
  min-height: 50px;
  padding: 0 15px;
  border: 1px solid #b8c8c4;
  border-radius: 11px;
  background: #fff;
  color: #17212b;
  font: 600 15px "Segoe UI", Arial, sans-serif;
  box-shadow: 0 2px 7px rgba(23, 50, 77, 0.06);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.supplier-filters select {
  cursor: pointer;
}

/* Nama supplier dan customer ditampilkan konsisten dalam huruf kapital. */
#supplierSelect,
#supplierSelect option,
#customerSelect,
#customerSelect option,
.supplier-summary-table tbody td:first-child {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.supplier-filters select:hover,
.supplier-filters input:hover {
  border-color: #0f766e;
}

.supplier-filters select:focus,
.supplier-filters input:focus {
  border-color: #0f766e;
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.13);
}

.supplier-cards {
  margin-bottom: 22px;
  grid-template-columns: repeat(3, 1fr);
}

.supplier-recap {
  margin-top: 20px;
}

.supplier-detail-head {
  margin-top: 4px;
}

.supplier-detail-head small {
  display: block;
  margin-top: 5px;
  color: #667085;
}

.supplier-recap .panel-head small {
  display: block;
  margin-top: 5px;
  color: #667085;
}

.supplier-recap tfoot th {
  padding: 14px 11px;
  text-align: right;
  color: #17324d;
  border-top: 2px solid #17324d;
  background: #f4f8f7;
}

.supplier-recap tfoot th:first-child {
  text-align: left;
}

.supplier-detail-table,
.supplier-summary-table {
  table-layout: fixed;
}

.supplier-detail-table .col-date { width: 12%; }
.supplier-detail-table .col-proof { width: 12%; }
.supplier-detail-table .col-desc { width: 34%; }
.supplier-detail-table .col-value { width: 14%; }
.supplier-detail-table .col-balance { width: 14%; }

.supplier-summary-table .col-supplier { width: 43%; }
.supplier-summary-table .col-summary-value { width: 18%; }
.supplier-summary-table .col-summary-balance { width: 21%; }

.supplier-detail-table th:nth-child(n+4),
.supplier-summary-table th:nth-child(n+2) {
  text-align: right;
  line-height: 1.35;
}

.supplier-detail-table td:nth-child(n+4),
.supplier-summary-table td:nth-child(n+2) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.supplier-detail-table th,
.supplier-summary-table th {
  white-space: normal;
  vertical-align: bottom;
}

.supplier-detail-table td,
.supplier-summary-table td {
  vertical-align: top;
}

@media (max-width: 850px) {
  .supplier-filters {
    grid-template-columns: 1fr;
  }

  .supplier-cards {
    grid-template-columns: 1fr;
  }
}