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

/* PAM - Parts Asset Management Design System - Custom Styles */
body { 
  @apply bg-gray-50 text-gray-800;
}

/* Custom Scrollbar */
::-webkit-scrollbar { 
  width: 8px; 
  height: 8px; 
}

::-webkit-scrollbar-track { 
  @apply bg-gray-100 rounded;
}

::-webkit-scrollbar-thumb { 
  @apply bg-gray-300 rounded;
}

::-webkit-scrollbar-thumb:hover { 
  @apply bg-gray-400;
}

/* Forms */
.form-group { 
  @apply mb-6;
}

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

.form-input { 
  @apply w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm transition-all bg-white text-gray-800;
}

.form-input:focus { 
  @apply outline-none border-blue-500 ring-2 ring-blue-100;
}

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

/* Login username input group focus */
.username-group:focus-within {
  border-color: #111827;
}

.username-group:focus-within .username-suffix {
  border-left-color: #111827;
}

/* Remove number input arrows */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Buttons */
.btn-primary { 
  @apply bg-blue-500 text-white px-5 py-2.5 rounded-lg font-medium text-sm transition-all border-none cursor-pointer inline-flex items-center gap-2;
}

.btn-primary:hover { 
  @apply bg-blue-600;
}

.btn-primary:disabled { 
  @apply opacity-60 cursor-not-allowed;
}

.btn-secondary { 
  @apply bg-gray-500 text-white px-5 py-2.5 rounded-lg font-medium text-sm transition-all border-none cursor-pointer inline-flex items-center gap-2;
}

.btn-secondary:hover { 
  @apply bg-gray-600;
}

.btn-outline { 
  @apply bg-transparent text-gray-700 px-5 py-2.5 rounded-lg font-medium text-sm transition-all border border-gray-300 cursor-pointer inline-flex items-center gap-2;
}

.btn-outline:hover { 
  @apply bg-gray-50 border-gray-400;
}

.btn-danger {
  @apply bg-red-500 text-white px-5 py-2.5 rounded-lg font-medium text-sm transition-all border-none cursor-pointer inline-flex items-center gap-2;
}

.btn-danger:hover {
  @apply bg-red-600;
}

/* Cards */
.card { 
  @apply bg-white rounded-xl shadow transition-all;
  overflow: hidden;
}

.card.overflow-visible {
  overflow: visible;
}

.card:hover { 
  @apply shadow-md;
}

.card-header { 
  @apply p-6 border-b border-gray-200 flex justify-between items-center;
}

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

/* Tables */
.data-table { 
  @apply w-full;
  border-collapse: separate;
  border-spacing: 0;
}

.data-table th { 
  @apply bg-gray-50 px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase border-b border-gray-200;
}

.data-table td { 
  @apply px-4 py-4 border-b border-gray-200 text-sm text-gray-600;
}

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

/* Badges */
.badge { 
  @apply inline-flex items-center px-3 py-1 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;
}

/* Navbar */
.navbar { 
  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); 
  @apply shadow sticky top-0 z-40;
}

.nav-item {
  @apply h-10 flex items-center;
}

.nav-link { 
  @apply text-white/90 px-4 py-2 leading-none rounded-lg transition-all flex items-center gap-2 cursor-pointer;
}

.nav-link:hover { 
  @apply bg-white/10 text-white;
}

.nav-link.active { 
  @apply bg-white/20 text-white font-semibold;
}

/* Footer */
.footer { 
  @apply bg-gray-800 text-gray-400 py-12 px-4 mt-auto;
}

.footer h3 { 
  @apply text-white font-semibold mb-4;
}

.footer a { 
  @apply text-gray-400 transition-colors;
}

.footer a:hover { 
  @apply text-white;
}

/* Animations */
.fade-enter-active, .fade-leave-active { 
  @apply transition-opacity duration-300;
}

.fade-enter-from, .fade-leave-to { 
  @apply opacity-0;
}

.slide-up { 
  animation: slideUp 0.3s ease-out; 
}

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

/* Loading Spinner */
.spinner {
  @apply border-4 border-gray-200 border-t-blue-500 rounded-full w-6 h-6;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Loading Overlay */
.loading-overlay {
  @apply fixed inset-0 bg-white/80 flex items-center justify-center z-50;
}