/* The column this screen is measured against. An attribute, because Vue wipes
   an inline style on its next render and the screen then sizes itself to the
   window - sliding left under the sidebar with every row cut in half. */
[data-crm-missed-host] { position: relative; }

/* Missed and the reports overview share one address, and the reports screen
   gets there first: <main> does not exist until Vue has drawn it, and this
   screen can only paint into a <main> that exists. Measured: the reports
   screen on show at 258ms, this one in at 639ms - and up to 1.5s when the old
   sweep's beat fell badly.

   So the column is held blank from the moment the address says Missed, and
   released the instant this screen is appended. Capped at 6s in JS: a blank
   screen is worse than a wrong one. See gate() in missed.js. */
html[data-crm-missed-wait] main {
  visibility: hidden;
}

/* missed.css — the Missed block on Reports, and the screen it opens.
 *
 * Takes its shape from sales-report.css so the two blocks read as one page:
 * same card, same heading weight, same figures. Tokens are declared on both
 * roots because the screen is appended to <body> and never inherits from the
 * block.
 */
.crm-ms,
.crm-ms-screen {
  --ms-ink: #1d1b1c;
  --ms-muted: #55606c;
  --ms-faint: #606a76;
  --ms-line: #e8ebe4;
  --ms-card: #ffffff;
  --ms-soft: #fafbf8;
  --ms-brand: #d4fb08;
  --ms-warn: var(--crm-alert-ink, #c8243b);
  --ms-warn-bg: var(--crm-alert-bg, #fff1f2);
}

:root.dark .crm-ms,
.dark .crm-ms,
[data-theme="dark"] .crm-ms,
:root.dark .crm-ms-screen,
.dark .crm-ms-screen,
[data-theme="dark"] .crm-ms-screen {
  --ms-ink: #e8eaed;
  --ms-muted: #98a1ad;
  --ms-faint: #78828e;
  --ms-line: #2c3138;
  --ms-card: #1b1e23;
  --ms-soft: #22262c;
  --ms-warn: var(--crm-alert-ink, #c8243b);
  --ms-warn-bg: var(--crm-alert-bg, #fff1f2);
}

.crm-ms {
  margin: 20px 0 8px;
  border: 1px solid var(--ms-line);
  border-radius: 8px;
  background: var(--ms-card);
  padding: 18px 20px 20px;
  color: var(--ms-ink);
  font-size: 14px;
}

.crm-ms *,
.crm-ms-screen * { box-sizing: border-box; }

.crm-ms__head { margin-bottom: 16px; }

.crm-ms__h {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ms-ink);
}

.crm-ms__note {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ms-faint);
  max-width: 76ch;
}

.crm-ms__pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}

.crm-ms__panel {
  border: 1px solid var(--ms-line);
  border-radius: 8px;
  background: var(--ms-soft);
  padding: 15px 16px 14px;
  display: flex;
  flex-direction: column;
}

.crm-ms__ph {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.crm-ms__pt { font-size: 14px; font-weight: 600; }

.crm-ms__pn {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.crm-ms__pb {
  font-size: 12.5px;
  color: var(--ms-muted);
  margin-top: 3px;
}

.crm-ms__pd {
  font-size: 12px;
  color: var(--ms-faint);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--ms-line);
  font-variant-numeric: tabular-nums;
}

.crm-ms__bars { margin-top: 11px; display: grid; gap: 6px; }

.crm-ms__bar {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
}

.crm-ms__bn {
  flex: 0 0 34%;
  min-width: 0;
  color: var(--ms-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crm-ms__bt {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--ms-line);
  overflow: hidden;
}

.crm-ms__bf {
  display: block;
  height: 100%;
  background: var(--ms-brand);
}

.crm-ms__bc {
  flex: none;
  min-width: 22px;
  text-align: end;
  font-variant-numeric: tabular-nums;
  color: var(--ms-ink);
}

.crm-ms__ages {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.crm-ms__age {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid var(--ms-line);
  border-radius: 999px;
  background: var(--ms-card);
  font-size: 12px;
}

.crm-ms__age b { font-weight: 600; font-variant-numeric: tabular-nums; }
.crm-ms__age i { font-style: normal; color: var(--ms-faint); }
.crm-ms__age.is-zero { opacity: .45; }

.crm-ms__clear {
  margin-top: 12px;
  font-size: 13px;
  color: var(--ms-faint);
}

.crm-ms__open {
  margin-top: 14px;
  align-self: flex-start;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ms-ink);
  text-decoration: none;
  border-bottom: 2px solid var(--ms-brand);
  padding-bottom: 1px;
}

.crm-ms__open:hover { opacity: .75; }

/* ---- the screen ---- */

/* Sits inside <main>, not over the whole window: this is a screen the sidebar
   navigates to, and hiding the rail people leave it by would make the × the
   only way out. Falls back to fixed if <main> is not there to hold it. */
.crm-ms-screen {
  position: absolute;
  inset: 0;
  /* 60, not 20: the Reports page underneath carries controls of its own at
     Tailwind's `z-50` - the team picker is one - and at 20 they painted THROUGH
     this screen, so "All Teams" sat in the middle of our own filter row looking
     like a control of ours that had come loose. A screen that covers another
     screen has to outrank everything on it, not most of it. */
  z-index: 60;
  background: var(--ms-card);
  color: var(--ms-ink);
  display: flex;
  flex-direction: column;
  font-size: 14px;
}

.crm-ms-screen__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--ms-line);
}

/* THE TWO TABS ARE ONE CHOICE, SO THEY ARE DRAWN AS ONE CONTROL.
 *
 * They were two bare words side by side, which reads as two labels rather than
 * as "pick one of these" - nothing said they were alternatives, and nothing
 * but the weight of the text said which one you were looking at. This is the
 * same segmented switch the deals board uses for Board/Table, so a choice
 * between two views looks the same wherever it appears.
 *
 * The highlight wraps the PAIR, not the button, so a tab keeps its `i` inside
 * its own segment instead of leaving it stranded on the track. */
.crm-ms-screen__tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--ms-line);
  border-radius: 8px;
  background: var(--ms-soft);
  margin-inline-end: auto;   /* the close button stays at the far end */
  min-width: 0;
}

.crm-ms-screen__tab {
  border: 0;
  background: transparent;
  color: var(--ms-muted);
  border-radius: 8px;
  padding-block: 5px;
  padding-inline: 12px 6px;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}

.crm-ms-screen__tab:hover { color: var(--ms-ink); }

.crm-ms-screen__tab.is-on {
  color: var(--ms-ink);
  font-weight: 600;
}

/* ---------------------------------------------------- what a tab counts ----
 *
 * "What is the difference between these two screens?" - asked about a pair of
 * tabs whose names are honest and still not enough, because one counts people
 * and the other counts conversations and nothing on the screen said so. The
 * answer is an `i` beside each tab rather than a line of prose under them: the
 * distinction is needed once, by whoever is meeting the screen for the first
 * time, and never again.
 */
.crm-ms-screen__pair {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 8px;
  padding-inline-end: 8px;
}

/* The raised segment. `:has` rather than a class on the pair, because the tab
   is what knows whether it is the chosen one and the pair is only its box. */
.crm-ms-screen__pair:has(.crm-ms-screen__tab.is-on) {
  background: var(--ms-card);
  box-shadow: none;
}

/* The mark itself is crm-tip.css now, shared by every screen. */

.crm-ms-screen__x {
  border: 0;
  background: none;
  color: var(--ms-muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
}

.crm-ms-screen__x:hover { color: var(--ms-ink); }

.crm-ms-screen__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--ms-line);
  background: var(--ms-soft);
}

.crm-ms-screen__count {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: var(--ms-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* width and flex are both pinned: the app's own styles set selects to fill
   their container, which stretched these two across the whole bar.
 *
 * And the height, and the margin, for a reason worth writing down because this
 * is the second screen it has caught. The platform's compiled form CSS gives
 * every select `height: 40px` AND `margin-bottom: 16px`. A flex row centres the
 * MARGIN box, so a select with 16px hanging off its bottom is pushed 8px up -
 * measured here: the selects centred on 98 and the count beside them on 106.
 * Nothing in the row was wrong except that invisible margin.
 *
 * The two !important below are the only ones in this file: the rules they
 * fight live in a bundle this overlay cannot edit. */
.crm-ms-screen__pick {
  flex: 0 0 auto;
  width: auto;
  min-width: 150px;
  max-width: 220px;
  border: 1px solid var(--ms-line);
  border-radius: 8px;
  background: var(--ms-card);
  color: var(--ms-ink);
  font: inherit;
  font-size: 13px;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 30px 0 10px;
  line-height: 32px;
}

.crm-ms-screen__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 12px 20px;
}

.crm-ms-screen__row,
.crm-ms__row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ms-line);
  text-decoration: none;
  color: inherit;
}

.crm-ms__row:hover { background: var(--ms-soft); }

.crm-ms__rl { flex: 1; min-width: 0; }

.crm-ms__rn {
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.crm-ms__tag {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--ms-warn-bg);
  color: var(--ms-warn);
}

.crm-ms__rs {
  margin-top: 3px;
  font-size: 13px;
  color: var(--ms-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-ms__rm {
  margin-top: 3px;
  font-size: 12px;
  color: var(--ms-faint);
}

.crm-ms__rq {
  flex: none;
  font-size: 12.5px;
  color: var(--ms-muted);
  white-space: nowrap;
  padding-top: 2px;
}

.crm-ms-screen__empty {
  padding: 40px 14px;
  text-align: center;
  color: var(--ms-faint);
  font-size: 14px;
}

.crm-ms-screen__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12px 20px;
  border-top: 1px solid var(--ms-line);
}

.crm-ms-screen__page {
  border: 1px solid var(--ms-line);
  background: var(--ms-card);
  color: var(--ms-ink);
  font: inherit;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
}

.crm-ms-screen__page:disabled { opacity: .4; cursor: default; }

.crm-ms-screen__at {
  font-size: 13px;
  color: var(--ms-muted);
  font-variant-numeric: tabular-nums;
}

/* ---- respond.io's shape (owner, 2026-09-29) ----
   Their measures on what is already a list: 14px words, 32px controls, rows
   of at least 56px under hairlines, colour-only hover. */
.crm-ms-screen { --ms-line: rgba(53, 60, 69, .16); }
.dark .crm-ms-screen, [data-theme="dark"] .crm-ms-screen { --ms-line: #2c3138; }
.crm-ms-screen__tab { font-size: 14px; padding-block: 4px; }
.crm-ms-screen__pick { height: 32px !important; line-height: 30px; font-size: 14px; }
.crm-ms-screen__list { padding: 0; }
.crm-ms-screen__row, .crm-ms__row { min-height: 56px; padding: 10px 20px; transition: background-color .15s cubic-bezier(.4, 0, .2, 1); }
.crm-ms__row:hover { background: #f5f6f7; }
.dark .crm-ms__row:hover { background: rgba(255, 255, 255, .04); }