/* Экран «Настройки CRM» (public/panel/crm-settings.js). Токены — из panel.css, свои классы с префиксом cs-.
   Без инлайн-стилей (CSP): цвета стадий и тегов — классы cs-c-*. Телефон (до 900px): стрелки вместо перетаскивания. */

.cs { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cs-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cs-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cs-status { margin: 0; min-height: 18px; font-size: 13px; font-weight: 600; color: var(--ok-ink); }
.cs-note {
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.45;
}

.cs-callout {
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: var(--accent-bg);
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.5;
}

/* Цвета стадий и тегов (светлая тема; для тёмной — свои значения ниже) */
.cs-c-gray { --cs-c: var(--ink-3); }
.cs-c-blue { --cs-c: #2F7DE1; }
.cs-c-violet { --cs-c: var(--accent); }
.cs-c-teal { --cs-c: #14958F; }
.cs-c-green { --cs-c: var(--ok); }
.cs-c-amber { --cs-c: var(--warn); }
.cs-c-red { --cs-c: var(--danger); }
.cs-c-pink { --cs-c: #D6459A; }
:root[data-theme="dark"] .cs-c-blue { --cs-c: #6AA5F5; }
:root[data-theme="dark"] .cs-c-teal { --cs-c: #3CC4BD; }
:root[data-theme="dark"] .cs-c-pink { --cs-c: #F27DBD; }
.cs-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--cs-c, var(--ink-3)); }

/* Вкладки */
.cs-tabs { align-self: flex-start; max-width: 100%; }
.cs-tab { min-height: 44px; }

/* Две колонки: настройки и предпросмотр */
.cs-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; min-width: 0; }
.cs-panel { min-width: 0; outline: none; }
.cs-aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (min-width: 1101px) {
  .cs-layout { grid-template-columns: minmax(0, 1fr) 360px; }
  .cs-aside { position: sticky; top: calc(var(--topbar-h, 72px) + 16px); }
}

.cs-hint { margin: 0 0 12px; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.cs-add .cs-hint { flex: 1 1 100%; margin: 0; }
.cs-limit { margin: 0 0 12px; font-size: 12.5px; color: var(--ink-3); }
.cs-meta { margin: 0; font-size: 12.5px; color: var(--ink-3); }
.cs-slot:empty { display: none; }
.cs-slot { margin-top: 12px; }

/* Выбор воронки */
.cs-funnels { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.cs-funnel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.cs-funnel:hover { background: var(--surface-2); }
.cs-funnel.is-active { border-color: var(--accent); background: var(--accent-bg); }
.cs-funnel-name { overflow-wrap: anywhere; text-align: left; }
.cs-funnel-tag { font-size: 11.5px; color: var(--ink-2); }

.cs-edit-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 8px; }
.cs-edit-row > .field { flex: 1 1 220px; min-width: 0; }
.cs-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-btn { min-height: 44px; }

/* Поля ввода внутри экрана */
.cs-input, .cs-select { height: 44px; min-width: 0; background: var(--surface); box-shadow: 0 0 0 1px var(--line-2) inset; }
.cs-input:focus, .cs-select:focus { box-shadow: 0 0 0 3px var(--accent-bg), 0 0 0 1px var(--accent) inset; }
.cs-select { width: auto; max-width: 100%; }
.cs-num { width: 88px; }
.cs input[type="checkbox"], .cs input[type="radio"] {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 0;
  margin: 0;
  background: none;
  box-shadow: none;
  accent-color: var(--accent);
  cursor: pointer;
}
.cs input[type="checkbox"]:disabled { cursor: not-allowed; }
.cs input[type="checkbox"]:focus-visible, .cs input[type="radio"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cs-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13.5px; cursor: pointer; }
.cs-field { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.cs-field .cs-select { width: 100%; }

/* Строки списков (стадии, поля, шаги) */
.cs-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.cs-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  padding: 8px 8px 8px 4px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  transition: box-shadow .15s var(--ease-out), opacity .15s var(--ease-out);
}
.cs-row-step { grid-template-columns: minmax(0, 1fr) auto; padding-left: 10px; }
.cs-row.is-dragging { opacity: .4; }
.cs-row.ov-top { box-shadow: 0 -3px 0 var(--accent); }
.cs-row.ov-bottom { box-shadow: 0 3px 0 var(--accent); }
.cs-grip { width: 36px; height: 44px; display: grid; place-items: center; color: var(--ink-3); cursor: grab; touch-action: none; }
.cs-grip:hover { color: var(--ink); }
.cs-grip svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; }
.cs-row-main { min-width: 0; display: grid; gap: 8px; }
.cs-name-line { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cs-name-line .cs-input { flex: 1 1 auto; }
.cs-row-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; }
.cs-row-act { display: flex; align-items: center; gap: 2px; }

/* Кнопки-иконки: касание не меньше 44px */
.cs-ib { width: 44px; height: 44px; border-color: transparent; background: transparent; }
.cs-ib:hover { background: var(--surface); }
.cs-ib-danger:hover { color: var(--danger-ink); background: var(--danger-bg); }
.cs-ib:disabled { opacity: .3; }
.cs .is-blocked { opacity: .45; cursor: not-allowed; }

/* Формы добавления */
.cs-add { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.cs-add > .cs-input { flex: 1 1 200px; width: auto; }
.cs-add > .cs-select { flex: 0 1 auto; }

/* Подтверждение внутри страницы */
.cs-confirm {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  outline: none;
}
.cs-confirm:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cs-confirm.is-danger { border-color: var(--danger); background: var(--danger-bg); }
.cs-confirm-text { margin: 0; font-size: 14px; line-height: 1.45; }
.cs-confirm-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-preview-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.cs-preview-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; }
.cs-pv-name { font-weight: 500; overflow-wrap: anywhere; }
.cs-pv-from { font-size: 12.5px; color: var(--ink-3); }

/* Теги и источники */
.cs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 4px 0 14px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: 14px;
  font-weight: 500;
  max-width: 100%;
}
.cs-tag-ro { min-height: 30px; padding: 0 12px; font-size: 12.5px; }
.cs-tag-name { overflow-wrap: anywhere; }
.cs-tag-x {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -2px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
}
.cs-tag-x:hover { color: var(--danger-ink); }
.cs-tag-x svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }

/* Архив полей */
.cs-archive { margin-top: 16px; }
.cs-archive summary { min-height: 44px; display: flex; align-items: center; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.cs-plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cs-plain li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cs-plain-name { flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; font-size: 14px; }

/* Права */
.cs-table-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.cs-perm { width: 100%; border-collapse: collapse; }
.cs-perm th, .cs-perm td { padding: 4px 6px; text-align: center; border-top: 1px solid var(--line); }
.cs-perm thead th { border-top: 0; font-size: 12px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.cs-perm tbody th { text-align: left; padding-left: 0; font-size: 14px; font-weight: 400; min-width: 180px; }
.cs-perm .cs-check { justify-content: center; width: 44px; min-height: 44px; }

/* Правила бота */
.cs-switches { display: grid; gap: 2px; margin-bottom: 16px; }
.cs-fieldset { margin: 0 0 16px; padding: 0; border: 0; display: grid; gap: 4px; }
.cs-fieldset legend { padding: 0; margin-bottom: 6px; font-size: 13px; font-weight: 500; }
.cs-radio { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 8px 0; }
.cs-radio input { margin-top: 2px; }
.cs-radio label { display: grid; gap: 2px; cursor: pointer; }
.cs-radio-t { font-size: 14px; font-weight: 500; }
.cs-radio-d { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.cs-threshold { display: grid; gap: 6px; max-width: 360px; }

/* Предпросмотр */
.cs-mini { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; }
.cs-mini:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cs-mini-c { flex: 0 0 124px; display: grid; gap: 6px; align-content: start; padding: 8px; border-radius: var(--r-md); background: var(--surface-2); }
.cs-mini-h { display: flex; align-items: flex-start; gap: 6px; }
.cs-mini-h .cs-dot { margin-top: 4px; }
.cs-mini-h b { font-size: 12px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.cs-sk { display: block; height: 30px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); }
.cs-sk-s { height: 20px; }
.cs-sk-line { width: 72px; height: 10px; border-radius: 5px; border: 0; background: var(--surface-2); flex: none; }
.cs-pv-fields { list-style: none; margin: 0; padding: 0; display: grid; }
.cs-pv-fields li { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.cs-pv-fields li:first-child { border-top: 0; }
.cs-pv-k { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cs-req { color: var(--danger-ink); font-weight: 700; }
.cs-botmark { display: inline-grid; place-items: center; color: var(--accent); }
.cs-botmark svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cs-chips-pv { margin-top: 14px; }

/* Телефон и планшет: стрелки вместо перетаскивания, строки в колонку */
@media (max-width: 900px) {
  .cs-grip { display: none; }
  .cs-row { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 10px; }
  .cs-row-step { grid-template-columns: minmax(0, 1fr); }
  .cs-row-act { justify-content: flex-end; }
  .cs-row-opts .cs-select { flex: 1 1 140px; width: auto; }
  .cs-add > .cs-select, .cs-add > .btn { flex: 1 1 100%; width: 100%; }
}

@media (max-width: 600px) {
  .cs-perm tbody th { min-width: 0; font-size: 13.5px; }
  .cs-perm th, .cs-perm td { padding: 4px 2px; }
  .cs-perm thead th { font-size: 11.5px; }
}

/* Цели касания: значок флажка остаётся 22px, но нажимаемая область — вся обёртка-label не меньше 44x44 */
@media (max-width: 600px), (pointer: coarse) {
  .cs-check { min-width: 44px; min-height: 44px; padding: 0 4px; margin: 0 -4px; box-sizing: border-box; }
  .cs-check span:empty { display: none; }
  .cs-check:has(> span:empty) { justify-content: center; margin: 0; padding: 0; }
  .cs-radio { min-height: 44px; }
  .cs-radio label { min-height: 44px; align-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-row { transition: none; }
}