/*
  Стили раздела «Операторы» (operators.js). Токены и базовые классы
  (.card, .btn, .pill, .empty, .sec, .field, .list__*, .num, .kpis, .alert,
  .spinner, .loading-row) — из app.css, здесь только то, чего там нет:
  тулбар и фильтры списка, таблица с сортируемыми заголовками, канбан
  с перетаскиванием, карточка оператора (шапка, вкладки), модальные окна
  контактов/ленты/задач и мини-прогресс чек-листа. Пространство имён
  классов — префикс "op-", независимо от tasks.css/waves.css (свой раздел,
  свой файл). Собственных цветов вне палитры DESIGN.md не вводим — красный
  (var(--ember)) только для тревожных числовых порогов (как и в остальном
  приложении, напр. «просрочено») и деструктивных действий (архивация).
*/

/* ─────────────────────────── Тулбар и фильтры ─────────────────────────── */

.op-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s12);
  margin-bottom: var(--s16);
}

.op-toolbar__right {
  display: flex;
  align-items: center;
  gap: var(--s8);
  flex-wrap: wrap;
}

.op-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s12);
  padding: var(--s16);
  margin-bottom: var(--s20);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}

.op-filter {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  min-width: 0;
}

.op-filter > label {
  font-size: var(--text-caption);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 500;
  white-space: nowrap;
}

.op-filter select,
.op-filter input[type="text"],
.op-filter input[type="search"] {
  height: 36px;
  padding: 0 var(--s12);
  background: var(--surface-alt);
  border: 1px solid var(--hairline);
  border-radius: var(--r-control);
  font-size: var(--text-body);
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
  min-width: 0;
}

.op-filter select:hover,
.op-filter input:hover {
  border-color: var(--hairline-strong);
}

.op-filter select:focus,
.op-filter input:focus {
  outline: none;
  background: var(--paper);
  border-color: var(--ink);
}

.op-filter--search {
  flex: 1 1 220px;
}

.op-filter-spacer {
  flex: 1;
}

/* ─────────────────────────── Таблица ─────────────────────────── */

.op-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  background: var(--paper);
}

.op-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body);
  min-width: 720px;
}

.op-table th,
.op-table td {
  padding: var(--s12) var(--s16);
  text-align: left;
  white-space: nowrap;
}

.op-table thead th {
  font-size: var(--text-caption);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 500;
  border-bottom: 1px solid var(--hairline);
}

.op-table th.num,
.op-table td.num {
  text-align: right;
}

.op-th-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  font-size: var(--text-caption);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 500;
  cursor: pointer;
}

.op-th-sort:hover {
  color: var(--ink);
}

.op-th-sort[aria-sort]:not([aria-sort="none"]) {
  color: var(--ink);
}

.op-th-sort__arrow {
  font-size: 10px;
  line-height: 1;
}

.op-table tbody tr {
  border-bottom: 1px solid var(--hairline);
  transition: background 0.15s var(--ease);
}

.op-table tbody tr:last-child {
  border-bottom: none;
}

.op-table tbody tr:hover {
  background: var(--surface-alt);
}

.op-table__name-link {
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}

.op-table__name-link:hover {
  text-decoration: underline;
}

.op-table__sub {
  margin-top: 2px;
  font-size: var(--text-caption);
  color: var(--mid);
}

.op-table td.op-muted,
.op-table .op-muted {
  color: var(--hairline-strong);
}

.op-table__empty-row td {
  padding: var(--s48) var(--s16);
}

/* ─────────────────────────── Пагинация ─────────────────────────── */

.op-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s16);
  margin-top: var(--s16);
  flex-wrap: wrap;
}

.op-pager__info {
  color: var(--mid);
  font-size: var(--text-caption);
}

.op-pager__controls {
  display: flex;
  align-items: center;
  gap: var(--s8);
}

/* ─────────────────────────── Канбан ─────────────────────────── */

/* Восемь стадий воронки делят ширину поровну: доска целиком на экране —
   на неё смотрят, чтобы увидеть картину, а не листают вбок.
   Число колонок ставит renderBoard() в --op-board-cols. */
.op-board {
  display: grid;
  grid-template-columns: repeat(var(--op-board-cols, 8), minmax(0, 1fr));
  gap: var(--s8);
  align-items: start;
  padding-bottom: var(--s8);
}

/* На узком экране колонки в 130 пикселей уже нечитаемы — там возвращаем
   прокрутку и нормальную ширину: на телефоне листать вбок привычно. */
@media (max-width: 1100px) {
  .op-board {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 240px;
    gap: var(--s12);
    overflow-x: auto;
  }
}

.op-board__col {
  background: var(--surface-alt);
  border: 1px solid var(--hairline);
  border-radius: var(--r-nested);
  padding: var(--s8);
  min-width: 0;
  min-height: 120px;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}

.op-board__col.is-dragover {
  background: var(--canvas);
  border-color: var(--ink);
}

.op-board__col-head {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: 0 0 var(--s8);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 500;
}

/* Название стадии сжимается первым: счётчик и «+» важнее — по ним кликают. */
.op-board__col-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.op-board__add {
  flex: none;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-small);
  background: var(--paper);
  color: var(--mid);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.op-board__add:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.op-board__col-count {
  font-variant-numeric: tabular-nums;
}

.op-board__empty {
  padding: var(--s16);
  text-align: center;
  color: var(--mid);
  font-size: var(--text-caption);
}

.op-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-small);
  padding: var(--s8);
  margin-bottom: var(--s4);
  cursor: grab;
  transition: box-shadow 0.15s var(--ease), opacity 0.15s var(--ease);
}

.op-card:last-child {
  margin-bottom: 0;
}

.op-card:hover {
  box-shadow: 0 1px 3px rgba(10, 10, 10, 0.08);
}

.op-card--dragging {
  opacity: 0.4;
}

.op-card--alert {
  border-color: #fecaca;
}

.op-card__title {
  display: block;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.op-card__title:hover {
  text-decoration: underline;
}

.op-card__sub {
  margin-top: 2px;
  font-size: 11px;
  color: var(--mid);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.op-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: var(--s4);
}

/* Плашки внутри карточки доски — самые мелкие в системе: их тут до четырёх
   на 130 пикселей ширины. */
.op-card__meta .pill {
  padding: 1px 6px;
  font-size: 10px;
}

.op-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  margin-top: var(--s4);
}

.op-card__stageselect {
  height: 26px;
  padding: 0 var(--s4);
  border: 1px solid var(--hairline);
  border-radius: var(--r-small);
  background: var(--surface-alt);
  font-size: 11px;
  color: var(--ink-soft);
  cursor: pointer;
  max-width: 100%;
}

/* ─────────────────────────── Иконки-кнопки ─────────────────────────── */

.op-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: var(--r-small);
  background: transparent;
  color: var(--mid);
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.op-iconbtn:hover {
  background: var(--canvas);
  color: var(--ink);
}

.op-iconbtn--danger:hover {
  color: var(--ember);
  background: var(--ember-soft);
}

.op-iconbtn svg {
  width: 15px;
  height: 15px;
  display: block;
}

/* ─────────────────────────── Карточка оператора: шапка ─────────────────────────── */

.op-back {
  display: inline-flex;
  align-items: center;
  gap: var(--s4);
  color: var(--mid);
  text-decoration: none;
  font-size: var(--text-caption);
  margin-bottom: var(--s12);
}

.op-back:hover {
  color: var(--ink);
}

.op-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s16);
  flex-wrap: wrap;
  margin-bottom: var(--s16);
}

.op-detail-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s8);
  margin-top: var(--s8);
}

.op-detail-head__actions {
  display: flex;
  align-items: center;
  gap: var(--s8);
  flex-wrap: wrap;
}

.op-stagebar {
  display: flex;
  align-items: center;
  gap: var(--s12);
  flex-wrap: wrap;
  padding: var(--s12) var(--s16);
  margin-bottom: var(--s20);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}

.op-stagebar__label {
  font-size: var(--text-caption);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 500;
  white-space: nowrap;
}

.op-stagebar select {
  height: 36px;
  padding: 0 var(--s12);
  background: var(--surface-alt);
  border: 1px solid var(--hairline);
  border-radius: var(--r-control);
  font-size: var(--text-body);
}

.op-stagebar__hint {
  font-size: var(--text-caption);
  color: var(--mid);
}

/* ─────────────────────────── Вкладки ─────────────────────────── */

.op-tabs {
  display: flex;
  gap: var(--s4);
  padding: var(--s4);
  margin-bottom: var(--s20);
  background: var(--canvas);
  border-radius: var(--r-control);
  overflow-x: auto;
}

.op-tabs__btn {
  height: 32px;
  padding: 0 var(--s16);
  border: none;
  border-radius: 99px;
  background: transparent;
  color: var(--mid);
  font-size: var(--text-body);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}

.op-tabs__btn:hover {
  color: var(--ink);
}

.op-tabs__btn.is-active {
  background: var(--paper);
  color: var(--ink);
}

/* ─────────────────────────── Обзор: группы полей ─────────────────────────── */

.op-group {
  margin-bottom: var(--s24);
}

.op-group__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s16);
}

.op-view-value {
  min-height: 40px;
  display: flex;
  align-items: center;
  font-size: var(--text-body);
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.op-view-value.op-muted {
  color: var(--hairline-strong);
}

.op-view-value a {
  color: var(--ink);
  text-decoration-color: var(--hairline-strong);
}

.op-view-value--multiline {
  min-height: auto;
  white-space: pre-wrap;
  line-height: 1.5;
  padding: var(--s8) 0;
}

.op-links-editor {
  display: flex;
  flex-direction: column;
  gap: var(--s8);
}

.op-links-row {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  gap: var(--s8);
  align-items: center;
}

.op-links-add {
  align-self: flex-start;
}

/* ─────────────────────────── Контакты / Лента / Задачи: списки ─────────────────────────── */

.op-entry {
  padding: var(--s12) var(--s16);
  border-bottom: 1px solid var(--hairline);
}

.op-entry:last-child {
  border-bottom: none;
}

.op-entry__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s12);
  flex-wrap: wrap;
}

.op-entry__title {
  font-weight: 500;
}

.op-entry__meta {
  font-size: var(--text-caption);
  color: var(--mid);
  white-space: nowrap;
}

.op-entry__body {
  margin-top: var(--s4);
  font-size: var(--text-body);
  color: var(--ink-soft);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.op-entry__next {
  margin-top: var(--s8);
  padding: var(--s8) var(--s12);
  background: var(--surface-alt);
  border-radius: var(--r-nested);
  font-size: var(--text-caption);
  color: var(--ink-soft);
}

.op-entry__actions {
  display: flex;
  gap: var(--s4);
  flex: none;
}

.op-quickform {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s8);
  align-items: flex-end;
  padding: var(--s16);
  margin-bottom: var(--s16);
  background: var(--surface-alt);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--r-card);
}

.op-quickform .field {
  min-width: 150px;
}

.op-quickform .field--grow {
  flex: 1 1 240px;
  min-width: 200px;
}

/* ─────────────────────────── Чек-лист ─────────────────────────── */

.op-checklist-stage {
  margin-bottom: var(--s24);
}

.op-checklist-stage__head {
  display: flex;
  align-items: center;
  gap: var(--s12);
  margin-bottom: var(--s12);
}

.op-checklist-stage__name {
  font-size: var(--text-body-lg);
  font-weight: 600;
  flex: none;
}

.op-progress {
  flex: 1;
  height: 6px;
  background: var(--canvas);
  border-radius: 99px;
  overflow: hidden;
  min-width: 80px;
}

.op-progress__bar {
  height: 100%;
  min-width: 2px;
  background: var(--ink);
  border-radius: 99px;
  transition: width 0.4s var(--ease);
}

.op-checklist-stage__count {
  flex: none;
  font-size: var(--text-caption);
  color: var(--mid);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.op-checklist-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s12);
  padding: var(--s8) 0;
  border-bottom: 1px solid var(--hairline);
}

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

.op-checklist-item input[type="checkbox"] {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  flex: none;
  cursor: pointer;
}

.op-checklist-item__body {
  flex: 1;
  min-width: 0;
}

.op-checklist-item__text {
  font-size: var(--text-body);
}

.op-checklist-item--done .op-checklist-item__text {
  color: var(--mid);
  text-decoration: line-through;
  text-decoration-color: var(--hairline-strong);
}

.op-checklist-item__meta {
  margin-top: 2px;
  font-size: var(--text-caption);
  color: var(--mid);
}

.op-checklist-item__comment-btn {
  border: none;
  background: transparent;
  color: var(--mid);
  font-size: var(--text-caption);
  text-decoration: underline dotted var(--hairline-strong);
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 0;
  margin-top: 4px;
}

.op-checklist-item__comment-btn:hover {
  color: var(--ink);
}

.op-checklist-item__comment-edit {
  display: flex;
  gap: var(--s8);
  margin-top: var(--s8);
  align-items: flex-start;
}

.op-checklist-item__comment-edit textarea {
  flex: 1;
  min-height: 56px;
}

/* ─────────────────────────── Модальные окна ─────────────────────────── */

.op-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(10, 10, 10, 0.44);
  display: flex;
  justify-content: center;
  padding: var(--s24) var(--s16);
  overflow-y: auto;
}

.op-modal {
  width: 100%;
  max-width: 560px;
  height: fit-content;
  margin: auto;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: 0 24px 64px rgba(10, 10, 10, 0.28);
  animation: op-modal-rise 0.18s var(--ease) both;
}

@keyframes op-modal-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .op-modal {
    animation: none;
  }
}

.op-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s16);
  padding: var(--s20) var(--s20) var(--s16);
  border-bottom: 1px solid var(--hairline);
}

.op-modal__title {
  font-size: var(--text-subheading);
  font-weight: 600;
  line-height: 1.4;
}

.op-modal__close {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  color: var(--mid);
  cursor: pointer;
  border-radius: var(--r-small);
  font-size: 18px;
  line-height: 1;
}

.op-modal__close:hover {
  background: var(--canvas);
  color: var(--ink);
}

.op-modal__body {
  padding: var(--s20);
  display: flex;
  flex-direction: column;
  gap: var(--s16);
  max-height: 66vh;
  overflow-y: auto;
}

.op-modal__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s16);
}

/* Форма в модалке — две колонки: трёхколоночная сетка карточки здесь не
   помещается по ширине и вылезает за край. */
.op-modal__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s12);
}

@media (max-width: 600px) {
  .op-modal__grid {
    grid-template-columns: 1fr;
  }
}

.op-modal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s12);
  padding: var(--s16) var(--s20) var(--s20);
  border-top: 1px solid var(--hairline);
  flex-wrap: wrap;
}

.op-modal__foot-right {
  display: flex;
  gap: var(--s8);
  margin-left: auto;
}

@media (max-width: 560px) {
  .op-modal__grid {
    grid-template-columns: 1fr;
  }

  .op-modal-backdrop {
    padding: var(--s16) var(--s8);
  }
}

/* ─────────────────────────── Прочее ─────────────────────────── */

.op-inline-status {
  margin-bottom: var(--s16);
}

.op-section-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s8);
  margin-bottom: var(--s16);
}

.op-field-error {
  font-size: var(--text-caption);
  color: var(--ember);
}

.op-form-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--s8);
  margin-top: var(--s8);
}

/* ─────────────────────────── Адаптив ─────────────────────────── */

@media (max-width: 860px) {
  .op-modal__grid,
  .op-group__grid {
    grid-template-columns: 1fr;
  }

  .op-links-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .op-filterbar {
    padding: var(--s12);
  }

  .op-detail-head {
    flex-direction: column;
  }

  .op-checklist-stage__head {
    flex-wrap: wrap;
  }
}