body {
    font-family: 'Sarabun', sans-serif;
    background-color: #f0f2f5;
}

.card-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

.notification {
    animation: slide-in 0.5s forwards;
}

@keyframes slide-in {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

#billDetailModal .overflow-y-auto::-webkit-scrollbar, 
#categoryManagementList::-webkit-scrollbar, 
#bankManagementList::-webkit-scrollbar { 
    width: 8px; 
}

#billDetailModal .overflow-y-auto::-webkit-scrollbar-track, 
#categoryManagementList::-webkit-scrollbar-track, 
#bankManagementList::-webkit-scrollbar-track { 
    background: #f1f1f1; 
    border-radius: 10px; 
}

#billDetailModal .overflow-y-auto::-webkit-scrollbar-thumb, 
#categoryManagementList::-webkit-scrollbar-thumb, 
#bankManagementList::-webkit-scrollbar-thumb { 
    background: #888; 
    border-radius: 10px; 
}

#billDetailModal .overflow-y-auto::-webkit-scrollbar-thumb:hover, 
#categoryManagementList::-webkit-scrollbar-thumb:hover, 
#bankManagementList::-webkit-scrollbar-thumb:hover { 
    background: #555; 
}

.sortable:hover { 
    background-color: #f0f0f0; 
    cursor: pointer; 
}

/* Dark mode styles for scrollbar */
.dark #billDetailModal .overflow-y-auto::-webkit-scrollbar-track, 
.dark #categoryManagementList::-webkit-scrollbar-track,
.dark #bankManagementList::-webkit-scrollbar-track { 
    background: #2d3748; 
}

.dark #billDetailModal .overflow-y-auto::-webkit-scrollbar-thumb,
.dark #categoryManagementList::-webkit-scrollbar-thumb,
.dark #bankManagementList::-webkit-scrollbar-thumb { 
    background: #4a5568; 
}

.dark #billDetailModal .overflow-y-auto::-webkit-scrollbar-thumb:hover,
.dark #categoryManagementList::-webkit-scrollbar-thumb:hover,
.dark #bankManagementList::-webkit-scrollbar-thumb:hover { 
    background: #718096; 
}

.dark .sortable:hover { 
    background-color: #2d3748; 
}