/* /Layout/MainLayout.razor.rz.scp.css */
/* MainLayout scoped styles - aPOS */
/* The main layout uses global CSS classes from app.css */
/* This file is kept minimal as aPOS styling is handled globally */
/* /Layout/PosLayout.razor.rz.scp.css */
/* ═════════════════════════════════════════════════════════════════════════
   POS Layout — Scoped CSS
   EN: Layout-specific overrides that complement pos.css responsive styles.
   VI: Override riêng cho layout, bổ sung cho styles responsive pos.css.
   ═════════════════════════════════════════════════════════════════════════ */

/* EN: Ensure smooth transitions for all interactive elements
   VI: Đảm bảo transition mượt cho tất cả phần tử tương tác */
[b-zvdjdezfjw] .pos-sidebar,
[b-zvdjdezfjw] .pos-order-drawer {
    will-change: transform;
}

/* EN: Prevent body scroll when overlay is open
   VI: Ngăn cuộn body khi overlay đang mở */
[b-zvdjdezfjw] .pos-sidebar-overlay,
[b-zvdjdezfjw] .pos-order-overlay {
    backdrop-filter: blur(2px);
}