@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

body {
  font-family: 'Inter', sans-serif;
  background: #f1f5f9;
}

/* Sidebar */
.sidebar-link {
  @apply flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium text-slate-400 hover:bg-white/10 hover:text-white transition-all duration-150;
}
.sidebar-link.active {
  @apply bg-white/20 text-white font-semibold;
}

/* Cards */
.card {
  @apply bg-white rounded-2xl border border-gray-100 shadow-sm;
}

/* Buttons */
.btn-primary {
  @apply bg-primary text-white font-semibold text-sm px-4 py-2 rounded-xl hover:opacity-90 transition-opacity;
}
.btn-secondary {
  @apply border border-gray-200 text-gray-600 font-semibold text-sm px-4 py-2 rounded-xl hover:bg-gray-50 transition-colors;
}

/* Table */
.table-wrap {
  @apply overflow-x-auto rounded-2xl border border-gray-100 shadow-sm bg-white;
}
.table-wrap table {
  @apply w-full text-sm min-w-[600px];
}
.table-wrap thead {
  @apply bg-gray-50 border-b border-gray-100;
}
.table-wrap th {
  @apply px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap;
}
.table-wrap td {
  @apply px-4 py-3 text-gray-700;
}
.table-wrap tbody tr {
  @apply border-b border-gray-50 hover:bg-blue-50/30 transition-colors;
}
.table-wrap tbody tr:last-child {
  @apply border-b-0;
}

/* Badge */
.badge {
  @apply inline-flex items-center text-xs font-semibold px-2.5 py-1 rounded-full;
}
.badge-green  { @apply bg-emerald-100 text-emerald-700; }
.badge-red    { @apply bg-red-100 text-red-700; }
.badge-blue   { @apply bg-blue-100 text-blue-700; }
.badge-yellow { @apply bg-amber-100 text-amber-700; }
.badge-gray   { @apply bg-gray-100 text-gray-600; }

/* Pagination */
.page-btn {
  @apply px-3 py-1.5 text-xs rounded-lg border border-gray-200 hover:bg-gray-50 disabled:opacity-40 transition-colors;
}
.page-btn.active {
  @apply bg-primary text-white border-primary;
}
