@keyframes slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.animate-slide-up { animation: slide-up 0.3s ease-out; }
.toast { animation: slide-up 0.3s ease-out; z-index: 9999; }
.modal-overlay { animation: fadeIn 0.15s ease-out; }
.modal-content { animation: scaleIn 0.2s ease-out; }

.resize-y { resize: vertical; }

.sidebar-scroll::-webkit-scrollbar { width: 3px; }
.sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 10px; }
.sidebar-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }
.sidebar-sub a { display: block; padding: 6px 16px; font-size: 12px; color: #9ca3af; transition: all 0.15s; border-left: 2px solid transparent; margin: 1px 0; }
.sidebar-sub a:hover { color: #fff; }
.sidebar-sub a.active { color: #1FC4AC; border-left-color: #1FC4AC; background: rgba(31,196,172,0.1); }
.sidebar-parent .sidebar-arrow { transition: transform 0.2s; }
.rotate-180 { transform: rotate(180deg); }
tbody tr { transition: background-color 0.15s; }
input:focus, select:focus, textarea:focus { outline: none; }
.status-toggle:not(.active) { background-color: #d1d5db; }
.file-upload:hover { border-color: #1FC4AC; background: rgba(31,196,172,0.03); }
.badge { display: inline-block; white-space: nowrap; }
#toastContainer { pointer-events: none; }
#toastContainer > * { pointer-events: auto; }
.action-dropdown { min-width: 160px; border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.action-dropdown a:hover { background: #f9fafb; }
.pagination-btn { min-width: 32px; text-align: center; font-size: 12px; }
.kpi-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); transform: translateY(-1px); }
.quick-access-btn:hover { box-shadow: 0 2px 8px rgba(31,196,172,0.15); transform: translateY(-1px); }
@media (max-width: 1023px) { #sidebar { box-shadow: 4px 0 20px rgba(0,0,0,0.2); } }
