/* Enhanced Timeline Planner Styles */

/* Smooth animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(100px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Utility classes */
.animate-fade-in {
  animation: fadeIn 0.5s ease-out;
}

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

.animate-scale-in {
  animation: scaleIn 0.3s ease-out;
}

.animate-slide-in-right {
  animation: slideInRight 0.3s ease-out;
}

/* Beautiful Tile-Style Task Grid */
.tasks-grid {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
}

.task-tile {
  @apply relative bg-gradient-to-br from-white via-gray-50 to-blue-50 dark:from-gray-800 dark:via-gray-750 dark:to-gray-700 border border-gray-200 dark:border-gray-600 rounded-2xl p-6 hover:shadow-2xl hover:shadow-blue-500/20 dark:hover:shadow-blue-500/30 hover:border-blue-300 dark:hover:border-blue-500 transition-all duration-300 group overflow-hidden transform hover:-translate-y-2 hover:scale-105;
}

.task-tile::before {
  content: '';
  @apply absolute inset-0 bg-gradient-to-br opacity-0 group-hover:opacity-10 transition-opacity duration-300 rounded-2xl;
}

.task-tile.priority-high::before {
  @apply from-red-500 to-pink-500;
}

.task-tile.priority-medium::before {
  @apply from-yellow-500 to-orange-500;
}

.task-tile.priority-low::before {
  @apply from-blue-500 to-indigo-500;
}

.task-tile::after {
  content: '';
  @apply absolute top-0 left-0 w-full h-1 bg-gradient-to-r opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-t-2xl;
}

.task-tile.priority-high::after {
  @apply from-red-500 to-pink-500;
}

.task-tile.priority-medium::after {
  @apply from-yellow-500 to-orange-500;
}

.task-tile.priority-low::after {
  @apply from-blue-500 to-indigo-500;
}

.task-tile-header {
  @apply flex items-start justify-between mb-4;
}

.task-tile-title {
  @apply font-bold text-gray-900 dark:text-white text-lg mb-3 leading-tight group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-200;
}

.task-tile-meta {
  @apply space-y-3 mb-4;
}

.task-tile-meta-item {
  @apply flex items-center gap-3 text-sm;
}

.task-tile-meta-icon {
  @apply w-8 h-8 rounded-full flex items-center justify-center text-white text-xs shadow-md;
}

.task-tile-meta-icon.time {
  @apply bg-gradient-to-br from-blue-500 to-indigo-600;
}

.task-tile-meta-icon.user {
  @apply bg-gradient-to-br from-green-500 to-emerald-600;
}

.task-tile-meta-icon.timezone {
  @apply bg-gradient-to-br from-purple-500 to-violet-600;
}

.timeline-tile-timezone {
  @apply flex items-center text-sm font-medium bg-white/15 rounded-full px-3 py-1 backdrop-blur-sm mt-2;
}

.timeline-tile-timezone i {
  @apply mr-2 text-white/90;
}

.task-tile-meta-text {
  @apply text-gray-700 dark:text-gray-300 font-medium;
}

.task-tile-actions {
  @apply absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-all duration-300 flex space-x-2 transform translate-y-2 group-hover:translate-y-0;
}

.task-tile-description {
  @apply text-gray-600 dark:text-gray-400 text-sm leading-relaxed bg-white/50 dark:bg-gray-800/50 rounded-xl p-3 mt-4 border border-gray-200/50 dark:border-gray-600/50 backdrop-blur-sm;
}

.task-tile-priority {
  @apply absolute bottom-4 right-4 w-3 h-3 rounded-full shadow-lg;
}

.task-tile-priority.high {
  @apply bg-gradient-to-br from-red-500 to-pink-500;
}

.task-tile-priority.medium {
  @apply bg-gradient-to-br from-yellow-500 to-orange-500;
}

.task-tile-priority.low {
  @apply bg-gradient-to-br from-blue-500 to-indigo-500;
}

/* Enhanced Priority badges */
.priority-badge {
  @apply inline-flex items-center px-3 py-1.5 rounded-full text-xs font-bold shadow-sm transition-all duration-200 hover:shadow-md transform hover:scale-105;
}

.priority-high {
  @apply bg-gradient-to-r from-red-100 to-pink-100 text-red-800 dark:from-red-900/30 dark:to-pink-900/30 dark:text-red-300 border border-red-200 dark:border-red-800 shadow-red-200/50 dark:shadow-red-900/20;
}

.priority-medium {
  @apply bg-gradient-to-r from-yellow-100 to-orange-100 text-yellow-800 dark:from-yellow-900/30 dark:to-orange-900/30 dark:text-yellow-300 border border-yellow-200 dark:border-yellow-800 shadow-yellow-200/50 dark:shadow-yellow-900/20;
}

.priority-low {
  @apply bg-gradient-to-r from-blue-100 to-indigo-100 text-blue-800 dark:from-blue-900/30 dark:to-indigo-900/30 dark:text-blue-300 border border-blue-200 dark:border-blue-800 shadow-blue-200/50 dark:shadow-blue-900/20;
}

/* Enhanced Beautiful Tile-Style Timeline Grid */
.timeline-grid {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8;
}

.timeline-tile {
  @apply relative cursor-move shadow-xl hover:shadow-2xl transition-all duration-500 min-h-48 group overflow-hidden transform hover:-translate-y-4 hover:scale-105 rounded-3xl;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
}

.timeline-tile::before {
  content: '';
  @apply absolute inset-0 opacity-95 rounded-3xl;
  background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-middle) 50%, var(--gradient-end) 100%);
  transition: all 0.5s ease;
}

.timeline-tile.priority-high {
  --gradient-start: #ef4444;
  --gradient-middle: #f97316;
  --gradient-end: #ec4899;
}

.timeline-tile.priority-medium {
  --gradient-start: #f59e0b;
  --gradient-middle: #f97316;
  --gradient-end: #eab308;
}

.timeline-tile.priority-low {
  --gradient-start: #3b82f6;
  --gradient-middle: #6366f1;
  --gradient-end: #8b5cf6;
}

.timeline-tile::after {
  content: '';
  @apply absolute inset-0 opacity-0 group-hover:opacity-20 transition-opacity duration-500 rounded-3xl;
  background: radial-gradient(circle at center, rgba(255,255,255,0.3) 0%, transparent 70%);
}

.timeline-tile::after {
  content: '';
  @apply absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-white/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-2xl;
}

.timeline-tile-content {
  @apply relative z-10 p-6 h-full flex flex-col justify-between text-white;
}

.timeline-tile-header {
  @apply flex items-start justify-between mb-4;
}

.timeline-tile-title {
  @apply font-bold text-lg leading-tight mb-2 group-hover:text-white/90 transition-colors duration-200;
}

.timeline-tile-time {
  @apply flex items-center text-sm font-medium mb-2 bg-white/20 rounded-full px-3 py-1 backdrop-blur-sm;
}

.timeline-tile-time i {
  @apply mr-2 text-white/90;
}

.timeline-tile-assignee {
  @apply flex items-center text-sm font-medium bg-white/15 rounded-full px-3 py-1 backdrop-blur-sm;
}

.timeline-tile-assignee i {
  @apply mr-2 text-white/90;
}

.timeline-tile-actions {
  @apply absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-all duration-300 flex space-x-2 transform translate-y-2 group-hover:translate-y-0;
}

.timeline-tile-actions button {
  @apply bg-white/30 hover:bg-white/50 border-none text-white p-2.5 rounded-xl text-sm transition-all duration-200 backdrop-blur-sm shadow-lg hover:shadow-xl transform hover:scale-110;
}

.timeline-tile-priority {
  @apply absolute top-4 left-4 w-4 h-4 rounded-full shadow-lg border-2 border-white/50;
}

.timeline-tile-priority.high {
  @apply bg-white/80;
}

.timeline-tile-priority.medium {
  @apply bg-white/70;
}

.timeline-tile-priority.low {
  @apply bg-white/60;
}

.timeline-tile-footer {
  @apply mt-auto pt-4 border-t border-white/20;
}

/* Timeline container enhancements */
.timeline-container {
  @apply relative;
}

.timeline-container::before {
  content: '';
  @apply absolute inset-0 bg-gradient-to-br from-blue-50/50 via-indigo-50/30 to-purple-50/50 dark:from-blue-900/10 dark:via-indigo-900/5 dark:to-purple-900/10 rounded-xl -z-10;
}

/* Enhanced Contact items */
.contact-item {
  @apply flex items-center justify-between p-4 bg-gradient-to-r from-gray-50 to-white dark:from-gray-700 dark:to-gray-600 border border-gray-200 dark:border-gray-600 rounded-xl hover:shadow-lg hover:shadow-blue-500/10 dark:hover:shadow-blue-500/20 hover:border-blue-300 dark:hover:border-blue-600 transition-all duration-300 group transform hover:-translate-y-1;
}

.contact-info {
  @apply flex-1;
}

.contact-name {
  @apply font-semibold text-gray-900 dark:text-white text-base mb-1;
}

.contact-details {
  @apply text-sm text-gray-600 dark:text-gray-300;
}

/* Dark mode text fixes for all content */
.dark .task-item,
.dark .vendor-item,
.dark .guest-item {
  @apply text-gray-200;
}

.dark .task-item h3,
.dark .vendor-item h3,
.dark .guest-item h3 {
  @apply text-white;
}

.dark .task-item p,
.dark .vendor-item p,
.dark .guest-item p,
.dark .task-item span,
.dark .vendor-item span,
.dark .guest-item span {
  @apply text-gray-300;
}

.dark .task-meta,
.dark .vendor-meta,
.dark .guest-meta {
  @apply text-gray-300;
}

.dark .task-description,
.dark .vendor-description,
.dark .guest-description {
  @apply text-gray-400;
}

/* Ensure all text elements in dark mode are visible */
.dark .text-gray-900 {
  @apply text-white;
}

.dark .text-gray-800 {
  @apply text-gray-200;
}

.dark .text-gray-700 {
  @apply text-gray-300;
}

.dark .text-gray-600 {
  @apply text-gray-400;
}

.dark .text-gray-500 {
  @apply text-gray-500;
}

/* Export cards */
.export-card {
  @apply text-center cursor-pointer;
}

/* Modal styles */
.modal {
  @apply fixed inset-0 z-50 flex items-center justify-center p-4;
}

.modal-backdrop {
  @apply absolute inset-0 bg-black/60 backdrop-blur-sm;
}

.modal-content {
  @apply relative bg-white dark:bg-gray-800 rounded-2xl shadow-2xl max-w-lg w-full max-h-[90vh] overflow-hidden animate-scale-in border border-gray-200 dark:border-gray-700;
}

/* Modern Toast Notifications with Enhanced Design */
.toast-container {
  @apply fixed top-2 right-2 z-50 space-y-1 max-w-xs;
}

.toast {
  @apply relative flex items-center shadow-sm font-medium backdrop-blur-sm border transform transition-all duration-150 hover:scale-[1.01] cursor-pointer;
  border-radius: 6px;
  padding: 4px 8px;
  animation: toastFadeSlideIn 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  min-height: 28px;
  overflow: hidden;
  opacity: 0;
  animation-fill-mode: forwards;
}

.toast.removing {
  animation: toastFadeSlideOut 0.3s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}

.toast-content {
  @apply flex items-center flex-1;
  gap: 4px;
  padding: 0;
}

.toast-icon-wrapper {
  @apply flex-shrink-0 w-4 h-4 flex items-center justify-center relative overflow-hidden;
  border-radius: 4px;
}

.toast-icon-wrapper::before {
  content: '';
  @apply absolute inset-0 opacity-20;
  border-radius: 4px;
}

.toast-icon {
  @apply w-2.5 h-2.5 relative z-10;
}

.toast-text {
  @apply flex-1 min-w-0;
}

.toast-message {
  @apply block text-xs font-medium leading-tight;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.toast-timestamp {
  @apply hidden;
}

.toast-close {
  @apply flex-shrink-0 ml-1 p-0.5 hover:bg-white/20 dark:hover:bg-black/20 transition-all duration-200 w-4 h-4 flex items-center justify-center group;
  border-radius: 4px;
}

.toast-close:hover {
  @apply scale-110 rotate-90;
}

.toast-close i {
  @apply text-base transition-transform duration-300 group-hover:scale-110;
}

.toast-progress {
  @apply absolute bottom-0 left-0 h-2 transition-all duration-100 ease-linear;
  border-radius: 0 0 32px 32px;
  background: linear-gradient(90deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.4) 100%);
}

/* Success Toast - Fresh Green Theme */
.toast-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: white;
  box-shadow: 
    0 20px 40px rgba(16, 185, 129, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.toast-success .toast-icon-wrapper {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.1) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.toast-success .toast-icon-wrapper::before {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
}

/* Error Toast - Vibrant Red Theme */
.toast-error {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: white;
  box-shadow: 
    0 20px 40px rgba(239, 68, 68, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.toast-error .toast-icon-wrapper {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.1) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.toast-error .toast-icon-wrapper::before {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
}

/* Warning Toast - Warm Orange Theme */
.toast-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: white;
  box-shadow: 
    0 20px 40px rgba(245, 158, 11, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.toast-warning .toast-icon-wrapper {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.1) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.toast-warning .toast-icon-wrapper::before {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
}

/* Info Toast - Cool Blue Theme */
.toast-info {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: white;
  box-shadow: 
    0 20px 40px rgba(59, 130, 246, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.toast-info .toast-icon-wrapper {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.1) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.toast-info .toast-icon-wrapper::before {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
}

/* Enhanced Animations */
@keyframes toastFadeSlideIn {
  0% {
    opacity: 0;
    transform: translateX(100%) translateY(-10px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }
}

@keyframes toastFadeSlideOut {
  0% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(100%) translateY(-5px) scale(0.95);
  }
}

@keyframes toastSlideIn {
  0% {
    opacity: 0;
    transform: translateX(100%) translateY(-20px) scale(0.8) rotate(5deg);
  }
  50% {
    opacity: 0.8;
    transform: translateX(-10px) translateY(0) scale(1.05) rotate(-1deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1) rotate(0deg);
  }
}

@keyframes toastSlideOut {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateX(100%) scale(0.8) rotate(3deg);
  }
}

@keyframes toastIconPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

@keyframes toastIconGlow {
  0% {
    opacity: 0.2;
    transform: scale(1);
  }
  100% {
    opacity: 0.4;
    transform: scale(1.2);
  }
}

/* Dark Mode Enhancements */
.dark .toast {
  border-color: rgba(255, 255, 255, 0.1);
}

.dark .toast-success {
  box-shadow: 
    0 20px 40px rgba(16, 185, 129, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

.dark .toast-error {
  box-shadow: 
    0 20px 40px rgba(239, 68, 68, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

.dark .toast-warning {
  box-shadow: 
    0 20px 40px rgba(245, 158, 11, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

.dark .toast-info {
  box-shadow: 
    0 20px 40px rgba(59, 130, 246, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

/* Responsive Design */
@media (max-width: 640px) {
  .toast-container {
    @apply top-4 right-4 left-4 max-w-none;
  }
  
  .toast {
    @apply p-3;
    min-height: 48px;
  }
  
  .toast-icon-wrapper {
    @apply w-7 h-7;
  }
  
  .toast-icon {
    @apply w-3.5 h-3.5;
  }
  
  .toast-message {
    @apply text-xs;
  }
  
  .toast-timestamp {
    @apply text-xs;
  }
}

/* Enhanced Sortable/Drag & Drop styles */
.sortable-ghost {
  opacity: 0.4 !important;
  background: rgba(59, 130, 246, 0.1) !important;
  border: 2px dashed #3b82f6 !important;
  border-radius: 12px !important;
  transform: none !important;
}

.sortable-chosen {
  opacity: 0.8 !important;
  transform: scale(1.02) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
  z-index: 1000 !important;
  cursor: grabbing !important;
}

.sortable-drag {
  opacity: 0.8 !important;
  transform: scale(1.02) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
  z-index: 1000 !important;
}

.sortable-fallback {
  opacity: 0.8 !important;
  background: rgba(59, 130, 246, 0.1) !important;
  border: 2px solid #3b82f6 !important;
  border-radius: 12px !important;
  cursor: grabbing !important;
}

/* Dragging state */
.dragging {
  cursor: grabbing !important;
  user-select: none !important;
  opacity: 0.8 !important;
  transform: scale(1.02) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
  z-index: 1000 !important;
}

/* Empty states */
.empty-state {
  @apply flex flex-col items-center justify-center py-16 text-center;
}

.empty-state i {
  @apply text-5xl text-gray-400 dark:text-gray-500 mb-4;
}

.empty-state h3 {
  @apply text-xl font-semibold text-gray-900 dark:text-white mb-2;
}

.empty-state p {
  @apply text-gray-600 dark:text-gray-400 text-lg;
}

/* Button styles */
.btn-primary {
  @apply inline-flex items-center px-4 py-2.5 text-sm font-medium text-white bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-200 transform hover:-translate-y-0.5;
}

.btn-secondary {
  @apply inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm hover:shadow-md transition-all duration-200;
}

.btn-danger {
  @apply inline-flex items-center px-3 py-1.5 text-xs font-medium text-white bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-200;
}

/* Focus styles for accessibility */
.focus-visible:focus {
  @apply outline-none ring-2 ring-blue-500 ring-offset-2 dark:ring-offset-gray-800;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  @apply w-2;
}

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

::-webkit-scrollbar-thumb {
  @apply bg-gray-300 dark:bg-gray-600 rounded-full hover:bg-gray-400 dark:hover:bg-gray-500;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .timeline-vertical {
    @apply grid-cols-1;
  }
  
  .task-meta {
    @apply flex-col items-start gap-2;
  }
  
  .modal-content {
    @apply mx-4;
  }
  
  .timeline-item {
    @apply min-h-20;
  }
  
  .task-actions {
    @apply opacity-100;
  }
  
  .timeline-item .task-actions {
    @apply opacity-100;
  }
}

/* Print styles */
@media print {
  body {
    @apply bg-white text-black;
  }
  
  .no-print {
    @apply hidden;
  }
  
  .timeline-item {
    @apply break-inside-avoid mb-2 bg-gray-100 text-black;
  }
  
  .task-item {
    @apply break-inside-avoid mb-4 bg-white border border-gray-300;
  }
}

/* Loading states */
.loading {
  @apply relative overflow-hidden;
}

.loading::after {
  content: '';
  @apply absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent animate-pulse;
}

/* Hover effects for interactive elements */
.template-btn:hover {
  @apply transform -translate-y-1;
}

.export-card:hover {
  @apply transform -translate-y-1;
}

/* Enhanced gradients */
.gradient-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

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

/* Glass morphism effect */
.glass {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark .glass {
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}/* Enhanced 
Timeline Views */
.timeline-list {
  max-width: none;
}

.timeline-list-item {
  position: relative;
}

.timeline-step-number {
  flex-shrink: 0;
}

/* Enhanced Gantt Chart Styles */
.timeline-gantt {
  @apply bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-lg;
  background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,250,252,0.9) 100%);
}

.dark .timeline-gantt {
  background: linear-gradient(135deg, rgba(31,41,55,0.9) 0%, rgba(17,24,39,0.9) 100%);
}

.gantt-header {
  @apply bg-gradient-to-r from-gray-50 to-blue-50 dark:from-gray-700 dark:to-gray-600 border-b-2 border-gray-200 dark:border-gray-600 p-4 rounded-t-xl;
  backdrop-filter: blur(10px);
}

.gantt-time-scale {
  @apply font-mono text-xs font-semibold text-gray-600 dark:text-gray-300 bg-white/50 dark:bg-gray-800/50 px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-600;
  backdrop-filter: blur(5px);
}

.gantt-row {
  @apply border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50/50 dark:hover:bg-gray-700/30 transition-all duration-200;
}

.gantt-row:nth-child(even) {
  @apply bg-gray-25 dark:bg-gray-800/20;
}

.gantt-task-label {
  @apply flex-shrink-0 border-r-2 border-gray-200 dark:border-gray-600 bg-gradient-to-r from-white to-gray-50 dark:from-gray-800 dark:to-gray-700 p-4 font-medium text-gray-800 dark:text-gray-200;
  backdrop-filter: blur(5px);
}

.gantt-timeline {
  @apply relative bg-gradient-to-r from-gray-50/30 to-blue-50/30 dark:from-gray-800/30 dark:to-gray-700/30;
}

.gantt-bar {
  @apply rounded-lg shadow-lg transition-all duration-300 cursor-pointer border border-white/20;
  backdrop-filter: blur(10px);
}

.gantt-bar:hover {
  @apply transform -translate-y-1 scale-105 shadow-xl;
}

.gantt-bar.priority-high {
  @apply bg-gradient-to-r from-red-500 via-pink-500 to-red-600 text-white;
  box-shadow: 0 4px 20px rgba(239, 68, 68, 0.4);
}

.gantt-bar.priority-medium {
  @apply bg-gradient-to-r from-yellow-500 via-orange-500 to-yellow-600 text-white;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.4);
}

.gantt-bar.priority-low {
  @apply bg-gradient-to-r from-blue-500 via-indigo-500 to-blue-600 text-white;
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
}

.dark .gantt-bar.priority-high {
  box-shadow: 0 4px 20px rgba(239, 68, 68, 0.6);
}

.dark .gantt-bar.priority-medium {
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.6);
}

.dark .gantt-bar.priority-low {
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.6);
}

.gantt-bar-content {
  @apply overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2 font-medium text-sm;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.gantt-time-grid {
  @apply absolute inset-0 pointer-events-none;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(156, 163, 175, 0.1) 0px,
    rgba(156, 163, 175, 0.1) 1px,
    transparent 1px,
    transparent 60px
  );
}

.dark .gantt-time-grid {
  background-image: repeating-linear-gradient(
    90deg,
    rgba(75, 85, 99, 0.2) 0px,
    rgba(75, 85, 99, 0.2) 1px,
    transparent 1px,
    transparent 60px
  );
}

/* Options Menu Styles */
.option-btn {
  text-align: left;
}

.option-btn:hover {
  transform: translateX(4px);
}

/* Timeline Container Responsive */
@media (max-width: 768px) {
  .gantt-task-label {
    @apply w-32 text-xs;
  }
  
  .gantt-bar-content {
    @apply text-xs px-1;
  }
  
  .timeline-grid {
    @apply grid-cols-1 md:grid-cols-2;
  }
}

/* Enhanced Priority Indicators */
.priority-indicator {
  @apply w-3 h-3 rounded-full;
}

.priority-indicator.high {
  @apply bg-red-500 shadow-red-500/50;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

.priority-indicator.medium {
  @apply bg-yellow-500 shadow-yellow-500/50;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

.priority-indicator.low {
  @apply bg-blue-500 shadow-blue-500/50;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Timeline View Transitions */
.timeline-container {
  transition: all 0.3s ease;
}

.timeline-view-transition {
  opacity: 0;
  transform: translateY(20px);
  animation: viewTransition 0.4s ease forwards;
}

@keyframes viewTransition {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Enhanced Task Tiles for Timeline */
.timeline-tile-content {
  position: relative;
  z-index: 10;
}

.timeline-tile::before {
  transition: opacity 0.3s ease;
}

.timeline-tile:hover::before {
  opacity: 0.95;
}

/* Improved Contact Items */
.contact-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.dark .contact-item:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Loading States for Timeline */
.timeline-loading {
  @apply flex items-center justify-center py-16;
}

.timeline-loading::after {
  content: '';
  @apply w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin;
}

/* Enhanced Empty States */
.empty-state {
  @apply py-20;
}

.empty-state i {
  @apply text-6xl mb-6;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Accessibility Improvements */
.focus-visible:focus {
  @apply outline-none ring-2 ring-blue-500 ring-offset-2 dark:ring-offset-gray-800;
}

button:focus-visible {
  @apply outline-none ring-2 ring-blue-500 ring-offset-2 dark:ring-offset-gray-800;
}

/* Print Styles for Timeline */
@media print {
  .timeline-gantt {
    @apply bg-white text-black;
  }
  
  .gantt-bar {
    @apply bg-gray-400 text-black;
  }
  
  .timeline-tile {
    @apply bg-white border border-gray-300 text-black;
  }
  
  .timeline-list-item {
    @apply bg-white border border-gray-300 text-black;
  }
}/* Enhan
ced Dark Mode Toggle Styles */
.theme-toggle-slider {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#themeToggle:hover .theme-toggle-slider {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#themeToggle:active .theme-toggle-slider {
  transform: scale(0.95);
}

.dark #themeToggle:active .theme-toggle-slider {
  transform: scale(0.95) translateX(2.5rem);
}

/* Enhanced Timeline Grid with Better Visual Effects */
.timeline-tile {
  position: relative;
  overflow: hidden;
}

.timeline-tile::before {
  z-index: 1;
}

.timeline-tile-content {
  position: relative;
  z-index: 2;
}

/* Floating Animation for Timeline Tiles */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.timeline-tile:hover {
  animation: float 2s ease-in-out infinite;
}

/* Glowing Effect for High Priority Items */
.timeline-tile.priority-high::before {
  box-shadow: 0 0 30px rgba(239, 68, 68, 0.4);
}

.timeline-tile.priority-medium::before {
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.3);
}

.timeline-tile.priority-low::before {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

/* Enhanced Timeline Tile Content */
.timeline-tile-content {
  backdrop-filter: blur(5px);
}

.timeline-tile-time,
.timeline-tile-assignee {
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Pulse Effect for Priority Indicators */
@keyframes pulse-high {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
}

@keyframes pulse-medium {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); }
}

@keyframes pulse-low {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
}

.timeline-tile-priority.high {
  animation: pulse-high 2s infinite;
}

.timeline-tile-priority.medium {
  animation: pulse-medium 2s infinite;
}

.timeline-tile-priority.low {
  animation: pulse-low 2s infinite;
}

/* Enhanced Modal Animations */
.modal.show {
  animation: modalShow 0.3s ease-out;
}

@keyframes modalShow {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-50px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Improved Button Hover Effects */
button {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

button:hover {
  transform: translateY(-1px);
}

button:active {
  transform: translateY(0);
}

/* Enhanced Focus States */
*:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  border-radius: 4px;
}/* To
ur Guide Styles */
.tour-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tour-overlay.active {
  pointer-events: all;
  opacity: 1;
}

.tour-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.tour-highlight {
  position: absolute;
  border: 4px solid #3b82f6;
  border-radius: 16px;
  box-shadow: 
    0 0 0 9999px rgba(0, 0, 0, 0.75),
    0 0 30px rgba(59, 130, 246, 0.6),
    inset 0 0 0 2px rgba(255, 255, 255, 0.2);
  background: transparent;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 10000;
}

.tour-highlight::before {
  content: '';
  position: absolute;
  inset: -8px;
  border: 2px solid rgba(59, 130, 246, 0.3);
  border-radius: 20px;
  animation: tour-pulse-ring 2s infinite;
}

.tour-highlight::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: linear-gradient(45deg, 
    rgba(59, 130, 246, 0.1) 0%, 
    rgba(147, 197, 253, 0.1) 50%, 
    rgba(59, 130, 246, 0.1) 100%);
}

.tour-tooltip {
  position: absolute;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.95) 0%, 
    rgba(248, 250, 252, 0.95) 100%);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 16px;
  padding: 24px;
  max-width: 320px;
  min-width: 280px;
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 10001;
  pointer-events: all;
  transform: scale(0.9) translateY(10px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tour-overlay.active .tour-tooltip {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.dark .tour-tooltip {
  background: linear-gradient(135deg, 
    rgba(31, 41, 55, 0.95) 0%, 
    rgba(17, 24, 39, 0.95) 100%);
  border-color: rgba(59, 130, 246, 0.3);
  color: white;
}

.tour-content {
  padding: 24px;
}

.tour-header {
  display: flex;
  justify-content: between;
  align-items: center;
  margin-bottom: 16px;
}

.tour-title {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.dark .tour-title {
  color: #f9fafb;
}

.tour-progress {
  background: #f3f4f6;
  color: #6b7280;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.dark .tour-progress {
  background: #374151;
  color: #9ca3af;
}

.tour-description {
  color: #6b7280;
  line-height: 1.6;
  margin-bottom: 20px;
}

.dark .tour-description {
  color: #d1d5db;
}

.tour-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tour-navigation {
  display: flex;
  gap: 8px;
}

.tour-btn {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tour-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tour-btn-primary {
  background: linear-gradient(to right, #3b82f6, #1d4ed8);
  color: white;
}

.tour-btn-primary:hover:not(:disabled) {
  background: linear-gradient(to right, #2563eb, #1e40af);
  transform: translateY(-1px);
}

.tour-btn-secondary {
  background: #f3f4f6;
  color: #6b7280;
  border: 1px solid #d1d5db;
}

.tour-btn-secondary:hover:not(:disabled) {
  background: #e5e7eb;
  color: #374151;
}

.dark .tour-btn-secondary {
  background: #374151;
  color: #d1d5db;
  border-color: #4b5563;
}

.dark .tour-btn-secondary:hover:not(:disabled) {
  background: #4b5563;
  color: #f9fafb;
}

/* Tour highlight animation */
@keyframes tour-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7), 0 0 0 9999px rgba(0, 0, 0, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0), 0 0 0 9999px rgba(0, 0, 0, 0.7);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0), 0 0 0 9999px rgba(0, 0, 0, 0.7);
  }
}

.tour-highlight.pulse {
  animation: tour-pulse 2s infinite;
}

/* Tour tooltip arrow */
.tour-tooltip::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 8px solid transparent;
}

.tour-tooltip.top::before {
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: white;
}

.dark .tour-tooltip.top::before {
  border-top-color: #1f2937;
}

.tour-tooltip.bottom::before {
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: white;
}

.dark .tour-tooltip.bottom::before {
  border-bottom-color: #1f2937;
}

.tour-tooltip.left::before {
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: white;
}

.dark .tour-tooltip.left::before {
  border-left-color: #1f2937;
}

.tour-tooltip.right::before {
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  border-right-color: white;
}

.dark .tour-tooltip.right::before {
  border-right-color: #1f2937;
}

/* Welcome modal enhancements */
.welcome-feature {
  display: flex;
  align-items: center;
  padding: 12px;
  background: #f8fafc;
  border-radius: 8px;
  margin-bottom: 8px;
}

.dark .welcome-feature {
  background: #374151;
}

.welcome-feature-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(to br, #3b82f6, #8b5cf6);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
}

.welcome-feature-text {
  color: #6b7280;
  font-size: 14px;
}

.dark .welcome-feature-text {
  color: #d1d5db;
}/* Tour
 Guide Pulse Ring Animation */
@keyframes tour-pulse-ring {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

/* Enhanced Tour Guide Styles */
ur Guide Styles */
.tour-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tour-overlay.active {
  pointer-events: all;
  opacity: 1;
}

.tour-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.tour-highlight {
  position: absolute;
  border: 4px solid #3b82f6;
  border-radius: 16px;
  box-shadow: 
    0 0 0 9999px rgba(0, 0, 0, 0.75),
    0 0 30px rgba(59, 130, 246, 0.6),
    inset 0 0 0 2px rgba(255, 255, 255, 0.2);
  background: transparent;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 10000;
}

.tour-highlight::before {
  content: '';
  position: absolute;
  inset: -8px;
  border: 2px solid rgba(59, 130, 246, 0.3);
  border-radius: 20px;
  animation: tour-pulse-ring 2s infinite;
}

.tour-highlight::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: linear-gradient(45deg, 
    rgba(59, 130, 246, 0.1) 0%, 
    rgba(147, 197, 253, 0.1) 50%, 
    rgba(59, 130, 246, 0.1) 100%);
}

.tour-tooltip {
  position: absolute;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.95) 0%, 
    rgba(248, 250, 252, 0.95) 100%);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 16px;
  padding: 24px;
  max-width: 320px;
  min-width: 280px;
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 10001;
  pointer-events: all;
  transform: scale(0.9) translateY(10px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tour-overlay.active .tour-tooltip {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.dark .tour-tooltip {
  background: linear-gradient(135deg, 
    rgba(31, 41, 55, 0.95) 0%, 
    rgba(17, 24, 39, 0.95) 100%);
  border-color: rgba(59, 130, 246, 0.3);
  color: white;
}

.tour-tooltip::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background: inherit;
  border: inherit;
  border-width: 1px 0 0 1px;
  transform: rotate(45deg);
  z-index: -1;
}

.tour-tooltip.top::before {
  bottom: -9px;
  left: 50%;
  margin-left: -8px;
  border-width: 0 1px 1px 0;
}

.tour-tooltip.bottom::before {
  top: -9px;
  left: 50%;
  margin-left: -8px;
  border-width: 1px 0 0 1px;
}

.tour-tooltip.left::before {
  right: -9px;
  top: 50%;
  margin-top: -8px;
  border-width: 1px 1px 0 0;
}

.tour-tooltip.right::before {
  left: -9px;
  top: 50%;
  margin-top: -8px;
  border-width: 0 0 1px 1px;
}

.tour-content h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 0.75rem;
}

.dark .tour-content h3 {
  color: #ffffff;
}

.tour-content p {
  color: #374151;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.dark .tour-content p {
  color: #d1d5db;
}

.tour-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
  color: #6b7280;
  margin-bottom: 1rem;
}

.dark .tour-progress {
  color: #9ca3af;
}

.tour-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.tour-navigation button {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}

.tour-navigation button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tour-navigation .btn-primary {
  background: linear-gradient(to right, #2563eb, #1d4ed8);
  color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.tour-navigation .btn-primary:hover:not(:disabled) {
  background: linear-gradient(to right, #1d4ed8, #1e40af);
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.tour-navigation .btn-secondary {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
}

.tour-navigation .btn-secondary:hover:not(:disabled) {
  background: #e5e7eb;
  color: #111827;
}

.dark .tour-navigation .btn-secondary {
  background: #374151;
  color: #d1d5db;
  border-color: #4b5563;
}

.dark .tour-navigation .btn-secondary:hover:not(:disabled) {
  background: #4b5563;
  color: #f9fafb;
}

.tour-navigation .btn-skip {
  color: #6b7280;
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0.5rem;
}

.tour-navigation .btn-skip:hover {
  color: #374151;
}

.dark .tour-navigation .btn-skip {
  color: #9ca3af;
}

.dark .tour-navigation .btn-skip:hover {
  color: #d1d5db;
}

/* Tour highlight pulse animation */
.tour-highlight.pulse {
  animation: tour-pulse 2s infinite;
}

@keyframes tour-pulse {
  0% {
    box-shadow: 
      0 0 0 0 rgba(59, 130, 246, 0.7), 
      0 0 0 9999px rgba(0, 0, 0, 0.75),
      0 0 30px rgba(59, 130, 246, 0.6),
      inset 0 0 0 2px rgba(255, 255, 255, 0.2);
  }
  70% {
    box-shadow: 
      0 0 0 10px rgba(59, 130, 246, 0), 
      0 0 0 9999px rgba(0, 0, 0, 0.75),
      0 0 30px rgba(59, 130, 246, 0.6),
      inset 0 0 0 2px rgba(255, 255, 255, 0.2);
  }
  100% {
    box-shadow: 
      0 0 0 0 rgba(59, 130, 246, 0), 
      0 0 0 9999px rgba(0, 0, 0, 0.75),
      0 0 30px rgba(59, 130, 246, 0.6),
      inset 0 0 0 2px rgba(255, 255, 255, 0.2);
  }
}

/* Tour Guide Fixes */
.tour-highlight {
  position: fixed !important;
  z-index: 10001 !important;
  transition: all 0.2s ease !important;
}

.tour-tooltip {
  position: fixed !important;
  z-index: 10002 !important;
}

/* Drag and Drop Improvements */
.timeline-tile[data-task-id],
.timeline-list-item[data-task-id] {
  cursor: grab;
}

.timeline-tile[data-task-id]:active,
.timeline-list-item[data-task-id]:active {
  cursor: grabbing;
}

.sortable-ghost {
  opacity: 0.3 !important;
  transform: scale(0.95) !important;
}

.sortable-chosen {
  transform: scale(1.02) !important;
  z-index: 1000 !important;
  cursor: grabbing !important;
}

.dragging {
  opacity: 0.8 !important;
  transform: scale(1.02) !important;
  cursor: grabbing !important;
  z-index: 1000 !important;
}/* 
Timing Update Animation */
.timing-updated {
  animation: timingHighlight 2s ease-in-out;
  position: relative;
}

@keyframes timingHighlight {
  0% {
    background-color: rgba(34, 197, 94, 0.2);
    transform: scale(1);
  }
  25% {
    background-color: rgba(34, 197, 94, 0.4);
    transform: scale(1.05);
  }
  50% {
    background-color: rgba(34, 197, 94, 0.3);
    transform: scale(1.02);
  }
  100% {
    background-color: transparent;
    transform: scale(1);
  }
}

.timing-updated::after {
  content: '⏰';
  position: absolute;
  top: -5px;
  right: -5px;
  background: #22c55e;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  animation: timingBadge 2s ease-in-out;
}

@keyframes timingBadge {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  25% {
    opacity: 1;
    transform: scale(1.2);
  }
  75% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}/* Task R
eordering Animation */
.task-reordered {
  animation: taskReorder 1.5s ease-in-out;
  position: relative;
}

@keyframes taskReorder {
  0% {
    background-color: rgba(59, 130, 246, 0.1);
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
  }
  25% {
    background-color: rgba(59, 130, 246, 0.2);
    transform: scale(1.02);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
  }
  50% {
    background-color: rgba(59, 130, 246, 0.15);
    transform: scale(1.01);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
  }
  100% {
    background-color: transparent;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
}

.task-reordered::before {
  content: '↕️';
  position: absolute;
  top: -8px;
  right: -8px;
  background: #3b82f6;
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  animation: reorderBadge 1.5s ease-in-out;
  z-index: 10;
}

@keyframes reorderBadge {
  0% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  25% {
    opacity: 1;
    transform: scale(1.3) rotate(180deg);
  }
  75% {
    opacity: 1;
    transform: scale(1) rotate(360deg);
  }
  100% {
    opacity: 0;
    transform: scale(0) rotate(540deg);
  }
}

/* Enhanced task highlighting for both sections */
.task-item.task-reordered,
.timeline-tile.task-reordered,
.timeline-list-item.task-reordered {
  border: 2px solid #3b82f6 !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

/* Staggered animation delay for visual flow */
.task-item:nth-child(1).task-reordered { animation-delay: 0ms; }
.task-item:nth-child(2).task-reordered { animation-delay: 100ms; }
.task-item:nth-child(3).task-reordered { animation-delay: 200ms; }
.task-item:nth-child(4).task-reordered { animation-delay: 300ms; }
.task-item:nth-child(5).task-reordered { animation-delay: 400ms; }

.timeline-tile:nth-child(1).task-reordered { animation-delay: 0ms; }
.timeline-tile:nth-child(2).task-reordered { animation-delay: 100ms; }
.timeline-tile:nth-child(3).task-reordered { animation-delay: 200ms; }
.timeline-tile:nth-child(4).task-reordered { animation-delay: 300ms; }
.timeline-tile:nth-child(5).task-reordered { animation-delay: 400ms; }

/* End Time Auto-Suggest Styles */
.end-time-suggestions {
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease-out;
}

.end-time-suggestions.suggestions-visible {
  opacity: 1;
  transform: translateY(0);
}

.end-time-suggestions.suggestions-hiding {
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.2s ease-in;
}

.end-time-tile {
  transition: all 0.2s ease-out;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.end-time-tile::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 0.5s;
}

.end-time-tile:hover::before {
  left: 100%;
}

.end-time-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.end-time-tile:active {
  transform: translateY(0);
  transition: transform 0.1s;
}

/* Animation for suggestion tiles appearing */
.end-time-tile {
  animation: slideInUp 0.3s ease-out;
}

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

/* Stagger animation for multiple tiles */
.end-time-tile:nth-child(1) { animation-delay: 0.1s; }
.end-time-tile:nth-child(2) { animation-delay: 0.15s; }
.end-time-tile:nth-child(3) { animation-delay: 0.2s; }
.end-time-tile:nth-child(4) { animation-delay: 0.25s; }
.end-time-tile:nth-child(5) { animation-delay: 0.3s; }
.end-time-tile:nth-child(6) { animation-delay: 0.35s; }

/* Responsive design for suggestions */
@media (max-width: 640px) {
  .end-time-suggestions .flex {
    flex-direction: column;
  }
  
  .end-time-tile {
    margin-right: 0 !important;
    margin-bottom: 0.5rem;
    width: 100%;
  }
}