/* grace-mobile-nav.css — MOBILE_HAMBURGER_BOTTOM_2026_07_28 * Oscar: the menu button belongs at the BOTTOM CENTER on phones, across every Grace * surface. Store owners and associates hold a phone one-handed while working, and the * top-left corner is the hardest place on a modern phone to reach with a thumb. * * One rule set, four surfaces (owner portal, employee home, employee 360, Command * Center). Each page's own media query still decides WHETHER its hamburger exists and * hides it while its drawer is open; this file only moves the one already showing. * Desktop is untouched — above the breakpoint the sidebar is permanent. * * Loaded FIRST on every page (the owner portal has no of its own, so the link is * the document's first node). Anything the pages set with !important would therefore win * on a specificity tie, which is why these selectors carry `html body` / `body[class]`. * * Served by both apps at /grace-mobile-nav.css. */ @media (max-width: 760px) { html body .ep-hamburger, html body .ham-btn, html body .emp-ham, html body .cc-ham { position: fixed !important; /* centred on the thumb arc, clear of the iOS home indicator and Safari's bottom URL bar (env() falls back to 0 where it is unsupported). */ left: 50% !important; transform: translateX(-50%) !important; bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important; top: auto !important; right: auto !important; /* Above page content, deliberately BELOW this codebase's overlays and drawers (which sit at 9000+), so any sheet that opens covers the button instead of the button floating on top of it. */ z-index: 900 !important; width: 56px !important; height: 56px !important; border-radius: 50% !important; /* the sidebar's own `order` tricks no longer apply once it is out of flow */ order: 0 !important; margin: 0 !important; padding: 0 !important; box-shadow: 0 6px 22px rgba(0, 0, 0, .28), 0 0 0 1px rgba(0, 0, 0, .04) !important; background: var(--card, #fff) !important; border: 1px solid var(--div, #d9dee3) !important; /* Grace gold marks it as the primary control on the screen */ color: var(--gold, #F5A623) !important; } html body .ep-hamburger svg, html body .ham-btn svg, html body .emp-ham svg, html body .cc-ham svg { width: 24px !important; height: 24px !important; } /* the employee button draws its icon as a text glyph, not an svg */ html body .ham-btn { font-size: 24px !important; } html body .ep-hamburger:active, html body .ham-btn:active, html body .emp-ham:active, html body .cc-ham:active { transform: translateX(-50%) scale(.94) !important; } /* Nothing hides underneath the button at the end of a scroll. `body[class]` outranks the pages' own `html,body{padding:0}` resets, which load after this file. */ html body, html body[class] { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; } /* While its drawer is open the button would float on top of the menu it opened. Each surface signals "open" differently: the owner portal and Command Center put a class on (…-mobile-open, NOT …-sb-on — that one means the sidebar is docked), employee-home opens #moresheet, employee-360 puts .emp-drawer on #app. */ /* The owner portal shows its button with `body.ep-sb-on .header .ep-hamburger` (3 classes), so hiding it needs more weight than that. Deliberately no :has() — it is unsupported in some of the shells these pages run in, and a rule that silently never matches is worse than no rule. Everything here is a plain ancestor→descendant match, which works everywhere. */ html body.ep-sb-on.ep-sb-mobile-open .header .ep-hamburger, html body.ep-sb-mobile-open .ep-hamburger, html body.cc-sb-mobile-open .cc-ham, html body #app.emp-drawer .emp-ham { display: none !important; } /* ── Icon menu sheet (ICON_MENU_2026_07_29) ─────────────────────────────── The bottom hamburger opens the sidebar as ICON TILES rather than a long text list. Built live from the sidebar by grace-icon-menu.js, so it always mirrors the arrangement made in Sidebar Layout. */ html body #gim-sheet { position: fixed !important; inset: 0 !important; z-index: 9600 !important; /* above the FAB (900) and page overlays */ background: rgba(0, 0, 0, .5) !important; display: none !important; align-items: flex-end !important; overscroll-behavior: contain !important; } html body #gim-sheet.open { display: flex !important; } html body #gim-sheet .gim-card { width: 100% !important; max-height: 88vh !important; display: flex !important; flex-direction: column !important; background: var(--card, #fff) !important; color: var(--text, #1a1a1a) !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-top: 2px solid var(--gold, #F5A623) !important; box-shadow: 0 -10px 40px rgba(0, 0, 0, .35) !important; padding-bottom: env(safe-area-inset-bottom, 0px) !important; } html body #gim-sheet .gim-top { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 14px 18px 10px !important; border-bottom: 1px solid var(--div, #d9dee3) !important; font-size: 15px !important; } html body #gim-sheet .gim-top b { flex: 1 !important; } html body #gim-sheet .gim-back { background: none !important; border: 0 !important; font-size: 20px !important; color: var(--gold, #F5A623) !important; cursor: pointer !important; padding: 2px 10px 2px 0 !important; line-height: 1 !important; } html body #gim-sheet .gim-emoji { font-size: 20px !important; line-height: 1 !important; } html body #gim-sheet .gim-x { background: none !important; border: 0 !important; font-size: 19px !important; color: var(--muted, #6a7077) !important; cursor: pointer !important; padding: 4px 6px !important; } html body #gim-sheet .gim-body { overflow: auto !important; padding: 4px 0 16px !important; } html body #gim-sheet .gim-h { font-size: 11px !important; font-weight: 700 !important; letter-spacing: .07em !important; text-transform: uppercase !important; color: var(--muted, #6a7077) !important; margin: 14px 16px 6px !important; } /* SIDEBAR_LIST_2026_07_29 — Oscar chose a vertical sidebar-style list over an icon grid (a 12-tile grid read too busy at full store count). Full-width rows, a solid colour chip on the left, alternating row tint for separation, and a chevron on the rows that drill into a section. Colour lives on the CHIP only, set inline per row by grace-icon-menu.js — vivid for add-on tools, neutral graphite for navigation. */ html body #gim-sheet .gim-grid { display: flex !important; flex-direction: column !important; gap: 0 !important; } html body #gim-sheet .gim-item { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 13px !important; width: 100% !important; padding: 11px 16px !important; min-height: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--text, #1a1a1a) !important; font: inherit !important; font-size: 15px !important; font-weight: 600 !important; text-align: left !important; cursor: pointer !important; } /* Zebra rows — a 5% wash of the text colour reads as light-grey on a white sheet and as a slightly lighter band on a dark sheet, so one rule covers both themes. */ html body #gim-sheet .gim-grid .gim-item:nth-child(even) { background: color-mix(in srgb, var(--text, #1a1a1a) 5%, transparent) !important; } html body #gim-sheet .gim-item:active { background: color-mix(in srgb, var(--text, #1a1a1a) 11%, transparent) !important; } html body #gim-sheet .gim-ic { width: 34px !important; height: 34px !important; border-radius: 9px !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #fff !important; font-size: 18px !important; flex: none !important; } html body #gim-sheet .gim-ic svg { width: 19px !important; height: 19px !important; color: #fff !important; } html body #gim-sheet .gim-lb { flex: 1 !important; min-width: 0 !important; line-height: 1.3 !important; text-align: left !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body #gim-sheet .gim-chev { flex: none !important; color: var(--muted, #6a7077) !important; font-size: 22px !important; line-height: 1 !important; opacity: .7 !important; } html body #gim-sheet .gim-sys { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 18px !important; padding-top: 14px !important; border-top: 1px solid var(--div, #d9dee3) !important; } html body #gim-sheet .gim-sysbtn { flex: 1 1 auto !important; padding: 10px 12px !important; background: transparent !important; border: 1px solid var(--div, #d9dee3) !important; border-radius: 10px !important; color: var(--soft, #3a3f47) !important; font: inherit !important; font-size: 13px !important; cursor: pointer !important; } /* ── Tool-page top bar ──────────────────────────────────────────────────── THEME_MENU_ONSCREEN_2026_07_28 — a single-row flex top bar (title + store + Share + Print + Reload + theme) is wider than a phone, so the row overflowed and carried the theme button — and the menu it opens — off the right edge. Let the bar wrap instead. */ html body .topbar { flex-wrap: wrap !important; row-gap: 8px !important; } /* Belt and braces: pin the dropdown to the viewport so it stays fully on screen even if some other page's bar still overflows. */ html body .gt-menu { position: fixed !important; top: auto !important; left: auto !important; right: 8px !important; max-width: calc(100vw - 16px) !important; max-height: 70vh !important; overflow: auto !important; } /* IC_ROW_STACK_2026_08_02 — Important Contacts rows: 8 controls on one nowrap flex line. On a phone .ic-main (flex:1 1 0; min-width:0) collapsed to 0px and its text spilled over the phone number. Wrap the row and give the two text blocks a real minimum instead. */ html body .ic-row { flex-wrap: wrap !important; row-gap: 6px !important; align-items: center !important; } html body .ic-row .ic-main { flex: 1 1 150px !important; min-width: 0 !important; overflow-wrap: anywhere !important; } /* IC_ROW_TIGHTEN_2026_08_02 - letting the phone GROW pushed the delete button onto a third line on its own. Natural width instead, so the whole control cluster fits line 2. */ html body .ic-row .ic-contact { flex: 0 0 auto !important; min-width: 0 !important; } html body .ic-row { column-gap: 8px !important; } /* the "Visible" caption was pinned to 42px, which clipped it once the row wrapped */ html body .ic-row .ic-vlbl { width: auto !important; } /* keep the row's own controls from being the thing that forces a horizontal scroll */ html body .ic-panel, html body .ic-cols { overflow-x: hidden !important; } } /* NOTIF_BTN_2026_08_15 - notification action buttons, platform-wide. --soft is a TEXT color in Grace's tokens, never a surface; a page that paints a button with it goes dark-on-dark. This guard keeps every notification button on the row's own surface/text pair. !important because this sheet loads before page inline styles and would lose the tie otherwise. */ html body .ep-notif-done{ background:var(--surface,#fff)!important; color:var(--text,#0f172a)!important; border:1px solid var(--line,#e5e7eb)!important; } html body .ep-notif-done:hover{background:var(--line,#eef2f7)!important}