/* =====================================================================
   CLIENT WORKSPACE - STYLES  (Clients module)
   ---------------------------------------------------------------------
   Built on the HLC OS design system + the .mc-* dashboard components
   (executive-dashboard.css), so the Clients module reads as one product.
   Adds only what's specific to this module: directory, client header,
   tabs, client briefing, and the Client 360 profile.
   Class prefix: .cw
   ===================================================================== */

.cw { display: flex; flex-direction: column; gap: var(--sp-6); max-width: 1480px; }

/* ---- Directory ---- */
.cw-dir-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.cw-toolbar { max-width: 480px; }
.cw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-4); }

.cw-card {
  display: flex; flex-direction: column; gap: var(--sp-3); text-align: left;
  background: var(--ds-surface-2); border: 1px solid var(--ds-hairline);
  border-radius: var(--r-lg); padding: var(--sp-5); cursor: pointer;
  box-shadow: var(--el-1);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.cw-card:hover { transform: translateY(-3px); border-color: var(--ds-hairline-strong); box-shadow: var(--el-2), var(--el-glow); }
.cw-card__top { display: flex; align-items: center; justify-content: space-between; }
.cw-card__name { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; color: var(--ds-text-hi); line-height: 1.1; }
.cw-card__company { font-size: var(--fs-sm); color: var(--ds-text-lo); margin-top: -6px; }
.cw-card__stats { display: flex; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--ds-text-lo); padding-top: var(--sp-2); border-top: 1px solid var(--ds-hairline); }
.cw-card__stats b { color: var(--ds-text-hi); font-family: var(--font-display); font-size: var(--fs-base); }
.cw-card__next { font-size: var(--fs-sm); color: var(--ds-text); }
.cw-next-label { display: inline-block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ds-accent); margin-right: 6px; }

/* ---- Avatars ---- */
.cw-avatar { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 700; color: var(--ds-accent); background: rgba(212,175,55,0.12); border: 1px solid var(--ds-hairline); }
.cw-avatar--lg { width: 56px; height: 56px; border-radius: 16px; font-size: var(--fs-lg); font-family: var(--font-display); }

/* ---- Client header ---- */
.cw-back { align-self: flex-start; border: none; background: transparent; color: var(--ds-text-lo); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; padding: 4px 0; }
.cw-back:hover { color: var(--ds-accent); }
.cw-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; padding: var(--sp-6); border-radius: var(--r-lg); border: 1px solid var(--ds-hairline); background: var(--ds-surface-2); box-shadow: var(--el-1); }
.cw-header__id { display: flex; align-items: center; gap: var(--sp-4); }
.cw-header__name { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; color: var(--ds-text-hi); display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.cw-header__company { font-size: var(--fs-sm); color: var(--ds-text-lo); margin-top: 2px; }
.cw-header__stats { display: flex; gap: var(--sp-6); flex-wrap: wrap; }
.cw-header__stats > div { display: flex; flex-direction: column; }
.cw-header__stats span { font-size: var(--fs-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ds-text-mute); }
.cw-header__stats strong { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--ds-text-hi); }

/* ---- Tabs ---- */
.cw-tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--ds-hairline); padding-bottom: 0; }
.cw-tab { border: none; background: transparent; cursor: pointer; padding: 10px var(--sp-4); font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 500; color: var(--ds-text-lo); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
.cw-tab:hover { color: var(--ds-text-hi); }
.cw-tab.is-active { color: var(--ds-text-hi); border-bottom-color: var(--ds-gold-500); font-weight: 600; }

/* ---- Client briefing (Overview) ---- */
.cw-brief { position: relative; overflow: hidden; padding: var(--sp-6); border-radius: var(--r-lg); border: 1px solid var(--ds-hairline); background: radial-gradient(120% 180% at 100% 0%, rgba(212,175,55,0.09), transparent 48%), linear-gradient(180deg, var(--ds-surface-2), var(--ds-surface-1)); box-shadow: var(--el-1); }
.cw-brief__glow { position: absolute; top: -50%; right: -6%; width: 380px; height: 380px; pointer-events: none; background: radial-gradient(circle, var(--ds-glow), transparent 62%); }
.cw-brief__text { position: relative; margin: var(--sp-3) 0 var(--sp-5); font-size: var(--fs-lg); line-height: var(--lh-normal); color: var(--ds-text); max-width: 80ch; }
.cw-brief__next { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); border: 1px solid var(--ds-hairline-strong); background: var(--ds-surface-glass); }
.cw-brief__next strong { display: block; font-family: var(--font-display); font-size: var(--fs-lg); color: var(--ds-text-hi); }
.cw-brief__why { display: block; font-size: var(--fs-sm); color: var(--ds-text-lo); margin-top: 2px; }

/* ---- Client 360 profile ---- */
.cw-360 { display: grid; gap: var(--sp-3); }
.cw-360__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--ds-hairline); }
.cw-360__row:last-child { border-bottom: none; }
.cw-360__row span { font-size: var(--fs-sm); color: var(--ds-text-lo); }
.cw-360__row strong { font-size: var(--fs-base); color: var(--ds-text-hi); font-weight: 600; text-align: right; }
.cw-360__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding-top: var(--sp-2); }
.cw-360__note { margin: var(--sp-4) 0 0; font-size: var(--fs-sm); color: var(--ds-text-lo); line-height: var(--lh-normal); }

/* ---- Messages / Reports ---- */
.cw-messages { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.cw-msg { display: flex; gap: var(--sp-3); align-items: flex-start; }
.cw-msg__text { margin: 0; font-size: var(--fs-base); color: var(--ds-text-hi); }
.cw-msg__meta { font-size: var(--fs-xs); color: var(--ds-text-mute); }
.cw-report { display: grid; gap: var(--sp-1); }
.cw-report__row { display: flex; align-items: baseline; justify-content: space-between; padding: var(--sp-3) 0; border-bottom: 1px solid var(--ds-hairline); }
.cw-report__row span { font-size: var(--fs-sm); color: var(--ds-text-lo); }
.cw-report__row strong { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--ds-text-hi); }

@media (max-width: 640px) {
  .cw-header__stats { gap: var(--sp-4); }
}