/* ============================================================================
   ATLAS V6 · Tier-2 polish — CLIENT CRM / "Relationship Health"
   Surface: data-view="clientcare"  (#view-clientcare)        ·  2026-06-29
   ----------------------------------------------------------------------------
   Load order: after v6-crm.css + v6-crm-aug.css + v6-polish.css, BEFORE
   v6-lock.css. Single-class specificity therefore wins over every base v6
   sheet by later load order. No !important is used anywhere in this file —
   nothing here needs to override the v6-lock chrome/theme lock.

   Defects fixed (from baseline atlas-baseline-clientcrm.png):
     #1  KPI cards had an INVERTED hierarchy — a tiny GOLD em-dash on top with
         the label dominating below. Re-ranked: the VALUE is the hero (30px bold
         --ink; an em-dash renders the same size when there's no data), the label
         recedes (small, --muted), and the gold accent is demoted to a thin
         top-rule. Flush --shadow-card, 8px radius, calm hover.
     #2  The table "empty state" was one muted line floating in a white void.
         Rebuilt on the reusable .v6-empty-state primitive (#4) — CSS mark +
         confident headline + muted sub + optional CTA, comfortably centered to
         fill the panel. (Needs the small JS markup swap noted in the handoff;
         degrades gracefully without it.)
     #3  Data-table craft — header row, zebra + row hover, the "+ Add Contact"
         button, the search field, and the All/Bryan/Nicole/Kasey filter chips
         refined to an enterprise grade.
     #4  Authors the canonical, surface-agnostic .v6-empty-state system the rest
         of the app (Today / Pipeline / Trust Rail) can reuse verbatim.

   Hard rules honored: token values only (gold-in-rgba == the --gold token, the
   convention the base sheets already use); never fabricates counts (em-dash or
   a genuine empty state only); no body scroll at 1920×1080 (the inner table
   scrolls, the frame does not); voice + routing IDs untouched (visual-only).
   Motion gated by prefers-reduced-motion. Contrast ≥4.5:1 (labels use --muted,
   not --faint, for AA on the cream surface).
   ============================================================================ */


/* ── #1 · KPI cards — value-first hierarchy ───────────────────────────────── */
.v6-crm-metrics { gap: 14px; margin-bottom: 16px; }

.v6-crm-tile {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 17px 18px 15px;
  box-shadow: var(--shadow-card);          /* flush, not the old floating 0 10px 24px */
  overflow: hidden;
  transition: box-shadow .16s ease, transform .16s ease;
}
/* Gold accent demoted to a thin top-rule — present, never the hero (single accent). */
.v6-crm-tile::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold);
}
.v6-crm-tile:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}

/* The VALUE leads — large, bold, ink. An em-dash renders at the same size,
   so "no data" reads as a deliberate placeholder, never a fabricated number. */
.v6-crm-tile-val {
  font: 800 30px/1.05 var(--font-display);
  letter-spacing: -.012em;
  color: var(--ink);
  margin-bottom: 5px;
}
/* The LABEL recedes — small + muted, sits quietly beneath the number. */
.v6-crm-tile-label {
  font: 600 12px/1.25 var(--font-ui);
  letter-spacing: .01em;
  color: var(--muted);
}


/* ── #3 · Toolbar — search field + owner filter chips ─────────────────────── */
.v6-crm-search {
  height: 40px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 14px;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.v6-crm-search::placeholder { color: var(--faint); }
.v6-crm-search:focus {
  border-color: var(--gold);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--champagne-soft);   /* calm gold focus ring */
}

.v6-owner-chips { gap: 7px; }
.v6-owner-chip {
  height: 36px;
  padding: 0 13px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font: 650 13px var(--font-ui);
  transition: color .14s ease, background .14s ease, border-color .14s ease;
}
.v6-owner-chip:hover {
  color: var(--ink);
  background: var(--surface-3);
  border-color: var(--line-strong);
}
.v6-owner-chip.active {
  /* #7a4a0a = the established V6 champagne-ink already used by the base active
     chip — kept for AA contrast (~7:1) on champagne-soft, not a new token. */
  color: #7a4a0a;
  background: var(--champagne-soft);
  border-color: var(--gold);
}

/* "+ Add Contact" — recast the generic green "approve" button to a calm gold
   primary, scoped by ID so no other surface's .v6-action-btn is affected. The
   element's inline height/padding/font are intentionally left intact; only the
   skin (colour, border, radius, shadow, hover) is restyled. */
#crm-add-contact {
  background: var(--gold);
  border: 1px solid var(--gold);
  color: var(--ink);                       /* dark ink on gold ≈ 5.3:1, passes AA */
  border-radius: var(--radius);
  font-weight: 750;
  letter-spacing: .01em;
  box-shadow: var(--shadow-card);
  transition: filter .14s ease, box-shadow .14s ease, transform .12s ease;
}
#crm-add-contact:hover {
  filter: brightness(.95);                 /* darken without inventing a hex */
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}
#crm-add-contact:active { transform: translateY(0); }


/* ── #3 · Relationship-health table ───────────────────────────────────────── */
.v6-crm-table-wrap {
  flex: 1;
  min-height: 0;
  margin-bottom: 0;                        /* drop aug's 16px so the frame stays ≤1080 */
  overflow: hidden auto;                   /* x clipped, y scrolls — body never scrolls */
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.v6-crm-table { width: 100%; min-width: 0; font-size: 14px; }

/* Header row — readable 11px caps (was 9px in aug), calm tracking, strong rule. */
.v6-crm-table thead th {
  font: 700 11px/1.2 var(--font-ui);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-3);
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line-strong);
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Body rows — generous cells, whisper zebra, gold-wash hover. */
.v6-crm-table tbody td {
  padding: 13px 14px;
  font-size: 14px;
  color: var(--ink);
  border-bottom: 1px solid var(--border2);
  vertical-align: middle;
  transition: background .12s ease;
}
.v6-crm-table tbody tr:last-child td { border-bottom: 0; }
.v6-crm-table tbody tr:nth-child(even) td { background: rgba(193,138,37,.025); }  /* gold @ 2.5% */
.v6-crm-table tbody tr:hover td          { background: rgba(193,138,37,.06);  }  /* gold @ 6%   */


/* ── #4 · REUSABLE EMPTY-STATE PRIMITIVE ──────────────────────────────────────
   Surface-agnostic. Drop .v6-empty-state into any panel / table cell / list
   that has no data, with these children:
       .v6-empty-state__mark   — CSS-only glyph (no emoji, no raster)
       .v6-empty-state__title  — confident headline
       .v6-empty-state__sub    — muted one-liner   (use a <div>, not a <p>; the
                                  legacy `.v6-empty-state p` rule in v6-lock.css
                                  would otherwise win on a <p>)
       .v6-empty-state__cta     — optional button (add .is-ghost for a quiet one)

   Example markup (Today / Pipeline / Trust Rail can reuse verbatim):
       <div class="v6-empty-state">
         <div class="v6-empty-state__mark" aria-hidden="true"></div>
         <div class="v6-empty-state__title">No client records yet</div>
         <div class="v6-empty-state__sub">Connect Lofty to load relationship detail.</div>
         <button class="v6-empty-state__cta">Connect Lofty</button>
       </div>

   Note: v6-lock.css re-asserts a compatible flex-centre + 8px gap on the BARE
   .v6-empty-state (it loads after this file). That's harmless — the values
   agree; the visual identity below lives entirely on the unique __* children. */
.v6-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  padding: 32px 20px;
  text-align: center;
}

/* The mark — concentric rings around one gold node: an abstract "relationship",
   neutral enough for any empty surface. The node is the only accent. */
.v6-empty-state__mark {
  position: relative;
  width: 60px;
  height: 60px;
  margin-bottom: 8px;                       /* +8px parent gap ≈ 16px to the title */
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: radial-gradient(circle at 50% 38%, var(--surface) 0%, var(--bg) 100%);
  box-shadow: inset 0 1px 0 #fff, var(--shadow-card);
}
.v6-empty-state__mark::before {            /* inner dashed ring */
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  border: 1.5px dashed var(--line-strong);
  opacity: .7;
}
.v6-empty-state__mark::after {             /* single gold node + champagne halo */
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px var(--champagne-soft);
}

.v6-empty-state__title {
  font: 700 16px/1.3 var(--font-display);
  color: var(--ink);
}
.v6-empty-state__sub {
  max-width: 34ch;
  font: 400 13px/1.5 var(--font-ui);
  color: var(--muted);
}
.v6-empty-state__cta {
  margin-top: 10px;                         /* +8px parent gap ≈ 18px from the sub */
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 18px;
  font: 700 13px var(--font-ui);
  color: var(--ink);
  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: filter .14s ease, box-shadow .14s ease, transform .12s ease;
}
.v6-empty-state__cta:hover {
  filter: brightness(.95);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}
.v6-empty-state__cta:active { transform: translateY(0); }
/* Quiet secondary variant for dense panels. */
.v6-empty-state__cta.is-ghost {
  color: var(--muted);
  background: var(--surface);
  border-color: var(--line);
  box-shadow: none;
}
.v6-empty-state__cta.is-ghost:hover { color: var(--ink); background: var(--surface-3); filter: none; }


/* ── #2 · CRM table empty state (the primitive, inside the colspan cell) ───── */
/* Let the primitive breathe to fill the panel rather than float as one line.
   clamp keeps it comfortable yet bounded, so it never forces the frame >1080. */
.v6-crm-table tbody td .v6-empty-state {
  min-height: clamp(300px, 40vh, 440px);
  padding-block: 28px;
}
/* Strip the host cell's table chrome so the empty state sits on clean surface. */
.v6-crm-table tbody td:has(.v6-empty-state) {
  border-bottom: 0;
  background: transparent;
}


/* ── Motion: respect reduced-motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .v6-crm-tile,
  #crm-add-contact,
  .v6-owner-chip,
  .v6-crm-search,
  .v6-crm-table tbody td,
  .v6-empty-state__cta { transition: none; }

  .v6-crm-tile:hover,
  #crm-add-contact:hover,
  .v6-empty-state__cta:hover { transform: none; }
}