/* SI-HI DINNAKERIND DEMAK - Custom Stylesheet */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Outfit:wght@400;500;600;700;800;900&display=swap');

:root {
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  --primary-800: #1e40af;
  --primary-900: #1e3a8a;
  --demak-green: #15803d;
  --demak-gold: #ca8a04;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  letter-spacing: -0.01em;
}

h1, h2, h3, h4, .font-heading {
  font-family: 'Outfit', 'Inter', sans-serif;
  letter-spacing: -0.02em;
}

/* Glassmorphism Cards */
.glass-card {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.04), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
}

.glass-card-dark {
  background: rgba(15, 23, 42, 0.90);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(51, 65, 85, 0.6);
}

/* Enhanced Table Styling */
table {
  border-collapse: separate;
  border-spacing: 0;
}

th {
  white-space: nowrap;
}

/* Universal Badge Styling to prevent line-wrapping */
.badge-pill,
[class*="rounded-full"],
[class*="rounded-xl"] span,
td span,
th span {
  white-space: nowrap;
}

/* Modern Pill Badges */
.badge-patuh {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  background-color: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.badge-pds-tk {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  background-color: #ffe4e6;
  color: #9f1239;
  border: 1px solid #fecdd3;
}

.badge-pds-upah {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  background-color: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

.badge-pwbd {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  background-color: #f3e8ff;
  color: #6b21a8;
  border: 1px solid #e9d5ff;
}

.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1;
}

/* Action button icons */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  transition: all 0.15s ease-in-out;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Pulse Glow */
.pulse-glow-red {
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
  animation: pulseGlowRed 2s infinite;
}

@keyframes pulseGlowRed {
  0%, 100% {
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.6);
  }
  50% {
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.9);
  }
}

/* Animated Timeline */
.timeline-step.active .step-icon {
  background-color: #2563eb;
  color: #ffffff;
  ring: 4px rgba(37, 99, 235, 0.2);
}
.timeline-step.completed .step-icon {
  background-color: #10b981;
  color: #ffffff;
}