/* ============================================================ Mobile / phone-first overrides ------------------------------------------------------------ All rules in this file live inside @media (max-width: 768px) so desktop / tablet-landscape renders are byte-identical. Single home for mobile tweaks so future adjustments land in one place instead of being sprinkled across Site.css / Forms.css / paperless-modern.css. Loaded AFTER all other stylesheets from _Layout.cshtml + _HomeLayout.cshtml so any specificity-tied rules here win. Breakpoints 768px primary phone/tablet-portrait cutoff 480px tighter narrow-phone tweaks Top-3 blockers this file addresses: 1. Sidebar (220px collapsed-to-64px on desktop) becomes a slide-in over content with a backdrop on phones, freeing the full viewport width for the main content. 2. Kendo grids get horizontal-scroll containers + a few non-essential columns hidden so the action column (Re-Inventory / Copy to Property / View HTML) is reachable without sideways swiping. 3. Kendo Window modals (Re-Inventory, Copy to Property, Send Paperless) jump from "75% width / 500px tall" to near-full-screen so the form fields are usable on a 375px phone. Plus: form #side-menu (child sections) stacks above the form on very narrow widths, grid checkboxes scale up for touch, grid action links get a bigger tap area. ============================================================ */ /* ============================================================ MOBILE BREAKPOINT (<=768px) ============================================================ */ @media (max-width: 768px) { /* ----- Sidebar: slide-in over content + backdrop ----- */ #sidebar { transform: translateX(-100%); transition: transform 0.2s ease; width: 220px !important; z-index: 1040; } body.sidebar-open #sidebar { transform: translateX(0); } /* nav-text labels: force visible while the slide-in panel is open (desktop collapsed-state CSS sets opacity: 0 for the icon-only look — we want full labels inside the slide-in). */ body.sidebar-open #sidebar .nav-text, body.sidebar-open #sidebar .sidebar-brand-text { opacity: 1 !important; } #sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 1039; } body.sidebar-open #sidebar-backdrop { display: block; } /* Stop the page scrolling behind the open slide-in. */ body.sidebar-open { overflow: hidden; } /* Main content takes the full viewport width on phones. Overrides Site.css `#main-content-wrapper { margin-left: 220px }` and the collapsed variant `margin-left: 64px`. */ #main-content-wrapper { margin-left: 0 !important; } /* Hamburger toggle button — added inside #top-bar by _Layout.cshtml. The button carries inline style="display:none" to keep it hidden on desktop without depending on the cascade; !important here is required to beat that inline style on phones. */ #sidebar-toggle { display: inline-flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: 0.5rem; background: transparent; border: none; color: #4A5568; font-size: 1.25rem; cursor: pointer; border-radius: 0.25rem; z-index: 1041; } #sidebar-toggle:hover, #sidebar-toggle:focus { background: rgba(0, 0, 0, 0.05); outline: none; } /* Tighter top-bar padding to make room for the hamburger. */ #top-bar { padding: 0 0.75rem; } /* ----- Kendo grids: horizontal-scroll fallback + column hiding ----- */ /* Catch-all: any grid that doesn't have column-hide classes still becomes swipeable instead of cropped. */ .k-grid { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Mark-up driven column hide. Views opt rows in by adding HtmlAttributes(new { @class = "col-hide-mobile" }) on columns that aren't essential for field workflows. */ .k-grid .col-hide-mobile, .k-grid-header .col-hide-mobile { display: none !important; } /* Bigger tap area on grid action links (Re-Inventory / Copy / Reset Password / Send Reset Email / View HTML / etc.). */ .k-grid td a { display: inline-block; padding: 0.5rem 0.25rem; min-height: 32px; } /* Grid checkboxes: 16px native is well under the 40px WCAG touch target. transform scale gives a visual bump without breaking the grid layout. */ .k-grid input[type="checkbox"] { transform: scale(1.4); margin: 0.25rem; } /* ----- Kendo Window: take over the screen on phones ----- */ /* Re-Inventory / Copy to Property / Send Paperless / Sign for Receipt windows all .setOptions({ width: "75%", height: "500px" }) which is cramped on a 375px phone. Override Kendo's inline width/height with !important. */ .k-window { width: 95vw !important; height: 90vh !important; max-height: 90vh !important; left: 2.5vw !important; top: 5vh !important; position: fixed !important; } .k-window .k-window-content { padding: 0.75rem !important; } /* Iframe inside Kendo Window — used by the Re-Inventory etc. modals — fill the available space. */ .k-window .k-content-frame { width: 100% !important; height: calc(90vh - 50px) !important; } /* ----- Form button rows wrap ----- */ /* Action buttons at the top of Property Dashboard / Client Dashboard etc. don't have flex-wrap in inline styles. */ .button, .btn-teal, .btn-outline-teal { margin-top: 0.25rem; margin-bottom: 0.25rem; } } /* ============================================================ NARROW PHONE BREAKPOINT (<=480px) ============================================================ */ @media (max-width: 480px) { /* Form child-section menu (#side-menu) — at 800px Site.css puts it position:absolute width:160px which overlaps the form on very narrow phones. Stack it above the form content instead. */ #side-menu { position: static !important; width: 100% !important; margin-bottom: 1rem; } /* Body padding tightens further. */ #main-content-wrapper > main { padding: 0.75rem; } /* TabStrip headers scroll horizontally on very narrow widths so a Client Edit page with 6+ tabs doesn't wrap weirdly. */ .k-tabstrip > .k-tabstrip-items { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; } .k-tabstrip > .k-tabstrip-items .k-item { flex-shrink: 0; } }