/* ============================================================
   OKK — тема Qualcall (дизайн-система Sellout).
   Образец вида: redesign.okk, ветка frontend/kostinstroy-sellout-redesign,
   web/src/styles/*.css. Берём только вид и раскладку, не код.
   Слой поверх design-system.css: токены Sellout (css/sellout/*.css,
   подключены раньше) → токены приложения → вид реальных классов.
   Загружать ПОСЛЕ design-system.css. Цвета — только через токены.
   ============================================================ */

:root {
  /* ---- мост Sellout → OKK (как tokens.css образца) ---- */
  --okk-accent:        var(--sd-accent);
  --okk-accent-hover:  var(--sd-action-hover);
  --okk-accent-soft:   var(--sd-accent-soft);
  --okk-accent-ring:   color-mix(in srgb, var(--sd-focus) 22%, transparent);
  --okk-on-accent:     var(--sd-on-action);
  --okk-action:        var(--sd-action);
  --okk-action-hover:  var(--sd-action-hover);
  --okk-on-action:     var(--sd-on-action);

  --okk-bg:            var(--sd-bg);
  --okk-surface:       var(--sd-surface);
  --okk-surface-2:     var(--sd-sand);
  --okk-surface-3:     var(--sd-surface);
  --okk-raised:        var(--sd-surface-raised);
  --okk-input:         var(--sd-input-bg);
  --okk-hover:         var(--sd-row-hover);
  --okk-nav-active:    var(--sd-accent-soft);

  --okk-text:          var(--sd-text);
  --okk-text-2:        var(--sd-text-secondary);
  --okk-text-3:        var(--sd-text-muted);

  --okk-border:        var(--sd-border);
  --okk-border-soft:   var(--sd-border);
  --okk-border-strong: var(--sd-control-border);

  --okk-good:          var(--sd-green);
  --okk-good-soft:     var(--sd-green-soft);
  --okk-warn:          var(--sd-warning);
  --okk-warn-soft:     var(--sd-warning-soft);
  --okk-bad:           var(--sd-error);
  --okk-bad-soft:      var(--sd-error-soft);
  --okk-info:          var(--sd-info);
  --okk-info-soft:     var(--sd-info-soft);

  /* Серии графиков: различимые цвета, не фон страницы. */
  --okk-c1: var(--sd-accent);
  --okk-c2: var(--sd-info);
  --okk-c3: var(--sd-warning);
  --okk-c4: var(--sd-green-display);
  --okk-c5: #8b6aad;
  --okk-c6: #337f88;
  --okk-track: var(--sd-border);

  --okk-font: var(--sd-font);
  --okk-mono: var(--sd-font);

  --okk-r-xs:   8px;
  --okk-r-sm:   var(--sd-radius-input);
  --okk-r-md:   var(--sd-radius-sm);
  --okk-r-lg:   var(--sd-radius-card);
  --okk-r-xl:   var(--sd-radius-panel);
  --okk-r-full: var(--sd-radius-pill);

  --okk-sh-1:   none;
  --okk-sh-2:   var(--sd-shadow-soft);
  --okk-sh-3:   var(--sd-shadow-overlay);
  --okk-sh-pop: var(--sd-shadow-overlay);

  --okk-sidebar-w: 244px;
  --okk-sidebar-w-collapsed: 88px;
  --okk-header-h: 64px;
  --okk-gap: 16px;
  --okk-card-pad: 20px;
  --okk-ease: var(--sd-ease);

  /* ---- токены design-system.css → Sellout ---- */
  --color-primary:        var(--okk-accent);
  --color-primary-hover:  var(--okk-accent-hover);
  --color-primary-light:  var(--okk-accent-soft);
  --color-primary-muted:  var(--okk-accent-soft);
  --color-primary-dark:   var(--okk-action-hover);

  --bg-app:          var(--okk-bg);
  --bg-card:         var(--okk-surface);
  --bg-sidebar:      var(--okk-surface);
  --bg-nav-active:   var(--okk-nav-active);
  --bg-hover:        var(--okk-hover);
  --bg-input:        var(--okk-input);
  --bg-input-focus:  var(--okk-input);
  /* Использовались, но нигде не были определены. */
  --bg-elevated:     var(--okk-raised);
  --bg-subtle:       var(--okk-surface);
  --bg-secondary:    var(--okk-surface);
  --bg-primary:      var(--okk-bg);
  --bg-white:        var(--okk-bg);
  --bg-inverse:      var(--okk-action);

  --text-primary:   var(--okk-text);
  --text-secondary: var(--okk-text-2);
  --text-muted:     var(--okk-text-3);
  --text-inverse:   var(--okk-on-action);
  --text-link:      var(--okk-accent);

  --color-success:       var(--okk-good);
  --color-success-light: var(--okk-good-soft);
  --color-success-dark:  var(--okk-good);
  --color-error:         var(--okk-bad);
  --color-error-light:   var(--okk-bad-soft);
  --color-warning:       var(--okk-warn);
  --color-warning-light: var(--okk-warn-soft);
  --color-info:          var(--okk-info);
  --color-info-light:    var(--okk-info-soft);

  --border-default: var(--okk-border);
  --border-light:   var(--okk-border);
  --border-focus:   var(--okk-accent);
  --border-card:    var(--okk-border);
  --border-color:   var(--okk-border);
  --border-hover:   var(--okk-border-strong);
  --border-input:   var(--okk-border-strong);
  --border-medium:  var(--okk-border-strong);

  --shadow-sm:       var(--okk-sh-1);
  --shadow-card:     var(--okk-sh-1);
  --shadow-md:       var(--okk-sh-2);
  --shadow-lg:       var(--okk-sh-3);
  --shadow-xl:       var(--okk-sh-3);
  --shadow-hover:    var(--okk-sh-2);
  --shadow-dropdown: var(--okk-sh-3);

  --card-border-radius: var(--okk-r-lg);

  --font-primary: var(--okk-font);
  --font-family:  var(--okk-font);
  --font-mono:    var(--okk-mono);
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-md: 14px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --sidebar-width: var(--okk-sidebar-w);
}
[data-theme="dark"] { --okk-c5: #c1a9e1; --okk-c6: #8ec7cb; }

/* ---- база ---- */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  background: var(--okk-bg);
  color: var(--okk-text);
  font-family: var(--okk-font);
  transition: background .35s var(--okk-ease), color .35s var(--okk-ease);
}
::selection { background: var(--okk-accent-ring); }
:focus-visible { outline: 2px solid var(--sd-focus); outline-offset: 2px; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -0.01em; }

/* ---- карточки: серые на белой странице, без тени (как .okk-card образца) ---- */
.card {
  background: var(--okk-surface);
  border: 1px solid var(--okk-border);
  border-radius: var(--okk-r-lg);
  box-shadow: none;
}

/* ---- заголовки страниц (PageHead образца) ---- */
#main-content h1,
.page-title,
.page-header h1 {
  font-size: 28px;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--okk-text);
}
.page-subtitle,
.page-sub {
  font-size: 14px;
  line-height: 22px;
  color: var(--okk-text-3);
  margin-top: 4px;
}
@media (max-width: 640px) {
  #main-content h1, .page-title, .page-header h1 { font-size: 24px; line-height: 32px; }
  .page-subtitle, .page-sub { font-size: 13px; line-height: 20px; }
}

/* ---- Страница из виджетов (page-stack образца) ---- */
.page-stack { display: flex; flex-direction: column; gap: var(--okk-gap); min-width: 0; }
/* Шапка страницы как PageHead образца: до первого блока — только отступ page-stack (16px).
   !important — против мобильного правила старого design-system.css. */
.page-stack > .page-header { margin-bottom: 0 !important; }
.page-header .page-subtitle { margin-bottom: 0; }
/* Период рисуется в шапке; его пустое место на странице не добавляет лишний отступ. */
.page-stack > [id$="-period-selector"]:empty,
.page-header > [id$="-period-selector"]:empty { display: none; }
.page-widget { min-width: 0; }
.page-widget:empty { display: none; }
.page-widget-skeleton { height: 120px; border-radius: var(--okk-r-lg); }
.load-error {
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 20px; font-size: 14px; color: var(--okk-text-3);
}
.load-error strong { color: var(--okk-text); font-weight: 600; }
.widget-loading,
.widget-empty { padding: 32px 20px; text-align: center; font-size: 14px; color: var(--okk-text-3); }
/* Ошибка и «пусто» (LoadError / Empty образца, `LoadState`): по центру, заголовок и подсказка. */
.load-error:has(.load-state-icon) { align-items: center; padding: 44px 20px 20px; text-align: center; gap: 0; }
.load-state-icon {
  width: 52px; height: 52px; margin-bottom: 14px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--okk-bg); color: var(--okk-text-3);
}
.load-state-title { display: block; font-size: 14px; line-height: 21px; font-weight: 600; color: var(--okk-text-2); }
.load-error .load-state-title { color: var(--okk-text-2); }
.load-state-hint { display: block; max-width: 320px; margin: 5px auto 0; font-size: 14px; line-height: 21px; color: var(--okk-text-3); }
.load-error:has(.load-state-icon) .load-error-retry { align-self: center; margin-top: 16px; }

/* Надпись над заголовком страницы и пояснение режима (страница «Руководители»). */
.page-kicker {
  font-size: 12px; line-height: 16px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--okk-text-3);
  margin-bottom: 4px;
}
.page-notice {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 20px; border-left: 3px solid var(--okk-accent);
  font-size: 14px; line-height: 22px; color: var(--okk-text-2);
}
.page-notice strong { color: var(--okk-text); font-weight: 600; }

/* ---- Заголовок секции: название слева, управление справа (section-heading образца) ---- */
.section-heading {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; min-width: 0;
}
.card-heading { padding: 18px 20px; }
.analytics-section { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* Крупные числа на остальных страницах (таблица рейтинга, звонок) — тот же характер цифр. */
.metric-value,
.metric-value-xl,
.metric-value-large,
.metric-number {
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--okk-text);
}

/* ---- Плитка показателя (Metric / Tile образца) ---- */
.metric { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 18px 20px; }
.metric-label { display: flex; align-items: flex-start; gap: 6px; min-width: 0; font-size: 14px; line-height: 20px; color: var(--okk-text-3); }
.metric-label-text { min-width: 0; overflow-wrap: anywhere; }
.metric-label .metric-tooltip { flex: none; margin-top: 1px; }
.metric > .metric-value {
  font-size: 32px; line-height: 40px; font-weight: 600;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  color: var(--okk-text); overflow-wrap: anywhere;
}
.metric > .metric-value[data-tone="good"] { color: var(--okk-good); }
.metric > .metric-value[data-tone="warn"] { color: var(--okk-warn); }
.metric > .metric-value[data-tone="bad"] { color: var(--okk-bad); }
/* Пояснение вместо числа («Нет данных», «Выберите месяц»). Селектор сильнее, чем у размеров
   чисел, чтобы их правила для узких экранов ниже его не перебивали. */
.metric > .metric-value.metric-value--muted { font-size: 18px; line-height: 26px; letter-spacing: 0; color: var(--okk-text-3); }
.metric-value-sec { font-size: .56em; font-weight: 500; letter-spacing: 0; color: var(--okk-text-3); }
.metric-unit { margin-left: 4px; font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--okk-text-3); }
.metric-hint { font-size: 12px; line-height: 18px; color: var(--okk-text-3); overflow-wrap: anywhere; }
.metric-delta { font-variant-numeric: tabular-nums; }

/* Крупные плитки: ключевые показатели и «Сводный индекс» */
.grid-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--okk-gap); }
.grid-kpi.grid-kpi-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-kpi > * { min-width: 0; }

/* «Подробная статистика звонков» — список «подпись — число» (stats-list образца, refinement.css) */
.call-stats { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stats-group + .stats-group { margin-top: 16px; }
.stats-group-title { margin: 0 0 4px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--okk-text-2); }
.stats-group-sub { margin: 0 0 8px; font-size: 12px; line-height: 18px; color: var(--okk-text-3); }
.stats-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin: 0; }
.stats-list > .stats-item {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-width: 0;
  padding: 12px 0; border-top: 1px solid var(--okk-border); font-size: 14px; line-height: 20px;
}
.stats-list dt { display: flex; align-items: baseline; gap: 6px; min-width: 0; margin: 0; color: var(--okk-text-2); }
.stats-list dt .metric-label-text { min-width: 0; overflow-wrap: anywhere; }
.stats-list dt .metric-tooltip { flex: none; align-self: center; }
.stats-list dd { flex: none; margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--okk-text); white-space: nowrap; }
.stats-list dd.metric-value--muted { font-weight: 500; color: var(--okk-text-3); }
.stats-list .metric-value-sec { font-size: 1em; }

@media (max-width: 1150px) {
  .grid-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-kpi.grid-kpi-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grid-kpi,
  .grid-kpi.grid-kpi-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .metric { padding: 14px; }
  .metric-label { font-size: 12px; line-height: 16px; }
  .metric > .metric-value { font-size: 26px; line-height: 34px; }
  .metric-hint { font-size: 11px; line-height: 16px; }
  .stats-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 360px) {
  .grid-kpi.grid-kpi-3 { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Переключатель (ui-seg образца): пилюли, активная — графитовая ---- */
.ui-seg {
  display: inline-flex; gap: 2px; padding: 4px; max-width: 100%; overflow-x: auto;
  border: 1px solid var(--sd-border); border-radius: var(--okk-r-full); background: var(--okk-bg);
}
.ui-seg button {
  flex: none; min-height: 32px; padding: 4px 14px; border: 0; border-radius: var(--okk-r-full);
  background: transparent; color: var(--okk-text-2); font: inherit; font-size: 13px; font-weight: 500;
  line-height: 20px; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s;
}
.ui-seg button:hover { color: var(--okk-text); }
.ui-seg button[aria-pressed="true"] { background: var(--okk-action); color: var(--okk-on-action); }
/* В заголовке карточки — компактнее, чтобы помещался в одну строку с названием (как у образца). */
.section-heading .ui-seg { padding: 3px; }
.section-heading .ui-seg button { min-height: 30px; padding: 4px 12px; }

/* ---- «Тренды»: два графика в одной карточке ---- */
.trend-card { padding: var(--okk-card-pad); display: flex; flex-direction: column; gap: 16px; }

/* ---- «Отделы» (department-card образца) ---- */
.department-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr)); gap: var(--okk-gap); }
.department-card {
  display: flex; flex-direction: column; align-items: stretch; gap: 0; min-width: 0;
  padding: var(--okk-card-pad); background: var(--okk-surface); border-radius: var(--okk-r-lg);
  color: var(--okk-text); text-decoration: none; transition: border-color .15s;
}
.department-card:hover { border-color: var(--okk-border-strong); box-shadow: none; }
.department-card-name { margin: 0; min-width: 0; font-size: 19px; line-height: 27px; font-weight: 600; overflow-wrap: anywhere; }
.department-card-sub { margin: 6px 0 22px; font-size: 14px; line-height: 20px; color: var(--okk-text-3); }
.department-metrics { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 16px; margin-bottom: 24px; }
.department-metrics > div { min-width: 0; }
.department-metrics strong { display: block; font-size: 26px; line-height: 34px; font-weight: 600; font-variant-numeric: tabular-nums; }
.department-metrics span { display: block; font-size: 12px; line-height: 16px; color: var(--okk-text-3); overflow-wrap: anywhere; }
.text-link { margin-top: auto; font-size: 14px; color: var(--okk-text-2); }

/* ---- «Сотрудники»: поиск, отдел, «По отделам» и общая таблица (employee-table образца) ---- */
.filter-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.filter-toolbar > input.input { flex: 1; min-width: 190px; max-width: 300px; }
.filter-toolbar > select.input { width: auto; max-width: 220px; }
.check-label { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 14px; line-height: 21px; color: var(--okk-text); cursor: pointer; }
.employee-table-card { padding: 0; overflow: hidden; }
.table-scroll { overflow-x: auto; max-width: 100%; }
.employee-table { width: 100%; border-collapse: collapse; }
.employee-table th, .employee-table td { padding: 12px 16px; text-align: left; vertical-align: middle; }
.employee-table td a { color: var(--okk-text); font-weight: 600; text-decoration: none; }
.employee-table td a:hover { text-decoration: underline; }
.employee-table .cell-sub { font-size: 14px; line-height: 21px; }
.employee-table-number { font-variant-numeric: tabular-nums; }
.employee-table [data-tone="bad"] { color: var(--okk-bad); }
.employee-table .cell-muted { color: var(--okk-text-3); }
.employee-table .table-sort { display: inline-flex; gap: 4px; font-size: 13px; font-weight: 600; color: inherit; }
.employee-table .table-sort:focus-visible { outline: 2px solid var(--okk-accent); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 1150px) {
  .filter-toolbar > select.input { max-width: 180px; }
}
@media (max-width: 640px) {
  .filter-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .filter-toolbar > input.input { grid-column: 1 / -1; max-width: none; min-width: 0; }
  .filter-toolbar > select.input { width: 100%; max-width: none; min-width: 0; }
  .filter-toolbar .check-label { font-size: 13px; }
  .employee-table { min-width: 650px; }
}
@media print {
  .filter-toolbar { display: none !important; }
}

/* ---- «Зоны роста и сильные стороны» (отдел и сотрудник) ---- */
.period-insights-widget { padding: var(--okk-card-pad); }
.period-insights-widget .widget-header { margin-bottom: 14px; }
.qa-insights { gap: 12px; }
/* Одну из колонок «Зоны роста» / «Сильные стороны» скрыл вид — вторая на всю ширину. */
.qa-insights.is-single { grid-template-columns: minmax(0, 1fr); }
.qa-column { padding: 14px 16px; border: 1px solid var(--okk-border); border-radius: var(--okk-r-md); background: var(--okk-bg); }
.qa-column-header { margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.qa-column-header.text-error { color: var(--okk-warn); }
.qa-column-header.text-success { color: var(--okk-good); }
.period-insights-violations .qa-column-header.text-error { color: var(--okk-bad); }
.qa-list li { gap: 8px; padding: 4px 0; font-size: 14px; line-height: 1.5; color: var(--okk-text-2); }
.qa-list li strong { color: var(--okk-text); font-weight: 600; }
.qa-bullet { width: 6px; height: 6px; margin-top: 8px; }
.qa-bullet.bg-error { background: var(--okk-warn); }
.qa-bullet.bg-success { background: var(--okk-good); }
.period-insights-violations .qa-bullet.bg-error { background: var(--okk-bad); }
.period-insights-employees { margin-top: 2px; font-size: 13px; color: var(--okk-text-3); }
.period-insights-link { color: var(--okk-text); text-decoration: underline; text-underline-offset: 2px; }
.period-insights-link:hover { color: var(--okk-accent); }

/* ---- «Настройки» (как в образце): группы разделов слева, на телефоне — выбор списком ---- */
.settings-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; align-items: start; }
.settings-nav { position: sticky; top: 88px; }
.settings-nav-group { margin-bottom: 24px; }
.settings-nav-group > p { margin: 0 0 6px; padding: 0 10px; font-size: 12px; color: var(--okk-text-3); }
.settings-nav a {
  display: block; padding: 10px; border-radius: 10px;
  color: var(--okk-text-2); font-size: 14px; text-decoration: none;
}
.settings-nav a:hover { color: var(--okk-text); }
.settings-nav a[aria-current="page"] { color: var(--okk-text); font-weight: 600; background: var(--okk-surface); }
.settings-body { min-width: 0; }
.settings-mobile-nav { display: none; }
.settings-mobile-label { display: block; margin-bottom: 8px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--okk-text-2); }
.settings-mobile-nav select { width: 100%; }
/* Раздел: шапка (название, пояснение, выбор отдела и периода) и карточка правки. */
.settings-section-stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.settings-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.settings-head-title { flex: 1 1 240px; min-width: 0; }
.settings-head-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-width: 0; }
.settings-section-title { margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; color: var(--okk-text); }
.settings-section-sub { margin: 2px 0 0; font-size: 14px; line-height: 20px; color: var(--okk-text-3); }
.settings-period-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.settings-period-label { min-width: 170px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--okk-text); }
.settings-card.card { padding: var(--okk-card-pad); border-radius: var(--okk-r-lg); box-shadow: none; }
.settings-phones { display: block; width: 100%; min-height: 220px; resize: vertical; font-family: var(--okk-mono); font-variant-numeric: tabular-nums; }
/* Заголовок раздела внутри его карточки (CardHead образца), содержимое — на 14 px ниже. */
.settings-card-head { margin-bottom: 14px; }
.settings-hint { margin: 12px 0 0; font-size: 13px; line-height: 18px; color: var(--okk-text-2); }
.settings-recount { margin: 12px 0 0; font-size: 13px; line-height: 18px; color: var(--okk-info); }
/* Низ карточки как в образце: слева число номеров, справа «Сохранить». */
.settings-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 16px; }
.settings-count { margin-right: auto; font-size: 14px; color: var(--okk-text-3); font-variant-numeric: tabular-nums; }
/* Подсказка «?» в конце строки открывается влево от значка: у правого края узкого экрана не обрезается. */
.tooltip-opens-left .metric-tooltip-content { left: auto; right: -6px; transform: none; width: min(300px, calc(100vw - 48px)); min-width: 0; max-width: none; }
.tooltip-opens-left .metric-tooltip-content::after { left: auto; right: 8px; transform: none; }
/* ---- Пометка «порог длительности менялся — метрики недостоверны» ---- */
.min-duration-notes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.min-duration-note {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: start; gap: 10px; margin: 0;
  padding: 10px 12px; border-radius: var(--okk-r-md); font-size: 13px; line-height: 18px;
  color: var(--okk-text); background: var(--okk-warn-soft);
}
.min-duration-note-icon {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  font-size: 11px; font-weight: 700; color: var(--okk-warn); background: var(--okk-bg);
}
/* ---- Критерии оценки (только просмотр) ---- */
.criteria-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.criteria-tab {
  min-height: 40px; padding: 0 16px; border: 1px solid var(--okk-border); border-radius: 999px;
  background: var(--okk-surface); font: inherit; font-size: 14px; color: var(--okk-text-2); cursor: pointer;
}
.criteria-tab[aria-selected="true"] { border-color: var(--okk-accent); background: var(--okk-accent-soft); color: var(--okk-text); }
.criteria-department { display: flex; flex-direction: column; gap: 14px; }
.criteria-refinements summary { font-weight: 600; cursor: pointer; }
.criteria-rules { margin: 12px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.criteria-rules li { font-size: 14px; line-height: 20px; color: var(--okk-text); white-space: pre-line; overflow-wrap: anywhere; }
.criteria-scenario-title { margin: 0; font-size: 17px; font-weight: 600; color: var(--okk-text); }
.criteria-category { margin-top: 16px; }
.criteria-category-title { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--okk-text-3); text-transform: uppercase; letter-spacing: .02em; }
.criteria-item { border-top: 1px solid var(--okk-border); }
.criteria-item summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 10px 0; cursor: pointer; font-size: 14px; color: var(--okk-text);
}
.criteria-item-name { min-width: 0; overflow-wrap: anywhere; }
.criteria-item-points { flex: none; font-weight: 600; color: var(--okk-text-2); white-space: nowrap; }
.criteria-item.is-critical .criteria-item-points { color: var(--okk-bad); }
.criteria-item-part, .criteria-item-condition { margin: 0 0 8px; font-size: 13px; line-height: 19px; color: var(--okk-text-2); overflow-wrap: anywhere; }
.criteria-item-part span { font-weight: 600; color: var(--okk-text); }
.criteria-item-condition { padding: 6px 10px; border-radius: 8px; background: var(--okk-surface-2); }
.criteria-levels { margin: 0 0 12px; display: flex; flex-direction: column; gap: 6px; }
.criteria-level { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 4px 12px; font-size: 13px; line-height: 19px; }
.criteria-level dt { font-weight: 600; color: var(--okk-text); }
.criteria-level dd { margin: 0; color: var(--okk-text-2); overflow-wrap: anywhere; }
@media (max-width: 560px) { .criteria-level { grid-template-columns: minmax(0, 1fr); } }
/* ---- Длительность звонка ---- */
.min-duration-card + .min-duration-card { margin-top: 14px; }
.min-duration-current { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.min-duration-department { font-size: 15px; font-weight: 600; color: var(--okk-text); }
.min-duration-value { font-size: 14px; color: var(--okk-text-2); }
.min-duration-value strong { color: var(--okk-text); font-variant-numeric: tabular-nums; }
.min-duration-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; margin-top: 16px; }
.min-duration-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--okk-text-2); }
.min-duration-field .input { width: 140px; font-variant-numeric: tabular-nums; }
.min-duration-past { display: flex; align-items: center; gap: 8px; min-height: 38px; font-size: 14px; color: var(--okk-text); }
.min-duration-past label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.min-duration-past input { width: 16px; height: 16px; margin: 0; accent-color: var(--okk-action); }
.min-duration-history-title { margin: 20px 0 0; font-size: 13px; font-weight: 600; color: var(--okk-text-2); }
.min-duration-history { margin: 8px 0 0; padding: 0; list-style: none; }
.min-duration-change { padding: 10px 0; border-top: 1px solid var(--okk-border); }
.min-duration-change-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 14px; color: var(--okk-text); }
.min-duration-change-head strong { font-variant-numeric: tabular-nums; }
.min-duration-change-head .cell-sub { display: inline; }
.min-duration-change-note { margin: 4px 0 0; font-size: 13px; color: var(--okk-text-2); overflow-wrap: anywhere; }
.min-duration-change-past { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 4px; font-size: 13px; color: var(--okk-text-2); }
.min-duration-change-past[data-tone="wait"] { color: var(--okk-warn); }
.min-duration-change-past[data-tone="bad"] { color: var(--okk-bad); }
@media (max-width: 1150px) {
  .settings-layout { grid-template-columns: 150px minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 760px) {
  .settings-layout { display: block; }
  .settings-nav { display: none; }
  .settings-mobile-nav { display: block; }
  .settings-period-label { min-width: 0; }
}

/* ---- «План звонков»: виджет отдела и сотрудника, конструктор в «Настройках» ---- */
.plan-fact-card.card,
.plans-card.card { padding: var(--okk-card-pad); border-radius: var(--okk-r-lg); box-shadow: none; }
.plan-fact-card .section-heading,
.plans-card .section-heading { margin-bottom: 16px; flex-wrap: wrap; gap: 12px; }
.plan-fact-rows { display: flex; flex-direction: column; gap: 14px; }
.plan-fact-row-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.plan-fact-label { min-width: 0; font-size: 14px; color: var(--okk-text); overflow-wrap: anywhere; }
.plan-fact-value { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--okk-text); white-space: nowrap; }
.plan-fact-value .cell-sub { display: inline; margin-left: 6px; font-weight: 400; }
.plan-fact-bar { height: 6px; margin-top: 6px; border-radius: var(--okk-r-full); background: var(--okk-track); overflow: hidden; }
.plan-fact-bar > span { display: block; height: 100%; width: var(--plan-progress, 0%); border-radius: inherit; background: var(--okk-accent); }
.plan-fact-employees { margin-top: 16px; }
.plan-fact-employee { padding: 12px 0; border-top: 1px solid var(--okk-border); }
.plan-fact-employee-name { margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--okk-text-2); }
.plan-changed {
  display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: var(--okk-r-full);
  font-size: 11px; line-height: 18px; color: var(--okk-text-2); background: var(--okk-surface-2); cursor: help;
}
.plan-note,
.settings-note {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 8px 10px; margin: 0 0 12px;
  font-size: 13px; line-height: 18px; color: var(--okk-text-2);
}
.plan-note > .btn { grid-column: 2; justify-self: start; }
.plan-note-icon {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  font-size: 11px; font-weight: 700; font-style: italic; color: var(--okk-info); background: var(--okk-info-soft);
}
.plan-warning, .settings-warning,
.plan-error, .settings-error,
.plan-saved, .settings-saved { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--okk-r-md); font-size: 13px; }
.settings-warning { margin: 0 0 12px; }
.plan-warning, .settings-warning { color: var(--okk-text); background: var(--okk-warn-soft); }
.plan-error, .settings-error { color: var(--okk-text); background: var(--okk-bad-soft); }
.plan-saved, .settings-saved { color: var(--okk-text); background: var(--okk-good-soft); }
.plans-department select { min-width: 220px; max-width: 100%; }
.plans-department-name { font-size: 15px; font-weight: 600; color: var(--okk-text); }
.plans-rows { display: flex; flex-direction: column; gap: 8px; }
.plans-row {
  display: grid; grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) minmax(170px, 1.4fr) minmax(100px, 0.7fr) 104px;
  align-items: center; gap: 8px;
}
.plans-row-head { font-size: 12px; color: var(--okk-text-3); }
.plans-select, .plans-target { width: 100%; min-width: 0; }
.plans-row-end { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
.plans-row-end .plan-changed { margin-left: 0; }
.plans-add { align-self: flex-start; margin-top: 4px; }
.plans-empty { margin: 0; }
.plans-employee { padding: 14px 0; border-top: 1px solid var(--okk-border); }
.plans-employee:first-of-type { border-top: 0; padding-top: 0; }
.plans-employee-name { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--okk-text); }
.plans-employee-name .cell-sub { display: inline; margin-left: 6px; font-weight: 400; }
.plans-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.plans-history.card { padding: 14px var(--okk-card-pad); border-radius: var(--okk-r-lg); box-shadow: none; }
.plans-history-list { margin: 10px 0 0; padding-left: 18px; font-size: 13px; color: var(--okk-text-2); }
.plans-history-list li + li { margin-top: 4px; }
@media (max-width: 720px) {
  /* Пункт плана на телефоне: поля друг под другом, число звонков и «удалить» — в одной строке. */
  .plans-row { grid-template-columns: minmax(0, 1fr) auto; }
  .plans-row > .plans-select { grid-column: 1 / -1; }
  .plans-row-head { display: none; }
  .plans-row { padding: 10px 0; border-top: 1px solid var(--okk-border); }
}

/* ---- Страница сотрудника: «Анализ качества», «Аналитика звонков», «Фокус на неделю» ---- */
.qa-widget.card,
.calls-analytics-widget.card,
.growth-focus-widget.card { padding: var(--okk-card-pad); border-radius: var(--okk-r-lg); box-shadow: none; }
.qa-widget .widget-header,
.growth-focus-widget .widget-header { margin-bottom: 0; }
.qa-widget .section-heading { margin-bottom: 18px; }
.qa-stats { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-bottom: 18px; }
.qa-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qa-stat-value { font-size: 22px; line-height: 28px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--okk-text); }
.qa-stat-value[data-tone="bad"] { color: var(--okk-bad); }
.qa-stat-value.trend-delta { font-size: 15px; }
.qa-stat-label { font-size: 13px; color: var(--okk-text-3); }
.qa-hint { margin: 8px 0 0; font-size: 12px; color: var(--okk-text-3); }
.qa-chart { height: 280px; }
.calls-analytics-widget .widget-header { margin-bottom: 16px; }
.gauge-card { padding: 16px 18px; border: 1px solid var(--okk-border); border-radius: var(--okk-r-md); background: var(--okk-bg); box-shadow: none; }
.gauge-card:hover { box-shadow: none; transform: none; }
.gauge-card-title { font-size: 14px; font-weight: 600; color: var(--okk-text); }
.peak-chart-bars { height: 72px; }
.peak-bar-fill { background: var(--okk-track); border-radius: 4px 4px 0 0; }
.peak-bar-fill.is-peak { background: var(--okk-accent); }
.peak-hour-label { font-size: 10px; color: var(--okk-text-3); }
.peak-value { color: var(--okk-text); font-weight: 600; }
.calls-days-section { padding: 16px 18px; border: 1px solid var(--okk-border); border-radius: var(--okk-r-md); background: var(--okk-bg); }
.day-label, .day-value { font-size: 12px; color: var(--okk-text-3); }
.day-bar-bg { background: var(--okk-surface-3); border-radius: var(--okk-r-full); }
.day-bar-fill { border-radius: var(--okk-r-full); }
.focus-card {
  padding: 14px 16px;
  border-left: 3px solid var(--okk-accent);
  border-radius: var(--okk-r-md);
  background: var(--okk-bg);
}
.focus-text { font-size: 14px; color: var(--okk-text-2); }
.focus-list { font-size: 14px; color: var(--okk-text); }
.growth-focus-widget .widget-header-between { margin-bottom: 14px; }

/* ---- Справочник (reference образца): поиск, оглавление, раздел, помощник ---- */
.reference-page { max-width: none; padding: 0; }
.reference-search { width: 100%; }
.reference-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
/* Оглавление скрыл вид — разделы на всю ширину. */
.reference-layout.is-without-toc { grid-template-columns: minmax(0, 1fr); }
.reference-toc {
  position: sticky; top: 88px; max-height: calc(100dvh - 110px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
}
.reference-toc-item {
  padding: 10px; border: 0; border-radius: 10px;
  background: transparent; color: var(--okk-text-2); font: inherit; font-size: 14px; line-height: 20px;
  text-align: left; cursor: pointer;
}
.reference-toc-item:hover { color: var(--okk-text); }
.reference-toc-item[aria-current="true"] { background: var(--okk-surface); color: var(--okk-text); font-weight: 600; }
.reference-sections { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.reference-section { margin: 0; padding: 20px; }
.reference-section[hidden],
.reference-rule-card[hidden] { display: none !important; }
.reference-section-heading { margin: 0; padding-bottom: 0; border-bottom: 0; }
.reference-section-heading h2 { font-size: 17px; line-height: 24px; font-weight: 600; color: var(--okk-text); }
.reference-section-heading p { margin-top: 2px; font-size: 14px; color: var(--okk-text-3); }
.reference-card-grid { display: flex; flex-direction: column; gap: 0; }
/* Правило справочника (образец): черта сверху у каждого, текст — основным цветом. */
.reference-rule-card { display: block; min-height: 0; padding: 16px 0; border: 0; border-top: 1px solid var(--okk-border); border-radius: 0; background: transparent; box-shadow: none; }
.reference-card-grid { margin-top: 14px; }
.reference-rule-card:last-child { padding-bottom: 0; }
.reference-rule-title { margin: 0 0 6px; font-size: 15px; line-height: 1.2; font-weight: 600; color: var(--okk-text); }
.reference-rule-card p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--okk-text); }
.reference-rule-more { margin-top: 6px; font-size: 13px; color: var(--okk-text-3); }
.reference-rule-more summary { cursor: pointer; }
.reference-rule-note { margin-top: 6px; padding: 0; border: 0; background: transparent; font-size: 14px; line-height: 1.6; color: var(--okk-text-2); }
@media (max-width: 900px) {
  .reference-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .reference-toc { position: static; max-height: none; flex-direction: row; overflow-x: auto; overflow-y: hidden; gap: 4px; padding-bottom: 4px; }
  .reference-toc-item { flex: none; white-space: nowrap; }
  .reference-section { padding: 16px; }
}

/* ---- Раскрывающийся блок (disclosure образца) ---- */
/* ---- Вкладки страницы (ui-tabs образца) ---- */
.ui-tabs {
  display: flex; gap: 24px; max-width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
  border-bottom: 1px solid var(--okk-border);
}
.ui-tab {
  position: relative; flex: none; min-height: 44px; padding: 12px 4px;
  border: 0; border-radius: 0; background: none; cursor: pointer; white-space: nowrap;
  font: inherit; font-size: 14px; font-weight: 500; color: var(--okk-text-2); transition: color .15s;
}
.ui-tab:hover { color: var(--okk-text); }
.ui-tab[aria-selected="true"] { color: var(--okk-accent); }
.ui-tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  border-radius: 2px; background: var(--okk-accent);
}
.ui-tab:focus-visible { outline: 2px solid var(--okk-accent-ring); outline-offset: 2px; }
.employee-tab-panel[hidden] { display: none; }
@media print {
  /* «Отчёт» печатает все вкладки страницы сотрудника, а не только открытую. */
  .employee-tab-panel[hidden] { display: flex; }
}
.page-widget-disclosure > .page-widget { margin-top: 0; }

.disclosure { min-width: 0; padding: 16px 20px; border: 1px solid var(--okk-border); border-radius: 20px; }
.disclosure > summary { min-height: 24px; font-size: 14px; font-weight: 600; color: var(--okk-text); cursor: pointer; }
.disclosure[open] > summary { margin-bottom: 16px; }
.trend-card .disclosure { margin-top: 4px; background: var(--okk-bg); }

.widget-empty .cell-sub { margin-top: 6px; }

/* ---- Рейтинг сотрудников (team-ranking образца): «Сотрудники», «Отдел», «Рейтинг» ---- */
/* В design-system.css у таблицы рейтинга много !important — перекрываем точечно. */
.ranking-dept-table {
  padding: 0 !important;
  margin-bottom: 0 !important;
  background: var(--okk-surface) !important;
  border: 1px solid var(--okk-border) !important;
  border-radius: var(--okk-r-lg) !important;
  overflow: hidden !important;
}
.ranking-dept-heading { border-bottom: 1px solid var(--okk-border); }
.ranking-table-wrapper { overflow-x: auto; background: var(--okk-bg) !important; }
.ranking-full-table { min-width: 900px; table-layout: auto !important; }
.ranking-full-table thead { position: static; background: var(--okk-surface); }
.ranking-full-table th {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--okk-border);
  color: var(--okk-text-3);
  font-size: 13px;
  font-weight: 600;
  line-height: 20px !important;
  text-transform: none;
  white-space: nowrap !important;
  vertical-align: middle !important;
}
.ranking-full-table th.col-rank { width: 28px !important; }
.ranking-dept-table[data-variant="department"] .ranking-full-table { min-width: 720px; }
.ranking-full-table th.col-name { width: auto !important; min-width: 220px; }
.ranking-full-table th.col-metric { width: auto !important; }
.ranking-full-table th.sortable:hover,
.ranking-full-table th.sort-active { background: var(--okk-surface); color: var(--okk-text-3); }
.table-sort {
  display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0;
  background: none; color: inherit; font: inherit; font-weight: 600; cursor: pointer;
}
.ranking-full-table th.sort-active .table-sort { color: var(--okk-text); }
.ranking-full-table tbody tr { border-bottom: 1px solid var(--okk-border); }
.ranking-full-table tbody tr:hover { background: var(--okk-hover); }
.ranking-full-table td {
  padding: 14px 16px !important;
  font-size: 14px;
  line-height: 20px;
  vertical-align: top !important;
  font-variant-numeric: tabular-nums;
  color: var(--okk-text);
}
.ranking-full-table td.col-rank,
.ranking-full-table td.col-name,
.ranking-full-table td.col-metric { width: auto !important; }
.ranking-full-table td.col-rank { color: var(--okk-text-3); font-weight: 700; vertical-align: middle !important; }
/* «По отделам» образца: аватар с инициалами рядом с именем и должностью. */
.ranking-employee { display: flex; align-items: center; gap: 10px; }
.ranking-employee > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.ranking-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  color: var(--okk-text-2); background: var(--okk-surface);
}
.ranking-full-table .emp-name { font-size: 14px; font-weight: 500; color: var(--okk-text); text-decoration: none; }
.ranking-full-table .emp-name:hover { text-decoration: underline; }
.ranking-full-table .emp-position { font-size: 12px; color: var(--okk-text-3); }
.ranking-value { font-weight: 500; }
.ranking-value[data-tone="warn"] { color: var(--okk-warn); }
.ranking-value[data-tone="bad"] { color: var(--okk-bad); }
.ranking-value[data-tone="muted"] { color: var(--okk-text-3); }
.load-error-retry { align-self: flex-start; margin-top: 8px; }
/* Телефон: номер, имя, звонки и качество видны сразу, остальное — прокруткой таблицы. */
@media (max-width: 640px) {
  .ranking-full-table,
  .ranking-dept-table[data-variant="department"] .ranking-full-table { min-width: 640px; }
  .ranking-full-table th,
  .ranking-full-table td { padding: 12px 8px !important; }
  .ranking-full-table th.col-rank { width: 28px !important; }
  .ranking-full-table th.col-name { min-width: 140px; }
  .ranking-dept-heading { padding: 16px; }
}

/* Названия отделов бывают длинными кодами интеграции — показываем полностью. */
#dept-header > .flex,
#dept-header > .flex > .flex,
#dept-header > .flex > .flex > div { min-width: 0; max-width: 100%; }
#dept-header .page-title,
#dept-header .page-subtitle { overflow-wrap: anywhere; }
#dept-breadcrumbs nav { flex-wrap: wrap; }
#dept-breadcrumbs nav > span { min-width: 0; overflow-wrap: anywhere; }
#dept-breadcrumbs nav > svg { flex: none; }

/* ============================================================
   Каркас: сайдбар и шапка (shell образца)
   ============================================================ */

/* ---- Сайдбар ---- */
.sidebar {
  width: var(--okk-sidebar-w);
  background: var(--okk-surface);
  border-right: 1px solid var(--okk-border);
  padding: 0;
  transition: width .25s var(--okk-ease), transform .3s var(--okk-ease);
}
.sidebar-header {
  flex: none;
  height: 80px;
  padding: 16px;
  margin: 0;
  border-bottom: 0;
  display: flex;
  align-items: center;
}
.sidebar-logo { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; }
.brand-mark { display: block; width: 40px; height: 40px; flex: none; }
.brand-wordmark { display: block; width: 148px; max-width: 100%; height: auto; }
[data-theme="dark"] .brand-wordmark { filter: brightness(0) invert(1); }
.sidebar-nav { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 12px; }
.sidebar-section { padding: 0; margin: 0; }
.sidebar-section-title { display: none; }
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  margin: 0 0 4px;
  border-radius: var(--okk-r-sm);
  color: var(--okk-text-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  transition: background .14s, color .14s;
  position: relative;
}
.sidebar-item:hover { background: var(--okk-hover); color: var(--okk-text); }
.sidebar-item.active,
.sidebar-item.nav-link.active,
.nav-link.active {
  background: var(--okk-nav-active);
  color: var(--okk-accent);
  font-weight: 600;
}
.sidebar-item.active::before,
.nav-link.active::before { display: none; }
.sidebar-item-icon, .nav-icon { width: 18px; height: 18px; flex: none; opacity: 1; }
.sidebar-item.active .nav-icon,
.nav-link.active .nav-icon { opacity: 1; color: var(--okk-accent); }

/* «Отделы»: строка-ссылка на страницу отделов и стрелка дерева справа (DeptGroup образца). */
.sidebar-group-row { position: relative; }
.sidebar-group-row > .sidebar-item { padding-right: 40px; }
.sidebar-group-toggle {
  position: absolute; top: 11px; right: 9px;
  display: flex; align-items: center; justify-content: center; width: 21px; height: 21px; padding: 3px;
  border: 0; border-radius: 6px; background: transparent; color: var(--okk-text-3); cursor: pointer;
}
.sidebar-group-toggle:hover { color: var(--okk-text); }
.sidebar-group-toggle:focus-visible { outline: 2px solid var(--okk-accent); outline-offset: 1px; }
.sidebar-group-toggle svg,
.sidebar-department-arrow { flex: none; transition: transform .2s var(--okk-ease); }
.sidebar-group-toggle[aria-expanded="true"] svg,
.sidebar-department-toggle[aria-expanded="true"] .sidebar-department-arrow { transform: rotate(90deg); }
.sidebar-tree { margin: -2px 0 4px; }
.sidebar-tree-note { padding: 6px 12px 6px 18px; font-size: 14px; line-height: 20px; color: var(--okk-text-3); }
.sidebar-tree-retry {
  display: block; margin-top: 4px; padding: 0; border: 0; background: none;
  color: var(--okk-accent); font: inherit; font-weight: 600; cursor: pointer;
}

/* Отдел в дереве и его сотрудники (dept-toggle / sidebar-emp образца) */
.sidebar-department-toggle {
  display: flex; align-items: center; gap: 9px; width: 100%; min-height: 40px; padding: 8px 10px 8px 18px;
  background: none; border: none; border-radius: var(--okk-r-sm); text-align: left;
  color: var(--okk-text-2); font: inherit; font-size: 13px; font-weight: 500; line-height: 20px; cursor: pointer;
  transition: background .14s, color .14s;
}
.sidebar-department-toggle:hover { background: var(--okk-hover); color: var(--okk-text); }
.sidebar-department-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.sidebar-department-count { flex: none; font-size: 14px; line-height: 20px; color: var(--okk-text-3); font-weight: 500; }

.sidebar-employee {
  display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 12px 8px 22px;
  border-radius: var(--okk-r-sm); color: var(--okk-text-2); font-size: 14px; line-height: 21px;
  text-decoration: none; cursor: pointer; transition: background .14s, color .14s;
}
.sidebar-employee:hover { background: var(--okk-hover); color: var(--okk-text); }
.sidebar-employee.active { background: var(--okk-nav-active); color: var(--okk-accent); }
.sidebar-employee-avatar {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 8.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--okk-text-2); background: var(--okk-surface);
}
.sidebar-employee-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Низ сайдбара: настройки темы и профиль (sidebar-footer образца) */
.sidebar-footer {
  position: relative;
  flex: none;
  padding: 10px 12px 16px;
  border-top: 1px solid var(--okk-border);
}
.sidebar-footer .sidebar-item { margin-bottom: 4px; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; font-size: 14px; }
.sidebar-profile {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: none;
  color: var(--okk-text);
  text-align: left;
  padding: 12px 6px 0;
  cursor: pointer;
  font: inherit;
}
.sidebar-profile .avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  background: var(--okk-bg) !important; color: var(--okk-text-2) !important;
}
.profile-copy { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 13px; line-height: 18px; }
.profile-copy strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-copy > span { font-size: 12px; color: var(--okk-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-popover { padding: 10px 0; }
.sidebar-popover[hidden] { display: none; }

/* Переключатель темы (theme-control образца) */
.theme-control { display: inline-flex; padding: 4px; border: 1px solid var(--okk-border); border-radius: var(--okk-r-full); gap: 2px; background: var(--okk-bg); }
.theme-control .icon-btn {
  width: 40px; height: 40px; border-radius: var(--okk-r-full);
  border: 0; background: transparent; color: var(--okk-text-2);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.theme-control .icon-btn:hover { background: var(--okk-hover); color: var(--okk-text); }
.theme-control .icon-btn[aria-pressed="true"] { background: var(--okk-action); color: var(--okk-on-action); }

/* ---- Основная колонка и шапка ---- */
/* overflow-x: clip, а не hidden: иначе шапка перестаёт «прилипать».
   min-width: 0 — иначе колонка растягивается по ширине широкой таблицы журнала. */
.main-content {
  margin-left: var(--okk-sidebar-w);
  min-width: 0;
  padding: 0;
  overflow: visible;
  overflow-x: clip;
  transition: margin-left .25s var(--okk-ease);
}
#main-content { padding: 24px; }
/* Контент без верхней границы ширины и без второго отступа (content образца: только 24px). */
.page-container { max-width: none; margin: 0; padding: 0; }
@media (max-width: 1024px) { .main-content { padding: 0 !important; } }
@media (max-width: 768px) {
  .main-content { padding: 0 !important; }
  .header { margin-bottom: 0 !important; }
}
@media (max-width: 640px) { #main-content { padding: 18px 16px; } }

.header {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--okk-header-h);
  min-height: var(--okk-header-h);
  padding: 8px 24px;
  position: sticky;
  top: 0;
  z-index: var(--z-dropdown);
  background: var(--okk-bg);
  border-bottom: 1px solid var(--okk-border);
  backdrop-filter: none;
  margin: 0;
}
.header-left { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.header-right { display: flex; align-items: center; gap: 12px; margin-left: auto; min-width: 0; }
.header-section { font-size: 14px; color: var(--okk-text-3); white-space: nowrap; }
.header-period { display: inline-flex; min-width: 0; }
/* Страница без периода (справочник, звонок, замечания): пустое место не занимает строку шапки. */
.header-period:empty { display: none; }

.icon-btn {
  width: 40px; height: 40px; border-radius: var(--okk-r-sm);
  border: 0; background: transparent; color: var(--okk-text-2);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .14s, color .14s; padding: 0;
}
.icon-btn:hover { background: var(--okk-hover); color: var(--okk-text); }
.header .icon-btn { width: 36px; height: 40px; }

/* Свернутый сайдбар */
#app.sidebar-collapsed .sidebar { width: var(--okk-sidebar-w-collapsed); min-width: var(--okk-sidebar-w-collapsed); }
#app.sidebar-collapsed .main-content { margin-left: var(--okk-sidebar-w-collapsed); }
#app.sidebar-collapsed .sidebar-item span,
#app.sidebar-collapsed .sidebar-group-toggle,
#app.sidebar-collapsed .sidebar-tree,
#app.sidebar-collapsed .brand-wordmark,
#app.sidebar-collapsed .profile-copy,
#app.sidebar-collapsed .sidebar-profile-chevron { display: none !important; }
#app.sidebar-collapsed .sidebar-header { padding: 16px 24px; }
#app.sidebar-collapsed .sidebar-nav { padding-inline: 16px; }
#app.sidebar-collapsed .sidebar-item { justify-content: center; padding-left: 0; padding-right: 0; }
#app.sidebar-collapsed .sidebar-profile { justify-content: center; }
#app.sidebar-collapsed .sidebar-popover {
  position: absolute;
  left: calc(100% + 8px);
  bottom: 12px;
  padding: 12px;
  background: var(--okk-bg);
  box-shadow: var(--okk-sh-pop);
  border: 1px solid var(--okk-border);
  border-radius: var(--okk-r-md);
  z-index: var(--z-modal);
}

/* Мобильный каркас: сайдбар выезжает поверх с 920px, как в образце (design-system.css — та же граница). */
@media (max-width: 920px) {
  .main-content, #app.sidebar-collapsed .main-content { margin-left: 0; }
  .sidebar { max-width: 86vw; }
  /* Закрытый сайдбар не отбрасывает тень на край экрана. */
  .sidebar:not(.active) { box-shadow: none !important; visibility: hidden; }
  /* Затемнение под открытым меню: ::before у сдвинутого сайдбара получается нулевой ширины. */
  .sidebar.active { box-shadow: 0 0 0 100vmax var(--sd-overlay) !important; }
  .sidebar.active::before { display: none; }
  #sidebar-collapse-btn { display: none; }
}
@media (max-width: 1150px) { .header-section { display: none; } }
@media (max-width: 640px) {
  .header { height: 60px; min-height: 60px; padding: 8px 12px; gap: 4px; }
  .header-left, .header-right { gap: 8px; }
}

/* ---- Период: список и кнопка с датами (PeriodSelector образца, refinement.css) ---- */
/* В design-system.css у .period-selector остались рамка, фон и отступы старого компонента. */
.period-selector { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.period-selector .btn { padding: 8px 14px; }
.period-selector select.input.period-select { width: 160px; height: 40px; min-height: 40px; font-size: 14px; }
.period-dates {
  padding: 0; border: 0; background: none; color: var(--okk-text-3);
  font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer;
}
.period-dates:hover { color: var(--okk-text); }
.period-export-btn { flex: none; }

/* Окно «Выбрать период» (Modal образца: по центру, до 440px). */
.period-layer { position: fixed; inset: 0; z-index: var(--z-modal); }
.period-overlay { position: fixed; inset: 0; background: var(--sd-overlay); }
.period-dialog {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(440px, calc(100vw - 32px)); max-height: 88vh; overflow-y: auto;
  border: 1px solid var(--okk-border); border-radius: var(--okk-r-lg);
  background: var(--okk-surface); box-shadow: var(--okk-sh-pop); color: var(--okk-text);
}
.period-form { display: flex; flex-direction: column; gap: 20px; padding: 24px; }
.period-form h2 { margin: 0; font-size: 18px; line-height: 24px; font-weight: 600; }
/* Подпись поля (ui-label образца): 14 px, полужирная. */
.period-field { display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--okk-text-2); }
.period-field .input { font-weight: 400; }
.period-field .input { width: 100%; min-width: 0; font-variant-numeric: tabular-nums; }
.period-error { margin: 0; font-size: 13px; color: var(--okk-bad); }
.period-actions { display: flex; justify-content: flex-end; gap: 8px; }
.period-dialog :focus-visible { outline: 2px solid var(--okk-accent); outline-offset: 2px; }
/* Шапка остаётся рабочей даже на 320px. */
.header-right { min-width: 0; }
.header-right .period-selector { flex-shrink: 1; }
@media (max-width: 640px) {
  /* Как в образце: на телефоне только список; свои даты — пунктом «Свой период». */
  .period-selector { gap: 0; }
  .period-selector select.input.period-select { width: 135px; font-size: 13px; }
  .period-dates { display: none; }
  .period-field .input { font-size: 16px; }
}

/* ============================================================
   Общие элементы (ui.tsx образца → наши классы)
   ============================================================ */

/* ---- Кнопки: пилюли, основная — графитовая ---- */
/* Обычная кнопка образца — 48 px и 16 px; маленькая (`btn-sm`) — 36 px и 14 px. */
.btn {
  min-height: 48px;
  padding: 0 20px;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--okk-r-full);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  white-space: nowrap;
  transition: background .16s, border-color .16s, color .16s, box-shadow .16s;
}
.btn:active { transform: translateY(1px); }
.btn-sm { min-height: 36px; padding: 8px 14px; font-size: 14px; line-height: 20px; }
.btn-primary {
  background: var(--okk-action);
  color: var(--okk-on-action);
  border-color: transparent;
  box-shadow: none;
}
.btn-primary:hover { background: var(--okk-action-hover); color: var(--okk-on-action); box-shadow: var(--okk-sh-2); transform: none; }
.btn-secondary,
.btn-outline,
.btn-outline-primary {
  background: var(--okk-surface);
  color: var(--okk-text);
  border: 1px solid var(--okk-border-strong);
}
.btn-secondary:hover,
.btn-outline:hover,
.btn-outline-primary:hover { background: var(--okk-hover); color: var(--okk-text); }
.btn-ghost { background: transparent; color: var(--okk-text-2); border-color: transparent; }
.btn-ghost:hover { background: var(--okk-hover); color: var(--okk-text); }
.btn:disabled,
.btn[disabled] {
  background: var(--sd-disabled-bg);
  color: var(--sd-disabled-text);
  border-color: transparent;
  box-shadow: none;
  opacity: 1;
  cursor: not-allowed;
  transform: none;
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-sm svg { width: 15px; height: 15px; }

/* ---- Бейджи: тон + мягкий фон ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  padding: 1px 8px;
  border-radius: var(--okk-r-full);
  font-size: 12px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}
.badge-success { background: var(--okk-good-soft); color: var(--okk-good); }
.badge-warning { background: var(--okk-warn-soft); color: var(--okk-warn); }
.badge-error, .badge-danger { background: var(--okk-bad-soft); color: var(--okk-bad); }
.badge-info { background: var(--okk-info-soft); color: var(--okk-info); }
.badge-primary { background: var(--okk-accent-soft); color: var(--okk-accent); }
.badge-neutral, .badge-muted { background: var(--okk-bg); color: var(--okk-text-2); }

/* ---- Таблицы: серая шапка, белые строки (ui-table образца) ---- */
table thead th, .table th {
  padding: 12px 16px;
  background: var(--okk-surface);
  color: var(--okk-text-3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
table tbody td, .table td {
  font-size: 14px;
  line-height: 21px;
  border-top: 1px solid var(--okk-border);
}
.table tbody tr { background: var(--okk-bg); }
table tbody tr:hover, .table tbody tr:hover { background: var(--okk-hover); }
.table a { font-weight: 600; }
.table a:hover { text-decoration: underline; }

/* ---- Поля ввода ---- */
.input, input.input, select.input, textarea.input {
  min-height: 44px;
  padding: 0 12px;
  font-size: 14px;
  color: var(--okk-text);
  background-color: var(--okk-input);
  border: 1px solid var(--okk-border-strong);
  border-radius: var(--okk-r-sm);
}
textarea.input { height: auto; padding: 10px 12px; line-height: 1.6; }
select.input,
.calls-filter-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2366615e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}
.input::placeholder { color: var(--okk-text-3); }
.input:focus { outline: none; border-color: var(--okk-accent); box-shadow: 0 0 0 3px var(--okk-accent-ring); }
.input:disabled { background-color: var(--sd-disabled-bg); color: var(--sd-disabled-text); }
.input[aria-invalid="true"] { border-color: var(--okk-bad); }

/* ---- Заголовок карточки (CardHead образца: без иконки) ---- */
.widget-header { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; min-width: 0; }
.widget-icon { display: none; }
.widget-title-group { min-width: 0; }
.widget-title { font-size: 17px; line-height: 24px; font-weight: 600; color: var(--okk-text); letter-spacing: -0.02em; }
.widget-subtitle { font-size: 14px; line-height: 20px; color: var(--okk-text-3); margin-top: 2px; }

/* ---- Подсказка «?» у показателей ---- */
.metric-tooltip-content {
  background: var(--okk-action);
  color: var(--okk-on-action);
  border-radius: var(--okk-r-xs);
  box-shadow: var(--okk-sh-3);
}
.metric-tooltip-content::after { border-top-color: var(--okk-action); }
.metric-tooltip-icon { width: 16px; height: 16px; background: var(--okk-bg); border: 1px solid var(--okk-border); color: var(--okk-text-3); }
.metric-tooltip:focus-visible { outline-offset: 1px; border-radius: var(--okk-r-full); }
.metric-tooltip:focus-within .metric-tooltip-content { opacity: 1; visibility: visible; }

/* ============================================================
   Виджеты
   ============================================================ */

/* ---- «Требуют разбора» — строки (attention-row образца) ---- */
.attention-card { padding: 0; overflow: hidden; }
.attention-card > .card-heading { padding-bottom: 14px; }
.attention-list { padding-bottom: 8px; }
.attention-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 150px 150px 16px; gap: 16px; align-items: center;
  padding: 12px 20px; border-top: 1px solid var(--okk-border);
  color: var(--okk-text); font-size: 14px; text-decoration: none; transition: background .12s;
}
.attention-row:hover { background: var(--okk-hover); }
.attention-main { min-width: 0; }
.attention-main strong { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attention-main small { display: block; margin-top: 2px; font-size: 12px; color: var(--okk-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attention-date { font-size: 14px; color: var(--okk-text-3); white-space: nowrap; }
.attention-score { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.attention-score small { margin-left: 5px; font-weight: 400; color: var(--okk-warn); }
.attention-chevron { color: var(--okk-text-3); }
@media (min-width: 1151px) {
  .attention-main { display: flex; align-items: baseline; gap: 18px; }
  .attention-main strong { flex: none; min-width: 165px; max-width: 40%; }
  .attention-main small { margin-top: 0; }
}
@media (max-width: 640px) {
  .attention-row { grid-template-columns: minmax(0, 1fr) auto 12px; gap: 8px; padding: 12px 16px; }
  .attention-date { display: none; }
  .attention-score small { display: block; margin-left: 0; font-size: 11px; }
  .attention-card > .card-heading { padding: 16px; }
}
.attention-total { font-size: 14px; line-height: 20px; color: var(--okk-text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- Дашборд (как в образце): шапка с действиями, ряд из двух виджетов ---- */
.page-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: auto; min-width: 0; }
.page-header-actions .btn { display: inline-flex; align-items: center; }
/* «Данные на ЧЧ:ММ» (свежесть отчётов) — тихая подпись слева от «Обновить» */
.report-freshness {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px;
  font-size: 13px; line-height: 20px; color: var(--okk-text-3); font-variant-numeric: tabular-nums;
}
.report-freshness-status { color: var(--okk-accent); }
.report-freshness-status::before { content: "·"; margin-right: 6px; color: var(--okk-text-3); }
[data-report-freshness]:empty { display: none; }
.page-widget-row { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: var(--okk-gap); align-items: start; }
.page-widget-row > .page-widget { min-width: 0; }
@media (max-width: 1150px) { .page-widget-row { grid-template-columns: minmax(0, 1fr); } }
@media print { .page-widget-row { grid-template-columns: minmax(0, 1fr); } }

/* «Отделы» на дашборде — строки (department-row образца) */
.departments-card { padding: 0; overflow: hidden; }
.departments-card > .card-heading { padding: 18px 20px; }
.department-row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 20px;
  border-top: 1px solid var(--okk-border); color: var(--okk-text); text-decoration: none;
}
.department-row:hover { background: var(--okk-hover); }
.department-row > span { flex: 1; min-width: 0; }
.department-row strong { display: block; font-size: 14px; line-height: 20px; font-weight: 600; overflow-wrap: anywhere; }
.department-row small { display: block; margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--okk-text-3); }
.department-row b { font-size: 20px; line-height: 28px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.department-row b small { display: inline; margin: 0; font-size: 12px; font-weight: 400; }
.department-row-chevron { flex: none; color: var(--okk-text-3); }

/* «Рейтинг сотрудников» на дашборде */
.leaderboard-card { padding: 0; overflow: hidden; }
.leaderboard-card > .card-heading { padding: 18px 20px; flex-wrap: nowrap; }
.leaderboard-card > .card-heading .widget-title { min-width: 0; }
.leaderboard-card > .card-heading .btn { flex: none; padding: 8px 10px; }
@media (max-width: 640px) { .page-header-actions { margin-left: 0; } }
.leaderboard-table { width: 100%; border-collapse: collapse; }
.leaderboard-table th, .leaderboard-table td { padding: 12px 16px; text-align: left; white-space: nowrap; }
.leaderboard-table td a { color: var(--okk-text); font-weight: 600; text-decoration: none; }
.leaderboard-table td a:hover { text-decoration: underline; }
.leaderboard-number { font-variant-numeric: tabular-nums; }
.leaderboard-table .cell-muted { color: var(--okk-text-3); }
.trend-delta { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.trend-delta[data-direction="up"] { color: var(--okk-good); }
.trend-delta[data-direction="down"] { color: var(--okk-bad); }

/* «Подробная статистика звонков»: средняя длительность под плитками (как в образце) */
.call-stats-note { margin: 12px 0 0; font-size: 13px; line-height: 20px; color: var(--okk-text-3); }
.okk-alert-empty { padding: 22px 20px; border-top: 1px solid var(--okk-border); text-align: center; color: var(--okk-text-3); font-size: 14px; }
.okk-alert-hint { padding: 0 20px 14px; color: var(--okk-text-3); font-size: 12px; text-align: right; }
.okk-alert-pagination { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px; padding: 12px 20px 14px; border-top: 1px solid var(--okk-border); }
.okk-alert-pagination.is-loading { opacity: .6; pointer-events: none; }
.okk-alert-pages { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; }
.okk-alert-page-status { color: var(--okk-text-3); font-size: 12px; white-space: nowrap; }
.okk-alert-pagination .btn[disabled] { opacity: .45; cursor: not-allowed; }

@media (max-width: 640px) {
  .okk-alert-pagination { grid-template-columns: 1fr 1fr; }
  .okk-alert-pages { grid-column: 1 / -1; grid-row: 1; flex-wrap: wrap; }
  .okk-alert-page-status { grid-column: 1 / -1; grid-row: 2; text-align: center; }
  .okk-alert-pagination > .btn:first-child { grid-column: 1; grid-row: 3; }
  .okk-alert-pagination > .btn:last-child { grid-column: 2; grid-row: 3; }
}

/* ---- Журнал звонков (call-journal образца) ---- */
.calls-page-head { align-items: center; }
.calls-page-head .page-sub { margin-top: 4px; }
/* Фильтры — панель filter-toolbar образца */
.calls-primary-filters {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
}
.calls-primary-filter-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
.calls-filter-select {
  width: auto;
  min-width: 176px;
  height: 44px;
  padding: 0 32px 0 12px;
  border: 1px solid var(--okk-border-strong);
  border-radius: var(--okk-r-sm);
  background-color: var(--okk-input);
  color: var(--okk-text);
  font-size: 14px;
}
/* Панель фильтров журнала (CallFiltersPanel): поля переносятся по ширине */
.calls-primary-filter-controls { flex: 1 1 auto; min-width: 0; }
.call-filters-card { padding: 16px 20px; }
.call-filters-card:empty { display: none; }
.call-filters-panel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
  width: 100%;
}
.call-filter { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.call-filter-label { font-size: 12px; font-weight: 500; line-height: 16px; color: var(--okk-text-3); }
.call-filter .calls-filter-select,
.call-filter .input { width: 100%; min-width: 0; height: 44px; }
.call-filter-phone { grid-column: span 2; }
.call-filter-range { display: flex; gap: 6px; }
.call-filter-range .input { width: 50%; }
.call-filter-error { font-size: 12px; color: var(--okk-bad); }
/* «Критические ошибки» — флажки; «Критерии оценки» — строки «критерий меньше N баллов» */
.call-filter-group { grid-column: 1 / -1; margin: 0; padding: 0; border: 0; }
.call-filter-group legend { padding: 0; margin-bottom: 6px; }
.call-filter-checks { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.call-filter-checks .call-filter-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  font-size: 14px;
  color: var(--okk-text-2);
  cursor: pointer;
}
.call-filter-checks .call-filter-check:has(input:disabled) { color: var(--okk-text-3); cursor: default; }
.call-filter-criterion {
  display: grid;
  grid-template-columns: minmax(0, 320px) auto 96px 44px;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.call-filter-criterion-word { font-size: 14px; color: var(--okk-text-2); }
.call-filter-criterion-remove {
  width: 44px;
  height: 44px;
  border: 1px solid var(--okk-border);
  border-radius: 10px;
  background: var(--okk-surface);
  color: var(--okk-text-2);
  font-size: 18px;
  cursor: pointer;
}
.call-filter-hint { grid-column: 1 / -1; font-size: 12px; color: var(--okk-text-3); }
.call-filter-criterion-add {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--okk-accent);
  cursor: pointer;
}
@media (max-width: 420px) {
  /* Критерий — своей строкой, под ним «меньше [N] ×». */
  .call-filter-criterion { grid-template-columns: auto minmax(0, 1fr) 44px; }
  .call-filter-criterion .calls-filter-select { grid-column: 1 / -1; }
}
/* Компактный вид (общий журнал, как в образце): главные поля в строку, остальное — «Ещё фильтры» */
.calls-page .calls-primary-filters { display: block; padding: 0; }
.call-filters-panel.is-compact { display: flex; flex-direction: column; gap: 12px; }
.call-filters-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.call-filters-row .call-filter { flex: 0 1 220px; }
.call-filters-row .call-filter-phone { flex: 1 1 260px; max-width: 300px; }
.call-filters-row .call-filter-check {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  height: 44px;
  font-size: 14px;
  color: var(--okk-text-2);
  white-space: nowrap;
  cursor: pointer;
}
.call-filter-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--okk-accent); }
.call-filters-more-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  margin-left: auto;
  padding: 0 4px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--okk-text);
  white-space: nowrap;
  cursor: pointer;
}
.call-filters-more-toggle::before {
  content: '';
  border-left: 6px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.15s var(--okk-ease);
}
.call-filters-more-toggle[aria-expanded="true"]::before { transform: rotate(90deg); }
.call-filters-more-toggle:focus-visible { outline: 2px solid var(--okk-accent-ring); outline-offset: 2px; border-radius: var(--okk-r-sm); }
.call-filters-more {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--okk-r-lg);
  background: var(--okk-surface-2);
}
.call-filters-more[hidden] { display: none; }
/* Плашка «Появились новые звонки или оценки» (опрос версии, services/updates.js).
   По центру снизу через left/right + margin auto: с left:50% на телефоне она
   сжималась до половины экрана. */
.updates-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 24px;
  margin: 0 auto;
  width: max-content;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  padding: 10px 12px 10px 16px;
  border: 1px solid var(--okk-border);
  border-radius: var(--okk-r-sm);
  background: var(--okk-raised);
  box-shadow: var(--okk-sh-pop);
  color: var(--okk-text-2);
  font-size: 14px;
}
.updates-banner > span { flex: 1 1 auto; min-width: 0; }
.updates-banner .btn { flex: none; white-space: nowrap; }
.updates-banner-close {
  border: 0;
  background: transparent;
  color: var(--okk-text-3);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
/* Замечания к оценке (тестовая функция стенда): окно разбора и страница */
[data-remarks-item]:empty { display: none; }
.evaluation-remarks { display: flex; flex-direction: column; gap: 8px; }
.evaluation-remarks-overall { padding: 12px; border: 1px dashed var(--okk-warn); border-radius: var(--okk-r-sm); }
.evaluation-remarks-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.evaluation-remark { padding: 8px 10px; border-radius: var(--okk-r-sm); background: var(--okk-warn-soft); }
.evaluation-remark-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--okk-text-3); }
.evaluation-remark-meta .evaluation-remark-delete { margin-left: auto; }
.evaluation-remark-text { margin-top: 4px; font-size: 13px; white-space: pre-wrap; color: var(--okk-text-2); }
.evaluation-remark-old { font-size: 12px; color: var(--okk-warn); }
.evaluation-remark-error { font-size: 12px; color: var(--okk-bad); }
.evaluation-remark-form { display: flex; flex-direction: column; gap: 6px; }
.evaluation-remark-input { width: 100%; min-height: 72px; resize: vertical; }
.evaluation-remark-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.evaluation-remark-open {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px dashed var(--okk-warn);
  border-radius: var(--okk-r-full);
  background: transparent;
  color: var(--okk-warn);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.evaluation-remark-open:hover { background: var(--okk-warn-soft); }
.evaluation-remarks-hint { font-size: 13px; color: var(--okk-text-3); }
.remarks-card { padding: 0; overflow: hidden; }
.remarks-card-heading { font-size: 13px; color: var(--okk-text-3); border-bottom: 1px solid var(--okk-border); }
.evaluation-remarks-table { width: 100%; }
.evaluation-remarks-table td { vertical-align: top; }
.evaluation-remarks-call-link { color: var(--okk-text); text-decoration: none; white-space: nowrap; }
.evaluation-remarks-author { white-space: nowrap; }

/* ---- Разметка голосов: выбор сотрудника, звонки, волна, голоса, участки, реплики ---- */
.voice-labeling-pick { padding: 0; overflow: hidden; }
.voice-labeling-field { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--okk-border); }
.voice-labeling-field-title { font-size: 14px; font-weight: 600; color: var(--okk-text-2); }
.voice-labeling-field .input { width: min(100%, 360px); }
.voice-labeling-pick .widget-empty, .voice-labeling-pick .load-error { margin: 16px 20px; }
.voice-labeling-skeleton { height: 160px; margin: 16px 20px; border-radius: var(--okk-r-md); }
.voice-labeling-calls-table { width: 100%; }
.voice-labeling-calls-table tr.is-selected td { background: var(--okk-accent-soft); }
.voice-labeling-call { display: flex; flex-direction: column; gap: 16px; padding-bottom: 20px; min-width: 0; }
.voice-labeling-call-heading { border-bottom: 1px solid var(--okk-border); font-weight: 600; overflow-wrap: anywhere; }
.voice-labeling-voices, .voice-labeling-player, .voice-labeling-columns { padding: 0 20px; min-width: 0; }
.voice-labeling-voices { display: flex; flex-direction: column; gap: 12px; }
.voice-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
[data-voice-tone="1"] { --voice: var(--okk-c1); }
[data-voice-tone="2"] { --voice: var(--okk-c2); }
[data-voice-tone="3"] { --voice: var(--okk-c3); }
[data-voice-tone="4"] { --voice: var(--okk-c4); }
[data-voice-tone="5"] { --voice: var(--okk-c5); }
[data-voice-tone="6"] { --voice: var(--okk-c6); }
.voice-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--voice, var(--okk-text-3)); }
.voice-chip { display: inline-flex; align-items: center; max-width: 100%; border: 1px solid var(--okk-border); border-radius: var(--okk-r-full); background: var(--okk-surface); }
.voice-chip-pick { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; min-width: 0; padding: 6px 14px; border: 0; border-radius: var(--okk-r-full); background: transparent; color: var(--okk-text); font: inherit; font-size: 14px; cursor: pointer; }
.voice-chip-pick[aria-pressed="true"] { background: color-mix(in srgb, var(--voice) 18%, transparent); box-shadow: inset 0 0 0 2px var(--voice); }
.voice-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-chip-kind { font-size: 12px; color: var(--okk-text-3); }
.voice-chip-remove { width: 32px; height: 32px; margin-right: 2px; border: 0; border-radius: 50%; background: transparent; color: var(--okk-text-3); font-size: 18px; line-height: 1; cursor: pointer; }
.voice-chip-remove:hover { background: var(--okk-hover); color: var(--okk-bad); }
.voice-add-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.voice-add-form .input { width: auto; min-width: 0; flex: 0 1 220px; }
.voice-labeling-player { display: flex; flex-direction: column; gap: 10px; }
.voice-labeling-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.voice-labeling-time { min-width: 44px; font-variant-numeric: tabular-nums; color: var(--okk-text-2); }
.voice-labeling-rate { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--okk-text-3); }
.voice-labeling-rate .input { width: auto; }
.voice-labeling-coverage { margin-left: auto; font-size: 13px; color: var(--okk-text-3); font-variant-numeric: tabular-nums; }
.voice-labeling-wave { min-height: 112px; padding: 8px 0; border: 1px solid var(--okk-border); border-radius: var(--okk-r-md); background: var(--okk-surface-2); overflow: hidden; }
.voice-labeling-wave-skeleton { height: 96px; margin: 0 8px; border-radius: var(--okk-r-sm); }
/* Подпись участка внутри волны (часть `region-content` wavesurfer.js): одна строка, длинное имя — с многоточием. */
.voice-labeling-wave ::part(region-content) { max-width: 100%; margin: 2px 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; color: var(--okk-text); }
.voice-labeling-hint { margin: 0; }
.voice-labeling-columns { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; }
.voice-labeling-columns .card-heading { padding: 0 0 8px; font-size: 15px; font-weight: 600; }
.voice-replicas, .voice-labels { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; max-height: 560px; overflow-y: auto; }
.voice-replica { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px; align-items: start; padding: 6px 4px; border-radius: var(--okk-r-sm); }
.voice-replica:hover { background: var(--okk-hover); }
.voice-replica-time, .voice-label-time { padding: 2px 6px; border: 0; border-radius: var(--okk-r-xs); background: transparent; color: var(--okk-accent); font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer; white-space: nowrap; }
.voice-replica-time:hover, .voice-label-time:hover { background: var(--okk-accent-soft); }
.voice-replica-text { padding: 2px 4px; border: 0; background: transparent; color: var(--okk-text); font: inherit; font-size: 14px; line-height: 1.5; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.voice-replica-speaker { font-size: 12px; font-weight: 600; color: var(--okk-text-3); }
.voice-replica-marks { grid-column: 2; display: flex; gap: 6px; flex-wrap: wrap; }
.voice-replica-marks:empty { display: none; }
.voice-mark { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--okk-r-full); background: color-mix(in srgb, var(--voice, var(--okk-text-3)) 18%, transparent); font-size: 12px; color: var(--okk-text-2); }
.voice-label-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 4px; border-bottom: 1px solid var(--okk-border); }
.voice-label-voice.input { width: auto; min-width: 0; flex: 1 1 140px; }
.voice-labels-empty { padding: 8px 4px; }
@media (max-width: 900px) {
  .voice-labeling-columns { grid-template-columns: minmax(0, 1fr); }
  .voice-labeling-coverage { margin-left: 0; }
}
@media (max-width: 640px) {
  .voice-labeling-voices, .voice-labeling-player, .voice-labeling-columns { padding: 0 16px; }
  .voice-labeling-field { padding: 16px; }
  /* 16 px — иначе iOS увеличивает страницу при вводе. */
  .voice-add-form .input, .voice-labeling-field .input { font-size: 16px; }
}
@media (max-width: 640px) {
  .evaluation-remarks-text-cell { min-width: 200px; }
}
.evaluation-remarks-text-cell { min-width: 260px; max-width: 420px; white-space: pre-wrap; }
.evaluation-remarks-explanation { max-width: 360px; margin-top: 2px; }
/* Карточка журнала: шапка, сводка фильтров, таблица, страницы */
.calls-table-card { padding: 0; overflow: visible; }
.calls-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--okk-border);
}
.calls-table-toolbar > .widget-header { margin-bottom: 0; }
.calls-table-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; }
.calls-bulk-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.calls-bulk-count { font-size: 13px; color: var(--okk-text-3); white-space: nowrap; }
.calls-table-actions .input {
  width: auto;
  min-width: 250px;
  min-height: 36px;
  height: 36px;
  border-color: var(--okk-border-strong);
  border-radius: var(--okk-r-sm);
  background-color: var(--okk-input);
  font-size: 13px;
  line-height: 1.2;
}
.calls-table-actions select.input { padding-top: 0; padding-bottom: 0; }
.calls-table-actions input.input { padding-top: 0; padding-bottom: 0; }
.calls-filter-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--okk-border);
}
.filter-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 6px 4px 10px; }
.filter-chip-text { white-space: normal; overflow-wrap: anywhere; }
.filter-chip-label { font-weight: 600; }
.filter-chip-clear {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 20px; height: 20px; padding: 0; border: 0; border-radius: var(--okk-r-full);
  background: transparent; color: inherit; cursor: pointer;
}
.filter-chip-clear:hover { background: var(--okk-hover); }
.calls-table-scroll { overflow-x: auto; border-radius: 0 0 var(--okk-r-lg) var(--okk-r-lg); container-type: inline-size; }
/* Минимум, при котором колонки читаются; на ноутбуке 1280 журнал помещается без прокрутки вбок. */
.calls-table-card .table { width: 100%; min-width: 960px; }
.calls-table-card .table thead { background: var(--okk-surface); }
/* Поля 14 px: на 1280 журналу нужен запас, шрифт в Linux и macOS рисуется шире, чем в Windows. */
.calls-table-card .table th {
  padding: 12px 14px;
  border-bottom: 1px solid var(--okk-border);
  color: var(--okk-text-3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
}
.calls-table-card .table td {
  padding: 12px 14px !important;
  border-color: var(--okk-border);
  background: var(--okk-bg);
  font-size: 14px;
  line-height: 20px;
  vertical-align: middle;
}
.calls-table-card .call-row { cursor: pointer; transition: background .12s; }
.calls-table-card .call-row:hover > td,
.calls-table-card .call-row.is-open > td { background: var(--okk-hover); }
.calls-col-select, .call-cell-select { width: 44px; }
.calls-col-open, .call-cell-open { width: 44px; padding-left: 0 !important; }
/* Подпись колонки для экранного диктора — внутри ячейки: иначе в широкой таблице на телефоне
   она выходит за прокрутку журнала и растягивает страницу вбок. */
.calls-col-open { position: relative; }
/* В колонках флажка и стрелки только значок: узкие поля дают журналу запас на 1280. */
.calls-table-card .table .calls-col-select,
.calls-table-card .table .call-cell-select { padding-right: 4px !important; }
.calls-table-card .table .calls-col-open,
.calls-table-card .table .call-cell-open { padding-right: 8px !important; }
.call-open-btn { width: 32px; height: 32px; border: 0; background: transparent; box-shadow: none; color: var(--okk-text-3); }
.call-open-btn:hover, .call-row.is-open .call-open-btn { background: var(--okk-surface-2); color: var(--okk-text); }
.calls-col-audio, .call-cell-audio { width: 72px; text-align: center !important; }
/* В колонке записи только значок: узкие поля, чтобы журнал помещался на 1280. */
.calls-table-card .table .calls-col-audio,
.calls-table-card .table .call-cell-audio { width: 56px; padding-left: 8px !important; padding-right: 8px !important; }
.call-cell-main { color: var(--okk-text); font-weight: 500; }
.call-cell-date { white-space: nowrap; }
.call-phone { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cell-sub { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--okk-text-3); font-weight: 400; }
.cell-sub[data-tone="bad"] { color: var(--okk-bad); font-weight: 500; }
/* Тип звонка — под датой, как в журнале образца. */
.call-direction { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.call-direction svg { width: 12px; height: 12px; color: var(--okk-text-3); flex: none; }
.call-status { white-space: nowrap; }
.call-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.call-tags--inline { margin-top: 0; }
.call-tags .badge { font-size: 11px; line-height: 18px; min-height: 20px; padding: 1px 6px; }
.call-scenario { color: var(--okk-text-2); }
.call-cell-duration { color: var(--okk-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.call-score-note { font-size: 12px; color: var(--okk-text-3); white-space: nowrap; }
.call-score-note[data-tone="bad"] { color: var(--okk-bad); }
.calls-table-empty { padding: 12px 20px !important; text-align: center; color: var(--okk-text-3); }
.calls-table-loading { display: flex; flex-direction: column; gap: 12px; padding: var(--okk-card-pad); }
.calls-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--okk-border);
}
.calls-pagination-status { margin-right: auto; font-size: 13px; color: var(--okk-text-3); }
.calls-pagination-pages { display: flex; align-items: center; gap: 4px; }
.calls-pagination-gap { padding: 0 4px; color: var(--okk-text-3); }
.calls-pagination .btn[disabled] { opacity: .45; cursor: not-allowed; }

/* «Разбор звонка» (CallReview образца): панель справа поверх страницы — чипы, плеер,
   транскрипт | оценка. Ниже окна «Как выставлены баллы», которое открывается из неё. */
body.call-drawer-open { overflow: hidden; }
.call-drawer-layer {
  position: fixed; inset: 0; z-index: calc(var(--z-modal, 1000) - 1);
  display: flex; justify-content: flex-end;
}
.call-drawer-backdrop { position: absolute; inset: 0; background: var(--sd-overlay); backdrop-filter: blur(2px); }
.call-drawer {
  position: relative; display: flex; flex-direction: column; gap: 16px;
  width: min(1180px, 100vw); height: 100%; overflow-y: auto; box-sizing: border-box;
  padding: 24px; background: var(--okk-surface); box-shadow: var(--okk-sh-pop);
  animation: call-drawer-in .2s var(--okk-ease);
}
@keyframes call-drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .call-drawer { animation: none; } }
.call-drawer.call-drawer--settled { animation: none; }
/* Панель прокручивается целиком; её блоки (вкладки с overflow, плеер) не сжимаются по высоте. */
.call-drawer > * { flex-shrink: 0; }
.call-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.call-drawer-title { margin: 0; font-size: 24px; line-height: 32px; font-weight: 600; color: var(--okk-text); }
.call-drawer-actions { display: flex; align-items: center; gap: 4px; flex: none; }
.call-drawer .call-audio-section { margin-bottom: 0; }
/* Карточка звонка — одна для панели и страницы звонка: чипы, плеер, транскрипт | оценка, действия. */
.call-card { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.call-card > * { flex-shrink: 0; }
.call-page-card { padding: 24px; }
.call-meta-grid { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; min-width: 0; }
.call-meta-item { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--okk-text-2); overflow-wrap: anywhere; }
.call-meta-item svg { color: var(--okk-text-3); flex: none; }
.call-meta-item.call-score { padding: 3px 11px; border-radius: var(--okk-r-full); background: var(--okk-bg); color: var(--okk-text); font-weight: 600; }
/* «Ниже нормы» — по признаку сервера (`quality_status`), не по порогу в интерфейсе. */
.call-meta-item.call-score[data-tone="bad"],
.calls-score-value[data-tone="bad"] { color: var(--okk-bad); }
.call-close-btn { position: static; flex: none; width: 48px; height: 48px; border: 0; background: transparent; box-shadow: none; }
/* Статус попытки — значок с тоном; у пропущенного и несостоявшегося — точка (Badge образца). */
.badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.call-rounding-note { flex-basis: 100%; margin: 0; font-size: 12px; line-height: 16px; color: var(--okk-text-3); }
.call-facts { font-size: 13px; line-height: 20px; color: var(--okk-text-3); }
.call-facts summary { cursor: pointer; width: max-content; color: var(--okk-text-2); }
.call-facts > div { margin-top: 4px; }
/* Плеер образца: круглая кнопка, полоса с позицией, время, «Скачать». */
.call-player {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 14px;
  border-radius: var(--okk-r-md); background: var(--okk-bg);
}
.call-player--empty { font-size: 14px; color: var(--okk-text-3); }
.call-player .call-audio-player { display: none; }
.call-player-toggle {
  flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--okk-action); color: var(--okk-on-action); cursor: pointer;
}
.call-player-toggle:hover { background: var(--okk-action-hover, var(--okk-action)); }
.call-player-main { flex: 1 1 160px; min-width: 0; }
.call-player-bar {
  --player-share: 0%;
  position: relative; height: 8px; border-radius: var(--okk-r-full); background: var(--okk-border); cursor: pointer;
}
.call-player-fill { position: absolute; inset: 0 auto 0 0; width: var(--player-share); border-radius: inherit; background: var(--okk-accent); }
.call-player-head {
  position: absolute; top: 50%; left: var(--player-share); width: 14px; height: 14px;
  border: 2px solid var(--okk-accent); border-radius: 50%; background: var(--okk-surface);
  transform: translate(-50%, -50%);
}
.call-player-rate {
  flex: none; min-width: 52px; height: 36px; padding: 0 10px;
  border: 1px solid var(--okk-border); border-radius: var(--okk-r-full);
  background: var(--okk-surface); color: var(--okk-text);
  font: inherit; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer;
}
.call-player-rate:hover { background: var(--okk-hover); }
.call-player-bar:focus-visible,
.call-player-rate:focus-visible,
.call-player-toggle:focus-visible { outline: 2px solid var(--okk-accent); outline-offset: 3px; }
.call-player-times {
  display: flex; justify-content: space-between; margin-top: 8px;
  font-size: 14px; color: var(--okk-text-3); font-variant-numeric: tabular-nums;
}
.call-player-error { flex-basis: 100%; margin: 0; font-size: 14px; color: var(--okk-bad); }
/* Вкладки «Оценка | Транскрипт» (ui-tabs образца) — только на телефоне. */
.call-mobile-tabs { display: none; }
@media (max-width: 760px) {
  .call-mobile-tabs { display: flex; }
  .call-card .call-expanded-content { display: block; }
  .call-expanded-content[data-mobile-tab="evaluation"] > .call-transcript-section,
  .call-expanded-content[data-mobile-tab="transcript"] > .call-evaluation-section { display: none; }
}
/* «Детальная оценка»: пункт и балл «x/y», нарушения без снятия — галочкой. */
.call-eval-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 60px; gap: 8px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--okk-border); font-size: 14px;
}
.call-eval-row:last-child { border-bottom: 0; }
.call-eval-name { color: var(--okk-text-2); overflow-wrap: anywhere; }
.call-eval-critical { margin-left: 6px; color: var(--okk-bad); }
.call-eval-score { justify-self: end; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--okk-text); }
.call-eval-score[data-tone="bad"] { color: var(--okk-bad); }
.call-eval-clean { display: inline-flex; color: var(--okk-good); }
.call-card .call-transcript-content { max-height: none; }
.call-card .call-feedback-grid { grid-template-columns: minmax(0, 1fr); }
.call-card-footer { padding-top: 2px; }
.call-close-btn:hover { background: var(--okk-hover); border-color: transparent; color: var(--okk-text); }
.call-audio-section {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px; padding: 12px 14px;
  border-radius: var(--okk-r-md); background: var(--okk-bg); border: 1px solid var(--okk-border);
}
.call-audio-player { flex: 1 1 auto; width: 100%; min-width: 0; height: 40px; }
.call-expanded-content { gap: 16px; }
.call-transcript-section,
.call-summary-card,
.call-feedback-card,
.call-no-evaluation {
  background: var(--okk-bg);
  border: 1px solid var(--okk-border);
  border-radius: 20px;
  padding: 16px 18px;
}
.call-section-header {
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
  font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--okk-text);
}
.call-section-header svg { color: var(--okk-text-3); }
.call-transcript-content { max-height: 430px; gap: 0; padding-right: 4px; }
.call-transcript-content > div { padding: 0; border-radius: 0; font-size: 14px; }
.call-transcript-content > .widget-loading { padding: 24px 0; }
.transcript-turn {
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--okk-border);
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--okk-text);
  font-size: 14px;
  line-height: 23px;
}
.transcript-turn:last-child { border-bottom: 0; }
.transcript-turn-speaker { font-weight: 600; margin-right: 4px; }
.transcript-turn--manager .transcript-turn-speaker,
.transcript-turn--speaker-a .transcript-turn-speaker { color: var(--okk-info); }
.transcript-turn--client .transcript-turn-speaker,
.transcript-turn--speaker-b .transcript-turn-speaker { color: var(--okk-accent); }
.transcript-turn--ivr,
.transcript-turn--noise { color: var(--okk-text-3); font-style: italic; }
.transcript-turn--highlight { outline: 2px solid var(--okk-warn); outline-offset: 2px; border-radius: var(--okk-r-xs) !important; }
.call-evaluation-section { gap: 12px; }
.call-summary-card .call-section-header { margin-bottom: 4px; }
.call-summary-text { font-size: 14px; color: var(--okk-text-2); }
.call-summary-text strong { color: var(--okk-text); font-size: 18px; }
.call-feedback-grid { gap: 12px; }
.call-feedback-header { font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.call-feedback-card.success,
.call-feedback-card.warning,
.call-feedback-card.error,
.call-feedback-card.muted { background: var(--okk-bg); border-color: var(--okk-border); }
.call-feedback-card.success .call-feedback-header { color: var(--okk-good); }
.call-feedback-card.warning .call-feedback-header { color: var(--okk-warn); }
.call-feedback-card.error { border-color: var(--okk-bad); }
.call-feedback-card.error .call-feedback-header { color: var(--okk-bad); }
.call-feedback-card.muted .call-feedback-header { color: var(--okk-text-3); }
.call-feedback-list li { font-size: 14px; line-height: 1.45; color: var(--okk-text); }
.call-no-evaluation { color: var(--okk-text-3); font-size: 14px; }
.call-no-evaluation svg { width: 22px; height: 22px; flex: none; }
.call-no-evaluation.failed { border-color: var(--okk-bad); color: var(--okk-bad); }
.call-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.call-action-disabled { display: inline-flex; }
.call-action-disabled .btn { pointer-events: none; }
.evidence-jump {
  margin-right: 6px; padding: 0 6px;
  border: 1px solid var(--okk-border-strong); border-radius: var(--okk-r-full);
  background: var(--okk-bg); color: var(--okk-text-2); font-size: 12px; line-height: 18px;
}
.evidence-jump:hover { background: var(--okk-action); border-color: var(--okk-action); color: var(--okk-on-action); }
@media (max-width: 900px) {
  .call-drawer { padding: 16px; gap: 12px; }
  .call-card { gap: 12px; }
  .call-page-card { padding: 16px; }
  .call-drawer-title { font-size: 20px; line-height: 28px; }
  .call-audio-section { padding: 10px; }
}

/* Всплывающие сообщения (ui-toast образца): внизу справа, полоса цвета слева, значок. */
.ui-toast-wrap {
  position: fixed; right: 22px; bottom: 22px; z-index: 400; /* выше окон (--z-modal: 300), как в образце */
  display: flex; flex-direction: column; gap: 10px; max-width: calc(100vw - 32px);
}
.ui-toast {
  display: flex; align-items: center; gap: 10px; min-width: 240px; padding: 11px 14px;
  background: var(--okk-surface); color: var(--okk-text); font-size: 14px; line-height: 20px;
  border: 1px solid var(--okk-border); border-left: 3px solid var(--okk-info);
  border-radius: var(--okk-r-sm); box-shadow: var(--okk-sh-3);
  animation: okk-toast-in .25s var(--okk-ease);
}
.ui-toast > svg { flex: none; color: var(--okk-info); }
.ui-toast[data-tone="success"] { border-left-color: var(--okk-good); }
.ui-toast[data-tone="success"] > svg { color: var(--okk-good); }
.ui-toast[data-tone="warning"] { border-left-color: var(--okk-warn); }
.ui-toast[data-tone="warning"] > svg { color: var(--okk-warn); }
.ui-toast[data-tone="error"] { border-left-color: var(--okk-bad); }
.ui-toast[data-tone="error"] > svg { color: var(--okk-bad); }
@keyframes okk-toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 640px) {
  .ui-toast-wrap { right: 16px; left: 16px; bottom: 16px; }
  .ui-toast { min-width: 0; }
}

/* Окна поверх страницы (ui-modal образца): «Как выставлены баллы», апелляция */
.okk-dialog-layer {
  position: fixed; inset: 0; z-index: var(--z-modal, 1000);
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px; overflow-y: auto;
}
.okk-dialog-overlay { position: fixed; inset: 0; background: var(--sd-overlay); backdrop-filter: blur(2px); }
.okk-dialog {
  position: relative; display: flex; flex-direction: column;
  width: min(520px, 100%); max-height: calc(100dvh - 48px);
  /* raised — как ui-modal образца: белый в светлой теме, #2e2e31 в тёмной. */
  background: var(--okk-raised); border: 1px solid var(--okk-border);
  border-radius: var(--okk-r-lg); box-shadow: var(--okk-sh-pop); overflow: hidden;
}
/* Окно подтверждения (`Modal.confirm`): короткий текст, без высоты под длинное содержимое. */
.confirm-dialog-body { min-height: 0; font-size: 14px; line-height: 22px; color: var(--okk-text-2); }
.confirm-dialog-body strong { color: var(--okk-text); }
.okk-dialog--wide { width: min(900px, 100%); }
.okk-dialog-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 20px 20px 16px; border-bottom: 1px solid var(--okk-border); flex: none;
}
.okk-dialog-title { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--okk-text); }
.okk-dialog-sub { margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--okk-text-3); }
.okk-dialog-body { flex: 1 1 auto; min-height: 200px; overflow-y: auto; padding: 20px; overscroll-behavior: contain; }
.okk-dialog-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 0 20px 20px; }
.okk-dialog-body textarea.input { width: 100%; min-height: 110px; resize: vertical; }
@media (max-width: 640px) {
  .okk-dialog-layer { align-items: flex-end; padding: 8px; }
  .okk-dialog { max-height: calc(100dvh - 16px); }
  .okk-dialog-head { padding: 16px; }
  .okk-dialog-body { padding: 16px; }
}

/* «Как выставлены баллы»: сценарий, итоги, критерии с пояснениями и цитатами */
.reasoning { display: flex; flex-direction: column; gap: 16px; }
.reasoning-scenario {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 16px; border-radius: var(--okk-r-md); background: var(--okk-surface);
}
.reasoning-kicker { font-size: 12px; font-weight: 500; color: var(--okk-text-3); }
.reasoning-scenario strong { font-size: 16px; font-weight: 600; color: var(--okk-text); }
.reasoning-muted { font-size: 13px; color: var(--okk-text-3); }
.reasoning-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.reasoning-stat {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: 14px 16px; border-radius: var(--okk-r-md); background: var(--okk-surface);
}
.reasoning-stat strong { font-size: 26px; line-height: 34px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--okk-text); }
.reasoning-stat span { font-size: 12px; color: var(--okk-text-3); }
.reasoning-stat[data-tone="good"] strong { color: var(--okk-good); }
.reasoning-stat[data-tone="bad"] strong { color: var(--okk-bad); }
.reasoning-stat[data-tone="muted"] strong { color: var(--okk-text-3); }
.reasoning-section { display: flex; flex-direction: column; gap: 12px; }
.reasoning-section-title { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--okk-text); }
.reasoning-category { border: 1px solid var(--okk-border); border-radius: var(--okk-r-md); overflow: hidden; }
.reasoning-category-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; background: var(--okk-surface);
}
.reasoning-category-name { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; font-size: 14px; color: var(--okk-text); }
.reasoning-score { flex: none; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.reasoning-score[data-tone="good"] { color: var(--okk-good); }
.reasoning-score[data-tone="warn"] { color: var(--okk-warn); }
.reasoning-score[data-tone="bad"] { color: var(--okk-bad); }
.reasoning-score[data-tone="muted"] { color: var(--okk-text-3); }
.reasoning-item { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--okk-border); }
.reasoning-item:first-child { border-top: 0; }
.reasoning-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.reasoning-item-name { min-width: 0; font-size: 14px; font-weight: 500; color: var(--okk-text); }
.reasoning-critical { margin-right: 4px; color: var(--okk-bad); }
.reasoning-note,
.reasoning-evidence { padding: 10px 12px; border-radius: var(--okk-r-sm); font-size: 13px; line-height: 1.5; }
.reasoning-note { background: var(--okk-surface); }
.reasoning-note strong,
.reasoning-evidence strong { color: var(--okk-text); font-weight: 600; }
.reasoning-note p { margin: 2px 0 0; color: var(--okk-text-2); }
.reasoning-evidence-rows p { margin: 0; }
.reasoning-evidence { background: var(--okk-info-soft); }
.reasoning-evidence-rows { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; color: var(--okk-text-2); }
.reasoning-evidence-role { font-weight: 600; color: var(--okk-text); }
.reasoning-overall { padding: 14px 16px; border-radius: var(--okk-r-md); background: var(--okk-surface); }
.reasoning-overall p { margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--okk-text-2); }
@media (max-width: 640px) {
  .reasoning-stats { gap: 8px; }
  .reasoning-stat { padding: 10px 12px; }
  .reasoning-stat strong { font-size: 20px; line-height: 28px; }
}

/* Хлебные крошки (crumbs образца) */
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 13px; line-height: 20px; color: var(--okk-text-3); }
.crumbs a { color: var(--okk-text-3); text-decoration: none; }
.crumbs a:hover { color: var(--okk-accent); }
.crumbs svg { flex: none; color: var(--okk-text-3); }
.crumbs-current { min-width: 0; color: var(--okk-text-2); font-weight: 600; overflow-wrap: anywhere; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.private-supervisors-page,
.private-supervisors-page .widget-title-group {
  min-width: 0;
}
.private-supervisors-page .page-title,
.private-supervisors-page .widget-title {
  overflow-wrap: anywhere;
}
/* Журнал на телефоне (до 760px) — карточки звонков, как calls-cards образца; таблица скрыта. */
.calls-cards { display: none; }
@media (max-width: 760px) {
  .calls-table-card .calls-table-scroll { display: none; }
  .calls-cards { display: flex; flex-direction: column; gap: 12px; padding: 12px; }
}
.call-mobile-card {
  min-width: 0;
  border: 1px solid var(--okk-border);
  border-radius: var(--okk-r-md);
  background: var(--okk-surface);
  overflow: hidden;
}
.call-mobile-card.is-open { background: var(--okk-hover); }
.call-mobile-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 16px 0; font-size: 12px; color: var(--okk-text-2);
}
.call-mobile-date { margin-right: auto; color: var(--okk-text); font-weight: 500; }
.call-mobile-summary {
  display: flex; flex-direction: column; gap: 8px; width: 100%;
  padding: 12px 16px 12px; border: 0; background: transparent;
  color: var(--okk-text); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.call-mobile-summary strong { font-weight: 600; overflow-wrap: anywhere; }
.call-mobile-summary > span { color: var(--okk-text-3); overflow-wrap: anywhere; }
.call-mobile-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; }
.call-mobile-meta [data-tone="bad"] { color: var(--okk-bad); }
.call-mobile-card .call-violation-phrase,
.call-mobile-card .call-tags { margin: 0 16px 8px; }
.call-mobile-open {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  width: calc(100% - 32px); min-height: 44px; margin: 0 16px; padding: 8px 0 12px;
  border: 0; border-top: 1px solid var(--okk-border); background: transparent;
  color: var(--okk-text-2); font: inherit; font-size: 14px; cursor: pointer;
}
.call-mobile-summary:focus-visible,
.call-mobile-open:focus-visible { outline: 2px solid var(--okk-accent); outline-offset: -2px; }
/* «Разбор звонка» на телефоне: панель во весь экран, всё в ширину экрана. */
@media (max-width: 640px) {
  .call-meta-grid { gap: 6px 12px; }
  .call-meta-item { min-width: 0; }
  .call-audio-section { display: grid; grid-template-columns: minmax(0, 1fr) 40px; width: 100%; min-width: 0; }
  .call-card .call-transcript-section { padding: 12px; }
}
/* Оценка в журнале — «94 б.», как «Качество» в журнале образца (без полоски). */
.calls-score-cell { white-space: nowrap; font-variant-numeric: tabular-nums; }
.calls-score-value { display: block; font-size: 14px; font-weight: 600; }

/* ---- Узкие экраны ---- */
@media (max-width: 640px) {
  .calls-primary-filters {
    align-items: stretch;
    flex-direction: column;
    padding: 16px;
  }


  .calls-primary-filter-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .call-filter-phone { grid-column: auto; }
  .call-filters-row .call-filter:not(.call-filter-check),
  .call-filters-row .call-filter-phone { flex: 1 1 100%; max-width: none; }
  .call-filters-more { grid-template-columns: 1fr; padding: 14px; }

  .calls-filter-select {
    width: 100%;
    min-width: 0;
  }

  .calls-table-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .calls-table-toolbar > .widget-header {
    flex-direction: row !important;
    align-items: center !important;
    padding: 0 !important;
  }

  .calls-table-actions,
  .calls-bulk-actions {
    width: 100%;
    min-width: 0;
    align-items: stretch;
    justify-content: flex-start;
  }

  .calls-table-actions,
  .calls-bulk-actions {
    flex-direction: column;
  }

  .calls-bulk-actions > *,
  #filter-scenario,
  #calls-bulk-action {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
  }

  .calls-table-scroll {
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }
}

/* Два графика с независимым размером canvas; на телефоне — один столбец. */
.trend-charts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
.trend-charts-grid > div {
    min-width: 0;
}
@media (max-width: 768px) {
    .trend-charts-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- Страница входа (login образца) ---- */
.login-page { min-height: 100dvh; display: flex; flex-direction: column; background: var(--okk-bg); color: var(--okk-text); font-family: var(--okk-font); }
.login-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 32px 48px; }
.login-brand { display: flex; align-items: center; gap: 12px; }
.login-main { flex: 1; display: grid; place-items: center; padding: 40px 24px 112px; }
.login-card { width: min(100%, 460px); }
.login-card h1 { font-size: 32px; line-height: 40px; font-weight: 600; letter-spacing: -.03em; margin: 0 0 12px; color: var(--okk-text); }
.login-lead { margin: 0 0 32px; font-size: 16px; line-height: 24px; color: var(--okk-text-3); }
.login-form { display: flex; flex-direction: column; }
.login-label { margin-bottom: 8px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--okk-text-2); }
.login-field { position: relative; margin-bottom: 24px; }
.login-field > svg { position: absolute; top: 13px; left: 16px; color: var(--okk-text-3); pointer-events: none; }
.login-field .input { width: 100%; min-height: 44px; padding-left: 48px; font-size: 14px; }
.login-field .login-password-input { padding-right: 52px; }
.login-field .icon-btn { position: absolute; top: 2px; right: 4px; }
.login-field .icon-btn[aria-pressed="true"] { color: var(--okk-accent); }
.login-submit { width: 100%; margin-top: 8px; }
.login-error { margin-bottom: 16px; padding: 16px; border-radius: 12px; background: var(--okk-bad-soft); color: var(--okk-bad); font-size: 14px; }
.login-error[hidden] { display: none; }
.login-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; font-size: 13px; color: var(--okk-text-3); }
.login-divider::before,
.login-divider::after { content: ""; flex: 1; height: 1px; background: var(--okk-border); }
.login-help { margin: 24px 0 0; font-size: 13px; line-height: 20px; color: var(--okk-text-3); }
@media (max-width: 640px) {
  .login-header { padding: 24px; }
  .login-main { padding: 24px 24px 64px; }
  /* 16 px — иначе iOS увеличивает страницу при вводе. */
  .login-field .input { font-size: 16px; }
}