/* shadcn-inspired Component Styles */

@layer components {
  .btn {
    @apply inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
    height: 2.5rem;
    padding: 0 1rem;
  }

  .btn-default {
    @apply bg-blue-600 text-white hover:bg-blue-700;
  }

  .btn-destructive {
    @apply bg-red-600 text-white hover:bg-red-700;
  }

  .btn-outline {
    @apply border border-gray-300 bg-white hover:bg-gray-50 hover:text-gray-900;
  }

  .btn-secondary {
    @apply bg-gray-100 text-gray-900 hover:bg-gray-200;
  }

  .btn-ghost {
    @apply hover:bg-gray-100 hover:text-gray-900;
  }

  .btn-link {
    @apply text-blue-600 underline-offset-4 hover:underline;
  }

  .btn-sm {
    @apply h-9 rounded-md px-3;
  }

  .btn-lg {
    @apply h-11 rounded-md px-8;
  }

  .card {
    @apply rounded-lg border border-gray-200 bg-white shadow;
  }

  .input {
    @apply flex h-10 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
  }

  .badge {
    @apply inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors;
  }

  .badge-default {
    @apply border-transparent bg-blue-600 text-white hover:bg-blue-700;
  }

  .badge-secondary {
    @apply border-transparent bg-gray-100 text-gray-900 hover:bg-gray-200;
  }

  .badge-destructive {
    @apply border-transparent bg-red-600 text-white hover:bg-red-700;
  }

  .badge-outline {
    @apply border-gray-300 text-gray-900;
  }

  /* Journey Mapping Responsive Styles */
  .journey-map-container {
    /* Enable smooth scrolling for mobile touch */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  /* Mobile touch improvements */
  @media (max-width: 768px) {
    .journey-map-container {
      /* Improve touch scrolling performance */
      will-change: scroll-position;
      scroll-snap-type: x proximity;
    }
    
    .journey-stage-card {
      scroll-snap-align: start;
    }
    
    /* Improve touch targets */
    .btn {
      min-height: 44px;
      padding: 0.75rem 1rem;
    }
    
    .btn-sm {
      min-height: 40px;
      padding: 0.5rem 0.875rem;
    }
  }

  /* Draggable elements styling */
  .draggable-stage {
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .draggable-stage:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .draggable-stage.dragging {
    opacity: 0.6;
    transform: rotate(2deg);
    z-index: 1000;
  }

  .drop-indicator {
    border: 2px dashed #3b82f6;
    background-color: rgba(59, 130, 246, 0.1);
  }

  /* ===== ENHANCED BUTTON SYSTEM ===== */
  .btn-xs { @apply h-7 px-2 text-xs; }
  .btn-xl { @apply h-12 px-8 text-base; }

  .btn-primary { @apply bg-blue-600 text-white shadow-sm hover:bg-blue-500 focus-visible:ring-blue-600; }
  .btn-success { @apply bg-green-600 text-white shadow-sm hover:bg-green-500 focus-visible:ring-green-600; }
  .btn-warning { @apply bg-yellow-600 text-white shadow-sm hover:bg-yellow-500 focus-visible:ring-yellow-600; }

  /* Button Loading State */
  .btn-loading {
    @apply opacity-75 cursor-not-allowed;
  }
  
  .btn-loading::before {
    content: '';
    @apply inline-block w-4 h-4 mr-2 border-2 border-current border-r-transparent rounded-full animate-spin;
  }

  /* ===== ENHANCED FORM COMPONENTS ===== */
  .form-group { @apply space-y-2; }
  .form-label { @apply block text-sm font-medium text-gray-700; }
  .form-label-required::after {
    content: '*';
    @apply text-red-500 ml-1;
  }

  .input-error {
    @apply border-red-300 text-red-900 placeholder-red-300 focus:border-red-500 focus:ring-red-500;
  }
  
  .input-success {
    @apply border-green-300 focus:border-green-500 focus:ring-green-500;
  }

  /* Input Groups */
  .input-group { @apply relative flex items-stretch; }
  .input-group .input { @apply rounded-none first:rounded-l-md last:rounded-r-md; }
  .input-addon {
    @apply inline-flex items-center px-3 border border-gray-300 bg-gray-50 text-gray-500 text-sm;
  }
  .input-addon:first-child { @apply rounded-l-md border-r-0; }
  .input-addon:last-child { @apply rounded-r-md border-l-0; }

  /* Floating Labels */
  .floating-label { @apply relative; }
  .floating-label input { @apply peer placeholder-transparent; }
  .floating-label label {
    @apply absolute left-3 -top-2.5 bg-white px-1 text-sm text-gray-600 transition-all peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-2 peer-focus:-top-2.5 peer-focus:text-sm peer-focus:text-blue-600;
  }

  /* ===== ENHANCED CARD COMPONENTS ===== */
  .card-elevated {
    @apply bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200;
  }
  
  .card-interactive {
    @apply bg-white rounded-lg border border-gray-200 shadow-sm hover:shadow-md hover:border-gray-300 transition-all duration-200 cursor-pointer;
  }

  .card-header { @apply px-6 py-4 border-b border-gray-200; }
  .card-body { @apply px-6 py-4; }
  .card-footer { @apply px-6 py-4 border-t border-gray-200 bg-gray-50; }
  .card-title { @apply text-lg font-semibold text-gray-900; }
  .card-subtitle { @apply text-sm text-gray-600 mt-1; }

  /* ===== ENHANCED STATUS & BADGE SYSTEM ===== */
  .badge-success { @apply bg-green-100 text-green-800; }
  .badge-warning { @apply bg-yellow-100 text-yellow-800; }
  .badge-error { @apply bg-red-100 text-red-800; }

  /* Status Indicators */
  .status-indicator { @apply inline-flex items-center; }
  .status-dot { @apply w-2 h-2 rounded-full mr-2 flex-shrink-0; }
  .status-online .status-dot { @apply bg-green-500; }
  .status-offline .status-dot { @apply bg-gray-400; }
  .status-busy .status-dot { @apply bg-red-500; }
  .status-away .status-dot { @apply bg-yellow-500; }

  /* ===== TABLE COMPONENTS ===== */
  .table { @apply min-w-full divide-y divide-gray-200; }
  .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; }
  .table tbody tr { @apply hover:bg-gray-50 transition-colors duration-150; }
  .table-sortable th {
    @apply cursor-pointer hover:bg-gray-100 transition-colors duration-150;
  }
  .table-sortable th:hover { @apply text-gray-700; }

  /* ===== MODAL SYSTEM ===== */
  .modal-backdrop {
    @apply fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity z-40;
  }
  .modal { @apply fixed inset-0 z-50 overflow-y-auto; }
  .modal-container {
    @apply flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0;
  }
  .modal-panel {
    @apply relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full;
  }
  .modal-sm { @apply sm:max-w-sm; }
  .modal-md { @apply sm:max-w-lg; }
  .modal-lg { @apply sm:max-w-2xl; }
  .modal-xl { @apply sm:max-w-4xl; }
  .modal-header { @apply px-6 py-4 border-b border-gray-200; }
  .modal-body { @apply px-6 py-4; }
  .modal-footer {
    @apply px-6 py-4 border-t border-gray-200 bg-gray-50 flex justify-end space-x-3;
  }

  /* ===== BREADCRUMB NAVIGATION ===== */
  .breadcrumb { @apply flex items-center space-x-2 text-sm text-gray-500; }
  .breadcrumb-item { @apply flex items-center; }
  .breadcrumb-item:not(:first-child)::before {
    content: '/';
    @apply mx-2 text-gray-300;
  }
  .breadcrumb-link {
    @apply text-gray-500 hover:text-gray-700 transition-colors duration-150;
  }
  .breadcrumb-current { @apply text-gray-900 font-medium; }

  /* ===== TAB NAVIGATION ===== */
  .tabs { @apply border-b border-gray-200; }
  .tabs-list { @apply flex space-x-8; }
  .tab {
    @apply border-b-2 border-transparent py-2 px-1 text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 transition-all duration-150;
  }
  .tab-active { @apply border-blue-500 text-blue-600; }

  /* ===== TIMELINE COMPONENTS ===== */
  .timeline { @apply flow-root; }
  .timeline-item { @apply relative pb-8; }
  .timeline-item:not(:last-child)::before {
    content: '';
    @apply absolute top-5 left-5 -ml-px h-full w-0.5 bg-gray-200;
  }
  .timeline-marker {
    @apply relative flex items-center justify-center w-10 h-10 rounded-full ring-8 ring-white;
  }
  .timeline-content { @apply min-w-0 flex-1 ml-4; }

  /* ===== LIST COMPONENTS ===== */
  .list-group { @apply divide-y divide-gray-200 border border-gray-200 rounded-lg; }
  .list-group-item { @apply px-6 py-4 hover:bg-gray-50 transition-colors duration-150; }
  .list-group-item-action { @apply cursor-pointer; }

  /* ===== EMPTY STATES ===== */
  .empty-state { @apply text-center py-12; }
  .empty-state-icon { @apply mx-auto h-12 w-12 text-gray-300; }
  .empty-state-title { @apply mt-4 text-lg font-medium text-gray-900; }
  .empty-state-description { @apply mt-2 text-sm text-gray-500; }

  /* ===== LOADING STATES ===== */
  .loading-skeleton { @apply animate-pulse bg-gray-200 rounded; }

  /* ===== UTILITY CLASSES ===== */
  .fade-in { @apply transition-opacity duration-300; }
  .slide-up { @apply transform transition-transform duration-300 translate-y-full; }
  .slide-up-active { @apply translate-y-0; }
  .scale-in { @apply transform transition-transform duration-200 scale-95; }
  .scale-in-active { @apply scale-100; }
  .focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
  }
  .focus-ring-inset {
    @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-inset;
  }
}