/* Shared UI: the Mobile/Laptop + English/Español switches, and the mobile layout itself. Loaded by all three pages so the switches look and behave identically everywhere. The view is a *choice*, not a screen-width guess: carries view-mobile or view-laptop, and Mobile is the default even on a big screen. Foremen are on phones, and a foreman who opens the site on the office laptop should still see what they'll see in the truck. Laptop view is the opt-in for whoever wants the wide grid. */ /* ---- the switches in the top bar ---- */ .topbar{flex-wrap:wrap} .switches{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap} .seg{display:flex;border:1px solid rgba(255,255,255,.24);border-radius:100px;overflow:hidden} .seg button{ font-family:inherit;font-weight:700;font-size:12px;letter-spacing:.02em; color:#AEB4BF;background:transparent;border:none;padding:8px 14px;cursor:pointer; white-space:nowrap;min-height:36px; } .seg button:hover{color:#fff} .seg button.on{background:var(--accent);color:#fff} .seg button:focus-visible{outline:2px solid #fff;outline-offset:-2px} /* On a narrow bar the switches drop to their own full-width row rather than being squeezed next to the logo — "English" and "Español" spelled out need the room. */ @media (max-width:560px){ .switches{width:100%;margin-left:0;gap:6px} .seg{flex:1} .seg button{flex:1;text-align:center;padding:9px 6px;font-size:12px} } /* ---- mobile view ---- The production grid is a table on a laptop. On a phone a table means pinching and sideways scrolling to read one crew's numbers, so the same markup is re-laid-out as one card per subcontractor with the unit codes as labelled boxes. Nothing is hidden — every column still appears, it just stacks. */ html.view-mobile .wrap{max-width:620px} html.view-mobile .scroller{overflow-x:visible} html.view-mobile table{min-width:0;width:100%;display:block} html.view-mobile thead{display:none} html.view-mobile tbody{display:block} html.view-mobile tbody tr{ display:flex;flex-wrap:wrap;gap:10px; padding:13px;border-bottom:1px solid var(--line-soft);position:relative; } html.view-mobile tbody tr:last-child{border-bottom:none} html.view-mobile tbody tr.paid{box-shadow:inset 3px 0 0 var(--paid)} html.view-mobile tbody td{ display:block;padding:0;border:none;flex:0 0 calc(33.333% - 7px);min-width:0; } /* the subcontractor name spans the card, and is no longer stuck to the left edge */ html.view-mobile td.col-sub{ position:static;flex:1 0 100%;box-shadow:none;background:transparent; padding:0;min-width:0; } html.view-mobile td.street{flex:1 0 100%} html.view-mobile td.street input{min-width:0;width:100%;font-size:15px} /* Each number box gets the column heading back as its own label. */ html.view-mobile td.num::before, html.view-mobile td.street::before{ content:attr(data-label); display:block;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; color:var(--ink-soft);margin-bottom:4px; } html.view-mobile td.num input{min-width:0;width:100%;font-size:16px;padding:12px 26px 12px 6px} /* Remove / reject. This used to float in the card's top-right corner, where it sat *underneath* the full-width subcontractor dropdown and could be neither seen nor tapped. On a phone it is now a labelled button on its own line at the end of the card — the label comes from data-mlabel so each page can word it its own way. */ html.view-mobile td.col-x{position:static;flex:1 0 100%;width:auto} html.view-mobile td.col-x .rowx{ width:100%;display:flex;align-items:center;justify-content:center;gap:8px; border:1.5px solid var(--line);border-radius:8px;padding:11px 12px; font-family:inherit;font-size:13px;font-weight:700;color:var(--ink-soft); } html.view-mobile td.col-x .rowx::after{content:attr(data-mlabel)} html.view-mobile td.col-x .rowx:hover, html.view-mobile td.col-x .rowx:active{border-color:var(--bad,#C13322)} /* Two across on the narrowest phones — three 92px boxes will not fit on a 320px screen. */ @media (max-width:400px){ html.view-mobile tbody td{flex:0 0 calc(50% - 5px)} } /* Bigger touch targets and less cramped spacing throughout mobile view. */ html.view-mobile .sheet-head{grid-template-columns:1fr;gap:14px} html.view-mobile .extras{grid-template-columns:1fr} html.view-mobile .grid{grid-template-columns:1fr} html.view-mobile .units{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))} html.view-mobile .sheet-foot, html.view-mobile .acts{flex-direction:column;align-items:stretch} html.view-mobile .sheet-foot button, html.view-mobile .acts button, html.view-mobile .sheet-foot .btn{width:100%;justify-content:center;margin-left:0} html.view-mobile .sheet-foot .spacer{display:none} html.view-mobile .btn-primary, html.view-mobile .approve{padding:15px 20px;font-size:16px} html.view-mobile .submit-row{justify-content:stretch} html.view-mobile .submit-row .btn-primary{width:100%} html.view-mobile .tabs{gap:6px} html.view-mobile .tab{padding:12px 8px;font-size:12.5px} html.view-mobile .grid-bar{flex-wrap:wrap} html.view-mobile .addcode-wrap{margin-left:0;width:100%} html.view-mobile .addcode-wrap .btn{width:100%;justify-content:center} /* ---- the one dropdown ---- Moved here from index.html so all three pages share a single dropdown. A styled trigger opens one floating panel with a search box; long lists get a fade at the bottom so it is obvious there is more below. Every dropdown on the site uses this, including ones that used to be a plain