/* Custom styles for the POS Web App */

[v-cloak] {
    display: none !important;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom scrollbars for a clean look */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.dark ::-webkit-scrollbar-thumb {
    background: #475569;
}
.dark ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Print Styles for POS Thermal Receipts */
@media print {
    /* Hide everything on the page except the receipt container */
    body * {
        visibility: hidden;
    }
    
    #receipt-print-area, #receipt-print-area * {
        visibility: visible;
    }
    
    #receipt-print-area {
        position: absolute;
        left: 0;
        top: 0;
        width: 80mm; /* Standard receipt paper width */
        font-family: 'Courier New', Courier, monospace;
        color: #000000;
        font-size: 12px;
        line-height: 1.2;
        padding: 5px;
        background: white;
    }
    
    /* Disable any page margin/header/footer added by browsers */
    @page {
        size: auto;
        margin: 0mm;
    }
}

/* Animations for loading and transitions */
.fade-enter-active, .fade-leave-active {
    transition: opacity 0.2s ease;
}
.fade-enter-from, .fade-leave-to {
    opacity: 0;
}

/* Slide in animation for cart drawer and modals */
.slide-in-enter-active, .slide-in-leave-active {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.slide-in-enter-from, .slide-in-leave-to {
    transform: translateX(100%);
}

/* Grid Layout modifications */
.products-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
@media (min-width: 640px) {
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

/* Pulse effects */
.pulse-emerald {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: pulse 2s infinite cubic-bezier(0.66, 0, 0, 1);
}

@keyframes pulse {
    to {
        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
    }
}

/* === Accessibility additions === */
:focus-visible {
    outline: 2px solid #22c55e;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    .pulse-emerald {
        animation: none;
    }
    .fade-enter-active, .fade-leave-active,
    .slide-in-enter-active, .slide-in-leave-active {
        transition: none;
    }
}

/* Keep the register's primary action targets comfortably tappable (WCAG 2.2 / 2.5.8) */
.products-grid button {
    min-height: 44px;
}