/*
 * client-detail.css — what only the client screen looks like.
 *
 * The hero, the icon and the row-shaped skeleton are the base stylesheet's.
 * This is the three sections underneath it: contacts, the communication log
 * and its quick-add row, and the reuse of dashboard.js's own project-card
 * rules for the client's jobs needs nothing extra at all.
 */

/* .client-section moved to the base stylesheet once reports.js wanted the
   same section wrapper; its heading was already `.section-heading`, shared
   since client-form.js. */

/* ---- Contacts -------------------------------------------------------------- */

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-row-view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--surface);
}

.contact-row-view__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}

.contact-row-view__name { font-weight: 500; overflow-wrap: anywhere; }

.contact-row-view__role {
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.contact-row-view__links {
  display: flex;
  gap: 12px;
}

.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 44px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.9375rem;
}

/* ---- Communication log ------------------------------------------------------ */

.log-form { margin-block-end: 12px; }

.log-form__row {
  display: flex;
  gap: 8px;
}

.log-form__row .field-select { flex: none; inline-size: auto; }
.log-form__row .field-input { flex: 1 1 auto; }
.log-form__row .btn { flex: none; inline-size: auto; }

.log-list {
  display: flex;
  flex-direction: column;
}

.log-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 10px;
  padding: 12px 4px;
}

.log-row + .log-row { border-block-start: 1px solid var(--border); }

.log-row__type {
  color: var(--text-muted);
  font-size: 0.8125rem;
  flex: none;
}

.log-row__summary { overflow-wrap: anywhere; }

.log-row__date {
  color: var(--text-muted);
  font-size: 0.8125rem;
  flex: none;
}

/* `tally:delete-clients` (2026-09-29) — the owner's delete, under "עריכה". */
.hero__delete { color: var(--neg); }

/* `tally:client-tax` — the customer's invoice details under the name, or a tap to add them. */
.client-tax-line { font-variant-numeric: tabular-nums; }
.client-tax-add { display: block; margin-block-start: 6px; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; text-align: start; }