/* Custom scrollbar for webkit browsers */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* Smooth transitions */ .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 200ms; } /* Drag and drop visual feedback */ .kanban-column.drag-over { background-color: #f8fafc; border: 2px dashed #cbd5e1; border-radius: 0.75rem; } /* Line clamp utility */ .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Custom animations */ @keyframes slideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .task-card { animation: slideIn 0.3s ease-out; } /* Focus styles for accessibility */ button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; } /* Glassmorphism effect for modals */ .backdrop-blur-sm { backdrop-filter: blur(4px); } /* Responsive adjustments */ @media (max-width: 768px) { .kanban-column { min-height: 300px; } .sidebar-link { padding: 0.75rem 1rem; } } /* Print styles */ @media print { .sidebar, header, button { display: none !important; } main { padding: 0; } }