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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
/* Modern Salon Management App Custom Styles */

/* Custom gradient animations */
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gradient-animated {
  background-size: 200% 200%;
  animation: gradient-shift 6s ease infinite;
}

/* Enhanced card hover effects */
.card-hover-effect {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover-effect:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Custom scrollbar for tables */
.table-container::-webkit-scrollbar {
  height: 8px;
}

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

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

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

/* Loading state animations */
.loading-spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Pulse animation for skeleton loading */
.pulse-animation {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Enhanced button styles */
.btn-primary {
  @apply bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700;
  @apply text-white font-semibold py-3 px-6 rounded-lg shadow-lg;
  @apply transition-all duration-200 transform hover:scale-105;
}

.btn-secondary {
  @apply bg-white text-gray-700 border border-gray-300 hover:bg-gray-50;
  @apply font-semibold py-3 px-6 rounded-lg shadow-sm;
  @apply transition-all duration-200;
}

.btn-danger {
  @apply bg-gradient-to-r from-red-600 to-pink-600 hover:from-red-700 hover:to-pink-700;
  @apply text-white font-semibold py-3 px-6 rounded-lg shadow-lg;
  @apply transition-all duration-200 transform hover:scale-105;
}

/* Enhanced form styling */
.form-input {
  @apply w-full px-4 py-3 border border-gray-300 rounded-lg;
  @apply focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
  @apply transition-colors duration-200;
}

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

/* Status badges */
.badge-success {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  @apply bg-green-100 text-green-800;
}

.badge-warning {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  @apply bg-yellow-100 text-yellow-800;
}

.badge-danger {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  @apply bg-red-100 text-red-800;
}

.badge-info {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  @apply bg-blue-100 text-blue-800;
}

/* Navigation enhancements */
.nav-link-active {
  @apply bg-blue-700 text-white;
}

.nav-link-inactive {
  @apply text-blue-100 hover:bg-blue-700 hover:text-white;
}

/* Typography enhancements */
.text-gradient {
  @apply bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent;
}

/* Enhanced table styles */
.table-row-hover:hover {
  @apply bg-blue-50 transition-colors duration-150;
}

.table-cell-action {
  @apply text-blue-600 hover:text-blue-900 transition-colors duration-150;
}

/* Avatar styles */
.avatar-gradient-blue {
  @apply bg-gradient-to-r from-blue-400 to-indigo-500;
}

.avatar-gradient-green {
  @apply bg-gradient-to-r from-green-400 to-teal-500;
}

.avatar-gradient-purple {
  @apply bg-gradient-to-r from-purple-400 to-pink-500;
}

.avatar-gradient-amber {
  @apply bg-gradient-to-r from-amber-400 to-orange-500;
}

/* Card styles for consistent design */
.card-modern {
  @apply bg-white rounded-xl shadow-lg border border-gray-100 overflow-hidden;
}

.card-header {
  @apply px-6 py-4 border-b border-gray-200 bg-gray-50;
}

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

/* Mobile responsive enhancements */
@media (max-width: 768px) {
  .mobile-stack {
    @apply flex-col space-y-4;
  }
  
  .mobile-full-width {
    @apply w-full;
  }
  
  .mobile-hidden {
    @apply hidden;
  }
  
  .mobile-text-center {
    @apply text-center;
  }
}

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

/* Dark mode support (future enhancement) */
@media (prefers-color-scheme: dark) {
  .dark-mode-card {
    @apply bg-gray-800 text-white border-gray-700;
  }
  
  .dark-mode-text {
    @apply text-gray-100;
  }
  
  .dark-mode-muted {
    @apply text-gray-400;
  }
}

/* Line clamping utility */
.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;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */