/* ==========================================================================
   Clients directory — canonical shell + colour contract (2026-08-21)

   The original directory skin predated the app theme and hard-coded a light
   canvas into every surface. This layer deliberately maps the whole workspace
   to the shared design tokens, so light and dark keep the same hierarchy:
   page backdrop → lifted workspace → muted controls → focused blue action.
   ========================================================================== */

.ollira-stage:has(main.clients-index-page) {
    background: var(--ds-color-bg-page);
}

.cdx {
    container-type: inline-size;
    background: var(--ds-color-bg-canvas);
    color: var(--ds-color-text);
    border-radius: var(--ds-shell-panel-radius, 14px);
    box-shadow: var(--ds-shell-panel-shadow, var(--ds-shadow-sm));
}

.cdx__title,
.cdx__table td,
.cdx__name,
.cdx__ratingval,
.cdx__selcount,
.cdx__emptytitle {
    color: var(--ds-color-text);
}

.cdx__title {
    font-size: clamp(1.45rem, 1.15rem + .35vw, 1.7rem);
    font-weight: 650;
    letter-spacing: 0;
}

.cdx__titlecount {
    min-width: 26px;
    height: 26px;
    margin-left: 8px;
    background: var(--ds-color-bg-muted);
    color: var(--ds-color-text-secondary);
    transform: translateY(-2px);
}

.cdx__new,
.cdx__dupcta,
.cdxdr__btn,
.cdxcfm__btn,
.cdxbulk__btn,
.cdxfd__btn,
.cdximp__btn {
    border-radius: var(--ds-button-radius, 20px);
}

.cdx__new {
    min-height: 40px;
    padding-inline: 20px;
    font-size: 14px;
    font-weight: 650;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--ds-color-interactive) 24%, transparent);
}

.cdx__new:hover,
.cdx__dupcta:hover {
    box-shadow: 0 8px 22px color-mix(in srgb, var(--ds-color-interactive) 28%, transparent);
}

.cdx__search,
.cdx__ddbtn,
.cdx__pillbtn,
.cdx__iconpill,
.cdx__selclear,
.cdx__kebab,
.cdxdr__input,
.cdxcfm__btn,
.cdxbulk__newtag,
.cdxbulk__btn,
.cdxfd__cbx,
.cdxfd__btn,
.cdximp__steps li::before,
.cdximp__close,
.cdximp__mapsel,
.cdximp__tab,
.cdximp__btn {
    background: var(--ds-color-bg-muted);
    color: var(--ds-color-text);
}

.cdx__search,
.cdx__ddbtn {
    height: 40px;
}

.cdx__search {
    width: min(300px, 34vw);
    padding-inline: 15px;
}

.cdx__searchinput,
.cdxdr__input,
.cdxbulk__newtag,
.cdximp__mapsel {
    color: var(--ds-color-text);
}

.cdx__searchinput::placeholder,
.cdxdr__input::placeholder,
.cdxbulk__newtag::placeholder {
    color: var(--ds-color-text-tertiary);
}

.cdx__search:focus-within,
.cdxdr__input:focus,
.cdxbulk__newtag:focus,
.cdximp__mapsel:focus {
    background: var(--ds-color-bg-subtle);
    box-shadow: inset 0 0 0 2px var(--ds-color-focus-ring-ui);
}

.cdx__ddbtn:hover,
.cdx__pillbtn:hover,
.cdx__iconpill:hover,
.cdx__selclear:hover,
.cdx__kebab:hover,
.cdxdr__close:hover,
.cdxdr__btn:hover,
.cdxcfm__btn:hover,
.cdxbulk__btn:hover,
.cdxfd__close:hover,
.cdxfd__btn:hover,
.cdximp__close:hover,
.cdximp__tab:hover,
.cdximp__btn:hover {
    background: var(--ds-color-bg-surface-hover);
    color: var(--ds-color-text);
}

.cdx__ddhint,
.cdx__ddchev,
.cdx__searchicon,
.cdx__filtersico,
.cdx__submeta,
.cdx__rowtags-more,
.cdx__phone,
.cdx__quiet,
.cdx__empty,
.cdx__emptytext,
.cdxdr__opt,
.cdxcfm__text,
.cdxbulk__text,
.cdxbulk__none,
.cdxfd__optcount,
.cdxfd__secchev,
.cdximp__steps li,
.cdximp__lead,
.cdximp__dropsub,
.cdximp__rownum,
.cdximp__empty,
.cdximp__donetext {
    color: var(--ds-color-text-secondary);
}

.cdx__none,
.cdx__faint,
.cdx__ratingcount,
.cdx__ddhead,
.cdx__table th,
.cdx__sorth,
main.clients-index-page .cdx__infload {
    color: var(--ds-color-text-tertiary);
}

.cdx__emailtxt {
    color: var(--ds-color-text-secondary);
}

.cdx__table th,
main.clients-index-page .cdx__bar {
    background: var(--ds-color-bg-canvas);
}

.cdx__table th,
main.clients-index-page .cdx__table.is-stuck th {
    box-shadow: inset 0 -1px 0 var(--ds-color-divider);
}

.cdx__table td {
    padding-block: 10px;
}

.cdx__row:hover td {
    background: var(--ds-color-bg-hover);
}

.cdx__row:focus-visible {
    outline: none;
}

.cdx__row:focus-visible td {
    background: var(--ds-color-bg-selected);
}

.cdx__check {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--ds-color-border-strong);
}

.cdx__check:hover,
.cdx__check:focus-visible {
    box-shadow: inset 0 0 0 1.5px var(--ds-color-interactive), 0 0 0 3px var(--ds-color-focus-ring);
}

.cdx__avslot,
.cdx__av {
    width: 38px;
    height: 38px;
}

/* avatar-system.css intentionally makes every avatar host position:relative.
   A directory photo is not another host, though: it is the image layer that
   must cover the initials inside the fixed slot. The extra class raises this
   rule above the shared host selector and prevents a second, clipped circle
   from entering the row flow. */
.cdx__avslot > .cdx__av.cdx__av--photo {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    background-color: transparent;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Incomplete profiles stay discoverable without painting every row as an
   error. Amber is an attention state; destructive red remains reserved for
   blocked/delete/failure states. */
.cdx .oll-avdot {
    top: 4px;
    right: 3px;
    width: 8px;
    height: 8px;
    transform: translate(50%, -50%);
    background: var(--status-pending);
    box-shadow: 0 0 0 2px var(--ds-color-bg-canvas);
}

.cdx__badge {
    background: var(--ds-color-bg-muted);
    color: var(--ds-color-text-secondary);
}

.cdx__badge[data-status="active"] {
    background: var(--ds-color-success-bg);
    color: var(--ds-color-success);
}

.cdx__badge[data-status="returning"] {
    background: var(--ds-color-interactive-muted);
    color: var(--ds-color-interactive);
}

.cdx__badge[data-status="inactive"] {
    background: var(--ds-color-warning-bg);
    color: var(--ds-color-warning-text);
}

.cdx__badge[data-status="vip"] {
    background: var(--ds-color-bg-muted);
    color: var(--ds-color-text);
}

.cdx__badge[data-tip]::after,
.cdx__menu,
.cdx__ddmenu {
    background: var(--ds-color-bg-subtle);
    color: var(--ds-color-text);
    box-shadow: var(--ds-shadow-md);
}

.cdx__ddopt,
.cdx__mi,
.cdxfd__sechd,
.cdxfd__optlabel,
.cdxfd__secico,
.cdxfd__optcheck {
    color: var(--ds-color-text);
}

.cdx__ddopt:hover,
.cdx__mi:hover,
.cdx__mi:focus-visible,
.cdxfd__opt:hover {
    background: var(--ds-color-bg-hover);
    color: var(--ds-color-text);
}

.cdx__ddsep,
.cdxfd__sec,
.cdximp__head,
.cdximp__foot,
.cdximp__table th,
.cdximp__table td {
    border-color: var(--ds-color-divider);
}

.cdx__ddsep {
    background: var(--ds-color-divider);
}

.cdx__dup {
    background: var(--ds-color-interactive-muted);
    box-shadow: inset 0 0 0 1px var(--ds-color-interactive-border);
}

.cdx__duptitle,
.cdxdr__title,
.cdxcfm__title,
.cdxbulk__title,
.cdxfd__title,
.cdxfd__sectitle,
.cdximp__title,
.cdximp__droptitle,
.cdximp__maplabel,
.cdximp__donetitle {
    color: var(--ds-color-text);
}

.cdx__dupsub {
    color: var(--ds-color-text-secondary);
}

.cdxdr__panel,
.cdxdr__foot--full,
.cdxcfm__card,
.cdxbulk__card,
.cdxfd__panel,
.cdxfd__foot,
.cdximp__panel {
    background: var(--ds-color-bg-canvas);
    color: var(--ds-color-text);
}

.cdxdr__close,
.cdxfd__close {
    background: var(--ds-color-bg-muted);
    color: var(--ds-color-text);
}

.cdxdr__lbl {
    color: var(--ds-color-text-secondary);
}

.cdxdr__foot--full,
.cdxfd__foot {
    box-shadow: 0 -10px 24px color-mix(in srgb, var(--ds-color-bg-page) 42%, transparent);
}

.cdximp__drop {
    background: var(--ds-color-bg-subtle);
    box-shadow: inset 0 0 0 1px var(--ds-color-border-subtle);
}

.cdximp__tablewrap {
    box-shadow: inset 0 0 0 1px var(--ds-color-border-subtle);
}

.cdximp__table th {
    background: var(--ds-color-bg-subtle);
}

.cdximp__table td {
    color: var(--ds-color-text);
}

main.clients-index-page .cdx__scroll {
    scrollbar-color: var(--ds-color-border-strong) transparent;
}

main.clients-index-page .cdx__scroll::-webkit-scrollbar-thumb {
    background: var(--ds-color-border-strong);
    border-color: transparent;
}

main.clients-index-page .cdx__scroll:hover::-webkit-scrollbar-thumb,
main.clients-index-page .cdx__scroll::-webkit-scrollbar-thumb:hover {
    background: var(--ds-color-text-tertiary);
    background-clip: padding-box;
}

.cdx__segment-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
    padding: 10px 14px;
    color: var(--ds-color-text-secondary);
    background: var(--ds-color-bg-muted);
    border: 1px solid var(--ds-color-border-subtle);
    border-radius: 8px;
}

.cdx__segment-context-copy {
    min-width: 0;
    font-size: 13px;
    font-weight: 500;
}

.cdx__segment-context-copy strong { color: var(--ds-color-text); }

.cdx__segment-context-clear {
    flex: 0 0 auto;
    color: var(--ds-color-interactive);
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
}

.cdx__segment-context-clear:hover { text-decoration: underline; }
.cdx__segment-context-clear:focus-visible {
    outline: 2px solid var(--ds-color-focus-ring);
    outline-offset: 3px;
    border-radius: 4px;
}

html[data-app-theme="dark"] .cdx__av[data-ci="0"] { background:var(--app-theme-a-1800,rgba(59,146,255,.18)); color:var(--app-theme-line,#8fc2ff); }
html[data-app-theme="dark"] .cdx__av[data-ci="1"] { background:rgba(255,92,120,.16); color:#ff9bad; }
html[data-app-theme="dark"] .cdx__av[data-ci="2"] { background:rgba(34,197,138,.16); color:#73e0b9; }
html[data-app-theme="dark"] .cdx__av[data-ci="3"] { background:var(--app-theme-a-1800,rgba(155,133,255,.18)); color:var(--app-theme-wash,#c0b2ff); }
html[data-app-theme="dark"] .cdx__av[data-ci="4"] { background:rgba(255,142,72,.16); color:#ffb27e; }
html[data-app-theme="dark"] .cdx__av[data-ci="5"] { background:rgba(145,178,89,.16); color:#b8d486; }
html[data-app-theme="dark"] .cdx__av[data-ci="6"] { background:rgba(208,115,226,.16); color:#dfa2ec; }

/* Columns respond to the workspace width, not the browser viewport. This is
   essential when the sidebar is expanded: lower-value columns step away before
   names, phones or actions begin truncating into one another. */
@container (max-width: 1020px) {
    .cdx__col--reviews { display: none; }
    .cdx__th--client { width: 36%; }
    .cdx__th--phone { width: 16%; }
    .cdx__th--sales,
    .cdx__th--last,
    .cdx__th--next { width: 14%; }
}

@container (max-width: 830px) {
    .cdx__col--last { display: none; }
    .cdx__th--client { width: 43%; }
    .cdx__th--phone { width: 20%; }
    .cdx__th--sales,
    .cdx__th--next { width: 16%; }
}

@container (max-width: 660px) {
    .cdx { padding: 20px 16px; }
    .cdx__headrow { align-items: flex-start; }
    .cdx__bar { gap: 8px; }
    .cdx__searchform { flex: 1 1 100%; }
    .cdx__search { width: 100%; }
    .cdx__col--sales { display: none; }
    .cdx__th--client { width: 55%; }
    .cdx__th--phone { width: 27%; }
    .cdx__col--next { display: none; }
    .cdx__rowtags { display: none; }
    .cdx__segment-context {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }
}