/* Google Fonts - Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

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

@layer base {
  html {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    @apply bg-white text-gray-900;
  }

  /* Remove default focus outline, add custom */
  input:focus,
  textarea:focus,
  select:focus {
    @apply outline-none;
  }
}

@layer components {
  /* Primary Button - Black */
  .btn-primary {
    @apply w-full py-3.5 bg-black hover:bg-gray-900 active:bg-gray-800
           text-white font-semibold rounded-none transition-colors
           cursor-pointer text-base;
  }

  /* Secondary Button - Outline */
  .btn-secondary {
    @apply w-full py-3 border border-gray-200 hover:border-black
           hover:bg-gray-50 text-black font-medium rounded-none
           transition-colors cursor-pointer;
  }

  /* Input - Underline style */
  .input-underline {
    @apply w-full px-0 py-3 bg-transparent border-b border-gray-200
           text-black text-base placeholder-gray-300
           focus:outline-none focus:border-black transition-colors;
  }

  /* Input - Boxed style */
  .input-box {
    @apply w-full px-4 py-3 bg-gray-50 border border-gray-200
           text-black text-base placeholder-gray-400
           focus:outline-none focus:border-black focus:bg-white
           transition-colors;
  }

  /* Card */
  .card {
    @apply bg-white border border-gray-200 p-6;
  }

  /* Sidebar Navigation Item */
  .nav-item {
    @apply flex items-center gap-3 px-4 py-3 text-gray-400
           hover:text-white hover:bg-white/5 transition-colors cursor-pointer;
  }

  .nav-item.active {
    @apply text-white bg-white/10;
  }

  /* Table styles */
  .table-header {
    @apply text-left text-xs font-semibold text-gray-500 uppercase tracking-wider;
  }

  .table-cell {
    @apply py-4 text-sm text-gray-900;
  }

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

  /* Badge */
  .badge {
    @apply inline-flex items-center px-2.5 py-0.5 text-xs font-medium;
  }

  .badge-success {
    @apply bg-green-100 text-green-800;
  }

  .badge-warning {
    @apply bg-yellow-100 text-yellow-800;
  }

  .badge-danger {
    @apply bg-red-100 text-red-800;
  }
}

@layer utilities {
  /* Smooth transitions for all interactive elements */
  .transition-default {
    transition-property: color, background-color, border-color, opacity;
    transition-duration: 150ms;
    transition-timing-function: ease-in-out;
  }
}
