/*
 * clients-list.css — what only the clients list looks like.
 *
 * The search row and the primary button are the base stylesheet's now
 * (`.list-head`, `.search-field`). This is the row list itself — one soft
 * surface, rows divided by a hairline, the same shape project-detail.js uses
 * for a day's transactions and quotes.
 */

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

.client-rows {
  border-radius: 20px;
  background: var(--surface);
  overflow: hidden;
}

.client-row {
  display: block;
  inline-size: 100%;
  box-sizing: border-box;
  min-block-size: 60px;
  padding: 14px 16px;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.client-row + .client-row { border-block-start: 1px solid var(--border); }
.client-row:active { background: var(--bg-raise); }

.client-row__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.client-row__name { font-weight: 500; overflow-wrap: anywhere; }

.client-row__phone {
  color: var(--text-muted);
  font-size: 0.875rem;
  direction: ltr;
  text-align: start;
}

/* ---- Swipe a client, `tally:client-swipe` (2026-09-30) -------------------
   The row slides over two actions: "new project" (right, finger moves left)
   and "delete" (left, finger moves right). Only the side being uncovered
   shows. `touch-action: pan-y` leaves vertical scrolling to the page. */
.swipe { position: relative; overflow: hidden; }
.swipe + .swipe { border-block-start: 1px solid var(--border); }
.swipe .client-row {
  position: relative;
  z-index: 1;
  background: var(--surface-solid);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.swipe__under {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
}
.swipe__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  inline-size: 50%;
  padding-inline: 14px;
  border: 0;
  color: #fff;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  visibility: hidden;
}
.swipe__action-icon { font-size: 1.125rem; line-height: 1; }
/* RTL: the first child sits on the right. */
.swipe__action--new { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent); align-items: flex-start; }
.swipe__action--delete { background: var(--neg); align-items: flex-end; }
.swipe.is-new .swipe__action--new,
.swipe.is-delete .swipe__action--delete { visibility: visible; }
.swipe__action--new, .swipe__action--delete { padding-inline: 18px; }