:root {
  --primary:    #0d6efd;
  --primary-dk: #0b5ed7;
  --success:    #198754;
  --warning:    #fd7e14;
  --danger:     #dc3545;
  --muted:      #6c757d;
  --bg:         #f8f9fa;
  --card:       #ffffff;
  --border:     #dee2e6;
  --text:       #212529;
  --radius:     12px;
  --shadow:     0 2px 12px rgba(0,0,0,.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .6rem 1.2rem;
  border: none; border-radius: 8px;
  font-size: 1rem; font-weight: 600;
  cursor: pointer; transition: all .15s;
  text-decoration: none;
}
.btn:active { transform: scale(.97); }
.btn-primary  { background: var(--primary);  color: #fff; }
.btn-primary:hover  { background: var(--primary-dk); }
.btn-success  { background: var(--success);  color: #fff; }
.btn-success:hover  { background: #157347; }
.btn-warning  { background: var(--warning);  color: #fff; }
.btn-warning:hover  { background: #e96e08; }
.btn-danger   { background: var(--danger);   color: #fff; }
.btn-danger:hover   { background: #b02a37; }
.btn-outline  { background: transparent; color: var(--primary); border: 2px solid var(--primary); }
.btn-outline:hover  { background: var(--primary); color: #fff; }
.btn-lg { padding: 1rem 2rem; font-size: 1.2rem; border-radius: 12px; }
.btn-full { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.badge {
  display: inline-block; padding: .25rem .6rem;
  border-radius: 20px; font-size: .78rem; font-weight: 700;
}
.badge-primary  { background: #cfe2ff; color: #084298; }
.badge-success  { background: #d1e7dd; color: #0a3622; }
.badge-warning  { background: #fff3cd; color: #664d03; }
.badge-danger   { background: #f8d7da; color: #58151c; }
.badge-muted    { background: #e9ecef; color: #495057; }
.badge-priority { background: #ffd700; color: #333; }

.toast-container {
  position: fixed; top: 1rem; right: 1rem; z-index: 9999;
  display: flex; flex-direction: column; gap: .5rem;
  pointer-events: none;
}
.toast {
  padding: .75rem 1.25rem;
  border-radius: 8px; font-weight: 600;
  opacity: 0; transform: translateX(50px);
  transition: all .3s; pointer-events: auto;
  max-width: 320px;
}
.toast.show { opacity: 1; transform: none; }
.toast-success { background: #d1e7dd; color: #0a3622; border-left: 4px solid var(--success); }
.toast-error   { background: #f8d7da; color: #58151c; border-left: 4px solid var(--danger); }
.toast-info    { background: #cff4fc; color: #055160; border-left: 4px solid #0dcaf0; }

.loading { opacity: .6; pointer-events: none; }
.spinner {
  display: inline-block; width: 20px; height: 20px;
  border: 3px solid rgba(255,255,255,.3);
  border-top-color: white; border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.flex    { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: .5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: 1rem; }
.text-center { text-align: center; }
.text-muted   { color: var(--muted); }
.text-sm      { font-size: .875rem; }
.text-lg      { font-size: 1.25rem; }
.text-xl      { font-size: 1.5rem; }
.fw-bold      { font-weight: 700; }
.w-100        { width: 100%; }

/* Jenis layanan colors */
.jenis-pendaftaran { border-left: 4px solid #0d6efd; }
.jenis-sampling    { border-left: 4px solid #198754; }
.jenis-hasil       { border-left: 4px solid #fd7e14; }
.jenis-rujukan     { border-left: 4px solid #6f42c1; }

.status-menunggu   { color: #664d03; background: #fff3cd; }
.status-dipanggil  { color: #055160; background: #cff4fc; }
.status-dilayani   { color: #0a3622; background: #d1e7dd; }
.status-selesai    { color: #495057; background: #e9ecef; }
.status-dilewati   { color: #842029; background: #f8d7da; }