@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
  .sidebar-container {
    @apply h-full relative;
  }

  .sidebar-backdrop {
    @apply fixed inset-0 bg-slate-900/30 backdrop-blur-sm z-40 
           hidden lg:hidden;
  }

  .sidebar-panel {
    @apply fixed inset-y-0 left-0 z-50 w-64 flex flex-col
           bg-white/80 dark:bg-slate-800/80 backdrop-blur-xl
           border-r border-slate-200/50 dark:border-slate-700/50
           transform -translate-x-full lg:translate-x-0
           transition-transform duration-300 ease-in-out
           h-[100dvh] overflow-hidden;

    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .sidebar-header {
    @apply flex-none border-b border-slate-200/50 
           dark:border-slate-700/50 p-4;
  }

  .sidebar-nav {
    @apply flex-1 overflow-y-auto overscroll-contain py-4 space-y-6 px-4
           scrollbar-thin scrollbar-track-transparent
           scrollbar-thumb-slate-300 dark:scrollbar-thumb-slate-600;
  }
}

@layer components {
  /* Kanban List Styles */
  .kanban-list {
    @apply transition-all duration-200;
  }

  .kanban-list:hover {
    @apply transform scale-[1.02];
  }

  .kanban-list.sortable-chosen {
    @apply transform scale-105 rotate-1 shadow-xl;
  }

  .kanban-list.sortable-ghost {
    @apply opacity-50 bg-slate-100 dark:bg-slate-700 
           border-2 border-dashed border-indigo-300 dark:border-indigo-600;
  }

  /* Task Drag Styles */
  .task-dragging {
    @apply opacity-60 bg-slate-50 dark:bg-slate-800 
           shadow-2xl border-2 border-indigo-500 transform scale-105 rotate-2;
  }

  .task-ghost {
    @apply opacity-30 bg-slate-100 dark:bg-slate-700 
           border-2 border-dashed border-indigo-300 dark:border-indigo-600;
  }

  .task-drag-preview {
    @apply transform scale-105 shadow-2xl border-2 border-indigo-400 
           ring-2 ring-indigo-500 ring-offset-2;
  }

  /* Drop zone styles */
  .drop-zone-active {
    @apply bg-indigo-50/50 border-2 border-dashed border-indigo-300 rounded-lg;
  }

  .drop-zone-active-dark {
    @apply bg-indigo-900/20 border-indigo-600;
  }

  /* Drag handle styles */
  .drag-handle {
    @apply cursor-grab hover:cursor-grabbing;
  }

  .task-choosing {
    @apply border-dashed border-slate-300 dark:border-slate-600;
  }

  .task-chosen {
    @apply ring-2 ring-indigo-500 ring-offset-2 dark:ring-offset-slate-900;
  }

  .is-dragging-over {
    @apply bg-slate-50/50 dark:bg-slate-800/50 rounded-lg 
           border-2 border-dashed border-indigo-500/50;
  }

   .btn-primary {
    @apply inline-flex items-center gap-2 px-4 py-2 text-sm font-medium
           rounded-lg transition-colors duration-200
           bg-indigo-600 text-white hover:bg-indigo-700 
           focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500
           dark:bg-indigo-500 dark:hover:bg-indigo-600 
           dark:focus:ring-offset-slate-900;
  }

  .btn-secondary {
    @apply inline-flex items-center gap-2 px-4 py-2 text-sm font-medium 
           rounded-lg border transition-colors duration-200
           bg-white text-slate-700 hover:bg-slate-50 
           border-slate-200 focus:ring-2 focus:ring-offset-2 
           focus:ring-slate-500
           dark:bg-slate-700 dark:text-slate-200 
           dark:hover:bg-slate-600 dark:border-slate-600 
           dark:focus:ring-offset-slate-900;
  }

  .btn-outline-danger {
    @apply inline-flex items-center gap-2 px-4 py-2 text-sm font-medium 
           rounded-lg border transition-colors duration-200
           bg-white text-red-600 hover:bg-red-50 
           border-red-200 hover:border-red-300
           focus:ring-2 focus:ring-offset-2 focus:ring-red-500
           dark:bg-transparent dark:text-red-400 
           dark:hover:bg-red-900/50 dark:border-red-700
           dark:hover:border-red-600
           dark:focus:ring-offset-slate-900;
  }

  .btn-outline-primary {
    @apply inline-flex items-center gap-2 px-4 py-2 text-sm font-medium 
           rounded-lg border transition-colors duration-200
           bg-white text-indigo-600 hover:bg-indigo-50 
           border-indigo-200 hover:border-indigo-300
           focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500
           dark:bg-transparent dark:text-indigo-400 
           dark:hover:bg-indigo-900/50 dark:border-indigo-700
           dark:hover:border-indigo-600
           dark:focus:ring-offset-slate-900;
  }

  .form-label {
    @apply block text-sm font-medium text-slate-700 dark:text-slate-200;
  }

  .form-input {
    @apply mt-1 block w-full rounded-md border-slate-300 shadow-sm 
           focus:border-primary-500 focus:ring-primary-500 
           dark:bg-slate-800 dark:border-slate-600 
           dark:text-slate-200 sm:text-sm;
  }

  .form-select {
    @apply mt-1 block w-full rounded-md border-slate-300 shadow-sm 
           focus:border-primary-500 focus:ring-primary-500 
           dark:bg-slate-800 dark:border-slate-600 
           dark:text-slate-200 sm:text-sm;
  }

}

.toast {
  @apply max-w-sm w-full bg-white dark:bg-slate-800 shadow-lg rounded-lg pointer-events-auto 
         ring-1 ring-black ring-opacity-5;
         
  &--success {
    @apply bg-green-50 dark:bg-green-900/50;
  }
  
  &--error {
    @apply bg-red-50 dark:bg-red-900/50;
  }
  
  &--info {
    @apply bg-blue-50 dark:bg-blue-900/50;
  }
}

.service-provider-card {
  @apply relative bg-white/50 dark:bg-slate-800/50 backdrop-blur-sm;
  @apply rounded-xl border border-slate-200/50 dark:border-slate-700/50;
  @apply hover:shadow-lg transition-all duration-200;
}

.service-provider-accent {
  @apply absolute -left-0.5 top-0 h-full w-1.5 rounded-l-xl;
  @apply opacity-50 group-hover:opacity-100 transition-opacity;
}

.appointment-card {
  --appointment-color: #4F46E5;
  border-left-color: var(--appointment-color);
}

.appointment-card.hover-active {
  border-color: var(--appointment-color);
}

.appointment-card {
  --appointment-color: #4F46E5;
}

.appointment-card {
  border-left-color: var(--appointment-color);
}

.appointment-card.appointment-hover {
  border-color: var(--appointment-color);
}

.appointment-card-handle {
  background-color: var(--appointment-color);
}

.kanban-card {
  --appointment-color: #4F46E5;
  border-left-color: var(--appointment-color);
  border-left-width: 4px;
}

.kanban-card:hover {
  border-color: var(--appointment-color);
}

.kanban-card-handle {
  background-color: var(--appointment-color);
}

.kanban-card.dragging {
  opacity: 0.5;
}

.strength-bar {
  width: var(--strength-width, 0%);
}

.strength-bar {
  width: 0%;
}

.strength-bar.strength-weak {
  width: 25%;
}

.strength-bar.strength-fair {
  width: 50%;
}

.strength-bar.strength-good {
  width: 75%;
}

.strength-bar.strength-strong {
  width: 100%;
}

/* Confetti Animation */
@keyframes confetti-fall {
  0% {
    transform: translateY(-100vh) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

/* List Celebration Animation */
@keyframes celebration-glow {
  0% {
    box-shadow: 0 0 5px rgba(34, 197, 94, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.8), 0 0 30px rgba(34, 197, 94, 0.6);
    transform: scale(1.02);
  }
  100% {
    box-shadow: 0 0 5px rgba(34, 197, 94, 0.5);
    transform: scale(1);
  }
}

/* Completed List Styling */
.list-completed {
  @apply ring-2 ring-green-500/50 bg-green-50/50 dark:bg-green-900/20;
}

.list-completed .list-header {
  @apply bg-green-100/80 dark:bg-green-900/30;
}

/* Custom scrollbar styles for enhanced modal experience */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgb(148 163 184) transparent;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgb(148 163 184), rgb(100 116 139));
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgb(100 116 139), rgb(71 85 105));
  background-clip: content-box;
}

/* Dark mode scrollbar */
.dark .custom-scrollbar {
  scrollbar-color: rgb(71 85 105) transparent;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgb(71 85 105), rgb(51 65 85));
  background-clip: content-box;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgb(51 65 85), rgb(30 41 59));
  background-clip: content-box;
}

@layer components {
  /* Swipeable Cards Styles */
  .scrollbar-hide {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
  }
  
  .scrollbar-hide::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
  }

  .swipeable-cards-container {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: 1.5rem; /* 24px to account for container padding */
    scroll-padding-right: 1.5rem; /* 24px to account for container padding */
  }

  .swipeable-card {
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  /* Responsive scroll padding */
  @media (min-width: 640px) {
    .swipeable-cards-container {
      scroll-padding-left: 2rem; /* 32px */
      scroll-padding-right: 2rem; /* 32px */
    }
  }

  /* Line clamp utilities for description text */
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }

  .line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }

  .line-clamp-4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
  }
}