/* The Contacts selection (contacts-select.js): a tick box per row and in the
   header, and the bar that acts on what is ticked. Light first; the lime
   button carries black text. */

/* The first column holds the tick box and the avatar side by side
   (contacts-list.css gives it the width). */
body[data-crm-contacts] div.flex.w-full.gap-3.py-5.px-6 > .crm-sel__box {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}
body[data-crm-contacts] div.flex.w-full.gap-3.py-5.px-6 div.relative.group.flex { justify-self: end; }

.crm-sel__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  margin: 0;
}
.crm-sel__box input {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: #65a30d;
}

body[data-crm-contacts] div.crm-sel-on,
body[data-crm-contacts] div[class*="outline-n-container"]:has(div.crm-sel-on) {
  background: rgba(163, 230, 53, .12);
}

/* ---------- the bar ---------- */
.crm-sel {
  --sel-ink: #0f172a;
  --sel-muted: #64748b;
  --sel-line: #e2e8f0;
  --sel-card: #ffffff;
  --sel-soft: #f8fafc;
  position: fixed;
  left: 50%;
  bottom: 72px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  max-width: calc(100vw - 32px);
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--sel-line);
  background: var(--sel-card);
  color: var(--sel-ink);
  box-shadow: 0 16px 40px rgba(15, 23, 42, .18);
  font-size: 13px;
}
.dark .crm-sel, .dark .crm-sel__pop {
  --sel-ink: #f1f5f9;
  --sel-muted: #94a3b8;
  --sel-line: #334155;
  --sel-card: #111827;
  --sel-soft: #1e293b;
}

.crm-sel__count { font-weight: 700; font-variant-numeric: tabular-nums; }
.crm-sel__sep { width: 1px; height: 22px; background: var(--sel-line); }
.crm-sel__link {
  font: inherit; font-weight: 600; color: #4d7c0f; background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: underline;
}
.dark .crm-sel__link { color: #bef264; }

.crm-sel__btn {
  height: 32px; padding: 0 14px; border-radius: 8px; cursor: pointer;
  font: inherit; font-weight: 600; font-size: 12.5px;
  border: 1px solid var(--sel-line); background: var(--sel-card); color: var(--sel-ink);
}
.crm-sel__btn:hover { border-color: #d4fb08; }
.crm-sel__btn--primary { background: #d4fb08; border-color: #d4fb08; color: #000 !important; }
.crm-sel__btn--primary:hover { background: #c6ec00; }
.crm-sel__btn--ghost { border-color: transparent; color: var(--sel-muted); }

.crm-sel__note { font-size: 12.5px; color: #15803d; font-weight: 600; }
.dark .crm-sel__note { color: #4ade80; }
.crm-sel__note.is-bad { color: #b91c1c; }
.dark .crm-sel__note.is-bad { color: #f87171; }

/* ---------- choosing the label ---------- */
.crm-sel__pop {
  --sel-ink: #0f172a;
  --sel-muted: #64748b;
  --sel-line: #e2e8f0;
  --sel-card: #ffffff;
  --sel-soft: #f1f5f9;
  position: fixed;
  z-index: 61;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--sel-line);
  background: var(--sel-card);
  color: var(--sel-ink);
  box-shadow: 0 16px 40px rgba(15, 23, 42, .22);
  font-size: 13px;
}
.crm-sel__poptitle { font-weight: 700; }
.crm-sel__search {
  width: 100%; height: 34px; padding: 0 10px; border-radius: 8px; margin: 0 !important;
  border: 1px solid var(--sel-line); background: var(--sel-card); color: var(--sel-ink); font: inherit; font-size: 12.5px;
}
.crm-sel__search:focus { outline: 2px solid #d9f99d; border-color: #d4fb08; }
.crm-sel__list { display: flex; flex-direction: column; max-height: 240px; overflow: auto; }
.crm-sel__opt {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border-radius: 8px;
  border: 0; background: none; color: var(--sel-ink); font: inherit; font-size: 12.5px; cursor: pointer; text-align: start;
}
.crm-sel__opt:hover { background: var(--sel-soft); }
.crm-sel__opttext { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; }
.crm-sel__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.crm-sel__new { font-style: normal; font-size: 10.5px; font-weight: 700; color: #000; background: #d4fb08; padding: 1px 6px; border-radius: 999px; }
.crm-sel__empty { padding: 8px; color: var(--sel-muted); font-size: 12px; }

@media (max-width: 640px) {
  .crm-sel { bottom: 64px; width: calc(100vw - 32px); }
  .crm-sel__sep { display: none; }
}

/* ---------- deleting the selection (owner, 2026-09-30) ---------- */
.crm-sel__btn--danger { color: #b42318; }
.crm-sel__btn--danger:hover { border-color: #b42318; }
.dark .crm-sel__btn--danger { color: #f87171; }
.dark .crm-sel__btn--danger:hover { border-color: #f87171; }

.crm-del {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(15, 23, 42, .35);
}
.crm-del__box {
  width: 100%; max-width: 420px; padding: 20px; border-radius: 8px;
  background: #ffffff; color: #282e34; border: 1px solid rgba(53, 60, 69, .16);
  box-shadow: 0 16px 40px rgba(15, 23, 42, .22); font-size: 13px;
}
.crm-del__title { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.crm-del__text { margin: 0 0 14px; color: #626f7f; line-height: 1.55; }
.crm-del__label { display: block; font-weight: 600; margin-bottom: 6px; }
.crm-del__input {
  width: 100%; height: 34px; padding: 0 10px; border-radius: 8px; margin: 0 0 16px !important;
  border: 1px solid rgba(53, 60, 69, .16); background: #ffffff; color: #282e34; font: inherit; font-variant-numeric: tabular-nums;
}
.crm-del__input:focus { outline: 2px solid #fecdca; border-color: #b42318; }
.crm-del__acts { display: flex; justify-content: flex-end; gap: 8px; }
.crm-del__go {
  height: 32px; padding: 0 14px; border-radius: 8px; border: 1px solid #b42318; cursor: pointer;
  background: #b42318; color: #ffffff; font: inherit; font-weight: 600; font-size: 12.5px;
  transition: background-color .15s cubic-bezier(.4, 0, .2, 1);
}
.crm-del__go:hover:not(:disabled) { background: #912018; }
.crm-del__go:disabled { opacity: .45; cursor: not-allowed; }
.dark .crm-del__box { background: #111827; color: #f1f5f9; border-color: #334155; }
.dark .crm-del__text { color: #94a3b8; }
.dark .crm-del__input { background: #111827; color: #f1f5f9; border-color: #334155; }