body { background-color: #f4f6f9; }

.badge-secondary { background-color: #6c757d; }
.badge-info { background-color: #0dcaf0; color: #000; }
.badge-primary { background-color: #0d6efd; }
.badge-warning { background-color: #ffc107; color: #000; }
.badge-success-light { background-color: #75d38a; color: #000; }
.badge-success { background-color: #198754; }

.badge { display: inline-block; padding: 0.35em 0.65em; font-size: 0.75em; font-weight: 600; border-radius: 0.375rem; color: #fff; }

/* Timeline horizontal sederhana */
.timeline-steps { display: flex; list-style: none; padding: 0; margin: 0.5rem 0; }
.timeline-steps li {
  flex: 1;
  text-align: center;
  position: relative;
  font-size: 0.7rem;
  color: #adb5bd;
  padding-top: 18px;
}
.timeline-steps li::before {
  content: '';
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #dee2e6;
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
}
.timeline-steps li::after {
  content: '';
  position: absolute;
  top: 5px; left: 50%;
  width: 100%; height: 2px;
  background: #dee2e6;
  z-index: -1;
}
.timeline-steps li:last-child::after { display: none; }
.timeline-steps li.done { color: #198754; font-weight: 600; }
.timeline-steps li.done::before { background: #198754; }
.timeline-steps li.done::after { background: #198754; }
.timeline-steps li.current { color: #fd7e14; font-weight: 700; }
.timeline-steps li.current::before { background: #fd7e14; }

.kendala-highlight { background-color: #fff3cd !important; }

.progress { height: 1.2rem; }

table.table td, table.table th { vertical-align: middle; }

/* Mobile friendly tweaks */
@media (max-width: 767.98px) {
  .timeline-steps li { font-size: 0.6rem; padding-top: 14px; }
  .timeline-steps li::before { width: 9px; height: 9px; }
  h4 { font-size: 1.15rem; }
  .card-body .fs-3 { font-size: 1.4rem !important; }
  .navbar-nav .nav-link { padding-top: 0.4rem; padding-bottom: 0.4rem; }
}

.table-responsive { -webkit-overflow-scrolling: touch; }

/* Sidebar */
.sidebar .nav-link { color: rgba(255,255,255,0.85); border-radius: 0.375rem; }
.sidebar .nav-link:hover, .sidebar .nav-link:focus { background-color: rgba(255,255,255,0.12); color: #fff; }
.sidebar .nav-link.active { background-color: #0d6efd; color: #fff; }

@media (min-width: 768px) {
  #appWrapper { min-height: 100vh; }
  .sidebar.offcanvas-md { min-height: 100vh; }
}

.recap-utang { color: #dc3545; font-weight: 600; }
.recap-lunas { color: #198754; }

/* Kartu statistik warna solid (gaya gradient ungu-teal) */
.stat-card { position: relative; overflow: hidden; border: none; border-radius: 0.6rem; }
.stat-card::after {
  content: '';
  position: absolute;
  right: 0; bottom: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 0 55px 55px;
  border-color: transparent transparent rgba(255,255,255,0.12) transparent;
}