/* ==========================================================================
   Раздел СТАТИСТИКА. Опирается на токены и кнопки из ../styles.css.

   Телефон — одна колонка: фильтры, сводка, зависшие, динамика, разбивки.
   Широкий экран — фильтры и сводка слева (липкая колонка), справа
   карточки; от 75em разбивки встают в два столбца.

   Цвета состояний — свои ступени тех же оттенков, что по всему сайту
   (выполнено зелёный, отказ фиолетовый, недозвон голубой, в работе
   красный), подобранные так, чтобы соседние доли различались и при
   нарушениях цветового зрения; для недозвона взят голубой ближе к бирюзе —
   рядом с фиолетовым отказом обычный синий сливался.
   ========================================================================== */

:root{
  --st-done: #27a55e;
  --st-rejected: #9b6ae6;
  --st-nodial: #2fa3c4;
  --st-open: #e5564f;
  --st-muted: rgba(255, 255, 255, .20);
  --st-grid: rgba(255, 255, 255, .08);
}
[data-theme="light"]{
  --st-done: #1f9d55;
  --st-rejected: #7c3aed;
  --st-nodial: #0e8fb0;
  --st-open: #dc4a43;
  --st-muted: rgba(17, 20, 24, .18);
  --st-grid: rgba(17, 20, 24, .09);
}

/* ------------------------------- каркас ---------------------------------- */

.st-main{ max-width:96rem; }
.st-layout{ display:flex; flex-direction:column; gap:0.875rem; transition:opacity 200ms ease; }
/* Обновление в фоне: прежние цифры остаются на месте, чуть приглушены. */
.st-layout.is-refreshing{ opacity:.6; }
.st-side, .st-content{ display:flex; flex-direction:column; gap:0.875rem; min-width:0; }

.st-loading{ margin-top:3rem; text-align:center; font-size:0.8125rem; color:var(--text-2); line-height:1.6; }
.st-loading .btn{ margin-top:0.75rem; }

.st-updated{ flex:none; font-size:0.625rem; color:var(--text-3); white-space:nowrap; text-transform:none; }
#st-refresh.is-busy svg{ animation:st-spin 0.9s linear infinite; }
@keyframes st-spin{ to{ transform:rotate(360deg); } }

@media (min-width: 64em){
  html{ font-size:112.5%; }   /* как и раньше: на большом экране всё на 12,5% крупнее */
  .main.st-main{ padding-top:1.25rem; }
  .st-layout{ display:grid; grid-template-columns:21rem minmax(0, 1fr); gap:1.25rem; align-items:start; }
  .st-side{
    position:sticky; top:3.75rem;
    max-height:calc(100vh - 4.5rem); overflow-y:auto;
    scrollbar-width:thin; scrollbar-color:var(--hairline) transparent;
  }
  .st-content{ display:grid; grid-template-columns:minmax(0, 1fr); gap:1.25rem; }
}
@media (min-width: 75em){
  .st-content{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .st-wide{ grid-column:1 / -1; }
}

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

.stat-card{
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  padding:1rem;
  min-width:0;
}
@media (min-width: 40em){ .stat-card{ padding:1.25rem; } }

.stat-card__head{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:0.5rem 0.75rem; margin-bottom:0.75rem;
}
.stat-card__title{
  margin:0; min-width:0;
  font-size:0.6875rem; font-weight:700; letter-spacing:.04em; color:var(--text-2);
}
.st-card-sub{ margin:-0.25rem 0 0.75rem; font-size:0.6875rem; line-height:1.45; color:var(--text-3); }
.st-sub{ margin:0 0 0.625rem; font-size:0.625rem; font-weight:700; letter-spacing:.05em; color:var(--text-3); }
.st-empty{ margin:0.25rem 0; font-size:0.75rem; color:var(--text-3); }
.st-note{ margin:0.625rem 0 0; font-size:0.6875rem; line-height:1.45; color:var(--text-3); }

/* ------------------------------- фильтры --------------------------------- */

.st-filters{ display:flex; flex-direction:column; gap:0.875rem; }
.st-field{ display:flex; flex-direction:column; gap:0.4375rem; min-width:0; }
.st-label{ font-size:0.5625rem; font-weight:700; letter-spacing:.06em; color:var(--text-3); }
.st-label--sub{ margin-top:0.125rem; }
.st-seg{ gap:0.3125rem; }
.st-seg .seg-btn{ padding:0.4375rem 0.6875rem; }
/* Ряд, который может не влезть (филиалы, периоды), листается вбок, а не
   переносится: так фильтры не растягивают карточку на полэкрана. */
.st-scroll{
  flex-wrap:nowrap; overflow-x:auto;
  scrollbar-width:none; -ms-overflow-style:none;
  margin:0 -1rem; padding:0 1rem;
  scroll-padding:0 1rem;
}
.st-scroll::-webkit-scrollbar{ display:none; }
.st-scroll .btn{ flex:none; }
@media (min-width: 40em){ .st-scroll{ margin:0 -1.25rem; padding:0 1.25rem; } }
@media (min-width: 64em){
  /* В колонке фильтров места мало, но она своя: переносим ряд, чтобы все
     варианты были видны сразу. */
  .st-scroll{ flex-wrap:wrap; overflow:visible; margin:0; padding:0; }
}
.st-filters .filter-select{ flex:none; }

.st-range{ display:grid; grid-template-columns:1fr 1fr; gap:0.375rem; }
.st-date{ display:flex; align-items:center; gap:0.375rem; padding:0.375rem 0.5rem; }
.st-date span{ font-size:0.5625rem; font-weight:700; color:var(--text-3); }
.st-date input{ border:none; outline:none; width:100%; min-width:0; font-size:0.75rem; color-scheme:dark; }
[data-theme="light"] .st-date input{ color-scheme:light; }

.st-scope{ margin:0; font-size:0.6875rem; line-height:1.45; color:var(--text-2); }

/* ------------------------------- сводка ---------------------------------- */

.st-hero{ display:flex; align-items:baseline; gap:0.5rem; flex-wrap:wrap; margin-bottom:0.75rem; }
.st-hero__num{ font-size:2.25rem; font-weight:700; line-height:1; letter-spacing:-.02em; }
.st-hero__label{ font-size:0.75rem; color:var(--text-2); text-transform:none; }

/* Полоса состояний: доли в порядке выполнено → отказ → недозвон → в работе,
   между ними 2 px фона — соседние доли читаются раздельно и без рамок. */
.st-bar{
  display:flex; gap:2px;
  height:0.375rem; margin-top:0.5rem;
  border-radius:var(--radius-sm); overflow:hidden;
}
.st-bar--lg{ height:0.75rem; margin:0 0 0.875rem; }
.st-bar--sm{ height:0.25rem; margin-top:0.375rem; }
.st-bar__seg{ flex-basis:0; min-width:2px; }
.st-bar__seg--done{ background:var(--st-done); }
.st-bar__seg--rejected{ background:var(--st-rejected); }
.st-bar__seg--nodial{ background:var(--st-nodial); }
.st-bar__seg--open{ background:var(--st-open); }
.st-bar__seg--empty{ background:var(--st-muted); }

.st-key{ width:0.625rem; height:0.625rem; border-radius:2px; flex:none; display:inline-block; }
.st-key--done{ background:var(--st-done); }
.st-key--rejected{ background:var(--st-rejected); }
.st-key--nodial{ background:var(--st-nodial); }
.st-key--open{ background:var(--st-open); }

.st-legend{ list-style:none; margin:0 0 1rem; padding:0; display:grid; gap:0.375rem; }
.st-legend li{
  display:grid; grid-template-columns:0.625rem auto 1fr auto; align-items:center; gap:0.5rem;
  font-size:0.75rem; text-transform:none;
}
.st-legend__val{ font-weight:700; font-variant-numeric:tabular-nums; }
.st-legend__name{ color:var(--text-2); }
.st-legend__pct{ color:var(--text-2); font-variant-numeric:tabular-nums; }
/* В динамике легенда — строкой над графиком, без чисел. */
.st-legend--row{ display:flex; flex-wrap:wrap; gap:0.375rem 1rem; margin-bottom:0.5rem; }
.st-legend--row li{ display:flex; gap:0.375rem; font-size:0.6875rem; }

.st-tiles{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0.375rem; }
.st-tile{
  display:flex; flex-direction:column; gap:0.25rem; min-width:0;
  padding:0.625rem 0.5625rem;
  background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--radius-md);
  color:var(--text); font:inherit; text-align:left;
}
button.st-tile{ cursor:pointer; transition:border-color var(--dur); }
button.st-tile:hover{ border-color:var(--border); }
.st-tile__label{ font-size:0.5625rem; line-height:1.25; font-weight:700; letter-spacing:.03em; color:var(--text-2); overflow-wrap:anywhere; }
.st-tile__val{ font-size:1.125rem; font-weight:700; line-height:1.1; text-transform:none; white-space:nowrap; }
.st-tile__hint{ font-size:0.5625rem; color:var(--text-3); text-transform:none; overflow-wrap:anywhere; }
/* Зависшие — главная тревожная цифра: красный знак рядом, число своим цветом
   текста остаётся читаемым на любой теме. */
.st-tile--late{ border-color:color-mix(in srgb, var(--st-open) 55%, transparent); }
.st-tile--late .st-tile__label::before{
  content:''; display:inline-block; width:0.4375rem; height:0.4375rem; margin-right:0.3125rem;
  border-radius:50%; background:var(--st-open); vertical-align:0.03rem;
}

.st-split{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0.375rem; margin-top:0.375rem; }
.st-split__item{
  display:flex; flex-direction:column; gap:0.1875rem; min-width:0;
  padding:0.5rem 0.5625rem;
  background:transparent; border:1px solid var(--border); border-radius:var(--radius-md);
  color:var(--text); font:inherit; text-align:left; cursor:pointer;
  transition:background var(--dur), color var(--dur);
}
.st-split__label{ font-size:0.5625rem; font-weight:700; letter-spacing:.03em; }
.st-split__val{ font-size:0.9375rem; font-weight:700; }
.st-split__item--tasks{ border-color:var(--danger); }
.st-split__item--tasks .st-split__label{ color:var(--danger); }
.st-split__item--tmc{ border-color:var(--ok); }
.st-split__item--tmc .st-split__label{ color:var(--ok); }
.st-split__item--rx{ border-color:var(--blue); }
.st-split__item--rx .st-split__label{ color:var(--blue); }
.st-split__item:hover{ background:var(--surface-2); }

/* --------------------------- не решены дольше ---------------------------- */

/* Числовые кнопки (пороги и «за последние»): их много, поэтому узкие и с
   переносом — на телефоне встают в два ряда, а не уезжают за край. */
.st-chips{ gap:0.25rem; align-items:center; flex-wrap:wrap; }
.st-chips .seg-btn{ min-width:2rem; padding:0.375rem 0.4375rem; text-align:center; }
.st-chips__unit{ margin-left:0.125rem; font-size:0.625rem; font-weight:700; color:var(--text-3); }
.st-lead{ margin:0 0 1rem; font-size:0.8125rem; line-height:1.5; color:var(--text-2); }
.st-lead b{ color:var(--text); font-weight:700; }

/* Возраст и «кто не решил» встают рядом, только когда самой карточке
   хватает ширины: на ноутбуке рядом с колонкой фильтров она узкая, и
   список в полкарточки выходил столбиком по слову в строке. */
.st-late{ container-type:inline-size; }
.st-late-grid{ display:grid; gap:1.25rem; }
@container (min-width: 44rem){ .st-late-grid{ grid-template-columns:minmax(14rem, 18rem) minmax(0, 1fr); gap:1.75rem; } }

/* Возраст незакрытых: одна серия, зависшие полосы — красным, остальные
   нейтральным. Нажатие на полосу делает её началом порога. */
.st-ages{ display:grid; gap:0.25rem; }
.st-age{
  display:grid; grid-template-columns:4.25rem minmax(0, 1fr) 3rem; align-items:center; gap:0.5rem;
  width:100%; padding:0.3125rem 0.375rem; margin:0 -0.375rem;
  width:calc(100% + 0.75rem);
  background:transparent; border:none; border-radius:var(--radius-sm);
  color:var(--text); font:inherit; text-align:left; cursor:pointer;
  transition:background var(--dur);
}
.st-age:disabled{ cursor:default; }
.st-age:not(:disabled):hover{ background:var(--surface-2); }
.st-age__label{ font-size:0.6875rem; color:var(--text-2); text-transform:none; white-space:nowrap; }
.st-age__track{ height:0.625rem; }
.st-age__fill{ display:block; height:100%; min-width:2px; border-radius:0 4px 4px 0; background:var(--st-muted); }
.st-age.is-late .st-age__fill{ background:var(--st-open); }
.st-age.is-late .st-age__label{ color:var(--text); font-weight:700; }
.st-age__val{ font-size:0.75rem; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; }

.st-meter{ height:0.25rem; margin-top:0.5rem; margin-left:1.125rem; border-radius:2px; background:var(--st-grid); overflow:hidden; }
.st-meter span{ display:block; height:100%; min-width:2px; border-radius:0 2px 2px 0; background:var(--st-open); }

.st-tasks{ list-style:none; margin:0; padding:0; display:grid; gap:0.125rem; }
.st-task{
  display:grid; grid-template-columns:3.25rem minmax(0, 1fr) auto; align-items:baseline; gap:0.5rem;
  padding:0.375rem 0; border-bottom:1px solid var(--hairline);
  font-size:0.6875rem;
}
.st-task:last-child{ border-bottom:none; }
.st-task__age{ font-weight:700; color:var(--danger); white-space:nowrap; font-variant-numeric:tabular-nums; }
.st-task__main{ display:flex; flex-wrap:wrap; align-items:baseline; gap:0.125rem 0.5rem; min-width:0; }
.st-task__title{ overflow-wrap:anywhere; }
.st-task__pat{ color:var(--warn); white-space:nowrap; }
.st-task__date{ color:var(--text-3); white-space:nowrap; font-variant-numeric:tabular-nums; }
.st-tag{
  padding:0 0.3125rem; border:1px solid currentColor; border-radius:var(--radius-sm);
  font-size:0.5rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; line-height:1.5;
}
.st-tag--tasks{ color:var(--danger); }
.st-tag--tmc{ color:var(--ok); }
.st-tag--rx{ color:var(--blue); }

/* ------------------------------- динамика -------------------------------- */

.st-chart{ position:relative; width:100%; min-height:210px; }
.st-svg{ display:block; width:100%; height:auto; overflow:visible; }
.st-grid{ stroke:var(--st-grid); stroke-width:1; }
.st-base{ stroke:var(--border); stroke-width:1; }
.st-axis{ fill:var(--text-3); font-family:var(--font-ui); font-size:10px; font-variant-numeric:tabular-nums; }
.st-fill--done{ fill:var(--st-done); }
.st-fill--rejected{ fill:var(--st-rejected); }
.st-fill--nodial{ fill:var(--st-nodial); }
.st-fill--open{ fill:var(--st-open); }
.st-col{ transition:opacity var(--dur); }
.st-col.is-dim{ opacity:.35; }
.st-hit{ fill:transparent; cursor:pointer; outline:none; }
.st-hit:focus-visible{ stroke:var(--blue); stroke-width:1.5; }

.st-tip{
  position:fixed; z-index:60; pointer-events:none;
  min-width:9rem; max-width:18rem;
  padding:0.5rem 0.625rem;
  background:var(--surface-2); color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:0 0.5rem 1.5rem rgba(0, 0, 0, .25);
  font-size:0.6875rem; text-transform:none;
}
.st-tip[hidden]{ display:none; }
.st-tip__title{ margin-bottom:0.3125rem; color:var(--text-2); }
.st-tip__row{ display:flex; align-items:center; gap:0.4375rem; line-height:1.6; }
.st-tip__row b{ min-width:2.25rem; text-align:right; font-variant-numeric:tabular-nums; }
.st-tip__row span:last-child{ color:var(--text-2); white-space:nowrap; }
.st-tip__key{ width:0.75rem; height:2px; border-radius:1px; flex:none; }
.st-tip__total{ margin-top:0.25rem; padding-top:0.25rem; border-top:1px solid var(--hairline); color:var(--text-2); }

.st-table-wrap{ overflow-x:auto; max-height:26rem; overflow-y:auto; }
.st-table{ width:100%; border-collapse:collapse; font-size:0.6875rem; }
.st-table th, .st-table td{ padding:0.375rem 0.5rem; border-bottom:1px solid var(--hairline); text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.st-table th:first-child{ text-align:left; }
.st-table thead th{ position:sticky; top:0; background:var(--surface); color:var(--text-2); font-weight:700; }
.st-table tbody th{ font-weight:400; color:var(--text-2); }

/* ----------------------------- строки-разбивки --------------------------- */

.st-sort{ min-width:4.5rem; }
.st-search{ display:flex; align-items:center; gap:0.375rem; margin-bottom:0.25rem; padding:0.4375rem 0.625rem; }
.st-search__ico{ color:var(--text-3); font-size:0.875rem; line-height:1; }
.st-search input{ font-size:0.75rem; }
.st-search input::-webkit-search-cancel-button{ filter:grayscale(1); }

.st-rows{ min-width:0; }
.st-row{ padding:0.75rem 0; border-bottom:1px solid var(--hairline); min-width:0; }
.st-row:last-child{ border-bottom:none; }
.st-rows > .st-more{ margin-top:0.75rem; }

.st-row__head{
  display:flex; align-items:baseline; gap:0.5rem;
  width:100%; padding:0; border:none; background:transparent;
  color:var(--text); font:inherit; text-align:left; cursor:pointer;
}
.st-row__head:hover .st-row__name{ opacity:.75; }
.st-row__name{
  flex:1 1 auto; min-width:0;
  font-size:0.8125rem; font-weight:700; text-transform:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:opacity var(--dur);
}
.st-row__num{ flex:none; font-size:0.75rem; font-weight:700; color:var(--text-2); font-variant-numeric:tabular-nums; }
.st-row__num--late{ color:var(--text); }
.st-row__meta{ margin-top:0.1875rem; padding-left:1.125rem; font-size:0.625rem; line-height:1.4; color:var(--text-3); overflow-wrap:anywhere; }
.st-row__sub{ margin-top:0.3125rem; padding-left:1.125rem; font-size:0.6875rem; line-height:1.45; color:var(--text-2); overflow-wrap:anywhere; }
.st-row > .st-bar{ margin-left:1.125rem; }
.st-late-text{ color:var(--text); font-weight:700; white-space:nowrap; }
.st-late-text::before{
  content:''; display:inline-block; width:0.375rem; height:0.375rem; margin-right:0.25rem;
  border-radius:50%; background:var(--st-open); vertical-align:0.05rem;
}

.chev{ font-size:0.625rem; color:var(--text-3); width:0.625rem; display:inline-block; flex:none; transition:transform var(--dur); }
.st-row.is-open .chev{ transform:rotate(90deg); }

/* Раскрытая строка — ветви дерева: вертикаль и короткие веточки к пунктам. */
.st-row__detail{
  margin:0.75rem 0 0 0.3125rem; padding-left:1.25rem;
  border-left:1.5px solid var(--border);
}
.st-row__detail[hidden]{ display:none; }
.st-row__detail > .st-more{ margin-top:0.625rem; }
.st-tree + .st-tree{ margin-top:0.875rem; }
.st-tree__title{ margin:0 0 0.375rem; font-size:0.5625rem; font-weight:700; letter-spacing:.05em; color:var(--text-3); }
.st-mini{ position:relative; padding:0.3125rem 0; }
.st-mini::before{
  content:''; position:absolute; left:-1.25rem; top:0.875rem;
  width:0.875rem; height:1.5px; background:var(--border);
}
.st-mini__head{ display:flex; align-items:baseline; gap:0.5rem; font-size:0.6875rem; }
.st-mini__name{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.st-mini__num{ flex:none; font-weight:700; color:var(--text-2); font-variant-numeric:tabular-nums; }
.st-mini__sub{ margin-top:0.125rem; font-size:0.625rem; line-height:1.4; color:var(--text-2); overflow-wrap:anywhere; }

.st-more{ width:100%; height:2.25rem; }

/* -------------------------------- рецепты -------------------------------- */

.st-rx-grid{ display:grid; gap:1.25rem; }
@media (min-width: 48em){ .st-rx-grid{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.4fr); gap:1.75rem; } }
.st-hbar{ display:grid; grid-template-columns:3.25rem minmax(0, 1fr) 3rem; align-items:center; gap:0.5rem; padding:0.25rem 0; }
.st-hbar__label{ font-size:0.6875rem; color:var(--text-2); text-transform:none; }
.st-hbar__track{ height:0.625rem; }
.st-hbar__fill{ display:block; height:100%; min-width:2px; border-radius:0 4px 4px 0; background:var(--blue); }
.st-hbar__val{ font-size:0.75rem; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; }

@media (max-width: 22.5em){
  .st-tiles, .st-split{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .st-hero__num{ font-size:1.875rem; }
}