/* FICOFI Work-from-Anywhere Planner Custom Styles */

/* Enhanced transitions and animations */
.transition-all {
  transition: all 0.3s ease-in-out;
}\n\n/* Status badges */\n.status-badge {\n  @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium;\n}\n\n.status-wfh {\n  @apply bg-blue-100 text-blue-800;\n}\n\n.status-wfo {\n  @apply bg-green-100 text-green-800;\n}\n\n.status-trip {\n  @apply bg-orange-100 text-orange-800;\n}\n\n.status-leave {\n  @apply bg-red-100 text-red-800;\n}\n\n.status-office {\n  @apply bg-gray-100 text-gray-800;\n}\n\n/* Custom scrollbar */\n.custom-scrollbar::-webkit-scrollbar {\n  width: 6px;\n}\n\n.custom-scrollbar::-webkit-scrollbar-track {\n  background: #f1f1f1;\n  border-radius: 10px;\n}\n\n.custom-scrollbar::-webkit-scrollbar-thumb {\n  background: #c1c1c1;\n  border-radius: 10px;\n}\n\n.custom-scrollbar::-webkit-scrollbar-thumb:hover {\n  background: #a1a1a1;\n}\n\n/* Animated loading skeleton */\n.skeleton {\n  @apply animate-pulse bg-gray-200 rounded;\n}\n\n/* Enhanced button styles */\n.btn-primary {\n  @apply bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;\n}\n\n.btn-secondary {\n  @apply bg-gray-600 hover:bg-gray-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2;\n}\n\n.btn-success {\n  @apply bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2;\n}\n\n/* Card hover effects */\n.card-hover {\n  @apply transition-all duration-200 hover:shadow-lg hover:-translate-y-1;\n}\n\n/* Custom input focus */\n.input-focus {\n  @apply focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200;\n}\n\n/* Progress bar animations */\n.progress-bar {\n  @apply transition-all duration-500 ease-out;\n}\n\n/* Notification styles */\n.notification {\n  @apply fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg z-50 transition-all duration-300;\n}\n\n.notification.success {\n  @apply bg-green-500 text-white;\n}\n\n.notification.error {\n  @apply bg-red-500 text-white;\n}\n\n.notification.info {\n  @apply bg-blue-500 text-white;\n}\n\n.notification.warning {\n  @apply bg-yellow-500 text-white;\n}\n\n/* Schedule grid enhancements */\n.schedule-slot {\n  @apply transition-all duration-200 cursor-pointer;\n}\n\n.schedule-slot:hover {\n  @apply transform scale-105 shadow-md;\n}\n\n/* Heatmap cell enhancements */\n.heatmap-cell {\n  @apply transition-all duration-300 cursor-pointer;\n}\n\n.heatmap-cell:hover {\n  @apply transform scale-110 shadow-lg;\n}\n\n/* Navigation active state */\n.nav-active {\n  @apply bg-blue-50 border-r-2 border-blue-500 text-blue-700;\n}\n\n/* Employee directory row hover */\n.employee-row {\n  @apply transition-all duration-150 hover:bg-gray-50 hover:shadow-sm;\n}\n\n/* Responsive utilities */\n@media (max-width: 768px) {\n  .sidebar {\n    @apply transform -translate-x-full;\n  }\n  \n  .sidebar.open {\n    @apply transform translate-x-0;\n  }\n  \n  .main-content {\n    @apply ml-0;\n  }\n}\n\n/* Print styles */\n@media print {\n  .no-print {\n    display: none !important;\n  }\n  \n  .sidebar {\n    display: none !important;\n  }\n  \n  .main-content {\n    margin-left: 0 !important;\n  }\n}\n\n/* Accessibility improvements */\n.focus-visible:focus-visible {\n  @apply outline-2 outline-blue-500 outline-offset-2;\n}\n\n/* Dark mode support (future enhancement) */\n@media (prefers-color-scheme: dark) {\n  .dark-mode {\n    @apply bg-gray-900 text-white;\n  }\n  \n  .dark-mode .card {\n    @apply bg-gray-800 border-gray-700;\n  }\n  \n  .dark-mode .input {\n    @apply bg-gray-800 border-gray-600 text-white;\n  }\n}\n\n/* Custom utility classes */\n.text-gradient {\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n}\n\n.glass-effect {\n  background: rgba(255, 255, 255, 0.25);\n  backdrop-filter: blur(10px);\n  border: 1px solid rgba(255, 255, 255, 0.18);\n}\n\n/* Animation keyframes */\n@keyframes slideInFromLeft {\n  0% {\n    transform: translateX(-100%);\n    opacity: 0;\n  }\n  100% {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n\n@keyframes slideInFromRight {\n  0% {\n    transform: translateX(100%);\n    opacity: 0;\n  }\n  100% {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n\n@keyframes fadeInUp {\n  0% {\n    transform: translateY(20px);\n    opacity: 0;\n  }\n  100% {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n.slide-in-left {\n  animation: slideInFromLeft 0.5s ease-out;\n}\n\n.slide-in-right {\n  animation: slideInFromRight 0.5s ease-out;\n}\n\n.fade-in-up {\n  animation: fadeInUp 0.5s ease-out;\n}\n\n/* Status-specific colors for better accessibility */\n.status-indicator {\n  @apply w-3 h-3 rounded-full inline-block mr-2;\n}\n\n.status-indicator.wfh {\n  @apply bg-blue-500;\n}\n\n.status-indicator.wfo {\n  @apply bg-green-500;\n}\n\n.status-indicator.trip {\n  @apply bg-orange-500;\n}\n\n.status-indicator.leave {\n  @apply bg-red-500;\n}\n\n.status-indicator.office {\n  @apply bg-gray-500;\n}\n\n/* Table enhancements */\n.table-container {\n  @apply overflow-x-auto custom-scrollbar;\n}\n\n.table-header {\n  @apply bg-gray-50 text-gray-700 font-medium text-sm uppercase tracking-wider;\n}\n\n.table-row {\n  @apply border-b border-gray-200 hover:bg-gray-50 transition-colors duration-150;\n}\n\n.table-cell {\n  @apply px-6 py-4 whitespace-nowrap;\n}\n\n/* Loading states */\n.loading-spinner {\n  @apply inline-block w-4 h-4 border-2 border-gray-300 border-t-blue-600 rounded-full animate-spin;\n}\n\n.loading-dots::after {\n  content: '...';\n  @apply inline-block animate-pulse;\n}\n\n/* Enhancement for form elements */\n.form-group {\n  @apply mb-4;\n}\n\n.form-label {\n  @apply block text-sm font-medium text-gray-700 mb-1;\n}\n\n.form-input {\n  @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200;\n}\n\n.form-select {\n  @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 bg-white;\n}\n\n.form-error {\n  @apply text-red-600 text-sm mt-1;\n}\n\n/* Badge variations */\n.badge {\n  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;\n}\n\n.badge-primary {\n  @apply bg-blue-100 text-blue-800;\n}\n\n.badge-success {\n  @apply bg-green-100 text-green-800;\n}\n\n.badge-warning {\n  @apply bg-yellow-100 text-yellow-800;\n}\n\n.badge-error {\n  @apply bg-red-100 text-red-800;\n}\n\n.badge-secondary {\n  @apply bg-gray-100 text-gray-800;\n}"