/* css/components.css */

/* ⚡ VUE ROUTER TRANSITIONS ⚡ */
.page-slide-enter-active, 
.page-slide-leave-active {
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
}
.page-slide-enter-from {
    opacity: 0;
    transform: translateY(10px);
}
.page-slide-leave-to {
    opacity: 0;
    transform: translateY(-10px);
}

/* Sub-component smooth fading */
.smooth-tab-enter-active, 
.smooth-tab-leave-active { 
    transition: opacity 0.2s ease, transform 0.2s ease; 
}
.smooth-tab-enter-from { opacity: 0; transform: translateY(5px); }
.smooth-tab-leave-to { opacity: 0; transform: translateY(-5px); }

/* Scalper Terminal & Toasts */
.toast-enter-active, 
.toast-leave-active { 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
}
.toast-enter-from, 
.toast-leave-to { 
    opacity: 0; 
    transform: scale(0.9) translate(-50%, 20px) !important; 
}

/* ⚡ UI UTILITIES ⚡ */

/* Fast Fade-In for components */
.animate-fade-in {
    animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Scrollbars */
.hide-scrollbar::-webkit-scrollbar { 
    display: none; 
}
.hide-scrollbar { 
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}

/* Custom aesthetic scrollbar for Option Chain & Tables */
.custom-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
html.dark .custom-scrollbar::-webkit-scrollbar-thumb { background: #334155; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
html.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #475569; }

/* Remove default arrows from Quantity Number Inputs */
.hide-arrows::-webkit-outer-spin-button, 
.hide-arrows::-webkit-inner-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
.hide-arrows { 
    -moz-appearance: textfield; 
}