/* Custom utilities */
.card {
  @apply bg-white rounded-xl border border-gray-200 shadow-sm;
}
.card:hover {
  @apply shadow-md;
}
.metric {
  @apply card p-5 transition-transform hover:-translate-y-0.5;
}
.btn {
  @apply inline-flex items-center justify-center gap-2 px-3 py-2 rounded-lg border border-gray-200 bg-white hover:bg-gray-50 transition-colors;
}
.btn-primary {
  @apply bg-primary text-white border-primary hover:bg-primary/90;
}
.btn-danger {
  @apply bg-red-600 text-white border-red-600 hover:bg-red-700;
}
.btn-outline {
  @apply bg-white hover:bg-gray-50;
}
.badge {
  @apply inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium;
}
.badge-green { @apply bg-green-100 text-green-800; }
.badge-blue { @apply bg-blue-100 text-blue-800; }
.badge-yellow { @apply bg-yellow-100 text-yellow-800; }
.badge-red { @apply bg-red-100 text-red-800; }
.badge-purple { @apply bg-purple-100 text-purple-800; }
.badge-gray { @apply bg-gray-100 text-gray-800; }

.table {
  @apply min-w-full divide-y divide-gray-200;
}
.table thead th {
  @apply px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider cursor-pointer select-none;
}
.table tbody td {
  @apply px-4 py-3 text-sm text-gray-800;
}

.modal-backdrop {
  @apply fixed inset-0 bg-black/40 backdrop-blur-sm flex items-center justify-center p-4 z-[60];
}
.modal {
  @apply w-full max-w-2xl bg-white rounded-xl border border-gray-200 shadow-xl;
}
.modal-header {
  @apply px-5 py-4 border-b flex items-center justify-between;
}
.modal-body {
  @apply p-5 space-y-4;
}
.modal-footer {
  @apply px-5 py-4 border-t flex items-center justify-end gap-2;

}

/* Overlap tweak for header rows (ensures Row 2 overlaps nicely) */
nav {
  position: relative;
}
nav > div > div {
  position: relative;
  top: -16px; /* Overlap onto Row 1 */
}

/* Simple chips */
.chip {
  @apply inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-gray-100 text-gray-800;
}

/* Rounded filter buttons */
.filter-btn {
  @apply px-3 py-1 rounded-full border border-gray-200 text-sm hover:bg-gray-50;
}
.filter-btn.active {
  @apply bg-primary text-white border-primary;
}

/* Scroll table container */
.table-container {
  @apply overflow-auto rounded-lg border border-gray-200;
}