/* ==========================================================================================
   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 <html> would freeze the light
     values.
   * Direction comes from <html dir>: 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); }

/* ==========================================================================================
   19. Record side-drawers (wave 2, 2026-09-29)
   ------------------------------------------------------------------------------------------
   ui-2026-drawer.js puts .dn-drawer on the CRM's own record windows while they are open —
   #lead-modal-overlay (Lead + Deal), #prop-modal-overlay (Property), #own-panel-overlay (Contact) —
   and .dn-drawer-full when the person chose "Open full page" (the record window exactly as before).
   Nothing is re-rendered: the drawer is the same DOM, so every field, gate, save path and dialog
   inside is the CRM's own. Only at ≥ 1100px: phones and tablets keep today's record window.
   * Width: two sizes, --dn-drawer-w (580px, or 720px with html.dn-drawer-wide, the person's
     choice, remembered in this browser); never wider than the viewport less 340px of list.
   * The list stays visible: a light scrim, no blur. A click on it closes the drawer (the
     overlays' own click-to-close). Inside, the record's two columns stack into one.
   * The drawer sits at the inline END: right in English, left in Persian / Arabic (the
     overlays already justify by <html dir>; nothing here declares a direction).
   * No layout shift: nothing on the page moves when a record opens (the list keeps its place and
     its scroll); only the drawer's own body scrolls, with overscroll contained.
   ========================================================================================== */
html.ui-2026 body{
  --dn-drawer-w: 580px;
  --dn-drawer-scrim: color-mix(in srgb, var(--dn-scrim) 42%, transparent);
}
html.ui-2026.dn-drawer-wide body{ --dn-drawer-w: 720px; }

/* the drawer's own controls: hidden wherever the drawer is not in use (phones, tablets) */
html.ui-2026 :is(.dn-drawer-tools, .dn-drawer-nav, .dn-drawer-chip, .dn-drawer-break){ display: none; }

@media (min-width: 1100px){
  /* ---- 19a. The scrim and the panel ---- */
  html.ui-2026 body:not(#dn26) :is(#lead-modal-overlay, #prop-modal-overlay, #own-panel-overlay).dn-drawer:not(.dn-drawer-full){
    background: var(--dn-drawer-scrim) !important;          /* ui.css: #prop-modal-overlay{background:…!important} */
    backdrop-filter: none !important;                        /* ui.css: [class$="-overlay"]{backdrop-filter:blur(3px)} + !important on #prop-… */
    -webkit-backdrop-filter: none !important;
    perspective: none !important;
    animation: none !important;                              /* ui.css: enterpriseOverlayIn … !important */
  }
  html.ui-2026 body:not(#dn26) :is(#lead-modal-overlay, #prop-modal-overlay, #own-panel-overlay).dn-drawer:not(.dn-drawer-full) > :is(#lead-modal, #prop-detail-modal, #own-panel){
    width: min(var(--dn-drawer-w), calc(100vw - 340px)) !important;   /* ui.css: #prop-detail-modal{width:min(80vw,1280px)!important} */
    max-width: none;
    height: 100vh;
    height: 100dvh;
    border: 0 !important;                                    /* ui.css: .lead-modal{border:1px solid …!important} */
    border-inline-start: 1px solid var(--border) !important;
    border-radius: 0 !important;
    box-shadow: var(--dn-shadow-4) !important;
    background: var(--surface) !important;
    transform: none !important;
    transform-origin: center !important;
    will-change: auto;
    animation: dnDrawerIn var(--dn-dur-3, .24s) cubic-bezier(.2, .8, .2, 1) both !important;   /* ui.css: enterprisePageOpen / lmDoorOpen … !important */
    outline: none;
    overscroll-behavior: contain;
  }
  html.ui-2026[dir="rtl"] body:not(#dn26) :is(#lead-modal-overlay, #prop-modal-overlay, #own-panel-overlay).dn-drawer:not(.dn-drawer-full) > :is(#lead-modal, #prop-detail-modal, #own-panel){
    animation-name: dnDrawerInRtl !important;
  }
  @keyframes dnDrawerIn{ from{ transform: translateX(28px); opacity: 0; } to{ transform: none; opacity: 1; } }
  @keyframes dnDrawerInRtl{ from{ transform: translateX(-28px); opacity: 0; } to{ transform: none; opacity: 1; } }

  /* ---- 19b. Lead, Deal and Property inside the drawer: one column, a two-row header ---- */
  html.ui-2026 body:not(#dn26) .dn-drawer:not(.dn-drawer-full) :is(#lead-modal, #prop-detail-modal) .lm-body{ grid-template-columns: minmax(0, 1fr) !important; grid-auto-rows: max-content; align-content: start; }   /* stacked, each column its own height (a stretched row cut the Property's details under its side column) */
  html.ui-2026 body:not(#dn26) .dn-drawer:not(.dn-drawer-full) :is(#lead-modal, #prop-detail-modal) .lm-main{ border-inline-end: 0; border-bottom: 1px solid var(--lm-border); }
  html.ui-2026 body:not(#dn26) .dn-drawer:not(.dn-drawer-full) :is(#lead-modal, #prop-detail-modal) .lm-col{ padding: 18px 20px; }
  html.ui-2026 body:not(#dn26) .dn-drawer:not(.dn-drawer-full) :is(#lead-modal, #prop-detail-modal) .lm-header{
    flex-wrap: wrap;
    row-gap: 10px;
    column-gap: 8px;
    padding: 12px 16px 12px 16px;
  }
  /* row 1: ‹ › · avatar · title · the drawer's tools · close; row 2: status chip and the record's actions */
  html.ui-2026 body:not(#dn26) .dn-drawer:not(.dn-drawer-full) :is(#lead-modal, #prop-detail-modal) .lm-header > *{ order: 3; }
  html.ui-2026 body:not(#dn26) .dn-drawer:not(.dn-drawer-full) :is(#lead-modal, #prop-detail-modal) .lm-header > :is(.lm-nav, .lm-avatar, .lm-title){ order: 0; }
  html.ui-2026 body:not(#dn26) .dn-drawer:not(.dn-drawer-full) :is(#lead-modal, #prop-detail-modal) .lm-header > :is(.dn-drawer-tools, .lm-close){ order: 1; }
  html.ui-2026 body:not(#dn26) .dn-drawer:not(.dn-drawer-full) :is(#lead-modal, #prop-detail-modal) .lm-header > .dn-drawer-break{ order: 2; display: block; flex: 0 0 100%; height: 0; }
  html.ui-2026 body:not(#dn26) .dn-drawer:not(.dn-drawer-full) :is(#lead-modal, #prop-detail-modal) .lm-avatar{ width: 40px; height: 40px; font-size: 14px; }
  html.ui-2026 body:not(#dn26) .dn-drawer:not(.dn-drawer-full) :is(#lead-modal, #prop-detail-modal) .lm-title{ flex: 1 1 0; }
  html.ui-2026 body:not(#dn26) .dn-drawer:not(.dn-drawer-full) :is(#lead-modal, #prop-detail-modal) .lm-title h2{ font-size: var(--dn-fs-16); }
  /* the stats strip: two by two in the narrow drawer */
  html.ui-2026:not(.dn-drawer-wide) body:not(#dn26) .dn-drawer:not(.dn-drawer-full) :is(#lead-modal, #prop-detail-modal) .lm-stats{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.ui-2026:not(.dn-drawer-wide) body:not(#dn26) .dn-drawer:not(.dn-drawer-full) :is(#lead-modal, #prop-detail-modal) .lm-stat:nth-child(n+3){ border-top: 1px solid var(--lm-border); }
  html.ui-2026:not(.dn-drawer-wide) body:not(#dn26) .dn-drawer:not(.dn-drawer-full) :is(#lead-modal, #prop-detail-modal) .lm-stat:nth-child(3){ border-inline-start: 0; }

  /* ---- 19c. Contact inside the drawer ---- */
  html.ui-2026 body:not(#dn26) #own-panel-overlay.dn-drawer:not(.dn-drawer-full) .own-panel-hdr{ gap: 10px; padding: 12px 16px; min-height: 72px; }
  html.ui-2026 body:not(#dn26) #own-panel-overlay.dn-drawer:not(.dn-drawer-full) .own-panel-hdr > .dn-drawer-nav{ order: -2; }
  html.ui-2026 body:not(#dn26) #own-panel-overlay.dn-drawer:not(.dn-drawer-full) .own-panel-hdr > :is(.own-panel-avatar, .own-panel-identity, .dn-drawer-chip){ order: 0; }
  html.ui-2026 body:not(#dn26) #own-panel-overlay.dn-drawer:not(.dn-drawer-full) .own-panel-hdr > .own-panel-identity{ flex: 1 1 0; min-width: 0; }
  html.ui-2026 body:not(#dn26) #own-panel-overlay.dn-drawer:not(.dn-drawer-full) .own-panel-hdr > .own-panel-edit-btn{ order: 1; }
  html.ui-2026 body:not(#dn26) #own-panel-overlay.dn-drawer:not(.dn-drawer-full) .own-panel-hdr > .dn-drawer-tools{ order: 2; }
  html.ui-2026 body:not(#dn26) #own-panel-overlay.dn-drawer:not(.dn-drawer-full) .own-panel-hdr > .own-panel-close{ order: 3; }
  html.ui-2026 body:not(#dn26) #own-panel-overlay.dn-drawer:not(.dn-drawer-full) .own-panel-avatar{ width: 40px; height: 40px; }
  html.ui-2026 body:not(#dn26) #own-panel-overlay.dn-drawer:not(.dn-drawer-full) .own-panel-source{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.ui-2026 body:not(#dn26) #own-panel-overlay.dn-drawer:not(.dn-drawer-full) .own-panel-name{ font-size: var(--dn-fs-16); overflow-wrap: anywhere; }
  html.ui-2026 body:not(#dn26) #own-panel-overlay.dn-drawer:not(.dn-drawer-full) :is(.own-panel-kpis, .own-detail-grid){ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.ui-2026 body:not(#dn26) #own-panel-overlay.dn-drawer:not(.dn-drawer-full) .dn-drawer-nav{ display: inline-flex; align-items: center; gap: 6px; flex: none; }
  html.ui-2026 body:not(#dn26) #own-panel-overlay.dn-drawer:not(.dn-drawer-full) .dn-drawer-chip:not([hidden]){
    display: inline-flex; align-items: center; flex: none; max-width: 30%;
    padding: 4px 10px; border-radius: var(--dn-r-full);
    background: var(--brand-tint); color: var(--brand-text);
    font-size: var(--dn-fs-12); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* ---- 19d. The drawer's controls (tools in every record window; they stay in "full page" to come back) ---- */
  html.ui-2026 body:not(#dn26) .dn-drawer .dn-drawer-tools{ display: inline-flex; align-items: center; gap: 6px; flex: none; }
  html.ui-2026 body:not(#dn26) .dn-drawer.dn-drawer-full .dn-drawer-width{ display: none; }
  html.ui-2026 body:not(#dn26) .dn-drawer .dn-drawer-btn{
    display: inline-grid; place-items: center; flex: none;
    width: 36px; height: 36px; padding: 0;
    border: 1px solid var(--border); border-radius: var(--dn-r-full);
    background: var(--surface); color: var(--ink-3);
    cursor: pointer; font: inherit;
  }
  html.ui-2026 body:not(#dn26) .dn-drawer .dn-drawer-btn:hover:not(:disabled){ background: var(--dn-btn-hover); color: var(--ink); border-color: var(--dn-line-strong); }
  html.ui-2026 body:not(#dn26) .dn-drawer .dn-drawer-btn:disabled{ opacity: .4; cursor: default; }
  html.ui-2026 body:not(#dn26) .dn-drawer .dn-drawer-btn:focus-visible{ outline: 2px solid var(--brand); outline-offset: 2px; }
  html.ui-2026 body:not(#dn26) .dn-drawer .dn-drawer-btn svg{ display: block; }
  html.ui-2026[dir="rtl"] body:not(#dn26) .dn-drawer .dn-drawer-nav .dn-drawer-btn svg{ transform: scaleX(-1); }   /* ‹ › point the reading way */
  html.ui-2026 body:not(#dn26) .dn-drawer .dn-drawer-pos{ font-size: var(--dn-fs-12); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
  html.ui-2026 body:not(#dn26) .dn-drawer:not(.dn-drawer-full) :is(#lead-modal, #prop-detail-modal, #own-panel):focus{ outline: none; }
}

@media (min-width: 1100px) and (prefers-reduced-motion: reduce){
  html.ui-2026 body:not(#dn26) :is(#lead-modal-overlay, #prop-modal-overlay, #own-panel-overlay).dn-drawer > :is(#lead-modal, #prop-detail-modal, #own-panel){ animation: none !important; }
}

/* ==========================================================================================
   20. Data grids (wave 3, 2026-09-30)
   ------------------------------------------------------------------------------------------
   ui-2026-grid.js decorates the seven list tables after the CRM's own renderers paint them —
   Leads / Deals (.crm-ll-table), Properties (.prp-table), Contacts (.own-table), Data
   (.dt-table), Tasks (.ztask-table, a CSS grid of articles) and Work Center Projects (.wc-card
   rows under a synthetic .dn-grid-head). Nothing is re-rendered: the classes below sit on the
   CRM's own elements (.dn-grid on the table, .dn-grid-wrap on the element that scrolls,
   .dn-col-check / .dn-col-primary / .dn-col-hidden / .dn-col-sized on head and body cells,
   .dn-grid-row on rows) and the JS sets --dn-grid-top (where the wrap sits), --dn-grid-check-w
   (the checkbox column's width, the primary column's sticky offset) and --dn-tcols (the two
   grid lists' column template) as inline custom properties.
   * The wrap scrolls inside the viewport (max-height from --dn-grid-top), so the header row and
     the first column stick; the table's own footer sticks to the wrap's bottom.
   * Density: html.dn-grid-compact (40px rows, 13px, secondary lines hidden, 24px avatars).
   * Sort buttons and drag handles live inside the header cells; the Columns menu is a popover
     under the toolbar's own button. Everything is tokens; nothing declares a direction — the
     sticky column is at the inline start, the handle at the inline end.
   Only at ≥ 1100px: phones and tablets keep today's cards, and the toolbar is not shown.
   ========================================================================================== */
html.ui-2026 :is(.dn-grid-bar, .dn-grid-menu, .dn-grid-skeleton, .dn-grid-head, .dn-grid-resize, .dn-grid-sortic){ display: none; }
html.ui-2026 .dn-grid-sortbtn{ all: unset; font: inherit; color: inherit; cursor: pointer; }

@media (min-width: 1100px){
  /* ---- 20a. The scroll region ---- */
  html.ui-2026 body:not(#dn26) .dn-grid-wrap{
    position: relative;
    overflow: auto !important;                       /* ui.css: .prp-wrap{overflow:hidden}, #page-deals .crm-ll-wrap{overflow:auto} */
    max-height: max(320px, calc(100vh - var(--dn-grid-top, 220px) - var(--dn-grid-below, 0px) - 24px));
    max-height: max(320px, calc(100dvh - var(--dn-grid-top, 220px) - var(--dn-grid-below, 0px) - 24px));
    overscroll-behavior: contain;
    border-radius: var(--dn-r-xl);
  }
  html.ui-2026 body:not(#dn26) .dn-grid-wrap.dn-grid-resizing{ user-select: none; cursor: col-resize; }
  html.ui-2026.dn-grid-dragging, html.ui-2026.dn-grid-dragging body{ user-select: none; cursor: col-resize; }
  html.ui-2026 body:not(#dn26) table.dn-grid:focus-visible{ outline: 2px solid var(--focus, var(--brand)); outline-offset: -2px; }
  html.ui-2026 body:not(#dn26) .dn-grid-wrap:focus-visible{ outline: 2px solid var(--focus, var(--brand)); outline-offset: -2px; }

  /* ---- 20b. Sticky head, sticky first column ---- */
  html.ui-2026 body:not(#dn26) table.dn-grid > thead > tr > th{ position: sticky; top: 0; z-index: 3; }
  html.ui-2026 body:not(#dn26) table.dn-grid > thead > tr > th.dn-col{ overflow: visible; }
  html.ui-2026 body:not(#dn26) table.dn-grid :is(th, td).dn-col-check{ position: sticky; inset-inline-start: 0; z-index: 2; }
  html.ui-2026 body:not(#dn26) table.dn-grid :is(th, td).dn-col-primary{ position: sticky; inset-inline-start: var(--dn-grid-check-w, 0px); z-index: 2; }
  html.ui-2026 body:not(#dn26) table.dn-grid > thead > tr > :is(th.dn-col-check, th.dn-col-primary){ z-index: 4; }
  /* a sticky cell paints over the cells sliding under it: an opaque ground of its own (hover and
     selection from §5 repaint every td with !important, so the frozen pair follows its row) */
  html.ui-2026 body:is(.light, .dark):not(#dn26) table.dn-grid > tbody > tr > :is(td.dn-col-check, td.dn-col-primary){ background: var(--surface) !important; }
  html.ui-2026 body:is(.light, .dark):not(#dn26) table.dn-grid > tbody > tr:hover > :is(td.dn-col-check, td.dn-col-primary){ background: var(--surface-2) !important; }
  html.ui-2026 body:is(.light, .dark):not(#dn26) table.dn-grid > tbody > tr:is(.is-sel, .selected, .is-selected, [aria-selected="true"]) > :is(td.dn-col-check, td.dn-col-primary){ background: var(--brand-tint) !important; }
  html.ui-2026 body:is(.light, .dark):not(#dn26) table.dn-grid > thead > tr > :is(th.dn-col-check, th.dn-col-primary){ background: var(--surface-2) !important; }
  /* the edge of the frozen column (the Leads / Deals skins draw their own ::after hairline: hidden) */
  html.ui-2026 body:not(#dn26) table.dn-grid :is(th, td).dn-col-primary{ box-shadow: inset -1px 0 0 var(--border); }
  html.ui-2026[dir="rtl"] body:not(#dn26) table.dn-grid :is(th, td).dn-col-primary{ box-shadow: inset 1px 0 0 var(--border); }
  html.ui-2026 body:not(#dn26) table.dn-grid :is(th, td):nth-child(2)::after{ display: none; }
  /* the table's own footer sticks to the bottom of the region */
  html.ui-2026 body:not(#dn26) .dn-grid-wrap > :is(.crm-ll-foot, .prp-foot){ position: sticky; bottom: 0; z-index: 3; background: var(--surface); border-top: 1px solid var(--border); }

  /* ---- 20c. Rows: hover, selection, focus ring, numbers ---- */
  html.ui-2026 body:not(#dn26) .dn-grid-row{ outline: 0; }
  html.ui-2026 body:is(.light, .dark):not(#dn26) table.dn-grid > tbody > tr.dn-grid-row:focus-visible > td{ background: color-mix(in srgb, var(--brand) 9%, var(--surface)) !important; }
  html.ui-2026 body:not(#dn26) table.dn-grid > tbody > tr.dn-grid-row:focus-visible > td:first-child{ box-shadow: inset 3px 0 0 var(--brand); }
  html.ui-2026[dir="rtl"] body:not(#dn26) table.dn-grid > tbody > tr.dn-grid-row:focus-visible > td:first-child{ box-shadow: inset -3px 0 0 var(--brand); }
  html.ui-2026 body:not(#dn26) table.dn-grid > tbody > tr > td.dn-col-sized{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.ui-2026 body:not(#dn26) table.dn-grid > tbody > tr > td.dn-col-sized > *{ max-width: 100%; }
  html.ui-2026 body:not(#dn26) table.dn-grid :is(th, td).num{ text-align: end; font-variant-numeric: tabular-nums; }
  html.ui-2026 body:not(#dn26) table.dn-grid :is(th, td).dn-col-hidden,
  html.ui-2026 body:not(#dn26) .dn-grid .dn-col-hidden{ display: none !important; }   /* the classic renderers never set display on a cell; the hidden attribute (empty columns) agrees */

  /* ---- 20d. Head cells: sort buttons, drag handles ---- */
  html.ui-2026 body:not(#dn26) .dn-grid .dn-col{ position: relative; }
  html.ui-2026 body:not(#dn26) .dn-grid .dn-grid-sortbtn{
    display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
    min-height: 26px; padding: 0 6px; margin-inline-start: -6px; border-radius: var(--dn-r-xs);
    font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; white-space: nowrap;
    transition: background-color var(--dn-dur-1), color var(--dn-dur-1);
  }
  html.ui-2026 body:not(#dn26) .dn-grid .dn-grid-sortbtn:hover{ background: var(--dn-hover); color: var(--ink); }
  html.ui-2026 body:not(#dn26) .dn-grid .dn-grid-sortbtn:focus-visible{ outline: 2px solid var(--focus, var(--brand)); outline-offset: 1px; }
  html.ui-2026 body:not(#dn26) .dn-grid .dn-grid-sortic{ display: none; opacity: .45; flex: 0 0 auto; }   /* the arrows show on hover and on the sorted column */
  html.ui-2026 body:not(#dn26) .dn-grid .dn-col:hover .dn-grid-sortic,
  html.ui-2026 body:not(#dn26) .dn-grid .dn-grid-sortbtn:focus-visible .dn-grid-sortic{ display: inline-flex; }
  html.ui-2026 body:not(#dn26) .dn-grid [aria-sort="ascending"] .dn-grid-sortic,
  html.ui-2026 body:not(#dn26) .dn-grid [aria-sort="descending"] .dn-grid-sortic{ display: inline-flex; opacity: 1; color: var(--brand-text, var(--brand)); }
  html.ui-2026 body:is(.light, .dark):not(#dn26) .dn-grid th[aria-sort="ascending"],
  html.ui-2026 body:is(.light, .dark):not(#dn26) .dn-grid th[aria-sort="descending"]{ color: var(--ink) !important; }   /* §5 paints th colour with !important */
  html.ui-2026 body:not(#dn26) .dn-grid th.dn-sortable:not(:has(.dn-grid-sortbtn)){ display: table-cell; }
  html.ui-2026 body:not(#dn26) .dn-grid th.dn-sortable > .dn-grid-sortic{ vertical-align: middle; margin-inline-start: 4px; }
  html.ui-2026 body:not(#dn26) #page-data .dt-table.dn-grid th .dt-sort{ display: none; }
  html.ui-2026 body:not(#dn26) .dn-grid .dn-grid-resize{
    display: block; position: absolute; top: 0; bottom: 0; inset-inline-end: 0; width: 9px; z-index: 5;   /* inside its own cell: the next sticky cell would cover anything that sticks out */
    cursor: col-resize; touch-action: none; user-select: none;
  }
  html.ui-2026 body:not(#dn26) .dn-grid .dn-grid-resize::after{
    content: ""; position: absolute; top: 8px; bottom: 8px; inset-inline-end: 0; width: 2px; border-radius: 1px;
    background: transparent; transition: background-color var(--dn-dur-1);
  }
  html.ui-2026 body:not(#dn26) .dn-grid .dn-grid-resize:hover::after,
  html.ui-2026 body:not(#dn26) .dn-grid-resizing .dn-grid-resize::after{ background: var(--brand); }

  /* ---- 20e. The toolbar: density + Columns ---- */
  html.ui-2026 body:not(#dn26) .dn-grid-bar{
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
    margin: 0 0 8px; min-height: 30px;
  }
  html.ui-2026 body:not(#dn26) .dn-grid-seg{
    display: inline-flex; align-items: stretch; height: 30px; overflow: hidden;
    border: 1px solid var(--dn-line-strong); border-radius: var(--dn-r-md); background: var(--surface);
  }
  html.ui-2026 body:not(#dn26) :is(.dn-grid-segbtn, .dn-grid-colbtn, .dn-grid-menubtn){
    display: inline-flex; align-items: center; gap: 6px; min-height: 0; height: 28px; padding: 0 10px;
    border: 0; border-radius: 0; background: transparent; color: var(--ink-3);
    font: 500 var(--dn-fs-12)/1 inherit; letter-spacing: 0; cursor: pointer; white-space: nowrap;
    transition: background-color var(--dn-dur-1), color var(--dn-dur-1);
  }
  html.ui-2026 body:not(#dn26) .dn-grid-segbtn + .dn-grid-segbtn{ border-inline-start: 1px solid var(--dn-line); }
  html.ui-2026 body:not(#dn26) :is(.dn-grid-segbtn, .dn-grid-colbtn, .dn-grid-menubtn):hover{ background: var(--dn-hover); color: var(--ink); }
  html.ui-2026 body:not(#dn26) .dn-grid-segbtn.is-on{ background: var(--dn-pressed); color: var(--ink); }
  html.ui-2026 body:not(#dn26) :is(.dn-grid-segbtn, .dn-grid-colbtn, .dn-grid-menubtn):focus-visible{ outline: 2px solid var(--focus, var(--brand)); outline-offset: -2px; }
  html.ui-2026 body:not(#dn26) .dn-grid-colmenu-host{ position: relative; display: inline-flex; }
  html.ui-2026 body:not(#dn26) .dn-grid-colbtn{
    position: relative; height: 30px; border: 1px solid var(--dn-line-strong); border-radius: var(--dn-r-md);
  }
  html.ui-2026 body:not(#dn26) .dn-grid-colbtn[aria-expanded="true"]{ background: var(--dn-pressed); color: var(--ink); }
  html.ui-2026 body:not(#dn26) .dn-grid-dot{ position: absolute; top: 5px; inset-inline-end: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
  html.ui-2026 body:not(#dn26) .dn-grid-menu{
    display: block; position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 60;
    min-width: 230px; max-height: min(60vh, 460px); overflow: auto; padding: 6px;
    background: var(--surface); border: 1px solid var(--dn-line); border-radius: var(--dn-r-lg); box-shadow: var(--dn-shadow-3);
  }
  html.ui-2026 body:not(#dn26) .dn-grid-menutitle{ padding: 6px 10px 8px; font-size: var(--dn-fs-12); font-weight: 600; color: var(--ink-3); }
  html.ui-2026 body:not(#dn26) .dn-grid-menuitem{
    display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 10px; border-radius: var(--dn-r-sm);
    font-size: var(--dn-fs-13); color: var(--ink); cursor: pointer; margin: 0;
  }
  html.ui-2026 body:not(#dn26) .dn-grid-menuitem:hover{ background: var(--dn-hover); }
  html.ui-2026 body:not(#dn26) .dn-grid-menuitem.is-locked{ color: var(--ink-3); cursor: default; }
  html.ui-2026 body:not(#dn26) .dn-grid-menuitem > input{ width: 16px; height: 16px; margin: 0; flex: 0 0 auto; }
  html.ui-2026 body:not(#dn26) .dn-grid-menuitem > span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.ui-2026 body:not(#dn26) .dn-grid-menuitem > span > em{ font-style: normal; color: var(--ink-4); }
  html.ui-2026 body:not(#dn26) .dn-grid-menufoot{ display: flex; gap: 4px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--dn-line); }
  html.ui-2026 body:not(#dn26) .dn-grid-menubtn{ border-radius: var(--dn-r-sm); }

  /* ---- 20f. Density ---- */
  html.ui-2026.dn-grid-compact body:not(#dn26) table.dn-grid > tbody > tr > td{ height: 40px; padding-block: 4px; font-size: var(--dn-fs-13); }
  html.ui-2026.dn-grid-compact body:not(#dn26) table.dn-grid > thead > tr > th{ height: 36px; }
  html.ui-2026.dn-grid-compact body:not(#dn26) table.dn-grid > tbody > tr > td :is(small, .prp-owner, .crm-dl-selprop, .own-cell-main + small, .dt-c-name small){ display: none; }
  html.ui-2026.dn-grid-compact body:not(#dn26) table.dn-grid :is(.crm-ll-avatar, .own-avatar, .dt-avatar, .prp-thumb){ width: 24px; height: 24px; min-width: 24px; font-size: 10px; }
  html.ui-2026.dn-grid-compact body:not(#dn26) .ztask-table.dn-grid .ztask-row{ min-height: 44px; }
  html.ui-2026.dn-grid-compact body:not(#dn26) .ztask-table.dn-grid .ztask-row > div{ padding-block: 4px; }
  html.ui-2026.dn-grid-compact body:not(#dn26) .ztask-table.dn-grid .ztask-title-cell small{ display: none; }
  html.ui-2026.dn-grid-compact body:not(#dn26) .dn-grid-wrap-wc > .wc-card{ min-height: 40px; }

  /* ---- 20g. Empty row and loading ---- */
  html.ui-2026 body:not(#dn26) .dn-grid-empty{ padding: 44px 16px; text-align: center; color: var(--ink-3); font-size: var(--dn-fs-13); }
  html.ui-2026 body:not(#dn26) .dn-grid-empty > b{ display: block; margin-bottom: 4px; color: var(--ink); font-size: var(--dn-fs-15); font-weight: 600; }
  html.ui-2026 body:not(#dn26) .dn-grid-wrap.dn-grid-loading > :is(table, .ztask-table-body, .wc-card){ opacity: .45; pointer-events: none; transition: opacity var(--dn-dur-2); }
  html.ui-2026 body:not(#dn26) .dn-grid-wrap.dn-grid-loading::before{
    content: ""; position: sticky; top: 0; z-index: 6; display: block; height: 2px; margin-bottom: -2px;
    background: linear-gradient(90deg, transparent, var(--brand), transparent) 0 0 / 45% 100% no-repeat;
    animation: dn26-shimmer 1.1s linear infinite;
  }
  html.ui-2026 body:not(#dn26) .dn-grid-skeleton{
    display: block; overflow: hidden; margin-top: 8px;
    background: var(--surface); border: 1px solid var(--dn-line); border-radius: var(--dn-r-xl); box-shadow: var(--dn-shadow-1);
  }
  html.ui-2026 body:not(#dn26) .dn-grid-skrow{ display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 24px; padding: 20px 16px; border-bottom: 1px solid var(--dn-line); }
  html.ui-2026 body:not(#dn26) .dn-grid-skrow:first-child{ background: var(--surface-2); padding-block: 14px; }
  html.ui-2026 body:not(#dn26) .dn-grid-skrow:last-child{ border-bottom: 0; }
  html.ui-2026 body:not(#dn26) .dn-grid-skrow > i{ display: block; height: 12px; border-radius: 6px; background: var(--dn-skeleton); animation: dn26-pulse 1.4s ease-in-out infinite; }
  html.ui-2026 body:not(#dn26) .dn-grid-skrow > i:first-child{ width: 70%; }
  /* Contacts' own loading block becomes skeleton rows */
  html.ui-2026 body:not(#dn26) #own-loading:not([hidden]){
    display: block; min-height: 300px; padding: 0; color: transparent; border: 1px solid var(--dn-line); border-radius: var(--dn-r-xl);
    background: repeating-linear-gradient(to bottom, var(--surface-2) 0 40px, var(--surface) 40px 52px, var(--dn-skeleton) 52px 64px, var(--surface) 64px 92px);
    animation: dn26-pulse 1.4s ease-in-out infinite;
  }
  html.ui-2026 body:not(#dn26) #own-loading:not([hidden]) > *{ display: none; }

  /* ---- 20h. Tasks: the CSS-grid list ---- */
  html.ui-2026 body:not(#dn26) .ztask-table.dn-grid{ overflow: auto !important; }
  html.ui-2026 body:not(#dn26) .ztask-table.dn-grid :is(.ztask-table-head, .ztask-row){ grid-template-columns: var(--dn-tcols, minmax(270px,1.5fr) minmax(140px,.8fr) minmax(160px,.85fr) 135px 115px 190px); }
  html.ui-2026 body:not(#dn26) .ztask-table.dn-grid .ztask-table-head{ position: sticky; top: 0; z-index: 3; }
  /* at exactly 1100px ui.css's max-width:1100px rule still hides "Related to": the grid keeps it (the Columns menu decides) */
  html.ui-2026 body:not(#dn26) .ztask-table.dn-grid :is(.ztask-table-head, .ztask-row) > :nth-child(2).dn-col:not(.dn-col-hidden){ display: block; }
  /* the row's 14px side padding moves to its end cells, so the sticky first cell sits on the scrollport's edge */
  html.ui-2026 body:not(#dn26) .ztask-table.dn-grid :is(.ztask-table-head, .ztask-row){ padding-inline: 0; }
  html.ui-2026 body:not(#dn26) .ztask-table.dn-grid :is(.ztask-table-head, .ztask-row) > :first-child{ padding-inline-start: 23px; }
  html.ui-2026 body:not(#dn26) .ztask-table.dn-grid :is(.ztask-table-head, .ztask-row) > :last-child{ padding-inline-end: 23px; }
  html.ui-2026 body:not(#dn26) .ztask-table.dn-grid :is(.ztask-table-head, .ztask-row) > .dn-col-primary{ position: sticky; inset-inline-start: 0; z-index: 1; background: inherit; }
  html.ui-2026 body:not(#dn26) .ztask-table.dn-grid .ztask-row{ background: var(--surface); }
  html.ui-2026 body:not(#dn26) .ztask-table.dn-grid .ztask-row:hover{ background: var(--surface-2); }
  html.ui-2026 body:not(#dn26) .ztask-table.dn-grid .ztask-row:focus-visible{ background: color-mix(in srgb, var(--brand) 9%, var(--surface)); box-shadow: inset 3px 0 0 var(--brand); }
  html.ui-2026[dir="rtl"] body:not(#dn26) .ztask-table.dn-grid .ztask-row:focus-visible{ box-shadow: inset -3px 0 0 var(--brand); }
  html.ui-2026 body:not(#dn26) .ztask-table.dn-grid .ztask-table-head > span{ position: relative; overflow: visible; }

  /* ---- 20i. Work Center Projects: the cards become rows ---- */
  html.ui-2026 body:not(#dn26) .dn-grid-wrap-wc{
    background: var(--surface); border: 1px solid var(--dn-line); border-radius: var(--dn-r-xl); box-shadow: var(--dn-shadow-1);
    margin-bottom: 12px;
  }
  html.ui-2026 body.dark:not(#dn26) .dn-grid-wrap-wc{ box-shadow: none; }
  html.ui-2026 body:not(#dn26) .dn-grid-wrap-wc > :is(.dn-grid-head, .wc-card){
    display: grid; grid-template-columns: var(--dn-tcols, minmax(220px,1.4fr) 112px minmax(260px,1.3fr) minmax(140px,.9fr) 60px 170px);
    align-items: center; column-gap: 12px; padding: 0;
  }
  html.ui-2026 body:not(#dn26) .dn-grid-wrap-wc > .dn-grid-head > :first-child,
  html.ui-2026 body:not(#dn26) .dn-grid-wrap-wc > .wc-card > .wc-card-top > .wc-card-name{ padding-inline-start: 16px; }
  html.ui-2026 body:not(#dn26) .dn-grid-wrap-wc > .dn-grid-head > :last-child,
  html.ui-2026 body:not(#dn26) .dn-grid-wrap-wc > .wc-card > .wc-card-foot > span:last-child{ padding-inline-end: 16px; }
  html.ui-2026 body:not(#dn26) .dn-grid-head{
    display: grid; position: sticky; top: 0; z-index: 3; min-height: 40px;
    background: var(--surface-2); border-bottom: 1px solid var(--dn-line);
    font-size: var(--dn-fs-12); font-weight: 600; letter-spacing: .01em; color: var(--ink-3);
  }
  html.ui-2026 body:not(#dn26) .dn-grid-head > span{ position: relative; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.ui-2026 body:not(#dn26) .dn-grid-head > span .dn-grid-sortbtn{ margin-inline-start: 0; }
  html.ui-2026 body:not(#dn26) .dn-grid-wrap-wc > .wc-card{
    min-height: var(--dn-row-h); margin: 0 !important; border: 0 !important; border-bottom: 1px solid var(--dn-line) !important;
    border-radius: 0 !important; box-shadow: none !important; background: var(--surface); transition: background-color var(--dn-dur-1);
  }
  html.ui-2026 body:not(#dn26) .dn-grid-wrap-wc > .wc-card:last-child{ border-bottom: 0 !important; }
  html.ui-2026 body:not(#dn26) .dn-grid-wrap-wc > .wc-card:hover{ background: var(--surface-2); }
  html.ui-2026 body:not(#dn26) .dn-grid-wrap-wc > .wc-card:focus-visible{ background: color-mix(in srgb, var(--brand) 9%, var(--surface)); box-shadow: inset 3px 0 0 var(--brand) !important; outline: 0; }
  html.ui-2026[dir="rtl"] body:not(#dn26) .dn-grid-wrap-wc > .wc-card:focus-visible{ box-shadow: inset -3px 0 0 var(--brand) !important; }
  html.ui-2026 body:not(#dn26) .dn-grid-wrap-wc > .wc-card > :is(.wc-card-top, .wc-card-foot){ display: contents; }
  html.ui-2026 body:not(#dn26) .dn-grid-wrap-wc > .wc-card .wc-card-name{ font-size: var(--dn-fs-14); font-weight: 600; }
  html.ui-2026 body:not(#dn26) .dn-grid-wrap-wc > .wc-card .wc-pill{ justify-self: start; }
  html.ui-2026 body:not(#dn26) .dn-grid-wrap-wc > .wc-card > .wc-card-meta{ margin: 0; flex-wrap: nowrap; min-width: 0; overflow: hidden; white-space: nowrap; }
  html.ui-2026 body:not(#dn26) .dn-grid-wrap-wc > .wc-card > .wc-progress{ margin: 0; }
  html.ui-2026 body:not(#dn26) .dn-grid-wrap-wc > .wc-card .wc-card-foot > span{ padding: 0; border: 0; font-size: var(--dn-fs-13); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.ui-2026 body:not(#dn26) .dn-grid-wrap-wc > .wc-card .wc-card-foot > span:first-child{ text-align: end; font-variant-numeric: tabular-nums; color: var(--ink); }
  html.ui-2026 body:not(#dn26) .dn-grid-wrap-wc > :is(.dn-grid-head, .wc-card) > .dn-col-primary,
  html.ui-2026 body:not(#dn26) .dn-grid-wrap-wc > .wc-card > .wc-card-top > .dn-col-primary{ position: sticky; inset-inline-start: 0; z-index: 1; background: inherit; }
  html.ui-2026 body:not(#dn26) .dn-grid-wrap-wc > .wc-card > .wc-card-top > .wc-card-name{ min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* ==========================================================================================
   21. The dashboard (wave 4, 2026-09-30)
   ------------------------------------------------------------------------------------------
   ui-2026-dash.js lays the CRM's OWN dashboard out as the 2026 dashboard, on a desktop only
   (≥ 1100px). Nothing is re-rendered and nothing is fetched: renderDashboard() keeps painting
   into the same host elements (#dashboard-stats, #dash-events-col, #dash-alerts-col …); the
   script moves those hosts once into this frame —
     .dn-dash-body > .dn-dash-main (admin centre, pipeline + sources, leaderboard + tasks,
                                    recent activity)
                   > .dn-dash-today (the status strip, today's tasks and events, what needs
                                    attention, the priority follow-ups)
   — and, after each paint, restyles the four metric cards as KPI tiles (a sparkline only on the
   card whose figure the loaded records reproduce exactly) and builds the "Recent activity"
   panel from the notifications the bell already holds (each row carries the bell's own click).
   Below 1100px the hosts go back to their classic places: phones and tablets keep today's
   dashboard, pixel for pixel.
   ========================================================================================== */
html.ui-2026 :is(.dn-dash-activity, .dn-dash-aside-title, .dn-kpi-spark){ display: none; }

@media (min-width: 1100px){
  /* ---- 21a. The frame ---- */
  html.ui-2026 body:not(#dn26) #page-dashboard .dn-dash-frame{ margin-bottom: 16px; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dn-dash-body{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 28%);
    gap: 16px;
    align-items: start;
  }
  html.ui-2026 body:not(#dn26) #page-dashboard .dn-dash-main{ min-width: 0; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dn-dash-today{
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  html.ui-2026 body:not(#dn26) #page-dashboard .dn-dash-today > *{ margin: 0 !important; }   /* ui.css: .dc-status-strip{margin-bottom:18px}, .dc-attention{margin-top:16px} */
  html.ui-2026 body:not(#dn26) #page-dashboard .dn-dash-today > :empty{ display: none; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dn-dash-aside-title{
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    padding: 2px 4px 0;
    font: 600 var(--dn-fs-16)/1.3 var(--font-body);
    letter-spacing: var(--dn-tracking-display);
    color: var(--ink);
  }
  html.ui-2026 body:not(#dn26) #page-dashboard .dn-dash-aside-title small{ font-size: var(--dn-fs-13); font-weight: 500; color: var(--ink-3); }
  html.ui-2026 body:not(#dn26) #page-dashboard .dn-dash-main > .dc-main-grid,
  html.ui-2026 body:not(#dn26) #page-dashboard .dn-dash-main > .dc-detail-grid{ margin-bottom: 16px; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dn-dash-main > .dc-detail-grid{ grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); }
  html.ui-2026 body:not(#dn26) #page-dashboard .dn-dash-main > .dc-detail-grid > :empty{ display: none; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dn-dash-main > .dc-detail-grid:has(> :empty){ grid-template-columns: minmax(0, 1fr); }   /* a personal scope has no leaderboard: the tasks take the row */
  html.ui-2026 body:not(#dn26) #page-dashboard .dn-dash-main > #dash-admin-actions .dc-admin-action-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* the Today column: one attention tile per row, the events tools wrap, the follow-ups keep their card */
  html.ui-2026 body:not(#dn26) #page-dashboard .dn-dash-today .dc-attention > div{ grid-template-columns: minmax(0, 1fr); }
  html.ui-2026 body:not(#dn26) #page-dashboard .dn-dash-today .dc-attention header{ flex-wrap: wrap; gap: 4px 12px; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dn-dash-today .dc-panel-head{ flex-wrap: wrap; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dn-dash-today .dc-events-tools{ flex-wrap: wrap; justify-content: flex-end; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dn-dash-today .dc-panel{ height: auto; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dn-dash-today .dc-status-strip{ flex-wrap: wrap; }

  /* ---- 21b. The KPI row: the four metric cards as tiles ---- */
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-metric-grid{ gap: 16px; margin-bottom: 16px; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-metric-card{
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-areas: "icon copy";
    align-items: center;
    gap: 14px;
    min-height: 124px;
    padding: 18px 20px;
    transform: none;
  }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-metric-card:before{ display: none; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-metric-card:hover{ transform: none; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-metric-icon{ grid-area: icon; align-self: start; width: 40px; height: 40px; flex-basis: 40px; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-metric-copy{ grid-area: copy; gap: 2px; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-metric-copy .dc-metric-main strong{ font-variant-numeric: tabular-nums; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-metric-sub{ display: inline-flex; align-items: center; gap: 4px; width: max-content; max-width: 100%; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-metric-sub em{ display: inline-flex; align-items: center; gap: 4px; font-weight: 500; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-metric-sub .dn-delta-ic{ width: 14px; height: 14px; flex: none; stroke-width: 2.2; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-metric-sub.dn-delta-good em{ color: var(--brand-text); font-weight: 600; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dc-metric-sub.dn-delta-bad em{ color: var(--danger-text); font-weight: 600; }
  /* the sparkline sits at the card's inline end, on the value's row (the label and the sub-line keep the whole
     width; the value is a short number); the card's arrow keeps the top corner */
  html.ui-2026 body:not(#dn26) #page-dashboard .dn-kpi-spark{
    display: block;
    position: absolute;
    top: 40px;
    inset-inline-end: 20px;
    width: 96px;
    height: 32px;
    overflow: visible;
    pointer-events: none;
  }
  html.ui-2026 body:not(#dn26) #page-dashboard .dn-kpi-spark .dn-spark-line{ fill: none; stroke: var(--brand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dn-kpi-spark .dn-spark-area{ fill: var(--brand); opacity: .1; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dn-kpi-spark .dn-spark-dot{ fill: var(--brand); stroke: var(--surface); stroke-width: 2; }
  html.ui-2026[dir="rtl"] body:not(#dn26) #page-dashboard .dn-kpi-spark{ transform: scaleX(-1); }   /* time runs the reading way */

  /* ---- 21c. Recent activity (the bell's notifications, the bell's clicks) ---- */
  html.ui-2026 body:not(#dn26) #page-dashboard .dn-dash-activity{ display: block; margin-bottom: 16px; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dn-act-list{ display: flex; flex-direction: column; padding: 6px 8px 8px; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dn-act-row{
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 10px;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: var(--dn-r-md);
    background: transparent;
    color: var(--ink);
    text-align: start;
    font: inherit;
    cursor: pointer;
  }
  html.ui-2026 body:not(#dn26) #page-dashboard .dn-act-row:last-child{ border-bottom: 0; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dn-act-row:hover{ background: var(--dn-hover); }
  html.ui-2026 body:not(#dn26) #page-dashboard .dn-act-row:focus-visible{ outline: 2px solid var(--brand); outline-offset: -2px; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dn-act-ic{
    display: grid; place-items: center;
    width: 32px; height: 32px;
    border-radius: var(--dn-r-md);
    background: var(--brand-tint);
    color: var(--brand-text);
  }
  html.ui-2026 body:not(#dn26) #page-dashboard .dn-act-row.is-unread .dn-act-ic{ background: var(--dn-brand-tint-2); }
  html.ui-2026 body:not(#dn26) #page-dashboard .dn-act-ic svg{ width: 16px; height: 16px; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dn-act-copy{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dn-act-copy strong{ font-size: var(--dn-fs-13); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dn-act-row.is-unread .dn-act-copy strong{ font-weight: 600; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dn-act-copy small{ font-size: var(--dn-fs-12); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dn-act-time{ font-size: var(--dn-fs-12); color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dn-act-row.is-unread .dn-act-time:before{
    content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-end: 6px; border-radius: 50%; background: var(--brand); vertical-align: middle;
  }
}
/* ---- 21d. The page measures itself: with the AI panel docked (or a narrow desktop) the columns fold one by one ---- */
@media (min-width: 1100px){
  /* two query containers (not the page: inline-size containment would make the page the containing block of any
     fixed element inside it) — the KPI row and the frame, both as wide as the page's content */
  html.ui-2026 body:not(#dn26) #page-dashboard #dashboard-stats{ container-type: inline-size; container-name: dn-kpis; }
  html.ui-2026 body:not(#dn26) #page-dashboard .dn-dash-frame{ container-type: inline-size; container-name: dn-dash; }
  @container dn-dash (max-width: 1040px){
    html.ui-2026 body:not(#dn26) #page-dashboard .dn-dash-main > .dc-main-grid,
    html.ui-2026 body:not(#dn26) #page-dashboard .dn-dash-main > .dc-detail-grid{ grid-template-columns: minmax(0, 1fr); }
  }
  @container dn-dash (max-width: 860px){
    html.ui-2026 body:not(#dn26) #page-dashboard .dn-dash-body{ grid-template-columns: minmax(0, 1fr); }
    html.ui-2026 body:not(#dn26) #page-dashboard .dn-dash-main > #dash-admin-actions .dc-admin-action-grid{ grid-template-columns: minmax(0, 1fr); }
  }
  @container dn-kpis (max-width: 1040px){
    html.ui-2026 body:not(#dn26) #page-dashboard .dn-kpi-spark{ width: 72px; }
  }
  @container dn-kpis (max-width: 860px){
    html.ui-2026 body:not(#dn26) #page-dashboard .dc-metric-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
}

/* ==========================================================================================
   22. The docked AI panel (wave 4, 2026-09-30)
   ------------------------------------------------------------------------------------------
   ui-2026-ai-panel.js docks the CRM's own assistant (#assistant-panel — the same DOM, the same
   renderAssistant / assistantSend) on the inline END of a desktop (≥ 1100px): the page keeps
   its width less the panel's (#content pads by --dn-ai-w), so both stay usable. Two widths
   (400px, or 560px with html.dn-ai-wide — the person's choice, remembered in this browser; a
   drag of the panel's edge snaps to the nearer one). While a record drawer (wave 2) or a record
   window is open the drawer takes precedence: html.dn-ai-rail turns the panel into a 48px rail
   (the assistant's mark, nothing else) and the page pads by the rail; the panel comes back when
   the record closes. The script adds only three things inside the panel: a width button in the
   header, the context row under it (the page, and the open record) and the rail mark.
   Phones and tablets keep today's assistant window (every rule sits inside min-width: 1100px).
   ========================================================================================== */
html.ui-2026 body{ --dn-ai-w: 400px; --dn-ai-rail: 48px; }
html.ui-2026.dn-ai-wide body{ --dn-ai-w: 560px; }
html.ui-2026 :is(.dn-ai-context, .dn-ai-width, .dn-ai-rail-mark, .dn-ai-grip){ display: none; }

@media (min-width: 1100px){
  /* ---- 22a. The dock ---- */
  html.ui-2026.dn-ai-open body:not(#dn26) #content{ padding-inline-end: var(--dn-ai-w); transition: padding var(--dn-dur-3) var(--dn-ease-out); }
  html.ui-2026.dn-ai-open.dn-ai-rail body:not(#dn26) #content{ padding-inline-end: var(--dn-ai-rail); }
  html.ui-2026 body:not(#dn26) #assistant-panel.open{
    position: fixed;
    top: var(--asst-top, var(--dn-topbar-h));
    bottom: 0;
    inset-inline-start: auto;
    inset-inline-end: 0;
    width: var(--dn-ai-w);
    max-width: calc(100vw - var(--sidebar-w, 252px) - 320px);
    height: auto;
    border: 0 !important;                              /* ui.css: #assistant-panel{border:1px solid …!important} */
    border-inline-start: 1px solid var(--border) !important;
    border-radius: 0 !important;                       /* ui.css: #assistant-panel{border-radius:14px!important} */
    box-shadow: none !important;                       /* ui.css: #assistant-panel{box-shadow:…!important} */
    background: var(--surface);
    animation: dnAiIn var(--dn-dur-3, .24s) var(--dn-ease-out) both;
    z-index: 90;
    transition: width var(--dn-dur-3) var(--dn-ease-out);
  }
  html.ui-2026[dir="rtl"] body:not(#dn26) #assistant-panel.open{ animation-name: dnAiInRtl; }
  @keyframes dnAiIn{ from{ transform: translateX(24px); opacity: 0; } to{ transform: none; opacity: 1; } }
  @keyframes dnAiInRtl{ from{ transform: translateX(-24px); opacity: 0; } to{ transform: none; opacity: 1; } }
  html.ui-2026 body:not(#dn26) #assistant-panel.dn-ai-dragging{ transition: none; user-select: none; }

  /* the conversation column follows the panel: no 920px reading column, phone-sized gutters */
  html.ui-2026 body:not(#dn26) #assistant-panel.open #assistant-messages{ padding: 16px 16px 14px; gap: 12px; }
  html.ui-2026 body:not(#dn26) #assistant-panel.open #assistant-attachments{ padding-left: 16px; padding-right: 16px; }
  html.ui-2026 body:not(#dn26) #assistant-panel.open #assistant-input-row{ padding: 12px 12px 14px; gap: 8px; }
  html.ui-2026 body:not(#dn26) #assistant-panel.open #assistant-panel-header{ padding: 10px 10px 10px 14px; padding-inline: 14px 10px; }
  html.ui-2026 body:not(#dn26) #assistant-panel.open .assistant-head-titles small{ max-width: 200px; }
  html.ui-2026 body:not(#dn26) #assistant-panel.open #assistant-quota-bar{ padding-inline: 14px; }

  /* ---- 22b. The width button (in the header) and the edge grip ---- */
  html.ui-2026 body:not(#dn26) #assistant-panel.open .dn-ai-width{ display: flex; }
  html.ui-2026 body:not(#dn26) #assistant-panel.open .dn-ai-width svg{ width: 15px; height: 15px; }
  html.ui-2026 body:not(#dn26) #assistant-panel.open .dn-ai-grip{
    display: block;
    position: absolute;
    top: 0; bottom: 0;
    inset-inline-start: 0;                 /* inside the panel: ui.css clips it with overflow:hidden */
    width: 8px;
    cursor: col-resize;
    background: transparent;
    border: 0;
    padding: 0;
    z-index: 3;
  }
  html.ui-2026 body:not(#dn26) #assistant-panel.open .dn-ai-grip:hover,
  html.ui-2026 body:not(#dn26) #assistant-panel.dn-ai-dragging .dn-ai-grip{ background: color-mix(in srgb, var(--brand) 35%, transparent); }
  html.ui-2026 body:not(#dn26) #assistant-panel.open .dn-ai-grip:focus-visible{ outline: 2px solid var(--brand); outline-offset: -2px; background: color-mix(in srgb, var(--brand) 35%, transparent); }

  /* ---- 22c. The context row: the page, and the record that is open ---- */
  html.ui-2026 body:not(#dn26) #assistant-panel.open .dn-ai-context{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    font-size: var(--dn-fs-12);
    color: var(--ink-3);
    flex: none;
  }
  html.ui-2026 body:not(#dn26) #assistant-panel.open .dn-ai-context[hidden]{ display: none; }
  html.ui-2026 body:not(#dn26) #assistant-panel.open .dn-ai-chip{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    max-width: 100%;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--dn-r-full);
    background: var(--surface-2);
    color: var(--ink);
    font-size: var(--dn-fs-12);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html.ui-2026 body:not(#dn26) #assistant-panel.open .dn-ai-chip.dn-ai-chip-record{ border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); background: var(--brand-tint); color: var(--brand-text); }
  html.ui-2026 body:not(#dn26) #assistant-panel.open .dn-ai-chip svg{ width: 14px; height: 14px; flex: none; }
  html.ui-2026 body:not(#dn26) #assistant-panel.open .dn-ai-chip bdi{ overflow: hidden; text-overflow: ellipsis; }

  /* ---- 22d. The rail: a record is open, the drawer takes the room ---- */
  html.ui-2026.dn-ai-rail body:not(#dn26) #assistant-panel.open{ width: var(--dn-ai-rail); max-width: none; overflow: hidden; }
  html.ui-2026.dn-ai-rail body:not(#dn26) #assistant-panel.open > :not(.dn-ai-rail-mark){ display: none !important; }   /* ui.css (≤768): #assistant-messages{flex:1 1 auto!important} and the like */
  html.ui-2026.dn-ai-rail body:not(#dn26) #assistant-panel.open .dn-ai-rail-mark{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    color: var(--brand-text);
  }
  html.ui-2026.dn-ai-rail body:not(#dn26) #assistant-panel.open .dn-ai-rail-mark .assistant-ai-mark{ width: 30px; height: 30px; border-radius: var(--dn-r-md); }
  html.ui-2026.dn-ai-rail body:not(#dn26) #assistant-panel.open .dn-ai-rail-mark span:not(.assistant-ai-mark){
    writing-mode: vertical-rl;
    font-size: var(--dn-fs-12);
    font-weight: 500;
    color: var(--ink-3);
    letter-spacing: .02em;
  }
  html.ui-2026[dir="rtl"].dn-ai-rail body:not(#dn26) #assistant-panel.open .dn-ai-rail-mark span:not(.assistant-ai-mark){ transform: rotate(180deg); }
  /* the record drawer leaves the rail visible beside it. #lead-modal-overlay is a direction:ltr flex box in ui.css
     (it justifies flex-end / flex-start by html[dir]), so its child takes a physical margin; the other two inherit
     the page's direction and take the logical one. */
  html.ui-2026.dn-ai-rail body:not(#dn26) :is(#prop-modal-overlay, #own-panel-overlay).dn-drawer:not(.dn-drawer-full) > :is(#prop-detail-modal, #own-panel){ margin-inline-end: var(--dn-ai-rail); }
  html.ui-2026.dn-ai-rail body:not(#dn26) #lead-modal-overlay.dn-drawer:not(.dn-drawer-full) > #lead-modal{ margin-right: var(--dn-ai-rail); }
  html.ui-2026.dn-ai-rail[dir="rtl"] body:not(#dn26) #lead-modal-overlay.dn-drawer:not(.dn-drawer-full) > #lead-modal{ margin-right: 0; margin-left: var(--dn-ai-rail); }

  /* ---- 22e. The top-bar button says whether the panel is open ---- */
  html.ui-2026 body:not(#dn26) #topbar #assistant-fab[aria-expanded="true"]{ background: var(--brand); color: var(--on-brand); }
  html.ui-2026 body:not(#dn26) #topbar #assistant-fab[aria-expanded="true"]:hover{ background: var(--brand); }
  html.ui-2026 body:not(#dn26) #topbar #assistant-fab .dn-kbd{ display: none; }
}
@media (min-width: 1100px) and (prefers-reduced-motion: reduce){
  html.ui-2026 body:not(#dn26) #assistant-panel.open{ animation: none; transition: none; }
  html.ui-2026.dn-ai-open body:not(#dn26) #content{ transition: none; }
}

/* ---- Modal corners (owner 2026-10-04: "the edge of the modal is broken, it must be curved") ----
   .modal has a rounded border but no overflow clip (a clip would cut combobox menus and date pickers), so the square
   white corners of its first child (the header) and last child (the footer) stuck out past the curve. Give those two
   children the modal's own radius. */
html.ui-2026 body:not(#dn26) .modal > :first-child{ border-start-start-radius: inherit; border-start-end-radius: inherit; }
html.ui-2026 body:not(#dn26) .modal > :last-child{ border-end-start-radius: inherit; border-end-end-radius: inherit; }

/* ---- My Profile forms (owner 2026-10-04: "the forms are all over the place") ----
   1. The two-column form stretched every <label> to the height of its row, so a field whose neighbour had a help line
      sat lower than it: rows start at the top now, and each label's own parts stack from the top.
   2. The password card is the narrow column: three fields side by side wrapped their labels and sat flush against the
      card edge. One column, with the card's own padding.
   3. Labels were 10px and the help lines 9px. */
html.ui-2026 body:not(#dn26) #page-profile .settings-profile-form{ align-items: start; row-gap: 18px; }
html.ui-2026 body:not(#dn26) #page-profile .settings-profile-form label{ align-content: start; align-self: start; font-size: 12px; font-weight: 600; }
html.ui-2026 body:not(#dn26) #page-profile .settings-profile-form label > small{ font-size: 11px; line-height: 1.45; margin-top: 0; }
html.ui-2026 body:not(#dn26) #page-profile .selfpass-grid{ grid-template-columns: 1fr; gap: 16px; padding: 20px 20px 4px; }
html.ui-2026 body:not(#dn26) #page-profile .selfpass-grid .settings-field{ display: grid; gap: 7px; color: var(--text-muted); font-size: 12px; font-weight: 600; }
html.ui-2026 body:not(#dn26) #page-profile #selfpass-result{ padding: 0 20px; }
html.ui-2026 body:not(#dn26) #page-profile .settings-card-actions{ display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 14px 20px 18px; }
html.ui-2026 body:not(#dn26) #page-profile .settings-reminder-toggle{ margin: 0 20px 6px; }
html.ui-2026 body:not(#dn26) #page-profile .settings-work-heading{ border-top: 1px solid var(--border); margin-top: 6px; }
html.ui-2026 body:not(#dn26) #page-profile .settings-telegram-card .settings-card-heading{ padding-inline: 0; }

/* ---- Show / hide password (owner 2026-10-04) ---- */
.pw-eye-wrap{ position: relative; display: block; }
.has-pw-eye > input[type="password"], .has-pw-eye > input[data-pw-eye]{ padding-inline-end: 46px !important; }
.pw-eye{ position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--text-muted, #666); cursor: pointer; }
.pw-eye:hover{ background: var(--surface-2, rgba(0,0,0,.05)); color: var(--text, #111); }
.pw-eye:focus-visible{ outline: 2px solid var(--brand, #0f6b46); outline-offset: 1px; }
.pw-eye[aria-pressed="true"]{ color: var(--brand-text, #0f6b46); }
html body .has-pw-eye > input[data-pw-eye], html body #login-screen .login-input-wrap > input#login-pass{ padding-inline-end: 46px !important; }

/* ---- Menu: six groups + Administration (owner 2026-10-04) ---- */
/* a row whose own rule says "not for this person" (Calls, Attendance & leave, Agent Tracker) */
html.ui-2026 .dn-nav-item[data-dn-gate="off"]{ display: none !important; }
/* Administration lives in the sidebar footer, above Help and the person's card */
html.ui-2026 #sidebar .sidebar-footer > .dn-nav-sec{ margin: 0 0 6px; padding: 6px 0 4px; border-top: 1px solid var(--border); }
html.ui-2026 #sidebar .sidebar-footer > .dn-nav-sec[hidden]{ display: none; }

/* ---- Tabs of one menu item: My Work · Calls · Properties (owner 2026-10-04) ---- */
.crm-pagetabs{ display: flex; gap: 4px; padding: 4px; margin: 16px 32px 6px; position: relative; z-index: 1; width: max-content; max-width: calc(100% - 64px); overflow-x: auto; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.crm-pagetabs::-webkit-scrollbar{ display: none; }
.crm-pagetabs[hidden]{ display: none; }
.crm-pt{ flex: none; border: 1px solid transparent; background: transparent; color: var(--ink-3); font: inherit; font-size: 13px; font-weight: 600; padding: 8px 18px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.crm-pt:hover{ color: var(--ink); }
.crm-pt.is-on{ background: var(--surface); border-color: var(--brand-line); color: var(--brand-text); }
.crm-pt:focus-visible{ outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 900px){ .crm-pagetabs{ width: auto; margin: 10px 16px 0; max-width: calc(100% - 32px); } .crm-pt{ padding: 8px 14px; } }

/* ── 2026-10-04 (owner, screenshots): photos that ran over the row lines; names stacked one letter per line ──
   1) Compact density makes the avatar box 24px, but the Contacts agent photo kept `flex:0 0 36px` (a flex-basis beats
      width) and its <img> kept its own 36px: a 36px photo in a 24px box, across the row's border lines. The box now is
      24px in every direction and every avatar image fills its circle and never sets the size itself.
   2) A name inside a narrow Agent column (a column dragged narrow, a docked panel, a small window) broke at every
      letter (overflow-wrap:break-word in a ~10px box). Words still wrap between words; a word that does not fit is cut
      with an ellipsis, on one line, instead of a column of single letters. overflow-x:clip leaves the vertical glyph box
      alone (the FA/AR font is taller than its line box). */
html.ui-2026 body:not(#dn26) table.dn-grid :is(.crm-ll-avatar, .own-avatar, .dt-avatar, .agent-inline-avatar) img{ width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
/* property photos are NOT avatars: they keep the rounded square they always had (r344 made them circles by mistake) */
html.ui-2026 body:not(#dn26) table.dn-grid .prp-thumb img{ width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
html.ui-2026.dn-grid-compact body:not(#dn26) table.dn-grid .own-avatar.own-avatar-agent{ width: 24px; height: 24px; min-width: 24px; flex: 0 0 24px; }
html body #page-customers.crm-gold-v2 .crm-ll-table .crm-dl-owner > span:not(.crm-ll-avatar),
html body #page-deals.crm-gold-v2 .crm-ll-table .crm-dl-owner > span:not(.crm-ll-avatar){ overflow-wrap: normal; word-break: normal; overflow-x: clip; overflow-y: visible; text-overflow: ellipsis; min-width: 0; }

/* ── Reports & KPI: the two buttons ("Reports & Analytics" · "Viewing and call KPIs") were a full-width white band with
   square corners that ran past the page gutter, and the active one a tall grey-green slab. They are the same pill strip
   as the other page tabs now (.crm-pagetabs), aligned with the cards below. ── */
html body #page-analytics .anl-tab-bar{ display: flex; gap: 4px; padding: 4px; margin: 16px 20px 6px; width: max-content; max-width: calc(100% - 40px); overflow-x: auto; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2) !important; box-shadow: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
html body #page-analytics .anl-tab-bar::-webkit-scrollbar{ display: none; }
html body #page-analytics .anl-tab{ flex: none; display: flex; align-items: center; gap: 7px; margin: 0 !important; padding: 8px 18px; border: 1px solid transparent !important; border-radius: 999px !important; background: transparent !important; box-shadow: none !important; color: var(--ink-3) !important; font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
html body #page-analytics .anl-tab:hover{ color: var(--ink) !important; }
html body #page-analytics .anl-tab.anl-tab-active{ background: var(--surface) !important; border-color: var(--brand-line) !important; color: var(--brand-text) !important; }
html body #page-analytics .anl-tab:focus-visible{ outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 900px){ html body #page-analytics .anl-tab-bar{ width: auto; margin: 10px 20px 4px; max-width: calc(100% - 40px); } html body #page-analytics .anl-tab{ padding: 8px 12px; font-size: 12.5px; gap: 5px; } html body #page-analytics .anl-tab svg{ display: none; } }

/* ── Modals whose styles lived only inside their page (2026-10-04 audit) ──
   Team Chat "New group" (the rules were scoped to #page-team-chat, the modal is outside it) and Useful Links "Add Link"
   (.wc-label belongs to Work Center): labels sat beside the fields, the member list was a stack of loose pieces. */
#small-modal .tch-new-group-form{ padding: 4px 0 0; display: grid; gap: 14px; }
#small-modal .tch-new-group-form .form-group{ display: grid; gap: 6px; margin: 0; }
#small-modal .tch-new-group-form .form-control{ width: 100%; }
#small-modal .tch-new-group-members > div{ display: grid; gap: 7px; margin-top: 8px; max-height: 280px; overflow-y: auto; }
#small-modal .tch-member-option{ display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
#small-modal .tch-member-option > input[type="checkbox"]{ flex: none; width: 18px; height: 18px; margin: 0; }
#small-modal .tch-member-option > span:last-child{ min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
#small-modal .tch-new-group-actions{ display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
#small-modal .ul-form{ display: grid; gap: 4px; }
#small-modal .ul-form .wc-label{ display: block; margin: 10px 0 2px; font-size: 12px; font-weight: 650; color: var(--ink-2); }
#small-modal .ul-form .wc-label:first-of-type{ margin-top: 0; }
#small-modal .ul-form .form-control{ display: block; width: 100%; box-sizing: border-box; }
#small-modal .ul-form textarea.form-control{ resize: vertical; }
#small-modal .tch-member-option > :nth-child(2){ flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--brand-100); color: var(--brand-700); font-size: 12px; font-weight: 700; }
#small-modal .tch-member-option > :nth-child(2) img{ width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ── 2026-10-04 (owner screenshots) ──
   1) AI Property Assistant: the icon was near-black on the dark green tile; and the global input skin made the prompt box 36px
      high where the layout expects 46px, so "Apply brief" (36px at top:5px) hung 5px out of the bottom of the box.
   2) A listing with no photo shows the Dandelion mark on a quiet tile, not the letters "DN / NO PHOTO" or a bare icon. */
html body #page-search .asst-avatar{ color: #fff !important; }
html body #page-search .asst-avatar svg{ stroke: currentColor; }
html body #page-search .asst-input input{ height: 46px !important; box-sizing: border-box; padding-inline-start: 42px !important; padding-inline-end: 140px !important; }
html body #page-search .asst-send{ top: 5px !important; height: 36px !important; min-height: 0 !important; box-sizing: border-box; }
@media (max-width: 900px){
  html body #page-search .asst-input input{ padding-inline-end: 52px !important; }
  html body #page-search .asst-send{ width: 36px !important; padding: 0 !important; }
}
html body #page-search .ss-noimg, html body.light #page-search .ss-noimg, html body.dark #page-search .ss-noimg, html body .srch-proj-media .ss-noimg{ display: flex; align-items: center; justify-content: center; background: var(--surface-2) !important; border: 0; }
html body #page-search .ss-noimg img, html body .srch-proj-media .ss-noimg img{ width: 56%; max-width: 72px; height: auto; max-height: 56%; object-fit: contain; opacity: .8; pointer-events: none; -webkit-user-select: none; user-select: none; }
html.ui-2026 body:not(#dn26) table.dn-grid .prp-thumb{ display: flex; align-items: center; justify-content: center; }
html.ui-2026 body:not(#dn26) table.dn-grid .prp-thumb img.prp-mark{ width: 62%; height: 62%; object-fit: contain; opacity: .8; border-radius: 0; }
#page-properties .prp-thumb img.prp-mark{ width: 62%; height: 62%; object-fit: contain; opacity: .8; }
/* Developers picker: the global input skin drew a second box inside the combo field */
html body .dev-combo-field .dev-combo-input, html.ui-2026 body:not(#dn26) .dev-combo-field input.dev-combo-input, html.ui-2026 body:not(#dn26) .dev-combo-field input.dev-combo-input:focus{ border: 0 !important; box-shadow: none !important; background: transparent !important; outline: none !important; }
html body .dev-combo-field:focus-within{ box-shadow: 0 0 0 2px var(--brand-line, rgba(15,107,70,.35)); border-radius: 12px; }

/* ── Agent Tracker → Requests (owner screenshot): "New request" had dark text on the dark green button; "Approve" had white
   text on a pale green fill (the label could not be read); "Not approve" was a light red on light pink. ── */
html body .at-new-req-btn{ background: var(--brand-600, #0F6B46) !important; color: var(--on-brand, #fff) !important; border: 1px solid var(--brand-600, #0F6B46); }
html body .at-new-req-btn:hover{ filter: brightness(1.08); }
html body .at-req-actions button{ font-size: 12px; font-weight: 700; }
html body .at-req-actions .at-req-approve{ background: var(--brand-600, #0F6B46) !important; border-color: var(--brand-600, #0F6B46) !important; color: var(--on-brand, #fff) !important; }
html body .at-req-actions .at-req-reject{ color: #b42318 !important; background: #fef3f2 !important; border-color: #fda29b !important; }
html body.dark .at-req-actions .at-req-reject{ color: #fda29b !important; background: rgba(240,68,56,.14) !important; border-color: rgba(240,68,56,.5) !important; }

/* ── Inputs that sat flush against their own border (no inner padding): the Ideas composer, the Useful Links form and the
   team-report date. Found by scanning every page for bordered inputs with padding < 6px. ── */
html body .ideas-composer .form-control,
html body #small-modal .ul-form .form-control,
html body #at-report-team-date{ padding: 9px 12px; box-sizing: border-box; }
html body .ideas-composer textarea.form-control{ padding-block: 10px; line-height: 1.5; min-height: 84px; resize: vertical; }

/* ── Agent card (tap an agent's photo) + the photo as a button ── */
.agent-inline-avatar, .dc-team-row .dc-avatar, .dc-event-agent{ cursor: pointer; }
.agent-inline-avatar:hover, .dc-team-row .dc-avatar:hover{ box-shadow: 0 0 0 2px var(--brand-line, rgba(15,107,70,.35)); }
.agent-card{ display: grid; gap: 12px; }
.agent-card-head{ display: flex; align-items: center; gap: 14px; }
.agent-card-photo{ flex: none; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--brand-100, #e3f0e9); color: var(--brand-700, #0b5538); font-size: 24px; font-weight: 700; }
.agent-card-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.agent-card-head strong{ display: block; font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
.agent-card-head small{ display: block; margin-top: 2px; font-size: 13px; color: var(--ink-3); }
.agent-card-row{ display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 13px; }
.agent-card-row span{ color: var(--ink-3); }
.agent-card-row b{ font-weight: 600; text-align: end; overflow-wrap: anywhere; }
.agent-card-acts{ display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; }
.agent-card-act{ display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; }
.agent-card-act.is-primary{ background: var(--brand-600, #0F6B46); border-color: var(--brand-600, #0F6B46); color: var(--on-brand, #fff); }
.dc-focus-list .dc-who{ display: flex; align-items: center; gap: 6px; margin-top: 3px; }