/* Bulatkin Leads desktop workspace · Lilac Pearl · 2026-09-15
 * Presentation-only override. API, state, SIP bridge and CRM contracts stay untouched.
 */
:root {
  --desktop-lilac: #6950cf;
  --desktop-lilac-hover: #5940b9;
  --desktop-lilac-soft: #f0ebfc;
  --desktop-lilac-line: #e7e0f1;
  --desktop-lilac-muted: #777080;
}

html, body { background: #f6f3fa; }
#app .shell {
  min-height: 100vh;
  background: radial-gradient(ellipse at 92% 0, #eee7fa 0, transparent 44%), #f6f3fa;
}
#app .topbar {
  min-height: 76px;
  padding: 12px 24px;
  gap: 12px;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--desktop-lilac-line);
  box-shadow: 0 4px 18px rgba(49,35,78,.05);
}
#app .brand { gap: 10px; }
#app .brand img { width: 42px; height: 42px; border-radius: 12px; box-shadow: 0 4px 14px rgba(105,80,207,.14); }
#app .brand strong { color: #312742; font-weight: 750; letter-spacing: .055em; }
#app .brand span { color: #877c92; }
#app .presence-control { min-height: 44px; border-radius: 12px; background: #fcfbfe; border-color: var(--desktop-lilac-line); }
#app .tabs { min-width: 420px; height: 48px; padding: 4px; gap: 4px; border-radius: 14px; background: #f3f0f7; border: 1px solid #ebe5f2; }
#app .tab { min-height: 40px; border-radius: 10px; color: #726a80; font-weight: 650; }
#app .tab.active { color: #fff; background: var(--desktop-lilac); box-shadow: 0 4px 12px rgba(105,80,207,.25); }
#app .header-search input { min-height: 44px; border-radius: 11px; }
#app .content { max-width: none; padding: 28px 34px 42px; }

#app .lead-layout {
  width: min(1600px, 100%);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
}
#app .card { border-color: var(--desktop-lilac-line); border-radius: 22px; box-shadow: 0 8px 28px rgba(49,35,78,.055); }
#app .callbar {
  min-height: 98px;
  padding: 16px 22px;
  border-radius: 20px;
  background: rgba(255,255,255,.98);
}
#app .callbar .operator-campaign-badge,
#app .operator-campaign-badge {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0 6px 0 0 !important;
  padding: 0 16px !important;
  border: 1px solid #e1d8f4;
  border-radius: 12px !important;
  background: var(--desktop-lilac-soft) !important;
  color: #4b388f !important;
  font-size: 15px !important;
  font-weight: 750 !important;
  white-space: nowrap;
}
#app .call-icon { width: 44px; height: 44px; background: #e8f8ee; color: #30b878; }
#app .callstate strong { color: #25222d; font-size: 17px; font-weight: 700; }
#app .callstate small { color: var(--desktop-lilac-muted); }
#app .sip-inline-control .switch.on { background: var(--desktop-lilac); }
#app .dial-field label { color: var(--desktop-lilac-muted); }
#app .callbar .call, #app .callbar .danger { min-width: 150px; border-radius: 12px; background: var(--desktop-lilac); border-color: var(--desktop-lilac); }
#app .callbar .call:hover { background: var(--desktop-lilac-hover); border-color: var(--desktop-lilac-hover); }

#app .lead-card, #app .workflow-card { min-height: 720px; border-radius: 22px; }
#app .lead-card { padding: 26px; }
#app .lead-data-section { padding-top: 0; }
#app .section-title { color: #5e566e; font-size: 17px; font-weight: 700; }
#app .form-grid { gap: 0 16px; }
#app input, #app textarea, #app select { border-color: #ded8e8; border-radius: 11px; background: #fdfcfe; }
#app input:focus, #app textarea:focus, #app select:focus { border-color: #9d86d8; box-shadow: 0 0 0 3px rgba(105,80,207,.10); }
#app .results { gap: 10px; margin-top: 12px; }
#app .result { min-height: 50px; padding: 12px 14px; border-color: #e4deed; border-radius: 12px; }
#app .result.selected { border-color: var(--desktop-lilac); background: var(--desktop-lilac-soft); color: var(--desktop-lilac); }
#app .save-row .primary, #app .primary { min-height: 46px; border-radius: 12px; background: var(--desktop-lilac); border-color: var(--desktop-lilac); box-shadow: 0 5px 14px rgba(105,80,207,.18); }
#app .save-row .primary:hover, #app .primary:hover:not(:disabled) { background: var(--desktop-lilac-hover); border-color: var(--desktop-lilac-hover); }
#app .next-actions { margin-top: 18px; padding-top: 18px; border-top: 1px solid #eee9f5; }
#app .next-actions .secondary { min-height: 44px; border-radius: 11px; }

#app .workflow-card { overflow: hidden; background: #fff; }
#app .workflow-tabs { padding: 14px 18px; border-bottom: 1px solid #eee9f5; background: #f7f4fb; }
#app .workflow-tab { min-height: 44px; border-radius: 11px; color: #80778b; font-size: 15px; font-weight: 650; }
#app .workflow-tab.active { background: #fff; color: var(--desktop-lilac); box-shadow: 0 2px 9px rgba(49,35,78,.08); }
#app .workflow { padding: 28px; }
#app .workflow-heading { padding-bottom: 18px; border-bottom-color: #eee9f5; }
#app .workflow-heading h2 { color: #2d2639; font-size: 22px; font-weight: 750; }
#app .workflow-heading p { color: var(--desktop-lilac-muted); }
#app .workflow-heading-actions .secondary { min-height: 44px; border-radius: 11px; }
#app .script-steps article { grid-template-columns: 42px minmax(0,1fr); gap: 16px; padding: 22px 0; border-bottom-color: #eee9f5; }
#app .script-steps article > span { width: 38px; height: 38px; background: var(--desktop-lilac-soft); color: var(--desktop-lilac); font-weight: 700; }
#app .script-steps b { color: #2d2639; font-size: 16px; font-weight: 700; }
#app .script-steps p { color: #5f566f; line-height: 1.6; }

@media (max-width: 1200px) {
  #app .topbar { padding-left: 16px; padding-right: 16px; }
  #app .tabs { min-width: 320px; }
  #app .content { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 900px) {
  #app .lead-layout { grid-template-columns: 1fr; }
  #app .lead-card, #app .workflow-card { min-height: 0; }
  #app .tabs { min-width: 0; }
}