/* ======================================================= GLOBAL STYLESHEET Pharmacy POS System Loaded on every page via includes/header.php This file documents conventions shared by ALL five mobile- responsiveness workstreams (app shell, dashboard widgets, POS/billing, inventory, reports/analytics) so pages built in parallel stay consistent, plus a small set of genuinely global, cross-cutting utility classes. Page/module-specific responsive rules belong in that module's own stylesheet, not here. ======================================================= */ /* =========================================================== BREAKPOINT CONVENTION Every stylesheet in this project should use max-width media queries anchored to these four widths. CSS custom properties cannot be referenced inside @media conditions, so the values below are documentation of the agreed convention — copy the raw px value into your own @media rule: max-width: 1200px -> small desktop / laptop max-width: 992px -> tablet landscape (sidebar becomes an off-canvas drawer below this) max-width: 768px -> tablet portrait max-width: 480px -> phone (Existing legacy media queries at other widths, e.g. 850px or 600px, may still exist in older stylesheets — prefer one of the four widths above for any NEW rule.) =========================================================== */ :root{ --bp-desktop:1200px; --bp-tablet-landscape:992px; --bp-tablet-portrait:768px; --bp-phone:480px; /* Minimum recommended touch target for any interactive element (buttons, links, form controls) on mobile. */ --touch-target-min:44px; /* ===================================================== APP SHELL Z-INDEX SCALE The top navbar (--z-navbar) is deliberately the HIGHEST layer below modals/toasts: it's a persistent app bar that must stay clickable (hamburger toggle, notification bell) even while the off-canvas drawer is open. .sidebar and .navbar-custom both span the full page width/height on mobile and .dashboard-wrapper/.main-content create no stacking context between them, so whichever has the higher number physically paints over — and captures taps from — the other wherever their boxes overlap (the top-left corner, i.e. the toggle button itself). Keeping the drawer/backdrop below the navbar means the drawer visually slides out from underneath the app bar instead of burying the only control that closes it. Keep new overlays (modals, toasts, popovers, etc.) at or above --z-modal so they always layer above everything defined by the app shell (includes/sidebar.php, includes/navbar.php). ===================================================== */ --z-sidebar-backdrop:1150; --z-sidebar-drawer:1200; --z-navbar:1210; --z-notification-panel:1120; --z-modal:1300; --z-toast:1400; } /* ===================================================== BRIDGE BOOTSTRAP OVERLAYS ONTO THE SCALE ABOVE Bootstrap hardcodes .modal-backdrop at 1050 and .modal at 1055. Every layer the app shell defines sits above 1055 -- the navbar alone is 1210 -- so an open modal was painted *underneath* the top app bar and the notification bell. The modal looked broken on every page rather than on one, because --z-modal was declared but never applied to anything. Re-point the Bootstrap values at the scale instead of lowering the navbar: the navbar has to stay above the off-canvas drawer (see the note above), so the modal is the layer that moves. The 10-15 step gaps mirror Bootstrap's own ordering so backdrop < modal < popover < tooltip still holds. ===================================================== */ .modal-backdrop { z-index:var(--z-modal,1300) !important; } .modal { z-index:calc(var(--z-modal,1300) + 10) !important; } .popover { z-index:calc(var(--z-modal,1300) + 20) !important; } .tooltip { z-index:calc(var(--z-modal,1300) + 30) !important; } /* ===================================================== SWEETALERT2 GOES ON THE SCALE TOO SweetAlert2 ships its own z-index (1060) as an INLINE style on .swal2-container. Inline beats a stylesheet, so this needs !important or it is simply ignored. 1060 sits below the navbar (1210), the sidebar drawer (1200), the modal backdrop (1300) and the modal (1310), which means every NxSwal.confirm() raised from inside an open Bootstrap modal was painted behind that modal's backdrop and looked like a dialog that had failed to appear. Archiving a product hit it: the Archive modal opens, then the confirmation fires underneath it. +40 keeps it above the modal and its tooltip and still below NxToast (.nx-toast-container, 3000), so a toast raised by a dialog still lands on top of it. ===================================================== */ .swal2-container { z-index:calc(var(--z-modal,1300) + 40) !important; } /* =========================================================== CROSS-CUTTING UTILITIES =========================================================== */ /* Guarantees a minimum 44x44 touch target for any custom interactive element. Add alongside a component's own class, e.g.