/* Custom styles for Tasks Livewire Component */

/* Button hover effects and animations */
.tasks-component .btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.tasks-component .btn:hover {
    transform: translateY(-2px);
}

/* Card transitions */
.tasks-component .card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Table row hover effects */
.tasks-component .table tbody tr:hover {
    transform: scale(1.001);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* Custom scrollbar for table */
.tasks-component .table-responsive::-webkit-scrollbar {
    height: 8px;
}

.tasks-component .table-responsive::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.tasks-component .table-responsive::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 4px;
}

.tasks-component .table-responsive::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
}

/* Form focus styles */
.tasks-component .form-control:focus {
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
    outline: none !important;
}

/* Button hover animations */
.tasks-component .btn-hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Smooth transitions for all interactive elements */
.tasks-component .btn,
.tasks-component .card,
.tasks-component .form-control {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Compact header responsive adjustments */
@media (max-width: 768px) {
    .tasks-component .d-flex.gap-2 {
        gap: 0.5rem !important;
    }
    
    .tasks-component .btn-sm {
        font-size: 11px !important;
        padding: 6px 10px !important;
    }
    
    .tasks-component .col-lg-4 .d-flex {
        justify-content: flex-start !important;
        flex-wrap: wrap;
    }
    
    .tasks-component .col-lg-5 .d-flex {
        justify-content: flex-start !important;
        margin-top: 10px;
    }
}

/* Stats cards hover effects */
.tasks-component .text-center.px-3.py-2 {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tasks-component .text-center.px-3.py-2:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

/* Search input with icon styling */
.tasks-component input[placeholder*="🔍"] {
    background-position: 12px center;
    background-repeat: no-repeat;
}

/* Quick filter buttons */
.tasks-component .btn-sm {
    white-space: nowrap;
}