/* ============================================================
   COMPONENTS — переиспользуемые UI-элементы
   ============================================================ */

/* ----------------------------------------------------------
   ICON BUTTON
   ---------------------------------------------------------- */

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    color       var(--transition-fast),
    background  var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow  var(--transition-fast);
}

.icon-btn svg {
  width: 14px;
  height: 14px;
  pointer-events: none;
}

/* ghost — прозрачный */
.icon-btn--ghost {
  border-color: var(--color-border);
}

.icon-btn--ghost:hover {
  color: var(--color-accent);
  border-color: var(--color-border-accent);
  background: var(--color-accent-muted);
}

.icon-btn--ghost:active {
  background: var(--color-bg-overlay);
  box-shadow: inset 0 1px 3px #00000066;
}

/* accent — зелёный */
.icon-btn--accent {
  color: var(--color-accent);
  border-color: var(--color-border-accent);
  background: var(--color-accent-muted);
}

.icon-btn--accent:hover {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border-color: var(--color-accent);
  box-shadow: var(--color-accent-glow);
}

.icon-btn--accent:active {
  background: var(--color-accent-dim);
  box-shadow: none;
}

/* micro — текстовая кнопка без внутренних отступов для встраивания в ячейки */
.btn-micro {
  display: inline-block;
  padding: 0;
  font-size: var(--text-xs);
  line-height: 1;
  font-family: var(--font-base);
  color: var(--color-text-muted);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    color        var(--transition-fast),
    border-color var(--transition-fast);
}

.btn-micro:hover {
  color: var(--color-text-secondary);
  border-color: var(--color-border-accent);
}

/* xs — маленькая (для таблицы очереди) */
.icon-btn--xs {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
}

.icon-btn--xs svg {
  width: 10px;
  height: 10px;
}

/* ----------------------------------------------------------
   TAB TOOLBAR — единая шапка панели вкладки
   Используется в: admin, monitoring, reports
   ---------------------------------------------------------- */

.tab-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-header);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

/* ----------------------------------------------------------
   DATE INPUT
   ---------------------------------------------------------- */

.date-input {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: var(--font-base);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
  height: 30px;
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    box-shadow   var(--transition-fast);
  /* убираем браузерный стиль */
  -webkit-appearance: none;
  color-scheme: var(--color-scheme);
}

.date-input:hover {
  border-color: var(--color-border-accent);
}

.date-input:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 2px var(--color-accent-muted);
}

.ids-input {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: var(--font-base);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
  height: 30px;
  width: 160px;
  transition:
    border-color var(--transition-fast),
    box-shadow   var(--transition-fast);
}

.ids-input::placeholder {
  color: var(--color-text-muted);
}

.ids-input:hover  { border-color: var(--color-border-accent); }
.ids-input:focus  {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 2px var(--color-accent-muted);
}

/* нативный select в едином стиле с .date-input */
.filter-select {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: var(--font-base);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-5) var(--space-2) var(--space-3);
  height: 30px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  color-scheme: var(--color-scheme);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23718096'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition:
    border-color var(--transition-fast),
    box-shadow   var(--transition-fast);
}

.filter-select:hover {
  border-color: var(--color-border-accent);
}

.filter-select:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 2px var(--color-accent-muted);
}

/* ----------------------------------------------------------
   MANAGER QUEUE TABLE
   ---------------------------------------------------------- */

.mq-table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--text-sm);
}

.mq-table__th {
  color: var(--color-text-muted);
  font-weight: var(--font-normal);
  font-size: var(--text-xs);
  padding: 0 var(--space-3) var(--space-2);
  text-align: left;
  border-bottom: 1px solid var(--color-border-subtle);
}

.mq-table__th--center { text-align: center; }

.mq-table__row {
  transition: background var(--transition-fast);
}

.mq-table__row:hover {
  background: var(--color-bg-overlay);
}

.mq-table__name,
.mq-table__count,
.mq-table__action {
  padding: var(--space-2) var(--space-3);
  vertical-align: middle;
}

.mq-table__name {
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.mq-table__count {
  text-align: center;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 24px;
}

.mq-table__count.is-active {
  color: var(--color-accent);
  font-weight: var(--font-semibold);
}

.mq-table__action {
  text-align: right;
  padding-right: var(--space-1);
}

/* Подсветка «следующего» менеджера в очереди */
.mq-table__row.is-next {
  background: var(--color-warning-muted);
}

.mq-table__row.is-next .mq-table__name {
  color: var(--color-warning);
}

.mq-table__row.is-next .mq-table__count {
  color: var(--color-warning);
  font-weight: var(--font-semibold);
}

/* Двухпанельный контейнер очереди */
.mq-block {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.mq-subtable {
  flex: 1;
  min-width: 0;
}

.mq-subtable + .mq-subtable {
  border-left: 1px solid var(--color-border-subtle);
  margin-left: var(--space-4);
  padding-left: var(--space-4);
}

.mq-subtable__header {
  display: flex;
  justify-content: center;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text-muted);
}

.mq-subtable__icon {
  width: 13px;
  height: 13px;
}

/* Отсутствующий менеджер — строка приглушена */
.mq-table__row.is-absent {
  opacity: 0.38;
}

.mq-table__row.is-absent .mq-table__name,
.mq-table__row.is-absent .mq-table__count {
  color: var(--color-text-muted);
  font-weight: var(--font-normal);
}

/* Кнопка-тоггл: крестик / квадрат — единый элемент */
.mq-toggle .mq-toggle__sq { display: none; }
.mq-toggle .mq-toggle__x  { display: block; }

.mq-table__row.is-absent .mq-toggle .mq-toggle__x  { display: none; }
.mq-table__row.is-absent .mq-toggle .mq-toggle__sq { display: block; }

/* ----------------------------------------------------------
   REPORTS TILE
   ---------------------------------------------------------- */

.reports-tile {
  font-size: var(--text-sm);
  border-collapse: collapse;
  width: 100%;
}

.reports-tile__th {
  color: var(--color-text-muted);
  font-weight: var(--font-normal);
  font-size: var(--text-sm);
  padding: 0 var(--space-7) var(--space-3);
  text-align: center;
  border-bottom: 1px solid var(--color-border-subtle);
  white-space: nowrap;
}

.reports-tile__th--total {
  color: var(--color-text-secondary);
}

.reports-tile__val {
  text-align: center;
  padding: var(--space-4) var(--space-7) 0;
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xl);
  color: var(--color-text-secondary);
}

.reports-tile__val--accent {
  color: var(--color-accent);
  font-weight: var(--font-semibold);
}

.reports-tile__val--total {
  color: var(--color-text-primary);
  font-weight: var(--font-semibold);
}

.reports-tile__th--warn  { color: var(--color-warning); }
.reports-tile__th--over  { color: var(--color-danger);  }
.reports-tile__val--warn { color: var(--color-warning); font-weight: var(--font-semibold); }
.reports-tile__val--over { color: var(--color-danger);  font-weight: var(--font-semibold); }

/* ----------------------------------------------------------
   LEADS CHART (SVG)
   ---------------------------------------------------------- */

.leads-chart {
  display: block;
  overflow: visible;
}

.chart-bar {
  fill: var(--color-secondary-muted);
  stroke: var(--color-secondary-dim);
  stroke-width: 0.5;
  transition: fill var(--transition-fast);
}

.chart-bar:hover {
  fill: var(--color-secondary);
  opacity: 0.8;
}

.chart-line {
  stroke: var(--color-accent);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: var(--chart-line-filter);
}

.chart-dot {
  fill: var(--color-accent);
  stroke: var(--color-bg-surface);
  stroke-width: 1;
}

.chart-label {
  font-family: var(--font-base);
  font-size: 8px;
  fill: var(--color-text-muted);
  text-anchor: middle;
}

.chart-legend {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-2);
  font-size: var(--text-xs);
}

.chart-legend__bar  { color: var(--color-secondary); }
.chart-legend__line { color: var(--color-accent); }

.chart-hitzone {
  fill: transparent;
  cursor: default;
}

.chart-tooltip {
  position: fixed;
  z-index: var(--z-tooltip);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 5px 9px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--color-text-primary);
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 6px));
  transition: opacity .12s;
}

.chart-tooltip.is-visible {
  opacity: 1;
}

.chart-tooltip__dow {
  font-size: 10px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}

.chart-tooltip__row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.chart-tooltip__lbl {
  color: var(--color-text-secondary);
}

/* ----------------------------------------------------------
   CONTACT TOOLTIP (предыдущие лиды с тем же контактом)
   ---------------------------------------------------------- */

.contact-has-prior {
  color: #ff5a5a;
}

.contact-tooltip {
  position: fixed;
  z-index: var(--z-tooltip);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 11px;
  line-height: 1.65;
  color: var(--color-text-primary);
  pointer-events: none;
  white-space: nowrap;
  max-width: 420px;
  opacity: 0;
  transform: translate(0, calc(-100% - 6px));
  transition: opacity .12s;
}

.contact-tooltip.is-visible {
  opacity: 1;
}

.contact-tooltip__header {
  font-size: 10px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}

.contact-tooltip__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.contact-tooltip__manager {
  color: var(--color-accent);
  font-weight: 500;
  min-width: 48px;
  flex-shrink: 0;
}

.contact-tooltip__comment {
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.contact-tooltip__date {
  color: var(--color-text-muted);
  margin-left: auto;
  flex-shrink: 0;
  padding-left: 6px;
}

/* ----------------------------------------------------------
   BLOCK LABEL (заголовок блока в шапке)
   ---------------------------------------------------------- */

.block-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

/* ----------------------------------------------------------
   FILTER DROPDOWN
   ---------------------------------------------------------- */

.filter-wrap {
  position: relative;
}

/* Кнопка в активном состоянии (дроп-даун открыт) */
.filter-wrap.is-open > .icon-btn {
  color: var(--color-accent);
  border-color: var(--color-border-accent);
  background: var(--color-accent-muted);
}

.filter-dropdown {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 230px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), var(--dropdown-extra-glow);
  padding: var(--space-3) 0;
  z-index: var(--z-dropdown);

  /* скрытое состояние */
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity    var(--transition-base),
    transform  var(--transition-base),
    visibility var(--transition-base);
}

.filter-wrap.is-open .filter-dropdown {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  visibility: visible;
}

.filter-dropdown__header {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: var(--space-2) var(--space-5) var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-2);
}

.filter-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.filter-item:hover {
  background: var(--color-bg-overlay);
}

.filter-item__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.filter-item__box {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color var(--transition-fast),
    background   var(--transition-fast);
}

.filter-item__check {
  width: 8px;
  height: 8px;
  color: var(--color-accent);
  opacity: 0;
  transform: scale(0.4);
  transition:
    opacity   var(--transition-fast),
    transform var(--transition-fast);
}

.filter-item__input:checked + .filter-item__box {
  border-color: var(--color-accent);
  background: var(--color-accent-muted);
}

.filter-item__input:checked + .filter-item__box .filter-item__check {
  opacity: 1;
  transform: scale(1);
}

.filter-item__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.filter-item:hover .filter-item__label {
  color: var(--color-text-primary);
}

.filter-item:has(.filter-item__input:checked) .filter-item__label {
  color: var(--color-accent);
}

/* ----------------------------------------------------------
   COLUMN FILTER DROPDOWN (th–уровень)
   ---------------------------------------------------------- */

.th--filterable {
  cursor: pointer;
  position: relative;
  transition: color var(--transition-fast);
}

.th--filterable:hover {
  color: var(--color-text-secondary);
}

.th-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  pointer-events: none;
}

.th-filter__label { pointer-events: none; }

.th-filter__icon {
  width: 9px;
  height: 11px;
  flex-shrink: 0;
  pointer-events: none;
  opacity: 0.35;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}

.th--filterable:hover .th-filter__icon,
.th-filter__icon--active {
  opacity: 1;
}

.th-filter__icon--active {
  color: var(--color-accent);
}

.th-filter__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 160px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), var(--dropdown-extra-glow);
  padding: var(--space-2) 0;
  z-index: var(--z-dropdown);

  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  transform-origin: top left;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity    var(--transition-base),
    transform  var(--transition-base),
    visibility var(--transition-base);
}

.th-filter__dropdown.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  visibility: visible;
}

.th-filter__option {
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--font-normal);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.th-filter__option:hover {
  background: var(--color-bg-overlay);
  color: var(--color-text-primary);
}

.th-filter__option--selected {
  color: var(--color-accent);
}

.th-filter__option--all {
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-1);
  padding-bottom: var(--space-3);
}

.th-filter__option--all.th-filter__option--selected {
  color: var(--color-accent);
}

/* ----------------------------------------------------------
   TABLE LINK
   ---------------------------------------------------------- */

.table-link {
  color: var(--color-accent);
  font-size: var(--text-sm);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition:
    color        var(--transition-fast),
    border-color var(--transition-fast);
}

.table-link:hover {
  color: var(--color-accent-dim);
  border-bottom-color: var(--color-accent-dim);
}

.tbl-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  justify-content: center;
}

/* Подсветка цифры «дней в обработке» (только страница leads-wip) */
.days-val--warn { color: var(--color-warning); font-weight: var(--font-semibold); }
.days-val--over { color: var(--color-danger);  font-weight: var(--font-semibold); }

/* ----------------------------------------------------------
   PROGRESS BAR (стадия сделки)
   ---------------------------------------------------------- */

.progress-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 120px;
}

.progress-segment {
  position: relative;
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--progress-track-bg);
  cursor: pointer;
  transition: height 0.1s, opacity 0.1s;
}

/* расширяем область клика вертикально без изменения визуала */
.progress-segment::before {
  content: '';
  position: absolute;
  inset: -6px 0;
}

/* тултип с названием стадии */
.progress-segment::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity   var(--transition-fast),
    transform var(--transition-fast);
  z-index: var(--z-tooltip);
  box-shadow: var(--shadow-sm);
}

.progress-segment:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Поднимаем stacking context ячейки над sticky-thead,
   чтобы тултип прогресс-бара не перекрывался шапкой таблицы */
.tbl__td:has(.progress-segment:hover) {
  position: relative;
  z-index: calc(var(--z-sticky-th) + 1); /* 191 > 190 */
}

.progress-segment:hover {
  height: 6px;
  opacity: 0.85;
}

.progress-segment.active-segment {
  background: var(--color-accent);
}

/* Последний сегмент — «Закрыть сделку» — неактивен */
.progress-segment.close-segment {
  background: var(--color-danger-muted);
}

/* Последний сегмент активен */
.progress-segment.active-segment.close-segment {
  background: var(--color-danger);
}

.progress-label {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ----------------------------------------------------------
   STAGE PICKER (меню выбора стадии закрытия сделки)
   ---------------------------------------------------------- */

.stage-picker {
  position: fixed;
  min-width: 200px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), var(--dropdown-extra-glow);
  padding: var(--space-2) 0;
  z-index: var(--z-dropdown);

  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  transform-origin: top left;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity    var(--transition-base),
    transform  var(--transition-base),
    visibility var(--transition-base);
}

.stage-picker.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  visibility: visible;
}

.stage-picker.drop-up {
  transform-origin: bottom left;
  transform: translateY(4px) scale(0.98);
}

.stage-picker.drop-up.is-open {
  transform: translateY(0) scale(1);
}

.stage-picker__item {
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.stage-picker__item:hover {
  background: var(--color-bg-overlay);
  color: var(--color-text-primary);
}

/* ----------------------------------------------------------
   SOURCE ICON (иконка источника в таблице лидов)
   ---------------------------------------------------------- */

.source-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--color-info-muted);
  color: var(--color-info);
  flex-shrink: 0;
}

.source-icon svg {
  width: 12px;
  height: 12px;
}

.source-icon--png {
  background: transparent;
  border-radius: 4px;
  object-fit: contain;
  opacity: 0.45;
}

.source-icon--unknown {
  font-size: 12px;
  color: var(--text-muted);
  background: transparent;
}

/* ----------------------------------------------------------
   UNIVERSAL TABLE  (.tbl)
   ---------------------------------------------------------- */

.tbl-wrap {
  /* overflow убран — прокрутку берёт на себя .page-body.
     Это позволяет thead sticky-литься к top:0 внутри .page-body
     без блокировки промежуточным scroll-контейнером. */
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  border-top: 1px solid var(--color-border-accent);
  width: 100%;
}

.tbl {
  width: 100%;
  table-layout: fixed; /* колонки масштабируются пропорционально, таблица всегда влезает в контейнер */
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
}

/* --- thead --- */

.tbl__head {
  position: sticky;
  top: 0;             /* прилипает к верху .page-body — визуально к низу .page-header */
  z-index: var(--z-sticky-th);
}

.tbl__th {
  background: var(--color-bg-elevated);
  color: var(--color-text-muted);
  font-weight: var(--font-medium);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--space-3) var(--space-5);
  text-align: left;
  white-space: normal;
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 0 var(--color-border-accent);
  user-select: none;
}

.tbl__th:first-child { border-radius: var(--radius-lg) 0 0 0; }
.tbl__th:last-child  { border-radius: 0 var(--radius-lg) 0 0; }

/* сортируемый th */
.th--sortable {
  cursor: pointer;
  transition: color var(--transition-fast);
}

.th--sortable:hover {
  color: var(--color-text-secondary);
}

.th-sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.th-sort__label { pointer-events: none; }

.th-sort__icon {
  width: 10px;
  height: 12px;
  flex-shrink: 0;
  pointer-events: none;
  opacity: 0.4;
  transition: opacity var(--transition-fast);
}

.th--sortable:hover .th-sort__icon,
.th-sort__icon--asc,
.th-sort__icon--desc {
  opacity: 1;
}

.th-sort__icon--asc  { color: var(--color-accent); }
.th-sort__icon--desc { color: var(--color-accent); }

/* --- tbody --- */

.tbl__row {
  transition: background var(--transition-fast);
}

.tbl__row:hover { background: var(--color-bg-overlay); }

.tbl__row:hover .tbl__td { color: var(--color-text-primary); }

.tbl__td {
  padding: var(--space-4) var(--space-5);
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: middle;
  transition: color var(--transition-fast);
}

.tbl__row:last-child .tbl__td { border-bottom: none; }

/* модификаторы ячеек */
.tbl__td--phone   { color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.tbl__td--primary { color: var(--color-text-primary); }
.tbl__td--muted   { color: var(--color-text-muted); font-style: italic; }

.time--mismatch   { color: var(--color-danger); }

/* разворачиваемые ячейки */
.tbl__td { max-width: 32ch; }

.tbl__cell-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.tbl__cell-text {
  display: block;
  max-width: 100%;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  overflow-wrap: break-word; /* длинные неразрывные строки (почта, ссылки) переносятся внутри своей колонки, а не наезжают на соседние */
}

.tbl__cell-wrap.is-expanded .tbl__cell-text {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: break-word;
}

/* Редактируемые ячейки */
.tbl__cell-text[contenteditable] {
  display: block;
  width: 100%;
  min-height: 1.25em;
  cursor: text;
  outline: none;
  border-radius: 2px;
  -webkit-user-select: text;
  user-select: text;
}
.tbl__cell-text[contenteditable]:focus {
  outline: none;
  box-shadow: none;
}

.tbl__expand-btn {
  display: flex;
  align-items: center;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
  line-height: 1;
}

.tbl__expand-btn:hover { color: var(--color-text-secondary); }

.tbl__expand-btn svg {
  transition: transform var(--transition-fast);
}

.tbl__cell-wrap.is-expanded .tbl__expand-btn svg {
  transform: rotate(180deg);
}

/* пустое состояние */
.tbl__empty {
  text-align: center;
  padding: var(--space-11) var(--space-6);
}

.tbl__empty-text {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.tbl__empty-text::before {
  content: '> ';
  color: var(--color-accent);
}

/* ----------------------------------------------------------
   PRODUCTS MODAL (.pm)  — попап «Товары сделки»
   ---------------------------------------------------------- */

.pm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: var(--space-6);
}

.pm {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), var(--dropdown-extra-glow);
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Шапка */
.pm__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.pm__title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  letter-spacing: 0.04em;
}

.pm__close {
  width: 22px;
  height: 22px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.pm__close:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-overlay);
}

/* Тело */
.pm__body {
  padding: var(--space-4) var(--space-5);
  overflow-x: auto;
}

/* Подвал с кнопками */
.pm__foot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-5) var(--space-4);
  flex-shrink: 0;
}

/* Таблица товаров */

.pm-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.pm-tbl__th {
  background: var(--color-bg-surface);
  color: var(--color-text-muted);
  font-weight: var(--font-medium);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.pm-tbl__th--num { text-align: right; }

.pm-tbl__td {
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: middle;
}

.pm-tbl__td--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pm-tbl__td--dash {
  color: var(--color-text-muted);
}

/* Строка «Итого» */
.pm-tbl__row--total .pm-tbl__td {
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  border-top: 1px solid var(--color-border);
  border-bottom: none;
}

/* Строка ввода нового товара */
.pm-tbl__row--new .pm-tbl__td {
  padding: var(--space-2) var(--space-3);
}

/* Колонка «Услуга оказана и оплачена» */
.pm-tbl__th--check {
  text-align: center;
  white-space: normal;
  max-width: 110px;
  line-height: 1.3;
}

.pm-tbl__td--check {
  text-align: center;
  width: 1%;
  white-space: nowrap;
}

.pm-checkbox {
  width: 15px;
  height: 15px;
  accent-color: var(--color-accent);
  cursor: pointer;
}

/* Закрытый товар («услуга оказана и оплачена») — перечёркнут */
.pm-tbl__row--closed .pm-tbl__td:not(.pm-tbl__td--check):not(.pm-tbl__td--act) {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

/* Инпуты внутри таблицы */
.pm-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--color-bg-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: var(--font-base);
  font-size: var(--text-sm);
  padding: 0 var(--space-3);
  height: 26px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--transition-fast);
}

.pm-input::placeholder { color: var(--color-text-muted); }

.pm-input:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 2px var(--color-accent-muted);
}

.pm-input--num {
  text-align: right;
  min-width: 70px;
}

.pm-input--qty { min-width: 44px; }

/* Кнопки в подвале */
.pm__btn {
  height: 26px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-family: var(--font-base);
  font-size: var(--text-sm);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background  var(--transition-fast),
    color       var(--transition-fast),
    box-shadow  var(--transition-fast);
}

.pm__btn--add {
  width: 26px;
  padding: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  line-height: 1;
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border-color: var(--color-accent);
}

.pm__btn--add:hover {
  background: var(--color-accent-dim);
  border-color: var(--color-accent-dim);
}

.pm__btn--confirm {
  background: var(--color-accent-muted);
  color: var(--color-accent);
  border-color: var(--color-border-accent);
}

.pm__btn--confirm:hover {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  box-shadow: var(--color-accent-glow);
}

.pm__btn--cancel {
  background: transparent;
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

.pm__btn--cancel:hover {
  color: var(--color-text-secondary);
  border-color: var(--color-border-accent);
}

/* ----------------------------------------------------------
   SECTION BLOCK — переиспользуемый блок с унифицированной шапкой
   Используется на страницах задач, настроек и любых будущих страницах.
   ---------------------------------------------------------- */

.section-block {
  position: relative;
  border: 1px solid var(--color-border);
  border-top-color: transparent;
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
  overflow: hidden;
}

/* зелёная полоса сверху */
.section-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #00ff9d66 30%, #00ff9daa 50%, #00ff9d66 70%, transparent 100%);
}

.section-block__hdr {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: #161e1b;
  border-bottom: 1px solid var(--color-border-subtle);
}

.section-block__title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
  color: #7ec8a4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  flex: 1;
  margin: 0;
}

/* светлая тема */
[data-theme="light"] .section-block {
  border-top-color: var(--color-border);
}

[data-theme="light"] .section-block::before {
  display: none;
}

[data-theme="light"] .section-block__hdr {
  background: var(--color-bg-elevated);
}

[data-theme="light"] .section-block__title {
  color: var(--color-text-primary);
}

/* ----------------------------------------------------------
   DATEPICKER POPUP  (.dp-*)
   ---------------------------------------------------------- */

.dp-popup {
  position: fixed;
  z-index: var(--z-dropdown);
  width: 228px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), var(--dropdown-extra-glow);
  padding: var(--space-4);
  user-select: none;
}

.dp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.dp-nav__title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.dp-nav__btn {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.dp-nav__btn:hover {
  color: var(--color-accent);
  border-color: var(--color-border-accent);
}

.dp-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: var(--space-2);
}

.dp-weekday {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding-bottom: var(--space-1);
}

.dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.dp-day {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: var(--text-xs);
  font-family: var(--font-base);
  height: 26px;
  width: 100%;
  padding: 0;
  transition:
    background     var(--transition-fast),
    color          var(--transition-fast),
    border-color   var(--transition-fast);
}

.dp-day:hover:not(:disabled) {
  background: var(--color-accent-muted);
  color: var(--color-accent);
  border-color: var(--color-border-accent);
}

.dp-day--today {
  border-color: var(--color-border-accent);
  color: var(--color-accent);
}

.dp-day--selected {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border-color: var(--color-accent);
  font-weight: var(--font-semibold);
}

.dp-day--selected:hover {
  background: var(--color-accent-dim);
  border-color: var(--color-accent-dim);
}

.dp-day--other {
  color: var(--color-text-muted);
  opacity: 0.35;
}

.dp-footer {
  margin-top: var(--space-4);
  display: flex;
  justify-content: center;
}

.dp-clear {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: var(--text-xs);
  font-family: var(--font-base);
  padding: var(--space-1) var(--space-5);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.dp-clear:hover {
  color: var(--color-danger);
  border-color: var(--color-danger);
}

/* ----------------------------------------------------------
   DATEPICKER — инлайн выбор диапазона дат (.datepicker-*)
   ui/datepicker.js: renderDateRangePicker() / mountDateRangePicker()
   ---------------------------------------------------------- */

.datepicker {
  width: 100%;
  max-width: 380px;
  user-select: none;
}

.datepicker__hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.datepicker__title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.datepicker__nav {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.datepicker__nav svg {
  width: 14px;
  height: 14px;
}

.datepicker__nav:hover {
  color: var(--color-accent);
  border-color: var(--color-border-accent);
}

.datepicker__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: var(--space-2);
}

.datepicker__weekday {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.datepicker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.datepicker__day {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: var(--text-xs);
  font-family: var(--font-base);
  height: 28px;
  width: 100%;
  padding: 0;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.datepicker__day:hover {
  background: var(--color-accent-muted);
  color: var(--color-accent);
  border-color: var(--color-border-accent);
}

.datepicker__day--other {
  color: var(--color-text-muted);
  opacity: 0.35;
}

.datepicker__day--today {
  border-color: var(--color-border-accent);
}

.datepicker__day--in-range {
  background: var(--color-accent-muted);
  border-radius: 0;
}

.datepicker__day--start,
.datepicker__day--end {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  font-weight: var(--font-semibold);
}

.datepicker__day--start:hover,
.datepicker__day--end:hover {
  background: var(--color-accent-dim);
}

/* ----------------------------------------------------------
   TASK MODAL (tm-*)
   Попап создания задачи — overlay + блок в стиле section-block
   ---------------------------------------------------------- */

.tm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
  padding-bottom: 40px;
  overflow-y: auto;
}

.tm-overlay:has(.tm--wide) {
  align-items: center;
  padding: 16px;
}

.tm {
  position: relative;
  width: 520px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 120px);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md), var(--card-glow);
  display: flex;
  flex-direction: column;
  overflow: visible;
  transition: width var(--transition-base);
}

/* зелёная полоса сверху — как у section-block */
.tm::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent) 0%, transparent 100%);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  pointer-events: none;
}

/* расширенный режим */
.tm--wide {
  width: min(880px, calc(100vw - 32px));
  height: calc(100vh - 32px);
}

/* шапка */
.tm__hdr {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  min-height: 44px;
}

/* поле с названием задачи — выглядит как заголовок */
.tm__title-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  letter-spacing: 0.04em;
  padding: 0;
}

.tm__title-input::placeholder {
  color: var(--color-text-muted);
  font-weight: var(--font-normal);
}

.tm__title-input--error::placeholder {
  color: var(--color-danger);
}

.tm__title-input--error {
  caret-color: var(--color-danger);
}

.tm__hdr-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* огонёк — активное состояние */
.tm__flame-btn.is-active {
  color: #ff8c00;
  border-color: #ff8c0044;
  background: #ff8c0011;
}

.tm__flame-btn.is-active:hover {
  color: #ff8c00;
  background: #ff8c0022;
  border-color: #ff8c0066;
  box-shadow: 0 0 8px #ff8c0033;
}

/* глазик — активное состояние */
.tm__eye-btn.is-active {
  color: var(--color-accent);
  border-color: var(--color-border-accent);
  background: var(--color-accent-muted);
}

/* тело попапа */
.tm__body {
  padding: var(--space-5) var(--space-5) var(--space-4);
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* строка поля: лейбл + контрол */
.tm-field {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  gap: var(--space-3);
}

.tm-field__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.tm-field__ctrl {
  width: 100%;
  box-sizing: border-box;
  height: 32px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: var(--font-base);
  font-size: var(--text-sm);
  padding: 0 var(--space-3);
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    box-shadow   var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
}

/* стрелка для select */
.tm-field__select-wrap {
  position: relative;
  width: 100%;
}

.tm-field__select-wrap::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--color-text-muted);
  pointer-events: none;
}

.tm-field__select-wrap .tm-field__ctrl {
  width: 100%;
  padding-right: 28px;
}

.tm-field__ctrl:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 2px var(--color-accent-muted);
}

.tm-field__ctrl:hover {
  border-color: var(--color-border-accent);
}

/* textarea для описания */
.tm-field__ctrl--textarea {
  height: 80px;
  padding: var(--space-2) var(--space-3);
  resize: vertical;
  line-height: var(--leading-normal);
  cursor: text;
}

.tm-field__ctrl--textarea::placeholder {
  color: var(--color-text-muted);
}

/* кастомный мультиселект «Исполнители» */
.tm-multiselect {
  position: relative;
  width: 100%;
}

.tm-multiselect__display {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 28px;
}

.tm-multiselect__display::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--color-text-muted);
  pointer-events: none;
}

.tm-multiselect__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-focus);
  border-radius: var(--radius-md);
  z-index: var(--z-dropdown);
  max-height: 180px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.tm-multiselect--open .tm-multiselect__dropdown {
  display: block;
}

.tm-multiselect__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}

.tm-multiselect__item:hover {
  background: var(--color-bg-hover, rgba(255,255,255,0.05));
}

.tm-multiselect__item input[type="checkbox"] {
  accent-color: var(--color-accent);
  cursor: pointer;
  flex-shrink: 0;
}

.tm-multiselect__group-label {
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  pointer-events: none;
  border-top: 1px solid var(--color-border, rgba(255,255,255,0.08));
}

.tm-multiselect__group-label:first-child {
  border-top: none;
}

/* описание — лейбл сверху, не в сетке */
.tm-field--textarea {
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

/* в широком режиме поле с описанием тянется на остаток высоты */
.tm--wide .tm-field--textarea {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
}

.tm--wide .tm-field--textarea .md-editor {
  flex: 1;
  min-height: 0;
}

.tm--wide .md-editor__edit-pane {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.tm--wide .md-editor__edit-pane[hidden],
.tm--wide .md-editor__preview-pane[hidden] {
  display: none;
}

.tm--wide .md-editor__preview-pane {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.tm--wide .md-editor__textarea {
  flex: 1;
  resize: vertical;
}

/* панель видимости (глазик) — выезжает справа */
.tm-eye-panel {
  position: absolute;
  top: 0;
  left: calc(100% + var(--space-3));
  width: 240px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md), var(--card-glow);
  padding: var(--space-4);
  display: none;
  flex-direction: column;
  gap: var(--space-4);
}

.tm-eye-panel.is-open {
  display: flex;
}

/* зелёная полоса у панели */
.tm-eye-panel::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent) 0%, transparent 100%);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  pointer-events: none;
}

.tm-eye-group__title {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

.tm-eye-group__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  cursor: pointer;
}

.tm-eye-group__item input[type="checkbox"] {
  accent-color: var(--color-accent);
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  cursor: pointer;
}

.tm-eye-group__name {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.tm-eye-group__dept-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: var(--space-3);
  margin-bottom: var(--space-1);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border);
}

.tm-eye-group__dept-label:first-child {
  margin-top: 0;
}

/* подвал */
.tm__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-5) var(--space-4);
  border-top: 1px solid var(--color-border);
}

.tm__footer-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.tm__submit {
  height: 34px;
  padding: 0 var(--space-6);
  background: var(--color-accent-muted);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-md);
  color: var(--color-accent);
  font-family: var(--font-base);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition:
    background    var(--transition-fast),
    color         var(--transition-fast),
    border-color  var(--transition-fast),
    box-shadow    var(--transition-fast);
}

.tm__submit:hover {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  box-shadow: var(--color-accent-glow);
}

.tm__submit:active {
  background: var(--color-accent-dim);
  box-shadow: none;
}

.tm__submit--danger {
  background: transparent;
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.tm__submit--danger:hover {
  background: var(--color-danger);
  color: #fff;
  box-shadow: 0 0 10px color-mix(in srgb, var(--color-danger) 40%, transparent);
}

.tm__submit--danger:active {
  opacity: .85;
  box-shadow: none;
}

/* светлая тема */
[data-theme="light"] .tm {
  border-top-color: var(--color-border);
}

[data-theme="light"] .tm::before,
[data-theme="light"] .tm-eye-panel::before {
  display: none;
}

[data-theme="light"] .tm__hdr {
  background: var(--color-bg-elevated);
}

/* ============================================================
   MARKDOWN CONTENT — .md-content
   Рендер Markdown-текста в превью и теле задачи
   ============================================================ */

.md-content {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  word-break: break-word;
}

.md-content .md-h1, .md-content .md-h2, .md-content .md-h3,
.md-content .md-h4, .md-content .md-h5, .md-content .md-h6 {
  color: var(--color-text-accent);
  font-weight: var(--font-semibold);
  margin: var(--space-6) 0 var(--space-3);
  line-height: var(--leading-tight);
}
.md-content .md-h1 { font-size: var(--text-2xl); }
.md-content .md-h2 { font-size: var(--text-xl); }
.md-content .md-h3 { font-size: var(--text-lg); }
.md-content .md-h4 { font-size: var(--text-md); }
.md-content .md-h5,
.md-content .md-h6 { font-size: var(--text-base); }

.md-content .md-p {
  margin: 0 0 var(--space-4);
}

.md-content .md-hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-6) 0;
}

.md-content .md-ul {
  list-style: disc;
  margin: 0 0 var(--space-4);
  padding-left: var(--space-7);
}

.md-content .md-ol {
  list-style: decimal;
  margin: 0 0 var(--space-4);
  padding-left: var(--space-7);
}

.md-content li {
  margin-bottom: var(--space-1);
}

.md-content .md-task-item {
  list-style: none;
  margin-left: calc(var(--space-7) * -1);
  padding-left: 0;
}

.md-content .md-checkbox {
  appearance: auto;
  margin-right: var(--space-3);
  accent-color: var(--color-accent);
  cursor: default;
}

.md-content .md-code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  color: var(--color-secondary);
}

.md-content .md-pre {
  position: relative;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin: 0 0 var(--space-4);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
}

.md-content .md-pre code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  white-space: inherit;
}

.md-pre__copy {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  padding: 1px var(--space-3);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}

.md-content .md-pre:hover .md-pre__copy {
  opacity: 1;
}

.md-pre__copy:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.md-pre__copy[data-copied] {
  color: var(--color-accent);
  border-color: var(--color-accent);
  opacity: 1;
}

.md-content .md-blockquote {
  border-left: 3px solid var(--color-border-accent);
  padding-left: var(--space-5);
  margin: 0 0 var(--space-4);
  color: var(--color-text-secondary);
}

.md-content .md-table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
}

.md-content .md-th,
.md-content .md-td {
  border: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-4);
  text-align: left;
}

.md-content .md-th {
  background: var(--color-bg-elevated);
  color: var(--color-text-accent);
  font-weight: var(--font-semibold);
}

.md-content .md-mark {
  background: rgba(255, 204, 0, 0.2);
  color: var(--color-warning);
  border-radius: var(--radius-sm);
  padding: 0 2px;
}

.md-content .md-link {
  color: var(--color-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.md-content .md-link:hover {
  color: var(--color-accent);
}

.md-content .md-wikilink {
  color: var(--color-accent);
  opacity: 0.75;
}

.md-content .md-callout {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  overflow: hidden;
  margin: 0 0 var(--space-4);
}

.md-content .md-callout__title {
  padding: var(--space-2) var(--space-5);
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  background: var(--color-bg-elevated);
  border-left: 3px solid var(--color-border);
}

.md-content .md-callout__body {
  padding: var(--space-3) var(--space-5);
}

.md-content .md-callout--note .md-callout__title    { color: var(--color-info);    border-left-color: var(--color-info); }
.md-content .md-callout--tip .md-callout__title     { color: var(--color-accent);  border-left-color: var(--color-accent); }
.md-content .md-callout--info .md-callout__title    { color: var(--color-info);    border-left-color: var(--color-info); }
.md-content .md-callout--warning .md-callout__title { color: var(--color-warning); border-left-color: var(--color-warning); }
.md-content .md-callout--danger .md-callout__title,
.md-content .md-callout--error .md-callout__title   { color: var(--color-danger);  border-left-color: var(--color-danger); }

.md-content strong { font-weight: var(--font-semibold); }
.md-content em     { font-style: italic; }
.md-content del    { text-decoration: line-through; color: var(--color-text-muted); }

/* ============================================================
   MARKDOWN EDITOR — .md-editor
   Редактор с вкладками «Редактировать» / «Превью»
   ============================================================ */

.md-editor {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-surface);
  transition: border-color var(--transition-fast);
}

.md-editor:focus-within {
  border-color: var(--color-border-focus);
}

.md-editor__tabs {
  display: flex;
  background: var(--color-bg-elevated);
  border-bottom: 1px solid var(--color-border);
  padding: 0 var(--space-3);
}

.md-editor__tab {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: none;
  border: none;
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.md-editor__tab:hover {
  color: var(--color-text-secondary);
}

.md-editor__tab--active {
  color: var(--color-text-accent);
  border-bottom-color: var(--color-accent);
}

.md-editor__textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  background: transparent;
  border: none;
  outline: none;
  padding: var(--space-4) var(--space-5);
  resize: vertical;
  min-height: 80px;
  line-height: var(--leading-normal);
}

.md-editor__textarea::placeholder {
  color: var(--color-text-muted);
}

.md-editor__preview-pane {
  padding: var(--space-4) var(--space-5);
  min-height: 80px;
}

[data-theme="light"] .md-content .md-pre,
[data-theme="light"] .md-content .md-code,
[data-theme="light"] .md-content .md-th {
  background: var(--color-bg-overlay);
}

/* ----------------------------------------------------------
   TABLE SUGGEST — автокомплит для редактируемых ячеек
   ---------------------------------------------------------- */

.tbl-suggest {
  position: absolute;
  z-index: var(--z-dropdown);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  max-height: 220px;
  overflow-y: auto;
  min-width: 160px;
}

.tbl-suggest__item {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tbl-suggest__item:hover,
.tbl-suggest__item--active {
  background: var(--color-bg-overlay);
  color: var(--color-accent);
}

/* подсветка ячейки в момент редактирования */
.tbl__cell-text[contenteditable]:focus {
  outline: 1px solid var(--color-accent) !important;
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
}

/* ----------------------------------------------------------
   MANAGER CELL — кликабельное имя менеджера в таблице лидов
   ---------------------------------------------------------- */

.manager-cell {
  cursor: pointer;
  text-decoration: underline dotted var(--color-text-muted);
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}

.manager-cell:hover {
  color: var(--color-accent);
}

.status-cell {
  cursor: pointer;
}

.status-cell:hover .badge {
  opacity: .8;
}

.manager-dropdown {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  min-width: 140px;
  max-height: 220px;
  overflow-y: auto;
  z-index: var(--z-dropdown);
}

.manager-dropdown__item {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  cursor: pointer;
  white-space: nowrap;
}

.manager-dropdown__item:hover {
  background: var(--color-bg-overlay);
  color: var(--color-accent);
}

.manager-dropdown__item--active {
  color: var(--color-accent);
}

.manager-dropdown__item--deal {
  color: var(--color-accent);
  font-weight: var(--font-semibold);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-1);
  padding-bottom: var(--space-2);
}

.manager-dropdown__item--deal:hover {
  color: var(--color-accent);
}

.manager-dropdown__item:hover .badge,
.manager-dropdown__item--active .badge {
  opacity: .85;
}

/* ----------------------------------------------------------
   NO-DATE TOAST — всплывашка при попытке выгрузки без дат
   ---------------------------------------------------------- */

@keyframes toast-slide-in {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to   { opacity: 1; transform: translate(-50%, 0);     }
}

.no-date-toast {
  position: fixed;
  top: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-8);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), 0 0 20px color-mix(in srgb, var(--color-danger) 30%, transparent);
  color: var(--color-text-primary);
  font-size: var(--text-md);
  pointer-events: none;
  white-space: nowrap;
  animation: toast-slide-in var(--transition-base) forwards;
}

.no-date-toast__skull {
  font-size: var(--text-xl);
  line-height: 1;
}

/* ----------------------------------------------------------
   REOPEN-REQUESTED TOAST — заявка на возобновление товара отправлена руководителю
   ---------------------------------------------------------- */

.reopen-requested-toast {
  position: fixed;
  top: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-modal);
  padding: var(--space-5) var(--space-8);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: var(--color-text-primary);
  font-size: var(--text-md);
  pointer-events: none;
  white-space: nowrap;
  animation: toast-slide-in var(--transition-base) forwards;
}

/* разделитель «—» между полями диапазона дат в фильтрах */
.entities-filters__range-sep {
  color: var(--color-text-muted);
  padding: 0 var(--space-2);
  flex-shrink: 0;
}

/* Группа radio-кнопок в выпадающем фильтре */
.filter-dropdown__group {
  padding: var(--space-2) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.filter-dropdown__radio {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  transition: background var(--transition-fast);
}

.filter-dropdown__radio:hover {
  background: var(--color-bg-overlay);
}

.filter-dropdown__radio input[type="radio"],
.filter-dropdown__radio input[type="checkbox"] {
  accent-color: var(--color-accent);
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.filter-dropdown__divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-1) var(--space-3);
}

/* ----------------------------------------------------------
   PIPELINE POPUP — попап выбора воронки при создании сделки
   ---------------------------------------------------------- */

.pipeline-popup__body {
  padding: var(--space-5) var(--space-6);
}

.pipeline-popup__sub {
  margin: 0 0 var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.pipeline-popup__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pipeline-popup__option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.pipeline-popup__option:hover {
  border-color: var(--color-border-accent);
  background: var(--color-accent-muted);
}

.pipeline-popup__option:has(input:checked) {
  border-color: var(--color-border-accent);
  background: var(--color-accent-muted);
}

.pipeline-popup__option input[type="radio"] {
  accent-color: var(--color-accent);
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
}

/* ----------------------------------------------------------
   CREATE DEAL MODAL — попап создания сделки из лида
   ---------------------------------------------------------- */

.cd-modal__body {
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cd-modal__sub {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.cd-section {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cd-section__title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.cd-required {
  color: var(--color-danger, #e05a5a);
  margin-left: 2px;
}

/* широкая колонка label для длинных подписей внутри cd-section */
.cd-section .tm-field {
  grid-template-columns: 140px 1fr;
}

/* обёртка с relative для autocomplete-дропдауна */
.cd-autocomplete-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
}

/* ----------------------------------------------------------
   AUTOCOMPLETE DROPDOWN
   ---------------------------------------------------------- */

.ac-dropdown {
  position: fixed;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  z-index: var(--z-tooltip);
  max-height: 180px;
  overflow-y: auto;
}

.ac-dropdown__item {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ac-dropdown__item:hover,
.ac-dropdown__item--active {
  background: var(--color-bg-surface);
  color: var(--color-accent);
}

/* ----------------------------------------------------------
   LEAD CARD — карточка лида на весь экран (правее сайдбара)
   ---------------------------------------------------------- */

.lead-card {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  /* left задаётся в JS по ширине сайдбара */
  z-index: var(--z-modal);
  background: var(--color-bg-base);
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--color-border-accent);
  box-shadow: -6px 0 32px rgba(0, 0, 0, 0.55);
}

.lead-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -1px;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent) 0%, transparent 80%);
  pointer-events: none;
}

/* ---- Топ-бар ---- */

.lead-card__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 var(--space-5);
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  min-height: 48px;
}

.lead-card__source {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Pipeline стадий лида ---- */

.lead-card__pipeline {
  display: flex;
  flex-shrink: 0;
  border-bottom: 1px solid var(--color-border);
}

.lc-stage {
  flex: 1;
  min-height: 40px;
  padding: 0 var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-bg-surface);
  border: none;
  border-right: 1px solid var(--color-border);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  text-align: center;
}

.lc-stage:last-child { border-right: none; }

.lc-stage:hover {
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
}

.lc-stage--active { pointer-events: none; }

.lc-stage--active.lc-stage--color-new        { background: var(--color-purple-muted); color: var(--color-purple); }
.lc-stage--active.lc-stage--color-processing { background: var(--color-warning-muted); color: var(--color-warning); }
.lc-stage--active.lc-stage--color-target     { background: var(--color-success-muted); color: var(--color-success); }
.lc-stage--active.lc-stage--color-recurring  { background: var(--color-info-muted); color: var(--color-info); }
.lc-stage--active.lc-stage--color-other      { background: var(--color-danger-muted); color: var(--color-danger); }

.lc-stage--close { color: var(--color-text-muted); }

.lc-stage--close:hover {
  color: var(--color-danger);
  background: var(--color-danger-muted);
}

/* ---- Тело: двухколоночная сетка ---- */

.lead-card__body {
  display: grid;
  grid-template-columns: 280px 1fr;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.lead-card__left {
  overflow-y: auto;
  padding: var(--space-6);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.lead-card__right {
  overflow-y: auto;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* ----------------------------------------------------------
   DEAL CARD — карточка сделки, тот же каркас, что у карточки лида
   (без панели pipeline — у сделки стадии меняются прогресс-баром в таблице)
   ---------------------------------------------------------- */

.deal-card {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  /* left задаётся в JS по ширине сайдбара */
  z-index: var(--z-modal);
  background: var(--color-bg-base);
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--color-border-accent);
  box-shadow: -6px 0 32px rgba(0, 0, 0, 0.55);
}

.deal-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -1px;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent) 0%, transparent 80%);
  pointer-events: none;
}

.deal-card__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 var(--space-5);
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  min-height: 48px;
}

.deal-card__source {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deal-card__body {
  display: grid;
  grid-template-columns: 280px 1fr;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.deal-card__left {
  overflow-y: auto;
  padding: var(--space-6);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.deal-card__right {
  overflow-y: auto;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* ---- Секции ---- */

.lc-section__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-3);
}

.lc-section__value {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-2);
}

.lc-section__value:last-child { margin-bottom: 0; }

.lc-section__value--muted { color: var(--color-text-secondary); }

.lc-section__value--phone { font-variant-numeric: tabular-nums; }

.lc-section__value--source { display: flex; align-items: center; gap: var(--space-2); }

.lc-section__value--strong { font-weight: 600; color: var(--color-text-primary); }

/* ---- Сводка по сумме сделки (карточка сделки, над «Менеджер») ---- */

.dc-amount {
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.dc-amount__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-sm);
  padding: var(--space-1) 0;
}

.dc-amount__label {
  color: var(--color-text-muted);
}

.dc-amount__value {
  color: var(--color-text-primary);
  font-weight: var(--font-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dc-amount__value--paid { color: var(--color-success); }
.dc-amount__value--due  { color: var(--color-warning); }

/* ---- Ссылки внутри карточки ---- */

.lc-link {
  color: var(--color-text-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
}

.lc-link:hover { text-decoration: underline; }

.lc-link__icon {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  opacity: .7;
}

/* ---- Кнопка перехода (мягкий бейдж) ---- */

.lc-goto {
  display: inline-block;
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.lc-goto:hover {
  border-color: var(--color-accent);
  color: var(--color-text-accent);
}

/* ---- Текстарея комментария ---- */

.lc-comment-input {
  width: 100%;
  min-height: 80px;
  resize: vertical;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  padding: var(--space-3) var(--space-4);
  outline: none;
  transition: border-color var(--transition-fast);
  box-sizing: border-box;
}

.lc-comment-input:focus { border-color: var(--color-border-focus); }

/* ---- Быстрые действия ---- */

.lc-quick-btns {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ---- Общая кнопка lc-btn ---- */

.lc-btn {
  height: 32px;
  padding: 0 var(--space-5);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.lc-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-text-primary);
}

.lc-btn--accent {
  border-color: var(--color-border-accent);
  color: var(--color-text-accent);
}

.lc-btn--accent:hover {
  background: var(--color-accent-muted);
  border-color: var(--color-accent);
}

.lc-btn--outline {
  border-color: var(--color-border-accent);
  color: var(--color-text-accent);
}

.lc-btn--outline:hover { background: var(--color-accent-muted); }

.lc-btn--sm {
  height: 26px;
  padding: 0 var(--space-4);
  font-size: var(--text-xs);
}

.lc-btn--full {
  width: 100%;
}

.lc-btn:disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

/* ---- История диалогов ---- */

.lc-history {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.lc-history__loading,
.lc-history__empty {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  padding: var(--space-2) 0;
}

.lc-history__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.lc-history__item--missed { border-color: var(--color-danger-muted); }

.lc-history__label {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.lc-history__date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.lc-history__manager {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

/* ---- История изменений лида (lca = lead changes activity) ---- */

.lca-body {
  padding: 0 !important;
  max-height: 60vh;
  overflow-y: auto;
}

.lca-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.lca-item:last-child { border-bottom: none; }

.lca-item__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.lca-item__date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lca-item__who {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.lca-item__change {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.lca-item__field {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  font-weight: 500;
  white-space: nowrap;
}

.lca-item__values {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  word-break: break-all;
}

.lca-item__arrow {
  color: var(--color-text-muted);
}

.lca-item__empty {
  color: var(--color-text-muted);
  font-style: italic;
}