/* POS System custom styles */

/* Sidebar transition */
.sidebar {
    transition: transform 0.2s ease-in-out;
}
.sidebar-hidden {
    transform: translateX(-100%);
}

/* Cart item animation */
.cart-item-enter {
    animation: slideIn 0.15s ease-out;
}
@keyframes slideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Product grid card hover */
.product-card {
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.product-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}
.product-card:active {
    transform: translateY(0);
}

/* Toast animations */
.toast-enter {
    animation: toastIn 0.25s ease-out;
}
.toast-exit {
    animation: toastOut 0.2s ease-in forwards;
}
@keyframes toastIn {
    from { opacity: 0; transform: translateY(-100%); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes toastOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-100%); }
}

/* Modal backdrop */
.modal-backdrop {
    background: rgba(0,0,0,0.5);
    animation: fadeIn 0.15s ease-out;
}
.modal-content {
    animation: modalIn 0.2s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes modalIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Keyboard / scanner focus indicator */
.scanner-active {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
}

/* Payment processing spinner */
.spinner {
    border: 3px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Data table sort indicators */
.sort-asc::after { content: ' \u25B2'; font-size: 0.7em; }
.sort-desc::after { content: ' \u25BC'; font-size: 0.7em; }

/* Scrollbar styling for cart */
.cart-scroll::-webkit-scrollbar {
    width: 4px;
}
.cart-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 2px;
}

/* Number pad buttons */
.numpad-btn {
    min-height: 48px;
    font-size: 1.25rem;
    font-weight: 600;
}

/* Mobile: POS/Notes split layout */
@media (max-width: 1023px) {
    .mobile-split-cart {
        max-height: 45vh;
        overflow: hidden;
    }
}