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

@layer base {
  html {
    font-family: system-ui, sans-serif;
  }
}

@layer components {
  /* Botões com design mais profissional */
  .btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-xl transition-all duration-200 shadow-sm hover:shadow-md focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
  }
  
  .btn-secondary {
    @apply bg-gray-100 hover:bg-gray-200 text-gray-700 font-semibold py-3 px-6 rounded-xl transition-all duration-200 hover:shadow-sm border border-gray-200;
  }

  .btn-action {
    @apply bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-full transition-all duration-200 shadow-sm hover:shadow-md;
  }
  
  /* Cards com visual mais limpo */
  .card {
    @apply bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow duration-200;
  }

  .card-compact {
    @apply bg-white rounded-xl shadow-sm border border-gray-200 p-4;
  }
  
  /* Inputs com melhor feedback visual */
  .input-field {
    @apply w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 bg-white text-gray-900 placeholder-gray-400;
  }

  /* Estados de loading mais elegantes */
  .loading-spinner {
    @apply animate-spin rounded-full border-2 border-gray-300 border-t-blue-600;
  }

  /* Badges e status indicators */
  .badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold;
  }

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

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

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

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

  /* Transições suaves globais */
  * {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  /* Scrollbars personalizadas */
  .custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
  }

  /* Utility para line-clamp */
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Classes de tabela e sidebar */
  .data-table {
    @apply min-w-full divide-y divide-gray-200;
  }
  
  .data-table th {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50;
  }
  
  .data-table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
  }
  
  .sidebar-link {
    @apply flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900 rounded-md transition-colors duration-200;
  }
  
  .sidebar-link.active {
    @apply bg-blue-100 text-blue-700 border-r-2 border-blue-600;
  }
}