/* Панель ai-social. Плотный рабочий интерфейс, а не лендинг: Вера смотрит
   сюда, чтобы за пару секунд понять «кто написал и что с ним делать».
   Отсюда все решения ниже — мелкий уверенный кегль, спокойный фон, цветом
   помечено только то, что требует действия. */

:root {
    --bg: #f5f6f8;
    --surface: #ffffff;
    --surface-2: #eef0f4;
    --border: #e0e3e9;
    --border-strong: #ccd1da;
    --text: #14161a;
    --muted: #6b7280;
    --accent: #3059d6;
    --accent-soft: rgba(48, 89, 214, 0.10);
    --danger: #c0392b;
    --danger-soft: rgba(192, 57, 43, 0.10);
    --warn: #a86413;
    --warn-soft: rgba(168, 100, 19, 0.12);
    --ok: #1f7a4d;
    --ok-soft: rgba(31, 122, 77, 0.12);
    --radius: 10px;
    --radius-sm: 7px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0f1113;
        --surface: #17191d;
        --surface-2: #1d2025;
        --border: #292d34;
        --border-strong: #3a3f48;
        --text: #e7e9ec;
        --muted: #949aa4;
        --accent: #5a83f7;
        --accent-soft: rgba(90, 131, 247, 0.14);
        --danger: #f0736a;
        --danger-soft: rgba(240, 115, 106, 0.14);
        --warn: #e0a33c;
        --warn-soft: rgba(224, 163, 60, 0.14);
        --ok: #4cc38a;
        --ok-soft: rgba(76, 195, 138, 0.14);
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

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

.layout { display: flex; min-height: 100vh; }

.sidebar {
    width: 232px;
    flex-shrink: 0;
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 22px 16px;
    display: flex;
    flex-direction: column;
    /* Меню не уезжает при длинном списке лидов — на странице со скроллом
       переходы должны оставаться под рукой. */
    position: sticky;
    top: 0;
    height: 100vh;
}

.sidebar .brand {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.35;
    padding: 0 10px;
    margin-bottom: 22px;
}

.sidebar nav { display: flex; flex-direction: column; gap: 2px; }

.sidebar nav a {
    display: block;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: 13.5px;
    font-weight: 500;
}
.sidebar nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.sidebar nav a.active { background: var(--accent-soft); color: var(--accent); }

.logout-link {
    margin-top: auto;
    padding: 8px 10px;
    font-size: 13px;
    color: var(--muted);
}
.logout-link:hover { color: var(--text); text-decoration: none; }

.content {
    flex: 1;
    min-width: 0;          /* иначе широкая таблица распирает флекс-колонку */
    max-width: 1240px;
    padding: 26px 30px 60px;
}

/* --- Типографика -------------------------------------------------------- */

h1 {
    font-size: 21px;
    font-weight: 650;
    letter-spacing: -0.01em;
    margin: 0 0 18px;
}

h2 {
    font-size: 15.5px;
    font-weight: 620;
    margin: 30px 0 12px;
}

h3 {
    font-size: 13.5px;
    font-weight: 600;
    margin: 22px 0 10px;
}

p { margin: 0 0 12px; }

.empty {
    color: var(--muted);
    background: var(--surface);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    padding: 14px 16px;
    font-size: 13.5px;
}

.hint { color: var(--muted); font-size: 12.5px; }

/* --- Карточки и плитки -------------------------------------------------- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 16px;
}

.stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}
.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    text-align: left;
}
.stat-num { display: block; font-size: 26px; font-weight: 650; letter-spacing: -0.02em; }
.stat-label { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }

/* --- Фильтры и статусные вкладки ---------------------------------------- */

/* Раньше это была россыпь голых label+select в строке — глазу не за что
   зацепиться. Теперь: счётчики статусов чипами (видно, где есть работа),
   параметры — в одной панели с явной кнопкой. */
.status-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}
.status-tab {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid var(--border);
    border-radius: 99px;
    background: var(--surface);
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
}
.status-tab:hover { border-color: var(--border-strong); color: var(--text); text-decoration: none; }
.status-tab .count { font-variant-numeric: tabular-nums; font-size: 12px; opacity: 0.75; }
.status-tab.active {
    background: var(--accent-soft);
    border-color: transparent;
    color: var(--accent);
    font-weight: 550;
}
/* Пустой статус не приманивает клик, но и не исчезает — воронка должна
   читаться целиком, включая нули. */
.status-tab.zero { opacity: 0.5; }

.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 18px;
}
.filters .field { margin: 0; }
.filters .actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }

/* --- Формы -------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.field > label { font-size: 12px; color: var(--muted); font-weight: 500; }
.field-wide { width: 100%; }

input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea {
    font-family: inherit;
    font-size: 13.5px;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    min-height: 34px;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea {
    min-height: 160px;
    line-height: 1.55;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
}
select {
    /* Системная стрелка на тёмном фоне выглядит инородно — рисуем свою. */
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                      linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: right 13px center, right 8px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 28px;
}

button, .btn {
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 550;
    background: var(--accent);
    color: #fff;
    border: 1px solid transparent;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    min-height: 34px;
    cursor: pointer;
}
button:hover, .btn:hover { filter: brightness(1.08); text-decoration: none; }
button:active, .btn:active { filter: brightness(0.95); }

.btn-ghost {
    background: transparent;
    color: var(--text);
    border-color: var(--border-strong);
}
.btn-ghost:hover { background: var(--surface-2); filter: none; }

.btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); filter: none; }

.form-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }

/* --- Таблицы ------------------------------------------------------------ */

/* Скролл живёт на обёртке, а не на самой таблице: `display:block` у table
   ломает рамку и скругления, а без скролла широкие таблицы (лиды, статистика)
   на телефоне обрезались — БТ §17 требует работать с мобильного. */
.table-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 16px;
}

table.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    /* Рамка на самой таблице — чтобы таблица без обёртки (новый шаблон,
       который про `.table-wrap` не знает) не выглядела голой. Внутри
       обёртки рамка снимается ниже, иначе получится двойная. */
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.table-wrap > table.data-table { border: none; border-radius: 0; }

.data-table th,
.data-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 13.5px;
    vertical-align: top;
}
.data-table thead th {
    background: var(--surface-2);
    color: var(--muted);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.data-table tbody tr:last-child td,
.data-table tbody tr:last-child th { border-bottom: none; }
.data-table tbody tr:hover td { background: var(--surface-2); }

/* Таблица «ключ — значение» (карточка лида, тура, настройки): узкая колонка
   подписи слева, чтобы значения выстроились в один левый край. */
.data-table tbody th {
    width: 220px;
    color: var(--muted);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Поля ввода внутри таблиц (карточка тура, ручная правка) занимают всю
   ширину ячейки — иначе форма выглядит рваной: инпуты разной длины. */
.data-table td input[type="text"],
.data-table td textarea,
.data-table td select { width: 100%; }

.col-when { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }
.col-tight { white-space: nowrap; }
/* Длинные текстовые колонки: раньше «Краткий итог» сжимался в столбик по
   одному слову, а «Последнее действие» уезжало за край. Ширина задаётся
   явно, лишнее прячется под многоточие (полный текст — в карточке лида). */
.cell-text {
    min-width: 190px;
    max-width: 250px;
    color: var(--text);
}
.cell-note { min-width: 160px; max-width: 200px; color: var(--muted); font-size: 12.5px; }
/* Обрезка по строкам, а не по высоте: строка таблицы должна оставаться
   сравнимой с соседними, иначе список лидов читается как лента. `max-height`
   продублирован осознанно — без него браузер показывает «хвост» четвёртой
   строки под обрезанной третьей.
   ⚠️ Вешать этот класс на сам <td> НЕЛЬЗЯ: `display:-webkit-box` отменяет
   `display:table-cell`, ячейка выпадает из строки и её содержимое уезжает
   под соседнюю колонку (поймано скриншотом 11.08). Только на вложенный div. */
.clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.45;
}
.cell-text .clamp,
.cell-note .clamp { -webkit-line-clamp: 3; max-height: calc(1.45em * 3); }
/* Название тура длинное и одинаковое у всех строк — на него не смотрят,
   его сверяют. Одна строка с многоточием, полное имя в подсказке. */
.cell-ellipsis {
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cell-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- Бейджи статусов ---------------------------------------------------- */

.badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 550;
    white-space: nowrap;
    background: var(--surface-2);
    color: var(--muted);
    border: 1px solid var(--border);
}
/* Цветом помечены только два края воронки — то, что требует действия
   человека, и то, что уже дошло до цели. Всё промежуточное нейтрально,
   иначе список превращается в новогоднюю гирлянду. */
.badge-needs_attention { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.badge-qualified,
.badge-joined_tg { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.badge-rejected { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.badge-new,
.badge-in_dialogue,
.badge-qualifying,
.badge-link_sent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

/* --- Списки значений (JSON-поля тура) ----------------------------------- */

/* Критерии тура хранятся JSON-массивом и раньше печатались сырым репром
   `["мужчины", "младше 25"]` — читать это заказчику невозможно. */
.value-list { margin: 0; padding-left: 18px; }
.value-list li { margin-bottom: 4px; }
.value-list li:last-child { margin-bottom: 0; }

pre {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    overflow-x: auto;
    font-size: 12.5px;
    line-height: 1.5;
}
code { font-size: 12.5px; }

/* --- Вход --------------------------------------------------------------- */

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.login-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 30px 26px;
    width: 100%;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.login-card .brand {
    font-weight: 600;
    font-size: 17px;
    line-height: 1.35;
    text-align: center;
    margin-bottom: 6px;
}
.login-card label { font-size: 12px; color: var(--muted); }
.login-card button { margin-top: 6px; }
.login-error {
    background: var(--danger-soft);
    color: var(--danger);
    border-radius: var(--radius-sm);
    padding: 9px 11px;
    font-size: 13px;
    margin: 0;
}

/* --- Мобильный (БТ §17: Вера смотрит панель с телефона) ----------------- */

@media (max-width: 860px) {
    .layout { flex-direction: column; }
    .sidebar {
        width: 100%;
        height: auto;
        position: static;
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding: 12px 14px;
    }
    .sidebar .brand { margin-bottom: 10px; padding: 0; }
    .sidebar nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
    .sidebar nav a { padding: 7px 11px; font-size: 13px; }
    .logout-link { margin-top: 10px; padding: 0; }
    .content { padding: 18px 14px 48px; max-width: 100%; }
    .filters { padding: 12px; gap: 10px; }
    .filters .field { flex: 1 1 45%; }
    .filters .actions { width: 100%; margin-left: 0; }
    .filters .actions button { flex: 1; }
    .cell-text, .cell-note { min-width: 200px; }
    .data-table tbody th { width: auto; }
}