/* ==========================================================================
   Clients directory (/clients) — Media Library / Gift Designs visual language.
   White rounded panel, 28px semibold title, #1d1d1f ink, fills-never-strokes,
   black primary button, quiet hover rows, kebab menus.
   Single accent: #4BA3FF (selection); darker pair #1568C4 for small text.
   Extracted from the view (2026-06-06 audit) — keep cdx- prefix scoped here.
   ========================================================================== */

.cdx { background:#fff; border-radius:24px; padding:28px 32px; min-height:70vh; }
.cdx__headrow { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.cdx__title { font-size:24px; font-weight:600; color:#24262b; margin:0; letter-spacing:0; }
/* live client-count badge next to the title (wired to the real total) */
.cdx__titlecount { display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:26px;
                   padding:0 9px; margin-left:10px; border-radius:999px; background:#f2f2f7; color:#62656f;
                   font-size:13px; font-weight:500; letter-spacing:0; vertical-align:middle; transform:translateY(-3px); }

/* black primary button (monochrome design system) */
.cdx__new { display:inline-flex; align-items:center; gap:8px; border:0; cursor:pointer; text-decoration:none;
            background:var(--ds-color-interactive); color:#fff; font:inherit; font-size:13px; font-weight:500;
            height:36px; padding:0 18px; border-radius:var(--ds-button-radius); white-space:nowrap; flex:none;
            transition:background .12s ease, transform .12s ease, box-shadow .12s ease; }
.cdx__new:hover { background:var(--ds-color-interactive-hover); color:#fff; transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.18); }
.cdx__new:active { transform:none; }

/* flash messages — inside the panel, fill language */
.cdx__flash { border-radius:14px; padding:11px 16px; font-size:13px; font-weight:500; margin:16px 0 0; }
.cdx__flash--success { background:#e1f5ee; color:#0f6e56; }
.cdx__flash--error   { background:#fde8e8; color:#b42318; }
.cdx__flash--warning { background:var(--status-pending-bg); color:var(--status-pending-ink); }
.cdx__flash--info    { background:var(--app-theme-wash-soft,#EAF4FF); color:var(--app-theme-accent,#1568C4); }

/* ---------- toolbar (fills, never strokes) ---------- */
.cdx__bar { display:flex; align-items:center; gap:10px; margin:20px 0 18px; flex-wrap:wrap; min-height:36px; }
.cdx__count { font-size:12.5px; color:#62656f; margin-left:2px; white-space:nowrap; }
.cdx__spacer { margin-left:auto; }

.cdx__searchform { display:inline-flex; min-width:0; }
.cdx__search { display:inline-flex; align-items:center; gap:8px; background:#f2f2f7; border-radius:999px;
               padding:0 14px; height:36px; width:250px; max-width:100%; transition:background .15s ease, box-shadow .15s ease; }
/* focus = whisper-darker fill, never a ring/halo (no-borders rule) */
.cdx__search:focus-within { background:#e8eaf0; box-shadow:none; }
.cdx__searchicon { display:inline-flex; color:#8a8d99; flex:none; }
.cdx__searchinput { border:0; outline:0; background:transparent; font:inherit; font-size:13px; color:#24262b;
                    width:100%; padding:0; }
.cdx__searchinput::placeholder { color:#a1a1a6; }
/* ONE clear control (ours) — hide the browser's built-in search cancel button */
.cdx__searchinput::-webkit-search-cancel-button,
.cdx__searchinput::-webkit-search-decoration { -webkit-appearance:none; appearance:none; display:none; }
.cdx__searchinput::-ms-clear { display:none; }
.cdx__searchclear { border:0; background:transparent; cursor:pointer; color:#a1a1a6; display:none;
                    width:18px; height:18px; padding:0; align-items:center; justify-content:center; flex:none; }
.cdx__searchclear:hover { color:#24262b; }
.cdx__search.has-text .cdx__searchclear { display:inline-flex; }

/* sort dropdown (mlib dd visual language) */
.cdx__dd { position:relative; }
.cdx__ddbtn { display:inline-flex; align-items:center; gap:8px; border:0;
              background:#f2f2f7; color:#24262b; font:inherit; font-size:13px; font-weight:500;
              padding:0 14px; height:36px; border-radius:var(--ds-button-radius); cursor:pointer; transition:background .12s ease; }
.cdx__ddbtn:hover { background:#e1e3ea; }
.cdx__ddhint { font-weight:500; color:#8a8d99; }
.cdx__ddchev { display:inline-flex; color:#8a929c; transition:transform .15s ease; }
.cdx__dd.is-open .cdx__ddchev { transform:rotate(180deg); }
.cdx__ddmenu { position:absolute; top:calc(100% + 7px); left:0; min-width:100%; width:max-content;
               max-width:300px; background:#fff; border-radius:14px; padding:6px; display:none; z-index:40;
               box-shadow:0 6px 16px rgba(15,23,42,.06), 0 20px 44px rgba(15,23,42,.12); }
.cdx__dd.is-open .cdx__ddmenu { display:block; }
.cdx__ddopt { display:flex; align-items:center; gap:10px; width:100%; text-decoration:none;
              text-align:left; border:0; background:transparent; padding:9px 12px; border-radius:9px;
              cursor:pointer; font:inherit; font-size:13.5px; color:#1c1c1e; }
.cdx__ddopt:hover { background:#f3f5f7; color:#1c1c1e; }
.cdx__ddopt.is-active { font-weight:600; }
.cdx__ddck { order:-1; width:13px; flex:none; color:var(--app-theme-accent,#4BA3FF); display:inline-flex; visibility:hidden; }
.cdx__ddopt.is-active .cdx__ddck { visibility:visible; }

/* contextual selection bar — replaces find/sort while rows are selected */
.cdx__selbar { display:none; align-items:center; gap:10px; }
.cdx__bar.is-selecting .cdx__selbar { display:flex; flex:1 1 100%; width:100%; }
.cdx__bar.is-selecting .cdx__searchform,
.cdx__bar.is-selecting .cdx__dd,
.cdx__bar.is-selecting .cdx__filtersbtn,
.cdx__bar.is-selecting .cdx__count { display:none; }
/* …but dropdowns that LIVE in the selection bar (Add to list, Bulk edit) must
 * stay visible while selecting — the blanket hide above is for the toolbar's
 * Status/Sort/Tag menus only. */
.cdx__bar.is-selecting .cdx__selbar .cdx__dd { display:inline-flex; }
.cdx__selclear { width:30px; height:30px; border:0; border-radius:999px; background:#f2f2f7; color:#24262b;
                 cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
                 position:relative; transition:background .12s ease; }
.cdx__selclear:hover { background:#e1e3ea; }
.cdx__selclear::before { content:''; position:absolute; inset:-7px; border-radius:999px; }
.cdx__selcount { font-size:13px; font-weight:500; color:#24262b; white-space:nowrap; }
.cdx__selscope { font-size:13px; color:#62656f; white-space:nowrap; }
.cdx__sellink { border:0; background:transparent; cursor:pointer; font:inherit; font-size:13px; font-weight:500;
                color:#62656f; padding:0; white-space:nowrap; }
.cdx__sellink::before { content:'·'; margin-right:9px; color:#c2c2c7; font-weight:400; }
.cdx__sellink:hover { text-decoration:underline; }

/* simplified selection bar (Fresha parity): master checkbox + "All N selected ·
 * Deselect" on the left, Bulk edit + Delete on the right. */
.cdx__selcheck { width:22px; height:22px; border:0; border-radius:7px; background:var(--app-theme-fill,#4BA3FF); color:#fff; cursor:pointer;
                 display:inline-flex; align-items:center; justify-content:center; flex:none; position:relative;
                 transition:background .12s ease, transform .1s ease; }
.cdx__selcheck:hover { background:var(--app-theme-fill-hover,#3a93f0); }
.cdx__selcheck:active { transform:scale(.9); }
.cdx__selcheck::before { content:''; position:absolute; inset:-7px; } /* hit area */
.cdx__selcheck svg { display:block; }
/* ghost dropdown pill (white + hairline) used by Bulk edit in the selection bar */
.cdx__ddbtn--ghost { background:#fff; box-shadow:inset 0 0 0 1px #e3e3e8; }
.cdx__ddbtn--ghost:hover { background:#f7f7f9; }
/* Delete pill — red ink on white with a hairline, matching the ghost language */
.cdx__delbtn { display:inline-flex; align-items:center; border:0; cursor:pointer; font:inherit; font-size:13px;
               font-weight:600; height:36px; padding:0 18px; border-radius:var(--ds-button-radius); background:#fff; color:var(--status-cancelled);
               box-shadow:inset 0 0 0 1px #e3e3e8; white-space:nowrap;
               transition:background .12s ease, box-shadow .12s ease; }
.cdx__delbtn:hover { background:var(--status-cancelled-bg); box-shadow:inset 0 0 0 1px #f1c4c4; }

/* header actions cluster: Options sits beside New Client */
.cdx__headactions { display:inline-flex; align-items:center; gap:10px; }

@media (max-width: 520px) {
  .cdx__headrow { flex-wrap:wrap; align-items:center; }
  .cdx__title { flex:1 0 100%; }
  .cdx__headactions { width:100%; justify-content:flex-end; gap:8px; }
  .cdx__new { gap:5px; padding-inline:12px; }
}

/* selection-bar action pills + toolbar overflow */
.cdx__pillbtn { display:inline-flex; align-items:center; gap:6px; border:0; cursor:pointer;
                background:#f2f2f7; color:#24262b; font:inherit; font-size:13px; font-weight:500;
                padding:0 14px; height:36px; border-radius:var(--ds-button-radius); transition:background .12s ease; white-space:nowrap; }
.cdx__pillbtn:hover { background:#e1e3ea; }
.cdx__iconpill { width:36px; height:36px; border:0; border-radius:999px; background:#f2f2f7; color:#62656f;
                 cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background .12s ease; }
.cdx__iconpill:hover { background:#e1e3ea; color:#24262b; }
.cdx__dd--right .cdx__ddmenu--right { left:auto; right:0; }
.cdx__ddopt-count { margin-left:auto; padding-left:18px; font-size:12px; font-weight:500; color:#8a929c; }
.cdx__ddopt.is-active .cdx__ddopt-count { color:#62656f; }
/* Options menu (Import / Merge / Export): leading icon + a quiet section head */
.cdx__ddopt--ico > svg { flex:none; color:#62656f; }
.cdx__ddhead { margin:8px 12px 3px; font-size:11px; font-weight:600; letter-spacing:.04em;
               text-transform:uppercase; color:#a1a1a6; }
.cdx__ddsep { height:1px; background:#f0f0f2; margin:6px 8px; }

/* bulk delete — lives right next to the selection count, not across the bar */
.cdx__bulkdel { display:none; align-items:center; gap:7px; border:0; cursor:pointer;
                background:#f2f2f7; color:#b42318; font:inherit; font-size:13px; font-weight:600;
                padding:0 14px 0 12px; height:36px; border-radius:999px; margin-left:8px;
                transition:background .12s ease; white-space:nowrap; }
.cdx__bulkdel.is-shown { display:inline-flex; }
/* the selection bar only renders while selecting, so the Delete pill can simply
 * show whenever the bar is active (the legacy .is-shown gate was never wired). */
.cdx__bar.is-selecting .cdx__bulkdel { display:inline-flex; }
.cdx__bulkdel:hover { background:#fde8e8; }
.cdx__bulkdel > svg { flex:none; display:block; }

/* duplicate-intel nudge — top-of-page, action-first. A calm accent surface
 * (not a loud block) with an icon chip, a verb-led title, the benefit beneath,
 * a confident CTA, and a quiet dismiss. Slides in so the eye catches it. */
.cdx__dup { display:flex; align-items:center; gap:14px; margin:0 0 18px; padding:13px 14px 13px 16px;
            background:#F0F6FF; border-radius:16px; box-shadow:inset 0 0 0 1px var(--app-theme-a-2200,rgba(75,163,255,.22));
            animation:cdxDupIn .42s cubic-bezier(.22,1,.36,1) both; }
@keyframes cdxDupIn { from { opacity:0; transform:translateY(-7px); } to { opacity:1; transform:none; } }
.cdx__dupicon { flex:none; width:40px; height:40px; border-radius:13px; background:var(--app-theme-fill,#4BA3FF); color:#fff;
                display:inline-flex; align-items:center; justify-content:center;
                box-shadow:0 6px 16px var(--app-theme-a-3400,rgba(75,163,255,.34)); }
.cdx__duptextwrap { flex:1; min-width:0; }
.cdx__duptitle { font-size:15px; font-weight:600; color:#24262b; margin:0; letter-spacing:0; }
.cdx__dupsub { font-size:13px; color:var(--app-theme-accent,#5d7088); margin:2px 0 0; line-height:1.45; }
.cdx__dupcta { flex:none; border:0; cursor:pointer; font:inherit; font-size:13px; font-weight:500;
               background:var(--ds-color-interactive); color:#fff; padding:0 18px; height:38px; border-radius:var(--ds-button-radius);
               transition:background .12s ease, transform .12s ease, box-shadow .12s ease; white-space:nowrap; }
.cdx__dupcta:hover { background:var(--ds-color-interactive-hover); transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.18); }
.cdx__dupcta:active { transform:none; }
.cdx__dupcta--disabled { background:rgba(36, 38, 43,.28); cursor:default; }
.cdx__dupcta--disabled:hover { background:rgba(36, 38, 43,.28); transform:none; box-shadow:none; }
.cdx__dupdismiss { flex:none; width:30px; height:30px; border:0; border-radius:999px; background:transparent;
                   color:var(--app-theme-accent,#8aa0bf); cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
                   transition:background .12s ease, color .12s ease; }
.cdx__dupdismiss:hover { background:var(--app-theme-a-1400,rgba(75,163,255,.14)); color:var(--app-theme-accent-hover,#1568C4); }

/* ---------- list (table styled as quiet rows — no strokes) ---------- */
.cdx__tablewrap { overflow:visible; }
.cdx__table { width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; }
.cdx__table th { position:sticky; top:0; z-index:10; background:#fff;
                 padding:4px 12px 9px; text-align:left; font-size:12px; font-weight:500;
                 letter-spacing:normal; text-transform:none; color:#a1a1a6; white-space:nowrap;
                 box-shadow:inset 0 -1px 0 #f0f0f2; transition:box-shadow .15s ease; }
.cdx__table.is-stuck th { box-shadow:inset 0 -1px 0 #f0f0f2, 0 10px 14px -12px rgba(0,0,0,.22); }
/* default column widths — Fresha-style: email lives UNDER the name in the
 * Client cell, so there is no separate Email column and Client takes its space. */
/* Widths sum to 94% + a 56px actions column (~6%) = 100%, no overflow. The four
 * metric columns are identical (12%) so the eye reads one even rhythm; Client is
 * widest (identity + inline tags), Phone a touch wider for the number. */
.cdx__th--client  { width:32%; }
.cdx__th--phone   { width:14%; }
.cdx__th--sales   { width:12%; }
.cdx__th--reviews { width:12%; }
.cdx__th--last    { width:12%; }
.cdx__th--next    { width:12%; }
.cdx__th--act     { width:56px; }
/* Metric columns are LEFT-aligned: the header label and every value (including the
 * "No sales yet" placeholders) start from the SAME left edge, so columns read as
 * clean vertical lines. Right-alignment made the varied-width placeholders ragged
 * on the left — value start points all differed under a fixed-right header. */
.cdx__col--sales, .cdx__col--last, .cdx__col--next, .cdx__col--reviews { text-align:left; }
/* lifetime spend reads as a figure — tabular numerals, ink-quiet */
.cdx__col--sales { font-variant-numeric:tabular-nums lining-nums; white-space:nowrap; }
.cdx__col--reviews { white-space:nowrap; }
.cdx__col--reviews .cdx__rating { justify-content:flex-start; }

/* clickable sort headers (Sales / Reviews) — the th's padding moves onto the
 * inner button so the whole label+arrow is the hit target; arrow shows the
 * direction (up = asc), faint on hover, solid when that column is active. */
.cdx__table th.cdx__th--sortable { padding:0; }
.cdx__sorth { display:inline-flex; align-items:center; gap:5px; border:0; background:transparent; cursor:pointer;
              font:inherit; font-size:12px; font-weight:500; letter-spacing:normal; text-transform:none;
              color:#a1a1a6; padding:4px 12px 9px; line-height:1; transition:color .12s ease; }
.cdx__sorth:hover { color:#62656f; }
.cdx__sortarrow { display:inline-flex; color:#24262b; opacity:0; transition:opacity .12s ease, transform .15s ease; }
.cdx__th--sortable:hover .cdx__sortarrow { opacity:.4; }
.cdx__sortarrow.is-active { opacity:1; }
/* glyph points UP (ascending); descending = active & not asc → flip down */
.cdx__sortarrow.is-active:not(.is-asc) svg { transform:rotate(180deg); }
.cdx__rating { display:inline-flex; align-items:center; gap:4px; font-variant-numeric:tabular-nums lining-nums; }
.cdx__ratingstar { color:#F5A623; flex:none; }
.cdx__ratingval { font-weight:500; color:#24262b; }
.cdx__ratingcount { font-size:12px; color:#a1a1a6; }
.cdx__ratingcount::before { content:'('; }
.cdx__ratingcount::after { content:')'; }

/* data-adaptive columns: when the whole page has no visit / appt data, the
 * column collapses and the freed width returns to Client + Phone. */
.cdx__table--no-last .cdx__col--last { display:none; }
.cdx__table--no-next .cdx__col--next { display:none; }
.cdx__table--no-next:not(.cdx__table--no-last) .cdx__th--client { width:42%; }
.cdx__table--no-last:not(.cdx__table--no-next) .cdx__th--client { width:42%; }
.cdx__table--no-last.cdx__table--no-next .cdx__th--client { width:48%; }
.cdx__table--no-last.cdx__table--no-next .cdx__th--phone { width:24%; }

.cdx__table td { padding:11px 12px; font-size:13px; color:#24262b; vertical-align:middle;
                 overflow:hidden; text-overflow:ellipsis; transition:background .12s ease; }
.cdx__row { cursor:pointer; }
.cdx__row:hover td { background:#f2f2f7; }
/* selection reads ONLY from the checked (blue) checkbox — no row background
 * tint. A painted selected row was needless noise (Armen, 2026-06-19); the
 * checkmark alone carries selection. Selected rows keep the normal grey hover. */
.cdx__row td:first-child { border-radius:12px 0 0 12px; }
.cdx__row td:last-child { border-radius:0 12px 12px 0; }

/* custom checkbox — Ive-quiet: a fine outline ring at rest (no fill), accent
 * fill only once chosen. A circle, same shape language as the avatar it sits
 * beside. One size everywhere: 22px. */
.cdx__check { appearance:none; -webkit-appearance:none; width:18px; height:18px; border-radius:6px;
              background:transparent; box-shadow:inset 0 0 0 1.5px #d3d6df; cursor:pointer; display:block;
              position:relative; margin:0; padding:0;
              transition:background .15s ease, transform .1s ease, box-shadow .15s ease; }
.cdx__check::before { content:''; position:absolute; inset:-8px; border-radius:10px; } /* hit area */
.cdx__check:hover { box-shadow:inset 0 0 0 1.5px #1d1d1f; }
.cdx__check:active { transform:scale(.88); }
.cdx__check:focus-visible { outline:none; box-shadow:inset 0 0 0 1.5px #1d1d1f, 0 0 0 4px rgba(36, 38, 43,.15); }
.cdx__check:checked, .cdx__check:indeterminate { background:var(--ds-color-interactive); box-shadow:none; }
.cdx__check:checked { animation:cdxBoxPop .3s cubic-bezier(.22,1.4,.36,1); }
/* tick = brandbook "Check circle" glyph (check path only) */
.cdx__check::after { content:''; position:absolute; inset:0;
                     background:center/100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8.53516 12.0003L10.845 14.3091L15.4627 9.69141' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
                     opacity:0; transform:scale(0); transform-origin:center; }
.cdx__check:checked::after { animation:cdxTickPop .26s cubic-bezier(.22,1.2,.36,1) .03s forwards; }
.cdx__check:indeterminate::after { background:#fff; inset:auto; left:50%; top:calc(50% + 0.5px); width:6px; height:1.8px;
                                   margin:0; border-radius:999px; opacity:1; animation:none;
                                   transform:translate(-50%, -50%); }
@keyframes cdxBoxPop { 0% { transform:scale(.85); } 55% { transform:scale(1.08); } 100% { transform:scale(1); } }
@keyframes cdxTickPop { 0% { opacity:0; transform:scale(0); }
                        60% { opacity:1; transform:scale(1.18); }
                        100% { opacity:1; transform:scale(1); } }

/* checkbox sits BEFORE the avatar (its own lead in the Client cell), never
 * overlapping it — the avatar identity always stays visible. The 22px slot is
 * always reserved so the avatar never shifts when the box reveals; the box is
 * quiet (opacity 0) until the row is hovered, focused, or selected. */
.cdx__avslot { position:relative; width:40px; height:40px; flex:none; }
/* checkbox is ALWAYS visible (Armen, 2026-06-19) — the quiet outline ring reads
 * as a calm affordance, not noise, and fills with accent only when chosen. */
.cdx__client > .cdx__check { flex:none; }

/* header: select-all sits before the "Client" label, always visible too. */
.cdx__thclient { display:flex; align-items:center; gap:11px; }
.cdx__check--head { flex:none; }

/* client cell: avatar + a two-line identity (name on top, email beneath) —
 * the Fresha-style row; replaces the old separate Email column. */
.cdx__client { display:flex; align-items:center; gap:11px; min-width:0; }
.cdx__clientmeta { display:flex; flex-direction:column; min-width:0; gap:1px; }
.cdx__nameline { display:flex; align-items:center; gap:8px; min-width:0; }
.cdx__submeta { font-size:12px; color:#8a8d99; white-space:nowrap; overflow:hidden;
                text-overflow:ellipsis; min-width:0; line-height:1.3; }
/* blocked badge (P7) */
.cdx__badge--blocked { background:var(--ds-color-danger-bg); color:var(--ds-color-danger); }
/* tag chips in the list row (P3) — compact variant of the global .oll-tagchip */
.cdx__rowtags { display:inline-flex; flex-wrap:nowrap; align-items:center; gap:5px; flex:none; }
.cdx__rowtags .oll-tagchip { font-size:11px; font-weight:500; padding:2px 8px; }
.cdx__rowtags-more { font-size:11px; font-weight:500; color:#8a8d99; }
.cdx__av { width:40px; height:40px; border-radius:999px; flex:none; display:inline-flex;
           align-items:center; justify-content:center; font-size:14px; font-weight:500; letter-spacing:.02em; }
/* Apple-style empty-state microcopy: an empty cell says what's missing in a quiet,
   short phrase rather than going blank (which read as broken) or shouting a dash. */
.cdx__none { color:#b0b0b6; white-space:nowrap; }
.cdx__av[data-ci="0"] { background:var(--app-theme-wash,#D6E9FF); color:var(--app-theme-accent,#1556A8); }
.cdx__av[data-ci="1"] { background:#FFE0E5; color:#9E2B45; }
.cdx__av[data-ci="2"] { background:#DFF3E7; color:#15704A; }
.cdx__av[data-ci="3"] { background:var(--app-theme-wash,#E6E4FF); color:var(--app-theme-accent,#3A2E96); }
.cdx__av[data-ci="4"] { background:#FFE3D0; color:#8A4214; }
.cdx__av[data-ci="5"] { background:#E6EFE0; color:#3F5A1F; }
.cdx__av[data-ci="6"] { background:#F0DCF7; color:#65267E; }
.cdx__av--photo { position:absolute; inset:0; overflow:hidden; }
.cdx__av--photo > img { width:100%; height:100%; object-fit:cover; display:block; }
.cdx__name { font-size:15px; font-weight:500; color:#24262b; text-decoration:none; min-width:0;
             white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cdx__name:hover { color:#24262b; }
.cdx__name:focus-visible { outline:none; box-shadow:0 0 0 4px rgba(18,19,26,.12); border-radius:6px; }
.cdx__badge { font-size:11px; font-weight:500; padding:2px 8px; border-radius:999px; flex:none;
              background:#f2f2f7; color:#2a2e36; }
.cdx__badge[data-status="active"]    { background:#DCEADD; color:#4F7556; }
.cdx__badge[data-status="returning"] { background:var(--app-theme-wash,#DCE5EF); color:var(--app-theme-accent,#4A6485); }
.cdx__badge[data-status="inactive"]  { background:#F0E0D2; color:#94684A; }
.cdx__badge[data-status="vip"]       { background:#24262b; color:#fff; }
.cdx__badge { position:relative; cursor:default; }
.cdx__badge[data-tip]::after { content:attr(data-tip); position:absolute; left:50%; bottom:calc(100% + 7px);
                               transform:translateX(-50%) translateY(3px); white-space:nowrap;
                               background:#24262b; color:#fff; font-size:11.5px; font-weight:500; padding:5px 9px;
                               border-radius:8px; opacity:0; pointer-events:none; z-index:90;
                               transition:opacity .12s ease, transform .12s ease; box-shadow:0 6px 18px rgba(0,0,0,.2); }
.cdx__badge[data-tip]:hover::after { opacity:1; transform:translateX(-50%) translateY(0); }

/* secondary data hierarchy: email (nearest to ink) → phone → last/next (quiet) */
.cdx__emailtxt { color:#2a2e36; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.cdx__phone { color:#62656f; font-variant-numeric:tabular-nums lining-nums; white-space:nowrap; }
.cdx__phonelink { display:none; } /* desktop uses copy; the tel: link is mobile-only */
.cdx__quiet { color:#62656f; white-space:nowrap; }
.cdx__faint { color:#a1a1a6; white-space:nowrap; }
.cdx__stale { color:#c2643b; white-space:nowrap; } /* "losing" client — last visit 90+ days */
.cdx__dash { color:#d3d6df; }

/* click-to-copy: quiet icon revealed on cell hover, sitting right next to the value */
/* nowrap: the copy button must never wrap below the number — that pushed certain
 * rows (long phones) to two lines, breaking the row rhythm. The value truncates
 * (max-width) so the inline copy always stays on the same line, hugging the value. */
.cdx__copycell { position:relative; white-space:nowrap; }
.cdx__copycell .cdx__emailtxt, .cdx__copycell .cdx__phone { display:inline-block; max-width:calc(100% - 24px); vertical-align:middle; overflow:hidden; text-overflow:ellipsis; }
.cdx__copy { display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; margin-left:4px; border:0; background:transparent; cursor:pointer; color:#c2c2c7; padding:3px;
             border-radius:6px; opacity:0; transition:opacity .12s ease, color .12s ease, background .12s ease; }
.cdx__row:hover .cdx__copy, .cdx__copy:focus-visible { opacity:1; }
.cdx__copy:hover { color:#24262b; background:#e1e3ea; }
@media (hover: none) { .cdx__copy { opacity:1; } }

/* copied → morph the icon into a checkmark that draws itself in, then reverts */
.cdx__copy.is-copied, .cdx__copy.is-copied:hover { opacity:1; color:#1e9e5a; background:transparent; }
.cdx__copychk { animation:cdxCheckPop .3s cubic-bezier(.34,1.56,.64,1); }
.cdx__copychk path { stroke-dasharray:24; stroke-dashoffset:24; animation:cdxCheckDraw .34s .04s ease forwards; }
@keyframes cdxCheckDraw { to { stroke-dashoffset:0; } }
@keyframes cdxCheckPop { 0% { transform:scale(.55); } 60% { transform:scale(1.12); } 100% { transform:scale(1); } }

/* ---------- per-row actions: hover kebab + menu ---------- */
/* must out-specify `.cdx__table td { overflow:hidden }` or the kebab menu
 * (absolutely positioned inside the cell) gets clipped to a sliver */
.cdx__table td.cdx__td--act { text-align:right; overflow:visible; }
.cdx__actwrap { position:relative; display:inline-flex; justify-content:flex-end; }
.cdx__kebab { width:30px; height:30px; border:0; border-radius:999px; background:#f2f2f7; color:#24262b;
              cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
              position:relative; opacity:0; transition:opacity .12s ease, background .12s ease; }
.cdx__kebab::before { content:''; position:absolute; inset:-7px; border-radius:999px; } /* 44px hit area */
.cdx__row:hover .cdx__kebab, .cdx__kebab:focus-visible, .cdx__kebab.is-open { opacity:1; }
.cdx__kebab:hover { background:#e1e3ea; }
.cdx__menu { position:absolute; top:36px; right:0; min-width:198px; background:#fff; border-radius:14px;
             padding:6px; display:none; z-index:60; text-align:left;
             box-shadow:0 6px 16px rgba(15,23,42,.06), 0 20px 44px rgba(15,23,42,.16); }
.cdx__menu.is-open { display:block; }
.cdx__menu--up { top:auto; bottom:36px; }
.cdx__mi { display:flex; width:100%; align-items:center; gap:11px; border:0; background:transparent;
           padding:9px 12px; border-radius:9px; font:inherit; font-size:13.5px; font-weight:500;
           color:#24262b; cursor:pointer; text-align:left; text-decoration:none; white-space:nowrap; }
.cdx__mi:hover, .cdx__mi:focus-visible { background:#f3f5f7; color:#24262b; outline:none; }
.cdx__mi > svg { flex:none; display:block; color:#62656f; }
.cdx__mi--danger, .cdx__mi--danger > svg { color:#b42318; }
.cdx__mi--danger:hover, .cdx__mi--danger:focus-visible { background:#fde8e8; color:#b42318; }
.cdx__msep { height:8px; }
.cdx__miform { margin:0; }
.cdx__raise { position:relative; z-index:80; }

/* touch devices have no hover — the kebab and the (before-avatar) checkboxes
 * stay visible so selection is reachable without a hover state. */
@media (hover: none) {
    .cdx__kebab { opacity:1; }
    .cdx__client > .cdx__check,
    .cdx__check--head { opacity:1; }
}

.cdx__empty { padding:60px 0; text-align:center; color:#62656f; font-size:14px; }
/* empty result set: the column header row is noise without rows under it
   (live search toggles is-empty too) */
.cdx__table.is-empty thead { display:none; }
.cdx__emptytitle { margin:0 0 4px; font-size:15px; font-weight:600; color:#24262b; }
.cdx__emptytext { margin:0; font-size:13.5px; color:#62656f; }

/* (Pagination footer removed 2026-06-17 — replaced by infinite scroll, see
   `.cdx__infload` in the static-card block below.) */

/* (Per-page toast removed — notifications now use the app-wide OlliraToast
   surface; see /assets/css/overlays/toast.css.) */