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

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

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

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

    /* ОДНА ШИРИНА НА ВСЕ УЗКИЕ СТРАНИЦЫ — вход, смена пароля, «заявка не
       найдена». Слово владельца 14.09.2026: «у нас есть страницы, например для
       входа в личный кабинет, её ширина выставляет мобильную версию даже на
       ПК… чтобы стандартный размер был установлен для всех страниц на ПК с
       подобным форматом текста».

       ПОЧЕМУ ОДНО ЧИСЛО, А НЕ ПО ЧИСЛУ У КАЖДОЙ. Было 340 у входа и 520 у
       «заявка не найдена»: две страницы одного рода выглядели как две разные
       вёрстки, а карточка входа на широком экране читалась как открытая на
       телефоне. Рабочие страницы кабинета и мини-CRM сюда не входят — у них
       таблицы, и они тянутся во всю ширину (его же оговорка: «за исключением
       самих страниц личного кабинета»). */
    --stranica-uzkaya: 520px;
}

* {
    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;
}

/* ОТСТУП СНИЗУ У ОБЛАСТИ РАБОТЫ (владелец, 06.09.2026: «добавь в ЛК отступ
   снизу страницы — там сейчас ноль»). Таблица, упирающаяся в край окна,
   выглядит обрезанной: непонятно, кончилась она или страница не долистана. */
main.wrap {
    padding-bottom: 48px;
}

/* ВО ВСЮ ШИРИНУ МОНИТОРА — кабинет клиента (владелец, 06.09.2026, по снимку 20:
   «экран расширен на всю ширину монитора… нужно сделать на всю ширину»).
   Мини-CRM остаётся в колонке: там строки текста, а длинную строку глазом не
   пройти. У таблицы с десятком столбцов забота обратная — ей нужна ширина. */
.wrap--vo-vsyu {
    max-width: none;
}

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

/* ВЕРХНЯЯ ПОЛОСА НЕ ПРИЖИМАЕТСЯ К КРАЮ ЭКРАНА (владелец, 06.09.2026, о
   телефоне: «нет отступа от верхнего края»).

   Откуда бралось. Высоту полосы держал только `min-height`, а собственных
   полей у неё не было: на широком экране содержимое ниже 56 точек, и остаток
   раскладывался сверху и снизу сам. На телефоне же имя, почта и «Выйти» в
   строку не помещаются и переносятся — содержимое становится выше 56 точек,
   свободного остатка не остаётся, и первая строка встаёт вплотную к верхнему
   краю окна. Поля решают это на любой ширине, а не только на измеренной.

   `flex-wrap` объявлен здесь же: перенос уже происходил, но не по правилу, а
   потому что строка не влезала. Без него узкая полоса выталкивала бы «Выйти»
   за край. */
.top__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 16px;
    min-height: 56px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.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;
}

/* ЗАГОЛОВОК РАЗДЕЛА — МЕЛЬЧЕ ОБЫЧНОГО (владелец, 06.09.2026: «шрифт сделай
   меньше, чтобы смотрелось по-деловому»). Крупная надпись уместна там, где
   она единственная на экране; здесь под ней меню, панель отбора и таблица, и
   заголовок в ряду с ними — подпись, а не вывеска. */
.head--razdel {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}

/* Заголовок внутри раздела — над письмом, над отдельным блоком. Мельче
   раздельного: он подписывает часть страницы, а не саму страницу. */
.head--podrazdel {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

/* ЛИНИИ МЕЖДУ СТОЛБЦАМИ — тонкие и серые, как в кабинете Директа (снимок 20,
   владелец 06.09.2026: «там разметка видна сразу, в том числе и вертикальные
   линии между столбцами таблицы; они сделаны тонкими и серыми, не сильно
   бросающимися в глаза»). При десятке столбцов взгляд без них теряет строку. */
.leads th:not(:last-child),
.leads td:not(:last-child) {
    border-right: 1px solid var(--line);
}

/* ШИРИНА СТОЛБЦА ТЯНЕТСЯ ЗА КРАЙ ЗАГОЛОВКА, двойной щелчок подгоняет её под
   самое длинное значение (владелец, 06.09.2026). Полоса захвата шире своей
   видимой черты: попасть в линию толщиной в точку трудно. */
.leads th {
    position: relative;
}

/* РУЧКА ВИДНА ВСЕГДА, А НЕ ТОЛЬКО ПОД УКАЗАТЕЛЕМ (владелец, 06.09.2026:
   «место, куда нужно схватить мышью за ползунок, не видно… нужно, чтобы место,
   где можно подвинуть ширину столбцов, выделялось, было немножко шире, чтобы
   было понятно, что за это место можно ухватиться»).

   ОБЛАСТЬ ЗАХВАТА И ВИДИМАЯ ЧАСТЬ РАЗВЕДЕНЫ (владелец, 08.09.2026: «сделай
   немного тоньше линии, за которые можно перетягивать столбцы, они слишком
   толстые, сделай их заметными, но тонкими, чтобы не бросались так сильно в
   глаза»).

   Прежде видимым была сама область: белая плашка шириной 14 точек с рамкой.
   Схватить её было легко, но в таблице на десяток столбцов десяток таких
   плашек читался как второй ряд разделителей. Теперь область захвата осталась
   прежней — 14 точек, попадать мышью не труднее, — а видна вместо неё одна
   тонкая черта поверх линии столбца: тот же разделитель, только темнее и
   короче. */
.leads__ruchka {
    position: absolute;
    top: 6px;
    right: -7px;
    bottom: 6px;
    width: 14px;
    z-index: 1;
    cursor: col-resize;
    user-select: none;
    background: none;
    box-shadow: none;
}

/* Видимая часть: черта в 2 точки посередине области захвата. Стоит она верхом
   на линии столбца и отличается от неё темнотой, а не толщиной. */
.leads__ruchka::after {
    content: '';
    position: absolute;
    top: 0;
    right: 6px;
    bottom: 0;
    width: 2px;
    border-radius: 1px;
    background: var(--ink-quiet);
}

.leads__ruchka:hover::after,
.leads__ruchka:focus-visible::after {
    right: 5px;
    width: 4px;
    background: var(--ink);
}

.leads__ruchka:focus-visible {
    outline: none;
}

/* У последнего столбца тянуть нечего — за ним край таблицы. */
.leads th:last-child .leads__ruchka {
    display: none;
}

/* Таблица шире области работы уезжает внутри своей обёртки, а не растягивает
   страницу: при десятке столбцов и заданных вручную ширинах это обычное
   состояние, а не поломка. */
.tablitsa-obertka {
    width: 100%;
    overflow-x: auto;
}

body.tyanem-stolbets {
    cursor: col-resize;
    user-select: none;
}

/* СТРОКА «ИТОГО» отделена фоном и не откликается на наведение: она не строка
   списка, а его сумма. */
.leads__total td {
    background: var(--bg);
}

.leads tbody tr.leads__total:hover {
    background: var(--bg);
}

/* Отбор */

.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;
}

/* Стрелки перестановки столбца: мелкие, серые, вплотную к названию — они
   часть строки, а не отдельная кнопка. Порядок столбцов задаёт клиент
   (владелец, 06.09.2026). */
.stolbtsy__poryadok {
    display: inline-flex;
    gap: 2px;
    margin: 0 6px;
    vertical-align: middle;
}

.stolbtsy__strelka {
    font: inherit;
    font-size: 13px;
    line-height: 1;
    padding: 2px 6px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--card);
    color: var(--ink-quiet);
    cursor: pointer;
}

.stolbtsy__strelka:hover {
    background: #eef0f3;
    color: var(--ink);
}

/* Отступ между пояснением и полем выбора под ним (владелец, 06.09.2026: «нет
   пробела до поля выбора частоты, сделай хотя бы минимальный отступ»). Текст,
   вплотную прижатый к полю, читается как подпись этого поля, а он о другом. */
.filter--otstup {
    margin-top: 12px;
}

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

/* ПОЛЯ, СТОЯЩИЕ СТОЛБИКОМ, РАЗДЕЛЕНЫ ЗАМЕТНО ШИРЕ, ЧЕМ ЧАСТИ ОДНОГО ПОЛЯ.
   Слово владельца 08.09.2026: «сделай отступы между полями в форме заведения
   клиентов и везде где также — не понятно к какому полю относится подпись,
   нижнему или верхнему». Внутри поля части стоят вплотную (gap 4 точки), между
   полями — 18: подпись притянута к своему полю расстоянием, а не догадкой.

   Правило не трогает панели отбора: там поля выстроены в строку через
   `display: flex` с общим `gap`, и вертикальный отступ сдвинул бы их вразнобой.
   Поэтому оно ограничено формами, где поля идут одно под другим. */
form:not(.filter) > .field + .field,
form:not(.filter) > .field + p,
form:not(.filter) > p + .field,
form:not(.filter) > .field + fieldset,
form:not(.filter) > fieldset + .field {
    margin-top: 18px;
}

/* АБЗАЦЫ ПОЯСНЕНИЯ ДРУГ ЗА ДРУГОМ — тоже нуждаются в отступе, не только поля
   формы. Слово владельца 13.09.2026 (снимок экрана «Интеграции»): «между
   полями нужно делать отступы, между текстом тоже, сейчас всё у тебя
   перемешано». Раньше `.quiet` (margin: 0) шёл сплошной стеной абзацев, и
   подпись первого поля формы сразу за ними читалась как продолжение того же
   текста, а не как подпись, — отсюда и первое его замечание «пропала фраза»,
   хотя она была на месте. */
.quiet + .quiet,
.quiet + form {
    margin-top: 12px;
}

/* ПРЕДПРОСМОТР ОФОРМЛЕННОГО ПИСЬМА. Письмо приходит со своей вёрсткой — своим
   полем, своей рамкой и своим серым полем вокруг, — и здесь оно показывается
   как есть, без правки: владелец пришёл посмотреть, что увидит клиент.
   Ограничение по высоте не ставится: письмо читается целиком. */
.pismo-vid {
    display: block;
    width: 100%;
    /* Высота до пересчёта скриптом: письмо длинное, и окно в двести точек
       показало бы одну шапку. Пересчёт — в `kabinet.js`. */
    height: 900px;
    border: 1px solid var(--line);
    border-radius: 8px;
    /* Серое поле вокруг письма — то же, что в почтовой программе: письмо и
       здесь должно выглядеть письмом, а не куском страницы. */
    background: #f2f2f4;
}

/* ОТКАЗ ПРОВЕРКИ ВИДЕН И СВЕРХУ, И У САМОГО ПОЛЯ (владелец, 08.09.2026:
   «написал название проекта кириллицей, он выдал ошибку, но ошибку в верхнем
   блоке незаметным текстом, поэтому я не мог понять, почему клиент не завелся;
   нужно, чтобы это сообщение выделялось красным и чтобы красным выделялась
   сама форма, которую нужно заполнить правильно»).

   Красный здесь — единственное место, где он уместен в этом деловом наборе:
   отказ обязан отличаться от подсказки, иначе его читают как пояснение. Общее
   правило «не нужно цветов» (06.09.2026) касалось украшений, а не отказов.

   `--otkaz` объявляется рядом, а не в общем наборе цветов: он нужен только
   формам и не должен попадаться на глаза в отчётах, где красным окрашено
   падение чисел. */
.oshibka {
    border: 1px solid #c0392b;
    border-left-width: 4px;
    border-radius: 8px;
    background: #fdf3f2;
    color: #7d241a;
    padding: 10px 14px;
    margin: 0 0 14px;
}

.field--oshibka input,
.field--oshibka textarea,
.field--oshibka select {
    border-color: #c0392b;
}

.field--oshibka .field__label {
    color: #7d241a;
}

.oshibka-stroka {
    font-size: 12px;
    line-height: 1.35;
    color: #7d241a;
}

/* ЗНАЧЕНИЕ, КОТОРОЕ ПОКАЗЫВАЕТСЯ, НО НЕ ПРАВИТСЯ, — стоит на месте поля и
   выглядит его частью, но без рамки: рамка обещала бы ввод. */
.pole-znachenie {
    margin: 0;
}

/* ПОДГРУППА ПОЛЕЙ ВНУТРИ РАЗДЕЛА ФОРМЫ — строка-пояснение, отделяющая часть
   полей от соседних (владелец, 08.09.2026: «дальше только то, что касается
   юрлиц… расчетные счета лучше выделить как-то визуально»).

   Тоньше подзаголовка и с чертой слева: это не новый раздел, а оговорка о том,
   кому следующие поля нужны, а кому их можно не заполнять. */
/* ПОДПИСЬ ПОДГРУППЫ ПОЛЕЙ — «только у организаций», «только для юрлиц».
   Разделение, которое она объявляет, читать НАДО, а не искать.

   Слово владельца 09.09.2026: «в карточке клиента специально отделено текстом,
   что поля КПП и юр. адрес только для юр. лиц. Правда сделано слишком мелко —
   передай 04, пусть поправит, сделает отступ».

   Цена мелкого шрифта названа не рассуждением, а случаем того же дня:
   направление 01 подписи не увидело и спросило у владельца юридический адрес
   для ИП, которого у ИП не бывает, — лишний вопрос ему и лишняя задача в
   списке. Поэтому здесь не косметика: размер поднят до основного текста, вес
   средний, отступ сверху вдвое больше, чем снизу, — подпись явно принадлежит
   тому, что под ней, а не тому, что над ней. Полоса слева стала заметнее и
   держит группу глазом. */
.podgruppa {
    margin: 26px 0 10px;
    padding: 8px 0 8px 12px;
    border-left: 3px solid var(--ink-quiet);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
}

/* ЗНАЧОК ПРАВКИ В СТРОКЕ СПИСКА (владелец, 08.09.2026: «значок слева от
   клиента, типа ручки»). Серый, как прочие служебные знаки; темнеет под
   указателем — по этому и видно, что на него можно нажать. */
.pravka {
    display: inline-flex;
    color: var(--ink-quiet);
}

.pravka svg {
    width: 17px;
    height: 17px;
}

.pravka:hover,
.pravka:focus {
    color: var(--ink);
}

/* Подпись под полем мельче самого поля: она объясняет, а не спрашивает.
   Прижата к своему полю сверху и отделена от следующего снизу. */
.field > .quiet {
    font-size: 12px;
    line-height: 1.35;
}

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

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

/* Выключатели и отметки округлению не подлежат: круглая рамка вокруг квадратной
   отметки — рамка вокруг рамки. */
input[type="checkbox"],
input[type="radio"] {
    border-radius: initial;
    padding: initial;
    min-height: initial;
}

/* Многострочное поле остаётся прямоугольным: у пилюли углы съедают первую и
   последнюю строку. */
textarea {
    border-radius: 10px;
}

/* РУЧНОГО УГОЛКА ИЗМЕНЕНИЯ РАЗМЕРА НЕТ — поле растёт само (владелец,
   08.09.2026: «поле проекты сделано с ручным перетаскиванием размера — не
   нужно, пусть автоматически меняется»).

   Высоту пересчитывает `kabinet.js` по содержимому. Скрытая прокрутка нужна
   именно для этого: пока она видна, браузер считает высоту содержимого вместе
   с полосой и поле подрастало бы на её ширину при каждом пересчёте.

   Без скрипта поле остаётся обычным, с числом строк из разметки: работать
   форма продолжает, просто не растёт. */
textarea {
    resize: none;
    overflow: hidden;
}

/* ОБВОДКА ФОКУСА — СЕРАЯ, А НЕ СИНЯЯ (владелец, 06.09.2026: «не нужно цветов,
   это деловой стиль»). Убирать её вовсе нельзя: по ней человек, идущий по
   странице с клавиатуры, видит, где он сейчас. Тёмно-серая заметна не хуже
   синей и не спорит с числами, ради которых экран открыт.

   Подсветку строки в раскрытом списке рисует сам браузер — она не наша и
   правке отсюда не поддаётся. */
input:focus,
select:focus {
    outline: 2px solid var(--ink-quiet);
    outline-offset: 1px;
}

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

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

/* КНОПКИ И ПОЛЯ — ОКРУГЛЫЕ (владелец, 06.09.2026: «у них нормально сделано
   выделение фоном, округлые кнопки — сделай похоже»). В кабинете Директа
   круглыми сделаны и кнопки, и поля отбора: круг отличает то, что нажимают, от
   того, что читают. Правится здесь разом для обоих разделов платформы —
   человек ходит по ним подряд, и два разных вида означали бы, что он каждый
   раз соображает, куда попал. */
/* КНОПКИ РАЗЛИЧАЮТСЯ ЦВЕТОМ ПО СМЫСЛУ ДЕЙСТВИЯ (владелец, 09.09.2026): «я не
   имел в виду, чтобы все кнопки сделать серыми… сделай все кнопки нормальных
   цветов, не сильно ярких, но чтобы было заметно, что кнопки. Нажать, допустим,
   сохранить — это какая-нибудь там синяя кнопка, а отменить — ну, оранжевая.
   Чтобы понятно было, что разные кнопки и визуально было понятно, куда жать,
   во всех разделах».

   ОТМЕНЁННЫЙ ДОВОД ОСТАЁТСЯ РЯДОМ С НОВЫМ — иначе через неделю отмену не
   отличить от ошибки. 06.09.2026 он же сказал: «все кнопки сделай похоже —
   небольшого размера, серым, не нужно цветов, это деловой стиль», и я снял
   разницу между главной и тихой целиком, сославшись на правило 46. Снял
   больше, чем было сказано: «серым» относилось к размеру и к крикливости, а
   не к запрету различать действия. Довод против цвета остаётся верным в своей
   части — синий во всю строку отбора уводит глаз от чисел, ради которых экран
   открыт; поэтому синяя здесь одна на экран, у главного действия, а не у
   каждой кнопки подряд.

   ЧЕТЫРЕ РОДА, БОЛЬШЕ НЕ ЗАВОДИТЬ. Пятый цвет ничего не различает, а требует
   от человека помнить таблицу:
     `.btn`            — главное действие экрана: сохранить, отправить,
                         подключить, показать. Синяя заливка.
     `.btn--quiet`     — второстепенное: перелистывание, отборы, «ещё».
                         Белая с серой рамкой.
     `.btn--otmena`    — отменить, вернуться, снять заявку. Оранжевая.
     `.btn--opasno`    — то, чего не вернуть: удалить, отвязать, отключить.
                         Красная.
   Цвет `.btn--off` (край перелистывания) — не род действия, а состояние.

   ВКЛЮЧЕНО 13.09.2026: синяя заливка у `.btn` — владелец прямо попросил
   («я просил сделать кнопки цветными, ты обещал сделать, но в итоге так и не
   сделал, займись кнопками тоже»), отсрочка от 09.09.2026 снята. Синяя кнопка
   на экране должна остаться одна — у главного действия; там, где рядом стоят
   несколько кнопок, второстепенным ставится `.btn--quiet` (белая с серой
   рамкой — тот же вид, что был у `.btn` раньше). */
.btn {
    display: inline-block;
    font: inherit;
    font-size: 14px;
    line-height: 1.2;
    padding: 7px 14px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    background: var(--accent);
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
}

.btn:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
}

/* Второстепенное действие — БЛЕДНО-СИНЯЯ, а не белая. Слово владельца
   14.09.2026: «кнопка в личном кабинете и в разделе интеграции „настройка за
   меня" не выделена цветом, я сказал все кнопки нужно выделить цветом… все
   кнопки, которые у нас остались с белым фоном, сделали стандартными синим
   либо розовым».

   ПОЧЕМУ БЛЕДНАЯ, А НЕ ТАКАЯ ЖЕ СИНЯЯ, КАК ГЛАВНАЯ. Его же слово 09.09.2026:
   «нормальных цветов, не сильно ярких, но чтобы было заметно, что кнопки».
   Насыщенная синяя на экране остаётся одна — у главного действия; вторая
   такая же спорила бы с ней за внимание, и человек перестал бы понимать,
   куда жать. Белая же не читалась как кнопка вовсе — с этого замечание и
   началось. */
.btn--quiet {
    background: #e9f1fc;
    color: #1a4f8a;
    border-color: #a9c8ec;
}

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

/* Отмена — оранжевая. Заливка бледная, рамка и буквы насыщенные: рядом с синей
   она обязана читаться как «другое действие», но не спорить с ней за внимание
   («не сильно ярких»). */
.btn--otmena {
    background: #fdf1e3;
    color: #9a5209;
    border-color: #e0a463;
}

.btn--otmena:hover {
    background: #f9e3ca;
}

/* Неотменимое — красная. Тот же бледно-красный, что у сорванного канала
   (`.switch--trevoga`): один цвет беды на весь кабинет, второго не заводим. */
.btn--opasno {
    background: #fdecea;
    color: var(--danger);
    border-color: #e0857e;
}

.btn--opasno:hover {
    background: #fadad6;
}

/* Край перелистывания: кнопка на месте, но никуда не ведёт. Ставится вместе с
   `--quiet`, поэтому цвет заливки здесь не переопределяется. */
.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;
}

/* Шапка отделена фоном, а не только чертой — как в кабинете Директа
   (снимок 20). При десятке столбцов одна черта теряется. */
.leads th {
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-quiet);
    background: var(--bg);
    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;
}

/* ЧИСЛА ПРИЖАТЫ ВПРАВО — все, а не только денежные (снимок 20). Столбец
   чисел читается сравнением разрядов: единицы под единицами. Прижатые влево,
   они заставляют сравнивать длину слова, а не величину. */
.col-num {
    text-align: right;
    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;
}

/* ОТСТУП ПЕРЕД ВТОРЫМ И СЛЕДУЮЩИМИ ЗАГОЛОВКАМИ БЛОКА. Слово владельца
   08.09.2026, проходя путь клиента: «между „Что и каким каналом слать“ сверху
   отступа вообще нет». На странице оповещений в одном блоке идут подряд шесть
   разделов, и без отступа заголовок прилипал к концу предыдущего. */
.block__title:not(:first-child) {
    margin-top: 28px;
}

.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(--ink-quiet);
    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: var(--stranica-uzkaya);
    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: var(--stranica-uzkaya);
    margin: 60px auto;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 28px;
}

/* ПОЛЯ УЖЕ КАРТОЧКИ, И ЭТО НЕ МЕЛОЧЬ. Слово владельца 14.09.2026: «сделай
   размер формы поменьше на ПК-версиях, чтобы у них было ограничение по ширине,
   а то на всю ширину этого экрана слишком большие поля для ввода и кнопки
   получаются».

   ПОЧЕМУ КАРТОЧКА ОСТАЁТСЯ ШИРЕ ФОРМЫ. В карточке живут не только поля: там
   заголовок, пояснение про платформу, реквизиты и ссылки на правовые
   страницы. Им ширина в 520 точек нужна — иначе текст ломается на короткие
   огрызки. Полю же ввода почты столько не нужно никогда: длинный адрес всё
   равно виден целиком, а пустое поле во всю карточку выглядит бланком, а не
   формой входа.

   ОГРАНИЧЕНИЕ СНИМАЕТСЯ НА УЗКИХ ЭКРАНАХ САМО: max-width меньше доступной
   ширины ничего не режет, а на телефоне доступная ширина и так меньше. */
.login__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 18px;
    max-width: 340px;
}

/* Кнопка «Войти» на странице платформы (корень домена рабочего места).
   Кнопка, а не ссылка строкой: это единственное действие страницы, и искать
   его глазами человек не должен. */
.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) {
    /* ПРОКРУЧИВАЕТСЯ ОБЁРТКА, А НЕ САМА ТАБЛИЦА (владелец, 09.09.2026).

       Прежде здесь стояло `display: block; overflow-x: auto` у самой таблицы.
       Это не работало: ширину таблице задаёт скрипт ширин столбцов, заданная
       ширина у блочного элемента становится его собственной, и таблица выходила
       за край страницы — прокручивалась вся страница целиком, а её ползунок
       браузер держит у нижнего края окна, ниже кнопок действий.

       Обёртка `.tablitsa-obertka` для этого и заведена, и прокрутку она несёт
       сама, безо всяких условий ширины экрана: её ползунок стоит сразу под
       таблицей. Здесь поэтому не осталось ничего — правило снято, а не
       заменено вторым таким же. Таблица остаётся таблицей: `display: block`
       ломал бы ей разметку столбцов заодно. */

    /* Две колонки карточки на узком экране становятся одной: сведения об
       источнике уходят под саму заявку, а не сжимаются в нечитаемый столбик. */
    .card {
        flex-direction: column;
        /* Промежуток между колонками нужен, пока они рядом. В столбце его роль
           уже исполняет собственный отступ блоков, и оставленный он давал бы
           между «Рекламой» и «Источником» шов шире, чем между всеми прочими
           блоками, — то есть читался бы разрывом. */
        gap: 0;
    }

    /* ГЛАВНАЯ КОЛОНКА ТЕРЯЕТ ЗАДАННУЮ ШИРИНУ (владелец, 09.09.2026, снимок с
       телефона: между «Рекламой» и «Источником» пустая полоса в пол-экрана).

       Причина не в отступах, а в том, что `flex: 1 1 620px` задаёт размер
       вдоль главной оси. Пока колонки стоят рядом, главная ось — ширина, и 620
       точек это ширина. Стоит развернуть карточку в столбец — та же строка
       начинает означать ВЫСОТУ: колонка получает 620 точек снизу и растягивает
       их, потому что `flex-grow` равен единице.

       Здесь она перестаёт распоряжаться высотой вовсе: высоту задаёт
       содержимое. То же самое и у соседней колонки строкой ниже. */
    .card__main {
        flex: 0 1 auto;
        width: 100%;
    }

    .card__aside {
        flex: 0 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);
}

/* ЦВЕТ ПЕРЕКЛЮЧАТЕЛЯ ГОВОРИТ, ДОХОДИТ ЛИ ОПОВЕЩЕНИЕ (владелец, 06.09.2026):
   «включённые каналы зелёным, выключенный серым, а если оба выключены — оба
   красным, то есть это будет аларм для клиента, что оповещения не настроены;
   когда один из них работает, он зелёный — значит всё работает нормально.
   „Почта уходит всегда“ — вместо синего бледный зелёный».

   Это единственное место в кабинете, где цвет остался после перехода на
   деловой серый, и остался он не для красоты: здесь цвет — не украшение
   кнопки, а состояние доставки, которое надо увидеть, не читая. */
.switch--on {
    background: #2e7d46;
    border-color: #2e7d46;
    color: #fff;
}

/* Ни один мессенджер не доносит это оповещение — красным помечены ОБА, и это
   не «выключено», а «не настроено». */
.switch--trevoga {
    background: #fdecea;
    border-color: var(--danger);
    color: var(--danger);
}

/* Почта: бледный зелёный. Она уходит всегда и выключателя не имеет, поэтому
   и цвет спокойнее — это не выбор, а состояние. */
.switch--vsegda {
    background: #eef7f1;
    border-color: #9ec7ac;
    color: #2e6b45;
}

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

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

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

   `min-width: 0` у значения — не украшение: элемент внутри `flex` по
   умолчанию не даёт себя сжать уже своего содержимого, и перенос без этой
   строки не срабатывает. */
/* Строка с ключом и значком копирования.

   СИНЕЙ РАМКИ БОЛЬШЕ НЕТ (владелец, 06.09.2026, снимок 22): «в мессенджере
   MAX, когда подключаешь, осталась непонятная синяя рамка снизу и с боков,
   надо её убрать». Рамка была цветной и без верхней стороны потому, что
   строка приклеивалась снизу к цветному абзацу «код одноразовый, живёт 72
   часа». Абзаца больше нет — подключение расписано шагами, — а рамка от него
   осталась и висела сама по себе, ничего не обозначая.

   ЗНАЧОК КОПИРОВАНИЯ СТОИТ ВПЛОТНУЮ К КЛЮЧУ, а не у правого края (его же
   слово): «символ копирования поднеси ближе к самому коду, потому что на ПК
   он уходит куда-то далеко вправо, и пользователь не увидит, что можно
   нажать». Поэтому ключ не растягивается на всю ширину (`flex: 0 1 auto`), а
   занимает столько, сколько занимает. */
.copyline {
    /* Рамка обнимает ключ, а не тянется во всю ширину: растянутая на всю
       строку, она читается как пустое поле ввода, в которое надо что-то
       вписать. */
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px 12px;
    margin-top: 0;
}

.copyline__value {
    flex: 0 1 auto;
    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;
    }

    /* ─────────── КАБИНЕТ НА ТЕЛЕФОНЕ (владелец, 06.09.2026) ───────────
       Дословно: «в ней сейчас всё расползается, кнопки почему-то улетают за
       пределы экрана, за пределы браузера; текст, размер шрифта не уменьшается
       и приходится далеко двигать ползунком». Телефон — основной способ входа,
       и правится это здесь, а не отдельным видом страницы: два вида одного
       экрана расходятся молча. */

    /* Буквы мельче: при ширине 360 точек шрифт в 16 пикселей даёт 22 знака в
       строке, и любая таблица уезжает вбок. Поля ввода при этом остаются
       шестнадцатью — правило Safari выше. */
    body {
        font-size: 15px;
    }

    /* Поля по краям на телефоне. Было 8 точек — владелец 06.09.2026 (снимок
       22): «в мобильной версии у нас очень маленькие поля слева и справа».
       Текст, начинающийся в восьми точках от края, читается как обрезанный, а
       на телефоне с изогнутым краем экрана и вправду подрезается. */
    .wrap--vo-vsyu {
        padding-left: 14px;
        padding-right: 14px;
    }

    /* КНОПКИ НЕ УЛЕТАЮТ ЗА КРАЙ. Формы отбора — в столбец во всю ширину:
       «Проект» с кнопкой «Показать» в строке не помещались и уезжали вправо
       вместе с полем. Правило было написано для `.periods`, но форма выбора
       проекта — `.filter`, и её оно не касалось. */
    .filter,
    .filter__actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .filter .btn,
    .filter select,
    .filter input {
        width: 100%;
    }

    /* Заголовок раздела и кнопка рядом с ним переносятся, а не сжимаются. */
    .head {
        flex-wrap: wrap;
    }

    .head--razdel {
        font-size: 18px;
    }

    /* Верхнее меню видов уезжает своей полосой, а не растягивает страницу.
       Три вкладки в строку на 360 точках не помещаются. */
    .kabinet-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 14px;
    }

    .kabinet-nav__link {
        white-space: nowrap;
    }

    /* Левое меню на телефоне уже стоит строкой (правило ниже, 700 точек).
       Здесь оно ещё и прокручивается: пунктов станет больше. */
    .razdely {
        overflow-x: auto;
    }

    /* Таблица: мельче буквы и уже отступы. Числа при этом остаются в одну
       строку — переносить их нельзя, разряды перестанут читаться. */
    .leads {
        font-size: 13px;
    }

    .leads th,
    .leads td {
        padding: 8px 8px;
    }

    /* Тянуть столбцы пальцем незачем: на телефоне таблица и так прокручивается,
       а ручка отнимала бы место у заголовка. */
    .leads__ruchka {
        display: none;
    }
}

/* Таблицы кабинета прокручиваются вбок так же, как таблица заявок: правило
   выше названо для `.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;
}

/* Мера НДС в заголовке — тем же кеглем, но спокойнее: это не второе название
   раздела, а уточнение к числам под ним. */
.head__mera {
    color: var(--ink-quiet);
    font-weight: 400;
}

/* ПОРЯДОК ДЕЙСТВИЙ — НУМЕРОВАННЫМИ ШАГАМИ (владелец, 06.09.2026): «я просил
   для меня делать нормальные инструкции, для клиента тем более — не нужно
   слишком подробно, просто по шагам: зайдите туда, введите это, получите то;
   лишней информации быть не должно».

   Было: один абзац, в котором вперемешку лежали действие, срок жизни ключа и
   предупреждение «сохраните, второй раз не покажется». Человек читал его целиком,
   чтобы понять, что от него хотят, — а хотят от него трёх нажатий. */
.shagi {
    margin: 10px 0;
    padding-left: 22px;
}

.shagi > li {
    margin-bottom: 10px;
}

.shagi .copyline {
    margin-top: 6px;
}

/* ─────────── ВТОРАЯ СТРОКА УПРАВЛЕНИЯ (владелец, 06.09.2026) ───────────
   Дословно: «второе сверху меню ты не сделал. Ты их сделал несколько пунктов
   в столбик, а нужно в горизонтальном виде… там нужно добавить период, выбор
   столбцов таблицы, выбор клиента».

   Один ряд, всё в нём — по образцу второй строки кабинета Директа (снимок 20):
   действие с краю, за ним отборы, справа выпадающий блок со столбцами.
   Переносится по ширине, а не сжимается: сжатый список показывает обрезанное
   название периода, и выбранное перестаёт читаться. */
.panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

/* Отборы — одной формой и одной кнопкой «Показать» (см. dashboard.blade.php). */
.panel__otbor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
}

/* Поле без подписи сверху: название живёт в `aria-label`, а на экране его
   говорит само выбранное значение — «Последние 30 дней». */
.panel .field--bez-podpisi {
    display: block;
}

/* Подписи «С» и «По» встают СЛЕВА от числа, а не над ним: над числом они
   поднимали бы ряд вдвое ради двух букв. */
.panel .field {
    display: flex;
    /* Именно строкой: общее правило `.field` ставит подпись НАД полем, и в
       ряду управления две буквы «С» и «По» поднимали бы его высоту вдвое. */
    flex-direction: row;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.panel .field__label {
    margin: 0;
    white-space: nowrap;
}

.panel .periods__own {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
}

/* Выпадающий блок столбцов: закрытый — такая же кнопка в ряду, открытый —
   занимает всю ширину под рядом, иначе список из полутора десятков строк
   сдавливался бы в остаток строки. */
.panel__vypadayushchiy > summary {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    list-style: none;
}

.panel__vypadayushchiy > summary::-webkit-details-marker {
    display: none;
}

/* ВЫПАДАЮЩИЙ БЛОК НАКРЫВАЕТ СОДЕРЖИМОЕ, А НЕ РАЗДВИГАЕТ РЯД (снимок 21):
   раздвигая ряд, он сдвигал бы вниз всю таблицу, и человек терял бы из виду
   строку, ради которой открыл список. */
.panel__vypadayushchiy {
    position: relative;
}

.vypadenie {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    min-width: 240px;
    max-width: min(92vw, 640px);
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--card);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}

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

.vypadenie__spisok {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Пункты — строками во всю ширину блока: нажимают по строке, а не по слову. */
.vypadenie__punkt {
    display: block;
    padding: 7px 10px;
    border-radius: 10px;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}

.vypadenie__punkt:hover {
    background: #eef0f3;
}

/* Где стоишь — галочкой и полужирным, как на снимке 21: цвет здесь не
   используется вовсе. */
.vypadenie__punkt--tut {
    font-weight: 600;
}

.vypadenie__punkt--tut::after {
    content: " ✓";
}

/* Свои даты стоят над списком и отделены чертой — «Указать период» у Яндекса
   стоит там же. */
.vypadenie__svoi {
    margin: 0 0 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.vypadenie__svoi .vypadenie__zagolovok {
    flex: 1 0 100%;
    margin: 0;
}

/* Список столбцов внутри выпадающего блока: он длинный, поэтому прокручивается
   сам, а не растягивает блок на весь экран. */
.vypadenie .stolbtsy {
    max-height: 50vh;
    overflow-y: auto;
}

/* Ряд управления на телефоне встаёт столбиком: список периода и два поля дат
   в строку не помещаются и уезжают за край. Блок стоит здесь, а не в общем
   мобильном разделе выше: правила панели объявлены ниже него и при равной
   силе перебили бы его порядком. */
@media (max-width: 600px) {
    .panel,
    .panel__otbor,
    .panel .periods__own {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    /* Поле целиком во всю ширину, а внутри него подпись остаётся слева от
       числа: «С 07.08.2026» читается одной строкой. */
    .panel .field {
        width: 100%;
    }

    .panel .field select,
    .panel .field input[type="date"] {
        flex: 1 1 auto;
        min-width: 0;
    }

    .panel .btn,
    .panel__vypadayushchiy > summary {
        width: 100%;
        justify-content: center;
    }
}

/* ШИРИНА ЛЕВОГО МЕНЮ — ПЕРЕМЕННОЙ, А НЕ ЧИСЛОМ В ПРАВИЛЕ. Её тянет мышью
   `public/js/kabinet.js` и запоминает в браузере человека (владелец,
   06.09.2026: «поле левого меню должно быть регулируемо по ширине»). Значение
   здесь — умолчание: без скрипта кабинет цел и выглядит как прежде. */
.kabinet {
    --razdely-shirina: 190px;
    --razdely-uzko: 60px;
    display: flex;
    align-items: flex-start;
    /* Свёрнутое меню стоит вплотную к содержимому — тянучки между ними нет
       (владелец, 06.09.2026: «в свёрнутом состоянии левые меню вплотную
       прижимаются к блоку с отчётами, сделай между ними отступ»). Развёрнутому
       отступ даёт сама тянучка, и там он меньше. */
    gap: 18px;
}

.kabinet--shiroko {
    gap: 6px;
}

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

/* ПОЛОСА ЗНАЧКОВ, РАЗВОРАЧИВАЮЩАЯСЯ В СЛОВА (владелец, 06.09.2026: «левое
   меню сделаны в виде значков… нужно сделать в виде значков с возможностью
   расширения в виде с описанием в виде текста»). Свёрнутая полоса отнимает у
   таблицы 60 точек вместо 190. */
.razdely {
    flex: 0 0 var(--razdely-uzko);
    width: var(--razdely-uzko);
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 4px;
}

.kabinet--shiroko .razdely {
    flex-basis: var(--razdely-shirina);
    width: var(--razdely-shirina);
}

/* Слова живут в разметке всегда — их читает голосом программа чтения с экрана
   и показывает `title` при наведении. Свёрнутая полоса их прячет, а не
   выбрасывает: значок без имени заставляет угадывать. */
.razdely__slovo {
    display: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kabinet--shiroko .razdely__slovo {
    display: block;
}

.razdely__znak {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
}

/* Кнопка разворота — первой строкой, на месте будущего значка: рука ищет её
   там же, где остальные. */
.razdely__shire {
    display: flex;
    align-items: center;
    gap: 10px;
    font: inherit;
    color: var(--ink-quiet);
    background: transparent;
    border: none;
    border-radius: 999px;
    padding: 8px 10px;
    margin-bottom: 6px;
    cursor: pointer;
    text-align: left;
}

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

/* ТЯНУЧКА между колонками. Полоса шире своей видимой черты: попасть в линию
   толщиной в точку мышью трудно, а пальцем нельзя вовсе. */
.kabinet__tyanuchka {
    display: none;
    flex: 0 0 12px;
    align-self: stretch;
    min-height: 120px;
    cursor: col-resize;
    background:
        linear-gradient(var(--line), var(--line)) center / 1px 100% no-repeat;
}

.kabinet__tyanuchka:hover,
.kabinet__tyanuchka:focus-visible {
    background:
        linear-gradient(var(--ink-quiet), var(--ink-quiet)) center / 3px 100% no-repeat;
    outline: none;
}

/* Пока тянут, выделение текста только мешает. */
.kabinet--shiroko .kabinet__tyanuchka {
    display: block;
}

body.tyanem {
    cursor: col-resize;
    user-select: none;
}

.razdely__link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink-quiet);
    text-decoration: none;
    padding: 8px 10px;
    border-radius: 999px;
}

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

/* Где стоишь — видно заливкой и жирным словом. В левом меню нельзя брать ту же
   черту, что в верхнем: черта под словом там означает «этот вид открыт», и два
   разных смысла у одного знака читаются как один. */
.razdely__link--here {
    background: var(--card);
    color: var(--ink);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--line);
}

/* На телефоне колонки становятся строками: 180 точек слева отняли бы у таблицы
   половину ширины. Возможности уходят наверх — они короче статистики. */
@media (max-width: 700px) {
    /* СТОЛБЦЫ СТАНОВЯТСЯ СТРОКАМИ — и ширину задаёт экран, а не содержимое.
       `align-items: flex-start` при вертикальном направлении сжимает каждую
       часть до её содержимого: широкая таблица растягивала область работы, и
       вместе с ней за край экрана уезжали поля отбора и кнопка «Показать»
       (владелец, 06.09.2026: «кнопки почему-то улетают за пределы экрана»).
       Найдено снимком в ширину телефона, а не чтением правил. */
    .kabinet {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .kabinet__glavnoe {
        width: 100%;
        max-width: 100%;
    }

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

    /* Тянуть ширину на телефоне нечего: колонки стали строками.

       ДВА КЛАССА, А НЕ ОДИН — иначе правило не срабатывает. Развёрнутое меню
       показывает тянучку правилом `.kabinet--shiroko .kabinet__tyanuchka`, а у
       него два класса против одного здесь. Условие ширины экрана силы правилу
       не добавляет, и на телефоне тянучка оставалась видимой: полоса в 120
       точек (её `min-height`) во всю ширину — ровно тот пустой промежуток
       между меню и содержимым, который владелец прислал снимком 09.09.2026.
       Меню развёрнуто по умолчанию с 08.09.2026, поэтому это видели все. */
    .kabinet__tyanuchka,
    .kabinet--shiroko .kabinet__tyanuchka {
        display: none;
    }
}

/* Показ готового письма клиенту (раздел «Клиенты»): текст письма — тот же,
   что уйдёт, поэтому переносится по словам, а не растягивает страницу вбок. */
.pismo {
    white-space: pre-wrap;
    word-break: break-word;
    font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: var(--paper-quiet, #f6f7f8);
    border: 1px solid var(--line, #e3e6ea);
    border-radius: 4px;
    padding: 12px 14px;
    margin: 8px 0 0;
}

/* Блок одной интеграции: состояние и действия стоят вместе, а не разными
   карточками — иначе кнопка читается как относящаяся к следующей интеграции
   (слово владельца 07.09.2026). */
.sostoyanie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
}
.block__podzagolovok {
    font-size: 15px;
    margin: 18px 0 8px;
}
.block > form { margin: 12px 0 0; }
.block > details { margin-top: 14px; }

/* СНИМОК ЭКРАНА В ИНСТРУКЦИИ. Кадры сняты в живом аккаунте amoCRM (08.09.2026),
   ширина у них разная — потому ограничивается не размер картинки, а её место:
   она не шире колонки и не тянется вверх больше, чем нужно шагу. */
.snimok {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 10px 0 4px;
    border: 1px solid var(--liniya, #e4e4e7);
    border-radius: 6px;
}

/* ЗАПИСЬ ПУТИ НА СТРАНИЦЕ ИНСТРУКЦИИ. Ширина ограничена местом, а не размером
   файла: запись снята окном 1440 точек и на узком экране должна ужиматься, а не
   рвать раскладку. */
.zapis {
    display: block;
    width: 100%;
    max-width: 900px;
    height: auto;
    margin: 8px 0 0;
    border: 1px solid var(--liniya, #e4e4e7);
    border-radius: 6px;
    background: #000;
}

/* ВЕРХ СПИСКА ЗАЯВОК: свёрнутый отбор слева, выбор количества и страницы
   справа — как на снимке Flexbe (владелец, 08.09.2026). */
.spisok-verh {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 12px 0 6px;
}

.spisok-verh .otbor { margin-right: auto; }
.spisok-verh .otbor > summary { cursor: pointer; list-style: none; }
.spisok-verh .otbor[open] > summary { margin-bottom: 10px; }

.po-skolku {
    display: flex;
    align-items: center;
    gap: 8px;
}

.po-skolku__pole {
    display: flex;
    align-items: center;
    gap: 6px;
}

.po-skolku__gde {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ПЛАШКА «ВЫ В ЧУЖОМ КАБИНЕТЕ». Заметная нарочно: владелец работает под
   учётной записью клиента, и спутать чужие данные со своими нельзя
   (08.09.2026). Цвет — предупреждающий, не тревожный: беды нет, но помнить
   надо. */
.chuzhoy-kabinet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 14px;
    padding: 10px 14px;
    border: 1px solid #f0c36d;
    border-radius: 8px;
    background: #fff8e6;
    color: #6b4f00;
}

/* ЗНАЧКИ ДЕЙСТВИЙ В ПЕРВОМ СТОЛБЦЕ — правка и вход, рядом (владелец,
   08.09.2026: «сделай кнопку входа рядом с кнопкой редактировать, в виде
   двери»). Форма нужна кнопке входа: вход меняет состояние и потому идёт
   отправкой, а не ссылкой; выглядеть она при этом должна так же, как ссылка
   правки рядом. */
.pravka-forma {
    display: inline;
    margin: 0;
}

button.pravka {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* СНИМОК В КАРТОЧКЕ ЗАЯВКИ — владелец 09.09.2026: «ссылки давать нужно и везде
   их показывать». Показывается уменьшенным; нажатие открывает файл целиком.
   Предел по высоте, а не по ширине: снимки приходят и вертикальными, и
   горизонтальными, и предел ширины у вертикального оставил бы полосу в
   пол-экрана. */
.snimok-vid {
    display: block;
    max-height: 220px;
    max-width: 100%;
    border-radius: 6px;
    border: 1px solid var(--line);
}

.snimok-ssylka {
    display: inline-block;
    margin-bottom: 4px;
}

.snimok-ssylka:focus-visible .snimok-vid {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

/* ЕСТЬ ЛИ ФОТОГРАФИЯ — столбец списка заявок (владелец, 09.09.2026). Узкий и
   без подписи словом: подпись «Фото» над одним значком шире самого значка. */
.col-foto {
    width: 34px;
    text-align: center;
}

.foto-est {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--ink-quiet);
}

.foto-est svg {
    width: 17px;
    height: 17px;
}

/* Число ставится, только когда снимков больше одного: «1» рядом со значком
   ничего не добавляет к самому значку. */
.foto-est__skolko {
    font-size: 11px;
}

/* ПИСЬМА КЛИЕНТУ (правило 89): две колонки — перечень слева, открытое письмо
   справа, одна кнопка под ним. Разметка и состояния — направления 04
   (`resources/views/crm/klient-pisma.blade.php`), здесь только вид: цвета,
   отступы и шрифты взяты у тех же величин, что и в остальном кабинете, своего
   набора не заводилось.

   ДВЕ КОЛОНКИ УСТРОЕНЫ ТЕМ ЖЕ ПРИЁМОМ, ЧТО У КАРТОЧКИ ЗАЯВКИ (`.card`,
   `.card__main`, `.card__aside`, выше по файлу): гибкая раскладка с фикс-
   ированной узкой колонкой и растущей широкой, на узком экране —
   столбцом. Перечень в разметке идёт первым, поэтому на телефоне он
   показывается первым сам, без отдельного правила порядка. */
.pisma {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.pisma__spisok {
    flex: 0 0 280px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pisma__pismo {
    flex: 1 1 620px;
    min-width: 0;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px 18px;
}

/* Строка перечня — та же форма, что у пункта левого меню кабинета
   (`.razdely__link`): скруглённая плашка, серый текст, при наведении светлее.
   Здесь она выше и в две строки: имени письма мало, нужно ещё состояние. */
.pismo-stroka {
    display: block;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid transparent;
    color: var(--ink);
    text-decoration: none;
    background: var(--card);
}

.pismo-stroka:hover {
    background: #eef0f3;
}

/* Открытое письмо — тем же приёмом, что у пункта «здесь» в левом меню
   (`.razdely__link--here`): заливка и обводка линией, без второго цвета. */
.pismo-stroka--vybrano {
    background: var(--card);
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}

.pismo-stroka__imya {
    display: block;
    font-weight: 600;
}

/* Читается с одного взгляда — заявка направления 02: состояние второй
   строкой, приглушённым цветом, как везде в кабинете (`.quiet`). */
.pismo-stroka__sostoyanie {
    display: block;
    margin-top: 2px;
    font-size: 13px;
}

@media (max-width: 900px) {
    .pisma {
        flex-direction: column;
        gap: 20px;
    }

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

    .pisma__spisok .pismo-stroka {
        flex: 1 1 220px;
    }

    .pisma__pismo {
        width: 100%;
    }
}