/** * WEEGOSOFT POS - Critical Layout & Component Stylesheet * Loaded in before DOM parsing to guarantee Zero Layout Shift (CLS = 0) */ /* 1. Global Viewport Constraints (Strictly scoped to POS Layout) */ body.pos-layout { height: 100vh !important; max-height: 100vh !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; position: relative !important; } body.pos-layout #wrapper { height: 100vh !important; overflow: hidden !important; } body.pos-layout #page-content-wrapper, body.pos-layout #wrapper-content-main { height: 100% !important; overflow: hidden !important; } /* 2. Top Navbar - Absolute Mathematical Centering */ @media (min-width: 768px) { .pos-navbar-center-group { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; margin: 0 !important; z-index: 10; } } /* 3. Left Categories Sidebar */ #invoice-sidebar, .category-sidebar { width: 100px !important; min-width: 100px !important; height: 100% !important; overflow-y: auto !important; overflow-x: hidden !important; flex-shrink: 0 !important; } /* 4. Center Product Area */ #invoice-products { min-width: 0 !important; height: 100% !important; overflow: hidden !important; } #invoice-products-scroll { overflow-y: auto !important; overflow-x: hidden !important; } /* 5. Right Cart Column & Form Architecture */ #invoice-new { width: 420px !important; min-width: 420px !important; height: 100% !important; overflow: hidden !important; flex-shrink: 0 !important; } #invoice-form { height: 100% !important; max-height: 100% !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; border-radius: 0 !important; border: none !important; margin: 0 !important; } #invoice-form > header.card-header { flex-shrink: 0 !important; z-index: 5; } #invoice-form > .card-body { flex: 1 1 auto !important; overflow-y: auto !important; overflow-x: hidden !important; min-height: 0 !important; } #invoice-form > footer.container-fluid { flex-shrink: 0 !important; z-index: 5; margin-top: auto !important; bottom: 0 !important; } /* 6. Smart Pending Orders Banner */ .pending-orders-smart-banner { transition: all 0.2s ease; border-radius: 12px; background: #fffbeb; border: 1px solid #fde68a; } .pending-orders-smart-banner:hover { background: #fef3c7; border-color: #f59e0b; transform: translateY(-1px); box-shadow: 0 4px 6px -1px rgba(245, 158, 11, 0.15) !important; } /* 7. Touch Comment Suggestions Chips */ .comment-quick-chip { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); font-weight: 600; font-size: 0.82rem; cursor: pointer; user-select: none; } .comment-quick-chip:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; } .comment-quick-chip.active { background-color: var(--primary, #007bff) !important; color: #ffffff !important; border-color: var(--primary, #007bff) !important; box-shadow: 0 2px 6px rgba(0, 123, 255, 0.35) !important; } /* 8. Pulse Animation for Real-Time Notification Badge */ @keyframes pulse-red { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(220, 53, 69, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); } } .pulse-badge { animation: pulse-red 2s infinite; } /* 9. Top Toolbar Action Buttons (Interactive Elevation) */ .pos-toolbar-btn { background: #ffffff !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important; border-radius: 8px !important; color: #475569 !important; font-weight: 600; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .pos-toolbar-btn:hover { background: #f8fafc !important; color: #0f172a !important; border-color: #cbd5e1 !important; transform: translateY(-1px); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1) !important; } .pos-toolbar-btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important; } .pos-toolbar-btn.active { background: var(--primary, #007bff) !important; color: #ffffff !important; border-color: var(--primary, #007bff) !important; box-shadow: 0 2px 5px rgba(0, 123, 255, 0.3) !important; } /* 10. List Mode Layout Enhancements (Individual Cards & Symmetric Spacing) */ .view-mode-list, #product-container.view-mode-list, #products-container.view-mode-list { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 12px 14px !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 0 !important; } .list-item-card { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; background: #ffffff !important; border-radius: 12px !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04) !important; border: 1px solid #e2e8f0 !important; margin: 0 0 10px 0 !important; padding: 6px 10px !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; display: block !important; } .list-item-card:hover { transform: translateY(-1px); box-shadow: 0 4px 10px -1px rgba(0, 0, 0, 0.1) !important; border-color: #cbd5e1 !important; } .list-item-card.active { border-color: var(--primary, #007bff) !important; background: #f0f7ff !important; box-shadow: 0 3px 8px rgba(0, 123, 255, 0.2) !important; } /* 11. Clear Cart Button with Tactile Relief */ #btn-delete-cart { background: #ffffff !important; border: 1px solid #fee2e2 !important; color: #dc2626 !important; border-radius: 8px !important; box-shadow: 0 1px 3px rgba(220, 38, 38, 0.08) !important; font-weight: 700; padding: 4px 10px !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } #btn-delete-cart:hover { background: #fef2f2 !important; border-color: #fca5a5 !important; color: #b91c1c !important; transform: translateY(-1px); box-shadow: 0 3px 6px rgba(220, 38, 38, 0.15) !important; } #btn-delete-cart:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(220, 38, 38, 0.1) !important; }