/* Page-only composition for clients.html.
   Shared rules live in assets/app.css, which loads first. Tokens only. */

.clients-list { display: grid; gap: var(--s-4); }

/* the two status tiles double as filters, same contract as the team roster
   tiles: pressed tile == pressed chip */
button.kpi[aria-pressed="true"] { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.kpi.is-static { cursor: default; }
.kpi.is-static:hover { border-color: var(--border); box-shadow: var(--shadow-card); transform: none; }

.client-strip { --od-cols: 1; --od-gap: var(--s-3); }
@media (min-width: 540px) { .client-strip { --od-cols: 2; } }
@media (min-width: 1024px) { .client-strip { --od-cols: 4; } }

.clients-toolbar { --od-gap: var(--s-4); flex-wrap: wrap; }
.clients-toolbar > .toolbar-status { flex: 1 1 100%; }
.clients-toolbar > .toolbar-search { flex: 2 1 260px; }
.clients-toolbar > .toolbar-org { flex: 1 1 220px; }

/* the organization tag — quiet and neutral, same shape everywhere it appears:
   this table, the add-client combobox and its selected-tag chip */
.org-tag { border-color: transparent; background: var(--surface-sunken); }

.client-figure.is-none { color: var(--ink-faint); }

.client-actions { --od-gap: var(--s-1); justify-content: flex-end; }
@media (max-width: 767px) { .client-actions { justify-content: flex-start; } }

/* ---------------------------------------------------------------------------
   Manage client dialog — one view: the HR contact's own fields, plus the
   remove zone. Clients do not own live work the way a seat does, so there is
   no hand-over step to pass through first.
   --------------------------------------------------------------------------- */
.dialog-client {
  width: min(520px, calc(100vw - var(--s-8)));
  max-height: min(88dvh, 820px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.dialog-client .dialog-body { --od-gap: var(--s-5); display: grid; color: var(--ink); }
.client-identity { --od-gap: var(--s-3); }

.client-facts {
  --od-gap: var(--s-3);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: var(--s-3);
  background: var(--surface-sunken);
  border-radius: var(--r-control);
}
.client-facts > .od-field { --od-gap: var(--s-1); }
.client-fact-label {
  display: block;
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.client-fact-value { display: block; font-size: var(--fs-small); font-weight: 600; color: var(--ink); }

.client-zone { --od-gap: var(--s-2); display: grid; padding-top: var(--s-4); border-top: 1px solid var(--border); }
.client-zone-actions { --od-gap: var(--s-2); flex-wrap: wrap; }

@media (max-width: 767px) {
  .client-facts { grid-template-columns: 1fr; }
}