/* ============================================================
   Feature · clientDetail
   ------------------------------------------------------------
   Every rule is scoped under `.feature-client-detail` so it
   never collides with styles.css / modernize.css / other
   features. Token-driven; no hard-coded color, spacing, or
   radius. Loaded after ui-primitives.css per
   migration/css-token-migration.md "Load order is the contract".

   Created by: Phase R2 — client-detail parent surface.
   ============================================================ */

.feature-client-detail__state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}

.feature-client-detail__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ---- Stale-warning strip. Mirrors clients-list / client-activity. ---- */

.feature-client-detail__stale {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--color-warning, var(--color-accent));
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.feature-client-detail__stale-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* ---- Manual refresh primitive (stale strip recovery button). ---- */

.feature-client-detail__refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-on-accent, #fff);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 120ms ease;
}

.feature-client-detail__refresh-btn:hover:not(:disabled) {
  opacity: 0.9;
}

.feature-client-detail__refresh-btn:disabled,
.feature-client-detail__refresh-btn[data-loading="true"] {
  opacity: 0.6;
  cursor: progress;
}

.feature-client-detail__refresh-error {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-danger, var(--color-accent));
  border-radius: var(--radius-md);
  color: var(--color-danger, var(--color-accent));
  background: var(--color-surface);
}

/* ---- Section-header topology-local extensions (canonical .cd-section
       and .cd-section__head are provided by modernize.css under the
       .client-detail-page root scope). ---- */

.feature-client-detail__section-title {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.feature-client-detail__section-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
}

.feature-client-detail__section-link:hover {
  text-decoration: underline;
}

/* Phase R4 — per-section header action group ([refresh button][link]).
   Keeps section-level affordances bounded to the section header; no
   floating overlays, no orchestration layers. */
.feature-client-detail__section-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* Phase R4 — inline section loading / error placement. Section-scoped:
   a section failure renders here, not at the route level. */
.feature-client-detail__section-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: var(--space-3);
}

/* ---- List primitives (Contacts / Activity). ---- */

.feature-client-detail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.feature-client-detail__list-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-subtle, var(--color-border));
  border-radius: var(--radius-md);
}

.feature-client-detail__list-item-label {
  font-weight: 500;
}

.feature-client-detail__list-item-value {
  min-width: 0;
  flex: 1 1 auto;
  word-break: break-word;
}

.feature-client-detail__list-more {
  padding: var(--space-1) var(--space-3);
  text-align: center;
}

/* ============================================================
   S1 — design-transfer primitives (clientDetail.html port).
   Feature-scoped under .feature-client-detail. Token-driven.
   Additive only; existing rules above remain unchanged.
   ============================================================ */

/* ---- S17-R canonical de-aliasing.
       Page root, cd-header*, cd-grid, cd-main, cd-sidebar, cd-card*,
       cd-section + cd-section__head, avatar* (sizes + colors),
       type-pill*, status-pill*, cd-back are now consumed directly
       from modernize.css under the .client-detail-page root scope.
       Feature-local rules above (and below) carry only topology-local
       extensions: freshness, modal, bridge, action-btn, section
       continuation, list/row vocabulary, share/task/prefs primitives,
       stamps. The .cd-card__text--muted modifier remains feature-local
       because modernize defines only the base. ---- */

.feature-client-detail__cd-card-text--muted {
  color: var(--color-text-tertiary);
  font-style: italic;
}

/* ---- Stamps — audit-metadata grouping (Created / Updated /
       Власник запису). Mirrors design/clientDetail.html lines
       677-693. S10 completed the third semantic slot in the React
       renderer; the rules below already support N rows without
       per-row variant CSS. No new class needed. ---- */
.feature-client-detail__stamps {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
}

.feature-client-detail__stamps-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0;
  font-size: var(--font-size-xs);
}

.feature-client-detail__stamps-row dt {
  margin: 0;
  color: var(--color-text-tertiary);
}

.feature-client-detail__stamps-row dd {
  margin: 0;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}

/* ---- Contacts: per-row channel icon + primary flag. ---- */
.feature-client-detail__contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-circle);
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.feature-client-detail__contact-icon--phone {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.feature-client-detail__contact-icon--email {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.feature-client-detail__contact-icon--telegram,
.feature-client-detail__contact-icon--whatsapp,
.feature-client-detail__contact-icon--viber {
  background: var(--color-bg-hover);
  color: var(--color-accent);
}

.feature-client-detail__primary-flag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

/* ============================================================
   S2 — semantic vocabulary restoration (R1-a / R2-d).
   ------------------------------------------------------------
   Action vocabulary split. CRUD actions (Edit, retry, navigation
   recovery) use __action-btn; freshness actions (Refresh, retry-
   stale) keep __refresh-btn. The two are visually distinguishable
   so identity-header CRUD is no longer demoted below freshness
   chrome (design/design-map.md §A.3 — action primitives).
   Section-header refresh becomes icon-only so the CRUD section
   link remains the section's primary affordance.
   ============================================================ */

/* ---- CRUD action button (Edit / retry / navigation). ---- */
.feature-client-detail__action-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-on-accent, var(--color-text-on-brand, #fff));
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, opacity 120ms ease;
}

.feature-client-detail__action-btn:hover:not(:disabled) {
  background: var(--color-accent-hover, var(--color-accent));
  border-color: var(--color-accent-hover, var(--color-accent));
}

.feature-client-detail__action-btn:disabled,
.feature-client-detail__action-btn[data-loading="true"] {
  opacity: 0.6;
  cursor: progress;
}

.feature-client-detail__action-btn--ghost {
  background: transparent;
  color: var(--color-accent);
}

.feature-client-detail__action-btn--ghost:hover:not(:disabled) {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

/* ---- Destructive CRUD modifier — S7 T-4 destructive workflow
       (R8 §4 T-4). Reuses --color-danger from tokens.css and the
       existing __action-btn shape; only the chromatic role changes.
       Used by the parent-header "Видалити" trigger and the
       confirmation modal's confirm button. Local to the feature;
       expresses an already-existing design semantic
       (design/clientDetail.html line 196: action-btn--danger).
       SR-1 / SR-3 compliant — minimal local modifier for a
       semantic already present in the design source-of-truth. ---- */
.feature-client-detail__action-btn--danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-on-accent, var(--color-text-on-brand, #fff));
}

.feature-client-detail__action-btn--danger:hover:not(:disabled) {
  background: var(--color-danger);
  border-color: var(--color-danger);
  filter: brightness(0.92);
}

/* ---- Subordinate icon-only refresh button for section headers.
       Demotes per-section freshness so the section CRUD link
       remains the section's primary affordance (D3 R2-d). ---- */
.feature-client-detail__refresh-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--color-border-subtle, var(--color-border));
  border-radius: var(--radius-circle);
  background: transparent;
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.feature-client-detail__refresh-icon-btn:hover:not(:disabled) {
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  border-color: var(--color-border, var(--color-border-subtle));
}

.feature-client-detail__refresh-icon-btn:disabled,
.feature-client-detail__refresh-icon-btn[data-loading="true"] {
  opacity: 0.5;
  cursor: progress;
}

/* ============================================================
   S4 — feature-local T-1 parent-owned modal (R8 §4 T-1).
   ------------------------------------------------------------
   Feature-scoped. Not extracted, not portalled, not shared.
   Backdrop + dialog rendered inline by ClientEditModal under
   parent useState control. No modal manager, no registry, no
   z-index framework.
   ============================================================ */

.feature-client-detail__modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
  overflow-y: auto;
}

.feature-client-detail__modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.feature-client-detail__modal-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  margin: auto 0;
  background: var(--color-bg-surface, var(--color-surface));
  border: 1px solid var(--color-border-subtle, var(--color-border));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.25));
  max-height: calc(100vh - var(--space-12));
  overflow: hidden;
}

.feature-client-detail__modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-subtle, var(--color-border));
  flex-shrink: 0;
}

.feature-client-detail__modal-title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  min-width: 0;
}

.feature-client-detail__modal-title i {
  color: var(--color-text-tertiary);
  font-size: 0.9em;
}

.feature-client-detail__modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--color-border-subtle, var(--color-border));
  border-radius: var(--radius-circle);
  background: transparent;
  color: var(--color-text-tertiary);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.feature-client-detail__modal-close:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
}

.feature-client-detail__modal-body {
  padding: var(--space-5);
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

/* ============================================================
   S7 — feature-local T-4 destructive workflow (R8 §4 T-4).
   ------------------------------------------------------------
   Reuses the S4 modal shell. Adds: a narrower dialog modifier
   suited to the confirmation copy, a footer for the Cancel /
   Delete action pair, and inline destructive-warning text.
   Local; deletable; topology-scoped (SR-3). Expresses the
   destructive semantic the design source-of-truth already
   carries (design/clientDetail.html lines 945–963 cd-delete-modal).
   ============================================================ */

.feature-client-detail__modal-dialog--sm {
  max-width: 480px;
}

.feature-client-detail__modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border-subtle, var(--color-border));
  flex-shrink: 0;
}

.feature-client-detail__delete-question {
  margin: 0 0 var(--space-3);
  color: var(--color-text-primary);
}

.feature-client-detail__delete-cascade {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-danger);
}

.feature-client-detail__delete-cascade i {
  margin-top: 0.15em;
  flex-shrink: 0;
}

.feature-client-detail__delete-error {
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

/* ============================================================
   S8 — narrative tasks region (R8 §4 T-3 continuation).
   ------------------------------------------------------------
   Reuses the existing __section / __section-header / __list /
   __list-item / __refresh-icon-btn / __section-link primitives.
   Adds ONLY the topology-local task vocabulary the design source-
   of-truth already names (design/clientDetail.html lines 566–624
   — task__check, task__title, task__desc, task__meta, priority
   priority--high/medium/low, task__due, task-status
   task-status--todo/in_progress/done, task--overdue, task--done).
   No new section primitive, no new modal primitive — both are
   inherited.
   SR-1 / SR-3 / SR-4 compliant: minimal local expression of design
   semantics, scoped under .feature-client-detail.
   ============================================================ */

.feature-client-detail__list-item--task {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: var(--space-3);
}

.feature-client-detail__list-item--task-overdue {
  border-color: var(--color-danger);
  background: var(--color-danger-soft);
}

.feature-client-detail__list-item--task-done {
  opacity: 0.7;
}

.feature-client-detail__task-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--color-text-tertiary);
  flex-shrink: 0;
  margin-top: 0.1em;
}

.feature-client-detail__task-check[data-state="done"] {
  color: var(--color-accent);
}

.feature-client-detail__task-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  flex: 1 1 auto;
}

.feature-client-detail__task-title {
  font-weight: 600;
  word-break: break-word;
}

.feature-client-detail__list-item--task-done .feature-client-detail__task-title {
  text-decoration: line-through;
}

.feature-client-detail__task-desc {
  margin: 0;
  color: var(--color-text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}

.feature-client-detail__task-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-1);
  font-size: var(--font-size-xs, 0.75rem);
}

.feature-client-detail__priority {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--color-border-subtle, var(--color-border));
  background: var(--color-surface);
  line-height: 1;
}

.feature-client-detail__priority--low {
  color: var(--color-text-secondary);
}

.feature-client-detail__priority--medium {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.feature-client-detail__priority--high {
  color: var(--color-danger);
  border-color: var(--color-danger);
}

.feature-client-detail__task-due {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-secondary);
}

.feature-client-detail__task-due--overdue {
  color: var(--color-danger);
  font-weight: 500;
}

.feature-client-detail__task-status {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill, 999px);
  background: var(--color-bg-subtle, var(--color-surface));
  color: var(--color-text-secondary);
  line-height: 1;
}

.feature-client-detail__task-status--todo {
  background: var(--color-bg-subtle, var(--color-surface));
  color: var(--color-text-secondary);
}

.feature-client-detail__task-status--in_progress {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.feature-client-detail__task-status--done {
  background: var(--color-bg-subtle, var(--color-surface));
  color: var(--color-text-tertiary);
}

/* ============================================================
   S9 — preferences narrative region (R8 §4 T-7 healthy
   duplication; narrative dossier continuity per design-map §4).
   ------------------------------------------------------------
   Reuses the existing __section / __section-header primitives.
   Adds ONLY the topology-local prefs vocabulary the design
   source-of-truth already names (design/clientDetail.html lines
   286-315 — prefs-grid, pref-row). dt/dd display is structurally
   the same shape as the older (currently unused) __summary-grid
   rules, but per SR-2 the semantic meaning differs ("identity
   summary" vs "buyer's search criteria") so the class names
   stay distinct. Visual rhythm matches the existing card grid
   via shared spacing tokens.
   ============================================================ */

.feature-client-detail__prefs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3) var(--space-5);
  margin: 0;
}

.feature-client-detail__pref-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  min-width: 0;
}

.feature-client-detail__pref-label {
  margin: 0;
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-tertiary);
}

.feature-client-detail__pref-value {
  margin: 0;
  color: var(--color-text-primary);
  word-break: break-word;
}

/* ============================================================
   B3 — owner-side share-management restoration
   (design/clientDetail.html lines 657-675 — cd-card "Поділено з",
   shares-list, share-row, share-perm, share-perm--readonly,
   row-action--danger).
   ------------------------------------------------------------
   Reuses every available primitive:
     * __cd-card / __cd-card-head / __cd-card-head h3+i  (sidebar
       card envelope and head)
     * __section-link                                    (+ trigger)
     * __refresh-icon-btn                                (per-section
       refresh — freshness vocabulary, R2-d aware)
     * __action-btn / __action-btn--ghost /
       __action-btn--danger                              (modal
       footer pair on both share modals)
     * __modal* / __modal-dialog--sm / __modal-foot      (S4 + S7
       modal shells)
     * __delete-question / __delete-cascade /
       __delete-error                                    (S7 destructive
       confirmation copy)
     * __avatar / __avatar--sm                           (recipient
       identity primitive)
     * ui-form / ui-form__rows / ui-form__messages /
       ui-form__actions / ui-form__button*               (create modal)
   New classes are STRICTLY topology-local and scoped under
   .feature-client-detail; each expresses semantics the design
   source-of-truth already names (SR-1 / SR-3 / SR-4):
     * __cd-card-actions       — head needs to hold two icon
       affordances (+ create / refresh) — design source has only
       one; this is topology-local growth (SR-3 — minimal,
       scoped, semantically subordinate).
     * __share-list            — list reset for the sidebar row
       set; tighter than __list (main-column density).
     * __share-row             — design's "share-row" verbatim
       (avatar + body + revoke).
     * __share-row--expired    — chromatic intent for a row whose
       is_active_now flag is false (B2 F-I derived flag —
       backend computes; frontend renders).
     * __share-row-body        — design's "share-row__body"
       verbatim.
     * __share-row-name        — strong-weight recipient label.
     * __share-row-meta        — small inline group (perm +
       expiry).
     * __share-perm            — design's "share-perm" verbatim
       (small permission pill).
     * __share-perm--readonly  — design's "share-perm--readonly"
       verbatim.
     * __share-perm--editor    — design's only carries
       --readonly; the editor case is the unmarked default in
       the design. React renders a positive label for it
       ("Може редагувати") so a chromatic intent variant is
       added here (SR-3 — minimal local expression of an
       already-present semantic distinction can_edit
       True/False).
     * __share-row-expiry      — small inline meta text for
       "до DD.MM.YYYY".
     * __share-row-revoke      — design's "row-action
       row-action--danger" verbatim. A row-level destructive
       affordance distinct from the freshness __refresh-icon-btn
       (R2-d action-vs-freshness vocabulary split) and from the
       full-size __action-btn--danger (which is a parent-header
       CRUD primary; the row-revoke is icon-only and smaller).
   ============================================================ */

/* Card head — extended to hold two actions (create + refresh).
   The base __cd-card-head is flex/space-between with one h3 +
   one trailing element; wrapping the two buttons in this group
   keeps the rhythm intact. */
.feature-client-detail__cd-card-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.feature-client-detail__share-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.feature-client-detail__share-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.feature-client-detail__share-row--expired {
  opacity: 0.55;
}

.feature-client-detail__share-row-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  flex: 1 1 auto;
}

.feature-client-detail__share-row-name {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  word-break: break-word;
}

.feature-client-detail__share-row-meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  min-width: 0;
}

.feature-client-detail__share-perm {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 500;
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
}

.feature-client-detail__share-perm--readonly {
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
}

.feature-client-detail__share-perm--editor {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.feature-client-detail__share-row-expiry {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   C1 — viewings section + property picker (CRM-WORKFLOW-C1).
   Topology-local extensions only; reuses list/modal primitives.
   ============================================================ */

.feature-client-detail__list-item--viewing {
  align-items: flex-start;
}

.feature-client-detail__viewing-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  flex: 1 1 auto;
}

.feature-client-detail__viewing-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.feature-client-detail__viewing-property {
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  min-width: 0;
  word-break: break-word;
}

.feature-client-detail__viewing-property:hover {
  text-decoration: underline;
}

.feature-client-detail__viewing-status {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 500;
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
}

.feature-client-detail__viewing-status--scheduled {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.feature-client-detail__viewing-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.feature-client-detail__viewing-datetime,
.feature-client-detail__viewing-agent {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.feature-client-detail__viewing-notes {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ============================================================
   D1 — property matches section (CRM-WORKFLOW-D1).
   Topology-local extensions only; reuses list/section primitives.
   ============================================================ */

.feature-client-detail__list-item--match {
  align-items: flex-start;
}

.feature-client-detail__match-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  flex: 1 1 auto;
}

.feature-client-detail__match-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.feature-client-detail__match-property {
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  min-width: 0;
  word-break: break-word;
}

.feature-client-detail__match-property:hover {
  text-decoration: underline;
}

.feature-client-detail__match-score {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
}

.feature-client-detail__match-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.feature-client-detail__match-created {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.feature-client-detail__match-status {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 500;
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
}

.feature-client-detail__match-status--new {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.feature-client-detail__match-status-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.feature-client-detail__match-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2);
}

.feature-client-detail__match-status-label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
}

.feature-client-detail__match-status-label-text {
  color: var(--color-text-secondary);
}

.feature-client-detail__match-status-select {
  min-width: 12rem;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
}

.feature-client-detail__match-save-btn {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
}

.feature-client-detail__match-save-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.feature-client-detail__match-row-error {
  font-size: var(--font-size-sm);
  color: var(--color-danger);
}

.feature-client-detail__property-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.feature-client-detail__property-search {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}

.feature-client-detail__property-search .ui-form__button {
  flex-shrink: 0;
}

.feature-client-detail__property-picker-state {
  display: flex;
  justify-content: center;
  padding: var(--space-3);
}

.feature-client-detail__property-picker-error {
  margin: 0;
}

.feature-client-detail__property-options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 240px;
  overflow-y: auto;
}

.feature-client-detail__property-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.feature-client-detail__property-option:hover:not(:disabled) {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.feature-client-detail__property-option--selected {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.feature-client-detail__property-option:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.feature-client-detail__property-option-title {
  font-weight: 600;
  color: var(--color-text-primary);
}

.feature-client-detail__property-option-meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* VISUAL-READINESS-D1 — keep header action cluster on one row at desktop (DRG-017). */
@media (min-width: 1200px) {
  .client-detail-page .cd-header__actions {
    flex-wrap: nowrap;
    gap: var(--space-2);
  }

  .client-detail-page .cd-header__actions .action-btn {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
}

/* ============================================================
   CRM-CLIENT-CONTACTS-MATCHING-A1 — preferences empty / editor,
   match cards grid. Topology-local under .feature-client-detail.
   ============================================================ */

.feature-client-detail__prefs-empty,
.feature-client-detail__matches-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.feature-client-detail__prefs-range {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

@media (max-width: 640px) {
  .feature-client-detail__prefs-range {
    grid-template-columns: 1fr;
  }
}

.feature-client-detail__prefs-form-actions {
  flex-wrap: wrap;
  gap: var(--space-2);
}

.feature-client-detail__prefs-form-actions .ui-form__button {
  min-height: 44px;
}

.feature-client-detail__prefs-clear-btn {
  margin-right: auto;
  background: transparent;
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
}

.feature-client-detail__prefs-clear-btn:hover:not(:disabled),
.feature-client-detail__prefs-clear-btn:focus-visible:not(:disabled) {
  background: var(--color-danger-soft, var(--color-bg-subtle));
  color: var(--color-danger);
  outline: none;
}

.feature-client-detail__prefs-clear-confirm {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-danger-soft, var(--color-bg-subtle));
}

.feature-client-detail__prefs-clear-title {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.feature-client-detail__prefs-clear-desc {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.feature-client-detail__prefs-clear-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.feature-client-detail__modal-dialog--prefs {
  max-width: 36rem;
}

.feature-client-detail__matches-count {
  font-weight: 500;
  color: var(--color-text-secondary);
}

.feature-client-detail__matches-criteria {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  word-break: break-word;
}

.feature-client-detail__matches-criteria-label {
  font-weight: 600;
  color: var(--color-text-primary);
}

.feature-client-detail__matches-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.feature-client-detail__matches-filter {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 10rem;
}

.feature-client-detail__matches-filter-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

.feature-client-detail__matches-pending {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: var(--font-size-sm);
}

.feature-client-detail__matches-actions {
  flex-wrap: wrap;
}

.feature-client-detail__matches-actions .cd-add-btn {
  min-height: 44px;
}

.feature-client-detail__matches-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (max-width: 768px) {
  .feature-client-detail__matches-grid {
    grid-template-columns: 1fr;
  }
}

.feature-client-detail__match-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  overflow: hidden;
}

.feature-client-detail__match-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--color-bg-subtle);
}

.feature-client-detail__match-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.feature-client-detail__match-card-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--color-text-tertiary);
  font-size: 1.75rem;
}

.feature-client-detail__match-card-media .feature-client-detail__match-status {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
}

.feature-client-detail__match-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  min-width: 0;
}

.feature-client-detail__match-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.feature-client-detail__match-card-location {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.feature-client-detail__match-status--contacted {
  background: var(--color-success-soft, var(--color-bg-subtle));
  color: var(--color-success, var(--color-text-secondary));
}

.feature-client-detail__match-status--viewing {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.feature-client-detail__match-status--rejected {
  background: var(--color-danger-soft, var(--color-bg-subtle));
  color: var(--color-danger, var(--color-text-secondary));
}

.feature-client-detail__match-save-btn {
  min-height: 44px;
  min-width: 44px;
}

.feature-client-detail__matches-load-more {
  display: flex;
  justify-content: center;
  margin-top: var(--space-4);
}

.feature-client-detail__matches-load-more .feature-client-detail__action-btn {
  min-height: 44px;
}

.feature-client-detail__section--contacts .cd-add-btn {
  min-height: 44px;
}