/*
    Оформление мини-CRM (410).

    Это рабочий инструмент, а не витрина: владелец разбирает здесь заявки
    подряд, и всё сделано ради читаемости строки — крупный шрифт таблицы,
    спокойный фон, чёткая линия между строками. Ни украшений, ни движения.

    Шрифты — системные. Внешние подключать нельзя: сервер российский, и
    шрифтовые сервисы из России или недоступны, или медленны (501, раздел 10).
    Сборки JavaScript в проекте нет, поэтому и цвета заданы простыми
    переменными CSS, а не через инструменты сборки.
*/

:root {
    --ink: #1c1e21;
    --ink-quiet: #75797f;
    /* Подсказка в пустом поле светлее и текста, и подписи: она приглашение,
       а не значение. Темнее рамки поля (#c9cdd3), чтобы остаться читаемой. */
    --ink-hint: #a2a7ae;
    --line: #e4e6e9;
    --bg: #f6f7f9;
    --card: #ffffff;
    --accent: #2f6fd0;
    --danger: #b3261e;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 16px/1.45 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Полоса сверху отделяет служебное — имя системы и выход — от работы. */
.top {
    background: var(--card);
    border-bottom: 1px solid var(--line);
    margin-bottom: 28px;
}

.top__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
}

.top__name {
    font-weight: 600;
    letter-spacing: 0.02em;
}

.top form {
    margin: 0;
}

/* Переход между страницами раздела. Появился вместе со вторым продуктом
   платформы: до него раздел был одностраничным и ходить было некуда.

   Стоит слева, сразу за именем платформы, а не справа рядом с «Выйти»: слева
   то, куда идут, справа — то, кто вошёл и как выйти. */
.top__nav {
    display: flex;
    gap: 18px;
    margin-left: 28px;
}

.top__nav-link {
    color: var(--ink-quiet);
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
}

.top__nav-link:hover {
    color: var(--ink);
}

/* Страница, на которой стоишь, подчёркнута, а не выделена цветом: цвет в
   шапке уже занят состояниями заявок, и второй смысл того же приёма читался
   бы как ошибка. */
.top__nav-link--here {
    color: var(--ink);
    border-bottom-color: var(--ink);
}

/* Кто вошёл. Пользователей стало трое и больше, и вопрос «под кем я сижу»
   перестал быть праздным: владелец, менеджер и клиент видят разное, и увидеть
   не то, что ожидал, легче всего именно от того, что вошёл не тем. */
.top__who {
    margin-left: auto;
    margin-right: 16px;
    color: var(--ink-quiet);
    font-size: 14px;
}

/* Переход во второй сервис платформы (`Section::otherDoor`). Стоит между
   подписью вошедшего и кнопкой «Выйти» — рядом с тем, кто вошёл, потому что
   отвечает на тот же вопрос «где я и куда ещё могу». Не кнопка: кнопка в
   шапке одна, и это «Выйти», а два одинаково заметных действия рядом
   заставляют выбирать. */
.top__door {
    margin-right: 16px;
    color: var(--ink-quiet);
    font-size: 14px;
    text-decoration: none;
    border-bottom: 1px solid var(--line);
}

.top__door:hover {
    color: var(--ink);
}

h1 {
    font-size: 26px;
    margin: 0;
}

.head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

/* Отбор */

.filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px 16px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.field--wide {
    flex: 1 1 260px;
}

.field__label {
    font-size: 13px;
    color: var(--ink-quiet);
}

input,
select {
    font: inherit;
    color: inherit;
    background: var(--card);
    border: 1px solid #c9cdd3;
    border-radius: 6px;
    padding: 7px 10px;
    min-height: 38px;
}

input:focus,
select:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* Подсказка в пустом поле набирается заметно светлее настоящего текста.
   Правится здесь разом для всех полей раздела, а не в каждом поле по
   отдельности: подсказка, неотличимая от значения, однажды приводит к тому,
   что чужой пример сохраняют как настоящую сумму. `opacity` задаётся явно —
   иначе Firefox приглушает цвет вторично и подсказка пропадает. */
input::placeholder,
textarea::placeholder {
    color: var(--ink-hint);
    opacity: 1;
}

.filter__actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.btn {
    display: inline-block;
    font: inherit;
    line-height: 1.2;
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.btn:hover {
    background: #2760b6;
}

.btn--quiet {
    background: var(--card);
    color: var(--ink);
    border-color: #c9cdd3;
}

.btn--quiet:hover {
    background: #eef0f3;
}

/* Край перелистывания: кнопка на месте, но никуда не ведёт. */
.btn--off {
    color: var(--ink-quiet);
    cursor: default;
}

.link {
    color: var(--accent);
}

.error {
    color: var(--danger);
    margin: 0;
}

/* Сообщение о том, что всё получилось: «пароль изменён», «письмо отправлено».
   Цветом и рамкой отличается от отказа нарочно — человек читает не текст, а
   цвет, и красное «письмо отправлено» он прочтёт как отказ. */
.notice {
    color: var(--ink);
    background: #eef6ee;
    border: 1px solid #cfe3cf;
    border-radius: 6px;
    padding: 10px 12px;
    margin: 0 0 4px;
    font-size: 14px;
}

/* Пояснение под заголовком и под кнопкой: читается, но не спорит с главным. */
.hint {
    color: var(--ink-quiet);
    font-size: 14px;
    margin: 10px 0 0;
}

.found {
    color: var(--ink-quiet);
    font-size: 14px;
    margin: 18px 0 8px;
}

.found b {
    color: var(--ink);
}

/* Пустой список объясняется словами: голая страница выглядит поломкой. */
.empty {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 28px;
    text-align: center;
    color: var(--ink-quiet);
}

/* Таблица заявок */

.leads {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

.leads th {
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-quiet);
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.leads td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.leads tr:last-child td {
    border-bottom: none;
}

.leads tbody tr:hover {
    background: #fafbfc;
}

.col-num {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.col-sum,
.col-date {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Номер набирается на слух и переписывается в телефон — моноширинный
   разрядный набор здесь не украшение, а защита от опечатки. */
.phone {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.muted {
    color: var(--ink-quiet);
    font-size: 13px;
}

/* Состояние — цветом, но приглушённым: в списке разом двадцать пять
   состояний, и яркие метки перебивают то, ради чего список открыт. */
.status {
    display: inline-block;
    font-size: 13px;
    line-height: 1.2;
    padding: 4px 9px;
    border-radius: 20px;
    white-space: nowrap;
    background: #eef0f3;
    color: var(--ink);
}

.status--new {
    background: #e5edfb;
    color: #24508f;
}

.status--in_work {
    background: #fdf0d8;
    color: #7a5510;
}

.status--won {
    background: #e0f2e3;
    color: #256b32;
}

.status--lost {
    background: #f2e6e5;
    color: #8a3a34;
}

/* Состояния заказа «Беру» (807, раздел 5.1). Цвета те же и по тому же
   правилу, что у заявок: заведена — синее, роздана и взята — жёлтое и
   тёплое, выполнена — зелёное. Второй набор цветов для второго продукта
   заставлял бы владельца помнить два словаря. */
.status--beru-new {
    background: #e5edfb;
    color: #24508f;
}

.status--beru-shown,
.status--beru-taken {
    background: #fdf0d8;
    color: #7a5510;
}

.status--beru-done {
    background: #e0f2e3;
    color: #256b32;
}

/* Состояния карточки мастера (807, раздел 5.2). */
.status--beru-candidate {
    background: #eef0f3;
    color: var(--ink);
}

.status--beru-admitted {
    background: #e0f2e3;
    color: #256b32;
}

.status--beru-paused {
    background: #fdf0d8;
    color: #7a5510;
}

.status--beru-removed {
    background: #f2e6e5;
    color: #8a3a34;
}

/* Широкая таблица прокручивается вбок в своей рамке, а не растягивает
   страницу. Нужна там, где столбцов два десятка и урезать их нельзя: состав
   таблиц продукта «Беру» задан документом (807, раздел 5).

   Прокрутка на обёртке, а не на самой таблице: `overflow` на элементе
   `table` в части браузеров ломает прилипание заголовка и рамку. */
.wide {
    overflow-x: auto;
    border-radius: 8px;
}

/* Повтор — сведение, а не ошибка: заметно, но тише самой заявки. */
.dup {
    display: inline-block;
    margin-left: 6px;
    font-size: 11px;
    line-height: 1.2;
    padding: 2px 6px;
    border: 1px solid #d5d8dd;
    border-radius: 10px;
    color: var(--ink-quiet);
    cursor: help;
}

/* Перелистывание */

.pages {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 18px 0 40px;
}

.pages__count {
    color: var(--ink-quiet);
    font-size: 14px;
}

/* Карточка заявки (410, раздел 5.2) */

.card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.crumbs {
    display: flex;
    align-items: center;
    gap: 10px;
}

.crumbs__sep {
    color: var(--ink-quiet);
}

.crumbs__num {
    font-size: 24px;
    font-variant-numeric: tabular-nums;
}

/* Время приёма отодвинуто вправо: смотрят на него редко, а место слева
   занимает то, чем пользуются в каждой заявке. */
.card-head__time {
    margin-left: auto;
    color: var(--ink-quiet);
    font-size: 14px;
}

/* Стрелки разбора: заявки разбираются подряд, и возврат в список между
   каждыми двумя удваивал бы число действий (410, раздел 5.2). */
.arrows {
    display: flex;
    gap: 6px;
}

.arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid #c9cdd3;
    border-radius: 50%;
    background: var(--card);
    color: var(--ink);
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
}

.arrow:hover {
    background: #eef0f3;
}

/* Край отобранного набора: стрелка на месте, но никуда не ведёт. */
.arrow--off {
    color: #c2c6cc;
    border-color: var(--line);
    cursor: default;
}

.card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 40px;
}

.card__main {
    flex: 1 1 620px;
    min-width: 0;
}

.card__aside {
    flex: 0 0 300px;
}

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

.block__title {
    font-size: 17px;
    margin: 0 0 12px;
}

.block__sub {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-quiet);
    margin: 14px 0 6px;
}

.block__sub:first-of-type {
    margin-top: 0;
}

/* Подпись и значение — двумя столбцами, как на прежнем экране: подпись слева
   узкой колонкой, значение справа. */
.pairs {
    width: 100%;
    border-collapse: collapse;
}

.pairs th {
    width: 34%;
    text-align: left;
    font-weight: 400;
    color: var(--ink-quiet);
    padding: 8px 12px 8px 0;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.pairs td {
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    word-break: break-word;
}

.pairs tr:last-child th,
.pairs tr:last-child td {
    border-bottom: none;
}

.pairs--tight th,
.pairs--tight td {
    font-size: 14px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.ym {
    font-variant-numeric: tabular-nums;
}

/* Состояние: список, сумма, причина и кнопка одной строкой — переход делается
   одним движением, а не походом по нескольким экранам. */
.state__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.state .btn {
    min-height: 38px;
}

/* То же состояние, показанное клиенту на чтение (407, раздел 5). Отдельного
   вида ему не придумано нарочно: это та же метка состояния, что в списке, —
   клиент и владелец должны читать одно и то же одинаково. */
.state-ro {
    margin: 0 0 12px;
}

.hint {
    margin: 12px 0 0;
    color: var(--ink-quiet);
    font-size: 13px;
}

.state .error,
.note .error {
    margin-top: 10px;
}

.note {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.note textarea {
    width: 100%;
    font: inherit;
    color: inherit;
    background: var(--card);
    border: 1px solid #c9cdd3;
    border-radius: 6px;
    padding: 10px;
    resize: vertical;
}

.note textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* Сделанное подтверждается словами: без ответа страница после сохранения
   выглядит так, будто ничего не произошло. */
.done {
    background: #e0f2e3;
    border: 1px solid #b9dcbf;
    border-radius: 8px;
    color: #256b32;
    padding: 10px 14px;
    margin: 0 0 16px;
}

/* Повтор — сведение, а не ошибка, и полоса нарочно спокойная, а не тревожная. */
.dup-note {
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 3px solid #c9cdd3;
    border-radius: 8px;
    padding: 10px 14px;
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--ink-quiet);
}

.dup-note .link {
    font-variant-numeric: tabular-nums;
}

/* Неопознанное имя — настроечная ошибка, а не поломка заявки: заявка принята
   целиком. Полоса поэтому предупреждающая, но не тревожная, и стоит она у
   самих полей, а не над карточкой. */
.name-note {
    background: #fdf6e3;
    border: 1px solid #e8d9a8;
    border-left: 3px solid #c9a227;
    border-radius: 8px;
    padding: 10px 14px;
    margin: 0 0 14px;
    font-size: 14px;
    color: #6b5a1f;
}

.quiet {
    color: var(--ink-quiet);
    margin: 0;
}

.back {
    margin: 14px 0 0;
}

/* Журнал действий: кто и когда менял заявку (410, раздел 7).

   Строка читается слева направо — когда, кто, что: журнал просматривают
   сверху вниз в поисках нужного дня, и время должно стоять на одном месте у
   всех строк, а не съезжать вслед за длиной имени. Отсюда одинаковая ширина
   первых двух колонок и выравнивание третьей по левому краю. */
.journal {
    list-style: none;
    margin: 0;
    padding: 0;
}

.journal__row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
}

.journal__row:last-child {
    border-bottom: 0;
}

.journal__when {
    flex: 0 0 130px;
    color: var(--ink-quiet);
    font-variant-numeric: tabular-nums;
}

.journal__who {
    flex: 0 0 160px;
    font-weight: 600;
}

.journal__what {
    flex: 1 1 260px;
}

/* Узкий экран: три колонки становятся двумя строками — время и имя рядом,
   само изменение под ними. Сжимать их в три нечитаемых столбика незачем. */
@media (max-width: 700px) {
    .journal__when,
    .journal__who {
        flex: 0 0 auto;
    }

    .journal__what {
        flex: 1 1 100%;
    }
}

/* Заявка не найдена: промах в цифре номера — обычное дело, и объясняется он
   словами, а не страницей ошибки сервера. */
.missing {
    max-width: 520px;
    margin: 60px auto;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 28px;
    text-align: center;
}

.missing p {
    color: var(--ink-quiet);
}

/* Вход */

.login {
    max-width: 340px;
    margin: 60px auto;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 28px;
}

.login__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 18px;
}

/* Кнопка «Войти» на странице платформы (корень домена рабочего места).
   Кнопка, а не ссылка строкой: это единственное действие страницы, и искать
   его глазами человек не должен. */
.home__go {
    margin: 20px 0 0;
}

/* Подпись «чей это сервис» под формой входа (410, раздел 9.13). Отделена
   чертой и приглушена: это не часть работы, а ответ на вопрос «куда я попал»,
   и перетягивать внимание с формы она не должна. */
.whose {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.whose__line {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-quiet);
}

.whose__line:last-child {
    margin-bottom: 0;
}

/* Приписка в шапке для не вошедшего: «система учёта заявок» рядом с именем.
   Тем же приглушённым цветом, что и подпись вошедшего, — это подпись к месту,
   а не второе название. */
.top__what {
    margin-left: 8px;
    /* Полоса разводит содержимое по краям (`space-between`), и без этой
       строки приписка улетела бы к правому краю, оторвавшись от имени, к
       которому относится. */
    margin-right: auto;
    font-size: 13px;
    color: var(--ink-quiet);
}

/* Телефон и узкий экран: таблица шире экрана прокручивается вбок сама,
   а не ломает страницу. */
@media (max-width: 900px) {
    .leads {
        display: block;
        overflow-x: auto;
    }

    /* Две колонки карточки на узком экране становятся одной: сведения об
       источнике уходят под саму заявку, а не сжимаются в нечитаемый столбик. */
    .card {
        flex-direction: column;
    }

    .card__aside {
        flex: 1 1 auto;
        width: 100%;
    }
}

/*
    Клиентский кабинет (407, раздел 13).

    Оформление лежит здесь же, а не отдельным файлом: кабинет и мини-CRM — два
    раздела одной платформы, один и тот же человек ходит по обоим, и общий набор
    цветов, полей и таблиц держит их похожими сам, без сверки глазами.
*/

/* Выбор периода: готовые отрезки слева, произвольные даты справа. */
.periods {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
    margin: 16px 0 8px;
}

.periods__own {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
    margin-left: auto;
}

/* Итог за период: числа крупно, в ряд, по одному на карточку. */
.totals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin: 16px 0;
}

.total {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px 16px;
}

.total__what {
    color: var(--ink-quiet);
    font-size: 14px;
}

/* Само число — самое крупное на экране: за ним человек сюда и пришёл. */
.total__value {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    margin-top: 4px;
    white-space: nowrap;
}

/* Сравнение с прошлым периодом и причина непосчитанного набраны одинаково
   тихо: и то и другое — пояснение к числу, а не второе число. */
.total__change {
    color: var(--ink-quiet);
    font-size: 13px;
    margin-top: 6px;
}

.reports {
    list-style: none;
    margin: 8px 0 24px;
    padding: 0;
}

.reports__row {
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 10px 0;
}

/* Строка с формой внутри (кнопка «Отключить» у чата Telegram, «Оповещения»):
   форма не должна раздвигать строку своим собственным отступом. */
.reports__row form {
    margin: 0;
}

/* ─────────────────────────── Раздел «Оповещения» (задача владельца 25.08.2026) ───
   Один вид оповещения — одна карточка: подпись и пояснение сверху, каналы —
   рядом внизу. Ширина канала фиксирована, чтобы столбцы разных карточек
   стояли друг под другом, хотя в самой карточке это не таблица, а список
   ради того, чтобы читалка с экрана не объявляла её таблицей чисел. */
.notify-table {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 8px 0 24px;
}

.notify-row {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px 16px;
}

.notify-row__head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
}

.notify-row__label {
    font-weight: 600;
}

/* Две группы внутри карточки вида (407, раздел 18): «Основной канал» —
   Telegram или MAX, включён ровно один; «Копия на почту» — сама по себе,
   вторым экземпляром. Группы разделены подписью, а не рамкой: рамка внутри
   карточки читалась бы как вторая карточка. */
.notify-group {
    margin-top: 12px;
}

.notify-group__name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

/* Выбранный канал перестал работать, или оба мессенджера выключены. Сбой не
   должен выглядеть тишиной (409, раздел 14) — потому это строка на экране, а
   не только запись в журнале. */
.notify-row__warn {
    margin: 8px 0 0;
    padding: 8px 10px;
    border-left: 3px solid var(--accent);
    background: var(--bg);
    font-size: 13px;
}

.notify-row__channels {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.notify-channel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 110px;
    max-width: 260px;
}

.notify-channel__name {
    color: var(--ink-quiet);
    font-size: 13px;
}

/* Причина, по которой канал недоступен, и что сделать, чтобы он заработал.
   Не подсказка при наведении, а строка на экране: с 27.08.2026 недоступный
   канал показывается всем клиентам, и объяснение, которое видно только
   мышью, для половины из них не существует вовсе. */
.notify-channel__hint {
    color: var(--ink-quiet);
    font-size: 12px;
    line-height: 1.35;
}

/* Клиентский переключатель — кнопка-состояние, а не флажок с `onchange`
   (политика содержимого раздела запрещает встроенные обработчики). Форма
   вокруг неё в разметке уже занимает всю ширину `.notify-channel`, поэтому
   кнопке отдельная ширина не нужна. */
.switch {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px 14px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    background: var(--bg);
    color: var(--ink-quiet);
}

.switch--on {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* Неактивный переключатель — прямое требование владельца 27.08.2026:
   «показывать нужно все каналы всем клиентам… просто ползунок переключателя
   сделай неактивным». Виден, но не нажимается; почему — сказано строкой
   рядом (`.notify-channel__hint`). */
.switch--locked {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Пояснение над выданной строкой — ссылкой привязки Telegram или кодом
   привязки MAX. Показывается один раз (flash-сессия) и оформлено заметно:
   это единственный миг, когда строку видно вообще. Сама строка живёт ниже,
   в `.copyline`: до 31.08.2026 подпись и значение стояли одним куском, и
   код MAX печатался под словом «ссылка» в чужом блоке. */
.notify-link-once {
    background: var(--card);
    border: 1px solid var(--accent);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    padding: 14px 16px 8px;
    margin-bottom: 0;
}

/* Строка, которую человек уносит с собой, и кнопка «скопировать» рядом.

   ПЕРЕНОС ОБЯЗАТЕЛЕН, И ИМЕННО `break-all`. Ни ссылка привязки, ни код не
   содержат пробелов: без разрешения рвать где угодно строка вылезла бы за
   край и растянула бы всю страницу вбок — жалоба владельца 31.08.2026,
   «когда сжимаю окно ссылка становится как на скрине». Проверено на ширине
   360 пикселей — обычный телефон.

   `min-width: 0` у значения — не украшение: элемент внутри `flex` по
   умолчанию не даёт себя сжать уже своего содержимого, и перенос без этой
   строки не срабатывает. */
.copyline {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    background: var(--card);
    border: 1px solid var(--accent);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 8px 16px 14px;
    margin-top: 0;
}

.copyline__value {
    flex: 1 1 12ch;
    min-width: 0;
    word-break: break-all;
    overflow-wrap: anywhere;
    font-size: 15px;
    line-height: 1.45;
}

/* Кнопка со значком. Скрыта в разметке и показывается скриптом только там,
   где браузер умеет копировать (`public/js/copy-line.js`).

   ОТДЕЛЬНОЕ ПРАВИЛО НА `[hidden]` ЗДЕСЬ ОБЯЗАТЕЛЬНО. Собственный `display`
   элемента сильнее умолчания браузера `[hidden] { display: none }` — без
   этой строки скрытая кнопка осталась бы на экране и не делала бы ничего
   ровно там, где копировать нечем. */
.copyline__btn[hidden],
.copyline__done[hidden] {
    display: none;
}

.copyline__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--bg);
    color: var(--ink-quiet);
    cursor: pointer;
}

.copyline__btn:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.copyline__icon {
    display: block;
}

/* «скопировано» — короткая подпись рядом, гаснущая сама. Без всплывающих
   окон: слово владельца 31.08.2026. */
.copyline__done {
    flex: 0 0 auto;
    align-self: center;
    font-size: 13px;
    color: var(--ink-quiet);
}

/*
 * ВЫБОР СТОЛБЦОВ КАБИНЕТА (407, раздел 13.6; решение владельца 04.09.2026).
 *
 * Блок свёрнут по умолчанию: настройка нужна раз в жизни, а таблица над ней —
 * каждый раз. Раскрывающий заголовок остаётся заголовком блока, поэтому
 * `summary` берёт вид `.block__title`, а не браузерное умолчание.
 */
details.block > summary {
    cursor: pointer;
    margin: 0;
}

details.block[open] > summary {
    margin-bottom: 12px;
}

.stolbtsy {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}

.stolbtsy li {
    padding: 5px 0;
    border-bottom: 1px solid var(--line);
}

.stolbtsy li:last-child {
    border-bottom: 0;
}

.stolbtsy label {
    cursor: pointer;
    /* Галочка и подпись — одной строкой: подпись длинная, и перенос её
       посередине читался бы как два разных столбца. */
    display: inline;
}

/* Пояснение помельче и следом за подписью, а не под ней: строка «Кликов —
   сколько раз перешли на ваш сайт» читается как одно предложение. */
.stolbtsy .quiet {
    font-size: 13px;
}

/*
    ТЕЛЕФОН — ОСНОВНОЙ СПОСОБ ВХОДА (слово владельца 06.09.2026: «мобильный
    основной способ входа, учти это»).

    Ниже — только то, чего не решает уже стоящая разметка: сетка итогов и
    прокрутка таблиц приспосабливаются сами, а вот управление, шапка и поля
    ввода на узком экране требуют своих правил.
*/
@media (max-width: 600px) {
    .wrap {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* ВЫБОР ПЕРИОДА В ОДИН СТОЛБЕЦ. При `margin-left: auto` поля дат
       прижимались вправо и вставали лесенкой: список сверху, «С» справа, «По»
       слева. На узком экране порядок сверху вниз читается сам. */
    .periods,
    .periods__own {
        flex-direction: column;
        align-items: stretch;
        margin-left: 0;
        width: 100%;
    }

    .periods .btn,
    .periods select,
    .periods input[type="date"] {
        width: 100%;
    }

    /* ПОЛЯ ВВОДА НЕ МЕЛЬЧЕ 16 ПИКСЕЛЕЙ. Safari на iPhone сам увеличивает
       страницу, когда касаются поля с меньшим шрифтом, и клиент остаётся на
       увеличенной странице, не понимая, что произошло. */
    input,
    select,
    textarea {
        font-size: 16px;
    }

    /* ПАЛЕЦ ШИРЕ УКАЗАТЕЛЯ: кнопки и списки не ниже 44 точек — размер, ниже
       которого промах по соседней кнопке становится обычным делом. */
    .btn,
    select,
    input[type="date"] {
        min-height: 44px;
    }

    /* Шапка: имя сервиса, кто вошёл и две кнопки не помещаются в строку. */
    .top__inner {
        flex-wrap: wrap;
        gap: 8px;
    }

    .top__who {
        flex: 1 1 100%;
        order: 3;
    }

    /* Итог за период — по карточке в ряд: две в ряд на 360 точках дают
       перенос числа, а число здесь главное. */
    .totals {
        grid-template-columns: 1fr;
    }

    .total__value {
        font-size: 24px;
    }

    /* Выбор столбцов: галочка и подпись в строку, пояснение под ними. */
    .stolbtsy .quiet {
        display: block;
        margin-top: 2px;
    }
}

/* Таблицы кабинета прокручиваются вбок так же, как таблица заявок: правило
   выше названо для `.leads`, а таблица кампаний пользуется тем же классом. */
@media (max-width: 900px) {
    .totals {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
}

/*
    УСТРОЙСТВО КАБИНЕТА — ТРИ МЕСТА ПОД ТРИ РАЗНЫХ ВОПРОСА (владелец, 06.09.2026,
    по образцу кабинета Яндекса, снимок 20).

      • `.kabinet-nav`  — что смотреть: статистика, отчёты;
      • `.periods`      — как смотреть: период, состав столбцов;
      • `.razdely`      — куда идти: оповещения, заявки, позже оплаты.

    Сваленные в один ряд, эти вопросы заставляют перечитывать весь ряд ради
    любого из трёх.
*/
.kabinet-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 18px;
}

.kabinet-nav__link {
    color: var(--ink-quiet);
    text-decoration: none;
    padding: 10px 0;
    border-bottom: 2px solid transparent;
}

.kabinet-nav__link:hover {
    color: var(--ink);
}

/* Где стоишь — видно линией под словом, а не цветом: цвет уже занят
   ссылками, и второй его смысл читался бы как «сюда тоже можно нажать». */
.kabinet-nav__link--here {
    color: var(--ink);
    border-bottom-color: var(--ink);
    font-weight: 600;
}

.kabinet {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.kabinet__glavnoe {
    flex: 1 1 auto;
    min-width: 0;   /* иначе широкая таблица растягивает колонку и ломает ряд */
}

.razdely {
    flex: 0 0 180px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 4px;
}

.razdely__link {
    color: var(--ink-quiet);
    text-decoration: none;
    padding: 8px 10px;
    border-radius: 6px;
}

.razdely__link:hover {
    background: var(--card);
    color: var(--ink);
}

/* На телефоне колонки становятся строками: 180 точек слева отняли бы у таблицы
   половину ширины. Возможности уходят наверх — они короче статистики. */
@media (max-width: 700px) {
    .kabinet {
        flex-direction: column;
        gap: 8px;
    }

    .razdely {
        flex: 1 1 auto;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }
}