/* ========================================================================================== Dandelion 360 — the 2026 UI layer (wave 1: the switch + the global building blocks) ------------------------------------------------------------------------------------------ Design system: /opt/dn360-2026-ui (DESIGN.md, css/tokens.css, css/app.css). The contract of this file: * Loaded LAST (after ui.css and gallery-controls-r64.css). EVERY selector starts with `html.ui-2026`, the class the switch in index.html sets before first paint. Without that class nothing here matches, so the classic CRM renders exactly as before. * Colours are the CRM palette tokens that ui.css already defines per theme (--brand, --brand-text, --brand-tint, --on-brand, --bg, --surface, --surface-2, --border, --ink, --ink-3, --ink-4, --danger, --warn and their tints). No new hue, no hex colour below the token block. Dark mode is body.dark, as everywhere in the CRM. * New tokens are namespaced --dn-* (the CRM already uses --r-md, --hover, --focus, --topbar-h… with other meanings). They are declared on BODY, because the palette they mix is declared on body.light / body.dark: a mix declared on would freeze the light values. * Direction comes from : logical properties only, no `direction` declared here. * Specificity. `html.ui-2026 X` is (0,1,1) heavier than the classic `X`. Where page skins style a shared control with an id (`#small-modal.crm-form-gold-v2 .btn-primary`, `#page-x.y .z`), the recipe uses the prefix `html.ui-2026 body:not(#dn26)` — the :not() adds one id's weight (there is no element #dn26) so one recipe outranks those skins. * !important only where ui.css already forces the same property with !important (its enterprise/theme skins do, on inputs, table heads, primary buttons, phone modals); each such block says so. Never to win against a rule of this file. * Later waves (drawers, grids, dashboard, phone polish) append their own sections at the end; keep the section numbers. ========================================================================================== */ /* ------------------------------------------------------------------ 0. Tokens */ html.ui-2026 body{ /* palette aliases (the DS names, pointing at the CRM's own per-theme tokens) */ --dn-canvas: var(--bg); --dn-surface: var(--surface); --dn-surface-muted: var(--surface-2); --dn-line: var(--border); --dn-ink: var(--ink); --dn-text-2: var(--ink-3); --dn-text-3: var(--ink-4); --dn-track: var(--track); /* light mixes (no new hues) */ --dn-line-strong: color-mix(in srgb, var(--ink) 14%, var(--border)); --dn-hover: color-mix(in srgb, var(--ink) 4.5%, transparent); --dn-pressed: color-mix(in srgb, var(--ink) 8%, transparent); --dn-btn-hover: color-mix(in srgb, var(--ink) 4%, var(--surface)); --dn-brand-tint-2: color-mix(in srgb, var(--brand) 18%, var(--surface)); --dn-control-edge: var(--ink-4); --dn-placeholder: var(--ink-3); --dn-scrim: rgba(14, 18, 16, .38); --dn-toast-bg: var(--ink); --dn-toast-text: var(--surface); --dn-skeleton: color-mix(in srgb, var(--ink) 7%, var(--surface)); --dn-skeleton-hi: color-mix(in srgb, var(--ink) 3%, var(--surface)); --dn-ring: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); --dn-shadow-1: 0 1px 2px rgba(22,26,24,.05); --dn-shadow-2: 0 4px 12px -2px rgba(22,26,24,.08), 0 1px 3px rgba(22,26,24,.06); --dn-shadow-3: 0 16px 40px -8px rgba(22,26,24,.18), 0 4px 12px -4px rgba(22,26,24,.08); --dn-shadow-4: 0 28px 64px -12px rgba(22,26,24,.28), 0 2px 8px rgba(22,26,24,.06); /* type (Inter / Plus Jakarta Sans; IRANYekan for fa + ar comes from ui.css's --font-body) */ --dn-fs-12: 12px; --dn-fs-13: 13px; --dn-fs-14: 14px; --dn-fs-15: 15px; --dn-fs-16: 16px; --dn-fs-18: 18px; --dn-fs-20: 20px; --dn-fs-24: 24px; --dn-fs-28: 28px; --dn-fs-32: 32px; --dn-tracking-display: -0.015em; --dn-tracking-caps: .06em; /* space (4px grid) */ --dn-sp-1: 4px; --dn-sp-2: 8px; --dn-sp-3: 12px; --dn-sp-4: 16px; --dn-sp-5: 20px; --dn-sp-6: 24px; --dn-sp-8: 32px; /* radii */ --dn-r-xs: 6px; --dn-r-sm: 8px; --dn-r-md: 10px; --dn-r-lg: 14px; --dn-r-xl: 18px; --dn-r-2xl: 24px; --dn-r-full: 999px; /* motion */ --dn-ease-out: cubic-bezier(.2,.8,.2,1); --dn-ease-in-out: cubic-bezier(.65,0,.35,1); --dn-ease-spring: cubic-bezier(.34,1.3,.64,1); --dn-dur-1: 120ms; --dn-dur-2: 200ms; --dn-dur-3: 300ms; --dn-dur-4: 450ms; /* controls */ --dn-control-h: 36px; --dn-control-h-sm: 30px; --dn-control-h-xs: 26px; --dn-control-h-lg: 44px; --dn-row-h: 52px; /* the CRM's own geometry tokens, re-pointed to the scale */ --radius-card: 18px; --radius-tile: 18px; --radius-lg: 18px; --radius-md: 10px; --radius-sm: 8px; } html.ui-2026 body.dark{ --dn-line-strong: color-mix(in srgb, var(--ink) 16%, var(--border)); --dn-hover: color-mix(in srgb, var(--ink) 5.5%, transparent); --dn-pressed: color-mix(in srgb, var(--ink) 10%, transparent); --dn-btn-hover: color-mix(in srgb, var(--ink) 6%, var(--surface)); --dn-brand-tint-2: color-mix(in srgb, var(--brand) 26%, var(--surface)); --dn-placeholder: var(--ink-4); --dn-scrim: rgba(0, 0, 0, .55); --dn-toast-bg: color-mix(in srgb, var(--ink) 13%, var(--surface)); --dn-toast-text: var(--ink); --dn-skeleton: color-mix(in srgb, var(--ink) 8%, var(--surface)); --dn-skeleton-hi: color-mix(in srgb, var(--ink) 13%, var(--surface)); --dn-shadow-1: 0 1px 2px rgba(0,0,0,.4); --dn-shadow-2: 0 6px 16px -4px rgba(0,0,0,.5); --dn-shadow-3: 0 18px 44px -8px rgba(0,0,0,.6); --dn-shadow-4: 0 30px 70px -12px rgba(0,0,0,.7); } @media (min-width: 901px){ /* ui.css sizes every input and .btn with this token (40px); the desktop control is 36px */ html.ui-2026 body{ --enterprise-control-h: 36px; } } @media (max-width: 900px){ /* touch: every button keeps the 44px the CRM's phone rules already guarantee (a .btn-sm is not smaller on a phone — html.crm-mobile-lock .btn{min-height:44px}) */ html.ui-2026 body{ --dn-control-h: 44px; --dn-control-h-sm: 44px; --dn-control-h-xs: 44px; --dn-row-h: 56px; } } @media (prefers-reduced-motion: reduce){ html.ui-2026 body{ --dn-dur-1: 0ms; --dn-dur-2: 0ms; --dn-dur-3: 0ms; --dn-dur-4: 0ms; } } /* Persian/Arabic: no negative tracking, no caps tracking */ html.ui-2026[dir="rtl"] body{ --dn-tracking-display: 0; --dn-tracking-caps: 0; } /* ------------------------------------------------------------------ 1. Base: type, focus, motion */ html.ui-2026 body{ font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } html.ui-2026[dir="rtl"] body{ font-feature-settings: normal; } /* Two universal rules made every full style recalculation of a long list several times slower (review B-2; Properties with 400 rows, the same session: classic 120 ms, 2026 590 ms): a scrollbar-color on (or inherited by) every element, and a ::selection rule matched by every element. The selection colour is set on body only — Chromium's highlight inheritance carries it to every descendant (other engines keep their default) — and the scrollbar colour only on the two big scrollers; scrollbar-width alone costs nothing. Now about 205 ms. */ html.ui-2026 body::selection{ background: var(--dn-brand-tint-2); } html.ui-2026 body *{ scrollbar-width: thin; } html.ui-2026 :is(#content, #sidebar .sidebar-nav){ scrollbar-color: var(--dn-line-strong) transparent; } html.ui-2026 :is(#content, #sidebar .sidebar-nav) > *{ scrollbar-color: auto; } /* page titles: the display face, ONE scale — 28px/700 on the desktop, 24px on the phone (review A-19: the pages ran 15–34px at 300–800, in Inter or the display face). Every page's own title element is listed. */ html.ui-2026 body:not(#dn26) :is(.page-title, .stab-page-title, .at-page-title, .crm-dl-title h2, .crm-dl-head h2, .own-title, .own-title h1, .prp-title h2, #dash-greeting h1, .at-page-head h2, .notes-header h2, .ztask-hero h1, .zcal-title, .dev-topbar-title, .ul-head-title h2, .txn-title, .an-title, .mch-title, .contracts-header h1, .wc-head-title h2, .ideas-head h1, .tls-title h2, .hlp-hero h1, .agl-title, .ac-header h2, .settings-pro-header h1){ font-family: var(--font-display); font-size: var(--dn-fs-28); font-weight: 700; letter-spacing: var(--dn-tracking-display); line-height: 1.2; color: var(--ink); } /* the Data page writes its title's size inline (font-size:19px;font-weight:800) */ html.ui-2026 body:not(#dn26) #data-content .crm-dl-head h2{ font-size: var(--dn-fs-28) !important; font-weight: 700 !important; } @media (max-width: 900px){ html.ui-2026 body:not(#dn26) #data-content .crm-dl-head h2{ font-size: var(--dn-fs-24) !important; } html.ui-2026 body:not(#dn26) :is(.page-title, .stab-page-title, .at-page-title, .crm-dl-title h2, .crm-dl-head h2, .own-title, .own-title h1, .prp-title h2, #dash-greeting h1, .at-page-head h2, .notes-header h2, .ztask-hero h1, .zcal-title, .dev-topbar-title, .ul-head-title h2, .txn-title, .an-title, .mch-title, .contracts-header h1, .wc-head-title h2, .ideas-head h1, .tls-title h2, .hlp-hero h1, .agl-title, .ac-header h2, .settings-pro-header h1){ font-size: var(--dn-fs-24); } } html.ui-2026 body:not(#dn26) :is(.page-sub, .stab-page-sub){ color: var(--ink-3); font-size: var(--dn-fs-14); } /* section headings inside cards */ html.ui-2026 :is(.dc-panel-head h2, .settings-card-heading, .ac-section-head h3, .card-title){ font-weight: 600; letter-spacing: 0; } /* eyebrows: 12px caps (Persian/Arabic: no caps, no tracking) */ html.ui-2026 :is(.dc-eyebrow, .dc-panel-head small, .at-eyebrow, .page-eyebrow, .crm-dl-eyebrow, .txn-finance-eyebrow){ font-size: var(--dn-fs-12); font-weight: 600; letter-spacing: var(--dn-tracking-caps); color: var(--ink-3); } html.ui-2026[dir="rtl"] :is(.dc-eyebrow, .dc-panel-head small, .at-eyebrow, .page-eyebrow, .crm-dl-eyebrow, .txn-finance-eyebrow){ text-transform: none; font-size: var(--dn-fs-13); } /* numbers line up */ html.ui-2026 :is(table, td, .num, .tabular, .amount, .price, .kpi-value, .stat-value){ font-variant-numeric: tabular-nums; } /* one visible focus ring (ui.css already unifies it as 2px var(--focus); 2026 keeps it and makes text fields show it ON their border instead of 2px outside it) */ html.ui-2026 body:not(#dn26) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):focus-visible{ outline: 2px solid var(--focus); outline-offset: -1px; } /* ------------------------------------------------------------------ 2. Buttons .btn = secondary (surface + hairline) · .btn-primary = the one brand fill · .btn-ghost / .btn-secondary / .btn-outline / .btn-light = secondary in this CRM (they are its "Cancel", "Export", "Filter") · .btn-danger = destructive fill (it only ever sits inside a confirmation) Sizes: default 36 (44 on touch) · .btn-sm 30 · .btn-xs 26 · .btn-icon square. */ html.ui-2026 body:not(#dn26) :is(.btn, button.btn, a.btn){ align-items: center; justify-content: center; gap: 8px; min-height: var(--dn-control-h); padding: 6px 14px; border-radius: var(--dn-r-md); font-family: var(--font-body); font-size: var(--dn-fs-14); font-weight: 500; line-height: 1.2; letter-spacing: 0; text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: background-color var(--dn-dur-1), border-color var(--dn-dur-1), color var(--dn-dur-1), box-shadow var(--dn-dur-1), transform var(--dn-dur-1); } html.ui-2026 body:not(#dn26) :is(.btn, button.btn, a.btn):not(.btn-primary):not(.btn-accent):not(.primary):not(.btn-success):not(.btn-warning):not(.btn-info):not(.btn-gold):not(.btn-quiet):not([class*="danger"]):not([class*="delete"]):not(.dtdel-go):not(.deal-assign-rm):not(.prop-deal-un){ background: var(--surface); border: 1px solid var(--dn-line-strong); color: var(--ink); } html.ui-2026 body:not(#dn26) :is(.btn, button.btn, a.btn):not(.btn-primary):not(.btn-accent):not(.primary):not(.btn-success):not(.btn-warning):not(.btn-info):not(.btn-gold):not(.btn-quiet):not([class*="danger"]):not([class*="delete"]):not(.dtdel-go):not(.deal-assign-rm):not(.prop-deal-un):hover{ background: var(--dn-btn-hover); border-color: var(--dn-line-strong); color: var(--ink); } html.ui-2026 body:not(#dn26) :is(.btn, button.btn, a.btn):active{ transform: translateY(1px); } html.ui-2026 body:not(#dn26) :is(.btn, button.btn, a.btn):is(:disabled, [aria-disabled="true"], .disabled){ opacity: .5; cursor: not-allowed; transform: none; } /* the brand fill: ui.css paints it with !important (--accent-fill / --on-accent); only the shape changes here, plus the hover step */ html.ui-2026 body:not(#dn26) :is(.btn-primary, .btn-accent, .btn.primary){ border: 1px solid var(--brand); box-shadow: none; } html.ui-2026 body:not(#dn26) :is(.btn-primary, .btn-accent, .btn.primary):hover:not(:disabled){ background: var(--brand-hover) !important; border-color: var(--brand-hover) !important; } /* destructive: the solid red only inside a confirmation-like action (the CRM's .btn-danger, the Data page's delete buttons, which painted a non-palette #B42318); "Remove / Delete…" text buttons are the outline recipe. Text on the red fill is --on-danger (dark ink in dark mode: white on #d4695e is 3.2:1 — ui.css forces #fff !important there). */ html.ui-2026 body:not(#dn26) :is(.btn-danger, .dt-danger-btn, .dtdel-go){ background: var(--danger) !important; border: 1px solid var(--danger) !important; color: var(--on-danger) !important; } html.ui-2026 body:not(#dn26) :is(.btn-danger, .dt-danger-btn, .dtdel-go):hover:not(:disabled){ background: color-mix(in srgb, var(--danger) 86%, var(--ink)) !important; } html.ui-2026 body:not(#dn26) :is(.btn, button.btn, a.btn):is(.dt-danger-ghost, .gcal-ghost-danger, .dsw-delete, .dsw-row-delete, .ideas-delete, .deal-assign-rm, .prop-deal-un){ background: var(--surface); border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border)); color: var(--danger); } html.ui-2026 body:not(#dn26) :is(.btn, button.btn, a.btn):is(.dt-danger-ghost, .gcal-ghost-danger, .dsw-delete, .dsw-row-delete, .ideas-delete, .deal-assign-rm, .prop-deal-un):hover:not(:disabled){ background: var(--danger-tint); } html.ui-2026 body:not(#dn26) :is(.btn, button.btn, a.btn).btn-sm{ min-height: var(--dn-control-h-sm); padding: 4px 10px; font-size: var(--dn-fs-13); border-radius: var(--dn-r-sm); gap: 6px; } html.ui-2026 body:not(#dn26) :is(.btn, button.btn, a.btn).btn-xs{ min-height: var(--dn-control-h-xs); padding: 3px 9px; font-size: var(--dn-fs-12); border-radius: var(--dn-r-sm); gap: 5px; } html.ui-2026 body:not(#dn26) :is(.btn, button.btn, a.btn).btn-lg{ min-height: var(--dn-control-h-lg); padding-inline: 18px; font-size: var(--dn-fs-15); } html.ui-2026 body:not(#dn26) :is(.btn, button.btn, a.btn).btn-icon{ min-width: var(--dn-control-h); padding: 0; aspect-ratio: auto; } html.ui-2026 body:not(#dn26) :is(.btn, button.btn, a.btn).btn-icon.btn-sm{ min-width: var(--dn-control-h-sm); } html.ui-2026 body:not(#dn26) :is(.btn, button.btn, a.btn).btn-icon.btn-xs{ min-width: var(--dn-control-h-xs); } html.ui-2026 body:not(#dn26) :is(.btn, button.btn, a.btn) > svg{ flex: none; } /* the page-level create buttons that are not .btn (Leads/Deals/Properties "New …", Tasks, Users, Agent Tracker check-in, Search): the same brand recipe and shape */ html.ui-2026 body:not(#dn26) :is(.crm-add-btn, .ztask-primary, .ac-primary, .own-btn-add, .syncUi-btn.primary, .at-hero-checkin, .zcal-action.zcal-primary){ border-radius: var(--dn-r-md); font-weight: 500; letter-spacing: 0; box-shadow: none; transition: background-color var(--dn-dur-1), border-color var(--dn-dur-1), transform var(--dn-dur-1); } html.ui-2026 body:not(#dn26) :is(.crm-add-btn, .ztask-primary, .ac-primary, .own-btn-add, .syncUi-btn.primary, .at-hero-checkin, .zcal-action.zcal-primary):active{ transform: translateY(1px); } html.ui-2026 body:not(#dn26) :is(.crm-quick-add-btn, .zcal-action:not(.zcal-primary), .at-quick-btn, .at-hero-checkout, .syncUi-btn:not(.primary), .crm-reset-btn){ border-radius: var(--dn-r-md); } /* close buttons of dialogs and panels: a 36px icon button */ html.ui-2026 body:not(#dn26) .modal-close{ align-items: center; justify-content: center; width: var(--dn-control-h); height: var(--dn-control-h); padding: 0; border: 0; border-radius: var(--dn-r-md); background: transparent; color: var(--ink-3); transition: background-color var(--dn-dur-1), color var(--dn-dur-1); } html.ui-2026 body:not(#dn26) .modal-close:hover{ background: var(--dn-hover); color: var(--ink); } /* ------------------------------------------------------------------ 3. Form controls */ /* text fields, selects, text areas — one shape (10px, 36px desktop / 44px touch) */ html.ui-2026 body:not(#dn26) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea, .form-control, .syncUi-control){ border-radius: var(--dn-r-md); font-family: var(--font-body); transition: border-color var(--dn-dur-1), box-shadow var(--dn-dur-1), background-color var(--dn-dur-1); } /* ui.css draws every field's border with !important (#E5E5E7 in light, a 12% white in dark — neither is on the palette); 2026 uses the palette's control edge */ html.ui-2026 body:is(.light, .dark) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea){ border-color: var(--dn-line-strong) !important; } html.ui-2026 body:is(.light, .dark) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea):hover:not(:focus):not(:disabled){ border-color: color-mix(in srgb, var(--ink) 28%, var(--border)) !important; } html.ui-2026 body:is(.light, .dark) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea):focus{ border-color: var(--brand) !important; } html.ui-2026 body:is(.light, .dark) :is(input, select, textarea):is([aria-invalid="true"], .is-invalid){ border-color: var(--danger) !important; } html.ui-2026 body:is(.light, .dark) :is(input, select, textarea):disabled{ background-color: var(--surface-2) !important; color: var(--ink-3) !important; } html.ui-2026 :is(input, textarea)::placeholder{ color: var(--dn-placeholder); opacity: 1; } html.ui-2026 textarea{ line-height: 1.5; } /* selects: one chevron, mirrored in RTL (ui.css's `background: … !important` shorthand resets the image, repeat, position and size, so each of them needs the same weight here). The :not(#dn26) prefix: the id-scoped filter skins (Properties `#page-properties.prp-gold-v2 .prp-filters .prp-select{padding:0 16px}`, Search `#page-search .pf-input`, Data, New Client) set the padding the chevron needs, and it ran under the text (review A-15). */ html.ui-2026 body:not(#dn26) select:not([multiple]):not([size]){ -webkit-appearance: none; appearance: none; padding-inline-end: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23889088' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-size: 16px 16px !important; background-position: right 10px center !important; cursor: pointer; } html.ui-2026[dir="rtl"] body:not(#dn26) select:not([multiple]):not([size]){ background-position: left 10px center !important; } /* labels */ html.ui-2026 body:not(#dn26) :is(.form-label, .settings-field > label, .wc-label, .dt-field > label){ font-size: var(--dn-fs-13); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink); } html.ui-2026 :is(.form-help, .field-hint){ font-size: var(--dn-fs-12); color: var(--ink-3); } /* checkboxes and radios: 18px, brand when on. The mark is a background image, never a pseudo-element, and nothing here sets `display` or `margin`: a checkbox a component hides (display:none / opacity:0 under a custom switch) stays hidden, and label spacing is unchanged. */ html.ui-2026 body input:is([type="checkbox"], [type="radio"]):not([role="switch"]){ -webkit-appearance: none; appearance: none; flex: none; box-sizing: border-box; width: 18px; height: 18px; padding: 0; border: 1.5px solid var(--dn-control-edge); border-radius: 5px; background-color: var(--surface); background-repeat: no-repeat; background-position: center; background-size: 12px 12px; cursor: pointer; transition: background-color var(--dn-dur-1), border-color var(--dn-dur-1); } html.ui-2026 body input[type="radio"]:not([role="switch"]){ border-radius: 50%; } /* the list tables pinned their row checkboxes at 14px with an id-scoped rule */ html.ui-2026 body:not(#dn26) :is(.crm-ll-table, .prp-table, .own-table, .srch-list) input[type="checkbox"]{ width: 18px; height: 18px; } html.ui-2026 body input:is([type="checkbox"], [type="radio"]):not([role="switch"]):is(:checked, :indeterminate){ background-color: var(--brand); border-color: var(--brand); } html.ui-2026 body input[type="checkbox"]:not([role="switch"]):checked{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); } html.ui-2026 body input[type="checkbox"]:not([role="switch"]):indeterminate{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); } /* dark: the mark is the dark on-brand ink (#04120b), like every text on the dark brand fill */ html.ui-2026 body.dark input[type="checkbox"]:not([role="switch"]):checked{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304120b' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); } html.ui-2026 body.dark input[type="checkbox"]:not([role="switch"]):indeterminate{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304120b' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); } html.ui-2026 body input[type="radio"]:not([role="switch"]):checked{ background-image: radial-gradient(circle, var(--on-brand) 0 3.5px, transparent 4px); background-size: 100% 100%; } html.ui-2026 body input:is([type="checkbox"], [type="radio"]):disabled{ opacity: .5; cursor: not-allowed; } html.ui-2026 body input:is([type="checkbox"], [type="radio"]):focus-visible{ outline: 2px solid var(--focus); outline-offset: 2px; } /* switches built on a checkbox (role=switch) and the CRM's own track/thumb switch */ html.ui-2026 body input[type="checkbox"][role="switch"]{ -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 38px; height: 22px; border: 0; border-radius: var(--dn-r-full); background: var(--dn-control-edge); cursor: pointer; transition: background-color var(--dn-dur-2); } html.ui-2026 body input[type="checkbox"][role="switch"]::before{ content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform var(--dn-dur-2) var(--dn-ease-spring); } html.ui-2026 body input[type="checkbox"][role="switch"]:checked{ background: var(--brand); } html.ui-2026 body input[type="checkbox"][role="switch"]:checked::before{ transform: translateX(16px); background: var(--on-brand); } html.ui-2026[dir="rtl"] body input[type="checkbox"][role="switch"]:checked::before{ transform: translateX(-16px); } /* the CRM's button switches (Settings › Connections .conn-toggle, Control Center .cc-toggle): the off track was a 12% white — invisible on a light card — and "on" a pale tint */ html.ui-2026 body:not(#dn26) :is(.conn-toggle, .cc-toggle){ width: 38px; height: 22px; padding: 0; border: 0; border-radius: var(--dn-r-full); background: var(--dn-control-edge); transition: background-color var(--dn-dur-2); } html.ui-2026 body:not(#dn26) :is(.conn-toggle, .cc-toggle).on{ background: var(--brand); } html.ui-2026 body:not(#dn26) :is(.conn-toggle, .cc-toggle)::after{ top: 3px; left: auto; right: auto; inset-inline-start: 3px; width: 16px; height: 16px; background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.2); transform: none; transition: transform var(--dn-dur-2) var(--dn-ease-spring); } html.ui-2026 body:not(#dn26) :is(.conn-toggle, .cc-toggle).on::after{ transform: translateX(16px); background: var(--on-brand); } html.ui-2026[dir="rtl"] body:not(#dn26) :is(.conn-toggle, .cc-toggle).on::after{ transform: translateX(-16px); } /* the WhatsApp row has no switch: its spacer keeps the icon in line with the switches above it (review B-6) */ html.ui-2026 .wa-conn-row .wa-conn-spacer{ width: 38px; } html.ui-2026 .prp-switch-track{ background: var(--dn-control-edge); border-radius: var(--dn-r-full); transition: background-color var(--dn-dur-2); } html.ui-2026 .prp-switch input:checked + .prp-switch-track{ background: var(--brand); } /* ------------------------------------------------------------------ 4. Cards and stat tiles A card is a white surface, 18px corners, one hairline, a 1px resting shadow (dark: the line). */ html.ui-2026 :is(.card, .dc-panel, .notes-card, .own-card, .settings-card, .settings-panel, .settings-pro-panel, .at-card, .at-panel-card, .an-card, .txn-card, .dev-card, .ztask-card, .wc-card, .wc-panel, .dc-assistant-card, .ul-card, .tls-card, .idea-card){ border-radius: var(--dn-r-xl); box-shadow: var(--dn-shadow-1); } html.ui-2026 body.dark :is(.card, .dc-panel, .notes-card, .own-card, .settings-card, .settings-panel, .settings-pro-panel, .at-card, .at-panel-card, .an-card, .txn-card, .dev-card, .ztask-card, .wc-card, .wc-panel, .dc-assistant-card, .ul-card, .tls-card, .idea-card){ box-shadow: none; } html.ui-2026 :is(a.card, .card.is-link, .dev-card, .notes-card, .tls-card, .ul-card):hover{ box-shadow: var(--dn-shadow-2); } html.ui-2026 body.dark :is(a.card, .card.is-link, .dev-card, .notes-card, .tls-card, .ul-card):hover{ box-shadow: none; border-color: var(--dn-line-strong); } /* stat / KPI tiles: label 13 · value 32 (24 on phones) · one hairline, 18px corners */ html.ui-2026 :is(.dc-metric-card, .at-stat-card, .at-mgc, .stat-card, .txn-stat-card, .an-kpi, .lm-stat, .wc-stat){ border-radius: var(--dn-r-xl); box-shadow: var(--dn-shadow-1); transition: box-shadow var(--dn-dur-2), border-color var(--dn-dur-2); } html.ui-2026 body.dark :is(.dc-metric-card, .at-stat-card, .at-mgc, .stat-card, .txn-stat-card, .an-kpi, .lm-stat, .wc-stat){ box-shadow: none; } html.ui-2026 :is(.dc-metric-card, .at-stat-card, .stat-card, .txn-stat-card):hover{ box-shadow: var(--dn-shadow-2); } html.ui-2026 body.dark :is(.dc-metric-card, .at-stat-card, .stat-card, .txn-stat-card):hover{ box-shadow: none; } html.ui-2026 body:not(#dn26) .dc-metric-copy small{ font-size: var(--dn-fs-13); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-3); } html.ui-2026 body:not(#dn26) :is(.dc-metric-copy strong, .kpi-value, .stat-value, .an-kpi-value, .at-mgc-val, .txn-stat-value){ font-family: var(--font-body); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } html.ui-2026[dir="rtl"] body:not(#dn26) :is(.dc-metric-copy strong, .kpi-value, .stat-value, .an-kpi-value, .at-mgc-val, .txn-stat-value){ letter-spacing: 0; } html.ui-2026 body:not(#dn26) .dc-metric-copy strong{ font-size: var(--dn-fs-32); line-height: 1.05; } html.ui-2026 body:not(#dn26) .dc-metric-copy em{ font-size: var(--dn-fs-13); font-style: normal; color: var(--ink-3); } html.ui-2026 body:not(#dn26) .dc-metric-icon{ border-radius: var(--dn-r-md); } /* ------------------------------------------------------------------ 5. Tables Sticky head, hairline rows (no zebra, no vertical rules), a quiet hover, comfortable 52px rows, 12px head labels, numbers end-aligned in tabular figures. */ html.ui-2026 body :is(table thead th, table > tr > th){ position: sticky; top: 0; z-index: 2; background: var(--surface-2); font-size: var(--dn-fs-12); font-weight: 600; letter-spacing: .01em; text-transform: none; vertical-align: middle; } /* ui.css forces the head colour/border and the body borders with !important (a cool grey #666670) */ html.ui-2026 body:is(.light, .dark) th{ color: var(--ink-3) !important; border-color: var(--border) !important; } html.ui-2026 body:is(.light, .dark) table thead tr{ background: var(--surface-2) !important; } html.ui-2026 body td{ vertical-align: middle; } html.ui-2026 body tbody td{ transition: background-color var(--dn-dur-1); } html.ui-2026 body:is(.light, .dark) tbody tr:hover > td{ background: var(--surface-2) !important; } html.ui-2026 body:is(.light, .dark) tbody tr:is(.is-sel, .selected, .is-selected, [aria-selected="true"]) > td{ background: var(--brand-tint) !important; } /* the last row leans on its card's edge (ui.css paints every td border with !important) */ html.ui-2026 body:is(.light, .dark) tbody tr:last-child > td{ border-bottom-color: transparent !important; } /* comfortable rows on the shared list tables (they carry their own column recipes). Desktop only: on a phone several of these tables turn their rows into cards and their cells into blocks. */ @media (min-width: 901px){ html.ui-2026 body:not(#dn26) :is(.crm-ll-table, .prp-table, .own-table, .srch-list, .ac-table, .ul-table, .at-agents-table, .txn-table, .usr-table) > tbody > tr > td{ height: var(--dn-row-h); padding-block: 8px; } html.ui-2026 body:not(#dn26) :is(.crm-ll-table, .prp-table, .own-table, .srch-list, .ac-table, .ul-table, .at-agents-table, .txn-table, .usr-table) > thead > tr > th{ height: 40px; padding-block: 0; white-space: nowrap; } } /* numbers */ html.ui-2026 body :is(td, th):is(.num, .tabular, .amount, .price, [data-num]){ text-align: end; font-variant-numeric: tabular-nums; } /* zebra-free */ html.ui-2026 :is(.txn-detail-row, .wc-event):nth-child(odd){ background: transparent; } /* the rounded shells tables sit in */ html.ui-2026 :is(.crm-ll-wrap, .srch-list-wrap, .own-list-shell, .ul-table-wrap, .at-agents-table-wrap, .ac-table-wrap, .usr-table-wrap){ border-radius: var(--dn-r-xl); box-shadow: var(--dn-shadow-1); } html.ui-2026 body.dark :is(.crm-ll-wrap, .srch-list-wrap, .own-list-shell, .ul-table-wrap, .at-agents-table-wrap, .ac-table-wrap, .usr-table-wrap){ box-shadow: none; } /* ------------------------------------------------------------------ 6. Tabs and segmented controls */ /* underline tabs: ink when selected, a 2px brand bar under it */ html.ui-2026 body:not(#dn26) :is(.crm-dl-tab, .settings-pro-tabs button, .at-tab, .notes-tabs button, .hh-tabs button, .prp-record-tab, .an-tab, .txn-tab, .lm-tab){ min-height: 40px; padding: 8px 12px; border: 0; border-bottom: 2px solid transparent; border-radius: var(--dn-r-sm) var(--dn-r-sm) 0 0; background: transparent; color: var(--ink-3); font-size: var(--dn-fs-14); font-weight: 500; box-shadow: none; transition: color var(--dn-dur-1), background-color var(--dn-dur-1), border-color var(--dn-dur-1); } html.ui-2026 body:not(#dn26) :is(.crm-dl-tab, .settings-pro-tabs button, .at-tab, .notes-tabs button, .hh-tabs button, .prp-record-tab, .an-tab, .txn-tab, .lm-tab):hover{ background: var(--dn-hover); color: var(--ink); } html.ui-2026 body:not(#dn26) :is(.crm-dl-tab, .settings-pro-tabs button, .at-tab, .notes-tabs button, .hh-tabs button, .prp-record-tab, .an-tab, .txn-tab, .lm-tab):is(.active, [aria-selected="true"], .on){ background: transparent; color: var(--ink); font-weight: 600; border-bottom-color: var(--brand); } @media (max-width: 900px){ /* touch: the tab keeps the 44px the classic phone rules give it (review C-5) */ html.ui-2026 body:not(#dn26) :is(.crm-dl-tab, .settings-pro-tabs button, .at-tab, .notes-tabs button, .hh-tabs button, .prp-record-tab, .an-tab, .txn-tab, .lm-tab){ min-height: 44px; } } /* segmented: a pill track, the pressed option lifts onto the surface */ 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){ gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: var(--dn-r-full); background: var(--surface-2); box-shadow: none; } 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: calc(var(--dn-control-h) - 8px); padding: 4px 12px; border: 0; border-radius: var(--dn-r-full); background: transparent; color: var(--ink-3); font-size: var(--dn-fs-13); font-weight: 500; box-shadow: none; transition: background-color var(--dn-dur-1), color var(--dn-dur-1), box-shadow var(--dn-dur-1); } 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):hover{ color: var(--ink); } 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):is(.active, .on, .is-on, [aria-pressed="true"], [aria-selected="true"]){ background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--dn-shadow-1), 0 0 0 1px var(--border); } /* the dashboard scope switch (review A-11): its track is .dsw-seg (the outer .dsw is only the positioning box, and painting it too drew a pill inside a pill); Personal / Organization and the workspace caret take the segment recipe, their classic brand text and #cfe0d6 ring go, and the ▾ glyph becomes the chevron icon */ html.ui-2026 body:not(#dn26) .dsw-seg > :is(.dsw-btn, .dsw-caret){ border: 0; font-size: var(--dn-fs-13); font-weight: 500; } html.ui-2026 body:not(#dn26) .dsw-seg > :is(.dsw-btn, .dsw-caret).is-on{ border: 0; background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--dn-shadow-1), 0 0 0 1px var(--border); } html.ui-2026 body:not(#dn26) .dsw-caret-ic{ display: inline-block; width: 16px; height: 16px; font-size: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 16px 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 16px 16px no-repeat; transition: transform var(--dn-dur-2) var(--dn-ease-out); } html.ui-2026 body:not(#dn26) .dsw-caret[aria-expanded="true"] .dsw-caret-ic{ transform: rotate(180deg); } html.ui-2026 body:not(#dn26) .dsw-divider{ background: var(--border); } /* ------------------------------------------------------------------ 7. Chips, badges, pills */ /* (the bell's count is an icon badge, not a pill: §18c) */ html.ui-2026 body:not(#dn26) :is(.badge:not([id="alert-badge"]), .pill, .crm-ll-pill, .own-pill, .own-sync, .ent-badge, .at-status-pill, .ztask-status, .ztask-sync, .notes-linked-badge, .conn-badge, .crm-dl-resp, .crm-lc-resp, .lm-resp, .dc-event-type, .tls-badge, .wc-chip, .role-chip, .prp-status, .prp-card-stat, .crm-dl-stage){ align-items: center; min-height: 24px; padding: 2px 10px; border-radius: var(--dn-r-full); font-size: var(--dn-fs-12); font-weight: 500; line-height: 1.2; letter-spacing: 0; white-space: nowrap; } /* choice chips in the record window (the six stage buttons): a hairline, not an ink outline */ html.ui-2026 body:not(#dn26) .lm-trans{ border: 1px solid var(--dn-line-strong); border-radius: var(--dn-r-md); background: var(--surface); color: var(--ink); font-weight: 500; transition: background-color var(--dn-dur-1), border-color var(--dn-dur-1), color var(--dn-dur-1); } html.ui-2026 body:not(#dn26) .lm-trans:hover:not(:disabled){ background: var(--dn-btn-hover); } html.ui-2026 body:not(#dn26) .lm-trans.is-gold{ background: var(--brand-tint); border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); color: var(--brand-text); font-weight: 600; opacity: 1; } /* filter chips: 32px, a hairline, brand tint when applied */ html.ui-2026 body:not(#dn26) :is(.chip, .crm-filter-chip, .zcal-chip, .dc-scope-chip, .tgl-chip, .srch-src-btn){ min-height: 32px; padding: 4px 12px; border-radius: var(--dn-r-full); font-size: var(--dn-fs-13); font-weight: 500; transition: background-color var(--dn-dur-1), border-color var(--dn-dur-1), color var(--dn-dur-1); } html.ui-2026 body:not(#dn26) :is(.chip, .crm-filter-chip, .zcal-chip, .dc-scope-chip, .tgl-chip, .srch-src-btn):is(.active, .on, [aria-pressed="true"]){ background: var(--brand-tint); border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); color: var(--brand-text); } @media (max-width: 900px){ /* a touch target stays 44px, as the classic phone rules guarantee (review C-5) */ html.ui-2026 body:not(#dn26) :is(.chip, .crm-filter-chip, .zcal-chip, .dc-scope-chip, .tgl-chip, .srch-src-btn){ min-height: 44px; } } /* ------------------------------------------------------------------ 8. Dialogs and bottom sheets */ html.ui-2026 .modal-overlay{ background: var(--dn-scrim); -webkit-backdrop-filter: none; backdrop-filter: none; } html.ui-2026 body:not(#dn26) .modal{ border: 1px solid var(--border); border-radius: var(--dn-r-xl) !important; /* ui.css: .modal,.modal-content…{border-radius:14px !important} */ background: var(--surface); box-shadow: var(--dn-shadow-4); } html.ui-2026 body.dark:not(#dn26) .modal{ box-shadow: var(--dn-shadow-4), 0 0 0 1px var(--border); } html.ui-2026 body:not(#dn26) .modal-header{ gap: var(--dn-sp-3); padding: 16px 16px 14px 20px; padding-inline: 20px 14px; border-bottom: 1px solid var(--border); } html.ui-2026 body:not(#dn26) :is(.modal-title, .modal-header h2, .modal-header h3, #small-modal-title){ font-family: var(--font-body); font-size: var(--dn-fs-18); font-weight: 600; line-height: 1.35; letter-spacing: 0; color: var(--ink); } html.ui-2026 body:not(#dn26) .modal-footer{ gap: var(--dn-sp-2); padding: 12px 20px; border-top: 1px solid var(--border); background: var(--surface); } html.ui-2026 .modal-overlay:not(.hidden) .modal{ animation: dn26-dialog-in var(--dn-dur-3) var(--dn-ease-out); } @keyframes dn26-dialog-in{ from{ opacity: 0; transform: translateY(8px) scale(.985); } to{ opacity: 1; transform: none; } } @media (max-width: 900px){ /* the phone dialog is already a bottom sheet (ui.css, html.crm-mobile-lock, !important): 2026 gives it the sheet corners. No grabber: these sheets close by ×, Back or the scrim, never by a drag, and a handle would promise one. The full-screen forms keep their square corners (their own id-scoped rule outranks this one on purpose). */ html.ui-2026.crm-mobile-lock body:not(#dn26) .modal-overlay .modal{ border-radius: var(--dn-r-xl) var(--dn-r-xl) 0 0 !important; border-bottom: 0; } html.ui-2026 .modal-overlay:not(.hidden) .modal{ animation-name: dn26-sheet-in; } } @keyframes dn26-sheet-in{ from{ transform: translateY(24px); opacity: .6; } to{ transform: none; opacity: 1; } } /* ------------------------------------------------------------------ 9. Toasts One inverse surface for every kind; the icon carries the tone (and the word does the rest). */ html.ui-2026 .toast-container{ gap: 8px; } html.ui-2026 body .toast{ min-height: 44px; max-width: min(520px, calc(100vw - 24px)); padding: 8px 14px; gap: 10px; border-radius: var(--dn-r-lg); background: var(--dn-toast-bg); color: var(--dn-toast-text); box-shadow: var(--dn-shadow-4); font-size: var(--dn-fs-14); font-weight: 500; line-height: 1.4; animation: dn26-toast-in var(--dn-dur-3) var(--dn-ease-spring); } html.ui-2026 body .toast > span:first-child{ color: color-mix(in srgb, var(--brand) 45%, var(--dn-toast-text)); } html.ui-2026 body .toast.error > span:first-child{ color: color-mix(in srgb, var(--danger) 55%, var(--dn-toast-text)); } html.ui-2026 body .toast.warning > span:first-child{ color: color-mix(in srgb, var(--warn) 55%, var(--dn-toast-text)); } html.ui-2026 body.dark .toast > span:first-child{ color: var(--brand-text); } html.ui-2026 body.dark .toast.error > span:first-child{ color: var(--danger); } html.ui-2026 body.dark .toast.warning > span:first-child{ color: var(--warn); } @media (max-width: 900px){ /* ui.css's phone toast is a 20px pill at 12.5px (!important) */ html.ui-2026 body .toast{ border-radius: var(--dn-r-lg) !important; font-size: var(--dn-fs-14) !important; line-height: 1.4 !important; padding: 10px 14px !important; } } html.ui-2026 body .toast .toast-action{ min-height: 32px; padding: 4px 10px; border: 0; border-radius: var(--dn-r-sm); background: color-mix(in srgb, var(--dn-toast-text) 12%, transparent); color: var(--dn-toast-text); font-size: var(--dn-fs-13); font-weight: 600; } html.ui-2026 body .toast .toast-action:hover{ background: color-mix(in srgb, var(--dn-toast-text) 20%, transparent); } html.ui-2026 body .toast .toast-close{ display: inline-grid; place-items: center; width: 32px; height: 32px; margin-inline: 4px -6px; border-radius: var(--dn-r-sm); color: var(--dn-toast-text); opacity: .8; } html.ui-2026 body .toast .toast-close:hover{ opacity: 1; background: color-mix(in srgb, var(--dn-toast-text) 12%, transparent); } @keyframes dn26-toast-in{ from{ opacity: 0; transform: translateY(12px) scale(.98); } to{ opacity: 1; transform: none; } } /* ------------------------------------------------------------------ 10. Tooltips (ui-2026.js draws .dn-tip for icon-only controls) */ html.ui-2026 .dn-tip{ position: fixed; z-index: 2147483600; top: 0; left: 0; max-width: 280px; padding: 6px 9px; border-radius: var(--dn-r-sm); background: var(--dn-toast-bg); color: var(--dn-toast-text); font: 500 var(--dn-fs-12)/1.35 var(--font-body); pointer-events: none; opacity: 0; transform: translateY(2px); transition: opacity var(--dn-dur-1), transform var(--dn-dur-1); box-shadow: var(--dn-shadow-2); } html.ui-2026 .dn-tip.is-open{ opacity: 1; transform: none; } /* ------------------------------------------------------------------ 11. Dropdown menus and popovers */ html.ui-2026 body:not(#dn26) :is(.qc-menu, .tb-lang-menu, .lang-switch-menu, #alert-bell-panel, .dc-admin-user-options, .lm-more-menu, .dsw-menu, .mention-dropdown, .notes-mention-menu, .ztask-at-menu, .dev-combo-list, .pfc-menu, .at-contact-options, .pdl-popover){ border: 1px solid var(--border); border-radius: var(--dn-r-lg); background: var(--surface); box-shadow: var(--dn-shadow-3); } html.ui-2026 body:not(#dn26) :is(.qc-menu, .tb-lang-menu, .lang-switch-menu, .lm-more-menu, .dsw-menu, .mention-dropdown, .notes-mention-menu, .ztask-at-menu, .dev-combo-list, .pfc-menu, .at-contact-options){ padding: 6px; } html.ui-2026 body:not(#dn26) :is(.qc-item, .abell-row, .dev-combo-opt, .dc-admin-option, .lm-more-menu > button, .tb-lang-menu > button, .lang-switch-menu > button, .dsw-menu > button){ border-radius: var(--dn-r-sm); transition: background-color var(--dn-dur-1), color var(--dn-dur-1); } html.ui-2026 body:not(#dn26) :is(.qc-item, .abell-row, .dev-combo-opt, .dc-admin-option, .lm-more-menu > button, .tb-lang-menu > button, .lang-switch-menu > button, .dsw-menu > button):hover{ background: var(--dn-hover); } /* ------------------------------------------------------------------ 12. Skeletons .dn-skel is the utility (a shimmering block; give it a width/height). ui-2026.js marks a plain "Loading…" placeholder with .dn-loading: its text stays for screen readers and is drawn as three skeleton lines instead. */ html.ui-2026 .dn-skel{ display: block; min-height: 12px; border-radius: var(--dn-r-sm); background: linear-gradient(90deg, var(--dn-skeleton) 0%, var(--dn-skeleton-hi) 40%, var(--dn-skeleton) 80%); background-size: 300% 100%; animation: dn26-shimmer 1.4s linear infinite; } html.ui-2026 .dn-skel.is-line{ height: 12px; margin-block: 8px; } html.ui-2026 .dn-skel.is-title{ height: 18px; width: 40%; } html.ui-2026 .dn-skel.is-circle{ border-radius: 50%; } html.ui-2026 .dn-loading{ position: relative; min-height: 72px; color: transparent !important; text-align: start !important; -webkit-user-select: none; user-select: none; } html.ui-2026 .dn-loading::before{ content: ""; position: absolute; inset: 14px 16px auto; height: 50px; max-width: 520px; background: linear-gradient(var(--dn-skeleton), var(--dn-skeleton)) 0 0 / 55% 12px no-repeat, linear-gradient(var(--dn-skeleton), var(--dn-skeleton)) 0 19px / 85% 12px no-repeat, linear-gradient(var(--dn-skeleton), var(--dn-skeleton)) 0 38px / 38% 12px no-repeat; border-radius: 6px; animation: dn26-pulse 1.4s ease-in-out infinite; } html.ui-2026[dir="rtl"] .dn-loading::before{ background-position: 100% 0, 100% 19px, 100% 38px; } html.ui-2026 :is(td, li, span).dn-loading{ min-height: 0; } html.ui-2026 :is(span, td).dn-loading::before{ inset: 50% 0 auto; height: 12px; transform: translateY(-50%); background: linear-gradient(var(--dn-skeleton), var(--dn-skeleton)) 0 0 / 60% 12px no-repeat; } html.ui-2026[dir="rtl"] :is(span, td).dn-loading::before{ background-position: 100% 0; } @keyframes dn26-shimmer{ from{ background-position: 100% 0; } to{ background-position: -100% 0; } } @keyframes dn26-pulse{ 0%, 100%{ opacity: 1; } 50%{ opacity: .55; } } /* ------------------------------------------------------------------ 13. Empty states The faded DN watermark gives way to an actionable block: an icon tile, the existing sentence, and the page's own next step (ui-2026.js adds the tile and the buttons; .dn-empty marks it). */ html.ui-2026 body:not(#dn26) .dn-empty img.glux-brand-logo{ display: none; } /* the decorative DN watermarks go too: the one painted behind six list pages and the logo that sat under the Help hero's title (the DN gold appears only as the mark in the sidebar) */ html.ui-2026 :is(#page-customers, #page-deals, #page-properties, #page-search, #page-todos, #page-calendar)::before{ content: none; } html.ui-2026 body:not(#dn26) img.hlp-hero-dandelion{ display: none; } html.ui-2026 .dn-empty{ text-align: center; } html.ui-2026 .dn-empty-ico{ display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 12px; border-radius: var(--dn-r-xl); background: var(--brand-tint); color: var(--brand-text); } html.ui-2026 .dn-empty-ico svg{ width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } /* the CRM's shared .empty-state block (Settings, Users & Access, Org chart…) in the same recipe */ html.ui-2026 body .empty-state{ padding: 48px 24px; color: var(--ink-3); } html.ui-2026 body .empty-state > svg{ box-sizing: border-box; width: 56px; height: 56px; padding: 15px; margin: 0 auto 12px; border-radius: var(--dn-r-xl); background: var(--brand-tint); color: var(--brand-text); opacity: 1; } html.ui-2026 body .empty-state h3{ font-size: var(--dn-fs-16); font-weight: 600; color: var(--ink); margin-bottom: 4px; } html.ui-2026 body .empty-state p{ font-size: var(--dn-fs-14); color: var(--ink-3); max-width: 44ch; margin-inline: auto; } html.ui-2026 .dn-empty-cta{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; } /* ------------------------------------------------------------------ 14. Reduced motion */ @media (prefers-reduced-motion: reduce){ html.ui-2026 body *, html.ui-2026 body *::before, html.ui-2026 body *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } html.ui-2026 .dn-skel{ animation: none; background: var(--dn-skeleton); } html.ui-2026 .dn-loading::before{ animation: none; } } /* ========================================================================================== 15. The shell (wave 1, part 2): sidebar sections, icon rail, top bar, command palette, phone tab bar / FAB / drawer / More sheet. ------------------------------------------------------------------------------------------ ui-2026-shell.js MOVES the CRM's own .nav-item nodes into .dn-nav sections (#sidebar gets .dn-shell), adds the rail toggle (#dn-rail-btn, html[data-dn-nav="rail"]), the breadcrumb (#dn-crumbs), the search affordances (#dn-nav-search, #dn-topbar-search) and the palette (#dn-palette). Every rule here is scoped to html.ui-2026, and every class it styles only exists when that script ran. Inline display:none written by applySidebarPermissions() must keep winning, so no rule below sets `display` on a .nav-item with !important. ========================================================================================== */ html.ui-2026 body{ --dn-nav-w: 252px; /* the design system's --nav-w / --nav-w-rail / --topbar-h (review A-8) */ --dn-nav-w-rail: 68px; --dn-topbar-h: 60px; --dn-tabbar-h: 64px; --dn-topbar-bg: color-mix(in srgb, var(--bg) 82%, transparent); } html.ui-2026 body.dark{ --dn-topbar-bg: color-mix(in srgb, var(--bg) 80%, transparent); } @media (min-width: 901px){ html.ui-2026 body{ --sidebar-w: var(--dn-nav-w); } html.ui-2026[data-dn-nav="rail"] body{ --sidebar-w: var(--dn-nav-w-rail); } } html.ui-2026 .dn-kbd{ display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding-inline: 5px; border: 1px solid var(--dn-line-strong); /* the design system's .kbd: 12px/500, a --line-strong edge (review A-12) */ border-bottom-width: 2px; border-radius: 6px; background: var(--surface); color: var(--ink-3); font: 500 var(--dn-fs-12)/1 var(--font-body); white-space: nowrap; unicode-bidi: plaintext; /* "Ctrl K" / "⌘K" keep their order in RTL (the direction comes from the text) */ } html.ui-2026 .dn-ic{ width: 18px; height: 18px; flex: none; } /* ---- 15a. Sidebar ---- */ html.ui-2026 body:not(#dn26) #sidebar.dn-shell{ background: var(--surface); color: var(--ink); border-inline-end: 1px solid var(--border); box-shadow: none; transition: width var(--dn-dur-3) var(--dn-ease-out), transform var(--dn-dur-3) var(--dn-ease-out); } html.ui-2026 body:not(#dn26) #main{ transition: margin var(--dn-dur-3) var(--dn-ease-out); } html.ui-2026 body:not(#dn26) #sidebar.dn-shell .sidebar-logo{ display: flex; align-items: center; gap: 8px; min-height: var(--dn-topbar-h); height: var(--dn-topbar-h); padding: 0 8px 0 14px; padding-inline: 14px 8px; border-bottom: 0; flex: none; } html.ui-2026 body:not(#dn26) #sidebar.dn-shell .sidebar-logo-img{ width: 34px; height: 34px; border-radius: 10px; flex: none; } html.ui-2026 body:not(#dn26) #sidebar.dn-shell .sidebar-logo-text{ min-width: 0; flex: 1 1 auto; } html.ui-2026 body:not(#dn26) #sidebar.dn-shell .sidebar-logo .sidebar-logo-sub{ color: var(--ink-3) !important; font-size: var(--dn-fs-12); font-weight: 400; letter-spacing: 0; } /* ui.css: .sidebar-logo span{color:var(--text)!important} (review A-9) */ /* the design system's .brand-name: the display face 700 15px, sentence case (ui-2026-shell.js writes "Dandelion 360"), not a fourth font (Marcellus caps with 1.2px tracking) */ html.ui-2026 body:not(#dn26) #sidebar.dn-shell .sidebar-logo .sidebar-logo-brand{ font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; /* a Latin name: Latin digits in FA / AR too (the RTL --font-display is IRANYekan) */ font-size: var(--dn-fs-15); font-weight: 700; letter-spacing: var(--dn-tracking-display); text-transform: none; color: var(--ink); } html.ui-2026 body:not(#dn26) #sidebar.dn-shell :is(.dn-rail-btn, #sidebar-logout-btn){ display: inline-grid; place-items: center; width: 32px; height: 32px; min-width: 32px; min-height: 32px; flex: none; padding: 0; border: 0; border-radius: var(--dn-r-sm); background: transparent; color: var(--ink-3); cursor: pointer; transition: background-color var(--dn-dur-1), color var(--dn-dur-1); } html.ui-2026 body:not(#dn26) #sidebar.dn-shell :is(.dn-rail-btn, #sidebar-logout-btn):hover{ background: var(--dn-hover); color: var(--ink); } html.ui-2026 body:not(#dn26) #sidebar.dn-shell :is(.dn-rail-btn, #sidebar-logout-btn) svg{ width: 18px; height: 18px; } html.ui-2026 .dn-nav-find{ display: flex; align-items: center; gap: 8px; flex: none; height: 36px; margin: 2px 12px 6px; padding-inline: 10px 6px; border: 1px solid var(--border); border-radius: var(--dn-r-md); background: var(--surface-2); color: var(--ink-3); font: 400 var(--dn-fs-13)/1 var(--font-body); text-align: start; cursor: pointer; transition: border-color var(--dn-dur-1), background-color var(--dn-dur-1); } html.ui-2026 .dn-nav-find:hover{ border-color: var(--dn-line-strong); } html.ui-2026 .dn-nav-find > span{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.ui-2026 body:not(#dn26) #sidebar.dn-shell .sidebar-nav{ flex: 1 1 auto; min-height: 0; padding: 0 10px 12px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; } /* the classic headings, the empty Dashboard group and the retired rows stay in the DOM, unseen */ html.ui-2026 body:not(#dn26) #sidebar.dn-shell .sidebar-nav > :not(.dn-nav){ display: none; } html.ui-2026 .dn-nav-sec{ margin-top: 10px; } html.ui-2026 .dn-nav-sec:first-child{ margin-top: 2px; } html.ui-2026 body:not(#dn26) .dn-nav-sec-head{ display: flex; align-items: center; gap: 6px; width: 100%; height: 28px; padding: 0 8px 0 10px; padding-inline: 10px 8px; border: 0; border-radius: var(--dn-r-sm); background: transparent; color: var(--ink-3); font: 600 var(--dn-fs-12)/1 var(--font-body); letter-spacing: var(--dn-tracking-caps); text-transform: uppercase; cursor: pointer; transition: background-color var(--dn-dur-1), color var(--dn-dur-1); } html.ui-2026[dir="rtl"] body:not(#dn26) .dn-nav-sec-head{ text-transform: none; font-size: var(--dn-fs-13); } html.ui-2026 body:not(#dn26) .dn-nav-sec-head:hover{ background: var(--dn-hover); color: var(--ink); } html.ui-2026 .dn-nav-sec-label{ flex: 1; min-width: 0; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.ui-2026 .dn-nav-sec-chev{ width: 14px; height: 14px; transition: transform var(--dn-dur-2) var(--dn-ease-out); } html.ui-2026 .dn-nav-sec.is-collapsed .dn-nav-sec-chev{ transform: rotate(-90deg); } html.ui-2026[dir="rtl"] .dn-nav-sec.is-collapsed .dn-nav-sec-chev{ transform: rotate(90deg); } html.ui-2026 .dn-nav-list{ display: flex; flex-direction: column; gap: 1px; margin-top: 2px; } html.ui-2026 .dn-nav-sec.is-collapsed .dn-nav-list{ display: none; } html.ui-2026 body:not(#dn26) #sidebar.dn-shell .dn-nav-item{ position: relative; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-height: 36px; margin: 0; padding: 6px 10px; padding-inline: 10px; border: 0; border-radius: var(--dn-r-md); background: transparent; color: var(--ink-3); font: 500 var(--dn-fs-14)/1.3 var(--font-body); letter-spacing: 0; text-align: start; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dn-dur-1), color var(--dn-dur-1); } html.ui-2026 body:not(#dn26) #sidebar.dn-shell .dn-nav-item:hover{ background: var(--dn-hover); color: var(--ink); } html.ui-2026 body:not(#dn26) #sidebar.dn-shell .dn-nav-item:is([aria-current="page"], .active){ background: var(--brand-tint); color: var(--brand-text); font-weight: 500; /* the colour and the bar mark it (review A-8) */ border: 0; } html.ui-2026 body:not(#dn26) #sidebar.dn-shell .dn-nav-item[aria-current="page"]::before{ content: ""; position: absolute; inset-inline-start: -10px; top: 8px; bottom: 8px; width: 3px; border-start-end-radius: 3px; border-end-end-radius: 3px; background: var(--brand); } html.ui-2026 body:not(#dn26) #sidebar.dn-shell .dn-nav-item > svg:first-of-type, html.ui-2026 body:not(#dn26) #sidebar.dn-shell .dn-nav-item .dn-nav-ic{ width: 18px; height: 18px; flex: 0 0 18px; color: inherit; stroke-width: 1.8; } html.ui-2026 body:not(#dn26) #sidebar.dn-shell .dn-nav-item[aria-current="page"] svg{ color: var(--brand-text); } html.ui-2026 .dn-nav-label{ flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* Dashboard is a page, not a folder any more (its caret and folded-group badge stay unseen) */ html.ui-2026 body:not(#dn26) #sidebar.dn-shell .dn-nav-item :is(.nav-caret, #nav-group-dashboard-badge){ display: none; } /* external apps: ↗ at the end */ html.ui-2026 body:not(#dn26) #sidebar.dn-shell .dn-nav-item .nav-ext-arrow{ width: 14px; height: 14px; flex: 0 0 14px; margin-inline-start: auto; color: var(--ink-4); opacity: 1; } html.ui-2026 body:not(#dn26) #sidebar.dn-shell .dn-nav-item .nav-new-badge + .nav-ext-arrow{ margin-inline-start: 6px; } /* badges: the design system's 20px count pill, in r302's two colours (the same ids app.js paints). A NEW / UNREAD count (Tasks, Properties, Mail: .nav-new-badge[id$="-badge"]) keeps ui.css's solid red pill, as on the bell and the tab bar; any other count (My Calls, Cold Calling) is the neutral pill (review B-3 / A-10). */ html.ui-2026 body:not(#dn26) #sidebar.dn-shell .dn-nav-item :is(.nav-new-badge, .badge, [id="at-nav-badge"], [id="chat-badge"]){ display: inline-grid; place-items: center; min-width: 20px; height: 20px; min-height: 20px; margin: 0; padding: 0 6px; border: 0; border-radius: var(--dn-r-full); font: 600 var(--dn-fs-12)/1 var(--font-body); font-variant-numeric: tabular-nums; box-shadow: none; animation: none; flex: none; } html.ui-2026 body:not(#dn26) #sidebar.dn-shell .dn-nav-item :is(.nav-new-badge, .badge, [id="at-nav-badge"], [id="chat-badge"]):not(.nav-new-badge[id$="-badge"]){ border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-3); } html.ui-2026 body:not(#dn26) #sidebar.dn-shell .dn-nav-item :is(.nav-new-badge, .badge, [id="at-nav-badge"], [id="chat-badge"]):empty{ display: none; } /* footer: Help & guide, then the person */ html.ui-2026 body:not(#dn26) #sidebar.dn-shell .sidebar-footer{ flex: none; padding: 8px 10px 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--border); } html.ui-2026 .dn-nav-foot-links{ display: flex; flex-direction: column; gap: 1px; margin-bottom: 4px; } html.ui-2026 body:not(#dn26) #sidebar.dn-shell .dn-user-card{ display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 8px; padding-inline: 8px 6px; border: 0; border-radius: var(--dn-r-lg); background: transparent; cursor: pointer; transition: background-color var(--dn-dur-1); } html.ui-2026 body:not(#dn26) #sidebar.dn-shell .dn-user-card:hover{ background: var(--dn-hover); } html.ui-2026 body:not(#dn26) #sidebar.dn-shell .dn-user-av{ display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; overflow: hidden; font: 600 var(--dn-fs-13)/1 var(--font-body); } html.ui-2026 .dn-user-text{ display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; } html.ui-2026 body:not(#dn26) #sidebar.dn-shell #sidebar-user-name{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink) !important; font: 600 var(--dn-fs-14)/1.3 var(--font-body) !important; } /* ui.css: #sidebar-user-name{color:var(--text)!important}, (≤900) #sidebar .sidebar-footer div{font-size:12px!important} */ html.ui-2026 body:not(#dn26) #sidebar.dn-shell #sidebar-user-role{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3) !important; font: 400 var(--dn-fs-12)/1.3 var(--font-body) !important; } /* ui.css: #sidebar-user-role{color:…!important}, #sidebar .sidebar-footer div{font-size:12px!important} */ /* ---- 15b. The icon rail (desktop only) ---- */ @media (min-width: 901px){ html.ui-2026[data-dn-nav="rail"] body:not(#dn26) #sidebar.dn-shell .sidebar-logo{ flex-direction: column; justify-content: center; height: auto; min-height: var(--dn-topbar-h); padding: 12px 0 4px; gap: 6px; } html.ui-2026[data-dn-nav="rail"] body:not(#dn26) #sidebar.dn-shell .sidebar-logo-text{ display: none; } html.ui-2026[data-dn-nav="rail"] .dn-rail-btn svg{ transform: scaleX(-1); } html.ui-2026[data-dn-nav="rail"][dir="rtl"] .dn-rail-btn svg{ transform: none; } html.ui-2026[dir="rtl"]:not([data-dn-nav="rail"]) .dn-rail-btn svg{ transform: scaleX(-1); } html.ui-2026[data-dn-nav="rail"] .dn-nav-find{ position: relative; justify-content: center; margin-inline: 14px; padding: 0; } html.ui-2026[data-dn-nav="rail"] .dn-nav-find > .dn-kbd{ display: none; } /* the button keeps its name (review C-3): the label is visually hidden, not display:none */ html.ui-2026[data-dn-nav="rail"] .dn-nav-find > .dn-nav-find-label{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } html.ui-2026[data-dn-nav="rail"] body:not(#dn26) #sidebar.dn-shell .sidebar-nav{ padding-inline: 10px; scrollbar-width: none; } /* the section headings leave the rail — and the tab order: they were 1px, nameless buttons that took focus (review C-3); the hairline between sections is drawn by the section itself */ html.ui-2026[data-dn-nav="rail"] body:not(#dn26) .dn-nav-sec-head{ display: none; } html.ui-2026[data-dn-nav="rail"] .dn-nav-sec{ margin-top: 0; } html.ui-2026[data-dn-nav="rail"] .dn-nav-sec:not([hidden]) ~ .dn-nav-sec:not([hidden]){ margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); } html.ui-2026[data-dn-nav="rail"] .dn-nav-sec.is-collapsed .dn-nav-list{ display: flex; } html.ui-2026[data-dn-nav="rail"] body:not(#dn26) #sidebar.dn-shell .dn-nav-item{ justify-content: center; padding-inline: 0; min-height: 40px; } /* the name stays in the accessibility tree (the tooltip shows it) */ html.ui-2026[data-dn-nav="rail"] .dn-nav-label{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } html.ui-2026[data-dn-nav="rail"] body:not(#dn26) #sidebar.dn-shell .dn-nav-item .nav-ext-arrow{ display: none; } /* a new / unread count becomes a red dot on the icon (its digits stay for screen readers and in the tooltip); the neutral counts step aside, as every count does in the design system's rail */ html.ui-2026[data-dn-nav="rail"] body:not(#dn26) #sidebar.dn-shell .dn-nav-item .nav-new-badge[id$="-badge"]{ position: absolute; top: 7px; inset-inline-end: 12px; min-width: 8px; width: 8px; height: 8px; min-height: 8px; padding: 0; overflow: hidden; background: var(--danger); color: transparent; font-size: 0; box-shadow: 0 0 0 2px var(--surface); } html.ui-2026[data-dn-nav="rail"] body:not(#dn26) #sidebar.dn-shell .dn-nav-item :is(.nav-new-badge, .badge, [id="at-nav-badge"], [id="chat-badge"]):not(.nav-new-badge[id$="-badge"]){ position: absolute; width: 1px; height: 1px; min-width: 0; min-height: 0; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } html.ui-2026[data-dn-nav="rail"] body:not(#dn26) #sidebar.dn-shell .sidebar-footer{ padding-inline: 10px; } html.ui-2026[data-dn-nav="rail"] body:not(#dn26) #sidebar.dn-shell .dn-user-card{ flex-direction: column; justify-content: center; gap: 4px; padding: 6px 0; } html.ui-2026[data-dn-nav="rail"] .dn-user-text{ display: none; } } html.ui-2026 .dn-railtip{ position: fixed; z-index: 2147483600; top: 0; left: 0; max-width: 260px; padding: 6px 10px; border-radius: var(--dn-r-sm); background: var(--dn-toast-bg); color: var(--dn-toast-text); font: 500 var(--dn-fs-13)/1.35 var(--font-body); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--dn-dur-1); box-shadow: var(--dn-shadow-2); } html.ui-2026 .dn-railtip.is-open{ opacity: 1; } /* ---- 15c. Top bar ---- */ html.ui-2026 body:not(#dn26) #topbar{ gap: 12px; } @media (min-width: 901px){ /* the design system's bar (review A-7): 60px, the page gutter (32px) inline, so the breadcrumb starts where the page does, and the canvas at 82% under a blur with no rule or shadow (ui.css paints its 94% white, a cool shadow and the border with !important). The desktop bar scrolls away with the page (body is the scroll container, as in the classic look), so the design system's "hairline once scrolled" never shows; there is none. */ html.ui-2026 body:not(#dn26) #topbar{ height: var(--dn-topbar-h); min-height: var(--dn-topbar-h); padding-inline: 32px; background: var(--dn-topbar-bg) !important; border-color: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px); transition: border-color var(--dn-dur-2); } } html.ui-2026 body:not(#dn26) #topbar .topbar-leading{ flex: 1 1 auto; min-width: 0; } html.ui-2026 body:not(#dn26) #topbar .topbar-brand{ min-width: 0; } html.ui-2026 body:not(#dn26) #topbar .topbar-title-wrap{ min-width: 0; } html.ui-2026 body:not(#dn26) #topbar :is(#page-title, #topbar-date){ display: none !important; } /* ui.css (≤900): html.crm-mobile-lock #page-title{display:block!important}; #dn-crumbs shows the page */ @media (min-width: 901px){ /* the menu button is a phone control (app.js drops its inline display:none on every resize) */ html.ui-2026 body:not(#dn26) #topbar #menu-toggle{ display: none; } } html.ui-2026 .dn-crumbs{ display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--ink-3); font: 400 var(--dn-fs-14)/1.3 var(--font-body); } html.ui-2026 .dn-crumbs > span{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html.ui-2026 .dn-crumb-sec{ flex: 0 1 auto; min-width: 24px; } html.ui-2026 .dn-crumb-cur{ flex: 0 0 auto; max-width: 100%; color: var(--ink); font-weight: 600; } html.ui-2026 .dn-crumb-sep{ width: 14px; height: 14px; color: var(--ink-4); } html.ui-2026[dir="rtl"] .dn-crumb-sep{ transform: scaleX(-1); } html.ui-2026 .dn-crumbs:not(.has-sec) :is(.dn-crumb-sec, .dn-crumb-sep){ display: none; } html.ui-2026 .dn-topbar-find{ display: flex; align-items: center; gap: 8px; flex: 0 1 300px; width: clamp(200px, 22vw, 300px); min-width: 0; height: 36px; padding-inline: 10px 6px; border: 1px solid var(--border); border-radius: var(--dn-r-md); background: var(--surface); color: var(--ink-3); font: 400 var(--dn-fs-13)/1 var(--font-body); text-align: start; cursor: pointer; transition: border-color var(--dn-dur-1), box-shadow var(--dn-dur-1); } html.ui-2026 .dn-topbar-find:hover{ border-color: var(--dn-line-strong); box-shadow: var(--dn-shadow-1); } html.ui-2026 .dn-topbar-find > .dn-ts-label{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* the CRM's own buttons, in the design system's shapes */ html.ui-2026 body:not(#dn26) #topbar .topbar-actions{ gap: 6px; } html.ui-2026 body:not(#dn26) #topbar :is(#topbar-alert-btn, #topbar-settings-btn, #topbar-lang-btn, #topbar-theme-btn){ display: inline-grid; place-items: center; width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; border: 0; border-radius: var(--dn-r-md); background: transparent; color: var(--ink-3); box-shadow: none; transition: background-color var(--dn-dur-1), color var(--dn-dur-1); } html.ui-2026 body:not(#dn26) #topbar :is(#topbar-alert-btn, #topbar-settings-btn, #topbar-lang-btn, #topbar-theme-btn):hover{ background: var(--dn-hover); color: var(--ink); } html.ui-2026 body:not(#dn26) #topbar #topbar-settings-btn[style*="none"]{ display: none; } /* ui.css forces the theme button into a cool-grey pill (#topbar-theme-btn{border-radius:99px!important}, body.light/.dark #topbar-theme-btn{color:#6B7280/#B4B4B4!important}), and index.html sizes the gear 38px inline: both join the row of 36px icon buttons (reviews A-4, A-5) */ html.ui-2026 body:is(.light, .dark) #topbar #topbar-theme-btn{ border-radius: var(--dn-r-md) !important; border-color: transparent !important; color: var(--ink-3) !important; } html.ui-2026 body:is(.light, .dark) #topbar #topbar-theme-btn:hover{ border-color: transparent !important; color: var(--ink) !important; } html.ui-2026 body:not(#dn26) #topbar #topbar-settings-btn{ width: 36px !important; height: 36px !important; } html.ui-2026 body:not(#dn26) #topbar #topbar-lang-btn{ font: 600 var(--dn-fs-13)/1 var(--font-body); } html.ui-2026 body:not(#dn26) #topbar :is(#topbar-alert-btn, #topbar-settings-btn, #topbar-theme-btn) svg{ width: 18px; height: 18px; } html.ui-2026 body:not(#dn26) #topbar #assistant-fab{ display: inline-flex; align-items: center; gap: 6px; height: 36px; min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--dn-r-md); background: var(--brand-tint); color: var(--brand-text); font: 500 var(--dn-fs-14)/1 var(--font-body); box-shadow: none; } html.ui-2026 body:not(#dn26) #topbar #assistant-fab:hover{ background: var(--dn-brand-tint-2); } html.ui-2026 body:not(#dn26) #topbar #assistant-fab :is(.assistant-fab-label, .assistant-fab-dot){ display: none; } html.ui-2026 body:not(#dn26) #topbar #assistant-fab svg{ width: 18px; height: 18px; } html.ui-2026 body:not(#dn26) #topbar #topbar-add-lead-btn{ display: inline-flex; align-items: center; gap: 6px; width: auto; min-width: 0; height: 36px; min-height: 36px; padding: 0 14px; border-radius: var(--dn-r-md); font: 500 var(--dn-fs-14)/1 var(--font-body); } html.ui-2026 body:not(#dn26) #topbar #topbar-add-lead-btn svg{ width: 18px; height: 18px; } html.ui-2026 body:not(#dn26) #topbar #topbar-add-lead-btn[style*="none"]{ display: none; } @media (max-width: 1360px) and (min-width: 901px){ /* narrower desktops: the assistant keeps its icon, the search keeps its box */ html.ui-2026 body:not(#dn26) #topbar #assistant-fab{ width: 36px; padding: 0; justify-content: center; } html.ui-2026 body:not(#dn26) #topbar #assistant-fab .dn-ai-label{ display: none; } html.ui-2026 .dn-topbar-find{ width: clamp(160px, 18vw, 240px); } } @media (max-width: 1180px) and (min-width: 901px){ html.ui-2026 .dn-crumbs :is(.dn-crumb-sec, .dn-crumb-sep){ display: none; } html.ui-2026 .dn-topbar-find{ flex: 0 0 36px; width: 36px; padding: 0; justify-content: center; } html.ui-2026 .dn-topbar-find > :not(svg){ display: none; } html.ui-2026 body:not(#dn26) #topbar #topbar-add-lead-btn{ width: 36px; padding: 0; justify-content: center; } html.ui-2026 body:not(#dn26) #topbar #topbar-add-lead-btn .dn-new-label{ display: none; } } /* ---- 15d. Command palette ---- */ html.ui-2026 .dn-palette-scrim{ position: fixed; inset: 0; z-index: 2147483000; background: var(--dn-scrim); opacity: 0; transition: opacity var(--dn-dur-2); } html.ui-2026 .dn-palette-scrim.is-open{ opacity: 1; } html.ui-2026 .dn-palette{ position: fixed; z-index: 2147483001; top: 12vh; left: 50%; display: flex; flex-direction: column; width: min(640px, calc(100vw - 32px)); max-height: min(560px, 76dvh); overflow: hidden; border: 1px solid var(--border); border-radius: var(--dn-r-xl); background: var(--surface); color: var(--ink); box-shadow: var(--dn-shadow-4); font-family: var(--font-body); opacity: 0; transform: translate(-50%, -6px) scale(.985); transition: transform var(--dn-dur-2) var(--dn-ease-out), opacity var(--dn-dur-2); } html.ui-2026 .dn-palette.is-open{ opacity: 1; transform: translate(-50%, 0); } html.ui-2026 .dn-palette-top{ display: flex; align-items: center; gap: 10px; flex: none; padding: 0 14px; border-bottom: 1px solid var(--border); } html.ui-2026 .dn-palette-glass{ width: 20px; height: 20px; color: var(--ink-4); } html.ui-2026 body:not(#dn26) #dn-palette #dn-palette-input{ flex: 1; min-width: 0; height: 56px; min-height: 56px; margin: 0; padding: 0; border: 0 !important; /* ui.css: input:not(…){border…!important} (the enterprise input skin) */ border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--ink); font: 400 var(--dn-fs-16)/1.3 var(--font-body); outline: 0; } html.ui-2026 body:not(#dn26) #dn-palette #dn-palette-input:focus-visible{ outline: 0; } /* the open palette is the focus context */ html.ui-2026 .dn-palette-input::placeholder{ color: var(--dn-placeholder); opacity: 1; } html.ui-2026 .dn-palette-close{ display: none; place-items: center; width: 44px; height: 44px; flex: none; margin-inline-end: -8px; border: 0; border-radius: var(--dn-r-md); background: transparent; color: var(--ink-3); cursor: pointer; } html.ui-2026 .dn-palette-list{ flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px; overscroll-behavior: contain; } html.ui-2026 .dn-pal-group{ padding: 10px 10px 4px; color: var(--ink-3); font: 600 var(--dn-fs-12)/1.3 var(--font-body); } html.ui-2026 .dn-pal-item{ display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 10px; border-radius: var(--dn-r-md); color: var(--ink); font: 500 var(--dn-fs-14)/1.3 var(--font-body); cursor: pointer; } /* the active option: focus stays in the input, so the tint alone (1.1:1) was the only cue; a brand ring the eye finds (6.5:1 light, 4.2:1 dark — review C-9) */ html.ui-2026 .dn-pal-item[aria-selected="true"]{ background: var(--brand-tint); box-shadow: inset 0 0 0 1.5px var(--brand); } html.ui-2026 .dn-pal-ic{ display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--surface-2); color: var(--ink-3); } html.ui-2026 .dn-pal-ic svg{ width: 18px; height: 18px; } html.ui-2026 .dn-pal-item[aria-selected="true"] .dn-pal-ic{ background: var(--surface); color: var(--brand-text); } html.ui-2026 .dn-pal-label{ flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.ui-2026 .dn-pal-q{ color: var(--brand-text); font-weight: 600; } html.ui-2026 .dn-pal-hint{ flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); font: 400 var(--dn-fs-13)/1.3 var(--font-body); } html.ui-2026 .dn-pal-ext{ width: 14px; height: 14px; color: var(--ink-4); } html.ui-2026 .dn-pal-empty{ padding: 32px 16px; color: var(--ink-3); text-align: center; font-size: var(--dn-fs-14); } html.ui-2026 .dn-palette-foot{ display: flex; flex-wrap: wrap; align-items: center; gap: 14px; flex: none; padding: 8px 14px; border-top: 1px solid var(--border); color: var(--ink-3); font: 400 var(--dn-fs-12)/1.3 var(--font-body); } html.ui-2026 .dn-palette-foot > span{ display: inline-flex; align-items: center; gap: 4px; } html.ui-2026 .dn-palette-foot .dn-pf-any{ margin-inline-start: auto; } html.ui-2026 .dn-palette.is-phone{ top: calc(8px + env(safe-area-inset-top, 0px)); /* clear of the notch (landscape) and the home indicator (review C-6) */ width: calc(100vw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); } html.ui-2026 .dn-palette.is-phone :is(.dn-palette-foot, .dn-palette-esc){ display: none; } html.ui-2026 .dn-palette.is-phone .dn-palette-close{ display: inline-grid; } html.ui-2026 .dn-palette.is-phone .dn-pal-item{ min-height: 48px; } /* ---- 15e. Phone shell (≤900): top bar, drawer, tab bar, FAB, More sheet ---- */ @media (max-width: 900px){ html.ui-2026 body{ --dn-topbar-h: 56px; } html.ui-2026 body:not(#dn26) #topbar{ gap: 2px; } /* the title takes the free space, so search · assistant · bell sit together at the end */ html.ui-2026 body:not(#dn26) #topbar .topbar-actions{ flex: 0 0 auto !important; width: auto !important; } /* ui.css (≤400): .topbar-actions{flex:1 1 auto!important;width:auto!important} */ html.ui-2026 body:not(#dn26) #topbar #menu-toggle{ border: 0; border-radius: var(--dn-r-md) !important; /* ui.css (≤900): #menu-toggle{…border-radius:12px!important} */ background: transparent; color: var(--ink); box-shadow: none; } html.ui-2026 .dn-crumbs{ font-size: var(--dn-fs-16); padding-inline: 4px; } html.ui-2026 .dn-crumbs :is(.dn-crumb-sec, .dn-crumb-sep){ display: none; } html.ui-2026 .dn-topbar-find{ flex: 0 0 44px; width: 44px; height: 44px; margin-inline-start: auto; padding: 0; justify-content: center; border: 0; background: transparent; color: var(--ink-3); } html.ui-2026 .dn-topbar-find > :not(svg){ display: none; } html.ui-2026 .dn-topbar-find:hover{ box-shadow: none; background: var(--dn-hover); } html.ui-2026 body:not(#dn26) #topbar :is(#assistant-fab, #topbar-alert-btn){ border: 0; border-radius: var(--dn-r-md) !important; /* ui.css (≤900): #assistant-fab,#topbar-alert-btn{…border-radius:12px!important} */ box-shadow: none; } html.ui-2026 body:not(#dn26) #topbar #topbar-alert-btn{ background: transparent; color: var(--ink-3); } html.ui-2026 body:not(#dn26) #topbar #assistant-fab .dn-ai-label{ display: none; } /* the drawer: the regrouped sidebar */ html.ui-2026 body:not(#dn26) #sidebar.dn-shell{ width: min(320px, 86vw) !important; } /* ui.css (≤900): nav#sidebar{width:270px!important} */ /* above the tab bar (z 110) and the FAB (112) like any sheet; unseen (so not tabbable) while closed */ html.ui-2026 body:not(#dn26) #sidebar.dn-shell{ z-index: 120; padding-top: env(safe-area-inset-top, 0px); padding-left: env(safe-area-inset-left, 0px); /* landscape: the rows stay clear of the notch (review C-6) */ padding-right: env(safe-area-inset-right, 0px); visibility: hidden; transition: transform var(--dn-dur-3) var(--dn-ease-out), visibility 0s linear var(--dn-dur-3); } html.ui-2026 body:not(#dn26) #sidebar.dn-shell.open{ visibility: visible; box-shadow: var(--dn-shadow-4); transition: transform var(--dn-dur-3) var(--dn-ease-out), visibility 0s; } html.ui-2026 body:not(#dn26) #sidebar.dn-shell #dn-rail-btn{ display: none; } html.ui-2026 .dn-nav-find{ height: 44px; } html.ui-2026 body:not(#dn26) #sidebar.dn-shell .dn-nav-item{ min-height: 44px; } html.ui-2026 body:not(#dn26) .dn-nav-sec-head{ height: 44px; } html.ui-2026 body:not(#dn26) #sidebar.dn-shell #sidebar-logout-btn{ width: 44px; height: 44px; min-width: 44px; min-height: 44px; } html.ui-2026 #sidebar-overlay.show{ position: fixed; inset: 0; z-index: 119; display: block; background: var(--dn-scrim); } /* the tab bar */ html.ui-2026 body:not(#dn26) #mobile-bottom-nav{ background: color-mix(in srgb, var(--surface) 90%, transparent) !important; /* ui.css (≤900): #mobile-bottom-nav{…background:var(--card)!important;border-top…!important} */ -webkit-backdrop-filter: saturate(1.5) blur(18px); backdrop-filter: saturate(1.5) blur(18px); border-top: 1px solid var(--border) !important; box-shadow: none; } html.ui-2026 body:not(#dn26) #mobile-bottom-nav .mbn-btn{ color: var(--ink-3) !important; /* ui.css (≤900): #mobile-bottom-nav .mbn-btn{…color:var(--text-muted)!important} */ isolation: isolate; } html.ui-2026 body:not(#dn26) #mobile-bottom-nav .mbn-btn .mbn-label{ font-weight: 500 !important; font-size: var(--dn-fs-12) !important; } html.ui-2026 body:not(#dn26) #mobile-bottom-nav .mbn-btn::before{ content: ""; position: absolute; top: 6px; inset-inline-start: calc(50% - 28px); inset-inline-end: auto; width: 56px; height: 30px; border-radius: var(--dn-r-full); background: transparent; z-index: -1; transition: background-color var(--dn-dur-2); } html.ui-2026 body:not(#dn26) #mobile-bottom-nav .mbn-btn.active{ color: var(--brand-text) !important; } html.ui-2026 body:not(#dn26) #mobile-bottom-nav .mbn-btn.active::before{ background: var(--brand-tint); } html.ui-2026 body:not(#dn26) #mobile-bottom-nav .mbn-btn.active .mbn-label{ font-weight: 600 !important; } html.ui-2026 body:not(#dn26) #mobile-bottom-nav .mbn-btn .mbn-ic{ width: 22px; height: 22px; stroke-width: 1.8; } html.ui-2026 body:not(#dn26) #mobile-bottom-nav .mbn-badge{ background: var(--danger); color: var(--on-danger); font: 600 var(--dn-fs-12)/18px var(--font-body); min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--dn-r-full); box-shadow: 0 0 0 2px var(--surface); } /* the FAB: the design system's rounded square */ html.ui-2026 body:not(#dn26) #crm-fab{ border-radius: 18px; background: var(--brand); color: var(--on-brand); box-shadow: 0 10px 24px -6px color-mix(in srgb, var(--brand) 55%, transparent), var(--dn-shadow-2); transition: transform var(--dn-dur-2) var(--dn-ease-spring); } html.ui-2026 body:not(#dn26) #crm-fab:active{ transform: scale(.96); } } /* the More sheet (phone), in the sidebar's sections */ html.ui-2026 .dn-more-sec + .dn-more-sec{ margin-top: 6px; } html.ui-2026 .dn-more-head{ padding: 14px 16px 4px; color: var(--ink-3); font: 600 var(--dn-fs-12)/1.3 var(--font-body); letter-spacing: var(--dn-tracking-caps); text-transform: uppercase; } html.ui-2026[dir="rtl"] .dn-more-head{ text-transform: none; font-size: var(--dn-fs-13); } /* ========================================================================================== 16. Copy and safety (wave 1, part 3) ------------------------------------------------------------------------------------------ 16a. Zoho-only controls. The CRM marks with [data-zoho] what can only talk to Zoho, which is switched off on 2026-09-26: "Open in Zoho CRM" (lead/deal record, transaction detail), the property Blueprint and Widget Actions panels and the contact Blueprint section (their API routes were removed on 2026-09-23 and answer 404), the Zoho CRM Sync tool card, the "Zoho CRM" source badge, the Zoho People status line of a leave request and the Zoho Dev_Project Sync line. The words themselves were fixed in both looks; these go in 2026 only. 16b. The "⋯" overflow menu (ui-2026.js §4). The page's own destructive control stays in the DOM, hidden (.dn-demoted); the menu item calls its .click(), so its confirmation is unchanged. 16c. Mixed-script titles: names and titles isolate their own direction (dir="auto" behaviour), while the cell keeps the page's alignment (text-align: match-parent). 16d. Phone numbers (ui-2026.js §5 marks them .dn-phone and isolates them left-to-right) draw with Latin digits: the Persian UI font (IRANYekan, FaNum cut) turns 0-9 into ۰-۹. ========================================================================================== */ /* ---- 16a. Zoho-only controls ---- */ html.ui-2026 body:not(#dn26) [data-zoho]{ display: none; } /* ---- 16b. Overflow menu ---- */ html.ui-2026 body:not(#dn26) .dn-demoted{ display: none; } html.ui-2026 .dt-danger-sep:has(+ .dn-ovf){ display: none; } html.ui-2026 .dn-ovf{ position: relative; display: inline-flex; flex: none; align-self: center; } html.ui-2026 body:not(#dn26) .dn-ovf-btn{ display: inline-grid; place-items: center; box-sizing: border-box; width: var(--dn-control-h-sm); height: var(--dn-control-h-sm); min-width: 0; min-height: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--dn-r-md); background: var(--surface); color: var(--ink-3); cursor: pointer; transition: background-color var(--dn-dur-1), color var(--dn-dur-1), border-color var(--dn-dur-1); } html.ui-2026 body:not(#dn26) .dn-ovf-btn:hover, html.ui-2026 body:not(#dn26) .dn-ovf.is-open .dn-ovf-btn{ background: var(--dn-btn-hover); color: var(--ink); border-color: var(--dn-line-strong); } html.ui-2026 body:not(#dn26) .dn-ovf-btn:focus-visible{ outline: 2px solid var(--focus); outline-offset: 2px; } html.ui-2026 .dn-ovf-btn svg{ width: 16px; height: 16px; fill: currentColor; } html.ui-2026 .dn-ovf-menu{ position: fixed; top: 0; left: 0; /* ui-2026.js places it (viewport coordinates, RTL aware) */ z-index: 80; box-sizing: border-box; min-width: 200px; max-width: min(320px, calc(100vw - 16px)); padding: 6px; border: 1px solid var(--border); border-radius: var(--dn-r-lg); background: var(--surface); box-shadow: var(--dn-shadow-3); text-align: start; transition: none; /* ui.css transitions `all` on everything: the menu would slide in from 0,0 */ } html.ui-2026 .dn-ovf-menu[hidden]{ display: none; } html.ui-2026 body:not(#dn26) .dn-ovf-item{ display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%; min-height: 36px; margin: 0; padding: 6px 10px; border: 0; border-radius: var(--dn-r-sm); background: transparent; color: var(--ink); font: 500 var(--dn-fs-14)/1.3 var(--font-body); text-align: start; white-space: nowrap; cursor: pointer; box-shadow: none; } html.ui-2026 body:not(#dn26) .dn-ovf-item:hover{ background: var(--dn-hover); } html.ui-2026 body:not(#dn26) .dn-ovf-item:focus-visible{ background: var(--dn-hover); outline: 2px solid var(--focus); outline-offset: -2px; } html.ui-2026 .dn-ovf-item > span{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } html.ui-2026 .dn-ovf-item > svg{ flex: none; width: 16px; height: 16px; color: var(--ink-3); } html.ui-2026 body:not(#dn26) .dn-ovf-item.is-danger, html.ui-2026 body:not(#dn26) .dn-ovf-item.is-danger > svg{ color: var(--danger-text); } html.ui-2026 body:not(#dn26) .dn-ovf-item.is-danger:hover, html.ui-2026 body:not(#dn26) .dn-ovf-item.is-danger:focus-visible{ background: color-mix(in srgb, var(--danger) 10%, transparent); } html.ui-2026 body:not(#dn26) .dn-ovf-item[aria-disabled="true"]{ opacity: .5; cursor: not-allowed; } html.ui-2026 .dn-ovf-sep{ height: 1px; margin: 6px -6px; background: var(--border); } @media (max-width: 900px){ html.ui-2026 body:not(#dn26) .dn-ovf-btn{ width: 44px; height: 44px; } html.ui-2026 body:not(#dn26) .dn-ovf-item{ min-height: 44px; } /* the record panel's header hides Edit and Delete on a phone (ui.css, .lead-modal .lm-header .lm-edit); its "⋯" follows, so no destructive control appears where the classic look shows none */ html.ui-2026 .lead-modal .lm-header .dn-ovf{ display: none; } } /* ---- 16c. Mixed-script titles ---- */ html.ui-2026 :is(.lm-title h2, .zcal-event-title, .txn-prop-name, .txn-buyer, .prp-name, .prp-card-name, .dc-event-title, .dt-c-name .dt-ellip, .ul-table td > b, .ul-card-title, .own-person b, [data-dash-open] > span > strong, .ztask-title-cell > span > b, .crm-dl-contact-name){ unicode-bidi: plaintext; text-align: match-parent; } /* user-written text: its own direction decides its alignment too (as dir="auto" would) */ html.ui-2026 :is(.notes-content, .tch-bubble-text, .lm-note-item .t, .own-panel-notes){ unicode-bidi: plaintext; } html.ui-2026 bdi.dn-bidi{ unicode-bidi: isolate; } /* ---- 16d. Phone numbers ---- */ html.ui-2026[dir="rtl"] :is(.dn-phone, input[type="tel"], .crm-dl-contact-name, a[href^="tel:"]){ font-family: 'Inter', 'IRANYekan Persian', "Segoe UI", Tahoma, Arial, sans-serif; font-variant-numeric: tabular-nums; } /* ========================================================================================== 17. Fixes found by the reviews (wave 1, part 4). The fixes themselves live in ui.css / app.js and apply to both looks; this section only keeps the 2026 look's own layer in step. ========================================================================================== */ /* ---- 17a. The login card in the dark theme ---- The card is white in both themes: in the dark theme ui.css re-declares the light palette on .login-box. The --dn-* mixes below are declared on body (§0), so they reached the card already mixed from the dark palette; the card re-declares the light formulas, which then resolve against the light palette it carries. ui.css forces the card's plain fields' edge (the captcha answer) with !important from an id-bearing rule, so the 2026 field edge, hover and focus follow it with the same weight. The .form-control fields keep their own #login-screen skin, as in light. */ html.ui-2026 body.dark #login-screen .login-box{ --dn-canvas: var(--bg); --dn-surface: var(--surface); --dn-surface-muted: var(--surface-2); --dn-line: var(--border); --dn-ink: var(--ink); --dn-text-2: var(--ink-3); --dn-text-3: var(--ink-4); --dn-line-strong: color-mix(in srgb, var(--ink) 14%, var(--border)); --dn-hover: color-mix(in srgb, var(--ink) 4.5%, transparent); --dn-pressed: color-mix(in srgb, var(--ink) 8%, transparent); --dn-btn-hover: color-mix(in srgb, var(--ink) 4%, var(--surface)); --dn-brand-tint-2: color-mix(in srgb, var(--brand) 18%, var(--surface)); --dn-control-edge: var(--ink-4); --dn-placeholder: var(--ink-3); --dn-skeleton: color-mix(in srgb, var(--ink) 7%, var(--surface)); --dn-skeleton-hi: color-mix(in srgb, var(--ink) 3%, var(--surface)); --dn-ring: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); --dn-shadow-1: 0 1px 2px rgba(22,26,24,.05); --dn-shadow-2: 0 4px 12px -2px rgba(22,26,24,.08), 0 1px 3px rgba(22,26,24,.06); --dn-shadow-3: 0 16px 40px -8px rgba(22,26,24,.18), 0 4px 12px -4px rgba(22,26,24,.08); --dn-shadow-4: 0 28px 64px -12px rgba(22,26,24,.28), 0 2px 8px rgba(22,26,24,.06); } html.ui-2026 body.dark #login-screen .login-box :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not(.form-control), select:not(.form-control), textarea:not(.form-control)){ border-color: var(--dn-line-strong) !important; } html.ui-2026 body.dark #login-screen .login-box :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not(.form-control), select:not(.form-control), textarea:not(.form-control)):hover:not(:focus):not(:disabled){ border-color: color-mix(in srgb, var(--ink) 28%, var(--border)) !important; } html.ui-2026 body.dark #login-screen .login-box :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not(.form-control), select:not(.form-control), textarea:not(.form-control)):focus{ border-color: var(--brand) !important; } html.ui-2026 body.dark #login-screen .login-box :is(input, textarea):not(.form-control)::placeholder{ color: var(--dn-placeholder); } /* ========================================================================================== 18. Wave 1 review fixes (reviews A, B, C of 2026-09-27): RTL ink, rail keyboard, touch targets, safe areas, the skip link, the palette's active row, the icon badge. Every rule is scoped like the rest of this file. ========================================================================================== */ /* ---- 18a. Persian / Arabic ink (review C-2): the one-line shell labels clip their overflow (for the ellipsis), and at line-height 1 / 1.3 that cut IRANYekan's hamza and madda above and the descenders of ي ق ج below («ابحث أو» read «آو»). A line box tall enough for the script; the rows keep their height. ---- */ html.ui-2026[dir="rtl"] :is(.dn-nav-find > span, .dn-topbar-find > .dn-ts-label, .dn-nav-sec-label, .dn-nav-label, .dn-crumbs > span){ line-height: 1.7; } html.ui-2026[dir="rtl"] body:not(#dn26) #sidebar.dn-shell :is(#sidebar-user-name, #sidebar-user-role){ line-height: 1.6 !important; } /* §15a sets font: …/1.3 !important */ /* ---- 18b. The skip link (review C-7): ui-2026-shell.js adds it as the first focus stop, signed in only ---- */ html.ui-2026 .dn-skip{ position: fixed; z-index: 2147483602; top: 8px; inset-inline-start: 8px; padding: 10px 14px; border-radius: var(--dn-r-md); background: var(--brand); color: var(--on-brand); font: 600 var(--dn-fs-14)/1.2 var(--font-body); text-decoration: none; transform: translateY(-200%); } html.ui-2026 .dn-skip:focus{ transform: none; outline: 2px solid var(--focus); outline-offset: 2px; } html.ui-2026 body:not(.auth-app) .dn-skip{ display: none; } /* the landing region itself draws no ring (the next Tab goes into the page) */ html.ui-2026 #content[tabindex="-1"]:focus{ outline: none; } /* ---- 18c. The bell's count (reviews A-6, C-11): the design system's icon badge — an 18px circle at the button's top end, inside it (the phone top bar clips what sticks out), 12px, ringed in the bar's colour. The §7 pill recipe had made it an 18×24 oval that the phone bar cut at the top. ui.css (#topbar-alert-btn #alert-badge) places it with two ids, so this rule carries them too. ---- */ html.ui-2026 body:not(#dn26) #topbar-alert-btn #alert-badge{ top: 3px; inset-inline-end: 2px; min-width: 18px; height: 18px; min-height: 18px; padding: 0 4px; border-radius: var(--dn-r-full); font: 600 var(--dn-fs-12)/18px var(--font-body); font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--dn-topbar-bg, var(--surface)); } /* ---- 18d. The page scopes read the palette (review A-1). ui.css re-declares the palette inside every page — `#content .page` (light: --text-muted #666670) and `body.dark #content .page` (the old cool greys: --bg #13161C, --border #34373D, --card #1D2026, --text-light #a9b6c7, --primary #9EA3AB…) — so every 2026 recipe that reads var(--border) or var(--bg) inside a page painted those instead of the palette. In the 2026 look a page takes the body's palette again (the --dn-* aliases are resolved on body). The gold-v2 pages and Team Chat keep their own, already canonical, scopes (their selectors outrank this one). ---- */ html.ui-2026 body #content .page{ --bg: var(--dn-canvas); --surface: var(--dn-surface); --card: var(--dn-surface); --card2: var(--dn-surface-muted); --track: var(--dn-track); --head-bg: var(--dn-surface-muted); --border: var(--dn-line); --border-light: var(--border-subtle); --hairline: var(--dn-line); --border-gold: var(--border-strong); --text: var(--dn-ink); --text-light: var(--dn-text-2); --text-muted: var(--dn-text-3); --primary: var(--brand); --primary-dark: var(--brand-hover); --gold: var(--brand-text); --gold-light: var(--ink); --gold-grad: linear-gradient(var(--brand), var(--brand)); --dim: var(--ink-5); } /* ---- 18e. Secondary text in light is AA (review A-2). The palette's --ink-4 (#767d74) is 3.7–4.2:1 on the canvas, the surface and the tints, and --ink-5 (#8a9188) 3.2:1; the design system keeps that grey for icons, control edges and disabled states only (§3.1, §10). In the light 2026 look every "muted" text token reads --ink-3 (#5f665e, 5.9:1 on the canvas), in the body, the pages (their scopes re-declare the tokens) and the dialogs, and the rules that paint text with --ink-4 / --ink-5 directly follow. Dark is untouched (--ink-4 there is 6:1). Icons and control edges keep --ink-4 (--dn-control-edge, --dn-text-3). ---- */ html.ui-2026 body.light:not(#dn26), html.ui-2026 body.light:not(#dn26) :is(#content .page, #content #page-team-chat.tch-gold-v2, .modal-overlay, .modal, .lead-modal-overlay, .lead-modal), html.ui-2026 body.dark:not(#dn26) #login-screen .login-box{ /* the login card is light in both themes (§17a) */ --text-muted: var(--ink-3); --text-3: var(--ink-3); --text-4: var(--ink-3); --muted: var(--ink-3); --faint: var(--ink-3); --dim: var(--ink-3); --dc-green: var(--ink-3); } html.ui-2026 body.light:not(#dn26) :is(.dc-eyebrow, .dc-panel-head small, .dc-attention header small, .txn-finance-eyebrow, .at-eyebrow, .dc-metric-arrow, .dc-metric-copy em, .dc-scoring-note, .dgl-kpi-sub, .tch-bubble-meta, .tch-date-sep, .crm-list-empty, .own-empty, .dc-empty, .at-timeline-empty, .at-team-report p small, .dsw-head, .dsw-count, .dsw-empty, .dsw-member small, .dsw-manage-row small, .ideas-when, .ideas-shared small, .ideas-comment time, .ideas-empty, .wa-event small.wa-tpl){ color: var(--ink-3); } /* ---- 18f. The shell's overlays keep the 12px floor (review A-13): the bell panel's captions, links and count, the Quick-create hints ---- */ html.ui-2026 body:not(#dn26) :is(.abell-cap, .abell-link, .qc-hint){ font-size: var(--dn-fs-12); } html.ui-2026 body:not(#dn26) .abell-cap{ font-weight: 600; letter-spacing: var(--dn-tracking-caps); } html.ui-2026 body:not(#dn26) .abell-head .notif-badge{ font-size: var(--dn-fs-12); font-weight: 600; } /* ---- 18g. Favourites (review A-14): the pinned section ui-2026-shell.js builds at the top of the nav. Its rows are proxies, not .nav-item (so the CRM's gates and highlight code leave them alone): they take the row recipe of §15a and need the row's flex layout, which .nav-item gave the others. ---- */ html.ui-2026 body:not(#dn26) #sidebar.dn-shell .dn-fav{ display: flex; } /* ---- 18h. Colours that stayed light in the dark theme, or off the palette in both (review A-3). ---- The dialogs and the record window carry their own palettes (#small-modal.*-gold-v2: --card #171717…; the record window's --lm-*: #131110, #B4B4B4 on #262626, blue #2f6f9f…), the Tasks module its --zt-* tokens and a dozen fixed whites / #171a1f fills, and a few components fixed pastel chips. In the 2026 look they read the palette. */ /* dialogs: the same re-pointing as the pages (§18d) */ html.ui-2026 body:not(#dn26) :is(#small-modal, #modal, .hrp-overlay, .kpi-modal-backdrop){ --bg: var(--dn-canvas); --card: var(--dn-surface); --card2: var(--dn-surface-muted); --head-bg: var(--dn-surface-muted); --track: var(--dn-track); --border: var(--dn-line); --border-light: var(--border-subtle); --hairline: var(--dn-line); --border-gold: var(--border-strong); --text: var(--dn-ink); --text-light: var(--dn-text-2); --text-muted: var(--dn-text-3); --dim: var(--ink-5); --primary: var(--brand); --primary-dark: var(--brand-hover); --gold: var(--brand-text); --gold-light: var(--ink); --gold-grad: linear-gradient(var(--brand), var(--brand)); } html.ui-2026 body.dark .modal-footer{ background: var(--surface) !important; border-color: var(--border) !important; } /* ui.css: body.dark .modal-footer{rgba(9,12,18,.8)!important} */ /* the lead / deal / property record window */ html.ui-2026 body .lead-modal-overlay{ --lm-bg: var(--surface); --lm-surface: var(--surface-2); --lm-card: var(--surface); --lm-border: var(--border); --lm-track: var(--track); --lm-text: var(--ink); --lm-muted: var(--ink-3); --lm-faint: var(--ink-3); --lm-pill: var(--surface-2); --lm-ok: var(--brand-text); --lm-warn-text: var(--warn); --lm-warn-bg: var(--warn-tint); --lm-blue: var(--brand-text); --lm-blue-bg: var(--brand-tint); --lm-danger: var(--danger); --lm-danger-bg: var(--danger-tint); --lm-wa: var(--brand); --lm-wa-bg: var(--brand-tint); --lm-wa-text: var(--brand-text); } /* fields in the dark theme: the surface, not a 5% white; placeholders at the palette's placeholder colour (ui.css forces both with !important) */ html.ui-2026 body.dark input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]):not(.form-control), html.ui-2026 body.dark select:not(.form-control), html.ui-2026 body.dark textarea:not(.form-control){ background: var(--surface) !important; } html.ui-2026 body.dark :is(input, textarea)::placeholder{ color: var(--dn-placeholder) !important; } /* Tasks (page and New task dialog): the module's own tokens, fills and the table head */ html.ui-2026 body, html.ui-2026 body:not(#dn26) .ztask-shell{ --zt-green: var(--brand); --zt-green-soft: var(--brand-tint); --zt-ink: var(--ink); --zt-muted: var(--ink-3); --zt-line: var(--border); } html.ui-2026 body:not(#dn26) :is(.ztask-hero, .ztask-stats button:not(.on):not(.danger), .ztask-toolbar, .ztask-table, .ztask-actions button, .ztask-search, .ztask-filterset select, .ztask-person:not(.active), .ztask-empty button, .ztask-people-search, .ztask-people-list, .ztask-part-btn, .ztask-at-menu){ background: var(--surface); } html.ui-2026 body:not(#dn26) .ztask-hero{ box-shadow: var(--dn-shadow-1); } html.ui-2026 body:not(#dn26) :is(.ztask-stats button.on, .ztask-person.active){ background: var(--brand-tint); } /* ui.css's dark fills (#171a1f) outlasted the selected state */ html.ui-2026 body:not(#dn26) .ztask-stats button.danger:not(.on){ border-color: var(--danger-line); background: var(--danger-tint); } html.ui-2026 body:not(#dn26) .ztask-stats button.danger b{ color: var(--danger-text); } html.ui-2026 body:not(#dn26) .ztask-table-head{ background: var(--surface-2); color: var(--ink-3); font-size: var(--dn-fs-12); font-weight: 600; letter-spacing: .01em; text-transform: none; } html.ui-2026 body:not(#dn26) .ztask-row{ border-color: var(--border); } html.ui-2026 body:not(#dn26) .ztask-row:hover{ background: var(--surface-2); } html.ui-2026 body:not(#dn26) :is(.ztask-owner span:last-child, .ztask-due, .ztask-actions button){ color: var(--ink-3); } html.ui-2026 body:not(#dn26) .ztask-avatar{ background: var(--brand-tint); color: var(--brand-text); } html.ui-2026 body:not(#dn26) .ztask-form label > span{ color: var(--ink-3); font-size: var(--dn-fs-12); font-weight: 500; } html.ui-2026 body:not(#dn26) .ztask-form :is(input, textarea, select){ background-color: var(--surface); color: var(--ink); } html.ui-2026 body:not(#dn26) .ztask-form-note{ background: var(--brand-tint); color: var(--brand-text); font-size: var(--dn-fs-12); } /* the dialog's "Create task" read white on #5cae83 in the dark theme (2.68:1) */ html.ui-2026 body:not(#dn26) #small-modal .ztask-modal-footer .primary{ background: var(--brand); border-color: var(--brand); color: var(--on-brand); } /* Users & Access: the profile / status chips were fixed pastels at 10px/800 */ html.ui-2026 body:not(#dn26) :is(.ac-chip, .ac-status){ font-size: var(--dn-fs-12); font-weight: 600; } html.ui-2026 body:not(#dn26) :is(.ac-chip.profile, .ac-status.active){ background: var(--brand-tint); color: var(--brand-text); } html.ui-2026 body:not(#dn26) .ac-status.inactive{ background: var(--danger-tint); color: var(--danger-text); } html.ui-2026 body:not(#dn26) .ac-status.pending{ background: var(--warn-tint); color: var(--warn-text); } html.ui-2026 body:not(#dn26) .ac-avatar{ background: var(--brand-tint); color: var(--brand-text); } html.ui-2026 body:not(#dn26) .ac-tabs button.active{ color: var(--ink); border-bottom-color: var(--brand); } /* Profile: the verified / pending mark (9px pastels) */ html.ui-2026 body:not(#dn26) :is(.settings-profile-verified, .settings-profile-pending){ font-size: var(--dn-fs-12); font-weight: 600; } html.ui-2026 body:not(#dn26) .settings-profile-verified{ background: var(--brand-tint); color: var(--brand-text); } html.ui-2026 body:not(#dn26) .settings-profile-pending{ background: var(--warn-tint); color: var(--warn-text); } /* Settings › Connections: the Telegram bot form's rule */ html.ui-2026 body:not(#dn26) .tg-bot-form{ border-top-color: var(--border); } /* Dashboard: the task check and an overdue task's priority (rose #fb7185 / #fff1f2 / #be123c in both themes; the dark theme's zinc #29292d / #a1a1aa for the others) */ html.ui-2026 body:not(#dn26) .dc-task-check{ border-color: var(--dn-control-edge); background: var(--surface); } html.ui-2026 body:not(#dn26) .dc-task-list button.overdue .dc-task-check{ border-color: var(--danger); background: var(--danger-tint); } html.ui-2026 body:not(#dn26) #page-dashboard :is(.dc-task-list, .dc-focus-list) em{ background: var(--surface-2); color: var(--ink-3); } html.ui-2026 body:not(#dn26) #page-dashboard .dc-task-list button.overdue em{ background: var(--danger-tint); color: var(--danger-text); } /* Contacts panel: the Edit button (mint #edf8f5 with a cool edge) is a secondary button; the rows' rules */ html.ui-2026 body:not(#dn26) .own-panel-edit-btn{ border-color: var(--dn-line-strong); background: var(--surface); color: var(--ink); } html.ui-2026 body:not(#dn26) .own-panel-edit-btn:hover{ background: var(--dn-btn-hover); } html.ui-2026 body:not(#dn26) .own-detail{ border-top-color: var(--border); } /* the property record's switches: the on track was an off-palette #067647, the thumb a fixed white */ html.ui-2026 .prp-switch.is-on .prp-switch-track{ background: var(--brand); } html.ui-2026 .prp-switch-thumb{ background: var(--surface); } html.ui-2026 .prp-switch.is-on .prp-switch-thumb{ background: var(--on-brand); } /* ---- 18i. Search boxes built as a bordered label around an input (review A-16): Tasks and the New task people picker (.ztask-search, .ztask-people-search), Contacts, Useful Links, Transactions, Users & Access. ui.css draws a border on every input with !important and §3 paints it, so the field showed a box inside a box, its text touching the inner edge. The wrapper is the field (the §3 recipe: 36px / 44px touch, 10px, --dn-line-strong, brand and the ring on focus); the input inside it is bare. These are the r300 search-on-Enter boxes (data-sq): only paint changes. ---- */ html.ui-2026 body:not(#dn26) :is(.ztask-search, .ztask-people-search, .own-search-wrap, .ul-search-wrap, .txn-search-wrap, .ac-search){ box-sizing: border-box; min-height: var(--dn-control-h); height: var(--dn-control-h); border: 1px solid var(--dn-line-strong); border-radius: var(--dn-r-md); background: var(--surface); color: var(--ink-3); box-shadow: none; transition: border-color var(--dn-dur-1), box-shadow var(--dn-dur-1); } html.ui-2026 body:not(#dn26) :is(.ztask-search, .ztask-people-search, .own-search-wrap, .ul-search-wrap, .txn-search-wrap, .ac-search):hover:not(:focus-within){ border-color: color-mix(in srgb, var(--ink) 28%, var(--border)); } html.ui-2026 body:not(#dn26) :is(.ztask-search, .ztask-people-search, .own-search-wrap, .ul-search-wrap, .txn-search-wrap, .ac-search):focus-within{ border-color: var(--brand); box-shadow: var(--dn-ring); } html.ui-2026 body:is(.light, .dark):not(#dn26) :is(.ztask-search, .ztask-people-search, .own-search-wrap, .ul-search-wrap, .txn-search-wrap, .ac-search) input:not([type="checkbox"]):not([type="radio"]){ min-height: 0; height: 100%; padding-block: 0; padding-inline: 0; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important; outline: 0; font-size: var(--dn-fs-14); color: var(--ink); } /* ---- 18j. One control size on the desktop (review A-17): the recipe set only the radius, so fields ran 36–44px tall at 11.5–13px from page to page (Leads 38/12, Properties 38/12.5, Contacts 39–42/12, Settings 42/13, the New client / New task dialogs 41–44/13). At ≥901px every text field and select is the design system's 36px / 14px control (text areas keep their height; the phone keeps the classic 44px / 16px). Left alone: the bare inputs inside the search boxes of §18i, the palette (its own rule) and the login card. ---- */ @media (min-width: 901px){ html.ui-2026 body:not(#dn26) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]), select:not([multiple]):not([size])):not(:is(.ztask-search, .ztask-people-search, .own-search-wrap, .ul-search-wrap, .txn-search-wrap, .ac-search) *):not(#login-screen *){ box-sizing: border-box; height: var(--dn-control-h); min-height: var(--dn-control-h); padding-block: 0; font-size: var(--dn-fs-14); } } /* ---- 18k. One button scale (review A-18): the page-level buttons that are not .btn came in a dozen sizes (the create buttons alone 30–44px at 11–13px, 700–800, pills and squares) and two off-palette fills (Settings' Save in grey #787d85 at 4.14:1, Telegram's #229ed9 at 3.02:1). They take the §2 geometry: 36px (44px on touch), 14px inline, 14px/500, 10px corners. Nothing here sets `display`. ---- */ html.ui-2026 body:not(#dn26) :is(.crm-add-btn, .ztask-primary, .ac-primary, .own-btn-add, .notes-new-btn, .showResultsBtn, .settings-save-btn, .telegram-connect-primary, .syncUi-btn.primary, .at-hero-checkin, .zcal-action.zcal-primary, .crm-quick-add-btn, .crm-showmore-btn, .zcal-action:not(.zcal-primary), .at-filter-btn, .at-quick-btn, .at-hero-checkout, .syncUi-btn:not(.primary), .crm-reset-btn){ height: var(--dn-control-h); min-height: 0; padding: 0 14px; border-radius: var(--dn-r-md); font-size: var(--dn-fs-14); font-weight: 500; line-height: 1; letter-spacing: 0; box-shadow: none; } /* the brand fill for the page's one primary action (the grey Save, the Telegram blue, the search's gold) */ html.ui-2026 body:not(#dn26) :is(.settings-save-btn, .notes-new-btn, .showResultsBtn){ border: 1px solid var(--brand); background: var(--brand); color: var(--on-brand); } html.ui-2026 body:not(#dn26) :is(.settings-save-btn, .notes-new-btn, .showResultsBtn):hover:not(:disabled){ border-color: var(--brand-hover); background: var(--brand-hover); opacity: 1; filter: none; } html.ui-2026 body:not(#dn26) .telegram-connect-primary{ border: 1px solid var(--brand) !important; background: var(--brand) !important; color: var(--on-brand) !important; box-shadow: none !important; font-size: var(--dn-fs-14) !important; font-weight: 500 !important; } /* ui.css: all !important */ html.ui-2026 body:not(#dn26) .telegram-connect-primary:hover{ border-color: var(--brand-hover) !important; background: var(--brand-hover) !important; } /* the secondary one-offs: the §2 secondary recipe (surface, --dn-line-strong, ink) */ html.ui-2026 body:not(#dn26) :is(.crm-quick-add-btn, .crm-showmore-btn, .zcal-action:not(.zcal-primary):not(.zcal-success), .at-filter-btn){ border: 1px solid var(--dn-line-strong); background: var(--surface); color: var(--ink); } html.ui-2026 body:not(#dn26) :is(.crm-quick-add-btn, .crm-showmore-btn, .zcal-action:not(.zcal-primary):not(.zcal-success), .at-filter-btn):hover{ background: var(--dn-btn-hover); color: var(--ink); } /* icon-only square buttons: the calendar arrows, the record window's small ghost buttons */ html.ui-2026 body:not(#dn26) .zcal-icon-btn{ width: var(--dn-control-h); height: var(--dn-control-h); min-height: 0; padding: 0; border: 1px solid var(--dn-line-strong); border-radius: var(--dn-r-md); background: var(--surface); color: var(--ink-3); } html.ui-2026 body:not(#dn26) .lm-ghost{ min-height: var(--dn-control-h-sm); border-radius: var(--dn-r-sm); font-size: var(--dn-fs-13); font-weight: 500; } html.ui-2026 body:not(#dn26) .ztask-actions button{ border-radius: var(--dn-r-sm); } /* the search assistant's "Apply brief" sits inside its field (absolute, 36px): only its type and corners */ html.ui-2026 body:not(#dn26) #page-search .asst-send{ border-radius: var(--dn-r-sm); font-size: var(--dn-fs-13); font-weight: 500; } /* ---- 18l. Radii on the scale (review A-21): cards and panels 18px (--dn-r-xl), list cards and inner tiles 14px (--dn-r-lg); these ran 12, 13, 15, 16 and 20px. ---- */ html.ui-2026 body:not(#dn26) :is(.dc-status-strip, .dc-attention, .prp-wrap, .ac-content, .zcal-top, .pf-assistant, .dc-admin-center, .settings-pro-context, .ztask-table, .txn-finance-panel){ border-radius: var(--dn-r-xl); } html.ui-2026 body:not(#dn26) :is(.at-mgr-card, .zcal-event-card){ border-radius: var(--dn-r-lg); } /* ---- 18m. Colour and segmented one-offs (review A-22). The Agent Tracker's manager tiles were rainbow pastels (#22c55e, #ef4444, #60a5fa, violet, teal): one surface tile, the value in ink, and the palette's status colours only for the three statuses (working = brand, off duty = danger, late = warn); their 10px label is 13px. The segmented controls outside the recipe (Properties' view toggle, Search's inventory type, the Analytics and Transactions periods, Tasks' My tasks / Team, the Agent Tracker leaderboard) join it in §6 — Analytics' active period was ink on the brand fill (2.69:1). ---- */ html.ui-2026 body:not(#dn26) .at-mgr-card{ border: 1px solid var(--border); background: var(--surface); box-shadow: var(--dn-shadow-1); text-align: start; } html.ui-2026 body.dark:not(#dn26) .at-mgr-card{ box-shadow: none; } html.ui-2026 body:not(#dn26) .at-mgr-card:hover{ box-shadow: var(--dn-shadow-2); } html.ui-2026 body:not(#dn26) .at-mgr-card > strong{ color: var(--ink); font-family: var(--font-body); font-weight: 600; } html.ui-2026 body:not(#dn26) .at-mgc-green > strong{ color: var(--brand-text); } html.ui-2026 body:not(#dn26) .at-mgc-red > strong{ color: var(--danger-text); } html.ui-2026 body:not(#dn26) .at-mgc-gold > strong{ color: var(--warn-text); } html.ui-2026 body:not(#dn26) .at-mgr-card > span{ color: var(--ink-3); font-size: var(--dn-fs-13); font-weight: 500; } /* ---- 18n. The pages' own empty blocks (review A-23; ui-2026.js §2b marks them .dn-empty-block): the design system's empty state — an icon tile, the sentence as a 16px title, the hint, the next step. .is-compact inside cards and side panels. Their own bare icon or emoji tile steps aside for the tile. ---- */ html.ui-2026 body:not(#dn26) .dn-empty-block{ padding: 40px 24px; border: 0; background: transparent; color: var(--ink-3); font-size: var(--dn-fs-14); line-height: 1.5; text-align: center; } html.ui-2026 body:not(#dn26) .dn-empty-block.is-compact{ padding: 24px 16px; } html.ui-2026 body:not(#dn26) .dn-empty-block.is-compact .dn-empty-ico{ width: 44px; height: 44px; margin-bottom: 10px; border-radius: var(--dn-r-lg); } html.ui-2026 body:not(#dn26) .dn-empty-block.is-compact .dn-empty-ico svg{ width: 22px; height: 22px; } html.ui-2026 body:not(#dn26) .dn-empty-block .dn-empty-own{ display: none !important; } /* the icons carry an inline display:inline-block */ html.ui-2026 body:not(#dn26) .dn-empty-block .dn-empty-title{ display: block; margin: 0 0 4px; color: var(--ink); font-size: var(--dn-fs-16); font-weight: 600; line-height: 1.35; } html.ui-2026 body:not(#dn26) .dn-empty-block.is-compact .dn-empty-title{ font-size: var(--dn-fs-14); } html.ui-2026 body:not(#dn26) .dn-empty-block .dn-empty-sub{ display: block; max-width: 44ch; margin: 0 auto; color: var(--ink-3); font-size: var(--dn-fs-14); } html.ui-2026 body:not(#dn26) .dn-empty-block > :is(button, .btn){ margin-top: 16px; } /* small inline "none yet" notes in Settings › WhatsApp: a quiet 13px line, not an 12.5px grey */ html.ui-2026 body:not(#dn26) .wa-empty-note{ color: var(--ink-3); font-size: var(--dn-fs-13); } /* ---- 18o. The 12px floor (review A-20). Outside the shell the classic skins set captions, counts, pills, table heads and hints at 8–11.5px (the dashboard's admin centre 8–11px, Leads / Deals tab counts 10.5 and the record count 11.5, Data's table head 10.5, Transactions 9–11, Analytics 10.5–11, the Settings eyebrows 11…). The design system's floor is 12px (§3.2): each of those lands on 12px (13px where it is running text); caps keep a small tracking and Persian / Arabic none (§1). Weights above 600 come down to 600 (Inter ships 400/500/600 only). ---- */ html.ui-2026 body:not(#dn26) :is( .crm-dl-tab-n, .crm-dl-count, .crm-dl-chip, .crm-deal-progress-label, .ztask-overdue-chip, .ztask-field-label, .ztask-chips-empty, .prp-chip, .prp-chip-n, .prp-count, .prp-owner, .prp-deal, .prp-zoho-sync, .deal-assign-counts, .srch-pub, .srch-src, .srch-uni-src, .srch-srcsel-lbl, #srch-count-lbl, #srch-ai-state, .dwf-chip, #data-content th, .dt-pill, .dt-count, .ul-count, .ul-chip, .ul-table th, .txn-list-count, .txn-prop-code, .txn-pct-badge, .txn-stat-lbl, #txn-finance-employee-count, #txn-salary-history-label, .an-card-note, .an-metric-lbl, .an-card-title, .an-src-rank, .an-src-pct, .an-legend-lbl, .an-legend-val, .an-updated, .agl-caption-n, .agl-card-time, .agl-caption, .tls-cat, .hlp-quick-label, .hlp-accordion-pill, .lang-card-note, .wa-pill, .wa-check-state, .wa-hook-k, .zcal-subtitle, .zcal-week-head, .zcal-week-no, .zcal-head-cell, .zcal-event-pill, .tch-chat-head-status, .dc-source-rank, .dc-source-name, .settings-pro-eyebrow, .settings-profile-kicker, .ac-agent-code, .conn-section-label, .lm-stage, #page-dashboard .dc-task-list em, .dc-admin-center > header small, .dc-admin-center > header > span, .dc-admin-action-grid strong, .dc-admin-action-grid small, .dc-admin-action-grid em, .at-section-title, .at-eyebrow, .dsw-head, .dsw-count){ font-size: var(--dn-fs-12); } html.ui-2026 body:not(#dn26) :is( .dc-team-row :is(span, strong, button, em, small), .dc-team-table > .dc-team-row > span, .dc-source-row > strong, .dc-chart-legend span, .dc-chart-legend .dc-num-btn strong, .dc-donut .dc-num-btn span, .dc-task-list button > span > :is(strong, small), .dc-focus-list button > span > :is(strong, small), .dc-panel-head > button, .dc-events-tools > button, .dc-attention header small, .dc-attention button > :is(span, i), .settings-card-heading small, .settings-profile-form > label > :is(span, small), .settings-access-grid > div > span, .settings-profile-badges span, .settings-reminder-toggle small, .ac-user small, .settings-pro-context small, .lm-stat > .l, .crm-ll-foot span, .crm-ll-foot b, .prp-foot-page){ font-size: var(--dn-fs-12); } html.ui-2026 body:not(#dn26) :is( .dc-scoring-note, .lm-stage-hint, .lm-sub, .lm-empty, .notes-privacy-hint, .conn-row-desc, .wa-field-hint, .at-rpt-hint, .asst-hint, .srch-uni-sub, .srch-uni-facts, .dmhh-sub, .tch-conv-sub, .tls-card-en, .lang-card-sub, .zcal-event-meta, .zcal-date-num, .dgl-kpi-sub){ font-size: var(--dn-fs-13); } html.ui-2026 body:not(#dn26) :is(#data-content th, .ul-table th, .dc-admin-center > header small, .settings-pro-eyebrow, .at-section-title, .dsw-head){ font-weight: 600; letter-spacing: var(--dn-tracking-caps); } html.ui-2026 body:not(#dn26) :is(.dc-admin-action-grid strong, .crm-dl-tab-n, .prp-chip-n, .dt-pill, .ul-chip, .txn-pct-badge, .wa-pill){ font-weight: 600; } /* ---- 18p. Page-level contrast left over (review A-24). The Learning Center's own tokens (a stone #A8A29E / #6E6E6E "text3" at 2.3–3.3:1, a #141414 dark well), the Help page's shortcut keys (ink on the dark #24252f key: 1.16:1) and Search's PDF count (#1a1a1a on the brand fill: 2.66:1) read the palette. ---- */ html.ui-2026 body:is(.light, .dark) :is(#page-learn, #page-course, #page-quiz, #page-kb){ --text3: var(--ink-3); --bg2: var(--surface); } html.ui-2026 body:not(#dn26) #page-help .hlp-kbd-row kbd{ padding: 2px 7px; border: 1px solid var(--dn-line-strong); border-bottom-width: 2px; border-radius: 6px; background: var(--surface); color: var(--ink); font: 500 var(--dn-fs-12)/1.4 var(--font-body); } html.ui-2026 body:not(#dn26) #srch-pdf-n{ background: var(--brand); color: var(--on-brand); } /* ---- 18q. The rest of the legacy colours the re-run of review A's audit still found (A-2 / A-3 / A-24 family). ---- */ /* dialogs are #262626 in the dark theme (ui.css: body.dark .modal{background:#262626!important}) */ html.ui-2026 body.dark .modal{ background: var(--surface) !important; } @media (max-width: 900px){ /* the phone's floating close buttons (record window, Contacts, transaction detail…) were white with #111 in both themes (ui.css, !important) */ html.ui-2026 body:not(#dn26) :is(#prop-detail-modal .lm-close, .lead-modal .lm-close, .own-panel-close, .own-modal-close, .txn-modal-close, .hrp-close, .dev-panel-close){ border-color: var(--border) !important; border-radius: var(--dn-r-md) !important; background: var(--surface) !important; color: var(--ink) !important; box-shadow: var(--dn-shadow-2); } /* the More sheet's language switch: the segment recipe (an inverted ink pill before), 44px targets */ html.ui-2026 body:not(#dn26) .mbn-seg > .mbn-seg-btn{ min-height: 44px; } } html.ui-2026 body:not(#dn26) .mbn-seg{ padding: 3px; border-radius: var(--dn-r-full); background: var(--surface-2); } html.ui-2026 body:not(#dn26) .mbn-seg > .mbn-seg-btn{ border-radius: var(--dn-r-full); color: var(--ink-3); font-weight: 500; } html.ui-2026 body:not(#dn26) .mbn-seg > .mbn-seg-btn.is-on{ background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--dn-shadow-1), 0 0 0 1px var(--border); } /* text on the dark theme's brand fill is --on-brand, not white (4.02:1): Contacts' New, the record's WhatsApp */ html.ui-2026 body.dark:not(#dn26) :is(.own-btn-add, .lm-wa){ color: var(--on-brand) !important; } /* status chips and pills */ html.ui-2026 body:not(#dn26) .ztask-overdue-chip{ background: var(--danger-tint); color: var(--danger-text); } html.ui-2026 body:not(#dn26) #page-data .dt-pill{ color: var(--ink-3); } html.ui-2026 body:not(#dn26) #page-data .dt-pill:is(.is-owner){ background: var(--warn-tint); color: var(--warn-text); } html.ui-2026 body:not(#dn26) #page-data .dt-pill:is(.is-contacted, .is-fulfill, .is-convertible){ background: var(--brand-tint); color: var(--brand-text); } html.ui-2026 body:not(#dn26) .txn-pct-badge{ color: var(--brand-text); } html.ui-2026 body:not(#dn26) .settings-access-grid strong.is-active{ color: var(--brand-text); } html.ui-2026 body:not(#dn26) .prp-toggle-state{ background: var(--surface-2); color: var(--ink-3); } html.ui-2026 body:not(#dn26) .prp-toggle-state.is-on{ background: var(--brand-tint); color: var(--brand-text); } /* WhatsApp / call actions: the palette's brand, not WhatsApp's own #128c7e / #157a43 */ html.ui-2026 body:not(#dn26) :is(.dt-act-wa, .dt-act-tel, .lm-mbar-btn.wa){ background: var(--brand-tint); color: var(--brand-text); } /* active tabs that ui.css paints with --primary text on its tint (dark: #2f8f61 on #172a20, 3.76:1) */ html.ui-2026 body:not(#dn26) :is(.anl-tab-active, .mch-tab-active){ color: var(--brand-text) !important; } /* secondary text in cool greys: Contacts' rows and cards, the task list's priority line, Transactions' ledger totals, the profile's badges and Telegram help, the settings eyebrows, the New task dialog's field label */ html.ui-2026 body:not(#dn26) :is(.own-person small, .own-row td small, .own-card-info small, .own-budget, .own-card-sub, .own-card-pref, .own-card-contact, .ztask-title-cell small, .ztask-field-label, .settings-pro-eyebrow, .settings-profile-badges span, .settings-card-icon, .tg-card p, .howto-steps li){ color: var(--ink-3); } html.ui-2026 body:not(#dn26) :is(.txn-finance-credit strong, .txn-finance-net strong){ color: var(--ink); } html.ui-2026 body:not(#dn26) .txn-finance-deduction strong{ color: var(--danger-text); } /* the Learning hub's tabs: near-white text (rgba(255,255,255,.55)) on the light canvas outside the phone rules */ html.ui-2026 body:not(#dn26) .lhub-tab{ color: var(--ink-3); } html.ui-2026 body:not(#dn26) .lhub-tab:hover{ color: var(--ink); } html.ui-2026 body:not(#dn26) .lhub-tab.active{ color: var(--ink); border-bottom-color: var(--brand); font-weight: 600; } html.ui-2026 body:not(#dn26) .lhub-tabs{ border-bottom-color: var(--border); } /* (second pass) the Contacts panel's cool-grey labels and values, the lead cards' WhatsApp button in the dark theme, the profile's grey avatar and kicker, Data's avatar initials */ html.ui-2026 body:not(#dn26) :is(.own-panel-source, .own-panel-notes, .own-panel-kpis > div > span, .own-detail > span:first-child){ color: var(--ink-3); } html.ui-2026 body:not(#dn26) .own-panel-kpis > div > b{ color: var(--ink); } html.ui-2026 body.dark:not(#dn26) .crm-lc-btn.wa{ color: var(--on-brand); } html.ui-2026 body:not(#dn26) .settings-profile-avatar{ background: var(--brand-tint); color: var(--brand-text); } html.ui-2026 body:not(#dn26) .settings-profile-kicker{ color: var(--ink-3); } html.ui-2026 body:not(#dn26) .dt-avatar{ color: var(--brand-text); } html.ui-2026 body.dark:not(#dn26) :is(#small-modal-body, #modal-body){ background: var(--surface) !important; } /* ui.css: #262626 !important */ /* the More sheet's profile initials: white on the inline var(--gold) (the dark brand text, 2.68:1) */ html.ui-2026 body:not(#dn26) #small-modal.mbn-menu-mode button[onclick*="showPage('profile')"] > span[style*="border-radius:50%"]{ background: var(--brand-tint) !important; color: var(--brand-text) !important; } /* Settings › AI's inline code in the dark theme: --ink-4 on a legacy #323736 well (4.49:1) */ html.ui-2026 body.dark:not(#dn26) #page-settings code{ background: var(--surface-2); color: var(--ink-3); }