@import "tailwindcss";

:root {
  color-scheme: light;
}

html, body, #root {
  height: 100%;
}

body {
  @apply bg-slate-50 text-slate-900;
}

.badge-status {
  @apply inline-flex h-8 items-center gap-3 rounded-full border border-slate-200 px-3 text-sm font-semibold;
}

.card {
  @apply w-full rounded-2xl border border-slate-200 bg-white p-6 shadow-sm;
}

.btn {
  @apply inline-flex items-center justify-center rounded-md border px-3 py-2 text-sm font-semibold transition;
}

.btn-primary {
  @apply border-black bg-black text-white hover:bg-black/90;
}

.btn-outline {
  @apply border-slate-300 bg-white text-slate-800 hover:bg-slate-50;
}

.input {
  @apply w-full rounded-lg border border-slate-300 px-3 py-2 text-sm;
}

.label {
  @apply text-sm font-medium;
}

.tabs {
  @apply mt-4 flex flex-col gap-3;
}

.tab-list {
  @apply flex flex-wrap gap-2 border-b border-slate-200 pb-2;
}

.tab-btn {
  @apply rounded-md border border-transparent bg-transparent px-3 py-1.5 text-sm font-medium text-slate-700 hover:bg-slate-100;
}

.tab-btn.active {
  @apply border-slate-300 bg-slate-100 text-slate-900;
}

.stat-card {
  @apply flex items-center gap-3 rounded-md border border-slate-200 bg-slate-50/80 px-3 py-2;
}
