/* ============================================================
   Вкладка «Подписчики» — pixel-perfect по макету Figma (1920).
   Единица --px: 1 figma-px = calc(N * var(--px)).
   ============================================================ */

:root {
    --px: calc(var(--fvw, 1vw) / 19.2);

    --c-brown: #62560e;
    --c-blue: #0087fc;
    --c-btn: #ffdd00;
    --c-page: #fffcec;
    --c-line: rgba(98, 86, 14, 0.45);
    --c-grey: #9c9c9c;
    --c-green: #59c90e;
    --c-th: #4e4a4a;
    --c-cb: #86868a;
    --c-data: #0f0f0f;
    --c-pager-mute: #c6c6c6;
}

.subs-page {
    position: relative;
    width: 100%;
    padding-bottom: calc(40 * var(--px));
}

/* ---- карточка контента ---- */
.subs-card {
    position: relative;
    margin: calc(30 * var(--px)) auto 0;
    width: calc(1881 * var(--px));
    /* верхняя зона (256px) зарезервирована под абсолютный тулбар,
       таблица идёт в потоке ниже и наращивает высоту карточки */
    padding: calc(256 * var(--px)) 0 calc(30 * var(--px)) calc(21 * var(--px));
    background: #fff;
    border-radius: calc(4 * var(--px));
    box-shadow: 0 0 calc(2 * var(--px)) rgba(0, 0, 0, 0.04);
}

/* абсолютные элементы тулбара позиционируются от карточки:
   x' = figmaX - 20, y' = figmaY - 91 */
.tb {
    position: absolute;
    box-sizing: border-box;
}

/* ---- заголовок ---- */
.subs-title {
    left: calc(42 * var(--px));
    top: calc(36 * var(--px));
    font: 400 calc(27 * var(--px)) / 1.37 'Roboto', sans-serif;
    color: var(--c-brown);
    white-space: nowrap;
}

/* ---- общий вид поля-«пилюли» ---- */
.field {
    height: calc(50 * var(--px));
    background: #fff;
    border: calc(0.3 * var(--px)) solid var(--c-line);
    border-radius: calc(4 * var(--px));
    display: flex;
    align-items: center;
    font: 300 calc(21.6 * var(--px)) / 1 'Roboto', sans-serif;
    color: var(--c-brown);
    white-space: nowrap;
    padding: 0 calc(18 * var(--px));
}

.field .val {
    color: var(--c-blue);
}

/* ---- кнопка «Удалить собачки» ---- */
.btn-del-dogs {
    left: calc(452 * var(--px));
    top: calc(33 * var(--px));
    width: calc(297 * var(--px));
    height: calc(50 * var(--px));
    background: var(--c-btn);
    border: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(13 * var(--px));
    color: var(--c-brown);
    font: 300 calc(21 * var(--px)) / 1 'Roboto', sans-serif;
    cursor: pointer;
    white-space: nowrap;
}

.btn-del-dogs .cube {
    width: calc(30 * var(--px));
    height: calc(31 * var(--px));
    flex-shrink: 0;
}

/* ---- селект «Выбрать группу» ---- */
.select-label {
    left: calc(1039 * var(--px));
    top: calc(4 * var(--px));
    font: 300 calc(20 * var(--px)) / 1 'Roboto', sans-serif;
    color: #000;
    white-space: nowrap;
}

/* кастомный селект «Выбрать группу» — переиспользует компонент .custom-select
   из style.css (все 7 состояний), здесь только позиция/размеры под макет */
.subs-select-pos {
    left: calc(1022 * var(--px));
    top: calc(33 * var(--px));
    width: calc(837 * var(--px));
}
.subs-select-pos .custom-select { width: 100%; }
.subs-select-pos .select-trigger {
    height: calc(50 * var(--px));
    border-radius: calc(4 * var(--px));
    padding: 0 calc(18 * var(--px));
}
.subs-select-pos .select-value-text {
    height: auto;
    font-family: 'Inter', sans-serif;
    font-size: calc(21.6 * var(--px));
    line-height: 1;
}
.subs-select-pos .select-arrow {
    width: auto;
    height: auto;
    padding: 0;
    background: transparent;
}
.subs-select-pos .grp-arrow {
    width: calc(16 * var(--px));
    height: calc(8 * var(--px));
    transition: transform 0.15s;
}
.subs-select-pos .custom-select.open .grp-arrow { transform: rotate(180deg); }
.subs-select-pos .select-clear-img {
    width: calc(22 * var(--px));
    height: calc(22 * var(--px));
}
.subs-select-pos .select-clear-wrapper[hidden] { display: none !important; }
/* выпадающее окно — под полем, во всю ширину */
.subs-select-pos .select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: none;
}
.subs-select-pos .select-option {
    height: calc(50 * var(--px));
    padding: 0 calc(18 * var(--px));
    font-family: 'Roboto', sans-serif;
    font-size: calc(21.6 * var(--px));
    line-height: 1;
}

/* ---- поля строки 2 ---- */
.f-date-from { left: calc(21 * var(--px)); top: calc(100 * var(--px)); width: calc(217 * var(--px)); }
.f-date-to   { left: calc(241 * var(--px)); top: calc(100 * var(--px)); width: calc(217 * var(--px)); }
/* «резиновое» поле: ширина по содержимому, отступы по краям равные (п.1) */
.f-count     { left: calc(476 * var(--px)); top: calc(100 * var(--px)); width: max-content; }
.f-count .val { font-family: 'Inter', sans-serif; }

/* ---- импорт XLSX + строки на странице ---- */
.f-import {
    left: calc(900 * var(--px));
    top: calc(100 * var(--px));
    width: calc(246 * var(--px));
    color: var(--c-grey);
}
.f-import .xlsx { color: var(--c-green); }
.f-import .xlsx-ico {
    width: calc(31 * var(--px));
    height: calc(35 * var(--px));
    margin-left: auto;
}

.f-perpage {
    left: calc(1159 * var(--px));
    top: calc(100 * var(--px));
    width: calc(96 * var(--px));
    background: #fffefb;
    justify-content: center;
    gap: calc(8 * var(--px));
    cursor: pointer;
}
.f-perpage .up-arrow { width: calc(16 * var(--px)); height: calc(8 * var(--px)); transform: rotate(180deg); }

.f-dblarrow {
    left: calc(1268 * var(--px));
    top: calc(100 * var(--px));
    width: calc(50 * var(--px));
    background: #fffefb;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}
.f-dblarrow svg { width: calc(30 * var(--px)); height: calc(30 * var(--px)); }

/* ---- пагинация ---- */
.pager {
    left: calc(1329 * var(--px));
    top: calc(100 * var(--px));
    display: flex;
}
.pg {
    width: calc(50 * var(--px));
    height: calc(50 * var(--px));
    background: #fffefb;
    border: calc(0.3 * var(--px)) solid var(--c-line);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 300 calc(29.38 * var(--px)) / 1 'Roboto', sans-serif;
    color: var(--c-pager-mute);
    cursor: pointer;
    user-select: none;
}
.pg-edge { font-size: calc(16 * var(--px)); letter-spacing: calc(0.13 * var(--px)); }
.pg.is-active { background: var(--c-blue); border-color: var(--c-blue); color: #fff; font-weight: 400; }
.pg.is-current-num { background: #fff; color: var(--c-blue); }
.pg-next { background: #fffefb; border-color: var(--c-blue); color: var(--c-blue); font-size: calc(16 * var(--px)); }
.pg-dots { font-weight: 400; font-size: calc(24.48 * var(--px)); }
.pg-23 { background: #fff; }

/* ---- чекбоксы ---- */
.cb-row {
    left: calc(45 * var(--px));
    top: calc(200 * var(--px));
    display: flex;
    align-items: center;
    gap: calc(46 * var(--px));
}
.cb-item {
    display: flex;
    align-items: center;
    gap: calc(14 * var(--px));
    cursor: pointer;
    white-space: nowrap;
}
.cb-box {
    width: calc(22.88 * var(--px));
    height: calc(22 * var(--px));
    background: #fff;
    border: calc(0.5 * var(--px)) solid var(--c-cb);
    border-radius: calc(3 * var(--px));
    flex-shrink: 0;
    box-sizing: border-box;
}
.cb-item.is-checked .cb-box { border: calc(6 * var(--px)) solid var(--c-blue); }
.cb-label {
    font: 300 calc(21.6 * var(--px)) / 1 'Roboto', sans-serif;
    color: var(--c-brown);
}

.cb-trans { left: calc(1312 * var(--px)); top: calc(200 * var(--px)); }
.cb-norep { left: calc(1492 * var(--px)); top: calc(200 * var(--px)); }

/* ============================================================
   ТАБЛИЦА
   ============================================================ */
.subs-table-wrap {
    position: relative;
    width: calc(1844 * var(--px));
}
.subs-table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    font: 300 calc(21.6 * var(--px)) / 1.37 'Roboto', sans-serif;
}
.subs-table col.c-id   { width: calc(135 * var(--px)); }
.subs-table col.c-fio  { width: calc(365 * var(--px)); }
.subs-table col.c-link { width: calc(355 * var(--px)); }
.subs-table col.c-comm { width: calc(401 * var(--px)); }
.subs-table col.c-dog  { width: calc(119 * var(--px)); }
.subs-table col.c-log  { width: calc(67 * var(--px)); }
.subs-table col.c-dp   { width: calc(161 * var(--px)); }
.subs-table col.c-do   { width: calc(161 * var(--px)); }
.subs-table col.c-del  { width: calc(81 * var(--px)); }

.subs-table th,
.subs-table td {
    height: calc(50 * var(--px));
    border: calc(0.3 * var(--px)) solid var(--c-line);
    padding: 0 calc(12 * var(--px));
    text-align: left;
    vertical-align: middle;
    overflow: hidden;
    white-space: nowrap;
}

.subs-table thead th {
    color: var(--c-th);
    font-weight: 300;
    cursor: pointer;
    user-select: none;
}
.subs-table thead th .id-accent { color: var(--c-blue); }

/* строка быстрого поиска */
.search-cell { padding: 0; }
.search-box {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 calc(12 * var(--px));
    gap: calc(8 * var(--px));
}
.search-box .mag {
    width: calc(22 * var(--px));
    height: calc(23 * var(--px));
    flex-shrink: 0;
}
.search-box input {
    border: none;
    outline: none;
    background: transparent;
    font: 300 calc(21.6 * var(--px)) / 1.37 'Roboto', sans-serif;
    color: var(--c-brown);
    width: 100%;
}

/* переключатели Да/Нет в колонке СОБАК (строка поиска) */
.dog-toggle-cell { padding: 0; }
.dog-toggle-wrap { display: flex; height: 100%; }
.dog-toggle {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 300 calc(21.6 * var(--px)) / 1 'Roboto', sans-serif;
    color: var(--c-brown);
    cursor: pointer;
    border-right: calc(0.3 * var(--px)) solid var(--c-line);
}
.dog-toggle:last-child { border-right: none; }
.dog-toggle.is-on { background: var(--c-brown); color: #fff; }

/* данные */
.subs-table tbody td { color: var(--c-data); }
.subs-table tbody td.t-id   { color: var(--c-th); }
.subs-table tbody td.t-id .id-accent { color: var(--c-blue); }
.subs-table tbody td.t-fio  { color: var(--c-brown); }
.subs-table tbody td.t-link a,
.subs-table tbody td.t-comm a,
.subs-table tbody td.t-log a { color: var(--c-blue); text-decoration: none; }
.subs-table tbody td.t-link,
.subs-table tbody td.t-comm { overflow: hidden; text-overflow: ellipsis; }
.subs-table tbody td.t-del { text-align: center; }
.subs-table tbody td.t-del .trash {
    width: calc(21.3 * var(--px));
    height: calc(24 * var(--px));
    cursor: pointer;
}

/* подсветка совпадений поиска (голубым, п.7) */
.hl { color: var(--c-blue); }

/* ---- состояния поля быстрого поиска (п.7.II) ---- */
.search-box { position: relative; }
.search-box .s-clear {
    border: none;
    background: none;
    padding: 0;
    margin-left: auto;
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.search-box .s-clear[hidden] { display: none; }
.search-box .s-clear img {
    width: calc(20 * var(--px));
    height: calc(20 * var(--px));
    transition: opacity 0.1s;
}
/* при фокусе / вводе лупа пропадает, появляется курсор (п.7.II) */
.search-box.is-focus .mag,
.search-box.has-value .mag { display: none; }
.search-box input { caret-color: var(--c-brown); }

/* ---- чекбоксы: активный текст голубой (п.13) ---- */
.cb-item.is-checked .cb-label { color: var(--c-blue); }
.cb-box { transition: border-width 0.1s, border-color 0.1s; }

/* ---- сортировка: индикатор направления ---- */
.subs-table thead .head-row th { position: relative; }
.subs-table thead .head-row th.sort-asc::after,
.subs-table thead .head-row th.sort-desc::after {
    content: '';
    position: absolute;
    right: calc(6 * var(--px));
    top: 50%;
    border-left: calc(4 * var(--px)) solid transparent;
    border-right: calc(4 * var(--px)) solid transparent;
}
.subs-table thead .head-row th.sort-asc::after {
    border-bottom: calc(5 * var(--px)) solid var(--c-blue);
    transform: translateY(-50%);
}
.subs-table thead .head-row th.sort-desc::after {
    border-top: calc(5 * var(--px)) solid var(--c-blue);
    transform: translateY(-50%);
}

/* ---- тултип пагинации (п.10, неподвижный, не следует за мышью) ---- */
.subs-tooltip {
    position: fixed;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: calc(6 * var(--px)) calc(10 * var(--px));
    border-radius: calc(4 * var(--px));
    font: 300 calc(16 * var(--px)) / 1.2 'Roboto', sans-serif;
    white-space: nowrap;
    pointer-events: none;
    z-index: 99999;
}
.subs-tooltip[hidden] { display: none; }

/* ---- выделение и копирование текста в ячейках (п.8) ---- */
.subs-table td,
.subs-table td * {
    user-select: text;
    -webkit-user-select: text;
}

/* ---- ховеры (п.3, п.5, п.12, п.14) ---- */
.btn-del-dogs { transition: background 0.12s, box-shadow 0.12s; }
.btn-del-dogs:hover { background: #ffe14d; box-shadow: inset 0 0 0 calc(1 * var(--px)) #bda300; }
.btn-del-dogs:active { background: #f5cf00; }

.f-import { transition: box-shadow 0.12s; cursor: pointer; }
.f-import:hover { box-shadow: inset 0 0 0 calc(1 * var(--px)) var(--c-blue); }
.f-import:active { box-shadow: inset 0 0 0 calc(2 * var(--px)) var(--c-blue); }

.subs-table tbody a { transition: color 0.1s; }
.subs-table tbody a:hover { text-decoration: underline; }

.t-del .trash { transition: transform 0.1s, opacity 0.1s; }
.t-del .trash:hover { opacity: 0.7; }
.t-del .trash:active { transform: scale(0.9); }

.pg { transition: background 0.12s, color 0.12s; }
.pg:hover:not(.is-active) { background: #fff6cc; }

/* ============================================================
   Страница «История изменения по подписчику» (п.15)
   ============================================================ */
.hist-card {
    width: calc(1868 * var(--px));
    padding: calc(106 * var(--px)) 0 calc(30 * var(--px)) calc(18 * var(--px));
}
.hist-title {
    left: calc(42 * var(--px));
    top: calc(36 * var(--px));
    margin: 0;
    font: 400 calc(27 * var(--px)) / 1.37 'Roboto', sans-serif;
    color: var(--c-brown);
    white-space: nowrap;
}
.hist-hint {
    font-weight: 100;
    color: rgba(98, 86, 14, 0.45);
}
.hist-table-wrap { width: calc(1840 * var(--px)); }
.hist-table col.h-name { width: calc(1598 * var(--px)); }
.hist-table col.h-date { width: calc(161 * var(--px)); }
.hist-table col.h-del  { width: calc(81 * var(--px)); }
.hist-table thead .h-name-th { text-align: center; }
.hist-table tbody td { color: var(--c-th); }
.hist-table tbody td.t-do { color: var(--c-data); }