/* ==========================================================================
   CRM «Сделки» (public/panel/crm.js): доска, таблица, карточка сделки и клиента.
   Только токены panel.css (никаких своих цветов), без style="" в разметке (CSP).
   Тёмная тема — те же токены, что у мастера (.wizard[data-theme="dark"]): включается атрибутом
   data-theme="dark" на html, body или самом .crm.
   Брейкпоинты: до 700px — телефон (чипы стадий, вкладки карточки, таблица карточками), далее — доска и две колонки.
   ========================================================================== */

[data-theme="dark"] .crm,
.crm[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0A0A0F;
  --surface: #15151D;
  --surface-2: #1E1E29;
  --ink: #F4F4F6;
  --ink-2: rgba(244, 244, 246, .74);
  --ink-3: rgba(244, 244, 246, .62);
  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .16);
  --accent: #8E81FF;
  --accent-bg: rgba(142, 129, 255, .16);
  --ok: #3DD598;
  --ok-bg: rgba(61, 213, 152, .14);
  --ok-ink: #5BE3A9;
  --warn: #F5B942;
  --warn-ink: #F5B942;
  --warn-bg: rgba(245, 185, 66, .14);
  --danger: #FF6B6B;
  --danger-ink: #FF8E8E;
  --danger-bg: rgba(255, 107, 107, .14);
  --shadow-1: 0 8px 30px rgba(0, 0, 0, .4);
  --shadow-2: 0 30px 80px rgba(0, 0, 0, .55);
  color: var(--ink);
  background: var(--bg);
}

.crm { min-width: 0; color: var(--ink); }

/* Только для скринридеров */
.crm-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.crm-ic {
  width: 17px;
  height: 17px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.crm-ic-sm { width: 14px; height: 14px; }

.crm .chip { height: auto; min-height: 26px; padding-top: 3px; padding-bottom: 3px; white-space: normal; }
.crm .btn { text-decoration: none; }

/* ---------- панель фильтров ---------- */

.crm-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 14px;
}
.crm-field { display: flex; flex-direction: column; gap: 6px; flex: 0 1 190px; }
.crm-field-grow { flex: 1 1 240px; }
.crm-form .crm-field { flex: none; }
.crm-deal .crm-next { display: none; } /* на десктопе перенос — мышью или списком стадий; кнопка нужна на телефоне */
.crm-table td[data-label="Телефон"],
.crm-table td[data-label="Создана"] { white-space: nowrap; }

[data-theme="dark"] .crm .btn-primary,
.crm[data-theme="dark"] .btn-primary { background: var(--on-dark); color: var(--dark); }
[data-theme="dark"] .crm .btn-primary:hover,
.crm[data-theme="dark"] .btn-primary:hover { background: var(--ink); }
.crm-label { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.crm-hint { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.crm-summary { font-size: 13.5px; color: var(--ink-2); margin: 0 0 12px; }
.crm-more-row { display: flex; justify-content: center; margin: 14px 0; }

.crm-seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
}
.crm-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}
.crm-seg-btn[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }

/* ---------- чипы стадий (телефон) ---------- */

.crm-stagebar { display: none; }
.crm-stagechip,
.crm-chipbtn,
.crm-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.crm-stagechip[aria-pressed="true"],
.crm-chipbtn[aria-pressed="true"],
.crm-tab[aria-pressed="true"] { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.crm-stagechip-n {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 12px;
  text-align: center;
}

/* ---------- доска ---------- */

.crm-board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: 14px;
  align-items: start;
  overflow-x: auto;
  padding-bottom: 14px;
  border-radius: var(--r-lg);
}
.crm-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: var(--r-lg);
  background: var(--surface-2);
}
.crm-col.is-over { outline: 2px dashed var(--accent); outline-offset: -2px; }
.crm-col-h h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 14.5px;
}
.crm-col[data-kind="won"] .crm-col-h h2 { color: var(--ok-ink); }
.crm-col[data-kind="lost"] .crm-col-h h2 { color: var(--danger-ink); }
.crm-col-n {
  min-width: 24px;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}
.crm-col-s { min-height: 18px; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; font-variant-numeric: tabular-nums; }
.crm-col-b { display: flex; flex-direction: column; gap: 10px; }
.crm-col-empty {
  padding: 18px 10px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--ink-3);
  text-align: center;
}

.crm-deal {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.crm-deal[draggable="true"] { cursor: grab; }
.crm-deal.is-dragging { opacity: .45; }
.crm-deal.is-pending { opacity: .7; }
.crm-deal-title { font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }
.crm-deal-title a { text-decoration: none; }
.crm-deal-title a:hover { color: var(--accent); }
.crm-deal-client { font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.crm-deal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; }
.crm-deal-sum { font-weight: 600; font-variant-numeric: tabular-nums; }
.crm-deal-step,
.crm-deal-nostep { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); }
.crm-deal-nostep { color: var(--ink-3); }
.crm-deal-step.is-overdue,
.is-overdue { color: var(--warn-ink); }
.crm-deal-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-deal-act { display: flex; flex-direction: column; gap: 8px; }
.crm-deal-act select { height: 38px; font-size: 13px; }
.crm-lock { color: var(--ink-2); }

/* ---------- таблица ---------- */

.crm-tablewrap { padding: 8px; overflow-x: auto; }
.crm-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.crm-table th {
  padding: 10px 12px;
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
  white-space: nowrap;
}
.crm-table td { padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: middle; }
.crm-table tr.is-pending { opacity: .7; }
.crm-table select { height: 36px; font-size: 13px; min-width: 150px; }
.crm-tlink { font-weight: 500; text-decoration: none; }
.crm-tlink:hover { color: var(--accent); }
.crm-sort {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.crm-sort:hover { color: var(--ink); }
.crm-table th[aria-sort="ascending"] .crm-sort::after { content: " ↑"; }
.crm-table th[aria-sort="descending"] .crm-sort::after { content: " ↓"; }

/* ---------- карточка ---------- */

.crm-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  color: var(--ink-2);
  font-size: 13.5px;
  text-decoration: none;
}
.crm-back:hover { color: var(--ink); }
.crm-card-body { display: flex; flex-direction: column; gap: 18px; }
.crm-hero-row { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.crm-ava { width: 56px; height: 56px; font-size: 18px; }
.crm-hero-t { flex: 1 1 200px; display: flex; flex-direction: column; gap: 6px; }
.crm-hero-t h1 { font-size: 24px; overflow-wrap: anywhere; }
.crm-hero-sub { color: var(--ink-2); overflow-wrap: anywhere; }
.crm-hero-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.crm-hero-act { display: flex; flex-wrap: wrap; gap: 8px; }

.crm-tabs { display: none; }
.crm-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
  gap: 20px;
  align-items: start;
}
.crm-col-main,
.crm-col-side { display: flex; flex-direction: column; gap: 18px; }
.crm-card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
/* поля клиента и предложения бота (crm-fields.js): в боковой колонке */
.crm-fieldsbox { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.crm-fieldsbox-part { min-width: 0; }
.crm-fieldsbox-part[hidden] { display: none; }
.crm-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

.crm-dl { display: grid; grid-template-columns: minmax(96px, auto) 1fr; gap: 10px 14px; margin: 0; font-size: 14px; }
.crm-dl dt { color: var(--ink-3); }
.crm-dl dd { margin: 0; overflow-wrap: anywhere; }
.crm-dl a { color: var(--accent); }
.crm-lockhint { display: flex; align-items: flex-start; gap: 6px; margin-top: 12px; }

.crm-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.crm-form-err { font-size: 13px; color: var(--danger-ink); }
.crm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.crm-step-cur { margin-bottom: 14px; }
.crm-step-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.crm-step-t { display: flex; flex-direction: column; flex: 1 1 160px; }
.crm-step-t small { color: var(--ink-3); }
.crm-step-t small.is-overdue { color: var(--warn-ink); }

.crm-tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.crm-tl-item { display: flex; gap: 12px; }
.crm-tl-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink-2);
}
.crm-tl-ic[data-group="pay"] { background: var(--ok-bg); color: var(--ok-ink); }
.crm-tl-ic[data-group="note"] { background: var(--warn-bg); color: var(--warn-ink); }
.crm-tl-ic[data-group="chat"],
.crm-tl-ic[data-group="req"],
.crm-tl-ic[data-group="book"] { background: var(--accent-bg); color: var(--accent); }
.crm-tl-b { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; }
.crm-tl-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.crm-tl-h small { color: var(--ink-3); font-size: 12.5px; }
.crm-tl-b p { font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; white-space: pre-wrap; }
.crm-tl-due { font-size: 12.5px; }

/* Движение только у опций с transform/opacity и только если пользователь не просил его убрать */
@media (prefers-reduced-motion: no-preference) {
  .crm-deal { transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), opacity .2s var(--ease-out); }
  .crm-deal:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
}

/* ---------- планшет: доска прокручивается внутри своей области, страница — нет ---------- */

@media (max-width: 1024px) {
  .crm-card-grid { grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); }
}

/* ---------- сенсорные экраны (в том числе планшет): цели касания не меньше 44px ---------- */

@media (pointer: coarse) {
  .crm .btn,
  .crm .btn-sm { height: 44px; }
  .crm select,
  .crm input,
  .crm-seg-btn,
  .crm-stagechip,
  .crm-chipbtn,
  .crm-tab,
  .crm-move,
  .crm-sort,
  .crm-call,
  .crm-next { min-height: 44px; }
  .crm-sort { display: inline-flex; align-items: center; }
  .crm-deal-act select { height: 44px; }
}

/* ---------- телефон ---------- */

@media (max-width: 700px) {
  .crm .btn,
  .crm .btn-sm { height: 44px; }
  .crm select,
  .crm input,
  .crm textarea { min-height: 44px; }
  .crm-deal-act select { height: 44px; }
  .crm-seg-btn,
  .crm-stagechip,
  .crm-chipbtn,
  .crm-tab,
  .crm-move,
  .crm-sort,
  .crm-call,
  .crm-next { min-height: 44px; }
  .crm-sort { display: inline-flex; align-items: center; }
  .crm-field { flex: 1 1 calc(50% - 6px); }
  .crm-field-grow { flex-basis: 100%; }
  .crm-hero-act .btn { flex: 1 1 auto; }
  .crm-hero-act { width: 100%; }
  .crm-ava { width: 44px; height: 44px; font-size: 15px; }
  .crm-deal .crm-next { display: inline-flex; }

  .crm-stagebar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 4px;
    overflow-x: auto;
  }
  .crm-board { display: block; overflow: visible; padding-bottom: 0; }
  .crm-col { display: none; padding: 0; background: transparent; }
  .crm-col.is-active { display: flex; }
  .crm-col-h { display: none; }
  .crm-deal-act { flex-direction: column; }
  .crm-deal-act .btn { width: 100%; }

  /* таблица превращается в список карточек */
  .crm-tablewrap { padding: 0; background: transparent; box-shadow: none; overflow: visible; }
  .crm-table,
  .crm-table tbody,
  .crm-table tr,
  .crm-table td { display: block; }
  .crm-table thead { display: none; }
  .crm-table tr {
    margin-bottom: 12px;
    padding: 6px 14px;
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-1);
  }
  .crm-table td {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 0;
    text-align: right;
  }
  .crm-table td::before { content: attr(data-label); color: var(--ink-3); text-align: left; flex: none; }
  .crm-table td:empty { display: none; }
  .crm-table select { min-width: 0; width: 60%; min-height: 44px; }

  /* карточка: шапка и вкладки вместо двух колонок */
  .crm-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
  .crm-card-grid { grid-template-columns: minmax(0, 1fr); }
  .crm-card-screen[data-tab="fields"] .crm-col-main { display: none; }
  .crm-card-screen:not([data-tab="fields"]) .crm-col-side { display: none; }
  /* на вкладке «Поля» значения полей идут первыми, сделка и клиент — под ними */
  .crm-card-screen[data-tab="fields"] .crm-fieldsbox { order: -1; }
  .crm-hero-t h1 { font-size: 21px; }
  .crm-dl { grid-template-columns: 1fr; gap: 2px; }
  .crm-dl dd { margin-bottom: 10px; }
  .crm-grid2 { grid-template-columns: 1fr 1fr; }
}

/* ---------- П140: оставшиеся элементы доски и «Сегодня» — касание не меньше 44px ---------- */

@media (pointer: coarse), (max-width: 700px) {
  .crm .btn,
  .crm .btn-sm,
  .crm-more,
  .crm-step-done,
  .crm-next,
  .crm-call { min-height: 44px; height: auto; }
  .crm-back,
  .crm-tlink,
  .crm-deal-title a,
  .crm-col-h a,
  .crm-tl-item a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .crm input[type="checkbox"],
  .crm input[type="radio"] { min-width: 24px; min-height: 24px; }
  /* Название сделки на доске — на всю ширину карточки: попасть пальцем проще, чем в строку текста. */
  .crm-deal-title a { width: 100%; }
}

/* ---------- П167: ручное создание сделки и клиента (шторка) ---------- */

.crm-add-deal { flex: none; }
.crm-col-add { align-self: flex-start; margin-top: 6px; }
.crm-mform { margin-bottom: 0; gap: 14px; }
.crm-mform .crm-field { gap: 6px; }
.crm-mform textarea { min-height: 88px; }
.crm-mclient { margin: 0; font-size: 14.5px; font-weight: 500; overflow-wrap: anywhere; }
.crm-found {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--ok-ink);
  font-size: 13.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.crm-found[hidden] { display: none; }
.btn-add-deal,
.btn-add-client { min-height: 44px; }
@media (max-width: 700px) {
  .crm-mform .crm-grid2 { grid-template-columns: minmax(0, 1fr); }
  .crm-mform input,
  .crm-mform select,
  .crm-mform textarea { min-height: 44px; max-width: 100%; }
  .crm-col-add { min-height: 44px; }
}
@media (pointer: coarse) {
  .crm-col-add { min-height: 44px; }
}