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

@layer base {
  body {
    @apply bg-gray-950 text-gray-100;
  }

  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    @apply bg-gray-900;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-police-700 rounded-full;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-police-600;
  }
}

@layer components {
  .card {
    @apply bg-gray-900 border border-gray-800 rounded-xl p-6 shadow-lg;
  }

  .card-hover {
    @apply card transition-all duration-200 hover:border-police-700 hover:shadow-police-900/20;
  }

  .btn-primary {
    @apply bg-police-700 hover:bg-police-600 text-white px-4 py-2 rounded-lg font-medium transition-colors duration-200;
  }

  .btn-secondary {
    @apply bg-gray-800 hover:bg-gray-700 text-gray-200 px-4 py-2 rounded-lg font-medium transition-colors duration-200 border border-gray-700;
  }

  .btn-danger {
    @apply bg-red-900/50 hover:bg-red-800/50 text-red-300 px-4 py-2 rounded-lg font-medium transition-colors duration-200 border border-red-800/50;
  }

  .btn-success {
    @apply bg-emerald-900/50 hover:bg-emerald-800/50 text-emerald-300 px-4 py-2 rounded-lg font-medium transition-colors duration-200 border border-emerald-800/50;
  }

  .input-field {
    @apply bg-gray-800 border border-gray-700 rounded-lg px-4 py-2.5 text-gray-100 placeholder-gray-500 focus:outline-none focus:border-police-600 focus:ring-1 focus:ring-police-600 transition-colors w-full;
  }

  .table-header {
    @apply text-left text-xs font-semibold text-gray-400 uppercase tracking-wider px-4 py-3;
  }

  .table-cell {
    @apply px-4 py-3 text-sm text-gray-300;
  }

  .table-row {
    @apply border-b border-gray-800/50 hover:bg-gray-800/30 transition-colors;
  }

  .page-title {
    @apply text-2xl font-bold text-white mb-1;
  }

  .page-subtitle {
    @apply text-gray-400 text-sm;
  }
}