/* «Клиенты» и «Настройки → Роли и доступы».
   Built on the catalog's page system (catalog.css: .ct-page, .ct-head, .tabs,
   .ct-card, .chip …); only what is specific to people lives here (cu-*, ac-*). */

/* ── KPI tiles ─────────────────────────────────────────────────────── */
.cu-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0;
  background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--r-lg); overflow: hidden;
}
.cu-kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cu-kpi {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left;
  background: transparent; border: 0; border-radius: 0;
  padding: 14px 16px; cursor: pointer; color: var(--ink); font: inherit;
  box-shadow: inset -1px 0 0 var(--divider), inset 0 -1px 0 var(--divider);
}
.cu-kpi:hover { background: var(--paper-2); }
.cu-kpis .cu-kpi.on { background: var(--paper-2); box-shadow: inset 0 -2px 0 var(--accent); }
.cu-kpis .cu-kpi.warn b { color: var(--red); }
/* Active filters (renderActive): like the filter row of a spreadsheet. */
.cu-active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; }
.cu-active > b { margin-right: 4px; }
.cu-filter-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 11px;
  border-radius: var(--r-pill); background: var(--accent-weak); color: var(--accent-ink); font-weight: 500;
}
.cu-filter-chip button {
  width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: inherit;
  font-size: 16px; line-height: 1; cursor: pointer;
}
.cu-filter-chip button:hover { background: rgba(0, 0, 0, 0.07); }

/* A number never spills out of its tile: sums are a short number + a small unit
   (kpiRub), and on a narrow tile the figure shrinks with it. */
.cu-kpis .cu-kpi { container-type: inline-size; }
.cu-kpi b { max-width: 100%; white-space: nowrap; overflow: hidden; }
.cu-kpi-unit { font-family: var(--font-ui, inherit); font-size: 14px; font-weight: 500; letter-spacing: 0; margin-left: 1px; color: var(--ink-2); }
.cu-kpi.static { cursor: default; }
.cu-kpi.static:hover { background: transparent; }
.cu-kpi b { font-family: var(--font-ui); font-weight: 700; font-size: 26px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums lining-nums; line-height: 1; }
@supports (font-size: 1cqi) { .cu-kpis .cu-kpi b { font-size: clamp(20px, 18cqi, 28px); } }
.cu-kpi span { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.cu-kpi.warn b { color: var(--red); }

/* ── Filters & segments ────────────────────────────────────────────── */
.cu-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cu-filters select { width: auto; min-width: 160px; }
.cu-segs { display: flex; flex-wrap: wrap; gap: 6px; }
.cu-seg {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--stroke); color: var(--ink-2); font-size: 13px; font-weight: 500; cursor: pointer;
}
.cu-seg:hover { border-color: var(--field-border); color: var(--ink); }
.cu-seg.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.cu-seg-n { font-size: 11.5px; opacity: .65; font-variant-numeric: tabular-nums; }
.cu-seg-n:empty { display: none; }
.cu-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--subtle)); display: inline-block; }

.cu-bulk {
  position: sticky; top: 8px; z-index: 5; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--ink); color: #fff; padding: 10px 14px; border-radius: var(--r-md); box-shadow: var(--sh-2);
}
.cu-bulk input { width: 240px; background: #fff; }
.cu-bulk .btn-small { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fff; }
.cu-bulk .btn-small.primary { background: var(--accent); border-color: var(--accent); }

/* ── Table ─────────────────────────────────────────────────────────── */
.cu-table-card { padding: 6px 0 10px; gap: 0; }
.cu-count { padding: 8px 20px 4px; }
.cu-scroll { overflow-x: auto; }
.cu-table th, .cu-table td { vertical-align: top; }
.cu-table th:first-child, .cu-table td:first-child { padding-left: 20px; }
.cu-table .num, .ct-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cu-col-check { width: 28px; }
.cu-row { cursor: pointer; }
.cu-row:hover td { background: var(--paper-2); }
.cu-row.is-bad td { background: color-mix(in srgb, var(--red-weak) 45%, transparent); }
.cu-who { display: flex; gap: 10px; align-items: flex-start; min-width: 230px; }
.cu-name { font-weight: 600; color: var(--ink); text-decoration: none; }
.cu-name:hover { color: var(--accent-ink); }
.cu-sub { font-size: 12.5px; color: var(--subtle); margin: 1px 0 4px; }
.cu-bday { color: var(--accent-ink); font-weight: 500; }
.cu-phone { white-space: nowrap; }
.cu-places { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-more { display: flex; justify-content: center; padding: 12px; }
.cu-click tr[data-id] { cursor: pointer; }
.cu-click tr[data-id]:hover td { background: var(--paper-2); }

.cu-chip-app { background: var(--blue-weak); color: var(--blue); }
.cu-chip-club { background: var(--accent-weak); color: var(--accent-ink); }
.cu-chip-bad { background: var(--red-weak); color: var(--red); }
.cu-chip-warn { background: var(--amber-weak); color: var(--amber); }

/* ── Avatar ────────────────────────────────────────────────────────── */
.cu-ava {
  flex: none; width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--c, var(--accent)); color: #fff; font-weight: 600; font-size: 13px; letter-spacing: .02em; overflow: hidden;
}
.cu-ava img { width: 100%; height: 100%; object-fit: cover; }
.cu-ava-xl { width: 96px; height: 96px; font-size: 30px; font-family: var(--font-display); box-shadow: var(--sh-photo); }

/* ── Card head ─────────────────────────────────────────────────────── */
.cu-head { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 20px; align-items: center; }
.cu-title h1 { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 10px; text-wrap: balance; }
.cu-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cu-q {
  display: inline-flex; align-items: center; gap: 5px; font-size: 13px; padding: 4px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--stroke); background: var(--surface); color: var(--ink); text-decoration: none;
}
a.cu-q:hover { border-color: var(--accent); color: var(--accent-ink); }
.cu-bday-line { margin-top: 8px; color: var(--accent-ink); font-weight: 500; font-size: 13.5px; }
.cu-side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.cu-stats { display: flex; gap: 22px; }
.cu-stats div { display: flex; flex-direction: column; align-items: flex-end; }
.cu-stats b { font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cu-stats span { font-size: 12px; color: var(--subtle); }

.cu-banner { border-radius: var(--r-md); padding: 11px 14px; background: var(--blue-weak); color: var(--ink); font-size: 13.5px; line-height: 1.5; }
.cu-banner.warn { background: var(--amber-weak); }
.cu-banner.bad { background: var(--red-weak); }
.cu-dupes { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.cu-dupe { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ── Tabs content ──────────────────────────────────────────────────── */
.cu-col { display: flex; flex-direction: column; gap: 16px; }
.cu-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.cu-ov { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.cu-ov-main, .cu-ov-side { display: flex; flex-direction: column; gap: 16px; }
.cu-big { font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.pre { white-space: pre-wrap; margin: 0; line-height: 1.55; }

.cu-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 14px; margin: 0; font-size: 13.5px; }
.cu-dl dt { color: var(--subtle); }
.cu-dl dd { margin: 0; }

.cu-trips, .cu-people, .cu-links, .cu-contacts, .cu-files, .cu-plain, .cu-notes-mini, .cu-past, .cu-notes, .cu-history {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px;
}
.cu-trip { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; font-size: 13.5px; }
.cu-trip.past .cu-trip-t { color: var(--ink-2); }
.cu-trip-d { color: var(--subtle); font-variant-numeric: tabular-nums; }
.cu-trip-t a { color: var(--ink); font-weight: 500; }
.cu-notes-mini li { background: var(--amber-weak); border-radius: var(--r-sm); padding: 7px 10px; font-size: 13.5px; }
.cu-links li, .cu-contacts li, .cu-files li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.cu-links li a, .cu-people li a { font-weight: 500; color: var(--ink); }
.cu-files .ic { width: 16px; height: 16px; color: var(--subtle); }
.cu-row-act { display: inline-flex; gap: 4px; margin-left: auto; }
.cu-past li { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--divider); }
.cu-past li:last-child { border-bottom: 0; }

.cu-notes li { border: 1px solid var(--stroke); border-radius: var(--r-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.cu-notes li.pinned { border-color: var(--amber); background: color-mix(in srgb, var(--amber-weak) 40%, var(--surface)); }
.cu-note-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.cu-history > li { border-left: 2px solid var(--stroke); padding: 2px 0 6px 12px; }
.cu-diff { list-style: none; padding: 0; margin: 4px 0 0; font-size: 13px; display: flex; flex-direction: column; gap: 2px; }
.cu-diff s { color: var(--subtle); }

.cu-achs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.cu-ach { display: flex; align-items: center; gap: 10px; border: 1px solid var(--stroke); border-radius: var(--r-md); padding: 10px 12px; }
.cu-ach-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); font-size: 17px; flex: none; }
.cu-ach .btn-small { margin-left: auto; }

.cu-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.cu-photo { margin: 0; border: 1px solid var(--stroke); border-radius: var(--r-md); overflow: hidden; background: var(--paper-2); display: flex; flex-direction: column; }
.cu-photo.is-ava { border-color: var(--accent); }
.cu-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.cu-photo figcaption { padding: 8px 10px; font-size: 12.5px; display: flex; flex-direction: column; gap: 4px; }
.cu-photo .cu-row-act { margin-left: 0; flex-wrap: wrap; }

.cu-segctl { display: inline-flex; gap: 4px; background: var(--elevated); padding: 3px; border-radius: var(--r-pill); align-self: flex-start; }
.cu-segctl label { padding: 5px 12px; border-radius: var(--r-pill); cursor: pointer; font-size: 13px; font-weight: 500; }
.cu-segctl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cu-segctl label:has(input:checked) { background: var(--surface); box-shadow: var(--sh-1); }

.cu-add-contact, .cu-linker { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cu-add-contact select { width: auto; }
.cu-add-contact input, .cu-linker input { flex: 1; min-width: 160px; }
.cu-linker select { width: auto; }
.cu-picker { position: relative; flex: 2; min-width: 240px; }
.cu-picker input { width: 100%; }
.cu-suggest { list-style: none; margin: 4px 0 0; padding: 0; position: absolute; left: 0; right: 0; z-index: 20;
  background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--r-md); box-shadow: var(--sh-2); max-height: 300px; overflow: auto; }
.cu-suggest:empty { display: none; }
.cu-suggest li > button { width: 100%; text-align: left; padding: 8px 12px; background: none; border: 0; cursor: pointer; font: inherit; color: var(--ink); }
.cu-suggest li > button:hover { background: var(--paper-2); }
.cu-suggest li.muted { padding: 8px 12px; }

.cu-pick-dep { display: flex; flex-direction: column; gap: 10px; }
.cu-dep-list { list-style: none; margin: 0; padding: 0; max-height: 52vh; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.cu-dep { width: 100%; display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left;
  padding: 10px 12px; border: 1px solid var(--stroke); border-radius: var(--r-md); background: var(--surface); cursor: pointer; font: inherit; color: var(--ink); }
.cu-dep:hover { border-color: var(--accent); }

.cu-merge-grid, .cu-dupe-sides { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.cu-merge-side, .cu-dupe-side { border: 1px solid var(--stroke); border-radius: var(--r-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.cu-merge-side h4 { margin: 0; color: var(--subtle); font-size: 12px; font-weight: 500; }
.cu-merge-name { font-weight: 600; font-size: 16px; margin: 0; }
.cu-merge-grid + .cu-banner { margin-top: 12px; }
.cu-dupe-list { display: flex; flex-direction: column; gap: 12px; }
.cu-dupe-pair { gap: 10px; }
.cu-dupe-side .btn-small { align-self: flex-start; margin-top: 4px; }

/* ── Settings: roles & access ──────────────────────────────────────── */
.ac { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; align-items: start; }
.ac-roles { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 12px; }
.ac-roles h4 { margin: 10px 0 2px; font-size: 12px; color: var(--subtle); font-weight: 500; }
.ac-role {
  display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px 12px; border-radius: var(--r-md);
  border: 1px solid transparent; background: none; cursor: pointer; font: inherit; color: var(--ink);
}
.ac-role:hover { background: var(--surface); border-color: var(--stroke); }
.ac-role.on { background: var(--surface); border-color: var(--accent); }
.ac-role.locked { cursor: default; opacity: .75; }
.ac-role b { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.ac-role span { font-size: 12px; color: var(--subtle); }
.ac-main { display: flex; flex-direction: column; gap: 16px; }
.ac-group { gap: 4px; }
.ac-group h3 { margin-bottom: 6px; }
.ac-perm { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--divider); }
.ac-perm:last-child { border-bottom: 0; }
.ac-perm-l { display: flex; flex-direction: column; gap: 2px; }
.ac-perm-l b { font-weight: 500; }
.ac-perm-l .muted { font-size: 12.5px; }
.ac-flag { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 5px; margin-left: 6px; vertical-align: 1px; }
.ac-flag.ui { background: var(--elevated); color: var(--subtle); }
.ac-flag.pin { background: var(--amber-weak); color: var(--amber); }
.ac-flag.chg { background: var(--accent-weak); color: var(--accent-ink); }
.ac-perm.is-changed .ac-perm-l b { color: var(--accent-ink); }
.ac-perm .switch input:disabled + .switch-ui { opacity: .45; cursor: not-allowed; }
.ac-bar {
  position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--ink); color: #fff; padding: 10px 14px; border-radius: var(--r-md); box-shadow: var(--sh-2);
}
.ac-bar .btn-ghost { color: #fff; border-color: rgba(255,255,255,.25); }

/* ── Narrow screens ────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .cu-ov, .cu-two, .ac { grid-template-columns: 1fr; }
  .ac-roles { position: static; flex-direction: row; flex-wrap: wrap; }
  .ac-roles h4 { width: 100%; }
}
/* ── «Места»: где был и куда хочет (0099) ─────────────────────────────── */
.cu-wants-line, .cu-party-line { margin-top: 6px; font-size: 13.5px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cu-wants-line .ic, .cu-party-line .ic { width: 15px; height: 15px; color: var(--accent); }
.cu-wants-line a, .cu-party-line a { color: var(--ink); font-weight: 500; }
.cu-subhead { margin: 14px 0 8px; font-size: 15px; }
.cu-wants-sub { color: var(--accent-ink); }
.cu-places-tab, .cu-danger-tab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.cu-danger-tab { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.cu-danger-tab .danger-zone { margin: 0; }
.cu-wishes { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; }
.cu-wish { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--divider); }
.cu-wish:last-child { border-bottom: 0; }
.cu-wish-main { flex: 1; min-width: 0; font-size: 13.5px; }
.cu-wish-main b { font-size: 15px; }
.cu-wish-note { margin: 3px 0 2px; }
.cu-wish.done .cu-wish-main b { color: var(--ink-2); }
.cu-wish-act { display: inline-flex; gap: 4px; flex: none; }
.cu-wish-add { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 4px 0 10px; padding-top: 12px; border-top: 1px dashed var(--divider); }
.cu-wish-add .field { flex: 1 1 160px; margin: 0; }
.cu-sub-h { margin: 16px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--subtle); }
.cu-been { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cu-been-i { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--divider); border-radius: var(--r-sm); font-size: 13px; }
.cu-been-i b { font-size: 14.5px; }
.tabs a.tab-danger { color: var(--red); }
.tabs a.tab-danger:hover { background: var(--red-weak); color: var(--red); }
.tabs a.tab-danger.on,
.tabs a.tab-danger.on:hover { color: var(--red); background: none; }
.tabs a.tab-danger.on::after,
.tabs > .tab-runner.is-danger::after { background: var(--red); }
@media (max-width: 1100px) { .cu-places-tab { grid-template-columns: minmax(0, 1fr); } }

.cu-amo-hooks { margin-bottom: 16px; }
.cu-amo-hooks .ct-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cu-amo-hooks-table td.nowrap { white-space: nowrap; }
.cu-amo-err { margin-top: 4px; color: var(--red, #b42318); font-size: 12px; line-height: 1.35; max-width: 36rem; }
.cu-amo-raw { margin-top: 10px; }
.cu-amo-raw-pre {
  margin: 8px 0 0; padding: 10px 12px; max-height: 180px; overflow: auto;
  font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--bg-2, #f6f5f2); border-radius: var(--r-sm); white-space: pre-wrap; word-break: break-all;
}

@media (max-width: 760px) {
  .cu-head { grid-template-columns: 64px 1fr; }
  .cu-ava-xl { width: 64px; height: 64px; font-size: 22px; }
  .cu-side { grid-column: 1 / -1; align-items: flex-start; }
  .cu-stats div { align-items: flex-start; }
  .cu-kpis-3, .cu-merge-grid, .cu-dupe-sides { grid-template-columns: 1fr; }
  .cu-trip { grid-template-columns: 1fr; gap: 2px; }
  .cu-dep { grid-template-columns: 1fr; }
  .cu-bulk input { width: 100%; }
}