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

@layer base {
  /* Custom font families */
  body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  }
}

@layer components {
  /* Professional Button Styles */
  .btn-primary {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200;
  }
  
  .btn-secondary {
    @apply inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-lg shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200;
  }
  
  .btn-danger {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-200;
  }

  /* Professional Form Styles */
  .form-input {
    @apply block w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm transition-colors duration-200;
  }
  
  .form-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
  }
  
  .form-select {
    @apply block w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm transition-colors duration-200;
  }

  /* Professional Card Styles */
  .card {
    @apply bg-white shadow-sm rounded-lg border border-gray-200 overflow-hidden;
  }
  
  .card-header {
    @apply px-6 py-4 border-b border-gray-200 bg-gray-50;
  }
  
  .card-body {
    @apply px-6 py-4;
  }

  /* Professional Navigation Styles */
  .nav-link {
    @apply text-gray-600 hover:text-indigo-600 hover:bg-indigo-50;
  }
  
  .nav-link.active {
    @apply text-indigo-600 bg-indigo-50 border-r-2 border-indigo-600;
  }

  /* Professional Table Styles */
  .table {
    @apply min-w-full divide-y divide-gray-200 bg-white shadow-sm rounded-lg overflow-hidden;
  }
  
  .table thead {
    @apply bg-gray-50;
  }
  
  .table th {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
  }
  
  .table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900 border-b border-gray-200;
  }
  
  .table tbody tr:hover {
    @apply bg-gray-50;
  }

  /* Professional Badge Styles */
  .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;
  }

  /* Professional Alert Styles */
  .alert {
    @apply p-4 rounded-lg border;
  }
  
  .alert-success {
    @apply bg-green-50 border-green-200 text-green-800;
  }
  
  .alert-warning {
    @apply bg-yellow-50 border-yellow-200 text-yellow-800;
  }
  
  .alert-danger {
    @apply bg-red-50 border-red-200 text-red-800;
  }
  
  .alert-info {
    @apply bg-blue-50 border-blue-200 text-blue-800;
  }

  /* Professional Loading Spinner */
  .spinner {
    @apply animate-spin rounded-full h-5 w-5 border-b-2 border-indigo-600;
  }

  /* Status indicators */
  .status-indicator {
    @apply inline-block w-2 h-2 rounded-full;
  }
  
  .status-online {
    @apply bg-green-400;
  }
  
  .status-offline {
    @apply bg-gray-400;
  }
  
  .status-warning {
    @apply bg-yellow-400;
  }
  
  .status-error {
    @apply bg-red-400;
  }
}

@layer utilities {
  /* Custom animations */
  @keyframes slideIn {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(0);
    }
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  .animate-slide-in {
    animation: slideIn 0.3s ease-out;
  }
  
  .animate-fade-in {
    animation: fadeIn 0.2s ease-out;
  }

  /* Professional shadows */
  .shadow-professional {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
  
  .shadow-elevated {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
}

/* Legacy styles (updated for professional look) */
.pagy {
  @apply flex space-x-1 font-medium text-sm text-gray-600;
  
  a:not(.gap) {
    @apply block rounded-lg px-3 py-2 bg-white border border-gray-300 hover:bg-gray-50 transition-colors duration-200;
    
    &:hover {
      @apply bg-indigo-50 border-indigo-300 text-indigo-700;
    }
    
    &:not([href]) {
      @apply text-gray-400 bg-gray-100 cursor-default border-gray-200;
    }
    
    &.current {
      @apply text-white bg-indigo-600 border-indigo-600;
    }
  }
  
  label {
    @apply inline-block whitespace-nowrap bg-white border border-gray-300 rounded-lg px-3 py-2;
    
    input {
      @apply bg-gray-50 border-gray-300 rounded-md text-sm focus:border-indigo-500 focus:ring-indigo-500;
    }
  }
}

/* Professional status badges */
.dvir_tag_red {
  @apply badge badge-danger font-semibold;
}

.dvir_tag_green {
  @apply badge badge-success font-semibold;
}

.warning_number {
  @apply font-bold text-red-600;
}

/* Professional form styling */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
  @apply form-input;
}

input[type="submit"] {
  @apply btn-primary;
}

input[type="checkbox"]:checked {
  @apply bg-indigo-600 border-indigo-600;
}

/* Professional focus states */
*:focus {
  @apply outline-none;
}

input:focus,
select:focus,
textarea:focus {
  @apply ring-2 ring-indigo-500 ring-offset-2 border-indigo-500;
}

/* Smooth transitions for all interactive elements */
a,
button,
input,
select,
textarea {
  @apply transition-colors duration-200;
}

/* Professional hover states */
button:hover,
.btn-primary:hover,
.btn-secondary:hover {
  @apply transform -translate-y-0.5 shadow-lg transition-all duration-200;
}