/* Modal Container */ .start-modal-container { position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 90vw; background: white; box-shadow: -4px 0 15px rgba(0, 0, 0, 0.1); z-index: 1050; overflow-y: auto; transform: translateX(100%); transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1); /* Promote to its own GPU layer so the slide is smooth, not janky. */ will-change: transform; backface-visibility: hidden; opacity: 0; visibility: hidden; } .start-modal-container.show { transform: translateX(0); opacity: 1; visibility: visible; } /* Overlay */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); z-index: 1040; opacity: 0; visibility: hidden; transition: opacity 0.15s ease, visibility 0.15s ease; /* No backdrop-filter blur: it forces a full-page re-render every frame while sliding, which makes the panel feel stuck/slow on heavy pages. */ } .modal-overlay.show { opacity: 1; visibility: visible; } /* Header */ .menu-header { padding: 15px; background: var(--mk-slate-50-2); border-bottom: 1px solid var(--mk-slate-200-6); display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 10; box-shadow: 0 2px 5px rgba(0,0,0,0.05); } .menu-title { font-size: 18px; font-weight: bold; color: var(--mk-slate-900-8); } /* Sections — show immediately with the panel (no second delayed fade that made the content lag behind the slide). */ .menu-sections-container { padding: 15px; } /* Header dropdown rows match the module side drawer: compact rounded pills with a small colour-tinted icon tile (Contacts, HRM, Marketing, Expenses, Inventory, Purchases, Reports, Sales, Logistics, Settings, Franchisor). The tint colour is assigned per row by the shared script in javascripts.html; these are the fallbacks. Works for both the and flavours of .recommended-icon. */ .menu-sections-container .menu-section a { display: flex; align-items: center; gap: 10px; margin: 2px 4px; padding: 9px 12px; border-radius: 12px; font-size: 14px; color: var(--mk-gray-800); text-decoration: none; transition: background .15s ease, color .15s ease; } .menu-sections-container .menu-section a:hover { background: var(--mk-blue-100); color: var(--mk-gray-950); } /* The page you are on, filled in the business theme colour. */ .menu-sections-container .menu-section a.is-current { /* themeFrom/themeTo are the resolved header gradient — business.theme_color is a name like "blue", which CSS would render as pure #0000ff. */ background: linear-gradient(to right, #1e40af, #1e3a8a); color: var(--mk-white); font-weight: 600; } .menu-sections-container .menu-section a.is-current .recommended-icon { background: rgba(255,255,255,.22) !important; box-shadow: none !important; color: var(--mk-white) !important; } .menu-sections-container .menu-section a.is-current .recommended-icon i, .menu-sections-container .menu-section a.is-current .recommended-icon svg { color: var(--mk-white) !important; } .menu-sections-container .menu-section a.is-current img.recommended-icon { filter: brightness(0) invert(1); } .menu-sections-container .recommended-icon { width: 28px !important; height: 28px !important; flex-shrink: 0; background: var(--mk-blue-100); border: 0; border-radius: 8px; color: var(--mk-slate-600-2); display: inline-flex !important; align-items: center; justify-content: center; transition: background .18s ease, transform .18s ease; } .menu-sections-container img.recommended-icon { padding: 4px; object-fit: contain; } .menu-sections-container .recommended-icon i { font-size: 15px !important; color: inherit; } .menu-sections-container a:hover .recommended-icon { transform: translateY(-1px); } .menu-sections-container .menu-section-title { padding: 12px 12px 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--mk-slate-400); } .menu-sections-container .menu-section + .menu-section { border-top: 1px solid var(--mk-slate-100-15); margin-top: 4px; } /* Home is the way out of a section, so it sits above a rule of its own — in the panels it shares a section with the rest, hence the explicit line. */ .menu-sections-container .menu-section a[href="/desktop"] { border-bottom: 1px solid var(--mk-slate-100-15); border-radius: 12px 12px 0 0; margin-bottom: 6px; padding-bottom: 12px; font-weight: 600; } /* Items */ .menu-item { display: flex; align-items: center; padding: 10px 12px; border-radius: 6px; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); color: var(--mk-slate-900-10); text-decoration: none; margin-bottom: 4px; background: white; border-left: 3px solid transparent; } .menu-item:hover { background-color: var(--mk-slate-100-24); transform: translateX(3px); border-left: 3px solid blue; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } .menu-item-icon { width: 24px; height: 24px; margin-right: 12px; flex-shrink: 0; transition: transform 0.2s ease; } .menu-item:hover .menu-item-icon { transform: scale(1.1); } /* Close Button */ .modal-close-btn { background: none; border: none; font-size: 24px; cursor: pointer; color: var(--mk-slate-600-4); padding: 0 5px; line-height: 1; border-radius: 50%; transition: all 0.2s ease; } .modal-close-btn:hover { color: var(--mk-slate-800-9); background-color: var(--mk-slate-200-6); transform: rotate(90deg); } /* Scrollbar */ .start-modal-container::-webkit-scrollbar { width: 6px; } .start-modal-container::-webkit-scrollbar-track { background: var(--mk-gray-100-9); } .start-modal-container::-webkit-scrollbar-thumb { background: blue; border-radius: 3px; } @media (max-width: 576px) { .start-modal-container { width: 85vw; } .menu-item { padding: 10px; } } /* The .dt-footer rules that used to sit here now live in layouts/partials/css/datatables.html, next to the DataTables stylesheets they belong with, so module_base.html's pages get them too. */ /* Sidebar menu style: keep the taskbar on screen while the content scrolls. .thetop is the row that holds the sidebar and
. Nothing capped its height, so it grew to its content (measured 1706px inside a 900px body); the BODY became the scroller and carried the sticky taskbar off the top, while #scrollable-container — the element actually meant to scroll, hence its overflow-y:auto — never scrolled at all. Capping .thetop at the viewport, plus min-height:0 on the two flex children so they may shrink below their content, hands the scrolling back to #scrollable-container and leaves the taskbar fixed, like the other menu styles. min-height:0 is required: a flex child defaults to min-height:auto and would otherwise refuse to shrink. */ /* ---- Settings ▸ Menu Style ▸ Search (2026-09-30) ---------------------- No launcher: the search screen (/desktop) is where you start, and the logo in the middle of the bar takes you back to it. The module's own tabs on the left stay, so a person can still move around inside Sales or Stock; on the right only the profile menu is kept (`pm-profile`, layouts/partials/profile_menu.html). */ body.hd-nav-search #center-menu-launcher, body.hd-nav-search #main-taskbar .side-bar-collapse, body.hd-nav-search #mac-dock, body.hd-nav-wheel #center-menu-launcher, body.hd-nav-wheel #main-taskbar .side-bar-collapse, body.hd-nav-wheel #mac-dock { display: none !important; } body.hd-nav-search #main-taskbar#main-taskbar .tb-right > *:not(details.pm-profile), body.hd-nav-wheel #main-taskbar#main-taskbar .tb-right > *:not(details.pm-profile) { display: none !important; } /* …and the profile survives every section's focus mode: each section menu hides the whole right cluster with one #main-taskbar (see the note on `.tbs` in taskbar.html), and on this shell the profile is the only way to your account. */ body.hd-nav-search:not(.side-drawer-open) #main-taskbar#main-taskbar .tb-right > details.pm-profile, body.hd-nav-wheel:not(.side-drawer-open) #main-taskbar#main-taskbar .tb-right > details.pm-profile { display: inline-block !important; } body.hd-nav-sidebar .thetop { height: 100vh; overflow: hidden; } body.hd-nav-sidebar main, body.hd-nav-sidebar #scrollable-container { min-height: 0; } /* The drawer OVERLAYS the page; it does not push it. It used to be a plain flex item inside .thetop, so showing it took 16rem away from
and the whole page re-flowed underneath — tables re-measured, the desktop icon grid re-wrapped, and every open/close jumped the content sideways. Taking it out of the flow (position:fixed) and sliding it in on transform means nothing behind it moves: the drawer floats above the page and the taskbar. display:flex !important is deliberate. The markup carries Tailwind's tw-hidden (display:none) as its closed state, and the old toggle animated the element's `display` with an inline style; the open/closed state is now the body.side-drawer-open class alone, so both of those must lose. Off-screen at translateX(-100%) is what "closed" means now. The transition is intentionally NOT !important — partials/effects.html turns it off for .side-bar when the Animation Style setting has window effects disabled, and that rule has to win. */ body.hd-nav-sidebar #sidebar.side-bar { position: fixed; top: 0; left: 0; bottom: 0; /* Wider than the 16rem the markup's tw-w-64 asks for: the menu rows are a 60px icon plus a label, and at 16rem the longer Khmer labels wrapped or truncated. The phone override below throws this away for full-bleed anyway. */ width: 20rem; max-width: 85vw; height: auto; display: flex !important; flex-direction: column; /* visible, not auto: the close handle deliberately sticks out of the right edge, and the inner #side-bar div is the scroller (below). */ overflow: visible; transform: translateX(-100%); transition: transform .25s ease-out; will-change: transform; /* Above the sticky taskbar (z-50) and the backdrop, below a Bootstrap modal (1050) so a dialog opened from a menu link still covers it. */ z-index: 1045; box-shadow: 0 10px 30px rgba(15, 23, 42, .25); } body.hd-nav-sidebar.side-drawer-open #sidebar.side-bar { transform: none; } /* Phone: the drawer takes the whole screen. At 16rem it left a ~130px strip of dimmed page down the side that was too narrow to read and, sitting under the backdrop, could not be touched anyway. right:0 with width:auto, not width:100vw — 100vw counts the scrollbar gutter on the browsers that reserve one and would hang the drawer past the right edge. The rule must stay AFTER the base one above: it matches at the same specificity and wins on order alone. There is deliberately no "outside" left to tap: the way out is the taskbar's Menu button, which the trim keeps above the drawer at z-index 1046, or Escape. */ @media (max-width: 768px) { body.hd-nav-sidebar #sidebar.side-bar { width: auto; max-width: none; right: 0; } } /* The menu list scrolls on its own, so a menu with several groups expanded is reachable to the bottom while the drawer stays pinned to the viewport. min-height:0 is required: a flex child defaults to min-height:auto and would otherwise refuse to shrink below its content. overscroll-behavior stops a flick at the end of the menu from carrying on into the page behind it. */ body.hd-nav-sidebar #sidebar > #side-bar { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } /* Thin, unobtrusive scrollbar — the drawer is only 16rem wide. */ body.hd-nav-sidebar #sidebar > #side-bar::-webkit-scrollbar { width: 6px; } body.hd-nav-sidebar #sidebar > #side-bar::-webkit-scrollbar-thumb { background: rgba(100,116,139,.35); border-radius: 3px; } body.hd-nav-sidebar #sidebar > #side-bar { scrollbar-width: thin; } /* Catches every click that lands outside the drawer and dims the page so the drawer reads as floating above it. visibility (not display) keeps it fadeable both ways; pointer-events go dead with it, so a closed drawer never blocks the page underneath. */ #sidebar-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background: rgba(15, 23, 42, .45); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; } body.side-drawer-open #sidebar-backdrop { opacity: 1; visibility: visible; } /* ---- An open drawer owns the screen ------------------------------------------ While the drawer is open the taskbar is trimmed to the one button that still means anything beside it — Menu, which is the single show/hide control at every width. Everything else in the bar was either hidden behind the drawer or, out to the right of it, sitting under the backdrop and unclickable: a strip of dimmed icons that looked live and was not. Three #main-taskbar in the selector is deliberate, and two is not enough. partials/taskbar.html pins Back and "Back to " visible with `body:not(.desktop-focus-top) #main-taskbar#main-taskbar .tb-left > a.tb-back` + !important — two ids AND three classes AND two elements, which outranks the obvious two-id version of the rule below. Trimmed to just Menu, the bar was showing the Back arrow instead. A third id settles it. */ /* Over the backdrop AND over the drawer, so Menu stays clickable — it is the way back out. The z-index it overrides is an inline style on the element, hence !important. */ body.side-drawer-open #main-taskbar { z-index: 1046 !important; } body.side-drawer-open #main-taskbar#main-taskbar#main-taskbar .tb-center, body.side-drawer-open #main-taskbar#main-taskbar#main-taskbar .tb-left > *:not(.side-bar-collapse), body.side-drawer-open #main-taskbar#main-taskbar#main-taskbar .tb-right > *:not(.tb-drawer-biz):not(.tb-drawer-biz-logo) { display: none !important; } /* The far end of the trimmed bar carries the business name and logo — see the note on the elements in partials/taskbar.html. They are markup that exists on every page and is inert until the drawer opens, so they are hidden by default here rather than in the bar's own styles. min-width:0 on the flex parent is what lets the name's ellipsis work: a flex item defaults to min-width:auto and would push the text past the edge instead of truncating it — on a phone the drawer leaves the pair barely 130px between them. The logo keeps its size while the name gives way, since a squashed logo reads as broken where a shortened name does not. */ .tb-drawer-biz, .tb-drawer-biz-logo { display: none; } body.side-drawer-open #main-taskbar#main-taskbar#main-taskbar .tb-right { min-width: 0; } body.side-drawer-open #main-taskbar#main-taskbar#main-taskbar .tb-right > .tb-drawer-biz { display: block !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 6px; color: var(--mk-white); font-weight: 600; font-size: 14px; line-height: 1.2; } body.side-drawer-open #main-taskbar#main-taskbar#main-taskbar .tb-right > .tb-drawer-biz-logo { display: block !important; flex: 0 0 auto; width: 30px; height: 30px; margin-right: 2px; border-radius: 50%; object-fit: cover; background: var(--mk-white); box-shadow: 0 0 0 1px rgba(255, 255, 255, .45); } /* …and Menu itself stays, whatever else hid it. A section page (Products, Sales, HRM…) swaps the bar for its own module menu with `body.-focus-top … > *:not(.-menu-wrap) { display:none !important }`, which takes Menu down with everything else — trimming the bar to "just the toggle" would otherwise leave an empty bar there. */ body.side-drawer-open #main-taskbar#main-taskbar#main-taskbar .tb-left > .side-bar-collapse { display: inline-flex !important; } /* The bar now floats above the drawer, so park the drawer under it rather than behind it — otherwise the bar eats the first menu row. --tb-h is measured from the live bar when the drawer opens (partials/menu.html): the bar is 40px on a desktop and 56px+border on a phone, and hard-coding either here would drift the moment taskbar.html changed. */ body.hd-nav-sidebar.side-drawer-open #sidebar.side-bar { top: var(--tb-h, 41px); } @media print { #sidebar-backdrop { display: none !important; } body.hd-nav-sidebar #sidebar.side-bar { display: none !important; } } /* The row-number column is a position, not data: grey, so the eye goes to the figures beside it. `td.row-no` is what the DataTables columns set, `th.rtp-num` /`td.rtp-num` what the report templates render. */ table td.row-no, table th.row-no, table td.rtp-num, table th.rtp-num { color: var(--mk-slate-400) !important; } /* Sidebar ▸ a group's SUB-GROUP header (Extra-Advance holds AI, Manufacturing, Pawn Shop …). The captured markup outdents each header by -12px, so its icon sat 12px left of the plain rows in the same list — the group read as two ragged columns. Everything at this level now starts on one line; the sub-group's own children keep their deeper indent (their box carries padding-left:16px). */ .side-bar a.drop_down.sub_drop[style] { margin-left: 0 !important; } /* select2's open list is capped at 200px by the library default in vendor.css. With 13 users or 28 leave types that is a ~436px list crammed into a 200px window — about six rows visible, the rest reached by scrolling inside a small box, which reads as the dropdown being stuck. Three pages had already patched this for themselves (manage_user/show 500px, contact modals 500px, the POS customer picker 480px), so the app was inconsistent as well as cramped. One rule here, 500px everywhere: short lists are unaffected (max-height only bites once the content exceeds it) and long ones show roughly fifteen rows before they scroll. */ .select2-container .select2-results > .select2-results__options, .select2-results__options { max-height: 500px; } /* On a short screen 500px would run past the bottom of the window; cap by viewport there so the list is never taller than the space it has. */ @media (max-height: 700px) { .select2-container .select2-results > .select2-results__options, .select2-results__options { max-height: 60vh; } }