/* * PBJ CRM — the simplified phone screens (15.5). * * TWO JOBS, ONE FILE. * * 1. The look of the phone-only screens themselves (#/m and everything under * it): three big choices, a search bar, an A-Z rail, big readable rows. * 2. Re-laying-out the EXISTING record and list screens so they can be read * and worked one-handed — bigger names, one column, full-width buttons, * 44px targets, the desktop nav rows out of the way and a bar across the * bottom instead. * * EVERY RULE HANGS OFF .pbjcrm-mobile-on, which assets/js/pbj-crm-mobile.js * puts on #pbj-crm-app and takes off again. Nothing here applies on a desktop, * on a phone whose owner switched the feature off, or on a phone whose user * asked for the desktop version — the class is simply not there, and a plain * media query could not tell those apart. * * COLOURS COME FROM THE THEME. Only --pbjcrm-* tokens, each with a literal * fallback, exactly as pbj-crm.css does it — so a business on the dark preset * gets dark phone screens without one line here knowing what dark means. */ .pbjcrm-mqueue-task { display: grid; gap: 8px; } .pbjcrm-mqueue-item { display: flex; align-items: flex-start; gap: 8px; padding-inline: 8px; } .pbjcrm-mqueue-item.pbjcrm-done span { text-decoration: line-through; opacity: .7; } .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-checklist-summary { display: flex; align-items: center; min-height: 44px; } .pbjcrm-mqueue-edit { justify-self: start; margin-inline: 8px; } /* ------------------------------------------------------------- The shape */ /* The shared router can paint once before a hard-loaded popup has handed this bundle its context. Keep that transient desktop/previous surface out of view; JS removes the class as soon as the real phone Inbox is ready or the bounded compatibility retry ends. */ .pbjcrm-app.pbjcrm-portal.pbjcrm-mobile-on.pbjcrm-mobile-route-pending > .pbjcrm-view { visibility: hidden; } /* The phone has its own compact header. The bottom bar is its primary navigation, so desktop area tabs, the rail drawer, Create, mode and Jump do not compete for the same 390px. Identity, Notifications and Account match the reference and retain honest 44px targets. The mount carries the safe-area height because the fixed header itself cannot reserve space in the document. */ .pbjcrm-hdr-mount.pbjcrm-hdr-mount-phone { height: calc(var(--nav-header-h) + env(safe-area-inset-top, 0px)); } .pbjcrm-hdr.pbjcrm-hdr-phone { height: calc(var(--nav-header-h) + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 12px 0; gap: 8px; } .pbjcrm-hdr.pbjcrm-hdr-phone .pbjcrm-rail-toggle, .pbjcrm-hdr.pbjcrm-hdr-phone .pbjcrm-tabs, .pbjcrm-hdr.pbjcrm-hdr-phone .pbjcrm-hdr-createslot, .pbjcrm-hdr.pbjcrm-hdr-phone .pbjcrm-hdr-modeslot, .pbjcrm-hdr.pbjcrm-hdr-phone .pbjcrm-hdr-jump { display: none !important; } .pbjcrm-hdr.pbjcrm-hdr-phone .pbjcrm-hdr-logo { max-width: 140px; } .pbjcrm-hdr.pbjcrm-hdr-phone .pbjcrm-hdr-logolink, .pbjcrm-hdr.pbjcrm-hdr-phone .pbjcrm-hdr-notif, .pbjcrm-hdr.pbjcrm-hdr-phone .pbjcrm-hdr-account { min-height: 44px; } .pbjcrm-hdr.pbjcrm-hdr-phone .pbjcrm-hdr-notif, .pbjcrm-hdr.pbjcrm-hdr-phone .pbjcrm-hdr-account { min-width: 44px; height: 44px; justify-content: center; } /* Room for the bar across the bottom. Without this the last line of a record sits underneath it, which is the one thing a fixed bar must never do. */ .pbjcrm-app.pbjcrm-portal.pbjcrm-mobile-on { display: block; width: 100%; max-width: none; margin: 0; padding: var(--pbjcrm-space, 14px) var(--pbjcrm-space, 14px) calc(84px + env(safe-area-inset-bottom, 0px)); border: 0; border-radius: 0; box-shadow: none; background: var(--pbjcrm-bg); box-sizing: border-box; } /* The phone is a document scroller, but the view still owns the content box. Unwinding the old card width here keeps every real route flush with the same inset as Home, Inbox and Agenda instead of leaving a desktop-sized island. */ .pbjcrm-app.pbjcrm-portal.pbjcrm-mobile-on > .pbjcrm-view { width: 100%; min-width: 0; padding: 0; box-sizing: border-box; overflow: visible; } /* The two rows of desktop pills go away: on a phone the bar at the bottom IS the navigation, and two navigations is one too many. The header at the top (the logo and the search) stays exactly where it was. */ .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-nav, .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-subnav { display: none; } /* ⛔ AND THE BUTTON THAT OPENS THEM (Jake, live testing). The pills were hidden from the day this file shipped; "☰ Menu" was not. pbj-crm.css turns the toggle ON under @media (max-width: 1100px) — every phone — so the phone screens carried a full-width button that opened a drawer of the very navigation this block just took away, sitting directly above the bottom bar that replaced it. Hiding the pills and leaving their handle on screen is worse than hiding neither. */ .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-nav-toggle { display: none !important; } /* ⚠️ AND THE OPEN-DRAWER STATE WITH IT, WHICH IS NOT THE SAME RULE. The collapse block declares `.pbjcrm-portal.pbjcrm-nav-open > .pbjcrm-nav { display: flex !important }` — an !important that beats the plain hide above — so a drawer left open while the shape changed (a rotation, a window drag, a phone that switched to the simplified screens mid-session) would put the pills back. Nobody can open it now that the toggle is gone, but a state nobody can reach is still a state, and this is the rule that says what it looks like. Four classes so it wins on specificity as well as on !important, whatever order the two stylesheets end up in. */ .pbjcrm-portal.pbjcrm-mobile-on.pbjcrm-nav-open > .pbjcrm-nav, .pbjcrm-portal.pbjcrm-mobile-on.pbjcrm-nav-open > .pbjcrm-subnav:not([hidden]) { display: none !important; } /* One column, everywhere. */ .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-profile-layout, .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-split, .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-grid-2, .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-cardgrid, .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-deal-list, .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-summary-cards { display: block; grid-template-columns: 1fr; } .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-cardgrid > *, .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-summary-cards > * { margin-bottom: var(--pbjcrm-space, 14px); } /* --------------------------------------------- Records, made readable */ .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-profile-name { font-size: 26px; line-height: 1.2; } .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-view h2, .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-view-head h2 { font-size: 22px; line-height: 1.25; } .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-view h3 { font-size: 18px; } .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-listcard-head strong { font-size: 18px; } /* A phone is held at arm's length in bad light. 16px is also the size below which iOS zooms the page the moment somebody taps a box. */ .pbjcrm-portal.pbjcrm-mobile-on { font-size: 16px; } .pbjcrm-portal.pbjcrm-mobile-on input:not([type="checkbox"]):not([type="radio"]), .pbjcrm-portal.pbjcrm-mobile-on select, .pbjcrm-portal.pbjcrm-mobile-on textarea { font-size: 16px; min-height: 44px; width: 100%; box-sizing: border-box; } /* ⛔ A TICK BOX IS NOT A BOX YOU TYPE IN, AND THE RULE ABOVE USED TO CATCH IT. Reported by Jake from a phone (2026-08-15): a task's words came down the screen one character per line beside a tall coloured stripe, with the rest of the screen empty. The stripe was the task card's own 3px record-type edge, and the card was 28px wide. `width: 100%` on the row's tick box resolved against the whole flex row (346px on a 390px phone) and `flex: 0 0 auto` — correctly — refused to shrink it, so there was nothing left for the card; `min-width: 0` on the card then let it collapse instead of pushing back. MEASURED on Studio in a real 390px viewport: tick box 346px / card 28x374 before, 22px / 309x171 after, and the SAME numbers on '#/tasks' as on '#/task/N' — so this was never about the record route, it was every ticked list in the portal. ⛔ IT IS FIXED AT THE RULE, NOT AT THE TASK ROW. Twelve places across the portal bundles draw a tick box or a radio and every one of them was getting a full line to itself — Companies & People alone draws thirteen on one screen. Patching '.pbjcrm-task-pick' would have left the other eleven. 22px rather than the browser's 13px because the reason the blanket rule existed is still true: this is a thumb, not a mouse. What it must never be again is a whole line. */ .pbjcrm-portal.pbjcrm-mobile-on input[type="checkbox"], .pbjcrm-portal.pbjcrm-mobile-on input[type="radio"] { width: 22px; height: 22px; min-height: 0; flex: 0 0 auto; } .pbjcrm-portal.pbjcrm-mobile-on textarea { min-height: 96px; } /* Every button is a thumb target, and the ones that sit in a row of their own go full width so there is nothing to aim at. */ .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-btn { min-height: 44px; padding: 10px 14px; } .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-person-actions .pbjcrm-btn, .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-record-actions .pbjcrm-btn, .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-cal-day-actions .pbjcrm-btn { display: block; width: 100%; margin: 0 0 8px; text-align: center; } .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-toolbar { display: block; } .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-toolbar > * { margin: 0 0 8px; } /* Tabs on a record wrap instead of scrolling off the edge. */ .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-tabs { flex-wrap: wrap; } .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-tab { min-height: 44px; padding: 8px 12px; } /* A table on a phone is a horizontal scroll bar with data in it. Let it scroll inside its own box rather than squeezing the columns into unreadable slivers or pushing the whole page sideways. */ .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-table { display: block; overflow-x: auto; max-width: 100%; } /* ------------------------------------------------ Shared record screens */ /* The shared component owns the words and actions; this file only gives that one component its phone geometry. Keeping these rules on .pbjcrm-mobile-on also makes the remembered Desktop-site preference an immediate opt-out. */ .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-recordscreen, .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-recordscreen-main, .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-recordscreen-rail, .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-recordsection, .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-ucard, .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-mrow, .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-card { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-recordscreen-header, .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-recordscreen-grid { grid-template-columns: minmax(0, 1fr); } .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-recordscreen-title { font-size: 22px; line-height: 1.2; } .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-recordscreen-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; } .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-recordscreen-primary, .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-recordscreen-primary > .pbjcrm-btn, .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-recordscreen-primary.pbjcrm-btn { width: 100%; min-width: 0; min-height: 44px; } .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-recordscreen-more { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-recordsection > summary { display: flex; align-items: center; min-height: 44px; } .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-recordsection > summary::after { margin-left: auto; } .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-recordprop { grid-template-columns: minmax(0, 1fr); } /* Every native button in the phone shape is a thumb target. Links that act as buttons and the universal card selection label need the same hit box. */ .pbjcrm-portal.pbjcrm-mobile-on button:not(.pbjcrm-recordscreen-sheet-backdrop), .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-linkbtn, .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-backlink, .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-recordscreen-back, .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-ucard-tick { min-width: 44px; min-height: 44px; } .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-ucard-tick { display: inline-flex; align-items: center; justify-content: center; } /* --------------------------------------------------------- The bottom bar */ .pbjcrm-mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; gap: 1px; padding: 0 0 env(safe-area-inset-bottom, 0px); box-sizing: border-box; background: #d8dce0; background: var(--pbjcrm-border, #d8dce0); border-top: 1px solid var(--pbjcrm-border, #d8dce0); box-shadow: 0 -2px 10px var(--pbjcrm-shadow, rgba(0, 0, 0, 0.18)); } .pbjcrm-mbar-btn { flex: 1 1 0; min-height: 56px; padding: 10px 2px; border: 0; background: #f6f7f8; background: var(--pbjcrm-surface-alt, #f6f7f8); color: #1d2327; color: var(--pbjcrm-text, #1d2327); font: inherit; font-weight: 600; font-size: 12px; line-height: 1.2; white-space: nowrap; cursor: pointer; } .pbjcrm-mbar-btn.pbjcrm-active { background: #2271b1; background: var(--pbjcrm-accent, #2271b1); color: #ffffff; color: var(--pbjcrm-accent-contrast, #ffffff); } .pbjcrm-mbar-btn:focus-visible { outline: 2px solid var(--pbjcrm-accent, #2271b1); outline-offset: -3px; } /* ------------------------------------------------- The phone screens' bits */ .pbjcrm-mhead { margin: 0 0 var(--pbjcrm-space, 14px); } /* ------------------------------------------------------- Search-first Find */ .pbjcrm-mfind-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--pbjcrm-space, 14px); } .pbjcrm-mfind-filters[hidden], .pbjcrm-mfind-filter-status[hidden], .pbjcrm-mfind-result-status[hidden] { display: none; } .pbjcrm-mfind-filter { min-height: 44px; padding: 8px 14px; border: 1px solid var(--pbjcrm-border); border-radius: var(--pbjcrm-radius-pill, 999px); background: var(--pbjcrm-surface-alt); color: var(--pbjcrm-text); font: inherit; font-weight: 600; cursor: pointer; } .pbjcrm-mfind-filter.is-on { border-color: var(--pbjcrm-accent); background: var(--pbjcrm-accent); color: var(--pbjcrm-accent-contrast); } .pbjcrm-mfind-filter:focus-visible { outline: 2px solid var(--pbjcrm-accent); outline-offset: 2px; } .pbjcrm-mfind-actions { display: flex; justify-content: flex-end; margin: 0 0 var(--pbjcrm-space, 14px); } .pbjcrm-mfind-actions .pbjcrm-btn { width: auto; } .pbjcrm-mfind-result-status { margin-top: 0; } .pbjcrm-mfind-group + .pbjcrm-mfind-group { margin-top: var(--pbjcrm-space-lg, 20px); } .pbjcrm-mfind-group-label { margin-bottom: 8px; } .pbjcrm-mtitle { margin: 0; font-size: 24px; line-height: 1.2; color: #1d2327; color: var(--pbjcrm-text, #1d2327); } .pbjcrm-msubhead { margin: 0 0 8px; font-size: 18px; color: #1d2327; color: var(--pbjcrm-text, #1d2327); } .pbjcrm-msub, .pbjcrm-mnote { margin: 6px 0 0; color: #646d76; color: var(--pbjcrm-muted, #646d76); } .pbjcrm-mback { margin: 0 0 8px; } /* The big choices. */ .pbjcrm-mchoices { display: block; } .pbjcrm-mbtn { display: block; width: 100%; min-height: 72px; margin: 0 0 10px; padding: 14px 16px; background: #ffffff; background: var(--pbjcrm-surface, #ffffff); color: #1d2327; color: var(--pbjcrm-text, #1d2327); border: 1px solid #d8dce0; border: 1px solid var(--pbjcrm-border, #d8dce0); border-radius: var(--pbjcrm-radius, 6px); font: inherit; text-align: left; cursor: pointer; } .pbjcrm-mbtn:focus-visible { outline: 2px solid var(--pbjcrm-accent, #2271b1); outline-offset: 2px; } .pbjcrm-mbtn-label { display: block; font-size: 20px; font-weight: 700; } .pbjcrm-mbtn-hint { display: block; margin-top: 4px; font-size: 14px; color: #646d76; color: var(--pbjcrm-muted, #646d76); } /* The one button on a form that actually does the thing. */ .pbjcrm-mbtn-go { min-height: 56px; background: #2271b1; background: var(--pbjcrm-accent, #2271b1); color: #ffffff; color: var(--pbjcrm-accent-contrast, #ffffff); border-color: #135e96; border-color: var(--pbjcrm-accent-strong, #135e96); font-size: 18px; font-weight: 700; text-align: center; } .pbjcrm-mbtn-go[disabled] { background: var(--pbjcrm-action-disabled-bg, var(--pbjcrm-surface-alt)); color: var(--pbjcrm-action-disabled-text, var(--pbjcrm-text-soft)); border-color: var(--pbjcrm-action-disabled-border, var(--pbjcrm-edge)); opacity: 1; cursor: default; } /* Search and filters. */ .pbjcrm-msearch { margin: 0 0 10px; } .pbjcrm-msearch .pbjcrm-minput { min-height: 52px; font-size: 17px; } .pbjcrm-mfilters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; } .pbjcrm-mfilters > * { flex: 1 1 160px; } .pbjcrm-minput, .pbjcrm-mselect { width: 100%; min-height: 44px; box-sizing: border-box; padding: 10px 12px; background: #ffffff; background: var(--pbjcrm-surface, #ffffff); color: #1d2327; color: var(--pbjcrm-text, #1d2327); border: 1px solid #d8dce0; border: 1px solid var(--pbjcrm-border, #d8dce0); border-radius: var(--pbjcrm-radius-sm, 3px); font: inherit; font-size: 16px; } .pbjcrm-mtextarea { min-height: 110px; } /* The list, with the A-Z rail beside it. */ .pbjcrm-mlist-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; align-items: start; } .pbjcrm-mlist { min-width: 0; } .pbjcrm-mrow { display: block; width: 100%; min-height: 60px; margin: 0 0 8px; padding: 12px 14px; background: #ffffff; background: var(--pbjcrm-surface, #ffffff); color: #1d2327; color: var(--pbjcrm-text, #1d2327); border: 1px solid #d8dce0; border: 1px solid var(--pbjcrm-border, #d8dce0); border-radius: var(--pbjcrm-radius, 6px); font: inherit; text-align: left; cursor: pointer; } .pbjcrm-mrow-flat { cursor: default; } .pbjcrm-mrow:focus-visible { outline: 2px solid var(--pbjcrm-accent, #2271b1); outline-offset: 2px; } .pbjcrm-mrow-name { display: block; font-size: 18px; font-weight: 700; line-height: 1.25; } .pbjcrm-mrow-line { display: block; margin-top: 3px; font-size: 15px; color: #3c434a; color: var(--pbjcrm-text-soft, #3c434a); } .pbjcrm-mrow-sub { display: block; margin-top: 2px; font-size: 14px; color: #646d76; color: var(--pbjcrm-muted, #646d76); } .pbjcrm-mrow-flat .pbjcrm-btn { margin-top: 8px; width: 100%; min-height: 44px; } .pbjcrm-mrow-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .pbjcrm-mrow-flat .pbjcrm-mrow-actions .pbjcrm-btn { flex: 1 1 140px; width: auto; margin-top: 0; } /* The two map buttons on a visit card, side by side. * * They sit in their own row so the rule above does not stretch each of them to * the full width and stack them — two full-width buttons on a card is a wall. * 44px is the floor because this is read one-handed, in a van; anything smaller * is a miss, and a miss here means a wrong turn. */ .pbjcrm-mrow-maps { display: flex; gap: 8px; margin-top: 8px; } .pbjcrm-mrow-flat .pbjcrm-mrow-maps .pbjcrm-btn { flex: 1 1 50%; margin-top: 0; min-height: 44px; text-align: center; } /* -------------------------------------------------------------- The agenda */ /* A row's left edge says what KIND it is, in the same colours the desktop calendar lanes and the queue cards use (--pbjcrm-rec-*, emitted by the CRM theme). No hex here on purpose: a business on the dark preset gets its own edges without one line of this file knowing a colour name. The --pbjcrm-border fallback is what an older theme that emits no record tokens lands on — a plain edge, not a missing one. */ .pbjcrm-mrow[class*="pbjcrm-mrow-kind-"] { border-left-width: 3px; border-left-style: solid; border-left-color: var(--pbjcrm-border, #d8dce0); } .pbjcrm-mrow-kind-visit { border-left-color: var(--pbjcrm-rec-visit, var(--pbjcrm-border, #d8dce0)); } .pbjcrm-mrow-kind-appointment { border-left-color: var(--pbjcrm-rec-appointment, var(--pbjcrm-border, #d8dce0)); } .pbjcrm-mrow-kind-ticket { border-left-color: var(--pbjcrm-rec-ticket, var(--pbjcrm-border, #d8dce0)); } .pbjcrm-mrow-kind-task { border-left-color: var(--pbjcrm-rec-task, var(--pbjcrm-border, #d8dce0)); } .pbjcrm-mrow-kind-invoice, .pbjcrm-mrow-kind-estimate, .pbjcrm-mrow-kind-recurring { border-left-color: var(--pbjcrm-rec-invoice, var(--pbjcrm-border, #d8dce0)); } .pbjcrm-mrow-kind-deal { border-left-color: var(--pbjcrm-rec-deal, var(--pbjcrm-border, #d8dce0)); } .pbjcrm-mrow-kind-contact { border-left-color: var(--pbjcrm-rec-contact, var(--pbjcrm-border, #d8dce0)); } /* The inbox's four communication kinds. The theme emits no record colour for email / texts / calls / voicemail — the list is ticket, task, invoice, visit, appointment, contact, deal, marketing, import, system — so they wear the accent, which is a token that exists and is contrast-checked on every preset. Naming a `--pbjcrm-rec-email` nobody declares would silently paint the literal fallback instead, on every site. Same decision as pbj-crm.css. */ .pbjcrm-mrow-kind-email, .pbjcrm-mrow-kind-text, .pbjcrm-mrow-kind-call, .pbjcrm-mrow-kind-voicemail { border-left-color: var(--pbjcrm-accent, #2271b1); } /* The day heading. Sticky, so the day somebody is reading stays named while they scroll a long one. */ .pbjcrm-mday { position: sticky; top: 0; z-index: 1; margin: 14px 0 8px; padding: 6px 0; background: #f6f7f7; background: var(--pbjcrm-bg, #f6f7f7); font-size: 15px; font-weight: 700; line-height: 1.3; color: #3c434a; color: var(--pbjcrm-text-soft, #3c434a); } .pbjcrm-mday:first-child { margin-top: 0; } /* The range picker sits alone on its row, so it gets the full width rather than the 160px basis a pair of filters shares. */ .pbjcrm-mrange > * { flex: 1 1 100%; } .pbjcrm-magenda-body { min-width: 0; } /* ------------------------------------------------------- The phone inbox The rows are ordinary phone rows — same card, same kind-coloured left edge as the agenda — with two additions: how many of a thing there are, and when it landed. */ /* State filters stay honest: they reorganize the two server-owned halves but never invent a channel bucket or a second count. They scroll instead of wrapping into a tall toolbar at 390px. */ .pbjcrm-minbox-filters { display: flex; gap: 6px; margin: 0 0 10px; padding-bottom: 2px; overflow-x: auto; overscroll-behavior-inline: contain; } .pbjcrm-minbox-filter { flex: 0 0 auto; min-height: 44px; padding: 10px 12px; border: 1px solid var(--pbjcrm-pill-border, var(--pbjcrm-border)); border-radius: var(--pbjcrm-radius-pill); background: var(--pbjcrm-pill-bg, var(--pbjcrm-surface-alt)); color: var(--pbjcrm-pill-text, var(--pbjcrm-text-soft)); font: inherit; font-weight: 700; line-height: 1.2; white-space: nowrap; cursor: pointer; } .pbjcrm-minbox-filter.is-on { border-color: var(--pbjcrm-pill-on-border, var(--pbjcrm-accent)); background: var(--pbjcrm-pill-on-bg, var(--pbjcrm-accent)); color: var(--pbjcrm-pill-on-text, var(--pbjcrm-accent-contrast)); } .pbjcrm-minbox-filter:focus-visible { outline: 2px solid var(--pbjcrm-focus-ring, var(--pbjcrm-accent)); outline-offset: 2px; } .pbjcrm-minbox-search { margin-bottom: 6px; } .pbjcrm-minbox-status { margin: 0 0 10px; } /* The group heading reuses .pbjcrm-mday (sticky, so the day somebody is reading stays named while they scroll), and only loses its first-child margin rule when it is not first. */ .pbjcrm-minbox-group { margin-top: 14px; } .pbjcrm-minbox-group:first-child { margin-top: 0; } .pbjcrm-minbox-head { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 8px; } .pbjcrm-minbox-head .pbjcrm-mrow-name { flex: 1 1 160px; min-width: 0; } .pbjcrm-minbox-kind { flex: 0 0 auto; color: var(--pbjcrm-muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; line-height: 1.2; text-transform: uppercase; } /* "3 unread texts in one thread" is ONE row with a 3 on it — the server groups them, so this is the only honest way to say how much is behind the row without a second line. Nothing is drawn when the count is 1. */ .pbjcrm-minbox-count { flex: 0 0 auto; margin-left: auto; min-width: 24px; padding: 1px 8px; border-radius: var(--pbjcrm-radius-pill, 999px); background: #2271b1; background: var(--pbjcrm-accent, #2271b1); color: #ffffff; color: var(--pbjcrm-accent-contrast, #ffffff); font-size: 13px; font-weight: 700; line-height: 1.6; text-align: center; } /* --------------------------- Desktop panels that have to stack on a phone The Today screen's two-column split (pbj-crm.js) already collapses at 782px in pbj-crm.css. This is the OTHER half of that rule: the phone shape can be on at any width — a tablet, a landscape phone, or somebody who tapped the phone version on a laptop — and there the rail belongs under the list, not beside it. */ .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-queue-split { display: block; grid-template-columns: 1fr; } .pbjcrm-portal.pbjcrm-mobile-on .pbjcrm-side-panel { position: static; max-height: none; margin-top: var(--pbjcrm-space, 14px); } /* The rail: sticky, so it stays under the thumb as the list scrolls. */ .pbjcrm-mrail { position: sticky; top: 8px; display: flex; flex-direction: column; gap: 1px; } .pbjcrm-mrail-btn { min-height: 44px; padding: 0; background: transparent; color: #646d76; color: var(--pbjcrm-muted, #646d76); border: 0; border-radius: var(--pbjcrm-radius-sm, 3px); font: inherit; font-size: 12px; font-weight: 700; line-height: 44px; cursor: pointer; } .pbjcrm-mrail-btn.pbjcrm-active { background: #2271b1; background: var(--pbjcrm-accent, #2271b1); color: #ffffff; color: var(--pbjcrm-accent-contrast, #ffffff); } .pbjcrm-mrail-btn:focus-visible { outline: 2px solid var(--pbjcrm-accent, #2271b1); outline-offset: -2px; } /* Paging and the way out to a full screen. */ .pbjcrm-mpager { margin: 12px 0 0; } .pbjcrm-mpager-count { display: block; margin-bottom: 8px; color: #646d76; color: var(--pbjcrm-muted, #646d76); } .pbjcrm-mpager-btns { display: flex; gap: 8px; } .pbjcrm-mpager-btns .pbjcrm-btn { flex: 1 1 0; min-height: 44px; } .pbjcrm-mfull { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; } .pbjcrm-mfull .pbjcrm-btn { flex: 1 1 160px; min-height: 44px; } /* Forms. */ .pbjcrm-mform { margin: 0 0 14px; padding: 14px; background: #ffffff; background: var(--pbjcrm-surface, #ffffff); border: 1px solid #d8dce0; border: 1px solid var(--pbjcrm-border, #d8dce0); border-radius: var(--pbjcrm-radius, 6px); } .pbjcrm-mpreference h3 { margin: 0 0 6px; font-size: 18px; } .pbjcrm-mpreference .pbjcrm-btn { width: 100%; min-height: 44px; } .pbjcrm-mfield { display: block; margin: 0 0 12px; } .pbjcrm-mfield-label { display: block; margin-bottom: 4px; font-weight: 700; } .pbjcrm-mfield-hint { display: block; margin-top: 4px; font-size: 14px; color: #646d76; color: var(--pbjcrm-muted, #646d76); } /* ------------------------------------------- Putting the diary on the phone */ /* The screen-level calendar control, above the range picker and both lists. It replaced a per-visit .ics download — see the deleted-on-purpose note in pbj-crm-mobile.js. Full width because it is a whole-screen action, not a per-row one. */ .pbjcrm-msubscribe { margin: 0 0 14px; } .pbjcrm-msubscribe .pbjcrm-btn { width: 100%; min-height: 44px; } /* The link itself. Readable and selectable rather than auto-copied: phones refuse clipboard access often enough that a silent failure would leave somebody holding nothing. Monospace and wrapping so a long token can actually be checked by eye. */ .pbjcrm-mfeed-url { display: block; width: 100%; margin-top: 8px; padding: 10px 12px; border: 1px solid #d5d8dc; border: 1px solid var(--pbjcrm-line, #d5d8dc); border-radius: 6px; background: #ffffff; background: var(--pbjcrm-surface, #ffffff); color: #1d2327; color: var(--pbjcrm-text, #1d2327); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; } /* ------------------------------------------------- Waiting on a reply (F1) */ /* The dot the desktop draws, on a phone row. .pbjcrm-waiting and its compact modifier are declared in pbj-crm.css — the phone screens live inside the same portal, so the mark is defined once and only its PLACEMENT is decided here. .pbjcrm-mrow-name is display:block, so a span in front of it would sit on a line of its own and cost a row of height it does not need. Both go inline for this one case; the lines under them are still blocks and still wrap underneath, exactly as they did. */ .pbjcrm-mrow .pbjcrm-mwaiting { display: inline-flex; margin-right: 6px; vertical-align: middle; } .pbjcrm-mrow .pbjcrm-mwaiting + .pbjcrm-mrow-name { display: inline; } /* ---------------------------------------------- The checklist on a new task */ /* One box, then as many as somebody asks for. Deliberately plainer than a form field: these are the steps INSIDE one thing, not four more things to fill in, and a phone form that looks long is a phone form nobody finishes. */ .pbjcrm-mitems { display: block; } .pbjcrm-mitem-row { margin: 0 0 8px; } /* A link, not a button — pressing it adds a box, it does not do the thing the form is for. There is exactly one of those on a form and it is at the bottom in .pbjcrm-mbtn-go. Still 44px of target, because it is on a phone. */ .pbjcrm-mitem-add { display: inline-block; min-height: 44px; padding: 10px 0; background: none; border: 0; color: #135e96; color: var(--pbjcrm-link, var(--pbjcrm-accent-strong, #135e96)); font: inherit; font-weight: 700; text-align: left; cursor: pointer; } .pbjcrm-mitem-add:focus-visible { outline: 2px solid var(--pbjcrm-accent, #2271b1); outline-offset: 2px; } /* ------------------------------------------------- More than one photo (F13b) */ /* What has been added on this visit, one line each. The files panel keeps the real list (with thumbnails, once each upload lands); this is the running count somebody can read WITHOUT scrolling back up to the grid, which is the whole reason a second picture gets forgotten. */ .pbjcrm-mshots { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; } .pbjcrm-mshot { max-width: 100%; overflow: hidden; padding: 4px 10px; background: #f6f7f8; background: var(--pbjcrm-surface-alt, #f6f7f8); color: #3c434a; color: var(--pbjcrm-text-soft, #3c434a); border: 1px solid #d8dce0; border: 1px solid var(--pbjcrm-border, #d8dce0); border-radius: var(--pbjcrm-radius-pill, 999px); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; } .pbjcrm-mshot-add { display: block; } /* ------------------------------------------ The diary icon, not a diary bar */ /* ⛔ IT IS AN ICON NOW. A full-width primary button at the top of the Agenda read as the screen's main action; it is a once-ever setup step. The stage under it still stretches, so everything the tap reveals — the subscribe link, the warning, the readable URL — is full width exactly as before. */ .pbjcrm-msubscribe { display: flex; flex-direction: column; align-items: stretch; } .pbjcrm-msubscribe > div { display: flex; flex-direction: column; align-items: stretch; gap: 8px; } /* ⚠️ THREE CLASSES ON PURPOSE. `.pbjcrm-msubscribe .pbjcrm-btn` above sets width:100%, and a two-class selector would only beat it on source order — which is exactly the kind of silent loss the timeline-swap note in pbj-crm.css was written about. This one wins on specificity, wherever it ends up in the file. */ .pbjcrm-msubscribe .pbjcrm-btn.pbjcrm-msubscribe-btn { width: auto; align-self: flex-end; min-width: 44px; min-height: 44px; padding: 0 12px; line-height: 1; } .pbjcrm-msubscribe-icon { font-size: 20px; line-height: 1; } /* -------------------------------------------------------- Very small phones */ @media (max-width: 360px) { .pbjcrm-mlist-wrap { grid-template-columns: minmax(0, 1fr) 44px; } .pbjcrm-mrail-btn { font-size: 11px; } .pbjcrm-mbar-btn { font-size: 11px; } } /* =========================================================================== PHASE 19 — THE PHONE ROWS CONSUME THE TEMPLATE (1.55.0) Every list on this bundle — the agenda, the queue, the inbox, the four Find ladders and the module search — now renders through window.pbjCrmPortal.card() (see mcard() in pbj-crm-mobile.js). The skeleton, the icons and the four colour channels are the DESKTOP file's; this block is only what the phone has to say on top of it. ⛔ THIS STYLESHEET LOADS AFTER pbj-crm.css — it is registered with `array( self::HANDLE )` — SO IT WINS AT EQUAL SPECIFICITY. That is why the left-edge override below has to live here rather than there: a `.pbjcrm-ucard` rule in pbj-crm.css and a `.pbjcrm-mrow` rule in this file are both 0,1,0, and the later file takes it. Written the other way round the phone would have kept its old 3px edge and Jake would have had the same screenshot back with a phone in it. =========================================================================== */ /* ONE LEFT BAR, and it is the template's. The old per-kind rules above stay as the fallback for a row nothing has converted; where the template landed, its type edge is the edge — same width and same token family as the desktop, so a ticket is one purple stripe of one thickness on both. */ .pbjcrm-mrow.pbjcrm-ucard[class*="pbjcrm-ucard-type-"] { border-left-width: 4px; border-left-style: solid; } .pbjcrm-mrow.pbjcrm-ucard-type-person { border-left-color: var(--pbjcrm-rec-contact, #2271b1); } .pbjcrm-mrow.pbjcrm-ucard-type-business { border-left-color: var(--pbjcrm-rec-business, #1d4ed8); } .pbjcrm-mrow.pbjcrm-ucard-type-ticket { border-left-color: var(--pbjcrm-rec-ticket, #6d3fa8); } .pbjcrm-mrow.pbjcrm-ucard-type-task { border-left-color: var(--pbjcrm-rec-task, #8c5e00); } .pbjcrm-mrow.pbjcrm-ucard-type-visit { border-left-color: var(--pbjcrm-rec-visit, #0f766e); } .pbjcrm-mrow.pbjcrm-ucard-type-appointment { border-left-color: var(--pbjcrm-rec-appointment, var(--pbjcrm-rec-visit, #0f766e)); } .pbjcrm-mrow.pbjcrm-ucard-type-invoice, .pbjcrm-mrow.pbjcrm-ucard-type-estimate, .pbjcrm-mrow.pbjcrm-ucard-type-recurring { border-left-color: var(--pbjcrm-rec-invoice, #1a7a3c); } .pbjcrm-mrow.pbjcrm-ucard-type-deal { border-left-color: var(--pbjcrm-rec-deal, #b3541e); } .pbjcrm-mrow.pbjcrm-ucard-type-campaign { border-left-color: var(--pbjcrm-rec-marketing, #0f7b8a); } .pbjcrm-mrow.pbjcrm-ucard-type-file { border-left-color: var(--pbjcrm-rec-import, #5b6770); } /* No token exists for these — same documented decision as the kind rules above and as pbj-crm.css. */ .pbjcrm-mrow.pbjcrm-ucard-type-note, .pbjcrm-mrow.pbjcrm-ucard-type-email, .pbjcrm-mrow.pbjcrm-ucard-type-text, .pbjcrm-mrow.pbjcrm-ucard-type-call, .pbjcrm-mrow.pbjcrm-ucard-type-voicemail, .pbjcrm-mrow.pbjcrm-ucard-type-vault, .pbjcrm-mrow.pbjcrm-ucard-type-event { border-left-color: var(--pbjcrm-accent, #2271b1); } /* A phone row is a