.bg-purple { background: #6f42c1; }
.bg-teal { background: #20c997; }
.bg-orange { background: #fd7e14; }
.shadow-lg { box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15); }
.table-hover tbody tr:hover { background-color: rgba(0,0,0,0.03); }
/* Base button styles */
.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.2rem;
    transition: all 0.3s ease;
}

/* View Button - Teal */
.btn-sm.bg-teal {
    background: #20c997; /* Base teal color */
    color: white;
}

.btn-sm.bg-teal:hover {
    background: #1aa179; /* Darker teal for hover */
    color: white;
}

/* Complete Button - Orange */
.btn-sm.bg-orange {
    background: #fd7e14; /* Base orange color */
    color: white;
}

.btn-sm.bg-orange:hover {
    background: #e56e0f; /* Darker orange for hover */
    color: white;
}

/* Add this to your existing CSS file */

/* Card hover effect (only for .card-style inside .card-anim) */
.card-anim .card-style {
    transition: box-shadow 0.3s ease; /* Smooth transition for shadow */
}

.card-anim .card-style:hover {
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2); /* Increase shadow on hover */
}

/* Pulse animation (only for .card-style inside .card-anim) */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Apply pulse animation on hover (only for .card-style inside .card-anim) */
.card-anim .card-style:hover {
    animation: pulse 0.5s ease-in-out;
}

/* Ensure tables don't have the card hover effects */
.table, .table-hover tbody tr, #ordersTable, #ordersTable * {
    transition: none !important; /* Disable transitions for tables */
    animation: none !important; /* Disable animations for tables */
    transform: none !important; /* Disable any transforms for tables */
}