/* Sales CRM — superadmin lead pipeline. Reuses global tokens; teal = action. */

.crm-wrap { padding: 24px; display: flex; flex-direction: column; gap: 16px; height: 100%; }
.crm-loading, .crm-empty { padding: 48px; text-align: center; color: var(--color-text-muted); font-size: 14px; }
.crm-muted { color: var(--color-text-secondary); }
.crm-num { text-align: right; font-variant-numeric: tabular-nums; }
.crm-overdue { color: var(--color-error); font-weight: 600; }

/* ---- Metrics strip ---- */
.crm-metrics { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.crm-metric {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px;
}
.crm-metric--alert { border-color: var(--color-error); background: var(--color-error-light); }
.crm-metric__value { font-size: 22px; font-weight: 700; color: var(--color-primary); line-height: 1.2; font-variant-numeric: tabular-nums; }
.crm-metric--alert .crm-metric__value { color: var(--color-error); }
.crm-metric__label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }

/* ---- Toolbar ---- */
.crm-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.crm-toolbar__left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.crm-viewtoggle { display: inline-flex; background: var(--color-gray-100); border-radius: 10px; padding: 3px; }
.crm-vt { border: none; background: none; padding: 7px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--color-text-secondary); cursor: pointer; transition: all .15s; }
.crm-vt--active { background: var(--color-surface); color: var(--color-primary); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.crm-search, .crm-select {
  height: 38px; border: 1px solid var(--color-border); border-radius: 10px;
  padding: 0 12px; font-size: 13px; color: var(--color-text); background: var(--color-surface);
}
.crm-search { min-width: 220px; }
.crm-search:focus, .crm-select:focus { outline: none; border-color: var(--color-secondary); }

/* ---- Chase today ---- */
.crm-chase { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 14px 16px; }
.crm-chase__title { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 10px; }
.crm-chase__items { display: flex; gap: 10px; flex-wrap: wrap; }
.crm-chase__item { display: flex; flex-direction: column; gap: 2px; text-align: left; background: var(--color-gray-50); border: 1px solid var(--color-border); border-radius: 10px; padding: 8px 12px; cursor: pointer; transition: all .15s; }
.crm-chase__item:hover { border-color: var(--color-secondary); }
.crm-chase__item--overdue { border-color: var(--color-error); background: var(--color-error-light); }
.crm-chase__name { font-size: 13px; font-weight: 600; color: var(--color-primary); }
.crm-chase__meta { font-size: 11px; color: var(--color-text-secondary); }

/* ---- Board ---- */
.crm-board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; flex: 1; align-items: flex-start; }
.crm-col { flex: 0 0 264px; background: var(--color-gray-50); border: 1px solid var(--color-border); border-radius: 12px; display: flex; flex-direction: column; max-height: 100%; }
.crm-col__head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--color-border); }
.crm-col__title { font-size: 13px; font-weight: 700; color: var(--color-primary); }
.crm-col__count { font-size: 11px; font-weight: 700; color: var(--color-text-secondary); background: var(--color-gray-200); border-radius: 999px; padding: 1px 8px; }
.crm-col__value { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--color-secondary); font-variant-numeric: tabular-nums; }
.crm-col__body { padding: 10px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; min-height: 60px; }
.crm-col__body--over { background: var(--color-secondary-light); border-radius: 8px; }
.crm-col__empty { font-size: 12px; color: var(--color-text-muted); text-align: center; padding: 16px 0; }

.crm-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 12px; cursor: pointer; transition: all .15s; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.crm-card:hover { border-color: var(--color-secondary); box-shadow: 0 4px 10px rgba(0,0,0,.07); }
.crm-card--dragging { opacity: .5; }
.crm-card__top { display: flex; align-items: center; gap: 8px; }
.crm-card__name { font-size: 13px; font-weight: 600; color: var(--color-primary); line-height: 1.35; }
.crm-card__company { font-size: 12px; color: var(--color-text-secondary); margin: 3px 0 0 16px; line-height: 1.35; }
.crm-card__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.crm-card__next { margin-top: 8px; font-size: 11px; color: var(--color-text-secondary); line-height: 1.35; }
.crm-card__next--overdue { color: var(--color-error); font-weight: 600; }

/* Temperature dot */
.crm-temp { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; display: inline-block; }
.crm-temp--hot { background: var(--color-error); }
.crm-temp--warm { background: var(--color-accent); }
.crm-temp--cold { background: var(--color-info, #38BDF8); }

/* Chips */
.crm-chip { font-size: 11px; font-weight: 600; border-radius: 6px; padding: 2px 8px; line-height: 1.5; white-space: nowrap; }
.crm-chip--channel { background: var(--color-gray-100); color: var(--color-text-secondary); }
.crm-chip--value { background: var(--color-secondary-light); color: var(--color-secondary-dark); }

/* Stage badges — colour comes inline from the stage record */
.crm-stage-badge { font-size: 11px; font-weight: 600; border-radius: 6px; padding: 2px 8px; white-space: nowrap; }

/* Column lock indicator */
.crm-col__lock { font-size: 11px; }

/* LinkedIn PDF drop zone */
.crm-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 20px; border: 1.5px dashed var(--color-border); border-radius: 12px; cursor: pointer; transition: all .15s; background: var(--color-gray-50); }
.crm-drop:hover, .crm-drop--over { border-color: var(--color-secondary); background: var(--color-secondary-light); }
.crm-drop--busy { opacity: .7; pointer-events: none; }
.crm-drop__icon { font-size: 18px; color: var(--color-secondary); }
.crm-drop__text { font-size: 13px; font-weight: 600; color: var(--color-primary); }
.crm-drop__hint { font-size: 11px; color: var(--color-text-muted); }
.crm-drop__or { text-align: center; font-size: 11px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 10px 0 6px; }

/* Source tabs in Add lead */
.crm-src-tabs { display: flex; gap: 4px; background: var(--color-gray-100); border-radius: 10px; padding: 3px; margin-bottom: 12px; }
.crm-src-tab { flex: 1; border: none; background: none; padding: 8px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); cursor: pointer; }
.crm-src-tab--active { background: var(--color-surface); color: var(--color-primary); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.crm-src-pane { margin-bottom: 12px; }

/* Stage manager */
.crm-stagemgr__hint { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 14px; line-height: 1.5; }
.crm-stagemgr { display: flex; flex-direction: column; gap: 8px; }
.crm-stagerow { display: flex; align-items: center; gap: 10px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 8px 10px; }
.crm-stagerow__swatch { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 12px; }
.crm-stagerow__label { flex: 1; height: 34px; }
.crm-stagerow__prob { font-size: 11px; font-weight: 600; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.crm-stagerow__lock { font-size: 11px; font-weight: 600; color: var(--color-accent); white-space: nowrap; }
.crm-stagerow__btn { width: 28px; height: 28px; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 7px; cursor: pointer; color: var(--color-text-secondary); font-size: 13px; }
.crm-stagerow__btn:hover:not(:disabled) { border-color: var(--color-secondary); color: var(--color-secondary); }
.crm-stagerow__btn:disabled { opacity: .35; cursor: default; }
.crm-stagerow__del:hover { border-color: var(--color-error); color: var(--color-error); }
.crm-stage-add { display: flex; gap: 8px; margin-top: 14px; }
.crm-stage-add .crm-input { flex: 1; }

/* ---- List ---- */
.crm-list-wrap { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; overflow: auto; flex: 1; }
.crm-list { width: 100%; border-collapse: collapse; }
.crm-list thead th { position: sticky; top: 0; background: var(--color-gray-50); text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted); padding: 12px 14px; border-bottom: 1px solid var(--color-border); z-index: 1; }
.crm-list tbody td { padding: 12px 14px; font-size: 13px; color: var(--color-text); border-bottom: 1px solid var(--color-gray-100); }
.crm-list__row { cursor: pointer; transition: background .12s; }
.crm-list__row:hover { background: var(--color-hover); }
.crm-list__name { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--color-primary); }

/* ---- Drawer ---- */
.crm-drawer-ov { position: fixed; inset: 0; background: rgba(15,23,42,.45); backdrop-filter: blur(3px); z-index: 9000; opacity: 0; transition: opacity .26s ease; }
.crm-drawer-ov--open { opacity: 1; }
.crm-drawer { position: fixed; top: 0; right: -100%; height: 100%; width: 46vw; min-width: 440px; max-width: 620px; background: var(--color-bg); box-shadow: -20px 0 60px rgba(0,0,0,.2); display: flex; flex-direction: column; transition: right .28s cubic-bezier(.22,1,.36,1); overflow-y: auto; }
.crm-drawer-ov--open .crm-drawer { right: 0; }
.crm-dr-expand { right: 56px; font-size: 16px; }

/* Expanded full-page view */
.crm-drawer--full { width: 100vw; min-width: 100vw; max-width: 100vw; }
.crm-drawer--full .crm-dr-hero,
.crm-drawer--full .crm-dr-contact,
.crm-drawer--full .crm-dr-actions,
.crm-drawer--full .crm-dr-tabs { padding-left: max(24px, calc((100vw - 1080px) / 2)); padding-right: max(24px, calc((100vw - 1080px) / 2)); }
.crm-drawer--full .crm-dr-tabbody { max-width: 1080px; margin: 0 auto; width: 100%; }
.crm-drawer--full .crm-dr-fields { grid-template-columns: repeat(3, 1fr); }
.crm-cal-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: var(--color-secondary-light); color: var(--color-secondary-dark); padding: 1px 6px; border-radius: 5px; margin-left: 6px; }

.crm-dr-hero { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); color: #fff; padding: 24px; position: relative; }
.crm-dr-close { position: absolute; top: 18px; right: 18px; background: rgba(255,255,255,.14); border: none; color: #fff; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.crm-dr-close:hover { background: rgba(255,255,255,.26); }
.crm-dr-id { display: flex; align-items: center; gap: 14px; }
.crm-dr-avatar { width: 52px; height: 52px; border-radius: 14px; background: var(--color-secondary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; color: #fff; flex: 0 0 52px; }
.crm-dr-name { font-size: 20px; font-weight: 700; line-height: 1.25; }
.crm-dr-sub { font-size: 13px; color: rgba(255,255,255,.75); margin-top: 3px; line-height: 1.35; }
.crm-dr-hero-tags { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.crm-dr-hero-tags .crm-chip--channel { background: rgba(255,255,255,.16); color: #fff; }

/* Contact strip (WhatsApp / Call / Email) */
.crm-dr-contact { display: flex; gap: 8px; padding: 12px 24px; background: var(--color-surface); border-bottom: 1px solid var(--color-border); flex-wrap: wrap; }
.crm-dr-cbtn { font-size: 12px; font-weight: 600; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--color-border); color: var(--color-text); text-decoration: none; transition: all .15s; }
.crm-dr-cbtn:hover { border-color: var(--color-secondary); color: var(--color-secondary); }
.crm-dr-cbtn--wa { background: #25D366; border-color: #25D366; color: #fff; }
.crm-dr-cbtn--wa:hover { background: #1EBE5A; border-color: #1EBE5A; color: #fff; }
.crm-dr-walink { color: #128C4B; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.crm-dr-walink:hover { text-decoration: underline; }
.crm-dr-wa-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: #25D36622; color: #128C4B; padding: 1px 6px; border-radius: 5px; }

.crm-dr-actions { display: flex; gap: 10px; align-items: center; padding: 16px 24px; background: var(--color-surface); border-bottom: 1px solid var(--color-border); flex-wrap: wrap; }
.crm-dr-stage { max-width: 170px; }
.crm-dr-del { margin-left: auto; color: var(--color-error); }

.crm-dr-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 20px; }

/* Tabbed drawer */
.crm-dr-tabs { display: flex; gap: 2px; padding: 0 20px; background: var(--color-surface); border-bottom: 1px solid var(--color-border); overflow-x: auto; }
.crm-dtab { border: none; background: none; padding: 12px 14px; font-size: 13px; font-weight: 600; color: var(--color-text-secondary); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.crm-dtab:hover { color: var(--color-primary); }
.crm-dtab.br-drawer-tab--active { color: var(--color-secondary); border-bottom-color: var(--color-secondary); }
.crm-dr-tabbody { padding: 20px 24px; display: flex; flex-direction: column; gap: 18px; }
.crm-ev-del { background: none; border: none; color: var(--color-text-muted); cursor: pointer; font-size: 13px; align-self: flex-start; }
.crm-ev-del:hover { color: var(--color-error); }

/* WhatsApp template menu */
.crm-wa-menu-ov { position: fixed; inset: 0; background: rgba(15,23,42,.4); backdrop-filter: blur(3px); z-index: 9600; display: flex; align-items: center; justify-content: center; padding: 20px; }
.crm-wa-menu { background: var(--color-surface); border-radius: 14px; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); width: 420px; max-width: 100%; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.crm-wa-menu__title { font-size: 14px; font-weight: 700; color: var(--color-primary); margin-bottom: 6px; }
.crm-wa-opt { text-align: left; background: var(--color-gray-50); border: 1px solid var(--color-border); border-radius: 10px; padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; transition: all .15s; }
.crm-wa-opt:hover { border-color: #25D366; }
.crm-wa-opt strong { font-size: 13px; color: var(--color-primary); }
.crm-wa-opt span { font-size: 11px; color: var(--color-text-secondary); }
.crm-wa-cancel { background: none; border: none; color: var(--color-text-secondary); font-size: 12px; cursor: pointer; padding: 6px; margin-top: 2px; }
.crm-dr-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.crm-dr-field { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 12px 14px; }
.crm-dr-field__label { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 4px; }
.crm-dr-field__value { font-size: 14px; font-weight: 500; color: var(--color-text); line-height: 1.4; word-break: break-word; }

.crm-dr-log-head { display: flex; gap: 8px; }
.crm-dr-log-head .crm-input { flex: 1; }
.crm-dr-log-head select.crm-input { flex: 0 0 120px; }

.crm-dr-timeline { display: flex; flex-direction: column; gap: 12px; }
.crm-tl { display: grid; grid-template-columns: 14px 1fr; gap: 12px; }
.crm-tl__dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; background: var(--color-gray-300); }
.crm-tl__dot--call { background: var(--color-secondary); }
.crm-tl__dot--whatsapp { background: var(--color-success); }
.crm-tl__dot--email { background: var(--color-info, #38BDF8); }
.crm-tl__dot--stage_change { background: var(--color-accent); }
.crm-tl__text { font-size: 13px; color: var(--color-text); line-height: 1.45; }
.crm-tl__meta { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }

/* ---- Forms / modal ---- */
.crm-input { width: 100%; height: 38px; border: 1px solid var(--color-border); border-radius: 10px; padding: 0 12px; font-size: 13px; color: var(--color-text); background: var(--color-surface); }
.crm-input:focus { outline: none; border-color: var(--color-secondary); }
textarea.crm-input { height: auto; padding: 10px 12px; }

.crm-modal-ov { position: fixed; inset: 0; background: rgba(15,23,42,.5); backdrop-filter: blur(4px); z-index: 9500; display: flex; align-items: center; justify-content: center; padding: 20px; }
.crm-modal { background: var(--color-surface); border-radius: 16px; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); width: 560px; max-width: 100%; max-height: 92vh; overflow-y: auto; padding: 26px; }
.crm-modal__title { font-size: 18px; font-weight: 700; color: var(--color-primary); margin-bottom: 18px; }
.crm-form { display: flex; flex-direction: column; gap: 12px; }
.crm-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }
.crm-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.crm-modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

/* ---- Vault search in add-lead ---- */
.crm-vault { background: var(--color-gray-50); border: 1px solid var(--color-border); border-radius: 12px; padding: 14px; margin-bottom: 16px; }
.crm-vault__label { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-secondary); margin-bottom: 8px; }
.crm-vault__results { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.crm-vault__hit { text-align: left; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 10px 12px; cursor: pointer; transition: all .15s; display: flex; flex-direction: column; gap: 3px; }
.crm-vault__hit:hover { border-color: var(--color-secondary); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.crm-vault__hit-main { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.crm-vault__hit-name { font-size: 13px; font-weight: 700; color: var(--color-primary); }
.crm-vault__badge { color: var(--color-secondary); font-size: 11px; }
.crm-vault__hit-sub { font-size: 12px; color: var(--color-text-secondary); }
.crm-vault__hit-stats { font-size: 11px; color: var(--color-text-muted); line-height: 1.4; }
.crm-vault__none { font-size: 12px; color: var(--color-text-muted); padding: 8px 4px; }
.crm-vault__chosen { align-items: center; gap: 10px; margin-top: 8px; padding: 8px 12px; background: var(--color-secondary-light); border-radius: 10px; }
.crm-vault__tick { font-size: 12px; font-weight: 700; color: var(--color-secondary-dark); }
.crm-vault__chosen-name { font-size: 12px; color: var(--color-text); flex: 1; }
.crm-vault__clear { background: none; border: none; color: var(--color-text-secondary); font-size: 12px; cursor: pointer; text-decoration: underline; }

/* Linked account panel inside the drawer */
.crm-acct { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 16px; margin-bottom: 4px; }
.crm-acct__loading { font-size: 13px; color: var(--color-text-muted); }
.crm-acct__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.crm-acct__title { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted); }
.crm-acct__status { font-size: 11px; font-weight: 700; border-radius: 6px; padding: 2px 8px; text-transform: capitalize; }
.crm-acct__susp { font-size: 11px; font-weight: 700; color: #fff; background: var(--color-error); border-radius: 6px; padding: 2px 8px; }
.crm-acct__meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--color-text-secondary); margin-bottom: 12px; }
.crm-acct__meta span { font-weight: 600; }
.crm-acct__users { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.crm-acct__user { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--color-gray-50); border-radius: 8px; padding: 8px 10px; }
.crm-acct__uname { font-size: 13px; font-weight: 600; color: var(--color-primary); }
.crm-acct__uemail { font-size: 11px; color: var(--color-text-secondary); }
.crm-acct__ulogin { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; }
.crm-acct__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Email composer */
.crm-email-modal { width: 760px; max-width: 96vw; }
.crm-email-sig { font-size: 12px; color: var(--color-text-muted); margin-top: 10px; display: flex; align-items: center; gap: 6px; }
.crm-email-sig::before { content: "✎"; color: var(--color-secondary); }
.crm-dr-cbtn--email { cursor: pointer; font-family: inherit; }

/* ---- Toast ---- */
.crm-toast { position: fixed; bottom: 24px; right: 24px; background: var(--color-primary); color: #fff; padding: 12px 20px; border-radius: 12px; font-size: 13px; font-weight: 500; box-shadow: 0 10px 25px rgba(0,0,0,.15); z-index: 10001; transition: opacity .3s; }

/* ---- Responsive ---- */
@media (max-width: 1100px) { .crm-metrics { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) {
  .crm-wrap { padding: 14px; }
  .crm-metrics { grid-template-columns: repeat(2, 1fr); }
  .crm-drawer { width: 100vw; min-width: 0; max-width: none; }
  .crm-dr-fields { grid-template-columns: 1fr; }
  .crm-search { min-width: 140px; }
}
.crm-meet-link { color: var(--color-secondary); font-weight: 600; text-decoration: none; }
.crm-meet-link:hover { text-decoration: underline; }