@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;450;600;700&family=Instrument+Serif:ital@0;1&display=swap");


:root {
  
  --display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "IBM Plex Sans", ui-sans-serif, "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;


  --bg: #090c0b;
  --surface: #101614;
  --surface-2: #18201d;
  --line: #26312c;
  --line-soft: #1a221f;

  --ink: #edf2ef;
  --ink-dim: #9daaa3;
  /* 5.48:1 against the lightest surface it sits on. The old #64726b measured
     3.29:1 -- under the 4.5:1 AA floor on every single piece of secondary
     text in the product, which is most of the text there is. */
  --ink-faint: #8b978f;

  /* Ours, outbound. Jade rather than the usual messenger indigo: high
     contrast against the ground, readable under white text, and nothing else
     in the product uses it -- so a filled jade bubble always means "we said
     this". */
  /* Two jades, because a fill and a letterform have different jobs.
     --mine fills a bubble and only has to carry white text: darkened from
     #12856a, which put that text at 4.34:1, just under the floor.
     --mine-text is the same hue as *text* on a dark ground, where the fill
     colour measured 3.63:1 and failed outright. */
  --mine: #0f7157;
  --mine-ink: #f2fbf8;
  --mine-text: #38b795;

  /* Amber means one thing only: a person is needed. It is the loudest colour
     here and it is spent on exactly one meaning. */
  --signal: #f0a340;
  --signal-dim: #f0a3401f;
  /* The queue badge sits on --signal, and --signal flips from light amber to
     dark ochre between themes. A single hardcoded foreground is legible in
     one of them and 3.1:1 in the other, so it gets a token per theme. */
  --signal-ink: #1b1204;
  --alert: #e8576b;
  --alert-dim: #e8576b1a;

  /* Smallest type in the product. Below this the audit flags it, and an agent
     reading a shift's worth of metadata pays for every lost pixel. */
  --t-micro: 0.75rem;   /* 12px -- tags, delivery state, timestamps */
  --t-small: 0.8125rem; /* 13px -- secondary lines, hints */

  /* A real radius scale, not one bubbly value everywhere. Structure stays
     crisp; only things you press or that carry a status get rounded. */
  --r-sharp: 4px;
  --r-soft: 8px;
  --r-pill: 999px;
  --r-bubble: 14px;

  --sidebar: 340px;
  --panel: 300px;
}

:root[data-theme="light"] {
  /* Bone, not white. A pure-white ground under a jade accent looks like a
     default; a warm paper tone looks chosen. */
  --bg: #faf9f5;
  --surface: #ffffff;
  --surface-2: #eeece5;
  --line: #dcd9cf;
  --line-soft: #e9e6dd;
  --ink: #141816;
  --ink-dim: #55605a;
  --ink-faint: #5d665f;
  --mine: #0f7157;
  --mine-ink: #f4fbf9;
  --mine-text: #0b5f4b;
  --signal: #8a590d;
  --signal-dim: #f0a34026;
  --signal-ink: #fff5e6;
  --alert: #b52a3c;
  --alert-dim: #b52a3c14;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #faf9f5;
    --surface: #ffffff;
    --surface-2: #eeece5;
    --line: #dcd9cf;
    --line-soft: #e9e6dd;
    --ink: #141816;
    --ink-dim: #55605a;
    --ink-faint: #5d665f;
    --mine: #0f7157;
    --mine-ink: #f4fbf9;
    --mine-text: #0b5f4b;
    --signal: #8a590d;
    --signal-dim: #f0a34026;
    --signal-ink: #fff5e6;
    --alert: #b52a3c;
    --alert-dim: #b52a3c14;
  }
}

/* ---------- base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

/* Any class setting a display value outranks the UA stylesheet rule for
   [hidden], which silently turns "hidden" into "visible but empty". */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
}

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  border-radius: 4px;
}

.muted { color: var(--ink-faint); }
.spacer { flex: 1; }

/* ---------- shell ----------
 *
 * One column, capped at a reading width. The previous shell spent a 340px
 * sidebar and a 300px panel on a job that is usually "answer one thing", so
 * two thirds of the screen was navigation and one third was work. The list is
 * now a page you visit, not furniture you look past.
 */

.bar {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  height: 52px;
  padding: 0 1.25rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  /* It is a link home, so it has to be big enough to hit. */
  min-height: 34px;
  padding-right: 0.2rem;
  font-family: var(--mono);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ink);
}

/* The only number worth showing at all times: how many people are waiting. */
.count {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 0.35rem;
  border-radius: var(--r-pill);
  background: var(--signal);
  color: var(--signal-ink);
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0;
}

.bar nav { display: flex; gap: 1.1rem; }

.bar nav a {
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink-faint);
  padding: 0.2rem 0;
  border-bottom: 2px solid transparent;
}

.bar nav a:hover { color: var(--ink-dim); }
.bar nav a.on { color: var(--ink); border-bottom-color: var(--signal); }

.flashes { max-width: 46rem; margin: 0.9rem auto 0; padding: 0 1.25rem; }

.flash {
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--mine-text);
  border-radius: var(--r-sharp);
  background: var(--surface);
  font-size: var(--t-small);
}

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

.task,
.page {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.6rem 1.25rem 4rem;
}

/* The reason, as a headline. It is the single most useful fact on this screen
   and it used to be a grey machine token in a list row. */
.why { margin-bottom: 1.6rem; }

.why-kicker {
  margin: 0 0 0.5rem;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal);
}

.why h1 {
  margin: 0 0 0.4rem;
  font-family: var(--display);
  font-size: 1.85rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.why-next { margin: 0; color: var(--ink-dim); max-width: 46ch; }

.why-inline { margin-bottom: 1.2rem; }

.why-inline h2 {
  margin: 0 0 0.25rem;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
}

/* Who, and what we already know: one line beside the work, rather than a
   column the operator has to look away from the conversation to read. */
.who {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  padding: 0.7rem 0.85rem;
  margin-bottom: 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-soft);
  background: var(--surface);
}

.who-text { min-width: 0; flex: 1; }
.who-text b { display: block; font-size: 0.9rem; }

.who-facts {
  display: block;
  font-size: var(--t-small);
  color: var(--ink-faint);
  overflow-wrap: anywhere;
}

.back {
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.35rem 0.5rem;
  border-radius: var(--r-soft);
  color: var(--ink-dim);
}

.back:hover { background: var(--surface-2); color: var(--ink); }

.avatar {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--ink-dim);
}

/* ---------- conversation ---------- */

.talk {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 1.1rem;
}

.talk-full { margin-bottom: 1.4rem; }

.msg { display: flex; flex-direction: column; max-width: 82%; }
.msg-client { align-self: flex-start; align-items: flex-start; }
.msg-bot, .msg-agent { align-self: flex-end; align-items: flex-end; }
.msg-system { align-self: center; align-items: center; }

.msg-body {
  padding: 0.5rem 0.8rem;
  border-radius: var(--r-bubble);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 0.9rem;
  /* Scoped to the body: applied to the whole bubble it would also preserve the
     template indentation and pad every message with blank lines. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.msg-client .msg-body { border-bottom-left-radius: var(--r-sharp); }

.msg-bot .msg-body,
.msg-agent .msg-body {
  background: var(--mine);
  color: var(--mine-ink);
  border-bottom-right-radius: var(--r-sharp);
}

/* Amber means a person, on the queue counter and on a bubble alike. */
.msg-agent .msg-body {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  border-right: 3px solid var(--signal);
  border-top-right-radius: var(--r-sharp);
}

.msg-meta {
  display: flex;
  gap: 0.45rem;
  margin: 0.15rem 0.3rem 0.5rem;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.msg-meta .bad { color: var(--alert); }
.msg-meta .good { color: var(--mine-text); }
.redacted { font-style: italic; color: var(--ink-faint); }

/* ---------- answering ---------- */

.answer {
  border: 1px solid var(--line);
  border-radius: var(--r-soft);
  background: var(--surface);
  padding: 0.7rem 0.8rem;
}

.answer textarea {
  display: block;
  width: 100%;
  min-height: 76px;
  max-height: 220px;
  resize: vertical;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  padding: 0;
}

.answer textarea:focus { outline: none; }
.answer textarea::placeholder { color: var(--ink-faint); }

.answer-foot {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.6rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--line-soft);
}

/* Sans, not mono. These are sentences explaining a setting, and mono set them
   at a crawl and made ordinary help text look like console output. Mono stays
   where it earns its place: ids, keys, phone numbers. */
.hint {
  font-size: var(--t-micro);
  line-height: 1.5;
  color: var(--ink-faint);
  max-width: 58ch;
}

/* Two named exits. Replying used to leave the operator on the same screen with
   no idea whether anything else was waiting. */
.exits {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-soft);
}

.locked {
  padding: 0.9rem;
  border: 1px dashed var(--line);
  border-radius: var(--r-soft);
  color: var(--ink-dim);
  font-size: var(--t-small);
  text-align: center;
}

.notice {
  padding: 0.55rem 0.75rem;
  margin-bottom: 0.9rem;
  border-radius: var(--r-sharp);
  background: var(--signal-dim);
  border: 1px solid color-mix(in srgb, var(--signal) 32%, transparent);
  font-size: var(--t-small);
}

/* ---------- nothing waiting ---------- */

.clear { padding: 4rem 0; max-width: 44ch; }

.clear h1 {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 400;
  margin: 0 0 0.5rem;
}

.clear p { margin: 0 0 0.8rem; color: var(--ink-dim); }
.clear-links a { color: var(--mine-text); }
.clear-links a:hover { text-decoration: underline; }

/* ---------- list page ---------- */

.page-head {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.page-head h1 {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 400;
  margin: 0;
}

.chips { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1rem; }

.chips a {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--t-small);
  color: var(--ink-dim);
}

.chips a:hover { color: var(--ink); border-color: var(--ink-faint); }
.chips a.on { background: var(--ink); border-color: var(--ink); color: var(--bg); font-weight: 600; }

.rows { list-style: none; margin: 0; padding: 0; }

.row { border-bottom: 1px solid var(--line-soft); }
.row:last-child { border-bottom: 0; }

.row a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.5rem;
  border-left: 3px solid transparent;
}

.row a:hover { background: var(--surface); }
.row-human a { border-left-color: var(--signal); }
.row-bot a { border-left-color: color-mix(in srgb, var(--mine) 55%, transparent); }

.row-text { min-width: 0; flex: 1; }
.row-top { display: flex; align-items: baseline; gap: 0.5rem; }
.row-top b { font-size: 0.88rem; }

.row-top .when {
  margin-left: auto;
  font-size: var(--t-micro);
  color: var(--ink-faint);
  white-space: nowrap;
}

.row-sub {
  display: block;
  font-size: var(--t-small);
  color: var(--ink-faint);
  overflow-wrap: anywhere;
}

.row-empty { padding: 2.5rem 0.5rem; color: var(--ink-faint); }

.note {
  font-size: var(--t-small);
  color: var(--ink-dim);
  margin: 0 0 1rem;
  padding-left: 0.7rem;
  border-left: 2px solid var(--line);
  max-width: 58ch;
}

.searchbar { display: flex; gap: 0.5rem; margin-bottom: 1.2rem; }
.searchbar input { flex: 1; }

/* ---------- client details ---------- */

.details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.6rem;
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-soft);
}

.details h2 {
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--ink-faint);
  margin: 0 0 0.6rem;
}

.facts { list-style: none; margin: 0 0 1rem; padding: 0; }

.facts li {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--line-soft);
  overflow-wrap: anywhere;
}

.facts li:last-child { border-bottom: 0; }

.facts .k {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.facts .v { font-size: var(--t-small); }

.log { list-style: none; margin: 0; padding: 0; }

.log li {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-dim);
  font-size: var(--t-small);
}

.log li:last-child { border-bottom: 0; }
/* Sentences since `event_label` started translating them; mono spaced them
   out like machine tokens, which is exactly what they stopped being. */
.log .kind { font-size: var(--t-small); color: var(--ink); }
.log .when { margin-left: auto; font-size: var(--t-micro); color: var(--ink-faint); }

.add-fact .field { margin-bottom: 0.6rem; }

/* ---------- tags & buttons ---------- */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  color: var(--ink-dim);
  white-space: nowrap;
}

.tag-alert {
  color: var(--alert);
  border-color: color-mix(in srgb, var(--alert) 38%, transparent);
  background: var(--alert-dim);
}

.btn {
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 600;
  /* 24x24 is the WCAG 2.2 minimum target; 34 leaves room for a mis-aimed tap. */
  min-height: 34px;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--r-soft);
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.btn:hover { border-color: var(--ink-faint); }
.btn-primary { background: var(--mine); border-color: var(--mine); color: var(--mine-ink); }
.btn-primary:hover { filter: brightness(1.1); border-color: var(--mine); }
.btn-plain { background: transparent; border-color: transparent; color: var(--ink-faint); }
.btn-plain:hover { color: var(--ink); border-color: transparent; background: var(--surface-2); }

/* ---------- forms ---------- */

input[type="text"],
input[type="password"],
input[type="search"],
input[type="email"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
select {
  width: 100%;
  font: inherit;
  min-height: 34px;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-soft);
  background: var(--surface-2);
  color: var(--ink);
}

/* ---------- Chinatao CRM ---------- */

.month-form,
.inline-form {
  display: flex;
  gap: 0.55rem;
  align-items: center;
}

.month-form input { min-width: 9.5rem; }
.compact-head { margin-bottom: 0.5rem; }
.compact-head h2 { margin: 0; }

.kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 0 0 1.5rem;
}

.kpi {
  min-width: 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-soft);
  background: var(--surface);
}

.kpi span {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--ink-faint);
  font-size: var(--t-small);
}

.kpi strong {
  display: block;
  overflow-wrap: anywhere;
  font-family: var(--mono);
  font-size: 1.15rem;
}

.kpi-signal { border-color: color-mix(in srgb, var(--signal) 55%, var(--line)); }
.kpi-signal strong { color: var(--signal); }

.quick-create { position: relative; }
.quick-create summary { list-style: none; cursor: pointer; }
.quick-create summary::-webkit-details-marker { display: none; }
.popover-form {
  position: absolute;
  z-index: 20;
  right: 0;
  top: calc(100% + 0.45rem);
  width: min(360px, 90vw);
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-soft);
  background: var(--surface);
  box-shadow: 0 18px 55px #0008;
}

.crm-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 1.5rem;
  align-items: start;
}

.sticky-block { position: sticky; top: 72px; }
.lead-thread { max-height: 70vh; overflow-y: auto; padding-right: 0.25rem; }
.sale-block { border-left: 3px solid var(--mine); padding-left: 1rem; }
.bot-toggle { margin-bottom: 1rem; }

.finance-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  margin: 0.8rem 0 1rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--r-soft);
  background: var(--surface-2);
  font-size: var(--t-small);
}

.finance-summary b { font-family: var(--mono); margin-left: 0.25rem; }
.accounting-page { max-width: 92rem; }
.accounting-table-block { max-width: none; }
.accounting-grid { min-width: 1220px; }
.accounting-grid td, .accounting-grid th { white-space: nowrap; }

.tag-stage-callback { color: var(--signal); border-color: var(--signal); }
.tag-stage-won { color: var(--mine-text); border-color: var(--mine-text); }
.tag-stage-lost { color: var(--ink-faint); }

@media (max-width: 900px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm-columns { grid-template-columns: 1fr; }
  .sticky-block { position: static; }
  .bar { overflow-x: auto; }
  .bar nav { flex: 0 0 auto; }
}

@media (max-width: 520px) {
  .kpis { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .kpi { padding: 0.7rem; }
  .kpi strong { font-size: 1rem; }
  .page-head { align-items: flex-start; flex-wrap: wrap; }
  .month-form { width: 100%; }
  .month-form input { flex: 1; }
}

/* Left out of the rule above until there was a select on any screen, so the
   first one rendered as a tiny grey OS widget in the middle of a dark form. */
select:focus { outline: none; border-color: color-mix(in srgb, var(--mine-text) 60%, transparent); }

input::placeholder { color: var(--ink-faint); }
input:focus { outline: none; border-color: color-mix(in srgb, var(--mine-text) 60%, transparent); }

label {
  display: block;
  font-size: var(--t-small);
  color: var(--ink-dim);
  margin-bottom: 0.25rem;
}

.field { margin-bottom: 0.7rem; }

/* ---------- auth ---------- */

.gate { min-height: 100dvh; display: grid; place-items: center; padding: 1.25rem; }

.gate-card {
  width: 100%;
  max-width: 340px;
  border: 1px solid var(--line);
  border-radius: var(--r-soft);
  background: var(--surface);
  padding: 1.75rem;
}

.gate-mark {
  font-family: var(--mono);
  font-size: var(--t-small);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1.5rem;
}

.gate-card h1 {
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 400;
  margin: 0 0 1.1rem;
}

.gate-card .btn { width: 100%; justify-content: center; }

@media (max-width: 640px) {
  /* The bar stops wrapping onto two lines: the labels shorten instead, and
     the username drops -- there is exactly one account signed in on a phone
     and it is not worth a second row of chrome. */
  .bar { gap: 0.7rem; padding: 0 0.7rem; height: 48px; }
  /* Shortening labels held until there were five destinations. Now the nav
     scrolls inside the bar: every screen stays reachable, and the document
     itself stops sliding sideways. */
  .bar nav {
    gap: 0.75rem;
    min-width: 0;
    flex: 1 1 auto;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .bar nav::-webkit-scrollbar { display: none; }
  .bar nav a { white-space: nowrap; }
  .wide-only { display: none; }
  /* The sign-out control was the last thing on the row and overshot the
     viewport by 5px, scrolling the whole document sideways. */
  .bar .btn-plain { padding: 0.4rem 0.5rem; }
  .task, .page { padding: 1.2rem 0.9rem 3rem; }
  .why h1 { font-size: 1.5rem; }
  .msg { max-width: 92%; }
}

/* ---------- tables ----------
 *
 * The client table is the one screen that genuinely needs width, so it opts
 * out of the reading-width cap. It scrolls inside its own box: letting the
 * page scroll sideways instead drags the whole layout, top bar included.
 */

.page-wide { max-width: 76rem; }

/* One element allowed past the page's reading width. The negative margin has
   to be symmetric: widening a child of a centred column without it pushes the
   overflow entirely to the right and scrolls the document. */
.break-out {
  --breakout: min(76rem, calc(100vw - 2.5rem));
  width: var(--breakout);
  margin-inline: calc((100% - var(--breakout)) / 2);
}

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-soft);
  background: var(--surface);
}

/* min-width keeps every column at its natural width and lets the box scroll.
   Without it the table squeezed itself into a 375px phone and broke words
   mid-letter -- "Крис" came out as three stacked lines. */
.grid { width: 100%; min-width: max-content; border-collapse: collapse; }

.grid th {
  position: sticky;
  top: 0;
  text-align: left;
  padding: 0.6rem 0.7rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}

.grid td {
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  /* A long request wraps on word boundaries; the cap stops one talkative
     customer from setting the width of the entire table. */
  max-width: 28rem;
}

.grid tbody tr:last-child td { border-bottom: 0; }
.grid tbody tr:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }

.grid .mono { font-family: var(--mono); font-size: var(--t-small); }
.grid .when { font-size: var(--t-small); color: var(--ink-faint); white-space: nowrap; }

/* Marked on the cell only. Tinting the whole row looked decisive in a mockup
   and turned the table into a solid amber block in practice -- early on most
   clients are missing something, and a warning that fires on every row stops
   being a warning. */
.gap { color: var(--signal); font-size: var(--t-small); }
.ok { color: var(--mine-text); }

.empty-cell { padding: 2.5rem 0.5rem; text-align: center; color: var(--ink-faint); }

.filters {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.filters input[type="search"] { flex: 1; min-width: 12rem; }

/* ---------- settings ---------- */

.block {
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line-soft);
}

.block:last-child { border-bottom: 0; }

.block h2 {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 400;
  margin: 0 0 0.4rem;
}

.block h3 {
  font-size: var(--t-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-faint);
  margin: 1.6rem 0 0.3rem;
}

/* The one rule the owner does not get to change, said in words rather than
   shown as a switch nobody may touch. */
.locked-rule {
  padding: 0.7rem 0.85rem;
  margin: 0 0 1.2rem;
  border: 1px solid color-mix(in srgb, var(--mine) 40%, transparent);
  border-left: 3px solid var(--mine);
  border-radius: var(--r-sharp);
  background: color-mix(in srgb, var(--mine) 10%, transparent);
  font-size: var(--t-small);
}

.switches { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.switches li { padding: 0.4rem 0; border-bottom: 1px solid var(--line-soft); }
.switches li:last-child { border-bottom: 0; }

.switches-inline { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.switches-inline li { border-bottom: 0; }

.check {
  display: flex;
  align-items: flex-start;
  /* The whole label is clickable, so this -- not the 18px box -- is the target
     WCAG 2.2 measures. It came out at 22px, just under. */
  min-height: 24px;
  gap: 0.55rem;
  margin: 0;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--ink);
}

.check input[type="checkbox"] {
  /* 24x24 is the WCAG 2.2 minimum target and a browser default box is 13px. */
  width: 18px;
  height: 18px;
  margin: 0.15rem 0 0;
  flex: 0 0 auto;
  accent-color: var(--mine);
}

.check b { display: block; font-weight: 600; }
.check .hint { display: block; margin-top: 0.1rem; }

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 1rem;
}

textarea {
  width: 100%;
  font: inherit;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-soft);
  background: var(--surface-2);
  color: var(--ink);
  resize: vertical;
}

textarea:focus { outline: none; border-color: color-mix(in srgb, var(--mine-text) 60%, transparent); }
textarea::placeholder { color: var(--ink-faint); }

input[type="number"] {
  width: 100%;
  font: inherit;
  min-height: 34px;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-soft);
  background: var(--surface-2);
  color: var(--ink);
}

.bad { color: var(--alert); font-size: var(--t-small); }

/* ---------- orders ----------
 *
 * A returning customer is the case the schema was reshaped for, so the
 * conversation page says so plainly instead of leaving it to be inferred from
 * a client table on another screen.
 */
.orders { list-style: none; margin: 0 0 1.4rem; padding: 0; }

.orders li {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line-soft);
}

.orders li:last-child { border-bottom: 0; }
.orders b { display: block; font-weight: 600; }
.orders .when { display: block; margin-bottom: 0.15rem; }


/* ---------- tables on a phone ----------
 *
 * A horizontal scroller was hiding the columns that mattered. On the deal
 * board a 375px screen showed the client, the type and the stage, and kept
 * the deadline and the outstanding balance off to the right -- the two things
 * the board exists to surface -- with nothing to suggest they were there.
 * Cells clipped mid-word at the container edge, which reads as broken rather
 * than scrollable.
 *
 * So below 640px a row stops being a row and becomes a small stack of
 * label/value lines. Same markup: every cell carries its column name in
 * `data-label`, and the header is what gets dropped.
 */
@media (max-width: 640px) {
  .table-scroll {
    overflow-x: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  /* max-content is what made the table wider than the screen. */
  .grid { min-width: 0; }
  .grid thead { display: none; }

  .grid tbody,
  .grid tr,
  .grid td {
    display: block;
    width: auto;
    max-width: none;
  }

  .grid tr {
    padding: 0.75rem 0.85rem;
    margin-bottom: 0.6rem;
    border: 1px solid var(--line);
    border-radius: var(--r-soft);
    background: var(--surface);
  }

  .grid tbody tr:last-child { margin-bottom: 0; }
  .grid tbody tr:hover { background: var(--surface); }

  .grid td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.2rem 0;
    border: 0;
    text-align: right;
  }

  .grid td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    text-align: left;
    color: var(--ink-faint);
    font-size: var(--t-micro);
  }

  /* The actions cell has no column name and no value worth a label row. */
  .grid td:not([data-label]) {
    justify-content: flex-start;
    padding-top: 0.5rem;
  }

  .grid td:not([data-label]):empty { display: none; }

  /* The empty state spans the whole table and must not grow a label. */
  .grid td .empty-cell { text-align: left; }
}

.kb-doc {
  margin: 0.65rem 0;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--r-soft);
  background: var(--surface);
}
.kb-doc > summary { cursor: pointer; display: flex; align-items: center; gap: 0.55rem; }
.kb-doc > summary::marker { color: var(--ink-faint); }

/* ========================================================================== */
/* Chinatao CRM shell v2 — employee-first workspace                           */
/* ========================================================================== */

:root,
:root[data-theme="light"] {
  --crm-bg: #f5f7fa;
  --crm-sidebar: #ffffff;
  --crm-surface: #ffffff;
  --crm-surface-soft: #f8f9fb;
  --crm-border: #e5e8ed;
  --crm-border-strong: #d7dce3;
  --crm-text: #17191c;
  --crm-muted: #747b86;
  --crm-faint: #9aa1ab;
  --crm-accent: #e4572e;
  --crm-accent-soft: #fff1ec;
  --crm-success: #16885f;
  --crm-success-soft: #eaf8f2;
  --crm-warning: #bd7718;
  --crm-warning-soft: #fff7e7;
  --crm-danger: #c83f49;
  --crm-danger-soft: #fff0f1;
  --crm-shadow: 0 1px 2px rgba(22, 28, 36, .04), 0 8px 24px rgba(22, 28, 36, .035);
  --crm-sidebar-width: 244px;
  --bg: var(--crm-bg);
  --surface: var(--crm-surface);
  --surface-2: var(--crm-surface-soft);
  --line: var(--crm-border);
  --line-soft: #edf0f3;
  --ink: var(--crm-text);
  --ink-dim: #5f6670;
  --ink-faint: var(--crm-muted);
  --mine: #20242a;
  --mine-ink: #ffffff;
  --mine-text: var(--crm-success);
  --signal: var(--crm-warning);
  --signal-dim: var(--crm-warning-soft);
  --signal-ink: #ffffff;
  --alert: var(--crm-danger);
  --alert-dim: var(--crm-danger-soft);
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --display: var(--sans);
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

.crm-body {
  min-width: 320px;
  background: var(--crm-bg);
  color: var(--crm-text);
  font-family: var(--sans);
}

.crm-shell { min-height: 100dvh; }
.crm-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 80;
  width: var(--crm-sidebar-width);
  display: flex;
  flex-direction: column;
  padding: 18px 14px 14px;
  border-right: 1px solid var(--crm-border);
  background: var(--crm-sidebar);
}
.crm-brand { padding: 2px 8px 20px; }
.crm-brand-link { display: flex; align-items: center; gap: 10px; }
.crm-brand-mark {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  background: var(--crm-accent);
  color: #fff;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.03em;
}
.crm-brand-text { display: flex; align-items: baseline; gap: 7px; }
.crm-brand-text b { font-size: 14px; letter-spacing: .085em; }
.crm-brand-text small { color: var(--crm-muted); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.crm-nav { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.crm-nav-group { display: grid; gap: 3px; margin-bottom: 22px; }
.crm-nav-bottom { margin-top: auto; margin-bottom: 8px; }
.crm-nav-label {
  padding: 0 10px 7px;
  color: var(--crm-faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.crm-nav-item {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  color: #606771;
  font-size: 13.5px;
  font-weight: 600;
  transition: background .12s ease, color .12s ease;
}
.crm-nav-item:hover { background: #f5f6f8; color: var(--crm-text); }
.crm-nav-item.active { background: var(--crm-accent-soft); color: #b53e1f; }
.crm-nav-icon {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  color: inherit;
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
}
.crm-nav-badge {
  min-width: 21px;
  height: 21px;
  margin-left: auto;
  display: inline-grid;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--crm-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}
.crm-user-card {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 8px 2px;
  border-top: 1px solid var(--crm-border);
}
.crm-user-avatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #20242a;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
.crm-user-copy { min-width: 0; flex: 1; line-height: 1.25; }
.crm-user-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.crm-user-copy span { display: block; margin-top: 2px; color: var(--crm-muted); font-size: 10px; }
.crm-user-card form { margin: 0; }
.crm-logout {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--crm-muted);
  cursor: pointer;
  font-size: 15px;
}
.crm-logout:hover { background: #f2f3f5; color: var(--crm-text); }

.crm-workspace { min-height: 100dvh; margin-left: var(--crm-sidebar-width); }
.crm-topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  height: 66px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 28px;
  border-bottom: 1px solid var(--crm-border);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px);
}
.crm-mobile-brand { display: none; }
.crm-global-search {
  width: min(520px, 52vw);
  height: 38px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--crm-border);
  border-radius: 9px;
  background: var(--crm-surface-soft);
}
.crm-global-search:focus-within { border-color: #c8cdd4; background: #fff; box-shadow: 0 0 0 3px rgba(20,25,31,.035); }
.crm-search-icon { color: var(--crm-faint); font-size: 17px; }
.crm-global-search input[type="search"] {
  min-height: 0;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--crm-text);
  font-size: 12.5px;
}
.crm-global-search input[type="search"]:focus { border: 0; }
.crm-global-search kbd {
  padding: 2px 6px;
  border: 1px solid var(--crm-border);
  border-radius: 5px;
  background: #fff;
  color: var(--crm-faint);
  font: 10px var(--sans);
}
.crm-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.crm-alert-link {
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--crm-danger-soft);
  color: var(--crm-danger);
  font-size: 11px;
}
.crm-alert-link span { font-weight: 900; }
.crm-date { color: var(--crm-muted); font-size: 11px; }
.crm-content { padding: 0 28px 44px; }
.crm-flashes { padding: 14px 28px 0; }
.crm-flashes .flash { max-width: 1100px; margin: 0 auto; }

/* Old templates render their own <main class="page">. Inside the new shell
   they should use the full workspace instead of centring in a narrow column. */
.crm-content > .page,
.crm-content > .task {
  max-width: 1380px;
  margin: 0 auto;
  padding: 28px 0 42px;
}
.crm-content > .page.page-wide { max-width: 1380px; }
.crm-content > .page.accounting-page { max-width: 1500px; }

.crm-dashboard { max-width: 1380px; margin: 0 auto; padding: 30px 0 48px; }
.crm-dashboard-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
.crm-eyebrow { display: block; margin-bottom: 4px; color: var(--crm-accent); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.crm-dashboard-head h1 { margin: 0; font-size: 27px; line-height: 1.15; letter-spacing: -.035em; font-weight: 730; }
.crm-dashboard-head p { margin: 7px 0 0; color: var(--crm-muted); font-size: 12.5px; }
.crm-dashboard-actions { display: flex; align-items: center; gap: 8px; }
.crm-period-form { display: flex; align-items: center; gap: 7px; }
.crm-period-form input[type="month"] { width: 150px; height: 36px; min-height: 36px; background: #fff; font-size: 12px; }
.crm-dashboard .btn { min-height: 36px; padding: 0 12px; border-radius: 8px; background: #fff; font-size: 12px; }
.crm-dashboard .btn-primary { background: var(--crm-text); border-color: var(--crm-text); color: #fff; }
.crm-dashboard .btn-primary:hover { filter: none; background: #000; }

.crm-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-bottom: 14px; }
.crm-metric-card {
  min-width: 0;
  padding: 17px 18px;
  border: 1px solid var(--crm-border);
  border-radius: 12px;
  background: var(--crm-surface);
  box-shadow: var(--crm-shadow);
}
.crm-metric-card.attention { border-color: #efd5ae; background: #fffdfa; }
.crm-metric-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--crm-muted); font-size: 11.5px; font-weight: 600; }
.crm-dot { width: 7px; height: 7px; border-radius: 50%; background: #adb4bd; }
.crm-dot.good { background: var(--crm-success); }
.crm-dot.warn { background: var(--crm-warning); }
.crm-metric-card strong { display: block; margin: 12px 0 4px; font-size: 25px; line-height: 1; letter-spacing: -.04em; font-weight: 760; }
.crm-metric-card small { color: var(--crm-faint); font-size: 10.5px; }

.crm-money-strip {
  margin-bottom: 14px;
  padding: 17px 18px;
  border: 1px solid var(--crm-border);
  border-radius: 12px;
  background: #20242a;
  color: #fff;
  box-shadow: var(--crm-shadow);
}
.crm-money-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; color: #c9cdd2; font-size: 11px; font-weight: 650; }
.crm-money-title a { color: #fff; font-size: 10.5px; }
.crm-money-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
.crm-money-grid > div { padding: 0 18px; border-left: 1px solid rgba(255,255,255,.11); }
.crm-money-grid > div:first-child { padding-left: 0; border-left: 0; }
.crm-money-grid span { display: block; margin-bottom: 5px; color: #999fa8; font-size: 10px; }
.crm-money-grid b { display: block; overflow-wrap: anywhere; font-size: 16px; letter-spacing: -.025em; }
.crm-money-grid .crm-money-net b { color: #7ee2bd; }

.crm-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, .75fr); gap: 14px; align-items: start; }
.crm-dashboard-side { display: grid; gap: 14px; }
.crm-panel {
  min-width: 0;
  border: 1px solid var(--crm-border);
  border-radius: 12px;
  background: var(--crm-surface);
  box-shadow: var(--crm-shadow);
  overflow: hidden;
}
.crm-panel-head { min-height: 65px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 17px; border-bottom: 1px solid #edf0f3; }
.crm-panel-head h2 { margin: 0; font-size: 12.5px; font-weight: 750; letter-spacing: -.01em; }
.crm-panel-head p { margin: 3px 0 0; color: var(--crm-faint); font-size: 10.5px; }
.crm-panel-head > a { color: var(--crm-muted); font-size: 10.5px; font-weight: 650; }
.crm-panel-head > a:hover { color: var(--crm-text); }
.crm-table-wrap { overflow-x: auto; }
.crm-table { width: 100%; border-collapse: collapse; }
.crm-table th { padding: 9px 13px; text-align: left; border-bottom: 1px solid #edf0f3; background: #fafbfc; color: var(--crm-faint); font-size: 9.5px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.crm-table td { padding: 10px 13px; border-bottom: 1px solid #f0f2f4; color: #50565e; font-size: 11px; vertical-align: middle; }
.crm-table tr:last-child td { border-bottom: 0; }
.crm-table tbody tr:hover { background: #fcfcfd; }
.crm-client-cell { min-width: 170px; display: flex; align-items: center; gap: 9px; }
.crm-client-avatar { width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #f0f2f5; color: #555c65; font-size: 11px; font-weight: 750; }
.crm-client-cell b { display: block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--crm-text); font-size: 11px; }
.crm-client-cell small { display: block; margin-top: 2px; color: var(--crm-faint); font-size: 9.5px; }
.crm-muted { color: var(--crm-faint); }
.crm-status { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 7px; border-radius: 999px; background: #f0f2f4; color: #646b75; font-size: 9.5px; font-weight: 700; white-space: nowrap; }
.crm-status-won { background: var(--crm-success-soft); color: var(--crm-success); }
.crm-status-callback { background: var(--crm-warning-soft); color: var(--crm-warning); }
.crm-status-lost { background: var(--crm-danger-soft); color: var(--crm-danger); }
.crm-status-working, .crm-status-qualified { background: #eef3ff; color: #506caa; }
.crm-row-link { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; color: var(--crm-muted); }
.crm-row-link:hover { background: #f0f2f4; color: var(--crm-text); }
.crm-task-list { padding: 5px 0; }
.crm-task { display: grid; grid-template-columns: 62px minmax(0,1fr) 20px; gap: 9px; align-items: center; padding: 10px 15px; border-bottom: 1px solid #f0f2f4; }
.crm-task:last-child { border-bottom: 0; }
.crm-task:hover { background: #fafbfc; }
.crm-task-time { color: var(--crm-warning); font-size: 9.5px; font-weight: 750; }
.crm-task-copy { min-width: 0; }
.crm-task-copy b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--crm-text); font-size: 10.8px; }
.crm-task-copy small { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--crm-faint); font-size: 9.3px; }
.crm-task-arrow { color: var(--crm-faint); }
.crm-quick-panel { padding-bottom: 6px; }
.crm-quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 10px; }
.crm-quick-grid a { min-height: 76px; display: flex; flex-direction: column; justify-content: space-between; padding: 11px; border: 1px solid var(--crm-border); border-radius: 9px; background: #fbfcfd; }
.crm-quick-grid a:hover { border-color: #cdd2d9; background: #fff; }
.crm-quick-grid span { color: var(--crm-accent); font-size: 17px; line-height: 1; }
.crm-quick-grid b { color: #4e555e; font-size: 10px; font-weight: 700; }
.crm-empty { padding: 38px 18px; text-align: center; color: var(--crm-faint); font-size: 11px; }
.crm-empty-small { padding: 26px 15px; }

/* Restyle legacy page headings/tables/buttons so all existing screens belong
   to the same product while we migrate them one by one. */
.crm-content .page-head { align-items: center; margin-bottom: 18px; }
.crm-content .page-head h1 { font-family: var(--sans); font-size: 24px; font-weight: 740; letter-spacing: -.03em; }
.crm-content .block { margin-bottom: 18px; padding: 18px; border: 1px solid var(--crm-border); border-radius: 12px; background: #fff; box-shadow: var(--crm-shadow); }
.crm-content .block h2 { font-family: var(--sans); font-size: 14px; font-weight: 740; }
.crm-content .table-scroll { border-color: var(--crm-border); border-radius: 10px; box-shadow: none; }
.crm-content .grid th { background: #fafbfc; color: var(--crm-faint); font-family: var(--sans); font-size: 9.5px; letter-spacing: .05em; }
.crm-content .grid td { font-size: 11.5px; }
.crm-content .filters,
.crm-content .searchbar { padding: 10px; border: 1px solid var(--crm-border); border-radius: 10px; background: #fff; }
.crm-content input[type="text"],
.crm-content input[type="search"],
.crm-content input[type="email"],
.crm-content input[type="date"],
.crm-content input[type="datetime-local"],
.crm-content input[type="month"],
.crm-content select { background: #fff; border-color: var(--crm-border-strong); }
.crm-content .btn { border-radius: 8px; background: #fff; }
.crm-content .btn-primary { background: var(--crm-text); border-color: var(--crm-text); color: #fff; }

@media (max-width: 1100px) {
  :root { --crm-sidebar-width: 214px; }
  .crm-dashboard-grid { grid-template-columns: 1fr; }
  .crm-dashboard-side { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  .crm-sidebar {
    position: sticky;
    top: 0;
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    padding: 8px 10px;
    border-right: 0;
    border-bottom: 1px solid var(--crm-border);
    overflow-x: auto;
  }
  .crm-brand, .crm-user-card, .crm-nav-label { display: none; }
  .crm-nav { flex-direction: row; gap: 4px; }
  .crm-nav-group { display: flex; margin: 0; gap: 3px; }
  .crm-nav-bottom { margin: 0; }
  .crm-nav-item { min-height: 36px; padding: 7px 9px; white-space: nowrap; }
  .crm-nav-icon { display: none; }
  .crm-workspace { margin-left: 0; }
  .crm-topbar { top: 53px; height: 58px; padding: 0 16px; }
  .crm-mobile-brand { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .06em; }
  .crm-mobile-brand .crm-brand-mark { width: 27px; height: 27px; border-radius: 8px; font-size: 13px; }
  .crm-global-search { flex: 1; width: auto; }
  .crm-global-search kbd, .crm-date { display: none; }
  .crm-content { padding: 0 16px 32px; }
  .crm-flashes { padding: 12px 16px 0; }
  .crm-dashboard { padding-top: 22px; }
  .crm-metric-grid { grid-template-columns: 1fr 1fr; }
  .crm-money-grid { grid-template-columns: 1fr 1fr; gap: 14px 0; }
  .crm-money-grid > div:nth-child(3) { padding-left: 0; border-left: 0; }
}

@media (max-width: 600px) {
  .crm-sidebar { z-index: 90; }
  .crm-nav-item { font-size: 11px; min-height: 34px; padding: 6px 8px; }
  .crm-topbar { top: 51px; padding: 0 12px; }
  .crm-mobile-brand b { display: none; }
  .crm-global-search input[type="search"] { font-size: 11px; }
  .crm-content { padding-inline: 12px; }
  .crm-dashboard-head { align-items: flex-start; flex-direction: column; }
  .crm-dashboard-actions { width: 100%; }
  .crm-period-form { flex: 1; }
  .crm-period-form input[type="month"] { flex: 1; width: auto; }
  .crm-metric-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .crm-metric-card { padding: 14px; }
  .crm-metric-card strong { font-size: 21px; }
  .crm-money-strip { padding: 15px; }
  .crm-money-grid > div { padding-left: 12px; }
  .crm-dashboard-side { grid-template-columns: 1fr; }
  .crm-table { min-width: 650px; }
}

/* ---------- Clients workspace v3 ---------- */
.crm-clients-page,
.crm-client-detail-page {
  max-width: 1480px;
  margin: 0 auto;
  padding: 30px 0 48px;
}

.crm-page-titlebar,
.crm-client-detail-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}
.crm-page-titlebar h1,
.crm-client-detail-head h1 {
  margin: 0;
  color: var(--crm-text);
  font-size: 27px;
  line-height: 1.1;
  letter-spacing: -.035em;
  font-weight: 760;
}
.crm-page-titlebar p,
.crm-client-detail-head p { margin: 7px 0 0; color: var(--crm-muted); font-size: 12px; }
.crm-page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crm-page-actions form { margin: 0; }
.crm-clients-page .btn,
.crm-client-detail-page .btn { min-height: 36px; padding: 0 12px; border-radius: 8px; background: #fff; font-size: 11px; }
.crm-clients-page .btn-primary,
.crm-client-detail-page .btn-primary { background: var(--crm-text); border-color: var(--crm-text); color: #fff; }

.crm-create-menu { position: relative; }
.crm-create-menu > summary { list-style: none; cursor: pointer; }
.crm-create-menu > summary::-webkit-details-marker { display: none; }
.crm-create-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 80;
  width: 360px;
  max-width: calc(100vw - 28px);
  padding: 16px;
  border: 1px solid var(--crm-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(24, 28, 34, .14);
}
.crm-create-popover-head { margin-bottom: 14px; }
.crm-create-popover-head b { display: block; font-size: 13px; }
.crm-create-popover-head span { display: block; margin-top: 3px; color: var(--crm-muted); font-size: 10px; }
.crm-create-popover form { display: grid; gap: 10px; }
.crm-full-btn { width: 100%; justify-content: center; }
.crm-form-field { min-width: 0; }
.crm-form-field label { display: block; margin-bottom: 5px; color: #59616b; font-size: 9.5px; font-weight: 750; }
.crm-form-field input,
.crm-form-field textarea,
.crm-form-field select {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--crm-border-strong);
  border-radius: 8px;
  background: #fff;
  color: var(--crm-text);
  font: 11px var(--sans);
}
.crm-form-field textarea { resize: vertical; min-height: 76px; }
.crm-field-error { display: block; margin-top: 4px; color: var(--crm-danger); font-size: 9px; }

.crm-client-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.crm-client-metrics article {
  padding: 15px 16px;
  border: 1px solid var(--crm-border);
  border-radius: 11px;
  background: #fff;
  box-shadow: var(--crm-shadow);
}
.crm-client-metrics article.attention { border-color: #efd5ae; background: #fffdfa; }
.crm-client-metrics span { display: block; color: var(--crm-muted); font-size: 10px; font-weight: 650; }
.crm-client-metrics b { display: block; margin: 7px 0 3px; color: var(--crm-text); font-size: 19px; letter-spacing: -.025em; }
.crm-client-metrics small { color: var(--crm-faint); font-size: 9px; }

.crm-clients-panel {
  border: 1px solid var(--crm-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--crm-shadow);
  overflow: hidden;
}
.crm-service-tabs {
  min-height: 54px;
  display: flex;
  align-items: stretch;
  gap: 3px;
  padding: 8px 10px 0;
  border-bottom: 1px solid #edf0f3;
  overflow-x: auto;
}
.crm-service-tabs a {
  min-width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border-bottom: 2px solid transparent;
  color: var(--crm-muted);
  font-size: 10.5px;
  font-weight: 650;
}
.crm-service-tabs a:hover { color: var(--crm-text); }
.crm-service-tabs a.active { border-bottom-color: var(--crm-accent); color: var(--crm-text); }
.crm-service-tabs a b { min-width: 20px; padding: 2px 5px; border-radius: 999px; background: #f1f3f5; color: #737b85; text-align: center; font-size: 8.5px; }
.crm-service-tabs .crm-archive-tab { margin-left: auto; }

.crm-client-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  border-bottom: 1px solid #edf0f3;
  background: #fbfcfd;
}
.crm-client-search {
  min-width: 240px;
  max-width: 420px;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 9px;
  border: 1px solid var(--crm-border-strong);
  border-radius: 8px;
  background: #fff;
}
.crm-client-search span { color: var(--crm-faint); font-size: 16px; }
.crm-client-search input[type="search"] { min-height: 0; height: 32px; padding: 0; border: 0; box-shadow: none; background: transparent; font-size: 11px; }
.crm-client-toolbar select { width: auto; min-width: 150px; height: 36px; min-height: 36px; padding: 0 28px 0 9px; font-size: 10px; }
.crm-clear-filter { color: var(--crm-danger); font-size: 9.5px; font-weight: 650; }

.crm-client-table-wrap { overflow-x: auto; }
.crm-client-table { width: 100%; min-width: 1040px; border-collapse: collapse; }
.crm-client-table th {
  padding: 9px 12px;
  border-bottom: 1px solid #edf0f3;
  background: #fff;
  color: var(--crm-faint);
  text-align: left;
  font-size: 8.8px;
  font-weight: 780;
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
}
.crm-client-table td { padding: 10px 12px; border-bottom: 1px solid #f0f2f4; color: #515862; font-size: 10.5px; vertical-align: middle; }
.crm-client-table tbody tr:hover { background: #fbfcfd; }
.crm-client-table tbody tr:last-child td { border-bottom: 0; }
.crm-client-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm-client-person { min-width: 190px; display: flex; align-items: center; gap: 9px; }
.crm-client-avatar-lg,
.crm-client-avatar-xl { display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #eff1f4; color: #505862; font-weight: 780; }
.crm-client-avatar-lg { width: 34px; height: 34px; font-size: 11px; }
.crm-client-avatar-xl { width: 48px; height: 48px; background: #20242a; color: #fff; font-size: 16px; }
.crm-client-person b { display: block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--crm-text); font-size: 10.8px; }
.crm-client-person small { display: block; margin-top: 2px; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--crm-faint); font-size: 8.9px; }
.crm-service-pill { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 7px; border: 1px solid #e2e5e9; border-radius: 6px; background: #f8f9fa; color: #626a75; font-size: 9px; font-weight: 700; white-space: nowrap; }
.crm-service-business_visa { background: #f3f0ff; border-color: #e4dcff; color: #6852a5; }
.crm-service-group_visa { background: #eef7ff; border-color: #daeafa; color: #47749b; }
.crm-service-tour_visa { background: #eef8f4; border-color: #d8eee6; color: #377761; }
.crm-service-tour { background: #fff6e9; border-color: #f3e4c8; color: #8b682e; }
.crm-service-cargo { background: #f5f1ec; border-color: #e9dfd2; color: #765f45; }
.crm-manager-cell { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.crm-manager-cell i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #f0f2f4; color: #606873; font-size: 8px; font-style: normal; font-weight: 750; }
.crm-unassigned { color: var(--crm-warning); font-size: 9px; font-weight: 700; }
.crm-debt { color: var(--crm-danger); font-size: 10px; }
.crm-paid { color: var(--crm-success); font-weight: 700; }
.crm-activity-date { display: block; color: #5c6470; font-size: 9.5px; }
.crm-activity-time { display: block; color: var(--crm-faint); font-size: 8.5px; }
.crm-row-open { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 7px; color: var(--crm-muted); }
.crm-row-open:hover { background: #eef0f2; color: var(--crm-text); }
.crm-clients-empty { padding: 44px 20px; text-align: center; }
.crm-clients-empty b { display: block; margin-bottom: 4px; color: var(--crm-text); font-size: 12px; }
.crm-clients-empty span { color: var(--crm-faint); font-size: 10px; }
.crm-table-footer { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px; border-top: 1px solid #edf0f3; color: var(--crm-faint); font-size: 9px; }

/* Client card */
.crm-client-detail-head { align-items: center; }
.crm-client-detail-identity { display: grid; gap: 10px; }
.crm-back-link { width: max-content; color: var(--crm-muted); font-size: 9.5px; font-weight: 650; }
.crm-client-detail-title { display: flex; align-items: center; gap: 12px; }
.crm-title-line { display: flex; align-items: center; gap: 8px; }
.crm-title-line h1 { font-size: 24px; }
.crm-archived-label { padding: 3px 7px; border-radius: 999px; background: #f0f2f4; color: #6d747d; font-size: 8px; font-weight: 750; }
.crm-client-summary-strip {
  display: grid;
  grid-template-columns: 1.2fr repeat(4, 1fr);
  margin-bottom: 14px;
  border: 1px solid var(--crm-border);
  border-radius: 11px;
  background: #20242a;
  color: #fff;
  overflow: hidden;
}
.crm-client-summary-strip > div { padding: 14px 16px; border-left: 1px solid rgba(255,255,255,.1); }
.crm-client-summary-strip > div:first-child { border-left: 0; }
.crm-client-summary-strip span { display: block; margin-bottom: 4px; color: #9ba1a8; font-size: 8.8px; }
.crm-client-summary-strip b { display: block; font-size: 13px; font-weight: 730; }
.crm-client-summary-strip .has-debt b { color: #ffb2b8; }
.crm-client-detail-grid { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(310px,.7fr); gap: 14px; align-items: start; }
.crm-client-detail-main,
.crm-client-detail-side { display: grid; gap: 14px; }
.crm-card { min-width: 0; border: 1px solid var(--crm-border); border-radius: 12px; background: #fff; box-shadow: var(--crm-shadow); overflow: hidden; }
.crm-card-head { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 15px; border-bottom: 1px solid #edf0f3; }
.crm-card-head h2 { margin: 0; color: var(--crm-text); font-size: 12px; font-weight: 760; }
.crm-card-head p { margin: 3px 0 0; color: var(--crm-faint); font-size: 9px; }
.crm-card-head > a { color: var(--crm-muted); font-size: 9px; font-weight: 650; }
.crm-client-edit-form { padding: 15px; }
.crm-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.crm-form-grid .wide { grid-column: 1 / -1; }
.crm-form-actions { display: flex; justify-content: flex-end; margin-top: 14px; padding-top: 13px; border-top: 1px solid #edf0f3; }

.crm-client-timeline { padding: 4px 0; }
.crm-history-row { display: grid; grid-template-columns: 30px minmax(0,1fr) auto 70px 18px; align-items: center; gap: 9px; padding: 10px 14px; border-bottom: 1px solid #f0f2f4; }
.crm-history-row:last-child { border-bottom: 0; }
.crm-history-row:hover { background: #fbfcfd; }
.crm-history-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: #eef3ff; color: #5770aa; font-size: 9px; font-weight: 800; }
.crm-history-row.deal .crm-history-icon { background: #eef8f4; color: #397862; }
.crm-history-copy { min-width: 0; }
.crm-history-copy b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--crm-text); font-size: 10px; }
.crm-history-copy small { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--crm-faint); font-size: 8.8px; }
.crm-history-date { color: var(--crm-faint); font-size: 8.8px; text-align: right; }

.crm-finance-client-list { padding: 5px 14px; }
.crm-finance-client-list > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f0f2f4; }
.crm-finance-client-list > div:last-child { border-bottom: 0; }
.crm-finance-client-list span { color: var(--crm-muted); font-size: 9.5px; }
.crm-finance-client-list b { color: var(--crm-text); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.crm-finance-client-list .debt b { color: var(--crm-danger); }
.crm-finance-client-list .net b { color: var(--crm-success); }
.crm-card-link { display: block; padding: 11px 14px; border-top: 1px solid #edf0f3; color: var(--crm-accent); font-size: 9.5px; font-weight: 700; }
.crm-client-chat-list a { display: grid; grid-template-columns: 10px minmax(0,1fr) 16px; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #f0f2f4; }
.crm-client-chat-list a:last-child { border-bottom: 0; }
.crm-client-chat-list a:hover { background: #fbfcfd; }
.crm-chat-state { width: 7px; height: 7px; border-radius: 50%; background: #c8ccd1; }
.crm-chat-state.open { background: var(--crm-success); }
.crm-client-chat-list b { display: block; color: var(--crm-text); font-size: 9.8px; }
.crm-client-chat-list small { display: block; margin-top: 2px; color: var(--crm-faint); font-size: 8.5px; }
.crm-system-client-card dl { margin: 0; padding: 6px 14px; }
.crm-system-client-card dl div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid #f0f2f4; }
.crm-system-client-card dt { color: var(--crm-muted); font-size: 9px; }
.crm-system-client-card dd { margin: 0; max-width: 190px; overflow: hidden; text-overflow: ellipsis; color: var(--crm-text); font-size: 9px; text-align: right; }
.crm-danger-zone { margin: 8px 12px 12px; padding: 10px; border: 1px solid #f1d8dc; border-radius: 9px; background: #fffafb; }
.crm-danger-zone summary { cursor: pointer; color: var(--crm-danger); font-size: 9.5px; font-weight: 750; }
.crm-danger-zone p { margin: 8px 0; color: #87646a; font-size: 8.8px; }
.crm-danger-btn { border-color: #e4bfc5 !important; color: var(--crm-danger) !important; }

/* Deal-ready is a completed client state; keep it visually calm/positive. */
.crm-status-deal-ready { background: var(--crm-success-soft); color: var(--crm-success); }
.crm-status-deal-new,
.crm-status-deal-docs_collected,
.crm-status-deal-submitted { background: #eef3ff; color: #506caa; }

@media (max-width: 1150px) {
  .crm-client-detail-grid { grid-template-columns: 1fr; }
  .crm-client-detail-side { grid-template-columns: 1fr 1fr; }
  .crm-client-detail-side .crm-system-client-card { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .crm-client-metrics { grid-template-columns: 1fr 1fr; }
  .crm-client-toolbar { flex-wrap: wrap; }
  .crm-client-search { max-width: none; flex-basis: 100%; }
  .crm-client-toolbar select { flex: 1; }
  .crm-client-summary-strip { grid-template-columns: 1fr 1fr; }
  .crm-client-summary-strip > div { border-top: 1px solid rgba(255,255,255,.1); }
  .crm-client-summary-strip > div:nth-child(odd) { border-left: 0; }
}
@media (max-width: 650px) {
  .crm-page-titlebar,
  .crm-client-detail-head { align-items: flex-start; flex-direction: column; }
  .crm-page-actions { width: 100%; }
  .crm-client-metrics { gap: 8px; }
  .crm-client-metrics article { padding: 12px; }
  .crm-service-tabs .crm-archive-tab { margin-left: 0; }
  .crm-client-toolbar select { width: 100%; min-width: calc(50% - 4px); }
  .crm-form-grid { grid-template-columns: 1fr; }
  .crm-client-detail-side { grid-template-columns: 1fr; }
  .crm-client-detail-side .crm-system-client-card { grid-column: auto; }
  .crm-history-row { grid-template-columns: 30px minmax(0,1fr) 18px; }
  .crm-history-row .crm-status,
  .crm-history-date { display: none; }
  .crm-client-summary-strip { grid-template-columns: 1fr 1fr; }
  .crm-client-summary-strip > div:first-child { grid-column: 1 / -1; }
}

/* ---------- Chats workspace v4 ---------- */
.crm-chats-page {
  max-width: 1540px;
  margin: 0 auto;
  padding: 24px 0 38px;
}
.crm-chat-page-head {
  min-height: 58px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}
.crm-chat-page-head h1 { margin: 0; font-size: 25px; line-height: 1.1; letter-spacing: -.035em; }
.crm-chat-page-head p { margin: 6px 0 0; color: var(--crm-muted); font-size: 11.5px; }
.crm-chat-head-stats { display: flex; align-items: center; gap: 8px; }
.crm-chat-head-stats > span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid var(--crm-border);
  border-radius: 8px;
  background: #fff;
  color: var(--crm-muted);
  font-size: 10px;
}
.crm-chat-head-stats b { color: var(--crm-text); font-size: 11px; }
.crm-chat-head-stats .attention { border-color: #f0d7b5; background: #fffbf5; color: var(--crm-warning); }
.crm-chat-head-stats .attention b { color: var(--crm-warning); }

.crm-chat-tabs {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.crm-chat-tabs a {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--crm-muted);
  font-size: 10.5px;
  font-weight: 680;
  white-space: nowrap;
}
.crm-chat-tabs a span {
  min-width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  background: #eef0f3;
  color: #68707b;
  font-size: 8px;
}
.crm-chat-tabs a:hover { border-color: var(--crm-border); background: #fff; color: var(--crm-text); }
.crm-chat-tabs a.active { border-color: #f0d3c8; background: var(--crm-accent-soft); color: #b64222; }
.crm-chat-tabs a.active span { background: #f8d8cd; color: #a73a1d; }

.crm-chat-workspace {
  height: calc(100dvh - 66px - 24px - 58px - 16px - 42px - 38px);
  min-height: 620px;
  display: grid;
  grid-template-columns: 292px minmax(420px, 1fr) 286px;
  border: 1px solid var(--crm-border);
  border-radius: 13px;
  background: #fff;
  box-shadow: var(--crm-shadow);
  overflow: hidden;
}
.crm-chat-inbox,
.crm-chat-thread,
.crm-chat-client { min-width: 0; min-height: 0; }
.crm-chat-inbox { display: flex; flex-direction: column; border-right: 1px solid var(--crm-border); background: #fbfcfd; }
.crm-chat-search {
  height: 55px;
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 10px;
  border-bottom: 1px solid #edf0f3;
  background: #fff;
}
.crm-chat-search > span { margin-left: 4px; color: var(--crm-faint); font-size: 16px; }
.crm-chat-search input[type="search"] {
  width: 100%;
  min-height: 33px;
  height: 33px;
  padding: 0 8px;
  border: 0;
  box-shadow: none;
  background: transparent;
  color: var(--crm-text);
  font-size: 10.5px;
}
.crm-chat-list { flex: 1; min-height: 0; overflow-y: auto; }
.crm-chat-list-item {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr);
  gap: 9px;
  padding: 11px 10px;
  border-bottom: 1px solid #eef1f3;
  background: #fff;
}
.crm-chat-list-item:hover { background: #f8f9fb; }
.crm-chat-list-item.active { position: relative; background: #fff5f1; }
.crm-chat-list-item.active::before {
  content: "";
  position: absolute;
  inset: 7px auto 7px 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--crm-accent);
}
.crm-chat-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #eceff2;
  color: #59616c;
  font-size: 11px;
  font-weight: 800;
}
.crm-chat-avatar.large { width: 37px; height: 37px; background: #20242a; color: #fff; }
.crm-chat-avatar.xl { width: 46px; height: 46px; background: #20242a; color: #fff; font-size: 14px; }
.crm-chat-list-copy { min-width: 0; }
.crm-chat-list-top { display: flex; align-items: center; gap: 7px; }
.crm-chat-list-top b { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--crm-text); font-size: 10.6px; }
.crm-chat-list-top time { flex: 0 0 auto; color: var(--crm-faint); font-size: 8.4px; }
.crm-chat-preview { margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #747b85; font-size: 9px; }
.crm-chat-list-meta { min-width: 0; display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--crm-faint); font-size: 8px; }
.crm-chat-list-meta > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-chat-mode,
.crm-chat-state-pill {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 7.8px;
  font-weight: 750;
  white-space: nowrap;
}
.crm-chat-mode.need,
.crm-chat-state-pill.need { background: var(--crm-warning-soft); color: var(--crm-warning); }
.crm-chat-mode.bot,
.crm-chat-state-pill.bot { background: #eef3ff; color: #4f6da7; }
.crm-chat-mode.human,
.crm-chat-state-pill.human { background: var(--crm-success-soft); color: var(--crm-success); }
.crm-chat-mode.paused,
.crm-chat-state-pill.paused { background: #f0f1f3; color: #6e747d; }
.crm-chat-list-empty { padding: 35px 16px; text-align: center; }
.crm-chat-list-empty b { display: block; margin-bottom: 4px; color: var(--crm-text); font-size: 10.5px; }
.crm-chat-list-empty span { color: var(--crm-faint); font-size: 9px; }

.crm-chat-thread { display: flex; flex-direction: column; background: #f6f7f9; }
.crm-chat-thread-head {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
  padding: 10px 14px;
  border-bottom: 1px solid var(--crm-border);
  background: rgba(255,255,255,.97);
}
.crm-chat-thread-person { min-width: 0; display: flex; align-items: center; gap: 9px; }
.crm-chat-thread-person > div:last-child { min-width: 0; }
.crm-chat-name-line { display: flex; align-items: center; gap: 7px; }
.crm-chat-name-line h2 { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--crm-text); font-size: 12px; font-weight: 750; }
.crm-chat-thread-person p { margin: 3px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--crm-faint); font-size: 8.5px; }
.crm-chat-thread-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.crm-chat-thread-actions form { margin: 0; }
.crm-chat-action {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border: 1px solid var(--crm-border-strong);
  border-radius: 7px;
  background: #fff;
  color: #555d67;
  font: 650 9px var(--sans);
  cursor: pointer;
}
.crm-chat-action:hover { border-color: #bfc5cc; color: var(--crm-text); }
.crm-chat-action.primary { border-color: var(--crm-text); background: var(--crm-text); color: #fff; }
.crm-chat-handover {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 8px 14px;
  border-bottom: 1px solid #f1dfc3;
  background: #fffaf2;
}
.crm-chat-handover b { color: #8c5912; font-size: 9px; }
.crm-chat-handover span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #9b7846; font-size: 8.5px; }
.crm-chat-window-warning,
.crm-chat-live-banner {
  flex: 0 0 auto;
  padding: 7px 14px;
  border-bottom: 1px solid #f0d4d7;
  background: var(--crm-danger-soft);
  color: #9e3942;
  font-size: 8.7px;
}
.crm-chat-live-banner { border-color: #dbe6fb; background: #f2f6ff; color: #526e9f; }
.crm-chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 18px 12px;
  scroll-behavior: smooth;
}
.crm-thread-row { display: flex; margin-bottom: 7px; }
.crm-thread-row.client { justify-content: flex-start; }
.crm-thread-row.out { justify-content: flex-end; }
.crm-thread-row.system { justify-content: center; }
.crm-thread-bubble { max-width: min(76%, 540px); }
.crm-thread-text {
  padding: 8px 10px;
  border: 1px solid #e2e5e8;
  border-radius: 11px 11px 11px 3px;
  background: #fff;
  color: #2b3036;
  font-size: 10.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  box-shadow: 0 1px 1px rgba(20,25,30,.025);
}
.crm-thread-bubble.bot .crm-thread-text { border-color: #dfe6f5; border-radius: 11px 11px 3px 11px; background: #edf3ff; color: #344c78; }
.crm-thread-bubble.agent .crm-thread-text { border-color: #20242a; border-radius: 11px 11px 3px 11px; background: #20242a; color: #fff; }
.crm-thread-bubble.system .crm-thread-text { border: 0; background: transparent; color: var(--crm-faint); font-size: 8.5px; text-align: center; box-shadow: none; }
.crm-thread-meta { display: flex; align-items: center; gap: 5px; margin: 3px 4px 0; color: #a1a7af; font-size: 7.4px; }
.crm-thread-row.out .crm-thread-meta { justify-content: flex-end; }
.crm-thread-bubble.system .crm-thread-meta { justify-content: center; }
.crm-thread-meta .failed { color: var(--crm-danger); }
.crm-thread-redacted { display: block; padding: 7px 9px; color: var(--crm-faint); font-size: 9px; font-style: italic; }
.crm-chat-empty-thread { margin: auto; color: var(--crm-faint); font-size: 9px; text-align: center; }

.crm-chat-composer-area { flex: 0 0 auto; padding: 9px 11px 11px; border-top: 1px solid var(--crm-border); background: #fff; }
.crm-chat-composer { padding: 7px 8px 6px 10px; border: 1px solid var(--crm-border-strong); border-radius: 10px; background: #fff; }
.crm-chat-composer:focus-within { border-color: #afb5bd; box-shadow: 0 0 0 3px rgba(30,35,40,.035); }
.crm-chat-composer textarea {
  width: 100%;
  min-height: 54px;
  max-height: 145px;
  display: block;
  resize: vertical;
  padding: 2px 0 5px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--crm-text);
  font: 10.5px/1.5 var(--sans);
}
.crm-chat-composer textarea::placeholder { color: #a4aab1; }
.crm-chat-composer-foot { display: flex; align-items: center; gap: 9px; padding-top: 5px; border-top: 1px solid #f0f2f4; }
.crm-chat-composer-foot span { min-width: 0; flex: 1; color: var(--crm-faint); font-size: 7.8px; }
.crm-chat-send {
  min-height: 29px;
  padding: 0 11px;
  border: 1px solid var(--crm-text);
  border-radius: 7px;
  background: var(--crm-text);
  color: #fff;
  font: 700 9px var(--sans);
  cursor: pointer;
}
.crm-chat-locked { padding: 10px 12px; border: 1px dashed #d9dde2; border-radius: 9px; background: #fafbfc; color: var(--crm-muted); font-size: 8.8px; text-align: center; }

.crm-chat-client { overflow-y: auto; border-left: 1px solid var(--crm-border); background: #fff; }
.crm-chat-client-head { display: flex; align-items: center; gap: 10px; padding: 15px 13px; border-bottom: 1px solid #edf0f3; }
.crm-chat-client-head h3 { margin: 0; color: var(--crm-text); font-size: 11px; font-weight: 760; }
.crm-chat-client-head span { display: block; margin-top: 3px; color: var(--crm-faint); font-size: 8.5px; }
.crm-chat-client-block { display: block; margin: 0; padding: 12px 13px; border: 0; border-bottom: 1px solid #edf0f3; border-radius: 0; background: #fff; }
.crm-chat-client-block-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.crm-chat-client-block-head b { color: var(--crm-text); font-size: 9.7px; }
.crm-chat-client-block-head a { color: var(--crm-accent); font-size: 8px; font-weight: 700; }
.crm-chat-client-facts { margin: 0; }
.crm-chat-client-facts > div { display: grid; grid-template-columns: 76px minmax(0,1fr); gap: 8px; padding: 6px 0; border-bottom: 1px solid #f2f3f5; }
.crm-chat-client-facts > div:last-child { border-bottom: 0; }
.crm-chat-client-facts dt { color: var(--crm-faint); font-size: 8px; }
.crm-chat-client-facts dd { margin: 0; overflow-wrap: anywhere; color: #515861; font-size: 8.5px; text-align: right; }
.crm-chat-deal-ready > span { display: block; color: var(--crm-faint); font-size: 8px; }
.crm-chat-deal-ready > b { display: block; margin: 4px 0 7px; color: var(--crm-text); font-size: 10px; }
.crm-chat-deal-ready > small { display: block; margin: 3px 0; color: var(--crm-muted); font-size: 8px; }
.crm-chat-wide-action {
  width: 100%;
  min-height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 9px;
  padding: 0 9px;
  border: 1px solid var(--crm-border-strong);
  border-radius: 7px;
  background: #fff;
  color: #555d67;
  font: 700 8.8px var(--sans);
  cursor: pointer;
}
.crm-chat-wide-action.primary { border-color: var(--crm-text); background: var(--crm-text); color: #fff; }
.crm-chat-deal-form label { display: block; margin-bottom: 5px; color: var(--crm-muted); font-size: 8px; }
.crm-chat-deal-form select { width: 100%; min-height: 32px; height: 32px; padding: 0 7px; border-radius: 7px; font-size: 8.8px; }
.crm-chat-deal-form small { display: block; margin-top: 7px; color: var(--crm-faint); font-size: 7.5px; line-height: 1.4; }
.crm-chat-facts-editor { padding: 0; }
.crm-chat-facts-editor summary { padding: 12px 13px; cursor: pointer; color: var(--crm-text); font-size: 9.5px; font-weight: 720; list-style-position: inside; }
.crm-chat-known-facts { padding: 0 13px 8px; }
.crm-chat-known-facts > div { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 6px 0; border-bottom: 1px solid #f1f3f4; }
.crm-chat-known-facts span { color: var(--crm-faint); font-size: 7.7px; }
.crm-chat-known-facts b { overflow-wrap: anywhere; color: #535a63; font-size: 8.4px; font-weight: 600; }
.crm-chat-known-facts p { margin: 0; color: var(--crm-faint); font-size: 8px; }
.crm-chat-fact-form { padding: 10px 13px 13px; border-top: 1px solid #edf0f3; }
.crm-chat-fact-form label { display: block; margin-bottom: 8px; color: var(--crm-muted); font-size: 8px; }
.crm-chat-fact-form input,
.crm-chat-fact-form select { width: 100%; min-height: 31px; margin-top: 4px; font-size: 8.5px; }
.crm-chat-no-selection { grid-column: 2 / -1; display: grid; place-items: center; background: #fafbfc; color: var(--crm-faint); text-align: center; }
.crm-chat-no-selection b { display: block; margin-bottom: 4px; color: var(--crm-text); font-size: 11px; }
.crm-chat-no-selection span { font-size: 9px; }

@media (max-width: 1280px) {
  .crm-chat-workspace { grid-template-columns: 270px minmax(390px,1fr) 255px; }
  .crm-chat-thread-actions .crm-chat-action:last-child { display: none; }
}
@media (max-width: 1080px) {
  .crm-chat-workspace { grid-template-columns: 260px minmax(0,1fr); }
  .crm-chat-client { display: none; }
  .crm-chat-no-selection { grid-column: 2; }
}
@media (max-width: 820px) {
  .crm-chats-page { padding-top: 18px; }
  .crm-chat-page-head { align-items: flex-start; flex-direction: column; gap: 10px; }
  .crm-chat-workspace { height: auto; min-height: 720px; grid-template-columns: 230px minmax(0,1fr); }
  .crm-chat-thread { min-height: 720px; }
  .crm-chat-head-stats { width: 100%; }
  .crm-chat-thread-head { align-items: flex-start; }
  .crm-chat-thread-actions { flex-direction: column; align-items: stretch; }
  .crm-chat-action { min-height: 28px; }
}
@media (max-width: 620px) {
  .crm-chat-head-stats { display: none; }
  .crm-chat-workspace { display: block; min-height: 0; overflow: visible; border: 0; box-shadow: none; }
  .crm-chat-inbox { max-height: 280px; margin-bottom: 10px; border: 1px solid var(--crm-border); border-radius: 11px; overflow: hidden; }
  .crm-chat-thread { min-height: 650px; border: 1px solid var(--crm-border); border-radius: 11px; overflow: hidden; }
  .crm-chat-thread-head { flex-direction: column; }
  .crm-chat-thread-actions { width: 100%; flex-direction: row; }
  .crm-chat-thread-actions form,
  .crm-chat-thread-actions .crm-chat-action { flex: 1; }
  .crm-chat-thread-actions form .crm-chat-action { width: 100%; }
  .crm-thread-bubble { max-width: 88%; }
  .crm-chat-client { display: none; }
  .crm-chat-no-selection { min-height: 300px; border: 1px solid var(--crm-border); border-radius: 11px; }
}

/* ---------- Leads / sales pipeline workspace v5 ---------- */
.crm-leads-page,
.crm-lead-detail-page {
  max-width: 1540px;
  margin: 0 auto;
  padding: 30px 0 48px;
}
.crm-leads-page .btn,
.crm-lead-detail-page .btn { min-height: 34px; padding: 0 11px; border-radius: 8px; background: #fff; font-size: 10px; }
.crm-leads-page .btn-primary,
.crm-lead-detail-page .btn-primary { background: var(--crm-text); border-color: var(--crm-text); color: #fff; }

.crm-view-switch {
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--crm-border);
  border-radius: 9px;
  background: #f6f7f8;
}
.crm-view-switch a { height: 28px; display: inline-flex; align-items: center; padding: 0 9px; border-radius: 6px; color: var(--crm-muted); font-size: 9.5px; font-weight: 700; }
.crm-view-switch a.active { background: #fff; color: var(--crm-text); box-shadow: 0 1px 3px rgba(20,25,31,.08); }

.crm-lead-metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-bottom: 14px; }
.crm-lead-metrics article { padding: 14px 16px; border: 1px solid var(--crm-border); border-radius: 11px; background: #fff; box-shadow: var(--crm-shadow); }
.crm-lead-metrics article.attention { border-color: #edd7b6; background: #fffdfa; }
.crm-lead-metrics span { display: block; color: var(--crm-muted); font-size: 9.5px; font-weight: 650; }
.crm-lead-metrics b { display: block; margin: 6px 0 2px; color: var(--crm-text); font-size: 20px; line-height: 1; letter-spacing: -.03em; }
.crm-lead-metrics small { color: var(--crm-faint); font-size: 8.8px; }

.crm-leads-panel { border: 1px solid var(--crm-border); border-radius: 12px; background: #fff; box-shadow: var(--crm-shadow); overflow: hidden; }
.crm-lead-service-tabs { min-height: 50px; }
.crm-lead-toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #edf0f3; background: #fbfcfd; }
.crm-lead-toolbar .crm-client-search { max-width: 360px; }
.crm-lead-toolbar select { width: auto; min-width: 132px; height: 36px; min-height: 36px; padding: 0 28px 0 9px; font-size: 9.5px; }

.crm-pipeline-scroll { overflow-x: auto; overflow-y: hidden; padding: 12px; background: #f7f8fa; }
.crm-pipeline { min-width: 1670px; display: grid; grid-template-columns: repeat(6, minmax(250px, 1fr)); gap: 10px; align-items: start; }
.crm-pipeline-column { min-width: 0; }
.crm-pipeline-column > header { height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 4px 8px; color: #555d67; }
.crm-pipeline-column > header b { font-size: 10px; font-weight: 760; }
.crm-pipeline-column > header em { min-width: 20px; margin-left: auto; padding: 2px 5px; border-radius: 999px; background: #e9ebee; color: #707782; font-size: 8px; font-style: normal; font-weight: 750; text-align: center; }
.crm-pipeline-dot { width: 7px; height: 7px; border-radius: 50%; background: #aeb5bd; }
.crm-pipeline-callback .crm-pipeline-dot { background: var(--crm-warning); }
.crm-pipeline-working .crm-pipeline-dot { background: #5875ad; }
.crm-pipeline-won .crm-pipeline-dot { background: var(--crm-success); }
.crm-pipeline-lost .crm-pipeline-dot { background: var(--crm-danger); }
.crm-pipeline-stack { display: grid; gap: 8px; }
.crm-pipeline-empty { min-height: 92px; display: grid; place-items: center; border: 1px dashed #d8dce1; border-radius: 9px; color: #9ba1a9; font-size: 9px; }

.crm-lead-card { min-width: 0; padding: 11px; border: 1px solid #dfe3e7; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(20,25,31,.025); }
.crm-lead-card:hover { border-color: #c9ced5; box-shadow: 0 5px 18px rgba(20,25,31,.055); }
.crm-lead-card.overdue { border-color: #eacda1; box-shadow: inset 3px 0 0 var(--crm-warning); }
.crm-lead-card-top { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-bottom: 10px; }
.crm-lead-source { color: var(--crm-faint); font-size: 8px; font-weight: 650; }
.crm-lead-card-person { display: flex; align-items: center; gap: 8px; min-width: 0; }
.crm-lead-card-person .crm-client-avatar-lg { width: 31px; height: 31px; flex: 0 0 auto; }
.crm-lead-card-person > span:last-child { min-width: 0; }
.crm-lead-card-person b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--crm-text); font-size: 10.5px; }
.crm-lead-card-person small { display: block; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--crm-faint); font-size: 8.5px; }
.crm-lead-request { min-height: 36px; margin: 10px 0; color: #5d6570; font-size: 9px; line-height: 1.45; overflow-wrap: anywhere; }
.crm-lead-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 0; border-top: 1px solid #f0f2f4; border-bottom: 1px solid #f0f2f4; }
.crm-lead-meta span { min-width: 0; }
.crm-lead-meta small { display: block; color: var(--crm-faint); font-size: 7.8px; }
.crm-lead-meta b { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #545c66; font-size: 8.8px; font-weight: 700; }
.crm-lead-meta b.warning { color: var(--crm-warning); }
.crm-lead-meta b.danger,
.crm-lead-summary-strip b.danger { color: #ffb1b7; }
.crm-lead-card-actions { min-height: 36px; display: flex; align-items: center; gap: 5px; margin-top: 9px; }
.crm-lead-card-actions form { margin: 0; }
.crm-lead-card-actions .btn { min-height: 29px; padding: 0 8px; font-size: 8.5px; }
.crm-lead-card-actions .crm-row-open { margin-left: auto; }
.crm-sale-btn { border-color: #cfe8df !important; background: #f2faf7 !important; color: var(--crm-success) !important; font-weight: 750; }
.crm-stage-mini { height: 29px; display: inline-flex; align-items: center; border: 1px solid var(--crm-border); border-radius: 7px; background: #fff; overflow: hidden; }
.crm-stage-mini select { width: 94px; min-width: 0; height: 27px; min-height: 27px; padding: 0 20px 0 6px; border: 0; border-radius: 0; background: #fff; font-size: 8px; }
.crm-stage-mini button { width: 26px; height: 27px; border: 0; border-left: 1px solid var(--crm-border); background: #f7f8f9; color: var(--crm-text); cursor: pointer; font-weight: 800; }
.crm-stage-mini button:hover { background: #eceff2; }

.crm-lead-table-wrap { overflow-x: auto; }
.crm-lead-table { width: 100%; min-width: 980px; border-collapse: collapse; }
.crm-lead-table th { padding: 9px 12px; border-bottom: 1px solid #edf0f3; background: #fff; color: var(--crm-faint); font-size: 9px; font-weight: 750; letter-spacing: .05em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.crm-lead-table td { padding: 10px 12px; border-bottom: 1px solid #f0f2f4; color: #555d67; font-size: 9.5px; vertical-align: middle; }
.crm-lead-table tbody tr:hover { background: #fbfcfd; }

/* Lead detail */
.crm-lead-detail-head { align-items: center; }
.crm-lead-stepper { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-bottom: 12px; }
.crm-lead-stepper > div { min-width: 0; height: 38px; display: flex; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid var(--crm-border); border-radius: 8px; background: #fff; color: var(--crm-faint); }
.crm-lead-stepper > div span { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #c6cbd1; }
.crm-lead-stepper > div b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8.8px; }
.crm-lead-stepper > div.active { border-color: #ccd5e4; background: #f6f8fc; color: #435875; }
.crm-lead-stepper > div.active span { background: #5875ad; }
.crm-lead-stepper > div.active.lost { border-color: #f0d6da; background: #fff8f9; color: var(--crm-danger); }
.crm-lead-stepper > div.active.lost span { background: var(--crm-danger); }

.crm-lead-take-callout { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; padding: 11px 14px; border: 1px solid #ead2ae; border-radius: 10px; background: #fffaf2; }
.crm-lead-take-callout b { display: block; color: #6f5224; font-size: 10.5px; }
.crm-lead-take-callout span { display: block; margin-top: 2px; color: #8a744f; font-size: 8.8px; }
.crm-lead-take-callout form { margin: 0; }

.crm-lead-summary-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 14px; border: 1px solid var(--crm-border); border-radius: 11px; background: #20242a; color: #fff; overflow: hidden; }
.crm-lead-summary-strip > div { padding: 13px 15px; border-left: 1px solid rgba(255,255,255,.1); }
.crm-lead-summary-strip > div:first-child { border-left: 0; }
.crm-lead-summary-strip span { display: block; margin-bottom: 4px; color: #9ba1a8; font-size: 8.5px; }
.crm-lead-summary-strip b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }

.crm-lead-main-grid { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(310px,.65fr); gap: 14px; align-items: start; }
.crm-lead-main-column,
.crm-lead-side-column { display: grid; gap: 14px; }
.crm-detail-card { min-width: 0; border: 1px solid var(--crm-border); border-radius: 12px; background: #fff; box-shadow: var(--crm-shadow); overflow: hidden; }
.crm-detail-card-head { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 15px; border-bottom: 1px solid #edf0f3; }
.crm-detail-card-head h2 { margin: 0; color: var(--crm-text); font-size: 11.5px; font-weight: 760; }
.crm-detail-card-head p { margin: 3px 0 0; color: var(--crm-faint); font-size: 8.8px; }
.crm-detail-card-head > a { color: var(--crm-accent); font-size: 8.8px; font-weight: 700; }
.crm-detail-form { padding: 15px; }
.crm-detail-form .crm-form-field input,
.crm-detail-form .crm-form-field textarea,
.crm-detail-form .crm-form-field select,
.crm-convert-form .crm-form-field select { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid var(--crm-border-strong); border-radius: 8px; background: #fff; color: var(--crm-text); font: 10.5px var(--sans); }
.crm-detail-form .crm-form-field textarea { min-height: 78px; }
.crm-readonly-box { padding: 15px; }
.crm-readonly-box > b { color: var(--crm-text); font-size: 10.5px; }
.crm-readonly-box p { margin: 7px 0; color: #5d6570; font-size: 9.5px; }
.crm-readonly-box small { color: var(--crm-faint); font-size: 8.5px; }
.crm-contact-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 15px; }
.crm-contact-preview span { padding: 10px; border: 1px solid #edf0f3; border-radius: 8px; background: #fafbfc; }
.crm-contact-preview small { display: block; color: var(--crm-faint); font-size: 8px; }
.crm-contact-preview b { display: block; margin-top: 3px; color: var(--crm-text); font-size: 9.5px; }
.crm-convert-card { border-color: #d7e9e2; }
.crm-convert-form { display: flex; align-items: flex-end; gap: 9px; padding: 14px 15px; }
.crm-convert-form .crm-form-field { flex: 1; margin: 0; }
.crm-convert-form .btn { min-height: 38px; }
.crm-thread-card { position: sticky; top: 80px; }
.crm-lead-thread { max-height: 510px; margin: 0; padding: 14px; overflow-y: auto; }
.crm-lead-thread .msg { max-width: 90%; }
.crm-side-empty { padding: 38px 16px; text-align: center; }
.crm-side-empty b { display: block; color: var(--crm-text); font-size: 10px; }
.crm-side-empty span { display: block; margin-top: 3px; color: var(--crm-faint); font-size: 8.5px; }
.crm-lead-info-card dl { margin: 0; padding: 4px 14px; }
.crm-lead-info-card dl div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #f0f2f4; }
.crm-lead-info-card dl div:last-child { border-bottom: 0; }
.crm-lead-info-card dt { color: var(--crm-muted); font-size: 8.8px; }
.crm-lead-info-card dd { margin: 0; max-width: 190px; overflow: hidden; text-overflow: ellipsis; color: var(--crm-text); font-size: 8.8px; text-align: right; }
.crm-lead-info-card dd.mono { font-size: 7.6px; }

@media (max-width: 1180px) {
  .crm-lead-main-grid { grid-template-columns: 1fr; }
  .crm-lead-side-column { grid-template-columns: 1.3fr .7fr; }
  .crm-thread-card { position: static; }
}
@media (max-width: 900px) {
  .crm-lead-metrics { grid-template-columns: 1fr 1fr; }
  .crm-lead-toolbar { flex-wrap: wrap; }
  .crm-lead-toolbar .crm-client-search { max-width: none; flex-basis: 100%; }
  .crm-lead-toolbar select { flex: 1; }
  .crm-lead-stepper { grid-template-columns: repeat(3, 1fr); }
  .crm-lead-summary-strip { grid-template-columns: 1fr 1fr; }
  .crm-lead-summary-strip > div:nth-child(odd) { border-left: 0; }
  .crm-lead-summary-strip > div:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.1); }
}
@media (max-width: 650px) {
  .crm-lead-metrics { gap: 8px; }
  .crm-lead-metrics article { padding: 12px; }
  .crm-lead-toolbar select { min-width: calc(50% - 4px); }
  .crm-lead-stepper { grid-template-columns: 1fr 1fr; }
  .crm-lead-take-callout { align-items: flex-start; flex-direction: column; }
  .crm-lead-summary-strip { grid-template-columns: 1fr; }
  .crm-lead-summary-strip > div { border-left: 0; border-top: 1px solid rgba(255,255,255,.1); }
  .crm-lead-summary-strip > div:first-child { border-top: 0; }
  .crm-lead-side-column { grid-template-columns: 1fr; }
  .crm-convert-form { align-items: stretch; flex-direction: column; }
}

/* ========================================================================
   STEP 6 — Deals workspace
   ======================================================================== */
.crm-deals-page,
.crm-deal-detail-page { width: 100%; max-width: 1600px; margin: 0 auto; padding: 22px 24px 40px; }
.crm-page-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.crm-page-title-row h1 { margin: 1px 0 4px; color: var(--crm-text); font-size: 22px; line-height: 1.1; letter-spacing: -.025em; }
.crm-page-title-row p:not(.crm-eyebrow) { margin: 0; color: var(--crm-muted); font-size: 10px; }
.crm-eyebrow { margin: 0 0 5px !important; color: var(--crm-faint) !important; font-size: 8px !important; font-weight: 760; letter-spacing: .09em; text-transform: uppercase; }
.crm-page-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.crm-page-actions .btn { min-height: 35px; }

.crm-deal-metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-bottom: 13px; }
.crm-deal-metrics article { min-width: 0; padding: 13px 14px; border: 1px solid var(--crm-border); border-radius: 11px; background: #fff; box-shadow: var(--crm-shadow); }
.crm-deal-metrics span { display: block; color: var(--crm-muted); font-size: 8.5px; font-weight: 650; }
.crm-deal-metrics strong { display: inline-block; margin-top: 6px; color: var(--crm-text); font-size: 19px; line-height: 1; font-weight: 780; letter-spacing: -.03em; }
.crm-deal-metrics small { margin-left: 5px; color: var(--crm-faint); font-size: 8px; }
.crm-deal-metrics .metric-danger { border-color: #efd5d8; background: #fffafb; }
.crm-deal-metrics .metric-danger strong { color: var(--crm-danger); }
.crm-deal-metrics .metric-warning { border-color: #ead8ba; background: #fffaf3; }
.crm-deal-metrics .metric-warning strong { color: var(--crm-warning); }

.crm-deal-toolbar { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 8px; border: 1px solid var(--crm-border); border-radius: 11px; background: #fff; box-shadow: var(--crm-shadow); }
.crm-deal-filters { min-width: 0; flex: 1; display: flex; align-items: center; gap: 7px; margin: 0; }
.crm-deal-filters select { min-width: 135px; height: 34px; padding: 0 28px 0 9px; border: 1px solid var(--crm-border-strong); border-radius: 8px; background: #fff; color: var(--crm-text); font: 9px var(--sans); }
.crm-deal-search { width: min(310px, 34vw); }
.crm-deal-search input { height: 34px; }
.crm-view-switch { flex: 0 0 auto; display: inline-flex; padding: 3px; border: 1px solid var(--crm-border); border-radius: 8px; background: #f6f7f8; }
.crm-view-switch a { min-height: 27px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 6px; color: var(--crm-muted); font-size: 8.5px; font-weight: 700; text-decoration: none; }
.crm-view-switch a.active { background: #fff; color: var(--crm-text); box-shadow: 0 1px 4px rgba(25,31,38,.08); }

.crm-deal-board { display: grid; grid-template-columns: repeat(4, minmax(225px, 1fr)); gap: 9px; align-items: start; overflow-x: auto; padding-bottom: 7px; }
.crm-deal-lane { min-width: 225px; border: 1px solid var(--crm-border); border-radius: 11px; background: #f7f8f9; overflow: hidden; }
.crm-deal-lane > header { min-height: 43px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 11px; border-bottom: 1px solid #e7eaed; background: #fff; }
.crm-deal-lane > header span { color: var(--crm-text); font-size: 9.5px; font-weight: 760; }
.crm-deal-lane > header b { min-width: 22px; height: 22px; display: inline-grid; place-items: center; padding: 0 5px; border-radius: 7px; background: #f0f2f4; color: var(--crm-muted); font-size: 8px; }
.crm-deal-lane.lane-new > header { box-shadow: inset 0 2px 0 #8ba2c5; }
.crm-deal-lane.lane-docs_collected > header { box-shadow: inset 0 2px 0 #d1a45b; }
.crm-deal-lane.lane-submitted > header { box-shadow: inset 0 2px 0 #8072b2; }
.crm-deal-lane.lane-ready > header { box-shadow: inset 0 2px 0 #5f9d84; }
.crm-deal-lane-body { display: grid; gap: 7px; padding: 7px; }
.crm-deal-card { min-width: 0; padding: 11px; border: 1px solid #dfe3e7; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(20,25,31,.025); }
.crm-deal-card:hover { border-color: #c9ced5; box-shadow: 0 5px 18px rgba(20,25,31,.055); }
.crm-deal-card.overdue { border-color: #efc9ce; box-shadow: inset 3px 0 0 var(--crm-danger); }
.crm-deal-card-top { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.crm-service-pill { max-width: 150px; display: inline-flex; align-items: center; min-height: 21px; padding: 0 7px; border-radius: 6px; background: #f0f2f5; color: #5b6470; font-size: 7.8px; font-weight: 740; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-service-pill.service-tour_visa { background: #eef4fb; color: #53729a; }
.crm-service-pill.service-group_visa { background: #f1f0fb; color: #70659e; }
.crm-service-pill.service-business_visa { background: #edf7f2; color: #4e806c; }
.crm-service-pill.service-tour { background: #fff4e7; color: #9a6a2d; }
.crm-service-pill.service-cargo { background: #f4f0eb; color: #7b674f; }
.crm-deadline { color: var(--crm-faint); font-size: 8px; font-weight: 700; white-space: nowrap; }
.crm-deadline.danger, .danger { color: var(--crm-danger) !important; }
.crm-deadline.warning, .warning { color: var(--crm-warning) !important; }
.crm-deal-person { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 10px; color: inherit; text-decoration: none; }
.crm-deal-person > span:last-child { min-width: 0; }
.crm-deal-person b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--crm-text); font-size: 10.5px; }
.crm-deal-person small { display: block; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--crm-faint); font-size: 8.2px; }
.crm-deal-money-row { display: grid; grid-template-columns: 1.35fr .65fr; gap: 7px; margin-top: 10px; padding: 8px 0; border-top: 1px solid #f0f2f4; border-bottom: 1px solid #f0f2f4; }
.crm-deal-money-row small, .crm-deal-owner span { display: block; color: var(--crm-faint); font-size: 7.6px; }
.crm-deal-money-row b, .crm-deal-owner b { display: block; margin-top: 2px; color: #515a65; font-size: 9px; font-weight: 730; }
.crm-doc-progress { margin-top: 9px; }
.crm-doc-progress-bar { display:block; width:100%; height:4px; border:0; border-radius:999px; overflow:hidden; background:#edf0f2; accent-color:#708c80; }
.crm-doc-progress-bar::-webkit-progress-bar { background:#edf0f2; border-radius:999px; }
.crm-doc-progress-bar::-webkit-progress-value { background:#708c80; border-radius:999px; }
.crm-doc-progress-bar::-moz-progress-bar { background:#708c80; border-radius:999px; }
.crm-doc-progress small { display: block; margin-top: 4px; color: var(--crm-faint); font-size: 7.6px; }
.crm-deal-owner { margin-top: 8px; }
.crm-deal-card-actions { display: flex; align-items: center; gap: 6px; min-height: 30px; margin-top: 9px; }
.crm-deal-card-actions form { margin: 0; }
.crm-deal-card-actions .btn { min-height: 29px; padding: 0 9px; font-size: 8.3px; }
.crm-deal-card-actions .crm-row-open { margin-left: auto; }
.crm-row-open { color: var(--crm-accent); font-size: 8.4px; font-weight: 720; text-decoration: none; white-space: nowrap; }
.crm-lane-empty, .crm-table-empty { padding: 24px 10px; color: var(--crm-faint); font-size: 8.5px; text-align: center; }

.crm-deal-list-card { overflow: hidden; }
.crm-deal-table-wrap { overflow-x: auto; }
.crm-deal-table { width: 100%; min-width: 1050px; border-collapse: collapse; }
.crm-deal-table th { padding: 9px 11px; border-bottom: 1px solid #edf0f3; background: #fff; color: var(--crm-faint); font-size: 8px; font-weight: 760; letter-spacing: .045em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.crm-deal-table td { padding: 10px 11px; border-bottom: 1px solid #f0f2f4; color: #555d67; font-size: 9px; vertical-align: middle; }
.crm-deal-table tr:last-child td { border-bottom: 0; }
.crm-deal-table tr:hover { background: #fbfcfd; }
.crm-deal-table tr.row-overdue { background: #fffafb; }
.crm-table-person { color: inherit; text-decoration: none; }
.crm-table-person b { display: block; color: var(--crm-text); font-size: 9.3px; }
.crm-table-person small { display: block; margin-top: 2px; max-width: 145px; overflow: hidden; text-overflow: ellipsis; color: var(--crm-faint); font-size: 7.7px; white-space: nowrap; }

/* Deal detail */
.crm-deal-detail-head { align-items: center; }
.crm-title-with-back { display: flex; align-items: center; gap: 10px; min-width: 0; }
.crm-back-button { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--crm-border); border-radius: 9px; background: #fff; color: var(--crm-text); font-size: 15px; text-decoration: none; }
.crm-back-button:hover { border-color: var(--crm-border-strong); background: #f8f9fa; }
.crm-deal-stepper { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 5px; margin-bottom: 12px; }
.crm-deal-stepper form, .crm-deal-stepper > div { margin: 0; }
.crm-deal-stepper button, .crm-deal-stepper > div { width: 100%; min-height: 41px; display: flex; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid var(--crm-border); border-radius: 9px; background: #fff; color: var(--crm-muted); font: inherit; text-align: left; }
.crm-deal-stepper button { cursor: pointer; }
.crm-deal-stepper span { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #c7ccd2; }
.crm-deal-stepper b { font-size: 8.8px; }
.crm-deal-stepper .active button, .crm-deal-stepper > div.active { border-color: #b9c8dd; background: #f5f8fc; color: #425b7b; box-shadow: inset 0 0 0 1px #e7edf5; }
.crm-deal-stepper .active span { background: #5d78a2; }
.crm-deal-stepper button:hover { background: #f8f9fa; }
.crm-deal-summary-strip { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); margin-bottom: 14px; border-radius: 11px; background: #20242a; color: #fff; overflow: hidden; }
.crm-deal-summary-strip > div { min-width: 0; padding: 13px 14px; border-left: 1px solid rgba(255,255,255,.1); }
.crm-deal-summary-strip > div:first-child { border-left: 0; }
.crm-deal-summary-strip span { display: block; margin-bottom: 4px; color: #9ca2aa; font-size: 7.8px; }
.crm-deal-summary-strip b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; }
.crm-deal-main-grid { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(280px,.55fr); gap: 14px; align-items: start; }
.crm-deal-main-column, .crm-deal-side-column { display: grid; gap: 14px; }
.crm-deal-side-column { position: sticky; top: 76px; }
.crm-deal-agreement { margin: 14px 15px 0; padding: 10px 11px; border: 1px solid #e7eaed; border-radius: 8px; background: #fafbfc; }
.crm-deal-agreement small { display: block; color: var(--crm-faint); font-size: 7.8px; font-weight: 700; }
.crm-deal-agreement p { margin: 4px 0 0; color: #565f6a; font-size: 9.2px; line-height: 1.5; overflow-wrap: anywhere; }
.crm-form-grid { display: grid; gap: 10px; }
.crm-form-grid.two-cols { grid-template-columns: repeat(2, minmax(0,1fr)); }
.crm-form-grid.three-cols { grid-template-columns: repeat(3, minmax(0,1fr)); }
.crm-form-grid.payment-grid { grid-template-columns: 1fr .8fr .8fr 1.2fr; }
.crm-span-2 { grid-column: span 2; }
.crm-form-field { min-width: 0; }
.crm-form-field label { display: block; margin-bottom: 4px; color: #59616b; font-size: 8px; font-weight: 700; }
.crm-form-field input, .crm-form-field select, .crm-form-field textarea { width: 100%; min-height: 36px; padding: 7px 9px; border: 1px solid var(--crm-border-strong); border-radius: 8px; background: #fff; color: var(--crm-text); font: 9.5px var(--sans); }
.crm-form-field textarea { min-height: 70px; resize: vertical; }
.crm-form-field small.crm-rate-preview { display: block; min-height: 12px; margin-top: 3px; color: var(--crm-faint); font-size: 7.7px; }
.crm-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 11px; border-top: 1px solid #edf0f2; }
.crm-form-footer span { color: var(--crm-faint); font-size: 8px; }
.crm-form-errors { margin-top: 10px; padding: 8px 10px; border: 1px solid #efd4d8; border-radius: 7px; background: #fff8f9; color: var(--crm-danger); font-size: 8px; }
.crm-readonly-deal { display: grid; grid-template-columns: repeat(2,1fr); margin: 0; padding: 14px 15px; }
.crm-readonly-deal div { padding: 8px 0; border-bottom: 1px solid #f0f2f4; }
.crm-readonly-deal dt { color: var(--crm-faint); font-size: 8px; }
.crm-readonly-deal dd { margin: 3px 0 0; color: var(--crm-text); font-size: 9.5px; font-weight: 700; }

.crm-doc-counter { min-width: 35px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: #edf3ef; color: #557566; font-size: 8.5px; font-weight: 760; }
.crm-doc-list, .crm-payments-list { padding: 5px 14px; }
.crm-doc-row, .crm-payment-row { min-height: 51px; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid #f0f2f4; }
.crm-doc-row:last-child, .crm-payment-row:last-child { border-bottom: 0; }
.crm-doc-icon { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 7px; background: #f1f3f5; color: #69727d; font-size: 10px; }
.crm-doc-copy, .crm-payment-row > div:first-child { min-width: 0; flex: 1; }
.crm-doc-copy b, .crm-payment-row b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--crm-text); font-size: 9px; }
.crm-doc-copy small, .crm-payment-row small { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--crm-faint); font-size: 7.7px; }
.crm-doc-status, .crm-payment-row > span { flex: 0 0 auto; min-height: 23px; display: inline-flex; align-items: center; padding: 0 7px; border-radius: 6px; background: #f1f3f5; color: #68717b; font-size: 7.5px; font-weight: 720; }
.crm-doc-row.status-received .crm-doc-status, .payment-paid { background: #edf7f2 !important; color: #4c8069 !important; }
.crm-doc-row.status-verified .crm-doc-status { background: #eaf4ef; color: #36745a; }
.crm-doc-row.status-rejected .crm-doc-status, .payment-refunded { background: #fff0f2 !important; color: #ac5962 !important; }
.crm-doc-row.status-awaiting .crm-doc-status, .payment-expected { background: #fff5e8 !important; color: #9a702e !important; }
.crm-icon-danger { width: 25px; height: 25px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: #b1b6bc; cursor: pointer; font-size: 15px; }
.crm-icon-danger:hover { background: #fff0f2; color: var(--crm-danger); }
.crm-inline-create { margin: 8px 14px 14px; padding: 12px; border: 1px solid #e8ebee; border-radius: 9px; background: #fafbfc; }
.crm-inline-create h3 { margin: 0 0 10px; color: var(--crm-text); font-size: 9.5px; }
.crm-section-empty { padding: 24px 8px; color: var(--crm-faint); font-size: 8.5px; text-align: center; }
.crm-head-money { color: var(--crm-text); font-size: 9px; }

.crm-finance-mini-summary { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-bottom: 1px solid #edf0f2; }
.crm-finance-mini-summary span { min-width: 0; padding: 11px 14px; border-left: 1px solid #edf0f2; }
.crm-finance-mini-summary span:first-child { border-left: 0; }
.crm-finance-mini-summary small { display: block; color: var(--crm-faint); font-size: 7.6px; }
.crm-finance-mini-summary b { display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; color: var(--crm-text); font-size: 9.2px; }
.crm-accounting-form { padding: 14px 15px; }
.crm-accounting-form fieldset { margin: 0 0 14px; padding: 12px; border: 1px solid #e8ebee; border-radius: 9px; }
.crm-accounting-form fieldset:last-of-type { margin-bottom: 0; }
.crm-accounting-form legend { padding: 0 5px; color: #5c6570; font-size: 8px; font-weight: 750; }

.crm-deal-client-profile { display: flex; align-items: center; gap: 10px; padding: 14px; border-bottom: 1px solid #eef0f2; }
.crm-client-avatar-xl { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: #23272d; color: #fff; font-size: 13px; font-weight: 760; }
.crm-deal-client-profile b { display: block; color: var(--crm-text); font-size: 10px; }
.crm-deal-client-profile small { display: block; margin-top: 2px; color: var(--crm-faint); font-size: 8px; }
.crm-deal-client-card dl, .crm-deal-control-card dl { margin: 0; padding: 4px 14px; }
.crm-deal-client-card dl div, .crm-deal-control-card dl div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid #f0f2f4; }
.crm-deal-client-card dl div:last-child, .crm-deal-control-card dl div:last-child { border-bottom: 0; }
.crm-deal-client-card dt, .crm-deal-control-card dt { color: var(--crm-muted); font-size: 8px; }
.crm-deal-client-card dd, .crm-deal-control-card dd { max-width: 165px; margin: 0; overflow: hidden; text-overflow: ellipsis; color: var(--crm-text); font-size: 8.3px; text-align: right; white-space: nowrap; }
.crm-deal-client-card dd.mono { font-size: 7px; }
.crm-card-links { display: grid; gap: 1px; padding: 7px 14px 12px; border-top: 1px solid #f0f2f4; }
.crm-card-links a { padding: 5px 0; color: var(--crm-accent); font-size: 8.2px; font-weight: 700; text-decoration: none; }

@media (max-width: 1180px) {
  .crm-deal-board { grid-template-columns: repeat(4, 260px); }
  .crm-deal-main-grid { grid-template-columns: 1fr; }
  .crm-deal-side-column { position: static; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .crm-deals-page, .crm-deal-detail-page { padding: 16px; }
  .crm-page-title-row { align-items: flex-start; flex-direction: column; }
  .crm-page-actions { justify-content: flex-start; }
  .crm-deal-metrics { grid-template-columns: 1fr 1fr; }
  .crm-deal-toolbar { align-items: stretch; flex-direction: column; }
  .crm-deal-filters { flex-wrap: wrap; }
  .crm-deal-search { width: 100%; flex-basis: 100%; }
  .crm-deal-filters select { flex: 1; }
  .crm-view-switch { align-self: flex-end; }
  .crm-deal-summary-strip { grid-template-columns: repeat(2,1fr); }
  .crm-deal-summary-strip > div:nth-child(odd) { border-left: 0; }
  .crm-deal-summary-strip > div:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.1); }
  .crm-deal-summary-strip > div:last-child { grid-column: span 2; }
  .crm-form-grid.three-cols { grid-template-columns: repeat(2,1fr); }
  .crm-form-grid.payment-grid { grid-template-columns: repeat(2,1fr); }
  .crm-finance-mini-summary { grid-template-columns: 1fr 1fr; }
  .crm-finance-mini-summary span:nth-child(odd) { border-left: 0; }
  .crm-finance-mini-summary span:nth-child(n+3) { border-top: 1px solid #edf0f2; }
}
@media (max-width: 650px) {
  .crm-deal-metrics { gap: 7px; }
  .crm-deal-metrics article { padding: 11px; }
  .crm-deal-metrics strong { font-size: 16px; }
  .crm-deal-stepper { grid-template-columns: 1fr 1fr; }
  .crm-deal-summary-strip { grid-template-columns: 1fr; }
  .crm-deal-summary-strip > div, .crm-deal-summary-strip > div:nth-child(odd) { border-left: 0; border-top: 1px solid rgba(255,255,255,.1); }
  .crm-deal-summary-strip > div:first-child { border-top: 0; }
  .crm-deal-summary-strip > div:last-child { grid-column: auto; }
  .crm-form-grid.two-cols, .crm-form-grid.three-cols, .crm-form-grid.payment-grid { grid-template-columns: 1fr; }
  .crm-span-2 { grid-column: auto; }
  .crm-form-footer { align-items: stretch; flex-direction: column; }
  .crm-deal-side-column { grid-template-columns: 1fr; }
}

/* ---------- STEP7: finance workspace ---------- */
.crm-finance-page { max-width: 1500px; margin: 0 auto; padding: 22px 24px 42px; }
.crm-finance-head { margin-bottom: 14px; }
.crm-finance-head h1 { margin: 0; color: var(--crm-text); font-size: 24px; line-height: 1.15; letter-spacing: -.02em; }
.crm-finance-head p:not(.crm-eyebrow) { margin: 6px 0 0; color: var(--crm-muted); font-size: 11px; }
.crm-rate-badge { min-height: 34px; display: inline-flex; align-items: center; padding: 0 11px; border: 1px solid #d9e3dc; border-radius: 8px; background: #f2f8f4; color: #47715e; font-size: 9px; font-weight: 800; white-space: nowrap; }

.crm-finance-filters-card { margin-bottom: 12px; padding: 11px 12px; border: 1px solid var(--crm-border); border-radius: 11px; background: #fff; box-shadow: var(--crm-shadow); }
.crm-finance-filters { display: grid; grid-template-columns: 145px minmax(210px,1.4fr) minmax(170px,1fr) minmax(170px,1fr) auto; gap: 9px; align-items: end; }
.crm-finance-filters label { min-width: 0; }
.crm-finance-filters label > span { display: block; margin-bottom: 4px; color: var(--crm-faint); font-size: 7.8px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.crm-finance-filters input, .crm-finance-filters select { width: 100%; min-height: 35px; padding: 7px 9px; border: 1px solid var(--crm-border-strong); border-radius: 8px; background: #fff; color: var(--crm-text); font: 9.5px var(--sans); outline: 0; }
.crm-finance-filters input:focus, .crm-finance-filters select:focus { border-color: #aeb5bd; box-shadow: 0 0 0 3px rgba(26,31,36,.04); }
.crm-finance-filter-actions { display: flex; gap: 6px; align-items: center; }

.crm-finance-primary-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-bottom: 10px; }
.crm-finance-primary-metrics article { min-width: 0; padding: 15px 16px; border: 1px solid var(--crm-border); border-radius: 11px; background: #fff; box-shadow: var(--crm-shadow); }
.crm-finance-primary-metrics article > span { display: block; color: var(--crm-muted); font-size: 9px; font-weight: 650; }
.crm-finance-primary-metrics strong { display: block; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; color: var(--crm-text); font-size: 20px; line-height: 1.1; letter-spacing: -.02em; }
.crm-finance-primary-metrics small { display: block; margin-top: 5px; color: var(--crm-faint); font-size: 8px; }
.crm-finance-primary-metrics .metric-warning { border-color: #f0dfbe; background: #fffdf8; }
.crm-finance-primary-metrics .metric-warning strong { color: var(--crm-warning); }
.crm-finance-primary-metrics .metric-danger { border-color: #efd3d6; background: #fffafb; }
.crm-finance-primary-metrics .metric-danger strong { color: var(--crm-danger); }

.crm-finance-secondary-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-bottom: 12px; border: 1px solid var(--crm-border); border-radius: 10px; background: #20242a; overflow: hidden; }
.crm-finance-secondary-metrics > div { min-width: 0; padding: 11px 13px; border-left: 1px solid rgba(255,255,255,.09); }
.crm-finance-secondary-metrics > div:first-child { border-left: 0; }
.crm-finance-secondary-metrics span { display: block; color: #a8aeb6; font-size: 7.8px; }
.crm-finance-secondary-metrics b { display: block; margin-top: 3px; color: #fff; font-size: 10px; }
.crm-finance-note, .crm-finance-manager-note { margin: 0 0 12px; padding: 9px 11px; border: 1px solid #eadfcb; border-radius: 8px; background: #fffaf1; color: #7d6846; font-size: 8.4px; line-height: 1.5; }
.crm-finance-manager-note { border-color: #dfe4ea; background: #f8fafb; color: var(--crm-muted); }

.crm-finance-deals-card { margin-bottom: 12px; overflow: hidden; }
.crm-finance-head-total { color: var(--crm-muted); font-size: 8.5px; }
.crm-finance-head-total b { color: var(--crm-text); }
.crm-finance-table-wrap { width: 100%; overflow-x: auto; }
.crm-finance-table { width: 100%; min-width: 1080px; border-collapse: collapse; }
.crm-finance-table th { padding: 9px 11px; border-top: 1px solid #eef0f2; border-bottom: 1px solid #e8ebee; background: #fafbfc; color: var(--crm-faint); font-size: 7.5px; font-weight: 800; text-align: right; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.crm-finance-table th:first-child, .crm-finance-table th:nth-child(2), .crm-finance-table th:nth-child(3) { text-align: left; }
.crm-finance-table td { padding: 10px 11px; border-bottom: 1px solid #f0f2f4; color: #59616a; font-size: 8.7px; text-align: right; vertical-align: middle; white-space: nowrap; }
.crm-finance-table td:first-child, .crm-finance-table td:nth-child(2), .crm-finance-table td:nth-child(3) { text-align: left; }
.crm-finance-table tbody tr:hover { background: #fbfcfd; }
.crm-finance-table tbody tr:last-child td { border-bottom: 0; }
.crm-finance-person { display: block; max-width: 190px; }
.crm-finance-person b { display: block; overflow: hidden; text-overflow: ellipsis; color: var(--crm-text); font-size: 9.2px; }
.crm-finance-person small { display: block; margin-top: 2px; color: var(--crm-faint); font-size: 7.5px; }
.crm-finance-table .success { color: var(--crm-success); }
.crm-finance-table .danger { color: var(--crm-danger); }

.crm-finance-expenses-grid { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(280px,.55fr); gap: 12px; align-items: start; }
.crm-finance-expense-list, .crm-finance-expense-form-card { overflow: hidden; }
.crm-expense-breakdown { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid #eef0f2; border-bottom: 1px solid #eef0f2; background: #fafbfc; }
.crm-expense-breakdown > div { padding: 9px 12px; border-left: 1px solid #edf0f2; }
.crm-expense-breakdown > div:first-child { border-left: 0; }
.crm-expense-breakdown span { display: block; color: var(--crm-faint); font-size: 7.5px; }
.crm-expense-breakdown b { display: block; margin-top: 2px; color: var(--crm-text); font-size: 9px; }
.crm-expense-rows { padding: 3px 13px 7px; }
.crm-expense-row { min-height: 48px; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid #f0f2f4; }
.crm-expense-row:last-child { border-bottom: 0; }
.crm-expense-date { width: 34px; flex: 0 0 auto; color: var(--crm-faint); font: 7.7px var(--mono); }
.crm-expense-copy { min-width: 0; flex: 1; }
.crm-expense-copy b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--crm-text); font-size: 8.8px; }
.crm-expense-copy small { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--crm-faint); font-size: 7.4px; }
.crm-expense-row > strong { flex: 0 0 auto; color: var(--crm-text); font-size: 8.8px; }
.crm-finance-expense-form { display: grid; gap: 9px; padding: 13px 14px 15px; }
.crm-finance-expense-form .btn { justify-self: start; margin-top: 2px; }

@media (max-width: 1100px) {
  .crm-finance-filters { grid-template-columns: 1fr 1fr; }
  .crm-finance-filter-actions { grid-column: span 2; }
  .crm-finance-expenses-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .crm-finance-page { padding: 16px; }
  .crm-finance-primary-metrics { grid-template-columns: 1fr 1fr; }
  .crm-finance-secondary-metrics { grid-template-columns: 1fr 1fr; }
  .crm-finance-secondary-metrics > div:nth-child(odd) { border-left: 0; }
  .crm-finance-secondary-metrics > div:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.09); }
}
@media (max-width: 600px) {
  .crm-finance-primary-metrics, .crm-finance-filters { grid-template-columns: 1fr; }
  .crm-finance-filter-actions { grid-column: auto; }
  .crm-finance-secondary-metrics { grid-template-columns: 1fr; }
  .crm-finance-secondary-metrics > div { border-left: 0; border-top: 1px solid rgba(255,255,255,.09); }
  .crm-finance-secondary-metrics > div:first-child { border-top: 0; }
  .crm-expense-breakdown { grid-template-columns: 1fr; }
  .crm-expense-breakdown > div { border-left: 0; border-top: 1px solid #edf0f2; }
  .crm-expense-breakdown > div:first-child { border-top: 0; }
}

/* ---------- STEP8: managers / admin supervision ---------- */
.btn-danger { border-color: #e5c1c5; background: var(--crm-danger-soft); color: var(--crm-danger); }
.btn-danger:hover { border-color: #d99da4; background: #ffe8ea; }
.crm-managers-page, .crm-manager-detail-page { max-width: 1500px; margin: 0 auto; padding: 22px 24px 42px; }
.crm-managers-head, .crm-manager-profile-head { margin-bottom: 14px; }
.crm-managers-head h1, .crm-manager-profile-head h1 { margin: 0; color: var(--crm-text); font-size: 24px; line-height: 1.15; letter-spacing: -.02em; }
.crm-managers-head p:not(.crm-eyebrow), .crm-manager-profile-head p:not(.crm-eyebrow) { margin: 5px 0 0; color: var(--crm-muted); font-size: 10.5px; }

.crm-manager-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-bottom: 10px; }
.crm-manager-metrics.six { grid-template-columns: repeat(6,minmax(0,1fr)); }
.crm-manager-metrics article { min-width: 0; padding: 14px 15px; border: 1px solid var(--crm-border); border-radius: 11px; background: #fff; box-shadow: var(--crm-shadow); }
.crm-manager-metrics article > span { display: block; color: var(--crm-muted); font-size: 8.5px; font-weight: 650; }
.crm-manager-metrics strong { display: block; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; color: var(--crm-text); font-size: 18px; line-height: 1.1; white-space: nowrap; }
.crm-manager-metrics small { display: block; margin-top: 4px; color: var(--crm-faint); font-size: 7.6px; }
.crm-manager-metrics .metric-warning { border-color: #f0dfbe; background: #fffdf8; }
.crm-manager-metrics .metric-warning strong { color: var(--crm-warning); }
.crm-manager-metrics .metric-danger { border-color: #efd3d6; background: #fffafb; }
.crm-manager-metrics .metric-danger strong { color: var(--crm-danger); }

.crm-team-alerts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-bottom: 12px; border: 1px solid var(--crm-border); border-radius: 10px; background: #20242a; overflow: hidden; }
.crm-team-alerts > * { min-width: 0; padding: 10px 13px; border-left: 1px solid rgba(255,255,255,.09); color: #fff; text-decoration: none; }
.crm-team-alerts > *:first-child { border-left: 0; }
.crm-team-alerts span, .crm-team-alerts small { display: block; color: #a8aeb6; font-size: 7.5px; }
.crm-team-alerts b { display: block; margin: 3px 0 2px; color: #fff; font-size: 11px; }
.crm-team-alerts b.danger { color: #ff9da5; }
.crm-team-alerts a:hover { background: rgba(255,255,255,.035); }

.crm-managers-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 12px; align-items: start; }
.crm-manager-list-card, .crm-manager-create-card { overflow: hidden; }
.crm-manager-create-card { position: sticky; top: 76px; }
.crm-manager-table-wrap { width: 100%; overflow-x: auto; }
.crm-manager-table { width: 100%; min-width: 1060px; border-collapse: collapse; }
.crm-manager-table th { padding: 9px 11px; border-top: 1px solid #eef0f2; border-bottom: 1px solid #e8ebee; background: #fafbfc; color: var(--crm-faint); font-size: 7.3px; font-weight: 800; text-align: left; text-transform: uppercase; letter-spacing: .045em; white-space: nowrap; }
.crm-manager-table td { padding: 10px 11px; border-bottom: 1px solid #f0f2f4; color: #59616a; font-size: 8.6px; vertical-align: middle; }
.crm-manager-table tr:last-child td { border-bottom: 0; }
.crm-manager-table tr:hover { background: #fbfcfd; }
.crm-manager-table tr.is-disabled { opacity: .58; background: #fafafa; }
.crm-manager-table td > b { display: block; color: var(--crm-text); font-size: 9px; }
.crm-manager-table td > small { display: block; margin-top: 2px; color: var(--crm-faint); font-size: 7.3px; white-space: nowrap; }
.crm-manager-table .success { color: var(--crm-success); }
.crm-manager-table .warning { color: var(--crm-warning); }
.crm-manager-table .danger { color: var(--crm-danger); }
.crm-manager-person { min-width: 170px; display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.crm-manager-person > span:last-child { min-width: 0; }
.crm-manager-person b { display: block; overflow: hidden; text-overflow: ellipsis; color: var(--crm-text); font-size: 9.2px; white-space: nowrap; }
.crm-manager-person small { display: block; margin-top: 2px; color: var(--crm-faint); font-size: 7.3px; white-space: nowrap; }
.crm-manager-person i { font-style: normal; }
.status-online { color: var(--crm-success); }
.status-offline { color: var(--crm-danger); }
.crm-manager-avatar { width: 31px; height: 31px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; background: #eef1f4; color: #4d5660; font-size: 10px; font-weight: 800; }
.crm-manager-avatar-xl { width: 44px; height: 44px; border-radius: 12px; font-size: 15px; }
.crm-manager-form { display: grid; gap: 9px; padding: 13px 14px 15px; }
.crm-manager-form input, .crm-manager-form select, .crm-manager-form textarea { width: 100%; min-height: 35px; box-sizing: border-box; padding: 7px 9px; border: 1px solid var(--crm-border-strong); border-radius: 8px; background: #fff; color: var(--crm-text); font: 9.5px var(--sans); outline: none; }
.crm-manager-form input:focus, .crm-manager-form select:focus, .crm-manager-form textarea:focus { border-color: #aeb5bd; box-shadow: 0 0 0 3px rgba(26,31,36,.04); }
.crm-manager-form .btn { justify-self: start; }
.crm-manager-rule { margin: 0 14px 14px; padding: 10px 11px; border: 1px solid #e1e5e9; border-radius: 8px; background: #f8fafb; }
.crm-manager-rule b, .crm-manager-rule span { display: block; }
.crm-manager-rule b { color: var(--crm-text); font-size: 8.3px; }
.crm-manager-rule span { margin-top: 3px; color: var(--crm-muted); font-size: 7.7px; line-height: 1.45; }
.crm-form-error { padding: 8px 9px; border-radius: 7px; background: var(--crm-danger-soft); color: var(--crm-danger); font-size: 8px; }

.crm-manager-profile-title { min-width: 0; display: flex; align-items: center; gap: 10px; }
.crm-manager-profile-title > div { min-width: 0; }
.crm-access-badge { min-height: 34px; display: inline-flex; align-items: center; padding: 0 11px; border: 1px solid #cfe6da; border-radius: 8px; background: var(--crm-success-soft); color: var(--crm-success); font-size: 8.2px; font-weight: 800; white-space: nowrap; }
.crm-access-badge.disabled { border-color: #efd3d6; background: var(--crm-danger-soft); color: var(--crm-danger); }
.crm-manager-workload-strip { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); margin-bottom: 12px; border: 1px solid var(--crm-border); border-radius: 10px; background: #20242a; overflow: hidden; }
.crm-manager-workload-strip > div { min-width: 0; padding: 10px 12px; border-left: 1px solid rgba(255,255,255,.09); }
.crm-manager-workload-strip > div:first-child { border-left: 0; }
.crm-manager-workload-strip span { display: block; color: #9fa6ae; font-size: 7.5px; }
.crm-manager-workload-strip b { display: block; margin-top: 3px; color: #fff; font-size: 10.5px; }
.crm-manager-workload-strip b.danger { color: #ff9da5; }
.crm-manager-workload-strip a { display: inline-block; margin-top: 4px; color: #c9ced4; font-size: 7.3px; text-decoration: none; }
.crm-manager-workload-strip a:hover { color: #fff; }
.crm-manager-detail-grid { display: grid; grid-template-columns: minmax(0,1fr) 310px; gap: 12px; align-items: start; }
.crm-manager-main-column, .crm-manager-side-column { display: grid; gap: 12px; }
.crm-manager-side-column { position: sticky; top: 76px; }
.crm-manager-activity-list, .crm-manager-deals-list, .crm-manager-chat-list { padding: 2px 13px 7px; }
.crm-manager-activity-row { min-height: 54px; display: grid; grid-template-columns: 31px minmax(0,1fr) auto 72px 14px; align-items: center; gap: 8px; border-bottom: 1px solid #f0f2f4; color: inherit; text-decoration: none; }
.crm-manager-activity-row:last-child { border-bottom: 0; }
.crm-manager-activity-row:hover { background: #fbfcfd; }
.activity-copy { min-width: 0; }
.activity-copy b, .activity-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-copy b { color: var(--crm-text); font-size: 8.9px; }
.activity-copy small { margin-top: 2px; color: var(--crm-faint); font-size: 7.4px; }
.crm-manager-activity-row time { color: var(--crm-faint); font: 7.3px var(--mono); white-space: nowrap; }
.crm-manager-activity-row > i, .crm-manager-deal-row > i, .crm-manager-chat-row > i { color: var(--crm-faint); font-style: normal; }
.crm-manager-deal-row { min-height: 56px; display: grid; grid-template-columns: minmax(150px,1.4fr) repeat(4,minmax(90px,.6fr)) 14px; align-items: center; gap: 9px; border-bottom: 1px solid #f0f2f4; color: inherit; text-decoration: none; }
.crm-manager-deal-row:last-child { border-bottom: 0; }
.crm-manager-deal-row.overdue { background: #fffafb; }
.crm-manager-deal-row .deal-person { min-width: 0; }
.crm-manager-deal-row .deal-person b, .crm-manager-deal-row .deal-person small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-manager-deal-row .deal-person b { color: var(--crm-text); font-size: 8.9px; }
.crm-manager-deal-row .deal-person small { margin-top: 2px; color: var(--crm-faint); font-size: 7.3px; }
.crm-manager-deal-row > span:not(.deal-person) small { display: block; color: var(--crm-faint); font-size: 7.1px; }
.crm-manager-deal-row > span:not(.deal-person) b { display: block; margin-top: 2px; color: var(--crm-text); font-size: 8.3px; }
.crm-manager-deal-row .warning { color: var(--crm-warning) !important; }
.crm-manager-deal-row .danger { color: var(--crm-danger) !important; }
.crm-manager-chat-row { min-height: 50px; display: grid; grid-template-columns: 31px minmax(0,1fr) 14px; align-items: center; gap: 8px; border-bottom: 1px solid #f0f2f4; color: inherit; text-decoration: none; }
.crm-manager-chat-row:last-child { border-bottom: 0; }
.crm-manager-chat-row b, .crm-manager-chat-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-manager-chat-row b { color: var(--crm-text); font-size: 8.8px; }
.crm-manager-chat-row small { margin-top: 2px; color: var(--crm-faint); font-size: 7.3px; }
.crm-access-card.disabled { border-color: #e8d0d3; }

@media (max-width: 1180px) {
  .crm-manager-metrics.six { grid-template-columns: repeat(3,1fr); }
  .crm-managers-layout, .crm-manager-detail-grid { grid-template-columns: 1fr; }
  .crm-manager-create-card, .crm-manager-side-column { position: static; }
  .crm-manager-side-column { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 900px) {
  .crm-managers-page, .crm-manager-detail-page { padding: 16px; }
  .crm-manager-metrics { grid-template-columns: 1fr 1fr; }
  .crm-team-alerts, .crm-manager-workload-strip { grid-template-columns: 1fr 1fr; }
  .crm-team-alerts > *, .crm-manager-workload-strip > div { border-top: 1px solid rgba(255,255,255,.09); }
  .crm-team-alerts > *:nth-child(odd), .crm-manager-workload-strip > div:nth-child(odd) { border-left: 0; }
  .crm-team-alerts > *:first-child, .crm-team-alerts > *:nth-child(2), .crm-manager-workload-strip > div:first-child, .crm-manager-workload-strip > div:nth-child(2) { border-top: 0; }
  .crm-manager-side-column { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .crm-manager-metrics, .crm-manager-metrics.six { grid-template-columns: 1fr 1fr; }
  .crm-team-alerts, .crm-manager-workload-strip { grid-template-columns: 1fr; }
  .crm-team-alerts > *, .crm-manager-workload-strip > div { border-left: 0; border-top: 1px solid rgba(255,255,255,.09); }
  .crm-team-alerts > *:first-child, .crm-manager-workload-strip > div:first-child { border-top: 0; }
  .crm-team-alerts > *:nth-child(2), .crm-manager-workload-strip > div:nth-child(2) { border-top: 1px solid rgba(255,255,255,.09); }
  .crm-manager-activity-row { grid-template-columns: 31px minmax(0,1fr) auto 14px; }
  .crm-manager-activity-row time { display: none; }
}

/* -------------------------------------------------------------------------
   Reports / analytics (STEP9)
   ------------------------------------------------------------------------- */
.crm-reports-page{display:flex;flex-direction:column;gap:18px;min-width:0}.crm-reports-head{align-items:flex-end}.crm-report-filters{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr)) auto auto;gap:10px;align-items:end;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}.crm-report-filters label{display:flex;flex-direction:column;gap:6px;min-width:0}.crm-report-filters label>span{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--crm-muted)}.crm-report-filters input,.crm-report-filters select{width:100%;height:40px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--crm-text);padding:0 10px}.crm-filter-reset{height:40px;display:inline-flex;align-items:center;color:var(--crm-muted);font-size:13px;font-weight:700;text-decoration:none}.crm-filter-reset:hover{color:var(--crm-text)}.crm-report-scope-note{display:flex;gap:8px;align-items:center;padding:10px 14px;border:1px solid #f0d5a5;background:#fffaf0;border-radius:12px;font-size:13px;color:#785b26}.crm-report-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.crm-report-kpis article{min-width:0;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:0 1px 2px rgba(16,24,40,.02)}.crm-report-kpis article>span{display:block;font-size:12px;font-weight:700;color:var(--crm-muted);margin-bottom:8px}.crm-report-kpis article strong{display:block;font-size:25px;line-height:1.05;letter-spacing:-.03em;color:var(--crm-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.crm-report-kpis article small{display:block;margin-top:8px;font-size:11px;color:var(--crm-muted)}.crm-report-kpis .metric-warning{border-color:#f1d2a4;background:#fffaf2}.crm-report-kpis .metric-danger{border-color:#efc0c0;background:#fff7f7}.crm-report-money-strip{display:flex;align-items:stretch;overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface)}.crm-report-money-strip>div{min-width:150px;flex:1;padding:12px 16px;border-right:1px solid var(--line)}.crm-report-money-strip>div:last-child{border-right:0}.crm-report-money-strip span{display:block;font-size:11px;color:var(--crm-muted);margin-bottom:4px}.crm-report-money-strip b{font-size:13px;color:var(--crm-text);white-space:nowrap}.crm-progress{appearance:none;-webkit-appearance:none;width:100%;height:8px;border:0;border-radius:999px;overflow:hidden;background:#f0f2f5}.crm-progress::-webkit-progress-bar{background:#f0f2f5;border-radius:999px}.crm-progress::-webkit-progress-value{background:#d55a43;border-radius:999px}.crm-progress::-moz-progress-bar{background:#d55a43;border-radius:999px}.crm-progress-thin{height:4px;margin-top:7px}.crm-report-trend-card{overflow:hidden}.crm-trend-chart{display:flex;flex-direction:column;gap:10px;padding:6px 0 2px}.crm-trend-row{display:grid;grid-template-columns:72px minmax(120px,1fr) 120px 88px;gap:12px;align-items:center}.crm-trend-row>b{font-size:12px}.crm-trend-row>strong{font-size:12px;text-align:right}.crm-trend-row>small{font-size:10px;color:var(--crm-muted);text-align:right;white-space:nowrap}.crm-report-grid-two{display:grid;grid-template-columns:1fr 1fr;gap:14px;min-width:0}.crm-funnel-report{display:flex;flex-direction:column;gap:14px;margin-top:4px}.crm-funnel-line{display:grid;grid-template-columns:105px minmax(80px,1fr) 36px 48px;gap:10px;align-items:center}.crm-funnel-name{font-size:12px;font-weight:700}.crm-funnel-line>b{font-size:13px;text-align:right}.crm-funnel-line>small{font-size:11px;color:var(--crm-muted);text-align:right}.crm-source-report{display:flex;flex-direction:column;gap:15px}.crm-source-row{display:flex;flex-direction:column;gap:7px}.crm-source-top,.crm-source-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px}.crm-source-top b{font-size:13px}.crm-source-top span,.crm-source-bottom span{font-size:11px;color:var(--crm-muted)}.crm-source-bottom strong{font-size:12px}.crm-report-table-card{min-width:0;overflow:hidden}.crm-report-table td>b{display:block}.crm-report-table td>small{display:block;margin-top:3px;color:var(--crm-muted);font-size:10px}.crm-report-service,.crm-report-manager{min-width:135px}.crm-report-service>b,.crm-report-manager>b{display:block;font-size:12px}.crm-report-manager>small{display:block;font-size:10px;color:var(--crm-muted);margin-top:2px}.crm-report-service .crm-progress,.crm-report-manager .crm-progress{width:110px}.crm-empty-state{color:var(--crm-muted);font-size:13px;padding:20px 0}
@media(max-width:1280px){.crm-report-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.crm-report-filters{grid-template-columns:repeat(2,minmax(160px,1fr)) auto auto}}
@media(max-width:900px){.crm-report-grid-two{grid-template-columns:1fr}.crm-report-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.crm-report-filters{grid-template-columns:1fr 1fr}.crm-report-filters .btn,.crm-filter-reset{width:100%;justify-content:center}.crm-reports-head{align-items:flex-start}.crm-trend-row{grid-template-columns:64px minmax(100px,1fr) 100px}.crm-trend-row>small{display:none}}
@media(max-width:620px){.crm-report-kpis{grid-template-columns:1fr 1fr}.crm-report-kpis article strong{font-size:21px}.crm-report-filters{grid-template-columns:1fr}.crm-report-scope-note{align-items:flex-start;flex-direction:column}.crm-funnel-line{grid-template-columns:90px 1fr 28px}.crm-funnel-line>small{display:none}.crm-report-money-strip>div{min-width:135px}.crm-trend-row{grid-template-columns:58px 1fr 84px;gap:8px}.crm-trend-row>strong{font-size:11px}}

/* ===== STEP10: tasks, AI control, encrypted files, audit ===== */
.crm-tasks-page,.crm-ai-page,.crm-audit-page{max-width:1500px;margin:0 auto;padding:28px 30px 64px}.crm-task-metrics,.crm-ai-health-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0}.crm-task-metrics article,.crm-ai-health-grid article{background:var(--surface,#fff);border:1px solid var(--line,#e6e8ec);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:6px}.crm-task-metrics span,.crm-ai-health-grid span{font-size:12px;color:var(--ink-faint,#707784)}.crm-task-metrics b,.crm-ai-health-grid b{font-size:24px;line-height:1.1}.crm-ai-health-grid small{color:var(--ink-faint,#707784);overflow:hidden;text-overflow:ellipsis}.health-ok{box-shadow:inset 0 3px 0 #1f9d63}.health-warn{box-shadow:inset 0 3px 0 #d9911b}.health-bad{box-shadow:inset 0 3px 0 #cf3f3f}.crm-task-filters,.crm-audit-filter{display:flex;gap:10px;flex-wrap:wrap;align-items:end}.crm-task-filters input,.crm-task-filters select,.crm-audit-filter input{min-height:42px;border:1px solid var(--line,#dfe3e8);border-radius:10px;background:#fff;padding:0 12px}.crm-task-filters input{min-width:280px;flex:1}.crm-task-layout,.crm-ai-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;margin-top:18px}.crm-ai-layout{grid-template-columns:minmax(0,1.7fr) minmax(330px,.75fr);align-items:start}.crm-ai-main,.crm-ai-side{display:grid;gap:18px}.crm-task-create-card{position:sticky;top:82px;align-self:start}.crm-task-worklist{display:grid}.crm-task-workrow{display:grid;grid-template-columns:6px minmax(0,1fr) auto auto auto;gap:12px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line,#eceef1)}.crm-task-workrow:last-child{border-bottom:0}.crm-task-workrow.is-overdue{background:linear-gradient(90deg,rgba(207,63,63,.055),transparent)}.crm-task-priority{width:5px;height:42px;border-radius:999px;background:#a8adb5}.crm-task-priority.priority-high{background:#d9911b}.crm-task-priority.priority-urgent{background:#cf3f3f}.crm-task-priority.priority-low{background:#6d91bb}.crm-task-workcopy{min-width:0}.crm-task-workcopy>b{display:block;font-size:14px;margin-bottom:3px}.crm-task-workcopy>small{color:var(--ink-faint,#747b86)}.crm-task-workcopy>p{margin:7px 0 0;color:var(--ink-dim,#4f5661);font-size:13px}.crm-task-links{display:flex;gap:12px;margin-top:7px}.crm-task-links a{font-size:12px;font-weight:650}.crm-task-status{font-size:12px;border:1px solid var(--line,#dfe3e8);padding:6px 8px;border-radius:999px;white-space:nowrap}.crm-task-quick-form{display:grid;grid-template-columns:minmax(220px,1fr) 190px 130px auto;gap:10px}.crm-task-quick-form input,.crm-task-quick-form select{min-height:42px;border:1px solid var(--line,#dfe3e8);border-radius:10px;background:#fff;padding:0 11px}.crm-ai-kb-list{display:grid;gap:10px}.crm-ai-kb-list details{border:1px solid var(--line,#e2e5e9);border-radius:12px;padding:12px}.crm-ai-kb-list summary{cursor:pointer;display:flex;justify-content:space-between;gap:12px}.crm-ai-kb-list summary span{font-size:12px;color:var(--ink-faint,#747b86)}.crm-ai-kb-add{border-top:1px solid var(--line,#e2e5e9);margin-top:18px;padding-top:18px}.crm-ai-test-card{position:sticky;top:82px}.crm-ai-test-result{margin-top:14px;background:#f6f8fb;border:1px solid #e0e5eb;border-radius:12px;padding:14px}.crm-ai-test-result>small{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#6e7681}.crm-ai-test-result>p{white-space:pre-wrap;margin:7px 0 13px}.crm-ai-test-result dl,.crm-ai-status-list{display:grid;gap:8px;margin:0}.crm-ai-test-result dl div,.crm-ai-status-list div{display:flex;justify-content:space-between;gap:14px;border-top:1px solid #e6e9ed;padding-top:8px}.crm-ai-test-result dt,.crm-ai-status-list dt{font-size:12px;color:#737b86}.crm-ai-test-result dd,.crm-ai-status-list dd{margin:0;font-size:12px;text-align:right;word-break:break-word}.crm-ai-test-error{margin-top:12px;border:1px solid #e5b5b5;background:#fff5f5;color:#8f2222;padding:10px;border-radius:10px;font-size:12px;white-space:pre-wrap;word-break:break-word}.crm-doc-files{display:flex;flex-wrap:wrap;gap:7px;margin-top:7px}.crm-doc-file{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line,#dfe3e8);background:#f7f8fa;border-radius:8px;padding:5px 7px;max-width:100%}.crm-doc-file a{font-size:12px;font-weight:650;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.crm-doc-file small{font-size:10px;color:#737b86}.crm-doc-file form{display:inline}.crm-doc-file button{border:0;background:transparent;color:#a43a3a;cursor:pointer;font-size:15px;padding:0 2px}.crm-doc-upload input[type=file]{display:none}.crm-doc-upload label{cursor:pointer}.crm-audit-table-wrap{overflow:auto;max-height:70vh}.crm-audit-table{width:100%;border-collapse:collapse;font-size:12px}.crm-audit-table th,.crm-audit-table td{text-align:left;vertical-align:top;border-bottom:1px solid var(--line,#e5e8ec);padding:10px}.crm-audit-table th{position:sticky;top:0;background:#fff;z-index:1}.crm-audit-table code{font-size:11px}.crm-audit-table pre{margin:0;max-width:600px;white-space:pre-wrap;word-break:break-word;font:11px/1.4 var(--mono,monospace);color:#525966}.metric-danger{box-shadow:inset 0 3px 0 #cf3f3f!important}
@media (max-width:1100px){.crm-task-layout,.crm-ai-layout{grid-template-columns:1fr}.crm-task-create-card,.crm-ai-test-card{position:static}.crm-ai-health-grid{grid-template-columns:repeat(2,1fr)}.crm-task-quick-form{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.crm-tasks-page,.crm-ai-page,.crm-audit-page{padding:18px 14px 50px}.crm-task-metrics,.crm-ai-health-grid{grid-template-columns:1fr 1fr}.crm-task-workrow{grid-template-columns:5px 1fr;align-items:start}.crm-task-workrow>.crm-task-status,.crm-task-workrow>form{grid-column:2}.crm-task-quick-form{grid-template-columns:1fr}.crm-task-filters input{min-width:100%}.crm-audit-filter input{width:100%}}
.crm-attention-card{margin-top:18px;border-left:3px solid #d9911b}.crm-attention-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.crm-attention-grid a{display:flex;justify-content:space-between;gap:12px;border:1px solid var(--line,#e3e6ea);border-radius:10px;padding:11px 12px;background:#fff}.crm-attention-grid b{font-size:13px}.crm-attention-grid span{font-size:12px;color:#7a5b1b;white-space:nowrap}@media(max-width:720px){.crm-attention-grid{grid-template-columns:1fr}.crm-attention-grid a{flex-direction:column;gap:3px}}
.crm-doc-upload{display:flex;align-items:center;gap:6px}.crm-doc-file-input{max-width:180px;font-size:11px}.crm-doc-file-input::file-selector-button{border:1px solid var(--line,#dfe3e8);background:#fff;border-radius:7px;padding:5px 7px;margin-right:6px;cursor:pointer}
.crm-settings-page{max-width:1500px;margin:0 auto;padding:28px 30px 64px}.crm-settings-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0}.crm-settings-cards article{border:1px solid var(--line,#e3e6ea);background:#fff;border-radius:16px;padding:17px;display:flex;flex-direction:column;gap:5px}.crm-settings-cards span,.crm-settings-cards small{font-size:12px;color:#737b86}.crm-settings-cards b{font-size:20px}.crm-settings-table-wrap{overflow:auto}.crm-settings-table{width:100%;border-collapse:collapse;font-size:13px}.crm-settings-table th,.crm-settings-table td{padding:11px;border-bottom:1px solid var(--line,#e5e8ec);text-align:left;vertical-align:top}.crm-settings-table th{color:#68717c;font-size:11px;text-transform:uppercase;letter-spacing:.04em}.crm-settings-add{margin-top:18px}.crm-settings-checks{display:flex;gap:20px;flex-wrap:wrap;margin:14px 0}.crm-settings-security{margin-top:18px}.crm-settings-security-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.crm-settings-security-grid>div{border:1px solid var(--line,#e3e6ea);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:4px}.crm-settings-security-grid span{font-size:12px;color:#737b86}@media(max-width:800px){.crm-settings-page{padding:18px 14px 50px}.crm-settings-cards{grid-template-columns:1fr}.crm-settings-security-grid{grid-template-columns:1fr}}

.crm-ai-diagnostic{margin:12px 0;padding:11px 12px;border:1px solid var(--line,#e5e7eb);border-radius:12px;display:grid;gap:3px;font-size:13px}.crm-ai-diagnostic span{color:var(--muted,#667085);font-size:12px}.crm-ai-diagnostic.diagnostic-ok{background:#f0fdf4;border-color:#bbf7d0}.crm-ai-diagnostic.diagnostic-bad{background:#fff7ed;border-color:#fed7aa}.crm-ai-diagnostic.diagnostic-pending{background:#f8fafc;border-color:#cbd5e1}

.crm-ai-run-list{display:grid;gap:8px;margin-top:14px}.crm-ai-run{border:1px solid var(--line,#e5e7eb);border-radius:12px;overflow:hidden;background:#fff}.crm-ai-run>summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:10px;padding:10px 12px;font-size:13px}.crm-ai-run>summary::-webkit-details-marker{display:none}.crm-ai-run>summary small{color:var(--muted,#667085)}.crm-ai-run-body{border-top:1px solid var(--line,#e5e7eb);padding:12px}.crm-ai-run-body>small{color:var(--muted,#667085);text-transform:uppercase;letter-spacing:.04em;font-size:10px}.crm-ai-run-body>p{margin:4px 0 12px;white-space:pre-wrap}.crm-ai-run-body dl{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}.crm-ai-run-body dl div{background:#f8fafc;border-radius:8px;padding:7px}.crm-ai-run-body dt{font-size:10px;color:var(--muted,#667085)}.crm-ai-run-body dd{margin:2px 0 0;font-size:12px;font-weight:700}

/* ===== STEP11: navigation + tasks + reports + AI visual refinement ===== */
.crm-sidebar{
  padding:16px 12px 12px;
  overflow:hidden;
}
.crm-brand{padding:2px 10px 14px;flex:0 0 auto}
.crm-nav{
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:3px;
  scrollbar-width:thin;
  scrollbar-color:#d9dde3 transparent;
}
.crm-nav::-webkit-scrollbar{width:5px}
.crm-nav::-webkit-scrollbar-thumb{background:#d9dde3;border-radius:999px}
.crm-nav-group{gap:2px;margin-bottom:14px;flex:0 0 auto}
.crm-nav-bottom{margin-top:0;margin-bottom:4px}
.crm-nav-label{padding:0 10px 5px;font-size:9px;letter-spacing:.12em}
.crm-nav-item{
  min-height:38px;
  gap:9px;
  padding:7px 9px;
  border-radius:9px;
  font-size:12.5px;
  font-weight:650;
}
.crm-nav-item.active{background:#fff0ea;color:#c44725;box-shadow:inset 2px 0 0 #e4572e}
.crm-nav-icon{width:20px;height:20px;font-size:0;flex:0 0 20px}
.crm-nav-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.crm-nav-badge{min-width:19px;height:19px;padding:0 5px;font-size:9px}
.crm-user-card{
  flex:0 0 auto;
  margin-top:8px;
  padding:10px 8px 2px;
  background:#fff;
  position:relative;
  z-index:2;
}
.crm-user-avatar{width:34px;height:34px}
.crm-user-copy strong{font-size:11.5px}
.crm-user-copy span{font-size:9.5px}

/* Common page rhythm */
.crm-tasks-page,.crm-ai-page,.crm-audit-page,.crm-reports-page{
  width:100%;
  max-width:1380px;
  margin:0 auto;
  padding:30px 0 54px;
  box-sizing:border-box;
}
.crm-page-title-row{margin-bottom:20px}
.crm-page-title-row h1{font-size:26px;letter-spacing:-.035em}
.crm-page-title-row p:not(.crm-eyebrow){font-size:12px;line-height:1.5}
.crm-detail-card{border-radius:14px;box-shadow:0 1px 2px rgba(22,28,36,.035),0 8px 24px rgba(22,28,36,.025)}
.crm-detail-card-head{min-height:64px;padding:14px 18px}
.crm-detail-card-head h2,.crm-card-head h2{font-size:13px}
.crm-detail-card-head p,.crm-card-head p{font-size:10.5px;line-height:1.45}

/* Tasks */
.crm-task-metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 14px}
.crm-task-metrics article{border-radius:14px;padding:16px 18px;gap:4px;min-height:104px;justify-content:center}
.crm-task-metrics span{font-size:11.5px;font-weight:650}
.crm-task-metrics b{font-size:29px;letter-spacing:-.04em;margin-top:3px}
.crm-task-metrics small{font-size:9.5px;color:var(--crm-faint)}
.crm-task-toolbar{margin-bottom:14px;padding:14px;border:1px solid var(--crm-border);border-radius:14px;background:#fff;box-shadow:var(--crm-shadow)}
.crm-task-filters{display:grid;grid-template-columns:minmax(260px,1.5fr) minmax(160px,.6fr) minmax(160px,.6fr) auto auto;gap:10px;align-items:end}
.crm-task-filters label{display:flex;flex-direction:column;gap:6px;min-width:0}
.crm-task-filters label>span{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--crm-faint)}
.crm-task-filters input,.crm-task-filters select{width:100%;min-width:0!important;height:40px;min-height:40px!important;border:1px solid var(--crm-border-strong)!important;border-radius:9px!important;padding:0 11px!important;font-size:12px;background:#fff}
.crm-task-filters .btn{height:40px;min-height:40px;padding:0 16px;white-space:nowrap}
.crm-task-filters .crm-filter-reset{height:40px;padding:0 6px;display:flex;align-items:center;justify-content:center;font-size:11px}
.crm-task-layout{grid-template-columns:minmax(0,1.7fr) minmax(330px,.72fr);gap:14px;margin-top:0;align-items:start}
.crm-task-create-card{top:80px}
.crm-task-list-counter{min-width:29px;height:29px;display:grid;place-items:center;border-radius:8px;background:#f4f6f8;color:var(--crm-muted);font-size:11px;font-weight:800}
.crm-task-worklist{padding:0 18px}
.crm-task-workrow{grid-template-columns:5px minmax(0,1fr) auto auto auto;gap:10px;padding:14px 0}
.crm-task-workcopy>b{font-size:12.5px}
.crm-task-workcopy>small{font-size:10px;line-height:1.4}
.crm-task-workcopy>p{font-size:11px;line-height:1.5}
.crm-task-status{font-size:10px;padding:5px 8px}
.crm-task-workrow .btn{min-height:32px;height:32px;padding:0 10px;font-size:10px}
.crm-task-empty{min-height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:36px 20px;color:var(--crm-muted)}
.crm-task-empty>span{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:#f4f6f8;color:#9299a3;font-size:18px;margin-bottom:12px}
.crm-task-empty>b{color:var(--crm-text);font-size:13px;margin-bottom:4px}
.crm-task-empty>p{max-width:370px;margin:0;font-size:10.5px;line-height:1.55}
.crm-task-create-card .crm-detail-form{padding:16px 18px 18px}
.crm-task-create-card .crm-form-field{margin-bottom:12px}
.crm-task-create-card .crm-form-field label{font-size:10px}
.crm-task-create-card input,.crm-task-create-card select,.crm-task-create-card textarea{font-size:12px}

/* Reports */
.crm-reports-page{display:flex;flex-direction:column;gap:14px}
.crm-reports-head{margin-bottom:2px}
.crm-report-filters{grid-template-columns:repeat(4,minmax(140px,1fr)) auto auto;gap:9px;padding:13px 14px;border-radius:14px;box-shadow:var(--crm-shadow)}
.crm-report-filters label>span{font-size:9px;color:var(--crm-faint)}
.crm-report-filters input,.crm-report-filters select{height:38px;border-radius:9px;font-size:11px}
.crm-report-filters .btn{height:38px;min-height:38px;font-size:11px;padding:0 15px}
.crm-filter-reset{height:38px;font-size:10.5px}
.crm-report-kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.crm-report-kpis article{padding:15px 16px;border-radius:13px;min-height:112px}
.crm-report-kpis article>span{font-size:10.5px;margin-bottom:7px}
.crm-report-kpis article strong{font-size:24px}
.crm-report-kpis article small{font-size:9.5px;line-height:1.4}
.crm-report-money-strip{border-radius:13px;overflow-x:auto}
.crm-report-money-strip>div{min-width:140px;padding:11px 14px}
.crm-report-money-strip span{font-size:9.5px}
.crm-report-money-strip b{font-size:11.5px}
.crm-report-trend-card,.crm-report-grid-two>.crm-detail-card,.crm-report-table-card{overflow:hidden}
.crm-report-trend-card .crm-card-head,.crm-report-grid-two .crm-card-head,.crm-report-table-card .crm-card-head{padding:14px 17px;border-bottom:1px solid var(--crm-border);min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.crm-trend-chart{padding:16px 18px 18px;gap:11px}
.crm-trend-row{grid-template-columns:60px minmax(160px,1fr) 110px 82px;gap:10px}
.crm-trend-row>b,.crm-trend-row>strong{font-size:10.5px}
.crm-trend-row>small{font-size:9.5px}
.crm-report-grid-two{gap:12px}
.crm-funnel-report,.crm-source-report{padding:16px 18px 18px;margin:0}
.crm-funnel-report{gap:12px}.crm-source-report{gap:12px}
.crm-funnel-name,.crm-source-top b{font-size:11px}
.crm-source-top span,.crm-source-bottom span,.crm-source-bottom strong{font-size:9.5px}
.crm-manager-table-wrap{width:100%;overflow-x:auto}
.crm-report-table{min-width:850px}
.crm-report-table th{font-size:8.5px!important;white-space:nowrap}
.crm-report-table td{font-size:10.5px!important;white-space:nowrap}
.crm-report-service>b,.crm-report-manager>b{font-size:10.5px}
.crm-report-manager>small,.crm-report-table td>small{font-size:8.5px}
.crm-report-service,.crm-report-manager{min-width:120px}
.crm-report-service .crm-progress,.crm-report-manager .crm-progress{width:95px}
.crm-finance-head-total{font-size:9.5px;color:var(--crm-muted);white-space:nowrap}

/* AI + Instagram */
.crm-ai-health-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 14px}
.crm-ai-health-grid article{border-radius:13px;padding:15px 16px;min-height:105px;justify-content:center;gap:4px}
.crm-ai-health-grid span{font-size:10.5px;font-weight:650}
.crm-ai-health-grid b{font-size:20px;letter-spacing:-.025em}
.crm-ai-health-grid small{font-size:9.5px;white-space:nowrap}
.crm-ai-layout{grid-template-columns:minmax(0,1.45fr) minmax(360px,.8fr);gap:14px;margin-top:0}
.crm-ai-main,.crm-ai-side{gap:14px}
.crm-ai-page .crm-detail-form{padding:16px 18px 18px}
.crm-ai-page .crm-form-field{margin-bottom:12px}
.crm-ai-page .crm-form-field label{font-size:10px;font-weight:700;color:var(--crm-muted)}
.crm-ai-page input,.crm-ai-page select,.crm-ai-page textarea{font-size:11.5px}
.crm-ai-page textarea{line-height:1.55}
.crm-ai-page .check{font-size:11px}
.crm-ai-kb-list{padding:14px 18px 0;gap:8px}
.crm-ai-kb-list details{border-radius:10px;padding:11px 12px;background:#fbfcfd}
.crm-ai-kb-list summary b{font-size:11px}
.crm-ai-kb-list summary span{font-size:9.5px}
.crm-ai-kb-add{margin:14px 18px 0;padding-top:16px!important}
.crm-ai-test-card{top:80px}
.crm-ai-run-list{padding:0 18px 18px;margin-top:0}
.crm-ai-run{border-radius:10px}
.crm-ai-run>summary{font-size:10.5px;padding:9px 10px}
.crm-ai-status-list{padding:4px 18px 14px;gap:0}
.crm-ai-status-list div{display:grid!important;grid-template-columns:125px minmax(0,1fr);align-items:start;gap:12px;padding:10px 0!important;border-top:1px solid #edf0f3!important}
.crm-ai-status-list div:first-child{border-top:0!important}
.crm-ai-status-list dt{font-size:10px!important}
.crm-ai-status-list dd{font-size:10.5px!important;line-height:1.45;text-align:right!important;overflow-wrap:anywhere}
.crm-ai-side>.crm-detail-card>form:not(.crm-detail-form){padding:0 18px 4px}
.crm-ai-side>.crm-detail-card>.hint{margin:8px 18px 18px;font-size:9.5px;line-height:1.5;color:var(--crm-faint)}
.crm-ai-diagnostic{margin:10px 18px;font-size:10.5px}.crm-ai-diagnostic span{font-size:9.5px}
.crm-ai-test-error{margin:10px 18px;font-size:10.5px}

@media(max-width:1200px){
  .crm-task-filters{grid-template-columns:minmax(220px,1fr) 150px 150px auto}
  .crm-task-filters .crm-filter-reset{grid-column:1/-1;justify-content:flex-start;height:auto}
  .crm-ai-layout{grid-template-columns:1fr}
  .crm-ai-test-card{position:static}
}
@media(max-width:1000px){
  .crm-report-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .crm-report-filters{grid-template-columns:1fr 1fr}
  .crm-task-layout{grid-template-columns:1fr}
  .crm-task-create-card{position:static}
}
@media(max-width:720px){
  .crm-tasks-page,.crm-ai-page,.crm-audit-page,.crm-reports-page{padding:18px 0 40px}
  .crm-task-metrics,.crm-ai-health-grid{grid-template-columns:1fr 1fr}
  .crm-task-filters{grid-template-columns:1fr}
  .crm-task-filters .crm-filter-reset{grid-column:auto}
  .crm-task-worklist{padding:0 14px}
  .crm-report-kpis{grid-template-columns:1fr 1fr}
  .crm-report-grid-two{grid-template-columns:1fr}
}

/* STEP13: explicit, admin-only destructive actions */
.crm-chat-action.danger { border-color: #efc9ce; color: var(--crm-danger); background: #fffafb; }
.crm-chat-action.danger:hover { background: var(--crm-danger-soft); }
.crm-danger-zone > b { display: block; color: var(--crm-danger); font-size: 10px; font-weight: 800; }
.crm-danger-zone-flat { margin: 0; }
.crm-delete-page { min-height: calc(100vh - 120px); display: grid; place-items: start center; padding: 54px 20px; }
.crm-delete-card { width: min(620px, 100%); border: 1px solid #efd4d8; border-radius: 16px; background: #fff; box-shadow: 0 18px 45px rgba(31, 38, 46, .08); padding: 28px; }
.crm-delete-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 18px; background: var(--crm-danger-soft); color: var(--crm-danger); font-weight: 900; font-size: 18px; }
.crm-delete-card h1 { margin: 3px 0 7px; font-size: 25px; line-height: 1.15; }
.crm-delete-target { margin: 0 0 18px; color: #354052; font-weight: 750; }
.crm-delete-warning { margin: 0 0 18px; color: #6e5960; line-height: 1.55; }
.crm-delete-impact { margin: 18px 0; padding: 15px 17px; border: 1px solid #eee2e4; border-radius: 11px; background: #fffafa; }
.crm-delete-impact b { font-size: 10px; }
.crm-delete-impact ul { margin: 9px 0 0; padding-left: 19px; color: #5e6672; font-size: 10px; line-height: 1.75; }
.crm-delete-form { display: grid; gap: 9px; margin-top: 20px; }
.crm-delete-form label { color: #5e6672; font-size: 10px; }
.crm-delete-form input { width: 100%; min-height: 42px; box-sizing: border-box; border: 1px solid #d9dee5; border-radius: 9px; padding: 0 12px; font: inherit; }
.crm-delete-form input:focus { outline: 2px solid #f2c7cd; border-color: #d99da4; }
.crm-delete-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
@media (max-width: 640px) { .crm-delete-page { padding: 24px 12px; } .crm-delete-card { padding: 20px; } .crm-delete-actions { flex-direction: column-reverse; } .crm-delete-actions .btn { width: 100%; justify-content: center; } }

/* ===== FIX MOBILE NAVIGATION ===== */

@media (max-width: 820px) {

  .crm-sidebar {
    width: 100%;
    max-width: 100vw;
    overflow-x: auto !important;
    overflow-y: hidden !important;

    padding: 8px 10px;

    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .crm-sidebar::-webkit-scrollbar {
    display: none;
  }

  .crm-nav {
    display: flex;
    flex-direction: row;

    width: max-content;
    min-width: max-content;

    overflow: visible !important;

    gap: 4px;
    padding: 0;
  }

  .crm-nav-group {
    display: flex;
    flex-direction: row;

    flex: 0 0 auto;

    margin: 0 !important;
    gap: 3px;
  }

  .crm-nav-bottom {
    margin: 0 !important;
  }

  .crm-nav-item {
    flex: 0 0 auto;

    min-height: 36px;

    padding: 7px 10px;

    white-space: nowrap;
  }

  .crm-nav-label,
  .crm-brand,
  .crm-user-card,
  .crm-nav-icon {
    display: none;
  }
}

/* ===== MOBILE: ADD CLIENT FORM ===== */

@media (max-width: 650px) {

  /* Блок кнопок */
  .crm-page-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .crm-page-actions > .btn,
  .crm-create-menu {
    width: 100%;
  }

  .crm-create-menu > summary {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
  }

  /* На телефоне форма больше не popup */
  .crm-create-menu {
    position: static;
    grid-column: 1 / -1;
  }

  .crm-create-popover {
    position: static;

    width: 100%;
    max-width: 100%;
    box-sizing: border-box;

    margin-top: 8px;
    padding: 14px;

    border-radius: 10px;
    box-shadow: none;
  }

  .crm-create-popover form {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .crm-create-popover .crm-form-field {
    width: 100%;
    min-width: 0;
  }

  .crm-create-popover input,
  .crm-create-popover select,
  .crm-create-popover textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .crm-create-popover .crm-full-btn {
    width: 100%;
  }
}
@media (max-width: 650px) {

  .crm-clients-page {
    width: 100%;
    max-width: 100%;
    padding: 18px 0 40px;
    overflow-x: hidden;
  }

  .crm-page-titlebar {
    width: 100%;
    box-sizing: border-box;
  }

  .crm-client-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .crm-client-toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .crm-client-search {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }

  .crm-client-toolbar select {
    width: 100%;
    min-width: 0;
  }

  .crm-client-toolbar .btn {
    width: 100%;
  }
}