/* Basic UI */
.ct-wrap .ct-filters, .ct-filters { display:flex; gap:.5rem; align-items:center; margin:.75rem 0; flex-wrap:wrap; }
.ct-card{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:16px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.ct-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:12px; margin:12px 0; }
.ct-card input[type=text], .ct-card input[type=date], .ct-card select, .ct-card textarea{ width:100%; padding:8px 10px; border:1px solid #d1d5db; border-radius:8px; }
.ct-alert{ background:#fff7ed; border:1px solid #fdba74; padding:14px 16px; border-radius:12px; margin-bottom:12px; }
.ct-alert.ct-success{ background:#f0fdf4; border-color:#bbf7d0; }
.ct-badge{ padding:2px 8px; border-radius:999px; font-size:12px; text-transform:capitalize; }
.ct-badge.ct-tergadai{ background:#fee2e2; border:1px solid #fca5a5; }
.ct-badge.ct-belum_tergadai{ background:#dcfce7; border:1px solid #86efac; }
.ct-table{ width:100%; border-collapse: collapse; }
.ct-table th, .ct-table td{ border:1px solid #e5e7eb; padding:8px; }
@media (max-width:640px){
  .ct-table thead{ display:none; }
  .ct-table tr{ display:block; margin-bottom:10px; }
  .ct-table td{ display:flex; justify-content:space-between; gap:12px; border:1px solid #e5e7eb; }
  .ct-table td::before{ content: attr(data-label); font-weight:600; }
}
/* Alert variants with left color bar */
.ct-alert.ct-danger{ background:#fff5f5; border:1px solid #fecaca; position:relative; }
.ct-alert.ct-danger::before{ content:""; position:absolute; left:-1px; top:0; bottom:0; width:6px; background:#ef4444; border-top-left-radius:12px; border-bottom-left-radius:12px; }
.ct-alert.ct-success{ background:#f0fdf4; border:1px solid #bbf7d0; position:relative; }
.ct-alert.ct-success::before{ content:""; position:absolute; left:-1px; top:0; bottom:0; width:6px; background:#22c55e; border-top-left-radius:12px; border-bottom-left-radius:12px; }