/* Clients (§6.2). Grid template is from the reference, unchanged. */

.clients__head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 16px; }
.clients__title {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 0;
}
.clients__count { font-size: 13px; color: var(--p-ink-2); margin: 3px 0 0; }

.clients__filters {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px;
}

.clients__table { min-width: 980px; }

.clients__thead,
.clients__row {
  display: grid;
  grid-template-columns: 250px 120px 118px 150px 120px 116px 1fr;
  align-items: center;
  width: 100%;
  text-align: start;
}

.clients__thead {
  padding: 10px 16px;
  background: var(--p-surface-2);
  border-bottom: 1px solid var(--p-line);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--p-ink-3);
}

.clients__row {
  padding: 12px 16px;
  background: transparent; border: none;
  border-bottom: 1px solid var(--p-line);
  cursor: pointer; font-family: inherit; color: inherit;
}
.clients__row:hover { background: var(--p-surface-2); }
.clients__row:last-child { border-bottom: none; }

.clients__biz {
  display: flex; align-items: center; gap: 10px;
  min-width: 0; padding-inline-end: 12px;
}
.clients__biz-text { min-width: 0; }
.clients__name {
  display: block; font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.clients__industry { display: block; font-size: 11px; color: var(--p-ink-3); }

.clients__cr,
.clients__manager,
.clients__period { font-size: 12px; color: var(--p-ink-2); }

.clients__deadline { font-size: 12px; color: var(--p-ink-2); }
.clients__deadline.is-urgent { color: var(--p-risk); font-weight: 600; }

.clients__status { display: flex; align-items: center; gap: 8px; min-width: 0; }
.clients__status-note {
  font-size: 11px; color: var(--p-ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The em dash for a work status the server does not supply. Muted like the
   other absences, and deliberately not chip-shaped: a chip is a value. */
.clients__status-empty { color: var(--p-ink-3); }

.clients__empty { padding: 24px 16px; font-size: 12.5px; color: var(--p-ink-3); }

@media (max-width: 899px) {
  .clients__head { flex-direction: column; align-items: flex-start; }
}