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

/* Custom styles for the application */
@layer base {
  html {
    font-family: 'Poppins', sans-serif;
  }
  
  [x-cloak] {
    display: none !important;
  }
}

@layer components {
  /* Button styles */
  .btn-primary {
    @apply bg-primary-500 hover:bg-primary-600 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-opacity-50;
  }
  
  .btn-secondary {
    @apply bg-secondary-200 hover:bg-secondary-300 text-secondary-800 font-semibold py-2 px-4 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-secondary-500 focus:ring-opacity-50;
  }
  
  .btn-danger {
    @apply bg-red-500 hover:bg-red-600 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50;
  }
  
  /* Card styles */
  .card {
    @apply bg-white rounded-xl shadow-lg border border-gray-100 overflow-hidden;
  }
  
  .card-header {
    @apply bg-gray-50 px-6 py-4 border-b border-gray-200;
  }
  
  .card-body {
    @apply p-6;
  }
  
  /* Form styles */
  .form-input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-colors duration-200;
  }
  
  .form-label {
    @apply block text-sm font-medium text-gray-700 mb-2;
  }
  
  /* Table styles */
  .table {
    @apply w-full border-collapse bg-white rounded-lg overflow-hidden shadow-sm;
  }
  
  .table th {
    @apply bg-gray-50 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200;
  }
  
  .table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900 border-b border-gray-100;
  }
  
  /* Status badges */
  .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;
  }
}

@layer utilities {
  /* Custom utilities */
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.10);
  }
  
  .text-shadow-lg {
    text-shadow: 0 4px 8px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08);
  }
  
  /* Gradient backgrounds */
  .bg-gradient-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }
  
  .bg-gradient-secondary {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  }
  
  /* Custom scrollbar */
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
  }
  
  .scrollbar-thin::-webkit-scrollbar {
    width: 6px;
  }
  
  .scrollbar-thin::-webkit-scrollbar-track {
    background: #f1f5f9;
  }
  
  .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 3px;
  }
}

/* DataTables custom styling */
.dataTables_wrapper {
  @apply mt-4;
}

.dataTables_length select,
.dataTables_filter input {
  @apply form-input !important;
}

.dataTables_paginate .paginate_button {
  @apply px-3 py-2 mx-1 text-sm border border-gray-300 rounded hover:bg-gray-50 !important;
}

.dataTables_paginate .paginate_button.current {
  @apply bg-primary-500 text-white border-primary-500 !important;
}

/* Modal improvements */
.modal-backdrop {
  @apply bg-black bg-opacity-50 backdrop-blur-sm;
}

/* Loading states */
.loading {
  @apply opacity-50 pointer-events-none;
}

.loading::after {
  content: '';
  @apply absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' stroke='currentColor' stroke-width='4' class='opacity-25'%3E%3C/circle%3E%3Cpath fill='currentColor' d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z' class='opacity-75'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 2rem;
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }
  
  .print-break {
    page-break-after: always;
  }
}