/* Clients page revamp (design 2a) — layered on top of styles.css the way
   tasks.css layered the Tasks redesign. Two parts: a visual refresh of the
   client list (control bar, name-cell avatar, table chrome) and the new
   Check-ins tab (.kin-*). Behaviour and shared components are untouched;
   list restyles are scoped to body[data-view="clients"]. */

/* ---------- control bar: one consistent height, white fill, 10px radius ---------- */
body[data-view="clients"] .filters .input,
body[data-view="clients"] .filters .msel-trigger {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 13px; font-size: 12.5px;
}
body[data-view="clients"] .filters .msel-trigger { font-weight: 650; }
body[data-view="clients"] .filters .msel-trigger:hover { border-color: var(--blue-line); }
body[data-view="clients"] .filters .input.search { width: auto; flex: 1; min-width: 230px; }
body[data-view="clients"] .filters .btn.primary { border-radius: 10px; padding: 8px 15px; font-size: 12.5px; font-weight: 650; }
body[data-view="clients"] .filters .btn-link { font-size: 12.5px; font-weight: 650; padding: 6px 4px; }
/* the result count lives on its own quiet line beneath the bar */
body[data-view="clients"] .result-count { display: block; margin: -8px 0 12px; padding-left: 2px; font-size: 11.5px; }

/* ---------- table chrome ---------- */
body[data-view="clients"] .cards-clients th { background: #f8fafc; }

/* ---------- name-cell avatar ---------- */
.cl-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cl-avatar {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  background: #3b4d63; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; letter-spacing: .2px;
}
.cl-avatar.ring-amber { box-shadow: 0 0 0 2px var(--amber-line); }
.cl-avatar.ring-red { box-shadow: 0 0 0 2px var(--red-line); }
.cl-avatar--lg { width: 32px; height: 32px; font-size: 11px; }

/* ---------- tab row: segmented switcher + week controls ---------- */
.kin-tabrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.seg-count.due { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-line); }
.seg-opt.on .seg-count.due { background: #fff; color: var(--amber); }

.kin-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kin-tally { font-size: 12px; color: var(--muted); }
.kin-tally b { color: var(--green); }

/* week picker chip + dropdown */
.kin-picker { position: relative; display: inline-flex; }
.kin-week-chip {
  display: inline-flex; align-items: center; gap: 7px; font: inherit;
  font-size: 12.5px; font-weight: 650; color: var(--ink); cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 6px 13px;
  white-space: nowrap;
}
.kin-week-chip:hover { border-color: var(--blue-line); }
.kin-picker.open .kin-week-chip { border-color: var(--blue-line); box-shadow: 0 0 0 3px var(--blue-bg); }
.kin-caret { color: var(--faint); font-size: 10px; }
.kin-pop {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: 240px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(15, 30, 50, .14), 0 2px 6px rgba(22, 33, 46, .06);
  padding: 4px; animation: pill-pop-in .14s ease-out;
}
.kin-pop-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  font: inherit; font-size: 12.5px; font-weight: 650; color: var(--ink); text-align: left;
  background: none; border: 0; border-radius: 7px; padding: 7px 10px; cursor: pointer;
}
.kin-pop-row:hover { background: var(--grey-bg); }
.kin-pop-row.sel { background: var(--blue-bg); color: var(--blue); }
.kin-pop-n { font-size: 11.5px; font-weight: 600; color: var(--faint); white-space: nowrap; }
.kin-pop-note { padding: 7px 10px; font-size: 11.5px; color: var(--faint); border-top: 1px solid var(--line-soft); margin-top: 2px; }

/* ---------- the two groups ---------- */
.kin-groups { display: flex; flex-direction: column; gap: 18px; }
.kin-group-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.kin-group-title { font-size: 13px; font-weight: 750; }
.kin-group-title.due { color: var(--amber); }
.kin-group-n { font-size: 11.5px; font-weight: 700; color: var(--faint); }
.kin-rows { display: flex; flex-direction: column; gap: 8px; }
.kin-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 14px; box-shadow: var(--shadow); cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.kin-row:hover { border-color: #c8d2de; box-shadow: 0 2px 10px rgba(15, 30, 50, .08); }
.kin-name { font-weight: 700; font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kin-right { margin-left: auto; font-size: 12px; white-space: nowrap; }
.kin-when { color: var(--muted); }
.kin-late { color: var(--red); font-weight: 650; }
.kin-first { color: var(--amber); font-weight: 650; }
.kin-quiet { color: var(--muted); }
.kin-chev { color: #c9d1dc; font-size: 15px; flex: none; }

@media (max-width: 700px) {
  /* the week controls drop under the tabs; rows stay readable at card width */
  .kin-tabrow { flex-direction: column; align-items: stretch; }
  .kin-controls { justify-content: space-between; }
  .clients-tabswitch { display: flex; }
  .clients-tabswitch .seg-opt { flex: 1; text-align: center; justify-content: center; }
}