@import "tailwindcss";

/* ── Custom theme tokens ─────────────────────────────────────── */
@theme {
  --color-brand:       #1e3a5f;
  --color-brand-light: #2a5298;
  --color-brand-dark:  #122540;
}

/* ── Reusable utility classes ────────────────────────────────── */
@layer components {
  .sidebar-link {
    @apply flex items-center gap-3 px-4 py-2.5 rounded-lg text-sm font-medium
           text-slate-300 hover:bg-white/10 hover:text-white transition-colors;
  }
  .sidebar-link.active {
    @apply bg-white/15 text-white;
  }
  .btn-primary {
    @apply inline-flex items-center gap-2 bg-brand hover:bg-brand-light text-white
           text-sm font-semibold px-4 py-2.5 rounded-lg shadow-sm transition-colors
           focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand;
  }
  .form-input {
    @apply w-full px-3.5 py-2.5 rounded-lg border border-slate-300 text-slate-800 text-sm
           focus:outline-none focus:ring-2 focus:ring-brand focus:border-transparent
           placeholder-slate-400 transition-colors bg-white;
  }
  .form-label {
    @apply block text-sm font-medium text-slate-700 mb-1.5;
  }
  .badge-admin    { @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-700; }
  .badge-operator { @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-100 text-slate-600; }
  .badge-active   { @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700; }
  .badge-expired  { @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700; }
}