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

@layer base {
  * { @apply border-slate-800; }
  html { @apply scroll-smooth; }
  body { @apply selection:bg-sky-500/30 selection:text-white; }
  button:disabled, input:disabled, select:disabled { @apply cursor-not-allowed opacity-50; }
  code { @apply rounded bg-slate-950/70 px-1.5 py-0.5 font-mono text-[.9em] text-sky-300; }
}

@layer components {
  .panel { @apply rounded-2xl border border-slate-800 bg-slate-900 p-4 shadow-sm sm:p-5; }
  .panel-header { @apply mb-5 flex flex-wrap items-start justify-between gap-3; }
  .panel-title { @apply text-base font-semibold text-white; }
  .panel-subtitle { @apply text-sm text-slate-400; }

  .stat-card { @apply rounded-2xl border border-slate-800 bg-slate-900 p-5 shadow-sm transition hover:border-slate-700; }
  .stat-label { @apply text-sm font-medium text-slate-400; }
  .stat-value { @apply mt-3 break-words text-2xl font-bold tracking-tight text-white 2xl:text-3xl; }
  .stat-meta { @apply mt-2 text-xs text-slate-500; }

  .nav-link { @apply flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-slate-400 transition hover:bg-slate-800 hover:text-white; }
  .nav-link-active { @apply bg-sky-500/10 text-sky-300 ring-1 ring-inset ring-sky-500/20; }
  .nav-icon { @apply grid h-7 w-7 shrink-0 place-items-center rounded-lg bg-slate-800 text-sm text-slate-300; }
  .nav-link-active .nav-icon { @apply bg-sky-500/20 text-sky-300; }

  .mobile-nav-link { @apply flex min-w-0 flex-col items-center justify-center gap-0.5 rounded-lg px-1 py-1.5 text-slate-500; }
  .mobile-nav-link span { @apply text-base leading-none; }
  .mobile-nav-link small { @apply max-w-full truncate text-[10px]; }
  .mobile-nav-active { @apply bg-sky-500/10 text-sky-300; }

  .btn { @apply inline-flex min-h-10 items-center justify-center gap-2 rounded-xl border px-3.5 py-2 text-sm font-medium transition focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-950; }
  .btn-primary { @apply border-sky-500 bg-sky-500 text-slate-950 hover:border-sky-400 hover:bg-sky-400 focus:ring-sky-500; }
  .btn-secondary { @apply border-slate-700 bg-slate-800 text-slate-200 hover:border-slate-600 hover:bg-slate-700 focus:ring-slate-500; }
  .btn-danger { @apply border-red-500 bg-red-500 text-white hover:border-red-400 hover:bg-red-400 focus:ring-red-500; }
  .btn-danger-outline { @apply border-red-500/40 bg-red-500/5 text-red-300 hover:border-red-500/70 hover:bg-red-500/10 focus:ring-red-500; }

  .field { @apply block min-w-0; }
  .field > span { @apply mb-1.5 block text-xs font-medium text-slate-400; }
  .input { @apply min-h-11 w-full rounded-xl border border-slate-700 bg-slate-950/70 px-3 py-2 text-sm text-slate-100 outline-none placeholder:text-slate-600 focus:border-sky-500 focus:ring-2 focus:ring-sky-500/20; }
  .filter-grid { @apply mb-5 grid gap-3 rounded-xl border border-slate-800 bg-slate-950/35 p-4 sm:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6; }

  .admin-table { @apply w-full min-w-[900px] border-separate border-spacing-0 text-left text-sm; }
  .admin-table th { @apply border-b border-slate-700 bg-slate-950/45 px-4 py-3 text-xs font-semibold uppercase tracking-wide text-slate-500; }
  .admin-table th:first-child { @apply rounded-tl-xl; }
  .admin-table th:last-child { @apply rounded-tr-xl; }
  .admin-table td { @apply border-b border-slate-800 px-4 py-3.5 align-middle text-slate-300; }
  .admin-table tbody tr { @apply transition hover:bg-slate-800/45; }
  .table-link { @apply font-medium text-sky-400 hover:text-sky-300; }

  .mobile-record { @apply block min-w-0 overflow-hidden rounded-xl border border-slate-800 bg-slate-950/35 p-4; }
  .empty-state { @apply rounded-xl border border-dashed border-slate-700 px-5 py-10 text-center text-sm text-slate-500; }

  .badge { @apply inline-flex max-w-full items-center rounded-full border px-2.5 py-1 text-xs font-medium capitalize; }
  .badge-success { @apply border-emerald-500/25 bg-emerald-500/10 text-emerald-300; }
  .badge-info { @apply border-sky-500/25 bg-sky-500/10 text-sky-300; }
  .badge-warning { @apply border-amber-500/25 bg-amber-500/10 text-amber-300; }
  .badge-danger { @apply border-red-500/25 bg-red-500/10 text-red-300; }
  .badge-muted { @apply border-slate-700 bg-slate-800/70 text-slate-300; }

  .detail-grid { @apply grid gap-px overflow-hidden rounded-xl border border-slate-800 bg-slate-800 sm:grid-cols-2; }
  .detail-grid > div { @apply min-w-0 bg-slate-950/45 p-4; }
  .detail-grid dt { @apply text-xs font-medium uppercase tracking-wide text-slate-500; }
  .detail-grid dd { @apply mt-1 break-words font-medium text-white; }
  .detail-grid small { @apply mt-1 block break-all text-xs text-slate-500; }

  .admin-code { @apply max-h-[32rem] overflow-auto whitespace-pre-wrap break-all rounded-xl border border-slate-800 bg-slate-950 p-4 font-mono text-xs leading-6 text-slate-300; }
}

@layer utilities {
  .admin-scrollbar { scrollbar-width: thin; scrollbar-color: rgb(51 65 85) transparent; }
  .admin-scrollbar::-webkit-scrollbar { width: 8px; }
  .admin-scrollbar::-webkit-scrollbar-thumb { border-radius: 9999px; background: rgb(51 65 85); }
}