style.css

/* Base styles */
body {
    direction: rtl;
    transition: all 0.3s ease;
    background: linear-gradient(to left, #fff8f5, #fff);
}
/* Smooth transitions */
* {
    transition: background-color 0.2s, color 0.2s, transform 0.2s;
}
/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #F36B26;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #DA5C1F;
}
/* Animation classes */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

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

.slide-in {
    animation: slideIn 0.4s ease-out;
}

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

.pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(243, 107, 38, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(243, 107, 38, 0); }
    100% { box-shadow: 0 0 0 0 rgba(243, 107, 38, 0); }
}
/* Status badges */
.badge-pending {
    background-color: #FFF3E0;
    color: #E65100;
}

.badge-completed {
    background-color: #E8F5E9;
    color: #2E7D32;
}

.badge-cancelled {
    background-color: #FFEBEE;
    color: #C62828;
}