:root { --sidebar-width: 250px; --sidebar-collapsed-width: 70px; --sidebar-bg: #1e2a38; --sidebar-text: #c9d4de; --sidebar-active: #2f7ed8; --topbar-height: 60px; --boutique-blush: #f7e4e0; --boutique-blush-deep: #e3a9ae; --boutique-gold: #c9a15a; --boutique-gold-dark: #a17d3f; --boutique-cream: #fdf8f3; --boutique-charcoal: #3d3229; --boutique-muted: #9a8a7c; } body { background-color: #f4f6f9; } .app-wrapper { min-height: 100vh; } /* Sidebar */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-width); background-color: var(--sidebar-bg); color: var(--sidebar-text); z-index: 1040; transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); overflow-x: hidden; overflow-y: auto; } .sidebar-brand { display: flex; align-items: center; gap: 0.6rem; height: var(--topbar-height); padding: 0 1rem; font-size: 1.15rem; font-weight: 600; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.08); white-space: nowrap; } .sidebar-brand i { font-size: 1.4rem; flex-shrink: 0; } .sidebar-menu { list-style: none; margin: 0; padding: 0.5rem 0; } .sidebar-menu li a { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 1.1rem; color: var(--sidebar-text); text-decoration: none; white-space: nowrap; border-left: 3px solid transparent; } .sidebar-menu li a i { font-size: 1.1rem; width: 1.25rem; text-align: center; flex-shrink: 0; } .sidebar-menu li a:hover { background-color: rgba(255,255,255,0.06); color: #fff; } .sidebar-menu li a.active { background-color: rgba(47,126,216,0.15); border-left-color: var(--sidebar-active); color: #fff; } /* Collapsed (desktop icon-only) */ .sidebar.collapsed { width: var(--sidebar-collapsed-width); } .sidebar.collapsed .sidebar-brand-text, .sidebar.collapsed .sidebar-menu li a span { display: none; } .sidebar.collapsed .sidebar-brand { justify-content: center; padding: 0; } /* Main area */ .main-area { margin-left: var(--sidebar-width); transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1); min-height: 100vh; display: flex; flex-direction: column; } .sidebar.collapsed ~ .main-area { margin-left: var(--sidebar-collapsed-width); } .topbar { height: var(--topbar-height); background-color: #fff; border-bottom: 1px solid #e3e7ec; display: flex; align-items: center; padding: 0 1rem; position: sticky; top: 0; z-index: 1030; } .topbar-toggle { font-size: 1.4rem; color: #333; text-decoration: none; } .topbar-spacer { flex: 1 1 auto; } .topbar-user-btn { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; color: #333; } .topbar-user-btn i { font-size: 1.5rem; } .topbar-role-badge { font-weight: 400; } .main-content { padding: 1.25rem; flex: 1 1 auto; animation: pageFadeIn 0.35s ease both; } /* Opacity only -- do NOT add transform back into these keyframes. Every modal in this application is authored inside the content placeholder, which means it is a descendant of .main-content. A transform on an element does two things to its descendants: 1. it becomes the containing block for position:fixed children, so the modal is sized and centred against the content area instead of the viewport; and 2. it creates a stacking context, which traps the modal's z-index:1055 inside .main-content -- while Bootstrap appends .modal-backdrop (z-index:1050) to , outside that context. The result is a backdrop painted OVER the dialog: the screen greys out and every click in the modal lands on the backdrop instead of the form. Note that translateY(0) is still a transform for these purposes, so ending the animation at zero does not help -- the transform has to be gone entirely. Scripts/site.js also relocates modals out of here as a second line of defence, but this rule is the actual fix. */ @keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } } .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1035; } /* Mobile: off-canvas sidebar */ @media (max-width: 767.98px) { .sidebar { width: var(--sidebar-width); transform: translateX(-100%); } .sidebar.show { transform: translateX(0); } .sidebar.show ~ .sidebar-backdrop, .sidebar-backdrop.show { display: block; } .main-area, .sidebar.collapsed ~ .main-area { margin-left: 0; } } /* Login page - boutique redesign */ .login-page { min-height: 100vh; margin: 0; font-family: 'Jost', 'Segoe UI', sans-serif; background: var(--boutique-cream); } .boutique-login-wrap { min-height: 100vh; display: flex; } .boutique-login-panel { flex: 1 1 55%; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; position: relative; background: radial-gradient(circle at 12% 18%, rgba(201, 161, 90, 0.10) 0, transparent 45%), radial-gradient(circle at 88% 82%, rgba(227, 169, 174, 0.22) 0, transparent 50%), var(--boutique-cream); } .boutique-login-panel::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(201, 161, 90, 0.16) 1px, transparent 1px); background-size: 26px 26px; opacity: 0.5; pointer-events: none; } .login-card { width: 100%; max-width: 380px; border: none; border-radius: 1rem; box-shadow: 0 1.5rem 3rem rgba(61, 50, 41, 0.16); position: relative; z-index: 1; animation: loginRiseIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes loginRiseIn { from { opacity: 0; transform: translateY(26px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .login-card .card-body { padding: 2.25rem 2rem; } .login-brand { display: flex; align-items: center; justify-content: center; gap: 0.55rem; font-family: 'Playfair Display', 'Georgia', serif; font-size: 1.9rem; font-weight: 700; color: var(--boutique-charcoal); } .login-brand i { color: var(--boutique-gold); } .login-tagline { text-align: center; color: var(--boutique-muted); font-size: 0.85rem; margin: 0.15rem 0 1.5rem; } /* Floating labels (Bootstrap's .form-floating mechanics, boutique re-skin) */ .login-page .form-floating > .form-control { border: 1px solid #ecdfd2; border-radius: 0.6rem; background: var(--boutique-cream); transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } .login-page .form-floating > .form-control:focus { border-color: var(--boutique-gold); box-shadow: 0 0 0 0.2rem rgba(201, 161, 90, 0.18); background: #fff; } .login-page .form-floating > label { color: var(--boutique-muted); } .login-page .form-floating > .form-control:focus ~ label, .login-page .form-floating > .form-control:not(:placeholder-shown) ~ label { color: var(--boutique-gold-dark); } .btn-boutique { background: linear-gradient(135deg, var(--boutique-gold) 0%, var(--boutique-gold-dark) 100%); border: none; color: #fff; font-weight: 600; letter-spacing: 0.03em; padding: 0.65rem 1rem; border-radius: 0.6rem; transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } .btn-boutique:hover, .btn-boutique:focus { color: #fff; transform: translateY(-2px); box-shadow: 0 0.5rem 1rem rgba(161, 125, 63, 0.35); filter: brightness(1.05); } .btn-boutique:active { transform: translateY(0) scale(0.98); box-shadow: 0 0.2rem 0.4rem rgba(161, 125, 63, 0.3); } .btn-boutique:disabled { opacity: 0.7; transform: none; } /* Right-side visual panel */ .boutique-visual-panel { flex: 1 1 45%; min-width: 0; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; color: var(--boutique-cream); background: linear-gradient(160deg, var(--boutique-blush-deep) 0%, var(--boutique-gold) 100%); } .boutique-visual-panel::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1.5px, transparent 1.5px); background-size: 28px 28px; opacity: 0.6; pointer-events: none; } .boutique-visual-inner { text-align: center; padding: 2rem; position: relative; z-index: 1; animation: pageFadeIn 0.8s ease 0.15s both; } .boutique-visual-svg { width: 170px; height: 170px; color: rgba(255, 255, 255, 0.92); margin-bottom: 1rem; animation: gentleFloat 6s ease-in-out infinite; } @keyframes gentleFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .visual-heading { font-family: 'Playfair Display', 'Georgia', serif; font-size: 2.1rem; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 0.4rem; } .visual-sub { font-size: 0.95rem; opacity: 0.9; letter-spacing: 0.03em; margin-bottom: 0; } @media (max-width: 991.98px) { .boutique-visual-panel { display: none; } .boutique-login-panel { flex: 1 1 100%; } } /* ============================================================ Permission-driven UI hiding (see Scripts/permissions.js) The body gets classes like "perm-noadd-Suppliers" / "perm-noedit-X" / "perm-nodelete-X" for every form the current role lacks that right on. These rules hide the known Add/Edit/Delete controls per module - this also covers buttons rendered dynamically inside DataTables rows, since it's a live CSS rule rather than a one-time DOM edit. ============================================================ */ /* Setup (Locations / Product Categories / Expense Categories) */ body.perm-noadd-Setup #btnAddLocation, body.perm-noadd-Setup #btnAddCategory, body.perm-noadd-Setup #btnAddExpCategory { display: none !important; } body.perm-noedit-Setup .btn-edit-location, body.perm-noedit-Setup .btn-edit-category, body.perm-noedit-Setup .btn-edit-expcategory { display: none !important; } body.perm-nodelete-Setup .btn-delete-location, body.perm-nodelete-Setup .btn-delete-category, body.perm-nodelete-Setup .btn-delete-expcategory { display: none !important; } /* Suppliers */ body.perm-noadd-Suppliers #btnAddSupplier, body.perm-noadd-Suppliers .supplier-picker-add { display: none !important; } body.perm-noedit-Suppliers .btn-edit-supplier { display: none !important; } body.perm-nodelete-Suppliers .btn-delete-supplier { display: none !important; } /* Customers */ body.perm-noadd-Customers #btnAddCustomer, body.perm-noadd-Customers .customer-picker-add { display: none !important; } body.perm-noedit-Customers .btn-edit-customer { display: none !important; } body.perm-nodelete-Customers .btn-delete-customer { display: none !important; } /* Products */ body.perm-noadd-Products #btnAddProduct, body.perm-noadd-Products .product-picker-add { display: none !important; } body.perm-noedit-Products .btn-edit-product { display: none !important; } body.perm-nodelete-Products .btn-delete-product { display: none !important; } /* Purchases (no in-place edit by design) */ body.perm-noadd-Purchases #btnAddPurchase { display: none !important; } body.perm-nodelete-Purchases .btn-delete-purchase { display: none !important; } /* Purchase Returns (no in-place edit by design) */ body.perm-noadd-PurchaseReturns #btnAddReturn { display: none !important; } body.perm-nodelete-PurchaseReturns .btn-delete-return { display: none !important; } /* Sale Invoice (POS) */ body.perm-noadd-Sales #btnHoldBill, body.perm-noadd-Sales #btnCompleteSale { display: none !important; } /* Sale Returns (no in-place edit by design) */ body.perm-noadd-SaleReturns #btnAddFromInvoice, body.perm-noadd-SaleReturns #btnAddStandalone { display: none !important; } body.perm-nodelete-SaleReturns .btn-delete-sr { display: none !important; } /* Supplier Ledger (payment vouchers - no in-place edit by design) */ body.perm-noadd-SupplierLedger #btnMakePayment { display: none !important; } body.perm-nodelete-SupplierLedger .btn-delete-payment { display: none !important; } /* Customer Ledger (receipt vouchers - no in-place edit by design) */ body.perm-noadd-CustomerLedger #btnReceivePayment { display: none !important; } body.perm-nodelete-CustomerLedger .btn-delete-receipt { display: none !important; } /* Employees */ body.perm-noadd-Employees #btnAddEmployee, body.perm-noadd-Employees .employee-picker-add { display: none !important; } body.perm-noedit-Employees .btn-edit-employee { display: none !important; } body.perm-nodelete-Employees .btn-delete-employee { display: none !important; } /* Employee Ledger (payment vouchers - no in-place edit by design) */ body.perm-noadd-EmployeeLedger #btnPayEmployee { display: none !important; } body.perm-nodelete-EmployeeLedger .btn-delete-epayment { display: none !important; } /* Expenses */ body.perm-noadd-Expenses #btnAddExpense { display: none !important; } body.perm-noedit-Expenses .btn-edit-expense { display: none !important; } body.perm-nodelete-Expenses .btn-delete-expense { display: none !important; } /* Dashboard */ .kpi-card, .chart-card { border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.04); transition: transform 0.2s ease, box-shadow 0.2s ease; } .kpi-card:hover, .chart-card:hover { transform: translateY(-4px); box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.12); } .kpi-icon { width: 48px; height: 48px; min-width: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; } .chart-wrap { position: relative; height: 260px; } @keyframes dashFadeSlideIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .dash-anim { opacity: 0; animation: dashFadeSlideIn 0.5s ease forwards; } #kpiRow > div:nth-child(1) .dash-anim { animation-delay: 0.02s; } #kpiRow > div:nth-child(2) .dash-anim { animation-delay: 0.08s; } #kpiRow > div:nth-child(3) .dash-anim { animation-delay: 0.14s; } #kpiRow > div:nth-child(4) .dash-anim { animation-delay: 0.20s; } #kpiRow > div:nth-child(5) .dash-anim { animation-delay: 0.26s; } #kpiRow > div:nth-child(6) .dash-anim { animation-delay: 0.32s; } #kpiRow > div:nth-child(7) .dash-anim { animation-delay: 0.38s; } #chartRow > div:nth-child(1) .dash-anim { animation-delay: 0.15s; } #chartRow > div:nth-child(2) .dash-anim { animation-delay: 0.22s; } #chartRow > div:nth-child(3) .dash-anim { animation-delay: 0.29s; } #chartRow > div:nth-child(4) .dash-anim { animation-delay: 0.36s; } @media (max-width: 575.98px) { .chart-wrap { height: 220px; } } /* ---------------- Sitewide animation pass ---------------- */ /* Button micro-interactions (applies app-wide - Bootstrap already transitions color/background) */ .btn { transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease, color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; } .btn:hover:not(:disabled) { transform: translateY(-1px); } .btn:active:not(:disabled) { transform: translateY(0) scale(0.97); } /* Modal fade + scale (Bootstrap toggles .show on open; we override the default translate-only transition) */ .modal.fade .modal-dialog { transform: scale(0.92) translateY(-12px); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease; } .modal.show .modal-dialog { transform: scale(1) translateY(0); } /* Table loading overlay - shown briefly over a grid's .table-responsive while its Refresh/Load AJAX call is in flight (wired generically in site.js), replacing the blank flash between clearing the old rows and rendering the new ones. */ .table-responsive { position: relative; } .table-loading-overlay { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.72); display: flex; align-items: center; justify-content: center; z-index: 5; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; } .table-loading-overlay.show { opacity: 1; } .table-loading-overlay .spinner-border { color: var(--sidebar-active); } /* Mobile: stack the POS cart action buttons full-width instead of crowding them into one row */ @media (max-width: 575.98px) { .cart-action-buttons { flex-direction: column; } .cart-action-buttons .btn { width: 100%; } } /* ---------------- Print (PrintHelper.printElement) ---------------- */ /* Whichever element currently carries .print-area is the only thing shown when printing - used consistently across every document/report view: Sale/Purchase invoice and return detail modals, the Supplier/Customer/Employee Ledger statements, and every Reports tab. PrintHelper itself injects the .print-header/.print-footer nodes as children of .print-area right before printing, so they inherit its visibility automatically and need no extra selector here. */ @media print { body * { visibility: hidden; } .print-area, .print-area * { visibility: visible; } .print-area { position: absolute; left: 0; top: 0; width: 100%; padding: 1rem; } .no-print { display: none !important; } .print-header { text-align: center; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid #333; } .print-shop-name { font-size: 1.4rem; font-weight: 700; font-family: 'Playfair Display', Georgia, serif; } .print-doc-title { font-size: 1rem; color: #555; margin-top: 0.15rem; } .print-footer { margin-top: 1.5rem; padding-top: 0.5rem; border-top: 1px solid #ccc; font-size: 0.75rem; color: #777; text-align: center; } @page { margin: 1.5cm; } } .share-note { font-size: 0.8rem; }