/* Tailwind CSS base styles */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Tailwind custom extensions */
@layer components {
  .btn {
    @apply px-4 py-2 rounded-md text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2;
  }

  .btn-primary {
    @apply bg-primary hover:bg-primary-dark text-white focus:ring-primary;
  }

  .btn-secondary {
    @apply bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-primary;
  }

  .card {
    @apply bg-white rounded-lg shadow overflow-hidden;
  }

  .card-header {
    @apply px-6 py-4 border-b border-gray-200;
  }

  .card-body {
    @apply p-6;
  }

  .form-input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary;
  }

  .form-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
  }

  .badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full 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;
  }

  .badge-info {
    @apply bg-blue-100 text-blue-800;
  }

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

  .nav-tab {
    @apply px-6 py-4 font-medium text-sm border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300;
  }

  .nav-tab-active {
    @apply border-primary text-primary;
  }

  .sidebar-link {
    @apply flex items-center px-4 py-3 text-gray-300 hover:bg-gray-800 hover:text-white;
  }

  .sidebar-link-active {
    @apply bg-primary bg-opacity-10 text-white border-l-4 border-primary;
  }

  .progress-bar-container {
    @apply w-full bg-gray-200 rounded-full overflow-hidden;
  }

  .progress-bar {
    @apply h-2 rounded-full;
  }

  .table-container {
    @apply overflow-x-auto;
  }

  .table {
    @apply min-w-full divide-y divide-gray-200;
  }

  .table-header {
    @apply bg-gray-50;
  }

  .table-header-cell {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
  }

  .table-body {
    @apply bg-white divide-y divide-gray-200;
  }

  .table-row {
    @apply hover:bg-gray-50;
  }

  .table-cell {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-500;
  }
}

/* Custom utilities */
@layer utilities {
  .text-shadow {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  .rotate-hover {
    @apply transition-transform duration-300;
  }

  .rotate-hover:hover {
    @apply transform rotate-3;
  }
}