:root {
  --bg: #0f172a;
  --panel: #1e293b;
  --panel-2: #263449;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --accent: #3b82f6;
  --good: #22c55e;
  --bad: #ef4444;
  --warn: #f59e0b;
  --border: #334155;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

#login-screen {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-box {
  background: var(--panel);
  padding: 32px;
  border-radius: 12px;
  width: 320px;
  border: 1px solid var(--border);
}

.login-box h1 {
  font-size: 18px;
  margin-bottom: 20px;
  text-align: center;
}

input, select, button {
  font-family: inherit;
  font-size: 14px;
}

input, select {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
}

button {
  cursor: pointer;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  background: var(--accent);
  color: white;
  font-weight: 600;
}

button.secondary {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
}

button.danger {
  background: var(--bad);
}

button:disabled {
  cursor: wait;
  opacity: .65;
}

.error-msg {
  color: var(--bad);
  font-size: 13px;
  margin-bottom: 10px;
  min-height: 16px;
}

#app-shell { display: none; min-height: 100vh; }

.layout { display: flex; min-height: 100vh; }

aside.sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 16px 0;
}

.sidebar .brand {
  font-weight: 700;
  padding: 0 20px 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}

.sidebar nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }

.sidebar nav button {
  background: transparent;
  color: var(--muted);
  text-align: left;
  border-radius: 0;
  padding: 10px 20px;
  font-weight: 500;
}
.sidebar nav button.active {
  background: var(--panel-2);
  color: var(--text);
  border-left: 3px solid var(--accent);
  padding-left: 17px;
}
.sidebar nav .nav-sep {
  margin: 10px 20px 6px;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.sidebar .user-info {
  padding: 12px 20px 0;
  border-top: 1px solid var(--border);
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sub-tabs { display: flex; gap: 4px; margin-bottom: 16px; }
.sub-tabs button {
  background: var(--panel);
  color: var(--muted);
  padding: 8px 14px;
  border: 1px solid var(--border);
}
.sub-tabs button.active { background: var(--accent); color: white; border-color: var(--accent); }

main { padding: 20px; flex: 1; min-width: 0; width: 100%; max-width: none; margin: 0; overflow-x: auto; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.card .label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.card .value { font-size: 28px; font-weight: 700; margin-top: 4px; }
.card .sub { color: var(--muted); font-size: 11px; margin-top: 3px; }

table { width: 100%; border-collapse: collapse; background: var(--panel); border-radius: 12px; overflow: hidden; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 13px; }
th { color: var(--muted); font-weight: 600; background: var(--panel-2); }

/* v2.5.8: длинная таблица прокручивается внутри своего контейнера.
   Поэтому заголовки остаются видимыми независимо от прокрутки страницы. */
.table-scroll-frame {
  width: 100%;
  max-height: calc(100vh - 18px);
  max-height: calc(100dvh - 18px);
  overflow: auto;
  position: relative;
  border-radius: 12px;
  background: transparent;
  scrollbar-gutter: stable;
  overscroll-behavior: auto;
}

/* Основные длинные таблицы используют почти всю доступную высоту экрана.
   На большом мониторе видно больше строк, на небольшом — меньше автоматически. */
.table-scroll-adaptive {
  max-height: calc(100vh - 18px);
  max-height: calc(100dvh - 18px);
}

.table-scroll-frame table {
  border-radius: 0;
  overflow: visible;
}

.table-scroll-frame table thead th,
.status-options-wrap table thead th {
  position: sticky;
  top: 0;
  z-index: 12;
  background: var(--panel-2);
  box-shadow: 0 1px 0 var(--border), 0 5px 10px rgba(15, 23, 42, .28);
}

/* Короткие таблицы без внутреннего скролла остаются обычными. */
table thead th {
  background: var(--panel-2);
}

/* Вся площадь поля даты открывает нативный календарь (JS вызывает showPicker). */
input[type="date"] {
  cursor: pointer;
}

tr:last-child td { border-bottom: none; }

.badge { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge.good { background: rgba(34,197,94,.15); color: var(--good); }
.badge.bad { background: rgba(239,68,68,.15); color: var(--bad); }
.badge.warn { background: rgba(245,158,11,.15); color: var(--warn); }


/* v2.5.14: ключевые проценты должны читаться с первого взгляда. */
.key-percent-badge,
.metric-zone.metric-zone-percent,
.key-percent-wrap .metric-zone {
  font-size: 16px;
  line-height: 1.1;
  font-weight: 900;
  padding: 5px 12px;
  min-width: 82px;
  letter-spacing: .01em;
  border: 1px solid rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 2px 8px rgba(15, 23, 42, .22);
}

.dashboard-rate-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 6px !important;
  font-size: 14px !important;
  color: var(--text) !important;
}

.dashboard-rate-line .rate-base {
  color: var(--muted);
  font-size: 12px;
}

.toolbar {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  gap: 8px;
  align-items: center;
  align-content: flex-start;
  margin-bottom: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: rgba(24, 36, 57, .55);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.toolbar label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.toolbar input,
.toolbar select,
.toolbar button {
  margin-bottom: 0;
}
.toolbar input[type="date"] {
  width: 146px;
  min-width: 146px;
  background: rgba(10, 18, 34, .9);
  border-color: rgba(84, 109, 146, .45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.toolbar input[type="number"] {
  width: 76px;
  min-width: 76px;
  background: rgba(10, 18, 34, .9);
}
.toolbar select {
  width: auto;
  min-width: 170px;
  max-width: 220px;
  background: rgba(10, 18, 34, .9);
}
.toolbar .search-box {
  flex: 0 1 420px;
  width: min(420px, 100%);
  min-width: 240px;
}
.toolbar > span {
  color: var(--muted);
  font-weight: 700;
}

.section-title { font-size: 16px; font-weight: 700; margin: 24px 0 12px; }

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  display: none; align-items: center; justify-content: center; z-index: 50;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 24px; width: 380px;
}
.modal h3 { margin-top: 0; }
.modal .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }

.hint { color: var(--muted); font-size: 12px; margin-top: -6px; margin-bottom: 12px; }
.small-btn { padding: 4px 10px; font-size: 12px; }


/* Фильтры: кнопка сама показывает, что запрос выполняется. Реальный процент
   API не отдаёт, поэтому используем честный неопределённый прогресс без
   выдуманных «37%/82%». Полоса доходит примерно до 86% и завершается только
   после фактического ответа сервера. */
.query-action-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-width: 92px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease, background-color .18s ease;
}
.query-action-btn.query-action-loading {
  opacity: 1;
  color: #f8fafc;
  border-color: rgba(59, 130, 246, .85);
  background-color: rgba(38, 52, 73, .96);
  background-image: linear-gradient(90deg, rgba(37, 99, 235, .76), rgba(59, 130, 246, .46));
  background-repeat: no-repeat;
  background-size: 8% 100%;
  animation: query-action-progress 2.5s cubic-bezier(.18,.7,.2,1) infinite alternate;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, .16), 0 0 18px rgba(59, 130, 246, .10);
}
.query-action-btn.query-action-loading:disabled {
  cursor: progress;
  opacity: 1;
}
.query-action-btn.query-action-success {
  border-color: rgba(34, 197, 94, .78);
  background: rgba(22, 101, 52, .58);
  color: #dcfce7;
}
.query-action-btn.query-action-error {
  border-color: rgba(239, 68, 68, .82);
  background: rgba(127, 29, 29, .58);
  color: #fee2e2;
}
@keyframes query-action-progress {
  0% { background-size: 8% 100%; }
  45% { background-size: 56% 100%; }
  100% { background-size: 86% 100%; }
}
.content-refreshing {
  opacity: .64;
  filter: saturate(.82);
  pointer-events: none;
  transition: opacity .14s ease, filter .14s ease;
}
@media (prefers-reduced-motion: reduce) {
  .query-action-btn.query-action-loading { animation: none; background-size: 72% 100%; }
}

th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--text); }
th.sortable .sort-arrow { opacity: .4; font-size: 10px; margin-left: 4px; }
th.sortable.sort-active .sort-arrow { opacity: 1; color: var(--accent); }

.search-box {
  width: 260px;
}

.stats-summary { color: var(--muted); font-size: 13px; margin: 8px 0 16px; }

.sync-status-cell { min-width: 260px; max-width: 420px; }
.sync-status { line-height: 1.35; }
.sync-message { margin-top: 6px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.sync-message.sync-error { color: #fca5a5; }
.sync-time { margin-top: 3px; color: var(--muted); font-size: 11px; }

.section-title-with-note {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 6px;
}

.section-note {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.pipeline-overview-wrap {
  overflow-x: auto;
  margin-bottom: 24px;
}

.pipeline-overview-table {
  min-width: 880px;
}

.pipeline-overview-table th,
.pipeline-overview-table td {
  white-space: nowrap;
}

.pipeline-overview-table th:not(:first-child),
.pipeline-overview-table td:not(:first-child) {
  text-align: center;
}

.pipeline-project-cell {
  min-width: 200px;
  text-align: left !important;
}

.pipeline-project-cell-main {
  font-weight: 700;
  color: var(--text);
}

.pipeline-number-cell {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pipeline-total-cell {
  color: var(--accent);
}

.pipeline-overview-table tfoot td {
  background: rgba(59, 130, 246, .08);
  font-weight: 700;
}

@media (max-width: 640px) {
  .section-title-with-note {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .pipeline-overview-table {
    min-width: 760px;
  }
}


/* Сворачиваемые блоки проектов: плохие товары и настройки аналитики */
.project-accordion {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
}

.project-accordion > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--panel-2);
  font-weight: 700;
}

.project-accordion > summary::-webkit-details-marker { display: none; }
.project-accordion > summary::before {
  content: '▸';
  color: var(--muted);
  margin-right: 8px;
}
.project-accordion[open] > summary::before { content: '▾'; }
.project-accordion > summary > span:first-child { flex: 1; }

.accordion-count {
  min-width: 30px;
  padding: 3px 9px;
  border-radius: 999px;
  text-align: center;
  background: rgba(59, 130, 246, .15);
  color: var(--accent);
  font-size: 12px;
}

.accordion-content { padding: 14px; }

.settings-form-grid {
  display: grid;
  gap: 16px;
}

.settings-form-grid label {
  display: grid;
  gap: 7px;
  color: var(--text);
  font-size: 13px;
}

.settings-form-grid small {
  color: var(--muted);
  line-height: 1.4;
}

textarea {
  width: 100%;
  resize: vertical;
  min-height: 90px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  line-height: 1.4;
}

textarea:disabled { opacity: .7; }

.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
}

.checkbox-label input {
  width: auto;
  margin: 0;
}

.settings-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.settings-rules span {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
  font-size: 12px;
}

.detected-departments {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(15, 23, 42, .35);
  font-size: 12px;
}

.detected-departments span {
  color: var(--muted);
}


/* Детали проекта можно свернуть как основной кнопкой, так и кнопкой внутри блока. */
.project-detail-title {
  margin-top: 22px;
}

/* Сравнение внутренних отделов с предыдущим аналогичным периодом. */
.departments-comparison-table {
  min-width: 960px;
}

.departments-comparison-table th:not(:first-child),
.departments-comparison-table td:not(:first-child) {
  text-align: center;
}

.department-name-cell {
  min-width: 150px;
  font-weight: 700;
  text-align: left !important;
}

.department-metric-value {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.department-metric-previous {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.trend-change {
  display: inline-block;
  margin-top: 5px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.trend-change.up {
  color: var(--good);
  background: rgba(34, 197, 94, .14);
}

.trend-change.down {
  color: #fca5a5;
  background: rgba(239, 68, 68, .16);
}

.trend-change.flat {
  color: var(--muted);
  background: rgba(148, 163, 184, .12);
}

/* Расширенное окно настройки исключаемых статусов проекта. */
.modal.modal-wide {
  width: min(980px, calc(100vw - 40px));
  max-height: calc(100vh - 50px);
  overflow-y: auto;
}

.status-exclusion-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.status-exclusion-grid label {
  display: grid;
  gap: 7px;
  font-size: 13px;
}

.status-exclusion-grid small,
.metric-note {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.status-options-wrap {
  max-height: 330px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.status-options-table {
  border-radius: 0;
}

.status-options-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--panel-2);
  box-shadow: 0 1px 0 var(--border);
}

.status-option-actions {
  min-width: 175px;
  white-space: nowrap;
}

.projects-comparison-table {
  min-width: 980px;
}

.projects-comparison-table th:not(:first-child),
.projects-comparison-table td:not(:first-child),
.sales-performance-table th:not(:first-child),
.sales-performance-table td:not(:first-child) {
  text-align: center;
}

.sales-summary-inline {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.sales-summary-inline span {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .35);
  border: 1px solid var(--border);
}

.sales-performance-table {
  min-width: 900px;
}

@media (max-width: 720px) {
  .status-exclusion-grid {
    grid-template-columns: 1fr;
  }

  .sales-summary-inline {
    justify-content: flex-start;
  }
}

.trend-up-text { color: var(--good); font-weight: 600; }
.trend-down-text { color: var(--bad); font-weight: 600; }
.sales-performance-table, .placement-table { min-width: 1050px; }

/* Расстановка: рекомендации строятся от сотрудника к одному или нескольким проектам. */
.placement-recommendation-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.placement-recommendation-summary > span {
  padding: 3px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(15, 23, 42, .35);
}

.placement-recommendation-summary .placement-project-chip {
  color: var(--text);
  background: rgba(34, 197, 94, .10);
  border-color: rgba(34, 197, 94, .35);
}

.placement-recommendation-summary .placement-project-chip.primary {
  color: var(--good);
  background: rgba(34, 197, 94, .16);
  font-weight: 700;
}

.placement-primary-row td {
  background: rgba(34, 197, 94, .055);
}

/* Сотрудники: одна общая строка и раскрываемая разбивка по проектам. */
.employee-summary-row {
  cursor: pointer;
}

.employee-summary-row:hover td {
  background: rgba(59, 130, 246, .07);
}

.employee-expand-icon {
  display: inline-block;
  width: 18px;
  color: var(--accent);
}

.employee-projects-row > td {
  padding: 0 14px 14px 34px;
  background: rgba(15, 23, 42, .38);
}

.employee-projects-wrap {
  padding-top: 10px;
  overflow-x: auto;
}

.employee-projects-table {
  min-width: 560px;
  border: 1px solid var(--border);
  background: rgba(15, 23, 42, .42);
}

.employee-projects-table th,
.employee-projects-table td {
  padding: 8px 12px;
}

@media (max-width: 720px) {
  .placement-recommendation-summary {
    justify-content: flex-start;
  }
}

/* Статистика по операторам */
.operator-zones-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 8px 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(30, 41, 59, .55);
  color: var(--muted);
  font-size: 12px;
}

.metric-zone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 74px;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
}
.metric-zone.good { background: rgba(34,197,94,.14); color: var(--good); }
.metric-zone.warn { background: rgba(245,158,11,.14); color: var(--warn); }
.metric-zone.bad { background: rgba(239,68,68,.14); color: var(--bad); }
.metric-zone-empty { color: var(--muted); }

.operator-table { min-width: 900px; }
.operator-project-breakdown { min-width: 720px; }

.operator-placement-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.operator-placement-columns h3 {
  margin: 0 0 8px;
  font-size: 14px;
}
.operator-placement-table {
  min-width: 620px;
  border: 1px solid var(--border);
}
.operator-placement-columns > section {
  min-width: 0;
  overflow-x: auto;
}
.placement-recommendation-summary .operator-worst-chip {
  color: var(--bad);
  background: rgba(239, 68, 68, .10);
  border-color: rgba(239, 68, 68, .35);
}
.placement-recommendation-summary .metric-zone {
  min-width: 0;
  padding: 2px 6px;
}

@media (max-width: 980px) {
  .operator-placement-columns { grid-template-columns: 1fr; }
}

/* v2.1: рабочие периоды, выкуп и упрощённая расстановка */
.settings-inline-label {
  display: block;
  margin: 8px 0 5px;
  color: var(--muted);
  font-size: 12px;
}

.buyout-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.buyout-settings-grid section {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(15, 23, 42, .35);
}

.buyout-settings-grid h4 {
  margin: 0 0 10px;
}

.buyout-settings-grid label {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
}

.buyout-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.product-name-wrap,
.placement-project-name {
  white-space: normal !important;
  overflow-wrap: anywhere;
  min-width: 180px;
}

.simple-placement-card > summary {
  align-items: center;
}

.simple-placement-card .placement-recommendation-summary {
  max-width: none;
}

.simple-placement-table {
  width: 100%;
  min-width: 820px;
}

.simple-placement-table th,
.simple-placement-table td {
  vertical-align: middle;
}

.placement-operator-name {
  min-width: 70px;
  font-size: 15px;
  font-weight: 700;
}

@media (max-width: 820px) {
  .buyout-settings-grid { grid-template-columns: 1fr; }
  .buyout-summary-grid { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
}

.data-freshness {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(59, 130, 246, .08);
  color: var(--muted);
  font-size: 12px;
}

.data-freshness strong {
  color: var(--text);
}

.data-freshness.has-error {
  background: rgba(239, 68, 68, .08);
  border-color: rgba(239, 68, 68, .35);
}


.project-order-cell {
  white-space: nowrap;
  min-width: 105px;
}
.project-order-cell .order-btn {
  min-width: 28px;
  padding: 4px 7px;
  margin-right: 4px;
}
.project-order-cell span {
  color: var(--muted);
  font-size: 11px;
  margin-left: 2px;
}

.buyout-rate-large {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 82px;
  padding: 7px 12px;
  font-size: 18px;
}
.buyout-overall-summary {
  margin-bottom: 24px;
}
.buyout-diagnostics {
  margin: 14px 0 18px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(15, 23, 42, .32);
}
.buyout-diagnostics > summary {
  cursor: pointer;
  font-weight: 700;
}
.buyout-diagnostics[open] > summary {
  margin-bottom: 10px;
}

/* v2.5.9: скроллбар таблиц в тон тёмного интерфейса. */
.table-scroll-frame,
.status-options-wrap {
  scrollbar-width: thin;
  scrollbar-color: #64748b #1e293b;
}

.table-scroll-frame::-webkit-scrollbar,
.status-options-wrap::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.table-scroll-frame::-webkit-scrollbar-track,
.status-options-wrap::-webkit-scrollbar-track {
  background: #1e293b;
  border-left: 1px solid #334155;
}

.table-scroll-frame::-webkit-scrollbar-thumb,
.status-options-wrap::-webkit-scrollbar-thumb {
  background: #64748b;
  border: 2px solid #1e293b;
  border-radius: 999px;
}

.table-scroll-frame::-webkit-scrollbar-thumb:hover,
.status-options-wrap::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.table-scroll-frame::-webkit-scrollbar-corner,
.status-options-wrap::-webkit-scrollbar-corner {
  background: #1e293b;
}

/* v2.5.8: если существующий wrapper уже был прокручиваемым, не добавляем второй визуальный контейнер. */
.table-scroll-frame-existing {
  scrollbar-gutter: stable;
}

/* v2.5.13: список проектов в настройках тоже адаптируется под viewport. */
.settings-projects-scroll {
  max-height: calc(100vh - 18px);
  max-height: calc(100dvh - 18px);
}


/* v2.5.14: на широких мониторах не растягиваем колонки на всю ширину окна.
   Таблица занимает столько места, сколько реально нужно данным; если места
   недостаточно, остаётся обычная горизонтальная прокрутка. */
@media (min-width: 1500px) {
  main table,
  .table-scroll-frame table,
  .pipeline-overview-wrap table {
    width: max-content;
    min-width: min(1180px, 100%);
  }

  .table-scroll-frame,
  .pipeline-overview-wrap {
    background: transparent;
  }

  main th,
  main td {
    padding-left: 8px;
    padding-right: 8px;
  }

  /* Самые широкие аналитические таблицы остаются читаемыми, но не расползаются. */
  .operator-table,
  .projects-comparison-table,
  .sales-performance-table,
  .placement-table,
  .simple-placement-table {
    min-width: 1080px;
  }
}

@media (max-width: 1100px) {
  main { padding: 18px; }
  aside.sidebar { width: 200px; }
  th, td { padding-left: 10px; padding-right: 10px; }
}

@media (max-width: 820px) {
  main { padding: 14px; }
  aside.sidebar { width: 180px; }
  .grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

/* v2.5.11: товары в разделе «Выкуп» скрыты по умолчанию и раскрываются отдельно. */
.buyout-products-details {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(15, 23, 42, .32);
  overflow: hidden;
}

.buyout-products-details > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  font-weight: 700;
  background: rgba(38, 52, 73, .55);
}

.buyout-products-details > summary::-webkit-details-marker { display: none; }
.buyout-products-details > summary::before {
  content: '▸';
  color: var(--muted);
}
.buyout-products-details[open] > summary::before { content: '▾'; }
.buyout-products-details > summary .accordion-count { margin-left: auto; }
.buyout-products-content { padding: 12px; }


/* v2.5.15: делаем процентные акценты заметнее и убираем лишний фон справа у широких таблиц. */
.dashboard-rate-line .key-percent-badge,
.dashboard-rate-line .metric-zone {
  transform: translateY(-1px);
}

.table-scroll-frame > table {
  background: var(--panel);
}


/* v2.5.16: фильтры и карточки стали компактнее и красивее на широких экранах. */
@media (min-width: 900px) {
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .toolbar {
    padding: 10px 12px;
    gap: 8px;
  }

  .toolbar input[type="date"],
  .toolbar select,
  .toolbar .search-box {
    width: 100%;
    min-width: 0;
    flex: 1 1 100%;
  }
}

.card .value {
  font-size: clamp(28px, 1.9vw, 36px);
}

.card .sub {
  line-height: 1.35;
}


/* v2.5.17: компактные фильтры и карточки, без растянутых пустых областей. */
.toolbar + .toolbar {
  margin-top: -2px;
}

.settings-projects-scroll table,
.table-scroll-frame table,
.pipeline-overview-wrap table {
  background-clip: padding-box;
}

@media (min-width: 1200px) {
  .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .buyout-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .toolbar {
    width: 100%;
  }

  .toolbar .search-box {
    flex: 1 1 260px;
  }
}

@media (max-width: 900px) {
  .toolbar {
    width: 100%;
    padding: 10px 12px;
    gap: 8px;
  }

  .toolbar input[type="date"],
  .toolbar select,
  .toolbar .search-box {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 1 1 100%;
  }

  .toolbar input[type="number"] {
    width: 100px;
    min-width: 100px;
  }
}

.card .value {
  font-size: clamp(24px, 1.7vw, 34px);
}

.card .sub {
  line-height: 1.3;
}

/* ===== v2.5.17 compact layout refinements ===== */
.page-content-boundary {
  width: min(1240px, 100%);
}

.toolbar-search-row {
  width: 100%;
}

.toolbar-search-row .search-box {
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
}

.compact-list-content,
#buyout-content,
#project-stats-content,
#operator-employees-content,
#operator-placement-content {
  width: 100%;
}

.compact-accordion {
  max-width: 1220px;
}

.compact-table-wrap {
  overflow-x: hidden;
}

.compact-data-table {
  width: 100%;
  min-width: 0;
}

.compact-table-shell {
  width: min(100%, 980px);
}

.compact-stat-grid {
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  max-width: 1120px;
}

.compact-stat-grid .card,
.dashboard-summary-grid .card {
  padding: 14px 16px;
  min-height: 118px;
}

.dashboard-summary-grid {
  max-width: 1120px;
}

.dashboard-summary-grid .sub,
.compact-stat-grid .sub,
.side-panel-note,
.activity-body,
.activity-meta,
.data-freshness,
.operator-zones-legend,
.hint,
.stats-summary {
  white-space: normal;
  overflow-wrap: anywhere;
}

.buyout-summary-grid {
  grid-template-columns: repeat(3, minmax(220px, 1fr));
}

.buyout-overall-summary {
  margin-bottom: 18px;
}

.buyout-summary-grid .card .value {
  font-size: 1.2rem;
}

.data-freshness-soft {
  width: min(100%, 1180px);
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(59, 130, 246, 0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.operator-zones-legend {
  width: min(100%, 1220px);
  background: rgba(30, 41, 59, 0.55);
  border: 1px solid rgba(51, 65, 85, 0.95);
  border-radius: 10px;
  padding: 10px 14px;
}

#tab-project-stats .data-freshness,
#tab-operator-stats .operator-zones-legend,
#tab-products .toolbar,
#tab-bad-products .toolbar,
#tab-buyout .toolbar,
#tab-project-stats .toolbar,
#operator-stats-content .toolbar,
#settings-content .toolbar {
  max-width: 1240px;
}

.settings-users-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
}

.settings-activity-panel {
  position: sticky;
  top: 18px;
}

.side-panel-card {
  padding: 16px;
}

.activity-list {
  display: grid;
  gap: 10px;
  max-height: 72vh;
  overflow: auto;
  padding-right: 4px;
}

.activity-item {
  border: 1px solid rgba(51, 65, 85, 0.9);
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(15, 23, 42, 0.55);
}

.activity-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 4px;
}

.activity-time,
.activity-meta,
.activity-empty {
  color: var(--muted);
  font-size: .82rem;
}

.activity-target {
  color: var(--text);
}

.buyout-settings-grid-combined {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.buyout-settings-grid-combined textarea {
  min-height: 154px;
}

.modal textarea,
.status-options-wrap,
.pipeline-overview-wrap,
.table-scroll-frame,
.activity-list {
  scrollbar-color: rgba(59, 130, 246, 0.75) rgba(15, 23, 42, 0.8);
  scrollbar-width: thin;
}

.modal textarea::-webkit-scrollbar,
.status-options-wrap::-webkit-scrollbar,
.pipeline-overview-wrap::-webkit-scrollbar,
.table-scroll-frame::-webkit-scrollbar,
.activity-list::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.modal textarea::-webkit-scrollbar-track,
.status-options-wrap::-webkit-scrollbar-track,
.pipeline-overview-wrap::-webkit-scrollbar-track,
.table-scroll-frame::-webkit-scrollbar-track,
.activity-list::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.8);
  border-radius: 10px;
}

.modal textarea::-webkit-scrollbar-thumb,
.status-options-wrap::-webkit-scrollbar-thumb,
.pipeline-overview-wrap::-webkit-scrollbar-thumb,
.table-scroll-frame::-webkit-scrollbar-thumb,
.activity-list::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.75);
  border-radius: 10px;
  border: 2px solid rgba(15, 23, 42, 0.8);
}

@media (max-width: 1360px) {
  .settings-users-layout {
    grid-template-columns: 1fr;
  }
  .settings-activity-panel {
    position: static;
  }
}

@media (max-width: 1200px) {
  .compact-stat-grid,
  .buyout-summary-grid,
  .dashboard-summary-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

@media (max-width: 760px) {
  .compact-stat-grid,
  .buyout-summary-grid,
  .dashboard-summary-grid {
    grid-template-columns: 1fr;
  }
  .compact-data-table {
    min-width: 760px;
  }
}


/* ===== v2.5.17 rev3 refinements ===== */
main {
  position: relative;
  isolation: isolate;
}

main > section {
  position: relative;
  z-index: 1;
}

#ambient-constellation {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: .92;
  will-change: transform;
}

.page-content-boundary {
  position: relative;
  z-index: 1;
}

.data-freshness,
.data-freshness-soft,
.data-freshness-compact {
  display: inline-flex;
  width: fit-content;
  max-width: min(100%, 1180px);
}

.dashboard-summary-grid-compact .card,
.project-detail-grid .card,
.buyout-summary-grid-compact .card {
  min-height: 78px;
  padding: 12px 14px;
}

.buyout-summary-grid-compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 980px;
}

.buyout-summary-grid-compact .card .value {
  font-size: clamp(22px, 1.45vw, 30px);
}

.buyout-show-btn {
  padding: 10px 18px;
  min-width: 108px;
}

.buyout-toolbar-secondary .search-box,
.operator-filters-toolbar .search-box {
  flex: 1 1 320px;
  min-width: 260px;
}

.buyout-toolbar-secondary {
  align-items: center;
}

.buyout-toolbar-secondary label {
  white-space: nowrap;
}

.buyout-toolbar-secondary select {
  flex: 0 0 220px;
  max-width: 220px;
}

.compact-product-table,
.buyout-products-table {
  table-layout: fixed;
  width: 100%;
  min-width: 0 !important;
}

.compact-product-table th,
.compact-product-table td,
.buyout-products-table th,
.buyout-products-table td {
  overflow: hidden;
  padding: 8px 8px;
  font-size: 12px;
}

.compact-product-table th:nth-child(1),
.compact-product-table td:nth-child(1),
.buyout-products-table th:nth-child(1),
.buyout-products-table td:nth-child(1) {
  width: 60px;
}

.compact-product-table th:nth-child(2),
.compact-product-table td:nth-child(2) {
  width: 14%;
}

.compact-product-table th:nth-child(3),
.compact-product-table td:nth-child(3),
.compact-product-table th:nth-child(4),
.compact-product-table td:nth-child(4),
.compact-product-table th:nth-child(5),
.compact-product-table td:nth-child(5),
.compact-product-table th:nth-child(6),
.compact-product-table td:nth-child(6),
.compact-product-table th:nth-child(7),
.compact-product-table td:nth-child(7),
.compact-product-table th:nth-child(8),
.compact-product-table td:nth-child(8) {
  width: 72px;
}

.buyout-products-table th:nth-child(2),
.buyout-products-table td:nth-child(2) {
  width: 16%;
}

.buyout-products-table th:nth-child(3),
.buyout-products-table td:nth-child(3),
.buyout-products-table th:nth-child(4),
.buyout-products-table td:nth-child(4),
.buyout-products-table th:nth-child(5),
.buyout-products-table td:nth-child(5),
.buyout-products-table th:nth-child(6),
.buyout-products-table td:nth-child(6) {
  width: 68px;
}

.buyout-products-table th:nth-child(7),
.buyout-products-table td:nth-child(7),
.buyout-products-table th:nth-child(8),
.buyout-products-table td:nth-child(8) {
  width: 84px;
}

.product-col-name,
.product-name-wrap {
  white-space: nowrap !important;
}

.product-name-ellipsis {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  cursor: help;
}

.product-col-id {
  white-space: nowrap;
}

.project-detail-grid {
  max-width: 1120px;
}

.trend-chart-card {
  width: min(100%, 1120px);
  margin-bottom: 18px;
  padding: 14px 16px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(30, 41, 59, .72);
}

.trend-svg-shell {
  width: 100%;
}

.trend-svg {
  display: block;
  width: 100%;
  height: auto;
}

.trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}

.trend-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.trend-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

.trend-empty {
  color: var(--muted);
  font-size: 13px;
  padding: 24px 8px;
}

.tiny-btn {
  padding: 4px 9px;
  font-size: 11px;
}

.settings-projects-table thead th {
  font-size: 14px;
  font-weight: 700;
}

.settings-projects-table tbody td {
  padding-top: 7px;
  padding-bottom: 7px;
  font-size: 12px;
}

.settings-projects-table .small-btn {
  padding: 4px 8px;
  font-size: 11px;
}

.settings-activity-page .activity-list-page {
  max-height: none;
  grid-template-columns: 1fr;
}

@media (max-width: 1080px) {
  .buyout-toolbar-secondary,
  .operator-filters-toolbar {
    width: 100%;
  }

  .buyout-toolbar-secondary .search-box,
  .operator-filters-toolbar .search-box {
    min-width: 0;
    width: 100%;
    flex-basis: 100%;
  }
}

@media (max-width: 960px) {
  .buyout-summary-grid-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ===== v2.5.18: финальная компактная раскладка и лёгкий звёздный фон ===== */
#ambient-constellation {
  position: fixed;
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
  will-change: auto;
}

/* Товарные таблицы: название товара занимает примерно четверть ширины,
   а не половину экрана. Полное название остаётся в title при наведении. */
.compact-product-table,
.buyout-products-table {
  width: 100% !important;
  min-width: 720px !important;
  table-layout: fixed !important;
}

.compact-product-table th.sortable,
.buyout-products-table th.sortable {
  white-space: normal;
  line-height: 1.15;
}

.compact-product-table th:nth-child(1),
.compact-product-table td:nth-child(1) { width: 6% !important; }
.compact-product-table th:nth-child(2),
.compact-product-table td:nth-child(2) { width: 22% !important; }
.compact-product-table th:nth-child(3),
.compact-product-table td:nth-child(3) { width: 11% !important; }
.compact-product-table th:nth-child(4),
.compact-product-table td:nth-child(4) { width: 13% !important; }
.compact-product-table th:nth-child(5),
.compact-product-table td:nth-child(5) { width: 12% !important; }
.compact-product-table th:nth-child(6),
.compact-product-table td:nth-child(6) { width: 10% !important; }
.compact-product-table th:nth-child(7),
.compact-product-table td:nth-child(7) { width: 14% !important; }
.compact-product-table th:nth-child(8),
.compact-product-table td:nth-child(8) { width: 12% !important; }

.product-average-cell strong {
  font-size: 12.5px;
  color: var(--text);
}

.buyout-products-table th:nth-child(1),
.buyout-products-table td:nth-child(1) { width: 6% !important; }
.buyout-products-table th:nth-child(2),
.buyout-products-table td:nth-child(2) { width: 22% !important; }
.buyout-products-table th:nth-child(3),
.buyout-products-table td:nth-child(3),
.buyout-products-table th:nth-child(4),
.buyout-products-table td:nth-child(4),
.buyout-products-table th:nth-child(5),
.buyout-products-table td:nth-child(5),
.buyout-products-table th:nth-child(6),
.buyout-products-table td:nth-child(6) { width: 11% !important; }
.buyout-products-table th:nth-child(7),
.buyout-products-table td:nth-child(7),
.buyout-products-table th:nth-child(8),
.buyout-products-table td:nth-child(8) { width: 14% !important; }

.product-col-name {
  min-width: 0 !important;
  max-width: 0;
}

/* Статистика по проектам: вся таблица помещается в рабочую ширину без
   обязательной горизонтальной прокрутки. */
#tab-project-stats .pipeline-overview-wrap {
  width: 100%;
  overflow-x: hidden;
}

.projects-comparison-table {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed;
}

.projects-comparison-table th,
.projects-comparison-table td {
  padding: 7px 5px !important;
  font-size: 11px;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: top;
}

.projects-comparison-table th:nth-child(1) { width: 8%; }
.projects-comparison-table th:nth-child(2) { width: 8%; }
.projects-comparison-table th:nth-child(3) { width: 8%; }
.projects-comparison-table th:nth-child(4) { width: 10%; }
.projects-comparison-table th:nth-child(5) { width: 9%; }
.projects-comparison-table th:nth-child(6) { width: 9%; }
.projects-comparison-table th:nth-child(7) { width: 13%; }
.projects-comparison-table th:nth-child(8) { width: 8%; }
.projects-comparison-table th:nth-child(9) { width: 10%; }
.projects-comparison-table th:nth-child(10) { width: 17%; }

.projects-comparison-table .department-metric-value {
  font-size: 13px;
}
.projects-comparison-table .department-metric-previous,
.projects-comparison-table .metric-note,
.projects-comparison-table .trend-change {
  font-size: 10px;
  line-height: 1.18;
}
.projects-comparison-table .metric-zone {
  min-width: 0;
  padding: 4px 7px;
  font-size: 12px;
}

/* Настройки → Проекты: фиксируем компактные доли колонок и не даём
   статусу/кнопкам растягивать всю таблицу. */
.settings-projects-scroll {
  width: 100%;
  overflow-x: hidden;
}

.settings-projects-table {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed;
}

.settings-projects-table .settings-col-order { width: 7%; }
.settings-projects-table .settings-col-name { width: 7%; }
.settings-projects-table .settings-col-domain { width: 10%; }
.settings-projects-table .settings-col-login { width: 7%; }
.settings-projects-table .settings-col-cutoff { width: 6%; }
.settings-projects-table .settings-col-stock { width: 7%; }
.settings-projects-table .settings-col-active { width: 5%; }
.settings-projects-table .settings-col-autosync { width: 6%; }
.settings-projects-table .settings-col-status { width: 24%; }
.settings-projects-table .settings-col-actions { width: 21%; }

.settings-projects-table thead th,
.settings-projects-table tbody td {
  padding: 6px 5px !important;
  font-size: 11px;
  line-height: 1.18;
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: middle;
}

.settings-projects-table thead th {
  font-size: 11px;
}

.settings-projects-table .project-order-cell {
  min-width: 0;
  white-space: nowrap;
}

.settings-projects-table .project-order-cell .order-btn {
  min-width: 24px;
  padding: 3px 5px;
  margin-right: 2px;
}

.settings-projects-table .sync-status-cell {
  min-width: 0;
  max-width: none;
}

.settings-projects-table .sync-status {
  line-height: 1.15;
}

.settings-projects-table .sync-message {
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.settings-projects-table .sync-time {
  margin-top: 2px;
  font-size: 9px;
}

.settings-project-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.settings-projects-table .settings-project-actions .small-btn {
  padding: 4px 6px;
  margin: 0;
  font-size: 10px;
  line-height: 1.05;
  white-space: nowrap;
}

/* Новый график: две линии — предыдущий и текущий период, снизу вверх. */
.trend-comparison-svg {
  min-height: 250px;
}

.trend-line-hit,
.trend-point {
  cursor: help;
  pointer-events: stroke;
}

.trend-point {
  pointer-events: all;
}

.trend-axis-note {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.trend-legend-hint {
  color: var(--muted);
  font-size: 11px;
  margin-left: auto;
}

@media (max-width: 1050px) {
  .projects-comparison-table th,
  .projects-comparison-table td,
  .settings-projects-table thead th,
  .settings-projects-table tbody td {
    font-size: 10px;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}

/* ===== v2.5.21: восстановление таблиц, центрирование цифр, график по часам, звёзды на весь фон ===== */
#ambient-constellation {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
  filter: drop-shadow(0 0 10px rgba(59, 130, 246, .12));
}

#app-shell,
#login-screen {
  position: relative;
  z-index: 1;
}

main > section,
.page-content-boundary,
#dash-content,
#project-detail,
#project-stats-content,
#operator-stats-content,
#settings-content {
  position: relative;
  z-index: 1;
}

/* ---- График: вчера/предыдущий период против текущего по часам ---- */
.trend-hourly-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.trend-comparison-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.trend-comparison-kpis > div {
  background: rgba(15, 23, 42, .42);
  border: 1px solid rgba(148, 163, 184, .13);
  border-radius: 10px;
  padding: 9px 12px;
  min-width: 0;
}

.trend-comparison-kpis span,
.trend-comparison-kpis small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
}

.trend-comparison-kpis strong {
  display: block;
  margin: 2px 0;
  color: #e2e8f0;
  font-size: 18px;
}

.hourly-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.hourly-chart-card {
  min-width: 0;
  background: rgba(15, 23, 42, .48);
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 12px;
  padding: 11px 12px 8px;
}

.hourly-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 4px;
}

.hourly-chart-title {
  color: #e2e8f0;
  font-weight: 700;
  font-size: 13px;
}

.hourly-chart-subtitle {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.hourly-chart-current {
  text-align: right;
  min-width: 130px;
}

.hourly-chart-current strong,
.hourly-chart-current span {
  display: block;
}

.hourly-chart-current strong {
  font-size: 18px;
}

.hourly-chart-current span {
  margin-top: 2px;
  font-size: 10px;
}

.hourly-chart-current.up strong,
.hourly-chart-current.up span { color: #86efac; }
.hourly-chart-current.down strong,
.hourly-chart-current.down span { color: #fca5a5; }
.hourly-chart-current.flat strong,
.hourly-chart-current.flat span { color: #cbd5e1; }

.hourly-trend-svg {
  display: block;
  width: 100%;
  min-height: 235px;
}

.trend-point { cursor: help; }

/* ---- Все числовые столбцы по центру ---- */
.pipeline-overview-table th:not(:first-child),
.pipeline-overview-table td:not(:first-child) {
  text-align: center !important;
}

.dashboard-projects-table th:not(:first-child),
.dashboard-projects-table td:not(:first-child) {
  text-align: center !important;
}
.dashboard-projects-table th:first-child,
.dashboard-projects-table td:first-child {
  text-align: left !important;
}

#manager-table th:nth-child(n+3),
#manager-table td:nth-child(n+3) {
  text-align: center !important;
}
#manager-table th:nth-child(-n+2),
#manager-table td:nth-child(-n+2) {
  text-align: left !important;
}

.compact-product-table th:not(:nth-child(2)),
.compact-product-table td:not(:nth-child(2)),
.buyout-products-table th:not(:nth-child(2)),
.buyout-products-table td:not(:nth-child(2)) {
  text-align: center !important;
}
.compact-product-table th:nth-child(2),
.compact-product-table td:nth-child(2),
.buyout-products-table th:nth-child(2),
.buyout-products-table td:nth-child(2) {
  text-align: left !important;
}

.buyout-status-breakdown-table th:nth-child(1),
.buyout-status-breakdown-table td:nth-child(1),
.buyout-status-breakdown-table th:nth-child(3),
.buyout-status-breakdown-table td:nth-child(3) {
  text-align: center !important;
}
.buyout-status-breakdown-table th:nth-child(2),
.buyout-status-breakdown-table td:nth-child(2),
.buyout-status-breakdown-table th:nth-child(4),
.buyout-status-breakdown-table td:nth-child(4) {
  text-align: left !important;
}

.projects-comparison-table th:not(:first-child),
.projects-comparison-table td:not(:first-child),
.projects-comparison-table .department-metric-value,
.projects-comparison-table .department-metric-previous,
.projects-comparison-table .trend-change,
.projects-comparison-table .metric-note {
  text-align: center !important;
}
.projects-comparison-table th:first-child,
.projects-comparison-table td:first-child {
  text-align: left !important;
}

#operator-employees-table th:nth-child(n+3),
#operator-employees-table td:nth-child(n+3) {
  text-align: center !important;
}
#operator-employees-table th:nth-child(-n+2),
#operator-employees-table td:nth-child(-n+2) {
  text-align: left !important;
}

.employee-projects-table th:not(:first-child),
.employee-projects-table td:not(:first-child) {
  text-align: center !important;
}
.employee-projects-table th:first-child,
.employee-projects-table td:first-child {
  text-align: left !important;
}

.simple-placement-table th:nth-child(n+2):nth-child(-n+5),
.simple-placement-table td:nth-child(n+2):nth-child(-n+5),
.placement-table th:nth-child(n+2):nth-child(-n+8),
.placement-table td:nth-child(n+2):nth-child(-n+8) {
  text-align: center !important;
}

#sales-performance-table th:nth-child(n+3):nth-child(-n+8),
#sales-performance-table td:nth-child(n+3):nth-child(-n+8) {
  text-align: center !important;
}
#sales-performance-table th:nth-child(-n+2),
#sales-performance-table td:nth-child(-n+2) {
  text-align: left !important;
}

#employees-table th:nth-child(n+3),
#employees-table td:nth-child(n+3) {
  text-align: center !important;
}
#employees-table th:nth-child(-n+2),
#employees-table td:nth-child(-n+2) {
  text-align: left !important;
}

.settings-projects-table th:nth-child(1),
.settings-projects-table td:nth-child(1),
.settings-projects-table th:nth-child(5),
.settings-projects-table td:nth-child(5),
.settings-projects-table th:nth-child(6),
.settings-projects-table td:nth-child(6),
.settings-projects-table th:nth-child(7),
.settings-projects-table td:nth-child(7),
.settings-projects-table th:nth-child(8),
.settings-projects-table td:nth-child(8),
.settings-projects-table th:nth-child(10),
.settings-projects-table td:nth-child(10) {
  text-align: center !important;
}
.settings-projects-table th:nth-child(2),
.settings-projects-table td:nth-child(2),
.settings-projects-table th:nth-child(3),
.settings-projects-table td:nth-child(3),
.settings-projects-table th:nth-child(4),
.settings-projects-table td:nth-child(4),
.settings-projects-table th:nth-child(9),
.settings-projects-table td:nth-child(9) {
  text-align: left !important;
}

.status-options-table th:nth-child(1),
.status-options-table td:nth-child(1),
.status-options-table th:nth-child(3),
.status-options-table td:nth-child(3),
.status-options-table th:nth-child(n+4),
.status-options-table td:nth-child(n+4) {
  text-align: center !important;
}
.status-options-table th:nth-child(2),
.status-options-table td:nth-child(2) {
  text-align: left !important;
}

#users-table th:nth-child(3),
#users-table td:nth-child(3),
#users-table th:nth-child(4),
#users-table td:nth-child(4) {
  text-align: center !important;
}
#users-table th:nth-child(-n+2),
#users-table td:nth-child(-n+2) {
  text-align: left !important;
}

@media (max-width: 1050px) {
  .hourly-chart-grid { grid-template-columns: 1fr; }
  .trend-comparison-kpis { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 720px) {
  .trend-comparison-kpis { grid-template-columns: 1fr; }
}


/* ===== v2.6.5: надёжная перерисовка live-данных поверх canvas ===== */
#ambient-constellation {
  transform: translateZ(0);
  backface-visibility: hidden;
}

main > section {
  backface-visibility: hidden;
}

main > section.live-refresh-repaint {
  transform: translateZ(0.001px);
}


/* ===== v2.7.0: роли и доступ к разделам ===== */
.user-access-cell {
  min-width: 260px;
}

.access-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.access-chip-list.compact {
  max-width: 520px;
}

.access-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid rgba(96, 165, 250, .24);
  border-radius: 999px;
  background: rgba(59, 130, 246, .10);
  color: #bfdbfe;
  font-size: 10px;
  line-height: 1.1;
  white-space: nowrap;
}

.access-chip-admin {
  border-color: rgba(34, 197, 94, .32);
  background: rgba(34, 197, 94, .11);
  color: #bbf7d0;
}

.access-chip-empty {
  border-color: rgba(148, 163, 184, .22);
  background: rgba(148, 163, 184, .08);
  color: var(--muted);
}

.modal-field-label {
  display: block;
  margin: 10px 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.user-access-editor {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(15, 23, 42, .34);
}

.user-access-editor-title {
  margin-bottom: 9px;
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 700;
}

.user-access-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.user-access-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.user-access-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.user-access-pill span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;
}

.user-access-pill:not(.locked):hover span {
  border-color: rgba(96, 165, 250, .55);
  transform: translateY(-1px);
}

.user-access-pill.selected span {
  border-color: rgba(59, 130, 246, .62);
  background: rgba(59, 130, 246, .18);
  color: #dbeafe;
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .10);
}

.user-access-pill.locked {
  cursor: default;
}

.user-access-pill.locked span {
  border-color: rgba(34, 197, 94, .38);
  background: rgba(34, 197, 94, .12);
  color: #bbf7d0;
}

.user-access-hint {
  margin-top: 9px;
}

#users-table th:nth-child(3),
#users-table td:nth-child(3) {
  text-align: left;
}

#users-table th:nth-child(4),
#users-table td:nth-child(4) {
  text-align: center;
}


/* ===== v2.7.1: ФИО и обычные галочки прав доступа ===== */
.user-access-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
}

.user-access-check-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
}

.user-access-check-row:hover {
  background: rgba(59, 130, 246, .07);
}

.user-access-check-row input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.user-access-checkbox-visual {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 1px solid rgba(148, 163, 184, .48);
  border-radius: 4px;
  background: rgba(15, 23, 42, .62);
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .22);
}

.user-access-check-row.checked .user-access-checkbox-visual {
  border-color: rgba(59, 130, 246, .82);
  background: #3b82f6;
}

.user-access-check-row.checked .user-access-checkbox-visual::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.user-access-check-label {
  color: #dbe4f0;
  font-size: 12px;
  line-height: 1.25;
}

.user-access-check-row.locked {
  cursor: default;
  opacity: .9;
}

.user-access-check-row.locked:hover {
  background: transparent;
}

#users-table th:nth-child(4),
#users-table td:nth-child(4) {
  text-align: left;
}

#users-table th:nth-child(5),
#users-table td:nth-child(5) {
  text-align: center;
}

@media (max-width: 760px) {
  .user-access-checklist {
    grid-template-columns: 1fr;
  }
}

/* ===== v2.7.2: компактная история действий ===== */
.activity-history-card { padding: 18px; }
.activity-filterbar {
  display: grid;
  grid-template-columns: 150px 150px minmax(170px, .85fr) minmax(210px, 1fr) minmax(240px, 1.35fr) auto;
  gap: 10px;
  align-items: end;
  margin: 16px 0 12px;
}
.activity-filter-field { display: grid; gap: 5px; min-width: 0; }
.activity-filter-field > span { color: var(--muted); font-size: 12px; font-weight: 600; }
.activity-filter-field input,
.activity-filter-field select {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid rgba(71, 85, 105, .9);
  background: rgba(15, 23, 42, .72);
  color: var(--text);
}
.activity-reset-btn { height: 38px; white-space: nowrap; }
.activity-table-wrap { margin-top: 4px; max-height: min(66vh, 720px); }
.activity-table { min-width: 930px; width: 100%; }
.activity-table th { position: sticky; top: 0; z-index: 2; background: var(--panel, #1e293b); }
.activity-table th,
.activity-table td { padding: 8px 10px; vertical-align: middle; }
.activity-table tbody tr:hover { background: rgba(59, 130, 246, .07); }
.activity-date-cell { white-space: nowrap; width: 168px; }
.activity-ip-cell { white-space: nowrap; color: var(--muted); width: 125px; }
.activity-object-cell { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-kind {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(100, 116, 139, .45);
  background: rgba(100, 116, 139, .12);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
}
.activity-kind-create { border-color: rgba(34, 197, 94, .45); background: rgba(34, 197, 94, .10); }
.activity-kind-delete { border-color: rgba(239, 68, 68, .45); background: rgba(239, 68, 68, .10); }
.activity-kind-update { border-color: rgba(59, 130, 246, .45); background: rgba(59, 130, 246, .10); }
.activity-kind-sync { border-color: rgba(168, 85, 247, .45); background: rgba(168, 85, 247, .10); }
.activity-kind-visit { border-color: rgba(14, 165, 233, .45); background: rgba(14, 165, 233, .09); }
.activity-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
}
.activity-page-buttons { display: flex; gap: 6px; }
.activity-page-buttons .small-btn.active { border-color: rgba(59, 130, 246, .85); background: rgba(59, 130, 246, .18); }
@media (max-width: 1180px) {
  .activity-filterbar { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
  .activity-filter-search { grid-column: span 2; }
}

/* Диагностика покрытия товарных данных в разделе выкупа. */
.data-warning {
  width: min(100%, 1180px);
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(245, 158, 11, .34);
  border-radius: 10px;
  background: rgba(245, 158, 11, .08);
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ============================== v2.7.6: Главная ============================== */
.sidebar .brand.brand-home {
  cursor: pointer;
  user-select: none;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
  outline: none;
}

.sidebar .brand.brand-home:hover,
.sidebar .brand.brand-home:focus-visible {
  color: #fff;
  background: rgba(59, 130, 246, .08);
  border-bottom-color: rgba(96, 165, 250, .45);
}

.home-page {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: clamp(8px, 2vw, 26px) 0 34px;
}

.home-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 4vw, 46px);
  border: 1px solid rgba(96, 165, 250, .28);
  border-radius: 20px;
  background:
    radial-gradient(circle at 85% 15%, rgba(59, 130, 246, .22), transparent 32%),
    linear-gradient(135deg, rgba(30, 41, 59, .97), rgba(15, 23, 42, .94));
  box-shadow: 0 18px 44px rgba(2, 6, 23, .18);
}

.home-hero::after {
  content: '';
  position: absolute;
  width: 260px;
  height: 260px;
  right: -105px;
  bottom: -135px;
  border: 1px solid rgba(125, 211, 252, .14);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(59, 130, 246, .035), 0 0 0 72px rgba(59, 130, 246, .022);
  pointer-events: none;
}

.home-eyebrow {
  color: #93c5fd;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  margin-bottom: 10px;
}

.home-hero h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.08;
  letter-spacing: -.025em;
}

.home-lead {
  position: relative;
  z-index: 1;
  max-width: 850px;
  margin: 15px 0 0;
  color: #cbd5e1;
  font-size: 15px;
  line-height: 1.65;
}

.home-meta-row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.home-meta-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 999px;
  background: rgba(15, 23, 42, .46);
  color: var(--muted);
  font-size: 12px;
}

.home-meta-pill strong { color: var(--text); margin-left: 4px; }

.home-ready-card {
  margin-top: 14px;
  padding: 15px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(30, 41, 59, .88);
}

.home-ready-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
}

.home-ready-copy > span { color: #93c5fd; }
.home-ready-copy > span.is-ready { color: #86efac; }

.home-warmup-track {
  height: 5px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(15, 23, 42, .9);
}

#home-warmup-bar {
  width: 5%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3b82f6, #60a5fa, #22c55e);
  transition: width .28s ease;
}

.home-ready-hint {
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.home-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  margin: 28px 2px 12px;
}

.home-section-heading h2 {
  margin: 0 0 5px;
  font-size: 18px;
}

.home-section-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.home-nav-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.home-nav-card {
  min-height: 142px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 13px;
  padding: 18px;
  text-align: left;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 15px;
  background: rgba(30, 41, 59, .91);
  box-shadow: none;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.home-nav-card:hover,
.home-nav-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(96, 165, 250, .58);
  background: rgba(38, 52, 73, .96);
  box-shadow: 0 10px 28px rgba(2, 6, 23, .22);
  outline: none;
}

.home-nav-icon {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(96, 165, 250, .25);
  border-radius: 11px;
  background: rgba(59, 130, 246, .09);
  font-size: 20px;
}

.home-nav-content { display: flex; min-width: 0; flex-direction: column; gap: 7px; }
.home-nav-content strong { font-size: 14px; color: #f8fafc; }
.home-nav-content span { color: var(--muted); font-size: 12px; line-height: 1.48; font-weight: 400; }
.home-nav-arrow { color: #60a5fa; font-size: 19px; line-height: 1; transition: transform .16s ease; }
.home-nav-card:hover .home-nav-arrow { transform: translateX(3px); }

.home-info-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  overflow: hidden;
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--border);
}

.home-info-strip > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 88px;
  padding: 16px 18px;
  background: rgba(30, 41, 59, .96);
}

.home-info-strip strong { font-size: 12px; }
.home-info-strip span { color: var(--muted); font-size: 11px; line-height: 1.45; }

@media (max-width: 1050px) {
  .home-nav-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .home-nav-grid, .home-info-strip { grid-template-columns: 1fr; }
  .home-ready-copy { align-items: flex-start; flex-direction: column; gap: 4px; }
  .home-nav-card { min-height: 122px; }
}


/* ============================== v2.7.7: предупреждения статусов выкупа ============================== */
.buyout-config-summary-warning,
.buyout-config-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border-color: rgba(245, 158, 11, .48);
  background: linear-gradient(90deg, rgba(245, 158, 11, .12), rgba(245, 158, 11, .055));
}

.buyout-config-summary-warning {
  width: min(100%, 1220px);
  margin-bottom: 14px;
}

.buyout-config-summary-warning strong,
.buyout-config-warning strong {
  flex: 0 0 auto;
  color: #fbbf24;
  font-weight: 700;
}

.buyout-config-summary-warning span,
.buyout-config-warning span {
  color: var(--muted);
}

@media (max-width: 760px) {
  .buyout-config-summary-warning,
  .buyout-config-warning {
    flex-direction: column;
    gap: 4px;
  }
}

/* v2.7.9: сравнение операторов по двум периодам */
.operator-comparison-periods {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  margin-bottom: 12px;
}
.operator-period-card {
  min-width: 310px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(30, 41, 59, .55);
}
.operator-period-card > strong {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  color: var(--muted);
}
.operator-period-current {
  border-color: rgba(59, 130, 246, .45);
  background: rgba(37, 99, 235, .08);
}
.operator-period-inputs {
  display: flex;
  align-items: center;
  gap: 7px;
}
.operator-period-inputs input[type="date"] { min-width: 132px; }
.operator-period-arrow {
  align-self: center;
  color: var(--muted);
  font-size: 22px;
  padding-bottom: 2px;
}
.operator-period-min {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.operator-period-min label {
  color: var(--muted);
  font-size: 12px;
}
.operator-period-min input { width: 92px; }
.operator-comparison-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  margin: 8px 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(15, 23, 42, .48);
  color: var(--muted);
  font-size: 12px;
}
.operator-comparison-rules strong { color: var(--text); }
.operator-comparison-table {
  min-width: 1540px;
  font-variant-numeric: tabular-nums;
}
.operator-comparison-table th,
.operator-comparison-table td {
  text-align: center;
  white-space: nowrap;
  padding: 8px 10px;
}
.operator-comparison-table th:first-child,
.operator-comparison-table td:first-child,
.operator-comparison-table th:nth-child(2),
.operator-comparison-table td:nth-child(2) {
  text-align: left;
}
.operator-comparison-groups > th[colspan] {
  color: var(--text);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.operator-comparison-result {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.comparison-result-up { color: var(--good); background: rgba(34,197,94,.14); }
.comparison-result-down { color: #fca5a5; background: rgba(239,68,68,.16); }
.comparison-result-flat { color: var(--muted); background: rgba(148,163,184,.12); }
.comparison-result-mixed { color: var(--warn); background: rgba(245,158,11,.14); }
.comparison-result-na { color: var(--muted); background: rgba(148,163,184,.08); }

@media (max-width: 900px) {
  .operator-period-card { min-width: 100%; }
  .operator-period-arrow { display: none; }
}

/* v2.7.10: компактное сравнение операторов без горизонтального скролла */
.operator-comparison-view-switch {
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: rgba(15, 23, 42, .42);
}
.operator-comparison-view-switch .small-btn {
  min-height: 30px;
  padding: 5px 9px;
  border-color: transparent;
}
.operator-comparison-view-switch .small-btn.active {
  color: #dbeafe;
  border-color: rgba(59, 130, 246, .5);
  background: rgba(37, 99, 235, .22);
}
.operator-comparison-shell {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(15, 23, 42, .28);
}
.operator-comparison-table {
  width: 100%;
  min-width: 0 !important;
  table-layout: fixed;
  font-variant-numeric: tabular-nums;
}
.operator-comparison-table .operator-cmp-col-person { width: 14%; }
.operator-comparison-table .operator-cmp-col-metric { width: 17%; }
.operator-comparison-table .operator-cmp-col-result { width: 18%; }
.operator-comparison-table th,
.operator-comparison-table td {
  padding: 7px 6px;
  vertical-align: middle;
  white-space: normal;
  overflow-wrap: anywhere;
}
.operator-comparison-table th:first-child,
.operator-comparison-table td:first-child {
  text-align: left;
}
.operator-comparison-summary-row {
  cursor: pointer;
  transition: background .12s ease;
}
.operator-comparison-summary-row:hover,
.operator-comparison-summary-row.is-expanded {
  background: rgba(59, 130, 246, .055);
}
.operator-cmp-person-cell {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.operator-cmp-person-cell > span:last-child {
  min-width: 0;
}
.operator-cmp-person-cell strong {
  display: block;
  font-size: 12px;
  line-height: 1.15;
}
.operator-cmp-person-cell small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.15;
}
.operator-cmp-expand {
  flex: 0 0 auto;
  width: 14px;
  color: #93c5fd;
  text-align: center;
}
.operator-cmp-metric {
  display: grid;
  gap: 4px;
  justify-items: center;
  min-width: 0;
}
.operator-cmp-values {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  width: 100%;
  min-width: 0;
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
}
.operator-cmp-period {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  min-width: 0;
}
.operator-cmp-period small {
  color: var(--muted);
  font-size: 8px;
  font-weight: 600;
}
.operator-cmp-period.p2 { color: #dbeafe; }
.operator-cmp-arrow {
  flex: 0 0 auto;
  color: #64748b;
  font-size: 10px;
}
.operator-cmp-delta {
  min-height: 18px;
  text-align: center;
  line-height: 1;
}
.operator-cmp-delta .trend-change {
  display: inline-block;
  max-width: 100%;
  padding: 3px 6px;
  border-radius: 999px;
  font-size: 9px;
  line-height: 1.1;
  white-space: normal;
}
.operator-cmp-metric-header {
  text-align: center !important;
}
.operator-cmp-header-main {
  appearance: none;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}
.operator-cmp-sort-choices {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: 4px;
}
.operator-cmp-sort-choice {
  appearance: none;
  min-width: 25px;
  padding: 2px 4px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: rgba(148, 163, 184, .06);
  color: var(--muted);
  cursor: pointer;
  font-size: 8px;
  line-height: 1.2;
}
.operator-cmp-sort-choice:hover,
.operator-cmp-sort-choice.active {
  color: #bfdbfe;
  border-color: rgba(59, 130, 246, .38);
  background: rgba(37, 99, 235, .14);
}
.operator-comparison-table .operator-comparison-result {
  max-width: 100%;
  justify-content: center;
  white-space: normal;
  text-align: center;
  line-height: 1.15;
}
.operator-comparison-detail-row > td {
  padding: 0 8px 9px !important;
  background: rgba(2, 6, 23, .18);
}
.operator-comparison-detail-card {
  padding: 9px;
  border: 1px solid rgba(59, 130, 246, .2);
  border-radius: 10px;
  background: rgba(15, 23, 42, .58);
}
.operator-comparison-detail-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 2px 8px;
}
.operator-comparison-detail-title > div {
  font-size: 12px;
}
.operator-comparison-detail-title > span {
  color: var(--muted);
  font-size: 10px;
}
.operator-comparison-detail-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: collapse;
}
.operator-comparison-detail-table th,
.operator-comparison-detail-table td {
  padding: 6px 5px;
  border-top: 1px solid rgba(51, 65, 85, .72);
  text-align: center;
  white-space: normal;
  vertical-align: middle;
}
.operator-comparison-detail-table th:first-child,
.operator-comparison-detail-table td:first-child {
  width: 15%;
  text-align: left;
}
.operator-comparison-detail-table th:last-child,
.operator-comparison-detail-table td:last-child {
  width: 18%;
}
.operator-comparison-overall-row {
  background: rgba(59, 130, 246, .08);
}
.operator-comparison-overall-row > td:first-child strong {
  color: #bfdbfe;
}
.operator-comparison-detailed .operator-comparison-detail-row {
  display: table-row;
}

@media (max-width: 1280px) {
  .operator-comparison-table th,
  .operator-comparison-table td { padding: 6px 4px; }
  .operator-cmp-values { gap: 3px; font-size: 10px; }
  .operator-cmp-period small { display: none; }
  .operator-cmp-delta .trend-change { font-size: 8px; padding: 3px 4px; }
  .operator-comparison-result { font-size: 9px; padding: 4px 5px; }
  .operator-comparison-detail-title > span { display: none; }
}

@media (max-width: 900px) {
  .operator-comparison-shell { overflow-x: auto; }
  .operator-comparison-table { min-width: 760px !important; }
  .operator-comparison-view-switch { width: 100%; margin-left: 0; }
  .operator-comparison-view-switch .small-btn { flex: 1; }
}


/* v2.7.11: сравнение операторов использует всю доступную ширину.
   Отдельно перебиваем старое правило wide-screen `table { width: max-content; }`,
   из-за которого на мониторах >=1500px таблица визуально сжималась и справа
   оставалось пустое поле. */
.page-operators-boundary {
  width: 100%;
  max-width: none;
}

#operator-stats-content,
#operator-stats-content > .page-content-boundary {
  width: 100%;
  max-width: none;
}

.operator-comparison-shell,
.operator-comparison-shell > .table-scroll-frame,
.operator-comparison-shell .table-scroll-frame {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.operator-comparison-shell .operator-comparison-table,
.operator-comparison-shell .table-scroll-frame > .operator-comparison-table {
  display: table;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed;
}

.operator-comparison-shell .operator-comparison-detail-table {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed;
}

.operator-cmp-values,
.operator-cmp-delta .trend-change,
.operator-comparison-table .operator-comparison-result {
  white-space: nowrap;
}

/* На широком десктопе даём метрикам максимум полезной ширины и не тратим
   место на слишком крупные служебные колонки. */
@media (min-width: 1281px) {
  .operator-comparison-table .operator-cmp-col-person { width: 13%; }
  .operator-comparison-table .operator-cmp-col-metric { width: 18%; }
  .operator-comparison-table .operator-cmp-col-result { width: 15%; }

  .operator-comparison-table th,
  .operator-comparison-table td {
    padding-left: 8px;
    padding-right: 8px;
  }

  .operator-cmp-values {
    gap: 7px;
    font-size: 11.5px;
  }
}

@media (max-width: 900px) {
  .operator-comparison-shell .operator-comparison-table,
  .operator-comparison-shell .table-scroll-frame > .operator-comparison-table {
    width: 760px !important;
    min-width: 760px !important;
    max-width: none !important;
  }

  .operator-cmp-values,
  .operator-cmp-delta .trend-change,
  .operator-comparison-table .operator-comparison-result {
    white-space: normal;
  }
}


/* v2.7.12: минимальные принятые и кнопка сравнения больше не висят отдельно.
   Они собраны в третью визуально равноправную карточку, чтобы основное действие
   не терялось справа от периодов. */
.operator-comparison-periods {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) auto minmax(300px, 1fr) minmax(235px, .72fr);
  align-items: stretch;
  gap: 10px;
}
.operator-comparison-periods .operator-period-card {
  min-width: 0;
  height: 100%;
}
.operator-comparison-periods .operator-period-arrow {
  align-self: center;
  padding: 0 2px;
}
.operator-comparison-actions-card {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(59, 130, 246, .36);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(37, 99, 235, .09), rgba(30, 41, 59, .58));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
}
.operator-comparison-actions-card > strong {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
.operator-comparison-actions-row {
  display: grid;
  grid-template-columns: minmax(86px, 100px) minmax(110px, 1fr);
  gap: 9px;
  align-items: end;
}
.operator-period-min {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.operator-period-min span {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.operator-period-min input {
  width: 100%;
  min-width: 0;
  height: 38px;
  margin: 0;
  padding: 8px 10px;
}
.operator-comparison-submit {
  width: 100%;
  min-width: 110px;
  min-height: 38px;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid rgba(96, 165, 250, .72);
  background: linear-gradient(180deg, #3b82f6, #2563eb);
  box-shadow: 0 6px 18px rgba(37, 99, 235, .18);
  font-size: 12px;
}
.operator-comparison-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(37, 99, 235, .26);
}

@media (max-width: 1180px) {
  .operator-comparison-periods {
    grid-template-columns: minmax(280px, 1fr) auto minmax(280px, 1fr);
  }
  .operator-comparison-actions-card {
    grid-column: 1 / -1;
  }
  .operator-comparison-actions-row {
    grid-template-columns: minmax(110px, 160px) minmax(150px, 220px);
    justify-content: end;
  }
}

@media (max-width: 760px) {
  .operator-comparison-periods {
    grid-template-columns: 1fr;
  }
  .operator-comparison-periods .operator-period-arrow { display: none; }
  .operator-comparison-actions-card { grid-column: auto; }
  .operator-comparison-actions-row {
    grid-template-columns: 110px minmax(130px, 1fr);
    justify-content: stretch;
  }
}

/* ===== v2.7.15: настройки статусов — пары ID + название и надёжный sticky header ===== */
.status-pairs-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

.status-pairs-editor label {
  display: grid;
  gap: 7px;
  font-size: 13px;
}

.status-pairs-editor textarea {
  min-height: 148px;
}

.status-pairs-editor small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

/* В модальном окне прокручивается именно список строк, а шапка остаётся
   закреплённой поверх него. separate нужен Chromium для стабильного sticky
   внутри таблицы с overflow-контейнером. */
.status-options-wrap {
  position: relative;
  isolation: isolate;
  overflow: auto;
}

.status-options-table {
  width: 100% !important;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: visible;
}

.status-options-table thead {
  position: sticky;
  top: 0;
  z-index: 30;
}

.status-options-table thead th {
  position: sticky;
  top: 0;
  z-index: 31;
  background: #26364d;
  box-shadow: 0 2px 0 var(--border), 0 8px 16px rgba(8, 15, 28, .38);
}

.status-options-table tbody tr:first-child td {
  border-top: 0;
}

.status-options-table button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* v2.7.17: быстрые ответы из server-cache не должны мигать словом «Загрузка».
   Индикатор появляется только если реальный запрос длится заметно дольше 180 мс. */
.deferred-loading {
  min-height: 34px;
  display: flex;
  align-items: center;
  color: var(--muted, #8fa2bd);
  font-size: 14px;
  opacity: .9;
}

/* v2.7.19: стабильная геометрия сравнения операторов.
   В v2.7.10 flex был назначен прямо на <td>, из-за чего браузер переставал
   раскладывать первую ячейку как table-cell и строки визуально "плыли".
   Flex теперь только во внутреннем div, а все строки имеют одинаковую сетку. */
.operator-comparison-table td {
  display: table-cell;
}
.operator-comparison-summary-row {
  height: 58px;
}
.operator-comparison-summary-row > td {
  height: 58px;
  min-height: 58px;
  box-sizing: border-box;
  overflow: hidden;
}
.operator-cmp-person-cell {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-width: 0;
  min-height: 42px;
}
.operator-cmp-metric {
  display: grid;
  grid-template-rows: 18px 20px;
  align-content: center;
  justify-items: stretch;
  gap: 3px;
  width: 100%;
  min-width: 0;
  min-height: 41px;
}
.operator-cmp-values {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr);
  align-items: baseline;
  justify-items: stretch;
  gap: 3px;
  width: 100%;
  min-width: 0;
  white-space: nowrap;
}
.operator-cmp-period {
  display: inline-flex;
  min-width: 0;
  white-space: nowrap;
}
.operator-cmp-period.p1 {
  justify-self: end;
  justify-content: flex-end;
  text-align: right;
}
.operator-cmp-period.p2 {
  justify-self: start;
  justify-content: flex-start;
  text-align: left;
}
.operator-cmp-arrow {
  justify-self: center;
  width: 12px;
  text-align: center;
}
.operator-cmp-delta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 20px;
  min-height: 20px;
  overflow: hidden;
}
.operator-cmp-delta .trend-change {
  max-width: calc(100% - 4px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.operator-comparison-table .operator-comparison-result {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 1281px) {
  .operator-comparison-table .operator-cmp-col-person { width: 14%; }
  .operator-comparison-table .operator-cmp-col-metric { width: 17.5%; }
  .operator-comparison-table .operator-cmp-col-result { width: 16%; }
}

@media (max-width: 1280px) {
  .operator-comparison-summary-row,
  .operator-comparison-summary-row > td {
    height: 56px;
    min-height: 56px;
  }
  .operator-cmp-values {
    grid-template-columns: minmax(0, 1fr) 10px minmax(0, 1fr);
    gap: 2px;
  }
}

/* v2.7.22 — заметные, но спокойные кнопки раскрытия деталей проекта. */
.dashboard-projects-table th:last-child,
.dashboard-projects-table td:last-child {
  width: 118px;
  min-width: 118px;
  white-space: nowrap;
}

.project-detail-toggle {
  min-width: 92px;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 9px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #eaf2ff;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .12s ease;
}

.project-detail-toggle:hover,
.project-detail-bottom-close:hover {
  transform: translateY(-1px);
}

.project-detail-toggle:focus-visible,
.project-detail-bottom-close:focus-visible {
  outline: 2px solid rgba(147, 197, 253, .72);
  outline-offset: 2px;
}

/* Закрытый проект: спокойный синий — действие «открыть детали». */
.project-detail-toggle.project-detail-open {
  background: rgba(37, 99, 235, .28);
  border-color: rgba(96, 165, 250, .48);
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, .08);
}

.project-detail-toggle.project-detail-open:hover {
  background: rgba(37, 99, 235, .40);
  border-color: rgba(96, 165, 250, .70);
  box-shadow: 0 4px 14px rgba(15, 23, 42, .24);
}

/* Открытый проект: мягкий янтарный — действие «свернуть». */
.project-detail-toggle.project-detail-close {
  background: rgba(180, 104, 24, .24);
  border-color: rgba(245, 158, 11, .46);
  color: #fde7bd;
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .06);
}

.project-detail-toggle.project-detail-close:hover {
  background: rgba(180, 104, 24, .34);
  border-color: rgba(251, 191, 36, .64);
}

.project-detail-toggle-icon {
  display: inline-flex;
  width: 12px;
  justify-content: center;
  align-items: center;
  opacity: .92;
  font-size: 12px;
  line-height: 1;
}

/* Дублирующая кнопка внутри раскрытого блока заметнее и крупнее. */
.project-detail-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.project-detail-bottom-close {
  min-width: 148px;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid rgba(245, 158, 11, .52);
  background: rgba(180, 104, 24, .27);
  color: #fde7bd;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .06);
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .12s ease;
}

.project-detail-bottom-close:hover {
  background: rgba(180, 104, 24, .38);
  border-color: rgba(251, 191, 36, .72);
  box-shadow: 0 5px 16px rgba(15, 23, 42, .28);
}

@media (max-width: 900px) {
  .dashboard-projects-table th:last-child,
  .dashboard-projects-table td:last-child {
    width: 104px;
    min-width: 104px;
  }

  .project-detail-toggle {
    min-width: 84px;
    padding-inline: 9px;
  }

  .project-detail-bottom-close {
    min-width: 138px;
  }
}


/* v2.7.23 — именно Статистика → По проектам. Принудительно различаем состояния кнопки. */
#tab-dashboard .dashboard-projects-table .project-detail-toggle.project-detail-open {
  min-width: 100px;
  min-height: 36px;
  padding: 7px 13px;
  background: rgba(45, 94, 155, .58) !important;
  border: 1px solid rgba(96, 165, 250, .72) !important;
  color: #eef6ff !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .18), inset 0 0 0 1px rgba(147, 197, 253, .05);
}

#tab-dashboard .dashboard-projects-table .project-detail-toggle.project-detail-open:hover {
  background: rgba(53, 111, 181, .68) !important;
  border-color: rgba(125, 183, 255, .90) !important;
}

#tab-dashboard .dashboard-projects-table .project-detail-toggle.project-detail-close {
  min-width: 100px;
  min-height: 36px;
  padding: 7px 13px;
  background: rgba(128, 88, 34, .62) !important;
  border: 1px solid rgba(215, 165, 83, .72) !important;
  color: #fff1d5 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .18), inset 0 0 0 1px rgba(251, 191, 36, .04);
}

#tab-dashboard .dashboard-projects-table .project-detail-toggle.project-detail-close:hover {
  background: rgba(151, 103, 39, .70) !important;
  border-color: rgba(232, 180, 91, .90) !important;
}

#tab-dashboard .project-detail-title {
  align-items: center;
  min-height: 48px;
}

#tab-dashboard .project-detail-bottom-close {
  min-width: 172px;
  min-height: 44px;
  padding: 10px 18px;
  background: rgba(128, 88, 34, .64) !important;
  border: 1px solid rgba(215, 165, 83, .76) !important;
  color: #fff1d5 !important;
  font-size: 13px;
  font-weight: 800;
}

#tab-dashboard .project-detail-bottom-close:hover {
  background: rgba(151, 103, 39, .72) !important;
  border-color: rgba(232, 180, 91, .92) !important;
}

/* v2.7.24 — Расстановка: сразу видно, кого на какой проект ставить. */
#operator-placement-content .operator-placement-card > summary::before {
  display: none;
}

.placement-overview {
  margin: 4px 0 16px;
  padding: 14px;
  border: 1px solid rgba(96, 165, 250, .28);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(30, 64, 175, .10), rgba(15, 23, 42, .42));
}

.placement-overview-selected {
  border-color: rgba(59, 130, 246, .40);
}

.placement-overview-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.placement-overview-title {
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
}

.placement-overview-note {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.placement-overview-count {
  min-width: 30px;
  padding: 4px 9px;
  border-radius: 999px;
  text-align: center;
  color: #dbeafe;
  background: rgba(37, 99, 235, .24);
  border: 1px solid rgba(96, 165, 250, .28);
  font-size: 12px;
  font-weight: 800;
}

.placement-destination-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.placement-destination-card {
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(15, 23, 42, .44);
}

.placement-destination-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
}

.placement-destination-title > span {
  min-width: 26px;
  padding: 2px 7px;
  border-radius: 999px;
  text-align: center;
  color: var(--accent);
  background: rgba(59, 130, 246, .12);
  font-size: 11px;
  font-weight: 800;
}

.placement-destination-operators,
.placement-overview-operators {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.placement-destination-operator,
.placement-assignment-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid rgba(34, 197, 94, .28);
  border-radius: 9px;
  background: rgba(34, 197, 94, .09);
  color: var(--text);
  line-height: 1.1;
}

.placement-destination-operator small,
.placement-assignment-chip small {
  color: var(--muted);
  font-size: 10px;
}

.placement-destination-operator.limited {
  border-color: rgba(245, 158, 11, .30);
  background: rgba(245, 158, 11, .08);
}

.placement-assignment-chip {
  flex-direction: column;
  align-items: flex-start;
  min-width: 128px;
}

.placement-assignment-chip > span {
  font-size: 10px;
  font-weight: 700;
}

.placement-assignment-chip.good {
  border-color: rgba(34, 197, 94, .38);
  background: rgba(34, 197, 94, .11);
}
.placement-assignment-chip.warn {
  border-color: rgba(245, 158, 11, .36);
  background: rgba(245, 158, 11, .09);
}
.placement-assignment-chip.bad {
  border-color: rgba(239, 68, 68, .32);
  background: rgba(239, 68, 68, .07);
}
.placement-assignment-chip.neutral {
  border-color: var(--border);
  background: rgba(30, 41, 59, .52);
}

.placement-operator-list {
  display: grid;
  gap: 10px;
}

.operator-placement-card {
  margin-bottom: 0;
}

.operator-placement-card > summary {
  display: grid;
  grid-template-columns: minmax(250px, 1.25fr) minmax(420px, 2fr) 112px;
  gap: 12px;
  align-items: center;
  min-height: 68px;
}

.operator-placement-card > summary > span:first-child {
  flex: initial;
}

.placement-operator-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 9px;
  min-width: 0;
}

.placement-operator-decision {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.placement-decision {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 230px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 11px;
  white-space: nowrap;
}

.placement-decision strong {
  overflow: hidden;
  text-overflow: ellipsis;
}

.placement-decision-label {
  color: var(--muted);
  font-weight: 600;
}

.placement-decision-primary {
  color: #dff8e8;
  background: rgba(34, 197, 94, .10);
  border-color: rgba(34, 197, 94, .32);
}

.placement-decision-secondary {
  color: #f8e9c9;
  background: rgba(245, 158, 11, .08);
  border-color: rgba(245, 158, 11, .26);
}

.placement-decision-only {
  color: #e8edf5;
  background: rgba(100, 116, 139, .10);
  border-color: rgba(148, 163, 184, .24);
}

.placement-selected-rank {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.placement-selected-rank.good { color: var(--good); background: rgba(34, 197, 94, .10); }
.placement-selected-rank.warn { color: var(--warn); background: rgba(245, 158, 11, .10); }
.placement-selected-rank.bad { color: var(--bad); background: rgba(239, 68, 68, .09); }

.placement-summary-metrics {
  justify-content: flex-end;
  align-items: center;
}

/* Кнопки как в «Статистика → По проектам»: синий = открыть, янтарный = закрыть. */
.operator-placement-toggle {
  min-width: 108px;
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 9px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #eef6ff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  transition: background-color .16s ease, border-color .16s ease, transform .12s ease;
}

.operator-placement-toggle:hover { transform: translateY(-1px); }

.operator-placement-toggle.operator-placement-open {
  background: rgba(45, 94, 155, .58);
  border-color: rgba(96, 165, 250, .68);
}
.operator-placement-toggle.operator-placement-open:hover {
  background: rgba(53, 111, 181, .68);
  border-color: rgba(125, 183, 255, .86);
}

.operator-placement-toggle.operator-placement-close {
  background: rgba(128, 88, 34, .62);
  border-color: rgba(215, 165, 83, .68);
  color: #fff1d5;
}
.operator-placement-toggle.operator-placement-close:hover {
  background: rgba(151, 103, 39, .70);
  border-color: rgba(232, 180, 91, .88);
}

.operator-placement-bottom-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 12px;
}

.operator-placement-bottom-close {
  min-width: 132px;
  min-height: 40px;
  padding-inline: 16px;
}

@media (max-width: 1180px) {
  .operator-placement-card > summary {
    grid-template-columns: minmax(240px, 1fr) 112px;
  }
  .placement-summary-metrics {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .operator-placement-card > summary {
    grid-template-columns: 1fr;
  }
  .placement-summary-metrics {
    grid-column: auto;
    justify-content: flex-start;
  }
  .operator-placement-toggle {
    justify-self: start;
  }
  .placement-destination-grid {
    grid-template-columns: 1fr;
  }
}

.placement-selected-project-row td {
  box-shadow: inset 0 1px 0 rgba(96, 165, 250, .18), inset 0 -1px 0 rgba(96, 165, 250, .18);
  background: rgba(59, 130, 246, .055);
}

/* v2.7.25 — Расстановка: слабых операторов не концентрируем на одном проекте. */
.placement-decision-alert {
  color: #ffd7d7;
  background: rgba(185, 55, 55, .13);
  border-color: rgba(239, 104, 104, .34);
}

.placement-decision-test {
  color: #dcecff;
  background: rgba(45, 94, 155, .16);
  border-color: rgba(96, 165, 250, .35);
}

.placement-decision-spread {
  color: #ffe8bf;
  background: rgba(171, 112, 31, .13);
  border-color: rgba(226, 170, 84, .34);
}

.placement-overview-risk {
  border-color: rgba(239, 104, 104, .34);
  background: linear-gradient(135deg, rgba(127, 29, 29, .12), rgba(15, 23, 42, .44));
}

.placement-overview-count-risk {
  color: #ffd7d7;
  background: rgba(185, 55, 55, .18);
  border-color: rgba(239, 104, 104, .30);
}

.placement-risk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 9px;
}

.placement-risk-operator {
  min-width: 0;
  padding: 10px 11px;
  border-radius: 10px;
  border: 1px solid rgba(245, 158, 11, .28);
  background: rgba(120, 79, 20, .09);
}

.placement-risk-operator.critical {
  border-color: rgba(239, 104, 104, .31);
  background: rgba(127, 29, 29, .10);
}

.placement-risk-operator-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.placement-risk-operator-head > span {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 999px;
  color: #ffc7c7;
  background: rgba(185, 55, 55, .14);
  font-size: 9px;
  font-weight: 800;
}

.placement-risk-action {
  color: var(--text);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
}

.placement-risk-operator small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
}

@media (min-width: 1181px) {
  .operator-placement-card > summary {
    grid-template-columns: minmax(390px, 1.45fr) minmax(360px, 1.55fr) 112px;
  }
}


/* v2.7.26 — все проекты в рекомендуемой расстановке + видимый empty-state. */
.placement-destination-empty {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px dashed rgba(148, 163, 184, .32);
  border-radius: 10px;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.25;
}


/* v2.7.30 — вторичная метрика товара: нейтральная серая компактная подложка. */
.product-secondary-metric {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-top: 3px;
  padding: 2px 7px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 999px;
  background: rgba(148, 163, 184, .09);
  color: var(--muted);
  white-space: nowrap;
  line-height: 1.15;
}

.product-secondary-value {
  color: #aeb8c8;
  font-weight: 700;
}

.product-secondary-label {
  color: var(--muted);
  font-weight: 500;
}


/* ===== v2.7.31: единый скролл модальных окон + быстрый сброс поиска ===== */
.modal.modal-wide {
  scrollbar-width: thin;
  scrollbar-color: rgba(59, 130, 246, .75) rgba(15, 23, 42, .86);
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

.modal.modal-wide::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.modal.modal-wide::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, .86);
  border-radius: 999px;
}

.modal.modal-wide::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, .75);
  border: 2px solid rgba(15, 23, 42, .86);
  border-radius: 999px;
}

.modal.modal-wide::-webkit-scrollbar-thumb:hover {
  background: rgba(96, 165, 250, .88);
}

/* Поля поиска получают нативную кнопку очистки, но в стиле интерфейса.
   Крестик появляется только когда в поле есть текст. */
input.search-with-clear[type="search"] {
  padding-right: 36px;
}

input.search-with-clear[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-right: 1px;
  cursor: pointer;
  opacity: .9;
  border-radius: 50%;
  background:
    linear-gradient(45deg, transparent 43%, #a8b3c5 44%, #a8b3c5 56%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, #a8b3c5 44%, #a8b3c5 56%, transparent 57%),
    rgba(51, 65, 85, .56);
  box-shadow: 0 0 0 1px rgba(148, 163, 184, .18);
}

input.search-with-clear[type="search"]::-webkit-search-cancel-button:hover {
  background:
    linear-gradient(45deg, transparent 43%, #e2e8f0 44%, #e2e8f0 56%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, #e2e8f0 44%, #e2e8f0 56%, transparent 57%),
    rgba(71, 85, 105, .78);
}