/*
    Оформление мини-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__who {
    margin-left: auto;
    margin-right: 16px;
    color: var(--ink-quiet);
    font-size: 14px;
}

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

/* Повтор — сведение, а не ошибка: заметно, но тише самой заявки. */
.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%;
    }
}