/* ============================================
   American POS - Main Stylesheet
   Extracted from index.html for optimization
   ============================================ */

/* Mobile Performance Optimizations */
@media (max-width: 768px) {
    body, html {
        overflow-x: hidden !important;
        width: 100% !important;
    }
    #pos-content-wrapper {
        margin-right: 0 !important;
    }
    #held-sales-drawer:not([style*="display: block"]),
    #held-sales-drawer:not([style*="display: flex"]) {
        display: none !important;
    }
    .category-btn, .product-card, a, button {
        touch-action: manipulation;
    }
    .product-card {
        content-visibility: auto;
        contain-intrinsic-size: 100px 150px;
    }
    .backdrop-blur-md, .backdrop-blur-sm, .glassmorphism {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background-color: rgba(255, 255, 255, 0.95) !important;
    }
    .dark .backdrop-blur-md, .dark .backdrop-blur-sm, .dark .glassmorphism {
        background-color: rgba(30, 41, 59, 0.95) !important;
    }
    .content-visibility-auto {
        content-visibility: auto;
    }
    #desktop-cart-container {
        display: none !important;
    }
}

/* Fallback Utility Classes */
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.z-\[70\] { z-index: 70; }
.flex { display: flex !important; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.bg-black\/60 { background-color: rgba(0, 0, 0, 0.6); }
.hidden { display: none !important; }

/* Price Check Modal */
#price-check-modal {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 9999;
    background-color: transparent;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
#price-check-modal > div {
    background-color: #fff;
    width: 90%;
    max-width: 500px;
    border-radius: 1rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    position: relative;
    pointer-events: auto;
}
.dark #price-check-modal > div {
    background-color: #1e293b;
    color: #fff;
    border: 1px solid #334155;
}

/* Mobile Header Visibility */
header.md\:hidden > button:not(#mobile-menu-btn):not(#mobile-cart-btn) {
    display: none !important;
}
.desktop-visible { display: none !important; }
@media (min-width: 768px) {
    .desktop-visible { display: flex !important; }
    header.md\:hidden { display: none !important; }
    #mobile-pos-controls { display: none !important; }
}

/* Autofill Styling Fix */
input:-webkit-autofill,
input:-webkit-autofill:active,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover,
select:-webkit-autofill,
select:-webkit-autofill:focus,
select:-webkit-autofill:hover,
textarea:-webkit-autofill,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:hover {
    -webkit-text-fill-color: #0f172a !important;
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    box-shadow: 0 0 0 1000px #fff inset !important;
    background-color: #fff !important;
    color: #0f172a !important;
    transition: background-color 5000s ease-in-out 0s;
}
input[type=number], input[type=text], input[type=url], select {
    color: #0f172a;
}
.dark input[type=number], .dark input[type=text], .dark input[type=url], .dark select {
    color: #f1f5f9;
}

/* Base Font */
body { font-family: Outfit, sans-serif; }

/* Soft Light Mode Theme */
:root {
    --soft-bg-primary: #f8f9fb;
    --soft-bg-secondary: #f1f3f7;
    --soft-bg-card: #ffffff;
    --soft-border: #e2e5eb;
    --soft-text: #3d4654;
}
html:not(.dark) body { background-color: var(--soft-bg-secondary) !important; }
html:not(.dark) .bg-gray-50, html:not(.dark) .bg-slate-50 { background-color: var(--soft-bg-primary) !important; }
html:not(.dark) #sidebar { background-color: #f5f6f8 !important; border-color: var(--soft-border) !important; }
html:not(.dark) header { background-color: #f5f6f8 !important; }
html:not(.dark) .bg-white:not(.dark\\:bg-slate-800):not(.dark\\:bg-slate-700):not(.dark\\:bg-slate-900) { background-color: #fafbfc !important; }
html:not(.dark) [class*=rounded-2xl].bg-white,
html:not(.dark) [class*=rounded-lg].bg-white,
html:not(.dark) [class*=rounded-xl].bg-white { background-color: #fcfcfd !important; }
html:not(.dark) #product-grid-container { background-color: var(--soft-bg-secondary) !important; }
html:not(.dark) #cart-container, html:not(.dark) .desktop-cart-container { background-color: #f9fafb !important; }
html:not(.dark) [class*=border-slate-200] { border-color: var(--soft-border) !important; }
html:not(.dark) [class*=border-slate-100] { border-color: #e8eaef !important; }
html:not(.dark) input[type=number],
html:not(.dark) input[type=search],
html:not(.dark) input[type=text],
html:not(.dark) select,
html:not(.dark) textarea { background-color: #fff !important; border-color: #d8dce3 !important; }
html:not(.dark) .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03) !important; }
html:not(.dark) .shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05) !important; }
html:not(.dark) .shadow-lg { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05) !important; }
html:not(.dark) .bg-black.bg-opacity-50 { background-color: rgba(55, 65, 81, 0.4) !important; }
html:not(.dark) .text-slate-900 { color: var(--soft-text) !important; }
html:not(.dark) .text-slate-800 { color: #475569 !important; }
html:not(.dark) .bg-indigo-600 { background-color: #5c6bc0 !important; }
html:not(.dark) .bg-emerald-600, html:not(.dark) .bg-green-600 { background-color: #4db6ac !important; }

/* Scrollbar Styling */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #64748b; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
.animate-fade-in { animation: fadeIn 0.2s ease-out forwards; }

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}
.cart-item-new { animation: slideInRight 0.25s ease-out forwards; }

@keyframes shimmer {
    100% { transform: translateX(100%); }
}
.animate-shimmer { animation: shimmer 2s infinite; }

@keyframes tip-over {
    0% { transform: rotate(0); }
    20% { transform: rotate(-10deg); }
    40% { transform: rotate(10deg); }
    60% { transform: rotate(-5deg); }
    80% { transform: rotate(135deg); }
    100% { transform: rotate(135deg); }
}

/* Hover Scroll */
.hover-scroll {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.3s;
}
.hover-scroll:hover { scrollbar-color: #94a3b8 transparent; }
.hover-scroll::-webkit-scrollbar { height: 6px; background-color: transparent; }
.hover-scroll::-webkit-scrollbar-track { background-color: transparent; }
.hover-scroll::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 20px; }
.hover-scroll:hover::-webkit-scrollbar-thumb { background-color: #94a3b8; }

/* Desktop Only Flex */
.desktop-only-flex { display: none !important; }
@media (min-width: 768px) {
    .desktop-only-flex { display: flex !important; }
}

/* Users Grid */
#users-card-grid { grid-auto-rows: auto !important; }
#users-card-grid > div { height: auto !important; min-height: fit-content !important; }

/* Active Ring Effect */
.active-ring { position: relative; }
.active-ring::after {
    content: '';
    position: absolute;
    inset: -2px;
    border: 2px solid rgb(99 102 241 / 0.5);
    border-radius: 14px;
    opacity: 1;
}

/* Print Styles */
@media print {
    body * { visibility: hidden; }
    #receipt-modal-content, #receipt-modal-content * { visibility: visible; }
    #receipt-modal-content {
        position: absolute;
        left: 0; top: 0;
        width: 100%;
        margin: 0; padding: 0;
        display: block !important;
    }
    #close-receipt, #email-receipt-btn, #print-receipt-btn { display: none !important; }
    #payment-modal {
        position: absolute;
        left: 0; top: 0;
        width: 100%; height: 100%;
        background: #fff;
        z-index: 9999;
        visibility: visible;
        display: block !important;
    }
}