/* Экран «Активность по клиенту». Все селекторы — под .act-screen (классы
   .coh/.acc/.muted пересекаются с другими экранами). */
/* Прокрутка всего экрана, а не маленького окна-таблицы. Раньше таблица жила в
   контейнере с max-height — на невысоком окне влезало 3 строки. Теперь
   scroll-контейнер — сам .act-screen (на всю высоту под топбаром): при прокрутке
   вниз сводка и фильтры уезжают вверх, освобождая экран, а шапка таблицы (thead,
   top:0) и первый столбец (left:0) закреплены относительно этого контейнера.
   Горизонтальный скролл таблицы — тот же контейнер; сводку/фильтры держим на месте
   по горизонтали через sticky:left. Так и шапка, и столбец закреплены, и видно
   много строк, без «фрейма».
   :has() снимает общий padding у .screen-wrap ТОЛЬКО на этом экране (другие экраны
   не трогаем) — иначе шапка липла бы с зазором от верха. */
.main:has(.act-screen){height:100vh;overflow:hidden}
.screen-wrap:has(.act-screen){padding:0;flex:1;min-height:0;min-width:0;display:flex}
.screen-wrap:has(.act-screen) #app{flex:1;min-height:0;min-width:0;display:flex;flex-direction:column}
.act-screen{
  flex:1;min-height:0;min-width:0;                /* min-*:0 — иначе flex-элемент раздувается по таблице и вылезает за экран */
  overflow:auto;
  padding:0 40px;
  scrollbar-width:thin;
}
.act-screen>.filters-bar{margin-top:28px}        /* отступ сверху — не padding контейнера, иначе шапка липнет с зазором */
.act-screen .filters-bar,.act-screen #act-summary{position:sticky;left:0}   /* при прокрутке вбок не едут */
.act-screen .panel{width:max-content;min-width:100%;margin-bottom:28px}      /* карточка обнимает таблицу целиком */
.act-screen::-webkit-scrollbar{width:10px;height:10px}
.act-screen::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px}
.act-screen::-webkit-scrollbar-thumb:hover{background:var(--mutex)}
@media(max-width:900px){.act-screen{padding:0 16px}}
/* у самой таблицы своей прокрутки больше нет — её даёт .act-screen; отрицательные
   поля по-прежнему тянут серую шапку край-в-край внутри карточки */
.act-screen .tbl-scroll{overflow:visible;margin:-28px -28px 0}

/* сводная полоса */
.act-screen .sum-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:22px}
.act-screen .sum-card{background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-sm);box-shadow:var(--shadow-sm);padding:15px 17px;display:flex;flex-direction:column;gap:6px}
.act-screen .sum-card .lbl{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.act-screen .sum-card .val{font-size:25px;font-weight:800;letter-spacing:-.02em;color:var(--text);line-height:1;font-variant-numeric:tabular-nums}
.act-screen .sum-card .sub{font-size:12px;font-weight:600;color:var(--muted)}
.act-screen .sum-card .sub .on{color:var(--success)}
.act-screen .sum-card .sub .off{color:var(--danger)}
@media(max-width:1200px){.act-screen .sum-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.act-screen .sum-grid{grid-template-columns:repeat(2,1fr)}}

/* таблица */
.act-screen table.act{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;min-width:980px}
/* шапка липнет к верху окна прокрутки таблицы (top:0) */
.act-screen .act thead th{position:sticky;top:0;z-index:2;background:var(--surface-3);color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;text-align:right;padding:12px 11px;white-space:nowrap;border-bottom:1px solid var(--border)}
.act-screen .act thead th.l{text-align:left}
.act-screen .act thead th .sub{display:block;font-size:9.5px;font-weight:600;color:var(--mutex);text-transform:none;letter-spacing:0;margin-top:2px}
.act-screen .act tbody td{padding:12px 11px;text-align:right;border-bottom:1px solid var(--border-2);white-space:nowrap;vertical-align:middle}
.act-screen .act tbody td.l{text-align:left}
/* первый столбец «Клиент»: фикс ширины (~на треть уже — раньше растягивался и
   забирал всё свободное место), отступ слева + разделитель справа. Длинные имена
   переносятся на вторую строку, ничего не обрезаем. */
.act-screen .act th.l,.act-screen .act td.l{width:212px;padding-left:24px;border-right:1px solid var(--border-2)}
.act-screen .act td.l{white-space:normal}        /* перенос длинных имён вместо обрезки */
.act-screen .act td.l .nm{line-height:1.25}
/* в раскрытых аккаунтах длинный @username не должен вылезать за узкий столбец */
.act-screen .act td.l .acc-name{flex-wrap:wrap;min-width:0}
.act-screen .act td.l .acc-name .u{overflow-wrap:break-word;min-width:0}
/* Первый столбец закрепляем по горизонтали (left:0): при прокрутке вбок имя
   клиента остаётся на месте. Закреп работает относительно окна прокрутки таблицы,
   не окна браузера, — поэтому поверх бокового меню он уже не вылезет. Sticky-ячейке
   нужен НЕпрозрачный фон (иначе под ней просвечивают проезжающие столбцы): задаём
   его по состоянию строки. Угол шапки (th.l) поднимаем над всем. */
.act-screen .act thead th.l{left:0;z-index:3}
.act-screen .act tbody td.l{position:sticky;left:0;z-index:1;background:var(--surface)}
.act-screen .act tbody tr.client-row:hover td.l{background:var(--surface-2)}
.act-screen .act tbody tr.client-row.open td.l{background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.act-screen .act tbody tr.acc-row td.l{background:var(--surface-2)}
/* строка-итог «Все клиенты» — закреплена снизу окна прокрутки (bottom:0), всегда
   видна. Первая ячейка закреплена ещё и по левому краю (угол, z-index выше). */
.act-screen .act tfoot td{position:sticky;bottom:0;z-index:2;background:var(--surface-3);border-top:2px solid var(--border);padding:12px 11px;text-align:right;white-space:nowrap;font-weight:700;vertical-align:middle}
.act-screen .act tfoot td.l{text-align:left;left:0;z-index:3}
.act-screen .act tfoot .nm{font-weight:800;color:var(--text)}
.act-screen .act tfoot .cnt{font-size:11px;color:var(--muted);font-weight:600;margin-left:6px}
.act-screen .act tbody tr.client-row{cursor:pointer;transition:background .12s}
.act-screen .act tbody tr.client-row:hover{background:var(--surface-2)}
.act-screen .act tbody tr.client-row.open{background:var(--accent-soft)}

.act-screen .cli{display:flex;align-items:center;gap:10px}
.act-screen .cli .arr{font-size:10px;color:var(--muted);transition:transform .2s;width:10px}
.act-screen .client-row.open .cli .arr{transform:rotate(90deg)}
.act-screen .cli .nm{font-weight:700;color:var(--text);font-size:13.5px}
.act-screen .created{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.act-screen .created .d{font-size:12.5px;color:var(--text-2);font-weight:600;font-family:'JetBrains Mono',monospace}
.act-screen .created .w{font-size:11px;color:var(--muted)}
.act-screen .big{font-size:15px;font-weight:800;color:var(--text);letter-spacing:-.02em}

/* когорты */
.act-screen .coh{display:flex;flex-direction:column;gap:5px;min-width:138px;margin-left:auto}
.act-screen .coh-bar{display:flex;height:9px;border-radius:6px;overflow:hidden;background:var(--surface-3)}
.act-screen .coh-seg{height:100%}
.act-screen .coh-seg.--low{background:var(--danger)}
.act-screen .coh-seg.--mid{background:var(--warn)}
.act-screen .coh-seg.--hi{background:var(--success)}
.act-screen .coh-legend{display:flex;justify-content:flex-end;gap:10px;font-size:11px;font-weight:700}
.act-screen .coh-legend .lo{color:var(--danger)}
.act-screen .coh-legend .mi{color:var(--warn)}
.act-screen .coh-legend .hi{color:var(--success)}
.act-screen .coh-na{color:var(--mutex);font-size:12px;font-weight:600;text-align:right}

/* публикации */
.act-screen .pub{display:flex;gap:10px;justify-content:flex-end}
.act-screen .pub .p{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:34px}
.act-screen .pub .p .v{font-size:14px;font-weight:700;color:var(--text-2)}
.act-screen .pub .p .v.sum{font-size:15px;font-weight:800;color:var(--accent)}
.act-screen .pub .p .k{font-size:9.5px;color:var(--mutex);text-transform:uppercase;letter-spacing:.04em}
.act-screen .pub .p.wauto{min-width:66px}
.act-screen .pct{font-size:10.5px;font-weight:700;letter-spacing:-.01em}
.act-screen .pct.--hi{color:var(--success)}
.act-screen .pct.--mid{color:var(--warn)}
.act-screen .pct.--lo{color:var(--danger)}
.act-screen .pct.--na{color:var(--mutex)}

/* последняя публикация */
.act-screen .last{font-weight:700;font-size:13px}
.act-screen .last.--ok{color:var(--success)}
.act-screen .last.--warn{color:var(--warn)}
.act-screen .last.--bad{color:var(--danger)}

/* аккаунты */
.act-screen .acc{display:inline-flex;align-items:center;gap:8px;justify-content:flex-end}
.act-screen .acc .on{font-weight:700;color:var(--text)}
.act-screen .acc .bl{display:inline-flex;align-items:center;gap:4px;font-weight:700;color:var(--danger);font-size:12.5px}
.act-screen .acc .bl .dot{width:6px;height:6px;border-radius:50%;background:var(--danger)}
.act-screen .acc .bl.zero{color:var(--mutex)}
.act-screen .acc .bl.zero .dot{background:var(--mutex)}

/* разворот аккаунтов */
.act-screen tr.acc-row{background:var(--surface-2)}
.act-screen tr.acc-row td{border-bottom:1px solid var(--border-2);font-size:12.5px}
.act-screen tr.acc-row.hidden{display:none}
.act-screen .acc-name{display:flex;align-items:center;gap:6px;padding-left:24px}
.act-screen .acc-name .acc-plat-ico{margin-right:0}
.act-screen .acc-name .u{font-family:'JetBrains Mono',monospace;color:var(--accent);font-weight:600}
.act-screen .acc-name .badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;background:var(--danger-soft);color:var(--danger)}
.act-screen .acc-name .badge.ok{background:var(--success-soft);color:var(--success)}
.act-screen .muted{color:var(--muted)}
.act-screen .hint{font-size:12px;color:var(--muted);padding:14px 14px 0}

/* сортировка */
.act-screen .act thead th.sortable{cursor:pointer;user-select:none}
.act-screen .act thead th.sortable:hover{color:var(--text-2);background:var(--surface-2)}
.act-screen .th-arrow{display:inline-block;width:10px;color:var(--accent);font-size:10px}
.act-screen .act thead th.sorted{color:var(--accent)}

/* состояния */
.act-screen .act-empty,.act-screen .act-loading{padding:40px;text-align:center;color:var(--muted);font-size:14px}
.act-screen .act-error{padding:40px;text-align:center;color:var(--danger);font-size:14px}