/* ===== TABLE ===== */
.tw {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border)
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-sm);
  font-variant-numeric: tabular-nums; /* align currency/number columns (M4) */
}

thead {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

thead th {
  background: var(--surface);
  color: var(--g3);
  font-weight: 700;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 2px solid var(--glass-border);
  white-space: nowrap;
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 1px;
}

td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--glass-border);
  vertical-align: middle;
}

tr:last-child td {
  border-bottom: none
}

tbody tr {
  transition: background .12s, border-left .12s;
  border-left: 3px solid transparent;
}

tbody tr:nth-child(even) td {
  background: rgba(var(--ws-black-rgb), .018);
}

tbody tr:hover {
  border-left: 3px solid var(--teal);
}

tbody tr:hover td {
  background: var(--row-hover);
}

.tr td {
  background: var(--teal-light) !important;
  font-weight: 700;
  border-top: 2px solid var(--glass-border);
  color: var(--teal);
  font-variant-numeric: tabular-nums;
}

/* ===== PAGINATION ===== */
.pg-wrap {
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
  padding: 16px;
  flex-wrap: wrap
}

.pg-btn {
  padding: 7px 13px;
  border: 1.5px solid var(--g2);
  border-radius: 8px;
  background: var(--card);
  color: var(--dark);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: .15s;
  font-family: 'Poppins', sans-serif
}

.pg-btn:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: var(--teal-light)
}

.pg-btn.active {
  background: var(--teal);
  color: var(--ws-white);
  border-color: var(--teal)
}

.pg-btn:disabled {
  opacity: .4;
  cursor: not-allowed
}

.pg-info {
  font-size: 11px;
  color: var(--g3);
  padding: 0 8px;
  white-space: nowrap
}

.rpp {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px
}

.rpp select {
  padding: 6px 10px;
  border: 1.5px solid var(--g2);
  border-radius: 7px;
  font-size: 12px;
  width: auto
}

/* ===== BADGES ===== */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1px
}

.bg, .stat-lunas {
  background: var(--ws-success-bg);
  color: var(--ws-success-light);
  border: 1px solid rgba(var(--ws-success-rgb), .25);
}

.by, .stat-dp {
  background: var(--yellow-bg);
  color: var(--ws-warning);
  border: 1px solid rgba(var(--ws-warning-rgb), .25);
}

.br, .stat-belum {
  background: var(--red-bg);
  color: var(--ws-danger-light);
  border: 1px solid var(--red-border);
}

.bb, .stat-done {
  background: var(--blue-bg);
  color: var(--ws-blue-light);
  border: 1px solid rgba(var(--ws-blue-rgb), .25);
}

/* Trip status badges (used by tbdge() in constants.js) */
.b-prep {
  background: var(--ws-info-bg);
  color: var(--ws-info);
  border: 1px solid rgba(var(--ws-info-rgb), .30);
}

.b-ongoing {
  background: var(--ws-warning-bg);
  color: var(--ws-warning-light);
  border: 1px solid rgba(var(--ws-warning-rgb), .30);
}

.b-closing {
  background: rgba(236, 72, 153, .12);
  color: #f472b6;
  border: 1px solid rgba(236, 72, 153, .25);
}

.b-done {
  background: var(--ws-success-bg);
  color: var(--ws-success-light);
  border: 1px solid rgba(var(--ws-success-rgb), .25);
}

/* ===== CHART ===== */
.chart-wrap {
  position: relative;
  height: 260px
}

/* Perlu Ditagih — payment follow-up panel */
.fu-panel { margin: 0 0 14px; border: 1px solid var(--ws-border); border-radius: 12px; background: var(--ws-bg-card); overflow: hidden; }
.fu-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; cursor: pointer; font-weight: 600; color: var(--ws-accent-dark); background: var(--ws-accent-light); user-select: none; }
.fu-chevron { font-size: 12px; color: var(--muted); }
.fu-body { display: flex; flex-direction: column; }
.fu-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--ws-border); flex-wrap: wrap; }
.fu-main { display: flex; flex-direction: column; min-width: 160px; flex: 1; }
.fu-trip { font-size: 12px; color: var(--muted); }
.fu-sisa { font-size: 13px; font-weight: 600; white-space: nowrap; }
.fu-actions { display: flex; gap: 6px; margin-left: auto; }
.fu-badge { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; margin-left: 6px; }
.fu-overdue { background: var(--ws-danger-pastel); color: var(--ws-danger); border: 1px solid var(--ws-danger-pastel-border); }
.fu-soon { background: var(--ws-warn-bg-light); color: var(--ws-warning-light); border: 1px solid var(--ws-warn-color-400); }
.fu-due { background: var(--ws-bg-hover); color: var(--muted); }