/* ========================================================================================== Dandelion 360 — the 2026 UI layer, wave 5: phone polish (≤ 1099px; phone-first at 390/430, tablet 768–1099 sane). ------------------------------------------------------------------------------------------ The contract of this file (same as ui-2026.css, which it follows in index.html): * Every selector starts with `html.ui-2026`, and every rule sits inside `@media (max-width: 1099px)`. Without the class, or above 1099px, nothing here matches: the classic look and the desktop 2026 look are untouched. * It re-dresses the EXISTING mobile shell — the tab bar, the top bar, the FAB, the list cards, the record layers, the filter sheet, the bulk bars, #small-modal as a sheet — and changes no behaviour: no element is removed or re-parented, every tap reaches the same inline handler, the back-gesture stack (crmPushOverlay/crmPopOverlay), the bulk-bar spacer and the keyboard tracking (--app-vh / --app-vh-top) are the classic build's and stay so. * Colours are the CRM palette tokens only (no hex), direction comes from (logical properties only, no `direction`), dark mode is body.dark through the same tokens. * Specificity: `html.ui-2026 body:not(#dn26) X` (one id's weight from the :not()) outranks the id-scoped classic phone rules (`#page-customers.crm-gold-v2 .crm-ll-bulkbar`, `#page-data .dt-selbar`…). `!important` only where ui.css forces the same property with `!important` (its html.crm-mobile-lock sheet rules, the `.crm-sq-go` icon button, the Properties title); each such line says so. * Safe areas: every fixed or sticky element that touches a screen edge reads env(safe-area-inset-*). The classic shell already pads the top bar, the tab bar, the FAB, the record action bar and the sheet footers; this file adds the ones it missed (a footer-less sheet body, the sheet scrim, landscape left/right on the bars) and re-states the rest through the --dn-safe-* tokens so the whole shell reads one source. Sections: P0 tokens · P1 frame · P2 touch controls · P3 page heads · P4 search, filters, chips · P5 list cards · P6 record layers · P7 sheets · P8 bulk bars · P9 loading · P10 tab bar, FAB, toasts · P11 standalone (installed app) · P12 tablet 901–1099 · P13 reduced motion. ========================================================================================== */ @media (max-width: 1099px){ /* ------------------------------------------------------------------ P0. Tokens */ html.ui-2026 body{ --dn-gutter: 16px; --dn-safe-top: env(safe-area-inset-top, 0px); --dn-safe-bottom: env(safe-area-inset-bottom, 0px); --dn-safe-left: env(safe-area-inset-left, 0px); --dn-safe-right: env(safe-area-inset-right, 0px); --dn-tabbar-h: 64px; --dn-sheet-bg: var(--surface); /* the translucent chrome (tab bar, record action bar, sticky heads) */ --dn-glass: color-mix(in srgb, var(--surface) 90%, transparent); --dn-canvas-glass: color-mix(in srgb, var(--bg) 92%, transparent); } html.ui-2026 body.dark{ --dn-glass: color-mix(in srgb, var(--surface) 88%, transparent); } /* ------------------------------------------------------------------ P1. Frame: one gutter, no sideways scroll */ /* The page gutter is 16px on a phone (DESIGN §3.3), grown by the notch in landscape. ui.css sets the pages' own paddings in a dozen places; the two that differ from 16 (Contacts' .own-root and the Tasks shell) are brought in line below, the rest already are. */ @media (max-width: 900px){ html.ui-2026 body:not(#dn26) #content .page{ padding-inline: max(var(--dn-gutter), var(--dn-safe-left)) max(var(--dn-gutter), var(--dn-safe-right)); } html.ui-2026 body:not(#dn26) .own-root{ padding-inline: 0; } html.ui-2026 body:not(#dn26) .ztask-shell{ padding-inline: 0; } /* nothing scrolls sideways at the page level; chip rows and wide tables scroll inside themselves */ html.ui-2026 body:not(#dn26) #content > .page{ overflow-x: clip; } } /* ------------------------------------------------------------------ P2. Touch controls */ /* 16px inputs: iOS zooms into anything smaller. ui.css forces 16px only up to 768px (the global anti-zoom block) and inside html.crm-mobile-lock for .form-control; the 769–1099 band (iPad portrait is 820) still zoomed. */ html.ui-2026 body:not(#dn26):not(#dn27) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]), select, textarea):not(#login-screen *){ font-size: max(var(--dn-fs-16), 1em); /* ui-2026.css §18j sets the desktop 14px from 901px with an id-weighted :not(); the tablet band is still touch */ } @media (max-width: 900px){ /* 44px: fields, selects, the page-level buttons that are not .btn, and the search icon button */ html.ui-2026 body:not(#dn26) :is(.crm-dl-select, .own-filter, .ztask-filterset select, .dt-bar select, .prp-select, .crm-dl-agentinput){ min-height: 44px; border-radius: var(--dn-r-md); } html.ui-2026 body:not(#dn26) .own-filter{ height: 44px !important; min-height: 44px !important; } /* ui.css (≤900): .own-search-wrap,.own-filter{min-height:40px !important;height:40px !important} */ html.ui-2026 body:not(#dn26) :is(.crm-add-btn, .ztask-primary, .own-btn-add, .prp-new, .crm-showmore-btn, .crm-quick-add-btn){ min-height: 44px; } /* the search-commit glyph (r300) is an 18px icon with 8px padding = 30px: the target grows to 44 × 44 by padding alone (ui.css sizes it with !important and this file may not draw a hit area outside the button — see the note above .crm-sq-go in ui.css) */ html.ui-2026 body:not(#dn26) #content .page .crm-sq-go{ padding: 13px !important; /* ui.css: .crm-sq-go{padding:8px !important;margin:0 -8px !important} */ margin: 0 -13px !important; min-width: 44px !important; min-height: 44px !important; } html.ui-2026 body:not(#dn26) #content .page .crm-sq-go:focus-visible{ outline-offset: -8px; } /* every icon-only control that a card or a head shows on a phone */ html.ui-2026 body:not(#dn26) :is(.dn-ovf-btn, .crm-ll-reassign, .lm-tag-add, .lm-iconbtn, .own-panel-close, .ztask-actions button){ min-width: 44px; min-height: 44px; } /* the Contacts page's Edit (47×35) and the lead record's "Change" owner button (93×32) */ html.ui-2026 body:not(#dn26) :is(.own-panel-edit-btn, .lm-reassign-btn, .deal-assign-head .btn){ min-height: 44px !important; padding-inline: 14px; } /* ui.css (≤900): .btn{min-height:40px !important} */ /* Data cards: the record's name is a text link inside a title (115×16); its hit area grows to 44px without moving the line */ html.ui-2026 body:not(#dn26) .dmhh-title a{ display: inline-block; padding-block: 12px; margin-block: -12px; } /* the Data card checkbox (24×24): a 44px control that draws its 22px box in the middle — an 11px transparent border is the hit area, the box is the padding box (inset ring + clipped fill), the negative margin keeps the card's layout where the 22px box was */ html.ui-2026 body:not(#dn26) input.dt-mcheck{ width: 44px; height: 44px; margin: -11px; border: 11px solid transparent; border-radius: 17px; background-clip: padding-box; background-size: 15px 15px; box-shadow: inset 0 0 0 1.5px var(--dn-control-edge); } html.ui-2026 body:not(#dn26) input.dt-mcheck:is(:checked, :indeterminate){ box-shadow: inset 0 0 0 1.5px var(--brand); } html.ui-2026 body:not(#dn26) input.dt-mcheck:focus-visible{ outline-offset: -8px; } html.ui-2026 body:not(#dn26) .dmhh-card-head > div{ align-items: center; } /* Tasks: the "Start" text link and the tabs (36px) */ html.ui-2026 body:not(#dn26) :is(.ztask-row button.ztask-start, .ztask-row a, .ztask-title-cell small button){ min-height: 44px; } /* segmented controls (wave 1's pill track, 44px tall): the options are 38px on a phone (DESIGN .seg) */ html.ui-2026 body:not(#dn26) :is(.dc-seg, .dc-range-toggle, .zcal-segments, .own-view-toggle, .srch-viewtoggle, .tgl-seg-tabs, .dsw-seg, .prp-viewtog, .srch-mode, .an-period-tabs, .txn-period-tabs, .ztask-tabs, .at-lb-tabs) > :is(button, a, .zcal-segment){ min-height: 38px; } /* the Data record sheet's WhatsApp / Call (38px) */ html.ui-2026 body:not(#dn26) #small-modal .dt-act.is-lg{ height: 44px; } /* the calendar's ‹ › (11px glyphs) */ html.ui-2026 body:not(#dn26) .zcal-icon-btn{ min-width: 44px; min-height: 44px; font-size: var(--dn-fs-16); } } /* ------------------------------------------------------------------ P3. Page heads One pattern on every list page: the title row (24px display title + count chip, the primary action at the inline end), then the search row, then the filters. The classic heads are the same elements in a different dress (Contacts' New Contact had collapsed to a 15px bar, Tasks had a boxed hero, Properties hid its title, Data stacked four buttons). */ @media (max-width: 900px){ /* ---- Leads · Deals · Data (.crm-dl-head is sticky in ui.css; it keeps the canvas behind it) ---- */ html.ui-2026 body:not(#dn26) .crm-dl-head{ display: flex; flex-wrap: wrap; align-items: center; row-gap: 10px; column-gap: 10px; padding-top: 4px; padding-bottom: 8px; background: var(--dn-canvas-glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } html.ui-2026 body:not(#dn26) :is(#page-customers, #page-deals) .crm-dl-head .crm-dl-title{ flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 10px; } html.ui-2026 body:not(#dn26) :is(#page-customers, #page-deals, #page-data) .crm-dl-head h2{ margin: 0; line-height: 1.2; } html.ui-2026 body:not(#dn26) :is(.crm-dl-count, .dt-count){ font-size: var(--dn-fs-13); font-weight: 500; color: var(--ink-3); white-space: nowrap; } /* row 2: the search box and, on Leads, the quick-add (⚡) beside it — the box is too wide for row 1, so it wraps and the 44px button follows it */ html.ui-2026 body:not(#dn26) .crm-dl-head .crm-dl-search{ order: 3; flex: 1 1 calc(100% - 58px); } html.ui-2026 body:not(#dn26) .crm-dl-head > .crm-add-btn{ flex: 0 0 auto; order: 2; } html.ui-2026 body:not(#dn26) .crm-dl-head > .crm-quick-add-btn{ order: 3; flex: 0 0 44px; width: 44px; height: 44px; } /* Data: the title cell, then the four actions on one 44px row (New Record takes the room) */ html.ui-2026 body:not(#dn26) #data-content .crm-dl-head > div:first-child{ flex: 1 1 100%; display: flex; align-items: baseline; gap: 10px; } html.ui-2026 body:not(#dn26) #data-content .crm-dl-head > div:last-child{ flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } html.ui-2026 body:not(#dn26) #data-content .crm-dl-head > div:last-child > .btn{ flex: 1 1 auto; min-height: 44px; justify-content: center; } html.ui-2026 body:not(#dn26) #data-content .crm-dl-head > div:last-child > .btn.btn-primary{ flex: 1 1 100%; order: -1; } html.ui-2026 body:not(#dn26) #data-content .crm-dl-head .dt-danger-sep{ display: none; } html.ui-2026 body:not(#dn26) #data-content .crm-dl-head .dn-ovf{ flex: 0 0 auto; } /* ---- Properties: the title comes back (ui.css hides it with !important); one row with New Property ---- */ html.ui-2026 body:not(#dn26) .prp-head{ display: flex !important; /* ui.css (crm-mobile-lock): .prp-head{margin/padding/gap !important} */ flex-direction: row; /* ui.css (≤900): the [class$="-header"] blanket stacks it */ flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px !important; margin: 0 0 10px !important; padding: 4px 0 0 !important; } html.ui-2026 body:not(#dn26) .prp-head .prp-title{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: start; } html.ui-2026 body:not(#dn26) .prp-title h2{ display: block !important; margin: 0; line-height: 1.2; } /* ui.css: html.crm-mobile-lock .prp-title h2{display:none !important} */ html.ui-2026 body:not(#dn26) .prp-head .crm-add-btn{ flex: 0 0 auto; } html.ui-2026 body:not(#dn26) .prp-mfilters{ margin: 0 0 10px; } html.ui-2026 body:not(#dn26) .prp-mfilter-btn{ height: 44px; border-radius: var(--dn-r-md); border-color: var(--dn-line-strong); background: var(--surface); color: var(--ink); font-weight: 500; font-size: var(--dn-fs-14); } html.ui-2026 body:not(#dn26) .prp-mfilter-btn.is-on{ border-color: var(--brand); background: var(--brand-tint); color: var(--brand-text); } html.ui-2026 body:not(#dn26) .prp-mfilter-summary{ margin-bottom: 12px; font-size: var(--dn-fs-13); color: var(--ink-3); } html.ui-2026 body:not(#dn26) .prp-mfilter-count b{ color: var(--ink); font-weight: 600; } /* ---- Contacts: title + count, New Contact at the end (it had collapsed to a 334×15 strip) ---- */ html.ui-2026 body:not(#dn26) .own-header{ display: flex; flex-direction: row; /* ui.css (≤900): the [class$="-header"] blanket stacks it */ flex-wrap: wrap; align-items: center !important; /* ui.css (≤900): .own-header{align-items:center !important;gap:8px !important} */ justify-content: space-between; gap: 10px !important; margin: 4px 0 10px !important; padding: 0; } html.ui-2026 body:not(#dn26) .own-header > div{ flex: 1 1 auto; min-width: 0; } html.ui-2026 body:not(#dn26) .own-title-row{ display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } html.ui-2026 body:not(#dn26) .own-title{ margin: 0; line-height: 1.2; } html.ui-2026 body:not(#dn26) .own-count-chip{ font-size: var(--dn-fs-13); font-weight: 500; color: var(--ink-3); background: none; border: 0; padding: 0; } html.ui-2026 body:not(#dn26) .own-btn-add{ flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; min-height: 44px; padding: 0 14px; font-size: var(--dn-fs-14); white-space: nowrap; } html.ui-2026 body:not(#dn26) .own-toolbar{ padding: 0 0 10px !important; /* ui.css (≤900): .own-toolbar{…padding:8px 0 10px} (two rules, one !important) */ margin-bottom: 8px !important; gap: 8px; background: var(--dn-canvas-glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } html.ui-2026 body:not(#dn26) .own-search-wrap{ min-height: 44px; } html.ui-2026 body:not(#dn26) #own-search{ min-height: 44px; } /* ---- Tasks: the boxed hero becomes the same title row (ui-2026.css §18h paints .ztask-hero and .ztask-toolbar with a (1,4,3) list selector and ui.css forces their phone padding, hence the second :not() and the !important) ---- */ html.ui-2026 body:not(#dn26):not(#dn27) .ztask-hero{ display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px; padding: 4px 0 0 !important; /* ui.css (≤900): .ztask-hero{padding:10px 12px !important} */ margin-bottom: 12px; border: 0; border-radius: 0; background: none; box-shadow: none !important; } html.ui-2026 body:not(#dn26) .ztask-hero > div{ flex: 1 1 auto; min-width: 0; } html.ui-2026 body:not(#dn26) .ztask-hero h1{ margin: 0; line-height: 1.2; font-size: var(--dn-fs-24) !important; } /* ui.css (≤900): .ztask-hero h1{font-size:18px !important} */ html.ui-2026 body:not(#dn26) .ztask-hero p{ margin: 2px 0 0; font-size: var(--dn-fs-13); color: var(--ink-3); } html.ui-2026 body:not(#dn26) .ztask-hero .ztask-primary{ flex: 0 0 auto; width: auto; min-height: 44px !important; padding-inline: 14px; } /* ui.css: html.crm-mobile-lock .ztask-primary{min-height:44px !important} */ html.ui-2026 body:not(#dn26):not(#dn27) .ztask-toolbar{ gap: 8px; padding: 0 !important; /* ui.css (≤900): .ztask-toolbar{padding:8px !important} */ border: 0; border-radius: 0; background: none; box-shadow: none; margin-bottom: 12px; } html.ui-2026 body:not(#dn26) .ztask-filterset{ flex-direction: row; gap: 8px; } html.ui-2026 body:not(#dn26) .ztask-search{ flex: 1 1 auto; min-height: 44px; } /* the New task form's people search: a bordered wrapper whose input is height:100% of the content box (§18i) — 46px outside so the input itself is 44 */ html.ui-2026 body:not(#dn26) .ztask-people-search{ min-height: 46px; height: 46px; } html.ui-2026 body:not(#dn26) .ztask-filterset select{ flex: 0 1 44%; } } /* ------------------------------------------------------------------ P4. Search boxes, filter rows, chip rows */ @media (max-width: 900px){ html.ui-2026 body:not(#dn26) :is(.crm-dl-search, .prp-mfilters .prp-search, .own-search-wrap, .ztask-search, .dt-search){ min-height: 44px; border-radius: var(--dn-r-md); } html.ui-2026 body:not(#dn26) :is(.crm-dl-search input, .prp-mfilters .prp-search input, .own-search-wrap input, .ztask-search input, .dt-search input){ min-height: 44px; font-size: var(--dn-fs-16); } html.ui-2026 body:not(#dn26) .dt-bar{ gap: 8px; margin-bottom: 12px; } html.ui-2026 body:not(#dn26) .dt-bar .dt-search{ flex: 1 1 200px; } html.ui-2026 body:not(#dn26) .dt-bar > .btn.dt-mobile-only{ flex: 0 0 auto; } html.ui-2026 body:not(#dn26) .dt-bar > .btn.dt-mobile-only{ min-height: 44px; padding-inline: 14px; border-radius: var(--dn-r-md); font-size: var(--dn-fs-14); } /* the dataset / sort selects sit two on a row */ html.ui-2026 body:not(#dn26) .crm-dl-bar{ margin-bottom: 12px; } html.ui-2026 body:not(#dn26) .crm-dl-controls{ display: flex; flex-wrap: wrap; gap: 8px; } html.ui-2026 body:not(#dn26) .crm-dl-controls > *{ flex: 1 1 calc(50% - 4px); min-width: 0; } html.ui-2026 body:not(#dn26) .crm-dl-controls > .crm-dl-agentfilter{ flex: 1 1 100%; } html.ui-2026 body:not(#dn26) .crm-dl-agentinput{ width: 100%; } /* the stage chip row scrolls edge to edge, the ends fade instead of cutting a word */ html.ui-2026 body:not(#dn26) .crm-dl-tabs{ margin-inline: calc(-1 * var(--dn-gutter)); padding-inline: var(--dn-gutter); padding-bottom: 2px; scroll-padding-inline: var(--dn-gutter); -webkit-mask-image: linear-gradient(to right, transparent, var(--ink) 14px, var(--ink) calc(100% - 22px), transparent); mask-image: linear-gradient(to right, transparent, var(--ink) 14px, var(--ink) calc(100% - 22px), transparent); scrollbar-width: none; } html.ui-2026 body:not(#dn26) .crm-dl-tabs::-webkit-scrollbar{ display: none; } html.ui-2026[dir="rtl"] body:not(#dn26) .crm-dl-tabs{ -webkit-mask-image: linear-gradient(to left, transparent, var(--ink) 14px, var(--ink) calc(100% - 22px), transparent); mask-image: linear-gradient(to left, transparent, var(--ink) 14px, var(--ink) calc(100% - 22px), transparent); } html.ui-2026 body:not(#dn26) .crm-dl-tab{ scroll-snap-align: start; } } /* ------------------------------------------------------------------ P5. List cards The design system's list card: 14px corners, a hairline ring and the resting shadow, 16px inside, a 15/600 title, 13px secondary lines, a 44px action row with 10px buttons, the 12px type floor. One recipe for the six lists. */ @media (max-width: 900px){ html.ui-2026 body:not(#dn26) :is(.crm-dl-card, .prp-card, .own-card, .ztask-row, #page-data .dmhh-card, .srch-m-card, .dev-m-card, .crm-dl-m-card){ border: 1px solid var(--dn-line); border-radius: var(--dn-r-lg); background: var(--surface); box-shadow: var(--dn-shadow-1); transition: box-shadow var(--dn-dur-2), transform var(--dn-dur-1); } html.ui-2026 body:not(#dn26) :is(.crm-dl-card, .prp-card, .own-card, .ztask-row, #page-data .dmhh-card):active{ transform: scale(.995); } html.ui-2026 body.dark:not(#dn26) :is(.crm-dl-card, .prp-card, .own-card, .ztask-row, #page-data .dmhh-card){ box-shadow: none; } html.ui-2026 body:not(#dn26) :is(.crm-dl-m-list, .prp-grid, .own-grid, .ztask-table-body, #page-data .dmhh-cards){ gap: 10px; } /* ---- Leads (.crm-lc) ---- */ html.ui-2026 body:not(#dn26) #page-customers .crm-dl-card.crm-lc{ gap: 8px; padding: 14px 16px 12px; } html.ui-2026 body:not(#dn26) .crm-lc-name{ font-size: var(--dn-fs-16); font-weight: 600; letter-spacing: var(--dn-tracking-display); } html.ui-2026 body:not(#dn26) .crm-lc-status{ font-size: var(--dn-fs-13); font-weight: 500; color: var(--ink-3); } html.ui-2026 body:not(#dn26) .crm-lc-meta{ font-size: var(--dn-fs-13); color: var(--ink-3); } html.ui-2026 body:not(#dn26) .crm-lc-actions{ gap: 8px; padding-top: 12px; border-top: 1px solid var(--dn-line); } html.ui-2026 body:not(#dn26) .crm-lc-btn{ border-radius: var(--dn-r-md); border-color: var(--dn-line-strong); background: var(--surface); color: var(--ink); font-size: var(--dn-fs-14); font-weight: 500; } html.ui-2026 body:not(#dn26) .crm-lc-btn.wa{ border-color: transparent; background: var(--brand-tint); color: var(--brand-text); } html.ui-2026 body:not(#dn26) .crm-lc-btn.crm-lc-more{ color: var(--ink-3); } html.ui-2026 body:not(#dn26) .crm-lc-btn:active{ background: var(--dn-pressed); } html.ui-2026 body:not(#dn26) .crm-lc .crm-dl-card-check{ top: 8px; inset-inline-end: 8px; } html.ui-2026 body:not(#dn26) .crm-lc .crm-dl-card-check input{ width: 22px; height: 22px; } html.ui-2026 body:not(#dn26) .crm-lc-nophone{ font-size: var(--dn-fs-13); } /* a selected card: the brand tint ring */ html.ui-2026 body:not(#dn26) .crm-dl-card.is-selected, html.ui-2026 body:not(#dn26) .crm-dl-card:has(.crm-dl-card-check input:checked){ border-color: var(--brand); background: var(--brand-tint); box-shadow: 0 0 0 1px var(--brand); } /* ---- Deals (.crm-dl-card article) ---- */ html.ui-2026 body:not(#dn26) #page-deals .crm-dl-card{ padding: 14px 16px; gap: 10px; } html.ui-2026 body:not(#dn26) .crm-dl-card-name{ font-size: var(--dn-fs-16); font-weight: 600; letter-spacing: var(--dn-tracking-display); } html.ui-2026 body:not(#dn26) .crm-dl-budget{ font-size: var(--dn-fs-15); font-weight: 600; font-variant-numeric: tabular-nums; } html.ui-2026 body:not(#dn26) :is(.crm-dl-card-contact, .crm-dl-card-owner, .crm-dl-card-foot span){ font-size: var(--dn-fs-13); color: var(--ink-3); } html.ui-2026 body:not(#dn26):not(#dn27) .crm-dl-card-owner span{ font-size: var(--dn-fs-13); } /* ui.css: #page-deals.crm-gold-v2 .crm-dl-card-owner span:first-child{font-size:11px} */ html.ui-2026 body:not(#dn26) .crm-dl-card-wf{ padding-top: 10px; border-top: 1px solid var(--dn-line); font-size: var(--dn-fs-13); color: var(--ink-3); } html.ui-2026 body:not(#dn26) .crm-dl-card-wf .btn{ min-height: 44px; padding-inline: 14px; font-size: var(--dn-fs-14); border-radius: var(--dn-r-md); } /* ---- Properties (.prp-card) ---- */ html.ui-2026 body:not(#dn26) .prp-card{ overflow: hidden; } html.ui-2026 body:not(#dn26) .prp-card-body{ padding: 14px 16px 12px; gap: 10px; } html.ui-2026 body:not(#dn26) .prp-card-name{ font-size: var(--dn-fs-16); font-weight: 600; letter-spacing: var(--dn-tracking-display); } html.ui-2026 body:not(#dn26) .prp-card-meta{ font-size: var(--dn-fs-13); color: var(--ink-3); } html.ui-2026 body:not(#dn26) .prp-card-cells{ gap: 8px; } html.ui-2026 body:not(#dn26) .prp-cell{ border-radius: var(--dn-r-md); background: var(--surface-2); border: 1px solid var(--dn-line); padding: 10px 12px; } html.ui-2026 body:not(#dn26) .prp-cell.gold{ background: var(--brand-tint); border-color: transparent; } html.ui-2026 body:not(#dn26) .prp-cell span{ font-size: var(--dn-fs-12); font-weight: 500; color: var(--ink-3); } html.ui-2026 body:not(#dn26) .prp-cell b{ font-size: var(--dn-fs-15); font-weight: 600; font-variant-numeric: tabular-nums; } html.ui-2026 body:not(#dn26) .prp-cell.gold b{ color: var(--brand-text); } html.ui-2026 body:not(#dn26) .prp-card-foot{ padding-top: 10px; border-top: 1px solid var(--dn-line); font-size: var(--dn-fs-13); color: var(--ink-3); } html.ui-2026 body:not(#dn26) .prp-noimg{ font-size: var(--dn-fs-13); } html.ui-2026 body:not(#dn26) .prp-noimg small{ font-size: var(--dn-fs-12); } /* ---- Contacts (.own-card) ---- */ html.ui-2026 body:not(#dn26) .own-card{ padding: 14px 16px 12px; } html.ui-2026 body:not(#dn26) .own-card-info b.own-card-name{ font-size: var(--dn-fs-16); font-weight: 600; letter-spacing: var(--dn-tracking-display); } html.ui-2026 body:not(#dn26) .own-card-info .own-card-phone{ font-size: var(--dn-fs-14); color: var(--ink-3); font-variant-numeric: tabular-nums; } html.ui-2026 body:not(#dn26) :is(.own-card-sub, .own-card-pref, .own-card-contact){ font-size: var(--dn-fs-13); color: var(--ink-3); font-weight: 400; } html.ui-2026 body:not(#dn26) .own-budget{ font-size: var(--dn-fs-14); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } html.ui-2026 body:not(#dn26) .own-card-actions{ padding-top: 12px; border-top: 1px solid var(--dn-line); gap: 8px; } html.ui-2026 body:not(#dn26) .own-card-actions{ flex-wrap: wrap; } html.ui-2026 body:not(#dn26) .own-card-actions > *{ flex: 1 1 auto; min-width: max-content; min-height: 44px; border-radius: var(--dn-r-md); font-size: var(--dn-fs-14); font-weight: 500; } html.ui-2026 body:not(#dn26) .own-avatar.large{ width: 40px; height: 40px; font-size: var(--dn-fs-13); } /* ---- Tasks (.ztask-row): the 9–10.5px lines come up to the 12px floor ---- */ html.ui-2026 body:not(#dn26) .ztask-row{ padding: 14px 16px; gap: 8px 10px; } html.ui-2026 body:not(#dn26) .ztask-title-cell b{ font-size: var(--dn-fs-15); font-weight: 600; } html.ui-2026 body:not(#dn26) .ztask-title-cell small{ font-size: var(--dn-fs-12); color: var(--ink-3); } html.ui-2026 body:not(#dn26) .ztask-row .ztask-owner span:last-child{ font-size: var(--dn-fs-13); color: var(--ink-3); } html.ui-2026 body:not(#dn26) .ztask-avatar{ width: 28px; height: 28px; font-size: var(--dn-fs-12); } html.ui-2026 body:not(#dn26) .ztask-due{ font-size: var(--dn-fs-13); } html.ui-2026 body:not(#dn26) .ztask-due > span:first-child{ font-size: var(--dn-fs-13); font-variant-numeric: tabular-nums; } html.ui-2026 body:not(#dn26) :is(.ztask-overdue-chip, .ztask-status){ font-size: var(--dn-fs-12); } html.ui-2026 body:not(#dn26) .ztask-actions{ gap: 8px; } html.ui-2026 body:not(#dn26) .ztask-actions button{ border-radius: var(--dn-r-md); } html.ui-2026 body:not(#dn26) .ztask-row button.ztask-start{ display: inline-flex; align-items: center; width: auto; padding-inline: 0; font-size: var(--dn-fs-14); font-weight: 500; text-align: start; } html.ui-2026 body:not(#dn26) .ztask-title-cell > span{ display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: start; } /* ---- Data (.dmhh-card) ---- */ html.ui-2026 body:not(#dn26) #page-data .dmhh-card{ --dmhh-card-pad: 16px; gap: 10px; } html.ui-2026 body:not(#dn26) .dmhh-title{ font-size: var(--dn-fs-16); font-weight: 600; letter-spacing: var(--dn-tracking-display); } html.ui-2026 body:not(#dn26) .dmhh-sub{ font-size: var(--dn-fs-13); color: var(--ink-3); } html.ui-2026 body:not(#dn26) .dmhh-meta{ font-size: var(--dn-fs-13); color: var(--ink-3); } html.ui-2026 body:not(#dn26) .dmhh-meta b{ font-size: var(--dn-fs-13); color: var(--ink); font-weight: 500; } html.ui-2026 body:not(#dn26) .dmhh-actions{ padding-top: 10px; border-top: 1px solid var(--dn-line); gap: 8px; } html.ui-2026 body:not(#dn26) .dmhh-actions > *{ min-height: 44px; border-radius: var(--dn-r-md); } html.ui-2026 body:not(#dn26) #page-data .dt-act.is-lg{ font-size: var(--dn-fs-14); font-weight: 500; } /* Property Search's result cards: the 8.5px "No photo" caption */ html.ui-2026 body:not(#dn26) .ss-noimg small{ font-size: var(--dn-fs-12); } /* the "show more" step at the end of a list */ html.ui-2026 body:not(#dn26) .crm-showmore-btn{ min-height: 44px; border-radius: var(--dn-r-md); font-size: var(--dn-fs-14); font-weight: 500; } } /* ------------------------------------------------------------------ P6. Record layers The lead / deal / property record (.lead-modal), the contact panel (.own-panel), the task detail and the Data record sheet: a header with the 44px close, sticky section titles inside the scroller, a translucent action bar on the safe area. */ @media (max-width: 900px){ /* ---- .lead-modal (leads, deals, properties) ---- */ /* ui.css pins the whole record layer `direction:ltr` (.lead-modal-overlay), so in Persian and Arabic the record never mirrored: title at the left, ‹ › at the left, labels at the left. On a phone in the 2026 look it follows again — the same `inherit` r189 used to free Contacts. Its rules are flex + logical properties, so nothing else is needed except the fixed close button, which ui.css places with a physical `right`. */ html.ui-2026 body:not(#dn26) .lead-modal-overlay{ direction: inherit; } html.ui-2026[dir="rtl"] body:not(#dn26) .lead-modal .lm-close{ right: auto !important; left: max(10px, var(--dn-safe-left)) !important; } /* ui.css (≤900): .lead-modal .lm-close{right:10px;left:auto !important} */ html.ui-2026 body:not(#dn26) .lead-modal .lm-header{ gap: 8px 10px; padding: 10px var(--dn-gutter) 10px; padding-top: max(10px, var(--dn-safe-top)); border-bottom: 1px solid var(--dn-line); background: var(--surface); } html.ui-2026 body:not(#dn26) .lead-modal .lm-title h2{ font-family: var(--font-display); font-size: var(--dn-fs-20); font-weight: 700; letter-spacing: var(--dn-tracking-display); line-height: 1.25; padding-inline-end: 48px; } html.ui-2026 body:not(#dn26) .lead-modal .lm-sub{ font-size: var(--dn-fs-13); color: var(--ink-3); } html.ui-2026 body:not(#dn26) .lead-modal .lm-close{ top: max(10px, var(--dn-safe-top)); inset-inline-end: max(10px, var(--dn-safe-right)); width: 44px; height: 44px; border: 1px solid var(--dn-line); border-radius: var(--dn-r-md); background: var(--surface); color: var(--ink); box-shadow: var(--dn-shadow-1); } html.ui-2026 body:not(#dn26) .lead-modal .lm-iconbtn{ border-radius: var(--dn-r-md); border: 1px solid var(--dn-line); background: var(--surface); color: var(--ink); } html.ui-2026 body:not(#dn26) .lead-modal .lm-iconbtn:disabled{ opacity: .4; } html.ui-2026 body:not(#dn26) .lead-modal .lm-stage{ border-radius: var(--dn-r-full); font-size: var(--dn-fs-12); font-weight: 600; } html.ui-2026 body:not(#dn26) .lead-modal .lm-body{ padding: 0 var(--dn-gutter) 24px; gap: 0; background: var(--surface); scroll-padding-top: 48px; } html.ui-2026 body:not(#dn26) .lead-modal .lm-col{ padding: 0; gap: 0; } html.ui-2026 body:not(#dn26) .lead-modal .lm-block{ gap: 10px; padding: 12px 0 18px; border-bottom: 1px solid var(--dn-line); } html.ui-2026 body:not(#dn26) .lead-modal .lm-col > .lm-block:last-child{ border-bottom: 0; } /* the section title sticks to the top of the scroller while its block is in view */ html.ui-2026 body:not(#dn26) .lead-modal .lm-section-title{ position: sticky; top: 0; z-index: 2; display: block; margin: -12px 0 0; padding: 12px 0 8px; background: var(--dn-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: var(--dn-fs-12); font-weight: 600; letter-spacing: var(--dn-tracking-caps); text-transform: uppercase; color: var(--ink-3); } html.ui-2026[dir="rtl"] body:not(#dn26) .lead-modal .lm-section-title{ text-transform: none; font-size: var(--dn-fs-13); } html.ui-2026 body:not(#dn26) .lead-modal .deal-assign-head{ position: sticky; top: 0; z-index: 2; margin: -12px 0 0; padding: 8px 0; background: var(--dn-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } html.ui-2026 body:not(#dn26) .lead-modal .deal-assign-head .lm-section-title{ position: static; margin: 0; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; } html.ui-2026 body:not(#dn26) .lead-modal .lm-field{ min-height: 44px; padding: 10px 0; border-bottom: 1px solid var(--border-subtle, var(--dn-line)); } html.ui-2026 body:not(#dn26) .lead-modal .lm-field > :first-child{ font-size: var(--dn-fs-13); color: var(--ink-3); } html.ui-2026 body:not(#dn26) .lead-modal .lm-field > :last-child{ font-size: var(--dn-fs-15); color: var(--ink); } html.ui-2026 body:not(#dn26) .lead-modal .lm-empty{ font-size: var(--dn-fs-14); color: var(--ink-3); } html.ui-2026 body:not(#dn26) .lead-modal .lm-stage-hint{ font-size: var(--dn-fs-13); color: var(--ink-3); } html.ui-2026 body:not(#dn26) .lead-modal :is(.lm-trans, .lm-ghost){ min-height: 44px; border-radius: var(--dn-r-md); font-size: var(--dn-fs-14); font-weight: 500; } html.ui-2026 body:not(#dn26) .lead-modal .lm-btnrow{ gap: 8px; } html.ui-2026 body:not(#dn26) .lead-modal .lm-note{ border-radius: var(--dn-r-md); font-size: var(--dn-fs-16); } html.ui-2026 body:not(#dn26) .lead-modal .own-panel-section h3{ font-size: var(--dn-fs-14); font-weight: 600; } /* the Properties record tabs (Details · Gallery · Documents) scroll if they must, never wrap or clip */ html.ui-2026 body:not(#dn26) .lead-modal .prp-record-tabs{ width: 100%; max-width: 100%; overflow-x: auto; padding-inline: var(--dn-gutter); border-bottom: 1px solid var(--dn-line); background: var(--surface); scrollbar-width: none; } html.ui-2026 body:not(#dn26) .lead-modal .prp-record-tabs::-webkit-scrollbar{ display: none; } /* the phone action bar (WhatsApp · Call · Edit · Convert · More): glass on the safe area */ html.ui-2026 body:not(#dn26) .lead-modal .lm-mbar{ gap: 4px; padding: 6px max(8px, var(--dn-safe-right)) calc(6px + var(--dn-safe-bottom)) max(8px, var(--dn-safe-left)); border-top: 1px solid var(--dn-line); background: var(--dn-glass); -webkit-backdrop-filter: saturate(1.5) blur(18px); backdrop-filter: saturate(1.5) blur(18px); } html.ui-2026 body:not(#dn26) .lead-modal .lm-mbar-btn{ min-height: 54px; border-radius: var(--dn-r-md); font-size: var(--dn-fs-12); font-weight: 500; color: var(--ink); } html.ui-2026 body:not(#dn26) .lead-modal .lm-mbar-btn:active{ background: var(--dn-pressed); } html.ui-2026 body:not(#dn26) .lead-modal .lm-mbar-btn:is(.wa, .call){ background: var(--brand-tint); color: var(--brand-text); } html.ui-2026 body:not(#dn26) .lead-modal .lm-mbar-btn svg{ width: 22px; height: 22px; } /* ---- the contact panel (.own-panel) ---- */ html.ui-2026 body:not(#dn26) .own-panel-hdr{ gap: 10px; padding: 10px var(--dn-gutter); padding-top: max(10px, var(--dn-safe-top)); border-bottom: 1px solid var(--dn-line); background: var(--surface); } html.ui-2026 body:not(#dn26) .own-panel-close{ width: 44px; height: 44px; border: 1px solid var(--dn-line); border-radius: var(--dn-r-md); background: var(--surface); color: var(--ink); font-size: var(--dn-fs-20); } html.ui-2026 body:not(#dn26) .own-panel-name{ font-family: var(--font-display); font-size: var(--dn-fs-20); font-weight: 700; letter-spacing: var(--dn-tracking-display); } html.ui-2026 body:not(#dn26) .own-panel-source{ font-size: var(--dn-fs-13); color: var(--ink-3); } html.ui-2026 body:not(#dn26) .own-panel-edit-btn{ border-radius: var(--dn-r-md); font-size: var(--dn-fs-14); font-weight: 500; } html.ui-2026 body:not(#dn26) .own-panel-actions{ gap: 8px; padding: 10px var(--dn-gutter); border-bottom: 1px solid var(--dn-line); background: var(--surface); overflow-x: auto; scrollbar-width: none; } html.ui-2026 body:not(#dn26) .own-panel-actions::-webkit-scrollbar{ display: none; } html.ui-2026 body:not(#dn26) .own-panel-actions > *{ flex: 1 0 auto; min-height: 44px; border-radius: var(--dn-r-md); border: 1px solid var(--dn-line-strong); background: var(--surface); color: var(--ink); font-size: var(--dn-fs-14); font-weight: 500; } html.ui-2026 body:not(#dn26) .own-panel-body{ padding: 0 var(--dn-gutter) 24px; background: var(--surface); } html.ui-2026 body:not(#dn26) .own-panel-kpis{ margin: 12px 0; border: 1px solid var(--dn-line); border-radius: var(--dn-r-lg); background: var(--surface-2); } html.ui-2026 body:not(#dn26) .own-panel-kpis > div{ border-color: var(--dn-line); } html.ui-2026 body:not(#dn26) .own-panel-kpis span{ font-size: var(--dn-fs-13); color: var(--ink-3); } html.ui-2026 body:not(#dn26) .own-panel-kpis b{ font-size: var(--dn-fs-15); } html.ui-2026 body:not(#dn26) .own-panel-body .own-panel-section{ margin: 0; padding: 0 0 8px; border: 0; border-radius: 0; background: none; box-shadow: none; } html.ui-2026 body:not(#dn26) .own-panel-body .own-panel-section > h3{ position: sticky; top: 0; z-index: 2; margin: 0; padding: 12px 0 8px; background: var(--dn-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: var(--dn-fs-12); font-weight: 600; letter-spacing: var(--dn-tracking-caps); text-transform: uppercase; color: var(--ink-3); } html.ui-2026[dir="rtl"] body:not(#dn26) .own-panel-body .own-panel-section > h3{ text-transform: none; font-size: var(--dn-fs-13); } html.ui-2026 body:not(#dn26) .own-detail{ min-height: 44px; padding: 10px 0; border-bottom: 1px solid var(--border-subtle, var(--dn-line)); } html.ui-2026 body:not(#dn26) .own-detail > span{ font-size: var(--dn-fs-13); color: var(--ink-3); } html.ui-2026 body:not(#dn26) .own-detail > b{ font-size: var(--dn-fs-15); font-weight: 500; color: var(--ink); } html.ui-2026 body:not(#dn26) .own-panel-section .act-muted{ font-size: var(--dn-fs-14); color: var(--ink-3); } /* ---- the task detail (#todo-detail-modal): the 9px eyebrow and labels reach the floor ---- */ html.ui-2026 body:not(#dn26) .ztask-detail-head{ padding: 10px var(--dn-gutter); padding-top: max(10px, var(--dn-safe-top)); border-bottom: 1px solid var(--dn-line); } html.ui-2026 body:not(#dn26) .ztask-detail-head > div:first-child > span{ font-size: var(--dn-fs-12); font-weight: 600; letter-spacing: var(--dn-tracking-caps); color: var(--ink-3); } html.ui-2026 body:not(#dn26) .ztask-detail-head h2{ font-family: var(--font-display); font-size: var(--dn-fs-20); font-weight: 700; letter-spacing: var(--dn-tracking-display); line-height: 1.25; } html.ui-2026 body:not(#dn26) .ztask-detail-head button.close{ width: 44px; height: 44px; border: 1px solid var(--dn-line); border-radius: var(--dn-r-md); background: var(--surface); color: var(--ink); } html.ui-2026 body:not(#dn26) .ztask-detail-body{ padding: 12px var(--dn-gutter) 24px; } html.ui-2026 body:not(#dn26) .ztask-detail-grid{ gap: 8px; } html.ui-2026 body:not(#dn26) .ztask-detail-grid > div{ min-height: 56px; padding: 10px 14px; border: 1px solid var(--dn-line); border-radius: var(--dn-r-lg); background: var(--surface-2); } html.ui-2026 body:not(#dn26) .ztask-detail-grid > div > span{ font-size: var(--dn-fs-12); font-weight: 600; letter-spacing: var(--dn-tracking-caps); color: var(--ink-3); } html.ui-2026 body:not(#dn26) .ztask-detail-grid > div > b{ font-size: var(--dn-fs-15); font-weight: 500; } html.ui-2026 body:not(#dn26) .ztask-detail-body section > h3{ position: sticky; top: -12px; z-index: 2; margin: 0; padding: 12px 0 8px; background: var(--dn-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: var(--dn-fs-12); font-weight: 600; letter-spacing: var(--dn-tracking-caps); text-transform: uppercase; color: var(--ink-3); } html.ui-2026[dir="rtl"] body:not(#dn26) :is(.ztask-detail-body section > h3, .ztask-detail-grid > div > span, .ztask-detail-head > div:first-child > span){ text-transform: none; font-size: var(--dn-fs-13); letter-spacing: 0; } html.ui-2026 body:not(#dn26) .ztask-detail-owner b{ font-size: var(--dn-fs-15); } html.ui-2026 body:not(#dn26) .ztask-desc{ font-size: var(--dn-fs-15); line-height: 1.5; } html.ui-2026 body:not(#dn26) .ztask-detail-foot{ gap: 8px; padding: 10px max(var(--dn-gutter), var(--dn-safe-right)) calc(10px + var(--dn-safe-bottom)) max(var(--dn-gutter), var(--dn-safe-left)); border-top: 1px solid var(--dn-line); background: var(--dn-glass); -webkit-backdrop-filter: saturate(1.5) blur(18px); backdrop-filter: saturate(1.5) blur(18px); } html.ui-2026 body:not(#dn26) .ztask-foot-btn{ min-height: 48px; border-radius: var(--dn-r-md); font-size: var(--dn-fs-15); font-weight: 500; } /* ---- the Data record sheet (#small-modal.dt-modal-wide) ---- */ html.ui-2026 body:not(#dn26) #small-modal .dt-dsec h5{ position: sticky; top: -14px; z-index: 2; margin: 0 0 8px; padding: 12px 0 8px; border-bottom: 1px solid var(--dn-line); background: var(--dn-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: var(--dn-fs-12); font-weight: 600; letter-spacing: var(--dn-tracking-caps); color: var(--ink-3); } html.ui-2026[dir="rtl"] body:not(#dn26) #small-modal .dt-dsec h5{ text-transform: none; font-size: var(--dn-fs-13); letter-spacing: 0; } html.ui-2026 body:not(#dn26) #small-modal .dt-dfield{ min-height: 44px; } html.ui-2026 body:not(#dn26) #small-modal .dt-dfield > span{ font-size: var(--dn-fs-12); font-weight: 600; letter-spacing: var(--dn-tracking-caps); color: var(--ink-3); } html.ui-2026[dir="rtl"] body:not(#dn26) #small-modal .dt-dfield > span{ text-transform: none; font-size: var(--dn-fs-13); letter-spacing: 0; } html.ui-2026 body:not(#dn26) #small-modal .dt-dfield > b{ font-size: var(--dn-fs-15); font-weight: 500; } html.ui-2026 body:not(#dn26) #small-modal .dt-dhead{ margin-bottom: 8px; } html.ui-2026 body:not(#dn26) #small-modal .dmhh-actions .btn{ min-height: 44px; } } /* ------------------------------------------------------------------ P7. Sheets (#small-modal and every .modal-overlay on a phone) ui.css (html.crm-mobile-lock) already makes the dialog a bottom sheet with a sticky header and footer. 2026 wave 1 gave it the sheet corners. Here: the safe area under a footer-less sheet (the More menu, the Create menu, a card's action menu ran under the home indicator), 16px gutters, 52px rows, and the sheet's own scrim on the whole screen. */ @media (max-width: 900px){ html.ui-2026.crm-mobile-lock body:not(#dn26) :is(.modal-body, #small-modal-body){ padding: 14px var(--dn-gutter) 18px !important; /* ui.css: html.crm-mobile-lock .modal-body{padding:14px 14px 18px !important} */ } /* no footer → the body ends above the home indicator */ html.ui-2026.crm-mobile-lock body:not(#dn26) .modal-overlay .modal:not(:has(> .modal-footer:not(:empty))) > .modal-body, html.ui-2026.crm-mobile-lock body:not(#dn26) #small-modal:not(:has(#small-modal-footer:not(:empty))) #small-modal-body{ padding-bottom: calc(18px + var(--dn-safe-bottom)) !important; } html.ui-2026.crm-mobile-lock body:not(#dn26) :is(.modal-header, #small-modal .modal-header){ min-height: 60px; padding: 8px 8px 8px var(--dn-gutter) !important; /* ui.css: html.crm-mobile-lock .modal-header{padding:8px 12px !important} */ padding-inline: var(--dn-gutter) 8px !important; background: var(--surface); } html.ui-2026.crm-mobile-lock body:not(#dn26) :is(.modal-footer, #small-modal-footer){ padding: 10px max(var(--dn-gutter), var(--dn-safe-right)) calc(10px + var(--dn-safe-bottom)) max(var(--dn-gutter), var(--dn-safe-left)) !important; /* ui.css: html.crm-mobile-lock .modal-footer{padding:… !important} */ background: var(--surface); } html.ui-2026.crm-mobile-lock body:not(#dn26) :is(.modal-footer, #small-modal-footer) .btn{ border-radius: var(--dn-r-md); font-size: var(--dn-fs-15); } /* the full-screen forms (the classic id-scoped rule keeps them square): their header sits on the status bar */ html.ui-2026.crm-mobile-lock body:not(#dn26) :is(#small-modal.crm-form-gold-v2, #small-modal.task-modal-gold-v2, #small-modal.usr-modal-gold-v2, #small-modal.adv-modal-gold-v2, #small-modal.rent-modal-gold-v2, #small-modal.blueprint-modal-v1, #small-modal.ztask-form-modal) .modal-header{ padding-top: max(8px, var(--dn-safe-top)) !important; } /* menu rows: 52px, 10px corners, the icon tile */ html.ui-2026 body:not(#dn26) .mbn-menu-row{ min-height: 52px; padding: 8px 10px; border-radius: var(--dn-r-md); font-size: var(--dn-fs-15); font-weight: 500; } html.ui-2026 body:not(#dn26) .mbn-menu-row:active{ background: var(--dn-pressed); } html.ui-2026 body:not(#dn26) .mbn-menu-ic{ width: 36px; height: 36px; border-radius: var(--dn-r-md); background: var(--surface-2); color: var(--ink-3); } html.ui-2026 body:not(#dn26) .mbn-menu-label{ font-size: var(--dn-fs-15); font-weight: 500; } html.ui-2026 body:not(#dn26) .mbn-menu-row.is-danger .mbn-menu-label{ color: var(--danger); } html.ui-2026 body:not(#dn26) .qc-sheet .qc-item{ height: 52px; padding: 0 10px; border-radius: var(--dn-r-md); font-size: var(--dn-fs-15); font-weight: 500; } html.ui-2026 body:not(#dn26) .qc-item:active{ background: var(--dn-pressed); } html.ui-2026 body:not(#dn26) .qc-hint{ font-size: var(--dn-fs-13); color: var(--ink-3); } html.ui-2026 body:not(#dn26) .crm-action-sheet-name{ padding: 4px 10px 10px; font-size: var(--dn-fs-15); font-weight: 600; } /* the More sheet's own header (name · role · View profile) */ html.ui-2026 body:not(#dn26) #small-modal.mbn-menu-mode #small-modal-body > div > button:first-child{ border-radius: var(--dn-r-lg); } html.ui-2026 body:not(#dn26) .mbn-prefs-h{ font-size: var(--dn-fs-12); font-weight: 600; letter-spacing: var(--dn-tracking-caps); text-transform: uppercase; color: var(--ink-3); } html.ui-2026[dir="rtl"] body:not(#dn26) .mbn-prefs-h{ text-transform: none; font-size: var(--dn-fs-13); } html.ui-2026 body:not(#dn26) .mbn-pref-row{ min-height: 56px; } html.ui-2026 body:not(#dn26) .mbn-seg{ border-radius: var(--dn-r-md); background: var(--surface-2); padding: 3px; } html.ui-2026 body:not(#dn26) .mbn-seg-btn{ min-height: 44px; border-radius: var(--dn-r-sm); font-size: var(--dn-fs-14); font-weight: 500; } /* the filter sheets (Properties, Data): 13px labels, 44px fields, full-width footer buttons */ html.ui-2026 body:not(#dn26) #small-modal-body :is(.prp-mfilter-field label, .prp-mfilter-field > span, .dt-mfilter label, .form-label, label.pf-label){ font-size: var(--dn-fs-13); font-weight: 500; color: var(--ink-3); } html.ui-2026 body:not(#dn26) #small-modal-body :is(select, input:not([type="checkbox"]):not([type="radio"])){ min-height: 44px; font-weight: 500; } /* the sheet's scrim covers the status bar too (it is the whole screen) */ html.ui-2026 body:not(#dn26) :is(.modal-overlay, .lead-modal-overlay, .own-panel-overlay){ background: var(--dn-scrim); } } /* ------------------------------------------------------------------ P8. Bulk bars The design system's bulk bar is the inverse surface (the toast colours) docked above the tab bar with 44px actions. The Leads/Deals bar (.crm-ll-bulkbar) and the Data bar (.dt-selbar) keep their fixed placement, the measured --crm-bottom-nav-h and the end-of-list spacer (crm-mobile-bulk-bar); only the dress and the row layout change. */ @media (max-width: 900px){ html.ui-2026 body:not(#dn26) :is(.crm-ll-bulkbar, #page-data .dt-selbar:not(.dt-selbar-quiet)){ gap: 8px; padding: 10px max(var(--dn-gutter), var(--dn-safe-right)) 10px max(var(--dn-gutter), var(--dn-safe-left)); background: var(--dn-toast-bg); color: var(--dn-toast-text); border: 0; border-top: 1px solid color-mix(in srgb, var(--dn-toast-text) 14%, transparent); box-shadow: var(--dn-shadow-4); } html.ui-2026 body:not(#dn26) :is(.crm-ll-bulkbar > span, #page-data .dt-selbar:not(.dt-selbar-quiet) > b){ color: var(--dn-toast-text); font-size: var(--dn-fs-14); font-weight: 600; font-variant-numeric: tabular-nums; } /* Data: "25" and " selected on this page" read as one line; the note is the small print */ html.ui-2026 body:not(#dn26) #page-data .dt-selbar:not(.dt-selbar-quiet){ font-size: var(--dn-fs-14); font-weight: 500; } html.ui-2026 body:not(#dn26) #page-data .dt-selbar:not(.dt-selbar-quiet) > b{ flex: 0 0 auto; margin-inline-end: -4px; } html.ui-2026 body:not(#dn26) #page-data .dt-selbar:not(.dt-selbar-quiet) > .dt-selnote{ flex: 1 1 100%; order: 9; font-size: var(--dn-fs-12); font-weight: 400; line-height: 1.35; color: color-mix(in srgb, var(--dn-toast-text) 72%, transparent); } /* the buttons: transparent on the inverse surface; Reassign is the brand fill, Delete the danger text */ html.ui-2026 body:not(#dn26) :is(.crm-ll-bulkbar, #page-data .dt-selbar:not(.dt-selbar-quiet)) :is(button, .btn){ min-height: 44px; padding-inline: 12px; border: 1px solid color-mix(in srgb, var(--dn-toast-text) 22%, transparent); border-radius: var(--dn-r-md); background: transparent; color: var(--dn-toast-text); font-size: var(--dn-fs-14); font-weight: 500; box-shadow: none; } html.ui-2026 body:not(#dn26) :is(.crm-ll-bulkbar, #page-data .dt-selbar:not(.dt-selbar-quiet)) :is(button, .btn):hover{ background: color-mix(in srgb, var(--dn-toast-text) 12%, transparent); } html.ui-2026 body:not(#dn26) :is(.crm-ll-bulk-all, #page-data .dt-selbar:not(.dt-selbar-quiet) > .btn-ghost:first-of-type){ font-size: var(--dn-fs-13); } html.ui-2026 body:not(#dn26) :is(.crm-ll-bulk-assign, #page-data .dt-selbar:not(.dt-selbar-quiet) .btn-primary){ flex: 1 1 auto; justify-content: center; border-color: var(--brand) !important; /* ui.css paints .btn-primary with !important */ background: var(--brand) !important; color: var(--on-brand) !important; } html.ui-2026 body:not(#dn26) :is(.crm-ll-bulk-del, #page-data .dt-selbar:not(.dt-selbar-quiet) .dt-danger-btn){ border-color: color-mix(in srgb, var(--danger) 55%, transparent) !important; /* ui-2026.css paints .dt-danger-btn with !important */ background: transparent !important; color: color-mix(in srgb, var(--danger) 70%, var(--dn-toast-text)) !important; } html.ui-2026 body.dark:not(#dn26) :is(.crm-ll-bulk-del, #page-data .dt-selbar:not(.dt-selbar-quiet) .dt-danger-btn){ color: var(--danger) !important; } /* the Leads bar's two rows: [count · select all] / [Clear · Reassign · Delete] — ui.css breaks the row with .crm-ll-bulk-break; the Data bar gets the same shape by order */ html.ui-2026 body:not(#dn26) #page-data .dt-selbar:not(.dt-selbar-quiet) > .btn-ghost:first-of-type{ flex: 0 1 auto; margin-inline-start: auto; } html.ui-2026 body:not(#dn26) #page-data .dt-selbar:not(.dt-selbar-quiet) .btn-primary{ order: 2; } html.ui-2026 body:not(#dn26) #page-data .dt-selbar:not(.dt-selbar-quiet) .btn-ghost:not(:first-of-type){ order: 3; flex: 0 0 auto; } /* "Delete Selected (N)" is long in every language: its own full row under the two actions */ html.ui-2026 body:not(#dn26) #page-data .dt-selbar:not(.dt-selbar-quiet) .dt-danger-btn{ order: 4; flex: 1 1 100%; justify-content: center; } } /* ------------------------------------------------------------------ P9. Loading: card skeletons and the pull line ui-2026-phone.js draws `.dn-phone-skel` (three card-shaped placeholders) into a list host while its request is in flight (Data's page loads, the Projects list; the Contacts loader block), and marks the page `.dn-phone-loading` so a 2px brand line runs under the sticky head. */ @media (max-width: 900px){ html.ui-2026 body:not(#dn26) .dn-phone-skel{ display: grid; gap: 10px; padding: 2px 0 12px; } html.ui-2026 body:not(#dn26) .dn-phone-skel > div{ min-height: 120px; padding: 16px; border: 1px solid var(--dn-line); border-radius: var(--dn-r-lg); background: var(--surface); display: grid; gap: 12px; align-content: start; } html.ui-2026 body:not(#dn26) .dn-phone-skel i{ display: block; height: 12px; border-radius: 6px; background: var(--dn-skeleton); animation: dn26-pulse 1.4s ease-in-out infinite; } html.ui-2026 body:not(#dn26) .dn-phone-skel i:nth-child(1){ width: 55%; height: 16px; } html.ui-2026 body:not(#dn26) .dn-phone-skel i:nth-child(2){ width: 40%; } html.ui-2026 body:not(#dn26) .dn-phone-skel i:nth-child(3){ width: 78%; } html.ui-2026 body:not(#dn26) .dn-phone-skel i:nth-child(4){ width: 100%; height: 44px; border-radius: var(--dn-r-md); margin-top: 4px; } html.ui-2026 body:not(#dn26) .dn-phone-skel + *{ opacity: .5; } /* Contacts' loader block: card shapes instead of the desktop rows */ html.ui-2026 body:not(#dn26) #own-loading:not([hidden]){ min-height: 0; border: 0; border-radius: 0; background: none; animation: none; } /* the pull line: a 2px indeterminate brand bar at the top of the page while a list reloads */ html.ui-2026 body:not(#dn26) .page.dn-phone-loading{ position: relative; } html.ui-2026 body:not(#dn26) .page.dn-phone-loading::before{ content: ""; position: sticky; top: 0; z-index: 30; display: block; height: 2px; margin: 0 calc(-1 * var(--dn-gutter)) -2px; background: linear-gradient(90deg, transparent, var(--brand), transparent) 0 0 / 45% 100% no-repeat; animation: dn26-shimmer 1.1s linear infinite; } html.ui-2026 body:not(#dn26) .page.dn-phone-loading :is(#dt-results, #work-projects-content, #own-list-shell, #own-grid) > :not(.dn-phone-skel):not(.dn-grid-skeleton){ opacity: .5; transition: opacity var(--dn-dur-2); } } /* ------------------------------------------------------------------ P10. Tab bar, FAB, toasts: the safe areas in every orientation */ @media (max-width: 900px){ html.ui-2026 body:not(#dn26) #mobile-bottom-nav{ padding-left: var(--dn-safe-left) !important; /* ui.css: #mobile-bottom-nav{…padding…!important} */ padding-right: var(--dn-safe-right) !important; padding-bottom: var(--dn-safe-bottom) !important; min-height: calc(var(--dn-tabbar-h) + var(--dn-safe-bottom)); } html.ui-2026 body:not(#dn26) #mobile-bottom-nav .mbn-btn{ min-height: 56px; padding-top: 4px; } html.ui-2026 body:not(#dn26) #mobile-bottom-nav .mbn-btn:active{ color: var(--ink) !important; } html.ui-2026 body:not(#dn26) #mobile-bottom-nav .mbn-btn:active::before{ background: var(--dn-pressed); } html.ui-2026 body:not(#dn26) #crm-fab:not([hidden]){ inset-inline-end: max(16px, var(--dn-safe-right)); bottom: calc(var(--dn-tabbar-h) + 12px + var(--dn-safe-bottom)); min-height: 56px; font-size: var(--dn-fs-15); font-weight: 600; } html.ui-2026.crm-install-on body:not(#dn26) #crm-fab:not([hidden]){ bottom: var(--crm-install-clear, calc(142px + var(--dn-safe-bottom))); } html.ui-2026 body:not(#dn26) .toast-container{ left: max(0px, var(--dn-safe-left)) !important; /* ui.css (≤900): .toast-container{left:0!important;right:0!important;bottom:…!important} */ right: max(0px, var(--dn-safe-right)) !important; bottom: calc(var(--dn-tabbar-h) + 12px + var(--dn-safe-bottom) + var(--toast-kb-offset, 0px)) !important; } /* The top bar: #app already pads the status bar (env(safe-area-inset-top)); in ui.css the light theme's `body.light #topbar` (60px, 7px padding) outranks the later `#topbar{padding:env(…) 10px 0}` but the dark theme has no such rule, so dark drew the inset TWICE (a 115px bar on a notched phone). One bar in both themes, and the notch on the side in landscape. */ html.ui-2026 body:is(.light, .dark):not(#dn26) #topbar{ height: 60px !important; /* ui.css (≤900): #topbar{height:calc(56px + env(safe-area-inset-top)) !important; padding:env(safe-area-inset-top) 10px 0 !important} */ min-height: 60px !important; max-height: 60px !important; padding: 7px max(10px, var(--dn-safe-right)) 7px max(10px, var(--dn-safe-left)) !important; } html.ui-2026 body:not(#dn26) #topbar #page-title{ font-family: var(--font-display); font-weight: 700; letter-spacing: var(--dn-tracking-display); } html.ui-2026[dir="rtl"] body:not(#dn26) #topbar #page-title{ letter-spacing: 0; } } /* ------------------------------------------------------------------ P11. The installed app (standalone) ui-2026-phone.js sets html.dn-standalone when the CRM runs from the home screen (display-mode: standalone / navigator.standalone). There is no browser chrome: the status bar overlays the page (the top bar already pads env(safe-area-inset-top)), there is no Safari tab bar under ours, and there is no Back button — every layer's own × and the back-gesture stack are the only ways out, so nothing here may hide them. */ html.ui-2026.dn-standalone body{ overscroll-behavior: none; } @media (max-width: 900px){ /* the tab bar rests on the home indicator alone */ html.ui-2026.dn-standalone body:not(#dn26) #mobile-bottom-nav{ box-shadow: none; } /* the layer close buttons are always reachable: never behind the status bar */ html.ui-2026.dn-standalone body:not(#dn26) :is(.lead-modal .lm-close, .own-panel-close, .ztask-detail-head button.close){ z-index: 5; } /* a full-screen layer draws the surface under the status bar too (the classic canvas showed through) */ html.ui-2026.dn-standalone body:not(#dn26) :is(.lead-modal, .own-panel, #todo-detail-modal .modal){ background: var(--surface); } } /* ------------------------------------------------------------------ P12. Tablet 901–1099: the desktop shell on a touch screen */ @media (min-width: 901px){ /* 44px buttons where a finger lands; the desktop 36px stays for text fields inside dense forms */ html.ui-2026 body:not(#dn26) :is(.btn, button.btn, a.btn):not(.btn-xs):not(.btn-sm){ min-height: 40px; } html.ui-2026 body:not(#dn26) :is(.crm-add-btn, .ztask-primary, .own-btn-add){ min-height: 40px; } /* nothing scrolls sideways at the page level (the wide list tables scroll inside their wrap) */ html.ui-2026 body:not(#dn26) #content > .page{ overflow-x: clip; } html.ui-2026 body:not(#dn26) :is(.crm-ll-wrap, .dt-wrap, .own-list-shell, .prp-table-wrap){ overflow-x: auto; max-width: 100%; } } /* ------------------------------------------------------------------ P13. Reduced motion */ @media (prefers-reduced-motion: reduce){ html.ui-2026 body:not(#dn26) .dn-phone-skel i, html.ui-2026 body:not(#dn26) .page.dn-phone-loading::before{ animation: none; } html.ui-2026 body:not(#dn26) :is(.crm-dl-card, .prp-card, .own-card, .ztask-row, #page-data .dmhh-card):active{ transform: none; } } } /* end @media (max-width: 1099px) */