/* Контроль отдела продаж — тёмная тема.
   Глубокая вода: бирюза, латунь маяков.

   Палитра данных проверена валидатором из гайда по визуализации на этой самой
   поверхности (#0e1a24, тёмный режим): яркость в допустимой полосе, разделимость
   при дальтонизме ΔE 12,8 при пороге 8, контраст к фону выше 3:1.
   Статусные цвета взяты фиксированными из гайда и никогда не несут смысл
   в одиночку — рядом всегда число или подпись. */

:root {
  color-scheme: dark;

  /* поверхности: от глубины к отмели */
  --глубина:      #08131c;
  --вода:         #0e1a24;
  --отмель:       #14232f;
  --пена:         #1c2f3d;

  /* текст */
  --текст:        #e8f0f4;
  --текст-2:      #93a8b5;
  --текст-3:      #5d7382;

  /* данные */
  --навыки:       #0f9b8e;   /* морская бирюза — навыки продаж */
  --эи:           #c98500;   /* латунь — эмоциональный интеллект */
  --третий:       #3987e5;

  /* статусы (фиксированы гайдом, всегда с подписью) */
  --хорошо:       #0ca30c;
  --внимание:     #fab219;
  --плохо:        #d03b3b;

  --линия:        #23394a;
  --сетка:        rgba(147, 168, 181, 0.14);

  /* интерфейс: акцент и главная кнопка. Отдельно от цветов данных — заказчик
     переопределяет их своим брендом (/client.css), а графики остаются в
     проверенной палитре. По умолчанию — та же бирюза, что и раньше. */
  --акцент:       var(--навыки);
  --акцент-rgb:   15, 155, 142;
  --кнопка-фон:   transparent;
  --кнопка-рамка: var(--навыки);
  --кнопка-текст: var(--текст);

  --скругление:   14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font: 15px/1.55 "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(1200px 600px at 15% -10%, #10293a 0%, transparent 60%),
    radial-gradient(900px 500px at 95% 0%, #0d2430 0%, transparent 55%),
    var(--глубина);
  background-attachment: fixed;
  color: var(--текст);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ─────────── шапка ─────────── */

.шапка {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 34px 20px;
  border-bottom: 1px solid var(--линия);
}

.лого {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.4px;
  display: flex;
  align-items: baseline;
  gap: 11px;
}

/* маяк: отметка живой системы */
.лого::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--акцент);
  box-shadow: 0 0 0 4px rgba(var(--акцент-rgb), .16);
  animation: маяк 3.6s ease-in-out infinite;
}
@keyframes маяк {
  0%, 100% { box-shadow: 0 0 0 4px rgba(var(--акцент-rgb), .16); }
  50%      { box-shadow: 0 0 0 9px rgba(var(--акцент-rgb), .04); }
}
@media (prefers-reduced-motion: reduce) { .лого::before { animation: none; } }

/* Логотип заказчика слева от названия, через тонкую черту */
.бренд { display: flex; align-items: center; gap: 16px; min-width: 0; }
.логотип { display: block; height: 26px; width: auto; max-width: 160px; }
.логотип.белый { filter: brightness(0) invert(1); }
.бренд .логотип:not([hidden]) + .лого { padding-left: 16px; border-left: 1px solid var(--линия); }
.бренд .лого { min-width: 0; }

/* Узкий экран: логотип с названием — на всю строку, подпись заказчика и вход —
   строкой ниже. Иначе название наезжает на блок пользователя. */
@media (max-width: 640px) {
  .шапка { flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 18px 16px 14px; }
  .бренд { width: 100%; gap: 12px; }
  .бренд .логотип:not([hidden]) + .лого { padding-left: 12px; font-size: 17px; }
  .логотип { height: 22px; }
}

/* Главное действие экрана: «Войти», «Сохранить настройки». У бренда — заливка
   фирменным цветом с белым текстом, без бренда — прежняя обводка. */
.главная-кнопка {
  background: var(--кнопка-фон); color: var(--кнопка-текст);
  border: 1px solid var(--кнопка-рамка); border-radius: 9px;
  font: inherit; font-weight: 600; cursor: pointer;
  transition: filter .15s;
}
.главная-кнопка:hover { filter: brightness(1.12); }
.главная-кнопка:focus-visible { outline: 2px solid var(--акцент); outline-offset: 2px; }

.жк { color: var(--текст-3); font-size: 13.5px; letter-spacing: .2px; }

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

.вкладки {
  display: flex;
  gap: 2px;
  padding: 0 34px;
  border-bottom: 1px solid var(--линия);
  background: rgba(8, 19, 28, .72);
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: blur(8px);

  /* На узком экране шесть вкладок в строку не помещаются: «Сводка»
     и «Настройки» уезжали за край и становились недостижимы — открыть
     их с телефона было нельзя. Полосу листаем пальцем. */
  overflow-x: auto;
  scrollbar-width: none;
}
.вкладки::-webkit-scrollbar { display: none; }
.вкладка { flex: 0 0 auto; white-space: nowrap; }

.вкладка {
  background: none; border: none;
  padding: 15px 20px 13px;
  font: inherit; font-size: 14.5px;
  color: var(--текст-3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.вкладка:hover { color: var(--текст-2); }
.вкладка.активная { color: var(--текст); border-bottom-color: var(--акцент); }

main { padding: 28px 34px 60px; max-width: 1480px; }

/* ─────────── плитки ─────────── */

.плитки {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}

.плитка {
  background: linear-gradient(160deg, var(--отмель), var(--вода));
  border: 1px solid var(--линия);
  border-radius: var(--скругление);
  padding: 18px 20px 20px;
  position: relative;
  overflow: hidden;
}
.плитка::after {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--акцент-rgb), .5), transparent);
}
.плитка .подпись {
  color: var(--текст-3);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 10px;
}
.плитка .число {
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -1.5px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.плитка .хвост { color: var(--текст-3); font-size: 14px; font-weight: 400; letter-spacing: 0; }

/* ─────────── карточки ─────────── */

.карточка {
  background: var(--вода);
  border: 1px solid var(--линия);
  border-radius: var(--скругление);
  padding: 22px 24px;
  margin-bottom: 18px;
}
.карточка h2 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--текст-3);
  margin-bottom: 18px;
}
/* заголовок разбора несёт имена людей — капс тут неуместен */
.карточка h2.разбор {
  font-size: 17px;
  text-transform: none;
  letter-spacing: -0.2px;
  color: var(--текст);
  font-weight: 500;
}

.полоса-карточек { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; }

/* ─────────── менеджеры ─────────── */

.менеджер {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid var(--линия);
}
.менеджер:last-child { border-bottom: none; }
.менеджер .имя { font-size: 16px; font-weight: 500; }
.менеджер .мелко { color: var(--текст-3); font-size: 13px; margin-top: 3px; }

.шкалы { display: grid; gap: 7px; min-width: 230px; }
.шкала { display: grid; grid-template-columns: 30px 1fr 34px; gap: 9px; align-items: center; font-size: 12px; }
.шкала .метка-ш { color: var(--текст-3); }
.шкала .жёлоб { height: 7px; background: var(--пена); border-radius: 4px; overflow: hidden; }
.шкала .заливка { height: 100%; border-radius: 4px; }
.шкала .цифра { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* ─────────── звонки ─────────── */

.звонок {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 15px 16px;
  border: 1px solid var(--линия);
  border-radius: 11px;
  margin-bottom: 9px;
  cursor: pointer;
  background: var(--вода);
  transition: border-color .15s, transform .15s, background .15s;
}
.звонок:hover { border-color: var(--акцент); transform: translateX(3px); background: var(--отмель); }

.звонок .время { color: var(--текст-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.звонок .время b { display: block; color: var(--текст-2); font-size: 15px; font-weight: 500; }
.звонок .кто { font-size: 15px; }
.звонок .кто .клиент { color: var(--текст-3); font-size: 13px; margin-top: 2px; }
.звонок .оценки { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* оценка: цвет плюс всегда число — цвет никогда не единственный носитель смысла */
.балл {
  min-width: 46px; text-align: center;
  padding: 5px 9px; border-radius: 8px;
  font-weight: 600; font-size: 14px;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}
.балл.хорошо  { background: rgba(12,163,12,.14);  color: #4ade4a; border-color: rgba(12,163,12,.34); }
.балл.средне  { background: rgba(250,178,25,.13); color: #fbc85a; border-color: rgba(250,178,25,.3); }
.балл.плохо   { background: rgba(208,59,59,.14);  color: #f08585; border-color: rgba(208,59,59,.34); }

.метка {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 20px;
  font-size: 12px; font-weight: 500;
  border: 1px solid var(--линия);
  color: var(--текст-2);
  white-space: nowrap;
}
.метка.успешный   { border-color: rgba(12,163,12,.4);  color: #4ade4a; }
.метка.неуспешный { border-color: rgba(208,59,59,.4);  color: #f08585; }
.метка.горячий    { border-color: rgba(208,59,59,.45); color: #f08585; }
.метка.тёплый     { border-color: rgba(250,178,25,.4); color: #fbc85a; }
.метка.холодный   { border-color: rgba(57,135,229,.4); color: #7fb3f0; }

/* Демонстрационный разговор, а не звонок заказчика. Метка нарочно тусклая
   и мелкая: она должна читаться при внимательном взгляде, но не спорить
   с оценками. Пока боевых звонков мало, кабинет без примеров пуст, поэтому
   примеры показываем — но перепутать их с настоящими нельзя. */
.метка.демо {
  padding: 2px 8px; font-size: 11px; font-weight: 400;
  border-style: dashed; border-color: var(--линия);
  color: var(--текст-3); vertical-align: middle;
}

/* ─────────── радар ─────────── */

.радар-блок { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 28px; align-items: start; }
@media (max-width: 980px) { .радар-блок { grid-template-columns: 1fr; } }

.легенда { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.легенда span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--текст-2); }
.легенда i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* точные значения рядом с радаром: глазомер по лепесткам ненадёжен */
.навык-строка {
  display: grid; grid-template-columns: 1fr 46px;
  gap: 12px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid rgba(35,57,74,.55);
  font-size: 13.5px;
}
.навык-строка:last-child { border-bottom: none; }
.навык-строка .знач { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ─────────── детали разбора ─────────── */

.навык {
  display: grid; grid-template-columns: 210px 56px 1fr;
  gap: 16px; align-items: start;
  padding: 13px 0; border-bottom: 1px solid rgba(35,57,74,.5);
}
.навык:last-child { border-bottom: none; }
.навык .имя { font-size: 14px; }
.навык .обоснование { color: var(--текст-2); font-size: 13.5px; }
.навык .цитата {
  color: var(--текст-3); font-size: 13px; font-style: italic;
  margin-top: 5px; padding-left: 11px; border-left: 2px solid var(--линия);
}

.поля { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 11px; }
.поле { background: var(--отмель); border: 1px solid var(--линия); border-radius: 10px; padding: 12px 14px; }
.поле .подпись { color: var(--текст-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 5px; }
.поле .значение { font-size: 14px; }
.поле.пусто { border-style: dashed; }
.поле.пусто .значение { color: var(--текст-3); }

.список { list-style: none; }
.список li {
  padding: 10px 0 10px 26px; position: relative;
  border-bottom: 1px solid rgba(35,57,74,.5); font-size: 14px;
}
.список li:last-child { border-bottom: none; }
.список li::before {
  content: ""; position: absolute; left: 4px; top: 17px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--акцент);
}

.расшифровка { max-height: 440px; overflow-y: auto; padding-right: 6px; }
.реплика { display: grid; grid-template-columns: 52px 1fr; gap: 14px; margin-bottom: 13px; font-size: 14px; }
.реплика .время { color: var(--текст-3); font-size: 12px; font-variant-numeric: tabular-nums; padding-top: 10px; }
.реплика .текст { padding: 9px 13px; border-radius: 10px; }
.реплика.менеджер .текст { background: rgba(15,155,142,.1);  border-left: 2px solid var(--навыки); }
.реплика.клиент .текст   { background: rgba(147,168,181,.07); border-left: 2px solid var(--текст-3); }

/* Роль не определена — смешанная запись. Своя рамка, чтобы это читалось
   как «неизвестно», а не как ещё один участник разговора. */
.реплика.без-роли .текст {
  background: rgba(147,168,181,.04);
  border-left: 2px dashed var(--линия);
}
/* Подпись «Менеджер» / «Клиент» под временем: заказчик просил видеть,
   чей текст, при каждой смене роли (письмо от 09.09). */
.реплика .кто {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--текст-3); margin-top: 3px;
}

.назад {
  background: none; border: 1px solid var(--линия); border-radius: 9px;
  padding: 8px 15px; cursor: pointer; margin-bottom: 18px;
  font: inherit; font-size: 13.5px; color: var(--текст-2);
}
.назад:hover { border-color: var(--акцент); color: var(--текст); }

.заглушка {
  color: var(--текст-3); font-size: 14px; padding: 34px;
  text-align: center; background: var(--отмель);
  border: 1px dashed var(--линия); border-radius: 11px;
  line-height: 1.7;
}

.плеер { display: flex; align-items: center; gap: 14px; padding: 13px 16px; background: var(--отмель); border: 1px solid var(--линия); border-radius: 11px; margin-bottom: 16px; }
.плеер audio { width: 100%; height: 34px; }

.сводка { font-size: 15px; line-height: 1.65; }
.шапка-разбора { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 18px; align-items: center; }

/* всплывающая подсказка графиков */
.подсказка {
  position: fixed; pointer-events: none; z-index: 100;
  background: var(--пена); border: 1px solid var(--линия);
  border-radius: 9px; padding: 9px 12px; font-size: 13px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  opacity: 0; transition: opacity .12s;
}
.подсказка.видна { opacity: 1; }
.подсказка .т-имя { color: var(--текст-2); margin-bottom: 4px; }
.подсказка .т-знач { font-weight: 600; font-variant-numeric: tabular-nums; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--глубина); }
::-webkit-scrollbar-thumb { background: var(--пена); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #26404f; }

/* ─────────── переключатель периода графика ─────────── */

/* ТЗ требует график «за произвольный период (день/неделя/месяц)».
   Расчёт умел это давно, а выбрать в кабинете было нельзя — замечание
   заказчика от 08.09.2026. Кнопки нарочно тихие: это настройка вида,
   а не действие, и спорить с данными на графике они не должны. */
.периоды { display: flex; gap: 2px; }

.период {
  background: none; border: 1px solid var(--линия);
  padding: 5px 12px; font: inherit; font-size: 12.5px;
  color: var(--текст-3); cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.период:first-child { border-radius: 7px 0 0 7px; }
.период:last-child  { border-radius: 0 7px 7px 0; }
.период + .период   { border-left: none; }
.период:hover { color: var(--текст-2); }
.период.активный {
  color: var(--текст); border-color: var(--акцент);
  background: rgba(var(--акцент-rgb), .12);
}
/* у соседа слева граница пропала — вернём её активному, иначе он «висит» */
.период.активный + .период { border-left: 1px solid var(--линия); }

/* тип разговора: тихая метка, не спорит с оценками */
.метка.тип {
  border-style: dashed; color: var(--текст-3);
  font-weight: 400; font-size: 11.5px; padding: 3px 9px;
}

/* Пояснение, почему у звонка нет оценок. Показывается вместо радара
   и списка навыков там, где продажи быть не могло: пустые шкалы с нулями
   читаются как поломка, а не как «оценивать нечего». */
.пояснение-типа {
  margin-top: 14px;
  padding: 12px 16px;
  border-left: 2px solid var(--линия);
  color: var(--текст-2);
  font-size: 13.5px;
  line-height: 1.5;
}

/* ─────────── период для всего кабинета ───────────
   Просьба заказчика от 09.09.2026, п. 11: чтобы весь дашборд считался
   за выбранные даты. В договоре произвольный период оговорён только
   для графика динамики — остальное сделано сверх. */
.полоса-периода {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 34px; border-bottom: 1px solid var(--линия);
  background: rgba(8, 19, 28, .45);
  font-size: 13px; color: var(--текст-3);
}
.подпись-периода {
  text-transform: uppercase; letter-spacing: .7px; font-size: 11px;
  color: var(--текст-3); margin-right: 4px;
}
.полоса-периода .быстрый {
  background: none; border: 1px solid var(--линия); border-radius: 7px;
  padding: 4px 11px; font: inherit; font-size: 12.5px;
  color: var(--текст-2); cursor: pointer;
}
.полоса-периода .быстрый:hover { color: var(--текст); border-color: var(--текст-3); }
.полоса-периода .быстрый.активный {
  color: var(--текст); border-color: var(--акцент);
  background: rgba(var(--акцент-rgb), .12);
}
.разделитель-периода { width: 1px; height: 18px; background: var(--линия); margin: 0 4px; }
.полоса-периода label { display: flex; align-items: center; gap: 5px; }
.полоса-периода input[type=date] {
  background: var(--вода); border: 1px solid var(--линия); color: var(--текст);
  border-radius: 7px; padding: 4px 8px; font: inherit; font-size: 12.5px;
  color-scheme: dark;
}
.итог-периода { margin-left: auto; font-size: 12.5px; color: var(--текст-3); }

/* Повторный звонок того же клиента. Считается по номеру телефона,
   а не угадывается по словам — просьба заказчика от 11.09.2026. */
.метка.повторный {
  color: var(--третий);
  border-color: rgba(57, 135, 229, .45);
  background: rgba(57, 135, 229, .1);
}

/* Плитка, по которой можно провалиться в список звонков этого типа.
   Просьба заказчика от 11.09.2026. */
.плитка.кликабельно { cursor: pointer; transition: border-color .15s, transform .15s; }
.плитка.кликабельно:hover { border-color: var(--акцент); transform: translateY(-2px); }
.ссылка-тип { color: var(--текст-2); text-decoration: none; border-bottom: 1px dotted var(--линия); }
.ссылка-тип:hover { color: var(--акцент); border-bottom-color: var(--акцент); }

/* Кнопка выгрузки в таблицу */
.выгрузка {
  background: none; border: 1px solid var(--линия); border-radius: 7px;
  padding: 6px 13px; font: inherit; font-size: 13px;
  color: var(--текст-2); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px;
}
.выгрузка:hover { color: var(--текст); border-color: var(--акцент); }

/* Ипотечный брокер (17.09.2026). ТЗ требует для него отдельные критерии
   оценки, и в кабинете он показан отдельно от менеджеров. Цвет — «третий»,
   тот же, что у шкалы его балла: зелёный и янтарный заняты навыками продаж
   и эмоциональным интеллектом, а брокер не оценивается ни тем ни другим. */
.метка.брокер {
  padding: 2px 8px; font-size: 11px; font-weight: 500;
  color: var(--третий);
  border-color: rgba(57, 135, 229, .45);
  background: rgba(57, 135, 229, .1);
  vertical-align: middle;
}
/* Блок брокера живёт в карточке «Менеджеры», под списком: отдельная карточка
   ломала бы сетку дашборда из двух колонок. Отбиваем его линией и отступом. */
.карточка h2.подзаголовок-брокера {
  margin: 22px 0 4px; padding-top: 18px;
  border-top: 1px solid var(--линия);
}
.критерии-брокера { padding: 2px 0 4px; }