/* Start:/local/templates/logicloud_crm/css/app.css?1792100601135084*/
/* ============================================================
   CRM — прототип интерфейса
   Оформление унаследовано с logicloud.ru: Manrope, лаймовый
   акцент на чёрном тексте, тёмные блоки, пилюли и мягкие
   скругления, поля формы-подчёркивания.
   ============================================================ */

:root {
    /* Фирменный акцент. Единственное место правки под брендбук. */
    --accent: #ddf521;
    --accent-700: #cbe411;
    --accent-100: #f2fbc4;
    --accent-ink: #000000;

    /* Нейтральные */
    --ink: #000000;
    --ink-2: #2d2d2d;
    --muted: #8e8e8e;
    --line: #e5e5e5;
    --line-soft: #f0f0f0;
    --paper: #f6f6f6;
    --panel: #ffffff;
    --warm: #faf7f4;
    --dark: #212121;

    /* Сигналы сроков */
    --good: #2f9e5c;
    --good-100: #e3f5ea;
    --warn: #d68f00;
    --warn-100: #fbf0d9;
    --alert: #e5372b;
    --alert-100: #fce8e6;

    --ui: "Manrope", -apple-system, "Segoe UI", Roboto, sans-serif;

    --nav-w: 236px;
    --top-h: 68px;
    --r: 24px;
    --r-sm: 10px;
    --pill: 50px;
    --shadow: 0 2px 4px rgba(0, 0, 0, .03), 0 12px 32px rgba(0, 0, 0, .05);
    --shadow-lg: 0 24px 64px rgba(0, 0, 0, .16);
}

* {
    box-sizing: border-box;
}

/* Собственные правила компонентов (.field, .drawer и т. д.) задают display
   и перебивают браузерное [hidden] — возвращаем атрибуту приоритет. */
[hidden] {
    display: none !important;
}
html, body {
    height: 100%;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--ui);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 700;
    letter-spacing: -.02em;
}
p {
    margin: 0;
}
button, input, select, textarea {
    font: inherit;
    color: inherit;
}
a {
    color: inherit;
}

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

.eyebrow {
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--muted);
}

:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- Логотип и бренд-блок -------------------------------- */

/* В шаблоне Битрикса бренд-блок — ссылка на главную: подчёркивание,
   которое браузер рисует по умолчанию, здесь лишнее */
.brand {
    display: flex;
    align-items: baseline;
    gap: 10px;
    text-decoration: none;
}
.logo {
    height: 18px;
    width: auto;
    display: block;
}
.nav .logo {
    height: 15px;
}

.brand__suffix {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
}

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

/* Раскладка без бокового меню и шапки — страница входа и страница 404 */
.bare-page {
    background: var(--paper);
}

.error-404 {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 24px;
    text-align: center;
}
.error-404__code {
    font-size: 96px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--ink);
}
.error-404__text {
    margin-top: 12px;
    font-size: 15px;
    color: var(--muted);
    max-width: 360px;
}
@media (max-width: 480px) {
    .error-404__code {
        font-size: 64px;
    }
}

.auth {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.auth__card {
    width: min(392px, 100%);
    background: var(--panel);
    border-radius: 30px;
    padding: 40px 36px 36px;
    box-shadow: var(--shadow);
}

.auth__logo {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 34px;
    color: var(--ink);
}

/* Поля входа повторяют форму на сайте: метка сверху, крупный текст,
   тонкое подчёркивание вместо рамки. */
.auth__card .field {
    margin-bottom: 22px;
}
.auth__card .field > span {
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    margin-bottom: 2px;
}
.auth__card .input {
    border: 0;
    border-bottom: 1px solid var(--ink);
    border-radius: 0;
    padding: 8px 0;
    font-size: 20px;
    background: transparent;
}
.auth__card .input:focus {
    box-shadow: none;
    border-bottom-width: 2px;
    padding-bottom: 7px;
}

.field {
    display: block;
    margin-bottom: 16px;
}
.field > span {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-2);
    margin-bottom: 6px;
}

.input {
    width: 100%;
    padding: 11px 14px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    transition: border-color .2s, box-shadow .2s;
}
.input:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px var(--accent-100);
}
.input::placeholder {
    color: #bdbdbd;
}

/* Поле с автозаполнением из ФНС по ИНН (страница «Документы»): сдержанная
   отметка — тонкая акцентная полоса слева и подпись, что реквизиты
   подставятся сами. Строка .field__status под полем показывает ход поиска. */
.field--auto > span em {
    color: var(--muted);
    font-weight: 500;
}
.field--auto .input {
    box-shadow: inset 3px 0 0 var(--accent);
}
.field--auto .input:focus {
    box-shadow: inset 3px 0 0 var(--accent), 0 0 0 3px var(--accent-100);
}
.field__status {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.3;
    color: var(--muted);
    min-height: 15px;
}
.field__status[data-state="ok"]  { color: var(--good); }
.field__status[data-state="err"] { color: var(--alert); }

select.input {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
    background-position: right 16px center, right 11px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 32px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 24px;
    border: 1px solid transparent;
    border-radius: var(--pill);
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s, color .2s, border-color .2s;
}
.btn:hover {
    background: var(--accent-700);
}
.btn--wide {
    width: 100%;
    padding: 15px;
    margin-top: 10px;
    font-size: 15px;
}
.btn--ghost {
    background: var(--panel);
    color: var(--ink);
    border-color: var(--line);
}
.btn--ghost:hover {
    background: var(--paper);
    border-color: var(--ink);
}
.btn--dark {
    background: var(--dark);
    color: #fff;
}
.btn--dark:hover {
    background: #000;
}
.btn--sm {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
}
.btn--danger {
    background: transparent;
    color: var(--alert);
    border-color: var(--line);
}
.btn--danger:hover {
    background: var(--alert-100);
    border-color: var(--alert);
}
.btn--quiet {
    background: transparent;
    color: var(--muted);
    padding: 8px 14px;
}
.btn--quiet:hover {
    background: var(--paper);
    color: var(--ink);
}
.btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}
.btn:disabled:hover {
    background: var(--panel);
    border-color: var(--line);
}

.error {
    display: none;
    margin-bottom: 18px;
    padding: 11px 14px;
    background: var(--alert-100);
    border-radius: var(--r-sm);
    color: var(--alert);
    font-size: 13px;
}
.error.is-on {
    display: block;
}

/* ---------- Оболочка приложения --------------------------------- */

.shell {
    display: grid;
    grid-template-columns: var(--nav-w) 1fr;
    min-height: 100dvh;
}

.nav {
    background: var(--dark);
    color: #fff;
    padding: 0 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: sticky;
    top: 0;
    height: 100dvh;
}
.nav__top {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Блок с лого по высоте совпадает с шапкой контента (.top) и имеет такую
       же нижнюю границу, чтобы верхние края сайдбара и рабочей области были
       на одной линии. Отрицательные поля растягивают разделитель на всю
       ширину сайдбара (у .nav боковой padding 12px). */
    min-height: var(--top-h);
    flex: none;
    margin: 0 -12px 2px;
    padding: 0 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.nav .brand {
    /* Левый отступ логотипа равен внутреннему отступу пунктов меню (14px),
       чтобы лого и иконки меню стояли по одной вертикали. Справа паддинг
       убран — освобождаем место для бургера в узком сайдбаре. */
    padding: 0 0 0 14px;
    color: #fff;
    min-width: 0;
}
.nav .brand__suffix {
    color: rgba(255, 255, 255, .5);
}

.nav__list {
    display: flex;
    flex-direction: column;
    /* Зазор между блоками меню = gap списка (4px) + margin-top блока (16px) =
       20px, как в мобильном оверлее. Внутри блока пункты расставляет
       .nav__group (gap 2px). */
    gap: 4px;
    flex: 1;
    /* Первый пункт меню начинается не выше блока основного контента:
       шапка сайдбара (.nav__top) совпадает по высоте с шапкой контента
       (.top), а этот отступ выравнивает старт списка с верхним padding
       области .content (22px) за вычетом gap сайдбара. */
    margin-top: 10px;
    /* На невысоких десктопах пунктов меню может быть больше, чем влезает в
       экран: логотип и блок пользователя остаются на местах, а список
       прокручивается. min-height:0 обязателен — иначе flex-элемент не даёт
       себя сжать ниже содержимого и скролл не появляется. */
    min-height: 0;
    overflow-y: auto;
    /* Отступ и запас под тонкий скроллбар, чтобы он не налезал на счётчики. */
    margin-right: -6px;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
.nav__list::-webkit-scrollbar {
    width: 6px;
}
.nav__list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .22);
    border-radius: 3px;
}
.nav__list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, .35);
}
.nav__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    white-space: nowrap;
    border-radius: var(--pill);
    text-decoration: none;
    color: rgba(255, 255, 255, .7);
    font-weight: 500;
    transition: background-color .2s, color .2s;
}
.nav__link:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}
.nav__link[aria-current="page"] {
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 600;
}
/* Иконки пунктов меню 20×20 (и в развёрнутом, и в свёрнутом сайдбаре).
   Рисунки в сетке 16×16, поэтому линию уменьшаем (1.5 × 16/20 = 1.2),
   чтобы на экране она оставалась толщиной 1.5px. */
.nav__link svg {
    flex: none;
    width: 20px;
    height: 20px;
    stroke-width: 1.2;
}
.nav__count {
    margin-left: auto;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    opacity: .6;
}
.nav__link[aria-current="page"] .nav__count {
    opacity: .55;
}

.nav__user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 6px 2px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}
.nav__user b {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav__user .avatar {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}
.nav__out {
    background: none;
    border: 0;
    color: rgba(255, 255, 255, .6);
    cursor: pointer;
    padding: 7px;
    border-radius: 50%;
}
.nav__out:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.avatar {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--paper);
    color: var(--ink);
    font-size: 11px;
    font-weight: 600;
}
.avatar--sm {
    width: 22px;
    height: 22px;
    font-size: 9.5px;
}

.main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.top {
    min-height: var(--top-h);
    flex: none;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 12px 24px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 20;
    white-space: nowrap;
}
/* Элементы шапки не переносятся и не сжимаются — тянется только поиск. */
.top > * {
    flex: none;
}
.top h1 {
    font-size: 22px;
}
.top__meta {
    font-size: 12px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.top__spacer {
    flex: 1 1 12px;
    min-width: 12px;
}
.top .input {
    border-radius: var(--pill);
    padding: 9px 16px;
}
.top .btn {
    padding: 9px 20px;
}

/* Селекты в шапке — по ширине самого длинного пункта списка,
   но не шире 200 px: названия компаний бывают длинными. */
.top select.input {
    width: auto;
    min-width: 0;
    max-width: 200px;
    padding-right: 34px;
}

.search {
    position: relative;
    flex: 1 1 260px;
    min-width: 150px;
    max-width: 420px;
}

/* Группы инструментов в шапке («Поддержка»: свои для техподдержки и
   для хостинга). Обёртка нужна, чтобы прятать группу целиком при
   переключении вкладок, но сама она не должна становиться блоком —
   иначе .top перестаёт видеть её содержимое и раскладка разъезжается. */
.top__tools {
    display: contents;
}
/* display: contents перебивает атрибут hidden, поэтому скрытие
   задаём явно — иначе спрятанная группа продолжала бы показываться. */
.top__tools[hidden] {
    display: none;
}
.search .input {
    padding-left: 38px;
    width: 100%;
}
.search svg {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}

.table-meta {
    font-size: 12.5px;
    color: var(--muted);
    margin: 0 0 12px;
    padding-left: 2px;
}

.content {
    padding: 22px 24px 44px;
    flex: 1;
    min-width: 0;
}

/* ---------- Пульс контакта -------------------------------------- */

.pulse {
    display: grid;
    gap: 5px;
    min-width: 118px;
}
.pulse__track {
    position: relative;
    height: 4px;
    border-radius: 2px;
    background: var(--line);
}
.pulse__fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 2px;
    background: #d4d4d4;
}
.pulse__now {
    position: absolute;
    top: 50%;
    width: 3px;
    height: 12px;
    transform: translate(-1px, -50%);
    background: var(--ink);
    border-radius: 2px;
}
.pulse__labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.pulse__labels b {
    font-weight: 600;
    color: var(--ink);
}

.pulse[data-state="soon"] .pulse__fill {
    background: var(--accent);
}
.pulse[data-state="overdue"] .pulse__fill {
    background: #f3b7b2;
}
.pulse[data-state="overdue"] .pulse__now {
    background: var(--alert);
    height: 14px;
}
.pulse[data-state="overdue"] .pulse__labels b {
    color: var(--alert);
}

.pulse--lg {
    gap: 9px;
}
.pulse--lg .pulse__track {
    height: 6px;
    border-radius: 3px;
}
.pulse--lg .pulse__now {
    height: 18px;
    width: 3px;
}
.pulse--lg .pulse__labels {
    font-size: 12px;
}

/* ---------- Метки ------------------------------------------------ */

.tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 13px;
    border-radius: var(--pill);
    background: var(--paper);
    border: 1px solid transparent;
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
}
.tag--accent {
    background: var(--accent-100);
    color: var(--ink);
}
.tag--amber {
    background: var(--paper);
    color: var(--ink-2);
}
.tag--brick {
    background: var(--alert-100);
    color: var(--alert);
}
.tag--good {
    background: var(--good-100);
    color: var(--good);
}
.tag--warn {
    background: var(--warn-100);
    color: var(--warn);
}
/* Компактный тег — рядом с номером в плотных таблицах */
.tag--sm {
    padding: 2px 9px;
    font-size: 11px;
    margin-left: 8px;
}

/* Ячейка «Разница» на странице «Счета»: зелёный — оплачено (или пока
   ждём) быстро, жёлтый — пограничный срок, красный — просрочено. */
.pay-diff {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--pill);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}
.pay-diff--good {
    background: var(--good-100);
    color: var(--good);
}
.pay-diff--warn {
    background: var(--warn-100);
    color: var(--warn);
}
.pay-diff--alert {
    background: var(--alert-100);
    color: var(--alert);
}
.pay-diff--zero {
    background: var(--paper);
    color: var(--muted);
}
.tag--ghost {
    background: transparent;
    border-color: var(--line);
    color: var(--muted);
}

.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

/* ---------- Канбан ---------------------------------------------- */

/* Число колонок должно совпадать с длиной STAGES в data.js: добавили
   стадию «На проверке» — тут тоже нужно было поправить количество,
   иначе лишняя колонка сама уезжает на новую строку. */
.board {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

/* Доска сделок: шесть колонок; лишнее уезжает за край и возвращается
   прокруткой по наведению — своей полосы прокрутки у доски нет */
.board-viewport {
    position: relative;
}

.board--wide {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(276px, 1fr);
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.board--wide::-webkit-scrollbar {
    display: none;
}

/* У grid-элементов min-width по умолчанию auto: без сброса длинная
   строка в карточке раздвигала бы колонку и вылезала за её границы. */
.board--wide > .col {
    min-width: 0;
}

/* Зона у края: появляется, только когда в эту сторону есть что показать */
.board-edge {
    position: absolute;
    top: 0;
    bottom: 4px;
    width: 64px;
    display: flex;
    align-items: center;
    border: 0;
    padding: 0 8px;
    color: var(--ink);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
    z-index: 10;
}
.board-edge.is-on {
    opacity: 1;
    pointer-events: auto;
}
.board-edge--left {
    left: 0;
    justify-content: flex-start;
    background: linear-gradient(to right, var(--paper) 28%, rgba(246, 246, 246, 0));
}
.board-edge--right {
    right: 0;
    justify-content: flex-end;
    background: linear-gradient(to left, var(--paper) 28%, rgba(246, 246, 246, 0));
}
.board-edge svg {
    background: var(--panel);
    border-radius: 50%;
    padding: 7px;
    width: 32px;
    height: 32px;
    box-shadow: var(--shadow);
    transition: background-color .2s, color .2s;
}
.board-edge:hover svg {
    background: var(--accent);
    color: var(--accent-ink);
}

.col {
    background: var(--panel);
    border-radius: var(--r);
    display: flex;
    flex-direction: column;
    min-height: 240px;
    transition: background-color .2s, outline-color .2s;
    outline: 2px solid transparent;
    outline-offset: -2px;
}
.col.is-over {
    background: var(--accent-100);
    outline-color: var(--accent);
}

.col__head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 18px 18px 12px;
    min-width: 0;
}
.col__head h2 {
    font-size: 15px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.col__bar {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--muted);
}
.col[data-stage="new"] .col__bar {
    background: var(--accent);
}
.col[data-stage="progress"] .col__bar {
    background: var(--dark);
}
.col[data-stage="done"] .col__bar {
    background: #d4d4d4;
}
/* Стадии сделки: чем ближе к договору, тем темнее маркер */
.col[data-stage="contact"] .col__bar,
.col[data-stage="brief"] .col__bar {
    background: #b7c96a;
}
.col[data-stage="quote"] .col__bar {
    background: #6f7f3a;
}
.col[data-stage="deal"] .col__bar {
    background: var(--accent);
}
.col[data-stage="lost"] .col__bar {
    background: var(--alert);
}

.col__sum {
    padding: 0 18px 10px;
    font-size: 12px;
    color: var(--muted);
}

/* Отказ стоит особняком — это не стадия воронки, а её конец */
.col--lost {
    background: var(--warm);
}
.col--lost .col__bar {
    background: var(--alert);
}
.col--lost .col__head h2 {
    color: var(--alert);
}
.col--lost .task {
    background: var(--panel);
}
.col__n {
    margin-left: auto;
    font-size: 12px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.col__hours {
    font-size: 12px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.col__body {
    padding: 0 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.task {
    min-width: 0;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr);
    background: var(--warm);
    border-radius: 18px;
    padding: 15px 16px;
    cursor: grab;
    display: grid;
    gap: 10px;
    transition: box-shadow .2s, transform .2s;
}
.task:hover {
    box-shadow: var(--shadow);
}
.task.is-dragging {
    opacity: .4;
}
.task__top {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.task > *, .task__top > *, .task__foot > * {
    min-width: 0;
}
.task__client {
    font-size: 11.5px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.task__prio {
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
}
.task__prio[data-p="high"] {
    color: var(--alert);
}
.task__title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.28;
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
}
.task__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.task__due {
    font-size: 12px;
    color: var(--muted);
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}
/* Название услуги бывает длиннее колонки — обрезаем многоточием,
   а не даём ему растягивать строку шире карточки. Дата рядом (выше)
   не сжимается вовсе: короткая и важнее не потерять её из виду. */
/* text-overflow не работает на flex-контейнерах, а .tag — inline-flex
   по умолчанию (для варианта с иконкой). Здесь иконки нет, только
   текст услуги — переключаем на inline-block, чтобы многоточие
   реально сработало, а не просто числилось в стиле без эффекта. */
.task__foot .tag {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
}
.task__due[data-state="overdue"] {
    color: var(--alert);
    font-weight: 600;
}
.task__due[data-state="soon"] {
    color: var(--ink);
    font-weight: 600;
}

/* Факт рядом с оценкой: видно, уложились или нет */
.task__spent {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--pill);
    background: var(--accent-100);
    color: var(--ink);
    white-space: nowrap;
}
.task__spent.is-over {
    background: var(--alert-100);
    color: var(--alert);
}
/* Иконка «передать задачу» в строке исполнителя на карточке. */
.task__delegate {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--muted);
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
.task__delegate:hover {
    background: var(--accent-100);
    color: var(--ink);
}
.task .tag {
    background: var(--panel);
}
.task.is-done {
    background: var(--paper);
}
.task.is-done .task__title {
    color: var(--muted);
}

.col__more {
    font-size: 12px;
    color: var(--muted);
    text-align: center;
    padding: 6px 4px;
}

.col__empty {
    border: 1px dashed var(--line);
    border-radius: 18px;
    padding: 22px 14px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}

/* ---------- Таблица клиентов ------------------------------------ */

.top .btn--ghost {
    font-weight: 500;
}
.top .btn[aria-pressed="true"] {
    font-weight: 600;
}

.table-wrap {
    background: var(--panel);
    border-radius: var(--r);
    overflow: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 920px;
}
/* «Прочие расходы» на «Расходах и доходах» — узкая таблица в
   половинчатой карточке, глобальный min-width: 920px здесь только
   вредит, заставляя таблицу вылезать за пределы своей колонки. */
.table-wrap--narrow table {
    min-width: 0;
}

thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--panel);
    text-align: left;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--muted);
    padding: 18px 18px 12px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
tbody td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
}
tbody tr {
    cursor: pointer;
    transition: background-color .15s;
}
tbody tr:hover {
    background: var(--warm);
}
tbody tr[aria-selected="true"] {
    background: var(--accent-100);
}
tbody tr:last-child td {
    border-bottom: 0;
}

.cell-company b {
    display: block;
    font-weight: 600;
    font-size: 14.5px;
}
.cell-company span {
    font-size: 12px;
    color: var(--muted);
}
.cell-money {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-weight: 600;
}
.cell-mgr {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font-size: 13px;
}

.empty-state {
    padding: 56px 20px;
    text-align: center;
    color: var(--muted);
}
.empty-state b {
    display: block;
    color: var(--ink);
    margin-bottom: 4px;
    font-size: 16px;
}

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

.scrim {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(0, 0, 0, .4);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}
.scrim.is-on {
    opacity: 1;
    pointer-events: auto;
}
/* Формы задачи и клиента открываются поверх карточки клиента */
#taskScrim, #formScrim {
    z-index: 55;
}
#taskModal, #clientModal {
    z-index: 60;
}

.drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    width: min(540px, 100%);
    background: var(--panel);
    box-shadow: var(--shadow-lg);
    transform: translateX(101%);
    visibility: hidden;
    transition: transform .24s cubic-bezier(.32, .72, 0, 1), visibility .24s;
    display: flex;
    flex-direction: column;
}
.drawer.is-on {
    transform: none;
    visibility: visible;
}
.drawer[hidden] {
    display: none;
}

.drawer__head {
    padding: 26px 28px 20px;
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 12px;
}
.drawer__head .row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.drawer__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
}
.drawer__head h2 {
    font-size: 26px;
    line-height: 1.15;
    margin-top: 2px;
}
.drawer__head .sub {
    font-size: 13px;
    color: var(--muted);
    margin-top: 4px;
}
.drawer__close {
    padding: 8px 12px;
    font-size: 15px;
}

.drawer__body {
    padding: 22px 28px 32px;
    overflow: auto;
    display: grid;
    gap: 26px;
}

.kpis {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.kpi {
    background: var(--warm);
    border-radius: 18px;
    padding: 16px 18px;
}
.kpi b {
    display: block;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.kpi span {
    font-size: 12px;
    color: var(--muted);
}

.section {
    display: grid;
    gap: 12px;
}
.section > h3 {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}

.props {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 10px 16px;
    align-items: baseline;
}
.props dt {
    font-size: 13px;
    color: var(--muted);
    min-width: 0;
    overflow-wrap: anywhere;
}
.props dd {
    margin: 0;
    font-size: 14px;
    min-width: 0;
    overflow-wrap: anywhere;
}
.props dd a {
    color: var(--ink);
    text-decoration-color: var(--muted);
    text-underline-offset: 3px;
}
.props dd a:hover {
    text-decoration-color: var(--ink);
}
/* Реквизиты, счета и телефоны длинные — здесь важнее уместиться,
   чем сохранить строку целой */
.props .mono {
    font-variant-numeric: tabular-nums;
    white-space: normal;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.drawer__foot {
    margin-top: auto;
    padding: 16px 28px;
    border-top: 1px solid var(--line);
    display: flex;
    gap: 8px;
    background: var(--panel);
}

/* ---------- Модальное окно -------------------------------------- */

.modal {
    position: fixed;
    z-index: 50;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -46%);
    width: min(480px, calc(100% - 32px));
    max-height: calc(100dvh - 48px);
    overflow: auto;
    background: var(--panel);
    border-radius: 30px;
    box-shadow: var(--shadow-lg);
    padding: 28px;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity .18s, transform .18s, visibility .18s;
}
.modal.is-on {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translate(-50%, -50%);
}
.modal h2 {
    font-size: 22px;
    margin-bottom: 20px;
}
.modal__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.modal__head h2 {
    margin-bottom: 0;
}
.modal__head .btn {
    margin-left: auto;
    flex: none;
}
.modal__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
/* Гибкая строка: сколько полей показано, столько и колонок (скрытые
   display:none выпадают из потока). Нужна там, где в одной строке живут
   поля, видимые при разных типах документа: одно поле занимает всю
   ширину, два — делят её поровну. */
.modal__row--flex {
    display: flex;
    gap: 12px;
}
.modal__row--flex > .field {
    flex: 1 1 0;
    min-width: 0;
}
.modal__foot {
    display: flex;
    gap: 8px;
    margin-top: 22px;
}
.modal__foot .btn--ghost {
    margin-left: auto;
}
/* Деструктивное действие в подвале модалки — прижато вправо. */
.modal__foot .modal__foot-end {
    margin-left: auto;
}

.stage-switch {
    display: flex;
    gap: 6px;
}
.stage-switch button {
    flex: 1;
    padding: 10px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--line);
    border-radius: var(--pill);
    background: var(--panel);
    cursor: pointer;
    transition: background-color .2s, border-color .2s;
}
.stage-switch button:hover {
    border-color: var(--ink);
}
.stage-switch button[aria-pressed="true"] {
    background: var(--accent);
    border-color: var(--accent);
    font-weight: 600;
}

/* Широкая форма клиента с группами полей */
.modal--wide {
    width: min(620px, calc(100% - 32px));
}
.modal--narrow {
    width: min(400px, calc(100% - 32px));
}
/* Форма задачи — шире обычной (~1.5×), чтобы поля «Клиент … Приоритет»
   встали в две строки по три столбца. */
.modal--task {
    width: min(720px, calc(100% - 32px));
}
.modal__grid3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
@media (max-width: 560px) {
    /* На узких экранах — в один столбец, поля не жмутся. */
    .modal__grid3 {
        grid-template-columns: 1fr;
    }
}

.spent__task {
    margin-bottom: 18px;
}
.spent__task b {
    display: block;
    font-size: 15px;
    font-weight: 600;
    overflow-wrap: anywhere;
}
.spent__task span {
    font-size: 12.5px;
    color: var(--muted);
}

.form-group {
    margin-bottom: 22px;
}
.form-group > h3 {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line-soft);
}

textarea.input {
    resize: vertical;
    min-height: 72px;
    line-height: 1.45;
}
/* Описание сделки бывает длинным: поле стартует крупным и растёт под текст */
.input--note {
    min-height: 120px;
}
/* Поле только для чтения, высота = высоте текста (ставит JS по scrollHeight). */
.input--note.is-fit {
    min-height: 0;
    resize: none;
    overflow: hidden;
}

/* Вложения: общий блок для форм лида, задачи канбана и задачи проекта */
.attach {
    display: grid;
    gap: 8px;
}
.attach__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
}
.attach__empty {
    font-size: 12.5px;
    color: var(--muted);
}
.attach__row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--warm);
    border-radius: var(--r-sm);
    color: var(--ink-2);
}
.attach__row svg {
    flex: none;
    color: var(--muted);
}
.attach__name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.attach__size {
    flex: none;
    font-size: 11.5px;
    color: var(--muted);
}
.attach .btn {
    justify-self: start;
}

/* Поле выбора файла без нативной кнопки: «призрачная» кнопка + имя файла
   (многоточие на длинном), крестик очистки — в общем стиле форм.
   Это же — зона drag-n-drop: пунктирная рамка подсказывает, что файл можно
   перетащить; при наведении перетаскиваемого файла зона подсвечивается. */
.file-pick {
    border: 1px dashed var(--line);
    border-radius: var(--r-sm);
    padding: 10px 12px;
    transition: border-color .15s, background-color .15s;
}
.file-pick.is-dragover {
    border-color: var(--accent);
    background: var(--accent-100);
}
.file-pick.is-dragover * {
    pointer-events: none;   /* чтобы dragleave не срабатывал на внутренних элементах */
}
.file-pick__name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.file-pick__name.is-empty {
    color: var(--muted);
}

/* Выбор услуг пилюлями — как в форме заявки на сайте */
.chips--pick {
    gap: 8px;
}
.chip-check {
    cursor: pointer;
}
.chip-check input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.chip-check span {
    display: inline-block;
    padding: 9px 18px;
    border-radius: var(--pill);
    background: var(--paper);
    color: var(--muted);
    font-size: 13px;
    transition: background-color .2s, color .2s;
}
.chip-check:hover span {
    background: var(--line);
    color: var(--ink);
}
.chip-check input:checked + span {
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 600;
}
.chip-check input:focus-visible + span {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

/* ---------- Аналитика -------------------------------------------- */

.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.kpi--lg {
    background: var(--panel);
    border-radius: var(--r);
    padding: 22px 24px;
}
.kpi--lg b {
    font-size: 26px;
    line-height: 1.1;
}
.kpi--lg span {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--muted);
}
.kpi--alert b {
    color: var(--alert);
}
.kpi--good b {
    color: var(--good);
}
.kpi__note {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: var(--muted);
}
.kpi__note b {
    display: inline;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink);
}

.card {
    background: var(--panel);
    border-radius: var(--r);
    padding: 22px 24px 24px;
    margin-bottom: 16px;
}
.card__head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}
.card__head h2 {
    font-size: 17px;
}
.card__sub {
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 4px;
}
.card__head .stage-switch {
    margin-left: auto;
    flex: none;
}
.card__empty {
    color: var(--muted);
    font-size: 13px;
}

.stage-switch--sm button {
    padding: 7px 16px;
    font-size: 12.5px;
    flex: none;
}

.cards-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
}
.cards-2 .card {
    margin-bottom: 16px;
}

.bars {
    display: grid;
    gap: 18px;
}
.bar-row__head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 7px;
}
.bar-row__label {
    font-size: 14px;
    font-weight: 600;
}
.bar-row__head b {
    margin-left: auto;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}
.bar {
    display: flex;
    height: 10px;
    border-radius: 5px;
    background: var(--paper);
    overflow: hidden;
}
.bar__fill {
    background: var(--accent);
    border-radius: 5px;
    transition: width .3s;
}
.bar__fill--dark {
    background: var(--dark);
}
.bar--stack .bar__fill {
    border-radius: 0;
}
.bar--stack .bar__fill:first-child {
    border-radius: 5px 0 0 5px;
}
.bar--stack .bar__fill:last-child {
    border-radius: 0 5px 5px 0;
    opacity: .55;
}
.bar-row__meta {
    margin-top: 7px;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
}

.table-plain {
    display: grid;
    gap: 2px;
}
.plain-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line-soft);
}
.plain-row:last-child {
    border-bottom: 0;
}
.plain-row__main {
    min-width: 0;
    flex: 1;
}
.plain-row__main b {
    display: block;
    font-size: 14px;
    font-weight: 600;
}
.plain-row__main span {
    font-size: 12px;
    color: var(--muted);
}
.plain-row__side {
    text-align: right;
    white-space: nowrap;
}
.plain-row__side b {
    font-size: 14px;
    font-weight: 700;
}
.plain-row__flag {
    display: block;
    font-size: 11.5px;
    color: var(--alert);
    font-weight: 600;
}

.contact-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.contact-col__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.contact-col__head b {
    margin-left: auto;
    font-size: 15px;
}
.contact-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 12px;
    margin-bottom: 4px;
    border-radius: 12px;
    background: var(--warm);
    font-size: 13px;
    text-decoration: none;
}
.contact-item:hover {
    background: var(--accent-100);
}
.contact-item span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.contact-item b {
    font-size: 12.5px;
    color: var(--muted);
}
.contact-more {
    font-size: 12px;
    color: var(--muted);
    padding: 4px 12px;
}

@media (max-width: 1080px) {
    .kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }
    .cards-2, .contact-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .kpi-row {
        grid-template-columns: 1fr;
    }
    .card {
        padding: 18px 18px 20px;
    }
    .card__head {
        flex-wrap: wrap;
    }
    .card__head .stage-switch {
        margin-left: 0;
        width: 100%;
    }
}

/* ---------- Документы -------------------------------------------- */

.doc-layout {
    display: grid;
    /* Поровну: «Сформировать документ» и «Архив клиента» по 50%. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.doc-layout .card {
    margin-bottom: 0;
    /* grid-элемент: без min-width:0 карточка раздувается под min-content
       своего содержимого (строка архива с кнопкой «В ЭДО») и вылезает за
       колонку на узких экранах. */
    min-width: 0;
}

/* «Расходы и доходы»: три блока в один ряд на широком экране,
   друг под другом — на узком. Классической таблицы здесь нет:
   в узкой колонке она не помещается, вместо неё компактные строки. */
.cashflow-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}
.cashflow-grid .card {
    margin-bottom: 0;
}

@media (max-width: 1240px) {
    .cashflow-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 820px) {
    .cashflow-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Компактная строка вместо табличной: заголовок с суммой сверху,
   поля ввода — во второй строке, чтобы влезало в узкую колонку. */
.fin-list {
    display: grid;
    gap: 8px;
    padding: 4px 0 20px;
}

.fin-row {
    display: grid;
    gap: 8px;
    padding: 11px 13px;
    border-radius: 14px;
    background: var(--warm);
    transition: background-color .15s;
}
.fin-row:hover {
    background: var(--paper);
}

.fin-row__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}
.fin-row__main {
    flex: 1;
    min-width: 0;
}
.fin-row__main b {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fin-row__main span {
    font-size: 11.5px;
    color: var(--muted);
}
.fin-row__sum {
    flex: none;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fin-row__fields {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
.fin-field {
    display: grid;
    gap: 3px;
    flex: 1 1 96px;
    min-width: 0;
}
.fin-field > span {
    font-size: 11px;
    color: var(--muted);
}
.fin-field .cell-input {
    min-width: 0;
    background: var(--panel);
    border-color: var(--line);
}
.fin-field .cell-input:focus {
    border-color: var(--ink);
}
/* Подпись под строкой расхода: сколько уже оплачено ранее (paidAmount). */
.fin-row__note {
    margin: 4px 0 0;
    font-size: 11px;
    color: var(--muted);
}
/* Кнопка-ссылка «↻ авто» — вернуть сальдо/остаток к автоматическому расчёту. */
.fin-auto {
    border: 0;
    background: none;
    padding: 0;
    margin-left: 4px;
    font: inherit;
    font-size: 11px;
    color: var(--ink-2);
    cursor: pointer;
    text-decoration: underline;
}
.fin-auto:hover {
    color: var(--ink);
}
/* Разбивка остатка сотрудника: перенос с прошлого месяца и начисление
   текущего. Две компактные подписи в строку. */
.fin-row__split {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: -2px 0 2px;
}
.fin-row__split span {
    font-size: 11.5px;
    color: var(--muted);
}
.fin-row__split b {
    margin-left: 5px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
/* Компактный чекбокс-поле «Оплачено» в строке прочего расхода. */
.fin-field--check {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    align-self: end;
    padding-bottom: 7px;
    cursor: pointer;
    white-space: nowrap;
}
.fin-field--check > span {
    font-size: 12px;
    color: var(--ink);
}
.fin-field--check input {
    width: 16px;
    height: 16px;
    flex: none;
    accent-color: var(--accent);
    cursor: pointer;
}
.fin-row .row-del {
    flex: none;
}

/* Строка «прочего расхода»: сетка вместо flex-wrap, чтобы «Оплачено» и ✕
   всегда стояли ровно. Широко — всё в одну линию, по центру высоты полей;
   узко (контейнер < 360px) — Статья+Сумма сверху, ниже «Оплачено» слева
   и ✕ справа на одной оси. Высота поля задана явно (--fin-ctl-h), чтобы
   центрирование не зависело от шрифта. */
.fin-row[data-expense] {
    --fin-ctl-h: 40px;
    container-type: inline-size;
}
.fin-row[data-expense] .fin-row__fields {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto auto;
    align-items: end;
    gap: 8px;
}
.fin-row[data-expense] .cell-input {
    height: var(--fin-ctl-h);
    min-width: 0;
}
.fin-row[data-expense] .fin-field--check {
    align-self: end;
    height: var(--fin-ctl-h);
    padding-bottom: 0;
}
.fin-row[data-expense] .row-del {
    align-self: end;
    margin-bottom: calc((var(--fin-ctl-h) - 28px) / 2);
}
@container (max-width: 359px) {
    .fin-row[data-expense] .fin-row__fields {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        row-gap: 4px;
    }
    .fin-row[data-expense] .fin-field--check {
        grid-column: 1;
        justify-self: start;
        align-self: center;
        height: 28px;
    }
    .fin-row[data-expense] .row-del {
        grid-column: 2;
        justify-self: end;
        align-self: center;
        margin-bottom: 0;
    }
}

.fin-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 20px;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--accent-100);
}
.fin-total span {
    font-size: 12.5px;
    font-weight: 600;
}
.fin-total b {
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fin-add {
    margin: 0 0 20px;
}
.fin-add button {
    width: 100%;
    padding: 11px 14px;
    border: 1px dashed var(--line);
    border-radius: 14px;
    background: transparent;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}
.fin-add button:hover {
    background: var(--accent-100);
    border-color: var(--accent);
    border-style: solid;
    color: var(--ink);
}

/* ---------- Графики на «Расходах и доходах» ------------------------- */
/* Колонки рисуем на CSS, без библиотеки: данных мало, а свой график
   проще подогнать под сетку и цвета шаблона, чем чужой. */

.chart {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    height: 190px;
    padding: 8px 0 0;
}
.chart__col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
    height: 100%;
}
.chart__bars {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    width: 100%;
}
.chart__bar {
    flex: 1;
    border-radius: 6px 6px 0 0;
    min-height: 3px;
    transition: opacity .15s;
}
.chart__bar--income {
    background: var(--accent);
}
.chart__bar--expense {
    background: var(--dark);
}
.chart__col:hover .chart__bar {
    opacity: .82;
}
/* Годовой график: 12 месяцев в ряд — компактнее и с горизонтальной
   прокруткой на узких экранах, чтобы подписи сумм не наезжали. */
.chart--year {
    gap: 7px;
    overflow-x: auto;
}
.chart--year .chart__col {
    min-width: 46px;
}
.chart--year .chart__bars {
    gap: 2px;
}
.chart--year .chart__label {
    font-size: 10px;
}
.chart--year .chart__label b {
    font-size: 10.5px;
}
.chart__label {
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
}
.chart__label b {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink);
}
.chart__col.is-current .chart__label b {
    color: var(--accent-700);
}

.chart-legend {
    display: flex;
    gap: 16px;
    margin-top: 14px;
}
.chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--muted);
}
.chart-legend i {
    width: 12px;
    height: 12px;
    border-radius: 4px;
}
.chart-legend i.is-income {
    background: var(--accent);
}
.chart-legend i.is-expense {
    background: var(--dark);
}
/* Направления (график «Направления по месяцам») — три цвета из палитры,
   сгруппированные столбики по каждому месяцу. */
.chart-legend i.is-support {
    background: var(--accent);
}
.chart-legend i.is-project {
    background: var(--dark);
}
.chart-legend i.is-promo {
    background: var(--warn);
}
.chart__bar--support {
    background: var(--accent);
}
.chart__bar--project {
    background: var(--dark);
}
.chart__bar--promo {
    background: var(--warn);
}

/* История выплат по неделям */
/* Строки лежат внутри группы, а gap у .fin-list достаётся только его
   прямым детям — поэтому расстояние между строками задаём здесь. */
.week-group {
    display: grid;
    gap: 8px;
    margin-bottom: 22px;
}
.week-group:last-child {
    margin-bottom: 0;
}
.week-group__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 2px;
}
.week-group__head b {
    font-size: 13.5px;
    font-weight: 700;
}
.week-group__head span {
    font-size: 12px;
    color: var(--muted);
}

/* Карточка выбора клиента над обеими колонками */
.card--pick {
    display: flex;
    align-items: flex-end;
    gap: 18px;
    flex-wrap: wrap;
    padding: 18px 24px 20px;
}
.pick-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 4px;
}

/* Поле с поиском по списку */
.combo {
    position: relative;
    width: min(420px, 100%);
}
.combo .field {
    margin-bottom: 0;
}
.combo__list {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    margin: 0;
    padding: 6px;
    list-style: none;
    max-height: 320px;
    overflow: auto;
    background: var(--panel);
    border-radius: 18px;
    box-shadow: var(--shadow);
}
.combo__opt {
    padding: 9px 14px;
    border-radius: 12px;
    cursor: pointer;
}
.combo__opt b {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
}
.combo__opt span {
    font-size: 11.5px;
    color: var(--muted);
}
.combo__opt[data-active] {
    background: var(--warm);
}
.combo__opt[aria-selected="true"] {
    background: var(--accent-100);
}
.combo__opt[aria-selected="true"][data-active] {
    background: var(--accent);
}
.combo__empty {
    padding: 12px 14px;
    font-size: 13px;
    color: var(--muted);
}

.row-inline {
    display: flex;
    gap: 8px;
    align-items: center;
}
.row-inline .input {
    flex: 1;
    min-width: 0;
}
.row-inline .btn {
    flex: none;
}

.req-card {
    background: var(--warm);
    border-radius: 18px;
    padding: 16px 18px;
    margin-bottom: 18px;
    min-width: 0;
    overflow-wrap: anywhere;
}
/* Пустая карточка реквизитов (клиент не выбран) — не показываем
   пустую плашку. */
.req-card:empty {
    display: none;
}
.props--tight {
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 6px 14px;
}
.props--tight dt {
    font-size: 12px;
}
.props--tight dd {
    font-size: 12.5px;
}

.note {
    font-size: 12px;
    color: var(--muted);
    margin-top: 12px;
    text-align: center;
}

/* Архив: год → месяц → тип */
.archive {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

.arch-year {
    border-top: 1px solid var(--line);
}
.arch-year > summary,
.arch-month > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    list-style: none;
    padding: 12px 4px;
}
.arch-year > summary::-webkit-details-marker,
.arch-month > summary::-webkit-details-marker {
    display: none;
}
.arch-year > summary::before,
.arch-month > summary::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: none;
    border-right: 1.6px solid var(--muted);
    border-bottom: 1.6px solid var(--muted);
    transform: rotate(-45deg);
    transition: transform .2s;
}
.arch-year[open] > summary::before,
.arch-month[open] > summary::before {
    transform: rotate(45deg);
}
.arch-year > summary span {
    font-size: 17px;
    font-weight: 700;
}
.arch-year > summary b {
    margin-left: auto;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--muted);
}

.arch-year__body {
    padding: 0 0 10px 18px;
}
.arch-month {
    border-top: 1px solid var(--line-soft);
}
.arch-month > summary {
    padding: 9px 4px;
}
.arch-month > summary span {
    font-size: 13.5px;
    font-weight: 600;
}
.arch-month > summary b {
    margin-left: auto;
    font-size: 12px;
    color: var(--muted);
    font-weight: 500;
}
.arch-month__body {
    padding: 2px 0 12px 18px;
    display: grid;
    /* колонка 0..1fr + min-width:0 у групп — чтобы строки документов
       ужимались под ширину карточки, а не растягивали её. */
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}
.arch-type {
    min-width: 0;
}

.arch-type__title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}

.arch-doc {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    margin-bottom: 4px;
    background: var(--warm);
    border: 0;
    border-radius: 14px;
    text-align: left;
    cursor: pointer;
    transition: background-color .2s;
}
.arch-doc:hover {
    background: var(--accent-100);
}
.arch-doc__num {
    flex: none;
    font-size: 12px;
    color: var(--muted);
    /* не фиксированные 92px: на узкой колонке они съедали место у названия.
       Короткий номер выравнивается по min-width, длинный — растёт по тексту. */
    width: auto;
    min-width: 44px;
    white-space: nowrap;
}
.arch-doc__main {
    flex: 1;
    min-width: 0;
}
.arch-doc__main b {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.arch-doc__main > span {
    font-size: 11.5px;
    color: var(--muted);
}
.arch-doc__side {
    flex: none;
    text-align: right;
}
.arch-doc__side b {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
}
.arch-doc__side span {
    font-size: 11.5px;
    color: var(--muted);
}
/* Строка документа = кнопка скачивания (занимает всю ширину) + кнопка
   удаления, проявляющаяся при наведении. */
.arch-doc__open {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    overflow: hidden;   /* страховка: содержимое не наезжает на кнопку «В ЭДО» */
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.arch-doc__open--nofile {
    cursor: default;
    opacity: .65;
}
/* Выгрузка в ЭДО Saby: компактная кнопка; после выгрузки — спокойная отметка. */
.arch-doc__saby {
    flex: none;
    border: 1px solid var(--line);
    border-radius: var(--pill);
    background: var(--panel);
    color: var(--ink-2);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1;
    padding: 5px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s;
}
.arch-doc__saby:hover {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent);
}
.arch-doc__saby:disabled {
    opacity: .6;
    cursor: default;
}
.arch-doc__saby.is-done {
    border-color: transparent;
    background: var(--good-100, var(--warm));
    color: var(--good);
    cursor: default;
}
.arch-doc__del {
    flex: none;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s, background .15s, color .15s;
}
.arch-doc:hover .arch-doc__del,
.arch-doc__del:focus-visible {
    opacity: 1;
}
.arch-doc__del:hover {
    background: var(--alert-100);
    color: var(--alert);
}

@media (max-width: 1080px) {
    .doc-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .arch-year__body, .arch-month__body {
        padding-left: 8px;
    }
    /* На узких экранах карточка раскладывается в две строки: сверху —
       номер + название/клиент + сумма/дата на всю ширину, снизу — действия
       (ЭДО и удаление). Так название не схлопывается до «Заявк…», а клиент
       и сумма не наезжают друг на друга. */
    .arch-doc {
        flex-wrap: wrap;
        row-gap: 10px;
        padding: 12px 14px;
    }
    .arch-doc__open {
        flex: 1 1 100%;
        gap: 10px;
        align-items: flex-start;
        overflow: visible;   /* на мобильных не обрезаем — ряд и так полный */
    }
    .arch-doc__num {
        width: auto;
        padding-top: 1px;
    }
    .arch-doc__main {
        flex: 1;
        min-width: 0;
    }
    /* Название и клиент — по одной строке каждый, с усечением вместо переноса. */
    .arch-doc__main b,
    .arch-doc__main > span {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .arch-doc__side {
        flex: none;
        margin-left: auto;
        text-align: right;
    }
    /* Вторая строка: ЭДО и удаление прижаты вправо. */
    .arch-doc__saby {
        margin-left: auto;
    }
    .arch-doc__saby + .arch-doc__del {
        margin-left: 0;
    }
    /* На тач-устройствах нет наведения — кнопку удаления показываем всегда. */
    .arch-doc__del {
        margin-left: auto;
        opacity: 1;
    }
}

/* ---------- Воронка ---------------------------------------------- */

.funnel {
    display: grid;
    gap: 20px;
}
.funnel-step__head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
}
.funnel-step__title {
    font-size: 15px;
    font-weight: 700;
}
.funnel-step__head b {
    font-size: 15px;
    font-weight: 700;
}
.funnel-step__sum {
    margin-left: auto;
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
}
.funnel-step__foot {
    display: flex;
    gap: 14px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--muted);
}
.funnel-step__lost {
    margin-left: auto;
    color: var(--alert);
    font-weight: 600;
}
.funnel-step__muted {
    margin-left: auto;
}
.funnel-step__ok {
    color: var(--ink);
    font-weight: 600;
}

.bar__fill--loss {
    background: #f0a79f;
}

/* Отрицательные суммы читаются сразу, без вглядывания в минус */
.is-loss {
    color: var(--alert);
}
.bar-row__head b.is-loss {
    color: var(--alert);
}

/* Матрица «причина × этап» */
.matrix {
    min-width: 720px;
}
.matrix td {
    font-size: 13px;
}
.matrix__cell {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.matrix__cell.is-hit {
    color: var(--ink);
    font-weight: 700;
    background: var(--accent-100);
}
.matrix__total td {
    font-weight: 700;
    border-top: 1px solid var(--line);
    border-bottom: 0;
}

.table-wrap--flat {
    border-radius: 18px;
}
.table-wrap--flat tbody tr {
    cursor: default;
}
.table-wrap--flat tbody tr:hover {
    background: transparent;
}

.deal-reason {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--muted);
}

/* Карточка сделки */
.deal {
    overflow: hidden;
}
.deal .task__client {
    flex: 1 1 auto;
    min-width: 0;
}
.deal .task__due {
    flex: none;
}
.deal .task__foot {
    min-width: 0;
}
.deal .task__foot .tag {
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.deal .avatar {
    flex: none;
}

.deal__amount {
    flex: none;
    margin-left: auto;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
/* Описание на карточке — ровно три строки. Текст уже подрезан в скрипте,
   а высота дополнительно ограничена здесь: так три строки получаются
   и при крупном системном шрифте, и там, где line-clamp не поддержан. */
.deal__note {
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted);
    max-height: calc(12px * 1.4 * 3);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
}

/* Причина по умолчанию читается как отказ — красная */
.deal__reason {
    font-size: 12px;
    color: var(--alert);
    background: var(--alert-100);
    padding: 6px 10px;
    border-radius: 10px;
    overflow-wrap: anywhere;
}

/* В колонке «Договор» тот же блок объясняет победу, а не потерю,
   поэтому уходит в фирменный лайм */
.deal.is-won .deal__reason {
    color: var(--ink);
    background: var(--accent-100);
}
.deal.is-won .deal__reason::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-700);
    margin-right: 7px;
    vertical-align: 1px;
}

.deal.is-won .task__title {
    color: var(--ink);
}
.deal.is-won {
    box-shadow: inset 0 0 0 2px var(--accent);
}
/* Раньше метка стояла между именем и датой — без своего якоря она
   «плавала» на границе, которая зависела от длины имени. Теперь у неё
   свой margin-left: auto, поэтому она всегда прижата к правому краю
   строки, а не к случайному месту рядом с текстом. На карточке лида
   после метки ещё есть кнопка «+ задача» — ей якорь больше не нужен,
   он и так один на всю правую группу. */
.task__files {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
}

/* Правый верхний угол карточки задачи: приоритет, комментарий, файлы */
.task__top__right {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.task__top__right .task__prio,
.task__top__right .task__files {
    margin-left: 0;
}
.task__comment {
    display: inline-flex;
    align-items: center;
    color: var(--muted);
    flex-shrink: 0;
}
.task__files + .deal__task {
    margin-left: 0;
}

.deal__task {
    margin-left: auto;
    flex: none;
    white-space: nowrap;   /* работает, только если файлов нет — иначе якорь у .task__files */
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 500;
    padding: 4px 11px;
    border-radius: var(--pill);
    cursor: pointer;
    transition: background-color .2s, color .2s, border-color .2s;
}
.deal__task:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

.stage-switch--wrap {
    flex-wrap: wrap;
}
.stage-switch--wrap button {
    flex: 1 1 30%;
    white-space: nowrap;
}

/* Модалка лида держит фиксированную ширину и на десктопе, и на
   мобильном — уже своего максимума она сжимается только на узких
   экранах. У «Первый контакт» и «Смета/КП» при 3 кнопках в ряд там
   не хватает места, и текст переносится внутри пилюли на две строки,
   ломая ровный ряд (та же природа бага, что была со «Стадией» на
   канбане, только там кнопки не помещались целиком, здесь — сам
   текст внутри). Решение то же: на узком экране — 2 кнопки в ряд. */
@media (max-width: 480px) {
    .stage-switch--wrap button {
        flex: 1 1 calc(50% - 3px);
    }
}

/* Переключатель стадий в модалке задачи канбана: 4 стадии в один ряд,
   у «На проверке» и «Выполнено» текст не должен ломаться на две строки */
.stage-switch--nowrap button {
    white-space: nowrap;
    padding: 10px 8px;
}

/* На узком экране 4 нерастягиваемых подписи в один ряд не помещаются
   («Выполнено» обрезается) — на телефоне переносим ряд в 2×2, текст
   внутри каждой кнопки по-прежнему не переносится. */
@media (max-width: 420px) {
    .stage-switch--nowrap {
        flex-wrap: wrap;
    }
    .stage-switch--nowrap button {
        flex: 1 1 calc(50% - 3px);
    }
}
.note--left {
    text-align: left;
    margin-top: 8px;
}

/* ---------- Рассылка ---------------------------------------------- */

.mail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.mail-layout .card {
    margin-bottom: 16px;
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 12px;
}

.seg-count {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 14px 16px;
    margin: 6px 0 12px;
    background: var(--accent-100);
    border-radius: 16px;
}
.seg-count b {
    font-size: 22px;
    font-weight: 700;
}
.seg-count span {
    font-size: 12.5px;
    color: var(--ink-2);
}
.seg-count .btn {
    margin-left: auto;
}

.recipients {
    max-height: 340px;
    overflow: auto;
    display: grid;
    gap: 4px;
}
.recipient {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 14px;
    background: var(--warm);
    cursor: pointer;
    transition: background-color .15s, opacity .15s;
}
.recipient:hover {
    background: var(--paper);
}
.recipient.is-off {
    opacity: .45;
}
.recipient input {
    flex: none;
    width: 16px;
    height: 16px;
    accent-color: var(--dark);
}
.recipient__main {
    flex: 1;
    min-width: 0;
}
.recipient__main b {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.recipient__main span {
    font-size: 11.5px;
    color: var(--muted);
    overflow-wrap: anywhere;
}
.recipient .tag {
    flex: none;
}

.mail-preview {
    background: var(--warm);
    border-radius: 18px;
    padding: 16px 18px;
    max-height: 320px;
    overflow: auto;
}
.mail-preview__subject {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
    overflow-wrap: anywhere;
}
.mail-preview__body {
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-2);
    overflow-wrap: anywhere;
}
.field > span em {
    font-style: normal;
    color: var(--muted);
    font-weight: 400;
}

.muted-cell {
    color: var(--muted);
}

@media (max-width: 1080px) {
    /* minmax(0, 1fr), а не голый 1fr: без нижней границы grid-элемент
       не сжимается уже содержимого (тот же приём, что у .shell и .board) */
    .mail-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    .filter-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Поддержка ---------------------------------------------- */

.support-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.sup {
    background: var(--panel);
    border-radius: var(--r);
    padding: 20px 22px 18px;
    display: grid;
    gap: 14px;
    align-content: start;
}
.sup[data-state="loss"] {
    box-shadow: inset 0 0 0 2px var(--alert);
}
.sup[data-state="thin"] {
    box-shadow: inset 0 0 0 2px #e8c98a;
}

.sup__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
/* Заголовок, метка файлов и строка оценки — три самостоятельные
   строки, поэтому колонкой: без него метка файлов (inline-flex)
   и следующий за ней текст span (по умолчанию inline) съезжались
   на одну строку вплотную друг к другу. */
.sup__title {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sup__title b {
    font-size: 15px;
    font-weight: 700;
    overflow-wrap: anywhere;
}
.sup__title span {
    font-size: 12px;
    color: var(--muted);
}
/* Внутри заголовка метка не прижимается вправо — а идёт своей строкой,
   как остальные элементы колонки; margin-left: auto нужен только там,
   где .task__files стоит в общем ряду .task__foot / .deal__foot */
.sup__title .task__files {
    margin-left: 0;
}
/* Метки «файлы» и «комментарий» идут одной строкой внутри колоночного
   заголовка карточки — оборачиваем их в горизонтальный ряд. */
.sup__title .sup__badges {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sup__state {
    flex: none;
}
.sup[data-state="ok"] .sup__state {
    background: var(--accent-100);
    color: var(--ink);
}
.sup[data-state="thin"] .sup__state {
    background: #fbf1dc;
    color: #8c5b0f;
}
.sup[data-state="loss"] .sup__state {
    background: var(--alert-100);
    color: var(--alert);
}

.sup__bar {
    position: relative;
    height: 6px;
    border-radius: 3px;
    background: var(--paper);
    overflow: hidden;
}
.sup__bar span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--accent);
}

/* Засечка показывает, где кончается пакет часов — порог убытка обычно дальше */
.sup__tick {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    background: var(--ink);
    opacity: .35;
    transform: translateX(-1px);
}
.sup[data-state="loss"] .sup__bar span {
    background: var(--alert);
}
.sup[data-state="thin"] .sup__bar span {
    background: #dfb45f;
}
.sup__over {
    font-size: 12px;
    color: var(--muted);
    margin-top: -6px;
}
.sup__over b {
    color: var(--alert);
    font-weight: 700;
}
.sup__over--safe {
    color: var(--muted);
}
/* Пакет часов — второстепенная шкала: порога убытка у такого клиента нет */
.sup__bar--pack span {
    background: #b7c96a;
}

.sup__rate {
    background: var(--warm);
    border-radius: 14px;
    padding: 10px 12px;
}
.sup__rate-value {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.sup__rate-value b {
    font-size: 15px;
    font-weight: 700;
}
.sup__rate-value span {
    font-size: 12px;
    color: var(--muted);
}

.sup__counters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.counter {
    background: var(--warm);
    border-radius: 14px;
    padding: 10px 12px;
}
.counter__label {
    display: block;
    font-size: 11.5px;
    color: var(--muted);
    margin-bottom: 6px;
}
.counter__value {
    display: block;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.02em;
}
.counter__ctrl {
    display: flex;
    align-items: center;
    gap: 8px;
}
.counter__ctrl b {
    flex: 1;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
}

/* Часы вводятся числом напрямую, а не только кликами по +/- */
.counter__input {
    flex: 1;
    width: 0;
    min-width: 0;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: transparent;
    padding: 4px 2px;
    transition: background-color .15s, border-color .15s;
}
.counter__input:hover {
    background: var(--panel);
}
.counter__input:focus {
    outline: none;
    background: var(--panel);
    border-color: var(--ink);
    box-shadow: 0 0 0 3px var(--accent-100);
}
.counter__input::-webkit-outer-spin-button,
.counter__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.counter__input {
    -moz-appearance: textfield;
}
.counter__ctrl button {
    flex: none;
    width: 28px;
    height: 28px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--panel);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}
.counter__ctrl button:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}
.counter__ctrl button:active {
    transform: translateY(1px);
}

.sup__foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--line-soft);
}
.sup__tasks {
    font-size: 12px;
    color: var(--muted);
    min-width: 0;
}
.sup__foot {
    flex-wrap: wrap;
}
.sup__foot .btn {
    flex: none;
}
.sup__tasks {
    flex: 1 1 100%;
}

/* Исполнитель задачи: аватар, имя и роль в подвале карточки */
.sup__who {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 100%;
    min-width: 0;
}
.sup__who-text {
    min-width: 0;
}
.sup__who-text b {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sup__who-text > span {
    font-size: 11px;
    color: var(--muted);
}

.sup__facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    margin: 0;
}
.sup__facts div {
    min-width: 0;
}
.sup__facts dt {
    font-size: 11.5px;
    color: var(--muted);
}
.sup__facts dd {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}
.sup[data-state="loss"] .sup__margin {
    color: var(--alert);
}

@media (max-width: 560px) {
    .support-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Разделитель в меню -------------------------------------- */

/* Блоки меню разделяются не линией, а отступом (как было раньше). */
.nav__group {
    display: flex;
    flex-direction: column;
    /* Отступ между пунктами внутри блока — как в исходном меню. */
    gap: 4px;
}
.nav__group + .nav__group {
    margin-top: 8px;
}

/* ---------- Сворачивание сайдбара + бургер --------------------------- */

/* Единственная кнопка-бургер справа от лого: десктоп — свернуть, мобильные —
   открыть меню. */
.nav__burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    /* Небольшой правый сдвиг, чтобы иконка визуально встала в тот же
       правый отступ, что и счётчики пунктов меню (кнопка остаётся
       симметричной — иконка по центру). */
    margin-right: 7px;
    flex: none;
    width: 36px;
    height: 36px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 9px;
    color: rgba(255, 255, 255, .85);
    cursor: pointer;
    transition: background-color .2s, color .2s;
}
.nav__burger:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

/* Свёрнутый сайдбар — только десктоп (на мобильных другой режим). */
@media (min-width: 901px) {
    .shell.is-nav-collapsed {
        --nav-w: 72px;
    }
    .is-nav-collapsed .nav {
        padding: 0 10px 12px;
    }
    .is-nav-collapsed .nav__top {
        margin: 0 -10px 2px;
        padding: 0 10px;
    }
    /* Лого скрыто — бургер по центру верхней строки. */
    .is-nav-collapsed .brand {
        display: none;
    }
    .is-nav-collapsed .nav__top {
        justify-content: center;
    }
    .is-nav-collapsed .nav__burger {
        margin-left: 0;
        margin-right: 0;
        /* В свёрнутом виде кнопка строго по центру узкого сайдбара. */
        justify-content: center;
        padding: 0;
    }
    .is-nav-collapsed .nav__link {
        justify-content: center;
        padding: 9px 0;
        gap: 0;
    }
    .is-nav-collapsed .nav__link-text,
    .is-nav-collapsed .nav__count,
    .is-nav-collapsed .nav__user b,
    .is-nav-collapsed .nav__user .avatar {
        display: none;
    }
    /* В свёрнутом виде в блоке пользователя — только кнопка выхода по центру. */
    .is-nav-collapsed .nav__user {
        justify-content: center;
        gap: 0;
        padding: 12px 0 2px;
    }
}

/* ---------- Продвижение: редактируемая таблица ---------------------- */

.promo-wrap {
    overflow-x: auto;
}
.promo-table {
    min-width: 880px;
}
.promo-table th.is-num, .promo-table td.is-num {
    text-align: right;
}

/* Шапка — общая для всех таблиц системы (см. thead th выше):
   раньше здесь была своя, более тёмная и крупная, из-за чего
   «Продвижение» выбивалось из ряда «Счетов» и «Договоров». */
.promo-table thead th {
    vertical-align: bottom;
    padding: 18px 18px 10px;
}
.promo-kind {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted);
}

/* Отступ ячейки складывается из padding строки и поля: 10 + 8 = 18 px,
   как в остальных таблицах */
.promo-table tbody td {
    padding: 5px 10px;
    border-bottom: 1px solid var(--line-soft);
}
.promo-table tbody tr {
    cursor: default;
    transition: background-color .15s;
}
.promo-table tbody tr:hover {
    background: var(--warm);
}

.cell-input {
    width: 100%;
    min-width: 88px;
    padding: 9px 8px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: transparent;
    transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.promo-table tbody tr:hover .cell-input {
    background: var(--panel);
}
.cell-input:focus {
    outline: none;
    background: var(--panel);
    border-color: var(--ink);
    box-shadow: 0 0 0 3px var(--accent-100);
}
.cell-input--num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
/* Клиент выбирается из CRM: селект в ячейке остаётся плоским, как поле ввода */
.cell-input--client {
    min-width: 190px;
    appearance: none;
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: right 10px center, right 5px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 24px;
}
.cell-input::placeholder {
    color: #cfcfcf;
}
/* стрелки у числовых полей съедают ширину и мешают вводу */
.cell-input--num::-webkit-outer-spin-button,
.cell-input--num::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.cell-input--num {
    -moz-appearance: textfield;
}
/* Дата оплаты + «Сегодня» — в одну строку: поле даты по своей ширине,
   ссылка справа, чтобы строка таблицы не казалась «поехавшей». */
.paydate {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}
.paydate .cell-input {
    width: auto;
    min-width: 0;
    flex: 0 0 auto;
}
/* «Сегодня» — ссылка с пунктирным подчёркиванием, не кнопка. Цвет —
   читаемый зелёный (--good), а не лаймовый акцент. */
.cell-today {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    font-size: 11px;
    line-height: 1.4;
    color: var(--good);
    background: none;
    border: 0;
    border-bottom: 1px dashed currentColor;
    border-radius: 0;
    cursor: pointer;
    transition: color .15s;
}
.cell-today:hover {
    color: #237a46;
    border-bottom-style: solid;
}

/* Тумблер «В расчётах» и вычеркнутый счёт. */
.is-center {
    text-align: center;
}
.void-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.void-toggle input {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--accent);
}
/* Вычеркнутый счёт: текст перечёркнут и приглушён; поля/тег/тумблер — нет. */
tr.is-void td {
    color: var(--muted);
    text-decoration: line-through;
}
tr.is-void .cell-input,
tr.is-void .void-toggle,
tr.is-void .tag,
tr.is-void .pay-diff,
tr.is-void .cell-today,
tr.is-void .basis-note {
    text-decoration: none;
}
/* Серая сноска под основанием счёта: реальный договор, когда основным
   основанием показана заявка. */
.basis-note {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.3;
    color: var(--muted);
}

.promo-income {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-right: 18px !important;
}

.promo-total td {
    border-top: 1px solid var(--line);
    border-bottom: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding: 16px 18px;
}
.promo-total {
    background: transparent;
}
.promo-table tbody tr.promo-total:hover {
    background: transparent;
}

/* Строка-кнопка стоит на месте будущей новой строки */
.promo-add td {
    padding: 8px 10px;
    border-bottom: 0;
}
.promo-table tbody tr.promo-add:hover {
    background: transparent;
}
.promo-add button {
    width: 100%;
    padding: 11px;
    border: 1px dashed var(--line);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}
.promo-add button:hover {
    background: var(--accent-100);
    border-color: var(--accent);
    border-style: solid;
    color: var(--ink);
}

.promo-del {
    width: 44px;
}

/* ---------- Карточки продвижения ------------------------------------- */
/* Клиент — карточка, услуги — блоки внутри неё. Ширина колонок больше
   не фиксирована таблицей, поэтому карточка спокойно живёт в общей
   сетке .support-grid рядом с поддержкой и хостингом. */

.promo-services {
    display: grid;
    gap: 8px;
}

.promo-service {
    padding: 11px 13px;
    border-radius: 14px;
    background: var(--warm);
    display: grid;
    gap: 8px;
    transition: background-color .15s;
}
.promo-service:hover {
    background: var(--paper);
}

.promo-service__head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.promo-service__head .pay-diff {
    flex: 1;
    text-align: center;
}
.promo-service__head .row-del {
    flex: none;
}

/* Название услуги и счёт клиенту — каждое своей строкой во всю ширину:
   счёт главнее расходов, и он должен читаться первым. */
.fin-field--wide {
    flex: 1 1 100%;
}

/* Расходы делят строку по трети. Ширина ограничена сверху, иначе
   последний перенесённый на новую строку растягивался бы на всю
   ширину и выглядел длиннее счёта. */
.fin-field--third {
    flex: 1 1 calc(33.333% - 6px);
    max-width: calc(33.333% - 6px);
}
.row-del {
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 13px;
    line-height: 1;
    transition: background-color .15s, color .15s;
}
.row-del:hover {
    background: var(--alert-100);
    color: var(--alert);
}
.row-del:disabled {
    opacity: .3;
    cursor: not-allowed;
}
.row-del:disabled:hover {
    background: transparent;
    color: var(--muted);
}

/* Редактор столбцов */
.col-editor {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
}
.col-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px 32px;
    gap: 8px;
    align-items: center;
}
.col-row .input {
    padding: 9px 12px;
}

@media (max-width: 560px) {
    .col-row {
        grid-template-columns: minmax(0, 1fr) 32px;
    }
    .col-row select {
        grid-column: 1 / -1;
    }
}

/* ---------- Личная доска -------------------------------------------- */

/* Списки переносятся на следующую строку, когда перестают помещаться:
   горизонтальная прокрутка в личных заметках прячет то, что нужно видеть. */
/* Ширину, позицию и высоту столбцов считает personal.js (layoutBoard):
   обычная grid-сетка после переноса на новую строку выравнивает всех
   по высоте самого длинного соседа в прежней строке, и короткий список
   может уехать далеко вниз, даже если «его» колонка почти пустая.
   JS меряет фактическую высоту каждой карточки и ставит следующую
   туда, где сейчас меньше всего контента — как в вёрстке Pinterest. */
.pboard {
    position: relative;
    padding-bottom: 6px;
}

.plist {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--panel);
    border-radius: var(--r);
    display: flex;
    flex-direction: column;
    min-height: 200px;
    outline: 2px solid transparent;
    outline-offset: -2px;
    transition: outline-color .15s, opacity .15s;
}
.plist.is-over {
    outline-color: var(--accent);
}
.plist.is-dragging {
    opacity: .4;
}

.plist__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 16px 10px;
    cursor: grab;
}
.plist__grip {
    color: #cfcfcf;
    font-size: 13px;
    letter-spacing: -2px;
    flex: none;
}
.plist__head h2 {
    font-size: 15px;
    min-width: 0;
    flex: 1;
    border-radius: 6px;
    padding: 2px 4px;
    margin-left: -4px;
    outline: none;
    -webkit-user-drag: none;
    user-drag: none;
}
.plist__head h2:focus {
    background: var(--warm);
}
.plist__n {
    font-size: 12px;
    color: var(--muted);
    flex: none;
}

.plist__head .row-del {
    flex: none;
    opacity: 0;
    transition: opacity .15s;
}
.plist:hover .plist__head .row-del,
.plist__head .row-del:focus-visible {
    opacity: 1;
}

.plist__body {
    padding: 0 10px 6px;
    display: grid;
    gap: 8px;
    flex: 1;
}

.plist__add {
    margin: 4px 10px 12px;
    padding: 9px 12px;
    border: 1px dashed var(--line);
    border-radius: var(--r-sm);
    background: transparent;
    font-size: 13px;
    white-space: pre-wrap;   /* перенос строки по Shift+Enter, как в тексте задачи */
    outline: none;
    cursor: text;
}
.plist__add:focus {
    border-style: solid;
    border-color: var(--ink);
    background: var(--panel);
}
/* Обычный ::placeholder — только для <input>/<textarea>, у contenteditable
   плейсхолдер имитируется через data-атрибут и псевдоэлемент */
.plist__add:empty::before {
    content: attr(data-placeholder);
    color: #bdbdbd;
    pointer-events: none;
}

/* ---- Карточка задачи ---- */

.ptask {
    background: var(--warm);
    border-radius: 14px;
    padding: 12px 14px 10px;
    cursor: grab;
    display: grid;
    gap: 8px;
}
.ptask.is-dragging {
    opacity: .4;
}

.ptask__text {
    font-size: 14px;
    line-height: 1.35;
    outline: none;
    overflow-wrap: anywhere;
    white-space: pre-wrap;   /* перенос строки по Shift+Enter (см. personal.js) */
    transition: color .15s;
    /* Иначе браузер перетаскивает выделенный текст поверх других полей
       вместо перетаскивания всей карточки за родителя-article */
    -webkit-user-drag: none;
    user-drag: none;
}

/* Взята в работу — обведена, будто карандашом */
.ptask.is-active .ptask__text {
    display: inline-block;
    padding: 5px 14px;
    margin: -2px 0;
    border: 2px solid var(--ink);
    border-radius: 62% 38% 58% 42% / 52% 46% 54% 48%;
}

/* Приоритет — подчёркнута маркером */
.ptask.is-priority .ptask__text {
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 4px;
    text-underline-offset: 3px;
}

/* Сделана — вычеркнута и отходит на второй план */
.ptask.is-done .ptask__text {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    color: var(--muted);
}
.ptask.is-done.is-priority .ptask__text {
    text-decoration: underline line-through;
    text-decoration-color: var(--muted);
    text-decoration-thickness: 2px;
}
.ptask.is-done {
    background: var(--paper);
}
.ptask.is-done.is-active .ptask__text {
    border-color: var(--line);
}

.ptask__tools {
    display: flex;
    align-items: center;
    gap: 4px;
}
.ptask__tools button {
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--pill);
    padding: 4px 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}
.ptask__tools button:hover {
    background: var(--panel);
    color: var(--ink);
}
.ptask__tools button[aria-pressed="true"] {
    background: var(--accent);
    color: var(--accent-ink);
}
.ptask__tools .row-del {
    margin-left: auto;
    padding: 4px;
}

/* ---------- Проекты -------------------------------------------------- */

.ptabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 16px;
    scrollbar-width: none;
}
.ptabs::-webkit-scrollbar {
    display: none;
}

.ptab {
    flex: none;
    text-align: left;
    padding: 12px 18px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--panel);
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
.ptab:hover {
    border-color: var(--ink);
}
.ptab.is-on {
    background: var(--dark);
    border-color: var(--dark);
    color: #fff;
}

/* Вкладки-периоды на «Счетах» и «Расходах»: активная — фирменным
   лаймом, как активные пилюли фильтров на остальных страницах
   (.chip-check, .stage-switch), а не тёмной, как вкладки проектов. */
.ptabs--accent .ptab.is-on {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}
.ptabs--accent .ptab.is-on .ptab__sub {
    color: rgba(0, 0, 0, .55);
}

/* Кнопка добавления стоит в том же ряду и выглядит как пустая вкладка */
.ptab--add {
    border-style: dashed;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
}
.ptab--add:hover {
    background: var(--accent-100);
    border-color: var(--accent);
    border-style: solid;
    color: var(--ink);
}
.ptab__title {
    display: block;
    font-size: 14px;
    font-weight: 700;
}
/* Счётчик задач, требующих внимания, — компактная пилюля у названия. */
.ptab__count {
    display: inline-block;
    min-width: 18px;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}
.ptab.is-on .ptab__count {
    background: #fff;
    color: var(--dark);
}
.ptabs--accent .ptab.is-on .ptab__count {
    background: var(--accent-ink);
    color: var(--accent);
}
.ptab__sub {
    display: block;
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 2px;
}
.ptab.is-on .ptab__sub {
    color: rgba(255, 255, 255, .6);
}
.works-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.works-count {
    font-size: 12.5px;
    color: var(--muted);
}

/* Вилка сметы: светлая зона — согласованный коридор, засечка — потолок */
.rng {
    display: grid;
    gap: 6px;
}
.rng__track {
    position: relative;
    height: 8px;
    border-radius: 4px;
    background: var(--paper);
    overflow: hidden;
}
.rng__band {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--accent-100);
}
.rng__fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 4px;
    background: var(--accent);
    mix-blend-mode: multiply;
}
.rng__cap {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background: var(--ink);
    opacity: .45;
}
.rng[data-state="loss"] .rng__fill {
    background: #f0a79f;
}
.rng[data-state="thin"] .rng__fill {
    background: #d6d6d6;
}
.rng__labels {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.rng__labels b {
    color: var(--ink);
    font-weight: 700;
}

/* Статус работы — обычный селект: подписи не режутся, как в кнопках */
/* Селект и поле даты в счётчике карточки должны быть одной высоты:
   у них разные системные отступы, поэтому задаём их явно вместе. */
.counter select.input,
.counter input.input {
    width: 100%;
    padding: 7px 10px;
    font-size: 13px;
    line-height: 1.3;
    height: 34px;
    background: var(--panel);
}

/* Флажок в форме: подпись справа, а не сверху */
.field--check {
    display: flex;
    align-items: center;
    gap: 9px;
}
.field--check input {
    width: 16px;
    height: 16px;
    accent-color: var(--dark);
    flex: none;
}
.field--check > span {
    margin-bottom: 0;
    font-size: 13px;
    color: var(--ink);
}
.input:disabled {
    background: var(--paper);
    color: var(--muted);
    cursor: not-allowed;
}
/* Поле только для чтения (например, описание задачи у исполнителя):
   выглядит как некликабельное, но текст читается и выделяется. */
.input[readonly] {
    background: var(--paper);
    color: var(--ink-2);
    cursor: default;
}

.sup__foot .btn + .btn {
    margin-left: 0;
}

/* ---------- Тост -------------------------------------------------- */

.toast {
    position: fixed;
    z-index: 70;
    left: 50%;
    bottom: 28px;
    transform: translate(-50%, 12px);
    background: var(--dark);
    color: #fff;
    padding: 12px 22px;
    border-radius: var(--pill);
    font-size: 13.5px;
    font-weight: 500;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
}
.toast.is-on {
    opacity: 1;
    transform: translate(-50%, 0);
}
/* Ошибка (toast(text, {error:true})): красная плашка, текст может быть
   длинным — переносим строки, ограничиваем ширину экраном. */
.toast--error {
    background: var(--alert);
    border-radius: 14px;
    max-width: min(560px, calc(100vw - 32px));
    width: max-content;
    text-align: center;
    line-height: 1.4;
}

/* Индикатор автосохранения (SaveState в core.js): справа внизу.
   Ошибка — красная плашка, не исчезает, пока не сохранится. */
.save-state {
    position: fixed;
    z-index: 69;
    right: 20px;
    bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: min(460px, calc(100vw - 32px));
    padding: 9px 14px;
    border-radius: 12px;
    background: var(--dark);
    color: #fff;
    font-size: 12.5px;
    line-height: 1.35;
    box-shadow: var(--shadow);
}
.save-state[hidden] {
    display: none;
}
.save-state--ok {
    background: var(--good, #2f8f4e);
}
.save-state--error {
    background: var(--alert);
}
.save-state__retry {
    flex: none;
    border: 1px solid rgba(255, 255, 255, .7);
    background: transparent;
    color: #fff;
    border-radius: 999px;
    padding: 4px 12px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.save-state__retry:hover {
    background: rgba(255, 255, 255, .15);
}
@media (max-width: 640px) {
    .save-state {
        left: 16px;
        right: 16px;
        bottom: 76px;
    }
}

/* Строка счёта, оплата по которой не сохранилась (invoices.js). */
tr.is-unsaved td {
    background: var(--alert-100);
}
tr.is-unsaved td:first-child {
    box-shadow: inset 3px 0 0 var(--alert);
}

/* Карточка задачи, перенос которой сохраняется на сервере: остаётся в
   прежней колонке, приглушена, недоступна для повторного переноса. */
.task.is-saving {
    opacity: .55;
    pointer-events: none;
    cursor: progress;
    position: relative;
}
.task.is-saving::after {
    content: "Сохраняется…";
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 11px;
    color: var(--muted);
}

/* ---------- Адаптив ---------------------------------------------- */

@media (max-width: 1360px) {
    .top__meta {
        display: none;
    }
}

@media (max-width: 1320px) {
    /* .board — доска задач: у неё ровно 4 стадии, и «Выполнено» не должно
       оказываться под «Новой» ни на каком экране. Вместо вертикального
       стека колонки едут вбок: держим их ширину и даём строке скроллиться.
       Порог считан от макета: боковое меню 236px + отступы контента 48px +
       4×240px колонок + 3×16px зазоров ≈ 1292px — ниже этого колонки под
       обычным «резиновым» правилом сжимались бы уже 240px и текст переставал
       помещаться. Скролл включаем чуть раньше расчётной точки, с запасом. */
    .board {
        grid-template-columns: repeat(4, minmax(240px, 1fr));
        overflow-x: auto;
        padding-bottom: 6px;
    }
    .board--wide {
        grid-template-columns: none;
    }
}

/* На мобильных колонки доски задач той же ширины, что на «Лидах» и
   «Тикетах» (276px), — на 240px карточки выглядели тесными. Лиды
   (.board--wide) и тикеты (.board--tickets) задают ширину сами. */
@media (max-width: 900px) {
    .board:not(.board--wide):not(.board--tickets) {
        grid-template-columns: repeat(4, minmax(276px, 1fr));
    }
}

@media (max-width: 900px) {
    /* На мобильных .shell превращается в одну колонку: строка меню,
       строка контента. Без явных grid-template-rows пустая implicit-строка
       по умолчанию растягивается на всю оставшуюся высоту min-height —
       когда контента мало (пустая доска «Мои дела»), лишнее место уходит
       не только в контент, но и в саму строку меню, раздувая шапку. Явно
       отдаём остаток высоты только контенту: меню — по размеру содержимого. */
    .shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }
    /* Мобильная шапка: верхняя строка «логотип + бургер». Меню и блок
       пользователя скрыты и раскрываются бургером на весь экран — без
       горизонтальной прокрутки. На мобильных свёрнутый режим десктопа не
       действует (класс is-nav-collapsed тут ни на что не влияет).
       Липкая шапка: core.js прячет .is-hidden при скролле вниз. */
    .nav {
        position: sticky;
        top: 0;
        z-index: 40;
        height: auto;
        min-height: 0;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 8px 14px;
        overflow: visible;
        transition: transform .25s ease;
    }
    .nav.is-hidden {
        transform: translateY(-100%);
    }
    .nav__top {
        flex: 1;
        align-items: center;
        gap: 10px;
        /* Сбрасываем десктопные правила (высота в шапку, разделитель,
           отрицательные поля) — на мобильных это просто строка бренд+бургер. */
        min-height: 0;
        margin: 0;
        padding: 0;
        border-bottom: 0;
    }
    /* Бренд всегда виден (перекрываем возможный is-nav-collapsed с десктопа).
       Боковой отступ не сбрасываем — наследуем 0 14px, чтобы лого стояло по
       одной вертикали с иконками меню (как на десктопе). */
    .nav .brand {
        display: flex;
        align-items: center;
    }
    .nav .logo, .nav .brand svg {
        height: 16px;
        width: auto;
        display: block;
    }
    /* Бургер. На мобильной полосе это стандартная кнопка у правого края —
       десктопный сдвиг margin-right не нужен. */
    .nav__burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        margin-right: 0;
        width: 40px;
        height: 40px;
        padding: 0;
        background: none;
        border: 0;
        border-radius: 10px;
        color: #fff;
        cursor: pointer;
    }
    .nav__burger:hover {
        background: rgba(255, 255, 255, .1);
    }
    /* По умолчанию меню и пользователь спрятаны — показываются в оверлее. */
    .nav__list,
    .nav__user {
        display: none;
    }

    /* Раскрытое меню — на весь экран. */
    .nav.is-open {
        position: fixed;
        inset: 0;
        height: 100dvh;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        /* Те же боковые/верхний отступы, что у свёрнутой полосы (8px 14px) —
           чтобы при раскрытии логотип не прыгал. */
        padding: 8px 14px 24px;
        overflow-y: auto;
        z-index: 60;
        transform: none;
    }
    /* В колоночном оверлее строка бренд+бургер не должна растягиваться по
       высоте (на закрытой полосе у неё flex:1 для ширины). */
    .nav.is-open .nav__top {
        flex: none;
    }
    /* Бургер остаётся в потоке первой строки (строка бренд+бургер), поэтому
       список идёт сразу под ним по обычному gap — без доп. отступа сверху. */
    .nav.is-open .nav__list {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        /* Меню не прилипает к строке с логотипом — отступ в общем ритме
           дизайна (как верхний padding контента). */
        margin-top: 16px;
    }
    .nav.is-open .nav__link {
        display: flex;
        padding: 12px 14px;
        flex: none;
        justify-content: flex-start;
        gap: 10px;
    }
    .nav.is-open .nav__link-text {
        display: inline;
    }
    /* В оверлее пункты внутри блока чуть просторнее под палец. */
    .nav.is-open .nav__group {
        gap: 4px;
    }
    .nav.is-open .nav__count {
        margin-left: auto;
    }
    .nav.is-open .nav__user {
        display: flex;
        border-top: 1px solid rgba(255, 255, 255, .14);
        border-left: 0;
        margin-left: 0;
        padding: 14px 6px 4px;
        align-self: stretch;
    }
    .nav.is-open .nav__user b {
        display: block;
    }
    /* Фон за раскрытым меню не скроллится. */
    body.nav-open {
        overflow: hidden;
    }
    .top {
        padding: 12px 16px;
        flex-wrap: wrap;
        white-space: normal;
    }
    .top__spacer {
        display: none;
    }
    .search {
        flex: 1 1 180px;
        max-width: none;
    }
    .content {
        padding: 16px 14px 36px;
    }
    .drawer {
        width: 100%;
    }
    .drawer__head, .drawer__body, .drawer__foot {
        padding-left: 20px;
        padding-right: 20px;
    }
    .kpis {
        grid-template-columns: 1fr;
    }
    .props {
        grid-template-columns: 1fr;
        gap: 2px 0;
    }
    .props dd {
        margin-bottom: 10px;
    }
}

@media (max-width: 760px) {
    .auth {
        padding: 16px;
        align-items: start;
        padding-top: 10vh;
    }
    .auth__card {
        padding: 30px 24px 28px;
        border-radius: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}
/* ============================================================
   Мобильная вёрстка модальных окон (правки 2026-08-24)
   ============================================================ */

/* Поля не должны переполнять грид-ячейку: без этого нативный
   input[type=date] на мобильных распирает строку формы за край. */
.modal__row {
    min-width: 0;
}
.modal__row > .field {
    min-width: 0;
}
.input {
    min-width: 0;
}

@media (max-width: 480px) {
    /* Двухколоночные строки формы — в один столбец. Поля перестают
       жаться, а поля дат вписываются в ширину модалки. */
    .modal__row {
        grid-template-columns: 1fr;
    }
    .modal__row--flex {
        flex-direction: column;
    }

    /* Длинный заголовок и кнопка действия (например «Снять с поддержки»
       при редактировании клиента) переносятся, а не наезжают друг на
       друга: заголовок занимает строку, кнопка уходит под него. */
    .modal__head {
        flex-wrap: wrap;
    }
    .modal__head h2 {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 19px;
    }
    .modal__head .btn {
        margin-left: auto;
    }
}

/* Редактор столбцов «Продвижения»: на узком экране название поля —
   на всю ширину строки, а тип и удаление стоят вместе на следующей.
   Переопределяет прежнюю раскладку (там на всю ширину уходил select). */
@media (max-width: 560px) {
    .col-row {
        grid-template-columns: minmax(0, 1fr) 32px;
    }
    .col-row > input {
        grid-column: 1 / -1;
    }
    .col-row select {
        grid-column: auto;
    }
}

/* ------------------------------------------------------------
   iOS Safari: поле даты игнорирует width и распирает строку
   собственной внутренней шириной значения. Сбрасываем нативное
   оформление и внутренний псевдоэлемент. Условие
   @supports (-webkit-touch-callout: none) истинно только в
   iOS-браузерах на WebKit — десктоп не затрагивается.
   ------------------------------------------------------------ */
@supports (-webkit-touch-callout: none) {
    .input[type="date"] {
        -webkit-appearance: none;
        appearance: none;
        display: block;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    .input[type="date"]::-webkit-date-and-time-value {
        text-align: left;
        min-width: 0;
        margin: 0;
    }
    .input[type="date"]::-webkit-datetime-edit {
        padding: 0;
    }
}

/* Продвижение: выбор подрядчика у поля «Расход подрядчику» — отдельной
   строкой под названием и типом столбца. */
.col-row__user {
    grid-column: 1 / -1;
}

/* Продвижение: «Счёт клиенту» и «Дата счёта» — неразделимая пара,
   всегда в одной строке. Контейнер занимает всю ширину ряда полей,
   внутри счёт растёт, дата — фиксированной ширины и не переносится. */
.fin-pair {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 8px;
    flex: 1 1 100%;
    min-width: 0;
}
.fin-pair > .fin-field {
    flex: 1 1 0;
    min-width: 0;
}
.fin-pair > .fin-field--date {
    flex: 0 1 150px;
    min-width: 116px;
}

/* Подсветка срочности даты счёта: до неё меньше недели (warn) или
   она просрочена (alert). Используется в поле даты «Продвижения»
   (.cell-input) и в подписи счёта карточки поддержки (.sup__invoice). */
.cell-input.due-soon {
    border-color: var(--warn);
    background: var(--warn-100);
    color: var(--warn);
}
.cell-input.due-overdue {
    border-color: var(--alert);
    background: var(--alert-100);
    color: var(--alert);
}
.sup__invoice {
    font-weight: 600;
}
.sup__invoice.due-soon {
    color: var(--warn);
}
.sup__invoice.due-overdue {
    color: var(--alert);
}

/* Инлайн-редактор даты счёта прямо в карточке поддержки: даёт ту же
   подсветку срочности, что и подпись, на обычном поле .input. */
.sup__invoice-edit .input {
    width: 100%;
    margin-top: 4px;
}
.sup__invoice-edit .input.due-soon {
    border-color: var(--warn);
    background: var(--warn-100);
    color: var(--warn);
}
.sup__invoice-edit .input.due-overdue {
    border-color: var(--alert);
    background: var(--alert-100);
    color: var(--alert);
}

/* iOS Safari: тот же сброс ширины и для поля даты внутри карточки услуги
   (класс cell-input, а не input). */
@supports (-webkit-touch-callout: none) {
    .cell-input[type="date"] {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    .cell-input[type="date"]::-webkit-date-and-time-value {
        text-align: left;
        min-width: 0;
        margin: 0;
    }
}

/* Ссылка «Восстановить пароль» на форме входа (на месте «Запомнить меня»). */
.auth__forgot {
    margin: -2px 0 12px;
    font-size: 13px;
    text-align: right;
}
.auth__forgot a {
    color: var(--muted);
    text-decoration: underline;
    cursor: pointer;
}
.auth__forgot a:hover {
    color: var(--ink-2);
}

/* Скрытая карточка входа/восстановления (переключается на форме входа). */
.auth__card.is-hidden {
    display: none !important;
}

/* Сообщение об отправке нового пароля внутри карточки восстановления. */
.auth__note {
    margin: 6px 0 18px;
    padding: 14px 18px;
    border-radius: 14px;
    background: var(--good-100);
    color: var(--good);
    text-align: center;
    font-size: 13.5px;
    line-height: 1.5;
}

/* ============================================================
   Тикеты: доска заявок + окно переписки
   ============================================================ */

/* Поиск в шапке — тянущийся, а не во всю ширину: у .input width:100%, и без
   этого он распирал шапку и давал горизонтальный скролл всей страницы. */
.top #ticketSearch {
    flex: 1 1 240px;
    width: auto;
    min-width: 0;
    max-width: 420px;
}

/* Доска: пять статусов. На узких экранах уезжает вбок нативной прокруткой. */
.board--tickets {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(216px, 1fr);
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    /* Своей полосы прокрутки у доски нет — колонки, не влезающие в ширину,
       возвращаются краевой прокруткой по наведению (как на «Задачах»). */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.board--tickets::-webkit-scrollbar {
    display: none;
}
.board--tickets > .col {
    min-width: 0;
}
/* На мобильных колонки той же ширины, что на «Лидах» (276px): узкие 216px
   нужны только на десктопе, чтобы все пять статусов помещались без
   прокрутки. */
@media (max-width: 900px) {
    .board--tickets {
        grid-auto-columns: minmax(276px, 1fr);
    }
}

/* Карточка заявки */
.ticket {
    cursor: pointer;
    /* Страховка: ничто из содержимого не вылезает за скруглённые границы
       карточки на узких колонках (длинная категория, e-mail, домен). */
    overflow: hidden;
}
/* Категория — тег в одну строку с многоточием (как услуга на «Задачах»),
   а не в две строки. text-overflow работает на inline-block с overflow:hidden;
   у обычного .tag это inline-flex, поэтому переключаем на inline-block.
   Маркер «на поддержке» и сумма (в других строках) — не прямые потомки, их
   это правило не затрагивает. */
.ticket > .tag {
    display: inline-block;
    justify-self: start;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}
/* Код заявки занимает свободное место строки и обрезается многоточием —
   иначе на узкой карточке он переносился под маркер «на поддержке» и часть
   кода пряталась. Маркер (в .task__top__right, flex-shrink:0) не сжимается. */
.ticket__code {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 700;
    letter-spacing: -.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ticket__unread {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 50px;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.ticket__desc {
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--ink-2);
    margin: 2px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
/* E-mail и домен — каждый на своей строке и с многоточием: длинный адрес
   без пробелов иначе распирал карточку (flex-элемент не сжимался). */
.ticket__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    color: var(--muted);
    min-width: 0;
}
.ticket__meta span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Окно переписки */
.drawer--ticket {
    width: min(620px, 100%);
}
.drawer--ticket .stage-switch {
    flex-wrap: wrap;
}
.drawer--ticket .stage-switch button {
    flex: 1 1 auto;
    min-width: 0;
}
.stage-switch button.is-active {
    background: var(--accent);
    border-color: var(--accent);
    font-weight: 600;
}

.tk-request {
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin: 0;
    padding: 12px 14px;
    background: var(--warm);
    border-radius: var(--r-sm);
}

.tk-shots {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tk-shot,
.tk-file--img {
    display: block;
    width: 84px;
    height: 84px;
    border-radius: var(--r-sm);
    overflow: hidden;
    border: 1px solid var(--line);
}
.tk-shot img,
.tk-file--img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Лента сообщений */
.tk-feed {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 46vh;
    overflow-y: auto;
    padding: 2px;
}
.tk-msg {
    max-width: 84%;
    padding: 10px 13px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.45;
}
.tk-msg--in {
    align-self: flex-start;
    background: var(--warm);
    border: 1px solid var(--line);
    border-bottom-left-radius: 6px;
}
.tk-msg--out {
    align-self: flex-end;
    background: var(--accent-100);
    border-bottom-right-radius: 6px;
}
.tk-msg__meta {
    font-size: 11.5px;
    color: var(--muted);
    margin-bottom: 3px;
}
.tk-msg__meta b {
    color: var(--ink-2);
    font-weight: 600;
}
.tk-msg__text {
    overflow-wrap: anywhere;
}
.tk-msg__files {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.tk-file {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--pill);
    background: var(--panel);
    border: 1px solid var(--line);
    font-size: 12.5px;
    color: var(--ink);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.tk-file:hover {
    border-color: var(--ink);
}
.tk-file--img {
    padding: 0;
    border-radius: var(--r-sm);
}

/* Форма ответа */
.tk-reply {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}
.tk-reply.is-locked {
    opacity: .75;
}
.tk-reply__row textarea {
    width: 100%;
    resize: none;
    min-height: 42px;
    max-height: 160px;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    font: inherit;
    line-height: 1.4;
    background: var(--panel);
}
.tk-reply__row textarea:focus {
    outline: none;
    border-color: var(--ink);
}
.tk-reply__bar {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tk-reply__bar #tkAttachWrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}
.tk-reply__bar #tkSend {
    margin-left: auto;
    flex: none;
}
.tk-reply .attach__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 900px) {
    .drawer--ticket {
        width: 100%;
    }
    .tk-feed {
        max-height: none;
    }
}

/* Тикеты: ответственный на карточке и в окне */
.ticket__resp {
    align-items: center;
    gap: 8px;
}
/* Блок ответственного забирает свободное место и сжимается, дату (справа)
   не роняем — она flex:none (см. .task__due). */
.ticket__mgr {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
    font-size: 12px;
    color: var(--muted);
}
.ticket__mgr .avatar {
    flex: none;
}
.ticket__mgr-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.ticket__mgr--none {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ticket__mgr--none {
    font-style: italic;
    opacity: .8;
}

/* Секция «Ответственный» в окне переписки */
.tk-resp__who {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    flex-wrap: wrap;
}
.tk-resp__who--none {
    color: var(--muted);
}
.tk-resp__auto {
    font-size: 11px;
    color: var(--muted);
    background: var(--warm);
    border-radius: var(--pill);
    padding: 2px 8px;
}
.tk-resp__who .btn {
    margin-left: auto;
}
.tk-resp__assign {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.tk-resp__assign select {
    flex: 1 1 200px;
    min-width: 0;
    width: auto;
}
.tk-resp__task {
    margin-top: 12px;
}

/* ============================================================
   Доступы к сайтам
   ============================================================ */

/* Небольшая иконочная кнопка (правка/удаление/копирование). */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--muted);
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
.icon-btn:hover {
    background: var(--line-soft);
    color: var(--ink);
}

/* Более широкая панель для карточки доступов. */
.drawer--wide {
    width: min(680px, 100%);
}

/* ---------- Сетка карточек ---------- */
.vault-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin-top: 6px;
}
.vault-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--panel);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.vault-tile:hover {
    border-color: var(--ink);
    box-shadow: var(--shadow);
}
.vault-tile:active {
    transform: translateY(1px);
}
.vault-tile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 11px;
    background: var(--accent-100);
    color: var(--ink);
}
.vault-tile__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.vault-tile__body b {
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vault-tile__meta {
    font-size: 12.5px;
    color: var(--muted);
}
/* «Свои сервисы» (без клиента) — тёплый фон и акцентная иконка,
   чтобы отличалась от карточек клиентов. */
.vault-tile--own {
    background: var(--warm);
}
.vault-tile--own .vault-tile__icon {
    background: var(--accent);
}

/* ---------- Сайт в карточке ---------- */
.vault-site {
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 14px 16px;
    margin-bottom: 14px;
}
.vault-site__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.vault-site__title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.vault-site__title b {
    font-size: 15px;
}
.vault-site__title a {
    font-size: 13px;
    color: var(--muted);
    text-decoration: none;
    word-break: break-all;
}
.vault-site__title a:hover {
    color: var(--ink);
    text-decoration: underline;
}
.vault-tools {
    display: inline-flex;
    gap: 2px;
    flex: none;
}

/* ---------- Доступы сайта ---------- */
.vault-creds {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}
.vault-cred {
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    background: var(--warm);
    padding: 10px 12px;
}
.vault-cred__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.vault-cred__fields {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Копируемое поле: подпись · значение (копируется по клику) · кнопки. */
.vf {
    display: flex;
    align-items: center;
    gap: 8px;
}
.vf__k {
    flex: none;
    width: 58px;
    font-size: 11.5px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.vf__v {
    flex: 1;
    min-width: 0;
    font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size: 13px;
    color: var(--ink);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 6px 10px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: border-color .15s, background-color .15s;
}
.vf__v:hover {
    border-color: var(--ink);
}
.vf__v--secret {
    letter-spacing: .12em;
}
.vf--empty .vf__v {
    color: var(--muted);
    cursor: default;
    font-family: var(--ui);
    letter-spacing: normal;
}
.vf--empty .vf__v:hover {
    border-color: var(--line);
}
.vf__btn {
    width: 28px;
    height: 28px;
    flex: none;
}

.vault-hint {
    font-size: 13px;
    color: var(--muted);
    margin: 4px 0;
}

@media (max-width: 560px) {
    .vf {
        flex-wrap: wrap;
    }
    .vf__k {
        width: 100%;
    }
}

/* End */


/* Start:/local/templates/logicloud_crm/template_styles.css?1788389949323*/
/* Стили шаблона живут в css/app.css — он подключается через Asset
   в header.php. Этот файл Битрикс подключает автоматически;
   держим его для локальных правок, не относящихся к прототипу. */

/* End */
/* /local/templates/logicloud_crm/css/app.css?1792100601135084 */
/* /local/templates/logicloud_crm/template_styles.css?1788389949323 */