/* monday CRM product frame. monday CRM runs on the same monday platform and the same Vibe design system (monday-tokens.css);
   what changes is the frame: a light teal top bar and side menu, a teal "CRM" mark, CRM boards (Contacts, Leads, Deals, Accounts,
   Activities), connected-item chips, the Emails & Activities timeline and AI panels.
   MEASURED from monday's own help-centre pictures of monday CRM (archived copies, 2025-2026). Their window is 1728 px wide, drawn at 102.8%.
   Colours marked "measured" come from those pictures; everything else is a Vibe token. Study copy for the AltLeads team. */

.mc { position: relative; overflow: hidden; color: var(--primary-text-color); font: 400 14px/20px var(--font-family); -webkit-font-smoothing: antialiased;
  /* measured CRM frame colours (light) */
  --mc-top: #ddecf0; --mc-side-a: #fcfdfe; --mc-side-b: #e3f0f3; --mc-side-sel: #cde8ed; --mc-chip: #cbe9ec; --mc-chip-text: var(--primary-text-color);
  --mc-ai-chip: #e6eaed; --mc-link: #1f76c2; --mc-scroll: #bbbfce;
  background: var(--mc-top); }
.dark-app-theme .mc { --mc-top: #1f2235; --mc-side-a: #292f4c; --mc-side-b: #23293f; --mc-side-sel: #2f4a5b; --mc-chip: #2c4a52; --mc-ai-chip: #30324e; --mc-link: #69a7ef; --mc-scroll: #4b4e69; }
.black-app-theme .mc { --mc-top: #111111; --mc-side-a: #181b1f; --mc-side-b: #141617; --mc-side-sel: #233a40; --mc-chip: #22393e; --mc-ai-chip: #2a2b2f; --mc-link: #69a7ef; --mc-scroll: #4b4d55; }
/* ours, said so on the study page: no picture of monday CRM in dark or night exists in the sources, so dark and night use Vibe's
   dark and black surfaces with the CRM tint carried over */

.mc * { box-sizing: border-box; }
:where(.mc) button { font: inherit; color: inherit; }
.mc .a { position: absolute; white-space: nowrap; }
.mc .t { position: absolute; white-space: nowrap; line-height: 20px; }
.mc .i { position: absolute; display: grid; place-items: center; color: var(--icon-color); line-height: 0; }
.mc .i svg { display: block; }
.mc img.a { display: block; }

/* top bar */
.mc-top { position: absolute; left: 0; right: 0; top: 0; background: var(--mc-top); }
.mc-tb { position: absolute; border: 0; padding: 0; background: transparent; display: grid; place-items: center; border-radius: var(--border-radius-small); color: var(--primary-text-color); cursor: pointer;
  transition: background-color var(--motion-productive-medium) var(--motion-timing-transition); }
.mc-tb:hover { background: var(--primary-background-hover-color); }
.mc-tdiv { position: absolute; width: 1px; background: var(--layout-border-color); }
.mc-dot { position: absolute; border-radius: 50%; background: var(--negative-color); }
.mc-mebox { position: absolute; border-radius: var(--border-radius-small); background: var(--primary-background-color); opacity: .55; }
.dark-app-theme .mc-logo-l, .black-app-theme .mc-logo-l { filter: brightness(0) invert(1) opacity(.92); }

/* side menu */
.mc-side { position: absolute; left: 0; bottom: 0; border-radius: 16px 16px 0 0; background: linear-gradient(180deg, var(--mc-side-a), var(--mc-side-b)); overflow: hidden; }
.mc-side .row { position: absolute; display: flex; align-items: center; border-radius: var(--border-radius-small); cursor: pointer; color: var(--primary-text-color);
  transition: background-color var(--motion-productive-medium) var(--motion-timing-transition); }
.mc-side .row:hover { background: var(--primary-background-hover-color); }
.mc-side .row.on { background: var(--mc-side-sel); }
.mc-side .lbl { font: 600 13px/20px var(--font-family); }
.mc-aichip { position: absolute; border-radius: 6px; background: var(--mc-ai-chip); font: 600 13px/20px var(--font-family); display: flex; align-items: center; gap: 6px; padding-left: 9px; }
.mc-ws { position: absolute; border: 1px solid var(--ui-border-color); border-radius: var(--border-radius-small); background: var(--primary-background-color); display: flex; align-items: center; font: 600 16px/22px var(--font-family); }
.mc-wsplus { position: absolute; border: 0; border-radius: var(--border-radius-small); background: var(--primary-color); color: var(--text-color-on-primary); display: grid; place-items: center; cursor: pointer; }
.mc-wsplus:hover { background: var(--primary-hover-color); }
.mc-sscroll { position: absolute; width: 8px; border-radius: 4px; background: var(--mc-scroll); }
.mc-collapse { position: absolute; width: 26px; height: 26px; border-radius: 50%; border: 0; padding: 0; background: var(--mc-top); display: grid; place-items: center; cursor: pointer; z-index: 3; color: var(--icon-color); }
.mc-collapse:hover { background: var(--primary-background-hover-color); }

/* main panel */
.mc-main { position: absolute; right: 0; bottom: 0; background: var(--primary-background-color); border-radius: 16px 0 0 0; overflow: hidden; }
.mc-title { position: absolute; font: 500 24px/32px var(--font-family); white-space: nowrap; }
.mc-hbtn { position: absolute; display: flex; align-items: center; gap: 8px; padding: 0 6px; height: 32px; border: 0; border-radius: var(--border-radius-small); background: transparent; cursor: pointer; white-space: nowrap; font: 400 14px/20px var(--font-family); }
.mc-hbtn:hover { background: var(--primary-background-hover-color); }
.mc-hbtn svg, .mc-hbtn img { flex: none; }
.mc-new { position: absolute; display: inline-flex; align-items: center; justify-content: center; padding: 0 2px 0 7px; border: 1px solid var(--primary-color); border-radius: 4px; color: var(--primary-color); font: 400 12px/14px var(--font-family); }
.mc-invite { position: absolute; display: flex; border: 1px solid var(--ui-border-color); border-radius: var(--border-radius-small); }
.mc-invite > * { display: grid; place-items: center; height: 100%; }
.mc-invite > * + * { border-left: 1px solid var(--ui-border-color); }
.mc-tabs-line { position: absolute; height: 1px; background: var(--layout-border-color); }
.mc-tab { position: absolute; height: 34px; display: flex; align-items: center; gap: 12px; padding: 0 8px; border: 0; background: transparent; border-radius: var(--border-radius-small) var(--border-radius-small) 0 0; cursor: pointer; font: 400 14px/20px var(--font-family); }
.mc-tab:hover { background: var(--primary-background-hover-color); }
.mc-tab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--primary-color); }
.mc-primary { position: absolute; display: flex; height: 32px; border-radius: var(--border-radius-small); background: var(--primary-color); color: var(--text-color-on-primary); overflow: hidden; }
.mc-primary button { border: 0; padding: 0 8px; background: transparent; color: inherit; cursor: pointer; font: 400 14px/20px var(--font-family); display: grid; place-items: center; }
.mc-primary button:hover { background: var(--primary-hover-color); }
.mc-primary button + button { border-left: 1px solid rgba(0, 0, 0, .2); }
.mc-gradbar { position: absolute; width: 5px; border-radius: 3px; background: linear-gradient(180deg, #4394ce, #b37fd9 45%, #f7b15f); }
.mc-hscroll { position: absolute; height: 12px; background: var(--primary-background-color); }
.mc-hscroll i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--mc-scroll); }

/* board table (CRM look: centred cells, 36px rows, connected-item chips) */
.mc-gt { position: absolute; display: flex; align-items: center; gap: 10px; border: 0; padding: 0; background: transparent; font: 600 19px/24px var(--font-family); white-space: nowrap; cursor: pointer; }
.mc-gt small { font: 400 14px/20px var(--font-family); color: var(--secondary-text-color); }
.mc-tbl { position: absolute; }
.mc-bar { position: absolute; left: 0; width: 7px; }
.mc-cell { position: absolute; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--layout-border-color); border-bottom: 1px solid var(--layout-border-color); background: var(--primary-background-color); white-space: nowrap; overflow: hidden; }
.mc-row:hover .mc-cell:not(.lab) { background: var(--primary-background-hover-color); }
.mc-cell.hd { color: var(--primary-text-color); }
.mc-cell.lab { color: #fff; cursor: pointer; transition: opacity var(--motion-productive-medium); }
.mc-cell.nm { justify-content: flex-start; }
.mc-chk { width: 16px; height: 16px; border: 1px solid var(--ui-border-color); border-radius: 3px; background: var(--primary-background-color); cursor: pointer; }
.mc-chk.on { background: var(--primary-color); border-color: var(--primary-color); }
.mc-chip { display: inline-flex; align-items: center; gap: 5px; height: 22.5px; padding: 0 8px; border-radius: 3px; background: var(--mc-chip); color: var(--mc-chip-text); font: 400 14px/20px var(--font-family); white-space: nowrap; }
.mc-chip svg { flex: none; }
.mc-link { color: var(--mc-link); }
.mc-addgrp { position: absolute; display: flex; align-items: center; gap: 8px; padding: 0 9px; border: 1px solid var(--ui-border-color); border-radius: var(--border-radius-small); background: var(--primary-background-color); cursor: pointer; font: 400 14px/20px var(--font-family); }
.mc-addgrp:hover { background: var(--primary-background-hover-color); }

/* AI agent side panel (measured from the AI Lead Agent picture) */
.mc-agent { position: absolute; z-index: 4; border-radius: 16px 0 0 0; background: linear-gradient(180deg, var(--primary-background-color) 30%, var(--mc-agent-b, #f1f5ff));
  box-shadow: -6px 0 20px rgba(0, 0, 0, .06); animation: mc-slide var(--motion-productive-long) var(--motion-timing-enter); }
.mc-agent[hidden] { display: none; }
@keyframes mc-slide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.dark-app-theme .mc-agent { --mc-agent-b: #262a45; } .black-app-theme .mc-agent { --mc-agent-b: #1b1d22; }
.mc-acard { position: absolute; border-radius: 12px; background: var(--primary-background-color); opacity: .6; }
.mc-job { position: absolute; border-radius: 8px; background: var(--primary-background-color); box-shadow: var(--box-shadow-small); }
.mc-done { position: absolute; display: grid; place-items: center; border-radius: 4px; background: var(--color-grass_green); color: #fff; font: 400 14px/20px var(--font-family); }
.mc-alink { position: absolute; display: flex; align-items: center; gap: 10px; padding: 0 18px 0 17px; border-radius: 8px; background: var(--primary-background-color); color: var(--primary-text-color); text-decoration: none; white-space: nowrap; font: 400 14px/20px var(--font-family);
  transition: background-color var(--motion-productive-medium) var(--motion-timing-transition); }
.mc-alink:hover { background: var(--primary-background-hover-color); }
.mc-alink b { font-weight: 600; }
.mc-alink > span:not(.i) { color: var(--secondary-text-color); margin-left: -2px; }
.mc-alink > svg { margin-left: auto; }
.mc-alink .i { color: var(--primary-text-color); }

/* CRM item card (contact card) — measured from the Emails & Activities help picture. Inside the card monday CRM uses a teal accent. */
.mc { --mc-teal: #0f748f; --mc-teal-hover: #0b5f76; --mc-pill: #cce5ff; --mc-pill-text: #0060b9; --mc-field-grey: #f3f5f7; --mc-sky: #98dff4; }
.dark-app-theme .mc, .black-app-theme .mc { --mc-teal: #2a93ad; --mc-teal-hover: #3aa6c1; --mc-pill: #1f3e66; --mc-pill-text: #9cc8ff; --mc-field-grey: var(--allgrey-background-color); }
.mk-behind { position: absolute; inset: 0; }
.mk-dim { position: absolute; inset: 0; background: rgba(41, 47, 76, .7); }
.mk-card { position: absolute; z-index: 2; background: var(--primary-background-color); border-radius: 12px 12px 0 0; overflow: hidden; box-shadow: var(--box-shadow-large);
  animation: mk-in var(--motion-productive-long) var(--motion-timing-enter); }
.mk-card[hidden] { display: none; }
@keyframes mk-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.mk-name { position: absolute; margin: 0; font: 500 24px/36px Poppins, var(--font-family); white-space: nowrap; }
.mk-av { position: absolute; display: grid; place-items: center; border-radius: 50%; background: var(--color-grass_green); color: #fff; font-weight: 600; font-family: var(--font-family); }
.mk-nav { position: absolute; display: grid; place-items: center; border: 1px solid var(--ui-border-color); border-radius: var(--border-radius-small); color: var(--icon-color); }
.mk-tab { position: absolute; display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; padding: 0; background: transparent; font: 400 14px/20px var(--font-family); cursor: pointer; white-space: nowrap;
  border-radius: var(--border-radius-small) var(--border-radius-small) 0 0; transition: background-color var(--motion-productive-medium) var(--motion-timing-transition); }
.mk-tab:hover { background: var(--primary-background-hover-color); }
.mk-tab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--mc-teal); }
.mk-tsep { position: absolute; background: var(--layout-border-color); }
.mk-body { position: absolute; background: var(--allgrey-background-color); }
.mk-banner { position: absolute; border: 1px solid var(--ui-border-color); border-radius: 8px; background: var(--allgrey-background-color); }
.mk-teal { position: absolute; white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: var(--border-radius-small); background: var(--mc-teal); color: #fff; font: 400 14px/20px var(--font-family); cursor: pointer;
  transition: background-color var(--motion-productive-medium) var(--motion-timing-transition); }
.mk-teal:hover { background: var(--mc-teal-hover); }
.mk-w { position: absolute; border: 1px solid var(--layout-border-color); border-radius: 8px 8px 0 0; background: var(--primary-background-color); }
.mk-hl { position: absolute; background: var(--layout-border-color); }
.mk-tl { position: absolute; background: var(--allgrey-background-color); }
.mk-vline { position: absolute; background: var(--ui-border-color); }
.mk-date { position: absolute; display: grid; place-items: center; border-radius: 4px; background: var(--primary-background-color); font: 400 14px/20px var(--font-family); }
.mk-note { position: absolute; border: 1px solid var(--ui-border-color); border-radius: 8px; background: var(--primary-background-color); }
.mk-pill { display: inline-block; padding: 0 9px; border-radius: 12px; background: var(--mc-pill); color: var(--mc-pill-text); line-height: 22px; }
.mk-field { position: absolute; display: flex; align-items: center; justify-content: center; border: 1px solid var(--layout-border-color); border-radius: 4px; background: var(--primary-background-color); font: 400 14px/20px var(--font-family); cursor: pointer; }
.mk-field:hover { border-color: var(--ui-border-color); }
.mk-field.grey { background: var(--mc-field-grey); }
.mk-field.lab { border: 0; background: var(--mc-sky); color: #fff; }
.mk-chip { height: 21px; font-size: 14px; }
.mk-sb { position: absolute; border-radius: 3px; background: var(--mc-scroll); opacity: .7; }
.mk-msb { background: #9a9ca8; }
.mk-emoji.on { color: var(--mc-teal); background: var(--primary-selected-color); }

/* Deals pipeline (Kanban) — measured from monday's marketing picture (drawn 1.4x). Stage colours are the picture's, measured. */
.mcd { background: var(--primary-background-color); --mcd-new: #003fa7; --mcd-meet: #00baff; --mcd-prop: #ffcc00; --mcd-won: #00bb5f; --mcd-tag: #f4f4f4; }
.dark-app-theme .mcd { --mcd-tag: var(--allgrey-background-color); } .black-app-theme .mcd { --mcd-tag: var(--allgrey-background-color); }
.mcd-title { position: absolute; margin: 0; font: 500 36px/52px Poppins, var(--font-family); white-space: nowrap; letter-spacing: -.2px; }
.mcd-tab { position: absolute; display: flex; align-items: center; border: 0; padding: 0; background: transparent; font: 400 15px/20px var(--font-family); cursor: pointer; white-space: nowrap; }
.mcd-tab:hover { color: var(--primary-color); }
.mcd-tab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--primary-color); }
.mcd-bat { position: absolute; border-radius: 2px; }
.mcd-board { position: absolute; border: 1px solid var(--layout-border-color); border-radius: 4px 4px 0 0; }
.mcd-col { position: absolute; display: flex; flex-direction: column; box-shadow: inset -1px 0 0 var(--layout-border-color); transition: background-color var(--motion-productive-medium); }
.mcd-col.drop { background: var(--primary-highlighted-color, #f0f7ff); }
.mcd-head { position: relative; flex: none; display: flex; align-items: center; padding-left: 15.7px; color: #fff; font: 400 17px/24px var(--font-family); }
.mcd-head::after { content: ""; position: absolute; right: -10px; top: 0; bottom: 0; width: 10px; background: inherit; clip-path: polygon(0 0, 100% 50%, 0 100%); z-index: 1; }
.mcd-col[data-s="3"] .mcd-head::after { display: none; }
.mcd-head b { font-weight: 400; }
.mcd-sum { flex: none; display: flex; align-items: center; padding-left: 15.7px; font: 400 17px/24px var(--font-family); box-shadow: inset 0 -1px 0 var(--layout-border-color); }
.mcd-cards { display: flex; flex-direction: column; gap: 11.4px; }
.mcd-card { border: 1px solid var(--layout-border-color); border-radius: 6px; padding: 10.7px 11.4px 11px; background: var(--primary-background-color); cursor: grab;
  transition: box-shadow var(--motion-productive-medium) var(--motion-timing-transition), transform var(--motion-productive-short); }
.mcd-card:hover { box-shadow: var(--box-shadow-small); }
.mcd-card.sel { border-color: var(--primary-color); box-shadow: 0 0 0 1px var(--primary-color); }
.mcd-card.drag { opacity: .5; transform: rotate(2deg); }
.mcd-card:focus-visible { outline: none; box-shadow: 0 0 0 3px hsla(209, 100%, 50%, .5); }
.mcd-name { font: 400 14px/20px var(--font-family); }
.mcd-tags { display: flex; gap: 7px; margin-top: 9px; }
.mcd-tag { height: 22px; display: inline-flex; align-items: center; gap: 4px; padding: 0 7px 0 10px; border-radius: 2px; background: var(--mcd-tag); box-shadow: inset 3px 0 0 var(--st, transparent); font: 400 14px/20px var(--font-family); white-space: nowrap; }
.mcd-tag:not([style]) { padding-left: 7px; }
.mcd-foot { display: flex; align-items: center; gap: 16px; margin-top: 10px; height: 25px; }
.mcd-av { width: 25px; height: 25px; margin-right: auto; }
.mcd-n { display: inline-flex; align-items: center; gap: 6px; font: 400 14px/20px var(--font-family); color: var(--primary-text-color); }
.mcd-n svg { color: var(--icon-color); }
.mcd-ai { position: relative; margin-top: 9px; padding: 6px 7px; border-radius: 4px; font: 400 11px/17px var(--font-family); background: linear-gradient(90deg, #e8f1fc, #e8f4fb); box-shadow: inset 0 0 0 1px #c9dcf9; }
.dark-app-theme .mcd-ai, .black-app-theme .mcd-ai { background: var(--allgrey-background-color); box-shadow: inset 0 0 0 1px var(--layout-border-color); }
.mcd-ail { display: block; color: var(--secondary-text-color); }
.mcd-x { position: absolute; right: 2px; top: 2px; width: 20px; height: 20px; border: 0; padding: 0; border-radius: 3px; background: transparent; display: grid; place-items: center; color: var(--icon-color); cursor: pointer; opacity: 0; }
.mcd-ai:hover .mcd-x, .mcd-x:focus-visible { opacity: 1; }
.mcd-addsub { margin: 102px 0 0 21px; height: 23px; border: 1px solid var(--layout-border-color); border-radius: 4px; padding-left: 12px; font: 400 11px/22px var(--font-family); color: var(--secondary-text-color); }
.mcd-marks .a { pointer-events: none; }
.mcd-bubble { position: absolute; display: flex; align-items: center; padding-left: 135px; border-radius: 0 12px 12px 0; background: var(--primary-background-color); box-shadow: 0 8px 30px rgba(0, 0, 0, .12); font: 400 22.5px/32px Poppins, var(--font-family); white-space: nowrap; pointer-events: none; }
.mcd-disc { position: absolute; display: grid; place-items: center; border-radius: 50%; background: var(--primary-background-color); box-shadow: 0 8px 30px rgba(0, 0, 0, .1); pointer-events: none; }
.rk-nomarks .mcd-marks { display: none; }

/* review fix 12 Oct: the pale "Indications" cell gets a dark version (its words turn light in dark themes) */
.mc { --mc-ind: #d4e5db; }
.dark-app-theme .mc { --mc-ind: #2f4a3d; } .black-app-theme .mc { --mc-ind: #27392f; }