(md_field() prints its own wrapper, which takes no class). */ body.tenant .md3 .md-filters{ display:flex; flex-wrap:wrap; align-items:flex-end; column-gap:12px; margin-bottom:6px; } body.tenant .md3 .md-filters > .md-field{ flex:0 1 200px; min-width:0; } body.tenant .md3 .md-filters > .md-filters-grow{ flex:1 1 240px; max-width:320px; min-width:0; } body.tenant .md3 .md-filters > .md-filters-act{ flex:none; display:flex; align-items:center; gap:4px; margin-bottom:16px; } /* P10 sections: a key / value overview grid (

), a section title, a form actions row. The grid is dl.md-kv on purpose: the frozen B2 block already owns .md-kv as the Team / Positions label · value ROW (

, a flex row), and a bare .md-kv here (later, same specificity) would re-lay every one of those rows as this grid. B2's row rule still matches the

, so its padding, top rule and alignment are reset. */ body.tenant .md3 dl.md-kv{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); align-items:start; gap:14px 20px; margin:0; padding:0; border:0; } body.tenant .md3 dl.md-kv > div{ min-width:0; } body.tenant .md3 dl.md-kv dt{ font-size:12px; font-weight:600; color:var(--md-onsv); margin:0 0 3px; } body.tenant .md3 dl.md-kv dd{ margin:0; font-size:14px; color:var(--md-onsurf); overflow-wrap:anywhere; } body.tenant .md3 .md-section-t{ font-family:'Sora',sans-serif; font-size:15.5px; font-weight:700; margin:0; } body.tenant .md3 .md-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:4px; } /* P1 page header carrying user data (the Products detail: the product name as the title, its SKU in the sub line): a long unbroken name or code wraps inside the header instead of running past the page edge, as the old detail title did. The frozen G2 block owns the rest of these two rules. */ body.tenant .md3 .md-page-title, body.tenant .md3 .md-page-sub{ overflow-wrap:anywhere; } /* A card header with a one-line note beside its title (the Products "Variants & pricing" card): the note is small muted text that wraps under the title on a narrow card. */ body.tenant .md3 .md-card-h.md-card-h-note{ flex-wrap:wrap; align-items:baseline; gap:4px 12px; padding-bottom:14px; } body.tenant .md3 .md-card-note{ font-size:12.5px; line-height:1.4; color:var(--md-onsv); } /* P4 dense tables (the Products list and variants tables; page rule 6): 8px cell sides — measured in the 901-1100px band (Task 9, B1): a table-mode register's narrowest card is 783px (a 901px viewport beside the 72px rail), and at 10px the payments register, the vendor ledger, the PO list and the products list ran 14-55px past it with ordinary data. */ body.tenant .md3 .md-table.md-dense th, body.tenant .md3 .md-table.md-dense td{ padding-left:8px; padding-right:8px; } /* A code — .md-code, the lane's generic code primitive (a SKU; page rule 5 as amended by Ruling 13): 12px and always WHOLE. It breaks only at its own separators (hyphen, slash, space), never inside a segment, and it is never truncated or left to a hover title. An unbroken code widens its column; the table then scrolls inside its card. */ body.tenant .md3 .md-table td.md-code{ font-size:12px; color:var(--md-onsv); overflow-wrap:normal; word-break:normal; } /* The same code as an overview fact: it wraps at its separators; an unbroken code longer than its column scrolls in its own box instead of running over the next fact. */ body.tenant .md3 dl.md-kv dd.md-code{ overflow-wrap:normal; word-break:normal; overflow-x:auto; } /* Tags stacked in one cell (the Products list: the status, then "Not on POS"). */ body.tenant .md3 .md-tags{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; } /* The variants table's edit row: the variant.update form of the row above, opened by that row's Edit button. */ body.tenant .md3 .md-table tr.md-vedit > td{ background:var(--md-c1); } body.tenant .md3 .md-vedit-form{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 12px; margin:0; } body.tenant .md3 .md-vedit-f{ display:flex; flex-direction:column; gap:4px; min-width:0; font-size:12px; font-weight:600; color:var(--md-onsv); } body.tenant .md3 .md-vedit-f > .md-field-input{ font-weight:400; } /* P4 a pinned action column (.md-stick-act — Inventory's Adjust): a separator-free code may widen its column past the card (Ruling 13) and the table then scrolls inside its card; the row action stays in view at the card's right edge instead of scrolling away with the rest. The pinned cell keeps its own surface over the cells scrolling beneath it, and a left divider marks where they pass under it (the row dividers are the table's own collapsed borders, drawn across it) — ONLY while the table actually scrolls (Task 9, A7): the divider is a scroll-driven animation on the table's own scroll timeline, and a timeline with nothing to scroll is inactive, so a table that fits its card shows no divider. A browser without scroll timelines ignores animation-timeline and runs the 1ms animation on the document timeline, where fill-mode "both" keeps its keyframe: there the divider is ALWAYS shown (the look before A7). animation-timeline follows the shorthand, which would reset it. Where the table is a stack of cards the cell is an ordinary card line again (the resets in the 760 / 900 blocks below). */ body.tenant .md3 .md-table.md-stick-act th.act, body.tenant .md3 .md-table.md-stick-act td.act{ position:sticky; right:0; z-index:1; background:var(--md-c0); animation:md-uip-stick-edge 1ms linear both; animation-timeline:scroll(nearest inline); } @keyframes md-uip-stick-edge{ from, to{ box-shadow:inset var(--md-bw) 0 0 var(--md-outlinev); } } body.tenant .md3 .md-table.md-stick-act tbody tr:hover > td.act{ background:var(--md-c2); } /* A visually hidden label (the "Actions" header of an action column): read by assistive tech, never drawn. Its header cell is its containing block: an absolute box escapes the card's clip unless something inside the table's scroller is positioned, so in a table scrolling inside its card it would otherwise widen the PAGE from past the card's edge. */ body.tenant .md3 .md-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } body.tenant .md3 .md-table th.act{ position:relative; } /* A code on a line of its own (a PO line's "SKU · colour size" under its name; a free-text PO number as a card title): it wraps at spaces and at the code's own separators, never inside a segment (Ruling 13). An unbroken code widens its column and the table then scrolls in its card; in a card, which cannot widen, it scrolls in its own box (the 760 / 900 blocks below). */ body.tenant .md3 .md-table .md-code-line{ overflow-wrap:normal; word-break:normal; } /* Ruling 16: in TABLE mode a GENERATED code keeps its one line. Breaking at its hyphens is allowed (Ruling 13), so the automatic table layout would squeeze its column to the narrowest segment ("PO-" / "202609-" / "01459") whenever a wider column wants the space; a min-width sized for the code in its own font prevents that. Measured with the codes' widest digit (0): "PO-202609-00000" 13.6ch at Sora 700 13.5px, "BILL-202609-00000" 14.9ch at DM Sans 12px. A genuinely longer code still wraps at its separators; the card blocks below release the min-width (a card line scrolls instead). */ body.tenant .md3 .md-table .md-code-line.md-code-po{ min-width:14ch; } body.tenant .md3 .md-table td.md-code.md-code-bill > span{ display:inline-block; min-width:15ch; } /* A table's total row (tr.md-total: the PO lines, the supplier ledger, the bill lines): a heavier rule above it, on the header tint. In a stack of cards it is one "Total · amount" line (the 760 / 900 blocks below). */ body.tenant .md3 .md-table tr.md-total > td{ border-top:2px solid var(--md-outlinev); background:var(--md-c1); } /* A table that always fits its card (the two-column statements on Financial Reports: the label wraps, the amount stays on its one line) — every other .md-table keeps the 640px floor and scrolls inside its card below it. */ body.tenant .md3 .md-table.md-fit table{ min-width:0; } /* P7 a status tag in a table cell keeps its pill whole (Posting Gaps' "tracked — retry from the open queue" broke across two lines at 768-901); on a card line (the 760 / 900 blocks below) it may wrap again, as one rounded block. */ body.tenant .md3 .md-table td > .md-tag{ white-space:nowrap; } /* The frozen All Sales list (orders/_list.php — the only div.md-table.wide.deskonly; its markup cannot change): nine columns, so the whole-money and whole-tag rules above pushed its Issues column behind the table's own scroll (in-card overflow at 1280 / 1100 43 → 145px, 900 155 → 257, 768 287 → 389; final review I-1). Its cells take the dense 8px sides and its Payment / Status tags may wrap, as one rounded block ("needs reconciliation", "partially returned"); money stays on its one line. Measured on the same DOM: 0 / 0 / 30 / 162px, the Issues column in view from 1100px. */ body.tenant .md3 .md-table.wide.deskonly th, body.tenant .md3 .md-table.wide.deskonly td{ padding-left:8px; padding-right:8px; } body.tenant .md3 .md-table.wide.deskonly td > .md-tag{ display:inline-block; white-space:normal; } /* A disclosure list (Ledger & Books' recent journal entries): each row is a

whose

is the entry's line — a chevron, the title with its date under it, the amount at the right — and whose body holds the entry's own lines. */ body.tenant .md3 .md-dlist > details{ border-top:var(--md-bw) solid var(--md-outlinev); } body.tenant .md3 .md-dlist > details > summary{ display:flex; align-items:center; gap:12px; padding:12px 19px; cursor:pointer; list-style:none; } body.tenant .md3 .md-dlist > details > summary::-webkit-details-marker{ display:none; } body.tenant .md3 .md-dlist > details > summary:hover{ background:var(--md-c2); } body.tenant .md3 .md-dlist > details > summary:focus-visible{ outline:none; box-shadow:inset 0 0 0 2px var(--md-p); } body.tenant .md3 .md-dlist > details[open] > summary{ background:var(--md-c1); } body.tenant .md3 .md-dlist > details > summary > svg{ flex:none; color:var(--md-onsv); transition:transform .15s; } body.tenant .md3 .md-dlist > details[open] > summary > svg{ transform:rotate(90deg); } body.tenant .md3 .md-dlist-main{ flex:1; min-width:0; } body.tenant .md3 .md-dlist-t{ display:block; font-size:13.5px; } body.tenant .md3 .md-dlist-s{ display:block; margin-top:2px; font-size:12px; color:var(--md-onsv); } /* L5-A: Ledger & Books' disabled Close stand-in (data-period-close, before the period has ended) keeps its hover explanation — the G2 disabled md-btn turns pointer events off, which would hide its title; a disabled button still cannot be pressed. */ body.tenant .md3 .md-btn[data-period-close]{ pointer-events:auto; } /* A muted second line inside a table cell (a voucher's journal entry, a void's reversal, an expense note, an asset tag). */ body.tenant .md3 .md-cell-sub{ display:block; margin-top:2px; font-size:11.5px; font-weight:400; line-height:1.35; color:var(--md-onsv); } /* Fields side by side while each keeps 220px, else one per line (the voucher composer's date · memo, an asset's amount · date): flex-wrap, because the same card is 360px beside a list and full width under it. */ body.tenant .md3 .md-field-row{ display:flex; flex-wrap:wrap; column-gap:12px; } body.tenant .md3 .md-field-row > .md-field{ flex:1 1 220px; } /* Voucher Entries: the register beside the 360px composer while the register keeps 564px, else the composer below it. It wraps instead of switching at a breakpoint because the content width also depends on the sidebar (248px from 1101px, 72px at 901-1100px), which no viewport breakpoint sees; 999 : 1 hands the spare width to the register. */ body.tenant .md3 .md-vgrid{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:16px; } body.tenant .md3 .md-vgrid-main{ flex:999 1 564px; min-width:0; } body.tenant .md3 .md-vgrid-side{ flex:1 1 360px; min-width:0; } /* In that ~590px column the status select starts at 160px, so search · status · Apply · Clear keep one row. */ body.tenant .md3 .md-vgrid-main .md-filters > .md-field{ flex-basis:160px; } /* Ruling 16: a generated voucher number (MV-#####, more digits past 99999) keeps its one line in table mode. */ body.tenant .md3 .md-table td.md-code.md-code-mv > span{ display:inline-block; min-width:9ch; } /* A composer line: the account picker whole on its own; Debit · Credit · remove beside it while it keeps 220px next to their 260px (a full-width composer), else wrapped under it (the 360px column). The header row wraps the same way. */ body.tenant .md3 .md-vline{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:10px; } body.tenant .md3 .md-vline-acct{ flex:3 1 220px; min-width:0; } body.tenant .md3 .md-vline-amts{ flex:2 1 260px; min-width:0; display:flex; align-items:center; gap:8px; } body.tenant .md3 .md-vline-amts > .md-field-input{ flex:1 1 0; min-width:0; text-align:right; font-variant-numeric:tabular-nums; } body.tenant .md3 .md-vline-head{ margin-bottom:6px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--md-onsv); } body.tenant .md3 .md-vline-head .md-vline-amts > span{ flex:1 1 0; min-width:0; text-align:right; } body.tenant .md3 .md-vline-head .md-vline-amts > span:last-child{ flex:none; width:36px; } /* The composer's running balance: the totals in the text colour; the difference ok / err only once it means something. */ body.tenant .md3 dl.md-vbal{ margin:8px 0 16px; padding:12px 14px; border:var(--md-bw) solid var(--md-outlinev); border-radius:var(--md-rm); background:var(--md-c1); font-size:13px; } body.tenant .md3 dl.md-vbal > div{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:2px 0; } body.tenant .md3 dl.md-vbal dt{ color:var(--md-onsv); } body.tenant .md3 dl.md-vbal dd{ margin:0; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--md-onsurf); } body.tenant .md3 dl.md-vbal > .md-vbal-diff{ margin-top:6px; padding-top:8px; border-top:var(--md-bw) solid var(--md-outlinev); } body.tenant .md3 dl.md-vbal > .md-vbal-diff dt{ font-weight:700; color:var(--md-onsurf); } body.tenant .md3 dl.md-vbal > .md-vbal-diff dd{ font-weight:700; } body.tenant .md3 dl.md-vbal dd.ok{ color:var(--md-ok); } body.tenant .md3 dl.md-vbal dd.err{ color:var(--md-err); } @media (max-width:760px){ body.tenant .md3 .md-filters{ display:block; } body.tenant .md3 .md-filters > .md-filters-grow{ max-width:none; } body.tenant .md3 .md-filters > .md-filters-act{ margin-bottom:12px; } /* .stack cards: a code line keeps the WHOLE code — wrapped at its separators, flush right with the other values; an unbroken code longer than the card scrolls in its own box (a card cannot widen the way a column does). */ body.tenant .md3 .md-table.stack td.md-code > span{ min-width:0; overflow-x:auto; text-align:right; } /* an action line keeps its buttons together at the right (Edit · Archive), not spread out by space-between */ body.tenant .md3 .md-table.stack td.act[data-label]{ gap:8px; } body.tenant .md3 .md-table.stack td.act[data-label]::before{ margin-right:auto; } /* the variants cards: the gap sits ABOVE each card (tr + tr), so a hidden edit row after the last card adds no bottom gap; an open edit card follows the card above it by 6px (it overlapped it by 4px at -4px — Task 9, C3) and keeps its own surface on hover; its cell is a form, not a card title */ body.tenant .md3 .md-table.stack.md-vlist tbody tr{ margin-bottom:0; } body.tenant .md3 .md-table.stack.md-vlist tbody tr + tr{ margin-top:10px; } body.tenant .md3 .md-table.stack.md-vlist tbody tr + tr.md-vedit{ margin-top:6px; } body.tenant .md3 .md-table.stack.md-vlist tbody tr.md-vedit, body.tenant .md3 .md-table.stack.md-vlist tbody tr.md-vedit:hover{ background:var(--md-c0); } body.tenant .md3 .md-table.stack tr.md-vedit > td:first-child{ margin:0; font-size:14px; font-weight:400; background:transparent; } /* a pinned action cell inside a .stack card is an ordinary card line */ body.tenant .md3 .md-table.stack.md-stick-act th.act, body.tenant .md3 .md-table.stack.md-stick-act td.act, body.tenant .md3 .md-table.stack.md-stick-act tbody tr:hover > td.act{ position:static; background:transparent; box-shadow:none; animation:none; } /* a code line under a card's title keeps the whole code: longer than the card, it scrolls in its own box */ body.tenant .md3 .md-table.stack .md-code-line{ overflow-x:auto; } /* Ruling 16's table-mode minimum does not apply to a card line */ body.tenant .md3 .md-table.stack .md-code-line.md-code-po, body.tenant .md3 .md-table.stack td.md-code.md-code-bill > span{ min-width:0; } body.tenant .md3 .md-table.stack td.md-code.md-code-mv > span{ min-width:0; } /* a card line's value that carries a second line (.md-cell-val: a memo and its journal reference, a description and its note) sits flush right like every other value, both of its lines */ body.tenant .md3 .md-table.stack td[data-label] > .md-cell-val{ min-width:0; text-align:right; } /* a total row is one "Total · amount" card line under the cards (a row gets the card surface too) */ body.tenant .md3 .md-table.stack tfoot{ display:block; } body.tenant .md3 .md-table.stack tr.md-total{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:14px 16px; background:var(--md-c1); border:var(--md-bw) solid var(--md-outlinev); border-radius:var(--md-rm); } body.tenant .md3 .md-table.stack tfoot tr.md-total{ margin-top:10px; } body.tenant .md3 .md-table.stack tr.md-total > td{ border:0; background:transparent; } body.tenant .md3 .md-table.stack tr.md-total > td:first-child{ margin:0; font-size:14px; font-weight:700; } body.tenant .md3 .md-table.stack tr.md-total > td:empty{ display:none; } /* a tag on a card line may wrap (a narrow phone), as one rounded block */ body.tenant .md3 .md-table.stack td > .md-tag{ white-space:normal; display:inline-block; text-align:right; } /* a total row with two labelled amounts (the Ledger trial balance's Debit and Credit): each is a card line of its own */ body.tenant .md3 .md-table.stack tr.md-total:has(> td[data-label]){ flex-wrap:wrap; row-gap:0; } body.tenant .md3 .md-table.stack tr.md-total > td[data-label]{ flex:1 1 100%; } /* .md-stick-first (the Financial Reports trial balance, whose indented group rows cannot become cards): the table scrolls inside its card while its account column stays in view, a divider marking where the amounts pass under it. The column keeps a readable 160px (the names wrap), and each row's own background — opaque, so nothing shows through — is the sticky cell's too, the tinted group rows and the total row included. */ body.tenant .md3 .md-table.md-stick-first table{ width:auto; min-width:100%; } body.tenant .md3 .md-table.md-stick-first thead tr, body.tenant .md3 .md-table.md-stick-first tbody tr{ background-color:var(--md-c0); } body.tenant .md3 .md-table.md-stick-first tbody tr:hover{ background-color:var(--md-c2); } body.tenant .md3 .md-table.md-stick-first th:first-child, body.tenant .md3 .md-table.md-stick-first td:first-child{ position:sticky; left:0; z-index:1; width:160px; background-color:inherit; box-shadow:inset calc(-1 * var(--md-bw)) 0 0 var(--md-outlinev); } body.tenant .md3 .md-table.md-stick-first tr.md-total > td:first-child{ background-color:var(--md-c1); } /* a cell spanning several columns (an opening / closing balance line, an empty note) scrolls with the row */ body.tenant .md3 .md-table.md-stick-first td[colspan]:first-child{ position:static; width:auto; box-shadow:none; } } /* ≤900px: a .md-table.stack that also carries .stack-900 (the Products list: nine columns cannot fit a 768 card) becomes cards from 900px, not 760px — the shared .stack declarations repeated one breakpoint up, so a tablet held upright never shows that table cut off mid-cell. */ @media (max-width:900px){ body.tenant .md3 .md-table.stack-900{ overflow-x:visible; padding:12px; } body.tenant .md3 .md-table.stack-900 table{ min-width:0; display:block; } body.tenant .md3 .md-table.stack-900 thead{ display:none; } body.tenant .md3 .md-table.stack-900 tbody{ display:block; } body.tenant .md3 .md-table.stack-900 tbody tr{ display:block; padding:14px 16px; margin-bottom:10px; background:var(--md-c1); border:var(--md-bw) solid var(--md-outlinev); border-radius:var(--md-rm); } body.tenant .md3 .md-table.stack-900 tbody tr:last-child{ margin-bottom:0; } body.tenant .md3 .md-table.stack-900 tbody tr:hover{ background:var(--md-c1); } body.tenant .md3 .md-table.stack-900 td{ display:block; border:0; padding:0; } body.tenant .md3 .md-table.stack-900 td:first-child:not([data-label]){ font-size:14.5px; font-weight:600; margin-bottom:8px; } body.tenant .md3 .md-table.stack-900 td[data-label]{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:5px 0; text-align:left; } body.tenant .md3 .md-table.stack-900 td[data-label]::before{ content:attr(data-label); flex:none; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--md-onsv); } /* the ≤760 card finishes above, one breakpoint up */ body.tenant .md3 .md-table.stack-900 td.md-code > span{ min-width:0; overflow-x:auto; text-align:right; } body.tenant .md3 .md-table.stack-900 td.act[data-label]{ gap:8px; } body.tenant .md3 .md-table.stack-900 td.act[data-label]::before{ margin-right:auto; } body.tenant .md3 .md-table.stack-900 td > .md-tag{ white-space:normal; display:inline-block; text-align:right; } body.tenant .md3 .md-table.stack-900 td[data-label] > .md-cell-val{ min-width:0; text-align:right; } body.tenant .md3 .md-table.stack-900.md-stick-act th.act, body.tenant .md3 .md-table.stack-900.md-stick-act td.act, body.tenant .md3 .md-table.stack-900.md-stick-act tbody tr:hover > td.act{ position:static; background:transparent; box-shadow:none; animation:none; } /* a .stack-900 row list with edit rows (Inventory, .md-vlist): the ≤760 variants-card spacing one breakpoint up — the gap sits above each card, so a hidden edit row after the last card adds no bottom gap; an open edit card follows its row card by 6px on its own surface; its one cell is a form, not a card title */ body.tenant .md3 .md-table.stack-900.md-vlist tbody tr{ margin-bottom:0; } body.tenant .md3 .md-table.stack-900.md-vlist tbody tr + tr{ margin-top:10px; } body.tenant .md3 .md-table.stack-900.md-vlist tbody tr + tr.md-vedit{ margin-top:6px; } body.tenant .md3 .md-table.stack-900.md-vlist tbody tr.md-vedit, body.tenant .md3 .md-table.stack-900.md-vlist tbody tr.md-vedit:hover{ background:var(--md-c0); } body.tenant .md3 .md-table.stack-900 tr.md-vedit > td:first-child{ margin:0; font-size:14px; font-weight:400; background:transparent; } /* the ≤760 code line (Ruling 16's minimum released) and total row, one breakpoint up */ body.tenant .md3 .md-table.stack-900 .md-code-line{ overflow-x:auto; } body.tenant .md3 .md-table.stack-900 .md-code-line.md-code-po, body.tenant .md3 .md-table.stack-900 td.md-code.md-code-bill > span{ min-width:0; } body.tenant .md3 .md-table.stack-900 tfoot{ display:block; } body.tenant .md3 .md-table.stack-900 tr.md-total{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:14px 16px; background:var(--md-c1); border:var(--md-bw) solid var(--md-outlinev); border-radius:var(--md-rm); } body.tenant .md3 .md-table.stack-900 tfoot tr.md-total{ margin-top:10px; } body.tenant .md3 .md-table.stack-900 tr.md-total > td{ border:0; background:transparent; } body.tenant .md3 .md-table.stack-900 tr.md-total > td:first-child{ margin:0; font-size:14px; font-weight:700; } body.tenant .md3 .md-table.stack-900 tr.md-total > td:empty{ display:none; } } /* People & payroll (Staff & HR, Positions, Compensation, Attendance, Payroll, Salary structures, Statutory rules). */ /* The shared Team & payroll tab bar (team/_tab_bar.php, its markup frozen) under the page header, spaced like a module-tab row; its eight pills keep one row in the 984px content column at 1280 (and at 1100 beside the rail): 12px sides instead of 14px, so "Payroll" is no longer left alone on a second row. */ body.tenant .md3 .md-team-tabs{ margin-bottom:16px; } body.tenant .md3 .md-team-tabs .md-pill-tab{ padding:0 12px; } /* Compensation's card grids — the 2 × 2 pay components and the three organisation cards, ONE column ≤760px (at 375 the cards were squeezed to ~150px); each card keeps its own height. */ body.tenant .md3 .md-comp-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; } body.tenant .md3 .md-comp-grid.md-comp-grid3{ grid-template-columns:repeat(3,minmax(0,1fr)); } /* A card title set as an

(the organisation cards under Compensation's "Organization & templates" heading): the .md-card-t metrics without the browser's h3 margins, as the B1 block does for h2.md-card-t. / body.tenant .md3 h3.md-card-t{ margin:3px 0 0; } / A list row inside a card (Compensation; Salary structures and Statutory rules reuse it): the name wraps in full, the actions stay together at the right and drop under the name — still at the right — when the card is narrow. / body.tenant .md3 .md-crow{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:12px 16px; border-top:var(--md-bw) solid var(--md-outlinev); } body.tenant .md3 .md-crow-main{ flex:1 1 160px; min-width:0; } body.tenant .md3 .md-crow-t{ font-size:13.5px; font-weight:600; line-height:1.35; color:var(--md-onsurf); overflow-wrap:anywhere; } body.tenant .md3 .md-crow-s{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:4px; font-size:12px; color:var(--md-onsv); } body.tenant .md3 .md-crow-act{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 0 auto; } body.tenant .md3 .md-crow.is-archived .md-crow-main{ opacity:.7; } / A dialog's form between the B2 regions (.md-dlg-head / .md-dlg-body / .md-dlg-foot): a flex column that shrinks to the box, so only the fields scroll and the actions stay in view — what Positions writes inline, as one class. / body.tenant .md3 .md-dlg-form{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; margin:0; } / A compact select inside a list row (a deduction category's settlement account): it shares its line with Save while it keeps 160px. / body.tenant .md3 .md-crow .md-field-input.md-inline-select{ flex:1 1 160px; width:auto; min-width:0; max-width:100%; min-height:36px; padding:6px 10px; font-size:13px; } @media (max-width:760px){ body.tenant .md3 .md-comp-grid, body.tenant .md3 .md-comp-grid.md-comp-grid3{ grid-template-columns:minmax(0,1fr); } } / A card that hosts a popover (Payroll's "Pay…" — the runs list and a run's detail): the panel is not clipped by the card, whose header strip keeps the card's corners. / body.tenant .md3 .md-pop-host{ overflow:visible; } body.tenant .md3 .md-pop-host > .md-pop-top{ border-radius:var(--md-rl) var(--md-rl) 0 0; } body.tenant .md3 .md-pay{ position:relative; } body.tenant .md3 .md-pay > summary{ list-style:none; } body.tenant .md3 .md-pay > summary::-webkit-details-marker{ display:none; } body.tenant .md3 .md-pay-panel{ position:absolute; right:0; top:calc(100% + 6px); z-index:20; box-sizing:border-box; width:280px; max-width:calc(100vw - 32px); padding:14px 16px; background:var(--md-c0); border:var(--md-bw) solid var(--md-outlinev); border-radius:var(--md-rm); box-shadow:0 8px 24px rgba(0, 0, 0, .14); text-align:left; } / A form's fields and its submit in one row that wraps, the button on the fields' line (Salary structures' Apply row); ≤760px one field per line and a full-width button, so the button never runs off its card on a phone. / body.tenant .md3 .md-form-inline{ display:flex; flex-wrap:wrap; align-items:flex-end; column-gap:12px; } body.tenant .md3 .md-form-inline > .md-field{ flex:1 1 180px; min-width:0; } body.tenant .md3 .md-form-inline > .md-btn{ flex:none; margin-bottom:16px; } / Payroll's run list: status tile · period, status and journal links · net / gross · the action. / body.tenant .md3 .md-run{ display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:10px 14px; padding:12px 16px; } body.tenant .md3 .md-run + .md-run{ border-top:var(--md-bw) solid var(--md-outlinev); } body.tenant .md3 .md-run.is-current{ background:var(--md-pc); } body.tenant .md3 .md-run:last-child{ border-radius:0 0 var(--md-rl) var(--md-rl); } body.tenant .md3 .md-run-amt{ text-align:right; } @media (max-width:760px){ body.tenant .md3 .md-form-inline{ flex-direction:column; align-items:stretch; } body.tenant .md3 .md-form-inline > .md-field{ flex:0 0 auto; } body.tenant .md3 .md-form-inline > .md-btn{ align-self:stretch; } / a run: tile · period on the first line, the amounts under the period, the action on a line of its own at the right. Beside the amounts (their 1fr column shrinking below its text) "Approve" was drawn over the net and gross lines at 375 (visual review V1); at the right the Pay… popover still opens leftwards inside the card. / body.tenant .md3 .md-run{ grid-template-columns:auto minmax(0,1fr); grid-template-areas:"ico main" "ico amt" "ico act"; } body.tenant .md3 .md-run-ico{ grid-area:ico; align-self:start; } body.tenant .md3 .md-run-main{ grid-area:main; } body.tenant .md3 .md-run-amt{ grid-area:amt; text-align:left; } body.tenant .md3 .md-run-act{ grid-area:act; justify-self:end; } } / A member's name in the Staff & HR tree wraps in full (page rule 5): the legacy .tm-member-name rule cut it to one line. / body.tenant .md3 .tm-member-name{ white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; } / Dashboard. The chart card's header wraps, so on a phone the Combined / Online / Retail switch drops under "Sales performance" instead of being cut off by the card (it read "Combined | Online | Re" at 375). / body.tenant .md3 .md-card-h.md-card-h-wrap{ flex-wrap:wrap; gap:10px 12px; } / A size container (the dashboard's 7-day card): a figure inside scales with the card's own width (cqi units). / body.tenant .md3 .md-cq{ container-type:inline-size; } / The dashboard's activity feed (Task 9, E6): a label wraps in full and keeps at least 150px; when the amount (and on the narrowest phones the tag too) cannot sit beside it, it wraps onto a line of its own at the right (measured at 375: the label had ~60px and broke mid-word). On a wide card the label's flex-grow takes the free space, so the auto margin is 0 and the row is one line. / body.tenant .md3 .md-li.md-feed{ flex-wrap:wrap; row-gap:4px; } body.tenant .md3 .md-feed > .md-feed-t{ flex:1 1 150px; min-width:0; } body.tenant .md3 .md-feed > .md-amt{ margin-left:auto; } / Settings: a section's fields in two columns, ONE column ≤760px (at 375 two fixed columns squeezed every field to ~150px and cut the branch name). The two pinned raw checkboxes ("Tax registered", the exchange-difference toggle — their markup is read byte for byte) sit in a and are painted like md_checkbox()'s input. / body.tenant .md3 .md-form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:16px; } / A toggle that sits on a field row in the two-column grid (Settings' "Tax registered", beside GST number): aligned to the row's bottom with the fields' spacing — only while there are two columns; ≤760px it is a plain toggle again (Task 9, E7). / body.tenant .md3 .md-form-grid > .md-form-end{ align-self:end; margin-bottom:18px; } / Only the raw, byte-pinned checkboxes: md_checkbox()'s own input (.md-check-input) keeps G2's rule (Task 9, E8). / body.tenant .md3 .md-check > input[type="checkbox"]:not(.md-check-input){ flex:none; width:18px; height:18px; margin:0; accent-color:var(--md-p); cursor:pointer; } body.tenant .md3 .md-check > input[type="checkbox"]:not(.md-check-input):focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:2px; } body.tenant .md3 .md-check > input[type="checkbox"]:not(.md-check-input):disabled{ cursor:not-allowed; } @media (max-width:760px){ body.tenant .md3 .md-form-grid{ grid-template-columns:minmax(0,1fr); } body.tenant .md3 .md-form-grid > .md-form-end{ align-self:auto; margin-bottom:12px; } } / Production pages (Materials · BOM recipes, Job Board, Measurements, Production Output). / / A tonal icon tile — the one small colour on a card head, a kanban column or a timeline step: an MUI container pair; no tone class is neutral. .round for a timeline step. / body.tenant .md3 .md-tile{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:var(--md-rx); background:var(--md-c3); color:var(--md-onsv); font-size:11px; font-weight:700; } body.tenant .md3 .md-tile.round{ border-radius:50%; } body.tenant .md3 .md-tile.p{ background:var(--md-pc); color:var(--md-opc); } body.tenant .md3 .md-tile.s{ background:var(--md-sc); color:var(--md-osc); } body.tenant .md3 .md-tile.t{ background:var(--md-tc); color:var(--md-otc); } body.tenant .md3 .md-tile.w{ background:var(--md-warnc); color:var(--md-owarnc); } body.tenant .md3 .md-tile.ok{ background:var(--md-okc); color:var(--md-ookc); } body.tenant .md3 .md-tile.err{ background:var(--md-errc); color:var(--md-oerrc); } / A grid of cards (the recipe cards, a profile's body regions): as many 280px columns as fit. / body.tenant .md3 .md-cardgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); gap:14px; } / A whole card that is a link (a recipe): a column whose last part (.md-card-foot) sits at the bottom when the grid stretches the card to its row; its outline darkens on hover; the focus ring on the keyboard. / body.tenant .md3 a.md-card-link{ display:flex; flex-direction:column; color:inherit; text-decoration:none; transition:border-color .15s; } body.tenant .md3 a.md-card-link > .md-card-foot{ margin-top:auto; } body.tenant .md3 a.md-card-link:hover{ border-color:var(--md-outline); } body.tenant .md3 a.md-card-link:focus-visible{ outline:none; box-shadow:var(--focus-ring); } / The Job Board kanban: one column per stage, the board scrolling sideways inside the page (never the page); a job is a link card whose title, customer and garment wrap in full (page rule 5) and whose job number is a whole code. / body.tenant .md3 .md-kanban{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(248px,1fr); gap:14px; overflow-x:auto; padding-bottom:6px; } body.tenant .md3 .md-kcol{ display:flex; flex-direction:column; min-width:0; min-height:120px; border:var(--md-bw) solid var(--md-outlinev); border-radius:var(--md-rl); background:var(--md-c1); } body.tenant .md3 .md-kcol-h{ display:flex; align-items:center; gap:9px; padding:12px 14px; border-bottom:var(--md-bw) solid var(--md-outlinev); } body.tenant .md3 .md-kcol-t{ margin:0; font-family:'Sora',sans-serif; font-size:13.5px; font-weight:700; color:var(--md-onsurf); } body.tenant .md3 .md-kcol-h > .md-tag{ margin-left:auto; } body.tenant .md3 .md-kcol-b{ display:flex; flex-direction:column; gap:10px; flex:1; padding:10px; } body.tenant .md3 .md-kcol-empty{ margin:0; padding:22px 8px; text-align:center; font-size:12.5px; color:var(--md-onsv); } body.tenant .md3 .md-kcard{ display:block; overflow:hidden; border:var(--md-bw) solid var(--md-outlinev); border-radius:var(--md-rm); background:var(--md-c0); color:var(--md-onsurf); text-decoration:none; transition:border-color .15s; } body.tenant .md3 .md-kcard:hover{ border-color:var(--md-outline); } body.tenant .md3 .md-kcard:focus-visible{ outline:none; box-shadow:var(--focus-ring); } body.tenant .md3 .md-kcard-b{ padding:12px 13px; } body.tenant .md3 .md-kcard-top{ display:flex; align-items:center; gap:9px; } body.tenant .md3 .md-kcard-top > div{ flex:1; min-width:0; } body.tenant .md3 .md-kcard-no{ font-family:'Sora',sans-serif; font-size:12px; font-weight:700; } body.tenant .md3 .md-kcard-sub{ font-size:11.5px; color:var(--md-onsv); overflow-wrap:anywhere; } body.tenant .md3 .md-kcard-t{ margin-top:9px; font-size:13px; font-weight:700; line-height:1.35; overflow-wrap:anywhere; } body.tenant .md3 .md-kcard-meta{ display:flex; flex-direction:column; gap:5px; margin-top:8px; font-size:12px; color:var(--md-onsv); } body.tenant .md3 .md-kcard-meta > div{ display:flex; align-items:center; gap:7px; min-width:0; overflow-wrap:anywhere; } body.tenant .md3 .md-kcard-meta svg{ flex:none; } body.tenant .md3 .md-kcard-f{ padding:9px 13px; border-top:var(--md-bw) solid var(--md-outlinev); background:var(--md-c1); font-size:12px; font-weight:700; color:var(--md-p); } body.tenant .md3 .md-kcard-f.done{ font-weight:600; color:var(--md-onsv); } / A vertical timeline (a job's stage history, a profile's versions): a tile per step and a rule joining the steps. / body.tenant .md3 .md-tl{ margin:0; padding:0; list-style:none; } body.tenant .md3 .md-tl-i{ position:relative; display:flex; gap:13px; padding-bottom:16px; } body.tenant .md3 .md-tl-i:last-child{ padding-bottom:0; } body.tenant .md3 .md-tl-i:not(:last-child)::before{ content:""; position:absolute; left:13px; top:32px; bottom:4px; width:2px; border-radius:1px; background:var(--md-outlinev); } body.tenant .md3 .md-tl-b{ flex:1; min-width:0; } body.tenant .md3 .md-tl-t{ font-size:13.5px; font-weight:700; line-height:1.35; color:var(--md-onsurf); overflow-wrap:anywhere; } body.tenant .md3 .md-tl-s{ margin-top:2px; font-size:12px; color:var(--md-onsv); } body.tenant .md3 .md-tl-n{ margin-top:4px; font-size:12.5px; font-style:italic; color:var(--md-onsv); overflow-wrap:anywhere; } / A main column beside a side card (Production Output's records and its per-employee totals): side by side while the main column keeps 640px (its table's floor) next to the card's 280px, else the card wraps under it. It wraps on the CONTENT width, not at a breakpoint — the sidebar (248px from 1101px, 72px at 901-1100px) changes that width where no viewport breakpoint sees it (measured: at 1101-1280 a fixed two-column grid left the records 489-668px and scrolled their Void action out of view); 999 : 1 hands the spare width to the main column. In it the filter fields start at 150px, so search · employee · status · Apply keep one row. / body.tenant .md3 .md-side-grid{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:16px; } body.tenant .md3 .md-side-grid-main{ flex:999 1 640px; min-width:0; } body.tenant .md3 .md-side-grid-side{ flex:1 1 280px; min-width:0; } body.tenant .md3 .md-side-grid-main .md-filters > .md-field{ flex-basis:150px; } / Ruling 16: a generated job number (JOB-YYYYMM-NNNNN) and a measurement profile number (MS-NNNNN) keep their one line in table mode; a card releases the minimum (below). The profile number is 9ch, like the voucher box: its bold link wrapped a zero-heavy MS-00000 at 8ch (Task 9, A5 — DM Sans digits are proportional, 0 the widest). / body.tenant .md3 .md-table td.md-code.md-code-job > span{ display:inline-block; min-width:14ch; } body.tenant .md3 .md-table td.md-code.md-code-ms > span{ display:inline-block; min-width:9ch; } @media (max-width:760px){ body.tenant .md3 .md-table.stack td.md-code.md-code-job > span, body.tenant .md3 .md-table.stack td.md-code.md-code-ms > span{ min-width:0; } } / Task 9 — the responsive + accessibility sweep. / / A4: a default icon button is square — 44 × 44, like the 44px base height (G2 says 46px wide); .sm / .lg keep their own. / body.tenant .md3 .md-btn.icon{ width:44px; } / A6: a scroll cue without a gradient. Every box that can scroll sideways — a table in its card, the Job Board kanban, a phone's filter-chip strip (V3), a code's own box (a card line, an overview fact, a header sub line, a Sales phone row's document number) — draws a thin 6px scrollbar with a visible rail, so it shows it scrolls even where the system hides scrollbars until you scroll (macOS, phones). ::-webkit-scrollbar only: setting scrollbar-width / scrollbar-color would switch Chromium back to its own (overlay) bar. A box with nothing to scroll draws no bar at all. / body.tenant .md3 .md-table::-webkit-scrollbar, body.tenant .md3 .md-kanban::-webkit-scrollbar, body.tenant .md3 .md-table td.md-code > span::-webkit-scrollbar, body.tenant .md3 .md-table .md-code-line::-webkit-scrollbar, body.tenant .md3 dl.md-kv dd.md-code::-webkit-scrollbar, body.tenant .md3 .md-page-sub .md-code-sub::-webkit-scrollbar, body.tenant .md3 .md-srow .nm::-webkit-scrollbar, body.tenant .md3 .md-filterbar .md-chips::-webkit-scrollbar{ height:6px; width:6px; } body.tenant .md3 .md-table::-webkit-scrollbar-thumb, body.tenant .md3 .md-kanban::-webkit-scrollbar-thumb, body.tenant .md3 .md-table td.md-code > span::-webkit-scrollbar-thumb, body.tenant .md3 .md-table .md-code-line::-webkit-scrollbar-thumb, body.tenant .md3 dl.md-kv dd.md-code::-webkit-scrollbar-thumb, body.tenant .md3 .md-page-sub .md-code-sub::-webkit-scrollbar-thumb, body.tenant .md3 .md-srow .nm::-webkit-scrollbar-thumb, body.tenant .md3 .md-filterbar .md-chips::-webkit-scrollbar-thumb{ background:var(--md-outline); border-radius:var(--md-rf); } body.tenant .md3 .md-table::-webkit-scrollbar-track, body.tenant .md3 .md-kanban::-webkit-scrollbar-track, body.tenant .md3 .md-table td.md-code > span::-webkit-scrollbar-track, body.tenant .md3 .md-table .md-code-line::-webkit-scrollbar-track, body.tenant .md3 dl.md-kv dd.md-code::-webkit-scrollbar-track, body.tenant .md3 .md-page-sub .md-code-sub::-webkit-scrollbar-track, body.tenant .md3 .md-srow .nm::-webkit-scrollbar-track, body.tenant .md3 .md-filterbar .md-chips::-webkit-scrollbar-track{ background:var(--md-c2); border-radius:var(--md-rf); } / A code box that scrolls is a keyboard stop (md_code_scroll() marks it data-md-scroll): it shows the focus ring. / body.tenant .md3 [data-md-scroll]:focus-visible{ outline:none; box-shadow:var(--focus-ring); } / A8: a code in a header sub line (md_page_header() 'sub_parts' — a product's SKU, a job or profile number, the storefront path) stays whole: it wraps only at its own separators and, unbroken and longer than the line, scrolls in its own box. The sub line's own overflow-wrap:anywhere (for text) never reaches inside it. / body.tenant .md3 .md-page-sub .md-code-sub{ display:inline-block; max-width:100%; overflow-x:auto; vertical-align:top; overflow-wrap:normal; word-break:normal; } / The final fix wave — the visual review's phone findings (V1 is the .md-run block above). / / V2: a banner's action (md_banner()'s link) drops under the message, at the right, whenever the message would be left narrower than 320px beside it — or than its whole line beside the icon (20px + the 12px gap) in a narrower banner. At 375 the Vendor Bills PO-goods note read in a 144px column, 13 lines tall (249px, 7 lines at 480). It wraps on the banner's own width, so a banner in a narrow box (the Pay… panel, a dialog) is covered too; a wide banner is unchanged — the message's flex-grow takes the free space, so the auto margin is 0. The message width counts on that 20px icon, so it binds only a message right after .md-banner-ico (md_banner() and the raw banners written in its markup): a banner with another icon — Staff & HR's Owner note, a 40px star — keeps the MD3 flex:1 and its text beside the icon (R-1). A raw banner whose own control wraps (the Staff & HR drift notice's Sync form) sets its own row gap inline; the 4px here is for md_banner()'s link. / body.tenant .md3 .md-banner{ flex-wrap:wrap; row-gap:4px; } body.tenant .md3 .md-banner-ico + .md-banner-body{ flex:1 1 min(320px, 100% - 32px); } body.tenant .md3 .md-banner-action{ margin-left:auto; } / ── end UI polish (UIP) ── / / ── UI-1 · the Entire logo · the sticky phone header · the phone bottom bar ── Scoped to body.tenant (the tenant panel) and body.md3-auth (the four sign-in pages); the platform panel loads no tenant.css and is untouched (owner decision, UI-1). Breakpoints 760 / 900 only (M-D5). / / UI-1A · the shared logo (partials/entire_logo.php): the modular mark on the MUI primary (#6750A4). / :is(body.tenant, body.md3-auth) .entire-logo{ display:inline-flex; align-items:center; gap:10px; min-width:0; max-width:100%; vertical-align:middle; } :is(body.tenant, body.md3-auth) .entire-logosymbol{ display:block; flex:none; max-width:none; overflow:visible; } :is(body.tenant, body.md3-auth) .entire-logoblock{ fill:var(--md-p); } :is(body.tenant, body.md3-auth) .entire-logotext{ display:flex; flex-direction:column; min-width:0; } :is(body.tenant, body.md3-auth) .entire-logoword{ font-family:'Sora', sans-serif; font-weight:700; line-height:1.2; } :is(body.tenant, body.md3-auth) .entire-logotagline{ margin-top:3px; font-family:'DM Sans', sans-serif; font-size:13px; font-weight:500; line-height:1.35; color:var(--md-onsv); } / the logo's motion presets live in the LOGO-MOTION block below / / sign-in: the brand side (with the slogan on the sign-in page) and the same logo over the form ≤900px / body.md3-auth .auth-aside .entire-logo{ gap:12px; color:inherit; } body.md3-auth .auth-aside .entire-logoword{ font-size:21px; } body.md3-auth .auth-aside .entire-logotagline{ font-size:14px; color:inherit; opacity:.85; } body.md3-auth .md3-auth-brand .entire-logoword{ font-size:17px; } / the tenant sidebar: the shop's name stays primary; Entire is the small line under it / body.tenant .sidebar .brand-sub .entire-logo{ gap:5px; } body.tenant .sidebar .brand-sub .entire-logo__word{ font-family:'DM Sans', sans-serif; font-size:11px; font-weight:600; } / the phone header: the shop's name leads, with the small Entire mark (the sidebar is a drawer ≤900px) / body.tenant .header .header-brand{ display:none; } @media (max-width:900px){ body.tenant .header .header-brand{ display:flex; align-items:center; gap:8px; flex:0 1 auto; min-width:0; margin-right:auto; padding:6px 8px 6px 4px; border-radius:var(--md-rf); color:var(--md-onsurf); text-decoration:none; } body.tenant .header .header-brand:hover{ color:var(--md-onsurf); background:color-mix(in srgb, var(--md-onsurf) 8%, transparent); } body.tenant .header .header-brand:focus-visible{ outline:none; box-shadow:var(--focus-ring); } body.tenant .header .header-brand-name{ min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-family:'Sora', sans-serif; font-size:16px; font-weight:700; line-height:1.2; } } / UI-1B · the phone header stays at the top. admin.css makes it position:sticky ≤900px, but its `html, body { overflow-x:hidden }` turns into a scroll container that never scrolls, so the header had nothing to stick to and scrolled away. `clip` hides the same overflow WITHOUT making a scroll container, so sticky works against the page. (A browser without `clip` keeps today's behaviour.) The notch: with viewport-fit=cover the header grows by the top safe area, and the phone search overlay opens below it. / @media (max-width:900px){ body.tenant{ overflow-x:clip; } body.tenant .header{ top:0; padding-top:env(safe-area-inset-top, 0px); height:calc(var(--header-h) + env(safe-area-inset-top, 0px)); } body.tenant .header > .search{ top:calc(var(--header-h) + env(safe-area-inset-top, 0px)); } } / UI-1C · the phone bottom bar (layout.php .bnav, items from nav_tenant.php). ≤760px only; the hamburger goes there because More opens the same drawer. Layers: above the page (45) and the FAB, under the POS dialogs (50), the drawer and its scrim (55 / 60), the modals (100) and the snackbar (1200). The spacer after .main keeps the last content — the POS Charge button — clear of it. / body.tenant{ --bnav-h:64px; } body.tenant .bnav, body.tenant .bnav-spacer{ display:none; } @media (max-width:760px){ body.tenant .header .nav-toggle{ display:none; } body.tenant .bnav-spacer{ display:block; height:calc(var(--bnav-h) + env(safe-area-inset-bottom, 0px)); } body.tenant .bnav{ position:fixed; left:0; right:0; bottom:0; z-index:45; display:flex; align-items:stretch; box-sizing:border-box; padding:0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); background:var(--md-c2); border-top:var(--md-bw) solid var(--md-outlinev); box-shadow:0 -2px 12px rgba(0, 0, 0, .06); } body.tenant .bnav .bnav-item{ flex:1 1 0; min-width:0; height:var(--bnav-h); margin:0; padding:0 2px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border:0; border-radius:0; background:transparent; color:var(--md-onsv); font-family:'DM Sans', sans-serif; font-size:12px; font-weight:600; line-height:1.2; text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent; } body.tenant .bnav .bnav-ind{ display:flex; align-items:center; justify-content:center; width:56px; max-width:100%; height:30px; border-radius:var(--md-rf); transition:background-color .15s ease; } body.tenant .bnav .bnav-ico{ display:block; flex:none; width:22px; height:22px; } body.tenant .bnav .bnav-label{ display:block; max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } body.tenant .bnav .bnav-item:hover{ color:var(--md-onsurf); } body.tenant .bnav .bnav-item:hover .bnav-ind{ background:color-mix(in srgb, var(--md-onsurf) 8%, transparent); } body.tenant .bnav .bnav-item.active{ color:var(--md-onsurf); font-weight:700; } body.tenant .bnav .bnav-item.active .bnav-ind{ background:var(--md-pc); color:var(--md-opc); } body.tenant .bnav .bnav-item:focus-visible{ outline:none; } body.tenant .bnav .bnav-item:focus-visible .bnav-ind{ box-shadow:var(--focus-ring); } / the snackbar and the FAB sit above the bar / body.tenant:has(.bnav) .md-snackbar, body.tenant:has(.bnav) .md3-fab{ bottom:calc(var(--bnav-h) + env(safe-area-inset-bottom, 0px) + 16px); } / The bar stays while a field has focus: the POS keeps the keyboard in its scan box and the owner rule is that the bar stays on POS; mobile browsers keep a fixed bar behind the on-screen keyboard. / } @media (prefers-reduced-motion:reduce){ body.tenant .bnav .bnav-ind{ transition:none; } } @media print{ body.tenant .bnav, body.tenant .bnav-spacer{ display:none; } } / ── end UI-1 ── / / ── LOGO-MOTION · one-shot motion presets for the shared Entire logo (partials/entire_logo.php) ── A preset is the logo's data-motion attribute: the partial renders it (the sign-in build-in), or admin.js (EntireLogo) sets it on the tenant shell's logos for the page's preset. Owner rules (2026-09-30): transform + opacity only — never fill, path data or size, so the colour stays --md-p (#6750A4) and the geometry is the partial's own; one-shot, never infinite; every keyframe run ENDS at rest (transform:none, opacity:1) and uses fill-mode backwards (never forwards / both), so once it ends each block is back at its exact resting geometry. Reduced motion and print: fully static. Block units are the 100-unit viewBox (6 units = 6 %). / :is(body.tenant, body.md3-auth) .entire-logo[data-motion] .entire-logoblock{ transform-box:fill-box; transform-origin:center; } :is(body.tenant, body.md3-auth) .entire-logo[data-motion] .entire-logosymbol{ transform-origin:50% 50%; } / per block: --lm-dx/--lm-dy its direction from the centre, --lm-sx its shift, --lm-a / --lm-w its assemble / wave delay / :is(body.tenant, body.md3-auth) .entire-logoblock--1{ --lm-dx:-1; --lm-dy:-1; --lm-sx:-6px; --lm-a:.10s; --lm-w:.14s; } :is(body.tenant, body.md3-auth) .entire-logoblock--2{ --lm-dx:1; --lm-dy:-1; --lm-sx:6px; --lm-a:.40s; --lm-w:.14s; } :is(body.tenant, body.md3-auth) .entire-logoblock--3{ --lm-dx:0; --lm-dy:0; --lm-sx:-4px; --lm-a:.30s; --lm-w:0s; } :is(body.tenant, body.md3-auth) .entire-logoblock--4{ --lm-dx:-1; --lm-dy:1; --lm-sx:6px; --lm-a:.20s; --lm-w:.28s; } :is(body.tenant, body.md3-auth) .entire-logoblock--5{ --lm-dx:1; --lm-dy:1; --lm-sx:-6px; --lm-a:.50s; --lm-w:.28s; } / assemble · 1.1s · the blocks build in, then the word (the sign-in build-in, unchanged) / :is(body.tenant, body.md3-auth) .entire-logo[data-motion="assemble"] .entire-logoblock{ animation:entire-logo-block-in .32s cubic-bezier(.2,.7,.25,1) var(--lm-a) backwards; } :is(body.tenant, body.md3-auth) .entire-logo[data-motion="assemble"] .entire-logotext{ animation:entire-logo-word-in .30s cubic-bezier(.2,.7,.25,1) .80s backwards; } / snap · 0.35s · the outer blocks ease out, then snap back onto the centre block / :is(body.tenant, body.md3-auth) .entire-logo[data-motion="snap"] .entire-logoblock{ animation:entire-logo-snap .35s cubic-bezier(.3,.6,.3,1) backwards; } / pulse · 0.5s · the whole mark breathes once / :is(body.tenant, body.md3-auth) .entire-logo[data-motion="pulse"] .entire-logosymbol{ animation:entire-logo-pulse .5s ease-in-out backwards; } / wave · 0.6s · centre block first, then the top pair, then the bottom pair / :is(body.tenant, body.md3-auth) .entire-logo[data-motion="wave"] .entire-logoblock{ animation:entire-logo-wave .32s ease-in-out var(--lm-w) backwards; } / shift · 0.45s · the blocks slide sideways and line up again / :is(body.tenant, body.md3-auth) .entire-logo[data-motion="shift"] .entire-logoblock{ animation:entire-logo-shift .45s cubic-bezier(.3,.6,.3,1) backwards; } / success · 0.7s · snap, then pulse / :is(body.tenant, body.md3-auth) .entire-logo[data-motion="success"] .entire-logoblock{ animation:entire-logo-snap .35s cubic-bezier(.3,.6,.3,1) backwards; } :is(body.tenant, body.md3-auth) .entire-logo[data-motion="success"] .entire-logosymbol{ animation:entire-logo-pulse .35s ease-in-out .35s backwards; } / error · 0.4s · a small sideways shake — no colour change / :is(body.tenant, body.md3-auth) .entire-logo[data-motion="error"] .entire-logosymbol{ animation:entire-logo-error .4s ease-in-out backwards; } @keyframes entire-logo-block-in{ from{ opacity:0; transform:translate(-3px,2px); } to{ opacity:1; transform:none; } } @keyframes entire-logo-word-in{ from{ opacity:0; transform:translateX(-3px); } to{ opacity:1; transform:none; } } @keyframes entire-logo-snap{ 0%{ transform:none; } 40%{ transform:translate(calc(var(--lm-dx) 5px), calc(var(--lm-dy) * 5px)); } 75%{ transform:translate(calc(var(--lm-dx) * -1.5px), calc(var(--lm-dy) * -1.5px)); } 100%{ transform:none; } } @keyframes entire-logo-pulse{ 0%{ transform:none; } 45%{ transform:scale(1.08); } 100%{ transform:none; } } @keyframes entire-logo-wave{ 0%{ transform:none; } 50%{ transform:scale(1.12); } 100%{ transform:none; } } @keyframes entire-logo-shift{ 0%{ transform:none; } 40%{ transform:translateX(var(--lm-sx)); } 100%{ transform:none; } } @keyframes entire-logo-error{ 0%{ transform:none; } 20%{ transform:translateX(-3px); } 40%{ transform:translateX(3px); } 60%{ transform:translateX(-2px); } 80%{ transform:translateX(2px); } 100%{ transform:none; } } /* reduced motion and print: the logo at rest, nothing moves / @media (prefers-reduced-motion:reduce){ :is(body.tenant, body.md3-auth) .entire-logo[data-motion] .entire-logosymbol, :is(body.tenant, body.md3-auth) .entire-logo[data-motion] .entire-logoblock, :is(body.tenant, body.md3-auth) .entire-logo[data-motion] .entire-logotext{ animation:none; opacity:1; transform:none; } } @media print{ :is(body.tenant, body.md3-auth) .entire-logo[data-motion] .entire-logosymbol, :is(body.tenant, body.md3-auth) .entire-logo[data-motion] .entire-logoblock, :is(body.tenant, body.md3-auth) .entire-logo[data-motion] .entire-logotext{ animation:none; opacity:1; transform:none; } } / ── end LOGO-MOTION ── / / SALES-FILTER · the All Sales search + From / To + Apply row (orders/_list.php form.sales-filter). Scoped to that one form: the shared .md-chips / .md-chip rules are untouched. Desktop (>760px): one row — search takes the rest, the two dates share one fixed width, everything 40px tall. Phone (≤760px, the bottom-bar breakpoint): search, then From | To at 50 / 50, then Apply, then clear — each full width and at least 44px tall. Each date is one bordered box with its word inside; the input stays a native type="date" (its picker and calendar icon). / body.tenant .md3 .sales-filter{ --sf-h:40px; display:flex; align-items:stretch; gap:10px; margin:0 0 12px; min-width:0; } body.tenant .md3 .sales-filtersearch{ position:relative; flex:1 1 220px; min-width:0; } body.tenant .md3 .sales-filtersearch svg{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--md-onsv); pointer-events:none; } body.tenant .md3 .sales-filtersearch input{ box-sizing:border-box; width:100%; height:var(--sf-h); margin:0; padding:0 12px 0 36px; border:var(--md-bw) solid var(--md-outlinev); border-radius:var(--md-rx); background:var(--md-c0); color:var(--md-onsurf); font:inherit; font-size:14px; } body.tenant .md3 .sales-filterdate{ box-sizing:border-box; flex:0 0 196px; min-width:0; height:var(--sf-h); margin:0; display:flex; align-items:center; gap:8px; padding:0 8px 0 12px; border:var(--md-bw) solid var(--md-outlinev); border-radius:var(--md-rx); background:var(--md-c0); cursor:text; } body.tenant .md3 .sales-filterdate > span{ flex:none; font-size:12px; font-weight:600; color:var(--md-onsv); } body.tenant .md3 .sales-filterdate input{ flex:1 1 auto; min-width:0; width:100%; height:100%; margin:0; padding:0; border:0; background:transparent; color:var(--md-onsurf); font:inherit; font-size:14px; } body.tenant .md3 .sales-filterdate input:focus{ outline:none; } body.tenant .md3 .sales-filtersearch input:focus-visible, body.tenant .md3 .sales-filterdate:focus-within{ outline:none; border-color:var(--md-p); box-shadow:0 0 0 1px var(--md-p); } body.tenant .md3 .sales-filterapply, body.tenant .md3 .sales-filterclear{ box-sizing:border-box; flex:none; height:var(--sf-h); margin:0; padding:0 18px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--md-rx); font:inherit; font-size:14px; font-weight:600; text-decoration:none; cursor:pointer; } body.tenant .md3 .sales-filterapply{ border:0; background:var(--md-okc); color:var(--md-ookc); } body.tenant .md3 .sales-filterclear{ border:var(--md-bw) solid var(--md-outlinev); background:transparent; color:var(--md-onsv); } body.tenant .md3 .sales-filterapply:hover, body.tenant .md3 .sales-filterclear:hover{ filter:brightness(.97); } body.tenant .md3 .sales-filterapply:focus-visible, body.tenant .md3 .sales-filterclear:focus-visible{ outline:none; box-shadow:var(--focus-ring); } @media (max-width:760px){ body.tenant .md3 .sales-filter{ --sf-h:44px; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:10px; } body.tenant .md3 .sales-filtersearch, body.tenant .md3 .sales-filterapply, body.tenant .md3 .sales-filterclear{ grid-column:1 / -1; width:100%; } body.tenant .md3 .sales-filterdate{ width:100%; padding:0 6px 0 10px; } } / ≤480px: a half-width box is too narrow for the word AND the native date beside it (the date was clipped at 320 / 360), so the small word sits above the date inside the same 44px box and the date gets its full width. / @media (max-width:480px){ body.tenant .md3 .sales-filterdate{ flex-direction:column; align-items:stretch; justify-content:center; gap:1px; padding:3px 4px 3px 8px; } body.tenant .md3 .sales-filterdate > span{ font-size:10px; line-height:1.2; } body.tenant .md3 .sales-filterdate input{ flex:none; height:auto; font-size:13px; line-height:1.3; } } / ── end SALES-FILTER ── */