/* ===== TAILWIND @LAYER COMPONENTS ===== */

@layer components {
  /* ANIMATIONS */
  .animate-fade-in {
    animation: fadeIn 0.3s ease-in-out;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes bounce {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(-10px);
    }
  }

  /* BADGES */
  .badge-active {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800;
  }

  .badge-inactive {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-800;
  }

  .badge-stock-critical {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-red-100 text-red-800;
  }

  .badge-stock-low {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-800;
  }

  .badge-stock-ok {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800;
  }

  /* BUTTONS - MODERN */
  .btn-primary-modern {
    @apply inline-flex items-center gap-2 px-4 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 active:bg-blue-800 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-secondary-modern {
    @apply inline-flex items-center gap-2 px-4 py-2.5 bg-gray-200 text-gray-700 font-medium rounded-lg hover:bg-gray-300 hover:shadow-md active:bg-gray-400 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-danger-modern {
    @apply inline-flex items-center gap-2 px-4 py-2.5 bg-red-600 text-white font-medium rounded-lg hover:bg-red-700 active:bg-red-800 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-success-modern {
    @apply inline-flex items-center gap-2 px-4 py-2.5 bg-green-600 text-white font-medium rounded-lg hover:bg-green-700 hover:shadow-lg active:bg-green-800 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed transform hover:scale-105;
  }

  .btn-warning-modern {
    @apply inline-flex items-center gap-2 px-4 py-2.5 bg-yellow-600 text-white font-medium rounded-lg hover:bg-yellow-700 active:bg-yellow-800 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
  }

  /* FORM INPUTS */
  .input-modern {
    @apply w-full px-4 py-2.5 text-gray-900 placeholder-gray-500 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all duration-200;
  }

  .input-modern:disabled {
    @apply bg-gray-100 cursor-not-allowed;
  }

  .input-modern::placeholder {
    @apply text-gray-400;
  }

  .label-modern {
    @apply block text-sm font-semibold text-gray-900 mb-2;
  }

  .select-modern {
    @apply w-full px-4 py-2.5 text-gray-900 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all duration-200 appearance-none bg-white;
  }

  /* TEXTAREA */
  textarea.input-modern {
    @apply resize-vertical min-h-[120px];
  }

  /* TABLES */
  .table-modern {
    @apply w-full border-collapse;
  }

  .table-modern thead th {
    @apply px-6 py-4 text-left text-xs font-semibold text-gray-700 bg-gray-50 border-b border-gray-200 uppercase tracking-wider;
  }

  .table-modern tbody td {
    @apply px-6 py-4 border-b border-gray-100 text-sm text-gray-900;
  }

  .table-modern tbody tr {
    @apply hover:bg-gray-50 transition-colors duration-150;
  }

  .table-modern tbody tr:last-child td {
    @apply border-b-0;
  }

  /* CARDS */
  .card-modern {
    @apply bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden;
  }

  /* KPI GRID CARDS */
  .grid-card {
    @apply bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow duration-200;
  }

  .grid-card-title {
    @apply text-sm font-medium text-gray-600;
  }

  .grid-card-value {
    @apply text-3xl font-bold text-gray-900 mt-2;
  }

  /* TEXT UTILITIES */
  .truncate-lines-2 {
    @apply line-clamp-2;
  }

  .truncate-lines-3 {
    @apply line-clamp-3;
  }
}

/* ===== CUSTOM CSS UTILITIES ===== */

/* Smooth transitions */
* {
  transition-property: color, background-color, border-color, box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Remove default focus outlines on buttons */
button:focus-visible,
a:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Drag and drop zones */
.drag-over {
  @apply border-blue-500 bg-blue-50;
}

/* Scrollbar styling (webkit browsers) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

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

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