/* ============================================================ eBrix UI — responsive layer over W3.CSS Loaded on every app page via Header.php. Keeps the existing amber/navy identity, modernised. This sheet fully owns the top navigation. css/ebrix.css (the legacy nav sheet) is no longer loaded: it set overflow:hidden on both .topnav and .dropdown, which clipped the dropdown panels, and it carried a 915px breakpoint that conflicted with the 1060px one used here. ============================================================ */ :root { /* brand */ --ebx-navy: #16265e; --ebx-navy-700: #101b45; --ebx-navy-300: #35479a; --ebx-amber: #ffc107; --ebx-amber-600: #e8ac00; --ebx-amber-100: #fff3cd; /* neutrals */ --ebx-ink: #1b2130; --ebx-muted: #5b6577; --ebx-bg: #eef1f6; --ebx-surface: #ffffff; --ebx-line: #dde3ec; /* status */ --ebx-ok: #12805c; --ebx-warn: #b26a00; --ebx-danger: #c62828; --ebx-info: #1565c0; /* chrome metrics — everything else derives from these */ --ebx-topbar-h: 56px; --ebx-nav-h: 44px; --ebx-header-h: calc(var(--ebx-topbar-h) + var(--ebx-nav-h)); --ebx-radius: 10px; --ebx-radius-s: 6px; --ebx-shadow: 0 1px 2px rgba(16,27,69,.06), 0 2px 8px rgba(16,27,69,.08); --ebx-shadow-l: 0 4px 16px rgba(16,27,69,.14); --ebx-maxw: 1680px; } @media screen and (max-width: 1060px) { :root { --ebx-topbar-h: 52px; --ebx-nav-h: 44px; } } /* ---------- base ---------- */ html { -webkit-text-size-adjust: 100%; } /* body is a flex column so .footer2 is pushed to the bottom of the viewport on short pages instead of floating up under the content with dead space below it. .ebx-chrome is position:fixed and so contributes no height here. No height on — min-height:100vh already measures the viewport, and constraining only adds a box for scroll logic to trip over. */ body { margin: 0; background: var(--ebx-bg); color: var(--ebx-ink); font-family: "Segoe UI", Roboto, Arial, sans-serif; font-size: 14px; line-height: 1.5; display: flex; flex-direction: column; min-height: 100vh; } /* min-height:100dvh where supported, so mobile browser chrome does not push the footer below the fold */ @supports (min-height: 100dvh) { body { min-height: 100dvh; } } /* legacy pages set line-height:1.8 inline on body/html — too airy for data screens */ body, html { line-height: 1.5; } * { box-sizing: border-box; } img, svg, video { max-width: 100%; height: auto; } /* never let a page scroll sideways as a whole; wide things scroll in their own box */ html, body { overflow-x: hidden; } a { color: var(--ebx-navy-300); } a:hover { color: var(--ebx-navy); } /* ---------- app chrome ---------- */ .ebx-chrome { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; box-shadow: var(--ebx-shadow); } /* w3.css ships .w3-modal at z-index:3, far below the fixed chrome above — every w3-modal dialog on every page (not just one screen) rendered with its top edge hidden underneath the nav bar instead of over it. Raised above the chrome and its dropdown (z-index:1200), kept below the "wait" loading overlay (z-index:1500 in Footer.php) so a save-in-progress spinner still reads as on top of an open dialog. */ .w3-modal { z-index: 1300; } /* w3.css centers .w3-modal-content on desktop via margin:auto against a fixed width, but at <=600px it switches to margin:0 10px (a FIXED gutter, not an auto one) plus width:auto!important. That's fine as long as nothing else caps the width — but most modals on this site also set their own inline style="max-width:...px" (350–600px, sized for a comfortable dialog). Once the viewport is wider than that cap + 20px, the box stops filling the available space, and a fixed 10px/10px margin doesn't redistribute the leftover — it just sits empty on the right, pinning the dialog to the left edge instead of centering it. Forcing an auto margin here fixes it for every modal regardless of what width/max-width each page sets, without touching every page individually. */ @media screen and (max-width: 600px) { .w3-modal-content { max-width: calc(100% - 20px) !important; margin: 0 auto !important; } } /* Pin a modal's header/footer and let only its body scroll, so neither a long message nor a keyboard-triggered scroll-into-view can carry the header off screen. Opt in per modal with class="... ebx-modalfix" on the .w3-modal-content div — shared here rather than copy-pasted per page (vehicleRates.php, RateList.php, EditItem.php use it). */ .ebx-modalfix { display: flex; flex-direction: column; max-height: 85vh; } .ebx-modalfix > header, .ebx-modalfix > footer { flex: 0 0 auto; } .ebx-modalfix > .w3-container { flex: 1 1 auto; overflow-y: auto; } .ebx-topbar { height: var(--ebx-topbar-h); background: linear-gradient(180deg, var(--ebx-amber) 0%, var(--ebx-amber-600) 100%); color: #3a2c00; display: flex; align-items: center; gap: 12px; padding: 0 14px; } .ebx-topbar__logo { display: flex; align-items: center; flex: 0 0 auto; } .ebx-topbar__logo img { height: 30px; width: auto; display: block; } .ebx-topbar__org { flex: 1 1 auto; min-width: 0; font-size: 17px; font-weight: 700; letter-spacing: .2px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ebx-topbar__user { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; max-width: 30%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ebx-topbar__user .fa { opacity: .75; } @media screen and (max-width: 1060px) { .ebx-topbar { padding: 0 10px; gap: 8px; } .ebx-topbar__logo img { height: 26px; } .ebx-topbar__org { font-size: 15px; text-align: left; } /* the name is the least useful thing on a phone — drop the label, keep the icon */ .ebx-topbar__user span { display: none; } } /* ---------- top navigation ---------- */ .topnav { background: var(--ebx-navy); min-height: var(--ebx-nav-h); display: flex; align-items: stretch; flex-wrap: nowrap; position: relative; overflow: visible; /* legacy rule was overflow:hidden — killed the dropdowns */ } .topnav > a { float: none; display: flex; align-items: center; color: #e8ecf7; padding: 0 13px; font-size: 13.5px; text-decoration: none; white-space: nowrap; border: 0; background: transparent; } .topnav > a:hover { background: var(--ebx-navy-700); color: #fff; } .topnav .active { background: rgba(255,255,255,.14); color: #fff; } /* overflow must be reset: ebrix.css sets .dropdown{overflow:hidden}, which clips the absolutely-positioned panel to the 44px button box and makes every menu item invisible and unclickable on desktop. */ .dropdown { float: none; position: relative; display: flex; overflow: visible; } .dropdown .dropbtn { display: flex; align-items: center; gap: 5px; height: 100%; font-size: 13.5px; font-family: inherit; color: #e8ecf7; background: transparent; border: 0; outline: none; padding: 0 12px; margin: 0; cursor: pointer; white-space: nowrap; } .topnav a:hover, .dropdown:hover .dropbtn { background: var(--ebx-navy-700); color: #fff; } .dropdown-content { display: none; position: absolute; top: 100%; left: 0; min-width: 216px; background: var(--ebx-surface); border: 1px solid var(--ebx-line); border-radius: 0 0 var(--ebx-radius-s) var(--ebx-radius-s); box-shadow: var(--ebx-shadow-l); padding: 5px 0; z-index: 1200; } .dropdown-content a { float: none; display: block; color: var(--ebx-ink); text-align: left; padding: 8px 14px; font-size: 13.5px; text-decoration: none; border-left: 3px solid transparent; } .dropdown-content a:hover { background: var(--ebx-amber-100); border-left-color: var(--ebx-amber); color: var(--ebx-ink); } /* menus near the right edge open leftwards — ebrix-ui.js measures and flips them */ .dropdown.ebx-flip .dropdown-content { left: auto; right: 0; } .topnav .icon { display: none; } /* hover only where hover actually exists — touch uses the click handler */ @media (hover: hover) and (min-width: 1061px) { .dropdown:hover .dropdown-content { display: block; } } .dropdown.ebx-open .dropdown-content { display: block; } /* ---------- mobile navigation ---------- */ @media screen and (max-width: 1060px) { .topnav { display: block; height: var(--ebx-nav-h); overflow: visible; } /* the hamburger */ .topnav a.icon { display: flex !important; align-items: center; position: absolute; right: 0; top: 0; height: var(--ebx-nav-h); padding: 0 16px; font-size: 20px !important; color: #fff; } /* everything else hides until the drawer is opened */ .topnav > a:not(.icon), .topnav .dropdown { display: none; } .topnav.responsive { position: relative; height: auto; } .topnav.responsive .ebx-drawer-scroll, .topnav.responsive > a:not(.icon), .topnav.responsive .dropdown { display: block; } /* drawer overlays the page instead of pushing it, so the header height stays fixed */ .topnav.responsive > a:not(.icon), .topnav.responsive .dropdown { position: relative; } .topnav.responsive { max-height: calc(100vh - var(--ebx-topbar-h)); overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: var(--ebx-shadow-l); } .topnav.responsive > a:not(.icon) { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.09); font-size: 15px; } .topnav.responsive .dropdown { width: 100%; } /* ebrix.css hides .dropbtn below 915px; the drawer has to put it back */ .topnav.responsive .dropdown .dropbtn { display: flex !important; width: 100%; text-align: left; justify-content: space-between; padding: 12px 16px; font-size: 15px; border-top: 1px solid rgba(255,255,255,.09); } /* accordion: no hover on touch, so JS toggles .ebx-open */ .topnav.responsive .dropdown-content { position: static; display: none; min-width: 0; width: 100%; border: 0; border-radius: 0; box-shadow: none; background: var(--ebx-navy-700); padding: 0; } .topnav.responsive .dropdown.ebx-open .dropdown-content { display: block; } .topnav.responsive .dropdown-content a { color: #d9e0f2; padding: 11px 16px 11px 32px; font-size: 14px; border-left: 0; border-top: 1px solid rgba(255,255,255,.06); } .topnav.responsive .dropdown-content a:hover { background: rgba(255,255,255,.08); color: #fff; } .topnav.responsive .dropbtn .fa-caret-down { transition: transform .18s ease; } .topnav.responsive .dropdown.ebx-open .dropbtn .fa-caret-down { transform: rotate(180deg); } } /* ---------- page container ---------- */ #cc, .ebx-page { max-width: var(--ebx-maxw); margin: 0 auto; padding: calc(var(--ebx-header-h) + 12px) 16px 14px !important; /* keep the natural content height — .footer2 does the pushing, see below, so the end-of-page action bar stays directly under the content instead of being stranded above a stretched container */ flex: 0 0 auto; width: 100%; } @media screen and (max-width: 1060px) { #cc, .ebx-page { padding: calc(var(--ebx-header-h) + 12px) 10px 20px !important; } } /* ---------- tables ---------- ~450 tables in the app, only 21 marked w3-responsive. js/ebrix-ui.js wraps every one of them in .ebx-tablewrap. */ .ebx-tablewrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--ebx-surface); border: 1px solid var(--ebx-line); border-radius: var(--ebx-radius); box-shadow: var(--ebx-shadow); margin-bottom: 14px; } .ebx-tablewrap > table { margin: 0; min-width: 100%; } .ebx-tablewrap > table th, .ebx-tablewrap > table td { white-space: nowrap; } /* let genuinely long text wrap rather than stretch the table forever */ .ebx-tablewrap > table td.ebx-wrap, .ebx-tablewrap > table td[colspan] { white-space: normal; } .w3-table th, .w3-table-all th { font-weight: 600; } .ebx-tablewrap > table thead th { position: sticky; top: 0; z-index: 2; background: var(--ebx-navy); color: #fff; } /* nested layout tables (used for forms) must not get the card treatment */ .ebx-tablewrap .ebx-tablewrap { border: 0; box-shadow: none; background: transparent; margin-bottom: 0; } /* a subtle hint that a table scrolls sideways */ .ebx-tablewrap.ebx-scrollable { position: relative; } .ebx-tablewrap.ebx-scrollable::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 22px; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(22,38,94,.10)); border-radius: 0 var(--ebx-radius) var(--ebx-radius) 0; } @media screen and (max-width: 1060px) { .w3-table td, .w3-table th, .w3-table-all td, .w3-table-all th { padding: 7px 8px; font-size: 13px; } } /* #tk (46 pages) and #tx (24 pages) were styled in Header.php's inline