becomes a bordered card; each | is a "Label: control" line.
Labels come from the fixed column order via :nth-child ::before — the
markup/order in renderRows is unchanged, no data-label needed. Every
field stays visible + editable; nothing is hidden. Desktop is untouched
(all rules live inside this @media block). */
table.encode{min-width:0;width:100%;display:block;}
table.encode thead{display:none;}
table.encode tbody{display:block;}
table.encode tr{
display:block;border:1px solid var(--border);border-radius:8px;
background:var(--surface);padding:6px 10px 10px;margin-bottom:12px;
}
table.encode td{
display:flex;align-items:center;gap:8px;width:auto !important;
padding:5px 0;border-bottom:1px solid var(--border);
}
table.encode tr td:last-child{border-bottom:none;}
table.encode td::before{
flex:0 0 40%;max-width:40%;
font-size:11px;text-transform:uppercase;letter-spacing:.03em;
color:var(--text-secondary);font-weight:600;
}
/* Column-order labels (renderRows td order is fixed). */
table.encode td:nth-child(1)::before{content:"#";}
table.encode td:nth-child(2)::before{content:"Item";}
table.encode td:nth-child(3)::before{content:"Category";}
table.encode td:nth-child(4)::before{content:"Subcategory";}
table.encode td:nth-child(5)::before{content:"Department";}
table.encode td:nth-child(6)::before{content:"Type";}
table.encode td:nth-child(7)::before{content:"Qty";}
table.encode td:nth-child(8)::before{content:"Unit";}
table.encode td:nth-child(9)::before{content:"Unit price";}
table.encode td:nth-child(10)::before{content:"Total";}
table.encode td.rowdel::before{display:none;}
/* Row number: small muted line, not a full-height cell. */
table.encode td:nth-child(1){
justify-content:flex-start;color:var(--text-muted);font-size:12px;
padding-top:2px;padding-bottom:2px;border-bottom:none;
}
table.encode td:nth-child(1)::before{color:var(--text-secondary);}
/* The field control fills the remaining width of each line. */
table.encode td > input,
table.encode td > select,
table.encode td > .cellfill{flex:1 1 auto;min-width:0;}
table.encode input,table.encode select{
border:1px solid var(--border);background:var(--surface);
}
/* Remove (✕) control: right-aligned, no label. */
table.encode td.rowdel{justify-content:flex-end;}
/* 2B scan cue stays intact inside the stacked line — amber bar + PHOTO chip. */
table.encode td .cellfill.scanned{padding:2px 4px;}
/* Snap-invite on phones: hide the camera glyph, let the text use the full
width, and stretch the two buttons edge-to-edge on their own line. */
.scan-invite{gap:10px;}
.scan-invite-icon{display:none;}
.scan-invite > span:last-of-type{width:100%;}
.scan-invite .btn{flex:1;min-width:0;}
.detail-grid{grid-template-columns:1fr;}
.totals-bar{gap:16px;}
.filter-bar{padding:10px 12px;}
/* The 2-up card grid moves onto the BAND, not the strip: the strip stacks
its bands, each band lays its own figures out two across. Left on the
strip, the grid items would be the bands rather than the figures and the
whole phone layout would collapse into three tall single columns. */
.ap-summary{display:flex;flex-direction:column;gap:12px;}
.ap-summary-section{display:flex;flex-direction:column;gap:8px;}
.ap-summary-figures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;}
.ap-summary-headline,.ap-summary-note{grid-column:1/-1;}
.ap-summary-divider{grid-column:1/-1;align-self:auto;border-left:0;border-top:1px solid var(--border);padding:10px 0 0;}
.ap-summary-group{min-width:0;}
.ap-summary-value{white-space:normal;}
.ap-summary-marker{display:block;}
.save-bar{flex-wrap:wrap;}
.save-bar .btn{flex:1;min-width:140px;}
.lightbox img{max-width:95%;max-height:90%;}
/* Panel headers now carry controls (search, selects, buttons) — let them wrap. */
.panel-header{flex-wrap:wrap;gap:8px;row-gap:8px;}
.panel-header > span{flex-wrap:wrap;max-width:100%;}
.panel-header input[type="search"]{width:100% !important;min-width:0;}
.panel-header select{max-width:46vw;}
/* Stat cards: 2-up needs smaller values so peso amounts fit. */
.card-stat .value{font-size:17px;word-break:break-word;}
/* Dashboard: Sales Trend + Top Categories stack instead of squeezing 2-up. */
#dashSalesRow{grid-template-columns:1fr !important;}
/* Costing: recipe list + detail stack on phones. */
#costRecipeRow{grid-template-columns:1fr !important;}
/* Toasts span the phone width instead of hugging a 360px column. */
#toastWrap{left:12px;right:12px;max-width:none;}
/* Modals: tighter padding, near-full width. */
.modal{padding:14px 8px;}
.modal-card{padding:18px 14px;}
.modal-close{top:8px;right:8px;}
.ob-compare-grid{grid-template-columns:minmax(86px,1.1fr) repeat(2,minmax(0,1fr));font-size:11.5px;}
.ob-compare-grid > div{padding:6px 5px;}
#tplModal .modal-card{padding:16px 10px;}
.tpl-mode-row{align-items:stretch;}
.tpl-mode-switch{width:100%;}
.tpl-mode-switch button{flex:1;}
.tpl-toolbar{gap:4px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;}
.tpl-toolbar button,.tpl-toolbar select{flex:0 0 auto;min-height:40px;}
.tpl-visual{min-height:280px;max-height:44vh;padding:13px 10px;font-size:15px;}
.tpl-insert-list{max-height:112px;overflow-y:auto;align-content:flex-start;}
.tpl-preview iframe{height:300px;}
/* Receipt & POS line items: stack each item as labeled rows instead of a
wide table that scrolls off-screen. Labels come from each td's
data-label, so tables with different column orders all read correctly.
No horizontal scroll, nothing clipped. */
.rv-items{display:block;min-width:0;}
.rv-items thead{display:none;}
.rv-items tbody{display:block;}
.rv-items tbody tr{
display:block;border:1px solid var(--border);border-radius:8px;
background:var(--surface-2);padding:2px 10px;margin-bottom:10px;
}
.rv-items tbody td{
display:flex;align-items:baseline;justify-content:space-between;gap:14px;
padding:7px 0;border-bottom:1px solid var(--border);
text-align:right;white-space:normal;
}
.rv-items tbody tr td:last-child{border-bottom:none;}
.rv-items tbody td::before{
content:attr(data-label);flex:0 0 auto;text-align:left;
font-size:11px;text-transform:uppercase;letter-spacing:.03em;
color:var(--text-secondary);font-weight:600;
}
.rv-items tfoot{display:block;}
.rv-items tfoot tr{display:flex;justify-content:flex-end;gap:12px;padding:8px 2px 0;font-weight:700;}
.rv-items tfoot td{padding:0;border:none;}
/* Ron Assist: size the chat to the small viewport (dvh tracks the URL bar). */
#view-ronassist > .panel{height:calc(100vh - 190px) !important;height:calc(100dvh - 190px) !important;min-height:400px;}
.ron-msg{max-width:92%;}
/* Time clock name grid: 2-up tap targets. */
#tcGrid{grid-template-columns:repeat(2,1fr) !important;}
/* Day close (per-wallet): each wallet stacks into a full-width block —
counted box, reason and Close button each on their own line, tappable. */
#cfDayClosePanel .dc-row{flex-direction:column;align-items:stretch;gap:8px;}
/* flex-basis is a HEIGHT once the row turns into a column, so the wallet
name block's `flex:1 1 150px` reserved 150px for ~40px of text — about
110px of dead white space per wallet, four times over, on the phone
where the day actually gets closed. */
#cfDayClosePanel .dc-row > div{width:100%;flex:0 0 auto !important;}
#cfDayClosePanel .dc-count{justify-content:space-between;}
#cfDayClosePanel .dc-row input{width:100% !important;box-sizing:border-box;flex:1 1 auto;}
#cfDayClosePanel .dc-row .btn{width:100%;}
#cfDayClosePanel .dc-row span[id^="dc-var-"]{text-align:left !important;min-width:0;}
/* No modal ever wider than the screen (inline max-widths are overridden). */
.modal-card{max-width:100% !important;}
/* Purchasing item-row editors (request + PO modals): the fixed Qty/Unit/₱
columns squeezed the Item input to ~1 character on phones. Stack each
line — Item full-width on top, qty/unit/price + ✕ underneath. */
.item-rows-table{display:block;}
.item-rows-table thead{display:none;}
.item-rows-table tbody{display:block;}
.item-rows-table tr{display:grid;grid-template-columns:1fr 1fr 1.3fr auto;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);}
.item-rows-table td{display:block;width:auto !important;padding:0;border:none;}
.item-rows-table td:first-child{grid-column:1/-1;}
.item-rows-table input{width:100% !important;box-sizing:border-box;}
/* Permissions matrix on a phone: the sticky permission name is what makes
sideways scrolling survivable, so keep it — just narrow it and drop the
hint text (the label carries the meaning). */
/* Must match the desktop rule's specificity (`.perm-table thead th.perm-h-area`)
or the 250px min-width wins and eats two thirds of a phone screen. */
.perm-table thead th.perm-h-area{min-width:148px;}
.perm-table tbody td:first-child{min-width:148px;}
.perm-hint{display:none;}
.perm-h-role{min-width:72px;}
.perm-table th,.perm-table td{padding:8px 7px;}
.perm-actions{justify-content:stretch;}
.perm-actions .btn{flex:1;}
}
/* Routine checklist: the grid is wider than a phone, so the chore's NAME stays
put while the dates scroll under it — the same reason the permissions matrix
pins its first column. Without it you scroll right and lose which row you are
reading, which is the only thing that makes the ticks mean anything. */
.routine-table th:first-child, .routine-table td:first-child{
position:sticky;left:0;z-index:1;background:var(--surface);
/* box-shadow, not border-right: a border on a sticky cell scrolls with the
table's own border-collapse and leaves a gap. */
box-shadow:1px 0 0 var(--border);
}
.routine-table thead th:first-child{background:var(--surface-2,var(--surface));}
/* ---- Kiosk PIN pad: must fit ANY screen, punch buttons always reachable ----
These rules are keyed on HEIGHT, not width, and therefore deliberately live
outside the max-width:720px block above. The devices that break here are
phones in LANDSCAPE — 844px wide but only 390px tall — which no width query
would ever match. The kiosk is wall-mounted or handheld, so landscape is the
normal orientation, not an edge case. */
.kiosk-pad-card{
background:var(--surface);border-radius:16px;width:min(330px,92vw);text-align:center;
box-shadow:0 12px 40px rgba(0,0,0,.3);
display:flex;flex-direction:column;
/* dvh tracks the collapsing browser chrome on mobile; vh is the fallback for
engines without it, and is merely conservative rather than wrong. */
max-height:calc(100vh - 20px);
max-height:calc(100dvh - 20px);
margin:auto; /* centres while still allowing the overlay to scroll — with
align-items:center alone an overflowing card is clipped at
the TOP and that part becomes unreachable. */
}
/* min-height:0 is what actually lets this shrink; a flex item defaults to
min-height:auto and would refuse to become shorter than its content, pushing
the footer off-screen exactly as before. */
.kiosk-pad-scroll{overflow-y:auto;min-height:0;flex:1 1 auto;padding:26px 26px 0;}
.kiosk-pad-foot{flex:0 0 auto;padding:10px 26px 18px;}
.kiosk-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0;}
#kioskCam{width:180px;height:135px;}
/* Short screens: shrink so the keypad stays comfortably tappable instead of
being scrolled. The footer is pinned regardless, so this is about keeping
the pad usable, not about reaching the buttons. */
@media (max-height: 700px){
.kiosk-pad-scroll{padding:16px 18px 0;}
.kiosk-pad-foot{padding:8px 18px 12px;}
.kiosk-keys{gap:7px;margin:9px 0;}
.kiosk-keys .btn{padding:9px 10px;}
#kioskCam{width:132px;height:99px;}
#kioskPadName{font-size:18px;}
#kioskPadDots{font-size:24px;height:28px;}
}
@media (max-height: 520px){
/* Landscape phones. Put the camera preview and the keypad side by side so
the pad uses the width it has plenty of instead of the height it has none
of, and drop the ornamental bits. */
.kiosk-pad-card{width:min(560px,96vw);}
.kiosk-pad-scroll{display:flex;align-items:center;gap:14px;text-align:left;padding:12px 14px 0;}
.kiosk-pad-scroll > .kiosk-keys{flex:1 1 auto;margin:0;}
.kiosk-pad-side{flex:0 0 auto;max-width:44%;}
.kiosk-pad-foot{padding:8px 14px 10px;}
.kiosk-keys{gap:6px;}
.kiosk-keys .btn{padding:7px 10px;font-size:15px;}
#kioskCam{width:104px;height:78px;margin:0 0 4px;}
#kioskCamNote{display:none !important;} /* the preview itself says it */
#kioskPadName{font-size:15px;}
#kioskPadSub{font-size:12px;margin-bottom:6px;}
#kioskPadDots{font-size:20px;height:22px;letter-spacing:7px;}
#kioskPadMsg{margin-top:6px;min-height:0;font-size:13px;}
}
/* Ordinary modals already scroll (.modal is align-items:flex-start with
overflow-y:auto), so nothing in them is unreachable — but 36px of padding
top and bottom is 72px of a 390px-tall landscape phone spent on nothing.
Give it back; the in-app time-clock PIN modal then fits without scrolling. */
@media (max-height: 560px){
.modal{padding:10px 12px;}
.modal-card{padding:16px 16px;}
}
|