/* CRM+ — the number-chips over the Contacts list. */

.crm-ci {
  --ci-ink: #1d1b1c;
  --ci-muted: #55606c;
  --ci-line: #e8ebe4;
  --ci-card: #ffffff;
  --ci-brand: #d4fb08;

  /* Was 64rem, to sit exactly over a list capped at the same width. The list is
     the width of the window now, so this follows it - and it hangs off the page
     wrapper rather than the padded column, so it carries the column's own 24px
     or it starts 24px to the left of every row underneath it. */
  max-width: 100%;
  margin: 0;
  padding: 0 24px 14px;
}

/* The Contacts list, at the width of the window.
 *
 * The platform wraps this screen in `w-full mx-auto max-w-5xl`, and the chips,
 * every row and the pager all sit inside it - so on a 1900px window the list
 * uses 1024 of it and centres 440px of nothing down each side. The cap is
 * lifted only while the body carries the mark contacts-inbox.js puts there, so
 * every other screen built from the same class keeps it: a settings form at
 * 1900px is its own kind of unreadable. */
body[data-crm-contacts] main > .w-full.mx-auto.max-w-5xl {
  max-width: 100%;
}

/* ...and the heading row with it.
 *
 * The title, the search box and the buttons live in their own row, which is
 * capped at 1400px and centred - by our own layout-width.css, which raises
 * every settings page to that width. On a 1900px window that row therefore sat
 * 100px inside a list that now runs the full width, so the screen had two left
 * edges: `Contacts` at one, every contact at the other.
 *
 * Written with layout-width's own five classes plus the body mark, because
 * `header .mx-auto` alone scores lower than that rule and would lose to it.
 * Only on this screen: a settings form is still capped at 1400. */
body[data-crm-contacts] main .flex.items-start.w-full.max-w-5xl.mx-auto {
  max-width: 100%;
}

/* -------------------------------------------------- the social handle badge */

.crm-ci__at {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  line-height: 1;
  text-decoration: none;
  /* A handle reads left to right inside an Arabic name. */
  direction: ltr;
  unicode-bidi: embed;
  max-width: 24ch;
}

.crm-ci__handle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The network is a dot, not a logo: five drawn marks would be five things to
   keep in step with five brands, and at this size the colour is the part
   anybody actually reads. */
.crm-ci__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: currentColor;
}

.crm-ci__at.is-instagram .crm-ci__dot { background: #e1306c; }
.crm-ci__at.is-tiktok .crm-ci__dot { background: #fe2c55; }
.crm-ci__at.is-facebook .crm-ci__dot { background: #1877f2; }
.crm-ci__at.is-twitter .crm-ci__dot { background: #1d1b1c; }
.crm-ci__at.is-telegram .crm-ci__dot { background: #2aabee; }
.crm-ci__at.is-whatsapp .crm-ci__dot { background: #25d366; }

/* These badges live inside the platform's own rows, outside .crm-ci, where the
   palette variables resolve to nothing - so the colours are given outright. */
.crm-ci__at { color: #55606c; }
a.crm-ci__at:hover { color: #1d1b1c; text-decoration: underline; }

:root.dark .crm-ci__at,
.dark .crm-ci__at,
[data-theme="dark"] .crm-ci__at { color: #98a1ad; }

:root.dark a.crm-ci__at:hover,
.dark a.crm-ci__at:hover,
[data-theme="dark"] a.crm-ci__at:hover { color: #e8eaed; }

:root.dark .crm-ci__at.is-twitter .crm-ci__dot,
.dark .crm-ci__at.is-twitter .crm-ci__dot,
[data-theme="dark"] .crm-ci__at.is-twitter .crm-ci__dot { background: #e8eaed; }

:root.dark .crm-ci,
.dark .crm-ci,
[data-theme="dark"] .crm-ci {
  --ci-ink: #e8eaed;
  --ci-muted: #98a1ad;
  --ci-line: #2c3138;
  --ci-card: #1b1e23;
}

.crm-ci__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.crm-ci__chip {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font: inherit;
  font-size: 12.5px;
  color: var(--ci-ink);
  background: var(--ci-card);
  border: 1px solid var(--ci-line);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  max-width: 100%;
}

.crm-ci__chip:hover { border-color: var(--ci-muted); }

.crm-ci__chip.is-on {
  border-color: var(--ci-brand);
  background: rgba(212, 251, 8, .16);
}

.crm-ci__t {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 16ch;
}

/* The number reads left-to-right inside an Arabic interface. */
.crm-ci__n {
  color: var(--ci-muted);
  font-size: 11.5px;
  direction: ltr;
  unicode-bidi: embed;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.crm-ci__c {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.crm-ci__note {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ci-muted);
}

/* -------------------------------------------------- the two dropdowns
   The number and the label, each a field that looks like one: what the list
   shows now, its count, and a chevron. The menu lists every choice with its
   count (contacts-inbox.js). */
.crm-ci__row { align-items: center; }

.crm-ci__dd { position: relative; }

.crm-ci__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  min-width: 200px;
  max-width: 340px;
  padding: 0 12px;
  font: inherit;
  font-size: 13px;
  color: var(--ci-ink);
  background: var(--ci-card);
  border: 1px solid var(--ci-line);
  border-radius: 8px;
  cursor: pointer;
}
.crm-ci__trigger:hover, .crm-ci__trigger[aria-expanded="true"] { border-color: var(--ci-muted); }
.crm-ci__trigger.is-on { border-color: var(--ci-brand); box-shadow: 0 0 0 1px var(--ci-brand) inset; }
.crm-ci__trigger .crm-ci__t { flex: 1; min-width: 0; text-align: start; max-width: none; unicode-bidi: plaintext; }

.crm-ci__cap {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ci-muted);
  padding-inline-end: 8px;
  border-inline-end: 1px solid var(--ci-line);
}

.crm-ci__chev {
  width: 7px;
  height: 7px;
  flex: none;
  margin-inline-start: 2px;
  border-right: 1.5px solid var(--ci-muted);
  border-bottom: 1.5px solid var(--ci-muted);
  transform: translateY(-2px) rotate(45deg);
}

.crm-ci__ldot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

.crm-ci__menu {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  z-index: 40;
  width: max(100%, 280px);
  max-width: calc(100vw - 32px);
  padding: 6px;
  background: var(--ci-card);
  border: 1px solid var(--ci-line);
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .18);
}

.crm-ci__search {
  width: 100%;
  height: 32px;
  margin: 0 0 6px !important;
  padding: 0 10px;
  font: inherit;
  font-size: 12.5px;
  color: var(--ci-ink);
  background: var(--ci-card);
  border: 1px solid var(--ci-line);
  border-radius: 8px;
}

.crm-ci__opts { max-height: 300px; overflow: auto; display: flex; flex-direction: column; }

.crm-ci__opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--ci-ink);
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  text-align: start;
}
.crm-ci__opt:hover { background: rgba(130, 140, 155, .12); }
.crm-ci__opt.is-on { background: rgba(212, 251, 8, .16); font-weight: 600; }
.crm-ci__opt .crm-ci__t { flex: 1; min-width: 0; max-width: none; unicode-bidi: plaintext; }
.crm-ci__opt .crm-ci__c { color: var(--ci-muted); }

@media (max-width: 640px) {
  .crm-ci__dd, .crm-ci__trigger { width: 100%; max-width: none; }
}