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

@layer base {
  html, body, #root { height: 100%; }
  body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  ::selection { background-color: theme('colors.brand.500'); color: white; }
}

@layer components {
  .card {
    @apply rounded-xl border border-ink-800 bg-ink-900 shadow-card;
  }
  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-lg px-3.5 py-2 text-sm font-medium
           transition-colors focus:outline-none focus:ring-2 focus:ring-brand-500/40 focus:ring-offset-2 focus:ring-offset-ink-950
           disabled:cursor-not-allowed disabled:opacity-50;
  }
  .btn-primary  { @apply btn bg-brand-500 text-white hover:bg-brand-400 active:bg-brand-600; }
  .btn-secondary{ @apply btn bg-ink-800 text-ink-100 hover:bg-ink-700 border border-ink-700; }
  .btn-danger   { @apply btn bg-danger text-white hover:bg-danger/90; }
  .btn-ghost    { @apply btn bg-transparent text-ink-200 hover:bg-ink-800; }
  .input {
    @apply w-full rounded-lg border border-ink-700 bg-ink-900 px-3 py-2 text-sm text-ink-100
           placeholder:text-ink-400 focus:border-brand-400 focus:outline-none focus:ring-2 focus:ring-brand-500/30;
  }
  .label {
    @apply text-xs font-medium uppercase tracking-wide text-ink-300;
  }
  .badge {
    @apply inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider;
  }
  .badge-online  { @apply badge bg-success/15 text-success; }
  .badge-banned  { @apply badge bg-danger/15 text-danger; }
  .badge-admin   { @apply badge bg-brand-500/15 text-brand-200; }
  .badge-junior  { @apply badge bg-warn/15 text-warn; }
  .badge-neutral { @apply badge bg-ink-800 text-ink-200; }

  .table-row-hover { @apply hover:bg-ink-800/60 transition-colors; }

  /* Wrap any wide data table in <div class="table-scroll"> so it
     scrolls horizontally on narrow viewports instead of forcing the
     whole layout wider than the screen. Pair with `whitespace-nowrap`
     on cells that should never wrap (usernames, timestamps). */
  .table-scroll { @apply overflow-x-auto -mx-px; }
}